/* ============================================================
   ARKA PLAN DOKUSU
   Düz tek renk zemini katmanlı bir yüzeye çevirir:
   ince grain, temaya göre renklenen ışık havuzları, üstten
   hafif parlama ve kenarlarda vinyet.

   Tasarım kuralları:
   - Görsel dosyası yok. Grain, satır içi SVG (data URI) olarak
     gömülüdür; ek HTTP isteği ve retina bulanıklığı olmaz.
   - Sabit renk yok. Işık havuzları --primary-rgb'den beslenir,
     böylece sekiz temanın hepsinde kendi rengiyle görünür.
   - Zemin açık olan temalarda (light) parlama/vinyet tonları
     aşağıda ayrıca ezilir; koyu değerler açık zeminde kirli durur.
   - Hepsi body'nin background-image katmanı olarak durur:
     ::before/::after ve z-index kullanılmaz, mevcut yığılma
     düzenine (navbar, modal, sidebar) hiç dokunmaz.
   ============================================================ */

:root {
    /* Temanın ana rengiyle boyanan ışık havuzları */
    --bg-glow-1: rgba(var(--primary-rgb), 0.20);
    --bg-glow-2: rgba(var(--primary-rgb), 0.11);
    --bg-glow-3: rgba(var(--primary-rgb), 0.07);

    /* Üstten aşağı sönen parlama — yüzeye hafif eğim hissi verir */
    --bg-sheen: rgba(255, 255, 255, 0.045);

    /* Kenar karartması: gözü içeriğe toplar */
    --bg-vignette: rgba(0, 0, 0, 0.45);

    /* İnce nokta ızgarası — "dokulu" hissi asıl bu verir */
    --bg-dot: rgba(255, 255, 255, 0.038);
    --bg-dot-size: 22px;

    --bg-grain-size: 160px;
}

/* Zemini açık olan tema: koyu vinyet ve beyaz parlama burada
   ters çalışır, ikisini de koyu tarafa çeviriyoruz. */
html[data-site-theme="light"] {
    --bg-sheen: rgba(15, 23, 42, 0.030);
    --bg-vignette: rgba(15, 23, 42, 0.08);
    --bg-glow-1: rgba(var(--primary-rgb), 0.10);
    --bg-glow-2: rgba(var(--primary-rgb), 0.06);
    --bg-glow-3: rgba(var(--primary-rgb), 0.04);
    --bg-dot: rgba(15, 23, 42, 0.055);
}

/* Gece yarısı teması zaten lacivert; ışık havuzlarını biraz
   güçlendirince derinlik artıyor. */
html[data-site-theme="midnight"] {
    --bg-glow-1: rgba(var(--primary-rgb), 0.24);
    --bg-glow-2: rgba(var(--primary-rgb), 0.13);
}

body {
    background-image:
        /* 1) Grain — bantlaşmayı kırar, yüzeye film dokusu verir */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),

        /* 2) Nokta ızgarası — dokunun asıl okunan katmanı */
        radial-gradient(var(--bg-dot) 1px, transparent 1px),

        /* 3) Vinyet */
        radial-gradient(120% 80% at 50% 38%, transparent 52%, var(--bg-vignette) 100%),

        /* 4) Üst parlama */
        linear-gradient(180deg, var(--bg-sheen), transparent 34%),

        /* 5) Sol altta üçüncü havuz — kompozisyonu dengeler */
        radial-gradient(800px 500px at 8% 82%, var(--bg-glow-3), transparent 60%),

        /* 6) Sağ üstte ikincil havuz */
        radial-gradient(900px 520px at 88% 8%, var(--bg-glow-2), transparent 62%),

        /* 7) Tepede ana havuz */
        radial-gradient(1100px 620px at 50% -8%, var(--bg-glow-1), transparent 68%);

    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:
        var(--bg-grain-size) var(--bg-grain-size),
        var(--bg-dot-size) var(--bg-dot-size),
        cover, cover, cover, cover, cover;

    /* Sayfa kaydırılırken ışık havuzları sabit kalsın: içerik
       ışığın üzerinden geçiyormuş hissi verir. Nokta ızgarası ve
       grain de sabit kalır, yoksa kaydırmada "sürüklenme" olur. */
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;

    /* Grain'i overlay ile karıştırmak, düz gri sis yerine yüzeyi
       modüle eden bir doku bırakır. */
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
}

/* ---- Mobil ----------------------------------------------------
   iOS Safari'de background-attachment:fixed hem güvenilmez hem
   de kaydırmada tırtıklanmaya yol açar. Mobilde sabitlemeyi
   bırakıyoruz; ışık havuzları sayfayla birlikte kayar. */
@media (max-width: 768px) {
    body {
        background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll;
        /* Küçük ekranda aynı yarıçaplar orantısız kalıyor */
        background-size: var(--bg-grain-size) var(--bg-grain-size), var(--bg-dot-size) var(--bg-dot-size), cover, cover, cover, cover, cover;
    }
}

/* ---- Hareket azaltma -----------------------------------------
   Doku statik; ama sabit zemin bazı kullanıcılarda kaydırma
   sırasında rahatsızlık veriyor. */
@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll;
    }
}