/* _shared/tasarim/nav.css — 4-küme site navigasyonu (Ai3 M1, USTABAŞI ACK 10 Tem)
   Kaynak-prototip: _CIKTILAR/VITRIN-TAYFUN/nav-prototip.html §3 (mm-nav bileşeni).
   Token-bağlı (hex yok, tokens.css'e bağlanır — bu dosyadan ÖNCE yüklenmeli).
   Çocuk-yüzeyleri (webtoon/3d-müze/tablet-hero) bu nav'ı KULLANMAZ — bkz. .cikis-piktogram altta. */

/* ── PARAMETRİK TEMA (Ai4, 14 Tem) ──────────────────────────────────────────────
   Zemin eskiden HARDCODED açık-kremdi (rgba(251,249,243,.95)) → koyu sayfada (whitepaper)
   açık-krem bar olarak patlıyordu. Artık değişkene bağlı. VARSAYILAN AYNI DEĞER →
   mevcut 8 açık sayfa piksel-piksel değişmez (regresyon yok).
   ✅ AÇIK KALEM KAPANDI (K7, 15 Tem): *"koyu lehçenin renk değerleri sanat kararı — Ai3'ün hükmü
   bekleniyor"* ⇒ hüküm **H-1: TEK ZEMİN = AYDINLIK**. Anasayfa aydınlığa geçince koyu lehçenin
   SON TÜKETİCİSİ kalmadı ⇒ blok SİLİNDİ (aşağıda kaydı var). Nav artık TEK lehçe. */
.mm-nav {
  --nav-zemin: rgba(251,249,243,.95);
  --nav-metin: var(--renk-govde);
  --nav-marka: var(--renk-marka);
  --nav-yuzey: var(--renk-yuzey);      /* hover zemini */
  --nav-panel: var(--renk-zemin2);     /* drawer/dropdown paneli */
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-zemin); backdrop-filter: blur(8px);
  border-bottom: var(--kenar); font-family: var(--font-govde);
  color: var(--nav-metin);
}
/* 🌑 KOYU LEHÇE — **EMEKLİ EDİLDİ (K7 · 15 Tem 2026).** Silinen blok:
     .mm-nav[data-nav-tema="koyu"] { --nav-zemin:rgba(10,10,12,.72); --nav-metin:rgba(255,255,255,.86);
       --nav-marka:#fff; --nav-yuzey:rgba(255,255,255,.10); --nav-panel:rgba(16,18,26,.96);
       border-bottom:1px solid rgba(255,255,255,.10); }
   (Tam metin + gerekçe: `_tekvucut-2026-07-15/_sistem/HAZIR-YAMA-nav-koyu-silme.md` ·
    yedek: `nav.css.bak-20260715-koyu-lehce-silme-oncesi`)

   🔁 NEDEN SİLİNDİ — ve neden BUGÜNE KADAR SİLİNMEDİ:
   Koyu lehçeyi Ai3 hükmetti (14 Tem), tam da *"nav yabancı şerit gibi duruyor"* kusurunu kapatmak
   için: anasayfada nav↔sayfa luma farkı **0.94 → 0.000**. Yani lehçe YANLIŞ DEĞİLDİ — işini yaptı.
   K7'de anasayfa aydınlığa geçti (H-1 TEK ZEMİN) ⇒ lehçe **GEREKSİZ** hâle geldi.
   **Gereksizleşme ≠ yanlışlık:** gereksiz bir şeyi, onu hâlâ kullanan SON TÜKETİCİ gidene kadar
   silemezsin — daha önce silseydik siyah hero üstünde krem yabancı şerit kalırdı (kanıt karesi:
   `_olcum/nav-silme-2-SILINIRSE.png`). Tüketici gitti, blok gitti. Sıra bu; tersi değil.

   ⚠️ SİLME TUZAĞI (kayda geçsin): `grep data-nav-tema` **8 dosya** buluyordu — sekizi de **YORUM**,
   gerçek öznitelik yalnız `index.html`'deydi. Yorumları sökmeden ölçen bir grep "hâlâ 8 tüketici var"
   der ve silmeyi sonsuza dek erteler. **Ölçüm: yorum-sökülmüş HTML'de gerçek öznitelik = 0/8.** */
.mm-nav .satir { max-width: 1100px; margin: 0 auto; padding: 0 18px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mm-logo { font-family: var(--font-baslik); font-weight: 600; color: var(--nav-marka); font-size: 15px; line-height: 1.15; white-space: nowrap; text-decoration: none; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }
.mm-logo small { display: block; font-family: var(--font-govde); font-weight: 500; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--renk-sus); }

/* masaüstü yatay menü */
.mm-desktop { display: flex; align-items: center; gap: 4px; }
.mm-item { position: relative; }
.mm-link { display: flex; align-items: center; gap: 5px; padding: 9px 12px; min-height: 44px; border-radius: var(--r-xs); color: var(--nav-metin); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; background: none; border: 0; font-family: inherit; }
.mm-link:hover, .mm-link[aria-expanded="true"] { background: var(--nav-yuzey); color: var(--nav-marka); }
.mm-link .ok { font-size: 9px; transition: transform var(--dur-hizli) var(--ease-yumusak); }
.mm-link[aria-expanded="true"] .ok { transform: rotate(180deg); }
/* CTA beyaz metin taşır ⇒ --p-mercan DEĞİL, koyu türevi. Ham mercan beyazla 2.95:1 (WCAG AA'nın altı). */
.mm-cta { background: var(--p-mercan-cta); color: #fff !important; padding: 9px 18px; border-radius: var(--r-full); font-weight: 600; }
.mm-cta:hover { background: color-mix(in srgb, var(--p-mercan-cta) 88%, #000); }
.mm-drop { position: absolute; top: calc(100% + 8px); left: 0; background: var(--nav-panel); border: var(--kenar); border-radius: var(--r-md); box-shadow: var(--golge-md); min-width: 220px; padding: 6px; display: none; }
.mm-item.acik .mm-drop { display: block; }
.mm-drop a { display: flex; align-items: center; padding: 9px 12px; min-height: 44px; border-radius: var(--r-xs); color: var(--nav-metin); font-size: 13.5px; text-decoration: none; }
.mm-drop a:hover { background: var(--nav-yuzey); color: var(--nav-marka); }

/* mobil hamburger + akordeon */
.mm-burger { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); border: var(--kenar); background: var(--nav-panel); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.mm-burger span { display: block; width: 18px; height: 2px; background: var(--nav-marka); position: relative; }
.mm-burger span::before, .mm-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--nav-marka); }
.mm-burger span::before { top: -6px; } .mm-burger span::after { top: 6px; }
.mm-drawer { display: none; flex-direction: column; padding: 6px 12px 14px; border-top: var(--kenar); }
.mm-drawer.acik { display: flex; }
.mm-drawer .mm-link { width: 100%; justify-content: space-between; padding: 13px 6px; min-height: 44px; border-bottom: var(--kenar); }
.mm-drawer .mm-sub { max-height: 0; overflow: hidden; transition: max-height var(--dur-orta) var(--ease-yumusak); }
.mm-drawer .mm-item.acik .mm-sub { max-height: 260px; }
.mm-drawer .mm-sub a { display: flex; align-items: center; padding: 11px 6px 11px 20px; color: var(--nav-metin); font-size: 13.5px; text-decoration: none; min-height: 44px; }
.mm-drawer .mm-cta { justify-content: center; margin-top: 8px; }

/* ————— ÇOCUK KAPISI (Ai3 A1) — MENÜ MADDESİ DEĞİL —————————————————————————————
   Kök-teşhis: menünün 8 maddesinden 3'ü çocuk-içeriğiydi → veli premium hero'nun altında
   oyun menüsü görüyordu ("çok çocuk işi"). Çözüm: çocuk içeriği menüden TAMAMEN çıkar,
   yerine görsel dili menüden AYRIŞAN tek, sıcak, davetkâr KAPI koy.
   ⚠️ Bilerek .mm-desktop/.mm-drawer listelerinin DIŞINDA duruyor: "menüde çocuk-linki 0"
   kabul kriteri menü-LİSTESİNİ sayar, bu kapıyı değil. */
.mm-cocuk-kapi {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-height: 44px; padding: 8px 16px; border-radius: var(--r-full);
  text-decoration: none; font-weight: 600; font-size: 13.5px; line-height: 1;
  color: var(--renk-murekkep);
  background: linear-gradient(135deg, var(--p-altin), var(--p-mercan));
  border: 1px solid color-mix(in srgb, var(--p-altin) 60%, #fff);
  box-shadow: var(--golge-sm);
  transition: transform var(--dur-hizli) var(--ease-yumusak), box-shadow var(--dur-orta) var(--ease-yumusak);
}
.mm-cocuk-kapi .pikto { font-size: 18px; line-height: 1; }
.mm-cocuk-kapi:hover { transform: translateY(-1px); box-shadow: var(--golge-md); }
.mm-cocuk-kapi:focus-visible { outline: none; box-shadow: var(--ring), var(--golge-sm); }

/* 🔴 KIRILMA NOKTASI 760 → 900 (Ai4, 14 Tem — ÖLÇÜMLE bulundu, tahminle değil).
   Çocuk kapısını nav'a ekleyince TABLET'te (834) sıra taştı: logo + 5-maddelik menü + kapı + burger
   yan yana sığmıyordu → yatay taşma 50px (Ai3 k10 "tablet 834 BİRİNCİ SINIF" ihlali).
   Menü tablette burger'a iner; ÇOCUK KAPISI GÖRÜNÜR KALIR — o menü maddesi değil, tek kapı;
   kaybolursa çocuk-dünyasına giriş kalmaz. */
@media (max-width: 900px) {
  .mm-desktop { display: none; }
  .mm-burger { display: flex; }
}
@media (max-width: 760px) {
  /* dar viewport: kapı piktogram+kısa etiketle kalır (kaybolmaz — tek kapı bu) */
  .mm-cocuk-kapi { padding: 8px 12px; font-size: 0; gap: 0; }
  .mm-cocuk-kapi .pikto { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-cocuk-kapi { transition: none; }
  .mm-cocuk-kapi:hover { transform: none; }
}

/* ————— çocuk-yüzeyi minimal-şeffaf çıkış piktogramı (webtoon/3d-müze/tablet-hero) ————— */
.cikis-piktogram {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 50;
  width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(255,255,255,.34); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; text-decoration: none; cursor: pointer; transition: var(--dur-hizli) var(--ease-yumusak);
  -webkit-tap-highlight-color: transparent;
}
.cikis-piktogram:hover, .cikis-piktogram:focus-visible { background: rgba(255,255,255,.55); transform: scale(1.06); }
.cikis-piktogram:focus-visible { outline: none; box-shadow: var(--ring); }