/* ═══════════════════════════════════════════════════════════════════════ SMURF MARKT — ARKA PLAN AURASI + KAYDIRMA BELİRME Mağaza sahibinin isteği (23 Eyl 2026): "yeni nesil, kaliteli izlenimi veren, hafiften renk geçişli, animasyonlu arka plan" + lolbypass.com'daki gibi kaydırdıkça alttan yükselerek beliren bölümler. ⚠️ ARKA PLANI body'nin background'ı DEĞİL ayrı bir katman yapıyoruz: tema ayarındaki `grad_bg_css` (Sayfa Tasarımcısı) hâlâ geçerli kalsın, burası onun ÜSTÜNE çok düşük opaklıkta renk sisi ekler. Böylece panelden arka plan değiştirildiğinde bu efekt bozulmaz. ⚠️ pointer-events:none — tıklamaları yutmaz. ⚠️ "Hareketi azalt" açıksa animasyon durur, renkler sabit kalır. ═══════════════════════════════════════════════════════════════════════ */ body::before{ content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(36% 36% at 16% 20%, rgba(124, 92, 255, .26), transparent 70%), radial-gradient(32% 32% at 84% 16%, rgba( 56, 189, 248, .18), transparent 70%), radial-gradient(38% 38% at 74% 84%, rgba(236, 72, 153, .15), transparent 72%), radial-gradient(30% 30% at 24% 80%, rgba( 45, 212, 191, .12), transparent 70%); filter:blur(60px) saturate(1.06); animation:smAurora 34s ease-in-out infinite alternate; } /* İkinci katman ters yönde süzülür — tek katman "duran duvar kağıdı" gibi duruyordu, iki katman çok yavaş da olsa canlı bir doku veriyor. */ body::after{ content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.7; background: radial-gradient(28% 28% at 62% 30%, rgba(99, 102, 241, .16), transparent 72%), radial-gradient(26% 26% at 30% 62%, rgba(168, 85, 247, .13), transparent 72%); filter:blur(70px); animation:smAurora2 46s ease-in-out infinite alternate; } @keyframes smAurora{ 0% {transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-2.5%,1.8%,0) scale(1.07)} 100%{transform:translate3d(2.2%,-1.4%,0) scale(1.03)} } @keyframes smAurora2{ 0% {transform:translate3d(1.5%,-1%,0) scale(1.04)} 100%{transform:translate3d(-1.8%,1.6%,0) scale(1)} } /* Açık temada aynı kompozisyon, çok daha yumuşak — beyaz zemin kirlenmesin. */ html[data-sm-theme="light"] body::before{ background: radial-gradient(36% 36% at 16% 20%, rgba(124, 92, 255, .16), transparent 70%), radial-gradient(32% 32% at 84% 16%, rgba( 56, 189, 248, .13), transparent 70%), radial-gradient(38% 38% at 74% 84%, rgba(236, 72, 153, .10), transparent 72%), radial-gradient(30% 30% at 24% 80%, rgba( 45, 212, 191, .09), transparent 70%); } html[data-sm-theme="light"] body::after{opacity:.5} @media (prefers-reduced-motion:reduce){ body::before,body::after{animation:none} } /* Telefonda sürekli boyanan büyük blur pil yiyor — katman sabitleniyor. */ @media (max-width:700px){ body::before{filter:blur(48px);animation:none} body::after{display:none} } /* ═══ KAYDIRINCA BELİRME ═══════════════════════════════════════════════ JS 'e .sr-on ekler; JS yoksa hiçbir şey gizlenmez (içerik her koşulda görünür kalır — SEO ve JS'siz tarayıcı için şart). */ html.sr-on .sr{ opacity:0;transform:translateY(26px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); transition-delay:var(--sr-d,0s);will-change:opacity,transform} html.sr-on .sr.sr-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.sr-on .sr{opacity:1;transform:none;transition:none} } /* ═══ KAĞIT/FİLM GRENİ ════════════════════════════════════════════════ Gradyanın üstünde çok ince bir doku. İki işi birden yapıyor: 1) Ekrana "basılı kağıt" hissi verir — düz dijital yüzey ucuz duruyordu. 2) BANTLAŞMAYI GİZLER. Geniş bulanık radyal gradyanlar 8-bit ekranda halka halka şeritler yapar; ince gren bunu kırar (asıl teknik sebep). ⚠️ GÖRSEL DOSYA YOK: desen SVG feTurbulence ile tarayıcıda üretiliyor, ek istek ve indirme maliyeti sıfır. ⚠️ Opaklık düşük tutulacak; 0.06'yı geçerse metin kirli görünmeye başlıyor. ⚠️ pointer-events:none — tıklama yutmaz. */ html::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; opacity:.042;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); background-size:220px 220px; animation:smGrain 7s steps(6) infinite; } /* Gren çok hafif yer değiştirir — sabit gren "ekranda toz var" gibi duruyordu; hareket edince film hissine dönüşüyor. */ @keyframes smGrain{ 0%,100%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-2%,1%,0)} 40%{transform:translate3d(1.5%,-1.5%,0)} 60%{transform:translate3d(-1%,2%,0)} 80%{transform:translate3d(2%,1.5%,0)} } html[data-sm-theme="light"]::after{opacity:.030;mix-blend-mode:multiply} @media (prefers-reduced-motion:reduce){html::after{animation:none}} @media (max-width:700px){html::after{opacity:.032;animation:none}}