/* TOKU V3 — Hero hareket katmanı (opsiyonel, geri alınabilir).
   home-final.css'ten SONRA yüklenir; orijinal dosyalara dokunmaz.
   Geri almak için _LayoutV3.cshtml'deki link satırını + _SceneHero'daki
   iki div'i kaldırmak yeterli (yedek: gelistirme/yedek/).

   KURAL: Karadelik fotoğrafı TAMAMEN SABİT kalır.
   Hareket, fotoğrafın üstündeki iki gerçek div'de yaşar:
     • .toku-hero-stars     → parlak yıldızlar: parıldar + yavaş süzülür
     • .toku-hero-earthglow → dünya gündoğumu ışığı ufuk boyunca ilerler
   Katmanlar z-index:1 (görsel -3, dust -2 ÜSTünde), metin z-index:3'te.
   prefers-reduced-motion olanlar için animasyonlar kapanır. */

/* Karadelik fotoğrafı sabittir. Farklı ekran oranlarında kenar açığa çıkmasın
   diye görsel %110 boyutta ve -%5 konumda tutulur. Yıldızlar ile dünya ışığı
   bağımsız katmanlarda hareket etmeye devam eder. */
.toku-scene--hero .toku-hero-media img {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;
}

/* Tablet portre kadrajında orta hizalı cover sağdaki kara deliği kesiyordu.
   Taşma payını kaldırıp görselin sağ bölgesini kadrajda tut. */
@media (min-width: 701px) and (max-width: 1100px) {
    .toku-scene--hero .toku-hero-media img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: 82% center;
    }
}

/* Metin katmanını en üste sabitle */
.toku-scene--hero .toku-hero-layout {
    position: relative;
    z-index: 3;
}

/* Parçacık canvas katmanı: fotonun üstünde, metnin altında.
   NOT: canvas replaced element'tir; inset:0 onu GERMEZ (intrinsic 300x150'ye
   düşer). width/height:100% ZORUNLU. */
.toku-scene--hero .toku-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ---- YILDIZLAR: küçük div + çok sayıda box-shadow yıldız ---- */
.toku-scene--hero .toku-hero-stars {
    position: absolute;
    top: 8%;
    left: 55%;               /* karadelik/gökyüzü bölgesi (sağ üst) */
    width: 2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background: transparent;
    /* Her biri ayrı bir yıldız — parlak, glow'lu */
    box-shadow:
        60px 30px 1px 0 rgba(255,255,255,.95),
        180px 80px 1px 0 rgba(191,227,255,.9),
        260px 20px 0 0 rgba(255,255,255,.85),
        340px 120px 1px 0 rgba(255,255,255,.8),
        120px 160px 0 0 rgba(214,230,255,.85),
        420px 60px 1px 0 rgba(255,255,255,.95),
        480px 180px 0 0 rgba(191,227,255,.8),
        220px 220px 1px 0 rgba(255,255,255,.85),
        520px 40px 0 0 rgba(255,255,255,.9),
        360px 260px 1px 0 rgba(214,230,255,.8),
        40px 100px 0 0 rgba(255,255,255,.8),
        600px 140px 1px 0 rgba(255,255,255,.9),
        300px 300px 0 0 rgba(191,227,255,.75),
        160px 40px 1px 0 rgba(255,255,255,.85),
        560px 240px 0 0 rgba(255,255,255,.8),
        90px 260px 1px 0 rgba(214,230,255,.8),
        640px 90px 0 0 rgba(255,255,255,.9),
        440px 300px 1px 0 rgba(255,255,255,.75),
        250px 130px 0 0 rgba(191,227,255,.85),
        380px 200px 1px 0 rgba(255,255,255,.8);
    animation: tokuStarTwinkle 3.5s ease-in-out infinite alternate,
               tokuStarDrift 60s linear infinite;
    will-change: opacity, transform;
}

@keyframes tokuStarTwinkle {
    0%   { opacity: .35; }
    50%  { opacity: 1; }
    100% { opacity: .6; }
}

@keyframes tokuStarDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-40px, 24px, 0); }
}

/* İkinci yıldız kümesi (farklı hız) — daha canlı gökyüzü */
.toku-scene--hero .toku-hero-stars::after {
    content: "";
    position: absolute;
    top: 40px;
    left: -120px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    box-shadow:
        20px 10px 0 0 rgba(255,255,255,.9),
        140px 60px 1px 0 rgba(191,227,255,.85),
        240px 120px 0 0 rgba(255,255,255,.8),
        320px 30px 1px 0 rgba(255,255,255,.9),
        60px 180px 0 0 rgba(214,230,255,.8),
        400px 90px 1px 0 rgba(255,255,255,.85),
        460px 200px 0 0 rgba(191,227,255,.8),
        180px 240px 1px 0 rgba(255,255,255,.85);
    animation: tokuStarTwinkle 5s ease-in-out infinite alternate-reverse;
}

/* ---- DÜNYA GÜNDOĞUMU ---- */
.toku-scene--hero .toku-hero-earthglow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(15% 8% at 68% 89%, rgba(255,240,214,.5), rgba(124,203,255,.14) 55%, transparent 75%);
    mix-blend-mode: screen;
    animation: tokuEarthSunrise 24s ease-in-out infinite;
    will-change: transform, opacity;
}

@media (max-width: 700px) {
    .toku-scene--hero .toku-hero-stars {
        top: 4%;
        left: 18%;
    }

    .toku-scene--hero .toku-hero-earthglow {
        background: radial-gradient(20% 9% at 68% 89%, rgba(255,240,214,.68), rgba(124,203,255,.22) 55%, transparent 78%);
    }
}

/* Işık dünya yüzeyi boyunca ilerler + nabız = dünya dönüyormuş hissi */
@keyframes tokuEarthSunrise {
    0%   { transform: translateX(-6%); opacity: .45; }
    50%  { transform: translateX(6%);  opacity: 1; }
    100% { transform: translateX(-6%); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .toku-scene--hero .toku-hero-media img,
    .toku-scene--hero .toku-hero-stars,
    .toku-scene--hero .toku-hero-stars::after,
    .toku-scene--hero .toku-hero-earthglow {
        animation: none !important;
    }
}