/* styles-base.css — taban: sıfırlama, erişilebilirlik, düz zemin, cam yüzey, yüzen cam antet.
   Tema belirteçleri styles-theme.css'te; tasarım kaydı DESIGN.md'de. */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  /* Lenis yokken (JS'siz / CDN düşmüş) çapalar yumuşak insin; Lenis aktifken .lenis sınıfı bu kuralı kapatır —
     ikisi aynı anda çalışınca tarayıcı Lenis'in her kare kaydırmasını yeniden yumuşatıp tekerleği taklaştırıyor */
  html:not(.lenis) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--govde);
  font-size: 17px;
  line-height: 1.6;
  color: var(--metin);
  background-color: var(--zemin);
}

/* Cam yüzey: seyrek malzeme. Tam doz (.cam) yalnız antet ve sayaca ayrılmıştır;
   kartların hafif dozu faz 2'de .cam--hafif olarak gelir. */
.cam {
  background: var(--cam-yuzey);
  border: 1px solid var(--cam-kenar);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--cam-golge);
}
/* backdrop-filter yoksa opak yüzeye düş: bulanıklıksız yarı saydam yüzme kötü görünür */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cam { background: var(--yuzey); }
}

/* Hafif cam dozu: kart ve panel yüzeyleri. Daha opak, daha az blur, belirgin kenar —
   her şey aynı cam olduğunda cam kaybolur; doz ayrımı camı seyrek malzeme yapar. */
.cam--hafif {
  background: var(--cam-yuzey-hafif);
  border: 1px solid var(--cam-kenar-hafif);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--cam-golge-hafif);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cam--hafif { background: var(--yuzey); }
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--vurgu); color: #fff; }

/* ui.js'teki Lenis offset -76 ile aynı: yapışkan antetin altında kalmasın */
[id] { scroll-margin-top: 76px; }

a {
  color: var(--vurgu);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover, a:focus-visible { color: var(--vurgu-koyu); text-decoration-thickness: 2px; }
a[href^="http"]:visited { color: var(--vurgu-koyu); }

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

.mono { font-family: var(--mono); }

.icerik { max-width: var(--genislik); margin-inline: auto; padding-inline: var(--kenar); }

/* Bölüm iskeleti: her bölüm kendi başlığına bağlanır, hairline alias'ıyla ayrılır */
main > section + section { border-top: 1px solid var(--hairline); }
.bolum { padding-block: clamp(52px, 8vh, 100px); }
/* Bölüm numarası: içeriğin gerçek sırası — mono, küçük, pasif */
.bolum-sira {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pasif);
  margin-bottom: 10px;
}
.bolum-baslik {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.bolum-not { font-size: 13px; color: var(--pasif); margin-bottom: clamp(28px, 4vh, 44px); }

/* Hatch (tarama) kodları: faz 2 sökecek; şimdilik nötr mürekkep rengiyle durur.
   Renk tek başına bilgi taşımaz, yanında daima metin etiketi var. */
.hatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  background-image: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 4.5px);
  vertical-align: -2px;
  margin-right: 8px;
}
.hatch--oyun, .hatch--sistem, .hatch--mobil, .hatch--veri { color: var(--metin); }
.hatch--mobil { background-image: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 6px); }
.hatch--veri { background-image: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 6.5px); }

/* Belge barı antet: tam genişlik, tam cam doz, alt hairline — belge başlığı gibi durur */
.antet {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--kenar-cizgi);
  padding-inline: clamp(18px, 3.4vw, 32px);
}
.antet-ic { display: flex; align-items: center; flex-wrap: wrap; gap: 6px clamp(14px, 2.6vw, 32px); min-height: 52px; }
.antet-ad {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--metin);
  text-decoration: none;
  padding: 10px 0;
}
.antet-ad:hover, .antet-ad:focus-visible { color: var(--vurgu); }
.antet-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px clamp(12px, 2vw, 24px); }
.antet-nav a {
  color: var(--metin);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 2px;
}
.antet-nav a:hover, .antet-nav a:focus-visible { color: var(--vurgu); text-decoration: underline; }

/* Mobilde antet iki satır: isim + tema düğmesi üstte, nav altta geniş; düğme yalnız satırda kalmasın */
@media (max-width: 1023px) {
  #tema-dugme { order: 1; margin-left: auto; }
  .antet-nav { order: 2; margin-left: 0; width: 100%; padding-bottom: 6px; }
}

/* Tema düğmesi: tıklamayı faz 3'teki JS bağlayacak. İkonlar tema durumuna göre CSS ile takas:
   açık temada ay (koyuya geçiş çağrısı), koyuda güneş görünür. */
#tema-dugme {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--kenar-cizgi);
  border-radius: 50%;
  background: transparent;
  color: var(--metin);
  cursor: pointer;
}
#tema-dugme:hover, #tema-dugme:focus-visible { color: var(--vurgu); border-color: var(--vurgu); }
#tema-dugme svg { width: 17px; height: 17px; display: block; }
.ikon-gunes { display: none; }
html[data-tema="koyu"] .ikon-gunes { display: block; }
html[data-tema="koyu"] .ikon-ay { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) .ikon-gunes { display: block; }
  html:not([data-tema]) .ikon-ay { display: none; }
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--yuzey);
  color: var(--vurgu);
  border: 2px solid var(--vurgu);
  border-radius: var(--radius-kart);
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Hareket azaltma tercihi: tüm geçiş/animasyon ve yumuşak kaydırma tamamen kapanır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}