/* ==========================================================
   PAYLASILAN UST HEADER + MENU -- inc/header-menu.php ile birlikte
   kullanilir. index.php ve diger genel sayfalardaki anasayfa.css
   header kurallarinin AYNISI, ama SADECE header'a ait secicilerle
   sinirlandirilmis bir kopyasi -- boylece panel (adeko/*) ve auth
   (giris/kayit/sifremi-unuttum/misafir-giris) sayfalarina eklendiginde
   anasayfa.css'in body/img/a gibi GENEL resetleri o sayfalarin kendi
   tasarimini BOZMAZ.
   ========================================================== */

:root {
    --sh-kagit-cizgi: #d7e0ea;
    --sh-lacivert: #1C3A5C;
    --sh-turuncu: #ea6a1f;
    --sh-turuncu-koyu: #c8570f;
    --sh-murekkep: #171a22;
    --sh-font-govde: 'Inter', -apple-system, sans-serif;
}

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(238,242,247,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sh-kagit-cizgi);
    font-family: var(--sh-font-govde);
}
.site-header .kapsayici { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 72px; box-sizing: border-box; }
.site-logo { flex-shrink: 0; margin-left: -22px; }
.site-logo img { height: 60px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; margin: 0; }
.site-nav a {
    font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--sh-murekkep);
    position: relative; padding: 4px 0;
}
.site-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
    background: var(--sh-turuncu); transition: right .2s ease;
}
.site-nav a:hover::after { right: 0; }
.site-nav a { color: var(--sh-murekkep); }
.site-nav a.aktif { color: var(--sh-turuncu); }
.site-nav a.aktif::after { right: 0; }

.site-nav-acilir { position: relative; }
.site-nav-acilir-btn {
    background: none; border: none; cursor: pointer; font: inherit; color: var(--sh-murekkep);
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: 14.5px; font-weight: 600;
}
.site-nav-acilir-btn svg { transition: transform .2s ease; flex-shrink: 0; }
.site-nav-acilir.aktif-sayfa .site-nav-acilir-btn { color: var(--sh-turuncu); }
.site-nav-acilir-liste {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    /* GORUNMEZ kopru -- buton ile kutunun arasindaki gorsel boslugu
       PADDING olarak veriyoruz (gap DEGIL), boylece fare buton -> liste
       arasinda gecerken .site-nav-acilir'in hover alaninda KESINTISIZ
       kalir. Eskiden "top: calc(100% + 14px)" seklinde gercek bir GAP
       vardi -- fare o 14px'lik bosluktan gecerken hover kopup liste
       aninda kapaniyordu. */
    padding-top: 14px;
    display: none; z-index: 50;
}
.site-nav-acilir-liste-kutu {
    background: #fff; border: 1px solid var(--sh-kagit-cizgi); border-radius: 8px;
    box-shadow: 0 12px 28px -8px rgba(15,23,55,.25);
    min-width: 190px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.site-nav-acilir-liste a {
    padding: 9px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--sh-murekkep);
    text-decoration: none; white-space: nowrap;
}
.site-nav-acilir-liste a:hover { background: #eef2f7; }
.site-nav-acilir-liste a.aktif { background: #eef2f7; color: var(--sh-turuncu); }
.site-nav-indir-link { display: flex !important; align-items: center; gap: 5px; color: #6b7086 !important; }
.site-nav-indir-link svg { flex-shrink: 0; }
.site-nav-indir-link.uy-aktif { color: var(--sh-turuncu) !important; }
@keyframes uy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.uy-ikon.uy-donen { animation: uy-spin 0.8s linear infinite; }
.site-nav-acilir:hover .site-nav-acilir-liste,
.site-nav-acilir.acik .site-nav-acilir-liste { display: block; }
.site-nav-acilir:hover .site-nav-acilir-btn svg,
.site-nav-acilir.acik .site-nav-acilir-btn svg { transform: rotate(180deg); }

.header-aksiyonlar { display: flex; align-items: center; gap: 10px; }

.site-alt-nav { background: var(--sh-lacivert); }
.site-alt-nav-ic { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; display: flex !important; gap: 2px; height: 36px !important; min-height: 36px !important; max-height: 30px !important; align-items: center; overflow-x: auto; }
.site-alt-nav-ic a {
    color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
    padding: 1px 9px !important; border-radius: 5px; white-space: nowrap; line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}
.site-alt-nav-ic a:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-alt-nav-ic a.aktif { background: rgba(255,255,255,.22); color: #fff; }

.site-header .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sh-font-govde); font-weight: 700; font-size: 14px;
    padding: 11px 20px; border-radius: 4px; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.site-header .btn:hover { transform: translateY(-1px); }
.site-header .btn-hat { border-color: var(--sh-lacivert); color: var(--sh-lacivert); background: transparent; }
.site-header .btn-hat:hover { background: var(--sh-lacivert); color: #fff; }
.site-header .btn-dolu { background: var(--sh-turuncu); color: #fff; }
.site-header .btn-dolu:hover { background: var(--sh-turuncu-koyu); }
.site-header .btn-kucuk { padding: 8px 14px; font-size: 13px; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--sh-murekkep); margin: 5px 0; }
/* ==========================================================
   MOBIL ALT SEKME CUBUGU (uygulama-tarzi) -- SADECE mobilde, giris
   durumundan bagimsiz baslangicta (asagida giris yapilmislarda ayrica
   gizlenir). Anasayfa/Renkler/Kapak Modelleri kisayollari.
   ========================================================== */
.site-bottom-tabbar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--sh-kagit-cizgi);
    box-shadow: 0 -4px 16px rgba(15,23,55,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.site-bottom-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px; text-decoration: none; color: var(--sh-murekkep-soft, #6b6a64);
    font-size: 10.5px; font-weight: 600; text-align: center;
}
.site-bottom-tabbar a svg { flex-shrink: 0; }
.site-bottom-tabbar a.aktif { color: var(--sh-turuncu); }

/* ================= WHATSAPP FLOATING =================
   Uye panel sayfalarinda -- UyeMenu::goster() tarafindan eklenir,
   anasayfadaki (inc/site-footer.php) ile AYNI ikon/davranis. */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 200;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ==========================================================
   ASAGIDAKI TUM KURALLAR SADECE MOBILDE (max-width:720px) GECERLI.
   Masaustunde (giris yapilmis olsun olmasin) header HICBIR SEKILDE
   degismez -- logo solda, .site-nav yan yana gorunur, aksiyonlar
   sagda, .site-alt-nav normal sekilde gorunur. Kompakt (hamburger
   solda/logo ortada/aksiyonlar sagda) duzen SADECE bu media query
   icinde devreye girer, giris durumundan BAGIMSIZ -- mobilde herkes
   ayni kompakt duzeni gorur, sadece sag ust aksiyon (Giris Yap ya da
   Panelim+Cikis) ve alt-nav/alt-sekme farklari degisir.
   ========================================================== */
@media (max-width: 720px) {
    .site-nav { position: fixed; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column;
        align-items: flex-start; padding: 20px 24px; gap: 18px; border-bottom: 1px solid var(--sh-kagit-cizgi);
        transform: translateY(-130%); transition: transform .25s ease; z-index: 99; margin: 0; max-height: 80vh; overflow-y: auto; }
    .site-nav.acik { transform: translateY(0); }
    .menu-toggle { display: block; }

    /* DUZELTME (2026-09): Renkler/Kapak Modelleri -- SADECE mobilde
       yer degistirir: .site-alt-nav-ic'teki ASIL linkler gizlenir,
       .site-nav (hamburger) icindeki kopyalari gorunur olur. Baska
       HICBIR link/davranis etkilenmedi, masaustu (bu media query
       DISI) HICBIR SEKILDE degismiyor. */
    .site-alt-nav-masaustu-ozel { display: none !important; }
    .site-nav-mobil-ozel { display: block; }
    .header-aksiyonlar .btn { padding: 9px 14px; font-size: 13px; }

    /* Hamburger solda / logo tam ortada / aksiyonlar sagda -- giris
       durumundan bagimsiz, SADECE bu genislikte. Logo GRID yerine
       ABSOLUTE ile ortalanir -- menu-toggle ile header-aksiyonlar
       (Panelim/Giris Yap) FARKLI genislikte oldugu icin grid'in iki
       1fr sutunu ESIT GORUNSE de ICERIK genislikleri farkli oldugunda
       GERCEKTE esit olmuyordu (fr birimleri once icerigin minimum
       genisligini karsilar, KALAN alani esit boler -- logo bu yuzden
       kayiyordu). Absolute+transform, iki yanin genisliginden
       TAMAMEN bagimsiz, matematiksel olarak KESIN ortalama saglar. */
    .site-header .kapsayici {
        position: relative;
        display: flex; align-items: center; justify-content: space-between;
    }
    .site-header .site-logo {
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;
    }
    .site-header .site-logo img { height: 44px; max-width: 147px; width: auto; }

    /* Mobilde hover yok (dokunmatik) -- acilir menu SADECE tiklamayla
       acilir/kapanir, ve dikey listenin icinde akordiyon gibi genisler
       (masaustundeki gibi ayri bir kutu olarak ustune BINMEZ). */
    .site-nav-acilir { width: 100%; }
    .site-nav-acilir-btn { width: 100%; justify-content: space-between; font-size: 16px; }
    .site-nav-acilir-liste { position: static; transform: none; padding-top: 0; width: 100%; }
    .site-nav-acilir-liste-kutu { background: none; border: none; box-shadow: none; padding: 4px 0 0 12px; min-width: 0; }
    .site-nav-acilir:hover .site-nav-acilir-liste { display: none; }
    .site-nav-acilir.acik .site-nav-acilir-liste { display: block; }

    /* Alt-nav mobilde SADECE giris yapilmis panelde kalkar (uyenin
       kendi UyeMenu'su zaten var, ayni yerde "Renkler" gibi genel
       pazarlama linklerine gerek yok). ZIYARETCI icin (giris
       yapilmamis) mobilde de GORUNUR kalir, tipki masaustunde
       oldugu gibi. */
    body:has(.site-header-panel) .site-alt-nav { display: none; }

    .site-bottom-tabbar { display: flex !important; }
    body { padding-bottom: 58px; }

    /* Sabit WhatsApp balonu alt sekme cubuguyla CAKISIYORDU -- balonu
       cubugun USTUNE ceker (anasayfadaki ile ayni deger). */
    /* WhatsApp artik alt sekme cubugunun icinde (en sagda) -- mobilde
       ayni zamanda sabit/yuzen balonu da gostermek TEKRARA sebep
       olurdu, o yuzden mobilde balon tamamen gizlenir (masaustunde
       -- bu media query disinda -- aynen gorunmeye devam eder). */
    .wa-float { display: none; }
}