/* ============================================================
   Unidiso — görsel katman (aurora, ışık, hareket)
   main.css üzerine yüklenir. Hareketler prefers-reduced-motion'a saygılıdır.
   ============================================================ */

/* ---------- Arka plan dokusu: logo modül ızgarası + grain ---------- */
.hero,.page-hero,.band-dark,.cta{position:relative;isolation:isolate;overflow:hidden}
body{overflow-x:hidden}
.hero::before,.hero::after{display:none} /* main.css'teki eski aurora kapalı */
.grid-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,212,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,212,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%)}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Aurora: iki huzme + taban parıltısı ---------- */
.aurora{position:absolute;inset:-10% -10% -20% -10%;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(60px);will-change:transform,opacity}
.aurora .beam-1{left:48%;top:-35%;width:26vw;min-width:260px;height:150%;
  background:linear-gradient(180deg,rgba(15,118,110,0) 0%,rgba(15,118,110,.9) 25%,rgba(94,234,212,1) 55%,rgba(215,255,247,.95) 78%,rgba(255,255,255,0) 100%);
  transform:rotate(16deg);opacity:.85;animation:beamDrift 11s ease-in-out infinite alternate}
.aurora .beam-2{left:60%;top:-25%;width:14vw;min-width:160px;height:130%;
  background:linear-gradient(180deg,rgba(94,234,212,0) 0%,rgba(94,234,212,.7) 40%,rgba(255,255,255,.8) 70%,rgba(255,255,255,0) 100%);
  transform:rotate(22deg);opacity:.55;animation:beamDrift 14s ease-in-out infinite alternate-reverse}
.aurora .glow{left:30%;bottom:-25%;width:80vw;height:60%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(94,234,212,.35),rgba(15,118,110,.18) 50%,rgba(15,118,110,0));
  filter:blur(40px);animation:glowPulse 7s ease-in-out infinite}
@keyframes beamDrift{from{transform:rotate(16deg) translateX(-3%) scaleY(1)}to{transform:rotate(13deg) translateX(5%) scaleY(1.06)}}
@keyframes glowPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.page-hero .aurora .beam-1{left:70%;width:18vw;opacity:.6}
.page-hero .aurora .beam-2{left:82%;opacity:.4}
.page-hero::after{display:none}

/* ---------- Hero: yüzen çerçeve + bildirim kartları ---------- */
.hero-visual{perspective:1400px}
.hero-visual .frame{position:relative;transform:rotateY(-6deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .8s var(--ease)}
.hero-visual:hover .frame{transform:rotateY(0) rotateX(0)}
.frame{position:relative}
.frame::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),rgba(94,234,212,0) 0%,rgba(94,234,212,.9) 12%,rgba(255,255,255,.6) 18%,rgba(94,234,212,0) 30%,rgba(94,234,212,0) 70%,rgba(94,234,212,.5) 85%,rgba(94,234,212,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ringSpin 6s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ringSpin{to{--ang:360deg}}
.frame::after{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:40px;background:radial-gradient(closest-side,rgba(94,234,212,.25),rgba(94,234,212,0));filter:blur(24px);pointer-events:none}

.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;
  background:rgba(16,48,44,.72);border:1px solid rgba(94,234,212,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(5,20,18,.5);color:var(--white);font-size:12px;line-height:1.25;white-space:nowrap}
.chip b{display:block;font-weight:700}
.chip small{color:var(--muted-dark);font-size:11px}
.chip .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(94,234,212,.15);color:var(--mint)}
.chip .dot svg{width:16px;height:16px}
.chip-1{left:-56px;top:6%;animation:chipFloat 6s ease-in-out infinite}
.chip-2{right:-40px;top:62%;animation:chipFloat 7s ease-in-out 1s infinite reverse}
.chip-3{left:6%;bottom:-30px;animation:chipFloat 8s ease-in-out .5s infinite}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:900px){.chip-1{left:8px}.chip-2{right:8px}.chip-3{display:none}.hero-visual .frame{transform:none}}

/* Mockup içi canlı hareket: barlar yükselir, KPI yanıp söner */
.chart i{transform-origin:bottom;animation:barUp 1.2s var(--ease) both}
.chart i:nth-child(2){animation-delay:.08s}.chart i:nth-child(3){animation-delay:.16s}.chart i:nth-child(4){animation-delay:.24s}.chart i:nth-child(5){animation-delay:.32s}.chart i:nth-child(6){animation-delay:.4s}.chart i:nth-child(7){animation-delay:.48s}.chart i:nth-child(8){animation-delay:.56s}.chart i:nth-child(9){animation-delay:.64s}.chart i:nth-child(10){animation-delay:.72s}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mock-title em{position:relative;padding-left:18px}
.mock-title em::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(94,234,212,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(94,234,212,.6)}100%{box-shadow:0 0 0 8px rgba(94,234,212,0)}}

/* ---------- Nav: cam pill ---------- */
.nav.is-scrolled{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.is-scrolled .nav-inner{height:60px;margin-top:10px;padding:0 10px 0 18px;border-radius:999px;background:rgba(11,31,29,.72);border:1px solid rgba(94,234,212,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px rgba(5,20,18,.45)}
.nav-inner{transition:all .35s var(--ease)}

/* ---------- Logo şeridi: kayan marquee ---------- */
.logos{overflow:hidden;position:relative;background:linear-gradient(180deg,#0B1F1D,#0E2522)}
.logos::before,.logos::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,#0B1F1D,transparent)}
.logos::after{right:0;background:linear-gradient(-90deg,#0E2522,transparent)}
.logos-inner{justify-content:flex-start;flex-wrap:nowrap;gap:0;width:max-content;animation:marquee 28s linear infinite}
.logos-inner > *{padding:0 36px;flex:none}
.logos:hover .logos-inner{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Ürün kartları: spotlight + gradient kenar + glow ---------- */
.product{background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,0) 40%),var(--deep-2);border:1px solid rgba(255,255,255,.08);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.product::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(94,234,212,.22),transparent 60%)}
.product:hover::before{opacity:1}
.product:hover{transform:translateY(-4px);border-color:rgba(94,234,212,.5);box-shadow:0 24px 60px rgba(5,20,18,.5),0 0 0 1px rgba(94,234,212,.15) inset}
.product > *{position:relative;z-index:1}
.product .product-icon{box-shadow:0 0 0 1px rgba(94,234,212,.25) inset,0 0 24px rgba(94,234,212,.15);transition:box-shadow .35s,transform .35s}
.product:hover .product-icon{box-shadow:0 0 0 1px rgba(94,234,212,.6) inset,0 0 36px rgba(94,234,212,.4);transform:scale(1.06)}
.product.featured::before{background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(94,234,212,.26),transparent 60%)}
.product.featured .frame::before{animation-duration:9s}
.product::after{z-index:2;box-shadow:0 0 0 0 rgba(94,234,212,0);transition:box-shadow .35s,background .35s,transform .35s}
.product:hover::after{box-shadow:0 0 18px rgba(94,234,212,.8)}

/* ---------- Ekosistem: ürünler hub etrafında ---------- */
.eco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.eco-svg{width:100%;height:auto;overflow:visible}
.eco-svg .ring{fill:none;stroke:rgba(94,234,212,.18);stroke-width:1}
.eco-svg .link{fill:none;stroke:rgba(94,234,212,.55);stroke-width:1.2;stroke-dasharray:4 8;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-48}}
.eco-svg .hub{fill:#0E2522;stroke:var(--mint);stroke-width:1.5;filter:drop-shadow(0 0 30px rgba(94,234,212,.55))}
.eco-svg .hub-pulse{fill:none;stroke:var(--mint);stroke-width:1;opacity:0;animation:hubPulse 3s ease-out infinite}
@keyframes hubPulse{0%{r:44;opacity:.8}100%{r:120;opacity:0}}
.eco-node{cursor:pointer}
.eco-node circle{fill:#10302C;stroke:rgba(94,234,212,.35);stroke-width:1;transition:stroke .3s,filter .3s}
.eco-node:hover circle,.eco-node.is-on circle{stroke:var(--mint);filter:drop-shadow(0 0 16px rgba(94,234,212,.7))}
.eco-node text{fill:var(--white);font-family:var(--font-body);font-size:11px;font-weight:700;text-anchor:middle}
.eco-node .ico{color:var(--mint)}
.eco-svg .packet{fill:var(--mint);filter:drop-shadow(0 0 6px rgba(94,234,212,.9))}
.eco-list{display:grid;gap:10px;margin-top:28px}
.eco-list a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-dark);color:var(--muted-dark);font-weight:600;font-size:var(--text-sm);transition:border-color .3s,color .3s,background .3s}
.eco-list a:hover,.eco-list a.is-on{border-color:rgba(94,234,212,.5);color:var(--white);background:rgba(94,234,212,.06)}
.eco-list .product-icon{width:28px;height:28px;border-radius:8px}
.eco-list .product-icon svg{width:14px;height:14px}
@media (max-width:900px){.eco{grid-template-columns:1fr}}

/* ---------- Açık bantlarda hafif teal parıltı ---------- */
.band-light{position:relative;overflow:hidden}
.band-light::before{content:"";position:absolute;right:-20%;top:-30%;width:60%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(94,234,212,.22),rgba(94,234,212,0));filter:blur(40px);pointer-events:none}
.band-light > .container{position:relative}
.why article{position:relative;padding:24px 22px 26px;border-top:0;border-radius:var(--radius-card);background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(8px);transition:transform .35s var(--ease),box-shadow .35s}
.why article::before{content:"";position:absolute;left:22px;top:0;width:44px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--teal),var(--mint))}
.why article:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(15,118,110,.14)}

/* ---------- Metrikler: sayaç + parıltı ---------- */
.metric{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),var(--deep-2)}
.metric::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(94,234,212,.28),rgba(94,234,212,0));filter:blur(10px)}
.metric strong{background:linear-gradient(90deg,#fff,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Referans ---------- */
.quote{position:relative;overflow:hidden}
.quote::before{content:"“";position:absolute;left:18px;top:-30px;font-family:var(--font-display);font-size:220px;line-height:1;color:rgba(15,118,110,.08);pointer-events:none}

/* ---------- CTA: aurora mini ---------- */
.cta::before{display:none}
.cta .aurora .beam-1{left:60%;width:22%;opacity:.7}
.cta .aurora .glow{left:40%;bottom:-60%}

/* ---------- Özellik kartları (ürün sayfası) ---------- */
.feature{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.feature::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(15,118,110,.12),transparent 60%)}
.feature:hover{transform:translateY(-4px);border-color:rgba(15,118,110,.35);box-shadow:0 20px 50px rgba(15,118,110,.14)}
.feature:hover::before{opacity:1}
.feature > *{position:relative}

/* ---------- Scroll reveal: bölüm başına tek sekans ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora i,.chip,.chart i,.mock-title em::before,.frame::before,.logos-inner,.eco-svg .link,.eco-svg .hub-pulse{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-visual .frame{transform:none}
}

/* CTA ve ürün sayfası: huzme daha yumuşak */
.cta .aurora i,.page-hero .aurora i{filter:blur(80px)}
.cta .aurora .beam-2{display:none}
.cta .aurora .beam-1{left:55%;top:-60%;height:220%;width:30%}