/*
 | Genel sayfa arka planları (günlük dönüşümlü; seçim App\Support\SiteBackground). Tamamen özgün ve kodla üretilmiştir:
 | CSS gradyanları + çok küçük SVG çizimleri (harici görsel yok). Yalnızca <body class="sbg-<tema>"> varken çalışır;
 | oyun temalı sayfalarda (Albion/UO) bu sınıf eklenmez ve game-themes.css devreye girer.
 |
 | Kurallar: arka plan metnin doğrudan zemini olmamalı (kartlar opak), en parlak piksel bile metinle WCAG AA verir
 | (SiteBackground::WORST_CASE_LAYERS ile test edilir), katmanlar üstte kalıp aşağıya doğru zemine solar, hareket yalnızca
 | transform/opacity ile ve yalnızca masaüstünde + "hareketi azalt" kapalıyken çalışır.
*/
/* overflow-x: clip — yan yana kayan katmanlar (aurora, bulutlar) kenardan taşıp yatay kaydırma çubuğu oluşturmasın; sticky/fixed öğeleri bozmaz. */
body[class*="sbg-"] { position: relative; overflow-x: clip; }

body[class*="sbg-"]::before,
body[class*="sbg-"]::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 560px;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
}
body[class*="sbg-"]::after { display: none; }   /* yalnızca hareketli/ikinci katmanı olan temalar açar */
@media (min-width: 1024px) {
    body[class*="sbg-"]::before, body[class*="sbg-"]::after { height: 720px; }
}
body[class*="sbg-"] main h1.page-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

/* 1) Neon Izgara — mor ızgara, ufukta mor-turuncu parıltı */
body.sbg-neon::before {
    background-image:
        radial-gradient(ellipse 90% 80% at 50% 0%, rgba(124, 58, 237, .22), transparent 75%),
        radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 138, 31, .09), transparent 70%),
        repeating-linear-gradient(90deg, rgba(124, 58, 237, .13) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(0deg, rgba(124, 58, 237, .13) 0 1px, transparent 1px 56px);
}

/* 2) Piksel Yıldız — yıldız tozu (farklı döşeme boyutlarıyla tekrar hissi kırılır) + mor bulutsu; ikinci katman hafifçe parıldar */
body.sbg-yildiz::before {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent 60%),
        radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, .8), transparent 60%),
        radial-gradient(2px 2px at 70px 140px, rgba(216, 253, 64, .85), transparent 60%),
        radial-gradient(1px 1px at 180px 20px, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(2px 2px at 230px 190px, rgba(255, 138, 31, .85), transparent 60%),
        radial-gradient(ellipse 40% 35% at 85% 0%, rgba(124, 58, 237, .22), transparent 70%);
    background-size: 211px 211px, 307px 307px, 401px 401px, 257px 257px, 463px 463px, 100% 100%;
    background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}
body.sbg-yildiz::after {
    display: block;
    background-image:
        radial-gradient(1px 1px at 90px 60px, #fff, transparent 60%),
        radial-gradient(1px 1px at 150px 170px, rgba(255, 255, 255, .8), transparent 60%),
        radial-gradient(2px 2px at 40px 110px, rgba(255, 255, 255, .9), transparent 60%);
    background-size: 283px 283px, 349px 349px, 431px 431px;
    background-repeat: repeat;
}

/* 3) Devre Kartı — gri devre izleri, limon düğümler (SVG ~0,5 KB) */
body.sbg-devre::before {
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124, 58, 237, .14), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 32H48V0M48 32V96H112M112 96V160M160 64H112V96M16 160V128H64' fill='none' stroke='%23475569' stroke-opacity='.5'/%3E%3Cg fill='%23d8fd40' fill-opacity='.4'%3E%3Ccircle cx='48' cy='32' r='2.5'/%3E%3Ccircle cx='112' cy='96' r='2.5'/%3E%3Ccircle cx='64' cy='128' r='2.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23475569' stroke-opacity='.5'%3E%3Ccircle cx='112' cy='160' r='3'/%3E%3Ccircle cx='48' cy='0' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 160px 160px;
}

/* 4) Aurora — üstten sarkan mor, limon-yeşil ve turuncu ışık perdeleri; ikinci katman yavaşça kayar */
body.sbg-aurora::before {
    background-image:
        radial-gradient(ellipse 50% 45% at 20% 0%, rgba(124, 58, 237, .26), transparent 70%),
        radial-gradient(ellipse 45% 40% at 75% 0%, rgba(186, 255, 70, .10), transparent 70%),
        radial-gradient(ellipse 40% 35% at 50% 0%, rgba(255, 138, 31, .09), transparent 70%);
}
body.sbg-aurora::after {
    display: block;
    background-image:
        radial-gradient(ellipse 55% 40% at 60% 0%, rgba(124, 58, 237, .18), transparent 70%),
        radial-gradient(ellipse 35% 30% at 30% 0%, rgba(186, 255, 70, .07), transparent 70%);
}

/* 5) Sihirli Rün — seyrek, özgün (gerçek bir yazı sistemi değil) semboller + üstte yavaşça dönen büyü halkası */
body.sbg-run::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none' stroke='%23a78bfa' stroke-opacity='.13' stroke-width='1.5' stroke-linecap='round'%3E%3Cg transform='translate(30 34)'%3E%3Ccircle r='9'/%3E%3Cpath d='M0 -9V9M-9 0L0 9L9 0'/%3E%3C/g%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M0 -11L10 7H-10Z'/%3E%3Ccircle cy='1' r='2'/%3E%3C/g%3E%3Cg transform='translate(66 138)'%3E%3Cpath d='M-10 -8Q0 -16 10 -8M-10 8Q0 16 10 8M0 -8V8'/%3E%3C/g%3E%3Cg transform='translate(160 160)'%3E%3Cpath d='M-9 0H9M0 -9V9M-6 -6L6 6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}
body.sbg-run::after {
    inset: -170px auto auto 50%;
    width: 560px;
    height: 560px;
    margin-left: -280px;
    -webkit-mask-image: radial-gradient(circle, #000 0, #000 55%, transparent 72%);
    mask-image: radial-gradient(circle, #000 0, #000 55%, transparent 72%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560' fill='none' stroke='%23a78bfa' stroke-opacity='.14' stroke-width='1.5'%3E%3Ccircle cx='280' cy='280' r='270'/%3E%3Ccircle cx='280' cy='280' r='236' stroke-dasharray='2 14'/%3E%3Ccircle cx='280' cy='280' r='180'/%3E%3Cpath d='M280 100L436 370H124Z'/%3E%3Cpath d='M280 460L124 190H436Z'/%3E%3Ccircle cx='280' cy='280' r='6' stroke='%23ff8a1f' stroke-opacity='.3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Halka 560 px genişliğinde: dar ekranda yatay kaydırmaya yol açmasın diye yalnızca ≥ 640 px'te gösterilir. */
@media (min-width: 640px) { body.sbg-run::after { display: block; } }

/* 6) Gün Batımı — üstten mor → turuncu şafak, yumuşak bulut şeritleri; ikinci katman bulutları yavaşça kaydırır */
body.sbg-gunbatimi::before {
    background-image:
        radial-gradient(ellipse 45% 7% at 18% 24%, rgba(226, 232, 240, .06), transparent 70%),
        radial-gradient(ellipse 38% 6% at 72% 18%, rgba(226, 232, 240, .06), transparent 70%),
        linear-gradient(to bottom, rgba(124, 58, 237, .26) 0, rgba(255, 138, 31, .13) 40%, transparent 85%);
}
body.sbg-gunbatimi::after {
    display: block;
    background-image:
        radial-gradient(ellipse 36% 5% at 40% 30%, rgba(226, 232, 240, .05), transparent 70%),
        radial-gradient(ellipse 30% 5% at 85% 36%, rgba(226, 232, 240, .05), transparent 70%);
}

/* Hareket: yalnızca masaüstü + "hareketi azalt" kapalı; yalnızca transform/opacity (GPU), 40–160 sn'lik çok yavaş döngüler */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    body.sbg-yildiz::after { animation: sbg-twinkle 5s ease-in-out infinite alternate; }
    body.sbg-aurora::after { animation: sbg-drift 48s ease-in-out infinite alternate; }
    body.sbg-run::after { animation: sbg-spin 160s linear infinite; }
    body.sbg-gunbatimi::after { animation: sbg-drift 90s ease-in-out infinite alternate; }
}
@keyframes sbg-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes sbg-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
@keyframes sbg-spin { to { transform: rotate(360deg); } }

/* Düz zemin: yazdırma, yüksek karşıtlık, zorunlu renkler; veri tasarrufunda SVG'li temalar kapanır */
@media print, (forced-colors: active), (prefers-contrast: more) {
    body[class*="sbg-"]::before, body[class*="sbg-"]::after { display: none !important; }
}
@media (prefers-reduced-data: reduce) {
    body.sbg-devre::before, body.sbg-run::before, body.sbg-run::after { background-image: none; }
}