/* ============================================================
   YDS Kelimelerim — tasarım sistemi
   Mobil öncelikli. Kırılma noktaları: 480 / 640 / 900 / 1200
   ============================================================ */

/* ---------- Tema değişkenleri ---------- */
/* Başlık yazı tipi — kendi alan adımızdan sunulur, üçüncü taraf isteği yok.
   Değişken sürüm 400-700 aralığını tek dosyada verir (24 KB). */
@font-face{
  font-family:'Lora';
  src:url('/assets/lora-subset.woff2') format('woff2-variations'),
      url('/assets/lora-subset.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;   /* yazı tipi gelene kadar yedek fontla göster */
}

/* Palet — "Kâğıt & Çam".
   Zemin sıcak kâğıt tonunda; ekran ışığının mavi baskısı yerine basılı sayfaya
   yakın bir yüzey verir, uzun çalışma oturumlarında göz yorgunluğunu azaltır.
   Vurgu rengi derin çam yeşilidir: "doğru" yeşilinden belirgin biçimde daha
   koyu ve maviye çalar, bu yüzden seçili şık ile doğru şık karışmaz. */
:root{
  --r:14px; --r-sm:10px; --r-lg:20px;
  /* Gövde: sistem sans (indirme yok). Başlıklar: Lora serif — akademik ve resmî. */
  --ff:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ff-display:'Lora',Georgia,'Times New Roman',serif;
  --pad:clamp(16px,4vw,24px);
  --gap:clamp(12px,2.5vw,18px);
  --maxw:1320px;
  --readw:78ch;
  --dur:.18s;
}

/* Açık tema (varsayılan) — sıcak kâğıt zemin, kartlar krem beyaz kalarak öne çıkar.
   Kontrast oranları bg, surface ve surface-2 zeminlerine karşı ayrı ayrı
   ölçüldü; en düşük değer 4.77 ile WCAG AA sınırının (4.5) üzerinde. */
:root,[data-theme="light"]{
  --bg:#f5f1e8; --bg-grad:radial-gradient(1150px 680px at 50% -12%,#efe8d8 0%,#f5f1e8 60%);
  --surface:#fffdf8; --surface-2:#efe9dc; --surface-3:#e5ddcc;
  --line:#ddd4c2; --line-2:#c2b6a0;
  --txt:#221e18; --txt-2:#55503f; --txt-3:#635c4b;
  --acc:#0b625a; --acc-2:#094e47; --acc-3:#1a8271;
  --acc-dim:rgba(11,98,90,.09);
  --ok:#106845; --ok-dim:rgba(16,104,69,.1);
  --err:#b02029; --err-dim:rgba(176,32,41,.09);
  --warn:#82520e; --warn-dim:rgba(130,82,14,.1);
  /* Gölgeler sıcak kahve-siyah; mavi gölge kâğıt zeminde soğuk duruyordu. */
  --sh:0 1px 2px rgba(56,44,26,.07), 0 12px 28px -10px rgba(56,44,26,.18);
  --sh-sm:0 1px 2px rgba(56,44,26,.08);
  --ring:inset 0 1px 0 rgba(255,255,255,.75);
  /* Dolgulu yüzeylerin (düğme, seçili şık harfi, rozet) üzerindeki yazı rengi.
     Koyu temada vurgu rengi açık olduğu için beyaz yazı okunmaz hâle gelir;
     bu yüzden tema başına ayrı tanımlanır. */
  --on-fill:#ffffff;
  color-scheme:light;
}
/* Koyu tema — sıcak kömür. Mavi-siyah yerine kâğıt paletinin koyu karşılığı,
   böylece iki tema arasında geçiş aynı ailede kalır. */
[data-theme="dark"]{
  --bg:#141210; --bg-grad:radial-gradient(1250px 720px at 50% -12%,#221d16 0%,#141210 58%);
  --surface:#262119; --surface-2:#312b21; --surface-3:#3d362a;
  --line:#413a2e; --line-2:#5c5445;
  --txt:#f2ece0; --txt-2:#c0b6a2; --txt-3:#b0a694;
  --acc:#55c4b6; --acc-2:#70d3c6; --acc-3:#84dcbb;
  --acc-dim:rgba(85,196,182,.14);
  --ok:#48c884; --ok-dim:rgba(72,200,132,.14);
  --err:#f98d93; --err-dim:rgba(249,141,147,.14);
  --warn:#eeac4e; --warn-dim:rgba(238,172,78,.13);
  --sh:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.6);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --ring:inset 0 1px 0 rgba(255,255,255,.045);
  --on-fill:#141210;
  color-scheme:dark;
}

/* ---------- Sıfırlama ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  min-height:100dvh;background:var(--bg);background-image:var(--bg-grad);
  background-attachment:fixed;color:var(--txt);font-family:var(--ff);
  font-size:clamp(15.5px,.4vw + 15px,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--acc-2);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--acc);color:var(--on-fill)}
:focus-visible{outline:2.5px solid var(--acc-2);outline-offset:2px;border-radius:4px}
/* Başlıklar serif — akademik ve resmî bir ton verir. Gövde metni sans kalır. */
:where(h1,h2,h3,h4){font-family:var(--ff-display);line-height:1.24;
  letter-spacing:-.012em;font-weight:650;text-wrap:balance;
  font-variant-numeric:oldstyle-nums}
p{text-wrap:pretty}
/* Sayı ağırlıklı alanlarda hizalı rakam kullan */
.stat b,.counter,.test-hero-num,.tbl td:last-child{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- Yerleşim ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-right))}
main{flex:1;width:100%;padding-block:clamp(20px,4vw,38px) clamp(36px,7vw,72px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--on-fill);padding:12px 20px;
  border-radius:0 0 10px 0;z-index:200;font-weight:600}
.skip:focus{left:0}

/* ---------- Üst bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.topbar-in{display:flex;align-items:center;gap:12px;min-height:60px}
/* Marka daralabilmeli. flex:none ile sabitlendiğinde dar telefonlarda üst çubuk
   ekrandan taşıyor ve sayfa yana kaydırılabilir hâle geliyordu. */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);
  font-weight:640;letter-spacing:-.01em;
  font-size:clamp(15px,1.1vw + 13px,17.5px);color:var(--txt);
  flex:0 1 auto;min-width:0;overflow:hidden}
.brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--acc),var(--acc-3));display:grid;place-items:center;
  color:var(--on-fill);font-size:15px;font-weight:800}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--txt-3);letter-spacing:.02em;
  line-height:1.1;margin-top:1px}
.nav{display:none;margin-left:auto;align-items:center;gap:2px}
.nav a{padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:580;color:var(--txt-2);
  transition:var(--dur)}
.nav a:hover{background:var(--surface-2);color:var(--txt);text-decoration:none}
.nav a[aria-current="page"]{color:var(--acc-2);background:var(--acc-dim)}
.nav .cta{background:var(--acc);color:var(--on-fill);padding:9px 17px;margin-left:8px}
.nav .cta:hover{background:var(--acc-2);color:var(--on-fill)}
.icon-btn{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:var(--txt-2);
  border:1px solid transparent;transition:var(--dur);flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--txt);border-color:var(--line)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Mobil hızlı gezinme — ana sayfa ikonu ve teste giriş düğmesi.
   Geniş ekranda ana menüde zaten karşılıkları var, o yüzden gizlenir. */
.home-btn{margin-left:auto}
.home-btn svg{width:21px;height:21px}
.quiz-btn{display:inline-flex;align-items:center;height:38px;padding:0 15px;flex:none;
  border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc-3));color:var(--on-fill);
  font-size:14px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;
  box-shadow:0 2px 10px var(--acc-dim);transition:var(--dur)}
.quiz-btn:hover{filter:brightness(1.08);text-decoration:none;color:var(--on-fill);transform:translateY(-1px)}
.quiz-btn:active{transform:none}
#menuBtn{margin-left:6px}
#themeBtn .sun{display:none}
[data-theme="light"] #themeBtn .sun{display:block}
[data-theme="light"] #themeBtn .moon{display:none}

.drawer{display:none;border-top:1px solid var(--line);padding:10px 0 calc(14px + env(safe-area-inset-bottom))}
.drawer.on{display:block;animation:drop .2s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer a{display:block;padding:13px 14px;border-radius:10px;font-size:16px;font-weight:580;color:var(--txt-2)}
.drawer a:hover,.drawer a[aria-current="page"]{background:var(--surface-2);color:var(--txt);text-decoration:none}
.drawer .cta{background:var(--acc);color:var(--on-fill);text-align:center;margin-top:8px;font-weight:650}

@media (min-width:900px){
  #menuBtn,.home-btn,.quiz-btn{display:none}
  .nav{display:flex}
  .drawer{display:none!important}
}
/* Dar ekranlarda üst çubuk bütçesi:
   360px ekran = 32 kenar boşluğu + 3 ikon (40) + Test Çöz (~78) + boşluklar.
   Marka adı bu bütçenin dışında kalır, yalnızca işaret gösterilir. */
@media (max-width:600px){
  .topbar-in{gap:8px;min-height:56px}
  .icon-btn{width:40px;height:40px}
  #menuBtn{margin-left:2px}
  .quiz-btn{padding:0 13px;font-size:13.5px;height:36px}
  .brand small{display:none}
}
@media (max-width:430px){
  /* Marka yazısı yerine yalnızca işaret; ad erişilebilir etikette korunur. */
  .brand>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap}
  .brand{flex:none}
  .quiz-btn{padding:0 11px;font-size:13px}
}

/* ---------- Sosyal medya ----------
   Altbilgide `.foot-col a{display:block}` kuralı geçerli olduğundan bu
   bağlantıların satır içi kalması için seçici en az onun kadar belirgin
   olmalı; aksi hâlde ikon ile ad alt alta düşer. */
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.social .social-link,.social-link{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--txt-2);font-size:13.5px;font-weight:620;line-height:1;transition:var(--dur)}
.social .social-link:hover{border-color:var(--acc);color:var(--acc-2);background:var(--acc-dim);
  text-decoration:none}
.social-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* Sayfa başlığındaki yardımcı şerit: sıralama kısayolu + takip bağlantıları.
   Ana eylem düğmeleriyle aynı satırda başlar, yer kalmayınca alt satıra iner. */
.head-extra{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:center}
.head-board{flex:0 1 auto;min-width:0;white-space:nowrap}
/* Takip alanı — ilk açılışta görünür, eylem düğmeleriyle yarışmayan ağırlıkta. */
.head-social{display:inline-flex;align-items:center;gap:11px;flex:none;
  padding-left:16px;margin-left:0;border-left:1px solid var(--line)}
.head-social-label{font-size:13px;font-weight:620;color:var(--txt-3);white-space:nowrap}
.social-top{margin-top:0;gap:7px}
/* Yalnızca ikon: kare değil daire, düğmelerden ayrışsın */
.social-top .social-link{width:42px;height:42px;padding:0;justify-content:center;
  border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm)}
.social-top .social-link svg{width:20px;height:20px}
.social-top .social-link:hover{transform:translateY(-1px);border-color:var(--acc);
  color:var(--acc-2);background:var(--acc-dim)}
/* Dar ekran: yardımcı şerit tam genişlik alır, dikey diziler.
   Ayraç dikey çizgiden yatay çizgiye döner. */
@media (max-width:640px){
  .head-extra{width:100%;flex-direction:column;gap:14px;
    border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
  .head-board{width:100%;justify-content:center}
  .head-social{width:100%;justify-content:center;padding-left:0;margin-left:0;
    border-left:0;padding-top:0;margin-top:0}
}
@media (max-width:420px){
  /* Tek satıra sığmayan uzun etiket kısalır; anlam korunur. */
  .head-board{font-size:14.5px;padding-inline:16px}
}

/* ---------- Kullanıcı yorumları ----------
   Sayfa başlığının altında, uygulamadan önce duran ince bir şerit. */
.tstrip{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.tstrip-h{font-size:clamp(19px,1.2vw + 16px,23px);text-align:center;margin-bottom:20px}
.tgrid{display:grid;gap:14px;grid-template-columns:1fr;text-align:left}
@media (min-width:760px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--sh-sm),var(--ring);position:relative}
/* Tırnak işareti dekoratif; ekran okuyucuya okunmaması için ::before ile verilir */
.tcard::before{content:'\201C';position:absolute;top:2px;right:16px;
  font-family:var(--ff-display);font-size:60px;line-height:1;color:var(--acc);
  opacity:.14;pointer-events:none}
.tcard blockquote{font-size:15.5px;line-height:1.62;color:var(--txt-2);margin:0 0 14px;
  position:relative}
.tcard figcaption{display:flex;flex-direction:column;gap:2px;
  padding-top:12px;border-top:1px solid var(--line)}
.tcard figcaption b{font-family:var(--ff-display);font-size:15.5px;font-weight:650}
.tcard figcaption span{font-size:12.5px;color:var(--txt-3)}
.tnote{margin-top:14px;text-align:center;font-size:12.5px;color:var(--txt-3)}

/* ---------- Tipografi yardımcıları ---------- */
.eyebrow{font-size:11.5px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.lead{font-size:clamp(16.5px,.6vw + 15.5px,19px);color:var(--txt-2);line-height:1.62}
.muted{color:var(--txt-2)}
.small{font-size:13.5px}
h1{font-size:clamp(28px,4.6vw,43px);font-weight:640;letter-spacing:-.018em}
h2{font-size:clamp(21px,2.6vw,29px);font-weight:640}
h3{font-size:clamp(17.5px,1.6vw,21px);font-weight:640}
.grad{background:linear-gradient(115deg,var(--acc-2),var(--acc-3));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Bileşenler ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,3vw,22px);box-shadow:var(--sh-sm),var(--ring)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:13px 22px;border-radius:var(--r-sm);background:var(--acc);color:var(--on-fill);font-weight:650;
  font-size:15.5px;transition:var(--dur);text-align:center;border:1px solid transparent}
.btn:hover{background:var(--acc-2);color:var(--on-fill);text-decoration:none;transform:translateY(-1px);
  box-shadow:var(--sh-sm)}
.btn:active{transform:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--surface-2);color:var(--txt);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--txt)}
.btn.wide{width:100%}
.btn.sm{min-height:40px;padding:9px 16px;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 180px}

.tag{display:inline-block;font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;background:var(--surface-2);color:var(--txt-3);border:1px solid var(--line)}
.tag.pos{color:var(--acc-2);border-color:color-mix(in srgb,var(--acc) 35%,transparent);background:var(--acc-dim)}
.tag.lv1{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:var(--ok-dim)}
.tag.lv2{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-dim)}
.tag.lv3{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,transparent);background:var(--err-dim)}

.segs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:4px;gap:4px;overflow-x:auto;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.seg{flex:1 0 auto;min-height:40px;padding:9px 14px;border-radius:7px;font-size:14px;font-weight:620;
  color:var(--txt-2);transition:var(--dur);white-space:nowrap}
.seg:hover{color:var(--txt)}
.seg.on{background:var(--acc);color:var(--on-fill)}

.field{width:100%;min-height:48px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 16px;color:var(--txt);font-size:16px;transition:var(--dur)}
.field:focus{outline:none;border-color:var(--acc);background:var(--surface-2);
  box-shadow:0 0 0 3px var(--acc-dim)}
.field::placeholder{color:var(--txt-3)}

/* ---------- Sayfa başlığı ---------- */
.page-head{text-align:center;padding-block:clamp(12px,3vw,30px) clamp(24px,5vw,40px);
  border-bottom:1px solid var(--line);margin-bottom:clamp(26px,5vw,40px)}
.page-head .eyebrow{display:block;margin-bottom:12px}
.page-head h1{margin-bottom:14px}
.page-sub{font-size:clamp(16px,.6vw + 15px,18.5px);color:var(--txt-2);line-height:1.6;
  max-width:56ch;margin-inline:auto}
.head-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.head-actions .btn{flex:0 1 auto;min-width:190px}
/* Metin bloklarını paragraf gibi birbirinden ayır */
.page-head .page-sub+.page-sub{margin-top:18px}
.head-inline-cta{margin-top:22px;margin-bottom:26px}

/* Test / sonuç / istatistik ekranındayken tanıtım içeriği gizlenir */
body.in-app .page-head,
body.in-app .info{display:none}

/* ---------- Açılış animasyonu ----------
   Sayfa her açılışta/yenilenişte içerik kademeli belirir. Yavaş ve belirgin
   olsun diye süre uzun tutuldu; .stagger içindeki öğeler sırayla gelir.
   Hareket tercihi kapalıysa (prefers-reduced-motion) hiç uygulanmaz. */
@keyframes revealUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
.reveal-up{animation:revealUp 1.1s cubic-bezier(.16,.72,.28,1) both;
  animation-delay:var(--d,0s)}
.stagger>*{animation:revealUp 1.1s cubic-bezier(.16,.72,.28,1) both}
.stagger>*:nth-child(1){animation-delay:.10s}
.stagger>*:nth-child(2){animation-delay:.28s}
.stagger>*:nth-child(3){animation-delay:.46s}
.stagger>*:nth-child(4){animation-delay:.64s}
.stagger>*:nth-child(5){animation-delay:.82s}
.stagger>*:nth-child(6){animation-delay:1.00s}
.stagger>*:nth-child(7){animation-delay:1.18s}
.stagger>*:nth-child(8){animation-delay:1.36s}
@media (prefers-reduced-motion:reduce){
  .reveal-up,.stagger>*{animation:none}
}

/* ---------- İstatistik ızgarası ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 12px;text-align:center}
.stat b{display:block;font-size:clamp(20px,2.4vw,25px);font-weight:780;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums}
.stat small{color:var(--txt-3);font-size:11px;font-weight:650;letter-spacing:.05em}
.stat.due b{color:var(--warn)} .stat.new b{color:var(--acc-2)} .stat.done b{color:var(--ok)}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- Özellik ızgarası ---------- */
.grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.grid.cols-2,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm),var(--ring);transition:var(--dur)}
a.feat:hover{transform:translateY(-2px);box-shadow:var(--sh),var(--ring);border-color:var(--line-2)}
.feat .ic{width:40px;height:40px;border-radius:11px;background:var(--acc-dim);display:grid;
  place-items:center;margin-bottom:13px;font-size:19px}
.feat :where(h2,h3){font-size:16.5px;margin-bottom:6px;letter-spacing:-.015em}
.feat p{color:var(--txt-2);font-size:14.5px;line-height:1.58}

/* ---------- Çalışma paneli ----------
   Varsayılan yol tek tıklama: büyük başlat düğmesi görünür, ayarlar
   isteğe bağlı olarak açılır. */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,3.5vw,28px);margin-bottom:16px;box-shadow:var(--sh-sm),var(--ring)}
.start-panel{background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-color:var(--line-2)}

/* İnce ayırıcı çizgi — kenarlara doğru soluklaşır */
.rule{border:none;height:1px;margin:clamp(20px,3.5vw,26px) 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,
             var(--line-2) 88%,transparent)}

/* Çalışma alanı başlıkları: ortalanmış ve belirgin */
.field-label{display:block;text-align:center;font-size:clamp(19px,2.1vw,23px);
  font-weight:730;margin-bottom:16px;letter-spacing:-.02em;line-height:1.25}
.field-note{color:var(--txt-3);font-size:13.5px;margin-top:10px;line-height:1.55;
  text-align:center}

/* Çözülecek Test İçeriği — görsel özet kartı */
.test-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm),var(--ring)}
.test-hero{position:relative;text-align:center;padding:clamp(20px,4vw,28px) 18px;
  background:radial-gradient(120% 140% at 50% 0%,var(--acc-dim) 0%,transparent 70%)}
.test-hero::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.test-hero-num{display:block;font-family:var(--ff-display);
  font-size:clamp(52px,12vw,76px);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,var(--acc-2),var(--acc-3));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.test-hero-unit{display:block;margin-top:4px;font-size:clamp(16px,2vw,19px);font-weight:700;
  color:var(--txt-2);letter-spacing:.02em}
.test-hero-time{display:inline-block;margin-top:12px;font-size:13px;font-weight:650;
  color:var(--txt-3);background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:5px 14px}
.test-rows{display:grid;grid-template-columns:1fr}
.test-rows>div{display:flex;align-items:center;gap:12px;padding:14px clamp(14px,3vw,20px);
  flex-wrap:wrap}
.test-rows>div+div{border-top:1px solid var(--line)}
.test-rows dt{color:var(--txt-2);font-size:14px;font-weight:620;flex:0 0 auto}
.test-rows dd{margin-left:auto;font-size:clamp(15px,1.5vw,16.5px);font-weight:720;
  color:var(--txt);text-align:right}
@media (min-width:620px){.test-rows{grid-template-columns:repeat(2,1fr)}
  .test-rows>div+div{border-top:none;border-left:1px solid var(--line)}}

.btn-start{margin-top:clamp(22px,3.5vw,28px);font-size:17px;min-height:58px}
.start-note{color:var(--txt-3);font-size:13.5px;margin-top:13px;line-height:1.55;
  text-align:center}

.progress-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,3.5vw,24px);box-shadow:var(--sh-sm),var(--ring)}

/* Yedekleme kutusu */
.backup-box{margin-top:16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 16px}
.backup-actions{display:flex;gap:9px;flex-wrap:wrap}
.backup-actions .btn{flex:1 1 140px}
.backup-note{color:var(--txt-2);font-size:13.5px;line-height:1.6;margin-top:12px}
.reset-link{display:block;margin:14px auto 0;font-size:13px;color:var(--txt-3)}
.reset-link:hover{color:var(--err)}

/* ---------- Ana sayfa bilgi bölümleri ---------- */
.info{margin-top:clamp(50px,9vw,88px)}
.info>section+section{margin-top:clamp(44px,8vw,76px)}
.info h2{margin-bottom:12px}
.section-intro{color:var(--txt-2);font-size:clamp(15.5px,.4vw + 15px,17px);max-width:68ch;
  margin-bottom:26px;line-height:1.65}
.prose{max-width:70ch;font-size:clamp(15.5px,.4vw + 15px,17px);line-height:1.72}
.prose>*+*{margin-top:1em}
.prose ul{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--acc-2)}
.prose b{color:var(--txt);font-weight:660}

.flow{list-style:none;display:grid;gap:var(--gap);counter-reset:none}
@media (min-width:820px){.flow{grid-template-columns:repeat(3,1fr)}}
.flow li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;position:relative}
.flow-no{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc-3));color:var(--on-fill);font-weight:750;
  font-size:14px;margin-bottom:13px}
.flow h3{font-size:16.5px;margin-bottom:7px}
.flow p{color:var(--txt-2);font-size:14.5px;line-height:1.6}

.faq{display:grid;gap:9px;max-width:74ch}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:var(--dur)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:640;font-size:16px;list-style:none;
  display:flex;align-items:center;gap:12px;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--txt-3);font-size:19px;font-weight:400;
  flex:none;transition:var(--dur)}
.faq details[open] summary::after{content:'−';color:var(--acc-2)}
.faq summary:hover{color:var(--acc-2)}
.faq .faq-a{padding:0 18px 17px;color:var(--txt-2);font-size:15px;line-height:1.65;max-width:66ch}

/* ---------- Makale ---------- */
.article{max-width:var(--readw);margin-inline:auto}
.article-head{margin-bottom:clamp(24px,4vw,36px);padding-bottom:22px;border-bottom:1px solid var(--line)}
.article-head h1{margin-bottom:12px}
.meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--txt-3);font-size:13.5px;
  margin-top:14px}
.article-body{font-size:clamp(16px,.45vw + 15.4px,17.5px);line-height:1.75}
.article-body>*+*{margin-top:1.15em}
.article-body h2{margin-top:2em;margin-bottom:.55em;padding-top:.35em}
.article-body h3{margin-top:1.7em;margin-bottom:.4em}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li+li{margin-top:.5em}
.article-body li::marker{color:var(--acc-2)}
.article-body strong{color:var(--txt);font-weight:680}
.article-body em{font-style:italic;color:var(--txt-2)}
.article-body blockquote{border-left:3px solid var(--acc);padding:4px 0 4px 18px;color:var(--txt-2);
  font-style:italic}
.article-body code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:2px 6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.article-body table{width:100%;border-collapse:collapse;font-size:.94em;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.article-body th{font-weight:680;color:var(--txt);white-space:nowrap}
.article-body td{color:var(--txt-2)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 18px;font-size:15.5px}
.callout b{color:var(--txt)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.toc .eyebrow{display:block;margin-bottom:10px}
.toc ol{padding-left:1.2em;font-size:15px}
.toc li+li{margin-top:.45em}

.crumbs{display:flex;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--txt-3);margin-bottom:18px}
.crumbs a{color:var(--txt-2)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- Kelime listesi ---------- */
.wordgrid{display:grid;gap:9px;grid-template-columns:1fr}
@media (min-width:700px){.wordgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wordgrid{grid-template-columns:repeat(3,1fr)}}
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;transition:var(--dur);cursor:pointer;text-align:left;width:100%}
.wcard:hover{border-color:var(--line-2);background:var(--surface-2)}
.wcard-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wcard-top b{font-size:16px;font-weight:680;letter-spacing:-.01em}
.wcard-top .m{color:var(--txt-2);font-size:14px;flex:1 1 100%}
.wcard-ex{display:none;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:14.5px;line-height:1.6}
.wcard[aria-expanded="true"] .wcard-ex{display:block}
.wcard-ex .t{color:var(--txt-2);font-size:13.5px;margin-top:6px}
.wcard-ex .ex2{display:block;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  color:var(--txt-2);font-size:14px}
mark{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--acc) 32%,transparent) 60%);
  color:inherit;font-weight:700;padding:0 1px}
/* Kategori gezinmesi — sayfalar arası iç bağlantı ağı */
.cat-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;margin-bottom:20px;box-shadow:var(--sh-sm),var(--ring)}
.cat-nav>.eyebrow{display:block;margin-bottom:11px}
.cat-links{display:flex;flex-wrap:wrap;gap:8px}
.cat-link{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:14px;
  font-weight:600;color:var(--txt-2);transition:var(--dur)}
.cat-link:hover{border-color:var(--acc);color:var(--acc-2);text-decoration:none;
  background:var(--acc-dim)}
.cat-link b{font-size:12px;font-weight:750;color:var(--txt-3);font-variant-numeric:tabular-nums}
.cat-current{background:var(--acc-dim);border-color:var(--acc);color:var(--acc-2);cursor:default}
.cat-current b{color:var(--acc-2)}

.alpha-nav{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.alpha-nav a{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:680;color:var(--txt-2)}
.alpha-nav a:hover{background:var(--acc);color:var(--on-fill);border-color:var(--acc);text-decoration:none}
.letter-head{font-size:15px;font-weight:750;color:var(--acc-2);letter-spacing:.06em;
  margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);scroll-margin-top:80px}

/* ---------- Alt bilgi ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:26px;grid-template-columns:1fr;padding-block:34px}
@media (min-width:640px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-col h2{font-size:12px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:12px}
.foot-col a{display:block;padding:5px 0;font-size:14.5px;color:var(--txt-2)}
.foot-col a:hover{color:var(--acc-2)}
.foot-col p{font-size:14px;color:var(--txt-2);line-height:1.6}
.foot-bottom{border-top:1px solid var(--line);padding-block:18px;display:flex;gap:12px;
  flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:13px;color:var(--txt-3)}

/* ---------- Bildirim ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,90px);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:11px;padding:12px 22px;font-size:14.5px;font-weight:620;box-shadow:var(--sh);
  opacity:0;transition:.28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:90;max-width:92vw}
.toast.on{transform:translate(-50%,0);opacity:1}
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.on{display:flex}
.modal .box{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,4vw,26px);max-width:440px;width:100%;box-shadow:var(--sh)}
.modal h3{font-size:19px;margin-bottom:9px}
.modal p{color:var(--txt-2);font-size:15px;margin-bottom:20px}

/* ---------- Reklam alanları ----------
   AdSense, reklamın içerikten ayırt edilebilir olmasını ve tıklanabilir
   öğelere bitişik durmamasını şart koşar. Bu yüzden her alan etiketlenir,
   çerçevelenir ve üstünde/altında belirgin boşluk bırakılır. */
.adbox{display:block;margin:clamp(22px,4vw,34px) 0;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden;
  min-height:0;text-align:center}
.adbox-label{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:8px;text-align:left}
.adbox .adsbygoogle{display:block;width:100%}
/* Test ekranında şıkların hemen altına gelen alan: yanlış tıklamayı önlemek için
   ekstra üst boşluk. */
#vQuiz .adbox{margin-top:clamp(28px,5vw,40px)}
.adbox:empty,.adbox[data-empty="1"]{display:none}
@media print{.adbox{display:none!important}}

/* ---------- Çerez onay bandı ---------- */
.linklike{color:inherit;text-decoration:underline;text-underline-offset:2px;font-size:inherit;
  padding:0;border:none;background:none;cursor:pointer}
.linklike:hover{color:var(--acc-2)}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  animation:consentIn .32s cubic-bezier(.4,0,.2,1)}
.consent[hidden]{display:none}
@keyframes consentIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.consent-box{max-width:var(--maxw);margin-inline:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh);
  padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.consent-text{flex:1 1 320px;font-size:14px;line-height:1.55;color:var(--txt-2);margin:0}
.consent-text a{white-space:nowrap}
.consent-actions{display:flex;gap:9px;flex:0 0 auto;margin-left:auto}
.consent-actions .btn{min-height:42px;padding:10px 20px}
@media (max-width:560px){
  .consent{padding:10px}
  .consent-box{padding:14px 15px;gap:12px}
  .consent-text{font-size:13.5px}
  .consent-actions{width:100%;margin-left:0}
  .consent-actions .btn{flex:1}
}

/* ---------- Çok küçük ekranlar (≤480px) ---------- */
@media (max-width:480px){
  :root{--pad:14px;--gap:10px}
  .brand small{display:none}
  .brand span:not(.mark){font-size:15px}
  .topbar-in{min-height:56px;gap:8px}
  .page-head{padding-block:8px 20px;margin-bottom:22px}
  .row>*{flex:1 1 100%}
  .stat{padding:12px 8px}
  .stat small{font-size:10px;letter-spacing:0}
  .card{padding:15px}
  .foot-grid{gap:22px;padding-block:26px}
  .article-body table{font-size:13.5px}
  .article-body th,.article-body td{padding:8px 10px}
  .alpha-nav a{width:31px;height:31px;font-size:12px}
  .toast{padding:11px 16px;font-size:13.5px;bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ---------- Yatay mod telefonlar ---------- */
@media (max-height:520px) and (orientation:landscape){
  .topbar{position:static}
  .page-head{padding-block:6px 14px;margin-bottom:18px}
  main{padding-block:14px 24px}
  .qcard{padding:16px 18px}
  .qword{font-size:clamp(24px,4.4vw,32px)}
  .ring{width:104px}
}

/* ---------- Geniş ekranlar (≥1200px) ---------- */
@media (min-width:1200px){
  :root{--pad:32px}
  .app{max-width:860px}
}

/* ---------- Yüksek kontrast tercihi ---------- */
@media (prefers-contrast:more){
  :root{--line:#4a5a80;--line-2:#6b7ea8;--txt-2:#c4cee2;--txt-3:#95a3c0}
  .ans,.opt,.card,.feat{border-width:2px}
}

/* ---------- Yazdırma ---------- */
@media print{
  .topbar,footer,.no-print,.alpha-nav{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wcard,.card{border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid}
  .wordgrid{grid-template-columns:repeat(2,1fr)}
  .wcard-ex{display:block!important}
  a{color:#000;text-decoration:none}
}

/* ============================================================
   Quiz arayüzü — style.css'in devamı (build sırasında birleştirilir)
   ============================================================ */

.app{max-width:820px;margin-inline:auto;width:100%}
.view{display:none}
.view.on{display:block;animation:viewIn .24s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- Ayar seçicileri ---------- */
/* Çalışma türü kutuları — 9 kategori, sınav kâğıdı gibi belirgin */
.opts{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.opts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.opts{grid-template-columns:repeat(3,1fr)}}
.opt{position:relative;display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;text-align:left;
  transition:var(--dur);width:100%;min-height:74px;box-shadow:var(--sh-sm),var(--ring)}
.opt:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-dim);
  box-shadow:0 0 0 3px var(--acc-dim),var(--sh-sm)}
.opt .ic{width:40px;height:40px;border-radius:11px;background:var(--surface-2);display:grid;
  place-items:center;font-size:19px;flex:none;border:1px solid var(--line);transition:var(--dur)}
.opt[aria-pressed="true"] .ic{background:var(--acc);border-color:var(--acc)}
.opt .tt{flex:1;min-width:0}
.opt .tt b{display:block;font-family:var(--ff-display);font-size:17.5px;font-weight:680;
  letter-spacing:-.012em;line-height:1.2}
.opt .tt small{display:block;color:var(--txt-2);font-size:13px;line-height:1.4;margin-top:3px}
.opt-count{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:750;
  color:var(--txt-3);background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:2px 9px;font-variant-numeric:tabular-nums;transition:var(--dur)}
.opt[aria-pressed="true"] .opt-count{color:var(--acc-2);border-color:var(--acc);
  background:var(--surface)}
.opt .chk{position:absolute;bottom:12px;right:12px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-2);flex:none;transition:var(--dur)}
.opt[aria-pressed="true"] .chk{border-color:var(--acc);background:var(--acc);
  box-shadow:inset 0 0 0 3.5px var(--surface)}
/* Dar ekran: kutu tek sütuna düştüğünde sayı rozeti sağ üstte, işaret dairesi
   dikey ortada kalıyordu ve ikisi üst üste biniyordu. Mutlak konumlandırmayı
   bırakıp ikisini de akışa alıyoruz; yan yana dizilirler. */
@media (max-width:559px){
  .opt{min-height:66px;padding:13px 14px;gap:11px}
  .opt .opt-count,.opt .chk{position:static;top:auto;right:auto;bottom:auto;transform:none}
  .opt .opt-count{align-self:center;flex:none}
  .opt .chk{align-self:center;width:22px;height:22px}
  .opt .tt b{font-size:16.5px}
}

/* ---------- "Sadece yanlış yaptıklarım" anahtarı ---------- */
.filter-toggle{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  margin-top:12px;padding:14px 16px;border-radius:var(--r);background:var(--surface);
  border:1.5px solid var(--line);transition:var(--dur);box-shadow:var(--sh-sm),var(--ring)}
.filter-toggle:hover{border-color:var(--line-2);background:var(--surface-2)}
.filter-toggle[aria-pressed="true"]{border-color:var(--warn);background:var(--warn-dim)}
.filter-toggle .ft-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);font-size:18px;flex:none;
  transition:var(--dur)}
.filter-toggle[aria-pressed="true"] .ft-ic{background:var(--warn);border-color:var(--warn)}
.filter-toggle .ft-tt{flex:1;min-width:0}
.filter-toggle .ft-tt b{display:block;font-family:var(--ff-display);font-size:16.5px;
  font-weight:680;letter-spacing:-.012em;line-height:1.2}
.filter-toggle .ft-tt small{display:block;color:var(--txt-2);font-size:13px;line-height:1.4;
  margin-top:3px}
/* Açma/kapama anahtarı — durumun okunması için renk tek başına yeterli değil,
   topuzun konumu da değişir (renk körlüğü için). */
.filter-toggle .ft-sw{position:relative;width:46px;height:26px;border-radius:99px;flex:none;
  background:var(--surface-2);border:1.5px solid var(--line-2);transition:var(--dur)}
.filter-toggle .ft-sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--txt-3);transition:var(--dur)}
.filter-toggle[aria-pressed="true"] .ft-sw{background:var(--warn);border-color:var(--warn)}
.filter-toggle[aria-pressed="true"] .ft-sw::after{left:24px;background:var(--on-fill)}

/* ---------- Çalışma durumu göstergesi ----------
   Renk tek başına anlam taşımaz: yüzde ve açıklama metni de yazılır
   (renk körlüğü ve ekran okuyucu için). */
.status{margin-top:16px;padding:16px 18px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line)}
.status-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px}
.status-t{font-family:var(--ff-display);font-size:15.5px;font-weight:650;margin:0;
  letter-spacing:-.01em}
.status-pct{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1;color:var(--txt-3);transition:color .5s ease}
.status-bar{height:10px;border-radius:99px;overflow:hidden;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--err) 22%,transparent),
    color-mix(in srgb,var(--warn) 22%,transparent) 50%,
    color-mix(in srgb,var(--ok) 22%,transparent));
  border:1px solid var(--line)}
.status-bar i{display:block;height:100%;width:0;border-radius:99px;
  transition:width .7s cubic-bezier(.4,0,.2,1),background-color .5s ease}
.status-msg{font-family:var(--ff-display);font-size:16.5px;font-weight:680;
  margin:12px 0 4px;line-height:1.3;transition:color .5s ease}
.status-sub{font-size:13.5px;line-height:1.55;color:var(--txt-2);margin:0}
/* Sonuç ekranından dönüldüğünde kullanıcının dikkatini buraya çeker */
@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 var(--acc-dim)}
  40%{box-shadow:0 0 0 8px var(--acc-dim)}
  100%{box-shadow:0 0 0 0 transparent}
}
.status.flash{animation:statusPulse 1.5s ease 2;border-color:var(--acc)}

/* ---------- Sonuç ekranı eylemleri ---------- */
.result-actions{gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
/* Asıl eylem geri dönmek; oradaki çalışma durumu asıl bilgiyi taşıyor. */
.btn-back{flex:1 1 260px;min-height:56px;font-size:16.5px;font-weight:700;
  box-shadow:0 4px 16px var(--acc-dim)}
.btn-back:hover{transform:translateY(-2px)}
.result-actions .ghost{flex:0 1 auto}
.result-hint{margin-top:10px;font-size:13px;line-height:1.5;color:var(--txt-3);
  text-align:center;max-width:44ch;margin-inline:auto}
@media (max-width:480px){
  .btn-back{flex:1 1 100%}
  .result-actions .ghost{flex:1 1 100%}
}

/* ---------- Sonuç ekranında sıralama kartı ---------- */
.rank-card{margin-top:22px;padding:18px 20px;border-radius:var(--r);text-align:center;
  background:color-mix(in srgb,var(--warn) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.rank-card[hidden],.rank-invite[hidden]{display:none}
.rank-main{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:8px 0 6px}
.rank-num{font-family:var(--ff-display);font-size:44px;font-weight:800;line-height:1;
  color:var(--warn);font-variant-numeric:tabular-nums}
.rank-of{font-size:15px;color:var(--txt-2);font-weight:600}
.rank-sub{font-size:13.5px;line-height:1.55;color:var(--txt-2);margin-bottom:14px}

.rank-invite{margin-top:22px;padding:18px 20px;border-radius:var(--r);text-align:center;
  background:var(--acc-dim);border:1px solid var(--acc)}
.ri-t{font-family:var(--ff-display);font-size:17.5px;font-weight:700;margin-bottom:7px}
.ri-s{font-size:13.5px;line-height:1.6;color:var(--txt-2);margin-bottom:14px;
  max-width:46ch;margin-inline:auto}

/* ---------- Sonuç ekranı geri bildirimi ---------- */
.fb{margin-top:22px;padding:20px 22px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-sm),var(--ring);text-align:center}
.fb[hidden]{display:none}
.fb-q{font-family:var(--ff-display);font-size:17.5px;font-weight:650;margin-bottom:14px}
.fb-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fb-actions .btn{flex:0 1 auto}
.fb-after[hidden],.fb-done[hidden]{display:none}
.fb-after{animation:slideUp .26s cubic-bezier(.4,0,.2,1)}
.fb-t{font-family:var(--ff-display);font-size:16.5px;font-weight:650;margin-bottom:6px}
.fb-s{font-size:13.5px;line-height:1.55;color:var(--txt-2);margin-bottom:14px;
  max-width:46ch;margin-inline:auto}
.fb-done{font-size:14.5px;font-weight:600;color:var(--ok)}

/* ---------- Sıralama (skorboard) ---------- */
.board{margin-top:20px;padding:clamp(18px,3vw,24px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm),var(--ring)}
.board-head{text-align:center;margin-bottom:16px}
.board-sub{font-size:13.5px;color:var(--txt-2);margin-top:6px;line-height:1.5}

/* Kategori sekmeleri — hepsi aynı anda görünür.
   Yatay kaydırma denenmişti; kullanıcı sağda başka sekme olduğunu fark
   edemiyordu. Bu yüzden satır kaydırma (wrap) kullanılıyor. */
.board-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:14px}
.btab{flex:0 0 auto;padding:8px 14px;border-radius:7px;font-size:13.5px;font-weight:620;
  color:var(--txt-2);white-space:nowrap;transition:var(--dur)}
/* Dar ekranda daha çok sekme sığsın diye ölçüler küçülür ama hepsi görünür. */
@media (max-width:560px){
  .board-tabs{gap:5px;padding:5px}
  .btab{padding:7px 11px;font-size:12.5px;flex:1 1 auto;text-align:center}
}
@media (max-width:380px){
  .btab{padding:7px 9px;font-size:12px}
}
.btab:hover{color:var(--txt);background:var(--surface)}
.btab.on{background:var(--acc);color:var(--on-fill)}

.board-state{text-align:center;color:var(--txt-3);font-size:14px;padding:22px 0}
.board-state[hidden]{display:none}
.board-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.brow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid transparent;transition:var(--dur)}
.brow .rank{width:34px;flex:none;text-align:center;font-size:14.5px;font-weight:780;
  color:var(--txt-3);font-variant-numeric:tabular-nums}
.brow .av{width:34px;height:34px;flex:none;display:grid;place-items:center;font-size:19px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.brow .who{flex:1;min-width:0;font-size:15px;font-weight:640;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .sc{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.brow .sc b{display:block;font-size:15px;font-weight:780;line-height:1.15}
.brow .sc small{display:block;font-size:11.5px;color:var(--txt-3)}
/* İlk üç sıra kupalı */
.brow.top1{background:color-mix(in srgb,var(--warn) 13%,var(--surface-2));
  border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.brow.top2{background:color-mix(in srgb,var(--txt-3) 10%,var(--surface-2));
  border-color:color-mix(in srgb,var(--txt-3) 32%,transparent)}
.brow.top3{background:color-mix(in srgb,var(--acc) 9%,var(--surface-2));
  border-color:color-mix(in srgb,var(--acc) 32%,transparent)}
.brow.top1 .rank,.brow.top2 .rank,.brow.top3 .rank{font-size:19px}
/* Kullanıcının kendi satırı her yerde vurgulu */
.brow.mine{border-color:var(--acc);background:var(--acc-dim)}
.brow.mine .who::after{content:' (siz)';color:var(--acc-2);font-weight:700;font-size:12.5px}

.board-me{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.board-me[hidden]{display:none}
.board-me .eyebrow{display:block;margin-bottom:7px;text-align:center}

#btnBoardMore{margin-top:12px}
#btnBoardMore[hidden]{display:none}

.board-join{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  text-align:center}
.board-join[hidden]{display:none}
.board-join-t{font-family:var(--ff-display);font-size:16.5px;font-weight:680;margin-bottom:5px}
.board-join-s{font-size:13.5px;color:var(--txt-2);line-height:1.55;margin-bottom:14px;
  max-width:46ch;margin-inline:auto}
.board-note{margin-top:14px;text-align:center;font-size:13px;color:var(--txt-3);
  line-height:1.6}
.board-note[hidden]{display:none}

/* ---------- Takma ad penceresi ---------- */
.nick-box{max-width:480px}
.nick-lead{font-size:14px;line-height:1.6}
.nick-lbl{display:block;font-size:12px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:7px}
.nick-help{font-size:12.5px;color:var(--txt-3);margin:7px 0 0;line-height:1.5}
.nick-help #nickCount{float:right;font-variant-numeric:tabular-nums}
.nick-err{font-size:13px;color:var(--err);margin:8px 0 0;font-weight:600}
.nick-err[hidden]{display:none}
.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
@media (max-width:420px){.avatars{grid-template-columns:repeat(4,1fr)}}
.av-opt{aspect-ratio:1;display:grid;place-items:center;font-size:22px;border-radius:12px;
  background:var(--surface-2);border:2px solid var(--line);transition:var(--dur)}
.av-opt:hover{border-color:var(--line-2);transform:translateY(-1px)}
.av-opt[aria-checked="true"]{border-color:var(--acc);background:var(--acc-dim);
  box-shadow:0 0 0 3px var(--acc-dim)}
.nick-kvkk{font-size:12px!important;color:var(--txt-3)!important;line-height:1.55;
  margin-bottom:16px!important}
/* Düğmeler yan yana ve normal boyutta; birincil eylem sağda.
   Tam genişlik yapılınca pencereye göre orantısız duruyordu. */
.nick-actions{flex-direction:row-reverse;justify-content:center;gap:10px;margin-top:6px}
.nick-actions .btn{flex:0 1 auto;min-width:130px}
.nick-lbl+.field{margin-bottom:0}
.nick-box{text-align:center}
.nick-box .nick-lbl,.nick-box .nick-help,.nick-box .nick-err{text-align:left}
.nick-cup{font-size:40px;line-height:1;margin-bottom:8px}
.nick-box h3{font-size:22px;margin-bottom:8px}
.nick-box .avatars{margin-top:8px}
@media (max-width:420px){
  .nick-actions .btn{flex:1 1 auto;min-width:0}
}

/* ---------- Quiz üst çubuğu ---------- */
.qtop{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
@media (max-width:480px){
  /* Dar ekranda ilerleme çubuğu tam satır alır, rozetler altına iner. */
  .qtop{gap:8px}
  .qbar{order:-1;flex:1 0 100%}
  .timer{font-size:12.5px;padding:4px 9px}
}
.qbar{flex:1;height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;
  border:1px solid var(--line)}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-3));
  border-radius:99px;width:0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.counter{font-size:13.5px;font-weight:680;color:var(--txt-3);font-variant-numeric:tabular-nums;flex:none}
.pill{font-size:12px;font-weight:750;padding:5px 10px;border-radius:99px;background:var(--ok-dim);
  color:var(--ok);font-variant-numeric:tabular-nums;flex:none}
.pill.zero{background:var(--surface-2);color:var(--txt-3)}
/* Oturum süresi — sayaçla aynı hizada, sabit genişlikli rakamlarla titremesin */
.timer{font-size:13px;font-weight:700;color:var(--txt-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 11px;flex:none;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.quit{font-size:13px;color:var(--txt-3);padding:6px 10px;border-radius:8px;flex:none}
.quit:hover{background:var(--surface-2);color:var(--txt-2)}
/* Kuyruk uzayınca soru sayısının neden arttığını açıklayan küçük not */
.qnote{font-size:12.5px;line-height:1.5;color:var(--txt-3);margin:-8px 0 14px;
  padding-left:2px}
.qnote[hidden]{display:none}

/* ---------- Soru kartı ---------- */
.qcard{background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(28px,6vw,46px) clamp(16px,4vw,30px);text-align:center;
  margin-bottom:18px;position:relative;overflow:hidden;
  box-shadow:var(--sh-sm),var(--ring)}
.qcard::before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,transparent,var(--acc) 30%,var(--acc-3) 70%,transparent);
  opacity:.75}
/* Arka planda çok soluk bir doku — kart düz kalmasın */
.qcard::after{content:'';position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(60% 100% at 50% 100%,var(--acc-dim),transparent 70%);
  pointer-events:none}
.qcard>*{position:relative;z-index:1}
.qmeta{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
/* Sorulan kelime — serif, sınav kâğıdı hissi veren oturaklı bir görünüm */
.qword{font-family:var(--ff-display);font-size:clamp(32px,8vw,52px);font-weight:640;
  letter-spacing:-.02em;line-height:1.14;word-break:break-word;hyphens:auto}
.qword.tr{font-size:clamp(24px,5.6vw,38px)}
.qhint{color:var(--txt-2);font-size:15px;margin-top:14px;font-weight:550}

/* ---------- İpucu ---------- */
.hintbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hintbar .btn{flex:0 1 auto}
.hintbar .btn[disabled]{opacity:.55}
.hintbox{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:15px 18px;margin-bottom:14px;
  animation:slideUp .26s cubic-bezier(.4,0,.2,1)}
.hintbox[hidden]{display:none}
.hintbox>.eyebrow{display:block;margin-bottom:8px;color:var(--warn)}
.hintbox .sent{font-size:clamp(15.5px,1vw + 14px,17px)}
.hint-note{color:var(--txt-3);font-size:13px;margin-top:10px;line-height:1.5}
.blank{display:inline-block;min-width:6.5ch;border-bottom:2px solid var(--warn);
  color:var(--warn);font-weight:700;text-align:center;letter-spacing:.06em}

/* ---------- Şıklar — sınav kâğıdı düzeni ---------- */
.answers{display:grid;gap:11px}
@media (min-width:760px){.answers{grid-template-columns:repeat(2,1fr)}}
.ans{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;text-align:left;
  transition:var(--dur);width:100%;font-size:17px;font-weight:580;min-height:68px;
  line-height:1.4;box-shadow:var(--sh-sm),var(--ring)}
.ans:not(.locked):hover{border-color:var(--acc);background:var(--acc-dim);
  transform:translateY(-1px);box-shadow:0 0 0 3px var(--acc-dim),var(--sh-sm)}
/* Şık harfi: A B C D — sınav kâğıdındaki gibi belirgin, ilk bakışta okunur.
   Kutu koyu zeminli ve dolu; harf uzaktan da seçilebilsin diye büyük ve kalın. */
.ans .k{width:42px;height:42px;border-radius:12px;background:var(--surface-3);
  border:2px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--ff-display);font-size:20px;font-weight:800;color:var(--txt);
  letter-spacing:.01em;flex:none;transition:var(--dur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ans:not(.locked):hover .k{background:var(--acc);border-color:var(--acc);color:var(--on-fill);
  box-shadow:0 2px 8px var(--acc-dim)}
.ans .lbl{flex:1;min-width:0}
.ans .mk{font-size:20px;font-weight:800;opacity:0;transition:.2s;flex:none}
.ans.correct{border-color:var(--ok);background:var(--ok-dim);
  box-shadow:0 0 0 3px var(--ok-dim),var(--sh-sm)}
.ans.correct .k{background:var(--ok);border-color:var(--ok);color:var(--on-fill)}
.ans.correct .mk{opacity:1;color:var(--ok)}
.ans.wrong{border-color:var(--err);background:var(--err-dim);
  box-shadow:0 0 0 3px var(--err-dim),var(--sh-sm)}
.ans.wrong .k{background:var(--err);border-color:var(--err);color:var(--on-fill)}
.ans.wrong .mk{opacity:1;color:var(--err)}
.ans.locked{cursor:default}
.ans.dim{opacity:.4}
@media (max-width:480px){
  .ans{font-size:16px;padding:14px 15px;min-height:62px;gap:12px}
  .ans .k{width:36px;height:36px;font-size:17px;border-radius:10px}
}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.ans.shake{animation:shake .38s}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.02)}100%{transform:scale(1)}}
.ans.pop{animation:pop .3s}

/* ---------- Cevap paneli ---------- */
.reveal{margin-top:16px;display:none}
.reveal.on{display:block;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rv-head{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.rv-head.ok{background:var(--ok-dim);border-bottom-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.rv-head.no{background:var(--err-dim);border-bottom-color:color-mix(in srgb,var(--err) 28%,transparent)}
.rv-head b{font-size:15px;font-weight:690;line-height:1.35}
.rv-head.ok b{color:var(--ok)} .rv-head.no b{color:var(--err)}
.rv-head .ic{font-size:16px;flex:none}
.rv-body{padding:clamp(15px,3vw,19px)}
.rv-body .eyebrow{display:block;margin-bottom:8px}
.sent{font-size:clamp(16px,1.2vw + 14.5px,18px);line-height:1.62;font-weight:500}
.sent-tr{color:var(--txt-2);font-size:14.5px;line-height:1.6;margin-top:10px;padding-top:12px;
  border-top:1px dashed var(--line)}
.meanings{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;
  color:var(--txt-2);line-height:1.6}
.meanings b{color:var(--txt);font-weight:660}
.nextbar{margin-top:14px;display:flex;gap:12px;align-items:center}
.kbd{font-size:12px;color:var(--txt-3);display:flex;align-items:center;gap:5px;flex:none}
.kbd i{font-style:normal;background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:2px 7px;font-weight:640;font-size:11.5px}
@media (max-width:620px){.kbd{display:none}}

/* ---------- Sonuç ---------- */
.result{text-align:center;padding-block:clamp(18px,4vw,30px)}
.ring{width:clamp(118px,26vw,142px);aspect-ratio:1;margin:0 auto 22px;position:relative}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;align-content:center}
.ring .val b{font-family:var(--ff-display);font-size:clamp(28px,6vw,34px);font-weight:700;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ring .val small{color:var(--txt-3);font-size:11px;font-weight:650;margin-top:4px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.mistakes{text-align:left;margin-top:24px}
.mi{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:7px;flex-wrap:wrap}
.mi b{font-weight:660;font-size:15px}
.mi span{color:var(--txt-2);font-size:14px;margin-left:auto;text-align:right}

/* ---------- İstatistik ---------- */
.lvbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--surface-2);
  margin:13px 0 12px;border:1px solid var(--line)}
.lvbar i{display:block;transition:width .45s cubic-bezier(.4,0,.2,1)}
.lvleg{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--txt-2)}
.lvleg span{display:flex;align-items:center;gap:7px}
.lvleg u{width:10px;height:10px;border-radius:3px;text-decoration:none;flex:none}
.lvleg b{color:var(--txt)}
.tbl{width:100%;font-size:14.5px;border-collapse:collapse}
.tbl td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--txt-2)}
.tbl td:last-child{text-align:right;color:var(--txt);font-weight:660;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}