/* ==========================================================================
   CYBERZ — Hero
   HTML : index.html → "HERO" bölümü
   CSS  : css/home/01-hero.css
   JS   : js/home/01-hero.js (kıvılcım tuvali; hareket azaltmada çalışmaz)

   Katmanlar (alttan üste):
     .hero__art    anahtar görsel (sabit; ölçek animasyonu yok — netlik için)
     .hero__flash  iki şimşek katmanı (screen blend, sadece opacity animasyonu)
     .hero__embers yükselen kıvılcım tuvali (JS)
     .hero__veil   alt karartma + kenar vinyeti (metin kontrastı)
     .hero__inner  içerik: bayraklar → logo → slogan → CTA → bölüm indeksi
   ========================================================================== */

.hero{
    position:relative;
    min-height:max(680px,100svh);
    display:flex; align-items:flex-end;
    padding-top:calc(var(--nav-h) + 24px);
    padding-bottom:0;
    overflow:hidden;
    isolation:isolate;
    background:var(--bg-0);
}

/* — anahtar görsel — */
.hero__art{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
/* Operator solda, kule + şimşek sağda. Kaynak 641px+ için hero-mid.png (1774x887,
   kayıpsız); üst kısmı fırtına bulutu olduğundan tepesi arka plana eriyerek nav'ın
   altında kaybolur. Görsel SABİT durur: transform/will-change yok, çünkü GPU
   katmanında ölçeklenen görsel yumuşuyordu (netlik şikâyeti, 16 Eylül 2026). */
.hero__art img{
    width:100%; height:100%;
    object-fit:cover; object-position:30% 100%;      /* tablet: operatör görünür kalsın */
}
/* Geniş masaüstünde 2:1 görsel yükseklikten ölçeklenir, yatayda ~240-360px kırpılır:
   sağa hizala ki operatör sola kaysın, "Demo out now" etiketi zincirin üstüne binmesin;
   kule ve şimşek sağda görünür kalır. */
@media (min-width:1101px){ .hero__art img{ object-position:100% 100%; } }
/* Üst kenar arka plana erir (mask yerine ucuz gradient katmanı). */
.hero__art::after{
    content:''; position:absolute; left:0; right:0; top:0; height:24%;
    background:linear-gradient(to bottom,var(--bg-0) 0,rgba(4,6,10,.7) 40%,transparent 100%);
    pointer-events:none;
}

/* — şimşek katmanları — */
.hero__flash{
    position:absolute; inset:0; z-index:-1;
    pointer-events:none; opacity:0;
    will-change:opacity;                   /* karışım modu yok: normal alfa, ucuz kompozit */
}
.hero__flash--a{
    background:
        radial-gradient(38% 60% at 60% 28%,rgba(215,240,255,.55),rgba(120,190,255,.16) 45%,transparent 72%),
        rgba(190,225,255,.05);
}
.hero__flash--b{
    background:
        radial-gradient(30% 50% at 56% 18%,rgba(215,240,255,.45),rgba(120,190,255,.14) 45%,transparent 70%),
        rgba(190,225,255,.04);
}
@media (prefers-reduced-motion:no-preference){
    .hero__flash--a{ animation:hero-flash 11s linear 3s infinite; }
    .hero__flash--b{ animation:hero-flash 17s linear 9s infinite; }
    html.etp-wait .hero__flash{ animation-play-state:paused; }
}
@keyframes hero-flash{
    0%,100%{ opacity:0; }
    1.2%   { opacity:1; }
    2.2%   { opacity:.12; }
    3.2%   { opacity:.8; }
    4.6%   { opacity:0; }
}

/* — kıvılcım tuvali — */
.hero__embers{
    position:absolute; inset:0; z-index:-1;
    width:100%; height:100%;
    pointer-events:none; opacity:.9;
}

/* — perde — */
.hero__veil{
    position:absolute; inset:0; z-index:-1;
    background:
        linear-gradient(to top,var(--bg-0) 0%,rgba(4,6,10,.92) 22%,rgba(4,6,10,.55) 46%,rgba(4,6,10,.12) 66%,transparent 100%),
        linear-gradient(90deg,rgba(4,6,10,.4) 0%,transparent 18%,transparent 82%,rgba(4,6,10,.4) 100%);
}

/* — içerik — */
.hero__inner{ width:100%; }
.hero__content{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    max-width:min(860px,100%); margin:0 auto;
    padding-bottom:clamp(28px,4vw,48px);
}

.hero__flags{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px;
    margin-bottom:clamp(18px,2.4vw,30px);
}
.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.hero__flags .mono{ color:var(--fg-3); }
.hero__meta .mono + .mono::before{
    content:'·'; margin-right:16px; color:var(--line-2);
}
@media (prefers-reduced-motion:no-preference){
    .hero__flags .tag--live{ animation:hero-live 2.6s ease-in-out infinite; }
}
@keyframes hero-live{
    0%,100%{ box-shadow:0 0 0 0 rgba(0,212,200,.35); }
    55%    { box-shadow:0 0 0 7px rgba(0,212,200,0); }
}

/* Başlık gerçek logo: giriş animasyonundaki logo tam buraya uçup oturur. */
.hero__title{
    position:relative; margin-bottom:clamp(18px,2.4vw,30px); line-height:0;
    width:min(100%,720px);
}
.hero__title::before{                        /* logonun arkasındaki ısı parıltısı */
    content:''; position:absolute; inset:-18% -8%; z-index:-1; pointer-events:none;
    background:
        radial-gradient(52% 60% at 50% 55%,rgba(233,166,60,.22),transparent 70%),
        radial-gradient(70% 80% at 50% 50%,rgba(0,212,200,.14),transparent 72%);
}
@media (prefers-reduced-motion:no-preference){
    .hero__title::before{ animation:hero-glow 5.5s ease-in-out infinite alternate; }
}
@keyframes hero-glow{ from{ opacity:.7; } to{ opacity:1; } }
.hero__title img{
    width:100%; height:auto; display:block;
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.65));
}

.hero__tagline{
    font-family:var(--font-display);
    font-size:clamp(1.35rem,3vw,2.5rem);
    font-weight:700; line-height:1.2;
    letter-spacing:.01em;
    color:var(--fg);
    margin-bottom:clamp(12px,1.6vw,18px);
    text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.hero__tagline .hot{ text-shadow:0 0 22px rgba(0,212,200,.55), 0 2px 18px rgba(0,0,0,.6); }
.hero__lede{
    font-size:clamp(1rem,1.3vw,1.125rem);
    line-height:1.65; color:var(--fg-2);
    max-width:56ch; margin-bottom:clamp(24px,3vw,36px);
}
.hero__cta{ justify-content:center; gap:16px 18px; }

/* — bölüm indeksi — */
.hero__index{
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) auto;
    align-items:stretch;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(4,6,10,.74),rgba(4,6,10,.92));
}
.hix{
    position:relative;
    display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    column-gap:11px; align-items:center;
    padding:12px 14px 14px;
    border-right:1px solid var(--line);
    color:var(--fg-2);
    transition:color var(--t) var(--ease), background var(--t) var(--ease);
}
.hix::after{                                  /* alt kenarda enerji hattı */
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--energy);
    transform:scaleX(0); transform-origin:left center;
    transition:transform 380ms var(--ease);
}
.hix img{
    grid-row:1 / span 2;
    width:52px; height:36px; object-fit:cover;
    border:1px solid var(--line-2);
    filter:saturate(.75) brightness(.85);
    transition:filter var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hix__n{ font-size:.625rem; letter-spacing:.24em; color:var(--fg-3); }
.hix__t{
    font-family:var(--font-display); font-size:.75rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; line-height:1.2;
    /* Boşluktan sarılır, kelime bölünmez; sığmayan genişlikte aşağıdaki
       kırılım noktaları hücreleri 3 sütuna alır. */
}
.hix:hover, .hix:focus-visible{ color:var(--fg); background:rgba(0,212,200,.05); }
.hix:hover::after, .hix:focus-visible::after{ transform:scaleX(1); }
.hix:hover img, .hix:focus-visible img{ filter:none; border-color:var(--energy); }

.hero__scroll{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:0 22px;
    font-family:var(--font-mono); font-size:.625rem;
    letter-spacing:.28em; text-transform:uppercase;
    color:var(--fg-3);
}
.hero__scroll i{
    position:relative; display:block; width:1px; height:26px;
    background:var(--line-2); overflow:hidden;
}
.hero__scroll i::after{
    content:''; position:absolute; left:0; top:0; width:100%; height:40%;
    background:var(--energy);
}
@media (prefers-reduced-motion:no-preference){
    .hero__scroll i::after{ animation:hero-scroll 1.8s ease-in-out infinite; }
}
@keyframes hero-scroll{ from{ transform:translateY(-100%); } to{ transform:translateY(260%); } }

/* — geniş dizüstü: 6 sütun kalır, kaydırma hücresi ve küçük görseller — */
@media (max-width:1499px){
    .hero__index{ grid-template-columns:repeat(6,minmax(0,1fr)); }
    .hero__scroll{ display:none; }
    .hix img{ width:48px; height:34px; }
    .hix__t{ font-size:.6875rem; }
}
/* — orta ekran: 3 sütun × 2 satır — */
@media (max-width:1280px){
    .hero__index{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .hix:nth-child(3n){ border-right:0; }
    .hix:nth-child(n+4){ border-top:1px solid var(--line); }
    .hix img{ width:52px; height:36px; }
    .hix__t{ font-size:.75rem; }
}

/* — mobil — */
@media (max-width:760px){
    .hero{ min-height:max(620px,100svh); }
    .hero__art img{ object-position:50% 100%; }
    .hero__veil{
        background:
            linear-gradient(to top,var(--bg-0) 0%,rgba(4,6,10,.9) 28%,rgba(4,6,10,.5) 52%,rgba(4,6,10,.1) 74%,transparent 100%);
    }
    .hero__flags{ gap:12px; }
    .hero__meta{ flex-basis:100%; justify-content:center; }   /* etiket üstte, bilgiler tek satırda altta */
    .hero__title{ width:min(100%,420px); }
    .hero__cta{ width:100%; }
    .hero__cta .btn{ flex:1 1 100%; }
    .hero__cta .linkplay{ margin:0 auto; }

    /* indeks: yatay kaydırılan şerit */
    .hero__index{
        display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
        scrollbar-width:none;
        margin:0 calc(var(--gutter) * -1);
    }
    .hero__index::-webkit-scrollbar{ display:none; }
    .hix{
        flex:0 0 62%; scroll-snap-align:start;
        border-top:0 !important; border-right:1px solid var(--line) !important;
    }
    .hix:first-child{ margin-left:var(--gutter); }
}