/* ============ 6 ANIMASYONLU ARKA PLAN TEMASI ============ */
/* body[data-bg="..."] ile secilir; .bg-layer sabit katman, .bg-particles partikuller */

/* Gradient sabit durur (paint yok); hareket, ustundeki transform'lu isik
   katmanindan gelir — GPU compositor isi, repaint tetiklemez. */
.bg-layer { background-size: cover; }
.bg-layer::before {
  content: ""; position: absolute; inset: -30%;
  background-image:
    radial-gradient(ellipse 42% 34% at 30% 32%, rgba(255, 255, 255, 0.045), transparent 65%),
    radial-gradient(ellipse 36% 30% at 72% 68%, rgba(34, 211, 238, 0.05), transparent 65%);
  animation: bgDrift 110s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.05); }
}

/* "Sabit" secilirse tum arka plan animasyonlari tamamen durur */
body.bg-static .bg-layer::before,
body.bg-static .bg-particles,
body.bg-static .bg-particles::before,
body.bg-static .bg-particles::after { animation-play-state: paused; }

/* --- Okyanus --- */
body[data-bg="okyanus"] .bg-layer {
  background-image: linear-gradient(135deg, #062a4a 0%, #06b6d4 45%, #043249 70%, #021d33 100%);
}
/* --- Gece --- */
body[data-bg="gece"] .bg-layer {
  background-image: linear-gradient(135deg, #05070f 0%, #0a1f3a 40%, #16264d 70%, #05070f 100%);
}
/* --- Aurora --- */
body[data-bg="aurora"] .bg-layer {
  background-image: linear-gradient(135deg, #04121f 0%, #0e4d43 30%, #1f7a5c 50%, #3a2a6b 75%, #04121f 100%);
}
/* --- Gun Batimi --- */
body[data-bg="gunbatimi"] .bg-layer {
  background-image: linear-gradient(135deg, #2b1055 0%, #7a2048 40%, #d95d39 70%, #f2a65a 100%);
}
/* --- Uzay --- */
body[data-bg="uzay"] .bg-layer {
  background-image: linear-gradient(135deg, #01030a 0%, #0d1033 40%, #241a52 65%, #01030a 100%);
}
/* --- Orman --- */
body[data-bg="orman"] .bg-layer {
  background-image: linear-gradient(135deg, #04170d 0%, #0d3b24 40%, #1e5c38 65%, #04170d 100%);
}

/* Aydinlik temada arka planlar yumusar */
[data-theme="light"] .bg-layer { opacity: .35; }

/* ============ PARTIKUL / DALGA KATMANI ============ */
.bg-particles, .bg-particles::before, .bg-particles::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
/* Yuzen yumusak baloncuklar (radial gradientlerle, GPU dostu) */
.bg-particles::before {
  background-image:
    radial-gradient(circle 90px at 18% 28%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(circle 60px at 72% 62%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(circle 120px at 85% 18%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(circle 50px at 35% 78%, rgba(255,255,255,.05), transparent 70%);
  animation: floatA 70s ease-in-out infinite alternate;
}
.bg-particles::after {
  background-image:
    radial-gradient(circle 70px at 55% 35%, rgba(34,211,238,.06), transparent 70%),
    radial-gradient(circle 100px at 12% 70%, rgba(34,211,238,.04), transparent 70%),
    radial-gradient(circle 45px at 90% 80%, rgba(255,255,255,.05), transparent 70%);
  animation: floatB 90s ease-in-out infinite alternate;
}
@keyframes floatA {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(-46px) translateX(28px); }
}
@keyframes floatB {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(38px) translateX(-30px); }
}

/* Uzay temasinda yildiz tozu */
body[data-bg="uzay"] .bg-particles {
  background-image:
    radial-gradient(circle 1.5px at 10% 20%, #fff, transparent 100%),
    radial-gradient(circle 1px at 30% 60%, #fff, transparent 100%),
    radial-gradient(circle 2px at 50% 30%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(circle 1px at 65% 75%, #fff, transparent 100%),
    radial-gradient(circle 1.5px at 80% 45%, #fff, transparent 100%),
    radial-gradient(circle 1px at 92% 15%, #fff, transparent 100%),
    radial-gradient(circle 1px at 22% 85%, #fff, transparent 100%),
    radial-gradient(circle 2px at 42% 8%, rgba(255,255,255,.8), transparent 100%);
  animation: twinkle 9s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

/* Okyanus temasinda dalga */
body[data-bg="okyanus"] .bg-particles::after {
  background-image:
    radial-gradient(ellipse 300px 40px at 30% 88%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 400px 50px at 75% 94%, rgba(255,255,255,.04), transparent 70%);
  animation: waves 45s ease-in-out infinite alternate;
}
@keyframes waves {
  from { transform: translateX(-36px); }
  to { transform: translateX(36px); }
}