/* ============================================================
   YDS Matik — Tasarım Sistemi
   Tek vurgu rengi · sakin yüzeyler · tutarlı tipografi ölçeği
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#111318;
  --surface:#1a1d24;
  --surface-2:#22262e;
  --surface-3:#2a2f38;
  --border:#2e343e;
  --border-strong:#3d4450;
  --text:#f1f3f5;
  --text-2:#9ca3af;
  /* #6b7280 zemin üstünde yalnızca 3.95:1 veriyordu → WCAG AA (4.5:1) altı. Bu değişken
     .meta-line, .stat-label, .nav-label ve .bnav-item gibi 10–12px etiketlerde kullanılıyor;
     sınav uygulamasında uzun okuma seansları olduğu için burası "nice to have" değil. */
  --text-3:#8B94A3;              /* #111318 üstünde 6.15:1 */
  --accent:#F43F5E;
  --accent-hover:#E11D48;
  --accent-text:#FB7185;
  /* BEYAZ metin taşıyan DOLGU yüzeyler için ayrı ton. --accent (#F43F5E) beyazla 3.80:1
     veriyor ve AA'yı geçmiyor; ama doğrudan koyulaştırmak kenarlıkları, parıltıları ve
     ikon renklerini de bozuyor. Bu yüzden dolgu ayrıldı. İki temada da AYNI: buton
     gölgesi (#BE123C) zaten temadan bağımsızdı, dolgu da öyle olmalı. */
  --accent-solid:#E11D48;        /* beyaz metinle 4.70:1 */
  --accent-solid-hover:#BE123C;  /* beyaz metinle 6.28:1 */
  --accent-weak:rgba(244,63,94,.12);
  --accent-line:rgba(244,63,94,.28);
  --ok:#34D399;      --ok-weak:rgba(52,211,153,.12);
  --warn:#FBBF24;    --warn-weak:rgba(251,191,36,.12);
  --err:#F87171;     --err-weak:rgba(248,113,113,.12);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-full:999px;
  --shadow-1:0 1px 3px rgba(0,0,0,.3);
  --shadow-2:0 4px 16px -3px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.25);
  --shadow-3:0 16px 40px -10px rgba(0,0,0,.55);
  --sidebar-w:260px;
}

body.light{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --surface-3:#E2E8F0;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;
  --text:#0F172A;
  --text-2:#475569;
  /* #94A3B8 açık zeminde (#F8FAFC) yalnızca 2.41:1 — en ağır kontrast hatası buydu. */
  --text-3:#64748B;              /* #F8FAFC üstünde 4.55:1 */
  --accent:#E11D48;
  --accent-hover:#BE123C;
  --accent-text:#BE123C;
  --accent-weak:rgba(225,29,72,.07);
  --accent-line:rgba(225,29,72,.18);
  --ok:#059669;      --ok-weak:rgba(5,150,105,.08);
  --warn:#D97706;    --warn-weak:rgba(217,119,6,.08);
  --err:#DC2626;     --err-weak:rgba(220,38,38,.07);
  --shadow-1:0 1px 3px rgba(15,23,42,.06);
  --shadow-2:0 4px 16px -3px rgba(15,23,42,.1), 0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-3:0 16px 40px -10px rgba(15,23,42,.16);
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;
  background:var(--bg);color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","ss01";
  transition:background .25s ease,color .25s ease;
}
h1,h2,h3,h4{line-height:1.25;font-weight:700;letter-spacing:-.015em;font-family:'Outfit','Inter',sans-serif}
button,input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ===== İkonlar ===== */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
.icon-lg{width:24px;height:24px}

/* ============================ Layout ============================ */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);background:var(--surface);
  border-right:1px solid var(--border);
  padding:22px 14px 28px;
  position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:80;   /* karartmanın (70) üstünde */
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px;margin-bottom:4px;width:100%;background:none;border:none;color:inherit;cursor:pointer;border-radius:var(--r-sm);text-align:left;transition:background .14s}
.brand:hover{background:var(--surface-2)}
.brand-mark{width:34px;height:34px;border-radius:10px;overflow:hidden;display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(244,63,94,.3)}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand-mark svg{width:19px;height:19px;stroke:#fff;stroke-width:2}
.brand-name{font-size:16px;font-weight:680;letter-spacing:-.02em}
.brand-sub{font-size:11.5px;color:var(--text-3);padding:0 8px;margin-bottom:22px;letter-spacing:.01em}

.nav-group{margin-bottom:18px}
.nav-label{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);padding:0 10px;margin-bottom:6px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;margin-bottom:1px;
  border:none;background:none;border-radius:var(--r-sm);
  color:var(--text-2);font-size:14px;font-weight:520;text-align:left;
  cursor:pointer;transition:background .14s,color .14s;
  position:relative;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-weak);color:var(--accent-text);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item .icon{opacity:.85}
.nav-item.active .icon{opacity:1}
.nav-count{margin-left:auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}

.main{flex:1;margin-left:var(--sidebar-w);padding:26px 32px 64px;max-width:1080px;min-width:0}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.topbar h1{font-size:22px;font-weight:700;font-family:'Outfit','Inter',sans-serif}
.topbar-right{display:flex;gap:8px;align-items:center}

.streak-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-2);padding:6px 14px;border-radius:var(--r-full);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:all .2s ease;
}
.streak-chip.on{
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.08));
  border-color:rgba(251,191,36,.3);
  color:#FBBF24;
  box-shadow:0 0 16px rgba(251,191,36,.15);
}
.streak-chip .icon{width:16px;height:16px}

.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;
  transition:border-color .14s,color .14s,background .14s;
}
.icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}

/* Depolama uyarısı (localStorage kapalı / kota dolu) */
.storage-warn{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--warn-weak);border:1px solid var(--warn);
  border-radius:var(--r);padding:12px 15px;margin-bottom:18px;
  font-size:13.5px;line-height:1.6;color:var(--text-2);
}
.storage-warn[hidden]{display:none}
.storage-warn b{color:var(--text)}

/* Sayfa geçişi */
#view{animation:fadeUp .26s cubic-bezier(.22,.61,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================ Yüzeyler ============================ */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;
  position:relative;overflow:hidden;
}
.card h3{font-size:15.5px;margin-bottom:6px;display:flex;align-items:center;gap:9px;font-family:'Outfit','Inter',sans-serif}
.card h3 .icon{color:var(--accent-text)}
.card p{color:var(--text-2);font-size:13.5px;line-height:1.55}
.card.clickable{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.card.clickable:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card.clickable:active{transform:translateY(0)}
.card.accent{border-color:var(--accent-line);background:linear-gradient(135deg,var(--accent-weak),transparent 70%),var(--surface)}

/* İstatistik kutusu */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;transition:border-color .2s,transform .2s}
.stat:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.stat-num{font-size:28px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;font-family:'Outfit','Inter',sans-serif}
.stat-num small{font-size:15px;font-weight:550;color:var(--text-3)}
.stat-label{font-size:12px;color:var(--text-2);margin-top:4px;font-weight:500}

.progress-bar{height:7px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden;margin-top:11px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#FB7185);border-radius:var(--r-full);transition:width .6s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}
.progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Seviye rozetleri — tek renkte kademeli (gökkuşağı yerine) */
.badge{display:inline-flex;align-items:center;padding:2.5px 9px;border-radius:var(--r-full);font-size:11px;font-weight:650;letter-spacing:.02em;line-height:1.5}
.badge.A1{background:var(--surface-3);color:var(--text-2)}
.badge.A2{background:rgba(244,63,94,.08);color:var(--text-2)}
.badge.B1{background:rgba(244,63,94,.14);color:var(--accent-text)}
.badge.B2{background:rgba(244,63,94,.24);color:var(--accent-text)}
.badge.C1{background:var(--accent-solid);color:#fff}
/* Seviyesi seviye haritasından DOĞRULANMAMIŞ kelime (bkz. lvlDogrulandiMi).
   Kesin seviyelerden ayırmak için kesikli çerçeve + "≈" ön eki kullanılır;
   rozet rengi korunur ki deste içinde görsel tutarlılık bozulmasın. */
.badge.tahmini{border:1px dashed currentColor;opacity:.85;cursor:help}
.badge.mine,.badge.YDS{background:var(--warn-weak);color:var(--warn)}
/* Kelime durumu */
.badge.st-new{background:var(--surface-3);color:var(--text-3)}
.badge.st-unknown{background:var(--err-weak);color:var(--err)}
.badge.st-learning{background:var(--warn-weak);color:var(--warn)}
.badge.st-known{background:var(--ok-weak);color:var(--ok)}
body.light .badge.A2{color:var(--text-2)}
body.light .badge.B1,body.light .badge.B2{color:var(--accent-text)}

/* ============================ Butonlar ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent-solid);color:#fff;border:none;
  padding:11px 20px;border-radius:var(--r);
  font-family:'Outfit','Inter',sans-serif;
  font-size:14.5px;font-weight:700;cursor:pointer;
  transition:transform .1s ease,box-shadow .1s ease,background .14s ease;
  box-shadow:0 4px 0 #BE123C;
  position:relative;letter-spacing:.01em;
}
.btn:hover{background:var(--accent-solid-hover)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #BE123C}
.btn .icon{width:17px;height:17px}
.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:0 3px 0 var(--border)}
.btn.secondary:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn.secondary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border)}
.btn.outline{background:transparent;color:var(--text);border:1px solid var(--border-strong);box-shadow:none}
.btn.outline:hover{background:var(--surface-2)}
.btn.green{background:var(--ok);color:#fff;box-shadow:0 4px 0 #059669}
.btn.green:hover{filter:brightness(1.08)}
.btn.green:active{transform:translateY(3px);box-shadow:0 1px 0 #059669}
.btn.red{background:var(--err);color:#fff;box-shadow:0 4px 0 #DC2626}
.btn.red:hover{filter:brightness(1.08)}
.btn.red:active{transform:translateY(3px);box-shadow:0 1px 0 #DC2626}
.btn.sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}

.back-link{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--text-2);
  font-size:13.5px;font-weight:550;cursor:pointer;margin-bottom:16px;
  transition:color .14s;
}
.back-link:hover{color:var(--text)}

/* ============================ Kelime kartı ============================ */
.flash-wrap{max-width:520px;margin:0 auto;perspective:1400px}
.flash-stage{position:relative}
/* D1 — Kart yüksekliği İÇERİĞE göre büyür. Eskiden height:320px sabitti ve arka yüz
   overflow-y:auto ile kendi içinde kayıyordu: uzun örnek cümle + çeviri + ipucu kartın
   içinde gizli kalıyor, kullanıcı küçük bir alanı parmakla kaydırmak zorunda kalıyordu.
   İki yüz aynı grid hücresine (1/1) yığılır → kartın yüksekliği = iki yüzün en uzunu.
   3B çevirme (preserve-3d + backface-visibility) aynen çalışır. */
.flashcard{
  position:relative;width:100%;min-height:320px;display:grid;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);cursor:pointer;
  touch-action:pan-y;           /* yatay kaydırma karta, dikey kaydırma sayfaya (A1) */
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.flashcard.flipped{transform:rotateY(180deg)}
.flashcard.dragging{transition:none;cursor:grabbing}
.flashcard.fly{transition:transform .2s ease-out}
.flash-face{
  grid-area:1/1;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 26px 40px;text-align:center;overflow:visible;min-height:inherit;
}
.flash-back{transform:rotateY(180deg);padding-bottom:26px}
/* Kaydırma etiketleri: sürükleme yönüne göre belirir (JS opacity verir) */
.swipe-tag{
  position:absolute;top:14px;z-index:2;pointer-events:none;opacity:0;transition:opacity .08s linear;
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:750;letter-spacing:.02em;border:2px solid;
}
.swipe-tag.know{right:14px;color:var(--ok);border-color:var(--ok);background:var(--ok-weak);transform:rotate(8deg)}
.swipe-tag.dont{left:14px;color:var(--err);border-color:var(--err);background:var(--err-weak);transform:rotate(-8deg)}
/* Dokunmatik cevap düğmeleri (A4): en az 44px yüksek, üç düğme tek satırda */
.flash-actions.touch{gap:8px;flex-wrap:nowrap}
.flash-actions .flash-act{flex:1;min-height:48px;padding:11px 10px;font-size:14px;justify-content:center;min-width:0}
/* Kart tipi rozetleri (A9) */
.badge.type-phrasal_verb{background:rgba(96,165,250,.15);color:#60A5FA}
.badge.type-idiom{background:rgba(192,132,252,.15);color:#C084FC}
body.light .badge.type-phrasal_verb{background:rgba(37,99,235,.09);color:#1D4ED8}
body.light .badge.type-idiom{background:rgba(147,51,234,.09);color:#7E22CE}
/* Deste listesinde otomatik "çalışıldı" tiki (A7) */
.deck-done{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;color:var(--ok);background:var(--ok-weak);padding:3px 8px;border-radius:var(--r-full);margin-left:auto}
.deck-done .icon{width:13px;height:13px}
/* Sonuç ekranındaki "Sıradaki deste" önerisi (A6) */
.next-deck{margin:18px auto 4px;padding:14px;border:1px dashed var(--accent-line);border-radius:var(--r);background:var(--accent-weak);max-width:420px}
.next-deck-lbl{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.next-deck .btn{width:100%;justify-content:center;min-height:48px}
/* Listeye dönüşte odaklanan öğe (C2) */
.card.just-visited{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-weak)}
.card.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Klavye kısayolu metinleri dokunmatikte gizli (A4) */
body.touch .kbd-hint{display:none}
/* Ayarlar: anahtarlı satır ("Sesi kapat", A3) — tüm satır dokunma hedefi, ≥44px */
.setting-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 0;margin:8px 0 6px;cursor:pointer;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.setting-toggle b{display:block;font-size:14px;color:var(--text)}
.setting-toggle small{display:block;font-size:12px;color:var(--text-3);line-height:1.5;margin-top:2px}
.flash-word{font-size:31px;font-weight:750;letter-spacing:-.025em;margin-bottom:8px;font-family:'Outfit','Inter',sans-serif}
.flash-tr{font-size:22px;font-weight:620;color:var(--accent-text);margin-bottom:14px;letter-spacing:-.01em}
/* Birleştirilen kopya kayıtlardan gelen ek anlamlar. Ana anlamdan görsel olarak
   ayrılır: kart hâlâ tek bir birincil karşılık öğretmelidir. */
.flash-tralt{font-size:12.5px;color:var(--text-3);line-height:1.55;margin:-8px 0 14px;max-width:440px}
.flash-ex{font-size:14px;color:var(--text-2);line-height:1.6;font-style:italic;max-width:440px}
.flash-syn{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.6}
.flash-syn b{color:var(--text-2);font-weight:600}
/* Kelime türü etiketi (isim/fiil…) */
.flash-pos{font-size:11.5px;font-weight:650;letter-spacing:.03em;color:var(--text-3);text-transform:lowercase;margin-bottom:4px}
/* Eş / zıt anlam satırları */
.wrow{display:flex;align-items:flex-start;gap:8px;margin-top:12px;max-width:460px;text-align:left;flex-wrap:wrap}
.wrow-lbl{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-full);margin-top:2px}
.wrow.syn .wrow-lbl{background:var(--ok-weak);color:var(--ok)}
.wrow.ant .wrow-lbl{background:var(--err-weak);color:var(--err)}
.wrow-list{display:flex;flex-wrap:wrap;gap:6px}
.wchip{font-size:13px;padding:3px 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:border-color .12s,color .12s}
.wchip:hover{color:var(--accent-text);border-color:var(--accent-line)}
.flash-hintbox{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.55;max-width:440px}
.flash-hintbox b{color:var(--text-2);font-weight:600}
.flash-hint{position:absolute;bottom:16px;font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:5px}
.flash-count{text-align:center;color:var(--text-2);font-size:13px;margin-bottom:14px;font-variant-numeric:tabular-nums}

/* ============================ Test ============================ */
.quiz-q{font-size:16px;line-height:1.65;margin-bottom:18px;font-weight:520}
.quiz-passage{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:17px 19px;font-size:14.5px;line-height:1.75;margin-bottom:18px;color:var(--text-2)}
.opt{
  display:flex;gap:11px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:12px 15px;border-radius:var(--r);margin-bottom:8px;
  cursor:pointer;font-size:14px;line-height:1.55;
  transition:border-color .14s,background .14s;
}
.opt:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-2)}
.opt-key{
  flex:none;width:22px;height:22px;border-radius:6px;
  background:var(--surface-3);color:var(--text-2);
  display:grid;place-items:center;font-size:11.5px;font-weight:650;margin-top:1px;
}
.opt.correct{border-color:var(--ok);background:var(--ok-weak)}
.opt.correct .opt-key{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--err);background:var(--err-weak)}
.opt.wrong .opt-key{background:var(--err);color:#fff}
.opt:disabled{cursor:default}
.explain{
  display:flex;gap:10px;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--accent);
  padding:13px 16px;border-radius:var(--r);
  font-size:13.5px;line-height:1.65;color:var(--text-2);margin-top:14px;
}
.explain .icon{color:var(--accent-text);flex:none;margin-top:1px}
.explain-lbl{color:var(--text);font-weight:650}
/* Konu testi zorluk rozeti (kolay / orta / zor) */
.badge.zorluk-kolay{background:var(--ok-weak);color:var(--ok);margin-left:6px}
.badge.zorluk-orta{background:var(--warn-weak);color:var(--warn);margin-left:6px}
.badge.zorluk-zor{background:var(--err-weak);color:var(--err);margin-left:6px}
/* ============================ Gramer ders şablonu ============================ */
.lesson-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;font-size:12.5px;color:var(--text-3)}
.lesson-step{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface)}
.lesson-step.on{border-color:var(--accent-line);color:var(--accent-text);background:var(--accent-weak);font-weight:650}
.lesson-step.done{border-color:var(--ok);color:var(--ok);background:var(--ok-weak);font-weight:650}
.lesson-step-arrow{display:inline-flex;color:var(--text-3)}
.gk-emo{font-style:normal}
.gk-ozet{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:6px 0 4px;border-radius:var(--r);background:var(--accent-weak);border:1px solid var(--accent-line);font-size:14.5px;line-height:1.6;color:var(--text)}
.gk-ozet .gk-emo{font-size:22px;line-height:1;flex:none}
.gk-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);margin-bottom:3px}
.gk-sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.gk-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text);margin:0 0 6px}
.gk-h .gk-emo{font-size:17px;line-height:1}
/* Örnek cümleler: tek sütun, sakin yüzey (eski ✅/❌ karşılaştırması kaldırıldı) */
.gk-ex{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.gk-ex li{padding:10px 13px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--accent-line);font-size:14.3px;line-height:1.55;color:var(--text);font-style:italic}
.gk-hafiza{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r);padding:14px 16px;margin-top:22px}
.gk-hafiza .gk-h{margin-bottom:6px}
.gk-hafiza p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text)}
.gk-bag{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gk-bag-chip{display:inline-flex;align-items:center;gap:8px;text-align:left}
.gk-bag-chip .badge{font-size:10.5px}
/* Anlatımdaki ⚠️ satırları → YDS İpucu kutusu (çizim anında, bkz. ipuclariniKutula) */
.lesson-body .gk-ipucu{list-style:none;margin:14px 0;padding:12px 14px 12px 16px;border-radius:var(--r-sm);background:var(--warn-weak);border:1px solid var(--warn);border-left-width:3px;color:var(--text-2)}
.lesson-body li.gk-ipucu{margin-left:-20px}
.gk-ipucu-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);margin-bottom:4px}
.gk-resume{margin-bottom:18px}
.gk-resume p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.result-breakdown{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.result-breakdown .badge{margin-left:0;font-size:12px;padding:5px 10px}
/* Gramer listesi: tamamlandı tiki (elle ya da B5 otomatik) */
.lesson-tick{width:32px;height:32px;padding:0;flex:none;background:transparent;color:var(--text-3)}
.lesson-tick.done{background:var(--ok);border-color:var(--ok);color:#fff}
.lesson-tick.done:hover{background:var(--ok);color:#fff;filter:brightness(1.08)}
/* Soru analizi (kural kutusu) */
.rule-box{background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r);padding:14px 16px;margin-top:12px}
/* Not: text-transform:uppercase kullanılmıyor — Türkçe yerel ayarında İngilizce
   "is" sözcüğünü "İS" yaptığı için kural başlıkları bozuluyordu. */
.rule-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;letter-spacing:.02em;color:var(--accent-text);margin-bottom:10px}
.rule-list{margin:0;padding-left:18px;list-style:none}
.rule-list li{position:relative;font-size:13.5px;line-height:1.65;color:var(--text-2);margin:5px 0}
.rule-list li::before{content:"";position:absolute;left:-14px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.7}
.rule-list b{color:var(--text);font-weight:640}
.rule-tip{display:flex;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);font-size:13px;line-height:1.6;color:var(--text-2)}
/* Sınav taktikleri: daha uzun maddeler için rahat aralık */
.tactics-list li{margin:10px 0;font-size:14px}
.tactics-list li i{color:var(--accent-text);font-style:italic}
.rule-tip .icon{color:var(--warn);flex:none;margin-top:2px}
.rule-tip b{color:var(--text)}

.quiz-meta{display:flex;justify-content:space-between;align-items:center;color:var(--text-3);font-size:12.5px;margin-bottom:16px;font-variant-numeric:tabular-nums}
.timer{display:inline-flex;align-items:center;gap:5px;font-weight:650;color:var(--text-2)}
.timer.urgent{color:var(--err)}

/* ============================ Tablo / liste ============================ */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 16px;text-align:left;vertical-align:top}
th{
  color:var(--text-3);font-size:11px;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td{border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--surface-2)}
td small{color:var(--text-3);font-size:12.5px;line-height:1.5;display:block;margin-top:2px}

/* ============================ Ders içeriği ============================ */
.lesson-body{line-height:1.75;font-size:14.8px;color:var(--text-2)}
.lesson-body p{margin:13px 0}
.lesson-body ul{margin:11px 0 11px 20px}
.lesson-body li{margin:6px 0}
.lesson-body b{color:var(--text);font-weight:620}
.lesson-body i{color:var(--text)}
.lesson-body table{margin:14px 0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lesson-body th{background:var(--surface-2)}
.lesson-body td{font-size:13.8px}

/* ============================ Girdiler ============================ */
.search{
  width:100%;padding:11px 15px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:14px;margin-bottom:16px;
  transition:border-color .14s,box-shadow .14s;
}
.search::placeholder{color:var(--text-3)}
.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
select.search{cursor:pointer}

.filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  padding:6.5px 14px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);cursor:pointer;font-size:13px;font-weight:550;
  transition:border-color .14s,background .14s,color .14s;
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.active{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;font-weight:650}

/* ============================ Sonuç ============================ */
.result-hero{text-align:center;padding:38px 24px}
.result-ring{width:112px;height:112px;margin:0 auto 18px;position:relative}
.result-ring svg{transform:rotate(-90deg)}
.result-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.result-ring .track{stroke:var(--surface-3)}
.result-ring .bar{stroke:var(--accent);transition:stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1)}
.result-ring .val{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;font-weight:680;font-variant-numeric:tabular-nums}
.result-score{font-size:19px;font-weight:640;font-variant-numeric:tabular-nums}
.result-msg{font-size:14.5px;margin-top:7px;color:var(--text-2);line-height:1.6}

.bars{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:16px}
/* min-width:0 şart: flex öğesinin örtük min-width:auto değeri dar ekranda
   sütunların küçülmesini engelleyip yatay taşmaya yol açıyordu */
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:30px;background:var(--accent);border-radius:4px 4px 0 0;min-height:3px;opacity:.85;transition:height .5s}
.bar.empty{background:var(--surface-3)}
.bar-label{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ============================ Boş durum ============================ */
.empty{text-align:center;padding:52px 24px;color:var(--text-2)}
.empty-icon{width:46px;height:46px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;margin:0 auto 14px}
.empty-icon .icon{width:22px;height:22px;color:var(--text-3)}
.empty h3{font-size:15.5px;color:var(--text);margin-bottom:5px;justify-content:center}
.empty p{font-size:13.5px;max-width:380px;margin:0 auto;color:var(--text-2)}

.section-title{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin:28px 0 12px}
.section-title:first-child{margin-top:0}
.page-intro{color:var(--text-2);font-size:14px;line-height:1.6;margin-bottom:20px;max-width:660px}
.meta-line{font-size:12.5px;color:var(--text-3);margin-bottom:12px;font-variant-numeric:tabular-nums}

/* ============================ Mobil ============================ */
.menu-btn{display:none}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-3)}
  .sidebar.open{transform:translateX(0)}
  /* Güvenli alan (durum çubuğu / navigasyon çubuğu). Android 15+ uygulamayı kenardan kenara
     çizer; Capacitor 8 doğru değerleri --safe-area-inset-* DEĞİŞKENİ olarak enjekte eder, env()
     ise WebView sürümüne göre 0 dönebilir. Bu yüzden ikisinin büyüğü alınır; env()in yedek
     değeri yalnızca env() hiç desteklenmeyen tarayıcılarda devreye girer. */
  .main{
    margin-left:0;
    padding: calc(max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 24px)) + 12px) 14px calc(76px + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 16px))) !important;
  }
  .menu-btn{display:grid}
  .topbar{
    margin-bottom:16px;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .topbar > div:first-child{
    display:flex;
    align-items:center;
    gap:8px !important;
    min-width:0;
    flex:1;
  }
  .topbar h1{
    font-size:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-right{
    flex-shrink:0;
    display:flex;
    gap:6px;
    align-items:center;
  }
  .streak-chip{
    padding:5px 9px;
    font-size:12px;
  }
  /* D1: 375×667'de anlam + en uzun örnek cümle + çeviri kaydırmasız sığmalı; kart içeriğe
     göre büyür, alt sınır küçültülür ve yüz dolgusu daraltılır */
  .flashcard{min-height:260px}
  .flash-face{padding:22px 18px 36px}
  .flash-back{padding-bottom:22px}
  .flash-word{font-size:26px}
  .flash-tr{font-size:19px;margin-bottom:10px}
  .flash-ex{font-size:13.5px;line-height:1.55}
  .flash-hintbox,.wrow{margin-top:10px}
  .flash-count{margin-bottom:10px}
  .flash-actions{margin-top:14px !important}
  th,td{padding:10px 13px}

  /* Mobil Kompakt 2 Sütunlu Grid */
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .card {
    padding: 14px 12px !important;
    border-radius: var(--r) !important;
  }
  .card h3 {
    font-size: 13.5px !important;
    gap: 7px !important;
    margin-bottom: 4px !important;
  }
  .card p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Ders kartı bu kısaltmadan MUAF: anlatım paragrafları mobilde 2 satıra kırpılıyor ve
     ⚠️ ipuçlarının sonu görünmüyordu (kapatılan hata). Sonuç kırılımı ve devam kartı da öyle. */
  .card.gk-card p, .gk-resume p, .result-hero p {
    font-size: inherit !important;
    line-height: inherit !important;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .card.gk-card .lesson-body p { font-size: 14.2px !important; line-height: 1.7 !important; }
  .card.gk-card { padding: 16px 14px !important; }
  .lesson-body { overflow-x: hidden; }
  .lesson-body table { width: 100%; margin: 12px 0; border-collapse: collapse; }
  .lesson-body th, .lesson-body td {
    padding: 8px 6px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .lesson-body th { font-size: 10.5px !important; letter-spacing: .02em !important; }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
  }
  .table-scroll table { margin: 0 !important; border: none !important; border-radius: 0 !important; }
  .mod-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }
  .mod-icon .icon {
    width: 15px !important;
    height: 15px !important;
  }
  .stat {
    padding: 12px 10px !important;
  }
  .stat-num {
    font-size: 22px !important;
  }
  .stat-label {
    font-size: 11px !important;
  }
}
/* z-index 40 → 70: karartma ALT MENÜNÜN (60) de üstünde olmalıydı. Eskiden yan menü
   açıkken karartma alt menüyü örtmüyor ve alt menü tıklanabilir kalıyordu; kullanıcı
   yan menüden "Gramer"e basmak isterken alt menüden "Pratik"e basıyordu.
   Katman sırası artık: alt menü (60) < karartma (70) < yan menü (80). */
.overlay{display:none;position:fixed;inset:0;background:rgba(2,6,16,.55);backdrop-filter:blur(2px);z-index:70}
.overlay.show{display:block}

/* ============================ Erişilebilirlik ============================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent-solid);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.search:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================ İskelet ============================ */
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skPulse 1.5s ease-in-out infinite;border-radius:6px}
@keyframes skPulse{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-card{display:flex;flex-direction:column;gap:10px}
.sk-num{height:26px;width:55%}
.sk-line{height:11px;width:100%}
.sk-line.w60{width:60%}
.sk-line.w80{width:80%}
.sk-title{height:14px;width:150px;margin:28px 0 12px}
.sk-hint{text-align:center;color:var(--text-3);font-size:13px;margin-top:24px}

/* ============================ Cümle Analizi ============================ */
.sa-sentence{font-size:18px;line-height:2.15;margin-bottom:14px;letter-spacing:-.005em}
.sa-seg{padding:3px 7px;border-radius:6px;margin:0 1px;font-weight:580;cursor:help}
.sa-subj{background:rgba(56,139,253,.16);color:#79b8ff}
.sa-verb{background:rgba(248,81,73,.15);color:#ff9492}
.sa-obj{background:rgba(63,185,80,.15);color:#7ee787}
.sa-comp{background:rgba(163,113,247,.16);color:#c297ff}
.sa-adv{background:rgba(210,153,34,.16);color:#e3b341}
.sa-conj{background:rgba(31,184,182,.16);color:#5fd3d1}
.sa-clause{background:rgba(219,109,178,.15);color:#f0a6d0}
/* Almanca cümle rolleri (js/de/data-analysis.js): Satzklammer'in iki parçası (verb = kırmızı,
   vend = turuncu) bilerek aynı sıcak aileden — öğrenci ikisinin tek yüklemin parçası olduğunu görsün. */
.sa-vend{background:rgba(255,166,87,.16);color:#ffa657}
.sa-akk{background:rgba(63,185,80,.15);color:#7ee787}
.sa-dat{background:rgba(86,212,221,.15);color:#56d4dd}
.sa-praep{background:rgba(163,113,247,.16);color:#c297ff}
.sa-praed{background:rgba(219,109,178,.15);color:#f0a6d0}
body.light .sa-vend{background:rgba(194,65,12,.09);color:#c2410c}
body.light .sa-akk{background:rgba(21,128,61,.09);color:#15803d}
body.light .sa-dat{background:rgba(14,116,144,.09);color:#0e7490}
body.light .sa-praep{background:rgba(126,34,206,.08);color:#7e22ce}
body.light .sa-praed{background:rgba(190,24,93,.08);color:#be185d}
body.light .sa-subj{background:rgba(29,78,216,.09);color:#1d4ed8}
body.light .sa-verb{background:rgba(220,38,38,.08);color:#b91c1c}
body.light .sa-obj{background:rgba(21,128,61,.09);color:#15803d}
body.light .sa-comp{background:rgba(126,34,206,.08);color:#7e22ce}
body.light .sa-adv{background:rgba(180,83,9,.09);color:#b45309}
body.light .sa-conj{background:rgba(15,118,110,.09);color:#0f766e}
body.light .sa-clause{background:rgba(190,24,93,.08);color:#be185d}
.sa-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.sa-legend .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border-radius:var(--r-full);font-weight:550;background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.sa-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.sa-tr{color:var(--text-2);font-size:14px;margin:6px 0 12px;padding-left:13px;border-left:2px solid var(--border-strong)}
.sa-note{display:flex;gap:9px;background:var(--surface-2);border-radius:var(--r);padding:11px 14px;font-size:13px;line-height:1.6;color:var(--text-2)}
.sa-note .icon{color:var(--accent-text);flex:none;margin-top:1px}
.sa-topic{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-3);font-weight:600;letter-spacing:.03em;margin-bottom:10px}

/* ============================ Ses & Telaffuz (TTS) ============================ */
.speaker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent-text);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  transition: all 0.16s ease;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
}
.speaker-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 10px var(--accent-weak);
}
.speaker-btn.speaking {
  animation: pulse-audio 1s infinite alternate;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.speaker-btn.lg {
  width: 38px;
  height: 38px;
}
@keyframes pulse-audio {
  0% { transform: scale(1); box-shadow: 0 0 4px var(--accent-weak); }
  100% { transform: scale(1.15); box-shadow: 0 0 14px var(--accent); }
}

/* ============================ Kullanıcı Kayıt & Giriş (Auth) ============================ */
.user-badge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 12px 4px 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
  transition: all 0.16s ease;
}
.user-badge-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.user-badge-btn.icon-only {
  padding: 3px;
  border-radius: 50%;
  gap: 0;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F43F5E, #E11D48);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
/* Google profil fotoğrafı */
.user-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  width: 220px;
  padding: 8px 0;
  z-index: 100;
  display: none;
  animation: fadeUp 0.18s ease;
}
.user-dropdown.show {
  display: block;
}
.user-dropdown-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-dropdown-name {
  font-weight: 650;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-email {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8.5px 14px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.user-dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.user-dropdown-item.logout {
  color: var(--err);
}
.user-dropdown-item.logout:hover {
  background: var(--err-weak);
}

/* Modal Backdrop & Card */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 16, 0.75);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
}
.auth-modal-backdrop[hidden] {
  display: none !important;
}
.auth-modal-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 420px;
  max-height: min(650px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 24px 22px;
  position: relative;
  animation: modalPop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  box-sizing: border-box;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.14s;
  line-height: 1;
}
.auth-modal-close:hover {
  color: var(--text);
}

.auth-tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.auth-header {
  margin-bottom: 20px;
}
.auth-header h3 {
  font-size: 19px;
  color: var(--text);
  margin-bottom: 4px;
}
.auth-header p {
  font-size: 13px;
  color: var(--text-2);
}

.auth-field {
  margin-bottom: 16px;
}
.auth-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrap .icon {
  position: absolute;
  left: 12px;
  color: var(--text-3);
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.input-icon-wrap input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.input-icon-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.auth-btn {
  width: 100%;
  padding: 11px;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 650;
  justify-content: center;
}
.auth-error {
  background: var(--err-weak);
  border: 1px solid var(--err);
  color: var(--err);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-footer-text {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-top: 18px;
}
.auth-footer-text a,
.auth-footer-text .btn-link {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}
.auth-footer-text a:hover,
.auth-footer-text .btn-link:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* Google Sign-in Button & Divider */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10.5px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
  margin-bottom: 8px;
}
.btn-google:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.btn-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9.5px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
  margin-bottom: 14px;
}
.btn-guest:hover {
  background: var(--surface-3);
  color: var(--text);
}

.auth-legal-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
  margin-top: 14px;
}
.btn-link-sub {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-2);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.btn-link-sub:hover {
  color: var(--accent-text);
}
.btn-google:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.btn-google .icon-google {
  width: 18px;
  height: 18px;
  flex: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 16px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.auth-divider span {
  padding: 0 10px;
}

/* Auth Loading Spinner */
.auth-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}
.auth-btn.loading {
  opacity: 0.85;
  pointer-events: none;
}

/* Tour / Quick Tips Card */
.tour-card {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.tour-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light, #fda4af));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tour-card h3 {
  font-size: 15px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tour-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tour-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  transition: border-color 0.14s, background 0.14s;
  cursor: pointer;
}
.tour-tip:hover {
  border-color: var(--accent-line);
  background: var(--accent-weak);
}
.tour-tip-icon {
  font-size: 18px;
  line-height: 1;
  flex: none;
  margin-top: 1px;
}
.tour-tip b {
  color: var(--text);
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

/* ============================ Okuma Parçaları ============================ */
.read-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.read-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:16px}
.read-hint .icon{color:var(--warn);flex:none}
.read-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;font-size:16.5px;line-height:1.9;color:var(--text)}
.read-para{margin:0 0 15px}
.read-para:last-child{margin-bottom:0}
/* Cümle: dokununca altındaki çeviri açılır */
.rs{cursor:pointer;border-radius:4px;transition:background .12s;padding:1px 0}
.rs:hover{background:var(--accent-weak)}
.rs.open{background:var(--accent-weak)}
.rs-tr{display:block;font-size:13.5px;color:var(--accent-text);line-height:1.6;margin:3px 0 6px;padding-left:11px;border-left:2px solid var(--accent-line)}
/* hidden özniteliği .rs-tr{display:block} tarafından ezildiği için açıkça gizle
   (aksi hâlde "Çevirileri gizle" görsel olarak çalışmıyordu) */
.rs-tr[hidden]{display:none}
.word-pop[hidden]{display:none !important}
/* Kelime: dokununca sözlük balonu açılır */
.rw{cursor:pointer;border-bottom:1px dotted var(--text-3);transition:background .12s,border-color .12s}
.rw:hover{background:var(--warn-weak);border-bottom-color:var(--warn)}
.rw.active{background:var(--warn-weak);border-bottom-color:var(--warn);color:var(--text)}
.word-pop{position:absolute;z-index:120;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-3);padding:9px 12px;font-size:14px;color:var(--text);max-width:280px;display:flex;align-items:center;gap:8px;animation:fadeUp .16s ease}
.word-pop b{color:var(--accent-text);font-weight:650}
.wp-speak{flex:none;width:28px;height:28px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text-2);cursor:pointer}
.wp-speak:hover{color:var(--accent-text);border-color:var(--accent-line)}
@media(max-width:900px){
  .read-body{font-size:16px;padding:18px 16px}
  .read-toolbar{gap:8px}
}

/* ============================ Bottom Navigation ============================ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(26,29,36,.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);
  padding:6px 0 max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 8px));
}
body.light .bottom-nav{background:rgba(255,255,255,.92)}
.bottom-nav-inner{
  display:flex;justify-content:space-around;align-items:center;
  max-width:500px;margin:0 auto;
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 12px;border:none;background:none;
  color:var(--text-3);font-size:10.5px;font-weight:600;
  letter-spacing:.01em;cursor:pointer;
  transition:color .18s ease;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.bnav-item .icon{width:22px;height:22px;transition:transform .18s ease}
/* --accent yerine --accent-text: alt menü zemininde (#1a1d24) --accent 4.59:1 ile sınırda
   kalıyordu, --accent-text 6.27:1 veriyor. Etiket 10.5px olduğu için burada AA'nın küçük
   metin eşiği (4.5:1) geçerli — sınırda kalmak yeterli değil. Alttaki gösterge çubuğu
   dekoratif olduğu için --accent'te kalıyor. */
.bnav-item.active{color:var(--accent-text)}
.bnav-item.active .icon{transform:scale(1.1)}
.bnav-item.active::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:3px;background:var(--accent);border-radius:0 0 3px 3px;
}
@media(max-width:900px){
  .bottom-nav{display:block}
  .main{padding-bottom:calc(72px + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 8px))) !important}
}

/* ============================ Dashboard Hero ============================ */
.dash-hero{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  color: var(--text);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-2);
}
.dash-hero::before{
  content:'';position:absolute;top:-40%;right:-10%;
  width:260px;height:260px;
  background:radial-gradient(circle, var(--accent-weak) 0%, transparent 70%);
  pointer-events:none;
}
.dash-hero h2,.dash-hero h3{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px;position:relative;z-index:1}
.dash-hero p{font-size:14px;color:var(--text-2);line-height:1.6;position:relative;z-index:1}
.dash-hero .btn{background:var(--accent-solid);color:#fff;box-shadow:0 4px 0 #BE123C;position:relative;z-index:1}
.dash-hero .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #BE123C}
.dash-hero .btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:0 3px 0 var(--border)}
.dash-hero .btn.secondary:hover{background:var(--surface-3);border-color:var(--border-strong)}
.dash-hero .stat-label{color:var(--text-3)}
.dash-hero .stat-num{color:var(--text)}
.dash-hero .stat-num small{color:var(--text-3)}
.dash-hero .progress-bar{background:var(--surface-3)}
.dash-hero .progress-fill{background:linear-gradient(90deg,var(--accent),#FB7185)}

/* Module card colored left border */
.card[data-module]::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;
}
.card[data-module="vocab"]::before{background:#F43F5E}
.card[data-module="grammar"]::before{background:#6366F1}
.card[data-module="idioms"]::before{background:#F59E0B}
.card[data-module="reading"]::before{background:#10B981}
.card[data-module="analysis"]::before{background:#8B5CF6}
.card[data-module="exam"]::before{background:#0EA5E9}
.card[data-module="tactics"]::before{background:#EC4899}
.card[data-module="roots"]::before{background:#14B8A6}

/* Module card icon circles */
.mod-icon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;flex:none;
}
.mod-icon .icon{width:18px;height:18px}
.mod-icon.coral{background:rgba(244,63,94,.12);color:#FB7185}
.mod-icon.indigo{background:rgba(99,102,241,.12);color:#A5B4FC}
.mod-icon.amber{background:rgba(251,191,36,.12);color:#FBBF24}
.mod-icon.emerald{background:rgba(52,211,153,.12);color:#34D399}
.mod-icon.violet{background:rgba(139,92,246,.12);color:#C4B5FD}
.mod-icon.sky{background:rgba(14,165,233,.12);color:#38BDF8}
.mod-icon.pink{background:rgba(236,72,153,.12);color:#F472B6}
.mod-icon.teal{background:rgba(20,184,166,.12);color:#2DD4BF}
body.light .mod-icon.coral{color:#E11D48}
body.light .mod-icon.indigo{color:#4F46E5}
body.light .mod-icon.amber{color:#D97706}
body.light .mod-icon.emerald{color:#059669}
body.light .mod-icon.violet{color:#7C3AED}
body.light .mod-icon.sky{color:#0284C7}
body.light .mod-icon.pink{color:#DB2777}
body.light .mod-icon.teal{color:#0D9488}

/* ============================ Gelismis Istatistikler ============================ */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:24px;
}
.stats-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;text-align:center;
  transition:border-color .2s,transform .2s;
}
.stats-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.stats-card .stats-icon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;margin:0 auto 10px;
}
.stats-card .stats-icon .icon{width:20px;height:20px}
.stats-card .stats-icon.coral{background:rgba(244,63,94,.12);color:#FB7185}
.stats-card .stats-icon.indigo{background:rgba(99,102,241,.12);color:#A5B4FC}
.stats-card .stats-icon.emerald{background:rgba(52,211,153,.12);color:#34D399}
.stats-card .stats-icon.amber{background:rgba(251,191,36,.12);color:#FBBF24}
body.light .stats-card .stats-icon.coral{color:#E11D48}
body.light .stats-card .stats-icon.indigo{color:#4F46E5}
body.light .stats-card .stats-icon.emerald{color:#059669}
body.light .stats-card .stats-icon.amber{color:#D97706}
.stats-value{
  font-size:26px;font-weight:750;
  font-family:'Outfit','Inter',sans-serif;
  letter-spacing:-.03em;line-height:1.1;
}
.stats-label{font-size:11.5px;color:var(--text-3);margin-top:4px;font-weight:500}

/* Heatmap */
.heatmap-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;margin-bottom:20px;overflow-x:auto;
}
.heatmap-title{
  font-size:14px;font-weight:650;font-family:'Outfit','Inter',sans-serif;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.heatmap{display:flex;gap:3px;flex-wrap:wrap}
.heatmap-cell{
  width:14px;height:14px;border-radius:3px;
  background:var(--surface-3);transition:transform .1s;
}
.heatmap-cell:hover{transform:scale(1.4)}
.heatmap-cell.l1{background:rgba(244,63,94,.2)}
.heatmap-cell.l2{background:rgba(244,63,94,.4)}
.heatmap-cell.l3{background:rgba(244,63,94,.6)}
.heatmap-cell.l4{background:#F43F5E}
.heatmap-legend{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  font-size:11px;color:var(--text-3);
}
.heatmap-legend .heatmap-cell{width:11px;height:11px;cursor:default}
.heatmap-legend .heatmap-cell:hover{transform:none}

/* Week comparison */
.week-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.week-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.week-card-label{font-size:12px;color:var(--text-3);font-weight:600;margin-bottom:8px}
.week-card-value{font-size:22px;font-weight:700;font-family:'Outfit','Inter',sans-serif}
.week-card-change{font-size:12px;font-weight:600;margin-top:4px}
.week-card-change.up{color:var(--ok)}
.week-card-change.down{color:var(--err)}

/* Onboarding Tour Card */
.tour-card{
  background:var(--surface);
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  padding:18px 20px;
  margin-bottom:20px;
  position:relative;
}
.tour-card h3{
  font-size:16px;font-weight:700;color:var(--text);
  margin-bottom:6px;display:flex;align-items:center;gap:8px;
  font-family:'Outfit','Inter',sans-serif;
}
.tour-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin:12px 0 16px;
}
.tour-step-item{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:10px 12px;
  font-size:12.5px;line-height:1.4;color:var(--text-2);
}
.tour-step-item b{color:var(--text);display:block;margin-bottom:2px;font-weight:650}


/* ============================ PREMIUM & PAYWALL ============================ */
.xp-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--border);
  color:#F59E0B;padding:6px 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
}
.xp-chip .icon{width:16px;height:16px;color:#F59E0B}

.premium-badge-nav{
  display:inline-flex;align-items:center;gap:5px;
  /* Eski #F59E0B→#D97706 geçişi beyaz metinle açık uçta 2.13:1 veriyordu (en ağır
     kontrast hatalarından biri). Koyulaştırıldı: #B45309 beyazla 5.02:1. */
  background:linear-gradient(135deg,#B45309,#92400E);
  color:#fff;padding:6px 14px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 8px rgba(245,158,11,.3);
  border:none;transition:transform .14s,filter .14s;
}
.premium-badge-nav:hover{transform:scale(1.04);filter:brightness(1.1)}

.premium-container{
  max-width:840px;margin:0 auto;padding:10px 0 40px;
}
.premium-hero{
  text-align:center;padding:36px 24px 28px;
  background:linear-gradient(180deg,var(--accent-weak) 0%,transparent 100%),var(--surface);
  border:1px solid var(--accent-line);border-radius:var(--r-lg);
  margin-bottom:28px;position:relative;overflow:hidden;
}
.premium-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff;padding:4px 14px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(245,158,11,.3);
}
.premium-hero h2{
  font-size:28px;font-weight:800;font-family:'Outfit','Inter',sans-serif;
  margin-bottom:10px;line-height:1.2;
}
.premium-hero p{
  font-size:15px;color:var(--text-2);max-width:540px;margin:0 auto;line-height:1.6;
}

.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-bottom:32px;
}
.plan-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 20px;
  position:relative;transition:border-color .2s,transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.plan-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.plan-card.popular{
  border:2px solid var(--accent);
  background:linear-gradient(180deg,var(--accent-weak) 0%,var(--surface) 40%);
  box-shadow:0 8px 24px -6px rgba(244,63,94,.25);
}
.plan-popular-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent-solid);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 12px;border-radius:var(--r-full);white-space:nowrap;
}
.plan-title{font-size:18px;font-weight:750;font-family:'Outfit','Inter',sans-serif;margin-bottom:4px}
.plan-sub{font-size:12.5px;color:var(--text-3);margin-bottom:16px}
.plan-price{
  font-size:32px;font-weight:800;font-family:'Outfit','Inter',sans-serif;
  color:var(--text);line-height:1;margin-bottom:6px;
}
.plan-price small{font-size:14px;font-weight:500;color:var(--text-3)}
.plan-calc{font-size:12px;color:var(--accent-text);font-weight:600;margin-bottom:20px}
.plan-features{list-style:none;padding:0;margin:0 0 24px;flex:1}
.plan-features li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-2);margin-bottom:10px;line-height:1.4;
}
.plan-features li .icon{color:var(--ok);width:16px;height:16px;flex:none}

.pay-guarantee{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-3);flex-wrap:wrap;
}
.pay-guarantee span{display:inline-flex;align-items:center;gap:6px}

/* Locked Content Overlay */
.locked-overlay-wrap{position:relative}
.locked-blur-content{filter:blur(5px);pointer-events:none;user-select:none;opacity:.4}
.locked-card-overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(17,19,24,.75);backdrop-filter:blur(6px);
  border-radius:var(--r-lg);padding:24px;text-align:center;
}
.locked-icon{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff;display:grid;place-items:center;margin-bottom:12px;
  box-shadow:0 4px 14px rgba(245,158,11,.3);
}
.locked-icon .icon{width:24px;height:24px}
.locked-card-overlay h4{font-size:17px;font-weight:750;margin-bottom:6px}
.locked-card-overlay p{font-size:13px;color:var(--text-2);max-width:320px;margin-bottom:16px}
.locked-overlay-wrap{cursor:pointer}
body.light .locked-card-overlay{background:rgba(255,255,255,.82)}
/* Kaplama içeriği kartın dışına ASLA taşmamalı (altındaki kartın üstüne biner) */
.locked-card-overlay{overflow:hidden}
@media(max-width:900px){
  /* Mobilde kartlar ~85px: kaplama içeriği (ikon+başlık+buton) sığmıyordu.
     Sarmalayıcıya taban yükseklik verilir, açıklama metni gizlenir — başlık ve
     "PRO ile aç" düğmesi mesajı zaten taşıyor. */
  .locked-overlay-wrap{min-height:142px}
  .locked-overlay-wrap > .locked-blur-content{height:100%}
  .locked-overlay-wrap > .locked-blur-content > .card{height:100%}
  .locked-card-overlay{padding:12px 10px}
  .locked-icon{width:38px;height:38px;margin-bottom:8px}
  .locked-icon .icon{width:18px;height:18px}
  .locked-card-overlay h4{font-size:14px;margin-bottom:10px}
  .locked-card-overlay p{display:none}
}

/* Üst çubuk PRO rozeti — abone durumunda yeşile döner */
.premium-badge-nav.is-active{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 2px 8px rgba(5,150,105,.3)}

/* ============================ Çevrimdışı Bariyeri (PRO kapısı) ============================ */
.offline-gate{
  position:fixed;inset:0;z-index:100000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px calc(20px + max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px))) calc(24px + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))) calc(20px + max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px)));
  overflow-y:auto;
}
.offline-gate-card{
  width:100%;max-width:420px;text-align:center;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:30px 22px;box-shadow:var(--shadow-3);
}
.offline-gate-card .locked-icon{margin:0 auto 14px}
.offline-gate-card h3{font-size:19px;font-weight:750;color:var(--text);margin-bottom:10px}
.offline-gate-card p{font-size:14px;line-height:1.6;color:var(--text-2)}
.offline-gate-note{font-size:12px;color:var(--text-3);margin-top:14px}

/* ============================ ONAY / UYARI MODALLARI ============================ */
/* Native alert()/confirm() yerine kullanılan katman (bkz. js/app.js → appModal).
   z-index tüm kabuk katmanlarının üstünde: karar sorulurken arkadaki hiçbir şey
   tıklanabilir olmamalı. Yalnızca toast bunun üstünde kalır (geri bildirim görünsün). */
.app-modal-backdrop{
  position:fixed;inset:0;z-index:100010;
  display:flex;align-items:center;justify-content:center;
  padding:calc(20px + max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px))) calc(18px + max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px))) calc(20px + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))) calc(18px + max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px)));
  background:rgba(2,6,16,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease;
  overflow-y:auto;
  /* Kapanış animasyonu boyunca (220ms) düğüm DOM'da kalıyor. pointer-events:none olmazsa
     bu solan katman altındaki modalın ya da sayfanın tıklamasını yutar. */
  pointer-events:none;
}
.app-modal-backdrop.show{opacity:1;pointer-events:auto}
body.light .app-modal-backdrop{background:rgba(15,23,42,.45)}

.app-modal-card{
  width:100%;max-width:420px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  padding:22px 20px 18px;
  transform:scale(.94) translateY(12px);
  transition:transform .2s cubic-bezier(.18,.89,.32,1.28);
  outline:none;
}
.app-modal-backdrop.show .app-modal-card{transform:scale(1) translateY(0)}
/* Yıkıcı işlem: üst kenarda kırmızı şerit — kullanıcı okumadan önce uyarıyı görür */
.app-modal-card.danger{border-top:3px solid var(--err)}

.app-modal-title{font-size:18px;font-weight:750;color:var(--text);margin-bottom:8px;line-height:1.35}
.app-modal-body{font-size:14px;line-height:1.6;color:var(--text-2)}
.app-modal-body p{margin:0}
.app-modal-actions{display:flex;gap:10px;margin-top:20px}
/* Butonlar eşit paylaşır: tek elle kullanımda ikisi de baş parmak menzilinde kalsın */
.app-modal-actions .btn{flex:1;min-width:0;justify-content:center;min-height:46px}

/* Modal açıkken arkadaki sayfa kaymasın (iOS'ta lastik bant efekti modalı kaydırıyordu) */
body.modal-open{overflow:hidden}

/* --- Bulut ↔ yerel çakışma karşılaştırması --- */
.sync-compare{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sync-side{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);padding:11px 13px;
}
.sync-side.newer{border-color:var(--accent-line);background:var(--accent-weak)}
.sync-side-where{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);margin-bottom:3px;
}
.sync-side-tag{
  text-transform:none;letter-spacing:0;font-size:11px;font-weight:700;
  background:var(--accent-solid);color:#fff;padding:1.5px 7px;border-radius:var(--r-full);
}
.sync-side-when{font-size:14.5px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums}
.sync-side-meta{font-size:12.5px;color:var(--text-2);margin-top:1px}

/* ============================ TOAST BİLDİRİM SİSTEMİ (MIKRO-ANIMASYONLU) ============================ */
#toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Modal katmanının (100010) ÜSTÜNDE: "kaydedildi" gibi geri bildirim modal
       kapanırken görünür kalsın. */
    z-index: 100020;
    pointer-events: none;
}

.toast {
    background-color: var(--surface-2, #1e293b);
    color: var(--text, #f8fafc);
    padding: 12px 20px;
    border-radius: var(--r-sm, 10px);
    font-size: 14px;
    font-weight: 550;
    box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.4));
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
    border: 1px solid var(--border, #2e343e);
}

.toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast.success { border-left: 4px solid var(--ok, #10b981); }
.toast.error   { border-left: 4px solid var(--accent, #f43f5e); }
.toast.warning { border-left: 4px solid var(--warn, #f59e0b); }
.toast.info    { border-left: 4px solid #3b82f6; }

/* ============================ MOBİL ERGONOMİ & KONTRAST İYİLEŞTİRMELERİ ============================ */
/* NOT: Burada eskiden `:root{--text-3:#94a3b8}` vardı. İki sebeple KALDIRILDI:
   (1) body.light kendi --text-3'ünü tanımladığı için özgüllük sıralamasında (0,1,1 > 0,1,0)
       body.light kazanıyordu — düzeltme açık temada HİÇ uygulanmıyordu;
   (2) artık :root ve body.light değerleri AA'yı geçiyor, bu override onları geri bozardı. */
@media (max-width: 900px) {
  .speaker-btn {
      width: 44px !important;
      height: 44px !important;
  }
  .btn.sm {
      padding: 12px 18px !important;
      font-size: 14px !important;
  }

  /* --- Dokunmatik hedef alt sınırı: 44px (Material 48dp / iOS HIG 44pt) ---
     .btn.sm için zaten yapılmıştı; aynı özen bu üçüne gösterilmemişti. .chip'ler
     Cümle Analizi, Taktikler, Okuma ve Deste ekranlarının ANA mobil kontrolleri. */
  .icon-btn{width:44px;height:44px}
  .chip{
    min-height:44px;padding:11px 16px;font-size:13.5px;
    display:inline-flex;align-items:center;
  }
  .auth-modal-close{
    width:44px;height:44px;display:grid;place-items:center;
    top:6px;right:6px;font-size:26px;line-height:1;
  }
  /* Alt menü etiketleri 10.5px'ti; aktif renk --accent-text'e taşındığı için okunurluk
     arttı, ama dokunma yüksekliği de sınırı geçmeli. */
  .bnav-item{min-height:48px;justify-content:center}
}

.card.accent, .accent-card {
    overflow: hidden;
}

/* Toast Bildirimini Mobil Alt Menünün Üstüne Kaldırma */
@media (max-width: 900px) {
  #toast-container {
    bottom: calc(76px + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 8px))) !important;
  }
}

/* Dokunmatik Cihazlarda Sticky Hover Engelleme & Native Press Hissiyatı */
@media (hover: hover) {
  .card.clickable:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
}

.btn:active {
  transform: scale(0.97) !important;
}

/* ================= ONBOARDING OVERLAY STYLES ================= */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg, #111318);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.onboarding-overlay.hidden {
  display: none !important;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg, #0f1115);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.onboarding-overlay.fade-out {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.onboarding-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 24px)) + 12px) 20px calc(max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 24px)) + 28px);
  position: relative;
  box-sizing: border-box;
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  min-height: 44px;
}

.onboarding-progress-wrap {
  flex: 1;
  height: 6px;
  background: var(--surface-2, #22262e);
  border-radius: var(--r-full, 999px);
  overflow: hidden;
}

.onboarding-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #F43F5E), #E11D48);
  border-radius: var(--r-full, 999px);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-skip-btn {
  background: none;
  border: none;
  color: var(--text-3, #9ca3af);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  min-height: 48px;
  cursor: pointer;
  border-radius: var(--r-sm, 10px);
  transition: color 0.15s ease;
}

.onboarding-skip-btn:hover { color: var(--text, #f1f3f5); }

.onboarding-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.onboarding-step {
  display: none;
  flex-direction: column;
  animation: obSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.onboarding-step.active { display: flex; }

@keyframes obSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.ob-hero { text-align: center; margin-bottom: 24px; }

.ob-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-weak, rgba(244,63,94,.12));
  border: 1px solid var(--accent-line, rgba(244,63,94,.28));
  color: var(--accent-text, #FB7185);
  padding: 6px 16px;
  border-radius: var(--r-full, 999px);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.ob-title {
  font-size: 26px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--text, #f1f3f5);
}

.ob-subtitle {
  font-size: 14px;
  color: var(--text-2, #9ca3af);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
}

.ob-features-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.ob-feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface, #1a1d24);
  border: 1px solid var(--border, #2e343e);
  border-radius: var(--r, 14px);
}

.ob-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-2, #22262e);
  color: var(--accent, #F43F5E);
  display: grid;
  place-items: center;
  flex: none;
}

.ob-feature-info h4 { font-size: 14.5px; font-weight: 700; color: var(--text, #f1f3f5); margin-bottom: 2px; }
.ob-feature-info p { font-size: 12.5px; color: var(--text-2, #9ca3af); line-height: 1.4; }

.ob-option-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.ob-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--surface, #1a1d24);
  border: 2px solid var(--border, #2e343e);
  border-radius: var(--r, 14px);
  min-height: 56px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.ob-option-card:active { transform: scale(0.98); }

.ob-option-card.active {
  border-color: var(--accent, #F43F5E);
  background: linear-gradient(180deg, var(--accent-weak, rgba(244,63,94,.12)) 0%, var(--surface, #1a1d24) 100%);
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.18);
}

.ob-option-title { font-size: 15px; font-weight: 700; color: var(--text, #f1f3f5); }
.ob-option-sub { font-size: 12px; color: var(--text-2, #9ca3af); margin-top: 2px; }

.ob-check-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #3d4450);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  flex: none;
}

.ob-option-card.active .ob-check-circle {
  background: var(--accent, #F43F5E);
  border-color: var(--accent, #F43F5E);
  color: #fff;
}

.ob-chip-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

.ob-chip {
  flex: 1;
  min-width: calc(50% - 6px);
  padding: 12px 14px;
  min-height: 48px;
  background: var(--surface, #1a1d24);
  border: 1.5px solid var(--border, #2e343e);
  border-radius: var(--r-sm, 10px);
  color: var(--text-2, #9ca3af);
  font-size: 13.5px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ob-chip:active { transform: scale(0.96); }

.ob-chip.active {
  background: var(--accent, #F43F5E);
  border-color: var(--accent, #F43F5E);
  color: #fff;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25);
}

.ob-motivation-box {
  background: var(--surface-2, #22262e);
  border: 1px solid var(--accent-line, rgba(244,63,94,.28));
  border-radius: var(--r-sm, 10px);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #f1f3f5);
  margin-bottom: 24px;
}

.ob-summary-card {
  background: var(--surface, #1a1d24);
  border: 1px solid var(--border, #2e343e);
  border-radius: var(--r, 14px);
  padding: 18px 16px;
  margin-bottom: 18px;
}

.ob-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #2e343e);
  font-size: 13.5px;
}

.ob-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.ob-summary-label { color: var(--text-2, #9ca3af); }
.ob-summary-val { font-weight: 700; color: var(--text, #f1f3f5); }

.ob-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface, #1a1d24);
  border: 1px solid var(--border, #2e343e);
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  margin-bottom: 24px;
}

.ob-toggle-label { font-size: 14px; font-weight: 650; color: var(--text, #f1f3f5); }
.ob-toggle-sub { font-size: 12px; color: var(--text-2, #9ca3af); margin-top: 2px; }

.ob-switch { position: relative; width: 46px; height: 26px; flex: none; }
.ob-switch input { opacity: 0; width: 0; height: 0; }
.ob-slider {
  position: absolute; inset: 0;
  background-color: var(--surface-3, #2a2f38);
  border-radius: 999px; cursor: pointer; transition: 0.25s ease;
}
.ob-slider::before {
  content: ""; position: absolute;
  height: 20px; width: 20px; left: 3px; bottom: 3px;
  background-color: white; border-radius: 50%; transition: 0.25s ease;
}
.ob-switch input:checked + .ob-slider { background-color: var(--accent, #F43F5E); }
.ob-switch input:checked + .ob-slider::before { transform: translateX(20px); }

.ob-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: calc(max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 16px)) + 8px);
}

.ob-btn-primary {
  width: 100%;
  min-height: 52px;
  background: var(--accent, #F43F5E);
  color: #fff;
  border: none;
  border-radius: var(--r, 14px);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ob-btn-primary:active { transform: scale(0.97); }
.ob-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.ob-btn-secondary {
  width: 100%;
  min-height: 48px;
  background: transparent;
  color: var(--text-2, #9ca3af);
  border: 1px solid var(--border, #2e343e);
  border-radius: var(--r, 14px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ob-btn-secondary:active { transform: scale(0.97); }


/* ============================ Ayarlar — Master-Detail ============================
   Sol: dikey navigation rail (ikon + 11px etiket, Material 3 rail ölçüleri).
   Sağ: yalnızca seçili kategorinin ayarları, satır (row) düzeninde. 700px altında
   rail yatay sekme şeridine dönüşür (başparmak erişimi için ekranın üstünde, kaydırılabilir). */
.settings-shell{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:start}
.settings-rail{
  position:sticky;top:16px;display:flex;flex-direction:column;gap:4px;
  padding:8px 6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
}
.srail-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:60px;padding:8px 4px;border:none;background:none;border-radius:var(--r);
  color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .14s,color .14s;-webkit-tap-highlight-color:transparent;
}
.srail-item .icon{width:22px;height:22px}
.srail-item:hover{background:var(--surface-2);color:var(--text)}
.srail-item.active{background:var(--accent-weak);color:var(--accent-text)}
.srail-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.settings-pane{min-width:0;animation:fadeUp .18s ease}
.set-head{margin:4px 0 16px}
.set-head h2{display:flex;align-items:center;gap:10px;font-size:20px}
.set-head h2 .icon{color:var(--accent-text)}
.set-head p{font-size:13px;color:var(--text-3);margin-top:3px}

.set-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:4px 18px;margin-bottom:16px}
.set-group-title{font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);padding:12px 0 4px}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;border-top:1px solid var(--border)}
.set-row:first-child,.set-group-title + .set-row{border-top:none}
.set-row.stack{flex-direction:column;align-items:stretch}
.set-row-main{min-width:0;flex:1}
.set-row-title{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--text)}
.set-row-hint{font-size:12.5px;color:var(--text-3);line-height:1.45;margin-top:2px}
.set-row-ctrl{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.set-row.stack .set-row-ctrl{justify-content:flex-start;margin-top:10px}
.set-value{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px}
.set-select{width:100%;margin:0}

/* ⓘ: uzun açıklama satırın altında açılır, ekranı kalıcı olarak işgal etmez */
.set-info{display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px 0;border:none;background:none;border-radius:50%;color:var(--text-3);cursor:pointer}
.set-info .icon{width:16px;height:16px}
.set-info:hover,.set-info[aria-expanded="true"]{background:var(--surface-2);color:var(--accent-text)}
.set-info-pop{margin-top:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--accent-line);font-size:12.5px;line-height:1.55;color:var(--text-2);animation:fadeUp .16s ease}

/* Durum pastilleri */
.set-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:650;background:var(--surface-3);color:var(--text-2)}
.set-pill.ok{background:var(--ok-weak);color:var(--ok)}
.set-pill.warn{background:var(--warn-weak);color:var(--warn)}
.badge.google{background:#4285F4;color:#fff;margin-left:6px}

/* Bölümlü seçici */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.seg-btn{min-width:44px;min-height:38px;padding:6px 14px;border:none;background:none;border-radius:calc(var(--r) - 4px);color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .14s,color .14s}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
body.light .seg-btn.active{background:#fff}

/* Tehlikeli eylem: dev kırmızı dolgu yerine sade çerçeve; asıl fren onay modalı */
.btn.danger-outline{background:transparent;color:var(--err);border:1px solid var(--err);box-shadow:none}
.btn.danger-outline:hover{background:var(--err-weak)}
.btn.danger-outline:active{transform:translateY(1px)}

/* Kapatılabilir satır içi uyarı (yalnızca Ses sekmesinde) */
.set-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 12px 11px 14px;margin-bottom:14px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);animation:fadeUp .18s ease}
.set-banner.warn{border-color:var(--warn);border-left-width:3px;background:var(--warn-weak)}
.set-banner-txt{flex:1;font-size:13px;line-height:1.5;color:var(--text-2)}
.set-banner-txt b{color:var(--text)}
.set-banner-x{display:grid;place-items:center;width:32px;height:32px;margin:-4px -4px -4px 0;border:none;background:none;border-radius:50%;color:var(--text-3);cursor:pointer;flex:none}
.set-banner-x:hover{background:var(--surface-2);color:var(--text)}

/* Profil başlığı */
.set-profile{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.set-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent-solid);color:#fff;font-size:22px;font-weight:700;font-family:'Outfit','Inter',sans-serif}
.set-profile.guest .set-avatar{background:var(--surface-3);color:var(--text-3)}
.set-profile-name{font-size:17px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap}
.set-profile-mail{font-size:13px;color:var(--text-3);margin-top:2px;word-break:break-all}

/* Dar ekran: rail üstte yatay sekme şeridi; satırlar dikey yığılır */
@media(max-width:700px){
  .settings-shell{grid-template-columns:1fr;gap:12px}
  .settings-rail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;gap:2px}
  .settings-rail::-webkit-scrollbar{display:none}
  .srail-item{flex:1 0 auto;min-width:64px;min-height:56px;padding:6px 10px}
  .set-group{padding:4px 14px}
  .set-row{flex-wrap:wrap}
  .set-row-ctrl{flex-basis:100%;justify-content:flex-start}
  .set-row-ctrl:has(.ob-switch){flex-basis:auto}
  .seg{width:100%}
  .seg-btn{flex:1;min-height:44px}
  .btn.sm{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.settings-pane,.set-info-pop,.set-banner{animation:none}}

/* Almanca kelime kartı: dilbilgisi künyesi (artikel · çoğul · Perfekt · Rektion) — anlamdan
   sonra, örnek cümleden önce. İngilizce kayıtlarda alan yok, kutu çizilmez. */
.flash-gram{font-size:13.5px;line-height:1.7;color:var(--text-2);margin:0 auto 12px;padding:8px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);max-width:440px}
.flash-gram b{color:var(--accent-text);font-weight:700}

/* Dil kodu rozeti (EN / DE) — ayarlar seçicisi ve kurulum sihirbazı */
.lang-code{display:inline-block;min-width:26px;padding:1px 6px;margin-right:2px;border-radius:6px;background:var(--accent-weak);color:var(--accent-text);font-size:11px;font-weight:750;letter-spacing:.06em;text-align:center;vertical-align:1px}
.seg-btn.active .lang-code{background:var(--accent-solid);color:#fff}
/* Kurulum sihirbazı: hedef dil seçimi */
.ob-lang{margin:14px 0 4px}
.ob-lang-lbl{font-size:12.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.ob-lang-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-lang-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:56px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:border-color .14s,background .14s}
.ob-lang-btn small{font-size:11.5px;font-weight:500;color:var(--text-3)}
.ob-lang-btn.active{border-color:var(--accent);background:var(--accent-weak)}
.ob-lang-btn.active .lang-code{background:var(--accent-solid);color:#fff}

/* Ayarlar: hatırlatma saati */
.set-time{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font:inherit;font-variant-numeric:tabular-nums}
.set-time:disabled{opacity:.45}
/* ================= KİLİT ARAYÜZÜ (hibrit freemium) ================= */
/* Kilitli içerik kartı: kilit ikonu + "Reklam izle" + "Premium'a geç" + günlük kota.
   Renk: uyarı tonu (sarı) — hata değil, bilgi. Premium kullanıcıda hiç çizilmez. */
.lock-card{border:1px dashed var(--warn);background:var(--warn-weak)}
.lock-card h3{color:var(--text)}
.lock-card .lock-ico{color:var(--warn)}
.lock-card p{margin:6px 0 0;color:var(--text-2);line-height:1.55}
.lock-card p b{color:var(--text)}
.lock-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lock-actions .btn[disabled]{opacity:.5;cursor:not-allowed}
.lock-quota{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.lock-quota.empty{color:var(--warn)}
.lock-note{font-size:12.5px !important;color:var(--text-3) !important;margin-top:8px !important}
.lock-card.compact{padding:12px 14px;margin-bottom:16px}
.lock-card.compact h3{font-size:14px}
.lock-card.compact p{font-size:13px}
/* Listelerde kilitli ders kartı: soluk + kilit ikonu; tıklanınca kilit ekranı açılır */
.locked-card{opacity:.72;border-style:dashed}
.locked-card .lock-ico{color:var(--warn);vertical-align:-2px}
.lock-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-weak);border-radius:999px;padding:3px 8px;white-space:nowrap}
/* Yalnızca Premium kartı: uyarı sarısı yerine vurgu (accent) tonu — "reklamla açılmaz" ayrımı görünür olsun */
.lock-card.premium-only{border-color:var(--accent);background:var(--accent-weak)}
.lock-card.premium-only .lock-ico{color:var(--accent-text)}
.lock-card.premium-only .lock-chip{color:var(--accent-text);background:var(--accent-weak);border:1px solid var(--accent)}
/* Premium yönlendirmeleri (16 Eylül 2026): üst çubuk rozeti, ana sayfa kartı, sonuç satırı */
.premium-badge-nav .icon{width:14px;height:14px}
.premium-badge-nav.is-active{background:linear-gradient(135deg,#059669,#047857)}
/* Dar ekranda yalnız ikon: sayfa başlığı kesilmesin (metin font-size:0 ile gizlenir, title kalır) */
@media(max-width:480px){.premium-badge-nav{padding:7px 9px;font-size:0;gap:0}.premium-badge-nav .icon{width:16px;height:16px}}
/* 360px: rozet eklenince "Ana Sayfa" başlığı kesiliyordu; başlık bir tık küçülür, seri çipi daralır */
@media(max-width:400px){.topbar h1{font-size:16px !important}.streak-chip{padding:5px 7px !important}.premium-badge-nav{padding:6px 8px}}
@media(max-width:900px){.premium-promo p{-webkit-line-clamp:3 !important;line-height:1.4 !important}}
.premium-promo{display:flex;align-items:center;gap:14px;border:1px solid var(--accent);background:linear-gradient(135deg,var(--accent-weak),var(--surface))}
.premium-promo .pp-ico{width:42px;height:42px;border-radius:12px;background:var(--accent-solid);color:#fff;display:grid;place-items:center;flex-shrink:0}
.premium-promo .pp-txt{flex:1;min-width:0}
.premium-promo h3{margin:0 0 4px}
.premium-promo p{margin:0;font-size:13px}
.premium-promo .btn{flex-shrink:0;white-space:nowrap}
@media(max-width:600px){.premium-promo{flex-wrap:wrap}.premium-promo .btn{flex:1 1 100%;justify-content:center}}
.premium-nudge{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px auto 0;padding:10px 12px;border-radius:var(--r);background:var(--accent-weak);color:var(--text-2);font-size:13px;max-width:560px}
.premium-nudge .icon{color:var(--accent-text);flex-shrink:0}
.premium-nudge .btn{white-space:nowrap}
/* Taktik çipi kilitliyken soluk + kilit ikonu */
.chip.chip-locked{opacity:.7}
.chip.chip-locked .icon{color:var(--warn);vertical-align:-2px}
/* Reklamla açılmış içerik: kalan süre rozeti */
.unlock-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ok);background:var(--ok-weak);border-radius:999px;padding:2px 7px;vertical-align:middle;white-space:nowrap}
.exam-quota{font-size:12.5px;color:var(--accent-text);font-weight:600;margin-top:8px !important}
@media(max-width:600px){.lock-actions .btn{flex:1 1 100%;justify-content:center}}
/* ================= KOÇUN 3 ALTIN GÖREVİ (İlerleme sayfası) =================
   600px altı TEK sütun tam genişlik; 600px ve üstü 3 sütun (asla 2+1 kalmaz).
   Kart içi sıra: rozet → başlık → açıklama → tam genişlik düğme. Mobil .card p
   kısaltması (2 satır "…") bu kartlarda kapalı; metinler kısa tutuldu. */
.coach-tasks{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}
@media(min-width:600px){.coach-tasks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.coach-task{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.coach-task .badge{white-space:nowrap;flex-shrink:0}
.coach-task .coach-title{display:block;font-size:14px;font-weight:700;line-height:1.3;color:var(--text);word-break:keep-all;overflow-wrap:normal;hyphens:none}
.coach-task p{margin:0 !important;font-size:12.5px !important;line-height:1.45 !important;color:var(--text-2);display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;word-break:keep-all;overflow-wrap:normal}
.coach-task .btn{width:100%;margin-top:6px;white-space:nowrap;justify-content:center;gap:6px;min-height:44px}
.coach-task .btn .icon{flex-shrink:0}

/* Hatırlatma: bildirim izni reddedilmişken sistem ayarlarına götüren uyarı düğmesi */
.reminder-hint{margin-top:8px}
.reminder-hint-btn{display:inline-flex;align-items:center;gap:6px;background:var(--warn-weak);color:var(--warn);border:1px solid var(--warn);border-radius:var(--r);padding:8px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;line-height:1.35}
.reminder-hint-btn:hover{filter:brightness(1.1)}