/* =====================================================
   nav.css — Navigasyon (core.css'ten ayrıldı 13 Tem: core 1642 > 1500 eşik)
   core.css'ten SONRA yüklenir. Tokens :root'tan gelir (var() çözümü sıra-
   bağımsız). Kendi responsive bloğunu içerir — section 16 nav override'ları
   buraya taşındı. Kapsam: yüzen ada + scroll davranışı + logo/kb wordmark +
   dropdown/panel morph + mobile-nav + nav @keyframes.
   ===================================================== */

/* ---- 4. Navigation — yüzen ada (İş C, Çağkan seçimi 13 Tem) ----
   Nav = sayfadan kopuk kapsül; genişlik SAYFA OMURGASINA kilitli: kutu = --shell,
   iç padding = --gut → logo sol kenarı, bölüm içerikleriyle AYNI dikey hatta.
   Dropdown sistemi (mega/panel/indicator) DOKUNULMADI. Mobil ≤880 → standart tam-genişlik. */
.nav {
  position: fixed;
  top: 12px; left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: 200;
  width: min(var(--shell), calc(100% - 28px));
  height: 58px;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--gut) - 0.8rem) 0 var(--gut);
  background: rgba(14,12,10,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur-3) var(--ease-o), opacity var(--dur-3) var(--ease-o),
    height var(--dur-3) var(--ease-o), top var(--dur-3) var(--ease-o),
    background var(--dur-4) var(--ease), backdrop-filter var(--dur-4) var(--ease),
    border-color var(--dur-4) var(--ease), box-shadow var(--dur-4) var(--ease);
}

/* scroll'da beliren temiz hairline — ada kendi border'ını taşır → yalnız MOBİLDE
   (tam-genişlik moddayken) anlamlı; desktop'ta gizli. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease);
}
@media (min-width: 881px) { .nav::after { display: none; } }

.nav.scrolled {
  background: rgba(12,10,8,0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav.scrolled::after { opacity: 1; }

/* ============ SCROLL DAVRANIŞI ============
   core.js yönlendirir: ana sayfa (.hero-stage var) = auto-hide ·
   diğer sayfalar = dock (terminal statusline). Yalnız desktop (JS width-guard). */

/* --- Ana sayfa: aşağı kaydırınca ada yukarı kayıp gizlenir (metni kapatmaz) --- */
.nav--hidden {
  transform: translateX(-50%) translateY(-155%);
  opacity: 0;
  pointer-events: none;
}
/* yukarı kaydırınca güzel açılma: blur + scale + kayma (hide'dan farklı, imzalı reveal) */
@keyframes navReveal {
  0%   { transform: translateX(-50%) translateY(-135%) scale(.975); opacity: 0; filter: blur(7px); }
  55%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; filter: blur(0); }
}
.nav--reveal { animation: navReveal var(--dur-5) var(--ease-o) both; }

/* --- Diğer sayfalar: ince terminal statusline'a iner (kondense) --- */
.nav--dock {
  height: 44px;
  top: 6px;
  background: rgba(13,11,9,0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 14px 40px -26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}

/* --- Statusline komut prompt'u (kondense'de belirir, desktop-only) --- */
.nav__cmd {
  display: inline-flex; align-items: center; gap: .5ch;
  margin-left: 1rem; padding: 0 0 0 1rem;
  border: 0; border-left: 1px solid var(--hairline);
  background: none; cursor: pointer;
  font-family: var(--font-m); font-size: .74rem; letter-spacing: .01em;
  color: var(--muted); white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width var(--dur-4) var(--ease-o), opacity var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease), margin var(--dur-4) var(--ease), padding var(--dur-4) var(--ease);
}
.nav__cmd:hover { color: var(--cream); }
.nav__cmd .nav__cmd__pmt { color: var(--pop); }
.nav--dock .nav__cmd { max-width: 360px; opacity: 1; }
/* kondense'de dar kalırsa Hakkımızda'yı gizle (şerit taşmasın) */
.nav--dock .nav__links > li:nth-child(3) { max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.nav__links > li { transition: max-width var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease); max-width: 240px; }

@media (max-width: 980px) { .nav__cmd { display: none; } }

/* reduced-motion: nav hareketi anında; ada asla gizlenmez (a11y — iç sayfa saygısı) */
@media (prefers-reduced-motion: reduce) {
  .nav { transition: background var(--dur-2) var(--ease), backdrop-filter var(--dur-2) var(--ease); }
  .nav--hidden { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
  .nav--reveal { animation: none; }
  .nav__cmd { transition: opacity var(--dur-2) var(--ease); }
}

@media (max-width: 880px) {
  .nav {
    top: 0; left: 0; right: 0;
    transform: none;
    width: 100%;
    height: var(--nav-h);
    padding: 0 1.2rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.nav__logo-wordmark {
  position: relative;
  font-family: var(--font-d);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

.nav__logo-wordmark em {
  font-style: italic;
  color: var(--pop);
  font-weight: 700;
  animation: navLogoBreathe 3.8s ease-in-out infinite;   /* "Canlı" yeşil — yaşayan marka nüansı */
}
/* yeşil "Pazarı" hafifçe nefes alır: yalnız parlaklık + yeşil glow (ölçek yok) */
@keyframes navLogoBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22) drop-shadow(0 0 9px rgba(90,144,104,0.55)); }
}

/* ---- Roast Sweep — logo üzerinden geçen sıcak ışık huzmesi (CTA şimşeğiyle aynı dil) ----
   Taban metin daima solid (iOS-safe); shine ayrı clip-text katmanı, başarısız olursa sadece kaybolur.
   JS shine'ı klonlar + hover/açılışta tetikler (core.js). */
.nav__logo-shine {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  pointer-events: none;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(100deg, transparent 38%, rgba(255,247,232,0.92) 50%, transparent 62%);
  background-size: 320% 100%;
  background-position: 220% 0;
  background-repeat: no-repeat;
}
.nav__logo-shine em { font-style: italic; color: transparent; } /* yeşili nötrle, italik hiza korunur */
.nav__logo-wordmark.play .nav__logo-shine { animation: navLogoShine 1.6s var(--ease-exp); }
@keyframes navLogoShine {
  from { background-position: 220% 0; }
  to   { background-position: -140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__logo-shine { display: none; }
  .nav__logo-wordmark em { animation: none; }
}

/* ---- kafdeks wordmark (dev dili) — yalnız --kb modifier'lı sayfalarda ----
   İsim = CLI aracı: mono 800 lowercase, "bulur" yeşil (breathe'i miras alır,
   italic yerine dik), blok imleç. Playfair wordmark'lı sayfalar etkilenmez. */
.nav__logo-wordmark--kb {
  font-family: 'JetBrains Mono', var(--font-m);
  font-weight: 800;
  letter-spacing: -0.02em;
  gap: 0;             /* "kafdeks" bitişik — base'in 0.4em'i KahvePazarı içindi */
  align-items: center;
}
.nav__logo-wordmark--kb em { font-style: normal; }
.kb-cur {
  display: inline-block;
  width: 0.5em;
  height: 0.95em;
  margin-left: 0.14em;
  background: var(--pop);
  animation: kbBlink 1.1s steps(1) infinite;
}
@keyframes kbBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kb-cur { animation: none; } }
.kb-ver {
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
  color: var(--muted-2);
  margin-left: 0.6em;
  align-self: center;
}
/* "açık-gelişim" rozeti — canlı/beta sinyali: mono, sönük forest, ince yeşil çip.
   Yeşil = yaşayan marka nüansı (deks em'iyle aynı dil, ölçekçe küçük). */
.kb-tag {
  font-family: var(--font-m);
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--pop);
  border: 1px solid var(--pop-line);
  border-radius: 3px;
  padding: 0.2em 0.42em;
  margin-left: 0.5em;
  align-self: center;
  white-space: nowrap;
}
/* dar ekranda logo taşmasın: etiket gizlenir, "v0.9-beta" kalır (mesaj footer'da da var) */
@media (max-width: 880px) { .kb-tag { display: none; } }
/* core.js shine klonu (innerHTML kopyası) imleç+rozeti de kopyalar → klonda gizle,
   yer tutmaya devam etsin (glif hizası). Shine'ın 0.4em gap'i kb'de sıfırlanır. */
.nav__logo-wordmark--kb .nav__logo-shine { gap: 0; align-items: center; }
.nav__logo-shine .kb-cur, .nav__logo-shine .kb-ver, .nav__logo-shine .kb-tag { visibility: hidden; }

/* ---- MENÜ A (kafdeks) — üst-seviye linkler mono lowercase terminal tonuna döner.
   Yalnız .nav--kb sayfalarda; dropdown PANELLERİ ve CTA (shine/glow) DOKUNULMAZ. */
.nav--kb .nav__links > li > a,
.nav--kb .nav__dropdown-trigger {
  font-family: var(--font-m);
  font-size: 0.84rem;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
/* CTA — Menü A mock görünümü (mono lowercase, ince amber çerçeve, keskin köşe);
   ışık animasyonu (::before navCtaShine) + glow + ❯ nudge base'den AYNEN devralınır. */
.nav--kb .nav__cta-btn {
  font-family: 'JetBrains Mono', var(--font-m);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--act);
  background: none;
  border-radius: var(--r);
  padding: 0.42rem 0.8rem;
}

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* kayan pill highlight — JS aktif/hover trigger'a taşır (Radix/21st kalıbı) */
.nav__ind {
  position: absolute;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
  background: var(--wash);
  border: 1px solid transparent;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform var(--dur-4) var(--ease-exp), width var(--dur-4) var(--ease-exp),
    opacity var(--dur-2) var(--ease-o);
}
.nav__links.show-ind .nav__ind { opacity: 1; border-color: var(--hairline); }

/* (düz nav linki kalmadı — hepsi dropdown trigger; legacy fallback) */
.nav__links a {
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream-dim);
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  transition: color var(--dur-2);
}
.nav__links a:hover { color: var(--cream); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: 1.2rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--border-2);
}

/* Arama ikonu — ⌘K açar (CTA'nın arama rolünü devraldı). Dock'ta gizli (statusline devralır). */
.nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav__search:hover { color: var(--cream); border-color: var(--hairline); background: rgba(255,255,255,0.04); }
.nav__search:active { transform: scale(0.94); }
.nav--dock .nav__search { display: none; }

/* --- ⌘A kapsülü: V2 "kademeli boot" (18 Tem, Çağkan seçimi — nav-a2-lab).
   palette.js .nav__search'e .nsx içeriğini enjekte eder (JS yoksa buton düz büyüteç kalır).
   Hover'da daire kapsüle açılır; içi terminal gibi sırayla boot olur: ❯ → metin → ⌘A. --- */
.nav__search--cap {
  width: auto; min-width: 34px; max-width: 34px;
  justify-content: flex-end; gap: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-m); font-size: .74rem; letter-spacing: .01em;
}
.nav__search--cap svg { flex: 0 0 auto; margin: 0 8px; }
.nsx { display: inline-flex; align-items: center; gap: .55ch; padding-left: .85rem; }
.nsx__pmt { color: var(--pop); }
.nsx__txt { color: var(--muted); }
.nsx__kbd {
  font-family: var(--font-m); font-size: .62rem; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 3px; padding: .1rem .3rem; margin-left: .2ch;
}
.nav__search--cap:hover .nsx__txt { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .nav__search--cap:hover { max-width: 230px; }
  @media (prefers-reduced-motion: no-preference) {
    .nav__search--cap {
      transition: max-width .2s var(--ease-exp), color var(--dur-2) var(--ease),
        border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
    }
    .nsx__pmt, .nsx__txt, .nsx__kbd {
      opacity: 0; transform: translateY(3px);
      transition: opacity .12s var(--ease), transform .12s var(--ease-o);
    }
    .nav__search--cap:hover .nsx__pmt { opacity: 1; transform: none; transition-delay: .08s; }
    .nav__search--cap:hover .nsx__txt { opacity: 1; transform: none; transition-delay: .16s; }
    .nav__search--cap:hover .nsx__kbd { opacity: 1; transform: none; transition-delay: .26s; }
  }
}

/* CTA — siyah gövde + yuvarlak köşe (10px) + amber çizgi. Idle SABİT (animasyon yok);
   hover'da tek geçişlik amber shine + amber ışık (glow) + ok nudge. İçi DOLMAZ. */
.nav__cta-btn {
  position: relative;
  overflow: hidden;                    /* shine'ı yuvarlak köşeye kırp */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--bg-2);             /* siyah gövde */
  border: 1px solid var(--act-line);   /* sabit amber çizgi */
  padding: 0.6rem 1.05rem;
  border-radius: 10px;                 /* modern yuvarlak köşe (kullanıcı onayı — minimal-radius istisna) */
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-3) var(--ease), gap var(--dur-2) var(--ease), transform 0.12s;
  white-space: nowrap;
}
/* hover'da bir kez geçen amber shine (idle'da gizli, sabit) */
.nav__cta-btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -65%;
  width: 55%;
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--act) 32%, transparent), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.nav__cta-btn:hover::before { animation: navCtaShine 0.9s var(--ease-o); }
@keyframes navCtaShine {
  0%   { left: -65%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 135%; opacity: 0; }
}
.nav__cta-btn::after {
  content: "\276F";   /* nötr yönlendirme oku (❯ terminal glifi emekli, 16 Tem) */
  color: var(--act);
  font-size: 0.82em;
  transition: transform var(--dur-2) var(--ease-o);
}
.nav__cta-btn:hover {
  border-color: color-mix(in srgb, var(--act) 55%, transparent);
  box-shadow: 0 8px 22px -10px var(--act-glow);
}
.nav__cta-btn:hover::after { transform: translateX(3px); }
.nav__cta-btn:active { transform: scale(0.97); }


/* Nav dropdown trigger — Space Grotesk, pill highlight üstte kalsın (z-index) */
.nav__dropdown { position: relative; z-index: 1; }
.nav__dropdown-trigger {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cream-dim);
  padding: 0.55rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 8px;
  transition: color var(--dur-2) var(--ease-o);
}
.nav__dropdown-trigger:hover,
.nav__dropdown.is-open .nav__dropdown-trigger { color: var(--cream); }
.nav__dropdown-trigger svg { opacity: 0.7; transition: transform var(--dur-2) var(--ease-o); }
.nav__dropdown.is-open .nav__dropdown-trigger svg { transform: rotate(180deg); }

/* FOUC/no-JS guard — menüler core.js panele taşınana dek gizli kalsın */
.nav__dropdown-menu { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; }

/* zengin satır (A) — ikon kutusu + başlık + açıklama. İçerik core.js'te enjekte edilir.
   Tüm düz menü item'ları rich olur (DESC + ICON map href'e göre eşler). */
.nav__panel .nav__panel-page a { text-decoration: none; color: var(--cream-dim); }
.nav__item--rich {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  min-width: 222px;
  transition: background var(--dur-1);
}
.nav__item--rich:hover, .nav__item--rich:focus-visible { background: var(--wash); }
.nav__item-icon {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  color: var(--cream-dim);
  background: var(--bg-2);
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.nav__item--rich:hover .nav__item-icon,
.nav__item--rich:focus-visible .nav__item-icon {
  color: var(--pop);
  border-color: var(--pop-line);
  background: color-mix(in srgb, var(--pop) 12%, var(--bg-2));
}
.nav__item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav__item-label {
  font-family: var(--font-b);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
  transition: color var(--dur-1);
}
.nav__item-desc {
  font-family: var(--font-b);
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--muted);
}
.nav__item--rich:hover .nav__item-desc { color: var(--cream-dim); }

/* Kahveler mega (A) — ikon/nokta'lı chip kolonları + "Tüm kahveler" footer satırı */
.nav__mega-cols { display: flex; gap: 1.4rem; padding-bottom: 0.25rem; }
.nav__mega-col { flex: 1; }
.nav__mega-label {
  display: block;
  font-family: var(--font-m);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pop);
  padding: 0 0.6rem 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.nav__mega-col a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  font-family: var(--font-b);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--cream-dim);
  transition: background var(--dur-1), color var(--dur-1);
}
.nav__mega-col a:hover, .nav__mega-col a:focus-visible { background: var(--wash); color: var(--cream); }
/* ortak 20px ikon slotu → method ikonları + roast noktaları aynı hizada */
.nav__mega-ic {
  flex: none; width: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream-dim);
  transition: color var(--dur-2);
}
.nav__mega-col a:hover .nav__mega-ic, .nav__mega-col a:focus-visible .nav__mega-ic { color: var(--pop); }
.nav__mega-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--pop-line);
  background: color-mix(in srgb, var(--pop) 18%, transparent);
}
.nav__mega-soon {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-b); font-size: 0.84rem; color: var(--muted-2);
  cursor: default;
}
.nav__mega-soon .nav__mega-dot { border-style: dashed; background: none; }
.nav__mega-soon em {
  margin-left: auto; font-style: normal;
  font-family: var(--font-m); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--hairline); border-radius: 100px; padding: 0.05rem 0.4rem;
}
.nav__mega-all {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0.6rem 0.6rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream) !important;
}
.nav__mega-all svg { transition: transform var(--dur-2) var(--ease-o); }
.nav__mega-all:hover svg { transform: translateX(3px); }

/* ---- Nav paylaşılan morphing viewport (A) — genişlik + yükseklik morph ----
   4 menü tek kutuda; içerik crossfade, kutu içeriğe göre boyutlanır (sol-üst origin).
   Menüler core.js'te runtime'da bu panele TAŞINIR → HTML'e dokunulmaz, 14 sayfada çalışır. */
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 0;
  height: 0;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 20px 48px var(--shadow-md), inset 0 1px 0 var(--highlight);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transform-origin: top left;
  pointer-events: none;
  z-index: 300;
  transition: opacity var(--dur-2) var(--ease-o),
    transform var(--dur-2) var(--ease-o),
    width var(--dur-4) var(--ease-exp),
    height var(--dur-4) var(--ease-exp);
}
.nav__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* fare köprüsü — trigger ile panel arası boşlukta hover düşmesin */
.nav__panel::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
/* taşınan menüler → üst üste binen crossfade sayfaları, içeriğe göre genişler */
.nav__panel .nav__panel-page {
  position: absolute;
  top: 0; left: 0;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  margin: 0;
  padding: 12px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  filter: blur(3px);
  transition: opacity var(--dur-2) var(--ease-o),
    transform var(--dur-2) var(--ease-o),
    filter var(--dur-2) var(--ease);
}
.nav__panel .nav__panel-page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: blur(0);
}
/* düz menüler (mega hariç) → 2 sütun ikon-satır ızgarası */
.nav__panel .nav__panel-page:not(.nav__mega) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 6px;
}
.nav__panel .nav__mega { padding: 10px 10px 6px; }

.nav__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}

.nav__burger span {
  display: block;
  width: 20px; height: 1px;
  background: var(--cream);
  transition: transform var(--dur-4) var(--ease), opacity var(--dur-4);
}

.nav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay — editorial gruplu sheet (içerik core.js'te üretilir) */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(9,9,9,0.985);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--nav-h) + 2rem) 1.75rem 2.25rem;
  transform: translateY(100%);
  transition: transform var(--dur-5) var(--ease-o);
}

.mobile-nav.open { transform: translateY(0); }

.mnav__inner {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.mnav__group { display: flex; flex-direction: column; }

.mnav__label {
  font-family: var(--font-m);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pop);
  margin-bottom: 0.5rem;
  padding-left: 0.1rem;
}

.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.35rem 0;
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cream-dim);
  transition: color var(--dur-2) var(--ease);
}

.mnav__link .mnav__arrow {
  flex-shrink: 0;
  color: var(--pop);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

.mnav__link:hover,
.mnav__link:active,
.mnav__link.is-active { color: var(--cream); }
.mnav__link.is-active { color: var(--pop); }

.mnav__link:hover .mnav__arrow,
.mnav__link:active .mnav__arrow,
.mnav__link.is-active .mnav__arrow { opacity: 1; transform: translateX(0); }

.mnav__cta {
  margin-top: 0.7rem;
  width: 100%;
  justify-content: center;
}

/* Staggered entrance — drawer açılınca sıralı yüksel (--i core.js'te) */
.mnav__label,
.mnav__link {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-5) var(--ease), transform var(--dur-5) var(--ease);
}
.mnav__cta {
  opacity: 0;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease),
              box-shadow var(--dur-3), gap var(--dur-2), opacity var(--dur-5) var(--ease);
}
.mobile-nav.open .mnav__label,
.mobile-nav.open .mnav__link,
.mobile-nav.open .mnav__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.1s + var(--i, 0) * 0.028s);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
  .mnav__label,
  .mnav__link,
  .mnav__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* nav hareketleri → anlık (pill/ikon/❯ kaymaz, hover shine çalışmaz) */
  .nav__cta-btn::after { transition: none; }
  .nav__cta-btn::before { animation: none; }
  .nav__ind { transition: opacity var(--dur-1) linear; }
  /* paylaşılan panel → morph/blur yok, sade opacity */
  .nav__panel { transition: opacity var(--dur-1) linear; }
  .nav__panel .nav__panel-page {
    transform: none;
    filter: none;
    transition: opacity var(--dur-1) linear, visibility var(--dur-1);
  }
}

/* Active nav indicator — pop underline */
.nav__links a.active {
  color: var(--cream);
  position: relative;
}
.nav__links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0.8rem; right: 0.8rem;
  height: 2px;
  background: var(--pop);
  border-radius: 1px;
  animation: navUnderline var(--dur-4) var(--ease-o) forwards;
}
@keyframes navUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* ---- Nav Responsive (core.css section 16'dan taşındı) ---- */
@media (max-width: 768px) {
  .nav__links, .nav__actions, .nav__panel { display: none; }
  .nav__burger               { display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 12px; }
  .mobile-nav                { display: flex; }
  .nav__cta-btn { min-height: 44px; }
}