/* Disqon landing — "Satu nadi". Butuh css/base.css (token & komponen dasar). */
/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--on-navy);padding:clamp(40px,6vw,72px) 0 0}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grid{position:absolute;inset:0;width:100%;height:100%;fill:rgba(160,190,255,.22)}
.glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.glow.g1{width:520px;height:520px;right:-120px;top:-80px;background:#1d4fd8}
.glow.g2{width:360px;height:360px;left:-140px;bottom:-60px;background:#7c2d12;opacity:.45}
.hero-grid-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(2.8rem,7.4vw,5.6rem);letter-spacing:-.035em;line-height:.98;color:#fff}
.hero h1 .hl{background:linear-gradient(100deg,#7fa6ff 0%,#ffb27a 60%,#f97316 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--on-navy-2);margin:22px 0 30px;font-size:1.12rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.pulse-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--mint);animation:ping 2s var(--e-out) infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.hero-stats{display:flex;gap:clamp(20px,4vw,44px);margin-top:44px;padding-top:24px;border-top:1px solid var(--navy-line)}
.hero-stats div{display:flex;flex-direction:column-reverse}
.hero-stats dd{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.hero-stats dt{font-size:.82rem;color:var(--on-navy-2);margin-top:6px}

/* ekosistem */
.eco{position:relative}
.eco-svg{width:100%;max-height:min(500px,62vh);height:auto;overflow:visible}
.ring-line{fill:none;stroke:var(--navy-line);stroke-width:1.5;stroke-dasharray:3 9}
.ring-spin{transform-origin:300px 280px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.outlet-dot{fill:#ffb27a;animation:blink 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.eco-paths path{fill:none;stroke:rgba(141,176,255,.34);stroke-width:2;stroke-dasharray:6 7;transition:stroke var(--d2),opacity var(--d2),stroke-width var(--d2)}
.pk{filter:drop-shadow(0 0 6px currentColor)}
.pk-b{fill:#8db0ff;color:#8db0ff}
.pk-o{fill:#ffb27a;color:#f97316}
.hub-halo{fill:rgba(47,107,255,.14);stroke:rgba(141,176,255,.3);transform-origin:300px 280px;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hub-core{filter:drop-shadow(0 10px 30px rgba(47,107,255,.6))}
.hub-ic{color:#fff}
.hub-label{font-family:var(--font-body);font-size:12px;font-weight:700;fill:#fff;text-anchor:middle}
.node{cursor:pointer;color:#cfe0ff;outline:none}
.node-bg{fill:#0f2a52;stroke:rgba(141,176,255,.35);stroke-width:1.5;transition:fill var(--d2),stroke var(--d2),transform var(--d2) var(--e-spring)}
.node-label{font-family:var(--font-body);font-size:13px;font-weight:700;fill:var(--on-navy-2);text-anchor:middle;transition:fill var(--d2)}
.node:hover .node-bg,.node:focus-visible .node-bg{stroke:#fff}
.node:focus-visible .node-bg{stroke:var(--orange);stroke-width:3}
.node[aria-pressed="true"] .node-bg{fill:var(--blue);stroke:#fff;transform:scale(1.1)}
.node[aria-pressed="true"]{color:#fff}
.node[aria-pressed="true"] .node-label{fill:#fff}
.eco[data-active] .eco-paths path{opacity:.25}
.eco[data-active="pos"] .eco-paths [data-for="pos"],
.eco[data-active="dash"] .eco-paths [data-for="dash"],
.eco[data-active="ops"] .eco-paths [data-for="ops"],
.eco[data-active="abs"] .eco-paths [data-for="abs"],
.eco[data-active="onl"] .eco-paths [data-for="onl"]{opacity:1;stroke:#ffb27a;stroke-width:3;stroke-dasharray:none}
.eco-card{position:relative;margin:4px auto 0;width:min(400px,100%);padding:14px 18px;border-radius:var(--r-md);background:rgba(13,42,82,.82);border:1px solid var(--navy-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.eco-card-k{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffb27a}
.eco-card-t{font-weight:700;color:#fff;margin:2px 0 2px}
.eco-card-d{font-size:.86rem;color:var(--on-navy-2);line-height:1.5}
.eco-card.swap{animation:cardIn var(--d3) var(--e-out)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}}

.ticker{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--navy-line);background:rgba(4,14,30,.5);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:40px;width:max-content;padding:14px 0;font-family:var(--font-mono);font-size:.8rem;color:var(--on-navy-2);animation:marquee 48s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ticker-track b{color:#fff;font-weight:500}
.ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--mint);font-style:normal}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .hero-grid-layout{grid-template-columns:1fr}
  .eco{max-width:520px;margin:12px auto 0;width:100%}
}
@media (max-width:520px){
  .hero-stats dd{font-size:1.9rem}
}

/* =========================================================
   JENIS OUTLET
   ========================================================= */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:transform var(--d2) var(--e-out),border-color var(--d2),box-shadow var(--d2)}
.tile:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-2)}
.tile-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:16px;color:var(--blue-ink);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.tile:nth-child(even) .tile-ic{color:var(--orange-600);background:color-mix(in srgb,var(--orange) 14%,transparent)}
:root[data-theme="dark"] .tile:nth-child(even) .tile-ic{color:#ffb27a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile:nth-child(even) .tile-ic{color:#ffb27a}}
.tile-ic .i{width:28px;height:28px}
.tile h3{margin-bottom:6px}
.tile p{color:var(--ink-2);font-size:.9rem;line-height:1.5}
/* gerak bagian ikon (ikon disisipkan inline oleh JS, kelas .ic-move dari sprite) */
.tile .ic-move{transform-box:fill-box;transform-origin:center}
.tile:hover[data-anim="coffee"] .ic-move{animation:steam 1.4s ease-in-out infinite}
.tile:hover[data-anim="fastfood"] .ic-move{animation:hop .6s var(--e-spring) infinite alternate}
.tile:hover[data-anim="delivery"] .ic-move{animation:dash .5s linear infinite}
.tile:hover[data-anim="bakery"] .ic-move{animation:hop .8s ease-in-out infinite alternate}
.tile:hover[data-anim="retail"] .ic-move{animation:hop .5s var(--e-spring) infinite alternate}
.tile:hover[data-anim="multi"] .ic-move{animation:pop .9s var(--e-spring) infinite}
.tile:hover[data-anim="loyalty"] .ic-move{animation:wiggle .7s ease-in-out infinite}
.tile:hover[data-anim="dinein"] .tile-ic .i{animation:wiggle .7s ease-in-out infinite}
@keyframes steam{0%{transform:translateY(2px);opacity:0}40%{opacity:1}100%{transform:translateY(-3px);opacity:0}}
@keyframes hop{to{transform:translateY(-2.5px)}}
@keyframes dash{from{transform:translateX(2px);opacity:1}to{transform:translateX(-3px);opacity:0}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@media (max-width:960px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.tiles{grid-template-columns:1fr}}

/* =========================================================
   SATU TRANSAKSI (scrollytelling)
   ========================================================= */
.alur{background:var(--bg-soft)}
.scrolly{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:start}
.stage-wrap{position:sticky;top:96px}
.stage{width:100%;height:auto;overflow:visible}
.pn-bg{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:stroke var(--d3),fill var(--d3)}
.pn-k{font-family:var(--font-body);font-size:13px;font-weight:700;fill:var(--ink-2);transition:fill var(--d3)}
.pn-foot{font-family:var(--font-mono);font-size:11px;fill:var(--ink-2)}
.panel{opacity:.45;transition:opacity var(--d3) var(--e-out)}
.panel > *{transition:transform var(--d3) var(--e-out)}
.st-link{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:4 5}
.stage[data-step="1"] [data-panel="1"],.stage[data-step="2"] [data-panel="2"],.stage[data-step="3"] [data-panel="3"],.stage[data-step="4"] [data-panel="4"]{opacity:1}
.stage[data-step="1"] [data-panel="1"] .pn-bg,.stage[data-step="2"] [data-panel="2"] .pn-bg,.stage[data-step="3"] [data-panel="3"] .pn-bg,.stage[data-step="4"] [data-panel="4"] .pn-bg{stroke:var(--blue);stroke-width:2.5;filter:drop-shadow(0 18px 30px rgba(47,107,255,.18))}
.stage[data-step="1"] [data-panel="1"] .pn-k,.stage[data-step="2"] [data-panel="2"] .pn-k,.stage[data-step="3"] [data-panel="3"] .pn-k,.stage[data-step="4"] [data-panel="4"] .pn-k{fill:var(--blue-ink)}
/* kasir */
.k-tile{fill:var(--surface-2);stroke:var(--line);transition:fill var(--d2),stroke var(--d2)}
.k-tt{font-family:var(--font-body);font-size:10.5px;font-weight:600;fill:var(--ink)}
.k-cart-bg{fill:var(--surface-2);stroke:var(--line)}
.k-line rect{fill:var(--line-2)}
.k-line{opacity:0;transform:translateY(-6px);transition:opacity var(--d2),transform var(--d2) var(--e-out)}
.k-pay{fill:var(--line-2);transition:fill var(--d2)}
.k-pay-t{font-family:var(--font-body);font-size:10px;font-weight:700;fill:#fff;text-anchor:middle}
.k-tap{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center}
.stage[data-step] .k-pick{fill:color-mix(in srgb,var(--blue) 14%,var(--surface));stroke:var(--blue)}
.stage[data-step] .k-line{opacity:1;transform:none}
.stage[data-step] .k-pay{fill:var(--mint)}
.stage[data-step="1"] .k-tap{animation:tap 1.8s var(--e-out) infinite}
@keyframes tap{0%{opacity:.6;transform:scale(.3)}60%,100%{opacity:0;transform:scale(1.6)}}
/* dapur */
.d-rail{fill:var(--line-2)}
.d-paper{fill:#fffdf6;stroke:#e9dcc0}
:root[data-theme="dark"] .d-paper{fill:#1d2a40;stroke:#34486a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .d-paper{fill:#1d2a40;stroke:#34486a}}
.d-t1{font-family:var(--font-mono);font-size:14px;fill:var(--ink)}
.d-t2{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--ink)}
.d-ln{fill:var(--line-2)}
.d-ticket{transform:translateY(-60px);opacity:0;transition:transform var(--d3) var(--e-spring),opacity var(--d2)}
.d-ok circle{fill:var(--mint)}
.d-ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.d-ok{opacity:0;transition:opacity var(--d2) .3s}
.stage[data-step="2"] .d-ticket,.stage[data-step="3"] .d-ticket,.stage[data-step="4"] .d-ticket{transform:none;opacity:1}
.stage[data-step="3"] .d-ok,.stage[data-step="4"] .d-ok{opacity:1}
/* stok */
.s-track{fill:var(--surface-2);stroke:var(--line)}
.s-fill{fill:var(--blue);transform-box:fill-box;transform-origin:bottom;transform:scaleY(1);transition:transform var(--d4) var(--e-out)}
.s-bars g:nth-child(2) .s-fill{fill:var(--orange)}
.s-bars g:nth-child(3) .s-fill{fill:var(--mint)}
.s-lb{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--ink-2);text-anchor:middle}
.s-dl{font-family:var(--font-mono);font-size:12px;fill:var(--orange-600);text-anchor:middle;opacity:0;transition:opacity var(--d2)}
.stage[data-step="3"] .s-fill,.stage[data-step="4"] .s-fill{transform:scaleY(var(--to))}
.stage[data-step="3"] .s-dl{opacity:1}
/* dashboard */
.db-num{font-family:var(--font-display);font-size:26px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.db-sub{font-family:var(--font-body);font-size:10.5px;fill:var(--ink-2)}
.db-grid{stroke:var(--line);fill:none}
.db-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:.32;transition:stroke-dashoffset var(--d4) var(--e-out)}
.db-dot{fill:var(--orange);opacity:0;transition:opacity var(--d2) .5s}
.stage[data-step="4"] .db-line{stroke-dashoffset:0}
.stage[data-step="4"] .db-dot{opacity:1}
/* detail garis dari aset Astra (panggung transaksi & bento) */
.asset-detail{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* token */
.token{transition:transform var(--d4) var(--e-io);transform:translate(262px,18px)}
.token circle{fill:var(--orange);stroke:var(--bg-soft);stroke-width:4}
.token text{font-family:var(--font-mono);font-size:12px;fill:var(--on-orange);text-anchor:middle}
.stage[data-step="2"] .token{transform:translate(542px,18px)}
.stage[data-step="3"] .token{transform:translate(542px,243px)}
.stage[data-step="4"] .token{transform:translate(262px,243px)}
/* langkah */
.steps{display:grid;gap:0}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 28px;border-left:2px solid var(--line);position:relative;opacity:.4;transition:opacity var(--d3)}
.step::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform var(--d3) var(--e-out)}
.step.is-on{opacity:1}
.step.is-on::before{transform:scaleY(1)}
.step-n{font-family:var(--font-mono);font-size:.82rem;color:var(--orange-600);margin-bottom:10px}
.step h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:10px}
.step p{color:var(--ink-2);max-width:44ch}
@media (max-width:900px){
  .scrolly{grid-template-columns:1fr}
  .stage-wrap{top:68px;z-index:2;background:var(--bg-soft);padding:10px 0;margin-inline:-20px;padding-inline:20px;border-bottom:1px solid var(--line)}
  .stage{max-height:38vh;margin-inline:auto}
  .step{min-height:55vh}
}

/* =========================================================
   APLIKASI
   ========================================================= */
.apps-ui{display:grid;gap:28px}
.app-tabs{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.app-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink-2);white-space:nowrap;transition:color var(--d2),background-color var(--d2),box-shadow var(--d2)}
.app-tab:hover{color:var(--ink)}
.app-tab[aria-selected="true"]{background:var(--surface);color:var(--blue-ink);box-shadow:var(--shadow-1)}
.app-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:center;min-height:440px}
.app-copy .kicker{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-600);margin-bottom:12px}
.app-copy h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.app-copy > p{color:var(--ink-2)}
.checks{display:grid;gap:10px;margin:22px 0 26px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:color-mix(in srgb,var(--mint) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-ink);min-height:44px}
.app-copy,.device{transition:opacity var(--d2) var(--e-out),transform var(--d3) var(--e-out)}
.app-panel.is-out .app-copy,.app-panel.is-out .device{opacity:0;transform:translateY(10px) scale(.985)}
.device{position:relative;margin-inline:auto;padding:12px;border-radius:28px;background:#0c1626;box-shadow:var(--shadow-2),inset 0 0 0 1.5px #2a3a55}
.device-screen{overflow:hidden;border-radius:18px;background:#fff}
.device-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.device[data-kind="tablet"]{width:100%;max-width:640px}
.device[data-kind="tablet"] .device-screen{aspect-ratio:16/10}
.device[data-kind="laptop"]{width:100%;max-width:660px;border-radius:16px 16px 6px 6px;padding:10px 10px 14px}
.device[data-kind="laptop"] .device-screen{aspect-ratio:1360/820;border-radius:8px}
.device[data-kind="laptop"]::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-14px;height:14px;border-radius:0 0 14px 14px;background:linear-gradient(#26344c,#111b2b)}
.device[data-kind="phone"]{width:min(290px,72vw);border-radius:42px;padding:26px 10px 14px}
.device[data-kind="phone"] .device-screen{aspect-ratio:390/844;border-radius:22px}
.device[data-kind="phone"]::before{content:"";position:absolute;top:10px;left:50%;width:56px;height:6px;transform:translateX(-50%);border-radius:6px;background:#2a3a55}
@media (max-width:900px){.app-panel{grid-template-columns:1fr;min-height:0}.app-tabs{width:100%}}

/* =========================================================
   LOGIN
   ========================================================= */
.login{background:var(--bg-soft)}
.login-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.login .lead{margin:16px 0 30px}
.gates{display:grid;gap:12px;position:relative}
.gate{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:border-color var(--d2),box-shadow var(--d2),transform var(--d2) var(--e-out)}
.gate h3{margin-bottom:2px}
.gate p{color:var(--ink-2);font-size:.9rem}
.gate-ic{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--bg-soft);color:var(--ink-2);transition:background-color var(--d2),color var(--d2)}
.gate-ic .i{position:absolute;transition:opacity var(--d2),transform var(--d3) var(--e-spring)}
.gate-ic .ok{opacity:0;transform:scale(.4) rotate(-30deg)}
.gate.is-current{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%,transparent)}
.gate.is-current .gate-ic{color:var(--blue-ink)}
.gate.is-open .gate-ic{background:var(--mint);color:#fff}
.gate.is-open .gate-ic .lock{opacity:0;transform:scale(.4)}
.gate.is-open .gate-ic .ok{opacity:1;transform:none}
.pin-demo{position:relative;justify-self:center;width:min(360px,100%);padding:28px 24px 24px;border-radius:var(--r-xl);background:var(--navy);color:var(--on-navy);box-shadow:var(--shadow-2);text-align:center}
.pin-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,178,122,.14);color:#ffb27a;margin-bottom:18px}
.pin-step{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:#fff;min-height:1.6em}
.pin-dots{display:flex;justify-content:center;gap:12px;margin:18px 0 22px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(180,196,222,.5);transition:background-color var(--d1),border-color var(--d1),transform var(--d2) var(--e-spring)}
.pin-dots i.on{background:#fff;border-color:#fff;transform:scale(1.15)}
.pin-dots.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-pad button{min-height:56px;border-radius:16px;background:rgba(255,255,255,.07);color:#fff;font-size:1.35rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color var(--d1),transform var(--d1)}
.pin-pad button:hover{background:rgba(255,255,255,.14)}
.pin-pad button:active{transform:scale(.94);background:rgba(255,255,255,.2)}
.pin-pad .pin-fn{font-size:.82rem;color:var(--on-navy-2)}
.pin-done{display:grid;justify-items:center;gap:14px;padding:30px 0 6px}
.pin-done .i{width:64px;height:64px;padding:14px;border-radius:50%;background:var(--mint);color:#fff;animation:popIn var(--d3) var(--e-spring)}
.pin-done p{color:var(--on-navy-2)}
.pin-done b{color:#fff;font-size:1.15rem}
.pin-done .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
@keyframes popIn{from{transform:scale(.3);opacity:0}}
@media (max-width:900px){.login-grid{grid-template-columns:1fr}}

/* =========================================================
   KENAPA (bento)
   ========================================================= */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bcard{padding:26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.b-wide{grid-column:span 2}
.bento .bcard:nth-child(4){grid-column:2 / span 2}
.b-art{width:100%;height:120px;margin-bottom:22px}
.bcard h3{font-size:1.25rem;margin-bottom:8px}
.bcard p{color:var(--ink-2);font-size:.95rem}
.am-l{fill:none;stroke:var(--line-2);stroke-width:3;stroke-linecap:round}
.am-main{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset var(--d4) var(--e-out) .3s}
.am-hub{fill:var(--orange);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform var(--d3) var(--e-spring) .2s}
.is-in .am-main{stroke-dashoffset:0}
.is-in .am-hub{transform:scale(1)}
.ap-d{fill:var(--line-2)}
.ap-new path{fill:var(--orange)}
.ap-new circle{fill:var(--surface)}
.ap-new{transform:translateY(-50px);opacity:0;transition:transform var(--d3) var(--e-spring) .2s,opacity var(--d2) .2s}
.ap-badge{fill:color-mix(in srgb,var(--mint) 18%,transparent)}
.ap-badge-t{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--mint);text-anchor:middle}
.is-in .ap-new{transform:none;opacity:1}
.av-b{fill:var(--surface-2);stroke:var(--line-2);stroke-width:2}
.av-me{stroke:var(--blue)}
.av-wall{stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88;transition:stroke-dashoffset var(--d4) var(--e-out) .2s}
.av-ck{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset var(--d3) var(--e-out) .7s}
.is-in .av-wall,.is-in .av-ck{stroke-dashoffset:0}
.ac-face{fill:none;stroke:var(--line-2);stroke-width:3}
.ac-hand,.ac-hand2{stroke:var(--blue);stroke-width:4;stroke-linecap:round;transform-origin:60px 60px}
.ac-hand2{stroke:var(--orange)}
.is-in .ac-hand{animation:spin 8s linear infinite}
.ac-rows rect{fill:var(--line);transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform var(--d4) var(--e-out)}
.ac-rows rect:nth-child(1){fill:color-mix(in srgb,var(--blue) 30%,var(--line))}
.is-in .ac-rows rect{transform:scaleX(1)}
.is-in .ac-rows rect:nth-child(2){transition-delay:.15s}
.is-in .ac-rows rect:nth-child(3){transition-delay:.3s}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.b-wide,.bento .bcard:nth-child(4){grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.b-wide,.bento .bcard:nth-child(4){grid-column:auto}}

/* =========================================================
   MODUL
   ========================================================= */
.modul{background:var(--bg-soft)}
.modul-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.modul .lead{margin:16px 0 28px}
.switches{display:grid;gap:10px}
.switches li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.switches b{display:block}
.switches small{color:var(--ink-2);font-size:.85rem}
[role="switch"]{position:relative;flex:none;width:52px;height:30px;border-radius:999px;background:var(--line-2);transition:background-color var(--d2)}
[role="switch"]::after{content:"";position:absolute;inset:-7px}
[role="switch"] i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--d2) var(--e-spring)}
[role="switch"][aria-checked="true"]{background:var(--blue)}
[role="switch"][aria-checked="true"] i{transform:translateX(22px)}
[role="switch"][aria-disabled="true"]{opacity:.65;cursor:not-allowed}
.note{margin-top:14px;font-size:.82rem;color:var(--ink-2)}
.mini-eco-wrap{display:grid;place-items:center}
.mini-eco{width:min(420px,100%);height:auto;overflow:visible}
.me-ring{fill:none;stroke:var(--line-2);stroke-dasharray:3 8}
.me-l{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--d3) var(--e-out)}
.me-l.on{stroke-dashoffset:0}
.me-hub{fill:var(--navy);stroke:var(--blue);stroke-width:3}
.me-count{font-family:var(--font-display);font-size:18px;font-weight:800;fill:#fff;text-anchor:middle}
.me-n{color:var(--ink-2);transform-box:fill-box;transform-origin:center;transition:color var(--d2)}
.me-n circle{fill:var(--surface);stroke:var(--line-2);stroke-width:2;transition:fill var(--d2),stroke var(--d2)}
.me-n.on{color:#fff}
.me-n.on circle{fill:var(--blue);stroke:var(--blue)}
.me-n.bump{animation:popIn var(--d3) var(--e-spring)}
@media (max-width:900px){.modul-grid{grid-template-columns:1fr}.mini-eco-wrap{order:-1}.mini-eco{width:min(300px,80%)}}

/* =========================================================
   CARA KERJA
   ========================================================= */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;counter-reset:x}
.timeline::before{content:"";position:absolute;top:23px;left:24px;right:24px;height:2px;background:var(--line)}
.timeline::after{content:"";position:absolute;top:23px;left:24px;right:24px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e-out)}
.timeline.is-in::after{transform:scaleX(1)}
.timeline li{position:relative}
.tl-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface);border:2px solid var(--blue);color:var(--blue-ink);font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin-bottom:18px}
.timeline li:last-child .tl-n{border-color:var(--orange);color:var(--orange-600)}
.timeline h3{margin-bottom:8px}
.timeline p{color:var(--ink-2);font-size:.95rem}
@media (max-width:760px){
  .timeline{grid-template-columns:1fr;gap:26px;padding-left:66px}
  .timeline::before,.timeline::after{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}
  .timeline::after{transform:scaleY(0);transform-origin:top}
  .timeline.is-in::after{transform:scaleY(1)}
  .tl-n{position:absolute;left:-66px;top:-6px}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start}
.faq-grid .lead{margin:16px 0 24px}
.faq{display:grid;gap:10px}
.faq details{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:border-color var(--d2)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 20px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform var(--d2) var(--e-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--ink-2)}
.faq details[open] p{animation:fadeDown var(--d2) var(--e-out)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* =========================================================
   CTA & FOOTER
   ========================================================= */
.cta{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);padding:clamp(80px,11vw,140px) 0;text-align:center}
.cta-wave{position:absolute;inset:auto 0 0 0;width:100%;height:240px}
.cta-wave path{fill:none;stroke-width:2;stroke-dasharray:10 12;animation:flow 6s linear infinite}
.cw1{stroke:rgba(141,176,255,.35)}
.cw2{stroke:rgba(255,178,122,.3);animation-duration:9s!important;animation-direction:reverse!important}
@keyframes flow{to{stroke-dashoffset:-220}}
.cta-in{position:relative}
.cta h2{color:#fff;font-size:clamp(2rem,5vw,3.6rem);max-width:18ch;margin-inline:auto}
.cta p{color:var(--on-navy-2);max-width:54ch;margin:18px auto 32px;font-size:1.08rem}
.cta .cta-row{justify-content:center}

/* ---------- muncul saat discroll ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--d3) var(--e-out),transform var(--d3) var(--e-out);transition-delay:var(--rd,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .tile.reveal.is-in:hover{transform:translateY(-4px)}

/* ---------- gerak dikurangi: tampilkan keadaan akhir, tanpa animasi berulang ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .ticker-track{animation:none}
  .eco-packets{display:none}
  .js .reveal{opacity:1;transform:none}
}