/* ═══════════════════════════════════════════════════════════════════
   TOLMENA — YASAL SAYFALAR
   Ana sayfanin paleti ve yazi tipi; govde okunur genislikte tek sutun.
   Erisilebilirlik satan sayfanin kendi metni de erisilebilir olur:
   atlama baglantisi, gercek baslik hiyerarsisi, 4.5:1 ustu kontrast,
   gorunur odak halkasi, 44px dokunma hedefi.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../yazitipi/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../yazitipi/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../yazitipi/plexmono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../yazitipi/plexmono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

:root{
  --gece:#0E1618;  --panel:#121C1E;
  --t1:#F7F5F1;  --t2:#DCE4E5;  --t3:#A4B0B2;  --t4:#808C8B;
  --erik:#9C4F74;  --petrol:#7FB8BB;
  --cizgi:#1E2A2C;  --kenar:#5E7376;
  --govde:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--gece); color:var(--t2);
  font:400 1rem/1.7 var(--govde);
  /* Metin boyutu rem; tarayicidan buyutuldugunde sayfa BOZULMAZ —
     kendi tasma testimizden gecmesi gereken ilk sayfa bu. */
}

/* ── atlama baglantisi · klavyeyle gezen ilk Tab'da bulur ── */
.atla{position:absolute;inset-inline-start:-9999px;z-index:99;
  background:var(--erik);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r);
  text-decoration:none;font-weight:600}
.atla:focus{inset-inline-start:1rem;inset-block-start:1rem}

a{color:var(--petrol);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--t1)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:3px}

/* ── ust serit ── */
.ust{border-block-end:1px solid var(--cizgi);padding-block:1.1rem}
.ic{inline-size:min(100% - 2rem, 46rem);margin-inline:auto}
.ust .ic{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  inline-size:min(100% - 2rem, 62rem)}
.marka{font:600 1rem/1 var(--mono);letter-spacing:.22em;color:var(--t1);
  text-decoration:none;min-block-size:44px;display:inline-flex;align-items:center}
.marka:hover{color:var(--erik)}
.ust nav{margin-inline-start:auto;display:flex;gap:1.3rem;flex-wrap:wrap}
.ust nav a{font:400 .875rem/1 var(--mono);color:var(--t3);text-decoration:none;
  min-block-size:44px;display:inline-flex;align-items:center}
.ust nav a:hover,.ust nav a[aria-current="page"]{color:var(--t1)}
.ust nav a[aria-current="page"]{border-block-end:1px solid var(--erik);padding-block-end:2px}

/* ── govde ── */
main{padding-block:3.5rem 5rem}
h1{font:600 2.074rem/1.2 var(--govde);letter-spacing:-.018em;color:var(--t1);
  margin:0 0 .35rem}
.tarih{font:400 .8125rem/1.5 var(--mono);color:var(--t4);margin:0 0 2.6rem;
  letter-spacing:.06em}
h2{font:600 1.2rem/1.35 var(--govde);color:var(--t1);
  margin:2.9rem 0 .7rem;padding-block-start:1.6rem;border-block-start:1px solid var(--cizgi)}
h2:first-of-type{border-block-start:0;padding-block-start:0;margin-block-start:2rem}
h3{font:600 1rem/1.4 var(--govde);color:var(--t1);margin:1.7rem 0 .5rem}
p{margin:0 0 1rem;max-inline-size:68ch}
ul,ol{margin:0 0 1rem;padding-inline-start:1.3rem;max-inline-size:68ch}
li{margin-block-end:.45rem}
strong{color:var(--t1);font-weight:600}
code{font:400 .9em/1 var(--mono);color:var(--petrol);
  background:var(--panel);padding:.15em .4em;border-radius:4px}

/* ── ilk paragraf · sayfanin bir cumlelik ozeti ── */
.ozet{font-size:1.1rem;line-height:1.6;color:var(--t1);
  border-inline-start:2px solid var(--erik);padding-inline-start:1.1rem;
  margin-block-end:2.2rem}

/* ── bilgi kutusu ── */
.kutu{background:var(--panel);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:1.4rem 0;max-inline-size:68ch}
.kutu p:last-child,.kutu ul:last-child{margin-block-end:0}
.kutu.dikkat{border-color:var(--kenar)}

/* ── tablo ── */
table{border-collapse:collapse;inline-size:100%;max-inline-size:68ch;margin:1.2rem 0;
  font-size:.9375rem}
caption{text-align:start;color:var(--t3);font-size:.875rem;margin-block-end:.5rem}
th,td{text-align:start;padding:.6rem .8rem;border-block-end:1px solid var(--cizgi);
  vertical-align:top}
th{color:var(--t1);font-weight:600;font-size:.8125rem;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--mono)}

/* ── doldurulacak alan · yayindan once kapatilir ── */
.bos{background:#2A1F14;border:1px dashed #8A6A3A;color:#E8D5B5;
  padding:.15em .5em;border-radius:4px;font-family:var(--mono);font-size:.9em}

/* ── alt ── */
.alt{border-block-start:1px solid var(--cizgi);padding-block:2rem;
  font-size:.875rem;color:var(--t4)}
.alt .ic{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;
  inline-size:min(100% - 2rem, 62rem)}
.alt a{color:var(--t3);text-decoration:none}
.alt a:hover{color:var(--t1);text-decoration:underline}
.alt .sag{margin-inline-start:auto;font-family:var(--mono);letter-spacing:.04em}

/* Uzun bilesik kelimeler (Almanca, ya da ceviri sonrasi) dar sutunu
   yarmasin — kendi tasma testimiz bunu 360px'de yakaladi. */
p,li,td,th,caption,.ozet{overflow-wrap:anywhere}
caption{inline-size:100%}

@media (max-width:40rem){
  h1{font-size:1.728rem}
  main{padding-block:2.5rem 3.5rem}
  .ust nav{margin-inline-start:0;inline-size:100%;gap:1.1rem}
}

/* ── DAR EKRANDA TABLO → KART ────────────────────────────────────────
   320px'de dort sutunlu tablo yatay kaydirma cubugu doguruyordu:
   WCAG 1.4.10 (Reflow) ihlali. Kendi testimiz yakaladi, kendi
   sayfamizda birakamayiz. Her satir bir karta doner, sutun basligi
   hucrenin ustunde etiket olur; baslik satiri ekran okuyucuya kalir. */
@media (max-width:34rem){
  table,tbody,tr,td{display:block;inline-size:auto}
  thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  tr{border:1px solid var(--cizgi);border-radius:var(--r);background:var(--panel);
    padding:.95rem 1.05rem;margin-block-end:.85rem}
  td{border:0;padding:0 0 .75rem}
  tr > td:last-child{padding-block-end:0}
  td[data-et]::before{content:attr(data-et);display:block;
    font:600 .75rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
    color:var(--t4);margin-block-end:.1rem}
  /* iletisim tablosu: baslik satirin basinda duruyor, ustune cikar */
  tr > th[scope="row"]{display:block;border:0;padding:0 0 .3rem;
    font:600 .75rem/1.5 var(--mono);letter-spacing:.06em}
}