/* Germia Coffee v3.0 - Ultra Modern Tasarım Sistemi */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');

:root {
    --beyaz: rgba(255, 255, 255, 0.75); /* Cam efekti için transparan beyaz */
    --krem: #F5F5F7; /* Apple tarzı açık gri/krem arkaplan */
    --altin: #D4AF37; /* Daha premium bir altın sarısı */
    --espresso: #1D1D1F; /* Antrasit siyahına yakın kahve/siyah */
    --mocha: #86868B; /* Modern gri metin rengi */
    --cam-golge: 0 10px 40px rgba(0, 0, 0, 0.04);
    --cam-kenar: 1px solid rgba(255, 255, 255, 0.6);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--krem);
    color: var(--espresso);
    margin: 0; 
    padding-bottom: 100px; /* Alttaki yüzen menü için boşluk */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
    letter-spacing: -0.5px;
}

/* --- GLASSMORPHISM ORTAK KART YAPISI --- */
.kategori-kart, .urun-liste-kart {
    background: var(--beyaz);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--cam-kenar);
    box-shadow: var(--cam-golge);
    animation: asagidanGel 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; /* Ortak Giriş Animasyonu */
}

/* Animasyon Gecikmeleri (Sırayla Ekrana Düşmeleri İçin) */
.row > div:nth-child(1) .kategori-kart { animation-delay: 0.1s; }
.row > div:nth-child(2) .kategori-kart { animation-delay: 0.2s; }
.row > div:nth-child(3) .kategori-kart { animation-delay: 0.3s; }
.row > div:nth-child(4) .kategori-kart { animation-delay: 0.4s; }
.urun-liste-kart:nth-child(1) { animation-delay: 0.1s; }
.urun-liste-kart:nth-child(2) { animation-delay: 0.2s; }
.urun-liste-kart:nth-child(3) { animation-delay: 0.3s; }

/* Kategori Kareleri */
.kategori-kart {
    position: relative;
    height: 160px; 
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.kategori-kart:active { transform: scale(0.95); }
.kategori-kart img {
    position: absolute;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.6) saturate(1.2); 
    z-index: 1;
    transition: transform 0.5s ease;
}
.kategori-kart:hover img { transform: scale(1.05); }
.kategori-kart span {
    position: relative;
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    z-index: 2;
    text-align: center;
    padding: 0 10px;
}

/* Yatay Akış (Bunları Beğenebilirsiniz) */
.yatay-akıs {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    padding: 10px 5px 25px 5px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.akıs-oge { 
    min-width: 140px; 
    text-align: center; 
    scroll-snap-align: start;
    animation: asagidanGel 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.akıs-oge:nth-child(1) { animation-delay: 0.1s; }
.akıs-oge:nth-child(2) { animation-delay: 0.2s; }
.akıs-oge:nth-child(3) { animation-delay: 0.3s; }

.akıs-oge img {
    width: 140px; height: 140px;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: var(--cam-golge);
    border: var(--cam-kenar);
}
.akıs-oge p { font-weight: 600; color: var(--espresso); letter-spacing: -0.3px; }

/* Ürün Liste Görünümü */
.urun-liste-kart {
    border-radius: 24px;
    padding: 12px;
    margin-bottom: 18px;
}
.urun-liste-kart img {
    width: 100px; height: 100px;
    border-radius: 20px;
    object-fit: cover;
    margin-right: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Şık Fiyat Etiketi */
.fiyat-etiketi {
    background-color: var(--espresso);
    color: white !important;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(29, 29, 31, 0.2);
}

/* --- YÜZEN ALT MENÜ (FLOATING BOTTOM NAV) --- */
.alt-menu-kapsayici {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
    border: var(--cam-kenar);
    z-index: 999;
}
.alt-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--mocha);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.alt-menu-link i { font-size: 1.4rem; margin-bottom: 2px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.alt-menu-link.aktif { color: var(--espresso); font-weight: 600; }
.alt-menu-link.aktif i { color: var(--altin); transform: translateY(-4px) scale(1.1); }

/* Giriş Animasyonu Keyframe */
@keyframes asagidanGel {
    0% { opacity: 0; transform: translateY(30px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}