/* =====================================================================
   MKSK — Temel: sıfırlama, tipografi, yerleşim ilkelleri
   tokens.css'ten SONRA yüklenir.
   ===================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--ol-govde);
  line-height: 1.6;
  background: var(--kage);
  color: var(--moji);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Başlıklar: genişlik ekseni kademe kademe sıkışır (docs/06 §6.4) */
h1, h2, h3, h4 { margin: 0 0 var(--b3); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--ol-h1); font-stretch: 78%; line-height: 1.05; }
h2 { font-size: var(--ol-h2); font-stretch: 85%; line-height: 1.15; }
h3 { font-size: var(--ol-h3); font-stretch: 100%; font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--ol-govde); font-weight: 600; }

p { margin: 0 0 var(--b4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--ao); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--ol-kucuk); }
strong, b { font-weight: 600; }

code, kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--kage);
  padding: 1px 5px;
  border-radius: var(--k-yapi);
}

hr { border: 0; border-top: 1px solid var(--sen); margin: var(--b5) 0; }

/* Klavye odağı ASLA kapatılmaz (docs/06 §6.8) */
:focus-visible {
  outline: 2px solid var(--ao);
  outline-offset: 2px;
  border-radius: var(--k-yapi);
}

/* Ekran okuyucuya görünür, göze görünmez */
.gizli-erisilebilir {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* İçeriğe atla bağlantısı */
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--aka); color: #fff; padding: var(--b3) var(--b4);
}
.atla:focus { left: 0; }

/* --- yerleşim ------------------------------------------------------- */
.sarmal { max-width: var(--icerik-en); margin: 0 auto; padding: 0 var(--b5); }
.dar    { max-width: 720px; }

.yigin > * + * { margin-top: var(--b4); }
.yigin-s > * + * { margin-top: var(--b2); }
.yigin-l > * + * { margin-top: var(--b6); }

.satir { display: flex; align-items: center; gap: var(--b3); }
.satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); }
.esnek { flex: 1; min-width: 0; }
.sar { flex-wrap: wrap; }

.izgara { display: grid; gap: var(--b3); }

/*
 * `min(240px, 100%)` — düz `240px` DEĞİL.
 *
 * 375 piksellik telefonda 240 piksel alt sınır tek başına sorun
 * değil ama kutunun içinde kaydırılamayan geniş bir şey varsa
 * (grafik tuvali, tablo) sütun onu barındırmak için şişiyor ve
 * sayfayı dışarı taşırıyor. `min()` sarmalı, dar ekranda alt
 * sınırı ekran genişliğine indiriyor.
 */
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* --- yardımcı sınıflar ------------------------------------------------ */
.sag  { text-align: right; }
.orta { text-align: center; }
.sus  { color: var(--moji-2); }
.sus-2{ color: var(--moji-3); }
.kucuk{ font-size: var(--ol-kucuk); }
.mikro{ font-size: var(--ol-mikro); }
.kalin{ font-weight: 600; }
.rakam{ font-variant-numeric: tabular-nums; }
.kirmizi { color: var(--hata); }
.yesil   { color: var(--ok); }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mt0{margin-top:0}      .mb0{margin-bottom:0}
.mt3{margin-top:var(--b3)}  .mb3{margin-bottom:var(--b3)}
.mt5{margin-top:var(--b5)}  .mb5{margin-bottom:var(--b5)}
.mt6{margin-top:var(--b6)}  .mb6{margin-bottom:var(--b6)}

.sadece-masaustu { display: none; }
@media (min-width: 1024px) {
  .sadece-masaustu { display: block; }
  .sadece-mobil    { display: none !important; }
}

@media print {
  .yazdirma-gizle { display: none !important; }
  body { background: #fff; }
}

/* =====================================================================
   hidden özniteliği HER ZAMAN kazanır.
   `display: flex/grid` tanımlı bir öğede `hidden` sessizce etkisiz kalır;
   toplu işlem çubuğu bu yüzden seçim yokken de görünüyordu.
   ===================================================================== */
[hidden] { display: none !important; }