/* =========================================
   ANA SAYFA (VİTRİN) ÖZEL TASARIMLARI
   ========================================= */
.ana-sayfa {
    background-color: #111111; /* Kurumsal siyah arka plan */
    /* İstersen ileride buraya flu bir pizza fotoğrafı da koyabiliriz */
    display: flex;
    justify-content: center;
    align-items: center;
    display: block; 
    padding-top: 20px;
    margin: 0;
}

.vitrin-kutu {
    background-color: #8fa0e2;
    padding: 50px 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border-top: 6px solid #dd9ded;
    width: 90%;
    max-width: 450px;

    /* --- İŞTE BURASI KRİTİK --- */
    margin: 80px auto; /* 80px üstten/alttan boşluk bırakır, 'auto' ise sağ ve soldan ortalar */
}

.marka-isim {
    color: #111111;
    font-size: 2.2em;
    margin: 0 0 5px 0;
}

.marka-slogan {
    color: #666666;
    font-size: 1.1em;
    margin-bottom: 30px;
}

/* Ana Sayfa Butonları */
.buton {
    display: block;
    width: 90%;
    margin: 15px auto;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: transform 0.2s, opacity 0.2s;
}

.buton:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

.menu-btn {
    background-color: #e50000; /* Endless Kırmızısı */
    color: white;
    font-size: 1.1em;
    box-shadow: 0 4px 10px rgba(229, 0, 0, 0.3);
}

.instagram-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.harita-btn {
    background-color: #111111; /* Siyah */
    color: white;
}

/* (Buradan aşağısı senin halihazırda var olan menü kodların olarak devam edecek...) */




/* =========================================
   GENEL AYARLAR VE KURUMSAL RENKLER
   ========================================= */
body {
    background-color: #f8f9fa; /* Resmi siteye uygun daha açık bir gri/beyaz */
    color: #2b2b2b;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Üst Header (Logo ve Slogan) */
.kurumsal-header {
    background-color: #111111; /* Koyu siyah kurumsal üst bant */
    color: white;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.logo-alani h1 { margin: 0; font-size: 1.8em; color: #e50000; /* Endless Kırmızısı */ }
.logo-alani .slogan { margin: 5px 0 0 0; font-size: 0.85em; color: #cccccc; }

.geri-btn {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ffffff;
    padding: 8px 15px;
    border-radius: 20px;
    transition: 0.3s;
}
.geri-btn:hover { background-color: #ffffff; color: #111111; }

/* Menü Kutusu ve Şerit */
.menu-kutu {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
}

.menu-baslik {
    color: #111111;
    font-size: 1.5em;
    border-bottom: 2px solid #e50000;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Fırsat ve Kampanyalar Şeridi */
.firsat-seridi {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 0 30px 0;
    scrollbar-width: none; 
}
.firsat-seridi::-webkit-scrollbar { display: none; }

/* Kart Tasarımı (Resmi siteye benzer) */
/* style.css içindeki mevcut .firsat-kart kodunun güncellenmiş hali */
.firsat-kart {
    display: flex; /* Gizlenenler tekrar açıldığında düzgün görünsün diye */
    min-width: 270px;
    /* --- YENİ EKLENEN KISIM --- */
    /* Arka plan resmi ve rengi */
    background-image: url('arka-plan.jpg'); /* Buraya kendi resminin adını yazacaksın */
    background-color: #4f7942; /* Resim yüklenmezse görünecek Haki Yeşil fon */
    background-size: cover; /* Resmi kartı tamamen kaplayacak şekilde boyutlandırır */
    background-position: center; /* Resmi kartın ortasına hizalar */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    /* --- YENİ EKLENEN KISIM SONU --- */
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Gölgeyi biraz daha belirginleştirdik */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eeeeee;
    transition: transform 0.2s, box-shadow 0.2s; /* Üzerine gelince animasyon için */
}

/* Rozetler */
.rozet {
    position: absolute;
    top: 15px;
    left: 15px;
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
}
.rozet.kirmizi { background-color: #e50000; }
.rozet.siyah { background-color: #111111; }
.rozet.mor { background-color: #8e44ad; }

.firsat-kart img {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 10px;
}

.kart-baslik {
    color: #111111;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.malzeme-detay {
    font-size: 0.8em;
    color: #666666;
    margin-bottom: 20px;
    line-height: 1.4;
    min-height: 40px; /* Kartların boylarının eşit kalması için */
}

/* Fiyat ve Buton */
.kart-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
}

.fiyat {
    color: #e50000; /* Kurumsal Kırmızı */
    font-size: 1.3em;
    font-weight: bold;
}

.siparis-btn {
    background-color: #111111;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.siparis-btn:hover { background-color: #e50000; }

/* İletişim Bilgileri Alanı */
.iletisim-bilgileri {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #444;
}
.iletisim-bilgileri strong { color: #111111; }
/* =========================================
   KAYDIRMA OKLARI VE KAPSAYICI
   ========================================= */
.serit-kapsayici {
    position: relative; /* Okların bu kutuya göre hizalanmasını sağlar */
    display: flex;
    align-items: center;
}

/* Şeridin genişliğini tam oturtalım */
.firsat-seridi {
    width: 100%;
}

.kaydir-btn {
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: absolute; /* Şeridin üzerine bindirir */
    z-index: 10; /* Okların pizzaların altında kalmasını engeller */
    transition: all 0.2s ease;
}

.kaydir-btn:hover {
    background-color: #e50000; /* Üzerine gelince Endless Kırmızısı olsun */
    color: #ffffff;
    transform: scale(1.1); /* Hafifçe büyüsün */
}

/* Okların Konumları */
.sol-ok {
    left: -20px; /* Kutunun solundan biraz dışarı taşsın */
}

.sag-ok {
    right: -20px; /* Kutunun sağından biraz dışarı taşsın */
}

/* Telefon ekranlarında (dokunmatik cihazlarda) oklara gerek yok, onları gizleyelim */
@media (max-width: 768px) {
    .kaydir-btn {
        display: none;
    }
}
/* =========================================
   DEV SINIRSIZ KAMPANYA ALANI
   ========================================= */
.sinirsiz-kampanya {
    /* Arka plan resmi ve yedek mavi renk */
    background-image: url('sinirsiz-arkaplan.jpg'); /* Resmin adını buraya yazacaksın */
    background-color: #0056b3; /* Resim yokken görünecek şık, iştah açıcı bir mavi */
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 50px; /* Alttaki pizzaları aşağı iter */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border: 3px solid #003d82; /* Kutuya derinlik katar */
    position: relative;
    overflow: hidden;
}

/* Yazıların okunabilirliğini artırmak için gölge */
.sinirsiz-icerik {
    position: relative;
    z-index: 2;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.8);
}

.dev-baslik {
    font-size: 3.5em; /* Kocaman yazılar */
    margin: 5px 0;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff; /* Beyaz renk */
    text-transform: uppercase;
}

/* İçecek ve Tatlı yazılarına biraz hareket katarız */
.dev-baslik.sari-vurgu {
    color: #ffc107; /* Dikkat çekici sarı tonu */
    font-size: 2.5em; /* Ana başlıktan bir tık küçük */
}

.sinirsiz-fiyat {
    font-size: 1.5em;
    margin-top: 30px;
    color: #ffffff;
    font-weight: bold;
}

/* Fiyatı devasa bir etiket içine alıyoruz */
.fiyat-etiketi {
    font-size: 2.2em;
    color: #e50000; /* Endless Kırmızısı */
    background-color: #ffffff; /* Beyaz Zemin */
    padding: 10px 25px;
    border-radius: 12px;
    display: inline-block;
    margin-left: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    text-shadow: none; /* Kutunun içindeki yazıya gölge olmasın ki net okunsun */
}

/* Telefon ekranlarında yazıların dışarı taşmaması için boyutları küçültelim */
@media (max-width: 768px) {
    .dev-baslik { font-size: 2.2em; }
    .dev-baslik.sari-vurgu { font-size: 1.8em; }
    .fiyat-etiketi { font-size: 1.5em; padding: 8px 15px; display: block; margin: 15px auto 0; width: max-content; }
}
/* =========================================
   KATEGORİ MENÜSÜ (FİLTRELEME ÇUBUĞU)
   ========================================= */
/* Güncellenmiş Kategori Menüsü (Kaydırma özelliği listeye taşındı) */
.kategori-menusu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #171a21; 
    border-radius: 40px; 
    padding: 8px 12px;
    margin-bottom: 40px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    gap: 8px; /* Oklar ve butonlar arası boşluk */
}

/* Sadece yazılar kayacak */
.kategori-listesi {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
    overflow-x: auto; 
    scrollbar-width: none; /* Çubuğu gizler */
}

.kategori-listesi::-webkit-scrollbar { 
    display: none; 
}

/* YENİ: Kategori Menüsü Ok Tasarımı */
.kategori-ok {
    background-color: transparent;
    color: #a0a5b1; /* İnaktif menü rengiyle aynı gri/mavi ton */
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.kategori-ok:hover {
    color: #ffffff; /* Üzerine gelince parlar */
}

/* Telefonlarda okları gizleyelim (Parmakla kaydırıldığı için) */
@media (max-width: 768px) {
    .kategori-ok {
        display: none;
    }
}

.kategori-link {
    color: #a0a5b1; /* Görseldeki soluk gri/mavi inaktif yazı rengi */
    text-decoration: none;
    font-size: 0.95em;
    padding: 10px 20px;
    border-radius: 30px;
    white-space: nowrap; /* Yazıların asla alt satıra inmemesini sağlar */
    transition: all 0.2s ease;
}

.kategori-link:hover {
    color: #ffffff; /* Üzerine gelince yazıyı beyaz yapar */
}

/* Aktif (Seçili) Olan Kategorinin Tasarımı */
.kategori-link.aktif {
    background-color: #e50000; /* Endless Kırmızısı */
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(229, 0, 0, 0.4);
}

/* Sağdaki Filtrele Butonu */
.filtre-btn {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 30px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 15px; /* Menü linkleriyle arasına mesafe koyar */
    transition: 0.2s;
}

.filtre-btn:hover {
    background-color: #ffffff;
    color: #171a21; /* Üzerine gelince içi beyaz, yazısı koyu olur */
}
/* =========================================
   AÇILIR FİLTRE MENÜSÜ TASARIMLARI
   ========================================= */
.filtre-kapsayici {
    position: relative;
    display: inline-block;
}

.filtre-acilir-menu {
    display: none; /* Normalde gizlidir, butona basınca JS ile açılır */
    position: absolute;
    right: 0;
    top: 130%; /* Butonun hemen altında başlasın */
    background-color: #171a21;
    min-width: 180px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
    border-radius: 12px;
    border: 1px solid #333333;
    z-index: 100; /* Tüm pizzaların üstünde durmasını sağlar */
    overflow: hidden; /* Köşelerin yuvarlak kalması için */
}

/* JavaScript 'goster' sınıfını ekleyince menü görünür olur */
.filtre-acilir-menu.goster {
    display: block;
    animation: asagiAkil 0.2s ease; /* Hafif bir kayma animasyonu */
}

@keyframes asagiAkil {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Menünün içindeki her bir seçenek */
.filtre-secenek {
    color: #a0a5b1;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95em;
    transition: all 0.2s;
    border-bottom: 1px solid #222;
}

/* GÖRSEL GERİ DÖNÜŞ (HOVER): Fare üzerine gelince */
.filtre-secenek:hover {
    background-color: #2b303b;
    color: #ffffff;
    padding-left: 20px; /* Fareyle üzerine gelince yazı hafifçe sağa kayar! Çok şıktır */
}

/* GÖRSEL GERİ DÖNÜŞ (AKTİF): Tıklanmış olan seçenek */
.filtre-secenek.aktif {
    background-color: #e50000; /* Endless Kırmızısı */
    color: #ffffff;
    font-weight: bold;
}
/* =========================================
   HAKKIMIZDA SAYFASI TASARIMLARI
   ========================================= */
.alt-sayfa {
    background-color: #1b4b7b;
}

.icerik-kutu {
    width: 90%;
    max-width: 900px;
    margin: 40px auto;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden; 
}

/* Sayfanın En Üstündeki Siyah/Kırmızı Karşılama Alanı */
.hakkimizda-kapak {
    background-color: #111111; /* Endless Siyahı */
    color: #ffffff;
    padding: 60px 40px;
    text-align: center;
    border-bottom: 5px solid #e50000; /* Endless Kırmızısı */
}

.hakkimizda-kapak p {
    font-size: 1.2em;
    color: #cccccc;
    margin-top: 15px;
    line-height: 1.6;
}

/* Yazı Alanları */
.metin-alani {
    padding: 40px;
    color: #444444;
    line-height: 1.8;
    font-size: 1.05em;
    border-bottom: 1px solid #eeeeee;
}

.kirmizi-baslik {
    color: #e50000;
    font-size: 1.8em;
    margin-bottom: 20px;
}

/* Konsept Kuralları (Yan yana dizilen 3'lü kartlar) */
.kural-kartlari {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.kural-kart {
    flex: 1; /* 3 kartın eşit genişlikte olmasını sağlar */
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #f0f0f0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.kural-kart:hover {
    transform: translateY(-8px); 
    box-shadow: 0 10px 20px rgba(229, 0, 0, 0.1);
    border-color: #e50000; /* Üzerine gelince kenarları kırmızı olur */
}

.kural-ikon {
    font-size: 3em;
    margin-bottom: 15px;
}

.kural-kart h4 {
    color: #111111;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.kural-kart p {
    font-size: 0.9em;
    color: #666666;
    line-height: 1.5;
}

/* Telefon ekranları için kartları alt alta diz */
@media (max-width: 768px) {
    .kural-kartlari {
        flex-direction: column; 
    }
}
.ust-nav {
    background-color: #111111;
    padding: 15px 0;
    position: sticky; /* Sayfayı kaydırsan da tepede kalır */
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid #e50000;
}

.nav-icerik {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   HOTBAR LİNK RENKLERİ (GÜNCELLENDİ)
   ========================================= */
.nav-linkler a {
    color: #ffffff; /* Ana renk BEYAZ (Dilersen #ffc107 yaparak SARI yapabilirsin) */
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    font-size: 0.95em;
    transition: 0.3s ease; /* Renk geçişi yumuşak olsun */
    border-bottom: 2px solid transparent; /* Alttaki çizgi gizli başlasın */
    padding-bottom: 5px;
}

/* Fare üzerine geldiğinde (Hover) */
.nav-linkler a:hover {
    color: #ffc107; /* Üzerine gelince SARI parlasın */
}

/* İŞTE SİHİRLİ DOKUNUŞ: Sadece aktif olan sayfa KIRMIZI olacak */
.nav-linkler a.aktif-link {
    color: #e50000 !important; /* Endless Kırmızısı */
    border-bottom: 2px solid #419d94; /* Altına kırmızı bir çizgi ekleyelim, çok havalı durur */
}

.nav-siparis-btn {
    background-color: #e50000;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
}