/* =========================================================================
   Derslik — design tokens (slice 0).

   The 17 custom properties of the design, ported verbatim from
   `design/Derslik v5.dc.html:17-24` through visual-system §1.2 / §5.1, plus
   `--golge` and the small set of additions the accessibility audit demands
   (`--accInk`, `--lineStrong`, status inks). Every theme restates all of
   them — there are no partial overrides, exactly like the design.

   Load order (fixed by the slice-0 contract):
       /static/dk/tokens.css   ← this file: variables only, no components
       /static/styles.css      ← legacy sheet, now consuming these via aliases
       /static/dk/base.css     ← the dk-* component layer

   The Figtree face is SELF-HOSTED (OD-45: /static/fonts/Figtree-wght.ttf, SIL OFL; no
   third-party font request on any page). layout() preloads the file so the request starts in
   parallel with the CSS; font-display: swap shows the system stack until it arrives.
   ========================================================================= */

@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/Figtree-wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- type ------------------------------------------------------------
     21 discrete sizes in the design (visual-system §1.6) collapse to a
     10-step rem ramp; the raw px value of each step is in the comment.
     rem, not px, so the "Arayüz büyüklüğü" setting can scale the whole UI
     from the root font-size instead of the non-standard `zoom` (§6.9 A7). */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-4xs: 0.5625rem; /*  9px — micro badge (was 8, 8.5, 9, 9.5) */
  --fs-3xs: 0.625rem;  /* 10px — tiny badge, bubble time */
  --fs-2xs: 0.6875rem; /* 11px — section head, msg time (was 10.5, 11) */
  --fs-xs: 0.75rem;    /* 12px — hint, chip label (was 11.5, 12) */
  --fs-sm: 0.8125rem;  /* 13px — dense body, small button (was 12.5, 13) */
  --fs-md: 0.875rem;   /* 14px — DEFAULT control label (was 13.5, 14) */
  --fs-lg: 0.9375rem;  /* 15px — row name, tab, author (was 14.5, 15) */
  --fs-xl: 1rem;       /* 16px — composer, section title (was 15.5, 16) */
  --fs-2xl: 1.125rem;  /* 18px — pane / dialog title (was 17, 18, 19) */
  --fs-3xl: 1.625rem;  /* 26px — login headline (v5:62) */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-chat: 1.55; /* v5:270, v5:620 */
  --lh-loose: 1.6;

  --ls-caps: 0.8px;  /* uppercase section heads (7 uses) */
  --ls-label: 0.5px; /* small form labels (4 uses) */
  --ls-code: 1.5px;  /* invite code (v5:830) */

  /* Chat bubble size — the "Sohbet metni boyutu" setting (v5:1313). */
  --chat-fs: var(--fs-md);

  /* ---- spacing (step index = px / 2) ---------------------------------- */
  --sp-1: 0.125rem;  /*  2px */
  --sp-2: 0.25rem;   /*  4px */
  --sp-3: 0.375rem;  /*  6px */
  --sp-4: 0.5rem;    /*  8px */
  --sp-5: 0.625rem;  /* 10px */
  --sp-6: 0.75rem;   /* 12px */
  --sp-7: 0.875rem;  /* 14px */
  --sp-8: 1rem;      /* 16px */
  --sp-9: 1.125rem;  /* 18px */
  --sp-10: 1.25rem;  /* 20px */
  --sp-11: 1.375rem; /* 22px */
  --sp-12: 1.5rem;   /* 24px */
  --sp-14: 1.75rem;  /* 28px — dialog padding (v5:1058) */

  /* ---- radii (14 literals → 8 steps; px, they must not scale) --------- */
  --r-2xs: 6px;     /* badge (was 5, 6, 7) */
  --r-xs: 9px;      /* micro button (was 8, 9) */
  --r-sm: 10px;     /* small button, icon box */
  --r-md: 12px;     /* input, row, composer (was 11, 12) */
  --r-lg: 14px;     /* card, tab, tile (was 13, 14, 15) */
  --r-xl: 17px;     /* section card, hero */
  --r-2xl: 20px;    /* app pane, dialog (v5:140, v5:1058) */
  --r-bubble: 16px; /* message bubble (v5:620, v5:1400) */
  --r-full: 50%;

  /* ---- borders: 1.5px encloses, 1px divides (visual-system §1.8) ------ */
  --bw: 1.5px;
  --bw-thin: 1px;
  --bw-thick: 2.5px; /* login role cards (v5:65) */

  /* ---- motion --------------------------------------------------------- */
  --dur-1: 0.1s;
  --dur-2: 0.15s; /* the default (11 uses) */
  --dur-3: 0.18s; /* tab strip (v5:105, v5:112) */
  --ease: ease;

  /* ---- hit sizes ------------------------------------------------------- */
  --hit-xs: 26px; /* v5:326 — under the platform minimum, see §6.8 */
  --hit-sm: 32px; /* v5:294, v5:565 */
  --hit-md: 44px; /* v5:123 — the compliant one */
  --hit-lg: 46px; /* v5:105, v5:396 */

  /* ---- layers ---------------------------------------------------------- */
  --z-raised: 2;    /* v5:437 */
  --z-sticky: 10;
  --z-dock: 30;
  --z-modal: 40;    /* v5:1057 */
  --z-tooltip: 60;
  --z-popover: 70;  /* the theme picker popover (new) */

  /* ---- fixed elevation (per theme below where the tint matters) -------- */
  --shadow-bubble: 0 2px 8px rgba(20, 20, 60, 0.06); /* v5:270, v5:620 */
  --shadow-modal: 0 24px 60px rgba(20, 20, 60, 0.3); /* v5:1058 */
  --shadow-row: 0 1px 4px rgba(0, 0, 0, 0.04);       /* v5:209 */

  /* ---- accent surfaces (visual-system 6.11 P0 / review D-05) -----------
     Text on the accent *gradient* (.dk-hero) is invisible to axe, and the
     light palettes are too bright for white at 4.5:1 anywhere on the ramp
     - on pano and gul no solid ink passes against both stops, so the
     surface itself has to carry the contrast. Each palette declares:

       --heroScrim  a flat overlay under .dk-hero's gradient so --accInk
                    clears 4.5:1 against BOTH gradient stops;
       --glassBg    the fill of a button sitting on that surface
                    (.dk-btn--glass). It darkens where --accInk is white
                    and lightens where --accInk is dark - a white film
                    over a light accent is what made the hero CTA the
                    worst contrast in the product (3.36:1).

     Text IN the accent colour (not on it) uses --accText, a 60% mix toward --ink: it is the one accent that stays
     >= 4.5:1 on the page, panel and soft-accent surfaces of every palette, where raw --acc is 3.6-4.3:1 on acik, pano
     and gul and the @mention pill's tint. WP-C's pill / tag / channel glyph take it (hand-off H-87).

     dk-css-contract.test.js recomputes every one of these composites. */
  --heroScrim: transparent;
  /* The scrim is also what every other control that paints text on the accent gradient (.dk-btn--gradient, the active
     home tab, the avatars on --acc / --acc2) lays under it: one declaration, recomputed by the contract test. */
  --glassBg: rgba(0, 0, 0, 0.24);
  --glassBgHover: rgba(0, 0, 0, 0.34);
  --glassLine: rgba(255, 255, 255, 0.55);

}

/* ---- palette: açık (default) — v5:17 ------------------------------------
   --mut, --ok, --warn and --bad carry the §6.11 P0/P1 fixes; the original
   design value is kept in the comment next to each.

   Each palette is bound to `:root[data-theme]` *and* to a bare
   `[data-theme]`, so a subtree can carry its own theme — that is how
   preview-temalar.html renders all eight side by side, and how the theme
   picker previews a palette it has not applied yet. The design puts
   data-theme on a component root too (v5:35).
   ------------------------------------------------------------------------ */
:root,
[data-theme="acik"] {
  color-scheme: light;
  --bg: #eeedf8;
  --panel: #ffffff;
  --panel2: #f1f0fa;
  --line: #e2e1f1;
  --lineStrong: #8b8a94; /* §6.11 P1 — form-control boundary, 3.41:1 on --panel (--line was 1.29:1) */
  --ink: #26263e;
  --mut: #6c6b8a;        /* §6.11 P0 — was #8B8AA9 (2.95:1 on --panel2) → 4.52:1 */
  --acc: #6664e5;        /* S-23 — was #6c6af2 (#fff on it 4.22:1, the one palette under 4.5) → 4.65:1; ~5% darker, same hue */
  --acc2: #8a7bf7;
  --accSoft: #e8e7fe;
  --accInk: #ffffff;     /* §6.3 — text/icon colour on --acc */
  --heroScrim: rgba(0, 0, 0, 0.28); /* D-05 - white ink needs a darker gradient here */
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink)); /* §6.3 — accent text on --accSoft */
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #e8590c;
  --ok: #1f7a50;         /* §6.11 P1 — was #2E9E6B (2.92:1 on --okSoft) → 4.58:1 */
  --okSoft: #dff3e9;
  --okInk: #ffffff;      /* §6.4 — 5.31:1 */
  --warn: #8a5f12;       /* §6.11 P1 — was #B07C1F (3.13:1 on --warnSoft) → 4.83:1 */
  --warnSoft: #f6edd6;
  --warnInk: #ffffff;    /* §6.4 — 5.64:1 */
  --bad: #a82848;        /* §6.11 P1 — was #CC3B5D (3.83:1 on --badSoft) → 5.44:1 */
  --badSoft: #fadee5;
  --badInk: #ffffff;     /* §6.4 — 6.86:1 */
  --golge: 0 10px 30px rgba(60, 58, 160, 0.08);
}

/* ---- koyu — v5:18 ------------------------------------------------------ */
:root[data-theme="koyu"],
[data-theme="koyu"] {
  color-scheme: dark;
  --bg: #1a1b1e;
  --panel: #242529;
  --panel2: #1f2023;
  --line: #333438;
  --lineStrong: #6d6e71; /* §6.11 P1 — 3.00:1 on --panel */
  --ink: #d6d8dc;
  --mut: #8a8f98;        /* passes as shipped (4.71 / 5.01) */
  --acc: #8583ff;
  --acc2: #a5a3ff;
  --accSoft: #3b3d5c;
  --accInk: #15161a;     /* §6.11 P0 — #fff on --acc was 3.14:1, this is 5.76:1 */
  --heroScrim: transparent;
  --glassBg: rgba(255, 255, 255, 0.24);
  --glassBgHover: rgba(255, 255, 255, 0.36);
  --glassLine: rgba(0, 0, 0, 0.35);
  /* 60%, not the usual 72%: koyu's --accSoft is lighter than its --panel (C8),
     so the accent text has to travel further toward --ink. 3.33:1 → 4.61:1. */
  --accInkSoft: color-mix(in srgb, var(--acc) 60%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #ff7a33;
  --ok: #4fbe8b;
  --okSoft: #1f3a2e;
  --okInk: #0a130e;      /* §6.4 — #fff on --ok was 2.32:1, this is 8.15:1 */
  --warn: #d9a94a;
  --warnSoft: #3b331d;
  --warnInk: #17141f;    /* §6.4 — the design already does this at v5:1549 (8.41:1) */
  --bad: #e86a8a;
  --badSoft: #3e2230;
  --badInk: #2a0f18;     /* §6.4 — #fff on --bad was 3.06:1, this is 5.81:1 */
  --golge: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-row: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ---- kampüs — v5:19 ---------------------------------------------------- */
:root[data-theme="kampus"],
[data-theme="kampus"] {
  color-scheme: light;
  --bg: #f2f1ec;
  --panel: #ffffff;
  --panel2: #eae8df;
  --line: #dcd9cc;
  --lineStrong: #87857d; /* §6.11 P1 — 3.70:1 on --panel */
  --ink: #1f2a44;
  --mut: #63666f;        /* §6.11 P0 — was #7A7E8C (3.30:1 on --panel2) → 4.67:1 */
  --acc: #1f3a93;
  --acc2: #3e5bb8;
  --accSoft: #e3e9f9;
  --accInk: #ffffff;     /* 10.07:1 — fine as shipped */
  --heroScrim: transparent;
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #b07c1f;
  --ok: #1f7a50;         /* §6.11 P1 — was #2E9E6B */
  --okSoft: #dff3e9;
  --okInk: #ffffff;
  --warn: #8a5f12;       /* §6.11 P1 — was #B07C1F */
  --warnSoft: #f6edd6;
  --warnInk: #ffffff;
  --bad: #a82848;        /* §6.11 P1 — was #CC3B5D */
  --badSoft: #fadee5;
  --badInk: #ffffff;
  --golge: 0 10px 30px rgba(40, 50, 90, 0.08);
}

/* ---- kara tahta — v5:20 ------------------------------------------------ */
:root[data-theme="tahta"],
[data-theme="tahta"] {
  color-scheme: dark;
  --bg: #14201b;
  --panel: #1d2b24;
  --panel2: #26362e;
  --line: #33473c;
  --lineStrong: #717f77; /* §6.11 P1 — 3.52:1 on --panel */
  --ink: #e9f2ec;
  --mut: #8fa89a;        /* passes as shipped (5.79 / 4.99) */
  --acc: #4fbe8b;
  --acc2: #7ad3a9;
  --accSoft: #24453a;
  --accInk: #0a130e;     /* §6.11 P0 — #fff on mint was 2.32:1, the worst defect; this is 8.15:1 */
  --heroScrim: transparent;
  --glassBg: rgba(255, 255, 255, 0.24);
  --glassBgHover: rgba(255, 255, 255, 0.36);
  --glassLine: rgba(0, 0, 0, 0.35);
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #ff7a33;
  --ok: #4fbe8b;
  --okSoft: #1f3a2e;
  --okInk: #0a130e;
  --warn: #d9a94a;
  --warnSoft: #3b331d;
  --warnInk: #17141f;
  --bad: #e86a8a;
  --badSoft: #3e2230;
  --badInk: #2a0f18;
  --golge: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-row: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* ---- pano — v5:21 ------------------------------------------------------ */
:root[data-theme="pano"],
[data-theme="pano"] {
  color-scheme: light;
  --bg: #f7f2ea;
  --panel: #fffdf9;
  --panel2: #f1eae0;
  --line: #e6dccd;
  --lineStrong: #8c867d; /* §6.11 P1 — 3.55:1 on --panel */
  --ink: #2c231b;
  --mut: #6e6154;        /* §6.11 P0 — was #8A7B6B (3.43:1 on --panel2) → 5.02:1 */
  --acc: #c2502f;
  --acc2: #e0724f;
  --accSoft: #f5e1d7;
  --accInk: #ffffff;     /* 4.69:1 */
  --heroScrim: rgba(0, 0, 0, 0.28); /* D-05 - white ink needs a darker gradient here */
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #c2502f;
  --ok: #2c7858;         /* §6.11 P1 — was #2E7D5B (4.23:1 on --okSoft) → 4.52:1 */
  --okSoft: #dff0e8;
  --okInk: #ffffff;
  --warn: #8a5f12;       /* §6.11 P1 — was #B07C1F (3.11:1 on --warnSoft) → 4.80:1 */
  --warnSoft: #f6ecd6;
  --warnInk: #ffffff;
  --bad: #b02e2e;        /* already 5.01:1 on --badSoft — kept verbatim */
  --badSoft: #f6dede;
  --badInk: #ffffff;
  --golge: 0 10px 30px rgba(120, 80, 40, 0.08);
  --shadow-bubble: 0 2px 8px rgba(80, 55, 25, 0.07);
  --shadow-modal: 0 24px 60px rgba(80, 55, 25, 0.28);
}

/* ---- kağıt — v5:22 ----------------------------------------------------- */
:root[data-theme="kagit"],
[data-theme="kagit"] {
  color-scheme: light;
  --bg: #f5f5f4;
  --panel: #ffffff;
  --panel2: #ececea;
  --line: #dededa;
  --lineStrong: #878785; /* §6.11 P1 — 3.60:1 on --panel */
  --ink: #26262a;
  --mut: #6a6a70;        /* §6.11 P0 — was #8A8A90 (2.90:1 on --panel2) → 4.54:1 */
  --acc: #3b3b44;
  --acc2: #5a5a66;
  --accSoft: #e6e6ea;
  --accInk: #ffffff;     /* 11.08:1 */
  --heroScrim: transparent;
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #e8590c;
  --ok: #1f7a50;         /* §6.11 P1 */
  --okSoft: #dff3e9;
  --okInk: #ffffff;
  --warn: #8a5f12;       /* §6.11 P1 */
  --warnSoft: #f6edd6;
  --warnInk: #ffffff;
  --bad: #a82848;        /* §6.11 P1 */
  --badSoft: #fadee5;
  --badInk: #ffffff;
  --golge: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ---- gece yarısı — v5:23 ----------------------------------------------- */
:root[data-theme="gece"],
[data-theme="gece"] {
  color-scheme: dark;
  --bg: #0f1524;
  --panel: #171f33;
  --panel2: #1f2941;
  --line: #2c3854;
  --lineStrong: #6a7386; /* §6.11 P1 — 3.44:1 on --panel */
  --ink: #e6ecf8;
  --mut: #8b97b5;        /* passes as shipped (5.62 / 4.95) */
  --acc: #4c8dff;
  --acc2: #7aabff;
  --accSoft: #1e3355;
  --accInk: #08101f;     /* §6.11 P0 — #fff on --acc was 3.20:1, this is 5.94:1 */
  --heroScrim: transparent;
  --glassBg: rgba(255, 255, 255, 0.24);
  --glassBgHover: rgba(255, 255, 255, 0.36);
  --glassLine: rgba(0, 0, 0, 0.35);
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #ff7a33;
  --ok: #4fbe8b;
  --okSoft: #1f3a2e;
  --okInk: #0a130e;
  --warn: #d9a94a;
  --warnSoft: #3b331d;
  --warnInk: #17141f;
  --bad: #e86a8a;
  --badSoft: #3e2230;
  --badInk: #2a0f18;
  --golge: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-row: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ---- gül — v5:24 ------------------------------------------------------- */
:root[data-theme="gul"],
[data-theme="gul"] {
  color-scheme: light;
  --bg: #fbf0f4;
  --panel: #ffffff;
  --panel2: #f5e3ea;
  --line: #edd3dd;
  --lineStrong: #8f8086; /* §6.11 P1 — 3.75:1 on --panel */
  --ink: #33212a;
  --mut: #7e5e6d;        /* §6.11 P0 — was #A87F91 (2.79:1 on --panel2, the worst) → 4.60:1 */
  --acc: #c2447a;
  --acc2: #da6d9c;
  --accSoft: #f7dce8;
  --accInk: #ffffff;     /* 4.77:1 */
  --heroScrim: rgba(0, 0, 0, 0.28); /* D-05 - white ink needs a darker gradient here */
  --accInkSoft: color-mix(in srgb, var(--acc) 72%, var(--ink));
  --accText: color-mix(in srgb, var(--acc) 60%, var(--ink)); /* phase-5 ux-accent-contrast: the accent as TEXT on --bg / --panel / --panel2 / --accSoft and on an 18% tint of itself, >= 4.5:1 in every palette */
  --tur: #e8590c;
  --ok: #1f7a50;         /* §6.11 P1 */
  --okSoft: #dff3e9;
  --okInk: #ffffff;
  --warn: #8a5f12;       /* §6.11 P1 */
  --warnSoft: #f6edd6;
  --warnInk: #ffffff;
  --bad: #a82848;        /* §6.11 P1 */
  --badSoft: #fadee5;
  --badInk: #ffffff;
  --golge: 0 10px 30px rgba(160, 60, 100, 0.08);
  --shadow-bubble: 0 2px 8px rgba(120, 40, 75, 0.07);
  --shadow-modal: 0 24px 60px rgba(120, 40, 75, 0.3);
}

/* =========================================================================
   UI scale — "Arayüz büyüklüğü" (v5:1579), stored as localStorage
   ["derslik-olcek"] and written to <html data-scale>. Replaces the design's
   `el.style.zoom` (v5:1202), which breaks position:fixed and vh maths
   (§6.9). Everything above is in rem, so moving the root size scales the
   whole UI — including hit targets. `data-olcek` is accepted as the Turkish
   spelling used by visual-system §5.1.
   ========================================================================= */
:root[data-scale="kucuk"],
:root[data-olcek="kucuk"] { font-size: 14.4px; }   /* 0.90 */
:root,
:root[data-scale="normal"],
:root[data-olcek="normal"] { font-size: 16px; }    /* 1.00 */
:root[data-scale="buyuk"],
:root[data-olcek="buyuk"] { font-size: 18.4px; }   /* 1.15 */
:root[data-scale="cokbuyuk"],
:root[data-olcek="cokbuyuk"] { font-size: 20.8px; } /* 1.30 */

/* Chat text size — "Sohbet metni boyutu" (v5:1314). Stored as
   localStorage["derslik-sohbet-boyut"] and written to <html data-sohbet-boyut>
   by the pre-paint bootstrap in `layout()` and by `public/theme.js`
   ([data-metin-pick]). Only the message bubbles move — the rest of the UI is
   the separate `data-scale` axis above. Ayarlar offers the first three steps;
   `cokbuyuk` stays wired for the shared four-step validator. */
:root[data-sohbet-boyut="kucuk"] { --chat-fs: var(--fs-sm); }     /* 13px */
:root[data-sohbet-boyut="normal"] { --chat-fs: var(--fs-md); }    /* 14px */
:root[data-sohbet-boyut="buyuk"] { --chat-fs: var(--fs-xl); }     /* 16px */
:root[data-sohbet-boyut="cokbuyuk"] { --chat-fs: var(--fs-2xl); } /* 18px */

/* =========================================================================
   Global base — v5:14-16, v5:25-33.
   ========================================================================= */
* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* v5:16 hardcodes #6C6AF2 / #4F4DD6 — theme them (§6.10 A14). */
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc2); text-decoration: underline; }

/* Form controls do not inherit the face (v5:31). */
input,
textarea,
select,
button { font-family: var(--font); }

input::placeholder,
textarea::placeholder { color: var(--mut); } /* v5:33 */

/* Restored from Derslik v4.dc.html:25 — v5 dropped it, so its checkboxes
   render in the OS blue on every theme. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--acc); }

::selection { background: var(--accSoft); color: var(--ink); }

/* Scrollbars — v5:26-28, plus the Firefox half the design omits. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--mut); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* v5:104 and v5:433 set scrollbar-width:none but forget Chromium (§6.10 A20). */
.dk-noscroll { scrollbar-width: none; }
.dk-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* The one keyframe the design uses — v5:29. */
@keyframes dkPulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Reduced motion — the design has none and runs dkPulse forever on up to
   five elements at once (§6.9). */
@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;
  }
}

/* The "Animasyonları azalt" setting (v5:1323) maps onto the same switch. */
:root[data-hareket="az"] *,
:root[data-hareket="az"] *::before,
:root[data-hareket="az"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}