/* =========================================
   MENU.CSS (Sadece Menü Sayfası Bileşenleri)
========================================= */

/* --- HERO BÖLÜMÜ --- */
.hero-section {
    background: linear-gradient(to bottom, rgba(13, 13, 15, 0.4), rgba(13, 13, 15, 1)), url('/assets/front/rotasahne/images/menu.avif') center/cover;
    padding: 60px 20px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo {
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 2px;
}

/* --- KATEGORİ NAVİGASYONU (Yatay Kaydırma) --- */
.category-nav {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    /* IE ve Edge */
    scrollbar-width: none;
    /* Firefox */
}

.category-nav::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.cat-btn {
    background: transparent;
    border: none;
    /* Görseldeki gibi pasif butonlara hafif krem/saydam beyaz bir ton veriyoruz */
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 70px;
    /* Tüm butonları eşit boyda tutmak için sabit yükseklik */
    padding: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover efekti (İsteğe bağlı - kullanıcı deneyimini artırır) */
.cat-btn:hover {
    color: #ffffff;
}

.cat-btn.active {
    /* Görseldeki turuncu/sarı arka plan */
    background-color: var(--brand-yellow, #d48c3b);
    /* Görseldeki gibi yazıyı ve ikonu beyaz yapıyoruz */
    color: #ffffff;
    /* Görseldeki gibi daha keskin/hafif yuvarlatılmış köşeler */
    border-radius: 4px;
}

.cat-btn i {
    font-size: 20px;
    /* HTML'de mb-1 kullanmışsınız, ekstra margin gerekmiyorsa burayı silebilirsiniz */
}

/* --- MENÜ BAŞLIKLARI --- */
.section-title {
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

/* --- MENÜ KARTLARI (Responsive İskelet) --- */
.menu-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
    height: 100%;
    transition: transform 0.2s, border-color 0.2s;
}

.menu-card:hover {
    transform: translateY(-3px);
    border-color: rgba(248, 200, 34, 0.3);
}

.item-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.item-desc {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 15px;
    line-height: 1.4;
}

.price-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.price {
    color: var(--brand-yellow);
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-add {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add:hover {
    background: var(--brand-yellow);
    color: #000;
    border-color: var(--brand-yellow);
}

/* =========================================
   MEDIA QUERIES (Mobil ve Masaüstü Uyumu)
========================================= */

/* MOBİL (767px altı) - Yatay Kart Görünümü */
@media (max-width: 767px) {
    .menu-card {
        display: flex;
        flex-direction: row;
        height: auto;
    }

    .menu-card img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 12px;
        margin: 10px;
    }

    .menu-card-body {
        padding: 15px 15px 15px 5px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

/* MASAÜSTÜ (768px üstü) - Dikey Kart Görünümü */
/* --- MEDIA QUERIES (Mobil ve Masaüstü Uyumu) --- */

/* MOBİL (767px altı) - Yatay Kart Görünümü (GÜNCELLENDİ) */
@media (max-width: 767px) {
    .menu-card {
        display: flex;
        flex-direction: row;
        height: auto;
    }

    .menu-card img {
        /* Görsel boyutu mobilde küçültüldü (110px'den 90px'e) */
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 12px;
        margin: 10px;
    }

    .menu-card-body {
        /* Kart gövdesi padding'i biraz azaltıldı */
        padding: 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* İçeriği dikeyde ortala */
    }

    .item-title {
        font-size: 0.9rem;
        /* Mobilde başlık biraz küçültüldü */
    }

    .item-desc {
        font-size: 0.75rem;
        /* Mobilde açıklama biraz küçültüldü */
        margin-bottom: 10px;
    }

    .price-add {
        margin-top: 5px;
        /* Fiyat bölümü üst boşluğu */
    }

    .price {
        font-size: 1rem;
        /* Mobilde fiyat boyutu dengelendi */
    }
}

/* MASAÜSTÜ (768px üstü) - Dikey Kart Görünümü */
/* --- MEDIA QUERIES (Mobil ve Masaüstü Uyumu) --- */

/* MOBİL (767px altı) - Yatay Kart Görünümü (GÜNCELLENDİ) */
@media (max-width: 767px) {
    .menu-card {
        display: flex;
        flex-direction: row;
        height: auto;
    }

    .menu-card img {
        /* Görsel boyutu mobilde küçültüldü (110px'den 90px'e) */
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 12px;
        margin: 10px;
    }

    .menu-card-body {
        /* Kart gövdesi padding'i biraz azaltıldı */
        padding: 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* İçeriği dikeyde ortala */
    }

    .item-title {
        font-size: 0.9rem;
        /* Mobilde başlık biraz küçültüldü */
    }

    .item-desc {
        font-size: 0.75rem;
        /* Mobilde açıklama biraz küçültüldü */
        margin-bottom: 10px;
    }

    .price-add {
        margin-top: 5px;
        /* Fiyat bölümü üst boşluğu */
    }

    .price {
        font-size: 1rem;
        /* Mobilde fiyat boyutu dengelendi */
    }
}

/* MASAÜSTÜ (768px üstü) - Dikey Kart Görünümü */
@media (min-width: 768px) {
    .menu-card {
        display: flex;
        flex-direction: column;
    }

    .menu-card img {
        width: 100%;
        height: 200px !important;
        object-fit: cover;
    }

    .menu-card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

/* --- GÖRSEL VE ROZET KAPSAYICISI --- */
.menu-card-image-wrap {
    position: relative;
    overflow: hidden;
}

.menu-card img {
    object-fit: cover;
    transition: transform 0.3s;
    /* Yuvarlak köşeleri tüm cihazlar için varsayılan yapıyoruz */
    border-radius: 12px;
}

.menu-card:hover img {
    transform: scale(1.05);
}

/* =========================================
   MEDIA QUERIES (Mobil ve Masaüstü Uyumu)
========================================= */

/* MOBİL (767px altı) - Yatay Kart Görünümü */
@media (max-width: 767px) {
    .menu-card {
        display: flex;
        flex-direction: row;
        height: auto;
    }

    .menu-card img {
        width: 100px;
        height: 100px;
        margin: 10px;
    }

    .menu-card-body {
        padding: 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .item-title {
        font-size: 0.9rem;
    }

    .item-desc {
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .price-add {
        margin-top: 5px;
    }

    .price {
        font-size: 1rem;
    }
}

/* MASAÜSTÜ (768px üstü) - Dikey Kart Görünümü */
@media (min-width: 768px) {
    .menu-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .menu-card img {
        width: 100%;
        height: 200px;
        margin: 0;
        /* Dikey görünümde sadece üst köşelerin yuvarlak olması daha şık durur */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .menu-card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}
/* --- MODERN ROZETLER (BADGES) --- */
.custom-badges {
    position: absolute;
    top: 10px; /* Üstten boşluk */
    left: 10px; /* Soldan boşluk */
    display: flex;
    flex-direction: column; /* Rozetleri alt alta dizer */
    gap: 6px;
    z-index: 10;
}

.modern-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 8px;
    line-height: 1.2;
    text-transform: uppercase;
    backdrop-filter: blur(4px); /* Arka planı hafif buzlu gösterir */
}

/* YENİ Rozeti - Soft Zümrüt Yeşili */
.badge-new {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-new i {
    font-size: 0.55rem;
}

/* POPÜLER Rozeti - Soft Alev Kırmızısı / Turuncu */
.badge-popular {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-popular i {
    font-size: 0.55rem;
}