/*
 * KAN web arayüzü — tasarım sistemi.
 *
 * Tüm renkler, boşluklar ve yarıçaplar :root altındaki değişkenlerden okunur;
 * koyu tema yalnızca bu değişkenleri yeniden tanımlar. Bileşen sınıfları
 * `blok__eleman--durum` düzenindedir ve React bileşenleriyle birebir eşleşir.
 *
 * Tema, kök elemandaki `data-theme` özniteliğinden okunur ve değeri her zaman
 * **çözülmüş** temadır ("light" ya da "dark"): işletim sisteminin tercihini
 * `base.html` içindeki açılış betiği ilk çizimden önce çözer, kullanıcının
 * seçimini ise `state/theme.js` yazar. Bu yüzden burada `prefers-color-scheme`
 * sorgusu yoktur — koyu palet tek yerde durur.
 */

:root {
    color-scheme: light;

    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-muted: #f0f3f8;
    --border: #e2e6ee;
    --border-strong: #cbd3e1;

    --text: #121826;
    --text-muted: #5b6577;
    --text-faint: #8a93a5;

    --primary: #2563eb;
    --primary-hover: #1d4fd7;
    --primary-soft: #e8effe;
    --on-primary: #ffffff;

    --success: #15803d;
    --success-soft: #e6f6ec;
    --danger: #c81e1e;
    --danger-soft: #fdeaea;
    --warning: #a16207;
    --warning-soft: #fdf3d7;
    /* Markdown callout'unda "soru" ailesi: palette karşılığı olmayan ton (bkz. .md-callout) */
    --question: #7c3aed;
    --question-soft: #f1ebfe;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    --shadow: 0 1px 2px rgba(18, 24, 38, .04), 0 8px 24px rgba(18, 24, 38, .06);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Okuma boyu: ayarlardan seçilen yazı büyütme çarpanı (bkz. state/text_scale.js) */
    --text-scale: 1;

    --header-height: 60px;
    --tabbar-height: 62px;
    /* Okuma genişliği (mobil ve tablet) ve masaüstü panosunun toplam genişliği */
    --content-width: 760px;
    /* Kapsam seçiminde sağ boşluğa oturan özet kartı */
    --rail-width: 300px;
    --shell-width: 1240px;
    --sidebar-width: 232px;

    /*
     * Grafik paleti (anabilim dalı dağılımı gibi kategorik veriler).
     * Sıra sabittir: 1. dilim her zaman 1. rengi alır, renkler döngüye sokulmaz.
     * Değerler renk körlüğü ayrımı ve zemin kontrastı için doğrulanmıştır; koyu
     * temadaki karşılıkları aynı sekiz rengin koyu zemine göre basamaklanmışıdır.
     */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-other: #8a93a5;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1117;
    --surface: #161b22;
    --surface-muted: #1c2230;
    --border: #262d3a;
    --border-strong: #39424f;

    --text: #e6edf3;
    --text-muted: #9aa6b8;
    --text-faint: #6e7b8d;

    --primary: #4f8cff;
    --primary-hover: #6b9dff;
    --primary-soft: #16223c;
    --on-primary: #08111f;

    --success: #4ade80;
    --success-soft: #12271b;
    --danger: #f87171;
    --danger-soft: #2c1618;
    --warning: #fbbf24;
    --warning-soft: #2a2211;
    --question: #a78bfa;
    --question-soft: #221b38;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-other: #6e7b8d;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.175rem; }
h3 { font-size: 1rem; }
p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- Açılış ve JavaScript kapalı durumu ---------------------------------- */

.boot, .noscript {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.boot__mark {
    width: 34px; height: 34px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: spin .8s linear infinite;
}

/* Açılış gözcüsünün mesajı (bkz. app.html) */
.boot__error { margin-bottom: var(--space-2); color: var(--text); font-weight: 650; }
.boot .btn { margin-top: var(--space-4); }

.noscript { text-align: left; }
.noscript h1 { margin-bottom: var(--space-2); color: var(--text); }

@keyframes spin { to { transform: rotate(360deg); } }

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

/* --- Uygulama iskeleti ---------------------------------------------------- */
/*
 * İki düzen, tek işaretleme (bkz. ui/layout.js):
 *
 *   < 960px  "mobil"      — üst çubukta marka + sağ köşede ayarlar ve profil,
 *                           gezinme alttaki sekme çubuğunda
 *   >= 960px "pano"       — üst çubuk + solda sabit kenar menüsü, geniş içerik
 *
 * Kırılım noktası tek yerde tutulur; her iki tarafı da değiştirirken bu bölüme
 * bakmak yeter.
 */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    /* Uygulama adı tamamen büyük harftir; harf aralığı biraz açılır. */
    letter-spacing: .04em;
}
.header__brand:hover { text-decoration: none; }
.header__brand img { width: 26px; height: 26px; border-radius: 7px; }

/* Profil ve ayarlar: her iki düzende de üst çubuğun sağ köşesine yaslanır. */
.header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.icon-btn--active { background: var(--primary-soft); color: var(--primary); }

/* Profil kısayolu: adın baş harfleri. */
.avatar {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.avatar:hover { border-color: var(--border-strong); text-decoration: none; }
.avatar--active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* Kenar menüsü ve içerik; mobilde tek sütun, panoda iki sütun. */
.shell {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar { display: none; }

.main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) calc(var(--tabbar-height) + var(--space-6));
}

@media (min-width: 960px) {
    .header { padding: 0 var(--space-5); }
    .header__inner { max-width: var(--shell-width); }

    .shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        /* Kenar menüsü çizilmediğinde (deneme, giriş, kayıt) içerik tek sütuna yayılır */
        gap: var(--space-5);
        width: 100%;
        max-width: var(--shell-width);
        margin: 0 auto;
        padding: 0 var(--space-5);
    }

    .sidebar {
        display: block;
        position: sticky;
        /* Üst çubuğun altına yapışır; içerikle birlikte kaymaz. */
        top: calc(var(--header-height) + var(--space-5));
        align-self: start;
        padding: var(--space-5) 0;
    }

    .shell--plain { grid-template-columns: minmax(0, 1fr); }

    .main { max-width: none; padding: var(--space-5) 0 var(--space-7); }
    .shell--plain .main { max-width: var(--content-width); margin: 0 auto; }
}

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .925rem;
    font-weight: 550;
}
.sidebar__link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.sidebar__link--active { background: var(--primary-soft); color: var(--primary); }
.sidebar__icon { display: inline-flex; flex: none; color: var(--text-muted); }
.sidebar__link--active .sidebar__icon { color: inherit; }

.sidebar__section {
    margin: var(--space-5) 0 var(--space-2);
    padding: 0 var(--space-3);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Alt sekme çubuğu: mobilde React Native tab navigator ile aynı düzen. */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: flex;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
}

@media (min-width: 960px) { .tabbar { display: none; } }

/* Çubukta altı sekme var; 320 px'lik bir telefonda sütun başına ~53 px kalır.
   `min-width: 0` olmadan flex öğesi kendi içeriğinden daha dar olamaz ve uzun bir
   etiket ("Koleksiyon") komşu sütunları iterdi. */
.tabbar__item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    font-size: .65rem;
    font-weight: 550;
    color: var(--text-faint);
}
.tabbar__item:hover { text-decoration: none; }
.tabbar__item--active { color: var(--primary); }
.tabbar__icon { display: inline-flex; }

/* Etiket asla satır kırmaz: sığmayan kısım üç noktayla kesilir. Kırpılmış bir
   yazı, iki satıra taşıp çubuğun yüksekliğini bozan bir yazıdan iyidir. */
.tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En dar telefonlarda (iPhone SE ~320 px) bir tık daha küçülür */
@media (max-width: 360px) {
    .tabbar__item { font-size: .6rem; gap: 2px; }
}

/* --- Sayfa başlığı -------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.page-head__text { min-width: 0; }
.page-head__subtitle { margin-top: var(--space-1); color: var(--text-muted); font-size: .95rem; }
/* Başlığın sağındaki kısayollar; dar ekranda başlığın altına iner ve genişliği paylaşır */
.page-head__actions { display: flex; gap: var(--space-2); }

@media (max-width: 640px) {
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* --- Pano (ana sayfa) ----------------------------------------------------- */

/* Bölüm başlığı + "tümü" bağlantısı */
.section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/*
 * Kutu ızgarası: panonun gövdesi. Mobilde tek sütun, masaüstünde iki eşit sütun.
 * Kutular satır boyunca aynı yüksekliğe uzar (grid'in varsayılan `stretch`'i),
 * böylece ızgarada boşluk kalmaz.
 */
.widgets { display: grid; gap: var(--space-4); }

@media (min-width: 960px) {
    .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Tek başına bir satırı kaplayan kutu (hata ve boş durum kartları) */
    .widget--wide { grid-column: 1 / -1; }
}

.widget { display: flex; flex-direction: column; gap: var(--space-3); }
.widget__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.widget__head h2 { font-size: 1.05rem; }

/* Kart içindeki küçük sayı kutuları */
/* Sütun sayısı içeriğe göre: kurul kartında dört kutu (doğru/boş/yanlış/çözülmedi) var */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }

.mini-stat { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-muted); }
.mini-stat__label { font-size: .75rem; color: var(--text-muted); }
.mini-stat__value { margin-top: 2px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Kutunun havuza oranı: çubuktaki parça genişliğinin sayıya dökülmüş hâli */
.mini-stat__meta { font-size: .75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Kutu içindeki kurul listesi: ad, ilerleme çubuğu ve "İncele" */
.progress-list { display: flex; flex-direction: column; gap: var(--space-2); }

.progress-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.progress-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.progress-list__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: .925rem; }
.progress-list__meta { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Kart ----------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
}
.card--flat { box-shadow: none; }
/* Dönem paketi kartı: listede öne çıkar */
.card--highlight { border-color: var(--primary); background: var(--primary-soft); }
.card__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.card__hint { color: var(--text-muted); font-size: .9rem; }
/* Yönetim paneli: kullanıcı ayrıntısında aboneliğin tahsilat defteri */
.charge-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .25rem; }

a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; border-color: var(--border-strong); }

/* --- Butonlar ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--on-primary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-muted); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-muted); color: var(--text); }

.btn--danger { background: transparent; border-color: var(--border-strong); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }

/* Apple'ın marka kuralı: siyah zemin (koyu temada beyaz) ve logo + metin */
.btn--apple { background: #000; color: #fff; }
.btn--apple:hover { background: #1c1c1e; }
.btn__icon { width: 16px; height: 16px; }

:root[data-theme="dark"] .btn--apple { background: #fff; color: #000; }
:root[data-theme="dark"] .btn--apple:hover { background: #e8e8ed; }

.btn--block { width: 100%; }
.btn--small { min-height: 36px; padding: 0 var(--space-3); font-size: .875rem; }

.btn__spinner {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin .7s linear infinite;
}

/* --- Form alanları -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: .875rem; font-weight: 600; color: var(--text); }
.field__hint { font-size: .825rem; color: var(--text-muted); }
.field__error { font-size: .825rem; color: var(--danger); }

.input, .select, .textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.input--invalid, .select--invalid { border-color: var(--danger); }
.input:disabled, .select:disabled { background: var(--surface-muted); color: var(--text-muted); }

.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* Dosya seçici: yerel düğme gizlenir, etiket alanın geri kalanıyla aynı görünür */
.file-picker__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.file-picker__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.file-picker__label:hover { border-color: var(--primary); }
.file-picker__input:focus-visible + .file-picker__label {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.file-picker--invalid .file-picker__label { border-color: var(--danger); }
.file-picker__button {
    flex: none;
    padding: 2px var(--space-3);
    font-size: .825rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 999px;
}
.file-picker__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
}
.file-picker__name--empty { color: var(--text-muted); }

.select {
    appearance: none;
    padding-right: var(--space-6);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Sayı seçici: soru sayısı gibi küçük değerler için dokunmatik dostu adımlayıcı */
.stepper { display: flex; align-items: center; gap: var(--space-3); }
.stepper__button {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1.25rem;
    cursor: pointer;
}
.stepper__button:disabled { opacity: .45; cursor: not-allowed; }
/* Sayı hem düğmelerle hem klavyeyle değiştirilir; alan bir girdi olduğu için
   diğer girdilerle aynı odak halkasını kullanır. */
.stepper__value {
    width: 5ch;
    min-height: 44px;
    padding: var(--space-2) 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.stepper__value:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: .875rem;
    font-weight: 550;
    cursor: pointer;
}
.chip--active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* --- Rozetler ve bildirimler --------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: .775rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--primary { background: var(--primary-soft); color: var(--primary); }

.notice {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    font-size: .9rem;
}
.notice--error { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.notice--success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.notice--info { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.notice--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }

.empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}
/* İkon çizgi olduğu için sönük çizilir: boş durumun sesi başlıkta olmalı */
.empty__icon { display: flex; justify-content: center; color: var(--text-faint); }
.empty__title { margin: var(--space-3) 0 var(--space-1); color: var(--text); font-weight: 650; }

/* --- İstatistik kutuları -------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }

.stat {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat__label { font-size: .8rem; color: var(--text-muted); font-weight: 550; }
.stat__value { margin-top: var(--space-1); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: .8rem; color: var(--text-faint); }

@media (max-width: 640px) {
    /* Üç kutu tek satırda: 2+1 dizilişi panoyu yamuk gösteriyordu */
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    .stat { padding: var(--space-3); }
    .stat__label { font-size: .7rem; }
    /* Değer satır atlamaz ve kutuya sığacak kadar küçülür: "3 sa 12 dk" hem
       ikiye bölününce hem taşınca kutu bozuk görünüyordu. Etiketten büyük
       kalmalı, aksi halde sayı değil etiket öne çıkıyor. */
    .stat__value { font-size: clamp(.85rem, 4vw, 1.25rem); white-space: nowrap; }
    .stat__meta { display: none; }
}

/* --- İlerleme ------------------------------------------------------------- */

.progress {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}
.progress__bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width .25s ease; }

/* --- Soru ve şıklar ------------------------------------------------------- */

.quiz-bar {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.quiz-bar__meta { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--text-muted); }

.steps {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.steps__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .85rem;
    color: var(--text-muted);
}
.steps__number {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: .75rem;
    font-weight: 700;
}
.steps__item--current { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.steps__item--current .steps__number { background: var(--primary); color: var(--on-primary); }
.steps__item--done .steps__number { background: var(--success); color: var(--surface); }

.question__meta { margin-bottom: var(--space-2); font-size: .8rem; color: var(--text-muted); }
.question__text { font-size: calc(1.05rem * var(--text-scale)); line-height: 1.6; }
/*
 * Gövde Markdown'dır (`ui/question.js`, stem profili): kutu `.question__text md`
 * sınıflarını birlikte taşır. `.md` dosyada sonra geldiği için yazı boyu ve satır
 * aralığı burada daha özgül seçiciyle gövdenin değerlerine geri alınır. Uzun
 * noktalı boşluklar ("biyokimya.........") ve NBSP ile hizalanmış eşleştirme
 * satırları dar ekranda taşmasın diye kırılabilir; tablo kendi kutusunda kayar.
 */
.question__text.md {
    min-width: 0;
    font-size: calc(1.05rem * var(--text-scale));
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.question__text.md > * + * { margin-top: var(--space-2); }
/* Eşleştirme satırlarındaki ASCII boşluk hizası korunur; satır yine de kırılabilir */
.question__text.md p,
.question__text.md li { white-space: pre-wrap; }
/* Tablo hücreleri bu kuraldan etkilenmez (pre-wrap `li`/`p` dışına sızmasın) */
.question__text.md .md-table { overflow-wrap: normal; white-space: normal; }
.question__image { margin-top: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); max-width: 100%; }

.choices { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover:not(:disabled) { border-color: var(--primary); }
.choice:disabled { cursor: default; }

.choice__marker {
    flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-muted);
}
.choice__text { flex: 1; min-width: 0; font-size: calc(1rem * var(--text-scale)); overflow-wrap: anywhere; }
/* Şık metni satır içi Markdown'dır (`MarkdownInline`); `.md` kabı yoktur, biçimler burada */
.choice__text code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
}
.choice__text mark { padding: 0 2px; border-radius: 3px; background: var(--warning-soft); color: inherit; }
.choice__text del { color: var(--text-muted); }
.choice__text .md-math-src { white-space: pre-wrap; }

.choice--selected { border-color: var(--primary); background: var(--primary-soft); }
.choice--selected .choice__marker { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.choice--correct { border-color: var(--success); background: var(--success-soft); }
.choice--correct .choice__marker { border-color: var(--success); background: var(--success); color: var(--surface); }
.choice--wrong { border-color: var(--danger); background: var(--danger-soft); }
.choice--wrong .choice__marker { border-color: var(--danger); background: var(--danger); color: var(--surface); }

/*
 * Açıklamalı şık: düğme + altında açıklama (`ui/question.js`). Açıklama düğmenin
 * kardeşidir (içinde bağlantı/katlanır kutu/tablo olabilir, düğmeye konamaz); ikisi
 * tek kart gibi görünsün diye düğmenin alt kenarı açılır, açıklama kenarlığı ve
 * zemini şık durumunu izler. Hover/odak yalnızca düğmededir. Açıklamasız şık bu
 * sarmalayıcıyı almaz, görünümü değişmez.
 */
.choice-item { display: flex; flex-direction: column; }
.choice-item > .choice {
    padding-bottom: var(--space-2);
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.choice__why {
    min-width: 0;
    padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) * 2 + 26px);
    font-size: calc(.875rem * var(--text-scale));
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-top-width: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    overflow-wrap: anywhere;
}
.choice-item--selected > .choice__why { border-color: var(--primary); background: var(--primary-soft); }
.choice-item--correct > .choice__why { border-color: var(--success); background: var(--success-soft); }
.choice-item--wrong > .choice__why { border-color: var(--danger); background: var(--danger-soft); }
@media (max-width: 480px) {
    /* Dar ekranda harf hizası yerine genişlik: tablo ve callout sıkışmasın */
    .choice__why { padding-left: var(--space-3); }
}

/*
 * Açık uçlu soru (`ui/question.js` → `RecallCard`): künyede biçim rozeti, "Cevabı
 * göster" düğmesi, vurgulu cevap kutusu ve şık görünümünde "Bildim / Bilemedim".
 * Cevap kutusu doğru şıkkın yeşilini değil birincil tonu taşır: cevap görünmesi bir
 * sonuç değildir; sonuç yanındaki "· Bildim / · Bilemedim" etiketindedir.
 */
.recall__format {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.recall__body { margin-top: var(--space-4); }
.recall__answer {
    padding: var(--space-3);
    border: 1px solid var(--primary);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    font-size: calc(1rem * var(--text-scale));
    overflow-wrap: anywhere;
}
.recall__label { font-weight: 700; }
.recall__verdict { font-weight: 600; }
.recall__verdict--correct { color: var(--success); }
.recall__verdict--wrong { color: var(--danger); }
.recall__why {
    margin-top: var(--space-2);
    font-size: calc(.875rem * var(--text-scale));
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.recall__grade { margin-top: var(--space-3); }

.quiz-nav {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.quiz-nav .btn { flex: 1; }

/* Deneme ekranının iki sütunu: soru solda, açıklamalı çözüm sağda.
   Dar ekranda tek sütundur; blokların DOM sırası (soru → çözüm → gezinme)
   dar ekranda okunması gereken sırayla aynıdır, çözüm "Sonraki" düğmesinin
   altına düşmez. Geniş ekranda çözüm ızgarayla sağ sütuna alınır. */
.quiz-run { display: grid; gap: var(--space-5); align-items: start; }
.quiz-run__question { min-width: 0; }
.quiz-run__side { min-width: 0; }
.quiz-run__nav { min-width: 0; }
/* Bloklar arası boşluğu ızgara verir; düğme sırasının kendi üst boşluğu tekrarlardı */
.quiz-run__nav .quiz-nav { margin-top: 0; }

/* Çözüm kendi kartında durduğu için üst ayracına gerek yok; o ayraç, çözüm
   sorunun altına eklenirken ikisini birbirinden ayırmak içindi. */
.quiz-run__side .solution:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Eşik `.builder` ile aynıdır: yan sütun ancak soru sütunu daralmadan sığdığında açılır.
   `:has()` şart koşulur, çünkü yan sütun ancak deneme ekranı okuma genişliğinden
   (760px) taşabilirse sığar; onu genişleten kural ebeveyni seçmek zorundadır.
   Seçici desteklenmiyorsa iki sütuna hiç geçilmez ve çözüm sorunun altında açılır. */
@media (min-width: 1120px) {
    @supports selector(:has(*)) {
        /* Deneme ekranı normalde okuma genişliğinde ortalanır; çözüm açıldığında
           yan panele yer açmak için kabuk genişliğine yayılır. */
        .shell--plain .main:has(.quiz-run--split) { max-width: var(--shell-width); }

        .quiz-run--split {
            grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        }

        /* Soru ve gezinme sol sütunda alt alta; çözüm sağda ikisinin hizasınca uzanır. */
        .quiz-run--split .quiz-run__question { grid-column: 1; grid-row: 1; }
        .quiz-run--split .quiz-run__nav { grid-column: 1; grid-row: 2; }
        .quiz-run--split .quiz-run__side { grid-column: 2; grid-row: 1 / span 2; }

        /* Çözüm uzun olabilir: panel üst çubuğun altına yapışır ve kendi içinde
           kayar, böylece soru ile "Sonraki" düğmesi ekranda kalır. */
        .quiz-run--split .quiz-run__side {
            position: sticky;
            top: calc(var(--header-height) + var(--space-5));
            max-height: calc(100vh - var(--header-height) - var(--space-6));
            overflow-y: auto;
            overscroll-behavior: contain;
        }
    }
}

/* Geçmiş süzgeçleri: dar ekranda alt alta, geniş ekranda tek satıra dizilir.
   Tarih alanları en dar sütunlardır; tür şeridi en geniş yeri ister. */
.history-filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
.history-filters__foot { margin-top: var(--space-3); gap: var(--space-2); }

@media (min-width: 720px) {
    .history-filters { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto auto; align-items: end; }
    /* Tarih girdisi metin alanı kadar geniş olmasın; içeriği sabit boyda */
    .history-filters input[type="date"] { width: auto; min-width: 9.5rem; }
}

/* Soru numarası ızgarası: hangi soru cevaplandı, tek bakışta görünür. */
.question-map { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.question-map__item {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.question-map__item--answered { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.question-map__item--correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.question-map__item--wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.question-map__item--current { outline: 2px solid var(--primary); outline-offset: 1px; }

/* --- Konu listesi --------------------------------------------------------- */

.topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-2);
}

.topic {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.topic:hover { border-color: var(--border-strong); }
.topic--selected { border-color: var(--primary); background: var(--primary-soft); }

.topic__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.topic__title { font-weight: 600; font-size: .925rem; }
.topic__meta { font-size: .8rem; color: var(--text-muted); }
.topic__percent { font-size: .8rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Hazırlık ekranı: kapsam seçimi --------------------------------------- */

/* Konu listesinin alt filtresi: arama kutusu ve anabilim dalı çipleri */
.filters { display: flex; flex-direction: column; gap: var(--space-3); }

/* Ana akış solda, seçim özeti sağdaki boşlukta (bkz. `.dashboard`). */
.builder { display: grid; gap: var(--space-4); align-items: start; }
.builder__main { min-width: 0; }
/* Dar ekranda özet kartı yoktur; yerini seçimden sonra açılan onay penceresi alır */
.builder__side { display: none; }

.builder__pick { display: flex; flex-direction: column; gap: var(--space-1); }
.builder__pick-name { font-size: 1.05rem; overflow-wrap: anywhere; }

/* Eşik kenar menüsünden (960px) yüksektir: yan sütun ancak içerik sütunu
   daralmadan sığdığında açılır. `ui/quiz_builder.js` aynı değeri kullanır. */
@media (min-width: 1120px) {
    .builder {
        grid-template-columns: minmax(0, 1fr) var(--rail-width);
        gap: var(--space-5);
    }

    .builder__side {
        display: block;
        /* Uzun konu listesi kaydırılırken "Devam" düğmesi ekranda kalır */
        position: sticky;
        top: calc(var(--header-height) + var(--space-5));
    }
}

/* --- Kurul özeti (ana sayfa) ---------------------------------------------- */

/* İlerleme satırı: ad + çubuk + değer. Anabilim dalı dağılımı için pasta
   grafiği kullanılır (aşağıdaki `.chart`), bu satır yalnızca ilerlemededir. */
.breakdown { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }

.breakdown__row { display: flex; align-items: center; gap: var(--space-3); font-size: .85rem; }
.breakdown__name { flex: 0 0 8.5rem; color: var(--text); font-weight: 550; }
/* Çubuğun kendisi `.statbar`'dır (bkz. `ui/chart.js`); burada yalnızca yer açılır */
.breakdown__bar { flex: 1; min-width: 0; }
.breakdown__value { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .breakdown__name { flex-basis: 6.5rem; font-size: .8rem; }
}

/* --- Pasta grafiği (anabilim dalı dağılımı) -------------------------------- */
/*
 * Halka biçimli pasta: dilimler arasında 2px'lik zemin boşluğu bırakılır,
 * ortada toplam soru sayısı durur. Renk tek başına kimlik taşımaz — her dilimin
 * adı ve sayısı sağdaki açıklama listesinde yazılıdır (grafiğin okunabilirliği
 * renk körlüğünde de bu listeye dayanır).
 */
.chart { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

.chart__figure { flex: none; position: relative; width: 148px; height: 148px; }
.chart__svg { width: 100%; height: 100%; display: block; }
.chart__slice { transition: opacity .15s ease; }
.chart__svg:hover .chart__slice { opacity: .45; }
.chart__svg .chart__slice:hover { opacity: 1; }

.chart__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}
.chart__total { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart__total-label { font-size: .75rem; color: var(--text-muted); }

.chart__legend {
    flex: 1 1 190px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
}
.chart__item { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; line-height: 1.35; }
.chart__swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; transform: translateY(-1px); }
/* Uzun anabilim dalı adları kırpılmaz, alt satıra kayar */
.chart__name { flex: 1; min-width: 0; color: var(--text); font-weight: 550; }
.chart__value { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    /* Dar ekranda açıklama listesi halkanın altına iner: yan yana dururken
       uzun anabilim dalı adları üç noktaya kırpılıyordu. */
    .chart { gap: var(--space-3); justify-content: center; }
    .chart__figure { width: 124px; height: 124px; }
    .chart__legend { flex-basis: 100%; }
}

/* --- Geçmiş kurul satırı --------------------------------------------------- */
/*
 * Biten kurullar ve önceki dönemlerin abonelikleri; ilerleme kartı yerine tek
 * satırlık özet + "İncele" düğmesi. Kart genişliğinde okunur kalsın diye
 * düğme dar ekranda alta iner.
 */
.course-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.course-row__body { flex: 1 1 200px; min-width: 0; }
.course-row__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.course-row__meta { margin-top: 2px; color: var(--text-muted); font-size: .85rem; }

/* --- Çözüm (markdown) ----------------------------------------------------- */

.solution { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.solution__author { font-size: .8rem; color: var(--text-faint); }
.solution__footer { margin-top: var(--space-3); gap: var(--space-2); }
/* Aboneliği olmayan kullanıcıya çözümün yerine çizilen kart (bkz. ui/solution.js) */
.solution--locked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

.md { font-size: calc(.95rem * var(--text-scale)); line-height: 1.65; }
.md > * + * { margin-top: var(--space-3); }
.md h3 { font-size: 1.05em; }
.md ul, .md ol { margin: 0; padding-left: 1.25rem; }
.md li + li { margin-top: var(--space-1); }
.md code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
}

/*
 * Markdown ağacının blokları (bkz. ui/markdown.js, core/markdown.js). Boyutlar `em`
 * cinsindendir: okuma boyu (`--text-scale`) `.md` yazı boyutunu büyüttüğünde
 * girinti, iç boşluk ve formüller de onunla büyür.
 */
:where(.md) :where(blockquote, pre, hr, figure) { margin: 0; }  /* tarayıcı varsayılanı; aralık `.md > * + *` */
.md h4, .md h5, .md h6 { margin: 0; font-size: .95em; line-height: 1.3; font-weight: 650; }
.md li > ul, .md li > ol { margin-top: var(--space-1); }
.md li > p + p, .md li > * + p { margin-top: var(--space-2); }
.md ul ul { list-style-type: circle; }
.md ul ul ul { list-style-type: square; }
.md mark { padding: 0 2px; border-radius: 3px; background: var(--warning-soft); color: inherit; }
.md del { color: var(--text-muted); }
.md a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.md hr { border: 0; border-top: 1px solid var(--border); }

/* Salt okunur görev maddesi: madde işareti yerine kutu */
.md li.md-task { list-style: none; }
.md-task__box { margin: 0 .45em 0 -1.25rem; vertical-align: -.1em; accent-color: var(--primary); }

/* Çitli kod bloğu: satırlar kırılmaz, kutu yatay kayar */
.md pre {
    padding: var(--space-3);
    overflow-x: auto;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    line-height: 1.5;
}
.md pre code { padding: 0; border-radius: 0; background: none; white-space: pre; }

/* Tablo: geniş tablo sayfayı değil kendi kutusunu kaydırır */
.md-table {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    -webkit-overflow-scrolling: touch;
}
.md-table table {
    min-width: 100%;
    border-collapse: collapse;
    font-size: .925em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.md-table th, .md-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.md-table th + th, .md-table td + td { border-left: 1px solid var(--border); }
.md-table th { background: var(--surface-muted); font-weight: 650; white-space: nowrap; }
.md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-muted) 55%, transparent); }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table:focus-visible { outline-offset: 0; }

/* Alıntı; `> ⚠️ ...` ile başlayanı uyarı tonunda */
.md-quote {
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}
.md-quote > * + * { margin-top: var(--space-2); }
.md-quote-warning {
    border-left-color: var(--warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--warning-soft);
    color: var(--text);
}

/* Obsidian callout'ları: aile renkleri iki değişkenle verilir */
.md-callout {
    --callout: var(--primary);
    --callout-soft: var(--primary-soft);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--callout);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--callout-soft);
}
.md-callout-tip { --callout: var(--success); --callout-soft: var(--success-soft); }
.md-callout-question { --callout: var(--question); --callout-soft: var(--question-soft); }
.md-callout-warning { --callout: var(--warning); --callout-soft: var(--warning-soft); }
.md-callout-danger { --callout: var(--danger); --callout-soft: var(--danger-soft); }
.md-callout-quote { --callout: var(--border-strong); --callout-soft: var(--surface-muted); }
.md-callout__title { color: var(--callout); font-weight: 650; }
.md-callout-quote .md-callout__title { color: var(--text-muted); }
.md-callout__body { margin-top: var(--space-1); }
.md-callout__body > * + * { margin-top: var(--space-2); }
details.md-callout > summary { cursor: pointer; list-style: none; }
details.md-callout > summary::-webkit-details-marker { display: none; }
details.md-callout > summary::after {
    content: "";
    display: inline-block;
    width: .45em; height: .45em;
    margin-left: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.2em) rotate(45deg);
    transition: transform .15s ease;
}
details.md-callout:not([open]) > summary::after { transform: translateY(-.05em) rotate(-45deg); }
details.md-callout:not([open]) { padding-bottom: var(--space-2); }

/* Matematik (KaTeX, bkz. ui/math.js). Blok formül ortalanır, taşarsa kayar. */
.md-math { max-width: 100%; overflow-x: auto; overflow-y: hidden; text-align: center; }
.md-math .katex-display { margin: 0; padding: var(--space-1) 0; }
.md-math--pending { text-align: left; }
.md .md-math-src { white-space: pre-wrap; }

/* Dipnotlar */
.md-fnref { font-size: .75em; line-height: 0; }
.md-fnref a { padding: 0 1px; text-decoration: none; }
.md-footnotes { padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: .875em; color: var(--text-muted); }
.md-footnotes ol { margin: 0; }
.md-footnotes li:focus { outline: none; background: var(--warning-soft); }
.md-footnotes__back { margin-left: .35em; text-decoration: none; }

/* Seçenek listesi: hata türü gibi tek seçimli kısa listeler */
.options { display: flex; flex-direction: column; gap: var(--space-2); }

.option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: .925rem;
    cursor: pointer;
}
.option:hover { border-color: var(--primary); }
.option--selected { border-color: var(--primary); background: var(--primary-soft); }

.option__dot {
    flex: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
}
.option--selected .option__dot { border-color: var(--primary); border-width: 5px; }

/* --- Çalışma kartları (flashcard) ----------------------------------------- */

/* Çözümün altındaki iki başlatma düğmesi; kartların kendisi popup'ta gezilir */
.study-launch { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.study-launch .btn { flex: 1 1 180px; }
.study-launch__pending {
    margin-left: var(--space-2);
    padding: 1px var(--space-2);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
}

.study { display: flex; flex-direction: column; gap: var(--space-3); }
.study__head { display: flex; align-items: center; gap: var(--space-2); }

/* Anki kartı: cevabı ayrı bir düğme değil kartın kendisi açar, bu yüzden
   gövdenin tamamı tıklanabilir ve klavyeyle odaklanabilirdir. */
.study__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform .12s ease;
}
.study__card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.study__card:hover .study__front { border-color: var(--primary); }
/* Dokunma/tıklama anında kart hafifçe bastırılır: çevrildiği hissedilsin */
.study__card:active { transform: scale(.995); }

/* Kartın tıklanabilir olduğunu söyleyen satır; cevap açılınca yerini cevaba bırakır */
.study__flip-hint {
    align-self: center;
    font-size: .8rem;
    color: var(--text-faint);
}

.study__front {
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 550;
    transition: border-color .15s ease;
}

.study__back {
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.study__back strong { color: var(--text); }
/* Cevap belirerek gelir; kartın çevrildiği anlaşılsın */
.study__card--flipped .study__back { animation: study-reveal .18s ease both; }

@keyframes study-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .study__card, .study__front { transition: none; }
    .study__card:active { transform: none; }
    .study__card--flipped .study__back { animation: none; }
}

/* Kartın koleksiyon kutusu: destelere ekle/çıkar, yerinde yeni deste aç.
   Popup'ın içinde açıldığı için ayrı bir pencere değil, kartın altına inen
   bir panel olarak çizilir — iç içe iki modal olmasın. */
.deck-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.deck-picker__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.deck-picker__row:hover:not(:disabled) { border-color: var(--border-strong); }
.deck-picker__row:disabled { opacity: .6; cursor: default; }
.deck-picker__row--on { border-color: var(--primary); background: var(--primary-soft); }

/* Onay kutusunun yerini tutan kare: içi boşken de aynı genişlikte durur ki
   satırlar işaretlendikçe kaymasın. */
.deck-picker__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary);
}
.deck-picker__row--on .deck-picker__check { border-color: var(--primary); }

.deck-picker__name { flex: 1; min-width: 0; font-size: .925rem; font-weight: 550; }
.deck-picker__count { font-size: .8rem; color: var(--text-muted); }

/* Yeni deste satırı: alan büyür, düğme kendi genişliğinde kalır */
.deck-picker__new { display: flex; gap: var(--space-2); align-items: center; }
.deck-picker__new .input { flex: 1; min-width: 0; }

/* Yatay bar grafiği: kategori adı + değer üstte, dolan çubuk altta.
   Ad uzun olabildiği için tek satıra sığmayan kısmı kırpılır (title'da tamamı durur). */
.bars { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bars__row { display: flex; flex-direction: column; gap: 6px; }
.bars__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bars__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 550;
}
/* Başarı oranı: çözülenlerin kaçı doğru bilindi. Havuz yüzdelerinden (`.statmeta__percents`)
   ayrı bir ölçü olduğu için ayrı yerde ve "başarı" sözcüğüyle yazılır. */
.bars__hint { flex: none; font-size: .8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Çubuğun altındaki bilgi satırı: solda sayılar, sağda aynı kırılımın yüzdeleri.
   Dar ekranda yüzdeler alt satıra iner ama sağa yaslı kalır. */
.statmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px var(--space-3);
    font-size: .8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.statmeta__counts { min-width: 0; }
.statmeta__percents { margin-left: auto; text-align: right; color: var(--text-faint); }

/* İlerleme çubuğu (`ui/chart.js` → `StatBar`).

   Çubuğun tamamı havuzun tamamıdır: ilgili dersin/kurulun/konunun bütün soruları.
   Dolu kısım üç renge ayrılır — yeşil doğru, sarı boş bırakılan, kırmızı yanlış —
   kalan boşluk hiç çözülmemiş sorulardır. Renk tek başına bilgi taşımaz: sayılar
   satırın metninde, `title` ve `aria-label` içinde yazılıdır.

   Çok küçük paylar (300 soruda 1 doğru) görünmez kalmasın diye her parçaya 3px
   alt sınır konur; toplam %100'ü aşarsa flex parçaları oranlı kısaltır. */
.statbar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}
.statbar__part { min-width: 3px; transition: width .25s ease; }
.statbar__part--success { background: var(--success); }
.statbar__part--warning { background: var(--warning); }
.statbar__part--danger { background: var(--danger); }
/* Çözülmemiş pay: zemin görünsün diye saydam. Çizilmesinin tek sebebi tıklanabilmesi */
.statbar__part--muted { background: transparent; }

/* Tıklanabilir çubuk: her renk kendi soru listesini açar (`ui/stat_questions.js`).
   Parçalar <button> olduğu için tarayıcının düğme görünümü sıfırlanır; ince bir
   çubukta imleç ve odak halkası dışında görsel bir değişiklik olmaz. */
.statbar--clickable .statbar__part {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.statbar--clickable .statbar__part:hover { filter: brightness(1.15); }
.statbar--clickable .statbar__part:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Renklerin açıklaması; bir liste için bir kez çizilir */
.statbar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: .78rem;
    color: var(--text-muted);
}
.statbar-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.statbar-legend__dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.statbar-legend__dot--success { background: var(--success); }
.statbar-legend__dot--warning { background: var(--warning); }
.statbar-legend__dot--danger { background: var(--danger); }
.statbar-legend__dot--muted { background: var(--surface-muted); border: 1px solid var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
    .statbar__part { transition: none; }
}

/* İstatistik sayfasındaki satır kırılımı: ad + başarı rozeti, çubuk, sayı/yüzde satırı */
.stat-row { display: flex; flex-direction: column; gap: 6px; }
.stat-row + .stat-row { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.stat-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat-row__name { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }

/* Sınav notu tahmini (bkz. ui/forecast.js): büyük not, ders satırları ve eşik çizgisi */
.forecast { display: flex; flex-direction: column; gap: var(--space-1); }
.forecast__score { font-variant-numeric: tabular-nums; line-height: 1.1; }
.forecast__score strong { font-size: 2.25rem; font-weight: 700; color: var(--text); }
.forecast__total { font-size: 1.1rem; color: var(--text-muted); }
.forecast__penalty { font-size: .9rem; font-weight: 600; color: var(--danger); }
/* Aboneliksiz tanıtımdaki örnek not: okunmaz, yalnızca neyin açılacağını gösterir */
.forecast__score--blurred { filter: blur(6px); opacity: .6; user-select: none; }
.forecast-list { display: flex; flex-direction: column; gap: var(--space-3); }

.forecast-row__net { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.forecast-row__of { font-weight: 400; color: var(--text-muted); }
.forecast-row__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.forecast-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-muted);
}
.forecast-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.forecast-bar__fill--primary { background: var(--primary); }
.forecast-bar__fill--danger { background: var(--danger); }
/* Baraj eşiği: çubuğu dikine kesen ince çizgi, dolu kısmın üstünde de görünür */
.forecast-bar__cutoff {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--text);
}

/* Çizgi ikonlar (bkz. `ui/icons.js`).

   `currentColor` ile boyandıkları için bulundukları metnin rengini alır; koyu
   temada ayrıca bir kural gerekmez. Metin içinde kullanıldıklarında satır
   üzerinde biraz yukarı çekilir, aksi halde yazının altına düşüyorlardı. */
.icon {
    display: inline-block;
    flex: none;
    vertical-align: -0.18em;
}

/* --- Yıldızlı puanlama ---------------------------------------------------- */

/* Çözümün ve kartların altında duran 1-5 yıldız + ortalama */
.rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.rating--compact { gap: var(--space-1); }

.rating__stars { display: flex; align-items: center; gap: 2px; }

.rating__star {
    padding: 0 1px;
    border: 0;
    background: none;
    /* Boş yıldız da okunabilir kalmalı: renk zayıflatılır, yıldız gizlenmez */
    color: var(--border-strong);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.rating__star:hover:not(:disabled) { transform: scale(1.12); }
.rating__star:disabled { cursor: progress; opacity: .6; }
.rating__star--on { color: var(--warning); }

/* Fare üzerindeyken imlecin solundaki yıldızlar da dolu görünür (önizleme) */
.rating__stars:hover .rating__star { color: var(--warning); }
.rating__stars .rating__star:hover ~ .rating__star { color: var(--border-strong); }

.rating__summary { color: var(--text-muted); font-size: .85rem; }
.rating__average { color: var(--text-faint); font-size: .8rem; }

/* --- Diyalog (popup) ------------------------------------------------------ */

.modal {
    position: fixed;
    inset: 0;
    /* Başlık ve alt sekme çubuğunun (z-index 20) üstünde kalır */
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(9, 13, 22, .55);
    animation: modal-in .15s ease;
}

.modal__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 2 * var(--space-4));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.modal__dialog:focus { outline: none; }

.modal__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.modal__title { flex: 1; font-size: 1rem; }
.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.modal__close:hover { background: var(--surface-muted); color: var(--text); }

.modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow-y: auto;
}

.modal__foot { display: flex; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border); }
.modal__foot .btn { flex: 1; }

@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
}

/* --- Ayarlar penceresi ----------------------------------------------------- */

/* Üç durumlu seçim şeridi (Açık / Koyu / Sistem) */
.segmented {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.segmented__option {
    flex: 1;
    min-height: 38px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.segmented__option:hover { color: var(--text); }
.segmented__option--active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

/* Açık/kapalı ayar satırı; tamamı tıklanabilir (bkz. ui/primitives.js) */
.toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}
.toggle:hover { border-color: var(--border-strong); }

.toggle__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.toggle__label { font-size: .9375rem; font-weight: 600; color: var(--text); }
.toggle__hint { font-size: .8125rem; color: var(--text-muted); }

.toggle__switch {
    flex: none;
    width: 44px;
    height: 26px;
    padding: 3px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background .15s ease;
}

.toggle__knob {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .15s ease;
}

.toggle--on .toggle__switch { background: var(--primary); }
.toggle--on .toggle__knob { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
    .toggle__switch, .toggle__knob { transition: none; }
}

/* Pencere içindeki gezinme bağlantıları */
.menu { display: flex; flex-direction: column; gap: var(--space-1); }

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    text-align: left;
    font-size: .95rem;
    font-weight: 550;
    cursor: pointer;
}
.menu__item:hover { background: var(--surface-muted); text-decoration: none; }
.menu__item--danger { color: var(--danger); }
.menu__icon { display: inline-flex; flex: none; color: var(--text-muted); }

/* --- Açılır bölüm --------------------------------------------------------- */

.disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.disclosure + .disclosure { margin-top: var(--space-2); }
.disclosure__button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.disclosure__button:hover { background: var(--surface-muted); }
.disclosure__title { flex: 1; font-weight: 550; font-size: .95rem; }
.disclosure__panel { padding: 0 var(--space-4) var(--space-4); }

/* --- Liste satırı --------------------------------------------------------- */

.list { display: flex; flex-direction: column; gap: var(--space-2); }

.list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
}
a.list-item:hover { text-decoration: none; border-color: var(--border-strong); }
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; font-size: .95rem; }
.list-item__meta { font-size: .825rem; color: var(--text-muted); }

/* Kart içi madde listesi (hesap silme sayfasındaki "silinenler / kalanlar") */

.bullets { margin: var(--space-2) 0 0; padding-left: 1.15rem; font-size: .925rem; line-height: 1.6; color: var(--text-muted); }
.bullets li + li { margin-top: var(--space-2); }

/* --- Yükleniyor iskeletleri ---------------------------------------------- */

.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 37%, var(--surface-muted) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- Giriş / kayıt ekranları --------------------------------------------- */

.auth { max-width: 420px; margin: 0 auto; padding-top: var(--space-5); }
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); text-align: center; }
.auth__brand img { width: 46px; height: 46px; border-radius: 12px; }
.auth__footer { margin-top: var(--space-4); text-align: center; font-size: .9rem; color: var(--text-muted); }

.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-faint); font-size: .8rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Kullanıcı sözleşmesi ------------------------------------------------- */
/*
 * `.legal` metnin kendisi; hem onay ekranında hem statik sayfada kullanılır.
 * `.legal__scroll` yalnızca onay ekranındadır: metin kendi kutusunda kaydırılır,
 * böylece "sonuna kadar okundu mu" ölçümü sayfanın kaydırma durumuna değil bu
 * kutuya bakar ve alttaki onay düğmesi her zaman görünür kalır.
 */

.legal { font-size: .925rem; line-height: 1.65; color: var(--text); }
.legal__title { font-size: 1rem; line-height: 1.5; }
.legal__version { margin-top: var(--space-1); font-size: .8rem; color: var(--text-faint); }
.legal__lead { margin-top: var(--space-3); color: var(--text-muted); }
.legal__section { margin-top: var(--space-4); }
.legal__heading { font-size: .95rem; color: var(--text); }
.legal__list { margin: var(--space-2) 0 0; padding-left: 1.15rem; }
.legal__list li + li { margin-top: var(--space-2); }

.legal__scroll {
    max-height: min(58vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.legal__scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Yönetim paneli ------------------------------------------------------- */
/*
 * /yonetim/ ekranları (screens/staff*.js, ui/staff_*.js). Panel telefonda da tam
 * kullanılır; kırılım noktası 720px:
 *
 *   > 720px  solda panel menüsü (.staff-shell__aside), içerikte tablolar
 *   ≤ 720px  üstte "Yönetim menüsü" düğmesi + çekmece, tablolar kart listesi,
 *            karar çubuğu ekranın altına sabit (.staff-actionbar)
 *
 * Uygulamanın kenar menüsü ve alt sekmeleri panelde çizilmez (.shell--staff).
 * Telefon genişliğinde (360–420px) yatay taşma olmamalıdır: ızgara sütunları
 * `minmax(0, …)`, uzun değerler `overflow-wrap: anywhere` ile kırılır. Dokunma
 * hedefleri en az 44px'tir. İnceleme ekranı 1120px üstünde iki sütundur (solda
 * belge, sağda bilgiler), altında tek sütuna iner.
 */

.header__staff { display: inline-flex; }

/* Panel sayfaları uygulamanın okuma genişliğiyle sınırlanmaz; alt sekme çubuğu yoktur */
.shell--staff .main {
    max-width: var(--shell-width);
    padding-bottom: var(--space-6);
}
@media (min-width: 960px) {
    .shell--staff { grid-template-columns: minmax(0, 1fr); }
    .shell--staff .main { max-width: none; padding-bottom: var(--space-7); }
}

/* Dokunmatik simge düğmesi: en az 44×44 */
.staff-touch {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.staff-touch:hover { background: var(--surface-muted); color: var(--text); }

.staff-shell { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.staff-shell__main { min-width: 0; }
.staff-shell__aside { display: none; }

@media (min-width: 721px) {
    .staff-shell { grid-template-columns: 210px minmax(0, 1fr); }
    .staff-shell__aside {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        align-self: start;
        max-height: calc(100dvh - var(--header-height) - 2 * var(--space-4));
        overflow-y: auto;
    }
    .staff-topbar, .staff-drawer { display: none; }
}

.staff-nav { display: flex; flex-direction: column; gap: 2px; }
.staff-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .925rem;
    font-weight: 550;
}
.staff-nav__link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.staff-nav__link--active { background: var(--primary-soft); color: var(--primary); }
.staff-nav__link--muted { font-weight: 500; }
.staff-nav__icon { display: inline-flex; flex: none; width: 20px; justify-content: center; }
.staff-nav__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-nav__footer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

.staff-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-width: 0;
}
.staff-topbar__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}
.staff-topbar__crumb {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Telefon çekmecesi: üst çubuğun ve alt sekmelerin üstünde, pencerelerin altında */
.staff-drawer {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    background: rgba(9, 13, 22, .55);
    animation: modal-in .15s ease;
}
.staff-drawer__panel {
    width: min(320px, 86vw);
    height: 100%;
    overflow-y: auto;
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.staff-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.staff-drawer__title { padding-left: var(--space-3); font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
    .staff-drawer { animation: none; }
}

/* Pano modül kartları */
.staff-modules {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
.staff-module {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    min-height: 44px;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.staff-module:hover { border-color: var(--border-strong); text-decoration: none; }
.staff-module__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
}
.staff-module__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.staff-module__title { font-weight: 650; }
.staff-module__text { font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }

.staff-back { padding-left: 0; }
.staff-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 4px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font: 600 .7rem/1.5 var(--font);
    text-align: center;
}
.btn .kbd { margin-left: var(--space-1); background: transparent; color: inherit; border-color: currentColor; opacity: .7; }

.staff-card-title { font-size: 1rem; margin: 0; }
.card > .staff-card-title { margin-bottom: var(--space-3); }

.staff-filters { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.staff-filters .segmented { flex-wrap: wrap; }
.staff-filters__search-row { flex-wrap: nowrap; }

@media (min-width: 960px) {
    .staff-filters { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .staff-filters__search { grid-column: 1 / -1; }
}

.staff-keys-hint { display: inline-flex; align-items: center; gap: var(--space-1); }

.staff-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.staff-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .875rem; }
.staff-table th {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
}
.staff-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-table__row { cursor: pointer; }
.staff-table__row:hover { background: var(--surface-muted); }
.staff-table__name { font-weight: 600; }
.staff-table__email { word-break: break-all; }
.staff-table th[aria-sort] { padding-top: 0; padding-bottom: 0; }

/* Sıralanabilir başlık: başlığın tamamı düğmedir */
.staff-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.staff-sort:hover { color: var(--text); }
.staff-sort__mark { font-size: .7rem; color: var(--text-faint); }
th[aria-sort="ascending"] .staff-sort__mark, th[aria-sort="descending"] .staff-sort__mark { color: var(--primary); }

.staff-table-skeleton { display: flex; flex-direction: column; gap: var(--space-2); }

/* Dar ekran: her satır bir kart, sütunlar "etiket: değer" satırları */
.staff-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-cards__item {
    min-width: 0;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.staff-cards__item--link { cursor: pointer; }
.staff-cards__item--link:active { background: var(--surface-muted); }
.staff-cards__title { min-width: 0; overflow-wrap: anywhere; }
.staff-cards__title a { display: inline-block; min-height: 28px; font-weight: 600; }
.staff-cards__fields { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; }
.staff-cards__field {
    display: grid;
    grid-template-columns: minmax(5.5em, 32%) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    font-size: .875rem;
}
.staff-cards__field dt { color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.staff-cards__field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.staff-cards__sort { display: grid; gap: var(--space-1); }

.staff-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.staff-score { font-variant-numeric: tabular-nums; }

.staff-review { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.staff-review__side { min-width: 0; }

@media (min-width: 1120px) {
    .staff-review { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
    /* Belge sağ sütun kaydırılırken görünür kalır */
    .staff-review__document {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
    }
}

.doc-viewer {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.doc-viewer__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}
.doc-viewer__zoom { min-width: 3.5em; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.doc-viewer__stage {
    height: min(72vh, 760px);
    overflow: auto;
    padding: var(--space-3);
    background: var(--surface-muted);
    text-align: center;
}
.doc-viewer__image { max-width: none; height: auto; transition: transform .15s ease; }
.doc-viewer__frame { width: 100%; height: min(72vh, 760px); border: 0; background: var(--surface-muted); }

@media (max-width: 640px) {
    .doc-viewer__stage, .doc-viewer__frame { height: 60vh; }
}

.staff-facts { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: var(--space-3) 0; }
.staff-facts__item { min-width: 0; }
.staff-facts dt { font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.staff-facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }

.staff-compare { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.staff-compare__row {
    display: grid;
    grid-template-columns: 1.5em 8.5em minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}
.staff-compare__row:last-child { border-bottom: 0; }
.staff-compare__mark { font-weight: 700; text-align: center; color: var(--text-faint); }
.staff-compare__row--match .staff-compare__mark { color: var(--success); }
.staff-compare__row--mismatch .staff-compare__mark { color: var(--danger); }
.staff-compare__label { color: var(--text-muted); }
.staff-compare__value { overflow-wrap: anywhere; }

.staff-edevlet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    font-size: .9rem;
}
.staff-edevlet__code { font-weight: 700; letter-spacing: .04em; }

.staff-findings { margin-top: var(--space-3); }
.staff-findings__head { margin: 0 0 var(--space-1); font-size: inherit; }
.staff-findings__list { margin: 0; padding-left: 1.15rem; font-size: .9rem; line-height: 1.55; }

.staff-timeline { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.staff-timeline li {
    display: grid;
    grid-template-columns: minmax(9em, auto) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}
.staff-timeline li:last-child { border-bottom: 0; }
.staff-timeline__when { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.staff-ocr {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.staff-decision { display: flex; flex-direction: column; gap: var(--space-3); }
.staff-decision__reason { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.staff-decision__buttons { gap: var(--space-2); }

@media (min-width: 960px) {
    .header__staff { display: none; }
    /* Karar çubuğu kaydırırken ekranın altında kalır */
    .staff-decision { position: sticky; bottom: var(--space-3); z-index: 5; box-shadow: var(--shadow); }
    .staff-decision__reason { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}

.staff-template { flex-wrap: nowrap; }
.staff-template .input { flex: 1; min-width: 0; }

/* İşlem çubuğu (ui/staff_actions.js): geniş ekranda akışın içinde, telefonda altta sabit */
.staff-actionbar { display: flex; flex-direction: column; gap: var(--space-2); }
.staff-actionbar__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.staff-actionbar__hint { font-size: .8rem; color: var(--text-muted); text-align: center; }

.staff-confirm__message { overflow-wrap: anywhere; }

/* Sonuç bildirimi: ekranın altında kısa süre görünür */
.staff-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    z-index: 50;
    width: min(440px, calc(100vw - 2 * var(--space-4)));
    transform: translateX(-50%);
    box-shadow: var(--shadow);
    border-radius: var(--radius-sm);
}
.staff-toast .notice { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.staff-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-toast__close { min-width: 36px; min-height: 36px; color: inherit; }

@media (max-width: 720px) {
    /* Kısayollar fiziksel klavye içindir; telefonda ipucu gösterilmez */
    .staff-keys-hint { display: none; }

    .staff-actionbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgba(9, 13, 22, .08);
    }
    .staff-actionbar__buttons { flex-wrap: nowrap; }
    /* Üç düğme yan yana; dar telefonda uzun etiket taşmaz, iki satıra iner */
    .staff-actionbar__buttons .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 var(--space-2);
        white-space: normal;
        line-height: 1.15;
        text-align: center;
    }

    /* Sabit çubuk içeriğin son satırlarını örtmesin */
    .staff-review-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .staff-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

    .staff-filters__search-row .input { min-width: 0; }
    .staff-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .staff-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .staff-compare__row { grid-template-columns: 1.5em minmax(0, 7em) minmax(0, 1fr); }
}

@media (max-width: 380px) {
    .staff-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Uzun kullanıcı adı, e-posta, gerekçe ve OCR parçaları telefonda yatay taşma yapmasın */
.staff-card-title,
.staff-findings__list,
.staff-edevlet__code,
.staff-timeline li > *,
.staff-review .list-item__body { min-width: 0; overflow-wrap: anywhere; }

/* Pano kartları: her kart ilgili listeye bağlanır; ton kenarlıktan okunur */
.staff-kpis {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.staff-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    min-width: 0;
}
.staff-kpi--warning { border-left-color: var(--warning); }
.staff-kpi--danger { border-left-color: var(--danger); }
.staff-kpi__main { display: flex; flex-direction: column; gap: 2px; min-height: 44px; color: var(--text); }
.staff-kpi__main:hover { text-decoration: none; }
.staff-kpi__main:hover .staff-kpi__label { text-decoration: underline; }
.staff-kpi__label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.staff-kpi__value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.staff-kpi__meta { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.staff-kpi__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.staff-kpi__link { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; }

/* Kullanıcı listesi süzgeçleri ve ayrıntı düzeni */
.staff-user-filters { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.staff-user-filters .segmented { flex-wrap: wrap; }
.staff-user { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
    .staff-user { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.staff-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.staff-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .05em; }

/* Hata bildirimleri: liste + ayrıntı paneli (dar ekranda ayrıntı tam sayfa açılır) */
.staff-split { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.staff-split__list, .staff-split__detail { min-width: 0; }
@media (min-width: 1120px) {
    .staff-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .staff-split__detail { position: sticky; top: calc(var(--header-height) + var(--space-4)); max-height: calc(100vh - var(--header-height) - var(--space-6)); overflow-y: auto; }
}
.staff-preview__choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-preview__choice { padding: var(--space-2) var(--space-3); border-radius: 10px; border: 1px solid var(--border); overflow-wrap: anywhere; }
.staff-preview__choice--correct { border-color: var(--success); background: var(--success-soft); }
.staff-preview__answer { padding: var(--space-3); border-radius: 10px; border: 1px solid var(--border); overflow-wrap: anywhere; }
.staff-preview__answer--reported { border-color: var(--warning); }
.staff-preview__image { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 720px) {
    /* Sabit işlem çubuğu son bölümü örtmesin */
    .staff-user-page { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
    /* Beşe kadar işlem düğmesi: telefonda iki satıra sarılır */
    .staff-user-page .staff-actionbar__buttons { flex-wrap: wrap; }
    .staff-user-page .staff-actionbar__buttons .btn { flex: 1 1 40%; }
}

/* Soru düzenleyicisi: geniş ekranda düzenleyici + önizleme iki sütun; dar ekranda tek
   sütun ve kaydet çubuğu alta sabit (.staff-actionbar, ≤ 720px) */
.staff-editor { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.staff-editor__main, .staff-editor__side { min-width: 0; }
@media (min-width: 1120px) {
    .staff-editor { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .staff-editor__side { position: sticky; top: calc(var(--header-height) + var(--space-4)); max-height: calc(100vh - var(--header-height) - var(--space-6)); overflow-y: auto; }
}
@media (min-width: 721px) {
    .staff-question-page .staff-actionbar {
        position: sticky; bottom: 0; z-index: 5;
        padding: var(--space-3) 0;
        background: color-mix(in srgb, var(--bg, var(--surface)) 94%, transparent);
        border-top: 1px solid var(--border);
    }
    .staff-question-page .staff-actionbar__buttons { justify-content: flex-end; }
}
.staff-choice-editor { padding: var(--space-3); border-radius: 10px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-2); }
.staff-choice-editor--correct { border-color: var(--success); background: var(--success-soft); }
.staff-choice-editor__correct { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.staff-choice-editor__correct input { width: 20px; height: 20px; }
.staff-list-editor { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-list-editor__items { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.staff-list-editor__item { display: flex; flex-direction: column; gap: var(--space-1); }
.staff-list-editor__buttons { display: flex; gap: var(--space-1); justify-content: flex-end; }
.staff-list-editor__buttons .btn { min-height: 44px; min-width: 44px; }
.staff-image-control__row { flex-wrap: wrap; align-items: center; }
.staff-image-control__row .file-picker { flex: 1 1 220px; min-width: 0; }
.staff-conflict { padding: var(--space-3); border-radius: 10px; border: 1px solid var(--danger); display: flex; flex-direction: column; gap: var(--space-2); }
.staff-conflict__values { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.staff-conflict__value { min-width: 0; padding: var(--space-2); border-radius: 8px; background: var(--bg); border: 1px solid var(--border); overflow-wrap: anywhere; }
.staff-conflict__text { margin: 0; white-space: pre-wrap; font: inherit; }
.staff-conflict__actions { flex-wrap: wrap; }
.staff-conflict__actions .btn { min-height: 44px; flex: 1 1 160px; }
.staff-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.staff-history__item { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); min-width: 0; }
.staff-history__item:last-child { border-bottom: 0; }
.staff-history__change { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: hidden; }
.staff-history__old { color: var(--text-muted); text-decoration: line-through; }
.staff-preview__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.staff-question-row__head { display: block; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .staff-question-page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
    .staff-history__change { grid-template-columns: minmax(0, 1fr); }
}

/* Denetim kaydı: işlem başlığı, özet, açılan önce/sonra farkı, kişi süzgeci */
.staff-audit__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.staff-audit__summary { margin-top: var(--space-1); color: var(--text-muted); overflow-wrap: anywhere; }
.staff-audit__head + .btn, .staff-audit__summary + .btn { margin-top: var(--space-2); min-height: 44px; }
.staff-audit__changes { margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-audit__change dt { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.staff-audit__change dd { margin: 0; max-height: none; }
.staff-audit__actor { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); cursor: pointer; text-align: left; min-height: 44px; }
.staff-audit__actor:hover { text-decoration: underline; }
.staff-audit__actor-filter { flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Sınav takvimi, mağaza, fiyatlar: dönem kartları; dar ekranda tek sütun, tam genişlik alanlar */
.staff-calendar, .staff-prices { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); align-items: start; }
.staff-calendar__courses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.staff-calendar__course { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; min-width: 0; }
.staff-calendar__course:last-child { border-bottom: 0; }
.staff-calendar__course--current { border-left-color: var(--primary); }
.staff-calendar__name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.staff-calendar__dates { font-size: .875rem; color: var(--text-muted); }
.staff-calendar__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.staff-dates { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.staff-dates .input { width: 100%; min-height: 44px; }
@media (min-width: 520px) {
    .staff-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.staff-prices__fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.staff-prices__input-row { flex-wrap: nowrap; gap: var(--space-2); }
.staff-prices__input-row .input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.staff-prices__actions { justify-content: flex-end; }
.staff-prices__changed { font-weight: 700; color: var(--primary); }
.staff-prices__confirm { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; cursor: pointer; }
.staff-prices__confirm input { width: 20px; height: 20px; flex: none; }
.staff-store__error { font-size: .85rem; color: var(--danger); overflow-wrap: anywhere; margin-top: var(--space-1); }
@media (max-width: 720px) {
    .staff-calendar__course .btn, .staff-prices .btn, .staff-store .staff-cards .btn { min-height: 44px; }
    .staff-calendar__course .btn { flex: 1 1 100%; }
    .staff-prices__actions .btn { flex: 1 1 30%; }
}

/* --- Pazarlama (screens/staff_marketing.js, screens/staff_campaign.js) ------ */
/* Yatay çubuklar: kanal dağılımı ve huni; telefonda etiket üstte, çubuk ve değer altta */
.staff-bars { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.staff-bars__item { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.staff-bars__label { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.staff-bars__track { height: 10px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.staff-bars__fill { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--primary); }
.staff-bars__fill--muted { background: var(--text-muted); opacity: .45; }
.staff-bars__value { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.staff-campaign__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.staff-campaign__notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-campaign__tabs .segmented { flex-wrap: wrap; }
.staff-campaign__tabs .segmented__option { flex: 1 1 auto; }
.staff-link-url { overflow-wrap: anywhere; letter-spacing: 0; }
.staff-pick { justify-content: space-between; }
.staff-pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 12rem; }
.staff-assets { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.staff-asset { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.staff-asset__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.staff-asset__name { overflow-wrap: anywhere; }
.staff-asset__prompt { margin: 0; max-height: 9rem; overflow: auto; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-muted); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-asset-preview { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--radius-sm); }
@media (max-width: 720px) {
    .staff-bars__item { grid-template-columns: minmax(0, 1fr) auto; }
    .staff-bars__label { grid-column: 1 / -1; }
    .staff-campaign__tabs .segmented__option { min-height: 44px; flex: 1 1 30%; }
    .staff-campaign-page .btn { min-height: 44px; }
    /* Alta sabit işlem çubuğu son satırları örtmesin */
    .staff-campaign-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* --- Proje dokümantasyonu (screens/staff_docs.js) -------------------------- */
/*
 * Üç sütun: solda içindekiler, ortada gövde, sağda "Bu sayfada" (≥ 1500px). Daha
 * dar ekranda "Bu sayfada" gövdenin üstünde açılır kutu olur; ≤ 720px içindekiler de
 * açılır menüdür. Gövde Sphinx'in ürettiği HTML'dir (docutils sınıfları); stiller
 * `.docs-body` altına kapsanır, uygulamanın kalanına sızmaz. Telefonda yatay taşma
 * olmamalı: tablolar ve kod blokları kendi içinde kayar.
 */
.docs-search { position: relative; width: min(340px, 100%); }
.docs-search .input { width: 100%; min-height: 44px; }
.docs-search__results {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.docs-search__list { list-style: none; margin: 0; padding: 0; }
.docs-search__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    overflow-wrap: anywhere;
}
.docs-search__item:hover, .docs-search__item:focus-visible { background: var(--surface-muted); text-decoration: none; }

.docs-layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav" "onpage" "page";
    align-items: start;
}
.docs-nav { grid-area: nav; min-width: 0; }
.docs-onpage { grid-area: onpage; min-width: 0; }
.docs-page { grid-area: page; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.docs-nav, .docs-onpage {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: var(--space-2) var(--space-3);
}
.docs-nav__summary, .docs-onpage__summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 650;
    cursor: pointer;
}
.docs-nav__summary::-webkit-details-marker, .docs-onpage__summary::-webkit-details-marker { display: none; }
.docs-nav__summary::after, .docs-onpage__summary::after { content: "▾"; margin-left: auto; color: var(--text-muted); }
details[open] > .docs-nav__summary::after, details[open] > .docs-onpage__summary::after { content: "▴"; }
.docs-nav__caption {
    margin: var(--space-3) 0 var(--space-1);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.docs-nav__list { list-style: none; margin: 0; padding: 0; }
.docs-nav__list--nested { padding-left: var(--space-3); border-left: 1px solid var(--border); margin-left: var(--space-2); }
.docs-nav__link {
    display: block;
    padding: 6px var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .875rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.docs-nav__link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.docs-nav__link--active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.docs-nav__root { font-weight: 600; color: var(--text); }

@media (min-width: 721px) {
    .docs-layout { grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "nav onpage" "nav page"; }
    .docs-nav {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        max-height: calc(100dvh - var(--header-height) - 2 * var(--space-4));
        overflow-y: auto;
    }
    .docs-nav__summary { display: none; }
}
@media (min-width: 1500px) {
    .docs-layout--toc { grid-template-columns: 230px minmax(0, 1fr) 210px; grid-template-areas: "nav page onpage"; }
    .docs-layout--toc .docs-onpage {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        max-height: calc(100dvh - var(--header-height) - 2 * var(--space-4));
        overflow-y: auto;
    }
    .docs-onpage__summary { display: none; }
}

.docs-onpage__toc ul { list-style: none; margin: 0; padding: 0; }
.docs-onpage__toc ul ul { padding-left: var(--space-3); }
.docs-onpage__toc a { display: block; padding: 3px 0; font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.docs-onpage__toc a:hover { color: var(--primary); }
/* İlk düzey sayfa başlığının kendisi; listede tekrar etmesine gerek yok */
.docs-onpage__toc > ul > li > a { display: none; }
.docs-onpage__toc > ul > li > ul { padding-left: 0; }

.docs-crumbs { font-size: .85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.docs-card { min-width: 0; }

.docs-pager { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.docs-pager__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    overflow-wrap: anywhere;
}
.docs-pager__link:hover { border-color: var(--primary); text-decoration: none; }
.docs-pager__link--next { text-align: right; }
.docs-pager__label { font-size: .78rem; color: var(--text-muted); }

/* Sphinx gövdesi */
.docs-body { font-size: calc(.95rem * var(--text-scale)); line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.docs-body > :first-child, .docs-body section > :first-child { margin-top: 0; }
.docs-body p, .docs-body ul, .docs-body ol, .docs-body dl, .docs-body table, .docs-body pre,
.docs-body div.highlight, .docs-body div.admonition, .docs-body blockquote { margin: 0 0 var(--space-3); }
.docs-body h1, .docs-body h2, .docs-body h3, .docs-body h4, .docs-body h5 {
    margin: var(--space-6) 0 var(--space-3);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.docs-body h1 { font-size: 1.6rem; margin-top: 0; }
.docs-body h2 { font-size: 1.3rem; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.docs-body h3 { font-size: 1.1rem; }
.docs-body h4, .docs-body h5 { font-size: 1rem; }
.docs-body [id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.docs-body ul, .docs-body ol { padding-left: 1.4rem; }
.docs-body li + li { margin-top: var(--space-1); }
.docs-body li > p { margin-bottom: var(--space-1); }
.docs-body blockquote { padding-left: var(--space-3); border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.docs-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.docs-body img { max-width: 100%; height: auto; }
.docs-body p.rubric { font-weight: 700; margin-top: var(--space-4); }

/* Başlık bağlantısı (¶ / #): yalnızca başlığın üstüne gelince görünür */
.docs-body a.headerlink {
    margin-left: var(--space-2);
    color: var(--text-faint);
    font-weight: 400;
    text-decoration: none;
    visibility: hidden;
}
.docs-body h1:hover > a.headerlink, .docs-body h2:hover > a.headerlink, .docs-body h3:hover > a.headerlink,
.docs-body h4:hover > a.headerlink, .docs-body h5:hover > a.headerlink, .docs-body dt:hover > a.headerlink,
.docs-body caption:hover > a.headerlink, .docs-body a.headerlink:focus-visible { visibility: visible; }

/* Satır içi kod ve kod blokları */
.docs-body code, .docs-body pre, .docs-onpage__toc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86em;
}
.docs-body code.literal, .docs-body :not(pre) > code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface-muted);
    overflow-wrap: anywhere;
}
.docs-body a code { color: inherit; }
.docs-body pre {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    line-height: 1.5;
    white-space: pre;
}
.docs-body div.highlight pre { margin: 0; }
/* Pygments: renkler temaya göre yumuşak tutulur (koyu temada da okunur) */
.docs-body .highlight .c, .docs-body .highlight .c1, .docs-body .highlight .cm, .docs-body .highlight .ch,
.docs-body .highlight .cs { color: var(--text-faint); font-style: italic; }
.docs-body .highlight .k, .docs-body .highlight .kn, .docs-body .highlight .kd, .docs-body .highlight .kc,
.docs-body .highlight .ow { color: var(--primary); font-weight: 600; }
.docs-body .highlight .s, .docs-body .highlight .s1, .docs-body .highlight .s2, .docs-body .highlight .sd,
.docs-body .highlight .si { color: var(--success); }
.docs-body .highlight .mi, .docs-body .highlight .mf, .docs-body .highlight .m { color: var(--warning); }
.docs-body .highlight .nf, .docs-body .highlight .nc { color: var(--series-1); }

/* Tablolar: kendi içinde yatay kayar, sayfayı taşırmaz */
.docs-body table.docutils, .docs-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .875rem;
}
.docs-body table th, .docs-body table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    min-width: 90px;
}
.docs-body table th { background: var(--surface-muted); font-weight: 650; }
.docs-body table td p, .docs-body table th p { margin: 0; }
.docs-body table caption { text-align: left; font-weight: 600; padding-bottom: var(--space-2); }

/* Not / uyarı kutuları */
.docs-body div.admonition {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}
.docs-body div.admonition > :last-child { margin-bottom: 0; }
.docs-body p.admonition-title { margin-bottom: var(--space-1); font-weight: 700; }
.docs-body div.warning, .docs-body div.caution, .docs-body div.attention, .docs-body div.important {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}
.docs-body div.danger, .docs-body div.error { border-left-color: var(--danger); background: var(--danger-soft); }
.docs-body div.tip, .docs-body div.hint, .docs-body div.seealso { border-left-color: var(--success); background: var(--success-soft); }

/* API (sphinxcontrib-httpdomain) ve Python (autodoc) tanımları */
.docs-body dl.http, .docs-body dl.py {
    margin: var(--space-4) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.docs-body dl.http > dt, .docs-body dl.py > dt {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86rem;
    overflow-wrap: anywhere;
}
.docs-body dl.http > dd, .docs-body dl.py > dd { margin: 0; padding: var(--space-3); min-width: 0; }
.docs-body dl.http > dd > :last-child, .docs-body dl.py > dd > :last-child { margin-bottom: 0; }
.docs-body dl.py dl.py { margin: var(--space-3) 0; }
.docs-body dl.http > dt .sig-name:first-child .pre {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 0 6px;
    border-radius: 5px;
    color: var(--on-primary);
    background: var(--primary);
    font-weight: 700;
}
.docs-body dl.http.get > dt .sig-name:first-child .pre { background: var(--success); }
.docs-body dl.http.post > dt .sig-name:first-child .pre { background: var(--series-1); }
.docs-body dl.http.patch > dt .sig-name:first-child .pre, .docs-body dl.http.put > dt .sig-name:first-child .pre { background: var(--warning); }
.docs-body dl.http.delete > dt .sig-name:first-child .pre { background: var(--danger); }
.docs-body dl.py > dt .property, .docs-body dl.py > dt .sig-prename { color: var(--text-muted); }
.docs-body dl.py > dt .sig-name { font-weight: 700; color: var(--text); }
.docs-body dl.field-list { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.docs-body dl.field-list > dt { font-weight: 650; }
.docs-body dl.field-list > dd { margin: 0; }
.docs-body dl.simple > dt { font-weight: 650; }
.docs-body dl.simple > dd { margin: 0 0 var(--space-2) var(--space-4); }
@media (max-width: 480px) {
    .docs-body dl.field-list { grid-template-columns: minmax(0, 1fr); }
    .docs-body h1 { font-size: 1.35rem; }
    .docs-body h2 { font-size: 1.15rem; }
}

/* --- Geliştirme takibi (screens/staff_dev.js, staff_dev_item.js) ----------- */
.dev-item { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.dev-item__main, .dev-item__side { min-width: 0; }
@media (min-width: 1120px) {
    .dev-item { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .dev-item__side { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.dev-item__docs { margin-top: var(--space-4); }
.dev-item__docs code { overflow-wrap: anywhere; }
.dev-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dev-notes__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.dev-notes__item:first-child { padding-top: 0; }
.dev-notes__item:last-child { border-bottom: 0; }
.dev-notes__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.dev-notes__form { margin-top: var(--space-4); }
.dev-item .input[type="date"] { min-height: 44px; }

/* --- Haftanın Soruları (halka ve hikaye) ---------------------------------- */
/*
 * Halka ana sayfadadır (screens/home.js > WeeklyShortcut); hikaye kendi rotasında
 * tam ekran çizilir (screens/weekly_story.js). Durum sınıfları
 * `core/weekly_questions.js` sabitleriyle aynı adı taşır: halkada
 * none / in_progress / completed, dilimlerde answered / current / upcoming.
 */

.weekly-ring {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.weekly-ring:hover { text-decoration: none; border-color: var(--border-strong); }
.weekly-ring:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Halka: dış kutunun zemini halkanın kendisidir, içteki daire onu kenarda bırakır.
   `--fill` (0–1) yarım sette cevaplanan oranı taşır (core > progressFraction). */
.weekly-ring__avatar {
    --fill: 0;
    flex: none;
    width: 56px;
    height: 56px;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--fill) * 360deg), var(--border) 0);
}
/* Hiç açılmamış set: tam ve renkli halka (hikayelerdeki "görülmedi" işareti) */
.weekly-ring--none .weekly-ring__avatar {
    background: conic-gradient(from 200deg, var(--primary), var(--question), var(--primary));
}
/* Bitmiş set: sönük tam halka */
.weekly-ring--completed .weekly-ring__avatar { background: var(--border-strong); }

.weekly-ring__inner {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}
.weekly-ring--completed .weekly-ring__inner { background: var(--surface-muted); color: var(--text-muted); }

.weekly-ring__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.weekly-ring__title { font-weight: 650; }
.weekly-ring__meta {
    overflow: hidden;
    font-size: .85rem;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weekly-ring__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.weekly-ring__action { font-size: .85rem; font-weight: 600; color: var(--primary); }

/*
 * Hikaye: tam ekran örtü. Dar ekranda çerçeve ekranın tamamıdır, geniş ekranda
 * ortada telefon oranlı bir kart olur ve oklar kartın iki yanına çıkar. Örtü
 * `.app`'in içindedir; ekran koruması (`is-shielded`) onu da bulandırır.
 */
.story {
    position: fixed;
    inset: 0;
    /* Üst çubuk ve sekme çubuğunun (20) üstünde, açılır pencerenin (60) altında:
       çözümden açılan hata bildirimi ve kart oturumu hikayenin üstünde görünür */
    z-index: 40;
    display: flex;
    justify-content: center;
    background: var(--bg);
}

.story__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--surface);
}
.story__frame:focus { outline: none; }

.story__head {
    flex: none;
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
}

/* Dilimli ilerleme çubuğu: soru başına bir parça */
.story__segments { display: flex; align-items: center; gap: 4px; }
.story__segment {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    transition: background-color .2s ease, height .2s ease;
}
.story__segment--answered { background: var(--primary); }
.story__segment--current { background: color-mix(in srgb, var(--primary) 40%, var(--border)); }
/* Geçerli soru cevaplanmış olsa da kalın çizilir: nerede olunduğu her zaman görünsün */
.story__segment--active { height: 6px; }

.story__bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.story__heading { flex: 1; min-width: 0; }
.story__title { font-size: 1rem; }
.story__subtitle { font-size: .825rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.story__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.story__close:hover { background: var(--surface-muted); color: var(--text); }

/* Slayt kendi içinde kayar; uzun çözüm arkadaki sayfayı kaydırmaz */
.story__slide {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
}
.story__question,
.story__result { max-width: var(--content-width); margin: 0 auto; }

.story__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.story__course {
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
}
.story__actions { margin-top: var(--space-4); }
.story__solution { margin-top: var(--space-4); }

.story__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 100%;
    padding: var(--space-5) 0;
    text-align: center;
}
.story__score { display: flex; flex-direction: column; align-items: center; margin: 0; }
.story__score-value {
    font-size: 3rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.story__score-label { color: var(--text-muted); }
.story__result-text { max-width: 34ch; margin: 0; color: var(--text-muted); }
.story__result-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 320px;
    margin-top: var(--space-2);
}
.story__result .btn__spinner { width: 28px; height: 28px; color: var(--primary); }

/* Önceki / sonraki: dar ekranda çerçevenin altında bir şerit */
.story__nav {
    flex: none;
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
}
.story__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.story__arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.story__arrow:disabled { opacity: .4; cursor: default; }
.story__arrow:focus-visible,
.story__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (min-width: 720px) {
    .story {
        align-items: center;
        padding: var(--space-5) 88px;
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        backdrop-filter: blur(10px);
    }
    .story__frame {
        max-width: 560px;
        height: min(100%, 880px);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }
    /* Oklar çerçevenin dışında, iki yanında; şerit tıklamayı yutmaz */
    .story__nav {
        position: absolute;
        top: 50%;
        left: -68px;
        right: -68px;
        padding: 0;
        border: 0;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .story__arrow { pointer-events: auto; box-shadow: var(--shadow); }
}

/* --- Ekran koruması ------------------------------------------------------- */
/*
 * Oturum açıkken kök eleman `is-protected` sınıfını taşır: metin seçilemez,
 * görseller sürüklenemez, iOS'ta uzun basma menüsü açılmaz; form alanları
 * dışarıda kalır. Pencere odağı yitirince ya da sekme gizlenince (`is-shielded`)
 * uygulama bulanır ve `.shield` örtüsü çizilir; yazdırma çıktısı da boştur.
 * Gerekçe ve sınırlar: ui/screen_shield.js. Ekran görüntüsü tarayıcıda kesin
 * olarak engellenemez; bunlar caydırıcı önlemlerdir.
 */

html.is-protected .app {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
html.is-protected .app input,
html.is-protected .app textarea,
html.is-protected .app [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}
html.is-protected .app img,
html.is-protected .app svg {
    -webkit-user-drag: none;
}

html.is-shielded .app {
    filter: blur(18px);
    pointer-events: none;
}

.shield {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    cursor: pointer;
}
.shield__card {
    max-width: 360px;
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}
.shield__title { margin-bottom: var(--space-2); font-weight: 650; color: var(--text); }
.shield__text { font-size: .925rem; color: var(--text-muted); }

@media print {
    html.is-protected body > * { display: none !important; }
    html.is-protected body::after {
        content: "Bu içerik yazdırılamaz.";
        display: block;
        padding: 32px;
        font-family: sans-serif;
    }
}