/* tema_art.css — tema arka planı: img/bg/tema_<tema>.webp + okunurluk overlay'i.
   Görsel yolu her tema dosyasındaki --art-img değişkeninden gelir; yoksa sadece --art-base renkleri kalır.
   Katmanlar (hepsi sabit, içeriğin arkasında): body::before = görsel, body::after = overlay (degrade + vinyet). */
html::before,
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

html::before {
    background: linear-gradient(180deg, var(--art-base-1, #070b16), var(--art-base-2, #04060d));
}

body::before {
    background: var(--art-img, none) center / cover no-repeat;
}

/* overlay: üstte (header/marquee) koyu, ortada hafif, altta yine koyu; kenarlarda vinyet; nokta/grain dokusu YOK */
body::after {
    --ov: var(--art-base-2, #04060d);
    background:
        radial-gradient(125% 95% at 50% 42%, transparent 26%, color-mix(in srgb, var(--ov) 92%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ov) 95%, transparent) 0%,
            color-mix(in srgb, var(--ov) 78%, transparent) 20%,
            color-mix(in srgb, var(--ov) 70%, transparent) 62%,
            color-mix(in srgb, var(--ov) 88%, transparent) 100%);
    mix-blend-mode: normal;
    opacity: 1;
}

@media (max-width: 768px) {
    body::before {
        background-position: 80% 50%;
    }

    body::after {
        background:
            radial-gradient(130% 100% at 50% 45%, transparent 24%, color-mix(in srgb, var(--ov) 85%, transparent) 100%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--ov) 95%, transparent) 0%,
                color-mix(in srgb, var(--ov) 84%, transparent) 25%,
                color-mix(in srgb, var(--ov) 80%, transparent) 65%,
                color-mix(in srgb, var(--ov) 92%, transparent) 100%);
    }
}