/* =====================================================================
   Gunluk Ingilizce — tema degiskenleri
   Renkler dogrulanmis palet uzerinden (acik/koyu ayri secilmis adimlar).
   ===================================================================== */

/* Yerel font (cevrimdisi calisir): TEK aile — Manrope. CDN'e baglanma. */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* LORA KALDIRILDI — uygulamada TEK yazı ailesi var: Manrope.
   Serif hikaye metni ve serif kart başlığı denendi, kullanıcı kararı
   Manrope oldu ("her yerde sadece bu font"). Font dosyaları da silindi;
   geri isteniyorsa git geçmişinde duruyor. İkinci bir aile EKLEME. */

/* =====================================================================
   TASARIM ÖLÇEĞİ — tüm ölçüler bu değişkenlerden gelir.
   Yeni stil yazarken ASLA serbest px kullanma; buradaki adımları kullan.
   ===================================================================== */
:root {
  /* boşluk (4px tabanlı) */
  --sp-1: 4px;   --sp-2: 8px;    --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;

  /* yazı boyutu */
  --fs-xs: 11px;  --fs-sm: 13px;  --fs-base: 15px;  --fs-md: 16px;
  --fs-lg: 18px;  --fs-xl: 22px;  --fs-2xl: 28px;   --fs-3xl: 34px;
  /* GOSTERI BASAMAGI — olcegin en ustu 34px'ti ve pratikte hicbir yerde
     kullanilmiyordu: sayfadaki en buyuk yazi 28px kart basligiydi. Yani
     "bugun kac kelime kaldi" gibi EKRANIN SEBEBI olan sayi, govde
     metniyle (15px) ayni agirliktaydi. Tek bir sayi icin ayrilmis bir
     basamak; paragraf ya da baslik icin KULLANILMAZ. */
  --fs-4xl: 44px;

  /* köşe yarıçapı */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-full: 999px;

  /* bileşen ölçüleri */
  --ctrl-h: 42px;          /* buton, select, input yüksekliği */
  /* BÜYÜK KONTROL — ekranın TEK ana eylemi için. Her yerde kullanılmaz:
     iki tane yan yana görünüyorsa biri ana eylem değildir. */
  --ctrl-h-lg: 52px;
  --sidebar-w: 264px;
  --rail-w: 76px;          /* daraltılmış kenar menü */
  --read-w: 68ch;          /* OKUMA GENİŞLİĞİ — satır 65-75 karakteri geçmemeli,
                              yoksa göz satır başını kaybeder. Hikaye, diyalog,
                              açıklama metinleri bunu aşmaz. */
  --icon-box: 40px;        /* kart içi ikon kutusu */
  /* YAN VURGU CIZGISI. Bes yerde 3-4px'ti; impeccable detektoru bunu
     "AI uretimi arayuzlerin en taninabilir isareti" diye isaretliyor.
     Cizgiler BILGI TASIYOR (dogru cevap, ceviri satiri, ilerleme bandi,
     zorlanma uyarisi) — silinmedi, INCELTILDI ve tek yerden yonetiliyor. */
  --kenar-vurgu: 2px;

  /* ---- BOSLUK GENISLIGE GORE OLCEKLENIR ----
     Sabit 24px kart dolgusu 1280px'te dogru, 2560px'te cimri duruyordu:
     icerik genisliyor ama nefes alani ayni kaliyor, sayfa "sikisik" okunuyor.
     Bu ucu ADIMLARDAN secilir (24 -> 32 -> 40), ara deger uydurulmaz.
     Dar ekran degerleri asagidaki 940px blogunda ayrica kuculur. */
  --card-pad:   var(--sp-6);
  --view-pad-x: var(--sp-8);
  --view-pad-y: var(--sp-6);

  /* ---- HAREKET ----
     Süreler tek yerden. Alıştırma içi geri bildirim --mo-hizli'yı AŞMAZ:
     günde 50 alıştırma çözülüyor, uzun kutlama 20. tekrarda sinir bozar.
     Kutlama yalnızca tur sonuna ve gerçek kilometre taşlarına saklanır.
     YALNIZCA transform ve opacity animasyonlanır (compositor'da çalışır,
     telefonda kare düşürmez); width/box-shadow animasyonu her karede
     yeniden boyama demektir. */
  --mo-hizli: 150ms;       /* alıştırma geri bildirimi, mikro tepkiler */
  --mo-orta:  220ms;       /* ekran geçişi, panel açılışı */
  --mo-yavas: 300ms;       /* ödül anları — sayaç, rozet, kutu yükselmesi */
  /* Yumusama TEK EGRI: ease-out. Once bir de --mo-geri vardi
     (hedefi ASIP geri donen bir egri) — yayli/zipir bir his verir,
     yani yayli/zipir bir his. Kutlamada hos, ama gunde 50 alistirmada
     ogeler surekli "zipliyor" gibi okunuyor. Tek egri daha sakin. */
  --mo-cikis: cubic-bezier(.22, 1, .36, 1);      /* yumuşak duruş */
  --mo-geri:  var(--mo-cikis);                   /* geriye donuk ad — ayni egri */
}

:root {
  color-scheme: light;

  /* yuzeyler */
  --page: #f9f9f7;
  --page: oklch(98.156% 0.00264 106.45);
  --page-glass:  rgba(249, 249, 247, 0.82);
  --card: #fcfcfb;
  --card: oklch(99.079% 0.00132 106.42);
  --card2: #f2f1ec;
  --card2: oklch(95.753% 0.00673 97.35);
  --line: #e1e0d9;
  --line: oklch(90.552% 0.00948 100);
  --line-strong: #c3c2b7;
  --line-strong: oklch(81.176% 0.01519 102.51);
  /* Buton cercevesi: WCAG arayuz ogesi siniri 3:1. --line ile buton
     kartin uzerinde kayboluyordu (olculdu: 1.5). */
  --btn-line: #8e8e84;
  --btn-line: oklch(64.375% 0.01457 106.8);
  /* Tas (.chip) cercevesi AYRI token: taslar MAVI zeminli cevap alaninda
     duruyor, --btn-line orada 2.62'ye dusuyor. Olculdu: --line-strong ile
     1.46:1 idi — uygulamanin ana etkilesim ogesinin kenari gorunmuyordu.
     Bu ton cevap alaninda 3.45, havuzda 4.12 veriyor. */
  --chip-line: #7a7a6e;
  --chip-line: oklch(57.59% 0.01792 106.95);
  /* Ikon cipi: golge yigini yerine YUZEY farki */
  --cip-yuzey: #eceef2;
  --cip-yuzey: oklch(94.873% 0.00578 264.53);
  --cip-kenar: #d8dce4;
  --cip-kenar: oklch(89.375% 0.01176 264.51);
  /* MARKA gradyani (logo). Ayri token cunku koyu temada --accent PARLAK
     (#4d94ff) ve icindeki BEYAZ simge uzerinde 2.72:1 kaliyordu — arayuz
     esigi 3:1'in altinda. Koyu temada ayni HUE'nun doygun tonu kullanilir:
     marka rengi degismez, yalnizca parlaklik duser. */
  --marka-1:     var(--accent);
  --marka-2:     var(--violet);
  /* Yan panel TEPSI zemini (bloklar bunun uzerinde beyaz kart).
     Once panel de bloklar da --card2 idi: tek duz bej leke. */
  --panel-ust: #f5f6f8;
  --panel-ust: oklch(97.295% 0.00287 264.54);
  --panel-alt: #eaedf2;
  --panel-alt: oklch(94.525% 0.00746 260.73);

  /* murekkep */
  /* SAF SIYAH/BEYAZ YOK — her notr tintli. Bu tek saf griydi (#0b0b0b);
     palet sicak krem oldugu icin metin de sicak tarafa cekildi.
     Olculdu: kontrast 16.37 -> 16.31, fark yok. */
  --text: #0c0b09;
  --text: oklch(14.997% 0.00458 84.89);
  /* Renkli zemin uzerindeki metin/ikon. Saf #fff yerine cok hafif soguk
     beyaz: zeminler mavi/mor, bu ton onlarla ayni ailede kalir. */
  --ink-ters: #fbfcfe;
  --ink-ters: oklch(99.087% 0.00286 264.54);
  --muted: #52514e;
  --muted: oklch(43.488% 0.00502 91.51);
  /* ACIK temada 3.15 veriyordu (WCAG siniri 4.5) — brand-sub, foot-note,
     hl-code, ik-not gibi butun ikincil metinler okunmuyordu. 4.56'ya
     cikarildi; hala "silik" ama artik okunabilir. Koyu temadaki deger
     zaten 5.38 veriyor, ona dokunulmadi. */
  --faint: #6a6860;
  --faint: oklch(51.661% 0.01257 95.3);

  /* marka / durum — canlı, doygun tonlar */
  --accent: #4338ca;
  --accent: oklch(43.28% 0.20988 285.03);
  --accent-strong: #312e81;
  --accent-strong: oklch(33.06% 0.15676 284.7);
  --accent-soft:   rgba(22, 104, 227, 0.13);
  --accent-ring:   rgba(22, 104, 227, 0.42);
  --ok: #00a63e;
  --ok: oklch(63.198% 0.18597 147.37);
  --ok-strong: #00782d;
  --ok-strong: oklch(49.94% 0.14484 147.92);
  --ok-soft:   rgba(0, 166, 62, 0.15);
  --warn: #f59e0b;
  --warn: oklch(76.859% 0.16466 70.08);
  --warn-soft: rgba(245, 158, 11, 0.20);
  /* Isaretlenen kelime: --warn-soft (0.20) cumle zemininden yalnizca
     1.13:1 ayriliyordu, yani isaret pratikte gorunmuyordu. */
  --isaret-bg:  rgba(245, 158, 11, 0.45);
  --warn-ink: #8a5300;
  --warn-ink: oklch(49.402% 0.10925 66.91);
  --bad: #e02424;
  --bad: oklch(58.306% 0.21996 27.53);
  /* Hata panelinin cercevesi: doygun kirmizi ALARM etkisi yapiyordu.
     Ayri token, cunku uc temada ayri deger ister (bkz. .fb-ai-bad). */
  --bad-line:   rgba(224, 36, 36, 0.34);
  --bad-strong: #b01818;
  --bad-strong: oklch(48.568% 0.18491 27.7);
  --bad-soft:   rgba(224, 36, 36, 0.13);
  --violet: #6d28d9;
  --violet: oklch(49.067% 0.24123 292.58);
  --violet-soft: rgba(109, 40, 217, 0.13);

  /* METAL — rozet kademesi (bronz/gumus/altin). Renk METALDIR, aile
     rengi degil; ikisi karisirsa "hangi aile" ile "hangi basamak"
     ayrimi kayboluyor. Karsilik gelen -yz tonu YAZI icindir: ham metal
     acik temada kart uzerinde 4.5:1'i tutturamiyor. */
  --metal-bronz: #a8703f;
  --metal-gumus: #7f8798;
  --metal-altin: #b8901f;
  --metal-bronz-yz: #7d4f27;
  --metal-gumus-yz: #5c6373;
  --metal-altin-yz: #7d6210;

  /* ===== ILERLEME DILI — uc anlam, uc renk, uc sembol =====
     Kullanicinin BUTUN yapiyi renkten okuyabilmesi icin her kavramin
     TEK rengi ve TEK ikonu var. Ekranlar arasi degismez:

       yeni   · nötr gri  · ikon "eye"       -> henuz oturmamis, yargi YOK
       yolda  · amber     · ikon "hourglass" -> calisiliyor / sirasi geliyor
       ogren  · yesil     · ikon "check"     -> oturdu (kutu 4+, S >= 14 gun)

     KIRMIZI BU DILDE YOK. Eskiden kutu 0-1 --bad ile ciziliyordu: bugun
     basladigin kelime "hata" rengindeydi. Yeni olmak hata degil.
     Kirmizi yalnizca gercek yanlisa (cevap hatasi) ayrildi.

     Acik temada cubuk renkleri KOYU varyanttir: olculdu, --ok #00a63e
     rayda (--card2) yalnizca 2.85:1, --warn ise 1.90:1 veriyordu — yani
     mevcut cubuklar acik temada neredeyse gorunmuyordu. */
  --ilerleme-yeni: #4a54c9;   /* indigo · kart 5.71:1 · kart2 5.13:1 */
  --ilerleme-yeni: oklch(50.625% 0.17949 274.33);
  --ilerleme-yolda: #8a5300;   /* ray 5.60:1 · kart 6.17:1 */
  --ilerleme-yolda: oklch(49.402% 0.10925 66.91);
  --ilerleme-ogren: #00782d;   /* ray 4.99:1 · kart 5.49:1 */
  --ilerleme-ogren: oklch(49.94% 0.14484 147.92);
  --zebra: rgba(11,11,11,0.030);

  /* ===== CAM YUZEY (ikon kapsayicilari) =====
     Cizgi ikonun KENDISI cam olamaz — o bir kontur, hacmi yok. Hacim
     KAPSAYICIDA kurulur: ustten gelen isik (parlak), alt ic golge (derinlik),
     ince kenar ve arkayi bulaniklastirma. Ikon konturu uzerinde kalir.
     Koyu temada beyaz cok daha zayif; guclu beyaz koyu yuzeyde ucuz durur. */
  --cam-parlak: rgba(255,255,255,0.62);
  --cam-sonme:  rgba(255,255,255,0.05);
  --cam-kenar:  rgba(255,255,255,0.55);
  --cam-ust:    rgba(255,255,255,0.80);
  --cam-alt:    rgba(11,11,11,0.07);
  --cam-golge:  0 2px 5px rgba(11,11,11,0.10);
  /* Kapsayicisi OLMAYAN satir ici ikonlar icin: konturu takip eden 1px
     sert isik cizgisi. Bulanik golge degil — 11-14px ikonda bulaniklik
     kir gibi durur. Bu cizgi ikonu yuzeye oyulmus gibi gosterir. */
  --ikon-kabartma: rgba(255,255,255,0.75);

  /* golgeler */
  /* DERINLIK OLCEGI — uc kademe, hepsi KATMANLI (yakin+uzak golge).
     Tek golgeli yuzeyler duz gorunuyor; iki katman "isik yukaridan" hissi
     verir ve yuzeyleri birbirinden ayirir. */
  --shadow-1:    0 1px 2px rgba(11,11,11,0.05);                                    /* dokunulabilir yuzey */
  --shadow-card: 0 1px 3px rgba(11,11,11,0.07);
  --shadow-pop:  0 12px 40px -8px rgba(11,11,11,0.28);
  /* Ust kenar vurgusu: yuzeyin ustune dusen isik. Premium arayuzlerin
     kart/dugme kenarlarindaki o ince acik cizgi. */
  --kenar-isik:  inset 0 1px 0 rgba(255,255,255,0.55);
  /* Odak halkasi TEK yerden — dagilmis 4 farkli tanim vardi */
  --odak: 0 0 0 3px var(--accent-ring);

  /* YAZI AILESI — TEK KAYNAK.
     Ayni font sekiz ayri yerde farkli yedek zinciriyle yaziliydi
     ('Manrope, system-ui, sans-serif' vs govdedeki uzun zincir): Manrope
     yuklenmezse ekranin bir kismi baska yedege duserdi.
     TEK AILE: Manrope. Hikaye/kitap metni icin ayri bir serif (Lora)
     vardi, kaldirildi — kullanici karari. --font-okuma adi duruyor cunku
     okuma baglamlarinin satir yuksekligi ve punto ayari farkli; aile
     ayni. Ikinci bir yazi ailesi EKLEME. */
  --font-ui: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-okuma: var(--font-ui);

  /* Satir yuksekligi: alti farkli deger vardi, uc kademeye indirildi */
  --lh-sik:    1.3;    /* basliklar */
  --lh-normal: 1.5;    /* arayuz metni */
  --lh-rahat:  1.65;   /* okuma metni, aciklamalar */

  /* isi haritasi (tek renk tonu, aciktan koyuya) */
  --heat0: #eceae3;
  --heat0: oklch(93.666% 0.00959 93.57);
  --heat1: #a8e6bd;
  --heat1: oklch(87.189% 0.08475 155.3);
  --heat2: #52c97e;
  --heat2: oklch(74.945% 0.15258 152.94);
  --heat3: #16a34a;
  --heat3: oklch(62.705% 0.16991 149.21);
  --heat4: #04752f;
  --heat4: oklch(49.133% 0.13871 148.54);

  /* sozcuk turu rozetleri: DOLGU renk + kontrast murekkep (canlı, hepsi >=4.5:1) */
  --pos-n-bg: #1668e3;  --pos-n-ink: var(--ink-ters);
  --pos-n-bg: oklch(54.646% 0.20176 259.6);
  --pos-v-bg: #e02424;  --pos-v-ink: var(--ink-ters);
  --pos-v-bg: oklch(58.306% 0.21996 27.53);
  --pos-adj-bg: #077d45;  --pos-adj-ink: var(--ink-ters);
  --pos-adj-bg: oklch(51.847% 0.12797 154.26);
  --pos-adv-bg: #f59e0b;  --pos-adv-ink: #3d2600;
  --pos-adv-bg: oklch(76.859% 0.16466 70.08);
  --pos-prep-bg: #6d28d9;  --pos-prep-ink:var(--ink-ters);
  --pos-prep-bg: oklch(49.067% 0.24123 292.58);
  --pos-phr-bg: #c2410c;  --pos-phr-ink: var(--ink-ters);
  --pos-phr-bg: oklch(55.343% 0.17386 38.4);
  --pos-pron-bg: #db2777;  --pos-pron-ink:var(--ink-ters);
  --pos-pron-bg: oklch(59.165% 0.21798 0.58);
  --pos-int-bg: #7c3aed;  --pos-int-ink: var(--ink-ters);
  --pos-int-bg: oklch(54.134% 0.24659 293.01);
  --pos-x-bg: #64748b;  --pos-x-ink: var(--ink-ters);
  --pos-x-bg: oklch(55.439% 0.04072 257.42);

  /* ikon kutusu zeminleri: rozet dolgusu değil, yumuşak ton gerekiyor */
  --tint-blue:   rgba(22, 104, 227, 0.13);
  --tint-violet: rgba(109, 40, 217, 0.13);
  --tint-neutral:rgba(100, 116, 139, 0.13);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e1117;
  --page: oklch(17.729% 0.01335 264.15);
  --page-glass:  rgba(14, 17, 23, 0.80);
  --card: #1a212a;
  --card: oklch(24.499% 0.02005 254.87);
  --card2: #262e3b;
  --card2: oklch(29.935% 0.02621 260.04);
  --line: #2b333f;
  --line: oklch(31.87% 0.02418 258.36);
  --line-strong: #3a4453;
  --line-strong: oklch(38.379% 0.02885 258.36);
  --btn-line: #6b7789;
  --btn-line: oklch(56.572% 0.03139 258.37);
  /* bkz. acik tema notu — olculdu: cevap alaninda 3.83, havuzda 5.03 */
  --chip-line: #84847f;
  --chip-line: oklch(61.181% 0.0074 106.62);
  --cip-yuzey: #2a323f;
  --cip-yuzey: oklch(31.524% 0.02587 260.06);
  --cip-kenar: #39424f;
  --cip-kenar: oklch(37.617% 0.02533 257.52);
  --marka-1: #1668e3;   /* bkz. acik tema notu: beyaz simge okunur kalsin */
  --marka-1: oklch(54.646% 0.20176 259.6);
  --marka-2: #6d3fd4;
  --marka-2: oklch(51.079% 0.21397 291.01);
  --panel-ust: #212836;
  --panel-ust: oklch(27.653% 0.02791 263.96);
  --panel-alt: #1a1f29;
  --panel-alt: oklch(23.889% 0.02067 264.07);
  --text: #dfe4ec;
  --text: oklch(91.738% 0.01213 259.82);
  --ink-ters: #fbfcfe;   /* bkz. acik tema notu — saf #fff kullanilmaz */
  --ink-ters: oklch(99.087% 0.00286 264.54);
  --muted: #a3acbc;
  --muted: oklch(74.24% 0.02519 262.07);
  --faint: #8d97a8;
  --faint: oklch(67.398% 0.02766 261.12);
  --accent: #a5b4fc;
  --accent: oklch(78.63% 0.09713 286.12);
  --accent-strong: #1668e3;
  --accent-strong: oklch(54.646% 0.20176 259.6);
  --accent-soft:   rgba(91, 157, 255, 0.18);
  --accent-ring:   rgba(91, 157, 255, 0.45);
  --ok: #4bd08d;
  --ok: oklch(76.799% 0.1515 157.57);
  --ok-strong: #2a9d63;
  --ok-strong: oklch(61.862% 0.13389 156.28);
  --ok-soft:   rgba(75, 208, 141, 0.16);
  --warn: #f0b429;
  --warn: oklch(80.448% 0.15576 82.54);
  --warn-soft: rgba(240, 180, 41, 0.15);
  --isaret-bg:  rgba(240, 180, 41, 0.32);
  --warn-ink: #f5cf7a;
  --warn-ink: oklch(86.938% 0.11254 85.99);
  --bad: #f2777f;
  --bad: oklch(71.371% 0.15125 17.65);
  --bad-line:   rgba(242, 119, 127, 0.34);
  --bad-strong: #e0555f;
  --bad-strong: oklch(63.545% 0.17324 19.31);
  --bad-soft:   rgba(242, 119, 127, 0.14);
  --violet: #a996f5;
  --violet: oklch(72.773% 0.13605 291.85);
  --violet-soft: rgba(169, 150, 245, 0.16);

  /* Metal — koyu temada aydinlanir; yazi tonu de acilir (bkz. :root) */
  --metal-bronz: #d09563;
  --metal-gumus: #aab3c4;
  --metal-altin: #e0b64a;
  --metal-bronz-yz: #e0ad82;
  --metal-gumus-yz: #c3cbd9;
  --metal-altin-yz: #eccb75;

  /* Ilerleme dili — koyu temada taban tonlar yeterli (bkz. :root aciklamasi) */
  --ilerleme-yeni: #8b95ff;   /* indigo · kart 6.06:1 · kart2 5.10:1 */
  --ilerleme-yeni: oklch(70.817% 0.15399 277.62);
  --ilerleme-yolda: #f0b429;   /* ray 9.32:1 · kart 10.43:1 */
  --ilerleme-yolda: oklch(80.448% 0.15576 82.54);
  --ilerleme-ogren: #4bd08d;   /* ray 7.81:1 · kart 8.75:1 */
  --ilerleme-ogren: oklch(76.799% 0.1515 157.57);
  --zebra: rgba(255,255,255,0.030);

  /* Cam — koyu temada beyaz ZAYIF (bkz. :root aciklamasi) */
  --cam-parlak: rgba(255,255,255,0.10);
  --cam-sonme:  rgba(255,255,255,0.01);
  --cam-kenar:  rgba(255,255,255,0.10);
  --cam-ust:    rgba(255,255,255,0.14);
  --cam-alt:    rgba(0,0,0,0.28);
  --cam-golge:  0 2px 6px rgba(0,0,0,0.38);
  --ikon-kabartma: rgba(0,0,0,0.55);
  --shadow-1:    0 1px 2px rgba(0,0,0,0.45);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-pop:  0 16px 48px -8px rgba(0,0,0,0.7);
  /* Koyu temada ust kenar isigi cok daha zayif olmali — beyaz cizgi
     koyu yuzeyde ucuz gorunur. */
  --kenar-isik:  inset 0 1px 0 rgba(255,255,255,0.06);
  --heat0: #252c37;
  --heat0: oklch(29.121% 0.02247 259.36);
  --heat1: #173f2c;
  --heat1: oklch(33.282% 0.05678 160.29);
  --heat2: #2a9d63;
  --heat2: oklch(61.862% 0.13389 156.28);
  --heat3: #4bd08d;
  --heat3: oklch(76.799% 0.1515 157.57);
  --heat4: #7fdcae;
  --heat4: oklch(82.399% 0.11135 161.07);
  /* koyu temada PARLAK zemin + koyu murekkep: hem daha canlı hem okunaklı */
  --pos-n-bg: #5aa0ff;  --pos-n-ink:   #06213f;
  --pos-n-bg: oklch(70.324% 0.15697 256.59);
  --pos-v-bg: #ff7b7b;  --pos-v-ink:   #3d0a0a;
  --pos-v-bg: oklch(73.625% 0.16138 21.8);
  --pos-adj-bg: #45d98a;  --pos-adj-ink: #04301a;
  --pos-adj-bg: oklch(78.84% 0.16837 155.5);
  --pos-adv-bg: #f0b429;  --pos-adv-ink: #3d2600;
  --pos-adv-bg: oklch(80.448% 0.15576 82.54);
  --pos-prep-bg: #a996f5;  --pos-prep-ink:#24104d;
  --pos-prep-bg: oklch(72.773% 0.13605 291.85);
  --pos-phr-bg: #fb8b4c;  --pos-phr-ink: #3d1a05;
  --pos-phr-bg: oklch(74.777% 0.15632 48.1);
  --pos-pron-bg: #f472b6;  --pos-pron-ink:#4a0f2c;
  --pos-pron-bg: oklch(72.527% 0.17523 349.76);
  --pos-int-bg: #b39cff;  --pos-int-ink: #24104d;
  --pos-int-bg: oklch(75.198% 0.14088 293.4);
  --pos-x-bg: #9ca3af;  --pos-x-ink:   #1f2328;
  --pos-x-bg: oklch(71.366% 0.01918 261.32);
  --tint-blue:   rgba(91, 157, 255, 0.18);
  --tint-violet: rgba(169, 150, 245, 0.16);
  --tint-neutral:rgba(133, 143, 160, 0.18);
}

/* Sistem koyu temadaysa ve kullanici acikca "acik" secmediyse koyu degerler */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0e1117;
    --page: oklch(17.729% 0.01335 264.15);
    --page-glass:  rgba(14, 17, 23, 0.80);
    --card: #1a212a;
    --card: oklch(24.499% 0.02005 254.87);
    --card2: #262e3b;
    --card2: oklch(29.935% 0.02621 260.04);
    --line: #2b333f;
    --line: oklch(31.87% 0.02418 258.36);
    --line-strong: #3a4453;
    --line-strong: oklch(38.379% 0.02885 258.36);
    --btn-line: #6b7789;
    --btn-line: oklch(56.572% 0.03139 258.37);
    --chip-line: #84847f;
    --chip-line: oklch(61.181% 0.0074 106.62);
    --cip-yuzey: #2a323f;
    --cip-yuzey: oklch(31.524% 0.02587 260.06);
    --cip-kenar: #39424f;
    --cip-kenar: oklch(37.617% 0.02533 257.52);
    --marka-1: #1668e3;
    --marka-1: oklch(54.646% 0.20176 259.6);
    --marka-2: #6d3fd4;
    --marka-2: oklch(51.079% 0.21397 291.01);
    --panel-ust: #212836;
    --panel-ust: oklch(27.653% 0.02791 263.96);
    --panel-alt: #1a1f29;
    --panel-alt: oklch(23.889% 0.02067 264.07);
    --text: #dfe4ec;
    --text: oklch(91.738% 0.01213 259.82);
    --ink-ters: #fbfcfe;
    --ink-ters: oklch(99.087% 0.00286 264.54);
    --muted: #a3acbc;
    --muted: oklch(74.24% 0.02519 262.07);
    --faint: #8d97a8;
    --faint: oklch(67.398% 0.02766 261.12);
    --accent: #a5b4fc;
    --accent: oklch(78.63% 0.09713 286.12);
    --accent-strong: #1668e3;
    --accent-strong: oklch(54.646% 0.20176 259.6);
    --accent-soft:   rgba(91, 157, 255, 0.18);
    --accent-ring:   rgba(91, 157, 255, 0.45);
    --ok: #4bd08d;
    --ok: oklch(76.799% 0.1515 157.57);
    --ok-strong: #2a9d63;
    --ok-strong: oklch(61.862% 0.13389 156.28);
    --ok-soft:   rgba(75, 208, 141, 0.16);
    --warn: #f0b429;
    --warn: oklch(80.448% 0.15576 82.54);
    --warn-soft: rgba(240, 180, 41, 0.15);
    --isaret-bg:  rgba(240, 180, 41, 0.32);
    --warn-ink: #f5cf7a;
    --warn-ink: oklch(86.938% 0.11254 85.99);
    --bad: #f2777f;
    --bad: oklch(71.371% 0.15125 17.65);
    --bad-line:   rgba(242, 119, 127, 0.34);
    --bad-strong: #e0555f;
    --bad-strong: oklch(63.545% 0.17324 19.31);
    --bad-soft:   rgba(242, 119, 127, 0.14);
    --violet: #a996f5;
    --violet: oklch(72.773% 0.13605 291.85);
    --violet-soft: rgba(169, 150, 245, 0.16);

  /* Metal — koyu temada aydinlanir; yazi tonu de acilir (bkz. :root) */
  --metal-bronz: #d09563;
  --metal-gumus: #aab3c4;
  --metal-altin: #e0b64a;
  --metal-bronz-yz: #e0ad82;
  --metal-gumus-yz: #c3cbd9;
  --metal-altin-yz: #eccb75;

    /* Ilerleme dili — koyu temada taban tonlar yeterli (bkz. :root aciklamasi) */
    --ilerleme-yeni: #8b95ff;   /* indigo · kart 6.06:1 · kart2 5.10:1 */
    --ilerleme-yeni: oklch(70.817% 0.15399 277.62);
    --ilerleme-yolda: #f0b429;   /* ray 9.32:1 · kart 10.43:1 */
    --ilerleme-yolda: oklch(80.448% 0.15576 82.54);
    --ilerleme-ogren: #4bd08d;   /* ray 7.81:1 · kart 8.75:1 */
    --ilerleme-ogren: oklch(76.799% 0.1515 157.57);
    --zebra: rgba(255,255,255,0.030);

    /* Cam — koyu tema */
    --cam-parlak: rgba(255,255,255,0.10);
    --cam-sonme:  rgba(255,255,255,0.01);
    --cam-kenar:  rgba(255,255,255,0.10);
    --cam-ust:    rgba(255,255,255,0.14);
    --cam-alt:    rgba(0,0,0,0.28);
    --cam-golge:  0 2px 6px rgba(0,0,0,0.38);
    --ikon-kabartma: rgba(0,0,0,0.55);
    --shadow-1:    0 1px 2px rgba(0,0,0,0.45);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-pop:  0 16px 48px -8px rgba(0,0,0,0.7);
    --kenar-isik:  inset 0 1px 0 rgba(255,255,255,0.06);
    --heat0: #252c37;
    --heat0: oklch(29.121% 0.02247 259.36);
    --heat1: #173f2c;
    --heat1: oklch(33.282% 0.05678 160.29);
    --heat2: #2a9d63;
    --heat2: oklch(61.862% 0.13389 156.28);
    --heat3: #4bd08d;
    --heat3: oklch(76.799% 0.1515 157.57);
    --heat4: #7fdcae;
    --heat4: oklch(82.399% 0.11135 161.07);
    --pos-n-bg: #5aa0ff;  --pos-n-ink:   #06213f;
    --pos-n-bg: oklch(70.324% 0.15697 256.59);
    --pos-v-bg: #ff7b7b;  --pos-v-ink:   #3d0a0a;
    --pos-v-bg: oklch(73.625% 0.16138 21.8);
    --pos-adj-bg: #45d98a;  --pos-adj-ink: #04301a;
    --pos-adj-bg: oklch(78.84% 0.16837 155.5);
    --pos-adv-bg: #f0b429;  --pos-adv-ink: #3d2600;
    --pos-adv-bg: oklch(80.448% 0.15576 82.54);
    --pos-prep-bg: #a996f5;  --pos-prep-ink:#24104d;
    --pos-prep-bg: oklch(72.773% 0.13605 291.85);
    --pos-phr-bg: #fb8b4c;  --pos-phr-ink: #3d1a05;
    --pos-phr-bg: oklch(74.777% 0.15632 48.1);
    --pos-pron-bg: #f472b6;  --pos-pron-ink:#4a0f2c;
    --pos-pron-bg: oklch(72.527% 0.17523 349.76);
    --pos-int-bg: #b39cff;  --pos-int-ink: #24104d;
    --pos-int-bg: oklch(75.198% 0.14088 293.4);
    --pos-x-bg: #9ca3af;  --pos-x-ink:   #1f2328;
    --pos-x-bg: oklch(71.366% 0.01918 261.32);
    --tint-blue:   rgba(91, 157, 255, 0.18);
    --tint-violet: rgba(169, 150, 245, 0.16);
    --tint-neutral:rgba(133, 143, 160, 0.18);
  }
}

/* =====================================================================
   Temel
   ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cizgi ikonlar: metin rengini alir, emoji yok */
.ic {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  display: inline-block;
  flex-shrink: 0;
}
h1 .ic, h2 .ic { width: 1.05em; height: 1.05em; color: var(--accent); }

button { font-family: inherit; font-size: inherit; }
::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid var(--page); }

/* =====================================================================
   Yerlesim: sol menu + tam genislik icerik
   ===================================================================== */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--mo-hizli) ease;
}
.layout > * { min-width: 0; }

/* ---- daraltılmış kenar menü (ray) ---- */
.layout.rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.layout.rail .brand-text,
.layout.rail .tab > span:not(.badge),
.layout.rail .who-name,
.layout.rail .who .linkish,
/* `.foot-note` ARTIK BU LISTEDE DEGIL: meta satiri kenar menuden sayfa
   footer'ina tasindi. Ray modu yalnizca MENUYU daraltir; sayfanin dibi
   onunla ilgili degil ve gizlenmesi icin bir sebep yok. */
.layout.rail .sync-state { display: none; }

.layout.rail .brand { justify-content: center; position: relative; }
.layout.rail .sidebar { padding-left: var(--sp-2); padding-right: var(--sp-2); align-items: center; }
.layout.rail .tabs { width: 100%; }
.layout.rail .tab { justify-content: center; padding: 0; width: 100%; }
.layout.rail .tab .badge {
  position: absolute; top: 4px; right: 6px;
  min-width: 16px; height: 16px; font-size: var(--fs-xs); line-height: 1; padding: 0 4px;
}
.layout.rail .tab { position: relative; }
.layout.rail .who { justify-content: center; padding: var(--sp-2); }
.layout.rail .theme-btn { justify-content: center; padding: 0; }
.layout.rail .theme-btn span, .layout.rail .theme-btn { font-size: 0; }
.layout.rail .theme-btn .ic { font-size: initial; }
/* Menu daralinca ok TERS doner: '<' daralt, '>' genislet. */
.layout.rail .rail-toggle svg { transform: rotate(180deg); }

/* MENU TETIGI — ust seritte, basligin solunda (bkz. index.html notu).
   Mutlak konum YOK, z-index oyunu YOK: topbar'in kendi akisinda duruyor.
   Gorunum ikon dugmesiyle ayni ki arayuzde yabanci durmasin. */
.rail-toggle {
  flex-shrink: 0;
  padding: 0;                /* tarayici <button> varsayilani 1px/6px verir */
  width: var(--icon-box); height: var(--icon-box);
  display: flex; align-items: center; justify-content: center;
  background-color: var(--card2);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--mo-hizli) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis);
}
.rail-toggle:hover { color: var(--accent); border-color: var(--accent); }
.rail-toggle svg { width: 17px; height: 17px; }

/* KENAR MENU KENDI ICERIGINI KIRPIYORDU. `height: 100vh` vardi ama
   `overflow` YOKTU: sekmeler + alt blok ekrana sigmayinca en alttaki
   satir sessizce kesiliyordu. Olculdu — 1920×660'ta 152px, 1440×700'de
   112px tasma ve son oge GORUNMUYOR. Kullanici tam bunu bildirdi:
   "sidebar alti bir tuhaf duruyor."
   `dvh` `vh`'den SONRA yazilir (mobil tarayici cubugu; tanimayan
   tarayici vh'de kalir). */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-4);
  background: var(--card);
  border-right: 1px solid var(--line);
}
/* KAYAN YALNIZCA SEKME LISTESI. Menunun tamamini kaydirmak marka
   blogunu ve cikis/tema dugmelerini de goturuyor; onlar sabit kalmali,
   yalnizca uzayan liste kaymali (pencere govdesiyle ayni desen).
   `min-height: 0` SART — flex ogesi varsayilan olarak icerigi kadar
   kucululmez ve `overflow` hic devreye girmez. */
.sidebar > .tabs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
.brand-logo {
  width: 42px; height: 42px; border-radius: var(--r-md);
  /* TEK MARKA RENGI — mavi→mor degrade KALDIRILDI (kullanici karari:
     projede gradyan renklendirme yok). Marka kimligini simgenin FORMU
     tasiyor; `--marka-2` mor artik yalnizca token olarak duruyor. */
  background: var(--marka-1);
  color: var(--ink-ters);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px -2px var(--accent-ring);
}
.brand-logo svg { width: 22px; height: 22px; }
/* Ray düğmesi yer kapladığı için metin bloğu daralabilmeli — taşarsa kırpılır,
   marka adı ASLA iki satıra kırılmaz */
.brand-text { min-width: 0; flex: 1; }
.brand-name {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--fs-xs); color: var(--faint); margin-top: var(--sp-1); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs { display: flex; flex-direction: column; gap: var(--sp-1); }
.tab {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  border: none; border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-weight: 600; font-size: var(--fs-base);
  cursor: pointer;
  transition: background var(--mo-hizli), color var(--mo-hizli);
}
.tab:hover { background: var(--card2); color: var(--text); }
.tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent-ring);
}
.tab .badge {
  margin-left: auto;
  background: var(--warn);
  color: #3a2a00;
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.theme-btn {
  width: 100%;
  height: var(--ctrl-h);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card2);
  color: var(--muted);
  font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--mo-hizli), color var(--mo-hizli);
}
.theme-btn:hover { border-color: var(--accent); color: var(--text); }
.foot-note { font-size: var(--fs-xs); color: var(--faint); line-height: 1.5; padding: 0 var(--sp-1); }

/* ---- icerik sutunu ---- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  /* space-between UC ogeyi birbirinden ITIYORDU: tetik solda, baslik
     ORTADA kaliyordu ve aralari kocaman aciliyordu. Tetik basligin
     HEMEN yaninda olmali; haplar saga yaslanir. */
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8);
  min-height: 76px;
  background: var(--page-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; }
.page-sub { font-size: var(--fs-sm); color: var(--faint); margin-top: var(--sp-1); }

.top-stats { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.stat-pill {
  --tile-bg: var(--tint-neutral);
  --tile-ink: var(--muted);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  height: var(--ctrl-h);
  padding: 0 var(--sp-4) 0 var(--sp-1);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,11,11,0.04);
  transition: transform var(--mo-hizli), border-color var(--mo-hizli);
}
.stat-pill:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.stat-pill .sp-ic {
  width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0;
  /* `--tile-bg` %13-20 alfali bir tint; hapin beyaz zemininde neredeyse
     gorunmuyordu (olculdu: doygunluk 29). Kimlik renginden turetilir. */
  background: var(--tile-ink);
  color: var(--ink-ters);
  display: flex; align-items: center; justify-content: center;
}
.stat-pill .sp-ic .ic { width: 16px; height: 16px; }
.stat-pill .sp-tx { display: flex; flex-direction: column; line-height: 1.2; }
.stat-pill .sp-tx b { font-size: var(--fs-base); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-pill .sp-tx i {
  /* OLCEK DISINA CIKMA: en kucuk basamak --fs-xs (11px). Once 9.5px,
     sonra 10px yazilmisti; ikisi de olcegin disinda ve cihaz taramasinda
     her ekranda "11px alti yazi" olarak cikiyordu. */
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  color: var(--faint); text-transform: uppercase; letter-spacing: 0.7px;
}
.stat-pill .sp-dim { color: var(--faint); font-weight: 600; font-size: var(--fs-sm); }

.view { padding: var(--view-pad-y) var(--view-pad-x) var(--sp-10); }

/* =====================================================================
   SAYFA DIBI (.app-foot)
   Onceden HICBIR SEY yoktu: en alttaki kart ekranin kenarina dayanip
   bitiyor, sayfa bir yerde "kesiliyordu". Bir footer sayfayi KAPATIR —
   goz nerede duracagini bilir.

   `margin-top: auto`: `.main` zaten flex sutun ve `.layout` 100vh
   taban veriyor. Kisa sayfada (Tekrar ekrani gibi) footer EKRANIN
   DIBINE yaslanir, uzun sayfada icerigin ardindan gelir — ikisinde de
   dogru yerde durur. `position: fixed` DEGIL: sabit bir serit her
   ekranda yer yer ve kaydirilan icerigi kirpardi.
   ===================================================================== */
.app-foot {
  margin-top: auto;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-5) var(--view-pad-x);
  border-top: 1px solid var(--line);
  /* Zemin ana yuzeyden BIR TON ayrisir — cizgi tek basina "burasi
     bitti" demiyor, yuzey degisimi diyor (kart ritmindeki desen). */
  background: var(--card2);
  color: var(--faint);
}
.af-mark {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--marka-1);
}
.af-mark svg { width: 100%; height: 100%; }
.af-ad { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
/* Meta satiri kalan alani alir ve SAGA yaslanir; dar ekranda alt
   satira iner (flex-wrap). Kendi punto/rengi `.foot-note`tan gelir. */
.app-foot .foot-note { margin-left: auto; text-align: right; }

/* ODAK MODU — karsilama akisi. O ekranin kurali "tek kart, TEK EKRAN";
   footer 76px ekleyip 390×844'te sayfayi 920px'e cikariyor ve akis
   kaydirma istiyordu. Onboarding'de kimlik seridinin isi yok. */
.layout.odak .app-foot { display: none; }

/* =====================================================================
   Kartlar ve bolumler
   ===================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.card > *:last-child { margin-bottom: 0; }

/* YÜZEY KADEMESİ — hepsi kart olursa hiçbiri kart değildir.
   Ölçüldü (Bugün ekranı): dört kartın dördü de aynı zemin, aynı çerçeve,
   aynı gölge, aynı dolguydu. Göz hangisinin eylem hangisinin referans
   olduğunu ayıramıyor, sayfa bir yönetim paneli gibi okunuyordu.

   Üç kademe:
     .card.hero    yükseltilmiş — günün tek eylemi
     .card         normal       — bir işi olan bölüm
     .card.sessiz  yüzeysiz     — okunacak liste (bugünün kelimeleri)

   `.sessiz` KENDİ yüzeyini bırakır: içindeki kelime kartları zaten
   yüzey taşıyor, ikisi üst üste gelince gereksiz bir kat daha oluyordu
   (bkz. "kart içinde kart yok" kuralı). Başlık bölüm etiketine döner. */
.card.sessiz {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Kart başlığı: ikon + metin aynı hizada, altında tek adım boşluk */
/* KART BAŞLIĞI — sistematik: ikon tint kutusunda, başlık ve açıklama arasında
   net hiyerarşi. Çıplak ikon + kalın metin "yazılmış" duruyordu; kutu ikonu
   başlığa bağlar ve kartın kimliğini verir. */
.card h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  /* SERIF DENENDI, GERI ALINDI. Basliklar bir sure Lora'ydi; kullanici
     tek font istedi. Hiyerarsi artik AILEDEN degil punto ve agirliktan
     geliyor — buraya ikinci bir font-family yazma. */
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.2px;
  line-height: 1.25;
}
/* KART BASLIGI IKONU — uygulamanin EN COK gorunen cipi: her kartin
   basinda duruyor. `--accent-soft` %13 alfali bir tint idi ve oteki
   cipler dolu kimlik rengine gecince TUTARSIZ kaldi (kullanici ekran
   goruntusuyle bildirdi: ayni ekranda ust baslik soluk lavanta, alttaki
   hikaye cipi dolu mor).
   Ayni desen: dolu renk + ters ikon; koyu temada --accent parlak
   oldugu icin ikon koyuya doner. */
.card h2 > .ic {
  width: 32px; height: 32px; flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--ink-ters);
  box-sizing: border-box;
}
:root[data-theme="dark"] .card h2 > .ic { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card h2 > .ic { color: #0f1720; }
}
/* Sayaç rozeti başlığın parçası ama sessiz kalmalı */
.card h2 .u-count { font-weight: 700; color: var(--faint); font-size: var(--fs-base); }

/* Tanım/açıklama metni: sol kenarda ince vurgu çizgisi — düz paragraftan
   ayrılır, "bunu bir kez oku" hissi verir. */
.card h2 + .sub { padding-left: var(--sp-4); border-left: 2px solid var(--line); }
.card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-5); line-height: 1.55; }

/* Izgaralar: aynı satırdaki kartlar eşit yükseklikte */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.two-col > .col { display: flex; flex-direction: column; min-width: 0; }
.two-col > .col > .card:last-child { margin-bottom: 0; }

/* IKI CIZELGE YAN YANA — AYNI BOYDA.
   "Sirada bekleyenler" ve "Kutu dagilimi" ayni satirdadir ama sag kartta
   bir de aciklama seridi (legend) var; sol kart kisa kaliyor ve altinda
   bos alan olusuyordu. Ustelik .two-col'un genel kurali `align-items:
   start` — kartlari ustten hizalar, boylari esitlemez. Bu ikisine OZEL
   sinif verildi: genel kurali degistirmek Bugun ve alistirma ekranlarini
   da etkilerdi. */
.two-col.iki-cizelge { align-items: stretch; }
.two-col.iki-cizelge > .col { height: 100%; }
/* Fazla yukseklik SATIRLARIN ARASINA dagilir, satirlarin KENDISINE degil.
   Once .bar-row'a flex:1 verilmisti: satirlar sisiyor ve icindeki cubuk
   ortada asili kaliyordu (tek satirli listede daha da belirgin).
   Simdi satirlar kendi boyunda; govde space-between ile araligi acar. */
.card.kart-yay { height: 100%; display: flex; flex-direction: column; }
.card.kart-yay > h2,
.card.kart-yay > .sub { flex: 0 0 auto; }
.card.kart-yay > .yay-govde {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-2);
}
/* govde icinde satir aralarini gap tasiyor — kendi margin'i sifirlanir */
.card.kart-yay > .yay-govde > .bar-row { margin-bottom: 0; }
/* Izgaranin ALT boslugu yoktu: sutundaki son kartin margin'i yukaridaki
   kuralla sifirlaniyor, izgaranin kendi boslugu da olmayinca two-col'un
   ALTINA gelen kart ustteki karta YAPISIYORDU (Tekrar ekraninda goruldu). */
.two-col { margin-bottom: var(--sp-5); }
.two-col:last-child { margin-bottom: 0; }
.split-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Flex: tek sayıda kart olduğunda son satır yarım kalmasın (bkz. .stat-grid) */
.settings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: stretch;
}
.settings-grid > .card {
  flex: 1 1 420px; min-width: 0;
  margin-bottom: 0; height: auto; display: flex; flex-direction: column;
}

/* ---- karsilama / hero ---- */

.hero {
  position: relative;
  overflow: hidden;
  border-color: var(--accent-ring);
  background:
    var(--card);
}
.hero .hero-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-6); flex-wrap: wrap;
}
.hero-ana { flex: 1 1 380px; min-width: 0; }

/* ÜST SATIR: selam + ortam. İkisi de BAĞLAM, eylem değil — bu yüzden
   gövde boyutunda ve sessiz tonda. Önce "Merhaba, Mesut" sayfadaki en
   büyük yazıydı (28px) ve hiçbir bilgi taşımıyordu; ekranın sebebi olan
   sayı ise 15px gövde metninin içine gömülüydü. */
.hero-ust {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.hero-greet { font-size: var(--fs-base); font-weight: 700; color: var(--muted); }
.hero-note { color: var(--muted); font-size: var(--fs-base); max-width: 62ch; }
.scene-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  /* Zemin --accent-soft (alfa .20) iken kontrast 4.31'di, WCAG siniri 4.5.
     Alfa .12'ye inince 4.9 oluyor — renk kimligi korunuyor, yazi okunur.
     color-mix desteklemeyen tarayici ust satiri kullanir. */
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent-ring);
  color: var(--accent);
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 700;
}

/* GÖSTERİ SAYISI — sayfada TEK bir sayı bu boyutta olur. */
.hero-sayac { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.hs-buyuk {
  font-size: var(--fs-4xl); font-weight: 800;
  letter-spacing: -2px; line-height: 1;
  /* Rakamlar eşit genişlikte: sayaç 9'dan 10'a geçerken satır zıplamasın */
  font-variant-numeric: tabular-nums;
}
.hs-bolu { font-size: var(--fs-xl); font-weight: 700; color: var(--faint); }
.hs-birim { font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.hs-tekrar .hs-buyuk { color: var(--warn); }
.hs-bitti .hs-buyuk { color: var(--ok); display: inline-flex; }
.hs-bitti .hs-buyuk .ic { width: var(--sp-10); height: var(--sp-10); }

/* GÜNÜN ADIMLARI — 10 kelimenin kaçına başlandığı. Çubuk DEĞİL segment:
   sağdaki --goal-bar 2000 kelimelik yolu çiziyor ve iki çubuk yan yana
   "hangisi hangisi" sorusunu doğuruyordu. Segment sayılabilir bir şeyi
   gösterir, oran değil. */
.hero-adim { display: flex; gap: var(--sp-1); margin: var(--sp-4) 0; flex-wrap: wrap; }
.hero-adim > i {
  flex: 1 1 var(--sp-3); min-width: var(--sp-3); max-width: var(--sp-8);
  height: var(--sp-1);
  border-radius: var(--r-full);
  background: var(--card2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--mo-orta) var(--mo-cikis);
}
.hero-adim > i.dolu { background: var(--accent); box-shadow: none; }

.hero .act { margin-top: var(--sp-5); }
/* `.act-more`ın `margin-left: auto`su GENİŞ bir araç çubuğu içindir:
   ikincil düğmeleri sağ kenara yaslar. Hero'nun sol sütununda o kenar
   yok, sonuç birincil düğmeyle ikincilin arasında kocaman bir boşluk
   oluyordu (ölçüldü: 1440px'te 170px). Burada düğmeler birlikte durur. */
.hero .act-more { margin-left: 0; }
/* Hero'nun ana eylemi büyük. `.act > *` kuralı çocuklara --ctrl-h
   dayatıyor; bu satır ondan SONRA ve daha özgül olduğu için kazanır. */
.act .btn-lg {
  padding: 0 var(--sp-6);
  font-size: var(--fs-md);
  border-radius: var(--r-md);
}
/* SATIRIN TAMAMI 52px — yalnız birincil düğmeyi büyütmek satırı bozuyor.
   Ölçüldü: 52px "Devam Et" yanında 42px "+10 Kelime" = 10px fark, ve
   "aynı satırdaki her kontrol aynı yükseklikte" kuralı bu yüzden var.
   Hiyerarşi BOYDAN değil dolgudan geliyor: birincil dolu vurgu renginde,
   ikincil düz. İkisi de 52px olunca satır hizalı, ana eylem yine baskın. */
.hero .act .btn,
.hero .act .durum-hap {
  height: var(--ctrl-h-lg); min-height: var(--ctrl-h-lg);
}

.hero-level { text-align: right; min-width: 260px; flex: 0 1 320px; }
.hero-level .hl-code { font-size: var(--fs-xs); color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.hero-level .hl-name { font-size: var(--fs-lg); font-weight: 800; margin: var(--sp-1) 0 var(--sp-3); }

.goal-bar {
  height: 12px;
  background: var(--card2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.goal-bar > div {
  height: 100%;
  /* DUZ DOLGU — mavi→yesil gecis YOK. Iki renk arasinda kayan bir cubuk
     "hangi renk ne demek" sorusunu doguruyordu: ilerleme dilinde yesil
     "ogrenilmis" demek ve cubugun ucu her zaman yesile donuyordu, oysa
     doluluk %5 de olabilir. */
  background: var(--accent);
  border-radius: var(--r-full);
  /* WIDTH DEGIL TRANSFORM (compositor). min-width: 6px kalkti — olcek
     uygulanan bir ogede minimum genislik ise yaramaz; cok kucuk oranin
     gorunur kalmasi artik JS tarafinda alt sinirla saglanir. */
  width: 100%;
  transform-origin: left center;
  transition: transform var(--mo-yavas) ease;
}
.goal-legend {
  display: flex; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--faint);
  margin-top: var(--sp-2);
}

/* ---- gunun plani ---- */

.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--card2);
}
.plan-check {
  width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 800;
  border: 2px solid var(--line-strong);
  color: var(--faint);
  background: var(--card);
}
li.plan-done .plan-check { background: var(--ok); border-color: var(--ok); color: var(--ink-ters); }
li.plan-done { background: var(--ok-soft); }
/* Gövde satırın esneyen parçası; düğme onun DIŞINDA duruyor (bkz. views.js) */
.plan-body { flex: 1; min-width: 0; }
.plan-body b { display: block; font-size: var(--fs-base); line-height: 1.35; }
/* BLOK: satır içi kalınca yanındaki düğmeyle aynı satır kutusunu
   paylaşıyor ve üst üste biniyorlardı. */
.plan-body span { display: block; font-size: var(--fs-sm); color: var(--muted); }
/* .notice ile aynı kural: BLOK + inline ikon. Flex olursa içindeki <b>
   etiketleri sütuna dönüşür (bkz. .notice açıklaması). */
.plan-streak {
  display: block;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-size: var(--fs-sm); font-weight: 600;
}
/* Ölçüt satırı — serinin NEYE göre arttığı görünür olmalı. Aynı hapın
   içinde, ikincil tonda: sayıyı okuyan gözü bölmeden hemen altında. */
.plan-streak .ps-olcut {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 500; opacity: 0.75;
}

/* =====================================================================
   Butonlar — hepsi aynı yükseklikte (--ctrl-h)
   ===================================================================== */

.btn {
  --edge: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctrl-h);
  padding: 0 var(--sp-5);
  /* Cerceve --line degildi gorunmuyordu: kart uzerinde ayrim 1.5'ti (WCAG
     arayuz ogesi siniri 3:1). --btn-line 3.1 verir. Zemin de --card2'ye
     alindi; tek basina yetmez ama cerceveyle birlikte butonu ayirir. */
  border: 1px solid var(--btn-line);
  background: var(--card2);
  color: var(--text);
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.1px;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--edge);
  transition: transform var(--mo-hizli), box-shadow var(--mo-hizli), border-color var(--mo-hizli), background var(--mo-hizli);
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--edge); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  --edge: var(--accent-strong);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-ters);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); border-color: var(--accent); }
/* KOYU TEMADA PARLAK ZEMIN -> KOYU YAZI. Accent koyu temada acik indigo
   (#a5b4fc); uzerine beyaz yazi konunca buton SOLUK ve okunmaz cikiyordu
   (ekran goruntusunde goruldu). .pos-badge'de zaten uygulanan kural:
   acik temada koyu zemin + beyaz yazi, koyu temada parlak zemin + koyu
   yazi. Kenar da koyu tarafa cekilir, yoksa buton zeminde kayboluyor. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  color: #1b1442;
  --edge: #cdd4fd;
  border-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) {
    color: #1b1442;
    --edge: #cdd4fd;
  }
}

.btn-next {
  --edge: var(--ok-strong);
  background: var(--ok-strong);
  border-color: var(--ok-strong);
  color: var(--ink-ters);
}
:root[data-theme="dark"] .btn-next { background: var(--ok-strong); }
.btn-next:hover:not(:disabled) { filter: brightness(1.1); }

.btn-ghost { background: transparent; color: var(--muted); box-shadow: none;
  border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--card2); color: var(--text); }
.btn-ghost:active:not(:disabled) { transform: none; }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); box-shadow: none; }
.btn-sm { height: 34px; padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
/* Golge KALDIRILMISTI, kucuk butonlar duz lekeye donuyordu; 1px'e
   indirildi — hem gorunur hem ust duzey butonlarla karismaz. */
.btn-sm { box-shadow: 0 1px 0 var(--edge); }
.btn-sm:active:not(:disabled) { transform: none; }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); align-items: center; }
/* TEK SIRA — düğmeler asla 2+1'e sarmaz. Dar ekranda sarmak yerine
   birlikte daralırlar; sığmazsa satır yatay kaydırılır (sarmak, üçüncü
   düğmeyi tek başına alta atıp yanlışlıkla en görünür öğe yapıyordu). */
.btn-row.tek-sira { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.btn-row.tek-sira::-webkit-scrollbar { display: none; }
.btn-row.tek-sira > .btn { flex: 0 1 auto; min-width: 0; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--mo-hizli);
}
.icon-btn .ic { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--accent); }

/* =====================================================================
   Rozetler — hepsi aynı yükseklik ve ritimde
   ===================================================================== */

.pos-badge {
  display: inline-flex; align-items: center;
  height: 22px;
  font-size: var(--fs-xs); font-weight: 800;
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--pos-x-bg); color: var(--pos-x-ink);
}
.pos-n    { background: var(--pos-n-bg);    color: var(--pos-n-ink); }
.pos-v    { background: var(--pos-v-bg);    color: var(--pos-v-ink); }
.pos-adj  { background: var(--pos-adj-bg);  color: var(--pos-adj-ink); }
.pos-adv  { background: var(--pos-adv-bg);  color: var(--pos-adv-ink); }
.pos-prep { background: var(--pos-prep-bg); color: var(--pos-prep-ink); }
.pos-phr  { background: var(--pos-phr-bg);  color: var(--pos-phr-ink); }
.pos-pron { background: var(--pos-pron-bg); color: var(--pos-pron-ink); }
.pos-int  { background: var(--pos-int-bg);  color: var(--pos-int-ink); }

.kind-tag {
  display: inline-flex; align-items: center;
  height: 22px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.6px;
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
}
.kind-q { background: var(--violet-soft); color: var(--violet); }
.kind-s { background: var(--ok-soft); color: var(--ok-strong); }
:root[data-theme="dark"] .kind-s { color: var(--ok); }

.auto-tag {
  display: inline-flex; align-items: center;
  height: 22px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
  background: var(--card2); color: var(--faint);
  border: 1px solid var(--line);
}

.fix-tag-inline { background: var(--ok-soft); color: var(--ok-strong); border-color: rgba(0, 166, 62, 0.42); }
:root[data-theme="dark"] .fix-tag-inline { color: var(--ok); }

.irr-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 26px;
  font-size: var(--fs-sm);
  color: var(--warn-ink);
  background: var(--warn-soft);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-2);
  white-space: nowrap;   /* rozet icinden ASLA kirilmaz; butun olarak alta iner */
}
.irr-badge b { font-weight: 800; }

/* Rozetlerin dolgu rengi üstünde hafif derinlik */
.pos-badge { box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* =====================================================================
   Kelime kartlari
   ===================================================================== */

/* Flex: son satırdaki kartlar kalan genişliği paylaşır, sağda boşluk kalmaz */
.word-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* 190px taban: günlük kelime sayısı 5/10/15/20 olduğundan satır başına 5 kart
   çıkar ve setler TAM satır doldurur — tek başına kalan dev kart olmaz. */
.word-grid > * { flex: 1 1 190px; min-width: 0; }
/* Kelime kartı: içerik farklı olsa da satırdaki kartlar EŞİT yükseklikte;
   ortam bilgisi her zaman kartın en altına yaslanır. */
.word-card {
  display: flex; flex-direction: column;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: transform var(--mo-hizli), border-color var(--mo-hizli);
}
.word-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.word-card .wc-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 24px; }
.word-card .wc-en { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.2px; }
.word-card .wc-tr { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ==================== TELAFFUZ ====================
   Okunus ile Turkce karsilik ayni tonda (--muted) duruyor; ayrimi RENK
   degil KALINLIK + harf araligi tasir. Renk farki verilseydi ilerleme
   dilindeki (yeni/yolda/ogren) renklerle karisirdi — orada renk anlam
   tasiyor, burada tasimiyor.
   IPA ikincil: dogru gosterim ama A1/A2 kullanicisi once TR okunusa bakar. */
.telaffuz {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 var(--sp-2); margin-top: var(--sp-1);
}
.tel-oku {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.3px;
  color: var(--muted);
}
/* --faint DEGIL --muted: olculdu, --faint bu zeminde 3.53:1 kaliyor ve
   WCAG metin esigi 4.5:1. Okunus ile IPA ayni tonda durur; ayrimi punto
   ve kalinlik tasir (yukarida). */
.tel-ipa { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.2px; }
.word-card .wc-irr { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.word-card .wc-meta {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--faint);
  flex-wrap: wrap;
}
/* "dünden" — önceki yarım kalan günden devreden kelime. Amber DEĞİL
   accent: bu bir uyarı değil, bir SEBEP açıklaması. */
.wc-devir {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 700;
}
.wc-devir .ic { width: 12px; height: 12px; }

/* "listenden" — bu kelime günün listesine ÇALIŞMA LİSTESİNDEN geldi.
   Ortam etiketinden ayrılsın diye vurgu renginde ve sağa yaslı: yanındaki
   ortam adı kelimenin NEREYE ait olduğunu, bu rozet NEDEN bugün geldiğini
   söyler. İkisi farklı sorular, aynı tonda yazılmamalı. */
.wc-listem {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-left: auto;
  padding: 0 var(--sp-2);
  height: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 800; letter-spacing: .2px;
}
.wc-listem .ic { width: var(--sp-3); height: var(--sp-3); }
/* "seviyenin üstü" — kelime çalışma listesinde ama günün dersine giremiyor.
   Uyarı rengi DEĞİL amber: hata değil, sadece "şu an sırası değil". */
.wc-ustu {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-left: auto;
  padding: 0 var(--sp-2);
  height: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--warn-soft, var(--tint-neutral));
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn-ink, var(--text));
  color: color-mix(in srgb, var(--warn) 62%, var(--text));
  font-weight: 800; letter-spacing: .2px;
}
.wc-ustu .ic { width: var(--sp-3); height: var(--sp-3); }

/* =====================================================================
   Alistirma ekrani
   ===================================================================== */

.progress-info {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  align-items: center;
  /* --muted DEGIL --text: satir tur boyunca surekli okunan bir sayac
     ve soluk kaliyordu (kullanici bildirdi). Puntoyu buyutmek yerine
     RENK ve KALINLIK guclendirildi — olcek disina cikilmadi. */
  font-size: var(--fs-sm); color: var(--text); font-weight: 600;
  margin-bottom: var(--sp-2);
}
/* Dogru / yanlis sayaci — anlam RENKTEN okunur, sayilar tabular. */
.pi-say { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pi-say b {
  font-size: var(--fs-base); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.pi-dogru  { color: var(--ok-strong); }
/* Acik temada `--bad` sayfa zemininde 4,48:1 olculdu — esigin (4,5) hemen
   altinda. Koyu ton kullanilir; koyu temada `--bad` zaten acik bir kirmizi
   ve 6,95 veriyor, orada degismez. `.pi-dogru` ile ayni desen. */
.pi-yanlis { color: var(--bad-strong); }
/* SIFIR YANLIS bir basaridir — kirmizi boyamak onu hata gibi gosterir.
   Notr ama SOLUK DEGIL: ayni satirdaki oteki sayilarla ayni agirlikta. */
.pi-sifir  { color: var(--muted); }
:root[data-theme="dark"] .pi-dogru  { color: var(--ok); }
:root[data-theme="dark"] .pi-yanlis { color: var(--bad); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pi-dogru  { color: var(--ok); }
  :root:not([data-theme="light"]) .pi-yanlis { color: var(--bad); }
}
.progressbar {
  height: 8px;
  background: var(--card2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.progressbar > div {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
  /* WIDTH DEGIL TRANSFORM. Bu cubuk her soru gecisinde innerHTML ile
     YENIDEN KURULUYOR, yani width gecisi zaten hic calismiyordu; ustelik
     width animasyonu her karede yerlesim+boyama demek. Dolgu tam
     genislikte durur, olcekle kisalir -> origin SOL. */
  width: 100%;
  transform-origin: left center;
  transition: transform var(--mo-orta) ease;
}

/* KART ICINDE KART YOK — .ex-card artik yalnizca IZGARA.
   Olculdu: .ex-card > .ex-side > .sd-govde = 3 kat yuzey, uygulamadaki
   en derin yer burasiydi (oteki ekranlarin hepsi 2). Ic ice ucuncu
   yuzey hem gorsel gurultu hem de "hangisi asil icerik" sorusu yaratir.
   Simdi iki sutun KARDES kart: ana alan ve yan panel kendi yuzeylerini
   tasir, aralarinda bosluk var. Derinlik 2. */
.ex-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-4);
  /* align-items: start DEGIL. Iki sutun farkli uzunlukta ve start ile
     KISA olanin altinda bos grid hucresi kaliyordu — olculdu: cevaptan
     once ana alan 563px / yan panel 700px -> altta 137px anlamsiz bosluk,
     cevaptan sonra tersi (ana 915 / yan 700 -> 215px). Kullanici bunu
     "cevaptan sonra gelecek seyler icin ayrilmis yer" sandi.
     stretch ile iki sutun da kart yuksekligini doldurur; bos alan kart
     zemininde kalir, sayfada delik acmaz. */
  align-items: stretch;
}
.ex-main {
  padding: var(--card-pad);
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  /* İÇERİĞİ KADAR DURUR — satırı DOLDURMAZ.
     Ölçüldü (1440px): sol sütunun içeriği 484px, sağ panel 700px. İzgara
     `stretch` iken sol kart 700px'e geriliyor ve altta 216px (1920px'te
     285px) ölü alan kalıyordu. `min-height` yoktu; boşluk "cevap için
     ayrılmış yer" değil, KARŞI sütunun boyundan geliyordu.

     Bir ara boşluk bırakma bölgelerine dağıtıldı (`flex: 2` / `flex: 1`):
     dip boşluğu bitti ama bu sefer "Cümleyi buraya kur" kutusu 168px'e
     çıktı ve kullanıcı haklı olarak "anlamsız şekilde yükseldi" dedi —
     kutunun boyu içeriğine değil, YANDAKİ panelin boyuna bağlı olmuş
     oluyordu. Boşluğu bir yere itmek çözüm değil.

     Doğrusu: SOL sütun kendi içeriği kadar dursun, satır yüksekliğini o
     belirlesin. Bırakma bölgeleri 68px tabanında kalır.
     (Yan panel ise satırı DOLDURUR — bkz. `.ex-side`.) */
  align-self: start;
}
/* YAN PANEL — TEPSI, bloklar KART.
   Once panel de bloklar da `--card2` idi: tek duz bej leke, hicbir katman
   ayrimi yok, bu yuzden "karisik ve duzensiz" gorunuyordu (kullanici iki
   gun ust uste bildirdi). Simdi panel hafif cukur bir tepsi, bloklar
   onun uzerinde BEYAZ kartlar. Derinlik hue degisikligiyle degil
   KATMANLA kuruluyor — sicak palet bozulmuyor. */
.ex-side {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  /* DUZ YUZEY — ustten alta koyulasan yikama YOK. Panel uzun bir sutun
     ve gecis asagi indikce kartin altini golge gibi gosteriyordu. */
  background: var(--panel-ust);
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--sp-3);
  /* SATIRI DOLDURUR — yüksekliği SOL sütun belirler.
     Asıl sorun panelin fazla UZUN olmasıydı: sol 533px iken sağ 700px'ti
     ve aradaki 167px sayfada boş duruyordu (kullanıcı iki kez bildirdi).
     Panel kısaltılarak çözüldü — "Bu turdaki ilerlemen" bloğu üst
     çubuğun tekrarıydı, kaldırıldı (−122px); her alıştırmada tekrar eden
     dört satırlık açıklama tek satıra indi (−90px). Şimdi 504px, farkı
     29px. Germek artık zararsız: cevaptan sonra sol sütun uzuyor ve
     panelin yüzeyi onunla birlikte iniyor, sayfada boşluk açılmıyor. */
  align-self: stretch;
}

.side-word { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.side-word .sw-en { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.4px; }
.side-tr { color: var(--muted); font-size: var(--fs-base); margin-top: calc(var(--sp-2) * -1); }
.side-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.side-meta {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-1); border-top: 1px solid var(--line); padding-top: var(--sp-4);
}
.side-meta .sm-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.side-meta .sm-k { color: var(--faint); font-weight: 600; }
.side-meta .sm-v { display: flex; align-items: center; gap: var(--sp-1); color: var(--text); font-weight: 600; text-align: right; }

.ex-prompt { margin-bottom: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ex-tr-prompt { flex: 1 1 100%; font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-2); letter-spacing: -0.2px; line-height: 1.35; }

.zone-label {
  font-size: var(--fs-xs); color: var(--faint); font-weight: 800;
  margin: var(--sp-4) 0 var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.zone {
  min-height: 68px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-content: flex-start;
  transition: border-color var(--mo-hizli), background var(--mo-hizli);
}
.answer-zone { background: var(--accent-soft); border-color: var(--accent-ring); }
.pool-zone { background: transparent; }
.zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.zone-empty { color: var(--faint); font-size: var(--fs-sm); padding: var(--sp-2); -webkit-user-select: none; user-select: none; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  background: var(--card);
  border: 1.5px solid var(--chip-line);
  border-radius: var(--r-sm);
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  font-size: var(--fs-md); font-weight: 600;
  box-shadow: 0 2px 0 var(--line);
  transition: transform var(--mo-hizli), border-color var(--mo-hizli), box-shadow var(--mo-hizli);
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip:active { cursor: grabbing; transform: translateY(1px); box-shadow: 0 1px 0 var(--line); }
.chip.dragging { opacity: 0.35; }
.chip-ok  { background: var(--ok-soft);  border-color: var(--ok);  box-shadow: none; cursor: default; }
.chip-bad { background: var(--bad-soft); border-color: var(--bad); box-shadow: none; cursor: default; }
.chip .mark { font-weight: 800; font-size: var(--fs-sm); }
.chip-ok .mark  { color: var(--ok-strong); }
:root[data-theme="dark"] .chip-ok .mark { color: var(--ok); }
.chip-bad .mark { color: var(--bad); }
/* Duzeltmeden SONRA gosterilen taslar: yargi tasimazlar (ne dogru ne yanlis),
   yalnizca cumlenin duzeltilmis halini yazarlar — bu yuzden notr ve tutuk. */
.chip-duzelt {
  background: var(--card2); border-color: var(--chip-line);
  box-shadow: none; cursor: default;
}
.chip-duzelt:hover { border-color: var(--chip-line); transform: none; }

.ex-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; align-items: center; }
.ex-feedback { margin-top: var(--sp-4); }
.fb-line { font-weight: 800; font-size: var(--fs-md); }
.fb-ok  { color: var(--ok-strong); }
:root[data-theme="dark"] .fb-ok { color: var(--ok); }
.fb-bad { color: var(--bad); }
.fb-solution {
  margin-top: var(--sp-3);
  background: var(--card2);
  border: 1px solid var(--line);
  border-left: var(--kenar-vurgu) solid var(--ok);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
}
.fb-label { color: var(--faint); font-size: var(--fs-xs); font-weight: 700; margin-right: var(--sp-2); text-transform: uppercase; letter-spacing: 0.5px; }
/* Duzeltme sonrasi bilgi satiri — taslarin neden degistigini SOYLER.
   Sessizce degistirmek "cevabimi mi sildi" sorusunu dogururdu. */
.fb-duzeltildi {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  background: var(--tint-blue);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--text);
  line-height: var(--lh-normal);
}
.fb-duzeltildi .ic { flex: 0 0 auto; color: var(--accent); }
.flag-btn { margin-top: var(--sp-3); }

/* =====================================================================
   Istatistik
   ===================================================================== */

/* FLEX, grid DEĞİL: grid'de son satır yarım kalır ve sağda kocaman boşluk
   olur (9 kutu 7'lik ızgaraya oturunca 2 kutu solda kalıyordu). Flex'te
   son satırdaki kutular kalan genişliği paylaşır — boşluk kalmaz. */
.stat-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-4);          /* kutular birbirine yapışmasın */
  margin-bottom: var(--sp-5);
}
.stat-grid > * { flex: 1 1 200px; min-width: 0; }
.stat-grid:last-child { margin-bottom: 0; }
.stat-grid.sg-fill > * { flex-basis: 220px; }
.stat-box {
  --tile-bg: var(--tint-neutral);
  --tile-ink: var(--text);
  --tile-line: var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 76px;
  /* DUZ TINT — 135°'lik yikama YOK. Renk sol ustte basliyor, sagda
     kayboluyordu: uc kutu yan yana durunca uc ayri solan yikama oluyor
     ve hicbirinin rengi tam okunmuyordu. Rozetlerde ayni hata bir kez
     duzeltilmisti (bkz. CLAUDE.md "ROZET — gradyan YOK"), stat kutulari
     atlanmis. Kimligi ARTIK cerceve + ikon cipi + tek duz tint tasiyor. */
  background: var(--tile-bg);
  border: 1px solid var(--tile-line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: transform var(--mo-hizli);
}
.stat-box:hover { transform: translateY(-2px); }
.stat-box .si {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: var(--r-md);
  /* CIP KART ZEMININDE ERIYORDU: ikisi de `--tile-bg` idi, yani birebir
     ayni renk — ortada cip diye bir sey gorunmuyordu. Gradyan
     temizliginin yan etkisi: eskiden kart sagda `--card2`ye soluyor ve
     cip biraz ayrisiyordu; duz tint'e gecince fark sifirlandi.
     Cip zemini artik KIMLIK renginden (`--tile-ink`) turer, kartin
     tintinden degil — cip kartin uzerinde durur. */
  /* DOLU KIMLIK RENGI. `--tile-ink` ham aile rengi DEGIL, zaten kontrast
     icin secilmis koyu varyant (st-amber -> --warn-ink, st-green ->
     --ok-strong). Bu yuzden uzerine beyaz ikon calisir; ham renkle
     denenip kirilan rozet madalyonundan farki bu. */
  background: var(--tile-ink);
  color: var(--ink-ters);
  /* KENAR, kimlik renginde. Zemini daha da doygunlastirmak ikonu eritir
     (ayni hue); ayrismayi HALKA tasir, doygunlugu zemin. Halka `border`
     ile verilir, `box-shadow` ile DEGIL — paylasilan cip kurali dosyanin
     sonunda box-shadow yaziyor ve buradakini ezerdi (rozet madalyonunda
     bir kez yasandi). */
  border: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-box .si .ic { width: 20px; height: 20px; }
/* KOYU TEMADA TERS — `--tile-ink` orada PARLAK (--ok, --accent parlak
   tonlar). Parlak zemin uzerine beyaz ikon erir; koyu ikon konur. Ayni
   kural pos rozetlerinde de gecerli (CLAUDE.md renk kurali). */
:root[data-theme="dark"] .stat-box .si,
:root[data-theme="dark"] .stat-pill .sp-ic { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-box .si,
  :root:not([data-theme="light"]) .stat-pill .sp-ic { color: #0f1720; }
}
.stat-box .sv {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.8px;
  line-height: 1.15; color: var(--tile-ink);
  font-variant-numeric: tabular-nums;
}
.stat-box .sl { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); font-weight: 600; }

.st-blue   { --tile-bg: var(--accent-soft); --tile-ink: var(--accent);    --tile-line: var(--accent-ring); }
.st-green  { --tile-bg: var(--ok-soft);     --tile-ink: var(--ok-strong); --tile-line: rgba(0,166,62,0.42); }
.st-amber  { --tile-bg: var(--warn-soft);   --tile-ink: var(--warn-ink);  --tile-line: rgba(245,158,11,0.48); }
.st-red    { --tile-bg: var(--bad-soft);    --tile-ink: var(--bad);       --tile-line: rgba(224,36,36,0.40); }
.st-violet { --tile-bg: var(--violet-soft); --tile-ink: var(--violet);    --tile-line: rgba(109,40,217,0.38); }
:root[data-theme="dark"] .st-green  { --tile-ink: var(--ok);   --tile-line: rgba(52,209,122,0.42); }
:root[data-theme="dark"] .st-violet { --tile-line: rgba(167,139,250,0.42); }
:root[data-theme="dark"] .st-amber  { --tile-line: rgba(251,191,36,0.45); }
:root[data-theme="dark"] .st-red    { --tile-line: rgba(255,107,107,0.42); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .st-green  { --tile-ink: var(--ok);   --tile-line: rgba(52,209,122,0.42); }
  :root:where(:not([data-theme="light"])) .st-violet { --tile-line: rgba(167,139,250,0.42); }
  :root:where(:not([data-theme="light"])) .st-amber  { --tile-line: rgba(251,191,36,0.45); }
  :root:where(:not([data-theme="light"])) .st-red    { --tile-line: rgba(255,107,107,0.42); }
}

.bar-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.bar-row .bl { display: flex; align-items: center; gap: var(--sp-2); width: 190px; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.bar-row .bt { flex: 1; height: 8px; background: var(--card2); border-radius: var(--r-full); overflow: hidden; }
.bar-row .bt > div,
.bar-row .bt > span { height: 100%; border-radius: var(--r-full); background: var(--accent); }
.bar-row .bv { width: 80px; text-align: right; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Kutu etiketinin yanindaki gun karsiligi: "Kutu 4 ✓  14 gun+" */
.bar-row .bl-sub { margin-left: auto; padding-right: var(--sp-2); color: var(--faint); font-weight: 600; font-size: var(--fs-xs); }
/* DURUM cubuklari — yalnizca gercek IYI/KOTU olcumler icin (basari yuzdesi,
   yonetim saglik gostergeleri). Ilerleme verisinde KULLANMA. */
.bar-good > div, .bar-good > span { background: var(--ok) !important; }
.bar-warn > div, .bar-warn > span { background: var(--warn) !important; }
.bar-bad  > div, .bar-bad  > span { background: var(--bad) !important; }

/* ILERLEME cubuklari — uc anlamli renk sistemi (bkz. :root aciklamasi).
   Kutu dagilimi ve tekrar takvimi bunlari kullanir; eskiden kutu 0-1
   KIRMIZI ciziliyordu, yani bugun basladigin kelime "hata" rengindeydi. */
/* DOLGU CANLI, KENAR KOYU.
   Once dolgu dogrudan koyu tona boyanmisti: acik temada rayda gorunmesi
   icin --warn'in koyu karsiligi gerekiyordu ve o ton KAHVERENGI cikiyor —
   olcum geciyordu ama ekranda camurlu duruyordu (gorulup duzeltildi).
   Ayrim artik KENARDAN geliyor: dolgu markanin canli tonu, cevresinde
   1px koyu halka. Halka rayla 5:1 ustu ayrim veriyor, dolgu ise premium
   goruntuyu koruyor. */
.bar-yeni > div,  .bar-yeni > span,
.bar-yolda > div, .bar-yolda > span,
.bar-ogren > div, .bar-ogren > span { box-shadow: inset 0 0 0 1px var(--bar-kenar); }
.bar-yeni > div,  .bar-yeni > span  { background: var(--ilerleme-yeni) !important;  --bar-kenar: rgba(11,11,11,0.28); }
.bar-yolda > div, .bar-yolda > span { background: var(--warn) !important; --bar-kenar: var(--ilerleme-yolda); }
.bar-ogren > div, .bar-ogren > span { background: var(--ok) !important; --bar-kenar: var(--ilerleme-ogren); }
:root[data-theme="dark"] .bar-yeni > div,
:root[data-theme="dark"] .bar-yeni > span { --bar-kenar: rgba(0,0,0,0.45); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .bar-yeni > div,
  :root:where(:not([data-theme="light"])) .bar-yeni > span { --bar-kenar: rgba(0,0,0,0.45); }
}

/* BANT ROZETI — ilerleme dilinin sembol yari. Renk TEK BASINA birakilmaz:
   renk korlugunde ve gri baskida ikon ayrimi tasir. */
/* Desen uygulamanin kendi dilinden: YUMUSAK ZEMIN + KOYU MUREKKEP
   (stat-box'taki --tile-bg / --tile-ink ikilisiyle ayni). Once zemin dolu
   koyu renkti ve rozetler kahverengi lekeler gibi duruyordu. */
.bant {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--bant-bg);
  border: 1px solid currentColor;
}
.bant > .ic { width: 11px; height: 11px; color: currentColor; }
.bant-yeni  { color: var(--ilerleme-yeni);  --bant-bg: var(--tint-neutral); }
.bant-yolda { color: var(--ilerleme-yolda); --bant-bg: var(--warn-soft); }
.bant-ogren { color: var(--ilerleme-ogren); --bant-bg: var(--ok-soft); }

/* Aciklama seridi — sistemi bir kez gosterir */
.legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.legend-oge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted);
}
.legend-oge b { font-weight: 800; color: var(--text); }
.legend-oge i { font-style: normal; color: var(--faint); }

/* 90 gün = 30 sütun × 3 satır. Sabit sütunlu IZGARA: flex-wrap'ta kareler
   satır sonunda bitiyor ve sağda kocaman boşluk kalıyordu. Kareler kalan
   genişliği paylaşır — satırlar tam dolar, takvim gibi hizalı durur. */
.heat { display: grid; grid-template-columns: repeat(30, 1fr); gap: var(--sp-1); }
.heat i { height: 14px; border-radius: var(--sp-1); background: var(--heat0); display: block; }
.heat i.h1 { background: var(--heat1); }
.heat i.h2 { background: var(--heat2); }
.heat i.h3 { background: var(--heat3); }
.heat i.h4 { background: var(--heat4); }

/* =====================================================================
   Kelime listesi
   ===================================================================== */

.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: center; }
/* Suzgec satirinda input ve acilir liste --ctrl-h (42px); yanlarindaki
   .btn-sm 34px kaliyordu — olculdu, Kelimeler ekraninda 8px fark.
   CLAUDE.md kurali: hiza BILESENIN degil SATIRIN sorumlulugu. */
.filters > .btn-sm { height: var(--ctrl-h); }
input[type=text], input[type=password], input[type=email], select {
  height: var(--ctrl-h);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text);
  padding: 0 var(--sp-3);
  font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color var(--mo-hizli) ease, box-shadow var(--mo-hizli) ease;
}
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, select:hover {
  border-color: var(--faint);
}

/* Açılır liste: tarayıcının yerel oku yerine kendi çizgi okumuz.
   Ok SVG'si data URI — CDN yok, currentColor yerine sabit gri (maskeleme
   yerine arka plan olduğu için); tema başına ayrı tanımlı. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352514e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px 16px;
  cursor: pointer;
}
select:disabled { opacity: .55; cursor: not-allowed; }
/* Açılan listenin kendisi (işletim sistemi çizer; en azından renkleri verelim) */
select option { background: var(--card); color: var(--text); }

/* =====================================================================
   Açılır liste (dropdown) — kendi bileşenimiz
   <select> gizli durur (değer kaynağı), görüneni biz çiziyoruz; çünkü
   select'in AÇILAN listesini işletim sistemi çizer, CSS işlemez.
   ===================================================================== */

.dd { position: relative; display: inline-flex; flex-direction: column; min-width: 0; }
.dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }

.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  /* Cam parlaklik yikamasi KALDIRILDI — derinlik yuzey renginden ve tek
     seviye golgeden gelir (premium katman kurali). */
  background: var(--card);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1), var(--kenar-isik);
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              box-shadow var(--mo-hizli) var(--mo-cikis);
}
.dd-btn:hover { border-color: var(--faint); }
.dd-btn:focus-visible,
.dd.open .dd-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dd-btn:disabled, .dd.disabled .dd-btn { opacity: .55; cursor: not-allowed; }

.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-arrow {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--faint);
  transition: transform var(--mo-hizli) ease;
}
.dd.open .dd-arrow { transform: rotate(180deg); color: var(--accent); }

.dd-panel {
  position: absolute; z-index: 70;
  top: calc(100% + var(--sp-2));
  /* PANEL DUGMEYE KILITLENMEZ. Once `left:0; right:0` vardi: panel dugme
     kadar dardi ve secenekler kirpiliyordu — "Kutu" acilirinda BUTUN
     secenekler "K." goruluyordu, liste kullanilamaz haldeydi.
     Artik icerige gore genisler; dugmeden dar olamaz, ekrandan da tasmaz. */
  left: 0; right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(320px, calc(100vw - var(--sp-5) * 2));
  max-height: 320px; overflow-y: auto;
  padding: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-top-color: var(--cam-kenar);
  border-radius: var(--r-md);
  /* Premium derinlik: uzak yumusak golge + ust kenar isigi + ince cerceve */
  box-shadow: var(--shadow-pop), var(--kenar-isik);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  display: none;
}
/* Sag kenara yakinsa saga hizalan — tasmasin */
.dd-panel.sag { left: auto; right: 0; }
.dd-panel.up { top: auto; bottom: calc(100% + var(--sp-1)); }
.dd.open .dd-panel { display: block; animation: dd-in .12s ease-out; }
@keyframes dd-in { from { opacity: 0; } to { opacity: 1; } }

.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 38px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-align: left; cursor: pointer;
}
.dd-opt { transition: background var(--mo-hizli) var(--mo-cikis); }
.dd-opt:hover, .dd-opt:focus-visible { background: var(--card2); outline: none; }
.dd-opt[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: var(--kenar-isik);
}
.dd-opt[disabled] { opacity: .45; cursor: not-allowed; }
/* Panel artik icerige gore genisledigi icin secenek metni KIRPILMAZ.
   Cok uzun etiket (senaryo adlari) alt satira iner. */
.dd-opt > span { min-width: 0; white-space: normal; line-height: var(--lh-normal); }
.dd-tick { width: 15px; height: 15px; flex-shrink: 0; opacity: 0; }
.dd-opt[aria-selected="true"] .dd-tick { opacity: 1; }

/* Yerleşimde select'in yerini dd alır — eski kurallar dd'ye de uygulansın */
.setting-row > .dd { flex: 0 0 auto; min-width: 170px; }
.filters .dd { min-width: 160px; }
.fix-field > .dd { width: 100%; }
@media (max-width: 940px) {
  .setting-row > .dd { min-width: 0; width: 100%; }
}
input[type=text] { min-width: 220px; flex: 1; }
input::placeholder { color: var(--faint); }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.tbl-wrap { max-height: 64vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

/* Sıralanabilir başlık */
th.th-sort { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--accent); }
th.th-sort.on { color: var(--accent); }
.th-ok { margin-left: var(--sp-1); opacity: .5; font-weight: 700; }
th.th-sort.on .th-ok { opacity: 1; }

/* Sütun süzgeç satırı — başlıkla birlikte yapışık kalır */
tr.th-filters th {
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line);
  background: var(--card2);
  position: sticky; top: 34px; z-index: 3;
}
tr.th-filters input[type=text],
tr.th-filters select,
tr.th-filters .dd { height: 32px; min-width: 0; width: 100%; font-size: var(--fs-sm); }
tr.th-filters .dd-btn { height: 32px; font-size: var(--fs-sm); padding: 0 var(--sp-2); }
tr.th-filters input[type=text] { min-width: 0; }
/* SÜTUN SÜZGEÇ SATIRI TELEFONDA: `.dd-btn` dokunma hedefi kuralıyla 40px'e
   çıkıyordu ama yanındaki `<input>` 32px kalıyordu — aynı satırda 8px fark
   (ölçüldü) ve girdi 40px kuralını da çiğniyordu. Üçü birlikte yükselir. */
@media (max-width: 940px) {
  tr.th-filters input[type=text],
  tr.th-filters select,
  tr.th-filters .dd,
  tr.th-filters .dd-btn { height: 40px; }
}
table.words { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.words th {
  text-align: left; color: var(--faint); font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: var(--card);
  white-space: nowrap;
}
table.words td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
table.words tbody tr:last-child td { border-bottom: none; }

/* ZEBRA — 9 sutunlu ve genis bir tabloda goz satir kaydiriyordu.
   Cizgi yerine YUZEY farki kullanilir: cizgi kalabaligi artirir, hafif
   bir zemin farki satiri tasir. Cift satirlarda cok hafif bir ton;
   uzerine gelince belirgin vurgu ONUN USTUNE biner. */
table.words tbody tr:nth-child(even) td { background: var(--zebra); }
table.words tbody tr:hover td { background: var(--card2); }
/* Kutu dolgusu gibi renkli hucreler zebradan etkilenmesin */
table.words td .kutu-nokta { position: relative; }

.box-dots { display: inline-flex; gap: var(--sp-1); }
.box-dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--line); display: block; }
.box-dots i.on { background: var(--ok); }
.mini-irr { color: var(--warn-ink); font-size: var(--fs-sm); font-weight: 600; }

/* =====================================================================
   Diger
   ===================================================================== */

/* BLOK olmalı, flex DEĞİL. Flex iken içindeki <b> etiketleri birer flex
   öğesine dönüşüp metni SÜTUNLARA bölüyordu (özet ekranında yaşandı).
   İkon inline-block olarak hizalanır, metin normal akar. */
.notice {
  display: block;
  background: var(--warn-soft);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--warn-ink);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: var(--sp-5) 0;
}
.notice > .ic {
  display: inline-block; vertical-align: -4px;
  width: 18px; height: 18px;
  margin-right: var(--sp-2);
  flex-shrink: 0;
}
.notice b { font-weight: 800; }
.plan-streak > .ic {
  display: inline-block; vertical-align: -4px;
  width: 18px; height: 18px; margin-right: var(--sp-2);
}
/* Kart içinde art arda gelen notice'ler ikişer boşlukla ayrılsın */
.notice + .notice { margin-top: calc(var(--sp-5) * -1 + var(--sp-3)); }
.notice .ic { margin-top: var(--sp-1); }
.notice-ok {
  background: var(--ok-soft);
  border-color: rgba(0, 166, 62, 0.42);
  color: var(--ok-strong);
}
:root[data-theme="dark"] .notice-ok { color: var(--ok); }

/* NOTR ACIKLAMA PANELI — .notice'in ucuncu hali.
   Amber "dikkat", yesil "tamam" demek; KURAL anlatan metin ikisi de degil.
   Bu yuzden acıklamalar ciplak <p class="sub"> olarak biraktirilmisti:
   kapsayicisiz, dugmelere yapisik, tam genislikte gri bir blok — Tekrar
   ekranindaki en ucuz duran parcaydi.
   Ikon KENDI SUTUNUNDA (flex): .notice'in block + inline-ikon duzeninde
   "i" simgesi ilk satira yapisip yamuk goruniyordu. */
.notice-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--tint-neutral);
  border-color: var(--line);
  color: var(--muted);
  line-height: var(--lh-rahat);
  box-shadow: var(--kenar-isik);
}
.notice-info > .ic {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: var(--sp-1) 0 0;            /* .notice > .ic'in sag margin'i gap ile cakisiyordu */
  vertical-align: 0;
  color: var(--faint);
}
.notice-info b { color: var(--text); font-weight: 800; }
/* Panelin eylemi kendi satirinda — metnin sonuna yapisik satir ici bag
   telefonda 21px yuksekliginde kaliyordu (kural: en az 40px). */
/* Düğmeler `white-space: nowrap`; 320px'te (iPhone SE) satır bilgi
   kutusunun dışına taşıyordu. Sarma orada devreye girer, geniş ekranda
   hiçbir şeyi değiştirmez. */
.notice-eylem { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* SATIR SARMASI YETMEDİ: tek düğme vardı ve etiketi ("Tekrar sekmesinden
   sürdür") tek başına kutudan 6px taşıyordu — `.btn`in `white-space: nowrap`
   kuralı yüzünden metin kırılamıyordu. Bu bağlamda düğme iki satıra iner;
   yükseklik `--ctrl-h`in ALTINA düşmez, dokunma hedefi korunur. */
.notice-eylem .btn {
  white-space: normal; text-align: center;
  height: auto; min-height: var(--ctrl-h);
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.empty { color: var(--faint); text-align: center; padding: var(--sp-10) var(--sp-3); font-size: var(--fs-sm); }

/* BOŞ DURUM — ikon + başlık + sebep + (varsa) eylem.
   Ölçüldü (verisi olmayan hesap, 10 ekran): dört boş durumun hiçbirinde
   eylem yoktu, hiçbirinde ikon yoktu, ikisi yalnızca "Henüz veri yok."
   diyordu. Düz gri bir cümle "ekran bozuk mu" hissi veriyor.
   METNE max-width VERİLMEZ (bkz. "SAĞDA BOŞLUK BIRAKMA") — blok zaten
   ortalanır ve metin tek cümledir. */
.bos-durum {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); color: var(--muted);
}
.bos-durum .bd-ic {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: var(--r-md);
  background: var(--tint-neutral); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-1);
}
.bos-durum .bd-ic .ic { width: 20px; height: 20px; }
.bos-durum b { font-size: var(--fs-md); color: var(--text); font-weight: 700; }
.bos-durum span { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.bos-durum .bd-eylem { margin-top: var(--sp-3); justify-content: center; }

/* ============================================================
   GUNLUK SERI KUTLAMASI (.sk-*)
   Pencere `ask()` ile cizilir; burasi yalnizca govdesi.
   GRADYAN YOK (proje kurali) — albeni duz tint, doygun alev rengi ve
   madalyonun halkasindan gelir. Tek istisna `.mo-rozet::after`
   parlamasi ve o yalnizca KILOMETRE TASI gununde eklenir.
   ============================================================ */
.sk-kutla { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Olcu `--icon-box` (40) degil bir basamak buyuk: pencerenin TEK gorseli
   bu ve orada hiyerarsinin tepesinde durmali. 48 = --sp-12 karsiligi,
   4px izgarasinda.
   `color-mix` ONCESINE duz yedek yazilir — Chrome 111 oncesinde
   desteklenmiyor ve tek satir yazilsaydi cip RENKSIZ kalirdi
   (CLAUDE.md, ikon cipleri kurali). */
.sk-ic {
  width: 48px; height: 48px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--warn-soft);
  background: color-mix(in srgb, var(--warn) 20%, var(--card));
  color: var(--warn-ink);
  border: 2px solid var(--warn);
  border-color: color-mix(in srgb, var(--warn) 55%, var(--card));
  margin-bottom: var(--sp-3);
}
.sk-ic .ic { width: 24px; height: 24px; }

/* SAYI `--fs-2xl`, `--fs-4xl` DEGIL: o punto hero'daki gunun sayaci icin
   ayrilmis (CLAUDE.md). Pencere zaten dar bir kutu, 28px orada da en
   buyuk oge — hiyerarsi korunuyor. */
.sk-sayi { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: var(--text); }
.sk-etiket { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }

/* Son 7 gun — "kac gun" yetmiyor, HANGI gunler oldugu da gorunsun */
.sk-hafta { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.sk-gun { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.sk-nokta {
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--card2); border: 1px solid var(--line);
}
.sk-gun.dolu .sk-nokta { background: var(--warn); border-color: var(--warn); }
/* Bugun ayrica HALKALI — renk tek basina birakilmaz */
.sk-gun.bugun .sk-nokta {
  box-shadow: 0 0 0 2px var(--warn-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent);
}
.sk-ad { font-size: var(--fs-xs); color: var(--muted); }

.sk-not {
  margin-top: var(--sp-5); font-size: var(--fs-sm);
  color: var(--muted); line-height: var(--lh-normal);
}
.sk-not.sk-donum { color: var(--text); font-weight: 700; }

/* Kilometre tasi gunu — cerceve doygunlasir, madalyon bir kez parlar */
.sk-kutla.donum .sk-ic {
  background: var(--warn-soft);
  background: color-mix(in srgb, var(--warn) 32%, var(--card));
  border-color: var(--warn);
}

/* --- SERI KIRILDI bildirimi (Bugun ekrani) ---
   Suclamayan tek satir. `.sessiz` kart: kendi yuzeyini birakir, ekranda
   bagirmaz. Kirmizi KULLANILMAZ — ilerleme dilinde kirmizi yalnizca
   gercek yanlis cevaba ayrilmistir, seri kirilmasi hata degil. */
.sk-kirik { display: flex; align-items: center; gap: var(--sp-3); }
.skk-ic {
  width: var(--icon-box); height: var(--icon-box); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-neutral); color: var(--muted); flex: 0 0 auto;
}
.skk-ic .ic { width: 20px; height: 20px; }
.skk-metin { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.skk-metin b { font-size: var(--fs-base); color: var(--text); }
.skk-metin span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-normal); }

.toast {
  position: fixed; left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%) translateY(20px);
  background: #1a212a; color: var(--ink-ters);
  border: 1px solid var(--accent);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  opacity: 0; pointer-events: none;
  transition: var(--mo-orta);
  z-index: 60;
  box-shadow: var(--shadow-pop);
  max-width: min(90vw, 560px);
  font-weight: 600; font-size: var(--fs-sm);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Ayar satırı: sol metin esner, sağdaki kontrol sabit genişlikte hizalanır */
.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  /* SIGMAZSA SARAR — etiketi EZMEZ. `.sr-l` yalnızca `flex: 1; min-width: 0`
     idi: sağdaki denetim daralamayan bir grup olduğunda (üç düğmelik
     `.btn-row`) etiket sütunu 60px'e çöküyor ve "Hatalı bildirilen
     cümleler" başlığı harf harf alt alta iniyordu (ölçüldü, Veri kartı).
     Taban genişlik verilince satır çökmek yerine alt satıra geçer. */
  flex-wrap: wrap;
  min-height: 64px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.setting-row > .btn-row { margin-top: 0; }
.card h2 + .setting-row { padding-top: var(--sp-2); }   /* başlık altında nefes payı */
.sub + .setting-row { padding-top: 0; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
/* 200px: etiketin ALT sınırı. Daha büyük seçilirse (240 denendi) 1920px'te
   üç sütuna düşen kartlarda satır gereksiz yere sarıyor ve denetim etiketin
   ALTINA iniyordu — geniş ekranda dar ekrandan daha kötü bir yerleşim.
   Daha küçük seçilirse üç düğmelik satırlar etiketi yine eziyor. */
.setting-row .sr-l { min-width: 0; flex: 1 1 200px; }
/* DOĞRUDAN ÇOCUK (`> b`) — seçici `b` iken açıklama metninin İÇİNDEKİ
   vurgular da blok oluyordu: "…bir kelime <b>30 gün sonra</b> tekrar
   gelir" cümlesi üç parçaya bölünüp 15px'e büyüyordu (ölçüldü: Tekrar
   yoğunluğu ve Hatalı bildirilen cümleler satırları). Etiket blok kalır,
   cümle içi vurgu satır içi. */
.setting-row .sr-l > b { display: block; font-size: var(--fs-base); line-height: 1.35; }
.setting-row .sr-l span { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-top: var(--sp-1); }
.setting-row > select,
.setting-row > input[type=text],
.setting-row > .btn { flex: 0 0 auto; min-width: 170px; }
.setting-row > input[type=text] { min-width: 110px; max-width: 110px; text-align: center; }

/* =====================================================================
   Açılış perdesi ve giriş ekranı
   ===================================================================== */

/* Zemin: uygulamanın hero'suyla AYNI iki noktalı ışık — marka tutarlı kalsın */
.boot-host, .auth-host {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  background:
    var(--page);
}
/* [hidden] ozniteligi display kuralini EZEMEZ — acikca yaziyoruz */
.boot-host[hidden], .auth-host[hidden], .layout[hidden] { display: none !important; }

/* ---- açılış perdesi: markalı, sade ---- */
.boot-host { flex-direction: column; gap: var(--sp-5); }
.boot-mark {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  background: var(--marka-1);
  color: var(--ink-ters);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px var(--accent-ring);
}
.boot-mark svg { width: 30px; height: 30px; }
.boot-bar {
  width: 200px; height: 4px; border-radius: var(--r-full);
  background: var(--card2); overflow: hidden;
}
.boot-bar::after {
  content: ''; display: block; height: 100%; width: 40%;
  border-radius: var(--r-full);
  background: var(--accent);
  animation: boot-slide 1.1s ease-in-out infinite;
}
@keyframes boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.boot-text { color: var(--muted); font-size: var(--fs-sm); text-align: center; max-width: 46ch; line-height: 1.6; }

/* ---- giriş ekranı ---- */
/* GIRIS EKRANI DIKEY ORTALANIR. Once `align-items: flex-start` idi ve
   kart tepeye yapisiyordu: olculdu (1440×900) — ust 64px, ALT 298px ve
   kart ekranin yalnizca %18'i. Form bosluga asili duruyordu.
   `min-height: 100%` + `center`: sigmayan uzun formda (kayit) tepeden
   baslar, kisa formda ortalanir — ikisinde de dogru. */
.auth-host { overflow: auto; align-items: center; justify-content: center; }
.auth-wrap {
  width: 100%; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

/* IKI SUTUN — solda ne oldugumuz, sagda form.
   Giris ekrani uygulamanin ILK YUZU: "ne bu, neden gireyim" sorusunun
   cevabi da orada olmali. Dar ekranda sol sutun gizlenir (asagida). */
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  align-items: center;
  gap: var(--sp-10);
  width: min(100%, 980px);
}

.auth-yan { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.ay-marka { display: flex; align-items: center; gap: var(--sp-3); }
.ay-marka .brand-logo { width: 40px; height: 40px; }
.ay-marka .brand-logo svg { width: 22px; height: 22px; }
.ay-marka span { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.3px; }

/* Slogan `--fs-2xl`; `--fs-4xl` hero sayacina ayrilmis (CLAUDE.md). */
.ay-slogan {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.6px; margin: 0; color: var(--text);
}
.ay-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.ay-liste li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ay-ic {
  width: var(--icon-box); height: var(--icon-box); flex: 0 0 auto;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  /* `color-mix` oncesine duz yedek — Chrome 111 oncesi (CLAUDE.md) */
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
}
.ay-ic .ic { width: 20px; height: 20px; }
.ay-liste b { display: block; font-size: var(--fs-base); color: var(--text); }
.ay-liste em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-normal);
}
.ay-dip {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font-size: var(--fs-sm); color: var(--faint);
}
.ay-dip .ic { width: 16px; height: 16px; flex: 0 0 auto; }

/* Kart icindeki baslik — hangi ekranda oldugunu SOYLEYEN sey.
   Onceden yalnizca dugme metni soyluyordu ve `h1` hic yoktu. */
.auth-baslik {
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.4px;
  margin: 0; color: var(--text);
}
/* Alan alti ipucu ("En az 6 karakter") — hata DEGIL, beklentiyi
   ONCEDEN soyler; kullanici gonderdikten sonra ogrenmesin. */
.fix-ipucu {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-xs); color: var(--faint); font-style: normal;
}

.auth-baslik-alt {
  margin: var(--sp-1) 0 0; font-size: var(--fs-sm);
  color: var(--muted); line-height: var(--lh-normal);
}

/* MARKA IKI KEZ CIKMASIN. Sol sutun varken kartin icindeki marka blogu
   ayni logoyu ve adi tekrar ediyor — olcumde iki "NevaTeach" yan yana
   gorundu. Genis ekranda kart yalnizca ISI yapar (form), kimligi sol
   sutun tasir. Dar ekranda sol sutun gizlendigi icin blok geri gelir. */
@media (min-width: 861px) {
  .auth-split .auth-brand { display: none; }
}

/* DAR EKRAN: sol sutun GIZLENIR. Deger metni formu asagi iter, klavye
   acilinca alan zaten daraliyor ve orada tek is var — giris yapmak.
   940px yerine 860px: iki sutun 980px'lik izgarada 860'in altinda
   sikisiyor (sol sutun okunmaz hale geliyor), ustunde rahat. */
@media (max-width: 860px) {
  .auth-yan { display: none; }
  .auth-split { grid-template-columns: minmax(0, 1fr); width: min(100%, 424px); gap: 0; }
  .auth-wrap { padding: var(--sp-6) var(--sp-4); }
}

/* DOKUNMA HEDEFI — "Hesap olustur" / "Giris yap" / "Sifremi unuttum"
   baglantilari 21px olculdu; telefonda 40px kurali (CLAUDE.md) bunlari
   da kapsamali. Satir ici baglanti oldugu icin yukseklik dolguyla
   verilir, blok yapilmaz (cumlenin icinde kalsin). */
@media (max-width: 940px) {
  .auth-switch .linkish,
  .auth-forgot .linkish {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 var(--sp-1);
  }
}
.auth-card {
  width: min(100%, 424px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-8);
  display: grid; gap: var(--sp-6);
}
.auth-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.auth-brand .brand-logo { width: 46px; height: 46px; }
.auth-brand .brand-logo svg { width: 24px; height: 24px; }
.auth-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; }
.auth-sub { color: var(--faint); font-size: var(--fs-sm); margin-top: var(--sp-1); line-height: 1.4; }

.auth-form { display: grid; gap: var(--sp-4); }
.auth-form input[type=text], .auth-form input[type=password] {
  width: 100%; min-width: 0; height: var(--ctrl-h);
}
.auth-submit { width: 100%; justify-content: center; height: var(--ctrl-h); font-size: var(--fs-base); }

.auth-or {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--faint); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.google-slot { display: flex; justify-content: center; min-height: var(--ctrl-h); }
.google-slot[hidden] { display: none; }

/* Google düğmesi — uygulamanın ölçeğinde, Google'ın marka kuralına uygun
   (resmî dört renk "G" + onaylı metin, nötr zemin) */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  cursor: pointer;
  transition: border-color var(--mo-hizli) ease, box-shadow var(--mo-hizli) ease, transform var(--mo-hizli) ease;
}
.btn-google:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-google:active { transform: translateY(1px); }
.btn-google:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-google[hidden] { display: none; }
/* Dört renk "G" hem açık hem koyu zeminde okunur — renkleri DEĞİŞTİRME (marka kuralı) */
.btn-google .g-mark { width: 18px; height: 18px; flex-shrink: 0; }

.auth-note {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--tint-neutral);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.55;
}
.auth-note .ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: var(--sp-1); }
.auth-note b { color: var(--text); }

.auth-err {
  display: none;
  color: var(--bad); font-size: var(--fs-sm); line-height: 1.5;
  background: var(--bad-soft); border-radius: var(--r-sm); padding: var(--sp-3);
}
.auth-switch { text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.linkish {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { opacity: 0.8; }

/* Kenar menü: kim giriş yapmış + senkron durumu */
.who {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: var(--icon-box);
  font-size: var(--fs-sm);
}
.who[hidden] { display: none; }
.who-avatar {
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--accent);
  color: var(--ink-ters); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
}
.who-name {
  flex: 1; min-width: 0;
  font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who .linkish { flex-shrink: 0; font-size: var(--fs-xs); text-decoration: none; color: var(--faint); }
.who .linkish:hover { color: var(--bad); opacity: 1; }

.sync-state {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4;
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.sync-state[hidden] { display: none; }
.sync-state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.sync-off { background: var(--warn-soft); color: var(--warn-ink); }

/* =====================================================================
   Onay penceresi — tarayıcının "localhost says" kutusu YERİNE
   ===================================================================== */

.modal-host {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgba(8, 12, 20, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* PENCERE EKRANI ASMAZ — kayan yalnizca GOVDE.
   Kural penceresi uzun (senin cumlen + kural + neden + ornekler + ipucu)
   ve karta yukseklik siniri YOKTU: baslik ustten, "Anladim" dugmesi
   alttan TASIYORDU (ekran goruntusunde goruldu). Flex ortalamada tasan
   kutunun ust kismi kaydirilamaz da — baslik erisilemez hale geliyordu.
   Karti komple kaydirmak (eski mobil kurali) da yanlis: baslik ve onay
   dugmesi her zaman gorunur kalmali, yoksa kullanici kapatma yolunu
   ariyor. Cozum: kart max-height + govde overflow. */
.modal-card {
  width: min(100%, 460px);
  max-height: 88vh;
  max-height: 88dvh;    /* mobil: adres cubugu acilinca vh yaniltir */
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
/* Uzun ogretici icerik (dilbilgisi kurali) daha genis kartta daha KISA
   olur — ayni metin 460px'te ~1900px, 560px'te ~1500px yer kapliyor. */
.modal-card.genis { width: min(100%, 560px); }
.modal-title {
  flex: 0 0 auto;
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.2px;
}
.modal-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  color: var(--muted); font-size: var(--fs-base); line-height: 1.6;
}
.modal-body b { color: var(--text); }
/* "Devami var" isareti — govde tasiyorsa alt kenar yumusakca solar.
   Dibe inince kalkar, yoksa devami varmis gibi durur ama yoktur. */
.modal-body.kayar {
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.modal-body.kayar.dipte { -webkit-mask-image: none; mask-image: none; }
.modal-quote {
  margin-top: var(--sp-3);
  background: var(--tint-neutral);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text);
}
.modal-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.modal-actions .btn { min-width: 120px; justify-content: center; }

/* =====================================================================
   Düzeltmeler ekranı — bildirilen cümleyi kullanıcı kendi düzeltir
   ===================================================================== */

.fix-list { display: grid; gap: var(--sp-4); }

.fix-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card2);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

.fix-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
}
.fix-id { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.fix-word { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.2px; }
.fix-tag { color: var(--faint); font-size: var(--fs-sm); }
.fix-date { color: var(--faint); font-size: var(--fs-sm); white-space: nowrap; }

.fix-orig {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--tint-neutral);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
}

.fix-field { display: grid; gap: var(--sp-1); min-width: 0; }
.fix-field > span {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--faint);
}
.fix-field > input[type=text] { width: 100%; min-width: 0; }

/* AI önerisi doldurulduğunda alanı vurgula — kullanıcı neyin değiştiğini görsün */
.ai-doldu { border-color: var(--violet) !important; box-shadow: 0 0 0 3px var(--violet-soft); }
.ai-not {
  background: var(--violet-soft); color: var(--text);
  border-radius: var(--r-sm); padding: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.55;
}
.ai-not > .ic { display: inline-block; vertical-align: -4px; width: 16px; height: 16px;
  margin-right: var(--sp-2); color: var(--violet); }

/* .rv-plan KALDIRILDI: tekrar takvimi artik kart-icinde-kutu degil, kendi
   karti ve kutu dagilimiyla yan yana duruyor (bkz. renderReview). */

/* Hikaye arşivi — yüzlerce hikaye olabilir. Tek uzun çubuk yerine ÇOK
   SÜTUNLU: aynı ekranda çok daha fazla hikaye görünür. Flex, çünkü son
   satırdaki kayıtlar kalan genişliği paylaşmalı (bkz. .stat-grid). */
.st-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.st-list > * { flex: 1 1 230px; min-width: 0; }
.st-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left; width: 100%; min-width: 0;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  transition: border-color var(--mo-hizli) ease, background var(--mo-hizli) ease;
}
.st-row:hover { border-color: var(--accent); }
.st-row.on { border-color: var(--accent); background: var(--accent-soft); }
.st-ic {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--violet); color: var(--ink-ters);
}
:root[data-theme="dark"] .st-ic { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-ic { color: #0f1720; }
}
.st-ic .ic { width: 14px; height: 14px; }
/* Başlık ve tarih AYRI SATIRDA — inline span'ler yan yana yapışıyordu */
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.st-t {
  display: block; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-m {
  display: block; color: var(--faint); font-size: var(--fs-xs); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* KAYNAK ROZETI (AI / metnim) ve METIN KAYNAGI CIPI — ikisi de %13'luk
   tint tasiyordu ve ayni satirdaki DOLU sparkles cipinin yaninda soluk
   kaliyordu (kullanici ekran goruntusuyle bildirdi: ayni kartta biri
   dolu mor, oteki soluk lavanta).
   Oteki kimlik cipleriyle ayni desen: dolu renk + ters yazi/ikon. */
.st-badge {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  background: var(--violet); color: var(--ink-ters);
}
.st-badge-mt { background: var(--accent); color: var(--ink-ters); }
.st-ic-mt { background: var(--accent); color: var(--ink-ters); }
:root[data-theme="dark"] .st-badge,
:root[data-theme="dark"] .st-badge-mt,
:root[data-theme="dark"] .st-ic-mt { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-badge,
  :root:not([data-theme="light"]) .st-badge-mt,
  :root:not([data-theme="light"]) .st-ic-mt { color: #0f1720; }
}

/* Okuma yer imi: ince ilerleme cizgisi + "kaldigin yer" satiri */
.st-ilerleme {
  display: block; height: 3px; margin-top: var(--sp-2);
  background: var(--line); border-radius: var(--r-full); overflow: hidden;
}
.st-ilerleme-dolu { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.st-kaldi {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-1);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 700;
}
.st-kaldi .ic { width: 12px; height: 12px; }

/* Arsiv satiri + silme dugmesi: dugme satirin ICINDE degil YANINDA durur,
   yoksa satira tiklayinca yanlislikla silinir. */
.st-row-wrap { position: relative; display: flex; align-items: stretch; min-width: 0; }
.st-row-wrap .st-row { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.st-del {
  flex-shrink: 0; width: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--line);
  border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm);
  color: var(--faint); cursor: pointer;
  transition: color var(--mo-hizli) ease, background var(--mo-hizli) ease, border-color var(--mo-hizli) ease;
}
.st-del:hover { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.st-del .ic { width: 15px; height: 15px; }

/* ---- Kendi metnini yapistir ---- */
.mt-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.mt-form input[type="text"] { width: 100%; }
.mt-form textarea {
  width: 100%; resize: vertical; min-height: 150px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--text); font-family: inherit; font-size: var(--fs-base); line-height: 1.6;
}
.mt-form textarea:focus { outline: none; border-color: var(--accent); }
.mt-say { font-size: var(--fs-sm); margin-left: auto; align-self: center; }
.mt-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-4);
}
.mt-head .ic { width: 14px; height: 14px; }

/* ---- KİTAP MODU: hikaye bir kitap sayfası gibi okunur ---- */
.book {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-8) var(--sp-5);
  margin-bottom: var(--sp-4);
  max-width: 72ch;
}
.book-title {
  font-family: var(--font-okuma);
  font-size: var(--fs-xl); font-weight: 700;
  text-align: center; margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.book .story-p {
  font-family: var(--font-okuma);
  line-height: 2;
  text-align: justify;
  hyphens: auto;
  margin: 0 0 var(--sp-4);
}
.book .story-p-tr {
  color: var(--muted);
  line-height: 1.85;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}
/* Çeviri VARSAYILAN OLARAK KAPALI — önce İngilizceyi anlamaya çalış */
.book .story-p-tr[hidden] { display: none; }

/* İKİ SAYFA YAN YANA — gerçek kitap gibi. Dar ekranda tek sütuna düşer. */
.book.iki .story-p {
  column-count: 2;
  column-gap: var(--sp-10);
  column-rule: 1px solid var(--line);
}
.book.iki { max-width: 108ch; }
/* Kenar menü 264px yer kapladığı için eşik içerik genişliğine göre seçildi.
   Menü daraltılınca (ray modu) iki sütun daha erken devreye girer. */
@media (max-width: 980px) {
  .book.iki .story-p { column-count: 1; column-rule: none; }
  .book.iki { max-width: 72ch; }
}
/* Yazı boyutu kademeleri — A− / A+ */
.book.fs-0 .story-p, .book.fs-0 .story-p-tr { font-size: 15px; }
.book.fs-1 .story-p, .book.fs-1 .story-p-tr { font-size: 17.5px; }
.book.fs-2 .story-p, .book.fs-2 .story-p-tr { font-size: 20px; }
.book.fs-3 .story-p, .book.fs-3 .story-p-tr { font-size: 23px; line-height: 2.05; }

.book-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.book-pg { color: var(--faint); font-size: var(--fs-sm); font-weight: 700; }
.fs-ctrl { display: inline-flex; gap: var(--sp-1); margin-left: var(--sp-2); }

@media (max-width: 940px) {
  .book { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
}

/* Boşluk doldurma: metin solda, kelime bankası SAĞDA ve yapışkan.
   Banka altta kalınca metni okurken kelimeler görünmüyordu. */
.s3-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-6); }
.s3-bank {
  position: sticky; top: var(--sp-4); align-self: start;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  max-height: calc(100vh - var(--sp-10));
  overflow-y: auto;
}
.s3-bank .story-bank { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s3-hint {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: var(--fs-xs); line-height: 1.5;
}
@media (max-width: 940px) {
  .s3-wrap { grid-template-columns: 1fr; }
  .s3-bank { position: static; max-height: none; order: -1; }
}

/* Kelime penceresinde "çalışmaya ekle" */
.wp-add { margin-top: var(--sp-3); }
.wp-add .btn { width: 100%; justify-content: center; }
/* Zaten calisilan kelime: dugme yerine durum satiri */
.wp-durum {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
}
.wp-durum .ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--ok); }

/* =====================================================================
   Gölgeleme turu — dinle, hemen tekrarla
   ===================================================================== */

.gl-kart { /* genişlik kartın kendisi kadar — sağda boşluk bırakma */ }
.gl-adim {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
  margin-bottom: var(--sp-5);
}
.gl-cumle {
  font-size: var(--fs-2xl); line-height: 1.5;
  margin-bottom: var(--sp-3);
  transition: filter var(--mo-orta) ease;
}
/* Metni gizleme: ileri seviye gölgeleme (script olmadan) */
.gl-gizli { filter: blur(7px); -webkit-user-select: none; user-select: none; }
.gl-gizli:hover { filter: blur(0); }
.gl-tr { color: var(--muted); font-size: var(--fs-base); margin-bottom: var(--sp-5); }

/* Hız seçimi — tek gövdeli segment kontrolü, satırın sağına yaslanır */
.gl-hiz {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-left: auto; padding: var(--sp-1);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.gl-hiz .btn {
  height: calc(var(--ctrl-h) - var(--sp-3));
  min-height: 0; padding: 0 var(--sp-3);
  border: 0; background: transparent; box-shadow: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.gl-hiz .btn:hover { background: var(--card); color: var(--text); }
.gl-hiz .btn.on {
  background: var(--card); color: var(--text);
  box-shadow: 0 1px 2px rgba(11,11,11,0.10);
}

/* =====================================================================
   Telaffuz pratiği — tarayıcının konuşma tanıma motoruyla
   ===================================================================== */

.tlf-alan { margin-top: var(--sp-3); }
.tlf-btn { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tlf-btn .ic { width: 15px; height: 15px; }
.tlf-btn.tlf-dinliyor {
  border-color: var(--bad); color: var(--bad);
  animation: tlf-nabiz 1.1s ease-in-out infinite;
}
/* CUMLE ANLASILDIYSA dugme SESSIZLESIR — is bitti, yeniden okumak artik
   istege bagli. Once puandan bagimsiz olarak hep "Tekrar oku" yaziyor ve
   normal vurgusunda duruyordu: kusursuz okunmus bir cumlede bu bir
   duzeltme cagrisi gibi okunuyordu (kullanici bildirdi).
   Kaldirilmadi — gölgeleme icin tekrar okumak degerli; yalnizca "yapman
   gereken is" olmaktan cikti. */
.tlf-btn.tlf-tamam {
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}
.tlf-btn.tlf-tamam:hover { color: var(--text); border-color: var(--btn-line); }
@keyframes tlf-nabiz { 50% { box-shadow: 0 0 0 4px var(--bad-soft); } }

.tlf-sonuc {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.6;
  background: var(--card2);
}
.tlf-sonuc[hidden] { display: none; }
.tlf-iyi   { background: var(--ok-soft); }
.tlf-orta  { background: var(--warn-soft); }
.tlf-zayif { background: var(--bad-soft); }
.tlf-hata  { background: var(--card2); color: var(--muted); }

.tlf-basi { margin-bottom: var(--sp-2); }
.tlf-kelimeler { line-height: 2; }
.tlf-kelimeler span {
  display: inline-block; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm); margin-right: 3px;
  font-size: var(--fs-base);
}
/* Anlaşılan yeşil, anlaşılmayan kırmızı — puan değil, NEREDE takıldığın */
.tlf-ok  { background: var(--ok-soft); color: var(--ok-strong); }
.tlf-yok { background: var(--bad-soft); color: var(--bad); font-weight: 700;
  text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 3px; }
:root[data-theme="dark"] .tlf-ok { color: var(--ok); }

.tlf-duyulan { margin-top: var(--sp-2); color: var(--faint); font-size: var(--fs-xs); font-style: italic; }

.ch-araclar { display: flex; flex-direction: column; gap: var(--sp-1); flex-shrink: 0; }
.ch-tlf { align-self: flex-start; max-width: 88%; margin-top: 0; }

/* =====================================================================
   Serbest sohbet — AI ile diyalog
   ===================================================================== */

.ch-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.ch-top h2 { margin-bottom: var(--sp-1); }

.ch-log {
  max-height: 56vh; overflow-y: auto;
  padding: var(--sp-2) var(--sp-1);
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ch-row { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: 88%; }
.ch-ai { align-self: flex-start; }
.ch-me { align-self: flex-end; flex-direction: row-reverse; }

.ch-bub {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-base); line-height: 1.6;
  min-width: 0;
}
.ch-ai .ch-bub {
  background: var(--card2); border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-sm);
}
.ch-me .ch-bub {
  background: var(--accent); color: var(--ink-ters);
  border-bottom-right-radius: var(--r-sm);
}
.ch-tr { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-2);
  padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
.ch-tr[hidden] { display: none; }

.ch-say {
  flex-shrink: 0; width: 30px; height: 30px; margin-top: var(--sp-1);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--faint); cursor: pointer;
}
.ch-say:hover { border-color: var(--accent); color: var(--accent); }
.ch-say .ic { width: 15px; height: 15px; }

/* Düzeltme — kullanıcının cümlesinin altında, mor vurguyla */
.ch-fix {
  align-self: flex-end; max-width: 88%;
  background: var(--violet-soft); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.55;
  margin-top: calc(var(--sp-3) * -1 + var(--sp-1));
}
.ch-fix > .ic { display: inline-block; vertical-align: -3px; width: 15px; height: 15px;
  margin-right: var(--sp-1); color: var(--violet); }
.ch-fix b { color: var(--violet); }
.ch-fix span { display: block; color: var(--muted); margin-top: var(--sp-1); }

.ch-bekle { color: var(--faint); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.ch-bekle .ic { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-right: var(--sp-2); }

/* Yazma satiri: giris + Gonder. Ustteki gunlukten ve alttaki ipucundan
   NEFES PAYIYLA ayrilir — hepsi birbirine yapisiyordu. */
.ch-yaz { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.ch-yaz input { flex: 1; min-width: 0; }
.ch-yaz .btn { flex-shrink: 0; padding: 0 var(--sp-6); }
.ch-ipucu {
  margin: var(--sp-3) 0 0;
  color: var(--faint); font-size: var(--fs-sm); line-height: 1.55;
}

/* Sesli cevap: mikrofon dugmesi yazma satirinin BASINDA — birincil yol o */
.ch-mik { flex-shrink: 0; gap: var(--sp-2); }
.ch-mik .ic { width: 16px; height: 16px; }
.ch-mik-on {
  background: var(--bad-soft); border-color: var(--bad); color: var(--bad);
  animation: mo-dinliyor 1.1s ease-in-out infinite;
}
@keyframes mo-dinliyor { 50% { box-shadow: 0 0 0 5px var(--bad-soft); } }
.ch-sesli-not { margin-top: var(--sp-3); margin-bottom: 0; }

@media (max-width: 940px) {
  .ch-row, .ch-fix { max-width: 100%; }
}

/* Hikaye araç çubuğunda kaynak rozeti */
.story-src {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--faint);
}
.story-src > .ic { width: 16px; height: 16px; }

.fix-links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fix-links a {
  display: inline-flex; align-items: center; height: 28px;
  padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: var(--tint-blue); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
}
.fix-links a:hover { border-color: var(--accent); }

.fix-label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}

.summary-big { text-align: center; padding: var(--sp-4) 0 var(--sp-2); }
/* Renk KAPSAYICIDAN gelir (currentColor) — dolu zeminde ters ikon. */
.summary-big .sb-icon .ic { width: 48px; height: 48px; }
.summary-big .sb-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.4px; margin: var(--sp-2) 0 var(--sp-1); }

/* =====================================================================
   Hikaye (kademeli okuma)
   ===================================================================== */

.story-toolbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.story-toolbar select { min-width: 260px; }

.stage-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-5); }
/* =====================================================================
   OKUMA GENİŞLİĞİ ve EYLEM HİYERARŞİSİ
   ===================================================================== */

/* OKUMA genişliği YALNIZCA kitap okuyucusunda geçerlidir.
   Kart açıklaması (.sub), bilgi kutusu (.notice), diyalog ve gölgeleme
   ARAYÜZ/ALIŞTIRMA metnidir — kartın genişliğini alırlar, yoksa geniş
   ekranda sağda kocaman boşluk kalır. (Bu hata bir kez yapıldı: her .sub
   ve .notice 539px'de takılı kalıyordu.) .book içindeki iki yandaki boşluk
   ise KASITLIDIR — sayfa hissini o veriyor. */
.book .story-body, .book .story-line { max-width: var(--read-w); }

/* Okuma kartı: içindeki her şey dar sütunda kalır */
.read-col { max-width: var(--read-w); }

/* =====================================================================
   YAN YANA DURAN KONTROLLER AYNI YÜKSEKLİKTE
   ---------------------------------------------------------------------
   Kural CLAUDE.md'de zaten yazılıydı ("buton, select, input, sekme, hap →
   --ctrl-h") ama uygulanması her bileşenin kendi sorumluluğundaydı ve bir
   yerde kaçtı: eylem satırındaki yeşil rozet `.notice` sınıfını kullanıyordu,
   `.notice` blok bir bilgi paneli olduğu için 56px geliyordu; yanındaki
   düğme 42px'ti (ölçüldü: 14px fark, kullanıcı bildirdi).

   Bu blok kuralı SATIRIN kendisine taşır: bir eylem satırına ne konursa
   konsun kontrol yüksekliğinde hizalanır. Böylece yeni bir öğe eklerken
   kimse ölçüyü hatırlamak zorunda kalmaz.
   `scratchpad/hiza-olc.js` bütün ekranları dört genişlikte tarayıp
   doğruluyor — yeni satır eklerken çalıştır.
   ===================================================================== */
.act, .act-main, .act-more, .btn-row, .ex-actions, .modal-actions,
.filters, .fb-duzelt-satir, .seg, .listen-bar {
  align-items: center;
}
.act > *, .act-main > *, .act-more > *, .btn-row > *, .ex-actions > *,
.modal-actions > *, .filters > *, .fb-duzelt-satir > * {
  min-height: var(--ctrl-h);
}
/* EYLEM SATIRINDA (.act) KÜÇÜK DÜĞME YOK.
   `.btn-sm` bir araç çubuğu ölçüsüdür (34px) ve tablo satırı, süzgeç,
   kart içi ikincil eylem için doğrudur. Ama hero'daki eylem satırı TEK bir
   görsel sıradır: ayraçtan sonra gelen "+10 Kelime" 34px kalınca satır
   basamaklı görünüyordu. Aynı sırada duran düğmeler aynı yükseklikte. */
.act .btn-sm { min-height: var(--ctrl-h); }

/* Diğer satırlarda küçük düğme ve çip kendi ölçeğinde kalır — bilerek daha
   alçak ve kendi içlerinde tutarlı (bkz. TASARIM ÖLÇEĞİ). */
.btn-row > .btn-sm, .ex-actions > .btn-sm, .modal-actions > .btn-sm,
.filters > .btn-sm, .fb-duzelt-satir > .btn-sm,
.btn-row > .schip, .filters > .schip {
  min-height: 34px;
}
@media (max-width: 940px) {
  /* Dokunma hedefi kuralı: telefonda küçük düğme de en az 40px */
  .btn-row > .btn-sm, .ex-actions > .btn-sm, .modal-actions > .btn-sm,
  .filters > .btn-sm, .fb-duzelt-satir > .btn-sm,
  .btn-row > .schip, .filters > .schip {
    min-height: 40px;
  }
}
/* Ayraç bir kontrol değil — dikey çizgi kalsın */
.act > .act-sep { min-height: var(--ctrl-h); }

/* --- Eylem grubu: tek birincil eylem + ayrılmış ikincil grup --- */
.act {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.act-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- DURUM HAPI — düğmelerin YANINDA duran, tıklanmayan bilgi ----
   "Günün dersi tamamlandı" rozeti `.notice` sınıfını kullanıyordu; `.notice`
   ise blok bir bilgi paneli: padding'i `--sp-4`, yüksekliği 56px. Yanındaki
   düğme 42px olduğu için satır **14px kaymış** görünüyordu (ölçüldü).
   Durum hapı düğmeyle AYNI yüksekliktedir (`--ctrl-h`) ve rengi yalnızca
   zeminden gelir — düğme gibi görünüp tıklanmaya davet etmesin. */
.durum-hap {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--ok-soft); color: var(--ok-strong);
  border: 1px solid rgba(0, 166, 62, 0.42);   /* .notice-ok ile aynı çerçeve */
}
.durum-hap > .ic { width: 16px; height: 16px; flex-shrink: 0; }
:root[data-theme="dark"] .durum-hap { color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .durum-hap { color: var(--ok); }
}
.act-sep {
  width: 1px; align-self: stretch; min-height: var(--ctrl-h);
  background: var(--line); flex-shrink: 0;
}
.act-more { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
@media (max-width: 940px) {
  .act-sep { display: none; }
  .act-more { margin-left: 0; width: 100%; }
  .act-main { width: 100%; }
  .act-main > .btn { flex: 1; justify-content: center; }
}

/* Sekme şeridi (Yönetim ekranı) — hapların yatay grubu */
.seg {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.seg .schip .ic { width: 16px; height: 16px; }

.schip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 38px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--r-full);
  padding: 0 var(--sp-4);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--mo-hizli);
}
.schip:hover { border-color: var(--accent); color: var(--text); }
.schip.active { background: var(--accent); border-color: var(--accent); color: var(--ink-ters); }
.schip .sc-lvl { opacity: .65; font-weight: 600; font-size: var(--fs-xs); }

/* Genişlik sınırı YOK: bu gövde senaryo diyaloğunda da kullanılıyor ve orada
   kartın tamamını kaplamalı. Kitap okuyucusunda sınırı .book veriyor. */
.story-body {
  font-family: var(--font-okuma);
  font-size: 17.5px;
  line-height: 1.95;
}
.story-chapter {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 800;
  color: var(--faint);
  text-transform: uppercase; letter-spacing: 1px;
  margin: var(--sp-6) 0 var(--sp-3);
}
.story-chapter .ic { color: var(--accent); }
.story-chapter:first-child { margin-top: 0; }

.story-p { margin: 0 0 var(--sp-4); }
.story-p-tr { color: var(--muted); font-size: var(--fs-base); border-left: var(--kenar-vurgu) solid var(--line-strong); padding-left: var(--sp-4); }
.story-narr { margin: 0 0 var(--sp-1); font-weight: 500; }
.story-narr-tr {
  margin: 0 0 var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-sm);
  font-family: var(--font-ui);
}

.sw {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px dotted var(--accent-ring);
  cursor: help;
}

/* Diyalog: konuşan adı + replik. Ad sütunu 76px; replik balonu kalan
   genişliği alır — kart ne kadarsa o kadar, sağda boşluk kalmaz. */
.dlg-line {
  display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-3);
}
.dlg-who {
  min-width: 76px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--faint);
  padding-top: var(--sp-2);
  text-align: right;
}
.dlg-me .dlg-who { color: var(--accent); }
.dlg-body {
  flex: 1; min-width: 0;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--sp-1) var(--r-md) var(--r-md) var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.dlg-me .dlg-body { background: var(--accent-soft); border-color: var(--accent-ring); border-radius: var(--r-md) var(--sp-1) var(--r-md) var(--r-md); }
.dlg-en { font-size: var(--fs-md); }
.dlg-tr {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-family: var(--font-ui);
  margin-top: var(--sp-1);
}

.blank {
  display: inline-block;
  min-width: 92px;
  border: none;
  border-bottom: 2.5px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--sp-1) var(--sp-1) 0 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-align: center;
  padding: 0 var(--sp-2);
  cursor: pointer;
  transition: background var(--mo-hizli);
}
.blank:hover { background: var(--accent-ring); }
.blank.blank-sel { outline: 2.5px solid var(--accent-ring); outline-offset: 1.5px; }
.blank.blank-ok  { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-strong); cursor: default; }
.blank.blank-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); cursor: default; }
:root[data-theme="dark"] .blank.blank-ok { color: var(--ok); }

.story-bank {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.story-bank .chip.used { opacity: .3; pointer-events: none; }
.story-score { font-weight: 800; font-size: var(--fs-md); margin-top: var(--sp-3); }

.story-empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.story-empty .ic { width: 40px; height: 40px; color: var(--line-strong); display: block; margin: 0 auto var(--sp-3); }

/* =====================================================================
   Kelime anlam penceresi
   ===================================================================== */

.word-pop {
  position: fixed;
  z-index: 80;
  max-width: 300px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--mo-hizli), transform var(--mo-hizli);
}
.word-pop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.word-pop .wp-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.word-pop .telaffuz { margin: 0 0 var(--sp-2); }
.word-pop .wp-form { font-size: var(--fs-xs); color: var(--faint); margin-bottom: var(--sp-1); }
.word-pop .wp-tr { color: var(--text); font-weight: 600; }
.word-pop .wp-irr { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--warn-ink); }
.word-pop .wp-meta { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--faint); }

/* =====================================================================
   Konusma senaryolari
   ===================================================================== */

/* 21 senaryo var — kartlar daha compact olmalı ki tarama kolaylaşsın.
   280px'te geniş ekranda 4 sütun çıkıyordu ve kartlar seyrekti; 240px ile
   daha çok senaryo aynı anda görünür. */
/* 21 senaryo — kartlar dar ve yoğun olmalı ki bir bakışta taransın.
   Açıklama satırı karttan çıkarıldı; başlık + ortam + cümle sayısı yeter. */
.convo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.convo-grid > * { flex: 1 1 196px; min-width: 0; }
/* Senaryo kartları: metin uzunluğu farklı olsa da eşit yükseklik, alt bilgi altta */
.convo-card {
  display: flex; flex-direction: column;
  background: var(--card2);
  /* Kenar ORTAM renginde: 21 kart ayni gri kenarla duruyordu (olculdu:
     kenar doygunlugu 8). Kimlik rengi karta duser, rozet deseniyle ayni. */
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--ortam-renk, var(--line)) 28%, var(--line));
  border-radius: var(--r-md);
  padding: var(--sp-4);
  cursor: pointer;
  transition: transform var(--mo-hizli), border-color var(--mo-hizli);
}
.convo-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.convo-card .cc-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.convo-card .cc-ic {
  width: var(--icon-box); height: var(--icon-box); border-radius: var(--r-md);
  /* ONCE duz --accent zemin + BEYAZ ikon vardi: 21 senaryonun hepsi ayni
     maviydi (kimlik yok) ve koyu temada --accent parlak oldugu icin beyaz
     ikon 2,72:1 olculmustu (CLAUDE.md'de kayitli). Artik ortam renginde
     TINT zemin + ayni renkten koyulastirilmis ikon — cip kuralinin
     deseni. */
  /* DOLU ortam rengi. Acik temada ortam renkleri koyu-doygun secildi
     (bkz. ORTAM RENKLERI), beyaz ikon uzerlerinde okunur; koyu temada
     parlak olduklari icin ikon KOYU'ya doner (asagidaki kural). */
  background: var(--accent);
  background: var(--ortam-renk, var(--accent));
  color: var(--ink-ters);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.convo-card .cc-ic .ic { width: 20px; height: 20px; }
:root[data-theme="dark"] .convo-card .cc-ic { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .convo-card .cc-ic { color: #0f1720; }
}
/* KOYU TEMA: --accent burada PARLAK (#4d94ff). Beyaz ikon uzerinde
   olculdu 2.72:1 — arayuz esigi 3:1'in altinda, ikon zeminde eriyordu.
   Pos rozetlerindeki kural burada da gecerli: parlak zemin -> KOYU ikon. */
/* GUNCELLENDI: zemin artik PARLAK DEGIL, ortam renginin %16'lik tinti
   (koyu temada koyu bir yuzey). Sabit koyu ikon o eski parlak zemin
   icindi ve yeni tint uzerinde 1,26:1'e dusuyordu — olculdu, ikon
   gorunmez oluyordu. Kural acik temayla AYNI olmali: ortam renginden
   turetilmis, zemine gore ters yonde karistirilmis ikon. Koyu temada
   `--text` acik oldugu icin ayni color-mix dogru yone calisir, bu yuzden
   ayri bir kural GEREKMIYOR — sabit renk kaldirildi. */
.convo-card .cc-lvl {
  display: inline-flex; align-items: center; height: 22px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); padding: 0 var(--sp-2); color: var(--muted);
}
.convo-card .cc-best {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-left: auto; color: var(--ok-strong); font-weight: 700; font-size: var(--fs-sm);
}
:root[data-theme="dark"] .convo-card .cc-best { color: var(--ok); }
.convo-card .cc-title { font-weight: 800; font-size: var(--fs-md); line-height: 1.35; }
.convo-card .cc-desc { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); line-height: 1.5; }
.convo-card .cc-meta { color: var(--faint); font-size: var(--fs-xs); margin-top: auto; padding-top: var(--sp-3); }
.convo-done { border-color: rgba(12,163,12,0.35); }

.dlg-current .dlg-body { outline: 2px solid var(--accent-ring); }

.convo-ex { margin-top: var(--sp-5); border-top: 2px dashed var(--line); padding-top: var(--sp-5); }
.convo-ex-prompt { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.convo-you {
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent);
}
.convo-tr { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-ui); }
.convo-ex .zone { margin-bottom: var(--sp-2); }
.convo-ex .chip { font-family: var(--font-ui); }

/* =====================================================================
   Rozetler ve sinav
   ===================================================================== */

/* Son satır boş kalmasın diye flex (bkz. .stat-grid'deki not) */
/* =====================================================================
   ROZETLER — aile rengi + kademe + ilerleme
   ---------------------------------------------------------------------
   Eski hâli: 30 rozet tek ızgarada, HEPSİ aynı amber tonda, kilitliler
   `opacity:.55 + grayscale(1)` ile neredeyse okunmuyordu ve bir sonrakine
   ne kadar kaldığı hiçbir yerde yazmıyordu.
   Şimdi: her AİLE kendi rengini taşır (renk = anlam, CLAUDE.md kuralı),
   her rozetin KADEMESİ vardır, kilitli rozet İLERLEME çubuğu gösterir.
   Kilitli artık soluk değil, SESSİZ: okunur ama öne çıkmaz.
   ===================================================================== */
.rozet-aile { margin-bottom: var(--sp-5); }
.rozet-aile:last-child { margin-bottom: 0; }
.ra-bas {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  /* Cizgi AILE RENGINDE ve 2px: sekiz grubu birbirinden ayiran tek
     isaret buydu ve olcumde doygunlugu 8 cikti (yani gri). */
  border-bottom: 2px solid var(--line);
  border-bottom: 2px solid color-mix(in srgb, var(--rozet-renk) 55%, var(--line));
}
/* Aile adi da kendi renginde — baslik satiri tek parca okunsun */
.ra-bas b { color: var(--text); }
.ra-bas b { color: color-mix(in srgb, var(--rozet-renk) 55%, var(--text)); }
.ra-bas b { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .3px; }
.ra-bas .ic { width: 16px; height: 16px; color: var(--rozet-renk); }
.ra-say {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 700;
  color: var(--faint); font-variant-numeric: tabular-nums;
}

/* Satir ici ortam ikonu — kimlik rengiyle. `--ortam-renk` yoksa
   (bilinmeyen ortam) notr tona duser, hicbir yerde patlamaz. */
.ort-ic {
  display: inline-flex; align-items: center; vertical-align: -0.15em;
  color: var(--faint);
  /* SAF kimlik rengi degil, METNE dogru karistirilmis hali: olculdu, en
     acik ortam rengi (time/feelings) kart zemininde 2,94:1 kaliyordu ve
     arayuz esigi 3:1. Karistirma HUE'yu korur ve iki temada da dogru
     yone calisir (acikta koyulasir, koyuda acilir). */
  color: color-mix(in srgb, var(--ortam-renk, var(--faint)) 85%, var(--text));
}
.ort-ic .ic { width: 1em; height: 1em; }
/* Bugun ekranindaki ortam hapi — sinifi JS veriyor, ikonu burada renklenir */
.scene-chip .ic {
  color: var(--faint);
  color: color-mix(in srgb, var(--ortam-renk, var(--faint)) 85%, var(--text));
}

/* ==================== ORTAM RENKLERI ====================
   Yirmi ortamin (otel, restoran, havaalani...) kimlik rengi. Olculdu:
   ortam ikonlari HER EKRANDA griydi — Senaryolar'da 46/53 ikon,
   Kelimeler'de 448/460. Rozet sayfasindaki sorunun aynisi: kimlik rengi
   karta dusmuyordu.

   Amac AYIRT ETMEK DEGIL — 20 rengi kimse ezberlemez. Amac her ortamin
   kendi kimligini tasimasi ve ekranin canlanmasi. Renk ORTAMIN ISINE
   gore secildi (yemek turuncu, gokyuzu mavi, acil kirmizi).

   ILERLEME DILI ILE KARISMAZ: orada renk DURUM anlatir (yeni/yolda/
   ogrenilmis) ve rozetle birlikte gider; burada renk KIMLIK'tir ve
   yalnizca ortam ikonuna dusuer.

   JS yalnizca `sc-<id>` sinifini verir, renk BURADA yasar. */
.sc-smalltalk   { --ortam-renk: #2b8fd4; }
.sc-restaurant  { --ortam-renk: #d95f2b; }
.sc-hotel       { --ortam-renk: #7c4dbd; }
.sc-airport     { --ortam-renk: #1a7fd4; }
.sc-transport   { --ortam-renk: #b8760a; }
.sc-shopping    { --ortam-renk: #c93d7a; }
.sc-home        { --ortam-renk: #2e8b57; }
.sc-health      { --ortam-renk: #cc3344; }
.sc-directions  { --ortam-renk: #0d8f8f; }
.sc-time        { --ortam-renk: #5a7a99; }
.sc-family      { --ortam-renk: #c4682b; }
.sc-feelings    { --ortam-renk: #6f8f1c; }
.sc-numbers     { --ortam-renk: #4a52c4; }
.sc-phone       { --ortam-renk: #0e9cbd; }
.sc-emergency   { --ortam-renk: #b8232f; }
.sc-work        { --ortam-renk: #3a5a8c; }
.sc-bank        { --ortam-renk: #8a6d1f; }
.sc-leisure     { --ortam-renk: #16a085; }
.sc-school      { --ortam-renk: #6247c4; }
.sc-rental      { --ortam-renk: #5f7a4a; }

:root[data-theme="dark"] .sc-smalltalk   { --ortam-renk: #6cc4f5; }
:root[data-theme="dark"] .sc-restaurant  { --ortam-renk: #ff9a5c; }
:root[data-theme="dark"] .sc-hotel       { --ortam-renk: #b492f0; }
:root[data-theme="dark"] .sc-airport     { --ortam-renk: #5fb8ff; }
:root[data-theme="dark"] .sc-transport   { --ortam-renk: #f0b429; }
:root[data-theme="dark"] .sc-shopping    { --ortam-renk: #ff86b3; }
:root[data-theme="dark"] .sc-home        { --ortam-renk: #5fd08a; }
:root[data-theme="dark"] .sc-health      { --ortam-renk: #ff7d8a; }
:root[data-theme="dark"] .sc-directions  { --ortam-renk: #4fd0d0; }
:root[data-theme="dark"] .sc-time        { --ortam-renk: #9dbcd9; }
:root[data-theme="dark"] .sc-family      { --ortam-renk: #ffab6b; }
:root[data-theme="dark"] .sc-feelings    { --ortam-renk: #b8d94f; }
:root[data-theme="dark"] .sc-numbers     { --ortam-renk: #8a92f5; }
:root[data-theme="dark"] .sc-phone       { --ortam-renk: #4fd3ec; }
:root[data-theme="dark"] .sc-emergency   { --ortam-renk: #ff6b6b; }
:root[data-theme="dark"] .sc-work        { --ortam-renk: #7d9fd4; }
:root[data-theme="dark"] .sc-bank        { --ortam-renk: #d4b04f; }
:root[data-theme="dark"] .sc-leisure     { --ortam-renk: #5fd9b0; }
:root[data-theme="dark"] .sc-school      { --ortam-renk: #a893f5; }
:root[data-theme="dark"] .sc-rental      { --ortam-renk: #9dbc85; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sc-smalltalk   { --ortam-renk: #6cc4f5; }
  :root:where(:not([data-theme="light"])) .sc-restaurant  { --ortam-renk: #ff9a5c; }
  :root:where(:not([data-theme="light"])) .sc-hotel       { --ortam-renk: #b492f0; }
  :root:where(:not([data-theme="light"])) .sc-airport     { --ortam-renk: #5fb8ff; }
  :root:where(:not([data-theme="light"])) .sc-transport   { --ortam-renk: #f0b429; }
  :root:where(:not([data-theme="light"])) .sc-shopping    { --ortam-renk: #ff86b3; }
  :root:where(:not([data-theme="light"])) .sc-home        { --ortam-renk: #5fd08a; }
  :root:where(:not([data-theme="light"])) .sc-health      { --ortam-renk: #ff7d8a; }
  :root:where(:not([data-theme="light"])) .sc-directions  { --ortam-renk: #4fd0d0; }
  :root:where(:not([data-theme="light"])) .sc-time        { --ortam-renk: #9dbcd9; }
  :root:where(:not([data-theme="light"])) .sc-family      { --ortam-renk: #ffab6b; }
  :root:where(:not([data-theme="light"])) .sc-feelings    { --ortam-renk: #b8d94f; }
  :root:where(:not([data-theme="light"])) .sc-numbers     { --ortam-renk: #8a92f5; }
  :root:where(:not([data-theme="light"])) .sc-phone       { --ortam-renk: #4fd3ec; }
  :root:where(:not([data-theme="light"])) .sc-emergency   { --ortam-renk: #ff6b6b; }
  :root:where(:not([data-theme="light"])) .sc-work        { --ortam-renk: #7d9fd4; }
  :root:where(:not([data-theme="light"])) .sc-bank        { --ortam-renk: #d4b04f; }
  :root:where(:not([data-theme="light"])) .sc-leisure     { --ortam-renk: #5fd9b0; }
  :root:where(:not([data-theme="light"])) .sc-school      { --ortam-renk: #a893f5; }
  :root:where(:not([data-theme="light"])) .sc-rental      { --ortam-renk: #9dbc85; }
}

/* AILE RENKLERI — tek yerden; JS sinif adi verir, renk burada yasar.

   DORT AILE PASTELDI ve olcumde ortaya cikti: konusma/okuma/dilbilgisi/
   kesif renkleri acik temada solgun kaliyordu. Marka renkleri (warn,
   accent, violet, ok) zaten temaya duyarli; bu dordu tek deger olarak
   yaziliydi ve iki temanin ortasinda bir yerde duruyordu.
   Artik ikisi de kendi tonunu alir: acik temada KOYU-DOYGUN (beyaz
   uzerinde okunur), koyu temada PARLAK. */
.bf-seri       { --rozet-renk: var(--warn); }
.bf-kelime     { --rozet-renk: var(--accent); }
.bf-alistirma  { --rozet-renk: var(--violet); }
.bf-isabet     { --rozet-renk: var(--ok); }
.bf-konusma    { --rozet-renk: #0e9cbd; }
.bf-okuma      { --rozet-renk: #dd6f22; }
.bf-dilbilgisi { --rozet-renk: #8b5cf0; }
.bf-kesif      { --rozet-renk: #14a37f; }
/* YAZMA — sekiz ailenin hicbirine yakin olmayan tek ton kaldi (gul/macenta).
   Amac ayirt etmek degil, her ailenin kendi kimligini tasimasi; ama iki aile
   ayni hue'da olursa madalyonlar birbirinden ayrilmaz. */
.bf-yazma      { --rozet-renk: #c9256b; }

/* DOLU ZEMIN icin guvenli ton. Madalyon dolu renge gecince beyaz ikon
   amber ve yesil uzerinde eriyor (olculdu: 2,09). Bu iki aile koyu
   varyantina cevrilir; otekiler kendi rengini kullanir. `--tile-ink`
   stat kutularinda ayni isi zaten yapiyordu. */
.bf-seri, .bf-kelime, .bf-alistirma, .bf-isabet,
.bf-konusma, .bf-okuma, .bf-dilbilgisi, .bf-kesif,
.bf-yazma { --rozet-dolu: var(--rozet-renk); }
.bf-seri   { --rozet-dolu: var(--warn-ink); }
.bf-isabet { --rozet-dolu: var(--ok-strong); }
:root[data-theme="dark"] .bf-konusma    { --rozet-renk: #4fd3ec; }
:root[data-theme="dark"] .bf-okuma      { --rozet-renk: #f5a868; }
:root[data-theme="dark"] .bf-dilbilgisi { --rozet-renk: #c4a2ff; }
:root[data-theme="dark"] .bf-kesif      { --rozet-renk: #5fd9b0; }
:root[data-theme="dark"] .bf-yazma      { --rozet-renk: #ff8ab5; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .bf-konusma    { --rozet-renk: #4fd3ec; }
  :root:where(:not([data-theme="light"])) .bf-okuma      { --rozet-renk: #f5a868; }
  :root:where(:not([data-theme="light"])) .bf-dilbilgisi { --rozet-renk: #c4a2ff; }
  :root:where(:not([data-theme="light"])) .bf-kesif      { --rozet-renk: #5fd9b0; }
  :root:where(:not([data-theme="light"])) .bf-yazma      { --rozet-renk: #ff8ab5; }
}

/* YOGUNLUK — katlama KALDIRILDI, bunun yerine kart kucultuldu.
   82 rozetin hepsi gorunur olacaksa sayfa yuksekligi baska turlu
   cozulemez: eski olcuyle telefonda 11 ekran ederdi (olculdu).
   Taban 260 -> 210px: 1440'ta 4 sutundan 5'e cikar. */
.badge-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.badge-grid > * { flex: 1 1 210px; min-width: 0; }
.badge-item {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-2);
  min-height: 0;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--kenar-isik);
}

/* YENI ROZET — son bakistan beri kazanilmis.
   Once yalnizca BUGUN kazanilan bir kez parliyordu (`mo-rozet`) ve ertesi
   gun hicbir iz kalmiyordu. Isaret KALICI: kullanici rozet ekranina bir
   dahaki girisine kadar durur. */
.badge-item.bi-yeni {
  border-color: var(--rozet-renk);
  box-shadow: 0 0 0 1px var(--rozet-renk), var(--kenar-isik);
}
/* ZEMIN `--rozet-dolu`, `--rozet-renk` DEGIL — ve koyu temada ink koyulasir.
   Olculdu: duz `--rozet-renk` + `--ink-ters` ile kontrast 1,82:1'e dustu.
   Sebep madalyonda (.bi-ic) belgelenen tuzagin AYNISI: aile renkleri farkli
   parlaklikta, mavi/mor koyu (beyaz ink iyi) ama amber ve yesil ACIK ve
   beyaz ink onlarda eriyor. `--rozet-dolu` bu iki aile icin onceden
   secilmis koyu varyanti tasiyor. */
.bi-yeni-hap {
  position: absolute; top: calc(-1 * var(--sp-2)); left: var(--sp-3);
  padding: 0 var(--sp-2); height: var(--sp-5);
  display: inline-flex; align-items: center;
  border-radius: var(--r-full);
  background: var(--rozet-dolu, var(--rozet-renk)); color: var(--ink-ters);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
}
/* Aile basligindaki sayac — hangi ailede yeni var, listeye bakmadan */
.ra-yeni {
  margin-left: var(--sp-2); padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--rozet-dolu, var(--rozet-renk)); color: var(--ink-ters);
  font-size: var(--fs-xs); font-weight: 800;
}
/* Koyu temada `--rozet-renk` PARLAK: uzerine beyaz ink konmaz (paylasilan
   cip kurali, .bi-ic ile ayni). */
:root[data-theme="dark"] .bi-yeni-hap,
:root[data-theme="dark"] .ra-yeni { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bi-yeni-hap,
  :root:not([data-theme="light"]) .ra-yeni { color: #0f1720; }
}
/* KAZANILMIŞ rozet.
   GRADYAN KALDIRILDI. Önceki hâl kartın üstüne 135°'lik bir aile-rengi
   yıkaması seriyordu: renk sol üstte başlayıp sağa doğru soluyor, kart
   yarısında kaybolduğu için hem kirli hem "yarım boyanmış" duruyordu.
   Sekiz aile × iki kademe = ekranda aynı anda sekiz ayrı solan yıkama.

   Kazanılmışlık artık MADALYONDAN okunur: ikon aile renginde ve etrafında
   kademenin metal halkası var. Kart yüzeyi DÜZ — yalnızca aile renginden
   çok hafif bir tint alır ve çerçevesi aileye boyanır. */
.badge-item.acik {
  border-color: var(--rozet-renk);   /* color-mix yoksa duz renk */
  border-color: color-mix(in srgb, var(--rozet-renk) 38%, var(--line));
  background: var(--card2);   /* color-mix yoksa duz yuzey */
  background: color-mix(in srgb, var(--rozet-renk) 6%, var(--card2));
}
.badge-item .bi-ic {
  width: var(--icon-box); height: var(--icon-box); flex-shrink: 0;
  /* MADALYON YUVARLAK. Uygulamadaki öteki ikon çipleri kare-yuvarlak
     (--r-md); rozet tek daire, bu yüzden listede madalyon gibi okunuyor. */
  border-radius: var(--r-full);
  /* KILITLI madalyonun tinti — kazanilmis olan asagida DOLU renge gecer. */
  background: var(--card);
  background: color-mix(in srgb, var(--rozet-renk) 18%, transparent);
  /* IKON KENDI TINT'I UZERINDE ERIYORDU: amber ikon, amber %16 zemin —
     olculdu 1.7:1 (arayuz esigi 3:1). Aile rengi HUE olarak korunur,
     yalnizca metin rengine dogru koyulastirilir; ayni kural koyu temada
     da dogru yone calisir (--text orada acik). Olculdu: 3.38 / 5.24. */
  color: var(--rozet-renk);
  color: color-mix(in srgb, var(--rozet-renk) 68%, var(--text));
  display: flex; align-items: center; justify-content: center;
}

/* KAZANILMIS MADALYON — DAHA DOYGUN tint, DAHA KOYU ikon.
   Kullanici bir rozet madalyonunun ekran goruntusunu gonderip "bu tur
   ikonlarin hicbirine dokunmamissin" dedi. Olculdu: zemin doygunlugu 23,
   ikon/zemin kontrasti 3,19 — butun cipler icinde EN DUSUGU.

   DOLU renk (.pos-badge deseni) DENENDI VE GERI ALINDI: aile renkleri
   farkli parlaklikta. Mavi/mor koyu, uzerlerinde beyaz ikon iyi; amber
   ve yesil ACIK, beyaz ikon onlarda eriyor — olculdu, kontrast 2,09'a
   dustu (esik 3:1). CSS'te "zemine gore ikon sec" yok (color-contrast()
   henuz yaygin degil), her aileye elle renk yazmak da tema degisince
   kirilir.
   Onun yerine ikisi TERS yone: zemin %18 -> %38 (daha canli AMA acik
   kalir, --card ile karisir), ikon %68 -> %58 (daha KOYU, --text'e
   yaklasir). Ikisini birden doygunlastirmak denendi ve kontrasti 2,73'e
   dusurdu — ayni hue'da zemin ile ikon birbirine yaklasiyor. Ayrimi
   PARLAKLIK tasir, doygunlugu zemin tasir. */
.badge-item.acik .bi-ic {
  background: var(--rozet-dolu, var(--rozet-renk));
  color: var(--ink-ters);
}
:root[data-theme="dark"] .badge-item.acik .bi-ic { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-item.acik .bi-ic { color: #0f1720; }
}
.badge-item .bi-ic { width: 34px; height: 34px; flex-shrink: 0; }
.badge-item .bi-ic .ic { width: 17px; height: 17px; }
.badge-item .bi-txt { min-width: 0; flex: 1; }
.badge-item .bi-txt b {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); line-height: 1.3;
  /* Kademe etiketi mutlak konumlu ve sağ üstte; uzun bir başlık onun
     altına girmesin diye yer ayrılır. Kart daraldığı için etiket de
     kısaldı (tek harf) ve ayrılan yer buna göre küçüldü. */
  padding-right: var(--sp-5);
}
/* ACIKLAMA TEK SATIR — kartin boyunu belirleyen buydu. Tam metin
   `title` ipucunda; rozet hedefi zaten kisa ("50 gün Yazma turu yap"). */
.badge-item .bi-txt > span {
  display: block; font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ilerleme ve tarih SARMAZ ama kirpilmaz — sayilar okunmali */
.badge-item .bi-ilerleme, .badge-item .bi-tarih { white-space: normal; }
.bi-tik .ic { width: 13px; height: 13px; color: var(--rozet-renk); }
.bi-tarih {
  display: inline-flex !important; align-items: center; gap: 4px;
  color: var(--faint) !important; margin-top: var(--sp-2) !important;
}
.bi-tarih .ic { width: 11px; height: 11px; }

/* KILITLI: soluk DEGIL sessiz. Eski hali grayscale+opacity ile okunmuyordu;
   rozetin ne oldugunu gormek, ona calismanin on sarti. */
/* KILITLI ROZET — sessiz ama RENKSIZ DEGIL.
   Olculdu (7 Agu 2026, 40 kart): kilitli kartin madalyon doygunlugu 6,
   kenari 8 (kazanilmista 37 / 61). 75 rozetin ~%80'i kilitli oldugu icin
   ekran gri bir listeye donusuyordu — kullanici "renkler cok sikici" dedi.
   Aile rengi artik kilitliye de dusuyor, YALNIZCA daha az: kazanilmisla
   ayrim ORAN olarak korunur (madalyon %18 -> %11, kenar %38 -> %22).
   "Sessiz" bagirmayan demektir, renksiz demek degil. */
.badge-item.locked {
  background: var(--card);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--rozet-renk) 22%, var(--line));
}
.badge-item.locked .bi-ic {
  background: var(--card2);
  background: color-mix(in srgb, var(--rozet-renk) 11%, var(--card2));
  color: var(--faint);
  /* Ikon da aile rengini alir ama METNE dogru koyulastirilmis halini —
     tint zemin uzerinde saf aile rengi eriyor (paylasilan cip kurali). */
  color: color-mix(in srgb, var(--rozet-renk) 42%, var(--muted));
}
.badge-item.locked .bi-txt b { color: var(--muted); }

/* ILERLEME: kilitli rozetin altinda ince cubuk + sayi */
.bi-ilerleme { display: block; margin-top: var(--sp-2); }
.bi-bar {
  display: block; height: 4px; border-radius: var(--r-full);
  background: var(--page); overflow: hidden; margin-bottom: var(--sp-1);
}
.bi-bar > i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--rozet-renk);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
}
.bi-ilerleme em {
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* KADEME — bronz / gumus / altin. Renk METALDIR, aile rengi degil.

   İKİ YERDE BİRDEN: madalyonun HALKASI + köşedeki YAZI. Halka tek başına
   bırakılamaz (renk körlüğü + öğrenilebilirlik), yazı tek başına
   bırakılınca da listede hiç fark edilmiyordu. */
.bk-1 { --metal: var(--metal-bronz); --metal-yz: var(--metal-bronz-yz); }
.bk-2 { --metal: var(--metal-gumus); --metal-yz: var(--metal-gumus-yz); }
.bk-3 { --metal: var(--metal-altin); --metal-yz: var(--metal-altin-yz); }

/* HALKA `border` ile — `box-shadow` DEĞİL. Paylaşılan ikon çipi kuralı
   (dosyanın sonunda) `.badge-item .bi-ic` üzerine box-shadow yazıyor ve
   sonda durduğu için buradaki gölgeyi ezerdi. Kenar ona dokunmuyor. */
.badge-item.acik .bi-ic {
  border: var(--kenar-vurgu) solid var(--metal);
  box-sizing: border-box;
}
.badge-item.locked .bi-ic {
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--rozet-renk) 30%, var(--line));
  box-sizing: border-box;
}

/* Köşedeki etiket: HAP DEĞİL düz yazı. Hap hâlindeyken üç kademe de
   aynı bej lekeye dönüyordu (18% alfa zemin + soluk metal yazı) ve
   30 rozette 30 küçük bej kutu ekranı gürültüye boğuyordu. */
.bi-kademe {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  /* 9px olcegin DISINDAYDI (--fs-xs 11px en kucuk adim) ve her rozette
     tekrarliyordu: cihaz taramasinda HER genislikte 30 oge "11px alti"
     cikti. Kademe etiketi kisa ve buyuk harf, 11px'te de sigar. */
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--metal-yz);
}
/* Kilitli rozette OPACITY YOK — soluk metin okunmuyordu; kademe zaten
   hedefin ne olduğunu söylüyor, gizlenecek bilgi değil. Sessizleşmesi
   için nötr tona düşer. */
.badge-item.locked .bi-kademe { color: var(--faint); }

/* SIRADAKI ROZET — tek hedef, listenin basinda. 30 rozetlik liste
   yerine "su an neye calisiyorsun" sorusunu cevaplar. */
.rozet-sirada {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--rozet-renk);
  border: 1px solid color-mix(in srgb, var(--rozet-renk) 45%, var(--line));
  border-radius: var(--r-lg);
  /* GRADYAN KALDIRILDI (bkz. .badge-item.acik). Düz tint; hedef rozetin
     kimliğini renk taşır, yıkama değil. */
  background: var(--card2);   /* color-mix yoksa duz yuzey */
  background: color-mix(in srgb, var(--rozet-renk) 8%, var(--card2));
  box-shadow: var(--kenar-isik);
}
.rozet-sirada .bi-ic {
  width: 52px; height: 52px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  background: color-mix(in srgb, var(--rozet-renk) 18%, transparent);
  color: var(--rozet-renk);   /* bkz. .badge-item .bi-ic — ayni tint sorunu */
  color: color-mix(in srgb, var(--rozet-renk) 68%, var(--text));
  border: var(--kenar-vurgu) solid var(--metal, var(--line));
  box-sizing: border-box;
}
.rozet-sirada .bi-ic .ic { width: 26px; height: 26px; }
.rs-txt { min-width: 0; flex: 1; }
.rs-et {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--rozet-renk); margin-bottom: var(--sp-1);
}
.rs-ad { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.rs-txt b { display: block; font-size: var(--fs-lg); line-height: 1.25; }
/* Hedef rozetin kademesi ADIN YANINDA — kartlardaki köşe etiketinin
   karşılığı. Metal rengi halkayla aynı, ikisi birbirini doğruluyor. */
.rs-kademe {
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--metal-yz, var(--faint));
}
.rs-txt > span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }
@media (max-width: 940px) {
  /* .badge-grid telefon kurali ASAGIDA (tek yerde) — burada tekrar
     yazilmis ve ikisi ayrisabilirdi. */
  .rozet-sirada { gap: var(--sp-3); padding: var(--sp-3); }
  .rozet-sirada .bi-ic { width: 44px; height: 44px; }
}

.quiz-word { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-1); flex-wrap: wrap; }
.quiz-word .qw-v1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.5px; }
.quiz-word .qw-tr { color: var(--muted); font-size: var(--fs-base); }
.quiz-opts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.quiz-opts > * { flex: 1 1 240px; min-width: 0; }
.quiz-opt {
  text-align: left;
  background: var(--card2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  min-height: 64px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text);
  transition: border-color var(--mo-hizli), transform var(--mo-hizli);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.quiz-opt .qo-lbl { display: block; font-size: var(--fs-xs); color: var(--faint); font-weight: 700; letter-spacing: .5px; margin-top: var(--sp-1); }
.quiz-opt.quiz-ok { border-color: var(--ok); background: var(--ok-soft); }
.quiz-opt.quiz-bad { border-color: var(--bad); background: var(--bad-soft); }
.quiz-opt.quiz-dim { opacity: .45; }
.quiz-opt:disabled { cursor: default; }

/* =====================================================================
   Dinleme modu
   ===================================================================== */

.listen-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.listen-btn { display: inline-flex; align-items: center; gap: var(--sp-2); }
.listen-hint { color: var(--muted); font-size: var(--fs-sm); max-width: 40ch; }

/* =====================================================================
   Yardımcı sınıflar — satır içi stil yerine bunları kullan
   ===================================================================== */

.u-count  { color: var(--faint); font-weight: 600; }   /* başlıktaki (12) sayacı */
/* DUGME ICINDE --faint KULLANILMAZ. O renk KART zemini icin secilmis sicak
   bir gri; dolu mavi dugmenin uzerinde olculdu: kontrast 1.09:1 — okunmuyor
   ve turuncumsu duruyor ("Devam Et (15. alistirma)"). Dugmede sayac dugmenin
   kendi murekkebini alir (beyaz/mavi 5.09:1). Ayrimi renk degil, font
   agirligi (600 vs 700) ve parantez saglar. */
.btn .u-count { color: currentColor; }
.u-center { justify-content: center; }
.u-flat   { margin: 0; }
.u-tight  { margin-top: 0; }
.u-dim    { opacity: .35; }
.u-nowrap { white-space: nowrap; }
.u-ok     { color: var(--ok-strong); }
.u-bad    { color: var(--bad); }
:root[data-theme="dark"] .u-ok { color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .u-ok { color: var(--ok); }
}

/* =====================================================================
   Duyarli — dar ekranda ölçek küçülür, oranlar korunur
   ===================================================================== */

@media (max-width: 1240px) {
  .two-col, .split-21 { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .ex-card { grid-template-columns: minmax(0, 1fr) 260px; }

  /* TEK SÜTUNA DÜŞÜNCE SIRA DEĞİŞİR — yan sütun ALTA değil ÜSTE gelir.
     Ölçüldü (390px): sol sütunun kelime ızgarası ~1100px yer kaplıyor ve
     "Günün planı" onun altına, ~2000px'e düşüyordu; yani günün yol
     haritası telefonda pratikte hiç görülmüyordu. Yan sütun kısa ve
     yönlendirici, sol sütun uzun ve referans — dar ekranda önce
     yönlendirme gelir. Geniş ekranda yan yana oldukları için sıra
     zaten sorun değil. */
  .split-21 > .col:last-child { order: -1; }
  .split-21 > .col:last-child > .card:last-child { margin-bottom: var(--sp-5); }
}

@media (max-width: 940px) {
  :root { --sp-8: 20px; --sp-10: 28px; }
  /* .layout.rail OZGULLUGU (iki sinif) tek sinifli kurali EZIYORDU:
     ray modu localStorage'da acik kalan bir kullanici telefonda 76px'lik
     bir sutunla kaliyor, icerik sikisiyor ve yatay TASIYORDU (olculdu:
     360px ekranda dugme 156..381). Telefonda ray modu diye bir sey yok. */
  .layout, .layout.rail { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto;
    flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .tabs { flex-direction: row; overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { width: auto; white-space: nowrap; padding: 0 var(--sp-3); }
  .tab .badge { margin-left: var(--sp-1); }
  .sidebar-foot { margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; }
  .theme-btn { width: auto; }
  /* `.foot-note { display: none }` KALDIRILDI. Kural meta satiri kenar
     menudeyken yazilmisti: dar ekranda menu tek satirlik ust serit
     oluyor ve oraya sigmiyordu. Satir artik sayfa footer'inda, yani bu
     kural YANLIS YERI gizliyordu — telefonda footer'da yazi hic
     cikmiyordu (olculdu: yukseklik 0). */
  .topbar { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; min-height: 0; }
  .top-stats {
    justify-content: flex-start; width: 100%;
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-1);
    scrollbar-width: none;
  }
  .top-stats::-webkit-scrollbar { display: none; }
  .view { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
  .main { max-width: 100vw; overflow-x: hidden; }
  .card { padding: var(--sp-4); }
  .ex-card { grid-template-columns: 1fr; }
  .ex-main { padding: var(--sp-4); }
  .ex-side { order: -1; padding: var(--sp-4); }
  .side-meta { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); border-top: none; padding-top: 0; }
  .side-meta .sm-row { gap: var(--sp-1); }
  .hero-level { text-align: left; min-width: 0; flex: 1 1 100%; }
  /* .hero-greet BURADA BUYUTULMEZ. Selam artık bir başlık değil, sayacın
     üstündeki bağlam etiketi; büyütülünce telefonda tekrar sayfanın en
     büyük yazısı oluyor ve ekranın sebebi olan sayıyı eziyordu. */
  .ex-tr-prompt { font-size: var(--fs-lg); }
  .setting-row { flex-wrap: wrap; }
  .setting-row > select, .setting-row > .btn { min-width: 0; width: 100%; }
  .bar-row .bl { width: 128px; }
  .dlg-line { flex-direction: column; gap: var(--sp-1); }
  .dlg-who { text-align: left; min-width: 0; padding-top: 0; }
  .story-body { font-size: var(--fs-md); }
}

/* =====================================================================
   HAREKET — animasyonlar
   Kural: yalnizca transform + opacity. Sureler --mo-* degiskenlerinden.
   En sonda duruyor ki bu dosyada tanimli her seyi ezebilsin.
   ===================================================================== */

/* --- 1. ALISTIRMA GERI BILDIRIMI --- */

/* Dogru cevap: kisa "pop". Uzun tutma — gunde 50 kez goruluyor. */
@keyframes mo-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
/* Yanlis cevap: yatay sarsinti. Kelimeden once "yanlis"i anlatir. */
@keyframes mo-sars {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.mo-dogru { animation: mo-pop var(--mo-hizli) var(--mo-geri); }
.mo-yanlis { animation: mo-sars var(--mo-hizli) ease-in-out; }

/* Cozulen cumle soldan saga yesile doluyor — dogru cevabin gorsel karsiligi.
   transform:scaleX kullaniliyor (width degil): compositor'da calisir. */
.fb-ok { position: relative; overflow: hidden; }
.fb-ok::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ok-soft);
  transform: scaleX(0); transform-origin: left center;
  animation: mo-dolu 420ms var(--mo-cikis) forwards;
  pointer-events: none;
}
@keyframes mo-dolu { to { transform: scaleX(1); } }

/* Kelime yuvaya "oturur" — surukleyip biraktiktan sonra yerini bulma hissi */
@keyframes mo-otur {
  0%   { transform: scale(.9); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}
/* YALNIZCA yeni tasinan kelime oynar. Tum .chip'lere verilirse her tiklamada
   satirdaki butun kelimeler ziplar — rahatsiz edici olur. */
.chip.mo-yeni { animation: mo-otur 120ms var(--mo-geri); }
/* Uzerine surukleneni bekleyen yuva nabiz atar */
.zone.mo-hedef { animation: mo-nabiz 900ms ease-in-out infinite; }
@keyframes mo-nabiz { 50% { transform: scale(1.008); } }

/* --- 2. ODUL ANLARI --- */

/* Kelime bir ust kutuya cikti: yukari kayip parlar */
@keyframes mo-yukari {
  0%   { transform: translateY(6px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.mo-terfi { animation: mo-yukari var(--mo-yavas) var(--mo-cikis); }

/* Rozet kazanildi: uzerinden bir parlama supurmesi gecer */
.mo-rozet { position: relative; overflow: hidden; }
.mo-rozet::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-160%);
  animation: mo-parla 900ms var(--mo-cikis) 120ms;
  pointer-events: none;
}
@keyframes mo-parla { to { transform: translateX(320%); } }

/* Seri alevi / gunluk hedef: tek nabiz, dikkat cek ama rahatsiz etme */
@keyframes mo-canlan {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.18); }
  70% { transform: scale(.97); }
}
.mo-canlan { animation: mo-canlan var(--mo-yavas) var(--mo-geri); }

/* Tur sonu ozeti: kart asagidan yukari belirir */
@keyframes mo-gir {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.summary-big { animation: mo-gir 320ms var(--mo-cikis); }

/* --- 3. GEZINME --- */

/* Ekran gecisi: icerik 8px asagidan + fade. Tek kural, tum uygulamayi toparlar. */
.view.mo-giris { animation: mo-ekran var(--mo-orta) var(--mo-cikis); }
@keyframes mo-ekran {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Kart sirali giris — YALNIZCA ilk cizimde (mo-sira sinifi tek sefer eklenir).
   Her render'da tekrarlarsa ekran titrer. Gecikme satir icinde --i ile verilir. */
.mo-sira > * {
  animation: mo-gir 260ms var(--mo-cikis) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* Kitap sayfasi: ileri/geri yonune gore metin yandan kayar */
@keyframes mo-sayfa-ileri {
  from { transform: translateX(18px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes mo-sayfa-geri {
  from { transform: translateX(-18px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.mo-ileri .story-p, .mo-ileri .book-title { animation: mo-sayfa-ileri var(--mo-orta) var(--mo-cikis); }
.mo-geri  .story-p, .mo-geri  .book-title { animation: mo-sayfa-geri  var(--mo-orta) var(--mo-cikis); }

/* --- 4. MIKRO ETKILESIMLER --- */

/* Ses calarken hoparlor dalgalanir — sesin gittigi belli olur */
.mo-caliyor .ic { animation: mo-ses 700ms ease-in-out infinite; transform-origin: left center; }
@keyframes mo-ses {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: .75; }
}

/* Sayi degisimi: odometre gibi yukari kayar */
@keyframes mo-odometre {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.mo-sayi { display: inline-block; animation: mo-odometre 300ms var(--mo-cikis); }

/* --- HAREKETI AZALT ---
   Sistem "hareketi azalt" diyorsa animasyon KALMAZ. Vestibuler rahatsizligi
   olan kullanicilar icin gerekli; ayrica zayif cihazda da faydali.
   Tamamen kaldirmak yerine 1ms'e indiriliyor: animationend bekleyen kod
   calismaya devam etsin. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Toast ve onay penceresi: acilis hareketi ---
   Toast zaten kayarak geliyordu ama "transition: var(--mo-orta)" TUM ozellikleri
   kapsiyordu (renk, golge, genislik...). Sadece transform+opacity: her
   karede yeniden boyama yok. */
.toast { transition: opacity var(--mo-orta) var(--mo-cikis), transform var(--mo-orta) var(--mo-cikis); }

/* Onay penceresi: arka plan bulaniklasir, kutu hafif buyuyerek gelir */
.modal-host { animation: mo-perde var(--mo-orta) ease-out; }
.modal-card { animation: mo-kutu var(--mo-orta) var(--mo-geri); }
@keyframes mo-perde { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-kutu {
  from { transform: scale(.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Kelime anlam penceresi de ayni hisle acilsin */
.word-pop.show { animation: mo-kutu 160ms var(--mo-cikis); }

/* =====================================================================
   Seviye belirleme testi
   ===================================================================== */

/* Kose isigi (radial yikama) KALDIRILDI — onerilen seviyeyi cerceve ve
   duz tint isaretler, kartin bir kosesinin parlamasi degil. */
.sv-oneri { border-color: var(--accent-ring); background: var(--accent-soft); }

.sv-kart { max-width: 100%; }
.sv-ust {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
}
.sv-kelime {
  font-size: var(--fs-2xl); font-weight: 700;
  margin-bottom: var(--sp-6);
}
/* Siklar: iki sutun, dokunma hedefi genis */
.sv-siklar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.sv-siklar > .sv-sik {
  flex: 1 1 220px; min-width: 0;
  justify-content: flex-start; text-align: left;
  height: auto; min-height: var(--ctrl-h);
  padding: var(--sp-3) var(--sp-4);
  white-space: normal; line-height: 1.4;
}
.sv-sik:hover { border-color: var(--accent); background: var(--accent-soft); }

/* =====================================================================
   Dinleme anlama turu
   ===================================================================== */

.dn-kart { max-width: 100%; }
.dn-ust {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-5);
}
.dn-ust .ic { width: 14px; height: 14px; }

/* Cevap verilmeden metin GORUNMEZ — goruse dinleme olmaz */
.dn-gizli {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 92px; margin-bottom: var(--sp-4);
  background: var(--card2); border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--faint); font-size: var(--fs-sm); font-weight: 600;
}
.dn-gizli .ic { width: 20px; height: 20px; }

.dn-metin {
  font-size: var(--fs-xl); line-height: 1.5; margin-bottom: var(--sp-2);
}
.dn-metin-tr { color: var(--muted); font-size: var(--fs-base); margin-bottom: var(--sp-4); }

.dn-soru {
  margin: var(--sp-5) 0 var(--sp-3);
  font-weight: 800; font-size: var(--fs-base);
}
.dn-siklar { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.dn-siklar > .dn-sik {
  flex: 1 1 260px; min-width: 0;
  justify-content: flex-start; text-align: left;
  height: auto; min-height: var(--ctrl-h);
  padding: var(--sp-3) var(--sp-4);
  white-space: normal; line-height: 1.45;
}
.dn-sik:hover { border-color: var(--accent); background: var(--accent-soft); }

.dn-sonuc {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-sm);
}
.dn-sonuc .ic { width: 16px; height: 16px; flex-shrink: 0; }
.dn-ok  { background: var(--ok-soft);  color: var(--ok-strong); }
.dn-bad { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .dn-ok { color: var(--ok); }

/* =====================================================================
   Anlama turu — okudugunu anlama (EN -> TR)

   Dinleme turunun tersi: orada metin GIZLI, burada metin ASIL SORU.
   O yuzden cumle buyuk ve serif — okunacak sey o.
   ===================================================================== */

.an-kart { max-width: 100%; }
.an-ust {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-5);
}
.an-ust .ic { width: 14px; height: 14px; }

.an-cumle {
  font-size: var(--fs-xl); line-height: var(--lh-rahat);
  padding: var(--sp-5) var(--sp-5);
  background: var(--card2); border: 1px solid var(--line);
  border-top: 1px solid var(--kenar-isik);
  border-radius: var(--r-md);
}
/* Cevaptan sonra kelimeye tiklanabilir — imlec bunu belli etsin */
.an-cumle-acik { cursor: text; }

.an-soru {
  margin: var(--sp-5) 0 var(--sp-3);
  font-weight: 800; font-size: var(--fs-base);
}
.an-siklar { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.an-siklar > .an-sik {
  flex: 1 1 260px; min-width: 0;
  justify-content: flex-start; text-align: left;
  height: auto; min-height: var(--ctrl-h);
  padding: var(--sp-3) var(--sp-4);
  white-space: normal; line-height: var(--lh-normal);
}
.an-sik:hover { border-color: var(--accent); background: var(--accent-soft); }

.an-sonuc {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-sm);
}
.an-sonuc .ic { width: 16px; height: 16px; flex-shrink: 0; }
.an-ok  { background: var(--ok-soft);  color: var(--ok-strong); }
.an-bad { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .an-ok { color: var(--ok); }

/* Cumlenin hedef kelimesi — "bu cumle neyi calistiriyordu" */
.an-kelime {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--tint-neutral); border-radius: var(--r-md);
}
.an-kelime-en { font-weight: 800; font-size: var(--fs-md); }
.an-kelime-tr { color: var(--muted); font-size: var(--fs-sm); }
.an-kelime .icon-btn { margin-left: auto; }

.an-ipucu {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); color: var(--faint); font-size: var(--fs-xs);
}
.an-ipucu .ic { width: 14px; height: 14px; flex-shrink: 0; }

/* =====================================================================
   YAZMA TURU — uygulamadaki tek klavye alistirmasi

   Uc kademe tek karti paylasir (kutuya gore): destekli cloze, ciplak
   cloze, dikte. Ortak yuzey; ayrimi ICERIK tasir, ayri bir tema degil.
   ===================================================================== */

.yz-kart { max-width: 100%; }

.yz-ust {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-5);
}
.yz-ust .ic { width: 14px; height: 14px; }
.yz-ortam { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Kademe adi sagda: "hangi is isteniyor" her karti acinca gorunsun */
.yz-kademe { margin-left: auto; color: var(--accent); }

/* Turkce ipucu — cloze'da SORU, diktede yardim.

   INGILIZCE CUMLEYLE AYNI OLCU VE AYNI AGIRLIK — ikisi de govde standardi.
   Once 18px/600 iken yandaki `.yz-cumle` 22px/400 idi: iki okuma blogu alt
   alta, iki farkli punto, iki farkli kalinlik.
   HIYERARSIYI YUZEY TASIR, tipografi degil: Ingilizce cumle kendi kutusunda
   (--card2 + cerceve) durur, Turkce sade metin olarak ustunde. Uygulamanin
   geri kalani da boyle ayiriyor. */
.yz-tr {
  font-size: var(--fs-base); line-height: var(--lh-rahat);
  color: var(--text); font-weight: 400;
  margin-bottom: var(--sp-4);
}
/* Cevaptan sonraki / diktedeki yardim satiri — orada ARTIK soru degil,
   ikincil bir bilgi; tonu duser ama olcegin icinde kalir. */
.yz-tr-acik {
  margin-top: var(--sp-4); margin-bottom: 0;
  font-size: var(--fs-base); color: var(--muted); font-weight: 400;
}

/* Ingilizce cumle + bosluk

   PUNTO GOVDE STANDARDI (--fs-base, 15px) — BASLIK PUNTOSU DEGIL.
   Olculdu (8 ekran, uzun metin tasiyan 1017 oge): govde 15px, `<h2>`
   basliklar 22px. Bu yuzey `--fs-xl` ile, yani BASLIK boyutunda
   yaziliyordu; kullanici uc kez bildirdi ("buyuk olani her sayfadaki
   standart punto buyuklugune getir"). Alistirma metni bir baslik degil.

   SATIR YUKSEKLIGI de olcekten: once `line-height: 2` yaziliydi — uydurma
   bir deger ve olcegin disi (--lh-sik 1.3 · --lh-normal 1.5 · --lh-rahat
   1.65). Gozle "esneme" olarak okunuyordu. */
.yz-cumle {
  font-size: var(--fs-base); line-height: var(--lh-rahat);
  padding: var(--sp-5);
  background: var(--card2); border: 1px solid var(--line);
  border-top: 1px solid var(--kenar-isik);
  border-radius: var(--r-md);
}
.yz-tok { white-space: nowrap; }

/* BOSLUK GENISLIGI SABIT — icerige gore buyuseydi harf sayisini ele
   verirdi ve kademe 2-3'te ipucu VERMEMEK asil kural.
   Yukseklik em cinsinden ve satir kutusundan KUCUK: buyuk olsaydi satiri
   iterdi (dolu haldeki tas bunu yapiyordu, olculdu: 46px tas / 44px satir). */
.yz-bos {
  display: inline-block; min-width: 7ch; height: 1.05em;
  vertical-align: -0.15em;
  border-bottom: 2px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
/* KULLANICININ YAZDIGI KELIME — durum rengi METNE verilmez.
   Olculdu: --bad uzerine --bad-soft, .yz-cumle'nin (--card2) ustunde
   3,44:1 (acik) / 4,08:1 (koyu) — ikisi de esigin altinda. Sebep zeminin
   iki kat tint olmasi.
   Burada renklendirilen sey kullanicinin KENDI yazdigi kelime, yani
   ICERIK; durum etiketi degil. Okunurluk once gelir. Durumu cerceve,
   zemin tinti ve hemen altindaki sonuc satiri (✓/✗ + metin) tasiyor —
   renk zaten tek basina birakilmiyor. */
/* DOLU TAS `display: inline` — inline-block DEGIL. Sebep olculdu: dikey
   dolgusu olan bir inline-block kendi satir kutusunu buyutuyor ve tas
   46px'e cikip 44px'lik satirdan TASIYORDU; ekranda "cumleden firlamis
   bir rozet" gibi duruyordu. Duz inline'da yatay dolgu ve zemin satiri
   itmez.
   AGIRLIK 800 -> 700: cumle 400 ile ciziliyor; 800 dort basamaklik bir
   siçrama ve o da cumleden kopuk gosteriyordu. 700 cevabi belli eder,
   ayni tipografik ailede kalir. */
.yz-bos-ok, .yz-bos-bad {
  display: inline;
  min-width: 0; height: auto;
  /* BOS TASIN vertical-align'i SIFIRLANIR — dolu tas `.yz-bos` sinifini da
     tasiyor ve oradan -0.15em mirasi aliyordu. Negatif hizalama satir
     kutusunu tam o kadar (3,3px) asagi itiyor, yani cevap yazilinca cumle
     kutusu buyuyordu (olculdu). Bos taste gerekli, dolu taste degil. */
  vertical-align: baseline;
  padding: 0 var(--sp-1);
  border-bottom-style: solid;
  border-radius: var(--r-sm);
  font-weight: 700; color: var(--text);
}
.yz-bos-ok  { background: var(--ok-soft);  border-bottom-color: var(--ok); }
.yz-bos-bad { background: var(--bad-soft); border-bottom-color: var(--bad); }

/* IPUCU (yalnizca kademe 1) — ilk harf + harf sayisi */
.yz-ipucu {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.yz-ip-parca { display: inline-flex; align-items: flex-end; gap: var(--sp-1); }
/* Ilk harf CUMLEYLE AYNI PUNTODA — bir harf de olsa cumlenin parcasi;
   ayri bir olcude yazilinca kart dort farkli punto tasiyordu. */
.yz-ip-parca b {
  font-size: var(--fs-base); font-weight: 700; color: var(--accent);
  line-height: 1;
}
.yz-ip-parca i {
  display: inline-block; width: var(--sp-3); height: 2px;
  background: var(--btn-line); margin-bottom: var(--sp-1);
}
/* Okunus artik PAYLASILAN `.telaffuz` / `.tel-oku` ile ciziliyor
   (yazma.js). Bespoke bir kopya tutmak bu karti otekilerden ayirmisti. */
.yz-kart .telaffuz { margin-top: var(--sp-2); }

/* DIKTE — Ingilizce cevaptan ONCE ekranda hic yok */
.yz-dikte {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.yz-dinle { min-height: var(--ctrl-h); }

/* GIRDI — mobil klavye ozniteliklerini JS yazar; burada yalnizca olcu.
   Tam genislik: telefonda dokunma hedefi buyuk olsun. */
.yz-giris { margin-top: var(--sp-5); }
/* CUMLEYLE AYNI PUNTO: kullanicinin yazdigi kelime cumlenin bir parcasi,
   ayri bir olcude yazmak kartta bir punto daha demekti.
   `font-family` acikca yazilir — girdiler sayfanin yazi ailesini
   KENDILIGINDEN miras almaz. */
/* SECICI `input.yz-input` — yalin `.yz-input` YETMIYOR. Genel kural
   `input[type=text], …` (0,1,1) ozgullugunde ve font-size'i --fs-base'e
   sabitliyor; sinif tek basina (0,1,0) kaliyor ve ONE GECEMIYOR.
   Olculdu: 22px yazilmisti, ekranda 15px cikiyordu. */
input.yz-input {
  width: 100%; height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  font-size: var(--fs-base); font-family: var(--font-ui); font-weight: 400;
  border: 1px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--card2); color: var(--text);
}
.yz-input::placeholder { color: var(--faint); }

.yz-sonuc {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-sm);
}
.yz-sonuc .ic { width: 16px; height: 16px; flex-shrink: 0; }
/* Bunlar DURUM ETIKETI (icerik degil) — renk burada anlam tasir ve
   ikonla birlikte gider. Acik temada koyu ton, koyu temada parlak ton:
   `--bad` acik zeminde 3,76:1 kaliyordu (olculdu). */
.yz-ok  { background: var(--ok-soft);  color: var(--ok-strong); }
.yz-bad { background: var(--bad-soft); color: var(--bad-strong); }
:root[data-theme="dark"] .yz-ok  { color: var(--ok); }
:root[data-theme="dark"] .yz-bad { color: var(--bad); }

/* HARF DUZEYINDE FARK — "yanlis" demek ogretmez, nerede kaydigini
   gostermek ogretir. Senin yazdigin ustte, dogrusu altta. */
.yz-fark {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--tint-neutral); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 700;
  letter-spacing: 1px;
}
.yz-f-senin { color: var(--muted); }
.yz-f-dogru { color: var(--text); }
.yz-fark mark {
  background: var(--warn-soft); color: var(--warn-ink);
  padding: 0 1px; border-radius: var(--r-sm);
}
.yz-f-ok { display: inline-flex; color: var(--faint); }
.yz-f-ok .ic { width: 16px; height: 16px; }

/* DIKTE SONUCU — kelime kelime */
.yz-dikte-sonuc {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3); font-size: var(--fs-base); font-weight: 700;
}
.yz-dk { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.yz-dk-ok    { background: var(--ok-soft);   color: var(--ok-strong); }
.yz-dk-kayma { background: var(--warn-soft); color: var(--warn-ink); }
.yz-dk-bad   { background: var(--bad-soft);  color: var(--bad-strong); }
:root[data-theme="dark"] .yz-dk-ok  { color: var(--ok); }
:root[data-theme="dark"] .yz-dk-bad { color: var(--bad); }

/* DOGRUSU — anlam penceresi YALNIZCA buraya baglanir (yazma.js) */
.yz-cozum {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--tint-blue); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 700; cursor: text;
}
.yz-spk { margin-left: auto; flex-shrink: 0; }

/* DUZELTME EVRESI — gunun dersindeki `phase === 'redo'` ile ayni rol.
   Kart kimligini degistirmez, yalnizca "bu tur puanlanmiyor" der; aksi
   halde kullanici ikinci turu birincinin devami sanip sayilari toplar. */
.yz-redo { border-color: var(--warn); }
.yz-redo-not {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--warn-soft); color: var(--warn-ink);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 700;
}
.yz-redo-not .ic { width: 16px; height: 16px; flex-shrink: 0; }
/* "puanlanmadı" — ikincil ama OKUNMASI ZORUNLU: kullanıcının düzeltme
   turunu birincinin devamı sanmasını engelleyen tek işaret bu.
   `--muted` ölçüldü, koyu temada 4,45:1 (eşiğin altı); metin tonuna
   çıkarıldı, ikincilliği punto ve zemin taşıyor. */
.yz-puansiz {
  margin-left: auto; padding: 0 var(--sp-2);
  border-radius: var(--r-full); background: var(--tint-neutral);
  color: var(--text); font-size: var(--fs-xs); font-weight: 800;
}

/* "N. kez" — bu kelimenin yazimini daha once tutturamamissin.
   Motivasyon degil BILGI: "yine aynisi geldi" sorusunu bastan cevaplar. */
.yz-gecmis {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn-ink);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0;
  text-transform: none;
}
.yz-gecmis .ic { width: 12px; height: 12px; }

/* CANLI SAYAC — yazim kaymasi ucuncu bir durum, dogru/yanlis ikilisine
   sigmaz: SRS'te dogru sayilir ama yazim isabetinde sayilmaz. */
.pi-kayma { color: var(--warn-ink); }

/* OZET — "Yazamadiklarin". Turun asil degeri bu liste (Eslestirme
   turundaki "Karistirdiklarin" ile ayni rol): kac dogru yaptigin degil,
   HANGI harfte kaydigin ogretiyor. */
.yz-liste { margin-top: var(--sp-5); }
.yz-satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.yz-satir:first-of-type { border-top: 0; }
.yz-s-kelime {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 auto; min-width: 120px;
  font-weight: 800; font-size: var(--fs-md);
}
.yz-s-oku { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.yz-s-fark { flex: 1 1 260px; min-width: 0; }
.yz-s-fark .yz-fark { margin-top: 0; }

/* ISTATISTIK ekranindaki yazim karti */
.yst-alt {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-md); font-weight: 800;
}
.yst-alt .ic { width: 16px; height: 16px; }
.yst-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.yst-kelime {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--chip-line); border-radius: var(--r-md);
  background: var(--card2);
  font-weight: 700; font-size: var(--fs-sm);
}
.yst-kelime i { color: var(--muted); font-style: normal; font-size: var(--fs-xs); }
.yst-kelime b {
  min-width: var(--sp-5); height: var(--sp-5);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-1);
  border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn-ink);
  font-size: var(--fs-xs);
}

@media (max-width: 940px) {
  .yz-s-kelime { flex: 1 1 100%; }
}

@media (max-width: 940px) {
  /* PUNTO TELEFONDA DA DEGISMEZ — metin zaten govde standardinda (15px),
     asagi inecek yeri yok. Ayni ekrandaki okuma yuzeyleri farkli ritim
     tasiyamaz. */
  /* Dokunma hedefi en az 40px */
  input.yz-input { height: 48px; }
  .yz-dinle { min-height: 44px; }
}

/* =====================================================================
   Hiz turu — 60 saniye akicilik
   ===================================================================== */

.hz-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-2);
}
.hz-sayac { display: flex; align-items: baseline; gap: var(--sp-2); }
.hz-sayac span {
  font-size: var(--fs-3xl); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.hz-sayac i { font-style: normal; color: var(--faint); font-size: var(--fs-sm); font-weight: 700; }
/* Son 10 saniye */
.hz-sayac.hz-az span { color: var(--bad); }
.hz-puan { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.hz-puan b { color: var(--ok-strong); font-size: var(--fs-lg); }
:root[data-theme="dark"] .hz-puan b { color: var(--ok); }

.hz-bar { margin-bottom: var(--sp-5); }
/* Hiz turu cubugu: 60 saniye boyunca HER SANIYE guncelleniyor.
   width yerine scaleX — compositor'da calisir, her karede yeniden
   yerlesim/boyama tetiklemez. Dolgu tam genislikte durur, olcek ile
   kisalir; bu yuzden transform-origin SOL kenardir. */
.hz-bar > div {
  width: 100%;
  transform-origin: left center;
  transition: transform 1s linear;
}

.hz-kart { max-width: 100%; }
.hz-etiket {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
}
.hz-tr {
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.35;
  margin-bottom: var(--sp-6);
}
.hz-siklar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hz-siklar > .hz-sik {
  flex: 1 1 220px; min-width: 0;
  height: auto; min-height: 52px;
  font-size: var(--fs-md); font-weight: 700;
  justify-content: center; white-space: normal; line-height: 1.35;
}
.hz-sik:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Karsilama karti — ilk giriste ne yapilacagini anlatir */
.ks-kart { border-color: var(--accent-ring); }

/* İLK AÇILIŞ AKIŞI — ekranda TEK kart durur, ölçüldüğü için biliyoruz:
   karşılama + seviye önerisi + hero üst üsteyken telefonda sayfa 3,9
   ekrandı ve asıl eylem 1055px aşağıdaydı. Kart ekranın ortasında,
   sınırlı genişlikte: bu bir okuma/karar anı, tam genişlik gerekmiyor.
   (Genel "sağda boşluk bırakma" kuralının istisnası DEĞİL — burada kart
   ortalanır, içerik kartın solunda yarım kalmaz.) */
.karsilama { max-width: 620px; margin-left: auto; margin-right: auto; }
.ka-sayac {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  letter-spacing: 0.4px; margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
/* Adımlar dar kartta ALT ALTA — yan yana 3 sütun 620px'te sıkışıyor */
.karsilama .ks-adimlar { flex-direction: column; gap: var(--sp-3); }
.karsilama .ks-adim { flex: 1 1 auto; }
.ks-adimlar { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ks-adim {
  flex: 1 1 260px; min-width: 0;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.ks-no {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink-ters); font-weight: 800; font-size: var(--fs-sm);
}
.ks-adim b { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.ks-adim span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }

/* =====================================================================
   TELEFON — alt gezinme cubugu ve mobil duzeltmeler
   Genis ekranda alt cubuk GIZLI; kenar menu calisir.
   ===================================================================== */

.mobil-nav { display: none; }
.nav-panel { display: none; }

@media (max-width: 940px) {

  /* --- Alt gezinme cubugu ---
     Sekme seridi ustte yatay kaydirmaliydi: 10 sekmenin 3'u gorunuyordu ve
     kaydirilabildigi belli olmuyordu. Ust kenar ayrica basparmakla zor. */
  .mobil-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--page-glass);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line);
    /* iPhone alt cubugu icin guvenli alan */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .nav-item {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-1); padding: var(--sp-2) var(--sp-1);
    min-height: 58px;                 /* dokunma hedefi */
    background: none; border: none;
    color: var(--faint); font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-item .ic { width: 21px; height: 21px; }
  .nav-item i {
    font-style: normal; font-size: 11px; font-weight: 700;
    letter-spacing: .1px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .nav-item.on { color: var(--accent); }
  .nav-item .badge {
    position: absolute; top: 6px; left: 50%; margin-left: 6px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--warn); color: #1a212a;
    border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 800;
  }

  /* "Daha" paneli — alttan acilir, kalan tum bolumler */
  .nav-panel {
    display: block;
    position: fixed; inset: 0; z-index: 71;
    background: rgba(8, 12, 20, 0.5);
  }
  .nav-panel[hidden] { display: none; }
  .nav-panel-ic {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--line-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 66px);
    max-height: 76vh; overflow-y: auto;
    animation: mo-panel var(--mo-orta) var(--mo-cikis);
  }
  @keyframes mo-panel { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
  .nav-panel-bas {
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
  }
  .nav-panel-liste { display: flex; flex-direction: column; gap: var(--sp-1); }
  .nav-panel-liste .tab { height: 50px; font-size: var(--fs-md); }

  /* Kenar menudeki sekme seridi artik GEREKSIZ — alt cubuk var */
  .sidebar .tabs { display: none; }
  .sidebar { gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); }
  .brand-sub { display: none; }             /* tek satirda kalsin */
  .brand-logo { width: 34px; height: 34px; }
  .brand-name { font-size: var(--fs-md); }
  .rail-toggle { display: none; }           /* mobilde ray modu anlamsiz */

  /* Alt cubuk icerigi kapatmasin.
     FOOTER GELDIKTEN SONRA bosluk ONA tasindi: `.view` alt dolgusunu
     korursa icerikle footer arasinda 66px'lik olu bir bant kaliyor.
     Alt cubuktan kacma isi artik sayfanin SON ogesinin, yani
     footer'in. */
  .view { padding-bottom: var(--sp-8); }
  .app-foot {
    padding: var(--sp-4) var(--sp-4)
             calc(66px + env(safe-area-inset-bottom, 0px) + var(--sp-4));
    /* Dar ekranda meta satiri saga yaslanmaz — marka ile ayni hizada
       alt satira iner, okumasi kolay olsun. */
    gap: var(--sp-2);
  }
  .app-foot .foot-note { margin-left: 0; text-align: left; flex: 1 1 100%; }

  /* --- Dokunma hedefleri ---
     34px'lik ikincil dugmeler parmakla zor tutturuluyordu. */
  .btn-sm, .dd-btn, .schip { min-height: 40px; }
  /* .ch-say listede YOKTU: olculdu, telefonda 30px kaliyordu. */
  .ch-say { width: 40px; height: 40px; }
  .btn { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }

  /* Satir ici baglar (.linkish) olculdu: 21px. Cumlenin ortasinda
     durduklari icin yukseklik VERILEMEZ — metin akisi bozulur. Bunun
     yerine gorunmez bir vurus alani serilir: gorunum ayni, parmak
     alani 44px. */
  .linkish { position: relative; }
  .linkish::after {
    content: ''; position: absolute;
    left: 0; right: 0; top: 50%; transform: translateY(-50%);
    height: 44px;
  }

  /* Kelime kartlari: tek sutun 10 kelimeyi cok uzun yapiyordu */
  .word-grid > * { flex-basis: 150px; }
  .convo-grid > * { flex-basis: 150px; }
  .st-list > * { flex-basis: 100%; }

  /* Ust istatistik haplari: kaydirilabilir oldugu belli olsun */
  .top-stats { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }

  /* Kitap: iki sutun dar ekranda okunmuyor */
  .book.iki { max-width: 100%; }
  .book { padding: var(--sp-5) var(--sp-4) var(--sp-4); }

  /* PENCERE TELEFONDA — kart komple kaydirilmiyor (bkz. .modal-card
     aciklamasi); yalnizca kenar bosluklari kuculur ki icerik daha genis
     bir sutunda aksin ve daha az satira insin. Alt bosluk centikli
     telefonda sistem cubugunun altinda kalmasin diye safe-area'li. */
  .modal-host {
    padding: var(--sp-4);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }
  .modal-card {
    max-height: 86vh; max-height: 86dvh;
    width: 100%;
    padding: var(--sp-5);
    gap: var(--sp-3);
  }
  .modal-card.genis { width: 100%; }
  .modal-actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* Cok dar telefon (360px ve alti) */
@media (max-width: 380px) {
  /* 10px olcek disiydi; 11px'te de bes sekme sigiyor (olculdu 320px). */
  .nav-item i { font-size: var(--fs-xs); }
  .word-grid > * { flex-basis: 130px; }
  .hz-tr { font-size: var(--fs-xl); }
  .sv-kelime { font-size: var(--fs-xl); }
}

/* --- Telefon: tablolar, isi haritasi, arac cubuklari --- */
@media (max-width: 940px) {

  /* KELIMELER tablosu 956px genisligindeydi, 314px ekranda yatay kaydirma
     gerektiriyordu. Az kullanilan sutunlar gizlenir — bilgi KAYBOLMAZ,
     kelimeye tiklayinca anlam penceresinde hepsi zaten var.
     Gizlenenler: V2/V3 (4), Ortam (5), Seviye (6), Cumle (9). */
  table.words th:nth-child(4), table.words td:nth-child(4),
  table.words th:nth-child(5), table.words td:nth-child(5) { display: none; }
  table.words th, table.words td { padding: var(--sp-2); font-size: var(--fs-sm); }
  /* Baslik nowrap'i genisligi zorluyordu — dar ekranda iki satira insin */
  table.words th, table.words th.th-sort { white-space: normal; line-height: 1.2; }
  table.words td:nth-child(2) { word-break: break-word; }
  .tbl-wrap { max-height: 60vh; }

  /* Yonetim tablolari: dar ekranda kaydirilabilir kalsin ama yazi kucul */
  .tbl-wrap table { font-size: var(--fs-sm); }

  /* ISI HARITASI: 30 sutunda kareler 7px'e dusuyordu, gorunmuyordu.
     15 sutun -> kare iki kat buyur, 90 gun 6 satir olur. */
  .heat { grid-template-columns: repeat(15, 1fr); gap: var(--sp-1); }
  .heat i { height: 18px; border-radius: 3px; }

  /* TELEFONDA IKI SUTUN. 390px'te kap ~330px, iki 150px'lik kart + bosluk
     tam siger. Katlama kaldirildigi icin (82 rozetin hepsi gorunur) tek
     sutun imkansizdi: olculdu, 11 ekran ederdi. */
  .badge-grid > * { flex-basis: 150px; }
  .badge-item { min-height: 0; padding: var(--sp-2); }
  /* Dar kartta kademe etiketi bas harfe iner — yer acar ama METIN olarak
     kalir (renk tek basina birakilmaz kurali). Tam adi `title`da. */
  .bi-kademe { top: var(--sp-2); right: var(--sp-2); }

  /* Hikaye/senaryo arac cubuklari: kontroller tam genislik, ustuste */
  .story-toolbar { flex-direction: column; align-items: stretch; }
  .story-toolbar > *, .story-toolbar .dd { width: 100%; min-width: 0; }
  .filters > input[type=text] { width: 100%; min-width: 0; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters > * , .filters .dd { width: 100%; min-width: 0; }

  /* Kart ici baslik satiri: uzun basliklar dugmelerin ustune binmesin */
  .ch-top { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .st-row-wrap { flex-wrap: nowrap; }

  /* Kelime karti: baslik ve tur rozeti dar kartta yan yana sigmiyordu */
  .wc-top { flex-wrap: wrap; gap: var(--sp-1); }
  .wc-en { font-size: var(--fs-md); }
}

/* Cok dar telefon (<=430px): D/Y sutunu da gizlenir, tablo kaydirmasiz sigar.
   Dogru/yanlis sayisi kelimeye tiklayinca anlam penceresinde gorunur. */
@media (max-width: 430px) {
  table.words th:nth-child(8), table.words td:nth-child(8) { display: none; }
}

/* --- Telefon: kenar menusu tek satirlik ince ust serit ---
   Sekmeler alt cubuga tasindi, geriye kalan blok (marka 2 satir + kullanici
   satiri + tema dugmesi) ekranin ust ucte birini yiyordu: 190px. Hepsi tek
   52px'lik seride toplanir — 138px icerige geri kazandirilir. */
@media (max-width: 940px) {
  .sidebar {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); min-height: 0;
    position: sticky; top: 0; z-index: 40;
    background: var(--card);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .brand { margin: 0; gap: var(--sp-2); min-width: 0; flex: 1 1 auto; }
  .brand-sub { display: none; }              /* alt baslik telefonda bir satir israfi */
  .brand-name { font-size: var(--fs-md); }
  .brand-logo { width: 32px; height: 32px; flex: 0 0 32px; }
  .rail-toggle { display: none; }            /* ray modu telefonda anlamsiz */
  .tabs { display: none; }                   /* gezinme alt cubukta */
  .sidebar-foot {
    margin: 0; flex: 0 0 auto; gap: var(--sp-2);
    flex-direction: row; align-items: center; width: auto;
  }
  .who { gap: var(--sp-1); padding: 0; background: none; border: none; }
  .who-name { display: none; }               /* avatar yeter, isim yer kapliyor */
  .theme-btn {
    width: 36px; min-width: 36px; height: 36px; padding: 0;
    font-size: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  .theme-btn svg { width: 18px; height: 18px; }
  .sync-state { font-size: var(--fs-xs); }
}

/* Ust istatistik haplari: telefonda 566px icerik 318px alana sigmiyordu ve
   yatay kaydirilabildigi BELLI OLMUYORDU — ucuncu hap hic gorulmuyordu.
   Kaydirma yerine sarmala: 2 + 1, sonuncusu tam genislik (bos yer kalmasin). */
@media (max-width: 940px) {
  /* TEK SIRA + MASKE — sarma DEGIL.
     Once 3+2 sariyordu ve uc sutuna sigsin diye etiket puntosu 9px'e
     dusurulmustu: olcegin (--fs-xs 11px) altinda, cihaz taramasinda HER
     ekranda 10-12 oge "11px alti yazi" cikiyordu. Kaydirma bir kez
     denenip birakilmisti ama sebebi puntoyla ilgili degildi —
     "kaydirilabildigi belli olmuyordu". Maske tam o eksigi kapatiyor
     (.tur-serit ile ayni desen). Punto olcege dondu, satir sayisi 2'den
     1'e indi, dikeyde de yer kazanildi. */
  .top-stats {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .top-stats::-webkit-scrollbar { display: none; }
  .top-stats .stat-pill {
    flex: 0 0 auto; min-width: 0;
    padding: var(--sp-2) var(--sp-3); gap: var(--sp-2);
  }
  .top-stats .stat-pill .sp-ic { width: 22px; height: 22px; flex: 0 0 22px; }
  .top-stats .stat-pill .sp-ic .ic { width: 13px; height: 13px; }
  .top-stats .stat-pill .sp-tx { min-width: 0; }
  .top-stats .stat-pill .sp-tx b { font-size: var(--fs-sm); }
  .top-stats .stat-pill .sp-tx i { font-size: var(--fs-xs); letter-spacing: 0; }
}

@media (max-width: 940px) {
  /* Toast alt gezinme cubugunun USTUNDE dursun — cubugun uzerine biniyordu */
  .toast {
    bottom: calc(var(--sp-3) + 59px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - var(--sp-8)); text-align: center;
  }
}

/* TABLET YATAY (941-1100px) — bu aralik BOSTA KALMISTI.
   Cihaz taramasi gosterdi: 1024x768'de 9 sutun 956px istiyor, kart ~700px,
   yani kullanici tabloyu YATAY KAYDIRMAK zorunda kaliyordu. Gizleme
   940'ta basliyordu ve tableti kapsamiyordu. Ayri kural yazildi —
   940 blogunu genisletmek oradaki telefon kurallarini da tablete
   tasirdi (dokunma hedefleri, tek sutun yerlesim...). */
@media (min-width: 941px) and (max-width: 1100px) {
  table.words th:nth-child(4), table.words td:nth-child(4),
  table.words th:nth-child(5), table.words td:nth-child(5) { display: none; }
}

/* Kelimeler tablosu — kademeli sutun gizleme.
   Tabletde (768px) yer var, telefonda yok. Gizlenen bilgi KAYBOLMAZ:
   kelimeye tiklayinca anlam penceresinde hepsi duruyor.
   <=940: V2/V3 + Ortam gizli (7 sutun)  — yukaridaki blokta
   <=700: Seviye + Cumle de gizli (5 sutun)
   <=430: D/Y de gizli (4 sutun) — asagidaki blokta */
@media (max-width: 700px) {
  table.words th:nth-child(6), table.words td:nth-child(6),
  table.words th:nth-child(9), table.words td:nth-child(9) { display: none; }
}

/* Telefonda tablo hala 400px'ti (sarmal 314) — table-layout:auto en uzun
   Turkce karsiligi genislik olarak dayatiyordu. Sabit duzen + yuzde sutunlar
   ile tam sigar, yatay kaydirma tamamen kalkar. */
@media (max-width: 430px) {
  table.words { table-layout: fixed; }
  table.words th:nth-child(1), table.words td:nth-child(1) { width: 32%; }
  table.words th:nth-child(2), table.words td:nth-child(2) { width: 32%; }
  table.words th:nth-child(3), table.words td:nth-child(3) { width: 18%; }
  table.words th:nth-child(7), table.words td:nth-child(7) { width: 18%; }
  /* 7 kutu noktasi 81px'ti, hucre 48px — nokta ve aralik yariya iner */
  table.words .box-dots { gap: var(--sp-1); }
  table.words .box-dots i { width: 5px; height: 5px; border-radius: 2px; }
  /* Kirilma SADECE metin sutunlarinda — rozet sutununa uygulanirsa
     "UNLEM" ikiye boluniyordu (rozet icinden asla kirilmaz kurali). */
  table.words td:nth-child(1), table.words td:nth-child(2)
    { word-break: break-word; overflow-wrap: anywhere; }
  /* Sozcuk turu rozeti ("belirtec") 48px hucreden 40px tasiyordu. Rozet
     ICINDEN kirilmaz (marka kurali), o yuzden daraltiliyor.
     PUNTO 9px DEGIL --fs-xs (11px): olcegin alt basamagi 11px ve
     cihaz taramasi bu tek kural yuzunden her telefon genisliginde
     400 "11px alti yazi" bildiriyordu — tablodaki her satirda bir rozet
     var. Daralma artik harf araligi ve dolgudan geliyor, puntodan degil. */
  table.words .pos-badge { font-size: var(--fs-xs); padding: 0 var(--sp-1); letter-spacing: -.2px; }
}

/* Telefonda istatistik kutulari 200px tabanla tek sutuna dusuyordu (alan 314px)
   ve ekran gereksiz uzuyordu. 140px taban -> iki sutun; tek sayida kutu
   kalirsa flex-grow son kutuyu yayar, bos yer kalmaz. */
@media (max-width: 940px) {
  .stat-grid { gap: var(--sp-3); }
  .stat-grid > * { flex-basis: 140px; }
  .stat-grid.sg-fill > * { flex-basis: 140px; }
  .stat-box { padding: var(--sp-3); gap: var(--sp-3); }
  .stat-box .si { width: 34px; height: 34px; flex: 0 0 34px; }
  .stat-box .sv { font-size: var(--fs-xl); }
  .stat-box .sl { font-size: var(--fs-xs); }
}

/* Kitap metni telefonda SOLA yasli.
   Genis sutunda iki yana yaslama (justify) guzel duruyor ama 314px'lik tek
   sutunda kelime aralari asiri aciliyordu ("The     agent") — okumayi
   yavaslatir. Tireleme acik, boylece sag kenar yine de duzgun kalir. */
@media (max-width: 700px) {
  .book .story-p, .book .story-p-tr {
    text-align: left;
    -webkit-hyphens: auto; hyphens: auto;
  }
}

/* =====================================================================
   SOYLE TURU — sifirdan uretim (soyle.js)
   Tanima degil uretim: Turkce gorunur, Ingilizce GORUNMEZ, kullanici
   kafasindan kurup mikrofona soyler. Sonuc puan degil KARSILASTIRMA.
   ===================================================================== */
.sy-kart { text-align: center; }
.sy-etiket {
  font-size: var(--fs-sm); color: var(--faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: var(--sp-3);
}
.sy-tr {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.3;
  color: var(--text); margin-bottom: var(--sp-3);
}
.sy-ipucu {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--faint);
  background: var(--tint-neutral); border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5);
}
.sy-ipucu .ic { width: 15px; height: 15px; }

.sy-sonuc {
  text-align: left; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-5); background: var(--card2);
}
.sy-iyi   { border-color: var(--ok);   background: var(--ok-soft); }
.sy-orta  { border-color: var(--warn); }
.sy-zayif { border-color: var(--bad); }
.sy-acik  { border-color: var(--accent); }

.sy-satir { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); align-items: baseline; }
.sy-satir i {
  flex: 0 0 66px; font-style: normal; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .3px; color: var(--faint); font-weight: 700;
}
.sy-satir b { font-size: var(--fs-md); font-weight: 700; color: var(--text); min-width: 0; }

.sy-kelimeler {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0; padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.sy-kelimeler span { font-size: var(--fs-sm); font-weight: 700; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); }
.sy-ok  { color: var(--ok-strong); background: var(--ok-soft); }
.sy-yok { color: var(--bad-strong); background: var(--bad-soft); text-decoration: line-through; }

.sy-not { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

@media (max-width: 940px) {
  .sy-tr { font-size: var(--fs-xl); }
  /* Etiket sutunu dar ekranda cumleyi sikistiriyordu — ustune alinir */
  .sy-satir { flex-direction: column; gap: var(--sp-1); }
  .sy-satir i { flex: none; }
}

/* Konusma ekrani giris satiri telefonda.
   Tek satirda "Soyle" (115px) + input + "Gonder" (104px) olunca 390px'lik
   ekranda input'a 82px kaliyordu — Ingilizce cumle yazilamaz. Input tam
   genislik ustte, dugmeler altta yan yana. */
@media (max-width: 940px) {
  .ch-yaz { flex-wrap: wrap; gap: var(--sp-2); }
  .ch-yaz #chGirdi { flex: 1 1 100%; order: -1; min-width: 0; }
  .ch-yaz .btn { flex: 1 1 0; min-width: 0; }
}

/* Sifre sifirlama ekranlari (auth.js) */
.auth-head { margin-bottom: var(--sp-5); }
.auth-head b { display: block; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.auth-head span { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.auth-forgot { display: flex; justify-content: flex-end; margin-top: calc(var(--sp-2) * -1); }
.auth-forgot-off { color: var(--faint); font-size: var(--fs-xs); line-height: 1.5; text-align: right; }

/* Uc katmanli ilerleme (hero) — tek "ogrenilmis" sayaci ilk iki hafta
   hep 0 gosteriyordu; ara katman gorunur olsun diye. */
.ilerleme-katman {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}
.ilerleme-katman b { color: var(--text); font-weight: 800; }
.ik-yolda b { color: var(--warn-ink); }
.ik-ogr b { color: var(--ok-strong); }
.ik-not { color: var(--faint); font-size: var(--fs-xs); flex: 1 1 100%; }

/* "Dogrusu:" satirindaki cumleyi tekrar dinle dugmesi */
.fb-spk { vertical-align: middle; margin-left: var(--sp-2); }

/* Seri satiri: bugun korunduysa yesil (hatirlatma degil, onay) */
/* Seri tamamlandi satiri: yazi yesile donuyordu ama ZEMIN amber kaliyordu
   -> kontrast 3.5 (WCAG siniri 4.5). Zemin de yesile alindi; hem olculebilir
   sekilde okunur oldu hem "tamamlandi" anlami rengin tamamindan okunuyor. */
.plan-streak-ok {
  color: var(--ok-strong);
  background: var(--ok-soft);
  border-color: var(--ok);
}

/* =====================================================================
   ESLESTIRME TURU (eslestir.js)
   Tikla-eslestir: surukle-birak DEGIL — arastirma suruklenebilir ogelerin
   mobilde kesfedilmesinin zor oldugunu gosteriyor (gorsel ipucu tasimiyor).
   ===================================================================== */
.es-etiket {
  font-size: var(--fs-sm); color: var(--muted);
  text-align: center; margin-bottom: var(--sp-5);
}
.es-izgara { display: flex; gap: var(--sp-4); align-items: flex-start; }
.es-sutun { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.es-kart {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card2); color: var(--text);
  font-size: var(--fs-md); font-weight: 600; text-align: left;
  cursor: pointer; word-break: break-word;
  transition: transform var(--mo-hizli) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis),
              background var(--mo-hizli) var(--mo-cikis);
}
.es-kart:hover:not(:disabled) { border-color: var(--accent); }
.es-secili {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
/* Eslesen kart YERINDE KALIR ama soner — kaybolsaydi kalan kartlar
   ziplayip kullanicinin tiklamak uzere oldugu yeri kaydiriyordu. */
/* EŞLEŞEN KART: değişen şey ZEMİN, yazı değil.
   Önce yazı da yeşile dönüp `opacity: .55` ile soluyordu; koyu modda
   yeşil-üstü-yeşil okunmaz hale geliyordu (kullanıcı bildirdi).
   Artık zemin yeşile döner, YAZI ANA MÜREKKEBİNİ KORUR. Kartın
   "bitti" olduğunu zemin ve tik söyler, okunurluk bozulmaz. */
.es-ok {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--text);
  cursor: default;
  /* `opacity` BÜTÜN karta uygulanıyordu ve metni de siliyordu.
     "Bitti" bilgisini zemin ve tik taşır; yazı net kalır. */
  opacity: 1;
}
.es-ok::after {
  content: '✓';
  float: right; margin-left: var(--sp-2);
  color: var(--ok); font-weight: 800;
}

.es-karisan { margin-top: var(--sp-5); }
.es-karisan b {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); margin-bottom: var(--sp-3);
}
.es-kr {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--bad-soft); margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}
.es-kr i { font-style: normal; color: var(--bad-strong); font-weight: 800; }
.es-kr span { font-weight: 600; }

@media (max-width: 940px) {
  .es-izgara { gap: var(--sp-2); }
  .es-kart { min-height: 48px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
}

/* TUR GOSTERGESI — KALICI. Once gecis aninda 1,7 sn gorunup siliniyordu;
   kullanici "kaybolmasin, dursun ve dinamik degissin" dedi. Artik surekli
   ekranda ve tur ilerledikce guncelleniyor; gecis vurgusu ayri sinifta. */
.es-ust {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.es-tur-rozet {
  padding: var(--sp-1) var(--sp-4);
  background: var(--card2); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px;
  box-shadow: var(--kenar-isik);
  transition: background var(--mo-orta) var(--mo-cikis),
              color var(--mo-orta) var(--mo-cikis),
              border-color var(--mo-orta) var(--mo-cikis);
}
/* Tur DEGISTIGI an kisa vurgu — gozden kacmasin */
.es-tur-rozet.es-tur-yeni {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
  animation: mo-tur-gir var(--mo-orta) var(--mo-cikis);
}
/* Kacinci turdayiz — noktalarla */
.es-tur-nokta { display: inline-flex; gap: var(--sp-1); align-items: center; }
.es-tur-nokta i {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--line-strong); display: block;
  transition: background var(--mo-orta) var(--mo-cikis);
}
.es-tur-nokta i.bitti { background: var(--ilerleme-ogren); }
.es-tur-nokta i.suan  { background: var(--accent); transform: scale(1.35); }
@keyframes mo-tur-gir {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
}
.es-kart-alan { display: flex; flex-direction: column; }

/* Eslestirmede yeni tur: SADECE belirme, kayma yok.
   Once mo-sira kullaniliyordu (10px asagidan yukari + kademeli gecikme);
   kullanici "gozu yoruyor" dedi. Alti kartin birden degistigini fark
   ettirmek icin hafif bir fade yeter — asil isaret ustteki tur rozeti. */
.es-giris .es-kart { animation: es-belir var(--mo-orta) var(--mo-cikis) backwards; }
@keyframes es-belir { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   PREMIUM KATMAN — derinlik, kenar isigi, odak tutarliligi
   Denetimde bulundu: golgeler dagimikti (6 tek seferlik tanim), odak
   halkasi 4 farkli yerde ayri yaziliydi, gecis sureleri --mo-* yerine
   sabit .15s idi. Hepsi tek kaynaga baglandi.
   ===================================================================== */

/* 1) YUZEYLERE KENAR ISIGI — kartin ust kenarinda ince acik cizgi.
   Yuzeyin "isik aliyor" hissi; premium arayuzleri duz olanlardan ayiran
   en ucuz ve en etkili detay. Koyu temada cok daha zayif (bkz. degisken). */
.card, .stat-pill, .modal-card, .dd-panel {
  box-shadow: var(--shadow-card), var(--kenar-isik);
}
.btn:not(.btn-ghost):not(:disabled) { box-shadow: 0 2px 0 var(--edge), var(--kenar-isik); }
.btn-sm:not(.btn-ghost):not(:disabled) { box-shadow: 0 1px 0 var(--edge), var(--kenar-isik); }

/* 3) GECISLER --mo-* degiskenlerine baglandi (sabit .15s yerine).
   Tek yerden ayarlanabilir ve prefers-reduced-motion hepsini birden keser. */
.btn, .stat-pill, .word-card, .convo-card, .es-kart, .tab, .nav-item, .icon-btn {
  transition: transform var(--mo-hizli) var(--mo-cikis),
              box-shadow var(--mo-hizli) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis),
              background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}

/* 4) TIPOGRAFIK RAFINE.
   Buyuk basliklarda harfler birbirinden uzak duruyordu; negatif aralik
   basligi "tek parca" gosterir. Rakamlarda tabular hizalama: sayilar
   degisirken sutun kaymaz (sayaclar, istatistikler). */
h1, .hero-greet, .sb-title, .sy-tr, .hl-name { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }
.sv, .sp-tx b, .stat-pill b, .goal-legend b, .progress-info {
  font-variant-numeric: tabular-nums;
}

/* 5) OKUMA RAHATLIGI — aciklama metinleri sik satirliydi */
.sub, .notice, .es-etiket, .sr-l span, .auth-head span { line-height: var(--lh-rahat); }

/* 6) SECIM RENGI — varsayilan mavi tarayici secimi markayla uyusmuyordu */
::selection { background: var(--accent-soft); color: var(--text); }

/* ODAK HALKASI — dosyanin SONUNDA ve :where() OLMADAN.
   Once :where(...) ile yazilmisti: :where sifir ozgulluk verir, bu yuzden
   ".btn:not(.btn-ghost)" kurali odak halkasini eziyordu ve klavye
   kullanicisi dugmede nerede oldugunu goremiyordu (olculdu).
   Klavyeyle gezen kullanici HER ZAMAN nerede oldugunu gormeli. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-sm:focus-visible,
.btn-ghost:focus-visible,
.es-kart:focus-visible,
.chip:focus-visible,
.tab:focus-visible,
.nav-item:focus-visible,
.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--odak);
  border-color: var(--accent);
}
/* Yuksek kontrast/zorlanmis renk modunda golge gorunmez — outline sart */
@media (forced-colors: active) {
  button:focus-visible, a:focus-visible, input:focus-visible,
  select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* Yonetim: askidaki hesap rozeti */
.adm-askida { background: var(--bad-soft); color: var(--bad-strong); }

/* AI cumle denetimi — "Benimki de dogru mu?"
   Once "Bence bu da dogru" dugmesi vardi: ogrenci kendi kendini onayliyordu
   ve rastgele dizilim de kabul ediliyordu. Karari AI veriyor. */
.fb-sor { margin-top: var(--sp-3); }
.fb-ai {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-rahat);
}
.fb-ai b { display: block; margin-bottom: var(--sp-1); }
.fb-ai-ok  { background: var(--ok-soft);  border-color: var(--ok);  color: var(--ok-strong); }
/* HATA PANELI ALARM DEGIL.
   Once doygun kirmizi cerceve + doygun kirmizi metindi ve ekranin yarisini
   kapliyordu; ogrenme ekraninda hata NORMAL bir durumdur, tehlike degil.
   Artik yumusak tint zemin + SOLUK cerceve; metin ana murekkep, yalnizca
   BASLIK kirmizi kalir. Bilgi tasiyan renk yerinde duruyor, gurultu gitti. */
.fb-ai-bad {
  background: var(--bad-soft);
  border-color: var(--bad-line);
  color: var(--text);
}
.fb-ai-bad > b { color: var(--bad); }
.fb-ai-yok { color: var(--muted); }

/* ALISTIRMA TURU SERIDI — hero'nun altinda, TEK SIRA.
   Once ders akisi dugmeleriyle karisik duruyordu; yedi dugme iki satira
   tasiyor ve sayfanin altinda kaliyordu. */
.tur-serit {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-5);
  /* Genis ekranda tek sira: sarma YOK. Sigmazsa kaydirilir. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
  /* Sag kenarda solma: seridin devam ettigini gosterir. Kaydirilabilir
     oldugu belli olmadiginda kullanici ucuncu ogeyi hic gormuyordu. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.tur-serit::-webkit-scrollbar { display: none; }
.tur-serit > .btn { flex: 0 0 auto; }

/* GÜNÜN GÖREVİ — şeritteki sekiz düğme birbirinin tıpatıp aynısıydı ve
   hangisinin bugün ZORUNLU olduğu yalnızca sağdaki plan kartının üçüncü
   maddesinde yazılıydı. Şerit artık kendi kendini açıklıyor: görev başta,
   çerçevesi vurgu renginde, üzerinde "bugün" rozeti.
   Renk TEK BAŞINA bırakılmaz — rozet metni de var (renk körlüğü). */
.tur-serit > .ts-gorev {
  border-color: var(--accent);
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 10%, var(--card2));
  --edge: var(--accent-ring);
}
/* ONAY İŞARETİ — eskiden burada "her gün" / "bugün" yazan bir hap vardı,
   kaldırıldı (kullanıcı isteği): zorunluluğu çerçeve rengi ve şeritteki
   sıra zaten söylüyor, plan kartı da ayrıca sayıyor.
   Kalan tek işaret YAPILDI durumu — yeşil çerçevenin yanında sade bir ✓.
   Renk tek başına bırakılmasın diye ikon var; metin gereksiz. */
.ts-onay {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--sp-2);
  width: var(--sp-5); height: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--ok);
  color: var(--ink-ters);
  flex-shrink: 0;
}
.ts-onay .ic { width: var(--sp-3); height: var(--sp-3); }
/* Yapıldıysa vurgu kalkar, onay kalır: bitmiş bir işi hâlâ "bugün yap"
   diye işaretlemek yanlış yönlendirir. */
.tur-serit > .ts-gorev.ts-ok {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--card2));
}

/* ÇEKİRDEK TUR — dönen görevin ÜSTÜNDE, her gün istenir (şu an: Yazma).
   Dönen görevle aynı vurgu dilini kullanır ama rozeti "her gün" der;
   ikisi yan yana durduğunda hangisinin sürekli olduğu okunsun. */
.tur-serit > .ts-cekirdek {
  border-color: var(--accent);
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 10%, var(--card2));
  --edge: var(--accent-ring);
}
.tur-serit > .ts-cekirdek.ts-ok {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--card2));
}
/* Maske YALNIZCA kaydirma gerektiginde anlamli. Once
   "@supports (animation-timeline: scroll())" ile kapatiliyordu — yanlis
   kontroldu: o ozelligin destegi seridin sigip sigmadigiyla ilgisiz ve
   Chrome destekledigi icin maske HER ZAMAN kapaniyordu. Genis ekranda
   serit zaten sigiyor (olculdu: 1102/1102), maske gorunmez; dar ekranda
   devreye girip kaydirilabildigini gosterir. */

@media (max-width: 940px) {
  .tur-serit { gap: var(--sp-2); margin-bottom: var(--sp-4); }
}

/* AI denetim kutusunda karsilastirma: yalnizca "yanlis" demek ogretmiyor,
   ogrenci kendi cumlesini dogrusuyla yan yana gormeli. */
.fb-kars { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid currentColor; opacity: .95; }
.fb-kars-satir { display: flex; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-1); }
.fb-kars-satir i {
  flex: 0 0 54px; font-style: normal; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .3px; opacity: .75; font-weight: 700;
}
.fb-kars-satir span { font-weight: 600; min-width: 0; }
@media (max-width: 940px) {
  .fb-kars-satir { flex-direction: column; gap: 0; }
  .fb-kars-satir i { flex: none; }
}

/* Anlam penceresi: hic calisilmamis kelimenin durum satiri */
/* IKI SEVIYE YAN YANA — "ben A2 miyim A1 miyim" sorusunun cevabi.
   Ayni ekranda ikisi de gorunmezse kullanici birini digerinin yerine koyar. */
.sv-ikili {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sv-ikili > .sv-kutu {
  flex: 1 1 240px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--kenar-isik);
}
.sv-et {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
}
.sv-kutu > b {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.8px;
  line-height: 1.1; color: var(--text);
}
.sv-alt { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-normal); }

/* Hikaye ozel uzunluk alani — select ile ayni yukseklikte dursun */
.story-ozel {
  width: 96px; height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  background: var(--card); border: 1px solid var(--btn-line);
  border-radius: var(--r-md); color: var(--text);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-1), var(--kenar-isik);
}
.story-ozel-et { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

/* Ertelenen soru etiketi + ilerleme satirindaki sayac */
.ert-tag {
  background: var(--warn-soft); color: var(--warn-ink);
  border-color: rgba(245, 158, 11, 0.45);
}
:root[data-theme="dark"] .ert-tag { color: var(--warn); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ert-tag { color: var(--warn); }
}
.pi-bekleyen { color: var(--ilerleme-yolda); font-weight: 800; font-size: var(--fs-base); }
/* Carpan sayinin BIRIMINI acar ("12 kelime kaldı ×2 cümle"): asil sayidan
   sessiz, cunku bir ek bilgi — kendisi bir sayac degil. */
.pi-carpan {
  font-style: normal; font-weight: 700;
  font-size: var(--fs-sm); color: var(--muted);
  margin-left: 2px;
}

/* Eylem satiri artik izgaranin USTUNDE — izgaranin ust boslugu ondan gelsin */
/* Tur ici duzeltme penceresindeki arac satiri — "Duzeltmeler" ekranindaki
   araclarin tur icinde anlamli olanlari. Kontrolden ONCE hic cizilmez:
   arastirma baglantilari ve AI onerisi Ingilizce cumleyi tasir. */
.modal-body .fix-links { margin-top: var(--sp-4); }
.dz-arac { margin-top: var(--sp-3); }
.modal-body .fix-field { margin-top: var(--sp-3); }
.modal-body .fix-field > label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-1); }

/* =====================================================================
   CALISILAN KELIME ŞERİDİ — soru metninin HEMEN ÜSTÜNDE
   ---------------------------------------------------------------------
   Kelime yalnızca sağ paneldeydi ve kullanıcı oraya bakmıyordu:
   "hangi kelimeye geçtiğimi görmeden soru çözüyorum". Göz zaten Türkçe
   cümleye gidiyor; kelime tam onun üstüne, okuma yoluna kondu.
   Bilgi YENİ DEĞİL — aynı kelime yan panelde ve havuz taşlarında zaten
   var; yalnızca görülecek yere taşındı, cevap ele verilmiyor.
   ===================================================================== */
.ex-kelime {
  display: flex; align-items: center; gap: var(--sp-3);
  /* SIGMAZSA SARAR. Kimlik çipleri `flex-shrink: 0` + `white-space: nowrap`
     olduğu için 430px altında satır kutunun DIŞINA taşıyordu (ölçüldü:
     320/360/390/430'da 4-6 öğe). Geniş ekranda tek satır zaten sığıyor,
     sarma orada hiçbir şeyi değiştirmez. */
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--tint-blue);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-md);
}
.ex-kelime-metin { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex: 1; }
.ex-kelime-metin b { font-size: var(--fs-lg); letter-spacing: -0.2px; }
.ex-kelime-metin span { font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
/* Okunus kelimenin hemen sagi — serit TEK SATIR kalmali, bu yuzden
   IPA burada cizilmez (anlam penceresinde duruyor). */
.ex-kelime-oku {
  font-style: normal; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.3px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.ex-kelime-spk { flex-shrink: 0; }
.ex-kelime-say {
  flex-shrink: 0; font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* Kimlik cipleri: ortam · rol · seviye — kucuk, ikincil, tek satir */
.ex-kelime-kimlik { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; flex-wrap: wrap; }
.ex-kelime-kimlik i {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  white-space: nowrap;
}
.ex-kelime-kimlik .ex-ayrac { font-style: normal; color: var(--line-strong); }
.ex-kelime-kimlik .ic { width: 13px; height: 13px; }

/* ---- YAN PANEL: kimlik degil DURUM ----
   `.sm-row` stilleri `.side-meta`ya BAGLIYDI; o kapsayici kalkinca etiket
   ile deger yapisti ("Durumkutu 1"). Panel artik kendi stil kumesine sahip
   ve her blok kendi YUZEYINDE duruyor — ciplak metin yigini degil. */
.sd-blok { margin-bottom: var(--sp-4); }
.sd-blok:last-child { margin-bottom: 0; }
.sd-blok > b {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2);
}
.sd-blok > b .ic { width: 13px; height: 13px; vertical-align: -2px; }
/* Blogun govdesi KENDI YUZEYI: cerceve + kenar isigi + SOL renk seridi.
   Renk yapiya gore: durum bandi ilerleme dilinden okunur (ayni kavram her
   yerde ayni renk), dilbilgisi mor, ilerleme mavi, tur notr. */
/* Blok = tepsinin uzerinde KART: beyaz yuzey + yumusak golge.
   Zemini panelle ayni olunca (ikisi de --card2) hicbir sey ayirt
   edilmiyordu. Sol kenardaki 3px renk durum bandini tasir. */
.sd-govde {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: var(--kenar-vurgu) solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3) var(--sp-4);
}
.sd-yeni  > .sd-govde { border-left-color: var(--ilerleme-yeni); }
.sd-yolda > .sd-govde { border-left-color: var(--ilerleme-yolda); }
.sd-ogren > .sd-govde { border-left-color: var(--ilerleme-ogren); }
.sd-gramer    > .sd-govde { border-left-color: var(--violet); }
.sd-ilerleme  > .sd-govde { border-left-color: var(--accent); }
.sd-yeni  > b .ic { color: var(--ilerleme-yeni); }
.sd-yolda > b .ic { color: var(--ilerleme-yolda); }
.sd-ogren > b .ic { color: var(--ilerleme-ogren); }
.sd-gramer   > b .ic { color: var(--violet); }
.sd-ilerleme > b .ic { color: var(--accent); }
.sd-blok .sm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); padding: var(--sp-2) 0;
  font-size: var(--fs-sm); border-bottom: 1px solid var(--line);
}
.sd-blok .sm-row:first-child { padding-top: 0; }
.sd-blok .sm-row:last-child { padding-bottom: 0; border-bottom: none; }
/* Etiketler SOLUK DEGIL: --faint kart2 uzerinde 4.5'i gecmiyordu.
   Hiyerarsi RENK SOLDURARAK degil, agirlik ve boyutla kurulur. */
.sd-blok .sm-k { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.sd-blok .sm-v {
  display: flex; align-items: center; gap: var(--sp-1);
  color: var(--text); font-weight: 700; text-align: right;
  min-width: 0; justify-content: flex-end;
}
.sd-blok .sm-v i { font-style: normal; font-weight: 600; color: var(--faint); }
.sd-blok .sm-v .bant { flex-shrink: 0; }
.sd-kucuk { color: var(--muted); font-size: var(--fs-xs); }
/* Karistirilan cift sayaci */
.es-kr em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--faint); }
.es-gecmis { margin-top: var(--sp-4); }
.es-gecmis .sub { margin: var(--sp-2) 0 0; }
.sd-not { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-normal); }
/* Ust uste gelen aciklama satirlari birbirine yapismasin */
.sd-govde .sd-not + .sd-not,
.sd-govde .sm-row + .sd-not { margin-top: var(--sp-3); }
/* "Zorlanıyorsun" gerekcesi: sayilardan AYRI dursun, yoksa bir satir
   daha sanilip okunmadan geciliyor. */
.sd-zor {
  background: var(--warn-soft);
  border-left: var(--kenar-vurgu) solid var(--warn);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text);
}
.sd-zor b { font-weight: 800; }

/* Duzensiz fiil: V1/V2/V3 tek blok, hizali sutun */
.sd-irr { display: flex; flex-direction: column; }
.sd-irr span {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; font-size: var(--fs-sm); font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.sd-irr span:first-child { padding-top: 0; }
.sd-irr span:last-child { padding-bottom: 0; border-bottom: none; }
.sd-irr i {
  flex: 0 0 24px; font-style: normal; font-size: var(--fs-xs);
  font-weight: 800; color: var(--faint); letter-spacing: .3px;
}
/* Cumle ilerlemesi: canli dolgu + koyu halka (bkz. cubuk kurali) */
.sd-bar {
  height: 6px; border-radius: var(--r-full); background: var(--page);
  overflow: hidden; margin-bottom: var(--sp-2);
}
.sd-bar > div {
  height: 100%; border-radius: var(--r-full);
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-strong);
}
/* YENI KELIME: kisa bir vurgu — "gectim mi" sorusunu kapatir.
   HAREKET KURALI: yalnizca opacity animasyonla (bkz. HAREKET bolumu).
   Halka AYRI bir katmanda sabit duruyor, sonen sey onun saydamligi —
   box-shadow'u animasyonlamak her karede yeniden boyama demekti. */
.ex-kelime { position: relative; }
.ex-kelime-yeni::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: mo-kelime var(--mo-yavas) var(--mo-cikis) forwards;
}
@keyframes mo-kelime { from { opacity: 1; } to { opacity: 0; } }
.yeni-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
@media (max-width: 940px) {
  .ex-kelime { gap: var(--sp-2); }
  .ex-kelime-metin { flex-wrap: wrap; gap: 0 var(--sp-2); }
  .ex-kelime-say { display: none; }   /* dar ekranda satiri bolmesin */
}

/* TUR ICINDE DUZELTME — bozuk cumleyi turu birakmadan duzelt.
   "Turkcesi yanlis mi?" soru metninin ALTINDA durur: hatayi tam orada,
   cumleyi kurmaya calisirken fark ediyorsun. */
.tr-duzelt { margin-top: var(--sp-2); }
.fb-duzelt-satir {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: stretch;
  margin-top: var(--sp-3);
}
/* Cocuklarin KENDI dikey bosluklari satiri kaydiriyordu: .flag-btn'in
   margin-top'u yuzunden "Cümle hatalı, bildir" ile "Şimdi düzelt" ayni
   hizada durmuyordu (kullanici bildirdi). Kural SATIRIN sorumlulugunda —
   bileşen ne getirirse getirsin satir hizalar. */
.fb-duzelt-satir > * { margin-top: 0; margin-bottom: 0; min-height: var(--ctrl-h); }
@media (max-width: 940px) {
  .fb-duzelt-satir > .btn-sm { flex: 1 1 auto; justify-content: center; }
}

/* "Neden yanlis yaptim" kutusu — kural tabanli teshis (engine/hata.js) */
.fb-neden {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--tint-neutral);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--kenar-isik);
}
.fbn-bas {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; font-size: var(--fs-sm); color: var(--text);
  margin-bottom: var(--sp-2);
}
.fbn-bas .ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--ilerleme-yolda); }
.fbn-govde { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-rahat); }
.fbn-govde b { color: var(--text); font-weight: 800; }
/* Birden fazla bulgu varsa aralarina ince ayrac */
.fbn-ayrac { height: 1px; background: var(--line); margin: var(--sp-3) 0; }

/* KURALI GOR — bulgu basliginin sagindaki isaret dugmesi */
.fbn-bas { justify-content: space-between; }
.fbn-kural {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0;
  margin-left: auto; padding: var(--sp-1) var(--sp-3); min-height: 30px;
  background: var(--card); border: 1px solid var(--btn-line); border-radius: var(--r-full);
  font: inherit; font-size: var(--fs-xs); font-weight: 800; color: var(--muted);
  cursor: pointer;
  transition: color var(--mo-hizli) var(--mo-cikis), border-color var(--mo-hizli) var(--mo-cikis);
}
.fbn-kural:hover { color: var(--accent); border-color: var(--accent); }
.fbn-kural .ic { width: 14px; height: 14px; }
@media (max-width: 940px) {
  .fbn-kural { min-height: 40px; }
  .fbn-kural span { display: none; }   /* dar ekranda yalniz ikon */
}

/* Kural penceresi — UST YARI: kullanicinin KENDI cumlesinin analizi */
.kural-senin {
  padding: var(--sp-4);
  background: var(--tint-neutral); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--kenar-isik);
}
.ka-satir { display: flex; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-2); }
.ka-satir i {
  flex: 0 0 54px; font-style: normal; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .3px; color: var(--faint); font-weight: 700;
}
.ka-satir span { min-width: 0; font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-normal); }
.ka-satir mark {
  background: var(--warn-soft); color: var(--warn-ink);
  padding: 0 4px; border-radius: var(--r-sm); font-weight: 800;
}
:root[data-theme="dark"] .ka-satir mark { color: var(--warn); }
.ka-dogru mark { background: var(--ok-soft); color: var(--ok-strong); }
:root[data-theme="dark"] .ka-dogru mark { color: var(--ok); }
.ka-not {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-rahat);
}
.ka-not b { color: var(--text); }
@media (max-width: 940px) {
  .ka-satir { flex-direction: column; gap: var(--sp-1); }
  .ka-satir i { flex: none; }
}

/* AI aciklamasi — YALNIZCA siniflanamayan sira hatasinda gelir.
   Deterministik icerikten AYIRT EDILIR: kaynak belli olsun. */
.kural-ai {
  padding: var(--sp-4);
  background: var(--tint-violet);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--kenar-isik);
}
.kural-ai > p { margin: 0; line-height: var(--lh-rahat); }
.kural-ai-neden { margin-top: var(--sp-2) !important; color: var(--muted); font-size: var(--fs-sm); }
.kural-ai-ipucu {
  margin-top: var(--sp-3) !important; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.kural-ai-ipucu .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: var(--sp-1); color: var(--accent); }
.kural-ai-bekle { color: var(--faint); display: flex; align-items: center; gap: var(--sp-2); }
.kural-ai-bekle .ic { width: 15px; height: 15px; }

/* Kural penceresinin govdesi */
.kural-blok { margin-bottom: var(--sp-3); }
.kural-blok > b {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-1);
}
.kural-blok > p { margin: 0; line-height: var(--lh-rahat); }
/* Kural once KULLANICININ cumlesiyle anlatilir; genel hali onun altinda
   ikincil tonda durur — biri digerini gizlemesin. */
.kural-genel {
  margin-top: var(--sp-2) !important;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}
.kural-neden > p { color: var(--muted); }
.kural-ornek { display: flex; flex-direction: column; gap: var(--sp-2); }
.ko-satir {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card2); border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.ko-yanlis { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.ko-dogru { color: var(--ilerleme-ogren); font-weight: 700; }
.kural-ipucu {
  margin-bottom: 0; padding: var(--sp-3);
  background: var(--tint-blue); border-radius: var(--r-md);
}
.kural-ipucu > p { color: var(--text); }
/* KISA EKRAN (dizustu 640-768px, telefon yatay, tarayici araclari acik):
   sinir GENISLIK degil YUKSEKLIK. Ayni icerik burada ~90px kisaliyor —
   cogu durumda kaydirmaya hic gerek kalmiyor. Metin kuculmez, yalnizca
   boslukar daralir: okunabilirlik ayni kalsin. */
@media (max-height: 760px) {
  .modal-card { padding: var(--sp-5); gap: var(--sp-3); }
  .kural-senin { padding: var(--sp-3); }
  .kural-blok { margin-bottom: var(--sp-2); }
  .ko-satir { padding: var(--sp-1) var(--sp-3); }
  .kural-ornek { gap: var(--sp-1); }
  .kural-ipucu { padding: var(--sp-2) var(--sp-3); }
}
.fbn-kars { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.fbn-satir { display: flex; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-1); }
/* Etiketler --muted: --faint bu yuzeyde KOYU temada 4.21:1 olculdu
   (sinir 4.5) ve kullanici soluk yazi istemiyor. */
.fbn-satir i {
  flex: 0 0 54px; font-style: normal; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700;
}
.fbn-satir span { font-weight: 600; min-width: 0; font-size: var(--fs-sm); }
@media (max-width: 940px) {
  .fbn-satir { flex-direction: column; gap: 0; }
  .fbn-satir i { flex: none; }
}

/* ===== NEDEN YANLIS YAPTIM — AI katmani =====
   Karsilastirma artik kutunun BASINDA duruyor (once dipteydi): mekanik
   ve her zaman dogru olan bilgi once gelir, yorum sonra. Ilk cocukken
   ustundeki ayrac gereksiz. */
.fb-neden > .fbn-kars:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
/* Suclu kelime IKI cumlede de isaretlenir — metni okumadan nerede
   oldugunu gormek icin. Renk tek basina birakilmaz: kalinlik + zemin. */
.fbn-satir mark {
  background: var(--isaret-bg); color: var(--text);
  font-weight: 800; border-radius: 4px; padding: 0 3px;
  box-shadow: inset 0 0 0 1.5px var(--warn);
}
.fbn-sor { margin-top: var(--sp-3); }
.fbn-alan:empty { display: none; }
.fbn-blok { margin-top: var(--sp-3); }
.fbn-blok > b {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); font-weight: 700; margin-bottom: var(--sp-1);
}
.fbn-blok > b .ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.fbn-blok > p { font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-rahat); }
.fbn-blok > p b { font-weight: 800; color: var(--accent-strong); }
:root[data-theme="dark"] .fbn-blok > p b { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fbn-blok > p b { color: var(--accent); }
}
/* "Not" akilda kalmali — kendi yuzeyinde durur */
.fbn-not {
  background: var(--tint-blue); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.fbn-not > b { margin-bottom: var(--sp-1); }
.fbn-yedek-not {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--sp-3);
}
.fbn-yedek-not .ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--warn-ink); }
:root[data-theme="dark"] .fbn-yedek-not .ic { color: var(--warn); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fbn-yedek-not .ic { color: var(--warn); }
}

/* =====================================================================
   DILBILGISI KAYNAGI
   Kaynak ile kullanicinin GECMISI ayni ekranda: her konunun yaninda
   "bu konuda kac hata yaptin" rozeti durur, en cok hata yaptiklari
   listenin basina cikar. Aciklamalar Ingilizce, etiketler Turkce.
   ===================================================================== */
/* KONU IZGARASI — 71 konu tek sutunda cok uzun bir sayfa oluyordu.
   flex + flex-basis (grid auto-fill DEGIL, CLAUDE.md): son satir kalan
   alani paylasir, sagda bosluk kalmaz. */
.gr-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gr-liste > * { flex: 1 1 300px; min-width: 0; }
.gr-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--ctrl-h);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-md); text-align: left; cursor: pointer;
  color: var(--text);
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              transform var(--mo-hizli) var(--mo-cikis);
}
.gr-satir:hover { border-color: var(--accent); transform: translateX(2px); }
.gr-satir-ana { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; }
.gr-satir-ad { font-weight: 700; font-size: var(--fs-sm); }
/* Ozet TEK SATIR — kart ızgarasında iki satırlık özetler satır yüksekliklerini
   eşitsiz yapıyordu; tamamı konunun kendisinde zaten var. */
.gr-satir-ozet {
  font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-sik);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-satir-yan { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.gr-satir-zayif { border-color: rgba(245, 158, 11, 0.45); }

/* Seviye rozeti — hangi yapi hangi CEFR basamaginda (English Grammar Profile) */
.gr-lvl {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  background: var(--tint-neutral); color: var(--muted);
}
.gr-lvl-A1 { background: var(--tint-blue); color: var(--accent); }
.gr-lvl-A2 { background: var(--tint-violet); color: var(--violet-ink, var(--accent)); }
.gr-lvl-B1 { background: var(--ok-soft); color: var(--ok-strong); }
:root[data-theme="dark"] .gr-lvl-B1 { color: var(--ok); }

.gr-hata {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 800;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn-ink);
}
.gr-hata .ic { width: 12px; height: 12px; }
:root[data-theme="dark"] .gr-hata { color: var(--warn); }

/* ---- giris karti: baslik + arama yan yana, altinda bolum zinciri ---- */
.gr-giris-ust {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.gr-giris-ust > div { flex: 1 1 320px; min-width: 0; }
.gr-giris-ust > input { flex: 0 1 300px; }
.gr-zincir {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.gr-zincir .schip .ic { width: 14px; height: 14px; }
.gr-bolum { scroll-margin-top: 84px; }   /* yapiskan ust serit kapatmasin */

/* ---- alistirmaya donus seridi ---- */
.gr-donus {
  position: sticky; top: var(--sp-2); z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  background: var(--tint-blue); border: 1px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--fs-sm);
}
.gr-donus > span { flex: 1; min-width: 0; }
.gr-donus > .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

/* ---- konu detayi ---- */
.gr-ust {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.gr-yol { font-size: var(--fs-sm); color: var(--faint); margin-left: auto; }
.gr-baslik { margin-bottom: var(--sp-1); }
.gr-ozet { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-rahat); }

/* IKI SUTUN: solda kural, sagda pratik. Genis ekranda sayfa uzayip
   dagilmasin ve kural ile ornek YAN YANA okunabilsin diye. */
.gr-iki { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
.gr-sut { flex: 1 1 340px; min-width: 0; }
.gr-alt { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.gr-blok { margin-bottom: var(--sp-4); }
.gr-blok > b {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-2);
}
.gr-blok:last-child { margin-bottom: 0; }

.gr-bicim { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Bicim satirlari BITISIK bir blok: ayri ayri kutular satiri dagitiyordu.
   Etiket sutunu icerige gore daralir — "✓" icin 92px bos alan kaliyordu. */
.gr-bicim-satir {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card2);
}
.gr-bicim-satir:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.gr-bicim-satir:last-child { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.gr-bicim-satir:only-child { border-radius: var(--r-sm); }
.gr-bicim-satir i {
  flex: 0 0 auto; min-width: 58px;
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  color: var(--faint); text-transform: uppercase; letter-spacing: .3px;
}
.gr-bicim-satir span { min-width: 0; font-size: var(--fs-sm); }

.gr-not { margin: 0; padding-left: var(--sp-4); }
.gr-not li { margin-bottom: var(--sp-2); line-height: var(--lh-normal); font-size: var(--fs-sm); }
.gr-not li:last-child { margin-bottom: 0; }

.gr-ornek p {
  margin: 0 0 var(--sp-1); padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  line-height: var(--lh-normal); font-size: var(--fs-sm);
}
.gr-ornek p:last-child { margin-bottom: 0; }
.gr-ilgili { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 940px) {
  .gr-bicim-satir { flex-direction: column; gap: var(--sp-1); }
  .gr-bicim-satir i { min-width: 0; }
  .gr-yol { margin-left: 0; }
  .gr-liste > * { flex-basis: 100%; }     /* telefonda tek sutun */
  .gr-giris-ust > input { flex-basis: 100%; }
}

/* Kural penceresinden kaynaga gecis */
.kural-kaynak { margin-bottom: 0; }
.kural-kaynak .btn { width: 100%; justify-content: flex-start; }
.kk-not { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--faint); }

/* Geri bildirim kutusunun dibindeki kaynak referansi */
.fbn-konu {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--ctrl-h);
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--tint-blue); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.fbn-konu:hover { border-color: var(--accent); }
.fbn-konu > span { flex: 1; min-width: 0; }
.fbn-konu .ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }

/* KOPYALA — metni secmek zorunda kalmadan panoya al */
/* GIRDI GENISLIGI: input[type=text] genisligini EBEVEYN FLEX'inden alir
   (flex:1). Sarmalayici 'block' olunca min-width:220px'e dusuyor ve kutu
   daraliyordu (ekran goruntusunde goruldu). Sarmalayici da flex olmali.
   Kopyala dugmesi girdinin ICINDE degil HEMEN YANINDA (kullanici istegi). */
.fix-giris { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.fix-giris > input { flex: 1; min-width: 0; }
.kopya-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-h); height: var(--ctrl-h); flex-shrink: 0; vertical-align: middle;
  background: var(--card2); border: 1px solid var(--btn-line); border-radius: var(--r-md);
  color: var(--faint); cursor: pointer;
  transition: color var(--mo-hizli) var(--mo-cikis), border-color var(--mo-hizli) var(--mo-cikis);
}
.kopya-btn:hover { color: var(--accent); border-color: var(--accent); }
.kopya-btn .ic { width: 15px; height: 15px; }
.kopya-btn.kopya-ok { color: var(--ok-strong); border-color: transparent; }
:root[data-theme="dark"] .kopya-btn.kopya-ok { color: var(--ok); }
@media (max-width: 940px) { .kopya-btn { width: 40px; height: 40px; } }

/* GUNUN GOREVI — plan maddesindeki baslat dugmesi */
/* Günün görevi düğmesi: satırın SAĞ ucunda, dikeyde ortalı.
   `margin-top` ile satır içi itmeye çalışmak işe yaramıyordu. */
.plan-gorev { flex-shrink: 0; margin-left: auto; }
@media (max-width: 640px) {
  /* Dar ekranda düğme alt satıra iner ve tam genişlik alır — metnin
     yanına sıkışıp iki kelimeyi alt alta bölmesin. */
  .plan-list li { flex-wrap: wrap; }
  .plan-gorev { width: 100%; margin-left: 0; justify-content: center; }
}

/* HAFTALIK KAPSAMA — hangi beceriyi hangi gun yaptin */
/* Etiket USTTE, gunler kendi satirinda. Once hepsi tek flex satirdaydi
   ve flex-wrap:wrap ile 7. gun alta dusuyordu (dar hero sutunu). */
.hafta-kapsam {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
/* 7 gun TEK SIRA. Sigmazsa daralirlar, alt satira DUSMEZLER. */
.hk-satir {
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  width: 100%; min-width: 0;
}
.hk-et {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
}
.hk-gun {
  display: inline-flex; align-items: center; justify-content: center;
  /* Tek sirada kalmak icin DARALABILIR: sabit 30px + flex-shrink:0
     olsaydi dar sutunda tasar, wrap'siz tasma daha kotudur. */
  flex: 0 1 30px; height: 30px; min-width: 24px; aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--card2); border: 1px solid var(--line);
  color: var(--faint);
}
.hk-gun .ic { width: 15px; height: 15px; }
.hk-gun.hk-ok {
  background: var(--ok-soft); border-color: var(--ilerleme-ogren); color: var(--ilerleme-ogren);
}
.hk-gun.hk-bugun { box-shadow: 0 0 0 2px var(--accent-ring); }
@media (max-width: 940px) { .hk-gun { width: 34px; height: 34px; } }

.wg-alt { margin-top: var(--sp-5); }

/* ---- Kutu dagilimi: tiklanabilir satir + acilan icerik ---- */
/* Satir artik <button>: klavye ve ekran okuyucu da calissin. Buton
   varsayilanlari sifirlanir, gorunum .bar-row'dan gelir. */
button.bar-row {
  width: 100%; background: transparent; border: none;
  font: inherit; color: inherit; text-align: left;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--mo-hizli) var(--mo-cikis);
}
button.bar-row:hover:not(:disabled) { background: var(--card2); }
button.bar-row:disabled { cursor: default; opacity: .55; }
button.bar-row.acik { background: var(--card2); }
.bar-ok {
  width: 16px; flex-shrink: 0; display: flex; align-items: center;
  color: var(--faint); opacity: 0;
  transition: opacity var(--mo-hizli) var(--mo-cikis), transform var(--mo-hizli) var(--mo-cikis);
}
.bar-ok .ic { width: 13px; height: 13px; }
button.bar-row:hover:not(:disabled) .bar-ok { opacity: 1; }
button.bar-row.acik .bar-ok { opacity: 1; transform: rotate(90deg); }
/* bt/bl artik <span> — flex davranisi korunsun */
button.bar-row .bt { display: block; }
button.bar-row .bt > span { display: block; height: 100%; border-radius: var(--r-full); }

.kutu-ic {
  margin: 0 0 var(--sp-3) var(--sp-2);
  padding: var(--sp-4);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--kenar-isik);
}
.kutu-cipler { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kutu-cip {
  padding: var(--sp-1) var(--sp-3); min-height: 30px;
  background: var(--card); border: 1px solid var(--btn-line);
  border-radius: var(--r-full);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis);
}
.kutu-cip:hover { border-color: var(--accent); color: var(--accent); }
.kutu-daha { margin-top: var(--sp-3); color: var(--faint); font-size: var(--fs-xs); }
@media (max-width: 940px) {
  .kutu-cip { min-height: 40px; }
  /* Satir <button> oldu; olculdu: telefonda 32px kaliyordu (kural 40px). */
  button.bar-row { min-height: 40px; }
}

.wp-durum-yeni { color: var(--faint); }
/* Ilerleme dili: "henuz calismadin" YENI bandidir, basari degil — ikonu da
   notr olmali. .wp-durum .ic yesile boyuyordu. */
.wp-durum-yeni .ic { color: var(--ilerleme-yeni); }

/* Anlam penceresi artik KENDILIGINDEN KAPANMIYOR (kullanici AI'nin buldugu
   anlami okumaya firsat bulamiyordu). Kapatma yolu gorunur olmali. */
.word-pop { position: fixed; }          /* kapat dugmesi konumlansin diye */
/* Cok uzun pencere (uzun anlam + onay ekrani) ekrani asmasin: kaydirilsin.
   Konumlandirma zaten ortalamaya dusuyor ama guvenlik agi gerekli. */
.word-pop { max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.word-pop { max-height: calc(100dvh - 24px); }   /* mobil adres cubugu */
.wp-kapat {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--faint); cursor: pointer;
}
.wp-kapat:hover { background: var(--card2); color: var(--text); }
.wp-kapat .ic { width: 15px; height: 15px; }
/* Baslik kapat dugmesinin altina girmesin */
.word-pop .wp-head { padding-right: 30px; }

/* Onay artik gecici toast degil, pencerenin ICINDE duruyor */
.wp-eklendi {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--ok-soft); border-radius: var(--r-sm);
  color: var(--ok-strong); line-height: var(--lh-normal);
}
.wp-eklendi > .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: var(--sp-1); }
.wp-eklendi b { display: block; font-size: var(--fs-sm); font-weight: 800; }
.wp-eklendi span { display: block; font-size: var(--fs-xs); opacity: .9; margin-top: var(--sp-1); }
:root[data-theme="dark"] .wp-eklendi { color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .wp-eklendi { color: var(--ok); }
}
@media (max-width: 940px) {
  .wp-kapat { width: 40px; height: 40px; top: 2px; right: 2px; }
  .word-pop .wp-head { padding-right: 40px; }
}

/* =====================================================================
   3D CAM IKON KAPSAYICILARI

   Ikon setimiz TEK RENKLI KONTUR (icons.js). Bir konturun kendisi cam
   olamaz — dolgusu, kalinligi, kirilmasi yok. Bu yuzden hacim IKONDA
   degil KAPSAYICIDA kurulur; premium arayuzlerin yaptigi da budur:

     1) ustten gelen isik      -> egik parlaklik gecisi (linear-gradient)
     2) ust kenarda ince cizgi -> inset 0 1px 0 (yuzeyin ust kirilmasi)
     3) altta ic golge         -> inset 0 -1px 0 (kalinlik hissi)
     4) disari dusen yumusak golge
     5) arkayi bulaniklastirma -> backdrop-filter (gercek cam)

   -webkit-backdrop-filter ZORUNLU: iOS Safari oneksizini tanimiyor ve
   cam efekti duz renge duserdi (CLAUDE.md kurali).
   ===================================================================== */

/* ---- CAM UYGULANAN BUTUN IKON KAPSAYICILARI ----
   Bu liste EKSIK kalmisti: yalnizca 5 kapsayici vardi ve ust seritteki
   haplar, senaryo kartlari, rozetler, hikaye arsivi, karsilama adimlari
   ve sohbet dugmesi duz kaliyordu. Yeni bir ikon cipi eklersen BURAYA
   da ekle, yoksa o cip camsiz kalir. */
.cam,
.stat-box .si,
.icon-btn,
.summary-big .sb-icon,
.brand-logo,
.stat-pill .sp-ic,
.rail-toggle,
.convo-card .cc-ic,
.badge-item .bi-ic,
.st-ic,
.ks-no,
.bos-durum .bd-ic,
.ch-say {
  /* PREMIUM DENETIMI: burasi cok katmanli golge uretiyordu (gradyan +
     kenar isigi + iki ic golge + dis golge + backdrop-filter). Yigin
     plastik gorunum veriyordu; derinlik artik YUZEY RENGIYLE kuruluyor,
     golge TEK seviye.

     ZEMIN VE KENAR BURADA YAZILMAZ — BIR KEZ YAZILDI VE KIRDI.
     Bu kural dosyanin SONUNDA duruyor: kendi rengi olan her cipi ezer.
     Olculdu — senaryo karti (--accent), rozet (--rozet-renk), hikaye
     arsivi (--violet-soft), karsilama adimi (--accent) ve ust serit hapi
     (--tile-bg) gri kaldi; ustune ikon rengi beyaz oldugu icin ikonlar
     gri zeminde TAMAMEN GORUNMEZ oldu. Ayni tuzak once .brand-logo'da
     yasanmisti (bkz. asagisi).
     Her cip zeminini KENDI kuralinda tutar; burasi yalnizca golge verir. */
  position: relative;
  box-shadow: var(--shadow-1);
}

/* Genel yardimci sinifin kendi rengi yok — notr cam yuzeyi BURADA alir.
   Listedeki oteki cipler zaten kendi zeminlerini tasiyor. */
.cam {
  background-color: var(--cip-yuzey);
  border: 1px solid var(--cip-kenar);
}

.summary-big .sb-icon {
  width: 76px; height: 76px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-3);
  /* DOLU renk: tur ozeti bir KUTLAMA ani, %13 alfali tint orada
     soluk kaliyordu. Oteki kimlik cipleriyle ayni desen. */
  background-color: var(--accent);
  color: var(--ink-ters);
}
:root[data-theme="dark"] .summary-big .sb-icon { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .summary-big .sb-icon { color: #0f1720; }
}
.summary-big .sb-icon .ic { width: 38px; height: 38px; }

/* Konturun kendisine de ince bir kabartma: ustten isik alan bir cizgi
   gibi dursun. drop-shadow konturu takip eder, kutuyu degil. */
/* BUTUN IKONLAR — kapsayicisi olsun olmasin — ince kabartma alir.
   Cam kapsayicilar hacmi kutudan aliyordu ama basliklardaki, sekmelerdeki,
   uyari kutularindaki, alt gezinmedeki ikonlar DUZ kaliyordu: ikon setinin
   yarisi camli yarisi duzdu. Kontur ikonda hacim ancak boyle kurulur. */
.ic { filter: drop-shadow(0 1px 0 var(--ikon-kabartma)); }

/* Cam kutu icindeki ikon kutunun kendi ust isigiyla kabarir */
.stat-box .si .ic,
.summary-big .sb-icon .ic,
.stat-pill .sp-ic .ic,
.convo-card .cc-ic .ic,
.badge-item .bi-ic .ic,
.st-ic .ic,
.brand-logo svg {
  filter: drop-shadow(0 1px 0 var(--cam-ust));
}

/* Cam gradyani yuzey ISTER: bu cip saydamdi, altindan kart gorunuyordu */
.ch-say { background-color: var(--card2); }

/* MARKA LOGOSU — zemini renk degil GRADYAN (mavi->mor), kendi kuralinda
   duruyor. Ustundeki cam parlakligi KALDIRILDI: oteki ciplerden camı
   sokerken burada sarkiyordu ve logonun sol ustunu %62 beyazla ortup
   markayi soluklastiriyordu (olculdu: ust kose 254,254,253). */

/* Bant rozeti: RENK TASIYICI oldugu icin cam ONA ZAYIF uygulanir —
   guclu beyaz gecis rengi acar ve olculen kontrasti bozardi. */
.bant {
  box-shadow: inset 0 1px 0 var(--cam-ust), 0 1px 2px rgba(11,11,11,0.16);
}

/* Cam, saydamliga dayanir. Kullanici saydamligi azaltmayi sectiyse ya da
   yuksek kontrast modundaysa DUZ yuzeye don — okunurluk once gelir. */
@media (prefers-reduced-transparency: reduce) {
  .cam, .stat-box .si, .icon-btn, .summary-big .sb-icon, .brand-logo,
  .stat-pill .sp-ic, .rail-toggle, .convo-card .cc-ic, .badge-item .bi-ic, .st-ic, .ks-no, .bos-durum .bd-ic, .ch-say {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-image: none;
  }
  .ic { filter: none; }
}
@media (forced-colors: active) {
  .cam, .stat-box .si, .icon-btn, .summary-big .sb-icon, .brand-logo, .bant,
  .stat-pill .sp-ic, .rail-toggle, .convo-card .cc-ic, .badge-item .bi-ic, .st-ic, .ks-no, .bos-durum .bd-ic, .ch-say {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-image: none; box-shadow: none; border: 1px solid CanvasText;
  }
  .ic { filter: none !important; }
  .stat-box .si .ic, .summary-big .sb-icon .ic, .brand-logo svg { filter: none; }
}

/* TEKRAR EKRANI — zihin modeli sayilardan ONCE.
   Buyuk amber rakam "bugunun isi" gibi okunuyordu; tur bitince bitmedigi
   icin kullanici "77 idi, 65 oldu, ne demek" diye sordu. Sayi dogruydu,
   anlatimi yoktu. */
.tekrar-yapi {
  background: var(--tint-blue);
  border: 1px solid var(--line);
  border-left: var(--kenar-vurgu) solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base); color: var(--text);
  line-height: var(--lh-rahat);
}
.tekrar-yapi b { font-weight: 800; }

/* Iki AI dugmesi TEK SATIRDA; eylem satiri kurali geregi ayni yukseklik. */
.fbn-ai-satir {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: stretch;          /* iki dugme AYNI hizada bassin */
  margin-top: var(--sp-3);
}
/* Dugmelerin KENDI ust bosluklari satiri bozuyordu: biri asagida
   kaliyordu (kullanici bildirdi: "hizala su butonlari"). */
.fbn-ai-satir > * { min-height: var(--ctrl-h); margin-top: 0; margin-bottom: 0; }
.fbn-ai-satir:empty { display: none; }
/* Telaffuz araci dogru cumleye YAPISIK dursun — ayri bir oge gibi
   gorunmesin. */
.fb-solution + .tlf-alan { margin-top: var(--sp-2); }

/* Panel satiri: etiket sabit, deger sagda; ikisi ASLA ust uste binmez.
   Deger uzunsa satir alta sarar, etiketin uzerine tasmaz. */
.sd-blok .sm-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
}
.sd-blok .sm-k { min-width: 0; }
.sd-blok .sm-v { flex: 1 1 auto; white-space: normal; }
/* Satirin altindaki aciklama — degerin ICINE sikistirilmaz */
.sm-alt {
  margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--muted);
  line-height: var(--lh-normal);
}

/* =====================================================================
   GENIS EKRANDA COMERT BOSLUK
   Icerik genisledikce nefes alani da genisler. Degerler olcek
   adimlarindan secilir; ara deger yok. Kirilimlar yaygin ekran
   siniflarina denk gelir: 1440 dizustu/iMac, 1920 masaustu.
   ===================================================================== */
@media (min-width: 1440px) {
  :root {
    --card-pad:   var(--sp-8);
    --view-pad-x: var(--sp-10);
    --view-pad-y: var(--sp-8);
  }
}
@media (min-width: 1920px) {
  :root {
    --card-pad:   var(--sp-10);
    --view-pad-x: calc(var(--sp-10) + var(--sp-4));
    --view-pad-y: var(--sp-10);
  }
}

/* =====================================================================
   DOKUNMATIK CIHAZ — genislikten BAGIMSIZ.
   Dokunma hedefi kurallari 940px kirilimindaydi; 1024x768 tablet yatay
   o esigin USTUNDE kaldigi icin masaustu olculeriyle cizilıyordu.
   Cihaz taramasi gosterdi: 1024'te .icon-btn 32px, .btn 34px, tablo
   girdileri 32px — parmakla 40px altina inen her sey isabetsiz.
   Olcut ekran genisligi degil ISARETCI TIPI olmali: pointer:coarse
   parmak/kalem demektir, fare degil.
   ===================================================================== */
@media (pointer: coarse) {
  .btn-sm, .dd-btn, .schip, .icon-btn { min-height: 40px; }
  /* ÖZGÜLLÜK — `.btn-row > .btn-sm` (0,2,0) tek sınıflı kuralı EZİYORDU:
     düğmeler dokunmatik ekranda 34px'te kalıyordu (ölçüldü, 1024px tablet).
     Aynı bağlam listesi burada da yazılır ki iki kural aynı ağırlıkta
     olsun ve sonda gelen bu blok kazansın. */
  .btn-row > .btn-sm, .ex-actions > .btn-sm, .modal-actions > .btn-sm,
  .filters > .btn-sm, .fb-duzelt-satir > .btn-sm,
  .btn-row > .schip, .filters > .schip { min-height: 40px; }
  .icon-btn { width: 40px; }
  table.words td, table.words th { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .bar-row { min-height: 40px; }
  input[type=text], input[type=password], input[type=email], select { min-height: 40px; }
  /* Satir ici baglarin gorunumu degismez; vurus alani genisler
     (CLAUDE.md: .linkish yukseklik veremez, gorunmez ::after serilir). */
  .linkish::after { height: 44px; }
}