/* ==========================================================================
   Academy YKS — "Defter & Kırmızı Kalem" tasarım sistemi (v3)
   Açık tema: sıcak kağıt zemin, mürekkep siyahı, kırmızı kalem vurgusu, fosforlu sarı VIP.
   Koyu tema: kara tahta. Harici CSS çatısı yok; CSP ile uyumlu.
   Bölümler: 1 Belirteçler · 2 Temel · 3 Yerleşim · 4 Gezinme · 5 Butonlar · 6 Kartlar
   7 Formlar · 8 Bildirim/Rozet · 9 Deneme kartı · 10 Sayaç · 11 VIP · 12 Tablo
   13 Panel · 14 Ana sayfa · 15 AI · 16 Okuyucu · 17 Yönetim · 18 Hareket · 19 Yardımcılar
   ========================================================================== */

/* 1 — Belirteçler */
:root {
  --paper: #f4efe4;
  --paper-2: #ece5d6;
  --card: #fffdf8;
  --card-2: #f8f4ea;
  --ink: #18160f;
  --ink-2: #39352b;
  --muted: #6b6455;
  --subtle: #958d7c;
  --line: #e2d9c6;
  --line-strong: #cfc4ad;
  --grid: rgba(24, 22, 15, 0.045);
  --red: #e5432a;
  --red-strong: #c5321c;
  --red-soft: #fbe3dc;
  --blue: #2449d8;
  --blue-soft: #e2e8fb;
  --hi: #ffd43b;
  --hi-strong: #f2bb05;
  --hi-soft: #fff3c4;
  --green: #17914f;
  --green-soft: #dcf2e4;
  --danger: #c5321c;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-soft: 0 18px 40px -24px rgba(40, 30, 10, 0.35);
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --container: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131411; --paper-2: #1a1b17; --card: #1c1d19; --card-2: #22231e;
    --ink: #f1ece0; --ink-2: #d9d3c5; --muted: #a9a293; --subtle: #7d776b;
    --line: #2f302a; --line-strong: #44453d; --grid: rgba(241, 236, 224, 0.035);
    --red: #ff6a4d; --red-strong: #d9452b; --red-soft: #3a1f19;
    --blue: #7d9bff; --blue-soft: #1f2640; --hi: #ffd43b; --hi-strong: #ffe066; --hi-soft: #3a3214;
    --green: #4fd18b; --green-soft: #183326; --danger: #ff7a62;
    --shadow-hard: 4px 4px 0 #000; --shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131411; --paper-2: #1a1b17; --card: #1c1d19; --card-2: #22231e;
  --ink: #f1ece0; --ink-2: #d9d3c5; --muted: #a9a293; --subtle: #7d776b;
  --line: #2f302a; --line-strong: #44453d; --grid: rgba(241, 236, 224, 0.035);
  --red: #ff6a4d; --red-strong: #d9452b; --red-soft: #3a1f19;
  --blue: #7d9bff; --blue-soft: #1f2640; --hi: #ffd43b; --hi-strong: #ffe066; --hi-soft: #3a3214;
  --green: #4fd18b; --green-soft: #183326; --danger: #ff7a62;
  --shadow-hard: 4px 4px 0 #000; --shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* 2 — Temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .45em; line-height: 1.1; letter-spacing: -0.025em; font-family: var(--display); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--hi); color: #18160f; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2.4em; height: 2.4em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.sr-only:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 10px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--paper); }
code { font-family: var(--mono); font-size: .84em; background: var(--card-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }

/* 3 — Yerleşim */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.container-sm { max-width: 780px; }
.container-xs { max-width: 470px; }
.main { padding: 104px 0 80px; min-height: calc(100vh - 140px); }
.section { margin-top: 64px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-kicker { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.page-head { margin-bottom: 30px; }
.page-head p { color: var(--muted); margin: 0; max-width: 640px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .main { padding-top: 90px; }
  .section { margin-top: 48px; }
}

/* 4 — Gezinme */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 10px 0; transition: padding .25s var(--ease); }
.nav-inner {
  height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line); border-radius: 18px; padding: 0 10px 0 16px;
  box-shadow: 0 10px 30px -22px rgba(40, 30, 10, .5);
}
.nav.is-scrolled { padding: 6px 0; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.04em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--hi); display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); transition: transform .3s var(--ease); }
.brand:hover .brand-mark { transform: rotate(6deg) scale(1.05); }
.brand-mark .icon { width: 17px; height: 17px; fill: currentColor; }
.brand em { font-style: normal; color: var(--red); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: .92rem; font-weight: 600; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--ink); background: var(--card-2); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--red); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-search { position: relative; }
.nav-search input { width: 170px; height: 38px; padding: 0 12px 0 34px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font: inherit; font-size: .88rem; transition: width .25s var(--ease), border-color .15s; }
.nav-search input:focus { width: 230px; outline: none; border-color: var(--ink); }
.nav-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--subtle); width: 16px; height: 16px; }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s var(--ease), background .15s; flex-shrink: 0; }
.icon-btn:hover { transform: translateY(-1px); background: var(--card); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
.nav-toggle { display: none; }
.avatar { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 800; font-family: var(--display); flex-shrink: 0; }
.avatar.vip { background: var(--hi); color: #18160f; box-shadow: inset 0 0 0 2px #18160f; }
.mobile-menu { display: none; }
@media (max-width: 1060px) { .nav-search { display: none; } }
@media (max-width: 980px) {
  .nav-links, .nav-actions .hide-mobile { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.open {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 82px; left: 12px; right: 12px; max-height: calc(100vh - 96px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px;
    box-shadow: var(--shadow-soft); animation: drop-in .25s var(--ease);
  }
  .mobile-menu a, .mobile-menu button.linklike { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: 12px; font-size: 1.02rem; font-weight: 600; color: var(--ink); text-align: left; }
  .mobile-menu a:hover { background: var(--card-2); }
  .mobile-menu .nav-search { display: block; margin-bottom: 6px; }
  .mobile-menu .nav-search input, .mobile-menu .nav-search input:focus { width: 100%; height: 46px; }
}

/* 5 — Butonlar */
.btn {
  --btn-bg: var(--card); --btn-fg: var(--ink); --btn-edge: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1.5px solid var(--btn-edge);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: 0 3px 0 var(--btn-edge);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s, filter .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-edge); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btn-primary { --btn-bg: var(--red); --btn-fg: #fff; --btn-edge: var(--red-strong); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ink, .btn-light { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-edge: #000; }
.btn-ghost { --btn-bg: var(--card); --btn-fg: var(--ink); --btn-edge: var(--line-strong); }
.btn-vip { --btn-bg: var(--hi); --btn-fg: #18160f; --btn-edge: #18160f; }
.btn-vip-outline { --btn-bg: var(--hi-soft); --btn-fg: var(--ink); --btn-edge: var(--hi-strong); }
.btn-danger { --btn-bg: var(--red-soft); --btn-fg: var(--danger); --btn-edge: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-success { --btn-bg: var(--green-soft); --btn-fg: var(--green); --btn-edge: color-mix(in srgb, var(--green) 45%, transparent); }
.btn-sm { height: 34px; padding: 0 12px; font-size: .84rem; border-radius: 10px; box-shadow: 0 2px 0 var(--btn-edge); }
.btn-sm:active { transform: translateY(2px); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 1.04rem; border-radius: 14px; box-shadow: 0 4px 0 var(--btn-edge); }
.btn-lg:active { transform: translateY(4px); }
.btn-block { width: 100%; }
.btn-icon { width: 34px; padding: 0; }
.linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.link { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.link:hover { text-decoration-color: var(--blue); }
.inline-form { display: inline; }

/* 6 — Kartlar */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 0 var(--line); }
.card-sm { padding: 18px; border-radius: var(--radius); }
.card-lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card-lift:hover { transform: translate(-2px, -2px); border-color: var(--ink); box-shadow: var(--shadow-hard); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.card-title-icon { color: var(--red); }
.card-link { font-size: .86rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.card-link .icon { transition: transform .2s var(--ease); }
.card-link:hover { color: var(--ink); }
.card-link:hover .icon { transform: translateX(3px); }
.stat { display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.stat-label { color: var(--muted); font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat-value { font-family: var(--display); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-value.small { font-size: 1.15rem; letter-spacing: -0.01em; }
.stat-hint { color: var(--subtle); font-size: .8rem; }
.stat-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--red-soft); color: var(--red); margin-bottom: 10px; }
.stat-icon.vip { background: var(--hi-soft); color: var(--ink); }
.stat-icon.green { background: var(--green-soft); color: var(--green); }
.stat-icon.purple, .stat-icon.blue { background: var(--blue-soft); color: var(--blue); }
.empty { text-align: center; padding: 44px 16px; color: var(--muted); }
.empty .icon { width: 40px; height: 40px; color: var(--subtle); margin: 0 auto 12px; display: block; }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--card-2); border: 1px solid var(--line); color: var(--red); flex-shrink: 0; }
.feature h3 { margin-bottom: 4px; font-size: 1.02rem; }
.feature p { color: var(--muted); font-size: .92rem; margin: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-strong); }
.list li:last-child { border-bottom: 0; }
.list-title { font-weight: 600; }
a.list-title:hover { color: var(--red); }
.list-meta { color: var(--subtle); font-size: .8rem; }
.announcement { position: relative; padding: 18px 20px 18px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.announcement::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--red); }
.announcement h3 { margin-bottom: 6px; font-size: 1.02rem; }
.announcement p { margin: 0; color: var(--muted); font-size: .93rem; white-space: pre-line; }
.announcement time { color: var(--subtle); font-family: var(--mono); font-size: .74rem; }

/* 7 — Formlar */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.hint { font-size: .79rem; color: var(--subtle); margin: 0; }
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  font: inherit; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.select option { background: var(--card); color: var(--ink); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--subtle); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--hi-soft); }
.input.invalid, .select.invalid, .textarea.invalid { border-color: var(--danger); background: var(--red-soft); }
.input-sm { height: 38px; font-size: .88rem; border-radius: 10px; }
.input[type="file"] { padding: 9px 12px; height: auto; }
.input-group { position: relative; }
.input-group .input { padding-left: 44px; }
.input-group > .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--subtle); }
.input-group .toggle-password { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--subtle); cursor: pointer; padding: 6px; }
.field-error { color: var(--danger); font-size: .8rem; font-weight: 600; margin: 0; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); flex-shrink: 0; }
.radio-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pills input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pills label { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.radio-pills input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.radio-pills input:focus-visible + label { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-soft); }
.auth-side { position: relative; padding: 40px; background: #18160f; color: #f4efe4; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; overflow: hidden; }
.auth-side h2 { color: #f4efe4; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.auth-side p { color: #bdb5a3; margin: 0; }
.auth-side .bubble { border-color: #4a463b; color: #6e6858; }
.auth-side .bubble.fill { background: #ffd43b; border-color: #ffd43b; }
.auth-side .bubble.fill.wrong { background: #ff6a4d; border-color: #ff6a4d; }
.auth-side .bubble-row { color: #6e6858; }
.auth-card { padding: 40px; }
.auth-card h1 { font-size: 2rem; margin-bottom: 4px; }
.auth-card .lead { color: var(--muted); margin-bottom: 26px; font-size: .95rem; }
.auth-foot { color: var(--muted); font-size: .9rem; margin-top: 20px; }
.form-split { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .88rem; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } .auth-card { padding: 28px 22px; } }

/* 8 — Bildirim / Rozet */
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--card); font-size: .93rem; animation: drop-in .35s var(--ease); }
.alert .icon { margin-top: 2px; }
.alert-success { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.alert-success > .icon { color: var(--green); }
.alert-error { background: var(--red-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.alert-error > .icon { color: var(--danger); }
.alert-info { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.alert-info > .icon { color: var(--blue); }
.alert-vip { background: var(--hi-soft); border-color: var(--hi-strong); }
.alert-vip a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.alert-close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .55; cursor: pointer; padding: 0 4px; font-size: 1.2rem; line-height: 1; }
.alert-close:hover { opacity: 1; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--card-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge .icon { width: 12px; height: 12px; }
.badge-primary { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
.badge-vip { background: var(--hi); color: #18160f; border-color: #18160f; }
.badge-vip-soft { background: var(--hi-soft); color: var(--ink); border-color: var(--hi-strong); }
.badge-success { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.badge-danger { background: var(--red-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge-warning { background: var(--hi-soft); color: var(--ink-2); border-color: var(--hi-strong); }
.badge-purple { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: .87rem; font-weight: 600; transition: all .15s var(--ease); }
.pill:hover { color: var(--ink); border-color: var(--ink); }
.pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.pill-vip.active { background: var(--hi); border-color: #18160f; color: #18160f; }

/* 9 — Deneme kartı */
.exam-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.exam-card:hover { transform: translate(-3px, -3px); border-color: var(--ink); box-shadow: var(--shadow-hard); }
.exam-cover { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.exam-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.exam-card:hover .exam-cover img { transform: scale(1.05) rotate(-.6deg); }
.exam-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--subtle); }
.exam-cover-placeholder .icon { width: 46px; height: 46px; }
.exam-ribbon { position: absolute; top: 16px; right: -36px; transform: rotate(35deg); width: 136px; text-align: center; padding: 4px 0; background: var(--hi); color: #18160f; font-family: var(--mono); font-size: .68rem; font-weight: 800; letter-spacing: .14em; border-top: 1.5px solid #18160f; border-bottom: 1.5px solid #18160f; z-index: 2; }
.exam-cover .soon { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 9px; background: #18160f; color: #f4efe4; font-family: var(--mono); font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; z-index: 2; }
.exam-card.is-locked .exam-cover img { filter: blur(7px) grayscale(.5); transform: scale(1.1); }
.exam-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px; background: color-mix(in srgb, var(--paper) 30%, transparent); }
.lock-chip { width: 50px; height: 50px; border-radius: 14px; background: var(--hi); color: #18160f; border: 1.5px solid #18160f; display: inline-flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 #18160f; transition: transform .3s var(--ease); }
.exam-card:hover .lock-chip { transform: rotate(-8deg) scale(1.06); }
.exam-lock span { font-size: .78rem; font-weight: 700; background: var(--card); padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); }
.exam-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.exam-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.exam-title { font-family: var(--display); font-size: 1.08rem; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.015em; }
.exam-meta { display: flex; gap: 12px; color: var(--subtle); font-size: .8rem; flex-wrap: wrap; }
.exam-meta span { display: inline-flex; align-items: center; gap: 4px; }
.exam-cta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .9rem; border-top: 1px dashed var(--line-strong); }
.exam-cta .go { transition: transform .25s var(--ease), color .2s; }
.exam-card:hover .exam-cta .go { transform: translateX(4px); color: var(--red); }
.exam-cta .mark { background: linear-gradient(transparent 55%, var(--hi) 55%); padding: 0 2px; color: var(--ink); }
.exam-detail { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: start; }
.exam-detail .exam-cover { border-radius: var(--radius-lg); border: 1.5px solid var(--ink); aspect-ratio: 3 / 4; box-shadow: var(--shadow-hard); transform: rotate(-1.5deg); transition: transform .4s var(--ease); }
.exam-detail .exam-cover:hover { transform: rotate(0); }
@media (max-width: 860px) { .exam-detail { grid-template-columns: 1fr; gap: 24px; } .exam-detail .exam-cover { max-width: 300px; } }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; margin: 20px 0; }
.meta-item { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card); border: 1px dashed var(--line-strong); }
.meta-item small { display: block; color: var(--subtle); font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.meta-item strong { font-size: 1rem; }
.action-stack { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* 10 — Sayaç (bilet) */
.countdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.countdown {
  position: relative; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--card);
  border: 1.5px solid var(--ink); box-shadow: var(--shadow-hard);
  transition: transform .3s var(--ease);
}
.countdown:hover { transform: rotate(-.6deg); }
.countdown::before, .countdown::after { content: ''; position: absolute; top: 58%; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.countdown::before { left: -11px; clip-path: inset(0 0 0 50%); }
.countdown::after { right: -11px; clip-path: inset(0 50% 0 0); }
.countdown.vip { background: var(--hi-soft); }
.countdown-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.countdown-desc { color: var(--muted); font-size: .84rem; margin: 0 0 16px; min-height: 1.3em; }
.countdown-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 14px; border-top: 2px dashed var(--line-strong); }
.countdown-unit { text-align: center; }
.countdown-unit b { display: block; font-family: var(--mono); font-size: clamp(1.45rem, 3.4vw, 1.95rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1.15; }
.countdown-unit b.tick { animation: tick .45s var(--ease); }
.countdown-unit small { color: var(--subtle); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.countdown-date { margin-top: 12px; color: var(--subtle); font-family: var(--mono); font-size: .72rem; display: flex; align-items: center; gap: 6px; }
.countdown.is-done .countdown-units { opacity: .35; }
.countdown-inline { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.timer-card { text-align: center; }
.timer-display { font-family: var(--mono); font-size: clamp(2.6rem, 8vw, 3.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; margin: 10px 0 6px; }
.timer-display.warning { color: var(--hi-strong); }
.timer-display.over { color: var(--danger); animation: pulse-soft 1.4s ease-in-out infinite; }
.timer-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* 11 — VIP ve dönüşüm */
.locked { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.locked-content { filter: blur(5px) saturate(.7); opacity: .75; pointer-events: none; user-select: none; }
.locked-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 20px; background: radial-gradient(circle at center, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 40%, transparent) 75%); }
.locked-overlay .lock-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--hi); color: #18160f; border: 1.5px solid #18160f; box-shadow: 3px 3px 0 #18160f; }
.locked-overlay h3 { margin: 0; }
.locked-overlay p { color: var(--muted); font-size: .9rem; max-width: 340px; margin: 0; }
.vip-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--hi); color: #18160f; border: 1.5px solid #18160f; box-shadow: 4px 4px 0 #18160f; overflow: hidden; flex-wrap: wrap; }
.vip-banner::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 18px solid rgba(24, 22, 15, .07); pointer-events: none; }
.vip-banner h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; color: #18160f; }
.vip-banner p { margin: 0; color: #4a4434; font-size: .93rem; max-width: 620px; }
.vip-banner .btn-vip { --btn-bg: #18160f; --btn-fg: #ffd43b; --btn-edge: #000; }
.vip-banner .btn-ghost { --btn-bg: #fffdf8; --btn-fg: #18160f; --btn-edge: #18160f; }
.vip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--hi); color: #18160f; border: 1.5px solid #18160f; font-size: .83rem; font-weight: 700; }
.vip-hint { display: flex; gap: 10px; align-items: center; font-size: .86rem; color: var(--ink-2); padding: 11px 14px; border-radius: 12px; border: 1.5px dashed var(--hi-strong); background: var(--hi-soft); }
.vip-hint a { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.compare { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--card); }
.compare th, .compare td { padding: 14px; border-bottom: 1px dashed var(--line-strong); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.compare .col-vip { background: var(--hi-soft); }
.compare .yes { color: var(--green); }
.compare .no { color: var(--subtle); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.plan-option input { position: absolute; opacity: 0; }
.plan-option label { display: block; padding: 16px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--card); cursor: pointer; transition: all .15s var(--ease); }
.plan-option label strong { display: block; font-family: var(--display); }
.plan-option label small { color: var(--muted); }
.plan-option input:checked + label { border-color: #18160f; background: var(--hi); color: #18160f; box-shadow: 3px 3px 0 #18160f; transform: translate(-2px, -2px); }
.plan-option input:checked + label small { color: #4a4434; }
.membership-days { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.membership-days b { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }

/* 12 — Tablo */
.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; padding: 12px 14px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--card-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .86rem; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions > * { margin-left: 4px; }
.table .input-sm { width: 80px; display: inline-block; vertical-align: middle; }
.table-title { font-weight: 600; color: var(--ink); }
a.table-title:hover { color: var(--red); }
.table-sub { font-size: .78rem; color: var(--subtle); }
.thumb { width: 46px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--card-2); border: 1px solid var(--line); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--card); font-family: var(--mono); font-size: .84rem; color: var(--muted); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pagination a:hover { color: var(--ink); border-color: var(--ink); }

/* 13 — Öğrenci paneli */
.welcome { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.welcome h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.welcome p { margin: 6px 0 0; color: var(--muted); }
.progress { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: var(--red); transition: width 1s var(--ease); }
.progress-bar.vip { background: var(--hi-strong); }
.progress-bar.blue { background: var(--blue); }
.bar-row { display: grid; grid-template-columns: 160px 1fr 72px; gap: 12px; align-items: center; padding: 8px 0; font-size: .9rem; }
.bar-row .num { text-align: right; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 110px 1fr 62px; font-size: .82rem; } }
.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .axis-label { fill: var(--subtle); font-size: 11px; font-family: var(--mono); }
.chart .line { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1.6s var(--ease) .2s forwards; }
.chart .area { fill: var(--red); opacity: .08; }
.chart .dot { fill: var(--card); stroke: var(--red); stroke-width: 2.5; }
.chart .dot-label { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: var(--mono); text-anchor: middle; }
.chart .goal-line { stroke: var(--hi-strong); stroke-dasharray: 6 6; stroke-width: 2; }
.chart .goal-label { fill: var(--ink-2); font-weight: 700; }
.score-table input { width: 74px; height: 38px; text-align: center; padding: 0 6px; font-family: var(--mono); }
.score-total { display: flex; gap: 22px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--radius); background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--shadow-hard); }
.score-total div small { display: block; color: var(--muted); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.score-total div strong { font-family: var(--mono); font-size: 1.45rem; font-variant-numeric: tabular-nums; }

/* 14 — Ana sayfa */
.hero { position: relative; padding: 36px 0 10px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); font-weight: 800; letter-spacing: -0.055em; line-height: .98; margin-bottom: 22px; }
.hero .lead { font-size: clamp(1.02rem, 1.8vw, 1.18rem); color: var(--muted); max-width: 560px; margin: 0 0 30px; }
.hero .lead strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 18px; color: var(--subtle); font-size: .86rem; display: flex; align-items: center; gap: 8px; }
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -3%; bottom: -0.2em; width: 106%; height: .4em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1.1s var(--ease) .5s forwards; }
.hl { background-image: linear-gradient(transparent 58%, var(--hi) 58%, var(--hi) 92%, transparent 92%); background-size: 0 100%; background-repeat: no-repeat; animation: highlight .9s var(--ease) 1.2s forwards; padding: 0 .08em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px; box-shadow: 2px 2px 0 var(--ink); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping 2s infinite; }
.eyebrow.vip { background: var(--hi); color: #18160f; border-color: #18160f; box-shadow: 2px 2px 0 #18160f; }
.hero-art { position: relative; min-height: 400px; }
.sheet { position: absolute; background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-hard); padding: 18px; }
.sheet-optic { top: 0; right: 6%; width: 74%; rotate: 3deg; animation: float 7s ease-in-out infinite; }
.sheet-score { bottom: 2%; left: 0; width: 60%; rotate: -4deg; animation: float 8s ease-in-out -2s infinite; }
.sheet-sticky { top: 46%; right: 0; width: 142px; padding: 14px; background: #ffd43b; color: #18160f; border-color: #18160f; rotate: 7deg; border-radius: 6px; font-family: var(--display); font-weight: 700; line-height: 1.2; box-shadow: 4px 4px 0 #18160f; animation: float 6s ease-in-out -4s infinite; }
.sheet-label { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin-bottom: 12px; display: flex; justify-content: space-between; gap: 8px; }
.bubbles { display: grid; gap: 9px; }
.bubble-row { display: grid; grid-template-columns: 26px repeat(5, 1fr); gap: 6px; align-items: center; font-family: var(--mono); font-size: .72rem; color: var(--subtle); }
.bubble { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .58rem; color: var(--subtle); justify-self: center; transition: background .3s var(--ease), border-color .3s; }
.bubble.fill { background: var(--ink); border-color: var(--ink); color: transparent; animation: bubble-in .45s var(--ease) both; }
.bubble.fill.wrong { background: var(--red); border-color: var(--red); }
.score-big { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.score-delta { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; font-size: .84rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 16px; } .hero-art { min-height: 340px; max-width: 520px; width: 100%; margin: 10px auto 0; } }
@media (max-width: 480px) { .hero-art { min-height: 310px; } .sheet-sticky { width: 120px; font-size: .9rem; } .sheet-optic { width: 84%; right: 0; } }
.marquee { margin-top: 60px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: var(--card); overflow: hidden; white-space: nowrap; padding: 14px 0; }
.marquee-track { display: inline-flex; animation: marquee 36s linear infinite; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.marquee-track span { display: inline-flex; align-items: center; padding-right: 38px; }
.marquee-track span::after { content: '✳'; color: var(--red); font-size: .9em; padding-left: 38px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.value-card { padding: 22px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.value-card:hover { transform: translate(-2px, -2px); border-color: var(--ink); box-shadow: var(--shadow-hard); }
.value-card .num { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--red); }
.value-card .icon { width: 26px; height: 26px; color: var(--ink); }
.value-card h3 { margin: 12px 0 6px; }
.value-card p { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .value-grid { grid-template-columns: 1fr; } }
.step-num { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; background: var(--ink); color: var(--hi); margin-bottom: 14px; transform: rotate(-4deg); }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 10px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--ink); box-shadow: var(--shadow-hard); }
.faq summary { padding: 18px 20px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .25s var(--ease); color: var(--muted); }
.faq details[open] summary .icon { transform: rotate(180deg); color: var(--red); }
.faq details p { padding: 0 20px 18px; color: var(--muted); margin: 0; }

/* Alt bilgi */
.footer { border-top: 1.5px solid var(--ink); background: var(--card); padding: 44px 0 28px; color: var(--muted); font-size: .9rem; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; }
.footer h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin-bottom: 12px; font-weight: 700; }
.footer p { max-width: 340px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer a:hover { color: var(--red); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line-strong); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; }
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > :first-child { grid-column: 1 / -1; } }

/* 15 — AI Soru Çözüm */
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--card-2); cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; text-align: center; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--ink); background: var(--hi-soft); }
.dropzone.invalid { border-color: var(--danger); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; color: var(--ink-2); pointer-events: none; }
.dropzone-empty .icon { color: var(--red); }
.dropzone-preview { max-height: 320px; width: auto; margin: 12px auto; border-radius: 10px; pointer-events: none; }
.quota-num { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 10px; }
.quota-num b { font-size: 2.4rem; letter-spacing: -0.05em; line-height: 1; }
.tight { margin: 0; padding-left: 18px; }
.tight li { margin: 3px 0; }
.ai-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.ai-thumb img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); }
.ai-answer { line-height: 1.75; color: var(--ink-2); overflow-x: auto; }
.ai-answer .ai-h { display: inline-block; margin-top: 6px; font-family: var(--display); color: var(--ink); }
.ai-admin-item summary { list-style: none; cursor: pointer; }
.ai-admin-item summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) { .ai-item { grid-template-columns: 1fr; } .ai-thumb img { max-height: 260px; width: auto; } }
.ai-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(4px); padding: 20px; }
.ai-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 30px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); animation: drop-in .3s var(--ease); }
.bubble-loader { display: flex; gap: 8px; margin-bottom: 4px; }
.bubble-loader span { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .72rem; font-weight: 700; animation: bubble-cycle 1.5s var(--ease) infinite; }
.bubble-loader span:nth-child(2) { animation-delay: .15s; }
.bubble-loader span:nth-child(3) { animation-delay: .3s; }
.bubble-loader span:nth-child(4) { animation-delay: .45s; }
.bubble-loader span:nth-child(5) { animation-delay: .6s; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--red); animation: spin .8s linear infinite; display: inline-block; }

/* 16 — Okuyucu */
.viewer-body { background-color: var(--paper-2); }
.viewer-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewer-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--display); }
.viewer-tools { display: flex; align-items: center; gap: 6px; }
.viewer-stage { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 24px 12px 60px; min-height: 80vh; user-select: none; -webkit-user-select: none; }
.viewer-page { position: relative; background: #fff; border-radius: 6px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.45); max-width: 100%; min-height: 300px; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.viewer-page.is-ready { opacity: 1; transform: none; }
.viewer-page canvas { display: block; max-width: 100%; height: auto !important; border-radius: 6px; }
.viewer-watermark { position: absolute; inset: 0; background-repeat: repeat; pointer-events: none; border-radius: 6px; }
.viewer-page-num { position: absolute; right: 6px; bottom: -22px; font-family: var(--mono); font-size: .7rem; color: var(--subtle); }
.viewer-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 0; }
.viewer-note { text-align: center; color: var(--subtle); padding: 0 16px 24px; }
@media print { body.viewer-body { display: none !important; } }

/* 17 — Yönetim paneli */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar { width: 254px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.admin-brand { height: 66px; display: flex; align-items: center; gap: 9px; padding: 0 18px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; }
.admin-brand em { font-style: normal; color: var(--red); }
.admin-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-label { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--subtle); font-weight: 700; padding: 14px 12px 6px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; color: var(--muted); font-size: .92rem; font-weight: 600; transition: background .15s, color .15s; }
.admin-nav a:hover { background: var(--card-2); color: var(--ink); }
.admin-nav a.active { background: var(--ink); color: var(--paper); }
.admin-nav a.active .icon { color: var(--hi); }
.admin-nav .count { margin-left: auto; background: var(--hi); color: #18160f; font-family: var(--mono); font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; border: 1px solid #18160f; }
.admin-sidebar-foot { padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-foot a, .admin-sidebar-foot button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; color: var(--muted); font-size: .9rem; font-weight: 600; width: 100%; text-align: left; }
.admin-sidebar-foot a:hover, .admin-sidebar-foot button:hover { background: var(--card-2); color: var(--ink); }
.admin-sidebar-foot .danger { color: var(--danger); }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 85%, transparent); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.admin-topbar h1 { font-size: 1.2rem; margin: 0; }
.admin-content { padding: 28px; flex: 1; }
.admin-toggle { display: none; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toolbar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: 150px; }
.form-card { max-width: 880px; }
.form-section { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--line-strong); }
.form-section:last-of-type { border-bottom: 0; }
.form-section h3 { font-family: var(--mono); font-size: .74rem; color: var(--red); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.cover-preview { width: 140px; aspect-ratio: 3 / 4; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: var(--card-2); }
.nav-user { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); font-weight: 600; }
@media (max-width: 960px) {
  .admin-sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .admin-sidebar.open { transform: translateX(0); box-shadow: 30px 0 60px rgba(0,0,0,.25); }
  .admin-toggle { display: inline-flex; }
  .admin-content { padding: 20px 16px; }
  .admin-topbar { padding: 0 16px; }
}

/* Hata sayfaları */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.error-code { font-family: var(--display); font-size: clamp(4.5rem, 16vw, 8rem); font-weight: 800; letter-spacing: -0.07em; line-height: .9; margin-bottom: 14px; color: var(--ink); text-shadow: 5px 5px 0 var(--hi); }
.error-page pre { text-align: left; max-width: 900px; overflow: auto; font-size: .74rem; background: var(--card); padding: 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--danger); }

/* 18 — Hareket (sıkmayan, amaçlı animasyonlar) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes highlight { to { background-size: 100% 100%; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bubble-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bubble-cycle { 0%, 100% { background: transparent; color: var(--ink); } 40% { background: var(--ink); color: var(--paper); } }
@keyframes tick { 0% { transform: translateY(-5px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes drop-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse-soft { 50% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* 19 — Yardımcılar */
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.small { font-size: .86rem; }
.xs { font-size: .76rem; }
.mono { font-family: var(--mono); }
.bold { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.text-vip { color: var(--hi-strong); }
.text-success { color: var(--green); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--red); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: 6px; } .gap-2 { gap: 12px; } .gap-3 { gap: 20px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.divider { height: 0; border: 0; border-top: 1px dashed var(--line-strong); margin: 20px 0; }
.prose { color: var(--muted); white-space: pre-line; }
.page-head form.input-group { flex: 1 1 280px; max-width: 380px; }
@media (max-width: 640px) { .hide-sm { display: none !important; } .page-head form.input-group { max-width: none; } }
.hero-center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero-center .lead { margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }
.page-head.center p { margin-left: auto; margin-right: auto; }

/* 20 — Kitapçık tasarlayıcı (yönetim). Kitapçık sayfası bir baskı belgesidir:
   temadan bağımsız olarak beyaz kağıt + siyah mürekkep kullanır. */
.admin-body.is-tool .admin-sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .3s var(--ease); }
.admin-body.is-tool .admin-sidebar.open { transform: translateX(0); box-shadow: 30px 0 60px rgba(0,0,0,.25); }
.admin-body.is-tool .admin-toggle { display: inline-flex; }
.admin-body.is-tool .admin-content { padding: 0; }
.admin-body.is-tool .admin-content > .flash-stack { margin: 12px 16px 0; }
.bk { display: grid; grid-template-columns: 268px minmax(0, 1fr) 330px; height: calc(100vh - 66px); }
.bk-panel { background: var(--card); overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.bk-tools { border-right: 1px solid var(--line); }
.bk-props { border-left: 1px solid var(--line); }
.bk-section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.bk-section-title { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .1em; }
.bk-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--card-2); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .15s, transform .12s var(--ease), background .15s; }
.bk-tool .icon { color: var(--red); }
.bk-tool:hover { border-color: var(--ink); transform: translateY(-1px); }
.bk-tool-ai { background: var(--hi-soft); border-color: var(--hi-strong); }
.bk-tool-ai .icon { color: var(--ink); }
.bk-tool[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.bk-mini { min-height: 0; font-size: .88rem; padding: 8px 12px; }
.bk-upload-row { display: flex; gap: 6px; }
.bk-file { position: relative; overflow: hidden; flex: 1; }
.bk-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.bk-format { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); }
.bk-format-row { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-format-row button { min-width: 32px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--card-2); color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer; }
.bk-format-row button:hover { border-color: var(--ink); background: var(--card); }
.bk-prop-form { gap: 12px; }
.bk-prop-form .form-row { gap: 10px; }
.bk-canvas { overflow: auto; background-color: var(--paper-2); background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 18px 18px; padding: 24px; }
.bk-pages { display: flex; flex-direction: column; align-items: center; gap: 28px; min-width: max-content; }
.bk-page-wrap { display: flex; flex-direction: column; gap: 6px; }
.bk-page-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-drop-line { height: 0; border-top: 3px solid var(--red); margin: -2px 0 6px; border-radius: 3px; }

.bk-page { position: relative; width: 210mm; height: 297mm; padding: 12mm 15mm; display: flex; flex-direction: column; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bk-page.show-grid { background-image: linear-gradient(to right, #eef0f4 1px, transparent 1px), linear-gradient(to bottom, #eef0f4 1px, transparent 1px); background-size: 5mm 5mm; }
.bk-page [contenteditable] { outline: none; white-space: pre-line; border-radius: 3px; }
.bk-page [contenteditable]:hover { box-shadow: 0 0 0 1px #9db0f0; }
.bk-page [contenteditable]:focus { box-shadow: 0 0 0 2px #2449d8; }
.bk-optical { position: relative; display: flex; justify-content: space-between; }
.bk-optical.is-top { align-items: flex-start; margin-bottom: 46px; }
.bk-optical.is-bottom { align-items: flex-end; margin-top: 12px; }
.bk-opt-group { display: flex; gap: 14px; align-items: inherit; }
.bk-marks-v { display: flex; flex-direction: column; gap: 8px; margin-top: 3px; }
.bk-marks-h { display: flex; gap: 8px; margin-bottom: 3px; }
.bk-marks-v span, .bk-marks-h span { width: 8px; height: 8px; background: #000; }
.bk-qr { position: relative; width: 28px; height: 28px; border: 1.5px solid #000; background-color: #fff; background-image: repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.bk-qr.has-img { background-image: none; }
.bk-qr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bk-opt-center { position: absolute; left: 50%; top: -5px; transform: translateX(-50%); text-align: center; min-width: 50%; }
.bk-watermark { font-family: 'Courier New', Courier, monospace; font-size: 11pt; font-weight: bold; letter-spacing: 1px; }
.bk-serial { font-size: 6pt; letter-spacing: .5px; margin-top: 2px; color: #333; }
.bk-letter { font-family: 'Times New Roman', Times, serif; font-size: 34pt; line-height: 1; margin-top: 5px; }
.bk-header { display: flex; border: 1.5px solid #000; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.bk-header.is-first { margin-bottom: 0; border-radius: 12px 12px 0 0; }
.bk-header > div { flex: 1; padding: 8px 10px; font-size: 10pt; font-weight: bold; display: flex; align-items: center; min-height: 34px; }
.bk-head-l { justify-content: flex-start; border-right: 1.5px solid #000; }
.bk-head-m { flex: 2 !important; justify-content: center; text-align: center; background: #ffedd5; border-right: 1.5px solid #000; font-size: 11pt !important; }
.bk-head-r { justify-content: flex-end; text-align: right; }
.bk-info { border: 1.5px solid #000; border-top: 0; border-radius: 0 0 12px 12px; padding: 10px; margin-bottom: 14px; font-size: 9.5pt; font-weight: bold; line-height: 1.5; }
.bk-content { position: relative; flex: 1; min-height: 0; display: flex; justify-content: space-between; }
.bk-content::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #000; }
.bk-col { position: relative; width: 48%; height: 100%; overflow: hidden; }
.bk-col.is-overflow { box-shadow: inset 0 -4px 0 #e5432a; }
.bk-col.is-overflow::after { content: 'Sütun taşıyor — bazı öğeler baskıda görünmez'; position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 700 10px/1.4 var(--font); color: #fff; background: #e5432a; padding: 2px 4px; }
.bk-col-empty { margin: 30px 10px; padding: 24px 10px; border: 1.5px dashed #c9ccd6; border-radius: 10px; text-align: center; font: 600 .8rem/1.4 var(--font); color: #8a8f9c; }
.bk-el { position: relative; padding: 5px; margin-bottom: 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; break-inside: avoid; overflow-wrap: break-word; }
.bk-el::after { content: ''; display: block; clear: both; }
.bk-el:hover { border-style: dashed; border-color: #9db0f0; }
.bk-el.is-selected { border: 1.5px solid #e5432a; background: #fff8f6; }
.bk-el.is-dragging { opacity: .4; }
.bk-el-controls { position: absolute; top: -15px; right: 4px; z-index: 5; display: none; gap: 2px; padding: 2px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
.bk-el:hover .bk-el-controls, .bk-el.is-selected .bk-el-controls { display: flex; }
.bk-ctl { width: 24px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 700 12px/1 var(--font); cursor: pointer; }
.bk-ctl:hover { background: var(--card-2); }
.bk-ctl.is-danger { color: var(--danger); }
.bk-qno { float: left; width: 22px; font-size: 9.5pt; font-weight: bold; margin-top: 1px; }
.bk-qbody { margin-left: 22px; font-size: 9pt; line-height: 1.35; }
.bk-paragraph { margin-bottom: 8px; }
.bk-qtext { margin-bottom: 8px; font-weight: bold; text-align: justify; letter-spacing: -.2px; }
.bk-premises { margin: 6px 0 8px; line-height: 1.45; }
.bk-qimg { display: block; max-width: 100%; height: auto; margin: 4px auto 8px; }
.bk-img-placeholder { margin: 4px 0 8px; padding: 22px 10px; border: 1.5px dashed #c9ccd6; border-radius: 8px; text-align: center; color: #8a8f9c; font: 600 .78rem/1.4 var(--font); }
.bk-options { display: flex; line-height: 1.35; }
.bk-options.is-horizontal { flex-wrap: wrap; gap: 6px 16px; }
.bk-options.is-vertical { flex-direction: column; gap: 5px; }
.bk-option b { margin-right: 3px; }
.bk-match { margin: 8px auto; border-collapse: collapse; text-align: center; font-size: 9pt; }
.bk-match th { padding: 0 12px 3px; border-bottom: 1.5px solid #000; }
.bk-match td { padding: 3px 12px; }
.bk-match .bk-match-letter { text-align: right; padding-right: 14px; font-weight: bold; }
.bk-nu { display: inline-flex; flex-direction: column; align-items: center; vertical-align: bottom; line-height: 1; margin: 0 2px; }
.bk-nu-w { border-bottom: 1.5px solid #000; padding-bottom: 2px; }
.bk-nu-n { font-size: .75em; margin-top: 2px; font-weight: bold; }
.bk-title-el { margin: 8px 0; font-size: 10pt; }
.bk-title-el.is-bold { font-weight: bold; }
.bk-title-el.align-center { text-align: center; }
.bk-title-el.align-right { text-align: right; }
.bk-title-el.fs-8 { font-size: 8pt; } .bk-title-el.fs-9 { font-size: 9pt; } .bk-title-el.fs-11 { font-size: 11pt; }
.bk-title-el.fs-12 { font-size: 12pt; } .bk-title-el.fs-14 { font-size: 14pt; } .bk-title-el.fs-16 { font-size: 16pt; }
.bk-title-el.fs-18 { font-size: 18pt; } .bk-title-el.fs-20 { font-size: 20pt; }
.bk-spacer { display: flex; align-items: center; justify-content: center; border: 1px dashed #d5d8e0; color: #b4b8c3; font: 600 10px/1 var(--font); }
.bk-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 6px 15px; border: 1.5px solid #000; border-radius: 8px; font-size: 9.5pt; }
.bk-footer-side { flex: 1; }
.bk-next { text-align: right; font-style: italic; font-size: 10pt; }
.bk-footer-logos { display: flex; align-items: center; gap: 30px; }
.bk-logo { font-weight: bold; line-height: .95; white-space: pre-line; font-size: 9.5pt; }
.bk-logo.is-right { text-align: right; }
.bk-logo img { display: block; max-height: 25px; width: auto; }
.bk-page-no { min-width: 30px; text-align: center; font-size: 12pt; font-weight: bold; }
.bk-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 22px 24px; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-hard); }
.bk-dialog::backdrop { background: color-mix(in srgb, var(--paper) 55%, rgba(0,0,0,.35)); backdrop-filter: blur(3px); }
.bk-dialog .dropzone { min-height: 150px; }
/* 20b — Yeni öğe tipleri, grafik, formül, içe aktarma */
.bk-tool-grid + .bk-tool-grid { margin-top: 2px; }
.bk-review { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--hi-soft); border: 1.5px solid var(--hi-strong); }
.bk-review strong { font-size: .9rem; }
.bk-prop-type { font-family: var(--mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bk-prop-section { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.bk-review-box { flex-direction: column; }
.bk-source-img { display: block; max-width: 100%; margin: 8px 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
.bk-thumb { width: 64px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.bk-opt-image-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-chip-row, .bk-check-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bk-chip { height: 28px; padding: 0 9px; font-size: .76rem; }
.bk-fn-list { display: flex; flex-direction: column; gap: 8px; }
.bk-fn { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.bk-graph-editor { display: flex; flex-direction: column; gap: 10px; }
.bk-num { width: 70px; }
.bk-formula-open { padding: 0 10px !important; font-weight: 700; }
.bk-formula-dialog { width: min(720px, calc(100vw - 32px)); }
.bk-formula-groups .pill { padding: 5px 11px; font-size: .78rem; }
.bk-formula-buttons { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; }
.bk-formula-btn { min-width: 40px; height: 34px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--card-2); color: var(--ink); font: 600 .9rem/1 var(--font); cursor: pointer; }
.bk-formula-btn:hover { border-color: var(--ink); background: var(--card); }
.bk-formula-preview { min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: #fff; color: #000; overflow-x: auto; font-size: 1.15rem; }
.bk-import-drop { min-height: 130px; }
.bk-import-pages { display: flex; flex-direction: column; gap: 8px; }
.bk-import-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.bk-import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px dashed var(--line); font-size: .82rem; }
.bk-import-row:last-child { border-bottom: 0; }
.bk-import-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-import-status { color: var(--muted); font-family: var(--mono); font-size: .72rem; text-align: right; }
.bk-import-row.is-busy { background: var(--hi-soft); }
.bk-import-row.is-ok .bk-import-status { color: var(--green); }
.bk-import-row.is-error { background: var(--red-soft); }
.bk-import-row.is-error .bk-import-status { color: var(--danger); white-space: normal; }
.bk-import-options { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-import-options .check { font-size: .84rem; }
.bk-el.is-review { outline: 2px dashed #f2bb05; outline-offset: 1px; }
.bk-review-flag { position: absolute; top: -9px; left: 6px; padding: 1px 6px; border-radius: 5px; background: #ffd43b; color: #18160f; font: 700 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.bk-table { border-collapse: collapse; margin: 6px auto 8px; font-size: 8.5pt; }
.bk-table th, .bk-table td { border: 1px solid #000; padding: 3px 7px; text-align: center; }
.bk-table th { font-weight: bold; background: #f2f2f2; }
.bk-tf { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 9pt; }
.bk-tf th { font-size: 8.5pt; padding: 2px 4px; }
.bk-tf td { border-bottom: 1px solid #bbb; padding: 4px 4px; vertical-align: top; }
.bk-tf .bk-tf-box { width: 22px; }
.bk-tf .bk-tf-box::before { content: ''; display: block; width: 12px; height: 12px; margin: 1px auto 0; border: 1.2px solid #000; }
.bk-lines { margin-top: 6px; }
.bk-line { height: 22px; border-bottom: 1px solid #9a9a9a; }
.bk-passage { margin: 4px 0 12px; font-size: 9pt; line-height: 1.4; }
.bk-passage.is-framed { border: 1.2px solid #000; border-radius: 6px; padding: 8px 10px; }
.bk-passage-label { font-weight: bold; font-style: italic; margin-bottom: 6px; }
.bk-passage-text { text-align: justify; }
.bk-figure { margin: 6px auto 8px; }
.bk-figure img { display: block; width: 100%; height: auto; }
.bk-figure figcaption { text-align: center; font-size: 8.5pt; margin-top: 3px; }
.bk-graph { margin: 4px auto 8px; }
.bk-graph svg { display: block; width: 100%; height: auto; overflow: visible; }
.bk-graph.is-compact { width: 100%; margin: 0; }
.bk-graph-error { font: 600 10px/1.3 var(--font); color: #c5321c; text-align: center; }
.bk-options.is-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; }
.bk-options.is-grid > .bk-option { min-width: 0; }
.bk-options.is-media { align-items: flex-start; }
.bk-options.is-media.is-horizontal { flex-wrap: nowrap; gap: 6px; }
.bk-options.is-media .bk-option { display: flex; align-items: flex-start; gap: 3px; flex: 1 1 0; min-width: 0; }
.bk-options.is-media .bk-option > :not(b) { flex: 1 1 auto; min-width: 0; }
.bk-options.is-media.is-vertical .bk-option { max-width: 60%; }
.bk-opt-img { display: block; max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.bk-img-placeholder.is-small { display: inline-block; margin: 0; padding: 6px 8px; }
@media print {
  .bk-el.is-review { outline: 0; }
  .bk-review-flag, .bk-graph-error { display: none !important; }
}
/* 20c — Sayfa düzeni (tek sütun, üst bant, ölçek), AI düzenleme ve yeniden çizim */
.bk-col.bk-top { width: 100%; height: auto; overflow: visible; flex: 0 0 auto; margin-bottom: 4px; }
.bk-col.bk-top.is-empty { min-height: 0; margin: 0; }
.bk-pages.is-drag-active .bk-col.bk-top.is-empty { min-height: 26px; margin-bottom: 6px; border: 1.5px dashed #9db0f0; border-radius: 8px; }
.bk-pages.is-drag-active .bk-col.bk-top.is-empty::before { content: 'Tam genişlik alanı'; display: block; text-align: center; font: 600 10px/24px var(--font); color: #6b7cc9; }
.bk-content.is-single::before { display: none; }
.bk-content.is-single .bk-col { width: 100%; }
.bk-scale-select { width: 76px; height: 34px; padding: 0 22px 0 8px; font-size: .78rem; }
.bk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-compare figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-compare figcaption { font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bk-compare img, .bk-compare-empty { width: 100%; min-height: 160px; max-height: 360px; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; }
.bk-compare-empty { display: flex; align-items: center; justify-content: center; color: var(--subtle); font-size: .85rem; }
.bk-redraw-dialog { width: min(820px, calc(100vw - 32px)); }
@media (max-width: 640px) { .bk-compare { grid-template-columns: 1fr; } }
@media print { .bk-col.bk-top.is-empty { display: none; } }
/* 20d — ÖZDEBİR şablonu (ders renkli bantlar, kapak, uyarı sayfası). Renkler sayfa düğümündeki --sec değişkeninden gelir. */
.bk-red { color: #E3262E; } .bk-blue { color: #2B8FD6; }
.bk-kind-select { width: auto; max-width: 170px; height: 34px; padding: 0 26px 0 9px; font-size: .78rem; }
.bk-color { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer; }
.bk-tpl-dialog { width: min(760px, calc(100vw - 32px)); }
.bk-template-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bk-template-pick { display: flex; flex-direction: column; gap: 6px; }
.bk-swatches { display: flex; gap: 4px; }
.bk-swatches i { width: 26px; height: 10px; border-radius: 3px; background: var(--line-strong); }
.bk-swatches .sw-1 { background: #13A9DE; } .bk-swatches .sw-2 { background: #EE9D20; } .bk-swatches .sw-3 { background: #31B65A; } .bk-swatches .sw-4 { background: #E5306A; }
.bk-swatches.is-classic i { width: 110px; background: repeating-linear-gradient(90deg, #18160f 0 8px, transparent 8px 14px); }

.bk-page.is-oz { padding: 6mm 13mm 5mm; --sec: #13A9DE; --sec-l: #8AD6F2; --sec-xl: #BFE8F8; }
.oz-head { position: relative; height: 16mm; margin: 0 -13mm 1mm; }
.oz-head-art svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 12.2mm; }
.oz-head-art .oz-c, .oz-foot-art .oz-c { fill: var(--sec); }
.oz-head-art .oz-l { fill: var(--sec-l); }
.oz-head-art .oz-xl { fill: var(--sec-xl); }
.oz-head-art .oz-fade { fill: url(#ozfade); }
.oz-stop { stop-color: var(--sec-l); } .oz-stop-end { stop-color: var(--sec-xl); stop-opacity: 0; }
.oz-letter { position: absolute; bottom: 3.6mm; font: 900 25pt/1 'Arial Black', 'Helvetica Neue', Arial, sans-serif; color: #111; min-width: 8mm; text-align: center; }
.oz-letter.is-left { left: 16mm; } .oz-letter.is-right { right: 16mm; }
.oz-pub { position: absolute; left: 50%; bottom: 1mm; transform: translateX(-50%); text-align: center; color: #333; }
.oz-pub img { display: block; max-height: 11mm; max-width: 46mm; }
.oz-pub-name { font: 700 13pt/1 Georgia, 'Times New Roman', serif; letter-spacing: .5px; }
.oz-pub-sub { font: 400 5.5pt/1.3 Arial, sans-serif; letter-spacing: 2.6px; color: #777; }
.oz-title { text-align: center; font: 700 15pt/1.25 Arial, Helvetica, sans-serif; margin: 2mm 0 1.5mm; white-space: pre-line; }
.oz-info { font: 9.5pt/1.55 Arial, Helvetica, sans-serif; padding: 0 2mm 0 6mm; white-space: pre-line; }
.oz-rule { height: 1.6px; background: var(--sec); margin: 2.5mm 0 1mm -13mm; }
.is-oz .bk-content::before { background: var(--sec); width: 1.6px; }
.is-oz .bk-col.bk-top:not(.is-empty) { margin-top: 2mm; }
.is-oz .bk-content { margin-top: 2mm; }
.oz-foot { position: relative; height: 13mm; margin: 1mm -13mm 0; font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; color: #222; }
.oz-foot-art svg { position: absolute; left: 0; top: 0; width: 100%; height: 7.9mm; }
.oz-foot-art .oz-line { stroke: var(--sec); stroke-width: 1.6; }
.oz-foot-sec { position: absolute; left: 17mm; top: .6mm; font-weight: 700; font-size: 10pt; letter-spacing: .3px; color: var(--sec); text-transform: uppercase; }
.oz-foot-code { position: absolute; left: 13mm; top: 6.6mm; font-size: 9pt; }
.oz-foot-no { position: absolute; left: 50%; top: -.6mm; transform: translateX(-50%); font: 400 13pt Arial, sans-serif; }
.oz-foot-session { position: absolute; right: 17mm; top: .6mm; font-weight: 700; font-size: 10pt; }
.oz-foot-next { position: absolute; right: 13mm; top: 6.6mm; font-size: 9pt; font-style: italic; }
.bk-passage-label.is-box { display: inline-block; font-style: normal; font-weight: normal; border: 1px solid #000; padding: 2px 8px; margin-bottom: 8px; }

.bk-page.bk-cover { padding: 0; font-family: Arial, Helvetica, sans-serif; --cv-accent: #F03A33; --cv-code: #2B8FD6; --cv-script: #2B8FD6; }
.cv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.cv-bar { position: absolute; left: 0; top: 4.6%; bottom: 4.6%; width: 4.2mm; background: var(--cv-accent); }
.cv-logos { position: absolute; left: 16mm; top: 31mm; display: flex; align-items: center; }
.cv-logo { height: 43mm; width: auto; max-width: 48mm; object-fit: contain; }
.cv-logo + .cv-logo { margin-left: -3mm; }
.cv-logo-ph { width: 41mm; height: 41mm; border-radius: 50%; border: 2.4mm solid #c9c9c9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11pt; background: #fff; }
.cv-logo-ph span { font-size: 7pt; color: #999; }
.cv-logo-ph.is-dark { background: #111; color: #fff; border-color: #111; margin-left: -3mm; }
.cv-exam { position: absolute; right: 13mm; top: 30mm; width: 112mm; text-align: center; }
.cv-top { font: 700 11.5pt/1.2 'Arial Narrow', Arial, sans-serif; color: #858585; letter-spacing: .2px; }
.cv-big { font: 900 124pt/.9 'Franklin Gothic Heavy', 'Arial Black', Impact, Arial, sans-serif; color: var(--cv-accent); letter-spacing: -1px; transform: scaleX(.84); transform-origin: 50% 50%; }
.cv-sub { font: 400 22pt/1.1 'Arial Narrow', Arial, sans-serif; color: #858585; }
.cv-center { position: absolute; left: 0; right: 0; top: 93mm; text-align: center; }
.cv-script { font: italic 400 31pt/1 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive; color: var(--cv-script); margin-left: 16mm; }
.cv-main-row { display: flex; justify-content: center; align-items: flex-end; gap: 1mm; margin-top: -3mm; }
.cv-main { font: 900 70pt/.9 'Arial Black', Impact, Arial, sans-serif; color: #111; letter-spacing: -1px; }
.cv-number { font: 900 104pt/.8 'Arial Black', Impact, Arial, sans-serif; color: var(--cv-accent); }
.cv-code-label { font: 700 17pt/1.2 Arial, sans-serif; color: #555; letter-spacing: 2px; margin-top: 3mm; }
.cv-code { font: 900 33pt/1.1 Arial, sans-serif; color: var(--cv-code); letter-spacing: .45em; padding-left: .45em; }
.cv-id { position: absolute; left: 15mm; right: 12mm; top: 165mm; display: flex; align-items: center; gap: 8mm; }
.cv-fields { flex: 1; }
.cv-field { display: grid; grid-template-columns: 62mm 1fr; border-bottom: 1px solid #e3e3e3; }
.cv-field-label { font: 700 10.5pt/1 Arial, sans-serif; padding: 3.1mm 3mm; background: rgba(255,255,255,.75); }
.cv-field-box { border-left: 1px solid #e3e3e3; background: rgba(255,255,255,.75); }
.cv-letter { font: 900 78pt/1 'Arial Black', Impact, Arial, sans-serif; width: 38mm; text-align: center; color: #111; }
.cv-warn { position: absolute; left: 15mm; right: 12mm; top: 210mm; }
.cv-warn-title { color: var(--cv-accent); font: 900 15pt/1.3 'Arial Narrow', Arial, sans-serif; }
.cv-warn-sub { font: 900 13pt/1.3 'Arial Narrow', Arial, sans-serif; margin-bottom: 1.5mm; }
.cv-warnings { font: 10.5pt/1.55 Arial, sans-serif; }
.cv-num-line { display: grid; grid-template-columns: 6mm 1fr; margin-top: 1.2mm; }
.cv-line { padding-left: 6mm; }
.cv-copy { position: relative; margin-top: 3.5mm; padding-left: 4mm; font: italic 8.6pt/1.45 Arial, sans-serif; }
.cv-star { position: absolute; left: -1mm; top: -1.2mm; color: var(--cv-accent); font-size: 12pt; font-style: normal; }

.bk-page.bk-notice { padding: 36mm 17mm 14mm; font-family: Arial, Helvetica, sans-serif; --nt-red: #DE2A1F; --nt-blue: #2F6DB5; }
.nt-banner { background: var(--nt-red); color: #fff; text-align: center; font: 900 16.5pt/1.25 'Arial Narrow', Arial, sans-serif; padding: 2mm 3mm; letter-spacing: .2px; }
.nt-list { padding: 3mm 6mm 0; }
.nt-item { padding: 5mm 0; border-bottom: 1px solid #d6edf7; }
.nt-item:last-child { border-bottom: 0; }
.nt-item-text { font: 700 12pt/1.45 'Arial Narrow', Arial, sans-serif; }
.nt-item-text::before { content: '• '; }
.nt-sub { color: var(--nt-red); font: italic 10.5pt/1.45 Arial, sans-serif; padding-left: 2mm; }
.nt-box { position: relative; border: 1.6px solid var(--nt-red); margin: 17mm 0 19mm; padding: 8mm 6mm 7mm; }
.nt-box-title { position: absolute; top: -5mm; left: 6mm; background: #fff; padding: 0 2mm; color: var(--nt-red); font: italic 900 17pt/1.2 Arial, sans-serif; }
.nt-quote { color: #111; margin-right: 2mm; font-style: normal; }
.nt-quote.is-end { position: absolute; right: 5mm; bottom: -5.6mm; background: #fff; padding: 0 2mm; font-size: 20pt; line-height: 1; }
.nt-box-intro { font: italic 700 11pt/1.4 Arial, sans-serif; margin-bottom: 2mm; }
.nt-box-item { font: italic 11pt/1.6 Arial, sans-serif; padding: 1mm 0; }
.nt-box-item::before { content: '• '; font-style: normal; }
.nt-results { padding: 5mm 4mm 0; }
.nt-res-head { color: #2BA3DB; font: 700 11pt/1.4 Arial, sans-serif; margin-top: 3mm; text-decoration: underline; text-decoration-color: #c9e9f7; text-underline-offset: 3px; }
.nt-res-text { font: 11pt/1.55 Arial, sans-serif; margin-bottom: 2mm; }
.nt-bottom { display: flex; align-items: center; gap: 3mm; background: var(--nt-blue); color: #fff; font: 900 14pt/1.3 'Arial Narrow', Arial, sans-serif; padding: 2mm 4mm; margin-top: auto; margin-bottom: 22mm; }
.nt-hand { font-size: 16pt; }
.bk-page.bk-back { padding: 0; }
.bk-back-img { width: 100%; height: 100%; object-fit: cover; }
.bk-back-empty { margin: auto; max-width: 70%; text-align: center; color: #8a8f9c; font: 600 .95rem/1.5 var(--font); border: 2px dashed #c9ccd6; border-radius: 14px; padding: 30px; }
.bk-page.bk-back { align-items: center; justify-content: center; }
@media (max-width: 1280px) { .bk { grid-template-columns: 236px minmax(0, 1fr) 290px; } }
@media (max-width: 960px) {
  .bk { grid-template-columns: 1fr; height: auto; }
  .bk-tools, .bk-props { border: 0; border-bottom: 1px solid var(--line); }
  .bk-canvas { padding: 16px; max-height: 80vh; }
  .bk-actions { margin-top: 0; }
}
@media print {
  @page { size: A4; margin: 0; }
  body:has(.bk) { background: #fff !important; }
  .admin-body.is-tool .admin-sidebar, .admin-body.is-tool .admin-topbar, .admin-body.is-tool .flash-stack,
  .bk-tools, .bk-props, .bk-page-tools, .bk-dialog, .bk-el-controls, .bk-col-empty, .bk-drop-line, .bk-img-placeholder { display: none !important; }
  .admin-body.is-tool, .admin-body.is-tool .admin-main, .admin-body.is-tool .admin-content, .bk { display: block; height: auto; padding: 0; background: #fff; }
  .bk-canvas { overflow: visible; padding: 0; background: none; }
  .bk-pages { display: block; min-width: 0; }
  .bk-page { box-shadow: none; break-after: page; background-image: none; }
  .bk-el, .bk-el.is-selected { border-color: transparent !important; background: none !important; }
  .bk-col.is-overflow { box-shadow: none; }
  .bk-col.is-overflow::after { display: none; }
  .bk-spacer { border: 0; color: transparent; }
  .bk-page [contenteditable] { box-shadow: none !important; }
}

/* 21 — Cevap anahtarı görseli oluşturucu (yönetim) */
.ak-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 20px; }
.ak-controls .radio-pills { align-self: center; }
.ak-grow { flex: 1 1 220px; }
.ak-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 20px; align-items: start; }
.ak-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ak-preview { position: sticky; top: 86px; }
.ak-canvas { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ak-section { display: flex; flex-direction: column; gap: 10px; }
.ak-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ak-sec-head h3 { margin: 0; font-size: 1rem; }
.ak-sec-tools { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.ak-count { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.ak-count .input { padding: 0 8px; }
.ak-quick { letter-spacing: .12em; text-transform: uppercase; }
.ak-rows { display: flex; flex-direction: column; gap: 3px; }
.ak-row { display: grid; grid-template-columns: 26px repeat(6, 1fr); gap: 4px; align-items: center; padding: 2px 4px; border-radius: 8px; }
.ak-row:nth-child(even) { background: var(--card-2); }
.ak-num { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--subtle); text-align: right; padding-right: 4px; }
.ak-bubble { width: 26px; height: 26px; justify-self: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--muted); font: 700 .68rem/1 var(--mono); cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .12s var(--ease); }
.ak-bubble:hover { border-color: var(--ink); color: var(--ink); }
.ak-bubble.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); animation: bubble-in .3s var(--ease) both; }
.ak-bubble.is-cancel { border-style: dashed; }
.ak-bubble.is-cancel.is-on { background: var(--hi); border: 1.5px solid #18160f; color: #18160f; }
.ak-bubble:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
@media (max-width: 1100px) { .ak-layout { grid-template-columns: 1fr; } .ak-preview { position: static; order: -1; } }

.grow { flex: 1 1 260px; min-width: 0; }