/* Yazı tipleri kendi sunucumuzdan (v57): Google Fonts'a istek yok, zincirleme yükleme yok. SIL OFL 1.1, bkz. fonts/LICENSE.txt */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/static/fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/static/fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --paper: #fbfaf6;
  --card: #ffffff;
  --ink: #1d1b26;
  --muted: #6b6879;
  --line: #ebe7dd;
  --primary: #0f5e9c;
  --primary-ink: #ffffff;
  --brand-ink: #3d4148;
  --primary-soft: #e8f1f9;
  --hl: #ffe45c;
  --hl-soft: #fff6c2;
  --ok: #1f9d6b;
  --ok-soft: #e3f6ec;
  --bad: #e0533d;
  --bad-soft: #fdeceb;
  --st-new: #cdc9d6;
  --st-learning: #4f8df7;
  --st-review: #f39c38;
  --st-learned: #2fb27a;
  --st-mock_pass: #0e9f9a;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(29, 27, 38, .05), 0 8px 24px rgba(29, 27, 38, .06);
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --surface-2: #f6f4ee;
  --hover: #f5f3ee;
  --field: #ffffff;
  --term-bg: #fffef9;
  --example-bg: #fffdf3;
  --drop-bg: #fffdf7;
  --drop-line: #d6d1c4;
  --topbar-bg: rgba(251, 250, 246, .92);
  --nav-bg: rgba(255, 255, 255, .97);
  --notice-line: #f3e08c;
  --info-line: #ffd3b8;
  --bad-line: #f6c9c2;
  --primary-hover: #0c4f84;
  --primary-glow: rgba(15, 94, 156, .25);
  --study-bg: #1d1b26;
  --study-ink: #ffffff;
  --study-hover: #33303f;
  --edge: #e3a27f;
  --dot-done: #f5b48c;
  --opt-hover: #f8c9aa;
  --code-bg: #fff1e8;
  --code-ink: #9a3606;
  --warn-ink: #7a5b00;
  --pill-bad: #fff1dc;
  --skel-1: #f1eee6;
  --skel-2: #f8f6f0;
  --backdrop: rgba(29, 27, 38, .45);
  --toast-bg: #1d1b26;
  --toast-ink: #ffffff;
  color-scheme: light;
}

/* karanlık mod: sistem ayarına uyar (Otomatik) ya da Hesap menüsünden seçilir; yazdırırken hep açık tema */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #15141b;
    --card: #1e1c26;
    --ink: #ece9f5;
    --muted: #a39fb4;
    --line: #34313f;
    --primary: #5aa9e6;
    --primary-ink: #15141b;
    --brand-ink: #e4e6ea;
    --primary-soft: #11283b;
    --hl: #ffd84a;
    --hl-soft: #3a3214;
    --ok: #3ccf8e;
    --ok-soft: #173326;
    --bad: #ff7a66;
    --bad-soft: #3d1f1c;
    --st-new: #55515f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --surface-2: #262331;
    --hover: #2b2836;
    --field: #24212e;
    --term-bg: #221f2b;
    --example-bg: #26221a;
    --drop-bg: #1c1a23;
    --drop-line: #4a4656;
    --topbar-bg: rgba(21, 20, 27, .9);
    --nav-bg: rgba(30, 28, 38, .96);
    --notice-line: #5c4e1a;
    --info-line: #6b3a1c;
    --bad-line: #6a332c;
    --primary-hover: #7cbcec;
    --primary-glow: rgba(90, 169, 230, .25);
    --study-bg: #ece9f5;
    --study-ink: #15141b;
    --study-hover: #d8d4e6;
    --edge: #b86b3c;
    --dot-done: #8a4a22;
    --opt-hover: #8a4a22;
    --code-bg: #33231a;
    --code-ink: #93c5ef;
    --warn-ink: #f0cf6a;
    --pill-bad: #3d2e17;
    --skel-1: #1e1c26;
    --skel-2: #2a2733;
    --backdrop: rgba(0, 0, 0, .6);
    --toast-bg: #ece9f5;
    --toast-ink: #15141b;
    color-scheme: dark;
  }
}
@media screen {
  :root[data-theme="dark"] {
  --paper: #15141b;
    --card: #1e1c26;
    --ink: #ece9f5;
    --muted: #a39fb4;
    --line: #34313f;
    --primary: #5aa9e6;
    --primary-ink: #15141b;
    --brand-ink: #e4e6ea;
    --primary-soft: #11283b;
    --hl: #ffd84a;
    --hl-soft: #3a3214;
    --ok: #3ccf8e;
    --ok-soft: #173326;
    --bad: #ff7a66;
    --bad-soft: #3d1f1c;
    --st-new: #55515f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --surface-2: #262331;
    --hover: #2b2836;
    --field: #24212e;
    --term-bg: #221f2b;
    --example-bg: #26221a;
    --drop-bg: #1c1a23;
    --drop-line: #4a4656;
    --topbar-bg: rgba(21, 20, 27, .9);
    --nav-bg: rgba(30, 28, 38, .96);
    --notice-line: #5c4e1a;
    --info-line: #6b3a1c;
    --bad-line: #6a332c;
    --primary-hover: #7cbcec;
    --primary-glow: rgba(90, 169, 230, .25);
    --study-bg: #ece9f5;
    --study-ink: #15141b;
    --study-hover: #d8d4e6;
    --edge: #b86b3c;
    --dot-done: #8a4a22;
    --opt-hover: #8a4a22;
    --code-bg: #33231a;
    --code-ink: #93c5ef;
    --warn-ink: #f0cf6a;
    --pill-bad: #3d2e17;
    --skel-1: #1e1c26;
    --skel-2: #2a2733;
    --backdrop: rgba(0, 0, 0, .6);
    --toast-bg: #ece9f5;
    --toast-ink: #15141b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.08rem; font-weight: 600; }
p { margin: 0 0 .8em; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .in { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--hl); display: grid; place-items: center; font-size: 15px; transform: rotate(-6deg); }
.topbar .sp { flex: 1; }
.iconbtn { border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--muted); }
.iconbtn:hover { background: var(--line); color: var(--ink); }

.muted { color: var(--muted); }
.small { font-size: .88rem; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 12px; }
.center { text-align: center; }
.hidden { display: none !important; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.section { margin-top: 26px; }
.section > h2 { display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 11px 16px; border-radius: 14px; cursor: pointer; font-weight: 700; text-decoration: none;
  min-height: 46px; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px var(--primary-glow); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.big { font-size: 1.05rem; padding: 14px 20px; min-height: 54px; width: 100%; letter-spacing: .02em; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.study { background: var(--study-bg); color: var(--study-ink); border-color: var(--study-bg); font-family: var(--display); letter-spacing: .04em; }
.btn.study:hover { background: var(--study-hover); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--line); color: var(--ink); white-space: nowrap; }
.chip.days { background: var(--hl); }
.chip.days.urgent { background: var(--bad); color: #fff; }
.chip.demo { background: var(--primary-soft); color: var(--primary); }
.st { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.st-new { background: var(--st-new); } .st-learning { background: var(--st-learning); } .st-review { background: var(--st-review); }
.st-learned { background: var(--st-learned); } .st-mock_pass { background: var(--st-mock_pass); }

/* highlighter */
.hl, mark {
  background: linear-gradient(104deg, rgba(255, 228, 92, 0) .9%, var(--hl) 2.4%, rgba(255, 228, 92, .75) 5.8%, rgba(255, 228, 92, .3) 93%, rgba(255, 228, 92, .85) 96%, rgba(255, 228, 92, 0) 98%), linear-gradient(183deg, rgba(255, 228, 92, 0) 0%, rgba(255, 228, 92, .3) 7.9%, rgba(255, 228, 92, 0) 15%);
  padding: .1em .35em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: inherit;
}
.hl-anim { background-size: 0% 100%; background-repeat: no-repeat; animation: hl .9s .2s ease forwards; }
@keyframes hl { to { background-size: 100% 100%; } }

/* dashboard */
.hello { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.ring { width: 64px; height: 64px; flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .8s ease; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring text { font-family: var(--display); font-weight: 800; font-size: 15px; fill: var(--ink); }

.task { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.task .tick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: #fff; }
.task.done .tick { background: var(--ok); border-color: var(--ok); }
.task.done .ttl { text-decoration: line-through; color: var(--muted); }
.task .ttl { font-weight: 700; }

.course { position: relative; overflow: hidden; }
.course::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c, var(--primary)); }
.course h3 { font-size: 1.15rem; margin: 0; }
.bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line); margin: 12px 0 6px; }
.bar span { height: 100%; transition: width .6s ease; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

.grid2 { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* topic list */
.tlist { list-style: none; padding: 0; margin: 0; }
.tlist li { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.tlist li:last-child { border-bottom: 0; }
.tlist a { color: var(--ink); text-decoration: none; font-weight: 700; flex: 1; }

/* upload */
.drop { border: 2px dashed var(--drop-line); border-radius: var(--radius); padding: 22px; text-align: center; background: var(--drop-bg); cursor: pointer; transition: border-color .2s, background .2s; }
.drop.over { border-color: var(--primary); background: var(--primary-soft); }
.src { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.src:last-child { border-bottom: 0; }
.src .nm { font-weight: 700; word-break: break-word; }
.progress { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); width: 0; transition: width .2s; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* study flow */
.flowhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.steps-dots { display: flex; gap: 6px; flex: 1; }
.steps-dots i { height: 6px; flex: 1; border-radius: 99px; background: var(--line); transition: background .3s; }
.steps-dots i.on { background: var(--primary); }
.steps-dots i.done { background: var(--dot-done); }
.lesson-card { min-height: 46vh; display: flex; flex-direction: column; animation: rise .35s ease both; }
.lesson-card .kicker { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.lesson-card .body { flex: 1; }
.lesson-card .actions { margin-top: 18px; display: flex; gap: 10px; }
.lesson-card .actions .btn { flex: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.term { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--term-bg); }
.term b { font-family: var(--display); }
.term .acad { margin-top: 6px; font-size: .92rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; }
.hl-list { list-style: none; padding: 0; margin: 0; }
.hl-list li { margin: 0 0 12px; font-weight: 600; }
.steplist { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steplist li { position: relative; padding: 0 0 14px 44px; animation: rise .4s ease both; }
.steplist li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; display: grid; place-items: center; }
.steplist li::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--primary-soft); }
.steplist li:last-child::after { display: none; }
.example { border-left: 4px solid var(--hl); background: var(--example-bg); padding: 10px 14px; border-radius: 0 12px 12px 0; margin-bottom: 10px; }
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.cmp th, table.cmp td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.cmp th { background: var(--surface-2); font-family: var(--display); }
table.cmp tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.source-ref { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.notice { background: var(--hl-soft); border: 1px solid var(--notice-line); border-radius: 14px; padding: 12px 14px; font-size: .92rem; }
.notice.info { background: var(--primary-soft); border-color: var(--info-line); }
.notice.bad { background: var(--bad-soft); border-color: var(--bad-line); }

/* diagram */
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .node rect { fill: var(--field); stroke: var(--primary); stroke-width: 2; }
.diagram .node text.l { font-family: var(--display); font-weight: 700; font-size: 15px; fill: var(--ink); }
.diagram .node text.d { font-size: 12px; fill: var(--muted); }
.diagram .edge path { fill: none; stroke: var(--edge); stroke-width: 2; }
.diagram .edge text { font-size: 12px; font-weight: 700; fill: var(--primary); }
.diagram .edge rect { fill: var(--paper); }
.diagram.anim .node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop .45s ease forwards; }
.diagram.anim .edge path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .7s ease forwards; }
.diagram.anim .edge g.lbl { opacity: 0; animation: fade .3s ease forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* questions */
.qtype { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qprompt { font-size: 1.12rem; font-weight: 700; margin: 6px 0 14px; }
.scenario { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: .95rem; }
.opt { display: block; width: 100%; text-align: left; border: 2px solid var(--line); background: var(--field); padding: 13px 14px; border-radius: 14px; margin-bottom: 10px; cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--opt-hover); }
.opt.sel { border-color: var(--primary); background: var(--primary-soft); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt .why { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: 4px; }
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf .opt { text-align: center; margin: 0; }
input.text, textarea.text, select.text { width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--field); }
input.text:focus, textarea.text:focus, select.text:focus { border-color: var(--primary); outline: none; }
.match-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
@media (min-width: 520px) { .match-row { grid-template-columns: 1fr 1fr; align-items: center; } }
.match-row .l { font-weight: 700; }
.match-row.wrong select { border-color: var(--bad); }
.match-row.right select { border-color: var(--ok); }
.order-item { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: var(--field); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; font-weight: 600; transition: transform .2s; }
.order-item .n { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 800; flex: none; font-size: .85rem; }
.order-item .t { flex: 1; }
.order-item button { border: 1px solid var(--line); background: var(--field); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; }
.feedback { margin-top: 14px; border-radius: 16px; padding: 14px 16px; animation: rise .3s ease both; }
.feedback.ok { background: var(--ok-soft); }
.feedback.bad { background: var(--bad-soft); }
.feedback h3 { display: flex; align-items: center; gap: 8px; }
.feedback .remedial { background: var(--field); border-radius: 12px; padding: 12px; margin-top: 10px; }
.check { width: 30px; height: 30px; }
.check circle { fill: var(--ok); }
.check path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .4s .15s ease forwards; }
.burst { position: fixed; pointer-events: none; inset: 0; z-index: 90; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: fly .9s ease-out forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }

.summary-big { font-family: var(--display); font-size: 2.6rem; font-weight: 800; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-list span { background: var(--line); border-radius: 99px; padding: 4px 10px; font-size: .86rem; font-weight: 600; }
.pill-list.ok span { background: var(--ok-soft); }
.pill-list.bad span { background: var(--pill-bad); }

.video { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.video:last-child { border-bottom: 0; }
.video .yt { width: 42px; height: 30px; border-radius: 8px; background: #ff3b30; flex: none; display: grid; place-items: center; color: #fff; font-size: 14px; }

/* modal & toast */
.modal { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: end center; z-index: 40; padding: 0; animation: fade .2s ease both; opacity: 1; }
@media (min-width: 640px) { .modal { place-items: center; padding: 16px; } }
.modal .sheet { background: var(--card); width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding: 20px 18px 24px; max-height: 92vh; overflow: auto; animation: rise .25s ease both; }
@media (min-width: 640px) { .modal .sheet { border-radius: 22px; } }
label.fl, legend.fl, div.fl { display: block; font-weight: 700; font-size: .9rem; margin: 12px 0 6px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-ink); padding: 12px 16px; border-radius: 14px; z-index: 60; max-width: calc(100% - 32px); box-shadow: var(--shadow); animation: toast-in .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.bad { background: var(--bad); }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .card { width: 100%; max-width: 380px; }
.empty { text-align: center; padding: 28px 16px; }
.empty .big { font-size: 2.2rem; }
.skeleton { height: 90px; border-radius: var(--radius); background: linear-gradient(90deg, var(--skel-1), var(--skel-2), var(--skel-1)); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin-bottom: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.pagetext { white-space: pre-wrap; font-size: .92rem; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }

/* ------------------------------------------------------------ telefon */
html, body { overscroll-behavior-y: none; }
button, .btn, .opt, a, .task { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.topbar .in { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-top: max(10px, env(safe-area-inset-top)); }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.modal .sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
.btn.small, .btn.ghost.small { min-height: 40px !important; }
.iconbtn { min-height: 44px; min-width: 44px; }
input.text, textarea.text, select.text { font-size: 16px; min-height: 48px; } /* iOS yakınlaştırmasını önler */
.titlerow { display: flex; gap: 8px; align-items: flex-start; }
.titlerow h1, .titlerow h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.titlerow .chip { margin-top: 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* başparmak bölgesi: ders kartı ve soru butonları ekranın altında sabit */
.card .sticky-actions { position: sticky; bottom: 0; z-index: 5; margin: 18px -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--card) 22%); border-radius: 0 0 var(--radius) var(--radius); }
@media (hover: none) {
  .btn:hover { background: var(--card); }
  .btn.primary:hover { background: var(--primary); }
  .btn.study:hover { background: var(--ink); }
  .opt:hover { border-color: var(--line); }
  .opt.sel:hover { border-color: var(--primary); }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.42rem; }
  h2 { font-size: 1.15rem; }
  .wrap { padding-top: 12px; }
  .card { padding: 15px; border-radius: 16px; }
  .card .sticky-actions { margin: 16px -15px -15px; padding-left: 15px; padding-right: 15px; }
  .section { margin-top: 22px; }
  .hello { gap: 12px; }
  .ring { width: 54px; height: 54px; }
  .task { padding: 12px; }
  .task .go { display: none; }
  .lesson-card { min-height: calc(100vh - 150px); min-height: calc(100dvh - 150px); }
  .qprompt { font-size: 1.05rem; }
  .summary-big { font-size: 2.2rem; }
  /* karşılaştırma tablosu → kartlar */
  .tablewrap table.cmp, .tablewrap table.cmp tbody, .tablewrap table.cmp tr, .tablewrap table.cmp th, .tablewrap table.cmp td { display: block; width: 100%; }
  .tablewrap table.cmp { border: 0; }
  .tablewrap table.cmp thead { display: none; }
  .tablewrap table.cmp tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--field); }
  .tablewrap table.cmp tbody th { background: var(--surface-2); border-bottom: 1px solid var(--line); }
  .tablewrap table.cmp td { border-bottom: 1px dashed var(--line); }
  .tablewrap table.cmp td:last-child { border-bottom: 0; }
  .tablewrap table.cmp td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .diagram.anim .node { opacity: 1; }
  .diagram.anim .edge path { stroke-dashoffset: 0; }
  .hl-anim { background-size: 100% 100%; }
}
.feedback { scroll-margin-top: 72px; }
.term .en { display: inline-block; margin-left: 8px; font-size: .78rem; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: 99px; padding: 1px 8px; vertical-align: 2px; }
.en-chip { background: var(--primary-soft); color: var(--primary); margin-right: 6px; font-size: .7rem; }
.video .yt.doc { background: var(--line); color: var(--ink); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; background: var(--code-bg); color: var(--code-ink); border-radius: 6px; padding: .08em .35em; overflow-wrap: anywhere; }
mark code { background: transparent; }
.toast { top: calc(68px + env(safe-area-inset-top)); bottom: auto; }
.titlerow { flex-wrap: wrap; }
.titlerow h1, .titlerow h3 { flex: 1 1 13rem; }

/* görseller ve video */
.fig { margin: 0 0 14px; }
.fig-img { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; }
.fig-img img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.fig figcaption, .video-fig figcaption { font-size: .9rem; margin-top: 6px; }
.fig .credit { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.fig .credit a { color: var(--muted); }
.video-fig { margin: 0 0 14px; }
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.yt-embed img, .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.yt-embed .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: rgba(255, 0, 0, .92); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
details summary { cursor: pointer; font-weight: 700; margin: 6px 0 10px; }
.modal .sheet.wide { max-width: 960px; }
.lightbox-img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 12px; background: #fff; }

/* yönetim paneli */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.kpi-l { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-v { font-family: var(--display); font-size: 1.6rem; font-weight: 800; margin: 2px 0; overflow-wrap: anywhere; }
.kpi-s { font-size: .8rem; color: var(--muted); }
.meter { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter.hot i { background: var(--st-review); }
.chart-box { position: relative; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .axis { font-size: 11px; fill: var(--muted); }
svg.chart .bar { fill: var(--primary); }
svg.chart .hit { fill: transparent; cursor: pointer; outline: none; }
svg.chart .hit.on, svg.chart .hit:focus { fill: rgba(15, 94, 156, .08); }
.chart-tip { position: absolute; top: 0; background: var(--toast-bg); color: var(--toast-ink); font-size: .8rem; padding: 6px 10px; border-radius: 10px; pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.chart-tip.show { opacity: 1; }
.chart-tip .muted { color: #cfcbe0; }
.ustats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .ustats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ustats div { background: var(--surface-2); border-radius: 10px; padding: 6px 8px; }
.ustats b { display: block; font-family: var(--display); }
.ustats span { font-size: .72rem; color: var(--muted); }
.ucard .titlerow .chip { margin-top: 2px; }
.price-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
@media (min-width: 560px) { .price-row { grid-template-columns: 1.4fr 1fr 1fr; align-items: center; } }
.temp-pw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; text-align: center; background: var(--hl-soft); border-radius: 12px; padding: 14px; margin: 10px 0; user-select: all; }
/* .check adı doğru-cevap ikonunda (30×30) kullanılıyor; onay kutusu satırı ayrı sınıf */
.chk-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; margin: 14px 0 4px; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.chk-row input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--primary); }

/* çalışma raporu */
.today-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-top: 12px; font-size: .92rem; }
.today-strip b { font-family: var(--display); font-size: 1.05rem; }
.today-strip .go { margin-left: auto; color: var(--primary); font-weight: 800; }
.today-line { margin-top: 8px; font-size: .9rem; }
.today-line .muted { color: var(--muted); }

/* sınavlar */
.exam-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 80%); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
@media (min-width: 640px) { .exam-strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; } }
.exam-chip { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; scroll-snap-align: start; min-width: 0; }
.exam-chip strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.exam-chip .row { flex-wrap: nowrap; align-items: flex-start; }
.exam-chip .chip { flex: none; }
.scope-list { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.scope-item { margin: 8px 0; }
.tlist li.out-scope { opacity: .55; }
.tlist.compact li { padding: 6px 2px; }
.card.past { opacity: .7; }
.call-group { padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
.call-group:last-child { border-bottom: 0; }
.call-list { max-height: 340px; overflow: auto; margin-top: 8px; gap: 6px; }

/* --- tahmini not --- */
.estimate { display: grid; gap: 6px; }
.est-num { font-family: var(--display); font-size: 1.35rem; }
.est-band { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--bad-soft), var(--hl-soft) 50%, var(--ok-soft)); margin: 4px 0; }
.est-range { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.est-mid { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--primary); }
.est-gains ul { margin: 4px 0 0; padding-left: 18px; }
.est-gains li { margin: 3px 0; }
.est-gains li a { margin-right: 6px; }
.chip.plus { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--hl-soft); color: var(--warn-ink); }

/* --- izlence --- */
.syl-cta { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--primary-soft); border: 1px dashed var(--primary); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.syl-cta .go { color: var(--primary); font-weight: 800; }
.syl-exam.off { opacity: .55; }
.syl-exam input[type=date] { max-width: 180px; }
.week-list { margin: 8px 0; padding-left: 26px; }
.week-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.week-list li:last-child { border-bottom: 0; }
.week-list li.now { background: var(--hl-soft); border-radius: 8px; padding: 4px 6px; }
.weeks summary { cursor: pointer; }

/* --- plan --- */
.plan-exam { border-left: 4px solid var(--line); }
.plan-exam.ok { border-left-color: var(--ok); }
.plan-exam.warn { border-left-color: var(--hl); }
.plan-exam.bad { border-left-color: var(--bad); }
.plan-item { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.plan-item:hover { background: var(--paper); }
.plan-item.exam { background: var(--bad-soft); font-weight: 800; }
/* v158: Bugün öne çıkar, sonraki günler çizginin altında soluk */
.plan-today { background: var(--card); border: 2px solid var(--primary); border-radius: var(--radius); padding: 14px 14px 12px;
  box-shadow: var(--shadow); margin-top: 18px; }
.plan-today-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-today-head h2 { margin: 0; font-size: 1.5rem; }
.plan-today-min { margin-left: auto; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.plan-today .task { background: var(--primary-soft); border-color: transparent; }
.plan-sep { display: flex; align-items: center; gap: 12px; margin: 30px 0 6px; color: var(--muted); font-size: .8rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; }
.plan-sep::before, .plan-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.plan-sep::before { flex: 0 0 18px; }
.plan-later { opacity: .62; margin-top: 4px; transition: opacity .15s; }
.plan-later:hover, .plan-later:focus-within { opacity: 1; }
.plan-later .plan-day { background: var(--surface-2); box-shadow: none; }
.plan-later .plan-day strong { font-weight: 700; }

/* --- 1 sayfa özet --- */
.sheet { display: grid; gap: 10px; }
.sheet-topic { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; break-inside: avoid; }
.sheet-topic h3 { margin: 0 0 6px; font-size: 1.02rem; }
.sheet-hl { margin: 4px 0; padding-left: 18px; }
.sheet-terms { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0; font-size: .92rem; }
.sheet-terms dt { font-weight: 800; }
.sheet-terms dd { margin: 0; }
.sheet-quick { font-size: .9rem; margin-top: 4px; }
.sheet-mistakes { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bad-soft); font-size: .9rem; }
.mistake { margin-top: 6px; }
.mistake .ok { color: var(--ok); font-weight: 800; }
@media (max-width: 520px) { .sheet-terms { grid-template-columns: 1fr; } .sheet-terms dd { margin-bottom: 4px; } }
@media print {
  .topbar, .no-print, .toast { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .sheet { grid-template-columns: 1fr 1fr; gap: 6px; font-size: 10.5pt; }
  .sheet-topic { padding: 6px 8px; border-radius: 6px; }
  mark { background: #fff3a0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- yönlendirmeli akış --- */
.next-card { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--primary); border-radius: var(--radius);
  padding: 16px 18px 18px; margin-top: 14px; box-shadow: var(--shadow); }
.next-card .kicker { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.next-title { font-family: var(--display); font-size: 1.3rem; font-weight: 800; margin: 4px 0 2px; line-height: 1.25; }
.next-cta { margin-top: 14px; display: flex; justify-content: center; }
.next-card.k-done { border-color: var(--ok); }
.next-card.k-done .kicker { color: var(--ok); }
.next-card.k-wait { border-style: dashed; }
.roadmap { margin-top: 12px; }
.road { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.road li { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.road li.done { color: var(--ink); }
.road li.cur { color: var(--ink); font-weight: 800; }
.rdot { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--line); flex: none; }
.road li.done .rdot { background: var(--ok); color: #fff; }
.road li.cur .rdot { background: var(--primary); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.onb { max-width: 520px; margin: 0 auto; }
.onb h1 { margin-top: 10px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.choice { font: inherit; font-weight: 700; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px; cursor: pointer; min-height: 48px; }
.choice.big { flex: 1 1 140px; font-size: 1.1rem; padding: 18px; }
.choice.small { padding: 6px 12px; min-height: 36px; font-size: .9rem; }
.choice.wide { width: 100%; text-align: left; }
.choice.sel, .choice:active { border-color: var(--primary); background: var(--primary-soft); }
.linkbtn { background: none; border: 0; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; padding: 8px 0; display: block; margin: 8px auto 0; }
.lesson-card .linkbtn { margin-top: 10px; }
.goal-ask { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ask strong { display: block; }
.ok-notice { background: var(--ok-soft); border-color: var(--ok); }
.break-clock { font-family: var(--display); font-size: 3rem; font-weight: 800; margin: 6px 0; }
.break-tips { text-align: left; max-width: 360px; margin: 8px auto; }

/* --- yönetim: aktivite analitiği --- */
.filters summary { cursor: pointer; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; margin-top: 4px; }
.fgrid .pair { grid-template-columns: 1fr 1fr; }
.dtwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table.dt { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.dt th, table.dt td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
table.dt td:first-child, table.dt th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
table.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt tbody tr:hover td { background: var(--paper); }
.thbtn { background: none; border: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; padding: 0; white-space: nowrap; }
.chip.st-ok { background: var(--ok-soft); color: var(--ok); }
.chip.st-warn { background: var(--hl-soft); color: var(--warn-ink); }
.chip.st-bad { background: var(--bad-soft); color: var(--bad); }
.rank { margin: 6px 0 0; padding-left: 20px; }
.rank li { margin: 4px 0; }
.defs { margin-top: 8px; }
.defs ul { margin: 6px 0; padding-left: 18px; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 120px; align-items: end; }
.hbar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hbar i { display: block; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 1px; }
.hbar span { font-size: .62rem; color: var(--muted); text-align: center; height: 14px; }
.chip.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.chip.live-active { background: var(--ok-soft); color: var(--ok); }
.chip.live-active i { background: var(--ok); box-shadow: 0 0 0 3px rgba(31, 157, 107, .25); }
.chip.live-idle { background: var(--hl-soft); color: var(--warn-ink); }
.chip.live-idle i { background: #d4a400; }
.chip.live-lost { background: var(--bad-soft); color: var(--bad); }
.chip.live-lost i { background: var(--bad); }
.chip.live-offline { background: transparent; color: var(--muted); }
.live-row .row { gap: 8px; }

/* --- ana menü --- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--nav-bg); border-top: 1px solid var(--line); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); backdrop-filter: blur(8px); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; min-height: 52px; justify-content: center;
  text-decoration: none; color: var(--muted); font-size: .76rem; font-weight: 700; border-radius: 12px; }
.tabbar a .ti { line-height: 1; opacity: .8; }
.tabbar a.on { color: var(--primary); background: var(--primary-soft); }
.tabbar a.on .ti { opacity: 1; }
.wrap.has-tabs { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.toptabs { display: none; }
@media (min-width: 900px) {
  .tabbar { display: none; }
  .wrap.has-tabs { padding-bottom: 64px; }
  .toptabs { display: flex; gap: 2px; margin-left: 18px; }
  .toptabs a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: .95rem; }
  .toptabs a:hover { background: var(--line); color: var(--ink); }
  .toptabs a.on { color: var(--primary); background: var(--primary-soft); }
  .toptabs .ti { font-size: 1rem; }
}
a.iconbtn { text-decoration: none; }
.block { display: block; }
.center { text-align: center; }
.linkbtn.inline { display: inline; margin: 0; padding: 4px 0; font-size: .95rem; text-decoration: none; }
.hello h1 { margin-bottom: 2px; }
.qtype { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 700; color: var(--primary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qtopic { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.flowtitle { font-weight: 700; color: var(--muted); font-size: .92rem; margin: -6px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnum { white-space: nowrap; }
.danger-link { color: var(--bad); margin-top: 14px; }
.tlist a .block { font-weight: 400; margin-top: 2px; }
@media (min-width: 720px) { .lesson-card { min-height: 0; } }

/* karanlık mod ayrıntıları */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl, :root:not([data-theme="light"]) mark { background: linear-gradient(104deg, rgba(255, 216, 74, 0) .9%, rgba(255, 216, 74, .32) 2.4%, rgba(255, 216, 74, .26) 50%, rgba(255, 216, 74, .32) 96%, rgba(255, 216, 74, 0) 98%); }
  :root:not([data-theme="light"]) .brand .dot, :root:not([data-theme="light"]) .chip.days { color: #1d1b26; }
}
:root[data-theme="dark"] .hl, :root[data-theme="dark"] mark { background: linear-gradient(104deg, rgba(255, 216, 74, 0) .9%, rgba(255, 216, 74, .32) 2.4%, rgba(255, 216, 74, .26) 50%, rgba(255, 216, 74, .32) 96%, rgba(255, 216, 74, 0) 98%); }
:root[data-theme="dark"] .brand .dot, :root[data-theme="dark"] .chip.days { color: #1d1b26; }

/* dil seçimi (çalışma dili, metin dili) ve tema seçimi */
.langswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; }
.langswitch .small { margin-right: 4px; }
.seg { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-weight: 700; cursor: pointer; }
.seg.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.seg:not(.on):hover { background: var(--hover); }

/* --- ders çalışma alanı: hızlı not, ekle, notlar, projeler, dosyalar --- */
.qn { margin-top: 14px; padding: 12px 14px; border: 2px solid var(--primary-soft); }
.qn:focus-within { border-color: var(--primary); }
.qn-input { border: 0 !important; padding: 4px 2px !important; resize: none; min-height: 60px; background: transparent !important; font-size: 1.02rem; line-height: 1.5; }
.qn-input:focus { outline: none; }
.home-qn .qn-input { min-height: 0; }
.qn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.qn-status { display: block; line-height: 1.3; }
.chip-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 6px 12px; min-height: 36px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.chip-btn.on { background: var(--hl-soft); border-color: var(--hl); }
select.text.small-select { width: auto; max-width: 52%; flex: 1 1 auto; padding: 6px 10px; min-height: 36px; font-size: .9rem; border-radius: 999px; }
.small-input { padding: 8px 12px; margin-bottom: 10px; }
.addrow { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.addrow::-webkit-scrollbar { display: none; }
.addchip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 8px 14px; min-height: 44px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.addchip:hover { background: var(--hover); }
.notes { display: grid; gap: 10px; }
.note { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 6px; color: var(--ink); text-decoration: none; }
.note.imp { background: var(--hl-soft); border-color: var(--notice-line); }
.note-link { padding-bottom: 10px; }
.note-link .small { display: block; margin-top: 6px; }
.note-body { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  width: 100%; text-align: left; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.note-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.mini { border: 0; background: transparent; min-width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer; font-size: 1rem; }
.mini:hover { background: var(--hover); }
.list { padding: 4px 6px; }
.item-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; min-height: 52px; }
.list > .item-row:last-child, .stack > .item-row { border-bottom: 0; }
.item-row.done .item-main { text-decoration: line-through; color: var(--muted); }
.item-row input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--primary); }
.item-main { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.chip.ok-chip { background: var(--ok-soft); color: var(--ok); }
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ph { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); cursor: pointer; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upbar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70; background: transparent; }
.upbar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.toast { width: max-content; }
.toast.has-action { display: flex; align-items: center; gap: 12px; }
.toast.has-action > span { min-width: 0; }
.toast-act { border: 0; background: transparent; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 6px 4px; min-height: 36px; white-space: nowrap; }
.recent { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); text-decoration: none; }
.recent b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .go { color: var(--primary); font-weight: 800; }
.flash { animation: flash 1.6s ease 2; }
@keyframes flash { 50% { box-shadow: 0 0 0 4px var(--primary); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 3px solid var(--primary); } }

.mini.on { background: var(--hl-soft); }

.sheet-remember { background: var(--hl-soft); border: 1px solid var(--notice-line); border-radius: 14px; padding: 10px 14px; margin: 12px 0; }
.sheet-remember h2 { font-size: 1.05rem; margin-bottom: 6px; }
.sheet-remember ul { margin: 0; padding-left: 20px; }
.sheet-remember li { white-space: pre-wrap; margin-bottom: 4px; }
@media print { .sheet-remember { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; } }

/* ipuçları */
.hint-row { margin: 6px 0 2px; }
.hint-btn { color: var(--primary); }
.hints .hint { background: var(--primary-soft); border: 1px solid var(--info-line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: .95rem; }
.opt.elim { opacity: .4; text-decoration: line-through; }

/* sınav dili ve ek bilgi (v23) */
.examlang { margin: 2px 0 10px; color: var(--muted); }
.alt-row { margin: 4px 0 0; }
.alt-btn { min-height: 32px; padding: 2px 10px; }
.alt-q { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 4px; background: var(--card); }
.alt-q .alt-prompt { font-weight: 600; margin: 2px 0 6px; }
.alt-list { margin: 4px 0 0; padding-left: 22px; }
.ek-chip { background: var(--pill-bad); color: var(--warn-ink); margin: 0 6px; font-size: .7rem; }
.example.ek { border-left-style: dashed; }
.ek-ask { margin-top: 10px; }

/* isteğe bağlı üretim (v24) */
.gen-wrap { display: flex; flex-direction: column; gap: 4px; }
.gen-wrap .btn { width: 100%; }
.hard-btn { border-color: var(--warn-ink); }
.ex-row { margin-top: 8px; }
.ex-row .ex-box { margin-bottom: 6px; }
.ex-btn { min-height: 34px; padding: 4px 10px; }

/* her ekranda hızlı not düğmesi */
.note-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 35;
  width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--primary); color: var(--primary-ink); font-size: 1.45rem;
  box-shadow: 0 6px 18px var(--primary-glow), var(--shadow); cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.note-fab:hover { transform: translateY(-2px); }
.note-fab:active { transform: scale(.94); }
.note-fab:focus-visible { outline: 3px solid #0f5e9c; outline-offset: 3px; box-shadow: 0 0 0 3px #e8f1f9; }
.note-fab.over-tabs { bottom: calc(76px + env(safe-area-inset-bottom)); }
.note-fab.over-actions { bottom: calc(136px + env(safe-area-inset-bottom)); width: 48px; height: 48px; font-size: 1.2rem; opacity: .92; }
.note-fab.has-draft::after { content: ""; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--hl); border: 2px solid var(--card); }
@media (min-width: 900px) { .note-fab.over-tabs { bottom: calc(24px + env(safe-area-inset-bottom)); } }
@media print { .note-fab { display: none; } }

/* kaynağın içeriği nereden geldi: AI ile işlendi / LOCAL (daha önce işlenmiş bilgi) */
.via-ai, .via-local { font-size: .66rem; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.via-ai { background: var(--primary-soft); color: var(--primary); }
.via-local { background: var(--ok-soft, rgba(47, 178, 122, .16)); color: var(--ok, #1f8a5b); }
.ls-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ls-choices .choice { text-align: left; }
@media (max-width: 420px) { .ls-choices { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ortaokul / lise (v32) */
.k12-plan { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.k12-plan li { line-height: 1.35; }
.k12-plan .chip { margin-right: 4px; }
.k12-crit { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; font-size: .92rem; }
.bad-chip { background: var(--bad-soft); color: var(--bad); }
.yq { margin-top: 12px; }
.yq.ok { border-left: 4px solid var(--ok); }
.yq.bad { border-left: 4px solid var(--bad); }
.yq-ctx { margin: 10px 0; color: var(--ink); }
.yq-ctx p, .yq-q p { margin: 6px 0; }
.yq-q { font-weight: 700; margin: 8px 0 10px; }
.ans { width: 100%; min-height: 96px; resize: vertical; }
.mdtable-wrap { overflow-x: auto; margin: 8px 0; }
.mdtable { border-collapse: collapse; font-size: .92rem; min-width: 60%; }
.mdtable th, .mdtable td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.mdtable th { background: var(--surface-2); font-weight: 800; }
@media print {
  .noprint, .ans, .topbar, .nav, .tabbar, .toptabs, .note-fab, .toast { display: none !important; }
  .yq { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .yq-q::after { content: ""; display: block; height: 110px; }
}

.model-row { align-items: flex-start; gap: 10px; }
.model-row input { margin-top: 4px; }

/* v36: modal kapatma düğmesi, iOS tarih kutusu taşması, k12 ek bölüm */
.modal .sheet { position: relative; overflow-x: hidden; }
.modal .sheet > h2:first-of-type { padding-right: 40px; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--chip, rgba(127,127,127,.15)); color: inherit; font-size: 1rem; cursor: pointer; z-index: 2; }
input.text[type=date], input.text[type=time] { min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.syl-exam .row > input.text[type=date] { flex: 1 1 140px; }
details.k12-extra > summary { cursor: pointer; padding: 6px 0; }

/* aydınlatma metni paneli: telefonda alttan, geniş ekranda sağdan (sayfadan ayrılmadan) */
.panel-wrap { position: fixed; inset: 0; z-index: 45; background: var(--backdrop); display: flex; align-items: flex-end; animation: panel-fade .2s ease both; }
.panel-wrap.closing { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.panel { position: relative; background: var(--card); color: var(--ink); width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow); animation: panel-up .25s ease both; outline: none; }
.panel-head { padding: 18px 60px 12px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 1.15rem; }
.panel-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 14px 18px 18px; line-height: 1.55; font-size: .95rem; }
.panel-body h3 { font-size: 1rem; margin: 1.1em 0 .35em; }
.panel-body ul { margin: 0; padding-left: 20px; }
.panel-body li { margin: .3em 0; }
.panel-foot { display: grid; gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
body.panel-open { overflow: hidden; }
@media (min-width: 720px) {
  .panel-wrap { justify-content: flex-end; align-items: stretch; }
  .panel { width: min(520px, 92vw); height: 100%; max-height: none; border-radius: 22px 0 0 22px; animation-name: panel-left; }
}
@keyframes panel-fade { from { opacity: 0; } }
@keyframes panel-up { from { transform: translateY(100%); } }
@keyframes panel-left { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .panel, .panel-wrap { animation: none; } }
.login { align-content: center; }

/* v49.1: ortak yazılı senaryo seçici sabit üst çubuğun altında kalmasın */
.k12-pick { scroll-margin-top: 80px; }
.k12-exam-btn { flex-direction: column; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; gap: 2px; }

/* v52: logo simgesi + füme ad, çizgi simgeler, sürüm */
.brand { gap: 8px; }
.brand-mark { height: 26px; width: auto; display: block; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--brand-ink); white-space: nowrap; }
.auth-brand { margin-bottom: 16px; text-decoration: none; justify-content: center; }
.auth-brand .brand-mark { height: 38px; } .auth-brand .brand-name { font-size: 1.5rem; }
.ico { display: block; flex: none; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tabbar a .ti .ico { width: 22px; height: 22px; }
.toptabs .ti { display: inline-flex; } .toptabs .ti .ico { width: 18px; height: 18px; }
.note-fab .ico { width: 24px; height: 24px; }
.app-version { color: var(--muted); opacity: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .topbar .iconbtn .lbl { display: none; } .topbar .iconbtn { padding: 8px 4px; min-width: 44px; } .topbar .in { gap: 4px; } }
@media (max-width: 420px) { .topbar .brand-mark { height: 22px; } .topbar .brand-name { font-size: 1.05rem; } }
@media (max-width: 380px) { .topbar .brand-name { font-size: .95rem; } .topbar .brand-mark { height: 20px; } }

/* v53: daha dengeli logo, e-posta kodu kutusu (ana düğmeler tek renk turuncu kalır) */
.brand-mark { height: 22px; }
.brand-name { font-size: 1.05rem; }
.auth-brand { gap: 8px; margin-bottom: 12px; }
.auth-brand .brand-mark { height: 30px; } .auth-brand .brand-name { font-size: 1.3rem; }
@media (max-width: 420px) { .topbar .brand-mark { height: 20px; } .topbar .brand-name { font-size: 1rem; } }
@media (max-width: 380px) { .topbar .brand-mark { height: 19px; } .topbar .brand-name { font-size: .95rem; } }
.code-input { font: 800 1.9rem/1.2 var(--display); letter-spacing: .45em; text-align: center; padding: 12px 8px 12px calc(8px + .45em);
  font-variant-numeric: tabular-nums; max-width: 300px; margin: 0 auto; display: block; }
.code-input::placeholder { letter-spacing: .45em; opacity: .35; }
.forgot { display: block; margin: 12px auto 0; font-weight: 700; }

/* v58: logo yeniden sarı zemin üstünde onay işareti (v48'deki gibi); ad füme yazı */
.brand .dot { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #ffe45c; color: #1d1b26; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; line-height: 1; transform: rotate(-6deg); }
.auth-brand .dot { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
@media (max-width: 420px) { .topbar .brand .dot { width: 24px; height: 24px; font-size: 14px; } }

/* v67: kod adımı bağlantıları — koyu sarı "Kodu yeniden gönder" | füme "E-postayı değiştir" */
.code-links { color: var(--muted); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.code-links .linkbtn.inline { font-size: .84rem; white-space: nowrap; }
.code-links .resend { color: #a16207; }
.code-links .resend[disabled] { color: #a16207; opacity: 1; cursor: default; }
.code-links .chg { color: var(--brand-ink); }
.code-links .sep { margin: 0 6px; white-space: pre; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-links .resend { color: #facc15; } }
:root[data-theme="dark"] .code-links .resend { color: #facc15; }

/* v68: emoji yerine tek tip çizgi simgeler (Lucide). Düz düğme ve başlıklarda marka turuncusu; dolu düğmede yazı rengi. */
.ico-e { display: inline-block; width: 1.12em; height: 1.12em; vertical-align: -.19em; flex: none; color: var(--primary); stroke-width: 2; }
.btn.primary .ico-e, .btn.danger .ico-e, .btn.study .ico-e, .toast .ico-e, .chip-btn.on .ico-e, .linkbtn .ico-e, .seg.on .ico-e,
.notice .ico-e, .bad .ico-e { color: currentColor; }
.btn .ico-e { margin-right: .1em; }
.big > .ico-e, .empty .big .ico-e { width: 1em; height: 1em; stroke-width: 1.6; vertical-align: middle; }

/* v68: hesap penceresi — "çıkış yap ve cihazı unut" cümlenin içinde bağlantı */
.forget-note .linkbtn.inline.forget { font-size: inherit; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; padding: 0; }

/* v68: renkli kalem + ara ara dönen yazı */
.note-fab .pencil-ico { width: 30px; height: 30px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }
.note-fab { overflow: visible; }
/* v69: yazı sağdan girer, kalemin etrafında dolanır, soldan çıkıp düz satır olur; tek yazı tipi, füme */
.fab-orbit { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.fab-orbit-text { font: 700 13px/1 var(--font); letter-spacing: .01em; fill: var(--brand-ink);
  stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
@media (prefers-reduced-motion: reduce) { .fab-orbit { display: none; } }

/* v70: giriş ekranı alt satırı */
.auth-foot { color: var(--muted); }
.auth-foot a { color: var(--muted); }
.auth-foot .sep { margin: 0 6px; }
.auth-foot .app-version { margin: 0; opacity: 1; font-variant-numeric: tabular-nums; }

/* v70: üst çubukta hediye paketi — ara ara titrer */
.gift-btn { position: relative; color: var(--primary); }
.gift-btn .ico { transform-origin: 50% 85%; animation: giftShake 3.6s ease-in-out infinite; }
.gift-btn .gift-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 2px var(--card); }
@keyframes giftShake {
  0%, 62%, 100% { transform: rotate(0) scale(1); }
  66% { transform: rotate(-14deg) scale(1.12); }
  70% { transform: rotate(12deg) scale(1.12); }
  74% { transform: rotate(-10deg) scale(1.1); }
  78% { transform: rotate(8deg) scale(1.06); }
  82% { transform: rotate(-4deg) scale(1.02); }
  86% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .gift-btn .ico { animation: none; } }
.gift-hero { display: grid; place-items: center; width: 76px; height: 76px; margin: 4px auto 0; border-radius: 22px; background: var(--hl-soft); color: var(--primary); }
.gift-note { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--hl-soft); color: var(--ink); }
.gift-note .ico { color: var(--primary); flex: none; }

/* v71: günlük süre — "Önerilen" rozeti sağ üst köşede */
.choice.recommended { position: relative; }
.rec-badge { position: absolute; top: -9px; right: -6px; padding: 2px 8px; border-radius: 999px; background: var(--hl); color: #1d1b26;
  font: 800 .68rem/1.4 var(--font); letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.12); pointer-events: none; z-index: 2; }   /* v113: yükleme çizgisi rozetin altından geçer */

/* v74: giriş ekranındaki formül eskizi kaldırıldı (kullanıcı isteği); sarmalayıcı yalnız genişliği tutar */
.auth-wrap { width: 100%; max-width: 380px; }
.login .auth-wrap .card { max-width: none; }

/* v72: kazanım hazırlığı — hazır olanlar hemen açılır */
.k12-prep .ok-note { background: var(--ok-soft); border-color: transparent; }
.k12-prep-list li { display: block; }
.k12-prep-list li.ready strong { color: var(--ok); }
.k12-prep-list .chip.go { margin-left: 4px; text-decoration: none; }
.k12-wait { white-space: nowrap; }
.spin.tiny { width: 11px; height: 11px; border-width: 2px; vertical-align: -1px; }
.k12-tips { margin: 12px 0 0; padding-left: 18px; }
.k12-tips li { margin: 3px 0; }


/* v72: konu anlatımı — kısa parçalar, görsel yapılar, çevrilebilir terim kartları, yerinde "farklı anlat" */
.lead-line { font-size: 1.15rem; line-height: 1.5; margin: 0 0 10px; font-weight: 600; }
.chunk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.chunk-list li { position: relative; padding: 9px 12px 9px 38px; border-radius: 12px; background: var(--hl-soft); line-height: 1.45; animation: rise .35s ease both; }
.chunk-list li::before { content: ""; position: absolute; left: 13px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.chunk-list li:nth-child(2) { animation-delay: .08s; } .chunk-list li:nth-child(3) { animation-delay: .16s; } .chunk-list li:nth-child(4) { animation-delay: .24s; }
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.term-card { position: relative; min-height: 96px; border: 1px solid var(--line); border-radius: 14px; background: var(--term-bg, var(--card)); color: var(--ink);
  padding: 12px; text-align: left; font: inherit; cursor: pointer; perspective: 600px; transition: transform .2s, box-shadow .2s; }
.term-card:hover { box-shadow: var(--shadow); }
.term-card .term-front b { font-family: var(--display); font-size: 1.05rem; display: block; }
.term-card .term-back { display: none; font-size: .94rem; line-height: 1.4; }
.term-card .term-back .acad { display: block; margin-top: 6px; font-size: .84rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; }
.term-card.flipped { background: var(--primary-soft); border-color: var(--primary); animation: flipIn .3s ease both; }
.term-card.flipped .term-front { display: none; }
.term-card.flipped .term-back { display: block; }
.term-card:not(.flipped)::after { content: "↻"; position: absolute; right: 10px; bottom: 8px; color: var(--primary); font-weight: 800; opacity: .7; }
@keyframes flipIn { from { transform: rotateY(70deg); opacity: .4; } to { transform: none; opacity: 1; } }
.vis { display: grid; gap: 10px; }
.vis-title { margin: 0; }
.vis-cap { margin: 0; }
.vis-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.vis-group { border-radius: 14px; padding: 10px 12px; border: 2px solid; animation: rise .35s ease both; }
.vis-group.g0 { border-color: #f59e0b; background: rgba(245,158,11,.10); } .vis-group.g1 { border-color: #0ea5e9; background: rgba(14,165,233,.10); }
.vis-group.g2 { border-color: #22a06b; background: rgba(34,160,107,.10); } .vis-group.g3 { border-color: #a855f7; background: rgba(168,85,247,.10); }
.vis-gname { font-family: var(--display); font-weight: 800; margin-bottom: 8px; }
.vis-items { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-item { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: .92rem; }
.vis-formula { font-family: var(--display); font-size: 2rem; font-weight: 800; text-align: center; padding: 16px; border-radius: 16px; background: var(--hl-soft); letter-spacing: .02em; }
.vis-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.vis-legend dt { font-family: var(--display); font-weight: 800; color: var(--primary); }
.vis-legend dd { margin: 0; }
.vis-chart-wrap { overflow-x: auto; }
.vis-chart { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.vis-chart .ax { stroke: var(--muted); stroke-width: 1.2; }
.vis-chart .vbar { fill: var(--primary); animation: barIn .5s ease both; }
@keyframes barIn { from { opacity: 0; } to { opacity: 1; } }
.vis-chart .ln { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; }
.vis-chart .pt { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.vis-chart .val { font-size: 11px; font-weight: 800; fill: var(--ink); }
.vis-chart .lab, .vis-chart .axl { font-size: 10.5px; fill: var(--muted); }
.vis-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.vis-timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 3px; background: var(--line); border-radius: 2px; }
.vis-timeline li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; animation: rise .35s ease both; }
.vis-dot { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 800; }
.drill { margin-top: 6px; }
.drill-q { margin: 0 0 8px; }
.drill-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-opts .right { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.drill-opts .wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.drill-fb { min-height: 1.2em; margin: 6px 0 0; }
.drill-done { font-weight: 800; }
.lesson-card.alt-mode { border-color: var(--hl); box-shadow: 0 0 0 3px var(--hl-soft), var(--shadow); }
.lesson-card.alt-mode .kicker { color: #a16207; }
.body.swap-in { animation: swapIn .35s ease both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.alt-analogy { display: flex; gap: 12px; align-items: flex-start; }
.alt-icon { font-size: 1.8rem; line-height: 1; flex: none; }
.alt-check { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); }
details.photo-alt summary { cursor: pointer; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .chunk-list li, .vis-group, .vis-timeline li, .vis-chart .vbar, .term-card.flipped, .body.swap-in { animation: none; } }

/* v74: çalışma çubuğu — süre ve kontroller */
.study-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); position: sticky; top: 64px; z-index: 6; }
.sb-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-clock { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.sb-clock .ico { color: var(--primary); }
.sb-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 12px;
  padding: 5px 11px; font: 700 .84rem/1.2 var(--font); cursor: pointer; }
.sb-btn:hover { background: var(--hover); }
.sb-btn .ico { color: var(--primary); }
.sb-btn.hidden { display: none; }
@media (max-width: 359px) { .sb-btn span { display: none; } .sb-btn { padding: 6px 9px; } }
@media (max-width: 520px) { .study-bar { top: 58px; } }
.study-times { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); margin: 4px 0 0; }
.study-times .ico { color: var(--primary); }

/* v74: ortaokul/lise — senaryodan sonra üç yol */
.k12-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.k12-mode { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.k12-mode:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.k12-mode .ico { color: var(--primary); width: 28px; height: 28px; }
.k12-mode b { font-family: var(--display); font-size: 1.08rem; }
.k12-mode span { font-size: .88rem; color: var(--muted); }
.k12-mode.off { opacity: .55; pointer-events: none; }
.k12-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-weight: 800; }
.k12-step i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-style: normal; font-size: .82rem; }

/* v76: hediye karşılaması — mavi duyuru + sallanan paket → açılış + konfeti → "1 DERS HEDİYE" ve tamamlanan mesaj */
.onb-back { display: inline-block; margin: 0 0 8px; font-weight: 700; color: var(--primary); text-decoration: none; }
.onb-back:hover { text-decoration: underline; }
.gift-welcome { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; padding: 12px 16px; border-radius: 18px;
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); overflow: hidden; }
.gw-head { margin: 0; font: 800 1.18rem/1.35 var(--display); color: var(--primary); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.gift-welcome.s1 .gw-head { opacity: 1; transform: none; }
.gw-tail { display: none; }
.gift-welcome.s3 .gw-tail { display: inline; animation: tailIn .55s ease both; }
@keyframes tailIn { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
.gift-stage { position: relative; flex: none; width: 118px; height: 96px; }
.gbox { position: absolute; left: 50%; bottom: 0; width: 58px; height: 52px; margin-left: -29px; transform-origin: 50% 100%; }
.gift-welcome.s1:not(.s2) .gbox { animation: giftWiggle .5s ease-in-out infinite; }
@keyframes giftWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.04); } 75% { transform: rotate(9deg) scale(1.04); } }
.gbody { position: absolute; left: 4px; right: 4px; bottom: 0; height: 36px; border-radius: 6px; background: var(--primary); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.gribbon { position: absolute; left: 50%; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; background: #ffe45c; }
.glid { position: absolute; left: 0; right: 0; top: 4px; height: 14px; border-radius: 5px; background: var(--primary-hover, var(--primary)); z-index: 2;
  transform-origin: 10% 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.glid::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; background: #ffe45c; }
.gbow-l, .gbow-r { position: absolute; top: -12px; width: 16px; height: 14px; border: 4px solid #ffe45c; border-radius: 50% 50% 10% 50%; }
.gbow-l { left: 50%; margin-left: -17px; transform: rotate(-20deg); } .gbow-r { left: 50%; margin-left: 1px; transform: scaleX(-1) rotate(-20deg); }
.gift-welcome.s2 .glid { transform: translate(-22px, 8px) rotate(-62deg); }   /* kapak yana düşer, yazının önünü kapatmaz */
.gw-label { position: absolute; left: 50%; top: 0; white-space: nowrap; font: 900 .76rem/1 var(--display); letter-spacing: .03em; color: #1d1b26;
  background: #ffe45c; padding: 6px 9px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.18); z-index: 3;
  opacity: 0; transform: translate(-50%, 46px) scale(.25); transition: transform .6s cubic-bezier(.25,1.6,.45,1), opacity .25s; }
.gift-welcome.s3 .gw-label { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gift-cta { margin: 4px 0 10px; font: 800 1.35rem/1.25 var(--display); color: var(--ink); }
.gift-wish { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 700; color: var(--ink); }   /* v81: siyah + küçük hediye */
.choice.pop-in { animation: popIn .35s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
/* v78: başlık + dersler, tam mesajdan 1 sn sonra */
.gift-rest.wait { display: none; }
.gift-rest.in { animation: restIn .4s ease both; }
@keyframes restIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { .gift-welcome { gap: 8px; padding: 10px 12px; } .gw-head { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .gbox, .glid, .gw-label, .gw-head { animation: none !important; transition: none !important; } .choice.pop-in, .gift-rest.in { animation: none; } }
details.electives { margin-top: 10px; }
details.electives summary { cursor: pointer; padding: 4px 0; }
.choice-grid.compact { gap: 6px; margin-top: 6px; }
.choice-grid.compact .choice { min-height: 34px; padding: 6px 11px; font-size: .88rem; border-width: 1.5px; }

/* v80: kurulum sekmeleri — Bilgilerim | Hediyem | Ders Seç | Ödeme planı. v81: ayraç ayrı öğe; çizgi tam yazının altında, ilerlemeyi gösterir */
.onb-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 10px; font-weight: 700; font-size: .92rem; }
.onb-tab { position: relative; padding: 4px 0 6px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.onb-sep { margin: 0 10px; color: var(--line); font-weight: 400; }
a.onb-tab { color: var(--primary); }
a.onb-tab:hover { text-decoration: underline; }
.onb-tab.on { color: var(--ink); }
.onb-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary) var(--p, 100%), var(--line) var(--p, 100%)); }
.onb-tab.off { opacity: .55; cursor: not-allowed; }
.onb-tabs + .flowhead { margin-top: 8px; }
.gift-owned { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-weight: 700; color: var(--primary); vertical-align: -3px; }
.pick-date { font-weight: 500; font-size: .85em; color: var(--muted); }
.choice.sel .pick-date { color: inherit; }
.pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: 0; }
.pay-row.gift strong { color: var(--primary); }
@media (max-width: 380px) { .onb-tabs { font-size: .84rem; } .onb-sep { margin: 0 7px; } }
.add-row { display: flex; gap: 8px; align-items: stretch; }
.add-row .text { flex: 1; min-width: 0; }
.add-row .btn { flex: none; }
.pay-row > :last-child { white-space: nowrap; flex: none; }

/* v81: küçük hediye kutusu (Hediyem'deki büyük kutunun renkleri) ve sallanan el */
.gift-mini { flex: none; overflow: visible; }
.gift-mini .gm-body { fill: var(--primary); }
.gift-mini .gm-lid { fill: var(--primary-hover, var(--primary)); }
.gift-mini .gm-rib { fill: #ffd22e; }
.gift-mini .gm-bow { fill: none; stroke: #ffd22e; stroke-width: 2; stroke-linejoin: round; }
.wave-hand { display: inline-block; vertical-align: -4px; transform-origin: 70% 85%; animation: wave 1.6s ease-in-out .3s 2; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .wave-hand { animation: none; } }

/* v81: ödeme planı kartları */
.onb.onb-wide { max-width: none; width: min(1120px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }
@media (max-width: 600px) { .onb.onb-wide { width: auto; left: auto; transform: none; } }
.plan-head h1 { margin: 6px 0 4px; }
.plan-head p { margin: 0 0 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { display: flex; flex-direction: column; padding: 18px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.plan-card.best { border-color: var(--primary); box-shadow: 0 6px 22px rgba(15, 94, 156, .12); }

.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan-name { font-weight: 800; white-space: nowrap; }
.plan-badge { padding: 3px 9px; border-radius: 99px; background: var(--primary-soft, #e8f1f9); color: var(--primary); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 3px; }
.plan-price b { font: 800 2.3rem/1.05 var(--display); letter-spacing: -.02em; }
.plan-price b.soon { font-size: 1.4rem; }
.plan-price span { color: var(--muted); font-size: .9rem; }
.plan-sub { margin-top: 6px; min-height: 2.6em; font-size: .86rem; font-weight: 700; }
.plan-cta { margin: 12px 0 14px; padding: 11px 12px; border: 0; border-radius: 14px; background: var(--line); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.plan-cta:hover { filter: brightness(.96); }
.plan-card.best .plan-cta { background: var(--ink); color: var(--paper); }

.plan-feat-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.plan-feats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.plan-feats li { display: flex; gap: 8px; align-items: flex-start; }
.plan-feats .ico { color: var(--primary); flex: none; margin-top: 2px; }
.plan-start { display: block; max-width: 420px; margin: 14px auto 0; text-align: center; }

/* v83: Yönetim › Site trafiği (saat grafiği mevcut .hours/.hbar sınıflarını kullanır) */
.tr-bars { display: grid; gap: 8px; }
.tr-bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; }
.tr-bar-l, .tr-step-h { display: flex; flex-direction: column; min-width: 0; }
.tr-bar-l > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tr-bar-t { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.tr-bar-t i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.tr-bar-n { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.tr-funnel { display: grid; gap: 12px; margin-top: 8px; }
.tr-step { display: grid; grid-template-columns: minmax(150px, 38%) 1fr 150px; gap: 10px; align-items: center; }
.tr-step-n { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.tr-step-n b { font-family: var(--display); font-size: 1.15rem; }
.tr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) {
  .tr-grid2 { grid-template-columns: 1fr; }
  .tr-step { grid-template-columns: 1fr auto; }
  .tr-step .tr-bar-t { grid-column: 1 / -1; grid-row: 2; }
  .tr-bar { grid-template-columns: minmax(96px, 40%) 1fr auto; }
}

/* v85: kurulum mikro animasyonları — bilgi işleniyor (≈500 ms halka → onay), hazırlık ve hazırız aşamaları, sakin konfeti */
.choice.proc, .btn.proc { position: relative; }
.proc-ind { display: inline-flex; vertical-align: middle; margin-left: 10px; width: 22px; height: 22px; }
.proc-ind svg { overflow: visible; }
.proc-ind circle { fill: none; stroke-width: 2.4; }
.proc-ind .pr-track { stroke: currentColor; opacity: .18; }
.proc-ind .pr-ring { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 56.6; stroke-dashoffset: 56.6; transform: rotate(-90deg); transform-origin: 12px 12px;
  animation: prFill .45s cubic-bezier(.4,0,.2,1) forwards; }
.proc-ind .pr-check { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.procd .proc-ind .pr-ring { opacity: 0; transition: opacity .12s; }
.procd .proc-ind .pr-check { animation: prCheck .18s ease-out forwards; }
.choice.proc { color: var(--primary); }
.choice-grid.busy .choice:not(.proc) { opacity: .5; pointer-events: none; transition: opacity .2s; }
.btn.primary .proc-ind { color: var(--primary-ink); }
@keyframes prFill { to { stroke-dashoffset: 0; } }
@keyframes prCheck { to { stroke-dashoffset: 0; } }

.onb h1.pre { opacity: 0; transform: translateY(6px); }
.onb h1.in { animation: rise .35s ease both; }
.prep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 190px; margin: 6px 0 14px;
  padding: 26px 16px; border-radius: 18px; background: var(--primary-soft); text-align: center; animation: rise .3s ease both; }
.prep-t { margin: 0; font: 800 1.12rem/1.35 var(--display); color: var(--primary); }
.prep.ok .prep-t { animation: swapIn .3s ease both; }
.prep-orb { position: relative; width: 56px; height: 56px; }
.prep-orb i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--primary);
  animation: orbit 1.1s cubic-bezier(.5,.1,.5,.9) infinite; }
.prep-orb i:nth-child(2) { background: #ffc83d; animation-delay: -.37s; }
.prep-orb i:nth-child(3) { background: var(--ok); animation-delay: -.73s; }
.prep-ok { position: absolute; inset: 6px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.3,1.5,.5,1); }
.prep-ok path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.prep.ok .prep-orb i { animation: none; opacity: 0; transition: opacity .15s; }
.prep.ok .prep-ok { opacity: 1; transform: none; }
.prep.ok .prep-ok path { animation: draw .3s .05s ease-out forwards; }
@keyframes orbit { 0% { transform: rotate(0deg) translateX(20px) scale(1); } 50% { transform: rotate(180deg) translateX(20px) scale(.7); } 100% { transform: rotate(360deg) translateX(20px) scale(1); } }

.burst.gentle i { animation: sparkle .9s ease-out forwards; opacity: 0; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35)); }
@keyframes sparkle { 30% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .prep-orb i { animation: prPulse 1.2s ease-in-out infinite; transform: translateX(calc((var(--k, 0) - 1) * 18px)); }
  .prep-orb i:nth-child(1) { --k: 0; } .prep-orb i:nth-child(2) { --k: 1; } .prep-orb i:nth-child(3) { --k: 2; }
  .prep, .onb h1.in, .prep.ok .prep-t { animation: none; }
  .onb h1.pre { transform: none; }
  @keyframes prPulse { 50% { opacity: .35; } }
}

/* v86: "Bu sınavın bizden" bandı ve 3 paket */
.gift-banner { margin: 10px 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--hl-soft); border: 1px solid var(--notice-line, var(--line)); }
.gift-banner.ended { background: var(--primary-soft); border-color: var(--info-line, var(--line)); }
.gift-banner p { margin: 6px 0 0; }
.gb-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.05rem; }
.gb-ask { margin-top: 10px; display: grid; gap: 6px; }
.gb-ask .text { flex: 1 1 200px; min-width: 0; }
.gift-rule { margin: 4px 0 6px; }
.plan-grid.plan3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .plan-grid.plan3 { grid-template-columns: 1fr; } }

/* v86.1: hediye renkleri — kutu koyu kırmızı, kurdele yeşil (büyük kutu, küçük kutu, çizgi simge) */
:root { --gift-box: #e5484d; --gift-lid: #ef6468; --gift-rib: #15803d; }   /* v88: açık kırmızı kutu, yeşil kurdele */
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gift-box: #f0625f; --gift-lid: #f57c79; --gift-rib: #22a75b; } }
:root[data-theme="dark"] { --gift-box: #f0625f; --gift-lid: #f57c79; --gift-rib: #22a75b; }
.gbody { background: var(--gift-box); }
.glid { background: var(--gift-lid); }
.gribbon, .glid::after { background: var(--gift-rib); }
.gbow-l, .gbow-r { border-color: var(--gift-rib); }
.gift-mini .gm-body { fill: var(--gift-box); }
.gift-mini .gm-lid { fill: var(--gift-lid); }
.gift-mini .gm-rib { fill: var(--gift-rib); }
.gift-mini .gm-bow { stroke: var(--gift-rib); }
.ico .gi-box { stroke: var(--gift-box); }
.ico .gi-rib { stroke: var(--gift-rib); }

/* v86.1: "Hadi hediye dersini seç!" ve kural fosforlu kalemle çizilir, sonra dersler gelir */
.gift-rule { margin: 2px 0 12px; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.gift-cta .hl { padding: .05em .3em; }
.hl.hl-run { background-size: 0% 100%; background-repeat: no-repeat; }
.hl.hl-run.go { animation: hl 1s ease forwards; }
.k12-subjects.subj-wait { display: none; }
@media (prefers-reduced-motion: reduce) { .hl.hl-run, .hl.hl-run.go { background-size: 100% 100%; animation: none; } }

/* v86.1: ödeme planı — hediye kapsamı ve paketin seçilen dersleri kapsaması */
.gift-scope { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 8px; padding: 12px 14px; border-radius: 14px; background: var(--hl-soft); line-height: 1.45; }
.gift-scope .gift-mini { flex: none; margin-top: 2px; }
.plan-cover { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--muted); margin: 2px 0 6px; }
.plan-cover.ok { color: var(--ok); }

/* v88: el sağa sola sallanır (ara vererek, sürekli) */
.wave-hand { animation: handSway 2.4s ease-in-out .3s infinite; transform-origin: 60% 90%; }
@keyframes handSway { 0%, 62%, 100% { transform: rotate(0); } 10% { transform: rotate(-16deg); } 22% { transform: rotate(16deg); } 34% { transform: rotate(-12deg); } 46% { transform: rotate(10deg); } 56% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .wave-hand { animation: none; } }

/* v88: "1 DERS HEDİYE" eski görünümünde (tek satır sarı etiket) ama yatık: sol ucu kutunun içinde (gövdenin arkasında),
   kutudan sağ yukarı doğru çıkar. Etiket .gbox içinde; kapak açılınca etiketin arkasına düşer. */
.gift-stage { width: 152px; }
.gbody { z-index: 3; }
.glid { z-index: 4; }
.gift-welcome.s2 .glid { z-index: 1; }
.gift-stage .gbox { left: 22px; margin-left: 0; }
.gbox .gw-label { position: absolute; z-index: 2; left: 24px; top: 0; margin: 0; width: auto; white-space: nowrap; font: 900 .72rem/1 var(--display);
  letter-spacing: .03em; padding: 6px 9px 6px 15px; border-radius: 10px; text-align: left; transform-origin: 4px 80%;
  transform: translateY(26px) rotate(0deg); opacity: 1; visibility: hidden; transition: transform .7s cubic-bezier(.25,1.4,.45,1); }
.gift-welcome.s3 .gbox .gw-label { visibility: visible; transform: translateY(0) rotate(-20deg); }
@media (prefers-reduced-motion: reduce) { .gift-welcome.s3 .gbox .gw-label { transition: none; } }
@media (max-width: 420px) { .gift-stage { width: 146px; } .gbox .gw-label { font-size: .68rem; } }

/* v89: "işleniyor" halkası düğmenin üstünde (sağda, içeride) döner; düğme genişlemez, satır kaymaz */
.choice.proc, .btn.proc { position: relative; }
.proc-ind { position: absolute; right: 10px; top: 50%; margin: -11px 0 0; pointer-events: none; }
.choice.big .proc-ind { right: 12px; }

/* v90: "işleniyor" = çerçeve yükleme çubuğu: kenar mavi çizgiyle sarılır, sonra içi maviyle dolar (halka yok, düğme genişlemez) */
.choice.proc, .btn.proc { position: relative; overflow: visible; }
.proc-frame { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; overflow: visible; }
.proc-frame rect { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: frameRun .45s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes frameRun { to { stroke-dashoffset: 0; } }
.btn.primary .proc-frame rect { stroke: #e8f1f9; }   /* v98: mavi düğmede açık mavi (sarı kaldırıldı) */
.choice.proc { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.choice.procd { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.choice.procd .ico { color: var(--primary-ink); }
.btn.primary.procd { background: var(--primary-hover, #0c4f84); }

/* v90: "Devam et" sonrası düğmenin üstünde dönen yükleme halkası */
.btn.btn-busy { position: relative; color: transparent !important; }
.btn-spin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }

/* v90: hediye ders seçilince dilek cümlesi kutlanır */
.gift-wish.cheer { animation: wishCheer .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes wishCheer { 0% { transform: scale(1); } 35% { transform: scale(1.06); color: var(--primary); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .proc-frame rect { animation: none; stroke-dashoffset: 0; } .gift-wish.cheer { animation: none; } .btn-spin { animation-duration: 1.6s; } }
/* v90: çizgi görünsün diye işlenirken düğmenin kendi kenarı sade kalır; dolunca tamamen mavi */
.choice-grid .choice.proc.sel:not(.procd), .choice-grid .choice.proc:not(.procd) { border-color: var(--line); background: var(--card); color: var(--primary); }
.btn.btn-busy, .btn.btn-busy:disabled { opacity: 1; background: var(--primary); cursor: progress; }

/* v91: kalem yazısı birlikte silinir; altta yer yoksa kalem yazı süresince kalkar */
.fab-orbit-text { transition: opacity .45s ease, filter .45s ease; }
.fab-orbit-text.gone { opacity: 0; filter: blur(3px); }
.note-fab.tip-lift { transform: translateY(var(--tip-lift, 0)); transition: transform .35s ease; }

/* v91: hediye dersin kutusuna kurdele bağlanır */
.k12-subjects .choice { position: relative; overflow: visible; }
.gift-bow { position: absolute; top: -15px; right: -13px; z-index: 2; pointer-events: none; transform-origin: 50% 55%;
  animation: bowTie .55s cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.gift-bow.still { animation: none; }
.gift-bow .gb-loop, .gift-bow .gb-tail { fill: var(--gift-rib); }
.gift-bow .gb-knot { fill: var(--gift-box); }   /* v92: fiyonkun ortası hediye kutusunun kırmızısı */
@keyframes bowTie { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.18) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }

/* v91: telefonda "Devam et" altta yapışık; kalem düğmesi onun üstüne çıkar */
@media (max-width: 760px) {
  /* v111: ekrandaki tek ana düğme telefonda her zaman ekranın en altında sabit (alt sekme çubuğu varsa onun üstünde) */
  .btn.sticky-go { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); width: auto !important; margin: 0 !important; z-index: 36;
    box-shadow: 0 8px 22px rgba(15, 94, 156, .28), 0 0 0 10px var(--paper); }
  body:has(.tabbar) .btn.sticky-go { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body:has(.btn.sticky-go) main.wrap, body:has(.btn.sticky-go) .login { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  body:has(.tabbar):has(.btn.sticky-go) main.wrap { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
  body:has(.btn.sticky-go) .note-fab { bottom: calc(100px + env(safe-area-inset-bottom)); }   /* altında kalem yazısına yer kalır */
  body:has(.tabbar):has(.btn.sticky-go) .note-fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* sabit düğmenin atası kayarken (transform) düğme yerinden oynamasın: telefonda bu geçişler yalnız saydamlıkla */
  .gift-rest.in { animation-name: fadeOnly; }
  .btn.sticky-go:disabled { opacity: 1; background: color-mix(in srgb, var(--primary) 42%, var(--paper)); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .gift-bow { animation: none; } .fab-orbit-text { transition: none; } }

/* v92: kurulum sekmeleri ilerledikçe belirir */
.onb-tab.appear, .onb-sep.appear { animation: tabAppear .45s ease both; }
@keyframes tabAppear { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onb-tab.appear, .onb-sep.appear { animation: none; } }

/* v94: Ödeme planı: hediye ders + üç paket (dört kart); özellikler ✓ / ✕ */
.plan-grid.plan4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .plan-grid.plan4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plan-grid.plan4 { grid-template-columns: 1fr; } }
.plan-card.gift { border-color: color-mix(in srgb, var(--gift-box) 45%, var(--line)); background: color-mix(in srgb, var(--gift-box) 5%, var(--card)); }
.plan-badge.gift { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--gift-box) 14%, var(--card)); color: var(--gift-box); }
.plan-card.gift .plan-price b { color: var(--gift-box); }
a.plan-cta { display: block; text-align: center; text-decoration: none; }
.plan-cta.go { background: var(--primary); color: var(--primary-ink); }
.plan-card .plan-feats li.no { color: var(--muted); }
.plan-card .plan-feats li.no .ico { color: var(--bad); opacity: 1; stroke-width: 3; }   /* v95: çarpı daha görünür */
.plan-lim { color: var(--muted); font-weight: 600; }

/* v95: hediye derste en üstte yazılı tarihi + hediyenin bitiş günü */
.card.gift-date { margin: 10px 0 12px; border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.gd-lab { display: block; margin: 0 0 6px; font: 800 1.08rem/1.3 var(--display); color: var(--ink); }
.gift-date input[type=date] { width: 100%; }
.gd-end { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hl-soft); font-size: .92rem; line-height: 1.4; color: var(--ink); }
.gd-end .gift-mini { flex: none; margin-top: 1px; }

/* v96: "Devam et", "Derse başla", "Satın al": dönen halka yerine kenarı saran çizgi (süre --run). Renk: mavi düğmede sarı,
   koyu "Satın al" (Senin için uygun) düğmesinde beyaz, açık renkli "Satın al" düğmelerinde mavi. Yazı görünür kalır. */
.btn.btn-busy { color: var(--primary-ink) !important; overflow: visible; }
.btn-busy .proc-frame rect { animation-duration: var(--run, .45s); }
.plan-cta { position: relative; overflow: visible; }
.plan-cta.btn-busy { cursor: progress; }
.plan-cta.btn-busy:disabled { opacity: 1; }
/* koyu düğmede beyaz çizgi düğmenin içinde kalsın (dışarıda açık zeminde kayboluyordu) */

/* v97: Ödeme planı düğme renkleri sabit (seçim, düğme rengini ve kart çerçevesini değiştirmez; yalnız öne çıkan paket çerçeveli).
   Ücretsiz: yeşil #17af50 (çizgi açık kırmızı #e5484d) · Senin için uygun: açık mavi #e8f1f9 (çizgi #0f5e9c) · diğerleri: bej #ebe7dd (çizgi #0f5e9c) */
.plan-cta, .plan-cta:hover { filter: none; }
.plan-card .plan-cta { background: #e8f1f9; color: #0f5e9c; }   /* v98: diğer paketler açık mavi, öne çıkan bej */
.plan-card .plan-cta:hover { background: #d9e8f5; }
.plan-card.best .plan-cta { background: #ebe7dd; color: #1d1b26; }
.plan-card.best .plan-cta:hover { background: #e1dccf; }
.plan-card.gift .plan-cta.go { background: #e8f1f9; color: #0f5e9c; }   /* v99: açık mavi; çizgi koyu mavi */
.plan-card.gift .plan-cta.go:hover { background: #d9e8f5; }
.plan-card .plan-cta .proc-frame rect { stroke: #0f5e9c; }
.plan-card.gift .plan-cta .proc-frame rect { stroke: #0f5e9c; }
.plan-grid.plan4 .plan-cover.ok, .plan-grid.plan4 .plan-cover.ok .ico { color: var(--gift-green-ink); }

/* v98: mavi (#0f5e9c) düğmelerde odak/vurgu sarı değil: koyu mavi çizgi + açık mavi (#e8f1f9) halka */
.btn.primary:focus-visible, .plan-cta.go:focus-visible { outline: 3px solid #0f5e9c; outline-offset: 2px; box-shadow: 0 0 0 2px #e8f1f9; }

/* v98: Hediye ders adım adım */
.gw { margin-top: 6px; }
.gw-prog { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 18px; padding: 0; }
.gw-prog li > * { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left;
  font-size: .8rem; font-weight: 700; color: var(--muted); }
.gw-prog li i { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.gw-prog li.done i { background: #0f5e9c; }
.gw-prog li.on i { background: linear-gradient(90deg, #0f5e9c var(--f, 50%), #e8f1f9 var(--f, 50%)); }
.gw-prog li.on span { color: var(--ink); }
.gw-prog li.done button { cursor: pointer; color: #0f5e9c; }
.gw-prog li.done button:hover span { text-decoration: underline; }
.gw-step { position: relative; animation: gwIn .38s cubic-bezier(.22,.61,.36,1) both; }
.gw-step.back { animation-name: gwBack; }
@keyframes gwIn { from { opacity: 0; left: 28px; } to { opacity: 1; left: 0; } }   /* v118: transform değil left (sabit düğme kaymasın) */
@keyframes gwBack { from { opacity: 0; left: -28px; } to { opacity: 1; left: 0; } }
.gw-q { margin: 0 0 4px; font: 800 1.45rem/1.25 var(--display); color: var(--ink); }
.gw-sub { margin: 0 0 16px; color: var(--muted); }
.gw input.text { font-size: 1.1rem; min-height: 56px; width: 100%; }
.gw-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: .85rem; }
.gw-or::before, .gw-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gw-later { width: 100%; justify-content: center; text-align: center; }
.gw .gd-end { margin-top: 16px; }
.gw .sticky-go { margin-top: 18px; width: 100%; }
.gw-err { min-height: 1.2em; margin: 6px 0 0; color: var(--bad); font-size: .88rem; font-weight: 700; }
.gw-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.gw-back { margin: 0; }
.gw-k12 { margin-top: 4px; }
.gw-k12 > .card { margin-top: 0; }
.gw-k12 .k12-exam-btn { min-height: 72px; font-size: 1.05rem; }
.gw-sub-q { margin: 12px 0 8px; font: 800 1.05rem/1.3 var(--display); }
.gw-chosen { display: flex; align-items: center; gap: 12px; }
.gw-chosen .ico { color: var(--gift-green-ink); flex: none; }
.gift-banner.compact { margin-top: 4px; }
.gw-later-note { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .gw-step { animation: none; } }
.gw-foot .linkbtn { margin: 0; }

/* v99: satır satır fosforlu kalem (hlByLine) */
.hl-lines .hl { padding: .1em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* v100: hediye kartındaki "Bu sınav" etiketi yeşil */
.plan-badge.gift { background: color-mix(in srgb, var(--gift-green-ink) 14%, var(--card)); color: var(--gift-green-ink); }

/* v101: kurulum yolu (hediye ders sayfası) */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 6px; padding: 0; font-size: .86rem; font-weight: 700; }
.crumbs li { color: var(--muted); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); font-weight: 400; }
.crumbs a { color: #0f5e9c; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink); }
/* v101: kartın kenarında dolaşan yükleme çizgisi */
.edge-busy { position: relative; }
.edge-run { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.edge-run rect { fill: none; stroke: #0f5e9c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 84; animation: edgeRun 2.4s linear infinite; }
@keyframes edgeRun { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.k12-wait.on { color: #0f5e9c; animation: waitPulse 1.4s ease-in-out infinite; }
@keyframes waitPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .edge-run rect { animation-duration: 6s; } .k12-wait.on { animation: none; } }
/* v101: kısa hediye bandı */
.gb-line { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 6px 0 0; font-size: .92rem; }
.gb-it + .gb-it::before { content: "|"; margin: 0 10px; color: color-mix(in srgb, var(--ink) 30%, transparent); }
.gb-k { color: var(--muted); }
.gb-it b { overflow-wrap: anywhere; }
.sec-intro { color: var(--muted); }
.sec-intro .gift-owned { margin-right: 6px; }

/* v102: konu kartı: yükleme çizgisi bilgi kutusunda, gelen kazanım yeşil kalemle, ipuçları kutuda, çalışma seçenekleri düğme */
.notice.edge-busy { position: relative; }
.hlg { background-image: linear-gradient(104deg, rgba(23,175,80,0) .5%, rgba(23,175,80,.32) 2%, rgba(23,175,80,.24) 50%, rgba(23,175,80,.32) 97%, rgba(23,175,80,0) 99%);
  background-repeat: no-repeat; background-size: 100% 100%; padding: .05em .15em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hlg.run { background-size: 0% 100%; animation: hl 1.1s .15s ease forwards; }
.k12-prep-list li.ready strong { color: inherit; }
.k12-tips { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft, var(--card)); font-size: .86rem; color: var(--ink); }
.k12-tips b { display: block; margin-bottom: 4px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #0f5e9c; }
.k12-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.4; }
.k12-modes.btns { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; }
.k12-modes.btns .k12-mode { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: #e8f1f9; color: #0f5e9c; text-decoration: none; }
.k12-modes.btns .k12-mode .ico { width: 24px; height: 24px; flex: none; color: #0f5e9c; }
.k12-modes.btns .k12-mode b { font-size: 1rem; }
.k12-modes.btns .k12-mode span { display: none; }
.k12-modes.btns .k12-mode:hover { background: #d9e8f5; transform: none; box-shadow: none; }
@media (max-width: 600px) { .k12-modes.btns { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hlg.run { animation: none; background-size: 100% 100%; } }

/* v103: "Sonra belirleyeceğim" takvimin altında bağlantı; "Senaryoyu değiştir" kazanım kutusunun sağ üstünde */
.gw .gw-later { display: inline-block; width: auto; margin: 10px 0 0; padding: 4px 0; font-weight: 700; color: #0f5e9c; text-align: left; }
.gw .gw-later.on { text-decoration: none; }
.k12-prep-head { align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.k12-prep-head .btn.ghost.small { min-height: 32px; padding: 4px 10px; margin: 0; color: #0f5e9c; }

/* v104: Hediyem: dersler bitince alttaki bölüm; tablo paneli */
.tail-in { animation: restIn .35s ease both; }
@media (prefers-reduced-motion: reduce) { .tail-in { animation: none; } }
.k12-show { font-weight: 800; color: #0f5e9c; text-decoration: underline; padding: 0; }
.k12-table { margin: 0 0 18px; }
.k12-table figcaption { display: grid; gap: 2px; margin-bottom: 10px; }
.k12-table figcaption b { font: 800 1.05rem/1.25 var(--display); }
.k12-table figcaption span { font-size: .85rem; color: var(--muted); }
.k12-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.k12-table table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.k12-table th, .k12-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.k12-table th { background: var(--bg-soft, var(--card)); font-weight: 800; white-space: nowrap; }
.k12-table td b { display: block; font-size: .82rem; }
.k12-table td span { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.k12-table td.n, .k12-table th:not(:first-child) { text-align: center; width: 42px; font-variant-numeric: tabular-nums; }
.k12-table tfoot td { font-weight: 800; border-bottom: 0; }
.k12-upload { margin: 4px 0 0; color: var(--ink); }

/* v105: ilerleme: etiket üstte, girilen bilgi altta */
.gw-prog li > * { gap: 5px; }
.gw-prog .gw-lab { font-size: .8rem; font-weight: 700; }
.gw-prog .gw-val { min-height: 1.2em; font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-prog li.done .gw-lab { color: #0f5e9c; }
/* v105: yazılı sekmeleri */
.k12-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; border-bottom: 2px solid var(--line); }
.k12-tab { flex: 1 1 0; min-width: 130px; padding: 12px 10px; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0;
  background: none; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; }
.k12-tab:hover { color: #0f5e9c; background: #e8f1f9; }
.k12-tab.on { color: #0f5e9c; border-bottom-color: #0f5e9c; background: #e8f1f9; }
/* v105: bildirimler */
.notif-btn { position: relative; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 2px var(--card); }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.notif-list p { margin: 0 0 6px; }
.notif-list a { font-weight: 700; color: var(--primary); }

/* v107: dilek cümlesi hediye kutusunun sağ altında; Ders Seç'te "Hediye dersime geçelim" */
.gift-welcome { position: relative; }
.gift-welcome .gw-wish { position: absolute; right: 14px; bottom: 8px; margin: 0; font-size: .84rem; color: var(--muted); opacity: 0; transition: opacity .4s ease; }
.gift-welcome .gw-wish.on { opacity: 1; }   /* v113: ders seçilince */
.gift-welcome:has(.gw-wish) { padding-bottom: 32px; }
.only-gift { margin: 12px 0 0; font-weight: 700; }
.only-gift a { color: #0f5e9c; }
@media (max-width: 420px) { .gift-welcome .gw-wish { right: 10px; left: 10px; text-align: right; } }

/* v108: hediye ders başlığında paket ikonu; "Hediye dersime geçelim" tamamı bağlantı */
.gift-title { display: inline-flex; align-items: center; gap: 10px; }
.gift-title .gift-mini { flex: none; }

/* v109: konu satırı: "n soru" ayrı sütun, metin kodun altından sürer; hazırlık kutusunda dönen ipuçları */
.k12-plan li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.k12-plan li > .chip { justify-self: start; }
.k12-prep-list li { display: grid; }
.k12-rot .rot-t { display: block; transition: opacity .25s ease, transform .25s ease; }
.k12-rot .rot-t.out { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .k12-rot .rot-t { transition: none; } }

/* v110: başlıkta "sil"; ülke geneli bilgi simgesi; kurulum yolu telefonda tek satır */
.del-sup { margin-left: 6px; vertical-align: super; font-size: .8rem; font-family: var(--font); font-weight: 700; line-height: 0; }
.del-sup .linkbtn { color: var(--bad); padding: 0; min-height: 0; font-size: inherit; text-decoration: none; }
.del-sup .linkbtn:hover { text-decoration: underline; }
.k12-h2 { display: flex; align-items: center; gap: 6px; }
.k12-info { width: 34px; height: 34px; min-height: 0; color: #0f5e9c; }
.k12-info-row { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; }
@media (max-width: 600px) {
  .crumbs ol { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: clamp(.66rem, 3.05vw, .84rem); }
  .crumbs ol::-webkit-scrollbar { display: none; }
  .crumbs li + li::before { margin: 0 4px; }
}

@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
/* v111: telefonda üst çubuk taşmasın (hediye + ara + tema + bildirim + hesap); taşınca sayfa genişliyor, sabit düğme ekran dışına kayıyordu */
@media (max-width: 480px) {
  .topbar .in { gap: 2px; }
  .topbar .iconbtn { min-width: 44px; padding: 8px 4px; }   /* v136 (B17): 44 px dokunma alanı; ad gerekirse kısalır */
  .topbar .brand { margin-right: 6px; }
}
/* v111: sabit düğmenin ataları telefonda kaydırma (transform) animasyonu almaz; yoksa düğme ekrana değil o kutuya sabitlenir */
@media (max-width: 760px) {
  .onb .gift-rest.in { animation-name: fadeOnly; }
}

/* v116: telefonda kaydırarak geri/ileri: ekranın kenarında beliren ok (çekildikçe gelir, yeterince çekilince dolar) */
.swipe-hint { position: fixed; top: 46%; z-index: 80; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card, #fff); color: var(--primary); border: 1.5px solid var(--primary); box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .35);
  opacity: calc(.25 + var(--k, 0) * .75); pointer-events: none; transition: background .15s, color .15s; }
.swipe-hint.left { left: 8px; transform: translateX(calc(-64px + var(--k, 0) * 64px)); }
.swipe-hint.right { right: 8px; transform: translateX(calc(64px - var(--k, 0) * 64px)); }
.swipe-hint.ready { background: var(--primary); color: #fff; }
.swipe-hint.go { animation: swipeGo .26s ease-out forwards; }
@keyframes swipeGo { to { opacity: 0; scale: 1.25; } }

/* v117: kurulum sekmeleri (Bilgilerim … Ödeme planı · Ödemelerim · Derslerim) üst çubuğun altında sabit; telefonda tek satır, yana kayar */
.onb-tabs { position: sticky; top: var(--topbar-h, 58px); z-index: 15; background: var(--paper); margin: -6px -16px 10px; padding: 6px 16px 2px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid transparent; }
.onb-tabs::-webkit-scrollbar { display: none; }
.onb-tabs .onb-tab, .onb-tabs .onb-sep { flex: none; }
.onb-tabs { box-shadow: 0 8px 10px -10px rgba(0, 0, 0, .18); }
.pay-card .pay-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pay-card .pay-top b { font: 800 1.15rem/1.2 var(--display); }
.pay-status { font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--hl-soft, #fff4c2); color: #6b5300; }
.pay-card .plan-price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 4px; }
.pay-card .plan-price b { font: 800 1.8rem/1 var(--display); }
.pay-card .linkbtn { margin-top: 8px; padding: 0; }
.onb-navslot { display: contents; }

/* v118: kurulum sekmeleri: etkin sekme net mavi, diğerleri gri ve silik; alt çizgi sekmeden sekmeye kayar, dolu kısmı yumuşakça uzar */
.onb-tabs { position: sticky; }
.onb-tab { transition: color .35s ease, opacity .35s ease; }
.onb-tab.on { color: var(--primary); }
.onb-tab.on::after { content: none; }
a.onb-tab, a.onb-tab.done { color: var(--muted); }   /* v136 (B17): saydamlık kontrastı 2,5:1'e düşürüyordu */
a.onb-tab:hover { opacity: 1; text-decoration: none; }
.onb-sep { opacity: .7; }
.onb-ind { position: absolute; bottom: 2px; left: 0; width: 0; height: 3px; border-radius: 3px; background: var(--line); pointer-events: none;
  transition: left .45s cubic-bezier(.22, .61, .36, 1), width .45s cubic-bezier(.22, .61, .36, 1); }
.onb-ind i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--primary); transition: width .5s cubic-bezier(.22, .61, .36, 1); }
/* içerik: ileri gidişte sağdan, geri gidişte soldan kayarak gelir (left ile: içerideki sabit düğme yerinde kalır) */
.onb-in-r, .onb-in-l { position: relative; animation: onbInR .4s cubic-bezier(.22, .61, .36, 1) both; }
.onb-in-l { animation-name: onbInL; }
@keyframes onbInR { from { opacity: 0; left: 36px; } to { opacity: 1; left: 0; } }
@keyframes onbInL { from { opacity: 0; left: -36px; } to { opacity: 1; left: 0; } }
@media (prefers-reduced-motion: reduce) { .onb-ind, .onb-ind i, .onb-tab { transition: none; } .onb-in-r, .onb-in-l { animation: none; } }
.grade-grid { margin-top: 14px; }
/* v118: kayarak gelen içerik yatay kaydırma çubuğu açmasın (sticky bozulmaz). v123: geniş ekranda Ödeme planı main.wrap'tan taşar,
   orada kırpma body'de; dar ekranda (plan alanı taşmaz) main.wrap'ta */
@media (max-width: 600px) { main.wrap { overflow-x: clip; } }
@media (min-width: 601px) { body { overflow-x: clip; } }

/* v119: giriş alanlarında solda simge */
.input-ico { position: relative; }
.input-ico > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-ico > .text { padding-left: 44px; }
.input-ico:focus-within > .ico { color: var(--primary); }

/* v120: kampanya koşulları bağlantısı: küçük ve gri (reklam gibi öne çıkmaz) */
.terms-row { margin: 2px 0 8px; font-size: .78rem; text-align: right; }
.plan-card .terms-row { margin-top: 10px; text-align: left; }
a.terms-link { color: var(--muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 2px; }
a.terms-link:hover { color: var(--ink); }


/* ===== v124 ===== */
/* v124: adım çipleri (✓ 11 Kasım · ✓ e-posta · ③ Konular) */
.gw-prog { display: flex; gap: 6px; margin: 4px 0 18px; padding: 0; list-style: none; }
.gw-prog li { flex: 0 1 auto; min-width: 0; }
.gw-prog li:first-child, .gw-prog li:last-child { flex: none; }   /* tarih ve o anki adım kısalmaz; uzun e-posta kısalır */
.gw-prog li i { display: none; }
.gw-prog li > * { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; max-width: 100%; padding: 5px 11px 5px 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 700 .8rem/1.2 var(--font); color: var(--muted); white-space: nowrap;
  transition: background .3s, border-color .3s, color .3s; }
.gw-dot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font: 800 .7rem/1 var(--font); }
.gw-prog .gw-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: inherit; font-weight: 700; color: inherit; }
.gw-prog .gw-lab.val { font-weight: 600; color: var(--ink); }
.gw-prog li.done > * { color: var(--ink); }
.gw-prog li.done .gw-dot { background: #e3f3e8; color: #17803d; }
.gw-prog li.done button { cursor: pointer; }
.gw-prog li.done button:hover { border-color: var(--primary); }
.gw-prog li.on > * { border-color: var(--primary); background: #e8f1f9; color: var(--primary); }
.gw-prog li.on .gw-dot { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .gw-prog li.on > * { background: color-mix(in srgb, var(--primary) 18%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gw-prog li.on > * { background: color-mix(in srgb, var(--primary) 18%, transparent); }
  :root:not([data-theme="light"]) .gw-prog li.done .gw-dot { background: color-mix(in srgb, #17803d 25%, transparent); color: #6fdc96; } }
:root[data-theme="dark"] .gw-prog li.done .gw-dot { background: color-mix(in srgb, #17803d 25%, transparent); color: #6fdc96; }
/* "tabloyu yükledik" sorunun altında */
.k12-loaded { margin: -4px 0 12px; }
/* yazılı seçimi: anlaşılır sekme (segment) */
.k12-tabs-lab { margin: 2px 0 8px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.k12-tabs.seg { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border: 0; border-radius: 14px; background: var(--surface-2); }
.k12-tabs.seg .k12-tab { flex: 1; margin: 0; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--muted);
  font: 700 .95rem/1.2 var(--font); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.k12-tabs.seg .k12-tab:hover { color: var(--ink); }
.k12-tabs.seg .k12-tab.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px rgba(0,0,0,.18); }
.k12-tabs.seg .k12-tab.on::after, .k12-tabs.seg .k12-tab::after { content: none; }
.k12-tabs.seg .k12-tab:hover:not(.on) { background: transparent; }
.k12-loaded .k12-info { vertical-align: middle; min-width: 0; padding: 2px; margin-left: 2px; color: var(--primary); }
.k12-loaded .k12-info .ico { width: 18px; height: 18px; }
.gw-prog li.on span.gw-lab { color: var(--primary); }
.gw-prog li.done button, .gw-prog li.done .gw-lab { color: var(--ink); }
.gw-prog li.done button:hover .gw-lab { text-decoration: underline; }

/* v125: senaryo ayrıntısı paneli */
.k12-sc-sum { display: flex; gap: 6px; margin: 0 0 8px; }
.k12-sc-panel .panel-foot .btn.primary { flex: 1; }
.k12-sc-hint { margin: 10px 0 0; text-align: center; }

/* ===== v126 ===== */
/* senaryo paneli: solda Kapat, sağda Seç (tek satır, yarım yarım) */
.k12-sc-panel .panel-foot { grid-template-columns: 1fr 1fr; }
.k12-sc-panel .panel-foot .btn { min-height: 48px; }
/* ders başlığı: ⓘ | sil */
.title-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; font: 700 .85rem/1 var(--font); }
.title-tools .k12-info { min-width: 0; min-height: 0; padding: 2px; color: var(--primary); }
.title-tools .tt-sep { color: var(--muted); opacity: .6; font-weight: 400; }
.title-tools .tt-del { color: var(--bad); position: relative; font-weight: 700; font-size: .85rem; padding: 0; }
/* kalan gün: renkli */
.chip.days.d-blue { background: #e8f1f9; color: #0f5e9c; }
.chip.days.d-yellow { background: #ffe45c; color: #1d1b26; }
.chip.days.d-orange { background: #ffb15c; color: #3a2200; }
.chip.days.d-red { background: #c93a33; color: #fff; }   /* v136 (B17): beyaz yazı 5,2:1 */
/* senaryo başlığı + değiştir en sağda */
.k12-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.k12-head .k12-h2 { margin: 0; flex: 1; min-width: 0; }
.k12-h2-sub { font: 600 .9rem var(--font); color: var(--muted); }
.k12-head .k12-change { flex: none; font-size: .88rem; font-weight: 700; }
/* kazanım satırları: her biri ayrı ve hizalı; yeşil boya yok */
.k12-prep-list { list-style: none; margin: 0; padding: 0; }
.k12-prep-list li.kp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.k12-prep-list li.kp-row:first-child { border-top: 0; }
.k12-prep-list li.kp-row .chip { justify-self: start; }
.k12-prep-list li.kp-row .kp-body { line-height: 1.45; }
.k12-prep-list li.kp-row.ready .kp-body strong::after { content: " ✓"; color: #17803d; }

/* v127: senaryo ayrıntısı kutuların altında (aynı sayfada) */
.k12-sc-detail:empty { display: none; }
.k12-sc-in { position: relative; margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--primary); border-radius: 14px; background: color-mix(in srgb, var(--primary) 5%, var(--card));
  animation: scIn .3s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes scIn { from { opacity: 0; top: -6px; } to { opacity: 1; top: 0; } }   /* v129: transform değil (sabit düğme kaymasın) */
.k12-sc-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.k12-sc-top b { font: 800 1.05rem var(--display); }
.k12-sc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.k12-sc-btns .btn { min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .k12-sc-in { animation: none; } }
.k12-sc-go { width: 100%; margin-top: 12px; }   /* v129: geniş ekranda ayrıntının altında; telefonda .sticky-go ile altta sabit */

/* v130: senaryolar sekme (S1 … S5) */
.sc-tabs { margin-bottom: 4px; }
.sc-tabs .k12-tab { min-width: 0; padding: 10px 4px; white-space: nowrap; font-weight: 800; }

/* ===== v131 ===== */
/* seçili senaryo kartı */
.k12-cur-card { padding: 4px 14px 14px; }
.k12-cur-card .k12-pick { margin-top: 0 !important; border: 0; padding: 0; background: none; box-shadow: none; }
.k12-cur-st { margin: 0 0 4px; }
/* soru sayısı çipi: yükleme çubuğu gibi dolar */
.chip.fill { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-2); }
.chip.fill > i { position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; background: #cfe3f5; }
.chip.fill > span { position: relative; }
.chip.fill.work > i { animation: chipFill 180s cubic-bezier(.1, .7, .3, 1) forwards; }
.chip.fill.done { background: #0f5e9c; color: #fff; }
.chip.fill.done > i { width: 100%; background: #0f5e9c; }
.chip.fill.done > span::after { content: " ✓"; }
@keyframes chipFill { 0% { width: 6%; } 12% { width: 45%; } 40% { width: 70%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .chip.fill.work > i { animation: none; width: 50%; } }
.k12-cur .k12-prep-list li.kp-row.ready .kp-body strong::after { content: none; }
.k12-cur .k12-prep-list li.kp-row { grid-template-columns: 82px minmax(0, 1fr); }
/* çalışma seçenekleri: konular bitince altta; telefonda "Devam et" gibi sabit */
.k12-modes-box.sticky .k12-modes.btns { margin-top: 12px; }
@media (max-width: 760px) {
  .k12-modes-box.sticky { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 36; }
  body:has(.tabbar) .k12-modes-box.sticky { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .k12-modes-box.sticky .k12-modes.btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .k12-modes-box.sticky .k12-mode { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 4px; text-align: center;
    background: #0f5e9c !important; color: #fff !important; box-shadow: 0 10px 24px -10px rgba(15, 94, 156, .6); }
  .k12-modes-box.sticky .k12-mode .ico { width: 20px; height: 20px; color: #fff !important; }
  .k12-modes-box.sticky .k12-mode b { font-size: .82rem; line-height: 1.15; }
  body:has(.k12-modes-box.sticky) main.wrap { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  body:has(.k12-modes-box.sticky) .note-fab { bottom: calc(176px + env(safe-area-inset-bottom)); }
  body:has(.k12-pick.previewing) .k12-modes-box.sticky { display: none; }   /* başka senaryo önizlenirken "Devam et" görünür */
}

/* v134 Ödeme planı: hediye kartı yeşil ve öne çıkan, "Derse başla" dolu birincil düğme; paketler kompakt,
   ortak özellikler tek listede; paket düğmeleri tek stil (çerçeveli), önerilen paket dolu birincil. */
.plan-card.gift { --gift-ink: color-mix(in srgb, var(--ok) 72%, var(--ink));
  border: 1.5px solid color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok-soft) 70%, var(--card)); }
.plan-card.gift .plan-price b { color: var(--gift-ink); }
.plan-badge.gift, .plan-card.gift .plan-badge.gift { background: color-mix(in srgb, var(--ok) 16%, var(--card)); color: var(--gift-ink); }
.plan-card.gift .plan-sub { min-height: 0; }
.plan-gift-note { margin: 6px 0 0; font-size: .84rem; color: var(--muted); }
.plan-card.gift .plan-cta.go { margin: 14px 0 4px; padding: 14px 16px; font-size: 1.05rem; border-radius: 14px;
  background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px var(--primary-glow); }
.plan-card.gift .plan-cta.go:hover { background: var(--primary-hover); }
.plan-card.gift .plan-cta .proc-frame rect { stroke: var(--hl); }
.plan-card.gift .terms-row { margin: 8px 0 0; }
@media (min-width: 761px) {   /* geniş ekranda hediye kartı yatay: bilgiler solda, "Derse başla" sağda */
  .plan-card.gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); column-gap: 28px;
    grid-template-areas: "top cta" "price cta" "sub cta" "note terms"; }
  .plan-card.gift .plan-top { grid-area: top; } .plan-card.gift .plan-price { grid-area: price; }
  .plan-card.gift .plan-sub { grid-area: sub; } .plan-card.gift .plan-gift-note { grid-area: note; }
  .plan-card.gift .plan-top .plan-badge { margin-left: 8px; } .plan-card.gift .plan-top { justify-content: flex-start; }
  .plan-card.gift .plan-cta.go { grid-area: cta; align-self: end; margin: 0; }
  .plan-card.gift .terms-row { grid-area: terms; text-align: center; align-self: end; }
}

.plan-section { margin: 22px 0 10px; font: 800 1.15rem/1.3 var(--display); }
.plan-grid.plan-compact { align-items: stretch; }
.plan-compact .plan-card { padding: 16px; }
.plan-compact .plan-sub { min-height: 0; color: var(--muted); }
.plan-compact .plan-cta, .plan-compact .plan-card .plan-cta { margin: 14px 0 0; margin-top: auto; padding: 12px; border-radius: 14px;
  background: var(--card); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.plan-compact .plan-card .plan-sub + .plan-cta { margin-top: 14px; }
.plan-compact .plan-card .plan-cta:hover { background: var(--primary-soft); }
.plan-compact .plan-card.best .plan-cta { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px var(--primary-glow); }
.plan-compact .plan-card.best .plan-cta:hover { background: var(--primary-hover); }
.plan-compact .plan-card.chosen .plan-cta { background: var(--ok-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ok); }
.plan-compact .plan-card .plan-cta .proc-frame rect { stroke: var(--primary); }
.plan-compact .plan-card.best .plan-cta .proc-frame rect { stroke: var(--hl); }
@media (max-width: 760px) {   /* telefonda kart: üstte ad + rozet, altında kapsam solda / fiyat sağda, en altta düğme */
  .plan-compact .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    grid-template-areas: "top top" "sub price" "cta cta"; }
  .plan-compact .plan-top { grid-area: top; }
  .plan-compact .plan-price { grid-area: price; margin-top: 8px; align-self: start; }
  .plan-compact .plan-price b { font-size: 1.7rem; }
  .plan-compact .plan-sub { grid-area: sub; margin-top: 8px; align-self: center; }
  .plan-compact .plan-card .plan-cta, .plan-compact .plan-card .plan-sub + .plan-cta { grid-area: cta; margin-top: 12px; }
}

.plan-shared { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--drop-line); border-radius: 18px; background: var(--card); }
.plan-shared h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 800; }
.plan-shared .plan-feats { margin-top: 6px; }
@media (min-width: 761px) { .plan-shared .plan-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }

/* =====================================================================================================================
   v135 TASARIM KATMANI — tek kaynaktan bileşenler. Eski sürümlerin katman katman eklenmiş kuralları üzerine yazılır;
   renkler yalnız değişkenlerden gelir (açık/koyu tema kendiliğinden). Yeni ekranlar yalnız bu bileşenleri kullanır.
   ===================================================================================================================== */
:root {
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(29, 27, 38, .05);
  --sh-2: 0 1px 2px rgba(29, 27, 38, .04), 0 6px 20px rgba(29, 27, 38, .06);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ok-ink: color-mix(in srgb, var(--ok) 72%, var(--ink));
  --warn: #c2770a; --warn-soft: #fdf1dc; --warn-ink2: #8a4b06;
  --info-ink: var(--primary);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #f0b04a; --warn-soft: #3a2a12; --warn-ink2: #f6c97a;
  --sh-1: none; --sh-2: 0 1px 0 rgba(255, 255, 255, .03); } }
:root[data-theme="dark"] { --warn: #f0b04a; --warn-soft: #3a2a12; --warn-ink2: #f6c97a; --sh-1: none; --sh-2: 0 1px 0 rgba(255, 255, 255, .03); }

/* sayfa geçişi: içerik yumuşakça gelir */
main.wrap { animation: page-in .24s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* odak halkası: klavyeyle gezen herkes nerede olduğunu görsün */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 70%, transparent); outline-offset: 2px; }

/* düğmeler: tek dil */
.btn { border-radius: var(--r-md); transition: transform .12s var(--ease), background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.btn .ico { flex: none; }
.btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px var(--primary-glow); }
@media (hover: hover) { .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 10px 22px var(--primary-glow); } }
.btn.secondary { background: var(--card); border: 1.5px solid var(--primary); color: var(--primary); }
.btn.secondary:hover { background: var(--primary-soft); }
.btn[disabled], .btn:disabled { opacity: 1; background: var(--line); border-color: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn.study { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-family: inherit; letter-spacing: 0; }
.btn.study:hover { background: var(--primary-hover); }
.spin.tiny { width: 12px; height: 12px; border-width: 2px; }

/* etiket: küçük durum/bilgi işareti (çip yerine; düğmeye benzemez) */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.35;
  background: color-mix(in srgb, var(--line) 70%, var(--card)); color: color-mix(in srgb, var(--ink) 80%, var(--muted)); white-space: nowrap; }
.tag .ico { width: 14px; height: 14px; }
.tag.t-info { background: var(--primary-soft); color: var(--info-ink); }
.tag.t-ok { background: var(--ok-soft); color: var(--ok-ink); }
.tag.t-warn { background: var(--warn-soft); color: var(--warn-ink2); }
.tag.t-bad { background: var(--bad-soft); color: var(--bad); }
.tag.t-muted { background: transparent; color: var(--muted); padding-left: 0; padding-right: 0; }

/* bölüm başlığı: başlık solda, kısa açıklama sağda */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.sec-head h2 { margin: 0; font-size: 1.12rem; }
.sec-meta { font-size: .84rem; color: var(--muted); }

/* kartlar ve gün çipleri: aynı ölçek her yerde */
.card { border-radius: var(--r-lg); }
.chip.days { font-weight: 800; }
.chip.days.d-blue { background: var(--primary-soft); color: var(--primary); }
.chip.days.d-yellow { background: var(--hl); color: #1d1b26; }
.chip.days.d-orange { background: #ffcf8a; color: #4a2a00; }
.chip.days.d-red { background: var(--bad); color: #fff; }

/* seçenekler menüsü (sağdan / telefonda alttan açılan panel) */
.menu-list { display: grid; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: 0; border-radius: var(--r-md); background: transparent;
  font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.menu-item .ico { color: var(--muted); }
.menu-item:hover { background: var(--hover); }
.menu-item.danger, .menu-item.danger .ico { color: var(--bad); }

/* ---------------------------------------------------------------- ders sayfası (ortaokul/lise) */
.cx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; }
.cx-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.cx-title h1 { margin: 0; }
.cx-more { color: var(--ink); margin-right: -8px; }
.cx-exam, .cx-gift, .cx-report { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .95rem; }
.cx-exam .ico { color: var(--primary); }
.cx-exam span { color: var(--muted); }
.cx-gift { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.cx-report { color: var(--muted); font-size: .88rem; margin: 12px 2px 0; flex-wrap: wrap; }
.cx-report .ico { color: var(--ok); }

.nx { margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--primary); color: var(--primary-ink);
  box-shadow: 0 12px 30px var(--primary-glow); position: relative; overflow: hidden; }
.nx::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent); pointer-events: none; }
.nx-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.nx-title { margin: 6px 0 4px; font-size: 1.42rem; line-height: 1.22; color: inherit; }
.nx-sub { margin: 0 0 14px; opacity: .9; font-size: .95rem; }
.nx-why { margin: 12px 0 0; font-size: .86rem; opacity: .85; }
.nx .btn.primary.nx-cta { background: var(--hl); border-color: var(--hl); color: #1d1b26; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); position: relative; z-index: 1; }
.nx .btn.primary.nx-cta:hover { background: #ffdf3d; }
.nx-alt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); position: relative; z-index: 1; }
.nx-alt-a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 12px; color: inherit; text-decoration: none;
  font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .1); transition: background .15s ease; }
.nx-alt-a:hover { background: rgba(255, 255, 255, .18); }
.nx-wait { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.nx-wait .nx-kicker { color: var(--primary); opacity: 1; }
.nx-wait .nx-sub { color: var(--muted); opacity: 1; }
.nx-meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.nx-meter i { display: block; height: 100%; border-radius: 99px; background: var(--primary); transition: width .6s var(--ease);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
:root[data-theme="dark"] .nx, :root[data-theme="dark"] .nx-alt-a { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx:not(.nx-wait) { background: #154a78; color: #fff; } :root:not([data-theme="light"]) .nx-alt-a { color: #fff; } }
:root[data-theme="dark"] .nx:not(.nx-wait) { background: #154a78; }

.cx-ask { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.cx-ask > .ico { color: var(--warn-ink2); margin-top: 2px; flex: none; }
.cx-ask p { margin: 2px 0 10px; }
.cx-ask-form { display: flex; gap: 8px; }
.cx-ask-form input { flex: 1; min-width: 0; }
.cx-ask-form .btn { flex: none; }
@media (max-width: 560px) { .cx-ask-form { flex-direction: column; } .cx-ask-form .btn { width: 100%; justify-content: center; } }

.tl2-card { padding: 4px 6px; }
.tl2 { list-style: none; margin: 0; padding: 0; }
.tl2 li + li { border-top: 1px solid var(--line); }
.tl2-row { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background .15s ease; }
a.tl2-row:hover { background: var(--hover); }
.tl2-row > .ico { color: var(--muted); flex: none; }
.tl2-row.off { opacity: .7; }
.tl2-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--st-new); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-new) 25%, transparent); }
.tl2-dot.st-learning { background: var(--st-learning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-learning) 22%, transparent); }
.tl2-dot.st-review { background: var(--st-review); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-review) 22%, transparent); }
.tl2-dot.st-learned, .tl2-dot.st-mock_pass { background: var(--st-learned); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-learned) 22%, transparent); }
.tl2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tl2-title { font-weight: 700; line-height: 1.3; }
.tl2-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tl2-meta .vid-badge { margin-left: 0; vertical-align: middle; flex: 0 0 auto; width: 26px; height: 18px; border-radius: 5px; }
.tl2-meta .vid-badge svg { width: 12px; height: 12px; }

.cx-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-tools .btn { flex: 1 1 160px; }
.cx-scope-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-sc { font-size: .85rem; }
.cx-fix { margin-top: 10px; font-size: .88rem; }

/* tahmini not */
.estimate .est-early { padding: 2px 0 4px; }
.est-early-k { font-weight: 800; }
.est-early p { margin: 4px 0 0; }
.est-gains { margin-top: 14px; }
.est-gains-h { font-size: .88rem; font-weight: 800; margin-bottom: 6px; }
.est-gains ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.est-gains li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.est-gains li a { font-weight: 700; text-decoration: none; color: var(--ink); }
.est-gains li a:hover { color: var(--primary); text-decoration: underline; }
.goal-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------------------------------------------------------------- hediye sihirbazı: odak modu */
body.gw-focus .tabbar, body.gw-focus .toptabs, body.gw-focus .note-fab, body.gw-focus .fab-tip { display: none !important; }
body.gw-focus main.wrap { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.gwz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 14px; }
.gwz-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gwz-title h1 { margin: 0; font-size: 1.35rem; }
.gwz-exit { color: var(--muted); }
/* atlanan adım: tamam görünmez, eklenebilir olduğu belli olur */
.gw-prog li.skip > * { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.gw-prog li.skip .gw-dot { background: var(--warn); color: #fff; font-weight: 900; }
.gw-prog li.skip .gw-lab, .gw-prog li.done.skip .gw-lab { color: var(--warn-ink2); font-weight: 700; }
/* senaryo önizlemesi: kısa ad + küçük resmi kod */
.k12-prep-list li.kp-row { grid-template-columns: 72px minmax(0, 1fr); }
.k12-prep-list .kp-t { display: block; font-weight: 700; }
.k12-prep-list .kp-code { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
/* devre dışı ana düğme: bekleyen işlemle karışmasın (yükleniyor = mavi halka, devre dışı = gri) */
.btn.sticky-go:disabled:not(.btn-busy), .btn.primary:disabled:not(.btn-busy) { background: var(--line); border-color: var(--line); color: var(--muted); box-shadow: none; }
/* ---------------------------------------------------------------- çalışma ekranları */
.vis-chart .lead { stroke: var(--muted); stroke-width: 1; opacity: .55; }
.study-bar.quiet .sb-stats { visibility: hidden; }
.idk-btn { width: 100%; margin-top: 8px; color: var(--muted); font-weight: 700; }
.idk-btn:hover { color: var(--ink); background: var(--hover); }
.q-report { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .82rem; color: var(--muted); }
.q-report:hover { color: var(--ink); }
.feedback .q-report { margin-top: 8px; }
.lesson-card .actions { align-items: stretch; }
.lesson-card .actions .back-btn { flex: 0 0 52px; padding: 0; }
.lesson-card .actions .more-btn { flex: 1 1 0; }
.lesson-card .actions .btn.primary { flex: 1.3 1 0; }
.lesson-card > .more-btn { display: none; }
body.gw-focus .topbar a[href="#/ara"], body.gw-focus .notif-btn, body.gw-focus .gift-btn { display: none; }
.linkbtn.q-report { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 0; margin: 8px 0 0; }
.linkbtn.q-report .ico { display: inline-block; flex: none; }
.gwz-title { flex-wrap: wrap; row-gap: 4px; }
.gwz-exit { margin-right: -10px; flex: none; }
/* yazılıya kadar gün şeridi */
.wk { display: block; margin-top: 14px; text-decoration: none; color: inherit; }
.wk-row { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wk-row::-webkit-scrollbar { display: none; }
.wk-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.wk-w { font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--muted); text-transform: capitalize; }
.wk-n { font: 800 1.15rem/1.1 var(--display); }
.wk-s { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.wk-d.today { border: 2px solid var(--primary); background: var(--primary-soft); }
.wk-d.today .wk-w { color: var(--primary); }
.wk-d.done .wk-s { color: var(--ok-ink); }
.wk-d.exam { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.wk-d.exam .wk-s, .wk-d.exam .wk-w { color: var(--bad); font-weight: 800; }
.wk:hover .wk-d:not(.today) { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.gw-alt { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.gw-cal { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.linkbtn.gw-cal { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; margin: 0; vertical-align: middle; }
.linkbtn.gw-cal .ico, .linkbtn.inline .ico { display: inline-block; flex: none; }

/* =====================================================================================================================
   v136 — veli hazırlık kartı (/veli/…), hatırlatma ayarı, sihirbazda adres onayı, zil tonları
   ===================================================================================================================== */
.vk-body { background: var(--paper); }
.vk { max-width: 720px; margin: 0 auto; padding: 22px 16px 56px; line-height: 1.5; color: var(--ink); }
.vk-brand { display: inline-flex; text-decoration: none; }
.vk-eyebrow { margin: 22px 0 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--warn-ink2); }
.vk-h1 { font: 800 1.65rem/1.2 var(--display); margin: 6px 0 4px; }
.vk-sub { color: var(--muted); margin: 0; }
.vk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.vk-st { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sh-1); }
.vk-sl { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vk-sv { font: 800 1.55rem/1.15 var(--display); margin: 4px 0 2px; }
.vk-ss { font-size: .84rem; color: var(--muted); }
.vk-tip { background: var(--warn-soft); border-radius: var(--r-lg); padding: 14px 16px; margin: 0 0 20px; }
.vk-tip h2 { margin: 0 0 4px; font-size: 1rem; color: var(--warn-ink2); }
.vk-tip p { margin: 0; }
.vk-h2 { font: 800 1.12rem var(--display); margin: 0 0 10px; }
.vk-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.vk-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.vk-row:first-child { border-top: 0; }
.vk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.vk-dot.vk-ok { background: var(--ok); } .vk-dot.vk-mid { background: var(--warn); }
.vk-name { font-weight: 700; }
.vk-q { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.vk-tag.vk-t-ok { background: var(--ok-soft); color: var(--ok-ink); }
.vk-tag.vk-t-mid { background: var(--warn-soft); color: var(--warn-ink2); }
.vk-live { margin: 16px 0 0; font-size: .9rem; color: var(--muted); }
.vk-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.vk-ctl form { margin: 0; }
.vk-note { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok-ink); font-weight: 700; }
.vk-foot { margin-top: 22px; font-size: .82rem; color: var(--muted); }
.vk form .btn.primary { margin-top: 16px; }
@media (max-width: 560px) {
  .vk-stats { grid-template-columns: 1fr 1fr; } .vk-stats .vk-st:last-child { grid-column: 1 / -1; }
  .vk-row { grid-template-columns: auto 1fr auto; } .vk-q { display: none; }
}

.gw-confirm { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; padding: 16px; border-radius: var(--r-lg);
  background: var(--primary-soft); color: var(--info-ink); }
.gw-confirm .ico { flex: none; }
.gw-addr { font-size: 1.08rem; color: var(--ink); word-break: break-all; }

.rm-card { display: grid; gap: 10px; }
.rm-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; min-height: 44px; }
.rm-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.rm-row > span { display: grid; gap: 2px; }
.rm-note { display: flex; gap: 6px; align-items: center; margin: 0; }

.notif-list li.n-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.notif-list li.n-warn p { color: var(--ink); }
.vk-ctl .btn.primary { margin-top: 0; }

/* =====================================================================================================================
   v136 — B17 erişilebilirlik: ölçülmüş kontrast (WCAG AA 4,5:1 küçük metin, 3:1 büyük metin/simge) ve dokunma hedefleri (≥44 px)
   ===================================================================================================================== */
:root { --ok: #137a52; --bad: #c23b2b; --gift-green-ink: #15803d; }   /* açık tema: yeşil 5,3:1 · kırmızı 5,3:1 (beyaz ve yumuşak zeminde ≥4,6) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gift-green-ink: #4ad08a; } }
:root[data-theme="dark"] { --gift-green-ink: #4ad08a; }
.choice.small { min-height: 44px; }
.forgot, .linkbtn.forgot { min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* görünüşü değiştirmeden dokunma alanını büyüt (satır içi bağlantılar, çalışma çubuğu düğmeleri) */
.linkbtn.inline, .sb-btn, .cx-fix { position: relative; }
.linkbtn.inline::after, .sb-btn::after { content: ""; position: absolute; inset: -8px -4px; }
.sheet-x { width: 44px; height: 44px; top: 8px; right: 8px; }
.gw-foot .linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
.gw-prog li > button { position: relative; } .gw-prog li > button::after { content: ""; position: absolute; inset: -7px -2px; }
.title-tools .tt-del::after { content: ""; position: absolute; inset: -12px -10px; }

/* =====================================================================================================================
   v137 — giriş ve kayıt: adım göstergesi, satır içi hata, masaüstünde yan panel, davet kodu bağlantısı
   ===================================================================================================================== */
.auth-steps { list-style: none; display: flex; gap: 6px; margin: 14px 0 6px; padding: 0; counter-reset: none; }
.auth-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.auth-steps li + li::before { content: ""; width: 14px; height: 1.5px; background: var(--line); margin-right: 2px; }
.auth-steps .as-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line);
  font-size: .75rem; font-weight: 800; color: var(--muted); background: var(--card); }
.auth-steps li.on { color: var(--ink); }
.auth-steps li.on .as-n { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.auth-steps li.done .as-n { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-ink, var(--ok)); }
.field-err { margin: 6px 0 0; color: var(--bad); font-size: .9rem; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.field-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--bad); color: #fff; font-size: .72rem; font-weight: 800; }
.field-err[hidden] { display: none; }
.text[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.ref-open { margin: 10px 0 0; font-weight: 700; color: var(--primary); }
.ref-box[hidden] { display: none; }
/* yalnız saydamlık: transform kalıcı olursa kart, içindeki sabit (sticky-go) düğmenin kapsayıcısı olur ve düğme ekranın altından kopar */
.login .card { animation: auth-in .28s var(--ease) backwards; }
@keyframes auth-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .login .card { animation: none; } }
/* yan panel yalnız geniş ekranda; telefonda form tek başına */
.auth-aside { display: none; }
@media (min-width: 960px) {
  .login.with-aside .auth-wrap { max-width: 880px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .login.with-aside .auth-wrap > .card { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; }
  .login.with-aside .auth-foot { grid-column: 1 / -1; }
  .auth-aside { display: block; padding: 32px 32px 28px; border-radius: 0 var(--r-lg) var(--r-lg) 0; color: var(--ink);
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 9%, var(--card)), color-mix(in srgb, var(--hl) 16%, var(--card)));
    border: 1px solid var(--line); border-left: 0; }
  .auth-aside .aa-k { display: inline-block; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800;
    background: color-mix(in srgb, #15803d 12%, var(--card)); color: var(--gift-green-ink); }
  .auth-aside h2 { margin: 0 0 18px; font-size: 1.35rem; line-height: 1.25; }
  .auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .auth-aside li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
  .auth-aside .aa-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--primary);
    border: 1px solid var(--line); }
  .auth-aside li b { display: block; font-size: .98rem; }
  .auth-aside li span span { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
  .auth-aside .aa-foot { margin: 22px 0 0; font-size: .84rem; color: var(--muted); }
}

/* v138 (1): marka adı hiçbir genişlikte kırpılmaz ve gizlenmez. Yer daralınca önce düğme etiketleri, sonra sekme simgeleri,
   sonra tema düğmesi (Hesap menüsünde de var) çekilir; aşırı büyük yazıda (%200) düğmeler alt satıra iner, ad yine tam kalır. */
.topbar .in { flex-wrap: wrap; row-gap: 4px; }
.topbar .brand { flex: none; min-width: auto; overflow: visible; }
.topbar .brand-name { overflow: visible; text-overflow: clip; white-space: nowrap; }
.topbar .tb-act { display: flex; align-items: center; gap: inherit; margin-left: auto; flex: none; }
.topbar .sp { display: none; }
@media (min-width: 900px) {
  .topbar .in { max-width: 1080px; }
  .toptabs { margin-left: 14px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .topbar .iconbtn .lbl { display: none; }
  .toptabs .ti { display: none; }
  .toptabs a { padding: 8px 10px; }
}
@media (max-width: 560px) { .topbar .themebtn { display: none; } }
@media (max-width: 400px) {
  .topbar .in { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 0; }
  .topbar .iconbtn { min-width: 44px; padding: 8px 2px; }
  .topbar .brand { margin-right: 4px; gap: 6px; }
}
@media (max-width: 380px) { .topbar .iconbtn { min-width: 40px; } }   /* v136'daki gibi: 381 px ve üstünde 44 px dokunma alanı */

/* v138 (6): ders kimliği — kalıcı renk tonu + kısa kod. Rozet ad yerine geçmez; ad her zaman yazıyla yanında. Açık/koyu temada AA kontrast. */
:root {
  --t0-ink: #1d4ed8; --t0-bg: #e3ebfd;   /* mavi */
  --t1-ink: #15803d; --t1-bg: #dcf3e3;   /* yeşil */
  --t2-ink: #b4430b; --t2-bg: #fde8d7;   /* turuncu */
  --t3-ink: #7e22ce; --t3-bg: #efe3fc;   /* mor */
  --t4-ink: #0f766e; --t4-bg: #d6f1ee;   /* camgöbeği */
  --t5-ink: #be123c; --t5-bg: #fde3e9;   /* gül */
  --t6-ink: #4d7c0f; --t6-bg: #e8f3d3;   /* zeytin */
  --t7-ink: #8a4b1c; --t7-bg: #f3e6da;   /* kahve */
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t0-ink: #9dbcff; --t0-bg: #1f2a46; --t1-ink: #7ddca0; --t1-bg: #17332a; --t2-ink: #f9b17a; --t2-bg: #3a2717;
    --t3-ink: #d3aefc; --t3-bg: #2e2141; --t4-ink: #6fd8cb; --t4-bg: #133331; --t5-ink: #ff9fb3; --t5-bg: #3c1b25;
    --t6-ink: #b8e07a; --t6-bg: #263215; --t7-ink: #e7bb92; --t7-bg: #34271c;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --t0-ink: #9dbcff; --t0-bg: #1f2a46; --t1-ink: #7ddca0; --t1-bg: #17332a; --t2-ink: #f9b17a; --t2-bg: #3a2717;
    --t3-ink: #d3aefc; --t3-bg: #2e2141; --t4-ink: #6fd8cb; --t4-bg: #133331; --t5-ink: #ff9fb3; --t5-bg: #3c1b25;
    --t6-ink: #b8e07a; --t6-bg: #263215; --t7-ink: #e7bb92; --t7-bg: #34271c;
  }
}
.ctag { --ti: var(--muted); --tb: var(--surface-2, #f1efe8);
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 2.6em; height: 1.55em; padding: 0 .42em; border-radius: 6px;
  font-size: .7rem; font-weight: 800; line-height: 1; letter-spacing: .05em; color: var(--ti); background: var(--tb); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ti) 22%, transparent);
  vertical-align: .12em; font-variant-numeric: tabular-nums; }
.ctag.t0 { --ti: var(--t0-ink); --tb: var(--t0-bg); } .ctag.t1 { --ti: var(--t1-ink); --tb: var(--t1-bg); }
.ctag.t2 { --ti: var(--t2-ink); --tb: var(--t2-bg); } .ctag.t3 { --ti: var(--t3-ink); --tb: var(--t3-bg); }
.ctag.t4 { --ti: var(--t4-ink); --tb: var(--t4-bg); } .ctag.t5 { --ti: var(--t5-ink); --tb: var(--t5-bg); }
.ctag.t6 { --ti: var(--t6-ink); --tb: var(--t6-bg); } .ctag.t7 { --ti: var(--t7-ink); --tb: var(--t7-bg); }
.cname { display: inline-flex; align-items: center; gap: .45em; min-width: 0; max-width: 100%; }
.cname .cn { min-width: 0; }
.small .cname .ctag, .small.cname .ctag { font-size: .66rem; }
h1.cname, h3.cname, .cx-title { gap: .5em; }
h1.cname .ctag, .cx-title > .ctag { font-size: .78rem; height: 1.75em; }
h3.cname .ctag { font-size: .72rem; }
.course::before { background: var(--c, var(--primary)); }

/* v138 (7): "Başlangıç yolun" / "Kurulum bilgilerin" kartı — ilerleme halkası, açılır adımlar, girilen bilgiler ve düzenleme */
.setup-card { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.sc-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; cursor: pointer; min-height: 64px; }
.sc-head:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: var(--r-lg); }
.sc-head:hover { background: var(--hover, rgba(0, 0, 0, .02)); }
.sc-ring { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.sc-ring svg { position: absolute; inset: 0; }
.sc-ring circle { fill: none; stroke-width: 3.5; }
.sc-ring .sc-ring-bg { stroke: var(--line); }
.sc-ring .sc-ring-fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray .5s var(--ease); }
.sc-ring b { font: 800 .74rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.setup-card.complete .sc-ring .sc-ring-fg { stroke: var(--ok); }
.setup-card.complete .sc-ring b { color: var(--ok-ink); }
.sc-hd { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sc-title { font: 800 1.02rem/1.25 var(--display); color: var(--ink); }
.sc-sub { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.sc-tog { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: .84rem; font-weight: 700; color: var(--primary); padding: 8px 4px 8px 8px; min-height: 44px; }
.sc-tog .ico { transition: transform .2s var(--ease); }
.setup-card.open .sc-tog .ico { transform: rotate(180deg); }
.sc-list { list-style: none; margin: 0; padding: 0 12px 10px; border-top: 1px solid var(--line); position: relative; }
.sc-step { position: relative; }
.sc-step + .sc-step { border-top: 1px dashed var(--line); }
.sc-row, .sc-step summary { display: flex; align-items: center; gap: 12px; padding: 10px 2px; min-height: 52px; }
.sc-step summary { cursor: pointer; list-style: none; border-radius: var(--r-sm); }
.sc-step summary::-webkit-details-marker { display: none; }
.sc-step summary:hover { background: var(--hover, rgba(0, 0, 0, .02)); }
.sc-step summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 0; }
.sc-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 .8rem/1 var(--display);
  background: var(--surface-2, #f1efe8); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.sc-step.done .sc-dot { background: var(--ok-soft); color: var(--ok-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 45%, transparent); }
.sc-step.cur .sc-dot { background: var(--primary); color: var(--primary-ink, #fff); box-shadow: 0 0 0 4px var(--primary-soft); }
.sc-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sc-ttl { font-weight: 700; color: var(--ink); line-height: 1.3; }
.sc-val { font-size: .84rem; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-step.done details[open] .sc-val { white-space: normal; }
.sc-step.todo .sc-ttl { color: var(--muted); font-weight: 600; }
.sc-step.cur { background: var(--primary-soft); margin: 0 -12px; padding: 0 12px; }
.sc-step.cur + .sc-step, .sc-step + .sc-step.cur { border-top-color: transparent; }
.sc-step.cur .sc-ttl { font-weight: 800; }
.sc-cta { flex: none; min-height: 40px; }
.sc-chev { flex: none; color: var(--muted); display: grid; place-items: center; width: 32px; height: 32px; transition: transform .2s var(--ease); }
.sc-step details[open] .sc-chev { transform: rotate(180deg); }
.sc-body { margin: 0 0 12px 40px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2, #f6f4ee); display: grid; gap: 10px; }
.sc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.sc-dl dt { color: var(--muted); }
.sc-dl dd { margin: 0; font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.sc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px; border-radius: var(--r-sm); background: var(--card);
  text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sc-item:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.sc-item .sc-it { font-weight: 700; }
.sc-item .chip { flex: none; }
.sc-go { color: var(--muted); display: grid; }
.sc-act { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-act .btn { min-height: 44px; }
@media (max-width: 480px) {
  .sc-body { margin-left: 0; }
  .sc-dl { grid-template-columns: 1fr; gap: 2px; }
  .sc-dl dd { margin-bottom: 6px; }
  .sc-tog-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .sc-tog .ico, .sc-chev, .sc-ring .sc-ring-fg { transition: none; } }

/* v138 (2): ders kartlarında bölüm başlığı. Konu adı küçük bağlam satırı; bölüm adı simgeli büyük başlık ve aile rengindeki bant.
   Aile renkleri ders renklerinden ayrı değişkenlerdir. Varsayılan: B (renk bandı). A ve C yalnız karşılaştırma görselleri için ([data-shv]). */
:root {
  --fam-anla: #1d5fae; --fam-anla-bg: #e6effa;
  --fam-bil: #6b2fb3; --fam-bil-bg: #f0e8fb;
  --fam-uygula: #17733f; --fam-uygula-bg: #e1f3e8;
  --fam-tekrar: #93530a; --fam-tekrar-bg: #fcefd9;
  --fam-alt: #8a5a00; --fam-alt-bg: #fff4c2;
}
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fam-anla: #8fbcf0; --fam-anla-bg: #1b2a3d; --fam-bil: #cdb0f5; --fam-bil-bg: #2a2140; --fam-uygula: #86d9a6; --fam-uygula-bg: #163024;
  --fam-tekrar: #f3c27a; --fam-tekrar-bg: #352712; --fam-alt: #f6d36b; --fam-alt-bg: #33290d; } }
@media screen { :root[data-theme="dark"] {
  --fam-anla: #8fbcf0; --fam-anla-bg: #1b2a3d; --fam-bil: #cdb0f5; --fam-bil-bg: #2a2140; --fam-uygula: #86d9a6; --fam-uygula-bg: #163024;
  --fam-tekrar: #f3c27a; --fam-tekrar-bg: #352712; --fam-alt: #f6d36b; --fam-alt-bg: #33290d; } }
.fam-anla { --fi: var(--fam-anla); --fb: var(--fam-anla-bg); } .fam-bil { --fi: var(--fam-bil); --fb: var(--fam-bil-bg); }
.fam-uygula { --fi: var(--fam-uygula); --fb: var(--fam-uygula-bg); } .fam-tekrar { --fi: var(--fam-tekrar); --fb: var(--fam-tekrar-bg); }
.fam-alt { --fi: var(--fam-alt); --fb: var(--fam-alt-bg); }
.lc-topic { margin: 0 0 10px; font-size: .86rem; font-weight: 700; color: var(--muted); line-height: 1.35; }
.lsec { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.lsec .lsec-t { flex: 1; min-width: 0; }
.lsec-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--fi); }
:root[data-theme="dark"] .lsec-ic { color: #15141b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lsec-ic { color: #15141b; } }
.lsec-t { margin: 0; font: 800 1.32rem/1.2 var(--display); color: var(--ink); letter-spacing: -.01em; }
.lsec-pre { color: var(--fi); font-weight: 800; }
/* B: renk bandı — kartın üst kenarı boyunca açık ton zemin, alt çizgi aile renginde */
.lesson-card .lsec, .lsec-card .lsec { margin: 0 -18px 16px; padding: 12px 18px; background: var(--fb); border-block: 1px solid color-mix(in srgb, var(--fi) 18%, transparent); box-shadow: inset 4px 0 0 var(--fi); }
.lesson-card .lc-topic { margin-bottom: 12px; }
.lsec-card .lsec { margin-top: -18px; border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
.lsec-block { margin-bottom: 16px; }
.lsec-block .lsec { margin-bottom: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--fb); box-shadow: inset 3px 0 0 var(--fi); }
.lsec-block .lsec-t { font-size: 1.05rem; }
.lsec-block .lsec-ic { width: 28px; height: 28px; border-radius: 8px; }
.lsec-sec { margin-top: 14px; }
.lesson-card.alt-mode .lsec { background: var(--fam-alt-bg); }
@media (min-width: 720px) { .lsec-t { font-size: 1.5rem; } .lsec-ic { width: 40px; height: 40px; } .lc-topic { font-size: .92rem; } }
@media (max-width: 480px) { .lesson-card .lsec, .lsec-card .lsec { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .lsec-card .lsec { margin-top: -15px; } }
/* A (karşılaştırma): bant yok, büyük başlık + renkli simge karosu */
[data-shv="a"] .lesson-card .lsec { margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none; }
[data-shv="a"] .lsec-ic { background: var(--fb); color: var(--fi); }
/* C (karşılaştırma): kartın solunda renkli şerit + küçük renkli hap etiket */
[data-shv="c"] .lesson-card { box-shadow: inset 5px 0 0 var(--fi, var(--primary)), var(--shadow); }
[data-shv="c"] .lesson-card .lsec { margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none; }
[data-shv="c"] .lsec-ic { display: none; }
[data-shv="c"] .lsec-t { display: inline-block; font-size: .86rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--fi); background: var(--fb); padding: 8px 12px; border-radius: 99px; }

/* v138 (3): ek bilgi tercihi — iki seçenek, farkı düğmenin içinde */
.ek-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.btn.ek-opt { display: grid; gap: 2px; text-align: left; justify-items: start; justify-content: stretch; align-content: center; padding: 10px 12px; min-height: 56px; white-space: normal; }
.ek-opt .ek-l { font-weight: 800; }
.ek-opt .ek-s { font-size: .8rem; font-weight: 600; opacity: .85; }
@media (max-width: 480px) { .ek-opts { grid-template-columns: 1fr; } }
/* v138 (5): kaynak metni olmayan anlatımda dayanak satırı; belirsiz nokta notu */
.basis-ref { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-size: .86rem; line-height: 1.45; }
.basis-ref .ico { flex: none; margin-top: 2px; color: var(--primary); }
.setup-card + .card, .setup-card + section { margin-top: 14px; }
/* v138: koyu temada mavi "gün kaldı" çipi okunmuyordu (koyu yazı koyu mavi zeminde) */
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.days.d-blue { color: var(--primary); } }
:root[data-theme="dark"] .chip.days.d-blue { color: var(--primary); }

/* v138: yönetim paneli — solda kalıcı menü, geniş düzen, yapılacaklar, kullanıcı tablosu, ayar kısayolları ve kaydetme çubuğu */
main.wrap.adm-wrap { max-width: 1360px; padding-bottom: 64px; }
.adm { display: grid; grid-template-columns: 1fr; gap: 14px; }
.adm-main { min-width: 0; }
.adm-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 4px 16px 8px; border-bottom: 1px solid var(--line); }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav-t { display: none; }
.adm-nav a { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.adm-nav a:hover { background: var(--hover); color: var(--ink); }
.adm-nav a.on { background: var(--primary-soft); color: var(--primary); }
.adm-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .72rem; display: inline-grid; place-items: center; margin-left: auto; }
@media (min-width: 1000px) {
  .adm { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
  .adm-nav { flex-direction: column; position: sticky; top: calc(var(--topbar-h, 58px) + 12px); margin: 0; padding: 0; border: 0; overflow: visible; }
  .adm-nav-t { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 6px; }
  .adm-nav a { width: 100%; box-sizing: border-box; }
}
.adm-head { align-items: center; margin-bottom: 12px; }
.adm-head h1 { margin: 0; }
/* yapılacaklar */
.adm-todo { display: grid; gap: 8px; margin-bottom: 16px; }
.todo { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r-md); padding: 10px 12px; }
.todo.t-bad { border-left-color: var(--bad); } .todo.t-warn { border-left-color: var(--warn); } .todo.t-ok { border-left-color: var(--ok); }
.todo-row { display: flex; align-items: center; gap: 10px; }
.todo-row .btn { flex: none; }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; color: var(--primary); flex: none; }
.t-bad .todo-dot { color: var(--bad); } .t-warn .todo-dot { color: var(--warn); } .t-ok .todo-dot { color: var(--ok); }
.todo-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 0 18px; margin-top: 8px; border-top: 1px dashed var(--line); }
/* kullanıcı tablosu */
.adm-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-search { flex: 1 1 260px; min-width: 0; }
.adm-sort { flex: 0 0 auto; width: auto; }
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.adm-chips .seg { min-height: 36px; }
.adm-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.utable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.utable th, .utable td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.utable thead th { position: sticky; top: 0; background: var(--surface-2); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; z-index: 1; }
.utable tbody th { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 180px; max-width: 240px; font-weight: 400; }
.utable td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.utable tr.urow:hover > * { background: var(--hover); }
.utable tr.urow.open > * { background: var(--primary-soft); }
.urow-name { font-weight: 800; text-align: left; padding: 0; min-height: 0; color: var(--ink); text-decoration: none; }
.urow-name:hover { text-decoration: underline; }
.urow-name::after { content: " ▾"; color: var(--muted); font-weight: 400; }
.urow.open .urow-name::after { content: " ▴"; }
.uchips { display: flex; flex-wrap: wrap; gap: 4px; }
.uchips .chip { font-size: .72rem; padding: 2px 8px; }
.chip.bad-chip { background: var(--bad-soft); color: var(--bad); }
.utable tr.udetail > td { background: var(--surface-2); padding: 12px; }
.utable tr.udetail .ucard { margin: 0; }
/* ayarlar */
.set-jump { position: sticky; top: var(--topbar-h, 58px); z-index: 5; background: var(--paper); margin: 0 0 10px; padding: 8px 0; }
.set-h { scroll-margin-top: calc(var(--topbar-h, 58px) + 64px); margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.set-card > .set-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.set-bar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--warn); box-shadow: var(--sh-2); }
.set-bar[hidden] { display: none; }
.adm-main .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.topbar.admin .in { max-width: 1360px; }
.adm-tools .text { width: auto; margin: 0; }
.adm-tools .adm-search { flex: 1 1 260px; }
.utable .urow-name { display: inline; width: auto; margin: 0; padding: 0; min-height: 0; border: 0; background: none; font-size: inherit; text-align: left; }
.utable tr.urow { cursor: pointer; }
.utable td { white-space: nowrap; }
.utable .urow-name::after { content: none; }
.modal.udrawer .sheet { max-width: 760px; }
.modal.udrawer .ucard { border: 0; box-shadow: none; padding: 4px 0 0; }
.set-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 4px; }
.set-jump .seg { flex: none; min-height: 32px; padding: 4px 10px; font-size: .8rem; }
.adm-sub { display: none; }
@media (min-width: 1000px) {
  .set-jump { display: none; }
  .adm-sub { display: grid; gap: 1px; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 2px solid var(--line); }
  .adm-sub button { all: unset; cursor: pointer; font-size: .84rem; color: var(--muted); padding: 5px 8px; border-radius: 8px; }
  .adm-sub button:hover { background: var(--hover); color: var(--ink); }
  .adm-sub button:focus-visible { outline: 2px solid var(--primary); }
}

/* v139 (1): ders kartında hiyerarşi — konu adı ana başlık (büyük), bölüm adı alt başlık (bantlı, daha küçük) */
.lesson-card .lc-topic { margin: 0 0 12px; font: 800 1.32rem/1.25 var(--display); color: var(--ink); letter-spacing: -.01em; }
.lesson-card .lsec { padding: 8px 18px; }
.lesson-card .lsec-t { font-size: 1.02rem; font-weight: 800; }
.lesson-card .lsec-ic { width: 28px; height: 28px; border-radius: 8px; }
.lesson-card .lsec-ic .ico { width: 16px; height: 16px; }
@media (min-width: 720px) {
  .lesson-card .lc-topic { font-size: 1.55rem; }
  .lesson-card .lsec-t { font-size: 1.08rem; }
  .lesson-card .lsec-ic { width: 30px; height: 30px; }
}
@media (max-width: 480px) { .lesson-card .lsec { padding-left: 15px; padding-right: 15px; } }
/* v139 (3–4): hediye adımlarında açıklama fosforlu; hediyenin bitişi küçük not */
.gw-note { margin: 2px 0 12px; font-size: .86rem; color: var(--muted); }
.gw-hl + .gw-note { margin-top: -10px; }
/* v139 (2): ödeme planında seçilen dersler ve her paketin kapsadıkları */
.pick-sum { margin: 12px 0 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pick-sum-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pick-sum-h a { font-weight: 700; }
.pick-sum-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 720px) { .pick-sum-l { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.pick-sum-l li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.pick-gift { flex: none; display: grid; }
.plan-cover { margin: 8px 0 2px; font-size: .86rem; }
.plan-cover-t { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.plan-cover ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.plan-cover li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-weight: 700; font-size: .8rem; }
.plan-cover li.in { background: var(--ok-soft); color: var(--ok-ink); }
.plan-cover li.out { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.plan-compact .plan-card .plan-cover + .plan-cta { margin-top: 12px; }
@media (max-width: 760px) {
  .plan-compact .plan-card { grid-template-areas: "top top" "sub price" "cover cover" "cta cta"; }
  .plan-compact .plan-cover { grid-area: cover; }
}
.plan-cover { display: block; }

/* v141: derste.online videoları ve Yönetim › Video */
.yt-embed.tall { aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; }
.video-fig.derste figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.vg-list { display: grid; gap: 8px; }
.vg-row { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.vg-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
button.vg-main { display: block; width: 100%; }
.vg-list > button.vg-main { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.vg-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vg-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vg-err { color: var(--bad); }
.modal .sheet.vg-sheet { max-width: 920px; }
.vg-prevs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin: 10px 0; }
.vg-prev { margin: 0; flex: 1 1 320px; min-width: 0; }
.vg-prev.tall { flex: 0 1 240px; }
.vg-prev video { width: 100%; border-radius: 12px; background: #000; display: block; }
.vg-scenes li { margin-bottom: 6px; }
@media (max-width: 560px) { .vg-row { flex-direction: column; align-items: stretch; } .vg-act { justify-content: flex-start; } }

/* v142: üniversite — Ders Seç'te ders adı yazarak ekleme */
.add-course { margin: 6px 0 4px; }
.add-row { display: flex; gap: 8px; }
.add-row .text { flex: 1; min-width: 0; margin: 0; }
.add-row .btn { flex: none; }
.gw-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.gw-drop { margin: 6px 0 12px; }
/* v142: hediye haftasında izlence kapalı etiketi */
.syl-lock { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .74rem; background: var(--warn-soft); color: var(--warn-ink2); }
.syl-note { display: flex; gap: 8px; align-items: flex-start; } .syl-note .ico { flex: none; margin-top: 3px; }

/* v148: videolu konu rozeti — başlığın sağ üstünde küçük kırmızı oynat simgesi */
.vid-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: super; margin-left: 5px;
  width: 20px; height: 14px; border-radius: 4px; background: #e62117; box-shadow: 0 1px 2px rgba(0,0,0,.18); line-height: 0; }
.vid-badge svg { width: 10px; height: 10px; }
.vid-badge.vb-lg { width: 28px; height: 20px; border-radius: 6px; margin-left: 8px; vertical-align: 0.55em; }
.vid-badge.vb-lg svg { width: 14px; height: 14px; }

/* v148: konu başlığında "Videoyu izle" ve üstte açılan video penceresi */
.vid-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: 0.35em; padding: 3px 10px 3px 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink, inherit); font: inherit;
  font-size: .85rem; font-weight: 800; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.vid-cta:hover { border-color: #e62117; color: #c4170f; }
.vid-cta:focus-visible { outline: 3px solid var(--focus, #2f6fed); outline-offset: 2px; }
.vid-cta .vid-badge { margin-left: 0; vertical-align: middle; }
.modal .sheet.vid-sheet { background: #0e0f13; color: #fff; padding: 14px 14px 18px; border-radius: 18px; align-self: center; margin: auto; }
.modal .sheet.vid-sheet.vs-wide { max-width: min(960px, 94vw); }
.modal .sheet.vid-sheet.vs-tall { max-width: min(400px, 94vw); }
.modal .sheet.vid-sheet .sheet-x { color: #fff; }
.vm-title { font-size: 1rem; margin: 0 36px 10px 2px; color: #fff; }
.vm-frame { cursor: default; }
.vm-frame.tall { max-width: none; width: min(100%, calc(78vh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; }

/* ================================================================ v150: konu anlatım sayfası (yeniden tasarım)
   Hiyerarşi: başlık + kısa açıklama → video → Görerek anla (tek kart, sekmeli) → anlatım → örnekler → tekrar → sonraki adım → diğer kaynaklar.
   Kart sayısı az; bölüm başlıkları tek tip (küçük simge + başlık); aralar tutarlı (bölüm arası 28px, kart içi 16px). */
.tp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.tp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tp-crumb { justify-self: start; font-size: .85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.tp-crumb:hover { color: var(--ink); text-decoration: underline; }
.tp-toprow { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tp-title { margin: 0; font: 800 1.7rem/1.18 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.tp-state { margin: 0; }
.tp-title .vid-cta { vertical-align: .3em; font-family: var(--font); }
.tp-lead { font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.tp-lead .lead-line { font-size: 1.08rem; font-weight: 600; margin: 0 0 6px; }
.tp-lead .chunk-list { gap: 4px; }
.tp-lead .chunk-list li { background: none; padding: 2px 0 2px 20px; animation: none; color: var(--ink); }
.tp-lead .chunk-list li::before { left: 4px; top: 11px; width: 7px; height: 7px; box-shadow: none; }
.tp-lead .source-ref { margin-top: 4px; }
.tp-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.tp-study { min-height: 48px; padding: 10px 18px; gap: 10px; }
.tp-study-s { font-family: var(--font); letter-spacing: 0; font-weight: 600; opacity: .75; font-size: .85rem; }
.tp-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -10px 0 -10px; padding: 2px 0; }
.tp-jump::-webkit-scrollbar { display: none; }
.tp-jump-a { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.tp-jump-a:hover { border-color: var(--ink); }
.tp-sec { scroll-margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tp-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 1.25rem/1.2 var(--display); letter-spacing: -.01em; }
.tp-h-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.tp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tp-text { display: grid; gap: 0; padding: 4px 16px; }
.tp-sub { padding: 16px 0; border-top: 1px solid var(--line); }
.tp-sub:first-child { border-top: 0; }
.tp-subh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 1.02rem/1.25 var(--display); color: var(--ink); }
.tp-subh .ico { color: var(--primary); }
.tp-text .chunk-list li { background: none; padding: 3px 0 3px 22px; animation: none; }
.tp-text .chunk-list li::before { left: 5px; top: 12px; width: 8px; height: 8px; box-shadow: none; }
.tp-text .lead-line { font-size: 1rem; }
.tp-text .example { margin-bottom: 10px; }
.tp-text .example:last-child { margin-bottom: 0; }
.tp-text .steplist li:last-child { padding-bottom: 0; }
.tp-review { background: var(--hl-soft); border-color: color-mix(in srgb, var(--hl) 70%, var(--line)); }
.tp-review ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.tp-review .basis-ref, .tp-review .source-ref { margin-bottom: 0; }

/* video: ana içerik — masaüstünde metin sütunundan geniş (en çok 960px), telefonda tam genişlik */
.tp-hero { scroll-margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-inline: calc(50% - min(480px, 50vw - 16px)); }
.tp-stage { border-radius: 18px; overflow: hidden; background: #0e0f13; box-shadow: var(--shadow); }
.tp-stage.tall { padding: 0; display: grid; place-items: center; background: linear-gradient(180deg, #10141d, #1a2233); }
.tp-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.tp-player.tall { width: min(100%, calc(64svh * 9 / 16)); aspect-ratio: 9 / 16; }
.tp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tp-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: radial-gradient(120% 90% at 50% 40%, #233149, #0e0f13); cursor: pointer; display: block; color: #fff; }
.tp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); }
.tp-play-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 60px; border-radius: 18px; background: #e62117; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .15s var(--ease, ease), background .15s; z-index: 1; }
.tp-play-l { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); z-index: 1; font-weight: 800; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); white-space: nowrap; }
.tp-play:hover .tp-play-ic { transform: translate(-50%, -50%) scale(1.06); background: #ff2a1f; }
.tp-play:focus-visible { outline: 4px solid var(--hl); outline-offset: -4px; }
.tp-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; background: #0e0f13; font-weight: 700; font-size: .92rem; pointer-events: none; }
.tp-vcap { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 0 2px; }
.tp-vmeta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.tp-vtitle { font-size: 1rem; }
.tp-vact { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-wait { margin: -8px 0 0; color: var(--muted); font-size: .9rem; display: flex; gap: 8px; align-items: center; }

/* Görerek anla: sekmeli tek kart */
.tp-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; margin: -4px -4px 14px; padding: 4px; }
.tp-tab { flex: none; border: 1px solid var(--line); background: var(--bg, transparent); color: var(--muted); border-radius: 999px; padding: 6px 12px; min-height: 36px;
  font: 700 .86rem/1.2 var(--font); cursor: pointer; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tab[aria-selected="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.tp-tab:focus-visible { outline: 3px solid var(--hl); outline-offset: 2px; }
.tp-vispanel .vis { gap: 8px; }
.tp-vispanel .vis-chart-wrap { max-width: 520px; margin: 0 auto; }
.tp-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tp-figs .fig { margin: 0; }

/* sonraki adım + diğer kaynaklar */
.tp-next { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 16px; border-radius: var(--radius); background: var(--primary-soft); }
.tp-next-t { display: grid; gap: 2px; }
.tp-next-a { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-more { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tp-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; margin: 0; font-weight: 800; cursor: pointer; min-height: 48px; }
.tp-more > summary::-webkit-details-marker { display: none; }
.tp-more > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.tp-more[open] > summary::after { transform: rotate(-135deg); }
.tp-count { font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.tp-more-b { display: grid; gap: 12px; padding: 0 16px 16px; }
.tp-more-a { gap: 8px; flex-wrap: wrap; }

@media (min-width: 720px) {
  .tp-title { font-size: 2.1rem; }
  .tp-card { padding: 20px; }
  .tp-text { padding: 4px 20px; }
  .tp-sub { padding: 18px 0; }
  .tp-vtitle { font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .tp { gap: 24px; }
  .tp-hero { margin-inline: -16px; }
  .tp-stage { border-radius: 0; box-shadow: none; }
  .tp-vcap { padding: 0 16px; }
  .tp-play-ic { width: 72px; height: 52px; }
  .tp-card { padding: 14px; }
  .tp-text { padding: 2px 14px; }
}
@media (prefers-reduced-motion: reduce) { .tp-play-ic { transition: none; } }
/* v153: "Bu cihazı sayma" durumu (hariç tutulmuş cihaz) */
.notice.ok { background: color-mix(in srgb, #22a06b 10%, var(--card)); border-color: color-mix(in srgb, #22a06b 40%, var(--line)); }
/* v154: geri bildirim çöp kutusu */
.fb-del { color: var(--muted); }
.fb-del:hover, .fb-del:focus-visible { color: #c4170f; background: color-mix(in srgb, #e62117 10%, transparent); }

/* v159: tek logo — sarı eğik kare, solda çentik, onay işareti (static/mark.svg). Eski CSS kare + "✓" yazısı yerine her yerde
   aynı vektör: üst çubuk, giriş, rapor/veli/hatırlatma sayfaları. Kare görselin %78'i; boyutlar eskisiyle aynı görünsün diye büyük. */
.brand .dot, .r-brand .dot, .vk-brand .dot {
  width: 33px; height: 33px; background: url("/static/mark.svg?v=159") center / contain no-repeat !important;
  color: transparent !important; font-size: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
.auth-brand .dot { width: 42px; height: 42px; }
@media (max-width: 420px) { .topbar .brand .dot { width: 30px; height: 30px; } }

/* v162: parametreli şekiller (sunucuda çizilir; çizgiler currentColor, vurgu sarı kalem) */
.qfig { margin: 4px 0 12px; color: var(--ink, currentColor); }
.qfig svg.fg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }
.qfig .fg-hl { fill: var(--hl, #ffe45c); }
.qfig text { font-family: inherit; }
.qfig .fg-wrap { margin: 0; } .qfig figcaption { font-size: .85rem; font-weight: 700; margin-bottom: 4px; }
.vis-fig svg.fg { max-width: 380px; }
.qfig .fg-table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
.qfig .fg-table th, .qfig .fg-table td { border: 1px solid var(--line, #ddd); padding: 6px 12px; text-align: center; }
.qfig .fg-table th { background: var(--hover, #f5f3ee); font-weight: 800; }
.qfig .fg-blank { min-width: 64px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127,127,127,.08) 6px 12px); }
.steplist .qfig { margin-top: 8px; }
.solved { border-left: 4px solid var(--ok, #1f9d6b); padding: 2px 0 2px 14px; }
.solved-q { font-weight: 700; }
.solved-a summary { cursor: pointer; font-weight: 700; color: var(--primary, #0f5e9c); min-height: 32px; }
.solved-steps { margin: 8px 0; padding-left: 22px; } .solved-steps li { margin: 4px 0; }
.misc p { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.misc-ic { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; color: #fff; }
.misc-bad .misc-ic { background: var(--bad, #b3261e); } .misc-good .misc-ic { background: #1f7a4d; }
.misc-bad > span:last-child { text-decoration: line-through; text-decoration-color: rgba(179,38,30,.6); }