/* ═══════════════════════════════════════════════════════════════════════════
   KAPI SAYFALARI — bakim.html ve 404.html'in ortak stili
   ═══════════════════════════════════════════════════════════════════════════

   2026-08-31'de satır içi <style> bloğundan buraya taşındı: satır içi stil
   kaldığı sürece CSP'de `style-src 'unsafe-inline'` açık kalmak zorundaydı.
   Ayrı dosya olunca site 'self' ile yetiniyor.

   İki sayfa da aynı `.kapi` iskeletini kullanır: tek ekran, ad, durum
   satırı ve iletişim. Dosya adı sınıf önekiyle aynı olsun diye kapi.css.

   Renk, ölçü ve tipografi tokens.css'ten gelir; burada sabit değer yok. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.kapi {
  width: min(38rem, 100%);
  display: grid;
  gap: var(--space-lg);
}

/* Üstteki kısa çubuk sitenin bölüm başlıklarındaki işaretin aynısı. */
.kapi__im {
  width: 2.5rem;
  height: var(--rule-thick);
  background: var(--accent);
}

.kapi__ad {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text);
  text-wrap: balance;
}
.kapi__gorev {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.kapi__cizgi {
  height: var(--rule-hair);
  margin-block: var(--space-xs);
  background: var(--line);
}

.kapi__durum {
  margin: 0;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.kapi__metin {
  max-width: var(--measure-narrow);
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-read);
  color: var(--text-2);
}

/* <address> tarayıcı varsayılanında italiktir; burada düz metin olmalı —
   sitenin hiçbir yerinde iletişim bilgisi eğik yazılmıyor. */
.kapi__iletisim {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--line-2);
  font-style: normal;
  font-size: var(--text-md);
  line-height: var(--leading-read);
  color: var(--text-3);
}
.kapi__iletisim a { color: var(--accent); text-decoration: none; }
.kapi__iletisim a:hover { color: var(--accent-lit); text-decoration: underline; }

@media (max-width: 46rem) {
  .kapi__ad { font-size: var(--text-2xl); }
  .kapi__metin { font-size: var(--text-md); }
}