/* Verinays — Wikipedia-simple design.
   White background, dark text, a single accent (deep blue), thin borders,
   strong typography, mobile single-column. Data must be the accent itself.

   Theming: colors are driven by custom properties on :root. A light palette
   is the default; a dark palette applies when the user explicitly chose dark
   (html[data-theme="dark"]) OR the OS prefers dark and the user has not made
   an explicit choice (media query, unless overridden with data-theme="light").
*/

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --hover: #fafbfc;
  --lead: #37383a;
  --ink: #202122;
  --ink-soft: #54595d;
  --muted: #72777d;
  --line: #d9dde1;
  --line-strong: #a2a9b1;
  --accent: #1f4e8c;
  --accent-deep: #163a68;
  --accent-under: rgba(31, 78, 140, 0.18);
  --accent-soft: rgba(31, 78, 140, 0.07);
  --on-accent: #ffffff;
  --up: #14653b;
  --up-bg: rgba(20, 101, 59, 0.09);
  --down: #9a2c2c;
  --down-bg: rgba(154, 44, 44, 0.09);
  --chart-area: rgba(31, 78, 140, 0.08);
  --code-bg: #f8f9fa;
  --shadow: rgba(0, 0, 0, 0.12);
  --maxw: 1180px;
}

/* Dark palette. Shared between the system default and the manual choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14181f;
    --surface: #1a2028;
    --hover: #212833;
    --lead: #d6dade;
    --ink: #e7eaee;
    --ink-soft: #c2c8d0;
    --muted: #8f97a3;
    --line: #2e3742;
    --line-strong: #45505e;
    --accent: #7aa7e0;
    --accent-deep: #93bdf0;
    --accent-under: rgba(122, 167, 224, 0.22);
    --accent-soft: rgba(122, 167, 224, 0.10);
    --on-accent: #0e1826;
    --up: #6cc79a;
    --up-bg: rgba(108, 199, 154, 0.13);
    --down: #e28c8c;
    --down-bg: rgba(226, 140, 140, 0.13);
    --chart-area: rgba(122, 167, 224, 0.15);
    --code-bg: #1b212a;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14181f;
  --surface: #1a2028;
  --hover: #212833;
  --lead: #d6dade;
  --ink: #e7eaee;
  --ink-soft: #c2c8d0;
  --muted: #8f97a3;
  --line: #2e3742;
  --line-strong: #45505e;
  --accent: #7aa7e0;
  --accent-deep: #93bdf0;
  --accent-under: rgba(122, 167, 224, 0.22);
  --accent-soft: rgba(122, 167, 224, 0.10);
  --on-accent: #0e1826;
  --up: #6cc79a;
  --up-bg: rgba(108, 199, 154, 0.13);
  --down: #e28c8c;
  --down-bg: rgba(226, 140, 140, 0.13);
  --chart-area: rgba(122, 167, 224, 0.15);
  --code-bg: #1b212a;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* Reader preferences. Set as data-* attributes on <html> by theme.js; the
   defaults live here so a browser with JS off still gets the intended look.
   Sizes are relative to the browser's own font-size, so a reader who has
   already enlarged text everywhere keeps that and scales from it. */
:root {
  --font-family: "Frutiger", "Gill Sans", "Helvetica Neue", Arial,
    "Open Sans", system-ui, sans-serif;
  --font-scale: 1;
}
:root[data-font="system"] {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-font="serif"] {
  --font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
:root[data-font="wide"] {
  /* Wide, open letterforms — easier at small sizes and for low vision. */
  --font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
}
:root[data-font="mono"] {
  --font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
:root[data-size="sm"] { --font-scale: 0.9; }
:root[data-size="lg"] { --font-scale: 1.15; }
:root[data-size="xl"] { --font-scale: 1.3; }

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: calc(100% * var(--font-scale));
}

body {
  margin: 0;
  padding: 0 0 48px;
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  transition: background-color 160ms ease, color 160ms ease;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; font-size: 0.9rem;
}
.skip-link:focus { left: 8px; top: 8px; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; color: var(--ink); }
h1 { font-size: 1.9rem; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-top: 24px; }
h2 { font-size: 1.35rem; margin-top: 2.2rem; }
h3 { font-size: 1.05rem; }

.lead { font-size: 1.1rem; color: var(--lead); max-width: 46em; }
.title-en { margin-top: -4px; font-size: 0.95rem; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.78rem; }
.block { display: block; }
.nowrap { white-space: nowrap; }
.big-value { font-size: 2.2rem; font-weight: 700; margin: 0.2rem 0 0.4rem;
  line-height: 1.15; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ------------------------------------------------------------------ header */
.site-head {
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 10;
}
.head-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo-dot { color: var(--accent); }
.logo-sub { color: var(--muted); font-size: 0.85rem; }

.head-search { display: flex; margin-left: auto; }
.head-search input {
  font: inherit; font-size: 0.9rem; width: 190px;
  padding: 6px 10px; border: 1px solid var(--line-strong);
  border-right: 0; border-radius: 2px 0 0 2px;
  background: var(--bg); color: var(--ink);
}
.head-search input::placeholder { color: var(--muted); }
.head-search input:focus-visible { outline-offset: -2px; }
.head-search button {
  display: flex; align-items: center; justify-content: center;
  padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: 0 2px 2px 0; cursor: pointer;
  background: var(--code-bg); color: var(--ink-soft);
}
.head-search button:hover { color: var(--accent); border-color: var(--accent); }

.nav { display: flex; align-items: center; gap: 16px; font-size: 0.95rem; }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.nav-toggle { display: none; }

/* Appearance preferences panel */
.prefs { position: relative; }
.prefs-summary {
  list-style: none; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  width: 34px; height: 32px; border-radius: 2px;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  background: transparent;
}
.prefs-summary::-webkit-details-marker { display: none; }
.prefs-summary:hover { color: var(--accent); border-color: var(--accent); }
.prefs[open] .prefs-summary { background: var(--code-bg); color: var(--accent);
  border-color: var(--accent); }
.prefs-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: 262px; padding: 14px 16px; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 4px 14px var(--shadow);
}
.prefs-title { margin: 0 0 10px; font-size: 0.95rem;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.prefs-group { border: 0; margin: 0 0 14px; padding: 0; }
.prefs-group legend { font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 5px; }
.prefs-options { display: flex; gap: 5px; flex-wrap: wrap; }
.prefs-options-col { flex-direction: column; gap: 2px; }
.prefs-options label { flex: 1 1 auto; }
.prefs-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.prefs-options span {
  display: block; text-align: center; cursor: pointer;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 0.85rem; color: var(--ink-soft); background: var(--bg);
}
.prefs-options-col span { text-align: left; }
.prefs-options span:hover { border-color: var(--accent); color: var(--accent); }
.prefs-options input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.prefs-options input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Each option previews the thing it selects. */
.pf-default { font-family: "Frutiger", "Gill Sans", "Helvetica Neue", Arial, sans-serif; }
.pf-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pf-serif { font-family: Georgia, "Times New Roman", serif; }
.pf-wide { font-family: Verdana, Tahoma, sans-serif; }
.pf-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ps-sm { font-size: 0.75rem; } .ps-md { font-size: 0.9rem; }
.ps-lg { font-size: 1.05rem; } .ps-xl { font-size: 1.2rem; }
.prefs-foot { margin: 0; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.prefs-foot .btn-small { align-self: flex-start; }

/* ------------------------------------------------------------------ footer */
.site-foot {
  border-top: 1px solid var(--line-strong);
  margin-top: 48px;
  padding: 20px 0 0;
  font-size: 0.85rem;
}
.foot-inner { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.foot-main { flex: 1 1 420px; max-width: 60em; }
.foot-links h2 { font-size: 0.85rem; margin: 0 0 6px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* -------------------------------------------------------------- hero/search */
.hero { margin: 26px 0 8px; }
.hero h1 { border-bottom: 0; margin-top: 0; font-size: 2.1rem; letter-spacing: -0.02em; }
.hero-lead { color: var(--lead); font-size: 1.05rem; max-width: 46em; margin: 6px 0 14px; }
.search { display: flex; gap: 8px; margin: 14px 0 8px; max-width: 640px; }
.search input {
  flex: 1; font: inherit; padding: 10px 12px; font-size: 1.05rem;
  border: 1px solid var(--line-strong); border-radius: 2px;
  color: var(--ink); background: var(--bg); min-width: 0;
}
.search input::placeholder { color: var(--muted); }
.search input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-under); }
.search button {
  font: inherit; padding: 10px 22px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  border-radius: 2px; white-space: nowrap;
}
.search button:hover { background: var(--accent-deep); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }

/* ---------------------------------------------------------- editorial UI */
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 0.74rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.section-heading { display: flex; align-items: end; justify-content: space-between;
  gap: 18px; margin: 2.2rem 0 12px; }
.section-heading h2, .section-heading p { margin-top: 0; }
.section-heading h2 { margin-bottom: 0; }
.section-link { flex: none; font-size: 0.88rem; font-weight: 600; }

.topic-section { margin-top: 36px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; }
.topic-card { padding: 16px 18px; border: 1px solid var(--line);
  background: var(--surface); min-height: 190px; }
.topic-card:hover { border-color: var(--line-strong); background: var(--hover); }
.topic-card h3 { margin: 0 0 4px; font-size: 1.08rem; }
.topic-card p { color: var(--muted); font-size: 0.86rem; margin: 0 0 14px;
  min-height: 2.8em; }
.topic-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.topic-card li { border-top: 1px solid var(--line); padding-top: 7px;
  font-size: 0.88rem; }
.home-lower { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--line); }

.dataset-headline { margin-top: 22px; }
.insight-strip { display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 22px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.insight-strip > div { padding: 11px 14px; border-right: 1px solid var(--line); }
.insight-strip > div:first-child { padding-left: 0; }
.insight-strip > div:last-child { border-right: 0; }
.insight-strip dt { color: var(--muted); font-size: 0.76rem; }
.insight-strip dd { margin: 2px 0 0; font-size: 0.95rem; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.chart-heading { margin-top: 1.8rem; }
.chart-section { padding: 2px 0 12px; }
.chart-section #chart { height: 390px; }

/* --------------------------------------------------------------------- chips */
.chip {
  display: inline-block; font-size: 0.82rem; line-height: 1.4;
  padding: 3px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink-soft);
  cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip-on, .chip[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.chip-on:hover, .chip[aria-current="true"]:hover { color: var(--on-accent); }
.chip-sm { font-size: 0.75rem; padding: 1px 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

.btn-small {
  display: inline-block; font: inherit; font-size: 0.85rem;
  padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--code-bg); color: var(--ink); cursor: pointer;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.download-row, .notfound-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------- stat tiles */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px; margin: 14px 0;
}
.stat {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 12px 14px; background: var(--surface);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.stat:hover { background: var(--hover); }
.stat-label { margin: 0 0 2px; font-size: 0.9rem; font-weight: 600; }
.stat-label a { color: var(--ink); }
.stat-value {
  margin: 2px 0 6px; font-size: 1.7rem; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 0.85rem; font-weight: 400; color: var(--muted); margin-left: 5px; }
/* A prefixed unit ('%25,5') needs its gap on the other side. */
.unit-pre { margin-left: 0; margin-right: 2px; }
.stat-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stat-period { font-size: 0.8rem; color: var(--muted); }

/* ------------------------------------------------------------ change badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 600; padding: 1px 8px;
  border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.badge-up { color: var(--up); background: var(--up-bg); }
.badge-down { color: var(--down); background: var(--down-bg); }
.badge-flat { color: var(--muted); background: var(--code-bg); }
.badge-note { font-size: 0.78rem; }

/* Verification level. Deliberately quiet: it is a provenance label, not a
   score, and must not compete with the number it sits next to. */
.verif {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  padding: 1px 7px; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  background: var(--surface); cursor: help;
}
.verif-resmi-kaynak { border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); }
.verif-dogrulanmis { border-color: var(--up); color: var(--up);
  background: var(--up-bg); }
.verif-kaynak-belirtilmis { border-style: dashed; }
.verif-dogrulanmamis { border-color: var(--down); color: var(--down);
  background: var(--down-bg); }

.chip.role-official { border-color: var(--accent); color: var(--accent); }
.chip.role-mirror, .chip.role-historical, .chip.role-alternative {
  border-style: dashed;
}
.source-roles { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.source-roles li { margin: 4px 0; }

.warn-box {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--down);
  background: var(--down-bg); padding: 10px 14px; margin: 10px 0;
}
.warn-title { margin: 0 0 4px; font-weight: 600; }
.warn-box p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- tables */
.data-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.data-table th, .data-table td {
  border: 1px solid var(--line); padding: 6px 10px; text-align: left;
}
.data-table thead th {
  background: var(--code-bg); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td { vertical-align: top; }
.data-table.compact td, .data-table.compact th { padding: 4px 8px; }
.data-table tbody tr:hover td, .data-table tbody tr:hover th { background: var(--hover); }
.data-table tbody th { font-weight: 500; }
.data-table tr.row-on td, .data-table tr.row-on th { background: var(--accent-soft); }
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--line); margin: 10px 0;
}
.table-scroll .data-table { border: 0; }
.table-scroll .data-table th:first-child,
.table-scroll .data-table td:first-child { border-left: 0; }

.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.plain li { padding: 7px 0; border-bottom: 1px dashed var(--line); }

.result-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.result-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.result-list p { margin: 4px 0 0; }
.result-title { font-size: 1.05rem; font-weight: 600; margin-right: 8px; }
.result-count { margin: 12px 0 0; }

.endpoint-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.endpoint-list code { display: inline-block; overflow-wrap: anywhere; }
.endpoint-list span { display: block; }

.totals {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; padding: 0;
}
.totals > div {
  flex: 1 1 120px; border: 1px solid var(--line); background: var(--surface);
  padding: 10px 14px;
}
.totals dt { font-size: 0.8rem; color: var(--muted); }
.totals dd { margin: 0; font-size: 1.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ filters */
.filters { margin: 16px 0 4px; display: grid; gap: 10px; }
.filter-search input {
  font: inherit; width: 100%; max-width: 420px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--bg); color: var(--ink);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-count { margin: 0; }
.filter-empty { padding: 24px 0; text-align: center; }

/* ------------------------------------------------------- article + infobox */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 28px; align-items: start; }
.article > *, .article > section { min-width: 0; }
.article-wide { display: block; }
/* Anything holding a wide table takes the whole width. The sidebar earns its
   place beside the chart, where there is vertical room to spare — but below
   it, squeezing a twelve-column table into 720px while 300px of sidebar sits
   empty is the layout working against the content. */
.article > .wide { grid-column: 1 / -1; }
.dataset-main, .indicator-main { grid-column: 1; grid-row: 1; min-width: 0; }
.dataset-summary { grid-column: 1; grid-row: 1; min-width: 0; }
.dataset-summary h1 { margin-bottom: 0; }
.indicator-summary { grid-column: 1; grid-row: 1; min-width: 0; }
.indicator-summary h1 { margin-bottom: 0; }
.detail-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px;
  margin: 8px 0 12px; color: var(--muted); font-size: 0.84rem;
}
.detail-kicker a { font-weight: 600; }
.detail-kicker .badge { margin-left: 2px; }
.dataset-summary .lead, .indicator-summary .lead { margin: 10px 0 14px; }
.indicator-headline { margin-top: 18px; }
.indicator-insights { margin-bottom: 8px; }
.detail-related { margin-top: 10px; }

.infobox {
  grid-column: 2; grid-row: 1;
  border: 1px solid var(--line-strong); background: var(--code-bg);
  padding: 14px 16px; margin: 24px 0 16px; font-size: 0.9rem;
}
.infobox h2 { margin: 0 0 8px; font-size: 1rem; border-bottom: 1px solid var(--line);
  padding-bottom: 5px; }
.infobox dl { margin: 0; }
.infobox dt { color: var(--muted); margin-top: 9px; font-size: 0.82rem; }
.infobox dd { margin: 0; overflow-wrap: anywhere; }
.infobox-series { margin: 0; }
.infobox-badges { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.infobox-actions { display: flex; gap: 6px; margin: 14px 0 0; }
.infobox .big-value .unit { font-size: 0.9rem; margin-left: 4px; }

.breadcrumb { font-size: 0.85rem; color: var(--muted); margin: 14px 0 0; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 8px 14px; margin: 12px 0;
}
.note { border-left: 3px solid var(--accent); padding: 4px 16px; }
.note h2 { margin-top: 0.6rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 32px; }

.series-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px;
  max-height: 8.4em; overflow-y: auto; }
/* A series in a different kind of unit cannot join the comparison, so it
   reads as a separate action rather than one more thing to tick. */
.chip-other { border-style: dashed; color: var(--muted); }
.chip-other:hover { color: var(--accent); }
.series-hint { margin: 0 0 10px; }

.notfound { max-width: 40em; margin: 32px auto; text-align: center; }
.notfound-code { font-size: 4rem; font-weight: 700; color: var(--line-strong);
  margin: 0; line-height: 1; }
.notfound h1 { border-bottom: 0; }
.notfound .search { margin: 20px auto; }
.notfound-links { justify-content: center; }

/* ------------------------------------------------------- donation form */
.donate-form { max-width: 44em; margin: 14px 0; }
.field { margin: 0 0 16px; }
.field > label, .field legend {
  display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px;
}
.field input[type="url"], .field input[type="text"], .field input:not([type]),
.field textarea, .field select {
  font: inherit; width: 100%; padding: 8px 10px; border-radius: 2px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
}
.field textarea { resize: vertical; }
.field .hint { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }
.field-row { display: grid; gap: 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
fieldset.field { border: 1px solid var(--line); padding: 10px 14px;
  background: var(--code-bg); }
.req { color: var(--down); }
.check { display: flex; gap: 8px; align-items: flex-start;
  font-weight: 400; font-size: 0.88rem; margin: 8px 0; cursor: pointer; }
.check input { margin-top: 4px; flex: none; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-primary {
  font: inherit; padding: 9px 20px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-deep); }
h3.yes { color: var(--up); }
h3.no { color: var(--down); }
.steps { padding-left: 20px; }
.steps li { margin: 6px 0; }

/* ------------------------------------------------------------ provenance */
.provenance { background: var(--code-bg); border: 1px solid var(--line); padding: 12px 16px; }
.provenance h2 { margin-top: 0.8rem; }
dl.meta { font-size: 0.9rem; }
dl.meta dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; margin: 10px 0 2px; }
dl.meta dd { margin: 0; overflow-wrap: anywhere; }
.source-line { margin: 6px 0 0; }
.provider-links { margin: 6px 0 0; }

code { background: var(--code-bg); border: 1px solid var(--line); padding: 1px 5px;
  font-size: 0.9em; border-radius: 2px; }
pre.code { background: var(--code-bg); border: 1px solid var(--line);
  padding: 12px 14px; overflow-x: auto; border-radius: 2px; }
pre.code code { border: 0; padding: 0; background: none; }
code.block { display: block; padding: 10px 12px; margin: 8px 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------- chart */
.chart-box { position: relative; margin: 12px 0; }
#chart { width: 100%; height: 340px; margin: 8px 0; }
#chart svg { display: block; width: 100%; height: 100%; cursor: crosshair;
  touch-action: pan-y; }
#chart .grid { stroke: var(--line); stroke-width: 1; }
#chart .axis-text { fill: var(--muted); font-size: 11px; }
#chart .line { stroke: var(--accent); stroke-width: 2; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
#chart .dot { fill: var(--accent); }
#chart .area { fill: var(--chart-area); stroke: none; }
#chart .zero { stroke: var(--line-strong); stroke-width: 1; }
#chart .cross { stroke: var(--line-strong); stroke-width: 1;
  stroke-dasharray: 3 3; stroke-opacity: 0; }
#chart .hover-dot { fill: var(--accent); stroke: var(--bg);
  stroke-width: 1.5; stroke-opacity: 0; }
#chart .overlay-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
#chart .bar { fill: var(--accent); }
#chart .bar-hover { fill: var(--accent-deep); }
/* --down is the site's negative colour and already flips with the theme;
   a hard-coded red would have stayed dark-on-dark. --text was never a token
   here (the ink colours are --ink / --ink-soft), so these labels rendered in
   the browser default black and vanished against the dark surface. */
#chart .bar-neg { fill: var(--down); }
#chart .cat-head { font-weight: 700; fill: var(--muted); }
#chart .cat-label { font-size: 12px; fill: var(--ink); }
#chart .cat-value { font-size: 12px; font-variant-numeric: tabular-nums;
  fill: var(--muted); }
.cat-period { display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--muted); }
.cat-period select { font: inherit; padding: 2px 6px; border: 1px solid
  var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--ink); }
#chart .dot-sm { fill: var(--accent); opacity: 0.55; }
#chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chart-tooltip { position: absolute; display: none; background: var(--bg);
  border: 1px solid var(--line-strong); padding: 5px 10px; font-size: 0.8rem;
  white-space: nowrap; pointer-events: none; z-index: 5; border-radius: 2px;
  box-shadow: 0 2px 6px var(--shadow); }
.chart-tooltip b { font-variant-numeric: tabular-nums; }

.chart-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 6px; position: relative; flex-wrap: wrap; }
.chart-bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chart-bar-title { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.legend-primary { background: var(--accent); }
.chart-type, .chart-range, .chart-scale { display: inline-flex; gap: 4px; }
.chart-type button, .chart-range button, .chart-scale button {
  font: inherit; font-size: 0.78rem; padding: 3px 10px;
  border: 1px solid var(--line-strong); background: var(--code-bg);
  color: var(--ink); cursor: pointer; border-radius: 2px;
}
.chart-type button:hover, .chart-range button:hover,
.chart-scale button:hover { border-color: var(--accent); }
.chart-type button[aria-pressed="true"],
.chart-range button[aria-pressed="true"],
.chart-scale button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.chart-export { position: relative; }
.chart-export-menu summary { list-style: none; cursor: pointer; display: inline-block;
  font-size: 0.82rem; color: var(--accent); border: 1px solid var(--line-strong);
  padding: 4px 12px; border-radius: 2px; user-select: none; }
.chart-export-menu summary::-webkit-details-marker { display: none; }
.chart-export-menu[open] summary { background: var(--code-bg); }
.chart-export-actions { display: flex; flex-wrap: wrap; gap: 6px;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6;
  padding: 8px; background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 2px 6px var(--shadow); min-width: 130px; border-radius: 2px; }
.chart-export-actions button, .chart-export-actions a { font: inherit; font-size: 0.8rem;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--code-bg); color: var(--ink); cursor: pointer; text-decoration: none; }
.chart-export-actions button:hover, .chart-export-actions a:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .article { display: block; }
  .infobox { display: block; margin: 20px 0 24px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-strip { grid-column: auto; }
}

@media (max-width: 720px) {
  .site-head { position: static; }
  .head-inner { gap: 10px; }
  .logo-sub { display: none; }
  .head-search { order: 3; width: 100%; margin-left: 0; }
  .head-search input { width: 100%; }
  .nav-toggle {
    display: flex; margin-left: auto; width: 38px; height: 32px;
    align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 2px;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 16px; height: 2px; background: var(--ink-soft);
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav {
    order: 4; width: 100%; display: none; flex-direction: column;
    align-items: flex-start; gap: 0; border-top: 1px solid var(--line);
    padding-top: 6px; margin-top: 4px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 9px 2px; width: 100%; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { box-shadow: none; }
  .prefs { order: 2; }
  .prefs-panel { width: min(280px, calc(100vw - 32px)); }
  h1 { font-size: 1.55rem; }
  .hero h1 { font-size: 1.7rem; }
  .big-value { font-size: 1.8rem; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .stat-value { font-size: 1.4rem; }
  .search { flex-direction: column; }
  .search button { width: 100%; }
  .table-scroll { max-height: none; }
  .data-table { font-size: 0.86rem; }
  .data-table thead th { position: static; }
  .foot-inner { gap: 20px; }
  #chart { height: 260px; }
  .section-heading { align-items: flex-start; }
  .insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-strip > div:nth-child(2) { border-right: 0; }
  .insight-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .insight-strip > div:first-child, .insight-strip > div:nth-child(3) { padding-left: 0; }
}

@media print {
  .site-head, .site-foot, .breadcrumb, .search, .prefs,
  .chart-bar, .skip-link, .filters, .series-switch { display: none; }
  body { padding: 0; font-size: 11pt; transition: none; }
  a { color: var(--ink); text-decoration: none; }
  .table-scroll { max-height: none; overflow: visible; border: 0; }
  .article { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stat, body { transition: none; }
}

/* --------------------------------------------------- series picker & compare */
/* Selected series stay in view; the full list hides behind a disclosure so a
   dataset with fifty series does not bury its own chart. */
.series-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.series-menu { margin: 0 0 10px; }
.series-menu summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: 0.85rem; color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: 4px 12px; user-select: none;
}
.series-menu summary::-webkit-details-marker { display: none; }
.series-menu[open] summary { background: var(--code-bg); }
.series-menu-body { margin-top: 8px; }

.compare-picker { max-width: 44em; margin: 16px 0; }
.compare-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

/* ============================================================== mobile pass */
/* Touch targets. The pointer on a phone is a fingertip, not a cursor: a chip
   sized for a mouse is a miss waiting to happen. Raised only where the input
   is actually touch, so desktop density is not sacrificed for it. */
@media (pointer: coarse) {
  .chip { padding: 8px 14px; }
  .chip-sm { padding: 5px 11px; }
  .btn-small { padding: 9px 15px; }
  .chart-type button, .chart-range button, .chart-scale button {
    padding: 8px 13px;
  }
  .nav a { padding: 12px 2px; }
  .prefs-options span { padding: 9px 12px; }
  .series-menu summary { padding: 9px 15px; }
}

@media (max-width: 720px) {
  /* The control bar carries range, type, scale and download. Side by side
     they overflow a phone; stacked with the legend on its own line they stay
     reachable and the chart keeps its height. */
  .chart-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .chart-bar-left { gap: 8px; }
  .chart-type, .chart-range, .chart-scale { flex-wrap: wrap; }
  .chart-export { align-self: flex-start; }
  .chart-export-actions { right: auto; left: 0; }
  .chart-legend { font-size: 0.78rem; }

  /* A wide table on a narrow screen scrolls sideways. Freezing the period
     column keeps the reader oriented — without it you scroll right and lose
     track of which row you are on. */
  .table-scroll { border-left: 0; border-right: 0; margin-left: -16px;
    margin-right: -16px; }
  .data-table tbody th[scope="row"] {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg); border-right: 1px solid var(--line-strong);
  }
  .data-table tbody tr:hover th[scope="row"] { background: var(--hover); }

  /* Stat tiles: two per row reads better than one tall column. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left-width: 3px; padding: 10px 12px; }

  .series-switch { max-height: 11em; }
  .totals > div { flex-basis: calc(50% - 5px); }
  .infobox-actions, .download-row { flex-wrap: wrap; }
  .filter-search input { max-width: none; }
  pre.code { font-size: 0.8rem; }
  .notfound-code { font-size: 3rem; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.45rem; }
  h1 { font-size: 1.4rem; }
  .big-value { font-size: 1.6rem; }
  .stat-value { font-size: 1.3rem; }
  #chart { height: 220px; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { min-height: 0; }
  .section-heading { display: block; }
  .section-link { display: inline-block; margin-top: 8px; }
  .compare-modes { flex-direction: column; align-items: stretch; }
  .compare-modes .chip { text-align: center; }
}

/* A long label must not push a table sideways on its own. */
.data-table td, .data-table th { overflow-wrap: anywhere; }
.data-table td.num, .data-table th.num { overflow-wrap: normal; }

/* ------------------------------------------------- reading order on mobile */
/* On a wide screen the künye is a sidebar beside the chart. Stacked on a
   phone it lands between the description and the chart — nine rows of
   metadata before the thing the reader came for. Flex ordering puts the
   chart back on top without moving anything in the markup, so the document
   order a screen reader follows stays the logical one. */
/* No ordering hack is needed: the markup itself now reads title, number,
   chart, künye — the same order on a phone, on a desktop and in a screen
   reader. The desktop sidebar is placed by the grid, not by position. */

/* The headline: what the number is right now, before any metadata. */
.headline { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 14px 0 4px; }
.headline-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin: 0; }
.headline-unit { font-size: 0.95rem; font-weight: 400; color: var(--muted);
  margin-left: 5px; }
.headline-meta { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0; }
.headline-series { color: var(--muted); font-size: 0.9rem; }

/* Reference sections a reader consults rather than reads. */
.folded { border: 1px solid var(--line); border-radius: 2px;
  margin: 14px 0; background: var(--surface); }
.folded > summary { cursor: pointer; list-style: none; padding: 10px 14px;
  font-weight: 600; font-size: 1rem; color: var(--ink); }
.folded > summary::-webkit-details-marker { display: none; }
.folded > summary::before { content: "▸ "; color: var(--muted); }
.folded[open] > summary::before { content: "▾ "; }
.folded[open] > summary { border-bottom: 1px solid var(--line); }
.folded > .folded-body { padding: 4px 14px 14px; }

/* --- Choropleth ---------------------------------------------------------
   Shapes carry a bin class, never a fill, so one SVG serves both themes.

   The dark ramp is chosen, not flipped. On a light surface "near zero"
   recedes by being pale; on a dark surface it recedes by being dark, so the
   anchor moves and "a lot" comes forward as light. An inverted light ramp
   would put the loudest colour on the emptiest places. */
.choropleth { width: 100%; height: auto; display: block; }
.choropleth path { stroke: var(--surface); stroke-width: 1.6; stroke-linejoin: round; }
.choropleth path.na { fill: var(--line); }

/* Sequential — one hue, light to dark (documented blue ramp). */
:root {
  --q0: #cde2fb; --q1: #9ec5f4; --q2: #5598e7; --q3: #256abf; --q4: #0d366b;
  /* Diverging — blue and red either side of a neutral grey. */
  --d0: #1c5cab; --d1: #86b6ef; --d2: #e6e4e0; --d3: #e8968b; --d4: #b02a2a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --q0: #17324f; --q1: #1c5cab; --q2: #3987e5; --q3: #86b6ef; --q4: #cde2fb;
    --d0: #86b6ef; --d1: #2a78d6; --d2: #45443f; --d3: #c95a4c; --d4: #f0a79a;
  }
}
:root[data-theme="dark"] {
  --q0: #17324f; --q1: #1c5cab; --q2: #3987e5; --q3: #86b6ef; --q4: #cde2fb;
  --d0: #86b6ef; --d1: #2a78d6; --d2: #45443f; --d3: #c95a4c; --d4: #f0a79a;
}
.choropleth path.q0 { fill: var(--q0); } .choropleth path.q1 { fill: var(--q1); }
.choropleth path.q2 { fill: var(--q2); } .choropleth path.q3 { fill: var(--q3); }
.choropleth path.q4 { fill: var(--q4); }
.choropleth path.d0 { fill: var(--d0); } .choropleth path.d1 { fill: var(--d1); }
.choropleth path.d2 { fill: var(--d2); } .choropleth path.d3 { fill: var(--d3); }
.choropleth path.d4 { fill: var(--d4); }

.map-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 10px 0 0;
              padding: 0; list-style: none; font-size: 0.82rem; }
.map-legend li { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.map-legend .swatch { width: 15px; height: 15px; border-radius: 3px;
                      border: 1px solid var(--line); flex: none; }
.map-legend .q0 { background: var(--q0); } .map-legend .q1 { background: var(--q1); }
.map-legend .q2 { background: var(--q2); } .map-legend .q3 { background: var(--q3); }
.map-legend .q4 { background: var(--q4); }
.map-legend .d0 { background: var(--d0); } .map-legend .d1 { background: var(--d1); }
.map-legend .d2 { background: var(--d2); } .map-legend .d3 { background: var(--d3); }
.map-legend .d4 { background: var(--d4); }

/* İnceleme grafikleri (app/viz.py). Renk sıraya göre değil işe göre: tek
   seri accent, karşıtlık taşıyan ikinci seri --down. Bir seri elendiğinde
   kalanların rengi değişmez. */
.viz { width: 100%; height: auto; display: block; margin: 14px 0 4px; }
.viz .grid { stroke: var(--line); stroke-width: 1; }
.viz .ln { fill: none; stroke-width: 2; stroke-linejoin: round;
  stroke-linecap: round; }
.viz .s1 { stroke: var(--accent); }
.viz .s2 { stroke: var(--down); }
.viz circle.s1 { fill: var(--accent); stroke: none; }
.viz circle.s2 { fill: var(--down); stroke: none; }
.viz text { font: 12px/1.2 inherit; fill: var(--ink-soft); }
.viz .lbl { font-weight: 600; }
.viz .lbl.s1 { fill: var(--accent); }
.viz .lbl.s2 { fill: var(--down); }
.viz .tick, .viz .axis { font-size: 11px; }
/* Olay çizgisi geri planda durur: veriyi değil bağlamı taşır. */
.viz .note-line { stroke: var(--line-strong); stroke-width: 1;
  stroke-dasharray: 3 3; }
.viz .note { font-size: 11px; fill: var(--ink-soft); }
.viz .panel-title { font-size: 11px; font-weight: 600; fill: var(--ink); }
.viz .panel-val { font-size: 11px; fill: var(--accent); font-weight: 600; }
.viz-matrix .mx { stroke: var(--bg); stroke-width: 2; }
.viz-matrix .mx.q0 { fill: var(--q0); } .viz-matrix .mx.q1 { fill: var(--q1); }
.viz-matrix .mx.q2 { fill: var(--q2); } .viz-matrix .mx.q3 { fill: var(--q3); }
.viz-matrix .mx.q4 { fill: var(--q4); }
/* Köşegen ölçeğin dışında: kendi kendini alkışlama beklenen şeydir ve
   renklendirilirse diğer her şeyi görünmez yapar. Sayısı yine okunur. */
.viz-matrix .mx-self { fill: var(--accent-soft); }
.viz-matrix .mx-head { font-size: 11px; font-weight: 600; fill: var(--ink); }
.viz-matrix .mx-val { font-size: 11px; fill: var(--ink); }
/* Koyu hücrede koyu yazı okunmaz; eşiği geçen hücrede yazı zemine döner. */
.viz-matrix .mx-val.on { fill: var(--bg); font-weight: 600; }