/* Yerleşim: masaüstünde solda yüzen koyu menü + içerik sütunu; telefonda altta yüzen koyu hap menü.
   Kimlik: leylaktan kreme akan pastel zemin, yarı saydam beyaz cam kartlar, hardal sarısı / gül kurusu / leylak renk blokları,
   ince ve iri başlıklar, her yerde hap ve daire biçimleri. Karanlık mod: sıcak tonlu siyah zemin, sarı vurgu. */
:root {
  --bg-a: #e7dcf8;
  --bg-b: #f2ebf1;
  --bg-c: #f8eedb;
  --bg-d: #f6e2c8;
  --paper: #f2ebf1;
  --surface: rgba(255, 255, 255, .62);
  --surface-solid: #fbf8fb;
  --sunk: rgba(255, 255, 255, .55);
  --ink: #1f1d24;
  --ink-2: #6f6879;
  --line: rgba(31, 29, 36, .09);
  --pill: #232127;
  --pill-ink: #f6f2f8;
  --cobalt: #9b7fe6;          /* ana vurgu: leylak */
  --cobalt-ink: #ffffff;
  --cobalt-soft: rgba(155, 127, 230, .16);
  --mustard: #e8b54b;
  --rose: #d9b4c4;
  --lav: #c7b3f2;
  --mark: #f2cf5b;
  --mark-bg: rgba(242, 207, 91, .42);
  --ok: #3f9a6c;
  --ok-soft: rgba(63, 154, 108, .14);
  --bad: #c9564b;
  --bad-soft: rgba(201, 86, 75, .13);
  --grad-card: linear-gradient(160deg, #c8b2f4 0%, #e6c9e3 45%, #f6dc8a 100%);
  --grad-rose: linear-gradient(160deg, #e3c2cf 0%, #d6aebf 100%);
  --grad-mustard: linear-gradient(160deg, #f0c460 0%, #e3a93f 100%);
  --shadow: 0 2px 6px rgba(60, 40, 90, .05), 0 18px 40px rgba(60, 40, 90, .09);
  --f-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-read: "Literata", Georgia, "Times New Roman", serif;
  --r: 28px;
  --r-sm: 18px;
  --rail: 104px;
  --tabbar: 76px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-a: #2a2433; --bg-b: #1b1a1f; --bg-c: #19181c; --bg-d: #2b2520; --paper: #1b1a1f;
    --surface: rgba(255, 255, 255, .06); --surface-solid: #26242b; --sunk: rgba(255, 255, 255, .07);
    --ink: #f3f0f6; --ink-2: #a49dae; --line: rgba(255, 255, 255, .09); --pill: #f3f0f6; --pill-ink: #1b1a1f;
    --cobalt: #b9a3f7; --cobalt-ink: #1b1a1f; --cobalt-soft: rgba(185, 163, 247, .16);
    --mustard: #e9b949; --rose: #c79fb1; --lav: #9d86de; --mark: #e9b949; --mark-bg: rgba(233, 185, 73, .28);
    --ok: #63c993; --ok-soft: rgba(99, 201, 147, .15); --bad: #ff8a7d; --bad-soft: rgba(255, 138, 125, .14);
    --grad-card: linear-gradient(160deg, #8f78d6 0%, #b28aa8 50%, #d9b25a 100%);
    --grad-rose: linear-gradient(160deg, #a07f8e 0%, #8a6b79 100%);
    --grad-mustard: linear-gradient(160deg, #e2b24f 0%, #c48e2f 100%);
    --shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-a: #2a2433; --bg-b: #1b1a1f; --bg-c: #19181c; --bg-d: #2b2520; --paper: #1b1a1f;
  --surface: rgba(255, 255, 255, .06); --surface-solid: #26242b; --sunk: rgba(255, 255, 255, .07);
  --ink: #f3f0f6; --ink-2: #a49dae; --line: rgba(255, 255, 255, .09); --pill: #f3f0f6; --pill-ink: #1b1a1f;
  --cobalt: #b9a3f7; --cobalt-ink: #1b1a1f; --cobalt-soft: rgba(185, 163, 247, .16);
  --mustard: #e9b949; --rose: #c79fb1; --lav: #9d86de; --mark: #e9b949; --mark-bg: rgba(233, 185, 73, .28);
  --ok: #63c993; --ok-soft: rgba(99, 201, 147, .15); --bad: #ff8a7d; --bad-soft: rgba(255, 138, 125, .14);
  --grad-card: linear-gradient(160deg, #8f78d6 0%, #b28aa8 50%, #d9b25a 100%);
  --grad-rose: linear-gradient(160deg, #a07f8e 0%, #8a6b79 100%);
  --grad-mustard: linear-gradient(160deg, #e2b24f 0%, #c48e2f 100%);
  --shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--ink); font: 15.5px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: radial-gradient(120% 60% at 15% 0%, var(--bg-a) 0%, transparent 60%), linear-gradient(175deg, var(--bg-a) 0%, var(--bg-b) 35%, var(--bg-c) 75%, var(--bg-d) 100%);
  background-attachment: fixed;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--ink); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); font-weight: 400; }
h2 { font-size: 1.45rem; font-weight: 500; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0; }
mark, .hl { background: linear-gradient(transparent 40%, var(--mark-bg) 40%, var(--mark-bg) 92%, transparent 92%); color: inherit; padding: 0 .12em; border-radius: 3px; }
:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 2px; border-radius: 12px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- Kabuk ---------- */
.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.rail { position: sticky; top: 16px; margin: 16px 0 16px 16px; height: calc(100vh - 32px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 36px; background: #232127; color: #f6f2f8; box-shadow: var(--shadow); overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.brand { display: grid; place-items: center; text-decoration: none; margin-bottom: 8px; flex: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-card); color: #1f1d24; font: 600 1.2rem var(--f-display); }
.brand-name { display: none; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; width: 100%; text-decoration: none; color: rgba(246, 242, 248, .62); font-size: .68rem; font-weight: 600; border-radius: 18px; flex: none; }
.nav-item svg { width: 42px; height: 42px; padding: 11px; border-radius: 50%; transition: background .2s, color .2s; }
/* Kısa masaüstü ekranları: simgeler biraz daha küçülür ki tüm bölümler sığsın */
@media (min-width: 821px) and (max-height: 760px) {
  .rail { gap: 2px; padding-block: 10px; }
  .brand { margin-bottom: 4px; }
  .brand-mark { width: 36px; height: 36px; font-size: 1.05rem; }
  .nav-item { font-size: .64rem; padding: 2px 4px; }
  .nav-item svg { width: 36px; height: 36px; padding: 9px; }
}
.nav-item:hover { color: #fff; }
.nav-item:hover svg { background: rgba(255, 255, 255, .08); }
.nav-item.on { color: #fff; }
.nav-item.on svg { background: #b9a3f7; color: #1f1d24; }
button.nav-item { background: none; border: 0; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 600; }
.theme-btn { margin-top: auto; }
.theme-btn [data-theme-icon] { display: grid; }
.theme-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-solid); box-shadow: 0 1px 2px rgba(60, 40, 90, .06); }
.theme-switch button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.theme-switch button svg { width: 18px; height: 18px; }
.theme-switch button.on { background: var(--pill); color: var(--pill-ink); }
.view { min-width: 0; padding-block: 36px 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); outline: none; }
.wrap { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.wrap.narrow { max-width: 760px; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 20; top: auto; height: auto; margin: 0; overflow: visible; flex-direction: row; justify-content: space-between; gap: 0; padding: 8px; border-radius: 999px;
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .brand, .theme-btn { display: none; }
  .nav-item { font-size: 0; gap: 0; padding: 0; flex: 1; min-width: 0; }
  .nav-item svg { width: 48px; height: 48px; padding: 13px; }
  .view { padding-block: 22px calc(var(--tabbar) + 48px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ortak parçalar ---------- */
.eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.card { background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r); padding: 22px; min-width: 0; box-shadow: var(--shadow); }
:root[data-theme="dark"] .card { border-color: var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { border-color: var(--line); } }
.section { display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; background: var(--surface-solid); padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--ink); min-height: 44px; box-shadow: 0 1px 2px rgba(60, 40, 90, .06); transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--pill); color: var(--pill-ink); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.sm { padding: 6px 14px; min-height: 36px; font-size: .86rem; }
.btn.on { background: var(--pill); color: var(--pill-ink); }
.btn.ok-on { background: var(--ok); color: #fff; }
.btn svg { width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; background: var(--surface-solid); border: 1px solid transparent; font-size: .88rem; color: var(--ink); cursor: pointer; text-decoration: none; }
button.chip:hover, a.chip:hover { background: var(--pill); color: var(--pill-ink); }
.chip.static { cursor: default; }
.chip.static:hover { background: var(--surface-solid); color: var(--ink); }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; background: var(--surface-solid); color: var(--ink-2); white-space: nowrap; }
.badge.lvl { background: var(--pill); color: var(--pill-ink); }
.badge.yds { background: var(--mustard); color: #2a1f05; }
.empty { padding: 30px; text-align: center; color: var(--ink-2); border: 1.5px dashed var(--line); border-radius: var(--r); }
.back { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.back svg { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 1px 2px rgba(60, 40, 90, .08); }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.tabs button { flex: none; border: 0; background: var(--surface-solid); padding: 11px 20px; border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 40, 90, .06); }
.tabs button.on { background: var(--pill); color: var(--pill-ink); }
.list { display: flex; flex-direction: column; }
.list > * + * { border-top: 1px solid var(--line); }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--cobalt); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; gap: 10px; align-items: center; color: var(--ink-2); padding: 20px 0; }
.arrow-dot { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(31, 29, 36, .18); display: grid; place-items: center; flex: none; }
.arrow-dot svg { width: 18px; height: 18px; transform: rotate(-45deg); }

/* ---------- Ana sayfa ---------- */
.hello { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.hello h1 { font-weight: 300; }
.streak { display: flex; align-items: center; gap: 10px; background: var(--surface-solid); border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 500; box-shadow: var(--shadow); }
.streak b { font: 600 1.15rem var(--f-display); background: var(--pill); color: var(--pill-ink); border-radius: 999px; min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 10px; }
.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.goal { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 160px; padding: 20px; border-radius: var(--r); text-decoration: none; color: #1f1d24; box-shadow: var(--shadow); transition: transform .2s; }
.goal:hover { transform: translateY(-3px) rotate(-.4deg); }
.goal .arrow-dot { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; }
.goal-label { font-size: .95rem; font-weight: 500; max-width: 70%; line-height: 1.3; opacity: .8; }
.goal-num { font: 400 2.2rem/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.goal-num small { font-size: 1rem; opacity: .6; }
.goal .meter { height: 6px; border-radius: 999px; background: rgba(31, 29, 36, .12); overflow: hidden; }
.goal .meter i { display: block; height: 100%; background: #1f1d24; border-radius: inherit; }
.goal.t1 { background: var(--grad-mustard); }
.goal.t2 { background: var(--grad-rose); }
.goal.t3 { background: linear-gradient(160deg, #c9b6f5, #b39ee9); }
.goal.t4 { background: linear-gradient(160deg, #f5e7c6, #ecd2a8); }
.goal.done::after { content: "✓"; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #1f1d24; color: #fff; display: grid; place-items: center; font-weight: 700; }
.goal.done .arrow-dot { display: none; }
/* Günün kelimesi: sade kart, ince renkli çerçeve; içerik kompakt */
.wotd { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1.5px solid transparent; border-radius: 26px;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, var(--grad-card) border-box; }
.wotd-top { display: flex; align-items: center; gap: 6px; }
.wotd-top .eyebrow { flex: 1; }
.wotd-main { display: flex; align-items: center; gap: 10px; }
.wotd-word { font: 500 2rem/1.1 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.wotd-mean { font-size: 1.02rem; color: var(--ink); }
.wotd-ex { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; padding-left: 12px; border-left: 3px solid var(--lav); }
.wotd-ex [lang="en"] { font-family: var(--f-read); font-style: italic; }
.wotd-ex b { font-weight: 600; }
.wotd-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 2px; }
/* Günlük test sonuç kartı aynı sınıfı kullanır: büyük puan görünümü */
.test-score { background: var(--grad-card); color: #1f1d24; border: 0; padding: 24px; }
.test-score .muted { color: rgba(31, 29, 36, .65); }
.test-score .wotd-word { font-size: clamp(2.4rem, 7vw, 3.4rem); }.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; }
.shortcut { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: transform .2s; padding-top: 84px; }
.shortcut:hover { transform: translateY(-3px); }
.shortcut .ico { position: absolute; top: 18px; left: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); color: var(--ink); }
.shortcut .arrow-dot { position: absolute; top: 18px; right: 18px; border-color: var(--line); }
.continue { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.continue-cover { width: 72px; flex: none; border-radius: 14px; overflow: hidden; }
.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.continue .cover { aspect-ratio: 3 / 4; padding: 10px; border-radius: 16px; }
.continue .cover h3 { font-size: .8rem; }
.continue .cover .badge, .continue .cover .by { font-size: .6rem; padding: 2px 6px; }
.continue .cover .by { padding: 0; }
.bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--cobalt); border-radius: inherit; }

/* ---------- Çeviri ---------- */
.search { position: relative; }
.search input { width: 100%; font-size: 1.15rem; padding: 18px 64px 18px 24px; border-radius: 999px; border: 1.5px solid transparent; background: var(--surface-solid); outline: none; box-shadow: var(--shadow); }
.search input:focus { border-color: var(--cobalt); }
.search .go { position: absolute; right: 7px; top: 7px; bottom: 7px; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--pill); color: var(--pill-ink); cursor: pointer; display: grid; place-items: center; }
.suggest { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface-solid); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; padding: 6px; }
.suggest button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 10px 14px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 14px; }
.suggest button:hover, .suggest button.act { background: var(--cobalt-soft); }
.suggest b { font-weight: 600; }
.suggest span { color: var(--ink-2); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.word-head { display: flex; flex-direction: column; gap: 12px; }
.word-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.word-title h1 { font-size: clamp(2.6rem, 8vw, 4rem); font-weight: 400; overflow-wrap: anywhere; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--surface-solid); display: grid; place-items: center; cursor: pointer; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 40, 90, .08); }
.icon-btn:hover { background: var(--pill); color: var(--pill-ink); }
.meanings { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 8px; font-size: 1.06rem; }
.meanings li::marker { color: var(--ink-2); font-weight: 600; }
.defs { display: flex; flex-direction: column; gap: 12px; }
.def { display: grid; grid-template-columns: 62px 1fr; gap: 10px; }
.def .badge { justify-self: start; }
.def em { color: var(--ink-2); display: block; font-family: var(--f-read); }
.ex-list { display: flex; flex-direction: column; }
.ex { padding: 12px 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.ex + .ex { border-top: 1px solid var(--line); }
.ex-en { font-family: var(--f-read); font-size: 1.05rem; }
.ex-tr { color: var(--ink-2); grid-column: 1; }
.ex .icon-btn { grid-row: 1 / span 2; grid-column: 2; width: 38px; height: 38px; }
.ex .icon-btn svg { width: 18px; height: 18px; }
.pattern { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; flex-wrap: wrap; }
.pattern code { font: 600 .98rem var(--f-read); }
.pattern.idiom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; justify-content: start; }
.idiom-sep { color: var(--cobalt); font-weight: 700; }
@media (max-width: 560px) {
  .pattern.idiom { grid-template-columns: 1fr; gap: 2px; }
  .idiom-sep { display: none; }
  .pattern.idiom code::after { content: " :"; color: var(--cobalt); }
}
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.word-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Soru ---------- */
.q { display: flex; flex-direction: column; gap: 12px; }
.q-stem { font-family: var(--f-read); font-size: 1.05rem; }
.q-stem .blank { white-space: nowrap; letter-spacing: .05em; }
.q-kind { align-self: flex-start; background: var(--grad-card); color: #1f1d24; }
.q-opts { display: grid; gap: 8px; }
.q-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 12px 16px; border-radius: 18px; border: 1.5px solid transparent; background: var(--surface-solid); cursor: pointer; }
.q-opt b { font-family: var(--f-display); color: var(--ink-2); font-weight: 600; }
.q-opt:hover:not(:disabled) { border-color: var(--cobalt); }
.q-opt:disabled { cursor: default; }
.q-opt.right { background: var(--ok-soft); border-color: var(--ok); }
.q-opt.wrong { background: var(--bad-soft); border-color: var(--bad); }
.q-exp { padding: 12px 16px; border-radius: 18px; background: var(--sunk); font-size: .95rem; }
.q-exp.right-txt { box-shadow: inset 4px 0 0 var(--ok); }
.q-exp.wrong-txt { box-shadow: inset 4px 0 0 var(--bad); }
.q + .q { border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- Konular ---------- */
.cat { display: flex; flex-direction: column; gap: 12px; }
.topic-link { display: flex; gap: 12px; align-items: center; padding: 14px 18px; text-decoration: none; color: inherit; }
.topic-link:hover { background: var(--cobalt-soft); }
.topic-link .t { flex: 1; min-width: 0; }
.topic-link .t b { display: block; font-weight: 600; }
.topic-state { display: flex; gap: 4px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dot.ok { background: var(--ok); }
.dot.fav { background: var(--mustard); }
.dot.later { background: var(--cobalt); }
.formula { overflow-x: auto; }
.formula table { border-collapse: collapse; width: 100%; min-width: 420px; }
.formula td, .formula th { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.formula th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; }
.formula td:first-child { font-weight: 600; white-space: nowrap; }
.formula td:last-child { font-family: var(--f-read); }
.use { display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; padding: 14px 0; }
.use + .use { border-top: 1px solid var(--line); }
.use-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pill); color: var(--pill-ink); font: 600 .9rem var(--f-display); font-variant-numeric: tabular-nums; }
.use .ex-en, .use .ex-tr { grid-column: 2; }
.note { padding: 16px 20px; border-radius: var(--r-sm); background: var(--grad-card); color: #1f1d24; }
.note .muted { color: rgba(31, 29, 36, .65); }
.note-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.note mark { background: rgba(255, 255, 255, .55); }

/* ---------- Kütüphane ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.book { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; padding: 8px; overflow: hidden; transition: transform .2s; }
.book:hover { transform: translateY(-3px); }
.cover { aspect-ratio: 4 / 3; max-width: 100%; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #1f1d24; position: relative; border-radius: 22px; }
.cover h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.cover .by { font-size: .8rem; opacity: .7; }
.cover .badge { background: rgba(255, 255, 255, .6); color: #1f1d24; align-self: flex-start; }
.cover.c-masal { background: linear-gradient(160deg, #c8b2f4, #e8c6df 60%, #f3d6a0); }
.cover.c-hikaye { background: linear-gradient(160deg, #f0c460, #e0a95c 55%, #d6a6b6); }
.cover.c-roman { background: linear-gradient(160deg, #3a3342, #6b5a86 60%, #b9a3f7); color: #fff; }
.cover.c-roman .badge { background: rgba(255, 255, 255, .18); color: #fff; }
.cover.c-fabl { background: linear-gradient(160deg, #e3c2cf, #f3e3c6 70%, #f6dc8a); }
.book-meta { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.reader { max-width: 720px; }
.reader-top { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 5; padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-radius: 26px; background: var(--surface-solid); box-shadow: var(--shadow); }
.reader-top .bar { flex: 1; min-width: 80px; }
.reader-top select { max-width: 100%; }
@media (max-width: 620px) {
  .reader-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; padding: 10px; }
  .reader-top #chs { grid-column: 1 / -1; width: 100%; }
  .reader-top .bar { grid-column: 1 / -1; order: 3; min-width: 0; }
  .reader-top .row { display: contents; }
  .reader-top #trm { min-width: 0; width: 100%; padding-inline: 12px; }
  .reader-top #fs-dec, .reader-top #fs-inc { padding-inline: 12px; }
}
.sent { padding: 12px 0 14px; display: flex; flex-direction: column; gap: 4px; }
.sent + .sent { border-top: 1px solid var(--line); }
.sent { transition: background .25s; }
.sent.reading { background: var(--grad-card); color: #1f1d24; padding-inline: 16px; border-top-color: transparent; border-radius: 18px; }
.sent.reading + .sent { border-top-color: transparent; }
.sent.reading .sent-tr { color: rgba(31, 29, 36, .7); }
.sent-row { display: flex; gap: 8px; align-items: flex-start; }
.sent-row .sent-en { flex: 1; min-width: 0; }
.sent-en { font-family: var(--f-read); font-size: var(--read-size, 1.15rem); line-height: 1.65; }
.sent-en .w { cursor: pointer; border-radius: 5px; text-decoration: underline dotted transparent; text-underline-offset: 4px; }
.sent-en .w:hover { background: var(--mark-bg); }
.sent-en .w.w-on { background: var(--mark); color: #1f1d24; }
.sent-tr { color: var(--ink-2); font-size: calc(var(--read-size, 1.15rem) * .86); }
.sent-tr.hidden-tr { filter: blur(5px); cursor: pointer; user-select: none; }
.reader.tr-off .sent-tr { display: none; }
.say { flex: none; border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 7px; border-radius: 50%; opacity: .55; }
.say:hover { opacity: 1; color: var(--pill-ink); background: var(--pill); }
.say svg { width: 18px; height: 18px; }
.chapter-title { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; padding-top: 18px; }
.chapter-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 22px; flex-wrap: wrap; }

/* ---------- Kelime kartı ---------- */
.wcard { position: fixed; z-index: 45; width: min(350px, calc(100vw - 24px)); background: var(--surface-solid); color: var(--ink); border-radius: 26px; box-shadow: 0 20px 60px rgba(40, 25, 70, .22); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; animation: pop .16s ease-out; }
.wcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grad-card); opacity: .38; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.wcard > * { position: relative; }
.wcard.docked { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom, 0px)); top: auto; max-height: 55vh; overflow: auto; }
@keyframes pop { from { transform: translateY(6px) scale(.98); opacity: 0; } }
.wcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wcard-word { font: 500 1.7rem var(--f-display); letter-spacing: -.02em; }
.wcard-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .6); font-size: 1.3rem; line-height: 1; color: var(--ink); cursor: pointer; }
.wcard-means { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 3px; }
.wcard-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm svg { width: 16px; height: 16px; }

/* ---------- Profil ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.stat { border: 0; color: #1f1d24; }
.stat:nth-child(1) { background: var(--grad-mustard); }
.stat:nth-child(2) { background: var(--grad-rose); }
.stat:nth-child(3) { background: linear-gradient(160deg, #c9b6f5, #b39ee9); }
.stat:nth-child(4) { background: linear-gradient(160deg, #f5e7c6, #ecd2a8); }
.stat .muted { color: rgba(31, 29, 36, .65); }
.stat b { display: block; font: 400 2.6rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px 4px; }
.item .t { flex: 1; min-width: 0; }
.item .t a { font-weight: 600; text-decoration: none; color: var(--ink); }
.item .t a:hover { color: var(--cobalt); }
.item .t span { display: block; color: var(--ink-2); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; }
.week .col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; font-size: .75rem; color: var(--ink-2); }
.week .col i { width: 100%; max-width: 44px; border-radius: 999px; background: var(--surface-solid); min-height: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.week .col.today i { background: linear-gradient(180deg, #c8b2f4, #f2cf5b); box-shadow: none; }
.flash { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 26px 18px; }
.flash .big { font: 400 2.8rem var(--f-display); overflow-wrap: anywhere; letter-spacing: -.02em; }
.goal-edit { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; }
.goal-edit input { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-solid); width: 100%; }

/* ---------- Cümle çevirisi ---------- */
.mt-src { display: flex; gap: 10px; align-items: flex-start; }
.mt-src p { flex: 1; min-width: 0; font: 400 1.15rem/1.55 var(--f-read); }
.mt-out { min-height: 56px; }
.mt-tr { font: 400 1.5rem/1.4 var(--f-display); letter-spacing: -.01em; padding: 14px 18px; border-radius: 20px; background: var(--grad-card); color: #1f1d24; }
.mt-loading { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.mt-words .chip { gap: 8px; }
.mt-meta { justify-content: space-between; }

/* ---------- Günlük test ---------- */
.test-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 16px 18px; }
.test-card .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-card); color: #1f1d24; flex: none; }
.test-card .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.test-card .t b { font: 500 1.2rem var(--f-display); }
.test-progress { display: flex; align-items: center; gap: 14px; }
.test-progress .bar { flex: 1; }
.test .q-opt { padding: 14px 16px; }
.test-score .wotd-word { text-transform: none; }

/* ---------- Sözlük ---------- */
.dict-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dict-bar #dict-count { flex: 1; min-width: 0; text-align: center; }
#d-ftoggle .badge { padding: 1px 7px; margin-left: 2px; background: var(--mustard); color: #2a1f05; }
#d-ftoggle.on .badge { background: var(--pill-ink); color: var(--pill); }
.dict-filters { display: flex; flex-direction: column; gap: 8px; min-width: 0; animation: pop .16s ease-out; }
.dict-filters[hidden] { display: none; }
.dict-filters .eyebrow { margin-top: 4px; }
.dict-filters .eyebrow:first-child { margin-top: 0; }
.tr-home { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tr-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr-row > .muted { flex: none; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; white-space: nowrap; }
.chip.sm { padding: 5px 12px; font-size: .82rem; }
.tr-meta { margin: 0; }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.letters button { border: 0; background: var(--surface-solid); border-radius: 12px; padding: 8px 0; font: 600 .95rem var(--f-display); cursor: pointer; color: var(--ink); }
.letters button:first-child { grid-column: span 2; }
.letters button.on { background: var(--pill); color: var(--pill-ink); }
.dict-list { padding: 4px 8px; }
.dict-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px; cursor: pointer; border-radius: 14px; }
.dict-row:hover, .dict-row:focus-visible { background: var(--cobalt-soft); }
.dict-row + .dict-row { border-top: 1px solid var(--line); }
.dw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dw b { font: 500 1.12rem var(--f-display); }
.dw .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dflags { display: flex; gap: 3px; }
@media (max-width: 480px) { .dict-row .badge:not(.lvl) { display: none; } }

/* ---------- Açılır-kapanır parçalar (hedefler, konu kategorileri, bölümler menüsü) ---------- */
.goals-toggle, .cat-toggle { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; cursor: pointer; }
.goals-toggle:focus-visible, .cat-toggle:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 4px; border-radius: 22px; }
.gt-head { display: flex; align-items: center; gap: 10px; }
.gt-head h2 { flex: 1; }
.chev { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); color: var(--ink); flex: none; transition: transform .25s; }
.chev svg { width: 18px; height: 18px; }
[aria-expanded="true"] .chev { transform: rotate(180deg); }
.gt-bars { display: none; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gt-bars i { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gt-bars b { display: block; height: 100%; border-radius: inherit; }
.gt-bars .t1 b { background: var(--mustard); }
.gt-bars .t2 b { background: var(--rose); }
.gt-bars .t3 b { background: var(--lav); }
.gt-bars .t4 b { background: #e2c58f; }
.goals-toggle[aria-expanded="false"] .gt-bars { display: grid; }
.cat { display: flex; flex-direction: column; gap: 12px; }
.cat-toggle { flex-direction: row; align-items: center; gap: 12px; }
.cat-toggle .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-toggle .t b { font: 500 1.45rem/1.15 var(--f-display); letter-spacing: -.02em; }
.cat-body { display: flex; flex-direction: column; gap: 12px; }
.hello-menu { display: none; position: relative; }
.sec-menu { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; width: min(330px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 26px; background: var(--surface-solid); box-shadow: 0 20px 60px rgba(40, 25, 70, .22); animation: pop .16s ease-out; }
.sec-menu .eyebrow { padding: 2px 8px 6px; }
.sec-item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; text-decoration: none; color: var(--ink); }
.sec-item:hover, .sec-item:focus-visible { background: var(--cobalt-soft); }
.sec-item .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-card); color: #1f1d24; flex: none; }
.sec-item b { display: block; font-weight: 600; }
.sec-item .small { display: block; line-height: 1.35; }
#sec-menu-btn.on { background: var(--pill); color: var(--pill-ink); }

@media (max-width: 820px) {
  /* Telefon düzeni: üstte menü, kapalı başlayan hedefler, iki sütunlu hedef kartları, küçük kitap kartları */
  .wrap { gap: 16px; }
  .card { padding: 16px 18px; border-radius: 22px; }
  h1 { font-size: 2.1rem; }
  .hello { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "menu tools" "title title"; align-items: center; gap: 10px; }
  .hello-menu { grid-area: menu; }
  .hello > .row { grid-area: tools; gap: 8px; flex-wrap: nowrap; }
  .hello > .section { grid-area: title; }
  .hello h1 { font-size: 2.2rem; }
  .streak { padding: 4px 12px 4px 4px; font-size: .88rem; box-shadow: none; }
  .streak b { min-width: 30px; height: 30px; font-size: 1rem; }
  .hello .icon-btn { width: 40px; height: 40px; }
  .wotd { padding: 16px 18px; }
  .wotd-word { font-size: 1.75rem; }
  .test-card { padding: 12px 14px; gap: 12px; }
  .test-card .ico { width: 38px; height: 38px; }
  .test-card .t b { font-size: 1.05rem; }
  .continue { gap: 12px; }
  .continue-cover { width: 54px; border-radius: 10px; }
  .continue-cover .badge, .continue-cover .by { display: none; }
  .continue-cover .cover { padding: 6px; }
  .continue-cover .cover h3 { font-size: .58rem; }
  .continue h3 { font-size: 1rem; }
  .two { gap: 10px; }
  .hello { flex-direction: column; align-items: stretch; gap: 14px; }
  .hello-menu { display: block; align-self: flex-start; }
  .sections-bottom { display: none; }
  .goals-toggle { padding: 16px 18px; border-radius: 26px; background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
  .goals-toggle h2 { font-size: 1.2rem; }
  .goals-toggle .chip { padding: 5px 11px; font-size: .8rem; }
  .goals { grid-template-columns: 1fr 1fr; gap: 10px; }
  .goal { min-height: 128px; padding: 16px; gap: 10px; border-radius: 24px; }
  .goal .arrow-dot, .goal.done::after { width: 34px; height: 34px; top: 12px; right: 12px; }
  .goal-label { font-size: .88rem; }
  .goal-num { font-size: 1.8rem; }
  .cat-toggle { padding: 16px 18px; border-radius: 26px; background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
  .cat-toggle .t b { font-size: 1.2rem; }
  .cat { gap: 10px; }
  #cats { display: flex; flex-direction: column; gap: 12px; }
  .shelf { gap: 10px; }
  .book { padding: 5px; gap: 6px; border-radius: 20px; }
  .book .cover { aspect-ratio: 3 / 1; padding: 9px 12px; border-radius: 15px; }
  .book .cover h3 { font-size: .92rem; }
  .book .cover .by { font-size: .72rem; }
  .book .cover .badge { font-size: .64rem; padding: 2px 8px; }
  .book-meta { padding: 0 6px 5px; gap: 4px; font-size: .86em; }
  .book-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .stats { gap: 10px; grid-template-columns: 1fr 1fr; }
  .stat { padding: 10px 14px; border-radius: 18px; gap: 0; }
  .stat b { font-size: 1.75rem; }
  .stat .small { font-size: .78rem; }
}

/* ---------- Alt sayfa ve bildirim ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(30, 20, 45, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-panel { position: relative; width: min(560px, 100%); max-height: 82vh; overflow: auto; background: var(--surface-solid); border-radius: 32px 32px 0 0; padding: 26px max(20px, env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow); }
@media (min-width: 821px) { .sheet { align-items: center; } .sheet-panel { border-radius: 32px; } }
.sheet-x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--sunk); font-size: 1.4rem; cursor: pointer; color: var(--ink); line-height: 1; }
.toast { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + 30px + env(safe-area-inset-bottom, 0px)); background: var(--pill); color: var(--pill-ink); padding: 12px 22px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
@media (min-width: 821px) { .toast { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }