/* =========================================================================
 * MOBİL KATMAN — yalnızca 767px ve altı.
 *
 * SÖZLEŞME (bu dosyanın var oluş sebebi):
 *   Bu dosyadaki HİÇBİR kural masaüstü görünümünü etkilemez. Tek istisna en
 *   alttaki koruma bloğudur ve o da sadece mobil için üretilen öğeleri
 *   (topbar / alt gezinme / drawer perdesi) masaüstünde gizler.
 *
 *   Yani: mobil tasarımı istediğin kadar değiştir, masaüstü tasarımı
 *   kesinlikle bozulmaz. Bu bir disiplin sözü değil, dosya yapısının
 *   garantisi — ve `test_mobile_desktop_split.py` her koşuda doğruluyor.
 *
 * Eskiden bu CSS mobile.js içinden çalışma anında sayfaya enjekte ediliyordu.
 * Enjekte edilen stil Tailwind'den SONRA geldiği için `md:hidden` gibi
 * masaüstü kurallarını eziyordu ve bir kez masaüstü görünümünü bozmuştu.
 * Ayrı dosya + media query hapsi o sınıfın hatasını yapısal olarak imkânsız
 * kılıyor.
 *
 * Kural.md uyumu: component boyutları SABİT (buton 40, body 14, display 22);
 * ekranla ölçeklenen tek şey yerleşim. Genişlik sınıfı Compact (0–599) ve
 * küçük Medium cihazları kapsar.
 * ========================================================================= */

@media (max-width: 767px) {

  /* iOS çentik/home-indicator payları ve alt gezinme yüksekliği. Yalnızca bu
     dosyadaki kurallar okuduğu için tanımları da burada duruyor — media
     bloğunun dışına çıkarsa sözleşme delinir. */
  :root {
    --km-safe-bottom: env(safe-area-inset-bottom, 0px);
    --km-safe-top: env(safe-area-inset-top, 0px);
    --km-bottom-nav-h: 56px;
  }

  /* Dokunmatikte gri "tap" parlaması — masaüstünde karşılığı yok. */
  html, body { -webkit-tap-highlight-color: transparent; }

  /* iOS Safari'de 100vh, URL bar hareketi yüzünden içeriği kırpıyor.
     Dinamik viewport birimi (dvh) bu sorunu bitirir. */
  body.km-has-bottom-nav main[class*="h-screen"] { height: 100dvh; }

  /* --- Mobil bottom nav — safe area + görünürlük ------------------ */
  .km-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 0 8px calc(var(--km-safe-bottom));
    height: calc(var(--km-bottom-nav-h) + var(--km-safe-bottom));
    background: var(--km-surface-container-high);
    border-top: 1px solid var(--km-outline-variant);
  }
  .km-bottom-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--km-on-surface-variant);
    text-decoration: none; gap: 2px;
    /* Tip ölçeğinin en küçük token'ı caption = 12 (Kural B1/C1).
       10px token dışıydı ve ikonun altındaki etiketi okunmaz kılıyordu. */
    font-family: Inter, sans-serif; font-size: 12px;
    font-weight: 700; letter-spacing: 0.05em;
  }
  .km-bottom-nav a.is-active {
    color: var(--km-primary-fixed);
  }
  .km-bottom-nav a .material-symbols-outlined {
    font-size: 22px;
  }
  .km-bottom-nav a.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
  }

  /* --- Mobil hamburger + üst bar --------------------------------- */
  .km-topbar {
    position: sticky; top: 0; z-index: 45;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px calc(10px + var(--km-safe-top) * 0);
    background: var(--km-background);
    border-bottom: 1px solid var(--km-outline-variant);
  }
  .km-topbar button, .km-topbar a.km-icon-btn {
    appearance: none; background: transparent; border: 0; padding: 6px;
    color: var(--km-on-surface); border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    /* İkon 24px olduğu için buton 36px kalıyordu; hamburger ve geri
       düğmesi mobilin en çok kullanılan iki kontrolü ve parmakla ıskalanıyordu.
       Kural D1: dokunma alanı en az 48×48. */
    min-width: 48px; min-height: 48px;
  }
  .km-topbar button:active, .km-topbar a.km-icon-btn:active {
    background: var(--km-surface-container-high);
  }
  .km-topbar .km-topbar-title {
    font-family: Inter, sans-serif; font-weight: 700;
    color: var(--km-primary-fixed); font-size: 16px; line-height: 1;
  }
  .km-topbar .km-topbar-spacer { flex: 1; }

  /* --- Drawer (mobil sidebar) ------------------------------------ */
  .km-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 55; opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .km-drawer-backdrop.is-open {
    opacity: 1; pointer-events: auto;
  }
  body.km-drawer-open { overflow: hidden; }

    /* Sidebar'ı off-canvas drawer yap.
       HTML'lerdeki "hidden md:flex" Tailwind sınıfı mobilde display:none
       yapıyor — o zaman transform hiçbir işe yaramıyor. Compact'de zorla
       flex çünkü artık drawer olarak görünecek (kapalıyken translate ile
       ekran dışında, hamburger açınca içeri kayar). */
    nav[class*="w-sidebar_width"] {
      display: flex !important;
      flex-direction: column;
      transform: translateX(-100%);
      transition: transform .22s ease;
      width: min(280px, 84vw) !important;
      max-width: 84vw;
      z-index: 60;
      /* iOS Safari'de sidebar `h-screen` (100vh) — URL bar'ın arkasına
         uzayıp alt öğeleri kırpıyor. `top:0; bottom:0` + dvh drawer'ı
         görünür alana sabitler; alt tab bar açıksa onun kadar yukarı
         çekilir, iç scroll son öğeye kadar erişir. */
      top: 0 !important;
      bottom: 0 !important;
      height: 100dvh !important;
      padding-top: calc(16px + var(--km-safe-top));
      padding-bottom: calc(16px + var(--km-safe-bottom));
      background: var(--km-surface-container-low) !important;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    body.km-has-bottom-nav nav[class*="w-sidebar_width"] {
      bottom: calc(var(--km-bottom-nav-h) + var(--km-safe-bottom)) !important;
      height: auto !important;
    }
    nav[class*="w-sidebar_width"].is-open {
      transform: translateX(0);
      box-shadow: 0 0 24px rgba(0,0,0,0.6);
    }
    /* Main'in sidebar boşluğu bırakmamasını sağla */
    main[class*="ml-sidebar_width"],
    main[class*="md:ml-sidebar_width"] {
      margin-left: 0 !important;
    }
    /* Alt tab bar'a yer aç — main'e padding-bottom */
    body.km-has-bottom-nav main {
      padding-bottom: calc(var(--km-bottom-nav-h) + var(--km-safe-bottom) + 8px) !important;
    }
    /* Eski, hard-coded bottom nav'ı (varlik/panel HTML'inde bulunan) gizle;
       yerine .km-bottom-nav (JS enjekte) tek doğruluk kaynağıdır. */
    body.km-has-bottom-nav nav.fixed.bottom-0:not(.km-bottom-nav),
    body.km-has-bottom-nav nav[class*="bottom-0"][class*="w-full"]:not(.km-bottom-nav) {
      display: none !important;
    }
    /* varlik/index.html gibi bazı sayfalar Stitch'in mobil-only
       "KriptoMercek" wordmark header'ını ekliyor. Benim .km-topbar
       onun yerine geçiyor — Stitch header'ını gizle. */
    body.km-mobile > header.md\:hidden,
    body.km-mobile > header[class*="md:hidden"] {
      display: none !important;
    }

    /* TİPOGRAFİ VE COMPONENT BOYUTLARI: bilerek BOŞ.
     *
     * Burada eskiden mobil için ayrı bir yazı ölçeği (body 13-14px, h1 22px)
     * ve küçültülmüş buton yükseklikleri (48→40, 40→36) vardı. Üçü de
     * Kural.md'ye aykırıydı:
     *
     *   C1 — "Ölçek her platformda aynıdır… body metin hiçbir platformda
     *         16'nın altına inmez (web dahil)."
     *   D1 — "Yükseklik sabit token: 48 (standart), 40 (küçük). Ekrana göre
     *         değişmez." + "Dokunma alanı minimum 48×48."
     *
     * 36px'lik bir buton dokunma hedefi sınırının altındaydı; 13px gövde
     * metni okunabilirlik tabanının altındaydı. Altın Kural'a göre ekran
     * küçülünce YERLEŞİM değişir, component boyutu değil — bu dosyanın geri
     * kalanı (tek kolona düşen grid'ler, drawer, alt gezinme) tam olarak
     * bunu yapıyor.
     */

    /* iOS, 16px'ten küçük bir input'a odaklanınca sayfayı zorla yakınlaştırır
       ve kullanıcı elle geri uzaklaştırmak zorunda kalır (Kural D2). */
    input, select, textarea { min-height: 48px; font-size: 16px !important; }

    /* Panel kartlarındaki aksiyon butonları (Long/Short/Piyasa Yönü, Detay,
       Tekrar tara, Kaldır) masaüstünde 32–40px. Mobilde bu, dokunma sınırının
       altında kalıyor ve yanlış butona basılıyordu (Kural D1: en az 48×48).
       Masaüstü boyutları olduğu gibi kalır — bu kural yalnızca <768'de. */
    #km-fav-grid button,
    #km-refresh-all,
    #km-add-btn,
    #km-hint-close {
      min-height: 48px;
    }

    /* Sıralama ipucu dar ekranda alt alta dizilsin; yan yana sıkışınca
       hem metin hem buton okunmaz oluyor. */
    #km-reorder-hint {
      flex-wrap: wrap;
    }
    #km-reorder-hint #km-hint-close {
      width: 100%;
    }

    /* Dokunma hedefi en az 48×48 (Kural D1). Gezinme bağlantıları, alt bilgi
       bağlantıları ve düğme/çip biçimli bağlantılar tek satır metin olduğu
       için 20–40px yükseklikte kalıyordu; parmakla isabet ettirmek zordu.
       Kural'ın önerdiği çözüm: yazı boyutu ve görünüm aynı kalır, yalnızca
       tıklanabilir alan büyür.

       Seçiciler bilerek AÇIK yazıldı. Genel bir `a` kuralı, metin içindeki
       satır içi bağlantıları da 48px yapıp paragraf akışını bozardı; kart
       sarmalayan bağlantılarda ise `display` değiştirmek yerleşimi kırardı.
       Bu yüzden yalnızca bağımsız kontroller hedefleniyor. */
    footer a,
    nav a:not(.km-bottom-nav a),
    a[class*="rounded"][class*="border"],
    a[class*="bg-primary-fixed"],
    a[class*="self-start"] {
      display: inline-flex;
      align-items: center;
      min-height: 48px;
    }

    /* Kart / bölüm boşlukları: token setinden küçük komşuya iner
       (lg 24 → md 16, md 16 → sm 8). Token dışı ara değer yok (Kural B2). */
    section.p-lg, div.p-lg, .p-xl { padding: 16px !important; }
    .p-md { padding: 8px !important; }
    section > .rounded-lg { max-width: 100%; }

    /* Analiz motoru bazı grid'leri 5 kolonda basıyor — mobilde 2 yeter */
    .grid.grid-cols-5, .grid.md\:grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid.grid-cols-4, .grid.md\:grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid.grid-cols-3, .grid.md\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

    /* İç scroll bekleyen tablolar mobilde bantsız uzayabilsin */
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* Buton yazıları tek satırdan taşmasın (Kural D1) */
    button, .km-bottom-nav a { white-space: nowrap; }

    /* Yatay taşmayı bitir — Stitch bazı yerlerde geniş sabit min-width verdi */
    body { overflow-x: hidden; }

    /* Body çoğu sayfada flex-row. Topbar'ı body'nin ilk çocuğu olarak
       ekliyoruz; row yönünde eklenirse topbar main'i sağa iter. Mobil
       için body'yi column'a çevir — desktop'ta zaten md: sınıfları
       geri döndürüyor. */
    body.km-mobile { flex-direction: column !important; }

    /* Uzun mono metinler (TRC20 adresi, hash) mobilde satıra sığmasa da
       kart dışına taşmasın: harften kırılabilsin. */
    .font-data-mono, .font-data-mono-lg { word-break: break-all; overflow-wrap: anywhere; }

    /* Input placeholder'ı ve mono metinler kesilmesin, kart genişliğinde
       kalabilsin (Kural C3: dekoratif container metni kesmez). */
    input, select { min-width: 0; max-width: 100%; }
    label { min-width: 0; }
    section { min-width: 0; overflow: visible; }
    .rounded-lg { min-width: 0; }

    /* Alt tab bar için ekstra alan — pb-24 gibi eski değerleri hükümsüz kıl */
    body.km-has-bottom-nav main[class*="pb-"] {
      padding-bottom: calc(var(--km-bottom-nav-h) + var(--km-safe-bottom) + 12px) !important;
    }

    /* Bazı Stitch layout'ları body'ye "h-screen overflow-hidden" veriyor.
       Bu compact'de scroll'u öldürüyor — mobile.js body'ye km-mobile
       sınıfı ekler, biz burada bu ikisini geçici olarak override ederiz.
       Desktop'ta ilgili sınıflar orijinal davranışlarına döner. */
    body.km-mobile.h-screen {
      height: auto !important;
    }
    body.km-mobile.overflow-hidden {
      overflow: auto !important;
      overflow-x: hidden !important;
    }
    body.km-mobile main[class*="h-screen"] {
      height: auto !important;
      min-height: 100dvh;
    }
    body.km-mobile main[class*="overflow-hidden"] {
      overflow: visible !important;
    }
}

/* -------------------------------------------------------------------------
 * MASAÜSTÜ KORUMASI — bu dosyadaki tek >=768 kuralı.
 * Mobil için DOM'a eklenen öğeler masaüstünde hiçbir koşulda görünmez.
 * Tailwind'in `md:hidden` sınıfı ezilse bile bu kural son sözü söyler.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .km-topbar, .km-bottom-nav, .km-drawer-backdrop { display: none !important; }
}