/* ════════════════════════════════════════════════════════════════════
   HEADER TİPLERİ — Tema Yönetimi > Header Tipi seçimleri
   Tüm tipler için ortak: ince çizgi, fazla gölge yok, hizalı, minimal.
   body.header-{tip} class'ına göre devreye girer.
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   ORTAK NORMALİZASYON — kabalığın ana sebebi:
     1) top-bar koyu siyah görünüyor → ince/açık nötr
     2) header gereksiz büyük padding → 16px
     3) category-nav agresif renk → ince çizgili açık zemin
     4) action butonları geniş → kompakt
   ────────────────────────────────────────────────────────────────── */

/* Promo bar (genel) — kompakt + kapatma butonu için flex */
.bm-promo-bar {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    position: relative;
}
.bm-promo-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}
.bm-promo-bar .bm-promo-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bm-promo-bar .bm-promo-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: .65;
    font-size: 13px;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: opacity .15s, background .15s;
}
.bm-promo-bar .bm-promo-close:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* Top-bar genel sadeleştirme — koyu yerine açık nötr */
body:not(.tema-kaft) .top-bar {
    background: #fafafa !important;
    color: #555 !important;
    font-size: 12.5px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #ececec;
}
body:not(.tema-kaft) .top-bar a {
    color: #555 !important;
    min-height: 32px !important;
    min-width: auto !important;
    padding: 0 6px !important;
    gap: 5px;
    font-weight: 500;
}
body:not(.tema-kaft) .top-bar a:hover { color: var(--renk-primary) !important; }
body:not(.tema-kaft) .top-bar i { font-size: 12px; }

/* Header genel — kompakt + ince alt çizgi */
.main-header {
    box-shadow: none !important;
    border-bottom: 1px solid #eee;
}
.main-header.header-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
.header-wrapper {
    padding: 14px 0 !important;
    gap: 28px !important;
}
.header-logo img { height: 42px !important; }

/* Arama kutusu — yumuşak, ince */
.search-input-wrapper {
    border: 1.5px solid #e5e5e5 !important;
    background: #f7f7f8 !important;
    border-radius: 8px !important;
    transition: all .18s ease !important;
}
.search-input-wrapper:focus-within {
    border-color: var(--renk-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk-primary) 12%, transparent) !important;
}
.header-search input {
    padding: 10px 16px !important;
    font-size: 14px !important;
}
.search-btn {
    padding: 0 18px !important;
    font-size: 14px !important;
    background: transparent !important;
    color: #777 !important;
    transition: color .15s;
}
.search-btn:hover { color: var(--renk-primary) !important; background: transparent !important; }

/* Header aksiyon ikonları — kompakt, sade */
.header-actions { gap: 2px !important; }
.header-action-btn {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 10px !important;
    min-width: 56px !important;
    min-height: auto !important;
    color: #444 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s !important;
}
.header-action-btn:hover {
    background: #f5f5f5 !important;
    color: var(--renk-primary) !important;
}
.header-action-btn i { font-size: 18px !important; }
.cart-badge {
    top: 0 !important;
    right: 4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    border: 1.5px solid #fff;
}

/* Kategori nav genel — ince + sade */
.category-nav {
    background: #fff !important;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.category-menu > li > a {
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    padding: 12px 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.category-menu > li > a:hover,
.category-menu > li > a.active {
    background: transparent !important;
    color: var(--renk-primary) !important;
    border-bottom-color: var(--renk-primary) !important;
}

/* Submenu — minimal dropdown */
.submenu {
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    padding: 6px !important;
    margin-top: 0 !important;
}
.submenu li a {
    border-bottom: 0 !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    min-height: 36px !important;
    font-size: 13.5px !important;
    transition: background .12s !important;
}
.submenu li a:hover {
    background: #f7f7f8 !important;
    padding-left: 14px !important;
}

/* ──────────────────────────────────────────────────────────────────
   1) KLASİK — Topbar + Header + Kategori (3 katman)
   ────────────────────────────────────────────────────────────────── */
body.header-klasik .top-bar { display: block; }
body.header-klasik .main-header .category-nav { display: block; }
body.header-klasik .header-search { display: block; }

/* ──────────────────────────────────────────────────────────────────
   2) MEGA MENU — Geniş açılır panel (gerçek mega menü)
       Tek katman menü, alt kategoriler grid kolon kolon açılır.
   ────────────────────────────────────────────────────────────────── */
body.header-mega .top-bar { display: block; }
body.header-mega .main-header .category-nav { display: block; }
body.header-mega .category-menu > li > a {
    font-weight: 600 !important;
    padding: 14px 16px !important;
}
/* Has-submenu olan ana menüyü position:static yap, submenu container'ı kapsasın */
body.header-mega .category-menu > li.has-submenu { position: static; }
body.header-mega .category-menu > li.has-submenu > .submenu {
    /* Tam genişlik mega panel */
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    max-width: none;
    background: #fff;
    border: 1px solid #eee;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 36px rgba(0,0,0,.08);
    padding: 24px 32px !important;
    /* Kolon kolon grid — alt kategoriler */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, visibility .2s, transform .2s;
}
body.header-mega .category-menu > li.has-submenu:hover > .submenu,
body.header-mega .category-menu > li.has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
body.header-mega .category-menu > li.has-submenu > .submenu li { list-style: none; }
body.header-mega .category-menu > li.has-submenu > .submenu li a {
    padding: 7px 10px !important;
    font-size: 13.5px !important;
    border-radius: 6px;
    color: #444 !important;
    display: block;
    transition: background .12s, color .12s, padding-left .12s;
}
body.header-mega .category-menu > li.has-submenu > .submenu li a:hover {
    background: color-mix(in srgb, var(--renk-primary) 8%, transparent) !important;
    color: var(--renk-primary) !important;
    padding-left: 14px !important;
}
/* category-nav'ı relative yap ki submenu içeride pozisyonlansın */
body.header-mega .category-nav { position: relative; }
body.header-mega .category-nav > .container { position: relative; }

/* ──────────────────────────────────────────────────────────────────
   3) MİNİMAL — Sadece logo + ikonlar; top-bar, search, kategori-nav gizli
   ────────────────────────────────────────────────────────────────── */
body.header-minimal .top-bar { display: none !important; }
body.header-minimal .main-header .category-nav { display: none !important; }
body.header-minimal .header-search { display: none !important; }
body.header-minimal .main-header { border-bottom: 1px solid #ececec; }
body.header-minimal .header-wrapper {
    padding: 18px 0 !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
body.header-minimal .header-logo { flex: 0 0 auto; }
body.header-minimal .header-actions { gap: 4px !important; }
body.header-minimal .header-action-btn span { display: none !important; }
body.header-minimal .header-action-btn {
    flex-direction: row !important;
    min-width: 42px !important;
    padding: 8px 10px !important;
}

/* ──────────────────────────────────────────────────────────────────
   4) ORTALI / CENTERED — Logo üstte ortada, kategoriler altta
       (top-bar dar; sonra büyük logo merkez; sonra kategori menüsü)
   ────────────────────────────────────────────────────────────────── */
body.header-yukari_topbar .top-bar {
    display: block;
    padding: 8px 0 !important;
}
body.header-yukari_topbar .header-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 18px 0 !important;
    gap: 20px;
}
body.header-yukari_topbar .header-logo {
    grid-column: 2;
    justify-self: center;
}
body.header-yukari_topbar .header-logo img { max-height: 52px !important; }
body.header-yukari_topbar .header-search {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    max-width: 360px !important;
}
body.header-yukari_topbar .header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}
body.header-yukari_topbar .category-menu { justify-content: center !important; }

/* ──────────────────────────────────────────────────────────────────
   5) ŞEFFAF — Slider üzerine binmiş, ince çizgi yok, beyaz yazı
       Sadece anasayfada şeffaf; diğer sayfalarda nötr koyu zemin
   ────────────────────────────────────────────────────────────────── */
body.header-transparan { padding-top: 0; }

body.header-transparan .top-bar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.85) !important;
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 0;
}
body.header-transparan .top-bar a,
body.header-transparan .top-bar i { color: rgba(255,255,255,.85) !important; }

body.header-transparan .main-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    position: absolute !important;
    width: 100% !important;
    z-index: 100 !important;
    top: 34px;
}
body.header-transparan .main-header.header-scrolled {
    background: #fff !important;
    position: fixed !important;
    top: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    border-bottom: 1px solid #eee !important;
}
body.header-transparan .main-header,
body.header-transparan .main-header a,
body.header-transparan .header-action-btn,
body.header-transparan .logo-text,
body.header-transparan .category-menu > li > a {
    color: #fff !important;
}
body.header-transparan .main-header.header-scrolled,
body.header-transparan .main-header.header-scrolled a,
body.header-transparan .main-header.header-scrolled .header-action-btn,
body.header-transparan .main-header.header-scrolled .category-menu > li > a {
    color: #1a1a1a !important;
}
body.header-transparan .search-input-wrapper {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.header-transparan .header-search input { color: #fff !important; }
body.header-transparan .header-search input::placeholder { color: rgba(255,255,255,.7) !important; }
body.header-transparan .main-header.header-scrolled .search-input-wrapper {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}
body.header-transparan .main-header.header-scrolled .header-search input { color: #1a1a1a !important; }
body.header-transparan .category-nav {
    background: transparent !important;
    border: 0 !important;
}
body.header-transparan .main-header.header-scrolled .category-nav {
    background: #fff !important;
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
}

/* ──────────────────────────────────────────────────────────────────
   6) İKİ KATMANLI — Kategori menüsü logo+arama satırının ÜSTÜNDE
       (klasiğin tersi: kategori önce, sonra logo bandı)
   ────────────────────────────────────────────────────────────────── */
body.header-iki_katmanli .main-header {
    display: flex !important;
    flex-direction: column-reverse !important;
    padding: 0 !important;
    border-bottom: 1px solid #eee;
}
body.header-iki_katmanli .main-header > .container { display: contents; }
body.header-iki_katmanli .category-nav {
    order: -1;
    background: #fafafa !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eee !important;
}
body.header-iki_katmanli .category-menu { justify-content: center !important; }
body.header-iki_katmanli .category-menu > li > a {
    padding: 10px 16px !important;
    font-size: 13px !important;
}
body.header-iki_katmanli .header-wrapper {
    padding: 16px 0 !important;
    border-top: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   STICKY DAVRANIŞI — tüm tipler için tutarlı
   ────────────────────────────────────────────────────────────────── */
.main-header { position: sticky; top: 0; z-index: 1000; }
body.header-transparan .main-header { position: absolute; }
body.header-transparan .main-header.header-scrolled { position: fixed; }

/* ──────────────────────────────────────────────────────────────────
   MOBİL — Tüm header tipleri için sadeleştir
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Kategori navigasyonu mobilde her tipte GİZLİ — hamburger menü kullanılır */
    body[class*="header-"] .category-nav,
    body[class*="header-"] .main-header .category-nav { display: none !important; }

    /* Top-bar da mobilde gizli (alan daralt) */
    body[class*="header-"] .top-bar { display: none !important; }

    /* Arama çubuğu mobilde gizli — hamburger menü ve alt nav'da arama zaten var */
    body[class*="header-"] .header-search { display: none !important; }

    /* Alt mobil nav (Ana Sayfa/Kategori/Sepet/Arama/Hesabım) açıksa
       üstteki ikonları gizle — aynı işlevler zaten altta */
    body.has-mobile-bottom-nav .header-actions { display: none !important; }
    /* Yine de hamburger butonu görünür kalsın */
    body.has-mobile-bottom-nav .mobile-menu-toggle { display: flex !important; }

    /* Mobilde header tek satır: logo solda, hamburger sağda */
    body[class*="header-"] .header-wrapper {
        justify-content: space-between !important;
        gap: 12px !important;
    }
    body[class*="header-"] .top-bar-left { gap: 8px !important; }
    body[class*="header-"] .top-bar-left a { padding: 0 4px !important; }
    body[class*="header-"] .top-bar-left a span,
    body[class*="header-"] .top-bar-left a:not(:first-child) {
        /* Sadece telefon kalsın, e-posta gizli */
    }
    body[class*="header-"] .header-wrapper { padding: 10px 0 !important; gap: 12px !important; }
    body[class*="header-"] .header-actions { gap: 2px !important; }
    body[class*="header-"] .header-action-btn span { display: none !important; }
    body[class*="header-"] .header-action-btn { padding: 8px !important; min-width: 40px !important; }
    body[class*="header-"] .header-action-btn i { font-size: 18px !important; }
    body[class*="header-"] .header-logo img { height: 36px !important; max-height: 36px !important; }

    /* Şeffaf modunu mobilde nötr yap */
    body.header-transparan .main-header {
        position: relative !important;
        top: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
    }
    body.header-transparan .main-header,
    body.header-transparan .main-header a,
    body.header-transparan .header-action-btn,
    body.header-transparan .category-menu > li > a { color: #1a1a1a !important; }
    body.header-transparan .top-bar {
        position: relative !important;
        background: #fafafa !important;
        color: #555 !important;
    }

    /* İki-katmanlı mobilde tek sütun */
    body.header-iki_katmanli .main-header { flex-direction: column !important; }

    /* Ortalı modunda mobilde tek sütun */
    body.header-yukari_topbar .header-wrapper {
        display: flex !important;
        grid-template-columns: none !important;
    }
    body.header-yukari_topbar .header-search { display: none !important; }

    /* Mega menü mobilde normal dropdown'a düşer (sidebar zaten kullanılıyor) */
    body.header-mega .category-menu > li.has-submenu > .submenu {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 240px !important;
        grid-template-columns: 1fr !important;
        display: block !important;
    }
}