/* Hareket katmanı. Hepsi transform/opacity ağırlıklı, GPU dostu; hareket azaltma tercihine uyar.
   JS yoksa her şey durağan ve görünür kalır. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- genel: belirme, ilerleme çubuğu ---------- */
/* Belirme animasyon olarak yapılır (transition değil): bitince taban duruma döner, hover efektleri çalışır. */
.js .reveal{opacity:0}
.js .reveal.in{opacity:1;animation:rise .95s var(--ease) backwards}
.js .reveal.in.d1{animation-delay:.09s}.js .reveal.in.d2{animation-delay:.18s}.js .reveal.in.d3{animation-delay:.27s}.js .reveal.in.d4{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1}.js .reveal.in{animation:none}}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--teal-light);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:90;pointer-events:none}
@supports (animation-timeline:scroll()){
  .progress{transform:scaleX(0);animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}
.site-header{transition:box-shadow .3s var(--ease)}
.site-header.stuck{box-shadow:0 10px 30px -18px rgba(30,43,58,.35)}

/* ---------- kelime kelime başlık ---------- */
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .16em;margin:-.04em -.02em -.16em}
.js .split .wi{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js .split.in .wi{transform:none}
@media (prefers-reduced-motion:reduce){.js .split .wi{transform:none;transition:none}}

/* dönen sözcük */
.where{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em;margin:0 0 30px;font-size:1.3rem;color:var(--navy);font-weight:300}
.rot{display:inline-grid;overflow:hidden;height:1.55em;vertical-align:bottom;color:var(--teal-ink);font-weight:400;padding-right:.05em}
.rot span{grid-area:1/1;opacity:0;transform:translateY(105%);transition:transform .8s var(--ease),opacity .6s var(--ease)}
.rot span.on{opacity:1;transform:none}
.rot span.off{opacity:0;transform:translateY(-105%)}
.rot span:first-child{opacity:1;transform:none}
.js .rot span:first-child{opacity:0;transform:translateY(105%)}
.js .rot span.on{opacity:1;transform:none}

/* ---------- hero: imleç ışığı, parıltı ---------- */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--teal) 1.5px,transparent 2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(260px 260px at var(--mx,-999px) var(--my,-999px),#000,transparent 72%);mask-image:radial-gradient(260px 260px at var(--mx,-999px) var(--my,-999px),#000,transparent 72%);opacity:0;transition:opacity .5s}
.hero.hot::after{opacity:.75}
.hero.dots::before{display:none}
.hero .wrap{z-index:1}
.hero .glow{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-60px,40px,0) scale(1.08)}}

/* ---------- etkileşimli uygulama örneği ---------- */
.stage{--px:0;--py:0}
.win{transform:translate3d(calc(var(--px)*-12px),calc(var(--py)*-9px),0);transition:transform .5s var(--ease)}
.phone{transform:translate3d(calc(var(--px)*18px),calc(var(--py)*14px),0) rotate(5deg);transition:transform .5s var(--ease)}
.big-btn{border:0;font:inherit;font-size:1.02rem;font-weight:400;cursor:pointer;transition:background-color .35s var(--ease),transform .25s var(--ease),box-shadow .35s var(--ease);position:relative;overflow:hidden}
.big-btn:hover{transform:translateY(-2px)}
.big-btn:active{transform:translateY(1px)}
.big-btn .ring{width:22px;height:22px;display:none;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin1 .8s linear infinite}
@keyframes spin1{to{transform:rotate(360deg)}}
.stage[data-state="connecting"] .big-btn{background:#2F6FA7;cursor:progress}
.stage[data-state="connecting"] .big-btn svg{display:none}
.stage[data-state="connecting"] .big-btn .ring{display:block}
.stage[data-state="off"] .big-btn{background:var(--btn)}
.stage[data-state="connecting"] .pill{background:var(--m-conn-bg);color:var(--m-conn-ink)}
.stage[data-state="connecting"] .pill i{background:#2F6FA7}
.stage[data-state="off"] .pill{background:var(--m-off-bg);color:var(--m-off-ink)}
.stage[data-state="off"] .pill i{background:#8A97A5}
.stage[data-state="connecting"] .orb{background:#2F6FA7}
.stage[data-state="off"] .orb{background:#8A97A5}
.orb{transition:background-color .5s var(--ease),transform .6s var(--ease)}
.orb:hover{transform:scale(1.04)}
.orb:active{transform:scale(.97)}
.stage[data-state="connecting"] .orb{cursor:progress}
.stage[data-state="connecting"] .orb svg{animation:spin1 1s linear infinite;opacity:.8}
.stage[data-state="on"] .orb{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05)}}
.pill,.pill i{transition:background-color .4s var(--ease),color .4s var(--ease)}
.timer b{transition:opacity .3s var(--ease)}
.stage[data-state="off"] .timer b,.stage[data-state="connecting"] .timer b{opacity:.35}
.stage-hint{position:absolute;left:4px;bottom:-4px;font-size:.78rem;color:var(--page-muted);display:flex;align-items:center;gap:8px}
.stage-hint i{width:18px;height:18px;border-radius:50%;background:var(--teal);opacity:.2;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.9);opacity:0}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;background:var(--card);border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:400;box-shadow:var(--shadow-md);color:var(--navy);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.chip b{width:20px;height:20px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;flex:none}
.chip svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chip.m{right:2px;top:-10px}
.chip.i{right:-30px;top:44px}
.stage:not([data-state="on"]) .chip{opacity:0;transform:translateY(10px) scale(.92)}
.stage[data-state="on"] .chip{animation:bob 5s ease-in-out infinite}
.stage[data-state="on"] .chip.i{animation-delay:-2s}
.chip .bob{display:flex;align-items:center;gap:8px}
@keyframes bob{50%{transform:translateY(-7px)}}

/* ---------- kayan yazı bantları ---------- */
.marq{position:relative;padding:16px 0;overflow:hidden;background:var(--tint);border-block:1px solid var(--tint-line);user-select:none}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:min(14vw,140px);z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--tint),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--tint),transparent)}
.marq-row{display:flex;width:max-content;animation:marq var(--dur,60s) linear infinite;will-change:transform}
.marq-row.rev{animation-direction:reverse;animation-duration:72s}
.marq:hover .marq-row,.marq.off .marq-row{animation-play-state:paused}
.marq-set{display:flex;align-items:center;flex:none}
.marq-set span{padding:0 .7em;font-size:clamp(.92rem,1.25vw,1.05rem);font-weight:400;line-height:1.6;letter-spacing:-.015em;white-space:nowrap;color:var(--navy);transition:color .4s var(--ease)}
.marq-set span:hover{color:var(--teal-ink)}
.marq-set span.f{color:var(--teal-ink)}
.marq-set span.f:hover{color:var(--navy)}
.marq-set i{width:7px;height:7px;flex:none;border-radius:2px;background:var(--teal);transform:rotate(45deg);animation:diam 6s ease-in-out infinite}
.marq-row.rev .marq-set i{animation-delay:-3s}
@keyframes marq{to{transform:translate3d(calc(var(--w,50%) * -1),0,0)}}
@keyframes diam{50%{transform:rotate(225deg) scale(1.35);background:var(--teal-light)}}
@media (prefers-reduced-motion:reduce){.marq-row,.marq-set i{animation:none}.marq{overflow-x:auto}}

/* ---------- yol haritası (bölünmüş tünel) ---------- */
.route{margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 28px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.route h3{font-size:1.15rem;margin:0 0 6px}
.route .sub{color:var(--muted);margin:0 0 10px;font-size:1rem}
.route svg{width:100%;height:auto;display:block}
.route .v{display:none}
.route text{font-family:"Lexend",system-ui,sans-serif;fill:var(--navy)}
.route .node{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.route .node.us{stroke:var(--teal);stroke-width:2}
.route .lbl{font-size:17px;font-weight:400}
.route .small{font-size:13.5px;fill:var(--muted);font-weight:400}
.route .p{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.route .p.g{stroke:#9AA8B5}
.route .pk{fill:var(--teal)}
.route .pk.g{fill:#8795A3}
.route .ring1{fill:none;stroke:var(--teal);stroke-width:2;opacity:.5;transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){.route .ring1{animation:ping2 2.6s ease-out infinite}.route .p{animation:dash 1.4s linear infinite}}
@keyframes ping2{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-20}}
@media (max-width:700px){.route .h{display:none}.route .v{display:block;max-width:360px;margin:0 auto}.route{padding:28px 16px 18px}}

/* ---------- ışık ve eğilme ---------- */
.fx{position:relative;isolation:isolate}
.fx::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(14,156,139,.13),transparent 62%);opacity:0;transition:opacity .35s var(--ease);z-index:-1}
.fx:hover::before{opacity:1}
.tile .ico{transition:transform .5s var(--ease),background-color .4s var(--ease),color .4s var(--ease)}
.tile:hover .ico{transform:translateY(-4px) rotate(-6deg) scale(1.08);background:var(--btn);color:#fff;border-color:var(--btn)}

.tilt{transition:transform .25s var(--ease);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.use .art svg{transition:transform .6s var(--ease)}
.use:hover .art svg{transform:scale(1.06)}
.use:hover h3{color:var(--teal-ink)}

/* animasyonlu çizimler */
@media (prefers-reduced-motion:no-preference){
  .art .rays{transform-origin:96px 40px;animation:rot 22s linear infinite}
  .use:hover .art .rays{animation-duration:5s}
  .art .wave1{animation:slide 5s ease-in-out infinite alternate}
  .art .wave2{animation:slide 6.5s ease-in-out infinite alternate-reverse}
  .art .star{transform-box:fill-box;transform-origin:center;animation:twinkle 3.4s ease-in-out infinite}
  .art .star.s2{animation-delay:-1.4s}
  .art .winlit{animation:flick 5s steps(1) infinite}
  .art .moon{transform-box:fill-box;transform-origin:center;animation:sway 8s ease-in-out infinite alternate}
  .art .crossp{transform-box:fill-box;transform-origin:center;animation:cpulse 3s ease-in-out infinite}
}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes slide{to{transform:translateX(-14px)}}
@keyframes twinkle{50%{transform:scale(.45) rotate(45deg);opacity:.5}}
@keyframes flick{0%,60%{opacity:1}62%,66%{opacity:.35}68%,100%{opacity:1}}
@keyframes sway{to{transform:rotate(-10deg)}}
@keyframes cpulse{50%{transform:scale(1.25)}}

/* ---------- düğmeler: parlama ve manyetik ---------- */
.btn{position:relative;overflow:hidden;transform:translate(var(--tx,0px),var(--ty,0px))}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .8s var(--ease);pointer-events:none}
.btn:hover::after{left:140%}
.btn:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px))}
.btn:active{transform:translate(var(--tx,0px),1px)}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover svg{transform:scale(1.15) rotate(-6deg)}

/* gezinme alt çizgisi */
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:not(.btn):hover{background:transparent}

/* ---------- karşılaştırma ---------- */
.cmp tbody tr{transition:background-color .35s var(--ease)}
.cmp tbody tr:hover{background:rgba(255,255,255,.05)}
.cmp td.us{position:relative;overflow:hidden}
.cmp td.us::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(47,195,174,.22),transparent 70%);transform:translateX(-120%);pointer-events:none}
.cmp-wrap.in td.us::after{animation:sweep 1.4s var(--ease) both;animation-delay:calc(var(--r,0)*.18s + .5s)}
@keyframes sweep{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.cmp-wrap.in td.us::after{animation:none}}

/* ---------- fiyatlar ---------- */
.price.best{isolation:isolate}
.price.best::before{content:"";position:absolute;inset:-2px;border-radius:24px;z-index:-2;background:conic-gradient(from var(--ang),transparent 0 62%,var(--teal-light) 82%,transparent 100%)}
.price.best::after{content:"";position:absolute;inset:0;border-radius:22px;background:var(--ink-bg);z-index:-1}
@media (prefers-reduced-motion:no-preference){.price.best::before{animation:spinb 6s linear infinite}}
@keyframes spinb{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){.price.best::before{background:var(--teal-light)}}
.price .amount{font-variant-numeric:tabular-nums}

/* ---------- iletişim ---------- */
.cta{--mx:50%;--my:0%}
.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(47,195,174,.18),transparent 65%)}

/* ---------- alt bilgi dev yazı ---------- */
.giant{margin:28px 0 -3.2vw;text-align:center;font-size:clamp(4rem,19vw,17rem);font-weight:400;letter-spacing:-.055em;line-height:.9;color:var(--ghost);white-space:nowrap;user-select:none;transition:color .6s var(--ease);overflow:hidden}
.giant:hover{color:rgba(14,156,139,.2)}
.site-footer{overflow:hidden}

/* ---------- küçük ekran ---------- */
@media (max-width:900px){
  .chip.m{right:4px;top:-18px}.chip.i{display:none}
  .where{font-size:1.15rem}
}
@media (max-width:640px){
  .chip{display:none}
  .marq{padding:13px 0}
  .giant{margin-bottom:-2vw}
}
@media (hover:none){.tilt{transform:none!important}.fx::before{display:none}}

.amount b{font-weight:600;font:inherit;letter-spacing:inherit}

/* sakin mod (kullanıcı animasyonları durdurur) */
.foot-tools{margin-top:18px}
.calm-btn{font:inherit;font-size:.92rem;color:var(--navy);background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.calm-btn:hover{border-color:var(--navy);background:var(--bg-soft)}
.calm-btn[aria-pressed="true"]{background:var(--ink-bg);color:#fff;border-color:var(--ink-bg)}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important}
html.calm .marq{overflow-x:auto}
html.calm .js .reveal.in{animation:none}

/* menü bağlantıları büyük harf (lang=tr: i→İ, ı→I doğru çevrilir) */
.nav a:not(.btn){text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;font-weight:400}
@media (max-width:900px){.nav a:not(.btn){font-size:.95rem}}
.nav a{white-space:nowrap}
/* büyük harfli menü geniş yer kaplar: 1060 px altında açılır menüye geç */
@media (max-width:1060px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 24px 22px;gap:2px;box-shadow:var(--shadow-md)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:15px 12px;font-size:.95rem}
  .nav .btn{margin:10px 0 0}
  .menu-btn{display:inline-flex;align-items:center}
  html:not(.js) .nav{position:static;flex-direction:row;flex-wrap:wrap;border:0;padding:0 20px 12px;box-shadow:none}
  html:not(.js) .menu-btn{display:none}
}

/* =====================================================================
   Nasıl çalışır: kaydırınca dolan zaman çizgisi + her adımda canlı sahne
   Taban (animasyonsuz) durum = sahnelerin son hali; döngüler yalnızca hareket ekler.
   ===================================================================== */
.how{overflow:hidden}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;position:relative}
.how-step{display:flex;flex-direction:column;align-items:stretch;min-width:0}
/* düğümler ve bağlantı çizgisi */
.how-node{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.how-node b{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--teal);color:var(--teal-ink);font-size:1.15rem;font-weight:400;box-shadow:0 0 0 6px var(--bg-soft)}
.how-node::after{content:"";display:block;width:2px;height:22px;background:var(--line-strong)}
.how-steps::before,.how-steps::after{content:"";position:absolute;top:23px;left:calc((100% - 56px) / 6);right:calc((100% - 56px) / 6);height:2px;border-radius:2px}
.how-steps::before{background:var(--line-strong)}
.how-steps::after{background:var(--teal);transform-origin:0 50%}
.js .how-steps::after{transform:scaleX(0)}
.js .how-steps.in::after{animation:how-x 1.9s var(--ease) .35s forwards}
@keyframes how-x{to{transform:scaleX(1)}}
.js .how-node b{opacity:0;transform:scale(.4)}
.js .how-steps.in .how-node b{animation:how-pop .7s var(--ease) both}
.js .how-steps.in .how-step:nth-child(1) .how-node b{animation-delay:.25s}
.js .how-steps.in .how-step:nth-child(2) .how-node b{animation-delay:1.15s}
.js .how-steps.in .how-step:nth-child(3) .how-node b{animation-delay:2.05s}
@keyframes how-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
.js .how-steps.in .how-node b{opacity:1;transform:none}
/* kart */
.how-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);flex:1;display:flex;flex-direction:column}
.how-body{padding:26px 28px 30px}
.how-body h3{margin-bottom:.45em}
.how-body p{margin:0;color:var(--muted)}
.scene{position:relative;height:200px;background:var(--tint);border-bottom:1px solid var(--tint-line);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:20px 22px;gap:10px}

/* sahne 1: yazışma */
.bub{max-width:84%;padding:10px 14px;border-radius:16px;font-size:.86rem;line-height:1.42;font-weight:400}
.bub.out{align-self:flex-end;background:var(--m-pill-bg);color:var(--m-pill-ink);border-bottom-right-radius:5px}
.slot{position:relative;align-self:flex-start;max-width:88%}
.bub.in{background:var(--card);border:1px solid var(--line);color:var(--navy);border-bottom-left-radius:5px;max-width:none}
.bub.typing{position:absolute;left:0;top:0;display:flex;gap:5px;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px;opacity:0}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:var(--m-sub)}
@media (prefers-reduced-motion:no-preference){
  .bub.out{animation:ch-out 10s ease-in-out infinite}
  .bub.typing{animation:ch-typing 10s ease-in-out infinite}
  .bub.typing i{animation:ch-dot 1s ease-in-out infinite}
  .bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
  .bub.in{animation:ch-in 10s ease-in-out infinite}
}
@keyframes ch-out{0%,3%{opacity:0;transform:translateY(14px) scale(.96)}9%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes ch-typing{0%,16%{opacity:0;transform:translateY(8px)}20%,38%{opacity:1;transform:none}41%,100%{opacity:0}}
@keyframes ch-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes ch-in{0%,40%{opacity:0;transform:translateY(12px) scale(.96)}47%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}

/* sahne 2: IP tanımlama */
.sc-ip{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:20px 18px}
.ipchip{flex:none;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--teal);color:var(--navy);font-size:.88rem;font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.ip-rail{position:relative;flex:1;height:2px;min-width:20px;background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 12px);opacity:.7}
.ip-rail i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--teal);opacity:0}
.ip-rail u{display:none}
.ip-to{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:92px;height:92px;border-radius:18px;background:var(--card);border:1px solid var(--line-strong);color:var(--navy)}
.ip-to strong{font-size:1.05rem;font-weight:500;letter-spacing:.04em}
.ip-to small{font-size:.7rem;color:var(--muted)}
.ip-ok{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--tint)}
.ip-ok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .ip-rail i{animation:ip-go 6s ease-in-out infinite}
  .ip-to{animation:ip-box 6s ease-in-out infinite}
  .ip-ok{animation:ip-ok 6s ease-in-out infinite}
  .ipchip{animation:ip-chip 6s ease-in-out infinite}
}
@keyframes ip-go{0%,6%{left:0;opacity:0}12%{opacity:1}52%{left:calc(100% - 10px);opacity:1}56%,100%{left:calc(100% - 10px);opacity:0}}
@keyframes ip-chip{0%,4%{transform:scale(1)}8%{transform:scale(1.06)}14%,100%{transform:scale(1)}}
@keyframes ip-box{0%,52%{border-color:var(--line-strong);transform:scale(1)}58%{border-color:var(--teal);transform:scale(1.06)}66%,92%{border-color:var(--teal);transform:scale(1)}100%{border-color:var(--line-strong)}}
@keyframes ip-ok{0%,56%{opacity:0;transform:scale(.2) rotate(-40deg)}64%{opacity:1;transform:scale(1.25)}70%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.6)}}

/* sahne 3: bağlan */
.sc-conn{align-items:center;justify-content:center;gap:16px}
.cb{position:relative;width:88px;height:88px}
.cb-btn{position:absolute;inset:0;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.cb-btn svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ok);opacity:0}
.cb-state{position:relative;height:30px;width:140px;text-align:center}
.cb-state span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 16px;border-radius:999px;font-size:.88rem}
.s-on{background:var(--m-pill-bg);color:var(--m-pill-ink)}
.s-off{background:var(--m-off-bg);color:var(--m-off-ink);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cb-btn{animation:cn-btn 8s ease-in-out infinite}
  .cb-ring{animation:cn-ring 8s ease-out infinite}
  .s-on{animation:cn-on 8s ease-in-out infinite}
  .s-off{animation:cn-off 8s ease-in-out infinite}
}
@keyframes cn-btn{0%,24%{background:#8A97A5;transform:scale(1)}28%{transform:scale(.9)}34%{transform:scale(1.04);background:#2F6FA7}40%{transform:scale(1)}46%,92%{background:var(--ok)}100%{background:#8A97A5}}
@keyframes cn-ring{0%,30%{opacity:0;transform:scale(1)}36%{opacity:.6}62%,100%{opacity:0;transform:scale(1.7)}}
@keyframes cn-on{0%,45%{opacity:0;transform:translateY(8px)}51%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes cn-off{0%,5%{opacity:0}10%,40%{opacity:1}46%,100%{opacity:0}}

/* ekran dışındayken dursun */
.how-steps.off .scene *,.how-steps.off .scene{animation-play-state:paused!important}

/* mobil: dikey zaman çizgisi */
@media (max-width:900px){
  .how-steps{grid-template-columns:1fr;row-gap:30px}
  .how-step{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
  .how-node{align-items:flex-start}
  .how-node::after{display:none}
  .how-steps::before,.how-steps::after{top:48px;bottom:48px;left:23px;right:auto;width:2px;height:auto}
  .how-steps::after{transform-origin:50% 0}
  .js .how-steps::after{transform:scaleY(0)}
  .js .how-steps.in::after{animation:how-y 1.9s var(--ease) .35s forwards}
  .scene{height:184px}
}
@keyframes how-y{to{transform:scaleY(1)}}
@media (max-width:480px){.how-body{padding:22px 22px 26px}.scene{padding:18px 16px}.sc-ip{padding:18px 12px}.ip-to{width:84px;height:84px}.ipchip{font-size:.8rem;padding:9px 10px}}
@media (prefers-reduced-motion:reduce){.js .how-steps::after{transform:none;animation:none!important}.js .how-node b{opacity:1;transform:none;animation:none!important}}
html.calm .how-steps::after{transform:none!important}
html.calm .js .how-node b,html.calm .how-node b{opacity:1;transform:none}

/* Avantajlar: başlık ile metin net ayrılsın (başlık koyu ve orta kalınlıkta, metin ince ve soluk) */
.tile h3{font-size:1.32rem;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--navy);margin-bottom:.55em}
.tile p{font-weight:300;font-size:1rem;line-height:1.7;color:var(--muted)}

/* Avantajlar: rakam öne çıkan kartlar */
.tile .stat{display:flex;align-items:center;gap:14px;margin-bottom:22px;min-height:50px}
.tile .stat b{font-size:2.6rem;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--teal-ink)}
.tile .stat span{font-size:.85rem;line-height:1.35;font-weight:400;color:var(--muted);padding-left:14px;border-left:2px solid var(--tint-line)}
.tile.tile-stat{background:var(--tint);border-color:var(--tint-line)}
.tile.tile-stat p{color:var(--navy)}
.tile.tile-dark{background:var(--ink-bg);border-color:var(--ink-bg);color:#fff}
.tile.tile-dark .stat b{color:#fff}
.tile.tile-dark .stat span{color:var(--on-dark);border-left-color:rgba(255,255,255,.22)}
.tile.tile-dark h3{color:#fff}
.tile.tile-dark p{color:var(--on-dark)}

/* Kullanım: sade kartlar, büyük simge, bağlam etiketi */
.use{padding:28px 28px 30px;display:flex;flex-direction:column;position:relative}
.use::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--teal),var(--teal-light));opacity:0;transition:opacity .4s var(--ease)}
.use:hover::after{opacity:1}
.use .uhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.use .uicon{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:var(--teal-ink);background:linear-gradient(145deg,var(--tint),#fff);border:1px solid var(--tint-line);box-shadow:0 8px 18px -10px rgba(10,123,110,.5)}
.use .uicon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.use .utag{font-size:.74rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-ink);background:var(--tint);border:1px solid var(--tint-line);border-radius:999px;padding:5px 11px}
.use h3{font-size:1.4rem;font-weight:500;letter-spacing:-.015em;color:var(--navy);margin:0 0 .5em}
.use:hover .art svg{transform:none}

/* Kullanım: yuvarlak merkez, 6 yöne akan oklar, isimler sırayla yanar */
.where{max-width:660px;margin:0 auto;padding:0}
.where svg{width:100%;height:auto;display:block;overflow:visible}
.where text{font-family:"Lexend",system-ui,sans-serif}
.where .orb{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:2 10;stroke-linecap:round}
.where .wh{fill:url(#hg);filter:drop-shadow(0 18px 28px rgba(10,123,110,.35))}
.where .wt{fill:#fff;font-size:24px;font-weight:500;letter-spacing:-.01em}
.where .ring{fill:none;stroke:var(--teal);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:wring 4s ease-out infinite}
.where .ring.r2{animation-delay:2s}
@keyframes wring{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.7);opacity:0}}
.where .wa{stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 9;fill:none;animation:wflow 1.2s linear infinite,wseq 9s ease-in-out infinite;animation-delay:0s,calc(var(--i)*1.5s)}
@keyframes wflow{to{stroke-dashoffset:-16}}
@keyframes wseq{0%,16%,100%{opacity:1}22%,92%{opacity:.3}}
.where .ah{fill:var(--teal)}
.where .wn circle{fill:var(--card);stroke:var(--tint-line);stroke-width:2;filter:drop-shadow(0 10px 18px rgba(30,43,58,.12));animation:wlit 9s ease-in-out infinite;animation-delay:calc(var(--i)*1.5s)}
.where .wl{fill:var(--navy);font-size:18px;font-weight:500;animation:wlitt 9s ease-in-out infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes wlit{0%,16%{fill:var(--btn);stroke:var(--btn)}22%,100%{fill:var(--card);stroke:var(--tint-line)}}
@keyframes wlitt{0%,16%{fill:#fff}22%,100%{fill:var(--navy)}}
@media (prefers-reduced-motion:reduce){.where .ring,.where .wa,.where .wn circle,.where .wl{animation:none}.where .ring{opacity:0}}

.foot-tools .copy{margin:0;font-size:.92rem;color:var(--muted)}