/* ======================================================================
   HERO — Unlimited Patch · "TACTICAL HUD"
   Koyu zemin + neon lime. Renk/font tokens.css'ten gelir.
   Katmanlar: atmosfer (grid/glow/scan) · metin · HUD specimen + orbit · marquee
   ====================================================================== */

.ud-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #070807;
    border-bottom: 1px solid var(--border);
    --acc: var(--primary, #A4E22B);
}

/* ─────────────────────────  ATMOSFER  ───────────────────────── */
.ud-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Topografik / taktik grid — perspektifli, hafif kayan */
.ud-hero-grid {
    position: absolute;
    inset: -40% -10% -10%;
    background-image:
        linear-gradient(to right, rgba(164, 226, 43, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(164, 226, 43, 0.10) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(700px) rotateX(58deg) translateY(0);
    transform-origin: center top;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 0%, transparent 75%);
    animation: udGridPan 18s linear infinite;
    will-change: background-position;
}
@keyframes udGridPan { from { background-position: 0 0; } to { background-position: 0 46px; } }

/* Radar glow blob'ları */
.ud-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.ud-hero-glow-a {
    width: 540px; height: 540px;
    top: -120px; right: -80px;
    background: radial-gradient(circle, rgba(164, 226, 43, 0.40), transparent 65%);
    animation: udGlowDrift 13s ease-in-out infinite;
}
.ud-hero-glow-b {
    width: 420px; height: 420px;
    bottom: -160px; left: -60px;
    background: radial-gradient(circle, rgba(120, 200, 30, 0.26), transparent 65%);
    animation: udGlowDrift 17s ease-in-out infinite reverse;
}
@keyframes udGlowDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-22px, 18px) scale(1.08); }
}

/* İnce scanline */
.ud-hero-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.022) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
    opacity: 0.6;
    animation: udScan 8s linear infinite;
}
@keyframes udScan { from { background-position: 0 0; } to { background-position: 0 80px; } }

.ud-hero-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 90% 80% at 60% 40%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ─────────────────────────  LAYOUT  ───────────────────────── */
.ud-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: clamp(14px, 2.2vw, 30px) 24px clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    min-height: clamp(460px, 70vh, 640px);
}

/* ─────────────────────────  SOL: METİN  ───────────────────────── */
.ud-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acc);
    padding: 7px 14px 7px 12px;
    border: 1px solid rgba(164, 226, 43, 0.30);
    border-radius: 999px;
    background: rgba(164, 226, 43, 0.06);
    backdrop-filter: blur(4px);
    animation: udFadeUp 0.7s 0.05s both;
}
.ud-hero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 0 rgba(164, 226, 43, 0.7);
    animation: udDot 1.8s ease-in-out infinite;
}
@keyframes udDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(164, 226, 43, 0.6); opacity: 1; }
    50%      { box-shadow: 0 0 0 6px rgba(164, 226, 43, 0); opacity: 0.6; }
}

.ud-hero-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 82px);
    line-height: 0.98;
    color: var(--text);
    margin: 18px 0 16px;
    letter-spacing: 0.5px;
}
.ud-hero-line {
    display: block;
    opacity: 0;
    transform: translateY(28px);
    animation: udLineIn 0.85s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(0.15s + var(--i, 0) * 0.13s);
}
.ud-hero-title .acc {
    color: var(--acc);
    text-shadow: 0 0 34px rgba(164, 226, 43, 0.55);
}
@keyframes udLineIn { to { opacity: 1; transform: translateY(0); } }

.ud-hero-lead {
    color: var(--text-muted);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.62;
    max-width: 500px;
    margin: 0 0 22px;
    animation: udFadeUp 0.7s 0.45s both;
}

.ud-hero-anchor {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    color: var(--text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--acc);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 26px;
    animation: udFadeUp 0.7s 0.55s both;
}
.ud-hero-anchor strong {
    color: var(--acc);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
}

.ud-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    animation: udFadeUp 0.7s 0.65s both;
}
.ud-btn {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    padding: 15px 28px;
    border-radius: var(--radius, 8px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.ud-btn svg { width: 18px; height: 18px; }
.ud-btn-acc { background: var(--acc); color: var(--primary-on, #16280A); }
.ud-btn-acc:hover { background: var(--primary-dk, #B6F23D); transform: translateY(-2px); }
.ud-btn-ghost { background: rgba(255,255,255,0.02); color: var(--text); border-color: var(--border-strong); }
.ud-btn-ghost:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }

/* "Tasarımını Yükle" — ışıltı + nabız */
.ud-btn-pulse { position: relative; overflow: hidden; animation: udBtnPulse 2.1s ease-in-out infinite; }
.ud-btn-pulse > * { position: relative; z-index: 2; }
.ud-btn-pulse::after {
    content: "";
    position: absolute; top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: udBtnShine 3.2s ease-in-out infinite;
    z-index: 1; pointer-events: none;
}
@keyframes udBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(164, 226, 43, 0.55), 0 0 18px rgba(164, 226, 43, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(164, 226, 43, 0), 0 0 30px rgba(164, 226, 43, 0.7); }
}
@keyframes udBtnShine { 0% { left: -130%; } 55%, 100% { left: 140%; } }

/* Spec chip'leri */
.ud-hero-specs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
    animation: udFadeUp 0.7s 0.78s both;
}
.ud-hero-spec {
    flex: 1 1 0;
    min-width: 96px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-top: 2px solid rgba(164, 226, 43, 0.5);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.015);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ud-hero-spec:hover {
    transform: translateY(-3px);
    border-top-color: var(--acc);
    background: rgba(164, 226, 43, 0.05);
}
.ud-hero-spec-n {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--acc);
}
.ud-hero-spec-l {
    display: block;
    margin-top: 5px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    color: var(--text-soft);
}

/* ─────────────────────────  SAĞ: HUD STAGE  ───────────────────────── */
.ud-hero-visual { display: flex; justify-content: center; align-items: center; }
.ud-hero-stage {
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    animation: udFadeUp 0.9s 0.3s both;
}

/* Halo */
.ud-hero-halo {
    position: absolute;
    width: 78%; height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(164, 226, 43, 0.30), transparent 62%);
    filter: blur(26px);
    animation: udHalo 6s ease-in-out infinite;
}
@keyframes udHalo { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.07); } }

/* Dönen hedefleme reticle'ları */
.ud-hero-reticle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ud-hero-reticle-1 {
    width: 96%; height: 96%;
    border: 1px dashed rgba(164, 226, 43, 0.35);
    animation: udSpin 28s linear infinite;
}
.ud-hero-reticle-1::before,
.ud-hero-reticle-1::after {
    content: "";
    position: absolute;
    background: rgba(164, 226, 43, 0.5);
}
.ud-hero-reticle-1::before { top: -2px; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); }
.ud-hero-reticle-1::after  { bottom: -2px; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); }
.ud-hero-reticle-2 {
    width: 70%; height: 70%;
    border: 1px solid rgba(164, 226, 43, 0.18);
    border-top-color: rgba(164, 226, 43, 0.55);
    border-right-color: rgba(164, 226, 43, 0.40);
    animation: udSpin 16s linear infinite reverse;
}
@keyframes udSpin { to { transform: rotate(360deg); } }

/* Scope köşe parantezleri */
.ud-hero-bracket {
    position: absolute;
    width: 30px; height: 30px;
    border: 2px solid rgba(164, 226, 43, 0.7);
    z-index: 5;
}
.bt-tl { top: 2%;  left: 2%;  border-right: 0; border-bottom: 0; }
.bt-tr { top: 2%;  right: 2%; border-left: 0;  border-bottom: 0; }
.bt-bl { bottom: 2%; left: 2%;  border-right: 0; border-top: 0; }
.bt-br { bottom: 2%; right: 2%; border-left: 0;  border-top: 0; }

/* Ana specimen */
.ud-hero-specimen-wrap {
    position: relative;
    z-index: 4;
    width: 70%;
    will-change: transform;
    animation: udFloat 5.5s ease-in-out infinite;
}
.ud-hero-specimen {
    width: 100%;
    display: block;
    filter: drop-shadow(0 20px 46px rgba(164, 226, 43, 0.30));
    transform-style: preserve-3d;
    transition: transform .12s ease-out;
}
/* Tıklanabilir merkez patch — transform çakışmasın diye glow ile sinyal */
.ud-hero-specimen-wrap.is-clickable { cursor: pointer; }
.ud-hero-specimen-wrap.is-clickable .ud-hero-specimen { transition: transform .12s ease-out, filter .3s ease; }
.ud-hero-specimen-wrap.is-clickable:hover .ud-hero-specimen {
    filter: drop-shadow(0 20px 46px rgba(164, 226, 43, 0.30)) drop-shadow(0 0 42px color-mix(in srgb, var(--acc) 60%, transparent));
}
.ud-hero-specimen-wrap.is-clickable:focus-visible { outline: 2px solid var(--acc); outline-offset: 8px; border-radius: 16px; }
@keyframes udFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* HUD okuma etiketleri */
.ud-hero-hud {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10.5px;
    color: var(--acc);
    padding: 4px 9px;
    border: 1px solid rgba(164, 226, 43, 0.3);
    border-radius: 4px;
    background: rgba(7, 8, 7, 0.7);
    backdrop-filter: blur(3px);
    white-space: nowrap;
    animation: udFadeUp 0.6s both;
}
.ud-hero-hud i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.hud-1 { top: 12%;  right: 4%;  animation-delay: 0.9s; }
.hud-2 { bottom: 20%; left: 0;   animation-delay: 1.05s; }
.hud-3 { bottom: 8%;  right: 12%; animation-delay: 1.2s; }

/* Dönen takımyıldız katmanı — tüm yörüngeleri merkez etrafında yavaşça döndürür */
.ud-hero-orbits {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;                /* tıklamalar yörüngelere geçsin */
    transform-origin: 50% 50%;
    animation: udOrbitRevolve 64s linear infinite;
}
.ud-hero-orbits:hover, .ud-hero-orbits:hover .ud-hero-orbit { animation-play-state: paused; } /* üzerine gelince dur (rahat tıkla) */

/* Yörüngedeki patch'ler — katmanla ters yönde döner → patch hep dik kalır */
.ud-hero-orbit {
    position: absolute;
    pointer-events: auto;
    width: 88px; height: 88px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    will-change: transform;
    transition: filter .25s ease;
    animation: udOrbitRevolve 64s linear infinite reverse;
}
.ud-hero-orbit-in {
    display: block; width: 100%; height: 100%;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.ud-hero-orbit:hover .ud-hero-orbit-in { transform: scale(1.16); }
.ud-hero-orbit img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}
.ud-hero-orbit::after {
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--oa, #A4E22B) 45%, transparent), transparent 65%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
}
.ud-hero-orbit:hover { filter: drop-shadow(0 0 10px var(--oa, #A4E22B)); }
.ud-hero-orbit:hover::after { opacity: 0.8; }
.ud-hero-orbit:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

/* 8 yörünge — merkez çevresine dağılmış (delay YOK: counter-rotate senkron kalsın) */
.ud-hero-orbit.o1 { top: -4%;   right: 8%;  width: 92px;  height: 92px;  }
.ud-hero-orbit.o2 { bottom: 2%; left: -4%;  width: 98px;  height: 98px;  }
.ud-hero-orbit.o3 { top: 40%;   right: -7%; width: 78px;  height: 78px;  }
.ud-hero-orbit.o4 { top: 4%;    left: 6%;   width: 74px;  height: 74px;  }
.ud-hero-orbit.o5 { bottom: 6%; right: 4%;  width: 84px;  height: 84px;  }
.ud-hero-orbit.o6 { top: 44%;   left: -8%;  width: 76px;  height: 76px;  }
.ud-hero-orbit.o7 { top: -7%;   left: 42%;  width: 72px;  height: 72px;  }
.ud-hero-orbit.o8 { bottom: -6%;left: 44%;  width: 80px;  height: 80px;  }
@keyframes udOrbitRevolve { to { transform: rotate(360deg); } }
@keyframes udOrbitFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .ud-hero-orbits, .ud-hero-orbit { animation: none !important; } }

/* ─────────────────────────  MARQUEE  ───────────────────────── */
.ud-hero-marquee {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid var(--border);
    background: rgba(164, 226, 43, 0.04);
    padding: 11px 0;
}
.ud-hero-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: udMarquee 32s linear infinite;
}
.ud-hero-marquee-set {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(164, 226, 43, 0.62);
    padding-right: 8px;
}
@keyframes udMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─────────────────────────  GENEL ANİMASYON  ───────────────────────── */
@keyframes udFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 980px) {
    .ud-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        text-align: center;
        padding-top: clamp(8px, 2.5vw, 16px);
    }
    /* Mobil/tablet: METİN üstte (mesaj + CTA fold üstünde), GÖRSEL altta */
    .ud-hero-text   { order: 0; }
    .ud-hero-visual { order: 2; margin-top: 4px; }
    .ud-hero-stage { width: min(86%, 380px); }
    .ud-hero-eyebrow, .ud-hero-anchor, .ud-hero-cta, .ud-hero-specs { justify-content: center; }
    .ud-hero-lead { margin-left: auto; margin-right: auto; }
    .ud-hero-title { margin-top: 16px; }
}
@media (max-width: 560px) {
    .ud-hero-stage { width: min(92%, 320px); }
    .ud-hero-orbit.o3, .ud-hero-orbit.o6,
    .ud-hero-orbit.o7, .ud-hero-orbit.o8 { display: none; } /* mobilde 4 köşe kalır: o1·o2·o4·o5 */
    .ud-hero-orbit.o1 { width: 72px; height: 72px; }
    .ud-hero-orbit.o2 { width: 78px; height: 78px; }
    .ud-hero-orbit.o4 { width: 68px; height: 68px; }
    .ud-hero-orbit.o5 { width: 74px; height: 74px; }
    .ud-hero-hud { font-size: 9px; }
    /* Dar mobilde rozetleri boş köşelere dağıt — yörünge patch'leriyle çakışmasın.
       o3/o4 gizli → üst-sol ve alt-sağ boş. o1: üst-sağ, o2: alt-sol. */
    .hud-1 { display: none; }                              /* "9 cm" — kalabalığı azalt */
    .hud-2 { top: 2%;  left: 0;  right: auto; bottom: auto; }  /* üst-sol (boş) */
    .hud-3 { bottom: 6%; right: 0; left: auto; top: auto; }    /* alt-sağ (boş) */
    .ud-hero-spec { min-width: 0; padding: 10px; }
    .ud-hero-spec-n { font-size: 23px; }
    .ud-btn { flex: 1 1 100%; justify-content: center; }
}

/* ─────────────────────────  REDUCED MOTION  ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ud-hero-grid, .ud-hero-glow, .ud-hero-scan, .ud-hero-halo,
    .ud-hero-reticle, .ud-hero-specimen-wrap, .ud-hero-orbit,
    .ud-hero-marquee-track, .ud-btn-pulse, .ud-btn-pulse::after, .ud-hero-dot {
        animation: none !important;
    }
    .ud-hero-line { opacity: 1; transform: none; animation: none; }
    .ud-hero-eyebrow, .ud-hero-lead, .ud-hero-anchor, .ud-hero-cta,
    .ud-hero-specs, .ud-hero-stage, .ud-hero-hud { animation: none; opacity: 1; }
}