/* =====================================================================
   NevaTeach — TASARIM DILI: gece laciverti · bakir · kum
   Kaynak: design_handoff_nevateach_web (17 ekran) + TASARIM_DILI.md.

   TOKEN ADLARI DEGISMEDI. 6900 satirlik bicem dosyasi ve dort telefon
   katmani bu adlara bagli; yalnizca DEGERLER yeni dile gecirildi. Boylece
   17 ekran tek hamlede yeni dile oturur, sonra ekran ekran ince ayar
   yapilir.

   Handoff ile projenin OLCULU kurallari carpistiginda hue korunur,
   parlaklik ayarlanir. Uc yerde bu oldu, ucu de asagida yazili:
     1) 9,5-10,5px yazi -> 11px (olcek tabani; telefonda okunmuyordu)
     2) #E3DACB kenar    -> #8E8579 (kontrol kenari WCAG 3:1; olculdu 1,36)
     3) gradyan          -> duz orta ton (kullanici karari: gradyan yok)
   ===================================================================== */

/* Yerel font (cevrimdisi calisir): TEK aile — Geist. CDN'e baglanma.
   Manrope KALDIRILDI (handoff karari). Ikinci bir aile EKLEME. */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2-variations');
  font-weight: 300 600;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   TASARIM OLCEGI — tum olculer bu degiskenlerden gelir.
   Yeni stil yazarken ASLA serbest px kullanma.
   ===================================================================== */
:root {
  /* bosluk (4px tabanli) */
  --sp-1: 4px;   --sp-2: 8px;    --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;

  /* YAZI BOYUTU — handoff olcegi (Geist).
     Handoff'ta 9,5 / 10 / 10,5px basamaklari da var; hepsi 11px'e
     yukseltildi. Sebep olculu: telefon taramasi 11px altini "okunmayan"
     olarak bildiriyor ve bu bir kez duzeltilmisti (CLAUDE.md, "11px
     ALTI YAZI YOK"). Buyuk harf + .14em bosluk hiyerarsiyi zaten
     tasiyor, punto dusurmeye gerek yok. */
  --fs-xs: 11px;    /* kas (uppercase, .14em), micro rozet */
  --fs-sm: 12.5px;  /* ikincil metin, etiket */
  --fs-base: 13.5px;/* GOVDE STANDARDI — okunan/yazilan her metin */
  --fs-kontrol: 14px;/* dugme, sekme, kontrol etiketi */
  --fs-md: 15px;    /* vurgulu govde, buyuk deger */
  --fs-lg: 17px;    /* kart basligi (h2) */
  --fs-xl: 23px;    /* sayfa basligi (h1) tabani */
  --fs-2xl: 29px;   /* h1 tavani */
  --fs-3xl: 34px;
  /* GOSTERI BASAMAGI — ekranin sebebi olan TEK sayi icin. */
  --fs-4xl: 44px;

  /* kose yaricapi — handoff: 16 kart, 11 kontrol, 8 kucuk, 6 hap */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 11px;  --r-lg: 16px;  --r-xl: 20px;
  --r-full: 999px;

  /* bilesen olculeri */
  --ctrl-h-sm: 34px;       /* ust serit hapi, arac cubugu dugmesi */
  --ctrl-h: 44px;          /* buton, select, input yuksekligi */
  --ctrl-h-lg: 52px;       /* ekranin TEK ana eylemi / ana girdi */
  --sidebar-w: 246px;
  --rail-w: 76px;
  --read-w: 68ch;
  --icon-box: 40px;
  --kenar-vurgu: 2px;      /* handoff: inset 2px 0 0 — aktif isareti */

  /* icerik sutunu — handoff: max-width 1180, ortalanmis */
  --icerik-w: 1180px;

  /* HARF ARALIGI — handoff imzasi */
  --ls-kas:     .14em;     /* buyuk harf kas etiketi */
  --ls-baslik: -.015em;    /* h1 */
  --ls-h2:     -.008em;    /* h2 */
  --ls-govde:  -.005em;

  /* ---- BOSLUK GENISLIGE GORE OLCEKLENIR ---- */
  --card-pad:   var(--sp-5);
  --view-pad-x: var(--sp-8);
  --view-pad-y: var(--sp-6);

  /* ---- HAREKET ----
     Handoff kurali: gecis YALNIZCA renk. Olcek/transform efekti yok. */
  --mo-hizli: 150ms;
  --mo-orta:  220ms;
  --mo-yavas: 300ms;
  --mo-cikis: cubic-bezier(.22, 1, .36, 1);
  --mo-geri:  var(--mo-cikis);
}

:root {
  color-scheme: light;

  /* ---- YUZEYLER: kum sayfa, kagit kart ---- */
  --page:       #F5F1EA;
  --page-glass: rgba(245, 241, 234, 0.90);
  --card:       #FFFDF8;
  --card2:      #F5F1EA;
  --line:       #E3DACB;
  --line-zayif: #EDE6DA;
  --line-strong:#C4BCAF;
  /* KONTROL KENARI — handoff #E3DACB kart uzerinde 1,36:1 olculdu; WCAG
     arayuz ogesi siniri 3:1. Ayni kum ailesinde koyu adim: 3,57 / 3,04. */
  --btn-line:  #8E8579;
  --isaret-sessiz: #9A9080;  /* kart 3,09 - harf sayisi cizgileri */
  --tutamac: #C4BCAF;  /* handoff birebir - kart 1,85 */
  --chip-line: #8E8579;
  /* ikon cipi yuzeyi */
  --cip-yuzey: #F0EAE0;
  --ikon-sessiz: #8A857B;      /* kimliksiz, geri cekilen ikon (>=3:1) */
  --cizik:       #D6CDBE;      /* tamamlanan maddenin ustu cizgisi */
  --uyari-yuzey: #F8F2E8;
  --uyari-cizgi: #E7DCC8;
  --line-ic:     #E7E0D3;      /* kart ICINDEKI kutucuk kenari */
  --cip-kenar: #E3DACB;
  --marka-1:   #A3572E;
  --marka-2:   #A3572E;
  /* yan panel tepsi zemini */
  --panel-ust: #F7F1E7;
  --panel-alt: #F0EAE0;

  /* ---- KENAR MENU / KOYU VITRIN (handoff'un lacivert paneli) ----
     Acik temada da KOYU kalir: handoff'ta kenar menu, hero ve rozet
     vitrini lacivert. Koyu temada sayfayla ayni aileye duser. */
  --yan-bg:        #0F1C2B;
  --yan-bg2:       #16293C;
  --yan-aktif:     #21384F;
  --yan-metin:     #F1F5F9;
  --yan-metin-orta:rgba(233, 237, 242, 0.70);
  --yan-metin-zayif:rgba(233, 237, 242, 0.55);
  --yan-vurgu:     #C98A5B;
  --yan-kanal:     rgba(233, 237, 242, 0.13);
  --yan-ok:        #7FB394;
  --yan-vurgu-2:   #DBA277;
  /* Lacivert yuzeyde murekkep merdiveni (handoff Bugun ekrani). Bes
     basamak: govde .60 · ikincil .55 (--yan-metin-zayif) · ucuncul .50 ·
     kas .42 · silik .35. Tek bir "zayif" tonla hiyerarsi duzlesiyordu. */
  --yan-ink-govde:  rgba(233, 237, 242, 0.60);
  --yan-ink-uc:     rgba(233, 237, 242, 0.50);
  --yan-ink-kas:    rgba(233, 237, 242, 0.42);
  --yan-ink-silik:  rgba(233, 237, 242, 0.35);
  --yan-cizgi:     rgba(201, 138, 91, 0.28);
  /* OGRENCI KIMLIK RENKLERI — ortak takvimde ayni gunde birden fazla
     ogrenci olabiliyor. Renk KIMLIK tasir, odeme durumu DEGIL (o ✓
     ile gosterilir); tek kanalda iki anlam tasinmaz. On renk esit
     parlaklik bandinda, hue'lar en az 30 derece arayla — ortam
     paletiyle ayni yontem. Renk tek basina birakilmaz: cipte ad da
     yazili, ustunde lejant var. */
  --og-r0: #8B4223;
  --og-r1: #23688B;
  --og-r2: #53238B;
  --og-r3: #238B4E;
  --og-r4: #8B6C23;
  --og-r5: #8B2365;
  --og-r6: #238B87;
  --og-r7: #4C8B23;
  --og-r8: #23238B;
  --og-r9: #8B2334;


  /* ---- MUREKKEP ---- */
  --text:     #17222E;
  --ink-ters: #FFF7EF;
  --muted:    #4E5560;   /* kart 7,40 */
  --faint:    #6C6E72;   /* handoff govde ikincil · kart 5,02 · kum 4,54 */
  /* OKUNUS KENDI RENGINDE (kullanici karari, 26 Agu 2026): "kelimelerin
     okunusunu da farkli renkte yap... okunuslarla anlamlar ayni satirda
     olmasin, cok karisiyor". Once ikisi de `--muted`ti ve ayrimi yalnizca
     punto/kalinlik tasiyordu.
     Renk BAKIR ailesinden: ilerleme dili (yeni mavi · yolda amber ·
     ogrenildi yesil) ile CAKISMAZ ve odak kartinda okunus ZATEN bakir
     (`--yan-vurgu-2`) — yeni bir dil acilmiyor, var olan genisletiliyor.
     Olculdu: kart 5,22:1 · kum 4,91:1 (esik 4,5). */
  --okunus:   #A3572E;

  /* ---- MARKA / DURUM: bakir ---- */
  --accent:        #A3572E;   /* kart 5,22 */
  --accent-strong: #8A4826;   /* kart 6,81 */
  --accent-parlak: #B96437;   /* uzerine gelince */

  /* ---- MOBIL OLCEK (design mobil/PLAN.md §1) ----
     Webden BILEREK farkli, gerekcesi planda yazili: girdi ve birincil
     dugme 56px (basparmak hedefi), S bandinda 52. Tema bagimsiz
     olculer, tek blokta. */
  --m-ctrl-h:   56px;   /* girdi + birincil dugme */
  --m-ctrl-h-s: 52px;   /* S bandi */
  --m-r:        14px;   /* eski tur — kalan yerler */
  --m-r-kap:    16px;   /* ikinci tur: gruplu kap, dugme, girdi kosesi */
  --m-satir:    60px;   /* gruplu kaptaki alan satiri */
  --m-pad:      20px;   /* kagit panel kenar dolgusu */
  --m-baslik:   26px;   /* koyu bolgedeki mod basligi */
  --m-halka:    58px;   /* Bugun halkasinin ortasindaki sayi */
  --m-kutu-w:  132px;   /* eylem rayi kutusu */
  --m-kutu-h:  112px;
  --accent-soft:   rgba(163, 87, 46, 0.10);
  --accent-ring:   rgba(163, 87, 46, 0.28);
  --ok:        #3F6B52;
  --ok-strong: #2F5340;
  --ok-acik:     #6E9B80;   /* sifre gucu cubugu — --ok'un acik adimi */
  --girdi-ipucu: #B8B2A8;   /* placeholder: kum zeminde silik adim */
  --ok-soft:   rgba(63, 107, 82, 0.12);
  --warn:      #B08442;
  --warn-soft: rgba(176, 132, 66, 0.16);
  --isaret-bg: rgba(176, 132, 66, 0.38);
  --warn-ink:  #826237;   /* tint zeminde 4,68 (once 4,17) */
  --bad:        #9A3131;
  --bad-line:   rgba(154, 49, 49, 0.30);
  --bad-strong: #7E2626;
  --bad-soft:   rgba(154, 49, 49, 0.10);
  --violet:      #5B4B7A;
  --violet-soft: rgba(91, 75, 122, 0.12);

  /* ---- METAL — rozet kademesi. Handoff bunlari GRADYANLA veriyor;
     gradyan kullanici karariyla yasak, orta ton duz alindi. ---- */
  --metal-bronz: #B87A50;
  --metal-gumus: #A7AEB5;
  --metal-altin: #C9A45C;
  --metal-bronz-yz: #8A5734;
  --metal-gumus-yz: #5F6870;
  --metal-altin-yz: #7D6210;

  /* Kilitli rozet plakasi (handoff Rozetler) — hue korunur, parlaklik
     esige cekilir: handoff #8E8579 / #A39C93 / #C4BCAF hepsi 4,5 altinda. */
  --rz-kilit-bg:     #F7F1E7;
  --rz-kilit-line:   #EBE4D8;
  --rz-kilit-ic-bg:  #F0EAE0;
  --rz-kilit-ic-ink: #837B70;
  --rz-kilit-ad:     #655E54;
  --rz-kilit-kademe: #6F6A5F;
  --rz-kilit-not:    #6F6A5F;
  --rz-kilit-bar:    #E4DCCE;
  --rz-parilti:      6%;

  /* ---- ILERLEME DILI — uc anlam, uc renk, uc sembol. Kirmizi YOK. ---- */
  --ilerleme-yeni:  #3A5A7A;   /* kart 7,07 */
  --ilerleme-yolda: #8A6A3F;   /* kart 4,90 */
  --ilerleme-ogren: #3F6B52;   /* kart 6,01 */
  --zebra: rgba(23, 34, 46, 0.028);

  /* ---- CAM YUZEY (ikon kapsayicilari) ---- */
  --cam-parlak: rgba(255, 255, 255, 0.55);
  --cam-sonme:  rgba(255, 255, 255, 0.04);
  --cam-kenar:  rgba(233, 225, 212, 0.90);
  --cam-ust:    rgba(255, 255, 255, 0.70);
  --cam-alt:    rgba(15, 28, 43, 0.05);
  --cam-golge:  0 1px 2px rgba(15, 28, 43, 0.05);
  --ikon-kabartma: rgba(255, 255, 255, 0.70);

  /* ---- GOLGE: handoff'un iki katmanli imzasi ---- */
  --shadow-1:    0 1px 2px rgba(15, 28, 43, 0.05);
  --shadow-card: 0 1px 2px rgba(15, 28, 43, 0.03), 0 10px 30px -24px rgba(15, 28, 43, 0.40);
  --shadow-pop:  0 1px 2px rgba(15, 28, 43, 0.05), 0 24px 60px -28px rgba(15, 28, 43, 0.55);
  --kenar-isik:  inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --odak: 0 0 0 3px var(--accent-ring);

  /* ---- YAZI AILESI — TEK KAYNAK ---- */
  --font-ui: 'Geist', 'Helvetica Neue', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-okuma: var(--font-ui);

  --lh-sik:    1.2;
  --lh-normal: 1.5;
  --lh-rahat:  1.6;

  /* ---- ISI HARITASI: tek hue (bakir), aciktan koyuya ---- */
  --heat0: #EDE6DA;
  --heat1: #E0C4AC;
  --heat2: #CE9B71;
  --heat3: #B57344;
  --heat4: #8A4826;

  /* ---- ISTATISTIK CUBUKLARI (handoff `Istatistik.dc.html`) ----
     Ekranin kendi dili: `--ok/--warn/--bad` uc, burada yumusak.
     Zayif KIRMIZI DEGIL kiremit — bu ekranda "zayif" bir hata degil,
     "oraya yuklen" demek (ilerleme dilinde kirmizi yalnizca gercek
     yanlis cevaba ayrilmis). Murekkep AYRI token: `--ist-zayif` metin
     olarak `--card` uzerinde 3,9:1 olculdu, esik 4,5. ---- */
  --ist-ray:       #EDE6DA;
  --ist-iyi:       #6E9B80;
  --ist-orta:      #C99A6B;
  --ist-zayif:     #B3705A;
  --ist-zayif-ink: #97533D;

  /* ---- SOZCUK TURU ROZETLERI: yumusak zemin + renkli murekkep
     (handoff deseni; hepsi >= 5,5:1). ---- */
  /* SOZCUK TURU AILELERI PROTOTIPE GORE: fiil MAVI, isim YESIL,
     sifat KUM. Onceki eslemede fiil bakir, isim mavi, sifat yesildi —
     ayni kelime kartinda prototiple hicbir tur ayni renkte degildi.
     `--pos-adj-ink` handoff'ta #8A6A3F; kum zemininde 4,18:1 olculdu
     (esik 4,5) — hue korunup bir adim koyulastirildi. */
  --pos-n-bg:   #E6EFE9;  --pos-n-ink:   #3F6B52;
  --pos-v-bg:   #E8EDF2;  --pos-v-ink:   #3A5A7A;
  --pos-adj-bg: #F1E9DE;  --pos-adj-ink: #846439;
  --pos-adv-bg: #F1E9DE;  --pos-adv-ink: #725732;
  --pos-prep-bg:#EDE7F2;  --pos-prep-ink:#4C3E68;
  --pos-phr-bg: #EDE7F2;  --pos-phr-ink: #5B4B7A;
  --pos-pron-bg:#F4E4E9;  --pos-pron-ink:#7A3A50;
  --pos-int-bg: #E2EEEF;  --pos-int-ink: #245A61;
  --pos-x-bg:   #EAE9E6;  --pos-x-ink:   #43474E;

  /* ikon kutusu zeminleri */
  --tint-blue:    rgba(58, 90, 122, 0.10);
  --tint-violet:  rgba(91, 75, 122, 0.10);
  --tint-neutral: rgba(78, 85, 96, 0.09);
}

/* =====================================================================
   KOYU TEMA — handoff'un KENDI lacivert paneli sayfanin tamamina yayilir.
   Yeni renk uydurulmadi: #0F1C2B / #16293C / #21384F / #C98A5B / #E9EDF2
   dordu de handoff'un kenar menusunden ve hero'sundan geliyor.
   ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:       #0B1622;
  --page-glass: rgba(11, 22, 34, 0.88);
  --card:       #16293C;
  --card2:      #21384F;
  --line:       #24384E;
  --line-zayif: #1E3247;
  --line-strong:#3B5872;
  --btn-line:  #6B87A3;   /* kart 3,97 */
  --isaret-sessiz: #77726A;  /* kart 3,11 */
  --tutamac: #3E5470;  /* kart 1,91 - acik temadaki agirligin esi */
  --chip-line: #6B87A3;
  --cip-yuzey: #21384F;
  --ikon-sessiz: #8A93A0;
  --cizik:       #3B5872;
  --uyari-yuzey: color-mix(in srgb, var(--warn) 8%, var(--card));
  --uyari-cizgi: color-mix(in srgb, var(--warn) 28%, var(--line));
  --line-ic:     #2A4361;
  --cip-kenar: #33506C;
  --marka-1:   #C98A5B;
  --marka-2:   #C98A5B;
  --panel-ust: #1B3048;
  --panel-alt: #16293C;

  --yan-bg:        #0F1C2B;
  --yan-bg2:       #16293C;
  --yan-aktif:     #21384F;
  --yan-metin:     #F1F5F9;
  --yan-metin-orta:rgba(233, 237, 242, 0.70);
  --yan-metin-zayif:rgba(233, 237, 242, 0.55);
  --yan-vurgu:     #C98A5B;
  --yan-kanal:     rgba(233, 237, 242, 0.13);
  --yan-ok:        #7FB394;
  --yan-vurgu-2:   #DBA277;
  /* Lacivert yuzeyde murekkep merdiveni (handoff Bugun ekrani). Bes
     basamak: govde .60 · ikincil .55 (--yan-metin-zayif) · ucuncul .50 ·
     kas .42 · silik .35. Tek bir "zayif" tonla hiyerarsi duzlesiyordu. */
  --yan-ink-govde:  rgba(233, 237, 242, 0.60);
  --yan-ink-uc:     rgba(233, 237, 242, 0.50);
  --yan-ink-kas:    rgba(233, 237, 242, 0.42);
  --yan-ink-silik:  rgba(233, 237, 242, 0.35);
  --yan-cizgi:     rgba(201, 138, 91, 0.28);
  --og-r0: #DDA288;
  --og-r1: #88C1DD;
  --og-r2: #B088DD;
  --og-r3: #88DDAB;
  --og-r4: #DDC388;
  --og-r5: #DD88BE;
  --og-r6: #88DDDA;
  --og-r7: #AADD88;
  --og-r8: #8888DD;
  --og-r9: #DD8896;


  --text:     #E9EDF2;
  --ink-ters: #0F1C2B;
  --muted:    #A7AEB5;   /* kart 6,61 */
  --faint:    #9CA6B2;   /* tint uzerinde 4,67 */
  --okunus:   #DBA277;   /* kart 6,67 · lacivert yuzey (#21384F) 5,42.
                            `--accent` (#C98A5B) o yuzeyde 4,17 kaliyordu
                            ve WCAG metin esigi 4,5 — Istatistik'te kelime
                            kartlari lacivert panelin icinde duruyor.
                            Deger uydurulmadi: `--yan-vurgu-2` zaten bu. */

  --accent:        #C98A5B;   /* kart 5,13 */
  --accent-strong: #DBA277;
  --accent-parlak: #DBA277;
  --accent-soft:   rgba(201, 138, 91, 0.14);
  --accent-ring:   rgba(201, 138, 91, 0.40);
  --ok:        #7FB093;
  --ok-strong: #A0C9B0;
  --ok-acik:     #7FB093;
  --girdi-ipucu: #6B7A88;
  --ok-soft:   rgba(127, 176, 147, 0.15);
  --warn:      #D9A85E;
  --warn-soft: rgba(217, 168, 94, 0.16);
  --isaret-bg: rgba(217, 168, 94, 0.34);
  --warn-ink:  #DBA277;
  --bad:        #E08A8A;
  --bad-line:   rgba(224, 138, 138, 0.34);
  --bad-strong: #EFA5A5;
  --bad-soft:   rgba(224, 138, 138, 0.14);
  --violet:      #AD9FC8;
  --violet-soft: rgba(169, 155, 196, 0.15);

  --metal-bronz: #E0A878;
  --metal-gumus: #D2D8DD;
  --metal-altin: #EBD08A;
  --metal-bronz-yz: #E0A878;
  --metal-gumus-yz: #D2D8DD;
  --metal-altin-yz: #EBD08A;

  --rz-kilit-bg:     #132131;
  --rz-kilit-line:   #1E3549;
  --rz-kilit-ic-bg:  #1A2C3E;
  --rz-kilit-ic-ink: #6E8296;
  --rz-kilit-ad:     #9FAEBC;
  --rz-kilit-kademe: #7E8FA0;
  --rz-kilit-not:    #93A2B1;
  --rz-kilit-bar:    #22374B;
  --rz-parilti:      10%;

  --ilerleme-yeni:  #8FB0CE;
  --ilerleme-yolda: #DBA277;
  --ilerleme-ogren: #7FB093;
  --zebra: rgba(255, 255, 255, 0.030);

  --cam-parlak: rgba(255, 255, 255, 0.07);
  --cam-sonme:  rgba(255, 255, 255, 0.01);
  --cam-kenar:  rgba(255, 255, 255, 0.08);
  --cam-ust:    rgba(255, 255, 255, 0.10);
  --cam-alt:    rgba(0, 0, 0, 0.30);
  --cam-golge:  0 1px 2px rgba(0, 0, 0, 0.40);
  --ikon-kabartma: rgba(0, 0, 0, 0.45);

  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px -24px rgba(0, 0, 0, 0.90);
  --shadow-pop:  0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 60px -28px rgba(0, 0, 0, 0.95);
  --kenar-isik:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --heat0: #1E3247;
  --heat1: #4E4436;
  --heat2: #8A6A3F;
  --heat3: #C98A5B;
  --heat4: #E8BB92;

  --ist-ray:       #24384E;
  --ist-iyi:       #7FB093;
  --ist-orta:      #DBA277;
  --ist-zayif:     #D99A80;
  --ist-zayif-ink: #E8B49E;

  --pos-n-bg:   rgba(127, 176, 147, 0.16);  --pos-n-ink:   #9BCAAE;
  --pos-v-bg:   rgba(143, 176, 206, 0.16);  --pos-v-ink:   #A2C4E0;
  --pos-adj-bg: rgba(217, 168, 94, 0.16);   --pos-adj-ink: #E3BE81;
  --pos-adv-bg: rgba(217, 168, 94, 0.16);   --pos-adv-ink: #E3BE81;
  --pos-prep-bg:rgba(169, 155, 196, 0.16);  --pos-prep-ink:#C6BBDB;
  --pos-phr-bg: rgba(169, 155, 196, 0.16);  --pos-phr-ink: #C6BBDB;
  --pos-pron-bg:rgba(206, 137, 160, 0.16);  --pos-pron-ink:#ECB3C8;
  --pos-int-bg: rgba(122, 179, 186, 0.16);  --pos-int-ink: #9ACAD0;
  --pos-x-bg:   rgba(167, 174, 181, 0.16);  --pos-x-ink:   #BAC1C8;

  --tint-blue:    rgba(143, 176, 206, 0.13);
  --tint-violet:  rgba(169, 155, 196, 0.13);
  --tint-neutral: rgba(167, 174, 181, 0.11);
}

/* Sistem koyu temadaysa ve kullanici acikca "acik" secmediyse koyu degerler.
   BU BLOK URETILIR — elle duzenleme. Kaynak: :root[data-theme="dark"].
   Uretici: node scratchpad/token-gecir.js */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {

    color-scheme: dark;
    --page:       #0B1622;
    --page-glass: rgba(11, 22, 34, 0.88);
    --card:       #16293C;
    --card2:      #21384F;
    --line:       #24384E;
    --line-zayif: #1E3247;
    --line-strong:#3B5872;
    --btn-line:  #6B87A3;   /* kart 3,97 */
    --isaret-sessiz: #77726A;  /* kart 3,11 */
    --tutamac: #3E5470;  /* kart 1,91 - acik temadaki agirligin esi */
    --chip-line: #6B87A3;
    --cip-yuzey: #21384F;
  --ikon-sessiz: #8A93A0;
  --cizik:       #3B5872;
  --uyari-yuzey: color-mix(in srgb, var(--warn) 8%, var(--card));
  --uyari-cizgi: color-mix(in srgb, var(--warn) 28%, var(--line));
  --line-ic:     #2A4361;
    --cip-kenar: #33506C;
    --marka-1:   #C98A5B;
    --marka-2:   #C98A5B;
    --panel-ust: #1B3048;
    --panel-alt: #16293C;

    --yan-bg:        #0F1C2B;
    --yan-bg2:       #16293C;
    --yan-aktif:     #21384F;
    --yan-metin:     #F1F5F9;
    --yan-metin-orta:rgba(233, 237, 242, 0.70);
    --yan-metin-zayif:rgba(233, 237, 242, 0.55);
    --yan-vurgu:     #C98A5B;
    --yan-kanal:     rgba(233, 237, 242, 0.13);
    --yan-ok:        #7FB394;
    --yan-vurgu-2:   #DBA277;
  /* Lacivert yuzeyde murekkep merdiveni (handoff Bugun ekrani). Bes
     basamak: govde .60 · ikincil .55 (--yan-metin-zayif) · ucuncul .50 ·
     kas .42 · silik .35. Tek bir "zayif" tonla hiyerarsi duzlesiyordu. */
  --yan-ink-govde:  rgba(233, 237, 242, 0.60);
  --yan-ink-uc:     rgba(233, 237, 242, 0.50);
  --yan-ink-kas:    rgba(233, 237, 242, 0.42);
  --yan-ink-silik:  rgba(233, 237, 242, 0.35);
    --yan-cizgi:     rgba(201, 138, 91, 0.28);
  --og-r0: #DDA288;
  --og-r1: #88C1DD;
  --og-r2: #B088DD;
  --og-r3: #88DDAB;
  --og-r4: #DDC388;
  --og-r5: #DD88BE;
  --og-r6: #88DDDA;
  --og-r7: #AADD88;
  --og-r8: #8888DD;
  --og-r9: #DD8896;


    --text:     #E9EDF2;
    --ink-ters: #0F1C2B;
    --muted:    #A7AEB5;   /* kart 6,61 */
    --faint:    #9CA6B2;   /* tint uzerinde 4,67 */
    --okunus:   #DBA277;   /* kart 6,67 · lacivert yuzey (#21384F) 5,42.
                            `--accent` (#C98A5B) o yuzeyde 4,17 kaliyordu
                            ve WCAG metin esigi 4,5 — Istatistik'te kelime
                            kartlari lacivert panelin icinde duruyor.
                            Deger uydurulmadi: `--yan-vurgu-2` zaten bu. */

    --accent:        #C98A5B;   /* kart 5,13 */
    --accent-strong: #DBA277;
    --accent-parlak: #DBA277;
    --accent-soft:   rgba(201, 138, 91, 0.14);
    --accent-ring:   rgba(201, 138, 91, 0.40);
    --ok:        #7FB093;
    --ok-strong: #A0C9B0;
    --ok-acik:     #7FB093;
    --girdi-ipucu: #6B7A88;
    --ok-soft:   rgba(127, 176, 147, 0.15);
    --warn:      #D9A85E;
    --warn-soft: rgba(217, 168, 94, 0.16);
    --isaret-bg: rgba(217, 168, 94, 0.34);
    --warn-ink:  #DBA277;
    --bad:        #E08A8A;
    --bad-line:   rgba(224, 138, 138, 0.34);
    --bad-strong: #EFA5A5;
    --bad-soft:   rgba(224, 138, 138, 0.14);
    --violet:      #AD9FC8;
    --violet-soft: rgba(169, 155, 196, 0.15);

    --metal-bronz: #E0A878;
    --metal-gumus: #D2D8DD;
    --metal-altin: #EBD08A;
    --metal-bronz-yz: #E0A878;
    --metal-gumus-yz: #D2D8DD;
    --metal-altin-yz: #EBD08A;

    --rz-kilit-bg:     #132131;
    --rz-kilit-line:   #1E3549;
    --rz-kilit-ic-bg:  #1A2C3E;
    --rz-kilit-ic-ink: #6E8296;
    --rz-kilit-ad:     #9FAEBC;
    --rz-kilit-kademe: #7E8FA0;
    --rz-kilit-not:    #93A2B1;
    --rz-kilit-bar:    #22374B;
    --rz-parilti:      10%;

    --ilerleme-yeni:  #8FB0CE;
    --ilerleme-yolda: #DBA277;
    --ilerleme-ogren: #7FB093;
    --zebra: rgba(255, 255, 255, 0.030);

    --cam-parlak: rgba(255, 255, 255, 0.07);
    --cam-sonme:  rgba(255, 255, 255, 0.01);
    --cam-kenar:  rgba(255, 255, 255, 0.08);
    --cam-ust:    rgba(255, 255, 255, 0.10);
    --cam-alt:    rgba(0, 0, 0, 0.30);
    --cam-golge:  0 1px 2px rgba(0, 0, 0, 0.40);
    --ikon-kabartma: rgba(0, 0, 0, 0.45);

    --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px -24px rgba(0, 0, 0, 0.90);
    --shadow-pop:  0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 60px -28px rgba(0, 0, 0, 0.95);
    --kenar-isik:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --heat0: #1E3247;
    --heat1: #4E4436;
    --heat2: #8A6A3F;
    --heat3: #C98A5B;
    --heat4: #E8BB92;

    --ist-ray:       #24384E;
    --ist-iyi:       #7FB093;
    --ist-orta:      #DBA277;
    --ist-zayif:     #D99A80;
    --ist-zayif-ink: #E8B49E;

    --pos-n-bg:   rgba(143, 176, 206, 0.16);  --pos-n-ink:   #A2C4E0;
    --pos-v-bg:   rgba(201, 138, 91, 0.16);   --pos-v-ink:   #EFB68B;
    --pos-adj-bg: rgba(127, 176, 147, 0.16);  --pos-adj-ink: #9BCAAE;
    --pos-adv-bg: rgba(217, 168, 94, 0.16);   --pos-adv-ink: #E3BE81;
    --pos-prep-bg:rgba(169, 155, 196, 0.16);  --pos-prep-ink:#C6BBDB;
    --pos-phr-bg: rgba(169, 155, 196, 0.16);  --pos-phr-ink: #C6BBDB;
    --pos-pron-bg:rgba(206, 137, 160, 0.16);  --pos-pron-ink:#ECB3C8;
    --pos-int-bg: rgba(122, 179, 186, 0.16);  --pos-int-ink: #9ACAD0;
    --pos-x-bg:   rgba(167, 174, 181, 0.16);  --pos-x-ink:   #BAC1C8;

    --tint-blue:    rgba(143, 176, 206, 0.13);
    --tint-violet:  rgba(169, 155, 196, 0.13);
    --tint-neutral: rgba(167, 174, 181, 0.11);
  }
}

/* =====================================================================
   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; }
/* AGIRLIK TAVANI 600 — handoff yalnizca 300/400/500/600 kullaniyor.
   Tarayici <b>/<strong>/<th>/<h*> icin 700 (bazi motorlarda 900)
   veriyor; olculdu: tek ekranda 400'un uzerinde oge 700'de kaliyordu ve
   Geist'in 600'u zaten guclu. Tek yerden kisilir. */
b, strong, th, h1, h2, h3, h4, h5, h6, optgroup { font-weight: 600; }
::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). */
/* =====================================================================
   KENAR MENU — 246px, gece laciverti (#0F1C2B).
   Handoff'un kabugu: koyu menu + kum sayfa. Bu kontrast tek basina
   "burasi gezinme, surasi icerik" diyor; cerceveye gerek kalmiyor.
   Menu ACIK temada da koyudur — tasarim dilinin imzasi bu.
   ===================================================================== */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--sp-5) 14px var(--sp-4);
  background: var(--yan-bg);
  color: var(--yan-metin);
  border-right: none;
  white-space: nowrap;
}
/* KAYAN YALNIZCA SEKME LISTESI. Menunun tamamini kaydirmak marka
   blogunu ve cikis/tema dugmelerini de goturuyor; onlar sabit kalmali.
   `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;
}
.sidebar ::-webkit-scrollbar-thumb { background: var(--yan-aktif); border-color: var(--yan-bg); }

.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 6px; }
/* MARKA ISARETI KONTUR — dolu kutu degil. Handoff'ta isaret bakir bir
   cerceve icinde bakir bir cizgi ikonu; lacivert menude dolu bir blok
   agir duruyor, kontur menuyu hafif tutuyor. */
.brand-logo {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--yan-cizgi);
  color: var(--yan-vurgu);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}
.brand-logo svg { width: 18px; height: 18px; }
/* Ray dugmesi yer kapladigi icin metin blogu daralabilmeli — tasarsa kirpilir,
   marka adi ASLA iki satira kirilmaz */
.brand-text { min-width: 0; flex: 1; }
.brand-name {
  font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--ls-h2);
  line-height: 1.1; color: var(--yan-metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--fs-xs); color: var(--yan-metin-zayif); margin-top: 1px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs { display: flex; flex-direction: column; gap: 1px; }
.tab {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  height: var(--icon-box);
  padding: 0 11px;
  border: none; border-radius: var(--r-sm);
  background: transparent;
  color: var(--yan-metin-orta);
  font-weight: 400; font-size: var(--fs-kontrol);
  cursor: pointer;
  /* GECIS YALNIZCA RENK — handoff kurali. Olcek/kayma efekti yok. */
  transition: background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.tab > span:not(.badge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab .ic { color: currentColor; }
.tab:hover { background: var(--yan-bg2); color: var(--yan-metin); }
.tab.active {
  background: var(--yan-aktif);
  color: var(--yan-metin);
  font-weight: 500;
  /* AKTIF ISARETI IKI KATMANLI: yuzey + sol bakir cizgi. Renk tek
     basina birakilmaz kurali burada da gecerli. */
  box-shadow: inset var(--kenar-vurgu) 0 0 var(--yan-vurgu);
}
.tab.active .ic { color: var(--yan-vurgu); }
.tab .badge {
  margin-left: auto;
  min-width: 21px; height: 19px;
  display: grid; place-items: center;
  background: rgba(201, 138, 91, 0.18);
  /* TINT ZEMIN TUZAGI: bakirin %18 tinti zemini aciyor ve ayni ailenin
     taban tonu (#DBA277) esigin altina dusuyor — olculdu 4,24:1.
     Handoff'ta da bu deger var; bir adim acik murekkeple duzeltildi. */
  color: #E3AA7F;
  border-radius: var(--r-xs);
  padding: 0 6px;
  font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.theme-btn {
  width: 100%;
  height: var(--icon-box);
  display: flex; align-items: center; gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--yan-metin-orta);
  font-weight: 400; font-size: var(--fs-kontrol);
  cursor: pointer;
  text-align: left;
  transition: background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.theme-btn:hover { background: var(--yan-bg2); color: var(--yan-metin); border-color: transparent; }
.foot-note { font-size: var(--fs-xs); color: var(--faint); line-height: 1.5; padding: 0 var(--sp-1); }

/* Kenar menudeki kullanici blogu da lacivert zeminde yasar. */
.sidebar .who { border-color: var(--yan-cizgi); background: var(--yan-bg2); }
.sidebar .who-name { color: var(--yan-metin); }
.sidebar .who .linkish { color: var(--yan-metin-zayif); }
.sidebar .who .linkish:hover { color: var(--yan-vurgu-2); }
.sidebar .who-avatar { background: var(--yan-aktif); color: var(--yan-metin); box-shadow: none; }
.sidebar .rail-toggle {
  background: transparent; border-color: var(--yan-cizgi); color: var(--yan-metin-orta);
}
.sidebar .rail-toggle:hover { color: var(--yan-vurgu); border-color: var(--yan-vurgu); }
.sidebar .sync-state { color: var(--yan-metin-zayif); }

/* ---- 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. Tetik basligin HEMEN yaninda; haplar saga yaslanir. */
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(10px, 1.8vw, 20px);
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2.6vw, 32px);
  min-height: 68px;
  background: var(--page-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.page-head { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.page-head h1 {
  margin: 0;
  font-size: clamp(var(--fs-xl), 2.6vw, var(--fs-2xl));
  font-weight: 500; letter-spacing: var(--ls-baslik); line-height: 1.12;
}
.page-sub { font-size: 13px; line-height: normal; color: var(--faint); margin-top: 0; }

/* UST SERIT HAPI — kagit yuzey, hairline kenar, satir ici bakir ikon.
   Dolu daire ikon kutusu KALDIRILDI: dort hap yan yana dort renkli
   daire ediyordu ve basligin agirligini asiyordu. */
.top-stats { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; margin-left: auto; padding-bottom: 2px; scrollbar-width: none; }
.top-stats::-webkit-scrollbar { display: none; }
.stat-pill {
  --tile-bg: var(--tint-neutral);
  --tile-ink: var(--accent);
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  height: var(--ctrl-h-sm);
  padding: 0 11px;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-sm);
  box-shadow: none;
  transition: border-color var(--mo-hizli) var(--mo-cikis);
}
.stat-pill:hover { border-color: var(--line-strong); }
.stat-pill .sp-ic {
  width: auto; height: auto; border-radius: 0; flex-shrink: 0;
  background: transparent;
  color: var(--tile-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.stat-pill .sp-ic .ic { width: 15px; height: 15px; }
.stat-pill .sp-tx { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.stat-pill .sp-tx b { font-size: var(--fs-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-pill .sp-tx i {
  /* OLCEK DISINA CIKMA: en kucuk basamak --fs-xs (11px). */
  font-style: normal; font-size: var(--fs-xs); font-weight: 400;
  color: var(--faint); text-transform: none; letter-spacing: 0;
}
.stat-pill .sp-dim { color: var(--faint); font-weight: 400; font-size: var(--fs-sm); }

/* ICERIK SUTUNU — handoff: 1180px, ortalanmis.
   Kapsayici ortalidir; SAGDA tek tarafli bosluk birakmaz. 1440px'te
   sutun zaten 1130px, yani cap ancak 1500px ustunde devreye girer.

   SINIR DOLGUYLA VERILIR, cocuklara `max-width` ile DEGIL. Once
   `.view > * { max-width; margin-inline: auto }` yaziliydi ve calismiyordu:
   `.notice` gibi kendi `margin`ini yazan her kural otomatik kenari
   siliyor, o blok sola yasli kaliyordu — 1920px'te olculdu, bilgi
   paneli ile hero 210px kaymisti. Yatay dolgu = taban dolgu ile artan
   bosluğun yarisindan BUYUK olani. */
.view {
  --view-yan: clamp(14px, 2.6vw, 32px);
  padding: clamp(14px, 2.2vw, 24px)
           max(var(--view-yan), calc((100% - var(--icerik-w)) / 2))
           clamp(32px, 4vw, 48px);
}
/* Sayfa dibi de ayni sutunla hizalanir. */
.app-foot {
  padding-left: max(var(--view-pad-x), calc((100% - var(--icerik-w)) / 2));
  padding-right: max(var(--view-pad-x), calc((100% - var(--icerik-w)) / 2));
}

/* =====================================================================
   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).
     `--card2` artik SAYFA rengiyle ayni (#F5F1EA, handoff'un ic yuzeyi);
     ayrimi kagit veriyor. */
  background: var(--card);
  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: 600; 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. */
/* KART BASLIGI — handoff: satir ici BAKIR ikon + 17px/500 baslik.
   Once ikon dolu bir kare cipti (accent zemin, ters ikon). Handoff'un
   17 ekraninda kart basligi ikonu her yerde CIZGI ve bakir; dolu cip
   basligi bir arac cubugu gibi agirlastiriyordu. Cip dili kalkmadi —
   ikon cipleri (rozet madalyonu, senaryo, stat kutusu) yerinde;
   yalnizca KART BASLIGI satir ici oldu. */
.card h2 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--ls-h2);
  line-height: 1.25;
}
.card h2 > .ic {
  width: 17px; height: 17px; flex-shrink: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  box-sizing: content-box;
}
/* Sayac rozeti basligin parcasi ama sessiz kalmali */
.card h2 .u-count { font-weight: 400; color: var(--faint); font-size: var(--fs-sm); }

/* Tanim/aciklama metni. Handoff'ta kart aciklamasi duz metindir;
   sol kenar cizgisi KALKTI (yuzey zaten karti ayiriyor). */
.card h2 + .sub { padding-left: 0; border-left: 0; }
.card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.sub { color: var(--faint); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); line-height: 1.5; }
/* VURGU MUREKKEP RENGINDE. Paragrafin sessiz tonunu devralinca
   "sıradaki günlük derslerde öncelikli" gibi vurgular duz metinle
   ayni renkte kaliyordu — prototipte hepsi --text/600. */
.sub b, .sub strong { color: var(--text); font-weight: 600; }

/* 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: 600; 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: 600;
}

/* 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: 600;
  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: 600; 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: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.hero-level .hl-name { font-size: var(--fs-lg); font-weight: 600; 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: 600;
  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)
   ===================================================================== */

/* DUGME — handoff: h44, r11, 14px. Gecis YALNIZCA renk; tiklaninca
   kayma/buyume YOK (kullanici karari + handoff kurali). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 400; font-size: var(--fs-kontrol);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.btn:active:not(:disabled) { background: var(--card2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-ters);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-parlak); border-color: var(--accent-parlak); color: var(--ink-ters); }
.btn-primary:active:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-primary .ic { color: currentColor; }

/* SIRADAKI — birincil eylemin buyuk hali (tur ici). */
.btn-next {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-ters);
  font-weight: 600;
  height: var(--ctrl-h-lg);
  font-size: var(--fs-md);
}
.btn-next:hover:not(:disabled) { background: var(--accent-parlak); border-color: var(--accent-parlak); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--card2); color: var(--text); border-color: transparent; }
.btn-ghost:active:not(:disabled) { background: var(--card2); }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); box-shadow: none; }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-strong); }
.btn-sm { height: var(--ctrl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); box-shadow: none; }
.btn-sm:active:not(:disabled) { background: var(--card2); }
.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: 600;
  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: 600; 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: 600;
  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: 600; }

/* 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: border-color var(--mo-hizli) var(--mo-cikis);
}
.word-card:hover { border-color: var(--accent); }
.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: 600; letter-spacing: -0.2px; }
.word-card .wc-tr { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ==================== TELAFFUZ ====================
   OKUNUS KENDI RENGINDE (`--okunus`, bakir). Once okunus ile Turkce
   karsilik AYNI tonda (--muted) duruyordu ve ayrimi yalnizca kalinlik
   tasiyordu; kullanici bunu bildirdi: "okunuslarla anlamlar ayni satirda
   olmasin, cok karisiyor" (26 Agu 2026). Iki sey birden degisti — renk
   ayrildi ve ikisi ayni satira KONMUYOR.
   Eski gerekce (ilerleme dilindeki renklerle karisir) korunuyor: bakir o
   uc renkten hicbiri degil ve odak kartinda okunus ZATEN bakir.
   IPA ikincil ve NOTR kalir: o bir okuma yardimi degil, dogru gosterim —
   okunustan ayrilmasi gerekiyor ve ayrimi artik renk de tasiyor. */
.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: 600; letter-spacing: 0.3px;
  color: var(--okunus);
}
/* --faint DEGIL --muted: olculdu, --faint bu zeminde 3.53:1 kaliyor ve
   WCAG metin esigi 4.5:1. IPA NOTR kalir — okunus bakira gecince ikisi
   arasindaki ayrim zaten renkten geliyor. */
.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: 600;
}
.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: 600; 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: 600; 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: 600;
  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); }
}
/* ===================================================================
   ODAK KUNYESI — `mobil/Mobil - Odak Modu.dc.html`
   Burasi TABAN (masaustu) hali: duz, bantsiz, bugunku gorunumun aynisi.
   Telefondaki lacivert bant `telefon-alistirma.css`te.
   =================================================================== */
.od-kunye { display: block; }
/* Tur rozeti YALNIZCA TELEFONDA — masaustunde tur adi zaten tam yazili
   ve solunda cikis dugmesi var; ucuncu bir isaret satiri kalabaliklastirir. */
.od-rozet { display: none; }
.od-ad { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.od-kas { font-style: normal; }
.od-ayrac { font-style: normal; color: var(--faint); }
.od-say { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.od-say i { font-style: normal; }
.od-birim { font-weight: 400; color: var(--muted); }
/* Alt satir: cubuk esner, "N kelime kaldi" saga yaslanir. */
.od-alt {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.od-alt .progressbar { flex: 1 1 auto; min-width: 0; margin: 0; }
.od-kalan {
  flex: none; display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-sm); white-space: nowrap;
}
/* "Bu kelimede durumun" karti telefona ozgu: masaustunde ayni veriyi yan
   panel (`.ex-side`) zengin haliyle tasiyor, ikisi yan yana durursa ayni
   bilgi iki kez gorunur. */
.od-durum { display: none; }
.od-band:empty { display: none; }
.ex-alt { display: block; }
/* Kontrol sonrasi "Dinle": masaustunde ZATEN "Doğrusu:" satirinda bir
   hoparlor var ve orasi gorunur; telefonda gorunmuyor (bkz. dragdrop.js). */
/* Kontrolden sonra beliren iki ikincil — masaüstünde HİÇ çizilmez
   (orada aynı eylemler geri bildirim gövdesinde duruyor). */
.od-dinle, .od-bildir { display: none; }
/* "Doğrusu" cumlesinde calisilan kelime — okurken goz once ONA gitsin. */
.fb-hedef { color: var(--ok-strong); font-weight: 600; }
:root[data-theme="dark"] .fb-hedef { color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fb-hedef { color: var(--ok); }
}

.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: 600; 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: 600; 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: 600;
  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); }
/* YER TUTUCU — cevaba gecmis tasin havuzdaki bos yuvasi. Gorunmez ama
   YER KAPLAR (`visibility: hidden`, `display: none` DEGIL): havuzun
   yerlesimi tur boyunca hic degismesin diye. Tiklama da almaz. */
.chip.chip-yer { visibility: hidden; pointer-events: none; }

/* TELEFONA OZEL UST CUBUK OGELERI — varsayilan GIZLI, telefon blogunda
   acilir. GIZLEME `hidden` OZNITELIGIYLE YAPILMAZ: sinif kuralindaki
   `display` onu ezer (belgeli tuzak, ucuncu kez yasandi). */
.tb-marka, .tb-seri { display: none; }

/* =====================================================================
   TELEFON UST CUBUGU — TEK SATIR (mobil/Mobil - Bugun.dc.html)
   52px: marka glifi (30px kap, 26px glif) · seri pastili (44px) ·
   esnek bosluk · avatar (44px). Sayilar burada DEGIL, icerikteki dort
   sutunlu ozet kartinda.
   ===================================================================== */
@media (max-width: 940px) {
  .topbar {
    position: relative;   /* seri pastili mutlak konumla ortalanir */
    height: 52px; min-height: 52px;
    padding: 0 18px; gap: 10px; align-items: center;
  }
  .tb-marka {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; color: var(--accent);
  }
  /* SERI PASTILI CUBUGUN ORTASINDA.
     Once markanin hemen sagindaydi ve 44px yuksekligiyle 52px'lik
     cubuktan TASIYORDU. Artik 32px ve mutlak konumla ortalanir —
     marka solda, avatar sagda, seri tam ortada. Dokunma hedefi
     gorunmez `::after` ile 44px'e cikarilir (belgeli desen). */
  .tb-seri {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit; font-size: var(--fs-base); color: var(--muted);
    white-space: nowrap; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .tb-seri::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: -6px; bottom: -6px;
  }
  .tb-seri:hover { border-color: var(--accent); }

  .tb-seri svg { width: 15px; height: 15px; color: var(--accent); }
  .tb-seri b {
    font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  }
  /* SERI SIFIRKEN sessiz: alev ve sayi silik — pastil duruyor ama bir
     SEY iddia etmiyor. Ipucu metni durumu ayrica soyluyor.
     SECICILER `.tb-seri` KURALLARINDAN SONRA ve DAHA OZGUL: once
     `.tb-seri-bos svg` (0,1,1) yazilmisti ve blokta ondan SONRA gelen
     `.tb-seri svg` (0,1,1) esit ozgullukle onu eziyordu — sifir hali
     hic uygulanmiyordu (ekran goruntusuyle yakalandi). */
  .tb-seri.tb-seri-bos { color: var(--faint); }
  .tb-seri.tb-seri-bos svg { color: var(--faint); }
  .tb-seri.tb-seri-bos b { color: var(--faint); font-weight: 400; }
  .tb-marka[hidden], .tb-seri[hidden] { display: none; }
  .topbar .tb-avatar { margin-left: auto; }

  /* ---- ALT CUBUK: ACIK SEKMEDE YUKARI OK ----
     "Calis" zaten acikken tekrar dokunmak tur menusunu acar; isaret
     olmadan bu davranis kesfedilemez (taslarin tutamaci ile ayni
     gerekce). Chevron sette asagi bakiyor, 180 donduruluyor. */
  /* ETIKETIN YANINDA INCE CHEVRON — dolgu daire DEGIL.
     Dolu bakir daire ikonun ustune biniyor ve 10px'lik chevron o
     boyutta egik bir cizgi gibi okunuyordu; bozuk bir cikartma gibi
     duruyordu (kullanici bildirdi). Acilir listenin yerlesik dili
     yeterli: etiketin sagina bakan bir ok. */
  .nav-ok {
    display: inline-flex; align-items: center;
    margin-left: 3px; vertical-align: middle;
    color: var(--accent);
  }
  .nav-ok svg { width: 11px; height: 11px; transform: rotate(180deg); }
  .mobil-nav .nav-item { position: relative; }
  .mobil-nav .nav-item > i { display: inline-flex; align-items: center; }

  /* ================= TUR MENUSU (alt sayfa) ================= */
  .tm-kok { display: flex; flex-direction: column; gap: 14px; }
  .tm-bas { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .tm-bas b {
    font-size: 18px; font-weight: 500; letter-spacing: -.014em; color: var(--text);
  }
  .tm-bas span { font-size: var(--fs-sm); color: var(--faint); }
  .tm-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .tm-kutu {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 9px;
    min-height: 96px; padding: 12px 6px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-1);
    font-family: inherit; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .tm-kutu:hover { border-color: var(--accent); }
  /* GUNUN DERSI vurgulu: lacivert yuzey, bakir madalyon. Ekranin tek
     asil isi o. */
  .tm-kutu.ders {
    background: var(--yan-bg2); border-color: var(--yan-bg2);
    box-shadow: var(--shadow-card);
  }
  .tm-ic {
    position: relative; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--page); color: var(--accent);
  }
  .tm-ic svg { width: 20px; height: 20px; }
  .tm-kutu.ders .tm-ic { background: var(--yan-vurgu); color: var(--yan-bg); }
  .tm-ad {
    font-size: 11.5px; font-weight: 500; line-height: 1.25;
    text-align: center; color: var(--text);
  }
  .tm-kutu.ders .tm-ad { font-weight: 600; color: var(--yan-metin); }
  /* Yapildi isareti ve gunun gorevi noktasi — madalyonun sag altinda. */
  .tm-ok, .tm-nokta {
    position: absolute; right: -2px; bottom: -2px;
    display: grid; place-items: center;
    border-radius: 50%; border: 2px solid var(--card);
  }
  .tm-ok { width: 16px; height: 16px; background: var(--ok); color: var(--card); }
  .tm-ok svg { width: 9px; height: 9px; stroke-width: 3.4; }
  .tm-nokta { width: 12px; height: 12px; background: var(--yan-vurgu-2); }
  .tm-kutu.ders .tm-ok, .tm-kutu.ders .tm-nokta { border-color: var(--yan-bg); }

  .tm-ayrac { display: flex; align-items: center; gap: 11px; }
  .tm-ayrac span { flex: 1; height: 1px; background: var(--line-kart); }
  .tm-ayrac i {
    flex: none; font-style: normal;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
    text-transform: uppercase; color: var(--faint);
  }
  .tm-gorev {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 56px;
    background: var(--accent); border: 0; border-radius: var(--m-r-kap);
    font-family: inherit; font-size: var(--fs-md); font-weight: 600;
    color: var(--ink-ters); cursor: pointer; white-space: nowrap;
    transition: background var(--mo-orta) var(--mo-cikis);
  }
  .tm-gorev:hover { background: var(--accent-parlak); }
  .tm-gorev svg { width: 18px; height: 18px; }
  .tm-sure { font-weight: 400; opacity: .72; }
}





/* SES TESTI RAPORU — satirlar hizali okunsun diye tek aralikli, ama
   yazi ailesi DEGISMEZ (tek aile kurali); yalnizca `tabular-nums` ve
   satir kirilmasi. */
.ses-tani {
  margin: var(--sp-2) 0 0; padding: var(--sp-3);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  font-variant-numeric: tabular-nums;
}

/* TELEFONDA CEVAP ETIKETI GIZLI — kutu bosken zaten "Kelimeleri buraya
   birak" yaziyor, dolunca kurulan cumle kendini anlatiyor. 34px geri
   kazanilir ve kurulan cumlenin ilk satiri sabit eylem cubugunun
   (`.ex-actions`, `position: fixed`, 728'den asagisi) ustunde kalir.
   HAVUZ ETIKETI KALIR: "(surukle veya tikla)" taslarin dokunulabilir
   oldugunu soyleyen tek yazi — tutamac kontrastinin dusuk
   tutulabilmesinin gerekcesi de o (CLAUDE.md). */
@media (max-width: 940px) {
  .zone-wrap .zone-label.zl-cevap { display: none; }

}
.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: border-color var(--mo-hizli) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis);
}
.chip:hover { border-color: var(--accent); background: var(--card2); }
.chip:active { cursor: grabbing; background: var(--accent-soft); border-color: var(--accent); }
.chip.dragging { opacity: 0.35; }
/* TASINABILIR ISARETI — handoff'ta her tasin solunda. Tek basina bir
   tas suruklenebilir gorunmuyor; `cursor: grab` yalnizca fareyle ve
   ancak USTUNE GELINCE belli oluyor, telefonda hic yok.

   RENK PROTOTIPIN KENDI DEGERI (`#C4BCAF`, kartta 1,85) ve 3:1 arayuz
   esiginin ALTINDA — bilerek. Ilk surumde esige cikarilmisti; kullanici
   "cok belirgin olmus, daha silik bir sey olsun" dedi ve hakli:
   3:1 kurali bir kontrolu TANIMAYA yarayan ogeler icin. Burada kontrol
   tasin KENDISI (kendi cercevesi 3:1 tasiyor, `--chip-line`), seridin
   basligi da zaten "KELIMELER (SURUKLE VEYA TIKLA)" diyor — tutamac tek
   tasiyici degil, destek.
   Yazma turunun ipucu cizgileri BUNUN TERSI ve `--isaret-sessiz`de
   kalir: orada harf sayisinin tek tasiyicisi o cizgilerdir. */
.chip > .ic-grip {
  width: 13px; height: 13px; flex: none;
  color: var(--tutamac);
}
/* Kontrolden SONRA tas suruklenemez — isaret de cikmaz. Duran bir
   tutamac olmayan bir eylemi vaat eder. */
.chip-ok > .ic-grip, .chip-bad > .ic-grip,
.chip-duzelt > .ic-grip { display: none; }
.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: 600; 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: 600; 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: 600; 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: border-color var(--mo-hizli) var(--mo-cikis);
}
.stat-box:hover { border-color: var(--line-strong); }
.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: 600; 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: 600; 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); }
/* GIRDI — handoff: kum zemin (--page), hairline kenar, r11, 13.5px.
   Yukseklik dugmeyle AYNI (--ctrl-h): handoff'ta girdi 42 dugme 44'tu;
   ikisi ayni satirda durunca 2px kayiyor ve "tum kontroller ayni
   yukseklikte" olcusu dusuyor (bkz. scratchpad/hiza-olc.js). */
input[type=text], input[type=password], input[type=email], input[type=number], select {
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  min-width: 0;
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              box-shadow var(--mo-hizli) var(--mo-cikis);
}
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, select:hover {
  border-color: var(--line-strong);
}
/* OK ISARETI TARAYICIYA BIRAKILIR. Bir ara iki `linear-gradient` ile
   ucgen ciziliyordu; gradyan denetimi (scratchpad/gradyan-denetim.js)
   bunu hakli olarak "renklendirme gradyani" diye isaretledi ve handoff'un
   select'i zaten `appearance` degistirmiyor. Kullanicinin gordugu
   acilir listeler APP.Dropdown ile ciziliyor (kendi `.dd-arrow` SVG'si
   var); buradaki `select` yalnizca gizli deger tasiyicisi. */
select { 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: 600; }
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: 600; 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: 600; }
.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: 600; }
/* 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: 600; }
.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: 600; 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: 600; }

/* 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-ust { display: flex; flex-direction: column; gap: var(--sp-3); }
.ay-marka { display: flex; align-items: center; gap: var(--sp-3); }
.ay-marka .brand-logo { width: 36px; height: 36px; }
.ay-marka .brand-logo svg { width: 20px; height: 20px; }
.ay-marka span { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.3px; }

/* Slogan `--fs-3xl`; `--fs-4xl` hero sayacina ayrilmis (CLAUDE.md). */
.ay-slogan {
  font-size: var(--fs-3xl); font-weight: 600; line-height: 1.12;
  letter-spacing: -1px; margin: 0; color: var(--text);
}
.ay-alt {
  margin: 0; font-size: var(--fs-base); color: var(--muted);
  line-height: var(--lh-normal);
}

/* OZELLIKLER — duz madde listesi DEGIL, 2x2 kutu izgarasi.
   Onceki hali dort satirlik gri bir listeydi; ekranin ilk yuzunde
   hicbir sey one cikmiyordu. Kutu, ozelligi kendi yuzeyinde tutar. */
.ay-kutular {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ay-kutu {
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0; padding: var(--sp-4);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
/* Kimlik rengi CIPE duser, kutunun zeminine degil (CLAUDE.md). */
.ay-kutu.k-ai      { --kimlik: var(--violet); }
.ay-kutu.k-hikaye  { --kimlik: var(--accent); }
.ay-kutu.k-metin   { --kimlik: var(--ok); }
.ay-kutu.k-tekrar  { --kimlik: var(--warn); }
.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(--card2);
  background: color-mix(in srgb, var(--kimlik) 15%, var(--card));
  color: var(--kimlik);
  /* Tint zeminde saf kimlik rengi erir; metne dogru koyulastirilir. */
  color: color-mix(in srgb, var(--kimlik) 72%, var(--text));
}
.ay-ic .ic { width: 20px; height: 20px; }
/* `b` DEGIL, kendi sinifi: blok stili veren bir `b` kurali metin ici
   vurgulari da bloga cevirir — bu tuzak bu dosyada uc kez yasandi
   (`.sr-l > b`, `.auth-head > b`, `.ay-liste b`). */
.ay-ad {
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
  line-height: var(--lh-sik);
}
.ay-not {
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-normal);
}

/* OLCU SERIDI — somut buyukluk. Rakam vurgulu, etiket sessiz. */
.ay-olcu {
  display: flex; gap: var(--sp-8);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.ay-olcu > div { display: flex; flex-direction: column; gap: 0; }
.ay-olcu .ay-sayi {
  font-size: var(--fs-xl); font-weight: 600; color: var(--text);
  letter-spacing: -0.5px; line-height: 1.15;
}
.ay-olcu .ay-etiket { font-size: var(--fs-xs); color: var(--faint); }

/* Kart icindeki baslik — hangi ekranda oldugunu SOYLEYEN sey.
   Onceden yalnizca dugme metni soyluyordu ve `h1` hic yoktu. */
/* Durum blogu (Gonderildi): logo yuvasi onay rengini tasir — marka
   degil, sonuc bildiriyor. */
.auth-brand.durum .brand-logo { background: var(--ok); }
.auth-baslik {
  font-size: var(--fs-xl); font-weight: 600; 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:not(.durum) { 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: 600; 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: 600; 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: 600;
  cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis), box-shadow var(--mo-hizli) var(--mo-cikis);
}
.btn-google:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-google:active { background: var(--card2); }
.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: 600; 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: 600; text-transform: uppercase;
}
.who-name {
  flex: 1; min-width: 0;
  font-weight: 600; 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: 600; 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: 600; 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: 600; 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: 600; 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: 600; 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: 600; 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: 600;
}
.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: 600; 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: 600;
  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: 600; }
.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: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
  margin-bottom: var(--sp-5);
}
.gl-cumle {
  font-size: var(--fs-xl); line-height: 1.4;
  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: 600; 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 {
  /* SESSIZ HAL — dugmenin kendi rengi artik `--muted`; ikisi ayni tonda
     bulusunca "yapilacak is" ile "istersen bir daha" ayrimi kayboldu
     (scratchpad/tlf-dugme.js yakaladi: 7,4 = 7,4). Bir adim daha sessiz. */
  border-color: var(--line);
  color: var(--faint);
  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: 600;
  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: 600; 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: 600; text-decoration: none;
  border: 1px solid transparent;
}
.fix-links a:hover { border-color: var(--accent); }

.fix-label {
  font-size: var(--fs-xs); font-weight: 600; 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: 600; 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: 600;
  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: 600;
  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: 600;
  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: 600;
  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: 600;
  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: 600; 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: border-color var(--mo-hizli) var(--mo-cikis);
}
.convo-card:hover { 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: 600; 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: 600; font-size: var(--fs-sm);
}
:root[data-theme="dark"] .convo-card .cc-best { color: var(--ok); }
.convo-card .cc-title { font-weight: 600; 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: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent);
}
.convo-tr { font-size: var(--fs-lg); font-weight: 600; 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.
   ===================================================================== */
/* 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-emergency   { --ortam-renk: #8e2a1f; }
.sc-restaurant  { --ortam-renk: #8e441f; }
.sc-transport   { --ortam-renk: #8e651f; }
.sc-feelings    { --ortam-renk: #7d7a1c; }
.sc-rental      { --ortam-renk: #5d7d1c; }
.sc-leisure     { --ortam-renk: #3c7d1c; }
.sc-home        { --ortam-renk: #1f8e27; }
.sc-bank        { --ortam-renk: #1f8e48; }
.sc-phone       { --ortam-renk: #1f8e65; }
.sc-directions  { --ortam-renk: #1f8e83; }
.sc-airport     { --ortam-renk: #1f7c8e; }
.sc-smalltalk   { --ortam-renk: #1f5e8e; }
.sc-time        { --ortam-renk: #1f3d8e; }
.sc-work        { --ortam-renk: #231f8e; }
.sc-numbers     { --ortam-renk: #441f8e; }
.sc-hotel       { --ortam-renk: #651f8e; }
.sc-school      { --ortam-renk: #871f8e; }
.sc-family      { --ortam-renk: #8e1f74; }
.sc-shopping    { --ortam-renk: #8e1f53; }
.sc-health      { --ortam-renk: #8e1f32; }

:root[data-theme="dark"] .sc-emergency   { --ortam-renk: #df8f86; }
:root[data-theme="dark"] .sc-restaurant  { --ortam-renk: #dfa486; }
:root[data-theme="dark"] .sc-transport   { --ortam-renk: #dfbe86; }
:root[data-theme="dark"] .sc-feelings    { --ortam-renk: #dbd776; }
:root[data-theme="dark"] .sc-rental      { --ortam-renk: #b9db76; }
:root[data-theme="dark"] .sc-leisure     { --ortam-renk: #98db76; }
:root[data-theme="dark"] .sc-home        { --ortam-renk: #86df8c; }
:root[data-theme="dark"] .sc-bank        { --ortam-renk: #86dfa7; }
:root[data-theme="dark"] .sc-phone       { --ortam-renk: #86dfbe; }
:root[data-theme="dark"] .sc-directions  { --ortam-renk: #86dfd6; }
:root[data-theme="dark"] .sc-airport     { --ortam-renk: #86d0df; }
:root[data-theme="dark"] .sc-smalltalk   { --ortam-renk: #86b8df; }
:root[data-theme="dark"] .sc-time        { --ortam-renk: #869edf; }
:root[data-theme="dark"] .sc-work        { --ortam-renk: #8986df; }
:root[data-theme="dark"] .sc-numbers     { --ortam-renk: #a486df; }
:root[data-theme="dark"] .sc-hotel       { --ortam-renk: #be86df; }
:root[data-theme="dark"] .sc-school      { --ortam-renk: #d986df; }
:root[data-theme="dark"] .sc-family      { --ortam-renk: #df86ca; }
:root[data-theme="dark"] .sc-shopping    { --ortam-renk: #df86b0; }
:root[data-theme="dark"] .sc-health      { --ortam-renk: #df8695; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sc-smalltalk   { --ortam-renk: #8FB0CE; }
  :root:where(:not([data-theme="light"])) .sc-restaurant  { --ortam-renk: #E0A17C; }
  :root:where(:not([data-theme="light"])) .sc-hotel       { --ortam-renk: #A99BC4; }
  :root:where(:not([data-theme="light"])) .sc-airport     { --ortam-renk: #8FB0CE; }
  :root:where(:not([data-theme="light"])) .sc-transport   { --ortam-renk: #D9B463; }
  :root:where(:not([data-theme="light"])) .sc-shopping    { --ortam-renk: #D49BAC; }
  :root:where(:not([data-theme="light"])) .sc-home        { --ortam-renk: #7FB093; }
  :root:where(:not([data-theme="light"])) .sc-health      { --ortam-renk: #D49BAC; }
  :root:where(:not([data-theme="light"])) .sc-directions  { --ortam-renk: #79B4BB; }
  :root:where(:not([data-theme="light"])) .sc-time        { --ortam-renk: #A7AEB5; }
  :root:where(:not([data-theme="light"])) .sc-family      { --ortam-renk: #DBA277; }
  :root:where(:not([data-theme="light"])) .sc-feelings    { --ortam-renk: #BDB279; }
  :root:where(:not([data-theme="light"])) .sc-numbers     { --ortam-renk: #A99BC4; }
  :root:where(:not([data-theme="light"])) .sc-phone       { --ortam-renk: #79B4BB; }
  :root:where(:not([data-theme="light"])) .sc-emergency   { --ortam-renk: #E0A17C; }
  :root:where(:not([data-theme="light"])) .sc-work        { --ortam-renk: #8FB0CE; }
  :root:where(:not([data-theme="light"])) .sc-bank        { --ortam-renk: #D9B463; }
  :root:where(:not([data-theme="light"])) .sc-leisure     { --ortam-renk: #7FB093; }
  :root:where(:not([data-theme="light"])) .sc-school      { --ortam-renk: #A99BC4; }
  :root:where(:not([data-theme="light"])) .sc-rental      { --ortam-renk: #BDB279; }
}

/* 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. */
/* 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. */
.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: 600; letter-spacing: -0.5px; }
.quiz-word .qw-tr { color: var(--muted); font-size: var(--fs-base); }
/* CIKIS SOLDA, DEVAM SAGDA. Ikisi ayri satirdayken hem iki satir yer
   yiyor hem de "hangisi asil eylem" belli olmuyordu. `space-between`
   tek cocukla da dogru calisir: cevaptan once yalnizca "Sinavdan Cik"
   var ve solda kalir. */
.btn-row.irr-alt { justify-content: space-between; align-items: center; }

.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) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--card2); }
.quiz-opt .qo-lbl { display: block; font-size: var(--fs-xs); color: var(--faint); font-weight: 600; 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). */
  /* Ust cubugun TELEFON olcusu tek yerde (52px tek satir bloğu);
     burada dolgu/sarma yazmak onu eziyordu — bu blok daha sonra
     geliyor. Kaldirildi. */
  .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: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
}
.sv-kelime {
  font-size: var(--fs-2xl); font-weight: 600;
  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: 600; 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: 600; 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: 600; 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: 600; 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: 1.4;
  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: 600; 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: 600; 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: 600; 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: 600; 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 HAP olarak: "hangi is isteniyor" her karti acinca
   gorunsun. Handoff: 21px, r6, sicak notr zemin, 10,5px/600/.04em —
   punto 11'e cikarildi (11px alti yazi yok, olculmus duzeltme). */
.yz-kademe {
  margin-left: auto;
  display: inline-flex; align-items: center; height: 21px;
  padding: 0 var(--sp-2); border-radius: var(--r-xs);
  background: var(--tint-neutral); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: none;
}

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

   HIYERARSIYI ARTIK TIPOGRAFI TASIYOR, yuzey degil (handoff). Onceki hal
   ikisini de govde standardinda birakip Ingilizce cumleyi kendi kutusuna
   koyuyordu; prototipte kutu YOK, cumle 23px'e cikiyor ve Turkce 14px
   sessiz metin olarak ustunde duruyor. Kullanici iki ekran goruntusu
   yollayip "yazma bolumu verdigim tasarimdaki gibi DIKKAT CEKICI olsun"
   dedi. */
.yz-tr {
  font-size: 14px; line-height: var(--lh-normal);
  color: var(--faint); font-weight: 400;
  margin-bottom: 14px;
}
/* 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 — handoff birebir.

   `clamp(18px, 2.2vw, 23px)` / 500 / -.015em, KUTUSUZ. Uzun bir yol
   izledi: once `--fs-xl` (baslik puntosu) idi, kullanici uc kez
   "kucult" dedi ve govde standardina indirildi; hiyerarsiyi de yuzey
   (`--card2` + cerceve) tasiyordu. Sonra kullanici prototipin yazma
   kartini isaret etti — orada cumle BUYUK ve kutusuz, cunku bu kartin
   TEK okunacak seyi o. SPEC T11 de ayni basamagi tarif ediyor
   (`clamp(19px,2.3vw,25px)`); prototipin kendi degeri 18-23, o alindi.

   FLEX — her kelime kendi ogesi, `gap: 8px 10px`. Bosluk 36px yuksek ve
   satir kutusunu ITEMEZ; inline akista bu mumkun degildi (dolu tasin
   satiri buyutmesi belgeli bir tuzakti). `clozeHtml` bu yuzden bosluksuz
   birlestirir — aradaki metin dugumleri anonim flex ogesi olurdu. */
.yz-cumle {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
  font-size: clamp(18px, 2.2vw, 23px); font-weight: 500;
  letter-spacing: -0.015em; color: var(--text);
}
.yz-tok { white-space: nowrap; }

/* BOSLUK GENISLIGI SABIT — icerige gore buyuseydi harf sayisini ele
   verirdi ve kademe 2-3'te ipucu VERMEMEK asil kural. */
.yz-bos {
  display: inline-block; min-width: 130px; height: 36px;
  border-bottom: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 4px 4px 0 0;
}
/* KULLANICININ YAZDIGI KELIME — durum rengi METNE verilmez.
   Olculdu: --bad uzerine --bad-soft, tint zemin uzerinde 3,44:1 (acik) /
   4,08:1 (koyu) — ikisi de esigin altinda. Burada renklendirilen sey
   kullanicinin KENDI yazdigi kelime, yani ICERIK; durumu cerceve, zemin
   tinti ve hemen altindaki sonuc satiri (isaret + metin) tasiyor.

   YUKSEKLIK BOS TASLA AYNI (36px) — cevap yazilinca satir yukseklik
   degistirmesin. Inline akistaki `vertical-align` numaralari artik
   gerekmiyor; bu bir flex ogesi. */
.yz-bos-ok, .yz-bos-bad {
  display: inline-flex; align-items: center;
  min-width: 0; height: 36px; padding: 0 var(--sp-2);
  border-bottom-style: solid;
  border-radius: 4px;
  font-weight: 600; 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. Handoff: parcalar
   arasi 9px, ilk harf 17px/600 bakir, cizgiler 11x2px. */
.yz-ipucu {
  display: flex; flex-wrap: wrap; gap: 9px;
  align-items: flex-end;
  margin-top: 14px;
}
.yz-ip-parca { display: inline-flex; align-items: flex-end; gap: var(--sp-1); }
.yz-ip-parca b {
  font-size: 17px; font-weight: 600; color: var(--accent);
  line-height: 1;
}
/* CIZGILER SESSIZ. Prototip `#D6CDBE` kullaniyor (kartta 1,55:1) ve o
   bizim 3:1 arayuz esigimizin cok altinda; `--btn-line` ise (3,57) ters
   yone kaciyordu — cizgiler cumleden dikkat caliyordu, oysa bu kartta
   dikkat ceken tek sey cumle olmali. `--isaret-sessiz` esigi geciren EN
   ACIK ton: 3,09 acik / 3,11 koyu. (Koyu temanin eski degeri `--btn-line`
   zaten 2,65 ile esigin ALTINDAYDI.) */
.yz-ip-parca i {
  display: inline-block; width: 11px; height: 2px;
  background: var(--isaret-sessiz); margin-bottom: 3px;
}
/* Okunus PAYLASILAN `.telaffuz` / `.tel-oku` ile cizilir (yazma.js);
   burada yalnizca prototipin olcusu: 13px, sessiz — kartin en alt
   katmani, ustundeki ipucundan da asagida. */
.yz-kart .telaffuz { margin-top: 14px; }
.yz-kart .tel-oku {
  font-size: 13px; font-weight: 400; line-height: normal;
  letter-spacing: 0.02em; color: var(--okunus);
}

/* 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. */
/* YUKSEKLIK 56px — `--ctrl-h` (44) DEGIL, ve bu bilerek. "Butun
   kontroller ayni yukseklikte" kurali bir SATIRIN icindeki suruklenmeyi
   durdurmak icin var; bu girdi kendi satirinda tek basina ve uygulamadaki
   tek serbest metin alani — alistirmanin KENDISI o. Prototip 56/r12/16px
   veriyor. */
input.yz-input {
  width: 100%; height: 56px;
  padding: 0 var(--sp-4);
  font-size: 16px; font-family: var(--font-ui); font-weight: 400;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--page); 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: 600; 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: 600;
  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: 600;
}
.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: 600; 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: 600;
}
.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: 600;
}

/* "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: 600; 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: 600; font-size: var(--fs-md);
}
.yz-s-oku { color: var(--okunus); font-size: var(--fs-xs); font-weight: 600; }
.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: 600;
}
.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: 600; font-size: var(--fs-sm);
}
.yst-kelime i { color: var(--okunus); 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: 600; 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: 600; }
/* 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: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-3);
}
.hz-tr {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1.35;
  margin-bottom: var(--sp-5);
}
.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: 600;
  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: 600; 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: 600; 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: 600;
    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: 600;
  }

  /* "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: 600; 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); }

  /* PANEL KAGIT, `.tab` ISE LACIVERT ICIN YAZILMIS — ACIK TEMADA
     SATIRLAR OKUNMUYORDU.
     Kullanici bildirdi: "light modda yonetim butonuna tikladigimda
     icerikler gorunmuyor." Olculdu: `.nav-panel-liste .tab` mürekkebi
     `--yan-metin-orta` = rgba(233,237,242,.7) ve panelin zemini
     `--card`; acik temada kagit (#FFFDF8) uzerine bu ton **1,11:1**
     veriyor — pratikte gorunmez. Koyu temada `--card` lacivert oldugu
     icin ayni kural tesadufen dogru calisiyordu (6,92:1) ve kusur
     yalnizca acik temada goruluyordu.

     Kok sebep: `.tab` kurallari KENAR MENU icin yazildi ve orasi her
     temada gece laciverti; renkler `--yan-*` sozlugunden geliyor ve
     TEMADAN BAGIMSIZ. Panel ise sayfa yuzeyinde duruyor, yani sayfa
     murekkebini kullanmali. Belgeli "`--ink-ters` koyu temada koyudur"
     tuzaginin simetrigi: koyu yuzey murekkebini acik bir yuzeye
     yazmak.

     AKTIF SATIR DEGISMEZ: `.tab.active` dolu koyu zemin (`--yan-aktif`)
     tasiyor, yani orada acik murekkep DOGRU — ekran goruntusunde de
     yalnizca secili "Yonetim" okunuyordu. Hover da koyu zeminli. */
  .nav-panel-liste .tab:not(.active) { color: var(--muted); }
  .nav-panel-liste .tab:not(.active):hover { color: var(--yan-metin); }
  .nav-panel-bas { color: var(--faint); }

  /* 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%; }

  /* --- TELEFON KONTROL OLCEGI — UC BASAMAK, TEK DIL ---
     Envanter (12 ekran taranarak) ikincil dugmede UC ayri imza buldu:
     44/r11, 44/r8, 40/r8. Ust cubuk ile Bugün ve Odak ekranlari ise
     mobil olcegi kullaniyordu (46/r14, 52/r15) — yani telefonda iki
     ayri dil yan yana yasiyordu.

     Mobil olcek WEBDEN BILEREK FARKLI (`PLAN.md §1`): basparmak hedefi
     buyuk, kose yumusak. Masaustu 44/r11 sozlesmesi `tasarim-tersine`
     ile bagli ve DEGISMEZ; asagidakiler yalnizca telefon bloğunda.

       araç çubuğu   40 · r12   (.btn-sm · .dd-btn · .schip · .icon-btn)
       ikincil       46 · r14   (.btn)
       birincil      52 · r15   (.btn-primary · .btn-next)

     `.mb-*`, `.od-*` ve `.ex-actions` kendi degerlerini daha ozgul
     yaziyor; onlar zaten bu basamaklarda. */
  .btn-sm, .dd-btn, .schip {
    height: 40px; min-height: 40px; border-radius: 12px;
  }
  /* .ch-say listede YOKTU: olculdu, telefonda 30px kaliyordu. */
  .ch-say { width: 40px; height: 40px; border-radius: 12px; }
  .btn { height: 46px; min-height: 46px; border-radius: 14px; }
  .btn.btn-primary, .btn.btn-next {
    height: 52px; min-height: 52px; border-radius: 15px;
  }
  /* Eylem satirindaki kucuk dugme de IKINCIL basamaga cikar: masaustunde
     `--ctrl-h` (44) veriliyor ve telefonda satirdaki oteki dugmelerle
     (46) ayrisıyordu. */
  .act .btn-sm, .act-main .btn-sm {
    height: 46px; min-height: 46px; border-radius: 14px;
  }
  /* SATIR YUKSEKLIGI KURALI DA TELEFON BASAMAGINA CEKILIR.
     "Ayni satirdaki her kontrol ayni yukseklikte" kurali cocuklara
     `--ctrl-h` (44) veriyor; telefonda ikincil basamak 46 ve arac
     cubugu 40 — 44 ikisinin de arasinda kaliyor, envanterde ayri bir
     imza uretiyordu. Eylem satirlari 46, ARAC CUBUKLARI 40. */
  .act > *, .act-main > *, .act-more > *, .btn-row > *,
  .modal-actions > *, .fb-duzelt-satir > * { min-height: 46px; }
  /* ARAC CUBUGU DA 46: once 40 denendi ama satirin arama GIRDISI
     `--ctrl-h` (44) tasiyor ve satir 44'te kaliyordu — 44 ile 46 arasi
     bir "basamak" degil gurultu. Telefonda IKI basamak var: kontrol 46,
     birincil 52 (ikon-only cipler 40). Satirin tamami tek olcude. */
  .filters > *,
  .filters input[type="text"], .filters select,
  .filters .btn, .filters .dd-btn {
    height: 46px; min-height: 46px; border-radius: 14px;
  }
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }

  /* 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; }

  /* 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: 600;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: var(--sp-3);
}
/* ALISTIRMA SORUSU KENDI BASAMAGINDA — govde puntosu DEGIL, baslik da
   DEGIL. Olcut Tekrar turunun cumlesidir (`.ex-tr-prompt`, --fs-xl 23px):
   kullanici onu isaret edip "bu buyuklukte olacakti" dedi.
     29px -> "niye bu kadar buyuk"      (ilk sikayet)
     13,5 -> "cumle gorunmuyor bile"    (ikinci sikayet — benim asiri
             duzeltmem; Yazma turunun kloz karti icin verilmis karari
             okunan CUMLEYE de uygulamistim)
   Dordu de artik ayni basamakta ve Tekrar turuyla ayni. SPEC T11 bu
   basamagi `clamp(19px,2.3vw,25px)` diye tanimliyor; 23px o araligin
   icinde ve uygulamanin olceginde zaten var. */
.sy-tr {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1.35;
  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: 600;
}
.sy-satir b { font-size: var(--fs-md); font-weight: 600; 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: 600; 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); }
/* DOGRUDAN COCUK (>) — `b` iken BASLIK KURALI ICERIDEKI HER VURGUYA
   uyguluyordu: basari mesajindaki <b>1 saat</b> ve <b>bir kez</b> blok
   olup kendi satirlarina dusuyor, cumle parcalaniyordu:
     "...Baglanti" / "1 saat" / "gecerli ve" / "bir kez" / "kullanilabilir."
   Ayni hata `.sr-l > b`de bir kez yasanmis ve orada > ile duzeltilmisti
   (CLAUDE.md, AYARLAR bolumu). Burada tekrarlanmis.
   Metin ICINDEKI vurgu icin ayrica `.auth-head span b` yazildi. */
.auth-head > b { display: block; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.auth-head span b { font-weight: 600; color: var(--text); }
.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: 600; }
.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: 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: 600;
}

.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: 600; }
.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: 600; 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, .modal-card, .dd-panel {
  box-shadow: var(--shadow-card);
}
/* DUGMEDE GOLGE YOK — handoff'ta dugme duz bir yuzey; kimligi dolgu
   rengi ve kenar tasir. Once 2px'lik alt golge vardi ("kabartma" hissi)
   ve yeni dilde kabartma yok. --edge tokeni geriye donuk uyumluluk
   icin duruyor, kullanilmiyor. */
.btn:not(.btn-ghost):not(:disabled) { box-shadow: none; }
.btn-sm:not(.btn-ghost):not(:disabled) { box-shadow: none; }
/* Ust serit hapi da duz: dort hap yan yana dort golge ediyordu. */
.stat-pill { box-shadow: none; }

/* 3) GECISLER --mo-* degiskenlerine baglandi (sabit .15s yerine).
   Tek yerden ayarlanabilir ve prefers-reduced-motion hepsini birden keser. */
/* GECIS YALNIZCA RENK. `transform` listeden CIKTI: handoff on iki
   ekranda tiklama/buyume efektlerini kaldirdi ve kural "yalnizca renk
   gecisi". Liste burada oldugu icin tek tek kural duzeltmek yetmiyordu —
   bu satir hepsini geri getiriyordu. */
.btn, .stat-pill, .word-card, .convo-card, .es-kart, .tab, .nav-item, .icon-btn {
  transition: 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, .sb-title, .sy-tr { letter-spacing: var(--ls-baslik); }
h2 { letter-spacing: var(--ls-h2); }
/* Handoff imzasi: BUTUN sayilar tabular. Sayac degisirken sutun kaymaz. */
b, strong, .sv, .hero-big, .stat-box b { font-variant-numeric: tabular-nums; }
.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: 600;
}
.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: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
}
.sv-kutu > b {
  font-size: var(--fs-2xl); font-weight: 600; 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: 600;
  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: 600; 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 {
  /* AGIRLIK 400 — asil sayac 600. Agirlik tavani 600'e cekilince ikisi
     de 600'de bulusmustu ve "sessiz olan hangisi" ayrimi kayboldu
     (scratchpad/tur-sayac.js yakaladi). Sessizligin olcutu kontrast
     degil PUNTO ve AGIRLIK. */
  font-style: normal; font-weight: 400;
  font-size: var(--fs-sm); color: var(--faint);
  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; }
/* ANLAM SATIRI KENDI SINIFINDA. Once `.ex-kelime-metin span` yaziliydi ve
   kimlik satiri bu kabin ICINE tasindiginda (tek 80px kart) o kural
   sozcuk turu rozetini de yakaladi: rozetin kendi murekkebini (0,1,0)
   eziyor ve 12,5px/`--muted` yapiyordu — koyu temada kontrast 4,00'a
   dustu (`tasarim-tersine` yakaladi). Eleman adiyla yazilan seciciler
   sonradan gelen kardesleri de yakalar; sinifla yaz. */
.ex-kelime-metin > .ekm-tr { font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.ekm-ust { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
/* Seviye masaustunde duz metin (telefonda mavi hap) — eskiden kimlik
   satirindaki bir `<i>` idi, sinif degisti, gorunum degismedi. */
.ekm-lvl { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
/* 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: 600;
  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; }
/* MURKKEP `--muted`, `--faint` DEGIL. Serit kendi yuzeyinde
   (`.ex-kelime`, acik temada #EBEDEB) ve orada `--faint` 4,34:1
   olculdu — 4,5 esiginin altinda (`tasarim-tersine` yakaladi).
   Satir yine sessiz kalir: ayrimi PUNTO (11px) ve konum tasiyor. */
.ex-kelime-kimlik i {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal; font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap;
}
.ex-kelime-kimlik .ex-ayrac { font-style: normal; color: var(--muted); }
.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: 600; 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: 600; 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: 600; 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: 600; }

/* 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: 600;
  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: 600; 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: 600; 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: 600; }
/* 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: 600; 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: 600;
}
.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: 600;
}
: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: 600; 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: 600; }
.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: 600;
}
.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: 600; 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: 600; 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: 600; 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),
              background var(--mo-hizli) var(--mo-cikis);
}
.gr-satir:hover { border-color: var(--accent); background: var(--card); }
.gr-satir-ana { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; }
.gr-satir-ad { font-weight: 600; 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: 600; letter-spacing: .3px;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  background: var(--tint-neutral); color: var(--muted);
}
/* Tint zeminde ham --accent 4,08:1 olculdu (esik 4,5). Murekkep
   koyu varyanta cevrildi; hue ve kimlik degismedi. */
.gr-lvl-A1 { background: var(--tint-blue); color: var(--ilerleme-yeni); }
.gr-lvl-A2 { background: var(--tint-violet); color: var(--violet); }
.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: 600;
  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: 600; 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: 600;
  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: 600; 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: 600; 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: 600; }
.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,
.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,
.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, .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, .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: 600; }

/* 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; }
  /* DOKUNMA HEDEFI GENISLIKTE DE 40px. Kural yalnizca YUKSEKLIGE
     yaziliydi ve iki kontrol dar kaliyordu (olculdu): sutun suzgecindeki
     acilir liste 39px, hikaye arsivindeki silme dugmesi 34px. Yukseklik
     tek basina yetmiyor — parmak iki yonde de hedefe basiyor. */
  .dd-btn { min-width: 40px; }
  .st-del { width: 40px; min-width: 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; }
}

/* =====================================================================
   TELEFON — TEK UYGULAMA CUBUGU
   =====================================================================
   Kullanici telefondan acip "cok kalabalik ve cok kotu goruniyor, tipki
   mobil uygulama gibi olmali" dedi. Olculdu (390x844, dokuz ekran):

     marka seridi (.sidebar)     65px
     baslik + alt baslik + hap  139px
     -----------------------------------
     icerik 220px'de basliyor
     alt gezinme                 59px
     => ekranin %33'u KABUK, icerige 565px kaliyor

   Iki ayri bant, dokuz ekranin dokuzunda da ayni. Yerli uygulamalarda
   TEK cubuk vardir (~56px) ve icerik hemen baslar.

   | Ne | Neden |
   |---|---|
   | `.sidebar` telefonda GIZLI | Uygulamanin adi ana ekrandaki simgede ve sayfa dibindeki footer'da zaten var; her ekranin tepesinde tekrar etmek yer israfi |
   | Hesap/tema/cikis "Daha" panelinde | Yerlesik desen (profil More sekmesinde). "Cikis" basligin yaninda TEK DOKUNUSLUKTU — geri donusu olmayan bir eylem icin fazla yakin |
   | `.page-sub` gizli | Ayni cumle kartin icinde zaten yaziyor |
   | `.topbar` yapiskan | Kaydirirken ekranda kalan tek cubuk o |

   Marka KAYBOLMUYOR: `.app-foot` sayfa dibinde logo + ad tasiyor.
   ===================================================================== */
@media (max-width: 940px) {
  .sidebar { display: none; }

  /* BU KURAL COK SATIRLI CUBUKTAN KALMA. Ust cubuk artik TEK SATIR
     (52px, marka · seri · avatar) ve olcusu yukaridaki blokta; burada
     dolgu/sarma/min-height yazmak onu EZIYORDU (bu blok daha sonra
     geliyor). Olculdu: dolgu `12px 16px 8px` uygulaniyor, seri pastili
     cubuktan tasiyor ve alt kenar cizgisi hem pastili hem avatari
     kesiyordu. Burada yalnizca YAPISKANLIK kalir. */
  .topbar {
    position: sticky; top: 0; z-index: 40;
  }
  .page-head { flex: 1 1 auto; min-width: 0; }
  .page-sub { display: none; }

  /* Hap seridi cubugun ikinci satiri. `scroll-snap` hapin ORTASINDAN
     kesilmesini onler — olcumde "%64 DOGRULU" diye yarim bir etiket
     goruluyordu ve bozuk duruyordu. */
  .top-stats { scroll-snap-type: x proximity; padding-bottom: 0; }
  .top-stats .stat-pill { scroll-snap-align: start; }

  /* --- "Daha" panelindeki hesap blogu --- */
  .np-hesap {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
  }
  .np-av {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--ink-ters);
    font-weight: 600; font-size: var(--fs-sm);
  }
  .np-kim { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  .np-kim b { font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .np-kim i { font-style: normal; font-size: var(--fs-xs); color: var(--faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .np-hesap .btn-sm { flex: 0 0 auto; gap: var(--sp-2); }
}

/* =====================================================================
   TELEFON — KART DUZENI: EYLEM USTTE, SAYILAR ALTTA
   =====================================================================
   Kullanici: "calisilan her sey en ustte gorunmeli, istatistikleri alta
   ama mumkunse gorunur olmali" ve "her sey nizami ve kompact gorunmeli,
   dagnik olmamali".

   Olculdu (390x844, Tekrar ekrani): birincil dugme ("Tekrar Turunu
   Baslat") sayfanin 1400px asagisindaydi — 1,7 EKRAN. Ustunde 350px
   tanitim paragrafi, 290px mavi aciklama kutusu ve 380px sayi kutusu
   vardi. Yani ekranin isi gorunmuyordu, once uc duvar okunuyordu.

   Cozum kart icini SIRALAMAK. Sira anlamdan gelir, DOM'dan degil:

     0  h2 / .ch-top      — neredeyim
     1  .sub .tekrar-yapi — neden (katlanir, bkz. asagisi)
     2  eylem satirlari   — ISIN KENDISI
     3  geri kalan
     4  .stat-grid        — sayilar; SILINMEZ, altta durur

   Sayilar gizlenmiyor: kullanici "mumkunse gorunur olsun" dedi ve
   gorunur — yalnizca eylemin ARDINA geciyor.

   `.card` mobilde flex sutun oluyor; `margin-bottom` flex ogesinde de
   calisir, kart ritmi bozulmaz. Cocuklarin varsayilan sirasi 3, yani
   sirasi verilmemis her blok eylemle sayilar arasinda kalir.
   ===================================================================== */
@media (max-width: 940px) {
  .card { display: flex; flex-direction: column; }
  .card > * { order: 3; }
  .card > h2,
  .card > .ch-top,
  .card > .card-head { order: 0; }
  .card > .sub,
  .card > .tekrar-yapi { order: 1; }
  /* ISIN KENDISI — eylem satirlari sayilardan ve aciklamadan once */
  .card > .act,
  .card > .act-main,
  .card > .btn-row,
  .card > .hero-top { order: 2; }
  .card > .stat-grid,
  .card > .heat,
  .card > .bar-list { order: 4; }
  /* Bos durum bir eylem TASIR (dugmesi vardir) — asagi itilmemeli */
  .card > .bos-durum { order: 2; }

  /* SONUC KARTI SIRALAMADAN MUAF. "Eylem uste" kurali bir GOREV kartinda
     dogru: kullanici oraya bir is yapmaya geliyor. Senaryo ozeti ise bir
     SONUC — madalyon ve "Senaryo bitti" basligi once okunmali. Muafiyet
     olmadan "Tekrar oyna" / "Senaryolara don" madalyonun da basligin da
     USTUNE ciktiyor (olculdu, 390px). */
  .sn-ozet > * { order: 0; }

  /* ALISTIRMA TURU KARTLARI DA MUAF — ayni gerekce, daha keskin.
     "Eylem uste" kurali bir GOREV kartinda dogru (kullanici oraya bir
     is yapmaya geliyor ve dugmeyi arar). Alistirma kartinda ise
     yapilacak is SORUNUN KENDISI: "Kontrol Et" ve "Sonraki" sorunun
     ustune cikinca kullanici cevabi gormeden dugmeyi goruyordu
     (kullanici ekran goruntusuyle bildirdi — Yazma turunda "Kontrol et"
     ve "Bilmiyorum / Ara Ver" cumlenin ve girdinin USTUNDEYDI).
     Yuvaya cizilen yedi turun hepsi bu kaptan geciyor. */
  .tur-yuva .card > *,
  /* DUZENSIZ FIIL SINAVI DA MUAF — ayni gerekce. Tam ekran ciziliyor,
     yani yuvadan gecmiyor ve kurali kendi basina yiyordu: "Devam" ile
     "Sinavdan cik" fiilin ve siklarin USTUNDE duruyordu (kullanici
     ekran goruntusuyle bildirdi). */
  /* OZGULLUK: `.card.quiz-card` — tek sinifla yazilinca (0,1,0) oluyor
     ve `.card > .sub` / `.card > .btn-row` (0,2,0) onu EZIYORDU: kelime
     ile siklar yukari cikti ama soru metni ile dugmeler asagida kaldi
     (yari duzelmis bir ekran, ekran goruntusuyle yakalandi). Ozgulluk
     esitlenince kaynak sirasi karar veriyor. */
  .card.quiz-card > * { order: 0; }

  /* --- KOMPAKT RITIM ---
     Masaustu dolgu ve baslik olcegi telefonda fazla yer yiyor. Olcek
     DISINA cikilmadi: bir basamak asagi inildi (--sp-5 -> --sp-4,
     --fs-xl -> --fs-lg). */
  :root { --card-pad: var(--sp-4); }
  .card { margin-bottom: var(--sp-4); }
  .card > h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
  .card > .sub { margin-bottom: var(--sp-4); }
  .two-col, .split-21, .settings-grid { gap: var(--sp-4); }

  /* Sayi kutulari alcalir: ikon ve dolgu bir basamak iner, RAKAM
     kucultulmez (asil bilgi o). */
  .stat-box { padding: var(--sp-3); }
  .stat-box .si { width: 32px; height: 32px; flex: 0 0 32px; }

  /* --- KATLANIR ACIKLAMA ---
     Uzun tanitim metni mobilde uc satira kirpilir, kalani "Devami"
     dugmesiyle acilir. Metin SILINMEZ — kullanici isterse okur.
     Isaretlemeyi `APP.Views.mobilKisalt()` her render sonunda kurar. */
  /* `-webkit-line-clamp` DEGIL, `max-height` + solma maskesi.
     Clamp DENENDI ve GERI ALINDI: kutunun kendi dolgusu varken
     (`.tekrar-yapi` mavi kutu) kirpma dolgunun icinden geciyor ve
     metin kutunun ALTINDAN TASIYORDU — olcumde yarim bir satir
     kutunun disinda goruldu. Ayrica `.card` flex olunca `-webkit-box`
     bloklastiriliyor ve davranis tarayiciya kaliyor.
     max-height her iki durumda da temiz kirpar; maske "devami var"
     isaretini metnin kendisiyle verir. */
  .kisalt.kapali { max-height: var(--kisalt-h, 72px); overflow: hidden; }
  /* SOLMA MASKESI DENENDI VE GERI ALINDI. Maske ogenin TAMAMINI
     soluyor — kendi zemini olan bir kutuda (`.tekrar-yapi` mavi) zemin
     saydama giderken koyu metin hala secilebiliyor ve dorduncu satir
     KUTUNUN DISINDA yuzuyormus gibi gorunuyordu (ekran goruntusuyle
     dogrulandi). `--kisalt-h` zaten tam satir sinirinda kesiyor;
     "devami var" isaretini "Devamı" dugmesi veriyor. Duz kesim daha
     derli toplu. */
  .kisalt-ac {
    align-self: flex-start;
    margin: 0 0 var(--sp-3);
    background: none; border: none; padding: 0;
    min-height: 40px;                     /* dokunma hedefi */
    color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer;
  }
  /* Kirpilmis metnin hemen altina dugme gelecegi icin kendi alt
     bosluguna gerek yok — iki bosluk ust uste binmesin. */
  .kisalt.kapali { margin-bottom: var(--sp-2); }
}

/* --- KATLANAN BOLUM (telefon) — bkz. APP.Views.mobilKatla ---
   Dilbilgisi 13 bolum x 71 konu = 8,6 ekran olculmustu. Basvuru
   ekranidir: aranir, atlanir, tek konu okunur. Sayilar baslikta
   KALIR — katli bir bolumun ne kadar icerik tasidigi gorunsun. */
@media (max-width: 940px) {
  .katlanir > .kat-bas {
    display: flex; align-items: center; gap: var(--sp-2);
    cursor: pointer; -webkit-user-select: none; user-select: none;
    min-height: 44px;                     /* dokunma hedefi */
    margin-bottom: 0;
  }
  .katlanir > .kat-bas:focus-visible { outline: var(--odak); outline-offset: 2px; }
  .kat-ok {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; color: var(--faint);
    transition: transform var(--mo-hizli) var(--mo-cikis);
  }
  .kat-ok .ic { width: 18px; height: 18px; }
  .katlanir.kapali > .kat-bas { margin-bottom: 0; }
  .katlanir.kapali .kat-ok { transform: rotate(-90deg); }
  /* Kapaliyken govde VE giris metni gizlenir — baslik + sayi kalir. */
  .katlanir.kapali > .gr-liste,
  .katlanir.kapali > .sub,
  .katlanir.kapali > .kisalt-ac { display: none; }
  /* Katli kart ince bir seride iner: dolgu bir basamak azalir. */
  .katlanir.kapali { padding-top: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); }
}

/* BOLUM ZINCIRI TELEFONDA GIZLI — katlama ile TEKRAR oluyor.
   Zincir (13 cip, 441px olculdu) "bolume atla" kisayoluydu ve
   masaustunde hala oyle. Telefonda bolumler zaten katli: asagida ayni
   13 bolum, ayni ikon, ayni adla ve ustelik KONU SAYISIYLA duruyor.
   Ayni listeyi iki kez gostermek "dagnik" gorunumun ta kendisi. */
@media (max-width: 940px) {
  .gr-zincir { display: none; }
}

/* --- SUZGEC KATLAMA (telefon) — bkz. APP.Views.mobilSuzgec ---
   Uc tam genislik acilir liste icerikten once 230px yiyordu. Arama
   gorunur kalir, listeler bir dokunus arkasina gecer. */
@media (max-width: 940px) {
  .filters.suz-katli { gap: var(--sp-2); }
  .filters.suz-kapali .dd,
  .filters.suz-kapali select { display: none; }
  .suz-ac { align-self: flex-start; gap: var(--sp-2); }
  /* Etkin suzgec varken dugme vurgulanir — katli bir suzgecin listeyi
     kisitladigi gorunmezse "liste neden eksik" sorusu doguyor. */
  .filters.suz-etkin .suz-ac {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}

/* --- ARAC CUBUGU TELEFONDA: ARAMA TAM GENISLIK, GERISI TEK SATIR ---
   Onceki kural `.filters`i tamamen SUTUNA ceviriyordu ve her cocuk
   %100 genislikteydi. Kelimeler ekraninda bu dort ayri satir ediyordu
   (olculdu: arama 40 + "Duzensiz Fiiller" 42 + "1212 kelime" 42 +
   "Suzgecler" 42 = 190px) ve aralarindaki bosluklar ekrani dagitiyordu
   — sayac tek basina bir satir kapliyordu.

   Yeni duzen: arama kendi satirinda (uzun metin girilir, dar olmamali),
   dugmeler ve sayac ALTINDA TEK SATIR. Acilir listeler katli oldugu
   icin (bkz. mobilSuzgec) normalde gorunmez; acilinca tam genislik
   alirlar — secenek metinleri kirpilmasin. */
@media (max-width: 940px) {
  .filters {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--sp-2);
  }
  .filters > input[type=text] { flex: 1 1 100%; width: 100%; }
  .filters > .dd, .filters > select { flex: 1 1 100%; width: 100%; }
  .filters > .btn, .filters > .btn-sm { flex: 0 0 auto; width: auto; }
  /* SAYAC TELEFONDA GIZLI — BASLIKTA ZATEN VAR.
     "1212 kelime" tek basina 42px'lik bir satir kapiyordu, oysa kartin
     basligi zaten "Kelimeler (1212 / 1212)" diyor; Senaryolar'da da
     "(21/21)". Ayni sayiyi iki kez yazmak hem yer yiyor hem dagitiyor.
     Once satirin sonuna yaslanmasi denendi: iki dugmeyle ayni satira
     sigmadi ve "Suzgecler"i alt satira itti — uc satir etti. */
  .filters > .u-dim { display: none; }
  .suz-ac { align-self: auto; }
}

/* =====================================================================
   MOBIL KATMAN — 3 sekme + profil, toplayici ekranlar
   =====================================================================
   Once telefonda 11 gezinme hedefi vardi (4 sekme + "Daha" panelinde 6).
   Kullanici hangi seyin nerede oldugunu ezberlemek zorundaydi. Yerlesik
   mobil desen 3-5 sekmedir ve her sekmenin TEK isi olur.
   ===================================================================== */
@media (max-width: 940px) {

  /* PROFIL — ust cubukta, alt cubukta DEGIL. Dorduncu bir sekme profili
     gunluk isle ayni agirlikta gosterirdi; profil nadiren girilir. */
  .mobil-profil {
    /* BIRINCI SATIRDA, basligin sagi. DOM'da haplardan SONRA eklendigi
       icin `order` verilmezse ucuncu satira dusuyordu ve icerik 115px
       yerine 157px'te basliyordu (olculdu). */
    order: 1;
    margin-left: auto; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: var(--r-full);
    border: none; padding: 0; cursor: pointer;
    background: var(--accent); color: var(--ink-ters);
    font-weight: 600; font-size: var(--fs-sm); font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Haplar cubugun ikinci satirinda; avatar birinci satirin sonunda
     kalsin diye baslik esner, haplar tam genislik alir. */
  /* Haplar ikinci satir — avatar birinci satirda kalsin. */
  .topbar .top-stats { order: 2; flex: 1 1 100%; }

  /* --- LISTE SATIRI (Kesfet ve Ilerleme) ---
     Kart izgarasi DEGIL: telefonda tarama hizi kartlardan yuksek, dort
     bolum tek ekrana siger ve her satir kendi sayisini tasir. */
  .mk-liste { display: flex; flex-direction: column; gap: var(--sp-2); }
  .mk-satir {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; text-align: left; cursor: pointer;
    padding: var(--sp-3); min-height: 64px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-1);
    font-family: inherit; color: var(--text);
  }
  .mk-satir:active { background: var(--card2); }
  .mk-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;
    background: var(--card2);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    color: var(--accent);
    color: color-mix(in srgb, var(--accent) 74%, var(--text));
  }
  .mk-ic .ic { width: 20px; height: 20px; }
  .mk-ad { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 2px; }
  .mk-ad b { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-sik); }
  .mk-ad i {
    font-style: normal; font-size: var(--fs-sm); color: var(--muted);
    line-height: var(--lh-normal);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mk-ok { flex: 0 0 auto; color: var(--faint); display: inline-flex; }
  .mk-ok .ic { width: 18px; height: 18px; transform: rotate(-90deg); }

  /* --- ILERLEME OZETI --- */
  .mi-ust { gap: var(--sp-3); }
  .mi-seviye { display: flex; align-items: baseline; gap: var(--sp-2); }
  .mi-band { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.6px; }
  .mi-band-ad { font-size: var(--fs-sm); color: var(--muted); }
  .mi-alt { margin: 0; font-size: var(--fs-sm); color: var(--faint); }
  .mi-sayilar { display: flex; gap: var(--sp-2); }
  .mi-sayi {
    flex: 1 1 0; min-width: 0; padding: var(--sp-3);
    border-radius: var(--r-md); background: var(--card2);
    display: flex; flex-direction: column; gap: 2px;
  }
  .mi-sayi b { font-size: var(--fs-xl); font-weight: 600; line-height: 1.1; }
  .mi-sayi i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
  /* Ilerleme dili: renk KAVRAMA baglidir, ekrana degil (CLAUDE.md). */
  .mi-yeni  b { color: var(--ilerleme-yeni); }
  .mi-yolda b { color: var(--ilerleme-yolda); }
  .mi-ogren b { color: var(--ilerleme-ogren); }

  .mi-seri { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .mi-alev {
    width: var(--icon-box); height: var(--icon-box); flex: 0 0 auto;
    border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card2);
    background: color-mix(in srgb, var(--warn) 16%, var(--card));
    color: var(--warn);
    color: color-mix(in srgb, var(--warn) 72%, var(--text));
  }
  .mi-seri-tx { display: flex; flex-direction: column; gap: 2px; }
  .mi-seri-tx b { font-size: var(--fs-base); font-weight: 600; }
  .mi-seri-tx i { font-style: normal; font-size: var(--fs-sm); color: var(--faint); }

  .mi-rozet-ic { display: flex; flex-direction: column; gap: var(--sp-2); }
  .mi-rozet-ic b { font-size: var(--fs-base); font-weight: 600; }
  .mi-rozet-ic i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
  .mi-rozet-say { font-size: var(--fs-sm); color: var(--faint); }
}

/* CALIS EKRANI — seviye blogu telefonda GIZLI, cunku artik TEKRAR.
   `.hero-level` (ilerleme seviyesi + cubuk + uc sayi + aciklama) hero
   kartinin 554px'inin 175px'ini yiyordu. Uc sekmeli yapida o bilgi
   ILERLEME sekmesinin kendi ekranidir ve orada daha genis anlatiliyor
   (seviye · seri · siradaki rozet). Ayni sayiyi iki yerde gostermek
   hem yer yiyor hem "hangisi guncel" sorusunu doguruyor.

   Masaustunde KALIR: orada toplayici sekme yok, kenar menusunden
   Istatistik'e gitmek ayri bir tiklama. */
@media (max-width: 940px) {
  .hero-level { display: none; }
}

/* =====================================================================
   ALT SAYFA (bottom sheet) — telefonda pencerenin yerini alir
   =====================================================================
   Ortadan acilan pencere kisa ekranda TASIYORDU: olculdu, kural
   penceresi 640px'lik ekranda basliktan 116px ve dugmeden 115px disari
   cikiyor, flex ortalamada tasan kutunun USTUNE kaydirarak
   ulasilamiyordu. Alta yapisik bir sayfada bu sorun yapisal olarak
   olusmaz. Ayrica basparmak menzili: tek elle tutan biri ekranin ust
   ucte birine rahat ulasamaz.
   ===================================================================== */
.sheet-perde {
  /* Z-INDEX ALT GEZINME YUVASININ USTUNDE OLMALI.
     Yuva 70; sayfa 60'ta kalinca yuva sayfanin UZERINE biniyordu ve
     sayfanin dibindeki hesap blogunu (tema + cikis) ortuyordu —
     kullanici "light/dark dugmesini goremiyorum" dedi, dugme oradaydi
     ama yuvanin altindaydi. */
  position: fixed; inset: 0; z-index: 79;
  background: rgba(11, 11, 11, 0.44);
  opacity: 0; transition: opacity var(--mo-orta) var(--mo-cikis);
}
.sheet-perde.acik { opacity: 1; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-direction: column;
  background: var(--card);
  border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  /* `dvh` `vh`'DEN SONRA yazilir — mobil tarayici cubugu acikken `vh`
     yaniltir, tanimayan tarayici `vh`'de kalir. */
  max-height: 88vh; max-height: 88dvh;
  transform: translateY(100%);
  transition: transform var(--mo-orta) var(--mo-cikis);
}
.sheet.acik { transform: translateY(0); }
.sheet.genis { max-width: 560px; margin: 0 auto; border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* Tutamak — "bu sayfa surukelenebilir" isareti. */
.sheet-tut {
  width: 40px; height: 4px; border-radius: var(--r-full);
  background: var(--line-strong);
  margin: var(--sp-3) auto var(--sp-1);
  flex: 0 0 auto; cursor: grab;
}
.sheet-bas {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  flex: 0 0 auto; cursor: grab; -webkit-user-select: none; user-select: none;
}
.sheet-bas h2 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.3px;
  line-height: var(--lh-sik);
}
.sheet-kapat { flex: 0 0 auto; }

/* KAYAN TEK YER. `min-height: 0` SART — flex ogesi varsayilan olarak
   icerginden kucululmez ve `overflow` hic devreye girmez. */
.sheet-govde {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 var(--sp-4) var(--sp-4);
  -webkit-overflow-scrolling: touch;
}
.sheet-govde:focus-visible { outline: var(--odak); outline-offset: -2px; }
/* Tasiyorsa alt kenar solar; dibe inince kalkar. */
.sheet-govde.kayar:not(.dipte) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.sheet-alt {
  flex: 0 0 auto;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4)
           calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--card);
}
.sheet-alt .btn { flex: 1 1 0; min-height: var(--ctrl-h); }

/* Genis ekranda alt sayfa CIZILMEZ — orada ortalanmis pencere dogru
   desendir ve `APP.Sheet.ac()` zaten `ask()`e devreder. Bu kural yalnizca
   bir emniyet: baska bir yol sayfayi yine de olusturursa gizlenir. */
@media (min-width: 941px) {
  .sheet, .sheet-perde { display: none; }
}

/* =====================================================================
   YAPISKAN EYLEM CUBUGU — ekranin tek ana eylemi basparmak menzilinde
   =====================================================================
   Olculdu: Tekrar ekraninda birincil dugme sayfanin 1400px asagisindaydi.
   Kirpma ve siralamayla 462px'e indi ama kaydirinca yine kayboluyordu.
   Yerli uygulamalarda ana eylem alta sabitlenir ve orada kalir.
   ===================================================================== */
@media (max-width: 940px) {
  .mobil-eylem {
    position: fixed; left: 0; right: 0;
    /* Alt gezinme cubugunun USTUNDE — onu ortmemeli. */
    bottom: calc(59px + env(safe-area-inset-bottom, 0px));
    z-index: 45;                     /* alt gezinme 50, alt sayfa 60 */
    padding: var(--sp-3) var(--sp-4);
    background: var(--page-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transform: translateY(120%);
    transition: transform var(--mo-hizli) var(--mo-cikis);
  }
  .mobil-eylem.gorunur { transform: translateY(0); }
  .mobil-eylem .btn {
    width: 100%; min-height: var(--ctrl-h-lg);
    font-size: var(--fs-base); font-weight: 600;
  }
  /* ICERIK CUBUGUN ALTINDA KALMASIN. Footer'da bir kez yasanan kusur:
     sabit bir serit her ekranda yer kaplar ve kaydirilan icerigi kirpar. */
  body.eylem-cubuk .app-foot { padding-bottom: calc(var(--sp-10) + 52px); }
}

/* =====================================================================
   ALISTIRMA — TELEFON: SORU ONDE, BILGI PANELI KATLI
   =====================================================================
   Kullanici uc kusur bildirdi ve UCUNUN DE KOKU AYNIYDI:

     "cumleyi buraya kur bolumu kelimelere dokununca yukari gidiyor ama
      sayfada surekli kayma oluyor"
     "kelimeleri surukle birak yapamiyoruz"
     "alt gezinme yukari kaydirmadan gorunmuyor"

   Olculdu (390x844): `.ex-side` bilgi paneli ekranin TEPESINDE
   (`order: -1`) ve 442px; soru (`.ex-main`) ancak 686px'te basliyor,
   alistirmanin tamami 1603px — yani IKI EKRAN. Kullanici her tasa
   dokunusta once soruyu bulmak icin kaydiriyor, sonra havuz kucululunce
   yerlesim oynuyor.

   Panel SILINMEDI (kutu durumu, telaffuz, gecmis degerli bilgi) —
   sorunun ALTINA alindi ve katlandi. Acmak tek dokunus.
   ===================================================================== */
@media (max-width: 940px) {
  /* SORU ONDE. `order: -1` -> `order: 1`. */
  .ex-side { order: 1; padding: var(--sp-3) var(--sp-4); }

  /* Katli halde yalnizca basligi gorunur. Baslik JS ile eklenir
     (dragdrop.js `yanPaneliKatla`), yoksa panel eskisi gibi acik kalir —
     JS calismasa da bilgi kaybolmaz. */
  .ex-side.yp-katli > *:not(.yp-bas) { display: none; }
  .ex-side .yp-bas {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; min-height: 44px;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--muted); cursor: pointer;
    -webkit-user-select: none; user-select: none;
  }
  .ex-side .yp-bas .ic { width: 18px; height: 18px; flex: 0 0 auto; }
  .ex-side .yp-ok {
    margin-left: auto; display: inline-flex; color: var(--faint);
    transition: transform var(--mo-hizli) var(--mo-cikis);
  }
  .ex-side .yp-ok .ic { width: 18px; height: 18px; }
  .ex-side.yp-katli .yp-ok { transform: rotate(-90deg); }

  /* SURUKLENEN TAS — parmagin altinda yuzen kopya.
     `pointer-events: none` SART: `elementFromPoint` hayaleti gormemeli,
     yoksa birakma bolgesi hep "hayalet" cikar ve tas hicbir yere
     dusmez. */
  .chip-hayalet {
    position: fixed; z-index: 80; pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: .92; box-shadow: var(--shadow-pop);
    margin: 0;
  }
  /* Surukleme sirasinda sayfa kaymasin — parmak tasi tasiyor. */
  .zone .chip { touch-action: none; }
}

/* TUR SIRASINDA ALT YUVA GIZLENIR — odak modu.
   Olculdu: "Kontrol Et" 782-824px'te, alt gezinme yuvasi 766-832px'te —
   dugme yuvanin ALTINDA kaliyor ve dokunulamiyordu. Kullanici bunu
   "alt gezinme kaydirmadan gorunmuyor" diye bildirdi; gorunmeyen aslinda
   dugmeydi.

   YAPISKAN EYLEM SATIRI DENENDI VE GERI ALINDI: `.btn-primary`ye tam
   genislik verince "Sonra don" alt satira sariyor ve satir 42 -> 127px
   oluyordu; ustelik sticky, kapsayicinin yuksekligi yetmedigi icin hic
   tutmadi.

   Dogru cozum yuvayi KALDIRMAK: soruyu cevaplarken gezinmiyorsun. Yerli
   uygulamalar odaklanilan bir gorevde sekme cubugunu gizler. 78px geri
   gelir, ortusme yapisal olarak biter. Tur bitince yuva geri gelir. */
@media (max-width: 940px) {
  .layout.tur .mobil-nav { display: none; }
  /* Yuva yokken sayfa dibi payi da kucultulur — yoksa altta olu bant. */
  .layout.tur .app-foot { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  .layout.tur .toast { bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  /* Ekranin TEK ana eylemi 52px — tur ekraninda da ayni olcek. */
  .ex-actions .btn-primary { min-height: var(--ctrl-h-lg); font-size: var(--fs-base); }
}

/* CEVAP + HAVUZ KABI — yukseklik kilitli, yerlesim oynamaz.
   Tas havuzdan cevaba gecince cevap bir satir buyuyor, havuz bir satir
   kuculuyor; ikisi ayni anda olmadigi icin altindaki her sey (Kontrol Et
   dahil) zipliyordu. Kabin yuksekligi ilk cizimde kilitleniyor
   (dragdrop.js `kabiKilitle`), icinde taslar yer degistiriyor ama TOPLAM
   sabit kaliyor. Kullanici bunu uc kez bildirdi. */
.zone-wrap { display: block; }
/* =====================================================================
   TASARIM DILI — VITRIN KATMANI
   Kaynak: design_handoff_nevateach_web.

   Handoff'un ikinci imzasi (birincisi kum/bakir palet): EKRANIN TEK
   EYLEMI KOYU BIR VITRINDE durur. Bugun'un hero'su, Rozetler'in dolabi,
   Istatistik'in seviye karti, Tur ozetlerinin basligi — hepsi lacivert.
   Kagit kartlar referans, lacivert yuzey karar.

   Bu blok token'lardan sonra gelir ve YALNIZCA gorunum verir; hicbir
   yerlesim kirilimini (940px) ezmez.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · HERO — gunun tek eylemi, lacivert vitrin
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;                       /* dolgu ic sutunlarda */
  background: var(--yan-bg);
  border: 0;
  color: var(--yan-metin);
  border-radius: var(--r-lg);
  /* GOLGE YOK — prototipte lacivert vitrin duz durur. Kagit kartlar
     golge tasir cunku zeminden ayrilmalari gerekir; lacivert yuzey
     zaten kendi rengiyle ayriliyor. */
  box-shadow: none;
}
.hero .hero-top {
  display: flex; flex-wrap: wrap;
  gap: 0;                            /* ayrimi ic kenar cizgisi tasir */
  align-items: stretch;
}
.hero-ana {
  flex: 1 1 420px; min-width: 0;
  padding: clamp(18px, 2.4vw, 26px);
}
.hero-ust { margin-bottom: 0; gap: var(--sp-3); justify-content: space-between; }
.hero-greet {
  font-size: var(--fs-base); font-weight: 400; line-height: normal;
  color: var(--yan-metin-zayif); letter-spacing: normal;
}
.hero .scene-chip {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: rgba(201, 138, 91, 0.12);
  border: 1px solid var(--yan-cizgi);
  color: var(--yan-vurgu-2);
  font-size: var(--fs-sm); font-weight: 400;
  gap: 6px;
}
.hero .scene-chip .ic { color: currentColor; }

.hero .hero-sayac { margin-top: 14px; align-items: baseline; gap: var(--sp-2); }
.hero .hs-buyuk {
  font-size: clamp(var(--fs-4xl), 5.6vw, 62px);
  font-weight: 500; letter-spacing: normal; line-height: .92;
  color: var(--yan-metin);
}
.hero .hs-bolu {
  font-size: 24px; font-weight: 500; line-height: normal;
  color: var(--yan-ink-silik);
}
.hero .hs-birim {
  font-size: var(--fs-kontrol); font-weight: 400; line-height: normal;
  color: var(--yan-ink-govde);
}
.hero .hs-tekrar .hs-buyuk { color: var(--yan-vurgu-2); }
.hero .hs-bitti .hs-buyuk { color: #7FB394; }

.hero .hero-adim { gap: var(--sp-1); margin: var(--sp-3) 0 0; }
.hero .hero-adim > i {
  flex: 1 1 var(--sp-3); min-width: var(--sp-2); max-width: 26px;
  height: 3px; border-radius: 2px;
  background: rgba(233, 237, 242, 0.16);
  box-shadow: none;
}
.hero .hero-adim > i.dolu { background: var(--yan-vurgu); }
.hero .hero-note {
  color: var(--yan-ink-govde); font-size: var(--fs-kontrol);
  line-height: 1.5; max-width: 52ch; margin: 14px 0 0;
}
.hero .hero-ozet { color: var(--yan-metin-zayif); }

/* Hero eylem satiri: birincil bakir dolu, ikinciller lacivert uzerinde
   ince kenarli. Handoff: h48, r12. */
.hero .act { margin-top: 18px; gap: var(--sp-2); }
.hero .act .btn,
.hero .act .durum-hap {
  height: 48px; min-height: 48px;
  border-radius: 12px;              /* hero kontrolu r12, genel r11 degil */
  font-size: var(--fs-kontrol);
}
.hero .act .durum-hap { padding: 0 14px; }
/* Birincil: 14,5px ve altinda bakir isilti. Genel birincil dugme
   GOLGESIZ kalir (tasarim sozlesmesi); hero'nunki prototipte tek
   istisnadir — ekranin tek eylemi zeminden kalkar. */
.hero .act .btn-primary {
  padding: 0 20px;
  border: 0;
  font-size: 14.5px;
  box-shadow: 0 10px 22px -14px rgba(163, 87, 46, 0.95);
}
.hero .act .btn:not(.btn-primary) {
  background: transparent;
  padding: 0 16px;
  border: 1px solid rgba(233, 237, 242, 0.20);
  color: #E9EDF2;
}
.hero .act .btn:not(.btn-primary):hover:not(:disabled) {
  border-color: rgba(201, 138, 91, 0.60);
  background: rgba(201, 138, 91, 0.08);
  color: var(--yan-metin);
}
.hero .act .durum-hap {
  background: rgba(63, 107, 82, 0.16);
  border: 0;
  color: #7FB394;
}

/* SAG SUTUN — ilerleme seviyesi. Ayrimi ince ic kenar cizgisi ve
   %2'lik beyaz yikama tasir; ikinci bir kart DEGIL. */
.hero .hero-level {
  flex: 1 1 250px; min-width: 0;
  text-align: left;
  padding: clamp(18px, 2.4vw, 26px);
  border-left: 1px solid rgba(233, 237, 242, 0.09);
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 10px;
}
.hero .hero-level .hl-code {
  font-size: var(--fs-xs); letter-spacing: var(--ls-kas);
  text-transform: uppercase; font-weight: 400;
  color: var(--yan-ink-kas);
}
.hero .hero-level .hl-name {
  font-size: 26px; font-weight: 500; line-height: 1.1;
  color: var(--yan-metin); margin: 0;
}
.hero .goal-bar {
  height: 5px; border-radius: 3px;
  background: rgba(233, 237, 242, 0.12);
  margin-top: 2px;
}
.hero .goal-bar > div { background: var(--yan-vurgu); border-radius: 3px; }
.hero .goal-legend {
  font-size: var(--fs-sm); color: var(--yan-ink-uc);
  margin-top: 0; flex-wrap: wrap; gap: 6px;
}
.hero .goal-legend b { color: var(--yan-metin); font-weight: 600; }
.hero .ilerleme-katman {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid rgba(233, 237, 242, 0.09);
  font-size: var(--fs-sm);
  color: var(--yan-metin-zayif);
}
.hero .ik-yolda b { color: var(--yan-vurgu-2); font-weight: 600; }
.hero .ik-ogr b { color: #7FB394; font-weight: 600; }
.hero .ik-not { font-size: var(--fs-xs); color: rgba(233, 237, 242, 0.35); }
.hero a, .hero .linkish { color: var(--yan-vurgu-2); }

/* ---------------------------------------------------------------------
   2 · TUR SERIDI — handoff: h44, r12; acik olan tur lacivert dolu
   --------------------------------------------------------------------- */
.tur-serit { gap: 7px; padding: var(--sp-1) 0 6px; }
.tur-serit > .btn {
  height: var(--ctrl-h);
  padding: 0 15px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
}
.tur-serit > .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.tur-serit > .ts-cekirdek,
.tur-serit > .ts-gorev {
  background: var(--card);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 500;
}
.tur-serit > .ts-cekirdek.ts-ok,
.tur-serit > .ts-gorev.ts-ok {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.ts-onay { background: var(--ok); color: var(--ink-ters); }

/* ---------------------------------------------------------------------
   3 · ROZET MADALYONU — ARTIK `.rz-kart-mad` (dosyanin sonunda)
   Eski `.badge-item .bi-ic` dili kaldirildi: handoff madalyonu IC ICE IKI
   daire (dista kademe metali, icte aile rengi) ve gradyanli. Buraya bir
   override YAZMA — bir kez yazilmis, gumus notr gri oldugu icin o
   kademedeki kilitli rozetlerin hepsi gri olculmustu.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   4 · SOZCUK TURU ROZETI — yumusak zemin + renkli murekkep
   Handoff: h21, r6, 10.5px -> olcek tabani 11px.
   --------------------------------------------------------------------- */
.pos-badge {
  height: 21px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em;
  border: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   5 · KART ICI SATIR AYRACI — handoff: 15px 0, --line-zayif
   --------------------------------------------------------------------- */
.setting-row { border-bottom-color: var(--line-zayif); }

/* ---------------------------------------------------------------------
   6 · TABLO — hairline ayrac, tabular rakam, sessiz baslik
   --------------------------------------------------------------------- */
/* Kas etiketi aralığı OLCEKTEN (`--ls-kas`). Tablo basligi `.06em`
   yaziyordu ve envanterde ayri bir imza olarak cikiyordu — ayni rolu
   tasiyan her etiket ayni araligi kullanir. */
table.words th {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-kas); text-transform: uppercase;
  color: var(--faint);
}
table.words td { font-size: var(--fs-sm); }
table.words tbody tr { border-bottom: 1px solid var(--line-zayif); }
table.words td:first-child { font-size: var(--fs-base); font-weight: 600; }

/* ---------------------------------------------------------------------
   7 · PENCERE VE ACILIR LISTE
   --------------------------------------------------------------------- */
.modal-card { border-radius: var(--r-lg); border: 1px solid var(--line); }
.dd-panel { border-radius: var(--r-md); border: 1px solid var(--line); }
.dd-btn {
  height: var(--ctrl-h);
  border-radius: var(--r-md);
  background: var(--page);
  border: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--text);
}
.dd-btn:hover { border-color: var(--line-strong); }
.dd-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--odak); }

/* ---------------------------------------------------------------------
   7b · TARIH VE SAAT — KENDI TAKVIMIMIZ, yerli panel DEGIL
   Gerekce ve calisma sekli: `web/js/ui/tarih.js` basligi.
   Olculer acilir listeyle BIREBIR ayni: `.og-slot` satirinda gun
   `<select>` (-> `.dd`) ile saat kutusu YAN YANA duruyor; ikisi ayni
   yukseklikte, ayni kosede, ayni yuzeyde olmali.
   --------------------------------------------------------------------- */
.ts { position: relative; display: block; min-width: 0; }
/* IKI SINIFLA (0,2,0) — TEK SINIF YETMEZ. `.og-form input` ve
   `.og-slot > input` gibi ELEMAN ADIYLA yazilmis kurallar (0,1,1) tek
   sinifi eziyor ve gizli girdi `height: 44px` olarak kaliyordu:
   `position: absolute` oldugu icin akista gorunmuyor ama kapsayicinin
   `scrollHeight`ini 44px sisiriyor. Sonucu kullanici gordu — pencere
   govdesi kaydirilabilir sayiliyor, `ask()` SOLMA MASKESINI aciyor ve
   dipteki saat kutusunun ALTI siliniyordu (olculdu: 157 / 113). */
.ts .ts-native {
  position: absolute; width: 0; height: 0; min-width: 0;
  padding: 0; border: 0; margin: 0; opacity: 0; pointer-events: none;
}

.ts-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  background: var(--page);
  /* KENAR `--btn-line`, `--line` DEGIL. Handoff kontrol kenari olarak
     `#E3DACB` veriyor ve o kart uzerinde 1,23:1 olculuyor — WCAG
     arayuz ogesi siniri 3:1 ve bu projede BIR KEZ olculup
     duzeltilmisti. `.dd-btn`in handoff blogu duzeltmeyi sessizce geri
     almis; kutu "silik" gorunuyordu (kullanici bildirdi). */
  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;
  font-variant-numeric: tabular-nums;
  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);
}
.ts-btn > .ic { width: 16px; height: 16px; flex: none; color: var(--faint); }
.ts-btn:hover { border-color: var(--line-strong); }
.ts-btn:hover > .ic { color: var(--accent); }
.ts-btn:focus-visible,
.ts.open .ts-btn { outline: none; border-color: var(--accent); box-shadow: var(--odak); }
.ts.open .ts-btn > .ic { color: var(--accent); }
.ts-btn:disabled, .ts.disabled .ts-btn { opacity: .55; cursor: not-allowed; }
.ts-deger { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-deger.bos { color: var(--faint); font-weight: 500; }

/* PANEL `fixed` VE BODY'DE — `.modal-body` `overflow-y: auto` tasiyor
   ve tarih alanlarinin cogu pencerede; mutlak konumlu bir panel orada
   kirpilirdi (`.og-vitrin`de bir kez yasandi). z-index pencerenin
   (90) ustunde. */
.ts-panel { display: none; }
.ts-panel.ts-acik {
  display: block;
  position: fixed; z-index: 95;
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-top-color: var(--cam-kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop), var(--kenar-isik);
  animation: ts-in .12s var(--mo-cikis);
}
@keyframes ts-in { from { opacity: 0; } to { opacity: 1; } }
/* Genislik SABIT: gun izgarasi 7 sutun, ay secici 3 — dugmeye
   kilitlenseydi mod degisince panel zipllardi. */
.ts-panel.ts-p-date { width: 282px; }
.ts-panel.ts-p-time { width: 188px; }

/* ---- ust satir: ok - ad - ok (defterin kendi gezinme dili) ---- */
.ts-ust { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.ts-ok {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.ts-ok:hover { background: var(--card2); color: var(--accent); }
.ts-ok .ic { width: 16px; height: 16px; }
/* Sette saga/sola bakan chevron YOK; `chevron` (asagi) dondurulur —
   "ikonu yeniden cizme" kuralinin belgeli cozumu (`.tb-ok-sol`). */
.ts-ok-sol .ic { transform: rotate(90deg); }
.ts-ok:not(.ts-ok-sol) .ic { transform: rotate(-90deg); }
.ts-baslik {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; height: 34px; padding: 0 var(--sp-2);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis);
}
.ts-baslik:hover { background: var(--card2); }
.ts-baslik > b { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; }
.ts-baslik .ic { width: 14px; height: 14px; color: var(--faint); }

/* ---- gun izgarasi ---- */
.ts-gunbas, .ts-izgara { display: grid; grid-template-columns: repeat(7, 34px); gap: 3px; }
.ts-gunbas { margin-bottom: 2px; }
.ts-gunbas > span {
  display: grid; place-items: center; height: 20px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  letter-spacing: var(--ls-kas); text-transform: uppercase;
}
.ts-gun {
  display: grid; place-items: center;
  height: 34px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis);
}
.ts-gun:hover:not([disabled]) { background: var(--card2); }
.ts-gun:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--odak); }
/* BUGUN defterin takvimindeki isaretle ayni: bakir cerceve. */
.ts-gun.bugun { border-color: var(--accent); color: var(--accent); }
.ts-gun[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--ink-ters);
}
.ts-gun[disabled] { opacity: .32; cursor: not-allowed; }
.ts-gun.bos { pointer-events: none; }

/* ---- ay secici ---- */
.ts-aylar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.ts-ay {
  height: 40px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis);
}
.ts-ay:hover { background: var(--card2); }
.ts-ay:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--odak); }
.ts-ay[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--ink-ters);
}

/* ---- saat: iki sutun ---- */
.ts-sutlar { display: flex; gap: var(--sp-2); }
.ts-sut { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ts-sut-bas {
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  letter-spacing: var(--ls-kas); text-transform: uppercase; text-align: center;
}
.ts-liste {
  max-height: 204px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
}
.ts-sec {
  flex: none; height: 34px;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis);
}
.ts-sec:hover { background: var(--card2); }
.ts-sec:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--odak); }
.ts-sec[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--ink-ters);
}

/* ---- alt satir ---- */
.ts-alt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--line-kart);
}
.ts-alt-orta { justify-content: center; }
.ts-eylem {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  background: none; border: 1px solid var(--btn-line); border-radius: var(--r-sm);
  color: var(--muted); font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: color var(--mo-hizli) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis);
}
.ts-eylem .ic { width: 13px; height: 13px; }
.ts-eylem:hover { color: var(--accent); border-color: var(--accent); }
.ts-eylem:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--odak); }
.ts-secili {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ts-buyuk { font-size: var(--fs-lg); color: var(--text); letter-spacing: -.01em; }

/* TELEFON: dokunma hedefi en az 40px (proje kurali). Panel 324px —
   390px goruntude iki yanda 8px'lik payla siger. */
@media (max-width: 940px) {
  .ts-panel.ts-p-date { width: 324px; }
  .ts-panel.ts-p-time { width: 204px; }
  .ts-gunbas, .ts-izgara { grid-template-columns: repeat(7, 40px); }
  .ts-gun, .ts-sec { height: 40px; }
  .ts-ok, .ts-baslik { height: 40px; }
  .ts-ok { width: 40px; }
  .ts-eylem { height: 40px; padding: 0 var(--sp-3); }
  .ts-liste { max-height: 232px; }
}

/* ---------------------------------------------------------------------
   8 · IKON DUGMESI — kare, r11, hairline
   --------------------------------------------------------------------- */
.icon-btn, .rail-toggle {
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: none;
}
.icon-btn:hover, .rail-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------
   9 · BILGI PANELI VE DURUM HAPI
   --------------------------------------------------------------------- */
.notice {
  border-radius: var(--r-md);
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.durum-hap {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--card2);
}

/* ---------------------------------------------------------------------
   10 · KULLANICI BLOGU (kenar menu dibi)
   --------------------------------------------------------------------- */
.who { border-radius: var(--r-sm); }
.who-avatar { border-radius: var(--r-full); font-weight: 600; }

/* ---------------------------------------------------------------------
   11 · ILERLEME CUBUGU — duz dolgu, ince ray
   --------------------------------------------------------------------- */
.progressbar { height: 5px; border-radius: 3px; background: var(--card2); }
.progressbar > div { border-radius: 3px; background: var(--accent); }

/* ---------------------------------------------------------------------
   12 · BAGLANTI — handoff: bakir, alti cizili, 3px offset
   --------------------------------------------------------------------- */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); }
.linkish { color: var(--accent); font-weight: 400; }


/* ---------------------------------------------------------------------
   13 · IKON KABARTMASI KALKTI
   Ikon setine `drop-shadow(0 1px 0 ...)` uygulaniyordu: konturu takip
   eden bir isik cizgisi. Eski dilde (cam cipler, katmanli golge) yerinde
   bir detaydi; yeni dil DUZ ve ikon saf kontur. Kabartma kum zeminde
   ikonu bulanik gosteriyor.
   --------------------------------------------------------------------- */
.ic { filter: none; }
.stat-box .si .ic, .summary-big .sb-icon .ic, .stat-pill .sp-ic .ic,
.convo-card .cc-ic .ic, .st-ic .ic,
.brand-logo svg { filter: none; }
/* Kontur isareti ve satir ici cipler golgesiz. */
.brand-logo, .rail-toggle, .stat-pill .sp-ic, .icon-btn { box-shadow: none; }
.bant { box-shadow: none; }

/* ---------------------------------------------------------------------
   14 · BILGI PANELI (.notice) — handoff: kum zemin, hairline kenar
   Handoff'ta bilgi paneli renkli bir UYARI degil, sessiz bir NOT:
   `background:#F5F1EA; border:1px solid #E7E0D3; border-radius:12px;
   padding:12px 14px` ve metin 12.5px. Renk yalnizca gercekten durum
   bildiren varyantlarda (ok / warn / bad) kalir.
   --------------------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--faint);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: var(--sp-3) 0;
  box-shadow: none;
}
.notice > .ic {
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin: 1px 0 0; vertical-align: 0;
  color: var(--accent);
}
.notice b { color: var(--text); font-weight: 600; }
.notice + .notice { margin-top: var(--sp-2); }
.notice-info { background: var(--page); border-color: var(--line); color: var(--faint); }
.notice-info > .ic { color: var(--accent); }
.notice-ok {
  background: var(--ok-soft); border-color: var(--ok); color: var(--ok-strong);
}
.notice-ok > .ic { color: var(--ok-strong); }
.notice-warn {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink);
}
.notice-warn > .ic { color: var(--warn-ink); }
.plan-streak > .ic { color: var(--accent); }

/* HERO ICINDE bilgi paneli lacivert uzerinde yasar. */
.hero .notice {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(233, 237, 242, 0.14);
  color: var(--yan-metin-orta);
}
.hero .notice b { color: var(--yan-metin); }
.hero .notice > .ic { color: var(--yan-vurgu); }

/* UC KATMAN — hero'nun sag sutununda DIKEY.
   `.hero-level` bir flex sutun ve `.hero-top` stretch veriyor; taban
   kuraldaki `flex-wrap: wrap` yuzunden liste dikeyde tasinca IKINCI
   SUTUNA sariyordu (olculdu: "ogrenilmis = 14 gun..." notu saga gecti). */
.hero .ilerleme-katman { flex-wrap: nowrap; }
.hero .ilerleme-katman .ik-not { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   15 · BOS DURUM — kum zemin, hairline, bakir ikon
   --------------------------------------------------------------------- */
.empty { color: var(--faint); font-size: var(--fs-sm); }
.bos-durum .bd-ic {
  background: var(--accent-soft);
  border: 0;
  color: var(--accent);
  border-radius: var(--r-sm);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   16 · ROZET AILE RENKLERI — handoff'un dokuz aile paleti
   Eski dokuz renk (parlak amber, siyan, mor, magenta) yeni kum/lacivert
   zeminde yabanci duruyordu. Handoff'un Rozetler ekrani dokuz doygun
   ama KISIK ton kullaniyor; hepsi ayni doygunluk seviyesinde, yani
   hicbiri otekinden daha "yuksek sesli" degil.
   --------------------------------------------------------------------- */
.bf-seri { --rozet-renk: #A3572E; }
.bf-kelime { --rozet-renk: #3A5A7A; }
.bf-alistirma { --rozet-renk: #5B4B7A; }
.bf-isabet { --rozet-renk: #3F6B52; }
.bf-konusma { --rozet-renk: #2E6B72; }
.bf-okuma { --rozet-renk: #8A4A5E; }
.bf-dilbilgisi { --rozet-renk: #4E5560; }
/* MAVI AILENIN KROMASI KREM ZEMINDE SONUYORDU. Handoff'un #3A5A7A tonu
   madalyon tintinde (%18, kagit uzerinde) doygunluk 3 veriyordu (esik 6):
   krem R>G>B, mavi B>G>R — %18 karisimda ikisi birbirini goturuyor ve
   madalyon notr gri cikiyor (scratchpad/rozet-renk.js, 5/75 kart).
   Oteki sekiz aile sicak ya da orta hue oldugu icin bu sorunu yasamiyor.
   Cozum hue'yu degistirmek degil, ayni ailede daha derin bir adim:
   olculdu 2 -> 13. */
/* ARDUVAZ (#4E5560) KULLANILMADI. Handoff paletinde var ama KROMASI
   yok: kilitli rozet zemini `--rozet-renk %6 + --card2` ve arduvazin
   %6'si sicak krem uzerinde kartin KENDI doygunlugunun altina duser —
   olculdu, 75 kartin 5'i "tamamen gri" cikti (scratchpad/rozet-renk.js).
   Kural bir kullanici sikayetinden dogmustu ("rozet sayfasindaki
   renkler cok sikici"); ayni paletin zeytin tonu hem kisik hem renkli. */
.bf-kesif { --rozet-renk: #8A6A2E; }
.bf-yazma { --rozet-renk: #6B6330; }
/* Dolu zemin uzerinde ters murekkep okunur kalsin diye ayri ton
   gerekmiyor: dokuz rengin dokuzu da yeterince koyu (olculdu). */
.bf-seri, .bf-kelime, .bf-alistirma, .bf-isabet, .bf-konusma,
.bf-okuma, .bf-dilbilgisi, .bf-kesif, .bf-yazma { --rozet-dolu: var(--rozet-renk); }

/* MADALYON DISKI TEMA DUYARLI DEGIL — `--rz-dolu`.
   `--rozet-renk` koyu temada ACILIR (metin/cizgi icin dogru), ama
   madalyonun ic dairesi DOLU bir yuzey ve uzerinde BEYAZ ikon var:
   acilan tonla beyaz ikon 2,19:1'e dusuyordu (olculdu). Disk her iki
   temada da handoff'un koyu tonunu tasir — madalya minesi gibi. */
.bf-seri       { --rz-dolu: #A3572E; }
.bf-kelime     { --rz-dolu: #3A5A7A; }
.bf-alistirma  { --rz-dolu: #5B4B7A; }
.bf-isabet     { --rz-dolu: #3F6B52; }
.bf-konusma    { --rz-dolu: #2E6B72; }
.bf-okuma      { --rz-dolu: #8A4A5E; }
.bf-dilbilgisi { --rz-dolu: #4E5560; }
.bf-yazma      { --rz-dolu: #6B6330; }
.bf-kesif      { --rz-dolu: #8A6A2E; }

:root[data-theme="dark"] .bf-seri       { --rozet-renk: #DBA277; }
:root[data-theme="dark"] .bf-kelime     { --rozet-renk: #8FB0CE; }
:root[data-theme="dark"] .bf-alistirma  { --rozet-renk: #A99BC4; }
:root[data-theme="dark"] .bf-isabet     { --rozet-renk: #7FB093; }
:root[data-theme="dark"] .bf-konusma    { --rozet-renk: #79B4BB; }
:root[data-theme="dark"] .bf-okuma      { --rozet-renk: #D49BAC; }
:root[data-theme="dark"] .bf-dilbilgisi { --rozet-renk: #A7AEB8; }
:root[data-theme="dark"] .bf-kesif      { --rozet-renk: #D9B463; }
:root[data-theme="dark"] .bf-yazma      { --rozet-renk: #BDB279; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .bf-seri       { --rozet-renk: #DBA277; }
  :root:where(:not([data-theme="light"])) .bf-kelime     { --rozet-renk: #8FB0CE; }
  :root:where(:not([data-theme="light"])) .bf-alistirma  { --rozet-renk: #A99BC4; }
  :root:where(:not([data-theme="light"])) .bf-isabet     { --rozet-renk: #7FB093; }
  :root:where(:not([data-theme="light"])) .bf-konusma    { --rozet-renk: #79B4BB; }
  :root:where(:not([data-theme="light"])) .bf-okuma      { --rozet-renk: #D49BAC; }
  :root:where(:not([data-theme="light"])) .bf-dilbilgisi { --rozet-renk: #A7AEB8; }
  :root:where(:not([data-theme="light"])) .bf-kesif      { --rozet-renk: #D9B463; }
  :root:where(:not([data-theme="light"])) .bf-yazma      { --rozet-renk: #BDB279; }
}

/* =====================================================================
   17 · LACIVERT YUZEY — GENEL MUREKKEP KURALI
   `.card.hero` iki farkli icerikte kullaniliyor: Bugun'un iki sutunlu
   eylem vitrini ve Istatistik'in "Seviyen" karti. Ilkinde dolgu ic
   sutunlarda, ikincisinde kartin kendisinde. `padding: 0` ikisine birden
   yazilinca Istatistik karti kenara yapisiyor ve icindeki KAGIT kutular
   lacivert uzerinde okunmaz kaliyordu (olculdu: "Temel kaliplari
   taniyorsun." gorunmuyordu).

   Cozum: kart NORMAL dolgusunu korur; iki sutunlu vitrin dolguyu negatif
   margin ile geri alir. Boylece `:has()` gerekmez.
   ===================================================================== */
.hero { padding: var(--card-pad); }
.hero > .hero-top { margin: calc(-1 * var(--card-pad)); }

.hero h2, .hero h3 { color: var(--yan-metin); }
.hero h2 > .ic { color: var(--yan-vurgu); }
.hero p, .hero .sub, .hero span, .hero em, .hero small { color: var(--yan-metin-orta); }
/* MERDIVENI TASIYANLAR TOPLU KURALDAN MUAF. `.hero span` (0,1,1)
   `.hero-greet` (0,1,0) ile lacivert sutundaki butun span'lari
   eziyordu; olculdu: .55/.50/.35 basamaklarinin ucu de .70 cikiyordu. */
.hero .hero-greet { color: var(--yan-metin-zayif); }
.hero .goal-legend > span,
.hero .ilerleme-katman > span { color: inherit; }
.hero .ilerleme-katman > span.ik-not { color: var(--yan-ink-silik); }
.hero b, .hero strong { color: var(--yan-metin); }
.hero .u-dim, .hero .u-count { color: var(--yan-metin-zayif); }
.hero .u-ok { color: #7FB394; }

/* Lacivert uzerindeki ic paneller: %3 beyaz yikama + hairline.
   Handoff'un kendi degeri (Istatistik "Seviyen" karti). */
.hero .sv-ikili > .sv-kutu,
.hero .notice {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(233, 237, 242, 0.10);
  box-shadow: none;
}
.hero .sv-kutu > b { color: var(--yan-metin); }
.hero .sv-et { color: var(--yan-metin-zayif); letter-spacing: var(--ls-kas); }
.hero .sv-alt { color: var(--yan-metin-orta); }
.hero .notice-ok {
  background: rgba(201, 138, 91, 0.09);
  border-color: rgba(201, 138, 91, 0.28);
  color: var(--yan-metin-orta);
}
.hero .notice-ok > .ic { color: var(--yan-vurgu-2); }
.hero .notice-ok b { color: var(--yan-vurgu-2); }
/* Ilerleme cubugu lacivert uzerinde: acik ray, bakir dolgu. */
.hero .goal-bar, .hero .progressbar {
  background: rgba(233, 237, 242, 0.12);
}
.hero .goal-bar > div, .hero .progressbar > div {
  background: var(--yan-vurgu); box-shadow: none;
}

/* =====================================================================
   18 · OLCUM KUTUSU (.stat-box) — handoff: kagit kart, yumusak tint cip
   Once kutunun zemini kimlik tint'i, cipi DOLU kimlik rengiydi: dort
   kutu yan yana dort renkli blok ediyordu. Handoff'ta kutu KAGIT, renk
   yalnizca 30px'lik cipte (zemin %10 tint, ikon tam renk) ve sayida
   hic renk yok — sayi murekkep renginde, 38px.
   ===================================================================== */
.stat-box {
  flex-direction: column; align-items: flex-start; gap: 9px;
  min-height: 0;
  padding: 17px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.stat-box .si {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tile-ink) 10%, transparent);
  color: var(--tile-ink);
  border: 0;
  box-shadow: none;
}
.stat-box .si .ic { width: 16px; height: 16px; }
.stat-box .sv {
  font-size: 38px; font-weight: 500; letter-spacing: -.03em;
  line-height: 1; color: var(--text);
}
.stat-box .sl {
  font-size: var(--fs-sm); color: var(--faint);
  margin-top: 0; font-weight: 400; text-transform: none; letter-spacing: 0;
}
/* Cip DOLU degil TINT oldugu icin koyu temada ikon ters cevrilmez. */
:root[data-theme="dark"] .stat-box .si,
:root[data-theme="dark"] .stat-pill .sp-ic { color: var(--tile-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-box .si,
  :root:not([data-theme="light"]) .stat-pill .sp-ic { color: var(--tile-ink); }
}

/* =====================================================================
   19 · SENARYO KARTI — handoff: kagit yuzey, YUMUSAK tint madalyon
   Once madalyon ortam renginin DOLU hali + ters ikondu: 21 kart yan yana
   21 dolu renk blogu ediyordu ve yeni kum/lacivert dilde gokkusagi gibi
   duruyordu. Handoff'ta ortam ikonu %7'lik tint zeminde tam renk.
   ===================================================================== */
.convo-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.convo-card:hover { border-color: var(--accent); }
.convo-card .cc-ic {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ortam-renk, var(--accent)) 10%, transparent);
  color: var(--ortam-renk, var(--accent));
  border: 0;
  box-shadow: none;
}
.convo-card .cc-ic .ic { width: 17px; height: 17px; }
/* Tint zemin oldugu icin koyu temada ikon TERS CEVRILMEZ. */
:root[data-theme="dark"] .convo-card .cc-ic { color: var(--ortam-renk, var(--accent)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .convo-card .cc-ic { color: var(--ortam-renk, var(--accent)); }
}

/* =====================================================================
   20 · OLCUM KUTUSU DUZENI — handoff: cip + etiket ustte, sayi altta
   Markup `<div class="si">` + saran `<div>` (sv + sl) seklinde ve OTUZ
   yerde ayni; `display: contents` ile saran kutu izgaradan cikarilir,
   boylece tek satir CSS ile handoff duzeni elde edilir ve otuz cagri
   yerinin hicbiri degismez.
   ===================================================================== */
.stat-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-2); row-gap: 9px;
  align-items: center;
}
.stat-box > div:not(.si) { display: contents; }
.stat-box .si { grid-column: 1; grid-row: 1; }
.stat-box .sl { grid-column: 2; grid-row: 1; align-self: center; }
.stat-box .sv { grid-column: 1 / -1; grid-row: 2; }

/* Cip artik TINT: murekkep ham kimlik rengi olur, koyu varyant degil.
   (Koyu varyantlar dolu zemin uzerinde beyaz ikon icin secilmisti.) */
.stat-box            { --tile-ink: var(--muted); }
.stat-box.st-blue    { --tile-ink: var(--accent); }
.stat-box.st-green   { --tile-ink: var(--ok); }
.stat-box.st-amber   { --tile-ink: var(--warn-ink); }
.stat-box.st-red     { --tile-ink: var(--bad); }
.stat-box.st-violet  { --tile-ink: var(--violet); }
/* KOYU TEMADA BIR ADIM ACIK. Olculdu: `--accent` kendi %10 tinti
   uzerinde 4,46:1 (esik 4,5) — belgeli "tint zemin" tuzagi; kimlik
   renginin tinti zemini aciyor ve ayni ailenin taban tonu esigin
   altina dusuyor. Acik temada `--accent` 4,56 ile gecer, dokunulmaz. */
:root[data-theme="dark"] .stat-box.st-blue { --tile-ink: var(--accent-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-box.st-blue { --tile-ink: var(--accent-strong); }
}

/* OLCUM KUTUSU RENKSIZ KALMISTI. Kullanici bildirdi: "sayisal verilerin
   oldugu kutular hala renksiz." Olculdu: kutu zemini SAF KAGIT
   (doygunluk 0), cip %10 alfa, ve en buyuk oge olan SAYI `--text` —
   yani kimlik rengi ekrana hic dusmuyordu.

   Uc katman birden: zemin tinti · cerceve · SAYININ KENDISI. Ilerleme
   dili korunur (bekliyor amber · calisilan mor · ogrenilmis yesil) ve
   renk yalniz birakilmaz — cipte ikon zaten var. */
.stat-box {
  background: color-mix(in srgb, var(--tile-ink) 10%, var(--card));
  border-color: color-mix(in srgb, var(--tile-ink) 26%, var(--line));
}
.stat-box .si {
  background: color-mix(in srgb, var(--tile-ink) 20%, transparent);
  color: var(--tile-ink);
}
/* SAYI kimlik renginde — kutudaki en buyuk oge o. `.sv` 29px/600, yani
   WCAG "buyuk metin"; esik 3:1. */
.stat-box .sv { color: var(--tile-ink); }
/* ETIKET BIR ADIM KOYU. Zemin artik tintli ve 12,5px'lik `--faint`
   oradan 4,32-4,40:1'e dusuyordu (olculdu, esik 4,5) — belgeli "tint
   zemin" tuzagi: kimlik renginin tinti zemini aciyor ve ayni ailenin
   silik tonu esigin altina kayiyor. */
.stat-box .sl { color: var(--muted); }
/* Tint zemin oldugu icin koyu temada ikon TERS CEVRILMEZ — dolu zemin
   varsayimiyla konmus kural burada kirilirdi. */
:root[data-theme="dark"] .stat-box .si { color: var(--tile-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-box .si { color: var(--tile-ink); }
}

/* =====================================================================
   21 · KOYU TEMADA 11px ROZET METINLERI
   Rozetlerin zemini kimlik renginin %13-16'lik tinti; koyu temada bu
   tint kartin uzerinde ZEMINI ACIYOR ve 11px murekkep esigin altina
   dusuyor (olculdu: gr-lvl A2 3,80:1, B1 3,80:1, auto-tag 4,19:1).
   Cozum tinti kaldirmak degil — kimlik oradan geliyor — murekkegi bir
   adim acmak. Yalnizca KOYU temada gecerli.
   ===================================================================== */
:root[data-theme="dark"] .gr-lvl-A1 { color: #9BBCDA; }
:root[data-theme="dark"] .gr-lvl-A2 { color: #BDAFD8; }
:root[data-theme="dark"] .gr-lvl-B1 { color: #93C4A7; }
:root[data-theme="dark"] .auto-tag  { color: #D59667; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .gr-lvl-A1 { color: #9BBCDA; }
  :root:where(:not([data-theme="light"])) .gr-lvl-A2 { color: #BDAFD8; }
  :root:where(:not([data-theme="light"])) .gr-lvl-B1 { color: #93C4A7; }
  :root:where(:not([data-theme="light"])) .auto-tag  { color: #D59667; }
}

/* =====================================================================
   22 · GIRIS EKRANI — handoff: tam boy lacivert panel + kartsiz form
   Kaynak: design_handoff_nevateach_web/Giris.dc.html

   BU EKRAN TEMADAN BAGIMSIZ — HER IKI TEMADA DA ACIK (kullanici karari).
   Bir ara koyu tema icin ayri bir yuzey merdiveni turetilmisti
   (#0A1420 / #0F1C2B / #16293C); sonuc sag yarinin da laciverde
   donmesiydi ve ekranin butun ayrimi kayboluyordu. Kural net:
   KOYU ZEMIN YALNIZCA SOL PANELDE VE "Giris yap" DUGMESINDE.

   Bu yuzden buradaki hicbir kural `--text` `--faint` `--line` `--card`
   `--page` `--accent` gibi TEMAYLA DEGISEN token kullanmaz; palet
   asagida `.auth-host` uzerinde sabitlenir ve yalnizca oradan okunur.
   ===================================================================== */
.auth-host {
  /* kum · kagit · murekkep — handoff paleti, sabit */
  --g-kum:     #F5F1EA;
  --g-kagit:   #FFFDF8;
  --g-ink:     #17222E;
  --g-etiket:  #4E5560;
  --g-sonuk:   #6C6E72;
  --g-kenar:   #E3DACB;
  --g-bakir:   #A3572E;
  --g-bakir-soft: rgba(163, 87, 46, 0.06);
  --g-bakir-line: rgba(163, 87, 46, 0.22);
  --g-bakir-alt:  rgba(163, 87, 46, 0.35);
  /* gece laciverti — YALNIZCA sol panel ve birincil dugme */
  --g-gece:    #0F1C2B;
  --g-plaka:   #16293C;
  --g-plaka-2: #21384F;
  --g-plaka-ink: #F5F1EA;
  --g-panel-ink:   #E9EDF2;
  --g-panel-parlak:#F1F5F9;
  --g-panel-govde: rgba(233, 237, 242, 0.62);
  --g-panel-not:   rgba(233, 237, 242, 0.50);
  --g-panel-cizgi: rgba(233, 237, 242, 0.12);
  --g-vurgu:   #C98A5B;
  --g-vurgu-2: #DBA277;

  padding: 0;
  /* YUKSEKLIK ZINCIRI BUYUMEYE IZIN VERMELI. `stretch` iken zincir
     `.auth-wrap` -> `.auth-split` boyunca gorunum yuksekligini DAYATIYOR,
     `min-height: 100dvh` hic devreye girmiyor ve `.auth-yan`in
     `overflow:hidden`i icerigin altini SESSIZCE kirpiyordu. */
  align-items: flex-start;
  justify-content: stretch;
  background: var(--g-kum);
  color: var(--g-ink);
}
.auth-wrap { padding: 0; align-items: stretch; }
.auth-split {
  display: flex;
  /* Dar ekranda FORM USTE gelir, pazarlama paneli altta kalir. */
  flex-wrap: wrap-reverse;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 100vh; min-height: 100dvh;
  background: var(--g-kum);
  color: var(--g-ink);
}

/* ---- SOL: gece laciverti panel ---- */
.auth-yan {
  flex: 1 1 520px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 5vw, 56px) clamp(24px, 2.6vw, 32px);
  background: var(--g-gece);
  color: var(--g-panel-ink);
}
/* ISIK KATMANI — panelin sol ustunden gelen sicak halo. Bu bir "gradyan
   renklendirme" DEGIL (o yasak): yuzeyi boyayan bir yikama degil,
   hero'daki ile ayni ATMOSFER isigi. Handoff'un kendi degeri. */
.auth-yan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 4%,
              rgba(201, 138, 91, 0.14) 0%, rgba(201, 138, 91, 0) 58%);
}
/* Sag kenarda dikey bakir sac teli — iki yariyi ayiran isaret. Duz renk
   degil: ortada belirip iki uca dogru soner, kosede sert bitmez. */
.auth-yan::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
              rgba(201, 138, 91, 0) 0%, rgba(201, 138, 91, 0.4) 45%,
              rgba(201, 138, 91, 0) 100%);
}
.auth-yan > * { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.ay-ust { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.ay-marka { display: flex; align-items: center; gap: var(--sp-3); }
.ay-marka .brand-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(201, 138, 91, 0.42);
  color: var(--g-vurgu); box-shadow: none;
}
/* MARKA GLIFI DOLU — `stroke-width` KALDIRILDI. Eski logo cizgiydi ve
   burada 1.7'ye kisiliyordu; yeni glif `fill` ile ciziliyor, stroke yok.
   Kalsaydi hicbir sey yapmayan ama "burada bir cizgi ayari var" diye
   okunan olu bir kural olurdu. */
.ay-marka .brand-logo svg { width: 18px; height: 18px; }
.ay-marka span {
  font-size: 16px; font-weight: 500; line-height: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g-panel-ink);
}
/* Manset kendi kabinda: slogan -> alt metin 22px. Ustteki `.ay-ust`
   gap'i (28-44px) marka satiri ile manset ARASINA duser. */
.ay-bas { max-width: 520px; }
.ay-slogan {
  font-size: clamp(26px, 2.8vw, 42px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.025em;
  margin: 0; color: var(--g-panel-parlak);
  text-wrap: balance;
}
.ay-alt {
  margin: 12px 0 0; font-size: var(--fs-md);
  color: var(--g-panel-govde);
  line-height: 1.55; max-width: 46ch;
  text-wrap: pretty;
}

/* ---- OZELLIKLER: 2x2 kutu DEGIL, ust cizgili satir listesi ----
   Handoff'ta her ozellik kendi satirinda ve ayrimi yalnizca ustteki
   hairline tasiyor. Lacivert zeminde kutu yuzeyi fazladan bir kat
   olurdu; liste panelin sessizligini bozmuyor. */
.ay-kutular { display: flex; flex-direction: column; gap: normal; }
.ay-kutu {
  /* `flex-direction: row` ACIKCA YAZILIR — eski 2x2 kutu kurali (dosyanin
     yukarisinda) `column` set ediyor ve bu kural onu SIFIRLAMIYORDU:
     cip ile govde alt alta diziliyor, satir 80px yerine 128px oluyordu.
     Dort satirda 192px fazla; 1440x900'de sayfayi kaydiran seyin tamami
     buydu (olculdu: panel 1081, prototipte 900). */
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-3);
  padding: 11px 0;
  background: none; border: 0; border-top: 1px solid var(--g-panel-cizgi);
  border-radius: 0; box-shadow: none;
}
/* Son satirin ALTINDA da cizgi var — liste alttan da kapanir. */
.ay-kutu:last-child { border-bottom: 1px solid var(--g-panel-cizgi); }
.ay-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ay-ic {
  flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(201, 138, 91, 0.10);
  border: 1px solid rgba(201, 138, 91, 0.30);
  color: var(--g-vurgu-2);
}
.ay-ic .ic { width: 14px; height: 14px; stroke-width: 1.6; }
.ay-ad {
  font-size: var(--fs-kontrol); font-weight: 500; line-height: normal;
  color: var(--g-panel-ink);
}
.ay-not {
  font-size: var(--fs-base); color: var(--g-panel-not);
  line-height: 1.45;
}

/* ---- OLCU SERIDI: bakir rakam + kas etiketi ---- */
.ay-olcu {
  display: flex; flex-wrap: wrap;
  column-gap: clamp(24px, 3vw, 40px); row-gap: var(--sp-3);
  padding-top: 0; border-top: 0;
}
.ay-olcu > div { display: flex; flex-direction: column; gap: var(--sp-1); }
.ay-olcu .ay-sayi {
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 500;
  line-height: 1; letter-spacing: normal; color: var(--g-vurgu);
  font-variant-numeric: tabular-nums;
}
/* CAKISMA — handoff etiketi `rgba(233,237,242,.45)` diyor; lacivert
   zeminde olculdu 3,95:1 ve esik 4,5 (11px metin). Hue korunur,
   parlaklik ayarlanir: .55 -> 5,25:1. */
.ay-olcu .ay-etiket {
  font-size: var(--fs-xs); line-height: normal;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(233, 237, 242, 0.55);
}

/* ---- SAG: KUM ZEMIN UZERINDE KARTSIZ FORM ----
   `.auth-card` yalnizca ORTALAYAN kap; icerik sutunu `.auth-sutun`.
   Kart YOK: zemin, kenar, radius, golge hepsi kaldirildi. */
.auth-card {
  flex: 1 1 480px;
  width: auto; max-width: none;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 4vw, 48px);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--g-ink);
}
.auth-sutun {
  width: 100%; max-width: 380px;
  animation: auth-belir var(--mo-yavas) var(--mo-cikis) both;
}
/* Giris animasyonu tiklama efekti DEGIL, ekranin acilisi. */
@keyframes auth-belir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.auth-baslik {
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 500;
  line-height: 1.12; letter-spacing: -.02em; margin: 0;
  color: var(--g-ink);
}
.auth-baslik-alt {
  font-size: var(--fs-kontrol); line-height: 1.5; color: var(--g-sonuk);
  margin: 8px 0 20px; text-wrap: pretty;
}
/* Kayit ekraninda aciklama iki satir; handoff'ta alt bosluk 32px. */
.auth-baslik-alt.kisa { margin-bottom: 18px; }
.auth-brand { border-bottom: 0; padding-bottom: 0; }

/* ---- FORM ---- */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .fix-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-form .fix-field > span:not(.auth-sifre) {
  font-size: 13px; font-weight: 500; line-height: normal;
  letter-spacing: 0; text-transform: none; color: var(--g-etiket);
}
.auth-form input[type=text],
.auth-form input[type=password],
.auth-form input[type=email] {
  flex: 0 0 auto; min-width: 0;
  height: 46px; padding: 0 14px;
  background: var(--g-kagit); border: 1px solid var(--g-kenar);
  border-radius: 12px; font-size: var(--fs-kontrol); color: var(--g-ink);
}
.auth-form input::placeholder { color: #AFAAA2; }
.auth-form input:focus {
  outline: none; border-color: var(--g-bakir);
  box-shadow: 0 0 0 3px rgba(163, 87, 46, 0.11);
}

/* ---- SIFRE ALANI: girdinin ICINDE "Goster / Gizle" ---- */
.auth-sifre { position: relative; display: block; }
.auth-form .auth-sifre input { padding-right: 74px; }
.auth-goster {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 32px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 9px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--g-bakir); cursor: pointer;
  transition: background var(--mo-hizli) var(--mo-cikis);
}
.auth-goster:hover { background: rgba(163, 87, 46, 0.07); }
.auth-goster:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(163, 87, 46, 0.11); }
/* DOKUNMA HEDEFI — gorunum 36px (handoff degeri), vurus alani 44px.
   `.linkish`teki belgeli desen: gorunmez `::after` serilir. */
.auth-goster::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}

/* ---- GOOGLE + AYRAC ---- */
.btn-google {
  width: 100%; height: 48px; border-radius: 12px; gap: 10px;
  background: var(--g-kagit); border: 1px solid var(--g-kenar);
  font-size: var(--fs-kontrol); font-weight: 500; color: var(--g-ink);
  box-shadow: none;
}
.btn-google:hover {
  border-color: #CCBBA4;
  box-shadow: 0 6px 18px -10px rgba(15, 28, 43, 0.35);
}
.google-slot { min-height: 48px; }
/* CAKISMA — handoff "veya" etiketini `#9A968F` yaziyor; kum zeminde
   olculdu 2,65:1. `#6C6E72` ayni ailede, 4,54:1. */
.auth-or {
  margin: 16px 0; gap: 12px;
  font-size: var(--fs-xs); font-weight: 400; line-height: normal;
  letter-spacing: var(--ls-kas); color: var(--g-sonuk);
}
/* Hairline SOLAR — SPEC 3.11'in bolge basligi cizgisiyle ayni desen. */
.auth-or::before, .auth-or::after {
  background: linear-gradient(90deg, #DFD5C4, rgba(223, 213, 196, 0));
}

/* ---- BIRINCIL DUGME: LACIVERT (bakir DEGIL) ----
   Handoff'un Giris ekraninda tek bir bakir dugme yok (grep: 0); bakir
   birincil Bugun'un hero'su ve Odak modunun "Kontrol Et"i. */
.auth-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; margin-top: var(--sp-1);
  padding: 0 var(--sp-5);
  background: var(--g-plaka); border: 0; border-radius: 12px;
  font-family: inherit; font-size: var(--fs-kontrol); font-weight: 600;
  letter-spacing: .01em; color: var(--g-plaka-ink); cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(15, 28, 43, 0.85);
  transition: background var(--mo-hizli) var(--mo-cikis),
              box-shadow var(--mo-hizli) var(--mo-cikis);
}
.auth-submit:hover {
  background: var(--g-plaka-2);
  box-shadow: 0 16px 30px -16px rgba(15, 28, 43, 0.9);
}
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(163, 87, 46, 0.35); }
/* Harf araligi YALNIZCA giris ve kayit dugmesinde. */
#unuttumForm .auth-submit, #yenileForm .auth-submit { letter-spacing: normal; }

/* ---- HATA KUTUSU: bakir bilgi kutusu, kirmizi serit DEGIL ----
   Kirmizi bu dilde gercek YANLIS CEVABA ayrilmis (ilerleme dili);
   "e-posta ve sifre gerekli" bir hata degil, eksik bilgi. */
.auth-err {
  display: none; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--g-bakir-soft);
  border: 1px solid var(--g-bakir-line);
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--g-bakir);
  text-wrap: pretty;
}
.auth-err .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ---- ALT SATIRLAR ---- */
.auth-forgot { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth-forgot .linkish {
  font-size: var(--fs-base); font-weight: 400; line-height: normal;
  color: var(--g-bakir); white-space: nowrap;
  text-underline-offset: 3px;
  text-decoration-color: var(--g-bakir-alt);
}
.auth-forgot .linkish:hover { text-decoration-color: var(--g-bakir); opacity: 1; }
.auth-switch {
  margin-top: 18px; text-align: start;
  font-size: var(--fs-base); line-height: normal; color: var(--g-sonuk);
}
.auth-switch .linkish {
  font-size: var(--fs-base); font-weight: 500; line-height: normal;
  color: var(--g-bakir); text-underline-offset: 3px;
}

/* ---- "GONDERILDI" DURUMU ---- */
.auth-onay {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(163, 87, 46, 0.08);
  border: 1px solid rgba(163, 87, 46, 0.18);
  color: var(--g-bakir); margin-bottom: 24px;
}
.auth-onay .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.auth-gonderi {
  margin: 12px 0 0; font-size: 15.5px; line-height: 1.65;
  color: var(--g-sonuk); text-wrap: pretty;
}
.auth-gonderi b { font-weight: 600; color: var(--g-ink); }
.auth-gonderi-not {
  margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: #918E8B;
}
.auth-gonderi-not + .auth-switch { margin-top: 32px; }

/* Bilgi paneli (Google kurulmamis / IP kokeni) da kum dilinde kalir. */
.auth-note {
  background: var(--g-kagit); border: 1px solid var(--g-kenar);
  border-radius: 12px; color: var(--g-sonuk);
}
.auth-note b { color: var(--g-ink); }

/* ---- KISA EKRAN: SAYFA KAYMAZ, BOSLUKLAR KUCULUR ----
   Prototipin kendisi kisa gorunumde kayiyor (olculdu: 1366x768'de
   114px, 1280x720'de 155px). Kullanici karari: KAYMA OLMAYACAK.
   Punto ve yerlesim DEGISMEZ — yalnizca dikey bosluklar kisilir; boylece
   1440x900 ve ustu prototiple birebir kalir (orada panel tam 900).
   Genislik kosulu SART: <=860px'te yerlesim zaten tek sutuna dusuyor ve
   orada kaydirma dogru davranis. */
@media (min-width: 861px) and (max-height: 880px) {
  .auth-yan {
    padding: 40px clamp(22px, 5vw, 64px) 32px;
    gap: 32px;
  }
  .ay-ust { gap: 28px; }
  .ay-kutu { padding: 14px 0; }
  .auth-card { padding: 40px clamp(20px, 5vw, 56px); }
}
@media (min-width: 861px) and (max-height: 790px) {
  .auth-yan {
    padding: 32px clamp(22px, 5vw, 64px) 24px;
    gap: 24px;
  }
  .ay-ust { gap: 20px; }
  .ay-kutu { padding: 12px 0; }
  .ay-alt { margin-top: 16px; }
  .ay-olcu { row-gap: 16px; }
  .auth-card { padding: 32px clamp(20px, 5vw, 56px); }
}

/* DAR EKRAN: lacivert panel ALTA duser (wrap-reverse), gizlenmez. */
@media (max-width: 860px) {
  /* SIRA `order` ILE PEKISTIRILIR. `wrap-reverse` yalnizca satirlar
     gercekten sarinca ters cevirir; olculdu — 390px'te sutuna dusen
     yerlesimde panel yine USTTE kaliyordu. Telefonda tek is giris
     yapmak; form once gelir, panel altinda okunur. */
  .auth-split {
    flex-direction: column; flex-wrap: nowrap;
    width: 100%; min-height: 100vh; min-height: 100dvh;
  }
  .auth-card { order: 1; flex: 0 0 auto; }
  .auth-yan  { order: 2; flex: 0 0 auto; display: flex; }
  .auth-yan::after { display: none; }
  .auth-wrap { padding: 0; }
}

/* DOKUNMA HEDEFI — satir ici baglantilar 21px olculmustu; telefonda
   40px kurali bunlari da kapsar. 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);
  }
}

/* MARKA BLOGU HER GENISLIKTE GIZLI — lacivert panel telefonda da
   duruyor; formun ustundeki ikinci marka blogu ayni adi ikinci kez
   yaziyor ve basligin uzerine biniyordu (olculdu, 390px).
   `.auth-brand.durum` HARIC: o "Gonderildi" durumunu bildiriyor. */
.auth-split .auth-brand:not(.durum) { display: none; }

/* UST SERIT HANDOFF'TA IKI PARCALI: baslik blogu + istatistik seridi.
   Bizde onlerinde iki dugme daha vardi (menu tetigi + geri) ve kullanici
   ekran goruntusuyle bildirdi; `kabuk-agac.js` olctu: prototipte 2
   cocuk, bizde 3.
     - GERI: tarayicinin/telefonun geri dugmesi ayni yolu kullaniyor
       (history.pushState / popstate), yani islev kaybolmuyor.
     - MENU TETIGI: kenar menuyu daraltma bu dugmeyle yapiliyordu;
       handoff'un 18 ekraninin hicbirinde daraltma yok.
   JS'e DOKUNULMADI — dugumler duruyor, yalnizca masaustunde cizilmiyor.
   Telefonda zaten gizliydiler (<=940px blogu). */
@media (min-width: 941px) {
  .topbar > .rail-toggle,
  .topbar > .geri-btn { display: none; }
}

/* TAM EKRAN TURDAN CIKIS — Odak modu basligindaki x'in karsiligi.
   Ders ve Dinleme `#view`in tamamini devraliyor; serit ekranda olmadigi
   icin gorunur bir cikis SART. */
.progress-info > .oturum-cik {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-right: 10px;
  background: none; border: 1px solid var(--line);
  border-radius: 10px; color: var(--faint); cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.progress-info > .oturum-cik:hover { border-color: var(--accent); color: var(--accent); }
.progress-info > .oturum-cik:focus-visible { outline: none; box-shadow: var(--odak); }
.progress-info > .oturum-cik .ic { width: 17px; height: 17px; stroke-width: 2.2; }
@media (max-width: 940px) {
  .progress-info > .oturum-cik { width: 40px; height: 40px; }
}

/* =====================================================================
   KOMPAKT TUR BASLIGI — hero'nun tur sekmelerindeki karsiligi
   Kaynak: Bugun.dc.html `<sc-if off_ders>` · SPEC 5.1
   Tek satir: "< Ders" · ayrac · tur adi + sayac · cubuk · dogru/yanlis.
   ===================================================================== */
.tur-baslik {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(12px, 1.8vw, 18px);
  padding: 13px clamp(14px, 1.8vw, 18px);
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line-kart);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.tur-baslik .tb-geri {
  flex: none; white-space: nowrap;
  height: 40px; padding: 0 13px 0 11px; border-radius: 11px;
  font-size: 13px;
}
/* Set'te sola bakan chevron YOK; `chevron` asagi bakar ve dondurulur —
   "ikonu yeniden cizme" kuralinin belgeli cozumu. */
.tur-baslik .tb-ok-sol { display: inline-flex; transform: rotate(90deg); }
.tur-baslik .tb-ok-sol .ic { width: 15px; height: 15px; }
.tb-ayrac { flex: none; width: 1px; height: 24px; background: var(--line-kart); }
.tb-ad {
  flex: none; display: flex; align-items: baseline; gap: 9px;
  white-space: nowrap;
}
.tb-ad > b {
  font-size: 15.5px; font-weight: 500; letter-spacing: -.012em; color: var(--text);
}
.tb-sayac {
  font-size: 13px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.tb-bar {
  flex: 1 1 130px; min-width: 70px; display: block;
  height: 6px; border-radius: 3px; background: var(--line-zayif); overflow: hidden;
}
.tb-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.tb-say {
  flex: none; display: flex; align-items: center; gap: 11px;
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tb-say > span { display: flex; align-items: center; gap: 4px; }
.tb-ok  { color: var(--ok-strong); }
.tb-bad { color: var(--bad); }
.tb-say .ic { width: 13px; height: 13px; stroke-width: 2.8; }

/* AYNI BILGI IKI KEZ GOSTERILMEZ (SPEC yasak 10). Tur basligi sayaci ve
   ilerlemeyi zaten tasiyor; modulun kart ici ilerleme satiri YALNIZCA
   yuvada gizlenir — tam ekran turlarda (Tekrar, dinleme turu) duruyor. */
.tur-yuva > .progress-info,
.tur-yuva > .progressbar { display: none; }

/* =====================================================================
   BUGUN EKRANI — HANDOFF'LA BIREBIR
   Kaynak: design_handoff_nevateach_web/Bugun.dc.html · prototip gercek
   tarayicida acilip DEGERLERI okundu (scratchpad/kiyas.js), goz karari
   yok. Bu blok token katmanindan SONRA gelir ve prototipte YAZILI olan
   degeri aynen yazar; token'a esitse token kullanilir, degilse degerin
   kendisi (sozlesme prototipte).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · UST SERIT HAPI — handoff: ETIKETSIZ, r10
   Prototipte hap yalnizca IKON + DEGER tasiyor; "ders seviyesi",
   "calisilan" gibi aciklamalar `title` ipucunda. Bes hap yan yana bes
   aciklama yaziyordu ve serit basligin agirligini asiyordu.
   --------------------------------------------------------------------- */
.stat-pill {
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.stat-pill .sp-ic { color: var(--muted); }
.stat-pill .sp-ic .ic { width: 15px; height: 15px; }
.stat-pill .sp-tx b { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* Etiket gizli DEGIL, HIC CIZILMIYOR (views.js `pill()` artik title'a
   koyuyor). Kural yine de duruyor ki eski isaretleme kalirsa bozmasin. */
.stat-pill .sp-tx i { display: none; }
.stat-pill .sp-dim { color: var(--faint); font-weight: 400; font-size: 12.5px; }

/* ---------------------------------------------------------------------
   2 · KENAR MENU — sekme r10, alt blok ayracli
   --------------------------------------------------------------------- */
.tab { border-radius: 10px; }
.theme-btn {
  height: 40px; padding: 0 11px;
  border-radius: 10px;
  border: 1px solid rgba(233, 237, 242, 0.12);
  font-size: 13px;
  color: rgba(233, 237, 242, 0.68);
}
.theme-btn:hover { border-color: rgba(201, 138, 91, 0.5); color: var(--yan-metin); background: none; }
.sidebar-foot {
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(233, 237, 242, 0.1);
}
.sidebar .who {
  gap: 9px; padding: 0 3px;
  background: none; border: 0; border-radius: 0;
}
.sidebar .who-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yan-vurgu); color: var(--yan-bg);
  font-size: 12.5px; font-weight: 600;
}
.sidebar .who-name { font-size: 13.5px; color: var(--yan-metin); font-weight: 400; }
.sidebar .who .linkish {
  padding: 6px 7px; border-radius: 7px;
  font-size: 12.5px; color: rgba(233, 237, 242, 0.5);
}
.sidebar .who .linkish:hover { color: var(--yan-vurgu-2); background: var(--yan-bg2); }
/* YONETIM SEKMESI AYRI GRUP — prototipte listenin sonunda, ustunde
   1px'lik ayrac var. Sekme sirasi views.js'te; ayrac CSS'ten gelir. */
.tabs > .tab[data-route="admin"] {
  margin-top: 13px;
  position: relative;
}
.tabs > .tab[data-route="admin"]::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: -8px;
  height: 1px; background: rgba(233, 237, 242, 0.1);
}

/* ---------------------------------------------------------------------
   3 · TUR SERIDI — handoff: h44, r12, PASIF SAYDAM
   Acik olan tur lacivert DOLU (uzerinde uzun, yumusak bir golge);
   otekiler saydam zemin + var(--line) hairline. Bizde pasifler kagit
   yuzeydeydi ve acik olan hic isaretlenmiyordu.
   --------------------------------------------------------------------- */
.tur-serit { gap: 7px; padding: 4px 0 6px; }
.tur-serit > .btn {
  height: 44px;
  padding: 0 15px;
  gap: 7px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  box-shadow: none;
}
.tur-serit > .btn .ic { width: 15px; height: 15px; }
.tur-serit > .btn:hover:not(:disabled) {
  border-color: var(--accent); background: var(--card); color: var(--accent);
}
/* ACIK TUR — lacivert dolu. `.ts-acik` views.js'te veriliyor. */
.tur-serit > .btn.ts-acik {
  background: var(--yan-bg2);
  border-color: var(--yan-bg2);
  color: var(--yan-metin);
  font-weight: 500;
  border-width: 0;                  /* prototipte acik hapin kenari yok */
  box-shadow: 0 8px 20px -12px rgba(15, 28, 43, 0.9);
}
.tur-serit > .btn.ts-acik:hover { background: var(--yan-bg2); border-color: var(--yan-bg2); color: var(--yan-metin); }
.tur-serit > .btn.ts-acik .ic { color: var(--yan-vurgu-2); }
/* ZORUNLU TURUN ISARETI: cerceve DEGIL, kucuk bakir nokta.
   Prototipte gunun gorevi bir NOKTA ile isaretli; bizde bakir cerceve +
   tint zemin vardi ve serit iki farkli dille konusuyordu. */
.tur-serit > .ts-cekirdek,
.tur-serit > .ts-gorev {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-weight: 400;
}
.tur-serit > .ts-cekirdek.ts-ok,
.tur-serit > .ts-gorev.ts-ok {
  border-color: var(--line);
  background: transparent;
}
.ts-gorev-nokta {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.tur-serit > .btn.ts-acik .ts-gorev-nokta { background: var(--yan-vurgu-2); }
/* YAPILDI: yesil dolu daire DEGIL, sade bir onay isareti. */
.ts-onay {
  width: auto; height: auto; margin-left: 0;
  background: none; color: var(--ok);
}
.ts-onay .ic,
.tur-serit > .btn .ts-onay .ic { width: 13px; height: 13px; }
.tur-serit > .btn.ts-acik .ts-onay { color: var(--ok); }

/* ---------------------------------------------------------------------
   4 · KELIME KARTI — handoff: 162px izgara, r10, kompakt
   --------------------------------------------------------------------- */
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
  gap: 8px;
}
.word-grid > * { flex: none; min-width: 0; }
.word-card {
  gap: 4px;
  padding: 10px 11px;
  background: var(--card);
  border: 1px solid var(--line-ic);
  border-radius: 10px;
  box-shadow: none;
}
/* KUTUCUK ZEMINI KENDI KARTININ TERSI. Prototipte cerceveli kartin
   (zeminsiz) icindeki kutucuklar KAGIT, kagit kartin icindekiler KUM.
   Ikisine de ayni rengi vermek kutucugu zemine yapistiriyordu. */
.card:not(.sessiz) > .word-grid > .word-card { background: var(--card2); }
.word-card .wc-top { gap: 6px; min-height: 0; }
.word-card .wc-en {
  font-size: 14.5px; font-weight: 600; line-height: normal;
  letter-spacing: 0; color: var(--text);
}
/* Govde satir yuksekligi (1,6) kompakt kartta uc satiri 10px sisiriyordu.
   Prototipte bu metinler `normal` — Geist'te ~1,307. Olcekte 1,3
   basamagi YOK; ara deger uydurmak yerine ayni talimat yaziliyor
   (`normal` bir sayi degil, yazi tipinin kendi onerisi). */
.word-card .wc-tr { font-size: 13px; line-height: normal; color: var(--muted); margin-top: 0; }
.word-card .wc-meta {
  font-size: 11px; line-height: normal; color: var(--faint);
  margin-top: auto;
  /* DOLGU YOK — kartin kendi 4px'lik gap'i disinda hicbir bosluk.
     Genel `.wc-meta` kurali 12px'lik `padding-top` tasiyor ve o kural
     handoff'tan ONCE yazilmisti; olculdu (1440px): kart 134px, prototip
     80px. 12px'i eklemek satiri asagi itiyor ve kart "kaba" duruyordu.
     `margin-top: auto` KALIR — ayni satirdaki kartlarin meta cizgisi
     hizali olsun (izgara zaten esit yukseklige geriyor). */
  padding-top: 0;
}
/* OKUNUS BIR ALT YAZIDIR, BASLIK DEGIL. Paylasilan `.tel-oku` 12,5px/600
   ve o dogru — anlam penceresinde okunus ile IPA'yi ayiran sey punto ve
   KALINLIK. Ama kelime kartinda IPA yok, alt satirda ANLAM var (13px/400):
   okunus anlamdan daha kalin ciziliyor, yani okuma yardimi kelimenin
   karsiligini bastiriyordu. Kartta sozluk duzeni gecerli — kelime,
   okunusu (fisilti), anlami. */
.word-card .telaffuz { margin: 0; }
.word-card .tel-oku {
  font-size: var(--fs-xs); font-weight: 500;
  /* `normal` — kartin oteki iki satiri gibi. Govde olcegi (1,6) burada
     11px'lik satiri 17,6px'e cikariyordu; agac kiyasi yakaladi. */
  line-height: normal;
  letter-spacing: 0.2px; color: var(--okunus);
}

/* SOZCUK TURU ROZETI — kucuk harf, 10px, r4, yumusak zemin.
   Once BUYUK HARF + 22px yuksekliginde bir hapti; prototipte kelimenin
   yanina ilisen kucuk bir etiket. */
.pos-badge {
  height: auto;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   5 · GUNUN PLANI — satir ayracli liste, 22px dairesel numara
   --------------------------------------------------------------------- */
.plan-list { gap: 2px; }
.plan-list li {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line-zayif);
}
.plan-list li:last-child { border-bottom: 0; }
/* CIP ZEMININDE MUREKKEP --muted. Prototipte #6C6E72 ama o ton
   #F0EAE0 cipin uzerinde 4,27:1 (esik 4,5) — bir adim koyu. */
.plan-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--cip-yuzey);
  color: var(--muted);
  font-size: 11.5px; font-weight: 600; line-height: normal;
}
li.plan-done { background: none; }
li.plan-done .plan-check { background: rgba(63, 107, 82, 0.14); color: var(--ok); border: 0; }
/* TAMAMLANDI ISARETI IKON — prototipte tipografik bir isaret degil,
   12px'lik cizgi ikonu. Numarali kardesleriyle ayni cip icinde durur. */
.plan-check .ic { width: 12px; height: 12px; }
.plan-body b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: normal; }
/* Madde basligindaki tur ikonu 13px ve BAKIR; tamamlanan maddede
   basligin sessiz tonunu devralir. */
.plan-body b > .ic { width: 13px; height: 13px; color: var(--accent); }
li.plan-done .plan-body b > .ic { color: inherit; }
.plan-body span { font-size: 12.5px; line-height: normal; color: var(--faint); }
/* TAMAMLANAN MADDE USTU CIZILI — prototipin isareti bu. Renk tek basina
   birakilmiyor: hem ustu cizili hem soluk hem onay cipi. */
li.plan-done .plan-body b {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--cizik);
}
li.plan-done .plan-body span { color: var(--faint); }
/* Satirin kendi dugmesi — kucuk, kum zeminli. */
.plan-list li > .btn {
  height: 36px; padding: 0 12px;
  border-radius: 9px;
  background: var(--page);
  border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
}
.plan-list li > .btn .ic { width: 11px; height: 11px; }
.plan-list li > .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--page); }

/* ---------------------------------------------------------------------
   6 · SON 7 GUN SERIDI — kas etiketi + esit bolunmus hucreler
   --------------------------------------------------------------------- */
.hafta-kapsam {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-zayif);
}
.hafta-kapsam + .hafta-kapsam { margin-top: 8px; padding-top: 0; border-top: 0; }
.hk-et {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  line-height: normal; color: var(--faint); font-weight: 400;
}
.hk-satir { display: flex; gap: 4px; }
.hk-gun {
  flex: 1; display: grid; place-items: center;
  width: auto; height: 28px; border-radius: 7px;
  background: var(--cip-yuzey); color: var(--ikon-sessiz);
  border: 0; box-shadow: none;
}
.hk-gun.hk-ok { background: rgba(63, 107, 82, 0.12); color: var(--ok); }
/* BUGUN: tam kenar cizgisi (prototip), ic golge degil. */
.hk-gun.hk-bugun { border: 1px solid var(--accent); box-shadow: none; color: var(--accent); }
.hk-gun.hk-ok.hk-bugun { color: var(--ok); }
.hk-gun .ic { width: 13px; height: 13px; }

/* SERI PANELI — uyari paneliyle AYNI kum yuzey. Once amber tint +
   amber murekkepti; prototipte gunun plani kartinin dibinde duran bu
   kutu, yukaridaki uyari kutusuyla ayni dili konusuyor. */
.plan-streak {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--uyari-yuzey);
  border: 1px solid var(--uyari-cizgi);
  color: var(--text);
  font-size: 13px; font-weight: 400; line-height: 1.45;
}
.plan-streak > .ic { flex: none; margin-top: 1px; color: var(--accent); }
.plan-streak .ps-govde {
  min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.plan-streak .ps-olcut {
  margin-top: 0; font-size: var(--fs-xs); font-weight: 400;
  color: var(--faint); opacity: 1;
}

/* ---------------------------------------------------------------------
   7 · SAG SUTUN — yapiskan, kendi karti
   --------------------------------------------------------------------- */
@media (min-width: 941px) {
  .split-21 > .col:last-child { position: sticky; top: 88px; align-self: start; }
}

/* ---------------------------------------------------------------------
   8 · SAYFA DIBI — zeminsiz, tek satir
   --------------------------------------------------------------------- */
.app-foot {
  gap: 9px;
  padding: 16px clamp(14px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
  background: none;
  color: var(--faint);
  font-size: 12.5px;
}
.app-foot .af-mark { width: 20px; height: 20px; color: var(--accent); }
.app-foot .af-ad { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.app-foot .foot-note { margin-left: 0; text-align: left; font-size: 12.5px; color: var(--faint); }

/* ---------------------------------------------------------------------
   9 · KART BASLIGI — h2 17px/500 + 13px sayac; aciklama 13px
   --------------------------------------------------------------------- */
.card h2 { gap: 8px; margin-bottom: 0; font-weight: 500; }
.card h2 > .ic { width: 16px; height: 16px; color: var(--accent); }
.btn > .ic { width: 14px; height: 14px; }
.hero .act .btn > .ic { width: 15px; height: 15px; }
.notice > .ic, .plan-streak > .ic { width: 16px; height: 16px; }
.card > h2 { line-height: normal; }
/* SESSIZ KART sessiz bir ikon tasir. Prototipte "Bugunun kelimeleri"
   (cerceveli, okunacak liste) gri ikonlu; "Calisma listen" ve "Gunun
   plani" (kagit, isi olan kartlar) bakir. Ayrimi renk tasiyor. */
.card.sessiz > h2 > .ic { color: var(--ikon-sessiz); }
.card h2 .u-count { font-size: 13px; color: var(--faint); font-weight: 400; }
.card > .sub { margin: 6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--faint); }
.card.sessiz > h2 { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   10 · IKI SUTUN — handoff olculeri (1440px'te 697 / 419)
   Prototip: wrapper flex/wrap/gap:14/align-items:flex-start,
   sol `flex:2 1 460px`, sag `flex:1 1 300px`. Bizde `2fr 1fr` izgara
   vardi ve 740/370 cikiyordu; kelime izgarasi da bu yuzden 3 yerine
   4 sutuna bolunuyordu (olculdu: kart 179px, prototipte 213px).
   --------------------------------------------------------------------- */
@media (min-width: 941px) {
  .two-col.split-21 {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 14px;
    grid-template-columns: none;
  }
  .split-21 > .col:first-child {
    flex: 2 1 460px; min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
  }
  .split-21 > .col:first-child > .card { margin-bottom: 0; }
  .split-21 > .col:last-child { flex: 1 1 300px; min-width: 0; }
}

/* ---------------------------------------------------------------------
   11 · KART — handoff'ta IKI varyant
   1) KAGIT: padding 20, var(--card), 1px var(--line-kart), r16, iki katmanli golge
      (Gunun plani, Calisma listen)
   2) CERCEVE: padding 20, ZEMINSIZ, 1px var(--line-kart), r16, GOLGESIZ
      (Bugunun kelimeleri) — `.card.sessiz` tam olarak bu.
   Once `.sessiz` hicbir sey tasimiyordu (dolgu 0, kenar 0).
   --------------------------------------------------------------------- */
:root { --card-pad: 20px; --line-kart: #E9E1D4; }
/* ODAK MODU tokenlari — `mobil/Mobil - Odak Modu.dc.html`.
   Ucu de TINT: cevap alani bakir, sonuc bandi yesil/kirmizi. Koyu temada
   ayni rolun ACIK tonundan turetilir (belgeli "tint zemin" kurali:
   koyu yuzeyde koyu tint gorunmez). */
:root {
  --od-cevap-bg:   rgba(163, 87, 46, .05);
  --od-cevap-line: rgba(163, 87, 46, .28);
  --od-ok-bg:      rgba(63, 107, 82, .08);
  --od-ok-line:    rgba(63, 107, 82, .28);
  --od-bad-bg:     rgba(154, 49, 49, .06);
  --od-bad-line:   rgba(154, 49, 49, .26);
  --od-oku-bg:     #F0EAE0;
  --od-durum-line: #E7E0D3;
  /* MAVI TINTIN MUREKKEBI. Uc yerde `var(--st-blue-ink, #3A5A7A)` diye
     yaziliydi ve token HIC TANIMLI DEGILDI: yedek deger iki temada da
     kullaniliyor, yani koyu temada koyu tint uzerine koyu murekkep
     dusuyordu (seviye hapi okunmuyordu — ekran goruntusuyle yakalandi).
     Belgeli "tint zemin" tuzagi. */
  --st-blue-ink:   #3A5A7A;
}
:root[data-theme="dark"] {
  --st-blue-ink:   #8FB0CE;
  --od-cevap-bg:   rgba(201, 138, 91, .09);
  --od-cevap-line: rgba(201, 138, 91, .34);
  --od-ok-bg:      rgba(127, 179, 148, .10);
  --od-ok-line:    rgba(127, 179, 148, .30);
  --od-bad-bg:     rgba(239, 165, 165, .09);
  --od-bad-line:   rgba(239, 165, 165, .28);
  --od-oku-bg:     #1E3247;
  --od-durum-line: #24384E;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --od-cevap-bg:   rgba(201, 138, 91, .09);
    --od-cevap-line: rgba(201, 138, 91, .34);
    --od-ok-bg:      rgba(127, 179, 148, .10);
    --od-ok-line:    rgba(127, 179, 148, .30);
    --od-bad-bg:     rgba(239, 165, 165, .09);
    --od-bad-line:   rgba(239, 165, 165, .28);
    --od-oku-bg:     #1E3247;
    --od-durum-line: #24384E;
    --st-blue-ink:   #8FB0CE;
  }
}
:root[data-theme="dark"] { --line-kart: #24384E; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --line-kart: #24384E; }
}
.card { padding: var(--card-pad); border-color: var(--line-kart); margin-bottom: 14px; }
.card.sessiz {
  padding: var(--card-pad);
  background: none;
  border: 1px solid var(--line-kart);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.modal-card, .dd-panel { border-color: var(--line-kart); }
/* Genis ekranda kart dolgusu BUYUMEZ — prototipte her genislikte 20px. */
@media (min-width: 1440px) { :root { --card-pad: 20px; } }
@media (min-width: 1920px) { :root { --card-pad: 20px; } }


/* LACIVERT YUZEYDE METIN — `.card > .sub` kurali bu bloktan SONRA
   geldigi icin hero'nun aciklamasini kum temasina cekiyordu (olculdu:
   Istatistik "Seviyen" kartinda 3,37:1). Vitrin kurallari en sonda. */
.hero > .sub, .hero p.sub { color: var(--yan-metin-orta); }
.hero h2 .u-count { color: var(--yan-metin-zayif); }
.hero .card { border-color: rgba(233, 237, 242, 0.10); }

/* TINT ZEMINLI KUCUK METIN — `.ex-kelime` (%13 alfali mavi) ve
   `.zone-empty` (%10 bakir) uzerinde `--faint` 4,34/4,40 olculdu.
   Bu iki yuzeyde murekkep bir adim koyu. */
.ex-kelime, .ex-kelime .ex-ayrac, .ex-kelime i, .ex-kelime-say { color: var(--muted); }
.zone-empty { color: var(--muted); }

/* SOZCUK TURU ROZETI TELEFONDA 11px. Masaustunde handoff'un 10px'i
   gecerli; telefon taramasi 11px altini "okunmayan" olarak bildiriyor
   ve o kural olculmus bir duzeltmeydi (CLAUDE.md). */
@media (max-width: 940px) {
  .pos-badge { font-size: var(--fs-xs); }
}

/* ACIK TUR HAPI KOYU TEMADA — `--yan-bg2` (#16293C) orada KART rengiyle
   ayni; hap zeminden ayrismiyordu. Bir basamak yukarisi (menudeki aktif
   sekme yuzeyi) kullanilir. */
:root[data-theme="dark"] .tur-serit > .btn.ts-acik,
:root[data-theme="dark"] .tur-serit > .btn.ts-acik:hover {
  background: var(--yan-aktif); border-color: var(--yan-aktif);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .tur-serit > .btn.ts-acik,
  :root:where(:not([data-theme="light"])) .tur-serit > .btn.ts-acik:hover {
    background: var(--yan-aktif); border-color: var(--yan-aktif);
  }
}

/* ---------------------------------------------------------------------
   12 · GERI DUGMESI — ust seritte, menu tetiginin solunda
   Yalnizca donulecek ekran varken cizilir (views.js `hidden` yonetir);
   olmayan bir yolu gostermek yaniltir.
   --------------------------------------------------------------------- */
.geri-btn {
  flex-shrink: 0;
  width: var(--icon-box); height: var(--icon-box);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.geri-btn:hover { border-color: var(--accent); color: var(--accent); }
.geri-btn svg { width: 17px; height: 17px; }
.geri-btn[hidden] { display: none; }

/* ---------------------------------------------------------------------
   GERI VE KAPAT — TEK SOZLUK
   ---------------------------------------------------------------------
   Kullanici bildirdi (26 Agu 2026): "geri tusunun da bir standardi
   olsun. bazi yerlerde x isareti var, bazi yerlerde hem ustte hem altta
   ok var."

     ok  (`geri`) = ONCEKI EKRANA DON   — gezinme
     x   (`x`)    = BU SEYI KAPAT / BIRAK — katman, tur, acik icerik

   Uc yerde ok kullanilir ve hepsi ayni goruntudedir:
     `#geriBtn`     ust cubuk · ROTA gerisi (gecmis yigini)
     `.ekran-geri`  ekranin kendi baslik satiri · ALT EKRAN gerisi
     etiketli geri  ("Konular", "Gecmise Don", "Tekrara Don")

   AYNI EKRANDA IKI IKON-ONLY GERI OLMAZ: ekran kendi `.ekran-geri`sini
   ciziyorsa ust cubuktaki `#geriBtn` GIZLENIR (views.js
   `geriTutarlilik()`). Ikisi de etiketsiz ve ayni ok; yan yana
   durduklarinda hangisinin nereye goturdugu okunmuyordu.

   Etiketli geri dugmeleri (`← Konular`) bu kuraldan MUAF — etiket
   nereye goturdugunu zaten soyluyor. */
.ekran-geri {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: 13px;
  color: var(--muted); cursor: pointer;
  transition: background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.ekran-geri:hover { background: var(--card); color: var(--accent); }
.ekran-geri svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   EKRANIN KENDI BASLIK SATIRI — 54px
   ---------------------------------------------------------------------
   `#pageTitle` TELEFONDA CIZILMIYOR (olculdu: yukseklik 0); ust cubuk
   yalnizca marka · seri · avatar tasiyor. Kendi basligi olan mobil
   ekranlar (Tekrar · Ilerleme) onu bu satirda yazar — tasarim dosyalari
   ikisinde de ayni olcuyu veriyor, o yuzden kural TEK yerde.
   --------------------------------------------------------------------- */
/* Defterin baslik satiri YALNIZCA TELEFONDA. `.ekran-bas`i kullanan
   oteki ekranlar (Tekrar · Ilerleme) telefona ozel cizimler oldugu icin
   masaustunde zaten uretilmiyor; defter ise TEK isaretleme ile iki
   gorunume birden ciziliyor. Masaustunde `#pageTitle` "Ogrenciler"
   yaziyor — ikisi birden cizilseydi baslik iki kez okunurdu. */
.og-ekran-bas { display: none; }
@media (max-width: 940px) {
  .ekran-bas {
    flex: none; display: flex; align-items: center; gap: var(--sp-2);
    height: 54px; padding: 0 12px 0 18px;
  }
  .og-ekran-bas { display: flex; }
  .ekran-bas > b {
    flex: 1; min-width: 0;
    font-size: 24px; font-weight: 500; letter-spacing: -.02em;
    color: var(--text); line-height: normal;
  }
}
@media (max-width: 940px) and (max-width: 374px),
       (max-width: 940px) and (max-height: 700px) {
  .ekran-bas { height: 50px; }
  .ekran-bas > b { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   ALT EKRANIN BASLIK SATIRI — 56px, geri + ad + sayac cipi
   ---------------------------------------------------------------------
   Ayni rotanin icindeki alt gorunumler (Tekrar > Kutular / Tekrara
   dusenler · Istatistik'in dort ekrani) bu satiri kullanir. Uc tasarim
   dosyasi da ayni olcuyu veriyor, o yuzden kural TEK yerde.
   --------------------------------------------------------------------- */
@media (max-width: 940px) {
  .ekran-abas {
    flex: none; display: flex; align-items: center; gap: var(--sp-2);
    height: 56px; padding: 0 12px 0 8px;
  }
  .ekran-abas > b {
    flex: 1; min-width: 0;
    font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--text);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ekran-acip {
    flex: none; display: inline-flex; align-items: center;
    height: 28px; padding: 0 10px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .ekran-agovde {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: 2px 14px 12px;
  }
}


/* =====================================================================
   TEKRAR VITRINI — TELEFON VE MASAUSTU ORTAK
   ---------------------------------------------------------------------
   Kaynak `mobil/Mobil - Tekrar.dc.html`. Once yalnizca telefon
   katmanindaydi; kullanici masaustunde de ayni sadelestirmeyi istedi
   (26 Agu 2026) ve isaretleme TEK oldugu icin kurallar buraya, ortak
   dosyaya tasindi. Farki yalnizca asagidaki `@media (min-width: 941px)`
   blogu yapiyor — iki gorunum ayrisamaz.
   ===================================================================== */
.tk-i {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: 13px;
  color: var(--faint); cursor: pointer;
  transition: background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.tk-i:hover { background: var(--card); color: var(--accent); }
.tk-i svg { width: 20px; height: 20px; }

.tk-vitrin {
  position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  background: var(--yan-bg2); border-radius: 22px;
  box-shadow: var(--shadow-card);
}
/* Ust kenarda bakir sac cizgisi — tasarimin kendi degeri. Gradyan
   DEGIL, duz 1px cizgi. */
.tk-vitrin::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--yan-cizgi);
}

.tk-kas {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; line-height: normal;
}
.tk-vitrin .tk-kas { color: var(--yan-vurgu-2); }
.tk-kart .tk-kas { color: var(--accent); }

.tk-sayi { display: flex; align-items: center; gap: 11px; }
.tk-sayi > b {
  flex: none;
  font-size: 44px; font-weight: 500; line-height: .95; letter-spacing: -.03em;
  color: var(--yan-metin); font-variant-numeric: tabular-nums;
}
/* `> span` TEK BASINA YETMEZ — DORDUNCU KEZ. Onay dairesi (`.tk-onay`)
   de bir `span` ve ayni satirin dogrudan cocugu; metin kurali onu da
   yakalayip `flex: 1` veriyordu ve 46px'lik daire 308px'lik bir HAPA
   donuyordu (olculdu, bos kuyruk durumunda). Onceki ucu: `.sr-l > b`,
   `.auth-head > b`, `.yp-ok`. */
.tk-sayi > span:not(.tk-onay) {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.tk-sayi i {
  font-style: normal; font-size: 14.5px; font-weight: 500;
  color: var(--yan-metin); line-height: normal;
}
.tk-sayi em {
  font-style: normal; font-size: var(--fs-sm); line-height: 1.4;
  color: var(--yan-metin-orta);
}
/* Kuyruk bosken buyuk bir "0" kotu haber gibi okunurdu; sayinin
   yerini onay dairesi alir, hiyerarsi ayni kalir. */
.tk-onay {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: rgba(127, 179, 148, .16); color: var(--yan-ok);
}
.tk-onay svg { width: 24px; height: 24px; }

/* ---- tur dilimleri: bugun kacinci turdayiz ---- */
.tk-tur { display: flex; align-items: center; gap: 9px; }
.tk-dilimler { flex: 1; min-width: 0; display: flex; gap: 3px; }
.tk-dilimler > i {
  flex: 1; height: 5px; border-radius: 3px; background: var(--yan-kanal);
}
.tk-dilimler > i.dolu { background: var(--yan-vurgu); }
/* Siradaki tur: DOLU DEGIL, cerceveli. Yapilmamis bir turu dolu
   boyamak sayiyi yalan soyletirdi. */
.tk-dilimler > i.simdi { box-shadow: inset 0 0 0 1px var(--yan-vurgu); }
.tk-tur > em {
  flex: none; font-style: normal; font-size: var(--fs-xs);
  color: var(--yan-metin-zayif); font-variant-numeric: tabular-nums;
}

/* ---- dugmeler ---- */
.tk-birincil, .tk-ikincil {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; white-space: nowrap; cursor: pointer;
  transition: background var(--mo-orta) var(--mo-cikis),
              border-color var(--mo-hizli) var(--mo-cikis);
}
/* BIRINCIL DUGMENIN BAKIR ISILTISI — "birincil dugme golgesiz"
   kuralinin belgeli TEK istisnasi hero'ydu; bu ekranin hero'su da
   burasi ve tasarim isiltiyi kendisi veriyor. */
.tk-birincil {
  height: 52px; border-radius: 15px;
  background: var(--accent); border: 1px solid var(--yan-cizgi);
  font-size: 15.5px; font-weight: 600; color: var(--ink-ters);
  box-shadow: 0 12px 26px -14px rgba(163, 87, 46, .95);
}
.tk-birincil:hover { background: var(--accent-parlak, var(--accent)); }
.tk-birincil svg { width: 16px; height: 16px; }
.tk-cip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px; border-radius: 7px;
  background: rgba(255, 247, 239, .16);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Koyu yuzeyde IKINCIL: cerceveli, dolu degil — ekranda ayni anda tek
   bakir dugme olur. */
.tk-ikincil {
  height: 46px; border-radius: 14px;
  background: rgba(233, 237, 242, .06);
  border: 1px solid rgba(233, 237, 242, .18);
  font-size: var(--fs-kontrol); font-weight: 500; color: var(--yan-metin);
}
.tk-ikincil:hover { border-color: var(--yan-vurgu); }
.tk-ikincil svg { width: 15px; height: 15px; color: var(--yan-vurgu-2); }
.tk-say { color: var(--yan-metin-zayif); font-variant-numeric: tabular-nums; }
.tk-say::before { content: '('; }
.tk-say::after  { content: ')'; }

.tk-kutucuklar { display: flex; gap: var(--sp-2); }
/* SIGMIYORSA PUNTO KUCULTULMEZ — SARILIR. "Duzensiz Fiil Sinavi"
   13px'te 390px'lik ekranda tek satira sigmiyor ve tasarimin kendi
   olcusunde KIRPILIYORDU (ekran goruntusuyle yakalandi). Baslik iki
   satira sarabilir, kutu esnek; iki kutu `stretch` ile ayni boyda
   kalir. */
.tk-kutucuk {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  min-height: 50px; padding: 7px 12px; border-radius: 14px;
  background: rgba(233, 237, 242, .06);
  border: 1px solid rgba(233, 237, 242, .18);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis);
}
.tk-kutucuk:hover { border-color: var(--yan-vurgu); }
.tk-kc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-kc-tx b {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-base); font-weight: 500; color: var(--yan-metin);
  line-height: 1.2;
}
.tk-kc-tx b svg { flex: none; width: 14px; height: 14px; color: var(--yan-vurgu-2); }
.tk-kc-tx i {
  font-style: normal; font-size: var(--fs-xs); color: var(--yan-metin-zayif);
  line-height: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tk-not {
  margin: 0; font-size: 11.5px; line-height: 1.5;
  color: var(--yan-metin-zayif);
}
.tk-not b { font-weight: 600; color: var(--yan-metin); }

/* ---------------- KAGIT KARTLAR ---------------- */

/* ================= NASIL CALISIR (alt sayfa) ================= */
.tk-nasil { display: flex; flex-direction: column; gap: var(--sp-4); }
.tk-n-blok { display: flex; gap: 11px; }
.tk-n-ic {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 11px;
}
.tk-n-ic svg { width: 16px; height: 16px; }
.tk-n-ic.amber { background: var(--warn-soft);   color: var(--warn); }
.tk-n-ic.bakir { background: var(--accent-soft); color: var(--accent); }
.tk-n-ic.mavi  { background: var(--tint-blue);   color: var(--ilerleme-yeni); }
.tk-n-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-n-tx > b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: normal; }
.tk-n-tx > span { font-size: var(--fs-base); line-height: 1.55; color: var(--muted); }
.tk-n-tx b { font-weight: 600; color: var(--text); }
/* "Anladim" SESSIZ dugme — tasarim onu kum yuzeyde cerceveli veriyor.
   `APP.Sheet` ilk eyleme varsayilan olarak `btn-primary` yaziyor; bu
   ekranda birincil eylem tur baslatmak, bir bilgi sayfasini kapatmak
   degil. Cerceve `--btn-line` kalir (olculmus 3:1 duzeltmesi). */
.btn.tk-anladim { font-weight: 500; }
/* ---------------------------------------------------------------------
   MASAUSTU — vitrin IKI SUTUN
   ---------------------------------------------------------------------
   Telefonda tek kolon; genis ekranda sol yarim SAYIYI ve tur cubugunu,
   sag yarim EYLEMLERI tasir. Bugun ekraninin hero'suyla ayni kalip.
   --------------------------------------------------------------------- */
@media (min-width: 941px) {
  .tk-vitrin {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    column-gap: var(--sp-10); align-items: start;
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-5);
  }
  /* Sol sutun: kimlik ve sayi. Sag sutun: eylemler. */
  .tk-vitrin > .tk-kas, .tk-vitrin > .tk-sayi, .tk-vitrin > .tk-tur { grid-column: 1; }
  .tk-vitrin > .tk-birincil, .tk-vitrin > .tk-ikincil,
  .tk-vitrin > .tk-kutucuklar, .tk-vitrin > .tk-not { grid-column: 2; }
  .tk-vitrin > .tk-sayi > b { font-size: var(--fs-4xl); }
  .tk-vitrin > .tk-sayi i { font-size: var(--fs-lg); }
  .tk-vitrin > .tk-sayi em { font-size: var(--fs-base); }
  /* Tur cubugu sayinin altinda kalir, sag sutuna tasmaz. */
  .tk-vitrin > .tk-tur { max-width: 420px; }
  /* (i) SAG UST KOSEDE: telefonda ekranin kendi 54px'lik baslik satiri
     var, masaustunde yok — sayfa basligini ust cubuk tasiyor. */
  .tk-vitrin > .tk-i {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    color: var(--yan-metin-zayif);
  }
  .tk-vitrin > .tk-i:hover { background: rgba(233, 237, 242, .08); color: var(--yan-vurgu-2); }
  .tk-not { margin-top: var(--sp-1); }
}

/* ---------------------------------------------------------------------
   13 · CALISMA LISTEN — handoff degerleri
   --------------------------------------------------------------------- */
/* Uyari paneli: sicak tint, r11, satir ici dugmeli. */
.notice-warn {
  gap: 10px;
  padding: 12px 13px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--uyari-yuzey);
  border: 1px solid var(--uyari-cizgi);
  color: var(--muted);
  font-size: 13px; line-height: 1.5;
}
/* IKON + SARILMIS GOVDE oldugunda panel flex olabilir. `.notice`nin
   kendisi BLOK kalir: govdesi sarilmamis panellerde flex her <b>'yi
   ayri bir sutuna cevirir (bu tuzak dort kez yasandi). */
.notice.notice-yan { display: flex; align-items: flex-start; gap: 10px; }
.notice-yan > .notice-govde {
  min-width: 0; display: flex; flex-direction: column; gap: 9px;
}
.notice-yan .notice-eylem { margin-top: 0; }
.notice-warn > .ic { color: var(--accent); }
.notice-warn b { color: var(--text); font-weight: 600; }
.notice-warn .notice-eylem { margin-top: 9px; }
.notice-warn .notice-eylem .btn {
  height: 36px; min-height: 36px; padding: 0 12px;
  border-radius: 9px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.notice-warn .notice-eylem .btn:hover { border-color: var(--line-strong); color: var(--text); }

/* KOYU BIRINCIL — sayfanin bakir birincili hero'da; bu kart onun
   alternatifi. Iki bakir dugme "hangisi asil eylem" sorusunu doguruyor. */
.btn.btn-koyu {
  border: 0;
  background: var(--yan-bg2);
  border-color: var(--yan-bg2);
  color: var(--yan-metin);
  font-size: var(--fs-kontrol); font-weight: 600;
}
.btn.btn-koyu:hover:not(:disabled) { background: var(--yan-aktif); border-color: var(--yan-aktif); color: var(--yan-metin); }
.btn.btn-koyu .ic { color: currentColor; }

/* "Hepsini listeden cikar" — cercevesiz, sessiz. */
.act .btn-ghost {
  height: var(--ctrl-h); min-height: var(--ctrl-h);
  padding: 0 14px; border: 0; border-radius: var(--r-md);
  font-size: var(--fs-base); color: var(--faint);
}
.act .btn-ghost:hover:not(:disabled) { color: var(--accent); background: var(--page); }

/* Kelime kartindaki "seviyenin ustu" isareti — 11px bakir. */
.word-card .wc-ustu, .word-card .wc-listem, .word-card .wc-devir {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--accent);
}
.word-card .wc-ustu .ic, .word-card .wc-listem .ic, .word-card .wc-devir .ic {
  width: 11px; height: 11px;
}

/* ---------------------------------------------------------------------
   14 · BILGI PANELI YENIDEN BLOK — `<b>` SUTUNA DONUYORDU
   `.notice`i handoff'un gorunumu icin `display: flex` yapmistim; o
   gorunum ikon + SARILMIS govde varsayiyor. Bizde cogu panel
   `ic('info') + '<b>...</b> duz metin'` seklinde ve flex'te her `<b>`
   ayri bir SUTUN oluyor: "1 kelime ders seviyenin (A2) ustunde." dikey
   olarak parcalandi (ekran goruntusuyle gorüldü). Bu tuzak bu dosyada
   dorduncu kez yasandi (`.sr-l > b`, `.auth-head > b`, `.ay-liste b`).
   Blok + satir ici ikon; flex YALNIZCA govdesi sarilmis olan
   `.notice-info`da kalir.
   --------------------------------------------------------------------- */
.notice, .notice-warn, .notice-ok {
  display: block;
}
.notice > .ic {
  display: inline-block; vertical-align: -3px;
  margin: 0 var(--sp-2) 0 0;
  width: 17px; height: 17px;
}
.notice-info { display: flex; }
.notice-info > .ic { display: block; margin: 1px 0 0; vertical-align: 0; }
.notice-eylem { margin-top: 9px; }

/* "seviyenin üstü" / "listenden" / "dünden" — handoff'ta HAP DEGIL,
   kelimenin altinda 11px bakir bir satir. Hap hali kartin ic ritmini
   bozuyordu (kart 4 satirlik, hap besinci bir blok ekliyor). */
.word-card .wc-ustu, .word-card .wc-listem, .word-card .wc-devir {
  margin-left: 0; padding: 0; height: auto;
  border-radius: 0; background: none;
  color: var(--accent); font-weight: 400; letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   15 · TUR YUVASI — tur seridinin ALTINDA, sayfayi degistirmeden
   Prototipte acik tur iki sutunlu icerigin yerine geciyor; hero ve
   serit DURUYOR. Yuva o boslugu kaplar.
   --------------------------------------------------------------------- */
.tur-yuva { display: block; }
.tur-yuva > .card:last-child { margin-bottom: 0; }

/* HIKAYE'DEN ONCE INCE AYRAC — Hikaye tek gercek ROTA (sayfa
   degistirir), otekiler seridin altinda acilir. Ikisi ayni sey degil. */
.ts-ayrac {
  flex: none; align-self: center;
  width: 1px; height: 24px;
  margin: 0 var(--sp-1);
  background: var(--line);
}

/* TUR YUVASI TEK KART. Prototipte tur basligi (sayac + ilerleme cubugu)
   ve soru AYNI kartin icinde; bizde baslik ciplak bir satirdi, soru ise
   ayri bir kart — iki ayri yuzey gibi okunuyordu. Modullerin hepsi ayni
   yapiyi uretiyor (progress-info + progressbar + .card), o yuzden tek
   kural yetiyor. */
.tur-yuva {
  background: var(--card);
  border: 1px solid var(--line-kart);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}
.tur-yuva > .card {
  background: none; border: 0; box-shadow: none;
  padding: 0; margin-bottom: 0; border-radius: 0;
}
.tur-yuva > .progressbar, .tur-yuva > .progressbar.hz-bar { margin-bottom: var(--sp-4); }
.tur-yuva > .progress-info, .tur-yuva > .hz-ust { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------------
   16 · TOAST — KOYU TEMADA OKUNMUYORDU
   Zemin ham `#1a212a` (eski koyu kart rengi) yaziliydi ve murekkep
   `--ink-ters`. Yeni dilde `--ink-ters` KOYU TEMADA lacivert (#0F1C2B):
   koyu zemin uzerine koyu murekkep, olculdu 1,2:1 — mesaj hic
   okunmuyordu (kullanici ekran goruntusuyle bildirdi).
   Lacivert vitrin dili kullanilir: iki temada da ayni ve okunur.
   --------------------------------------------------------------------- */
.toast {
  background: var(--yan-bg2);
  color: var(--yan-metin);
  border: 1px solid var(--yan-cizgi);
  font-weight: 500;
}
.toast .ic { color: var(--yan-vurgu); }

/* ---------------------------------------------------------------------
   17 · "TURKCESI YANLIS MI?" — cumlenin SAG UCUNDA
   Kendi satirini kapliyordu ve soru ile cevap alani arasina 40px
   giriyordu; ekranin en degerli yeri orasi.
   --------------------------------------------------------------------- */
.ex-tr-satir {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
}
.ex-tr-satir > .ex-tr-prompt { flex: 1 1 260px; min-width: 0; margin-top: 0; }
.ex-tr-satir > .tr-duzelt {
  flex: 0 0 auto; margin-top: 0; margin-left: auto;
  align-self: center; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   18 · KOYU TEMADA TINT ZEMINLI ISARETLER
   Kimlik renginin %13-16'lik tinti koyu temada zemini ACIYOR ve uzerine
   ayni rengin TABAN tonu konunca kontrast esigin altina dusuyor. Ucu de
   olculdu (scratchpad/koyu-tarama.js):

     acilir listede secili secenek  #C98A5B / #2F3740  4,17
     tastaki ✗ isareti              #E08A8A / #48424B  3,79
     tastaki ✓ isareti              #7FB093 / #3B494D  3,80

   Cozum tinti kaldirmak degil — kimlik oradan geliyor — murekkegi bir
   adim acmak. Yalnizca KOYU temada.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] .dd-opt[aria-selected="true"] { color: var(--accent-strong); }
:root[data-theme="dark"] .chip-bad .mark { color: var(--bad-strong); }
:root[data-theme="dark"] .chip-ok .mark  { color: var(--ok-strong); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .dd-opt[aria-selected="true"] { color: var(--accent-strong); }
  :root:where(:not([data-theme="light"])) .chip-bad .mark { color: var(--bad-strong); }
  :root:where(:not([data-theme="light"])) .chip-ok .mark  { color: var(--ok-strong); }
}

/* Yazma ozetindeki harf farki isaretleri (`.yz-fark mark`) koyu temada
   `--warn-ink` (#DBA277) ile `--warn-soft` tinti uzerinde 4,06:1
   olculdu — tint zemini aciyor, ayni aile tuzagi. Bir adim acik ton. */
:root[data-theme="dark"] .yz-fark mark,
:root[data-theme="dark"] .ka-satir mark { color: #EBB287; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .yz-fark mark,
  :root:where(:not([data-theme="light"])) .ka-satir mark { color: #EBB287; }
}

/* Ayni isaretler ACIK temada da esigin altindaydi: `--warn-ink` (#826237)
   `--warn-soft` tinti uzerinde 4,15:1. Isaretin ZEMINI zaten sari; ustune
   ayni ailenin orta tonu geliyor. Bir adim koyu. */
.yz-fark mark, .ka-satir mark { color: #76562B; }


/* =====================================================================
   SENARYOLAR — handoff `Senaryolar.dc.html`
   Uc durum: liste · senaryo · bitti.
   Liste KART IZGARASI DEGIL, seviyeye gore GRUPLU 44px satir listesi;
   EKRANLAR.md: "100 senaryoda da okunur kalmali".
   ===================================================================== */
.sn-liste { display: flex; flex-direction: column; gap: var(--sp-6); }
.sn-grup { display: flex; flex-direction: column; gap: var(--sp-2); }
.sn-grup-bas { display: flex; align-items: center; gap: 9px; }
/* Seviye artik kartin icinde bir rozet degil, GRUP BASLIGI. */
.sn-lvl {
  height: 22px; padding: 0 9px; display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--yan-bg2); color: var(--yan-metin);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
}
.sn-adet { font-size: var(--fs-sm); color: var(--faint); }
/* Handoff burada SOLAN bir cizgi kullaniyor; "gradyan renklendirme yok"
   kurali geregi duz hairline. Ayirma isini zaten yapiyor. */
.sn-cizgi { flex: 1; height: 1px; background: var(--line-kart); }
.sn-satirlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  column-gap: 22px;
}
.sn-satir {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 var(--sp-2);
  background: none; border: 0;
  border-bottom: 1px solid var(--line-kart);
  border-radius: var(--r-sm);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background var(--mo-hizli) var(--mo-cikis);
}
.sn-satir:hover { background: var(--card); }
/* Kimlik rengi CIPTE — "ORTAM RENKLERI" kurali. Handoff burada tek bakir
   kullaniyor; belgeli orta yol (dokuz kisik hue) duruyor. */
.sn-ic {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  /* TINT %10 -> %22. Kullanici "bu cok duz oldu" dedi; olculdu, %10'da
     kisik palette cip doygunlugu 2 ile GRIYE dusuyordu. Palet de yeniden
     uretildi (bkz. ORTAM RENKLERI). */
  background: color-mix(in srgb, var(--ortam-renk, var(--accent)) 22%, transparent);
  color: color-mix(in srgb, var(--ortam-renk, var(--accent)) 85%, var(--text));
}
.sn-ic .ic { width: 14px; height: 14px; }
.sn-orta { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.sn-ad { flex: none; font-size: var(--fs-base); font-weight: 500; color: var(--text); white-space: nowrap; }
.sn-meta {
  font-size: var(--fs-xs); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-skor {
  flex: none; display: flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ok-strong);
}
.sn-skor .ic { width: 11px; height: 11px; }
/* Skoru olmayan satirda da ayni genislikte bir bosluk — yoksa ad sutunu
   satirdan satira kayiyor. */
.sn-skor-bos { flex: none; width: 34px; }

/* ---- SENARYO (oynama) ---- */
.sn-geri-satir { display: flex; margin-bottom: var(--sp-3); }
.sn-oyun { display: flex; flex-direction: column; gap: var(--sp-4); }
.sn-bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sn-mad {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ortam-renk, var(--accent)) 22%, transparent);
  color: color-mix(in srgb, var(--ortam-renk, var(--accent)) 85%, var(--text));
}
.sn-mad .ic { width: 19px; height: 19px; }
.sn-bas-yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-bas-yazi > b { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.008em; color: var(--text); }
.sn-bas-yazi > span { font-size: var(--fs-sm); color: var(--faint); }
.sn-bas-ara { flex: 1; min-width: var(--sp-2); }
.sn-sayac { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sn-sayac-sol { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.sn-sayac-sag { font-size: var(--fs-sm); color: var(--faint); font-variant-numeric: tabular-nums; }
.sn-bar {
  display: block; height: 6px; border-radius: 3px;
  background: var(--line-kart); overflow: hidden; margin-top: calc(-1 * var(--sp-2));
}
.sn-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* AKIS kendi yuzeyinde — baloncuklar kart zemininde yuzmesin. */
.sn-akis {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--page); border: 1px solid var(--line-ic);
  border-radius: var(--r-lg);
}
.sn-balon { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: min(100%, 560px); }
.sn-balon.sn-ben { align-items: flex-end; margin-left: auto; }
.sn-kim {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--faint);
}
.sn-kutu {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px;
  background: var(--card); border: 1px solid var(--line-kart);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 5px;
  box-shadow: var(--shadow-1);
}
/* Kendi replegin lacivert ve CEVIRISIZ — cumleyi zaten sen kurdun. */
.sn-ben .sn-kutu {
  background: var(--yan-bg2); border-color: var(--yan-bg2);
  border-radius: var(--r-lg) var(--r-lg) 5px var(--r-lg);
}
.sn-en { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text); }
.sn-ben .sn-en { color: var(--yan-metin); }
.sn-tr { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--faint); }
.sn-dinle { width: 34px; height: 34px; }
.sn-dinle .ic { width: 15px; height: 15px; }

/* CEVAP KARTI — `line()` bunun icine ciziyor; bakir kenar "sira sende"
   demenin tek isareti. */
.sn-cevap {
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--r-lg);
}
/* `.convo-ex` eskiden kartin GOVDESINE bitisikti ve kendini ustteki
   kesikli cizgiyle ayiriyordu; artik KENDI karti var (bakir kenar), o
   cizgi kartin icinde kacak bir ayrac gibi duruyordu. */
.sn-cevap .convo-ex {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: 0; border-top: 0; padding-top: 0;
}
.sn-cevap .zone-label { margin: 0; }
/* Bolgenin USTUNDE etiketi var; ICINDEKI yer tutucu ayni seyi ikinci kez
   soyluyordu (SPEC yasak 10). */
.sn-cevap .answer-zone .zone-empty { display: none; }
.sn-cevap .answer-zone { min-height: 56px; }
/* "Cik" kendi satirinda ve sagda duruyordu; prototipte eylemler TEK
   satirda: birincil solda, otekiler sagda. */
.sn-eylem-ara { flex: 1; min-width: var(--sp-2); }
/* Sola bakan chevron sette YOK — `chevron` (asagi) 90 derece dondurulur.
   Kural `.tur-baslik` icin yazilmisti; geri dugmesi burada da var. */
.sn-geri-satir .tb-ok-sol { display: inline-flex; transform: rotate(90deg); }
.sn-not { margin: 0; }

/* ---- BITTI (ozet) ---- */
/* Handoff burada iki gradyan kullaniyor (lacivert gecis + altin madalyon);
   "GRADYAN RENKLENDIRME YOK" kullanicinin iki kez soyledigi karar — ikisi
   de duz tona indirildi. */
.sn-ozet { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.sn-madalyon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--metal-altin); color: var(--metal-altin-yz);
}
.sn-madalyon .ic { width: 23px; height: 23px; }
.sn-ozet-yazi { display: flex; flex-direction: column; gap: 6px; }
.sn-ozet-bas {
  font-size: var(--fs-2xl); font-weight: 400; line-height: 1.1;
  letter-spacing: -.02em; color: var(--yan-metin);
}
.sn-ozet-alt { font-size: var(--fs-kontrol); line-height: var(--lh-normal); color: var(--yan-ink-govde); }
.sn-olculer { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.sn-olcu {
  flex: 1 1 140px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(233, 237, 242, .10);
}
.sn-olcu > b {
  font-size: var(--fs-xl); font-weight: 500; line-height: 1.05;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--yan-metin);
}
.sn-olcu > i { font-style: normal; font-size: var(--fs-sm); color: var(--yan-ink-uc); }
.sn-olcu-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.sn-olcu-vurgu { background: color-mix(in srgb, var(--yan-vurgu) 12%, transparent); border-color: color-mix(in srgb, var(--yan-vurgu) 30%, transparent); }

.sn-takildi { display: flex; flex-direction: column; gap: var(--sp-3); }
.sn-kas {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.sn-takildi-tr { font-size: var(--fs-base); color: var(--muted); }
.sn-takildi-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-md); }
.sn-takildi-et { color: var(--faint); }
.sn-takildi-satir > b { font-weight: 500; color: var(--text); }
.sn-say { width: 34px; height: 34px; }
.sn-say .ic { width: 15px; height: 15px; }

@media (max-width: 940px) {
  .sn-satirlar { grid-template-columns: 1fr; }
  /* Dokunma hedefi — 44px zaten yeterli ama telefonda dolgu artar. */
  .sn-satir { height: 48px; padding: 0 var(--sp-3); }
}

/* =====================================================================
   ROZETLER — handoff `Rozetler.dc.html` BIREBIR
   ---------------------------------------------------------------------
   Onceki hali kagit kartlik duz bir izgaraydi; handoff ekrani bir
   MADALYA VITRINI olarak kuruyor: ustte lacivert "rozet dolabi" (kunye
   satiri + rafin uzerinde son alti madalyon + bakir raf cizgisi +
   siradaki hedef), altinda dokuz aile blogu.

   GRADYAN — proje geneli yasak, BU EKRANDA MUAF (kullanici karari,
   22 Agu 2026: "%100 birebir — hepsi gradyanli"). Yasak zaten tam bu
   ekran icin dogmustu ("vazgec su gradient goruntuden") ve kullanici
   handoff'u gorunce karari geri aldi. Madalyon metali GRADYANSIZ
   cizilemez: bronz/gumus/altin ayrimini tasiyan sey isigin diskte
   donmesi. `gradyan-denetim.js` bu ekrani bu yuzden muaf tutar.
   BASKA EKRANA GRADYAN TASIMA — muafiyet madalyon diline aittir.

   HANDOFF ILE CATISAN DEGERLER (hue korunur, parlaklik ayarlanir —
   belgeli kural). Handoff'un sessiz grileri WCAG esiginin altinda:
     aile sayaci #918E8B 2,89 · kart aciklamasi/tarihi #A39C93 2,67 ·
     kilitli ad #8E8579 3,20 · kilitli kademe/ikon #C4BCAF 1,5
   Hepsi olcegin karsiligina cekildi (--faint / --muted / --rz-kilit-*).
   Punto tabani da 11px: handoff'un 9,5 ve 10,5'i 11'e cikti.
   ===================================================================== */

/* ---- KADEME METALI ---- */
.rz-k1 { --rz-m-a: #E0A878; --rz-m-b: #B87A50; --rz-m-c: #8A5734; --rz-m-ad: var(--metal-bronz-yz); }
.rz-k2 { --rz-m-a: #D2D8DD; --rz-m-b: #A7AEB5; --rz-m-c: #7E868E; --rz-m-ad: var(--metal-gumus-yz); }
.rz-k3 { --rz-m-a: #EBD08A; --rz-m-b: #C9A45C; --rz-m-c: #9A7734; --rz-m-ad: var(--metal-altin-yz); }

/* =============== ROZET DOLABI (lacivert vitrin) =============== */
.rz-hero {
  position: relative; overflow: hidden; line-height: normal;
  background: linear-gradient(172deg, #16293C 0%, #0F1C2B 52%, #0A1420 100%);
  color: var(--yan-metin);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3vw, 36px) clamp(20px, 2.6vw, 30px);
}
/* Bakir isik huzmesi + ust sac cizgisi — vitrinin "sahne isigi" */
.rz-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 50% -6%, rgba(201, 138, 91, .26) 0%, rgba(201, 138, 91, 0) 70%);
}
.rz-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(201, 138, 91, 0), rgba(235, 208, 138, .75) 50%, rgba(201, 138, 91, 0));
}
.rz-hero > * { position: relative; }

.rz-kunye {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 10px 16px; text-align: center;
}
.rz-kunye-ad { display: flex; align-items: center; gap: 9px; }
.rz-kunye-mad {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #EBD08A, #C9A45C 46%, #9A7734);
  color: #3A2A14; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .6);
}
.rz-kunye-mad .ic { width: 14px; height: 14px; }
.rz-kunye-et {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yan-vurgu-2);
}
.rz-kunye-say {
  font-size: 13px; color: var(--yan-ink-uc);
  font-variant-numeric: tabular-nums;
}
.rz-kunye-say b { font-weight: 600; color: #F7FAFC; }

/* ---- RAF: son alti madalyon ---- */
.rz-raf {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 3.4vw, 38px);
  margin-top: clamp(22px, 3vw, 32px);
}
.rz-mad {
  flex: 0 1 122px; min-width: 96px;
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; text-align: center;
}
.rz-mad-yuva { position: relative; display: grid; place-items: center; }
.rz-mad-dis {
  display: grid; place-items: center; width: 66px; height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rz-m-a), var(--rz-m-b) 46%, var(--rz-m-c));
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .75), inset 0 1px 1px rgba(255, 255, 255, .55);
}
.rz-mad-ic {
  display: grid; place-items: center; width: 55px; height: 55px;
  border-radius: 50%;
  background: var(--rz-dolu); color: #FFFDF8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.rz-mad-ic .ic { width: 25px; height: 25px; }
.rz-mad-yeni {
  position: absolute; top: -4px; right: -8px;
  height: 17px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #EBD08A, #C9A45C);
  color: #3A2A14; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .6);
}
.rz-mad-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rz-mad-txt b {
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--yan-metin);
}
/* Vitrin altyazisi ORTA metal (prototip #C9A45C / #A7AEB5) — kart
   kademesinin `--rz-m-ad`i DEGIL: o tema duyarli, bu her zaman
   lacivert zeminin uzerinde duruyor. */
.rz-mad-alt { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--rz-m-b); }

/* ---- RAF CIZGISI: bakir hairline + altinda golge ---- */
.rz-raf-cizgi {
  margin-top: clamp(18px, 2.4vw, 26px); height: 1px;
  background: linear-gradient(90deg, rgba(201, 138, 91, 0), rgba(201, 138, 91, .45) 25%, rgba(201, 138, 91, .45) 75%, rgba(201, 138, 91, 0));
}
.rz-raf-golge {
  height: 26px; margin-top: -1px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 72%);
}

/* ---- SIRADAKI ---- */
.rz-sira {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 6px; padding: 14px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(233, 237, 242, .1);
  border-radius: 14px;
}
.rz-sira-mad {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rz-m-a), var(--rz-m-b) 46%, var(--rz-m-c));
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .75), inset 0 1px 1px rgba(255, 255, 255, .55);
}
.rz-sira-ic {
  display: grid; place-items: center; width: 29px; height: 29px;
  border-radius: 50%;
  background: var(--rz-dolu); color: #FFFDF8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.rz-sira-ic .ic { width: 15px; height: 15px; }
.rz-sira-govde { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rz-sira-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.rz-sira-et {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--yan-vurgu-2);
}
.rz-sira-ad { font-size: var(--fs-md); font-weight: 500; color: #F7FAFC; }
.rz-sira-not { font-size: var(--fs-sm); color: var(--yan-ink-uc); }
.rz-sira-bar {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(233, 237, 242, .14); overflow: hidden;
}
.rz-sira-bar > i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--rz-m-c), var(--rz-m-b) 60%, var(--rz-m-a));
}
.rz-sira-say {
  flex: none; font-size: var(--fs-sm); color: var(--yan-ink-uc);
  font-variant-numeric: tabular-nums;
}
.rz-sira-say b { color: var(--yan-vurgu-2); font-weight: 600; }
/* Hic rozet kazanilmamis hesap — handoff'ta olmayan ama GERCEK durum */
.rz-raf-bos {
  margin-top: clamp(22px, 3vw, 32px); text-align: center;
  font-size: var(--fs-sm); color: var(--yan-ink-uc);
}

/* =============== AILE BLOKLARI =============== */
/* Prototipte aile bloklari FLEX SUTUNUN cocuklari; blok arasi bosluk
   kapsayicinin `gap`i, blok ICI bosluk sectionin kendi `gap`i. */
.rz-kok { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.rz-aile { display: flex; flex-direction: column; gap: 20px; line-height: normal; }
.rz-aile-bas {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.rz-aile-ic {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--rz-dolu); color: #FFFDF8;
  box-shadow: 0 2px 6px -3px var(--rz-dolu);
}
/* Kare SAYFA zemininde duruyor (madalyon gibi metal halkasi yok): koyu
   temada koyu bir kare koyu bir sayfada kayboluyor. Yerlesik kural —
   parlak zemin, koyu ikon. */
:root[data-theme="dark"] .rz-aile-ic {
  background: var(--rozet-renk); color: var(--ink-ters);
  box-shadow: 0 2px 6px -3px var(--rozet-renk);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .rz-aile-ic {
    background: var(--rozet-renk); color: var(--ink-ters);
    box-shadow: 0 2px 6px -3px var(--rozet-renk);
  }
}
.rz-aile-ic .ic { width: 15px; height: 15px; }
.rz-aile-ad {
  font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; color: var(--text);
}
.rz-aile-bosluk { flex: 1; }
.rz-aile-say {
  font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.rz-aile-say b { font-weight: 600; color: var(--text); }
.rz-aile-yeni {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: var(--rozet-renk); color: #FFFDF8;
}

/* Handoff izgarasi: `repeat(auto-fill, minmax(304px,1fr))`.
   `min()` sarmasi 320px telefonda tasmayi onler — handoff tek genislikte
   cizilmis, bizde 320'den 2560'a kadar acilir. */
.rz-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(304px, 100%), 1fr));
}

/* ---- KART ---- */
.rz-kart {
  position: relative; display: flex; gap: 15px;
  padding: 17px; border-radius: 15px;
}
.rz-kart.acik {
  background: radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--rozet-renk) var(--rz-parilti), transparent) 0%, var(--card) 62%);
  border: 1px solid var(--line-kart);
  box-shadow: 0 1px 2px rgba(15, 28, 43, .03), 0 10px 26px -22px rgba(15, 28, 43, .5);
}
/* Son bakistan beri kazanilan: ALTIN halka + ALTIN "YENI" pastili.
   Kademe metali DEGIL — prototip iki yerde de (raf ve kart) altin
   kullaniyor ve "YENI" bir kademe isareti degil KUTLAMA isareti; kademe
   zaten kartin icinde yazili ve madalyonun halkasinda duruyor.
   Ayrica olculdu: bronz metal uzerinde #3A2A14 murekkep 3,9:1 kaliyor
   (esik 4,5), altin uzerinde 5,89. */
.rz-kart.acik.rz-yeni {
  border-color: #C9A45C;
  box-shadow: 0 1px 2px rgba(15, 28, 43, .03), 0 10px 26px -22px rgba(15, 28, 43, .5),
              0 0 0 3px rgba(201, 164, 92, .133);
}
.rz-kart-yeni {
  position: absolute; top: -9px; right: 12px;
  height: 18px; padding: 0 7px; display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #EBD08A, #C9A45C);
  color: #3A2A14; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; box-shadow: 0 2px 5px -2px rgba(15, 28, 43, .5);
}
.rz-kart.kilit {
  background: var(--rz-kilit-bg);
  border: 1px solid var(--rz-kilit-line);
  box-shadow: inset 0 1px 2px rgba(15, 28, 43, .04);
}
.rz-kart-mad {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rz-m-a), var(--rz-m-b) 45%, var(--rz-m-c));
  box-shadow: 0 2px 5px -1px rgba(15, 28, 43, .3), inset 0 1px 1px rgba(255, 255, 255, .5);
}
.rz-kart-ic {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rz-dolu); color: #FFFDF8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.rz-kart-ic .ic { width: 18px; height: 18px; }
/* Kilitli madalyon SOLMUS: metal de aile rengi de yok, ice basilmis plaka */
.rz-kart.kilit .rz-kart-mad {
  background: var(--rz-kilit-ic-bg); box-shadow: none;
}
.rz-kart.kilit .rz-kart-ic {
  width: 44px; height: 44px;
  background: var(--rz-kilit-ic-bg); color: var(--rz-kilit-ic-ink);
  box-shadow: inset 0 1px 2px rgba(15, 28, 43, .09), inset 0 0 0 1px rgba(15, 28, 43, .05);
}
.rz-kart.kilit .rz-kart-ic .ic { width: 18px; height: 18px; }

.rz-kart-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rz-kart-ad { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rz-kart-ad b {
  font-size: var(--fs-base); font-weight: 600; letter-spacing: -.005em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-kart-tik { flex: none; display: inline-flex; color: var(--rozet-renk); }
.rz-kart-tik .ic { width: 11px; height: 11px; stroke-width: 3.2; }
.rz-kart-kademe {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--rz-m-ad);
}
.rz-kart-not {
  font-size: 11.5px; line-height: 1.42; color: var(--faint); margin-top: 1px;
}
.rz-kart-tarih {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--faint); margin-top: 2px;
}
.rz-kart-tarih .ic { width: 11px; height: 11px; }
.rz-kart.kilit .rz-kart-ad b { color: var(--rz-kilit-ad); }
.rz-kart.kilit .rz-kart-kademe { color: var(--rz-kilit-kademe); }
.rz-kart.kilit .rz-kart-not { color: var(--rz-kilit-not); }
.rz-kart-ilerleme { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.rz-kart-bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--rz-kilit-bar); overflow: hidden;
}
.rz-kart-bar > i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rozet-renk) 50%, transparent), var(--rozet-renk));
}
.rz-kart-ilerleme em {
  font-style: normal; font-size: var(--fs-xs);
  color: var(--rz-kilit-not); font-variant-numeric: tabular-nums;
}

/* TELEFONA AYRI KURAL YOK — prototipin clamp'leri 320px'e kadar
   tasmadan iniyor (olculdu: 390px'te madalyonlar 2'ser sarar). Bir ara
   `.rz-mad` tabani 96px'e cekilmisti; gereksizdi ve iki tarafi
   ayristiriyordu. */

/* =====================================================================
   CEVIRI DENETIMI (Yonetim > Ceviri) — 10.502 cumlenin Turkcesi
   ---------------------------------------------------------------------
   Ekranin tek isi TARAMAK: goz Ingilizce ile Turkce arasinda gidip
   geliyor. Bu yuzden ikisi YAN YANA ve ayni hizada; kart degil SATIR
   (Senaryolar listesindeki karar) — 60 satir tek ekranda taranabilsin.
   ===================================================================== */

/* Ozet: kalan is + ilerleme. "Ne kadar kaldi" gorunmezse kampanya
   yarida kalir — kullanicinin istegi tam olarak buydu. */
.tc-ozet {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.tc-olcu { display: flex; flex-direction: column; gap: 2px; }
.tc-sv {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tc-sl { font-size: var(--fs-xs); color: var(--faint); }
.tc-olcu:first-child .tc-sv { color: var(--accent); }
.tc-bar-yuva { flex: 1 1 220px; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.tc-bar {
  display: block; height: 6px; border-radius: 3px;
  background: var(--card2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.tc-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.tc-bar-yuva em {
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.tc-seg { margin-bottom: var(--sp-3); }
.tc-etiketler {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tc-et {
  min-height: var(--ctrl-h-sm);
  padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: var(--card2); border: 1px solid var(--btn-line);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis),
              background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.tc-et b { font-weight: 600; color: var(--faint); }
.tc-et.active {
  background: var(--accent); border-color: var(--accent); color: var(--ink-ters);
}
.tc-et.active b { color: var(--ink-ters); }

/* ---- SATIR ---- */
.tc-liste { display: flex; flex-direction: column; }
.tc-satir {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.tc-satir:last-child { border-bottom: 0; }
.tc-satir.acik { background: var(--card2); }

.tc-ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tc-kelime { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
/* Kelimenin Turkcesi — SESSIZ. Ayni satirda uc sey var (kelime,
   karsiligi, durum rozetleri); karsilik kelimeyle ayni agirlikta
   olsaydi hangisinin Ingilizce oldugu okunmazdi. */
.tc-kelime-tr { font-size: var(--fs-xs); color: var(--faint); }
.tc-lvl, .tc-tur {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--faint);
}
.tc-tur { color: var(--accent); }

/* Ingilizce | Turkce | islem — UC SUTUN. Ikisi yan yana durmazsa goz
   satir atlar ve karsilastirma yapilamaz; ekranin butun degeri bu. */
.tc-cift {
  display: grid; align-items: start; gap: var(--sp-4);
  grid-template-columns: 1fr 1fr auto;
}
.tc-en, .tc-tr-metin {
  font-size: var(--fs-md); line-height: 1.45; color: var(--text);
  overflow-wrap: anywhere;
}
.tc-en { color: var(--muted); }
.tc-islem { display: flex; gap: var(--sp-1); }
.tc-islem .icon-btn { width: 34px; height: 34px; }
.tc-ok { color: var(--ok-strong); }
.tc-geri { color: var(--faint); }

/* Durum rozetleri — renk TEK BASINA birakilmaz, ikonla gider. */
.tc-rz {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px var(--sp-2); border-radius: var(--r-full);
}
.tc-rz .ic { width: 11px; height: 11px; }
.tc-rz-duz { background: var(--accent-soft); color: var(--accent-strong); }
.tc-rz-ok { background: var(--ok-soft); color: var(--ok-strong); }

/* Supheli etiketi — bir IDDIA degil bir ISARET: "buraya bak" diyor,
   "burada hata var" demiyor. O yuzden uyari rengi degil notr tint. */
.tc-flag {
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
  background: var(--tint-neutral); color: var(--muted);
}
/* Gecmiste en cok isabet edenler bir adim one cikar. `olumsuz` bilerek
   soluk: 285 adayin 195'i yanlis pozitifti (TURKCE-INCELEME.md). */
.tc-f-harf, .tc-f-artik, .tc-f-soru, .tc-f-ikiz, .tc-f-kalinti, .tc-f-tekrar, .tc-f-kesme {
  background: var(--warn-soft); color: var(--warn-ink);
}
.tc-f-olumsuz { opacity: .7; }

/* ---- DUZELTME PANELI ---- */
.tc-panel {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.tc-panel .fix-field { margin: 0; }
.tc-panel .tc-tr { width: 100%; }

.tc-sayfalar {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.tc-sayfalar span {
  font-size: var(--fs-sm); color: var(--faint); font-variant-numeric: tabular-nums;
}

@media (max-width: 940px) {
  /* Telefonda UST ALTA — 390px'te iki sutun 150px'e duser ve iki cumle
     de dorder satira boluner; yan yana olmanin kazanci kalmaz. */
  .tc-cift { grid-template-columns: 1fr; gap: var(--sp-2); }
  .tc-islem { justify-content: flex-end; }
  .tc-ozet { gap: var(--sp-4); }
  .tc-en, .tc-tr-metin { font-size: var(--fs-base); }
}

/* =====================================================================
   GIRIS EKRANI — MOBIL (design projesi `mobil/Giris.dc.html`)
   ---------------------------------------------------------------------
   ISARETLEME TEK, GORUNUM IKI. Masaustu ile mobil ayni DOM'u kullanir;
   farki yalnizca asagidaki `@media` kurallari yapar. Kullanicinin sarti
   buydu: "responsive tasarim da mobil tasarimla birebir ayni olacak" —
   tek kod calistigi surece bu kendiliginden saglanir. Iki ayri
   isaretleme tutulsaydi zamanla ayrisirdi.

   MOBIL OLCEK SAPMALARI webden BILEREK farkli ve `PLAN.md §1`'de
   gerekcesiyle yazili: girdi ve birincil dugme 56px (basparmak hedefi),
   ikincil 52, kart radius 18, kontrol radius 14, sayfa basligi 26/500.
   Uydurma degil, tasarimin karari.

   DORT BANT (`PLAN.md §4`): S 320-374 · M 375-412 · L 413-480 · T 481+.
   Asla kucülmez: dokunma hedefi (min 44), ikon, 1px kenar, renk, font,
   agirlik. Akiskan: koyu bolge yuksekligi, dikey bosluk, baslik puntosu,
   kenar dolgusu.
   ===================================================================== */

/* YALNIZCA MOBILDE cizilen parcalar: varsayilan GIZLI, asagidaki
   `@media` blogunda acilir. Ters kurulsaydi (mobilde gizle) masaustu
   degismis olurdu — bu turun sarti masaustune DOKUNMAMAK. */
.ay-mod, .auth-guc, .auth-kagit-bas, .ay-filigran { display: none; }

/* GRUPLU FORM KABI — masaustunde YERLESIME GIRMEZ.
   `display: contents` sarmalayiciyi gorunmez kilar; olmasaydi formun
   `gap`i uc alani TEK cocuk sayar ve masaustunde aralarindaki bosluk
   kaybolurdu. Bu turun sarti masaustune dokunmamak. */
.auth-grup { display: contents; }

@media (max-width: 940px) {
  /* ---- KABUK: koyu karsilama + KAGIT YUKSELMESI ----
     Kagit panel koyu bolgenin uzerine `border-radius: 28px 28px 0 0` ile
     biner (negatif margin). Mobilin imza kalibi; `PLAN.md §3`. */
  /* KAYAN KAP `.auth-host` (`overflow: auto`). Yapiskan eylem cubugu
     en yakin KAYAN atasina gore tutunur — o ata gorunum yuksekliginden
     uzunsa cubuk EKRANIN degil KABIN dibine yapisir ve ekran disinda
     kalir. Olculdu: yatayda (844x390) dugme 484'te, gorunum 390.
     `dvh` `vh`ten SONRA yazilir (mobil tarayici cubugu). */
  .auth-host { padding: 0; height: 100vh; height: 100dvh; }
  .auth-wrap { min-height: 100%; }
  .auth-wrap { padding: 0; max-width: none; }
  .auth-split {
    display: flex; flex-direction: column; gap: 0;
    min-height: 100vh; min-height: 100dvh;   /* dvh SONRA: tarayici cubugu */
    border-radius: 0; overflow: visible;
  }

  /* Koyu bolge: `flex: none` — artan/eksilen yer KAGIDA gider. */
  .auth-split .auth-yan {
    order: 1; flex: none;
    padding: 0 24px 24px;
    padding-top: env(safe-area-inset-top);
    border-radius: 0;
  }
  /* Bakir isik huzmesi — `PLAN.md`in "dekoratif gradyan yok" kuralindaki
     UC yapisal istisnadan biri: lacivert yuzeye derinligi veren tek sey. */
  .auth-split .auth-yan::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(90% 70% at 88% -10%,
      rgba(201, 138, 91, .26) 0%, rgba(201, 138, 91, 0) 66%);
  }
  .auth-split .auth-yan > * { position: relative; }

  /* Masaustunun pazarlama blogu mobilde YOK: dort kutu ve uc olcu
     ekranin yarisini yiyordu ve mobil tasarimda hic gecmiyor. */
  .auth-split .ay-bas,
  .auth-split .ay-kutular,
  .auth-split .ay-olcu { display: none; }
  .auth-split .ay-ust { display: block; }

  .auth-split .ay-marka { gap: 12px; margin-top: 14px; }
  .auth-split .ay-marka .brand-logo {
    /* `flex` DE YAZILIR — telefon blogundaki kenar menu kurali
       (`.brand-logo { flex: 0 0 32px }`) bare bir secici ve giris
       ekranindaki logoyu da yakaliyor. Flex satirinda `flex-basis`
       `width`i eziyor: olculdu, 44 yerine 32px cizildi. */
    flex: 0 0 44px;
    width: 44px; height: 44px; border-radius: 14px;
    border: 1px solid rgba(201, 138, 91, .42);
    background: rgba(201, 138, 91, .08);
  }
  .auth-split .ay-marka .brand-logo svg { width: 22px; height: 22px; }
  .auth-split .ay-marka span {
    /* BUYUK HARF DEGIL: masaustu kurali `text-transform: uppercase` +
       genis harf araligi veriyor, prototipte "NevaTeach" normal yazim. */
    text-transform: none;
    font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--yan-metin);
  }

  /* MOD BASLIGI — mobilde ekranin basligini KOYU BOLGE tasir.
     Karttaki `h1` gizlenir; ikisi birden cizilseydi baslik iki kez
     okunurdu. */
  .ay-mod { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
  .ay-mod-bas {
    font-size: var(--m-baslik); font-weight: 400; line-height: 1.14;
    letter-spacing: -.022em; color: #F7FAFC;
  }
  .ay-mod-alt {
    font-size: var(--fs-base); line-height: 1.5;
    color: var(--yan-metin-zayif); max-width: 34ch;
  }
  .ay-seri {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-base); line-height: 1.5; color: var(--yan-metin-zayif);
  }
  .ay-seri-hap {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: var(--r-sm);
    background: rgba(201, 138, 91, .14);
    border: 1px solid rgba(201, 138, 91, .3);
    color: var(--yan-vurgu-2); font-size: var(--fs-sm); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .ay-seri-hap .ic { width: 12px; height: 12px; }

  /* ---- KAGIT PANEL ---- */
  .auth-split .auth-card {
    order: 2; flex: 1; min-height: 0;
    display: flex; padding: 0;
    background: var(--card);
    border-radius: 28px 28px 0 0;
    margin-top: -14px; position: relative; z-index: 1;
  }
  /* KOSENIN ARKASI LACIVERT KALMALI. Kagit panel koyu bolgenin uzerine
     yalnizca 14px biniyor ama kose yaricapi 28px; arta kalan 14px'lik
     yayin arkasinda koyu bolge bitmis oluyor ve sayfa zemini (KUM)
     goruniyordu — yuvarlak kosenin hemen altinda KESKIN bir kose gibi.
     Kullanici ekran goruntusuyle bildirdi (gercek Android cihazda).

     Cozum YERLESIME HIC DOKUNMAZ: koyu bolgenin altina yaricap kadar
     bir BOYA SERIDI serilir (`::after`, akis disinda). Dolgu/margin ile
     yapmak denendi ve geri alindi — o, koyu bolgenin alt dolgusunu
     (24px) degistiriyor ve tasarim sozlesmesini bozuyordu (olcum
     yakaladi). Serit kartin ALTINDA kalir: kart `z-index: 1`. */
  .auth-split .auth-yan::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%;
    height: 28px; background: var(--yan-bg);
  }
  .auth-split .auth-sutun {
    flex: 1; min-width: 0; max-width: none;
    display: flex; flex-direction: column; gap: 15px;
    padding: 22px var(--m-pad) 0;
  }
  /* Karttaki marka ve baslik: koyu bolge ikisini de tasiyor. */
  .auth-split .auth-brand:not(.durum),
  .auth-split .auth-baslik,
  .auth-split .auth-baslik-alt { display: none; }


  /* SIRA — tasarimda: segment · form (birincil dugme dahil) · "ya da" ·
     Google · yasal satir. Isaretlemede Google formdan ONCE duruyor
     (masaustunde dogrusu o). DOM'a dokunmadan `order` ile cevrilir. */
  .auth-split .auth-kagit-bas { order: 1; }
  .auth-split .auth-form { order: 2; }
  .auth-split .auth-or { order: 3; }
  .auth-split .btn-google,
  .auth-split .google-slot { order: 4; }
  .auth-split .auth-note { order: 4; }
  /* "Hesabin yok mu? Kayit ol" — SEGMENT KALKINCA GERI GELDI ve sirasiz
     kalmisti: `order` varsayilani 0 oldugu icin kagit panelin EN USTUNE,
     "Giris yap" basliginin bile ustune cikti (olculdu, ekran goruntusu).
     Sira veren bir blokta, gorunur hale gelen her ogeye sira YAZILIR. */
  .auth-split .auth-switch { order: 5; display: block; }
  .auth-split .auth-yasal { order: 6; }
  .auth-yasal {
    margin: auto 0 14px; font-size: var(--fs-xs); line-height: 1.55;
    text-align: center; color: var(--faint);
  }
  .auth-yasal b { font-weight: 500; color: var(--muted); }

  /* ---- ALANLAR ---- */
  /* ---- GRUPLU FORM KABI ----
     Tasarimin ikinci turu: alanlar ayri ayri kutular degil, TEK cerceve
     icinde 60px satirlar. Etiket SOLDA (74px sabit), aralarinda ice
     girintili sac cizgisi. */
  .auth-split .auth-grup {
    display: flex; flex-direction: column;
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: var(--m-r-kap); overflow: hidden;
  }
  .auth-split .auth-grup .fix-field {
    position: relative; flex-direction: row; align-items: center;
    gap: 10px; height: var(--m-satir); padding: 0 16px; margin: 0;
  }
  /* SAC CIZGISI `border-top` DEGIL `::before`: tasarimda cizgi soldan
     16px iceride basliyor, kenardan degil. */
  .auth-split .auth-grup .fix-field + .fix-field::before {
    content: ''; position: absolute; left: 16px; right: 0; top: 0;
    height: 1px; background: var(--line);
  }
  /* `> span` TEK BASINA YETMEZ: sifre alaninin sarmalayicisi da bir
     `<span>` ve ayni satirin dogrudan cocugu — kural onu da 74px'e
     sikistiriyordu (olculdu: girdi 26px genisliginde kaldi). */
  .auth-split .auth-grup .fix-field > span:not(.auth-sifre) {
    flex: 0 0 74px; font-size: var(--fs-sm); font-weight: 400; color: var(--faint);
  }
  .auth-split .auth-grup input[type="text"],
  .auth-split .auth-grup input[type="email"],
  .auth-split .auth-grup input[type="password"] {
    flex: 1; min-width: 0; height: 100%;
    background: transparent; border: 0; border-radius: 0; padding: 0;
    font-size: 15.5px;
  }
  .auth-split .auth-grup .auth-sifre {
    flex: 1; min-width: 0; display: flex; align-items: center; height: 100%;
  }
  .auth-split .auth-grup .auth-goster {
    position: static; transform: none; flex: none;
    height: 44px; padding: 0 4px; background: transparent;
    font-size: var(--fs-sm); font-weight: 500;
  }
  /* Ipucu satiri ("En az 6 karakter") gruplu satira sigmiyor ve zaten
     sifre gucu cubugu ayni seyi soyluyor. */
  .auth-split .auth-grup .fix-ipucu { display: none; }

  /* Kagit panelin KENDI basligi. Koyu bolge "Tekrar hos geldin" der,
     kagit "Giris yap" — biri karsilama, oteki ekranin adi. */
  .auth-kagit-bas {
    display: block; font-size: 23px; font-weight: 500;
    line-height: 1.15; letter-spacing: -.02em; color: var(--text);
  }

  /* FILIGRAN — koyu bolgenin sag alt kosesinde dev glif. Ayni
     <symbol>den gelir; ayri bir cizim degil. */
  .ay-filigran {
    display: block; position: absolute; right: -38px; bottom: -46px;
    width: 196px; height: 196px; opacity: .05; color: var(--yan-vurgu);
    pointer-events: none;
  }
  .ay-filigran svg { width: 100%; height: 100%; }

  /* Alt satir: "Hesabin yok mu? Kayit ol" — segment yerine geri geldi. */
  .auth-split .auth-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: var(--fs-base); color: var(--faint); text-align: center;
  }
  .auth-split .auth-switch .linkish { min-height: 44px; font-weight: 600; }

  .auth-split .auth-form { gap: 15px; }
  .auth-split .fix-field > span { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
  /* Girdi bicimi artik GRUPLU KAPTA (yukarida). Buradaki v1 kurallari
     ayni ozgullukte ve DAHA SONRA geldikleri icin kabi eziyordu —
     olculdu: sifre girdisi 60 yerine 56px ve dar cikti. */
  .auth-split .auth-form input::placeholder { color: var(--girdi-ipucu); }
  .auth-split .auth-forgot { margin-top: -4px; }
  /* `.linkish` telefonda 40px'e cikiyor (belgeli olcum); tasarim burada
     44 istiyor ve bant taramasi 40'i yakaladi. Giris ekraniyla SINIRLI
     yukseltme — genel kurala dokunulmaz. */
  .auth-split .auth-forgot .linkish { min-height: 44px; }

  /* SIFRE GUCU — kayitta. "Sifre (tekrar)" alani KALDIRILMADI
     (kullanici karari): guc cubugu yanlis YAZILMIS bir sifreyi
     yakalayamaz. Ikisi ayri seyi olcuyor. */
  .auth-guc { display: flex; align-items: center; gap: 9px; margin-top: 1px; }
  /* `[hidden]` ONCELIGI KAYBEDIYOR: sinif kurali `display: flex` yaziyor
     ve oznitelik kuralini eziyor — cubuk daha bir sey yazilmadan
     goruluyordu (olculdu). Acikca geri kapatilir. */
  .auth-guc[hidden] { display: none; }
  .auth-guc-bar { flex: 1; display: flex; gap: 4px; }
  .auth-guc-bar > i {
    flex: 1; height: 4px; border-radius: 2px; background: var(--line-zayif);
  }
  .auth-guc-not {
    flex: none; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
  }
  .auth-guc.guc-1 .auth-guc-bar > i:nth-child(-n+1),
  .auth-guc.guc-2 .auth-guc-bar > i:nth-child(-n+2),
  .auth-guc.guc-3 .auth-guc-bar > i { background: var(--ok-acik); }
  .auth-guc.guc-1 .auth-guc-bar > i:nth-child(-n+1) { background: var(--warn); }
  .auth-guc.guc-1 .auth-guc-not { color: var(--warn-ink); }
  .auth-guc.guc-2 .auth-guc-not,
  .auth-guc.guc-3 .auth-guc-not { color: var(--ok); }

  /* ---- YAPISKAN EYLEM ----
     Birincil dugme her zaman basparmak bolgesinde; klavye acilinca
     klavyenin hemen ustunde kalir. Icerik kayar, dugme kaymaz. */
  .auth-eylem { padding: 0; }
  .auth-split .auth-submit {
    height: var(--m-ctrl-h); border-radius: var(--m-r-kap);
    /* MOBILDE BAKIR — masaustunde LACIVERT kalir. Ikisi ayri tasarim
       kararidir: web prototipinde bu ekranda hic bakir dugme yok,
       mobil prototipinde birincil bakir. */
    background: var(--accent); color: var(--ink-ters);
    font-size: 16px; font-weight: 600;
    box-shadow: 0 10px 22px -14px rgba(163, 87, 46, .95);
  }
  .auth-split .auth-submit:hover:not(:disabled) { background: var(--accent-parlak); }

  .auth-split .btn-google {
    height: var(--m-ctrl-h-s); border-radius: var(--m-r-kap); font-size: 14.5px;
  }
  .auth-split .auth-or { margin: 0; }

  .auth-split .auth-yasal,
  .auth-split .auth-switch + * { margin-top: 0; }
}

/* =====================================================================
   S BANDI — dar VEYA kisa ekran (`PLAN.md §4`)
   320x568'de M bandinin olculeri sigmiyor: koyu bolge ~210px yer
   yiyor ve form klavye acilinca tamamen kayboluyordu. Kucultulen sey
   BOSLUK ve PUNTO; dokunma hedefi 44px'te KALIR.
   ===================================================================== */
@media (max-width: 374px), (max-height: 700px) {
  .auth-split .auth-yan { padding: 0 16px 16px; }
  .auth-split .auth-sutun { gap: 10px; padding: 16px 16px 0; }
  .auth-split .ay-marka { margin-top: 6px; gap: 10px; }
  .auth-split .ay-marka .brand-logo { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; }
  .auth-split .ay-marka .brand-logo svg { width: 18px; height: 18px; }
  .auth-split .ay-marka span { font-size: var(--fs-lg); }
  .ay-mod { margin-top: 10px; gap: 6px; }
  .ay-mod-bas { font-size: 20px; letter-spacing: -.018em; }
  /* IDDIA CUMLESI GIZLENIR — koyu bolge ~90px'e iner ve yalnizca marka
     satiri + baslik kalir. Seri pastili basliga TASINIR, silinmez. */
  .ay-mod-alt { display: none; }
  .auth-split .auth-card { border-radius: 24px 24px 0 0; margin-top: -10px; }
  .auth-split .auth-form { gap: 10px; }
  .auth-split .auth-grup .fix-field { height: 52px; padding: 0 14px; }
  .auth-split .auth-grup .fix-field > span:not(.auth-sifre) { flex-basis: 66px; font-size: 12px; }
  .auth-split .auth-grup input[type="text"],
  .auth-split .auth-grup input[type="email"],
  .auth-split .auth-grup input[type="password"] { font-size: var(--fs-md); }

  .auth-split .auth-submit { height: var(--m-ctrl-h-s); border-radius: 13px; font-size: var(--fs-md); }
  .auth-split .btn-google { height: 48px; border-radius: 13px; font-size: var(--fs-kontrol); }
  /* "ya da" ayraci kalkar: Google dugmesi dogrudan birincilin altina. */
  .auth-split .auth-or { display: none; }
  /* YAPISKAN EYLEM — kisa gorunumde. Klavye acilinca gorunur alan
     ~%45 kuculuyor ve bu blok tam o kosulu yakaliyor: birincil dugme
     klavyenin hemen ustunde kalir, form altinda kayar. */
  .auth-eylem {
    position: sticky; bottom: 0; z-index: 2;
    padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
    box-shadow: 0 -12px 30px -28px rgba(15, 28, 43, .6);
  }
  .auth-split .auth-yasal { display: none; }   /* kisa ekranda yer yok */
}

/* =====================================================================
   YATAY — koyu bolge TEK SATIRA iner
   ---------------------------------------------------------------------
   844x390'da koyu bolge tam boy kalinca form 422px'de basliyordu ve
   birincil dugme ekranin ALTINDA kaliyordu (olculdu: eylem 422..496,
   gorunum 390). YAPISKAN CUBUK BUNU KURTARMAZ: `position: sticky`
   kapsayici blogu tamamen gorunumun altindayken tutunacak yer bulamaz —
   once ICERIGIN sigmasi gerekiyor.

   `max-width: 940px` KORUMASI SART. Bu kurallar yalnizca telefon
   yerlesimi icin; kisa ve GENIS bir masaustu penceresi (1440x420) de
   `max-height`i saglar ve korumasiz birakilirsa iki sutunlu masaustu
   girisine yapiskan cubuk takilirdi.
   ===================================================================== */
@media (max-width: 940px) and (max-height: 480px) {
  .auth-split .auth-yan { padding: 0 16px 8px; }
  /* Marka satiri ile baslik YAN YANA — iki satir yerine tek satir. */
  .auth-split .ay-ust {
    display: flex; align-items: center; gap: 12px;
    padding-top: env(safe-area-inset-top);
  }
  .auth-split .ay-marka { margin-top: 0; }
  .auth-split .ay-mod { margin-top: 0; flex: 1; min-width: 0; gap: 0; }
  .auth-split .ay-mod-bas { font-size: var(--fs-lg); line-height: 1.2; }
  /* Iddia cumlesi, seri pastili ve filigran yatayda yer yiyor. */
  .auth-split .ay-mod-alt,
  .auth-split .ay-seri,
  .auth-split .ay-filigran { display: none; }
  .auth-split .auth-card { margin-top: -8px; border-radius: 20px 20px 0 0; }
  .auth-split .auth-sutun { padding-top: 12px; gap: 8px; }
  /* Kagit basligi koyu bolgeninkini TEKRAR ediyor; darda o gider. */
  .auth-split .auth-kagit-bas { display: none; }
  .auth-split .auth-form { gap: 8px; }
  .auth-split .auth-grup .fix-field { height: 48px; }
}


/* =====================================================================
   BUGUN — TELEFON (mobil tasarim turu, `mobil/Bugun.dc.html`)
   ---------------------------------------------------------------------
   Webin hero'su + "Gunun plani" numarali listesi + iki sutunu yerine
   UC parca: HALKA · EYLEM RAYI · bildirim satirlari. Ana ekran
   KAYDIRILMAZ; derinlik kaydirmayla degil satirin arkasindaki tam ekran
   deste ile kazanilir.

   Kurallarin TAMAMI bu `@media` blogunda — masaustu Bugun ekrani
   (hero + serit + iki sutun) degismedi.
   ===================================================================== */
@media (max-width: 940px) {
  .mb-kok { display: flex; flex-direction: column; gap: 10px; }

  /* ---- OZET KARTI: DORT SUTUN ----
     Sayilar ust cubuktaki ETIKETSIZ hap bandindan buraya tasindi.
     Her sutun kendi ikonunu ve etiketini tasir; aralarinda sac cizgisi. */
  .mb-ozet {
    flex: none; display: flex; align-items: stretch;
    padding: 13px 6px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-card);
  }
  .mb-ozet-s {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 0 2px;
  }
  .mb-ozet-s.cizgili { border-left: 1px solid var(--line-kart); }
  .mb-ozet-ic {
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 9px;
  }
  .mb-ozet-ic svg { width: 14px; height: 14px; }
  .mb-ozet-ic.mavi  { background: var(--tint-blue);   color: var(--st-blue-ink, #3A5A7A); }
  .mb-ozet-ic.mor   { background: var(--tint-violet); color: var(--violet); }
  .mb-ozet-ic.yesil { background: var(--ok-soft);     color: var(--ok); }
  .mb-ozet-s b {
    font-size: 17px; font-weight: 600; line-height: 1;
    letter-spacing: -.022em; font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .mb-ozet-s i {
    font-style: normal; font-size: var(--fs-xs); line-height: 1.2;
    text-align: center; color: var(--faint); white-space: nowrap;
  }

  /* ---- 2x2 KISAYOL IZGARASI ----
     Yatay eylem rayinin yerini aldi: dordu de AYNI anda gorunur. */
  .mb-izgara {
    flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  }
  .mb-ky {
    display: flex; align-items: center; gap: 10px;
    min-height: 66px; padding: 10px 12px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: var(--m-r-kap);
    font-family: inherit; text-align: left; cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .mb-ky:hover { border-color: var(--accent); }
  .mb-ky-ic {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 10px;
  }
  .mb-ky-ic svg { width: 16px; height: 16px; }
  .mb-ky-ic.mavi  { background: var(--tint-blue);   color: var(--st-blue-ink, #3A5A7A); }
  .mb-ky-ic.mor   { background: var(--tint-violet); color: var(--violet); }
  .mb-ky-ic.yesil { background: var(--ok-soft);     color: var(--ok); }
  .mb-ky-ic.bakir { background: var(--accent-soft); color: var(--accent); }
  .mb-ky-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .mb-ky-tx b {
    font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em;
    color: var(--text); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mb-ky-tx i {
    font-style: normal; font-size: var(--fs-xs); color: var(--faint);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- IKI DUGME ---- */
  .mb-alt-eylem { flex: none; display: flex; gap: var(--sp-2); }
  .mb-alt-eylem .mb-ikincil {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--line);
    font-family: inherit; font-size: var(--fs-base); color: var(--muted);
    white-space: nowrap; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis),
                color var(--mo-hizli) var(--mo-cikis);
  }
  .mb-alt-eylem .mb-ikincil:hover { border-color: var(--accent); color: var(--accent); }
  .mb-alt-eylem .mb-ikincil svg { width: 15px; height: 15px; color: var(--accent); }
  .mb-alt-eylem .mb-ikincil.kesik {
    background: transparent; border-style: dashed; border-color: var(--tutamac);
  }
  .mb-alt-eylem .mb-ikincil.kesik svg { color: currentColor; }
  .mb-esnek { flex: 1; min-height: 2px; }

  /* ---- LACIVERT VITRIN: ekranin TEK eylemi ---- */
  .mb-vitrin {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    padding: 18px var(--sp-5);
    background: var(--yan-bg); border-radius: 24px;
  }

  /* HALKA — webin 44px sayaci + 10 parcali gostergesi + durum metni
     ~150px yer aliyordu. Tek halkada ucu birden: ilerleme, sayi ve
     tamamlanma ayni yerde. */
  .mb-halka {
    position: relative; display: grid; place-items: center;
    width: 156px; height: 156px;
  }
  .mb-halka svg { width: 156px; height: 156px; transform: rotate(-90deg); }
  .mb-kanal { fill: none; stroke: var(--yan-kanal); stroke-width: 10; }
  .mb-dolgu {
    fill: none; stroke: var(--yan-vurgu); stroke-width: 10; stroke-linecap: round;
    transition: stroke-dasharray var(--mo-yavas) var(--mo-cikis);
  }
  .mb-dolgu.tamam { stroke: var(--yan-ok); }
  .mb-merkez {
    position: absolute; display: flex; flex-direction: column;
    align-items: center; gap: 1px;
  }
  .mb-sayi { display: flex; align-items: baseline; gap: 5px; }
  .mb-sayi b {
    font-size: 52px; font-weight: 300; line-height: .9;
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    color: var(--yan-metin);
  }
  .mb-sayi i {
    font-style: normal; font-size: 19px; font-weight: 300;
    font-variant-numeric: tabular-nums; color: var(--yan-metin-zayif);
  }
  .mb-birim { font-size: var(--fs-sm); color: var(--yan-metin-zayif); }

  /* Tamamlanma: dolgu yesile doner, ortada 74px onay dairesi. */
  .mb-onay {
    position: absolute; display: grid; place-items: center;
    width: 74px; height: 74px; border-radius: 50%;
    background: var(--ok-soft);
    background: color-mix(in srgb, var(--yan-ok) 20%, transparent);
    border: 1px solid var(--yan-ok);
    border: 1px solid color-mix(in srgb, var(--yan-ok) 36%, transparent);
    color: var(--yan-ok);
  }
  .mb-onay svg { width: 36px; height: 36px; stroke-width: 2.2; }

  /* NEREDEYIM — ortam ve kacinci alistirma TEK satirda. */
  .mb-nerede {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 12px; font-size: var(--fs-base); color: var(--yan-metin-zayif);
    text-align: center;
  }
  .mb-nerede svg { width: 14px; height: 14px; color: var(--yan-vurgu-2); }
  .mb-nerede i { font-style: normal; color: var(--yan-kanal); }

  .mb-bitti {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    margin-top: 12px; text-align: center;
  }
  .mb-bitti b {
    font-size: 24px; font-weight: 400; line-height: 1.15;
    letter-spacing: -.022em; color: var(--yan-metin);
  }
  .mb-bitti span {
    font-size: var(--fs-base); line-height: 1.5; max-width: 36ch;
    color: var(--yan-metin-zayif);
  }

  .mb-eylem { display: flex; width: 100%; margin-top: 14px; }
  .mb-eylem.cift { gap: var(--sp-2); }
  .mb-birincil, .mb-ikincil {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 58px; border-radius: var(--m-r-kap);
    font-family: inherit; font-size: 16px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background var(--mo-orta) var(--mo-cikis);
  }
  .mb-birincil { background: var(--accent); border: 0; color: var(--ink-ters); }
  .mb-birincil:hover { background: var(--accent-parlak); }
  .mb-eylem.cift .mb-birincil, .mb-ikincil { height: 54px; font-size: 14.5px; }
  /* Ikincil KOYU YUZEYDE: cerceveli, dolu degil. Ekranda ayni anda tek
     bakir dugme olur (`PLAN.md §3`). */
  .mb-ikincil {
    background: transparent; color: var(--yan-metin); font-weight: 400;
    border: 1px solid var(--yan-kanal);
  }
  .mb-ikincil:hover { border-color: var(--yan-vurgu); }
  .mb-birincil svg, .mb-ikincil svg { width: 16px; height: 16px; }

  /* ---- EYLEM RAYI — plan listesi dort kutuya iner, YATAY kayar ---- */
  .mb-ray {
    display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px;
    margin: 0 calc(var(--view-yan) * -1); padding-left: var(--view-yan);
    padding-right: var(--view-yan);
    scrollbar-width: none;
  }
  .mb-ray::-webkit-scrollbar { display: none; }
  /* Sag kenarda solma — seridin devam ettigini gosterir. Kaydirilabilir
     oldugu belli olmayinca kullanici son kutuyu HIC gormuyor
     (`.top-stats`ta bir kez yasandi, oradan alinmis ders). */
  .mb-ray {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .mb-kutu {
    flex: none; width: var(--m-kutu-w); height: var(--m-kutu-h);
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--sp-2); padding: 13px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-1);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .mb-kutu:hover { border-color: var(--accent); }
  /* Gunun gorevi — sirasi gelen kutu BAKIR cerceveli. */
  .mb-kutu.acik { border-color: var(--accent-ring); }
  .mb-kutu.mb-kesik { background: transparent; border-style: dashed; box-shadow: none; }
  /* `flex: none` SART — sutun flex'te ikon kabi iceriginden kuculuyor ve
     32 yerine 25px cizilmisti (olculdu). Ayni tuzak `.brand-logo`da da
     yasandi: flex satirinda olcu vermek icin `flex` de yazilmali. */
  .mb-kic {
    flex: none;
    display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  }
  .mb-kutu.acik .mb-kic { background: var(--accent); color: var(--ink-ters); }
  .mb-kic.ok { background: var(--ok-soft); color: var(--ok); }
  .mb-kic svg { width: 17px; height: 17px; }
  .mb-kutu.mb-kesik .mb-kic { background: var(--card2); color: var(--faint); }
  .mb-kmetin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mb-kkas {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
    text-transform: uppercase; color: var(--muted);
  }
  .mb-kutu.acik .mb-kkas { color: var(--accent); }
  .mb-kmetin b {
    font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text); line-height: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mb-kmetin i {
    font-style: normal; font-size: var(--fs-xs); color: var(--faint);
    line-height: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- BILDIRIM SATIRI — webin uyari kartlari tek satira iner ---- */
  .mb-satir {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 56px; padding: 11px 14px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: var(--m-r-kap); box-shadow: var(--shadow-1);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .mb-satir:hover { border-color: var(--accent); }
  .mb-satir.vurgu { border-left: 2px solid var(--accent); }
  .mb-sic {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--tint-neutral); color: var(--muted);
  }
  .mb-sic svg { width: 19px; height: 19px; }
  .mb-sic.mavi  { background: var(--tint-blue);   color: var(--ilerleme-yolda-ic, var(--accent)); }
  .mb-sic.mor   { background: var(--tint-violet); color: var(--violet); }
  .mb-sic.amber { background: var(--warn-soft);   color: var(--warn-strong, var(--warn)); }
  .mb-smetin {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  }
  .mb-smetin b {
    font-size: var(--fs-kontrol); font-weight: 600; letter-spacing: -.01em;
    color: var(--text); line-height: normal;
  }
  /* Metin TEK SATIR — tasarsa kirpilir. Sarilsaydi satir yuksekligi
     icerige gore oynar ve liste dagilirdi. */
  .mb-smetin span {
    font-size: var(--fs-sm); color: var(--faint); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mb-sok { flex: none; display: grid; place-items: center; color: var(--tutamac); }
  .mb-sok svg { width: 16px; height: 16px; transform: rotate(-90deg); }

  /* ================= KELIME DESTESI — tam ekran ================= */
  .md-kok { display: flex; flex-direction: column; gap: var(--sp-3); }
  .md-ust { display: flex; align-items: center; gap: var(--sp-2); }
  /* Deste basligi ortak `.ekran-geri`yi kullanir; burada yalnizca
     satira oturtan negatif marj kalir. */
  .md-ust .ekran-geri { margin-left: -10px; }
  .md-ust b {
    flex: 1; min-width: 0; font-size: 16px; font-weight: 500;
    letter-spacing: -.01em; color: var(--text);
  }
  .md-say {
    flex: none; display: inline-flex; align-items: center;
    height: 28px; padding: 0 10px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .md-kart {
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-5) 18px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 22px; box-shadow: var(--shadow-card);
  }
  .md-kas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .md-bosluk { flex: 1; }
  .md-ortam {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); color: var(--faint); white-space: nowrap;
  }
  .md-ortam svg { width: 12px; height: 12px; }
  .md-bas { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .md-kelime { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .md-kelime b {
    font-size: 40px; font-weight: 500; line-height: 1.02;
    letter-spacing: -.03em; color: var(--text);
  }
  .md-ses {
    flex: none; display: grid; place-items: center;
    width: 48px; height: 48px; border: 0; border-radius: 15px;
    background: var(--accent); color: var(--ink-ters); cursor: pointer;
    transition: background var(--mo-orta) var(--mo-cikis);
  }
  .md-ses:hover { background: var(--accent-parlak); }
  .md-ses svg { width: 21px; height: 21px; }
  .md-tr { font-size: 19px; line-height: 1.35; color: var(--muted); }
  .md-blok {
    display: flex; flex-direction: column; gap: 9px;
    padding-top: 15px; border-top: 1px solid var(--line-kart);
  }
  .md-etiket {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
    text-transform: uppercase; color: var(--faint);
  }
  .md-ses2 {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; margin: -9px -6px;
    background: transparent; border: 0; border-radius: 12px;
    color: var(--accent); cursor: pointer;
    transition: background var(--mo-hizli) var(--mo-cikis);
  }
  .md-ses2:hover { background: var(--page); }
  .md-ses2 svg { width: 17px; height: 17px; }
  .md-en { font-size: 16.5px; line-height: 1.45; color: var(--text); }
  .md-entr { font-size: var(--fs-base); line-height: 1.45; color: var(--faint); }
  .md-durum { display: flex; align-items: center; gap: var(--sp-3); }
  .md-nokta { flex: none; display: flex; gap: 4px; }
  .md-nokta i {
    display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--line);
  }
  .md-nokta i.dolu { background: var(--accent); }
  /* Bant cipi: ikon TEK BASINA birakilmaz — renk ve ikon birlikte gider
     (ilerleme dili kurali), etiket de yaninda durur. */
  .md-bant {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: var(--r-xs);
    font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  }
  /* Zemin ve mürekkep `.bant-*` sinifindan gelir (`--bant-bg` + `color`) —
     ucuncu bir renk tanimlanmaz, ilerleme dili tek yerden okunur. */
  .md-bant { background: var(--bant-bg); }
  .md-bant .bant {
    width: auto; height: auto; background: none; border: 0;
    border-radius: 0; padding: 0;
  }
  .md-bant .bant svg { width: 11px; height: 11px; }
  .md-kutu {
    flex: 1; min-width: 0; text-align: right;
    font-size: var(--fs-sm); color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .md-not { font-size: var(--fs-sm); line-height: 1.5; color: var(--faint); }
  .md-not b { color: var(--muted); }

  .md-sayfa { display: flex; align-items: center; gap: var(--sp-3); }
  .md-ok {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--card); border: 1px solid var(--line);
    color: var(--muted); cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .md-ok:hover { border-color: var(--accent); color: var(--accent); }
  .md-ok[disabled] {
    background: transparent; border-color: var(--line-kart);
    color: var(--tutamac); cursor: default;
  }
  .md-ok svg { width: 18px; height: 18px; transform: rotate(-90deg); }
  .md-ok.sol svg { transform: rotate(90deg); }
  .md-noktalar { flex: 1; display: flex; justify-content: center; gap: 5px; }
  .md-noktalar i {
    display: block; width: 4px; height: 4px; border-radius: 2px;
    background: var(--tutamac);
    transition: width var(--mo-hizli) var(--mo-cikis);
  }
  .md-noktalar i.acik { width: 18px; background: var(--accent); }

  /* SAYFA DIBI BU EKRANDA CIZILMEZ — odak modundaki kararin AYNISI.
     Kural "ana ekran kaydirilmaz" (`PLAN.md §3`); olculdu: icerik 616px
     ile rahat siginca sayfayi 938px'e cikaran sey 178px'lik `.app-foot`
     oluyordu. Dip oteki butun ekranlarda duruyor. */
  .layout.mbugun .app-foot { display: none; }

  /* Ray, ekranin yan dolgusuna kadar TASAR (kenardan kayar gorunsun).
     `--view-yan` yoksa duz deger. */
  .mb-ray { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}

/* ---------------------------------------------------------------------
   S BANDI — dar (<=374px) YA DA kisa (<=700px) ekran. `PLAN.md §4`:
   asla kuculmeyen sey dokunma hedefi, ikon, kenar ve punto tabani;
   akiskan olan koyu bolgenin yuksekligi ve dikey bosluk. Halka burada
   koyu bolgenin karsiligi.
   --------------------------------------------------------------------- */
@media (max-width: 374px), (max-height: 700px) {
  .mb-kok { gap: 10px; }
  .mb-vitrin { padding: 16px var(--sp-4) var(--sp-4); border-radius: 20px; }
  .mb-halka, .mb-halka svg { width: 128px; height: 128px; }
  .mb-sayi b { font-size: 42px; }
  .mb-sayi i { font-size: 17px; }
  .mb-onay { width: 60px; height: 60px; }
  .mb-onay svg { width: 28px; height: 28px; }
  .mb-nerede { margin-top: 10px; }
  .mb-eylem { margin-top: 12px; }
  .mb-birincil, .mb-ikincil { height: var(--m-ctrl-h-s); }
  /* S bandinda YUKSEKLIK SABIT DEGIL: "GUNUN GOREVI" kasi 120px'lik
     kutuda iki satira sariyor ve icerik 100px'i tasiriyordu. Sabit olcu
     M bandinin degeri; darda taban verilir, boyu icerik belirler. */
  .mb-ky { min-height: 60px; padding: 9px 10px; }
  .mb-ozet { padding: 11px 4px; }
  .mb-ozet-s b { font-size: 16px; }
  .mb-satir { min-height: 52px; padding: 9px 12px; }
  .mb-sic { width: 34px; height: 34px; }
  .mb-bitti b { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   YATAY — halka ile eylem YAN YANA. Tek kolonda vitrin 328px kaliyor ve
   390px'lik bir gorunumde birincil dugme ekranin altina dusuyordu
   (olculdu: alt 433 / ekran 390). `PLAN.md §4` yatayda koyu bolgenin
   tek satira inmesini istiyor; buradaki karsiligi iki kolon.
   `max-width` KORUMASI SART — kisa ve genis bir masaustu penceresi de
   `max-height`i saglar.
   --------------------------------------------------------------------- */
@media (max-width: 940px) and (max-height: 480px) {
  .mb-vitrin {
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: var(--sp-4); padding: var(--sp-4);
  }
  .mb-halka, .mb-halka svg { width: 112px; height: 112px; }
  .mb-sayi b { font-size: 34px; }
  .mb-sayi i { font-size: 15px; }
  .mb-nerede, .mb-bitti { margin-top: 0; text-align: left; justify-content: flex-start; }
  .mb-bitti { align-items: flex-start; }
  .mb-eylem { margin-top: 10px; }
  /* Ray yatayda gizlenmez — kaydirilabilir ve tek satir. Yukseklik yine
     TABAN: sabit 88px verildiginde icerik 116px'e cikip tasiyordu
     (olcum yakaladi). */
  .mb-izgara { grid-template-columns: repeat(4, 1fr); }
  .mb-ky { min-height: 58px; }
}

/* =====================================================================
   ISTATISTIK — MASAUSTU (handoff `Istatistik.dc.html`, 26 Agu 2026)

   Ekran uc BOLUME ayrildi ve her bolumun bir kasi var: GENEL ·
   NEREDE ZORLANIYORSUN · CALISMA DUZENIN. Once sekiz kart alt alta
   duruyordu ve hangisinin "ozet" hangisinin "teshis" oldugu yalnizca
   basliklardan okunuyordu; sayfa 2,59 ekrandi ve gozun tutunacagi
   bir kademe yoktu.

   TASARIMLA CAKISAN UC SEY:
     · Bolum kasinin SOLAN cizgisi (linear-gradient 90deg) — "gradyan
       renklendirme yok"; Senaryolar'da ayni karar verildi, duz hairline.
     · Isi haritasi auto-fill minmax(14px,1fr) — 90 gun ragged son
       satir birakir. repeat(30, 1fr) OLCULMUS bir karar (tam 3
       satir) ve KALDI; degisen max-width ve kare orani.
     · Kasit puntolari 10,5–11,5px — "11px alti yazi yok".
   ===================================================================== */

/* ---- BOLUM KASI: bakir etiket + hairline ---- */
.ist-bas {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-2) 0 calc(-1 * var(--sp-1));
}
.ist-bas > span:first-child {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.ist-bas > i { flex: 1; height: 1px; background: var(--line); }

/* Vitrin bu ekranda bir TIK ACIK lacivert (--yan-bg2). Bugun'un
   hero'su --yan-bg ve o kural on ekrani birden bagliyor; handoff
   Istatistik vitrinini kart laciverti veriyor ve telefon vitrinleri
   (.tk-vitrin / .st-vitrin) de zaten o tonda. Kapsam .ist-kok. */
.ist-kok > .card.hero { background: var(--yan-bg2); }

/* ---- HERO: iki seviye kutusundan sonraki YOL blogu ----
   Once burada uc tam genislikte .notice vardi (bilgi · tempo ·
   tahmin) ve hero 517px'e cikiyordu. Handoff ucunu de tek satirlik
   kutuciklara indiriyor: ayni cumleler, dortte bir yer. */
.ist-yol {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid rgba(233, 237, 242, 0.10);
}
.ist-yol-ust {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--yan-metin-orta);
}
.ist-yol-ust > span:last-child { margin-left: auto; }
.ist-yol .goal-bar { margin-top: 10px; }
.ist-kutucuklar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3);
}
.ist-kutucuk {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(233, 237, 242, 0.10);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.ist-kutucuk > b { font-weight: 600; }
.ist-kutucuk > i { font-style: normal; font-size: var(--fs-xs); }
/* Tahmin kutucugu bakir: ekranin tek "ne zaman biter" cevabi. */
.ist-kutucuk.bakir {
  background: rgba(201, 138, 91, 0.09);
  border-color: rgba(201, 138, 91, 0.28);
}
.hero .ist-kutucuk.bakir > b { color: var(--yan-vurgu-2); }
/* Ilerleme seviyesi kutusu bakir cerceveli — iki kutu ayni gorunurse
   hangisinin "kazanilan" oldugu okunmuyor. */
.hero .sv-ikili > .sv-kutu.sv-ilerleme {
  background: rgba(201, 138, 91, 0.09);
  border-color: rgba(201, 138, 91, 0.30);
}
.hero .sv-kutu.sv-ilerleme > .sv-et { color: var(--yan-vurgu-2); }
.hero .sv-kutu > b { font-size: var(--fs-3xl); font-weight: 400; line-height: 1.05; }

/* ---- KPI: uc buyuk kart + dipnot ----
   `.stat-box` IKI SUTUNLU IZGARA (cip | etiket, altinda sayi) ve
   isaretlemesi otuz yerde ayni. Dipnot bu yuzden UCUNCU SATIRA
   yazilir; kutunun kendi duzenine dokunulmaz — flex sanip saran bir
   `<span>` konunca etiket ile dipnot AYNI SATIRA dusuyordu (olculdu). */
/* DIPNOT `--muted` VE 11px. Tintli zeminde `--faint` 4,38:1 olculdu
   (esik 4,5) — belgeli "tint zemin" tuzagi. Etiket zaten `--muted`
   oldugu icin bir adim daha koyulasamiyor; hiyerarsiyi RENK degil
   PUNTO tasir. */
.stat-box > .ist-not {
  grid-column: 1 / -1; grid-row: 3;
  font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-normal);
}
.stat-box.ist-kpi-kart { border-color: var(--line-kart); }

/* ---- OLCU SERIDI: bes sayi, aralarinda hairline ---- */
.ist-serit {
  display: flex; flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-kart);
  border-bottom: 1px solid var(--line-kart);
}
.ist-serit > div {
  flex: 1 1 130px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 var(--sp-4);
  border-left: 1px solid var(--line-kart);
}
.ist-serit > div:first-child { border-left: 0; padding-left: 0; }
.ist-serit > div > b {
  font-size: var(--fs-xl); font-weight: 500; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ist-serit > div > span { font-size: var(--fs-xs); color: var(--faint); }
.ist-serit-not {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--faint);
}

/* ---- DAGILIM SATIRI ----
   .bar-row DEGIL: o sinif Yonetim ve Tekrar ekranlarinda da
   ciziliyor; oradaki olculeri degistirmeden bu ekranin kendi satirini
   yazmak gerekiyordu. */
.ist-satir { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ist-satir > .isr-ad {
  flex: 0 0 clamp(130px, 30%, 200px); min-width: 0;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); color: var(--muted);
}
.ist-satir > .isr-ad > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ORTAM IKONU KIMLIK RENGINI KORUR. Handoff bu ekranda ikonlari
   griye ceviriyor; "kimlik ikona duser" olculmus bir karar
   (renk-tarama.js, 10 ekran) ve kullanicinin acik istegiydi.
   Seciciler `>` ile yazilir: `.ort-ic > .ic` bu kurala yakalanmaz. */
.ist-satir > .isr-ad > .ic { width: 13px; height: 13px; flex: none; color: var(--faint); }
.ist-satir > .isr-ad > .ort-ic { flex: none; font-size: 13px; }
.ist-satir > .isr-cubuk {
  flex: 1; min-width: 0; height: 7px; border-radius: 4px;
  background: var(--ist-ray); overflow: hidden;
}
.ist-satir > .isr-cubuk > i { display: block; height: 100%; border-radius: 4px; background: var(--ist-orta); }
.ist-satir.iyi   > .isr-cubuk > i { background: var(--ist-iyi); }
.ist-satir.zayif > .isr-cubuk > i { background: var(--ist-zayif); }
.ist-satir > .isr-deger {
  flex: 0 0 84px; text-align: right;
  font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums;
}
.ist-satir > .isr-deger > b { font-weight: 600; color: var(--text); }
.ist-satir > .isr-deger > span { color: var(--faint); }
/* SON YUVA HER SATIRDA AYNI GENISLIKTE — "zayif" cipi olan satirda
   yoksa cubuk 46px uzuyor ve genislik yuzdeyi degil CIPIN VARLIGINI
   anlatir hale geliyordu (olculdu: sozcuk turu kartinda iki farkli
   cubuk uzunlugu). */
.ist-satir > .isr-son { flex: 0 0 46px; }
.ist-satir.zayif > .isr-ad { color: var(--text); font-weight: 500; }
.ist-satir.zayif > .isr-ad > .ic { color: var(--ist-zayif-ink); }
.ist-kok { display: flex; flex-direction: column; gap: 14px; }
.ist-kok > * { margin-bottom: 0; }
.isr-zayif {
  flex: 0 0 46px; height: 19px; padding: 0;
  display: grid; place-items: center; border-radius: var(--r-xs);
  background: var(--ist-zayif);
  background: color-mix(in srgb, var(--ist-zayif) 12%, var(--card));
  color: var(--ist-zayif-ink);
  font-size: var(--fs-xs); font-weight: 600;
}
/* Esik acikligi: renk tek basina birakilmaz, kart dibinde yazili. */
.ist-lejant {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-kart);
  font-size: var(--fs-xs); color: var(--muted);
}
.ist-lejant > span { display: flex; align-items: center; gap: 6px; }
.ist-lejant i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ---- SORU vs IFADE: iki buyuk sayi ---- */
.ist-ikili { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.ist-ikili > div {
  flex: 1 1 130px; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.ist-ikili > div > span:first-child { font-size: var(--fs-sm); color: var(--muted); }
.ist-ikili > div > b {
  font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ist-ikili .isr-cubuk {
  display: block; height: 6px; border-radius: 3px;
  background: var(--ist-ray); overflow: hidden;
}
.ist-ikili .isr-cubuk > i { display: block; height: 100%; border-radius: 3px; background: var(--ist-orta); }
.ist-ikili > div.iyi   .isr-cubuk > i { background: var(--ist-iyi); }
.ist-ikili > div.zayif .isr-cubuk > i { background: var(--ist-zayif); }
.ist-ikili > div > i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }

/* ---- EN COK ZORLANDIGIN KELIMELER: kart izgarasi DEGIL liste ----
   Onceki hali 12 wordCardHtml karti idi (285px) ve her kart okunus,
   anlam, ortam, seviye tasiyordu — burada sorulan soru yalnizca
   "hangi kelimede kac yanlis". */
.ist-zor { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 22px; }
.ist-zor-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--sp-2);
  border-bottom: 1px solid var(--line-kart);
}
.ist-zor-satir > .izs-ad {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden;
}
.ist-zor-satir > .izs-ad > b {
  flex: none; font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap;
}
.ist-zor-satir > .izs-ad > span {
  font-size: var(--fs-xs); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ist-zor-satir > .pos-badge { flex: none; }
.ist-zor-satir > .izs-say {
  flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--ist-zayif-ink);
}

/* ---- ISI HARITASI: kareler + lejant ---- */
.card > .heat { max-width: 760px; }
.heat i { height: auto; aspect-ratio: 1; border-radius: 3px; }
.ist-isi-alt {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--faint);
}
.ist-isi-alt i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ist-isi-alt > .bosluk { flex: 1; min-width: var(--sp-4); }
.ist-isi-alt b { font-weight: 600; color: var(--muted); }
.ist-isi-alt > .sag { font-variant-numeric: tabular-nums; }

/* ---- YAZIM: tek serit + lejant (dort kutu DEGIL) ---- */
.ist-yazim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.ist-yazim-buyuk { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.ist-yazim-buyuk > b {
  font-size: 38px; font-weight: 500; line-height: 1; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ist-yazim-buyuk > span { font-size: var(--fs-sm); color: var(--faint); }
.ist-yazim-sag { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ist-yazim-serit { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--ist-ray); }
.ist-yazim-serit > i { height: 100%; }
.ist-yazim-serit > i.ok { background: var(--ist-iyi); }
.ist-yazim-serit > i.kay { background: var(--ist-orta); }
.ist-yazim-serit > i.hata { background: var(--ist-zayif); }
.ist-yazim-lej { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-sm); color: var(--muted); }
.ist-yazim-lej > span { display: flex; align-items: center; gap: 6px; }
.ist-yazim-lej i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ist-yazim-lej b { font-weight: 600; color: var(--text); }
.ist-yazim-alt {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-kart);
}
.ist-yazim-alt > .yst-alt { margin: 0; font-size: var(--fs-kontrol); font-weight: 500; }
.ist-yazim-alt > .sub { margin: 4px 0 11px; }
.yst-kelime { height: 36px; padding: 0 7px 0 12px; font-weight: 400; }
.yst-kelime > b:first-child { font-weight: 600; }

/* =====================================================================
   OZEL DERS DEFTERI (Yonetim > Ogrenciler)

   Uygulamanin ogrenme dilinden AYRI bir ekran ama AYNI olcekten
   besleniyor: kendi punto/kose/renk degeri icat etmiyor.

   ODEME DURUMU RENGI: bekleyen tutar KIRMIZI DEGIL kehribar. Ilerleme
   dilinde kirmizi yalnizca gercek yanlis cevaba ayrilmis; burada da
   "bekleyen" bir hata degil, "henuz alinmadi" demek.
   ===================================================================== */
.og-kok { display: flex; flex-direction: column; gap: var(--sp-4); }
.og-yukleniyor { padding: var(--sp-6); color: var(--faint); font-size: var(--fs-sm); }
.og-bosluk { flex: 1; min-width: var(--sp-2); }

/* ---- LACIVERT VITRIN: donem · toplam · tahsilat · tek eylem ----
   Once tepede sahipsiz bir "Donem" girdisi, altinda hairline ile
   ayrilmis yuzeysiz dort sayi vardi; ekran bitmemis goruunuyordu.
   Uygulamanin kendi kalibi: ekranin tek eylemi koyu bir vitrinde
   durur (`.tk-vitrin` · `.ist-kok > .hero`). */
.og-vitrin {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--yan-bg2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.og-vitrin::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--yan-cizgi);
}
.og-v-ust { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.og-v-kas {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--yan-vurgu-2); line-height: normal;
}
/* Koyu yuzeyde girdi: dolgu degil CERCEVE — dolu bir kutu ucuncu bir
   katman olurdu (giris ekranindaki okunus hapiyla ayni karar). */
/* SECICIYE ELEMAN ADI YAZILIR: genel `input[type=text], ...` kurali
   (0,1,1) tek sinifi (0,1,0) eziyor ve girdi kagit zeminli, esnek
   genislikte kaliyordu (olculdu: 440px). Ayni tuzak `.yz-input`ta da
   belgeli. */
/* DONEM GEZINMESI — acilir liste DEGIL.
   Panel bu vitrinde kirpiliyordu: `.og-vitrin` yuvarlak kosesi ve ust
   sac cizgisi icin `overflow: hidden` tasiyor. Kirpmayi acmak vitrinin
   kalibini bozardi; dogru cozum ekranin ZATEN kullandigi dil — ay
   basligindaki ok-ad-ok gezinmesi. Ayni jest iki olcekte. */
.og-v-nav { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.og-v-ok {
  flex: none; display: grid; place-items: center;
  width: var(--icon-box); height: var(--icon-box);
  border: 0; border-radius: var(--r-md);
  background: none; color: var(--yan-metin); cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.og-v-ok:hover:not(:disabled) { background: var(--yan-aktif); color: var(--yan-vurgu-2); }
.og-v-ok:disabled { opacity: .3; cursor: default; }
.og-v-ok .ic { width: 18px; height: 18px; }
/* Sette saga bakan ok yok — ayni ikonun 180 donmusu (belgeli cozum). */
#ogDonemIleri .ic { transform: rotate(180deg); }
/* Ad SABIT GENISLIKTE: donem degisince oklar kimildamasin. */
.og-v-donem-ad {
  min-width: 10ch; text-align: center;
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em;
  color: var(--yan-metin); font-variant-numeric: tabular-nums;
}
.og-v-arsiv-hap {
  flex: none; padding: 2px var(--sp-2); border-radius: var(--r-full);
  border: 1px solid var(--yan-kanal);
  color: var(--yan-metin-zayif); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-kas); text-transform: uppercase;
}
/* Takvimin "Bugun"unun donem olcegindeki karsiligi: uzaga gidildiginde
   TEK tikla geri getirir. Yalnizca gerektiginde cizilir. */
.og-v-bugun {
  flex: none; height: var(--ctrl-h-sm); min-height: 0;
  border-color: var(--yan-kanal); background: transparent; color: var(--yan-metin);
}
.og-v-bugun:hover { border-color: var(--yan-cizgi); background: var(--yan-aktif); }
.og-v-ekle { min-height: var(--ctrl-h); }

.og-v-sayi { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-1); }
.og-v-sayi > b {
  flex: none;
  font-size: var(--fs-4xl); font-weight: 500; line-height: .95; letter-spacing: -.03em;
  color: var(--yan-metin); font-variant-numeric: tabular-nums;
}
.og-v-sayi > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.og-v-sayi i {
  font-style: normal; font-size: var(--fs-kontrol); font-weight: 500;
  color: var(--yan-metin); line-height: normal;
}
.og-v-sayi em {
  font-style: normal; font-size: var(--fs-sm); color: var(--yan-metin-orta);
  line-height: 1.4;
}

/* CUBUK IKI SAYIYI BIRDEN TASIR: dolu = tahsil edilen, kalan =
   bekleyen. Kanal kehribar tintli, dolgu yesil. */
.og-v-cubuk {
  height: 6px; border-radius: var(--r-full); overflow: hidden;
  background: rgba(219, 162, 119, .30);
}
.og-v-cubuk > i { display: block; height: 100%; background: var(--yan-ok); }
.og-v-lej { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.og-v-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--yan-metin-orta);
}
.og-v-l b { font-weight: 600; color: var(--yan-metin); font-variant-numeric: tabular-nums; }
.og-v-l .ic { width: 14px; height: 14px; flex: none; }
.og-v-l.ok .ic  { color: var(--yan-ok); }
.og-v-l.bek .ic { color: var(--yan-vurgu-2); }

.og-ok    { color: var(--ok-strong); }
.og-bekle { color: var(--warn-ink); }

/* ---- LISTE ---- */
.og-liste-kart { padding: var(--sp-2) var(--sp-3); }
.og-liste { display: flex; flex-direction: column; }
.og-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 64px;
  padding: var(--sp-3) var(--sp-2);
  background: none; border: 0;
  border-top: 1px solid var(--line-kart);
  border-radius: var(--r-sm);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis);
}
.og-satir:first-child { border-top: 0; }
.og-satir:hover { background: var(--card2); }
.og-satir.pasif { opacity: .6; }

/* MADALYON ORTAK TAKVIMLE AYNI KIMLIK RENGINI TASIR.
   Once notr griydi ("renk dili acmaz"); ortak takvim `ogRenk(id)` ile
   o dili ZATEN acti ve ayni ogrenci iki yerde iki farkli renkteydi.
   Renk KIMLIKTIR, durum degil — odeme durumunu cubuk tasiyor.
   Zemin tint, murekkep tam ton: dolu renk uzerinde beyaz harf
   ailelere gore erirdi (`.bi-ic` tuzagi, belgeli). */
.og-avatar {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--og-renk, var(--muted)) 14%, var(--card));
  /* TINT ZEMIN TUZAGI (belgeli): kimlik renginin %14 tinti zemini
     aciyor ve ayni ailenin taban tonu 4,5 esiginin ALTINA dusuyor —
     olculdu, on rengin dordu 3,41-4,05 arasindaydi. Murekkep metne
     dogru karistirilir; hue korunur, kural iki temada da dogru yone
     calisir (`.bi-ic` kaliDi). */
  color: var(--og-renk, var(--muted));
  color: color-mix(in srgb, var(--og-renk, var(--muted)) 62%, var(--text));
  border: 1px solid color-mix(in srgb, var(--og-renk, var(--line-kart)) 32%, transparent);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}
.og-ad { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.og-ad > b { font-size: var(--fs-md); font-weight: 600; }
.og-ad > i {
  font-style: normal; font-size: var(--fs-sm); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sagdaki blok: tutar · cubuk · durum. Uc ayri kolon yerine TEK
   yigin — goz bir kez asagi iner, uc kez saga degil. */
.og-tahsil {
  flex: 0 0 176px; display: flex; flex-direction: column; gap: 5px;
  align-items: flex-end; text-align: right;
}
.og-tahsil > b {
  font-size: var(--fs-lg); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.og-mini {
  display: block; width: 100%; height: 4px;
  border-radius: var(--r-full); overflow: hidden;
  background: color-mix(in srgb, var(--warn-ink) 24%, transparent);
}
.og-mini > i { display: block; height: 100%; background: var(--ok); }
.og-tahsil > em {
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.og-tahsil u { text-decoration: none; font-weight: 600; }

/* Ders/program eksikse UC SIFIR degil, eksigin adi yazilir. */
.og-uyari {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--sp-3); height: 28px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--warn-ink) 12%, transparent);
  color: var(--warn-ink); font-size: var(--fs-xs); font-weight: 600;
}
.og-uyari .ic { width: 13px; height: 13px; }

/* EKSIK UCRET SATIRI — kunyenin dibinde, hairline ustunde.
   KEHRIBAR, KIRMIZI DEGIL: ilerleme dilinde kirmizi yalnizca gercek
   yanlis cevaba ayrilmis; eksik bir damga hata degil, tamamlanmamis
   bir giris. Metin `--warn-ink` (kart zemininde olculdu). */
.og-eksik {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn-ink) 10%, transparent);
  color: var(--warn-ink); font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.og-eksik > .ic { flex: none; width: 16px; height: 16px; }
.og-eksik > span { flex: 1 1 auto; min-width: 0; }
.og-eksik b { font-weight: 600; }
.og-eksik .btn { flex: none; }

.og-ok-ic { flex: none; color: var(--faint); transform: rotate(-90deg); }
.og-ok-ic .ic { width: 16px; height: 16px; }

/* ---- ARSIV ----
   Arsivlenmis satir TIKLANABILIR DEGIL: icinde gercek bir "Geri al"
   dugmesi var ve ic ice buton gecersiz HTML'dir (tarayici ici disari
   tasir). Once geri alinir, sonra acilir. */
.og-satir.arsivli { cursor: default; }
.og-satir.arsivli:hover { background: none; }
.og-uyari.og-arsivde { background: var(--tint-neutral); color: var(--muted); }
.og-geriac { flex: none; }
.og-v-arsiv.acik { border-color: var(--accent); color: var(--accent); }
/* Arsiv/sil dugmesi ikon-only: baslik satirinda "Bilgiler"in yaninda
   sessiz durur, ne yaptigini `title` soyler. */
.og-sil { flex: none; padding-inline: var(--sp-3); color: var(--muted); }
.og-sil:hover { color: var(--bad); border-color: var(--bad); }
.og-sil .ic { width: 16px; height: 16px; }

/* Ikinci bilgi paneli KENDI YUZEYINDE: iki gri paragraf alt alta
   duruldugunda hangisinin uyari oldugu okunmuyordu. */
.og-form-not-alt {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--tint-neutral);
  color: var(--muted);
}

/* Rapor ekraninin eylem satiri — kunyeden AYRI, ekran degistirmiyor. */
.og-bas { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.og-bas > b { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.015em; }

/* ---- DETAY: KUNYE ----
   Once tepede ciplak bir baslik satiri, altinda sahipsiz bir
   "Veli: ..." paragrafi vardi; ucret ve tahsilat hic yoktu ve gormek
   icin listeye geri donmek gerekiyordu. Kimlik + para tek kartta. */
.og-kunye { padding: var(--sp-4) var(--sp-5); }
.og-kunye-ust { display: flex; align-items: center; gap: var(--sp-3); }
.og-avatar-l { width: 46px; height: 46px; font-size: var(--fs-md); }
.og-kunye-ad { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.og-kunye-ad > b {
  font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-kunye-ad > i {
  font-style: normal; font-size: var(--fs-sm); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* PARA BLOGU KENDI YUZEYINDE. Once kartin uzerinde ciplak bir sac
   cizgisiyle duruyordu ve satir "siradan" okunuyordu (kullanici
   bildirdi). Yuzey degisimi cizgiden daha cok sey soyler: burasi
   kimlik degil PARA. Iki katman — kart + inset; "kart icinde kart"
   siniri (en fazla 2 yuzey) korunur. */
.og-kunye-para {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) 0;
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--card2); border: 1px solid var(--line-kart);
  border-radius: var(--r-md);
}
.og-kunye-para > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 var(--sp-4); border-left: 1px solid var(--line-kart);
}
/* TOPLAM ve BEKLEYEN kavram rengini tasir: yesil tahsil edileni,
   kehribar bekleyeni anlatir. Ayni dil vitrinde de kullaniliyor
   (`.og-v-l`) — burada bir basamak sessiz. KIRMIZI YOK: ilerleme
   dilinde kirmizi yalnizca gercek yanlis cevaba ayrilmis. */
.og-kunye-para .og-bekle { color: var(--warn-ink); }
.og-kunye-para > span:first-child { padding-left: 0; border-left: 0; }
/* ETIKET KAS OLUR, SAYI BASAMAK ATLAR. Once ikisi de govde tonundaydi
   (11px gri kucuk harf + 17px sayi) ve satir "sıradan" okunuyordu;
   hiyerarsiyi punto degil yalnizca renk tasiyordu. */
.og-kunye-para i {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  /* `--faint` DEGIL: blok kendi yuzeyine (`--card2`) tasininca kas
     4,54'e dustu — 4,5 esiginin hemen ustu. `.stat-box` etiketinde
     belgeli duzeltmenin aynisi; hiyerarsiyi punto zaten tasiyor. */
  color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-kas);
}
.og-kunye-para b {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1.05;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
/* CUBUK KALAN ALANI YEMEZ. 1440px'te 760px'lik ince bir serit oluyor
   ve altindaki oran satirindan kopuyordu; ikisi TEK blok olarak saga
   yaslanir ve birbirine ait okunur. */
.og-kunye-cubuk {
  flex: 0 1 300px; min-width: 120px; height: 8px;
  margin-left: auto; padding: 0 !important; border: 0 !important;
  border-radius: var(--r-full); overflow: hidden;
  background: color-mix(in srgb, var(--warn-ink) 22%, transparent);
}
.og-kunye-cubuk > i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--ok);
}
/* Cubuk tek basina ne oldugunu soylemiyordu — liste satirinda altinda
   "N ders · X bekliyor" yaziyor, kunyede hicbir sey yoktu. */
/* Cubugun lejanti: vitrindeki `.og-v-l` dili, bir basamak sessiz. */
.og-kunye-oran {
  flex: 1 1 100%; padding: 0 !important; border: 0 !important;
  margin-top: 5px;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.og-kunye-oran .ic { width: 13px; height: 13px; color: var(--ok-strong); }
.og-kunye-oran b { color: var(--ok-strong); font-weight: 600; }

.og-slotlar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.og-slot { display: flex; align-items: center; gap: var(--sp-2); }
.og-slot > select, .og-slot > input {
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.og-slot > .og-slot-gun { flex: 1 1 160px; min-width: 0; }
.og-slot > .og-slot-saat { flex: 0 0 120px; }
.og-slot-sil { flex: none; }

/* ---- GENEL TOPLAM PENCERESI ----
   Donem ustu toplam SUREKLI GORUNMEZ (kullanici karari): vitrin bu
   donemi anlatir, bu ayri bir soru. Ozet blogu vitrinin lacivert
   dilini tasir — ayni sayi, ayni kalip, ayri yer. */
.og-genel { display: flex; flex-direction: column; gap: var(--sp-3); }
.og-genel-ust {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--yan-bg2); border-radius: var(--r-lg);
}
.og-genel-sayi { display: flex; align-items: center; gap: 12px; }
.og-genel-sayi > b {
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em;
  line-height: 1; color: var(--yan-metin); font-variant-numeric: tabular-nums;
}
.og-genel-sayi > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.og-genel-sayi i {
  font-style: normal; font-size: var(--fs-sm); font-weight: 600;
  color: var(--yan-metin);
}
.og-genel-sayi em {
  font-style: normal; font-size: var(--fs-xs); color: var(--yan-metin-zayif);
}
.og-genel-cubuk {
  display: block; height: 8px; border-radius: var(--r-full); overflow: hidden;
  background: var(--yan-kanal);
}
.og-genel-cubuk > i { display: block; height: 100%; background: var(--yan-ok); }
.og-genel-lej { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

.og-genel-liste {
  display: flex; flex-direction: column;
  max-height: 42vh; overflow-y: auto;
  border: 1px solid var(--line-kart); border-radius: var(--r-md);
}
.og-genel-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--ctrl-h); padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-kart); cursor: pointer;
}
.og-genel-satir:first-child { border-top: 0; }
.og-genel-satir:hover { background: var(--card2); }
.og-genel-satir > input { flex: none; width: 17px; height: 17px; }
.og-genel-ad { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.og-genel-ad > b { font-size: var(--fs-base); font-weight: 600; }
.og-genel-ad > i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
.og-genel-tut {
  flex: none; display: flex; flex-direction: column; gap: 2px;
  align-items: flex-end; text-align: right;
}
.og-genel-tut > b {
  font-size: var(--fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.og-genel-tut > i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
/* Segment satirinin sagindaki SESSIZ giris. */
.og-genel-btn { flex: none; }

/* ---- DONEMDEN AKTAR PENCERESI ----
   Tasima degil KOPYALAMA: gerekce sunucuda ve CLAUDE.md'de yazili. */
.og-aktar { display: flex; flex-direction: column; gap: var(--sp-3); }
.og-aktar-kaynak { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.og-aktar-kaynak b { color: var(--text); font-weight: 600; }
.og-aktar-liste {
  display: flex; flex-direction: column;
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line-kart); border-radius: var(--r-md);
}
.og-aktar-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--ctrl-h); padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-kart); cursor: pointer;
}
.og-aktar-satir:first-child { border-top: 0; }
.og-aktar-satir:hover { background: var(--card2); }
/* Hedefte ZATEN VAR olan ogrenci sessiz ve secilemez: ayni adi ikinci
   kez eklemek kopya kayit uretirdi (sunucu da ada gore atlar). */
.og-aktar-satir.pasif { cursor: default; opacity: .55; }
.og-aktar-satir.pasif:hover { background: none; }
.og-aktar-satir > input { flex: none; width: 17px; height: 17px; }
.og-aktar-satir .og-avatar { width: 32px; height: 32px; font-size: var(--fs-xs); }
.og-aktar-ad { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.og-aktar-ad > b { font-size: var(--fs-base); font-weight: 600; }
.og-aktar-ad > i {
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-aktar-var {
  flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.og-aktar-seg { flex-wrap: wrap; }
/* Bos durumda iki eylem yan yana. */
.bos-durum .bd-eylem { justify-content: center; }

/* ---- VELI RAPORU: KIP SEGMENTI ----
   Yazdirmada cizilmez (`og-yazdirma`): veli bir denetim degil raporun
   kendisini gormeli. */
.og-rapor-seg { margin-bottom: var(--sp-2); }
/* KIPIN KAPSAMI — segmentin hemen altinda, tek satir. Dugme etiketi
   kisa kalmali ("Tumu · 4"); neyin tumu oldugunu bu satir soyler. */
.og-rapor-kapsam {
  margin: 0 0 var(--sp-4); font-size: var(--fs-xs); color: var(--muted);
  line-height: var(--lh-normal);
}
.og-rapor-kapsam b { color: var(--text); font-weight: 600; }
/* TARIH ARALIGI — rapor artik goruntulenen aya kilitli degil.
   Kullanici: "tarih araligi secip tamamini vermemiz gerekiyor." */
.og-rapor-ara {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.og-rapor-ara > label { display: flex; flex-direction: column; gap: 4px; }
.og-rapor-ara > label > span {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--ls-kas);
}
/* YERLI KUTUYA STIL YAZILMAZ — `APP.TarihSaat` onu gizliyor ve kendi
   dugmesini koyuyor. Eski kural (yukseklik + dolgu) eleman adiyla
   yazildigi icin `.ts-native`i EZIYOR ve gizli girdi 44px'lik bir
   hayalet olarak yer kapliyordu (olcumde yakalandi: "2 gorunur"). */
.og-rapor-ara > label > .ts { min-width: 148px; }
/* Uc hazir aralik TEK GRUP: aralarindan bolunmesin (sablon seridinde
   ogrenilen ders). */
.og-rapor-hazir { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.og-rapor-hazir > .btn { min-height: var(--ctrl-h-sm); height: var(--ctrl-h-sm); }
@media (max-width: 560px) {
  .og-rapor-ara > label { flex: 1 1 140px; }
  .og-rapor-hazir { flex: 1 1 100%; }
  .og-rapor-hazir > .btn { flex: 1 1 0; justify-content: center; }
}
/* Durum, RAPORUN ICINDE bir hap: yazdirmada da kalir — velinin
   gordugu tek sey neyin odendigi. Kehribar/yesil, KIRMIZI DEGIL. */
.ogr-durum {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--warn-ink) 12%, transparent);
  color: var(--warn-ink);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.ogr-durum.odendi {
  background: color-mix(in srgb, var(--ok-strong) 12%, transparent);
  color: var(--ok-strong);
}

/* ---- SECIM CUBUGU ---- */
.og-secim {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-4);
  border-bottom: 1px solid var(--line-kart);
  margin-bottom: var(--sp-3);
}
.og-secim-say {
  font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums;
}
.og-secim-say b { font-weight: 600; color: var(--text); }

/* ---- AY GRUPLARI + DERS SATIRI ---- */
.og-ay { margin-bottom: var(--sp-4); }
.og-ay:last-child { margin-bottom: 0; }
.og-ay-bas {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  border-bottom: 1px solid var(--line-kart);
  font-size: var(--fs-sm); color: var(--muted);
}
.og-ay-bas > b { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.og-ay-bas i { font-style: normal; font-weight: 600; }

.og-ders {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line-kart);
  cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis);
}
.og-ders:hover { background: var(--card2); }
.og-ders.secili { background: var(--accent-soft); }
.og-ders.iptal { opacity: .55; }
.og-ders.iptal .og-d-tarih { text-decoration: line-through; }
.og-sec { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.og-d-tarih {
  display: flex; flex-direction: column; gap: 1px;
  font-size: var(--fs-base); color: var(--text);
}
.og-d-tarih > i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
.og-d-ucret {
  flex: none; font-size: var(--fs-base); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.og-durum {
  flex: none; height: 21px; padding: 0 8px;
  display: grid; place-items: center; border-radius: var(--r-xs);
  background: var(--tint-neutral); color: var(--faint);
  font-size: var(--fs-xs); font-weight: 600;
}
.og-d-odendi {
  flex: 0 0 84px; text-align: right;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ok-strong);
}
.og-d-odendi .ic { width: 14px; height: 14px; }
/* GENISLIK ETIKETE GORE. 108px'te acilir liste dugmesi 90px'e
   dusuyor ve "yapildi" `text-overflow: ellipsis` ile "yapil…" olarak
   ciziliyordu — kirpma OLCUMDE GORUNMUYOR cunku ellipsis
   `scrollWidth`i `clientWidth`e esitliyor. Ekran goruntusu yakaladi. */
.og-d-durum {
  flex: 0 0 136px; height: var(--ctrl-h-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--btn-line); border-radius: var(--r-sm);
  background: var(--card); color: var(--muted); font: inherit; font-size: var(--fs-xs);
}

/* ---- PENCEREDEKI FORM ---- */
.og-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.og-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
/* ETIKET METNI TEK PARCA: `<i>(istege bagli)</i>` sutun yonlu flex'te
   AYRI BIR SATIR oluyordu ("Veli adi" / "(istege bagli)" alt alta).
   Isaretlemede metin bir `<span>`e sarildi; bu kural onu satir yapar. */
.og-form label > span { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.og-form label i { font-style: normal; color: var(--faint); }
.og-form input {
  /* `flex: none` SART. Sutun yonlu flex'te girdi ana eksende
     BUZULUYOR: `height: 44px` yazili oldugu halde 19px ciziliyordu ve
     11px'lik yaricap o boyda TAM OVAL gorunuyordu (kullanici bildirdi,
     olculdu). Yukseklik yazmak yetmez, buzulme de kapatilir. */
  flex: none;
  height: var(--ctrl-h); box-sizing: border-box;
  padding: 0 var(--sp-3);
  border: 1px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.og-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Tarih alaninin YERLI kutusu artik cizilmiyor — `APP.TarihSaat` onu
   gizleyip kendi dugmesini koyuyor (`.ts`). Alan boyu genel `input`
   kuralindan gelir ve yalnizca gelistirme kosmazsa gorunur. */
.og-form .ts { flex: none; }
.og-form-ikili { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.og-form-ikili > label { flex: 1 1 150px; min-width: 0; }
/* BLOK, FLEX DEGIL. Flex olunca `<b>` ayri bir sutun oluyor ve cumle
   "Ucret | her derse ayri damgalanir | : burada..." diye parcalaniyordu
   — projede BESINCI kez ayni tuzak (`.notice`, `.sr-l > b`,
   `.auth-head > b`, `.ay-liste b`). Ikon satir ici. */
.og-form-not {
  margin: 0;
  font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--faint);
}
.og-form-not .ic {
  width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px;
}
.og-form-not b { color: var(--muted); font-weight: 600; }

/* =====================================================================
   VELI RAPORU — ekranda kagit sayfa, yazdirmada TEK ICERIK

   PDF kutuphanesi yok (derleme adimi yok, CDN yasak): tarayicinin
   "PDF olarak kaydet" secenegi gercek bir PDF uretiyor. Yazdirma
   kurali bu yuzden urunun bir parcasi, suslemesi degil.
   ===================================================================== */
.og-rapor {
  background: var(--card);
  border: 1px solid var(--line-kart);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-card);
}
.ogr-bas {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--accent);
}
.ogr-bas > b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
.ogr-bas > span {
  margin-left: auto; text-align: right;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-sm); color: var(--muted);
}
.ogr-bas > span > em {
  font-style: normal; font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ogr-kim { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.ogr-kim > div { display: flex; flex-direction: column; gap: 2px; }
.ogr-kim span { font-size: var(--fs-xs); color: var(--faint); }
.ogr-kim b { font-size: var(--fs-md); font-weight: 600; }

.ogr-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ogr-tablo th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
}
.ogr-tablo td {
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line-kart);
  font-variant-numeric: tabular-nums;
}
.ogr-tablo .sag { text-align: right; }
.ogr-tablo tfoot td {
  border-top: 2px solid var(--line-strong); border-bottom: 0;
  padding-top: var(--sp-3); font-weight: 600;
}
.ogr-tablo tfoot b { font-size: var(--fs-md); }
/* OZET KUTUSU: raporun ilk okunacak yeri. Once sayilar yalnizca
   tablonun dibindeki cumlede duruyordu ve veli once tabloyu okumak
   zorundaydi. Yazdirmada da KALIR. */
.ogr-ozet {
  display: flex; flex-wrap: wrap; margin-top: var(--sp-5);
  border: 1px solid var(--line-kart); border-radius: var(--r-md);
  overflow: hidden;
}
.ogr-ozet > div {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--line-kart);
}
.ogr-ozet > div:first-child { border-left: 0; }
.ogr-ozet span {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--ls-kas);
}
.ogr-ozet b {
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.ogr-ozet-vurgu { background: var(--card2); }

.ogr-not { margin: var(--sp-4) 0 0; font-size: var(--fs-base); line-height: var(--lh-rahat); }
/* BOS RAPOR — duz bir cumle DEGIL: ne oldugunu, neden bos oldugunu ve
   ne yapilacagini birlikte soyler (belgeli `bosDurum` kurali). Once tek
   satirlik silik bir metindi ve kullanici bos tabloyu "bozuk" diye
   okuyordu. */
.ogr-bos {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-2);
  margin: 0; padding: var(--sp-5);
  background: var(--card2); border: 1px solid var(--line-kart);
  border-radius: var(--r-md);
}
.ogr-bos > b { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.ogr-bos > span { font-size: var(--fs-sm); color: var(--muted); }
.ogr-alt {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-6);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-kart);
  font-size: var(--fs-xs); color: var(--faint);
}
.ogr-alt > span:last-child { margin-left: auto; }

@media (max-width: 940px) {
  .og-rapor { padding: var(--sp-4); }
  /* ALTI SUTUN 390px'E SIGMIYOR. Yatay kaydirma denendi ve BIRAKILDI:
     ucret sutunu ekran disinda kaliyor, kaydirilabildigi belli olmuyor
     ve raporun tek onemli sayisi gorunmuyordu (ekran goruntusu
     yakaladi). Telefonda uc sutun kalir — sira no, gun ve sure duser;
     gun tarihten okunuyor, sure zaten kunyede yazili. YAZDIRMADA
     ALTISI DA GERI GELIR: PDF her zaman A4 genisliginde. */
  .ogr-tablo th:nth-child(1), .ogr-tablo td:nth-child(1),
  .ogr-tablo th:nth-child(3), .ogr-tablo td:nth-child(3),
  .ogr-tablo th:nth-child(5), .ogr-tablo td:nth-child(5) { display: none; }
  .ogr-tablo tfoot td:first-child { display: table-cell; }
  .ogr-bas > b { font-size: var(--fs-lg); }
  .og-bas > b { font-size: var(--fs-lg); }
  .og-bas { flex-wrap: wrap; }
  .og-kunye { padding: var(--sp-4); }
  .og-kunye-ad > b { font-size: var(--fs-lg); }
  /* AD SATIRIN ILK KURBANI OLMAZ. Kunye satiri geri (40) + madalyon
     (44) + ad + "Bilgiler" + sil dugmesini tek satirda tasiyordu;
     dugmeler daralmadigi icin ADA 28px kaliyor ve "Berra KAYA"
     ekranda "B..." diye ciziliyordu (olculdu). Kunyenin isi KIMLIK —
     daralacak sey eylemlerdir. `og-bosluk` telefonda satir sonuna
     doner: ad ust satirda tam durur, iki eylem alta iner. */
  .og-kunye-ust { flex-wrap: wrap; }
  .og-kunye-ust > .og-bosluk { flex-basis: 100%; height: 0; min-width: 0; }
  .og-kunye-ust > #ogDuzenle { flex: 1 1 auto; justify-content: center; }
  /* Tablet genisliginde satir zaten sigiyor: orada "Bilgiler"i tam
     genislige germek dev bir cerceve birakiyordu. */
  @media (min-width: 561px) {
    .og-kunye-ust { flex-wrap: nowrap; }
    .og-kunye-ust > .og-bosluk { flex: 1 1 auto; height: auto; }
    .og-kunye-ust > #ogDuzenle { flex: none; }
  }
  /* Dar ekranda cubuk KENDI SATIRINDA: uc sayinin yanina sikisinca
     20px'e dusuyor ve ilerlemeyi anlatmiyor. */
  .og-kunye-cubuk { flex: 1 1 100%; max-width: none; margin: var(--sp-2) 0 0; }
  .og-kunye-oran { text-align: left; }
  .og-rapor-kok { padding-bottom: calc(var(--mnav-h, 77px) + var(--sp-2)); }
  .og-d-durum { flex-basis: 118px; }
  .og-d-odendi { flex-basis: 0; }
  .og-d-odendi .ic { width: 16px; height: 16px; }
}

/* ---- YAZDIRMA: yalnizca rapor ---- */
@media print {
  /* Kabuk komple gider — kenar menu, ust cubuk, alt gezinme, sayfa
     dibi, yonetim sekmeleri ve raporun kendi eylem satiri. */
  .sidebar, .topbar, .mobil-nav, .app-foot, .toast, .sheet, .sheet-perde,
  .nav-panel, .og-yazdirma, .seg { display: none !important; }
  html, body, .layout, .main, .view, #view, #admRoot, #ogHost, .og-kok {
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    background: #fff !important; color: #000 !important;
    max-width: none !important; width: auto !important;
    height: auto !important; overflow: visible !important;
  }
  /* ---- KAGIT OLCEGI: px DEGIL pt ----
     Ekran olcegi (13,5px govde) kagitta cocuksu duruyordu: baslik
     kucuk, tablo sikisik, sayilar govdeyle ayni agirlikta. Yazdirma
     kendi olcegini kullanir; ekranin `--fs-*` basamaklari BURAYA
     GECMEZ. Tek renk: bakir, yalnizca IKI cizgide ve toplamda. */
  .og-rapor {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important; background: #fff !important;
    font-size: 10.5pt !important; line-height: 1.45 !important;
    color: #16202b !important;
  }
  /* KUNYE: adin altinda bakir kural, sagda donem ve aralik. */
  .ogr-bas {
    align-items: flex-end !important;
    padding-bottom: 7pt !important; margin-bottom: 14pt !important;
    border-bottom: 1.6pt solid #A3572E !important;
  }
  .ogr-bas > b {
    font-size: 18pt !important; font-weight: 600 !important;
    letter-spacing: -.015em !important; color: #16202b !important;
  }
  .ogr-bas > span { font-size: 9pt !important; color: #55606c !important; }
  .ogr-bas > span > em { font-size: 8.5pt !important; color: #78838f !important; }

  /* KIMLIK: ciplak satir degil CERCEVELI kutu — velinin bakacagi
     sabit bilgi bir arada dursun. */
  .ogr-kim {
    gap: 0 !important; margin-bottom: 14pt !important;
    border: .6pt solid #d8d2c8 !important; border-radius: 3pt !important;
  }
  .ogr-kim > div {
    flex: 1 1 auto !important; gap: 2pt !important;
    padding: 7pt 10pt !important; border-left: .6pt solid #d8d2c8 !important;
  }
  .ogr-kim > div:first-child { border-left: 0 !important; }
  .ogr-kim span {
    font-size: 7.5pt !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .1em;
    color: #78838f !important;
  }
  .ogr-kim b { font-size: 11pt !important; color: #16202b !important; }

  /* TABLO: ince kurallar, sayilar sagda ve tabular. */
  .ogr-tablo { font-size: 9.5pt !important; }
  .ogr-tablo th {
    padding: 0 5pt 5pt !important;
    font-size: 7.5pt !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .09em;
    color: #78838f !important;
    border-bottom: .9pt solid #16202b !important;
  }
  .ogr-tablo td {
    padding: 5.5pt 5pt !important;
    border-bottom: .4pt solid #e4e0d9 !important;
    color: #16202b !important;
  }
  .ogr-tablo tfoot td {
    border-top: .9pt solid #16202b !important; border-bottom: 0 !important;
    padding-top: 7pt !important;
    font-size: 10pt !important; color: #16202b !important;
  }
  .ogr-tablo tfoot b { font-size: 12pt !important; color: #A3572E !important; }
  /* DURUM: kagitta DOLU HAP degil metin — gri bloklar hem murekkep
     yer hem ucuz gorunur. */
  .ogr-durum {
    padding: 0 !important; background: none !important; border-radius: 0 !important;
    font-size: 8.5pt !important; color: #55606c !important;
  }
  .ogr-durum.odendi { color: #2F5340 !important; }

  /* OZET: raporun okunacak ilk yeri; sayfa arasinda BOLUNMEZ. */
  .ogr-ozet {
    margin-top: 14pt !important;
    border: .6pt solid #d8d2c8 !important; border-radius: 3pt !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ogr-ozet > div {
    padding: 8pt 10pt !important; gap: 2pt !important;
    border-left: .6pt solid #d8d2c8 !important;
  }
  .ogr-ozet > div:first-child { border-left: 0 !important; }
  .ogr-ozet span {
    font-size: 7.5pt !important; letter-spacing: .1em; color: #78838f !important;
  }
  .ogr-ozet b { font-size: 14pt !important; color: #16202b !important; }
  .ogr-ozet-vurgu { background: #faf7f2 !important; }
  .ogr-ozet .og-bekle { color: #A3572E !important; }
  .ogr-ozet .og-ok { color: #2F5340 !important; }

  .ogr-not {
    margin-top: 10pt !important; font-size: 9.5pt !important;
    color: #55606c !important;
  }
  .ogr-not b { color: #16202b !important; }
  .ogr-alt {
    margin-top: 16pt !important; padding-top: 6pt !important;
    border-top: .6pt solid #d8d2c8 !important;
    font-size: 8pt !important; color: #78838f !important;
  }
  /* Uzun listede satirlar sayfa arasinda BOLUNMEZ ve baslik her
     sayfada tekrarlanir — 40 derslik bir rapor iki sayfa olabiliyor. */
  .ogr-tablo { display: table !important; white-space: normal !important; }
  /* Telefonda gizlenen uc sutun YAZDIRMADA GERI GELIR — kagit dar
     degil ve veli tam dokumu gormeli. */
  .ogr-tablo th, .ogr-tablo td { display: table-cell !important; }
  .og-rapor-kok { padding-bottom: 0 !important; }
  .ogr-tablo thead { display: table-header-group; }
  .ogr-tablo tr { break-inside: avoid; page-break-inside: avoid; }
  /* Renkler kagida BASILSIN: `print-color-adjust` olmadan tarayici
     zeminleri ve ince renkleri atiyor ve ozet kutusu duz beyaz
     ciziliyor. */
  .og-rapor, .og-rapor * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { size: A4; margin: 16mm 14mm 18mm; }
}

/* ---------------------------------------------------------------------
   HAFTALIK RITIM (27 Agu 2026 → 7 Eyl 2026 duzeltmesi)

   Kullanici: "ders ucreti bir kere tanimlanir, ogrenci adi, veli adi bir
   kere tanimlanir. bundan sonrasi haftalik dersleri eklemek. ucretler
   otomatik gelir ve sadece her hafta odeme alindiginda onaylanir."

   Once 78 ders alt alta AY AY diziliyordu ve odeme icin uzun listede
   kutu avlamak gerekiyordu. Simdi ekranin birimi HAFTA: odenmis hafta
   tek satira iner, acik kalan yalnizca bekleyenler.
   --------------------------------------------------------------------- */

/* Program karti — bir kez kurulur, sonra katli durur. */
.og-prog-bas {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--ctrl-h);
  padding: 0; background: none; border: 0;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.og-prog-bas > .ic { flex: none; width: 17px; height: 17px; color: var(--faint); }
.og-prog-bas > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.og-prog-bas b { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.008em; }
.og-prog-bas i {
  font-style: normal; font-size: var(--fs-sm); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-prog-ok { flex: none; color: var(--faint); transition: transform var(--mo-hizli) var(--mo-cikis); }
.og-prog-ok .ic { width: 18px; height: 18px; }
.og-prog.acik .og-prog-ok { transform: rotate(180deg); }
.og-prog-govde { padding-top: var(--sp-4); }

/* ---- HAFTA SATIRI ---- */
.og-hafta { border-bottom: 1px solid var(--line-kart); }
.og-h-bas {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-2) 0;
}
.og-h-ac {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 0; background: none; border: 0;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.og-h-ok {
  flex: none; align-self: center; color: var(--faint);
  transition: transform var(--mo-hizli) var(--mo-cikis);
}
.og-h-ok .ic { width: 16px; height: 16px; display: block; }
.og-hafta.acik .og-h-ok { transform: rotate(180deg); }
.og-h-ac > b { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.og-h-ac > i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
.og-h-tut {
  flex: none; font-size: var(--fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.og-h-bos { flex: none; font-size: var(--fs-xs); color: var(--faint); }
/* HAFTANIN TEK EYLEMI: "Odeme geldi". Odendiyse sessiz onay olur. */
.og-h-ode { flex: none; min-height: var(--ctrl-h-sm); white-space: nowrap; }
.og-h-ode.oldu {
  background: none; border-color: transparent;
  color: var(--ok-strong); box-shadow: none;
}
.og-h-ode.oldu:hover:not(:disabled) { background: var(--card2); border-color: var(--line); }
.og-hafta.bitti .og-h-ac > b { color: var(--muted); font-weight: 500; }
.og-h-govde { padding-bottom: var(--sp-2); }

@media (max-width: 940px) {
  /* Telefonda hafta satiri IKI SATIRA iner: ustte tarih + tutar,
     altta tam genislikte eylem. Tek satirda dugme 90px'e sikisip
     etiketi kirpiliyordu. */
  .og-h-bas { flex-wrap: wrap; row-gap: var(--sp-2); }
  .og-h-ode { flex: 1 1 100%; justify-content: center; min-height: var(--ctrl-h); }
  .og-prog-bas b { font-size: var(--fs-md); }
}

/* ---------------------------------------------------------------------
   YONETIM SEKMELERI TELEFONDA TEK SIRA — sarmaz, KAYAR

   Olculdu (390px): dokuz sekme DORT SATIRA sariyor ve ekranin ust
   ucte birini yiyordu; altindaki icerige ulasmak icin once sekme
   duvarini gecmek gerekiyordu. `.top-stats` icin verilen kararin
   aynisi: tek sira + saga dogru solan maske, boylece kaydirilabildigi
   de belli olur (maske olmadan ucuncu hap hic gorulmuyordu — belgeli
   ders).
   --------------------------------------------------------------------- */
@media (max-width: 940px) {
  #admRoot > .seg {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--card-pad));
    padding-inline: var(--card-pad);
    scroll-behavior: smooth;
  }
  /* MASKE YONE GORE — sabit sag maske AKTIF SEKMEYI SOLDURUYORDU:
     serit son chip'e kaydiginda ("Ogrenciler") secili sekme tam
     solma bolgesinde kaliyor ve secili olan sey en silik sey
     oluyordu. Maske artik yalnizca O YONDE icerik VARSA cizilir. */
  #admRoot > .seg.kayar-sag {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  #admRoot > .seg.kayar-sol {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%);
    mask-image: linear-gradient(90deg, transparent, #000 12%);
  }
  #admRoot > .seg.kayar-sol.kayar-sag {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  #admRoot > .seg::-webkit-scrollbar { display: none; }
  #admRoot > .seg > .schip { flex: none; }

  /* VITRIN: dar ekranda dolgu ve sayi bir adim kuculur, ekleme
     dugmesi tam genislige iner (basparmak hedefi). */
  .og-vitrin { padding: var(--sp-4); border-radius: var(--r-lg); }
  .og-v-sayi > b { font-size: var(--fs-2xl); }
  .og-v-ekle { flex: 1 1 100%; justify-content: center; }
  .og-v-lej { gap: var(--sp-1) var(--sp-4); }

  /* SATIR TELEFONDA IKI SATIRA INER: 176px'lik tahsilat yigini ile ad
     yan yana 390px'e sigmiyor; ad ustte, tahsilat madalyonun
     hizasindan devam eder. */
  .og-liste-kart { padding: var(--sp-1) var(--sp-2); }
  .og-satir { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-1); }
  .og-ad { flex: 1 1 auto; }
  .og-tahsil {
    flex: 1 1 100%; align-items: stretch; text-align: left;
    padding-left: calc(40px + var(--sp-3));
  }
  .og-tahsil > b { font-size: var(--fs-md); }
  .og-uyari { margin-left: calc(40px + var(--sp-3)); }
  .og-ok-ic { position: absolute; right: var(--sp-1); }
  .og-satir { position: relative; }

  /* Secim cubugu: rapor akisi icin duruyor ama haftalik dugme asil
     eylem oldugu icin burada SESSIZ kalir. */
  .og-secim { gap: var(--sp-2) var(--sp-2); }
  .og-secim > .btn { flex: 1 1 auto; justify-content: center; }
  .og-secim-say { flex: 1 1 100%; order: -1; }
}

/* =====================================================================
   TAKVIM (7 Eyl 2026) — ekranin birimi AY

   Kullanici: "yil boyunca tum satirlar asagi mi eklenecek... koysana
   calendar". Once donemin 78 dersi tek listede alt alta diziliyordu.
   Simdi bir AY izgarasi: sabit 6 satir, ileri/geri oklari, ve ders
   hucrenin ICINDE. Sayfa boyu ay degistikce DEGISMEZ.
   ===================================================================== */
/* ---- AY BASLIGI ----
   Once yedi oge (iki ok, ay adi, "Bugun", bosluk, uc sayi) TEK bir
   sarilabilir flex satirindaydi; dar ekranda sayilar oklarin altina,
   "Bugun" ayin yanina kaciyordu — kullanici "responsive olunca her sey
   dagink gorunmesin" dedi. Simdi iki KATI satir: gezinme ve sayilar. */
.og-ay-bas {
  display: flex; flex-direction: column; gap: var(--sp-2);
  /* ALIGN-ITEMS SUTUN YONUNDE GENISLIK KURALIDIR — belgeli tuzak,
     UCUNCU kez. Yukaridaki eski `.og-ay-bas` kurali (tek satirlik
     baslik doneminden kalma) `align-items: baseline` tasiyor; yonu
     `column` yapip hizayi SIFIRLAMAYINCA baseline sutunda
     `flex-start` gibi davraniyor ve satir icerigi kadar DARALIYOR.
     Olculdu: bar 383px, kartin tamami degil — o yuzden uc kolonlu
     izgara "ortalasa" bile ay adi ekranin solunda kaliyordu. */
  align-items: stretch;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-kart);
}
/* AY ADI ORTADA. Once flex + `og-bosluk` ile sola dayaliydi ve
   "Bugun" sagda kaliyordu; kullanici "eylul 2026 ortalansin, neden
   sola dayali duruyor" dedi. Uc kolonlu izgara: bos | gezinme | Bugun.
   Yan kolonlar `1fr` oldugu icin gezinme, dugmenin genisliginden
   BAGIMSIZ olarak tam ortada durur. */
.og-ay-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--sp-2);
}
.og-ay-bar > .og-bosluk { display: none; }
.og-ay-bar > .og-bugun { justify-self: end; }
.og-ay-nav { grid-column: 2; justify-self: center; }
/* Ozet satiri yoksa alt cizgi de gerekmiyor: baslik tek satira iner. */
.og-ay-bas.yalin { padding-bottom: 0; border-bottom: 0; }
/* Oklar ve ay adi TEK OGE — aralarina hicbir sey giremez. */
.og-ay-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.og-ay-ad {
  /* AY ADI RENKLI: takvim kartinin cipasi o ve notr mürekkeple
     yanindaki oklardan ayrilmiyordu ("renklendir ki belli olsun").
     Renk `--accent` — yeni bir ton icat edilmedi. */
  color: var(--accent);
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em;
  /* Ay adi degisince oklar KIMILDAMASIN: en uzun ad ("Eylul 2026")
     kadar yer ayrilir ve icerik ortalanir. */
  min-width: 9.5ch; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Oklar CERCEVESIZ: kart zaten kendi yuzeyinde ve iki cerceveli kutu
   ay adindan daha cok yer kapliyordu. */
.og-ay-ok {
  flex: none; display: grid; place-items: center;
  width: var(--ctrl-h); height: var(--ctrl-h);
  border: 0; border-radius: var(--r-md);
  background: none; color: var(--muted); cursor: pointer;
  transition: background-color var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis);
}
.og-ay-ok:hover { background: var(--card2); color: var(--accent); }
.og-ay-ok .ic { width: 18px; height: 18px; }
/* Ileri oku ayni ikonun 180 donmusu — sette saga bakan ok yok ve
   "ikonu yeniden cizme" kuralinin belgeli cozumu bu. */
#ogAyIleri .ic { transform: rotate(180deg); }
.og-bugun { flex: none; }

/* Sayilar KENDI SATIRINDA, aralarinda dikey sac cizgisi. */
.og-ay-ozet {
  display: flex; flex-wrap: wrap; align-items: center;
  font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums;
}
.og-ay-ozet > span { padding: 0 var(--sp-3); border-left: 1px solid var(--line-kart); }
.og-ay-ozet > span:first-child { padding-left: 0; border-left: 0; }
.og-ay-ozet b { font-weight: 600; color: var(--text); }
.og-ay-ozet .og-bekle, .og-ay-ozet .og-ok { font-weight: 600; }

/* ---- SABLON SERIDI: asil is burada ---- */
.og-sablon {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--card2); border: 1px solid var(--line-kart);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
/* UC DUGME TEK GRUP: ya birlikte sigar ya birlikte alt satira iner.
   Once ucu de seridin dogrudan cocuguydu ve ARALARINDAN boluniyordu. */
.og-sablon-eylem { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* AYNI SATIRDAKI KONTROLLER AYNI YUKSEKLIKTE — satirin kurali,
   bilesenin degil. Telefon olcegi birincili 52'ye cikariyor (`.btn.
   btn-primary`) ve ucu bir arada duran bu satirda 46/46/52 cikiyordu
   (olculdu: ustler 654/654/651, yani satir TIRTIKLI). O olcek ekranin
   TEK ana eylemi icin dogru; burada uc kardes var. */
.og-sablon-eylem > .btn,
.og-sablon-eylem > .btn.btn-primary {
  min-height: var(--ctrl-h-sm); height: var(--ctrl-h-sm);
}
@media (max-width: 940px) {
  .og-sablon-eylem { flex: 1 1 100%; }
  .og-sablon-eylem > .btn,
  .og-sablon-eylem > .btn.btn-primary {
    flex: 1 1 0; min-width: 0; justify-content: center;
    min-height: 46px; height: 46px;
  }
}
/* 430px altinda uc etiket tek satira sigmiyor: grup iki satira iner ve
   birincil kendi satirini alir — "Bu ayi ekle" asil eylem. */
@media (max-width: 430px) {
  .og-sablon-eylem { flex-wrap: wrap; }
  .og-sablon-eylem > .btn.btn-primary { flex: 1 1 100%; }
}
.og-sablon-et { font-size: var(--fs-sm); color: var(--muted); }
.og-sablon-et .ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.og-sablon-et b { color: var(--text); font-weight: 600; }

/* ---- IZGARA ---- */
.og-takvim {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.og-tk-bas {
  padding: 0 0 var(--sp-1);
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  letter-spacing: var(--ls-kas); text-transform: uppercase; text-align: center;
}
.og-tk-gun {
  position: relative;
  min-height: 74px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 5px;
  border: 1px solid var(--line-kart); border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis);
}
.og-tk-gun:hover { border-color: var(--line-strong); }
.og-tk-gun.bos { border-color: transparent; background: none; cursor: default; }
.og-tk-gun.bugun { border-color: var(--accent); }
.og-tk-no {
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.og-tk-gun.bugun .og-tk-no { color: var(--accent); }

/* Hucredeki ders — durumu RENK VE METIN birlikte tasir. */
.og-tk-ders {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-xs);
  font: inherit; text-align: left; cursor: pointer;
  background: var(--tint-neutral); color: var(--text);
}
.og-tk-ders b { font-size: var(--fs-xs); font-weight: 600; }
.og-tk-ders i {
  font-style: normal; font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* ODENMEMIS DERS HER YERDE AYNI RENK. Ogrenci detayindaki takvim
   kehribar, ortak takvim kirmizi kalsaydi ayni kavram iki renkte
   olurdu ("ayni kavram her yerde ayni renk"). Ayrim DERS ile TUTAR
   arasinda: odenmemis bir DERS kirmizi, bekleyen TUTAR (vitrin, kunye,
   ay ozeti) kehribar kalir — o bir uyari degil, bir bakiye. */
.og-tk-ders.bekliyor {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}
.og-tk-ders.bekliyor i { color: var(--bad); font-weight: 600; }
.og-tk-ders.odendi {
  background: color-mix(in srgb, var(--ok) 12%, var(--card));
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
}
.og-tk-ders.odendi i { color: var(--ok-strong); font-weight: 600; }
.og-tk-ders.iptal, .og-tk-ders.tatil { opacity: .6; }
.og-tk-ders.iptal b, .og-tk-ders.tatil b { text-decoration: line-through; }

/* ---- AYIN EYLEMLERI ---- */
.og-ay-eylem {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-kart);
}
.og-ay-eylem .btn { min-height: var(--ctrl-h); }
.og-ay-tamam {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-base); font-weight: 600; color: var(--ok-strong);
}
.og-ay-tamam .ic { width: 16px; height: 16px; }
.og-bos-ay {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-kart);
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--faint);
}
.og-bos-ay b { color: var(--muted); font-weight: 600; }

/* ---- ORTAK TAKVIM: ayni gunde birden fazla ogrenci ----
   Hucrede her ders KENDI cipinde. Renk kimlik (ogrenci), ✓ durum
   (odendi). Iki anlam iki kanalda. */
.og-seg { margin-bottom: 0; }
/* Lejant HAP olarak: ciplak nokta + metin ciftleri dar ekranda birbirine
   yapisik iki kelime gibi okunuyordu. */
/* TEK SATIR, YATAY KAYDIRILIR — sarmaz. Uc ogrenciyle bile iki satira
   iniyor ve takvimi asagi itiyordu; kullanicinin kendi onerisi
   "isimleri yan yana kaydirilabilir sekilde". Maske uygulamada belgeli
   kaydirma isareti (`.tur-serit`, `.top-stats`): kaymayan bir kapta
   maske KIRLILIKTIR, o yuzden yalnizca gercekten tasan seritte durur —
   burada serit `nowrap` ve tasabilir. */
.og-lejant {
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
/* Maske YALNIZCA tasan seritte (`.kayar`, JS cizimden sonra yazar). */
.og-lejant.kayar {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.og-lejant::-webkit-scrollbar { display: none; }
.og-lejant > .og-lej { flex: none; }
.og-lej {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--og-renk) 26%, transparent);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--og-renk) 10%, var(--card));
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-lej > i {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--og-renk); flex: none;
}
.og-r0 { --og-renk: var(--og-r0); }
.og-r1 { --og-renk: var(--og-r1); }
.og-r2 { --og-renk: var(--og-r2); }
.og-r3 { --og-renk: var(--og-r3); }
.og-r4 { --og-renk: var(--og-r4); }
.og-r5 { --og-renk: var(--og-r5); }
.og-r6 { --og-renk: var(--og-r6); }
.og-r7 { --og-renk: var(--og-r7); }
.og-r8 { --og-renk: var(--og-r8); }
.og-r9 { --og-renk: var(--og-r9); }

/* GENIS EKRANDA AYNI DIL: nokta yok, cip var — durumu SOL KENAR
   SERIDI tasir. Once odenmemis cip hicbir isaret tasimiyordu; "odendi"
   bir ✓ aliyor, "bekliyor" ise yalnizca ✓'nin YOKLUGUYLA anlatiliyordu
   ve bu bir isaret degil. */
.og-cip {
  display: flex; align-items: center; gap: 5px;
  width: 100%; padding: 3px 6px 3px 9px;
  box-shadow: inset 3px 0 0 var(--bad);
  border: 1px solid color-mix(in srgb, var(--og-renk) 32%, transparent);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--og-renk) 13%, var(--card));
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--mo-hizli) var(--mo-cikis);
}
.og-cip:hover { border-color: var(--og-renk); }
.og-cip-nokta {
  flex: none; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--og-renk);
}
.og-cip > b {
  flex: none; font-size: var(--fs-xs); font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* Ad TASARSA KIRPILIR — hucre 7 sutuna bolunmus, sarmak satiri
   patlatirdi. Tam adi `title` tasir. */
.og-cip > em {
  flex: 1; min-width: 0; font-style: normal; font-size: var(--fs-xs);
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-cip-ok { flex: none; color: var(--ok-strong); display: inline-flex; }
.og-cip-ok .ic { width: 11px; height: 11px; }
.og-cip.odendi { box-shadow: inset 3px 0 0 var(--ok); }
.og-cip.iptal, .og-cip.tatil { opacity: .55; box-shadow: inset 3px 0 0 var(--line-strong); }
.og-cip.iptal > b, .og-cip.tatil > b { text-decoration: line-through; }
/* Ortak takvimde hucre daha yuksek: bir gunde uc ders olabiliyor. */
.og-takvim-ortak .og-tk-gun { min-height: 86px; }

/* ---- TELEFON GORUNUMU: NOKTA ----
   41px'lik hucre "18:00 + durum" tasimiyor (olculdu: saat tek basina
   31px, cip 34px — saat "18:0" diye kirpiliyordu). Telefonda hucrede
   yalnizca renkli nokta durur; dokununca gunun dersleri alt sayfada
   acilir. Kullanicinin kendi cozumu. */
.og-noktalar { display: none; gap: 5px; flex-wrap: wrap; margin-top: auto; }
/* NOKTA YALNIZCA KIMLIK — iki kanal denendi ve GERI ALINDI.
   Once odenmis ders "ici bos", sonra durum "renkli halka" olarak
   ciziliyordu; ikisini de kullanici bildirdi ("ici bos halkalarin ne
   anlama geldigini anlamadim" - "badgeler cok karisik, ayirt
   edilemiyor"). 8px'lik bir isaret iki kanal tasiyamaz: dolgu ile
   halka o olcekte tek leke olarak okunuyor. Odeme artik GUNUN KOSE
   ROZETINDE — kendi olceginde (16px) ve kendi katmaninda. */
.og-nokta {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--og-renk); flex: none;
}
/* Iptal ve tatil bir ODEME durumu degil — para dilinden cikar. */
.og-nokta.iptal, .og-nokta.tatil { background: var(--faint); opacity: .5; }

/* ---- GUNUN ODEME ROZETI ----
   Hucrenin sag ust kosesinde, gun numarasinin karsisinda. Dolu daire:
   cevresinde baska bir sey yok ve 16px kendi basina okunur. Sayi "kac
   ders bekliyor" der — nokta sayisini tekrar etmez, PARASI bekleyeni
   sayar (iptal/tatil girmez). */
.og-gun-rozet {
  width: 16px; height: 16px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-ters); flex: none;
}
/* KONUMLANDIRMA HUCREYE AIT, ROZETE DEGIL — ayni sinif lejantta da
   kullaniliyor ve orada satir icinde akmali. */
.og-tk-gun > .og-gun-rozet { position: absolute; top: 4px; right: 4px; }
.og-gun-rozet.odendi { background: var(--ok); }
.og-gun-rozet.bekliyor { background: var(--bad); }
.og-gun-rozet .ic { width: 11px; height: 11px; }
.og-gun-rozet > b {
  font-size: 10px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Gun numarasi rozetin altina kacmasin. */
.og-takvim-ortak .og-tk-no { padding-right: 18px; }

/* Ikinci kanalin lejanti — isaret takvimdekinin birebir aynisi. */
/* NEGATIF UST MARJ YOKTU — vardi ve `.og-lejant`in 12px'lik alt
   boslugunu TAM OLARAK sifirliyordu: iki lejant yapisik ciziliyordu
   (kullanici bildirdi, olculdu: 0px). Bunlar AYRI iki sozluk (kim ·
   odeme); araları gorulmeli. */
.og-lejant-durum {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
}
/* Lejant isareti takvimdekinin BIREBIR aynisi (og-gun-rozet) —
   tarif etmek yerine gostermek. Konumlandirma hucreye ait, rozetin
   kendisine degil; boylece ayni sinif iki yerde de calisir. */
.og-ld {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--muted);
}
.og-ld-not { color: var(--faint); }

/* Gunun alt sayfasi: saat · ad · tutar */
.og-gunliste { display: flex; flex-direction: column; }
.og-gunsatir {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-1);
  background: none; border: 0; border-top: 1px solid var(--line-kart);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.og-gunsatir:first-child { border-top: 0; }
.og-gunsatir:hover { background: var(--card2); }
.og-gunsatir > .og-cip-nokta { width: 10px; height: 10px; }
.og-gunsatir > b {
  flex: none; font-size: var(--fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.og-gunsatir > em {
  flex: 1; min-width: 0; font-style: normal; font-size: var(--fs-base);
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-gunsatir > u {
  flex: none; text-decoration: none; font-size: var(--fs-base); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.og-gunsatir.odendi > u { color: var(--ok-strong); }
.og-gunsatir.bekliyor > u { color: var(--bad); }
/* GUN LISTESINDE HALKA YOK: satirda durum zaten METIN olarak yazili
   (odendi / bekliyor) ve renkli. Nokta orada da yalnizca kimlik. */
.og-gunsatir.iptal, .og-gunsatir.tatil { opacity: .55; }

/* ---- SURUKLE-BIRAK (kanban) ----
   Tasima yalnizca TARIHI degistirir. Hedef gun doluysa sunucu 409
   doner ve ders yerinde kalir. */
.og-cip, .og-tk-ders { -webkit-user-drag: element; }
.og-cip.suruklenen, .og-tk-ders.suruklenen { opacity: .4; }
.og-tk-gun.uzeri {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.og-tk-gun.bos.uzeri { background: none; box-shadow: none; border-color: transparent; }
@media (hover: hover) {
  .og-cip:hover, .og-tk-ders:hover { cursor: grab; }
  .og-cip:active, .og-tk-ders:active { cursor: grabbing; }
}

/* Ders penceresindeki kutu ve sil */
.og-form-kutu { flex-direction: row !important; align-items: center; gap: var(--sp-2) !important; }
.og-form-kutu input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.og-form select {
  flex: none; height: var(--ctrl-h); box-sizing: border-box;
  padding: 0 var(--sp-3);
  border: 1px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.og-ders-sil { align-self: flex-start; color: var(--bad); }

@media (max-width: 940px) {
  /* Telefonda hucre kuculur ama 7 sutun KALIR: takvimin okunmasi
     sutunlarin haftaya karsilik gelmesine bagli. Sabit yukseklik
     dusurulur, ders hapi tek satira iner. */
  .og-tk-gun { min-height: 56px; padding: 3px; gap: 2px; }
  .og-tk-ders { padding: 2px 4px; }
  .og-tk-ders i { display: none; }        /* dar hucrede saat yeter */
  /* ORTAK TAKVIM TELEFONDA: CIP YOK, NOKTA VAR. Dokunma hedefi
     noktalar degil HUCRENIN KENDISI (41x74) — 8px'lik bir nokta hedef
     olamaz. Dokununca gunun dersleri alt sayfada acilir. */
  .og-takvim-ortak .og-cip { display: none; }
  .og-noktalar { display: flex; }
  .og-takvim-ortak .og-tk-gun { min-height: 62px; }
  .og-lejant { gap: var(--sp-1) var(--sp-3); }
  .og-takvim { gap: 3px; }
  .og-ay-ad { font-size: var(--fs-lg); }
  .og-ay-eylem .btn { flex: 1 1 100%; justify-content: center; }
}

/* ================= GOZLEM SERIDI — baskasinin defteri =================
   Yonetici, defterini ACTIGI kullanicinin ekranini salt okunur gorur
   (bkz. api/migrations/024). Iki defter EKRANDA BIREBIR ayni cizilir;
   hangisine bakildigini soyleyen tek sey bu serit — o yuzden ekranin
   en tepesinde, kacirilamaz ve cikisi kendi uzerinde.

   KEHRIBAR, KIRMIZI DEGIL: ilerleme dilinde kirmizi yalnizca gercek
   yanlis cevaba ayrilmistir. Baskasinin defterine bakmak bir hata
   degil, dikkat gerektiren bir DURUM — `.og-uyari` ile ayni dil. */
.og-gozlem-serit {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  /* Tint kart zemininden AYIRT EDILEBILIR olmali: serit, hangi deftere
     bakildigini soyleyen TEK isaret. Ilk deger (%10) ekran goruntusunde
     normal bir `.card` ile ayni tonda okunuyordu. */
  background: color-mix(in srgb, var(--warn-ink) 17%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn-ink) 48%, transparent);
}
.og-gozlem-ic {
  flex: 0 0 var(--icon-box); width: var(--icon-box); height: var(--icon-box);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn-ink) 26%, transparent);
  /* Tint zeminde saf kimlik rengi erir — murekkep metne dogru karistirilir
     (paylasilan cip kurali). */
  color: color-mix(in srgb, var(--warn-ink) 70%, var(--text));
}
.og-gozlem-ic .ic { width: 18px; height: 18px; }
.og-gozlem-metin {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-base); color: var(--text); line-height: var(--lh-sik);
}
.og-gozlem-metin b { font-weight: 600; }
.og-gozlem-not {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--muted); font-weight: 400;
}
.og-gozlem-cik { flex: 0 0 auto; }
.og-gozlem-cik .ic { width: 14px; height: 14px; }

/* Yazdirmada CIZILMEZ — veli raporunu alan kisinin, raporu kimin
   hangi yetkiyle actigini gosteren bir denetim seridine ihtiyaci yok. */
@media print { .og-gozlem-serit { display: none !important; } }

@media (max-width: 940px) {
  /* Telefonda ad + not uzun; cikis dugmesi alt satira iner ve tam
     genislik alir — 40px dokunma hedefi korunur. */
  .og-gozlem-serit { flex-wrap: wrap; }
  .og-gozlem-cik { flex: 1 0 100%; min-height: 40px; justify-content: center; }
}

/* ========= YONETIM · KULLANICILAR TABLOSU (`table.words.adm-kul`) =========
   Bu tablo `table.words`u yeniden kullaniyor ama SUTUNLARININ ANLAMI
   BASKA. Paylasilan kurallar Kelimeler ekrani icin yazilmis ve orada
   8. sutun "D/Y" gibi bir VERI sutunu; burada 8. sutun EYLEMLERDIR.

   Olculdu: <=430px'te `table.words td:nth-child(8) { display: none }`
   yoneticinin butun eylemlerini birden siliyordu — "Yonetici yap ·
   Defteri ac · Defterini gor · Sifre sifirla · Askiya al · Sil"
   telefonda 0x0 ciziliyordu. Belgeli "paylasilan secici baska ekrani
   yakaliyor" tuzaginin bir baskasi. */
@media (max-width: 940px) {
  /* TELEFONDA ISIN TAMAMI: KIM ve NE YAPABILIRIM.
     Sayilar (calisilan/ogrenilen/alistirma/seri/son giris) birer
     BASVURU degeri; dar ekranda eylemin onunu kapatiyorlar. */
  table.words.adm-kul th:nth-child(2), table.words.adm-kul td:nth-child(2),
  table.words.adm-kul th:nth-child(3), table.words.adm-kul td:nth-child(3),
  table.words.adm-kul th:nth-child(4), table.words.adm-kul td:nth-child(4),
  table.words.adm-kul th:nth-child(5), table.words.adm-kul td:nth-child(5),
  table.words.adm-kul th:nth-child(6), table.words.adm-kul td:nth-child(6),
  table.words.adm-kul th:nth-child(7), table.words.adm-kul td:nth-child(7) {
    display: none;
  }
  /* EYLEM SUTUNU GERI GELIR — paylasilan kuraldan daha ozgul (0,3,1). */
  table.words.adm-kul th:nth-child(8), table.words.adm-kul td:nth-child(8) {
    display: table-cell;
  }
  /* Alti dugme tek satirda tutulamaz: `u-nowrap` burada KIRPMA degil
     TASMA uretirdi. Sarilir ve her dugme dokunma hedefini korur. */
  table.words.adm-kul td:nth-child(8) {
    white-space: normal;
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    padding-top: var(--sp-2); padding-bottom: var(--sp-3);
  }
  table.words.adm-kul td:nth-child(8) .btn { flex: 1 1 auto; min-height: 40px; }
  table.words.adm-kul { table-layout: auto; }
}

/* DAR EKRANDA SATIR DEGIL YIGIN.
   Iki hucre yan yana kalinca ad sutunu eziliyor ve e-posta kelime
   ortasindan kirilyordu ("mob@test.l / ocal" — ekran goruntusuyle
   yakalandi). Tablo satiri burada bir LISTE SATIRIDIR: ustte kim,
   altinda ne yapabilirim. */
@media (max-width: 700px) {
  table.words.adm-kul,
  table.words.adm-kul tbody,
  table.words.adm-kul tr,
  table.words.adm-kul td { display: block; width: auto; }
  /* Baslik satiri yigin duzeninde anlamsiz — dugmeler kendilerini
     zaten soyluyor, "Kullanici" basligi da kartin ustunde. */
  table.words.adm-kul thead { display: none; }
  table.words.adm-kul tbody tr {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
  }
  table.words.adm-kul tbody tr:last-child { border-bottom: none; }
  table.words.adm-kul td { border-bottom: none; padding: 0; }
  table.words.adm-kul td:nth-child(1) { margin-bottom: var(--sp-3); }
  table.words.adm-kul td:nth-child(8) { padding: 0; }
  /* Zebra yigin duzeninde satiri bir KUTU gibi gosterir; ayrimi
     zaten hairline tasiyor. */
  table.words.adm-kul tbody tr:nth-child(even) td { background: none; }
}

/* ===== DERS HATIRLATMASI — Ayarlar satiri =====
   Segment + "Test e-postasi gonder" ayni satirin sagindadir. Genis
   ekranda yan yana, dar ekranda alt alta ve TAM GENISLIK: `.setting-row`
   zaten sariyor, burada yalnizca sagdaki grubun kendi ic duzeni var. */
.ha-sag {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; justify-content: flex-end;
}
.ha-seg { flex: 0 0 auto; }

@media (max-width: 940px) {
  /* Ayarlar satiri telefonda zaten alt alta iniyor; segment ve test
     dugmesi de tam genislige acilir, yoksa uc secenek 390px'te
     kirpilir. Dokunma hedefi satirin kendi kuralindan gelir. */
  .ha-sag { width: 100%; justify-content: stretch; }
  .ha-seg { flex: 1 1 100%; }
  .ha-seg .schip { flex: 1 1 0; min-width: 0; }
  .ha-sag > .btn { flex: 1 1 100%; }
}