/* Color Palette */
:root {
    --ink: #17140f;
    --panel: #221e18;
    --panel-2: #2b271f;
    --paper: #ffffff;
    --paper-alt: #ededed;
    --paper-dim: #cbbfa0;
    --hazard: #f5b400;
    --hazard-deep: #c98d00;

    /* Subject Colors */
    --turkce: #D62828;
    --matematik: #1B4B91;
    --fen: #0E9AA7;
    --inkilap: #6B4423;
    --din: #0B6E4F;
    --ingilizce: #5B2A86;
}

/* Ustalaş paper test: structural print cues, branded with the landing-page tokens. */
.test-shell { --paper-line: color-mix(in srgb, var(--ink) 18%, var(--paper)); --paper-muted: color-mix(in srgb, var(--paper-dim) 75%, var(--paper)); max-width: 100%; margin: 0 auto; padding: 1.5rem 0 3rem; }
.test-intro { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; max-width: 760px; margin: 0 auto 1rem; }.test-intro .eyebrow,.test-instruction,.test-note { margin: 0; }.test-instruction,.test-note { color: var(--paper-dim); font-size: .85rem; }.test-note { color: var(--hazard); font: 600 .68rem 'IBM Plex Mono',monospace; text-transform: uppercase; }.answer-inputs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.test-paged { margin: 0 auto; }.print-page { position: relative; display: flex; flex-direction: column; width: min(100%,760px); aspect-ratio: 210/297; margin: 0 auto; padding: 3.2% 4.7% 2.4%; overflow: hidden; background: #ffffff; color: var(--ink); box-shadow: 0 18px 45px color-mix(in srgb,var(--ink) 72%,transparent),0 2px 0 var(--paper-dim); }.print-page::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; background: repeating-linear-gradient(0deg,transparent 0,transparent 3px,var(--ink) 3px,transparent 4px); mix-blend-mode: multiply; }.print-header-band,.print-columns,.print-footer { position: relative; z-index: 1; }
.print-header-band { flex: 0 0 auto; display: grid; grid-template-columns: auto auto 1fr; gap: .65rem; align-items: center; padding-bottom: .75rem; border-bottom: 2px solid var(--subject-accent); }.paper-brand { display: flex; align-items: center; gap: .45rem; color: var(--ink); font: 900 1.35rem/1 'Big Shoulders',sans-serif; }.mascot-badge { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--subject-accent); overflow: hidden; }.paper-mascot { width: 2.8rem; height: 2.8rem; transform: translateY(.2rem); }.mascot-skin { fill: #ffffff; }.mascot-clothes { fill: var(--hazard); }.mascot-feature { fill: var(--ink); }.paper-subject { padding: .35rem .55rem; color: var(--subject-accent); border-left: 2px solid var(--subject-accent); font: 900 1.05rem/1 'Big Shoulders',sans-serif; text-transform: uppercase; }
.print-metadata { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--paper-line); }.print-metadata div { min-width: 0; padding: .3rem .38rem; border-left: 1px solid var(--paper-line); }.print-metadata div:first-child { border-left: 0; }.print-metadata span,.print-metadata strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.print-metadata span,.omr-title,.paper-page-number { color: var(--paper-muted); font: 600 .48rem/1.2 'IBM Plex Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }.print-metadata strong { margin-top: .2rem; color: var(--ink); font: 600 .57rem/1.15 'IBM Plex Mono',monospace; }
.print-columns { flex: 1 1 auto; min-height: 0; display: flex; gap: 4.8%; padding: .85rem 0 .65rem; }.print-column { flex: 1 1 0; min-width: 0; }.paper-question { min-width: 0; margin: 0 0 .72rem; padding: 0 0 .58rem; border-bottom: 1px solid var(--paper-line); cursor: zoom-in; break-inside: avoid; }.paper-question:hover,.paper-question:focus-visible { outline: 2px solid var(--subject-accent); outline-offset: 3px; }.question-heading { display: flex; align-items: center; gap: .35rem; }.question-number { color: var(--subject-accent); font: 900 0.875rem/1 'Arial',sans-serif; }.question-rule { height: 1px; flex: 1; background: var(--paper-line); }.question-content { margin: .38rem 0 .5rem; font: 600 0.833rem/1.22 'Arial','Helvetica Neue',sans-serif; }.paper-options { display: grid; grid-template-columns: 1fr 1fr; gap: .28rem .45rem; }.paper-option { display: flex; align-items: flex-start; gap: .25rem; min-width: 0; padding: .22rem .28rem; cursor: pointer; }.paper-option:hover { background: color-mix(in srgb,var(--hazard) 16%,transparent); }.paper-option input,.omr-choice input,.modal-omr-choice input { position: absolute; opacity: 0; pointer-events: none; }.option-letter { color: var(--subject-accent); font: 800 0.833rem/1.25 'Arial',sans-serif; }.option-copy { min-width: 0; font: 500 0.833rem/1.25 'Arial',sans-serif; }
.print-footer { flex: 0 0 auto; border-top: 2px solid var(--subject-accent); padding-top: .52rem; }.omr-form { border: 1px solid var(--paper-line); padding: .42rem .5rem .38rem; }.omr-title { display: flex; justify-content: space-between; color: var(--subject-accent); }.omr-title small { color: var(--paper-muted); font: 500 .46rem 'IBM Plex Mono',monospace; text-transform: none; letter-spacing: 0; }.omr-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .35rem .6rem; margin-top: .4rem; }.omr-question { display: flex; align-items: center; gap: .28rem; }.omr-number { min-width: 1.1rem; font: 600 .57rem 'IBM Plex Mono',monospace; text-align: right; }.omr-bubbles { display: flex; gap: .16rem; }.omr-choice { position: relative; display: grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer; font: 600 .5rem 'IBM Plex Mono',monospace; }.omr-choice:hover,.omr-choice.selected { border-color: var(--hazard-deep); background: var(--hazard); color: var(--ink); }.paper-page-number { margin-top: .45rem; text-align: right; }
.test-controls { position: sticky; bottom: 1rem; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(100%,760px); margin: 1rem auto 0; padding: .55rem .7rem; background: color-mix(in srgb,var(--panel) 96%,transparent); border: 1px solid var(--panel-2); border-radius: 999px; box-shadow: 0 10px 30px color-mix(in srgb,var(--ink) 45%,transparent); }.test-controls .button { padding: .65rem 1rem; font-size: .82rem; }.control-status { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--paper-dim); font: 600 .68rem 'IBM Plex Mono',monospace; text-transform: uppercase; }.control-status #timer { color: var(--hazard); font: 600 .75rem 'IBM Plex Mono',monospace; }.minute-entry { display: flex; align-items: center; gap: .4rem; color: var(--paper-dim); }.minute-entry input { width: 6.5rem; padding: .3rem .45rem; background: var(--panel-2); color: var(--paper); border: 1px solid var(--paper-dim); font: 600 .68rem 'IBM Plex Mono',monospace; }.test-empty { max-width: 760px; margin: 4rem auto; padding: 3rem; background: var(--panel); border: 1px solid var(--panel-2); }

/* Ekran modu: "Başla" oncesi mozaik/kapı (Samed, 2026-09-20: "sayaç
   başlamadan, başla komutu verilmeden sorular görünür olmamalı, üzeri
   mozaikli şekilde sayfada yer almalı"). Sorular JS ile zaten sayfaya
   basılıyor - .mozaik yalnız bulanıklaştırıp etkileşimi kapatıyor,
   "Başla" tıklanınca kaldırılıyor. */
.test-paged.mozaik {
    filter: blur(20px) saturate(0.65);
    pointer-events: none;
    user-select: none;
}

.start-gate {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* KRİTİK: "Başla"ya basınca JS bu elementin `hidden` özelliğini true
   yapıyor (bkz. test.html), fakat yukarıdaki `display: flex` YAZAR
   kuralı tarayıcının `[hidden] { display: none }` UA kuralını HER ZAMAN
   ezer — sonuç: kutu asla ekrandan gitmiyor, testi başlatamıyorsun
   (Samed, 2026-09-20: "başla düğmesine basmama rağmen test açılmıyor,
   bilgi kutucuğu ekrandan gitmiyor"). Bu kural olmadan `hidden`
   özelliğinin hiçbir etkisi yoktu. */
.start-gate[hidden] { display: none; }

.start-gate-card {
    max-width: 440px;
    padding: 2rem 2.25rem;
    background: var(--panel);
    border: 2px solid var(--hazard);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.start-gate-card h2 { margin: 0 0 .75rem; }
.start-gate-card p { color: var(--paper-dim); margin: 0 0 1.4rem; }

#timer.sure-asildi { color: var(--turkce); }

/* Kağıt modu: soru metni/görseli EKRANDA gösterilmez (Samed, 2026-09-20:
   "kağıttan çözmeyi seçerse ... ekranda testi göremez") - yalnız cevap
   anahtarı girilir. .anahtar-izgara'nın (e-kitap, salt-okunur gösterim)
   aksine burada her kutu TIKLANABİLİR bir A/B/C/D seçici taşıyor. */
.kagit-cevap-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .6rem;
    margin: 1.25rem 0;
}

.kagit-cevap-kutu {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 8px;
}

.kagit-cevap-no {
    font: 700 .8rem 'IBM Plex Mono', monospace;
    color: var(--paper-dim);
    min-width: 1.4rem;
    text-align: right;
}

.kagit-cevap-secim { display: flex; gap: .3rem; }

.kagit-cevap-sik {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--panel-2);
    border-radius: 50%;
    font: 700 .72rem 'IBM Plex Mono', monospace;
    color: var(--paper-dim);
    cursor: pointer;
}

.kagit-cevap-sik input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

.kagit-cevap-sik.selected {
    background: var(--hazard);
    border-color: var(--hazard);
    color: var(--ink);
}
.modal-question { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 1.2rem; background: color-mix(in srgb,var(--ink) 86%,transparent); }.modal-question.active { display: flex; }.modal-question-card { position: relative; width: min(100%,780px); max-height: 88vh; overflow-y: auto; padding: 2.5rem; background: var(--panel); border: 2px solid var(--hazard-deep); }.modal-close { position: absolute; top: .6rem; right: .8rem; width: 2rem; height: 2rem; padding: 0; background: transparent; color: var(--paper-dim); font: 400 1.8rem 'Baloo 2',sans-serif; }.modal-question-card h2 { margin: .5rem 0 1.5rem; color: var(--paper); font-size: 1.7rem; line-height: 1.2; }.modal-omr { display: grid; gap: .5rem; }.modal-omr-choice { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: .7rem; padding: .7rem; background: var(--panel-2); border: 1px solid transparent; cursor: pointer; }.modal-omr-choice:hover,.modal-omr-choice.selected { border-color: var(--hazard); background: color-mix(in srgb,var(--hazard) 14%,var(--panel-2)); }.modal-omr-choice span { grid-row: 1 / span 2; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid var(--paper-dim); border-radius: 50%; color: var(--paper); font: 600 .7rem 'IBM Plex Mono',monospace; }.modal-omr-choice.selected span { background: var(--hazard); border-color: var(--hazard); color: var(--ink); }.modal-omr-choice em { color: var(--paper-dim); font: normal 500 .85rem/1.25 'Baloo 2',sans-serif; }
@media (max-width:760px) { .test-intro { display: block; }.test-instruction { margin-top: .3rem; }.print-page { width: 100%; padding: 4%; }.print-header-band { grid-template-columns: auto 1fr; }.paper-subject { grid-column: 2; grid-row: 1; }.print-metadata { grid-column: 1 / -1; }.test-controls { border-radius: 1rem; flex-wrap: wrap; justify-content: center; }.control-status { order: -1; width: 100%; }.test-controls .button { flex: 1; }.omr-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:480px) { .print-page { aspect-ratio: auto; min-height: 760px; }.print-header-band { grid-template-columns: 1fr; }.paper-subject { grid-column: 1; grid-row: auto; border-left: 0; border-top: 2px solid var(--subject-accent); }.print-metadata { grid-column: 1; grid-template-columns: repeat(2,1fr); }.print-columns { flex-direction: column; gap: 0; }.omr-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    font-family: 'Baloo 2', system-ui, sans-serif;
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-weight: 400;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Big Shoulders', sans-serif;
    font-weight: 900;
    margin: 0;
}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

.label, .label-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

/* Topbar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--panel);
    border-bottom: 2px solid var(--panel-2);
}

.topbar .brand {
    font-family: 'Big Shoulders', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--hazard);
    text-decoration: none;
    /* Ana sayfaya dönüş bağlantısı; dokunmatikte rahat isabet etsin diye
       metin yüksekliğinden bağımsız bir hedef alanı. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.brand-mascot {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

.topbar .brand:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
    border-radius: 4px;
}

.topbar nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.topbar nav a {
    color: var(--paper);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
    /* Dokunmatik hedefi: metin yüksekliği tek başına ~24px kalıyordu,
       parmakla isabet ettirmek zor. Görünümü değiştirmeden tıklama
       alanını büyütüyoruz. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
}

.topbar nav a:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
    border-radius: 4px;
}

.topbar nav a:hover {
    color: var(--hazard);
}

.topbar nav .muted {
    color: var(--paper-dim);
}

/* Container */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 6vw;
    flex: 1;
    min-width: 0;
}

/* Sayfa kabuğu: sol menü (varsa) + içerik. Sidebar block'u boşsa
   .app-shell tek çocuklu kalır, görünüm eskisiyle birebir aynıdır
   (Samed, 2026-09-18 -- şu an sadece dashboard bunu dolduruyor). */
.app-shell {
    display: flex;
    align-items: flex-start;
}

/* Form */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 360px;
}

.form label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.form input[type=text],
.form input[type=password],
.form input[type=number],
.form input[type=email],
.form input[type=tel],
.form select,
.form textarea {
    padding: 0.75rem;
    background: var(--panel);
    color: var(--paper);
    border: 2px solid var(--paper-dim);
    border-radius: 0;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.form input[type=text]:focus,
.form input[type=password]:focus,
.form input[type=number]:focus,
.form input[type=email]:focus,
.form input[type=tel]:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--hazard);
    background: var(--panel-2);
}

/* Geri bildirim kanali (Samed, 2026-09-20) */
.geri-bildirim-satir { align-items: center; }

.geri-bildirim-durum {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.geri-bildirim-durum.durum-acik { background: color-mix(in srgb, var(--hazard) 24%, var(--panel)); color: var(--paper); }
.geri-bildirim-durum.durum-yanitlandi { background: color-mix(in srgb, var(--din) 24%, var(--panel)); color: var(--paper); }
.geri-bildirim-durum.durum-kapali { background: var(--panel-2); color: var(--paper-dim); }

.bildirim-rozet-kucuk {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0 0.35rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    background: var(--hazard);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.geri-bildirim-mesajlar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 1.25rem 0;
}

.geri-bildirim-mesaj {
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--panel-2);
}

.geri-bildirim-mesaj.yazan-admin { border-left: 3px solid var(--hazard); }
.geri-bildirim-mesaj.yazan-system { border-left: 3px solid var(--panel-2); }
.geri-bildirim-mesaj.yazan-user { border-left: 3px solid var(--din); }

.geri-bildirim-mesaj-baslik {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}

.geri-bildirim-mesaj p { margin: 0; white-space: pre-line; }

.admin-filtre-sekmeleri {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.admin-filtre-sekmeleri a {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    color: var(--paper-dim);
    font-size: 0.85rem;
}

.admin-filtre-sekmeleri a.aktif {
    background: var(--hazard);
    border-color: var(--hazard);
    color: var(--ink);
    font-weight: 600;
}

/* Buttons */
button, .button {
    display: inline-block;
    padding: 15px 28px;
    background: var(--hazard);
    color: var(--ink);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Baloo 2', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

button:hover, .button:hover {
    background: var(--hazard-deep);
    transform: translateY(-2px);
}

button:active, .button:active {
    transform: translateY(0);
}

button:disabled {
    background: var(--paper-dim);
    cursor: not-allowed;
    transform: none;
}

button.secondary, .button.secondary {
    background: var(--panel-2);
    color: var(--paper);
}

button.secondary:hover, .button.secondary:hover {
    background: var(--panel);
}

/* Text Styles */
.error { color: #ff6b6b; font-weight: 600; }
.success { color: #51cf66; font-weight: 600; }
.muted { color: var(--paper-dim); }

/* Test Container — sonuç/çözüm/cevap girişi sayfalarının (result.html,
   test_solution.html, ebook_*.html) ortak sarmalayıcısı. Önceden
   background: var(--ink) idi (her zaman koyu, temadan bağımsız) -
   içindeki .mascot-section/.summary-table/.question-card zaten kendi
   var(--panel) zeminini taşıyor, o yüzden bu sadece etraflarında
   temadan kopuk koyu bir çerçeve bırakıyordu (Samed, 2026-09-20:
   "adım adım çözüme girdiğimde tema yine farklı"). Kaldırıldı - artık
   sayfanın normal (tema-acik) arka planı görünüyor, sitenin geri
   kalanıyla aynı. .test-shell (gerçek test çözme ekranı, kağıt
   üzerinde odaklı koyu "sahne" tasarımı) ayrı bir sınıf, buna
   dokunulmadı. */
.test-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.test-header {
    background: var(--panel);
    padding: 2rem 6vw;
    border-bottom: 2px solid var(--panel-2);
}

.test-header h1 {
    margin: 0 0 1rem 0;
}

.test-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.95rem;
    color: var(--paper-dim);
}

#timer {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--hazard);
    font-variant-numeric: tabular-nums;
}

.test-content {
    flex: 1;
    padding: 2rem 6vw;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
}

.question-wrapper {
    margin-bottom: 2rem;
}

.question-card {
    background: var(--panel);
    padding: 2rem;
    border: 2px solid var(--panel-2);
    border-radius: 0;
}

.question-card h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--paper);
    line-height: 1.4;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--panel-2);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}

.option-label:hover {
    background: var(--ink);
    border-color: var(--hazard);
}

.option-label input[type=radio] {
    cursor: pointer;
    width: 20px;
    height: 20px;
    accent-color: var(--hazard);
}

.option-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--paper);
}

/* Navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--panel-2);
}

#question-counter {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--hazard);
    font-size: 0.95rem;
}

#prev-btn, #next-btn {
    min-width: 120px;
}

/* Paged Test Layout */
.test-paged {
    margin-bottom: 2rem;
}

.test-page {
    background: var(--panel);
    border: 2px solid var(--panel-2);
    padding: 2.5rem;
    page-break-after: always;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.question-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    padding: 1.5rem;
    background: var(--panel-2);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.question-row:hover {
    border-color: var(--hazard);
    background: var(--ink);
}

.question-text {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.question-number {
    font: 900 0.875rem/1 'Arial',sans-serif;
    color: var(--hazard);
    flex: 0 0 auto;
    padding-top: 0.2rem;
}

.question-content {
    font: 600 0.833rem/1.22 'Arial','Helvetica Neue',sans-serif;
    color: var(--paper);
    flex: 1;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.options-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.option-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--ink);
    border: 2px solid var(--panel-2);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}

.option-checkbox:hover {
    border-color: var(--hazard);
    background: var(--panel);
}

.option-checkbox input[type="radio"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--hazard);
}

.option-letter {
    font: 800 0.833rem/1.25 'Arial',sans-serif;
    color: var(--hazard);
    min-width: 20px;
}

.option-checkbox .option-text {
    font-size: 0.85rem;
    color: var(--paper);
}

/* Modal for zoomed question */
.modal-question {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-question.active {
    display: flex;
}

.modal-content {
    background: var(--panel);
    border: 2px solid var(--panel-2);
    padding: 3rem;
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    border-radius: 0;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--paper-dim);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--hazard);
}

.modal-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-option-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--panel-2);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}

.modal-option-label:hover {
    background: var(--ink);
    border-color: var(--hazard);
}

.modal-option-label input[type="radio"] {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--hazard);
}

.modal-option-letter {
    font-weight: 700;
    color: var(--hazard);
    min-width: 24px;
}

.modal-option-label span:last-child {
    flex: 1;
    font-size: 0.95rem;
    color: var(--paper);
}

/* Result Container */
.result-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 6vw;
    max-width: 1120px;
    margin: 0 auto;
}

.mascot-section {
    display: flex;
    gap: 2rem;
    align-items: center;
    background: var(--panel);
    padding: 2rem;
    border: 2px solid var(--panel-2);
}

.mascot-box {
    flex: 0 0 200px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mascot-message {
    flex: 1;
}

.mascot-message h2 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
}

.mascot-message p {
    font-size: 1rem;
    color: var(--paper-dim);
    margin: 0;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}

.summary-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--panel-2);
    font-size: 0.95rem;
}

.summary-table td:first-child {
    color: var(--paper-dim);
    font-weight: 600;
    width: 40%;
}

.summary-table td:last-child {
    color: var(--paper);
    text-align: right;
    font-weight: 500;
}

.success-rate {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--hazard);
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-buttons a,
.action-buttons button {
    width: 100%;
    text-align: center;
    padding: 1rem;
}

/* Topic Grid */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 2rem 6vw;
    max-width: 1120px;
    margin: 0 auto;
}

.topic-card {
    background: var(--panel);
    padding: 1.5rem;
    border: 2px solid var(--panel-2);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.topic-card:hover {
    border-color: var(--hazard);
    transform: translateY(-4px);
}

.topic-card h3 {
    margin-top: 0;
    color: var(--hazard);
}

.topic-card p {
    font-size: 0.9rem;
    color: var(--paper-dim);
    margin: 0.5rem 0 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 2rem 6vw;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1rem; }

    .topbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 4vw;
    }

    .topbar nav {
        width: 100%;
        justify-content: center;
    }

    .test-header {
        padding: 1.5rem 4vw;
    }

    .test-content {
        padding: 1.5rem 4vw;
    }

    .test-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .mascot-section {
        flex-direction: column;
        text-align: center;
    }

    .mascot-box {
        flex: 0 0 160px;
        height: 200px;
    }

    .summary-table td:first-child {
        width: 50%;
    }

    .navigation {
        flex-direction: column;
    }

    #prev-btn, #next-btn {
        width: 100%;
    }

    .test-page {
        padding: 1.5rem;
        min-height: 500px;
        gap: 1.5rem;
    }

    .question-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .options-pair {
        grid-template-columns: 1fr 1fr;
    }

    .topic-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
        padding: 1.5rem 4vw;
    }
}

@media (max-width: 600px) {
    .topbar .brand {
        font-size: 1.25rem;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.1rem; }

    .container,
    .test-header,
    .test-content,
    .result-container {
        padding: 1.5rem 4vw;
    }

    .question-card {
        padding: 1.5rem;
    }

    .question-card h2 {
        font-size: 1.1rem;
    }

    .option-label {
        padding: 0.75rem;
    }

    .mascot-section {
        padding: 1.5rem;
    }

    .mascot-box {
        flex: 0 0 140px;
        height: 180px;
    }

    .form {
        max-width: 100%;
    }
}

/* Keep the paper treatment ahead of legacy question-card rules. */
.test-shell .question-number { color: var(--subject-accent); font: 900 0.875rem/1 'Arial',sans-serif; }
.test-shell .question-content { color: var(--ink); font: 600 0.833rem/1.22 'Arial','Helvetica Neue',sans-serif; }
.test-shell .option-letter { color: var(--subject-accent); font: 800 0.833rem/1.25 'Arial',sans-serif; }
.test-shell .modal-question { background: color-mix(in srgb, var(--ink) 86%, transparent); }

/* Archived-paper structure: Ustalaş tokens remain the only palette source. */
.test-shell, .test-shell * { font-family: 'Baloo 2', 'Noto Sans', 'Segoe UI Symbol', sans-serif; }
.test-shell .label, .test-shell .eyebrow, .print-metadata th, .print-metadata td,
.paper-page-number, .omr-number, .omr-choice, .omr-title small { font-family: 'IBM Plex Mono', 'Noto Sans', 'Segoe UI Symbol', monospace; }
.print-page { width: min(100%, 860px); aspect-ratio: 210 / 297; padding: 3.4% 4.2% 2.5%; background: #ffffff; color: var(--ink); overflow: hidden; }
.print-page::after { opacity: .035; background: repeating-linear-gradient(0deg, transparent 0, transparent 4px, var(--ink) 4px, transparent 5px); }
.watermark { position: absolute; inset: 42% 0 auto; z-index: 0; color: var(--ink); opacity: .045; text-align: center; font: 900 5rem/1 'Big Shoulders', sans-serif; transform: rotate(-18deg); pointer-events: none; }
.print-header-band { display: block; padding: 0 0 .6rem; border-bottom: 0; }
.paper-brand { float: left; width: 25%; padding-top: .25rem; font-size: 1.4rem; }
.paper-subject { margin: 0 0 .45rem 26%; padding: .1rem 0 0; border: 0; color: var(--subject-accent); text-align: center; font-size: 1.45rem; text-transform: none; }
.mascot-badge { width: 2.65rem; height: 2.65rem; border-color: var(--subject-accent); background: transparent; }
.print-metadata { width: 100%; display: table; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--panel-2); background: color-mix(in srgb, #ffffff 92%, var(--panel-2)); }
.print-metadata tr { display: table-row; }
.print-metadata th, .print-metadata td { display: table-cell; padding: .27rem .4rem; border: 1px solid var(--panel-2); text-align: left; vertical-align: middle; font-size: .62rem; line-height: 1.2; }
.print-metadata th { width: 14%; color: var(--subject-accent); font-weight: 700; }
.print-metadata td { width: 36%; color: var(--ink); font-weight: 500; }
.paper-instruction { position: relative; z-index: 1; margin: .65rem 0 .5rem; color: color-mix(in srgb, var(--ink) 70%, #ffffff); font-size: .78rem; }
.print-columns { position: relative; z-index: 1; display: flex; height: 100%; gap: 4.5%; padding: .35rem 0 .6rem; }
.print-column { flex: 1 1 0; min-width: 0; }
.paper-question { display: block; min-width: 0; margin: 0 0 .85rem; padding: 0 0 .55rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, #ffffff); break-inside: avoid; }
.question-line { display: flex; align-items: flex-start; gap: .3rem; }
.question-number { flex: 0 0 auto; color: var(--ink); font: 900 0.875rem/1 'Arial',sans-serif; }
.question-content-wrap { min-width: 0; flex: 1; }
.question-content { margin: 0 0 .4rem; color: var(--ink); font: 600 0.833rem/1.22 'Arial','Helvetica Neue',sans-serif; }
.question-content br { line-height: 1.55; }
.context-table { width: 100%; margin: 0 0 .45rem; border-collapse: collapse; background: #ffffff; }
.context-table th, .context-table td { padding: .2rem .34rem; border: 1px solid color-mix(in srgb, var(--subject-accent) 48%, #ffffff); text-align: left; font-size: .67rem; line-height: 1.25; }
.context-table th { width: 52%; background: var(--paper-alt); font-weight: 700; }
.question-content-wrap:has(.context-table) > .question-content { font-weight: 500; }
.question-visual { display: block; width: 100%; max-width: 100%; max-height: 9.5rem; margin: .3rem auto .48rem; object-fit: contain; aspect-ratio: 7 / 5; background: #ffffff; }
/* Kuyu `genislik: "genis"` etiketli görseller (Samed, 2026-09-22 patron
   kararı — ortak baskı politikası): sabit 7/5 oranlı kutu bu görselleri
   (ör. 13 sütunlu tablo, gerçek oran ~3,6/1) küçük bir şeride ezip
   okunmaz yapıyordu. Ekranda iki sütunlu baskı ızgarasını (print-columns)
   bozmadan sütun genişliğinde, gerçek en-boy oranıyla ve çok daha yüksek
   bir üst sınırla gösterilir — DOCX/PDF'teki tam-sayfa-genişliği kararının
   ekran tarafındaki karşılığı bu kadarı; sütunu kırıp tam sayfaya yaymak
   (e-kitap/PDF'te yapılan) burada print-columns'un sabit iki-sütun
   ızgarasını değiştirmeyi gerektirir, bu geçişte KAPSAM DIŞI bırakıldı. */
.question-visual-genis { aspect-ratio: auto; max-height: 20rem; }
.paper-options { display: flex; flex-wrap: wrap; gap: .12rem .55rem; }
.paper-options.stacked { display: grid; gap: .13rem; }
.paper-option { min-width: 0; padding: .1rem 0; gap: .22rem; align-items: flex-start; }
.option-letter { flex: 0 0 auto; color: var(--ink); font: 800 0.833rem/1.25 'Arial',sans-serif; }
.option-copy { color: var(--ink); font: 500 0.833rem/1.25 'Arial',sans-serif; }
sup { position: relative; top: -.18em; font-size: .72em; line-height: 0; vertical-align: baseline; }
.print-footer { position: relative; z-index: 1; margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--panel-2); }
.omr-form { padding: .38rem .45rem .3rem; border: 1px solid var(--panel-2); background: color-mix(in srgb, #ffffff 92%, var(--panel-2)); }
.omr-title { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.omr-title strong { color: var(--subject-accent); font: 800 .8rem/1.2 'Big Shoulders', sans-serif; }
.omr-title small { color: var(--ink); font-size: .52rem; text-transform: none; letter-spacing: 0; }
.omr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .22rem .55rem; margin-top: .32rem; }
.omr-question { display: flex; align-items: center; gap: .18rem; }
.omr-number { min-width: 1.3rem; color: var(--ink); font-size: .56rem; text-align: right; }
.omr-bubbles { display: flex; gap: .18rem; }
.omr-choice { width: auto; height: auto; border: 0; border-radius: 0; color: var(--ink); font-size: .55rem; }
.omr-choice:hover, .omr-choice.selected { border: 0; background: transparent; color: var(--hazard-deep); }
.omr-choice.selected span { display: inline-block; padding: 0 .08rem; border-radius: 50%; background: var(--hazard); color: var(--ink); }
.paper-page-number { margin-top: .3rem; color: color-mix(in srgb, var(--ink) 62%, #ffffff); text-align: center; font-size: .55rem; text-transform: none; letter-spacing: 0; }
.modal-question-card h2 { font-family: 'Baloo 2', 'Noto Sans', 'Segoe UI Symbol', sans-serif; }
.modal-question-prompt .question-content { font: 600 1rem/1.45 'Arial','Helvetica Neue',sans-serif; }
.modal-question-prompt .context-table th, .modal-question-prompt .context-table td { font-size: .9rem; }
.modal-question-prompt .question-visual { max-height: 25rem; }
.modal-question-prompt .question-visual-genis { max-height: 34rem; }
@media (max-width: 760px) { .print-page { width: 100%; aspect-ratio: auto; min-height: 900px; padding: 4%; }.paper-brand { float: none; width: auto; }.paper-subject { margin: .35rem 0; text-align: left; }.print-metadata th, .print-metadata td { font-size: .55rem; }.print-columns { flex-direction: column; gap: 0; }.omr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .print-metadata { table-layout: auto; }.print-metadata th { width: 22%; }.print-metadata td { width: 28%; }.omr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Student test sheet — mirrors the DOCX/LibreOffice document system. */
.test-intro {
    align-items: center;
    max-width: 860px;
}

.teaching-panel {
    max-width: 860px;
    margin: 0 auto 1.25rem;
    padding: 1.25rem 1.4rem;
    background: var(--panel);
    border: 2px solid var(--subject-accent);
    box-shadow: inset .35rem 0 0 var(--subject-accent);
}

.teaching-panel .eyebrow {
    margin: 0 0 .45rem;
    color: var(--hazard);
}

.teaching-panel h3,
.teaching-panel h4 {
    color: var(--paper);
}

.teaching-panel h4 {
    margin: 1rem 0 .35rem;
    font-size: 1rem;
}

.teaching-summary,
.teaching-panel ul {
    margin: 0;
    color: var(--paper-dim);
    line-height: 1.5;
}

.teaching-panel ul {
    padding-left: 1.25rem;
}

.teaching-panel li + li {
    margin-top: .3rem;
}

.paper-download {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .65rem 1rem;
    font: 700 .78rem/1 'IBM Plex Mono', monospace;
    text-transform: uppercase;
}

.print-page {
    width: min(100%, 860px);
    padding: 3.4% 4.2% 2.5%;
    background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(23, 20, 15, .025) 7px 8px),
        #ffffff;
}

.print-page::after {
    display: none;
}

.watermark {
    inset: 39% 0 auto;
    display: grid;
    justify-items: center;
    opacity: .045;
    transform: rotate(-18deg);
}

.watermark .paper-mascot {
    width: 11rem;
    height: 13.2rem;
}

.watermark span {
    margin-top: -1.2rem;
    font: 900 5rem/1 'Big Shoulders', sans-serif;
}

.print-header-band {
    padding-bottom: .55rem;
}

.paper-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.paper-brand {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 3rem;
    padding-top: 0;
    font: 900 1.45rem/1 'Big Shoulders', sans-serif;
    gap: .4rem;
}

.mascot-badge {
    display: block;
    width: auto;
    height: 3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.paper-mascot {
    width: auto;
    height: 100%;
    transform: none;
}

.paper-subject {
    flex: 1;
    min-height: 3rem;
    margin-left: 0;
    padding-top: .35rem;
    text-align: center;
    font: 900 1.65rem/1 'Big Shoulders', sans-serif;
}

.test-seal {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 2px dashed var(--ink);
    border-radius: 50%;
    text-align: center;
    line-height: 1.05;
}

.test-seal strong {
    font: 900 .95rem/1 'Big Shoulders', sans-serif;
    color: var(--subject-accent);
}

.test-seal strong small {
    display: block;
    margin-top: .05rem;
    font: 600 .42rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .06em;
    color: var(--ink);
}

.test-seal span,
.test-seal b {
    display: block;
    margin-top: .08rem;
    font: 600 .38rem/1.1 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ink);
}

.test-seal b {
    color: var(--hazard-deep);
}

.print-metadata {
    clear: both;
    border-color: var(--ink);
    background: transparent;
}

.print-metadata th,
.print-metadata td {
    padding: .25rem .38rem;
    border-color: color-mix(in srgb, var(--ink) 72%, #ffffff);
    font-size: .61rem;
}

.print-metadata th {
    background: color-mix(in srgb, var(--subject-accent) 8%, #ffffff);
}

.paper-instruction {
    margin: .62rem 0 .42rem;
    font-size: .74rem;
}

.print-columns {
    height: 100%;
    display: flex;
    gap: 4.5%;
    padding: .3rem 0 .45rem;
}

.paper-question {
    margin-bottom: .56rem;
    padding-bottom: .42rem;
    transition: background-color .15s ease, outline-color .15s ease;
}

.paper-question:hover {
    background: color-mix(in srgb, var(--subject-accent) 4%, transparent);
}

.question-number {
    font: 900 0.875rem/1 'Arial',sans-serif;
}

.question-content {
    margin-bottom: .28rem;
    font: 600 0.833rem/1.22 'Arial','Helvetica Neue',sans-serif;
}

.paper-options {
    gap: .08rem .5rem;
}

.paper-option {
    position: relative;
    min-height: 1.35rem;
    padding: .12rem .2rem;
    border-bottom: 1px solid transparent;
    border-radius: 2px;
}

.paper-option:hover,
.paper-option.selected,
.paper-option:has(input:focus-visible) {
    background: color-mix(in srgb, var(--hazard) 17%, transparent);
    border-bottom-color: var(--hazard-deep);
    outline: none;
}

.paper-option input,
.omr-choice input,
.modal-omr-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.paper-option.selected .option-letter {
    color: var(--ink);
    background: var(--hazard);
}

.option-letter {
    padding: 0 .08rem;
    font: 800 0.833rem/1.25 'Arial',sans-serif;
}

.option-copy {
    font: 500 0.833rem/1.25 'Arial',sans-serif;
}

.print-footer {
    border-top-color: color-mix(in srgb, var(--ink) 60%, #ffffff);
}

.omr-form {
    border-color: var(--subject-accent);
    background: color-mix(in srgb, var(--subject-accent) 4%, #ffffff);
}

.omr-grid {
    display: grid;
    grid-template-rows: repeat(var(--omr-rows), auto);
    grid-template-columns: repeat(var(--omr-columns), minmax(0, 1fr));
    grid-auto-flow: column;
    gap: .18rem .5rem;
}

.omr-choice {
    min-width: 1.25rem;
    min-height: 1.25rem;
}

.omr-choice:has(input:focus-visible) {
    outline: 2px solid var(--subject-accent);
    outline-offset: 2px;
}

.modal-question-card {
    background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(23, 20, 15, .025) 7px 8px),
        #ffffff;
    color: var(--ink);
    border-color: var(--hazard);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.modal-question-card .eyebrow,
.modal-question-card h2,
.modal-question-card .modal-close {
    color: var(--ink);
}

.modal-question-card h2 {
    font-size: 1.55rem;
}

.modal-omr-choice {
    min-height: 52px;
    background: color-mix(in srgb, var(--subject-accent) 6%, #ffffff);
    border-color: color-mix(in srgb, var(--ink) 18%, #ffffff);
}

.modal-omr-choice:hover,
.modal-omr-choice.selected,
.modal-omr-choice:has(input:focus-visible) {
    border-color: var(--subject-accent);
    background: color-mix(in srgb, var(--hazard) 18%, #ffffff);
    outline: none;
}

.modal-omr-choice span,
.modal-omr-choice em {
    color: var(--ink);
}

.modal-omr-choice span {
    border-color: var(--ink);
}

.pdf-error {
    max-width: 720px;
    margin: 8vh auto;
    padding: 2.5rem;
    background: var(--panel);
    border: 2px solid var(--hazard);
}

@media (max-width: 760px) {
    .test-intro {
        display: flex;
        align-items: flex-start;
    }

    .print-page {
        min-height: 980px;
    }

    .paper-brand {
        float: left;
        width: 42%;
    }

    .paper-subject {
        margin-left: 43%;
        text-align: right;
    }

    .print-columns {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 520px) {
    .test-intro {
        display: grid;
    }

    .paper-download {
        width: 100%;
        text-align: center;
    }

    .print-page {
        min-height: 1040px;
    }

    .paper-brand {
        float: none;
        width: auto;
    }

    .paper-subject {
        min-height: auto;
        margin: .35rem 0;
        text-align: left;
    }

    .print-metadata th,
    .print-metadata td {
        padding: .2rem;
        font-size: .52rem;
    }

    .omr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
    }
}

/* Screen pages use the PDF's server-side question assignment; questions never cross a page. */
.test-paged .print-page {
    height: auto;
    min-height: 1216px;
    aspect-ratio: auto;
    overflow: visible;
}

.test-paged .print-columns {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    display: flex;
    gap: 4.8%;
}

.test-paged .print-column {
    flex: 1 1 0;
    min-width: 0;
}

.test-paged .print-footer {
    flex: 0 0 auto;
}

.test-paged .omr-page-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 1rem;
}

@media (max-width: 760px) {
    .test-paged .print-columns {
        flex-direction: column;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paper-question,
    .paper-option,
    .modal-omr-choice {
        transition: none;
    }
}

/* ---- E-kitap cevap girişi (kilitli özellik: USTALAS_EBOOK_ANSWERS=1) ---- */

.ebook-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-bottom: 0.25rem;
}

.ebook-intro {
    max-width: 62ch;
    color: var(--paper-dim);
    margin-bottom: 1.25rem;
}

.ebook-kaydedildi {
    background: rgba(11, 110, 79, 0.18);
    border-left: 3px solid var(--din);
    padding: 0.6rem 0.9rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: 1rem;
}

/* Optik form görünümü: soru satırları, şık sütunları */
.ebook-sheet,
.ebook-hatalar {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.ebook-sheet th,
.ebook-sheet td,
.ebook-hatalar th,
.ebook-hatalar td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--panel-2);
    text-align: center;
}

.ebook-sheet thead th,
.ebook-hatalar thead th {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-dim);
    border-bottom: 2px solid var(--hazard);
}

.ebook-sheet tbody th[scope="row"],
.ebook-hatalar tbody th[scope="row"] {
    font-variant-numeric: tabular-nums;
    color: var(--hazard);
    width: 3rem;
}

.ebook-sheet label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.ebook-sheet input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--hazard);
    cursor: pointer;
}

.gorsel-gizle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Sonuç skoru */
.ebook-skor {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.25rem 0 1.75rem;
}

.ebook-skor > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.5rem;
}

.ebook-skor .sayi {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ebook-skor .dogru { color: var(--din); }
.ebook-skor .yanlis { color: var(--turkce); }
.ebook-skor .bos { color: var(--paper-dim); }
.ebook-skor .net { color: var(--hazard); }

.ebook-skor > div > span:last-child {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-top: 0.25rem;
}

/* Yanlış/boş tablosu */
.ebook-hatalar td {
    text-align: left;
}

.ebook-hatalar select,
.ebook-hatalar input[type="text"] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--panel);
    color: var(--paper);
    border: 1px solid var(--panel-2);
    border-radius: 4px;
}

.ebook-hatalar select:focus-visible,
.ebook-hatalar input:focus-visible,
.ebook-sheet input:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

.etiket {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
}

.etiket.dogru { background: rgba(11, 110, 79, 0.22); color: #7fd7b4; }
.etiket.yanlis { background: rgba(214, 40, 40, 0.22); color: #f3a0a0; }
.etiket.bos { background: var(--panel-2); color: var(--paper-dim); }

.ebook-cozum {
    white-space: nowrap;
    color: var(--hazard);
}

.ebook-cozum-bekliyor {
    background: var(--panel);
    border-left: 3px solid var(--hazard);
    padding: 1rem 1.15rem;
    border-radius: 0 4px 4px 0;
    margin: 1.25rem 0;
}

/* Gercek adim adim cozum metni - Kuyu satirlari "1. ... 2. ..." seklinde
   yeni satirla ayiriyor (bkz. question_repository), pre-line bunu
   korur. --din (yesil) ile "hazir/olumlu" olani .ebook-tebrik'ten
   ayirt ediliyor (Samed, 2026-09-20: SaaS musterilerine sinirsiz
   adim adim cozum). */
.cozum-metni {
    background: color-mix(in srgb, var(--din) 10%, var(--panel));
    border-left: 3px solid var(--din);
    padding: 1.1rem 1.25rem;
    border-radius: 0 4px 4px 0;
    margin: 1.25rem 0;
    white-space: pre-line;
    line-height: 1.6;
}

.ebook-tebrik {
    background: rgba(11, 110, 79, 0.18);
    border-left: 3px solid var(--din);
    padding: 0.9rem 1.1rem;
    border-radius: 0 4px 4px 0;
}

.ebook-tekrar {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* Sayfa gövdesinde genel bir <a> kuralı yok; bu sayfalardaki bağlantılar
   tarayıcı varsayılanı mavide kalmasın diye marka rengine çekiliyor. */
.ebook-tekrar a,
.ebook-cozum-bekliyor a {
    color: var(--hazard);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.ebook-tekrar a:hover,
.ebook-cozum a:hover,
.ebook-cozum-bekliyor a:hover,
.ebook-tekrar a:focus-visible,
.ebook-cozum:focus-visible,
.ebook-cozum-bekliyor a:focus-visible {
    border-bottom-color: currentColor;
}

.ebook-cozum:focus-visible,
.ebook-tekrar a:focus-visible,
.ebook-cozum-bekliyor a:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 3px;
    border-radius: 2px;
}

.ebook-cozum {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

@media (max-width: 760px) {
    .ebook-hatalar,
    .ebook-hatalar thead,
    .ebook-hatalar tbody,
    .ebook-hatalar tr {
        display: block;
    }

    .ebook-hatalar thead {
        display: none;
    }

    .ebook-hatalar tr {
        border: 1px solid var(--panel-2);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.9rem;
    }

    .ebook-hatalar td,
    .ebook-hatalar th[scope="row"] {
        display: block;
        border: none;
        text-align: left;
        padding: 0.25rem 0;
    }

    /* Sütun başlıkları gizlendiği için hücreler kendi etiketini taşır;
       yoksa "A" ve "B" yan yana durur ve hangisi öğrencinin cevabı,
       hangisi doğru şık olduğu anlaşılmaz. */
    .ebook-hatalar td[data-etiket]:not([data-etiket=""])::before {
        content: attr(data-etiket);
        display: inline-block;
        min-width: 3.6rem;
        margin-right: 0.5rem;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--paper-dim);
    }

    /* Sebep ve not alanları etiketin altına insin, yan yana sıkışmasın */
    .ebook-hatalar td[data-etiket="Sebep"],
    .ebook-hatalar td[data-etiket="Not"] {
        padding-top: 0.5rem;
    }

    .ebook-hatalar td[data-etiket="Sebep"]::before,
    .ebook-hatalar td[data-etiket="Not"]::before {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* ---- Panel: paket şeridi ve eylem kartları ---- */

.paket-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 2rem;
    padding: 0.9rem 1.15rem;
    background: var(--panel);
    border-radius: 10px;
    border-left: 4px solid var(--hazard);
}

.paket-serit.paket-uye { border-left-color: var(--din); }
.paket-serit.paket-hesap { border-left-color: var(--panel-2); }

.paket-rozet {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    background: var(--hazard);
    color: var(--ink);
    white-space: nowrap;
}

.paket-uye .paket-rozet { background: var(--din); color: #d7f5e8; }
.paket-hesap .paket-rozet { background: var(--panel-2); color: var(--paper-dim); }

.paket-aciklama {
    flex: 1;
    min-width: 240px;
    font-size: 0.92rem;
    color: var(--paper-dim);
}

.paket-yukselt {
    font-weight: 600;
    font-size: 0.88rem;
    background: var(--hazard);
    color: var(--ink);
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.paket-yukselt:hover { background: var(--hazard-deep); }
.paket-yukselt:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; }

.bolum-basligi {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin: 2rem 0 0.9rem;
}

/* Eylem kartları: açık olanlar davet eder, kilitli olanlar gerekçesini söyler */
.eylem-kartlari {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.eylem-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 10px;
    transition: border-color 0.15s, transform 0.15s;
}

.eylem-kart.acik:hover {
    border-color: var(--hazard);
    transform: translateY(-2px);
}

.eylem-kart.kilitli {
    opacity: 0.58;
    border-style: dashed;
}

.eylem-kart h3 {
    margin: 0;
    font-size: 1.15rem;
}

.eylem-kart p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--paper-dim);
}

.eylem-kart .kilit-rozet {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-dim);
    border: 1px solid var(--panel-2);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.eylem-kart .kilit-neden {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--hazard-deep);
}

.eylem-kart .eylem {
    margin-top: auto;
    padding-top: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--hazard);
    text-decoration: none;
}

.eylem-kart.kilitli .eylem { color: var(--paper-dim); }
.eylem-kart .eylem:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; }

/* Özet kutuları — dashboard üstündeki sayısal özet sırası (Samed,
   2026-09-20: "dashboardu biraz süsleyelim", Talebe Koçu'nun panelinden
   esinlenildi). */
.ozet-kartlari {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 0.5rem;
}

.ozet-kart {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.1rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 10px;
}

.ozet-etiket {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.ozet-deger {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--paper);
}

.ozet-deger-kucuk {
    font-size: 1.05rem;
    font-weight: 700;
}

.ozet-alt {
    font-size: 0.78rem;
    color: var(--paper-dim);
}

.ozet-link {
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--hazard);
    text-decoration: none;
}

.ozet-link:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; }

/* Özet kutusu grafikleri — yeni class değil, .sebep-bar (karne) ve .trend
   (gelişim gözlemi) burada standalone kullanılıyor; ikisi de normalde bir
   grid hücresinde otomatik genişlik alıyordu, kart içinde tek başına
   kullanılınca genişliği kendisi vermesi gerekiyor (Samed, 2026-09-20:
   "genel durumu temaya uygun grafiklerle destekleyelim"). */
.ozet-bar {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.ozet-trend {
    margin-top: 0.5rem;
}

/* En Zayıf Konu kutusundaki zayıf/ortalama/iyi karşılaştırması — .sebep-
   grafik normalde karne sayfasında bölüm başlığının hemen altında
   başlıyordu, kart içinde değer/alt-metinin altına biraz boşluk gerekti. */
.ozet-kart .sebep-grafik {
    margin-top: 0.5rem;
    gap: 0.35rem;
}

.ozet-kart .sebep-ad {
    font-size: 0.76rem;
    color: var(--paper-dim);
}

/* Konu listesi */
.konu-listesi {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.konu-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--panel);
    border-left: 4px solid var(--matematik);
    border-radius: 8px;
}

.konu-satir .konu-ad { font-weight: 600; }

.konu-satir .konu-sv {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--paper-dim);
}

/* Ders/konu seçim kartları (test-sec, geçmiş testlerim) — Samed,
   2026-09-20: "test çöz ekranında ders kartları aynı boyutta değil,
   simetrik gözükmüyor ... konu kartları da simetrik değil". Kök neden:
   `.konu-satir` yatay bir satırdı (isim solda, buton sağda, dikeyde
   ortalı) — ders/konu adı uzunluğu satırı 1 veya 2 satıra sardığında
   komşu kartlar farklı yükseklikte VE butonlar farklı Y konumunda
   görünüyordu. `.konu-satir`ın KENDİSİ değiştirilmedi çünkü "Bize Yaz"
   mesaj listesi (bkz. .geri-bildirim-satir) onun yatay halini
   kullanıyor — bunun yerine, yalnız kart görünümü istenen yerlerde
   (test_sec.html, test_history.html) EKLENEN bir modifier: dikey karta
   çevirir, buton içerik ne kadar satır tutarsa tutsun `justify-content:
   space-between` sayesinde HER ZAMAN kartın alt kenarında kalır — grid
   zaten aynı satırdaki kartları eşit yükseklikte tutuyor (bkz.
   .konu-listesi, display:grid + varsayılan stretch). */
.konu-kart {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.konu-kart .button { align-self: flex-start; }

.button.pasif {
    background: var(--panel-2);
    color: var(--paper-dim);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Kitaplarım: test rozetleri */
.kitap-blok { margin-bottom: 2.5rem; }

.test-rozetleri {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.test-rozet {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 6.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.test-rozet:hover { border-color: var(--hazard); }
.test-rozet:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }

.test-rozet .no {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--hazard);
}

.test-rozet .konu {
    font-size: 0.72rem;
    color: var(--paper-dim);
}

/* Hata karnesi: konu seçici (Samed, 2026-09-19 — "konu konu detay
   bölümü çok karmaşık, fırıldaktan konuyu seçmek karışıklığı düzeltir";
   eski konu×sebep tablosu bunun yerine geçti, .karne-tablo kaldırıldı). */
.konu-secici-alani {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 1.2rem;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
    background: var(--panel);
    border-radius: 999px;
    box-shadow: var(--kot-1, 0 1px 2px rgba(43, 36, 28, .08));
}

.konu-secici-alani .etiket {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
    white-space: nowrap;
}

.konu-secici {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 240px;
    max-width: 100%;
    padding: 0.55rem 2.2rem 0.55rem 0.9rem;
    background-color: var(--panel-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a4c3f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    color: var(--paper);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.konu-secici:hover { background-color: color-mix(in srgb, var(--hazard) 12%, var(--panel-2)); }

.konu-secici:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--hazard);
}

.konu-gizli { display: none !important; }

/* Ders bazlı sebep dağılım grafiği (Samed, 2026-09-19: "grafikler de
   eklemeliyiz"). Tek ders için tek büyüklük ölçümü -- kategorik değil,
   bu yüzden TEK renk (marka rengi), yalnız çubuk UZUNLUĞU değere göre
   değişir; sıralama zaten en sık sebep en üstte. */
.sebep-grafik {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sebep-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: 0.75rem 1rem;
    align-items: center;
}

.sebep-ad {
    font-size: 0.88rem;
    min-width: 0;
}

.sebep-bar {
    height: 0.6rem;
    border-radius: 999px;
    background: var(--panel-2);
    overflow: hidden;
}

.sebep-dolgu {
    display: block;
    width: var(--oran);
    height: 100%;
    border-radius: 999px;
    background: var(--hazard);
}

.sebep-adet {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    min-width: 1.6rem;
}

.ebook-kota-not {
    font-size: 0.82rem;
    color: var(--paper-dim);
}

.ebook-cozum-bekliyor.kota-doldu {
    border-left-color: var(--turkce);
}

/* ---- Gelişim Gözlem ---- */

.ders-ozet {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 2rem;
}

.ders-kart {
    display: block;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: var(--panel);
    border-radius: 10px;
    border: 0;
    border-left: 4px solid var(--matematik);
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ders-kart:hover { transform: translateY(-2px); box-shadow: var(--kot-1, 0 2px 6px rgba(0,0,0,.12)); }

.ders-kart.secili {
    background: color-mix(in srgb, var(--hazard) 12%, var(--panel));
    box-shadow: 0 0 0 2px var(--hazard);
}

/* Ders kartına basınca o dersin konuları açılır (Samed, 2026-09-19) —
   seçili olmayan konu/tip satırları bu sınıfla gizlenir. JS'siz de
   sunucu ilk seçimi (en düşük doğruluklu konunun dersi) işaretleyerek
   render eder, script sadece tıklamayla değiştirir. */
.ders-gizli { display: none !important; }

/* Kart değiştirince konu/tip listesi aniden değil bir sönüp-dönme ile
   geçer (Samed, 2026-09-19: "karttan karta geçerken animasyonlu geçiş
   ver" — ilk sürüm 160ms'ti, "animasyon büyük ihtimalle çok hızlı geçtiği
   için anlaşılmıyor" diye geri bildirim geldi, 320ms'e çıkarıldı + hafif
   bir kayma eklendi ki göz gerçekten yakalasın). `.gecis-sonuk` JS
   tarafından tıklama anında eklenir, içerik opaklık sıfırken değişir,
   sonra kaldırılır — tabloyu/satırları değil, yalnız dış paneli
   soldurduğu için kırılgan `<tr>` yükseklik geçişlerine girmez. JS'teki
   GECIS_MS bu süreyle AYNI tutulmalı. */
.gecis-panel {
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.gecis-panel.gecis-sonuk {
    opacity: 0;
    transform: translateY(6px);
}

.secili-ders-etiketi {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--paper-dim);
    text-transform: none;
    letter-spacing: normal;
}

.ders-kart.ders-türkçe { border-left-color: var(--turkce); }
.ders-kart.ders-fen-bilimleri { border-left-color: var(--fen); }
.ders-kart.ders-din-kültürü-ve-ahlak-bilgisi { border-left-color: var(--din); }
.ders-kart.ders-i̇ngilizce { border-left-color: var(--ingilizce); }

.ders-kart h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }

.ders-sayilar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.82rem;
    color: var(--paper-dim);
}

.ders-sayilar strong {
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}

.basamak {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
}

.basamak.artis { color: #7fd7b4; }
.basamak.dusus { color: #f3a0a0; }
.basamak.sabit { color: var(--paper-dim); font-weight: 400; }

.gelisim-tablo {
    width: 100%;
    border-collapse: collapse;
}

.gelisim-tablo th,
.gelisim-tablo td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--panel-2);
    text-align: left;
    vertical-align: middle;
}

.gelisim-tablo thead th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
    border-bottom: 2px solid var(--hazard);
}

.gelisim-tablo .konu-ad { font-weight: 600; }

.gelisim-tablo .konu-ders {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--paper-dim);
}

.gelisim-tablo .sayi,
.gelisim-tablo .tarih {
    font-variant-numeric: tabular-nums;
    color: var(--paper-dim);
}

.seviye-hucre { white-space: nowrap; }

.seviye-yol {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
}

.seviye-yol .ilk { color: var(--paper-dim); }
/* Ok onceden --panel-2 (acik temada arka planla neredeyse ayni tonda
   soluk bej) kullaniyordu, gorunmuyordu (Samed, 2026-09-20: "ok ...
   okunmuyor"). --paper-dim ile ayni okunur griye cekildi. */
.seviye-yol .ok { color: var(--paper-dim); margin: 0 0.25rem; font-weight: 600; }
.seviye-yol .simdi { color: var(--hazard); font-weight: 700; }

.seviye-hucre .rozet {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Onceden rgba(11,110,79,.25) arka plan + #7fd7b4 metin (koyu tema icin
   ayarlanmisti) - acik temada ikisi de solgun yesile dustugu icin metin
   okunmuyordu (Samed: "renkleri engelliyor"). .tip-rozet'teki gibi
   color-mix + tam kontrastli --paper metnine cevrildi. */
.seviye-hucre .rozet.artis {
    background: color-mix(in srgb, var(--din) 28%, var(--panel));
    color: var(--paper);
}
.seviye-hucre .rozet.dusus {
    background: color-mix(in srgb, var(--turkce) 24%, var(--panel));
    color: var(--paper);
}

/* Trend: son denemelerin doğruluğu, soldan sağa */
.trend {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 1.9rem;
}

.trend-cubuk {
    width: 6px;
    height: max(3px, var(--yukseklik));
    background: var(--hazard);
    border-radius: 1px 1px 0 0;
    opacity: 0.85;
}

.trend-cubuk:last-child {
    background: var(--paper);
    opacity: 1;
}

.gelisim-not { margin-top: 1.25rem; font-size: 0.82rem; }

/* Hiç başlanmamış konu satırı (Samed, 2026-09-20: "gelişim gözlemde konu
   kartlarına da bu bilgiyi ekle" — seviye tespit testi seçim ekranı
   doğrudan tabloda). Veri sütunları yok, konu adı biraz soluk - "henüz
   veri yok" izlenimi versin ama okunmaz olmasın. */
.gelisim-konu-satir.konu-baslanmamis .konu-ad { color: var(--paper-dim); font-weight: 500; }

.konu-baslama-hucre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.konu-baslama-not {
    font-size: 0.82rem;
    color: var(--paper-dim);
    font-style: italic;
}

.konu-baslama-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.konu-baslama-eylemler form { display: contents; }
.konu-baslama-eylemler .button { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

@media (max-width: 760px) {
    .gelisim-tablo thead { display: none; }

    .gelisim-tablo,
    .gelisim-tablo tbody,
    .gelisim-tablo tr,
    .gelisim-tablo td { display: block; }

    .gelisim-tablo tr {
        border: 1px solid var(--panel-2);
        border-radius: 8px;
        padding: 0.75rem;
        margin-bottom: 0.9rem;
    }

    .gelisim-tablo td {
        border: none;
        padding: 0.3rem 0;
    }

    /* Başlık satırı gizlendiği için her hücre kendi etiketini taşır —
       yoksa "8" ya da "%70" tek başına ne olduğu anlaşılmaz durur. */
    .gelisim-tablo td[data-etiket]::before {
        content: attr(data-etiket);
        display: inline-block;
        min-width: 6.5rem;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--paper-dim);
    }

    /* Trend çubukları etiketle aynı satırda kalsın */
    .gelisim-tablo td[data-etiket="Son testler"] { display: flex; align-items: center; }
}

/* ---- Veli bilgileri ---- */

.veli-uyari {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.15rem;
    background: color-mix(in srgb, var(--hazard) 12%, var(--panel));
    border-left: 4px solid var(--hazard);
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
}

.veli-uyari span { color: var(--paper-dim); }

.veli-uyari a {
    color: var(--hazard);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.veli-uyari a:hover { text-decoration: underline; }
.veli-uyari a:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; }

.ayar-blok { max-width: 34rem; }

.veli-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.25rem;
}

.veli-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.veli-form label > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--paper-dim);
}

.veli-form input {
    padding: 0.6rem 0.75rem;
    background: var(--panel);
    color: var(--paper);
    border: 1px solid var(--panel-2);
    border-radius: 6px;
    font: inherit;
}

.veli-form input:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

.veli-form input[aria-invalid="true"] { border-color: var(--turkce); }

.alan-hata {
    color: #f3a0a0;
    font-size: 0.8rem;
}

/* ---- Mobil dokunma hedefleri ----
   Parmakla kullanılan genişliklerde bağlantı ve form öğeleri en az 44px
   yüksekliğinde olmalı; metin yüksekliği tek başına 24-36px kalıyordu. */
@media (max-width: 760px) {
    .veli-uyari a,
    .paket-yukselt,
    .eylem-kart .eylem,
    .ebook-cozum,
    .ebook-tekrar a,
    .test-rozet {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Form öğelerinde display'e dokunulmuyor — genişlik kuralları bozulmasın. */
    .ebook-hatalar select,
    .ebook-hatalar input[type="text"],
    .veli-form input,
    .ebook-sheet input[type="radio"] + span,
    .konu-satir .button,
    .button {
        min-height: 44px;
    }

    /* Kart içindeki eylem bağlantısı tam genişlikte olsun ki hedef büyüsün */
    .eylem-kart .eylem {
        width: 100%;
    }
}

/* Bu yalnızca kopyalamayı caydırır; ekran görüntüsü ve geliştirici araçlarıyla aşılabilir. */
.paper-question,
.modal-question-prompt,
.modal-omr,
fieldset.question {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* ---- Cevap anahtarı (sonuç sayfası) ---- */

/* Sebep kaydetme düğmesinden sonra gelir; nefes payı olmazsa sıkışık durur. */
.anahtar-izgara + .ebook-tekrar,
h2 + .ebook-intro { margin-top: 0.5rem; }

.test-container h2 { margin-top: 2.25rem; }

.anahtar-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.anahtar-kutu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.anahtar-kutu .no {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--paper-dim);
}

.anahtar-kutu .harf {
    font-weight: 700;
    font-size: 1.05rem;
}

.anahtar-kutu .durum {
    font-size: 0.78rem;
    opacity: 0.85;
}

.anahtar-kutu.correct { border-color: color-mix(in srgb, var(--din) 55%, var(--panel-2)); }
.anahtar-kutu.correct .harf { color: #7fd7b4; }
.anahtar-kutu.wrong { border-color: color-mix(in srgb, var(--turkce) 45%, var(--panel-2)); }
.anahtar-kutu.wrong .harf { color: #f3a0a0; }
.anahtar-kutu.blank .harf { color: var(--paper-dim); }

@media (max-width: 760px) {
    .anahtar-izgara { grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); }
}

/* ---- Kayıt formu blokları ---- */

.kayit-form { max-width: 34rem; }

.kayit-blok {
    border: 1px solid var(--panel-2);
    border-radius: 8px;
    padding: 1rem 1.15rem 1.15rem;
    margin-bottom: 1.25rem;
}

.kayit-blok legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.zorunlu-etiket,
.istege-bagli {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.zorunlu-etiket { background: var(--hazard); color: var(--ink); }
.istege-bagli { background: var(--panel-2); color: var(--paper-dim); }

.kayit-blok .blok-not {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    color: var(--paper-dim);
    line-height: 1.45;
}

.kayit-blok label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
}

.kayit-blok label:last-child { margin-bottom: 0; }

.kayit-blok input {
    padding: 0.55rem 0.7rem;
    background: var(--panel);
    color: var(--paper);
    border: 1px solid var(--panel-2);
    border-radius: 6px;
    font: inherit;
    min-height: 44px;
}

.kayit-blok input:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

/* Sayfa gövdesindeki bağlantılar: tarayıcı varsayılanı mavi kalmasın. */
.container a:not(.button):not(.paket-yukselt):not(.test-rozet):not(.eylem) {
    color: var(--hazard);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.container a:not(.button):not(.paket-yukselt):not(.test-rozet):not(.eylem):hover {
    border-bottom-color: currentColor;
}

.container a:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- Kitap sorularını siteden çözme ---- */

.kitap-sorular {
    list-style: none;
    counter-reset: soru;
    margin: 0 0 1.5rem;
    padding: 0;
}

.kitap-soru {
    counter-increment: soru;
    position: relative;
    padding: 1.1rem 1.15rem 1.15rem 3.2rem;
    margin-bottom: 1rem;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 8px;
}

.kitap-soru::before {
    content: counter(soru);
    position: absolute;
    top: 1.05rem;
    left: 1.1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--hazard);
}

.kitap-soru .soru-metin {
    margin: 0 0 0.9rem;
    line-height: 1.55;
}

.kitap-soru .soru-gorsel {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.9rem;
    border-radius: 6px;
}

.secenekler {
    display: grid;
    gap: 0.4rem;
}

.secenek {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    min-height: 44px;
}

.secenek:hover { background: var(--ink); }

.secenek:has(input:checked) {
    border-color: var(--hazard);
    background: color-mix(in srgb, var(--hazard) 10%, var(--panel));
}

.secenek input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--hazard);
    flex: 0 0 auto;
}

.secenek .harf {
    font-weight: 700;
    color: var(--hazard);
    flex: 0 0 1.2rem;
}

.secenek .metin { flex: 1; }

.bos-secenek { opacity: 0.7; }
.bos-secenek .harf { color: var(--paper-dim); }

/* "Boş bırak" varsayılan seçili geldiği için her soru cevaplanmış gibi
   vurgulanıyordu; boş seçenek seçiliyken nötr kalsın. */
.secenek.bos-secenek:has(input:checked) {
    border-color: var(--panel-2);
    background: transparent;
}

.kitap-soru:has(.secenek:not(.bos-secenek) input:checked) {
    border-color: color-mix(in srgb, var(--hazard) 40%, var(--panel-2));
}

/* ---- Deneme hakkı ---- */

.deneme-kutu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--din) 14%, var(--panel));
    border-left: 4px solid var(--din);
    border-radius: 0 8px 8px 0;
}

.deneme-kutu > div { flex: 1; min-width: 260px; }
.deneme-kutu strong { display: block; margin-bottom: 0.2rem; }
.deneme-kutu span { font-size: 0.88rem; color: var(--paper-dim); }
.deneme-kutu.gecti {
    background: var(--panel);
    border-left-color: var(--panel-2);
}

.deneme-basladi {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.15rem;
    background: color-mix(in srgb, var(--din) 20%, var(--panel));
    border-left: 4px solid var(--din);
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
}

.deneme-basladi span { color: var(--paper-dim); margin-left: 0.4rem; }

/* --- Soru tipi başarısı (Gelişim Gözlem) ---
   Tablo yerine satır-kart seçildi: "hangisinde iyiyim" sorusu göz taramasıyla
   yanıtlanmalı, hücre hücre okunarak değil. Durum hem renkle hem yazıyla
   veriliyor — renk tek başına erişilebilir bir sinyal değil. */
.tip-giris {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: var(--paper-dim);
}
.tip-giris em { color: var(--hazard); font-style: normal; }

.tip-listesi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tip-satir {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    background: var(--panel);
    border-left: 4px solid var(--panel-2);
    border-radius: 0 6px 6px 0;
}
.tip-satir.tip-guclu     { border-left-color: var(--din); }
.tip-satir.tip-orta      { border-left-color: var(--hazard); }
.tip-satir.tip-zayif     { border-left-color: var(--turkce); }
.tip-satir.tip-belirsiz  { border-left-color: var(--panel-2); opacity: 0.72; }

.tip-kimlik { min-width: 0; }
.tip-ad {
    display: block;
    font-weight: 600;
    font-size: 0.98rem;
}
.tip-ders {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper-dim);
}
.tip-ipucu {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--paper-dim);
}

.tip-olcu { min-width: 0; }
.tip-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--panel-2);
    overflow: hidden;
}
.tip-dolgu {
    display: block;
    width: var(--oran);
    height: 100%;
    border-radius: 999px;
    background: var(--paper-dim);
}
.tip-guclu    .tip-dolgu { background: var(--din); }
.tip-orta     .tip-dolgu { background: var(--hazard); }
.tip-zayif    .tip-dolgu { background: var(--turkce); }

.tip-sayilar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.tip-yuzde { font-weight: 700; font-size: 1.05rem; }
.tip-kirilim { font-size: 0.8rem; color: var(--paper-dim); }
.tip-toplam { opacity: 0.75; }

.tip-rozet {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tip-rozet.guclu    { background: color-mix(in srgb, var(--din) 26%, var(--panel)); color: var(--paper); }
.tip-rozet.orta     { background: color-mix(in srgb, var(--hazard) 26%, var(--panel)); color: var(--paper); }
.tip-rozet.zayif    { background: color-mix(in srgb, var(--turkce) 28%, var(--panel)); color: var(--paper); }
.tip-rozet.belirsiz { background: var(--panel-2); color: var(--paper-dim); }

/* Dar ekranda üç kolon sıkışıyor: kimlik üstte tam genişlik, ölçü ve
   rozet altta yan yana kalıyor. Dokunma hedefi küçülmüyor. */
@media (max-width: 620px) {
    .tip-satir {
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
    }
    .tip-kimlik { grid-column: 1 / -1; }
    .tip-yuzde { font-size: 1rem; }
}

/* ============================================================
   AÇIK TEMA — landing page ile aynı görünüm (2026-09-18, Samed)
   Sadece `body.tema-acik` taşıyan sayfalarda devreye girer (şimdilik
   giriş sayfası). Diğer sayfalar (panel, test ekranları, e-kitap vb.)
   bu blok dışında kalır, dokunulmadı. --ink KASITLI OLARAK burada
   override edilmiyor: buton metni (`button { color: var(--ink) }`)
   koyu kalması gerektiği için --ink'in değeri her temada aynı kalıyor,
   sayfa arka planı ayrı, doğrudan `background-*` ile veriliyor.
   ============================================================ */

body.tema-acik {
    --panel: #fff9ee;
    --panel-2: #e6d4b8;
    --panel-3: #d6c0a1;
    --paper: #2b241c;
    --paper-dim: #5a4c3f;
    --kot-0: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(43, 36, 28, .06);
    --kot-1: 0 1px 2px rgba(43, 36, 28, .08), 0 2px 6px rgba(43, 36, 28, .06);
    --kot-2: 0 2px 4px rgba(43, 36, 28, .09), 0 8px 18px -6px rgba(43, 36, 28, .13);
    --oyuk: inset 0 2px 5px rgba(43, 36, 28, .16), inset 0 -1px 0 rgba(255, 255, 255, .5);

    background-color: #f4ead6;
    background-image:
        radial-gradient(circle at 50% 43%, rgba(43, 36, 28, .18) 0 1.15px, transparent 1.7px),
        radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .58) 0 .9px, transparent 1.45px),
        linear-gradient(180deg, #fff3df 0%, #f4ead6 44%, #ecd9bc 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%;
    background-position: 0 0, 0 1px, 0 0;
    background-attachment: fixed;
}

body.tema-acik .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 249, 238, .96);
    border-bottom: 1px solid rgba(43, 36, 28, .16);
    box-shadow: var(--kot-0), var(--kot-2);
}

body.tema-acik .topbar nav a:hover {
    color: var(--paper);
}

body.tema-acik .eyebrow {
    margin: 0 0 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

body.tema-acik .auth-shell {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: center;
    max-width: 860px;
    margin: 3rem auto;
}

body.tema-acik .auth-card {
    max-width: 420px;
    margin: 0;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(43, 36, 28, .14);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: var(--kot-0), var(--kot-2);
}

/* Sağdaki maskot: raw SVG'nin kendisine hafif bir "nefes alma" hareketi,
   gözbebeklerine (r=4, fill=#17140f — sadece "kolay" pozdaki iki pupil)
   periyodik bir göz kırpma animasyonu. JS/DOM parçalama gerekmiyor, landing
   page'deki aynı mantığın CSS-only, tek-parça sürümü. */
.auth-mascot {
    display: flex;
    justify-content: center;
}

.auth-mascot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-left: 24px;
}

.auth-mascot svg {
    width: min(276px, 90%);
    height: auto;
    overflow: visible;
}

.speech-bubble {
    position: relative;
    max-width: 240px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid rgba(43, 36, 28, .14);
    box-shadow: var(--kot-0), var(--kot-2);
    color: var(--paper);
    font-family: 'Baloo 2', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: var(--panel);
    border-right: 1px solid rgba(43, 36, 28, .14);
    border-bottom: 1px solid rgba(43, 36, 28, .14);
    transform: translateX(-50%) rotate(45deg);
}

/* === Maskot tepkisi (duygu + balon) -- sonuç/geri bildirim sayfalarında
   (result.html, ebook_result.html, test_placement_result.html,
   ebook_report_card.html, progress.html) `_mascot_reaction.html` partial'i
   bunu kullanır (Samed, 2026-09-19 tasarım denetimi). `.speech-bubble`
   yukarıdaki auth-mascot ile AYNI sınıf -- görsel dil tekrar edilmiyor. === */
.mascot-reaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 auto 1.5rem;
    max-width: 320px;
    text-align: center;
}

.mascot-reaction-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.mascot-reaction .speech-bubble {
    max-width: 280px;
}

/* Gelişim Gözlem'de mascot-reaction hemen alt taraftaki ders kartlarıyla
   sıkışık durmalı -- result.html gibi "kutlama" sayfalarındaki geniş boşluk
   burada gereksiz (Samed, 2026-09-19 mizanpaj notu). Yalnız bu sayfaya
   özel, diğer sonuç ekranlarına dokunmuyor. */
.gelisim-mascot-ust .mascot-reaction {
    margin-bottom: 0.75rem;
}

.gelisim-mascot-ust .mascot-reaction-img {
    width: 84px;
    height: 84px;
}

.gelisim-mascot-ust.gelisim-mascot-buyuk .mascot-reaction-img {
    width: 126px;
    height: 126px;
}

/* Samed (2026-09-20): "gelişim gözlem sayfasındaki en üstteki maskotu %50
   oranında büyüt, etrafına 5 tane boş yıldız çiz" — yalnız bu sayfaya özel
   bir ikinci class (.gelisim-mascot-buyuk), yukarıdaki 84px tabanına göre
   %50 büyütülmüş hali (84×1.5=126px). Sonra (aynı gün): "yıldızları yarım
   çember şeklinde maskotun üzerine yap" — üstte yay için padding-top ile
   boşluk açılıyor. Yıldızların left/top konumu CSS transform'la DEĞİL
   (rotate+translateY+rotate beklenen yayı üretmedi, deneyle doğrulandı)
   Python'da trigonometriyle hesaplanıp (mascot_reaction.star_positions)
   inline style olarak geliyor — burada yalnız o (0,0) referans noktasını
   img'in üst-orta kenarına taşıyoruz. */
.gelisim-mascot-ust.gelisim-mascot-buyuk {
    position: relative;
    padding-top: 44px;
}

.mascot-yildizlar {
    position: absolute;
    top: 44px;
    left: 50%;
    width: 0;
    height: 0;
}

.mascot-yildizlar .yildiz {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    stroke: var(--hazard-deep);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.mascot-yildizlar .yildiz.dolu {
    fill: var(--hazard);
}

.mascot-yildizlar .yildiz.bos {
    fill: transparent;
    opacity: 0.55;
}

/* Gelişim Gözlem tablosundaki her konu satırında -- tam illüstrasyon değil,
   küçük bir rozet (Samed: satır kalabalıklaşmasın). Önceki sürüm 22px'ti,
   ifade hiç seçilmiyordu (Samed, 2026-09-19: "seviyelerin yanındaki
   maskotlar çok küçük, hangi duygu durumunda olduğu hiç belli değil") --
   büyütüldü + kendi tintli arka planıyla ayrı bir rozet gibi durması için
   ayrı bir sınıfa taşındı (`.mascot-badge` sınıfı yazdırma/kapak
   bağlamlarında BAŞKA boyutlarla kullanılıyor, çakışmasın diye). */
/* Bir <span>'e uygulanır, <td>'nin KENDİSİNE DEĞİL — bir hücreye doğrudan
   display:flex vermek onu table-cell akışından çıkarıp sütun genişliği
   hesaplamasını bozuyordu (Samed, 2026-09-19: "sütunların başlıkları
   sütunların üzerinde değil" — kök sebep buydu, düzeltildi). */
.konu-dogruluk-hucre {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Samed (2026-09-20): "gelişim gözlem ekranına seviye ile doğruluk
   arasına konunun yıldız puanını da koyalım. daha şık gözükecek" —
   .mascot-yildizlar'daki (üst maskot) yarım çember DEĞİL, düz bir satır;
   tıpkı .konu-dogruluk-hucre gibi bir <span>'e uygulanıyor, <td>'nin
   KENDİSİNE DEĞİL (yukarıdaki uyarı, 2026-09-19 sütun-hizalama hatası). */
.konu-yildizlar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.konu-yildiz {
    width: 14px;
    height: 14px;
    stroke: var(--hazard-deep);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.konu-yildiz.dolu {
    fill: var(--hazard);
}

.konu-yildiz.bos {
    fill: transparent;
    opacity: 0.5;
}

.konu-mascot-badge {
    display: inline-block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--panel-2);
    padding: 3px;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-mascot svg {
        animation: mascot-bob 3400ms ease-in-out infinite;
        transform-origin: center;
    }

    .auth-mascot svg circle[fill="#17140f"][r="4"] {
        transform-origin: center;
        transform-box: fill-box;
        animation: mascot-blink 5200ms linear infinite;
    }

    @keyframes mascot-bob {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-6px) rotate(-1.4deg); }
    }

    @keyframes mascot-blink {
        0%, 44%, 46%, 100% { transform: scaleY(1); }
        45% { transform: scaleY(.08); }
    }
}

@media (max-width: 760px) {
    body.tema-acik .auth-shell {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .auth-mascot { display: none; }
}

body.tema-acik h1 {
    font-size: 2.1rem;
}

body.tema-acik .form input[type=text],
body.tema-acik .form input[type=password],
body.tema-acik .form input[type=email],
body.tema-acik .form input[type=tel],
body.tema-acik .form select {
    border-radius: 12px;
    border-color: rgba(43, 36, 28, .28);
    box-shadow: var(--oyuk);
}

body.tema-acik .form input[type=text]:focus,
body.tema-acik .form input[type=password]:focus,
body.tema-acik .form input[type=email]:focus,
body.tema-acik .form input[type=tel]:focus,
body.tema-acik .form select:focus {
    border-color: var(--hazard);
}

body.tema-acik button,
body.tema-acik .button {
    box-shadow: var(--kot-0), var(--kot-1);
}

body.tema-acik button:hover,
body.tema-acik .button:hover {
    box-shadow: var(--kot-0), var(--kot-2);
}

body.tema-acik .auth-switch {
    margin-top: 1.25rem;
    font-size: .9rem;
    color: var(--paper-dim);
}

body.tema-acik .auth-switch a {
    color: var(--paper);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.tema-acik .auth-switch a:hover {
    color: var(--hazard-deep);
}

body.tema-acik .error {
    color: #b3261e;
}

/* === Giriş sayfası ince ayarları (2026-09-18, Samed'in onayıyla) === */

/* 1) Giriş animasyonu: kart önce, maskot+balon hafif gecikmeli. */
@media (prefers-reduced-motion: no-preference) {
    body.tema-acik .auth-card {
        animation: auth-enter 480ms cubic-bezier(.25, .46, .45, .94) both;
    }

    .auth-mascot {
        animation: auth-enter 480ms cubic-bezier(.25, .46, .45, .94) both;
        animation-delay: 90ms;
    }

    @keyframes auth-enter {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 5) Hatalı girişte fade yerine sarsıntı — aynı elemanda ikisi
       birden anlamsız olurdu, hata varken bu devreye girer. */
    body.tema-acik .auth-card:has(.error) {
        animation: card-shake 420ms ease;
    }

    @keyframes card-shake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-8px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(2px); }
    }
}

/* 2) Giriş butonu: gönderirken yazı değişir + dönen gösterge belirir. */
#giris-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.buton-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid rgba(43, 36, 28, .35);
    border-top-color: var(--ink);
    border-radius: 50%;
}

#giris-buton.is-loading {
    cursor: not-allowed;
    opacity: .85;
}

#giris-buton.is-loading .buton-spinner {
    display: inline-block;
    animation: buton-donme 700ms linear infinite;
}

@keyframes buton-donme {
    to { transform: rotate(360deg); }
}

/* 3) Kullanıcı adı / şifre alanlarının içine ikon. */
.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrap .input-icon {
    position: absolute;
    left: 14px;
    width: 17px;
    height: 17px;
    color: var(--paper-dim);
    pointer-events: none;
}

.input-icon-wrap input[type=text],
.input-icon-wrap input[type=password] {
    width: 100%;
    padding-left: 40px;
}

.input-icon-wrap:has(input:focus) .input-icon {
    color: var(--hazard-deep);
}

/* 4) Maskotun arkasında yumuşak bir ışık — sahneye "yapıştırır". */
.auth-mascot {
    isolation: isolate;
}

.auth-mascot::before {
    content: "";
    position: absolute;
    inset: -30px -10px 20px -10px;
    z-index: -1;
    background: radial-gradient(circle at 55% 45%, rgba(245, 180, 0, .38), transparent 65%);
}

/* 6) Nav logosu (yalnız açık temada) sönük kalıyordu: krem zemin üstünde
   düz sarı metnin kontrastı zayıftı. Kapak/rozet bileşenlerindeki aynı
   "kalın kontur" tekniği (bkz. .count-num) buraya da uygulandı. */
body.tema-acik .topbar .brand span {
    -webkit-text-stroke: 1.4px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 2px 3px rgba(43, 36, 28, .18);
    font-size: 1.65rem;
}

body.tema-acik .topbar .brand {
    transition: transform .2s ease;
}

body.tema-acik .topbar .brand:hover {
    transform: translateY(-1px);
}

/* === Panel (dashboard) — aynı açık tema + premium kart derinliği
   (2026-09-18, Samed: "premium hissini dashboard'da da yaşamak
   istiyorum"). Sınıf adları değişmedi, sadece body.tema-acik kapsamında
   var(--panel)/var(--panel-2) zaten krem tonlarına döndüğü için renk
   otomatik geliyor — burada eklenen sadece yuvarlatma, gölge ve giriş
   animasyonu. === */

body.tema-acik .paket-serit {
    border-radius: 18px;
    box-shadow: var(--kot-0), var(--kot-2);
}

body.tema-acik .veli-uyari,
body.tema-acik .deneme-kutu,
body.tema-acik .deneme-basladi {
    border-radius: 0 16px 16px 0;
    box-shadow: var(--kot-0), var(--kot-1);
}

body.tema-acik .eylem-kart,
body.tema-acik .ozet-kart {
    border-radius: 18px;
    box-shadow: var(--kot-0), var(--kot-1);
    transition: border-color .15s, transform .2s ease, box-shadow .2s ease;
}

body.tema-acik .eylem-kart.acik:hover {
    box-shadow: var(--kot-0), var(--kot-2);
}

body.tema-acik .konu-satir {
    border-radius: 0 14px 14px 0;
    box-shadow: var(--kot-0), var(--kot-1);
    transition: box-shadow .2s ease, transform .2s ease;
}

body.tema-acik .konu-satir:hover {
    box-shadow: var(--kot-0), var(--kot-2);
    transform: translateY(-1px);
}

/* Bölümler sırayla belirir — kart sayısı (konu listesi) değişken olduğu
   için TEK TEK değil, GRUP halinde kademeli giriyor; her uzunlukta
   listede öngörülebilir kalır. */
@media (prefers-reduced-motion: no-preference) {
    body.tema-acik .paket-serit,
    body.tema-acik .veli-uyari,
    body.tema-acik .deneme-kutu,
    body.tema-acik .deneme-basladi {
        animation: auth-enter 420ms cubic-bezier(.25, .46, .45, .94) both;
    }

    body.tema-acik .ozet-kartlari {
        animation: auth-enter 420ms cubic-bezier(.25, .46, .45, .94) both;
        animation-delay: 40ms;
    }

    body.tema-acik .eylem-kartlari {
        animation: auth-enter 420ms cubic-bezier(.25, .46, .45, .94) both;
        animation-delay: 70ms;
    }

    body.tema-acik .konu-listesi {
        animation: auth-enter 420ms cubic-bezier(.25, .46, .45, .94) both;
        animation-delay: 130ms;
    }
}

/* === Sol menü (sidebar) — Talebe Koçu'ndaki kalıcı navigasyonun Ustalaş
   karşılığı (2026-09-18). Talebe Koçu koyu lacivert/akordiyon kullanıyor;
   burada Ustalaş'ın kendi krem/kot-gölge dilinde, gruplama gerektirmeyecek
   kadar az öğe olduğu için düz liste olarak kuruldu. Kilit/hedef mantığı
   panel kartlarıyla (_eylem_kartlari) AYNI kaynaktan geliyor. === */

.sidebar {
    flex: 0 0 208px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2rem 0 2rem 6vw;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-lock {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.sidebar-ayirac {
    height: 1px;
    margin: 8px 12px;
}

body.tema-acik .sidebar {
    background: var(--panel);
    border: 1px solid rgba(43, 36, 28, .14);
    border-radius: 18px;
    box-shadow: var(--kot-0), var(--kot-1);
    padding: 12px;
}

body.tema-acik .sidebar-link {
    color: var(--paper);
}

body.tema-acik .sidebar-link:hover {
    background: var(--panel-2);
}

body.tema-acik .sidebar-link.active {
    background: var(--hazard);
    color: var(--ink);
}

body.tema-acik .sidebar-link.kilitli {
    color: var(--paper-dim);
}

body.tema-acik .sidebar-lock {
    color: var(--paper-dim);
}

body.tema-acik .sidebar-ayirac {
    background: rgba(43, 36, 28, .14);
}

@media (max-width: 860px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin: 1.25rem 4vw 0;
    }

    .sidebar-ayirac {
        display: none;
    }

    .sidebar-link {
        flex: 0 0 auto;
        min-height: 44px;
    }
}

/* === Sağ üst bildirim paneli (maskotlu "çan") — Talebe Koçu'ndaki
   NotificationPanel'in Ustalaş karşılığı (2026-09-18). Veli/deneme/üyelik
   durumu artık burada, sayfanın üstünü kaplayan banner'lar olarak değil.
   Değişkenler (--panel/--paper/--hazard) hem koyu hem açık temada zaten
   doğru kontrastla tanımlı olduğu için buradaki kurallar tema-özel değil,
   her sayfada (koyu veya açık) otomatik doğru görünür. === */

.bildirim-panel {
    position: relative;
    display: inline-flex;
}

.bildirim-zil {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border: 1px solid rgba(43, 36, 28, .2);
    border-radius: 50%;
    background: var(--panel);
    cursor: pointer;
}

.bildirim-zil svg {
    width: 22px;
    height: auto;
    display: block;
    overflow: visible;
}

.bildirim-rozet {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.bildirim-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 92vw);
    max-height: 420px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid rgba(43, 36, 28, .18);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
    z-index: 60;
    padding: 10px;
}

.bildirim-dropdown-baslik {
    padding: 4px 8px 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.bildirim-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bildirim-oge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 12px;
    background: var(--panel-2);
}

.bildirim-oge.onemli {
    border-left: 3px solid var(--hazard);
}

.bildirim-oge strong {
    color: var(--paper);
    font-size: 14px;
}

.bildirim-oge span {
    color: var(--paper-dim);
    font-size: 12.5px;
    line-height: 1.4;
}

.bildirim-oge a,
.bildirim-form button {
    align-self: flex-start;
    margin-top: 2px;
    color: var(--hazard);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.bildirim-bos {
    padding: 16px 10px;
    color: var(--paper-dim);
    font-size: 13px;
    text-align: center;
}

/* Bildirim olsun olmasın her zaman görünen sabit satır (Samed,
   2026-09-20: "bize yaz kısmı ... sağ üstteki bildirim maskotunda da
   yer alsın"). */
.bildirim-dropdown-alt {
    display: block;
    margin-top: 8px;
    padding: 10px 8px 4px;
    border-top: 1px solid rgba(43, 36, 28, .14);
    color: var(--hazard);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

/* Bildirim varken maskotun kolu el sallar (Samed, 2026-09-18: "bildirim
   olduğunda maskot el sallasın"). "kolay" pozdaki kalkık kol grubu
   (rotate(18 154 112)) hedefleniyor -- brand_mascot.py'deki sabit
   koordinat, ekstra class/JS gerekmiyor. */
@media (prefers-reduced-motion: no-preference) {
    .bildirim-zil.has-bildirim svg g[transform="rotate(18 154 112)"] {
        transform-box: view-box;
        transform-origin: 154px 112px;
        animation: bildirim-el-salla 1100ms ease-in-out infinite;
    }

    @keyframes bildirim-el-salla {
        0%, 100% { transform: rotate(18deg); }
        50% { transform: rotate(42deg); }
    }
}

@media (max-width: 720px) {
    .bildirim-dropdown {
        position: fixed;
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
    }
}

/* Ekran koruması (Samed, 2026-09-22): ekran görüntüsü tarayıcıda teknik olarak
   ENGELLENEMEZ; bu kurallar caydırır ve izlenebilir kılar. (1) Kişiye özel
   filigran: --filigran (render.py: kullanıcı adı + zaman damgası, SVG data
   URI) soru alanlarının ÜSTÜNE, tıklamayı engellemeden (pointer-events:none)
   çapraz tekrar eder. (2) Yazdırma: soru/çözüm alanı print'te gizlenir,
   yerine .yazdirma-uyarisi çıkar. (3) Odak kaybı: koruma.js <html>'e
   .odak-disi ekleyince sorular bulanır. */
.test-paged, #modalBody, .cozum-icerik { position: relative; }
.test-paged::after, #modalBody::after, .cozum-icerik::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: var(--filigran, none);
    background-repeat: repeat;
    background-size: 360px 220px;
}
.odak-disi .paper-question,
.odak-disi .modal-question-prompt,
.odak-disi .modal-omr,
.odak-disi .cozum-icerik {
    filter: blur(8px);  /* geçişsiz: arka plandaki sekmede geçiş ilerlemez, anında bulanmalı */
}
.yazdirma-uyarisi { display: none; }
@media print {
    .topbar, .sidebar, .bildirim-panel, .test-intro, .test-paged, .test-controls,
    .modal-question, .cozum-icerik, .ebook-cozum-bekliyor, .ebook-tekrar { display: none !important; }
    .yazdirma-uyarisi {
        display: block !important;
        margin: 2rem;
        font: 600 1.2rem/1.4 'Baloo 2', sans-serif;
        color: #000;
    }
}

/* === Mobil / tablet uyumu (Samed, 2026-09-22: "tüm sitenin ve özellikle test
   çözme ekranının mobil telefon ve tablet uyumluluğunu denetle"). Kurallar
   ÖLÇÜLEREK yazıldı (390/360/820 px genişlikte iframe tezgahı: yatay taşma =
   scrollWidth > innerWidth, dokunma hedefi < 40px, yazı < 12.5px). Görsel
   dil değişmiyor, yalnız yerleşim ve boyut. === */
@media (max-width: 860px) {
    /* Sütun düzeninde (.app-shell column) align-items:flex-start ana içeriği
       max-content genişliğine bırakıyordu: uzun bir başlık /test/1 sayfasını
       390px ekranda 1082px'e taşırıyordu. */
    .app-shell { align-items: stretch; }
    .container { width: 100%; }
    /* width:100% + 4vw kenar boşluğu = 15px yatay taşma (her sayfada). */
    .sidebar { width: auto; }
    /* Eylem kartı bağlantıları (35px) ve ikincil düğmeler (33px) parmak için kısa. */
    .eylem-kart .eylem, .button, .ozet-link { min-height: 40px; display: inline-flex; align-items: center; }

    /* Test ekranı: şıklar 22px yüksekliğindeydi, parmakla isabet edilmiyordu. */
    .test-shell .paper-option, .paper-option { min-height: 44px; padding: .4rem .5rem; align-items: center; gap: .5rem; }
    .test-shell .option-letter, .option-letter { font: 800 1rem/1.3 'Arial',sans-serif; }
    .test-shell .option-copy, .option-copy { font: 500 1rem/1.3 'Arial',sans-serif; }
    .test-shell .question-content, .question-content { font: 600 1rem/1.35 'Arial','Helvetica Neue',sans-serif; }
    .test-shell .question-number, .question-number { font: 900 1.05rem/1 'Arial',sans-serif; }
    /* Yatık "USTALAŞ" filigranı sayfayı 18px taşırıyordu; yapışkan kontrol
       çubuğu (105px) son soru/cevap satırlarını örtüyordu. */
    .test-paged { overflow-x: clip; padding-bottom: 7rem; }
    .control-status { font-size: .82rem; }
    .control-status #timer { font-size: 1rem; }
    .minute-entry input { min-height: 44px; width: 7.5rem; font-size: 1rem; }
    /* Kağıt modu cevap ızgarası: 27px'lik baloncuklar. */
    .kagit-cevap-sik { width: 2.6rem; height: 2.6rem; font-size: .95rem; }
    .kagit-cevap-secim { gap: .45rem; }
    .kagit-cevap-no { font-size: .95rem; }
    /* Soru modalı: 40px iç boşluk 390px ekranda içeriğe 226px bırakıyordu. */
    .modal-question { padding: .6rem; }
    .modal-question-card { padding: 1.4rem 1.1rem 1.6rem; max-height: 92vh; }
    .modal-question-card h2 { font-size: 1.25rem; }
}

@media (max-width: 600px) {
    /* Yapışkan üst çubuk 137px'ti (ekranın %16'sı). */
    .topbar { padding: .5rem 4vw; gap: .25rem; }
    .topbar .brand { min-height: 40px; }
    .brand-mascot { width: 34px; height: 34px; }
    .topbar nav { gap: .6rem; flex-wrap: wrap; }
    .topbar nav a { min-height: 40px; }
    /* Sol menü chip'leri telefonda ~330px yer kaplıyordu (ilk ekranın
       tamamı): tek satır, yatay kaydırılabilir. */
    .sidebar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-top: .75rem; padding-bottom: 6px; }
    .sidebar-link { white-space: nowrap; }
    /* 11px'in altındaki etiketler. */
    body .eyebrow, body.tema-acik .eyebrow { font-size: .72rem; }
    .ozet-etiket, .ozet-alt, .konu-satir .konu-sv, .konu-sv, .konu-ders, .gelisim-tablo .konu-ders { font-size: .78rem; }
    .istege-bagli { font-size: .72rem; }
    /* Kağıt başlık bandı 6-8px yazıyla okunmuyordu. */
    .print-metadata span, .paper-page-number, .omr-title small { font-size: .62rem; white-space: normal; }
    .print-metadata strong { font-size: .72rem; white-space: normal; }
    .print-metadata th, .print-metadata td { font-size: .68rem; padding: .22rem .28rem; white-space: normal; }
    .paper-brand strong small { font-size: .62rem; }
    .test-seal span, .test-seal b { font-size: .55rem; }
    .watermark { font-size: 3rem; }
}

@media (max-width: 480px) {
    /* Şıklar yan yana 37-67px genişliğinde sıkışıyordu (.paper-options
       flex+wrap): alt alta, tam genişlik satırlar. */
    .paper-options { flex-direction: column; grid-template-columns: 1fr; gap: .15rem; }
    .test-shell .paper-option, .paper-option { width: 100%; }
    /* Kağıt başlık bandındaki dekoratif mühür 6px yazıyla okunmuyor. */
    .test-seal { display: none; }
    .kagit-cevap-izgara { grid-template-columns: 1fr; }
    .kagit-cevap-kutu { justify-content: space-between; }
}


/* Yasal sayfalar + site altbilgisi (Samed, 2026-09-22: ödeme kuruluşu
   başvurusu için Gizlilik/KVKK, Mesafeli Satış, İptal-İade, İletişim). */
.yasal { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.yasal h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.yasal ul { padding-left: 1.2rem; }
.yasal li { margin-bottom: .4rem; }
.yasal-tablo { width: 100%; border-collapse: collapse; margin: .8rem 0 1rem; font-size: .92rem; }
.yasal-tablo th, .yasal-tablo td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--panel-2); }
.yasal-tablo th { white-space: nowrap; }
.yasal-onay { margin-top: 1.6rem; padding: 1rem 1.2rem; border-left: 4px solid var(--hazard); background: var(--panel); }
.yasal-onay blockquote { margin: .6rem 0 0; font-weight: 600; }
.yasal-yer-tutucu { color: var(--hazard-deep, #b45309); font-weight: 700; }
.yasal-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.2rem; margin: 2.5rem auto 1.2rem; padding: 1rem 4vw 0; border-top: 1px solid var(--panel-2); font-size: .82rem; }
.yasal-footer a { color: inherit; }
.yasal-footer .telif { width: 100%; text-align: center; color: var(--paper-dim); }
@media (max-width: 600px) {
    .yasal-footer { flex-direction: column; gap: .5rem; }
    .yasal-footer a { min-height: 40px; display: inline-flex; align-items: center; }
    .yasal-tablo th { white-space: normal; }
    .yasal-tablo, .yasal-tablo thead, .yasal-tablo tbody, .yasal-tablo tr, .yasal-tablo th, .yasal-tablo td { display: block; }
    .yasal-tablo thead { display: none; }
    .yasal-tablo tr { margin-bottom: .8rem; border-bottom: 1px solid var(--panel-2); }
    .yasal-tablo th, .yasal-tablo td { border: 0; padding: .2rem 0; }
}

/* Ödeme / üyelik satın alma (Samed, 2026-09-22: site içi iyzico/PayTR).
   Plan kartları .eylem-kart dilini, form .veli-form dilini tekrar kullanır. */
.plan-kartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.plan-kart { padding: 1.25rem; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 10px; }
.plan-kart h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.plan-fiyat { margin: 0; display: flex; align-items: baseline; gap: .6rem; }
.plan-fiyat s { color: var(--paper-dim); font-size: .95rem; }
.plan-fiyat strong { font-size: 1.7rem; color: var(--hazard); font-family: 'IBM Plex Mono', monospace; }
.plan-etiket { margin: .2rem 0 .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); font-family: 'IBM Plex Mono', monospace; }
.plan-aciklama { margin: 0; font-size: .9rem; color: var(--paper-dim); }
.plan-not { max-width: 640px; }
.odeme-form { max-width: 460px; }
.plan-secim { border: 1px solid var(--panel-2); border-radius: 8px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.plan-secim legend { padding: 0 .4rem; font-size: .9rem; color: var(--paper-dim); }
.plan-radyo { display: flex; flex-direction: row !important; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.plan-radyo input { width: 20px; height: 20px; accent-color: var(--hazard); }
.onay-kutusu { display: flex; flex-direction: row !important; align-items: flex-start; gap: .7rem; font-size: .9rem; line-height: 1.45; }
.onay-kutusu input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--hazard); }
.onay-kutusu a { color: var(--hazard); }
.odeme-form select { padding: .75rem; background: var(--panel); color: var(--paper); border: 2px solid var(--paper-dim); font-family: 'Baloo 2', sans-serif; font-size: .95rem; }
.odeme-form .button { min-height: 48px; }
.odeme-gomme { margin: 1rem 0; background: #fff; border-radius: 10px; padding: .5rem; min-height: 400px; }
.odeme-gomme iframe { display: block; border: 0; }
.odeme-not { margin-top: 1rem; }
.siparis-kutu { padding: 1rem 1.25rem; margin: 1rem 0 1.25rem; background: var(--panel); border-left: 4px solid var(--paper-dim); border-radius: 0 8px 8px 0; }
.siparis-kutu.durum-odendi { border-left-color: #51cf66; }
.siparis-kutu.durum-basarisiz, .siparis-kutu.durum-suphe { border-left-color: #ff6b6b; }
.siparis-kutu.durum-beklemede { border-left-color: var(--hazard); }
.siparis-kutu p { margin: .3rem 0; }
.siparis-tablo th { text-align: left; }
.siparis-durum { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.siparis-durum.durum-odendi { color: #51cf66; }
.siparis-durum.durum-beklemede { color: var(--hazard); }
.siparis-durum.durum-basarisiz, .siparis-durum.durum-suphe { color: #ff6b6b; }
@media (max-width: 600px) {
    .plan-kartlari { grid-template-columns: 1fr; }
    .odeme-form { max-width: 100%; }
    .odeme-gomme { padding: 0; }
    .siparis-tablo, .siparis-tablo thead, .siparis-tablo tbody, .siparis-tablo tr, .siparis-tablo th, .siparis-tablo td { display: block; }
    .siparis-tablo thead { display: none; }
    .siparis-tablo tr { margin-bottom: .8rem; border-bottom: 1px solid var(--panel-2); }
    .siparis-tablo td { border: 0; padding: .2rem 0; }
    .siparis-tablo td[data-etiket]::before { content: attr(data-etiket) ": "; color: var(--paper-dim); }
}
.onay-kutusu { min-height: 44px; }