/* ÇAP AI BI — "Akış" kartları: adım başına küçük hareketli sahne.
   Tamamı CSS; bölüm görünüre girince (.flow.in-view) çalışır, "hareketi azalt" tercihinde son kareyi gösterir. */
@property --n{syntax:'<integer>';initial-value:32;inherits:true}
.step-visual{--acc:#7f72ff;--acc2:#a59cff;--tile:#17152a;--tile2:#131220;--line:#2c2947;--mut:#3d3a5c;--txt:#e8e6f4;position:relative;margin-top:22px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#231f4a 0%,#12111f 48%,#0b0a13 100%);border:1px solid #2c2947;box-shadow:0 34px 60px -42px #7f72ffaa;container-type:inline-size;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.step-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:6.25cqw 6.25cqw;-webkit-mask-image:radial-gradient(80% 90% at 50% 40%,#000 25%,transparent 100%);mask-image:radial-gradient(80% 90% at 50% 40%,#000 25%,transparent 100%)}
.step:hover .step-visual{transform:translateY(-4px);box-shadow:0 44px 70px -40px #7f72ffcc}
.step-visual+h3{margin-top:28px}
.sv-scene{position:absolute;inset:0}
.step-visual *,.step-visual *:before,.step-visual *:after{animation-play-state:paused}
.flow.in-view .step-visual *,.flow.in-view .step-visual *:before,.flow.in-view .step-visual *:after{animation-play-state:running}
.step-visual .sv-scene{animation:svScene 9s linear infinite}

/* A — veri getir */
.sv-a .chip{position:absolute;top:6cqw;width:24cqw;height:8.4cqw;display:flex;align-items:center;gap:2cqw;padding:0 2.4cqw;border-radius:2.2cqw;background:#ffffff0d;border:1px solid #ffffff1c;color:var(--txt);font:600 max(9px,3cqw)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;box-sizing:border-box}
.sv-a .chip i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--c);box-shadow:0 0 2cqw var(--c)}
.sv-a .chip1{left:7cqw;--c:#7f72ff;animation:svaChip1 9s var(--ease) infinite}
.sv-a .chip2{left:38cqw;--c:#a59cff;animation:svaChip2 9s var(--ease) infinite}
.sv-a .chip3{left:69cqw;--c:#cfc9ff;animation:svaChip3 9s var(--ease) infinite}
.sv-a .d{position:absolute;top:15.5cqw;width:1.5cqw;height:1.5cqw;margin-left:-.75cqw;border-radius:50%;background:var(--acc2);box-shadow:0 0 1.6cqw var(--acc);opacity:0}
.sv-a .d1,.sv-a .d2{left:19cqw;--dx:8cqw}.sv-a .d3,.sv-a .d4{left:50cqw;--dx:0cqw}.sv-a .d5,.sv-a .d6{left:81cqw;--dx:-8cqw}
.sv-a .d1{animation:svaDot1 9s linear infinite}.sv-a .d2{animation:svaDot2 9s linear infinite}.sv-a .d3{animation:svaDot3 9s linear infinite}
.sv-a .d4{animation:svaDot4 9s linear infinite}.sv-a .d5{animation:svaDot5 9s linear infinite}.sv-a .d6{animation:svaDot6 9s linear infinite}
.sv-a .tbl{position:absolute;left:14cqw;top:38cqw;width:72cqw;height:20cqw;animation:svaTbl 9s var(--ease) infinite}
.sv-a .g{position:relative;height:100%;padding:2cqw;box-sizing:border-box;display:flex;flex-direction:column;gap:1cqw;overflow:hidden;background:#ffffff08;border:1px solid #ffffff14;border-radius:2cqw}
.sv-a .row{display:flex;gap:1.2cqw;align-items:center;height:3.25cqw;transform-origin:left center}
.sv-a .row b{display:block;height:1.9cqw;border-radius:1cqw;background:var(--mut);flex:1}
.sv-a .row b:nth-child(1){flex:1.4}.sv-a .row b:nth-child(4){flex:.8}
.sv-a .row.head b{background:#7f72ff8c}
.sv-a .row.r3 b:nth-child(4){background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sv-a .row.head{animation:svaRow1 9s var(--ease) infinite}.sv-a .row.r1{animation:svaRow2 9s var(--ease) infinite}
.sv-a .row.r2{animation:svaRow3 9s var(--ease) infinite}.sv-a .row.r3{animation:svaRow4 9s var(--ease) infinite}
.sv-a .sweep{position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(90deg,transparent,#a59cff55,transparent);opacity:0;animation:svaSweep 9s linear infinite}
.sv-a .badge{position:absolute;right:-2.2cqw;top:-2.6cqw;width:5.6cqw;height:5.6cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc2),var(--acc));box-shadow:0 0 3cqw #7f72ffaa;display:grid;place-items:center;animation:svaBadge 9s var(--ease) infinite}
.sv-a .badge:after{content:'';width:1.3cqw;height:2.4cqw;border:solid #0d0a24;border-width:0 .55cqw .55cqw 0;transform:rotate(45deg) translate(-.2cqw,-.2cqw)}

/* B — kendi dilinde sor */
.sv-b .ub{position:absolute;right:6cqw;top:5cqw;width:46cqw;height:9cqw;box-sizing:border-box;padding:0 3cqw;display:flex;align-items:center;border-radius:2.4cqw 2.4cqw .8cqw 2.4cqw;background:#7f72ff29;border:1px solid #7f72ff59;animation:svbUb 9s var(--ease) infinite}
.sv-b .ub i{display:block;width:100%;height:1.7cqw;border-radius:1cqw;background:linear-gradient(90deg,#e8e6f4,#cfc9ff);opacity:.85}
.sv-b .think{position:absolute;left:6cqw;top:17cqw;display:flex;gap:1.2cqw;padding:2.4cqw 2.8cqw;border-radius:2.4cqw;background:#ffffff0d;border:1px solid #ffffff17;opacity:0;animation:svbThink 9s linear infinite}
.sv-b .think i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--acc2);animation:svWave 1.1s ease-in-out infinite}
.sv-b .think i:nth-child(2){animation-delay:.15s}.sv-b .think i:nth-child(3){animation-delay:.3s}
.sv-b .ans{position:absolute;left:6cqw;top:16cqw;width:60cqw;height:27cqw;box-sizing:border-box;padding:2.6cqw 3cqw;border-radius:2.4cqw;background:linear-gradient(180deg,#1b1832,#141225);border:1px solid var(--line);animation:svbAns 9s var(--ease) infinite}
.sv-b .ah{display:flex;align-items:center;gap:1.8cqw}
.sv-b .ah s{width:3.2cqw;height:3.2cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--acc2) 38%,var(--acc));box-shadow:0 0 2.4cqw #7f72ffaa}
.sv-b .tl{display:flex;flex-direction:column;gap:1cqw;animation:svbTl 9s linear infinite}
.sv-b .tl u{display:block;height:1.2cqw;border-radius:1cqw;background:#e8e6f4;opacity:.7}
.sv-b .tl u:first-child{width:28cqw}.sv-b .tl u:last-child{width:17cqw;opacity:.38}
.sv-b .ab{position:absolute;left:3cqw;right:3cqw;bottom:2.6cqw;height:12cqw;display:flex;align-items:flex-end;gap:2cqw}
.sv-b .ab em{flex:1;border-radius:.8cqw .8cqw 0 0;background:#4a4665;transform-origin:bottom}
.sv-b .ab em:nth-child(1){height:40%;animation:svbBar1 9s var(--ease) infinite}.sv-b .ab em:nth-child(2){height:62%;animation:svbBar2 9s var(--ease) infinite}
.sv-b .ab em:nth-child(3){height:50%;animation:svbBar3 9s var(--ease) infinite}.sv-b .ab em:nth-child(4){height:78%;animation:svbBar4 9s var(--ease) infinite}
.sv-b .ab em:nth-child(5){height:100%;background:linear-gradient(180deg,var(--acc2),var(--acc));animation:svbBar5 9s var(--ease) infinite}
.sv-b .comp{position:absolute;left:6cqw;right:6cqw;bottom:5cqw;height:10cqw;border-radius:2.6cqw;background:#ffffff0a;border:1px solid #ffffff1f;animation:svbComp 9s var(--ease) infinite}
.sv-b .typed{position:absolute;left:3cqw;top:4.15cqw;width:55cqw;height:1.7cqw;border-radius:1cqw;background:linear-gradient(90deg,#e8e6f4,#cfc9ff);opacity:0;animation:svbTyped 9s steps(26) infinite}
.sv-b .caret{position:absolute;left:3cqw;top:2.8cqw;width:.6cqw;height:4.4cqw;opacity:0;animation:svbCaret 9s steps(26) infinite}
.sv-b .caret b{display:block;width:100%;height:100%;border-radius:.3cqw;background:var(--acc2);animation:svBlink 1s linear infinite}
.sv-b .send{position:absolute;right:2cqw;top:2cqw;width:6cqw;height:6cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc2),var(--acc));display:grid;place-items:center;animation:svbSend 9s var(--ease) infinite}
.sv-b .send:after{content:'';width:1.5cqw;height:1.5cqw;border:solid #0d0a24;border-width:.5cqw .5cqw 0 0;transform:rotate(-45deg) translate(-.15cqw,.15cqw)}

/* C — büyük resim */
.sv-c .t{position:absolute;box-sizing:border-box;overflow:hidden;border-radius:2cqw;background:linear-gradient(180deg,var(--tile),var(--tile2));border:1px solid var(--line)}
.sv-c .t:before{content:'';position:absolute;left:3.6cqw;top:3.2cqw;width:13cqw;height:1.2cqw;border-radius:1cqw;background:#e8e6f4;opacity:.5}
.sv-c .t1{left:5cqw;top:5cqw;width:50cqw;height:52.5cqw;animation:svcTile1 9s var(--ease) infinite}
.sv-c .t2{left:58cqw;top:5cqw;width:37cqw;height:24cqw;animation:svcTile2 9s var(--ease) infinite}
.sv-c .t3{left:58cqw;top:32cqw;width:17.5cqw;height:25.5cqw;animation:svcTile3 9s var(--ease) infinite}
.sv-c .t4{left:77.5cqw;top:32cqw;width:17.5cqw;height:25.5cqw;animation:svcTile4 9s var(--ease) infinite}
.sv-c .bars{position:absolute;left:4cqw;right:4cqw;top:9cqw;bottom:4cqw;display:flex;align-items:flex-end;gap:2.6cqw;border-bottom:1px solid #ffffff1f}
.sv-c .bars em{flex:1;border-radius:.8cqw .8cqw 0 0;background:#4a4665;transform-origin:bottom}
.sv-c .bars em:nth-child(1){height:38%;animation:svcBar1 9s var(--ease) infinite}.sv-c .bars em:nth-child(2){height:52%;animation:svcBar2 9s var(--ease) infinite}
.sv-c .bars em:nth-child(3){height:44%;animation:svcBar3 9s var(--ease) infinite}.sv-c .bars em:nth-child(4){height:68%;animation:svcBar4 9s var(--ease) infinite}
.sv-c .bars em:nth-child(5){height:84%;animation:svcBar5 9s var(--ease) infinite}
.sv-c .bars em:nth-child(6){height:100%;background:linear-gradient(180deg,var(--acc2),var(--acc));box-shadow:0 0 3cqw #7f72ff66;animation:svcBar6 9s var(--ease) infinite}
.sv-c .t2 svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.sv-c .ln{fill:none;stroke:var(--acc2);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:svcLine 9s ease-in-out infinite}
.sv-c .area{fill:url(#svg-none);fill:#7f72ff2b;animation:svcArea 9s linear infinite}
.sv-c .pt{position:absolute;left:91.9%;top:18.75%;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .7cqw #7f72ff66,0 0 3cqw var(--acc);transform:translate(-50%,-50%);animation:svcPt 9s var(--ease) infinite}
.sv-c .kpi{position:absolute;left:3.6cqw;top:9.5cqw;color:var(--txt);font:600 6.4cqw/1 'DM Sans',system-ui,sans-serif;letter-spacing:-.02em;animation:svcKpi 9s ease-out infinite}
.sv-c .kpi:before{content:'%' counter(n);counter-reset:n var(--n)}
.sv-c .kpi:after{content:'';position:absolute;left:0;top:9cqw;width:9cqw;height:1.2cqw;border-radius:1cqw;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sv-c .t4 svg{position:absolute;left:50%;top:56%;width:11.5cqw;height:11.5cqw;transform:translate(-50%,-50%) rotate(-90deg)}
.sv-c .tr{fill:none;stroke:#ffffff17;stroke-width:4}
.sv-c .dn{fill:none;stroke:var(--acc2);stroke-width:4;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:24.6;animation:svcDonut 9s ease-in-out infinite}
.sv-c .shine{position:absolute;top:-10cqw;bottom:-10cqw;left:0;width:22cqw;background:linear-gradient(100deg,transparent,#ffffff1f,transparent);transform:skewX(-14deg);opacity:0;pointer-events:none;animation:svcShine 9s linear infinite}

@keyframes svWave{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-1.1cqw);opacity:1}}
@keyframes svBlink{0%,49%{opacity:1}50%,100%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.step-visual *,.step-visual *:before,.step-visual *:after{animation:none!important}.step:hover .step-visual{transform:none}}
@media (max-width:700px){.step-visual+h3{margin-top:22px}.step-visual{margin-top:18px}}
@keyframes svScene{0%{opacity:0}4.444%,92.222%{opacity:1}98.889%,100%{opacity:0}}
@keyframes svaChip1{0%,3.889%{opacity:0;transform:translateY(-3cqw)}10.556%,100%{opacity:1;transform:none}}
@keyframes svaChip2{0%,5.444%{opacity:0;transform:translateY(-3cqw)}12.111%,100%{opacity:1;transform:none}}
@keyframes svaChip3{0%,7%{opacity:0;transform:translateY(-3cqw)}13.667%,100%{opacity:1;transform:none}}
@keyframes svaDot1{0%,12.778%{opacity:0;transform:translate(0,0)}15.556%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}26.111%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}29.444%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaDot2{0%,22.778%{opacity:0;transform:translate(0,0)}25.556%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}36.111%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}39.444%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaDot3{0%,14.111%{opacity:0;transform:translate(0,0)}16.889%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}27.444%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}30.778%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaDot4{0%,24.111%{opacity:0;transform:translate(0,0)}26.889%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}37.444%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}40.778%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaDot5{0%,15.444%{opacity:0;transform:translate(0,0)}18.222%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}28.778%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}32.111%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaDot6{0%,25.444%{opacity:0;transform:translate(0,0)}28.222%{opacity:1;transform:translate(calc(var(--dx)*.15),3cqw)}38.778%{opacity:1;transform:translate(calc(var(--dx)*.9),20cqw)}42.111%,100%{opacity:0;transform:translate(var(--dx),22cqw)}}
@keyframes svaTbl{0%,10%{opacity:0;transform:translateY(2cqw)}16.667%,100%{opacity:1;transform:none}}
@keyframes svaRow1{0%,24.444%{opacity:0;transform:scaleX(.5)}31.111%,100%{opacity:1;transform:none}}
@keyframes svaRow2{0%,30%{opacity:0;transform:scaleX(.5)}36.667%,100%{opacity:1;transform:none}}
@keyframes svaRow3{0%,35.556%{opacity:0;transform:scaleX(.5)}42.222%,100%{opacity:1;transform:none}}
@keyframes svaRow4{0%,41.111%{opacity:0;transform:scaleX(.5)}47.778%,100%{opacity:1;transform:none}}
@keyframes svaSweep{0%,48.889%{opacity:0;transform:translateX(-120%)}51.111%{opacity:1;transform:translateX(-120%)}68.889%{opacity:1;transform:translateX(420%)}70%,100%{opacity:0;transform:translateX(420%)}}
@keyframes svaBadge{0%,68.889%{opacity:0;transform:scale(0)}72.778%{opacity:1;transform:scale(1.25)}76.667%,100%{opacity:1;transform:scale(1)}}
@keyframes svbComp{0%,1.667%{opacity:0;transform:translateY(4cqw)}8.333%,100%{opacity:1;transform:none}}
@keyframes svbTyped{0%,10%{opacity:1;clip-path:inset(0 100% 0 0 round 1cqw)}30%,36.667%{opacity:1;clip-path:inset(0 0 0 0 round 1cqw)}39.444%,100%{opacity:0;clip-path:inset(0 0 0 0 round 1cqw)}}
@keyframes svbCaret{0%,8.889%{opacity:0;transform:translateX(0)}10%{opacity:1;transform:translateX(0)}30%,36.667%{opacity:1;transform:translateX(55cqw)}39.444%,100%{opacity:0;transform:translateX(55cqw)}}
@keyframes svbSend{0%,33.333%{transform:scale(1);box-shadow:0 0 0 0 #7f72ff00}35.556%{transform:scale(.86);box-shadow:0 0 0 0 #7f72ff00}38.333%{transform:scale(1.08);box-shadow:0 0 0 1.6cqw #7f72ff44}44.444%,100%{transform:scale(1);box-shadow:0 0 0 3.2cqw #7f72ff00}}
@keyframes svbUb{0%,38.889%{opacity:0;transform:translateY(2.5cqw) scale(.96)}45%,100%{opacity:1;transform:none}}
@keyframes svbThink{0%,45.556%{opacity:0}47.778%,56.667%{opacity:1}58.889%,100%{opacity:0}}
@keyframes svbAns{0%,57.778%{opacity:0;transform:translateY(2cqw)}64.444%,100%{opacity:1;transform:none}}
@keyframes svbTl{0%,62.222%{opacity:0}68.889%,100%{opacity:1}}
@keyframes svbBar1{0%,65.556%{transform:scaleY(0)}72.222%,100%{transform:scaleY(1)}}
@keyframes svbBar2{0%,66.667%{transform:scaleY(0)}73.333%,100%{transform:scaleY(1)}}
@keyframes svbBar3{0%,67.778%{transform:scaleY(0)}74.444%,100%{transform:scaleY(1)}}
@keyframes svbBar4{0%,68.889%{transform:scaleY(0)}75.556%,100%{transform:scaleY(1)}}
@keyframes svbBar5{0%,70%{transform:scaleY(0)}76.667%,100%{transform:scaleY(1)}}
@keyframes svcTile1{0%,4.444%{opacity:0;transform:translateY(3cqw) scale(.96);box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}11.111%{opacity:1;transform:none;box-shadow:0 0 0 .18cqw #a59cff,0 0 4cqw #7f72ff77}21.111%,100%{opacity:1;transform:none;box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}}
@keyframes svcTile2{0%,10%{opacity:0;transform:translateY(3cqw) scale(.96);box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}16.667%{opacity:1;transform:none;box-shadow:0 0 0 .18cqw #a59cff,0 0 4cqw #7f72ff77}26.667%,100%{opacity:1;transform:none;box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}}
@keyframes svcTile3{0%,15.556%{opacity:0;transform:translateY(3cqw) scale(.96);box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}22.222%{opacity:1;transform:none;box-shadow:0 0 0 .18cqw #a59cff,0 0 4cqw #7f72ff77}32.222%,100%{opacity:1;transform:none;box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}}
@keyframes svcTile4{0%,21.111%{opacity:0;transform:translateY(3cqw) scale(.96);box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}27.778%{opacity:1;transform:none;box-shadow:0 0 0 .18cqw #a59cff,0 0 4cqw #7f72ff77}37.778%,100%{opacity:1;transform:none;box-shadow:0 0 0 0 #a59cff00,0 0 0 0 #7f72ff00}}
@keyframes svcBar1{0%,13.333%{transform:scaleY(0)}20%,100%{transform:scaleY(1)}}
@keyframes svcBar2{0%,14.667%{transform:scaleY(0)}21.333%,100%{transform:scaleY(1)}}
@keyframes svcBar3{0%,16%{transform:scaleY(0)}22.667%,100%{transform:scaleY(1)}}
@keyframes svcBar4{0%,17.333%{transform:scaleY(0)}24%,100%{transform:scaleY(1)}}
@keyframes svcBar5{0%,18.667%{transform:scaleY(0)}25.333%,100%{transform:scaleY(1)}}
@keyframes svcBar6{0%,20%{transform:scaleY(0)}26.667%,100%{transform:scaleY(1)}}
@keyframes svcLine{0%,18.889%{stroke-dashoffset:1}34.444%,100%{stroke-dashoffset:0}}
@keyframes svcArea{0%,30%{opacity:0}37.778%,100%{opacity:1}}
@keyframes svcPt{0%,33.333%{opacity:0;transform:translate(-50%,-50%) scale(0)}36.667%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}40%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes svcKpi{0%,24.444%{--n:0}40%,100%{--n:32}}
@keyframes svcDonut{0%,28.889%{stroke-dashoffset:88}44.444%,100%{stroke-dashoffset:24.6}}
@keyframes svcShine{0%,52.222%{opacity:0;transform:translateX(-70cqw)}54.444%{opacity:1;transform:translateX(-70cqw)}73.333%{opacity:1;transform:translateX(160cqw)}74.444%,100%{opacity:0;transform:translateX(160cqw)}}