/*!
 * Wuffi Pet — Animated Background (shared across standalone pages)
 * Used by: anasayfa2, blog, blog-single, araclar, araclar-hub, araclar-tool,
 *          hizmet-al, alisveris, dashboards (owner/business/admin)
 *
 * Markup: <div class="wf-bg-anim" aria-hidden="true"><span></span></div>
 *         <div class="wf-bg-overlay" aria-hidden="true"></div>
 */

/* ═════════════════════════════════════════════════════════════════
   1. WRAPPER + BLOB BASE
   ═════════════════════════════════════════════════════════════════ */
.wf-bg-anim {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: #0a0420;
  contain: strict;
}
.wf-bg-anim::before,
.wf-bg-anim::after,
.wf-bg-anim > span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.wf-bg-anim::before,
.wf-bg-anim::after { content: ''; }

/* ═════════════════════════════════════════════════════════════════
   1.5 ORB GÖRÜNÜRLÜK FIX (v55) — fixed z-index:-1 orb, OPAK body bg'nin
   ARKASINDA kalıp gizleniyordu. Koyu gradyanı html'e taşı + body'yi şeffaf
   yap → orb body içeriğinin ARKASINDA, html-bg'nin ÖNÜNDE görünür.
   Bu CSS yalnız orb-yüklü sayfalarda enqueue → diğer sayfalar etkilenmez.
   ═════════════════════════════════════════════════════════════════ */
html {
  background: linear-gradient(180deg, #0e0a22 0%, #140f2e 30%, #0d0920 60%, #110e26 100%);
  background-attachment: fixed;
}
body { background: transparent !important; background-image: none !important; }
[data-theme="pudra"] html {
  background: linear-gradient(180deg, #f5eef9 0%, #e8def0 50%, #f0e6f5 100%);
  background-attachment: fixed;
}

/* ═════════════════════════════════════════════════════════════════
   2. BLOB COLORS — DARK (purple) THEME
   ═════════════════════════════════════════════════════════════════ */
.wf-bg-anim::before {
  width: 45vmax; height: 45vmax;
  background: radial-gradient(circle, rgba(170, 50, 230, 0.36) 0%, rgba(200, 80, 255, 0.13) 40%, transparent 70%);
  top: -10%; left: -8%;
  animation: wfBlob1 9s ease-in-out infinite alternate;
}
.wf-bg-anim::after {
  width: 38vmax; height: 38vmax;
  background: radial-gradient(circle, rgba(20, 210, 210, 0.30) 0%, rgba(50, 200, 255, 0.11) 40%, transparent 70%);
  bottom: -10%; right: -8%;
  animation: wfBlob2 12s ease-in-out infinite alternate;
}
.wf-bg-anim > span {
  display: block;
  width: 32vmax; height: 32vmax;
  background: radial-gradient(circle, rgba(255, 80, 160, 0.21) 0%, rgba(255, 120, 180, 0.08) 40%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: wfBlob3 10s ease-in-out infinite alternate;
}

/* ═════════════════════════════════════════════════════════════════
   3. BLOB COLORS — PUDRA (light) THEME
   FAZ C3 (v4.2): pudra tema için yumuşak pastel blob'lar.
   Light bg üzerinde aşırı doygun renkler okuma zorlaştırır;
   hafif lavanta + sarı + şeftali tonları kullanılıyor.
   ═════════════════════════════════════════════════════════════════ */
[data-theme="pudra"] .wf-bg-anim {
  background: #f5eef9;
}
[data-theme="pudra"] .wf-bg-anim::before {
  background: radial-gradient(circle, rgba(124, 92, 191, 0.22) 0%, rgba(179, 157, 219, 0.10) 40%, transparent 70%);
}
[data-theme="pudra"] .wf-bg-anim::after {
  background: radial-gradient(circle, rgba(255, 152, 0, 0.20) 0%, rgba(255, 185, 35, 0.08) 40%, transparent 70%);
}
[data-theme="pudra"] .wf-bg-anim > span {
  background: radial-gradient(circle, rgba(255, 158, 170, 0.18) 0%, rgba(255, 200, 210, 0.08) 40%, transparent 70%);
}

/* ═════════════════════════════════════════════════════════════════
   4. KEYFRAMES
   ═════════════════════════════════════════════════════════════════ */
@keyframes wfBlob1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(20vw, 10vh) scale(1.12); }
  50%  { transform: translate(42vw, 30vh) scale(0.92); }
  75%  { transform: translate(30vw, 50vh) scale(1.08); }
  100% { transform: translate(10vw, 60vh) scale(1.02); }
}
@keyframes wfBlob2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-18vw, -12vh) scale(1.08); }
  50%  { transform: translate(-38vw, -5vh) scale(1.2); }
  75%  { transform: translate(-28vw, -30vh) scale(0.95); }
  100% { transform: translate(-12vw, -40vh) scale(1.1); }
}
@keyframes wfBlob3 {
  0%   { transform: translate(-50%, -50%) scale(0.9); }
  25%  { transform: translate(-30%, -70%) scale(1.05); }
  50%  { transform: translate(-60%, -30%) scale(1.15); }
  75%  { transform: translate(-40%, -60%) scale(0.95); }
  100% { transform: translate(-55%, -45%) scale(1.08); }
}

/* ═════════════════════════════════════════════════════════════════
   5. OVERLAY (color-tinted gradient on top of blobs)
   ═════════════════════════════════════════════════════════════════ */
.wf-bg-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 6, 30, 0.16) 0%,
    rgba(14, 9, 38, 0.08) 50%,
    rgba(8, 4, 22, 0.18) 100%);
}

/* Pudra: çok hafif, beyaz tonlu overlay — blob'ların doygunluğunu yumuşat */
[data-theme="pudra"] .wf-bg-overlay {
  background: linear-gradient(to bottom,
    rgba(248, 243, 253, 0.55) 0%,
    rgba(245, 238, 249, 0.42) 50%,
    rgba(239, 232, 248, 0.58) 100%);
}/* ═════════════════════════════════════════════════════════════════
   6. ACCESSIBILITY
   ═════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .wf-bg-anim::before,
  .wf-bg-anim::after,
  .wf-bg-anim > span {
    animation: none !important;
  }
}