/* ═══════════════════════════════════════════════════════════════════════
   CoinAlko — ORTAK MOBİL KATMAN
   ───────────────────────────────────────────────────────────────────────
   Navbar HTML'i 12 sayfada TEKRARLANMIŞ durumda (.navbar-links ve .hdr-nav
   olmak üzere iki desen). Her sayfaya ayrı ayrı hamburger menü elle eklemek
   12 kopya bakım yükü + 12 hata fırsatı demekti. Onun yerine bu dosya +
   mobil.js her sayfaya TEK satırla giriyor ve menüyü mevcut bağlantıları
   KLONLAYARAK kuruyor — yani bir sayfaya yeni bağlantı eklendiğinde mobil
   menü kendiliğinden güncel kalır.

   ÖNEMLİ: bu dosya yalnızca ≤900px'te devreye girer. Masaüstü görünümüne
   tek bir kural bile uygulanmaz (rule #1: siteyi bozma).
   ═══════════════════════════════════════════════════════════════════════ */

/* Hamburger düğmesi — masaüstünde YOK */
.mnav-btn{ display:none; }

@media (max-width:900px){

  /* ── 1) Yatay taşmayı kökten kes ──────────────────────────────────
     Tek bir geniş öğe (tablo, grafik, uzun başlık) tüm sayfayı yana
     kaydırıyordu. Ölçüldü: /fear-greed 471px / 390px ekran.            */
  html, body{ max-width:100%; overflow-x:hidden; }

  /* ── 2) Navbar: yatay kayan bağlantı şeridi YERİNE hamburger ──────
     Yatay kayan menü mobilde kötü desen: kullanıcı orada bağlantı
     olduğunu görmez. Şeridi gizleyip çekmeceye taşıyoruz.             */
  /* ── SAYFA BAĞLANTILARI ÜSTTE, MASAÜSTÜNDEKİ GİBİ ────────────────
     ESKİDEN: bu bağlantılar gizlenip hamburger çekmecesine taşınmıştı.
     Ege bildirdi: "tüm sayfa butonları aynı bilgisayardaki gibi en üstte
     gözükmeli, yani üç çizgiye basınca açılan menü yerine direkt en üstte
     gözükmeli." Çekmece kaldırıldı; yedi bağlantı da üst çubukta, kendi
     satırlarında SARARAK duruyor — hiçbiri gizli değil, hepsi tek
     dokunuşla erişilebilir. */
  .navbar-links, .hdr-nav{
    display:flex !important; flex-wrap:wrap; overflow:visible !important;
    flex:1 1 100%; order:8; gap:2px; min-width:0; margin:0;
  }
  .nav-link{
    font-size:8.5px !important; padding:3px 6px !important;
    min-height:24px !important; white-space:nowrap; flex:0 0 auto;
  }
  .hdr-back{ font-size:8.5px !important; padding:3px 6px !important; }

  /* Hamburger çekmecesi artık gereksiz — kapatıldı. */
  .mnav-btn, .mnav-panel, .mnav-perde{ display:none !important; }
  .navbar, .hdr{ gap:8px; padding-left:12px; padding-right:8px; }
  .navbar .logo{ margin-right:auto; }
  .hdr .logo{ margin-right:auto; }
  .navbar .logo img, .hdr .logo img{ width:32px !important; height:32px !important; }
  .navbar .logo-text, .hdr .logo-text{ font-size:14px; }
  /* ── ARAÇ DÜĞMELERİ MOBİLDE DE GÖRÜNÜR ────────────────────────────
     ESKİDEN: `.nav-actions{display:none}` — AlkoAI, Trading Deck ve
     Draw & Find düğmeleri mobilde tamamen gizleniyordu (sayfanın kendi
     CSS'i de `.desktop-only` ile ≤960px'te gizliyor). Ege bildirdi:
     "üst taraftaki alkoai draw find trading deck dahil tüm butonlar
     sayfanın en üstünde doğru şekilde gözükmeli tıklanılabilir olmalı."
     Doğal genişlikleri 104+110+158 = ~372px; 390px navbar'da logo ve
     menü düğmesiyle birlikte tek satıra sığmıyor. Bu yüzden navbar
     sarıyor ve üçü KENDİ SATIRINDA eşit paylaşarak tam genişlik
     kaplıyor — hiçbiri gizlenmiyor, üçü de basılabilir. */
  .navbar{ flex-wrap:wrap; height:auto !important; row-gap:5px;
           padding-bottom:6px; align-items:center; }
  .nav-actions{
    display:flex !important; flex:1 1 100%; order:9;
    margin-left:0 !important; gap:6px; min-width:0;
  }
  .nav-actions .desktop-only{ display:inline-flex !important; }
  .nav-actions > *{
    flex:1 1 0; min-width:0;
    top:0 !important;                    /* masaüstündeki +16px kayma yok */
    width:auto !important; height:38px !important;
  }
  /* Etiketler dar düğmede taşmasın */
  .alkoai-txt, .c3d-txt{ min-width:0; }
  .alkoai-name, .c3d-name{ font-size:11px; }
  .alkoai-sub, .c3d-sub{ font-size:6.5px; }
  .df-label{ font-size:11px; }
  .c3d-btn{ padding:0 6px !important; }

  /* Başlık bir satır uzadı — sticky ofsetler de büyümeli
     (pro-analysis sayfaları `top:var(--ca-hdr)` kullanıyor). */
  /* Ölçülen gerçek başlık yüksekliği: .header-bar 177px (navbar 144 +
     sub-nav 32). pro-analysis sayfaları sticky ofset için bunu
     kullanıyor; küçük kalırsa yapışkan paneller başlığın altına girer. */
  :root{ --ca-hdr:180px; }

  .mnav-btn{
    display:none;                      /* çekmece kaldırıldı (bkz. yukarı) */
    align-items:center; justify-content:center;
    flex-shrink:0;
    width:38px; height:38px; padding:0;
    background:transparent; border:1px solid var(--border2, #2a2f3a);
    border-radius:9px; cursor:pointer;
    color:var(--t1, #e8eaed);
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-btn:active{ background:var(--bg3, #1a1d24); }
  .mnav-btn span{
    display:block; width:17px; height:1.6px; border-radius:2px;
    background:currentColor; position:relative;
  }
  .mnav-btn span::before, .mnav-btn span::after{
    content:''; position:absolute; left:0; width:17px; height:1.6px;
    border-radius:2px; background:currentColor;
    transition:transform .22s ease, top .22s ease;
  }
  .mnav-btn span::before{ top:-5.5px; }
  .mnav-btn span::after{  top: 5.5px; }
  /* Açıkken çarpıya dönüşür */
  body.mnav-acik .mnav-btn span{ background:transparent; }
  body.mnav-acik .mnav-btn span::before{ top:0; transform:rotate(45deg); }
  body.mnav-acik .mnav-btn span::after{  top:0; transform:rotate(-45deg); }

  /* ── 3) Çekmece ───────────────────────────────────────────────── */
  .mnav-perde{
    position:fixed; inset:0; z-index:9998;
    background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  body.mnav-acik .mnav-perde{ opacity:1; pointer-events:auto; }

  .mnav-panel{
    position:fixed; top:0; right:0; z-index:9999;
    width:min(84vw, 320px); height:100%;
    background:var(--bg1, #0e1116);
    border-left:1px solid var(--border, #232833);
    box-shadow:-18px 0 44px rgba(0,0,0,.5);
    transform:translateX(100%);
    /* KAPALIYKEN gerçekten yok: sadece translate ile itmek yetmez — öğeler
       hâlâ Tab ile odaklanabilir ve ekran okuyucuya görünür kalır. */
    visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s;
    display:flex; flex-direction:column;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    /* iPhone çentik/ana-ekran çubuğu güvenli alanı */
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  body.mnav-acik .mnav-panel{
    transform:translateX(0); visibility:visible;
    transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s;
  }

  .mnav-bas{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border, #232833);
    font-size:11px; font-weight:600; letter-spacing:.9px;
    color:var(--t3, #6b7280); text-transform:uppercase;
    position:sticky; top:0; background:var(--bg1, #0e1116); z-index:1;
  }
  .mnav-kapat{
    background:none; border:none; color:var(--t2, #9aa3b2);
    font-size:20px; line-height:1; cursor:pointer;
    width:32px; height:32px; border-radius:8px;
  }
  .mnav-kapat:active{ background:var(--bg3, #1a1d24); }

  .mnav-liste{ display:flex; flex-direction:column; padding:6px 0; }
  .mnav-oge{
    display:flex; align-items:center; gap:10px;
    min-height:46px; padding:0 18px;                /* 46px = rahat dokunma */
    background:none; border:none; width:100%;
    font-family:inherit; font-size:14px; font-weight:500;
    color:var(--t2, #9aa3b2); text-align:left; text-decoration:none;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    border-left:2px solid transparent;
  }
  .mnav-oge:active{ background:var(--bg2, #141821); }
  .mnav-oge.aktif{
    color:var(--t1, #e8eaed); background:var(--bg2, #141821);
    border-left-color:var(--ac, #3b82f6);
  }
  .mnav-ayrac{
    margin:8px 18px 4px; padding-top:10px;
    border-top:1px solid var(--border, #232833);
    font-size:10px; font-weight:600; letter-spacing:.9px;
    color:var(--t3, #6b7280); text-transform:uppercase;
  }

  /* ── 4) Dokunma hedefi tabanı: 44px kural, 32px asgari ─────────── */
  .nav-link, .sn-item, .hdr-back{ min-height:32px; }

  /* ── 5) Geniş içerik sayfayı değil KENDİNİ kaydırsın ───────────── */
  table{ max-width:100%; }
}

/* Çok dar telefonlar (iPhone SE 375 ve altı) */
@media (max-width:380px){
  .navbar .logo-text, .hdr .logo-text{ font-size:13px; }
  .mnav-panel{ width:88vw; }
}

/* ═══════════════════════════════════════════════════════════════════════
   OKUNABİLİRLİK + DOKUNMA HEDEFİ
   ───────────────────────────────────────────────────────────────────────
   Aşağıdaki sınıflar TAHMİNLE değil, 390×844 gerçek telefon ekranında
   ölçülerek bulundu (her sayfada <9px yazı ve <28px düğme sayıldı).
   Masaüstünde yoğun tablo tasarımı doğru; telefonda 7–8,5px yazı okunmaz
   ve 12–19px düğmeye parmakla isabet edilmez.
   Sayılar ölçülen en büyük kalabalıklardan seçildi:
     index      : 2704 küçük yazı / 2124 küçük hedef
     market     :  939 / 14      pro-analysis : 444 / 30
     orderbook  :  718 / 98      trading      :   3 / 58
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── Küçük etiket yazıları → 10,5px taban ───────────────────────────
     Satırlar biraz yükselir; telefonda dikey kaydırma zaten var,
     okunmayan yazıdan iyidir. Ad alanları `overflow:hidden` olduğu için
     genişleme taşma değil kısaltma üretir. */
  .lv-sub, .lv-sub-l, .lv-sub-s, .lv-last-amt, .lv-name.xlong, .lvd-ms,
  .ls2-sym.xlong, .rpm-l, .rp-market .rpm-l, .rp-market .rpm-sub, .rp-slip,
  .rp-slip-sub, .pre10s-lbl, .pre10s-price, .bt-ex,
  .sym-base, .bt-side, .bt-time, .bt-mktflow-lbl, .bt-mktflow-buy,
  .bt-mktflow-sell, .mp-price,
  .lic-lbl, .lic-chg-lbl, .mc-label, .rp-miniheat-lbl, .rp-miniheat-price,
  .ds-ratio, .cl-liq,
  .tt-lbl, .fg-lbl, .fg-cls, .mini-hm-legend-lbl, .legend-unit, .pp-val,
  .sn-label, .alf-axis, .als-cell .p{
    font-size:10.5px !important;
    line-height:1.3;
  }

  /* ── Parmakla basılabilir düğmeler ──────────────────────────────────
     Ölçülen yükseklikler: tft-expand 12px, p-ex 13, p-tf 14, ind 16,
     ls2-chart 17, ema 17, whale-chart 18, lv-chart/lv-list/an/sbtn 19,
     liq-hist 20, size-sel 21, toggle 21-22, ptab-add 23,
     ai-detail/tft-sort 24, cl-sb/tft-refresh 25, icon 26.
     Hepsi 30px'e çıkarıldı (Apple/Google önerisi 44px; burada satır
     yoğunluğunu tamamen bozmamak için 30px'te dengelendi ve düğmeler
     arası boşluk artırıldı — isabet alanı büyür, satır patlamaz). */
  .ls2-chart-btn, .lv-chart-btn, .lv-list-btn, .whale-chart-btn,
  .ai-detail-btn, .liq-hist-btn, .ema-btn, .an-btn, .fc, .sbtn,
  .ind-btn, .p-tf-btn, .p-ex-btn, .ptab-add, .toggle-btn, .icon-btn,
  .cl-sb, .tft-expand-btn, .tft-sort-btn, .tft-refresh-btn, .size-sel{
    min-height:30px !important;
    min-width:30px;
  }
  /* Kare ikon düğmeleri. DİKKAT: `.whale-chart-btn` BİLEREK dışarıda —
     o bir İKON değil "⬡ Chart" YAZILI düğme; kare yapınca yazısı
     kırpılıyordu (ekran görüntüsüyle görüldü). */
  .ls2-chart-btn, .lv-chart-btn, .lv-list-btn{
    width:30px !important; height:30px !important;
  }
  /* Anasayfa widget'ları telefonda 181px genişliğinde. 30px'lik iki ikon
     155px'lik satırın 60px'ini yerdi; orada 26px yeterli. */
  .widget .ls2-chart-btn, .widget .lv-chart-btn, .widget .lv-list-btn{
    width:26px !important; height:26px !important; min-height:26px !important;
    min-width:26px;
  }
  /* Satır içi düğme büyüyünce satırın kendisi de nefes alsın */
  .lv-row, .ls2-row{ padding-top:4px; padding-bottom:4px; }

  /* NOT: `.lad-row` (order book merdiveni, 22px) ve `.wall-row` (24px)
     BİLEREK büyütülmedi — bunlar düğme değil VERİ SATIRI; büyütmek
     ekranda görünen fiyat seviyesi sayısını düşürürdü. */
}

/* ── 2. tur okunabilirlik (Pro Chart panelleri, Order Flow, Liq Volume,
      Heatmap eksenleri) — yine ölçümle bulundu ───────────────────────── */
@media (max-width:900px){
  /* Pro Chart yan panelleri: trades 7-8,5px, order book 8-8,5px idi */
  .tb-price, .tb-time, .tb-buy-val, .tb-sell-val, .tb-tot,
  .ob-price, .ob-qty, .trades-tab,
  /* Order Flow tablosu */
  .th, .ratio-num, .cell-total-coins, .stat-label, .cell-live, .sn-r-tag,
  /* Liquidation Volume rozetleri */
  .bdg,
  /* Heatmap eksen etiketleri */
  .p-y-lbl, .p-y-cur, .x-lbl, .legend-max{
    font-size:10px !important;
    line-height:1.35;
  }
  /* Order Flow hücrelerindeki satır-içi `font-size:8px` yazılar.
     Satır içi stil, sayfa CSS'ini yener ama `!important`i YENEMEZ. */
  .flow-table-wrap span, .flow-table-wrap div{ font-size:10px !important; }

  /* Yazı büyüyünce Pro Chart yan panelleri de biraz genişlesin,
     yoksa sayı kırpılır. Yatayda ekran 844px; 160px panel sorun değil. */
  .trades-panel{ width:160px !important; }
  .ob-panel{ width:164px !important; }

  /* Kalan küçük düğmeler */
  .dt-mini, .tf, .cv-pin-bar span{ min-height:28px; }
  .flow-table-wrap select, .flow-table-wrap input,
  select, input[type="text"], input[type="number"], input[type="search"]{
    min-height:30px;
  }
}
/* Dikeyde panel tam genişlik olduğu için yukarıdaki 160px'i geri al */
@media (max-width:900px) and (orientation:portrait){
  .trades-panel, .ob-panel{ width:100% !important; }
}

/* ── GÖRSEL DOĞRULAMADA ÇIKAN DÜZELTMELER ─────────────────────────────
   390×844 ve 844×390 ekran görüntüleri incelenerek bulundu.           */
@media (max-width:900px){

  /* NOT: burada eskiden `.layout-toggle` (compact mod düğmesi) için
     okunabilirlik kuralı vardı. O düğme ve compact modun tamamı
     kaldırıldı (Ege: "compact modu sil, her zaman full mod olsun"),
     bu yüzden kural da silindi. */

  /* 2) Pro Chart'ta "BTCUSDT Perp" iki satıra kırılıp araç çubuğunu
        bozuyordu. Tek satırda kalsın. */
  .nav-sym{ white-space:nowrap; font-size:12px; }
}

/* 3) YATAY modda ekran yüksekliği 390px — üst şeritler grafiğe yer
      bırakmıyor. Şeritleri inceltip mumlara alan açıyoruz. */
@media (max-width:900px) and (orientation:landscape){
  .navbar{ height:44px !important; }
  .sub-nav{ height:30px !important; padding-left:10px; padding-right:6px; }
  /* Bölüm listesi ile tema anahtarı arasına nefes payı */
  .sub-nav{ gap:6px; }
  .sn-items{ flex:1 1 auto; min-width:0; }
  .pc-toolbar{ height:38px !important; }
  .stats-bar{ height:24px !important; padding-left:10px; }
  .navbar .logo img, .hdr .logo img{ width:26px !important; height:26px !important; }
}

/* ── ESKİ MOBİL MENÜ İLE ÇAKIŞMA ──────────────────────────────────────
   Sitede zaten `.hamburger` + `.mobile-menu` (toggleMenu) vardı; ekranda
   YAN YANA İKİ AYNI hamburger düğmesi çıkıyordu (ekran görüntüsüyle
   görüldü). Eski menü 10 sayfada var ve SABİT 6 bağlantı içeriyor —
   Liquidation Volume, sayfa-içi bölümler (Asks/Bids, Order Flow…) ve
   AlkoAI / Trading Deck / Draw & Find onda YOK; ayrıca liq-volume,
   draw-find, disclaimer, terms, privacy sayfalarında hiç yok.
   Yeni çekmece bunların hepsini kapsıyor ve bağlantıları sayfadan
   klonladığı için kendiliğinden güncel kalıyor. Bu yüzden eskisi
   MOBİLDE gizleniyor (silinmiyor — geri almak tek satır). */
@media (max-width:900px){
  .hamburger{ display:none !important; }
  .mobile-menu, .mobile-menu.open{ display:none !important; }

  /* Logo yazısı ("CoinAlko") dar ekranda "Coin"e kırpılıyordu */
  .navbar .logo, .hdr .logo{ flex-shrink:0; min-width:0; }
  .navbar .logo-text, .hdr .logo-text{ white-space:nowrap; flex-shrink:0; }
  /* Sağ blok kırpılabilir olsun ki logo tam görünsün */
  .nav-right{ min-width:0; flex-shrink:1; }
}

/* Marka adının "Alko" yarısı ≤480px'te `display:none` ile gizleniyordu
   (index.html:1651) — o kural navbar bağlantılarla dolu olduğu dönemden
   kalma. Bağlantılar artık çekmecede; yer var, marka tam görünsün. */
@media (max-width:900px){
  .logo-text span{ display:inline !important; }
}

/* ── YASAL ONAY ŞERİDİ (#ca-legal-bar) ────────────────────────────────
   Masaüstünde tek satırlık ince şerit; 390×844 telefonda 380px yer
   kaplıyordu — ekranın %45'i (ekran görüntüsüyle ölçüldü). Metin aynı
   kalıyor (hukuki içerik kısaltılmaz), yalnız tipografi ve boşluk
   sıkıştırılıyor; onay düğmesi tam genişlik olup daha kolay basılıyor. */
@media (max-width:900px){
  #ca-legal-bar{ padding:9px 12px !important; gap:8px !important; }
  #ca-legal-bar .cal-txt{ font-size:10.5px !important; line-height:1.45 !important;
                          flex:1 1 100% !important; min-width:0 !important; }
  #ca-legal-bar .cal-links{ gap:10px !important; margin-top:4px !important; }
  #ca-legal-bar .cal-links a{ font-size:10.5px !important; }
  #ca-legal-bar .cal-ok{ flex:1 1 100% !important; padding:10px 16px !important;
                         font-size:12px !important; min-height:38px; }
}
/* Yatayda ekran yalnız 390px yüksekliğinde — şerit daha da incelmeli,
   yoksa grafiğe yer kalmıyor. */
@media (max-width:900px) and (orientation:landscape){
  #ca-legal-bar{ padding:6px 10px !important; }
  #ca-legal-bar .cal-txt{ font-size:9.5px !important; line-height:1.35 !important;
                          flex:1 1 auto !important; }
  #ca-legal-bar .cal-links a{ font-size:9.5px !important; }
  /* Yatayda metin ile düğme YAN YANA kalsın (alt alta 3 satır olunca
     grafikten 60px daha çalıyordu). */
  #ca-legal-bar{ flex-wrap:nowrap !important; }
  #ca-legal-bar .cal-ok{ flex:0 0 auto !important; padding:7px 14px !important;
                         align-self:center; }
}

/* ── 3. tur: son kalan küçük yazı ve düğmeler ─────────────────────────
   `span.oi-kir b` = likidasyon tablosundaki funding-rate değeri (index'te
   1212 adet, 8,5px). Tablo `#liq-table` yatay kayan bir sarmalayıcının
   içinde (ölçüldü: KAYAR(live-table-wrap)), o yüzden büyütmek taşma
   yapmaz — sadece okunur hale getirir. */
@media (max-width:900px){
  .oi-kir, .oi-kir b,
  .mp-chg, .mp-col-head-gain, .mp-col-head-loss, .coin-logo-fb,
  .mst-sub, .depth-lbl, .liqtot-not,
  .wx-chip, .fx-chip, .bt-fbtn, .tt-btc-toggle{
    font-size:10px !important;
  }
  .filter-chip, .ind-chip, .wx-chip, .fx-chip, .ind-gear, .wtb,
  .tfdd-btn, .mini-hm-tf-btn, .bt-fbtn, .tt-btc-toggle{
    min-height:29px !important;
  }
  .ind-gear, .wtb{ min-width:29px; }

  /* NOT: gövde metni içindeki satır-içi bağlantılar (`a h=14..18`) BİLEREK
     büyütülmedi — onlar düğme değil, cümle içindeki kelimeler; yükseklik
     vermek satır aralığını bozar. */
}

/* Son kalanlar: sekme düğmeleri ve arama girdisi (18px'lik bir arama
   kutusuna parmakla isabet etmek zor). */
@media (max-width:900px){
  .pc-tab, .lv-tab, .fg-fullpage-btn{ min-height:29px !important; }
  .w-search, input.w-search{ min-height:30px !important; font-size:11.5px; }
}

/* Order Flow'daki coin listesi (#cp-list) satırları JS ile satır-içi
   `font-size:8px` verilerek üretiliyor; sınıfları yok, bu yüzden kapla
   hedefleniyor. 832 adet ölçüldü — telefonda okunmuyordu. */
@media (max-width:900px){
  #cp-list span, #cp-list div{ font-size:10px !important; }
  #cp-list span[style*="font-size:11px"]{ font-size:11.5px !important; }
  /* Fear & Greed istatistik kartları (7-8px etiketler) ve periyot düğmeleri */
  .stat-card-lbl, .stat-card-sub{ font-size:10px !important; }
  .pbtn{ min-height:29px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANASAYFA WIDGET İÇ ÖLÇEĞİ
   ──────────────────────────────────────────────────────────────────────
   Ege'nin kuralı: "widgetlerin içi tam gözükmeli bilgisayardaki gibi,
   widget içinde yana kaydırma olmamalı … widgetleri normal boyutlarına
   getir ama daha küçük olmalı yazılar, kullanıcı isterse yakınlaşır."

   Yani DİZİLİM masaüstündeki gibi kalır (aynı sütunlar, aynı sıra),
   yalnızca ÖLÇEK küçülür. Ölçülen gerçek: satır içeriği 360px, telefonda
   kutu 152px → gereken oran ~0.42. Aşağıdaki değerler o orana göre
   hesaplandı, tahminle değil.

   Bu blok mobil.css'in SONUNDA duruyor çünkü yukarıdaki genel
   okunabilirlik kuralları (10-10,5px) `!important` taşıyor; buradaki
   `.widget ...` seçicileri hem daha spesifik hem daha sonra geldiği için
   anasayfa widget'larının içinde onları eziyor. Widget DIŞINDA o
   kurallar aynen geçerli kalır.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── Ortak: satır içi ikon düğmeleri ─────────────────────────────── */
  .widget .lv-chart-btn, .widget .lv-list-btn, .widget .ls2-chart-btn{
    width:14px !important; height:14px !important;
    min-width:14px !important; min-height:14px !important;
    border-radius:3px; padding:0 !important;
  }
  .widget .lv-chart-btn svg, .widget .lv-list-btn svg,
  .widget .ls2-chart-btn svg{ width:8px !important; height:8px !important; }

  /* ── Liq Volume satırı (masaüstü dizilimi: ikon ikon logo ad çubuk
        toplam) ───────────────────────────────────────────────────── */
  .widget .lv-row{ gap:2px !important; padding:3px 2px !important; }
  .widget .lv-logo{ width:11px !important; height:11px !important; }
  .widget .lv-name{ font-size:7px !important; min-width:26px !important;
                    max-width:48px !important; }
  .widget .lv-name.long{ font-size:6.5px !important; }
  .widget .lv-name.xlong{ font-size:6px !important; }
  .widget .lv-mid{ flex:0 0 40px !important; min-width:40px !important; gap:1px; }
  .widget .lv-bar{ height:5px !important; }
  .widget .lv-sub{ gap:2px !important; font-size:6px !important; }
  .widget .lv-sub-l, .widget .lv-sub-s{ font-size:6px !important; }
  .widget .lv-total{ font-size:7px !important; min-width:24px !important; }
  .widget .lv-last, .widget .lv-last-amt{ font-size:6px !important; }

  /* ── Long/Short satırı — TEK SIRA DEĞİL, İKİ KAT ─────────────────────
     Eskiden beş şey (ikon, sembol, hacim, çubuk, iki yüzde) 155px'lik
     satıra yan yana sıkıştırılıyordu; ÖLÇÜLDÜ: sembol 5,5px, hacim 5,0px,
     yüzdeler 5,5px, çubuk 30×3px — telefonda okunmuyordu.
     Ege: "long short oranları sembolün altında olsun sağında olmak
     yerine, sembollerin ismi ve logoları da daha büyük olsun, böylelikle
     tek bir anda daha az sembol gözükecek ama her şey netleşecek."
     Yeni düzen (satır başına iki kat):
         [grafik] (logo) SEMBOL            $HACİM
         ▓▓▓▓▓▓▓▓▓░░░░░░░░░░   54.8%  45.2%
     Kat ayrımını `.ls2-br` (yalnız mobilde açılan, %100 genişlikte sıfır
     yükseklikli kırıcı) yapıyor — içerik genişliğine bağlı tahmine değil,
     AÇIK bir kurala dayanıyor. */
  .widget .ls2-row{
    flex-wrap:wrap !important;
    gap:3px 6px !important;
    padding:6px !important;
    border-bottom:1px solid var(--border);
    border-radius:0 !important;
  }
  .widget .ls2-row:last-child{ border-bottom:none; }
  .widget .ls2-list{ gap:0 !important; }
  /* Kırıcı satır boşluğunu İKİ kez saydırıyordu (üst kat ↔ kırıcı ↔ alt
     kat); negatif üst kenarla bir boşluk geri alınıyor. */
  .widget .ls2-br{ display:block !important; flex:0 0 100% !important;
                   width:100% !important; height:0 !important;
                   margin:-3px 0 0 0 !important; }
  .widget .ls2-logo{
    display:block !important; flex-shrink:0;
    width:20px !important; height:20px !important;
    border-radius:50%; object-fit:cover; background:var(--bg4);
  }
  .widget .ls2-sym{
    font-size:12.5px !important; min-width:0 !important;
    max-width:none !important; flex:1 1 auto !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .widget .ls2-sym.long{ font-size:11px !important; letter-spacing:-.2px !important; }
  .widget .ls2-sym.xlong{ font-size:9.5px !important; letter-spacing:-.3px !important; }
  /* Hacim: ilk katın sağ ucu. `display:none` DEĞİL — masaüstünde olan
     bilgi telefonda da tam okunuyor. */
  .widget .ls2-vol{
    display:block !important; flex:0 0 auto !important;
    font-size:10px !important; max-width:none !important;
    margin-left:auto !important; padding-left:0 !important;
    letter-spacing:0 !important;
  }
  /* İkinci kat: çubuk kalan genişliği alıyor, yüzdeler sağında. */
  .widget .ls2-bar-wrap{
    flex:1 1 auto !important; min-width:40px !important;
    height:7px !important; border-radius:4px !important;
    margin-left:0 !important;
  }
  .widget .ls2-pcts{
    width:auto !important; flex:0 0 auto !important;
    gap:7px !important; justify-content:flex-end !important;
  }
  .widget .ls2-lp, .widget .ls2-sp{ font-size:11.5px !important; font-weight:700 !important; }

  /* ── Gainers/Losers satırı — İKİ KAT ──────────────────────────────
     Dört sütun (Coin/Price/Chg/Vol) 155px'e sığmadığı için yazı 7px'e
     iniyor, Vol 24H ise büsbütün gizleniyordu. Artık iki kat:
         (logo) BTC              -1.12%
         $78,798                 $7.64B
     Hücreler DOM sırasına göre yerleştiriliyor (1 sembol, 2 fiyat,
     3 değişim, 4 hacim); render fonksiyonu değişmedi. */
  .widget .pc-row, .widget .pc-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:2px 8px !important;
    align-items:center !important;
  }
  .widget .pc-row{
    padding:7px 4px !important; margin-bottom:0 !important;
    border-bottom:1px solid var(--border);
  }
  .widget .pc-row:last-child{ border-bottom:none; }
  .widget .pc-header{ padding-bottom:6px !important; }
  .widget .pc-row  > *:nth-child(1),
  .widget .pc-header > *:nth-child(1){ grid-column:1; grid-row:1; text-align:left !important; }
  .widget .pc-row  > *:nth-child(2),
  .widget .pc-header > *:nth-child(2){ grid-column:1; grid-row:2; text-align:left !important; }
  .widget .pc-row  > *:nth-child(3),
  .widget .pc-header > *:nth-child(3){ grid-column:2; grid-row:1; text-align:right !important; }
  .widget .pc-row  > *:nth-child(4),
  .widget .pc-header > *:nth-child(4){ grid-column:2; grid-row:2; text-align:right !important; }
  .widget .pc-logo{
    display:inline-block !important; width:18px; height:18px;
    border-radius:50%; object-fit:cover; background:var(--bg4);
    vertical-align:middle; margin-right:6px; flex-shrink:0;
  }
  .widget .pc-sym{
    font-size:12.5px !important; display:flex !important; align-items:center !important;
    min-width:0 !important; overflow:hidden !important;
  }
  /* Sembol adı logodan sonra geldiği için kırpma metne uygulanmalı. */
  .widget .pc-sym{ white-space:nowrap !important; text-overflow:ellipsis !important; }
  /* Uzun adlarda yazı kademeli küçülüyor (bkz. renderPriceChange'deki
     `.long` / `.xlong` sınıfları) — Long/Short satırıyla aynı davranış.
     ÖLÇÜLDÜ: "1000000BABYDOGE" 12,5px fontla 151px istiyordu, kutu 96px. */
  .widget .pc-sym.long{ font-size:11px !important; letter-spacing:-.2px !important; }
  .widget .pc-sym.xlong{ font-size:9.5px !important; letter-spacing:-.3px !important; }
  .widget .pc-val{ font-size:10.5px !important; }
  /* İlk katın sağı: değişim yüzdesi — satırın en dikkat çeken sayısı. */
  .widget .pc-row > *:nth-child(3){ font-size:12px !important; font-weight:700 !important;
                                    font-family:var(--mono); white-space:nowrap; }
  .widget .pc-row > *:nth-child(4){ font-size:10px !important; }
  .widget .pc-hdr-lbl{ font-size:9px !important; }

  /* Widget içinde YATAY KAYDIRMA olmasın — içerik sığdırıldı */
  .widget .lv-list, .widget .ls2-list, .widget .pc-list,
  #liq-sym-list, #ls2-widget, #pc-widget{
    overflow-x:hidden !important;
  }
}

/* Kalan iki yatay kaydırma: sekme şeridi ve Market Dominance kontrol
   grubu. Ege "widget içinde yana kaydırma olmamalı" dediği için
   kaydırmıyoruz, KÜÇÜLTÜP SIĞDIRIYORUZ.
   Ölçülen: sekmeler 189px / kutu 155px, dominance grubu 186px / 152px. */
@media (max-width:900px){
  .widget .lv-tab{ padding:3px 5px !important; font-size:9px !important; }
  .widget .pc-tab{ padding:2px 4px !important; font-size:8px !important; }
  .widget .wx-chip, .widget .fx-chip{
    padding:2px 4px !important; font-size:8px !important; letter-spacing:0;
  }
  /* Kaydırma kapalı: içerik artık sığıyor */
  .widget-title div:has(> .lv-tab),
  .widget-title div:has(> .pc-tab),
  .widget .wx-grp, .widget .fx-grp, .widget .mini-hm-tf{
    overflow-x:hidden !important; flex-wrap:wrap !important;
  }
}

/* Market Dominance içindeki Fear & Greed bloğu: başlık + 5 periyot
   düğmesi (1M 3M 6M 1Y All) tek satırda 186px tutuyordu, kutu 152px.
   Küçültülüp sardırılıyor — hiçbir düğme gizlenmiyor. */
@media (max-width:900px){
  .widget #fg-period-btns{ flex-wrap:wrap; gap:2px !important; }
  .widget #fg-period-btns .wtb{
    font-size:7.5px !important; padding:1px 4px !important;
    min-height:20px !important;
  }
  .widget div:has(> #fg-period-btns){ flex-wrap:wrap; row-gap:3px; }
}

/* Market Dominance içindeki Fear & Greed göstergesi: gösterge 90px +
   etiket sütunu 82px + boşluk = 184px, kutu 152px (ölçüldü).
   Dizilim korunuyor, ölçek küçülüyor. Canvas'ın `width` ÖZNİTELİĞİ 90
   kalıyor — yalnız CSS genişliği düşüyor, yani çizim daha keskin olur. */
@media (max-width:900px){
  .widget .fg-olcek{ gap:5px !important; }
  .widget .fg-olcek #fg-canvas{ width:60px !important; height:35px !important; }
  .widget .fg-olcek #fg-big{ font-size:12px !important; }
  .widget .fg-olcek #fg-big-lbl{ font-size:8.5px !important; margin-bottom:2px !important; }
  .widget .fg-olcek span{ font-size:7.5px !important; min-width:34px !important; }
  .widget .fg-olcek #fg-yesterday, .widget .fg-olcek #fg-1w,
  .widget .fg-olcek #fg-1m{ font-size:9px !important; min-width:0 !important; }
  .widget .fg-olcek > div:last-child > div > div{ gap:3px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   "MASAÜSTÜNDE VAR OLAN HİÇBİR ŞEY MOBİLDE GİZLENMEZ"
   ──────────────────────────────────────────────────────────────────────
   Ege'nin kuralı: "her şey aynı bilgisayarda gibi net şekilde eksiksiz
   şekilde gözükmeli mobilde de."

   Site genelinde mobil medya sorgularında `display:none` ile gizlenen
   ÖZELLİK ve VERİ öğeleri tarandı ve geri açıldı. Gizli kalanlar yalnız
   SÜSLER (arka plan küreleri gibi) — onlar bilgi taşımıyor.
   Geri açılan her öğe aynı zamanda küçültülüyor ki taşma yapmasın.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── 1) `.desktop-only` sınıfı: üç araç düğmesi, borsa bağlantı
        rozetleri (BINANCE/BYBIT/OKX), ayraç, TEMA ANAHTARI (Blue/Black)
        ve sn-r-tag. Tema anahtarı mobilde tamamen erişilemezdi. ── */
  .desktop-only{ display:inline-flex !important; }
  .navbar .desktop-only, .nav-right .desktop-only{ display:inline-flex !important; }

  /* `.nav-right` kendi satırında TEK SATIR kalmalı: sarmasına izin
     verilince `.theme-switch`in `margin-left:auto`su onu ikinci satıra
     itiyordu ve o satır navbar yüksekliğine sayılmadığı için tema
     anahtarı ALT MENÜNÜN ÜSTÜNE BİNİYORDU (ekran görüntüsüyle görüldü).
     İçerik ölçüldü: 3 rozet + LIVE + tema anahtarı ≈ 320px < 366px. */
  .nav-right{
    flex:1 1 100% !important; order:10 !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap; gap:4px; margin-left:0 !important; min-width:0;
    position:static !important;
  }
  .ex-dot{ font-size:7.5px !important; padding:1px 5px !important;
           flex-shrink:0; }
  .theme-switch{ transform:scale(.8); transform-origin:right center;
                 margin-left:auto !important; flex-shrink:0; }

  /* ── 2) Üst şerit (ticker) sayaçları: 4. öğeden sonrası gizliydi —
        Coins, 24H Volume, Total OI, BTC Dom, 1H Liq, Fear&Greed gibi
        SAYISAL VERİLER kayboluyordu. Geri açıldı; şerit zaten kayıyor. ── */
  .tb-item:nth-child(n+4){ display:flex !important; }
  .tb-right, .ticker-right{ display:flex !important; }
  .fg-cls{ display:block !important; }
  /* NOT: `.live-badge` (LIVE / CONNECTING) ve `.tk-clock` (saat) bir ara
     geri açılmıştı; Ege ikisini de mobilde İSTEMEDİ — "mobildeki live,
     connect gibi yazıları kaldır, o sadece bilgisayar görünümünde olsun;
     mobilde gereksiz şeyleri kaldırıyoruz boşa yer kaplamasın diye."
     Aşağıda gizleniyorlar. */
  .sn-label{ display:inline !important; }
  .liq-hist-btn span{ display:inline !important; }

  /* ── 3) Gainers/Losers tablosunun 4. sütunu (VOL 24H) gizliydi ── */
  .pc-header .pc-hdr-lbl:nth-child(4), .pc-row .pc-val:nth-child(4){
    display:block !important;
  }

  /* ── 4) Market tablosunun gizlenen sütunları: hacim, funding rate,
        open interest, mini grafik, high/low aralığı, 2. değişim ── */
  .col-vol-h, .col-vol, .col-fr-h, .col-fr, .col-oi-h, .col-oi,
  .col-chart-h, .col-chart, .col-hlr-h, .col-hlr,
  .col-chg2-h, .col-chg2, .col-liq-h, .col-liq{ display:block !important; }

  /* ── 5) Liquidation Volume: sıra no ve borsa sütunları ── */
  .thead .c-rk, .row .c-rk, .thead .c-ex, .row .c-ex{ display:block !important; }

  /* ── 6) Pro Chart order book: spread etiketi ve güncellenme zamanı ── */
  .ob-spread-lbl, .ob-updated{ display:block !important; font-size:8px; }

  /* ── 7) Trading Deck: ısı ölçeği ve rozet ──
     DİKKAT: `.skala` uygulamada `.gor` sınıfıyla açılıp kapanıyor.
     Koşulsuz `display:flex` vermek, kapalı olması gereken durumda da
     gösterirdi — yalnız `.gor` varken açılıyor. */
  .skala.gor{ display:flex !important; }
  .rozet{ display:inline-block !important; }

  /* ── 8) Draw & Find: üst bardaki açıklama ── */
  .top .hint{ display:block !important; }

  /* NOT: `.orb-3/.orb-4/.orb-5` (arka plan ışık küreleri) gizli KALIYOR —
     bilgi taşımayan süsler ve her karede boyanıyorlar. */
}

/* ── MARKET TABLOSU: 10 SÜTUNUN TAMAMI, KAYDIRMASIZ ───────────────────
   Masaüstü ızgarası: 36px 1fr 105 76 76 96 82 110 90 110 (~880px).
   Mobilde gizlenen 6 sütun (hacim, funding, open interest, 7g grafik,
   yüksek/düşük, 2. değişim) geri açıldı; ızgara da 6 sütunluk mobil
   sürümde kalsaydı satırlar ikinci satıra sarıp HİZASIZ oluyordu
   (ekran görüntüsüyle görüldü). Bu yüzden masaüstündeki SÜTUN DÜZENİ
   korunup ölçek ~0.44'e indiriliyor: 390px'e tam sığar, yatay kaydırma
   gerekmez. */
@media (max-width:900px){
  .tbl-head, .tbl-row{
    /* Coin sütunu 58 → 70px. ÖLÇÜLDÜ (390px): "WLD/USDT Perp" satırı
       5,5px fontla ~40px yer istiyor, sütunda logodan (12px) ve
       boşluktan sonra 38px kalıyordu — bu yüzden 664 satırın hepsinde
       ikinci satır "WLD/USDT Pe" diye ORTADAN kesiliyordu. Fark, sıra
       numarası (14→10) ve 7 günlük mini grafik (38→30) sütunlarından
       alındı; ikisi de bu daralmayı kaldırıyor.
       Sıra numarası önce 10px'e indirilmişti; ÖLÇÜLDÜ: üç haneli sıra
       ("100") 6px fontla 11,8px istiyor, yani 619 satırda son rakam
       kırpılıyordu. 15px'e çıkarıldı, fark "Liq 1H" sütunundan alındı
       (oradaki en geniş değer "$357.1M" 6,5px fontla ~30px, 35px'e
       rahat sığıyor).
       ÖNEMLİ — SABİT PİKSEL DEĞİL, ORAN: sütunlar önce piksel olarak
       verilmişti ve toplam 382px, yani yalnız 390px ekrana sığıyordu.
       ÖLÇÜLDÜ (360px): tablonun 5.745 öğesi görüntü alanının dışına
       taşıyor ve `body{overflow-x:hidden}` yüzünden kırpılıyordu —
       360px yaygın bir Android genişliği. Artık iki uç sütun sabit
       (sıra 15px, mini grafik 30px), aradaki sekiz sütun aynı oranlarla
       `fr` olarak paylaşıyor: ızgara HER genişliğe uyum sağlıyor ve
       hiçbir ekranda taşma olmuyor.
       Oranlarda iki değişiklik, ikisi de ölçüme dayanıyor:
        • funding 36 → 46: değerler dört ondalıklı ("+18.6946%", ~40px)
          ve 360px'te 36fr'lik sütuna sığmıyor, sayı sessizce kırpılıyordu.
        • Liq 1H 35 → 27, coin 70 → 68: Liq 1H hücrelerinin büyük çoğunluğu
          "—" ya da "$11K" gibi kısa değerler taşıyor, yani fazladan yeri
          boşuna tutuyordu; kazanılan pay coin adına verildi. */
    grid-template-columns:15px minmax(0,68fr) minmax(0,44fr) minmax(0,34fr)
                          minmax(0,34fr) minmax(0,42fr) minmax(0,46fr)
                          minmax(0,42fr) minmax(0,27fr) 30px !important;
    padding:0 3px !important;
    font-size:6px !important;
    gap:0 !important;
  }
  .tbl-row{ height:34px !important; }
  .tbl-head{ height:26px !important; font-size:5.5px !important; }
  /* SAYILAR ÜÇ NOKTAYLA BİTSİN, SESSİZCE KIRPILMASIN.
     ÖLÇÜLDÜ (360px): funding sütununda "+18.6946%" 3,1px taşıp sert
     kesiliyordu ve ekranda "+18.694" gibi GEÇERLİ AMA YANLIŞ bir sayı
     olarak okunuyordu. Bir tutarın yanlış okunması, kırpıldığının
     görünmesinden çok daha kötü — bu yüzden bütün hücrelere üç nokta
     verildi. (Bkz. tutarların istisnasız doğru görünmesi kuralı.) */
  .tbl-head > div, .tbl-row > div{
    padding:0 1px !important; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Başlıklar SARSIN, kısaltılmasın: "Open Int. ▼" 320px'te sütuna
     sığmayıp sıralama okuyla birlikte kesiliyordu (ölçüldü: 4,8px).
     Başlık satırı 26px yüksekliğinde, 5,5px yazıyla iki satır ~12px —
     rahat sığıyor. Veri hücreleri tek satır + üç nokta olarak kalıyor
     (sayılar sarmamalı). */
  .tbl-head > div{
    white-space:normal !important; text-overflow:clip !important;
    line-height:1.05 !important;
  }
  /* `.tbl-wrap` BU LİSTEDEN ÇIKARILDI — sınıf adı üç sayfada paylaşılıyor
     (market, pro-analysis, liq-volume) ve bu ortak dosya hepsine
     yükleniyor. ÖLÇÜLDÜ: /pro-analysis'te tablo 790px, kutu 390px ve
     `overflow-x:hidden` yüzünden 400px'lik sütunlar (Price, Amount,
     Analysis…) kaydırılamıyor, yani ziyaretçi için TAMAMEN erişilemez
     hâldeydi. Market'in kendi kuralı artık market.html içinde. */
  .tbl-body{ overflow-x:hidden !important; }
  /* Hücre içi yazılar sütuna sığsın */
  .tbl-row .c-name, .tbl-row .c-pair, .tbl-row .c-usd,
  .tbl-row .c-price, .tbl-row .c-chg{ font-size:6.5px !important; }
  .tbl-row img, .tbl-row .coin-logo, .tbl-row .c-logo{
    width:11px !important; height:11px !important;
  }
}

/* Market tablosu hücre yazıları: sütun kutuları 14-58px'e indi ama
   hücrelerin KENDİ font-size'ları (9,5-11,5px) duruyordu, bu yüzden
   değerler "…" ile kırpılıyordu (ölçüldü: .col-chg içeriği 38px / kutu
   34px, .col-fr 48px / 36px). Sütun genişliğiyle uyumlu ölçek: */
@media (max-width:900px){
  .tbl-row .col-rank{ font-size:6px !important; }
  .tbl-row .sym-ticker{ font-size:7px !important; }
  .tbl-row .sym-base{ font-size:5.5px !important; }
  /* Sütun genişletildi ama "1000000BABYDOGE/USDT Perp" gibi uç adlar hâlâ
     sığmıyor. Sığmayanlar artık harfin ortasından kesilmek yerine ÜÇ
     NOKTAYLA bitiyor — kullanıcı devamı olduğunu görüyor. */
  .tbl-row .sym-info{ min-width:0 !important; }
  .tbl-row .sym-ticker, .tbl-row .sym-base{
    min-width:0 !important; max-width:100% !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .tbl-row .coin-logo, .tbl-row .logo-wrap img{
    width:10px !important; height:10px !important;
  }
  .tbl-row .logo-wrap{ width:12px !important; min-width:12px !important; }
  .tbl-row .col-price{ font-size:7px !important; }
  .tbl-row .col-chg, .tbl-row .col-chg span{ font-size:6.5px !important; }
  .tbl-row .col-vol, .tbl-row .col-fr, .tbl-row .col-oi, .tbl-row .col-liq,
  .tbl-row .col-vol span, .tbl-row .col-fr span,
  .tbl-row .col-oi span, .tbl-row .col-liq span{ font-size:6.5px !important; }
  .tbl-head > div{ font-size:5.5px !important; }
}

/* Başlık yüksekliğini toparla: yedi bağlantı iki satıra sardığı için
   satır aralarındaki boşluk gereksiz büyüktü (sayfanın ilk ekranından
   çalıyordu). Bağlantılar aynı kalıyor, yalnız sıkışıyor. */
@media (max-width:900px){
  .navbar-links{ row-gap:0 !important; column-gap:2px !important;
                 padding:0 !important; }
  .nav-link{ height:auto !important; line-height:1.15 !important; }
  .navbar{ row-gap:3px !important; padding-top:3px; padding-bottom:4px; }
  .nav-actions{ gap:5px; }
  .nav-actions > *{ height:34px !important; }
  .nav-right{ gap:3px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBİL BAŞLIK — Ege'nin düzeltmeleri (2026-09-07)
   ──────────────────────────────────────────────────────────────────────
   "BINANCE BYBIT OKX yeşil arkaplan üstündeki yazıları tamamen sil
    gereksiz, ayrıca sections pro analysis yazılarını da sil onlar da
    gereksiz, blue black tema seçimini en sol üstteki coinalko yazısının
    en sağına koy, canlı saat kısmını sil gerek yok mobilde, üstteki
    dashboard pro chart vb butonlarını alt alta koyabilirsin yatay olarak
    sıkışmışlar."

   NOT: bu blok, yukarıdaki "masaüstünde var olan hiçbir şey gizlenmez"
   kuralının İSTİSNASI ve Ege'nin açık talebi. Silinenler veri değil,
   durum/etiket süsü: borsa bağlantı rozetleri (aynı bilgi "LIVE"
   göstergesinde zaten var), "Sections"/"PRO ANALYSIS" başlık etiketleri
   ve saat (telefonun kendi saati zaten üstte).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* 1) Borsa bağlantı rozetleri ve aralarındaki ayraç */
  .ex-dot{ display:none !important; }
  .nav-right > div.desktop-only:not(.theme-switch):not(.live-badge){
    display:none !important;
  }

  /* 2) "Sections" ve "PRO ANALYSIS" etiketleri */
  .sn-label, .sn-r-tag{ display:none !important; }
  .sub-nav{ padding-left:12px !important; }

  /* 3) Canlı saat */
  .tk-clock{ display:none !important; }

  /* 4) Tema anahtarı marka adının sağında (yerini mobil.js taşıyor) */
  .tema-logo-yani{
    margin-left:10px !important; margin-right:0 !important;
    transform:scale(.78); transform-origin:left center;
    flex-shrink:0; order:1;
  }

  /* 5) Sayfa bağlantıları YAN YANA, tek satır, YATAY KAYDIRILABİLİR.
     Önce alt alta denendi (Ege istemişti) ama denedikten sonra
     "çok yanlış, kötü olmuş" dedi ve yan yana + kaydırmalı istedi.
     Tek satır kalıyor, sığmayan kısım parmakla kaydırılıyor; başlık
     yüksekliğinden ~200px kazanıyoruz. */
  .navbar-links, .hdr-nav{
    flex-direction:row !important; align-items:center !important;
    flex-wrap:nowrap !important; row-gap:0 !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:2px !important;
    padding:2px 0 !important;
  }
  .navbar-links::-webkit-scrollbar, .hdr-nav::-webkit-scrollbar{ display:none; }
  .nav-link{
    width:auto !important; flex:0 0 auto !important;
    justify-content:center !important; text-align:center !important;
    font-size:11px !important; padding:5px 9px !important;
    min-height:30px !important; border-radius:6px;
    white-space:nowrap;
  }
  .nav-link.active{ background:var(--bg3, #1a1d24); }

  /* 6) Bağlantı listesi uzadığı için araç düğmeleri biraz aşağı iniyor;
        nefes payı bırak. */
  .nav-actions{ margin-top:4px !important; }

  /* LIVE göstergesi tek başına kaldı — sola yasla */
  .nav-right{ justify-content:flex-start !important; }
}

/* ── İKİNCİ TARAMADA ÇIKAN GİZLİ ÖĞELER ──────────────────────────────
   Tüm sayfalardaki mobil `display:none` kuralları yeniden tarandı;
   ilk turda gözden kaçanlar: */
@media (max-width:900px){
  /* Market: "top movers" yan paneli komple gizliydi (≤1100px) */
  /* Market'e özel: kural market.html'de (bkz. .movers-panel) */
  /* index: piyasa çubuğu ve AI açıklama metni */
  .rp-market .rpm-bar{ display:flex !important; }
  .aid-txt{ display:block !important; }
  /* Trading Deck: ipucu yazısı */
  .ipucu{ display:block !important; }
  /* Yasal sayfalar: "← Dashboard" düğmesi */
  .hdr-back{ display:inline-flex !important; }
}

/* ── ÖRTÜŞME DÜZELTMELERİ (ölçümle bulundu) ─────────────────────────── */
@media (max-width:900px){
  /* Pro Chart araç çubuğu: sabit yükseklikte ve tek satır olduğu için
     periyot düğmeleri fiyat göstergesinin ÜSTÜNE BİNİYORDU
     (ölçüldü: .tf-btn ile #np %72 örtüşme). Sarsın ve uzasın. */
  .pc-toolbar{
    height:auto !important; min-height:38px; flex-wrap:wrap !important;
    overflow-x:hidden !important; row-gap:3px; padding:4px 8px !important;
  }
  .pc-toolbar > *{ flex-shrink:0; }
  /* İSTİSNA: periyot şeridi (`.tf-group`) artık kendi içinde yana
     kaydırılabiliyor, dolayısıyla KÜÇÜLEBİLMELİ. `flex-shrink:0` onu
     doğal genişliğinde tutuyordu ve 320px'te araç çubuğundan 16,7px
     taşırıyordu (ölçüldü). Küçülme izniyle şerit çubuğa sığıyor,
     sığmayan düğmelere parmakla ulaşılıyor. */
  .pc-toolbar > .tf-group{ flex:1 1 auto !important; min-width:0 !important; }
  .nav-price, .nav-chg{ margin-left:auto; }

  /* Trading Deck: alt düğme çubuğu (.alt) mobilde iki satıra sarıyor ve
     ~100px oluyor; ısı ölçeği `bottom:62px` ile onun ÜSTÜNE BİNİYORDU
     (ölçüldü: "light" ile "Iso" %37 örtüşme). Ölçek yukarı alındı. */
  .skala{ bottom:118px !important; }
  .skala-cv{ height:78px !important; }
  .skala-et{ font-size:9px !important; }
}

/* ── SON ÖRTÜŞMELER ──────────────────────────────────────────────────── */
@media (max-width:900px){
  /* NOT: Market'e özel düzen kuralları (`.page`, `.movers-panel`,
     `.left-panel`, `.tbl-body`) BURADAN KALDIRILDI ve market.html'e
     taşındı. Buradayken `.page` ve `.left-panel` sınıfları pro-analysis
     sayfasında da eşleşiyordu; oradaki `.left-panel{width:780px}` kutusu
     kırpılmayınca sayfa 772px yatay taşma yaptı (ölçüldü). Ortak katman
     yalnız GENEL kural içermeli. */
  .left-panel, .right-panel{ min-width:0 !important; max-width:100% !important; }

  /* Liq Volume widget'ı: `.lv-mid` içindeki L/S yazıları 40px kutuya
     sığmayıp sağdaki toplamın üstüne biniyordu (ölçüldü %40). */
  .widget .lv-sub{ overflow:hidden; }
  .widget .lv-sub-l, .widget .lv-sub-s{
    font-size:5.5px !important; overflow:hidden; white-space:nowrap;
    min-width:0;
  }
  .widget .lv-mid{ flex:0 0 44px !important; min-width:44px !important; }
}

/* Bölüm şeridi (.sn-items) yatayda kayıyordu ve son bağlantılar
   görünmüyordu. "Hiçbir şey gizlenmez, yana kaydırma yok" kuralı gereği
   sarıyor — beş bölüm de tek bakışta görünür. */
@media (max-width:900px){
  .sub-nav{ height:auto !important; min-height:30px; padding:3px 8px !important;
            align-items:flex-start; }
  .sn-items{ flex-wrap:wrap !important; overflow:visible !important;
             gap:2px !important; }
  .sn-item{ font-size:9.5px !important; padding:3px 6px !important;
            min-height:24px !important; }
  .sn-dot{ width:5px !important; height:5px !important; }
}

/* Bağlantı göstergesi: kutu 34px kalıp "CONNECTING" yazısı dışarı
   taşıyordu (ölçüldü: #conn-lbl 23px kutuda). Kendi genişliğini alsın. */
@media (max-width:900px){
  /* Durum göstergeleri mobilde tamamen kaldırıldı. `.nav-right` içindeki
     her şey (borsa rozetleri, ayraç, LIVE, saat) artık gizli olduğu için
     satırın kendisi de kaldırılıyor — boş satır ~20px yer kaplamasın. */
  .live-badge, #conn-lbl, #ws-dot, .tk-clock{ display:none !important; }
  .nav-right{ display:none !important; }
}

/* ── ÜST ŞERİTTEKİ FEAR & GREED BLOĞU ─────────────────────────────────
   Ege: "üst navbardaki fear greed alanı çok yer kaplamış, sadece fear mı
   greed mi olduğu yazsın, 'fear & greed' diye yazmasın."
   Başlık etiketi kaldırılıyor; GÖSTERGE, SAYI ve DURUM (Greed/Fear)
   kalıyor — bilgi kaybı yok, yalnız tekrar eden başlık gidiyor.
   Blok da daralıyor, akan şeride daha çok yer kalıyor. */
@media (max-width:900px){
  .fg-lbl{ display:none !important; }
  .fg-wrap{ padding:0 8px !important; gap:5px !important; }
  .fg-text-col{ justify-content:center; }
  .fg-num{ font-size:13px !important; }
  .fg-cls{ font-size:9px !important; display:block !important; }
  .fg-mini-gauge canvas{ width:30px !important; height:19px !important; }
}

/* ── Liq Volume satırı: L/S tutarları KIRPILIYORDU ────────────────────
   Ölçüldü: "S $11.85M" 30px istiyor, kutusu 20px. Satır bütçesi
   yeniden hesaplandı (kutu 152px, iç boşluklar dahil):
     ikon 13 + ikon 13 + logo 10 + ad 26 + orta 56 + toplam 25
     + boşluk 5×1 + dolgu 4  = 152
   Orta kutu 44→56px; L ve S'ye 27'şer piksel düşüyor. Tek satırda
   "S $11.85M" 9 karakter; monospace'te karakter ≈ 0,6×font olduğundan
   font 5px olmalı (9×3 = 27). Hiçbir değer kırpılmıyor. */
@media (max-width:900px){
  .widget .lv-row{ gap:1px !important; padding:3px 2px !important; }
  .widget .lv-chart-btn, .widget .lv-list-btn{
    width:13px !important; height:13px !important;
    min-width:13px !important; min-height:13px !important;
  }
  .widget .lv-chart-btn svg, .widget .lv-list-btn svg{
    width:7px !important; height:7px !important;
  }
  .widget .lv-logo{ width:10px !important; height:10px !important; }
  .widget .lv-name{ min-width:26px !important; max-width:26px !important; }
  .widget .lv-mid{ flex:0 0 56px !important; min-width:56px !important; }
  .widget .lv-sub{ gap:1px !important; }
  .widget .lv-sub-l, .widget .lv-sub-s{
    font-size:5px !important; letter-spacing:-0.2px;
  }
  .widget .lv-total{ min-width:25px !important; font-size:6.5px !important; }
}

/* L ve S yan yana dururken orta kutu 56px istiyordu ve geriye ada
   yalnız 26px kalıyordu — "MARSCOIN" 39px istediği için bu sefer AD
   kırpılıyordu. L/S ALT ALTA alınınca orta kutu 34px'e iniyor (her değer
   tam genişliği kullanıyor) ve ada 46px kalıyor: ikisi de kırpılmıyor.
   Bedeli satır ~6px uzuyor. Bütçe: 13+13+10+46+34+25+5+4 = 150 ≤ 152 */
@media (max-width:900px){
  .widget .lv-sub{ flex-direction:column !important; gap:0 !important;
                   align-items:flex-start; }
  .widget .lv-sub-l, .widget .lv-sub-s{
    font-size:5.5px !important; letter-spacing:0; width:100%;
  }
  .widget .lv-mid{ flex:0 0 34px !important; min-width:34px !important; }
  .widget .lv-name{ min-width:0 !important; max-width:46px !important; }
  .widget .lv-name.long{ font-size:6px !important; }
  .widget .lv-name.xlong{ font-size:5.5px !important; }
}

/* ── Long/Short: grafik düğmesi ve ORTALAMA (AVG) kartı ───────────────
   Buradaki iki eski blok (satırı 13px ikon + 26px sembol + 24px hacim +
   30px çubuk + 34px yüzde bütçesine sıkıştıran kurallar) KALDIRILDI:
   satır artık iki kata diziliyor, yani o genişlik bütçesi yok.

   AVG kartı ise ÖLÇÜLDÜ: 390px telefonda widget'ın sağından 31,4px
   TAŞIYORDU (Ege'nin gördüğü hata). Sebep, dört parçanın — etiket, çubuk,
   yüzdeler, "734 coins" sayacı — tek satırda ve hiçbirinin küçülemiyor
   olması. Kart artık iki kata diziliyor ve düzeni coin satırlarıyla
   AYNI (üstte kimlik, altta çubuk + yüzdeler). Grid olduğu için genişlik
   içeriğe değil kutuya bağlı, yani taşma yapısal olarak imkânsız:
       AVG                    734 coins
       ▓▓▓▓▓▓▓▓░░░░░░   54.8%  45.2%                                    */
@media (max-width:900px){
  /* Dokunma hedefi büyüdü: 13px'lik düğme parmakla zor tutuluyordu. */
  .widget .ls2-chart-btn{ width:20px !important; height:20px !important;
                          min-width:20px !important; min-height:20px !important; }
  .widget .ls2-chart-btn svg{ width:11px !important; height:11px !important; }

  .widget .ls2-avg-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"lbl cnt" "bar pct" !important;
    gap:5px 7px !important;
    padding:6px 8px !important;
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  .widget .ls2-avg-label{ grid-area:lbl; font-size:10.5px !important; }
  .widget .ls2-avg-count{ grid-area:cnt; font-size:10px !important;
                          max-width:none !important; white-space:nowrap;
                          justify-self:end; }
  .widget .ls2-avg-bar-wrap{ grid-area:bar; height:7px !important;
                             border-radius:4px !important; align-self:center; }
  .widget .ls2-avg-pcts{ grid-area:pct; display:flex !important;
                         justify-content:flex-end !important;
                         gap:7px !important; }
  .widget .ls2-avg-lp, .widget .ls2-avg-sp{ font-size:12px !important; }
}

/* Sembol adları PROPORTIONAL font kullanıyor (monospace değil), bu yüzden
   karakter genişliği hesabım tutmadı: "ANTHROPIC" 7px'te 42px çıkıyor.
   En uzun adlar (ANTHROPIC, 1000000MOG, MARSCOIN) ölçülüp taban font
   5,5px'e çekildi — 34px kutuya sığıyor, hiçbiri kırpılmıyor.

   `.ls2-sym` BU KURALDAN ÇIKARILDI: Long/Short satırı artık iki kata
   diziliyor, yani sembolün 34px'lik dar sütunu yok — ilk katın tamamı
   onun. 5,5px orada gereksiz ve okunmuyordu (Ege'nin şikâyeti). Yeni
   boyut yukarıdaki iki-kat bloğunda: 12,5 / 11 / 9,5px.
   `.lv-name` (Liquidation Volume) hâlâ tek sıra düzeninde olduğu için
   kuralı korundu. */
@media (max-width:900px){
  .widget .lv-name, .widget .lv-name.long, .widget .lv-name.xlong{
    font-size:5.5px !important; letter-spacing:-0.2px !important;
  }
}

/* 13-15 karakterli semboller ("1000000BABYDOGE", "LGELECTRONICS") hiçbir
   OKUNUR boyutta 34-46px sütuna sığmaz. Sert kesme yerine ÜÇ NOKTA:
   kullanıcı adın devamı olduğunu görür (sitenin masaüstü CSS'i
   `text-overflow:clip` kullanıyor; orada sütun geniş olduğu için sorun
   yok, mobilde ellipsis daha doğru). */
@media (max-width:900px){
  .widget .ls2-sym, .widget .lv-name, .widget .pc-sym{
    text-overflow:ellipsis !important; overflow:hidden !important;
    white-space:nowrap !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WIDGET İÇİ DÜĞME ŞERİTLERİ — TEK SATIR, YATAY KAYDIRMALI
   ──────────────────────────────────────────────────────────────────────
   Ege: "butonları mobil görünüm için küçült ve hepsini yan yana koy,
   widget içinde yana kaydırılabilsin, aynı üst navbardaki butonlar gibi."

   Ölçülen israf (390px ekran, anasayfa):
     EMA düğmeleri        4 satır → 132px
     bölüm şeridi         2 satır →  50px
     Gainers/Losers başlık 3 satır →  72px
     L/S ortalama kartı   4 satır →  43px
   Hepsi tek satıra alınıyor; sığmayan kısım parmakla kaydırılıyor.
   NOT: Bu, "widget içinde yatay kaydırma olmasın" kuralının Ege
   tarafından değiştirilmiş hâlidir — DÜĞME şeritleri kayabilir, VERİ
   satırları hâlâ sığdırılır.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* NOT: `.widget .ls2-tf-bar` bu listeden ÇIKARILDI. Şerit `nowrap` +
     `overflow-x:auto` olduğu için içindeki AVG kartı zaman düğmesinin
     yanında kalıyor ve widget'ın sağından TAŞIYORDU (ölçüldü: 31,4px,
     Ege'nin bildirdiği hata). Şeridin yalnız iki çocuğu var — bir düğme
     ve kart — yani kaydırmaya hiç gerek yok; kart alt satıra iniyor. */
  .ema-serit,
  .widget .wx-grp, .widget .fx-grp, .widget .mini-hm-tf, .widget .ind-chips,
  .widget .widget-title-text, .widget .bt-filters,
  .widget #fg-period-btns, .sn-items,
  .widget-title div:has(> .lv-tab), .widget-title div:has(> .pc-tab){
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:3px !important;
    min-width:0;
  }
  .ema-serit::-webkit-scrollbar, .widget .wx-grp::-webkit-scrollbar,
  .widget .fx-grp::-webkit-scrollbar, .widget .mini-hm-tf::-webkit-scrollbar,
  .widget .widget-title-text::-webkit-scrollbar, .sn-items::-webkit-scrollbar,
  .widget .ls2-tf-bar::-webkit-scrollbar{ display:none; }

  /* Şerit içindeki düğmeler küçülüp sıkışmasın diye sabit genişlikte */
  .ema-serit > *, .widget .wx-grp > *, .widget .fx-grp > *,
  .widget .mini-hm-tf > *, .widget .widget-title-text > *,
  .sn-items > *{
    flex:0 0 auto !important; white-space:nowrap;
  }
  /* L/S zaman şeridi: düğme sabit, AVG kartı kendi satırına iniyor. */
  .widget .ls2-tf-bar{ flex-wrap:wrap !important; overflow:visible !important;
                       gap:6px !important; }
  .widget .ls2-tf-bar > .tfdd-btn{ flex:0 0 auto !important; }

  /* Long/Short başlık kontrolleri — ÖLÇÜLDÜ: çipler, "L/S Sort" ve arama
     kutusu 155px'e sığmayıp ÜÇ satıra kırılıyordu (~88px, widget'ın
     360px'inin dörtte biri). Coin listesine yalnızca 2,2 satır kalıyordu.
     İki satıra indirildi: borsa çipleri kendi (kaydırılabilir) satırında,
     sıralama düğmesi ve arama kutusu ise ALT SATIRDA yan yana.
     NOT: `flex-wrap:wrap`ta tarayıcı önce satırları oluşturup SONRA
     esnetiyor — yani çipler (≈140px) ile düğme (≈65px) aynı satıra
     "sıkıştırılamıyor", ayrı satırlara düşüyorlar. Bu yüzden bölüşüm
     flex-basis ile AÇIKÇA veriliyor: çipler %100, düğme sabit, arama
     kalanı alacak kadar küçük tabanla. */
  .widget .ls2-ctrls{
    flex-wrap:wrap !important; gap:4px !important;
    min-width:0 !important; flex:1 1 100% !important;
  }
  .widget .ls2-ctrls > .wx-grp{ flex:1 1 100% !important; min-width:0 !important; }
  .widget .ls2-ctrls > .ls2-sort-btn{ flex:0 0 auto !important; }
  .widget .ls2-ctrls > .search-wrap{
    flex:1 1 60px !important; width:auto !important; min-width:0 !important;
  }

  /* Düğmeler mobil için küçültüldü */
  .ema-btn{ font-size:7.5px !important; padding:1px 4px !important;
            min-height:20px !important; }
  .widget .wx-chip, .widget .fx-chip, .widget .bt-fbtn,
  .widget .mini-hm-tf-btn, .widget .p-tf-btn{
    font-size:7.5px !important; padding:1px 5px !important;
    min-height:22px !important;
  }
  .widget .lv-tab, .widget .pc-tab{
    font-size:8.5px !important; padding:2px 5px !important;
    min-height:22px !important;
  }
  /* Bölüm şeridi de tek satır (2 satırdan 1'e → 25px kazanç) */
  .sub-nav{ height:auto !important; min-height:26px; }
  .sn-item{ font-size:9px !important; padding:2px 6px !important;
            min-height:22px !important; }
  /* NOT: Ortalama kartını TEK SATIRA zorlayan kural kaldırıldı
     (`flex-wrap:nowrap` + `overflow-x:auto`). Kart bir DÜĞME şeridi değil,
     VERİ — ve bu kurallar onu widget'ın dışına taşırıyordu. Kart artık
     yukarıdaki blokta iki kata dizilen bir grid; "düğmeler kayabilir,
     veri satırları sığdırılır" ayrımına uyuyor. */
}

/* ══════════════════════════════════════════════════════════════════════
   WIDGET YÜKSEKLİĞİ — TELEFONDA 360 → 420px
   ──────────────────────────────────────────────────────────────────────
   360px, masaüstünden gelen bir sabitti. Telefonda widget genişliği
   181px'e düştüğü için satırlar İKİ KATA dizilmek zorunda (bkz. yukarıda
   Long/Short ve Gainers/Losers blokları) ve satır başına ~55px gidiyor.
   ÖLÇÜLDÜ: 360px'lik kutuda Long/Short'ta başlık+arama+AVG'den sonra
   coin listesine yalnızca 134px, yani 2,2 satır kalıyordu — widget boş
   görünüyordu.

   420px, 844px'lik bir telefon ekranının hâlâ yarısından azı; sayfa
   uzuyor ama Ege'nin istediği olan oluyor: "her şey tam ve net olarak
   widget'ların içinde gözükmeli". Satır başına ~4,5 coin görünür hâle
   geliyor.

   Yükseklik SATIR bazında veriliyor, widget bazında değil: aynı sıradaki
   iki widget aynı boyda kalıyor, ızgara hizası bozulmuyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .widget-row .widget,
  #top-row-grid .widget,
  .second-row-grid .widget{
    height:420px !important;
    aspect-ratio:unset !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   KALAN İKİ TAŞMA — widget kutusunun dışına çıkan sayılar
   ──────────────────────────────────────────────────────────────────────
   Long/Short ve Gainers/Losers düzeltildikten SONRA ölçülen kalan taşma:
     360px → 4 öğe (BTC/USDT widget'ı, 8px)
     320px → 12 öğe (yukarıdakiler 28px + Liquidation Volume `.lv-total`)
   İkisi de bu oturumdan ÖNCE de vardı (ölçüldü: aynı ekranlarda eski
   sürümde 49 ve 266 taşan öğe). Aynı sınıf hata olduğu için kapatılıyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* 1) BTC/USDT sonuç kutusu: "Total / Long / Short" üç sayısı tek satırda
        `nowrap` duruyor ve 118px'lik kutuda 150px yer istiyordu. Üçü de
        kendi satırına alındı — hiçbiri kırpılmıyor, hiçbiri gizlenmiyor. */
  #btc-result > div > div{
    flex-wrap:wrap !important; gap:1px 8px !important;
    min-width:0 !important; width:100% !important;
  }
  /* `nowrap` DEĞİL: 320px'te "Short: $5.85M (50.1%)" 132px istiyor, kutu
     102px — nowrap olsaydı taşardı. Sarmaya izin verilince yüzde alt
     satıra iniyor; sayının kendisi (<b>) bölünmüyor. */
  #btc-result > div > div > span{
    flex:1 1 100% !important; white-space:normal !important;
    overflow-wrap:anywhere;
  }
  #btc-result > div > div > span > b{ white-space:nowrap; }
  #btc-result{ padding:6px 8px !important; }

  /* 2) Liquidation Volume toplamı: `flex-shrink:0` + `min-width` yüzünden
        320px'te satırdan taşıyordu. Kırpma yerine küçülmesine izin
        veriliyor; sayı hâlâ tam yazılıyor (ellipsis devreye girmiyor). */
  .widget .lv-total{
    flex-shrink:1 !important; min-width:0 !important; overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PRO CHART — İSTATİSTİK ŞERİDİ: 5 DEĞERİN HEPSİ GÖRÜNSÜN
   ──────────────────────────────────────────────────────────────────────
   `.stats-bar` sabit 28px yükseklikte, `overflow:hidden` ve içindeki
   `.si` kutuları `flex-shrink:0`. ÖLÇÜLDÜ (390px): beş değerden yalnız
   üçü (24H HIGH, 24H LOW, VOLUME) görünüyor; OPEN ve CHANGE ekranın
   238px dışında kalıyor ve KAYDIRMA DA YOK — yani ziyaretçi onları
   hiçbir şekilde göremiyordu.

   Çözüm gizleme ya da kaydırma değil: üçlü ızgaraya SARIYOR. Beş değer
   iki satırda tam okunur boyutta duruyor, grafiğe ~22px'lik bir bedel
   ödeniyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .stats-bar{
    height:auto !important;
    display:grid !important;
    /* SABİT 3 SÜTUN DEĞİL: telefon YAN ÇEVRİLİNCE genişlik 844px'e
       çıkıyor ve beş değer tek satıra rahat sığıyor; üçe sabitlemek
       orada boşuna ikinci satır açıp yatayda kıymetli olan dikey alanı
       yiyordu. `auto-fit` + 105px taban: 320px'te 3, 390px'te 3,
       844px'te 5 sütun — yani her yönelimde tek/en az satır. */
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr)) !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .stats-bar .si{
    padding:3px 6px !important;
    height:auto !important;
    min-width:0 !important;
    gap:4px !important;
    justify-content:center;
    border-bottom:1px solid var(--border);
  }
  /* 8,5/9,5px denenmişti; okunabilirlik tabanının (9px) altında kalıyordu.
     Hesap: 390px ekranda üçlü ızgarada hücre ~130px; "24H HIGH" 9px ile
     ~40px, "$80,536.1" 10px ile ~50px, aradaki boşlukla 94px — 130px'e
     rahat sığıyor. */
  .stats-bar .sl{ font-size:9px !important; }
  .stats-bar .sv{ font-size:10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   HEATMAP — X EKSENİNİN SON ZAMAN ETİKETİ KESİLİYORDU
   ──────────────────────────────────────────────────────────────────────
   `.x-lbl` mutlak konumlu ve `translateX(-50%)` ile tick'in ÜSTÜNE
   ortalanıyor; kabında `overflow:hidden` var. ÖLÇÜLDÜ (390px): en sağdaki
   etiket ("7/9 20:35", 54px) kabın sağından 23,9px taşıyor ve kırpılıyor
   — ziyaretçi son zaman damgasını yarım görüyor.
   İlk ve son etiket ortalanmak yerine içeri yaslanıyor; ortadakiler
   aynı kalıyor, yani eksenin okunuşu değişmiyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .x-row-m .x-lbl:last-child{ transform:translateX(-100%) !important; }
  .x-row-m .x-lbl:first-child{ transform:translateX(0) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MARKET — LOGOSU OLMAYAN COİNLERİN YEDEK DAİRESİ
   ──────────────────────────────────────────────────────────────────────
   `.coin-logo-fb`ın genişliği HTML'de satır içi `width:${size}px` olarak
   yazılıyor (masaüstü ölçüsü). Mobilde kabı `.logo-wrap` 12px'e iniyor
   ama daire 24px kalıyordu → her satırda 6px yandaki sütunun üstüne
   biniyordu (ölçüldü, 390px; logosu olmayan her coinde tekrarlıyor).
   Sabit sayı yazmak yerine daire KABININ boyutunu alıyor — kap ölçüsü
   ileride değişse de doğru kalır.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .logo-wrap > .coin-logo-fb{
    width:100% !important; height:100% !important;
    font-size:5.5px !important; letter-spacing:-.2px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ÇOK DAR EKRANDA (≤360px) TAŞAN DÜĞME ŞERİTLERİ
   ──────────────────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (320px, iPhone SE genişliği):
     /market   `.filter-grp` ("All · Top 50 · Gainers · 🔥 Liqs")  21,5px taşıyor
     /liq-volume `#tfs` (5m…24H zaman düğmeleri)                   11,1px taşıyor
     /pro-chart  `.tf-group` (1m…1W zaman düğmeleri)               24,7px taşıyor
   Üçü de DÜĞME şeridi, veri satırı değil — sitenin onaylı düzeni gereği
   (Ege: "butonları küçült ve hepsini yan yana koy, widget içinde yana
   kaydırılabilsin") sığmayan kısım parmakla kaydırılıyor. Hiçbir düğme
   gizlenmiyor, hepsi erişilebilir kalıyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .filter-grp, #tfs, .tfs, .tf-group{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    min-width:0 !important;
    flex-wrap:nowrap !important;
  }
  .filter-grp::-webkit-scrollbar, #tfs::-webkit-scrollbar,
  .tfs::-webkit-scrollbar, .tf-group::-webkit-scrollbar{ display:none; }
  .filter-grp > *, #tfs > *, .tfs > *, .tf-group > *{ flex:0 0 auto !important; }
  /* Şerit, kapsayıcısından geniş olmasın diye esneme payı sıfırlanıyor. */
  .tf-group{ margin-left:8px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   PRO ANALYSIS — METRİK KARTLARI (≤900px, YATAY DAHİL)
   ──────────────────────────────────────────────────────────────────────
   3 sütunlu Analysis ızgarasının her sütununda metrik kartları yan yana
   2-3'lü diziliyor. ÖLÇÜLDÜ:
     390px dikey → karta 45px kalıyor, içerik 77px (32px kırpma)
     844px yatay → kart yine dar, "1.726%" 3,8px kırpılıyor
   Kartlar alt alta diziliyor: her biri sütunun tam genişliğini alıyor,
   hiçbir değer kesilmiyor. Üç sütun da aynı yapıda olduğu için hizalar
   bozulmuyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .metric-row.cols-3, .metric-row.cols-2{ grid-template-columns:1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANA SAYFA — TABLO ÜSTÜ FİLTRE ŞERİDİ (yatay ekran dahil)
   ──────────────────────────────────────────────────────────────────────
   `.tnav-right` (All · Binance · Bybit · OKX · $100K+ …) masaüstünde
   `margin-left:auto` ile sağa yaslanıyor. Sayfanın kendi mobil kuralı
   onu tam genişlik + kaydırılabilir yapıyor ama YALNIZ ≤640px'te.
   ÖLÇÜLDÜ: telefon yan çevrilince (844px) kural devre dışı kalıyor ve
   şerit ekranın 140px dışına taşıyor — filtrelerin bir kısmına hiç
   ulaşılamıyor. Sınır 900px'e taşındı (tabletler de kazanıyor).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .tnav-right{
    margin-left:0 !important; width:100% !important;
    overflow-x:auto !important; scrollbar-width:none;
    flex-wrap:nowrap !important; gap:4px !important;
    padding:6px 0 !important; border-top:1px solid var(--border);
    min-width:0 !important;
  }
  .tnav-right::-webkit-scrollbar{ display:none; }
  .tnav-right > *{ flex:0 0 auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER FLOW (/pro-analysis/flow) — ÇOK DAR EKRANDA YAN PANEL
   ──────────────────────────────────────────────────────────────────────
   `#coin-panel` genişliği HTML'de satır içi `width:300px;flex-shrink:0`
   olarak yazılmış. ÖLÇÜLDÜ (320px): panel ekranın 12px dışına taşıyor ve
   içindeki 369 öğe kırpılıyor — "Coin Breakdown" listesinin sağ kenarı
   görülemiyor. Sabit genişlik yerine kabına uyuyor.
   `#cp-summary` (Buy/Sell özeti) ve grafik alt yazısı da dar ekranda
   sarabiliyor; hiçbiri gizlenmiyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  #coin-panel{
    width:100% !important; max-width:100% !important;
    flex-shrink:1 !important; min-width:0 !important;
  }
  #cp-summary{ flex-wrap:wrap !important; gap:4px 10px !important; }
  .chart-meta{ white-space:normal !important; overflow-wrap:anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════
   HEATMAP — PANEL İSTATİSTİK ŞERİDİ (≤360px)
   ──────────────────────────────────────────────────────────────────────
   `.sp-block` (Candles · Range · Max 2.5K BTC) tek satır ve kabı
   `overflow:hidden`. ÖLÇÜLDÜ (320px): şerit 22,5px taşıyor ve "Max"
   değeri kesiliyor. Kaydırma yerine yazı 10px → 9px'e iniyor (%10
   daralma, gereken %7,5) ve boşluklar sıkılaşıyor: üç değer de tam
   okunuyor, okunabilirlik tabanının (9px) altına inilmiyor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:360px){
  .sp-block{ font-size:9px !important; gap:7px !important; padding:0 8px !important; }
  .sp-block .sp-sym{ font-size:9px !important; }
  .sp-block .st{ gap:3px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBİLDE EKSİK KALAN ÖZELLİKLER — GERİ AÇILDI
   ──────────────────────────────────────────────────────────────────────
   Masaüstü ile telefon KONTROL LİSTELERİ karşılaştırıldı (her sayfa iki
   genişlikte açılıp görünür düğme/bağlantı/menü imzaları çıkarıldı).
   Telefonda BULUNMAYAN gerçek özellikler:

   1) /pro-chart — Vol / Trades / Book panel anahtarları
      `.nav-right` mobilde toptan gizleniyordu; o kural aslında yalnızca
      DURUM göstergeleri (LIVE, saat, bağlantı noktası) içindi ve Ege
      onların kalkmasını istemişti. Ama Pro Chart'ta aynı kapsayıcı
      GERÇEK düğmeleri de taşıyor. Üstelik sayfa, mobilde yan panelleri
      bilerek KAPALI başlatıyor ("grafik tam genişlik görünsün, isteyen
      düğmeyle açar") — düğmeler gizli olunca o paneller bir daha
      AÇILAMIYORDU, yani emir defteri ve işlem akışı telefonda tamamen
      erişilemezdi. Kapsayıcı, içinde panel anahtarı varken açılıyor;
      durum göstergeleri tek tek gizli kalmaya devam ediyor.

   2) /heatmap — düzen düğmeleri (ızgara / yan yana / alt alta)
      `#layout-btns` mobilde gizliydi; panelleri nasıl dizeceğini seçmek
      telefonda da anlamlı bir özellik.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .pc-toolbar .nav-right{
    display:flex !important; margin-left:auto !important;
    flex-shrink:0 !important; gap:4px !important;
  }
  .pc-toolbar .panel-toggles{ display:flex !important; margin-right:0 !important; }
  .panel-toggle-btn{ min-height:28px; }

  #layout-btns{ display:flex !important; flex-shrink:0; gap:3px !important; }
  #layout-btns .layout-btn{ min-width:26px; min-height:26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DOKUNMA HEDEFİ DÜZELTMELERİ — YAYIN ÖNCESİ MOBİL DENETİMİ (2026-09-18)
   ───────────────────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (17 sayfa × 5 cihaz, gerçek tarayıcı): yatay taşma 0/17, JS
   hatası 0/17 — yerleşim sağlam. Ama parmakla kullanılamayacak kadar
   küçük hedefler çıktı. Apple/Google kılavuzu ~44px önerir; sitenin yoğun
   veri düzenini bozmadan makul bir taban (30-32px) uygulanıyor.

   KURAL: hiçbir şey GİZLENMİYOR, yalnızca dokunulabilir hâle getiriliyor.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* 1) BÖLÜM ŞERİDİ — her sayfada var, ölçülen yükseklik 22px idi.
        En yaygın dokunma sorunu buydu. */
  .sn-item{
    min-height:30px !important;
    padding:5px 9px !important;
    font-size:10px !important;
  }

  /* 2) ARALIK (range) GİRDİLERİ — heatmap eşik kaydırıcısı 3px yüksekliğinde
        ölçüldü; parmakla tutulması imkânsızdı. Görsel ray ince kalıyor,
        DOKUNMA ALANI büyütülüyor. */
  input[type="range"]{
    height:30px !important;
    min-height:30px !important;
    background:transparent;
    touch-action:pan-y;         /* dikey kaydırma engellenmesin */
  }
  input[type="range"]::-webkit-slider-thumb{
    width:20px !important; height:20px !important;
  }

  /* 3) KÜÇÜK DÜĞME/ÇİP'LER — 20-27px ölçüldü. Yazı boyutu korunuyor,
        yalnızca dokunma yüksekliği tabanı veriliyor. */
  .ex-chip, .bt-sorts button, .cl-sb, .fbtn, .ex-btn, .tf-btn,
  .filter-chip, .liq-limit-btn, .search-clear, .cx-btn,
  .trades-tab, .ob-tab, .tnav-tab{
    min-height:30px !important;
  }

  /* 4) YASAL SAYFA BAĞLANTILARI — 15-16px ölçüldü (disclaimer/terms/privacy
        ve tüm sayfaların alt bilgisi). Satır içi bağlantılar metin akışını
        bozmadan dikey dokunma payı alıyor. */
  .foot a, .footer a, footer a, .yasal a, a.inline{
    display:inline-block;
    min-height:26px;
    line-height:26px;
  }

  /* 5) NAVBAR ROZET ALT YAZILARI — 6.5px ölçüldü ("ASSISTANT", "BTC · LIVE").
        Okunabilir asgariye çekiliyor; rozet boyutu değişmiyor. */
  .ai-sub, .td-sub, .tdeck-sub,
  .alkoai-btn small, .trading-deck-btn small{
    font-size:8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   YOĞUN TABLO SATIRLARINDAKİ İKON DÜĞMELERİ — GÖRÜNMEZ DOKUNMA ALANI
   ───────────────────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (iPhone SE): ana sayfada `.lv-chart-btn` / `.lv-list-btn` 13px,
   `.ls2-chart-btn` 20px yükseklikte — parmakla isabetli basılamıyor.

   NEDEN BÜYÜTMÜYORUZ DA ALAN EKLİYORUZ: bu düğmeler tablo satırlarının
   içinde ve sayıları yüzlerce (659 + 831). Yüksekliklerini artırmak HER
   SATIRI uzatır, widget'lar taşar ve yoğun veri düzeni bozulur.
   Bunun yerine ::after ile GÖRÜNMEZ bir dokunma alanı seriliyor: görsel
   boyut aynı kalıyor, parmak hedefi büyüyor (layout'a etkisi YOK).

   Yan yana duran ikili düğmelerde (chart + list) alanlar çakışmasın diye
   yatayda ölçülü, dikeyde cömert davranılıyor. */
@media (max-width:900px){
  .lv-chart-btn, .lv-list-btn, .ls2-chart-btn,
  .ema-btn, .wtb, .wx-chip, .mini-hm-tf-btn, .pc-tab, .lv-tab,
  .tfdd-btn, .fg-fullpage-btn, .liq-hist-btn, .ai-detail-btn{
    position:relative;
  }
  .lv-chart-btn::after, .lv-list-btn::after, .ls2-chart-btn::after,
  .ema-btn::after, .wtb::after, .wx-chip::after, .mini-hm-tf-btn::after,
  .pc-tab::after, .lv-tab::after, .tfdd-btn::after,
  .fg-fullpage-btn::after, .liq-hist-btn::after, .ai-detail-btn::after{
    content:'';
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:calc(100% + 10px);      /* yatayda ölçülü — komşuyla çakışmasın */
    min-width:22px;
    height:30px;                  /* dikeyde cömert — satır yüksekliği dar */
    /* Görünmez ama dokunulabilir. Layout'u ETKİLEMEZ (absolute). */
  }
  /* Alt bilgi / yasal bağlantılar: ölçülen 15px → dokunulabilir yükseklik.
     (Üstteki blok yalnız .foot/.footer kapsıyordu; ana sayfanın alt
     şeridindeki sade <a>'lar dışarıda kalmıştı.) */
  .disclaimer-bar a, .legal-bar a, .alt-bilgi a, .site-foot a{
    display:inline-block; min-height:26px; line-height:26px;
  }
}