/* ============================================
   ALKERSOFT — Modern React Tasarım CSS
   ============================================ */

:root{
  --bg:#f4f7fc;
  --surface:#ffffff;
  --surface-2:#eef2f9;
  --ink:#0d1626;
  --ink-2:#3f4c61;
  --muted:#7b8699;
  --line:#e5ebf4;
  --line-2:#eef2f8;

  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --brand-rgb:37,99,235;
  --brand-soft:color-mix(in oklab, var(--brand) 12%, white);
  --brand-tint:color-mix(in oklab, var(--brand) 7%, white);
  --brand-ink:color-mix(in oklab, var(--brand) 72%, #06122b);
  --c1:#2563eb;
  --c2:#4f46e5;
  --c3:#22b8e6;
  --c4:#0ea5e9;
  --grad-brand:linear-gradient(115deg, var(--brand), var(--c2) 50%, var(--c3));
  --glass:color-mix(in oklab, white 70%, transparent);

  --navy:#0b1322;
  --navy-2:#121d33;
  --navy-3:#1b2942;

  --ok:#16a36a; --ok-soft:#e7f6ee;
  --warn:#e0962b; --warn-soft:#fdf3e2;
  --bad:#e0533b; --bad-soft:#fdeae6;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(13,22,38,.06), 0 1px 3px rgba(13,22,38,.05);
  --shadow:0 6px 16px -6px rgba(13,22,38,.12), 0 12px 30px -12px rgba(13,22,38,.12);
  --shadow-lg:0 20px 50px -16px rgba(13,22,38,.22), 0 8px 24px -12px rgba(13,22,38,.14);
  --shadow-brand:0 16px 40px -12px color-mix(in oklab, var(--brand) 55%, transparent);

  --font-display:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
.grad-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.scroll-bar{position:fixed; top:0; left:0; height:3px; z-index:90; background:var(--grad-brand);
  width:var(--sp,0%); box-shadow:0 0 12px color-mix(in oklab,var(--brand) 60%, transparent); transition:width .05s linear;}
.aurora{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; will-change:transform;}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-24px) scale(1.08);}66%{transform:translate(-22px,18px) scale(.96);}}
.noise{position:absolute; inset:0; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:800;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
::selection{background:color-mix(in oklab, var(--brand) 24%, white); color:var(--brand-ink);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%;}
.section{padding:96px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brand-ink);
  background:var(--brand-soft); border:1px solid color-mix(in oklab,var(--brand) 22%, white);
  padding:7px 14px; border-radius:var(--pill);
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--brand);}
.h-sec{font-size:clamp(30px,4vw,46px); letter-spacing:-.03em;}
.sub-sec{color:var(--ink-2); font-size:clamp(16px,1.4vw,18.5px); max-width:620px; margin-top:16px; line-height:1.55;}
.center{text-align:center;}
.center .sub-sec{margin-left:auto; margin-right:auto;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:14px 24px; border-radius:var(--pill); transition:.22s ease; white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:linear-gradient(180deg, color-mix(in oklab,var(--brand) 88%, white), var(--brand)); color:#fff; box-shadow:var(--shadow-brand);}
.btn-primary:hover{transform:translateY(-2px); filter:saturate(1.08) brightness(1.03);}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:color-mix(in oklab,var(--brand) 40%, var(--line)); color:var(--brand-ink); transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{transform:translateY(-2px); background:#000;}
.btn-sm{padding:10px 16px; font-size:13.5px;}
.btn-lg{padding:16px 30px; font-size:16px;}

/* ---------- card ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}

/* reveal delays */
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.40s;} .reveal.d6{transition-delay:.48s;}

/* ---------- navbar ---------- */
.nav{position:sticky; top:0; z-index:60; transition:.3s ease;}
.nav-inner{display:flex; align-items:center; gap:28px; height:74px;
  margin:14px auto; max-width:var(--maxw); padding:0 14px 0 18px; width:calc(100% - 32px);
  background:color-mix(in oklab, var(--surface) 78%, transparent); backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid var(--line); border-radius:var(--pill); box-shadow:var(--shadow-sm); transition:.3s ease;}
.nav.scrolled .nav-inner{box-shadow:var(--shadow); background:color-mix(in oklab, var(--surface) 92%, transparent);}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em;}
.brand .mark{width:34px; height:34px; border-radius:9px; background:var(--ink); display:grid; place-items:center; padding:6px;}
.brand .mark img{filter:invert(1);}
.brand .badge{font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#fff; background:var(--brand); padding:3px 7px; border-radius:6px; transform:translateY(-1px);}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:6px;}
.nav-links a{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-2); padding:9px 13px; border-radius:var(--pill); transition:.18s;}
.nav-links a:hover{color:var(--ink); background:var(--surface-2);}
.nav-links a.active{color:var(--brand-ink); background:var(--brand-soft);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.lang{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-2); padding:8px 11px; border-radius:var(--pill); border:1px solid var(--line);}
.lang:hover{color:var(--ink); border-color:var(--brand);}
.nav-burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center;}
.nav-burger svg{width:22px;height:22px;}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:70; display:none;}
.drawer.open{display:block;}
.drawer-bg{position:absolute; inset:0; background:rgba(8,14,26,.4); backdrop-filter:blur(2px);}
.drawer-panel{position:absolute; top:12px; right:12px; left:12px; background:var(--surface); border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-lg); animation:drawerIn .3s ease;}
@keyframes drawerIn{from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;}}
.drawer-panel a{display:block; font-family:var(--font-display); font-weight:600; font-size:17px; padding:14px 12px; border-radius:12px; color:var(--ink);}
.drawer-panel a:hover, .drawer-panel a.active{background:var(--brand-soft); color:var(--brand-ink);}

@media (max-width:940px){
  .nav-links, .lang{display:none;}
  .nav-burger{display:flex;}
}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#0c1e4a,#0a1730); color:#c4cee0; margin-top:40px;}
.footer a{color:#9fb0c9;}
.footer a:hover{color:#fff;}

/* utility */
.grid{display:grid; gap:22px;}
.flex{display:flex;}
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.03em; padding:4px 10px; border-radius:var(--pill);}
.tag-ok{background:var(--ok-soft); color:#0e7c4d;}
.tag-warn{background:var(--warn-soft); color:#a96a13;}
.tag-bad{background:var(--bad-soft); color:#b73a23;}
.tag-info{background:var(--brand-soft); color:var(--brand-ink);}

#root{min-height:100vh;}
.app-fade{animation:appFade .45s ease;}
@keyframes appFade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- scroll progress ---------- */
.scroll-prog{position:fixed; top:0; left:0; right:0; height:3px; z-index:90; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--brand), color-mix(in oklab,var(--brand) 50%, #7c3aed)); box-shadow:0 0 12px color-mix(in oklab,var(--brand) 60%, transparent);}

/* ---------- reveal variants ---------- */
.reveal{opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease;}
.reveal.in{opacity:1; transform:none; filter:none;}
.reveal.rv-l{transform:translateX(-46px);} .reveal.rv-r{transform:translateX(46px);}
.reveal.rv-scale{transform:scale(.9);} .reveal.rv-clip{transform:translateY(20px);}
.reveal.in.rv-l, .reveal.in.rv-r, .reveal.in.rv-scale, .reveal.in.rv-clip{transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important; transform:none !important; filter:none !important;}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex; gap:0; width:max-content; animation:marq linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-family:var(--font-display); font-weight:800; font-size:clamp(16px,1.8vw,22px); letter-spacing:-.01em; color:var(--ink-2); opacity:.45; padding:0 34px; white-space:nowrap; display:flex; align-items:center; gap:34px;}
.marquee-item::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.6;}
@keyframes marq{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- spotlight card ---------- */
.spotlight{position:relative;}
.spotlight::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab,var(--brand) 16%, transparent), transparent 60%); z-index:0;}
.spotlight:hover::before{opacity:1;}
.spotlight > *{position:relative; z-index:1;}

/* ---------- light hero ---------- */
.hero-dark{position:relative; overflow:hidden; background:linear-gradient(180deg,#ffffff 0%,#eef4ff 55%,#e7eeff 100%); color:var(--ink);}
.aurora{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; animation:auroraFloat 16s ease-in-out infinite;}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(36px,-30px) scale(1.12);} 66%{transform:translate(-28px,24px) scale(.92);}}
.hero-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px); background-size:60px 60px; -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 72%); mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 72%);}
.hero-noise{position:absolute; inset:0; opacity:.04; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.word{display:inline-block; opacity:0; transform:translateY(28px) rotate(2deg); animation:wordIn .7s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes wordIn{to{opacity:1; transform:none;}}
.hero-stat-num{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.02em; color:#fff;}
.hero-orb{position:absolute; border-radius:18px; backdrop-filter:blur(8px); will-change:transform;}

/* ---------- sticky steps ---------- */
.sticky-steps{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.steps-sticky{position:sticky; top:120px;}
@media (max-width:860px){.sticky-steps{grid-template-columns:1fr; gap:28px;} .steps-sticky{position:static; top:auto;}}
.step-row{padding:34px 0; border-top:1px solid var(--line); transition:.4s;}
.step-row .sn{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--brand);}
.step-row h3{font-size:clamp(22px,2.6vw,30px); margin:10px 0; transition:.3s;}
.step-row.dim{opacity:.32; filter:blur(.4px);}
.step-row.dim h3{transform:translateX(-4px);}
.hero-cue{color:var(--muted);}