@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Onest:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   PhysioTR Akademik — Proje 1 · AI destekli İSG & fizyoterapi RKÇ
   "e-kitap" teması — 2026-07-28 revizyonu (öncesi: earth-tone / toprak)

   Dil: kâğıt zemin, hairline cetveller, mono künyeler, tek mercan aksan.
   Renk yalnız işlev taşır — durum, seçim, yapı çizgisi. Süs gradyanı,
   parıltı (glow) ve renkli gölge yok; derinlik tek bir yumuşak --shadow ile
   verilir. Tüm rakamlar mono + tabular-nums: tabloda ve KPI'da sütun kayması
   olmaz, ölçüm değerleri okunaklı hizalanır.

   Tokenlar portal (akademik.physiotr.com.tr/index.html) ile birebir aynıdır;
   portal, projeler dizini ve proje içleri aynı dili konuşur.

   Not: aşağıdaki eski değişken adları (--accent, --card-bg, --bg-1 …) sayfa
   içi <style> blokları ve markup tarafından kullanıldığı için KORUNDU;
   yalnızca değerleri e-kitap paletine yeniden bağlandı.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── e-kitap çekirdeği ────────────────────────────────────────────── */
    --paper: #f4f4f3;        /* sayfa zemini */
    --paper-deep: #e9e9e7;   /* ikincil blok */
    --surface: #fcfcfb;      /* panel/kart levhası */
    --ink: #1c1d1f;
    --ink-soft: #5c5e62;
    --line: rgba(28, 29, 31, 0.15);
    --line-faint: rgba(28, 29, 31, 0.06);
    --line-strong: rgba(28, 29, 31, 0.4);
    --acid: #e8e8e5;         /* e-okuyucu fosforlu kalem vurgusu */
    --acid-ink: #2b2c2e;
    --coral: #ff6846;        /* TEK aksan — yalnız çizgi/işaret */
    --coral-text: #c8391a;   /* küçük metinde AA sürümü */
    --sage: #d6d6d3;
    --shadow: 0 24px 70px rgba(28, 29, 31, 0.1);
    --radius: 18px;
    --radius-sm: 10px;

    --serif: "Newsreader", Georgia, serif;
    --sans: "Onest", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* Dolu yüzeylerin üstüne binen metin. Koyu temada ters çevrilir, böylece
       .bg-success / .badge.bg-danger gibi Bootstrap yardımcıları iki temada
       da AA kontrastını korur. */
    --on-solid: #fcfcfb;

    color-scheme: light;

    /* ── Eski isimler → yeni palet (markup bunlara bağlı) ─────────────── */
    --bg-1: var(--paper);
    --bg-2: var(--paper);
    --bg-3: var(--paper-deep);

    --ink-strong: #0f0f0e;
    --ink-softer: #85827a;

    --accent: var(--coral);
    --accent-hi: #ff8b70;
    --accent-2: #28694b;      /* onay / tamamlandı */
    --accent-2-hi: #3d8a66;
    --warn: #875d14;          /* uyarı / beklemede */
    --warn-hi: #a97a26;
    --danger: #9a342d;        /* hata / iptal */
    --danger-hi: #bc554c;
    --violet: #6b4a5e;        /* dördüncü ayrım tonu (grup/dönem) */
    --violet-hi: #8e6a7c;

    --card-bg: var(--surface);
    --card-bg-soft: var(--paper-deep);
    --card-border: var(--line);
    --card-border-soft: var(--line-faint);
    --card-hi: rgba(255, 104, 70, 0.08);

    --rule: var(--line);
    --rule-ink: var(--ink);   /* kalın künye cetveli */

    /* Durum zeminleri — kâğıda oturan soluk yıkamalar */
    --success-soft: #e4f1ea;
    --warn-soft: #f1f0ec;
    --danger-soft: #f4ecec;
    --violet-soft: #f1e8ec;
    --accent-soft: var(--acid);

    /* ── Bootstrap 5 değişkenlerinin e-kitap ezilmesi ─────────────────── */
    --bs-blue: #c8391a;
    --bs-indigo: #6b4a5e;
    --bs-purple: #6b4a5e;
    --bs-pink: #8e6a7c;
    --bs-red: #9a342d;
    --bs-orange: #c8391a;
    --bs-yellow: #875d14;
    --bs-green: #28694b;
    --bs-teal: #28694b;
    --bs-cyan: #875d14;

    --bs-primary: #c8391a;
    --bs-primary-rgb: 200, 57, 26;
    --bs-secondary: #5c5e62;
    --bs-secondary-rgb: 92, 90, 82;
    --bs-success: #28694b;
    --bs-success-rgb: 40, 105, 75;
    --bs-info: #875d14;
    --bs-info-rgb: 135, 93, 20;
    --bs-warning: #dcc373;
    --bs-warning-rgb: 220, 195, 115;
    --bs-danger: #9a342d;
    --bs-danger-rgb: 154, 52, 45;
    --bs-light: #e9e9e7;
    --bs-light-rgb: 239, 234, 221;
    --bs-dark: #1c1d1f;
    --bs-dark-rgb: 25, 25, 24;

    --bs-link-color: #c8391a;
    --bs-link-color-rgb: 200, 57, 26;
    --bs-link-hover-color: #1c1d1f;
    --bs-link-hover-color-rgb: 25, 25, 24;
    --bs-link-decoration: none;

    --bs-body-bg: #f4f4f3;
    --bs-body-bg-rgb: 247, 244, 236;
    --bs-body-color: #1c1d1f;
    --bs-body-color-rgb: 25, 25, 24;
    --bs-body-font-family: var(--sans);
    --bs-body-font-size: 0.95rem;
    --bs-body-line-height: 1.55;
    --bs-font-monospace: var(--mono);

    --bs-border-color: rgba(28, 29, 31, 0.15);
    --bs-border-color-translucent: rgba(28, 29, 31, 0.06);
    --bs-tertiary-bg: #e9e9e7;
    --bs-tertiary-bg-rgb: 239, 234, 221;
    --bs-secondary-bg: #e9e9e7;

    --bs-focus-ring-color: rgba(255, 104, 70, 0.35);
    --bs-focus-ring-width: 2px;
    --bs-highlight-bg: #e8e8e5;

    --bs-emphasis-color: #0f0f0e;
    --bs-emphasis-color-rgb: 15, 15, 14;

    /* Yumuşak köşe ailesi — portal ile aynı; pill yalnız kontrol/rozette */
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 9px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 18px;
    --bs-border-radius-xxl: 22px;
    --bs-border-radius-2xl: 22px;
    --bs-border-radius-pill: 999px;
}

/* Koyu tema: portal tokenları ile birebir. Bu sayfalarda tema düğmesi yok
   (PHP/JS'e dokunulmadı), bu yüzden yalnız işletim sistemi tercihine uyulur.
   Değerler yeniden bağlandığı için tüm bileşenler kendiliğinden döner. */
@media (prefers-color-scheme: dark) {
    :root {
        --paper: #17181a;
        --paper-deep: #1e1f22;
        --surface: #232427;
        --ink: #ececed;
        --ink-soft: #a3a5a9;
        --line: rgba(236, 237, 237, 0.13);
        --line-faint: rgba(236, 237, 237, 0.06);
        --line-strong: rgba(236, 237, 237, 0.34);
        --acid: #2c2e31;
        --acid-ink: #e4e5e6;
        --coral-text: #ff6846;
        --sage: #34363a;
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
        --on-solid: #17181a;

        color-scheme: dark;

        --ink-strong: #f6f3e9;
        --ink-softer: #8d8a7e;

        --accent-2: #6fbf95;
        --accent-2-hi: #8ed0ae;
        --warn: #d7b05a;
        --warn-hi: #e5c479;
        --danger: #e98a7f;
        --danger-hi: #f2a89f;
        --violet: #c3a0b2;
        --violet-hi: #d5b9c7;

        --card-hi: rgba(255, 104, 70, 0.14);

        --success-soft: #1c2b24;
        --warn-soft: #2c2617;
        --danger-soft: #2e1d1b;
        --violet-soft: #2a2126;

        --bs-primary: #ff6846;
        --bs-primary-rgb: 255, 104, 70;
        --bs-secondary: #a3a5a9;
        --bs-secondary-rgb: 168, 164, 150;
        --bs-success: #6fbf95;
        --bs-success-rgb: 111, 191, 149;
        --bs-info: #d7b05a;
        --bs-info-rgb: 215, 176, 90;
        --bs-warning: #d7b05a;
        --bs-warning-rgb: 215, 176, 90;
        --bs-danger: #e98a7f;
        --bs-danger-rgb: 233, 138, 127;
        --bs-light: #1e1f22;
        --bs-light-rgb: 26, 25, 22;
        --bs-dark: #ececed;
        --bs-dark-rgb: 236, 233, 223;

        --bs-link-color: #ff6846;
        --bs-link-color-rgb: 255, 104, 70;
        --bs-link-hover-color: #ececed;
        --bs-link-hover-color-rgb: 236, 233, 223;

        --bs-body-bg: #17181a;
        --bs-body-bg-rgb: 18, 18, 16;
        --bs-body-color: #ececed;
        --bs-body-color-rgb: 236, 233, 223;

        --bs-border-color: rgba(236, 237, 237, 0.13);
        --bs-border-color-translucent: rgba(236, 237, 237, 0.06);
        --bs-tertiary-bg: #1e1f22;
        --bs-tertiary-bg-rgb: 26, 25, 22;
        --bs-secondary-bg: #1e1f22;
        --bs-highlight-bg: #2c2e31;
        --bs-emphasis-color: #f6f3e9;
        --bs-emphasis-color-rgb: 246, 243, 233;
    }
}

/* ── Sayfa gövdesi: düz kâğıt, gradyansız ─────────────────────────────── */
html, body {
    font-family: var(--sans);
    color: var(--ink);
    min-height: 100vh;
    margin: 0;
    background: var(--paper);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Başlıklar serif; em italik vurgu taşır */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-strong);
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

/* Rakamlar her yerde mono ve hizalı */
.mono, output, time, .kpi-value, .range-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* ── Navbar (akademik laboratuvar künyesi) ────────────────────────────── */
.lab-nav {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
.lab-nav .brand-row {
    display: inline-flex; align-items: center; gap: 12px;
}
.lab-nav .brand-logo {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    object-fit: cover;
    box-shadow: none;
    border: 1px solid var(--line);
}
.lab-nav .brand-title { line-height: 1.15; }
.lab-nav .brand-title .brand-name {
    font-family: var(--serif);
    font-weight: 600; font-size: 1.05rem;
    letter-spacing: 0.005em;
    color: var(--ink-strong);
}
.lab-nav .brand-title .brand-sub {
    font-family: var(--mono);
    font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink-soft);
    display: block; margin-top: 3px;
}

/* ── Mini künye rozeti — mono, hairline çerçeve ───────────────────────── */
.lab-badge-mini {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono);
    font-size: 0.62rem; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    line-height: 1.4;
    font-weight: 500;
}
.lab-badge-mini.green  { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.lab-badge-mini.violet { color: var(--violet);   border-color: color-mix(in srgb, var(--violet) 45%, transparent); }
.lab-badge-mini.amber  { color: var(--acid-ink); background: var(--acid); border-color: transparent; }

/* ── Panel dış kasası ─────────────────────────────────────────────────── */
.panel-shell {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1rem, 1.4vw, 1.6rem);
    background: var(--paper-deep);
    box-shadow: none;
    backdrop-filter: none;
}

/* ── Kartlar: beyaz levha + hairline ─────────────────────────────────── */
.card, .card-soft {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    background: var(--surface);
    color: var(--ink);
}
.card-header {
    background: var(--paper-deep) !important;
    border-bottom: 1px solid var(--line);
    color: var(--ink-strong);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.card-section-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-faint);
}
.card-section-header h5 { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--ink-strong); }

/* ── KPI kartları: üstte 2px künye cetveli, mono rakam ────────────────── */
.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    position: relative; overflow: hidden;
}
.kpi::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--ink);
    top: 0; height: 2px;
    opacity: 1;
}
.kpi .kpi-label {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.62rem; letter-spacing: 0.13em;
    text-transform: uppercase; font-weight: 500;
}
.kpi .kpi-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500; font-size: 1.7rem; letter-spacing: -0.01em;
    line-height: 1.1;
    margin-top: 6px; color: var(--ink-strong);
}
.kpi .kpi-sub { color: var(--ink-soft); font-size: 0.74rem; margin-top: 3px; }

.kpi.sky .kpi-value   { color: var(--coral-text); }
.kpi.sky::before      { background: var(--coral); }

.kpi.green .kpi-value { color: var(--accent-2); }
.kpi.green::before    { background: var(--accent-2); }

.kpi.amber .kpi-value { color: var(--warn); }
.kpi.amber::before    { background: var(--warn); }

.kpi.violet .kpi-value { color: var(--violet); }
.kpi.violet::before    { background: var(--violet); }

/* ── Sekmeler — kâğıt üstü pill şeridi ────────────────────────────────── */
.nav-tabs-custom {
    border-bottom: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 1.25rem;
    padding: 6px;
    background: var(--paper-deep);
    border-radius: 999px;
    border: 1px solid var(--line);
}
.nav-tabs-custom .nav-link {
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 40px;
    display: inline-flex; align-items: center;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nav-tabs-custom .nav-link:hover {
    color: var(--ink-strong);
    background: var(--surface);
}
.nav-tabs-custom .nav-link.active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
}
.tab-section { display: none; }
.tab-section.active { display: block; }

/* ── Bölüm başlığı — mercan kesim işareti + hairline ──────────────────── */
.section-title {
    font-family: var(--serif);
    font-size: 1.1rem; font-weight: 600;
    color: var(--ink-strong);
    margin: 1.1rem 0 0.85rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px;
}
.section-title::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--coral);
    box-shadow: none;
    flex-shrink: 0;
}

/* ── Tablolar: mono başlık, tabular rakam, hairline satır ayracı ──────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.table thead th {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    font-size: 0.62rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    white-space: nowrap;
}
.table-light {
    --bs-table-bg: var(--paper-deep);
    --bs-table-color: var(--ink);
}
.table-bordered { --bs-table-border-color: var(--line); }

/* ── Form kontrolleri ─────────────────────────────────────────────────── */
.form-control, .form-select, .form-check-input {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    border-radius: var(--radius-sm);
}
.form-control, .form-select {
    min-height: 44px;             /* dokunma hedefi */
    padding: 0.55rem 0.85rem;
}
.form-control::placeholder { color: var(--ink-softer); }
.form-control:focus, .form-select:focus {
    color: var(--ink-strong);
    background: var(--surface);
    border-color: var(--coral);
    box-shadow: inset 0 0 0 1px var(--coral);
}
.form-check-input:checked {
    background-color: var(--coral-text);
    border-color: var(--coral-text);
}
.form-label,
.form-check-label { color: var(--ink-strong); font-weight: 600; font-size: 0.86rem; }
.form-label { margin-bottom: 0.35rem; }

/* ── Butonlar — pill, düz dolgu, gradyansız ───────────────────────────── */
.btn {
    border-radius: 999px;
    min-height: 44px;
    padding: 0.55rem 1.35rem;
    font-weight: 600;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.btn-sm { min-height: 36px; padding: 0.32rem 0.9rem; font-size: 0.8rem; }
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--ink);
    border: 1px solid var(--ink);
    font-weight: 600;
    color: var(--paper);
}
.btn-primary:hover { background: var(--acid-ink); border-color: var(--acid-ink); color: var(--paper); }

.btn-success {
    background: var(--accent-2);
    border: 1px solid var(--accent-2);
    font-weight: 600;
    color: var(--on-solid);
}
.btn-success:hover { background: var(--accent-2-hi); border-color: var(--accent-2-hi); color: var(--on-solid); }

.btn-warning {
    background: var(--acid);
    border: 1px solid color-mix(in srgb, var(--acid-ink) 30%, transparent);
    font-weight: 600;
    color: var(--acid-ink);
}
.btn-warning:hover { background: color-mix(in srgb, var(--acid) 82%, var(--acid-ink)); color: var(--acid-ink); }

.btn-outline-success {
    color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
    background: transparent;
}
.btn-outline-success:hover {
    color: var(--on-solid); background: var(--accent-2);
    border-color: var(--accent-2);
}
.btn-outline-danger {
    color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    background: transparent;
}
.btn-outline-danger:hover {
    color: var(--on-solid); background: var(--danger);
    border-color: var(--danger);
}
.btn-outline-warning {
    color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent);
    background: transparent;
}
.btn-outline-warning:hover {
    color: var(--on-solid); background: var(--warn);
    border-color: var(--warn);
}
.btn-outline-light {
    color: var(--ink); border-color: var(--line-strong);
    background: transparent;
}
.btn-outline-light:hover {
    background: var(--surface);
    color: var(--ink-strong);
    border-color: var(--ink);
}

/* ── Grafik sarmalayıcıları ───────────────────────────────────────────── */
.chart-wrap    { height: 320px; }
.chart-wrap-sm { height: 280px; }
.chart-wrap-lg { height: 380px; }

/* ── Yatay ayraç: tek hairline ───────────────────────────────────────── */
.lab-divider {
    position: relative;
    border: 0; height: 1px;
    background: var(--line);
    opacity: 1;
    margin: 1.5rem 0;
}

/* ── Akademik dipnot ──────────────────────────────────────────────────── */
.lab-footnote {
    font-size: 0.8rem;
    color: var(--ink-soft);
    border-left: 2px solid var(--coral);
    padding: 10px 14px;
    background: var(--paper-deep);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Metin ve yardımcılar ─────────────────────────────────────────────── */
.text-muted { color: var(--ink-soft) !important; }
code, pre {
    color: var(--acid-ink); background: var(--acid);
    border-radius: 5px; padding: 1px 6px;
    font-family: var(--mono); font-size: 0.86em;
}

/* ── Ortak rozet (kart içi etiketler) ─────────────────────────────────── */
.badge-mini {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono);
    font-size: 0.64rem; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-weight: 500;
}
.badge-mini.amber  { color: var(--acid-ink); background: var(--acid); border-color: transparent; }
.badge-mini.violet { color: var(--violet);   border-color: color-mix(in srgb, var(--violet) 45%, transparent); }
.badge-mini.green  { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }

/* ── Portal kabukları (giriş / kayıt) ─────────────────────────────────── */
.portal-shell {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    background: var(--surface);
    backdrop-filter: none;
}
.portal-shell .left-pane {
    background: var(--paper-deep);
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border-right: 1px solid var(--line);
}
.portal-shell .right-pane {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    background: var(--surface);
}
@media (max-width: 991.98px) {
    .portal-shell .left-pane { border-right: 0; border-bottom: 1px solid var(--line); }
    .portal-shell .left-pane,
    .portal-shell .right-pane { padding: 1.4rem; }
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.12;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink-strong);
}
.hero-sub {
    color: var(--ink-soft);
    margin-bottom: 1.4rem;
    max-width: 52ch;
    text-wrap: pretty;
}
.login-card-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--ink-strong);
}
.soft-muted { color: var(--ink-soft); }
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}
.feature-list li {
    color: var(--ink);
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 13px 2px;
    font-size: 0.88rem;
    background: transparent;
    transition: color 180ms ease, padding-left 180ms ease;
}
.feature-list li:hover {
    border-color: var(--line);
    background: transparent;
    transform: none;
    padding-left: 8px;
}
.feature-list li strong { color: var(--ink-strong); font-weight: 600; }

/* ── Brand satırı ─────────────────────────────────────────────────────── */
.brand-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.brand-logo {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    box-shadow: none;
    border: 1px solid var(--line);
}
.brand-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--ink-strong);
    letter-spacing: 0.005em;
}

/* ── Form kartı + ölçek değeri rozeti ─────────────────────────────────── */
.form-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--surface);
    color: var(--ink);
}
.range-value {
    display: inline-block;
    min-width: 48px;
    text-align: center;
    color: var(--coral-text);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--coral) 55%, transparent);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.form-range::-webkit-slider-thumb { background: var(--coral-text); }
.form-range::-moz-range-thumb     { background: var(--coral-text); border: 0; }
.form-range::-webkit-slider-runnable-track { background: var(--line); }
.form-range::-moz-range-track     { background: var(--line); }

/* ── Cam kart — HUD paneli için koyu mürekkep varyantı ────────────────── */
.card-glass {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    backdrop-filter: none;
    box-shadow: none;
}
.card-glass.dark {
    background: rgba(23, 24, 26, 0.82);
    border-color: rgba(236, 237, 237, 0.18);
    color: #ececed;
    backdrop-filter: blur(8px);
}

/* ── Bildirim kutuları: sol kenar işareti + soluk yıkama ──────────────── */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: 0.9rem;
}
.alert-info {
    color: var(--coral-text);
    background: var(--acid);
    border-color: transparent;
    border-left: 3px solid var(--coral);
}
.alert-warning {
    color: var(--warn);
    background: var(--warn-soft);
    border-color: transparent;
    border-left: 3px solid var(--warn);
}
.alert-success {
    color: var(--accent-2);
    background: var(--success-soft);
    border-color: transparent;
    border-left: 3px solid var(--accent-2);
}
.alert-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: transparent;
    border-left: 3px solid var(--danger);
}

/* ── Girişe özel kilit kutusu ─────────────────────────────────────────── */
.auth-shell {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.auth-lock {
    border: 1px solid transparent;
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.9rem;
}
.auth-hint {
    font-size: 0.78rem;
    color: var(--ink-soft);
    text-align: center;
    margin-top: 0.9rem;
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

/* ── Kâğıt dokusu: milimetrik kılavuz, çok soluk ──────────────────────── */
.lab-grid-bg {
    position: relative;
}
.lab-grid-bg::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--line-faint) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.9;
    border-radius: inherit;
}
.lab-grid-bg > * { position: relative; }

/* ── Künye kaligrafisi / küçük yardımcılar ────────────────────────────── */
.lab-caption {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}
.admin-link { color: var(--ink-soft); }
.admin-link:hover { color: var(--coral-text); }

/* ── Bootstrap metin renk yardımcıları ───────────────────────────────── */
.text-primary  { color: var(--coral-text) !important; }
.text-success  { color: var(--accent-2) !important; }
.text-info     { color: var(--warn) !important; }
.text-warning  { color: var(--warn) !important; }
.text-danger   { color: var(--danger) !important; }
.text-secondary { color: var(--ink-soft) !important; }

/* ── Link: alt cetvel, hover'da mercan ───────────────────────────────── */
a {
    color: var(--coral-text);
    text-decoration: none;
    text-underline-offset: 4px;
}
a:hover { color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: 1px; }

/* ── Duyarlı ayarlar ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpi .kpi-value { font-size: 1.35rem; }
    .nav-tabs-custom .nav-link { padding: 6px 13px; font-size: 0.82rem; }
    .panel-shell { padding: 0.85rem; border-radius: var(--radius-sm); }
    .hero-title { font-size: 1.55rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   BOOTSTRAP 5 — BİLEŞEN DEĞİŞKENLERİNİ E-KİTAP PALETİNE ÇEK
   (Bootstrap her bileşende kendi --bs-btn-*, --bs-nav-*, --bs-pagination-*
   değişkenlerini yeniden tanımladığı için root'u ezmek yetmez.)
   ═════════════════════════════════════════════════════════════════════════ */

/* Bağlantı */
a, .link-primary {
    --bs-link-color-rgb: 200, 57, 26;
    --bs-link-hover-color-rgb: 25, 25, 24;
    color: var(--coral-text);
}
a:hover, .link-primary:hover { color: var(--ink-strong); }
.link-info      { color: var(--warn) !important; }
.link-success   { color: var(--accent-2) !important; }
.link-danger    { color: var(--danger) !important; }
.link-warning   { color: var(--warn) !important; }
.link-secondary { color: var(--ink-soft) !important; }

/* Button — info/secondary (primary/success/warning yukarıda tanımlı) */
.btn-info {
    --bs-btn-color: var(--on-solid);
    --bs-btn-bg: var(--warn);
    --bs-btn-border-color: var(--warn);
    --bs-btn-hover-color: var(--on-solid);
    --bs-btn-hover-bg: var(--warn-hi);
    --bs-btn-hover-border-color: var(--warn-hi);
    --bs-btn-active-color: var(--on-solid);
    --bs-btn-active-bg: var(--warn-hi);
    --bs-btn-active-border-color: var(--warn-hi);
    background: var(--warn);
    border: 1px solid var(--warn);
    color: var(--on-solid);
    font-weight: 600;
}
.btn-info:hover { background: var(--warn-hi); border-color: var(--warn-hi); color: var(--on-solid); }

.btn-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink-strong);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--paper);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink); font-weight: 600;
}
.btn-secondary:hover { background: var(--surface); border-color: var(--ink); color: var(--ink-strong); }

.btn-dark, .btn-outline-dark:hover, .btn-outline-dark.active {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
}
.btn-light {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--paper-deep);
    --bs-btn-border-color: var(--line);
    background: var(--paper-deep); color: var(--ink);
}

/* Outline buttons — info/primary */
.btn-outline-primary {
    --bs-btn-color: var(--coral-text);
    --bs-btn-border-color: color-mix(in srgb, var(--coral) 55%, transparent);
    --bs-btn-hover-color: var(--paper);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--paper);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    color: var(--coral-text); border-color: color-mix(in srgb, var(--coral) 55%, transparent);
}
.btn-outline-info {
    --bs-btn-color: var(--warn);
    --bs-btn-border-color: color-mix(in srgb, var(--warn) 50%, transparent);
    --bs-btn-hover-color: var(--on-solid);
    --bs-btn-hover-bg: var(--warn);
    --bs-btn-hover-border-color: var(--warn);
    --bs-btn-active-color: var(--on-solid);
    --bs-btn-active-bg: var(--warn);
    --bs-btn-active-border-color: var(--warn);
    color: var(--warn);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink-soft);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--paper);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
}

/* Arka plan / metin yardımcıları */
.bg-primary   { background-color: var(--ink) !important; color: var(--paper) !important; }
.bg-info      { background-color: var(--warn) !important; color: var(--on-solid) !important; }
.bg-success   { background-color: var(--accent-2) !important; color: var(--on-solid) !important; }
.bg-warning   { background-color: var(--acid) !important; color: var(--acid-ink) !important; }
.bg-danger    { background-color: var(--danger) !important; color: var(--on-solid) !important; }
.bg-secondary { background-color: var(--ink-soft) !important; color: var(--on-solid) !important; }
.bg-dark      { background-color: var(--ink) !important; color: var(--paper) !important; }
.bg-light     { background-color: var(--paper-deep) !important; color: var(--ink) !important; }
.bg-body      { background-color: var(--paper) !important; }

.border-primary   { border-color: var(--coral) !important; }
.border-info      { border-color: var(--warn) !important; }
.border-success   { border-color: var(--accent-2) !important; }
.border-warning   { border-color: var(--acid-ink) !important; }
.border-danger    { border-color: var(--danger) !important; }
.border-secondary { border-color: var(--line-strong) !important; }

/* Alert kalıntıları — primary/secondary/dark */
.alert-primary {
    --bs-alert-color: var(--coral-text);
    --bs-alert-bg: var(--acid);
    --bs-alert-border-color: transparent;
    --bs-alert-link-color: var(--ink-strong);
    color: var(--coral-text);
    background: var(--acid);
    border-color: transparent;
    border-left: 3px solid var(--coral);
}
.alert-secondary {
    --bs-alert-color: var(--ink-strong);
    --bs-alert-bg: var(--paper-deep);
    --bs-alert-border-color: var(--line);
    color: var(--ink-strong);
    background: var(--paper-deep);
    border-color: var(--line);
}
.alert-dark {
    --bs-alert-color: var(--paper);
    --bs-alert-bg: var(--ink);
    --bs-alert-border-color: var(--ink);
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}
.alert-light {
    --bs-alert-color: var(--ink);
    --bs-alert-bg: var(--surface);
    --bs-alert-border-color: var(--line);
}

/* Badge yardımcıları */
.badge.bg-primary   { background-color: var(--ink) !important; color: var(--paper) !important; }
.badge.bg-info      { background-color: var(--warn) !important; color: var(--on-solid) !important; }
.badge.bg-success   { background-color: var(--accent-2) !important; color: var(--on-solid) !important; }
.badge.bg-warning   { background-color: var(--acid) !important; color: var(--acid-ink) !important; }
.badge.bg-danger    { background-color: var(--danger) !important; color: var(--on-solid) !important; }
.badge.bg-secondary { background-color: var(--ink-soft) !important; color: var(--on-solid) !important; }

/* Nav / tabs / pills */
.nav {
    --bs-nav-link-color: var(--ink-soft);
    --bs-nav-link-hover-color: var(--ink-strong);
    --bs-nav-pills-link-active-bg: var(--ink);
    --bs-nav-pills-link-active-color: var(--paper);
    --bs-nav-tabs-link-active-color: var(--ink-strong);
    --bs-nav-tabs-link-active-bg: var(--surface);
    --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface);
    --bs-nav-tabs-border-color: var(--line);
}
.nav-link { color: var(--ink-soft); }
.nav-link:hover, .nav-link:focus { color: var(--ink-strong); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ink);
    color: var(--paper);
}
.nav-tabs .nav-link.active {
    color: var(--ink-strong);
    background: var(--surface);
    border-color: var(--line) var(--line) var(--surface);
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--coral-text);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--ink-strong);
    --bs-pagination-hover-bg: var(--paper-deep);
    --bs-pagination-hover-border-color: var(--line-strong);
    --bs-pagination-focus-color: var(--ink-strong);
    --bs-pagination-focus-bg: var(--paper-deep);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--coral);
    --bs-pagination-active-color: var(--paper);
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
}

/* List group */
.list-group {
    --bs-list-group-color: var(--ink);
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-action-hover-bg: var(--paper-deep);
    --bs-list-group-action-active-bg: var(--paper-deep);
    --bs-list-group-active-color: var(--paper);
    --bs-list-group-active-bg: var(--ink);
    --bs-list-group-active-border-color: var(--ink);
}

/* Dropdown */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: var(--ink-strong);
    --bs-dropdown-link-hover-bg: var(--paper-deep);
    --bs-dropdown-link-active-color: var(--paper);
    --bs-dropdown-link-active-bg: var(--ink);
    --bs-dropdown-divider-bg: var(--line);
    --bs-dropdown-border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* Modal + offcanvas */
.modal {
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--ink);
    --bs-modal-border-color: var(--line);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-modal-border-radius: var(--radius);
}
.modal-backdrop { --bs-backdrop-bg: #1c1d1f; }

.offcanvas {
    --bs-offcanvas-bg: var(--surface);
    --bs-offcanvas-color: var(--ink);
    --bs-offcanvas-border-color: var(--line);
}

/* Accordion */
.accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-color: var(--ink);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-color: var(--ink-strong);
    --bs-accordion-btn-bg: var(--paper-deep);
    --bs-accordion-active-color: var(--coral-text);
    --bs-accordion-active-bg: var(--acid);
    --bs-accordion-btn-focus-border-color: var(--coral);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--coral);
    --bs-accordion-border-radius: var(--radius-sm);
}

/* Progress bar */
.progress {
    --bs-progress-bg: var(--line);
    --bs-progress-bar-color: var(--paper);
    --bs-progress-bar-bg: var(--ink);
    --bs-progress-border-radius: 999px;
    height: 6px;
}
.progress-bar { background-color: var(--ink) !important; }
.progress-bar.bg-success { background-color: var(--accent-2) !important; }
.progress-bar.bg-info    { background-color: var(--warn) !important; color: var(--on-solid) !important; }
.progress-bar.bg-warning { background-color: var(--acid-ink) !important; color: var(--paper) !important; }
.progress-bar.bg-danger  { background-color: var(--danger) !important; }

/* Spinner */
.spinner-border, .spinner-grow { color: var(--coral-text); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--coral-text) !important; }
.spinner-border.text-info,    .spinner-grow.text-info    { color: var(--warn) !important; }
.spinner-border.text-success, .spinner-grow.text-success { color: var(--accent-2) !important; }
.spinner-border.text-warning, .spinner-grow.text-warning { color: var(--warn) !important; }
.spinner-border.text-danger,  .spinner-grow.text-danger  { color: var(--danger) !important; }

/* Form kontrolleri — odak, onay, radio, switch */
.form-check-input {
    background-color: var(--surface);
    border-color: var(--line-strong);
    width: 1.15em; height: 1.15em;
    margin-top: 0.2em;
}
.form-check-input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 2px var(--coral);
}
.form-check-input:checked {
    background-color: var(--coral-text);
    border-color: var(--coral-text);
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--coral-text);
    border-color: var(--coral-text);
}
.form-switch .form-check-input {
    background-color: var(--line);
    border-color: var(--line-strong);
}
.form-switch .form-check-input:checked {
    background-color: var(--coral-text);
    border-color: var(--coral-text);
}

.form-select:focus,
.form-control:focus {
    border-color: var(--coral);
    box-shadow: inset 0 0 0 1px var(--coral);
}

/* Odak halkası: mercan çerçeve, gölge değil — e-kitap dilinde tek işaret */
.btn-check:focus + .btn,
.btn:focus-visible,
*:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
    box-shadow: none;
    border-radius: inherit;
}

/* Placeholder & disabled */
.form-control:disabled, .form-control[readonly] {
    background-color: var(--paper-deep);
    color: var(--ink-soft);
}

/* Tooltip / popover */
.tooltip {
    --bs-tooltip-bg: #1c1d1f;
    --bs-tooltip-color: #f4f4f3;
}
.popover {
    --bs-popover-bg: var(--surface);
    --bs-popover-border-color: var(--line);
    --bs-popover-body-color: var(--ink);
    --bs-popover-header-bg: var(--paper-deep);
    --bs-popover-header-color: var(--ink-strong);
}

/* Breadcrumb */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-soft);
    --bs-breadcrumb-item-active-color: var(--ink-strong);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.breadcrumb-item a { color: var(--ink-soft); }
.breadcrumb-item a:hover { color: var(--coral-text); }

/* Input group */
.input-group-text {
    background: var(--paper-deep);
    border: 1px solid var(--line-strong);
    color: var(--ink-strong);
    font-family: var(--mono);
    font-size: 0.78rem;
}

/* Card — Bootstrap varsayılanını zorla */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--ink);
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--paper-deep);
    --bs-card-cap-color: var(--ink-strong);
    --bs-card-border-radius: var(--radius-sm);
    --bs-card-inner-border-radius: calc(var(--radius-sm) - 1px);
}

/* Forms: invalid/valid */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
}
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--accent-2);
    box-shadow: inset 0 0 0 1px var(--accent-2);
}
.invalid-feedback { color: var(--danger); }
.valid-feedback   { color: var(--accent-2); }

/* Table varyantları — soluk kâğıt yıkamaları */
.table-primary {
    --bs-table-bg: var(--acid);
    --bs-table-color: var(--acid-ink);
    --bs-table-border-color: var(--line);
}
.table-info {
    --bs-table-bg: var(--warn-soft);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
}
.table-success {
    --bs-table-bg: var(--success-soft);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
}
.table-warning {
    --bs-table-bg: var(--warn-soft);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
}
.table-danger {
    --bs-table-bg: var(--danger-soft);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
}
.table-secondary {
    --bs-table-bg: var(--paper-deep);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
}
.table-active {
    --bs-table-bg: var(--paper-deep);
}
.table > tbody > tr:hover > * { background-color: var(--paper-deep); }

/* Hyperlink (tam kapsama için) */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item-action) {
    color: var(--coral-text);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item-action):hover {
    color: var(--ink-strong);
}

/* Blockquote / hr */
blockquote { border-left: 2px solid var(--coral); color: var(--ink); padding-left: 14px; font-family: var(--serif); }
hr { border-top: 1px solid var(--line); opacity: 1; }

/* Scrollbar (WebKit) — ince cetvel */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 3px solid var(--paper-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* Selection: e-okuyucu fosforlu kalem */
::selection { background: var(--acid); color: var(--acid-ink); }

/* Bootstrap text-bg-* yardımcıları */
.text-bg-primary   { color: var(--paper) !important; background-color: var(--ink) !important; }
.text-bg-info      { color: var(--on-solid) !important; background-color: var(--warn) !important; }
.text-bg-success   { color: var(--on-solid) !important; background-color: var(--accent-2) !important; }
.text-bg-warning   { color: var(--acid-ink) !important; background-color: var(--acid) !important; }
.text-bg-danger    { color: var(--on-solid) !important; background-color: var(--danger) !important; }
.text-bg-secondary { color: var(--on-solid) !important; background-color: var(--ink-soft) !important; }
.text-bg-dark      { color: var(--paper) !important; background-color: var(--ink) !important; }
.text-bg-light     { color: var(--ink) !important; background-color: var(--paper-deep) !important; }

/* ── Hareket duyarlılığı ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover { transform: none; }
    .feature-list li:hover { padding-left: 2px; }
}