/* ============================================================
   Hero — "Yörünge"  (yalnızca anasayfa; page-home.cshtml yükler)
   corporate.css'ten SONRA yüklenir → override'lar burada kazanır.
   Tüm hareket transform/opacity üzerinden (GPU).
   ============================================================ */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* mix-blend-mode katmanlarını hero'ya hapseder; sayfanın geri kalanına taşmaz */
    isolation: isolate;
    /* Katlamayı tam doldur, taşma. `.top-space-margin` (96px) sabit header'ı temizliyor,
       o yüzden viewport'tan düşülür. Kısa ekranlarda padding de kısılır ki kanıt şeridi
       ortadan kesilmesin — min-height bir taban, içerik büyürse hero de büyür. */
    min-height: calc(100vh - 96px);
    min-height: calc(100svh - 96px);
    padding: clamp(56px, 8vh, 112px) 0 clamp(64px, 9vh, 124px);
    background-color: #070b1e; /* görsel yüklenene kadarki zemin */
}

/* ---------- Katman 0: fotoğraf (parallax'ta transform edilir) ---------- */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/themes/ufukaytas/images/hero-nasa-earth.webp');
    background-size: cover;
    background-position: center center;
    /* JS parallax scale'i buradan devralır; JS yoksa da hafif zoom'lu durur */
    transform: scale(1.06);
    will-change: transform;
}

/* ---------- Katman 1: yönlü scrim ----------
   Düz tepeden-aşağı karartma yerine 105° açılı: metnin oturduğu sol taraf korunur,
   sağ taraf açık kalır. Kasıtlı bir ışık yönü yaratır (karanlık sol → aydınlık sağ). */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg,
            rgba(7, 11, 30, .94) 0%,
            rgba(7, 11, 30, .86) 26%,
            rgba(7, 11, 30, .55) 50%,
            rgba(7, 11, 30, .18) 76%,
            rgba(7, 11, 30, .06) 100%),
        linear-gradient(to top,
            rgba(7, 11, 30, .88) 0%,
            rgba(7, 11, 30, 0) 38%);
}

/* ---------- Katman 2: yıldız alanı ---------- */
.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 78%;
    z-index: 2;
    /* Yıldızlar Dünya'nın ÜSTÜNDE görünmemeli — yoksa illüzyon kırılır.
       Gezegenin oturduğu sağ-alt bölgeye doğru maskeyle söndürülür. */
    -webkit-mask-image: radial-gradient(125% 95% at 68% 100%, transparent 38%, #000 72%);
    mask-image: radial-gradient(125% 95% at 68% 100%, transparent 38%, #000 72%);
    will-change: transform;
}

/* Sürüklenme tam bir tile kadar (kusursuz döngü), o yüzden katman yalnızca BİR tile kadar
   şişirilir — kenar açılmasın diye. Eskiden hepsi -520px'di; boyanan alan gereksiz büyüktü. */
.hero-star-layer {
    position: absolute;
    display: block;
    background-repeat: repeat;
    will-change: transform;
}

.hero-star-layer--sm {
    background-image:
        radial-gradient(1px 1px at 18% 24%, rgba(255, 255, 255, .95), transparent 100%),
        radial-gradient(1px 1px at 62% 11%, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(1px 1px at 41% 67%, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(1px 1px at 88% 49%, rgba(255, 255, 255, .60), transparent 100%),
        radial-gradient(1px 1px at 74% 83%, rgba(255, 255, 255, .80), transparent 100%),
        radial-gradient(1px 1px at 9% 91%, rgba(255, 255, 255, .55), transparent 100%);
    background-size: 160px 160px;
    inset: -160px;
    opacity: .75;
    animation: heroDriftSm 150s linear infinite, heroTwinkle 5.5s ease-in-out infinite;
}

.hero-star-layer--md {
    background-image:
        radial-gradient(1.4px 1.4px at 33% 18%, rgba(214, 231, 255, .95), transparent 100%),
        radial-gradient(1.4px 1.4px at 79% 58%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(1.2px 1.2px at 12% 72%, rgba(255, 236, 214, .85), transparent 100%),
        radial-gradient(1.4px 1.4px at 57% 92%, rgba(255, 255, 255, .65), transparent 100%);
    background-size: 240px 240px;
    inset: -240px;
    opacity: .6;
    animation: heroDriftMd 210s linear infinite, heroTwinkle 8s ease-in-out infinite;
    animation-delay: 0s, -3s;
}

.hero-star-layer--lg {
    background-image:
        radial-gradient(2px 2px at 26% 41%, rgba(255, 255, 255, 1), transparent 100%),
        radial-gradient(1.8px 1.8px at 84% 22%, rgba(196, 216, 255, .9), transparent 100%),
        radial-gradient(2px 2px at 61% 78%, rgba(255, 244, 230, .8), transparent 100%);
    background-size: 320px 320px;
    inset: -320px;
    opacity: .5;
    animation: heroDriftLg 300s linear infinite, heroTwinkle 11s ease-in-out infinite;
    animation-delay: 0s, -6s;
}

/* Kaydırma miktarı = tile boyutu → kusursuz döngü */
@keyframes heroDriftSm { to { transform: translate3d(-160px, -160px, 0); } }
@keyframes heroDriftMd { to { transform: translate3d(-240px, -240px, 0); } }
@keyframes heroDriftLg { to { transform: translate3d(-320px, -320px, 0); } }

@keyframes heroTwinkle {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* ---------- Katman 3: atmosfer parıltısı ("canlı" hissinin ana kaynağı) ----------
   PERFORMANS: burada ne `filter: blur()` ne de `mix-blend-mode` var — ikisi birlikte
   renderer'ı donduruyordu. Blend edilen bir elemanı animasyonlamak, tarayıcıyı her karede
   altındaki tüm yığını yeniden kompozit etmeye zorlar; üstüne büyük blur binince kompozitör kilitlenir.
   Gerek de yok: radial-gradient'in yumuşak durakları zaten blur'un ta kendisi ve koyu zemin
   üzerinde `screen` blend ≈ yarı saydam açık renk. Aynı görüntü, bedava. */
.hero-limb {
    position: absolute;
    top: -8%;
    left: -12%;
    right: -12%;
    height: 58%;
    z-index: 3;
    pointer-events: none;
}

.hero-limb-core {
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 58% 100% at 50% 100%,
        rgba(168, 222, 255, .40) 0%,
        rgba(130, 180, 255, .22) 26%,
        rgba(96, 150, 250, .10) 48%,
        rgba(60, 92, 200, 0) 72%);
    /* Taban opaklık şart: animasyon kapalıyken (reduced-motion) 1'e fırlar ve parıltı patlardı */
    opacity: .55;
    /* Sadece opacity animasyonu → kompozitörde kalır, hiç repaint yok */
    animation: heroLimbBreathe 9s ease-in-out infinite;
}

@keyframes heroLimbBreathe {
    0%, 100% { opacity: .48; }
    50%      { opacity: .78; }
}

/* ---------- Katman 4: marka aurorası ----------
   Marka rengini butondan çıkarıp atmosfere taşır.
   conic-gradient + blur(90px) + rotate yerine: üst üste binmiş yumuşak radial'lar.
   Konik gradyanın sert renk geçişleri blur gerektiriyordu; radial'lar zaten yumuşak. */
.hero-aurora {
    position: absolute;
    right: -20%;
    bottom: -38%;
    width: 78%;
    aspect-ratio: 1 / 1;
    z-index: 3;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%, rgba(247, 105, 60, .30) 0%, rgba(247, 105, 60, 0) 55%),
        radial-gradient(circle at 66% 52%, rgba(160, 80, 180, .26) 0%, rgba(160, 80, 180, 0) 58%),
        radial-gradient(circle at 48% 72%, rgba(90, 70, 220, .28) 0%, rgba(90, 70, 220, 0) 60%);
    opacity: .5;
    pointer-events: none;
    /* Ucuz: sadece transform + opacity, filtre/blend yok */
    animation: heroAurora 44s ease-in-out infinite;
}

@keyframes heroAurora {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: .42; }
    50%      { transform: translate3d(-3%, -2%, 0) scale(1.12); opacity: .62; }
}

/* ---------- İçerik ---------- */
.hero-container {
    position: relative;
    z-index: 4;
}

.hero-content {
    will-change: transform, opacity;
}

/* Rozet — cam çip */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 100px;
    /* backdrop-filter YOK — bilerek. Bu rozet, JS'in her karede transform ettiği .hero-content
       içinde; backdrop-filter arkasındaki tüm yığını (fotoğraf + yıldızlar + parıltılar) her
       karede yeniden hesaplatıp kare hızını yere çakıyordu. Koyu zemin üzerinde yarı saydam
       bir dolgu zaten aynı cam etkisini veriyor. */
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
    font-family: var(--alt-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) .10s both;
}

.hero-eyebrow i {
    font-size: 14px;
    background-image: linear-gradient(120deg, #f7693c, #c98bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Başlık */
.hero-title {
    margin: 0 0 26px;
    font-family: var(--alt-font);
    font-size: clamp(2.45rem, 4.6vw, 4.55rem);
    font-weight: 700;
    /* -2px değil: mobilde 39px puntoda -2px, Türkçe diakritikleri (ç ö ü ş ğ) eziyordu */
    letter-spacing: -.025em;
    line-height: 1.08;
    color: var(--white);
    text-wrap: balance;
}

/* Maske ile satır açılımı.
   DİKKAT: overflow:hidden, "Çözümleri"deki Ç'nin sedilyasını taban çizgisinin altında keser.
   padding-bottom ona yer açar; eşit negatif margin satır aralığını bozmadan geri alır. */
.hero-line {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.hero-line-in {
    display: block;
    transform: translateY(110%);
    animation: heroLineUp 1s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-line:nth-of-type(1) .hero-line-in { animation-delay: .22s; }
.hero-line:nth-of-type(2) .hero-line-in { animation-delay: .34s; }

/* Marka gradyanı.
   Mevcut rampanın koyu ucu (#3928af) lacivert üzerinde okunmuyordu; koyu uç periwinkle'a
   kaldırıldı. Marka DNA'sı (flamingo → amethyst) korunur, kontrast kurtarılır. */
.hero-title-accent {
    background-image: linear-gradient(102deg,
        #ffffff 0%,
        #ffffff 20%,
        #ffd7c0 42%,
        #f98a5c 66%,
        #b79cf5 92%,
        #a98bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* background-clip:text, text-shadow'u öldürür → gölge filter ile verilir */
    filter: drop-shadow(0 2px 20px rgba(6, 10, 32, .55));
}

@keyframes heroLineUp {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

/* Paragraf */
.hero-lead {
    max-width: 52ch;
    margin: 0 0 32px;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75;
    /* opacity yerine renk-alfa: kardeş etkileşimli öğeleri soldurmaz */
    color: rgba(255, 255, 255, .82);
    animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) .58s both;
}

/* CTA'lar */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) .72s both;
}

/* Mıknatıs sarmalayıcı: butonun kendi hover transform'uyla çakışmasın diye ayrı katman */
.hero-magnetic {
    display: inline-block;
    will-change: transform;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.hero-cta {
    /* .btn-gradient-* zaten background-size:200% taşıyor → sürekli shimmer'a çevrilir.
       Başlangıç dikeyde `center` sabitlenir; yoksa 0% 0% → 200% center arası dikey kayma olur. */
    background-position: 0% center;
    animation: heroShimmer 7s linear infinite;
    box-shadow: 0 10px 30px -12px rgba(247, 105, 60, .45);
    /* style.css'teki `transition: all 300ms` yerine adanmış, daha uzun easing */
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 46px -12px rgba(247, 105, 60, .62);
}

.hero-cta i { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.hero-cta:hover i { transform: translateX(3px); }

@keyframes heroShimmer { to { background-position: 200% center; } }

.hero-cta-ghost {
    border: 1px solid rgba(255, 255, 255, .28);
    /* backdrop-filter YOK — .hero-eyebrow'daki gerekçenin aynısı (her karede backdrop okuması). */
    background: rgba(255, 255, 255, .07);
    color: var(--white);
    transition: background-color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.hero-cta-ghost:hover,
.hero-cta-ghost:focus-visible {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .62);
    color: var(--white);
    transform: translateY(-2px);
}

/* Tema `.btn:focus { box-shadow:none }` yaptığı için odak halkası açıkça tanımlanmalı */
.hero-cta:focus-visible,
.hero-cta-ghost:focus-visible,
.hero-cue:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Kanıt şeridi */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 44px;
    margin: 34px 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .13);
    animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) .86s both;
}

.hero-stat { margin: 0; }

.hero-stat-value {
    display: block;
    font-family: var(--alt-font);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--white);
    white-space: nowrap;
}

.hero-stat--num .hero-stat-value {
    font-size: 2.05rem;
    letter-spacing: -.02em;
    line-height: 1.1;
    background-image: linear-gradient(110deg, #ffffff 0%, #ffb489 45%, #f7693c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .52);
}

/* Scroll ipucu — SAĞ altta. Solda kanıt şeridinin "15+" değeriyle çakışıyordu;
   ayrıca içerik solda olduğu için sağdaki işaret kompozisyonu dengeliyor. */
.hero-cue-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 4;
    animation: heroRise 1s cubic-bezier(.16, 1, .3, 1) 1.35s both;
}

.hero-cue-wrap .container {
    display: flex;
    justify-content: flex-end;
}

.hero-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Sağ altta şehir ışıklarının üzerine geliyor — okunurluk için yumuşak gölge */
    text-shadow: 0 1px 12px rgba(6, 10, 32, .85);
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .55);
    font-family: var(--alt-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s ease;
}

.hero-cue:hover { color: var(--white); }

.hero-cue-line {
    position: relative;
    display: block;
    width: 1px;
    height: 44px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
}

.hero-cue-dot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, #f7693c);
    animation: heroCue 1.9s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes heroCue {
    0%        { transform: translateY(-18px); opacity: 0; }
    30%       { opacity: 1; }
    100%      { transform: translateY(44px); opacity: 0; }
}

/* Ortak giriş hareketi */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    /* Mobilde katlamayı zorlamak yerine içeriğin nefes almasına izin ver */
    .hero {
        min-height: 620px;
        padding: clamp(64px, 9vh, 96px) 0 clamp(72px, 10vh, 108px);
    }

    /* Sol taraf tek başına metni taşımadığı için scrim daha dikey bir karartmaya döner */
    .hero-scrim {
        background:
            linear-gradient(120deg, rgba(7, 11, 30, .92) 0%, rgba(7, 11, 30, .72) 55%, rgba(7, 11, 30, .48) 100%),
            linear-gradient(to top, rgba(7, 11, 30, .90) 0%, rgba(7, 11, 30, .10) 55%);
    }

    .hero-lead { margin-bottom: 32px; }
    .hero-stats { gap: 16px 32px; margin-top: 38px; }
    .hero-cue-wrap { display: none; }
}

@media (max-width: 575px) {
    .hero { min-height: 560px; padding: 60px 0 76px; }
    .hero-lead { font-size: 1.0625rem; }
    .hero-actions { gap: 12px; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .hero-magnetic { display: block; width: 100%; }
    .hero-stats { gap: 18px 28px; }
    .hero-stat--num .hero-stat-value { font-size: 1.8rem; }
    /* Ağır blur katmanları düşük uçlu telefonlarda pahalı; aurora kapatılır */
    .hero-aurora { display: none; }
}

/* ============================================================
   prefers-reduced-motion — önceki hero'da tamamen eksikti
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero *,
    .hero *::before,
    .hero *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Giriş animasyonlarının başlangıç durumları son hallerine sabitlenir */
    .hero-line-in,
    .hero-eyebrow,
    .hero-lead,
    .hero-actions,
    .hero-stats,
    .hero-cue-wrap {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-cue-dot { display: none; }
}