/* ===========================================================================
   USEROAM TEKNOLOJİ · v4 — "Akış"
   purple/cyan aurora · sticky product deck · scroll-fill manifesto
   =========================================================================== */
:root{
  --bg:#05060C;
  --panel:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.09);
  --ink:#EDEFFA;
  --mut:#9AA3C0;
  --dim:#6B7394;
  --a1:#7C5CFF;
  --a2:#34D8E0;
  --grad:linear-gradient(92deg,#8E79FF,#34D8E0);
  --f-head:'Sora',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-head);font-weight:700;line-height:1.12;letter-spacing:-.025em}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.container.narrow{max-width:820px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nw{white-space:nowrap}

/* ---------- aurora backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;background:var(--bg)}
.backdrop::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.2) 45%,transparent 85%)}
#aurora{position:absolute;inset:0;width:100%;height:100%}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:99}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(5,6,12,.75);backdrop-filter:blur(16px);border-color:var(--line)}
.nav-in{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand img{height:24px;width:auto}
.brand span{font:500 .7rem var(--f-mono);color:var(--dim);letter-spacing:.18em;text-transform:uppercase}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font:500 .86rem var(--f-body);color:var(--mut);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang a{display:inline-block;background:none;border:0;color:var(--mut);font:600 .72rem var(--f-mono);padding:5px 11px;cursor:pointer}
.lang a.active{background:rgba(255,255,255,.1);color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}
.mobile-menu{position:fixed;inset:58px 0 auto 0;z-index:49;background:rgba(5,6,12,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:20px 24px 28px;display:none;flex-direction:column;gap:15px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1rem;color:var(--mut)}
.mobile-menu .btn{justify-content:center;margin-top:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--f-body);padding:13px 24px;border-radius:13px;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 26px rgba(124,92,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(124,92,255,.55)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-sm{padding:8px 17px;font-size:.8rem;border-radius:11px}
.btn-lg{padding:17px 32px;font-size:1rem}
.arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-row,.pulse,.scroll-hint span{animation:none!important}
  .hero h1 .w{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:168px 0 90px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font:500 .76rem var(--f-mono);color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:8px 17px;background:rgba(255,255,255,.03)}
.pulse{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.8rem);margin:30px auto 22px;max-width:960px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.hero h1.played .w{opacity:1;transform:none}
.hero-sub{color:var(--mut);font-size:1.1rem;max-width:660px;margin:0 auto 32px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:flex;justify-content:center;gap:clamp(22px,5vw,64px);flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;gap:2px}
.hero-stats dd{font:700 1.8rem var(--f-head);letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats dt{font:500 .7rem var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.13em}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid var(--line);border-radius:12px}
.scroll-hint span{position:absolute;top:6px;left:50%;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--a2);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(12px);opacity:.2}}

/* ---------- trust ---------- */
.trust{padding:64px 0 8px}
.trust>p{text-align:center;font:500 .72rem var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.16em;margin-bottom:26px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-row{display:flex;gap:58px;width:max-content;animation:scroll 36s linear infinite;padding:6px 0}
.marquee-row span{font:600 1.05rem var(--f-head);color:rgba(237,239,250,.32);white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:110px 0}
.section-head{margin-bottom:56px;max-width:740px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-block;font:600 .72rem var(--f-mono);color:var(--a2);text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px}
.section-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin-bottom:14px}
.section-head p{color:var(--mut);font-size:1.03rem}

/* ---------- manifesto scroll-fill ---------- */
.manifesto{padding:130px 0}
.fill-text{font:700 clamp(1.7rem,4vw,3rem) var(--f-head);line-height:1.3;letter-spacing:-.02em;max-width:1000px}
.fill-text .fw{color:rgba(237,239,250,.16);transition:color .35s linear}
.fill-text .fw.on{color:var(--ink)}

/* ---------- product deck (sticky stack) ---------- */
.deck-wrap{padding-bottom:0}
.deck{position:relative}
.scard{position:sticky;top:92px;padding:0 24px;margin-bottom:56px}
.scard-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:
    linear-gradient(150deg,rgba(var(--tint),.16),rgba(255,255,255,.02) 55%),#0A0C16;
  box-shadow:0 -18px 60px rgba(0,0,0,.55);
  min-height:480px;
  transform-origin:top center;
  will-change:transform,filter}
.scard-copy{padding:44px;display:flex;flex-direction:column;gap:16px;min-width:0}
.scard-copy header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.badge.live{font:600 .66rem var(--f-mono);color:#3DDC84;border:1px solid rgba(61,220,132,.35);border-radius:99px;padding:3px 11px;text-transform:uppercase;letter-spacing:.1em}
.kind{font:500 .7rem var(--f-mono);color:var(--dim);letter-spacing:.05em}
.scard-copy h3{font-size:2rem}
.scard-copy p{color:var(--mut);font-size:.97rem}
.scard-copy ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.scard-copy ul li{position:relative;padding-left:24px;color:var(--mut);font-size:.9rem}
.scard-copy ul li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;
  background:var(--grad);mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat}
.scard-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.scard-links a{font:600 .8rem var(--f-body);border:1px solid var(--line);border-radius:11px;padding:9px 16px;color:var(--mut);transition:color .2s,border-color .2s,background .2s}
.scard-links a:hover{color:var(--ink);border-color:rgba(var(--tint),.7);background:rgba(var(--tint),.12)}
.scard-shot{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;padding:34px;overflow:hidden;
  background:radial-gradient(440px 280px at 60% 40%,rgba(var(--tint),.2),transparent 70%)}
.scard-shot img{width:100%;max-height:420px;object-fit:cover;object-position:top left;border-radius:12px;border:1px solid var(--line);box-shadow:0 20px 56px rgba(0,0,0,.5)}
.scard-shot img.mockup{object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 24px 44px rgba(0,0,0,.55))}
.scard-shot.phones{gap:0;padding:38px 34px 0;align-items:flex-end}
.scard-shot.phones img{width:44%;max-height:430px;object-fit:cover;object-position:top;border-radius:24px 24px 0 0;border:5px solid #171B2C;border-bottom:0}
.scard-shot.phones .ph-b{transform:translate(14px,28px) rotate(-4deg);opacity:.7}
.scard-shot.phones .ph-a{transform:translateX(-14px);z-index:2}
.deck-spacer{height:40vh}

/* ---------- numbers ---------- */
.numbers{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(124,92,255,.06),transparent)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:32px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.stat b{display:block;font:700 clamp(1.7rem,3.4vw,2.4rem) var(--f-head);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;font-weight:600;margin-top:8px}
.stat small{color:var(--dim);font-size:.78rem}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.principle{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:32px;transition:border-color .3s,transform .3s}
.principle:hover{border-color:rgba(52,216,224,.4);transform:translateY(-4px)}
.principle h3{font-size:1.12rem;margin-bottom:10px}
.principle p{color:var(--mut);font-size:.92rem}

/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 48px 18px 22px;font:600 .98rem var(--f-head);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 1.3rem var(--f-mono);color:var(--a2);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{padding:0 22px 20px;color:var(--mut);font-size:.93rem}

/* ---------- cta ---------- */
.cta{position:relative;text-align:center;border:1px solid var(--line);border-radius:26px;padding:76px 30px;overflow:hidden;
  background:radial-gradient(620px 280px at 50% -25%,rgba(124,92,255,.24),transparent 70%),
             radial-gradient(420px 220px at 85% 110%,rgba(52,216,224,.12),transparent 70%),var(--panel)}
.cta h2{font-size:clamp(1.9rem,4.2vw,2.8rem);margin-bottom:14px}
.cta p{color:var(--mut);margin-bottom:32px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:62px 0 32px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;margin-bottom:46px}
.footer-brand img{height:24px;width:auto;margin-bottom:16px}
.footer-brand p{color:var(--mut);font-size:.88rem;max-width:300px}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h3{font:600 .72rem var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.15em;margin-bottom:4px}
.footer-col a{color:var(--mut);font-size:.88rem;transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-col p{color:var(--dim);font-size:.88rem}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px}
.footer-bottom p{color:var(--dim);font-size:.8rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .scard-in{grid-template-columns:1fr;min-height:0}
  .scard{position:relative;top:0}
  .scard-shot{min-height:220px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .burger{display:block}
  .brand img{height:19px}
  .brand span{display:none}
  .nav-right{margin-left:auto}
  .hero{padding-top:128px}
  .scard{padding:0 16px;margin-bottom:32px}
  .scard-copy{padding:28px}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stats-grid{grid-template-columns:1fr}
  .hero-stats{gap:20px}
}