/* ═══ SAHNE ARKA PLANLARI — müşteri sol alttaki butonla değiştirir ═══
   Seçenekler: 4 gece sahnesi (mantar ev, ışıklı ev, sarı ay, kulübe) +
   hareketli renk geçişi. Resimler yavaşça yakınlaşır (Ken Burns), üstünde
   sm-bg.css'teki renk sisi süzülür.
   Geri almak için master.njk'daki sm-scene satırlarını silmek yeterli
   (yedek: /root/yedek/master.njk.sahne-*). Resimler public/images/bg-scenes. */
#smScene{position:fixed;inset:-4%;z-index:-2;pointer-events:none;background:#0b0d1a center/cover no-repeat;transition:opacity .6s;opacity:0;
  animation:smKen 48s ease-in-out infinite alternate;will-change:transform}
#smScene.on{opacity:1}
#smScene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,22,.38) 0%,rgba(8,10,22,.58) 45%,rgba(8,10,22,.8) 100%)}
@keyframes smKen{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.07) translate3d(-1.2%,-1%,0)}}

/* Hareketli renk geçişi (resim yerine) */
#smScene.grad{animation:smGrad 26s ease-in-out infinite alternate;inset:0;
  background:linear-gradient(125deg,#070a24 0%,#24145a 22%,#0f2f6e 44%,#3a1460 66%,#0b1f52 84%,#070a24 100%);background-size:320% 320%}
#smScene.grad::after{background:radial-gradient(60% 50% at 50% 0%,rgba(139,92,246,.18),transparent 70%),linear-gradient(180deg,rgba(6,8,20,.05),rgba(6,8,20,.45))}
@keyframes smGrad{0%{background-position:0% 30%}50%{background-position:70% 60%}100%{background-position:100% 40%}}

html[data-sm-theme="light"] #smScene::after{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.78))}
html.sm-scene-on body{background:transparent !important}
.in-frame #smScene,.in-frame #smSceneBtn,.in-frame #smScenePick{display:none!important}
@media (prefers-reduced-motion:reduce){#smScene,#smScene.grad{animation:none}}

#smSceneBtn{position:fixed;left:16px;bottom:16px;z-index:1040;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(15,18,36,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s}
#smSceneBtn:hover{transform:scale(1.06)}
#smScenePick{position:fixed;left:16px;bottom:70px;z-index:1041;width:min(300px,calc(100vw - 32px));padding:12px;border-radius:16px;
  background:rgba(15,18,36,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(14px);display:none}
#smScenePick.on{display:block}
#smScenePick p{margin:0 0 10px;font-size:12.5px;font-weight:700;color:#e8eaff;display:flex;justify-content:space-between;align-items:center}
#smScenePick p button{background:none;border:0;color:#9aa3c7;font:inherit;font-weight:600;font-size:12px;cursor:pointer}
.smsc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.smsc-grid button{aspect-ratio:16/10;border-radius:10px;border:2px solid transparent;background:#1c2038 center/cover no-repeat;cursor:pointer;padding:0}
.smsc-grid button.is-on{border-color:#8b9cff;box-shadow:0 0 0 2px rgba(139,156,255,.3)}
.smsc-grid button.g{background:linear-gradient(125deg,#070a24,#24145a,#0f2f6e,#3a1460) !important}
@media(max-width:700px){#smSceneBtn{left:12px;bottom:12px;width:40px;height:40px;font-size:15px}#smScenePick{left:12px;bottom:60px}}

/* Discord tarzı gece: discord.com'daki lacivert→blurple dikey geçiş + kendi
   yıldız alanımız (canvas). Discord'un çizimleri KULLANILMAZ (telif). */
#smScene.dc{inset:0;animation:none;background:linear-gradient(180deg,#05082a 0%,#0b1046 18%,#141b7a 42%,#2330b0 72%,#2f39c4 100%)}
#smScene.dc::after{background:radial-gradient(70% 45% at 50% 100%,rgba(88,101,242,.35),transparent 70%),linear-gradient(180deg,rgba(5,8,42,0),rgba(5,8,42,.25))}
#smScene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#smScene.dc::after{z-index:1}
html.sm-scene-dc body::before,html.sm-scene-dc body::after{display:none}
.smsc-grid button.d{background:linear-gradient(180deg,#05082a,#141b7a 50%,#2f39c4) !important;position:relative}
.smsc-grid button.d::after{content:"✦ ✧ ✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;letter-spacing:4px;opacity:.85}

/* Kaydırdıkça koyulaşma — JS --sm-koyu'yu 0→1 arası verir (sayfanın ~%70'inde tam koyu). */
#smScene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#03051a;opacity:calc(var(--sm-koyu,0) * .82)}
html[data-sm-theme="light"] #smScene::before{display:none}

/* WebGL gökyüzü (sm-sky.js) çalışırken koyulaşma ve renk katmanlarını shader kendisi yapar. */
#smScene.gl::before,#smScene.gl::after{display:none}

/* Koyu gökyüzündeyken ana sayfa üst bölümünün kendi mor parıltıları da kısılır — sakin, güven veren görünüm. */
html.sm-scene-dc .nv-hero__bg::after{opacity:.22 !important}
html.sm-scene-dc .nv-hero__mesh{opacity:.35 !important}

/* Gündüz (açık tema) gökyüzünde üst bölüm istatistikleri beyazdı → okunmuyordu. */
html[data-sm-theme="light"] .nv-hero__stat b{color:#151a33 !important}
html[data-sm-theme="light"] .nv-hero__stat span{color:rgba(21,26,51,.6) !important}