/* =====================================================================
   İSTATİSTİK — TELEFON     kaynak: mobil/Mobil - İstatistik.dc.html
   ---------------------------------------------------------------------
   Webdeki uzun sayfa DORDE bolundu:
     ozet (kaydirmasiz)  ·  Basari dagilimlari  ·  Son 90 gun & seri  ·  Yazim
   "En cok zorlandiklarin" Kelimeler listesine SUZGECLE acilir — hicbir
   olcum atilmadi, yalnizca yeri degisti.

   Guncel standart (telefon-tekrar / telefon-ilerleme ailesi): ekranin
   TEK vitrini lacivert (`--yan-bg2` + ustte bakir sac cizgisi), gerisi
   kagit kart. Baslik satiri · geri dugmesi · sayac cipi ORTAK
   (`.ekran-abas` / `.ekran-geri` / `.ekran-acip`, style.css).

   TAMAMI `@media (max-width: 940px)`; masaustu `renderStats`in kendi
   uzun sayfasini kullanmaya devam eder.
   ===================================================================== */

@media (max-width: 940px) {

  /* ALT DOLGU ALT GEZINMENIN GERCEK SERIDI KADAR. `.view`in varsayilan
     20px'i cubugu KURTARMIYOR: cubuk yuzen bir hap ve dipten 77px
     kapliyor (`--mnav-h`, `navCiz` icinde OLCULEREK yaziliyor). Dortuncu
     ayrinti satiri tam onun altinda kaliyor ve kaydirilsa bile
     ulasilamiyordu. */
  .layout.mstat .view {
    padding-top: 0; padding-left: 0; padding-right: 0;
    padding-bottom: calc(var(--mnav-h, 77px) + var(--sp-2));
  }
  /* SAYFA DIBI BU EKRANDA CIZILMEZ — tasarimin kendi basligi "ozet ·
     kaydirmasiz" ve 178px'lik `.app-foot` o iddiayi tek basina bozuyor.
     Bugun ve Tekrar ekranlarindaki kararin aynisi; bayrak `render()`te
     her cizimde sifirlanir. */
  .layout.mstat .app-foot { display: none; }
  /* `.main` telefonda `overflow-x: hidden` ile scrollport oluyor; bu
     ekranda yapiskan bir cubuk yok ama alt ekranlarin tam boy kabugu
     icin ayni serbestlik gerekiyor (Tekrar'daki belgeli kusur). */
  .layout.mstat .main { overflow: visible; max-width: none; }

  .st-kok { display: flex; flex-direction: column; min-height: 0; }
  .st-govde {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: 0 14px 10px;
  }

  /* ---------------- LACIVERT VITRIN: SEVIYEN ---------------- */
  .st-vitrin {
    position: relative; overflow: hidden; flex: none;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px;
    background: var(--yan-bg2); border: 0; border-radius: 22px;
    box-shadow: var(--shadow-card);
  }
  .st-vitrin::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--yan-cizgi);
  }
  .st-kas {
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: var(--ls-kas); text-transform: uppercase;
    line-height: normal;
  }
  .st-vitrin .st-kas { color: var(--yan-vurgu-2); }
  .st-kart .st-kas { color: var(--accent); }

  /* Iki seviye YAN YANA — "ben A2 miyim A1 miyim" sorusu ucuncu kez
     soruldugu icin ikisi de adiyla ve ayni anda duruyor. */
  .st-ikili { display: flex; gap: var(--sp-2); }
  .st-sv {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px;
    background: rgba(233, 237, 242, .06);
    border: 1px solid rgba(233, 237, 242, .16);
    border-radius: 14px;
  }
  .st-sv > i:first-child {
    font-style: normal; font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--yan-metin-orta); line-height: normal;
  }
  .st-sv > b {
    font-size: 26px; font-weight: 500; letter-spacing: -.02em;
    color: var(--yan-metin); line-height: normal;
    font-variant-numeric: tabular-nums;
  }
  .st-sv > i:last-child {
    font-style: normal; font-size: var(--fs-xs);
    color: var(--yan-metin-zayif); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .st-bilgi {
    display: flex; gap: var(--sp-2); align-items: flex-start;
    font-size: var(--fs-xs); line-height: 1.5; color: var(--yan-metin-orta);
  }
  .st-bilgi > .ic { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--yan-vurgu-2); }

  .st-yol {
    display: flex; height: 6px; border-radius: 3px;
    background: var(--yan-kanal); overflow: hidden;
  }
  .st-yol > span { display: block; border-radius: 3px; background: var(--yan-vurgu); }
  .st-yol-alt {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11.5px; color: var(--yan-metin-orta);
    font-variant-numeric: tabular-nums;
  }
  .st-yol-alt b { font-weight: 600; color: var(--yan-metin); }
  .st-yol-alt .st-bosluk { flex: 1; }
  .st-yol-alt em { font-style: normal; font-weight: 600; color: var(--yan-metin-orta); }

  .st-tahmin {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 9px; border-top: 1px solid var(--yan-kanal);
    font-size: var(--fs-xs); line-height: 1.5; color: var(--yan-metin-zayif);
  }
  .st-tahmin b { font-weight: 600; color: var(--yan-metin-orta); }
  .st-tahmin .st-vurgu { color: var(--yan-vurgu-2); }

  /* ---------------- KAGIT KARTLAR ---------------- */
  .st-kart {
    flex: none; display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-card);
  }
  .st-kbas { display: flex; align-items: baseline; gap: var(--sp-2); }
  .st-kbas .st-bosluk { flex: 1; }
  .st-knot { font-size: var(--fs-xs); color: var(--faint); }
  .st-p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--faint); }
  .st-p b { font-weight: 600; color: var(--text); }

  /* ---- dokuz temel sayi: 3 sutun ---- */
  .st-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .st-kutu {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px;
    background: var(--page); border: 1px solid var(--line-kart);
    border-radius: 12px;
  }
  .st-kutu-ust { display: flex; align-items: center; gap: 6px; }
  .st-kutu-ust .ic { flex: none; width: 13px; height: 13px; }
  .st-kutu-ust b {
    font-size: 17px; font-weight: 500; letter-spacing: -.02em;
    color: var(--text); line-height: normal;
    font-variant-numeric: tabular-nums;
  }
  .st-kutu > i {
    font-style: normal; font-size: var(--fs-xs); color: var(--faint);
    line-height: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* Kavram renkleri YALNIZ IKONDA — ilerleme dilinin kurali. */
  .st-c-ogren .ic { color: var(--ilerleme-ogren); }
  .st-c-yolda .ic { color: var(--ilerleme-yolda); }
  .st-c-yeni  .ic { color: var(--ilerleme-yeni); }
  .st-c-notr  .ic { color: var(--muted); }
  .st-c-bakir .ic { color: var(--accent); }

  /* ---- dort ayrinti girisi ---- */
  .st-liste { gap: 0; padding: 2px var(--sp-3); }
  .st-satir {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px;
    background: transparent; border: 0; border-bottom: 1px solid var(--line-zayif);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: color var(--mo-hizli) var(--mo-cikis);
  }
  .st-kart.st-liste > .st-satir:last-child { border-bottom: 0; }
  .st-s-ic {
    flex: none; display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--bant-bg, var(--card2)); color: currentColor;
  }
  .st-s-ic .ic { width: 14px; height: 14px; }
  .st-s-bakir { color: var(--accent);          --bant-bg: var(--accent-soft); }
  .st-s-mavi  { color: var(--ilerleme-yeni);   --bant-bg: var(--tint-blue, var(--card2)); }
  .st-s-amber { color: var(--warn-ink, var(--warn)); --bant-bg: var(--warn-soft); }
  .st-s-yesil { color: var(--ilerleme-ogren);  --bant-bg: var(--ok-soft); }
  .st-satir > b {
    font-size: var(--fs-base); font-weight: 500; color: var(--text);
    line-height: normal;
  }
  .st-satir > .st-bosluk { flex: 1; }
  .st-s-not {
    font-style: normal; font-size: var(--fs-xs); color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 46%;
  }
  /* Saga bakan chevron sette yok — asagi bakan dondurulur. */
  .st-s-ok { flex: none; display: inline-flex; color: var(--faint); }
  .st-s-ok .ic { width: 15px; height: 15px; transform: rotate(-90deg); }
  .st-satir:hover > b { color: var(--accent); }

  /* ================= ALT EKRAN: BASARI DAGILIMLARI ================= */
  /* Segment denetimi: uc secenek, acilir liste DEGIL. */
  .st-segment {
    flex: none; display: flex; gap: 3px; padding: 3px;
    background: var(--cip-yuzey); border-radius: 13px;
  }
  .st-segment > button {
    flex: 1; height: 38px; border-radius: 10px;
    background: transparent; border: 0;
    font-family: inherit; font-size: var(--fs-base); font-weight: 500;
    color: var(--faint); cursor: pointer;
    transition: color var(--mo-hizli) var(--mo-cikis);
  }
  .st-segment > button:hover { color: var(--accent); }
  .st-segment > button.acik {
    background: var(--card); border: 1px solid var(--line);
    font-weight: 600; color: var(--text);
  }

  .st-dagilim { gap: 13px; padding: 14px; }
  .st-d-satir { display: flex; flex-direction: column; gap: 6px; }
  .st-d-ust { display: flex; align-items: center; gap: var(--sp-2); }
  .st-d-ic {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 9px;
    background: var(--page); border: 1px solid var(--line-kart);
    color: var(--muted);
  }
  .st-d-ic .ic { width: 13px; height: 13px; }
  .st-d-ust > b {
    font-size: var(--fs-base); font-weight: 500; color: var(--text);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .st-d-ust > .st-bosluk { flex: 1; }
  /* OZGULLUK: `.st-d-ust > b` (0,2,0) yuzdeyi de yakaliyor ve tek
     sinifla yazilinca (0,1,0) onu ezemiyordu — yuzde 500  agirlikta
     kaliyordu (olcum yakaladi). Ozgulluk esitlenince kaynak sirasi
     karar veriyor. */
  .st-d-ust > .st-d-yuzde {
    flex: none; font-size: var(--fs-base); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .st-d-say {
    flex: none; font-style: normal; font-size: var(--fs-xs);
    color: var(--faint); font-variant-numeric: tabular-nums;
  }
  .st-d-cubuk {
    height: 8px; border-radius: 4px;
    background: var(--cip-yuzey); overflow: hidden;
  }
  .st-d-cubuk > i { display: block; height: 100%; border-radius: 4px; background: currentColor; }
  /* Uc basamak: iyi · orta · zayif. Renk YALNIZ basina birakilmaz —
     yuzde sayisi zaten yanindadir ve lejant asagida. */
  .st-iyi   { color: var(--ilerleme-ogren); }
  .st-orta  { color: var(--warn-ink, var(--warn)); }
  .st-zayif { color: var(--bad-strong, var(--bad)); }

  .st-lejant {
    flex: none; display: flex; align-items: center; gap: 14px;
    padding: 0 2px; font-size: var(--fs-xs); color: var(--faint);
    flex-wrap: wrap;
  }
  .st-lejant > span { display: flex; align-items: center; gap: 5px; }
  .st-lejant i { display: block; width: 8px; height: 8px; border-radius: 50%; }

  .st-eylem {
    flex: none; display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-4);
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    font-family: inherit; font-size: var(--fs-base); font-weight: 500;
    color: var(--text); cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis),
                color var(--mo-hizli) var(--mo-cikis);
  }
  .st-eylem:hover { border-color: var(--accent); color: var(--accent); }
  .st-eylem .ic { flex: none; width: 15px; height: 15px; color: var(--accent); }

  /* ================= ALT EKRAN: SON 90 GUN & SERI ================= */
  .st-isi { display: flex; gap: 7px; }
  .st-isi-gun {
    flex: none; display: grid; grid-template-rows: repeat(7, 16px); gap: 3px;
    font-size: var(--fs-xs); color: var(--faint);
  }
  .st-isi-gun > i { font-style: normal; line-height: 16px; }
  .st-isi-kare {
    flex: 1; min-width: 0;
    display: grid; grid-template-rows: repeat(7, 16px);
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  }
  /* Isi haritasi tonlari ZATEN TANIMLI (`--heat0..4`, uc blokta) ve
     webdeki `.heat` de onlari kullaniyor — yeni bir renk seti acilmaz. */
  .st-isi-kare > i { display: block; border-radius: 3px; background: var(--heat0); }
  .st-isi-kare > i.h1 { background: var(--heat1); }
  .st-isi-kare > i.h2 { background: var(--heat2); }
  .st-isi-kare > i.h3 { background: var(--heat3); }
  .st-isi-kare > i.h4 { background: var(--heat4); }
  .st-isi-lejant {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .st-isi-lejant i { display: block; width: 12px; height: 12px; border-radius: 3px; }
  .st-isi-lejant .st-bosluk { flex: 1; }
  .st-alt-satir {
    display: flex; align-items: center; gap: 6px;
    padding-top: 10px; border-top: 1px solid var(--line-zayif);
    font-size: var(--fs-sm); color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .st-alt-satir b { font-weight: 600; color: var(--text); }
  .st-alt-satir .st-bosluk { flex: 1; }

  .st-seri-ust { display: flex; align-items: center; gap: var(--sp-3); }
  .st-seri-ic {
    flex: none; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 15px;
    background: var(--accent-soft); color: var(--accent);
  }
  .st-seri-ic .ic { width: 22px; height: 22px; }
  .st-seri-say { display: flex; align-items: baseline; gap: 7px; }
  .st-seri-say b {
    font-size: 34px; font-weight: 500; letter-spacing: -.03em;
    color: var(--text); line-height: normal;
    font-variant-numeric: tabular-nums;
  }
  .st-seri-say i { font-style: normal; font-size: var(--fs-base); color: var(--faint); }
  .st-seri-en { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .st-seri-en i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
  .st-seri-en b {
    font-size: var(--fs-md); font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .st-hafta { display: flex; gap: 6px; }
  .st-gun {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 9px 0;
    background: var(--page); border: 1px solid var(--line-kart); border-radius: 12px;
  }
  .st-gun > i:first-child {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--line); font-style: normal;
  }
  .st-gun.dolu > i:first-child { background: var(--accent); }
  .st-gun > i:last-child { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
  .st-gun.bugun { background: var(--card); border-color: var(--accent); }
  .st-gun.bugun > i:last-child { font-weight: 600; color: var(--accent); }
  .st-rozet-not {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); line-height: 1.5; color: var(--faint);
  }
  .st-rozet-not .ic { flex: none; width: 14px; height: 14px; color: var(--warn-ink, var(--warn)); }
  .st-rozet-not b { font-weight: 600; color: var(--text); }

  /* ================= ALT EKRAN: YAZIM ================= */
  .st-yazim-izgara {
    flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  }
  .st-y-kutu {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 16px; box-shadow: var(--shadow-card);
  }
  .st-y-ust { display: flex; align-items: center; gap: 7px; }
  .st-y-ust .ic { flex: none; width: 14px; height: 14px; }
  .st-y-ust b {
    font-size: 22px; font-weight: 500; letter-spacing: -.02em;
    color: var(--text); line-height: normal;
    font-variant-numeric: tabular-nums;
  }
  .st-y-kutu > i { font-style: normal; font-size: 11.5px; color: var(--faint); }
  .st-y-dogru .ic { color: var(--ilerleme-ogren); }
  .st-y-kayma .ic { color: var(--warn-ink, var(--warn)); }
  .st-y-hata  .ic { color: var(--bad-strong, var(--bad)); }
  .st-y-oran  .ic { color: var(--ilerleme-yeni); }

  .st-y-satir {
    display: flex; align-items: center; gap: 9px;
    height: 42px; border-bottom: 1px solid var(--line-zayif);
  }
  .st-y-satir:last-child { border-bottom: 0; }
  .st-y-satir > b { font-size: 14.5px; font-weight: 500; color: var(--text); }
  /* Okunus KENDI RENGINDE — uygulama genelindeki kural. */
  .st-y-satir > .st-y-oku {
    font-style: normal; font-size: 11.5px; color: var(--okunus); letter-spacing: .2px;
  }
  .st-y-satir > .st-bosluk { flex: 1; }
  .st-y-rozet {
    flex: none; font-style: normal;
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 9px; border-radius: 7px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .st-birincil {
    flex: none; display: flex; align-items: center; justify-content: center;
    gap: 9px; height: 52px; border-radius: 15px;
    background: var(--accent); border: 1px solid var(--yan-cizgi);
    font-family: inherit; font-size: var(--fs-md); font-weight: 600;
    color: var(--ink-ters); cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(163, 87, 46, .95);
    transition: background var(--mo-orta) var(--mo-cikis);
  }
  .st-birincil:hover { background: var(--accent-parlak, var(--accent)); }
  .st-birincil .ic { width: 16px; height: 16px; }

  .st-esnek { flex: 1; min-height: 2px; }
}

/* ODAK HALKASI — dosyanin SONUNDA ve :where() OLMADAN. */
@media (max-width: 940px) {
  .st-satir:focus-visible,
  .st-segment > button:focus-visible,
  .st-eylem:focus-visible,
  .st-birincil:focus-visible {
    outline: none; box-shadow: var(--odak); border-radius: var(--r-sm);
  }
}