/* 1. Varsayılanları sistem tercihine göre ayarla (Flaşın ilk savunma hattı) */
:root {
  --bg: #f9f9f9;
  --fg: #0d0d0d;
  color-scheme: light dark; /* Tarayıcıya hazır olmasını söyler */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2D2D30;
    --fg: #fff;
  }
}

/* 2. JavaScript ile eklenen sınıflar (Kullanıcı seçimi her zaman üstündür) */
html.theme-dark body {
  --bg: #2D2D30;
  --fg: #fff;
  --nav-bg: #1f1f1f;
  --footer-bg: #000;
  --link: #aaa;
  --link-hover: #fff;
  --btn-bg: #434343;
  --btn-border: #434343;
}

html.theme-light body {
  --bg: #f9f9f9;
  --fg: #0d0d0d;
  --nav-bg: #f9f9f9;
  --footer-bg: #fff;
  --link: #606060;
  --link-hover: #0d0d0d;
  --btn-bg: rgb(61,59,60);
  --btn-border: rgb(61,59,60);
}

/* PJAX overlay to cover viewport during navigation/swap to avoid flash */
#pjax-overlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
#pjax-overlay.visible{opacity:1;pointer-events:auto}


/* 3. Uygulama: Flaş önlemek için ilk açılışta transition kullanma! */
html, body { 
  background-color: var(--bg); 
  color: var(--fg); 
}

/* Sadece sayfa tamamen yüklendikten sonra geçiş efekti olsun istersen sınıfa bağla */
body.ready {
  transition: background-color .18s ease, color .18s ease;
}