/* ============================================================================
   DeutschMut — Panel Kabuğu
   Tüm panel sayfalarının paylaştığı tasarım token'ları ve alt navigasyon.
   ============================================================================ */

:root{
  --cream:#FFF8F0; --cream-dark:#F5EDE3; --peach:#FFE8D6;
  --orange:#FF6B35; --orange-2:#FF8C5E; --orange-glow:rgba(255,107,53,.15);
  --teal:#2EC4B6; --teal-dark:#1BA89C;
  /* --teal-dark ve --orange VURGU renkleri: çizgi, ikon, dolu zemin için
     yapıldılar ve orada iyiler. METİN olarak krem üstünde ikisi de eşiğin
     çok altında (teal-dark 2.54:1, orange 2.69:1 — AA 4.5:1 istiyor).
     Aşağıdaki iki ton aynı renk ailesinin koyu ucu; yalnızca METİN için var.
     Zemin ya da çizgi olarak kullanma, o iş için üstteki tonlar duruyor.
       --teal-deep   krem üstünde 5.79:1, krem-koyu üstünde 5.26:1
       --orange-deep krem üstünde 5.25:1, krem-koyu üstünde 4.76:1
     Değiştirirken content/practice/_yazmauitest.js'teki kontrast kilidini
     de güncelle — orada dört sayfanın hepsi ölçülüyor.

     --orange-deep-2 NEDEN EKLENDİ: birincil düğmenin (.dm-btn-p) zemini bir
     GRADYAN ve gradyanın iki ucu da beyaz yazıyı taşımak zorunda. Eski uçlar
     --orange (beyazla 2.84:1) ve --orange-2 (2.29:1) — ikisi de AA'nın 4.5:1
     eşiğinin çok altında, üstelik düğme yazısı .98rem/800, yani "büyük metin"
     istisnasına da girmiyor. --orange-deep tek başına gradyanı düz renge
     çevirirdi; bu ton onun bir tık açık kardeşi ve beyazla 4.78:1 veriyor.
     Aynı turuncu ailesi (H≈20°), sadece koyu uçta. Zemin olarak kullan;
     METİN olarak yazacaksan --orange-deep zaten var. */
  --teal-deep:#0E6E67; --orange-deep:#B8410E; --orange-deep-2:#C64A14;
  --navy:#1B2A4A; --navy-2:#2D3F5E;
  --white:#fff;
  /* ÜÇ GRİ, ÜÇÜ DE OKUNUR OLMAK ZORUNDA.
     --light gövde metninde kullanılıyor (günlük plandaki alt satırlar, SOS'taki
     durum açıklamaları, yazma masasındaki not satırları) ve hiçbiri "large text"
     değil — yani WCAG AA eşiği 4.5:1. Eski değer #6A7A94 beyazda 4.35, krem
     (#FFF8F0) üstünde 4.13 veriyordu: ikisi de eşiğin altında.
     Yeni değer #62718D — beyazda 4.92:1, krem üstünde 4.67:1. Aynı ton ailesi
     (H≈217°, aynı doygunluk), sadece bir tık koyu; --muted'ın (5.38 / 5.11)
     altında kaldığı için gri merdiveni de duruyor. Bunu değiştirirken
     content/practice/_yazmauitest.js içindeki kontrast kilidini de güncelle. */
  --text:#1B2A4A; --muted:#5A6B8A; --light:#62718D;
  --red:#E5484D; --red-bg:#FEF2F2;
  /* --green ÖNCE #1BA89C, ŞİMDİ #179A8F.
     Neden: bu renk yalnız çizgi/zemin değil, SAYI olarak da yazılıyor —
     ders bitiş ekranındaki "Doğru" sayısı (.dm-done-g b, 1.4rem/700, yani
     büyük metin: eşik 3:1). #1BA89C beyazda 2.95, krem üstünde 2.80 veriyordu;
     ikisi de eşiğin altında. Yeni ton beyazda 3.47, krem üstünde 3.29.
     Aynı turkuaz ailesi, bir tık koyu; --green-bg'ye dokunulmadı, o zaten
     açık zemin. */
  --green:#179A8F; --green-bg:#ECF8F6;
  --amber:#C77700; --amber-bg:#FEF6EC;
  --violet:#6B5CE7; --violet-bg:#F2F0FE;

  --shadow-sm:0 2px 8px rgba(27,42,74,.06);
  --shadow-md:0 4px 16px rgba(27,42,74,.08);
  --shadow-lg:0 16px 44px -12px rgba(27,42,74,.16);
  /* TURUNCU GÖLGE İKİ TANE, DAHA FAZLASI DEĞİL.
     Panelde on bir ayrı turuncu gölge vardı (0 3px 9px .34 → 0 14px 32px .28);
     hepsi aynı işi yapıyordu: dolu turuncu bir ögeyi zeminden kaldırmak.
     Onbirin arasındaki fark gözle seçilmiyor, bakımı ise imkânsız. Aşağıdaki
     iki değer zaten .dm-btn-p'nin duran ve kalkan hâliydi; gerisi bunlara
     bağlandı. -hi yalnızca hover ve manşet ögesi (madalya, seviye rozeti)
     için — 12px'ten fazla düşen gölge küçük ögenin altında yüzüyor gibi
     duruyor. Odak/seçim halkaları (0 0 0 Npx) gölge DEĞİL, onlar dışarıda. */
  --shadow-accent:0 8px 22px rgba(255,107,53,.25);
  --shadow-accent-hi:0 12px 28px rgba(255,107,53,.3);

  --font:'DM Eszett','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;

  /* ══ TİPOGRAFİ ÖLÇEĞİ ═══════════════════════════════════════════════════
     NEDEN VAR: panelde 604 font-size bildirimi ve 73 ayrı değer vardı.
     Tek başına 0,80–0,98rem bandında on sekiz boyut duruyordu
     (.8 .81 .82 .83 .84 .85 .86 .87 .88 .89 .9 .91 .92 .93 .94 .95 .96 .98)
     — yani 12,8px ile 15,7px arasında on sekiz kademe. Gözle ayırt edilmiyor,
     ama ekran "biri toplamaya vakit bulamamış" gibi duruyordu.

     BASAMAKLAR NEREDEN GELDİ: uydurulmadı, mevcut dağılımdan çıkarıldı.
     604 bildirimin hepsi tarandı, oran 1,08–1,32 arasında taranıp her aday
     ölçek için "kullanım ağırlıklı kayma" hesaplandı. En küçük kaymayı
     1,20 oranı (minör üçlü) ve 0,68rem tabanı verdi: ortalama kayma %5,4 ve
     604 bildirimin yalnızca 14'ü yarım basamaktan fazla oynuyor. En yoğun iki
     değer (.78 → 37 kullanım, .82 → 28) ikinci basamakta buluşuyor; asıl
     gövde metni orada duruyor.
       --fs-1  10,9px  büyük harfli mikro etiket, alt menü, rozet
       --fs-2  13,1px  GÖVDE — panelin varsayılan metni
       --fs-3  15,7px  öne çıkan gövde, buton yazısı, kart alt başlığı
       --fs-4  18,9px  kart başlığı (serif)
       --fs-5  22,6px  bölüm başlığı
       --fs-6  27,2px  sayfa manşeti
       --fs-7  32,5px  skor/sayı manşeti
     Ölçek dışında BİLEREK bırakılanlar: .55/.58/.6rem (alt menü etiketi ve
     takvim gün harfi — 400px'te bunları %13–21 büyütmek etiketi ikinci
     satıra kırıyor) ve 2.35/2.55rem (tek kullanımlık dev sayılar, en üst
     basamağa indirmek bir basamaktan fazla düşürüyor). */
  --fs-1:.68rem; --fs-2:.82rem; --fs-3:.98rem; --fs-4:1.18rem;
  --fs-5:1.41rem; --fs-6:1.7rem; --fs-7:2.03rem;
  /* Ölçek basamağı DEĞİL, bir kural: iOS Safari 16px'ten küçük bir girdiye
     odaklanınca sayfayı kendiliğinden yakınlaştırıyor ve geri çıkmıyor.
     --fs-3 15,68px — girdilerde kullanılamaz. Her input/textarea bu token'ı
     kullanır; kilit content/practice/_yazmauitest.js senaryo I'da. */
  --fs-input:1rem;

  /* Satır aralığı: 19 ayrı değer vardı (1 → 1.72). Dört basamak yetiyor,
     adımlar eşit (+0,15) — çarpan bir ölçek burada sıkışıyor, çünkü satır
     aralığı 1,2 ile 1,7 arasına hapis. En yoğun üç değer 1.6 / 1.55 / 1.5
     (147 kullanım) ikisi arasında paylaşıldı, ikisinin de kayması %3.
     line-height:1 bir sıfırlama (büyük sayı, ikon kutusu), ölçeğe girmiyor. */
  --lh-tight:1.2; --lh-snug:1.35; --lh-base:1.5; --lh-loose:1.65;

  --radius:20px; --radius-sm:14px; --radius-xs:10px; --radius-pill:100px;

  /* ══ BOŞLUK ÖLÇEĞİ ══════════════════════════════════════════════════════
     NEDEN VAR: 1162 boşluk değeri, 36 ayrı px, pozitiflerin yalnızca 9/30'u
     4'ün katı. 10px–11px–12px–13px–14px yan yana kullanılıyordu; hiçbirinin
     diğerine tercih sebebi yoktu.

     BASAMAKLAR NEREDEN GELDİ: dağılımın tepe noktaları sırayla 14px (156),
     12px (125), 10px (95), 16px (85), 6px (77), 11px (77) ve 20px (45).
     Dört aday ölçek toplam px kayması üzerinden karşılaştırıldı; en azını
     4/8/12/16/20/28 verdi (1433px, basamağa oturan 384 bildirim) —
     4/8/12/16/24/32'den daha iyi, çünkü 20px kartların gerçek dolgusu ve
     onu 24'e itmek 45 bildirimi boşuna oynatıyor. İlk beş basamak 4'lük
     adım, altıncı sıçramalı: 26–34px bandındaki seyrek büyük boşluklar için.
       --sp-1  4px   ikon–yazı arası, rozet dolgusu
       --sp-2  8px   satır içi öge arası
       --sp-3  12px  kart içi satır arası
       --sp-4  16px  sayfa oluğu, kart arası
       --sp-5  20px  kart dolgusu
       --sp-6  28px  bölüm arası

     EŞİTLİK KURALI (6/10/14/18/24 tam iki basamağın ortasında):
     dikey konumda YUKARI yuvarlandı — sayfa uzar, hiçbir şey taşmaz.
     Yatay konumda ve tek değerli kısayolda AŞAĞI — 360px telefonda yatayda
     büyütmek taşma üretiyor. Sabit yükseklikli (height/min-height) bir
     kuralda dikey de aşağı yuvarlanır, yoksa içerik kutuyu taşırıyor.

     4px ALTI ÖLÇEĞE GİRMEZ: 1/2/3px'lik 67 bildirim optik hizalama
     (ikonu yarım piksel yukarı alma, minik çip dolgusu). 4'e çekmek
     çipin boyunu görünür biçimde değiştiriyor. --tap (44px) ve gövdenin
     90px'lik alt boşluğu da dışarıda: ikisi ölçek değil, kural.

     KİLİT: content/practice/_yazmauitest.js senaryo P. Ölçek dışına çıkan bir
     font-size/boşluk/line-height bildirimi eklenince test düşüyor; izin
     verilen değerleri bu bloktan OKUYOR, listesi elle yazılmadı. Basamak
     değerini değiştirmek serbest — ölçeğin biçimini bozmak (oran, 4'ün katı,
     basamak sayısı) değil. Gerçek bir istisna gerekiyorsa senaryo P'deki
     gerekçeli listeye eklenir. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;

  --spring:cubic-bezier(.34,1.4,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
  --tap:44px;
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--cream);color:var(--text);line-height:var(--lh-loose);
  -webkit-font-smoothing:antialiased;min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

/* Arka plan dokusu */
.dm-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dm-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.14;display:block}
.dm-bg i:first-child{width:420px;height:420px;background:var(--peach);top:-140px;right:-120px}
.dm-bg i:last-child{width:340px;height:340px;background:rgba(46,196,182,.4);bottom:8%;left:-110px}

.dm-page{position:relative;z-index:1;width:100%;max-width:600px;margin:0 auto;
  padding:var(--sp-4) var(--sp-4) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}

/* ── Üst çubuk ── */
.dm-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap)}
.dm-brand{font-family:var(--font-serif);font-size:var(--fs-4);font-weight:700;letter-spacing:-.3px;
  color:var(--navy);text-decoration:none}
.dm-brand em{color:var(--orange);font-style:normal}
.dm-top-r{display:flex;align-items:center;gap:var(--sp-2)}
.dm-streak{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--white);
  border:1px solid rgba(27,42,74,.07);border-radius:var(--radius-pill);padding:0 var(--sp-3) 0 var(--sp-3);
  height:var(--tap);box-shadow:var(--shadow-sm);font-weight:700;font-size:var(--fs-2);
  font-variant-numeric:tabular-nums;color:var(--navy)}
.dm-streak svg{width:15px;height:15px;color:var(--orange);flex-shrink:0}
.dm-streak.off svg{color:var(--light)}
.dm-back{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--muted);text-decoration:none;
  font-size:var(--fs-2);font-weight:600;padding:0 var(--sp-3) 0 var(--sp-2);height:var(--tap);border-radius:var(--radius-xs)}
/* Hover kuralları fare/imleç olan cihazlara kilitli. Dokunmatikte
   :hover bir kez tetikleniyor ve parmak kalkınca ÜSTTE KALIYOR —
   öğrenci dokunduğu kartı "seçili" sanıyor. (hover:hover) bunu keser. */
@media (hover:hover) and (pointer:fine){
.dm-back:hover{color:var(--orange);background:var(--white)}
}
.dm-back:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.dm-back svg{width:16px;height:16px}

/* ── Kart ── */
.dm-card{background:var(--white);border:1px solid rgba(27,42,74,.06);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:var(--sp-5)}
.dm-card-t{font-family:var(--font-serif);font-size:var(--fs-3);font-weight:700;letter-spacing:-.2px;
  display:flex;align-items:center;gap:var(--sp-2)}
.dm-kicker{font-size:var(--fs-1);font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--light)}
.dm-sub{font-size:var(--fs-2);color:var(--muted);line-height:var(--lh-base)}

/* ── Buton ──
   BİRİNCİL DÜĞMENİN TEK TANIMI BURADA. Panelde dokuz sayfanın yedisi kendi
   birincil düğmesini yazıyordu (.btn-p, .btn-x, .ck-btn, .go…) ve aynı iş
   için min-height dokuz ayrı sayıydı: 52 (on kez), 40, 46, 50, 54, 56, 58,
   64, 76. Farkın hiçbiri bir karar değildi. .dm-btn ölçüyü veriyor; yerel
   adlar aşağıdaki seçici listesine bağlandı, kendi min-height'ını yazmıyor.
   BİLEREK DIŞARIDA: tam ekran sesli mod düğmeleri (.mic, .audio-btn,
   .gonder, .echo-btn) — onlar dairesel ve boyu genişliğine kilitli. */
.dm-btn,
/* panel-konus / panel-rol / panel-sinav: koyu lacivert birincil düğme —
   rengi farklı, ÖLÇÜSÜ aynı olmalı. */
.btn-x,
/* panel-yol: "biliyor musun?" kutusunun onay düğmesi (eski 46px). */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;
  min-height:52px;border:none;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:800;font-size:var(--fs-3)}
/* BİRİNCİL DÜĞME ZEMİNİ KOYULAŞTI.
   ÖNCE: linear-gradient(135deg, --orange #FF6B35, --orange-2 #FF8C5E)
         beyaz yazı → 2.84:1 ve 2.29:1
   SONRA: --orange-deep #B8410E → --orange-deep-2 #C64A14
         beyaz yazı → 5.53:1 ve 4.78:1
   Yazı .98rem/800 (15,7px) — "büyük metin" istisnası yok, eşik 4.5:1.
   Panelin en çok basılan düğmesi en zor okunan şeydi; öğrenciler akşam,
   dışarıda, yorgun gözle kullanıyor. Turuncu duruyor, sadece koyulaştı.
   Gölge --shadow-accent aynı kaldı: gölge kontrast taşımıyor, marka
   sıcaklığını taşıyan şey o. */
.dm-btn-p{background:linear-gradient(135deg,var(--orange-deep),var(--orange-deep-2));color:var(--white);
  box-shadow:var(--shadow-accent)}
@media (hover:hover) and (pointer:fine){
.dm-btn-p:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent-hi)}
}
.dm-btn-s{background:var(--white);color:var(--navy);border:1.5px solid rgba(27,42,74,.13)}
@media (hover:hover) and (pointer:fine){
.dm-btn-s:hover{border-color:var(--navy);background:var(--cream)}
}
.dm-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dm-btn svg{width:17px;height:17px;flex-shrink:0}

/* ══ BASMA GERİ BİLDİRİMİ ═══════════════════════════════════════════════════
   NEDEN VAR: panelde 87 :hover kuralına karşılık 5 :active kuralı vardı.
   Öğrencilerin çoğu telefonda ve hover orada ya hiç tetiklenmiyor ya da
   parmak kalkınca üstte kalıyordu. Yani öğrenci bir karta dokunduğunda
   ekran HİÇBİR ŞEY söylemiyordu; dokunmanın kaydedildiğini ancak sayfa
   değişince — ağ gecikmesi kadar sonra — anlıyordu. "Bastım mı?" hissi
   pahalı görünmeyen bir arayüzün en büyük tek kalemi.

   TEK HİS, HER YERDE AYNI:
     · %3 küçülme (parmağın altında geri çekilen yüzey)
     · gölge bir kademe iner (--shadow-sm) — yüzey masaya yaklaşır
     · 90 ms, --out eğrisi. Bir dokunuş ~100 ms sürüyor: geçiş bundan uzun
       olursa parmak kalkmadan görünmez. --spring burada kullanılmıyor,
       sıçrama BIRAKMA anında iyi, basma anında gecikme gibi duruyor.

   SEÇİCİ LİSTESİ NEDEN BURADA: his tek yerden tanımlansın diye sayfaların
   yerel sınıf adları bilerek bu dosyada sayılıyor. Aynı ad o sayfalarda
   tıklanamayan bir kutuya da verilmiş olabiliyor — button.row (panel-yazma'da
   düğme, panel-profile'da ayar satırı), button.tip (panel-konus'ta düğme,
   panel-practice'te bilgi kutusu), button.f (panel-vocab'da süzgeç düğmesi,
   ayrıca dolu nokta işareti), button.x — bunlar öge tipiyle daraltıldı.

   ÖZGÜLLÜK: sayfaların <style> bloğu bu dosyadan SONRA yükleniyor, yani eşit
   özgüllükteki yerel bir :hover kuralı basma hâlini yenerdi. Baştaki
   'body ' bir tür seçicisi ekliyor: aynı sınıf sayısında bu kural kazanıyor,
   fareli cihazda hover'lı öge basılınca da küçülüyor.

   GEÇİŞ DE BURADAN: bu listedeki ögelerde 'transition:all' kullanan yerel
   kurallar vardı (layout tetikliyor, basmayı 180 ms'e yayıyor). 'body ' ön
   eki bu kuralı onlardan da özgün kıldığı için hangi özelliğin geçtiği artık
   tek yerde ve açık yazılı. */
:root{
  /* Ölçek basamağı DEĞİL, bir açma/kapama anahtarı: hareketi azalt diyen
     öğrencide ölçek kapanır (1), basıldığı gölge + opaklıkla belli olmaya
     devam eder. Aşağıdaki @media bunu çeviriyor. */
  --dm-press-s:.97;
}
@media (prefers-reduced-motion:reduce){ :root{ --dm-press-s:1 } }

body :is(.dm-press,.dm-btn,.dm-back,.dm-gb-link,.dm-gb-x,.dm-gb-k label,.dm-nav a,
  .task,.me,.libx,.skip,
  button.tip,.oner button,.serit-b,.dinle,.mic,.gonder,.dilsec button,.bitir,
  .btn-x,.btn-alt,.gec-kapat,.gec-sec button,.gec-sat,.gec-daha,.gec-yeni,
  .item,.les,.les-uzun,
  .cat,.set,.audio-btn,.audio-help button,.echo-btn,.echo-help button,.run-x,.opt,.tok,.sim,
  .goal button,.logout,.tab,button.x,
  .sah,.rep-b,.rep-alt,.ipucu-b,.top-x,.ans,.next-i,
  .exam,.mod-sec,.dur,.kisa-link,.cum-s,.cum-y,.geri,.lnk,
  .quit,.sound,.es,.b2,.oto-row,.undo,
  .today-again,.att,.qb,button.f,.w,.more,.add,.icon-btn,
  button.row,.lvl-head,.unit,.unit-act-b,.can-more,.ck-x,.ck-opt,.ck-btn,.ck-alt,
  .assigned-link,.step-go,.fehler-go){
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s var(--out),box-shadow .12s ease,background-color .14s ease,
    border-color .14s ease,color .14s ease,opacity .12s ease;
}
body :is(.dm-press,.dm-btn,.dm-back,.dm-gb-link,.dm-gb-x,.dm-gb-k label,.dm-nav a,
  .task,.me,.libx,.skip,
  button.tip,.oner button,.serit-b,.dinle,.mic,.gonder,.dilsec button,.bitir,
  .btn-x,.btn-alt,.gec-kapat,.gec-sec button,.gec-sat,.gec-daha,.gec-yeni,
  .item,.les,.les-uzun,
  .cat,.set,.audio-btn,.audio-help button,.echo-btn,.echo-help button,.run-x,.opt,.tok,.sim,
  .goal button,.logout,.tab,button.x,
  .sah,.rep-b,.rep-alt,.ipucu-b,.top-x,.ans,.next-i,
  .exam,.mod-sec,.dur,.kisa-link,.cum-s,.cum-y,.geri,.lnk,
  .quit,.sound,.es,.b2,.oto-row,.undo,
  .today-again,.att,.qb,button.f,.w,.more,.add,.icon-btn,
  button.row,.lvl-head,.unit,.unit-act-b,.can-more,.ck-x,.ck-opt,.ck-btn,.ck-alt,
  .assigned-link,.step-go,.fehler-go):active:not(:disabled){
  transform:scale(var(--dm-press-s));
  /* Ölçek kapalıyken (hareketi azalt) basıldığını söyleyen şey bu; ölçek
     açıkken de yüzeyin "geri çekilme" hissini güçlendiriyor. Gölge basma
     hâlinde topluca DÜŞÜRÜLMÜYOR: listedeki ögelerin çoğu düz, gölgesiz
     (çip, metin bağlantısı, alt menü) — onlara gölge eklemek basmayı
     kalkma gibi gösterir. Gölgesi olan tek öge birincil düğme, o aşağıda. */
  opacity:.88;
}
/* Birincil düğme hover'da --shadow-accent-hi'ye kalkıyor; basılınca duran
   hâline iner. Yüzey masaya yaklaşıyor. */
body .dm-btn-p:active:not(:disabled){box-shadow:var(--shadow-accent)}

/* ══ BEKLEME ÇARKI ═══════════════════════════════════════════════════════
   İKİZİ lesson-flow.css'te. O dosya ders motorunun; panel sayfaları onu
   YÜKLEMİYOR, yani orada tanımlı .dm-busy / .is-busy burada hiç yok.
   Sınıf adı bilerek aynı: öğrenci için "bekle" her yerde aynı şey olsun,
   biri değişirse ötekini de değiştirmek gerektiği adından belli olsun.

   TEK FARK, gerekçesiyle: ders motorundaki çark BEYAZ, çünkü orada yalnız
   koyu düğmelerin (.dm-check, .dm-send) üstünde duruyor. Panelde aynı
   bekleme beyaz kartlara da biniyor (pratik set satırı) — beyaz çark orada
   görünmez. currentColor: koyu düğmede yazı rengi beyaz olduğu için birebir
   aynı görünüyor, beyaz kartta lacivert olup görünür kalıyor.

   Çark yazının SAĞINDA: etiket okunmaya devam ediyor. Etiketi gizleyip
   yerine çark koymak öğrencinin neyi beklediğini de gizliyordu. */
.dm-busy,.is-busy{position:relative;pointer-events:none}
.dm-busy::after,.is-busy::after{content:'';position:absolute;right:15px;top:50%;
  margin-top:-9px;width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  border:2.5px solid currentColor;border-top-color:transparent;opacity:.55;
  animation:dmSpin .62s linear infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}

/* ══ BOŞ DURUM — TEK BİLEŞEN ══════════════════════════════════════════════
   NEDEN VAR: panelde dört ayrı boş durum görsel dili vardı ve dördü de
   "burada bir şey yok" diyordu:
     · pratik   — ortalanmış düz yazı, ikon yok, düğme yok (çıkmaz sokak)
     · konuşma  — krem zeminli tek paragraf (.gec-bos)
     · sözlük   — daire ikon + başlık + açıklama, çerçevesiz
     · yazma    — kesik çerçeveli kart + başlık + açıklama + CTA
   Dördü de aynı anı anlatıyor ama öğrenci her sayfada başka bir şey
   görüyordu. Taban YAZMA'nınki: tek gerçek çıkış yolu (CTA) oradaydı.
   Sözlüğün ikonu da alındı, çünkü ikon "burası bozuk değil, sadece boş"
   bilgisini yazıdan önce veriyor.

   ÇIKIŞ YOLU KURALI: .dm-empty kullanan her yerde ya bir .dm-btn ya da
   yakınında duran bir başka eylem olmalı. Boş bir ekranda öğrencinin tek
   seçeneği telefonun geri düğmesi olmamalı.

   .tam — ekranın TAMAMINI kaplayan hâli (sözlük oturumu: yükleniyor, hata,
   bitti). Orada kesik çerçeve bir kutu değil, ekranın kendisi olurdu;
   çerçeve kalkıyor, ölçüler büyüyor. Aynı bileşenin ikinci hâli, ikinci
   bir dil değil: renk, boşluk, ikon kutusu ve CTA aynı. */
.dm-empty{background:var(--white);border:1px dashed rgba(27,42,74,.18);
  border-radius:var(--radius);padding:var(--sp-5) var(--sp-5);text-align:center}
.dm-empty-i{width:64px;height:64px;border-radius:50%;margin:0 auto var(--sp-3);
  background:var(--cream-dark);color:var(--light);display:grid;place-items:center}
.dm-empty-i svg{width:28px;height:28px}
.dm-empty b,.dm-empty h2{display:block;font-family:var(--font-serif);font-size:var(--fs-3);
  font-weight:700;color:var(--navy);margin-bottom:var(--sp-2);letter-spacing:-.2px}
.dm-empty span,.dm-empty p{display:block;font-size:var(--fs-2);color:var(--muted);
  line-height:var(--lh-loose);max-width:36ch;margin:0 auto var(--sp-4)}
.dm-empty .dm-btn{max-width:280px;margin:0 auto var(--sp-2)}
.dm-empty .dm-btn:last-child{margin-bottom:0}
.dm-empty.tam{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border:0;background:none;padding:var(--sp-6) var(--sp-4)}
.dm-empty.tam .dm-empty-i{width:76px;height:76px}
.dm-empty.tam .dm-empty-i svg{width:34px;height:34px}
.dm-empty.tam b,.dm-empty.tam h2{font-size:var(--fs-5);letter-spacing:-.4px}

/* ── İskelet ── */
.dm-sk{background:linear-gradient(90deg,var(--cream-dark) 25%,#EFE5D9 50%,var(--cream-dark) 75%);
  background-size:200% 100%;animation:dmSh 1.4s linear infinite;border-radius:var(--radius-xs)}
@keyframes dmSh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Alt navigasyon ── */
.dm-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-top:1px solid rgba(27,42,74,.07);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-shadow:0 -4px 20px rgba(27,42,74,.05);
}
/* Sütun sayısı sabit değil: panel-shell.js'teki TABS kaç sekme veriyorsa o
   kadar eşit sütun açılır. Sabit repeat(5,1fr) ile altıncı sekme taşıyordu. */
.dm-nav-in{max-width:600px;margin:0 auto;display:grid;
  grid-auto-flow:column;grid-auto-columns:1fr;
  height:var(--nav-h)}
/* min-width:0 — emniyet kemeri. Izgara ögesinin varsayılan min-width'i 'auto',
   yani sütun min-content'in altına inmiyor; o hâlde aşağıdaki
   text-overflow:ellipsis hiçbir koşulda devreye giremez ve etiket kısalmak
   yerine ızgarayı taşırır. Bugün 360px'te taşma yok ama sekme sayısı ya da
   etiket uzunluğu değişince sessizce bozulmasın. */
.dm-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0;
  text-decoration:none;color:var(--light);font-size:var(--fs-1);font-weight:700;
  transition:color .16s ease;position:relative;padding-top:3px}
.dm-nav a svg{width:21px;height:21px;transition:transform .18s var(--spring)}
@media (hover:hover) and (pointer:fine){
.dm-nav a:hover{color:var(--navy-2)}
}
.dm-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:-4px;border-radius:var(--radius-xs)}
/* AKTİF SEKME — renk TEK işaret değil.
   ÖNCE: color:--orange (#FF6B35) beyaz zeminde 2.84:1. Etiket --fs-1
   (10,9px), yani küçük metin: eşik 4.5:1. SONRA: --orange-deep 5.53:1.
   Renk körü ve düşük kontrast için renkten bağımsız İKİ işaret daha var:
   üstteki 3px'lik çubuk (::before, aşağıda) ve etiketin kalınlaşması
   (700 → 800). Üçü birden gitmeden "buradasın" bilgisi kaybolmuyor. */
.dm-nav a[aria-current="page"]{color:var(--orange-deep);font-weight:800}
.dm-nav a[aria-current="page"] svg{transform:translateY(-1px) scale(1.06)}
/* Çubuk da koyulaştı: zemine karşı 2.84/2.29 idi, bir GÖSTERGE olarak
   eşiği 3:1 (WCAG 1.4.11). Şimdi 5.53 ve 4.78. */
.dm-nav a[aria-current="page"]::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep-2));
}
.dm-nav-badge{position:absolute;top:6px;right:calc(50% - 20px);min-width:17px;height:17px;
  border-radius:var(--radius-xs);background:var(--orange);color:#fff;font-size:.6rem;font-weight:800;
  display:grid;place-items:center;padding:0 var(--sp-1);box-shadow:0 2px 6px rgba(255,107,53,.4)}

/* ── Ekran okuyucu ── */
.dm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* [hidden] burada da geçerli olmak zorunda: geri bildirim penceresi bu
   dosyadaki sınıflarla çiziliyor ve panel sayfalarının kendi kuralına
   güvenemez (bir sayfa unutursa pencere kapalıyken de görünür kalır). */
[hidden]{display:none!important}

/* ══ Geri bildirim ══════════════════════════════════════════════════════
   Alt menüde sekmesi YOK (yedinci sekme dar telefonda taşıyor). Giriş,
   sayfanın en sonundaki sessiz satır — sabit alan işgal etmiyor. */
.dm-gb-link{display:block;width:100%;min-height:var(--tap);margin-top:var(--sp-1);
  background:none;border:0;border-top:1px dashed rgba(27,42,74,.14);
  padding:var(--sp-3) var(--sp-1) var(--sp-1);cursor:pointer;
  font-family:var(--font);font-size:var(--fs-2);font-weight:600;color:var(--muted);
  text-align:center;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
.dm-gb-link:hover{color:var(--orange-deep)}
}
.dm-gb-link:focus-visible{outline:3px solid var(--orange);outline-offset:2px;
  border-radius:var(--radius-xs)}

/* ══ Yasal alt bilgi ═════════════════════════════════════════════════════
   Panelin her sayfasında, geri bildirim satırının altında. İçindeki
   „Verträge hier kündigen“ bağı § 312k BGB gereği her sayfada bulunmak
   zorunda; kaldırılırsa tüketici aboneliği süre gözetmeden feshedebilir
   hâle gelir (§ 312k Abs. 6). Bekçi: content/practice/_kuendigungtest.js
   Dokunma hedefi 44px (--tap) — bağlar birbirine yapışmasın. */
.dm-yasal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 var(--sp-1);padding:var(--sp-2) var(--sp-1) var(--sp-3);
  border-top:1px dashed rgba(27,42,74,.14);margin-top:var(--sp-2)}
.dm-yasal a{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--sp-1);font-family:var(--font);font-size:var(--fs-2);
  color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
.dm-yasal a:hover{color:var(--orange-deep)}
}
.dm-yasal a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;
  border-radius:var(--radius-xs)}

.dm-gb-ol{position:fixed;inset:0;z-index:120;background:rgba(27,42,74,.42);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  overflow-y:auto;animation:dmGbIn .18s var(--out)}
@keyframes dmGbIn{from{opacity:0}to{opacity:1}}
.dm-gb{width:100%;max-width:600px;background:var(--white);
  border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lg);
  padding:var(--sp-5) var(--sp-4) calc(20px + env(safe-area-inset-bottom,0px));
  max-height:92dvh;overflow-y:auto}
@media (min-width:601px){
  .dm-gb-ol{align-items:center;padding:var(--sp-5)}
  .dm-gb{border-radius:var(--radius)}
}
.dm-gb-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.dm-gb-h h2{font-family:var(--font-serif);font-size:var(--fs-4);font-weight:700;
  letter-spacing:-.2px;color:var(--navy)}
.dm-gb-x{width:var(--tap);height:var(--tap);flex-shrink:0;margin:-8px -8px -8px 0;
  background:none;border:0;border-radius:var(--radius-xs);cursor:pointer;
  color:var(--muted);display:grid;place-items:center}
.dm-gb-x svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){
.dm-gb-x:hover{background:var(--cream);color:var(--navy)}
}
.dm-gb-x:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.dm-gb-s{font-size:var(--fs-2);line-height:var(--lh-base);color:var(--muted);margin-bottom:var(--sp-4)}

.dm-gb-k{border:0;margin:0 0 var(--sp-4)}
.dm-gb-k legend{font-size:var(--fs-1);font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--light);margin-bottom:var(--sp-2);padding:0}
.dm-gb-k label{display:inline-flex;align-items:center;min-height:var(--tap);
  margin:0 var(--sp-2) var(--sp-2) 0;cursor:pointer}
.dm-gb-k input{position:absolute;opacity:0;width:1px;height:1px}
.dm-gb-k span{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--sp-4);
  border:1.5px solid rgba(27,42,74,.13);border-radius:var(--radius-pill);
  font-size:var(--fs-2);font-weight:700;color:var(--navy-2);background:var(--white);
  transition:border-color .15s ease,background .15s ease}
.dm-gb-k input:checked + span{border-color:var(--orange);background:var(--orange-glow);
  color:var(--orange-deep)}
.dm-gb-k input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}

.dm-gb-l{display:block;font-size:var(--fs-2);font-weight:700;color:var(--navy-2);
  margin-bottom:var(--sp-2)}
.dm-gb textarea{width:100%;font-family:var(--font);font-size:var(--fs-3);line-height:var(--lh-loose);
  color:var(--text);background:var(--cream);border:1.5px solid rgba(27,42,74,.13);
  border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-3);resize:vertical;min-height:120px}
.dm-gb textarea:focus{outline:3px solid var(--orange);outline-offset:1px;
  border-color:transparent}
.dm-gb-c{font-size:var(--fs-1);color:var(--light);margin:var(--sp-2) 0 var(--sp-4);
  font-variant-numeric:tabular-nums}
/* Hata satırı: aria-live YOK, odak buraya taşınıyor (panel sayfalarının
   çoğunda zaten bir canlı bölge var, ikincisi çift okumaya yol açıyor). */
.dm-gb-e{font-size:var(--fs-2);line-height:var(--lh-base);color:var(--red);background:var(--red-bg);
  border-radius:var(--radius-xs);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-3)}
.dm-gb-e:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.dm-gb-ok{font-size:var(--fs-3);line-height:var(--lh-loose);color:var(--navy-2);
  background:var(--green-bg);border-radius:var(--radius-xs);padding:var(--sp-4) var(--sp-3);
  margin-bottom:var(--sp-4)}
.dm-gb-ok:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* Altı sekmede dar telefonda etiket iki satıra kırılıyordu; tek satırda
   kalsın, sığmıyorsa üç nokta ile kısalsın. */
.dm-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ALT MENÜ ETİKETİ KÜÇÜLTÜLMÜYOR.
   ÖNCE: 400px altında .58rem = 9,3px. SONRA: her genişlikte --fs-1 (.68rem
   = 10,9px). 9,3px hedef kitlenin okuyabileceği bir boy değil — panel akşam,
   dışarıda, geniş bir yaş aralığında açılıyor.
   ÖLÇÜLDÜ (Poppins Bold ile; Plus Jakarta Sans ondan dar, yani bu üst sınır):
     375px'te sütun 62,5px · en uzun etiket "Ana sayfa" 56,7px → sığıyor
     360px'te sütun 60,0px · 56,7px → sığıyor
   ~340px'in altında "Ana sayfa" sütuna sığmıyor ve üç noktayla kısalıyor
   (.dm-nav a span'deki ellipsis). Bu bilinçli takas: okunur ama kısalmış bir
   etiket, tam ama okunmayan bir etiketten iyi. İkon zaten yanında duruyor.
   İkonu küçültme kuralı kalıyor — o etiketin yerini açıyor. */
@media (max-width:400px){
  .dm-nav a svg{width:19px;height:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* Bekleme çarkı dönmüyor ama halka duruyor: düğmenin meşgul olduğu yine
     görünüyor. Yukarıdaki .01ms kuralı çarkı "durdurmuyor", çok hızlı
     döndürüp titretiyordu — lesson-flow.css'teki ikizi gibi tamamen kapat. */
  .dm-busy::after,.is-busy::after{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   GEÇİŞ ŞERİDİ — "şifreni kur"
   --------------------------------------------------------------------------
   Mevcut öğrenciler panele hâlâ eski yolla giriyor (şifreleri yok, öğretmenin
   vereceği kodu bekliyorlar). Onları kilitlemiyoruz; şeritle çağırıyoruz.
   Şerit sayfanın en üstünde, akışın içinde duruyor — üstüne binen bir katman
   değil, çünkü öğrencinin işini kesmiyor.
   Dokunma hedefleri --tap (44px): kapat düğmesi de bağlantı da.
   ══════════════════════════════════════════════════════════════════════════ */
.dm-gecis-serit{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--amber-bg);color:var(--text);
  border-bottom:1px solid rgba(199,119,0,.22);
  font-size:var(--fs-2);line-height:var(--lh-snug)}
.dm-gecis-metin{flex:1;min-width:0}
.dm-gecis-eylem{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--sp-4);
  border-radius:var(--radius-pill);background:var(--orange-deep-2);color:var(--white);
  font-weight:700;font-size:var(--fs-2);text-decoration:none;white-space:nowrap}
.dm-gecis-eylem:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.dm-gecis-kapat{
  min-width:var(--tap);min-height:var(--tap);
  border:0;background:none;color:var(--muted);
  font-size:var(--fs-4);line-height:1;cursor:pointer;border-radius:var(--radius-xs)}
.dm-gecis-kapat:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (max-width:520px){
  .dm-gecis-serit{flex-wrap:wrap}
  .dm-gecis-metin{flex:1 1 100%;order:1}
  .dm-gecis-eylem{order:2}
  .dm-gecis-kapat{order:3;margin-left:auto}
}


/* ══════════════════════════════════════════════════════════════════════════
   ANA EKRANDAN AÇILDIĞINDA (standalone)
   --------------------------------------------------------------------------
   Tarayıcı çubuğu yok demek, çentik ve alttaki ev çubuğu İÇERİĞİN ÜSTÜNE
   geliyor demek. Güvenli alan değişkenleri olmadan üst başlık çentiğin
   altında kalıyor, alt menü ev çubuğunun altında kayboluyor — "uygulama
   gibi" hissi tam burada bozuluyor.

   `viewport-fit=cover` ŞART; onsuz env() sıfır dönüyor (pwa-etiket.py
   bütün panel sayfalarına basıyor).
   ══════════════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .dm-top   { padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
  .dm-nav   { padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom)); }
  .dm-page  { padding-left: max(var(--sp-4), env(safe-area-inset-left));
              padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
  /* Standalone'da tarayıcının geri düğmesi YOK. Panelin kendi geri bağlantısı
     (.dm-back) tarayıcıda gereksizdi ve gizliydi; burada tek çıkış yolu. */
  .dm-back  { display: inline-flex; }
}

/* ── Ana ekrana ekleme teklifi ─────────────────────────────────────────────
   Alttan gelen bir şerit, ekranı kaplayan bir pencere DEĞİL: öğrenci bir işi
   yeni bitirmiş, önünü kapatmak o anı bozar. Kapatması tek dokunuş. */
.dm-kur{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--sp-4);
  padding-bottom:max(var(--sp-4), env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .26s cubic-bezier(.16,1,.3,1);
  pointer-events:none}
.dm-kur.acik{transform:translateY(0);pointer-events:auto}
.dm-kur-in{max-width:520px;margin:0 auto;background:var(--white);
  border:1px solid rgba(27,42,74,.08);border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(27,42,74,.16);padding:var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.dm-kur-ik{flex:none;width:48px;height:48px;border-radius:12px}
.dm-kur-tx{flex:1;min-width:180px}
.dm-kur-tx b{display:block;font-size:var(--fs-3);color:var(--navy);margin-bottom:2px}
.dm-kur-tx span{display:block;font-size:var(--fs-2);color:var(--muted);
  line-height:var(--lh-base)}
.dm-kur-dg{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.dm-kur-kapat{background:none;border:0;font-family:var(--font);
  font-size:var(--fs-2);font-weight:700;color:var(--muted);cursor:pointer;
  min-height:var(--tap);padding:0 var(--sp-2)}
/* Hover YALNIZ fare/imleç olan cihazlarda. Dokunmatikte :hover bir kez
   tetikleniyor ve parmak kalkınca ÜSTTE KALIYOR — öğrenci dokunduğu düğmeyi
   "seçili" sanıyor. */
@media (hover:hover) and (pointer:fine){
  .dm-kur-kapat:hover{color:var(--navy)}
}
@media (max-width:460px){
  .dm-kur-dg{width:100%;justify-content:space-between}
}

/* ── Panel içi tanıtım turu ───────────────────────────────────────────────────
   Perde + hedefin üstünde bir ışık halkası + altta/üstte bir kart.

   NEDEN clip-path DEĞİL: perdeye delik açmanın temiz yolu clip-path ama
   Safari'de kaydırma sırasında delik titriyor ve bazı sürümlerde hiç
   çizilmiyor — öğrencinin ekranı tamamen kararıyor. Onun yerine halka
   KENDİ box-shadow'uyla çevresini karartıyor: hedefin üstünde hiç katman
   yok, yani vurgulanan şey gerçekten görünüyor. */
.dm-tur{position:fixed;inset:0;z-index:90}
.dm-tur-perde{position:absolute;inset:0;background:rgba(27,42,74,.55)}
.dm-tur-halka{position:fixed;border-radius:var(--radius-sm);
  border:2px solid var(--orange);
  box-shadow:0 0 0 9999px rgba(27,42,74,.55);
  pointer-events:none;transition:all .18s ease}
.dm-tur-kart{position:fixed;z-index:2;width:min(92vw,420px);
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(27,42,74,.28);
  padding:var(--sp-5);outline:none}
.dm-tur-ust{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-2)}
.dm-tur-sayac{font-size:var(--fs-1);font-weight:700;color:var(--muted);
  letter-spacing:.04em}
/* "Atla" GİZLİ BİR KÖŞEDE DEĞİL: dokunma hedefi tam boy ve her durakta
   aynı yerde. Kapatma yolu aranan bir tur, ısrarcı bir turdur. */
.dm-tur-atla{background:none;border:0;font-family:var(--font);
  font-size:var(--fs-2);font-weight:700;color:var(--muted);cursor:pointer;
  min-height:var(--tap);padding:0 var(--sp-2);margin:0 calc(-1 * var(--sp-2)) 0 0}
.dm-tur-baslik{font-family:var(--font-serif);font-size:var(--fs-4);
  color:var(--navy);margin:0 0 var(--sp-2);line-height:var(--lh-tight);letter-spacing:-.3px}
.dm-tur-govde{font-size:var(--fs-3);color:var(--muted);margin:0;line-height:var(--lh-loose)}
.dm-tur-noktalar{display:flex;gap:var(--sp-1);margin:var(--sp-4) 0 var(--sp-3)}
.dm-tur-nokta{width:6px;height:6px;border-radius:50%;
  background:rgba(27,42,74,.16)}
.dm-tur-nokta.su{background:var(--orange);width:16px;border-radius:3px}
.dm-tur-dugmeler{display:flex;gap:var(--sp-2);justify-content:flex-end}
.dm-tur-dugmeler .dm-btn{margin:0}
/* Tur açıkken arkadaki sayfa kaydırılmıyor: halka hedefin üstündeyken
   parmağın perdeyi kaydırması, vurguyu hedeften koparıyor. */
html.dm-tur-acik{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .dm-tur-atla:hover{color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){
  .dm-tur-halka{transition:none}
}
@media (max-width:460px){
  .dm-tur-kart{width:calc(100vw - 24px)}
  .dm-tur-dugmeler .dm-btn{flex:1}
}

/* ══════════════════════════════════════════════════════════════════════
   KUYRUK BİLDİRİMİ — "kaydın bu cihazda duruyor"
   ----------------------------------------------------------------------
   DM.kuyruk'u kullanan her sayfa aynı kutuyu kullanıyor. Sayfa başına bir
   kopya yazılsaydı biri kırmızı biri sarı olurdu ve öğrenci ikisinden
   farklı şeyler anlardı.

   NEDEN KIRMIZI DEĞİL: kuyruğa giren kayıt KAYBOLMADI — cihazda duruyor ve
   bağlantı dönünce kendi gidiyor. Kırmızı "bir şeyi kaybettin" demek;
   burada doğru mesaj "farkında ol, ama endişelenme". Gerçekten kalıcı
   reddedilen kayıt için metin değişiyor (ckKuyrukBoya), renk değil:
   öğrencinin yapacağı şey ikisinde de aynı — çalışmaya devam etmek.
   ══════════════════════════════════════════════════════════════════════ */
.dm-kuy{background:var(--amber-bg);border-left:3px solid var(--amber);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-2);
  line-height:var(--lh-loose);color:var(--navy-2);margin-bottom:var(--sp-4)}