/* Tasarım tokenları — v3 "Kâğıt & Orman" (ChatGPT UI danışmanlığı, 2026-10-12).
   Ana renk: düşük doygunluklu koyu orman yeşili (uzun yazma oturumunda sakin, güçlü değer kontrastı).
   Vurgu: sıcak kayısı/bakır (yeşille sıcak–soğuk ayrışması; yalnız küçük kişilik öğeleri ve hedeflerde).
   Nötrler: sıcak kırık beyaz ("kâğıt") ve yeşil karakterli koyular. Bilgi rengi de mavi değil, taş tonudur.
   *-text renkleri ilgili *-bg üzerinde, on-primary primary üzerinde kullanılır (WCAG AA hedefi). */
:root {
    color-scheme: light;
    --color-bg: #F7F4ED;
    --color-surface: #FFFCF6;
    --color-surface-raised: #FFFFFF;
    --color-sunken: #EFEAE0;
    --color-text: #242923;
    --color-text-muted: #555D53;
    --color-border: #D9D3C6;
    --color-border-strong: #777E72;
    --color-control-border: #666F61;
    --color-focus: #24533D;
    --color-primary: #24533D;
    --color-primary-hover: #193E2D;
    --color-on-primary: #FFFFFF;
    --color-primary-bg: #E4EDE2;
    --color-primary-text: #24452F;
    --color-accent-bg: #F5DFC8;
    --color-accent-text: #713C18;
    --color-success-bg: #E6F0E2; --color-success-text: #28532A; --color-success-border: #527449;
    --color-warning-bg: #FFF0CC; --color-warning-text: #694500; --color-warning-border: #896000;
    --color-error-bg: #FBE5DF; --color-error-text: #872D20; --color-error-border: #A34837;
    --color-info-bg: #EDE8E0; --color-info-text: #50473E; --color-info-border: #7C7063;
    --shadow-card: 0 1px 2px rgb(36 41 35 / 0.06);

    --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
    --radius-card: 14px;
    --radius-control: 10px;
    --nav-h: 64px;
    --sidebar-w: 224px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #171C18; --color-surface: #202720; --color-surface-raised: #2A332B; --color-sunken: #131714;
        --color-text: #F3F2E9; --color-text-muted: #BEC7B9;
        --color-border: #39443A; --color-border-strong: #889480; --color-control-border: #9BA68F;
        --color-focus: #ACD5AE; --color-primary: #ACD5AE; --color-primary-hover: #C1E3BC; --color-on-primary: #172B1D;
        --color-primary-bg: #293E2D; --color-primary-text: #C4E4BF;
        --color-accent-bg: #493222; --color-accent-text: #F5CCA3;
        --color-success-bg: #263B28; --color-success-text: #C5E7BB; --color-success-border: #90B982;
        --color-warning-bg: #43351A; --color-warning-text: #F6DA94; --color-warning-border: #C4A45B;
        --color-error-bg: #472924; --color-error-text: #FFC4B4; --color-error-border: #DE9482;
        --color-info-bg: #37312B; --color-info-text: #E1D6C7; --color-info-border: #B3A38F;
        --shadow-card: none;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #171C18; --color-surface: #202720; --color-surface-raised: #2A332B; --color-sunken: #131714;
    --color-text: #F3F2E9; --color-text-muted: #BEC7B9;
    --color-border: #39443A; --color-border-strong: #889480; --color-control-border: #9BA68F;
    --color-focus: #ACD5AE; --color-primary: #ACD5AE; --color-primary-hover: #C1E3BC; --color-on-primary: #172B1D;
    --color-primary-bg: #293E2D; --color-primary-text: #C4E4BF;
    --color-accent-bg: #493222; --color-accent-text: #F5CCA3;
    --color-success-bg: #263B28; --color-success-text: #C5E7BB; --color-success-border: #90B982;
    --color-warning-bg: #43351A; --color-warning-text: #F6DA94; --color-warning-border: #C4A45B;
    --color-error-bg: #472924; --color-error-text: #FFC4B4; --color-error-border: #DE9482;
    --color-info-bg: #37312B; --color-info-text: #E1D6C7; --color-info-border: #B3A38F;
    --shadow-card: none;
}
:root {
    --color-diff-added-bg: var(--color-success-bg); --color-diff-added-text: var(--color-success-text);
    --color-diff-removed-bg: var(--color-error-bg); --color-diff-removed-text: var(--color-error-text);
}

/* ---------- Temel ---------- */
html, body {
    font-family: var(--font-ui);
    font-size: 16px; line-height: 1.5;
    background: var(--color-bg); color: var(--color-text);
    -webkit-text-size-adjust: 100%;
}
a { color: var(--color-primary-text); }
:root[data-theme="dark"] a { color: var(--color-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: var(--color-primary); } }

h1:focus { outline: none; }
.lead { color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.muted { color: var(--color-text-muted); }
.small { font-size: 14px; line-height: 20px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Kabuk: masaüstü öncelikli ----------
   ≥1024 px: sol kenar çubuğu + geniş çalışma alanı. <1024 px: üst başlık + alt gezinme. */
h1 { font-size: 30px; line-height: 36px; font-weight: 700; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
h2 { font-size: 20px; line-height: 28px; font-weight: 650; margin: var(--space-5) 0 var(--space-3); }
h3 { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0 0 var(--space-2); }
.app-shell { min-height: 100dvh; }
.app-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.header-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); color: var(--color-text-muted) !important; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 17px; text-decoration: none; color: var(--color-text) !important; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-read); font-size: 16px; font-weight: 700;
}
.app-main { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-6)); }
.app-main:has(.layout-wide) { max-width: 1200px; }
.app-main:has(.layout-table) { max-width: 1360px; }
.app-main:has(.layout-full) { max-width: none; }

.sidebar { display: none; }
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; font-weight: 600; text-decoration: none; color: var(--color-text-muted) !important; min-width: 44px;
}
.bottom-nav a .icon { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--color-primary-text) !important; }
.bottom-nav a.active .nav-pill { background: var(--color-primary-bg); }
.nav-pill { padding: 2px 16px; border-radius: 999px; display: grid; place-items: center; }

@media (min-width: 1024px) {
    .app-header, .bottom-nav { display: none; }
    .sidebar {
        display: flex; flex-direction: column; gap: var(--space-1);
        position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 10;
        padding: var(--space-5) var(--space-3); background: var(--color-sunken); border-right: 1px solid var(--color-border);
    }
    .sidebar .brand { padding: 0 var(--space-3) var(--space-5); }
    .side-link {
        display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3);
        border-radius: var(--radius-control); text-decoration: none; font-weight: 600; color: var(--color-text-muted) !important;
    }
    .side-link:hover { background: var(--color-surface-raised); color: var(--color-text) !important; }
    .side-link.active { background: var(--color-primary-bg); color: var(--color-primary-text) !important; }
    .sidebar .spacer { flex: 1; }
    .side-note { padding: var(--space-3); font-size: 13px; color: var(--color-text-muted); }
    .app-content { margin-left: var(--sidebar-w); }
    .app-main { padding: var(--space-6) var(--space-6) var(--space-7); }
    body.focus-mode .sidebar { display: none; }
    body.focus-mode .app-content { margin-left: 0; }
}

.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Yüzeyler ---------- */
.card-box {
    display: block; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: 20px; margin-bottom: var(--space-3);
    box-shadow: var(--shadow-card); color: inherit; text-decoration: none;
}
a.card-box { color: inherit !important; }
a.card-box:hover { border-color: var(--color-control-border); }
.card-box.tight { padding: var(--space-4); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.section-title h2 { margin-bottom: var(--space-3); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.line { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.grow { flex: 1; min-width: 0; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field-label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--color-text-muted); font-weight: 400; }
.form-control, .form-select {
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
    font-size: 16px; min-height: 48px; padding: 10px 14px;
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 0.8; }
.form-control:focus, .form-select:focus {
    background: var(--color-surface); color: var(--color-text);
    border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 30%, transparent);
}
.form-control-lg { font-size: 18px; min-height: 52px; }
textarea.form-control { min-height: 12rem; line-height: 1.6; resize: vertical; }
.validation-message, .form-error { color: var(--color-error-text); font-size: 14px; }

/* ---------- Butonlar ---------- */
.btn { min-height: 44px; border-radius: var(--radius-control); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.btn-lg { min-height: 52px; font-size: 17px; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-primary:disabled { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); opacity: 0.45; }
.btn-secondary-soft { background: var(--color-primary-bg); color: var(--color-primary-text) !important; border: 1px solid transparent; }
.btn-secondary-soft:hover { border-color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-text) !important; border: 1px solid var(--color-control-border); }
.btn-ghost:hover { background: var(--color-surface-raised); }
.btn-text { background: none; border: none; color: var(--color-primary-text) !important; padding-left: 0; padding-right: 0; justify-content: flex-start; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-text { color: var(--color-primary) !important; } }
.w-100 { width: 100%; }

/* ---------- Rozetler ve durumlar ---------- */
.badge-soft { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--color-primary-bg); color: var(--color-primary-text); }
.badge-accent { background: var(--color-accent-bg); color: var(--color-accent-text); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-error { background: var(--color-error-bg); color: var(--color-error-text); }
.badge-muted { background: var(--color-surface-raised); color: var(--color-text-muted); }
.notice { border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning-text); }
.notice-info { background: var(--color-info-bg); color: var(--color-info-text); }
.notice-success { background: var(--color-success-bg); color: var(--color-success-text); }

/* ---------- Bugün: plan ---------- */
.plan-hero { background: var(--color-primary-bg); border: none; }
.plan-hero .plan-meta { color: var(--color-primary-text); font-weight: 600; }
.progress-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--color-surface) 0);
    display: grid; place-items: center; }
.progress-ring > span { width: 50px; height: 50px; border-radius: 50%; background: var(--color-primary-bg); display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--color-primary-text); }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text) !important; min-height: 56px; }
.step .step-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; background: var(--color-surface-raised); color: var(--color-text-muted); }
.step.done .step-dot { background: var(--color-success-bg); color: var(--color-success-text); }
.step.current { border-color: var(--color-primary); }
.step.current .step-dot { background: var(--color-primary); color: var(--color-on-primary); }
.step .step-sub { font-size: 14px; color: var(--color-text-muted); }

/* ---------- Kelimeler ---------- */
.chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; }
.chips::-webkit-scrollbar { display: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }
.chip { flex: none; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-control-border); background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.word-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.word-row .lemma { font-weight: 700; font-size: 18px; word-break: break-word; }
.word-row .meaning { color: var(--color-text-muted); word-break: break-word; }
.list-plain { list-style: none; margin: 0; padding-left: 0; }
.card-box.list-plain { padding: 4px 20px; }
.list-divided > * + * { border-top: 1px solid var(--color-border); }
.list-divided > * { padding: var(--space-3) 0; }

/* ---------- Kart çalışma ---------- */
.study-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.bar { flex: 1; height: 8px; border-radius: 999px; background: var(--color-surface-raised); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.flashcard { min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-6) var(--space-5); }
.flashcard .direction { margin-bottom: var(--space-4); }
.flashcard .prompt { font-size: 32px; line-height: 40px; font-weight: 700; word-break: break-word; }
.flashcard .context { margin-top: var(--space-3); font-style: italic; color: var(--color-text-muted); }
.flashcard .answer { width: 100%; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--color-border); font-size: 20px; }
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rate { min-height: 64px; border-radius: var(--radius-control); border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.rate small { font-weight: 500; font-size: 13px; opacity: 0.9; }
.rate-again { background: var(--color-error-bg); color: var(--color-error-text); }
.rate-hard { background: var(--color-warning-bg); color: var(--color-warning-text); }
.rate-good { background: var(--color-success-bg); color: var(--color-success-text); }
.rate-easy { background: var(--color-info-bg); color: var(--color-info-text); }
.rate:hover { border-color: currentColor; }
.rate:disabled { opacity: 0.5; }

/* ---------- Yazma ---------- */
.target-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.target-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.target-item .mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 2px; background: var(--color-surface-raised); color: var(--color-text-muted); font-size: 13px; font-weight: 700; }
.target-item.used .mark { background: var(--color-success-bg); color: var(--color-success-text); }
.editor-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.disclosure > summary { cursor: pointer; font-weight: 600; color: var(--color-primary-text); list-style: none; min-height: 44px; display: flex; align-items: center; }
.disclosure > summary::-webkit-details-marker { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .disclosure > summary { color: var(--color-primary); } }

.text-block { white-space: pre-wrap; word-break: break-word; line-height: 1.7; font-size: 17px; }
.diff-added { background: var(--color-diff-added-bg); color: var(--color-diff-added-text); text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; padding: 0 2px; }
.diff-removed { background: var(--color-diff-removed-bg); color: var(--color-diff-removed-text); text-decoration: line-through; border-radius: 4px; padding: 0 2px; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: var(--color-sunken); border: 1px solid var(--color-border); padding: 4px; border-radius: var(--radius-control); margin-bottom: var(--space-4); }
.tabs button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: none; border-radius: 9px; min-height: 44px; padding: 0 6px; font-weight: 600; font-size: 14px; color: var(--color-text-muted); }
.tabs button[aria-selected="true"] { background: var(--color-surface-raised); color: var(--color-primary-text); box-shadow: inset 0 -3px 0 var(--color-primary); }

/* ---------- İlerleme ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); }
.stat .value { font-size: 28px; line-height: 34px; font-weight: 700; }
.stat .label { color: var(--color-text-muted); font-size: 14px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.week .day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.week .dot { width: 32px; height: 32px; border-radius: 10px; background: var(--color-surface-raised); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.week .dot.on { background: var(--color-primary); color: var(--color-on-primary); }
.week .today .dot { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.meter { display: flex; align-items: center; gap: var(--space-3); }
.meter .bar { height: 10px; }

.empty { text-align: center; padding: var(--space-6) var(--space-4); }
.empty .icon { width: 40px; height: 40px; color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* ---------- Blazor ---------- */
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { border-color: var(--color-error-text) !important; }
.blazor-error-boundary { background: var(--color-error-bg); color: var(--color-error-text); padding: 1rem; border-radius: var(--radius-control); }
.blazor-error-boundary::after { content: "Bir hata oluştu."; }
#blazor-error-ui {
    background: var(--color-warning-bg); color: var(--color-warning-text); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Yazma: kompakt hedef kelime çipleri ve açıklama */
.target-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.target-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--color-surface-raised); font-weight: 600; }
.target-chip .mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); color: var(--color-text-muted); }
.target-chip .mark .icon { width: 16px; height: 16px; }
.target-chip.used { background: var(--color-success-bg); color: var(--color-success-text); }
.target-chip.used .mark { background: var(--color-success-text); color: var(--color-success-bg); }
.legend { font-size: 13px; color: var(--color-text-muted); margin-top: var(--space-2); }
.week .date { font-size: 11px; }
.icon.small { width: 14px; height: 14px; vertical-align: -2px; }

/* Klavye açıkken (metin alanı odakta) alt gezinme gizlenir; ekran klavyesiyle sabit çubuk içeriği örtmesin. */
@media (max-width: 767px) and (pointer: coarse) {
    body.typing .bottom-nav { display: none; }
    body.typing .app-header { position: static; }
    body.typing .app-main { padding-bottom: var(--space-6); }
}

/* ---------- v3: masaüstü sayfa düzenleri ---------- */
.page-grid { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
    .page-grid.two { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Kelime tablosu (masaüstü) / özet satırlar (telefon) */
.word-table { width: 100%; border-collapse: collapse; }
.word-table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-strong); }
.word-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.word-table tr:hover td { background: var(--color-primary-bg); }
.word-table .lemma { font-weight: 700; }
.word-table a { color: inherit !important; text-decoration: none; }
.word-table .example { font-family: var(--font-read); font-style: italic; color: var(--color-text-muted); }
.table-card { padding: 0; overflow: hidden; }

/* Essay çalışma alanı */
.workspace { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
    .workspace { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "editor task" "editor submit"; align-items: start; row-gap: var(--space-4); }
    .workspace .editor-column { grid-area: editor; }
    .workspace .task-panel { grid-area: task; margin: 0; }
    .workspace .submit-panel { grid-area: submit; margin: 0; position: sticky; top: var(--space-5); }
    body.focus-mode .workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "editor"; }
    body.focus-mode .workspace .side-panel { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .workspace { grid-template-columns: minmax(0, 1fr) 280px; } }
.editor-column { max-width: 46rem; width: 100%; margin: 0 auto; }
body.focus-mode .editor-column { max-width: 44rem; }
textarea.essay-editor {
    font-family: var(--font-ui); font-size: 18px; line-height: 1.7; min-height: 60vh;
    padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-raised);
}
@media (max-width: 1023px) { textarea.essay-editor { min-height: 14rem; padding: var(--space-4); } }
.status-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: 14px; color: var(--color-text-muted); padding: var(--space-2) var(--space-1); }
.save-state { display: inline-flex; align-items: center; gap: 6px; }
.save-state.error { color: var(--color-error-text); font-weight: 600; }
.work-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.work-head .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.focus-toggle { display: none; }
@media (min-width: 1024px) { .focus-toggle { display: inline-flex; } }

/* Uzun okuma: gönderilmiş metinler ve karşılaştırma */
.text-block { font-family: var(--font-read); font-size: 19px; line-height: 1.65; max-width: 70ch; }
.compare-grid { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
    .compare-grid { grid-template-columns: 1fr 1fr; }
    .compare-tabs-mobile { display: none !important; }
}
@media (max-width: 1023px) { .compare-grid .pane:not(.active) { display: none; } }
.diff-added::before { content: "+"; font-weight: 700; margin-right: 1px; }
.diff-removed::before { content: "−"; font-weight: 700; margin-right: 1px; }
@media (min-width: 1024px) {
    .compare-grid .mobile-only { display: none; }
    .compare-grid .span-all { grid-column: 1 / -1; }
}
.desktop-only { display: none !important; }
@media (min-width: 1024px) {
    .desktop-only { display: block !important; }
    table.desktop-only { display: table !important; }
    .phone-only { display: none !important; }
}

/* Öğretmen değerlendirmesi */
.report-panel h4 { font-size: 15px; }
.priority-item { padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.quote { font-family: var(--font-read); font-style: italic; margin: 6px 0; }
.report-status { display: flex; align-items: center; gap: var(--space-2); }

/* v3.1 — 1024–1279 px: kenar çubuğu yalnız ikon; editöre yer açılır (ChatGPT v3 RET düzeltmesi). */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root { --sidebar-w: 72px; }
    .sidebar { padding: var(--space-5) var(--space-2); align-items: center; }
    .sidebar .side-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sidebar .brand { padding: 0 0 var(--space-5); }
    .side-link { width: 48px; justify-content: center; padding: 0; }
    .app-main { padding: var(--space-5) var(--space-5) var(--space-7); }
}
/* Görev paneli kullanıcı tarafından gizlenebilir (masaüstü). */
@media (min-width: 1024px) {
    body.panel-hidden .workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "editor"; }
    body.panel-hidden .workspace .side-panel { display: none; }
}
.panel-toggle { display: none; }
@media (min-width: 1024px) { .panel-toggle { display: inline-flex; } }
/* Sayaç ve kayıt durumu biraz daha büyük (ChatGPT önerisi). */
.status-line { font-size: 15px; }
/* Fark işaretleri (+/−) kopyalanan metne karışmaz: içerik CSS'ten gelir ve seçilemez. */
.diff-added::before, .diff-removed::before { user-select: none; }