/* ==========================================================================
   Dersi Anlat — arayüz stilleri
   Bölümler: 1 tokens/base · 2 layout/navigation · 3 forms/buttons
             4 tables/lists · 5 lesson/progress · 6 responsive
   Harici font, CDN veya framework yoktur. Renk ve boşluk yalnızca token'lardan gelir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS / BASE
   -------------------------------------------------------------------------- */
:root {
    /* Renkler — sınırlı, sakin bir palet */
    --color-bg: #f6f4f0;            /* sayfa zemini: sıcak nötr (ders ekranı ve Sınıf Modu ile aynı aile) */
    --color-surface: #ffffff;       /* ana yüzey */
    --color-surface-muted: #faf8f5; /* tablo başlığı, ikincil yüzey */
    --color-text: #1d1d1f;          /* ana metin: siyaha yakın */
    --color-text-2: #5c5852;        /* ikincil metin: sıcak gri, beyaz üzerinde ≈ 7:1 */
    --color-text-3: #6f6a64;        /* üçüncül (etiket, meta): ≈ 5:1 */
    --color-border: #e6e2dc;        /* ince sıcak sınır */
    --color-border-strong: #cdc8c0; /* form alanı sınırı */
    --color-accent: #1a63c9;        /* ana vurgu: doygun, sakin mavi (beyazda 5.4:1) */
    --color-accent-hover: #154fa2;
    --color-accent-soft: #eaf1fb;   /* seçili/vurgulu zemin */
    --color-success: #1e7a3e;
    --color-success-soft: #e8f4ec;
    --color-warning: #8a5300;       /* uyarı/telafi: ölçülü amber */
    --color-warning-soft: #fff5e5;
    --color-danger: #b42318;
    --color-danger-soft: #fdecea;
    --color-focus: #1a63c9;

    /* Tipografi — sistem fontu; Pardus'ta yüklü sans-serif'e düşer */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-md: 1.0625rem;  /* 17px */
    --text-lg: 1.1875rem;  /* 19px */
    --text-xl: 1.375rem;   /* 22px */
    --text-2xl: 1.625rem;  /* 26px */
    --leading: 1.55;
    --leading-tight: 1.25;
    --measure: 68ch;       /* uzun metinler için satır uzunluğu */

    /* Boşluk ölçeği */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Köşe, gölge, kontrol yüksekliği */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-1: 0 1px 2px rgba(29, 29, 31, 0.05);
    --shadow-2: 0 4px 16px rgba(29, 29, 31, 0.06);
    --control: 44px;       /* en küçük dokunma hedefi */
    --control-lg: 52px;
    --content-max: 1120px;
    --form-max: 640px;

    /* Oturum tonları: ders ekranı, Sınıf Modu ve ders akışı editörü aynı paleti paylaşır */
    --surface-warm: #fbf7ef;      /* Sınıf bölümü */
    --surface-cool: #eef4f7;      /* Laboratuvar bölümü */
    --tone-warm: #a4631a;         /* sınıf işareti (amber, mat) */
    --tone-cool: #1f6f9f;         /* laboratuvar / uygulama (okyanus, mat) */
    --surface-sage: #eef5f0;      /* etkinlik oturumu */
    --tone-sage: #2f7a5e;
    --surface-neutral: #f3f1ed;   /* tekrar oturumu */
    --tone-neutral: #5c5852;
    --surface-amber: #faf3e6;     /* değerlendirme oturumu */
    --tone-amber: #8a5300;

    --ease: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden özniteliği her zaman kazanır (display veren sınıflar dahil) */

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: var(--leading-tight); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }

/* Odak: klavye ile gezinmede belirgin halka */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.icon { width: 20px; height: 20px; flex: none; vertical-align: -0.2em; }
.icon--sm { width: 16px; height: 16px; }

.muted { color: var(--color-text-2); }
.meta { color: var(--color-text-3); font-size: var(--text-sm); }
.hint { color: var(--color-text-2); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.req { color: var(--color-danger); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--space-4); top: -100px; z-index: 100;
    padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.skip-link:focus { top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   2. LAYOUT / NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.topbar__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text);
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__logo { display: block; height: 36px; width: auto; }
.nav { display: flex; gap: var(--space-1); flex: 1; }
.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-2);
    font-weight: 500;
    transition: background var(--ease), color var(--ease);
}
.nav__link:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.nav__link.is-active { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.topbar__user { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.topbar__name { color: var(--color-text-2); font-size: var(--text-sm); }
.topbar__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-accent-soft); color: var(--color-accent);
    font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
}

/* Uygulama iskeleti: sol menü + ana sütun */
/* Uygulama iskeleti: sol menü + ana sütun.
   Aşağıdaki --shell-* değerleri yalnız oturum iskeleti ve öğretmen ana ekranına
   aittir; global token'lar ve sayfa zemini değişmez. */
.shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
    align-items: stretch;

    --shell-ink: #16233c;
    --shell-ink-2: #48566f;
    --shell-ink-3: #737f96;
    --shell-line: #e6ecf5;
    --shell-line-2: #cfdef3;
    --shell-tint: #f4f8fd;
    --shell-tint-2: #e9f1fd;
    --shell-tint-3: #dde9fb;
    --shell-quiet: #b7c1d1;
}
.sidebar {
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-5) var(--space-4) var(--space-6);
    background: var(--color-surface);
    border-right: 1px solid var(--shell-line);
    position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { padding: var(--space-2) var(--space-2) 0; }
.sidebar .brand__logo { height: 34px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 44px; padding: 0 var(--space-3);
    border-radius: 8px;
    color: var(--shell-ink-2); font-weight: 500; font-size: 0.9375rem;
    transition: background var(--ease), color var(--ease);
}
.sidebar__link .icon { width: 18px; height: 18px; color: var(--shell-ink-3); }
.sidebar__link:hover { background: var(--shell-tint); color: var(--shell-ink); text-decoration: none; }
.sidebar__link:hover .icon { color: var(--shell-ink-2); }
.sidebar__link.is-active { background: var(--shell-tint-2); color: var(--color-accent); font-weight: 600; }
.sidebar__link.is-active .icon { color: var(--color-accent); }
/* Alt grup (Ayarlar): menünün en altına yaslanır, ince ayraç */
.sidebar__nav--foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--shell-line); }
.drawer__nav--foot { padding-top: 0; }
.drawer__nav--foot::before { content: ""; display: block; height: 1px; margin: 4px 4px 10px; background: var(--shell-line); }

/* Avatar: fotoğraf varsa daireyi doldurur, yoksa baş harfler */
.topbar__avatar { overflow: hidden; flex: none; }
.topbar__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Üst bar: app shell'i tamamlar, kullanıcı alanı sağda */
.shell .topbar { border-bottom: 1px solid var(--shell-line); background: var(--color-surface); }
.shell .topbar__inner { max-width: none; min-height: 64px; padding: 0 var(--space-5); }
.shell .topbar__user { gap: 10px; }
.shell .topbar__avatar { width: 34px; height: 34px; font-size: 0.8125rem; }
.topbar__id { display: flex; flex-direction: column; line-height: 1.25; }
.shell .topbar__name { color: var(--shell-ink); font-size: 0.8125rem; font-weight: 600; }
.topbar__role { color: var(--shell-ink-3); font-size: 0.75rem; }
.topbar__exit { margin: 0; }
.topbar__exit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 8px;
    font: inherit; font-size: 0.8125rem; font-weight: 500;
    color: var(--shell-ink-3); background: transparent;
    border: 0; border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.topbar__exit-btn:hover { background: var(--shell-tint); color: var(--shell-ink); }
.topbar__exit-btn .icon { width: 15px; height: 15px; }

/* Dar ekran üst barı ve çekmece: masaüstünde görünmez, ≤768px'te sol menünün yerini alır (bkz. 6. RESPONSIVE) */
.topbar__brand, .topbar__menu { display: none; }
.topbar__menu {
    align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--shell-ink-2); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.topbar__menu .icon { width: 22px; height: 22px; }
.topbar__menu[aria-expanded="true"] { background: var(--shell-tint-2); color: var(--color-accent); }
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(22, 35, 60, 0.4); }
.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    width: min(320px, 86vw);
    background: var(--color-surface);
    box-shadow: -8px 0 32px rgba(22, 35, 60, 0.18);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: drawer-in 0.2s ease;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--shell-line); }
.drawer__head .topbar__id { flex: 1 1 auto; min-width: 0; }
.drawer__head .topbar__name { color: var(--shell-ink); font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__close {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: var(--shell-ink-2); cursor: pointer;
}
.drawer__close .icon { width: 20px; height: 20px; }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.drawer__foot { margin: auto 0 0; padding: 12px; border-top: 1px solid var(--shell-line); }
.drawer__exit { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
html.has-drawer { overflow: hidden; }
.shell .page { max-width: var(--content-max); }
.shell .page--dashboard { max-width: none; padding: var(--space-4) var(--space-5) var(--space-7); }

/* Öğretmen ana ekranı */
.dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: var(--space-5);
    align-items: start;
    max-width: 1420px;
    margin: 0 auto;
}
.dash__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dash__hello { margin-bottom: 0; }
.dash__hello .page__title {
    font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.2; color: var(--shell-ink);
}
.dash__hello .page__lead { margin-top: 6px; font-size: 0.9375rem; color: var(--shell-ink-3); }
.dash__pair { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: var(--space-4); margin-top: 0; align-items: start; }
.dash__aside { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

/* Sıradaki ders: ana odak. Yerel açık mavi yüzey, güçlü mavi yalnız ana CTA'da. */
.focus {
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 176px;
    padding: var(--space-5) 28px;
    background: var(--shell-tint);
    border: 1px solid #dbe6f6;
    border-radius: 12px;
    margin-bottom: 0;
}
.focus__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-surface); border: 1px solid #dbe6f6;
    color: var(--color-accent);
}
.focus__icon .icon { width: 26px; height: 26px; }
.focus__info { flex: 1 1 auto; min-width: 0; }
.focus__kicker { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.focus__badge {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
    border-radius: 999px; background: var(--shell-tint-2); color: var(--color-accent);
    font-size: 0.8125rem; font-weight: 600;
}
.focus__until { color: var(--shell-ink-3); font-size: var(--text-sm); }
.focus__title {
    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.25; color: var(--shell-ink); margin: 0 0 6px;
}
.focus__meta { margin: 0 0 var(--space-2); color: var(--shell-ink-2); font-size: 0.9375rem; }
.focus__when { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; color: var(--shell-ink-3); font-size: var(--text-sm); }
.focus__fact { display: inline-flex; align-items: center; gap: 6px; }
.focus__lead { margin: 0; color: var(--shell-ink-2); font-size: 0.9375rem; max-width: 60ch; }
.focus__actions { flex: none; display: flex; flex-direction: column; gap: var(--space-2); width: 200px; }
.focus__actions .btn { justify-content: center; width: 100%; }
.focus__actions .btn--secondary { background: var(--color-surface); color: var(--color-accent); border-color: var(--shell-line-2); }
.focus__actions .btn--secondary:hover { background: var(--shell-tint-2); }
.focus--empty, .focus--done { min-height: 0; padding: var(--space-5) 28px; }
.focus--empty .focus__title, .focus--done .focus__title { font-size: 1.25rem; margin-bottom: var(--space-2); }
.focus--done { background: var(--color-surface); border-color: var(--shell-line); }
.focus--done .focus__icon { color: var(--color-success); border-color: var(--shell-line); }
.focus.focus--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    row-gap: 10px;
    align-items: center;
    min-height: 0;
    padding: 14px 20px;
}
.focus--compact .focus__status {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; width: 100%; grid-column: 1;
}
.focus--compact .focus__info { min-width: 0; }
.focus--compact .focus__lead { max-width: none; }
.focus--compact .focus__icon { width: 40px; height: 40px; margin: 0; }
.focus--compact .focus__icon .icon { width: 20px; height: 20px; }
.focus--compact .focus__title { font-size: 1.0625rem; margin: 0 0 2px; }
.focus--compact .focus__lead { margin: 0; font-size: var(--text-sm); }
.focus--compact .focus__next {
    grid-column: 1;
    display: grid; gap: 2px;
    margin: 0; padding: 0 0 0 52px; border: 0;
}
.focus--compact .focus__actions {
    grid-column: 2; grid-row: 1 / -1;
    align-self: center; margin: 0; width: auto;
}
.focus--compact .focus__actions .btn { width: auto; min-width: 0; min-height: 38px; padding: 0 14px; }
.focus__next-kicker { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--shell-ink-2); letter-spacing: 0.01em; }
.focus__next-when { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--shell-ink); letter-spacing: -0.01em; }
.focus__next-what { margin: 0; font-size: var(--text-sm); font-weight: 400; color: var(--shell-ink-2); }

/* Kart yüzeyi: ince sınır, minimal gölge */
.dash-panel {
    background: var(--color-surface);
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(22, 35, 60, 0.04);
}
.dash-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--shell-line);
}
.dash-panel__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; color: var(--shell-ink); line-height: 1.3; }
.dash-panel__heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-panel__head--split { align-items: flex-start; }
.dash-panel__head--split .link { flex: none; margin-top: 2px; }
.dash-panel__note { margin: 0; font-size: var(--text-sm); font-weight: 400; color: var(--shell-ink-3); line-height: 1.3; }
.dash-panel__head .link { font-size: var(--text-sm); font-weight: 500; }
.dash-panel__head .btn--secondary {
    min-height: 38px; padding: 0 var(--space-3); gap: 6px;
    font-size: var(--text-sm); color: var(--color-accent);
    background: var(--color-surface); border-color: var(--shell-line-2);
}
.dash-panel__head .btn--secondary:hover { background: var(--shell-tint); }
.dash-panel__year { margin: 0; font-size: var(--text-sm); color: var(--shell-ink-3); }
.dash-panel__empty { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); color: var(--shell-ink-3); font-size: var(--text-sm); line-height: 1.4; }
.dash-panel__empty--compact { padding: 12px var(--space-5) 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-panel .empty-state { padding: var(--space-5); }
.dash-panel .table { margin: 0; }
.dash .table-wrap { overflow: visible; }

/* Sınıflarım: ferah kolonlar, düşük satır yüksekliği */
.dash .table--classes { table-layout: fixed; width: 100%; }
.dash .table--classes .col-class { width: 8%; }
.dash .table--classes .col-course { width: 38%; }
.dash .table--classes .col-place { width: 28%; }
.dash .table--classes .col-meter { width: 140px; }
.dash .table--classes .col-act { width: 126px; }
.dash .table--classes th {
    background: #f8fafc;
    font-size: 0.8125rem; font-weight: 500;
    color: var(--shell-ink-2);
    padding: 9px 12px;
    white-space: nowrap;
    border-bottom: 1px solid #eef2f8;
}
.dash .table--classes td {
    height: 62px;
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f8;
    font-size: 0.8125rem; color: var(--shell-ink-2);
}
.dash .table--classes tbody tr { height: 62px; }
.dash .table--classes tbody tr:last-child td { border-bottom: 0; }
.dash .table--classes tbody tr:hover { background: #fbfcfe; }
.dash .table--classes th:first-child, .dash .table--classes td:first-child { padding-left: 20px; }
.dash .table--classes th:last-child, .dash .table--classes td:last-child { padding-right: 16px; }
.dash .table--classes td:nth-child(2),
.dash .table--classes td:nth-child(3) { overflow: hidden; }
.table__lead { font-weight: 700; font-size: var(--text-sm); color: var(--shell-ink); white-space: nowrap; }
.table__place { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }
.table__place-week { display: block; color: var(--shell-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.table__place-topic {
    display: block; min-width: 0; width: 100%; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.8125rem; font-weight: 400; line-height: 1.3; color: var(--shell-ink-3);
}
.dash .table--classes .table__actions { text-align: right; white-space: nowrap; overflow: visible; padding-left: 8px; }
.dash .table--classes .table__actions .btn {
    min-height: 30px; height: 30px; padding: 0 8px; gap: 4px;
    font-size: 0.8125rem; font-weight: 500;
}
.table__clip {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table__clip--2 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.meter { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.meter progress {
    width: 84px; height: 8px; border: 0; border-radius: 999px; flex: none;
    background: #d6e2f3; accent-color: var(--color-accent);
}
.meter progress::-webkit-progress-bar { background: #d6e2f3; border-radius: 999px; }
.meter progress::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }
.meter__frac { font-size: 0.8125rem; color: var(--shell-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sınıflarım, dar ekran: tablo yerine kompakt sınıf kartları (≤860px'te görünür; etiketler bağlamdan bellidir) */
.classes-m { display: none; list-style: none; margin: 0; padding: 12px 16px 16px; gap: 8px; }
.class-card {
    display: grid; gap: 6px; min-width: 0;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--shell-line); border-radius: 10px;
}
.class-card__head { display: grid; gap: 1px; min-width: 0; }
.class-card__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--shell-ink); }
.class-card__course, .class-card__place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.class-card__course { font-size: var(--text-sm); font-weight: 600; color: var(--shell-ink-2); }
.class-card__place { margin: 0; font-size: 0.8125rem; color: var(--shell-ink-3); }
.class-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-top: 2px; }
.class-card__meter { flex: 1 1 auto; min-width: 0; }
.class-card__meter progress { flex: 1 1 0; width: 100%; min-width: 56px; max-width: 180px; }
.class-card__cta { flex: none; min-height: 40px; padding: 0 12px; gap: 4px; font-size: 0.8125rem; font-weight: 600; }

/* Son kullandığım ders */
.recent { display: flex; gap: var(--space-4); padding: 16px 20px 20px; align-items: center; }
.recent__img {
    width: 112px; height: 80px; object-fit: cover; flex: none;
    border-radius: 10px; background: var(--shell-tint);
}
.recent__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.recent__course { margin: 0; font-size: 0.8125rem; color: var(--shell-ink-3); }
.recent__title {
    margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--shell-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.recent__meta { margin: 0; font-size: var(--text-sm); color: var(--shell-ink-3); }
.recent .btn { margin-top: 6px; min-height: 36px; padding: 0 12px; gap: 6px; font-size: var(--text-sm); }
.recent-empty { padding: 16px 20px 20px; }
.recent-empty__title { margin: 0 0 4px; font-size: var(--text-sm); font-weight: 600; color: var(--shell-ink); }
.recent-empty__text { margin: 0 0 12px; font-size: var(--text-sm); color: var(--shell-ink-3); max-width: 42ch; }
.recent-empty .btn { min-height: 36px; padding: 0 12px; gap: 6px; font-size: var(--text-sm); }

/* Hızlı erişim */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 16px; }
.quick--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick__link {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; min-width: 0; padding: 10px 12px;
    border: 1px solid #eef2f8; border-radius: 12px;
    background: var(--color-surface);
    color: var(--shell-ink); font-weight: 600; font-size: 0.8125rem;
    line-height: 1.3;
    transition: background var(--ease), border-color var(--ease);
}
.quick__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--shell-tint-2); color: var(--color-accent);
}
.quick__icon .icon { width: 16px; height: 16px; }
.quick__label { min-width: 0; text-align: left; }
.quick__link:hover { border-color: #e6ecf5; background: #f8fafc; color: var(--shell-ink); text-decoration: none; }

/* Bugünün dersleri: sakin timeline */
.today { padding: var(--space-2) 0 var(--space-3); }
.today__item {
    position: relative;
    display: grid; gap: 3px;
    padding: var(--space-3) var(--space-5) var(--space-3) 46px;
}
.today__item::before {
    content: ""; position: absolute; left: 27px; top: 0; bottom: 0;
    width: 1px; background: var(--shell-line);
}
.today__item:first-child::before { top: 20px; }
.today__item:last-child::before { bottom: auto; height: 20px; }
.today__mark {
    position: absolute; left: 22px; top: 17px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--color-surface); border: 2px solid var(--shell-quiet);
}
.today__item--current .today__mark { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--shell-tint-2); }
.today__item--upcoming .today__mark { border-color: var(--shell-line-2); }
.today__item--past { color: var(--shell-ink-3); }
.today--done .today__item { color: var(--shell-ink-3); }
.today--done .today__name { font-weight: 500; color: var(--shell-ink-2); }
.today__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.today__time { font-size: 0.8125rem; color: var(--shell-ink-3); font-variant-numeric: tabular-nums; }
.today__name { font-weight: 600; font-size: var(--text-sm); color: var(--shell-ink); }
.today__item--past .today__name { font-weight: 500; color: var(--shell-ink-2); }
.today__sub { font-size: 0.8125rem; color: var(--shell-ink-3); }
.today__now {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px;
    border-radius: 999px; background: var(--color-accent); color: #fff;
    font-size: 0.75rem; font-weight: 600;
}

/* Akademik takvim */
.cal-tools { display: flex; align-items: center; gap: var(--space-2); }
.cal-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--shell-line); background: var(--color-surface);
    color: var(--shell-ink-2);
}
.cal-step:hover { background: var(--shell-tint); color: var(--color-accent); text-decoration: none; }
.cal-month {
    margin: 0; padding: var(--space-4) var(--space-5) var(--space-2);
    text-align: center; font-size: 1.0625rem; font-weight: 700; color: var(--shell-ink);
}
.cal { width: calc(100% - var(--space-5)); margin: 0 auto; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: 0.75rem; font-weight: 500; color: var(--shell-ink-3); text-align: center; padding: var(--space-2) 0; background: transparent; }
.cal td { padding: 1px 0 2px; text-align: center; vertical-align: top; border: 0; }
.cal-cell { position: relative; }
.cal-cell.is-out .cal-day { color: var(--shell-quiet); }
.cal-cell__wrap { position: relative; }
.cal-day {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 auto;
    border: 0; background: transparent; font: inherit; font-size: var(--text-sm);
    color: var(--shell-ink-2);
    border-radius: 50%; cursor: default;
}
button.cal-day { cursor: pointer; }
button.cal-day:hover, button.cal-day:focus-visible { background: var(--shell-tint-2); color: var(--color-accent); }
.cal-cell--public_holiday .cal-day { background: var(--color-danger-soft); color: var(--color-danger); font-weight: 600; }
.cal-cell--school_holiday .cal-day { background: var(--color-warning-soft); color: var(--color-warning); font-weight: 600; }
.cal-cell--exam_period .cal-day { background: var(--shell-tint); font-weight: 600; }
.cal-cell.is-today .cal-day { background: var(--color-accent); color: #fff; font-weight: 700; }
.cal-dots { display: flex; justify-content: center; gap: 3px; min-height: 9px; margin-top: -1px; }
.cal-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.cal-dot--today { background: var(--color-accent); }
.cal-dot--lesson { background: var(--color-success); }
.cal-dot--public_holiday { background: var(--color-danger); }
.cal-dot--school_holiday { background: var(--color-warning); }
.cal-dot--exam_period { background: var(--shell-ink-3); }
.cal-dot--custom { background: var(--color-accent); }
.cal-pop {
    display: none; position: absolute; z-index: 8; left: 50%; top: 100%;
    transform: translate(-50%, 4px); width: 240px;
    padding: var(--space-3); text-align: left;
    background: var(--color-surface); border: 1px solid var(--shell-line);
    border-radius: 10px; box-shadow: var(--shadow-2);
    font-size: var(--text-sm);
}
.cal-cell__wrap:focus-within .cal-pop { display: block; }
.cal-pop__date { margin: 0 0 var(--space-2); font-weight: 600; }
.cal-pop__label { margin: 0 0 2px; color: var(--shell-ink-3); font-size: 0.75rem; }
.cal-pop ul { margin: 0 0 var(--space-2); }
.cal-pop__event { margin: 0 0 4px; }
.cal-legend {
    display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
    gap: 8px var(--space-4);
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--shell-line);
    font-size: 0.75rem; color: var(--shell-ink-3);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .cal-dot { flex: none; }
.cal-next {
    display: flex; align-items: flex-start; gap: var(--space-3);
    margin: 0 var(--space-5) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    background: var(--shell-tint);
    font-size: var(--text-sm);
}
.cal-next__icon { flex: none; margin-top: 1px; color: var(--shell-ink-3); }
.cal-next__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-next__title { font-weight: 600; color: var(--shell-ink); }
.cal-next__type { font-size: 0.8125rem; color: var(--shell-ink-3); }
.cal-next--public_holiday { background: var(--color-danger-soft); }
.cal-next--public_holiday .cal-next__icon, .cal-next--public_holiday .cal-next__title { color: var(--color-danger); }
.cal-next--school_holiday { background: var(--color-warning-soft); }
.cal-next--school_holiday .cal-next__icon, .cal-next--school_holiday .cal-next__title { color: var(--color-warning); }
.cal-more { padding: 0 var(--space-5) var(--space-4); margin: 0; text-align: right; font-size: var(--text-sm); }
.cal-more .link { display: inline-flex; align-items: center; gap: 4px; }
#academic-calendar.is-loading { opacity: 0.62; pointer-events: none; }
.cal-error { margin: 0 var(--space-5); padding: var(--space-2) 0 0; color: var(--color-danger); font-size: var(--text-sm); }

.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-8);
}
.page--narrow { max-width: var(--form-max); }
.page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.page__title { margin: 0; }
.page__eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-2); }
.page__lead { margin: var(--space-1) 0 0; color: var(--color-text-2); }
.page__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.section { margin-top: var(--space-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section__title { font-size: var(--text-lg); }
.section__count { color: var(--color-text-3); font-size: var(--text-sm); font-weight: 400; }

/* Panel: yüzey. İçerik gerektirmedikçe kart kullanılmaz. */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.panel__body { padding: var(--space-5); }
.panel__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.panel--muted { box-shadow: none; background: var(--color-surface-muted); }

/* İki sütunlu düzen (masaüstü) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-5); align-items: start; }
.split__aside { min-width: 0; } /* sticky kullanılmaz: dokunmatik tahtada uzun form ekrandan taşabilir */

/* Özet satırı: yan yana sade metrikler, kart çorbası değil */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.stats__item { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--color-border); }
.stats__item:last-child { border-right: 0; }
.stats__label { display: block; font-size: var(--text-sm); color: var(--color-text-2); margin-bottom: var(--space-1); }
.stats__value { margin: 0; color: var(--color-text-2); }
.stat__number { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); margin-right: var(--space-1); }
.stats__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* Bildirimler */
.alert {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    margin-bottom: var(--space-4);
}
.alert .icon { margin-top: 2px; }
.alert--success { border-left-color: var(--color-success); color: var(--color-success); }
.alert--error { border-left-color: var(--color-danger); color: var(--color-danger); }
.alert--warn { border-left-color: var(--color-warning); color: var(--color-warning); }
.alert--info { border-left-color: var(--color-accent); color: var(--color-text); }
.alert a { color: inherit; text-decoration: underline; }

/* Boş durum: kısa ve yönlendirici */
.empty-state { padding: var(--space-6) var(--space-5); text-align: center; }
.empty-state__title { font-weight: 600; margin-bottom: var(--space-1); }
.empty-state__text { color: var(--color-text-2); margin-bottom: var(--space-4); }
.empty { color: var(--color-text-2); margin: 0; }

/* Giriş / hata sayfaları */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
.auth__card {
    width: 100%; max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: var(--space-6);
}
.auth__brand { display: block; margin-bottom: var(--space-3); }
.auth__logo { display: block; height: 56px; width: auto; }
.auth__lead { color: var(--color-text-2); margin-bottom: var(--space-5); }

/* QR ile giriş (akıllı tahta). QR ana seçenektir; "Bu cihazda giriş yap" katlanır ve geri plandadır.
   Kart kompakt tutulur: QR 240px (uzaktan okunur, ekranı kaplamaz), üst alan ve boşluklar sıkı. */
.auth__card--board { max-width: 460px; padding: var(--space-5) var(--space-6) var(--space-6); }
.auth__card--board .auth__brand { margin-bottom: var(--space-2); }
.auth__card--board .auth__logo { height: 44px; margin: 0 auto; }
.auth__card--board .auth__lead { margin-bottom: var(--space-4); text-align: center; }
.auth__card--board .alert { margin-bottom: var(--space-4); }
.board-qr {
    text-align: center; padding: var(--space-4);
    background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.board-qr__title {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600;
}
.board-qr__title .icon { width: 22px; height: 22px; color: var(--color-accent); }
.board-qr__hint { max-width: 34ch; margin: 0 auto var(--space-4); color: var(--color-text-2); font-size: var(--text-sm); line-height: 1.5; }
/* QR ayrı bir kart değil, panelin içeriğidir: çerçeve/gölge yok. SVG'nin kendi sessiz bölgesi (2 modül) beyaz kalır. */
.board-qr__code { width: min(100%, 228px); aspect-ratio: 1 / 1; margin: 0 auto; transition: opacity var(--ease); }
.board-qr__code svg { display: block; width: 100%; height: 100%; background: #fff; border-radius: 4px; shape-rendering: crispEdges; }
.board-qr__code path { fill: var(--color-text); }
.board-qr.is-renewing .board-qr__code { opacity: 0.35; }
.board-qr__status { margin: var(--space-3) 0 0; color: var(--color-text-3); font-size: var(--text-sm); line-height: 1.25; }
.board-qr__status:empty { display: none; }

.auth__divider {
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-2); color: var(--color-text-3); font-size: var(--text-sm);
}
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.auth__local-toggle {
    display: flex; align-items: center; gap: var(--space-2); min-height: var(--control);
    color: var(--color-text-2); font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--radius-sm);
}
.auth__local-toggle::-webkit-details-marker { display: none; }
/* Odak halkası yalnız klavye odağında; tıklama/ilk açılışta çerçeve görünmez. */
.auth__local-toggle:focus, .auth__local:focus { outline: none; }
.auth__local-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.auth__local-toggle:hover { color: var(--color-text); }
.auth__local-toggle .icon { transition: transform var(--ease); }
.auth__local[open] .auth__local-toggle { margin-bottom: var(--space-3); color: var(--color-text); }
.auth__local[open] .auth__local-toggle .icon { transform: rotate(90deg); }
.auth__alt { text-align: center; margin: var(--space-4) 0 0; }
/* Üyelik ekranları (kayıt, doğrulama, profil tamamlama, şifre): giriş kartıyla aynı dil */
.auth__title { margin: 0 0 var(--space-1); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
/* Kayıt kartı: kompakt, ortalanmış üst blok (küçük logo → başlık → açıklama), sıkı ama nefes alan form ritmi,
   ana aksiyon olarak belirgin düğme ve kartın "altbilgisi" gibi duran giriş bağlantısı. Kart genişliği, alan (44) ve
   düğme (52) yükseklikleri, renk / gölge / köşe sistemi girişle aynıdır. */
.auth__card--register { padding: var(--space-5) var(--space-6) var(--space-5); }
.auth__card--register .auth__brand { margin: 0 0 var(--space-3); text-align: center; }
.auth__card--register .auth__logo { height: 36px; margin: 0 auto; }
.auth__card--register .auth__title { margin: 0 0 var(--space-1); text-align: center; font-size: var(--text-lg); }
.auth__card--register .auth__lead { margin: 0 0 var(--space-5); text-align: center; font-size: var(--text-sm); }
.auth__card--register .alert { margin-bottom: var(--space-4); }
.auth__card--register .form__row { gap: var(--space-3); }
.auth__card--register .field { margin-bottom: 14px; }
.auth__card--register .field label { margin-bottom: 4px; font-size: var(--text-sm); color: var(--color-text-2); }
.auth__card--register .field.has-error label { color: var(--color-danger); }
.auth__card--register .field__help { margin-top: 4px; color: var(--color-text-3); font-size: 0.8125rem; line-height: 1.4; }
.auth__card--register .field__error { margin-top: 4px; font-size: 0.8125rem; }
.auth__card--register .password .input { padding-right: 76px; }
.auth__card--register .password__toggle {
    top: 50%; right: 6px; bottom: auto; transform: translateY(-50%);
    height: 32px; min-width: 0; padding: 0 10px; font-size: 0.8125rem; border-radius: 999px;
}
.auth__card--register .btn--primary { margin-top: var(--space-4); }
.auth__card--register .auth__alt {
    margin: var(--space-5) calc(-1 * var(--space-6)) 0; padding: var(--space-4) var(--space-6) 0;
    border-top: 1px solid var(--color-border); color: var(--color-text-2); font-size: var(--text-sm);
}
.auth__alt--tight { margin-top: var(--space-3); }
.auth__alt--divided { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.link--button {
    display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-1);
    font: inherit; font-weight: 500; color: var(--color-accent); background: none; border: 0; cursor: pointer;
}
.link--button:hover { text-decoration: underline; }
/* Ayarlar › Hesap: e-posta doğrulama durumu ve kompakt, kalıcı, engellemeyen not (uyarı tonunda ama sakin) */
.kv__email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.verify-note {
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm); background: var(--color-surface-muted);
}
.verify-note__text { margin: 0 0 var(--space-3); color: var(--color-text-2); font-size: var(--text-sm); line-height: 1.5; max-width: 60ch; }
.verify-note .settings-action { margin: 0; }

/* Açık tahta oturumu: küçük, sessiz "Ders bitişi 10:40" göstergesi (üst bar ve Sınıf Modu) */
.board-end {
    display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
    font-size: 0.8125rem; color: var(--color-text-3); font-variant-numeric: tabular-nums;
}
.board-end .icon { width: 14px; height: 14px; color: inherit; }
/* Üst bar: kullanıcı | chip | çıkış — chip nötr, hafif yüzeyli; çıkışla birlikte ince bir ayraçla gruplanır. */
.board-end--topbar {
    min-height: 26px; padding: 0 9px 0 8px; margin: 0 var(--space-1) 0 var(--space-2);
    border-radius: 999px; background: var(--shell-tint); color: var(--shell-ink-3);
}
.board-end--present { font-size: var(--text-sm); }

/* Telefon: "Akıllı tahtada devam et" onayı ve sonuç sayfaları */
.board-confirm { text-align: center; margin: var(--space-3) 0 var(--space-5); }
.board-confirm__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    margin-bottom: var(--space-4); border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent);
}
.board-confirm__icon .icon { width: 28px; height: 28px; }
.board-confirm--done .board-confirm__icon { background: var(--color-success-soft); color: var(--color-success); }
.board-confirm--invalid .board-confirm__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.board-confirm__title { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.board-confirm__text { margin: 0; color: var(--color-text-2); line-height: 1.5; }

/* --------------------------------------------------------------------------
   3. FORMS / BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control); padding: 0 var(--space-4);
    font: inherit; font-weight: 500; line-height: 1.2;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; white-space: nowrap; touch-action: manipulation;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-bg); }
.btn--soft { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.btn--soft:hover { background: #dde9fb; color: var(--color-accent-hover); }
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent-soft); }
.btn--danger-ghost { background: transparent; color: var(--color-danger); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); }
.btn--block { width: 100%; }
.btn--lg { min-height: var(--control-lg); font-size: var(--text-md); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.inline-form { margin: 0; display: inline; }

.link { color: var(--color-accent); font-weight: 500; }

.form { max-width: var(--form-max); }
.form--full { max-width: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { margin-bottom: var(--space-4); }
.field label, .field__label { display: block; font-weight: 500; margin-bottom: var(--space-2); }
.input {
    display: block; width: 100%;
    min-height: var(--control);
    padding: var(--space-2) var(--space-3);
    font: inherit; color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); outline: none; }
.input:disabled { background: var(--color-surface-muted); color: var(--color-text-2); }
select.input { appearance: auto; }
textarea.input { resize: vertical; min-height: 96px; line-height: var(--leading); }
.field.has-error .input { border-color: var(--color-danger); }
.field__error { margin: var(--space-2) 0 0; color: var(--color-danger); font-size: var(--text-sm); display: flex; gap: var(--space-1); align-items: center; }
.field__help { margin: var(--space-2) 0 0; color: var(--color-text-2); font-size: var(--text-sm); }
.form__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }

/* Şifre alanı içindeki göster/gizle */
.password { position: relative; }
.password .input { padding-right: 88px; }
.password__toggle {
    position: absolute; top: 3px; right: 3px; bottom: 3px; min-width: 76px;
    padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 500;
    color: var(--color-accent); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.password__toggle:hover { background: var(--color-accent-soft); }

/* Fieldset ve büyük onay kutuları */
.fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.fieldset legend { font-weight: 500; padding: 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-2); }
.fieldset:disabled { opacity: 0.7; }
.fieldset--secondary { border-style: dashed; }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: 0 var(--space-1); cursor: pointer; }
.check input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.check--strong { font-weight: 500; }

/* Yönetim formları (Ders, Sınıf): başlık + kısa açıklama, mantıksal alan grupları, net alt eylemler */
.form-page { display: flex; flex-direction: column; gap: var(--space-5); }
.form-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.form-section__head { padding: var(--space-4) var(--space-5) 0; }
.form-section__title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.form-section__lead { margin: var(--space-1) 0 0; color: var(--color-text-2); font-size: var(--text-sm); max-width: var(--measure); }
.form-section__title--spaced { margin-bottom: var(--space-3); }
.form-section__body { padding: var(--space-4) var(--space-5) var(--space-2); }
.form-section__body .field:last-child { margin-bottom: var(--space-3); }
.form-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.form-footer__hint { margin: 0 0 0 auto; color: var(--color-text-3); font-size: var(--text-sm); }
.form-page .form { max-width: none; }
.form-page .input { max-width: var(--form-max); }
.form-page .form__row { max-width: var(--form-max); }
.page__lead--measure { max-width: var(--measure); }

/* Ayarlar: Profil | Akıllı Tahta | Hesap. Diğer ekranlarla aynı iskelet: .page + .page__head + .panel (sol hiza ve başlık
   ritmi Ders Programı ile aynı); kartlar form ekranı olduğundan sola yaslı 1000px'i aşmaz (tablo genişliği gerekmez).
   Sekmeler düz metin; ayırıcı yalnız sekme grubu kadar, etkin sekmenin altında kısa, ince çizgi (.nav__link inset-shadow). */
.settings-stack { max-width: 1000px; }
/* overflow-y hidden: yatay kaydırma yalnız sekmeler sığmazsa (dar ekran); dikeyde kaydırma çubuğu artığı oluşmaz */
.tabs { display: flex; width: max-content; max-width: 100%; gap: var(--space-5); margin: calc(-1 * var(--space-2)) 0 var(--space-5); border-bottom: 1px solid var(--color-border); overflow-x: auto; overflow-y: hidden; }
.tabs__link {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px;
    color: var(--color-text-2); font-weight: 500; white-space: nowrap;
    transition: color var(--ease), box-shadow var(--ease);
}
.tabs__link:hover { color: var(--color-text); text-decoration: none; }
.tabs__link.is-active { color: var(--color-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); }
.tabs__link:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }

/* Kart: .panel yüzeyi, ders programındaki .slotset ile aynı iç boşluk ve başlık ölçüsü */
.settings-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-card { padding: var(--space-4) var(--space-5) var(--space-5); }
.settings-card__head { margin-bottom: var(--space-3); }
.settings-card__title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.settings-card__lead { margin: var(--space-1) 0 0; color: var(--color-text-2); font-size: var(--text-sm); max-width: 60ch; }
.settings-card .field { margin-bottom: var(--space-3); }
.settings-card .field label { margin-bottom: 6px; }
.settings-card .input { min-height: 40px; } /* ders programı form yoğunluğu; dokunmatikte 44'e döner (bkz. responsive) */
.settings-card .field:last-child, .settings-card .form__row:last-child .field { margin-bottom: 0; }
.settings-card .input, .settings-card .form__row { max-width: none; }
.settings-card .form__row { gap: var(--space-4); }
.settings-form .form__actions { margin-top: var(--space-5); }
.settings-card .settings-form { max-width: var(--form-max); } /* kart içi kısa form (şifre): alanlar 640px'i aşmaz */
.settings-card .settings-form .form__actions { margin-top: var(--space-4); }
.settings-card__empty { margin: 0; color: var(--color-text-3); font-size: var(--text-sm); }

/* Kişisel bilgiler: solda küçük fotoğraf kolonu, sağda alanlar */
.profile-grid { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.profile-grid__fields { min-width: 0; }
.avatar-pick { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-top: 2px; text-align: center; }
.avatar-pick .meta { font-size: 0.75rem; line-height: 1.35; white-space: nowrap; }
.avatar-pick__circle {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--color-accent-soft); color: var(--color-accent);
    font-size: 1.625rem; font-weight: 600; letter-spacing: 0.02em;
}
.avatar-pick__circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-pick__btn { margin-top: 2px; min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-sm); cursor: pointer; }
.avatar-pick__btn .icon { width: 16px; height: 16px; }
.avatar-pick__input:focus-visible + .avatar-pick__btn { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.avatar-pick__remove { min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-sm); }
.avatar-pick .field__error { justify-content: center; }

/* Bilgi listesi: etiket · değer (Akıllı Tahta, Hesap) */
.kv { display: grid; gap: 0; margin: 0; }
.kv__item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.kv__item:first-child { padding-top: 0; }
.kv__item:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { margin: 0; color: var(--color-text-2); font-size: var(--text-sm); font-weight: 500; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.settings-action { margin: var(--space-4) 0 0; }
.kv + .hint { margin-top: var(--space-3); }
.kv-list { margin: 0; padding: 0; list-style: none; }
.kv-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.kv-list__item:first-child { padding-top: 0; }
.kv-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list__main { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.kv-list__meta { color: var(--color-text-3); font-variant-numeric: tabular-nums; }
.kv-list__state { margin-left: auto; color: var(--color-text-3); font-weight: 500; }
.kv-list__state.is-open { color: var(--color-success); }


/* --------------------------------------------------------------------------
   4. TABLES / LISTS
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.table th { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-2); background: var(--color-surface-muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions .btn, .table__actions .inline-form { vertical-align: middle; }
.table__actions .btn + .inline-form, .table__actions .inline-form + .btn { margin-left: var(--space-1); }
.is-passive td, .is-passive .list__main, .is-passive .row__main { color: var(--color-text-2); }

.list { }
.list__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.list__item:last-child { border-bottom: 0; }
.list__main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.list__actions { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.list__sub { width: 100%; padding: 0 0 var(--space-2) var(--space-5); }
.list__sub .list__item { padding-left: 0; padding-right: 0; border-bottom-style: dashed; }
.list__sub .list__item:last-child { border-bottom: 0; }

/* Panel: kalınan yer bilgi hiyerarşisi (şube → hafta · ders → plan başlığı → x / N ders) */
.place { flex-direction: column; align-items: flex-start; gap: 2px; }
.place__class { margin-bottom: var(--space-1); }
.place__where { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.place__session { color: var(--color-text-2); }
.place__count { font-size: var(--text-sm); color: var(--color-text-2); }

/* Durum göstergesi: metin + ikon; renk yalnızca destekleyicidir */
.status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-2); white-space: nowrap; }
.status .icon { width: 18px; height: 18px; }
.status--completed { color: var(--color-success); }
.status--in_progress { color: var(--color-accent); }
.status--planned { color: var(--color-text-2); }
.status--makeup_needed { color: var(--color-warning); }
.status--skipped { color: var(--color-text-3); }
.status--passive { color: var(--color-text-3); }
.status--warn { color: var(--color-warning); }

/* Yönetim listeleri (Dersler, Sınıflar, bağlı sınıflar): sıkı ama rahat satırlar — tablo/kart yığını değil.
   Sol şerit ders kimliğini taşır (ders ekranındaki hero ile aynı renk), başlık bağlantısı ana yola götürür,
   eylemler sağda (ana: "… aç", ikincil: Düzenle, üçüncül: durum). Dar ekranda eylemler alta iner. */
.rows { margin: 0; padding: 0; list-style: none; }
.rows__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border); border-left: 4px solid var(--identity, transparent);
}
.rows__item:last-child { border-bottom: 0; }
.rows__item:first-child { border-top-left-radius: var(--radius); }
.rows__item:last-child { border-bottom-left-radius: var(--radius); }
.rows__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 320px; }
.rows__title { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rows__title a { color: var(--color-text); }
.rows__title a:hover { color: var(--color-accent); text-decoration: none; }
.rows__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); margin: 0; color: var(--color-text-2); font-size: var(--text-sm); }
.rows__meta > span + span::before { content: "·"; margin-right: var(--space-2); color: var(--color-text-3); }
.rows__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.rows__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control); padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }
.rows__link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.rows__link .icon { width: 16px; height: 16px; }
.rows__link-where { color: var(--color-text-2); font-weight: 400; }
.rows__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.rows__actions .btn { min-width: 0; }
.rows__note { color: var(--color-text-3); font-size: var(--text-sm); }
.rows__item.is-passive { --identity: var(--color-border-strong); background: var(--color-surface-muted); }
.rows__item.is-passive .rows__title a { color: var(--color-text-2); }
.panel--rows { overflow: hidden; }
.panel__body--top-border { border-top: 1px solid var(--color-border); }
/* Dar yan panelde (ders düzenleme: bağlı sınıflar) satırlar sıkı, eylemler kendi satırında */
.split__aside .rows__item { padding: var(--space-3) var(--space-4); border-left-width: 0; }
.split__aside .rows__main { flex-basis: 100%; }
.split__aside .rows__actions { margin-left: 0; }
.split__aside .panel__head { align-items: flex-start; }

/* Boş durum: sıcak, kısa, tek yönlendirici düğme (illüstrasyon/emoji yok) */
.empty-state--warm { padding: var(--space-7) var(--space-5); }
.empty-state--warm .empty-state__title { font-size: var(--text-xl); letter-spacing: -0.01em; }
.empty-state--warm .empty-state__text { max-width: 44ch; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   5. LESSON / PROGRESS
   -------------------------------------------------------------------------- */
.plan-row__seq { font-size: var(--text-sm); color: var(--color-text-2); min-width: 92px; }
.plan-row__title { font-weight: 500; }
.plan-row__meta { color: var(--color-text-3); font-size: var(--text-sm); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.prose { max-width: var(--measure); line-height: 1.65; }
.prose--lead { font-size: var(--text-md); }

.progress-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress-summary__item { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--color-border); min-width: 0; }
.progress-summary__item:last-child { border-right: 0; }
.progress-summary__item--current { background: var(--color-accent-soft); }
.progress-summary__label { display: block; font-size: var(--text-sm); color: var(--color-text-2); margin-bottom: var(--space-1); }
.progress-summary__value { font-weight: 600; font-size: var(--text-md); overflow-wrap: anywhere; }
.progress-summary__action { margin-top: var(--space-3); }
.progress-summary__session { display: block; margin-top: var(--space-1); color: var(--color-text); font-weight: 500; }
.progress-summary__count { display: block; margin-top: 2px; color: var(--color-text-2); font-size: var(--text-sm); }
.plan-row__sessions { white-space: normal; }
.is-current { background: var(--color-accent-soft); }
.current-marker { color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }


/* --------------------------------------------------------------------------
   5b. DERS ANLATIM EKRANI (.page--lesson) — sıcak zemin ve büyük tipografi yalnızca bu sayfada
   -------------------------------------------------------------------------- */
.page--lesson {
    --color-bg: #f6f4f0;          /* sıcak nötr zemin */
    --color-border: #e6e2dc;      /* zeminle aynı sıcaklıkta sınır */
    --color-text-2: #5c5852;      /* sıcak ikincil gri (~7:1) */
    --identity: var(--color-accent);
    --identity-tint: var(--color-accent-soft);
    --lesson-max: 1240px;         /* ders ekranı içerik genişliği */
    --lesson-text: 1.0625rem;     /* 17px: ders sırasında okunacak metin */
    max-width: none;
    padding: 0;
    background: var(--color-bg);
    min-height: calc(100vh - 64px);
    font-size: var(--lesson-text);
}
.page--lesson > .alert { max-width: var(--lesson-max); margin: var(--space-5) auto 0; }
.lesson { max-width: var(--lesson-max); margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); }

/* Ders kimlik renkleri: deterministik, yalnızca dekoratif (eyebrow, ince şerit, açık ton) */
.identity-1 { --identity: #2f7a5e; --identity-tint: #eef5f1; } /* adaçayı */
.identity-2 { --identity: #b8552f; --identity-tint: #faf0ea; } /* terakota */
.identity-3 { --identity: #1f6f9f; --identity-tint: #eaf2f8; } /* okyanus */
.identity-4 { --identity: #6e4b9e; --identity-tint: #f2eef8; } /* erik */
.identity-5 { --identity: #9a6b00; --identity-tint: #f8f3e6; } /* hardal */
.identity-6 { --identity: #4d5b7a; --identity-tint: #eef0f4; } /* arduvaz */

.lesson__back { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.lesson__back a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control); }

/* Üst alan: eyebrow → güçlü başlık → ikincil bilgi → iki büyük aşama */
.lesson-hero {
    background: var(--identity-tint);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--identity);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7) var(--space-6);
    margin-bottom: var(--space-6);
}
.lesson-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.lesson-hero__eyebrow { margin: 0; color: var(--identity); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.01em; }
.lesson-hero__present { flex: none; }
.lesson-hero__title { font-size: 2.5rem; line-height: 1.15; margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.lesson-hero__meta { color: var(--color-text-2); font-size: var(--text-md); margin: 0 0 var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.lesson-hero__status { display: inline-flex; }

/* Akış göstergesi: iki büyük aşama; sayaç/yüzde/animasyon yok; bölüme kaydırır */
.flow { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; }
.flow__stage {
    flex: 1 1 300px; min-width: 0;
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 84px; padding: var(--space-3) var(--space-5);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); text-decoration: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.flow__stage:hover { text-decoration: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-1); }
.flow__stage--warm { background: var(--surface-warm); }
.flow__stage--cool { background: var(--surface-cool); }
.flow__stage--sage { background: var(--surface-sage); }
.flow__stage--neutral { background: var(--surface-neutral); }
.flow__stage--amber { background: var(--surface-amber); }
.flow__num {
    display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
    border-radius: 50%; font-size: var(--text-lg); font-weight: 700; color: #fff;
}
.flow__stage--warm .flow__num { background: var(--tone-warm); }
.flow__stage--cool .flow__num { background: var(--tone-cool); }
.flow__stage--sage .flow__num { background: var(--tone-sage); }
.flow__stage--neutral .flow__num { background: var(--tone-neutral); }
.flow__stage--amber .flow__num { background: var(--tone-amber); }
.flow__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.flow__label { font-weight: 700; font-size: var(--text-xl); line-height: 1.2; }
.flow__minutes { color: var(--color-text-2); font-weight: 500; }
.flow__sub { font-weight: 400; }
.flow__state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-2); white-space: nowrap; }
.flow__state.is-done { color: var(--color-success); }
.flow__link { width: 36px; height: 2px; align-self: center; background: var(--color-border-strong); flex: none; border-radius: 1px; }

/* İçerik yüzeyleri */
.lesson__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); }
.lesson__content > * + * { margin-top: var(--space-5); }
.lesson__aside > * + * { margin-top: var(--space-5); }
.lesson-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.lesson-card__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); }
.lesson-card__label { font-size: var(--text-base); font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-2); }
.lesson-card__summary { margin: var(--space-4) 0 0; color: var(--color-text-2); font-size: var(--text-md); }
.lesson-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.lesson-card--objective { border-left: 5px solid var(--identity); padding: var(--space-7) var(--space-7); }
.lesson-card--objective .lesson-card__title { color: var(--identity); font-size: var(--text-base); text-transform: none; letter-spacing: 0.01em; }
.lesson-card--objective .prose--lead { font-size: 1.5rem; line-height: 1.5; font-weight: 500; max-width: none; }
.lesson-card--secondary { background: var(--color-surface-muted); }
.lesson__outcomes { align-items: stretch; gap: var(--space-5); }
.lesson__outcomes .lesson-card { padding: var(--space-6); }
.lines { margin: 0; padding: 0; list-style: none; }
.lines li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-4); line-height: 1.6; }
.lines li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-3); }

/* Sınıf / Laboratuvar bölümleri: tek yüzey, ritmik adımlar */
.lesson-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    scroll-margin-top: var(--space-5);
}
.lesson-section--warm { background: var(--surface-warm); border-left: 5px solid var(--tone-warm); }
.lesson-section--cool { background: var(--surface-cool); border-left: 5px solid var(--tone-cool); }
.lesson-section--sage { background: var(--surface-sage); border-left: 5px solid var(--tone-sage); }
.lesson-section--neutral { background: var(--surface-neutral); border-left: 5px solid var(--tone-neutral); }
.lesson-section--amber { background: var(--surface-amber); border-left: 5px solid var(--tone-amber); }
.lesson-section__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-6) 0; }
.lesson-section__heading { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lesson-section__title { font-size: 1.75rem; font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.lesson-section--warm .lesson-section__title { color: var(--tone-warm); }
.lesson-section--cool .lesson-section__title { color: var(--tone-cool); }
.lesson-section--sage .lesson-section__title { color: var(--tone-sage); }
.lesson-section--neutral .lesson-section__title { color: var(--tone-neutral); }
.lesson-section--amber .lesson-section__title { color: var(--tone-amber); }
.lesson-section__minutes { color: var(--color-text-2); font-weight: 500; }
.lesson-section__tag { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; }
.lesson-section__done { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-success); font-size: var(--text-sm); font-weight: 600; }
.lesson-section__body { padding: var(--space-4) var(--space-6) var(--space-6); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps__item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid rgba(29, 29, 31, 0.08); }
.steps__item:first-child { border-top: 0; padding-top: 0; }
.steps__item:last-child { padding-bottom: 0; }
.steps__num {
    display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--color-surface); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-top: 2px;
    box-shadow: var(--shadow-1);
}
.lesson-section--warm .steps__num { color: var(--tone-warm); }
.lesson-section--cool .steps__num { color: var(--tone-cool); }
.lesson-section--sage .steps__num { color: var(--tone-sage); }
.lesson-section--neutral .steps__num { color: var(--tone-neutral); }
.lesson-section--amber .steps__num { color: var(--tone-amber); }

/* Adım türü etiketi (küçük, ikincil) ve öğretmene özel işareti */
.steps__type { font-size: var(--text-sm); color: var(--color-text-3); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 10px; }
.steps__private { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-text-3); }
.steps__items { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.steps__items li { position: relative; padding: 2px 0 2px var(--space-4); line-height: 1.5; }
.steps__items li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-3); }
.steps__note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-2); border-left: 2px solid var(--color-border-strong); padding-left: var(--space-2); }
.steps__note-label { font-weight: 600; color: var(--color-text-3); }
/* Defter notu: öğrencinin defterine geçireceği metin — beyaz "kâğıt" satırı, biraz daha büyük gövde */
.steps__item--note .steps__body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.steps__desc--note { color: var(--color-text); font-size: var(--text-md); font-weight: 500; }
.steps__body { min-width: 0; flex: 1; }
.steps__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.steps__title { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.steps__duration { color: var(--color-text-2); font-weight: 500; }
.steps__desc { margin: var(--space-1) 0 0; color: var(--color-text-2); line-height: 1.6; max-width: var(--measure); }
.steps__item--plain { padding-left: 56px; }

/* Oturum başlığında tamamlama kontrolü (yapısal planlar): sakin, 52 px, oturum tonunda */
.session-done {
    display: inline-flex; align-items: center; gap: var(--space-3);
    min-height: 52px; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
    cursor: pointer; font-weight: 500; transition: border-color var(--ease), background var(--ease);
}
.session-done:hover { border-color: var(--color-text-3); }
.session-done input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: var(--color-success); cursor: pointer; }
.session-done.is-done { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.session-done__text { display: flex; flex-direction: column; line-height: 1.2; }
.session-done__date { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-2); }
.lesson-section__head .session-done { margin-left: auto; }
.lesson-section__head .session-done + .lesson-section__done, .lesson-section__head .lesson-section__tag + .lesson-section__done { margin-left: 0; }

/* Sağ panel: yapısal planlarda salt özet */
.week-summary { margin-bottom: var(--space-4); }
.week-summary__count { margin: 0; font-size: var(--text-lg); }
.week-summary__count strong { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
.week-summary__state { margin: var(--space-1) 0 var(--space-3); color: var(--color-text-2); }
.week-summary__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.week-summary__item { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-base); }
.week-summary__status { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-3); white-space: nowrap; }
.week-summary__item.is-done .week-summary__status { color: var(--color-success); }

/* İlerleme: ders sırasında kullanılacak sade kontrol alanı */
.lesson-progress { padding: var(--space-5); }
.lesson-progress .lesson-card__title { font-size: var(--text-lg); }
.lesson-progress .form { margin-top: var(--space-3); }
.fieldset--bare { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.check--warm, .check--cool {
    min-height: 64px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    margin-bottom: var(--space-2); border-radius: var(--radius); border: 1px solid var(--color-border);
    font-size: var(--text-md);
}
.check--warm { border-left: 4px solid var(--tone-warm); background: var(--surface-warm); }
.check--cool { border-left: 4px solid var(--tone-cool); background: var(--surface-cool); }
.check--warm input, .check--cool input { width: 26px; height: 26px; }
.disclosure { margin-top: var(--space-3); border-top: 1px solid var(--color-border); }
.disclosure__summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
    min-height: var(--control); font-size: var(--text-base); font-weight: 500; color: var(--color-text-2);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::after { content: "+"; font-size: 1.2rem; color: var(--color-text-3); }
.disclosure[open] .disclosure__summary::after { content: "–"; }
.disclosure__body { padding-bottom: var(--space-2); font-size: var(--text-base); }
.disclosure--secondary .fieldset { margin: 0 0 var(--space-2); }

/* Bu ders hakkında: sessiz, çerçevesiz bilgi listesi */
.lesson-facts { padding: 0 var(--space-3); }
.lesson-facts__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-3); margin-bottom: var(--space-2); }
.facts { margin: 0; font-size: var(--text-base); }
.facts > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--color-text-3); font-size: var(--text-sm); }
.facts dd { margin: 0; font-weight: 500; text-align: right; color: var(--color-text-2); }

/* --------------------------------------------------------------------------
   5c. SINIF MODU (.present) — akıllı tahta sunum sahnesi: az UI, büyük metin, karakterli boşluk
   -------------------------------------------------------------------------- */
.present {
    --color-bg: #f6f4f0;
    --color-border: #e6e2dc;
    --surface-warm: #fbf6ec;
    --surface-cool: #edf3f8;
    --tone-warm: #a4631a;
    --tone-cool: #1f6f9f;
    --identity: var(--color-accent);
    --identity-tint: var(--color-accent-soft);
    --stage-max: 1150px;          /* okunur içerik genişliği */
    --tone: var(--identity);      /* aktif bölüm rengi (JS bölümü değiştirince güncellenir) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
}
.present {
    --surface-sage: #eef5f0; --tone-sage: #2f7a5e;
    --surface-neutral: #f3f1ed; --tone-neutral: #5c5852;
    --surface-amber: #faf3e6; --tone-amber: #8a5300;
}
/* Aktif slaytın oturum tonu (JS: data-active-tone) — tam sayfa açık ton, doygun blok yok */
.present[data-active-tone="warm"] { background: var(--surface-warm); --tone: var(--tone-warm); }
.present[data-active-tone="cool"] { background: var(--surface-cool); --tone: var(--tone-cool); }
.present[data-active-tone="sage"] { background: var(--surface-sage); --tone: var(--tone-sage); }
.present[data-active-tone="neutral"] { background: var(--surface-neutral); --tone: var(--tone-neutral); }
.present[data-active-tone="amber"] { background: var(--surface-amber); --tone: var(--tone-amber); }

/* Üst çubuk: sessiz; iki aşamalı akış kontrolü ortada, öğretmen çıkışı sağda */
.present__bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.present__eyebrow { margin: 0; font-weight: 600; color: var(--identity); font-size: var(--text-md); white-space: nowrap; }
.present__sections { display: flex; align-items: center; gap: var(--space-2); justify-self: center; }
.present__section {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 52px; padding: 0 var(--space-5) 0 var(--space-2);
    font: inherit; font-size: var(--text-md); font-weight: 500; color: var(--color-text-2);
    background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.present__section-num {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid var(--color-border-strong); color: var(--color-text-3);
    font-size: var(--text-base); font-weight: 700;
}
.present__section:hover { background: rgba(29, 29, 31, 0.04); }
.present__section[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-1); }
.present__section--warm[aria-pressed="true"] .present__section-num { background: var(--tone-warm); border-color: var(--tone-warm); color: #fff; }
.present__section--cool[aria-pressed="true"] .present__section-num { background: var(--tone-cool); border-color: var(--tone-cool); color: #fff; }
.present__section--sage[aria-pressed="true"] .present__section-num { background: var(--tone-sage); border-color: var(--tone-sage); color: #fff; }
.present__section--neutral[aria-pressed="true"] .present__section-num { background: var(--tone-neutral); border-color: var(--tone-neutral); color: #fff; }
.present__section--amber[aria-pressed="true"] .present__section-num { background: var(--tone-amber); border-color: var(--tone-amber); color: #fff; }
.present__sections { flex-wrap: wrap; justify-content: center; }
.present__sections-link { width: 16px; height: 2px; background: var(--color-border-strong); flex: none; }
.present__tools { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-4); }
.present__exit { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control); font-size: var(--text-sm); color: var(--color-text-3); white-space: nowrap; }
.present__exit:hover { color: var(--color-text); }

/* Sahne: içerik optik merkezde; solda güçlü hizalama, ince ton şeridi */
.present__stage {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    width: 100%; max-width: var(--stage-max); margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-5);
}
.present:not(.is-js) .present__stage { justify-content: flex-start; gap: var(--space-8); }
.slide { position: relative; padding-left: var(--space-6); border-left: 4px solid var(--tone); }
.slide--intro { border-left-color: var(--identity); }
.slide--outro { border-left-color: var(--color-success); }
.slide__eyebrow { margin: 0 0 var(--space-4); font-size: 1.625rem; font-weight: 600; color: var(--identity); }
.slide__hero { margin: 0; font-size: 5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; }
.slide__intro { margin: var(--space-6) 0 0; font-size: 2rem; line-height: 1.4; color: var(--color-text-2); max-width: 28ch; }
.slide__heading { margin: 0 0 var(--space-6); font-size: 3.5rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
.slide__list { margin: 0; padding: 0; list-style: none; }
.slide__list li { position: relative; padding: var(--space-3) 0 var(--space-3) 52px; font-size: 2.125rem; line-height: 1.35; }
.slide__list li::before { content: ""; position: absolute; left: 14px; top: 1.05em; width: 14px; height: 14px; border-radius: 50%; background: var(--identity); }
.slide--outro .slide__list li::before { background: var(--color-success); }
.slide__counter { margin: 0 0 var(--space-4); font-size: 1.375rem; font-weight: 600; color: var(--color-text-3); letter-spacing: 0.01em; }
.slide__counter-section { color: var(--tone); }
.slide--intro .slide__counter-section { color: var(--identity); }
.slide__title { margin: 0; font-size: 4.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; }
.slide__duration { margin: var(--space-4) 0 0; font-size: 1.625rem; font-weight: 500; color: var(--color-text-3); }
.slide__text { margin: var(--space-6) 0 0; font-size: 2.25rem; line-height: 1.45; color: var(--color-text); max-width: 34ch; }
.slide--divider .slide__hero { font-size: 4.25rem; }
.slide__meta { margin: var(--space-5) 0 0; font-size: 1.375rem; color: var(--color-text-3); }
.slide--sage .slide__eyebrow { color: var(--tone-sage); }
.slide--amber .slide__eyebrow { color: var(--tone-amber); }

/* Tür eyebrow'u: "Birlikte düşünelim", "Görev", "Örnek", "Kısa kontrol" */
.slide__kicker { margin: 0 0 var(--space-3); font-size: 1.5rem; font-weight: 600; color: var(--tone); }

/* Soru / tartışma: soru metni büyük */
.slide__question { margin: var(--space-6) 0 0; font-size: 2.75rem; line-height: 1.3; font-weight: 500; max-width: 26ch; }

/* Mini etkinlik / uygulama: numaralı görev adımları */
/* Genişlik listenin kendi (2rem) yazı boyutuyla hesaplanır; miras alınan 1rem tabanla 44ch ≈ 470px olup maddeleri erken kırıyordu. */
.slide__tasks { margin: var(--space-6) 0 0; padding: 0; list-style: none; font-size: 2rem; max-width: 40ch; }
.slide__tasks li { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; font-size: inherit; line-height: 1.35; border-top: 1px solid rgba(29, 29, 31, 0.08); }
.slide__tasks li:first-child { border-top: 0; padding-top: 0; }
.slide__task-num { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--tone); color: var(--tone); font-size: 1.375rem; font-weight: 700; margin-top: 2px; }
.slide__list--compact li { font-size: 2rem; }

/* Defter notu: öğrencinin defterindeki düzen — küçük "Deftere yaz" kicker'ı, konu BAŞLIĞI, altında aynen yazılacak
   1–2 cümle ve maddeler. Meta yönerge yok; gövde ve maddeler tam metindir (kırpma/özet yok). */
.slide--defter-notu { padding-left: 0; border-left: 0; }
.slide__kicker--note { display: inline-block; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone); border: 2px solid var(--tone); border-radius: 999px; padding: 6px 18px; margin-bottom: var(--space-4); }
.slide__note-title { margin: 0; font-size: 3.25rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; max-width: 24ch; }
.slide__note-body { margin: var(--space-4) 0 0; font-size: 2.25rem; line-height: 1.35; font-weight: 500; max-width: 34ch; }
.slide__note-items { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.slide__note-items li { position: relative; padding: var(--space-2) 0 var(--space-2) 56px; font-size: 2.125rem; line-height: 1.3; font-weight: 500; }
.slide__note-items li::before { content: ""; position: absolute; left: 16px; top: 0.85em; width: 16px; height: 16px; border-radius: 50%; background: var(--tone); }
.slide--defter-notu .slide__duration { margin-top: var(--space-6); }

/* Kontroller: içerik sütunuyla hizalı, alt kenardan ayrık */
.present__controls {
    width: 100%; max-width: var(--stage-max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.present__btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 60px; min-width: 180px; padding: 0 var(--space-5);
    font: inherit; font-size: var(--text-lg); font-weight: 600; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
    cursor: pointer; touch-action: manipulation;
    transition: background var(--ease), border-color var(--ease);
}
.present__btn:hover { border-color: var(--color-text-3); }
.present__btn:disabled { opacity: 0.4; cursor: default; }
.present__btn--next { background: var(--color-accent); border-color: var(--color-accent); color: #fff; justify-content: center; }
.present__btn--next:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.present__btn--next:disabled { background: var(--color-accent); }
.present__dots { display: flex; gap: 12px; }
.present__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-text-3); background: transparent; }
.present__dot.is-active { background: var(--tone); border-color: var(--tone); }

/* Adım slaydında etkinlik başlatma ve "Araç" kutusu */
.slide__activity { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); }
.slide__activity-start {
    display: none; align-items: center; gap: var(--space-3);
    min-height: 72px; padding: 0 var(--space-6);
    font: inherit; font-size: 1.5rem; font-weight: 700; color: #fff;
    background: var(--color-accent); border: 0; border-radius: var(--radius); cursor: pointer; touch-action: manipulation;
    transition: background var(--ease);
}
.present.is-js .slide__activity-start { display: inline-flex; }
.slide__activity-start:hover { background: var(--color-accent-hover); }
.slide__activity-start .icon { width: 28px; height: 28px; }
.slide__activity-label { font-size: 1.375rem; font-weight: 500; color: var(--color-text-2); }
.slide__tools { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); max-width: 760px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.slide__tools-label { margin: 0 0 var(--space-2); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); }
.slide__tools-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.slide__tool { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 1.5rem; }
.slide__tool-title { font-weight: 600; font-size: 1.75rem; }
.slide__tool-host { font-size: 1.75rem; color: var(--color-text-2); font-weight: 500; } /* öğrencinin yazacağı adres: yardımcı metin ölçeği, arka sıradan okunur */
.slide__tool-open {
    margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-lg); padding: 0 var(--space-5);
    font-size: 1.25rem; font-weight: 600; color: var(--color-accent);
    border: 2px solid var(--color-accent); border-radius: var(--radius); white-space: nowrap;
}
.slide__tool-open:hover { background: var(--color-accent-soft); text-decoration: none; }

/* --------------------------------------------------------------------------
   5e. AKILLI TAHTA ETKİNLİKLERİ (.activity) — Sınıf Modu odak katmanı: sunumu örter, ana çubuk DOM'da kalır.
   Büyük tahta tipografisi, sakin yüzeyler; skor/sayaç/oyun hissi yok. Kapalı başlar (hidden), JS açar.
   -------------------------------------------------------------------------- */
.activity { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: auto; background: var(--color-bg); color: var(--color-text); }
.present[data-active-tone="warm"] .activity { background: var(--surface-warm); }
.present[data-active-tone="cool"] .activity { background: var(--surface-cool); }
.present[data-active-tone="sage"] .activity { background: var(--surface-sage); }
.present[data-active-tone="neutral"] .activity { background: var(--surface-neutral); }
.present[data-active-tone="amber"] .activity { background: var(--surface-amber); }
.activity__panel { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--stage-max); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-5); min-height: 100%; }
.activity__head { padding-left: var(--space-5); border-left: 4px solid var(--tone); }
.activity__kicker { margin: 0 0 var(--space-2); font-size: 1.375rem; font-weight: 600; color: var(--tone); }
.activity__title { margin: 0; font-size: 3.25rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; max-width: 22ch; }
.activity__prompt { margin: var(--space-3) 0 0; font-size: 2rem; line-height: 1.4; color: var(--color-text); max-width: 44ch; }
.activity__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) 0; }
.activity__counter { margin: 0 0 var(--space-4); font-size: 1.75rem; font-weight: 600; color: var(--color-text-3); }
.activity__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.activity__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.activity__keys { margin: 0; font-size: var(--text-md); color: var(--color-text-3); }
.activity__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 64px; min-width: 200px; padding: 0 var(--space-6);
    font: inherit; font-size: 1.25rem; font-weight: 600; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
    cursor: pointer; touch-action: manipulation;
    transition: background var(--ease), border-color var(--ease);
}
.activity__btn:hover { border-color: var(--color-text-3); }
.activity__btn:disabled { opacity: 0.4; cursor: default; }
.activity__btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; min-width: 260px; }
.activity__btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.activity__btn--finish { min-width: 0; }

/* Doğru / Yanlış: tek ifade, iki büyük seçenek; cevap yalnızca renkle değil işaret + metinle gösterilir */
.tf__statements { margin: 0; padding: 0; list-style: none; }
.tf__text { margin: 0; font-size: 3.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; max-width: 26ch; }
.tf__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); max-width: 920px; }
.tf__option {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 160px; padding: var(--space-5);
    background: var(--color-surface); border: 3px solid var(--color-border-strong); border-radius: var(--radius-lg);
    transition: opacity var(--ease), border-color var(--ease), background var(--ease);
}
.tf__option-label { font-size: 2.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tf__option--true .tf__option-label { color: var(--color-success); }
.tf__option--false .tf__option-label { color: var(--color-danger); }
.tf__option.is-correct { border-color: var(--color-success); background: var(--color-success-soft); }
.tf__option.is-dim { opacity: 0.6; }
.tf__option-mark { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.375rem; font-weight: 600; color: var(--color-success); }
.tf__option-mark .icon { width: 28px; height: 28px; }
.tf__result { margin: var(--space-4) 0 0; min-height: 1.5em; font-size: 1.5rem; font-weight: 600; color: var(--color-text-2); }

/* Çark Çevir: inline SVG, mat tonlar, işaretçi üstte; seçilen madde yanda büyük */
.wheel { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.wheel__stage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; margin: 0 auto; }
.wheel__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel__disc { transform-box: view-box; transform-origin: 50% 50%; transition: transform 3200ms cubic-bezier(0.2, 0.75, 0.15, 1); will-change: transform; } /* viewBox 0 0 200 200 → merkez (100,100); içerikten bağımsız */
.wheel__disc.is-instant { transition: none; }
.wheel__slice { stroke: var(--color-surface); stroke-width: 1.5; }
.wheel__slice--1 { fill: #f2e2c4; }
.wheel__slice--2 { fill: #d3e3ec; }
.wheel__slice--3 { fill: #d9e9df; }
.wheel__slice--4 { fill: #e9e3d8; }
.wheel__slice.is-selected { stroke: var(--color-text-2); stroke-width: 2; }
.wheel__label { font-family: var(--font-sans); font-size: 9px; font-weight: 600; fill: var(--color-text); pointer-events: none; }
.wheel--numbered .wheel__label { font-size: 13px; font-weight: 700; }
.wheel__hub { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.5; }
.wheel__pointer { fill: var(--color-text); }
.wheel__spin {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 120px; height: 120px; border-radius: 50%;
    font: inherit; font-size: 1.25rem; line-height: 1.15; font-weight: 700; color: var(--color-accent);
    background: var(--color-surface); border: 3px solid var(--color-accent); box-shadow: var(--shadow-2);
    cursor: pointer; touch-action: manipulation; transition: background var(--ease);
}
.wheel__spin:hover { background: var(--color-accent-soft); }
.wheel__spin:disabled { color: var(--color-text-3); border-color: var(--color-border-strong); cursor: default; }
.wheel__side { min-width: 0; }
.wheel__result { margin: 0 0 var(--space-5); min-height: 1.1em; font-size: 4rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.wheel__legend { margin: 0; padding-left: 1.5em; font-size: 1.5rem; line-height: 1.5; color: var(--color-text-2); columns: 2; column-gap: var(--space-6); }
.wheel__legend li { break-inside: avoid; }

/* Ortak: tamamlandı satırı (işaret + metin; yalnız renk değil), sürükleme dokunmatikte kaydırmayı devralmaz */
.activity__done { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--color-success); }
.activity__done .icon { width: 28px; height: 28px; }
.activity__btn--secondary { min-width: 0; }

/* Eşleştirme: üstte kart tepsisi, altta hedefler (yuva + açıklama). Kart seçili/sürüklenirken belirgin; doğru yuva
   kilitlenir (işaret + "Eşleşti"); yanlış bırakma kısa, sakin bir çerçeve uyarısı verir. 7+ çift: iki sütun, sıkı ölçek. */
.match .activity__counter { margin-bottom: var(--space-2); }
.match__tray { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); min-height: 64px; }
.match__card {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 64px; padding: var(--space-2) var(--space-5);
    font: inherit; font-size: 1.5rem; font-weight: 600; color: var(--color-text); text-align: center;
    background: var(--color-surface); border: 3px solid var(--color-border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-1); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    position: relative; transition: transform 180ms ease, border-color var(--ease), box-shadow var(--ease);
}
.match__card:hover { border-color: var(--color-text-3); }
.match__card.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.match__card.is-dragging { z-index: 5; cursor: grabbing; transition: none; pointer-events: none; box-shadow: var(--shadow-2); border-color: var(--color-accent); }
.match__targets { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.match--dense .match__targets { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-2); }
.match__target {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color var(--ease), background var(--ease);
}
.match__target.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.match__target.is-filled { border-color: var(--color-success); background: var(--color-success-soft); }
.match__target.is-miss { border-color: var(--color-warning); background: var(--color-warning-soft); }
.match__target.is-just-filled { animation: match-settle 420ms ease-out; }
@keyframes match-settle { 0% { transform: scale(0.985); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }
.match__slot {
    flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-width: 300px; max-width: 60%; min-height: 64px; padding: var(--space-2) var(--space-3); /* dolu yuva kart adına göre genişler; boşken en küçük genişlikte kalır */
    font: inherit; font-size: 1.25rem; font-weight: 600; color: var(--color-text-3);
    background: var(--color-surface-muted); border: 2px dashed var(--color-border-strong); border-radius: var(--radius);
    cursor: pointer; touch-action: manipulation; transition: border-color var(--ease), background var(--ease);
}
.match__slot:hover { border-color: var(--color-accent); color: var(--color-accent); }
.match__slot:disabled { cursor: default; border-style: solid; border-color: var(--color-success); background: var(--color-surface); color: var(--color-text); }
.match__slot-card { font-size: 1.5rem; color: var(--color-text); overflow-wrap: anywhere; }
.match__slot-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 600; color: var(--color-success); white-space: nowrap; }
.match__slot-mark .icon { width: 22px; height: 22px; }
.match__target-text { flex: 1; min-width: 0; font-size: 1.5rem; line-height: 1.3; overflow-wrap: anywhere; }
/* 5–6 çift: iki sütun, üç satır — tahtada büyük kart ve hedef (boş alan bırakmadan, sığdırmak için küçültmeden) */
.match--wide .match__targets { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-3); }
.match--wide .match__card { min-height: 76px; font-size: 1.625rem; padding: var(--space-2) var(--space-6); }
.match--wide .match__tray { min-height: 76px; gap: var(--space-4); }
.match--wide .match__slot { min-width: 280px; min-height: 80px; font-size: 1.25rem; }
.match--wide .match__slot-card { font-size: 1.625rem; }
.match--wide .match__target { padding: var(--space-2) var(--space-4); }
.match--wide .match__target-text { font-size: 1.625rem; line-height: 1.3; }
/* 7–10 çift: iki sütun, sıkı ölçek */
.match--dense .match__card { min-height: 60px; font-size: 1.375rem; padding: var(--space-1) var(--space-4); }
.match--dense .match__tray { min-height: 60px; }
.match--dense .match__slot { min-width: 260px; min-height: 60px; font-size: 1.25rem; }
.match--dense .match__slot-card { font-size: 1.375rem; }
.match--dense .match__target { padding: var(--space-1) var(--space-3); }
.match--dense .match__target-text { font-size: 1.375rem; line-height: 1.3; }
.match__status { margin: var(--space-3) 0 0; min-height: 1.5em; font-size: 1.25rem; font-weight: 600; color: var(--color-text-2); }
.match__actions, .order__actions { margin-top: var(--space-4); min-height: 64px; }
.match__actions { justify-content: flex-end; }
.match.is-instant .match__card, .match.is-instant .match__target { transition: none; animation: none; }

/* Sıralama: dikey kartlar; numara, metin, kontrol işareti, ↑ ↓ düğmeleri. Taşınan kart kısa vurgu alır; bırakma
   yeri çizgiyle gösterilir. Kontrol sonrası yanlış yer işaret + metinle, doğru sıra açık edilmez. 7+ madde: iki sütun. */
.order__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.order__item {
    position: relative; display: flex; align-items: center; gap: var(--space-4);
    min-height: 64px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius);
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: transform 180ms ease, border-color var(--ease), background var(--ease);
}
.order__item.is-dragging { z-index: 5; cursor: grabbing; transition: none; pointer-events: none; box-shadow: var(--shadow-2); border-color: var(--color-accent); }
.order__item.is-drop-before::before, .order__item.is-drop-after::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); height: 4px; border-radius: 2px; background: var(--color-accent); }
.order__item.is-drop-before::before { top: -6px; }
.order__item.is-drop-after::after { bottom: -6px; }
.order__item.is-moved { animation: order-moved 700ms ease-out; }
@keyframes order-moved { 0% { background: var(--color-accent-soft); border-color: var(--color-accent); } 100% { background: var(--color-surface); border-color: var(--color-border-strong); } }
.order__item.is-wrong { border-color: var(--color-warning); background: var(--color-warning-soft); }
.order__item.is-right { border-color: var(--color-success); }
.order__num { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--color-text-2); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 50%; }
.order__text { flex: 1; min-width: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.order__mark { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.order__mark .icon { width: 22px; height: 22px; }
.order__mark--right { color: var(--color-success); }
.order__mark--wrong { color: var(--color-warning); }
.order__moves { display: inline-flex; gap: var(--space-1); flex: none; }
.order__move {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    cursor: pointer; touch-action: manipulation; transition: background var(--ease), border-color var(--ease);
}
.order__move .icon { width: 26px; height: 26px; }
.order__move:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.order__move:disabled { opacity: 0.35; cursor: default; }
.order--roomy .order__item { min-height: 84px; gap: var(--space-5); padding-left: var(--space-5); }
.order--roomy .order__text { font-size: 1.75rem; }
.order--roomy .order__num { width: 52px; height: 52px; font-size: 1.5rem; }
.order--roomy .order__list { gap: var(--space-3); }
.order--dense .order__item { min-height: 72px; }
.order--dense .order__text { font-size: 1.625rem; }
.order__status { margin: var(--space-3) 0 0; min-height: 1.5em; font-size: 1.25rem; font-weight: 600; color: var(--color-text-2); }
.order__actions { justify-content: flex-end; }
.order.is-instant .order__item { transition: none; animation: none; }

/* --------------------------------------------------------------------------
   5d. DERS AKIŞI EDİTÖRÜ (.editor-*) — ders ekranının oturum yüzeylerini yeniden kullanır; JS'siz, dokunmatik
   -------------------------------------------------------------------------- */
.editor-hint { margin: 0; align-self: center; }
.editor-eyebrow { margin-bottom: var(--space-2); }
.editor-session + .editor-session { margin-top: var(--space-4); }
.editor-session.is-passive { opacity: 0.6; border-left-color: var(--color-border-strong); background: var(--color-surface); }
.editor-session.is-passive .lesson-section__title, .editor-session.is-passive .steps__num { color: var(--color-text-3); }
.editor-actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-left: auto; }
.editor-actions--step { margin: var(--space-2) 0 0; }
.btn--icon { padding: 0; width: var(--control); min-width: var(--control); justify-content: center; }
.btn--icon .icon { width: 22px; height: 22px; }
.icon--up { transform: rotate(90deg); }
.icon--down { transform: rotate(90deg); }
.editor-step.is-passive { opacity: 0.6; }
.editor-step .steps__body > .editor-form { margin-top: var(--space-1); }
.editor-empty { margin: 0 0 var(--space-3); }
.editor-add { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.editor-add--session { margin-top: var(--space-5); }
.editor-new { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(29, 29, 31, 0.08); }
.editor-new__title { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.editor-form { max-width: var(--measure); }
.editor-form__row { grid-template-columns: minmax(0, 1fr) 160px; }
.editor-form .form__actions { margin-top: var(--space-4); }
.editor-form--note { border-left: 3px solid var(--color-border-strong); padding-left: var(--space-4); }
.editor-legacy { border-left: 5px solid var(--tone-amber); }
.editor-legacy__title { font-weight: 600; font-size: var(--text-md); margin: 0 0 var(--space-1); }
.editor-legacy__preview { margin: var(--space-3) 0 var(--space-4); }
.editor-legacy .btn[disabled] { pointer-events: none; }

/* Etkinlik Kütüphanesi ve adım etkinlik rozetleri (editör) + öğretmen ders ekranı araç/alternatif satırları */
.editor-library { margin-top: var(--space-6); }
.editor-library__title { margin: 0; }
.editor-library__lead { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.editor-library__add { margin-top: 0; }
.editor-library__list .list__item { flex-wrap: wrap; }
.editor-new--library { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: var(--space-5); }
.editor-activity-form__intro { margin: 0 0 var(--space-4); }
.editor-tf { margin: 0 0 var(--space-4); }
.editor-tf legend { font-weight: 500; padding: 0; margin-bottom: var(--space-2); }
.editor-tf__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); }
.editor-match__head, .editor-match__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } /* Sol · kart | Sağ · açıklama */
.editor-match__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--color-text-3); }
.steps__activity { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.steps__activity-name { font-weight: 600; color: var(--color-text); }
.steps__activity--warn { color: var(--color-warning); }
.steps__activity-open { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control); padding: 0 var(--space-3); font-weight: 500; border-radius: var(--radius-sm); }
.steps__tools { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.steps__tool { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.steps__tool-kind, .steps__tool-audience { font-size: var(--text-sm); color: var(--color-text-3); border: 1px solid var(--color-border); border-radius: 999px; padding: 0 8px; } /* tür (Araç / Bağlantı) ve kitle rozetleri yan yana, başlık ve alan adından sonra */
.steps__tool-note { color: var(--color-text-2); }
.steps__tool-title { font-weight: 500; }
.steps__tool-host { color: var(--color-text-2); }
.steps__tool-open { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control); padding: 0 var(--space-2); font-weight: 500; border-radius: var(--radius-sm); }
.session-tools { margin: 0 0 var(--space-3); }

/* Öğretmen ekranı destek yüzeyleri: etkinlik önizlemesi (sessiz kart) ve alternatif etkinlik (kapalı details) — ana akışı boğmaz */
.step-extra { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); } /* sessiz destek yüzeyi; uyarı kutusu gibi görünmesin, tek mavi vurgu "Sınıfta aç" */
.step-extra .status { white-space: normal; }
.step-extra__head { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin: 0; }
.step-extra__label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-text-3); letter-spacing: 0.02em; }
.step-extra__prompt { margin: var(--space-2) 0 0; color: var(--color-text-2); }
.step-extra__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.step-extra__list--tf li { display: flex; align-items: baseline; gap: var(--space-2); padding: 2px 0; }
.step-extra__answer { flex: none; min-width: 52px; font-weight: 600; }
.step-extra__answer--true { color: var(--color-success); }
.step-extra__answer--false { color: var(--color-danger); }
.step-extra__sep { color: var(--color-text-3); }
.step-extra__list--wheel { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.step-extra__list--wheel li { padding: 2px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); }
.step-extra__list--match li, .step-extra__list--order li { display: flex; align-items: baseline; gap: var(--space-2); padding: 2px 0; }
.step-extra__left { flex: none; font-weight: 600; }
.step-extra__num { flex: none; min-width: 1.6em; font-weight: 600; color: var(--color-text-3); }
.step-extra__note { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.step-extra__fallback { margin: var(--space-2) 0 0; }
.alt-detail { margin: var(--space-3) 0 0; padding: 0 var(--space-3); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); }
.lesson-section__body > .alt-detail { margin-bottom: var(--space-3); } /* oturum alternatifi ile ilk adım arasında boşluk */
.alt-detail__summary { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; min-height: var(--control); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-2); }
.alt-detail--plain { margin-top: var(--space-3); }
.alt-detail__summary::after { margin-left: auto; }
.alt-detail__body { font-size: var(--text-sm); }
.alt-detail__label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-text-3); }
.alt-detail__title { color: var(--color-text); font-weight: 600; }
.alt-detail__meta { color: var(--color-text-2); }
.alt-detail__body { padding-bottom: var(--space-3); }
.alt-detail__text { margin: 0 0 var(--space-2); color: var(--color-text-2); }
.alt-detail__items { margin: 0 0 var(--space-2); padding-left: 1.4em; color: var(--color-text); }
.alt-detail__items li { margin: 2px 0; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
    .dash { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* Ana sütun Sınıflarım tablosunu rahat taşıyamadığında sağ kolon alta geçer */
@media (max-width: 1340px) {
    .dash { grid-template-columns: minmax(0, 1fr); }
    .dash__aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
}

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

@media (max-width: 800px) {
    .dash__pair { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .lesson-card__cols { grid-template-columns: 1fr; }
    .lesson__grid { grid-template-columns: minmax(0, 1fr); }
    .progress-summary { grid-template-columns: 1fr; }
    .progress-summary__item { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .progress-summary__item:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
    .dash .table-wrap { display: none; }
    .classes-m { display: grid; }
}
@media (min-width: 561px) and (max-width: 860px) {
    .classes-m { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .editor-actions { margin-left: 0; width: 100%; }
    .editor-actions--step { gap: 0; }
    .editor-actions--step .btn--ghost, .editor-actions--step .btn--danger-ghost { padding-left: var(--space-3); padding-right: var(--space-3); }
    .editor-form__row { grid-template-columns: 1fr; }
    .editor-tf__row { grid-template-columns: 1fr; }
    .editor-match__head { display: none; }
    .editor-hint { align-self: auto; }
    .topbar__inner { padding: var(--space-2) var(--space-4); flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
    .brand__logo { height: 30px; }
    .nav { order: 3; flex: 1 1 100%; overflow-x: auto; }
    .topbar__user { margin-left: auto; gap: var(--space-2); }
    .board-end--topbar { margin: 0; }
    .page { padding: var(--space-5) var(--space-4) var(--space-7); }
    .form__row { grid-template-columns: 1fr; }
    .stats__item { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .stats__item:last-child { border-bottom: 0; }
    .focus { flex-wrap: wrap; min-height: 0; padding: var(--space-5) var(--space-4); gap: var(--space-4); }
    .focus--empty, .focus--done { padding: var(--space-5) var(--space-4); }
    .focus__icon { width: 52px; height: 52px; }
    .focus__info { flex: 1 1 100%; order: 2; }
    .focus__title { font-size: 1.3125rem; }
    .focus--empty .focus__title, .focus--done .focus__title { font-size: 1.1875rem; }
    .focus__actions { order: 3; flex: 1 1 100%; width: 100%; }
    .focus__actions .btn { min-height: var(--control-lg); }
    .dash-panel__empty--compact { white-space: normal; }
    .dash-panel__head--split { align-items: flex-start; }
    .cal-day { width: 38px; height: 38px; }
    .cal-legend { padding: var(--space-3) var(--space-4); }
    .cal-pop { left: 0; transform: translate(0, 4px); width: min(220px, calc(100vw - 48px)); }

    /* Yönetim satırları: başlık üstte, eylemler altta tam satır; düğmeler ≥ 44 px */
    .rows__item { padding: var(--space-3) var(--space-4); }
    .rows__actions { margin-left: 0; width: 100%; }
    .rows__actions .btn { flex: 1 1 auto; justify-content: center; }
    .rows__actions .inline-form { flex: 0 0 auto; }
    .rows__links { width: 100%; }
    .rows__links > li { width: 100%; }
    .rows__link { width: 100%; flex-wrap: wrap; border-radius: var(--radius); }
    .rows__link-where { flex: 1 1 100%; }
    .rows__link .icon { margin-left: auto; }
    .form-section__body, .form-section__head, .form-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
    .form-footer .btn { flex: 1 1 auto; justify-content: center; }
    .form-footer__hint { flex: 1 1 100%; margin: 0; }
    /* Ayarlar: fotoğraf üstte ortada, alanlar alt alta; sekmeler yatay kayar, kartlar dar iç boşluk; dokunma hedefleri 44 px */
    .tabs { gap: var(--space-4); }
    .tabs__link { min-height: var(--control); }
    .settings-card { padding: var(--space-4); }
    .settings-card .input { min-height: var(--control); }
    .avatar-pick__btn { min-height: 40px; }
    .settings-card .form__row { gap: 0; }
    .settings-card .form__row .field { margin-bottom: var(--space-4); }
    .settings-card .form__row:last-child .field:last-child { margin-bottom: 0; }
    .profile-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .kv__item { grid-template-columns: 1fr; gap: 2px; }
    .kv-list__item { flex-wrap: wrap; }
    .settings-form .form__actions .btn, .settings-action .btn { width: 100%; justify-content: center; }

    /* Tablolar satır/kart düzenine döner */
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
    .table tr:last-child { border-bottom: 0; }
    .table td { border: 0; padding: var(--space-1) var(--space-4); }
    .table td::before { content: attr(data-label); display: block; font-size: var(--text-sm); color: var(--color-text-3); }
    .table__actions { text-align: left; white-space: normal; padding-top: var(--space-2); }
    .list__item { padding-left: var(--space-4); padding-right: var(--space-4); }
    .list__sub { padding-left: var(--space-3); }
    .lesson-section__body { padding-left: var(--space-4); padding-right: var(--space-4); }
    .lesson-section__head { padding-left: var(--space-4); padding-right: var(--space-4); }
    .panel__body, .panel__head { padding-left: var(--space-4); padding-right: var(--space-4); }
    .btn--block-sm { width: 100%; }
    .lesson { padding: var(--space-4) var(--space-4) var(--space-7); }
    .lesson-hero { padding: var(--space-5) var(--space-4); }
    .lesson-hero__title { font-size: 1.85rem; }
    .flow { flex-direction: column; }
    .flow__link { display: none; }
    .flow__stage { flex: 0 0 auto; min-height: 64px; padding: var(--space-3) var(--space-4); flex-wrap: wrap; row-gap: var(--space-1); }
    .flow__body { flex: 1 1 60%; }
    .flow__sub { display: none; }
    .flow__state { flex: 1 1 100%; padding-left: calc(44px + var(--space-4)); }
    .flow__label { font-size: var(--text-lg); }
    .lesson-section__heading { flex: 1 1 100%; }
    .lesson-section__head .session-done { margin-left: 0; width: 100%; }
    .lesson-section__head, .lesson-section__body { padding-left: var(--space-4); padding-right: var(--space-4); }
    .lesson-section__title { font-size: var(--text-xl); }
    .lesson-card, .lesson__outcomes .lesson-card, .lesson-card--objective { padding: var(--space-5) var(--space-4); }
    .lesson-card--objective .prose--lead { font-size: var(--text-xl); }
    .steps__item { gap: var(--space-3); }
    .steps__item--plain { padding-left: 52px; }
    .lesson-progress { padding: var(--space-4); }
    .lesson-hero__top { flex-direction: column; align-items: flex-start; }
    .lesson-hero__present { width: 100%; }

    /* Sınıf Modu, dar ekran */
    .present__bar { grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-4); row-gap: var(--space-2); }
    .present__sections { grid-column: 1 / -1; justify-self: stretch; order: 3; }
    .present__sections::before { display: none; }
    .present__section { flex: 1; justify-content: center; min-height: var(--control); padding: 0 var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
    .present__section-num { width: 28px; height: 28px; font-size: var(--text-sm); }
    .present__exit { justify-self: end; }
    .present__stage { flex: none; padding: var(--space-6) var(--space-4) var(--space-5); justify-content: flex-start; }
    .slide { padding-left: var(--space-4); }
    .slide__hero, .slide__title, .slide--divider .slide__hero { font-size: 2.25rem; }
    .slide__heading { font-size: 1.85rem; }
    .slide__eyebrow, .slide__counter { font-size: var(--text-md); margin-bottom: var(--space-2); }
    .slide__intro, .slide__text, .slide__list li { font-size: var(--text-lg); margin-top: var(--space-4); }
    .slide__list li { padding: var(--space-2) 0 var(--space-2) 28px; margin-top: 0; }
    .slide__list li::before { left: 4px; top: 0.75em; width: 9px; height: 9px; }
    .slide__duration { font-size: var(--text-md); margin-top: var(--space-2); }
    .slide__kicker { font-size: var(--text-md); }
    .slide__question { font-size: var(--text-xl); margin-top: var(--space-4); }
    .slide__tasks li { font-size: var(--text-lg); gap: var(--space-3); }
    .slide__task-num { width: 32px; height: 32px; font-size: var(--text-sm); }
    .slide__list--compact li { font-size: var(--text-lg); }
    .slide__kicker--note { font-size: var(--text-sm); padding: 4px 12px; margin-bottom: var(--space-3); }
    .slide__note-title { font-size: 1.75rem; }
    .slide__note-body { font-size: 1.25rem; margin-top: var(--space-3); }
    .slide__note-items li { font-size: var(--text-xl); padding-left: 32px; }
    .slide__note-items li::before { left: 6px; top: 0.7em; width: 10px; height: 10px; }
    .slide__meta { font-size: var(--text-sm); }
    .present__sections-link { display: none; }
    .present__controls { padding: var(--space-3) var(--space-4) var(--space-5); }
    .present__btn { min-width: 0; flex: 1; justify-content: center; padding: 0 var(--space-3); }
}

/* Telefon/tablet uygulama kabuğu: sol menü gizlenir, üst bar 56 px'lik kompakt çubuk olur, menü çekmecede.
   Ana ekran tek sütun; okuma sırası karşılama → sıradaki ders → sınıflar → bugün/takvim → son ders → hızlı erişim. */
@media (max-width: 1024px) {
    .shell { grid-template-columns: 216px minmax(0, 1fr); }
    .sidebar { padding: var(--space-5) var(--space-3) var(--space-6); }
}

@media (max-width: 768px) {
    .shell { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; overflow-x: clip; }
    .sidebar { display: none; }
    .shell .topbar__inner { min-height: 56px; padding: 0 var(--space-4); gap: var(--space-3); flex-wrap: nowrap; }
    .topbar__brand { display: inline-flex; }
    .topbar__brand .brand__logo { height: 28px; }
    .shell .topbar__user { gap: var(--space-2); }
    .shell .topbar__avatar { width: 32px; height: 32px; }
    .topbar__user .topbar__id, .topbar__user .topbar__exit { display: none; }
    .topbar__menu { display: inline-flex; }
    .board-end--topbar { margin: 0; }
    .shell .page--dashboard { padding: var(--space-3) var(--space-4) var(--space-6); }

    .dash { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
    .dash__main { display: contents; }
    .dash__aside { order: 5; gap: var(--space-4); }
    .dash__pair { order: 6; gap: var(--space-4); }
    .dash__hello .page__lead { margin-top: 4px; }

    /* Tamamlandı kartı: tek odak, iki satır açıklama, tam genişlik CTA */
    .focus.focus--compact { grid-template-columns: 1fr; padding: 12px 14px; row-gap: 8px; }
    .focus--compact .focus__status { gap: 10px; }
    .focus--compact .focus__icon { width: 36px; height: 36px; }
    .focus--compact .focus__icon .icon { width: 18px; height: 18px; }
    .focus--compact .focus__title, .focus--done.focus--compact .focus__title { font-size: 1rem; margin: 0 0 2px; }
    .focus--compact .focus__lead {
        font-size: 0.8125rem; line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Sonraki ders iki satır: "Sonraki ders · Pazartesi 09:50" / "7/C · Ders" */
    .focus--compact .focus__next { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; padding-left: 46px; }
    .focus--compact .focus__next-kicker::after { content: " ·"; }
    .focus--compact .focus__next-when { font-size: var(--text-sm); }
    .focus--compact .focus__next-what { flex: 1 1 100%; font-size: 0.8125rem; }
    .focus--compact .focus__actions { grid-column: 1; grid-row: auto; width: 100%; }
    .focus--compact .focus__actions .btn { width: 100%; min-height: 40px; }

    .dash-panel__head { flex-wrap: nowrap; padding: 12px var(--space-4); }
    .dash-panel__head .link { flex: none; white-space: nowrap; }
    .dash-panel__title { min-width: 0; }
    .dash-panel__empty { padding: var(--space-3) var(--space-4) var(--space-4); }
    .recent { padding: 14px var(--space-4) var(--space-4); }
    .recent__img { width: 88px; height: 64px; }
    .quick, .quick--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px var(--space-4) var(--space-4); gap: 8px; }
    .quick__link { min-height: 48px; padding: 8px 10px; }
    .quick__label { overflow-wrap: anywhere; }
}

@media (max-width: 400px) {
    .auth { padding: var(--space-4) var(--space-3); }
    .auth__card { padding: var(--space-5) var(--space-4); }
    .auth__card--register .auth__alt { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 480px) {
    .dash__hello .page__title { font-size: 1.75rem; }
    .dash__hello .page__lead { font-size: 0.9375rem; }
}

@media (max-width: 720px) {
    /* Etkinlik katmanı, dar ekran */
    .slide__activity { margin-top: var(--space-5); gap: var(--space-3); }
    .slide__activity-start { min-height: var(--control-lg); font-size: var(--text-lg); padding: 0 var(--space-4); width: 100%; justify-content: center; }
    .slide__activity-label, .slide__tool, .slide__tool-host { font-size: var(--text-base); }
    .slide__tool-title { font-size: var(--text-md); }
    .slide__tools { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); }
    .slide__tool-open { margin-left: 0; min-height: var(--control); font-size: var(--text-base); padding: 0 var(--space-3); }
    .activity__panel { padding: var(--space-4) var(--space-4) var(--space-4); }
    .activity__title { font-size: 1.75rem; }
    .activity__kicker, .activity__prompt, .activity__counter, .tf__result, .activity__keys { font-size: var(--text-base); }
    .activity__body { padding: var(--space-4) 0; }
    .activity__actions { flex-direction: column-reverse; align-items: stretch; }
    .activity__btn { min-width: 0; width: 100%; min-height: var(--control-lg); font-size: var(--text-md); }
    .activity__foot { flex-direction: column; align-items: stretch; }
    .tf__text { font-size: 1.5rem; }
    .tf__options { gap: var(--space-3); margin-top: var(--space-5); }
    .tf__option { min-height: 88px; padding: var(--space-3); border-width: 2px; }
    .tf__option-label { font-size: 1.375rem; }
    .tf__option-mark { font-size: var(--text-sm); }
    .wheel { grid-template-columns: 1fr; gap: var(--space-4); }
    .wheel__stage { max-width: 320px; }
    .wheel__spin { width: 84px; height: 84px; font-size: var(--text-md); }
    .wheel__result { font-size: 1.75rem; margin-bottom: var(--space-3); text-align: center; }
    .wheel__legend { font-size: var(--text-base); columns: 1; }
    .editor-tf__row { margin-bottom: var(--space-4); }
    /* Eşleştirme / Sıralama, dar ekran: tek sütun; kart ve düğmeler dokunma boyunda kalır. Dikey kaydırma dokunmaya
       bırakılır (pan-y): telefonda kartı seç → hedefi seç ve ↑ ↓ düğmeleri esas yoldur, sürükleme tahta içindir. */
    .match__card, .order__item { touch-action: pan-y; }
    .match__tray { gap: var(--space-2); margin-bottom: var(--space-4); }
    .match__card, .match--wide .match__card, .match--dense .match__card { min-height: var(--control-lg); font-size: var(--text-md); padding: var(--space-1) var(--space-3); border-width: 2px; }
    .match__tray, .match--wide .match__tray { gap: var(--space-2); min-height: 0; }
    .match__targets, .match--wide .match__targets, .match--dense .match__targets { grid-template-columns: 1fr; gap: var(--space-2); }
    .match__target { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-2); }
    .match__slot, .match--wide .match__slot, .match--dense .match__slot { width: 100%; min-width: 0; max-width: none; min-height: var(--control-lg); font-size: var(--text-base); }
    .match__slot-card, .match--wide .match__slot-card, .match--dense .match__slot-card, .match__target-text, .match--wide .match__target-text, .match--dense .match__target-text { font-size: var(--text-md); }
    .match__status, .order__status, .activity__done { font-size: var(--text-base); }
    .match__actions, .order__actions { flex-direction: column; align-items: stretch; }
    .order__list, .order--dense .order__list, .order--roomy .order__list { display: flex; columns: auto; gap: var(--space-2); }
    .order__item, .order--roomy .order__item, .order--dense .order__item { min-height: var(--control-lg); gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2); }
    .order__num, .order--roomy .order__num { width: 32px; height: 32px; font-size: var(--text-base); }
    .order__text, .order--roomy .order__text, .order--dense .order__text { font-size: var(--text-md); }
    .order__mark { font-size: var(--text-sm); }
    .order__move { width: var(--control-lg); height: var(--control-lg); }
}

/* Sınıf Modu iki sütun: yan malzemesi (maddeler/araç) olan adımlarda sol gövde + alt (etkinlik düğmesi / defter süresi), sağ maddeler.
   DOM sırası (main → side → foot) dar ekranda tek sütun okuma sırasıdır; ızgara yalnızca yerleşimi değiştirir. */
@media (min-width: 1280px) {
    .slide--split { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "counter counter" "main side" "foot side"; column-gap: var(--space-8); align-items: start; }
    .slide--split > .slide__counter { grid-area: counter; }
    .slide--split > .slide__main { grid-area: main; }
    .slide--split > .slide__side { grid-area: side; padding-top: var(--space-2); }
    .slide--split > .slide__foot { grid-area: foot; }
    .slide--split .slide__side > :first-child { margin-top: 0; }
    .slide--split .slide__side .slide__tasks, .slide--split .slide__side .slide__list, .slide--split .slide__side .slide__note-items { max-width: none; }
    .slide--split .slide__side .slide__tools { max-width: none; }
    .slide--split .slide__side .slide__tool { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .slide--split .slide__side .slide__tool-open { margin-left: 0; margin-top: var(--space-1); }
    .slide--split.slide--defter-notu .slide__note-body { max-width: none; }
    .slide--split .slide__text { max-width: none; }
    /* Destek görseli (::destek-görsel): metin ~%64 / görsel ~%36; yatay boşluk varsayılan split'ten dar (space-8 → space-7);
       yan sütun kicker hizasından başlığın altına iner. Hero ızgarasına dokunulmaz. */
    .slide--split.slide--support:not(.slide--hero) { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); column-gap: var(--space-7); }
    .slide--split.slide--support:not(.slide--hero) > .slide__side { padding-top: var(--space-5); align-self: start; }
    /* Sıralama 7–10 madde: iki sütun (1–5 | 6–10); numaralar sırayı, sürükleme/oklar taşımayı verir */
    .order--dense .order__list { display: block; columns: 2; column-gap: var(--space-6); }
    .order--dense .order__item { break-inside: avoid; margin-bottom: var(--space-2); }
}

/* Hero slaytı: DOM sırası her boyutta başlık → hero → açıklama → yan malzeme → alt. Panoramik hero (wide) başlığın altında
   tam genişlik, yüksekliği viewport'a bağlı (3.5:1 oranı genişliği belirler); yan hero (side) sağ sütunda 4:3, sol sütunda
   başlık → açıklama → diğer görseller (blok şeridi) → alt. Metin ölçüleri değişmez; slayt kaydırmasız kalır. */
.slide__stage { margin-top: var(--space-5); }
.slide--hero > .slide__counter { margin-bottom: var(--space-1); }
.slide--hero .slide__main--head + .slide__stage { margin-top: var(--space-2); }
.slide--hero .slide__main--text > :first-child { margin-top: var(--space-3); }
/* Hero slaytında başlık bloğu sıkı: tür etiketi ve süre aynı satırda, başlık altında; dikey pay hero'ya kalır */
.slide--hero > .slide__main--head { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "kicker dur" "title title"; align-items: baseline; column-gap: var(--space-4); }
.slide--hero > .slide__main--head > .slide__kicker { grid-area: kicker; margin-bottom: var(--space-1); }
.slide--hero > .slide__main--head > .slide__duration { grid-area: dur; justify-self: start; margin: 0 0 var(--space-1); }
.slide--hero > .slide__main--head > .slide__title { grid-area: title; }
.slide--hero-wide .visual-hero--wide { --hero-h: clamp(300px, 46vh, 560px); width: min(100%, calc(var(--hero-h) * 3.5)); }
.slide--hero-wide .hero-image--wide { --hero-h: clamp(300px, 46vh, 560px); }
.slide--hero-side .visual-hero--side { width: 100%; }
.slide--hero-poster .visual-hero--poster { width: 100%; }
@media (min-width: 1280px) {
    .slide--hero { display: grid; column-gap: var(--space-8); align-items: start; }
    .slide--hero-wide { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "counter counter" "head head" "stage stage" "text side" "foot side"; }
    .slide--hero-wide:not(.slide--split) { grid-template-areas: "counter counter" "head head" "stage stage" "text text" "foot foot"; }
    .slide--hero-side { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "counter counter" "head stage" "text stage" "side stage" "foot stage"; }
    /* Poster hero (16:9 gibi resim): resim solda büyük, başlık + açıklama + yan malzeme + alt sağda; DOM sırası aynı (başlık → resim → açıklama) */
    .slide--hero-poster { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-areas: "counter counter" "stage head" "stage text" "stage side" "stage foot"; }
    .slide--hero-poster > .slide__stage { margin-top: 0; align-self: start; }
    .slide--hero-poster > .slide__main--head { padding-top: var(--space-2); }
    .slide--hero > .slide__counter { grid-area: counter; }
    .slide--hero > .slide__main--head { grid-area: head; }
    .slide--hero > .slide__stage { grid-area: stage; min-width: 0; }
    .slide--hero > .slide__main--text { grid-area: text; }
    .slide--hero > .slide__side { grid-area: side; padding-top: 0; }
    .slide--hero > .slide__foot { grid-area: foot; }
    .slide--hero-side > .slide__stage { padding-top: var(--space-2); }
    .slide--hero .slide__main--text .slide__text, .slide--hero .slide__main--text .slide__question { max-width: none; }
    .slide--hero-wide.slide--split > .slide__main--text .slide__text, .slide--hero-wide.slide--split > .slide__main--text .slide__question { max-width: 44ch; }
    .slide--hero .slide__side > .visual:first-child { margin-top: var(--space-5); }
}

/* Etkileşimli tahta (1920×1080): biraz daha geniş içerik ve okunaklı metin */
@media (min-width: 1600px) {
    :root { --content-max: 1280px; --text-base: 1.0625rem; }
    /* Poster hero: büyük yazıda sağ sütun (başlık + açıklama) biraz daha geniş, resim yine baskın */
    .slide--hero-poster { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
    /* Sınıf Modu "bir slayt = bir ekran": tahtada geniş sahne (iki sütun kuralı 1280 px'ten itibaren, aşağıda) */
    .present { --stage-max: 1560px; }
    .slide__text { max-width: 38ch; }
    .wheel { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
    .wheel__stage { max-width: 680px; }
    .wheel__legend { font-size: 1.75rem; }
    .page--lesson { --lesson-max: 1320px; --lesson-text: 1.125rem; }
    .lesson-hero__title { font-size: 2.75rem; }
}

/* Sınıf Modu, gerçek tahta viewport'u. 1920×1080 fiziksel ekranda tarayıcı çerçevesi (sekme + adres çubuğu + yer imleri)
   ve masaüstü paneli/dock sonrası CSS viewport'u ~850–950 px yüksekliğinde kalır; "bir slayt = bir ekran" kuralı bu
   yükseklikte de geçerlidir (ana sahnede dikey kaydırma yok, Önceki/Sonraki her zaman görünür). Yaklaşım: metin ölçüleri
   yüksekliğe bağlı clamp ile kontrollü iner (1080 px'te tasarım değerleri aynen kalır), 960 px altında önce çerçeve ve dikey
   boşluklar daralır. Fontlar arka sıradan okunur alt sınırların altına inmez; küçük ekran (≤720 px) kuralları ayrıdır. */
@media (min-width: 1280px) {
    .slide__hero { font-size: clamp(3.5rem, 7.4vh, 5rem); max-width: 20ch; }
    .slide--divider .slide__hero { font-size: clamp(3rem, 6.3vh, 4.25rem); }
    .slide__heading { font-size: clamp(2.75rem, 5.2vh, 3.5rem); }
    .slide__title { font-size: clamp(3.375rem, 6.7vh, 4.5rem); max-width: 22ch; }
    .slide__intro { font-size: clamp(1.75rem, 3vh, 2rem); max-width: 34ch; }
    .slide__text { font-size: clamp(2rem, 3.35vh, 2.25rem); }
    .slide__question { font-size: clamp(2.25rem, 4.1vh, 2.75rem); }
    .slide__list li { font-size: clamp(1.75rem, 3.15vh, 2.125rem); }
    .slide__list--compact li, .slide__tasks { font-size: clamp(1.75rem, 3vh, 2rem); }
    .slide__note-title { font-size: clamp(2.5rem, 5vh, 3.25rem); }
    .slide__note-body { font-size: clamp(1.875rem, 3.7vh, 2.25rem); }
    .slide__note-items li { font-size: clamp(1.75rem, 3.4vh, 2.125rem); }
}
@media (min-width: 1280px) and (max-height: 960px) {
    /* Çerçeve: üst çubuk, sahne payı ve kontroller daha sıkı; dokunma hedefleri 44 px'in altına inmez */
    .present__bar { padding: var(--space-2) var(--space-6); }
    .present__section { min-height: var(--control); }
    .present__stage { padding: var(--space-5) var(--space-6) var(--space-4); }
    .present__controls { padding: var(--space-3) var(--space-6) var(--space-4); }
    .present__btn { min-height: var(--control-lg); }
    /* Slayt içi dikey ritim: ilk önce boşluklar iner, metin ölçüleri yukarıdaki clamp'ten gelir */
    .slide__counter { margin-bottom: var(--space-2); }
    .slide__eyebrow { margin-bottom: var(--space-2); }
    .slide__heading { margin-bottom: var(--space-4); }
    .slide__kicker { margin-bottom: var(--space-2); }
    .slide__intro, .slide__text, .slide__question, .slide__tasks, .slide__note-items { margin-top: var(--space-4); }
    .slide__text { line-height: 1.4; }
    .slide__intro { line-height: 1.35; }
    .slide__duration { margin-top: var(--space-2); }
    .slide__meta { margin-top: var(--space-3); }
    .slide__list li { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .slide__tasks li { padding: var(--space-2) 0; }
    .slide__note-items li { padding-top: 6px; padding-bottom: 6px; }
    .slide__kicker--note { margin-bottom: var(--space-3); }
    .slide--defter-notu .slide__duration { margin-top: var(--space-4); }
    .slide__activity { margin-top: var(--space-4); }
    .slide__activity-start { min-height: 64px; }
    /* Araç paneli, kısa tahta viewport'u: her araç tek kompakt satır — sol üst ad, sol alt alan adı (host), sağda "Aç"
       (≥ 52 px dokunma hedefi). Satır yüksekliği sarmaya bağlı değildir; 4 araç bile alt kontrollerle çakışmadan sığar.
       Yazı boyutu küçültülmez; yalnız boşluklar ve satır düzeni sıkılaşır. */
    .slide__tools { margin-top: var(--space-3); padding: 10px var(--space-4) 12px; }
    .slide__tools-label { margin-bottom: 6px; font-size: 0.9375rem; }
    .slide__tools-list { gap: 6px; }
    .slide__tool, .slide--split .slide__side .slide__tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title open" "host open"; column-gap: var(--space-3); row-gap: 0; align-items: center; }
    .slide__tool-title { grid-area: title; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
    .slide__tool-host { grid-area: host; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
    .slide__tool-open, .slide--split .slide__side .slide__tool-open { grid-area: open; margin: 0; align-self: center; min-height: 52px; padding: 0 var(--space-4); font-size: 1.125rem; }
    .slide--split { column-gap: var(--space-7); }
    /* Defter notu: başlık → gövde → maddeler ritmi kısa viewport'ta daha sıkı */
    .slide__note-title { font-size: clamp(2.5rem, 5vh, 3.25rem); }
    .slide__note-body { margin-top: var(--space-3); font-size: clamp(1.875rem, 3.7vh, 2.25rem); }
    .slide__note-items li { font-size: clamp(1.75rem, 3.4vh, 2.125rem); }
    /* Tek sütunlu uzun anlatım: satır uzunluğu 44ch'e kadar (daha az satır); iki sütunda zaten sınırsız */
    .slide__text { max-width: 44ch; }
}

/* Etkinlik katmanı, gerçek tahta viewport'u: yönerge uzun olabilir (etkinlik tek başına anlaşılır olmalı); çark sahnesi
   kalan yüksekliğe göre ölçülenir, katman tek ekranda kalır. 960 px altında çerçeve ve boşluklar daralır. */
@media (min-width: 1280px) {
    .activity__prompt { max-width: 64ch; font-size: clamp(1.5rem, 3vh, 2rem); }
    .activity__title { font-size: clamp(2.25rem, 4.85vh, 3.25rem); }
    /* Yalnız çark: gövde kalan yüksekliği alır (min-height: 0), sahne bu yüksekliğe göre kare olur (en çok 680 px).
       Diğer türler içerik yüksekliğinde kalır; sığmazsa katman kaydırılır (altta kalan kontroller örtülmez). */
    .activity--wheel .activity__body { min-height: 0; }
    .wheel { height: 100%; }
    .wheel__stage { width: auto; height: 100%; max-height: 680px; }
}
@media (min-width: 1280px) and (max-height: 960px) {
    .activity__panel { padding: var(--space-5) var(--space-6) var(--space-4); }
    .activity__prompt { margin-top: var(--space-2); line-height: 1.35; }
    .activity__body { padding: var(--space-4) 0; }
    .activity__foot { padding-top: var(--space-3); }
    .activity__btn { min-height: 56px; }
    /* Doğru/Yanlış: ifade yüksekliğe göre, seçenek kutuları biraz daha basık */
    .tf__text { font-size: clamp(2.5rem, 4.85vh, 3.25rem); }
    .tf__options { margin-top: var(--space-5); }
    .tf__option { min-height: 132px; }
    /* Başlık daha geniş sarar (2 satır), kicker/yönerge/sayaç boşlukları kısalır */
    .activity__title { max-width: 32ch; }
    .activity__kicker { margin-bottom: var(--space-1); }
    .activity__counter { margin-bottom: var(--space-1); font-size: 1.5rem; }
    .activity__actions, .match__actions, .order__actions { margin-top: var(--space-2); min-height: 56px; }
    .activity__done { font-size: 1.375rem; }
    /* Eşleştirme: davranış aynı; yalnız dikey boşluk, ardından kart/yuva yüksekliği (dokunma hedefi ≥ 52 px) iner.
       10 çift (5 satır × 2 sütun) ve 8 çift 850 px'e sığar; yazı ölçüleri değişmez. */
    .match__tray, .match--wide .match__tray, .match--dense .match__tray { margin-bottom: var(--space-2); gap: var(--space-2); min-height: 0; }
    .match__card { min-height: 56px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .match--wide .match__card { min-height: 60px; }
    .match--dense .match__card { min-height: 52px; }
    .match__targets { gap: var(--space-2); }
    .match--wide .match__targets { row-gap: var(--space-2); }
    .match--dense .match__targets { row-gap: 6px; }
    .match__target, .match--wide .match__target, .match--dense .match__target { padding-top: 2px; padding-bottom: 2px; }
    .match__slot { min-height: 56px; }
    .match--wide .match__slot { min-height: 60px; min-width: 240px; }
    .match--dense .match__slot { min-height: 52px; }
    .match__status, .order__status { margin-top: 6px; }
    /* Sıralama: satır aralığı ve kart yüksekliği; ↑ ↓ düğmeleri 52 px */
    .order__list { gap: 6px; }
    .order--roomy .order__list { gap: var(--space-2); }
    .order__item { min-height: 56px; }
    .order--roomy .order__item { min-height: 64px; }
    .order--dense .order__item { min-height: 56px; margin-bottom: 6px; }
    .order--roomy .order__num { width: 44px; height: 44px; font-size: 1.25rem; }
    .order__move { width: var(--control-lg); height: var(--control-lg); }
}
@media (min-width: 1600px) {
    .activity__prompt { max-width: 80ch; }
}

/* --------------------------------------------------------------------------
   5f. GÖRSEL KATMAN (.visual) — içerikten gelen küçük şema/çizimler (app/Helpers/visual_helper.php).
   Beş temel parça: akış (.visual-flow), blok yığını (.visual-blocks; karşılaştırma = iki yığın), karar yolu (.visual-choice),
   hafıza şeması (.visual-memory), sahne (kişi kartları .visual-people; hero sahneler .visual-hero, aşağıda). Sade çizgi SVG (currentColor),
   yuvarlatılmış köşeler, az renk; metin HTML'de kalır (font SVG'ye gömülmez). Renk tek başına anlam taşımaz: kategori
   metinden, hata/eksik rozetten (? / ×) ve gizli metinden okunur. Sınıf Modu ölçüleri büyük; .visual--mini öğretmen ekranı.
   -------------------------------------------------------------------------- */
.visual { margin: var(--space-5) 0 0; --vi-text: 1.5rem; --vi-icon: 44px; --vi-block: 56px; --vi-node: 1.5rem; }
.visual:first-child { margin-top: 0; }
.visual .vi-fill { fill: currentColor; stroke: none; }
.visual .vi-fill-soft { fill: currentColor; fill-opacity: 0.18; }
.visual-icon { width: var(--vi-icon); height: var(--vi-icon); flex: none; color: var(--color-text); }
.visual-arrow { width: 36px; height: 22px; color: var(--color-text-3); }

/* Akış: yatay düğümler + ok; uç düğüm (Başlangıç/Hedef) dolgulu, ikonlu düğüm ikon üstte */
.visual-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.visual-flow__item { display: inline-flex; align-items: center; gap: var(--space-3); }
.visual-flow__node {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 60px; padding: var(--space-2) var(--space-3);
    font-size: var(--vi-node); font-weight: 600; line-height: 1.2; color: var(--color-text);
    background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius);
}
.visual-flow__node--terminal { background: var(--tone, var(--color-accent)); border-color: transparent; color: #fff; border-radius: 999px; }
.visual-flow__node--icon { flex-direction: column; text-align: center; min-width: 104px; padding: 6px var(--space-3); gap: 2px; }
.visual-flow__node--icon .visual-flow__icon { width: var(--vi-icon); height: var(--vi-icon); }
.visual-flow__arrow { display: inline-flex; align-items: center; color: var(--color-text-3); }

/* Blok yığını: birbirine geçen renkli bloklar (kategori rengi + üst şapka + alt sekme), iç bloklar girintili */
.visual-blocks { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; max-width: 560px; }
.visual-block {
    position: relative; display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--vi-block); padding: var(--space-1) var(--space-4) var(--space-1) var(--space-4);
    font-size: var(--vi-text); font-weight: 600; line-height: 1.2; color: var(--color-text);
    background: var(--vi-bg, #e8e4dd); border: 2px solid var(--vi-line, #c9c3b8); border-radius: 10px;
}
.visual-block::after { content: ""; position: absolute; left: 18px; bottom: -8px; width: 32px; height: 10px; background: inherit; border: 2px solid var(--vi-line, #c9c3b8); border-top: 0; border-radius: 0 0 6px 6px; z-index: 1; }
.visual-blocks > .visual-block:last-child::after { display: none; }
.visual-block__hat { position: absolute; left: 0; right: 0; top: -14px; height: 22px; background: inherit; border: 2px solid var(--vi-line); border-bottom: 0; border-radius: 999px 999px 0 0; z-index: -1; }
.visual-blocks > .visual-block:first-child { margin-top: 14px; }
.visual-block--nested { margin-left: var(--space-6); }
.visual-block--olay { --vi-bg: #f6e3a1; --vi-line: #d4b95a; }
.visual-block--hareket { --vi-bg: #cfe0f7; --vi-line: #8fb0e0; }
.visual-block--kontrol { --vi-bg: #f8d9b2; --vi-line: #e0a866; }
.visual-block--algilama { --vi-bg: #cfe9ef; --vi-line: #85c0cf; }
.visual-block--gorunum { --vi-bg: #e2d6f5; --vi-line: #b49ddc; }
.visual-block--islemler { --vi-bg: #d5ecd6; --vi-line: #8fc494; }
.visual-block--degisken { --vi-bg: #f8d4c4; --vi-line: #e39c7f; }
.visual-block__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.visual-block__flag {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.5rem; font-weight: 800; color: #fff; background: var(--color-danger);
}
.visual-block__flag--missing { background: var(--color-text-3); }
.visual-block.is-faulty { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }
.visual-block.is-missing { border-style: dashed; background: var(--color-surface-muted); opacity: 0.85; }

/* Karşılaştırma: iki yığın yan yana, başlıklı; bozuk taraf koyu kırmızı başlık */
.visual-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); align-items: start; }
.visual-compare__caption { margin: 0 0 var(--space-3); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-2); }
.visual-compare__side--bad .visual-compare__caption { color: var(--color-danger); }
.visual-compare .visual-blocks { max-width: none; }

/* Karar yolu: soru kutusu, evet/hayır dalları, sonuç kartları (geç yeşil işaretli, bekle amber; metin her zaman var).
   Bağlantılar: soru altında kısa dikey çizgi, dallar üstünde yatay köprü, her dalda dikey iniş. */
.visual-choice { max-width: 720px; }
.visual-choice__node { display: flex; flex-direction: column; align-items: stretch; position: relative; }
.visual-choice__q {
    margin: 0; padding: var(--space-2) var(--space-4); align-self: center; position: relative;
    font-size: var(--vi-text); font-weight: 700; line-height: 1.2; text-align: center;
    background: var(--color-surface); border: 3px solid var(--tone, var(--color-accent)); border-radius: var(--radius-lg);
}
.visual-choice__q::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 3px; height: 12px; margin-left: -1.5px; background: var(--color-border-strong); }
.visual-choice__branches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: 12px; position: relative; }
.visual-choice__branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: var(--color-border-strong); }
.visual-choice__branch { display: flex; flex-direction: column; align-items: center; }
.visual-choice__edge { width: 3px; height: 18px; background: var(--color-border-strong); }
.visual-choice__label { display: inline-block; margin: 0 0 var(--space-1); padding: 2px 12px; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); color: var(--color-text-2); }
.visual-choice__leaf {
    margin: 0; padding: var(--space-2) var(--space-4); min-width: 120px;
    font-size: var(--vi-text); font-weight: 700; line-height: 1.2; text-align: center;
    background: var(--color-surface); border: 3px solid var(--color-border-strong); border-radius: var(--radius);
}
.visual-choice__leaf--go { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-soft); }
.visual-choice__leaf--stop { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-soft); }
.visual-choice__node--d1 .visual-choice__q, .visual-choice__node--d2 .visual-choice__q { font-size: calc(var(--vi-text) * 0.85); border-width: 2px; }
.visual-choice__node--d1 .visual-choice__leaf { min-width: 96px; font-size: calc(var(--vi-text) * 0.9); }

/* Hafıza şeması: soru → cevap (not kâğıdı) → hafıza kutusu → söyle; kutu yoksa kesikli. Tek satır: adımlar eşit genişlik, oklar dar. */
.visual-memory { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; max-width: 700px; }
.visual-memory__step {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    min-width: 0; padding: var(--space-3) 6px;
    text-align: center; background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius);
}
.visual-memory__step--note { background: #fbf1c8; border-color: #e3cf7c; transform: rotate(-1.5deg); }
.visual-memory__step--box { border-color: var(--tone, var(--color-accent)); border-width: 3px; }
.visual-memory__step--empty { border-style: dashed; background: var(--color-surface-muted); }
.visual-memory__icon { width: var(--vi-icon); height: var(--vi-icon); }
.visual-memory__cap { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); line-height: 1.15; }
.visual-memory__text { font-size: calc(var(--vi-text) * 0.85); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.visual-memory__arrow { display: flex; align-items: center; color: var(--color-text-3); }
.visual-memory__arrow .visual-arrow { width: 28px; height: 18px; }

/* Kişi kartları: siluet(ler) + kısa etiket; kartlar eşit genişlikte tek satıra dizilir (2–6 kart) */
.visual-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; max-width: 720px; }
.visual-people__card { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-2); background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius); }
.visual-people__figures { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.visual-people__figure { width: 56px; height: 56px; color: var(--color-text-2); }
.visual-people__figure--cocuk { width: 50px; height: 50px; }
.visual-people__figure--yetiskin { width: 66px; height: 66px; color: var(--color-text); }
.visual-people__label { font-size: calc(var(--vi-text) * 0.85); font-weight: 700; text-align: center; line-height: 1.2; }

/* Hero sahneler (.visual-hero; visual_scenes_helper): editorial illüstrasyon SVG'si + öğrenciye görünen HTML metin katmanı.
   Etiketler SVG içinde <foreignObject> kutularındadır: konum SVG özniteliğiyle (inline style yok), yazı boyutu SVG kullanıcı
   biriminde px (1400 birimlik panoramik / 800 birimlik yan sahne) ve resimle birlikte ölçeklenir; şekil ile yazı her boyutta
   aynı hizada kalır. Dar ekran ve öğretmen ekranı (mini): foreignObject gizlenir, aynı metinler resmin altına düz çip listesi
   (.visual-hero__list) olarak iner (anlam yine metinde; figure aria-label AT için cümleyi taşır). */
.visual--hero { max-width: none; }
.visual-hero { position: relative; width: 100%; max-width: 100%; }
.visual-hero__svg { display: block; width: 100%; height: auto; }
.visual-hero__svg foreignObject { overflow: visible; pointer-events: none; }
.visual-hero__fo { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 26px; line-height: 1.15; }
.visual-hero__fo--screen { align-items: flex-start; }
.visual-hero--side .visual-hero__fo { font-size: 31px; }
.visual-hero--poster .visual-hero__fo { font-size: 54px; }
.visual-hero__label {
    box-sizing: border-box; display: inline-flex; max-width: 100%; align-items: center; justify-content: center;
    padding: 0.28em 0.7em; font-weight: 700; font-size: 1em; line-height: 1.15; text-align: center; white-space: nowrap;
    color: var(--color-text); background: var(--color-surface); border: 0.09em solid var(--color-border-strong); border-radius: 999px;
}
.visual-hero__label--say, .visual-hero__label--say-warn, .visual-hero__label--card, .visual-hero__label--head, .visual-hero__label--row, .visual-hero__label--row-strong, .visual-hero__label--note, .visual-hero__label--panel, .visual-hero__label--sign, .visual-hero__label--step { width: 100%; }
.visual-hero__list { display: none; flex-wrap: wrap; gap: 6px 8px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.visual-hero__list .visual-hero__label { width: auto; padding: 3px 10px; font-size: 0.9375rem; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: 999px; opacity: 1; text-transform: none; letter-spacing: 0; white-space: normal; }
.visual-hero__list .visual-hero__label--go { color: #fff; background: var(--color-success); border-color: var(--color-success); }
.visual-hero__list .visual-hero__label--stop { color: #fff; background: #a4631a; border-color: #a4631a; }
.visual-hero__list-screen { width: 100%; --vi-text: 0.9375rem; --vi-block: 34px; }
.visual-hero__list-screen .visual-blocks { max-width: none; }
.visual-hero__label--say, .visual-hero__label--say-warn, .visual-hero__label--card, .visual-hero__label--note, .visual-hero__label--ghost,
.visual-hero__label--sign, .visual-hero__label--head, .visual-hero__label--row, .visual-hero__label--row-strong { padding: 0; background: transparent; border: 0; border-radius: 0; }
.visual-hero__label--say, .visual-hero__label--say-warn { font-size: 0.95em; }
.visual-hero__label--say-warn { color: #a4631a; }
.visual-hero__label--card { font-size: 1.05em; }
.visual-hero__label--ghost { opacity: 0.45; font-size: 0.9em; }
.visual-hero__label--sign { color: #fff; font-size: 1.05em; letter-spacing: 0.03em; }
.visual-hero__label--tag { font-size: 0.85em; padding: 0.22em 0.6em; }
.visual-hero__label--go { color: #fff; background: var(--color-success); border-color: var(--color-success); font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; }
.visual-hero__label--stop { color: #fff; background: #a4631a; border-color: #a4631a; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; }
.visual-hero__label--bad { background: #f8d4c4; border-color: #e39c7f; }
.visual-hero__label--good { background: #d5ecd6; border-color: #8fc494; }
.visual-hero__label--rule { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.visual-hero__label--box { color: #a4631a; background: #fff; border-color: #a4631a; border-radius: 0.3em; }
.visual-hero__label--head { color: #fff; font-size: 1.05em; letter-spacing: 0.04em; }
.visual-hero__label--row, .visual-hero__label--row-strong { justify-content: flex-start; text-align: left; font-weight: 600; font-size: 0.95em; }
.visual-hero__label--row-strong { font-weight: 800; }
.visual-hero__label--note { justify-content: flex-start; text-align: left; font-size: 0.9em; }
.visual-hero__label--panel { justify-content: flex-start; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; color: #2b2723; }
.visual-hero__label--step { justify-content: flex-start; text-align: left; padding: 0.22em 0.55em; font-size: 0.82em; background: var(--color-bg); border-color: var(--color-border); white-space: normal; }
/* Genel sahneler (H1–H10): sınıf sohbeti balonundaki soru; kavram kartı başlık/açıklama; zincir numarası ve satırları; iki panel başlığı ve maddeleri */
.visual-hero__label--quote, .visual-hero__label--card-title, .visual-hero__label--card-desc, .visual-hero__label--row-title, .visual-hero__label--row-desc, .visual-hero__label--row-desc-dense, .visual-hero__label--panel-head { width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; white-space: normal; }
.visual-hero__label--quote { font-size: 1em; font-weight: 700; line-height: 1.2; color: #2b2723; }
.visual-hero__label--card-title { font-size: 0.95em; font-weight: 800; line-height: 1.1; color: #2b2723; }
.visual-hero__label--card-desc { align-items: flex-start; font-size: 0.8em; font-weight: 600; line-height: 1.15; color: #4a443d; }
.visual-hero__label--num { padding: 0; color: #fff; background: transparent; border: 0; font-size: 0.95em; font-weight: 800; }
.visual-hero__label--row-title { justify-content: flex-start; text-align: left; font-size: 0.95em; font-weight: 800; line-height: 1.1; color: #2b2723; }
.visual-hero__label--row-desc, .visual-hero__label--row-desc-dense { justify-content: flex-start; align-items: flex-start; text-align: left; font-size: 0.84em; font-weight: 600; line-height: 1.15; color: #4a443d; }
.visual-hero__label--row-desc-dense { font-size: 0.72em; }
.visual-hero__label--panel-head { color: #fff; font-size: 0.9em; letter-spacing: 0.03em; }
.visual-hero__label--item { justify-content: flex-start; text-align: left; width: 100%; padding: 0.2em 0.55em; font-size: 0.8em; font-weight: 700; line-height: 1.1; background: #f4efe7; border-color: #d8cfc2; border-radius: 0.5em; white-space: normal; }
.visual-hero__list .visual-hero__label--num { display: none; }
.visual-hero__list .visual-hero__label--quote, .visual-hero__list .visual-hero__label--card-title, .visual-hero__list .visual-hero__label--row-title, .visual-hero__list .visual-hero__label--panel-head { font-weight: 800; }
/* Master illüstrasyon (H13 kapıdaki görevli): etiketler resmin parçası gibi küçük ve sakin; sahnede GEÇ/BEKLE yok */
.visual-hero--kapi-gorevlisi .visual-hero__label--sign { font-size: 1.05em; letter-spacing: 0.03em; }
.visual-hero--kapi-gorevlisi .visual-hero__label--tag { font-size: 0.72em; padding: 0.12em 0.6em; border-width: 0.09em; border-color: #d8cfc2; background: #fbf8f3; color: #2b2723; }
/* Görsel hero (::görsel; hibrit hero sözleşmesi): hikâyeli/insanlı sahne gerçek resimdir (<img>, iç oran korunur, kırpma yok),
   kavramsal sahneler SVG kalır. wide (en/boy ≥ 2,5): başlığın altında tam genişlik, yüksekliği viewport'a bağlı; poster
   (16:9 gibi): resim solda büyük, başlık + açıklama sağda (.slide--hero-poster). Balon metinleri HTML: sahneye özel sınıflarla
   yüzde konum (inline style yok), yazı boyutu resim genişliğiyle ölçeklenir (cqw); dar ekran/öğretmen ekranında liste. */
.visual--image { max-width: none; }
.hero-image { position: relative; display: block; width: fit-content; max-width: 100%; --hero-h: 520px; }
.hero-image__img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; overflow: visible; border-radius: 18px; } /* overflow: tarayıcı varsayılanı "clip" → kırpma sözleşmesi ölçümü için açık */
.hero-image--wide .hero-image__img { max-height: var(--hero-h); }
.hero-image--poster { width: 100%; }
.hero-image--poster .hero-image__img { width: 100%; }
/* Destek görseli (::destek-görsel): hero değil; yan sütunda doğal oran, kırpma yok, fazla boş kutu yok */
.visual--support { max-width: none; }
.support-image { display: flex; justify-content: center; align-items: flex-start; width: 100%; }
.support-image__img { display: block; max-width: 100%; width: auto; height: auto; max-height: min(64vh, 560px); object-fit: contain; object-position: center top; border-radius: 18px; }
/* Balon yazısı resimle ölçeklenir: yükseklikle sınırlanan panoramik resimde ölçek = hero-h / resim yüksekliği (3:1 için ≈ 32 resim px) */
.hero-image__labels { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--hero-h) * 0.048); }
.hero-image__labels .visual-hero__label { position: absolute; box-sizing: border-box; padding: 0; white-space: normal; line-height: 1.12; }
/* H12 Unutan Bot (12/unutan-bot.jpg, 2000×667): boş balonlar ve düşen not kartı — resmin yüzdeleri */
.hero-image--unutan-bot .hero-image__label--1 { left: 15%; top: 9.5%; width: 9.6%; height: 15.5%; }
.hero-image--unutan-bot .hero-image__label--2 { left: 27.4%; top: 13.5%; width: 15.4%; height: 17.5%; }
.hero-image--unutan-bot .hero-image__label--3 { left: 65%; top: 9%; width: 11%; height: 16.5%; }
.hero-image--unutan-bot .hero-image__label--4 { left: 78.5%; top: 13.5%; width: 14.8%; height: 16.5%; color: #a4631a; }
.hero-image--unutan-bot .hero-image__label--5 { left: 90.3%; top: 77%; width: 5%; height: 12%; font-size: 0.9em; opacity: 0.6; transform: rotate(-14deg); }
/* Tahtadaki program (hata avcıları / önce-sonra): mevcut blok yığını, sahne birimiyle ölçeklenen ölçüler (foreignObject içinde) */
.visual-hero__screen { box-sizing: border-box; width: 100%; height: 100%; padding: 0.6em 0.8em; --vi-text: 24.5px; --vi-block: 46px; font-size: 14px; }
.visual-hero__screen .visual-blocks { gap: 0.2em; max-width: none; }
.visual-hero__screen--plain { --vi-text: 20.3px; --vi-block: 42px; padding: 0.4em 0.5em; }
.visual-hero__screen--plain .visual-block--nested { margin-left: 1.2em; }
.visual-hero__screen .visual-block { padding: 0 1em; gap: 0.5em; border-width: 0.15em; border-radius: 0.7em; }
.visual-hero__screen .visual-block::after { left: 1.2em; bottom: -0.6em; width: 2.2em; height: 0.7em; border-width: 0.15em; border-top: 0; }
.visual-hero__screen .visual-block__hat { top: -0.9em; height: 1.4em; border-width: 0.15em; border-bottom: 0; }
.visual-hero__screen .visual-blocks > .visual-block:first-child { margin-top: 0.9em; }
.visual-hero__screen .visual-block--nested { margin-left: 2em; }

/* Öğretmen ekranı: küçük ölçek, aynı anlam */
.visual--mini { margin-top: var(--space-3); --vi-text: 0.9375rem; --vi-icon: 26px; --vi-block: 34px; --vi-node: 0.9375rem; max-width: 680px; }
.visual--mini .visual-flow { gap: 6px 8px; }
.visual--mini .visual-flow__item { gap: 6px; }
.visual--mini .visual-flow__node { min-height: 36px; padding: 4px 10px; }
.visual--mini .visual-flow__node--icon { min-width: 0; }
.visual--mini .visual-arrow { width: 24px; height: 16px; }
.visual--mini .visual-block { padding: 2px 12px; border-radius: 7px; gap: var(--space-2); }
.visual--mini .visual-block::after { left: 12px; bottom: -6px; width: 22px; height: 7px; }
.visual--mini .visual-block__hat { top: -9px; height: 14px; }
.visual--mini .visual-blocks > .visual-block:first-child { margin-top: 9px; }
.visual--mini .visual-block__flag { width: 24px; height: 24px; font-size: 0.9375rem; }
.visual--mini .visual-choice__label { font-size: 0.75rem; padding: 0 8px; }
.visual--mini .visual-choice__leaf { min-width: 72px; padding: 4px 10px; }
.visual--mini .visual-choice__q { padding: 4px 12px; }
.visual--mini .visual-memory { max-width: 520px; }
.visual--mini .visual-memory__step { padding: var(--space-2) 4px; }
.visual--mini .visual-memory__cap { font-size: 0.6875rem; }
.visual--mini .visual-people { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--space-2); }
.visual--mini .visual-people__card { padding: var(--space-2) 6px; }
.visual--mini .visual-people__figure, .visual--mini .visual-people__figure--yetiskin { width: 30px; height: 30px; }
.visual--mini .visual-people__figure--cocuk { width: 24px; height: 24px; }
.visual--mini .visual-hero { max-width: 560px; }
.visual--mini .visual-hero__svg foreignObject { display: none; }
.visual--mini .visual-hero__list { display: flex; gap: 4px 6px; }
.visual--mini .visual-hero__list .visual-hero__label { padding: 2px 8px; font-size: 0.8125rem; border-width: 1px; }
.visual--mini .visual-hero__list-screen { --vi-text: 0.8125rem; --vi-block: 30px; }
.visual--mini .hero-image { max-width: 480px; }
.visual--mini .hero-image--wide .hero-image__img { max-height: 200px; }
.visual--mini.visual--support { max-width: 320px; }
.visual--mini .support-image__img { max-height: 180px; }
.visual--mini .hero-image__labels { position: static; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: var(--space-2); font-size: 0.8125rem; }
.visual--mini .hero-image__labels .visual-hero__label { position: static; width: auto; height: auto; padding: 2px 8px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; opacity: 1; transform: none; font-size: 1em; }

/* Etkinlik katmanında görsel destek: blok görünümlü sıralama kartları, ikonlu eşleştirme kartları / D-Y ifadeleri, çark sonrası iki büyük seçenek */
.order--blocks .order__item { --vi-bg: #e8e4dd; --vi-line: #c9c3b8; background: var(--vi-bg); border-color: var(--vi-line); border-width: 2px; border-radius: 10px; }
.order--blocks .order__item::before { content: ""; position: absolute; left: 62px; top: -6px; width: 30px; height: 8px; background: var(--vi-line); opacity: 0.55; border-radius: 0 0 5px 5px; pointer-events: none; }
.order--blocks .order__item.is-dragging::before { display: none; }
.order--blocks .order__item--olay { --vi-bg: #f6e3a1; --vi-line: #d4b95a; }
.order--blocks .order__item--hareket { --vi-bg: #cfe0f7; --vi-line: #8fb0e0; }
.order--blocks .order__item--kontrol { --vi-bg: #f8d9b2; --vi-line: #e0a866; }
.order--blocks .order__item--algilama { --vi-bg: #cfe9ef; --vi-line: #85c0cf; }
.order--blocks .order__item--gorunum { --vi-bg: #e2d6f5; --vi-line: #b49ddc; }
.order--blocks .order__item--islemler { --vi-bg: #d5ecd6; --vi-line: #8fc494; }
.order--blocks .order__item--degisken { --vi-bg: #f8d4c4; --vi-line: #e39c7f; }
.order--blocks .order__num { background: var(--color-surface); }
.match__icon { display: inline-flex; flex: none; width: 40px; height: 40px; margin-right: var(--space-2); color: var(--color-text-2); }
.match__icon .visual-icon { width: 100%; height: 100%; }
.match__card--icon { padding-left: var(--space-3); }
.tf__icon { display: inline-flex; width: 64px; height: 64px; margin-bottom: var(--space-3); color: var(--tone, var(--color-accent)); }
.tf__icon .visual-icon { width: 100%; height: 100%; }
.tf__statement--icon { display: flex; flex-direction: column; align-items: flex-start; }
.wheel__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; max-width: 520px; }
.wheel__choice { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--space-2) var(--space-3); font-size: 1.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; background: var(--color-surface); border: 3px solid var(--color-border-strong); border-radius: var(--radius); }
.wheel__choice--go { color: var(--color-success); border-color: var(--color-success); }
.wheel__choice--stop { color: var(--color-warning); border-color: var(--color-warning); }
.wheel__choices-label { margin: 0 0 var(--space-2); font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); }

/* Görselden sonra gelen maddeler/araç kutusu daha yakın durur (yan sütunda görsel → maddeler → araç sırası) */
.visual + .slide__tasks, .visual + .slide__list, .visual + .slide__note-items { margin-top: var(--space-4); }
.visual + .slide__tools { margin-top: var(--space-4); }

/* Kısa tahta viewport'u (≤960 px yükseklik): boşluk ve ölçüler iner, yazı küçültülmez */
@media (min-width: 1280px) and (max-height: 960px) {
    .visual { margin-top: var(--space-4); --vi-block: 52px; --vi-icon: 40px; }
    .visual + .slide__tasks, .visual + .slide__list, .visual + .slide__tools { margin-top: var(--space-3); }
    .visual-blocks { gap: 2px; }
    .visual-block { padding-top: 2px; padding-bottom: 2px; }
    .visual-flow__node { min-height: 54px; }
    .visual-choice__branches { margin-top: var(--space-1); gap: var(--space-3); }
    .visual-choice__edge { height: 16px; }
    .visual-memory__step { padding: var(--space-2) var(--space-2); }
    .visual-people__card { padding: var(--space-2) var(--space-2); }
    .visual-people__figure { width: 50px; height: 50px; }
    .visual-people__figure--cocuk { width: 44px; height: 44px; }
    .visual-people__figure--yetiskin { width: 58px; height: 58px; }
    .tf__icon { width: 52px; height: 52px; margin-bottom: var(--space-2); }
    .wheel__choice { min-height: 60px; font-size: 1.5rem; }
    .wheel__choices { margin-bottom: var(--space-3); }
    .slide__stage { margin-top: var(--space-3); }
    .slide--hero-wide .visual-hero--wide, .slide--hero-wide .hero-image--wide { --hero-h: clamp(280px, 45vh, 520px); }
    /* Yan malzemeli (araç kutusu / madde) panoramik hero: yan panelin altı ile kontrol çubuğu arasında güvenli boşluk kalsın */
    .slide--hero-wide.slide--split .visual-hero--wide, .slide--hero-wide.slide--split .hero-image--wide { --hero-h: clamp(280px, 41vh, 520px); }
}

/* Dar ekran: tek sütun, görseller tam genişlik, yatay taşma yok */
@media (max-width: 720px) {
    .visual { margin-top: var(--space-4); --vi-text: 1rem; --vi-icon: 30px; --vi-block: 40px; --vi-node: 1rem; }
    .visual-flow__node { min-height: 42px; padding: 4px 12px; }
    .visual-arrow { width: 24px; height: 16px; }
    .visual-blocks { max-width: none; }
    .visual-block { border-radius: 8px; padding-left: var(--space-3); }
    .visual-block--nested { margin-left: var(--space-4); }
    .visual-block__flag { width: 28px; height: 28px; font-size: 1rem; }
    .visual-compare { grid-template-columns: 1fr; gap: var(--space-4); }
    .visual-choice__branches { gap: var(--space-2); }
    .visual-choice__leaf { min-width: 0; padding: 6px 10px; }
    .visual-choice__label { font-size: 0.8125rem; }
    .visual-memory { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .visual-memory__arrow { display: none; }
    .visual-people { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
    .visual-people__figure { width: 32px; height: 32px; }
    .visual-people__figure--yetiskin { width: 38px; height: 38px; }
    .visual-people__figure--cocuk { width: 28px; height: 28px; }
    .match__icon { width: 28px; height: 28px; }
    .tf__icon { width: 40px; height: 40px; }
    .wheel__choices { grid-template-columns: 1fr 1fr; max-width: none; }
    .wheel__choice { min-height: 48px; font-size: 1.125rem; }
    /* Hero: resim tam genişlik, etiketler resmin altında düz çip listesi (390 px'te resim üstü yazı okunmaz olurdu) */
    .visual-hero__svg foreignObject { display: none; }
    .visual-hero__list { display: flex; }
    .hero-image { display: block; }
    .hero-image__img { width: 100%; max-height: none; }
    .support-image__img { width: 100%; max-height: none; }
    .hero-image__labels { position: static; display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: var(--space-2); font-size: 0.9375rem; }
    .hero-image__labels .visual-hero__label { position: static; width: auto; height: auto; padding: 3px 10px; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: 999px; opacity: 1; transform: none; font-size: 1em; }
    .slide__stage { margin-top: var(--space-4); }
}

/* --------------------------------------------------------------------------
   7. DERS PROGRAMI — haftalık çalışma ekranı
   Ders saatleri bir kez tanımlanır; tablo satırları o saatlerdir, kolonlar günler.
   Sınıfa göre rastgele renk yoktur: bloklar beyaz yüzey + ince mavi vurgudur.
   -------------------------------------------------------------------------- */
.btn--sm { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.input--sm { min-height: 34px; padding: 0 var(--space-2); font-size: var(--text-sm); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 0.75rem; font-weight: 600; }
.section__lead { flex: 1 1 100%; margin: 0; color: var(--color-text-2); font-size: var(--text-sm); max-width: var(--measure); }

/* Program yok durumu */
.start { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-5); padding: var(--space-5); margin-top: var(--space-5); }
.start__title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.start__text { margin: var(--space-1) 0 0; color: var(--color-text-2); max-width: 64ch; }

/* Ders saatleri */
.slotset { margin-top: var(--space-5); padding: var(--space-5); }
.slotset__head { margin-bottom: var(--space-4); }
.slotset__summary { display: flex; align-items: baseline; gap: var(--space-3); list-style: none; cursor: pointer; }
.slotset__summary::-webkit-details-marker { display: none; }
.slotset__summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--color-text-3); border-bottom: 1.5px solid var(--color-text-3); transform: rotate(45deg); }
.slotset[open] > .slotset__summary::after { transform: rotate(225deg); }
.slotset__title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.slotset__meta { color: var(--color-text-3); font-size: var(--text-sm); }
.slotset__lead { margin: var(--space-2) 0 0; color: var(--color-text-2); font-size: var(--text-sm); max-width: 54ch; }
.slotset--setup .slotset__lead { margin-bottom: 0; }
.slotform { margin-top: var(--space-4); }
.slotform__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: var(--space-3) var(--space-7);
}
.slotform__row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 1rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.slotform__no { color: var(--color-text-2); font-size: var(--text-sm); font-weight: 600; }
.slotform__row .input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.slotform__dash { color: var(--color-text-3); text-align: center; }
.slotform__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* Haftalık tablo */
.timetable { margin-top: var(--space-5); padding: var(--space-5); }
.timetable__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.timetable__title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.timetable__hint { margin: 0; color: var(--color-text-3); font-size: var(--text-sm); }
.timetable__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px; }
.timetable__table th { text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); }
.timetable__table thead th { padding: 0 var(--space-2) var(--space-1); }
.timetable__corner { width: 118px; color: var(--color-text-3); font-weight: 400; }
.timetable__slot { vertical-align: middle; padding-right: var(--space-2); }
.timetable__slot-name { display: block; color: var(--color-text); }
.timetable__slot-range { display: block; color: var(--color-text-3); font-size: 0.8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.timetable__cell { padding: 0; }
.timetable__day { display: none; }

/* Hücre: boşsa sınıf ata, doluysa küçük düzenleme paneli */
.cell { position: relative; }
.cell > summary { list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.cell > summary::-webkit-details-marker { display: none; }
.cell > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cell[open] > summary { box-shadow: 0 0 0 2px var(--color-accent-soft), 0 0 0 3px var(--color-accent); }
.cell__add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; color: var(--color-text-3); background: var(--color-surface-muted); border: 1px dashed var(--color-border-strong); }
.cell__add:hover { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.cell__add-text { display: none; font-size: var(--text-sm); }
.cell__chip { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); box-shadow: var(--shadow-1); }
.cell__chip:hover { border-color: var(--color-border-strong); border-left-color: var(--color-accent-hover); }
.cell__class { font-weight: 600; font-size: var(--text-sm); }
.cell__place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ders adı erken kesilmesin: iki satıra kadar okunur, sonra kısalır. */
.cell__course { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-text-2); font-size: var(--text-sm); line-height: 1.3; }
.cell__place { color: var(--color-text-3); font-size: 0.8125rem; }
.cell__pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 276px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.timetable__table td:nth-last-child(-n+2) .cell__pop { left: auto; right: 0; }
.cell__pop-title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.cell__pop-title span { color: var(--color-text-3); font-weight: 400; }
.cell__form { display: grid; gap: var(--space-2); }
.cell__form .input { width: 100%; }
.cell__dup { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.cell__dup-label { color: var(--color-text-2); font-size: var(--text-sm); }
.cell__days { display: flex; flex-wrap: wrap; gap: 6px; }
.daybox { position: relative; display: inline-flex; }
.daybox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.daybox span { display: inline-flex; justify-content: center; min-width: 40px; padding: 6px 8px; color: var(--color-text-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.daybox input:checked + span { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); font-weight: 600; }
.daybox input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cell__remove { margin-top: var(--space-2); }

/* Günü kopyala */
.copyday { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.copyday__label { color: var(--color-text-2); font-size: var(--text-sm); font-weight: 600; }
.copyday .input { width: auto; }
.copyday__arrow { display: inline-flex; color: var(--color-text-3); }

/* Mobil gün listesi */
.daypick { display: flex; gap: 6px; }
.daypick__item { flex: 1 1 0; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); color: var(--color-text-2); text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.daypick__item.is-active { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); font-weight: 600; }
.dayplan { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.dayplan__item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.dayplan__slot { display: block; font-size: var(--text-sm); font-weight: 600; }
.dayplan__range { display: block; color: var(--color-text-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.dayplan__cell { min-width: 0; }

@media (max-width: 1100px) {
    .timetable__table { border-spacing: 4px; }
    .timetable__corner { width: 104px; }
    .cell__chip { padding: var(--space-2); }
    .cell__course { font-size: 0.8125rem; }
    .cell__pop { width: 252px; }
}

@media (max-width: 860px) {
    .timetable__week { display: none; }
    .timetable__day { display: block; }
    .cell__pop { position: static; width: auto; margin-top: var(--space-2); }
    .cell__add { justify-content: flex-start; padding: 0 var(--space-3); min-height: 56px; }
    .cell__add-text { display: inline; }
    .cell__chip { min-height: 56px; }
    .copyday { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .copyday__label { grid-column: 1 / -1; }
    .copyday .input { width: 100%; }
    .copyday .btn { grid-column: 1 / -1; }
}

/* Akademik takvim — ikincil, liste; form kapalı */
.acad { margin-top: var(--space-6); }
.acad__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.acad__title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.acad__year { margin: 4px 0 0; color: var(--color-text-2); font-size: var(--text-sm); }
.acad__composer { position: relative; flex: 0 0 auto; }
.acad__composer > summary { list-style: none; }
.acad__composer > summary::-webkit-details-marker { display: none; }
.acad__composer-panel, .acad__edit-panel {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}
.acad__composer-panel { position: absolute; right: 0; z-index: 20; width: min(380px, calc(100vw - 48px)); }
.acad__panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.acad__list { list-style: none; margin: 0; padding: 0; }
.acad__item {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    align-items: start;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.acad__item:first-child { border-top: 0; }
.acad__when { color: var(--color-text-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; padding-top: 2px; }
.acad__name { margin: 0; font-size: var(--text-md); font-weight: 600; }
.acad__type { display: block; margin-top: 2px; color: var(--color-text-3); font-size: var(--text-sm); }
.acad__note { display: block; margin-top: 2px; color: var(--color-text-3); font-size: var(--text-sm); }
.acad__actions { position: relative; display: flex; align-items: flex-start; gap: var(--space-1); }
.acad__edit { position: relative; }
.acad__edit > summary { list-style: none; }
.acad__edit > summary::-webkit-details-marker { display: none; }
.acad__edit-panel { position: absolute; right: 0; z-index: 20; width: min(380px, calc(100vw - 48px)); }
.acad__empty { margin: 0; padding: var(--space-4) var(--space-5); color: var(--color-text-2); font-size: var(--text-sm); }
.acad-form { display: grid; gap: var(--space-3); min-width: 0; }
.acad-form .field { margin: 0; min-width: 0; }
.acad-form .input { min-width: 0; max-width: 100%; }
.acad-form__actions { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
    .acad__head { flex-wrap: wrap; }
    .acad__composer { width: 100%; }
    .acad__composer > summary { width: 100%; justify-content: center; }
    .acad__composer-panel, .acad__edit-panel { position: static; width: auto; }
    .acad-form .form__row { grid-template-columns: 1fr; }
    .acad__item { grid-template-columns: 1fr auto; }
    .acad__when { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .slotform__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: var(--space-3); }
    .slotform__actions { justify-content: stretch; }
    .slotform__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
    .slotset, .timetable, .start { padding: var(--space-4); }
    .dayplan__item { grid-template-columns: 1fr; gap: var(--space-1); }
    .daypick__item { font-size: 0.8125rem; }
    .acad__item { padding: var(--space-3) var(--space-4); }
    .acad__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   8. BUGÜN — telefon / PWA açılış ekranı (/bugun)
   Tek odak: şimdiki ya da sıradaki ders, sınıfın kaldığı yer, tek güçlü CTA, günün listesi.
   Tipografi öncelikli; dekorasyon ya da iç içe kart yoktur. Sayfa zemini ve global token'lar
   değişmez. Safe-area (çentik / ana ekran göstergesi) yalnız bu sayfanın iç boşluğuna eklenir;
   çekmecenin kendi alt boşluğu (drawer__panel) olduğu gibi kalır.
   -------------------------------------------------------------------------- */
.shell .page--today {
    max-width: 640px;
    padding:
        calc(var(--space-5) + env(safe-area-inset-top, 0px))
        calc(var(--space-4) + env(safe-area-inset-right, 0px))
        calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
        calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
.today-page { display: flex; flex-direction: column; gap: var(--space-5); }
.today-page__head { padding: 0 var(--space-1); }
.today-page__hello { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--color-text); }
.today-page__date { margin: 2px 0 0; color: var(--color-text-3); font-size: var(--text-sm); }

/* Odak: şimdiki / sıradaki ders */
.now {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
.now__kicker { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.now__state {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-accent);
}
.now__until { color: var(--color-text-3); font-size: var(--text-sm); }
.now__slot { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: 600; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.now__course { margin: 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text); overflow-wrap: anywhere; }
.now__range { margin: var(--space-2) 0 0; color: var(--color-text-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.now__position { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.now__position-label { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); }
.now__position-main { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.now__position-main--none { font-weight: 500; color: var(--color-text-2); }
.now__position-sub { margin: 2px 0 0; color: var(--color-text-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.now__cta { margin-top: var(--space-5); min-height: 56px; font-size: var(--text-md); font-weight: 600; }

/* Gün bitti / bugün ders yok: aynı kart dili, daha kompakt; ayırıcı yok, ikincil eylem hafif (ghost) */
.now--done, .now--empty { padding: var(--space-4) 20px; box-shadow: none; }
.now--done .now__kicker, .now--empty .now__kicker { margin-bottom: var(--space-2); }
.now--done .now__state { color: var(--color-success); }
.now--empty .now__state { color: var(--color-text-3); }
.now--done .now__course, .now--empty .now__course { font-size: var(--text-lg); letter-spacing: -0.01em; }
.now--done .now__range, .now--empty .now__range { margin-top: 2px; font-size: 0.9375rem; color: var(--color-text-2); }
.now__next { margin-top: var(--space-4); }
.now__next .now__position-main { font-size: var(--text-base); }
.now__next .now__position-sub { font-size: var(--text-sm); }
.now__action {
    margin: var(--space-3) 0 0 -10px; min-height: var(--control); padding: 0 10px;
    font-size: var(--text-sm); font-weight: 600;
}

/* Günün listesi: saat · sınıf · ders · kaldığı yer; geçen ders "Tamamlandı", süren ders "Şimdi" */
.agenda__title { margin: 0 0 var(--space-3); padding: 0 var(--space-1); font-size: var(--text-base); font-weight: 600; color: var(--color-text-2); }
.agenda__list { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.agenda__item + .agenda__item { border-top: 1px solid var(--color-border); }
/* Satır: [saat] [sınıf · ders            ]
          [     ] [kaldığı yer …  durum   ]  — ad tam genişlik, kaldığı yer kısaltılır, durum ikinci satırın sağında */
.agenda__row {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: var(--space-3); row-gap: 2px; align-items: center;
    min-height: 64px; padding: var(--space-3) var(--space-4); color: inherit;
}
a.agenda__row:hover { background: var(--color-surface-muted); text-decoration: none; }
.agenda__time { grid-row: 1 / 3; display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.agenda__start { font-size: var(--text-base); font-weight: 600; color: var(--color-text); }
.agenda__end { font-size: 0.75rem; color: var(--color-text-3); }
.agenda__name { grid-column: 2 / 4; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.agenda__pos { grid-column: 2; min-width: 0; font-size: 0.8125rem; color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__done, .agenda__now { grid-column: 3; display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.agenda__done { color: var(--color-success); }
.agenda__done .icon { width: 14px; height: 14px; }
.agenda__now { color: var(--color-accent); }
.agenda__item--past .agenda__start, .agenda__item--past .agenda__name { font-weight: 500; color: var(--color-text-2); }
.agenda__item--past .agenda__end, .agenda__item--past .agenda__pos { color: var(--color-text-3); }
.agenda__item--current .agenda__row { box-shadow: inset 3px 0 0 var(--color-accent); }

/* Telefon: "Tamamlandı" sözcüğü yalnız ekran okuyucuya; işaret + soluk satır yeter, kaldığı yer satırı sıkışmaz */
@media (max-width: 480px) {
    .agenda__done-text {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}