/* ==========================================================================
   HEADER 3 — MEGA MENÜ ODAKLI
   Geniş arama çubuğu · görsel destekli mega menü · sağda hesap/favori/sepet
   Mobilde soldan drawer + alt sabit navigasyon çubuğu
   Breakpoint: 640 · 768 · 1024 · 1280
   ========================================================================== */

/* 0) SAYFAYA ÖZEL MARKA RENKLERİ -----------------------------------------
   Header 3 birincil rengi kırmızı (#e3000f) olarak kullanır.
   Değişkenleri `body.page-h3` altında geçersiz kılarak diğer header'ların
   lacivert paleti bozulmadan değiştirilebilir.
   Ana tonu değiştirmek için sadece `--r-500` ve hover tonlarını güncelle. */
body.page-h3 {
  --brand:        var(--r-500);
  --brand-2:      var(--r-600);
  --brand-soft:   var(--r-50);
  --brand-text:   var(--r-600);
  --primary:      var(--r-500);
  --primary-hover:var(--r-600);
  --primary-fg:   #ffffff;
  --accent:       var(--r-600);
  --accent-bg:    var(--r-500);
  --accent-fg:    #ffffff;
  --ring:         rgba(227,0,15,.32);
  /* Tanıtım kartı kırmızıya uyarlandı */
  --promo-from:   var(--r-800); --promo-to: var(--r-900); --promo-glow: rgba(255,255,255,.22);
  /* Demo içeriği (hero + banner) nötr kırmızı paletine uyarlandı */
  --hero-glow-1:  rgba(227,0,15,.08);
  --hero-glow-2:  rgba(227,0,15,.05);
  --banner-from:  #2a0308; --banner-mid: #6e0006; --banner-to: #a1000b;
  --banner-glow:  rgba(255,255,255,.18);
}

/* 1) ÜST YARDIMCI ŞERİDİ ------------------------------------------------ */
/* Marka kırmızısı zemin + beyaz metin (--r-500 üzeri kontrast 4.9:1 → WCAG AA) */
.h3-utility {
  background:var(--r-500); color:rgba(255,255,255,.92);
  border-bottom:1px solid var(--r-600);
  font-size:var(--fs-12);
}
.h3-utility__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:34px; }
.h3-utility__list { display:none; align-items:center; gap:1.4rem; }
.h3-utility__item { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.h3-utility__item .ic { color:#fff; }
.h3-utility__right { display:flex; align-items:center; gap:.9rem; margin-inline-start:auto; }
.h3-utility__right a, .h3-utility__lang { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; color:#fff; transition:color var(--t-fast); }
.h3-utility__right a .ic { color:#fff; }
.h3-utility__right a:hover { color:var(--r-100); }
.h3-utility__theme {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; border-radius:var(--radius-pill);
  color:#fff;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.h3-utility__theme:hover { background:var(--r-600); color:#fff; }

/* 2) STICKY HEADER ------------------------------------------------------- */
.h3-header {
  position:sticky; top:0; z-index:60;
  background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t-base) var(--ease);
}
.h3-header.is-scrolled { box-shadow:var(--shadow-2); }

.h3-bar {
  display:flex; align-items:center; gap:.75rem;
  min-height:70px;
  transition:min-height var(--t-base) var(--ease);
}
.h3-header.is-scrolled .h3-bar { min-height:58px; }
/* Logo — 3.61 oranlı kilit; yükseklik header yüksekliğine göre ayarlanır */
.h3-brand { flex:none; --logo-h:2.75rem; }
.h3-header.is-scrolled .h3-brand { --logo-h:2.25rem; }
.h3-bar__spacer { flex:1; }
.h3-actions { display:flex; align-items:center; gap:.15rem; flex:none; }

/* 3) GENİŞ ARAMA --------------------------------------------------------- */
/* Mobilde arama ikonu header'da bulunmaz; alttaki sabit "Ara" barı açar.
   .h3-searchwrap yalnızca masaüstünde (640px+) görünür. */
.h3-searchwrap { flex:1; min-width:0; }
.h3-search {
  display:flex; align-items:center; gap:.5rem;
  height:3rem; padding:.3rem .3rem .3rem 1rem;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-pill);
  transition:border-color var(--t-base) var(--ease), background var(--t-base), box-shadow var(--t-base);
}
.h3-search:hover { border-color:var(--border-2); }
.h3-search:focus-within { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft); }
.h3-search__cat {
  flex:none; height:100%; padding-inline:.4rem;
  font-size:var(--fs-13); font-weight:500; color:var(--text-2);
  background:transparent; border:0; border-inline-end:1px solid var(--border);
  border-radius:var(--radius-pill) 0 0 var(--radius-pill);
  cursor:pointer; appearance:none; -webkit-appearance:none;
  padding-inline-end:1.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
  transition:color var(--t-fast) var(--ease);
}
.h3-search__cat:hover { color:var(--text); }
.h3-search input[type="search"] {
  flex:1; min-width:0; height:100%;
  background:transparent; border:0; font-size:var(--fs-14); color:var(--text);
}
.h3-search input::placeholder { color:var(--text-3); }
.h3-search input:focus { outline:none; }
.h3-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.h3-search__go {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:100%; padding-inline:1.1rem; border-radius:var(--radius-pill);
  background:var(--primary); color:var(--primary-fg); font-size:var(--fs-13); font-weight:600;
  transition:background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.h3-search__go:hover { background:var(--primary-hover); }
.h3-search__go:active { transform:scale(.96); }
/* NOT: Buton içindeki ikon span'i ASLA gizlenmez; yalnızca "Ara" metni dar
   ekranda gizlenir (bkz. @media max-width:639px). */

/* 4) MEGA MENÜ TETİKLEYİCİ ŞERİDİ --------------------------------------- */
.h3-nav {
  border-top:1px solid var(--border);
  height:48px; overflow:visible;
  transition:height var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.h3-header.is-scrolled .h3-nav { height:0; opacity:0; pointer-events:none; }
.h3-nav__inner { display:flex; align-items:center; gap:.25rem; height:100%; }
.h3-nav__all {
  display:inline-flex; align-items:center; gap:.5rem; height:100%;
  padding-inline:.85rem .95rem; margin-inline-start:-.85rem;
  font-size:var(--fs-14); font-weight:600; letter-spacing:var(--ls-wide);
  background:var(--primary); color:var(--primary-fg);
  border-radius:0;
  transition:background var(--t-base) var(--ease);
}
.h3-nav__all:hover, .h3-header.is-mega-open .h3-nav__all { background:var(--primary-hover); }
.h3-nav__link {
  display:inline-flex; align-items:center; gap:.3rem; height:100%; padding-inline:.7rem;
  font-size:var(--fs-14); font-weight:500; color:var(--text-2);
  border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-base) var(--ease);
}
.h3-nav__link:hover, .h3-nav__link.is-active { color:var(--text); border-bottom-color:var(--brand); }
/* Vurgulu kategori — ana sırada kalır, sola yaslanmaz */
.h3-nav__link--sale { color:var(--accent); font-weight:600; }
/* 5) MEGA PANEL ---------------------------------------------------------- */
.h3-mega {
  position:absolute; inset-inline:0; top:100%; z-index:55;
  background:var(--surface); border-block:1px solid var(--border);
  box-shadow:var(--shadow-3);
  max-height:calc(100dvh - 140px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.h3-mega.is-open { opacity:1; visibility:visible; transform:none; }
.h3-mega__inner { padding-block:1.85rem 2rem; }
.h3-mega .mega__grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.h3-mega .promo { grid-column:span 2; grid-row:span 2; min-height:190px; }
.h3-mega .promo__body { justify-content:flex-end; height:100%; }

/* 6) HESAP DROPDOWN ------------------------------------------------------ */
.h3-account-wrap { position:relative; }
.h3-dd {
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:56;
  width:16.5rem; padding:.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.h3-dd.is-open { opacity:1; visibility:visible; transform:none; }
.h3-dd a {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .65rem;
  border-radius:var(--radius-sm); font-size:var(--fs-14);
  transition:background var(--t-fast) var(--ease), padding-inline-start var(--t-base) var(--ease);
}
.h3-dd a:hover { background:var(--bg-muted); padding-inline-start:.85rem; }
.h3-dd .ic { color:var(--text-3); }
.h3-dd__divider { height:1px; margin:.45rem .65rem; background:var(--border); }
.h3-dd__cta { display:block; margin-top:.35rem; }

/* 6b) Mobil alt barın açtığı arama şeridi ------------------------------ */
.h3-msearch {
  position:fixed; inset-inline:0; bottom:calc(60px + env(safe-area-inset-bottom)); z-index:69;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--shadow-2);
  opacity:0; transform:translateY(10px);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.h3-msearch.is-open { opacity:1; transform:none; }
.h3-msearch__inner { display:flex; align-items:center; gap:.5rem; padding-block:.75rem; }
.h3-msearch .field { flex:1; }
.h3-msearch__submit {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:2.75rem; height:2.75rem; border-radius:var(--radius-pill);
  background:var(--primary); color:var(--primary-fg);
  transition:background var(--t-base) var(--ease), transform var(--t-fast);
}
.h3-msearch__submit:hover { background:var(--primary-hover); }
.h3-msearch__submit:active { transform:scale(.93); }

/* 7) MOBİL DRAWER ------------------------------------------------------- */
.h3-drawer__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem var(--gutter); border-bottom:1px solid var(--border); }
.h3-drawer__head .brand { --logo-h:2.6rem; }   /* yalnızca ikon, biraz daha belirgin */
.h3-drawer__search { padding:1rem var(--gutter) .25rem; }
.h3-drawer__nav { padding:0 var(--gutter) 1.25rem; }
.h3-drawer__quick { padding:0 var(--gutter) 1.25rem; display:grid; gap:.1rem; }
.h3-drawer__quick a {
  display:flex; align-items:center; gap:.65rem; padding:.6rem .25rem;
  font-size:var(--fs-14); color:var(--text-2);
  transition:color var(--t-fast), padding-inline-start var(--t-base) var(--ease);
}
.h3-drawer__quick a:hover { color:var(--text); padding-inline-start:.45rem; }
.h3-drawer__foot { margin-top:auto; padding:1.15rem var(--gutter); background:var(--bg-soft); border-top:1px solid var(--border); }

/* 8) MOBİL ALT SABİT NAVİGASYON ---------------------------------------- */
.h3-bottomnav {
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-block:.35rem calc(.35rem + env(safe-area-inset-bottom));
  background:var(--header-solid); border-top:1px solid var(--border);
  box-shadow:0 -6px 20px -12px rgba(16,24,40,.4);
  transition:transform var(--t-slow) var(--ease-out);
}
/* Drawer açıkken alt bar kaybolur */
[data-drawer-open] .h3-bottomnav { transform:translateY(110%); }
.h3-bn {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.45rem .25rem; border-radius:var(--radius-sm);
  font-size:.625rem; font-weight:500; letter-spacing:var(--ls-wide);
  color:var(--text-3);
  transition:color var(--t-fast) var(--ease), background var(--t-fast);
}
.h3-bn .ic { transition:transform var(--t-base) var(--ease-spring); }
.h3-bn:hover, .h3-bn:focus-visible { color:var(--text); background:var(--bg-muted); }
.h3-bn:active .ic { transform:scale(.85); }
.h3-bn[aria-current="page"], .h3-bn.is-active { color:var(--brand-text); }
.h3-bn[aria-current="page"] .ic, .h3-bn.is-active .ic { transform:translateY(-1px); }
.h3-bn .count { top:.1rem; right:calc(50% - 20px); }
body.page-h3 { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }

/* 9) RESPONSIVE --------------------------------------------------------- */
@media (max-width:639px) {
  .h3-nav, .h3-mega, .h3-utility__list { display:none; }
  /* Kategori şeridi bu aralıkta tamamen gizli (alt bar + burger çekmecesi var) */
  /* Arama alanı yerine ikon yok; mobilde alttaki sabit "Ara" barı aynı paneli açar */
  .h3-searchwrap { display:none; }
  /* Marka metni artık logonun kendisi — dar ekranda yükseklik kısılır,
     genişlik oran korunarak otomatik gelir */
  .h3-brand { --logo-h:2.1rem; }
  .h3-header.is-scrolled .h3-brand { --logo-h:1.85rem; }
  /* Mobil düzen: solda yalnızca logo, sağda hesap > kalp > sepet > menü */
  .h3-bar { gap:.5rem; }
  .h3-actions { gap:.1rem; margin-inline-start:auto; }
}
@media (min-width:640px) {
  .h3-bar { min-height:76px; gap:1rem; }
  .h3-header.is-scrolled .h3-bar { min-height:62px; }
  /* NOT: Duyuru listesi (.h3-utility__list) 640px'te DEĞİL, 1024px'te açılır.
     3 duyuru + "Sipariş Takip / İade / İletişim" + tema düğmesi birlikte
     641–1023px arasında 67px taşıyordu (gövde overflow-x:hidden ile
     kırpılıyordu, yani linkler görünmez biçimde taşıyordu). */
}
/* Dar tablet (640–767px): 9 kategorili şerit 763px gerektiriyor, kap 640px.
   Taşma gövdede kırpılıp son bağlantıyı erişilemez kılıyordu; boşluk ve
   punto sıkılaştırılarak 9 bağlantının hepsi görünür tutulur. */
@media (min-width:640px) and (max-width:767px) {
  .h3-nav__inner { gap:.1rem; }
  .h3-nav__all, .h3-nav__link { padding-inline:.35rem; font-size:var(--fs-13); }
}
@media (min-width:768px) {
  .h3-search input[type="search"] { font-size:var(--fs-15); }
}
@media (min-width:1024px) {
  .h3-nav { display:block; }
  .h3-mega { display:block; }
  .h3-bottomnav { display:none; }
  body.page-h3 { padding-bottom:0; }
  .h3-burger { display:none; }
  .h3-utility__list { display:flex; }
}
@media (min-width:1280px) {
  .h3-search { height:3.25rem; }
  .h3-nav__link { padding-inline:.9rem; font-size:var(--fs-15); }
  .h3-mega .mega__grid { gap:2rem 2.5rem; }
}

/* 10) DARK MODE --------------------------------------------------------- */
/* Tema bu sayfada 'light' olarak kilitlidir (bkz. header-kit.js initTheme) */
[data-theme="dark"] .h3-utility { background:var(--r-500); border-bottom-color:var(--r-600); }
[data-theme="dark"] .h3-search { background:var(--bg-muted); }