/*
 * F5 / ilk açılış yükleme ekranı (index.html > #root > .boot-loader).
 *
 * 🔴 ÖNCEDEN İLK KARE YALNIZ ALTBİLGİYDİ — ÖLÇÜLDÜ. JavaScript paketi
 * (~225 KB + CSS ~156 KB) inene kadar beyaz sayfada tek başına yasal
 * bağlantılar görünüyor, sonra "…" ve en son sayfa geliyordu. Yavaş ağda
 * ~1 sn. Bu blok React'ten ÖNCE çizilir (CSS çizimi bloklar, JS beklemez)
 * ve React ilk çizimde #root'un içeriğini değiştirince kendiliğinden gider.
 *
 * Ayrı dosya: CSP satır içi <style>'a izin vermiyor (static-footer.css ile
 * aynı gerekçe). Renkler theme.css'teki --background / --primary ile aynı;
 * koyu tema `theme-init.js`'in <html>'e yazdığı `.dark` sınıfından okunur.
 */
/* #root ham HTML'de altbilgi + yükleme taşır; yükleme üstte görünür. */
#root:has(> .boot-loader) {
  display: flex;
  flex-direction: column;
}
#root > .boot-loader { order: -1; }

.boot-loader {
  display: flex;
  min-height: 70vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  color: #64748b;
}
html { background: #f8fafc; }
html.dark { background: #101318; }
html.dark .boot-loader { color: #94a3b8; }

.boot-loader__logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.boot-loader__bar {
  display: block;
  position: relative;
  width: 120px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.2);
}

.boot-loader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: #e24a1f;
  animation: boot-loader-slide 1s ease-in-out infinite;
}

@keyframes boot-loader-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Hareket duyarlılığı: kayan çubuk durur, yarı dolu sabit çubuk kalır. */
@media (prefers-reduced-motion: reduce) {
  .boot-loader__bar::after {
    animation: none;
    transform: translateX(75%);
  }
}

.boot-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}