/* ═══════════════════════════════════════════════════════════════════
   GENAU APP — telefon kabuğu
   ───────────────────────────────────────────────────────────────────
   Bu bir SAYFA DEĞİL, uygulama. Sitenin şeridi, arama kutusu, yan rayı
   burada YOK: telefonda her piksel içeriğin.

   Üç kural:
   1. Dokunma hedefi en az 48px — parmak fare değil.
   2. Eylem ALTTA, başparmak menzilinde. Başlık üstte ve küçük.
   3. Tek ekranda tek iş. Kaydırarak bulunacak ikinci iş yok.

   Kimlik sitenin kilitli paletinden geliyor (krem · mürekkep ·
   terracotta · asit) ama ölçüler telefon için baştan kuruldu.

   DÜZELTME 2026-08-30 — operatör: «app ilk giriş ekranı bizim sitenin
   ilk girişine benzemiyor, logomuz, renk paletlerimiz, karakterimiz
   yok». Haklıydı ve sebep ölçüldü: bu dosya sitenin MALZEMESİNİ değil
   sadece RENK KODLARINI almıştı. Eksikler tek tek kapatıldı —
     · font        : sistem fontu → Schibsted Grotesk + Martian Mono
     · marka       : yazı «Genau» → levha logo (eşittir işareti)
     · karakter    : yok → maskot + nefesi (`gnu-suz`)
     · düğme       : düz dolgu → §51 beş katmanlı malzeme
     · easing      : KENDİ eğrisini uydurmuştu (0.22,0.61,0.36,1) →
                     sitenin tek eğrisi (0.2,0,0,1). Doktrin «ikinci
                     easing eğrisi» yasağını ihlal ediyordu.
   ═══════════════════════════════════════════════════════════════════ */

/* Fontlar app/font/ altında KENDİ kopyaları olarak duruyor: uygulama
   çevrimdışı açıldığında da marka fontuyla açılmalı, servis çalışanının
   önbelleğine site kökünden bir yol bağlamak kırılgan olurdu. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('font/schibsted-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('font/martian-mono.woff2') format('woff2');
}

:root {
  --kagit: #fbf7f0;
  --kagit-2: #f6e8db;
  --kagit-3: #f2ece1;
  --isik: #fffdf9;        /* kâğıdın üstündeki kâğıt — kart gövdesi */
  --tas: #f2ede4;         /* düğme gradyanının ayağı */
  --murekkep: #2b2218;
  --murekkep-2: #453a2e;
  --murekkep-3: #6e6355;
  --ayrac: #e4dbcc;
  --vurgu: #c05a2e;
  --vurgu-koyu: #a2481f;
  --alan: #a2481f;
  --alan-metin: #fdf9f3;
  --alan-2: #2b2218;      /* koyu levha — plaka başlığı */
  --alan-2-metin: #f6e8db;
  --asit: #d4f24b;
  /* ASİT ÜSTÜ MÜREKKEP — asit gecede AÇILMIYOR (tek değer), ama
     `--murekkep` gecede beyaza dönüyor: asit dolgunun üstünde açık
     mürekkep 1,3:1 veriyor. Bu token iki temada da koyu kalır. */
  --asit-metin: #2b2218;

  /* LEVHA — markanın koyu plakası. Tek değer, İKİ TEMADA DA aynı:
     imza «koyu levha + asit yazı» ve tema değişince imza değişmez.
     `--alan-2` bunun yerine KULLANILAMAZ; o gecede kreme dönüyor ve
     asit yazı 1,05:1'e düşüyordu (karşılama ekranında ölçüldü). */
  --levha: #2b2218;
  /* BELGE KÂĞIDI (DESIGN § 5.13) — seviye belgesi bir kâğıttır: gecede de açık
     kalır ve dışa aktarılan görsel iki temada aynı çıkar. Bu dört değer BİLEREK
     gece bloğunda yok. */
  --belge-zemin: #fffdf9;
  --belge-yazi: #2b2218;
  --belge-ikincil: #6e6355;
  --belge-cizgi: #e4dbcc;

  /* ALAN-2 ÜSTÜ VURGU — `--alan-2` tema ile TERS döndüğü için (gündüz
     koyu levha, gece krem kart) onun üstündeki vurgu da dönmeli.
     `--artikel-metin` ile aynı kalıp. */
  --alan-2-vurgu: #d4f24b;

  /* SEVİYE BANDI ÜSTÜ YAZI — seviye renkleri gecede AÇILIYOR
     (`--sv-a1/a2/b1`), açık yazı orada 1,99-2,52:1 veriyordu. */
  --sv-metin: #fdf9f3;

  /* KARŞILAMA KARTI — cam panel. Değerleri `.hos-kart`ın içinde SABİT
     yazılıydı; gece temasında kart açık kalıyor, yazı beyaza dönüyor ve
     «Almancayı … öğren» 1,37:1 oluyordu (ekran pikselinden ölçüldü). */
  --hos-kart-1: rgba(255, 253, 249, 0.86);
  --hos-kart-2: rgba(246, 232, 219, 0.55);

  /* Artikel kodu: öğretim aracı, dekor değil. Sitede kelimenin cinsiyeti
     bu üç renkle okunuyor; uygulamada da aynı olmalı yoksa öğrenci iki
     ayrı sistem öğreniyor. */
  --der: #356399;
  /* Artikel düğmesinin yazısı — gündüz koyu zeminin üstünde açık.
     Gecede `--der/--die/--das` AÇILIYOR, açık yazı orada 1,9:1 verirdi;
     bu token gece koyuya dönüyor. Saf beyaz değil (yasak): kâğıdın
     kendi sıcak açığı. */
  --artikel-metin: #fdf9f3;
  --die: #b32545;
  --das: #4e6a3b;

  /* Seviye = hat rengi. */
  --sv-a1: #a2481f;
  --sv-a2: #2f5d50;
  --sv-b1: #8a5a12;

  /* ── PASTEL YÜZEY AİLESİ ─────────────────────────────────────────
     Operatör 2026-09-10: «ara sayfalarda kelimelere falan girdiğimizde
     daha pastel tonlar karşılamalı ve ekranın hemen hemen her tarafını
     kullanmalısın».

     ÖLÇÜLEN KUSUR: kart (--isik #fffdf9) kendi zemininden (--tezgah
     #f1e9dc) **1,13:1** ile ayrılıyordu — yani ayrılmıyordu. Kart yalnız
     1px kenarı ve gölgesi sayesinde görünüyordu. Kelime ekranında
     ekranın TAMAMINI tek bir renk (#fbf7f0) kaplıyordu.

     TEK HEX UYDURULMADI. Her pastel, uygulamada ZATEN kilitli olan bir
     hue'nun kâğıda karıştırılmışıdır:
         pastel = kagit*(1-α) + hue*α       α = 0,18 zemin · 0,30 bant
     Bu DÖRDÜNCÜ BİR VURGU DEĞİL (DESIGN.md § 1.3 duruyor): vurgu üçlüsü
     terrakota·asit·mürekkep aynen yerinde. Bu bir YÜZEY ailesi ve tek
     bir işi var: EKRAN KİMLİĞİ. Öğrenci nerede olduğunu okumadan önce
     renkten bilsin — yeni nesil dil uygulamalarının hepsi bunu yapıyor,
     biz yapmıyorduk.

     Kaynak hue → ekran eşlemesi bilerek anlamlı:
       kelime  ← --der    · kalıp ← --das   · dinleme ← --sv-a2
       okuma   ← --sv-b1  · konuşma ← --die · gramer  ← --vurgu
     Ölçülen sonuç: kart pastel zeminde 1,31-1,41:1 (eskisi 1,13). */
  --ped-kelime: #d7dce0;   --ped-kelime-bant: #c0cbd6;
  --ped-kalip: #dcdecf;    --ped-kalip-bant: #c7cdba;
  --ped-dinle: #d6dbd3;    --ped-dinle-bant: #bec9c0;
  --ped-okuma: #e7dbc8;    --ped-okuma-bant: #d9c8ad;
  --ped-konusma: #eed1d1;  --ped-konusma-bant: #e5b8bd;
  --ped-gramer: #f0dbcd;   --ped-gramer-bant: #e9c8b6;
  /* Pastel zeminin üstünde duran kartın gövdesi. Gündüz kâğıdın kendisi;
     gecede zemin karttan koyu kalsın diye ayrı türetiliyor. */
  --ped-kart: #fffdf9;
  /* YOL BANDI — bölüm başlığının zemini (§ 86). Yeni hex DEĞİL:
     gramer pasteli zaten `--vurgu`dan türetilmişti ve yol
     ilerleme çubuğunun dolgusu da `--vurgu` — bant ile içindeki
     çubuk aynı renk ailesinden konuşsun diye takma ad verildi.
     Ayrı bir ton istenirse tek satır değişir. */
  --ped-yol: var(--ped-gramer);
  --ped-yol-bant: var(--ped-gramer-bant);

  /* EKRAN YAN PAYI — tek kaynak. `.tam-en` bu payı geri vererek bandı
     ekranın iki kenarına taşır (operatör: «ekranın her tarafını kullan»). */
  --pay: 16px;
  /* Gövdenin ÜST dolgusu token oldu: bölüm bandı (§ 86) tam-en
     olarak yukarı sıvanırken bu değeri eksiyle geri alıyor —
     iki yerde ham 18px yazmak ilkini değiştirince ikincisini
     sessizce bozardı. */
  --pay-ust: 18px;

  --f-govde: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* BOY ÖLÇEĞİ — stil.css:173-181 ile birebir. Uygulama kendi punto
     ızgarasını uydurmuştu (34px başlık, 12.5px not); ikisi de sitenin
     on basamaklı ölçeğinin dışındaydı. */
  --yz-mikro: 11px;
  --yz-kucuk: 13px;
  --yz-govde: 14px;
  --yz-orta: 15.5px;
  --yz-buyuk: 16.5px;
  /* h3 — ekran başlığı basamağı. Ölçekte yoktu ve boşluğu 18/19/20/22px
     diye DÖRT ayrı uydurma değer dolduruyordu. */
  --yz-h3: 20px;
  --yz-h2: 26px;
  --yz-h1: 30px;
  /* dev — kutlama rakamı/ikonu. Metin değil GRAFİK ölçüsü; ölçeğin
     içinde tutuluyor ki ikinci bir dev değer türetilmesin. */
  --yz-dev: 52px;
  --ls-dev: -0.032em;

  --r-xs: 8px;
  --r-plaka: 14px;
  --r-md: 20px;
  --r-tam: 999px;         /* gerçek hap — yalnız daire/hap için */

  /* Sitenin TEK ev easing'i. Buradaki değer stil.css:124 ile birebir. */
  --ev: cubic-bezier(0.2, 0, 0, 1);
  /* SÜRE IZGARASI — stil.css:134-139. `--dur: 0.2s` ızgara dışıydı;
     ismi korundu, iş atına bağlandı (tek satırda tüm kurallar düzeldi). */
  --dur-bas: 0.12s;
  --dur-kisa: 0.3s;
  --dur-yavas: 0.55s;
  --dur-uzun: 0.7s;
  --dur: var(--dur-kisa);

  --cubuk-y: 62px;   /* alt çubuk yüksekliği */
  /* ODAK MODU PAYI — «ekranda alt çubuk kadar yer ayır» diyen her kural
     bunu okur. Akış ekranında çubuk gizlendiği için 0'a düşüyor ve o
     62px içeriğe geri dönüyor. Çubuğun KENDİ yüksekliği `--cubuk-y`
     olarak kalır; ikisini ayırmazsak gizli çubuk için yer ayırmaya
     devam ederdik (altta 62px'lik boşluk). */
  --cubuk-pay: var(--cubuk-y);
}

@media (prefers-color-scheme: dark) {
  :root {
    --kagit: #1b1712;
    --kagit-2: #241e17;
    --kagit-3: #221c15;
    --isik: #221c15;
    --tas: #1f1a14;
    --murekkep: #f4ece0;
    --murekkep-2: #ddd2c4;
    --murekkep-3: #a89c8c;
    --ayrac: #3a3128;
    --vurgu: #e08a5c;
    --vurgu-koyu: #f0a175;
    --alan: #c05a2e;
    --alan-metin: #fdf9f3;
    --alan-2: #f6e8db;
    --alan-2-metin: #2b2218;
    --asit-metin: #2b2218;   /* asit gecede de parlak — mürekkep koyu kalır */
    /* `--levha` BİLEREK dönmüyor: imza plakası iki temada da koyu. */
    --alan-2-vurgu: #a2481f;   /* krem kartın üstünde 5,02:1 */
    --sv-metin: #2b2218;       /* açılan bant renginin üstünde 5,9-7,5:1 */
    --hos-kart-1: rgba(36, 30, 23, 0.88);
    --hos-kart-2: rgba(34, 28, 21, 0.60);
    /* Artikel renkleri koyu zeminde açılıyor — 5:1 eşiği korunsun. */
    --der: #7fb3e8;
    --die: #f0879e;
    --das: #a8c98d;
    --artikel-metin: #2b2218;   /* gecede artikel renkleri açıldı → yazı koyu */
    --sv-a1: #e08a5c;
    --sv-a2: #7fc0ad;
    --sv-b1: #d9a441;

    /* GECE PASTELLERİ — aynı formül, gece hue'ları ve gece kâğıdı ile.
       Gecede parlak hue'yu karıştırmak zemini AÇIYOR; kart zeminin
       altında kalmasın diye kart ayrıca temanın kendi açık mürekkebine
       (#f4ece0) doğru kaldırıldı. Oran, kart/zemin 1,28-1,29 olacak
       şekilde çözüldü (gündüzdeki 1,31-1,41 ile aynı basamak).
       Ölçüldü — eski gece: kart/kâğıt 1,06:1. */
    --ped-kelime: #272a2c;   --ped-kelime-bant: #2f363d;
    --ped-kalip: #2c2c21;    --ped-kalip-bant: #373b2b;
    --ped-dinle: #272b25;    --ped-dinle-bant: #2f3931;
    --ped-okuma: #322818;    --ped-okuma-bant: #41331b;
    --ped-konusma: #352423;  --ped-konusma-bant: #462d2e;
    --ped-gramer: #33251b;   --ped-gramer-bant: #422e21;
    --ped-kart: #403c36;
    --ped-yol: var(--ped-gramer);
    --ped-yol-bant: var(--ped-gramer-bant);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior-y: none;   /* çekince sayfa zıplamasın: app hissi */
}

body {
  /* ZEMİN YIKAMASI (stil.css §62) — sayfa zemini düz değil. Sitenin
     `--zemin-a/-b/-c` değerleri; app'te düz `--kagit` boyanıyordu ve
     kâğıt ölü duruyordu. WebGL aurora BİLEREK gelmedi: DESIGN.md §5.1
     «<768px: WebGL yok, statik yedek». Sitenin ilk ekranıyla akrabalık
     aurora'dan değil, aynı sıcak yıkamadan ve asit daireden geliyor. */
  background-color: var(--kagit);
  background-image:
    radial-gradient(60% 44% at 12% 0%, rgba(192, 90, 46, 0.10), transparent 70%),
    radial-gradient(52% 40% at 100% 42%, rgba(47, 93, 80, 0.075), transparent 72%),
    radial-gradient(64% 46% at 78% 100%, rgba(217, 164, 65, 0.11), transparent 70%);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: var(--yz-buyuk);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /* Metin seçimi kapalı: uygulamada uzun basınca seçim çıkması yanlış his. */
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- ÜST ŞERİT ---------- */
.ust {
  position: relative;   /* seri kalkanı yaprağının konum bağlamı (§73) */
  flex: 0 0 auto;
  /* ÜÇ SÜTUNLUK IZGARAYDI, DÖRT ÖGE VAR. Şerit «alev · kelime ·
     seviye» için kurulmuştu; XP çipi sonradan eklendi ve dördüncü öge
     ızgaranın ikinci satırına düştü: öğrenci ilk kelimesini bilir
     bilmez «A1» alt satıra kayıyor, şerit 72px oluyordu (ölçüldü
     2026-09-13: dört çocuğun y'si 10/12/12 iken seviye 41).
     Esnek satır sayıdan bağımsız: çipler gizliyken de doğru dizilir. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: var(--kagit);
  border-bottom: 1px solid var(--ayrac);
}
.seviye {
  flex: none;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Alev çipi `.ust-cip.cip-seri`den giyinir (§56); burada yalnız sayı. */
.seri b { font-size: var(--yz-orta); }

/* ---------- GÖVDE ---------- */
.govde {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pay-ust) var(--pay) calc(var(--cubuk-pay) + env(safe-area-inset-bottom, 0px) + 18px);
}
/* Telefon uygulamasının içeriği TELEFON GENİŞLİĞİNDE yaşar. Uygulama
   masaüstünde geniş bir pencerede açılınca içerik 580px'e yayılıyor ve
   ekran «boş cam» gibi dağılıyordu (2026-08-31 ekran görüntüsüyle
   görüldü). Klonun learn sayfası da içeriği sabit sütunda tutuyor.
   Kayan alan .govde'de kalıyor; dar sütun İÇERİDE — kaydırma çubuğu
   pencerenin kenarında kalsın diye. */
.govde > * { max-width: 430px; margin-left: auto; margin-right: auto; }
.ust, .cubuk { padding-left: max(var(--pay), calc((100% - 430px) / 2)); padding-right: max(var(--pay), calc((100% - 430px) / 2)); }
.yukleniyor { color: var(--murekkep-3); text-align: center; padding: 40px 0; }

/* ═══ EKRAN KİMLİĞİ — pastel zemin ═════════════════════════════════
   `<body data-ped="kelime">` yazıldığı anda ÜÇ katman birden değişir:
   üst şerit · gövde zemini · alt çubuk. Operatörün istediği «ekranın
   hemen hemen her tarafı» tam olarak bu: renk kartın içinde kalmıyor,
   ekranın kendisi oluyor.

   Neden `body` ve tek bir öznitelik? Çünkü üst şerit ile alt çubuk
   `.govde`'nin KARDEŞİ; tint'i gövdeye yazsaydım ekranın üstü ve altı
   eski kâğıtta kalır, ekran ikiye bölünürdü. */
body[data-ped] {
  background-color: var(--ped);
  /* Zemin yıkamasının üç radyal gradyanı pastelin üstünde çamur yapıyor:
     pastel ekranda yıkama kalkıyor, rengi pastel taşıyor. */
  background-image: none;
}
body[data-ped] .ust,
body[data-ped] .cubuk { background: var(--ped-bant); }
body[data-ped] .ust { border-bottom-color: transparent; }
body[data-ped] .cubuk { border-top-color: transparent; }
/* Pastel zeminde kartın gövdesi: gündüz kâğıt, gecede türetilmiş yüzey. */
body[data-ped] .kart,
body[data-ped] .ped-kart { background: var(--ped-kart); }
/* Bant üstünde ikincil metin: --murekkep-3 pastelde 3,3-3,7:1'e düşüyor
   (ölçüldü). Bandın kendi ikincil sesi bir basamak koyu. */
body[data-ped] .ust .seviye { color: var(--murekkep-2); }
/* PED YÜZEYLERİ BİR BASAMAK KOYU YAZAR. Ped bandı/kartı zemini
   değiştiriyor; en soluk mürekkep orada eşiğin altına düşüyordu —
   ölçüldü (2026-09-14): alt çubuk etiketleri 3,56:1 (gündüz, kelime
   pedi) · kart etiketi «kalan 5» 4,07:1 (gece). İkisi de 11px, yani
   eşik 4,5. Renk değişmiyor, BASAMAK değişiyor. */
body[data-ped] .sek span,
body[data-ped] .kart-et { color: var(--murekkep-2); }

body[data-ped="kelime"]  { --ped: var(--ped-kelime);  --ped-bant: var(--ped-kelime-bant); }
body[data-ped="kalip"]   { --ped: var(--ped-kalip);   --ped-bant: var(--ped-kalip-bant); }
body[data-ped="dinle"]   { --ped: var(--ped-dinle);   --ped-bant: var(--ped-dinle-bant); }
body[data-ped="okuma"]   { --ped: var(--ped-okuma);   --ped-bant: var(--ped-okuma-bant); }
body[data-ped="konusma"] { --ped: var(--ped-konusma); --ped-bant: var(--ped-konusma-bant); }
body[data-ped="gramer"]  { --ped: var(--ped-gramer);  --ped-bant: var(--ped-gramer-bant); }

/* Renk geçişi ANİ olmasın — ekran değişimi bir yerden bir yere gitmek
   gibi hissetsin. Tek ev easing'i, ızgaradaki süre. */
body, .ust, .cubuk { transition: background-color var(--dur-kisa) var(--ev); }
@media (prefers-reduced-motion: reduce) {
  body, .ust, .cubuk { transition: none; }
}

/* ═══ TAM EN — bandı ekranın iki kenarına taşır ════════════════════
   `.govde`'nin yan payını geri verir, kendi payını içeride kurar. Metin
   hizası bozulmaz; bozulan tek şey bandın DURDUĞU yer. */
.tam-en {
  margin-left: calc(var(--pay) * -1);
  margin-right: calc(var(--pay) * -1);
  padding-left: var(--pay);
  padding-right: var(--pay);
}
/* Geniş pencerede içerik 430px sütunda yaşıyor; bant o sütunun dışına
   taşarsa ekran dağılır. `.govde > *` zaten sütunu kuruyor, `.tam-en`
   yalnız payı yiyor — 430px üstünde pay hesabı sütunun kenarına oturur. */

/* ---------- ALT ÇUBUK ---------- */
.cubuk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--kagit);
  border-top: 1px solid var(--ayrac);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
}
/* ══ ODAK MODU ══ Karttan girilen akışta (ders · test · sınav · okuma ·
   ödev · dinleme · konuşma · hikâye) çubuk EKRANDAN KALKAR; `app.js`
   `odak()` gövdeye `data-odak` yazıyor. `display:none` odak sırasından
   da çıkarır — akış sırasında sekmeye sekerek gitmek mümkün olmamalı,
   çıkış X'tir. «Kelime» sekmesi istisna (bkz. app.js · odak). */
body[data-odak] { --cubuk-pay: 0px; }
body[data-odak] .cubuk { display: none; }

.sek {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--murekkep-3);
  height: var(--cubuk-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
.sek svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sek span { font-size: var(--yz-mikro); letter-spacing: 0.01em; }
.sek[aria-current] { color: var(--vurgu); }
.sek:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: -3px; }

/* ---------- ORTAK PARÇALAR ---------- */
.baslik {
  margin: 0 0 4px;
  font-size: var(--yz-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.alt { margin: 0 0 18px; font-size: var(--yz-govde); color: var(--murekkep-3); }

.plakalar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.plaka {
  padding: 14px 8px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
  text-align: center;
}
.plaka b { display: block; font-size: var(--yz-h2); font-weight: 700; line-height: 1; }
.plaka span { display: block; margin-top: 5px; font-size: var(--yz-mikro); color: var(--murekkep-3); }

/* ---------- DÜĞME MALZEMESİ (stil.css §51'den birebir taşındı) ----------
   ÖNCESİ: `background: var(--alan)` + `border: 1px` — tek düz dolgu.
   Ekranda «çıkartma» okunuyordu, nesne değil. Sitede bu 2026-08-21'de
   operatörün «butonların kalitesi örnek siteler gibi olmalı» notuyla
   çözülmüştü; uygulamaya taşınmamıştı.

   Hacim BEŞ katmandan gelir:
     1 üst ışık kenarı   (inset 0 1px 0)        → yüzeyin kalktığı yer
     2 alt iç gölge      (inset 0 -9px … -10px) → gövdenin kalınlığı
     3 çekirdek hattı    (0 0 0 1px)            → kâğıttan ayırır
     4 kısa temas gölgesi(0 2px 3px)            → zemine oturur
     5 uzun ortam gölgesi(0 12px 22px -9px)     → mekânda durur
   Basılınca 1 ve 5 sıfırlanır, iç gölge derinleşir.

   Telefonda hover yok — `:active` burada tek gerçek durum ve o yüzden
   sitedekinden DAHA belirgin (translateY 1px + iç gölge). */
.dugme {
  appearance: none;
  /* Dikey ortalama artık dolgudan değil YERLEŞİMDEN geliyor. Dolgu 0
     olunca `<button>` içeriğini kendisi ortalıyor ama `<label class="dugme">`
     (Ben ekranındaki «Geri yükle») ortalamıyordu — yazı tepeye yapışırdı. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* SİTENİN DÜĞMESİ — operatör 2026-08-30 akşam: «butonlar kötü,
     sitedekini kullansana». Hap denemesi (56px + tam yuvarlak + asit
     derin) geri alındı; ölçüler stil.css 49.2'deki .hap-asit/.hap-kagit
     ile birebir: 52px · plaka yarıçapı · 0 24px. */
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  /* HAP — ölçüldü, tahmin edilmedi (12 Eylül 2026). On premium sitenin
     birincil düğmesi `getComputedStyle` ile okundu; tüketici
     uygulamalarının dördü hap kullanıyor: Babbel 44px/4000px,
     Busuu 48px/45px, Headspace 48px/32px, Linear 32px/9999px. Dikdörtgen
     kalanlar geliştirici ürünleri (Stripe 4px, Raycast 8px, Framer 8px).
     Genau tüketici tarafında — yükseklik (52) ve kalınlık (700) zaten
     bandın içindeydi, sapan tek ölçü yarıçaptı.
     Yeni değer ÜRETİLMEDİ: `--r-tam` token'ı zaten «yalnız daire/hap
     için» diye tanımlıydı, üç yüzey yarıçapı (8/14/20) değişmedi.
     Tam liste: REFERANS-APP/index.html */
  border-radius: var(--r-tam);
  color: var(--murekkep);
  font: inherit;
  font-size: var(--yz-buyuk);
  font-weight: 700;
  /* KABARTMA YAZI — iskeuomorfik reçetenin beşinci adımı (yerel
     `skeuomorphic-ui` defteri: «text shadows sparingly for an embossed
     feel»). Kil hamurun üstüne basılmış harf, üstünde ince ışık
     bırakır. Tek piksel, tek yön; iki yönlü gölge kabartmayı
     bulanıklaştırır. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  /* DUOLINGO MADDESİ — operatör 2026-08-30 gece: «app'e özel şeyler
     gelmeli, Duolingo'yu taklit et». Kaynak iki yerden doğrulandı:
     _packs/animata/button/duolingo.tsx (border-b-4 → active:border-b-0)
     ve sanidhyy/duolingo-clone (635★, aynı mekanizma). Web'in beş
     katmanlı yumuşak gölgesi SİTEDE kalıyor; app'te düğme DÜZ dolgu +
     4px SERT alt kenar: gölge değil ETEK. Basınca gövde eteğin içine
     düşüyor (translateY(4px) + etek 0) — parmak bunu hissediyor.
     Etek tonları türetilmedi: asit eteği #a9c531 ve terrakota eteği
     #8e3d16 sitenin kendi gradyan uçları. */
  /* HAMUR + ETEK — operatör: «sitedeki parlak hamurumsu görüntü HEP
     olmalı». Düz Duolingo dolgusu ucuz durdu; doğrusu İKİSİ BİRDEN:
     sitenin §51 parlak kili (üst ışık + gövde gradyanı + alt iç gölge)
     + Duolingo'nun 4px katı eteği ve 4px basma yolu. Katmanlar:
     üst ışık · alt iç gölge (hamurun eti) · kılcal · ETEK · ortam. */
  background: linear-gradient(180deg, var(--isik), var(--tas));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -9px 16px -10px rgba(120, 86, 52, 0.28),
    0 0 0 1px rgba(43, 34, 24, 0.16),
    0 4px 0 var(--vurgu-koyu),
    0 10px 18px -8px rgba(60, 40, 20, 0.22);
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.dugme:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 2px 6px rgba(60, 40, 20, 0.14),
    0 0 0 1px rgba(43, 34, 24, 0.16),
    0 0 0 var(--vurgu-koyu);
  transition-duration: var(--dur-bas);
}

/* Birincil — terrakota. Tek birincil eylem ekranda. */
.dugme.dolu {
  color: var(--alan-metin);
  /* Koyu zeminde üst-ışık kabartması ters okunuyor (harf kabarmıyor,
     bulanıyor): terrakota düğmede gölge ALTA ve koyu. */
  text-shadow: 0 1px 0 rgba(74, 26, 6, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #bd5b2c 0%, var(--vurgu-koyu) 58%, #94411a 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.36),
    inset 0 -8px 14px -9px rgba(74, 26, 6, 0.65),
    0 0 0 1px rgba(112, 48, 18, 0.42),
    0 4px 0 var(--murekkep-2),
    0 10px 18px -8px rgba(90, 40, 12, 0.34);
}
.dugme.dolu:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 6px rgba(74, 26, 6, 0.5),
    0 0 0 1px rgba(112, 48, 18, 0.46),
    0 0 0 var(--murekkep-2);
  transition-duration: var(--dur-bas);
}
.dugme:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .dugme { transition: none; }
  .dugme:active, .dugme.dolu:active { transform: none; }
}

.kutu {
  padding: 16px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--kagit-3);
}
.kutu + .kutu { margin-top: 10px; }
.bos { color: var(--murekkep-3); font-size: var(--yz-govde); }

/* ---------- KART (kelime + soru ortak) ---------- */
.kart {
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--kagit);
  padding: 28px 20px;
  text-align: center;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kart-et { font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--murekkep-3); }
.kart-de { margin: 14px 0 0; font-size: var(--yz-h1); font-weight: 700; line-height: 1.2; }
.kart-tr { margin: 12px 0 0; font-size: var(--yz-buyuk); color: var(--vurgu); }
.kart-not { margin: 14px 0 0; font-size: var(--yz-kucuk); line-height: 1.5; color: var(--murekkep-3); }

/* AYNI TUZAK DÖRDÜNCÜ KEZ: display'i açık yazılan her öğe [hidden]'ı
   ezer (.ust, .cubuk, .ust-cip, şimdi .eylemler). Bundan sonra display
   yazan HER kurala refleks olarak [hidden] eşi yazılacak. */
.eylemler[hidden] { display: none; }
.eylemler { margin-top: 14px; display: grid; gap: 8px; }
.eylemler.iki { grid-template-columns: 1fr 1fr; }

/* ---------- SES ----------
   Hoparlör düğmesi içeriğin YANINDA durur, üstüne binmez: kelimeyi
   okumak birincil iş, dinlemek ikincil. Dokunma hedefi yine 44px —
   küçük ikon büyük hedef. */
.ses-sar { display: flex; justify-content: center; margin-top: 10px; }
.ses-dugme {
  appearance: none;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit);
  color: var(--murekkep-2);
  cursor: pointer;
  padding: 0;
}
.ses-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ses-dugme:active { transform: scale(0.94); }
.ses-dugme:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.ses-kucuk {
  width: 34px; height: 34px;
  margin-left: 8px;
  vertical-align: middle;
  border-color: transparent;
  background: none;
  color: var(--murekkep-3);
}
.ses-kucuk svg { width: 17px; height: 17px; }
.ses-kucuk:hover, .ses-kucuk:focus-visible { color: var(--vurgu); }

/* ---------- KALIP KURMA ----------
   Parçalar HAP değil PLAKA yarıçapında: bunlar kelime, kontrol değil.
   Dizilen satırın altında kesikli çizgi var — boşken bile «buraya
   koyacaksın» diyor. */
.kalip { display: flex; flex-direction: column; gap: 14px; }
.kalip-tr {
  margin: 6px 0 0;
  font-size: var(--yz-h3);
  line-height: 1.45;
  color: var(--murekkep);
}
.kalip-satir {
  min-height: 58px;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  padding: 10px;
  border: 1px dashed var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
}
.kalip-havuz { display: flex; flex-wrap: wrap; gap: 8px; }
.cip-k {
  appearance: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit);
  color: var(--murekkep);
  font: inherit;
  font-size: var(--yz-buyuk);
  cursor: pointer;
}
.cip-k[hidden] { display: none; }
.cip-k:active { transform: scale(0.95); }
.cip-k:disabled { opacity: 0.75; cursor: default; }
.cip-k:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

.kalip-sonuc {
  padding: 14px 16px;
  border-radius: var(--r-plaka);
  font-size: var(--yz-orta);
  line-height: 1.5;
}
.kalip-sonuc.iyi { background: var(--kagit-2); border: 1px solid var(--alan); }
.kalip-sonuc.kotu { background: var(--kagit-3); border: 1px solid var(--vurgu); }
.kalip-sonuc .de { display: block; margin-top: 4px; font-weight: 600; }

/* ---------- SORU (Öğren) ---------- */
.secenek {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  min-height: 54px;
  padding: 14px 16px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--r-plaka);
  /* Şıklar da hamurdan — düz kâğıt kutu ekranın geri kalanından ayrı
     bir dilden konuşuyordu. Basılabilir her şey: kil + etek. */
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 4px 0 var(--ayrac);
  color: var(--murekkep);
  font: inherit;
  font-size: var(--yz-buyuk);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.secenek:not([disabled]):active {
  transform: translateY(2px);
  box-shadow: 
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 2px 0 var(--ayrac);
  transition-duration: var(--dur-bas);
}
.secenek.secili {
  background: var(--kagit-3);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1.5px var(--kenar),
    0 4px 0 var(--kenar);
}
.secenek.secili:not([disabled]):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1.5px var(--kenar),
    0 2px 0 var(--kenar);
}
.secenek.dogru {
  background: linear-gradient(180deg, #ddfa66 0%, var(--asit) 60%, #c1e137 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.8), 0 0 0 1.5px rgba(133, 162, 32, 0.4), 0 4px 0 var(--murekkep-3);
}
.secenek.dogru:not([disabled]):active {
  transform: translateY(2px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.8), 0 0 0 1.5px rgba(133, 162, 32, 0.4), 0 2px 0 var(--murekkep-3);
}
.secenek.yanlis {
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1.5px var(--vurgu-koyu), 0 4px 0 var(--vurgu-koyu);
  opacity: 0.8;
}
.secenek.yanlis:not([disabled]):active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1.5px var(--vurgu-koyu), 0 2px 0 var(--vurgu-koyu);
}
.secenek:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

.aciklama {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-plaka);
  background: var(--kagit-2);
  font-size: var(--yz-govde);
  line-height: 1.55;
  color: var(--murekkep-2);
}
.aciklama .de { font-weight: 600; }

/* ---------- LİSTE ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { margin-top: 8px; }
.satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.satir b { font-weight: 600; font-size: var(--yz-orta); }
.satir small { display: block; margin-top: 2px; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.satir .sag { font-size: var(--yz-kucuk); color: var(--murekkep-3); white-space: nowrap; }

/* Önerilen konu: listenin geri kalanından ayrılsın ama bağırmasın —
   ince vurgu kenarı yeter, dolu zemin listeyi karnaval yapardı. */
.satir.oneri { border-color: var(--vurgu); background: var(--kagit-2); }
.satir.oneri .sag { color: var(--vurgu); font-size: var(--yz-buyuk); }

/* ---------- METİN (imza an) ---------- */
.metin {
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--kagit-2);
  border: 1px solid var(--ayrac);
}
.metin h3 { margin: 0 0 10px; font-size: var(--yz-orta); }
.metin .de { margin: 0; font-size: var(--yz-buyuk); line-height: 1.7; }
.metin .tr { margin: 12px 0 0; font-size: var(--yz-kucuk); line-height: 1.6; color: var(--murekkep-3); }

/* ---------- İLERLEME ÇUBUĞU ---------- */
.cubukcuk { height: 6px; border-radius: var(--r-plaka); background: var(--kagit-2); overflow: hidden; margin-top: 8px; }
.cubukcuk i { display: block; height: 100%; background: var(--vurgu); border-radius: var(--r-plaka); }

/* ---------- KURULUM ÖNERİSİ ---------- */
.kur {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--ayrac);
  border-radius: var(--r-plaka);
  font-size: var(--yz-kucuk);
  line-height: 1.55;
  color: var(--murekkep-3);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MARKA — levha logo · karakter · karşılama
   ───────────────────────────────────────────────────────────────────
   2026-08-30. Operatör: «app ilk giriş ekranı bizim sitenin ilk
   girişine benzemiyor, logomuz falan renk paletlerimiz karakterimiz de
   falan filan yok».

   Ölçüldü, haklıydı: uygulamada logo YOKTU (üst şeritte düz yazı
   «Genau»), maskot HİÇ geçmiyordu, asit yeşili tanımlıydı ama sıfır
   kez kullanılıyordu, font sistem fontuydu.

   Buradaki hiçbir bileşen yeni icat DEĞİL — hepsi stil.css'te zaten
   var olanın telefon ölçeğinde karşılığı. Kaynak satırlar yorumlarda.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- LEVHA LOGO (stil.css:817 `.marka-levha`) ----------
   Yuvarlak-kare, terrakota, içinde EŞİTTİR işareti. Anlam: «genau» =
   «tam olarak». Üst çubuk asit, alt çubuk kâğıt — logo.png ile aynı
   oran. Tek eleman, dış istek yok, her ölçüde keskin. */
.levha {
  border-radius: var(--r-xs);
  flex: none;
  background: linear-gradient(160deg, #b4552a, var(--vurgu-koyu) 70%);
  position: relative;
  box-shadow: 0 2px 6px rgba(60, 26, 8, 0.22);
  width: var(--lv, 30px);
  height: var(--lv, 30px);
}
.levha::before,
.levha::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  height: calc(var(--lv, 30px) * 0.1);
  border-radius: var(--r-tam);
}
.levha::before { top: 36%; background: var(--asit); }
.levha::after  { top: 55%; background: var(--isik); }

/* Üst şeritteki marka: levha + ad. Ad artık sistem fontunda değil. */
.marka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}
.marka .ad {
  font-size: var(--yz-orta);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ---------- MONO ETİKET (stil.css:`.tc` transkript imzası) ----------
   Sitenin küçük büyük-harf etiketleri Martian Mono'da ve önünde kısa
   bir terrakota çizgi taşır. Uygulamada aynı imza. */
.mono-et {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--murekkep-3);
}
.mono-et::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--vurgu);
  flex: none;
}

/* ---------- KARŞILAMA — ilk açılış ----------
   Sitenin giriş ekranının telefon karşılığı. Sıra birebir aynı:
   etiket → söz → sahne → seçim → eylem. */
.hos {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 6px;
}

.hos h1 {
  margin: 14px 0 0;
  font-size: var(--yz-h1);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: var(--ls-dev);
  text-wrap: balance;
}
/* PLAKA — sitenin imza tipografisi: koyu levha, asit yazı. Ana sayfada
   «sırayla» kelimesi bu plakanın içinde duruyor (bkz. hero). */
.hos h1 .plaka-yazi {
  display: inline-block;
  padding: 2px 12px 5px;
  border-radius: var(--r-plaka);
  background: var(--levha);      /* iki temada da koyu — imza korunur */
  color: var(--asit);
}

/* ---------- SAHNE — asit daire + karakter ----------
   stil.css §49: «RENK TAAHHÜDÜ … YENİ olan tek şey asit yeşili — ve o
   da yalnız BU sayfada, maskotun etrafındaki sahnede». Uygulamada da
   asit SADECE burada: karşılama ekranının dairesi ve plaka yazısı.
   Sekmelerin içinde asit yok. */
.hos-sahne {
  position: relative;
  width: min(72vw, 260px);
  aspect-ratio: 1;
  margin: 22px 0 4px;
  display: grid;
  place-items: center;
}
/* Daire dolgusu SİTENİN asit rampası, birebir (stil.css:8187). İlk
   yazımda iki hex uydurmuştum (#e6fb7f / #b9db3e) — marka rengini
   yaklaşık yazmak, marka rengini bozmaktır.
   `::after` sızıntı halkası (blur 34px) ALINMADI: telefonda tam ekran
   bulanıklık katmanı, §5.2'nin ölçülmüş yasağının kardeşi. */
.hos-daire {
  position: absolute;
  inset: 0;
  border-radius: var(--r-tam);
  background:
    radial-gradient(54% 48% at 32% 24%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(92% 88% at 36% 26%, #eaff8e 0%, #dcf75e 30%, var(--asit) 56%,
                    #bcdc36 82%, #a9c927 100%);
  box-shadow:
    0 0 0 1px rgba(120, 150, 30, 0.22),
    0 30px 68px rgba(90, 110, 20, 0.20),
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset -20px -28px 54px rgba(108, 140, 18, 0.24);
}
/* Sitedeki oran: dairenin %62'si (ölçüldü 266,6/430). %68 sahneyi
   şişiriyordu ve daire bir halkaya iniyordu. */
.hos-maskot {
  position: relative;
  z-index: 2;
  width: 73%;
  height: auto;
  display: block;
  filter: drop-shadow(0 5px 6px rgba(60, 26, 8, 0.24))
          drop-shadow(0 20px 30px rgba(60, 26, 8, 0.26));
}

/* ---------- SEVİYE SEÇİMİ ----------
   Seviye = hat rengi (DESIGN.md §1.3). Seçili olan dolu plaka taşır —
   sitedeki `.sr-sv` ile aynı dil. */
.hos-svler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 20px;
}
.sv-sec {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 12px 6px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px var(--ayrac),
    0 2px 3px rgba(60, 40, 20, 0.09);
  color: var(--murekkep-2);
  transition: box-shadow var(--dur) var(--ev), transform var(--dur) var(--ev);
}
.sv-sec b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sv);
}
.sv-sec span { display: block; margin-top: 4px; font-size: var(--yz-mikro); color: var(--murekkep-3); }
.sv-sec[data-sv='A1'] { --sv: var(--sv-a1); }
.sv-sec[data-sv='A2'] { --sv: var(--sv-a2); }
.sv-sec[data-sv='B1'] { --sv: var(--sv-b1); }
.sv-sec[aria-pressed='true'] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1.5px var(--sv),
    0 2px 4px rgba(60, 40, 20, 0.10);
}
.sv-sec:active { transform: translateY(3px) scale(0.972); }
.sv-sec:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

.hos-eylem { width: 100%; margin-top: 18px; }
.hos-not {
  margin: 12px 0 0;
  font-size: var(--yz-kucuk);
  line-height: 1.5;
  color: var(--murekkep-3);
  max-width: 30ch;
}

/* ---------- HAREKET (stil.css §52.1 · gnu-yukari · gnu-suz) ----------
   Sitenin kahraman girişiyle AYNI sıra ve aynı gecikmeler: göz neyi
   önce görsün isteniyorsa o önce gelir. Yeni fiil eklenmedi. */
@keyframes gnu-yukari { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gnu-suz    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hos > * { animation: gnu-yukari 0.62s var(--ev) both; }
.hos .mono-et    { animation-delay: 0s; }
.hos h1          { animation-delay: 0.05s; }
.hos .hos-sahne  { animation-delay: 0.13s; }
.hos .hos-svler  { animation-delay: 0.21s; }
.hos .hos-eylem  { animation-delay: 0.29s; }
.hos .hos-not    { animation-delay: 0.35s; }

/* Maskotun nefesi: markanın TEK döngüsel hareketi (stil.css:9076).
   Giriş animasyonu KAPSAYICIDA, nefes maskotta — ikisi çakışmıyor. */
.hos-maskot { animation: gnu-suz 7s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .hos > *, .hos-maskot { animation: none; }
  .sv-sec { transition: none; }
}

/* Kısa telefonda (SE, 667px) sahne ekranı yiyor — küçülüyor. */
@media (max-height: 700px) {
  .hos-sahne { width: min(52vw, 190px); margin: 14px 0 0; }
  .hos h1 { font-size: var(--yz-h1); }
}

/* Karşılama ekranında alt çubuk gizli — gövdenin alt payı da düşüyor,
   yoksa sahne yukarı itilip ekranın üstüne sıkışıyor. */
body[data-ekran='hos'] .govde {
  padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex;
}
body[data-ekran='hos'] .hos { flex: 1 1 auto; justify-content: center; }

/* `hidden` özniteliği YETMİYOR: `.ust` grid, `.cubuk` fixed+grid — ikisi
   de tarayıcının `[hidden]{display:none}` kuralını özgüllükle eziyor.
   Karşılama ekranında şerit ve çubuk gerçekten kalkmalı. */
.ust[hidden], .cubuk[hidden] { display: none; }

/* Karşılama etiketinde çizgi yok: ortalanmış yazının solunda tek başına
   duran kısa çizgi «eksik tire» gibi okunuyor. Sitede etiket sola
   dayalı, orada çizgi bir başlangıç işareti. */
.hos .mono-et::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   BUGÜN — günlük ekran
   ───────────────────────────────────────────────────────────────────
   ÖNCESİ ölçüldü: 430×932'de ekranın ALT %45'i boştu ve üstteki üç
   sayı plakasının ikisi ilk gün «0» yazıyordu. Yani uygulama, öğrenciyi
   elinde hiçbir şey olmadığını söyleyen bir skorboardla karşılıyordu.

   Şimdi ekran sitenin ana sayfasıyla aynı üç soruyu cevaplıyor:
   neredeyim → ne yapmalıyım → sırada ne var.
   ═══════════════════════════════════════════════════════════════════ */
.gun-soz .baslik { margin: 0; }
.gun-soz .alt { margin: 2px 0 0; }

/* Bölüm başlığı — sitenin ölçek adımıyla aynı kademe. */
.bolum-bas {
  margin: 26px 0 10px;
  font-size: var(--yz-buyuk);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- ZİNCİR — kelime → kalıp → metin ----------
   Üç ayrı plaka yerine BAĞLI üç halka: uygulamanın öğrettiği mekanik
   zaten bu zincir. Halkalar arasındaki çizgi bağı gösteriyor; boş
   halka soluk kalıyor, zincirin nerede kopduğu tek bakışta okunuyor. */
.zincir {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.halka {
  position: relative;
  padding: 13px 6px;
  text-align: center;
  border: 1px solid var(--ayrac);
  background: var(--kagit-3);
  color: var(--murekkep-3);
}
.halka:first-child { border-radius: var(--r-plaka) 0 0 var(--r-plaka); }
.halka:last-child  { border-radius: 0 var(--r-plaka) var(--r-plaka) 0; }
.halka + .halka { border-left: 0; }
.halka b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--yz-h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.halka span { display: block; margin-top: 4px; font-size: var(--yz-mikro); }
/* Dolu halka kâğıdın üstüne çıkıyor — ilerleme MALZEMEDEN okunuyor. */
.halka.dolu {
  background: linear-gradient(180deg, var(--isik), var(--tas));
  color: var(--murekkep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.halka.dolu b { color: var(--vurgu-koyu); }

/* ---------- İLERLEME ÇUBUĞU ----------
   Sıfır göstermiyor, HEDEF gösteriyor. */
.ilerleme {
  margin-top: 10px;
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--kagit-3);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  overflow: hidden;
}
.ilerleme > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-koyu));
  transition: width 0.62s var(--ev);
}

@media (prefers-reduced-motion: reduce) {
  .ilerleme > span { transition: none; }
}

/* ---------- ASİT BİRİNCİL (stil.css:8330 `.hap-asit`) ----------
   Sitenin ana sayfa birincil eylemi TERRAKOTA DEĞİL, asit: ölçüldü —
   «Seviyemi ücretsiz belirle» düğmesi #ddfa66 → #d4f24b → #c1e137
   rampasında ve yazısı koyu mürekkep. İlk yazımda karşılamaya terrakota
   koymuştum; asit o ekranda yalnız dairede kalıyordu ve sitenin giriş
   ekranıyla arasındaki en güçlü bağ eksikti.

   Asit uygulamada YALNIZ ÜÇ yüzeyde var: logonun üst çubuğu, h1'in
   plakası, bu düğme. Sekmelerin içinde asit yok — konu sayfaları
   terrakota kalıyor (§49 renk taahhüdü). */
.dugme.asit {
  color: var(--murekkep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #ddfa66 0%, var(--asit) 54%, #c1e137 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -8px 14px -9px rgba(96, 124, 16, 0.55),
    0 0 0 1px rgba(133, 162, 32, 0.36),
    0 4px 0 var(--murekkep-3),
    0 10px 18px -8px rgba(74, 92, 16, 0.32);
}
.dugme.asit:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 6px rgba(96, 124, 16, 0.42),
    0 0 0 1px rgba(133, 162, 32, 0.4),
    0 0 0 var(--murekkep-3);
  transition-duration: var(--dur-bas);
}
/* Ok çipi: koyu kare, asit ok. Düğmenin «bir yere götürdüğünü» söyler. */
.hap-ok {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-xs);
  margin-right: -8px;
  background: var(--murekkep);
  color: var(--asit);
}
.hap-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- İMZA AN — eşittir çiziliyor ----------
   Ekranın TEK imza anı. Plaka ilk karede tam opak duruyor; hareket eden
   yalnız iki çubuk: üst asit soldan, alt kâğıt sağdan çizilir ve ortada
   eşittir olur. «genau» = «tam olarak»; marka işareti burada kendini
   açıklıyor ve alt nottaki cümle onu sözle tamamlıyor.

   Mekanizma `_packs/animata/text/text-border-animation` + `_packs/fancy`
   `underline-center`'ın DÜZELTİLMİŞ hâli: fancy `width` ile büyütüyor,
   o bir yerleşim özelliği ve telefonda kare düşürüyor — `scaleX` GPU'da
   kalıyor. Yeni fiil eklenmedi: sitedeki `çözül`ün taban çizgisi zaten
   soldan sağa `scaleX(0→1)` çiziliyor, bu onun mikro ölçeği. */
.hos .levha::before,
.hos .levha::after {
  transform: scaleX(0);
  transition: transform var(--dur-kisa) var(--ev);
}
.hos .levha::before { transform-origin: left; }
.hos .levha::after  { transform-origin: right; }
.hos.ciz .levha::before { transform: scaleX(1); transition-delay: 0.20s; }
.hos.ciz .levha::after  { transform: scaleX(1); transition-delay: 0.26s; }

/* Karşılamadaki büyük levha — ad YOK. 72px plaka ile 30px başlık aynı
   anda dururken kelime-logo üçüncü bir başlık gibi okunuyordu. */
.hos-levha { --lv: 72px; }

@media (prefers-reduced-motion: reduce) {
  .hos .levha::before, .hos .levha::after { transform: scaleX(1); transition: none; }
}

/* Karşılamanın yeni parçaları — punto ölçeğinden, ham değer yok. */
.hos-levha { margin-bottom: 18px; }
.hos-soru {
  margin: 18px 0 0;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}
.hos .mono-et { font-size: var(--yz-mikro); }
.hos-not {
  margin: 12px 0 0;
  font-size: var(--yz-kucuk);
  line-height: 1.5;
  color: var(--murekkep-3);
  max-width: 32ch;
}
/* «genau» kelimesi Almanca ve markanın adı — italik değil, koyu.
   İtalik bir dil işareti olurdu; burada kastedilen VURGU. */
.hos-not b { color: var(--murekkep); font-weight: 600; }

.dugme.asit { font-size: var(--yz-orta); letter-spacing: -0.014em; }
.dugme.asit[disabled] { opacity: 0.7; }
.sv-sec b { font-size: var(--yz-orta); }
.sv-sec span { font-size: var(--yz-mikro); }
.sv-sec { min-height: 56px; }

/* İmza an bittikten SONRA gerisi beliriyor: 0-560ms arasında ekranda
   tek hareket eşittirin çizilmesi. Sitedeki `gnu-yukari` sırası aynen,
   sadece başlangıcı imza anın bitişine kaydırıldı. */
.hos > *:not(.hos-levha) { animation-delay: 0.56s; }
.hos .mono-et    { animation-delay: 0.56s; }
.hos h1          { animation-delay: 0.62s; }
.hos .hos-sahne  { animation-delay: 0.70s; }
.hos .hos-soru   { animation-delay: 0.78s; }
.hos .hos-svler  { animation-delay: 0.84s; }
.hos .hos-eylem  { animation-delay: 0.90s; }
.hos .hos-not    { animation-delay: 0.96s; }
/* Levhanın kendisi belirmiyor — ilk karede tam opak duruyor, hareket
   eden sadece içindeki iki çubuk. */
.hos .hos-levha  { animation: none; }

/* ═══════════════════════════════════════════════════════════════════
   53 · DÜĞME MADDESİ v2 — DOKUNMA FİZİĞİ
   ───────────────────────────────────────────────────────────────────
   §51 düğmelere GÖVDE verdi (beş katmanlı malzeme) ama DAVRANIŞ
   vermedi: basınca 1px iniyor, hepsi bu. Operatör «butonlar statik»
   dedi ve haklı — telefonda bir düğmenin kaliteli hissettirmesi
   yüzeyinden değil, parmağa nasıl cevap verdiğinden geliyor.

   Beş mekanizma eklendi. Hiçbiri yeni bir tasarım değeri getirmiyor:
   süreler mevcut ızgaradan, eğri tek ev eğrisi, hareket fiili
   sitedeki `çözül`ün scaleX'i ile aynı.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 53.1 · ASİMETRİK ZAMANLAMA ----------
   Bir düğmenin «gerçek» hissettirmesinin tek en büyük sebebi bu ve
   neredeyse hiçbir web arayüzünde yok: BASILMA ile BIRAKILMA aynı
   hızda olamaz. Parmak yüzeyi anında ittirir (0.12s), yay onu yavaş
   geri getirir (0.3s). İkisi eşit olduğunda düğme lastik gibi
   hissediyor. İki değer de mevcut süre ızgarasından — yeni yok. */
.dugme, .sv-sec, .ses-dugme, .cip-k {
  transition: transform var(--dur-kisa) var(--ev),
              box-shadow var(--dur-kisa) var(--ev);
}
.dugme:active, .sv-sec:active, .ses-dugme:active, .cip-k:active {
  transition-duration: var(--dur-bas);
}

/* ---------- 53.2 · DOKUNMA DALGASI ----------
   Parmağın DEĞDİĞİ noktadan yayılan dalga. Mekanizma
   `_packs/magicui/ripple-button`; React ve Tailwind atıldı, geriye
   iki özel özellik (--dx/--dy, app.js dokunma anında yazıyor) ve tek
   sınıf kaldı.

   Neden metnin ÜSTÜNDE: dalgayı arkaya almak düğmenin gradyan
   zeminini de ::before'a taşımayı gerektirirdi — .dolu ve .asit'in
   tüm zemin tanımları kırılırdı. Bunun yerine alfa düşük tutuldu
   (~0.14); yazı okunaklı kalıyor, dalga 0.7 saniyede geçiyor. */
.dugme, .sv-sec { position: relative; overflow: hidden; }
.dugme::after, .sv-sec::after {
  content: '';
  position: absolute;
  left: var(--dx, 50%);
  top: var(--dy, 50%);
  width: 230%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-tam);
  background: radial-gradient(circle, var(--dalga) 0%, transparent 64%);
  opacity: 0;
  transform: scale(0.12);
  pointer-events: none;
}
.dugme            { --dalga: rgba(60, 40, 20, 0.22); }
.dugme.dolu       { --dalga: rgba(255, 255, 255, 0.42); }
.dugme.asit       { --dalga: rgba(74, 92, 16, 0.34); }
.sv-sec           { --dalga: rgba(60, 40, 20, 0.20); }
.dugme.dalgali::after, .sv-sec.dalgali::after {
  animation: gnu-dalga var(--dur-uzun) var(--ev) forwards;
}
@keyframes gnu-dalga {
  0%   { opacity: 1; transform: scale(0.12); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- 53.3 · OK ÇİPİ YOLA ÇIKIYOR ----------
   Düğme «bir yere götürüyorum» diyor; basınca ok o yöne bir adım
   atıyor. Yön geri bildirimi, süs değil. */
.dugme.asit .hap-ok { transition: transform var(--dur-kisa) var(--ev); }
.dugme.asit:active .hap-ok {
  transform: translateX(3px);
  transition-duration: var(--dur-bas);
}

/* ---------- 53.4 · TEK PARILTI ----------
   Mekanizma `_packs/magicui/shimmer-button` — ama DÖNGÜSÜ SÖKÜLDÜ.
   Doktrin: markanın tek döngüsel hareketi maskotun nefesi (`gnu-suz`).
   İkinci bir döngü onu ucuzlatırdı. Bu yüzden pırıltı ömründe BİR
   kez, karşılama ekranındaki tek birincil eylem yerine oturduktan
   hemen sonra geçiyor — «buraya bas» demenin sessiz hâli. */
.hos .dugme.asit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 34%, rgba(255, 255, 255, 0.70) 50%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
}
.hos.ciz .dugme.asit::before {
  animation: gnu-parla 0.9s var(--ev) 1.15s 1 both;
}
@keyframes gnu-parla { to { transform: translateX(130%); } }

/* ---------- 53.5 · SEVİYE MANDALI ----------
   Seçili seviye artık YÜKSELMİYOR, OTURUYOR. Basılı bir anahtar
   basılı görünür; eski hâlde seçili düğme diğerleriyle aynı kotta
   duruyor, sadece kenarlığı renkleniyordu.

   Altındaki şerit sitedeki `çözül`ün taban çizgisiyle aynı fiil:
   soldan sağa scaleX(0→1). Yeni hareket fiili eklenmedi. 2px yarıçap
   yeni değer değil — logonun çubukları da (.levha::before) aynı
   kılcal yarıçapı kullanıyor. */
.sv-sec { padding-bottom: 16px; }
.sv-sec::before {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 2px;
  border-radius: var(--r-tam);
  background: var(--sv);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-kisa) var(--ev);
}
.sv-sec[aria-pressed='true'] {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(60, 40, 20, 0.13),
    0 0 0 1.5px var(--sv);
}
.sv-sec[aria-pressed='true']::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .dugme::after, .sv-sec::after,
  .hos .dugme.asit::before { animation: none; opacity: 0; }
  .sv-sec::before { transition: none; }
  .dugme.asit:active .hap-ok { transform: none; }
}

/* Zaten seçili olana basmak da bir basma. `[aria-pressed]` ile `:active`
   aynı özgüllükte ve sonra gelen kazanıyordu — seçili düğme parmağın
   altında ölü kalıyordu. */
.sv-sec[aria-pressed='true']:active { transform: translateY(3px) scale(0.972); }

/* ═══════════════════════════════════════════════════════════════════
   54 · KARAKTERİN TEPKİSİ
   ───────────────────────────────────────────────────────────────────
   Maskot şu ana kadar yalnız DURUYORDU: karşılamada bir kez, günlük
   ekranda bir kez, hep aynı yüzle. Bir karakterin karakter olması için
   olan bitene tepki vermesi gerekiyor — yoksa süs.

   Dört poz tek ızgarada üretildi (ChatGPT, 2026-08-30). Ayrı ayrı
   üretilenler aynı malzemeyi tutturamıyor; ızgara bunu garantiliyor.
   Hepsi aynı ortak tuvalde ve aynı ölçekte kesildi — pozlar arasındaki
   boy farkı KARAKTERİN KENDİSİ (ezilme/uzama), çerçeveleme hatası değil.

   Hareket fiilleri sitede zaten var: `gnu-pop` (§52) ve `gnu-sars`.
   Uygulama için yeni fiil icat edilmedi.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes gnu-pop  { 0% { transform: scale(1); } 42% { transform: scale(1.055); } 100% { transform: scale(1); } }
@keyframes gnu-sars { 0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); } 38% { transform: translateX(5px); }
  58% { transform: translateX(-3px); } 78% { transform: translateX(2px); } }

.tepki {
  width: 52px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 2px 3px rgba(40, 14, 4, 0.18))
          drop-shadow(0 7px 12px rgba(40, 14, 4, 0.20));
}
.tepki.iyi  { animation: gnu-pop  var(--dur-uzun) var(--ev) 1; }
.tepki.kotu { animation: gnu-sars var(--dur-uzun) var(--ev) 1; }

/* Sonuç kutusu artık bir satır değil, bir sahne: karakter solda,
   cümle sağda. `.kalip-sonuc` eskiden düz metin bloğuydu. */
.kalip-sonuc { display: flex; align-items: flex-start; gap: 12px; }
.kalip-sonuc > span { flex: 1; }

/* ---------- TEST SONUCU ----------
   Puan ekranı ham `style` niteliklerinden kurtarıldı: 34px ve 20px
   ızgarada yoktu, kutunun içine elle yazılmıştı. */
/* Sonuç kutusu — operatör: «buradaki logomsu şey çok kötü gözüküyor».
   Eskiden 84px'lik maskot, geniş bir kartın ortasında tek başına duruyor,
   altına küçük bir skor düşüyordu: kocaman boş kutuda yüzen bir çıkartma.
   Şimdi iki sütun: maskot solda ve BÜYÜK, sağda skor ve varsa hüküm
   cümlesi alt alta. Maskot bütün satırları kapsar (`grid-row: 1 / -1`),
   böylece kutunun üç ayrı kullanımı (mini test · dinleme · blog turu)
   tek kuralla çalışır. Kaynak varlık 600×578, büyütmek bozmuyor. */
.sonuc-kutu {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 18px;
  text-align: left;
  padding: 20px;
}
/* `.tepki.iri` (§ 79, dosyanın sonunda) eşit özgüllükte ve sonra geldiği
   için kazanıyordu; sonuç kutusu kendi ölçüsünü açıkça söylüyor. */
.sonuc-kutu .tepki,
.sonuc-kutu .tepki.iri { grid-row: 1 / -1; width: 116px; margin: 0; display: block; }
.sonuc-puan {
  display: block;
  line-height: 1;
  font-size: var(--yz-h1);
  font-weight: 700;
  letter-spacing: var(--ls-dev);
}
.sonuc-puan .sonuc-payda { font-size: var(--yz-h3); color: var(--murekkep-3); font-weight: 600; }
.sonuc-kutu .bos { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .tepki.iyi, .tepki.kotu { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   55 · KARŞILAMA v3 — SİTENİN SAHNESİ
   ───────────────────────────────────────────────────────────────────
   Operatör: «ilk giriş çok basit duruyor, sitedekini kullansana».
   Üç parça sitenin giriş sahnesinden taşındı, hepsi kaynak satırıyla:
   aurora ışıması (stil.css:10166, mobil değişkeni 11370) · kart zemini
   · A1 satırı (.sr, stil.css:8290). Seviye sorusu ikinci adıma gitti —
   ilk ekranda TEK eylem kaldı.
   ═══════════════════════════════════════════════════════════════════ */
.hos { position: relative; }

/* Aurora — statik CSS yedeği. Mobilde animasyon YOK ve bulanıklık 52px
   (stil.css:11370 aynen: shader mobilde ana işi %85 yiyordu, ölçülmüş).
   Ekrana sabit DEĞİL — .hos ile kayar, doktrin ihlali yok. */
.hos-aurora {
  /* ALTTA 0: `-18%` alt taşması `.govde`nin kaydırma alanına ekleniyor
     ve karşılama ekranında 123px ÖLÜ KAYDIRMA yapıyordu (ölçüldü,
     2026-09-14). Aynı tuzağa kurs ekranındaki kâğıt ufkunda da
     düşülmüştü: dekoratif mutlak katman AŞAĞI taşmamalı. */
  position: absolute; inset: -18% -30% 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(52px) saturate(0.98);
  opacity: 0.34;
  background:
    radial-gradient(40% 44% at 14% 8%, var(--alan) 0%, transparent 64%),
    radial-gradient(35% 39% at 66% 30%, var(--asit) 0%, transparent 62%),
    radial-gradient(29% 33% at 30% 66%, var(--vurgu) 0%, transparent 64%);
}
.hos > *:not(.hos-aurora) { position: relative; z-index: 1; }

/* Kart — sitenin kahraman kartı gibi içerik yükseltilmiş zeminde
   duruyor; sahne «sayfaya serpilmiş» değil «çerçevelenmiş». */
.hos-kart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 18px 18px;
  border-radius: var(--r-md);
  /* Değerler `:root`ta (--hos-kart-1/2): burada sabit yazılıyken gece
     temasında kart AÇIK kalıyordu, yazı ise beyaza dönüyordu —
     «Almancayı … öğren» ekran pikselinden 1,37:1 ölçüldü. */
  background: linear-gradient(180deg, var(--hos-kart-1), var(--hos-kart-2));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(43, 34, 24, 0.10),
    0 24px 48px -22px rgba(60, 40, 20, 0.28);
}

/* A1 satırı — sitenin .sr bileşeni (stil.css:8290), mikro ölçek.
   Süs değil KÖPRÜ: siteden gelen öğrenci aynı satırı burada görüyor. */
.sr-satir {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  padding: 0 14px;
  min-height: 56px;
  border-radius: var(--r-plaka);
  text-align: left;
  background: linear-gradient(180deg, var(--isik), var(--tas) 94%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -9px 16px -11px rgba(120, 86, 52, 0.30),
    0 7px 16px -7px rgba(60, 40, 20, 0.18);
}
.sr-sv {
  background: var(--alan-2);
  color: var(--isik);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  flex: none;
}
.sr-satir .sr-ad { flex: 1; font-size: var(--yz-orta); font-weight: 600; letter-spacing: -0.018em; }
.sr-ok {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-tam);
  background: var(--kagit);
  color: var(--murekkep);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(43, 34, 24, 0.14);
}
.sr-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* İkinci adım: seviye LİSTESİ. Kutucuklar («Temelim var» iki satıra
   kırılıyordu) yerine sitenin satır dili. */
.sv-liste { display: grid; gap: 8px; width: 100%; margin-top: 16px; }
.sv-satir {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-height: 56px;
  text-align: left;
  border-radius: var(--r-plaka);
  color: var(--murekkep-2);
  background: linear-gradient(180deg, var(--isik), var(--tas) 94%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(43, 34, 24, 0.12),
    0 2px 3px rgba(60, 40, 20, 0.09);
  transition: box-shadow var(--dur) var(--ev), transform var(--dur) var(--ev);
}
.sv-satir span { font-size: var(--yz-orta); font-weight: 600; letter-spacing: -0.014em; }
.sv-satir[aria-pressed='true'] {
  color: var(--murekkep);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1.5px var(--vurgu-koyu),
    0 2px 4px rgba(60, 40, 20, 0.10);
}
.sv-satir[aria-pressed='true'] .sr-sv { background: var(--vurgu-koyu); }
.sv-satir:active { transform: translateY(2px) scale(0.99); transition-duration: var(--dur-bas); }
.sv-satir:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

/* Kart içi ölçüler */
.hos-kart .hos-levha { --lv: 56px; margin-bottom: 14px; }
.hos-kart h1 { margin: 8px 0 0; }
.hos-kart .hos-sahne { margin-top: 18px; }
.hos-eylem { display: grid; gap: 9px; }
.hos-adim2 .hos-soru { margin-top: 8px; }

/* Karşılamada eylem sırası: asit önce, kâğıt sonra — site çifti. */
@media (prefers-reduced-motion: reduce) {
  .hos-aurora { opacity: 0.22; }
}

/* ═══════════════════════════════════════════════════════════════════
   56 · YOL EKRANI — uygulamanın kendi dili
   ───────────────────────────────────────────────────────────────────
   Operatör: «tasarım iyi de site için olduğu belli — app'e özel şeyler
   gelmeli, Duolingo'yu taklit et.» Reçete sanidhyy/duolingo-clone'dan
   (635★) söküldü: dikey düğüm sütunu, 8'li zikzak (right = kademe×40),
   mevcut düğümde START balonu, biten düğümde onay, kilitte gri.

   Bizim yolun dört durağı ürünün kendi mekaniği: kelime → kalıp →
   metin → test. Düğümler düğmelerle AYNI maddeden (düz dolgu + sert
   etek) — tek malzeme dili.
   ═══════════════════════════════════════════════════════════════════ */
.yol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 20px;
}
.yol-durak {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.yol-durak:first-child { margin-top: 10px; }
.yol-durak[disabled] { cursor: default; }

/* Düğüm — 74px daire, Duolingo maddesi. Renk DURUMDAN gelir. */
.yol-yuvarlak {
  width: 74px; height: 74px;
  border-radius: var(--r-tam);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.yol-yuvarlak svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Etek 8px — klon düğümde düğmenin 4px'ini border-b-8 ile İKİYE katlıyor
   (lesson-button.tsx); 70px'lik jetonda 4px silik kalıyor.
   KİLİTLİ DÜĞÜM DERSİ (ölçüldü): dolgu #f2ece1 zeminden 1,10:1 ile hiç
   ayrışmıyordu, «ikon boşlukta yüzüyor» hissinin kaynağı buydu. Duolingo
   kilitliyi ölü göstermiyor çünkü AYNI fiziksel dili koruyor: gri gövde +
   belirgin koyu etek + basılınca çökme. Etek --ayrac değil mürekkebin
   %22'si — dolgunun üstünde 1,17 değil ~2,4:1. */
.yol-durak.simdiki .yol-yuvarlak, .adim-kart.simdiki .yol-yuvarlak {
  background:
    radial-gradient(70% 60% at 32% 24%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #ddfa66 0%, var(--asit) 56%, #bcdc36 100%);
  color: var(--murekkep);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -10px 16px -10px rgba(96, 124, 16, 0.6),
    0 8px 0 #97b322,
    0 14px 22px -10px rgba(74, 92, 16, 0.4);
}
.yol-durak.bitti .yol-yuvarlak, .adim-kart.bitti .yol-yuvarlak {
  background:
    radial-gradient(70% 60% at 32% 24%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #bd5b2c 0%, var(--vurgu-koyu) 58%, #94411a 100%);
  color: var(--alan-metin);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -10px 16px -10px rgba(74, 26, 6, 0.6),
    0 8px 0 #7d340f,
    0 14px 22px -10px rgba(90, 40, 12, 0.38);
}
.yol-durak.kilitli .yol-yuvarlak {
  background: var(--kagit-3);
  color: var(--murekkep-3);
  box-shadow: inset 0 0 0 1.5px rgba(43, 34, 24, 0.10), 0 8px 0 rgba(43, 34, 24, 0.22);
}
.yol-durak:not([disabled]):active .yol-yuvarlak { transform: translateY(8px); box-shadow: 0 0 0 transparent; }

/* Mevcut düğümün çevresinde duran halka — klondaki progress ring'in
   sade hâli: ilerleme yüzdesi yerine «buradasın» işareti. */
.yol-durak.simdiki .yol-yuvarlak {
  outline: 3px solid rgba(169, 197, 49, 0.45);
  outline-offset: 5px;
}

/* START balonu. Klonda sonsuz bounce — bizde DURUYOR: markanın tek
   döngüsel hareketi maskotun nefesi, ikinci döngü yasak (§49). */
.yol-balon {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--isik);
  color: var(--vurgu-koyu);
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-plaka);
  box-shadow: 0 0 0 1.5px rgba(43, 34, 24, 0.14), 0 3px 0 rgba(43, 34, 24, 0.10);
  white-space: nowrap;
  z-index: 2;
}
.yol-balon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--isik);
}

.yol-et {
  font-size: var(--yz-kucuk);
  font-weight: 600;
  color: var(--murekkep-2);
  letter-spacing: -0.01em;
}
.yol-durak.kilitli .yol-et { color: var(--murekkep-3); font-weight: 400; }
.yol-durak.simdiki .yol-et { color: var(--murekkep); }
/* Maskot mevcut durağın YANINDA durur — klondaki gibi yola eşlik eder. */
/* BÖLÜM BANDI — klonun UnitBanner'ı (unit-banner.tsx: p-5 rounded-xl,
   koyu dolgu, beyaz iki satır). Eski selam satırı sola yaslı, yol ortalı
   — aynı ekranda iki eksen (ölçüldü). Bant iki işi birden yapıyor:
   başlık ve günün durumu TEK blokta, yol onun altında başlıyor. */
.yol-bant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #b4552a 0%, var(--sv-a1) 60%, #8e3d16 100%);
  color: var(--alan-metin);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3);
}
.yol-bant .bant-sv {
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: none;
}
.yol-bant b { display: block; font-size: var(--yz-buyuk); font-weight: 700; letter-spacing: -0.018em; }
.yol-bant span { display: block; margin-top: 3px; font-size: var(--yz-kucuk); opacity: 0.85; }

/* Nokta izi — yöntem C (araştırma): düğümler ARASINA üç nokta, iki
   komşunun ortalama kaymasında. Duolingo'nun kendisi çizgisiz ama nokta
   izi «yol» okunuşunu en az kodla veriyor; geçilen iz asitle dolar. */
.yol-nokta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}
.yol-nokta i {
  width: 8px; height: 8px;
  border-radius: var(--r-tam);
  background: var(--ayrac);
}
.yol-nokta.gecildi i { background: var(--asit); box-shadow: inset 0 -2px 0 #a9c531; }

/* ---------- ÜST ÇUBUK — durum çipleri ----------
   Duolingo üst çubuğu: bayrak · seri alevi · elmas · can. Bizde üç çip:
   seri (alev) · bilinen kelime (yaprak) · seviye. Sayı + küçük ikon,
   başlık değil GÖSTERGE. */
/* [hidden] her zaman kazanır — .ust'un grid'i gibi burada da açık
   display'i ezmesi gerekiyor (aynı tuzak iki kez: §52 .ust[hidden]). */
.ust-cip[hidden] { display: none; }
.ust-cip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ust-cip svg { width: 17px; height: 17px; flex: none; }
.ust-cip.cip-seri { color: var(--vurgu-koyu); }
.ust-cip.cip-kelime { color: var(--murekkep-2); }

/* ---------- DERS ÜST ÇUBUĞU — kapat + ilerleme ----------
   Duolingo ders ekranı: X + dolu bar, başka hiçbir şey. Bar dolu ucu
   asit; kalan yol kâğıt-3. Yükseklik 14px — parmak değil GÖZ hedefi. */
.ders-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ders-kapat {
  appearance: none;
  border: 0;
  background: none;
  /* 32×32'ydi. Odak modunda (2026-09-14) alt çubuk gizlendiği için bu
     düğme akıştaki TEK ÇIKIŞ; 44px'in altında kalamaz (WCAG 2.5.8).
     Negatif pay ikonun durduğu yeri değiştirmiyor: eski kutu 32 ve
     -6 paylıydı, ikon 20px ve ortalıydı → sol kenar 0'da. Yeni kutu 44
     ve -12 pay → ikon yine 0'da. Şeritle arası `gap: 12px` üstüne
     eklenen 12px'lik negatif payla 12px'e düşmesin diye sağ pay 0. */
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -12px 0 -12px -12px;
  cursor: pointer;
  color: var(--murekkep-3);
  display: grid;
  place-items: center;
}
.ders-kapat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ders-kapat:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
.ders-yol {
  flex: 1;
  height: 14px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.10);
  overflow: hidden;
}
.ders-yol > span {
  display: block;
  height: 100%;
  border-radius: var(--r-tam);
  background: var(--asit);
  box-shadow: inset 0 -3px 0 #a9c531, inset 0 2px 0 rgba(255, 255, 255, 0.55);
  transition: width var(--dur-yavas) var(--ev);
  min-width: 14px;
}

/* ---------- ALT SEKMELER — aktif yuva ----------
   Duolingo aktif sekmesi çerçeveli renkli yuvada oturur. */
.sek[aria-current] {
  color: var(--vurgu-koyu);
}
.sek[aria-current] svg {
  background: var(--kagit-2);
  box-shadow: 0 0 0 1.5px rgba(162, 72, 31, 0.35);
  border-radius: var(--r-xs);
  padding: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ders-yol > span { transition: none; }
}

/* Balon ilk duraktayken selam satırına biniyordu — klon ilk düğüme
   60px üst pay veriyor (lesson-button.tsx: marginTop isFirst && 60). */
.yol-durak.simdiki:first-child { margin-top: 60px; }

/* ---------- 56.1 · DURAK AÇILIŞI ----------
   Kilit rengiyle başlar, `gnu-pop` fiiliyle rengine oturur. Süreler
   ızgaradan; pop sitede zaten var, yeni fiil yok. Reduced-motion'da
   geçişsiz doğrudan renkli hâl. */
.yol-durak.acildi .yol-yuvarlak, .adim-kart.acildi .yol-yuvarlak {
  background: var(--kagit-3);
  color: var(--murekkep-3);
  box-shadow: inset 0 0 0 1.5px rgba(43, 34, 24, 0.10), 0 8px 0 rgba(43, 34, 24, 0.22);
  outline-color: transparent;
  transition: background var(--dur-yavas) var(--ev), color var(--dur-yavas) var(--ev),
    box-shadow var(--dur-yavas) var(--ev), outline-color var(--dur-yavas) var(--ev);
}
.yol-durak.acildi.renklendi .yol-yuvarlak, .adim-kart.acildi.renklendi .yol-yuvarlak {
  background: var(--asit);
  color: var(--murekkep);
  box-shadow: 0 8px 0 #a9c531;
  outline-color: rgba(169, 197, 49, 0.45);
  animation: gnu-pop var(--dur-uzun) var(--ev) var(--dur-yavas) 1;
}
@media (prefers-reduced-motion: reduce) {
  .yol-durak.acildi .yol-yuvarlak, .adim-kart.acildi .yol-yuvarlak { transition: none; animation: none; }
}

/* ---------- 56.2 · ÖĞREN — seviye bandı + konu satırları ----------
   Bant: klondaki UnitBanner. Dolgu seviyenin hat rengi (--sv-*), etek
   aynı rengin koyusu değil MÜREKKEP gölgesi — üç ayrı koyu ton
   türetmemek için tek nötr etek. */
.bant {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 10px;
  padding: 14px 16px;
  border-radius: var(--r-plaka);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  box-shadow: 0 4px 0 rgba(43, 34, 24, 0.30);
}
/* Yazı `--sv-metin`: gecede seviye renkleri açılıyor, sabit açık yazı
   orada 1,99-2,52:1 veriyordu (ölçüldü 2026-09-14). */
.bant-a1 { background: var(--sv-a1); color: var(--sv-metin); }
.bant-a2 { background: var(--sv-a2); color: var(--sv-metin); }
.bant-b1 { background: var(--sv-b1); color: var(--sv-metin); }
.bant b {
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bant span { flex: 1; font-size: var(--yz-govde); font-weight: 600; letter-spacing: -0.01em; }
.bant i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  opacity: 0.85;
}

/* Konu satırı — düğmelerle aynı Duolingo maddesi, sola yaslı içerik. */
.konu-satir {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  text-align: left;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  color: var(--murekkep);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -11px rgba(120, 86, 52, 0.24),
    0 0 0 1px rgba(43, 34, 24, 0.12),
    0 3px 0 rgba(43, 34, 24, 0.13),
    0 8px 14px -8px rgba(60, 40, 20, 0.16);
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.konu-satir:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 1.5px rgba(43, 34, 24, 0.12), 0 0 0 rgba(43, 34, 24, 0.14);
  transition-duration: var(--dur-bas);
}
.konu-satir:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

/* Durum pulu: çözülmemiş = boş halka (yapılacak iş), çözülmüş = dolu
   onay. İyi geçtiyse asit, zorlandıysa terrakota — puldan okunuyor. */
.konu-pul {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-tam);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 2px var(--ayrac);
  color: transparent;
}
.konu-satir.iyi .konu-pul { background: var(--asit); color: var(--murekkep); box-shadow: inset 0 -3px 0 #a9c531; }
.konu-satir.zayif .konu-pul { background: var(--vurgu); color: var(--alan-metin); box-shadow: inset 0 -3px 0 #8e3d16; }
.konu-pul svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.konu-ad { flex: 1; min-width: 0; }
.konu-ad b { display: block; font-size: var(--yz-govde); font-weight: 600; letter-spacing: -0.01em; }
.konu-ad small { display: block; margin-top: 2px; font-size: var(--yz-mikro); color: var(--murekkep-3); }

/* ═══════════════════════════════════════════════════════════════════
   57 · DERS — reels ritminde anlatım
   ───────────────────────────────────────────────────────────────────
   Sitenin anlatımı, blok başına bir slayt. scroll-snap; kütüphane yok.
   İçerik sınıfları (.de · .vur · .a-der/die/das) sitedekiyle AYNI
   anlama gelir — kaynak: stil.css:525/960/1115.
   ═══════════════════════════════════════════════════════════════════ */
.ders-akis {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* .govde'nin 16px dolgusunu tam genişliğe aç: slayt EKRAN kaplar,
     reels hissi kenar boşluğuyla olmaz. */
  margin: 0 -16px;
  /* 212 = üst bant + ilerleme çubuğu + sayaç (eski 150) + «Devam» düğmesi
     (52px + 10px üst boşluk). Düğme eklenince bu sayı güncellenmezse düğme
     alt sekme çubuğunun altında kalıyor — ölçüldü. */
  height: calc(100dvh - var(--cubuk-pay) - 212px);
}
.ders-akis::-webkit-scrollbar { display: none; }
.slayt {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* tek fırlatmada tek slayt — reels kuralı */
  overflow-y: auto;
  padding: 8px 22px 24px;
  display: flex;
  flex-direction: column;
}
.slayt-bolum {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
  margin-bottom: 12px;
  flex: none;
}
.slayt-icerik { margin: auto 0; }   /* içerik dikeyde ortalanır — kart hissi */
.ders-sayac {
  margin-top: 8px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}

/* Blok görünümleri */
.sl-p { margin: 0; font-size: var(--yz-buyuk); line-height: 1.65; }
.sl-p + .sl-p { margin-top: 10px; }
.sl-not {
  padding: 14px 16px;
  border-radius: var(--r-plaka);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  font-size: var(--yz-orta);
  line-height: 1.6;
}
.sl-kisayol {
  padding: 16px;
  border-radius: var(--r-plaka);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}
.sl-kisayol b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Kutu tema ile ters dönüyor (gündüz koyu levha, gece krem kart);
     vurgu da dönmeli — sabit asit gecede 1,05:1 idi. */
  color: var(--alan-2-vurgu);
  margin-bottom: 8px;
}
.sl-kisayol p { margin: 0; font-size: var(--yz-buyuk); line-height: 1.55; }
.sl-replik { text-align: center; padding: 8px 0; }
.sl-replik .de {
  display: block;
  font-size: var(--yz-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.35;
  margin: 0 0 6px;
}
.sl-replik .tr { display: block; margin: 8px 0 0; font-size: var(--yz-orta); color: var(--murekkep-3); line-height: 1.5; }
.sl-replik.kotu .de { color: var(--murekkep-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.sl-ses { display: flex; justify-content: center; margin-top: 4px; }
.sl-liste { margin: 0; padding: 0 0 0 20px; font-size: var(--yz-buyuk); line-height: 1.75; }
.sl-liste li + li { margin-top: 8px; }
.sl-tablo-sar { overflow-x: auto; border-radius: var(--r-plaka); box-shadow: inset 0 0 0 1px var(--ayrac); }
.sl-tablo { border-collapse: collapse; width: 100%; font-size: var(--yz-govde); }
.sl-tablo th, .sl-tablo td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--ayrac); vertical-align: top; }
.sl-tablo th { font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--murekkep-3); }
.sl-tablo tr:last-child td { border-bottom: 0; }
.sl-tuzak {
  padding: 16px;
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
  box-shadow: inset 0 0 0 1.5px var(--vurgu);
}
.sl-tuzak > b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
  margin-bottom: 10px;
}
.sl-tuzak .sl-replik { text-align: left; padding: 6px 0; }
.sl-tuzak .sl-replik .de { font-size: var(--yz-buyuk); }
.sl-tuzak .sl-p { font-size: var(--yz-orta); }

/* Son slayt */
.slayt-son { align-items: center; text-align: center; justify-content: center; gap: 6px; }
.slayt-son h2 { margin: 10px 0 0; font-size: var(--yz-h2); letter-spacing: var(--ls-dev); }
.slayt-son p { margin: 4px 0 18px; color: var(--murekkep-3); max-width: 30ch; line-height: 1.55; }
.slayt-son .dugme { width: 100%; }
/* Ölçüm (2026-09-13): 126×20 — blok bağ, satır içi muafiyeti yok.
   Dolgu yazıyı değil hedefi büyütüyor; üst boşluk dolguya devredildi. */
.slayt-site {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}

/* İçerik sınıfları — stil.css karşılıkları */
.de { font-weight: 600; letter-spacing: -0.015em; }
.vur { color: var(--vurgu-koyu); font-weight: 600; }
.a-der { color: var(--der); font-weight: 600; }
.a-die { color: var(--die); font-weight: 600; }
.a-das { color: var(--das); font-weight: 600; }

/* ---------- 57.1 · BUGÜN — YATAY ADIM RAYI ----------
   Operatör: «Duolingo gibi değil, adımlar YATAY olsun». Dikey yol
   (§56) yatay raya çevrildi: kartlar scroll-snap ile kayar, jeton dili
   aynen. Nokta izi kartlar ARASINDA yatay. */
.adim-kart {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  flex: 0 0 132px;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 16px -12px rgba(120, 86, 52, 0.24),
    0 0 0 1px rgba(43, 34, 24, 0.12),
    0 4px 0 rgba(43, 34, 24, 0.13),
    0 12px 20px -10px rgba(60, 40, 20, 0.2);
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.adim-kart[disabled] { cursor: default; background: var(--kagit-3); box-shadow: 0 0 0 1.5px rgba(43, 34, 24, 0.08), 0 4px 0 rgba(43, 34, 24, 0.10); }
.adim-kart:not([disabled]):active { transform: translateY(4px); box-shadow: 0 0 0 1.5px rgba(43, 34, 24, 0.12), 0 0 0 rgba(43, 34, 24, 0.14); transition-duration: var(--dur-bas); }
.adim-kart:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.adim-kart .yol-yuvarlak { width: 62px; height: 62px; }
.adim-kart .yol-yuvarlak svg { width: 28px; height: 28px; }
.adim-kart.simdiki .yol-yuvarlak { outline: 3px solid rgba(169, 197, 49, 0.45); outline-offset: 4px; }
.adim-kart.kilitli .yol-yuvarlak,
.adim-kart.acik .yol-yuvarlak { box-shadow: inset 0 0 0 1.5px rgba(43, 34, 24, 0.10), 0 6px 0 rgba(43, 34, 24, 0.20); }
.adim-kart.acik .yol-yuvarlak {
  background: linear-gradient(180deg, var(--isik), var(--tas));
  color: var(--murekkep-2);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -10px rgba(120, 86, 52, 0.3),
    0 6px 0 rgba(43, 34, 24, 0.18),
    0 10px 16px -8px rgba(60, 40, 20, 0.2);
}
.adim-kart.kilitli .yol-yuvarlak {
  /* İki ucu da TOKEN: ham #eae2d4 koyu temada gümüş top üretiyordu
     (koyu ölçümü 2026-08-31) — kagit-3 koyulaşırken sabit açık uç kaldı. */
  background: linear-gradient(180deg, var(--kagit-3), var(--kagit-2));
  color: var(--murekkep-3);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    0 6px 0 rgba(43, 34, 24, 0.16),
    0 8px 14px -8px rgba(60, 40, 20, 0.16);
}
.adim-kart .yol-balon { top: -30px; }
.adim-et { font-size: var(--yz-kucuk); font-weight: 600; color: var(--murekkep); }
.adim-kart.kilitli .adim-et { color: var(--murekkep-3); font-weight: 400; }

/* Bant içinde maskot — «arka plan dolu olsun»un ilk yarısı: karakter
   markanın yüzü, bandın sağında oturuyor. */
.yol-bant { position: relative; overflow: visible; }
.yol-bant .bant-maskot {
  width: 54px;
  height: auto;
  flex: none;
  margin: -26px -4px -10px 0;
  filter: drop-shadow(0 2px 3px rgba(40, 14, 4, 0.22)) drop-shadow(0 8px 14px rgba(40, 14, 4, 0.24));
}
.yol-bant > div { flex: 1; }

/* Aurora — ikinci yarı: sayfanın tepesinde sitenin ışıması. İçerikle
   kayar (fixed DEĞİL — doktrin). */
.govde { position: relative; z-index: 0; }
.gun-isik {
  position: absolute;
  top: -8%; left: -30%; right: -30%;
  height: 420px;
  max-width: none !important;
  pointer-events: none;
  z-index: -1;
  filter: blur(52px) saturate(0.98);
  opacity: 0.30;
  background:
    radial-gradient(42% 46% at 16% 10%, var(--alan) 0%, transparent 64%),
    radial-gradient(36% 40% at 68% 26%, var(--asit) 0%, transparent 62%),
    radial-gradient(30% 34% at 34% 72%, var(--vurgu) 0%, transparent 64%);
}
@media (prefers-reduced-motion: reduce) {
  .gun-isik { opacity: 0.20; }
}

/* ═══════════════════════════════════════════════════════════════════
   58 · DEVAM PAKETİ — combo · seri kartı · günlük halka · okundu
   ═══════════════════════════════════════════════════════════════════ */

/* Combo şeridi — testte 3+ üst üste doğru. Karakter övüyor, sistem
   değil. `gnu-pop` tepki görselinde zaten var; şerit kendisi
   `gnu-yukari` ile gelir. */
.combo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-plaka);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #ddfa66 0%, var(--asit) 54%, #c1e137 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -8px 14px -9px rgba(96, 124, 16, 0.55),
    0 0 0 1px rgba(133, 162, 32, 0.36),
    0 4px 0 var(--murekkep-3),
    0 10px 18px -8px rgba(74, 92, 16, 0.32);
  animation: gnu-yukari 0.62s var(--ev) both;
}
.combo b { font-size: var(--yz-orta); letter-spacing: -0.014em; }
.combo .tepki { width: 40px; }

/* Seri kartı — Ben'in aynası */
.seri-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.30);
  margin-bottom: 14px;
}
/* Alev `--alan-2-vurgu`: kart tema ile ters dönüyor, gecede krem
   zeminde `--vurgu` 2,2:1 kalıyordu (anlamlı grafik eşiği 3:1). */
.seri-alev { width: 44px; height: 44px; fill: var(--alan-2-vurgu); flex: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.seri-soz { flex: 1; }
.seri-soz b { display: block; font-size: var(--yz-h2); font-weight: 700; letter-spacing: var(--ls-dev); line-height: 1.1; }
.seri-soz span { display: block; margin-top: 3px; font-size: var(--yz-kucuk); opacity: 0.8; }
.seri-maskot { width: 60px; height: auto; flex: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }

/* Günlük halka — banttaki 3 adım sayacı. Conic; sıfırda da görünür
   (iz rengi), doluluk asit. */
.bant-halka {
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-tam);
  display: grid;
  place-items: center;
  background: conic-gradient(var(--asit) var(--dolu, 0%), rgba(255, 253, 249, 0.25) 0);
  position: relative;
}
.bant-halka::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: var(--r-tam);
  background: var(--sv-a1);
}
.bant-halka b {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
}

/* Okundu pulu — Öğren satırında: test çözülmemiş ama anlatım okunmuş. */
/* ---------- 59 · ZENGİNLİK PAKETİ ---------- */
/* Yazma modu girişi — kart diliyle aynı hamur. */
.yaz-sar { margin-top: 14px; }
.yaz-kutu {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-plaka);
  font: inherit;
  font-size: var(--yz-buyuk);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--murekkep);
  background: var(--kagit);
  box-shadow: inset 0 2px 5px rgba(60, 40, 20, 0.12), 0 0 0 1.5px var(--ayrac);
  text-align: center;
}
.yaz-kutu:focus-visible { outline: none; box-shadow: inset 0 2px 5px rgba(60, 40, 20, 0.12), 0 0 0 2px var(--vurgu-koyu); }
.yaz-kutu.dogru { box-shadow: inset 0 2px 5px rgba(96, 124, 16, 0.18), 0 0 0 2px #97b322; background: #f4fadd; }
.yaz-kutu.yanlis { box-shadow: inset 0 2px 5px rgba(90, 40, 12, 0.16), 0 0 0 2px var(--vurgu); }

/* Ders mini kartları (kartlar bloğu) */
.sl-kartlar { display: grid; gap: 10px; }
.sl-mini {
  padding: 13px 15px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(43, 34, 24, 0.10),
    0 3px 0 rgba(43, 34, 24, 0.10);
  text-align: left;
}
.sl-mini i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--murekkep-3);
  display: block;
  margin-bottom: 4px;
}
.sl-mini .de { display: block; font-size: var(--yz-buyuk); margin: 0; }
.sl-mini .tr { display: block; margin: 4px 0 0; font-size: var(--yz-kucuk); color: var(--murekkep-3); }

/* Köprü çipleri — yol işareti, bağlantı değil */
.sl-kopru b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
  margin-bottom: 10px;
}
.sl-kopru span {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 8px 13px;
  border-radius: var(--r-tam);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  font-size: var(--yz-kucuk);
  font-weight: 600;
  color: var(--murekkep-2);
}

/* Sınav satırı — koyu mürekkep pul, sınav olduğu belli olsun */
.sinav-satir { margin-top: 8px; }
.sinav-satir .konu-pul { box-shadow: inset 0 0 0 2px var(--alan-2); }
.sinav-satir.iyi .konu-pul { background: var(--asit); box-shadow: inset 0 -3px 0 #97b322; }

/* ---------- 60 · KOYU TEMA DÜZELTMELERİ ----------
   Kil malzeme açık temada doğdu; koyuda iki yerde beyaz üst ışık
   fazla geliyordu (ölçüm: koyu ekran görüntüsü, 2026-08-31). Token
   olmayan tek şey ışık alfaları — burada kısılıyor. */
@media (prefers-color-scheme: dark) {
  .yol-bant {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #8e3d16 0%, #7d340f 60%, #6a2c0c 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.12),
      inset 0 -10px 18px -12px rgba(0, 0, 0, 0.5),
      0 4px 0 #4a1f08,
      0 14px 24px -10px rgba(0, 0, 0, 0.5);
  }
  .bant-halka::before { background: #7d340f; }
  .adim-kart, .konu-satir, .sl-mini {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 4px 0 rgba(0, 0, 0, 0.45),
      0 12px 20px -10px rgba(0, 0, 0, 0.5);
  }
  .adim-kart.simdiki .yol-yuvarlak { outline-color: rgba(169, 197, 49, 0.30); }
  .gun-isik { opacity: 0.22; }
}

/* ---------- 61 · GÜNÜN SONU ----------
   Halka 3/3 olduğu ilk dönüşte tam ekran an. Patlama: sekiz nokta
   merkezden dışarı tek sefer — `--px/--py` her noktanın yönü. Döngü
   YOK; markanın tek döngüsü maskotta kalır. */
.gun-final {
  position: relative;
  min-height: calc(100dvh - var(--cubuk-pay) - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.final-maskot {
  width: 132px;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(40, 14, 4, 0.22)) drop-shadow(0 22px 34px rgba(40, 14, 4, 0.26));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-kisa) var(--ev), transform var(--dur-yavas) var(--ev);
}
.gun-final.patla .final-maskot { opacity: 1; transform: scale(1); }
.gun-final h1 { margin: 14px 0 0; font-size: var(--yz-h1); letter-spacing: var(--ls-dev); }
.gun-final p { margin: 6px 0 22px; color: var(--murekkep-3); line-height: 1.6; }
.gun-final p b { color: var(--vurgu-koyu); }
.gun-final .dugme { width: 100%; max-width: 320px; }

.final-patlama { position: absolute; inset: 0; pointer-events: none; }
.final-patlama i {
  position: absolute;
  left: 50%; top: 38%;
  width: 11px; height: 11px;
  border-radius: var(--r-tam);
  opacity: 0;
}
.final-patlama i:nth-child(odd)  { background: var(--asit); box-shadow: inset 0 -2px 0 #97b322; }
.final-patlama i:nth-child(even) { background: var(--vurgu); box-shadow: inset 0 -2px 0 #8e3d16; }
.gun-final.patla .final-patlama i {
  transition: transform 0.7s var(--ev), opacity 0.7s var(--ev);
  opacity: 0;
  transform: translate(var(--px), var(--py)) scale(0.4);
}
.gun-final.patla .final-patlama i { opacity: 0; }
/* Başlangıç durumu sınıf eklenmeden: merkezde, görünür değil.
   `patla` gelince her nokta kendi yönüne uçup söner. */
.final-patlama i:nth-child(1) { --px: -110px; --py: -90px; }
.final-patlama i:nth-child(2) { --px: 110px;  --py: -80px; }
.final-patlama i:nth-child(3) { --px: -140px; --py: 10px; }
.final-patlama i:nth-child(4) { --px: 140px;  --py: 20px; }
.final-patlama i:nth-child(5) { --px: -80px;  --py: 110px; }
.final-patlama i:nth-child(6) { --px: 90px;   --py: 100px; }
.final-patlama i:nth-child(7) { --px: -40px;  --py: -130px; }
.final-patlama i:nth-child(8) { --px: 50px;   --py: -120px; }
.gun-final:not(.patla) .final-patlama i { opacity: 1; transform: translate(0, 0) scale(1); transition: none; }

/* Sonuç plakaları: aynı `.plaka` malzemesi, hücre sayısı değişken.
   Üç sabit sütun iki sayıyla yarım kalıyordu; `auto-fit` iki hücreyi de
   üç hücreyi de dengeliyor.
   (Buradaki eski `.sonuc-rozet` — tek satırlık asit hap — kaldırıldı:
   yerini plakalar aldı, kuralı bırakmak ölü CSS olurdu.) */
.sonuc-plakalar { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin: 14px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .final-maskot { opacity: 1; transform: none; transition: none; }
  .final-patlama { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   62 · TAM BOY İSKELET — geometrik doluluk
   ───────────────────────────────────────────────────────────────────
   Operatör: «sayfaları iyi doldur geometrik olarak». Kart ekranlarında
   içerik tepede yığılıp altta ölü boşluk kalıyordu. Uygulama iskeleti:
   üst çubuk sabit · İÇERİK ORTADA BÜYÜR · eylemler DİBE yapışır
   (başparmak bölgesi — zaten üç kuraldan biriydi, yerleşim artık
   uyguluyor). */
.ekran-dolu {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--cubuk-pay) - 118px);
}
.ekran-dolu .buyu {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.ekran-dolu > .eylemler { margin-top: 14px; }
.ekran-dolu .alt-yapisik { margin-top: auto; padding-top: 14px; }

/* Kelime kartı tam boyda nefes alır: punto büyür, gövde dikey ortalı. */
/* ÖLÇÜLEN KUSUR 2026-09-10 — «ekranın hemen hemen her tarafını kullan».
   390×844'te kart bloğu (.buyu) 402px'ti, kartın kendisi 210px: aradaki
   **192px hiçbir şey değildi**, üstüne ilerleme çubuğuyla kart arasında
   **112px** daha ölü bant vardı.

   2026-09-12 DÜZELTME — o turda kart `flex: 1 1 auto` ile bloğu
   doldurdu ve 402px oldu. Ekran görüntüsünde ölçüldü: içinde yalnız
   «kalan 5», bir kelime ve hoparlör var; 402px'lik BEYAZ BOŞ KUTU
   çıktı. Boşluğu kutunun içine almak onu yok etmiyor, hatasını
   belgeliyor — referanslarda (Duolingo, Seedlang, LingoDeer) soru
   bloğu içeriği kadar, altındaki boşluk ZEMİN.
   Kart yine içeriği kadar; aradaki alan artık ekranın pasteli
   (§ EKRAN KİMLİĞİ) olduğu için ölü kâğıt değil sahne.
   Kartın gerçekten dolması gereken yer ayrı bir iş: Lingvist'in
   örnek cümlesi ve tür çipi (DEVAM-APP, referans listesi). */
.ekran-dolu .buyu > .kart { flex: 0 1 auto; }
.ekran-dolu .kart { padding: 30px 20px; }
.ekran-dolu .kart-de { font-size: var(--yz-h1); letter-spacing: var(--ls-dev); }
.ekran-dolu .kart-tr { font-size: var(--yz-buyuk); }

/* ---------- BUGÜN ALT DOLGU ---------- */
/* Birikim çipleri — üç sayı, skorboard değil ENVANTER: sıfır satırı
   gizlenir (§25 dersi). */
.birikim {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.birikim span {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 13px 8px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.10),
    0 3px 0 rgba(43, 34, 24, 0.10);
}
.birikim b { font-family: var(--f-mono); font-size: var(--yz-buyuk); letter-spacing: -0.02em; color: var(--vurgu-koyu); }
.birikim i { font-style: normal; font-size: var(--yz-mikro); color: var(--murekkep-3); }

/* Günün kelimeleri röntgeni — derse girmeden ne geleceğini gösterir;
   merak kapısı. Almanca yüz, anlam yok (anlam kartta kazanılır). */
.gunun-kelimeleri { margin-top: 18px; }
.gunun-kelimeleri .cipler { display: flex; flex-wrap: wrap; gap: 7px; }
.gunun-kelimeleri .kcip {
  padding: 9px 14px;
  border-radius: var(--r-tam);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: var(--yz-govde);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gunun-kelimeleri .kcip.fazla { color: var(--murekkep-3); font-weight: 400; }

/* ---------- 62 · XP EKONOMİSİ + DİNLEME + MOD SEÇİMİ + CÜMLE YUVASI
   Operatör 2026-08-31: «XP'ler ve oyunda tutacak imperatifler lazım;
   günlük hedef var, istediğinden kazanır; audio alıştırması olacak;
   kelime kısmı cümleli olmalı». Dört parça tek bölümde çünkü hepsi
   aynı gece aynı karardan doğdu. */

/* XP çipi — üst şeritte şimşek. Alev terrakota, XP asidin koyusu:
   iki gösterge aynı renkten konuşmasın. */
.ust-cip.cip-xp { color: #97b322; }
.ust-cip.cip-xp b { color: var(--murekkep); }

/* Halka içi: sayı + mikro «XP» etiketi. Halka zaten grid — iki çocuk
   kendiliğinden alt alta düşer; etiket harf değil BİRİM, o yüzden soluk. */
.bant-halka i {
  position: relative;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  line-height: 1;
  letter-spacing: 0.06em;
  opacity: 0.75;
  margin-top: 1px;
}

/* CÜMLE YUVASI — kelime kartının altında cevaptan sonra dolar:
   kelimenin geçtiği ilk kalıp + notu. Ayraç çizgisiyle karttan
   kopmadan ayrılır; Almanca tam boy, Türkçe soluk, not en soluk. */
.kart-cumle {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ayrac);
  text-align: left;
}
.kart-cumle[hidden] { display: none; }
.kart-cumle .de {
  font-size: var(--yz-orta);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--murekkep);
}
.kart-cumle .tr {
  margin-top: 3px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
}
.kart-cumle .cumle-not {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: var(--r-xs);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
}

/* MOD SEÇİMİ — Ben'de üç kil çip: quiz · kart · yazma. Seçili olan
   aside basılmış hamur; diğerleri kâğıt kil. */
.mod-secim {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.mod-sec {
  appearance: none;
  border: 0;
  padding: 12px 8px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.mod-sec:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12); transition-duration: var(--dur-bas); }
.mod-sec b { display: block; font-size: var(--yz-govde); font-weight: 700; letter-spacing: -0.01em; }
.mod-sec small { display: block; margin-top: 2px; font-size: var(--yz-mikro); color: var(--murekkep-3); }
.mod-sec[aria-pressed="true"] {
  background: linear-gradient(180deg, #ddfa66 0%, var(--asit) 60%, #c1e137 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(133, 162, 32, 0.4),
    0 3px 0 #97b322;
}
.mod-sec[aria-pressed="true"] small { color: var(--murekkep-2); }
.mod-sec:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

/* DİNLEME — kartın ortasında dev dinleme düğmesi. Kelimenin yazısı
   yok; tek görev sese basmak. Asit hamur: bu ekranın tek fiili. */
.dinle-dev {
  appearance: none;
  border: 0;
  width: 96px;
  height: 96px;
  margin: 10px auto 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-tam);
  background: linear-gradient(180deg, #ddfa66 0%, var(--asit) 60%, #c1e137 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(133, 162, 32, 0.4),
    0 5px 0 #97b322,
    0 14px 22px -10px rgba(43, 34, 24, 0.35);
  color: var(--murekkep);
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.dinle-dev:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(133, 162, 32, 0.4),
    0 0 0 #97b322,
    0 4px 10px -6px rgba(43, 34, 24, 0.3);
  transition-duration: var(--dur-bas);
}
.dinle-dev svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dinle-dev:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 4px; }

@media (prefers-color-scheme: dark) {
  .mod-sec, .kart-cumle .cumle-not {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 3px 0 rgba(0, 0, 0, 0.45);
  }
  .ust-cip.cip-xp { color: #a9c531; }
}

/* ---------- 63 · KİTAP GÖRÜNÜMÜ + BROŞÜR KARTLARI ----------
   Operatör: «Almanca kitabı gibi bir yer; broşür okuyor gibi akmalı;
   sertifika sınavları da olacak». Öğren = içindekiler sayfası (numara
   plakaları + bölüm ilerleme çubuğu), Bugün = broşür (günün dersi
   büyük kart + sertifika kartı). */

/* Konu satırı pulu: boş halka değil DERS NUMARASI — kitapların
   içindekiler dili. Kare plaka; çözülünce asit/terrakota aynı plakada. */
.konu-pul {
  border-radius: var(--r-xs);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
}
.pul-no {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--murekkep-3);
}
/* Anlatımı okunmuş ders: numaranın köşesinde asit nokta. */
.konu-satir.okundu .konu-pul { position: relative; }
.konu-satir.okundu .konu-pul::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: var(--r-tam);
  background: var(--asit);
  box-shadow: 0 0 0 2px var(--isik);
}

/* Seviye bandında ince ilerleme çubuğu — bölümün ne kadarı çözüldü. */
.bant { flex-wrap: wrap; }
.bant-bar {
  flex-basis: 100%;
  display: block;
  height: 5px;
  margin-top: 10px;
  border-radius: var(--r-tam);
  background: rgba(255, 253, 249, 0.25);
  overflow: hidden;
}
.bant-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--asit);
}

/* GÜNÜN DERSİ — broşürün büyük kartı. Kâğıt kil + etek; sağ üstte
   XP rozeti: kazanç kapıda yazsın. */
.gunun-dersi {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 17px 16px;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.gunun-dersi:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  transition-duration: var(--dur-bas);
}
.gunun-dersi:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.gd-ust { display: flex; align-items: center; justify-content: space-between; }
.gd-ust i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
}
.xp-rozet {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-tam);
  background: var(--asit);
  color: var(--murekkep);
  box-shadow: inset 0 -2px 0 #a9c531;
}
.gunun-dersi b {
  display: block;
  margin-top: 9px;
  font-size: var(--yz-buyuk);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.gunun-dersi small {
  display: block;
  margin-top: 3px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}

/* SERTİFİKA KARTI — mühürlü kâğıt. Mühür koyu mürekkep plaka, hafif
   yatık: damga eli değmiş gibi. */
.sert-kart {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 4px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.sert-kart:active {
  transform: translateY(4px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12);
  transition-duration: var(--dur-bas);
}
.sert-kart:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.sert-muhur {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg);
}
.sert-govde { flex: 1; min-width: 0; }
.sert-govde i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
}
.sert-govde b {
  display: block;
  margin-top: 3px;
  font-size: var(--yz-govde);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sert-govde small {
  display: block;
  margin-top: 2px;
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}

@media (prefers-color-scheme: dark) {
  .gunun-dersi, .sert-kart {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 4px 0 rgba(0, 0, 0, 0.45);
  }
  .konu-satir.okundu .konu-pul::after { box-shadow: 0 0 0 2px var(--kagit); }
}

/* ---------- 64 · DOLU ANA SAYFA: SELAM + HAFTA + GÖREVLER + KAPILAR
   Operatör: «ana sayfa dolu dolu olmalı, etkileşimli». Dört yeni organ:
   saat selamı (bantta), hafta şeridi, görev kartı (quest), tıklanır
   tekrar kapısı; kelime çipleri de düğmeye döndü (dokun → oku + anlam). */

/* Bantta selam — Almanca ilk satır, mono mikro, soluk. */
.bant-selam {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 3px;
}

/* HAFTA ŞERİDİ — yedi kâğıt hücre. Nokta üç durumda: boş halka ·
   yarım (XP var) · dolu asit (hedef tutmuş). Bugün çerçeveli. */
.hafta {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.hafta-gun {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px 0 5px;
  border-radius: var(--r-plaka);
}
.hafta-gun i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  color: var(--murekkep-3);
}
.hafta-gun em {
  width: 12px; height: 12px;
  border-radius: var(--r-tam);
  box-shadow: inset 0 0 0 2px var(--ayrac);
}
.hafta-gun.yarim em {
  box-shadow: inset 0 0 0 2px #a9c531;
  background: linear-gradient(180deg, var(--asit) 50%, transparent 50%);
}
.hafta-gun.dolu em { background: var(--asit); box-shadow: inset 0 -2px 0 #a9c531; }
.hafta-gun.simdi {
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.12);
}
.hafta-gun.simdi i { color: var(--vurgu-koyu); }

/* GÖREV KARTI — üç satır, her satırda pul + ilerleme çubuğu + sağda
   sayaç ya da kazanılan bonus. Biten satır asit pulla mühürlenir. */
.gorevler {
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  padding: 5px 14px;
}
.gorev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.gorev + .gorev { border-top: 1px solid var(--ayrac); }
.gorev-pul {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  color: var(--murekkep-2);
}
.gorev-pul svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gorev.tam .gorev-pul { background: var(--asit); color: var(--murekkep); box-shadow: inset 0 -3px 0 #a9c531; }
.gorev-ad { flex: 1; min-width: 0; }
.gorev-ad b { display: block; font-size: var(--yz-govde); font-weight: 600; letter-spacing: -0.01em; }
.gorev-bar {
  display: block;
  height: 6px;
  margin-top: 7px;
  border-radius: var(--r-tam);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  overflow: hidden;
}
.gorev-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--asit);
  box-shadow: inset 0 -2px 0 #a9c531;
  transition: width var(--dur-kisa) var(--ev);
}
.gorev-sag {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  color: var(--murekkep-3);
}
.gorev.tam .gorev-sag { color: var(--vurgu-koyu); }
.gorev.tam .gorev-ad b { opacity: 0.6; }
.gorev.tam .gorev-bar { opacity: 0.5; }

/* KELİME ÇİPİ artık düğme: dokun → oku + anlam çipin içinde açılır. */
.gunun-kelimeleri .kcip {
  appearance: none;
  border: 0;
  font: inherit;
  font-size: var(--yz-govde);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--murekkep);
  cursor: pointer;
  transition: transform var(--dur) var(--ev);
}
.gunun-kelimeleri .kcip:not(.fazla):active { transform: translateY(2px); }
.gunun-kelimeleri .kcip:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.gunun-kelimeleri .kcip small {
  display: inline;
  margin-left: 7px;
  padding-left: 8px;
  border-left: 1px solid var(--ayrac);
  font-size: var(--yz-kucuk);
  font-weight: 400;
  color: var(--murekkep-2);
}
.gunun-kelimeleri .kcip.fazla { cursor: default; }

/* TEKRAR KAPISI — solda iri mono sayı, kuyruk gözle görülür erisin. */
.tekrar-kart {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 4px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.tekrar-kart:active {
  transform: translateY(4px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12);
  transition-duration: var(--dur-bas);
}
.tekrar-kart:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.tk-sayi {
  min-width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--vurgu);
  color: var(--alan-metin);
  font-family: var(--f-mono);
  font-size: var(--yz-buyuk);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #8e3d16;
}
.tk-govde { flex: 1; min-width: 0; }
.tk-govde b { display: block; font-size: var(--yz-govde); font-weight: 700; letter-spacing: -0.01em; }
.tk-govde small { display: block; margin-top: 2px; font-size: var(--yz-mikro); color: var(--murekkep-3); }

@media (prefers-color-scheme: dark) {
  .hafta-gun, .gorevler, .tekrar-kart {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 3px 0 rgba(0, 0, 0, 0.45);
  }
  .hafta-gun.simdi {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 2px var(--vurgu),
      0 3px 0 rgba(0, 0, 0, 0.45);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ROZETLER VE POPUP KUTLAMALARI — DOPAMİN SİSTEMİ
   ═══════════════════════════════════════════════════════════════════ */
.rozet-toast-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: gnu-yukari 0.4s var(--ev) both;
}
.rozet-kart-popup {
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  border-radius: var(--r-md);
  padding: 24px 20px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(43, 34, 24, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rozet-ikon {
  font-size: var(--yz-dev);
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  animation: gnu-pop 0.5s var(--ev) both;
}
.rozet-kart-popup h3 {
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
  font-family: var(--f-mono);
  margin: 0;
}
.rozet-kart-popup b {
  font-size: var(--yz-buyuk);
  color: var(--murekkep);
}
.rozet-kart-popup p {
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
  margin: 0 0 12px;
}

/* Ben ekranındaki rozetler ızgarası */
.rozet-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.rozet-pul {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: var(--r-plaka);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  opacity: 0.45;
  filter: grayscale(1);
  transition: all var(--dur) var(--ev);
}
.rozet-pul.kazanildi {
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.10);
}
.rozet-pul i { font-size: var(--yz-h2); font-style: normal; }
.rozet-pul b { font-size: var(--yz-mikro); font-weight: 600; color: var(--murekkep); }

/* ═══════════════════════════════════════════════════════════════════
   LOVABLE MODERN HERO & GLASS/TERRACOTTA DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   OKUMA METNİ + SERTİFİKA SINAVLARI                    (§ 66 · 2026-09-02)
   ------------------------------------------------------------------
   Burada üç «dijital kitap» kapağı vardı: palet dışı 135° gradyanlar
   (#3b1706 · #0f2b23 · #382203), ham punto, olmayan bir ürünün künyesi.
   Yanında okuma kartlarının `-app` sonekli ikizleri duruyordu. Üçü de
   DESIGN.md § 6'nın adı geçen yasakları. Liste sitenin kendi `.sy-sat`
   satırına taşındı; buraya yalnız METNİN tipografisi kaldı.
   ═══════════════════════════════════════════════════════════════════ */
.ok-metin { display: flex; flex-direction: column; gap: 4px; }
.ok-metin .baslik { margin: 2px 0 0; }
.ok-metin > .alt { margin: 0 0 4px; }

/* Paragraf kutu DEĞİL: kâğıdın üstünde kural çizgisiyle ayrılmış blok.
   Kutu olsa altı paragraf altı karta döner ve metin listeye benzer. */
.ok-par { padding: 14px 0 16px; border-bottom: 1px solid var(--ayrac); }
.ok-par:last-of-type { border-bottom: 0; }
.ok-par-ust { display: flex; align-items: flex-start; gap: 10px; }
.ok-par-ust .de {
  flex: 1;
  margin: 0;
  font-size: var(--yz-orta);
  line-height: 1.62;
  font-weight: 500;
  letter-spacing: var(--ls-dev);
}
.ok-notlar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ok-notlar .cip b { font-weight: 700; }

/* Türkçe KAPALI başlar. Açık olsa göz Almancadan önce ona kayar ve metin
   hiç okunmaz — sitedeki reçetenin aynısı: «takıldığın paragrafta dokun». */
.ok-tr-ac {
  appearance: none;
  margin-top: 12px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--ayrac);
  background: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.06em;
  color: var(--murekkep-3);
}
.ok-tr-ac:active { color: var(--murekkep); }
.ok-tr {
  margin: 12px 0 0;
  font-size: var(--yz-kucuk);
  line-height: 1.6;
  color: var(--murekkep-2);
}

.sinav-buton-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.sinav-sec-btn {
  padding: 12px 8px;
  border-radius: var(--r-plaka);
  border: 0;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.10);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur) var(--ev);
}
.sinav-sec-btn:active { transform: translateY(3px); }
.sinav-sec-btn b { display: block; font-size: var(--yz-kucuk); font-weight: 700; color: var(--murekkep); }
.sinav-sec-btn small { display: block; font-size: var(--yz-mikro); color: var(--murekkep-3); margin-top: 2px; }

/* Okuma Tam Ekran */
/* ═══════════════════════════════════════════════════════════════════
   ARCADE, ARTIKEL BLITZ VE DIYALOG CSS STİLLERİ
   ═══════════════════════════════════════════════════════════════════ */

/* Blitz Butonları */
.blitz-art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}
.blitz-btn {
  height: 64px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: var(--yz-h3);
  font-weight: 700;
  color: var(--artikel-metin);
  cursor: pointer;
  transition: transform var(--dur-bas) var(--ev);
}
.blitz-btn:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; }
.blitz-btn:active { transform: scale(0.95); }
/* Etek rengi mürekkepten — saf siyah gölge kâğıt dünyasında soğuk
   duruyor, dosyanın geri kalanı da rgba(43,34,24,…) kullanıyor. */
.blitz-btn.der { background: var(--der); box-shadow: inset 0 -4px 0 rgba(43, 34, 24, 0.32), 0 4px 12px rgba(53, 99, 153, 0.35); }
.blitz-btn.die { background: var(--die); box-shadow: inset 0 -4px 0 rgba(43, 34, 24, 0.32), 0 4px 12px rgba(179, 37, 69, 0.35); }
.blitz-btn.das { background: var(--das); box-shadow: inset 0 -4px 0 rgba(43, 34, 24, 0.32), 0 4px 12px rgba(78, 106, 59, 0.35); }

/* Diyalog Akışı */
.diyalog-akisi {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diyalog-mesaj {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  line-height: 1.4;
  animation: gnu-yukari 0.3s var(--ev) both;
}
.diyalog-mesaj.bot {
  align-self: flex-start;
  background: var(--kagit-2);
  border: 1px solid var(--ayrac);
  border-bottom-left-radius: 4px;
}
.diyalog-mesaj.kullanici {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu));
  color: var(--alan-metin);
  border-bottom-right-radius: 4px;
}
.diyalog-mesaj .de { font-size: var(--yz-orta); font-weight: 600; margin: 0; }
.diyalog-mesaj .tr { font-size: var(--yz-kucuk); opacity: 0.85; margin-top: 4px; display: block; }

.diyalog-cevaplar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.diyalog-cevap-btn {
  padding: 12px 14px;
  border-radius: var(--r-plaka);
  border: 0;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.10);
  text-align: left;
  cursor: pointer;
}
.diyalog-cevap-btn .de { display: block; font-size: var(--yz-govde); font-weight: 600; color: var(--murekkep); }
.diyalog-cevap-btn .tr { display: block; font-size: var(--yz-kucuk); color: var(--murekkep-3); margin-top: 2px; }

/* Animasyonlar */
.dogru-puls { animation: gnu-pop 0.3s ease; }
.yanlis-shake { animation: gnu-titre 0.35s ease; }
@keyframes gnu-titre {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════════════════════
   SİTE İLE BİREBİR ANA SAYFA VE LEVHA DİLİ (TRANSKRİPT METAFORU)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   ELİT EDİTORİAL HERO & GÜÇLÜ KURUMSAL DERGİ TİPOGRAFİSİ
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   § 65 · BUGÜN'ÜN ÜÇ YENİ PARÇASI — seviye yığını · ölç-ve-dene · ifade
   ───────────────────────────────────────────────────────────────────
   2026-09-01. Bir önceki elden 749 satırlık bir blok çıktı: sitenin
   ana sayfası app'e KOPYALANMIŞ, bileşenleri de `-app` sonekiyle
   yeniden yazılmıştı (.hap-asit-app, .hap-ok-app, .sr-sv…). Ölçüldü:
   52 ham punto · 33 saf beyaz · 22 palet dışı renk · 13 ham yarıçap ·
   2 ikinci easing · 2 kalın renkli sol çubuk (DESIGN.md § 7.13'te adı
   geçen yasak) · 2 adet 135° gradyan. Blok tümüyle söküldü.

   Sökülünce görüldü ki SİTE MALZEMESİ ZATEN VARDI: `.dugme.asit` §51'de
   stil.css:8404'ün beş katmanını taşıyor, `.hap-ok` §53.3'te gerçek ok
   çipi. İkizler o parçaları gölgeliyordu — ve `.sr-sv`'yi yeniden
   tanımlayıp karşılama ekranının seviye pulunu da bozuyorlardı.

   Bu bölüm YALNIZ eksik üç parçayı ekler. Hepsi kil hamurundan
   (§51 beş katman) ve token'dan; yeni değer icat edilmedi.          */

/* SEVİYE YIĞINI — app'in omurgası. Sitede pazarlama satırı («51 konu»);
   burada İLERLEME satırı: kaç konu çözüldü, çubuğu ne kadar dolu.
   Bulunulan seviye dolu levha (--alan), gelecek seviyeler kâğıt,
   yazılmamış seviye kilitli. */
.sy { display: grid; gap: 8px; margin-top: 16px; }
.sy-sat {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-plaka);
  text-align: left;
  font: inherit;
  color: var(--murekkep);
  cursor: pointer;
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.sy-sat:active {
  transform: translateY(3px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12);
  transition-duration: var(--dur-bas);
}
.sy-sat:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
/* Bulunulan seviye: dolu terrakota levha. Hiyerarşi renkten değil
   DOLGUDAN — sitedeki `.alan` mantığı (DESIGN.md § 1.1). */
.sy-sat.simdi {
  color: var(--alan-metin);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #b4552a 0%, var(--alan) 60%, #8e3d16 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
    0 0 0 1px rgba(112, 48, 18, 0.42),
    0 3px 0 #7d340f;
}
.sy-sat.simdi:active { box-shadow: inset 0 2px 6px rgba(74, 26, 6, 0.45), 0 0 0 1px rgba(112, 48, 18, 0.46), 0 0 0 #7d340f; }
.sy-sat.kilit { cursor: default; opacity: 0.62; }

.sy-pul {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--murekkep-2);
}
.sy-sat.simdi .sy-pul { background: var(--asit); color: var(--murekkep); box-shadow: inset 0 -3px 0 #a9c531; }

.sy-ad { flex: 1; min-width: 0; }
.sy-ad b { display: block; font-size: var(--yz-govde); font-weight: 700; letter-spacing: -0.01em; }
.sy-ad small { display: block; margin-top: 2px; font-size: var(--yz-mikro); color: var(--murekkep-3); }
.sy-sat.simdi .sy-ad small { color: rgba(253, 249, 243, 0.82); }

/* İnce ilerleme çubuğu — satırın altına değil İÇİNE, adın altına. */
.sy-bar {
  display: block;
  height: 5px;
  margin-top: 7px;
  border-radius: var(--r-tam);
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  overflow: hidden;
}
.sy-sat.simdi .sy-bar { background: rgba(255, 253, 249, 0.24); box-shadow: none; }
.sy-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--asit);
  box-shadow: inset 0 -2px 0 #a9c531;
  transition: width var(--dur-kisa) var(--ev);
}
.sy-ok {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  background: rgba(43, 34, 24, 0.07);
  color: var(--vurgu-koyu);
  transition: transform var(--dur-kisa) var(--ev);
}
.sy-sat.simdi .sy-ok { background: rgba(255, 253, 249, 0.18); color: var(--alan-metin); }
.sy-sat:active .sy-ok { transform: translateX(3px); transition-duration: var(--dur-bas); }
.sy-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sy-kilit svg { width: 16px; height: 16px; fill: none; stroke: var(--murekkep-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* BÖLÜM ETİKETİ — sitenin mono mikro üst yazısı («ÖLÇ VE DENE»).
   Bugün'de üç yerde: görevler, yol haritası, kapılar. Tek parça. */
.bol-et {
  display: block;
  margin: 20px 0 9px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
}
.hz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hz-k {
  appearance: none;
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 13px 13px 14px;
  border: 0;
  border-radius: var(--r-plaka);
  text-align: left;
  font: inherit;
  color: var(--murekkep);
  cursor: pointer;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.12);
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.hz-k:active {
  transform: translateY(3px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12);
  transition-duration: var(--dur-bas);
}
.hz-k:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
/* Kilitli kapı: aynı kutu, kabartma YOK (basılabilirlik kabartmadan
   okunuyor — düz duran şey basılmaz demektir). Metin sönükleşmiyor,
   yalnız zemin düşüyor: kilidin şartını okuyamayan öğrenci kilidi
   anlamaz (§ 15'te ölçülen ders — `opacity` kontrastı bozuyor). */
.hz-k.kilitli {
  background: var(--kagit-3);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  cursor: default;
}
.hz-k.kilitli svg { stroke: var(--murekkep-3); }
.hz-k svg { width: 18px; height: 18px; margin-bottom: 6px; fill: none; stroke: var(--vurgu-koyu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hz-k b { font-size: var(--yz-kucuk); font-weight: 700; letter-spacing: -0.01em; }
.hz-k small { font-size: var(--yz-mikro); color: var(--murekkep-3); }
/* Kuyruğu dolu olan kapı sayıyı taşır: rakam mono, terrakota. */
.hz-k em { font-style: normal; font-family: var(--f-mono); color: var(--vurgu-koyu); }

/* GÜNÜN İFADESİ — gerçek konuşma balonu (stil.css `.ifade`). Kuyruğu
   var; kalın renkli sol çubuk YOK (DESIGN.md § 7.13). Dokununca
   Almancasını okur — ekranın konuşan tek parçası. */
.ifade {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 15px 16px 14px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--isik);
  text-align: left;
  font: inherit;
  color: var(--murekkep);
  cursor: pointer;
  transition: transform var(--dur) var(--ev), border-color var(--dur) var(--ev);
}
.ifade:active { transform: translateY(2px); border-color: var(--vurgu); transition-duration: var(--dur-bas); }
.ifade:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
/* Kuyruk: iki üçgen — dış kenar `--ayrac`, iç dolgu `--isik`. */
.ifade::before, .ifade::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 26px;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-top-color: var(--ayrac);
  border-bottom: 0;
}
.ifade::after { left: 27px; border-width: 8px; border-top-color: var(--isik); }
.ifade i {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
  margin-bottom: 7px;
}
.ifade b { display: block; font-size: var(--yz-orta); font-weight: 700; letter-spacing: -0.014em; }
.ifade span { display: block; margin-top: 3px; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.ifade .ifade-ses {
  position: absolute;
  margin-top: 0;
  right: 13px; bottom: 13px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  background: rgba(43, 34, 24, 0.07);
  color: var(--vurgu-koyu);
}
.ifade .ifade-ses svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Gece — kil hamurunun gece karşılığı (§ 2823 ile aynı reçete). */
@media (prefers-color-scheme: dark) {
  .sy-sat, .hz-k {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 3px 0 rgba(0, 0, 0, 0.45);
  }
  .sy-sat:active, .hz-k:active {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 0 rgba(0, 0, 0, 0.45);
  }
  .sy-ok, .ifade .ifade-ses { background: rgba(255, 253, 249, 0.10); }
  .ifade { background: var(--isik); }
  .ifade::after { border-top-color: var(--isik); }
  /* Asit dolgunun üstünde koyu yazı: gece paletinde --murekkep krem
     olduğu için pul okunmaz olurdu. Asit sabit, yazı sabit. */
  .sy-sat.simdi .sy-pul { color: #2b2218; }
}

/* Hareket kapalıyken: basınca yer değiştirme yok, geri bildirim kenardan. */
@media (prefers-reduced-motion: reduce) {
  .sy-sat, .hz-k, .ifade, .sy-ok, .sy-bar span { transition: none; }
  .sy-sat:active, .hz-k:active, .ifade:active { transform: none; }
  .sy-sat:active .sy-ok { transform: none; }
}

/* Gizlenen parça yer kaplamaz — display yazan her kuralın [hidden] eşi
   (depo kuralı; § 9 bulgusunun tekrarı olmasın). */
.sy[hidden], .sy-sat[hidden], .sy-pul[hidden], .sy-ad[hidden], .sy-bar[hidden],
.sy-ok[hidden], .hz[hidden], .hz-k[hidden], .bol-et[hidden],
.ifade[hidden], .ifade i[hidden], .ifade b[hidden], .ifade span[hidden],
.ifade .ifade-ses[hidden] { display: none; }

/* Bandın içindeki iki parça `.yol-bant span` (0,1,1) tarafından
   eziliyordu: halka `display:block`a düşüyor, çubuğun dolgusu 3px
   aşağı kayıyordu. Sınıfı kapsayıcıyla nitele — kural ölçüyle geri
   geliyor, yeni değer üretilmiyor. */
.yol-bant .bant-halka {
  display: grid;
  place-items: center;
  margin-top: 0;
  opacity: 1;
}
.yol-bant .bant-bar span { margin-top: 0; opacity: 1; }

/* Bugün'ün tek birincil eylemi — bant ile ders kartı arasında durur. */
.bugun-eylem { display: grid; gap: 8px; margin-top: 16px; }
.gorevler { margin-top: 10px; }
.bugun-eylem[hidden] { display: none; }

/* ── EMOJİ SÖKÜMÜ (2026-09-01) ──────────────────────────────────────
   Uygulamada 22 emoji vardı: rozetler, diyalog kartları, mikrofon ve
   blitz ekranları, Öğren başlıkları. Emoji üretim arayüzünde yasak
   (DESIGN.md § 7.11) — üstelik her platformda başka çiziliyor, yani
   marka değil İŞLETİM SİSTEMİ konuşuyordu. Hepsi aynı çizim diline
   çevrildi: 24 ızgara, 2 kalınlık, currentColor.                    */
.rozet-ikon { font-size: 0; }
.rozet-ikon svg {
  width: 52px; height: 52px;
  fill: none;
  stroke: var(--vurgu-koyu);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rozet-pul i { font-size: 0; }
.rozet-pul i svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--murekkep-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rozet-pul.kazanildi i svg { stroke: var(--vurgu-koyu); }
/* Alev ve şimşek DOLGU ikonlar — çizgi hâlleri boş kutu gibi duruyor. */
.rozet-ikon svg path[d^="M12 2c"], .rozet-ikon svg path[d^="M13 2 "],
.rozet-pul i svg path[d^="M12 2c"], .rozet-pul i svg path[d^="M13 2 "] {
  fill: currentColor; stroke: none;
}
/* Ekran ortasındaki tek iri ikon (mikrofon · blitz açılışı). */
.dev-ikon { font-size: 0; margin-bottom: 10px; }
.dev-ikon svg {
  width: 54px; height: 54px;
  fill: none;
  stroke: var(--vurgu-koyu);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Diyalog kartının adı: ikon + yazı tek satırda. */
.dy-ad { display: flex; align-items: center; gap: 8px; font-size: var(--yz-buyuk); }
.dy-ad svg {
  width: 19px; height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Düğme içindeki ikon — yazıyla arası boşluk, hizası orta. */
.dugme svg { width: 18px; height: 18px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dugme .hap-ok svg { margin-right: 0; }
.rozet-ikon[hidden], .dev-ikon[hidden], .dy-ad[hidden] { display: none; }

/* ── ASİT ÜSTÜ MÜREKKEP — gece kapısı (2026-09-01) ─────────────────
   Asit sabit bir renk: gecede de #d4f24b. Ama `--murekkep` gecede
   kreme dönüyor, dolayısıyla asit dolgunun üstündeki her yazı krem
   oluyordu — ölçüldü: 1,1:1. «Devam et» düğmesi, +15 XP rozeti ve
   biten görev pulü gecede okunmuyordu. Asit yüzeyin mürekkebi TEMAYA
   BAĞLI DEĞİL: her iki temada da koyu.                              */
@media (prefers-color-scheme: dark) {
  .dugme.asit,
  .xp-rozet,
  .gorev.tam .gorev-pul,
  .konu-satir.iyi .konu-pul,
  .sinav-satir.iyi .konu-pul,
  .yol-durak.acildi.renklendi .yol-yuvarlak,
  .adim-kart.acildi.renklendi .yol-yuvarlak { color: #2b2218; }
  /* Ok çipi de aynı sebeple sabit: dolgusu `--murekkep` idi, gecede
     krem kareye dönüp asit oku yutuyordu. Çip koyu kalır. */
  .hap-ok { background: #2b2218; color: var(--asit); }
}

/* ═══════════════════════════════════════════════════════════════════
   § 66 · TEKNİK KATMAN — «tezgâhın üstündeki çalışma kâğıdı»
   ───────────────────────────────────────────────────────────────────
   2026-09-01 · app/DESIGN.md § 3.4. Seçilen referans:
   `_yetenekler/web-design-kutuphane/light-mode-paper-technical/SKILL.md`
   («warm paper surfaces … thin borders, inset rules, L-brackets, tiny
   corner details, measured spatial guides, mono utility text»).

   TEŞHİS: app'in derdi malzeme değildi — malzeme (kil, beş katman)
   zaten vardı. Dert AYNILIK: her blok aynı yarıçapta, aynı genişlikte,
   üst üste dizili kart. Doktrinin AI damgası listesinde iki ayrı madde:
   «her bölüm aynı ortalanmış container + aynı padding» (5) ve «hepsi
   aynı yarıçapta, aynı boyda kart sırası» (20).

   ÇÖZÜM kart eklemek değil, KÂĞIDI GÖRÜNÜR KILMAK: sayfanın kenar
   kuralları, bölüm künyelerinin uzayan hattı, köşe ayraçları, hizalı
   mono sayı. Kâğıt alete dönüşünce kartlar da yerine oturuyor.       */

:root {
  --tezgah: #f1e9dc;      /* kâğıdın üstünde durduğu yüzey */
  --kenar: #b09a79;       /* gerçek bir NESNENİN sınırı · 2,58:1 */
  --asit-metin: #2b2218;  /* asit yüzeyin mürekkebi — TEMADAN BAĞIMSIZ */
}

/* ---- 1 · SAYFA KENAR KURALLARI ----
   Mühendislik defterinin marj çizgileri. İçerik sütununun iki yanında
   tam boy iki tüy hat: sayfanın nerede bittiğini söyler. `local`
   tutturma ile içerikle birlikte kayar — ekrana sabit katman DEĞİL
   (DESIGN.md § 5.2 yasağı). */
.govde {
  background-image:
    linear-gradient(var(--ayrac), var(--ayrac)),
    linear-gradient(var(--ayrac), var(--ayrac));
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%;
  background-position:
    left max(7px, calc((100% - 462px) / 2)) top,
    right max(7px, calc((100% - 462px) / 2)) top;
  background-attachment: local;
}

/* ---- 2 · BÖLÜM KÜNYESİ — etiket + uzayan hat ----
   Etiket solda kalır, kural çizgisi sağa doğru uzar. Bölüm başlangıcı
   artık boşlukla değil ÇİZGİYLE söyleniyor. */
.bol-et {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bol-et::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ayrac);
}

/* ---- 3 · KÖŞE AYRACI — L işareti ----
   Yalnız iki yerde: taahhüt bandı ve birincil kart. Üçüncüsü süs olur. */
.ayrac-kose { position: relative; }

/* ---- 4 · HİZALI SAYI ----
   Rakam sütunu kayarsa tablo değil liste olur. Mono taşıyan her yerde. */
.bant-halka b, .gorev-sag, .sy-ad small, .tk-sayi, .hafta-gun i,
.ust-cip b, .hz-k em, .plaka b, .sy-pul {
  font-variant-numeric: tabular-nums;
}

/* ---- 5 · YANSIMALI KENAR (skeuomorphic-ui'den tek mekanizma) ----
   `padding-box` gövde + `border-box` kenar: 1px'lik kenar kendi
   gradyanını taşıyor, üstte ışık altta gölge. Yalnız birincil eylemde
   ve taahhüt bandında — her yüzeye takılırsa oyuncak olur. */
.dugme.asit {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(180deg, #ddfa66 0%, var(--asit) 54%, #c1e137 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(43, 34, 24, 0.22)) border-box;
}
.yol-bant {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 44%) padding-box,
    linear-gradient(180deg, #b4552a 0%, var(--sv-a1) 60%, #8e3d16 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(74, 26, 6, 0.35)) border-box;
}

/* ---- 6 · TEZGÂH ----
   Zemin yıkaması duruyor, altındaki renk yarım basamak koyulaşıyor:
   kâğıt artık bir şeyin ÜSTÜNDE. Fark ölçülü — 251,247,240 → 241,233,220. */
body { background-color: var(--tezgah); }

@media (prefers-color-scheme: dark) {
  :root { --tezgah: #16120e; --kenar: #4a4034; }
}

.ayrac-kose[hidden], .bol-et[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   KURS SEÇİMİ — uygulamanın ilk ekranı              (§ 67 · 2026-09-02)
   ------------------------------------------------------------------
   Exactopia çatısı: önce hangi dil, sonra o dilin ana sayfası.
   Yeni bileşen ÜRETİLMEDİ — satırlar `.sy-sat`, levha `.levha`,
   künye `.alt`. Buradaki tek iş ekranın nefesi.
   ═══════════════════════════════════════════════════════════════════ */
.kurs-ekran {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Tek kararlık ekran: içerik üstte yapışık durunca telefonun alt yarısı
     boş kalıyordu. Dikeyde ortalanıyor ama sabit yükseklik verilmiyor —
     kurs sayısı artınca ekran kendi boyuna kavuşup kaydırılabilsin. */
  /* 76dvh içerikten (674px) kısa kalıyordu: kap içeriğe göre büyüyüp
     tepeye yapışıyor, altta 130px ölü boşluk kalıyordu. 100dvh ile
     ekranda gerçekten ortalanıyor; `min-height` olduğu için içerik
     büyürse kap da büyür, tepesi kırpılmaz. */
  /* 100dvh, `.govde`nin 18+18 dolgusuyla toplanıp 36px ölü kaydırma
     yapıyordu; `100%` kabın İÇ yüksekliği — ekran tam oturuyor. */
  min-height: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 20px 0 22px;
}
/* ── § 84 · giriş ekranı maskotu — ARKA PLAN ──
   Akışta 116px'lik bir satır kaplıyordu ve yanındaki sütun boş
   kalıyordu (ölçüldü: maskot 134→250, sağında ~250px hiçbir şey).
   Şimdi akıştan çıktı: sağ üstten taşar, içerik onun üstünde akar.
   Başlık ve alt yazı dar sütuna alınıyor ki gövdesinin üstüne
   binmesin — metin maskotun üzerinde okunmaz. */
.kurs-ekran {
  position: relative;
  /* `overflow: hidden` KALDIRILDI: maskot artık kenardan taşmıyor, ama
     kırpma son satırı (kurs notu, alt 865 > ekran 844) yutuyordu ve
     kaydırılamıyordu. Kırpacak bir şey yoksa kırpma da olmaz. */
  align-items: center;
  text-align: center;
}

/* ── MADALYON ──
   Operatör: «yuvarlak bişi olmalı veya neyse, çerçevesinde ışığımsı bir
   animasyon dönmeli, seçenekler üstünde olmalı.» Ekranın ortasında tek
   yuvarlak; ışık çerçevede döner, kurs kartı alt kenarına biner.
   Sayfanın TEK imza hareketi budur — ikinci hareket yok.

   AKIŞTA duruyor, `absolute` değil: iki kez `absolute` denedim, ikisinde
   de `.kurs-ekran > *` kuralı onu ezip içeriği aşağı itti. Akışta
   olunca yerleşim kendiliğinden doğru. Maskot da madalyonun içinde. */
.kurs-madalyon {
  position: relative;
  /* 268 → 240 → 214. Tabak kalkınca kart binmesi 60'tan 34'e indi
     (maskotun kuyruğu kesilmesin diye) ve içerik 844'ü 11px aştı;
     madalyon o farkı geri veriyor. */
  width: min(214px, 60vw);
  aspect-ratio: 1;
  margin: 10px auto 0;
}
/* Krem disk KALDIRILDI — operatör: «madalyon tabak gibi duruyor».
   Haklıydı: maskotun altındaki dolu daire kaide/tabak okunuyordu.
   Yerine yalnız ÇERÇEVE var; maskot onun içinde serbest duruyor.
   Sabit saç çizgisi hep görünür, parlak yay onun üstünde döner —
   «çerçevesinde ışık dönmeli» birebir bu. */
.km-cerceve {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ayrac);
  border-radius: var(--r-tam);
}
/* Dönen ışık — konik gradyan, maske ile YALNIZ çerçeveye indirgenir.
   Dolu daireyi döndürmek zemini kirletiyordu; maske onu 3px'lik bir
   yaya çeviriyor. Renk asit: markanın tek parlak rengi. */
.km-halka {
  position: absolute;
  inset: 0;
  border-radius: var(--r-tam);
  background: conic-gradient(from 0turn,
    rgba(212, 242, 75, 0) 0deg,
    rgba(212, 242, 75, 0) 186deg,
    var(--asit) 292deg,
    var(--isik) 330deg,
    var(--asit) 348deg,
    rgba(212, 242, 75, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: km-don 7s linear infinite;
}
@keyframes km-don { to { transform: rotate(1turn); } }

/* ── KÂĞIT UFKU (§ 5.11) ──
   Headspace 01'in bantlı zemini, bizim malzememizle: ekranın üst yarısı
   kâğıt (body'nin sıcak yıkaması), alt yarısı tezgâh. Maskot dikişin
   üstünde duruyor — boşlukta yüzmüyor, bir yüzeye oturuyor; kurs kartı
   da o tezgâhın üstündeki ilk nesne oluyor.
   MADALYONA bağlı, ekrana değil: `.kurs-ekran` dikeyde ortalıyor, sabit
   piksel verilirse dikiş cihaz boyuna göre maskottan kayar. */
.kurs-madalyon::after {
  content: '';
  position: absolute;
  /* YUKARI uzuyor (`bottom` + boy), aşağı değil: aşağı uzayan mutlak
     konumlu kutu `.govde`nin scrollHeight'ine ekleniyor ve giriş
     ekranında 318px ÖLÜ KAYDIRMA yaratıyordu (ölçüldü). Yukarı taşma
     kaydırılabilir alana sayılmaz. Bu yüzden boyanan şey tezgâh değil
     KÂĞIT; tezgâh tonu sayfanın kendi zeminine alındı. */
  bottom: 48%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  background-color: var(--kagit);
  /* Kâğıt ölü durmasın — sayfanın yıkamasının aynısından tek katman. */
  background-image: radial-gradient(72% 40% at 16% 100%, rgba(192, 90, 46, 0.10), transparent 72%);
  /* `--cizgi` SİTENİN token'ı — app.css'te tanımlı değil; kural sessizce
     düşüyordu ve dikişin saç çizgisi hiç çizilmiyordu (token kapısı
     yakaladı). App'te saç çizgisi `--ayrac`. */
  border-bottom: 1px solid var(--ayrac);
  /* blur = spread → gölge YALNIZ alta düşer, yan kenarlara sızmaz. */
  box-shadow: 0 12px 18px -18px rgba(60, 26, 8, 0.6);
  z-index: -1;
}
/* Dikişin ALTI tezgâh: sayfanın zemini bu ekranda kâğıt değil tezgâh
   oluyor, radyal yıkamalar (yarı saydam) üstünde durmaya devam ediyor. */
body[data-ekran="kurs"] { background-color: var(--tezgah); }
/* Alt çubuk bu ekranlarda GİZLİ ama payı duruyordu: 62px hayalet dolgu
   (odak modunun aynı kuralı, § 5.9). */
body[data-ekran] { --cubuk-pay: 0px; }
/* 100vw tam-en istiyor; `.govde` zaten kayan kap olduğu için yatay
   taşımasın diye YALNIZ bu ekranda kırpılıyor (ölçüldü: taşma 0). */
body[data-ekran="kurs"] .govde { overflow-x: hidden; }

/* Maskot çerçevenin İÇİNDE ortalı ve serbest. Alt kenarı kartın
   üstünde bitiyor: kuyruğu kesilmiyor, kart yalnız çerçevenin alt
   yayına biniyor. */
.km-maskot {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 68%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 7px rgba(60, 26, 8, 0.16))
          drop-shadow(0 20px 30px rgba(60, 26, 8, 0.20));
}

@media (prefers-reduced-motion: reduce) {
  .km-halka { animation: none; }
}
/* DEKORATİF ögeleri DIŞARIDA bırak: `> *` onlarla aynı özgüllükte ve
   sonra geldiği için `position: absolute`u eziyor — öge akışa düşüp
   içeriği aşağı itiyor. Bu tuzağa iki kez düştüm (maskot, sonra
   madalyon); tek tek ad yazmak yerine ortak sınıf: yeni bir dekor
   eklenince kural kendiliğinden doğru çalışır. */
.kurs-ekran > *:not(.kurs-dekor) { position: relative; z-index: 1; }
/* Madalyon İSTİSNA: kâğıt ufkunu (`::after`) taşıyor ve o katman DOM'da
   kendinden önce gelen başlığın altında kalmalı. Kural yukarıdakinden
   SONRA gelmek zorunda — aynı özgüllükte (0,2,0) ve önce yazılırsa
   eziliyor; bir turda gece ekranının üst yarısı bu yüzden boş kaldı. */
.kurs-ekran > .kurs-madalyon { z-index: 0; }
.kurs-ekran .baslik,
.kurs-ekran > .alt { max-width: none; }
/* «Seçenekler üstünde olmalı» — kurs kartı madalyonun alt kenarına
   biner. Negatif kenar boşluğu hem üst üste binmeyi hem de dikey yeri
   veriyor: madalyon 268px ama ekranda 208px yer kaplıyor. */
/* Kart çerçevenin alt yayına biner (-34px). Tabak varken -60'tı;
   tabak gidince maskotun kuyruğu açığa çıktı, kart onu kesmesin. */
.kurs-ekran > .sy { margin-top: -34px; }
.kurs-ekran > .sy,
.kurs-ekran > .kurs-bekleyen,
.kurs-ekran > .kurs-not { text-align: left; width: 100%; }
.kurs-marka + .baslik { margin-top: 4px; }
.kurs-kart {
  appearance: none;
  /* SATIR → KART (§ 5.11). Girilebilen tek kurs 88px'lik bir satırdı ve
     ölçüsü 11px gri bir cümleydi. Şimdi: bayrak + ad, altında SAYI
     plakaları, altında kartın içinde tam genişlik eylem (Beelinguapp
     kalıbı). Ekranın en büyük nesnesi artık ürünün kendisi. */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 14px;
  gap: 13px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11), 0 14px 30px -20px rgba(60, 26, 8, 0.55);
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-kisa) var(--ev);
}
.kurs-kart:active { transform: translateY(1px); }
.kurs-kart:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.kk-bas { display: flex; align-items: center; gap: 13px; }
.kk-ad { min-width: 0; }
.kk-ad b {
  display: block;
  font-size: var(--yz-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.kk-ad small { display: block; margin-top: 2px; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.kurs-kart .kurs-plakalar { margin: 0; }
/* Plaka zemini kartın zemininden koyu olmalı; `--kagit-3` gecede
   `--isik` ile AYNI değer (#221c15) — plakalar kartın üstünde kaybolurdu.
   `--tezgah` iki temada da karttan koyu (§ 5.9 eşli yüzey kuralı). */
.kurs-kart .plaka { background: var(--tezgah); }
/* Etiket `--murekkep-3` idi: gündüz tezgâh üstünde 3,59:1 ölçüldü —
   4,5 çizgisinin altında. `--murekkep-3` açık yüzeylerde zaten sınırda
   (bkz. devir notu); 11px'te düşüyor. */
.kurs-kart .plaka span { color: var(--murekkep-2); }
.kk-eylem { margin-top: 1px; }
/* Kartın herhangi bir yerine basılınca düğme de basılsın — tek nesne. */
.kurs-kart:active .kk-eylem { transform: translateY(4px); transition-duration: var(--dur-bas); }
.kurs-kart-plaka {
  border-radius: var(--r-plaka);
  flex: none;
  display: block;
}
.kurs-levha { --lv: 36px; margin-bottom: 20px; }
.kurs-ekran .baslik {
  margin: 0 0 8px;
  /* 20 → 30px. Uygulamanın İLK ekranındaki tek başlık bölüm başlığı
     boyundaydı; Drops/Headspace/Duolingo üçü de display tipografiyle
     açıyor (§ 5.11). `--yz-h1` ve `--ls-dev` zaten tanımlı. */
  font-size: var(--yz-h1);
  line-height: 1.1;
  letter-spacing: var(--ls-dev);
  text-wrap: balance;
}
.kurs-ekran > .alt { margin: 0 0 20px; }
.kurs-not {
  margin: 14px 0 0;
  font-size: var(--yz-mikro);
  line-height: 1.55;
  color: var(--murekkep-3);
}
.bl-2 { font-size: var(--yz-buyuk); margin-top: 22px; }
.cip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--kagit-3);
  color: var(--murekkep);
  font: inherit;
}
.kurs-marka { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* 2 sütunlu ızgara 232px kaplıyordu — canlı kursun 2,6 katı (§ 5.11).
   Aynı işlev, tek satır: dokun = istek kaydı. */
.kurs-bekleyen { width: 100%; margin-top: 16px; }
.kurs-bekleyen-et {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  /* 400 ağırlıkta 11px mono, kenar yumuşatma yüzünden pikselde 4,36:1
     ölçülüyordu; 600 gövdeyi doldurup 5,3:1e çıkarıyor. */
  font-weight: 600;
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* `--murekkep-3` gündüz tezgâh üstünde 3,41:1 ölçüldü — 4,5 altı. */
  color: var(--murekkep-2);
}
/* 390px'te dört çip tek satıra sığmıyor (ölçüldü: 472 > 358) ve esnek
   sarmada 3+1 öksüz satır çıkıyordu. İki sütun, iki satır: aynı boy,
   düzgün ritim. */
.kurs-kilit-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kurs-kilit {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 7px;
  /* 44px — dokunma hedefi tabanı (DESIGN.md § 3.1, WCAG 2.5.8). */
  min-height: 44px;
  padding: 0 13px 0 9px;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  color: var(--murekkep-2);
  font: inherit;
  cursor: pointer;
  opacity: 0.72;
  filter: grayscale(0.7);
  transition: opacity var(--dur-kisa) var(--ev), filter var(--dur-kisa) var(--ev),
              box-shadow var(--dur-bas) var(--ev);
}
.kurs-kilit:active { transform: translateY(1px); }
.kurs-kilit:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.kurs-kilit-plaka { border-radius: var(--r-xs); display: block; flex: none; }
.kurs-kilit-ad { font-size: var(--yz-kucuk); font-weight: 500; }
.kurs-kilit[data-secili="1"] {
  opacity: 1;
  filter: none;
  color: var(--murekkep);
  box-shadow: inset 0 0 0 1.5px var(--kenar);
}
/* İstek işareti: asit nokta. Rozet değil — söz verilen tek şey «sayıldı». */
.kurs-kilit[data-secili="1"]::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-tam);
  background: var(--asit);
  box-shadow: inset 0 0 0 1px rgba(43, 34, 24, 0.22);
}

@media (prefers-color-scheme: dark) {
  .kurs-kart, .kurs-kilit {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* Satır içi `style=` ile yazılmış ölçüler buraya taşındı (DESIGN.md § 6.8:
   satır içi yalnız veriden gelen `width:%` ve `--dolu:%` için). */
.dev-de { font-size: var(--yz-h1); letter-spacing: var(--ls-dev); color: var(--murekkep); }
.bl-3 { font-size: var(--yz-orta); margin: 22px 0 4px; }
.kutu-soru { background: var(--kagit); }
.soru-metin { font-size: var(--yz-h3); line-height: 1.5; }
.cip-eylem { padding: 3px 8px; font-size: var(--yz-mikro); }

/* ============================================================
   HAREKET (GÖREV 03)
   ============================================================ */

/* R1: Kurs seçimi girişi */
.sy-sat { animation: sy-sat-giris var(--dur-kisa) var(--ev) both; }
.sy-sat:nth-child(1) { animation-delay: 0ms; }
.sy-sat:nth-child(2) { animation-delay: 40ms; }
.sy-sat:nth-child(3) { animation-delay: 80ms; }
.sy-sat:nth-child(4) { animation-delay: 120ms; }
.sy-sat:nth-child(5) { animation-delay: 160ms; }
.sy-sat:nth-child(6) { animation-delay: 200ms; }
.sy-sat:nth-child(7) { animation-delay: 240ms; }
.sy-sat:nth-child(8) { animation-delay: 280ms; }
@keyframes sy-sat-giris { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.kurs-levha { transform-origin: left; animation: levha-ciz var(--dur-yavas) var(--ev) both; }
@keyframes levha-ciz { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* R2: Sekme geçişi */
.gecis { animation: sekme-gecis var(--dur-bas) var(--ev) both; }
@keyframes sekme-gecis { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* R3 & R7: Number Flow ve Streak fiske */
.nf-kutu { overflow: hidden; display: inline-flex; flex-direction: column; height: 1em; line-height: 1; vertical-align: top; position: relative; }
.nf-kutu .eski-sayi { animation: nf-cikis var(--dur-kisa) var(--ev) both; }
.nf-kutu .yeni-sayi { animation: nf-giris var(--dur-kisa) var(--ev) both; position: absolute; left: 0; right: 0; }
@keyframes nf-cikis { to { transform: translateY(-100%); } }
@keyframes nf-giris { from { transform: translateY(100%); } to { transform: translateY(0); } }

.fiske { animation: cip-fiske var(--dur-kisa) var(--ev) both; }
@keyframes cip-fiske { 
  0% { transform: scale(1) rotate(0); } 
  50% { transform: scale(1.18) rotate(-6deg); } 
  100% { transform: scale(1) rotate(0); } 
}

/* R4: Seçenek Doğru/Yanlış */
.secenek.yanlis { animation: sarsinti var(--dur-bas) var(--ev) both; }
@keyframes sarsinti { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.secenek.dogru .onay-ciz {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.secenek.dogru .onay-ciz path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: cizgi-ciz var(--dur-kisa) var(--ev) forwards;
}
@keyframes cizgi-ciz { to { stroke-dashoffset: 0; } }

/* R5 · SONUÇ MÜHRÜ — belgenin köşesine basılır, içeriği KAPATMAZ.
   Asit üç rolünden biri mühürdü (DESIGN.md § 1.1); işte o mühür.
   Hafif eğik durur: dik damga matbaadan çıkmış gibi, eğik damga ELLE
   basılmış gibi okunur — kâğıt dünyasında ikincisi doğru. */
.sonuc-kutu { position: relative; }
/* §52 tuzağının dördüncü tekrarına karşı: display, [hidden]'ı ezer. */
.sonuc-muhur[hidden] { display: none; }
.sonuc-muhur {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-tam);
  background: var(--asit);
  color: var(--asit-metin);
  box-shadow: inset 0 -3px 0 #a9c531, 0 2px 5px rgba(43, 34, 24, 0.18);
  transform: rotate(-8deg);
  animation: muhur-bas var(--dur-kisa) var(--ev) both;
}
.sonuc-muhur svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes muhur-bas {
  from { transform: scale(1.6) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(-8deg); opacity: 1; }
}

/* R6: Okuma Türkçesi (kâğıt katlanır açılır) */
.ok-tr.ok-acik { animation: ok-tr-giris var(--dur-kisa) var(--ev) both; }
@keyframes ok-tr-giris { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.ok-notlar .cip.ok-cip-giris { animation: sy-sat-giris var(--dur-kisa) var(--ev) both; }

@property --dolu { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.sy-bar span, .bant-halka, .bant-bar span {
  transition: width var(--dur-yavas) var(--ev), --dolu var(--dur-yavas) var(--ev);
}

.xp-cikan {
  position: absolute;
  top: -14px;
  right: 0;
  color: var(--vurgu-koyu);
  font-weight: bold;
  font-size: var(--yz-kucuk);
  animation: xp-yuksel var(--dur-kisa) var(--ev) both;
  pointer-events: none;
}
@keyframes xp-yuksel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sy-sat, .kurs-levha, .gecis, .nf-kutu .eski-sayi, .nf-kutu .yeni-sayi, .fiske, .secenek.yanlis, .secenek.dogru .onay-ciz path, .sonuc-muhur, .ok-tr.ok-acik, .ok-notlar .cip.ok-cip-giris, .xp-cikan { animation: none !important; }
  .sy-bar span, .bant-halka, .bant-bar span, .ok-par { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   OKUMA ÇALARI — stüdyo kaydı oynatıcısı              (§ 68 · 2026-09-02)
   Duolingo Stories / Readle mekanizması, bizim malzemede: kil çubuk,
   asit oynat düğmesi (birincil eylem — asit'in üç rolünden biri),
   mono süre künyesi, çalan paragrafta kâğıt-2 vurgusu.
   ═══════════════════════════════════════════════════════════════════ */
.ok-calar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.12);
}
.ok-cal {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-tam);
  background: linear-gradient(180deg, #ddfa66 0%, var(--asit) 60%, #c1e137 100%);
  color: var(--asit-metin);
  box-shadow: inset 0 -3px 0 #a9c531, 0 2px 4px rgba(43, 34, 24, 0.16);
  transition: transform var(--dur-bas) var(--ev);
}
.ok-cal:active { transform: translateY(2px); }
.ok-cal:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.ok-cal svg { width: 20px; height: 20px; fill: currentColor; }
.ok-cal svg[hidden] { display: none; }
.ok-sure {
  flex: 1;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.04em;
  color: var(--murekkep-3);
}
.ok-hiz[aria-pressed='true'] { background: var(--kagit-2); box-shadow: inset 0 0 0 1.5px var(--kenar); color: var(--murekkep); }

/* Paragraf vurgusu: metin hizası bozulmadan zemin — yatay nefes negatif
   payla açılıyor ki satır genişliği değişmesin. */
.ok-par { padding-inline: 10px; margin-inline: -10px; border-radius: var(--r-xs); transition: background var(--dur-kisa) var(--ev); }
.ok-par.calan { background: var(--kagit-2); }
.ok-par-cal {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--kagit-3);
  color: var(--murekkep-2);
}
.ok-par-cal svg { width: 14px; height: 14px; fill: currentColor; }
.ok-par-cal:active { background: var(--kagit-2); }

/* ═══════════════════════════════════════════════════════════════════
   BLOG OKUYUCUSU — günün yazısı                       (§ 69 · 2026-09-03)
   Okuma metni iskeletiyle aynı sayfa; tek fark paragrafın Türkçe olması.
   `.de`nin Türkçe kardeşi: aynı boy ve satır aralığı, Almanca harf
   aralığı (--ls-dev) YOK — Türkçe metin sıkı dizilir.
   ═══════════════════════════════════════════════════════════════════ */

.ok-par .yazi {
  margin: 0;
  font-size: var(--yz-orta);
  line-height: 1.62;
}

/* ═══════════════════════════════════════════════════════════════════
   § 70 · ödev tablosu                                 (2026-09-03)
   ═══════════════════════════════════════════════════════════════════ */
.odev-tablo {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: var(--yz-govde);
}
.odev-tablo th {
  text-align: left;
  padding: 8px 12px;
  color: var(--murekkep-3);
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-weight: 600;
  border-bottom: 2px solid var(--kagit-3);
}
.odev-tablo td {
  padding: 12px;
  border-bottom: 1px solid var(--kagit-3);
  vertical-align: middle;
}
.odev-giris {
  width: 100%;
  min-width: 80px;
  padding: 8px 12px;
  border: 1px solid var(--kagit-3);
  border-radius: var(--r-xs);
  background: var(--isik);
  color: var(--murekkep);
  font: inherit;
  transition: border-color var(--dur) var(--ev), background-color var(--dur) var(--ev);
}
.odev-giris:focus-visible {
  outline: 2px solid var(--vurgu-koyu);
  outline-offset: -1px;
}
.odev-giris.d {
  background: var(--asit);
  border-color: var(--asit);
  color: var(--murekkep);
}
.odev-giris.y {
  background: var(--kagit-2);
  border-color: var(--vurgu);
  color: var(--murekkep);
}
.odev-giris:disabled {
  opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
  .odev-giris.y {
    animation: sarsinti var(--dur-bas) var(--ev) both;
  }
}

.dugme[hidden] {
  display: none !important;
}
.odev-sarmal {
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   BENTO + KİL İKONLAR — Bugün yüzeyi                  (§ 72 · 2026-09-03)
   Operatör hükmü: tek satır tek satır değil; uzun kartın yanına küçük
   widget. Göz ikonla tarar, okumak zorunda kalmaz. Yüzeyler düz (tek
   derin yüzey «Bugünü başlat» asit hapı — imza o).
   ═══════════════════════════════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 10px;
  margin-top: 14px;
}
.bento .gunun-dersi { margin-top: 0; min-width: 0; }
.bento .tek { grid-column: 1 / -1; }
@media (max-width: 359px) {
  .bento { grid-template-columns: 1fr; }
}

.gd-sol { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.gd-sol i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-ust { gap: 6px; }
.gd-ust .xp-rozet { white-space: nowrap; flex: none; }
/* dar widget (sağ sütun): kil ikon kimliği taşır, mono etiket gizlenir */
.bento .gunun-dersi:nth-child(even) .gd-sol i { display: none; }
/* ── İŞ İŞARETLERİ ────────────────────────────────────────────────
   `app/isaretler.js` — GPT'den gelen yuvarlak kil markalar (raster).
   Kod-çizim ve kendini çizen jestler kaldırıldı (operatör: «elle değil,
   GPT ile»). Kalan tek hareket: görünürlüğe girince BİR KEZ yerine
   oturma (`.oynat`, app.js gorununceCanlan). Duruş hâli bitmiş hâl —
   bekleme de hareket de yalnız `no-preference` içinde (§ 4).       */
.isaret { width: 32px; height: 32px; flex: none; display: block; border-radius: var(--r-tam); }

@media (prefers-reduced-motion: no-preference) {
  .isaret        { transform: scale(.55); opacity: 0; }
  .isaret.oynat  { animation: is-otur var(--dur-yavas) var(--ev) forwards; }
}
@keyframes is-otur { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.gunun-dersi .kisa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.pul-tik { padding: 4px 8px; }
.pul-tik svg {
  display: block;
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.xp-rozet.sade {
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  color: var(--murekkep-3);
}

/* dopamin dokunuşu: karta basınca kil ikon kıpırdar */
@media (prefers-reduced-motion: no-preference) {
  .gunun-dersi:active .isaret { animation: sarsinti var(--dur-bas) var(--ev); }
}

/* ═══ § 73 · SERİ KALKANI ══════════════════════════════════════════════
   Seri çipine dokununca açılan küçük yaprak. Kalkan satın alınmaz,
   kazanılır (her 7 gün) — bu yüzden yaprakta düğme değil, DURUM var.
   Yüzey kuralı: derin gölge yalnız asit hapta; burada kıl halka. */
.kalkan-yaprak {
  position: absolute;
  top: calc(100% - 4px);
  left: 16px;
  z-index: 40;
  width: max-content;
  max-width: min(14rem, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: var(--r-plaka);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
}
.ky-stok { display: flex; gap: 5px; margin-bottom: 6px; }
.ky-stok svg { width: 18px; height: 18px; }
.ky-stok svg.dolu { fill: var(--vurgu); }
.ky-stok svg.bos { fill: none; stroke: rgba(43, 34, 24, 0.26); stroke-width: 1.6; }
.kalkan-yaprak p { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--murekkep-3); }

/* «Dün kalkan kullanıldı» — Bugün ekranının üstünde tek satır, sakin. */
.kalkan-bilgi {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: var(--r-xs);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
  font-size: 0.8rem;
  color: var(--murekkep);
}
.kalkan-bilgi svg { width: 15px; height: 15px; flex: none; fill: var(--vurgu); }

/* ═══ § 74 · GÜNÜN MİNİ TESTİ ══════════════════════════════════════════
   Modül `app/minitest.js`. Ekranın kendi bileşeni yok — ders ekranının
   kabuğunu (ders-bar · kutu-soru · secenek) ödünç alıyor; burada yalnız
   birkaç aralık var. Satır içi `style=` yasak olduğu için sınıflandı. */
.mt-et { margin: 2px 0 6px; }
.mt-tr { margin-top: 8px; }
.mt-orta { text-align: center; }
.mt-not { margin-bottom: 16px; text-align: center; }
.mt-zayif { margin-top: 24px; }
.mt-liste { margin-top: 12px; }

/* § 75 · soru tipleri */
.soru-govde-esnek {
  display: flex;
  gap: 8px;
}
.soru-govde-esnek .odev-giris {
  flex: 1;
  min-width: 0;
}
.soru-govde-esnek .dugme {
  margin: 0;
  white-space: nowrap;
}
.cip-nesne {
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43,34,24,.11);
  padding: 10px 16px;
  border-radius: var(--r-tam);
  border: none;
  font: inherit;
  font-weight: 500;
  color: var(--murekkep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cip-nesne:active {
  background: var(--kagit-3);
}
.cip-nesne[hidden] {
  display: none !important;
}

/* `sirala` — dokunmalı kelime çipleri. Şerit boşken «Kontrol et» pasif;
   çipler iki kap arasında gidip gelir, sürükleme kütüphanesi yok. */
.sira-alan { display: grid; gap: 10px; }
.sira-serit {
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-xs);
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11);
}
.sira-serit.d { box-shadow: 0 0 0 2px var(--asit); }
.sira-serit.y { box-shadow: 0 0 0 2px var(--vurgu); }
.sira-havuz { display: flex; flex-wrap: wrap; gap: 6px; }
.sira-cip {
  /* Ölçüm (2026-09-13): 66×37 — parmak hedefi 44'ün altında. Duolingo'nun
     kelime bankası çipi de ~44; yükseklik oradan geliyor, yazı büyümüyor. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--kagit);
  box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.14);
  font: inherit;
  font-size: var(--yz-orta);
  color: var(--murekkep);
  cursor: pointer;
}
.sira-cip:disabled { opacity: 0.55; cursor: default; }
/* Şerit boşken «Kontrol et» pasif olduğunu GÖSTERMELİ — yoksa öğrenci
   basar, hiçbir şey olmaz, bozuk sanır. */
.sira-alan .dugme:disabled { opacity: 0.4; cursor: default; }
.sira-serit .sira-cip { background: var(--isik); }
.sira-dogru { font-size: var(--yz-orta); color: var(--murekkep-3); }
@media (prefers-reduced-motion: no-preference) {
  .sira-cip { transition: transform var(--dur-bas) var(--ev); }
  .sira-cip:active:not(:disabled) { transform: translateY(1px); }
}

/* § 76 · blog kelime turu */
/* Tasarım yönergesi gereği .mt-* sınıfları kullanıldı. */

/* § 77 · iç-stil devri — GÖREV 14
   Buradaki kuralların HİÇBİRİ yeni tasarım değil: app.js'te satır içinde
   duran ölçüler token'lı hâle getirilip taşındı. */
.tf-p { color: var(--murekkep-2); margin: 8px 0 20px; }
.tf-vurgu { color: var(--vurgu-koyu); }
.tf-cip { margin-bottom: 14px; }
.tf-cevir { color: var(--murekkep-3); margin-top: 6px; font-size: var(--yz-govde); }
.tf-ses { margin-top: 20px; }
.tf-sonuc { margin-top: 20px; font-size: var(--yz-govde); min-height: 24px; }
.tf-gec { margin-top: 6px; }
.tf-mesaj-dinle { color: var(--vurgu-koyu); }
.tf-mesaj-hata { color: var(--die); }
.tf-mesaj-basari { color: var(--das); }

.ab-buyu { align-items: center; text-align: center; }
.ab-cip { margin-bottom: 16px; font-size: var(--yz-mikro); }
.ab-yan { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ab-yan-alt { display: flex; align-items: center; justify-content: space-between; }

.hs-kutu { display: block; margin-top: 10px; }
.hs-input { width: 100%; min-height: 44px; border: 0; background: none; font: inherit; color: inherit; }
.hs-eylem { margin-top: 10px; }
.hs-not { text-align: left; }
.hs-sec { display: flex; gap: 8px; margin-top: 10px; }
.hs-sec .dugme { flex: 1; }
.hs-et { display: block; font-size: var(--yz-kucuk); font-weight: 600; color: var(--murekkep-3); }
.hs-bos { margin-top: 4px; }

/* § 78 · iç-stil devri, ikinci yarı — GÖREV 14
   Yeni tasarım YOK. app.js'te satır içinde duran ölçüler buraya taşındı.
   İki grup vardı: ① düz yerleşim (ortalama, boşluk, dikey yığın) — aşağıda
   sınıf oldu. ② veriden gelen ilerleme yüzdesi — DESIGN.md § 6.8 satır içi
   `width:%` yazmaya izin veriyordu ama gerek kalmadı: yüzde artık `--oran`
   token'ına yazılıyor, genişliği CSS okuyor. Böylece app.js'te tek bir
   `style=` kalmadı (ölçüldü: 44 → 0). Geçiş animasyonu bozulmuyor —
   `--oran` değişince hesaplanan `width` değişiyor, çubukların kendi
   `transition: width` kuralları aynen çalışıyor. */

.bant-bar > span,
.gorev-bar > span,
.sy-bar > span,
.ders-yol > span,
.cubukcuk > i { width: var(--oran, 0%); }

/* Kelime kartının altındaki kalıp yuvası: Almanca satır + hoparlör yan yana. */
.kalip-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kalip-de { margin: 0; }

/* Tek satırlık hizalama düzeltmeleri — hepsi eskiden satır içindeydi. */
.sl-p-sol { text-align: left; }
.yonerge-orta { text-align: center; }
.baslik-orta { text-align: center; }
.dugme-orta { text-align: center; }
.alt-bosluk { margin-bottom: 10px; }
.test-kunye { margin: 2px 0 6px; }
.soru-tr { margin-top: 8px; }

/* Ben · «zorlandığın yerler» kartı: ad + «Çalış» üstte, oran çubuğu altta. */
.zayif-kart { display: flex; flex-direction: column; gap: 6px; }
.zayif-ust { display: flex; justify-content: space-between; align-items: center; }

/* § 79 · bitiş slaydının iri maskotu — GÖREV 27
   HTML `width="74"` diyordu ama `.tepki` 52px'e sabitliyordu ve `.iri`nin
   CSS karşılığı hiç yoktu: ders/metin bitişinin kahramanı küçük kalıyordu. */
.tepki.iri { width: 74px; }

/* § 80 · 44px dokunma hedefleri — GÖREV 28
   Ölçülen: .ders-kapat 32×32 (her tam ekran akıştan çıkış oraya bağlı) ·
   .ok-cal 42×42 · .ok-hiz 33×33 · .ok-par-cal 30×30 · .ok-tr-ac 67×16.
   Görünen boyut DEĞİŞMİYOR; görünmez ::after parmağın isabet alanını
   44×44'e çıkarıyor. inset = (44 - ölçülen) / 2. */
.ders-kapat { position: relative; }
.ders-kapat::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.ok-cal { position: relative; }
.ok-cal::after {
  content: '';
  position: absolute;
  inset: -1px;
}
.ok-hiz { position: relative; }
.ok-hiz::after {
  content: '';
  position: absolute;
  inset: -5.5px;
}
.ok-par-cal { position: relative; }
.ok-par-cal::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.ok-tr-ac { position: relative; }
.ok-tr-ac::after {
  content: '';
  position: absolute;
  /* 16px'lik satır: -14 tam 44 yapıyor ama alt piksel yuvarlamasında 43'e
     düşüyordu. -15 → 46px. Üstte 12px boşluk var (.ok-notlar, tıklanmaz),
     altta 22px (.ok-par) — taşma yanlış düğmeye basılmasına yol açmıyor. */
  inset: -15px 0;
}

/* § 81 · ders destesinde görünen ilerleme — GÖREV: «nasıl devam edicez»
   Deste yatay kaydırmayla ilerliyordu, ekranda bunu söyleyen hiçbir şey
   yoktu. Düğme desteyle sayaç arasında durur; son slaytta gizlenir çünkü
   orada kendi çağrısı («Teste geç») var. */
.ders-ileri { margin-top: 10px; }
.ders-ileri[hidden] { display: none; }

/* ══ § 82 · YOL — ana merkez ═══════════════════════════════════════════
   Operatör (2026-09-05): «ilk girişte bizim ana merkezimiz olan bir
   kısım olmalı; bu kutucuklu yapıyı blog dergimsi girip istediği gibi
   takılsın diye yaptım.» Bento gezinme dili; ana sayfa yol.

   Kaldırılanlar: 110px'lik taahhüt bandı (aynı sayıyı üç kez gösteriyordu)
   ve 42px'lik hafta şeridi (yeni kullanıcıda yedi boş daire, sıfır bilgi;
   seri zaten üst şeritte alev çipinde duruyor).

   Kilit YOK: sıradaki konu levhadır, kalanlar soluk ama dokunulabilir.
   Duolingo'nun yolu tam da kilitlediği için eleştirildi. */

.yol { margin-bottom: 22px; }

/* ── bölüm başlığı ── */
.yol-bas {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 0 2px 14px;
}
.yol-no {
  grid-column: 1 / -1;
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
}
.yol-bas b {
  margin-top: 6px;
  font-size: 21px;
  line-height: 1.15;
  color: var(--murekkep);
}
.yol-say {
  margin-top: 6px;
  font: 600 13px/1 var(--f-mono);
  font-style: normal;
  color: var(--murekkep-3);
  white-space: nowrap;
}
.yol-bas small {
  grid-column: 1 / -1;
  margin-top: 3px;
  font-size: 14px;
  color: var(--murekkep-3);
}
.yol-oran {
  grid-column: 1 / -1;
  margin-top: 11px;
  height: 4px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  overflow: hidden;
}
.yol-oran > span {
  /* Genişlik `--oran` özel değişkeninden gelir; ciz() sonrası
     `[data-h-w]` süpürmesi onu yazıyor (app.js). Varsayılan 0 ŞART:
     width verilmezse blok elemanı %100 doluyor ve 0/7 ilerleme dolu
     çubuk gibi görünüyordu. */
  display: block;
  width: var(--oran, 0);
  height: 100%;
  border-radius: inherit;
  background: var(--vurgu);
  transition: width var(--dur-yavas) var(--ev);
}

/* ── konu listesi ── */
.yol-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bitmiş / bekleyen satır — sessiz, ama dokunulabilir (kilit yok). */
.yol-sat > button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-plaka);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-bas) var(--ev);
}
.yol-sat > button:hover { background: var(--kagit-3); }
.yol-sat > button:active { background: var(--kagit-2); }
.yol-sat i {
  font-style: normal;
  font-size: 15px;
  color: var(--murekkep-3);
}
.yol-pul {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--tas);
}
.yol-pul svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yol-sat.oldu .yol-pul { color: var(--vurgu); }
.yol-sat.oldu i { color: var(--murekkep-2); }

/* ── İMZA AN — sıradaki konu. Ekranda tek levha; eylem içinde,
      ayrıca «Bugünü başlat» düğmesi yok. ── */
.yol-simdi { margin: 6px 0; }
.yol-levha {
  display: block;
  width: 100%;
  padding: 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 1px 0 var(--kagit-2), 0 10px 24px -18px var(--murekkep);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-bas) var(--ev), box-shadow var(--dur-bas) var(--ev);
}
.yol-levha:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--kagit-2), 0 4px 12px -12px var(--murekkep);
}
.yol-et {
  display: block;
  /* 10px HAM değerdi (CLAUDE.md «ham değer yasak») ve uygulamanın en
     küçük yazısıydı; `--vurgu` ile kâğıt üstünde 4,15:1 — eşiğin
     altında. 11px + koyu vurgu: gündüz 5,65:1 · gece 8,54:1. */
  font: 600 var(--yz-mikro)/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
}
.yol-levha b {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--murekkep);
}
.yol-levha small {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: var(--murekkep-3);
}
.yol-git {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  padding: 10px 14px 10px 17px;
  border-radius: var(--r-tam);
  background: var(--asit);
  color: var(--asit-metin, var(--murekkep));
  font-size: 15px;
  font-weight: 600;
}
.yol-git svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── sonraki bölüm — tek satır, «sırada ne var» sorusunu kapatır ── */
.yol-sonra {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 12px 0;
  border: 0;
  border-top: 1px solid var(--kagit-2);
  background: none;
  font: inherit;
  text-align: left;
}
.yol-sonra span {
  /* «SIRADA» etiketi: 10px ham değerdi (kardeşi `.yol-et` ile aynı
     kusur) ve en soluk mürekkepteydi — 11px + bir basamak koyu. */
  font: 600 var(--yz-mikro)/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.yol-sonra b {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--murekkep-2);
}
.yol-sonra i {
  font-style: normal;
  font-size: 13px;
  color: var(--murekkep-3);
}
.yol-sonra.atla { cursor: pointer; }

/* ── üst şeritteki günlük hedef çizgisi (bandın yerine geçen 3px) ── */
.ust-hedef {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--kagit-3);
}
.ust-hedef > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--asit);
  transition: width var(--dur-yavas) var(--ev);
}

@media (prefers-reduced-motion: reduce) {
  .yol-oran > span,
  .ust-hedef > span,
  .yol-levha { transition: none; }
}

/* ══ § 83 · İLK GİRİŞ ═══════════════════════════════════════════════
   Dört adım: karşılama → iki mikro ders → günlük hedef. Metinler
   `tanitim-veri.js`de. Ekran tam yükseklik; eylem hep altta, içerik
   ortada — parmak aynı yere iner, göz aynı yeri okur. */

body[data-ekran='tanitim'] .govde { padding: 0; }

.tn {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 28px 22px calc(env(safe-area-inset-bottom, 0px) + 24px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-kisa) var(--ev), transform var(--dur-kisa) var(--ev);
}
.tn.ciz {
  opacity: 1;
  transform: none;
}

/* ── karşılama ──
   Sahne KARŞILAMA EKRANININ bileşeni (.hos-sahne / .hos-daire /
   .hos-maskot). Kendi diskimi çizdiğimde maskotun pişmiş gölgesi
   diskin dışına taşıyordu: oradaki %73 oranı bu yüzden var. Burada
   yalnız ölçü ve alt boşluk değişir. */
.tn-sahne {
  width: 216px;
  height: 216px;
  margin: 0 auto 26px;
}
.tn-baslik {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  color: var(--murekkep);
}
.tn-baslik.kucuk { font-size: 25px; }
.tn-metin {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--murekkep-3);
}

/* ── mikro ders ── */
.tn-kelime {
  padding: 24px 20px;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 1px 0 var(--kagit-2), 0 12px 28px -22px var(--murekkep);
  text-align: center;
}
.tn-kelime b {
  display: block;
  font-size: 38px;
  line-height: 1.05;
  color: var(--murekkep);
}
.tn-kelime span {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  color: var(--vurgu);
}
.tn-kelime small {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kagit-2);
  font-size: 14px;
  color: var(--murekkep-3);
}
.tn-soru {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--murekkep);
  text-align: center;
}
.tn-secenek {
  display: grid;
  gap: 9px;
}
.tn-secenek button {
  padding: 15px 18px;
  border: 1.5px solid var(--kagit-2);
  border-radius: var(--r-plaka);
  background: var(--isik);
  font: 600 17px/1.2 inherit;
  color: var(--murekkep);
  cursor: pointer;
  transition: border-color var(--dur-bas) var(--ev), background var(--dur-bas) var(--ev);
}
.tn-secenek button:active { background: var(--kagit-3); }
.tn-secenek button[data-durum='dogru'] {
  border-color: var(--vurgu);
  background: var(--asit);
  color: var(--asit-metin);
}
.tn-secenek button[data-durum='yanlis'] {
  border-color: var(--tas);
  color: var(--murekkep-3);
}
.tn-secenek button:disabled { cursor: default; }
.tn-not {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--vurgu-koyu);
  text-align: center;
}
.tn-not[hidden] { display: none; }

/* ── günlük hedef ── */
.tn-hedef {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}
.tn-hedef button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  padding: 15px 18px;
  border: 1.5px solid var(--kagit-2);
  border-radius: var(--r-plaka);
  background: var(--isik);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-bas) var(--ev);
}
.tn-hedef button[aria-pressed='true'] {
  border-color: var(--vurgu);
  border-width: 2px;
  padding: 14px 17px;
}
.tn-hedef b {
  font: 600 17px/1 var(--f-mono);
  color: var(--murekkep);
}
.tn-hedef i {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--murekkep);
}
.tn-hedef small {
  grid-column: 2;
  margin-top: 3px;
  font-size: 13px;
  color: var(--murekkep-3);
}

/* ── alt: adım noktaları + tek eylem ── */
/* Eylem dibe yapışır: içerik ortada kalır, düğme hep aynı yerde.
   `justify-content: center` tek başınayken düğmenin altında ekranın
   dörtte biri boş kalıyordu (ölçüldü, 390×844). */
.tn-ic {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tn-alt { padding-top: 26px; }
.tn-alt .dugme { width: 100%; }
.tn-alt .dugme[hidden] { display: none; }
.tn-nokta {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.tn-nokta i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-tam);
  background: var(--tas);
  transition: background var(--dur-kisa) var(--ev);
}
.tn-nokta i.ge { background: var(--vurgu); }

@media (prefers-reduced-motion: reduce) {
  .tn,
  .tn-nokta i,
  .tn-secenek button,
  .tn-hedef button { transition: none; }
}

/* ══ § 85 · KARAKTERLE KONUŞMA ══════════════════════════════════════
   Operatör: «karakterler yaratmalısın, öğrenci onunla da konuşmalı.»
   Kip TESTİ DEĞİL PROVA: yanlış şık kilitlemez, tekrar denenir. O yüzden
   yanlış şık kırmızıya boyanmaz — soluklaşır. Ceza değil yönlendirme. */

.kn {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--cubuk-pay) - 92px);
  padding-top: 6px;
}

/* ── sahne seçimi ── */
.kn-secim { justify-content: flex-start; }
.kn-bas {
  margin: 4px 0 0;
  font-size: 24px;
  color: var(--murekkep);
}
.kn-alt-yazi {
  margin: 7px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--murekkep-3);
}
.kn-liste { display: grid; gap: 9px; }
.kn-liste button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 1px 0 var(--kagit-2), 0 10px 22px -20px var(--murekkep);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-bas) var(--ev);
}
.kn-liste button:active { transform: translateY(1px); }
.kn-l-ad { flex: 1; }
.kn-l-ad b { display: block; font-size: 17px; color: var(--murekkep); }
.kn-l-ad small { display: block; margin-top: 3px; font-size: 13px; color: var(--murekkep-3); }

/* ── karakter başlığı ── */
.kn-kisi {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
}
.kn-yuz {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--r-tam);
  box-shadow: 0 6px 14px -10px var(--murekkep);
}
/* Canlı yüz (sahne içi): temel kare + iki üst kare — kapalı göz, açık ağız —
   aynı kadrajda, opaklık 0 (kareler GPT'den, DESIGN.md § 5.3). Kırpma
   `.kirp` ile bir kez (--dur-bas), konuşma `.konusuyor` sürdükçe döngü
   (--dur-kisa); ikisi de yalnız hareket istenirken. İndirgenmiş harekette
   yüz temel karede durur — duruş hâli bitmiş hâl. */
.kn-yuz-canli { position: relative; display: block; overflow: hidden; }
.kn-yuz-canli img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-tam); }
.kn-goz, .kn-agiz { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kn-yuz-canli.kirp .kn-goz { animation: kn-kirp var(--dur-bas) var(--ev); }
  .kn-yuz-canli.konusuyor .kn-agiz { animation: kn-konus var(--dur-kisa) var(--ev) infinite; }
}
@keyframes kn-kirp { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
@keyframes kn-konus { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.kn-ad b { display: block; font-size: 16px; color: var(--murekkep); }
.kn-ad small { display: block; margin-top: 2px; font-size: 13px; color: var(--murekkep-3); }

/* ── replik balonu — kuyruklu, karakter konuşuyor ── */
.kn-balon {
  position: relative;
  padding: 17px 18px 14px;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: 0 1px 0 var(--kagit-2), 0 12px 26px -22px var(--murekkep);
}
.kn-balon::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  border-radius: 3px 0 0 0;
  background: var(--isik);
  transform: rotate(45deg);
}
.kn-de {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  color: var(--murekkep);
}
.kn-arac {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.kn-ses {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--vurgu);
  cursor: pointer;
}
.kn-ses svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kn-tr {
  padding: 8px 13px;
  border: 0;
  border-radius: var(--r-tam);
  background: none;
  font: 600 14px/1 inherit;
  color: var(--murekkep-3);
  cursor: pointer;
}
.kn-tr[aria-expanded='true'] { color: var(--vurgu); }
.kn-tr-metin {
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--kagit-2);
  font-size: 15px;
  color: var(--murekkep-3);
}
.kn-tr-metin[hidden] { display: none; }

/* ── öğrencinin cevabı ── */
.kn-soru {
  margin: 22px 0 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--murekkep-3);
}
.kn-secenek { display: grid; gap: 9px; }
.kn-secenek button {
  padding: 15px 17px;
  border: 1.5px solid var(--kagit-2);
  border-radius: var(--r-plaka);
  background: var(--isik);
  font: 600 16px/1.35 inherit;
  color: var(--murekkep);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-bas) var(--ev), opacity var(--dur-bas) var(--ev);
}
.kn-secenek button:active { background: var(--kagit-3); }
.kn-secenek button[data-durum='dogru'] {
  border-color: var(--vurgu);
  background: var(--asit);
  color: var(--asit-metin);
}
/* Yanlış CEZALANDIRILMAZ — soluklaşır. Prova, sınav değil. */
.kn-secenek button[data-durum='yanlis'] {
  border-style: dashed;
  opacity: 0.45;
}
.kn-secenek button:disabled { cursor: default; }

.kn-alt { margin-top: auto; padding-top: 20px; }
.kn-alt .dugme { width: 100%; }
.kn-alt .dugme[hidden] { display: none; }
.kn-not {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--vurgu-koyu);
}
.kn-not[hidden] { display: none; }
.kn-son { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .kn-liste button,
  .kn-secenek button { transition: none; }
}

/* K3 · ALT KONTROL BANDI */
.bant-dogru, .bant-yanlis {
  display: flex;
  flex-wrap: wrap;           /* 390px'te açıklama kartı + mesaj + düğme tek satıra sığmıyor;
                                mesaj düğmenin altına giriyordu (kapıda ölçüldü) — satır kırılır */
  row-gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 140px;
  /* Kenardan kenara: ölçülen kenar boşluğu 16px (ebeveyn .ekran-dolu sol 16 · sağ 374 @390).
     İşçi 20 varsaymıştı → her yanda 4px yatay taşma (kapıda ölçüldü). */
  margin: auto -16px -40px -16px;
  width: calc(100% + 32px);
  box-sizing: border-box;
  transition: background var(--dur-kisa) var(--ev);
}
.bant-dogru { background: var(--asit); color: var(--asit-metin); }
.bant-yanlis { background: var(--kagit-2); color: var(--murekkep); }
.bant-ic { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; }
.bant-mesaj { display: flex; align-items: center; gap: 12px; font-size: var(--yz-buyuk); }
.bant-ikon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bant-sag { padding-right: 20px; flex-shrink: 0; }

/* K4 · BİTİŞ KONFETİSİ */
.slayt-son, .sonuc-kutu { position: relative; }
.konfeti {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
  display: flex;
  justify-content: space-around;
}
.konfeti i {
  width: 8px; height: 16px;
  background: var(--asit);
  animation: k-dus calc(var(--dur-uzun) * 2) ease-out forwards;
}
.konfeti i:nth-child(even) { background: var(--vurgu); }
.konfeti i:nth-child(3n) { animation-delay: calc(var(--dur-kisa) / 3); transform: rotate(15deg); }
.konfeti i:nth-child(5n) { animation-delay: calc(var(--dur-kisa) / 1.5); transform: rotate(-15deg); }
.konfeti i:nth-child(7n) { animation-delay: var(--dur-kisa); transform: rotate(30deg); }

@keyframes k-dus {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .konfeti { display: none; }
}

/* ── Dallanan diyalog: boşluk doldurma (2026-09-06) ─────────────────
   Yarım cümle + üç aday çip. Çipler `.kn-secenek button` malzemesini
   aynen giyer; boşluk kural çizgisi gibi alt çizgili, dolunca kâğıt-2. */
.kn-cumle { margin: 0 0 10px; font-size: var(--yz-buyuk); line-height: 1.5; color: var(--murekkep); }
.kn-bosluk {
  display: inline-block; min-width: 4.5ch; padding: 0 6px;
  border-bottom: 2px solid var(--kenar); color: var(--murekkep-3);
  font-family: var(--f-mono); font-size: var(--yz-govde); letter-spacing: 0.04em;
  transition: background var(--dur-kisa) var(--ev), color var(--dur-kisa) var(--ev);
}
.kn-bosluk.dolu { background: var(--kagit-2); color: var(--murekkep); border-bottom-color: var(--vurgu-koyu); font-family: inherit; font-size: inherit; letter-spacing: 0; border-radius: var(--r-xs) var(--r-xs) 0 0; }
.kn-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-cipler button { flex: 1 1 auto; min-width: 30%; }
.kn-son-de { margin: 10px 0 2px; font-size: var(--yz-buyuk); color: var(--murekkep); }
.kn-son-tr { margin: 0 0 10px; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
/* Diyalog bitişi: test sonucunun iki sütunlu kutusu değil, tek sütun —
   son replik tam genişlikte okunur (dar sütunda kelime kelime kırılıyordu). */
.kn-son-kutu { display: block; text-align: center; }
.kn-son-kutu > b { display: block; margin: 6px 0; font-size: var(--yz-h3); }

/* ═══════════════════════════════════════════════════════════════════
   SERTİFİKA DENEME SINAVI  (2026-09-08)
   ───────────────────────────────────────────────────────────────────
   Yeni ekran ailesi, çünkü var olan test ekranı bunu karşılamıyordu:
   sınavın modülü, süresi, dinletme hakkı, açık uçlu parçası ve
   modül modül puan tablosu var. Basılabilir her parça envanterden
   geliyor (`.sy-sat` · `.secenek` · `.kutu` · `.dugme` · `.ders-bar`);
   buradaki sınıflar yalnız sınava özgü YERLEŞİM. */

.sv-ust { display: flex; align-items: center; gap: 10px; }
.sv-ust .ders-bar { flex: 1; margin-bottom: 0; }
.sv-sayac {
  flex: none;
  min-width: 56px;
  padding: 4px 10px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  font-size: var(--yz-kucuk);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Son dakika: sayaç renk değiştirir, ekran zıplamaz — «tek hareket». */
.sv-sayac.az { background: var(--vurgu); color: var(--alan-metin); }
.sv-sayac-ad { min-width: 0; }

.sv-liste { display: grid; gap: 8px; margin-top: 16px; }
.sv-sat .sy-ad small { display: block; color: var(--murekkep-3); font-size: var(--yz-kucuk); }
.sv-sat .sy-olcu { margin-left: auto; color: var(--murekkep-3); font-size: var(--yz-kucuk); white-space: nowrap; }

.sv-modul-liste { display: grid; gap: 6px; margin: 16px 0; }
.sv-modul-sat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
}
.sv-modul-ad { display: flex; flex-direction: column; }
.sv-modul-ad small { color: var(--murekkep-3); font-size: var(--yz-kucuk); }
.sv-modul-olcu { margin-left: auto; color: var(--murekkep-3); font-size: var(--yz-kucuk); white-space: nowrap; }
.sv-ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sv-secim { display: grid; gap: 8px; margin: 16px 0; }
.sv-sure-sec { min-height: 0; margin-top: 0; }
.sv-sure-sec small { display: block; color: var(--murekkep-3); font-size: var(--yz-kucuk); margin-top: 2px; }
.sv-sure-sec.secili { box-shadow: inset 0 0 0 2px var(--vurgu); }

.sv-yonerge p { margin: 0; }
.sv-gorev { color: var(--murekkep-2); margin: 12px 0 8px; }
.sv-metin { margin-bottom: 12px; }

.sv-dinle { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sv-oynat { flex: none; display: inline-flex; align-items: center; gap: 8px; }

.sv-ilanlar { display: grid; gap: 8px; }
.sv-ilan { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.sv-ilan-h { grid-row: span 2; align-self: start; color: var(--vurgu); }
.sv-ilan-ad { font-weight: 600; }
.sv-ilan-t { color: var(--murekkep-3); font-size: var(--yz-kucuk); }

.sv-form-ad { display: block; margin-bottom: 10px; }
.sv-alan { display: grid; gap: 4px; margin-bottom: 10px; }
.sv-alan > span { font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.sv-alan-not { display: block; margin-top: 4px; color: var(--murekkep-3); font-size: var(--yz-kucuk); }
.odev-giris.dogru { border-color: var(--das); }
.odev-giris.yanlis { border-color: var(--die); }

.sv-noktalar { margin: 0 0 12px; padding-left: 20px; color: var(--murekkep-2); }
.sv-yazi { min-height: 140px; resize: vertical; line-height: 1.5; }

.sv-kartlar { display: grid; gap: 6px; margin-bottom: 12px; }
.sv-kart { padding: 10px 14px; border-radius: var(--r-plaka); background: var(--kagit-3); }
.sv-kart-o { display: block; margin-top: 4px; color: var(--murekkep-3); font-size: var(--yz-kucuk); }

.sv-ornek p { margin: 6px 0 0; }
.sv-kontrol { margin-top: 12px; }
.sv-tik {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--murekkep);
  text-align: left;
  cursor: pointer;
}
.sv-tik-kutu {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--r-xs);
  background: var(--kagit-3);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  transition: background-color var(--dur-bas) var(--ev);
}
.sv-tik.secili .sv-tik-kutu { background: var(--asit); box-shadow: inset 0 0 0 1px var(--vurgu); }

.sv-bant { margin-top: 12px; }

.sv-hukum { margin-top: 8px; font-size: var(--yz-orta); }
.sv-hukum.gecti { color: var(--das); }
.sv-hukum.kaldi { color: var(--murekkep-3); }

.sv-sonuc-liste { display: grid; gap: 12px; margin: 16px 0; }
.sv-sonuc-bas { display: flex; align-items: center; gap: 8px; }
.sv-sonuc-puan { margin-left: auto; }
.sv-sonuc-cubuk {
  height: 10px;
  margin: 6px 0 2px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  overflow: hidden;
}
.sv-sonuc-cubuk > i {
  display: block;
  height: 100%;
  border-radius: var(--r-tam);
  background: var(--vurgu);
}
.sv-uyari { margin-bottom: 16px; }
.sv-uyari p { margin: 0; color: var(--murekkep-2); font-size: var(--yz-kucuk); }

/* Sonuç çubukları görünürken bir kez doluyor; duruş hâli = bitmiş hâl. */
@media (prefers-reduced-motion: no-preference) {
  .sv-sonuc-cubuk > i { animation: sv-dol var(--dur-yavas) var(--ev); }
}
@keyframes sv-dol { from { width: 0; } }

/* ═══ SEVİYE TESTİ — günün uyarlanabilir ölçümü (2026-09-09) ═══
   Bileşenler: `.st-serit` (altı bantlık ölçek + imleç) · `.st-kart`
   (Öğren başındaki giriş) · `.st-sonuc` (ölçüm sonucu) · `.st-egri`
   (son ölçümlerin çizgisi).

   ŞERİT, çubuk DEĞİL: dolan bir çubuk «ne kadarını bitirdin» der,
   burada ölçülen NEREDE OLDUĞUN. O yüzden yatak boydan boya duruyor,
   dolgu yok, tek bir imleç var. İmleç `--oran`la yerine kayıyor;
   değeri evin `[data-h-w]` süpürgesi veriyor (app.js). */
.st-serit {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  overflow: hidden;
}
.st-serit > i {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--murekkep-3);
}
.st-serit > i + i { border-left: 1px solid var(--ayrac); }
/* İmleç: bandın içinden geçen dikey çizgi + tepesinde nokta. Şeridi
   kapatmıyor — altındaki bant etiketi okunur kalsın. */
.st-imlec {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--oran, 0);
  width: 3px;
  margin-left: -1.5px;
  border-radius: var(--r-tam);
  background: var(--vurgu);
  box-shadow: 0 0 0 2px var(--kagit);
  transition: left var(--dur-yavas) var(--ev);
}
.st-imlec::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: var(--r-tam);
  background: var(--vurgu);
  box-shadow: 0 0 0 2px var(--kagit);
}
@media (prefers-reduced-motion: reduce) {
  .st-imlec { transition: none; }
}

/* KART — Öğren'deki müfredat başlığının hemen altı. `.sert-kart`ın
   kil malzemesi; farkı: içinde ölçek var, ok çipi yok (bu bir liste
   satırı değil, bir GÖSTERGE — dokunulabilir olduğunu raf kenarı ve
   basınca çökmesi söylüyor). */
.st-kart {
  appearance: none;
  display: block;
  width: 100%;
  margin: 14px 0 4px;
  padding: 14px 16px 12px;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 4px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.st-kart:active {
  transform: translateY(4px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12);
  transition-duration: var(--dur-bas);
}
.st-kart:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.st-bas {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
}
.st-et {
  grid-column: 1;
  font-size: var(--yz-kucuk);
  font-weight: 600;
  color: var(--murekkep-2);
}
.st-bant {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--f-mono);
  font-size: var(--yz-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vurgu-koyu);
}
.st-kart small {
  grid-column: 1;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}
/* Yön işareti RENKLE değil KELİMEYLE veriliyor; yeşil/kırmızı yasak
   (§1.3) ve renk körlüğünde yön okunmaz. Vurgu yalnız yükselişte. */
.st-fark.yukari { color: var(--vurgu-koyu); font-weight: 600; }
.st-fark.asagi { color: var(--murekkep-2); }
.st-alt {
  display: block;
  margin-top: 9px;
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}
.st-kart.bitti { background: linear-gradient(180deg, var(--isik), var(--kagit-3) 96%); }

/* SONUÇ — bandın kendisi ekranın en büyük ögesi. Rakam değil BANT
   büyüyor: «9/12» kaç soru bildiğini söyler, «A2.1» nerede olduğunu. */
.st-sonuc { text-align: center; }
.st-sonuc-bant {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--f-mono);
  font-size: var(--yz-dev);
  font-weight: 600;
  letter-spacing: var(--ls-dev);
  color: var(--vurgu-koyu);
}
.st-sonuc-not {
  display: block;
  margin-bottom: 4px;
  font-size: var(--yz-orta);
  color: var(--murekkep-2);
}
.st-olcu {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 14px;
}
.st-olcu span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}
.st-olcu b {
  font-family: var(--f-mono);
  font-size: var(--yz-buyuk);
  color: var(--murekkep);
}
.st-uyari {
  margin: 12px 0 0;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
}

/* Beceri dökümü — liste değil ÖLÇÜ SATIRI: solda beceri, sağda kesir.
   Çubuk çizmiyoruz, dört satırda dört çubuk gürültü olurdu. */
.st-beceri { margin: 0; padding: 0; list-style: none; }
.st-beceri li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--ayrac);
}
.st-beceri li:last-child { border-bottom: 0; }
.st-beceri b { font-size: var(--yz-govde); font-weight: 600; }
.st-beceri span {
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}

/* EĞRİ — son ölçümler. Eksen yok, ızgara yok: on dört noktalık bir
   çizgide eksen okunmaz, yalnız YÖN okunur. İki ucun bandı yazıyor. */
.st-egri {
  margin-top: 4px;
  padding: 12px 14px 8px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--isik);
}
.st-egri svg {
  display: block;
  width: 100%;
  height: 54px;
  overflow: visible;
}
.st-egri polyline {
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.st-egri-et {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.st-egri-et i {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-style: normal;
  color: var(--murekkep-3);
}

/* Eğri görünürken bir kez çiziliyor. Duruş hâli = çizilmiş hâl:
   indirgenmiş harekette çizgi olduğu gibi duruyor. */
@media (prefers-reduced-motion: no-preference) {
  .st-egri polyline {
    stroke-dasharray: 400;
    animation: st-ciz var(--dur-uzun) var(--ev) backwards;
  }
}
@keyframes st-ciz { from { stroke-dashoffset: 400; } }

/* ═══ GÖRSEL GRAMER — kuralı çizen katman (2026-09-09) ═══
   Motor `app/gramer-gorsel.js`. Yedi ilkel, hepsi burada giydiriliyor:
   alan (Feldermodell) · akis · izgara · mekan · zaman · ikili · merdiven.
   Diyagramların hiçbiri resim DEĞİL — kod. Karanlık temada kendini
   boyuyor, metni seçilebiliyor, ekran okuyucu okuyabiliyor. */
.gg {
  margin: 16px 0;
  padding: 14px 14px 12px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--isik);
}
.gg-bas {
  margin-bottom: 12px;
  font-size: var(--yz-govde);
  font-weight: 600;
  color: var(--murekkep);
}
.gg-not {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--ayrac);
  font-size: var(--yz-kucuk);
  line-height: 1.5;
  color: var(--murekkep-2);
}
.gg-tr {
  margin: 10px 0 0;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}
/* ETİKET MONO DEĞİL. Martian Mono 11px'te ~8px/karakter yer kaplıyor;
   «Vorfeld» 56px istiyor ama sütunun iç genişliği 53px — etiket
   «Vorfe/ld» diye ikiye bölünüyordu (390px'te ölçüldü). Gövde fontu
   aynı puntoda ~5,5px/karakter: 39px, rahat sığıyor. Mono sayı içindir;
   alan adı gramer terimi, sayı değil. */
.gg-et {
  display: block;
  overflow-wrap: break-word;
  font-size: var(--yz-mikro);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--murekkep-3);
}
/* Hâl / tür rozeti — küçük ama okunur; 11px tabanın altına inmiyor. */
.gg-rozet {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-style: normal;
  color: var(--murekkep-2);
}

/* ── ALAN · Feldermodell ──────────────────────────────────────────
   SÖZLEŞME: alan diyagramı HER ZAMAN dört alandır (Vorfeld · sol
   çerçeve · Mittelfeld · sağ çerçeve). Sütun oranları buna göre;
   beşinci alan eklenirse ızgara bozulur. */
.gg-alan-satir {
  display: grid;
  /* SÜTUNLAR ORANLI, ETİKETLER KISA. İki tur ölçüm gerekti (390px):
     ① .85/.75/1.7/.8 oranıyla «Morgen» kelime ORTASINDAN kırılıyor ve
       «çekimli fiil» etiketi kırpılıyordu;
     ② `auto auto 1fr auto` denendi, DAHA KÖTÜ: `auto` sütunlar
       max-content'i alıp `fr` sütununu açlıktan öldürdü — Mittelfeld
       tek harf genişliğine düşüp metin dikey dizildi (748px yükseklik).
     Doğrusu: oranlı sütun + etiketi ≤8 karakterde tutmak. Etiket uzarsa
     kırpma değil sarma olur (`.gg-et` overflow-wrap). Alan verisine
     uzun etiket yazma — sözleşme bu. */
  /* ORANLAR ÖLÇÜMLE DENGELENDİ (390px). Eski oran (1/.85/1.6/.95)
     2. sütuna 58px veriyordu; iç genişlik 42px, en uzun etiket
     «werden» 41px — bir piksel pay kaldığı için etiket tiresiz
     kırılıyordu («werde/n»). Yeni oranda iç genişlikler 48/51/85/51,
     en uzun etiketler 40/41/52/42: her sütunda en az 7px pay var. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 5px;
}
.gg-hucre {
  min-width: 0;
  padding: 8px 7px 9px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-xs);
  background: var(--kagit-3);
}
.gg-hucre b {
  display: block;
  margin-top: 3px;
  font-size: var(--yz-kucuk);
  font-weight: 600;
  line-height: 1.35;
  /* UZUN ALMANCA KELİME TİRELENİR, KIRILMAZ. Ölçüm (390px, 51
     diyagram): 22 diyagramda tek kelime iki satıra bölünüyordu —
     «repariert» 13px yarı-kalında ~66px, çerçeve sütunu ~63px.
     `hyphens: auto` + `lang="de"` sözlükten hecelemeyi getiriyor
     (re-pa-riert): Almanca okurun alışık olduğu tipografi, kırık
     değil. `break-word` yalnız hecelenemeyen kelimede son çare. */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Çerçevenin iki ucu — cümlenin taşıyıcı ayakları. Tek vurgu rengi,
   iki uçta aynı: göz ikisinin bir çift olduğunu renkten anlıyor. */
.gg-hucre.k {
  border-color: var(--vurgu);
  background: var(--kagit-2);
}
.gg-hucre.k b { color: var(--vurgu-koyu); }
.gg-hucre.k .gg-et { color: var(--vurgu-koyu); }
.gg-hucre.bos { background: transparent; border-style: dashed; }
.gg-hucre.bos b { color: var(--murekkep-3); font-weight: 400; }

/* Parantez: iki ucu alttan saran köşeli ayraç. Izgaranın kendisiyle
   aynı sütun şablonunda duruyor, o yüzden metin uzayınca kaymıyor. */
/* Parantez AYNI ızgaranın ikinci satırında: ayrı ızgara olsaydı
   sütunlar içerikten boyutlandığı için iki ızgara aynı genişlikte
   olmazdı ve parantez kayardı. Böyle hizalama garanti. */
.gg-klammer {
  grid-row: 2;
  grid-column: var(--gg-a) / var(--gg-b);
  padding-top: 7px;
  border: 2px solid var(--vurgu);
  border-top: 0;
  border-radius: 0 0 var(--r-xs) var(--r-xs);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  line-height: 1.4;
  color: var(--vurgu-koyu);
}

/* ── AKIŞ · hâllerin yönü ───────────────────────────────────────── */
.gg-akis-satir {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
}
.gg-oge {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-xs);
  background: var(--kagit-3);
}
.gg-oge b { font-size: var(--yz-kucuk); font-weight: 600; overflow-wrap: anywhere; }
.gg-oge.hal { border-color: var(--murekkep-3); }
.gg-soru {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-style: normal;
  color: var(--murekkep-3);
}
.gg-ok {
  align-self: center;
  flex: none;
  width: 18px; height: 18px;
  color: var(--murekkep-3);
}
.gg-ok svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── IZGARA · çekim tablosu ──────────────────────────────────────
   Başlık hücresi artikelin rengini alıyor: göz sütunu renkten
   buluyor, satır satır okumak gerekmiyor. Renkler sitenin artikel
   koduyla aynı (--der/--die/--das) — ikinci bir sistem yok. */
/* ETİKET SÜTUNU DAHA GENİŞ. Ölçüm: eşit sütunlarda «1. kişi (ben)»
   gibi satır etiketleri hücreden taşıyordu (51 diyagramın 16'sında
   yatay taşma). Etiket 1.3 pay alıyor, veri hücreleri eşit bölüşüyor. */
.gg-ig-ag {
  display: grid;
  /* Şablonu JS satır içinde veriyor (sütun sayısı veriden geliyor ve
     `repeat()` değişken kabul etmiyor). Buradaki yalnız yedek. */
  grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.gg-ig-kose { }
.gg-ig-bas, .gg-ig-et, .gg-ig-h {
  min-width: 0;
  padding: 7px 5px;
  border-radius: var(--r-xs);
  text-align: center;
  font-size: var(--yz-kucuk);
  hyphens: auto;
  overflow-wrap: break-word;
}
.gg-ig-bas {
  background: var(--kagit-3);
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--murekkep-2);
}
.gg-ig-bas.c-der { background: var(--der); color: var(--alan-metin); }
.gg-ig-bas.c-die { background: var(--die); color: var(--alan-metin); }
.gg-ig-bas.c-das { background: var(--das); color: var(--alan-metin); }
.gg-ig-et {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}
.gg-ig-h { background: var(--kagit-3); font-weight: 600; }
/* Vurgulanan hücre = «değişen tek şey burası». Renk değil KENAR ile
   işaretleniyor; dolgu renkleri zaten cinsiyete ayrılmış. */
.gg-ig-h.vurgu {
  box-shadow: inset 0 0 0 2px var(--vurgu);
  color: var(--vurgu-koyu);
}

/* ── MEKÂN · wo? ↔ wohin? ───────────────────────────────────────── */
.gg-edat {
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  line-height: 1.7;
  color: var(--murekkep-3);
}
.gg-mekan-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gg-mekan-yan {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
}
.gg-mekan-yan b { font-size: var(--yz-kucuk); font-weight: 600; overflow-wrap: anywhere; }
.gg-mekan-yan .gg-rozet { align-self: flex-start; }
.gg-mekan-soru {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--vurgu-koyu);
}
/* Sahne: kutu + nokta. Duranda nokta içeride, gidende dışarıda ve
   içeri bir yol çiziliyor. Kural yazıyla değil KONUMLA anlatılıyor. */
.gg-sahne { position: relative; display: block; height: 46px; }
.gg-kutu {
  position: absolute;
  right: 4px; top: 6px;
  width: 52px; height: 34px;
  border: 2px solid var(--murekkep-3);
  border-radius: var(--r-xs);
}
.gg-nokta {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: var(--r-tam);
  background: var(--vurgu);
}
.gg-nokta.iceride { right: 25px; top: 17px; }
.gg-nokta.disarida { left: 2px; top: 17px; }
.gg-yol {
  position: absolute;
  left: 12px; top: 22px;
  width: 34px; height: 2px;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu));
}
.gg-yol::after {
  content: '';
  position: absolute;
  right: -1px; top: -3px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--vurgu);
  border-right: 2px solid var(--vurgu);
  transform: rotate(45deg);
}

/* ── ZAMAN · çizgi ──────────────────────────────────────────────── */
.gg-zaman-ag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 15px;
}
.gg-eksen {
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--ayrac);
}
.gg-durak { position: relative; display: block; }
.gg-durak .gg-pin {
  position: absolute;
  left: -15px; top: 5px;
  width: 9px; height: 9px;
  border-radius: var(--r-tam);
  border: 2px solid var(--vurgu);
  background: var(--isik);
}
.gg-durak b {
  display: block;
  font-size: var(--yz-kucuk);
  font-weight: 600;
  color: var(--murekkep);
}
.gg-durak .gg-tr {
  display: block;
  margin: 0;
  font-size: var(--yz-mikro);
  font-style: normal;
  color: var(--murekkep-3);
}

/* ── İKİLİ · karşıtlık ──────────────────────────────────────────── */
.gg-ikili-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gg-ikili-yan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
}
.gg-ikili-yan > b {
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  color: var(--vurgu-koyu);
}
.gg-kural { font-size: var(--yz-kucuk); line-height: 1.45; color: var(--murekkep-2); }
.gg-ornek { font-size: var(--yz-kucuk); font-weight: 600; }
.gg-ikili-yan .gg-tr { margin: 0; font-size: var(--yz-mikro); }

/* ── MERDİVEN · derecelendirme ──────────────────────────────────── */
.gg-merdiven-ag { display: flex; align-items: flex-end; gap: 6px; }
.gg-basamak {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Basamak yüksekliği sırayla artıyor: derece görsel olarak yükseliyor. */
  padding: calc(8px + var(--gg-i) * 6px) 8px 9px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  border-bottom: 0;
  background: var(--kagit-3);
  text-align: center;
}
.gg-basamak b { font-size: var(--yz-kucuk); font-weight: 600; overflow-wrap: anywhere; }
.gg-basamak:last-child { background: var(--kagit-2); border-color: var(--vurgu); }
.gg-basamak:last-child b { color: var(--vurgu-koyu); }

/* Dar telefonda iki sütunlu diyagramlar alt alta iner — 390px'te iki
   sütun 160px'e düşüyor ve Almanca cümle kelime kelime kırılıyor. */
@media (max-width: 359px) {
  .gg-mekan-ag, .gg-ikili-ag { grid-template-columns: 1fr; }
}

/* Diyagram görününce bir kez kuruluyor: hücreler soldan sağa geliyor,
   yani cümlenin okunma yönü. Duruş hâli = kurulmuş hâl. */
@media (prefers-reduced-motion: no-preference) {
  .gg-alan-satir .gg-hucre { animation: gg-gel var(--dur-kisa) var(--ev) backwards; }
  .gg-alan-satir .gg-hucre:nth-child(2) { animation-delay: 0.05s; }
  .gg-alan-satir .gg-hucre:nth-child(3) { animation-delay: 0.1s; }
  .gg-alan-satir .gg-hucre:nth-child(4) { animation-delay: 0.15s; }
  .gg-klammer > span { animation: gg-ac var(--dur-yavas) var(--ev) 0.2s backwards; }
}
@keyframes gg-gel { from { opacity: 0; transform: translateX(-6px); } }
@keyframes gg-ac { from { opacity: 0; } }

/* Şema işareti — konu satırında «bu konunun çizimi var» rozeti.
   Renk değil KELİME taşıyor: renk körlüğünde de okunur, ve rozetin
   kendisi bir vaat (satıra girince diyagram ilk slaytta karşılıyor). */
.konu-sema {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-style: normal;
  color: var(--vurgu-koyu);
}

/* ═══ GÖRSELLİ HİKÂYELER (2026-09-09) ═══
   Reçete `app/YONTEM.md`; motor `app/hikaye.js`. Duolingo Stories'in
   kalıbı (avatar + balon) ama üç farkla: ağız ses olayına bağlı
   oynuyor, çeviri SABİT YÜKSEKLİKLİ yuvada açılıyor, bölüm açılmadan
   kapsam oranı gösteriliyor. */

/* ── KAPAK ── */
.hk-bas { text-align: center; margin-bottom: 6px; }
.hk-kisiler { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.hk-kisiler img {
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  box-shadow: 0 0 0 1px var(--ayrac);
}
.hk-ozet {
  margin: 10px 0 0;
  font-size: var(--yz-kucuk);
  line-height: 1.55;
  color: var(--murekkep-2);
}

/* KAPSAM ÖLÇER — § 3.2. Renk değil KELİME taşıyor; oran mono çünkü
   ölçüm sayısı, süs değil. */
.hk-kapsam {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  font-size: var(--yz-mikro);
  color: var(--murekkep-2);
}
.hk-kapsam i {
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 600;
  color: var(--murekkep);
}
.hk-kapsam.ideal { background: var(--kagit-2); }
.hk-kapsam.ideal i { color: var(--vurgu-koyu); }
.hk-kapsam.erken { border: 1px dashed var(--ayrac); background: transparent; }
.hk-sat .sy-ad { min-width: 0; }

/* ── OKUYUCU ── */
.hk-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}
.hk-bolum-ad { font-size: var(--yz-kucuk); font-weight: 600; color: var(--murekkep-2); }
.hk-hiz {
  appearance: none;
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--isik);
  color: var(--murekkep-2);
  font: inherit;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  cursor: pointer;
}
.hk-hiz[aria-pressed="true"] {
  border-color: var(--vurgu);
  background: var(--kagit-2);
  color: var(--vurgu-koyu);
}
.hk-akis { display: flex; flex-direction: column; gap: 12px; }

/* REPLİK — avatar + balon. Okunmuş replikler soluyor ama KAYBOLMUYOR:
   bağlam görünür kalmazsa öğrenci hikâyeyi değil cümleyi okur. */
.hk-replik { display: flex; align-items: flex-start; gap: 9px; opacity: 0.55; }
.hk-replik.aktif { opacity: 1; }
.hk-yuz {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-tam);
  overflow: hidden;
  background: var(--kagit-3);
  box-shadow: 0 0 0 1px var(--ayrac);
}
.hk-yuz img { display: block; width: 100%; height: 100%; }
/* Anlatıcı yüzsüz: sesi var, bedeni yok. Boş daire yerine ince çizgi. */
.hk-anlatici {
  align-self: center;
  width: 44px; height: 2px;
  border-radius: var(--r-tam);
  background: var(--ayrac);
  box-shadow: none;
}
.hk-balon {
  flex: 1;
  min-width: 0;
  padding: 11px 13px 8px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-plaka);
  background: var(--isik);
}
.hk-replik.aktif .hk-balon { border-color: var(--murekkep-3); }
.hk-de {
  margin: 0;
  font-size: var(--yz-orta);
  line-height: 1.5;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Sözlüğü olan kelime dokunulabilir: altı noktalı, çünkü düz altçizgi
   bağlantı demek ve burada gidilecek bir yer yok. */
.hk-kel {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted var(--murekkep-3);
  text-underline-offset: 3px;
  cursor: pointer;
}
.hk-kel.acik { text-decoration: none; color: var(--vurgu-koyu); font-weight: 600; }
.hk-anlam {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--r-tam);
  background: var(--kagit-2);
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
}
.hk-denetim { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hk-ses, .hk-cevir {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  font: inherit;
  font-size: var(--yz-mikro);
  cursor: pointer;
}
.hk-ses { width: 34px; padding: 4px; }
.hk-ses svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hk-cevir[aria-expanded="true"] { border-color: var(--vurgu); color: var(--vurgu-koyu); }

/* ÇEVİRİ YUVASI — § 3.3. Yükseklik BAŞTAN ayrılmış: çeviri açılınca
   altındaki her şey aşağı kaymıyor. Satori Reader'ın satır-içi kalıbı,
   yerleşim kaymasız hâli. */
/* Yuva TEK SATIRLIK çeviriye göre ayrılmış. 34px'te her replikte
   ~47px boş alan kalıyordu (ölçüldü: ekranda üç replik görünüyor,
   140px'i boşluk). 13px/1.45 tek satır 19px; 20px yeter ve 390px'te
   çevirilerin neredeyse tamamı tek satır. İki satırlık çeviride
   yalnız o replik büyür. 20px denendi ve 5px kaydı (ölçüldü) — söz
   verilen şey SIFIR kayma, 6px yer için bozulmaz. */
.hk-yuva {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--ayrac);
}
.hk-tr { font-size: var(--yz-kucuk); line-height: 1.45; color: var(--murekkep-2); }
.hk-not {
  margin: 8px 0 0;
  font-size: var(--yz-mikro);
  line-height: 1.5;
  color: var(--murekkep-3);
}

/* ── ALIŞTIRMA ── */
.hk-alistirma {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--murekkep-3);
  border-radius: var(--r-md);
  background: var(--kagit-3);
}
.hk-al-et {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}
.hk-al-soru { margin: 0 0 12px; font-size: var(--yz-orta); font-weight: 600; }
.hk-buyuk-ses {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 12px;
  border: 0;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hk-buyuk-ses:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11); }
.hk-buyuk-ses svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hk-eylem { margin-top: 16px; }

/* ── LİSTE + SONUÇ ── */
.hk-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hk-kart {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 4px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hk-kart:active { transform: translateY(4px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11); }
.hk-kapak { display: flex; gap: -6px; margin-bottom: 4px; }
.hk-kapak img { border-radius: var(--r-tam); background: var(--kagit-3); box-shadow: 0 0 0 1px var(--ayrac); }
.hk-kapak img + img { margin-left: -14px; }
.hk-kart b { font-size: var(--yz-govde); }
.hk-kart small { font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.hk-olcu { font-family: var(--f-mono); font-size: var(--yz-mikro); font-style: normal; color: var(--murekkep-3); }
.hk-sonuc-olcu { display: flex; justify-content: center; gap: 22px; margin-top: 12px; }
.hk-sonuc-olcu span { display: flex; flex-direction: column; gap: 2px; font-size: var(--yz-mikro); color: var(--murekkep-3); }
.hk-sonuc-olcu b { font-family: var(--f-mono); font-size: var(--yz-buyuk); color: var(--murekkep); }
.hk-kelime-ag { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-kelime {
  padding: 4px 10px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-tam);
  background: var(--isik);
  font-size: var(--yz-kucuk);
}

/* Yeni replik yumuşak giriyor; duruş hâli = girmiş hâl. */
@media (prefers-reduced-motion: no-preference) {
  .hk-replik.aktif { animation: hk-gel var(--dur-kisa) var(--ev) backwards; }
}
@keyframes hk-gel { from { opacity: 0; transform: translateY(6px); } }

/* ═══ DERS İÇİ KONTROL (2026-09-09) ═══
   Ders okuma destesi olmaktan çıktı: her iki bölümde bir alıştırma
   geliyor. Kalıp Deutsche Welle'nin ücretsiz A1 kursundan birinci
   elden alındı (Nicos Weg gezildi): sahne → İŞİ YAP → kural.
   Oradan üç kural: ceza yok · «cevabı göster» çıkış kapısı var ·
   puan «kaç görev çözüldü» diye sayılıyor. */
/* Kontrol slaydı tek blok: soru + şıklar + bant birlikte ortalanıyor.
   Ayrı ayrı esnek çocuk olduklarında bant şıklardan ~60px kopuyordu. */
.slayt-kontrol .slayt-icerik {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.slayt-kontrol .alt-yapisik { margin: 0; }
.dk-soru {
  font-size: var(--yz-h3);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}
.dk-tr {
  margin: 0 0 14px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}
/* «Cevabı göster» — kasten SÖNÜK. Çıkış kapısı görünür olmalı ama
   birinci seçenek gibi durmamalı; DW'de de ikincil bir bağ. */
.dk-goster {
  appearance: none;
  align-self: center;
  margin-top: 14px;
  padding: 8px 16px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-tam);
  background: none;
  color: var(--murekkep-3);
  font: inherit;
  font-size: var(--yz-kucuk);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dk-goster:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
.dk-son:empty { display: none; }
.dk-son { margin-top: 12px; }
.dk-aciklama {
  padding: 0 14px 12px;
  font-size: var(--yz-kucuk);
  line-height: 1.5;
  color: var(--murekkep-2);
}
/* Nötr bant: «cevabı gördün» — ne kutlama ne uyarı. Yanlış bandının
   uyarı rengini kullanmak cezalandırma gibi okunurdu. */
.bant-notr {
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
  border: 1px solid var(--ayrac);
}
.bant-notr .bant-ic { padding: 10px 14px; }
.bant-notr b { font-size: var(--yz-govde); color: var(--murekkep-2); }

/* ═══ VAAT SLAYDI — dersin ilk ekranı (2026-09-09) ═══
   DW'nin «Hier lernst du» kalıbı. Ders adı gramer etiketi değil, işin
   kendisi. Ekranda tek fikir var: bunu bitirince ne yapabileceksin. */
.slayt-vaat .slayt-icerik {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vaat-bas {
  margin: 0 0 14px;
  font-size: var(--yz-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.vaat-alt {
  margin: 0 0 12px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
}
.vaat-liste { margin: 0; padding: 0; list-style: none; }
.vaat-liste li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--ayrac);
  font-size: var(--yz-orta);
  line-height: 1.45;
}
.vaat-liste li:last-child { border-bottom: 0; }
/* İşaret onay değil OK: henüz yapmadın, yapacaksın. */
.vaat-liste li::before {
  content: '';
  position: absolute;
  left: 2px; top: 18px;
  width: 12px; height: 2px;
  border-radius: var(--r-tam);
  background: var(--vurgu);
}

/* ══ § 86 · BÖLÜM BANDI — referans söküldü, tahmin edilmedi ═════════
   Kaynak ekranlar diskte: REFERANS-APP/busuu/05.png («Stay on track»)
   ve REFERANS-APP/wlingua/02.png («Learn»). İkisinde de ÖLÇÜLEN ortak
   davranış şu: ünite başlığı konu listesiyle AYNI kâğıtta durmuyor,
   kendi zeminine oturuyor. «Hangi bölümdeyim, ne kadarı bitti»
   sorusu listeye bakmadan cevaplanıyor.

   Bizde başlık listeyle aynı kâğıttaydı — 21px'lik bir satır, üstünde
   11px'lik gri bir etiket. Ekranın en önemli içeriği, en sessiz parçası.

   Bant TAM-EN: pastel aile burada ekranı değil ŞERİDİ boyuyor. Bugün
   nötr kalmak zorunda (pastel «bir yere girdim» demek, § EKRAN KİMLİĞİ);
   ama bandın kendi zemini olması o kuralı bozmuyor, tersine üstteki
   şeritle gövde arasında ilk basamağı kuruyor.

   Metin `--murekkep-2`: pastel bantlar üstünde `--murekkep-3` 3,33-3,74:1
   ölçüldü, gövde metni eşiğinin altında (§ EKRAN KİMLİĞİ ölçümü). */
/* `.yol` iki ekranda birden kullanılıyor: eski zikzak yol ekranı
   (`.yol-durak`) ve Bugün'ün bölüm listesi. Eskisi `align-items: center`
   olduğu için bant ESNEK ÖĞE olarak içeriği kadar daralıyordu —
   ölçüldü: 295px, ekran 390px. Bant bu yüzden kendini geriyor; üst
   dolgu da yalnız bandın bulunduğu yolda sıfırlanıyor ki şerit
   üst çubuğa yapışsın. */
.yol:has(> .yol-bas) { padding-top: 0; }
.yol-bas {
  align-self: stretch;
  margin-top: calc(var(--pay-ust) * -1);
  padding: 16px var(--pay) 17px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--ped-yol);
}
.yol-bas .yol-no,
.yol-bas small,
.yol-bas .yol-say { color: var(--murekkep-2); }
/* Çubuğun yatağı bandın kendi koyu tonundan: kâğıt tonu (`--kagit-3`)
   pastelin üstünde kayboluyordu, dolu ile boş ayırt edilemiyordu.
   Sayı çubuğun ALTINA değil YANINA geçiyor — Busuu'da da «2/4 ders
   bitti» ilerlemeyle aynı satırda okunuyor; alt satıra düşünce bant
   dört satır boyu uzuyor ve çubuk sahipsiz kalıyordu (ölçüldü: bant
   132px). Yükseklik `.cubukcuk` ile aynı (6px) — yeni ölçü değil. */
.yol-bas .yol-oran {
  grid-column: 1;
  align-self: center;
  height: 6px;
  background: var(--ped-yol-bant);
}
.yol-bas .yol-say { grid-column: 2; margin-top: 11px; align-self: center; }

/* ══ § 87 · KÜTÜPHANE IZGARASI ════════════════════════════════════
   Referans: REFERANS-APP/wlingua/03.png («Discover») — iki sütun,
   kutucuk başına etiket + sayı; kütüphanenin ağırlığı tek bakışta.
   Bizde aynı bilgi gri bir cümlede duruyordu: «24 okuma metni · 104
   gramer konusu · sertifika denemeleri». Cümle okunmuyor, sayı görülüyor.

   Renk: her kutucuk GİRECEĞİ EKRANIN pasteline oturuyor. Böylece
   pastel aile bir süs değil gezinme işareti oluyor — öğrenci kutucuğun
   rengiyle varacağı ekranın rengini önceden tanıyor.

   Basma dili yeni icat DEĞİL: gölge ve etek `.secenek`ten birebir
   alındı (§ Bileşen kaynağı sırası — var olanın varyantı). */
.ktp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 2px 0 24px;
}
.ktp-kut {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 14px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ktp-ton, var(--kagit-2));
  color: var(--murekkep);
  font: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 4px 0 var(--ktp-etek, var(--ayrac));
  transition: transform var(--dur) var(--ev), box-shadow var(--dur) var(--ev);
}
.ktp-kut:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 2px 0 var(--ktp-etek, var(--ayrac));
  transition-duration: var(--dur-bas);
}
.ktp-kut:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
/* Sayı önce okunur, ad sonra — Wlingua'da da hiyerarşi bu sırada. */
.ktp-kut b {
  display: block;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ktp-kut i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: var(--yz-govde);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ktp-kut small {
  display: block;
  margin-top: 1px;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-2);
}
.ktp-kut[data-ktp="kelime"]  { --ktp-ton: var(--ped-kelime);  --ktp-etek: var(--ped-kelime-bant); }
.ktp-kut[data-ktp="kalip"]   { --ktp-ton: var(--ped-kalip);   --ktp-etek: var(--ped-kalip-bant); }
.ktp-kut[data-ktp="dinle"]   { --ktp-ton: var(--ped-dinle);   --ktp-etek: var(--ped-dinle-bant); }
.ktp-kut[data-ktp="okuma"]   { --ktp-ton: var(--ped-okuma);   --ktp-etek: var(--ped-okuma-bant); }
.ktp-kut[data-ktp="konusma"] { --ktp-ton: var(--ped-konusma); --ktp-etek: var(--ped-konusma-bant); }
.ktp-kut[data-ktp="gramer"]  { --ktp-ton: var(--ped-gramer);  --ktp-etek: var(--ped-gramer-bant); }

@media (prefers-reduced-motion: reduce) {
  .ktp-kut { transition: none; }
  .ktp-kut:active { transform: none; }
}

/* ══ § 88 · SERPİNTİ — doğru şıktan çıkan kırpıntı ════════════════
   Operatör (2026-09-12): «özel premium butonlar efektler istiyorum,
   butonlardan çıkan falan filan». Referans: Duolingo doğru şıkta
   kıvılcım atıyor, Finch parçacık savuruyor.

   Malzeme YENİ DEĞİL: `.konfeti`nin kırpıntısı — dikdörtgen kâğıt
   parçası, paletten üç ton. Neon kıvılcım, parıltı, yıldız yok;
   bu uygulamanın dünyası kâğıt ve kil (DESIGN.md § 1).

   Katman `position: fixed`: kırpıntıyı düğmenin İÇİNE koymak köşe
   yuvarlaklığına ve `.dugme`nin `overflow: hidden`ına takılıyordu.
   Sabit katman hem kırpılmayı hem kaydırmada kaymayı çözüyor.
   `pointer-events: none` — hiçbir dokunuşu yutmuyor.

   Süre ızgaradan (`--dur-uzun`), eğri tek ev eğrisi (`--ev`).
   İndirgenmiş harekette katman HİÇ yaratılmıyor (app.js `serpil`),
   ayrıca burada da kapatıldı — iki kapı, çünkü bu saf süs. */
.serp-kat {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.serp-kat i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--asit);
  animation: gnu-serp var(--dur-uzun) var(--ev) forwards;
}
.serp-kat i:nth-child(3n+1) { background: var(--vurgu); }
.serp-kat i:nth-child(3n+2) { background: var(--kagit-3); }
.serp-kat i:nth-child(4n)   { height: 12px; }
@keyframes gnu-serp {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.45) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--bo)) rotate(var(--dn)); }
}
@media (prefers-reduced-motion: reduce) {
  .serp-kat { display: none; }
}

/* ══ § 89 · İLERLEME — grafik ve satır listesi ════════════════════
   Operatör (2026-09-12): «grafikler analizler». Referans iki Lingvist
   ekranı: REFERANS-APP/lingvist/03.png (simge + etiket + sayı satır
   listesi) ve 04.png (zaman grafiği). Veri zaten defterdeydi
   (`genau:xp-gecmis`, `genau:log`), ekranda hiç yoktu.

   Grafik SÜTUN, çizgi değil: 14 gün az sayıda veri noktası, çizgi
   grafik burada trend uydurur. Sütunda «o gün çalıştım / çalışmadım»
   tek bakışta okunur — Duolingo'nun hafta şeridiyle aynı bilgi,
   iki hafta boyu.

   Sütun yüksekliği `--oran`dan geliyor, yani `[data-h-w]` süpürmesine
   bağlı: ekrana girince doluyor, indirgenmiş harekette anında dolu.
   Boş günün de bir tabanı var (`.bos i`) — sıfır yükseklik sütunu
   yok eder, «veri yok» ile «o gün sıfır» karışırdı. */
.grf {
  margin: 4px 0 12px;
  padding: 14px 16px 12px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--kagit);
}
.grf-bas {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.grf-bas b {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.grf-bas span { font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.grf-govde {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
}
/* Sütun GERÇEK düğme: dokunulan gün üstteki okumaya geçiyor
   (operatör: «butonlardan çıkan grafikler analizler»). Görünüşü
   düğmeye benzemiyor ama davranışı öyle — bu yüzden odak halkası
   ve seçili durumu ŞART, yoksa klavyeyle gezen kaybolur. */
.grf-sut {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  min-width: 0;
}
.grf-sut:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; border-radius: var(--r-xs); }
/* Seçili sütun HALKAYLA değil RENKLE işaretleniyor: sıfır günün
   çubuğu 3px taban, etrafındaki 2px halka orada küçük bir hap gibi
   okunuyordu (ekran görüntüsünde görüldü). Mürekkep dolgu her
   yükseklikte aynı şeyi söylüyor. */
.grf-sut.secili i { background: var(--murekkep-2); }
.grf-sut.secili em { color: var(--murekkep); font-weight: 700; }
.grf-sut i {
  display: block;
  height: var(--oran, 0);
  min-height: 3px;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: var(--asit);
  transition: height var(--dur-yavas) var(--ev);
}
.grf-sut.bos i { background: var(--kagit-3); }
.grf-sut.bugun i { background: var(--vurgu); }
.grf-sut em {
  display: block;
  margin-top: 6px;
  font: 600 10px/1 var(--f-mono);
  font-style: normal;
  text-align: center;
  color: var(--murekkep-3);
}
.grf-sut.bugun em { color: var(--vurgu-koyu); }
@media (prefers-reduced-motion: reduce) {
  .grf-sut i { transition: none; }
}

/* Satır listesi — Lingvist'in «My progress» ritmi: solda ne, sağda
   kaç. Sayı sağa dayalı ve tabular: göz sütun hâlinde tarıyor. */
.ist {
  margin: 0 0 18px;
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--kagit);
  overflow: hidden;
}
.ist-sat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ayrac);
}
.ist-sat:last-child { border-bottom: 0; }
.ist-ad {
  font-size: var(--yz-govde);
  font-weight: 600;
  color: var(--murekkep);
}
.ist-ad small {
  display: block;
  margin-top: 1px;
  font-size: var(--yz-kucuk);
  font-weight: 400;
  color: var(--murekkep-3);
}
.ist-deger {
  font-size: var(--yz-buyuk);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ══ § 90 · DURUM PULU ŞERİDİ ═════════════════════════════════════
   Referans: Seedlang (REFERANS-APP/seedlang/03.png · 06.png) — ders
   üstünde soru başına bir pul. Düz çubuk «ne kadar kaldı» der; pul
   şeridi ayrıca «NASIL gidiyorum» der. Aynı yerde iki kat bilgi,
   sıfır ek yükseklik.

   Renkler yeni değil: doğru `--asit`, yanlış `--vurgu`, bekleyen
   `--kagit-3`, sıradaki mürekkep çerçeve. Sıradakinin çerçevesi ŞART —
   renk körlüğünde doğru/yanlış ayrımı zayıflar, «neredeyim» sorusu
   biçimle de cevaplanmalı.

   Yükseklik `.ders-yol` ile aynı (6px): şerit çubuğun yerine geçiyor,
   ders başlığının ritmi değişmiyor. */
.ders-pul {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  min-width: 0;
}
.ders-pul i {
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  transition: background var(--dur-kisa) var(--ev);
}
.ders-pul i.d { background: var(--asit); }
.ders-pul i.y { background: var(--vurgu); }
.ders-pul i.simdi { background: var(--kagit-3); box-shadow: inset 0 0 0 2px var(--murekkep-2); }
@media (prefers-reduced-motion: reduce) {
  .ders-pul i { transition: none; }
}

/* ══ § 91 · AY TAKVİMİ ════════════════════════════════════════════
   Referans: Drops «Your Streak» ay ızgarası. Çubuk grafik «ne kadar»
   der, takvim «hangi günler» der — seriyi kıran boşluk ancak burada
   görünür. Kutu 100% oranında kare; 7 sütun 390px'te 40px'e düşüyor,
   dokunulan şey kutu DEĞİL (oklar) olduğu için 44 kuralı oklara ait. */
.tkv {
  margin-bottom: 22px;
  padding: 14px var(--pay) 12px;
  border-radius: var(--r-md);
  background: var(--ped-kart);
  box-shadow: 0 1px 0 var(--ayrac), 0 6px 18px rgba(43, 34, 24, 0.05);
}
.tkv-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tkv-bas b {
  font-size: var(--yz-buyuk);
  font-weight: 700;
  color: var(--murekkep);
}
.tkv-ok {
  appearance: none;
  width: 44px;
  height: 44px;
  margin: -10px 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-tam);
  background: none;
  display: grid;
  place-items: center;
  color: var(--murekkep-2);
  cursor: pointer;
}
.tkv-ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tkv-ok:disabled { opacity: 0.28; cursor: default; }
.tkv-ok:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
.tkv-hafta,
.tkv-ay {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.tkv-hafta {
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  /* Gün başlıkları takvimin okuma anahtarı; en soluk mürekkepte
     gecede 4,07:1 ölçüldü (11px için eşik 4,5). */
  color: var(--murekkep-2);
  text-align: center;
}
.tkv-gun,
.tkv-bos {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  font-style: normal;
}
.tkv-gun {
  background: var(--kagit-3);
  color: var(--murekkep-3);
}
.tkv-gun b {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 500;
}
/* Çalışılan gün: asit dolgu + koyu mürekkep. Alev değil DOLGU — alev
   ikonu yedi kutuda tekrarlanınca okunmuyor (Drops da düz dolgu). */
.tkv-gun.dolu {
  background: var(--asit);
  color: var(--asit-metin);
}
.tkv-gun.dolu b { font-weight: 700; }
.tkv-gun.bugun { box-shadow: inset 0 0 0 2px var(--vurgu); color: var(--murekkep); }
.tkv-gun.ileri { opacity: 0.4; }
.tkv-alt {
  margin: 10px 0 0;
  font-size: var(--yz-kucuk);
  /* Takvim kabı (`.tkv`) gecede #403c36 — kâğıttan açık bir yüzey; en
     soluk mürekkep orada 4,07:1 veriyor (13px, eşik 4,5). Ölçüm ekran
     pikselinden doğrulandı, CSS zinciriyle değil. */
  color: var(--murekkep-2);
}
.tkv-alt b { color: var(--murekkep); font-weight: 700; }

/* ══ § 92 · ROZET İLERLEMESİ ══════════════════════════════════════
   Referans: Duolingo başarım ızgarası — kilitli rozetin ALTINDA sayı
   ve ince çubuk var. Bizde kilitli pul `opacity:.45 + grayscale(1)`
   ile tümden soluyordu; sayıyı oraya koymak okunmaz bir sayı demekti.
   Çözüm: solma artık kutunun tamamına değil İKONA ve ADA uygulanıyor,
   sayaç tam kontrastta kalıyor. */
.rozet-pul { opacity: 1; filter: none; position: relative; }
.rozet-pul:not(.kazanildi) > i,
.rozet-pul:not(.kazanildi) > b {
  opacity: 0.45;
  filter: grayscale(1);
}
.rozet-say {
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--murekkep-3);
}
.rozet-say b { font-size: inherit; font-weight: 700; color: var(--murekkep-2); }
.rozet-tik {
  margin-top: 2px;
  font-size: var(--yz-mikro);
  font-weight: 600;
  color: var(--vurgu-koyu);
}
.rozet-cubuk {
  width: 100%;
  height: 4px;
  margin-top: 5px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  overflow: hidden;
  display: block;
}
.rozet-cubuk i {
  display: block;
  height: 100%;
  width: var(--oran, 0);
  border-radius: var(--r-tam);
  background: var(--vurgu);
  transition: width var(--dur-yavas) var(--ev);
}
/* Başlığın yanındaki «2/6» — bölüm kaç doldu, tek bakışta. */
.baslik-say {
  margin-left: 8px;
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-weight: 500;
  color: var(--murekkep-3);
  vertical-align: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rozet-cubuk i { transition: none; }
}

/* ══ § 93 · BİLDİRİM ŞERİDİ ═══════════════════════════════════════
   `alert()`in yerine geçen kâğıt şerit. Alt çubuğun ÜSTÜNDE duruyor:
   altında kalsa sekmeleri örterdi. Dokunulmaz (pointer-events yok) —
   ekranda bir şeyi kapatmak için basılması gereken bir engel değil. */
.bildirim {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cubuk-pay) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 95;
  max-width: min(360px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: var(--r-tam);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  font-size: var(--yz-kucuk);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity var(--dur-kisa) var(--ev), transform var(--dur-kisa) var(--ev);
}
.bildirim.ac { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .bildirim { transition: opacity var(--dur-kisa) var(--ev); transform: translate(-50%, 0); }
}

/* ══ § 94 · YOL SATIRININ SAĞ SÜTUNU ══════════════════════════════
   Referans: Busuu · Wlingua ünite listesi — her satırın sağında ölçü
   var. Bizde satır yalnız halka + ad taşıyordu; «nasıl gitmişim»
   sorusu yanıtsızdı. Skor mono ve SAĞA hizalı: göz tek sütunda
   aşağı iniyor. Başlanmamış satırda sağ sütun BOŞ — oraya konan
   «10 soru» altı satırda da aynıydı, bilgi değil gürültüydü. */
.yol-sat i { flex: 1 1 auto; min-width: 0; }
.yol-skor {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--yz-mikro);
  font-variant-numeric: tabular-nums;
  color: var(--murekkep-3);
}
.yol-skor {
  padding: 3px 7px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  font-weight: 600;
}
/* Yarıdan iyi skor asit; altı sönük kalır — «geçtim» ile «geçtim ama
   zor geçtim» aynı görünmesin. */
.yol-skor.iyi { background: var(--asit); color: var(--asit-metin); }

/* ══ § 95 · KELİME HAVUZU — seviyeye göre dağarcık (2026-09-20) ═════
   Referanslar ve kararlar: DESIGN.md § 5.12. Yeni parça üç tane
   (seviye şeridi · halka · kelime karosu); gerisi evdeki satır
   (`.sy-sat`), plaka (`.plakalar`), künye (`.bol-et`) ve seçim
   (`.mod-secim`). Renklerin hepsi token; koyu kart `.seri-kart` ile
   AYNI yüzey (`--alan-2`) — tema ile ters döner, üstündeki hiçbir renk
   sabit değildir (§ 5.9). */

/* SEVİYE ŞERİDİ */
.hv-sv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.hv-sv-h {
  appearance: none;
  border: 0;
  padding: 12px 4px;
  border-radius: var(--r-plaka);
  font: inherit;
  color: var(--murekkep);
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
  transition: transform var(--dur-kisa) var(--ev), box-shadow var(--dur-kisa) var(--ev);
}
.hv-sv-h b { display: block; font-family: var(--f-mono); font-size: var(--yz-orta); font-weight: 600; letter-spacing: 0.02em; }
.hv-sv-h span { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: var(--yz-mikro); color: var(--murekkep-3); font-variant-numeric: tabular-nums; }
.hv-sv-h:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12); transition-duration: var(--dur-bas); }
.hv-sv-h:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.hv-sv-h[aria-selected="true"] { background: var(--levha); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.30); color: var(--asit); }
.hv-sv-h[aria-selected="true"] span { color: var(--alan-metin); }
.hv-sv-h:disabled { cursor: default; opacity: 0.55; box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11); }

/* TEKRAR KARTI — ekranın tek birincil eylemi */
.hv-tekrar {
  display: grid;
  gap: 4px;
  padding: 18px 20px 20px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--alan-2);
  color: var(--alan-2-metin);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.30);
}
.hv-tekrar-et { color: var(--alan-2-vurgu); margin: 0; }
.hv-tekrar-et::after { background: currentColor; opacity: 0.35; }
.hv-tekrar-sayi { font-size: var(--yz-h2); font-weight: 700; letter-spacing: var(--ls-dev); line-height: 1.15; margin-top: 4px; }
.hv-tekrar-alt { font-size: var(--yz-kucuk); opacity: 0.8; }
.hv-duraklar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.hv-duraklar i {
  font-style: normal;
  padding: 8px 4px;
  border-radius: var(--r-xs);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.72;
}
.hv-duraklar i b { display: block; font-size: var(--yz-h3); font-weight: 600; letter-spacing: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hv-duraklar i.dolu { opacity: 1; color: var(--alan-2-vurgu); }
.hv-tekrar .dugme { margin-top: 12px; }

.hv-plakalar { margin-top: 10px; margin-bottom: 8px; }
.hv-olgun { background: var(--asit); border-color: transparent; color: var(--asit-metin); }
.hv-olgun span { color: var(--asit-metin); }
.hv-kunye { margin: 0 0 16px; font-size: var(--yz-kucuk); line-height: 1.5; color: var(--murekkep-3); }
.hv-kunye b { color: var(--murekkep); font-variant-numeric: tabular-nums; }

/* ARAMA */
.hv-ara {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 0 12px;
  min-height: 48px;
  border-radius: var(--r-plaka);
  background: var(--isik);
  box-shadow: 0 0 0 1px var(--ayrac);
  color: var(--murekkep-3);
}
.hv-ara:focus-within { box-shadow: 0 0 0 2px var(--vurgu-koyu); }
.hv-ara svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hv-ara input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--yz-buyuk);      /* 16px altı iOS'ta odaklanınca sayfayı yakınlaştırır */
  color: var(--murekkep);
  appearance: none;
}
.hv-ara input::placeholder { color: var(--murekkep-3); }
.hv-sonuc:empty { display: none; }
.hv-sonuc { margin-bottom: 16px; }
.hv-temalar[hidden], .bol-et[hidden] { display: none; }

/* TEMA SATIRI — `.sy-sat` + küçük resim + halka */
.hv-temalar { margin-top: 10px; margin-bottom: 20px; }
.hv-kucuk {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-xs);
  object-fit: cover;
  background: var(--kagit-2);
  box-shadow: inset 0 0 0 1px var(--ayrac);
}
.hv-kucuk.harf, .hv-karo-g.harf {
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--murekkep-3);
}
.hv-kucuk.harf { font-size: var(--yz-orta); }
.hv-halka { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); }
.hv-halka circle { fill: none; stroke-width: 3.5; }
.hv-halka .iz { stroke: var(--ayrac); }
.hv-halka .dolu { stroke: var(--vurgu); stroke-linecap: round; }
.hv-halka.tam .dolu { stroke: var(--das); }
.hv-halka .tik { fill: none; stroke: var(--das); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 15px 15px; }
.hv-durum {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  color: var(--murekkep-2);
  white-space: nowrap;
}
.hv-durum.hv-d-olgun { background: var(--asit); color: var(--asit-metin); }
.hv-oyun { margin-top: 10px; margin-bottom: 20px; }
.hv-hedef { margin-bottom: 26px; }

/* ARTİKEL RENGİ — ev tokenleri (--der / --die / --das), yalnız artikelin kendisi */
.art { font-style: normal; font-weight: 600; }
.art-der { color: var(--der); }
.art-die { color: var(--die); }
.art-das { color: var(--das); }

/* TEMA EKRANI */
.hv-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hv-ust-et { flex: 1; margin: 0; }
.hv-geri {
  appearance: none;
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-plaka);
  background: var(--isik);
  box-shadow: 0 0 0 1px var(--ayrac);
  color: var(--murekkep-2);
  cursor: pointer;
}
.hv-geri svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv-geri:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.hv-say { font-family: var(--f-mono); color: var(--murekkep); font-variant-numeric: tabular-nums; }
.hv-tema-eylem { margin: 0 0 20px; }

/* KELİME KAROSU — Drops ızgarası, bizim kil */
.hv-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 26px; }
.hv-karo {
  appearance: none;
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  border: 0;
  padding: 8px 8px 12px;
  border-radius: var(--r-md);
  font: inherit;
  color: var(--murekkep);
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
  transition: transform var(--dur-kisa) var(--ev), box-shadow var(--dur-kisa) var(--ev);
}
.hv-karo:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 0 0 rgba(43, 34, 24, 0.12); transition-duration: var(--dur-bas); }
.hv-karo:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.hv-karo-g { width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--r-plaka); object-fit: cover; background: var(--kagit-2); margin-bottom: 8px; }
.hv-karo.yazili .hv-karo-g { aspect-ratio: 5 / 2; font-size: var(--yz-h2); box-shadow: inset 0 0 0 1px var(--ayrac); }
.hv-karo b { font-size: var(--yz-orta); font-weight: 700; letter-spacing: -0.014em; line-height: 1.25; padding: 0 4px; overflow-wrap: anywhere; }
.hv-karo small { font-size: var(--yz-kucuk); color: var(--murekkep-3); line-height: 1.35; padding: 0 4px; }
.hv-nokta { position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: var(--r-tam); box-shadow: 0 0 0 2px var(--isik); }
.hv-nokta.hv-d-yeni { background: var(--ayrac); }
.hv-nokta.hv-d-ogren { background: var(--vurgu); }
.hv-nokta.hv-d-olgun { background: var(--das); }
.hv-nokta.suluk { background: var(--die); }

/* KELİME AYRINTISI — alttan açılan kâğıt. Perde düz renk: sayfa zemini
   üstünde `backdrop-filter` yasak (CLAUDE.md). */
.hv-perde {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  align-items: end;
  background: rgba(20, 15, 10, 0.55);
  animation: hv-perde var(--dur-kisa) var(--ev) both;
}
.hv-ayrinti {
  position: relative;
  /* geniş pencerede app 430px sütunda; kâğıt ekran boyu yayılmasın (2026-10-12, 1200'de ölçüldü) */
  width: 100%;
  max-width: 480px;
  justify-self: center;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 20px calc(26px + env(safe-area-inset-bottom));
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--kagit);
  color: var(--murekkep);
  animation: hv-kagit var(--dur-yavas) var(--ev) both;
}
@keyframes hv-perde { from { opacity: 0; } }
@keyframes hv-kagit { from { transform: translateY(40px); opacity: 0; } }
.hv-kapat {
  appearance: none;
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  cursor: pointer;
}
.hv-kapat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hv-kapat:focus-visible, .hv-bag:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

/* LİSTEM (2026-09-23 · özellik sökümü: Memrise «My Words» · Drops
   «Favorites»). Yıldız, kapat düğmesinin aynası: sol üst, 44 daire, yalnız
   ikon — yazılı hâli görselin ve başlığın üstüne biniyordu. Durum dolguyla
   okunur, adı `aria-pressed` taşır. */
.hv-yildiz {
  appearance: none;
  position: absolute;
  top: 12px; left: 12px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  cursor: pointer;
  transition: color var(--dur-kisa) var(--ev), transform var(--dur-bas) var(--ev);
}
.hv-yildiz svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill var(--dur-kisa) var(--ev); }
.hv-yildiz[aria-pressed="true"] { color: var(--vurgu-koyu); }
.hv-yildiz[aria-pressed="true"] svg { fill: var(--vurgu); }
.hv-yildiz:active { transform: scale(0.94); }
.hv-yildiz:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.hv-liste-pul { color: var(--vurgu-koyu); }
.hv-liste-pul svg { width: 20px; height: 20px; fill: var(--vurgu); stroke: var(--vurgu-koyu); stroke-width: 1.4; stroke-linejoin: round; }
.hv-liste-sat { margin: 10px 0 20px; }
.hv-liste-sat[hidden] { display: none; }
.hv-liste { margin-top: 10px; margin-bottom: 24px; }
.hv-ekle { display: grid; gap: 10px; margin: 10px 0 24px; }
.hv-ekle .hv-ara { margin: 0; }
.hv-ekle-et { flex: none; width: 64px; font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--murekkep-3); }
.hv-ekle-not { margin: 0; }
.hv-ekle-durum { margin: 0; min-height: 1em; font-size: var(--yz-kucuk); color: var(--vurgu-koyu); }
.hv-sil { display: block; margin: 18px auto 0; color: var(--vurgu-koyu); }
/* KAYDET · KARŞILAŞTIR — iki dalga üst üste (Mango). Kadro mürekkep, öğrenci
   vurgu: renk KİMİN sesi olduğunu söyler, iyi/kötü değil (puan yok). */
.hv-kayit { margin-top: 8px; }
.hv-dalga { display: grid; gap: 8px; margin-top: 12px; }
.hv-dalga[hidden] { display: none; }
.hv-dalga-sat { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.hv-dalga-et { font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--murekkep-3); }
.hv-dalga-iz { width: 100%; height: 32px; fill: var(--murekkep-2); }
.hv-dalga-sat.sen .hv-dalga-iz { fill: var(--vurgu); }
.hv-dalga-sat.yok .hv-dalga-iz { display: none; }
.hv-dalga-sat.yok .hv-dalga-et::after { content: ' · stüdyo kaydı yok'; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.hv-dalga-sat.yok { grid-template-columns: 1fr 44px; }
.hv-dalga-cal {
  appearance: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  color: var(--murekkep-2);
  cursor: pointer;
}
.hv-dalga-cal svg { width: 16px; height: 16px; fill: currentColor; }
.hv-dalga-cal:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hv-yildiz, .hv-yildiz svg { transition: none; }
  .hv-yildiz:active { transform: none; }
}
.hv-ay-g { display: block; width: 176px; height: 176px; margin: 4px auto 12px; border-radius: var(--r-md); object-fit: cover; }
.hv-ay-kelime { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 44px; }
.hv-ay-kelime h2 { margin: 0; font-size: var(--yz-h1); font-weight: 700; letter-spacing: var(--ls-dev); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.hv-ay-cogul { margin: 6px 0 0; text-align: center; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.hv-ay-cogul span { color: var(--murekkep-2); font-weight: 600; }
.hv-ay-tr { margin: 8px 0 0; text-align: center; font-size: var(--yz-buyuk); color: var(--vurgu-koyu); }
.hv-ay-ornek { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-plaka); background: var(--kagit-2); }
.hv-ay-ornek .tr { margin: 6px 0 0; font-size: var(--yz-govde); color: var(--murekkep-2); }
.hv-golge { margin-top: 12px; width: 100%; }
.hv-golge-durum { margin: 8px 0 0; min-height: 1.5em; font-size: var(--yz-kucuk); color: var(--murekkep-3); text-align: center; }
.hv-ay-kunye { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.hv-ay-kunye div { padding: 10px 12px; border-radius: var(--r-xs); background: var(--kagit-3); }
.hv-ay-kunye dt { font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--murekkep-3); }
.hv-ay-kunye dd { margin: 3px 0 0; font-size: var(--yz-govde); font-weight: 600; font-variant-numeric: tabular-nums; }
.hv-suluk { margin: 16px 0 0; font-size: var(--yz-govde); line-height: 1.5; color: var(--murekkep-2); }
.hv-bag { appearance: none; border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--vurgu-koyu); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* KART GÖRSELİ — kelime kartının üstünde. `[hidden]` eşi ŞART (yukarıdaki
   «aynı tuzak» notu: display yazan her kurala hidden eşi). */
.kart-gorsel { display: block; width: auto; height: clamp(96px, 19vh, 156px); aspect-ratio: 1; margin: 0 auto 4px; border-radius: var(--r-md); object-fit: cover; animation: hv-kagit var(--dur-yavas) var(--ev) both; }
.kart-gorsel[hidden] { display: none; }
.kart-yeni { align-self: center; margin-top: 8px; padding: 3px 10px; border-radius: var(--r-tam); background: var(--asit); color: var(--asit-metin); font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.06em; text-transform: uppercase; }

/* OYUN · RESİM EŞLE */
.hv-oyun-bas { font-size: var(--yz-h3); margin-bottom: 12px; }
.hv-es-resim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-es-r, .hv-es-k {
  appearance: none;
  border: 0;
  font: inherit;
  color: var(--murekkep);
  cursor: pointer;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
  transition: transform var(--dur-kisa) var(--ev), box-shadow var(--dur-kisa) var(--ev), opacity var(--dur-kisa) var(--ev);
}
.hv-es-r { padding: 4px; }
.hv-es-r img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-xs); object-fit: cover; }
.hv-es-kelime { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.hv-es-k { min-height: 48px; padding: 8px 10px; font-size: var(--yz-orta); font-weight: 700; letter-spacing: -0.014em; overflow-wrap: anywhere; }
.hv-es-r[aria-pressed="true"], .hv-es-k[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--vurgu-koyu); transform: translateY(1px); }
.hv-es-r:focus-visible, .hv-es-k:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.hv-es-r.tamam, .hv-es-k.tamam { opacity: 0.35; cursor: default; box-shadow: 0 0 0 1px rgba(43, 34, 24, 0.11); }
.hv-es-k.tamam { background: var(--asit); color: var(--asit-metin); opacity: 0.6; }
.hv-es-r.sars, .hv-es-k.sars { animation: hv-sars var(--dur-kisa) var(--ev); }
@keyframes hv-sars { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hv-oyun-son { text-align: center; }
.hv-oyun-maskot { display: block; width: 120px; height: auto; margin: 12px auto 8px; }
.hv-oyun-plaka { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .hv-perde, .hv-ayrinti, .kart-gorsel { animation: none; }
  .hv-es-r.sars, .hv-es-k.sars { animation: none; box-shadow: 0 0 0 3px var(--die); }
  .hv-sv-h, .hv-karo, .hv-es-r, .hv-es-k { transition: none; }
}


/* ══ § 96 · KANIT SAYFASI + SEVİYE BELGESİ (DESIGN § 5.13 · § 5.14) ═══
   İkisi de Ben'den açılan SAYFA (akış değil): üstte `.hv-ust` geri çubuğu,
   alt çubuk yerinde. Yeni bileşen iki tane: yöntem kartının sayı satırı ve
   belge kâğıdı. Gerisi evdeki parçalar (.kutu · .ist · .satir · .yaz-kutu). */

/* ── «Nasıl öğretiyoruz» ── */
.ny-kart { padding: 16px 16px 14px; }
.ny-kart + .ny-kart { margin-top: 12px; }
.ny-kart .bol-et { margin-top: 0; }
.ny-ad { margin: 0 0 6px; font-size: var(--yz-buyuk); font-weight: 700; letter-spacing: -0.01em; color: var(--murekkep); }
.ny-uygulama { margin: 0 0 12px; font-size: var(--yz-govde); line-height: 1.5; color: var(--murekkep-2); }
.ny-sayi {
  display: block; margin: 0 0 4px;
  font-family: var(--f-mono); font-size: var(--yz-h2); font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--vurgu);
}
.ny-anlam { margin: 0 0 10px; font-size: var(--yz-govde); line-height: 1.5; color: var(--murekkep); }
.ny-kunye {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--ayrac);
  font-size: var(--yz-kucuk); line-height: 1.45; color: var(--murekkep-3);
}
.ny-dip { margin: 16px 4px 8px; font-size: var(--yz-kucuk); line-height: 1.5; color: var(--murekkep-3); }

/* ── Seviye belgesi ──
   Kâğıt gecede DÖNMEZ: dönen token'lar kâğıdın içinde belge değerlerine
   bağlanır, böylece içerideki evdeki parçalar (.ist) da açık kalır. */
.bg-kagit {
  --kagit: var(--belge-zemin);
  --murekkep: var(--belge-yazi);
  --murekkep-3: var(--belge-ikincil);
  --ayrac: var(--belge-cizgi);
  margin: 4px 0 20px; padding: 20px 16px 16px;
  border: 1px solid var(--belge-cizgi); border-radius: var(--r-md);
  background: var(--belge-zemin); color: var(--belge-yazi);
  text-align: center;
  box-shadow: 0 1px 0 var(--belge-cizgi), 0 12px 28px -18px var(--levha);
}
.bg-kunye {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px;
  font-family: var(--f-mono); font-size: var(--yz-mikro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--belge-ikincil); text-align: left;
}
.bg-kunye span:last-child { text-align: right; white-space: nowrap; }
.bg-muhur {
  width: 96px; height: 96px; margin: 0 auto 12px; border-radius: var(--r-tam);
  display: grid; place-items: center;
  background: var(--levha); color: var(--asit);
  font-size: var(--yz-h1); font-weight: 700; letter-spacing: -0.02em;
}
.bg-sv { margin: 0 0 16px; font-size: var(--yz-govde); color: var(--belge-ikincil); }
.bg-ad { margin: 0 0 8px; font-size: var(--yz-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.bg-ad.bos { font-size: var(--yz-buyuk); font-weight: 500; letter-spacing: 0; color: var(--belge-ikincil); }
.bg-cumle { margin: 0 auto 16px; max-width: 34ch; font-size: var(--yz-govde); line-height: 1.5; }
.bg-beceri { margin-bottom: 16px; text-align: left; }
.bg-tarih { margin: 0 0 12px; font-size: var(--yz-govde); font-weight: 600; }
.bg-not { margin: 0; font-size: var(--yz-kucuk); line-height: 1.45; color: var(--belge-ikincil); }
.bg-ad-et { display: block; margin: 0 0 8px; font-size: var(--yz-kucuk); font-weight: 600; color: var(--murekkep-3); }
.bg-onizleme { display: block; width: 100%; height: auto; margin-top: 16px; border: 1px solid var(--ayrac); border-radius: var(--r-plaka); }
.bg-ipucu { margin: 8px 0 0; font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.dugme[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

/* ══ § 90 · BUGÜN + MASAÜSTÜ KABUĞU (2026-10-01) ══════════════════════
   Operatör: «bu nası bi app girişi, bu ne» (masaüstü Safari). Ölçülen
   kusurlar: masaüstünde 430px telefon sütunu ortada yüzüyordu · üst şerit
   dört çıplak küçük sayı · yol listesi düz metin gibi · bento kartları
   eşitsiz (3fr/2fr) ve kırpılıyor · ilk satır dışındaki konular açılmıyordu.
   İlk tur Duolingo learn klonuydu (zikzak yol) — operatör: «duolingo gibi
   niye yapıyorsun, daha farklı olmalı» → «ikisinin karışımı»:
     BUGÜN   = Babbel üstü (REFERANS-APP/babbel/03.png) + Busuu bölüm
               listesi (REFERANS-APP/busuu/05.png)
     KABUK   = sol menü · orta sütun · sağ panel (Duolingo/Busuu/Babbel
               web ortak düzeni; REFERANS/bugun-2026-10/duo-masaustu-2.jpg)
   Renk ve yazı «yumuşak kutu» dilinden (_tasarim/TASARIM-DILI-v1/tokens.json):
   başlık Bricolage · metin Schibsted · sayı Martian Mono · logo DM Serif;
   kutu + 4px etek + tek asit (sıradaki ders eylemi).
   ════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  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;
  src: url('font/bricolage-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  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;
  src: url('font/bricolage-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  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;
  src: url('font/dmserif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  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;
  src: url('font/dmserif-latin-ext.woff2') format('woff2');
}

:root {
  /* yumuşak kutu tokens.json'dan — yeni hex yok */
  --f-baslik: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --f-marka: 'DM Serif Display', Georgia, serif;
  --asit-2: #dff083;
  --asit-etek: #a9c531;
  --vurgu-acik: #b4552a;
  --vurgu-etek: #8e3d16;
  --kutu-hat: 0 0 0 1px rgba(43, 34, 24, 0.11);
  /* yerleşim — Duolingo masaüstü ölçüsü (orta sütun 600 · sağ panel ~350) */
  --yan-w: 88px;
  --orta-w: 600px;
  --sag-w: 352px;
  --ara-w: 40px;
  --kap-w: calc(var(--orta-w) + var(--ara-w) + var(--sag-w));
  --ust-h: 72px;
  --ikinci: #2f5d50;
  --asit-acik: #ddfa66;
  --asit-derin: #c1e137;
  /* aurora damla renkleri — varlik/aurora.js CFG.damlalar */
  --aur-seftali: #e0bda4;
  --aur-limon: #e9f3ba;
  --aur-kum: #eed3ba;
  --aur-kil: #d89b7a;
  --aur-limon-2: #e2eead;
  --cam-yuzey: rgba(255, 253, 249, 0.5);
}

/* ── ÜST ŞERİT — bayrak · seri · kelime · XP (Duolingo: bayrak · alev ·
   elmas · avatar). Göstergeler ikonla okunur: ikon 24px ve renkli, sayı
   kalın. Seviye kodu ünite bandının künyesine taşındı. */
.ust-bayrak {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  flex: none;
  cursor: pointer;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
}
.ust-bayrak img { display: block; width: 30px; height: 30px; border-radius: var(--r-xs); }
.ust-bayrak:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.ust .seviye { display: none; }
.ust-cip { gap: 6px; font-size: var(--yz-orta); font-weight: 600; }
.ust-cip svg { width: 24px; height: 24px; }
.ust-cip b { font-weight: 600; }

/* ── § 91 · SAHNE — sitenin kilitli «1 · Sahne»si app'te (2026-10-01) ──
   Operatör: «bizim sitedeki gibi olmalı ama motion design ve animasyonları
   daha iyi yapmalısın». Kaynak: varlik/stil.css `.g1 · .g1-cam · .g1-sahne ·
   .g1-daire · .g1-maskot · .sr*` (/tr/almanca/ girişi). Ölçüler oradan;
   renkler token (sitedeki ham hex'ler tokens.json karşılığına bağlandı).
   Aurora: sitede WebGL; app'te statik yedek (DESIGN.md § 5.1 «<768px WebGL
   yok») — aynı beş damla rengi, radyal gradyan, içerikle kayar (sabit
   katman DEĞİL). Cam kartta backdrop-filter YOK (app yasağı): yarı saydam
   ışık + yansımalı kenar. */
.sahne {
  position: relative;
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--r-md);
  background:
    radial-gradient(60% 46% at 12% 14%, var(--aur-seftali) 0%, transparent 70%),
    radial-gradient(56% 44% at 92% 30%, var(--aur-limon) 0%, transparent 70%),
    radial-gradient(70% 40% at 50% 100%, var(--aur-kum) 0%, transparent 72%),
    radial-gradient(40% 40% at 0% 82%, var(--aur-kil) 0%, transparent 70%),
    radial-gradient(44% 44% at 100% 90%, var(--aur-limon-2) 0%, transparent 70%),
    var(--kagit);
}
.sh-cam {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 16px 24px;
  border-radius: var(--r-md);
  background: var(--cam-yuzey);
  box-shadow: var(--kutu-hat), 0 18px 44px -22px rgba(60, 40, 20, 0.32);
}
.sh-mini {
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.sh-bas { margin: 12px 0 0; }
.sh-m {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;                 /* maske: satır yukarıdan açılır */
  padding-bottom: 0.08em;
  color: var(--murekkep);
  font-family: var(--f-baslik);
  font-size: clamp(40px, 11.5vw, 88px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-dev);
  border-radius: var(--r-xs);
}
.sh-m > span { display: inline-block; }
.sh-m:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 4px; }
.sh-kutu {
  display: inline-block;
  font-style: normal;
  background: var(--murekkep);
  color: var(--asit);
  border-radius: 0.3em;
  padding: 0.02em 0.24em 0.1em;
  letter-spacing: -0.03em;
}
.sh-alt { margin: 10px 0 0; font-size: var(--yz-orta); color: var(--murekkep-2); }
.sh-alt b { color: var(--murekkep); }

.sh-sahne {
  width: 100%;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  text-align: left;
}
/* Telefonda daire derslerin ALTINDA (2026-10-13). Eskiden `order: -1` ile
   üstteydi: 390×844'te «01 · şimdi» satırı alt çubuğun arkasında (763–821,
   çubuk 781), 375×667'de tamamen katlamanın altındaydı — ekranın asıl
   eylemi görünmüyordu. Masaüstü sırası § 95 medya kuralında, değişmedi. */
.sh-orta {
  position: relative;
  width: min(270px, 68vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.sh-daire {
  position: absolute;
  inset: 0;
  border-radius: var(--r-tam);
  pointer-events: none;
  background:
    radial-gradient(54% 48% at 32% 24%, rgba(255, 253, 249, 0.55) 0%, rgba(255, 253, 249, 0) 62%),
    radial-gradient(92% 88% at 36% 26%, var(--asit-acik) 0%, var(--asit) 56%, var(--asit-derin) 82%, var(--asit-etek) 100%);
  box-shadow:
    0 0 0 1px rgba(120, 150, 30, 0.22),
    0 30px 68px rgba(90, 110, 20, 0.20),
    inset 0 2px 0 rgba(255, 253, 249, 0.75),
    inset -20px -28px 54px rgba(108, 140, 18, 0.24);
}
.sh-mk {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  position: relative;
  z-index: 2;
  width: 62%;
  cursor: pointer;
  border-radius: var(--r-tam);
  will-change: transform;
}
.sh-mk:focus-visible { outline: 3px solid var(--vurgu-koyu); outline-offset: 6px; }
.sh-maskot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(60, 26, 8, 0.26));
}

/* Hap satırlar — sitenin `.sr`ı: kil gövde, solda mono plaka, sağda ok. */
.sh-yigin { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; }
.sh-sol > li { display: block; }
.sh-sr {
  appearance: none;
  border: 0;
  font: inherit;
  color: var(--murekkep);
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 48px 8px 12px;
  border-radius: var(--r-md);
  text-align: left;
  background: linear-gradient(180deg, var(--isik), var(--tas) 94%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 253, 249, 0.95),
    inset 0 -9px 16px -11px rgba(120, 86, 52, 0.30),
    0 7px 16px -7px rgba(60, 40, 20, 0.18);
  transition: transform var(--dur-bas) var(--ev), box-shadow var(--dur-kisa) var(--ev);
}
button.sh-sr { cursor: pointer; }
button.sh-sr:active { transform: scale(0.98); }
button.sh-sr:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
.sh-one {
  background: linear-gradient(180deg, var(--asit-acik), var(--asit) 90%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 253, 249, 0.85),
    inset 0 -9px 16px -11px rgba(108, 140, 18, 0.42),
    0 7px 16px -7px rgba(120, 150, 20, 0.30);
}
.sh-sv {
  flex: none;
  min-width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--murekkep);
  color: var(--isik);
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.sh-one .sh-sv { color: var(--asit); }
.sh-sr.bitti .sh-sv { background: var(--ikinci); color: var(--alan-metin); }
.sh-sv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sh-ad { flex: 1; min-width: 0; font-size: var(--yz-orta); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.sh-sr.sonra .sh-ad { color: var(--murekkep-2); font-weight: 500; }
.sh-say {
  flex: none;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  font-weight: 600;
  color: var(--murekkep-2);
  white-space: nowrap;
}
.sh-ok {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 28px; height: 28px;
  margin-top: -14px;
  border-radius: var(--r-tam);
  background: var(--isik);
  color: var(--murekkep);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(60, 40, 20, 0.16);
  transition: transform var(--dur-kisa) var(--ev);
}
.sh-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  button.sh-sr:hover { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255, 253, 249, 0.95), inset 0 -9px 16px -11px rgba(120, 86, 52, 0.26), 0 14px 26px -8px rgba(60, 40, 20, 0.24); }
  button.sh-sr:hover .sh-ok { transform: rotate(45deg); }
  button.sh-sr:active { transform: translateY(-1px) scale(0.98); }
}

/* Ölçü sütunu — sitenin `.sr-olcu`su: çizgili satır, sağda mono sayı.
   Telefonda 2×2 ızgara (dört satır alt alta ekranı şişiriyordu). */
.sh-sag { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sh-olcu {
  min-height: 52px;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--cizgi);
}
.sh-olcu .sh-ad { font-size: var(--yz-govde); font-weight: 500; color: var(--murekkep-2); }
.sh-n {
  flex: none;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--yz-orta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--murekkep);
}
.sh-eylem {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.sh-eylem .dugme { justify-content: space-between; }
.sh-sonra {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  display: block;
  width: 100%;
  margin: 14px 0 4px;
  padding: 0;
  text-align: center;
  font-size: var(--yz-govde);
  color: var(--murekkep-2);
}
button.sh-sonra { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.sh-sonra:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; border-radius: var(--r-xs); }

/* ── HAREKET — giriş koreografisi (yalnız `[data-giris]`, uygulama açılışında
   bir kez). Sıra: künye → başlık maskeden yükselir → daire büyür → maskot
   iner ve oturur → satırlar 45 ms arayla → ölçüler → eylemler. Hepsi
   `--ev`, hepsi transform/opacity. `--gecen` yeniden çizimde kaldığı yerden
   sürdürür. Maskotun süzülmesi markanın TEK döngüsü (§ 49). */
.sahne { --gecen: 0ms; }
@media (prefers-reduced-motion: no-preference) {
  .sahne[data-giris] .sh-mini { animation: sh-yuksel var(--dur-yavas) var(--ev) calc(0ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-m > span { animation: sh-maske var(--dur-uzun) var(--ev) calc(60ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-alt { animation: sh-yuksel var(--dur-yavas) var(--ev) calc(180ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-daire { animation: sh-daire var(--dur-uzun) var(--ev) calc(140ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-mk { animation: sh-in var(--dur-uzun) var(--ev) calc(240ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-sol .sh-sr,
  .sahne[data-giris] .sh-olcu { animation: sh-yuksel var(--dur-yavas) var(--ev) calc(300ms + var(--i, 0) * 45ms + var(--gecen)) both; }
  .sahne[data-giris] .sh-eylem { animation: sh-yuksel var(--dur-yavas) var(--ev) calc(520ms + var(--gecen)) both; }
  .sh-maskot { animation: sh-suz 7s ease-in-out 1.4s infinite; }
}
/* Dar telefonda sahne kenardan kenara (sitedeki gibi tam en). */
@media (max-width: 480px) {
  .sahne { margin-left: calc(var(--pay) * -1); margin-right: calc(var(--pay) * -1); padding: 10px var(--pay) 6px; border-radius: 0; }
}
@keyframes sh-yuksel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sh-maske  { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sh-daire  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes sh-in     { from { opacity: 0; transform: translateY(28px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes sh-suz    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── SAĞ PANEL İÇERİĞİ — Duolingo «Daily Quests» kartı: tek kutu, satır
   satır (ikon · başlık · ödül). Bento'nun 3fr/2fr ızgarası burada liste
   olur: kartlar eşit genişlikte, metin kırpılmıyor. */
.b-yan .bento {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  border-radius: var(--r-md);
  background: var(--isik);
  box-shadow: var(--kutu-hat), 0 4px 0 var(--ayrac);
  overflow: hidden;
}
.b-yan .bento .gunun-dersi {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.b-yan .bento .gunun-dersi + .gunun-dersi { border-top: 1px solid var(--ayrac); }
.b-yan .bento .gunun-dersi:focus-visible { outline-offset: -3px; }
.b-yan .bento .gd-ust,
.b-yan .bento .gd-sol { display: contents; }
.b-yan .bento .isaret { grid-column: 1; grid-row: 1 / span 3; width: 36px; height: 36px; }
.b-yan .bento .gunun-dersi .gd-sol i { display: block; grid-column: 2; grid-row: 1; }
.b-yan .bento .gunun-dersi b { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: var(--yz-orta); }
.b-yan .bento .gunun-dersi small { grid-column: 2; grid-row: 3; }
.b-yan .bento .gd-ust > .xp-rozet,
.b-yan .bento .gd-ust > .pul-tik { grid-column: 3; grid-row: 1 / span 3; }

/* ── MASAÜSTÜ KABUĞU — sol menü · içerik · (Bugün'de) iki sütun.
   Yalnız sekme ekranlarında; ders/test (data-odak) ve ilk açılış ekranları
   (data-ekran) telefon sütununda kalır — Duolingo'nun ders ekranı da
   menüsüz tek sütundur. */
.cubuk-marka { display: none; }

@media (min-width: 1024px) {
  body:not([data-ekran]):not([data-odak]) {
    --cubuk-pay: 0px;
    padding-left: var(--yan-w);
    position: relative;
    background-image: none;
  }
  /* SOL MENÜ */
  body:not([data-ekran]):not([data-odak]) .cubuk {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--yan-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 22px 12px;
    border-top: 0;
    border-right: 2px solid var(--ayrac);
  }
  body:not([data-ekran]):not([data-odak]) .cubuk-marka {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 22px;
    --lv: 36px;
  }
  .cubuk-marka b { display: none; }
  body:not([data-ekran]):not([data-odak]) .sek {
    height: auto;
    min-height: 52px;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: var(--r-plaka);
    color: var(--murekkep-2);
  }
  body:not([data-ekran]):not([data-odak]) .sek svg { width: 30px; height: 30px; stroke-width: 1.8; }
  body:not([data-ekran]):not([data-odak]) .sek span { display: none; }
  body:not([data-ekran]):not([data-odak]) .sek:hover { background: var(--kagit-3); }
  body:not([data-ekran]):not([data-odak]) .sek[aria-current] {
    color: var(--murekkep);
    background: var(--asit-2);
    border-color: var(--asit-etek);
  }
  body:not([data-ekran]):not([data-odak]) .sek[aria-current] svg { background: none; box-shadow: none; padding: 0; }

  /* GÖSTERGE SATIRI — içerik alanının üstünde, sağa yaslı (sitenin üst
     şeridindeki «Giriş · Ücretsiz başla» yeri). */
  body:not([data-ekran]):not([data-odak]) .ust {
    justify-content: flex-end;
    gap: 22px;
    height: var(--ust-h);
    padding: 0 max(24px, calc((100% - var(--yan-w) - var(--kap-w)) / 2));
    padding-left: max(24px, calc((100% - var(--yan-w) - var(--kap-w)) / 2));
    border-bottom: 0;
  }
  body:not([data-ekran]):not([data-odak]) .ust-hedef { display: none; }
  /* Menü ve gösterge satırı sayfanın kendi zemininde; `inherit` pastel ekran
     zeminini de (body[data-ped]) taşır. Kâğıt kenar çizgileri (§ 3.4) 430px'lik
     telefon sütununa göre — masaüstünde kapalı. */
  body:not([data-ekran]):not([data-odak]) .ust,
  body:not([data-ekran]):not([data-odak]) .cubuk { background: inherit; }
  body:not([data-ekran]):not([data-odak]) .govde { background-image: none; }

  /* İÇERİK — sekmeler ortada 600px sütun. */
  body:not([data-ekran]):not([data-odak]) .govde { padding: 8px 24px 48px; }
  body:not([data-ekran]):not([data-odak]) .govde > * { max-width: var(--orta-w); margin-left: auto; margin-right: auto; }

  /* BUGÜN — sahne tam en (sitedeki gibi üç sütun: satırlar · daire · ölçüler),
     altında iki sütun: günün işleri | görevler. */
  body:not([data-ekran]):not([data-odak]) .govde:has(> .sahne) {
    display: grid;
    grid-template-columns: minmax(0, var(--orta-w)) var(--sag-w);
    column-gap: var(--ara-w);
    justify-content: center;
    align-content: start;
    align-items: start;
  }
  body:not([data-ekran]):not([data-odak]) .govde:has(> .sahne) > * { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; }
  body:not([data-ekran]):not([data-odak]) .govde:has(> .sahne) > .b-orta { grid-column: 1; }
  body:not([data-ekran]):not([data-odak]) .govde:has(> .sahne) > .b-yan { grid-column: 2; }
  .sahne { margin: 0 0 26px; padding: 16px; border-radius: var(--r-md); }
  .sh-cam { padding: 26px 30px 30px; }
  .sh-sahne { grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 0.85fr); align-items: center; gap: 26px; justify-items: stretch; margin-top: 20px; }
  .sh-orta { order: 0; width: clamp(220px, 22vw, 320px); }
  .sh-sol { margin-right: -48px; position: relative; z-index: 3; }
  .sh-sag { grid-template-columns: 1fr; align-self: center; }
  .sh-eylem { flex-direction: row; justify-content: center; }
  .sh-eylem .dugme { width: auto; flex: 0 1 300px; }
}

/* Geniş masaüstü — sol menü etiketli (Duolingo ≥1160: ikon + yazı). */
@media (min-width: 1280px) {
  :root { --yan-w: 256px; }
  body:not([data-ekran]):not([data-odak]) .cubuk-marka { justify-content: flex-start; padding: 0 12px 26px; }
  .cubuk-marka b {
    display: inline;
    font-family: var(--f-marka);
    font-size: var(--yz-h2);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--vurgu-koyu);
  }
  body:not([data-ekran]):not([data-odak]) .sek { justify-content: flex-start; padding: 8px 16px; }
  body:not([data-ekran]):not([data-odak]) .sek span {
    display: inline;
    font-size: var(--yz-orta);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
}

/* 2026-10-10 · GÜNÜN HEDEFLERİ = sitedeki günlük defterin üç hedefi.
   Kelime hedefi düğme (Kelime sekmesine götürür); altında defter bağı. */
button.gorev { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.gorev-defter {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font-size: var(--yz-kucuk); font-weight: 600; color: var(--vurgu-koyu);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ═══ § 95 · AKIŞ — ZİNCİR AKIŞ (2026-10-10 · DESIGN § 5.15 · zincir.js) ══════════
   Zincir = Instagram gönderisi: YATAY = zincirin parçası (transform, parmağı izler),
   DİKEY = sonraki zincir (tarayıcının scroll-snap'i). iOS: yatay şerit overflow-x
   kaydırıcısı OLAMAZ — içinde başlayan dikey hareketi yutuyor (BandUp'ta simülatörde
   ölçüldü). Akış kendi şeridini taşır: üst şerit gizlenir, gövde kaymaz. */
body.akis-acik .ust { display: none; }
.govde.akis-ac {
  overflow: hidden;
  padding: 0 0 calc(var(--cubuk-pay) + env(safe-area-inset-bottom, 0px));
}
.govde.akis-ac > * { max-width: none; }
.zk { height: 100%; display: flex; flex-direction: column; }
.zk-serit {
  flex: none;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pay) 10px;
  background: var(--kagit);
  border-bottom: 1px solid var(--ayrac);
}
.zk-serit > * { max-width: 430px; margin-left: auto; margin-right: auto; }
.zk-ust { display: flex; align-items: center; gap: 10px; }
.zk-kd, .zk-xp {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zk-kd { letter-spacing: 0.06em; text-transform: uppercase; color: var(--murekkep-2); }
.zk-kd.yukseldi { animation: gnu-pop var(--dur-kisa) var(--ev); }
/* kademe çubuğu — asit = ilerleme dolgusu (§ 1.1'deki üç rolden biri) */
.zk-cubuk {
  flex: 1;
  min-width: 60px;
  height: 10px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tam);
  background: var(--kagit-3);
  box-shadow: inset 0 0 0 1px var(--ayrac);
}
.zk-cubuk i {
  position: absolute;
  inset: 0;
  background: var(--asit);
  transform-origin: left center;
  transform: scaleX(var(--o, 0));
  transition: transform var(--dur-uzun) var(--ev);
}
.zk-cubuk.buyuk { flex: none; width: 100%; height: 14px; }
.zk-ad {
  margin: 8px auto 0;
  font-size: var(--yz-orta);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* parçalı çubuk (Stories) — kaç parça kaldığını sayaçsız söyler */
.zk-par { display: flex; gap: 3px; margin-top: 8px; }
.zk-par i { flex: 1; height: 3px; border-radius: var(--r-tam); background: var(--ayrac); transition: background-color var(--dur-kisa) var(--ev); }
.zk-par i.on { background: var(--murekkep); }
.zk-par i.su { background: var(--vurgu); }
.zk-par i.no { background: var(--vurgu-koyu); opacity: 0.45; }

.zk-akis {
  /* konum bağlamı: zincir satırının offsetTop'u akışın kendisine göre ölçülsün.
     Yoksa .govde'ye göre ölçülüyordu (+79 px, üst şerit) — git() «buradayım»ı hiç
     bilemiyordu, doğru satıra yalnız scroll-snap'in yuvarlaması sayesinde
     varılıyordu (2026-10-12 ölçüldü). */
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.zk-akis::-webkit-scrollbar { display: none; }
.zk-akis .zn { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; overflow: clip; }
.zn-iz {
  display: flex;
  height: 100%;
  touch-action: pan-y;
  transform: translateX(calc(var(--k, 0) * -100% + var(--dx, 0px)));
  transition: transform var(--dur-kisa) var(--ev);
  will-change: transform;
}
.zn-iz.surukle { transition: none; }
.zk-kart {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px var(--pay) 22px;
  scrollbar-width: none;
}
.zk-kart::-webkit-scrollbar { display: none; }
.zk-ic { width: 100%; max-width: 430px; margin: auto; }   /* sığarsa ortada, taşarsa üstten */

/* kart içi */
.zk-kunye {
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: var(--yz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-3);
}
.zk-kunye [lang="de"] { text-transform: none; letter-spacing: 0; }
.zk-bas { margin: 0; font-size: var(--yz-h1); line-height: 1.1; letter-spacing: var(--ls-dev); }
.zk-ikon { width: 56px; height: 56px; margin-bottom: 12px; color: var(--vurgu-koyu); }
.zk-ikon svg, .zk-ses svg, .zk-ileri svg, .zk-liste i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zk-ikon svg { width: 100%; height: 100%; }
.zk-kisa { margin: 8px 0 0; font-family: var(--f-mono); font-size: var(--yz-orta); color: var(--vurgu-koyu); }
.zk-alt { margin: 10px 0 0; font-size: var(--yz-orta); line-height: 1.5; color: var(--murekkep-3); }
.zk-gorsel {
  width: min(56vw, 220px, 26vh);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--kagit-2);
}
.zk-gorsel.kucuk { width: min(36vw, 120px, 16vh); }
.zk-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zk-kelime { margin: 6px 0 0; font-size: var(--yz-dev); line-height: 1.05; letter-spacing: var(--ls-dev); overflow-wrap: anywhere; }
.zk-cogul { margin: 6px 0 0; font-size: var(--yz-govde); color: var(--murekkep-3); }
.zk-tr { margin: 10px 0 0; font-size: var(--yz-h3); font-weight: 600; }
.zk-cumle { margin: 0; font-size: var(--yz-h3); line-height: 1.45; }
.zk-cumle mark { padding: 0 3px; border-radius: var(--r-xs); background: var(--kagit-2); color: var(--vurgu-koyu); }
.zk-cumle-tr { margin: 10px 0 0; font-size: var(--yz-orta); line-height: 1.5; color: var(--murekkep-3); }
.zk-sira { display: flex; gap: 10px; margin-top: 14px; }
.zk-ses {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-tam);
  color: var(--murekkep);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
}
.zk-ses svg { width: 22px; height: 22px; }
.zk-ileri { width: 100%; margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.zk-ileri svg { width: 20px; height: 20px; }
.zk-ikinci { width: 100%; margin-top: 10px; }
.zk-liste { display: grid; gap: 8px; margin-top: 16px; }
.zk-liste div {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
}
.zk-liste img, .zk-liste i { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-xs); background: var(--kagit-2); }
.zk-liste i { display: grid; place-items: center; color: var(--murekkep-3); }
.zk-liste i svg { width: 22px; height: 22px; }
.zk-liste b { font-size: var(--yz-buyuk); }
.zk-liste small { font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.zk-sec { display: grid; gap: 10px; margin-top: 16px; }
.zk-sec.uclu { grid-template-columns: repeat(3, 1fr); }
.zk-art-der { color: var(--der); } .zk-art-die { color: var(--die); } .zk-art-das { color: var(--das); }
.zk-son:empty { display: none; }
.zk-son { margin-top: 14px; }
.zk-dogrusu { margin: 0 0 6px; font-size: var(--yz-orta); }
.zk-blok { margin-top: 4px; }
/* cümleyi kur — sitenin `.sira-*` çipleri; taş bankadan satıra uçar, yerinde hayalet kalır */
.zk-diz-ipucu { margin: 12px 0; font-size: var(--yz-orta); line-height: 1.6; color: var(--murekkep-3); }
.zk-bosluk { display: inline-flex; gap: 4px; vertical-align: middle; }
.zk-bosluk i { width: 18px; height: 3px; border-radius: var(--r-tam); background: var(--vurgu); }
.zk-havuz { margin-top: 14px; justify-content: center; }
.zk-havuz .sira-cip.bos { color: transparent; background: var(--kagit-3); box-shadow: inset 0 0 0 1px var(--ayrac); pointer-events: none; }
.zk-esle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.zk-esle > div { display: grid; gap: 10px; align-content: start; }
.zk-esle .secenek.secili { box-shadow: inset 0 0 0 2px var(--murekkep), 0 2px 0 var(--kenar); }
/* zincir sonu (Imprint ünite sonu): bonus satırı tek yerde değişir, sayaç sayar, kademe dolar */
.zk-t-zson .zk-ic { text-align: center; }
.zs-bonus { min-height: 24px; margin: 22px 0 0; font-size: var(--yz-orta); font-weight: 600; color: var(--murekkep-2); }
.zs-bonus b { font-family: var(--f-mono); }
.zs-top { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 0; }
.zs-top b { font-size: var(--yz-dev); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-dev); }
.zs-top span { font-family: var(--f-mono); font-size: var(--yz-buyuk); color: var(--murekkep-3); }
.zs-kd { display: grid; gap: 8px; justify-items: center; max-width: 320px; margin: 22px auto 0; }
.zs-kd [data-zskd] { font-family: var(--f-mono); font-size: var(--yz-kucuk); letter-spacing: 0.06em; text-transform: uppercase; color: var(--murekkep-2); }
.zs-kd small { font-size: var(--yz-kucuk); color: var(--murekkep-3); }
.zs-sira { margin: 20px 0 0; font-size: var(--yz-orta); color: var(--murekkep-3); }
.zs-sira b { color: var(--murekkep); }
/* +10 XP — kartın içinden kademe çubuğuna uçar (ekrandaki tek imza an) */
.zk-uc {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: var(--r-tam);
  background: var(--asit);
  color: var(--asit-metin);
  font-family: var(--f-mono);
  font-size: var(--yz-kucuk);
  font-weight: 700;
  white-space: nowrap;
}
/* kademe atlama — markanın imzası: koyu levha + asit yazı, tek sefer */
.zk-kutlama {
  position: fixed;
  left: 50%;
  top: 30%;
  z-index: 41;
  translate: -50% 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 18px 26px;
  border-radius: var(--r-md);
  background: var(--levha);
  color: var(--asit);
  pointer-events: none;
  animation: gnu-pop var(--dur-kisa) var(--ev);
}
.zk-kutlama b { font-size: var(--yz-h2); }
.zk-kutlama span { font-size: var(--yz-govde); opacity: 0.8; }   /* levha + asit iki temada da sabit */
@media (prefers-reduced-motion: reduce) {
  .zn-iz, .zk-cubuk i, .zk-par i { transition: none; }
  .zk-kd.yukseldi, .zk-kutlama { animation: none; }
}
/* ana sayfa: akış girişi — koyu levha + asit yazı (markanın imzası, iki temada sabit) */
.ak-giris {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 18px 64px 18px 18px;
  border-radius: var(--r-md);
  background: var(--levha);
  color: var(--asit);
  text-decoration: none;
}
.ak-g-kunye { font-family: var(--f-mono); font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.ak-g-bas { font-size: var(--yz-h2); line-height: 1.1; letter-spacing: var(--ls-dev); }
.ak-g-alt { font-size: var(--yz-govde); line-height: 1.45; opacity: 0.8; }
.ak-g-cubuk { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: var(--r-tam); background: rgba(212, 242, 75, 0.18); }
.ak-g-cubuk i { display: block; height: 100%; background: var(--asit); }
.ak-g-ok { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-tam); background: var(--asit); color: var(--asit-metin); }
.ak-g-ok svg, .ak-ogren svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ak-giris:active { transform: translateY(2px); }
.ak-giris:focus-visible, .ak-ogren:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }
.ak-ogren {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--r-plaka);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(43, 34, 24, 0.11), 0 3px 0 rgba(43, 34, 24, 0.12);
  color: var(--murekkep);
  font-weight: 600;
  text-decoration: none;
}

/* ═══ § 96 · AKIŞ ☰ LİSTE + TUZAK ALIŞTIRMASI + SINAV İPUCU (2026-10-12 · DESIGN § 5.15) ═══
   ☰ = BandUp'taki içerik listesi. Kâğıt Kelime sekmesinin ayrıntısı (.hv-perde +
   .hv-ayrinti), seviye sekmeleri .hv-sv, satırlar Bugün'ün .sy-sat'ı — yeni parça yok.
   Zincir adı da aynı listeyi açar (Instagram'da hesap adına dokunmak gibi). */
.zk-menu {
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px -4px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-tam);
  background: none;
  color: var(--murekkep-2);
  cursor: pointer;
}
.zk-menu svg, button.zk-ad svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zk-menu svg { width: 22px; height: 22px; }
button.zk-ad {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--murekkep);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
button.zk-ad span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.zk-ad svg { flex: none; width: 16px; height: 16px; color: var(--murekkep-3); }
.zk-menu:focus-visible, button.zk-ad:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
.zk-icerik .zk-kunye { margin-right: 52px; }
.zk-ic-bas { margin: 0 52px 16px 0; font-size: var(--yz-h2); line-height: 1.15; letter-spacing: var(--ls-dev); }
.zk-icerik .bol-et { margin-top: 26px; }
.zk-icerik .sy { margin-top: 0; }
.zk-icerik .sy-pul { overflow: hidden; }
.zk-icerik .sy-pul img { width: 100%; height: 100%; object-fit: cover; }
.zk-icerik .sy-pul svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zk-icerik .sy-sat.gecti .sy-pul { color: var(--vurgu-koyu); }

/* tuzak — doğru cümle mi, sık yapılan hata mı: önce tahmin, sonra açıklama */
.zk-soru-bas { margin: 0; font-size: var(--yz-h2); line-height: 1.15; letter-spacing: var(--ls-dev); }
.zk-tz .secenek { margin-top: 0; line-height: 1.4; }

/* sınav ipucu — konu sayfasının İpuçları verisi; dolgulu yüzey, çerçeve yok */
.zk-ipucu { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.zk-ipucu li { padding: 14px 16px; border-radius: var(--r-plaka); background: var(--kagit-2); }
.zk-ip-no { display: block; font-family: var(--f-mono); font-size: var(--yz-mikro); font-weight: 600; letter-spacing: 0.08em; color: var(--vurgu-koyu); }
.zk-ipucu b { display: block; margin-top: 4px; font-size: var(--yz-buyuk); line-height: 1.3; }
.zk-ipucu p { margin: 6px 0 0; font-size: var(--yz-orta); line-height: 1.5; color: var(--murekkep-2); }
.zk-ipucu p.zk-ip-ornek { color: var(--murekkep); }

/* resimli ders → akış: sitedeki resimli dersin karesi (3:2, 960×640) + cümle. Sitenin
   .dd-ornek'inin app hâli — örnek cümle dolgun, vurgulu parça kiremit, rozet sol üstte. */
.zk-foto {
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--kagit-2);
}
.zk-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.zk-foto.kucuk { width: min(100%, 40vh * 1.5); margin-left: auto; margin-right: auto; }
.zk-foto-et {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  background: var(--murekkep);
  color: var(--isik);
  font-size: var(--yz-kucuk);
  font-weight: 600;
  line-height: 1.2;
}
.zk-fcumle { margin: 0; font-size: var(--yz-h3); font-weight: 600; line-height: 1.38; letter-spacing: -0.015em; }
.zk-fcumle b { font-weight: 600; color: var(--vurgu-koyu); }
/* boşluk: alt çizgi; cevaptan sonra kelime oturur — doğruysa asit dolgu, yanlışsa kiremit çizgi */
.zk-fbos {
  display: inline-block;
  min-width: 64px;
  padding: 0 6px;
  border-bottom: 3px solid var(--vurgu);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  text-align: center;
  white-space: pre;
}
.zk-fbos.d { background: var(--asit); color: var(--asit-metin); border-bottom-color: transparent; }
.zk-fbos.y { background: var(--kagit-2); color: var(--vurgu-koyu); }

/* ═══ § 97 · HESAP ADIMI — dil → hesap → seviye (2026-10-13 · app.js cizHesapAdim) ═══
   Karşılamanın kabuğu (`.hos`, `.hos-kart`) + Ben sekmesinin formu
   (`.hs-sec`, `.hs-kutu`, `.hs-input`). Yeni bileşen yok; yalnız ortalı
   kartın içinde formun sola yaslanması ve kutunun KENARSIZ dolgu olması
   (çerçeveli kutu = «yapay zeka duruyor», 2026-10-06). Yarıçap hücre
   değeri (`--r-plaka`), renk mevcut token. */
/* Bu ekranda karar markanın değil formun: levha 56 → 44 (§ 5.11'in
   «marka plakası küçülür» kararı). 375×667'de «Şimdilik geç» katlamanın
   altında kalıyordu. */
.hos-hesap .hos-kart .hos-levha { --lv: 44px; margin-bottom: 10px; }

/* Kip seçici — SEGMENT. Zemin dolgu (`--kagit-3`), seçili taraf kil
   reçetesiyle kabarık; kiremit dolu düğme yok. İç yarıçap `--r-xs`. */
.hos-hesap .hs-kip-ag {
  width: 100%;
  margin-top: 16px;
  padding: 4px;
  gap: 4px;
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
}
.hs-kip {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  flex: 1;
  min-height: 44px;
  border-radius: var(--r-xs);
  background: none;
  color: var(--murekkep-3);
  font-size: var(--yz-govde);
  font-weight: 600;
  transition: background var(--dur-bas) var(--ev), box-shadow var(--dur-bas) var(--ev), color var(--dur-bas) var(--ev);
}
.hs-kip[aria-pressed='true'] {
  color: var(--murekkep);
  background: linear-gradient(180deg, var(--isik), var(--tas) 96%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(43, 34, 24, 0.11),
    0 3px 0 rgba(43, 34, 24, 0.12);
}
.hs-kip:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hs-kip, .hos-hesap .hs-kutu { transition: none; } }

.hos-hesap .hs-kutu {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px 2px;
  border: 0;
  border-radius: var(--r-plaka);
  background: var(--kagit-3);
  text-align: left;
  transition: box-shadow var(--dur-bas) var(--ev);
}
.hos-hesap .hs-kutu + .hs-kutu { margin-top: 8px; }
/* Odak kutunun KENDİSİNDE görünür — girdi çıplak (border 0, zemin yok),
   tarayıcının kendi çerçevesi kutuyla çakışıyordu. */
.hos-hesap .hs-input:focus { outline: none; }
.hos-hesap .hs-kutu:focus-within { box-shadow: 0 0 0 2px var(--vurgu-koyu); }
.hos-hesap .hs-input { font-size: var(--yz-buyuk); }   /* iOS 16px altında odakta yakınlaştırıyor */
.hos-hesap .hs-not { width: 100%; margin: 10px 0 0; text-align: left; }
.hos-hesap .hs-not:empty { margin: 0; }
.hos-hesap .hs-unuttum { width: 100%; margin-top: 8px; }
.hos-hesap .hs-unuttum[hidden] { display: none; }

/* ═══ § 98 · YAYIN ÖNCESİ AKIŞ CİLASI (2026-10-13) ═══════════════════════
   1 · İMZA AN BİR KEZ — app.js hosCiz. İlk `.hos` ekranı eşittiri çizer
   ve 0,56 sn bekler; sonraki `.hos` ekranları (hesap → karşılama) aynı
   `gnu-yukari` sırasıyla ama bekleyişsiz gelir. Ölçülen önce: düğmeler
   dokunuştan ~1,5 sn sonra. Gecikmeler `--dur-bas` katları — ham sayı yok. */
.hos.hos-hizli > *:not(.hos-levha) { animation-delay: 0s; }
.hos.hos-hizli h1         { animation-delay: calc(var(--dur-bas) * 0.5); }
.hos.hos-hizli .hos-sahne { animation-delay: var(--dur-bas); }
.hos.hos-hizli .hos-soru  { animation-delay: calc(var(--dur-bas) * 1.5); }
.hos.hos-hizli .hos-svler { animation-delay: calc(var(--dur-bas) * 1.5); }
.hos.hos-hizli .hos-eylem { animation-delay: calc(var(--dur-bas) * 2); }
.hos.hos-hizli .hos-not   { animation-delay: calc(var(--dur-bas) * 2.5); }
.hos.hos-hizli .levha::before,
.hos.hos-hizli .levha::after { transform: scaleX(1); transition: none; }
.hos.hos-hizli.ciz .dugme.asit::before { animation: none; }

/* 2 · YENİDEN YÜKLEMEDE BOŞ KARE YOK. Kurs seçimi app'i yeniden yüklüyor
   (veri yolları modül yükünde kuruluyor). Arada ~0,23 sn boş zemin
   görünüyordu; belge-arası görünüm geçişiyle eski ekran yenisi boyanana
   kadar durur ve çapraz söner. Desteklemeyen tarayıcıda hiçbir şey
   değişmez. Hareket azaltılmışsa hiç kurulmaz. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) {
    animation-duration: var(--dur-kisa);
    animation-timing-function: var(--ev);
  }
}

/* 3 · TANITIMDA YANLIŞ — `.secenek.yanlis` (§ 5) ile aynı dil: kiremit
   iç kenar + kâğıt zemin + sitedeki `gnu-sars` fiili. Eskiden yalnız yazı
   soluklaşıyordu; iPhone'da titreşim de olmadığından hiç tepki yoktu. */
.tn-secenek button[data-durum='yanlis'] {
  border-color: var(--vurgu-koyu);
  background: var(--kagit-2);
  color: var(--murekkep);
  box-shadow: inset 0 0 0 1px var(--vurgu-koyu);
}
.tn-secenek button.tn-sars { animation: gnu-sars var(--dur-yavas) var(--ev) both; }
@media (prefers-reduced-motion: reduce) {
  .tn-secenek button.tn-sars { animation: none; }
}

/* 4 · ŞİFRE GÖZÜ · GOOGLE · «HESABIN VAR MI» (2026-10-14 · app.js sifreAlani,
   googleBagla, cizHos). Yeni renk/yarıçap yok: göz düğmesi girdinin içinde
   çıplak ikon (44px dokunma hedefi), Google düğmesi sitenin kâğıt `.dugme`si,
   «Hesabın var mı?» metin bağı. Ayırıcı ÇİZGİ yok (2026-10-06 kuralı) —
   «ya da e-postayla» yalnız küçük yazı. */
.hs-sifre-kap { position: relative; display: block; }
.hs-sifre-kap .hs-input { padding-right: 48px; }
.hs-goz {
  appearance: none;
  position: absolute;
  top: 50%;
  right: -10px;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--murekkep-3);
  cursor: pointer;
}
.hs-goz svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-goz[aria-pressed='true'] { color: var(--murekkep); }
.hs-goz:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: -4px; }

.hs-google-yer { width: 100%; margin-top: 16px; }
.hs-google-yer[hidden] { display: none; }
.hs-google { gap: 10px; }
.hs-google-g { width: 20px; height: 20px; flex: none; }
.hs-ya-da {
  margin: 12px 0 0;
  font-size: var(--yz-kucuk);
  color: var(--murekkep-3);
  text-align: center;
}
/* Ben sekmesinde düğme kutudan sonra geliyor — üst boşluk o kutunun. */
[data-hesap] .hs-google-yer { margin-top: 10px; }

.hos-hesap-var {
  appearance: none;
  display: block;
  margin: 14px auto 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--yz-govde);
  color: var(--murekkep-2);
  cursor: pointer;
}
.hos-hesap-var b { color: var(--vurgu-koyu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hos-hesap-var[hidden] { display: none; }
.hos-hesap-var:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; border-radius: var(--r-xs); }
.hos .hos-hesap-var { animation-delay: 0.93s; }
.hos.hos-hizli .hos-hesap-var { animation-delay: calc(var(--dur-bas) * 2.25); }