@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/outfit-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/outfit-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ink:#0a0f22;--ink-2:#434b66;--ink-3:#7c849c;
  --blue:#3f6ff5;--blue-deep:#2f5be6;--blue-soft:#78a1ff;--sky:#9ccbff;
  --paper:#fbfcff;--mist:#eef3ff;--mist-2:#e8efff;--line:#dfe6f7;--night:#0a0f22;
  --ok:#17a35a;--warn:#e8890c;
  --sh-1:0 1px 2px rgba(31,58,140,.06),0 8px 24px -12px rgba(31,58,140,.18);
  --sh-2:0 2px 4px rgba(31,58,140,.06),0 24px 48px -20px rgba(31,58,140,.32);
  --sh-3:0 0 0 1px rgba(10,15,34,.05),0 50px 90px -30px rgba(31,58,140,.45),0 18px 36px -18px rgba(31,58,140,.3);
  --r-xl:28px;--r-lg:20px;--r-md:14px;--r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1);--wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Outfit",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.blue{color:var(--blue)}
[hidden]{display:none!important}
[id]{scroll-margin-top:96px}
body[data-spa] main{display:none}
body[data-spa] main.on{display:block}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,box-shadow .3s}
body[data-page="tanitim"] .nav,body[data-spa] .nav{background:rgba(251,252,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.nav.stuck,.nav.open{background:rgba(251,252,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1}
.logo svg{width:23px;height:26px;flex:none}
.nav-links{display:flex;gap:4px;margin-left:auto;font-size:15.5px;color:var(--ink-2)}
.nav-links a{padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(63,111,245,.07)}
.nav-links a.cur{color:var(--blue);font-weight:500}
.nav-cta{display:flex;gap:8px;align-items:center}
.burger{display:none;width:42px;height:42px;border-radius:12px;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff}
.burger i{display:block;width:16px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger i+i{margin-top:4px}
.nav.open .burger i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 24px;border-radius:999px;font-weight:500;font-size:16px;transition:transform .25s var(--ease),box-shadow .25s,background .2s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:linear-gradient(180deg,#4d7bfa,#3765ee);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -10px rgba(63,111,245,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -12px rgba(63,111,245,.9)}
.btn-ghost{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line),var(--sh-1)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blue-soft),var(--sh-1);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-deep);box-shadow:0 14px 30px -14px rgba(10,15,34,.5)}
.btn-white:hover{transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.btn-sm{height:40px;padding:0 18px;font-size:15px}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:500}
.link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* section basics */
.sec{padding:clamp(72px,9vw,124px) 0}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.tint{background:linear-gradient(var(--mist),var(--paper))}
.tint-flat{background:var(--mist)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(63,111,245,.16)}
.head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.head.center{margin-inline:auto;text-align:center}
.head h2,.h2{font-size:clamp(30px,3.7vw,50px);line-height:1.06;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.head p{margin-top:16px;color:var(--ink-2);font-size:clamp(17px,1.35vw,19.5px);text-wrap:pretty}
.head-row{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.head-row .head{margin-bottom:0}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.5;white-space:nowrap}
.pill.ig{background:#fdebf2;color:#c22a63}.pill.wa{background:#e5f6ec;color:#167c45}.pill.web{background:#e9efff;color:var(--blue-deep)}
.pill.ok{background:#e5f6ec;color:#167c45}.pill.wait{background:#fff1d6;color:#9a6200}.pill.soon{background:#fff1d6;color:#9a6200;font-weight:600;font-size:11.5px}
.pill.new{background:var(--blue);color:#fff}

/* browser frame */
.browser{border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--sh-3)}
.browser-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#f3f6fd;border-bottom:1px solid #e6ebf7}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#d3daec}
.browser-bar span{margin-left:14px;font-size:12px;color:var(--ink-3);background:#fff;border-radius:6px;padding:2px 12px}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.browser img.contain{object-fit:contain;background:linear-gradient(#f5f8ff,#e8efff);padding:3%}

/* ===== home hero ===== */
.hero{position:relative;height:240vh;background:
  radial-gradient(900px 600px at 78% 8%,rgba(120,161,255,.3),transparent 60%),
  radial-gradient(700px 500px at 8% 30%,rgba(156,203,255,.24),transparent 60%),
  linear-gradient(#fbfcff,#eef3ff 70%,#e8efff)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-copy{position:relative;z-index:3;padding-top:clamp(96px,13.5vh,150px);will-change:transform,opacity}
.badge{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);font-size:14.5px;color:var(--ink-2);margin-bottom:22px;transition:box-shadow .2s}
.badge:hover{box-shadow:0 0 0 1px var(--blue-soft),var(--sh-1)}
.hero h1{font-size:clamp(44px,6.6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:12ch}
.hero-sub{margin-top:22px;max-width:36ch;font-size:clamp(17.5px,1.5vw,21px);color:var(--ink-2);line-height:1.45}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.scene{position:absolute;inset:0;z-index:2;display:grid;place-items:center;perspective:1800px;pointer-events:none}
.rig{position:relative;width:min(1060px,90vw,112vh);transform-style:preserve-3d;will-change:transform}
.panel3d{transform-style:preserve-3d;will-change:transform}
.chip{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(10,15,34,.05),0 22px 40px -18px rgba(31,58,140,.5);font-size:16px;font-weight:500;white-space:nowrap;will-change:transform,opacity;line-height:1.25}
.chip small{font-size:11.5px;font-weight:600}
.chip.ig small{color:#d6336c}.chip.wa small{color:#1f9d55}.chip.web small{color:var(--blue)}
.chip.note{background:#fff8dc;border-radius:6px;font-weight:400;color:#5b5230}.chip.note small{color:#9a8a45}.chip.note s{opacity:.55}
.chip.file{flex-direction:row;align-items:center;gap:10px}
.chip.file b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e7f6ec;color:#1f9d55;font-size:11px;font-weight:700}
.chip.dark{background:var(--night);color:#fff}.chip.dark small{color:var(--sky)}
.hero-end{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,44px);z-index:3;text-align:center;font-size:clamp(17px,1.5vw,21px);color:var(--ink-2);opacity:0;padding:0 24px}
.hero-end b{color:var(--ink);font-weight:600}
.scroll-hint{position:absolute;right:max(24px,calc((100vw - var(--wrap))/2));bottom:30px;z-index:3;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(251,252,255,.85);backdrop-filter:blur(8px)}
.scroll-hint i{width:1.5px;height:20px;background:linear-gradient(var(--blue),transparent);animation:drip 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* channel strip */
.strip{padding:26px 0;border-bottom:1px solid var(--line);background:#fff}
.strip-in{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
.strip-in b{font-weight:500;color:var(--ink);margin-right:8px}
.strip-in span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--mist)}
.strip-in span i{width:7px;height:7px;border-radius:50%}

/* problem block */
.dark{background:radial-gradient(900px 520px at 75% 0%,#22368f 0%,rgba(34,54,143,0) 62%),var(--night);color:#fff}
.dark .head p{color:#aab3d0}
.dark .eyebrow{color:var(--sky)}.dark .eyebrow::before{background:var(--sky);box-shadow:0 0 0 4px rgba(156,203,255,.18)}
.probs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.prob{padding:24px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);backdrop-filter:blur(6px)}
.prob svg{width:26px;height:26px;color:var(--sky);margin-bottom:38px}
.prob h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.prob p{margin-top:8px;font-size:15.5px;color:#aab3d0}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.b{display:flex;flex-direction:column;padding:22px;overflow:hidden;position:relative;transition:transform .35s var(--ease),box-shadow .35s}
.b:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #c9d6f7,var(--sh-2)}
.b-7{grid-column:span 7}.b-5{grid-column:span 5}.b-4{grid-column:span 4}.b-6{grid-column:span 6}
.b h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:20px}
.b>p{margin-top:6px;color:var(--ink-2);font-size:15.5px;max-width:46ch}
.mini{flex:1;min-height:176px;border-radius:var(--r-md);background:linear-gradient(160deg,#f3f6ff,#e9efff);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 2px rgba(31,58,140,.08);font-size:14.5px}
.row .av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mist-2);color:var(--blue-deep);font-size:12px;font-weight:600}
.row .tx{flex:1;min-width:0;line-height:1.3}
.row .tx b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx small{color:var(--ink-3);font-size:13px;white-space:nowrap}
.row .num{font-weight:600;font-variant-numeric:tabular-nums}
.seq>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.in .seq>*{opacity:1;transform:none}
.in .seq>*:nth-child(2){transition-delay:.12s}.in .seq>*:nth-child(3){transition-delay:.24s}.in .seq>*:nth-child(4){transition-delay:.36s}.in .seq>*:nth-child(5){transition-delay:.48s}
.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sizes div{background:#fff;border-radius:10px;padding:8px 0;text-align:center;font-size:13px;color:var(--ink-3);box-shadow:0 1px 2px rgba(31,58,140,.08)}
.sizes b{display:block;font-size:19px;color:var(--ink);font-weight:600;line-height:1.2}
.sizes .crit{background:#fff3e0;color:#9a6200;box-shadow:inset 0 0 0 1.5px #f5b85e}.sizes .crit b{color:#b86a00}
.sizes .out b{color:#b8bfd2}
.mini-h{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-2)}
.mini-h b{font-weight:600;color:var(--ink);font-size:14.5px}
.bar{height:8px;border-radius:8px;background:#fff;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--blue-soft),var(--blue));transition:width 1.4s var(--ease) .3s}
.in .bar i{width:var(--w,100%)}
.bubble{align-self:flex-start;max-width:85%;background:#fff;border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:14.5px;box-shadow:0 1px 2px rgba(31,58,140,.08)}
.bubble small{display:block;font-size:11.5px;font-weight:600;color:#d6336c}
.bubble.me{align-self:flex-end;background:var(--blue);color:#fff;border-radius:14px 14px 4px 14px}
.bubble.me small{color:#cfe0ff}
.linked{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--blue-deep);background:#e2eaff;border-radius:999px;padding:4px 12px}
.pl{display:grid;gap:9px}
.pl div{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.pl .bar{height:10px}
.pl b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;min-width:64px;text-align:right}
.pl .cost i{background:#c7d0e8}
.pl .net{color:var(--ink);font-weight:600}
.track{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 2px rgba(31,58,140,.08);max-width:300px;margin-inline:auto;width:100%}
.track .shop{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.04em}
.track .shop i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;font-size:10px;font-style:normal;letter-spacing:0}
.track p{margin:10px 0 8px;font-size:14.5px}
.track small{display:block;margin-top:10px;font-size:11.5px;color:var(--ink-3);text-align:center}
.steps-dots{display:flex;gap:4px}.steps-dots i{flex:1;height:5px;border-radius:5px;background:var(--mist-2)}.steps-dots i.on{background:var(--blue)}

/* player */
.player{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#000;box-shadow:0 60px 120px -50px rgba(63,111,245,.7),0 0 0 1px rgba(255,255,255,.08);aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(10,15,34,.1),rgba(10,15,34,.45));transition:opacity .3s;width:100%}
.play span{display:grid;place-items:center;width:clamp(68px,7.5vw,100px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 20px 50px -10px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.play:hover span{transform:scale(1.08)}
.play svg{width:34%;margin-left:6%}
.player.on .play{opacity:0;pointer-events:none}

/* compare */
.cmp{overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.15fr);border-top:1px solid var(--line);font-size:16px}
.cmp-row:first-child{border-top:0}
.cmp-row>*{padding:17px 24px}
.cmp-row>:nth-child(1){font-weight:600}
.cmp-row>:nth-child(2){color:var(--ink-3)}
.cmp-row>:nth-child(3){background:rgba(63,111,245,.06);display:flex;gap:10px;align-items:baseline}
.cmp-row>:nth-child(3) svg{width:16px;height:16px;flex:none;color:var(--blue);transform:translateY(2px)}
.cmp-head{font-size:14px;color:var(--ink-3)}
.cmp-head>:nth-child(3){color:var(--blue);font-weight:600;font-size:16px;align-items:center}
.cmp-head>:nth-child(3) svg{width:15px;height:17px;transform:none}

/* devices */
.dev-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.dev-copy p{margin-top:18px;color:var(--ink-2);max-width:42ch;font-size:clamp(17px,1.35vw,19.5px)}
.os{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;font-size:14.5px}
.os li{padding:6px 14px;border-radius:999px;background:#fff;color:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.phones{position:relative;height:clamp(500px,46vw,620px);perspective:1500px}
.phone{position:absolute;top:50%;left:50%;width:clamp(190px,20vw,264px);border-radius:38px;padding:9px;background:var(--ink);box-shadow:0 60px 80px -40px rgba(31,58,140,.6),0 0 0 1px rgba(255,255,255,.08) inset;will-change:transform}
.phone img{border-radius:30px;width:100%}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:32%;height:20px;margin-left:-16%;border-radius:12px;background:var(--ink);z-index:2}

/* split (web teaser etc.) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:center}
.split p.lead{margin-top:18px;color:var(--ink-2);max-width:44ch;font-size:clamp(17px,1.35vw,19.5px)}
.ticks{margin-top:26px;max-width:480px}
.ticks li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks svg{width:16px;height:16px;flex:none;color:var(--blue);transform:translateY(2px)}
.sites{perspective:1600px}
.site-card{display:block;transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
.site-screen{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:radial-gradient(420px 260px at 85% 110%,rgba(120,161,255,.5),transparent 70%),linear-gradient(135deg,#0a0f22,#182457)}
.site-screen strong{font-size:clamp(32px,4.6vw,66px);font-weight:600;letter-spacing:-.04em;color:#fff;line-height:1}
.site-screen strong em{font-style:normal;color:var(--sky)}
.site-screen .open{position:absolute;left:22px;bottom:20px;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#fff;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);transition:background .2s}
.site-card:hover .open{background:var(--blue)}
.site-screen .open svg{width:14px;height:14px}
.site-screen .live{position:absolute;right:22px;top:20px;display:flex;align-items:center;gap:8px;font-size:14px;color:#cfd8f5}
.site-screen .live i{width:8px;height:8px;border-radius:50%;background:#49d17d;box-shadow:0 0 0 4px rgba(73,209,125,.22)}
.site-next{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:16px 20px;border-radius:var(--r-md);border:1.5px dashed #c5d2f3;color:var(--ink-2);transition:border-color .2s,color .2s}
.site-next:hover{border-color:var(--blue);color:var(--ink)}
.site-next b{font-weight:600;color:var(--blue)}

/* steps */
.step-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{padding:26px;counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#8fb0ff,var(--blue));color:#fff;font-weight:600;font-size:18px;box-shadow:0 10px 20px -8px rgba(63,111,245,.7)}
.step h3{margin-top:22px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;color:var(--ink-2);font-size:15.5px}

/* faq */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-size:18px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6ff5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:#d6e2ff}
.faq details p{padding:0 44px 22px 4px;color:var(--ink-2);max-width:68ch}

/* cta box */
.cta-sec{padding:0 0 clamp(72px,9vw,120px)}
.cta{position:relative;overflow:hidden;color:#fff;border-radius:var(--r-xl);background:radial-gradient(600px 300px at 20% 0%,rgba(255,255,255,.22),transparent 70%),linear-gradient(135deg,#6e99ff 0%,#4374fb 45%,#2a55e0 100%);padding:clamp(40px,6vw,76px);box-shadow:0 50px 90px -40px rgba(63,111,245,.8)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.cta h2{font-size:clamp(32px,4.4vw,60px);line-height:1;letter-spacing:-.04em;font-weight:600;max-width:13ch}
.cta p{margin-top:18px;font-size:clamp(17px,1.4vw,20px);max-width:40ch;color:#e6edff}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px}
.tile-scene{perspective:1200px;display:grid;place-items:center;min-height:280px}
.tile{position:relative;width:clamp(170px,19vw,240px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-22deg);will-change:transform}
.tile>*{position:absolute;inset:0}
.tile .slab{border-radius:23%;background:#2347c4}
.tile .top{border-radius:23%;background:linear-gradient(135deg,#a9c2ff,#4f7dfb 45%,#3464f0);box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.tile .glyph{transform:translateZ(40px);filter:drop-shadow(0 16px 14px rgba(15,35,110,.45))}
.tile .dot{transform:translateZ(70px);filter:drop-shadow(0 14px 12px rgba(15,35,110,.4))}
.tile .floor{inset:8% 4% -6% 4%;border-radius:30%;background:rgba(15,35,110,.6);filter:blur(30px);transform:translateZ(-80px)}

/* footer */
.foot{background:var(--night);color:#aab3d0;padding:56px 0 34px;font-size:15.5px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.foot .logo{color:#fff;font-size:21px}
.foot-top p{margin-top:14px;max-width:30ch}
.foot h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px;letter-spacing:.02em}
.foot li{margin-bottom:9px}
.foot a{transition:color .2s}.foot a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}

/* ===== sub page hero ===== */
.phero{padding:clamp(128px,15vw,188px) 0 clamp(48px,6vw,80px);background:radial-gradient(800px 520px at 85% -10%,rgba(120,161,255,.34),transparent 60%),radial-gradient(600px 420px at 0% 10%,rgba(156,203,255,.24),transparent 60%),linear-gradient(#fbfcff,var(--mist))}
.phero h1{font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.045em;font-weight:600;max-width:15ch;text-wrap:balance}
.phero p.lead{margin-top:20px;max-width:52ch;font-size:clamp(17.5px,1.5vw,21px);color:var(--ink-2)}
.phero .hero-cta{margin-top:28px}
.flow{display:flex;align-items:center;margin-top:36px;font-size:15px;color:var(--ink-2);flex-wrap:wrap;row-gap:10px}
.flow span{padding:7px 15px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.flow i{flex:0 0 clamp(14px,3vw,40px);height:1.5px;background:#c9d6f7}

/* module index + rows */
.subnav{position:sticky;top:68px;z-index:40;background:rgba(251,252,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:7px 14px;border-radius:999px;font-size:14.5px;color:var(--ink-2);transition:background .2s,color .2s}
.subnav a:hover{background:var(--mist-2)}
.subnav a.cur{background:var(--ink);color:#fff}
.mod{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(48px,6vw,84px) 0;scroll-margin-top:120px}
.mod+.mod{border-top:1px solid var(--line)}
.mod:nth-child(even){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.mod:nth-child(even) .mod-text{order:2}
.mod-n{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--blue);font-weight:600;margin-bottom:14px}
.mod-n i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--mist-2);font-style:normal}
.mod-n svg{width:18px;height:18px}
.mod h2{font-size:clamp(28px,3.1vw,42px);line-height:1.06;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.mod .lead{margin-top:12px;color:var(--ink-2);font-size:18px;max-width:44ch}
.mod-points{margin-top:22px}
.mod-points li{padding:13px 0;border-top:1px solid var(--line);font-size:16px;display:grid;gap:2px}
.mod-points li:last-child{border-bottom:1px solid var(--line)}
.mod-points b{font-weight:600}
.mod-points span{color:var(--ink-2)}
.mod-shot{perspective:1600px}
.mod-shot .browser{will-change:transform;transform-origin:50% 60%}

/* included grid */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat{padding:24px}
.feat .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#e9efff,#d9e4ff);color:var(--blue-deep);margin-bottom:20px}
.feat .ic svg{width:21px;height:21px}
.feat h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.feat p{margin-top:6px;color:var(--ink-2);font-size:15.5px}

/* book */
.book-wrap{max-width:1040px;margin-inline:auto}
.book-stage{position:relative}
.book{position:relative;aspect-ratio:16/9;perspective:2600px;perspective-origin:30% 50%;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book::before,.book::after{content:"";position:absolute;inset:0;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.book::before{transform:translate(10px,10px)}
.book::after{transform:translate(5px,5px);box-shadow:0 0 0 1px var(--line),0 50px 80px -40px rgba(31,58,140,.5)}
.sheet{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.55,.06,.2,1),opacity .28s linear;border-radius:10px;will-change:transform}
.sheet .face{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 0 0 1px rgba(10,15,34,.06)}
.sheet .face img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.sheet .back{transform:rotateY(180deg);background:linear-gradient(90deg,#dfe7fb,#f6f8ff 30%)}
.sheet .front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,34,.28),rgba(10,15,34,0) 9%,rgba(10,15,34,0) 60%,rgba(10,15,34,.22));opacity:0;transition:opacity .95s}
.sheet.turned{transform:rotateY(-128deg);opacity:0;pointer-events:none;transition:transform .95s cubic-bezier(.55,.06,.2,1),opacity .3s linear .62s}
.sheet.turned .front::after{opacity:1}
.book-ui{display:flex;align-items:center;gap:14px;margin-top:32px}
.rb{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,transform .2s var(--ease);flex:none}
.rb:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--blue);transform:scale(1.06)}
.rb:disabled{opacity:.4;cursor:default}
.rb svg{width:17px;height:17px}
.book-count{font-variant-numeric:tabular-nums;font-size:15.5px;color:var(--ink-2);min-width:60px;text-align:center}
.book-ui input[type=range]{flex:1;min-width:0;appearance:none;-webkit-appearance:none;height:28px;background:transparent;cursor:pointer}
.book-ui input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:#cfd9f2}
.book-ui input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#cfd9f2}
.book-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff,0 4px 10px rgba(63,111,245,.5)}
.book-ui input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff}
.book-tip{position:absolute;right:18px;bottom:16px;z-index:40;font-size:13.5px;padding:6px 12px;border-radius:999px;background:rgba(10,15,34,.78);color:#fff;pointer-events:none;transition:opacity .4s}
.book-tip.off{opacity:0}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.chan{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-top:14px;transition:transform .3s var(--ease),box-shadow .3s}
a.chan:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #c9d6f7,var(--sh-2)}
.chan .ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#e9efff,#d9e4ff);color:var(--blue-deep)}
.chan .ic svg{width:22px;height:22px}
.chan b{display:block;font-weight:600}
.chan span{color:var(--ink-2);font-size:15px}
.form{padding:clamp(22px,3vw,36px)}
.form h2{font-size:26px;font-weight:600;letter-spacing:-.025em}
.form>p{margin-top:6px;color:var(--ink-2);font-size:15.5px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.f{display:grid;gap:7px}
.f.full{grid-column:1/-1}
.f label,.f legend{font-size:14.5px;font-weight:500;padding:0}
.f input[type=text],.f select,.f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c849c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(63,111,245,.15)}
.f input.bad{border-color:#d6455d}
.f .err{font-size:13.5px;color:#c2334b}
fieldset.f{border:0;margin:0;padding:0;min-width:0}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{position:relative;cursor:pointer}
.checks input{position:absolute;opacity:0;inset:0}
.checks span{display:block;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--paper);font-weight:400;transition:all .2s}
.checks input:checked+span{background:var(--blue);color:#fff;box-shadow:none}
.checks input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.form-foot small{color:var(--ink-3);font-size:14px;flex:1;min-width:200px}
.ready{margin-top:22px;padding:20px;border-radius:var(--r-md);background:var(--mist);box-shadow:inset 0 0 0 1px #cfdcff}
.ready h3{font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px}
.ready h3 svg{width:20px;height:20px;color:var(--ok)}
.ready pre{margin:12px 0 0;padding:14px;border-radius:10px;background:#fff;font:inherit;font-size:15px;white-space:pre-wrap;color:var(--ink-2);max-height:220px;overflow:auto}
.ready .form-foot{margin-top:14px}


/* demo (iletişim) — bölünmüş tam ekran */
.demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:100vh;min-height:100svh;background:var(--mist)}
.demo-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(28px,3.4vw,52px);color:#fff;background:radial-gradient(520px 420px at 85% 0%,rgba(140,190,255,.75),transparent 70%),radial-gradient(460px 380px at 0% 100%,rgba(150,175,255,.55),transparent 70%),linear-gradient(160deg,#3f74ff 0%,#2c5bea 55%,#1c3fbe 100%)}
.demo-side .logo{color:#fff;font-size:24px}
@media (min-width:981px){.demo-side{position:sticky;top:0;height:100vh;height:100svh}}
.demo-pitch h1{font-size:clamp(30px,3.3vw,46px);line-height:1.06;letter-spacing:-.035em;font-weight:600;max-width:15ch;text-wrap:balance}
.demo-pitch p{margin-top:18px;max-width:40ch;font-size:clamp(16.5px,1.3vw,19px);color:#e3ebff}
.demo-pitch ul{margin-top:30px;display:grid;gap:14px}
.demo-pitch li{display:flex;align-items:center;gap:14px;font-weight:500}
.demo-pitch li i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.demo-pitch li svg{width:18px;height:18px}
.demo-chans{display:flex;flex-wrap:wrap;gap:8px}
.demo-chans a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:15px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .2s}
.demo-chans a:hover{background:rgba(255,255,255,.22)}
.demo-chans svg{width:16px;height:16px}
.demo-main{display:flex;flex-direction:column;align-items:center;padding:clamp(24px,3vw,44px) clamp(20px,4vw,64px) 56px}
.demo-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-2);margin-bottom:22px;transition:color .2s}
.demo-back:hover{color:var(--blue)}
.demo-back svg{width:17px;height:17px}
.demo-card{width:100%;max-width:560px;margin:auto 0;padding:clamp(24px,2.8vw,38px);border-radius:var(--r-xl);box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(31,58,140,.4)}
.demo-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#6f9bff,#2f5be6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 24px -10px rgba(63,111,245,.8);margin-bottom:18px}
.demo-ic svg{width:25px;height:25px}
.demo-card h2{font-size:clamp(25px,2.2vw,30px);font-weight:600;letter-spacing:-.03em}
.demo-card>p{margin-top:6px;color:var(--ink-2);font-size:15.5px}
.demo-card .fgrid{margin-top:22px;gap:14px}
.demo-card .f input[type=text],.demo-card .f select{background:#fff;height:48px;padding-block:0}
.slots span{border-radius:12px!important;font-weight:500!important;padding:10px 15px!important;background:#fff!important}
.slots input:checked+span{background:linear-gradient(180deg,#4d7bfa,#3765ee)!important;box-shadow:0 8px 16px -8px rgba(63,111,245,.8)!important}
.demo-go{width:100%;height:54px;margin-top:22px;border-radius:14px;font-size:17px}
.demo-note{margin-top:12px;text-align:center;font-size:14px;color:var(--ink-3)}
@media (max-width:980px){
  .demo{grid-template-columns:1fr}
  .demo-side{gap:28px}
  .demo-pitch ul{display:none}
  .demo-main{padding-top:24px}
}

/* responsive */
@media (max-width:980px){
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;padding:8px 24px 18px;background:#fbfcff;box-shadow:0 20px 30px -20px rgba(31,58,140,.3);display:none;font-size:18px}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line)}
  .nav-cta{margin-left:auto}
  .burger{display:grid}
  .probs{grid-template-columns:1fr 1fr}
  .b-7,.b-5,.b-4,.b-6{grid-column:span 12}
  .dev-grid,.split,.cta-grid,.contact,.mod,.mod:nth-child(even){grid-template-columns:1fr}
  .mod:nth-child(even) .mod-text{order:0}
  .step-row,.step-row.four,.grid-3{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .scroll-hint{display:none}
  .chip{font-size:13px;padding:9px 12px;border-radius:11px}.chip small{font-size:10px}
  .tile-scene{min-height:220px;order:-1;justify-items:start;padding-left:20px}
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row>:nth-child(1){grid-column:1/-1;padding-bottom:0}
  .cmp-row>:nth-child(3){background:none}
  .cmp-head>:nth-child(1){display:none}
  .flow{gap:8px}.flow i{display:none}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .probs,.step-row,.step-row.four,.grid-3,.fgrid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(42px,12.6vw,60px)}
  .browser{border-radius:10px}
  .browser-bar{height:22px;padding:0 9px;gap:5px}.browser-bar i{width:6px;height:6px}.browser-bar span{font-size:9px;margin-left:8px}
  .book-dl span{display:none}.book-dl{padding:0;width:46px}
  .nav-cta .btn{height:38px;padding:0 14px;font-size:14.5px}
  .cmp-row>*{padding:14px 16px}.cmp-row{font-size:15px}
  .foot-top{grid-template-columns:1fr}
  .faq summary{font-size:17px}
  .pl div{grid-template-columns:84px 1fr auto}
}
.rm .hero{height:auto;padding-bottom:72px}
.rm .stage{position:relative;height:auto;overflow:visible}
.rm .scene{position:relative;inset:auto;margin-top:56px}
.rm .chip,.rm .scroll-hint,.rm .hero-end{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* ===== v3: ikonlar, şekiller, yeni bölümler ===== */
h1,.head h2,.h2,.cta h2,.fx h2,.demo-pitch h1{font-weight:650}
h1 em,h2 em{font-style:normal;color:var(--blue)}
.dark h1 em,.dark h2 em,.fx.t-dark h2 em{color:var(--sky)}
.hero h1{max-width:13ch}
.rel{position:relative}
.rel>.wrap{position:relative;z-index:1}
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco i{position:absolute;display:block}
.deco .ring{width:440px;height:440px;border-radius:50%;border:1.5px solid rgba(63,111,245,.2);right:-140px;top:-120px}
.deco .ring::after{content:"";position:absolute;inset:56px;border-radius:50%;border:1.5px dashed rgba(63,111,245,.22)}
.deco .dots{width:190px;height:150px;left:3%;bottom:8%;background:radial-gradient(circle,rgba(63,111,245,.38) 1.6px,transparent 2px) 0 0/19px 19px}
.deco .blob{width:360px;height:360px;border-radius:50%;left:-120px;top:20%;background:radial-gradient(circle,rgba(120,161,255,.35),transparent 70%)}
.deco .plus{width:64px;height:64px;border-radius:18px;border:1.5px solid rgba(63,111,245,.3);right:9%;bottom:12%;transform:rotate(18deg)}
.deco .mark{right:-40px;bottom:-70px;width:340px;height:400px;opacity:.5}
.deco .mark svg{width:100%;height:100%}
.deco-b .ring{right:auto;left:-160px;top:auto;bottom:-160px}.deco-b .dots{left:auto;right:4%;bottom:auto;top:14%}.deco-b .blob{left:auto;right:-120px;top:30%}.deco-b .plus{right:auto;left:7%;bottom:auto;top:16%}.deco-b .mark{display:none}
.deco-c .ring,.deco-c .blob{display:none}.deco-c .dots{left:auto;right:3%;bottom:10%}.deco-c .plus{right:auto;left:4%;bottom:auto;top:12%}.deco-c .mark{display:none}
.dark .deco .ring,.dark .deco .ring::after,.dark .deco .plus,.cta .deco .ring,.cta .deco .ring::after,.cta .deco .plus{border-color:rgba(255,255,255,.2)}
.dark .deco .dots,.cta .deco .dots{background-image:radial-gradient(circle,rgba(255,255,255,.4) 1.6px,transparent 2px)}
.nav-links a.login{display:none}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--line);background:rgba(255,255,255,.7)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--blue-soft)}

/* whatsapp */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:0;height:58px;min-width:58px;padding:0 15.500px;border-radius:999px;background:#25d366;color:#fff;box-shadow:0 14px 30px -10px rgba(18,140,70,.7),0 2px 6px rgba(0,0,0,.12);transition:transform .3s var(--ease),gap .3s,padding .3s}
.wa-fab svg{width:27px;height:27px;flex:none}
.wa-fab span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:500;font-size:15.500px;transition:max-width .35s var(--ease)}
.wa-fab:hover{transform:translateY(-3px);gap:10px;padding:0 20px 0 16px}
.wa-fab:hover span{max-width:160px}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:ping 2.600s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
body[data-page="demo"] .nav,body[data-page="demo"] .foot,body[data-cur="demo"] .nav,body[data-cur="demo"] .foot{display:none}

/* referanslar */
.refs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ref{display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:var(--r-md);background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s}
a.ref:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #c9d6f7,var(--sh-2)}
.ref i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;font-style:normal;font-weight:700;font-size:14px}
.ref b{display:block;font-weight:700;letter-spacing:.08em;font-size:15.500px;line-height:1.2}
.ref small{color:var(--ink-3);font-size:13px}
.ref.empty{background:none;box-shadow:none;border:1.5px dashed #c5d2f3;color:var(--ink-3);font-size:15px}

/* demo bandı */
.demo-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(28px,4.500vw,60px);color:#fff;background:radial-gradient(520px 360px at 100% 0%,rgba(150,195,255,.7),transparent 70%),linear-gradient(150deg,#4477ff,#2c5bea 55%,#1d42c4);box-shadow:0 50px 90px -40px rgba(63,111,245,.8)}
.demo-band-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.150fr) minmax(0,.850fr);gap:clamp(28px,4vw,60px);align-items:center}
.demo-band .eyebrow{color:#d5e4ff}.demo-band .eyebrow::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.demo-band h2{font-size:clamp(30px,3.900vw,54px);line-height:1.030;letter-spacing:-.038em;font-weight:650;max-width:16ch;text-wrap:balance}
.demo-band>div>div>p{margin-top:14px;color:#e3ebff;font-size:clamp(17px,1.350vw,19.500px);max-width:44ch}
.how{display:grid;gap:10px;margin-top:26px;counter-reset:h}
.how li{display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);counter-increment:h}
.how li::before{content:counter(h);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--blue-deep);font-weight:700;font-size:15px}
.how b{font-weight:600}.how span{color:#dbe6ff;font-size:15px}
.key-card{background:#fff;color:var(--ink);border-radius:22px;padding:24px;box-shadow:0 40px 70px -30px rgba(10,20,80,.7);transform:rotate(2.500deg)}
.key-card .kc-h{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px}
.key-card .kc-h i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#6f9bff,#2f5be6);color:#fff}
.key-card .kc-h svg{width:21px;height:21px}
.kc-f{margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--mist);font-size:14.500px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.kc-f small{display:block;color:var(--ink-3);font-size:12px}
.kc-f b{font-weight:600;letter-spacing:.02em}
.kc-f svg{width:17px;height:17px;color:var(--blue)}
.kc-go{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;background:var(--blue);color:#fff;font-weight:500}
.kc-go svg{width:17px;height:17px}
.key-card .kc-note{margin-top:12px!important;font-size:13px!important;color:var(--ink-3)!important;text-align:center;max-width:none!important}

/* özellikler v3 */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tile-l{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);font-size:14px;font-weight:500;line-height:1.200;transition:transform .3s var(--ease),box-shadow .3s}
.tile-l:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--blue-soft),var(--sh-2)}
.tile-l i,.fx-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7da4ff,var(--blue));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px -8px rgba(63,111,245,.8)}
.tile-l svg,.fx-ic svg{width:20px;height:20px}
.fxs{display:grid;gap:22px;padding:clamp(40px,5vw,64px) 0 clamp(72px,9vw,120px)}
.fx{position:relative;display:grid;grid-template-columns:minmax(0,.860fr) minmax(0,1.140fr);gap:clamp(24px,4vw,56px);border-radius:var(--r-xl);overflow:hidden;padding:clamp(26px,3.600vw,52px) 0 0 clamp(26px,3.600vw,52px);min-height:500px}
.fx.flip{grid-template-columns:minmax(0,1.140fr) minmax(0,.860fr);padding:clamp(26px,3.600vw,52px) clamp(26px,3.600vw,52px) 0 0}
.fx.flip .fx-text{order:2}
.fx.t-light{background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.fx.t-mist{background:linear-gradient(150deg,#eaf0ff,#dfe8ff)}
.fx.t-dark{background:radial-gradient(600px 380px at 85% 10%,#2a43ad,transparent 70%),var(--night);color:#fff}
.fx.t-blue{background:radial-gradient(520px 360px at 100% 0%,rgba(150,195,255,.7),transparent 70%),linear-gradient(150deg,#4477ff,#2c5bea 55%,#1d42c4);color:#fff}
.fx-text{padding-bottom:clamp(26px,3.600vw,52px);position:relative;z-index:2}
.fx-tag{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15.500px;margin-bottom:22px}
.fx h2{font-size:clamp(28px,3.300vw,46px);line-height:1.040;letter-spacing:-.038em;text-wrap:balance}
.fx .lead{margin-top:12px;font-size:17.500px;color:var(--ink-2);max-width:40ch}
.fx.t-dark .lead,.fx.t-blue .lead{color:#d6e0ff}
.fx-pts{margin-top:24px;display:grid;gap:10px}
.fx-pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.500px;line-height:1.400}
.fx-pts svg{width:20px;height:20px;color:var(--blue);margin-top:1px}
.fx.t-dark .fx-pts svg,.fx.t-blue .fx-pts svg{color:var(--sky)}
.fx-pts b{font-weight:600;display:block}
.fx-pts span{color:var(--ink-2)}
.fx.t-dark .fx-pts span,.fx.t-blue .fx-pts span{color:#c3cfef}
.fx-vis{position:relative;align-self:end;perspective:1600px;min-height:320px}
.fx-vis .browser{width:122%;border-radius:16px 0 0 0;will-change:transform;transform-origin:0 100%}
.fx.flip .fx-vis .browser{margin-left:-22%;border-radius:0 16px 0 0;transform-origin:100% 100%}
.fx-vis .phone{position:absolute;left:-34px;bottom:-70px;top:auto;width:clamp(150px,15vw,200px);border-radius:30px;padding:7px;z-index:3}
.fx.flip .fx-vis .phone{left:auto;right:-34px}
.fx-vis .phone img{border-radius:24px}
.fx-vis .phone::before{top:14px;height:15px}
.call{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:10px 15px 10px 11px;border-radius:999px;background:#fff;color:var(--ink);font-weight:500;font-size:14.500px;white-space:nowrap;box-shadow:0 0 0 1px rgba(10,15,34,.05),0 18px 34px -14px rgba(31,58,140,.55);animation:bob 5s ease-in-out infinite}
.call i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mist-2);color:var(--blue-deep)}
.call svg{width:15px;height:15px}
.call.c1{right:8%;top:-16px}.call.c2{left:14%;top:38%;animation-delay:-2.500s}
.fx.flip .call.c1{right:auto;left:8%}.fx.flip .call.c2{left:auto;right:14%}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* indir */
.dl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dl{padding:24px;display:flex;flex-direction:column}
.dl .os-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--ink);color:#fff;margin-bottom:18px}
.dl .os-ic svg{width:26px;height:26px}
.dl h3{font-size:21px;font-weight:600;letter-spacing:-.020em}
.dl small{color:var(--ink-3);font-size:14px}
.dl ol{margin:16px 0 20px;display:grid;gap:9px;counter-reset:d;flex:1}
.dl ol li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:15px;color:var(--ink-2);counter-increment:d}
.dl ol li::before{content:counter(d);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mist-2);color:var(--blue-deep);font-size:12.500px;font-weight:600;margin-top:1px}
.dl .btn{width:100%}
.dl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}

/* iletişim v3 */
.chan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chan-grid .chan{margin-top:0;padding:22px;flex-direction:column;align-items:flex-start;gap:18px}
.chan-grid .chan b{font-size:19px}

/* yasal */
.legal{max-width:760px;margin-inline:auto}
.legal h2{font-size:24px;font-weight:600;letter-spacing:-.020em;margin:40px 0 10px}
.legal p,.legal li{color:var(--ink-2);margin-top:10px}
.legal ul{list-style:disc;padding-left:22px}
.legal .ph{background:#fff1d6;color:#8a5800;border-radius:6px;padding:1px 7px;font-weight:500}
.legal .note{padding:16px 18px;border-radius:var(--r-md);background:var(--mist);box-shadow:inset 0 0 0 1px #cfdcff;color:var(--ink-2);font-size:15.500px}

/* footer v3 */
.foot{position:relative;overflow:hidden;padding-top:0}
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:34px 0;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-cta b{color:#fff;font-size:clamp(21px,2.200vw,28px);font-weight:600;letter-spacing:-.025em}
.foot-cta div{display:flex;gap:10px;flex-wrap:wrap}
.foot-top{grid-template-columns:minmax(0,1.500fr) repeat(4,minmax(0,1fr))}
.foot .soc{display:flex;gap:8px;margin-top:18px}
.foot .soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;transition:background .2s}
.foot .soc a:hover{background:var(--blue)}
.foot .soc svg{width:18px;height:18px}
.foot-bot a{color:#fff;font-weight:500}
.foot-word{position:relative;margin-top:26px;font-size:clamp(70px,17vw,250px);font-weight:700;letter-spacing:-.060em;line-height:.760;text-align:center;white-space:nowrap;color:transparent;background:linear-gradient(rgba(120,161,255,.28),rgba(120,161,255,0) 85%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none}

@media (max-width:980px){
  .nav-cta .btn-line{display:none}
  .nav-links a.login{display:block}
  .demo-band-grid,.dl-hero{grid-template-columns:1fr}
  .key-card{transform:none;max-width:420px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx,.fx.flip{grid-template-columns:1fr;padding:26px 26px 0;min-height:0}
  .fx.flip .fx-text{order:0}
  .fx-text{padding-bottom:0}
  .fx-vis{margin-top:14px}
  .fx-vis .browser,.fx.flip .fx-vis .browser{width:112%;margin-left:0;border-radius:12px 0 0 0}
  .fx-vis .phone,.fx.flip .fx-vis .phone{left:auto;right:-6px;width:120px;bottom:-50px;border-radius:22px;padding:5px}
  .fx-vis .phone img{border-radius:18px}
  .call.c2{display:none}
  .dl-grid{grid-template-columns:1fr 1fr}
  .chan-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .deco .ring{width:300px;height:300px}.deco .mark{display:none}.deco .dots{display:none}
}
@media (max-width:600px){
  .dl-grid{grid-template-columns:1fr}
  .wa-fab{right:14px;bottom:14px;height:54px;min-width:54px;padding:0 13.500px}
  .foot-top{grid-template-columns:1fr 1fr}
}

/* ===== demo girişi, yönetim, demo paneli ===== */
body[data-page="demo-giris"] .nav,body[data-page="demo-giris"] .foot,body[data-page="demo-giris"] .wa-fab,body[data-cur="demo-giris"] .nav,body[data-cur="demo-giris"] .foot,body[data-cur="demo-giris"] .wa-fab{display:none}
.gate{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:radial-gradient(620px 460px at 88% 0%,rgba(140,190,255,.8),transparent 70%),radial-gradient(520px 420px at 0% 100%,rgba(150,175,255,.6),transparent 70%),linear-gradient(160deg,#3f74ff 0%,#2c5bea 55%,#1c3fbe 100%)}
.gate-card{position:relative;z-index:1;width:100%;max-width:440px;padding:clamp(26px,4vw,40px);border-radius:var(--r-xl);background:#fff;box-shadow:0 50px 100px -40px rgba(10,20,80,.75)}
.gate-card .logo{margin-bottom:26px}
.gate-card h1{font-size:30px;letter-spacing:-.030em;line-height:1.100}
.gate-card>p{margin-top:8px;color:var(--ink-2);font-size:16px}
.gate-card form{margin-top:22px;display:grid;gap:14px}
.gate-card .f input{height:56px;font-size:20px!important;letter-spacing:.080em;text-align:center;text-transform:uppercase;font-weight:600;background:var(--paper)}
.gate-card .f input::placeholder{letter-spacing:.040em;font-weight:400;color:#b3bbd0}
.gate-card .btn{width:100%;height:54px;border-radius:14px;font-size:17px}
.gate-msg{padding:11px 14px;border-radius:12px;background:#fdecef;color:#b3243e;font-size:15px}
.gate-foot{margin-top:20px;text-align:center;font-size:14.500px;color:var(--ink-3)}
.gate-foot a{color:var(--blue);font-weight:500}
.adm{max-width:980px;margin:0 auto;padding:40px 24px 80px}
.adm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.adm h1{font-size:30px;letter-spacing:-.030em}
.adm-new{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:12px;align-items:end;padding:22px}
.adm-new .f input,.adm-new .f select{height:48px;background:#fff}
.adm-list{margin-top:18px;overflow:hidden}
.adm-row{display:grid;grid-template-columns:minmax(0,1.300fr) 150px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);font-size:15px}
.adm-row:first-child{border-top:0}
.adm-row b{font-weight:600;display:block}
.adm-row small{color:var(--ink-3);font-size:13px}
.adm-row code{font:600 15px ui-monospace,Menlo,monospace;background:var(--mist);padding:5px 9px;border-radius:8px;letter-spacing:.040em}
.adm-row .acts{display:flex;gap:8px}
.adm-empty{padding:34px;text-align:center;color:var(--ink-3)}
.btn-danger{box-shadow:inset 0 0 0 1.500px #f2c4cc;color:#b3243e;background:#fff}
.btn-danger:hover{background:#fdecef}
@media (max-width:760px){.adm-new{grid-template-columns:1fr}.adm-row{grid-template-columns:1fr}}