/* ==========================================================================
   TEK-SAHNE — her sayfanin ust bolumunun arkasindaki teknolojik hareketli sahne (24.09.2026)
   Olcu kaynagi: greensoft.ai/tr (10 sn'lik video: siyah zemin + perspektifli yesil izgara +
   suzulen bulanik huzmeler). Burada video yok; her desen yalnizca transform / opacity /
   background-position / mask-position canlandirir, duzen hesabi yaptirmaz.

   Kapsayici (.tek-sahne-kap) tema JETONLARINI koyu degerlere sabitler: icindeki baslik,
   dugme, rozet zaten var(--...) okudugu icin iki temada da ayni koyu sahne gorunur.
   Ust menu, sayfada sahne varken ve kaydirilmamisken ayni sabitlerle koyuya gecer
   (.page:has(.tek-sahne-kap) .saas-navbar:not(.kaydirilmis)); kaydirilinca normale doner.

   Desenler: huzme · devre · parcacik · veri · dalga · altigen  (TekSahne.razor)
   Tek aksan (#7BD300), ikinci renk yok (K-007). Hareketi azalt: hepsi durur.
   ========================================================================== */

/* ---------- 1) KAPSAYICI: tema jetonlari koyuya sabitlenir ---------- */
.tek-sahne-kap {
    --arkaplan-rengi: #05070A;
    --kutu-arkaplan-rengi: #0C1116;
    --kenarlik-rengi: #1E262F;
    --metin-ana-renk: #EEF3F8;
    --metin-ikincil-renk: #B8C2CE;
    --vurgu-rengi: #7BD300;
    --vurgu-hover: #96EE22;
    --vurgu-rgb: 123, 211, 0;
    --vurgu-ustu-metin: #05070A;
    --vurgu-ikincil: #DCE3EC;
    --vurgu-ucuncul: #9AA5B3;
    --vurgu-zemin: #7BD300;
    --vurgu-zemin-ustu: #05070A;
    --gumus-rgb: 220, 227, 236;
    --golge-orta: 0 10px 28px rgba(0, 0, 0, .55);
    --golge-belirgin: 0 28px 64px -14px rgba(0, 0, 0, .8);
    --ts-rgb: 123, 211, 0;
    position: relative;
    isolation: isolate;
    color: var(--metin-ana-renk);
    color-scheme: dark;
}

/* Icerik sahnenin ustunde durur; sahne mutlak, tiklanmaz, kendi tasmasini kirpar */
.tek-sahne-kap > :not(.tek-sahne) { position: relative; z-index: 1; }
.tek-sahne {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    contain: strict;
}
.tek-sahne > * { position: absolute; display: block; }

/* ---------- 2) ORTAK KATMANLAR ---------- */
.ts-doku {
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ts-rgb), .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ts-rgb), .06) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 55% 30%, #000 20%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 75% at 55% 30%, #000 20%, transparent 100%);
}
.ts-doku.ince { background-size: 28px 28px; opacity: .75; }

.ts-isik {
    top: 8%; left: 64%; width: 900px; height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(var(--ts-rgb), .22), transparent 62%);
    filter: blur(30px);
    animation: tsNefes 9s ease-in-out infinite;
}
@keyframes tsNefes { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Isik huzmeleri (huzme + parcacik desenleri): bulanik serit, agir salinim, sagda yogun */
.ts-huzmeler {
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 62% 50%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 85% 75% at 62% 50%, #000 35%, transparent 100%);
}
.ts-huzmeler i {
    position: absolute; display: block;
    top: -35%; height: 170%; width: 13vmax;
    left: var(--x); margin-left: -6.5vmax;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--ts-rgb), var(--g)) 50%, transparent 100%);
    filter: blur(38px);
    transform: rotate(var(--a)) translateX(-28vmax);
    will-change: transform, opacity;
    /* 24.09.2026: ilk surumde %7 salinim / 19-31 sn = saniyede 1-2 px, kullanici hareketi goremedi.
       Simdi her huzme ekranin yarisini (±28vmax) 10-18 sn'de supurur ve nefes alir (opaklik). */
    animation: tsHuzmeSalin var(--s) ease-in-out infinite alternate,
               tsHuzmeNefes calc(var(--s) * .55) ease-in-out infinite;
    animation-delay: var(--d), var(--d);
}
@keyframes tsHuzmeSalin {
    from { transform: rotate(var(--a)) translateX(-28vmax); }
    to   { transform: rotate(var(--a)) translateX(28vmax); }
}
@keyframes tsHuzmeNefes { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- 3) HUZME (ana sayfa): perspektifli izgara zemini ---------- */
.ts-izgara {
    left: 50%; bottom: -8%; width: 240%; height: 60%;
    transform: translateX(-50%) perspective(700px) rotateX(76deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(rgba(var(--ts-rgb), .34) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ts-rgb), .22) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 84%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 84%);
    opacity: .85;
    animation: tsIzgaraAk 3.6s linear infinite;
}
@keyframes tsIzgaraAk {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 96px, 0 0; }
}

/* ---------- 4) DEVRE: ince izler, uzerinde yuruyen darbeler, kirpisan dugumler ---------- */
.ts-izler { inset: 0; }
.ts-iz {
    position: absolute; display: block;
    top: var(--y); left: var(--x1); width: calc(var(--x2) - var(--x1)); height: 1px;
    background: rgba(var(--ts-rgb), .20);
}
.ts-iz.dikey { left: var(--x); top: var(--y1); width: 1px; height: calc(var(--y2) - var(--y1)); }
.ts-iz i {
    position: absolute; display: block; inset: 0;
    background-image: linear-gradient(90deg, transparent 0%, rgba(var(--ts-rgb), .95) 50%, transparent 100%);
    background-size: 140px 100%;
    background-repeat: no-repeat;
    background-position: -140px 0;
    filter: drop-shadow(0 0 6px rgba(var(--ts-rgb), .75));
    animation: tsDarbeYatay var(--s) linear infinite;
    animation-delay: var(--d);
}
.ts-iz.dikey i {
    background-image: linear-gradient(180deg, transparent 0%, rgba(var(--ts-rgb), .95) 50%, transparent 100%);
    background-size: 100% 140px;
    background-position: 0 -140px;
    animation-name: tsDarbeDikey;
}
@keyframes tsDarbeYatay { from { background-position: -140px 0; } to { background-position: calc(100% + 140px) 0; } }
@keyframes tsDarbeDikey { from { background-position: 0 -140px; } to { background-position: 0 calc(100% + 140px); } }
.ts-dugum {
    position: absolute; display: block;
    left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 1px;
    background: rgba(var(--ts-rgb), .95);
    box-shadow: 0 0 10px rgba(var(--ts-rgb), .7);
    animation: tsKirp 2.4s ease-in-out infinite;
    animation-delay: var(--d);
}
@keyframes tsKirp { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- 5) PARCACIK: uc katman suzulen nokta alani (yildiz alani gibi, tek renk) ---------- */
.ts-nokta {
    left: 0; right: 0; top: -20%; height: 140%;
    background-image: radial-gradient(circle, rgba(var(--ts-rgb), .95) 0 1.2px, transparent 1.7px);
    background-size: 140px 140px;
    --t: 140px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 55% 45%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 90% 80% at 55% 45%, #000 30%, transparent 100%);
    animation: tsSuzul 26s linear infinite;
}
.ts-nokta.n2 {
    background-image: radial-gradient(circle, rgba(220, 227, 236, .9) 0 1px, transparent 1.5px);
    background-size: 220px 220px; background-position: 70px 40px; --t: 220px;
    opacity: .38; animation-duration: 40s;
}
.ts-nokta.n3 { background-size: 90px 90px; background-position: 30px 60px; --t: 90px; opacity: .28; animation-duration: 18s; }
@keyframes tsSuzul { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--t))); } }
.ts-huzmeler.az i { filter: blur(44px); }

/* ---------- 6) VERI: yukari akan kesikli sutunlar (iki katman, farkli hiz) ---------- */
.ts-akislar {
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 55% 40%, #000 25%, transparent 100%);
            mask-image: radial-gradient(ellipse 90% 85% at 55% 40%, #000 25%, transparent 100%);
}
.ts-akis {
    position: absolute; display: block; inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(var(--ts-rgb), .55) 0 1px, transparent 1px 72px);
    -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 90px, #000 90px 130px, transparent 130px 220px);
            mask-image: repeating-linear-gradient(180deg, transparent 0 90px, #000 90px 130px, transparent 130px 220px);
    --p: 220px;
    animation: tsAkisYukari 7s linear infinite;
}
.ts-akis.a2 {
    background-image: repeating-linear-gradient(90deg, rgba(220, 227, 236, .35) 0 1px, transparent 1px 72px);
    background-position: 36px 0;
    -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 200px, #000 200px 230px, transparent 230px 300px);
            mask-image: repeating-linear-gradient(180deg, transparent 0 200px, #000 200px 230px, transparent 230px 300px);
    --p: 300px;
    animation-duration: 11s;
}
@keyframes tsAkisYukari {
    from { -webkit-mask-position: 0 0; mask-position: 0 0; }
    to   { -webkit-mask-position: 0 calc(-1 * var(--p)); mask-position: 0 calc(-1 * var(--p)); }
}

/* ---------- 7) DALGA: merkezden genisleyen halkalar (sonar) ---------- */
.ts-halkalar { left: 64%; top: 48%; width: 0; height: 0; }
.ts-halkalar i {
    position: absolute; display: block;
    left: 0; top: 0; width: 70vmin; height: 70vmin;
    margin: -35vmin 0 0 -35vmin;
    border-radius: 50%;
    border: 1px solid rgba(var(--ts-rgb), .55);
    box-shadow: 0 0 24px rgba(var(--ts-rgb), .18) inset;
    opacity: 0;
    animation: tsHalkaGenis 8.8s cubic-bezier(.2, .6, .3, 1) infinite;
    animation-delay: var(--d);
}
@keyframes tsHalkaGenis {
    0%   { transform: scale(.18); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- 8) ALTIGEN: altigen doku + gezinen isik lekesi ---------- */
.ts-altigen {
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%237BD300' fill-opacity='.42'/%3E%3C/svg%3E");
    background-size: 56px 98px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 60% 40%, #000 20%, transparent 100%);
            mask-image: radial-gradient(ellipse 85% 80% at 60% 40%, #000 20%, transparent 100%);
}
.ts-spot {
    left: 30%; top: 10%; width: 60vmax; height: 60vmax;
    background: radial-gradient(circle, rgba(var(--ts-rgb), .30), transparent 60%);
    filter: blur(40px);
    mix-blend-mode: screen;
    animation: tsSpotGez 13s ease-in-out infinite alternate;
}
@keyframes tsSpotGez {
    from { transform: translate(-30%, -16%); }
    to   { transform: translate(34%, 26%); }
}

/* ---------- 9) UST MENU: sahne varken ve kaydirilmamisken koyu dil ---------- */
/* Jetonlar yeniden tanimlanir; NavMenu icindeki her kural var(--...) okudugu icin logo, baglanti,
   telefon, bayrak, tema dugmesi ve Giris dugmesi kendiliginden koyu zemine gore renklenir.
   Olculen kontrastlar: #EEF3F8 / #05070A = 17,4:1 · #B8C2CE / #05070A = 11,6:1 · #7BD300 / #05070A = 11,3:1 */
.page:has(.tek-sahne-kap) .saas-navbar:not(.kaydirilmis) {
    --navbar-bg: #05070A;
    --navbar-kenarlik: rgba(123, 211, 0, .18);
    --arkaplan-rengi: #05070A;
    --kutu-arkaplan-rengi: #0C1116;
    --kenarlik-rengi: #1E262F;
    --metin-ana-renk: #EEF3F8;
    --metin-ikincil-renk: #B8C2CE;
    --vurgu-rengi: #7BD300;
    --vurgu-hover: #96EE22;
    --vurgu-rgb: 123, 211, 0;
    --vurgu-ustu-metin: #05070A;
    --vurgu-ikincil: #DCE3EC;
    --vurgu-ucuncul: #9AA5B3;
    --vurgu-zemin: #7BD300;
    --vurgu-zemin-ustu: #05070A;
    --gradient-vurgu: linear-gradient(135deg, #7BD300 0%, #6FC000 100%);
    --golge-orta: 0 10px 28px rgba(0, 0, 0, .55);
    color-scheme: dark;
}
.page:has(.tek-sahne-kap) .saas-navbar:not(.kaydirilmis) .dd-item:hover,
.page:has(.tek-sahne-kap) .saas-navbar:not(.kaydirilmis) .btn-giris:hover { background-color: rgba(255, 255, 255, .06); }

/* ---------- 10) HAREKETI AZALT / TELEFON ---------- */
@media (prefers-reduced-motion: reduce) {
    .tek-sahne * { animation: none !important; }
    .ts-halkalar i { opacity: .35; transform: scale(1); }
    .ts-halkalar i:nth-child(2) { transform: scale(1.4); opacity: .22; }
    .ts-halkalar i:nth-child(n+3) { display: none; }
}
@media (max-width: 768px) {
    .ts-huzmeler i { filter: blur(24px); width: 22vmax; margin-left: -11vmax; }
    .ts-huzmeler i:nth-child(n+4) { display: none; }
    .ts-izgara { height: 44%; background-size: 64px 64px; }
    .ts-isik { width: 520px; height: 360px; left: 60%; }
    .ts-nokta.n3, .ts-iz.dikey:nth-child(7), .ts-dugum:nth-child(n+12) { display: none; }
    .ts-halkalar i { width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; }
    .ts-spot { width: 90vmax; height: 90vmax; }
}