/* home-hero.css — ana sayfa hero: katmanli sahne + sinematik acilis + parallax.
   Gizleme/baslangic durumlari YALNIZ html.zv-intro sinifi varken aktif (sinifi hero basindaki
   inline betik ekler, js/home-hero.js ~1.6 s'de ya da 3 s guvenlik zamanlayicisiyla kaldirir).
   Sinif yoksa (JS kapali, reduced-motion) sahne statik ve her sey gorunur. Yalniz transform/opacity. */
.hero { position: relative; }
.hs-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hs-layer { position: absolute; inset: -40px; }
.hs-bloom { background: radial-gradient(ellipse 55% 45% at 50% 22%, var(--accent-glow), transparent 70%); opacity: .85; }
.hs-floor {
  position: absolute; left: -25%; right: -25%; top: 30%; height: 90%;
  background-image:
    linear-gradient(to right, var(--accent-dim) 1px, transparent 1px),
    linear-gradient(to bottom, var(--accent-dim) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(720px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  opacity: .9;
}
.hs-mid { width: 100%; height: 100%; display: block; color: var(--accent); }
.hs-mid .ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .22; transform-box: fill-box; transform-origin: center; animation: zv-ring 9s linear infinite; }
.hs-mid .ray { stroke: currentColor; stroke-width: 1; opacity: .09; }
.hs-mid .edge { stroke: var(--cyan); stroke-width: 1; opacity: .26; fill: none; }
.hs-mid .node { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; opacity: .75; }
.hs-mid .pkt { fill: var(--cyan); opacity: 0; animation: zv-pkt var(--d, 5s) linear var(--l, 0s) infinite; }
.hs-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 26%; opacity: 0;
  background: linear-gradient(to bottom, transparent, var(--accent-dim) 55%, var(--accent-glow) 99%, transparent);
}
.hs-chip { position: absolute; display: none; }
.hs-chip > span {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 12px 7px 10px; border-radius: 9999px;
  font: 500 .76rem/1 var(--font-mono); color: var(--fg-secondary);
  background: var(--bg-card); border: 1px solid var(--border-accent);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .55);
  animation: zv-float 7s ease-in-out var(--fd, 0s) infinite alternate;
}
.hs-chip svg { flex: none; color: var(--accent); }
.hs-c1 { left: 2.5%; top: 74px; --fd: -1s; }
.hs-c2 { right: 2.5%; top: 92px; --fd: -3s; }
.hs-c3 { left: 3%; top: 300px; --fd: -5s; }
.hs-c4 { right: 3%; top: 352px; --fd: -2s; }
@media (min-width: 1280px) { .hs-chip { display: block; } }
@media (max-width: 640px) { .hs-chip { display: none; } .hs-floor { top: 36%; } .hs-mask { text-wrap: balance; } .hs-mid { opacity: .7; } }
[data-theme="light"] .hs-bloom { opacity: .55; }
[data-theme="light"] .hs-floor { opacity: .7; }
[data-theme="light"] .hs-mid { opacity: .8; }
[data-theme="light"] .hs-mid .node { fill: #fff; }
[data-theme="light"] .hs-chip > span { box-shadow: 0 8px 22px -12px rgba(15, 23, 42, .25); background: rgba(255, 255, 255, .88); }

/* baslik maskeleri (statik halde etkisiz) */
.hs-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; position: relative; }
.hs-mask::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); }
[data-theme="light"] .hs-mask::after { background: linear-gradient(100deg, transparent, rgba(5, 150, 105, .35), transparent); }

/* parallax sirasinda gecici gpu ipucu */
.hero.zv-live .hs-layer, .hero.zv-live .hs-chip, .hero.zv-live .cli-showcase { will-change: transform; }
.hero.zv-live > .container { will-change: transform, opacity; }
.hero.zv-paused .hs-mid .ring, .hero.zv-paused .hs-mid .pkt, .hero.zv-paused .hs-chip > span { animation-play-state: paused; }

@keyframes zv-ring { 0% { transform: scale(.5); opacity: 0; } 20% { opacity: .3; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes zv-pkt { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes zv-float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* ---- sinematik acilis (yalniz html.zv-intro) ---- */
html.zv-intro { --zv-e: cubic-bezier(.2, .7, .1, 1); }
html.zv-intro .ambient-glow-1 { animation: zv-fade 1000ms var(--zv-e) both; }
html.zv-intro .cyber-grid { animation: zv-fade 1100ms var(--zv-e) 100ms both; }
html.zv-intro .hs-bloom { animation: zv-bloom 1100ms var(--zv-e) both; }
html.zv-intro .hs-floor { animation: zv-floor 1000ms var(--zv-e) 100ms both; }
html.zv-intro .hs-mid { animation: zv-mid 1100ms var(--zv-e) 150ms both; }
html.zv-intro .hs-scan { animation: zv-scan 1100ms cubic-bezier(.45, .05, .3, 1) 300ms both; }
html.zv-intro .hs-chip > span { animation: zv-chip 520ms var(--zv-e) var(--cd, 900ms) both, zv-float 7s ease-in-out var(--fd, 0s) infinite alternate; }
html.zv-intro .hs-c2 > span { --cd: 1000ms; } html.zv-intro .hs-c3 > span { --cd: 1100ms; } html.zv-intro .hs-c4 > span { --cd: 1200ms; }
html.zv-intro .announcement-pill { animation: zv-up 520ms var(--zv-e) both; }
html.zv-intro .hs-mask > span { display: inline-block; animation: zv-rise 760ms var(--zv-e) 40ms both; }
html.zv-intro .hs-mask.l2 > span { animation-delay: 160ms; }
html.zv-intro .hs-mask.l2::after { animation: zv-sheen 800ms ease-out 700ms both; }
html.zv-intro .hero-sub { animation: zv-up 600ms var(--zv-e) 380ms both; }
html.zv-intro .hero-actions { animation: zv-up 600ms var(--zv-e) 480ms both; }
html.zv-intro .hero-trust { animation: zv-up 600ms var(--zv-e) 580ms both; }
html.zv-intro .cli-showcase { transform-origin: 50% 0; animation: zv-seat 900ms var(--zv-e) 500ms both; }

@keyframes zv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zv-bloom { from { opacity: 0; transform: scale(.7); } to { opacity: .85; transform: none; } }
@keyframes zv-floor { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: .9; clip-path: inset(0 0 0 0); } }
@keyframes zv-mid { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes zv-scan { 0% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(380%); } }
@keyframes zv-chip { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
@keyframes zv-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes zv-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes zv-sheen { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(300%); } }
@keyframes zv-seat { from { opacity: 0; transform: perspective(1100px) rotateX(9deg) translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
html.zv-intro .hs-mask.l2::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hs-mid .ring, .hs-mid .pkt, .hs-chip > span { animation: none !important; }
  .hs-mid .pkt { opacity: 0; }
}