/* Kodprova styles. Direction A ("proofreading"): code is a proof, the user
   circles a line like an editor and writes a note in the margin; the result
   shows the editor's correction marks.

   The files follow the design spec's reference stylesheet section by section
   and in the same order, so the cascade is the one that was measured. Narrow
   screen overrides come last on purpose (narrow.css). *//* Typefaces, served from this site (no third-party requests; spec T20).
   Files come from the Fontsource npm packages; only the Latin subsets are
   declared, which cover Turkish and English. All three families are under the
   SIL Open Font License 1.1. Source Serif 4 uses the wght-only files (no
   optical-size axis) and IBM Plex Sans has no 500 weight: both keep the
   Turkish pages light enough for the Lighthouse target (spec v1.2). */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/source-serif-4-latin-wght-normal-D9elroTD.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/source-serif-4-latin-ext-wght-normal-CxNHBx-q.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-400-normal-CDDApCn2.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ext-400-normal-C5H60-Va.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-600-normal-CuJfVYMP.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ext-600-normal-DOrvGEcy.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-400-normal-BmRBH3aV.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-ext-600-normal-D38SheWl.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback for Source Serif 4 (spec v1.2): Georgia scaled to
   the width of the wght files, so text does not reflow when the web font
   arrives. Regular for weights up to 500, bold above. */
@font-face {
  font-family: "Kodprova Serif Yedek";
  font-style: normal;
  font-weight: 200 500;
  src: local("Georgia");
  size-adjust: 107.5%;
}

@font-face {
  font-family: "Kodprova Serif Yedek";
  font-style: normal;
  font-weight: 501 900;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 93.5%;
}

/* Metric-matched fallback for IBM Plex Mono: Consolas widened to Plex Mono's
   0.6 em advance, so inline code in running text keeps its line breaks. */
@font-face {
  font-family: "Kodprova Mono Yedek";
  font-style: normal;
  font-weight: 200 500;
  src: local("Consolas");
  size-adjust: 109.13%;
}

@font-face {
  font-family: "Kodprova Mono Yedek";
  font-style: normal;
  font-weight: 501 900;
  src: local("Consolas Bold"), local("Consolas-Bold");
  size-adjust: 109.13%;
}

/* Design tokens (design spec v1, §1). Names are the spec's own (Turkish), so the
   code and the spec can be read side by side. A short glossary:
     zemin = page background · yuzey = code surface · metin = text · soluk = muted
     cizgi = rule · cizgi-ui = control border · murekkep = ink (the editor's red pen)
     bulundu = found · kacti = missed · yanlis = false alarm · odak = focus ring
     t-* = type styles · b-* = spacing steps · sure-* = durations · egri-* = easing
   Components use these tokens only: no raw colours, sizes or durations. */

:root {
  color-scheme: light;

  /* Renk: açık */
  --zemin: #ffffff;
  --yuzey: #f2f4f6;
  --metin: #1b1c1e;
  --soluk: #585d64;
  --cizgi: #d6dbe0;
  --cizgi-ui: #80868e;
  --murekkep: #b42318;
  --murekkep-zemin: #fcefed;
  --murekkep-metin: #ffffff;
  --bulundu: #1d6a3b;
  --bulundu-zemin: #ebf4ee;
  --kacti: #b42318;
  --yanlis: #585d64;
  --odak: #1b1c1e;

  /* Sözdizimi (kod yüzeyinde, işaretli satır zemininde ve fark zemininde ≥ 4,5) */
  --s-anahtar: #1b1c1e;
  --s-dize: #84470a;
  --s-sayi: #1b5aa0;
  --s-islev: #573996;
  --s-tip: #0b5e5a;
  --s-yorum: #585d64;

  /* Yazı tipi aileleri */
  --f-serif:
    "Source Serif 4", "Kodprova Serif Yedek", Georgia, "Times New Roman", serif;
  --f-sans:
    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:
    "IBM Plex Mono", "Kodprova Mono Yedek", ui-monospace, "Cascadia Mono",
    Consolas, monospace;

  /* Tip ölçeği: ağırlık boyut/satır aile (1 rem = 16 px). Dar ekran karşılıkları §8'de. */
  --t-gosteri: 470 2.75rem / 1.14 var(--f-serif);
  --t-baslik: 500 2.125rem / 1.18 var(--f-serif);
  --t-bolum: 550 1.625rem / 1.23 var(--f-serif);
  --t-not: 600 1.1875rem / 1.37 var(--f-serif);
  --t-ornek: 400 1.3125rem / 1.52 var(--f-serif);
  --t-okuma: 400 1.125rem / 1.56 var(--f-serif);
  --t-govde: 400 1rem / 1.5 var(--f-sans);
  --t-dugme: 600 1rem / 1.25 var(--f-sans);
  --t-kucuk: 400 0.875rem / 1.43 var(--f-sans);
  --t-etiket: 400 0.8125rem / 1.38 var(--f-sans);
  --t-kod: 400 0.9375rem / 1.625rem var(--f-mono);
  --t-satir-no: 400 0.8125rem / 1 var(--f-mono);

  /* Boşluk (4 px tabanı) */
  --b-1: 0.25rem;
  --b-2: 0.5rem;
  --b-3: 0.75rem;
  --b-4: 1rem;
  --b-5: 1.5rem;
  --b-6: 2rem;
  --b-7: 2.5rem;
  --b-8: 3rem;
  --b-9: 4.5rem;

  /* Ölçüler */
  --sayfa-max: 77.5rem;
  --sayfa-pay: 2rem;
  --kenar-gen: 18.75rem;
  --kenar-ara: 2.5rem;
  --olcu: 40rem;
  --kod-satir: 1.625rem;
  --oluk: 3.5rem;
  --halka: 1.625rem;
  --dugme-y: 3rem;
  --dokunma: 2.75rem;

  /* Çizgi ve köşe */
  --c-ince: 1px;
  --c-kalin: 2px;
  --c-murekkep: 1.5px;
  --kose: 2px;

  /* Hareket */
  --egri-cikis: cubic-bezier(0.2, 0, 0, 1);
  --egri-ciz: cubic-bezier(0.65, 0, 0.35, 1);
  --sure-hizli: 120ms;
  --sure-daire: 180ms;
  --sure-not: 240ms;
  --sure-bag: 320ms;
  --sure-cizgi: 420ms;
  --ara-sira: 60ms;
  --ara-cizgi: 120ms;
}

/* Dark: follows the device setting only; there is no theme switch (spec A1, T9). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --zemin: #131416;
    --yuzey: #1c1e21;
    --metin: #e8eaed;
    --soluk: #a3a9b1;
    --cizgi: #33373c;
    --cizgi-ui: #78808a;
    --murekkep: #ff8b7b;
    --murekkep-zemin: #3a201d;
    --murekkep-metin: #131416;
    --bulundu: #6fcf97;
    --bulundu-zemin: #172a20;
    --kacti: #ff8b7b;
    --yanlis: #a3a9b1;
    --odak: #e8eaed;
    --s-anahtar: #e8eaed;
    --s-dize: #e3b577;
    --s-sayi: #8db8f0;
    --s-islev: #c8acf2;
    --s-tip: #6cc9c1;
    --s-yorum: #a3a9b1;
  }
}
/* ======================= 2. Taban ======================= */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: var(--t-govde);
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}

/* Metin içi bağlantı: dokunma yüksekliği ≥ 24 (WCAG 2.5.8) */
main p a:not(.dugme),
.alt a,
.yol a {
  padding-block: 0.25rem;
}

/* Satır içi kod (görev, açıklama, test seçeneği, örnek cevap içindeki `…`) */
:not(pre) > code,
.satir-ici {
  font-family: var(--f-mono);
  font-size: 0.875em;
  padding: 0 0.2em;
  border-radius: var(--kose);
  background: var(--yuzey);
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

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

.atla {
  position: absolute;
  left: var(--b-4);
  top: -4rem;
  z-index: 10;
  padding: var(--b-2) var(--b-4);
  background: var(--metin);
  color: var(--zemin);
  font: var(--t-dugme);
}

.atla:focus {
  top: var(--b-2);
}

/* ======================= 3. Sayfa ızgarası ======================= */

.sayfa {
  max-width: var(--sayfa-max);
  margin: 0 auto;
  padding: 0 var(--sayfa-pay);
}

main {
  display: block;
  outline: none;
  padding-bottom: var(--b-9);
}

/* Programla odaklanan main'e halka çizilmez; genel :focus-visible kuralını aynı sözde sınıfla yener (0,1,1). */
main:focus-visible {
  outline: none;
}

/* Geniş ızgara: ana sütun + kenar sütunu (300 px). Dar ekranda tek sütun. */
.izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-5);
}

@media (min-width: 77.5rem) {
  .izgara {
    grid-template-columns: minmax(0, 1fr) var(--kenar-gen);
    column-gap: var(--kenar-ara);
  }

  .izgara > .tam {
    grid-column: 1 / -1;
  }

  .izgara > .kenarda {
    grid-column: 2;
  }
}

/* ======================= 4. Üst bölüm ve alt bilgi ======================= */

.ust {
  display: flex;
  align-items: center;
  gap: var(--b-6);
  min-height: 4rem;
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.marka {
  display: inline-flex;
  margin-right: auto;
  color: var(--metin);
  text-decoration: none;
}

.marka svg {
  display: block;
  height: 1.75rem;
  width: auto;
}

.marka .halka-yolu {
  fill: none;
  stroke: var(--murekkep);
}

.menu {
  display: flex;
  gap: var(--b-5);
  font: var(--t-kucuk);
  font-size: 0.9375rem;
}

.menu a,
.dil a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  color: var(--soluk);
  text-decoration: none;
}

.menu a:hover,
.dil a:hover {
  color: var(--metin);
}

.menu a[aria-current="page"] {
  color: var(--metin);
  text-decoration: underline;
  text-decoration-thickness: var(--c-kalin);
  text-underline-offset: 0.5em;
}

.dil {
  display: flex;
  gap: var(--b-3);
  font: var(--t-kucuk);
}

.dil a {
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--b-1);
}

.dil a[aria-current="true"] {
  color: var(--metin);
  font-weight: 600;
}

.dil .kisa {
  display: none;
}

.alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--b-2) var(--b-5);
  padding: var(--b-5) 0 var(--b-6);
  border-top: var(--c-ince) solid var(--cizgi);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.alt a {
  color: var(--metin);
}

/* ======================= 5. Şerit, durum satırı ======================= */

.serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-2) var(--b-4);
  margin-top: var(--b-4);
  padding: var(--b-3) var(--b-4);
  border-left: var(--c-kalin) solid var(--cizgi-ui);
  background: var(--yuzey);
  font: var(--t-kucuk);
}

.serit p {
  flex: 1 1 20rem;
}

.serit .kapat {
  justify-content: center;
  min-width: var(--dokunma);
  margin-left: auto;
  text-decoration: none;
}

.durum-satiri {
  margin-top: var(--b-4);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.durum-satiri:empty {
  display: none;
}

.serit .kapat svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ======================= 6. Düğmeler ve bağlantılar ======================= */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: var(--dugme-y);
  padding: 0 var(--b-5);
  border: var(--c-ince) solid var(--metin);
  border-radius: var(--kose);
  background: var(--metin);
  color: var(--zemin);
  font: var(--t-dugme);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--sure-hizli),
    color var(--sure-hizli);
}

.dugme:hover {
  background: var(--soluk);
  border-color: var(--soluk);
}

.dugme.ikincil {
  border-color: var(--cizgi-ui);
  background: none;
  color: var(--metin);
}

.dugme.ikincil:hover {
  border-color: var(--metin);
  background: var(--yuzey);
}

.dugme.tehlike {
  border-color: var(--murekkep);
  background: var(--murekkep);
  color: var(--murekkep-metin);
}

.dugme[aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--cizgi-ui);
  background: none;
  color: var(--soluk);
  cursor: not-allowed;
}

.dugme.kucuk {
  min-height: var(--dokunma);
  padding: 0 var(--b-4);
  font: var(--t-kucuk);
  font-weight: 600;
}

.metin-dugme {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0;
  border: 0;
  background: none;
  color: var(--metin);
  font: var(--t-kucuk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.metin-dugme.soluk {
  color: var(--soluk);
}

.dis::after {
  content: " ↗";
}

/* ======================= 7. Başlık blokları, künye, köken ======================= */

.yol ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--b-2);
  padding-top: var(--b-6);
  color: var(--soluk);
  font: var(--t-etiket);
}

.yol li + li::before {
  content: "›";
  margin-right: var(--b-2);
  color: var(--cizgi-ui);
}

.yol a {
  color: var(--soluk);
}

.kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-1) var(--b-4);
  color: var(--soluk);
  font: var(--t-etiket);
}

/* Origin: ◆ real, ◇ fictional (inline SVG, 10 px). */
.koken {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.koken svg {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
}

.soru-kunye {
  margin-top: var(--b-2);
}

h1.baslik {
  max-width: 28ch;
  margin-top: var(--b-3);
  font: var(--t-baslik);
  text-wrap: balance;
}

/* A hyphenated word in a question title stays on one line (spec v1.2). */
.kirilmaz {
  white-space: nowrap;
}

.etiket {
  display: block;
  color: var(--soluk);
  font: var(--t-etiket);
}

.alt-yazi {
  color: var(--soluk);
  font: var(--t-kucuk);
}

h2.bolum {
  font: var(--t-bolum);
  text-wrap: balance;
}

/* ======================= 8. İş fişi (görev + teslim notu) ======================= */

.fis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--b-5);
  border-top: var(--c-kalin) solid var(--metin);
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.fis > section {
  padding: var(--b-4) 0 var(--b-5);
}

.fis > section + section {
  border-top: var(--c-ince) solid var(--cizgi);
}

.fis h2 {
  font: var(--t-dugme);
}

.fis .alt-yazi {
  margin-bottom: var(--b-2);
}

.fis .okuma {
  max-width: var(--olcu);
  font: var(--t-okuma);
}

.teslim .okuma {
  text-indent: -0.42em;
}

@media (min-width: 77.5rem) {
  .fis {
    grid-template-columns: minmax(0, 1fr) var(--kenar-gen);
    column-gap: var(--kenar-ara);
  }

  .fis > section + section {
    border-top: 0;
  }
}

/* ======================= 9. Kod bölümü ======================= */

.kod-bolum {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--b-7);
}

.kod-ust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--b-1) var(--b-4);
  margin-bottom: var(--b-3);
}

.kod-ust h2 {
  font: var(--t-dugme);
}

.kod-ust .kunye {
  font: var(--t-etiket);
}

/* Kenar başı: işaretleme yönergesi, sayaç, yardım. Genişte kenar sütununun başında. */
.kenar-bas {
  margin-bottom: var(--b-4);
  font: var(--t-kucuk);
}

.kenar-bas .yonerge {
  font: var(--t-govde);
}

.kenar-bas .ipucu,
.kenar-bas .not-alti {
  margin-top: var(--b-1);
  color: var(--soluk);
}

.sayac-satiri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-1) var(--b-4);
  margin-top: var(--b-2);
}

.sayac-satiri strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kenar-bas .uyari {
  margin-top: var(--b-2);
}

.yardim summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
  list-style: none;
}

.yardim summary::-webkit-details-marker {
  display: none;
}

.kaydir-ipucu {
  display: none;
  margin-bottom: var(--b-2);
  color: var(--soluk);
  font: var(--t-kucuk);
}

/* Kod kabı: kendi içinde yatay kayar, sayfa kaymaz. Genişte 80 karakter sığar (K4). */
.kod-kap {
  container-type: inline-size;
  overflow-x: auto;
  border-top: var(--c-ince) solid var(--cizgi);
  border-bottom: var(--c-ince) solid var(--cizgi);
  background: var(--yuzey);
  padding: var(--b-4) 0;
}

.kod {
  min-width: max-content;
  font: var(--t-kod);
}

.satir {
  display: flex;
  align-items: stretch;
  min-height: var(--kod-satir);
  padding-right: var(--b-5);
}

.satir[data-tikla] {
  cursor: pointer;
}

.satir[data-aktif] {
  background: var(--murekkep-zemin);
}

.oluk {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 var(--oluk);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: var(--b-4);
  padding-right: var(--b-2);
  background-color: var(--yuzey);
  user-select: none;
}

.satir[data-aktif] .oluk {
  background-color: var(--murekkep-zemin);
}

/* Satır numarası düğmesi: halka hedefi. Dokunma alanı satırın tamamı (satır tıklanır). */
.no {
  display: inline-grid;
  place-items: center;
  min-width: var(--halka);
  height: var(--halka);
  padding: 0 0.3em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--soluk);
  font: var(--t-satir-no);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

span.no {
  cursor: default;
}

.satir[data-tikla]:hover .no {
  box-shadow: inset 0 0 0 var(--c-ince) var(--cizgi-ui);
  color: var(--metin);
}

.satir code {
  display: block;
  line-height: var(--kod-satir);
  white-space: pre;
  font: inherit;
  padding: 0;
  background: none;
}

/* İşaretli satır: numara mürekkeple daire içine alınır, kod satırının altı çizilir. */
.satir[data-isaretli] .no {
  box-shadow: inset 0 0 0 var(--c-murekkep) var(--murekkep);
  color: var(--murekkep);
  font-weight: 600;
  animation: daire var(--sure-daire) var(--egri-cikis);
}

.satir[data-isaretli] code > span:first-child,
.satir[data-isaretli] code {
  text-decoration: underline var(--c-murekkep) var(--murekkep);
  text-underline-offset: 0.3em;
  text-decoration-skip-ink: none;
}

@keyframes daire {
  from {
    scale: 0.6;
    opacity: 0;
  }
}

/* Sözdizimi rolleri */
.s-anahtar {
  color: var(--s-anahtar);
  font-weight: 600;
}
.s-dize {
  color: var(--s-dize);
}
.s-sayi {
  color: var(--s-sayi);
}
.s-islev {
  color: var(--s-islev);
}
.s-tip {
  color: var(--s-tip);
}
.s-yorum {
  color: var(--s-yorum);
}

/* Each code line is a <pre> so its spaces survive in the prerendered HTML too. */
pre.kod-metin {
  margin: 0;
  font: inherit;
}
/* ======================= 10. Not (kenar notu / satır altı notu) ======================= */

.not {
  padding: var(--b-3) 0 var(--b-4);
  border-top: var(--c-kalin) solid var(--murekkep);
  background: var(--zemin);
  font: var(--t-kucuk);
  white-space: normal;
}

.not-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--b-3);
}

.not-ust h3 {
  font: var(--t-not);
}

.onem-sec {
  margin: var(--b-2) 0 0;
  padding: 0;
  border: 0;
}

.onem-sec legend {
  padding: 0;
  margin-bottom: var(--b-1);
  color: var(--soluk);
  font: var(--t-etiket);
}

.onem-sec .secenekler3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-1);
}

.onem-sec label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: var(--dokunma);
  padding: 0 var(--b-2);
  border: var(--c-ince) solid var(--cizgi-ui);
  border-radius: var(--kose);
  font: var(--t-kucuk);
  cursor: pointer;
}

.onem-sec input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.onem-sec label[data-secili] {
  border-color: var(--metin);
  background: var(--metin);
  color: var(--zemin);
  font-weight: 600;
}

.onem-sec label:has(input:focus-visible) {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}

.onem-tanim {
  margin-top: var(--b-2);
  color: var(--soluk);
}

/* Önem işareti: çentik sayısı (Kritik 3, Önemli 2, Küçük 1). Renk taşımaz. */
.centik {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  vertical-align: -0.1em;
}

.centik i {
  width: 3px;
  height: 0.75rem;
  background: currentColor;
}

.centik i.bos {
  opacity: 0.3;
}

.gerekce {
  margin-top: var(--b-3);
}

.gerekce label {
  color: var(--soluk);
  font: var(--t-etiket);
}

.gerekce textarea {
  display: block;
  width: 100%;
  min-height: 4.5rem;
  margin-top: var(--b-1);
  padding: var(--b-1) 0 var(--b-2);
  border: 0;
  border-bottom: var(--c-ince) solid var(--cizgi-ui);
  border-radius: 0;
  background: none;
  font: var(--t-okuma);
  font-size: 1.0625rem;
  resize: vertical;
}

.gerekce textarea:focus-visible {
  outline-offset: 4px;
}

.gerekce textarea::placeholder {
  color: var(--soluk);
}

.karakter {
  display: block;
  margin-top: var(--b-1);
  color: var(--soluk);
  font: var(--t-etiket);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.karakter[data-sinir] {
  color: var(--murekkep);
  font-weight: 600;
}

.uyari {
  display: flex;
  gap: var(--b-2);
  color: var(--kacti);
  font: var(--t-kucuk);
  font-weight: 600;
}

.uyari::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--c-murekkep) dashed currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
}

/* Kapalı not (dar ekran, etkin olmayan işaret): tek satır özet. */
.not-ozet {
  display: none;
}

/* Genişte (≥ 1240 px) notlar kenar sütununa çıkar. Yerleri JS ile satır hizasına konur
   (top + --kayma). JS yoksa durağan konumda (satırın hemen yanı) kalır. */
@media (min-width: 77.5rem) {
  .kod-bolum {
    grid-template-columns: minmax(0, 1fr) var(--kenar-gen);
    column-gap: var(--kenar-ara);
    align-items: start;
  }

  .kod-ust {
    grid-column: 1;
  }

  .kenar-bas {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-top: var(--b-1);
  }

  .kod-kap {
    grid-column: 1;
    grid-row: 2;
  }

  .kod-bolum > .kod-kap .not {
    position: absolute;
    right: 0;
    width: var(--kenar-gen);
  }

  /* Bağ çizgisi: satırın ortasından nota dirsek. --kayma = notun satır hizasından aşağı kayması (px),
     JS yerleştirmesi verir. Kayma 0 ise düz yatay çizgi notun üst çizgisine bağlanır. */
  .not::before {
    content: "";
    position: absolute;
    top: calc(-2px - var(--kayma, 0px));
    left: calc(-1 * var(--kenar-ara) + 0.5rem);
    width: calc(var(--kenar-ara) - 0.5rem);
    height: calc(var(--kayma, 0px) + 1px);
    border-top: var(--c-ince) solid var(--bag-renk, var(--murekkep));
    border-right: var(--c-ince) solid var(--bag-renk, var(--murekkep));
    pointer-events: none;
  }

  .not[data-d="bulundu"] {
    --bag-renk: var(--bulundu);
  }

  .not[data-d="yanlis"] {
    --bag-renk: var(--cizgi-ui);
  }

  .not.yeni::before {
    animation: bagCiz var(--sure-bag) var(--egri-ciz) both;
  }

  .not.yeni {
    animation: notGir var(--sure-not) var(--egri-cikis) both;
  }
}

@keyframes notGir {
  from {
    opacity: 0;
    translate: 0.75rem 0;
  }
}

@keyframes bagCiz {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

/* Dar ve orta ekran (< 1240 px): not satırın hemen altında, kod kabının içinde açılır
   ve kabın görünen genişliğinde sabit durur (yatay kaydırmada kaymaz). */
@media (max-width: 77.49rem) {
  .kod-kap .not {
    position: sticky;
    left: 0;
    width: 100cqi;
    margin: var(--b-1) 0 var(--b-3);
    padding-left: var(--b-4);
    padding-right: var(--b-4);
    border-bottom: var(--c-ince) solid var(--cizgi);
  }

  .kod-kap .not.yeni {
    animation: notAc var(--sure-not) var(--egri-cikis) both;
  }

  .kod-kap .not[data-kapali] {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: var(--c-ince);
  }

  .kod-kap .not[data-kapali] > :not(.not-ozet) {
    display: none;
  }

  .kod-kap .not[data-kapali] .not-ozet {
    display: flex;
  }

  .kaydir-ipucu {
    display: block;
  }
}

@keyframes notAc {
  from {
    opacity: 0;
    translate: 0 -0.375rem;
  }
}

.not-ozet {
  align-items: center;
  gap: var(--b-2);
  width: 100%;
  min-height: var(--dokunma);
  padding: 0;
  border: 0;
  background: none;
  font: var(--t-kucuk);
  text-align: left;
  cursor: pointer;
}

.not-ozet .ozet-metin {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--soluk);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.not-ozet strong {
  font-weight: 600;
  white-space: nowrap;
}

.not-ozet::after {
  content: "▾";
  color: var(--soluk);
}

/* Collapsed note whose severity is still missing: the summary says so in ink. */
.not-ozet .ozet-eksik {
  color: var(--murekkep);
}
/* ======================= 11. Kanıtlayan test ve gönder ======================= */

.bolum-blok {
  margin-top: var(--b-9);
  max-width: var(--olcu);
}

.bolum-blok.genis-blok {
  max-width: none;
}

.bolum-blok > .alt-yazi {
  margin-top: var(--b-2);
  font: var(--t-govde);
}

.test-sec {
  margin: var(--b-4) 0 0;
  padding: 0;
  border: 0;
  border-top: var(--c-ince) solid var(--cizgi);
}

.test-sec label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  min-height: 3.25rem;
  padding: var(--b-3) var(--b-3) var(--b-3) var(--b-2);
  border-bottom: var(--c-ince) solid var(--cizgi);
  cursor: pointer;
}

.test-sec input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.19rem 0 0;
  accent-color: var(--metin);
}

.test-sec label[data-secili] {
  background: var(--yuzey);
}

.test-sec label:hover {
  background: var(--yuzey);
}

.gonder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-3) var(--b-5);
  margin-top: var(--b-6);
}

.gonder .neden {
  color: var(--soluk);
  font: var(--t-kucuk);
}

/* Under the submit row: what submitting sends (copy deck gonder.veri.not). */
.gonder-not {
  max-width: var(--olcu);
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.test-uyari {
  margin-top: var(--b-3);
}

/* ======================= 12. Sonuç ======================= */

.ozet-blok {
  margin-top: var(--b-3);
}

.ozet-blok h1 {
  margin-top: var(--b-4);
  color: var(--soluk);
  font: var(--t-etiket);
}

.ozet-cumle {
  max-width: 24ch;
  margin-top: var(--b-1);
  font: var(--t-gosteri);
  text-wrap: balance;
}

.sayilar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2) var(--b-6);
  margin-top: var(--b-4);
  font: var(--t-govde);
}

.durum {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-weight: 600;
}

.durum[data-d="bulundu"] {
  color: var(--bulundu);
}
.durum[data-d="kacti"] {
  color: var(--kacti);
}
.durum[data-d="yanlis"] {
  color: var(--yanlis);
}

/* Sonuç işareti: şekil + yazı. Bulundu dolu daire ✓, kaçtı kesikli daire !, yanlış alarm daire ✕. */
.simge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font: 600 0.75rem/1 var(--f-sans);
}

.simge[data-d="bulundu"] {
  background: var(--bulundu);
  color: var(--zemin);
}

.simge[data-d="kacti"] {
  border: var(--c-murekkep) dashed var(--kacti);
  color: var(--kacti);
}

.simge[data-d="yanlis"] {
  border: var(--c-murekkep) solid var(--yanlis);
  color: var(--yanlis);
}

.simge[data-d="bitti"] {
  border: var(--c-murekkep) solid var(--metin);
  color: var(--metin);
}

.test-cumle {
  margin-top: var(--b-2);
  color: var(--soluk);
}

/* Sonuçta kod satırları */
.satir[data-d] .no {
  font-weight: 600;
}

.satir[data-aralik] .oluk {
  box-shadow: inset calc(-1 * var(--c-kalin)) 0 0 var(--aralik-renk);
}

.satir[data-aralik="bulundu"] {
  --aralik-renk: var(--bulundu);
}

.satir[data-aralik="kacti"] .oluk {
  box-shadow: none;
  background-image: linear-gradient(var(--kacti) 50%, transparent 50%);
  background-size: var(--c-kalin) 6px;
  background-position: right top;
  background-repeat: repeat-y;
}

.satir[data-d="bulundu"] .no {
  background: var(--bulundu);
  color: var(--zemin);
  box-shadow: none;
}

.satir[data-d="bulundu"] code {
  text-decoration: underline var(--c-murekkep) var(--bulundu);
  text-underline-offset: 0.3em;
}

.satir[data-d="yanlis"] .no {
  box-shadow: inset 0 0 0 var(--c-murekkep) var(--yanlis);
  color: var(--yanlis);
  text-decoration: line-through;
}

.satir[data-d="yanlis"] code {
  text-decoration: underline var(--c-murekkep) dotted var(--yanlis);
  text-underline-offset: 0.3em;
}

.sonuc .satir[data-d] .no,
.sonuc-giris .satir[data-d] .no {
  animation: daire var(--sure-daire) var(--egri-cikis) both;
  animation-delay: calc(var(--sira, 0) * var(--ara-sira));
}

.not[data-d="bulundu"] {
  border-top-color: var(--bulundu);
}

.not[data-d="kacti"] {
  border-top-style: dashed;
  border-top-color: var(--kacti);
}

.not[data-d="yanlis"] {
  border-top-color: var(--cizgi-ui);
}

.not .durum {
  display: flex;
  font: var(--t-kucuk);
  font-weight: 600;
}

.not h3.not-baslik {
  margin-top: var(--b-1);
  font: var(--t-not);
}

.karsilastir {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--b-1) var(--b-3);
  margin-top: var(--b-3);
}

.karsilastir dt {
  color: var(--soluk);
}

.karsilastir dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-2);
  font-weight: 600;
}

.esles {
  padding: 0 var(--b-1);
  border: var(--c-ince) solid var(--cizgi-ui);
  border-radius: var(--kose);
  color: var(--soluk);
  font: var(--t-etiket);
}

.esles[data-farkli] {
  border-style: dashed;
}

.not .alt-baslik {
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-etiket);
}

.not .aciklama {
  margin-top: var(--b-1);
  font: var(--t-govde);
  font-size: 0.9375rem;
}

.alinti {
  margin-top: var(--b-1);
  padding-left: var(--b-3);
  border-left: var(--c-kalin) solid var(--cizgi);
  font: var(--t-okuma);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.not .uyari {
  margin-top: var(--b-2);
}

.not .itiraz {
  margin-top: var(--b-2);
}

/* Test sonucu */
.test-sonuc {
  margin-top: var(--b-4);
  border-top: var(--c-ince) solid var(--cizgi);
}

.test-sonuc li {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  padding: var(--b-3) var(--b-2);
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.test-sonuc li[data-yok] {
  color: var(--soluk);
}

.test-sonuc li[data-yok] .simge {
  border: var(--c-ince) solid var(--cizgi);
}

.test-sonuc .test-metin {
  flex: 1 1 auto;
}

.test-sonuc .etiket {
  margin-top: var(--b-1);
}

.test-neden {
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-kucuk);
}

/* Cevap bölümü: örnek cevap ana sütunda, kullanıcının gerekçeleri kenarda (K10). */
.cevap {
  margin-top: var(--b-9);
}

.cevap .ornek {
  max-width: var(--olcu);
  margin-top: var(--b-3);
  font: var(--t-ornek);
}

.gerekceler {
  border-top: var(--c-kalin) solid var(--murekkep);
  padding-top: var(--b-3);
}

.gerekceler li {
  padding: var(--b-3) 0;
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.gerekceler .etiket {
  margin-bottom: var(--b-1);
}

.gerekceler p {
  font: var(--t-okuma);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.kontrol {
  margin-top: var(--b-6);
}

.kontrol h3 {
  font: var(--t-not);
}

.kontrol ul {
  margin-top: var(--b-2);
}

.kontrol label {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  min-height: var(--dokunma);
  padding: var(--b-2) 0;
  cursor: pointer;
}

.kontrol input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--metin);
}

/* Düzelti farkı: çıkan satırın üstü mürekkeple çizilir, giren satır sol çizgi + artı. */
.fark .satir {
  cursor: default;
}

.fark .oluk {
  flex-basis: calc(var(--oluk) + 1.75rem);
  gap: var(--b-2);
  color: var(--soluk);
  font: var(--t-satir-no);
}

.fark .oluk b {
  min-width: 1.5rem;
  font-weight: 400;
  text-align: right;
}

.fark .isaretci {
  flex: 0 0 1.25rem;
  font-weight: 600;
}

.fark .satir[data-t="-"] .isaretci {
  color: var(--murekkep);
}

.fark .satir[data-t="+"] {
  background: var(--bulundu-zemin);
}

.fark .satir[data-t="+"] .oluk {
  background-color: var(--bulundu-zemin);
  box-shadow: inset 3px 0 0 var(--bulundu);
}

.fark .satir[data-t="+"] .isaretci {
  color: var(--bulundu);
}

.fark .satir[data-t="-"] code {
  position: relative;
  color: var(--soluk);
}

.fark .satir[data-t="-"] code::after {
  content: "";
  position: absolute;
  left: -0.25rem;
  right: -0.25rem;
  top: 50%;
  height: var(--c-kalin);
  background: var(--murekkep);
  transform-origin: left;
}

.fark.ciz .satir[data-t="-"] code::after {
  animation: ustunuCiz var(--sure-cizgi) var(--egri-ciz) both;
  animation-delay: calc(var(--sira, 0) * var(--ara-cizgi));
}

@keyframes ustunuCiz {
  from {
    scale: 0 1;
  }
}

.fark .atlanan {
  padding: var(--b-2) var(--b-5) var(--b-2)
    calc(var(--oluk) + 1.75rem + var(--b-4));
  color: var(--soluk);
  font: var(--t-etiket);
}

/* Köken bloğu */
.koken-blok {
  margin-top: var(--b-9);
  max-width: var(--olcu);
  padding-top: var(--b-4);
  border-top: var(--c-ince) solid var(--cizgi);
}

.koken-blok p {
  margin-top: var(--b-2);
}

/* Eylem satırı */
.eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-3) var(--b-4);
  margin-top: var(--b-8);
  padding-top: var(--b-5);
  border-top: var(--c-kalin) solid var(--metin);
}

.eylemler .sorun {
  margin-left: auto;
}

.sorun-not {
  max-width: var(--olcu);
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.konu-sonu {
  margin-top: var(--b-8);
  font: var(--t-okuma);
}

.karsilastir .isaretsiz {
  font-weight: 400;
}

.simge svg {
  width: 100%;
  height: 100%;
}

.cevap .alt-yazi {
  margin-top: var(--b-2);
}

.kontrol .alt-yazi {
  margin-top: var(--b-1);
}

.fark-kap {
  margin-top: var(--b-4);
}

.konu-sonu + .eylemler {
  margin-top: var(--b-4);
}

/* H8: with script, the strike waits (undrawn) until the diff is in view, then
   draws once. Without script or with reduced motion it is drawn from the start. */
@media (prefers-reduced-motion: no-preference) {
  .fark.bekle .satir[data-t="-"] code::after {
    scale: 0 1;
  }
}
/* ======================= 13. Soru listesi: konu × zorluk tablosu ======================= */

.liste-bas {
  padding-top: var(--b-6);
}

.liste-bas .alt-yazi {
  margin-top: var(--b-2);
  font: var(--t-govde);
}

.liste-bas .cozulen {
  margin-top: var(--b-1);
  color: var(--soluk);
  font: var(--t-kucuk);
  font-variant-numeric: tabular-nums;
}

.konu-git {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--b-4);
  margin-top: var(--b-4);
  font: var(--t-kucuk);
}

.konu-git .etiket {
  display: inline;
}

.konu-git a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
}

.matris {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-8);
  margin-top: var(--b-6);
}

.konu-sutun h2 {
  font: var(--t-bolum);
  font-size: 1.375rem;
}

.konu-sutun > p {
  margin-top: var(--b-1);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.konu-sutun ol {
  margin-top: var(--b-3);
  border-top: var(--c-kalin) solid var(--metin);
}

.soru-kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-1);
  padding: var(--b-3) var(--b-2) var(--b-4);
  border-bottom: var(--c-ince) solid var(--cizgi);
  text-decoration: none;
  transition: background-color var(--sure-hizli);
}

.soru-kart:hover {
  background: var(--yuzey);
}

.soru-kart:hover .kart-baslik {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.kart-ust {
  display: flex;
  justify-content: space-between;
  gap: var(--b-2);
  color: var(--soluk);
  font: var(--t-etiket);
}

.kart-baslik {
  font: var(--t-not);
  font-size: 1.0625rem;
}

.kart-durum {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  margin-top: var(--b-1);
  font: var(--t-etiket);
}

.kart-durum[data-bitti] {
  font-weight: 600;
}

.kart-durum:not([data-bitti]) {
  color: var(--soluk);
}

.kart-durum .simge {
  width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
}

@media (min-width: 48rem) {
  .matris {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--b-6);
  }
}

@media (min-width: 77.5rem) {
  .matris {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--b-5);
  }

  .konu-git {
    display: none;
  }

  .konu-sutun > p {
    min-height: 3.75rem;
  }
}

.liste-bas h1.baslik {
  margin-top: 0;
}

/* ======================= 14. İlerleme ======================= */

.tablo-kap {
  max-width: 48rem;
  margin-top: var(--b-6);
  overflow-x: auto;
}

.ilerleme-tablo {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ilerleme-tablo th,
.ilerleme-tablo td {
  padding: var(--b-3) var(--b-3) var(--b-3) 0;
  border-bottom: var(--c-ince) solid var(--cizgi);
  text-align: left;
  vertical-align: middle;
}

.ilerleme-tablo thead th {
  border-bottom: var(--c-kalin) solid var(--metin);
  color: var(--soluk);
  font: var(--t-etiket);
}

.ilerleme-tablo tbody th {
  font: var(--t-not);
  font-size: 1.0625rem;
}

.ilerleme-tablo tfoot th,
.ilerleme-tablo tfoot td {
  border-bottom: 0;
  border-top: var(--c-kalin) solid var(--metin);
  font-weight: 600;
}

.cetele {
  display: inline-flex;
  gap: 3px;
  margin-left: var(--b-2);
  vertical-align: -0.05em;
}

.cetele i {
  width: 0.625rem;
  height: 0.625rem;
  border: var(--c-ince) solid var(--cizgi-ui);
}

.cetele i[data-dolu] {
  border-color: var(--metin);
  background: var(--metin);
}

.ilerleme-alt {
  margin-top: var(--b-8);
  padding-top: var(--b-4);
  border-top: var(--c-ince) solid var(--cizgi);
}

/* Onay penceresi */
dialog.onay {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--b-5);
  border: var(--c-ince) solid var(--cizgi-ui);
  border-top: var(--c-kalin) solid var(--murekkep);
  border-radius: var(--kose);
  background: var(--zemin);
  color: var(--metin);
}

dialog.onay::backdrop {
  background: rgb(19 20 22 / 0.6);
}

dialog.onay[open] {
  animation: notAc var(--sure-daire) var(--egri-cikis);
}

dialog.onay h2 {
  font: var(--t-not);
  font-size: 1.375rem;
}

dialog.onay p {
  margin-top: var(--b-3);
}

dialog.onay .dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--b-3);
  margin-top: var(--b-5);
}

/* Empty and no-storage states: a sentence (and a button) instead of the table. */
.ilerleme-bilgi {
  max-width: var(--olcu);
  margin-top: var(--b-6);
  font: var(--t-okuma);
}

.ilerleme-bilgi .dugme {
  margin-top: var(--b-4);
}

/* ======================= 15. Giriş ======================= */

.giris-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-7);
  padding-top: var(--b-8);
}

.giris-bas .etiket {
  font: var(--t-kucuk);
}

.giris-bas h1 {
  max-width: 21ch;
  margin-top: var(--b-3);
  font: var(--t-gosteri);
  text-wrap: balance;
}

.giris-bas .tanim {
  max-width: 34rem;
  margin-top: var(--b-4);
  font: var(--t-ornek);
}

.giris-bas .eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-3);
  margin-top: var(--b-6);
}

.giris-bas .kunye {
  margin-top: var(--b-4);
}

/* Prova örneği: ürünün tek eylemini gösteren şematik kod sayfası (sahte kod yok, çubuklar). */
.prova {
  position: relative;
  align-self: start;
  padding: var(--b-5) 0 var(--b-5);
  border-top: var(--c-ince) solid var(--cizgi);
  border-bottom: var(--c-ince) solid var(--cizgi);
  background: var(--yuzey);
}

.prova .p-satir {
  display: flex;
  align-items: center;
  height: var(--kod-satir);
}

.prova .p-no {
  flex: 0 0 var(--oluk);
  display: flex;
  justify-content: flex-end;
  padding-right: var(--b-2);
  margin-right: var(--b-4);
  color: var(--soluk);
  font: var(--t-satir-no);
}

.prova .p-no span {
  display: inline-grid;
  place-items: center;
  min-width: var(--halka);
  height: var(--halka);
  border-radius: 999px;
}

.prova .p-cubuk {
  height: 0.5rem;
  border-radius: 1px;
  background: var(--cizgi);
}

.prova .p-satir[data-isaretli] .p-no span {
  box-shadow: inset 0 0 0 var(--c-murekkep) var(--murekkep);
  color: var(--murekkep);
  font-weight: 600;
}

.prova .p-satir[data-isaretli] .p-cubuk {
  background: var(--cizgi-ui);
  box-shadow: 0 0.4rem 0 -0.15rem var(--murekkep);
}

.prova .p-not {
  position: absolute;
  right: var(--b-4);
  top: calc(var(--b-5) + 3 * var(--kod-satir) + var(--kod-satir) / 2 + 1rem);
  width: min(22rem, 76%);
  padding: var(--b-2) var(--b-3) var(--b-3);
  border-top: var(--c-kalin) solid var(--murekkep);
  background: var(--zemin);
  font: var(--t-kucuk);
}

.prova .p-not::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: calc(-1rem - 1px);
  width: 2rem;
  height: 1rem;
  border-top: var(--c-ince) solid var(--murekkep);
  border-right: var(--c-ince) solid var(--murekkep);
  translate: 0 0;
  clip-path: none;
}

.prova .p-not .p-onem {
  display: flex;
  gap: var(--b-1);
  margin-top: var(--b-2);
}

.prova .p-not .p-onem span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 1.75rem;
  border: var(--c-ince) solid var(--cizgi-ui);
  border-radius: var(--kose);
  font: var(--t-etiket);
}

.prova .p-not .p-onem span[data-secili] {
  border-color: var(--metin);
  background: var(--metin);
  color: var(--zemin);
}

.prova .p-not .p-gerekce {
  margin-top: var(--b-2);
  padding-bottom: var(--b-1);
  border-bottom: var(--c-ince) solid var(--cizgi-ui);
  color: var(--soluk);
  font: var(--t-okuma);
  font-size: 0.9375rem;
}

.prova-giris .p-satir[data-isaretli] .p-no span {
  animation: daire var(--sure-daire) var(--egri-cikis) 400ms both;
}

.prova-giris .p-not {
  animation: notGir var(--sure-not) var(--egri-cikis) 560ms both;
}

.adimlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-5);
  margin-top: var(--b-4);
}

.adim {
  padding-top: var(--b-4);
  border-top: var(--c-kalin) solid var(--metin);
}

.adim .isaret-ornek {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  height: 1.75rem;
  color: var(--soluk);
  font: var(--t-satir-no);
}

.adim h3 {
  margin-top: var(--b-2);
  font: var(--t-not);
}

.adim p {
  margin-top: var(--b-2);
}

.giris-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2) var(--b-5);
  align-items: center;
  margin-top: var(--b-5);
  color: var(--soluk);
  font: var(--t-kucuk);
}

.onem-olcu {
  margin-top: var(--b-4);
  border-top: var(--c-kalin) solid var(--metin);
}

.onem-olcu li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--b-3);
  align-items: baseline;
  padding: var(--b-3) 0;
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.onem-olcu b {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-weight: 600;
}

/* Ölçünün son satırı: Test konusunda önemin okunuşu (paket v1.2, onem.test.not). */
.onem-not {
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-kucuk);
}

@media (min-width: 48rem) {
  .adimlar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 77.5rem) {
  .giris-bas {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--b-8);
    align-items: center;
  }
}

/* Step pictures (B32): the handoff note's opening quote and a circled line number. */
.adim-tirnak {
  font: var(--t-okuma);
  font-size: 1.5rem;
}

.adim .adim-halka {
  box-shadow: inset 0 0 0 var(--c-murekkep) var(--murekkep);
  color: var(--murekkep);
  font-weight: 600;
  cursor: default;
}

/* ======================= 16. Nasıl hazırlandı (makale + kenar) ======================= */

.makale-bas {
  padding-top: var(--b-6);
}

.makale-bas h1 {
  max-width: 20ch;
  font: var(--t-gosteri);
}

.makale-bas .ozet {
  max-width: var(--olcu);
  margin-top: var(--b-4);
  font: var(--t-ornek);
}

.makale-bolum {
  margin-top: var(--b-9);
  align-items: start;
}

.makale-bolum h2 {
  padding-top: var(--b-3);
  border-top: var(--c-kalin) solid var(--metin);
  font: var(--t-bolum);
}

.makale-bolum .okuma {
  max-width: var(--olcu);
  font: var(--t-okuma);
}

.makale-bolum .okuma p + p,
.makale-bolum h2 + .okuma {
  margin-top: var(--b-3);
}

.makale-bolum h3 {
  margin-top: var(--b-6);
  font: var(--t-not);
}

.kenar-not {
  padding: var(--b-3) 0 var(--b-4);
  border-top: var(--c-kalin) solid var(--cizgi-ui);
  font: var(--t-kucuk);
}

.kenar-not p + p,
.kenar-not p + .dugme,
.kenar-not .dugme + p {
  margin-top: var(--b-3);
}

.kenar-not .komut {
  display: block;
  margin-top: var(--b-2);
  padding: var(--b-2) var(--b-3);
  background: var(--yuzey);
  font: var(--t-kod);
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre;
}

@media (min-width: 77.5rem) {
  .makale-bolum .kenar-not {
    margin-top: calc(var(--b-3) + 2.75rem);
  }
}

.kenar-not .kenar-sayi {
  font: var(--t-not);
}

/* Typeface credit under the license section (copy deck nasil.lisans.yazitipi). */
.makale-bolum .yazi-tipi-atfi {
  max-width: var(--olcu);
  margin-top: var(--b-3);
  color: var(--soluk);
  font: var(--t-kucuk);
}

/* Data page: the same article layout (copy deck "Veriler"). */
.makale-bolum .okuma .veri-alanlar,
.makale-bolum .okuma .veri-alanlar + p {
  margin-top: var(--b-3);
}

.veri-alanlar {
  border-top: var(--c-ince) solid var(--cizgi);
}

.veri-alanlar li {
  padding: var(--b-2) 0;
  border-bottom: var(--c-ince) solid var(--cizgi);
}

.makale-bolum .okuma .kucuk-not {
  color: var(--soluk);
  font: var(--t-kucuk);
}

/* The closing "last updated" line, without a heading. */
.makale-son {
  max-width: var(--olcu);
  margin-top: var(--b-6);
  color: var(--soluk);
  font: var(--t-kucuk);
}
/* ======================= 17. Durum ekranları (404, hata, boş) ======================= */

.durum-ekrani {
  max-width: var(--olcu);
  padding-top: var(--b-9);
}

.durum-ekrani .yol-cizik {
  display: inline-block;
  position: relative;
  color: var(--soluk);
  font: var(--t-kod);
  font-size: 1.125rem;
}

.durum-ekrani .yol-cizik::after {
  content: "";
  position: absolute;
  left: -0.2em;
  right: -0.2em;
  top: 52%;
  height: var(--c-kalin);
  background: var(--murekkep);
  transform-origin: left;
  animation: ustunuCiz var(--sure-cizgi) var(--egri-ciz) 200ms both;
}

.durum-ekrani h1 {
  margin-top: var(--b-4);
  font: var(--t-baslik);
}

.durum-ekrani p {
  margin-top: var(--b-3);
  font: var(--t-okuma);
}

.durum-ekrani .dugme {
  margin-top: var(--b-6);
}

.durum-ekrani .yukleniyor {
  color: var(--soluk);
}

/* ======================= 18. Dar ekran (< 600 px) ======================= */

@media (max-width: 37.49rem) {
  :root {
    --sayfa-pay: 1rem;
    --t-gosteri: 520 1.875rem / 1.2 var(--f-serif);
    --t-baslik: 550 1.625rem / 1.23 var(--f-serif);
    --t-bolum: 600 1.375rem / 1.27 var(--f-serif);
    --t-ornek: 400 1.1875rem / 1.47 var(--f-serif);
    --t-okuma: 400 1.0625rem / 1.53 var(--f-serif);
    --t-kod: 400 0.875rem / 1.75rem var(--f-mono);
    --kod-satir: 1.75rem;
    --oluk: 2.75rem;
    --b-9: 3.5rem;
  }

  .ust {
    flex-wrap: wrap;
    gap: 0 var(--b-4);
    padding-top: var(--b-1);
  }

  .menu {
    order: 3;
    width: 100%;
    gap: var(--b-4);
    font-size: 0.875rem;
  }

  .dil .uzun {
    display: none;
  }

  .dil .kisa {
    display: inline;
  }

  .kod-kap {
    margin: 0 calc(-1 * var(--sayfa-pay));
  }

  .oluk {
    margin-right: var(--b-3);
  }

  .eylemler .sorun {
    margin-left: 0;
  }

  .onem-olcu li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-1);
  }

  /* Prova örneğinde not, uygulamadaki gibi satırın altına iner (satır altı kipi). */
  .prova .p-not {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: var(--b-2) var(--b-4) 0 calc(var(--oluk) + var(--b-4));
  }

  .prova .p-not::before {
    display: none;
  }
}

@media (max-width: 77.49rem) and (min-width: 37.5rem) {
  :root {
    --t-kod: 400 0.875rem / 1.625rem var(--f-mono);
  }
}

/* ======================= 19. Hareket azaltma ======================= */

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