/* Hero A · canlı ürün demosu */
.ha-stage{position:relative;padding:40px 0 88px}
.ha-cres{position:absolute;width:640px;height:640px;left:50%;top:50%;transform:translate(-42%,-50%);max-width:none;z-index:0;pointer-events:none}
.ha-app{position:relative;z-index:2;overflow:hidden;max-width:520px;margin:0 auto}
.ha-app .win-bar{background:#fff}
.ha-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--w-green)}
.ha-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:wBlink 1.6s ease-in-out infinite}
.ha-body{padding:20px 22px 22px}
.ha-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ha-kpi{background:var(--w-bg);border-radius:12px;padding:12px}
.ha-kpi small{display:block;font-size:11.5px;font-weight:600;color:var(--w-ink3);line-height:1.3}
.ha-kpi b{display:block;font-size:21px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;transition:color .4s}
.ha-kpi b.bump{color:var(--w-green)}
.ha-req{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;border:1px solid #EEF0F6;border-radius:14px;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.ha-req.out{opacity:0;translate:0 -12px}
.ha-req.pre{opacity:0;translate:0 12px;transition:none}
.ha-req .ib{width:44px;height:44px;border-radius:12px}
.ha-steps{margin-top:18px}
.ha-step{display:flex;gap:14px}
.ha-rail{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0}
.ha-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--w-bg);border:2px dashed #B7BFD8;transition:background-color .3s,border-color .3s}
.ha-dot .lucide{width:14px;height:14px;opacity:0;scale:.4;transition:opacity .3s,scale .3s var(--ease)}
.ha-step.active .ha-dot{background:#fff;border:2px solid var(--w-blue);animation:wPulse 1.8s ease-out infinite}
.ha-step.active .ha-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--w-blue)}
.ha-step.done .ha-dot{background:var(--w-green);border:2px solid var(--w-green);color:#fff}
.ha-step.done .ha-dot .lucide{opacity:1;scale:1}
.ha-line{flex:1;width:2px;min-height:26px;background:#E6E9F2;position:relative;overflow:hidden}
.ha-line i{position:absolute;inset:0;background:var(--w-green);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.ha-step.done .ha-line i{transform:scaleY(1)}
.ha-sb{flex:1;min-width:0;padding-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ha-step:last-child .ha-sb{padding-bottom:0}
.ha-sb b{display:block;font-size:15px;font-weight:600;line-height:1.35;transition:color .3s}
.ha-step.wait .ha-sb b{color:var(--w-ink3)}
.ha-sb small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--w-ink3);margin-top:2px;min-height:19px}
.typing{display:inline-flex;gap:3px}
.typing i{width:4px;height:4px;border-radius:50%;background:var(--w-blue);animation:haType 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes haType{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
.ha-pill{transition:background-color .3s,color .3s}
.ha-cycle{height:3px;background:#EEF0F6;border-radius:3px;margin-top:20px;overflow:hidden}
.ha-cycle i{display:block;height:100%;width:0;background:var(--w-navy);border-radius:3px}
.ha-toast{position:absolute;z-index:4;right:-12px;top:12px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(26,48,135,.08),0 12px 32px rgba(26,48,135,.14);padding:12px 18px 12px 12px;display:flex;gap:12px;align-items:center;opacity:0;translate:0 -12px;scale:.96;transition:opacity .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease);pointer-events:none}
.ha-toast.show{opacity:1;translate:0 0;scale:1}
.ha-toast .ib{width:38px;height:38px}
.ha-toast b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.ha-toast small{display:block;font-size:12.5px;color:var(--w-ink3);margin-top:1px}
.ha-agent{position:absolute;z-index:3;left:-16px;bottom:8px;background:var(--w-navy);color:#fff;border-radius:16px;padding:12px 16px 12px 12px;display:flex;gap:12px;align-items:center;max-width:290px;box-shadow:0 12px 32px rgba(26,48,135,.22);opacity:0;translate:0 12px;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.ha-agent.show{opacity:1;translate:0 0}
.ha-agent .ib{width:38px;height:38px;background:var(--w-ice)}
.ha-agent small{display:block;font-size:11.5px;font-weight:700;color:var(--w-ice);letter-spacing:.04em}
.ha-agent span.t{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;line-height:1.35;margin-top:2px}
.ha-agent .typing i{background:var(--w-ice)}
.ha-spark{position:absolute;z-index:3;right:-8px;bottom:-4px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--w-shadow);width:176px;animation:wFloat 7s ease-in-out infinite}
.ha-spark small{display:block;font-size:11.5px;font-weight:600;color:var(--w-ink3)}
.ha-spark b{display:block;font-size:17px;font-weight:700;color:var(--w-green);margin-top:2px}
.ha-spark svg{display:block;width:100%;height:36px;margin-top:6px;overflow:visible}
.ha-spark path{stroke-dasharray:220;stroke-dashoffset:220;animation:haDraw 1.6s .6s var(--ease) forwards}
.ha-spark circle{opacity:0;animation:haFade .3s 2.1s forwards}
@keyframes haDraw{to{stroke-dashoffset:0}}
@keyframes haFade{to{opacity:1}}
@media(max-width:991.98px){.ha-stage{max-width:560px;margin:0 auto;padding:56px 0 72px}.ha-cres{width:520px;height:520px;transform:translate(-50%,-50%)}}
@media(max-width:575.98px){
  .ha-stage{padding:52px 0 76px}
  .ha-cres{width:400px;height:400px}
  .ha-body{padding:16px}
  .ha-kpi{padding:10px}.ha-kpi b{font-size:17px}.ha-kpi small{font-size:10.5px}
  .ha-req{padding:12px;gap:10px}.ha-req .ib{width:38px;height:38px}
  .ha-toast{right:0;top:0;padding:10px 14px 10px 10px}.ha-toast .ib{width:32px;height:32px}.ha-toast b{font-size:13.5px}
  .ha-agent{left:0;bottom:0;max-width:240px;padding:10px 12px 10px 10px}.ha-agent .ib{width:32px;height:32px}.ha-agent span.t{font-size:12.5px}
  .ha-spark{display:none}
}
@media (prefers-reduced-motion:reduce){.ha-spark path{stroke-dashoffset:0}.ha-spark circle{opacity:1}}