/* ============================================================
 * base.css — reset + tipografi + scrollbar + yardımcılar
 * ============================================================ */

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

/* ── KÖK KİLİDİ — mobil app-kabuğu mimarisi (2026-07-12) ──────
   Belge HİÇBİR koşulda kaydırılamaz; tüm kaydırma iç scroller'larda.
   İki katmanlı savunma:
   1) Kilitli kök → Chrome Android bar'ları yalnız KÖK kaydırılınca
      gizler; kök kilitliyken üst/alt bar hiç oynamaz.
   2) iOS 15+ Safari iç scroller'da da bar gizleyebilir → layout ayrıca
      SABİT ICB'ye çıpalıdır: tam-ekran katmanlar position:absolute
      (fixed YASAK — fixed, bar animasyonunda canlı değişen viewport'a
      yapışır), boyutlar %/svh (dvh-lvh-vh YASAK), safe-area yalnız
      statik --safe-* token'larından (tokens.css). Bar yine de oynarsa
      tarayıcı sadece zemin gradientinden fazlasını gösterir, uygulama
      içinde hiçbir şey zıplamaz. */
/* hidden → clip YÜKSELTMESİ (2026-07-16, "gri çizgi" avının sonu):
   hidden'da kök yine de KAYDIRMA KABI sayılır — animasyonlu bir öğe
   (kayıt radar halkası, eski translateX kayması) viewport dışına taşıp
   kökün kaydırılabilir alanını büyüttüğü anda Android Chrome kenarlara
   overlay scrollbar GÖSTERGELERİNİ kendisi çizip söndürüyordu (sağda
   dikey + altta yatay ince gri çizgi, köşede buluşup kaybolan; ölçüm:
   kayıtta kök taşması x+50/y+109px). clip'te kök scroll kabı DEĞİLDİR:
   gösterge katmanı hiç yaratılmaz. Önce hidden = clip bilmeyen eski
   Safari (≤15) fallback'i — orada davranış bugünkü gibi kalır. */
html, body { height: 100%; overflow: hidden; overflow: clip; overscroll-behavior: none; }

/* Mobil dokunma parlaması (mavi tap-highlight) KAPALI — app-hissi;
   klavye odak halkası (:focus-visible) etkilenmez, aşağıda durur. */
html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  /* background-image: var(--bg-grad);  ← kapalı (kullanıcı 2026-07-12:
     body'de gradient istenmiyor; token durur, istenirse geri açılır) */
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-weight: 700; letter-spacing: -.02em; }
h3, h4 { font-weight: 650; letter-spacing: -.01em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: .92em; }
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); }

/* İkonlar (Font Awesome) — satır içinde dikey hizalama */
i.fa-solid, i.fa-regular, i.fa-brands { line-height: 1; vertical-align: -.08em; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Odak halkası — yalnız klavye ile */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Yardımcılar */
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.muted-4 { color: var(--text-4); }
.small { font-size: 12.5px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }

/* Boşluk/dizilim yardımcıları — JS şablonlarında tek-satır inline
   style YASAK (mimari kural 2026-07-12: her şey CSS'ten yönetilir;
   yalnız veri-türevi dinamik değerler inline kalabilir). */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.tc { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }
/* Liste içi sessiz not ("Yükleniyor…", "Eşleşme yok." vb.) — tek ortak pay */
.list-note { padding: 8px 4px; }

/* Spinner */
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}