/* ============================================================
   Krowten — MOBİL MENÜ (yeniden yazıldı)

   Önceki sürüm başlığın altına açılan bir akordeon şeridiydi:
   navigation.css içindeki sabit koyu renkleri (#b9d2e0, #88a4b6…)
   kullandığı için açık temada yazılar silik kalıyordu ve dar
   telefonda okunmuyordu.

   Bu sürüm sağdan açılan tam boy bir çekmece. Bütün renkler tema
   değişkenlerinden geliyor, dolayısıyla açık ve koyu temada aynı
   kontrastı veriyor. Dosya EN SON yüklendiği için navigation.css'teki
   eski kuralları eziyor — ayrı bir dosya olmasının sebebi bu.

   Dokunma hedefleri en az 52px; başlıktaki 24px'lik düğmeler
   telefonda ıskalanıyordu.
   ============================================================ */

/* Masaüstünde bu dosyanın hiçbir kuralı çalışmaz. */
@media (max-width: 850px) {

  /* ---------- Perde ---------- */
  .mnav-perde {
    position: fixed; inset: 0; z-index: 90;
    background: color-mix(in srgb, var(--bg) 62%, #000);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .22s ease;
  }
  .mnav-perde.acik { opacity: 1; }
  .mnav-perde[hidden] { display: none !important; }

  /* ---------- Çekmece ---------- */
  #mobile-nav.mobile-nav,
  #mobile-nav.mobile-nav:not([hidden]) {
    position: fixed; z-index: 91;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw);
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    background: var(--bg);
    border: 0; border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .55);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1);
  }
  #mobile-nav.mobile-nav.acik { transform: translateX(0); }
  /* Kapaliyken sekme tusuyla icine girilmesin. */
  #mobile-nav.mobile-nav:not(.acik) { visibility: hidden; }
  #mobile-nav.mobile-nav.acik { visibility: visible; }

  /* ---------- Üst şerit ---------- */
  .mnav-ust {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mnav-baslik {
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--muted);
    margin-right: auto;
  }

  /* Tema anahtari: ust cubuktaki 24px'lik dugme telefonda hem
     gorunmuyor hem iskalaniyordu. Burada iki net secenek var. */
  .mnav-tema {
    display: inline-flex; padding: 3px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px;
  }
  .mnav-tema button {
    display: inline-grid; place-items: center;
    width: 40px; height: 34px; padding: 0;
    border: 0; border-radius: 999px;
    background: none; color: var(--muted); cursor: pointer;
  }
  .mnav-tema button svg { width: 17px; height: 17px; }
  .mnav-tema button[aria-pressed="true"] {
    background: var(--surface2); color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  }

  .mnav-kapat {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--text); cursor: pointer;
  }
  .mnav-kapat svg { width: 19px; height: 19px; }
  .mnav-kapat:hover { border-color: var(--accent); }

  /* ---------- Ana eylem ---------- */
  .mobile-nav .mobile-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 16px 16px 0; padding: 0 18px;
    min-height: 54px;
    border-radius: 14px;
    background: var(--accent); color: #0d1b24;
    font-size: 15px; font-weight: 650; letter-spacing: -.1px;
    box-shadow: 0 10px 24px -14px var(--accent);
  }
  .mobile-nav .mobile-cta svg { width: 19px; height: 19px; }
  html[data-theme=light] .mobile-nav .mobile-cta { color: #fff; }

  /* ---------- Hesap satırı ---------- */
  .mnav-hesap {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Buyuk mavi CTA kaldirildi; hesap satiri artik ust seridin hemen
       altinda, o yuzden ust bosluk biraz acildi. */
    gap: 10px; margin: 16px 16px 4px;
  }
  .mnav-hesap a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--text);
    font-size: 14px; font-weight: 550;
  }
  .mnav-hesap a svg { width: 17px; height: 17px; color: var(--accent); }
  .mnav-hesap a:hover { border-color: var(--accent); }

  /* Oturum durumu. Varsayilan MISAFIR: JS calismazsa ziyaretci
     giris/kayit gorur, giris yapmis kullaniciya da yanlis bir sey
     gosterilmez (auth.js data-state'i ceviriyor). */
  .mnav-hesap .mnav-giris { display: none; }
  .mnav-hesap[data-state="in"] .mnav-misafir { display: none; }
  .mnav-hesap[data-state="in"] .mnav-giris { display: flex; }
  .mnav-hesap[data-state="in"] a:first-of-type,
  .mnav-hesap .mnav-giris:first-of-type {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  }
  .mnav-hesap [data-mnav-ad] {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---------- Gruplar ---------- */
  .mobile-nav .mobile-group {
    border: 0; border-top: 1px solid var(--line);
    margin: 0 16px;
  }
  .mobile-nav .mobile-group:first-of-type { margin-top: 16px; }

  .mobile-nav .mobile-group summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 2px; min-height: 56px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted); cursor: pointer;
  }
  .mobile-nav .mobile-group[open] summary { color: var(--text); }
  .mobile-nav .mobile-group summary .nav-icon {
    width: 18px; height: 18px; color: var(--muted);
    transition: transform .2s;
  }
  .mobile-nav .mobile-group[open] summary .nav-icon { transform: rotate(180deg); }

  .mobile-nav .mobile-group > div { padding: 0 0 14px; }

  /* Ürün satırı: ikon kutusu + baslik + aciklama */
  .mobile-nav .mobile-group a {
    display: grid; grid-template-columns: 42px minmax(0, 1fr);
    align-items: center; gap: 14px;
    padding: 11px 10px; margin: 0 -10px;
    min-height: 60px;
    border-radius: 12px;
    color: var(--text); font-size: 15px; font-weight: 550;
  }
  .mobile-nav .mobile-group a:hover,
  .mobile-nav .mobile-group a:active { background: var(--surface); }

  .mobile-nav .mobile-group a > .nav-icon {
    width: 42px; height: 42px; padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface);
    color: var(--tone, var(--accent));
  }
  .mobile-nav .mobile-group a > span { min-width: 0; }
  .mobile-nav .mobile-group a small {
    display: block; margin-top: 4px;
    font-size: 12.5px; font-weight: 400; line-height: 1.55;
    color: var(--muted);
  }
  .mobile-nav .mobile-group a > span em {
    font-style: normal; font-size: 9.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    margin-left: 8px; padding: 2px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    vertical-align: middle;
  }

  /* Yasal baglantilar: urun satirlari gibi yer kaplamasin. */
  .mobile-nav .mobile-group a.krw-mobil-yasal {
    grid-template-columns: minmax(0, 1fr);
    min-height: 44px; padding: 9px 10px;
    font-size: 13.5px; font-weight: 400;
    color: var(--muted); opacity: 1;
  }
  .mobile-nav .mobile-group a.krw-mobil-yasal:hover { color: var(--text); }

  /* ---------- Alt bölüm ---------- */
  .mnav-alt {
    margin-top: auto; padding: 18px 16px 26px;
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .mnav-alt-baglar {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .mnav-alt-baglar a {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); color: var(--muted);
    font-size: 12.5px;
  }
  .mnav-alt-baglar a:hover { color: var(--text); border-color: var(--accent); }
  .mnav-alt-baglar a svg { width: 14px; height: 14px; color: var(--accent); }
  .mnav-durum-nokta {
    width: 7px; height: 7px; border-radius: 50%;
    background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 22%, transparent);
  }

  /* Nokta sabit yesildi: kesintide de yesil kalirdi. Artik
     /status/data.json'dan geliyor (app.js). */
  .mnav-durum-nokta.durum-degraded {
    background: #f5a524; box-shadow: 0 0 0 3px color-mix(in srgb, #f5a524 22%, transparent);
  }
  .mnav-durum-nokta.durum-major {
    background: #f06a5b; box-shadow: 0 0 0 3px color-mix(in srgb, #f06a5b 22%, transparent);
  }
  .mnav-durum-nokta.durum-bilinmiyor {
    background: var(--text-3); box-shadow: none;
  }
  .mnav-imza {
    margin: 14px 0 0; font-size: 11px; line-height: 1.65; color: var(--muted);
  }

  /* Menü açıkken sayfa kaymasın. */
  html.mnav-kilit, html.mnav-kilit body { overflow: hidden; }

  /* Eski akordeon kurallarindan arta kalanlar. */
  .mobile-nav .mobile-quick { display: none; }

  @media (prefers-reduced-motion: reduce) {
    #mobile-nav.mobile-nav, .mnav-perde { transition: none; }
  }
}

/* Masaüstünde çekmece parçaları hiç görünmez. */
@media (min-width: 851px) {
  .mnav-ust, .mnav-alt, .mnav-hesap, .mnav-perde { display: none !important; }
}