/* =====================================================================
   ALIŞTIRMA EKRANI — TELEFON DÜZENİ · "Fildişi / Mürekkep vitrin" ailesi
   Beşinci katman; yükleme sırası: style.css → telefon-bugun.css →
   telefon-kesfet.css → telefon-ilerleme.css → telefon-alistirma.css.
   TAMAMI genişlik bloğunda; masaüstünün iki sütunlu düzeni KIPIRDAMAZ.

   Gereken yama (3 nokta):
     1) index.html · telefon-ilerleme.css'ten SONRA bu dosyanın bağı.
     2) views.js/dragdrop.js · alıştırma çizilirken odakModu(true) çağrılır
        (mevcut mekanizma; .layout.odak) — telefonda alt yuva ve footer
        gizlenir, buton sabitlenir. Tur bitince render() zaten sıfırlıyor.
     3) Doğru/yanlış anında jetona `dogru` / `yanlis` sınıfı ve ✓/✗
        (tipografik) eklenir — örnek: demo/js/demo.js alxKontrol().
   SINIF ADLARI DEĞİŞMEZ: .ex-card/.ex-main/.ex-side/.ex-kelime/.chip/
   .blank/.chip/.zone/.ex-actions/.fb-solution.

   YENİ RENK YOK. Gradyan yok. Jeton/cümle puntosu --fs-base'te SABİT.
   ===================================================================== */

@media (max-width: 940px) {

  /* ------------------------------------------------------------------
     1 · ODAK KABUĞU — `mobil/Mobil - Odak Modu.dc.html`

     Ekran BEŞ BÖLGEDİR ve hiçbiri yer değiştirmez: künye · kelime kartı ·
     soru · kurulan cümle · havuz. Cevap verilince YALNIZCA sonuç bandı
     eklenir ve o da alt çubuğun içinde büyür — yukarıdaki hiçbir şey
     kımıldamaz (tasarımın "Karar" kartlarından birebir).

     UYGULAMA KABUĞU BURADA ÇİZİLMEZ: üst çubuk (marka · seri · avatar) ve
     alt gezinme gizlenir. Turdan çıkış künyedeki ×'tir; ikinci bir çıkış
     yolu koymak "hangisi hangisi" sorusunu doğurur.
     ------------------------------------------------------------------ */
  .layout.tur .topbar { display: none; }
  .layout.tur .view { padding: 0; background: var(--card); }
  /* `.main` telefonda `overflow-x: hidden` tasiyor (yatay tasma korumasi)
     ve bu onu KENDI KAYDIRMA KABI yapiyor: yapiskan alt cubuk gorunumun
     degil `.main`in dibine tutunuyordu, yani hicbir zaman gorunmuyordu
     (olculdu: cubugun alti 857, gorunum 844).

     Tur ekraninda yatay tasma zaten olcumle denetleniyor ve butun bolgeler
     `min-width: 0` + `overflow: hidden` tasiyor; koruma burada gereksiz,
     yapiskanlik ise sart. */
  .layout.tur .main {
    background: var(--card);
    overflow: visible;
    max-width: none;
  }

  /* -------- KÜNYE: LACİVERT BANT -------- */
  .od-kunye {
    background: var(--yan-bg);
    padding-top: env(safe-area-inset-top, 0px);
    /* Radyal bakır ışık KONMADI — "gradyan renklendirme yok" kullanıcının
       iki kez söylediği karar; tek muafiyet rozetler ekranı. */
  }
  .od-kunye .progress-info {
    display: flex; align-items: center; gap: 11px;
    height: 74px; padding: 0 14px 0 6px; margin: 0;
    color: var(--yan-metin);
  }
  .od-kunye .oturum-cik {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; min-height: 44px;
    padding: 0; border: 0; border-radius: 14px;
    background: transparent; color: var(--yan-ink-govde);
  }
  .od-kunye .oturum-cik svg { width: 20px; height: 20px; }
  .od-rozet {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: 11px;
    background: color-mix(in srgb, var(--yan-vurgu) 14%, transparent);
    border: 1px solid var(--yan-cizgi);
    color: var(--yan-vurgu-2);
  }
  .od-rozet svg { width: 17px; height: 17px; }
  .od-kunye .od-ad {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  }
  /* Tasarım 10px veriyor; ölçeğin tabanı 11px (`--fs-xs`) ve "11px altı
     yazı yok" ölçülmüş bir düzeltme. Hue korunur, punto tabana çekilir. */
  .od-kunye .od-kas {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--yan-vurgu-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; line-height: 1.2;
  }
  /* Ayraç YALNIZCA masaüstünde: orada tek satır okunur. */
  .od-kunye .od-ayrac { display: none; }
  .od-kunye .od-say { gap: 6px; line-height: 1; }
  .od-kunye .od-say b {
    font-size: 21px; font-weight: 500; letter-spacing: -.022em;
    font-variant-numeric: tabular-nums; color: var(--yan-metin);
  }
  .od-kunye .od-say i { font-size: 13px; color: var(--yan-ink-govde); }
  .od-kunye .od-birim { font-size: var(--fs-xs); color: var(--yan-ink-govde); }
  /* DOĞRU/YANLIŞ KUTUSU — iki yarı, arada saç çizgisi. */
  .od-kunye .pi-say {
    flex: none; display: flex; align-items: stretch; gap: 0;
    height: 38px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--yan-kanal);
    background: color-mix(in srgb, var(--yan-metin) 5%, transparent);
  }
  .od-kunye .pi-say b {
    display: flex; align-items: center; gap: 5px; padding: 0 11px;
    font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--yan-ink-govde);
  }
  .od-kunye .pi-say b + b { border-left: 1px solid var(--yan-kanal); }
  /* Sayı SIFIRKEN nötr, dolunca anlam kazanır — ilerleme dili. */
  .od-kunye .pi-say .pi-dogru { color: var(--yan-ok); }
  .od-kunye .pi-say .pi-yanlis { color: var(--bad-strong); }
  .od-kunye .pi-say .pi-sifir { color: var(--yan-ink-govde); }

  .od-kunye .od-alt {
    display: flex; align-items: center; gap: 9px;
    padding: 0 16px 11px; margin: 0;
  }
  .od-kunye .progressbar { height: 4px; background: var(--yan-kanal); }
  .od-kunye .progressbar > div { background: var(--yan-vurgu); }
  .od-kunye .od-kalan {
    font-size: var(--fs-xs); color: var(--yan-ink-govde);
    /* Satır yüksekliği gövde ölçeğinden (1,6) geliyordu ve künyenin alt
       satırı 25 yerine 29px çiziliyordu — künye 99 değil 103. Tasarımda
       satır `normal`. */
    line-height: normal;
    flex-direction: column; align-items: flex-end; gap: 0;
  }
  .od-kunye .od-kalan .pi-bekleyen {
    color: var(--yan-ink-govde); font-size: var(--fs-xs); font-weight: 400;
  }
  .od-kunye .od-kalan .pi-carpan { color: var(--yan-ink-silik); font-size: var(--fs-xs); }
  .od-kunye .od-ertelenen { font-style: normal; color: var(--yan-vurgu-2); }

  /* -------- SAHNE -------- */
  /* TEK EKRAN: kabuk, gorunumden KUNYE BOYU dusulerek hesaplanir.
     `--od-kunye-h` her cizimde JS'te olculur (views.js) — kunye tek
     satira inebiliyor ve sabit bir sayi yazmak yanlis olurdu.

     `.view` FLEX SUTUN YAPILMADI: kunye kenardan kenara uzanmak icin
     NEGATIF MARGIN tasiyor ve flex kapsayicida o marj kabin icerik
     kutusunu buyutuyor — olculdu, sayfa 590px genisliginde YATAY
     TASIYORDU ve kartlar icerigine gore daraliyordu. */
  .ex-card {
    display: flex; flex-direction: column; gap: 0;
    min-height: calc(100vh - var(--od-kunye-h, 99px));
    min-height: calc(100dvh - var(--od-kunye-h, 99px));
  }
  /* ODAK KABUĞU BİR KART DEĞİL, EKRANIN KENDİSİ. Taban `.ex-main`
     kuralı kart yüzeyi veriyor (1px kenar + r16 + gölge) ve o 1px, içerik
     sütununu 358 yerine 356px'e düşürüyordu: tasarımdaki bütün bölgeler
     (kelime kartı · soru kartı · cevap alanı · havuz) 2px dar
     çiziliyordu. Tasarımda gövde düz `#FFFDF8` bir alan. */
  .ex-main {
    order: 1;
    /* KABUK GORUNUMU DOLDURUR. `.ex-alt` yapiskan (`bottom: 0`) ve
       yapiskanlik ancak KAPSAYICI BLOK o alani kaplarken tutunur:
       icerik kisayken (bos ve kuruluyor durumlari) cubuk 651'de
       kaliyor, gorunum 844 (olculdu). Tasarimda sahne `flex: 1` ile
       kabugu dolduruyor ve cubuk kabugun son katmani.

       YUKSEKLIK `100dvh` DEGIL, KALAN: kunye (99px) `.ex-main`in
       DISINDA ve `100dvh` verilince sayfa 943 oluyordu — "tek ekran"
       kunyeyi de saymali. Kabuk `#view`den bolunur: `.view` sutun ve
       `100dvh`, `.ex-main` `flex: 1`.

       BOSLUGU YALNIZCA CUBUK ALIR (`.ex-alt { margin-top: auto }`),
       `justify-content: space-between` DEGIL. Tasarimin govdesi
       space-between kullaniyor ama bizim sahne DEGISKEN yukseklikte
       (geri bildirim govdesi kontrolden sonra buyuyor): bosluk butun
       araliklara dagilinca havuz kalkar kalkmaz cevap alani 442'den
       321'e ZIPLIYORDU (olculdu) — tasarimin "hicbir sey kimildamaz"
       karari tam da bunu yasakliyor. */
    /* `align-self: stretch` SART — taban kural `start` veriyor (masaustu
       iki sutununda kartin karsi sutun boyunca gerilmemesi icin) ve
       telefonda `.ex-card` SUTUN yonunde: orada `start` yatay demek ve
       kabuk icerigine gore DARALIYOR (olculdu: 390 yerine 322px).
       `align-items` tuzaginin ucuncu tekrari — yonu `column` yapan her
       yerde hizayi da yaz. */
    align-self: stretch;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px 16px 12px;
    background: var(--card);
    border: 0; border-radius: 0; box-shadow: none;
  }
  /* YAN PANEL ARTIK YUVANIN ICINDE (dragdrop.js telefonda oraya tasiyor)
     ve ekranin IKINCIL DILINDE: 46px . r14 . `--line` . `--fs-base`.
     Once dolu bej bir bant + ust cizgiydi ve yapiskan cubugun ALTINDA
     kaliyordu — gormek icin kaydirmak gerekiyordu. */
  .ex-side {
    order: 2;
    margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .ex-main .ex-side.yp-katli > .yp-bas {
    height: 46px; min-height: 46px; padding: 0 var(--sp-4);
    background: var(--od-cevap-bg);
    border: 1px solid var(--od-cevap-line); border-radius: 14px;
    font-size: var(--fs-base); font-weight: 400; color: var(--muted);
  }
  .ex-main .ex-side .yp-bas .ic { width: 15px; height: 15px; }
  /* Acikken panel bir kagit kart olur — icindeki bloklar sayfaya
     dagilmasin. */
  .ex-main .ex-side:not(.yp-katli) {
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--line-kart); border-radius: 18px;
  }
  .ex-main .ex-side:not(.yp-katli) > .yp-bas { margin-bottom: 8px; }
  /* KONTROLDEN SONRA YAN PANEL CIZILMEZ: "Bu kelimenin durumu" satiri
     tam da o anda acilan DURUM KARTININ vaadi — ikisi ayni seyi
     soyluyor ve panel 56px yiyor. Kart yokken (kontrolden once) panel
     tek erisim yolu, o yuzden orada duruyor. */
  .ex-main .zone-wrap.kontrol-edildi ~ .od-kelime-satir > .ex-side { display: none; }
  /* Panel tek satıra iner: yalnız kelime şeridi görünür (kutu durumu,
     ilerleme vb. ayrıntı zaten tur sonunda ve İlerleme'de). */
  .ex-side > *:not(.ex-kelime) { display: none; }
  /* AYRINTI KAYBOLMAZ — bir dokunuş arkasında. */
  .ex-side > .yp-bas { display: flex; }
  .ex-side:not(.yp-katli) > * { display: block; }
  .ex-side:not(.yp-katli) > .yp-bas { display: flex; }
  .ex-side:not(.yp-katli) > .ex-kelime { display: flex; }

  /* -------- KELİME KARTI: 80px, TEK KUTU --------
     Tasarımın Karar 3'ü: "Dinle düğmesi, kelime, okunuş, Türkçe ve
     ortam·tür·seviye ayrı bloklar değil tek kart." */
  /* `align-items: stretch` ŞART — taban `.ex-prompt` kuralı `center`
     veriyor ve sütun yönünde bu, çocukları İÇERİĞİNE göre daraltıp
     ORTALIYOR. Ölçüldü (390px): kelime kartı 358 yerine **267px**,
     soru satırı 324px çiziliyordu; kart ekranın ortasında yüzüyor,
     anlam satırı 30px'e sıkışıp kırpılıyordu. Cevap alanı ve havuz
     `.ex-prompt`in dışında olduğu için tam genişlikteydi — kartın dar
     olduğu ancak yan yana konunca görülüyor. */
  /* ---- SORU KARTI: kaş + cümle, solda bakır şerit ----
     Türkçe cümle çıplak bir satırdı ve ekranın ne istediğini yalnızca
     havuzun etiketi ima ediyordu. Kart kâğıt yüzeyde durur, kaş
     ("BUNU İNGİLİZCE KUR") görevi SÖYLER, sol kenardaki bakır şerit
     onu koyu kelime kartından ayırır. Masaüstünde kart da kaş da
     çizilmez — orada `kind-tag` hapları zaten aynı işi yapıyor. */
  .ex-main .ex-tr-satir {
    position: relative;
    display: flex; align-items: stretch; gap: 0;
    /* Taban kuraldan gelen 8px'lik üst boşluk KALKAR: bölge aralarını
       `.ex-prompt`in 10px'lik `gap`i veriyor ve ikisi üst üste binince
       kart ile soru arası 18px oluyordu (ölçüldü). */
    margin: 0;
    min-height: 66px; padding: 0;
    background: var(--card);
    border: 1px solid var(--line-kart);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 28, 43, .03);
  }
  /* Bakır şerit 3px ve kartın SOL KENARINA yapışık; `overflow: hidden`
     köşeyi kırptığı için ayrı bir yarıçap gerekmiyor. */
  .ex-main .ex-tr-satir::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--accent);
  }
  .ex-main .ex-tr-govde {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 11px 4px 11px 14px;
  }
  /* Tasarım 9,5px veriyor; ölçeğin tabanı 11px (`--fs-xs`) ve "11px altı
     yazı yok" ölçülmüş bir düzeltme. Hue ve harf aralığı korunur. */
  .ex-main .ex-tr-kas {
    font-style: normal;
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent);
  }
  /* SPEC T11 "Alıştırma sorusu" `clamp(19px, 2.3vw, 25px)` — 19px o
     aralığın tabanı, uydurulmuş bir ara değer değil. */
  .ex-main .ex-tr-satir .ex-tr-prompt {
    /* Taban kuralın üst boşluğu kalkar: kaş ile cümle arasını artık
       `.ex-tr-govde`nin `gap`i veriyor, ikisi üst üste binince kart
       8px şişiyordu. */
    margin: 0;
    font-size: 17.5px; font-weight: 500; line-height: 1.28;
    letter-spacing: -.015em; color: var(--text);
  }

  /* KALEM ARTIK TAM BOY BİR HÜCRE (tasarımın yeni sürümü): 52px genişlik,
     kartın yüksekliğince, solunda 1px ayraç. Önce 44px'lik yüzen bir ikon
     düğmesiydi ve kartın sağ kenarından içeride duruyordu (kullanıcı
     bildirdi: "en sağdaki kalem işareti bile hizalı değil"). Hücre
     olunca hizalama sorusu ORTADAN KALKIYOR — kenarı ayracın kendisi
     çiziyor, optik kaydırmaya gerek yok. */
  .ex-main .ex-tr-satir .tr-duzelt {
    flex: none; align-self: stretch; margin: 0;
    width: 52px; height: auto; min-height: 0; padding: 0;
    display: grid; place-items: center;
    background: transparent;
    border: 0; border-left: 1px solid var(--line); border-radius: 0;
  }
  .ex-main .ex-tr-satir .tr-duzelt svg { width: 17px; height: 17px; }
  .ex-main .ex-tr-satir .tr-duzelt > i,
  .ex-main .ex-tr-satir .tr-duzelt > span { display: none; }

  .ex-main .ex-prompt {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    /* Taban kuralın 20px'lik alt boşluğu KALKAR: `.ex-main` zaten
       bölgeler arasına 10px koyuyor ve ikisi üst üste binince soru ile
       cevap alanı arasında 30px'lik bir delik açılıyordu (ölçüldü).
       Tasarımda bütün bölge araları 10px. */
    margin-bottom: 0;
  }
  /* ETIKET SATIRI TELEFONDA CIZILMEZ (tasarim): "SORU CUMLESI",
     "kelime degisti", "oto" ve "tekrar" haplari kendi satirini kapiyor ve
     hicbiri EYLEM tasimiyor. Sirali bilgi ZATEN var: kunye kacinci
     alistirmada oldugunu, kelime karti hangi kelimede oldugunu soyluyor.
     Masaustunde duruyorlar — orada yer bol. */
  .ex-main .kind-tag,
  .ex-main .auto-tag { display: none; }
  /* KELIME KARTI KOYU VITRIN (kullanıcı kararı, 25 Ağu 2026).
     Kâğıt bir kutuydu ve kâğıt sayfanın üstünde kimliği yoktu; kart
     artık lacivert yüzeyde duruyor ve içindeki çipler ÇERÇEVELİ.
     Künyeden bir basamak AÇIK (`--yan-bg2` / `--yan-bg`) — ikisi üst
     üste geldiğinde tek bir koyu blok gibi okunmasın diye. */
  .ex-kelime {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    min-height: 0; height: auto; padding: 12px 15px 11px; margin: 0;
    /* TASARIM GRADYAN VERIYOR (168deg #16293C → #0F1C2B → #0B1724);
       "gradyan renklendirme yok" kuralı gereği DÜZ ton alındı.
       Orta durak #0F1C2B künyenin ta kendisi — düz alınsaydı iki koyu
       blok 10px'lik boşlukta birleşirdi. Bu yüzden gradyanın EN AÇIK
       durağı (`--yan-bg2`) kullanılıyor: kart künyeden ayrışıyor. */
    background: var(--yan-bg2);
    border: 0; border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 28, 43, .14), 0 18px 40px -26px rgba(15, 28, 43, .92);
    white-space: normal; overflow: hidden;
  }
  /* Üst kenarda bakır saç çizgisi — tasarımda solan bir gradyan, burada
     düz. Işık çizgisi bir RENKLENDİRME değil kenar vurgusu (`--kenar-isik`
     ailesi); yine de gradyan denetimine takılmaması için düz veriliyor. */
  .ex-kelime::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: rgba(219, 162, 119, .34); pointer-events: none;
  }
  .ex-kelime .ex-kelime-spk {
    flex: none; width: 50px; height: 50px; min-height: 50px;
    display: grid; place-items: center;
    border: 1px solid rgba(219, 162, 119, .5); border-radius: 16px;
    background: var(--accent); color: var(--ink-ters);
    /* BAKIR IŞILTI — tasarımın kendi değeri. Kartın TEK eylemi bu ve
       düz dolu bir kare olarak kâğıdın üstünde yassı duruyordu.
       "Birincil düğme gölgesiz" kuralının istisnası hero'nun birincili
       için zaten yazılı; bu da aynı aile — ekranın tek bakır dolusu. */
    box-shadow: 0 12px 26px -14px rgba(163, 87, 46, .95),
                inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  .ex-kelime .ex-kelime-spk svg { width: 24px; height: 24px; }
  /* `align-items: stretch` BURADA DA ŞART — aynı tuzağın ikizi. Masaüstü
     kuralı `.ex-kelime-metin`e `align-items: baseline` veriyor; sütun
     yönünde bu `flex-start` gibi davranıp satırları İÇERİĞİNE göre
     daraltıyor. Ölçüldü: anlam satırı sütun 270px genişken **30px**
     çiziliyor ve uzun karşılık ("boş ver; önemli değil") kırpılıyordu —
     ellipsis kuralı vardı ama daraltan şey metin değil hizalamaydı. */
  .ex-kelime .ex-kelime-metin {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    overflow: hidden;
  }
  .ex-kelime .ekm-ust { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
  .ex-kelime .ekm-ust b {
    flex: none; font-size: 23px; font-weight: 500;
    line-height: 1.05; letter-spacing: -.024em;
    color: var(--yan-metin); white-space: nowrap;
  }
  /* OKUNUŞ ARTIK HAP — düz metin olarak kelimeden ayırt edilmiyordu. */
  /* OKUNUŞ HAPI ÇERÇEVELİ, DOLU DEĞİL — koyu yüzeyde dolgu ikinci bir
     kutu üretiyor; çerçeve aynı işi yapıp yüzeyi tek katmanda tutuyor. */
  .ex-kelime .ex-kelime-oku {
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border-radius: 8px; background: rgba(201, 138, 91, .16);
    border: 1px solid rgba(201, 138, 91, .34);
    font-style: normal; font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .06em; color: var(--yan-vurgu-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-kelime .ekm-tr {
    font-size: 14px; color: rgba(233, 237, 242, .72); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-kelime .ex-kelime-kimlik {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: rgba(233, 237, 242, .66);
    white-space: nowrap; overflow: hidden; min-width: 0;
  }
  /* Ortam adı ÇİPLERDEN SONRA ve düz metin: çip kelimenin kendi
     kimliği, ortam ise nerede geçtiği. */
  .ex-kelime .ekm-ortam {
    flex: 1; display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-kelime .ex-kelime-kimlik > i {
    font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-kelime .ex-kelime-kimlik svg { width: 11px; height: 11px; }
  .ex-kelime .ex-ayrac {
    font-style: normal; flex: none;
    width: 1px; height: 9px; overflow: hidden; text-indent: -99px;
    background: var(--line);
  }
  /* İKİ HAP BİRBİRİNE EŞİT: sözcük türü rozeti 18px/r4, seviye hapı
     19px/r6 çiziliyordu — yan yana duran iki çip iki ayrı ölçüde.
     Ölçü seviye hapınınki (tasarımın değeri); `.pos-badge`in kendi
     ölçeği başka ekranlarda AYNEN kalır, kural yalnızca bu satıra
     bakıyor.

     TÜR ROZETİ BU KARTTA DOLU, TİNT DEĞİL — tasarımın kendi kararı
     (`#5B4B7A` zemin + `#F1EDF6` mürekkep). Yan yana duran iki çipin
     ikisi de tint olunca satırın çıpası kalmıyor ve kart yıkanmış
     görünüyordu; tasarım birini DOLU birini TİNT yapıp aradaki farkı
     hiyerarşiye çeviriyor. Uygulamanın geri kalanında rozet tint
     KALIR — kural yalnızca bu satıra bakıyor.

     ZEMİN, TÜRÜN KENDİ MÜREKKEBİ: yeni renk icat edilmiyor, var olan
     token ters çevriliyor. Koyu temada mürekkep zaten AÇIK ve
     `--ink-ters` KOYU olduğu için kural iki temada da doğru yöne
     çalışıyor (belgeli "parlak zemin, koyu ikon" deseni). */
  /* ÇİPLER KOYU YÜZEYDE ÇERÇEVELİ — dolgu DEĞİL (kullanıcı kararı).
     Kâğıt kartta çıpayı dolu çip taşıyordu; lacivert yüzeyde dolgu
     üçüncü bir katman olur. İkisi de aynı ölçüde ve aynı dilde:
     saydam zemin + saç çizgisi çerçeve + açık mürekkep. Sözcük türü
     BÜYÜK HARF, seviye normal — ayrımı harf kasası taşıyor.
     Uygulamanın geri kalanında `.pos-badge` kendi tint dilinde KALIR;
     kural yalnızca bu karta bakıyor. */
  .ex-kelime .ex-kelime-kimlik .pos-badge,
  .ex-kelime .ekm-lvl {
    flex: none; display: inline-flex; align-items: center;
    height: 21px; min-height: 21px; padding: 0 8px;
    border-radius: 7px; line-height: 21px;
    background: rgba(233, 237, 242, .1);
    border: 1px solid rgba(233, 237, 242, .16);
    color: rgba(233, 237, 242, .82);
    font-size: var(--fs-xs); font-weight: 600;
    box-shadow: none;
  }
  .ex-kelime .ex-kelime-kimlik .pos-badge {
    text-transform: uppercase; letter-spacing: .12em;
  }
  .ex-kelime .ekm-lvl { letter-spacing: .12em; }
  /* Kimlik satırındaki ayraç koyu yüzeyde çizilmez — çipler zaten
     kendi çerçevelerini taşıyor, üçüncü bir çizgi gürültü olur. */
  .ex-kelime .ex-ayrac { display: none; }


  .ex-kelime .pos-badge { flex: none; }
  /* SOZDIZIMSEL ROL TELEFONDA GIZLI — sozcuk turu rozeti hemen yaninda ve
     kalip/edat gibi turlerde ikisi ayni seyi soyluyor ("kalıp ifade" +
     "kalıp"). Tasarimin meta satiri: ortam · tur · seviye. */
  .ex-kelime .ekm-rol,
  .ex-kelime .ekm-rol-ayrac { display: none; }
  /* "3/5. cümle" ARTIK DURUM KARTINDA — beş dilimli çubuk aynı şeyi
     söylüyor ve orası onun yeri. İki kez yazılmaz. */
  .ex-kelime .ex-kelime-say { display: none; }

  /* -------- SORU SATIRI -------- Soru artık kendi kâğıt kartında; ölçüler
     yukarıdaki "SORU KARTI" bloğunda. Burada yalnızca ETİKET GİZLEME
     kalır: düğme ikon-only ve metin düğüm olarak duruyor. */
  .ex-main .tr-duzelt { color: var(--faint); font-size: 0; }

  /* ------------------------------------------------------------------
     2 · KURULAN CÜMLE + HAVUZ — dokunarak yerleştirme birincil.

     Tasarımın Karar 4'ü: "Kesikli çerçeve içindeki kesikli çerçeve
     kalktı: havuz yalnızca büyük-harf etiket + taşlar. Kurulan cümle
     bakır dolgulu, havuz düz — hangisi hedef olduğu renkten anlaşılıyor."
     ------------------------------------------------------------------ */
  .ex-main .zone-wrap { display: flex; flex-direction: column; gap: 8px; }
  .ex-main .zone {
    display: flex; flex-wrap: wrap;
    align-items: center; align-content: center; justify-content: center;
    gap: 8px;
    min-height: 56px;
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--tutamac);
    border-radius: 18px;
    background: var(--page);
  }
  /* DOLUNCA KİMLİK DEĞİŞTİRİR: bakır tint + düz çerçeve. Hangi bölgenin
     hedef olduğu renkten okunur; kesikli çerçeve "buraya bırak" demektir
     ve taş girdikten sonra o davet bitmiştir. */
  /* DOLGU IKI DURUMDA DA 12px. Tasarim doluyken 10 veriyor ama cevap
     alani ilk cizimde EN KOTU durumuna gore yer ayirtiyor (kayma
     onlemi) ve o hesap dolguyu da sayiyor; dolgu degisirse rezerv ile
     gercek olcu ayrisir. 2px'lik fark kimsenin adlandirmayacagi bir sey,
     kayan bir ekran ise degil. */
  .ex-main .answer-zone.dolu {
    justify-content: flex-start; align-content: center;
    min-height: 60px; gap: 7px;
    background: var(--od-cevap-bg);
    border-style: solid;
    border-color: var(--od-cevap-line);
  }
  /* HAVUZ KENDİ KARTINDA (tasarımın yeni sürümü). Önceki sürüm
     "çerçevesiz" diyordu; taşların kendi çerçeveleri sayfaya dağılmış
     görünüyordu ve kâğıt kart onları tek bölgede topluyor. */
  .ex-main .pool-kart {
    display: flex; flex-direction: column; gap: 9px;
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--line-kart);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 43, .03);
  }
  .ex-main .pool-zone {
    display: flex; flex-wrap: wrap;
    align-items: flex-start; align-content: flex-start;
    /* `.zone` ortalar (bos cevap alaninin daveti icin); havuz SOLA
       yaslanir — taslar okuma sirasinda dizilir. */
    justify-content: flex-start;
    gap: 7px;
    /* Tasarım `min-height:83px; max-height:128px` veriyor. TAVAN
       KONMADI: kap `cevapPayiAyir`ın ölçtüğü blok ve tavana dayanınca
       rezerv gerçek ölçüden ayrışır — taş kayması ölçülüp düzeltilmiş
       bir kusur, onu geri getirecek bir tavan koyulmaz. */
    min-height: 83px;
    margin: 0; padding: 0;
    border: 0; background: none; border-radius: 0;
  }
  /* HAVUZ KONTROLDEN SONRA GIZLENIR — bos ve etiketli bir bant kaliyordu;
     tasarimin cevaplanmis durumunda havuz bolumu hic yok. Kazanilan yer
     "Dogrusu" kartina ve teshise gidiyor. */
  .ex-main .zone-wrap.kontrol-edildi .pool-kart { display: none; }
  .ex-main .zone-label {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
    margin: 0;
  }
  /* Cevap alanının etiketi telefonda gizli — kutu boşken zaten
     "Kelimeleri buraya bırak" yazıyor ve iki kez söylemek 34px yiyor. */
  .ex-main .zl-cevap { display: none; }
  /* Boş cevap alanındaki davet ORTALANIR (tasarım): sol üstte duruyordu
     ve 96px'lik kutunun içinde asılı kalıyordu. */
  .ex-main .answer-zone .zone-empty {
    display: flex; align-items: center; gap: 8px; margin: 0 auto; padding: 0;
    font-size: var(--fs-base); color: var(--muted);
  }
  .ex-main .answer-zone .zone-empty svg { width: 15px; height: 15px; color: var(--accent); }

  /* Jetonlar: 42px, --card yüzey, --chip-line çerçeve (--line ölçüldü:
     1.46:1 — görünmüyor). Punto 15px (tasarım), SABİT. */
  .ex-main .chip,
  .ex-main .blank {
    /* TASARIM 38px VERİYOR — 40'ta bırakıldı. "Dokunma hedefi en az
       40px" cihaz taramasından gelen ÖLÇÜLMÜŞ bir düzeltme ve taş bu
       ekranın birincil dokunma öğesi. 2px kimsenin adlandırmayacağı bir
       fark, kaçırılan bir taş ise değil. */
    height: 40px; min-height: 40px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--chip-line);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-family: inherit; font-size: 15px; font-weight: 400;
    cursor: pointer;
    box-shadow: none;
    transition: border-color var(--mo-hizli) var(--mo-cikis),
                transform var(--mo-hizli) var(--mo-cikis),
                background var(--mo-hizli) var(--mo-cikis);
  }
  .ex-main .chip:hover { border-color: var(--accent); }
  .ex-main .chip:active { transform: translateY(1px); box-shadow: none; }
  .ex-main .chip:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
  /* Havuzdan alınan jetonun yeri boş kalır — sıçrama olmaz. */
  .ex-main .chip.alindi { opacity: 0.25; pointer-events: none; box-shadow: none; }
  /* Doğru / yanlış: renk + tipografik işaret birlikte (renk tek başına
     bırakılmaz). Kırmızı yalnız GERÇEK yanlış cevapta. */
  /* SINIF ADLARI `chip-ok` / `chip-bad` — `dogru` / `yanlis` DEGIL.
     Handoff notu o iki adi yaziyordu ve dosya aylarca oyle duruyordu;
     depoda boyle bir sinif hic yok, yani kontrolden sonra taslar
     telefonda HIC renklenmiyordu. Olcumde yakalandi (0 dogru / 0 yanlis). */
  .ex-main .chip.chip-ok {
    background: var(--od-ok-bg);
    border-color: var(--od-ok-line);
    color: var(--text);
  }
  .ex-main .chip.chip-bad {
    background: var(--od-bad-bg);
    border-color: var(--od-bad-line);
    color: var(--text);
  }
  .ex-main .chip .mark { font-weight: 600; }
  .ex-main .chip.chip-ok .mark { color: var(--ok-strong); }
  .ex-main .chip.chip-bad .mark { color: var(--bad-strong); }

  /* ------------------------------------------------------------------
     3 · BU KELİMEDE DURUMUN — yan panelin sıkışık görünümü.
     Yeni veri yok: turdaki cümle sırası, SRS kutusu, sonraki tekrar.
     ------------------------------------------------------------------ */
  /* `[hidden]` SINIF KURALINA YENILIR — acikca yazilir (belgeli tuzak).
     Kart kontrolden ONCE cizilmez (tasarimin "Bos" durumunda yok). */
  .ex-main .od-durum[hidden] { display: none; }

  .od-durum {
    display: flex; flex-direction: column; gap: 9px;
    padding: 12px 13px;
    background: var(--page);
    border: 1px solid var(--od-durum-line);
    border-radius: 16px;
  }
  .od-durum-bas { display: flex; align-items: baseline; gap: 8px; }
  .od-durum-bas > span {
    flex: 1; min-width: 0;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .od-durum-bas > i {
    flex: none; font-style: normal; font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .od-dilim { display: flex; gap: 5px; }
  .od-dilim > i {
    flex: 1; height: 5px; border-radius: 3px; background: var(--line);
  }
  .od-dilim > i.dolu { background: var(--accent); }
  .od-durum-alt { display: flex; align-items: center; gap: 9px; }
  .od-nokta { flex: none; display: flex; gap: 3px; }
  .od-nokta > i {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--line);
  }
  .od-nokta > i.dolu { background: var(--accent); }
  .od-durum-alt > i:last-child {
    flex: 1; min-width: 0; text-align: right; font-style: normal;
    font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* ------------------------------------------------------------------
     4 · GERİ BİLDİRİM GÖVDESİ — "Doğrusu" kendi kartında.
     ------------------------------------------------------------------ */
  /* YER AYIRMA KALDIRILDI: sonuç bandı artık alt çubuğun içinde büyüyor
     (çubuk yapışkan, aşağıdan yukarı açılıyor), yani gövdenin boş
     dururken 84px yer tutmasının bir sebebi kalmadı. */
  .ex-main .fb-alan { min-height: 0; margin: 0; }
  .ex-main .fb-alan:empty { display: none; }
  /* BLOK — FLEX DEGIL. Kart flex yapilinca cumlenin ICINDEKI her satir
     ici oge ayri bir flex ogesi oluyor ve aralarina `gap` giriyor:
     hedef kelime isaretlendigi icin "Is the road foggy ?" diye
     bolunuyordu (ekran goruntusuyle yakalandi). Ayni tuzak `.notice`,
     `.sr-l > b`, `.auth-head > b` ve `.ay-liste b`de de yasanmisti —
     BESINCI kez. */
  .ex-main .fb-solution {
    display: block;
    margin: 0; padding: 12px 13px;
    background: var(--page);
    border: 1px solid var(--od-durum-line);
    border-radius: 16px;
    font-size: 15px; line-height: 1.45; color: var(--text);
  }
  .ex-main .fb-solution .fb-label {
    display: block; margin-bottom: 6px;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .ex-main .fb-solution b { color: var(--text); }
  .ex-main .fb-solution .fb-spk { vertical-align: middle; margin-left: 6px; }

  /* ------------------------------------------------------------------
     5 · ALT ÇUBUK — sonuç bandı + birincil + iki ikincil

     Tasarımın Karar 1'i: "Birincil eylem `position:absolute` ile içeriğin
     üstüne binmiyor; kabuğun son katmanı olarak duruyor."

     `position: fixed` DEĞİL `sticky`: fixed akıştan çıkar, yani altındaki
     içeriği örter ve `.ex-main`e çubuk boyu kadar alt dolgu vermek
     gerekir — bant eklenince çubuk büyüdüğü için o dolgu HER ZAMAN
     yanlış olurdu (bantsız hâlde ölü boşluk, bantlı hâlde eksik).
     Sticky akışta kalır: çubuk kendi yerinde durur, sayfa kayarken
     görünümün dibine tutunur ve bant eklenince YUKARI doğru büyür —
     üstündeki hiçbir bölge kımıldamaz.

     `order` ile sona alınır: DOM'da `.ex-alt` geri bildirim gövdesinden
     ÖNCE gelir (masaüstünde düğmeler geri bildirimin üstünde durmalı,
     alışılmış yer orası) ve iki ayrı DOM sırası tutmak yerine görünüm
     `order` ile ayrılır.
     ------------------------------------------------------------------ */
  .layout.odak .mobil-nav,
  .layout.tur .mobil-nav { display: none; }
  .layout.tur .app-foot { display: none; }

  .ex-main .fb-alan { order: 8; }
  .ex-alt {
    order: 9;
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: flex; flex-direction: column; gap: 9px;
    /* UST MARJ `auto`: kalan boslugu YALNIZCA cubuk alir
       (`.app-foot`taki belgeli desenin aynisi). KISA YAZIMIN ICINDE —
       ayri bir `margin-top: auto` satiri bu kisa yazimla siliniyordu
       (blokta sonra geliyor ve ust marji 0'a dondururyordu). */
    margin: auto -16px -12px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--line-kart);
    box-shadow: 0 -12px 30px -28px rgba(15, 28, 43, .6);
  }
  /* SONUÇ BANDI — kontrolden sonra çubuğun içinde belirir. */
  .ex-alt .od-band { display: block; }
  .ex-alt .fb-line {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0; padding: 11px 13px;
    border-radius: 14px;
    font-size: 13px; line-height: 1.5; color: var(--text);
    text-align: left;
  }
  .ex-alt .fb-line.fb-ok { background: var(--od-ok-bg); border: 1px solid var(--od-ok-line); }
  .ex-alt .fb-line.fb-bad { background: var(--od-bad-bg); border: 1px solid var(--od-bad-line); }

  /* TEK SIRA: [52x52 ikon] [birincil] [52x52 ikon] (tasarımın yeni
     sürümü). Önce birincil tam genişlikti ve altında iki etiketli
     ikincil vardı — iki satır, 110px. Şimdi 52px tek satır: ikincil
     eylemler ikona iner, birincil aradaki bütün yeri alır. */
  .ex-actions {
    position: static;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 0; padding: 0;
  }
  .ex-actions .btn-primary, .ex-actions .btn-next {
    order: 2;
    flex: 1 1 0; width: auto; min-width: 0;
    height: 52px; min-height: 52px;
    font-size: 15.5px; font-weight: 600;
    border-radius: 15px;
    box-shadow: 0 12px 26px -14px rgba(163, 87, 46, .95);
  }
  /* İKİNCİLLER İKON-ONLY KARE: 52x52, etiketleri gizli. Etiket `title`
     ve `aria-label`da duruyor — ekran okuyucu ve uzun basış görür. */
  /* `display` BU KURALDA YAZILMAZ. `:not()` argümanları özgüllüğe
     sayılıyor: seçici (0,4,0) ve `display: grid` yazılınca `.od-dinle`
     (0,1,0) gizlemesini eziyordu — iki düğme kontrolden önce de
     çiziliyordu (ekran görüntüsüyle yakalandı). Taban `.btn` zaten
     `inline-flex` + ortalı; kutu ölçüsü yeter. */
  .ex-actions > .btn:not(.btn-primary):not(.btn-next) {
    flex: none; width: 52px; min-width: 52px;
    height: 52px; min-height: 52px;
    padding: 0;
    border-radius: 15px;
    background: transparent;
    border: 1px solid var(--line);
    font-size: 0; color: var(--faint);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .ex-actions > .btn:not(.btn-primary):not(.btn-next) svg { width: 18px; height: 18px; }
  .ex-actions > .btn:not(.btn-primary):not(.btn-next) > i { display: none; }
  /* Sol yuva: kontrolden önce Temizle, sonra Dinle. Sağ yuva: önce
     İpucu, sonra "Cümle hatalı". */
  .ex-actions .od-temizle, .ex-actions .od-dinle { order: 1; }
  .ex-actions .od-ipucu, .ex-actions .od-bildir { order: 3; }
  /* Görünürlük SINIFLA verilir, satır içi `style` ile değil: taban kural
     masaüstünde gizliyor ve `style.display = ''` bir sınıf kuralına
     yenilir (belgeli tuzak — `[hidden]` ile aynı aile). */
  .ex-actions.kontrol-edildi .od-dinle,
  .ex-actions.kontrol-edildi .od-bildir { display: inline-flex; }
  /* Kontrolden SONRA sol/sağ yuvayı Dinle ve "Cümle hatalı" alır;
     Temizle ve İpucu kalkar (cevap verilmiş, ikisi de anlamsız). */
  .ex-actions.kontrol-edildi .od-temizle,
  .ex-actions.kontrol-edildi .od-ipucu { display: none; }

  /* ------------------------------------------------------------------
     GERİ BİLDİRİM KUYRUĞU — "Oku" ve düzeltme satırı.
     İkisi de ekranın kendi ikincil dilinin DIŞINDAYDI: "Oku" küçük,
     çerçeveli, sola yapışık bir hap; altındaki iki düzeltme bağlantısı
     yüzeysiz hayalet düğme. Ekranda üç ayrı ikincil dil oluyordu
     (alt çubuk · çıkış satırı · burası). Hepsi TEK ölçüye çekildi:
     46px · r14 · `--line` çerçeve · `--fs-base` · `--muted`.
     ------------------------------------------------------------------ */
  .ex-main .tlf-alan { margin-top: 0; }
  .ex-main .tlf-alan .tlf-btn {
    width: 100%; height: 46px; min-height: 46px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 var(--sp-4);
    background: transparent;
    border: 1px solid var(--line); border-radius: 14px;
    font-size: var(--fs-base); color: var(--muted);
  }
  .ex-main .tlf-alan .tlf-btn .ic { width: 15px; height: 15px; }
  .ex-main .tlf-alan .tlf-sonuc { margin-top: 8px; border-radius: 14px; }

  /* İki düzeltme eylemi tek satırda eşit paylaşır — "Sonra dön / Ara ver"
     satırıyla aynı kalıp. */
  .ex-main .fb-duzelt-satir {
    display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 10px;
  }
  .ex-main .fb-duzelt-satir > .btn {
    flex: 1 1 0; min-width: 0;
    height: 46px; min-height: 46px;
    padding: 0 var(--sp-3);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: transparent;
    border: 1px solid var(--line); border-radius: 14px;
    font-size: var(--fs-base); color: var(--muted);
    white-space: nowrap; overflow: hidden;
  }
  .ex-main .fb-duzelt-satir > .btn .ic { width: 15px; height: 15px; flex: none; }
  .ex-main .fb-duzelt-satir > .btn:disabled { opacity: .5; }

  /* "Ara ver" satırı çubuğun ALTINDA kalır: çubuk yapışkan, o değil.
     Kaydırınca görünür — turdan çıkışın asıl yolu künyedeki ×. */
  /* SECICI `.view >` DEGIL: satir artik yuvanin (`.ex-main`) icinde ve
     dogrudan cocuk kurali hic tutmuyordu — dugme bicimsiz, yarim
     genislikte kaliyordu (ekran goruntusuyle yakalandi).
     `order: 3` — yan panelden SONRA, cubugun hemen ustunde. */
  .btn-row.od-cikis {
    padding: 0; margin: 0;
    gap: 8px;
  }
  /* ÇIKIŞ SATIRI ALT ÇUBUKLA AYNI DİLDE — ekranda tek bir ikincil
     düğme dili olsun. Önce `btn-ghost btn-sm` idi: çerçevesiz, 34px,
     etiketi de parantezli bir cümleydi; ne düğme gibi duruyor ne
     okunuyordu (kullanıcı bildirdi). Ölçüler `.ex-actions`ın ikincil
     sırasıyla BİREBİR aynı — 46 / r14 / --line / --fs-base. */
  /* SESSIZ BAKIR TINT (kullanici karari: "renklendir ama cok goze
     carpmasin"). Ekranda ZATEN olan cift kullanilir (`--od-cevap-*`,
     dolu cevap alaninin tinti) — yeni renk icat edilmiyor. Metin
     `--muted` KALIR; renk yalnizca yuzeyde ve ikonda, yani okuma
     hiyerarsisi degismiyor.
     DEGERLER KURALIN ICINE YAZILIR: ayri bir tint blogu `.yp-bas`in
     kendi kuralina (0,4,0) ve `#quitSession`e (kimlik) ULASMIYORDU. */
  .btn-row.od-cikis > .btn {
    flex: 1 1 0; min-width: 0;
    height: 46px; min-height: 46px;
    border-radius: 14px;
    background: var(--od-cevap-bg);
    border: 1px solid var(--od-cevap-line);
    font-size: var(--fs-base); color: var(--muted);
  }
  .btn-row.od-cikis > .btn svg { width: 15px; height: 15px; color: var(--accent); }
  /* Satirda "Sonra dön" kalmadiysa (kontrolden sonra kaldiriliyor) kutu
     hic cizilmez — yoksa 46px'lik bos bir bant kalirdi. */
  .btn-row.od-cikis:empty { display: none; }

  /* ---- KELIMEYE AIT SATIR: "Bu kelimenin durumu" + "Sonra dön" ----
     Ikisi de BU ALISTIRMAYI kapsiyor, o yuzden yan yana. Alt alta
     konunca 56px fazladan yer yiyorlar ve "Sonra dön" varken tek ekran
     bozuluyordu (olculdu: 928 / 844). */
  .ex-main .od-kelime-satir {
    order: 2;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  /* ESIT GENISLIK (kullanici karari): iki kutu da yarim satir. Etiket
     "Bu kelimenin durumu" iken 50%'de iki satira iniyordu; "Kelimenin
     Durumu"na kisalinca sigiyor. Dolgu ve aralar da daraltildi. */
  .ex-main .od-kelime-satir > * { flex: 1 1 0; min-width: 0; }
  /* Yarim satirda (175px) "Kelimenin Durumu" + ikon + chevron + dolgu
     176px ediyordu ve etiket "Kelimen…" diye kirpiliyordu (ekran
     goruntusuyle yakalandi). Dolgu 9, ara 5, ikonlar 14 — 168px. */
  .ex-main .od-kelime-satir .yp-bas,
  .ex-main .od-kelime-satir > .btn-row > .btn { padding: 0 9px; gap: 5px; }
  .ex-main .od-kelime-satir .yp-bas .ic,
  .ex-main .od-kelime-satir > .btn-row > .btn svg { width: 14px; height: 14px; }
  /* `> span` TEK BASINA YETMEZ — chevron kabi (`.yp-ok`) da bir `span`
     ve ayni satirin dogrudan cocugu; kural onu da yakalayip `flex: 1`
     veriyordu, ikon yarim satiri kaplayip ALT SATIRA tasiyordu (ekran
     goruntusuyle yakalandi). Belgeli tuzagin ucuncu tekrari. */
  .ex-main .od-kelime-satir .yp-bas > span:not(.yp-ok) {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ex-main .od-kelime-satir .yp-ok .ic { width: 14px; height: 14px; }
  /* BILGI IKONU YARIM SATIRDA CIZILMEZ. Kutu 175px; dolgu + iki ikon +
     iki ara ile etikete 119px kaliyor ve "Kelimenin Durumu" 128px
     (kirpiliyordu). Ikonu dusurmek 19px kazandiriyor.
     Kaybedilen bir sey YOK: etiket zaten ne oldugunu soyluyor ve
     ACILABILIRLIGI chevron tasiyor — `ⓘ` ikisini de tekrar ediyordu.
     Satir da boylece okunuyor: solda EYLEM (ikon + metin), sagda
     ACILIR BASLIK (metin + chevron). */
  .ex-main .od-kelime-satir .yp-bas > .ic { display: none; }

  /* ---- SESSIZ BAKIR TINT (kullanici karari: "renklendir ama cok goze
     carpmasin") ----
     Uc dugme de tur/kelime duzeyinde IKINCIL eylem: "Sonra Dön",
     "Kelimenin Durumu", "Ara Ver". Ekranda ZATEN olan cift kullanilir
     (`--od-cevap-*`, dolu cevap alaninin tinti) — yeni renk icat
     edilmiyor. Metin `--muted` kalir, renk yalnizca YUZEYDE ve
     IKONDA: dugmeler oyle sicak bir zemin kazaniyor ama okuma
     hiyerarsisi degismiyor. */
  .ex-main .od-kelime-satir .yp-bas,
  .ex-main .od-kelime-satir > .btn-row > .btn,
  .ex-main .od-kelime-satir .yp-ok { color: var(--accent); }
  /* Panel ACILINCA tam genislik — dar bir sutunda okunmaz. */
  .ex-main .od-kelime-satir > .ex-side:not(.yp-katli) { flex-basis: 100%; }
  /* Kontrolden sonra satirda tek "Ara ver" kalmiyor; panel de gizli
     oldugu icin sarmalayici bosalabilir. */
  .ex-main .od-kelime-satir:empty { display: none; }

  /* "ARA VER" CUBUGUN ICINDE, BIRINCILIN ALTINDA.
     Tur duzeyinde bir eylem: kelimeye degil TURA ait. Birincil ile
     yarismasin diye TAM GENISLIK DEGIL — icerigi kadar, ortalanmis,
     40px'lik sessiz bir hap. Ekranin ikincil dilinde kalir (cerceve
     `--line`, punto `--fs-base`) ama kutusu kucuk oldugu icin
     hiyerarsi net. */
  .ex-alt > #quitSession {
    align-self: center;
    width: auto; min-width: 0;
    height: 40px; min-height: 40px;
    padding: 0 18px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--od-cevap-bg);
    border: 1px solid var(--od-cevap-line); border-radius: 12px;
    font-size: var(--fs-base); color: var(--muted);
    white-space: nowrap;
  }
  .ex-alt > #quitSession svg { width: 14px; height: 14px; color: var(--accent); }

}

/* Koyu tema: soru kartı vitrin — üst kenar ışığı. Token dışı değer yok. */
@media (max-width: 940px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ex-card {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }
}
@media (max-width: 940px) {
  :root[data-theme="dark"] .ex-card {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }

  /* ODAK HALKASI — dosyanın SONUNDA ve :where() OLMADAN. */
  .ex-main .chip:focus-visible,
  .ex-main .chip:focus-visible,
  .ex-main .blank:focus-visible,
  .ex-actions .btn:focus-visible {
    outline: none;
    box-shadow: var(--odak);
    border-color: var(--accent);
  }
}