@charset "UTF-8";
/* Nivelva: Setup VPS (addon EPYC NVMe VPS). prefix: sv. Putih + panel gelap + aksen oranye, tanpa kotak krem */
:root{--sv-ink:#111317;--sv-ink2:#1B1D22;--sv-line:rgba(255,255,255,.10);--sv-dim:rgba(255,255,255,.66);--sv-peach:#FFB38A;--sv-ok:#16A34A;--sv-bad:#DC2626;--sv-bd:#E6E7EA;--sv-mut:#5B5F66;--sv-soft:#F4F5F7}
.svHero,.svDo,.svPath,.svScope,.svSteps,.svRules,.svFaq,.svCta{position:relative;overflow:hidden}
.svKick{display:block;margin-bottom:12px;font:700 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.svH2{margin:0;font:600 clamp(28px,3.4vw,42px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.svH2 em{font-style:italic;font-weight:500;color:var(--accent)}
.svHead{max-width:760px;margin:0 0 32px}
.svLead{margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--sv-mut)}
.svLink{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* tombol */
.svBtn,.svBtn--line,.svBtn--wire{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;font:800 15px/1 var(--sans);text-decoration:none;box-shadow:none;transition:transform .16s,background .16s,box-shadow .16s}
.svBtn{background:#111317;color:#fff;border:0;box-shadow:0 12px 28px rgba(17,19,23,.22)}
.svBtn:hover{background:#000;color:#fff;transform:translateY(-1px)}
.svBtn svg{box-sizing:content-box;padding:7px;margin-right:-12px;border-radius:50%;background:var(--accent);color:#fff}
.svBtn--line{background:#fff;color:#111317;border:1.5px solid #111317}
.svBtn--line:hover{background:#111317;color:#fff}
.svBtn--wire{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.svBtn--wire:hover{border-color:#fff;color:#fff}
.svBtn:focus-visible,.svBtn--line:focus-visible,.svBtn--wire:focus-visible{outline:3px solid rgba(232,89,12,.5);outline-offset:3px}

/* hero */
.svHero{padding:64px 0 80px;background:radial-gradient(900px 420px at 85% 10%,rgba(236,101,42,.08),transparent 70%),#fff}
.svHero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.svHero h1{margin:0;font:600 clamp(36px,4.6vw,58px)/1.05 var(--serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.svHero h1 em{font-style:italic;font-weight:500;color:var(--accent)}
.svBr{display:block}
.svHero__sub{margin:18px 0 22px;font-size:17.5px;line-height:1.6;color:var(--sv-mut);max-width:34em}
.svPrice{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 18px;border-radius:14px;border:1.5px solid var(--sv-bd);background:#fff}
.svPrice b{font:800 28px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.svPrice span{font:600 14px/1.3 var(--sans);color:var(--sv-mut)}
.svHero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.svCard{position:relative;border-radius:22px;background:linear-gradient(165deg,#1B1D22 0%,#0E1013 100%);color:#fff;box-shadow:0 30px 70px rgba(17,19,23,.28);overflow:hidden}
.svCard::after{content:"";position:absolute;right:-90px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(236,101,42,.28),transparent 70%);pointer-events:none}
.svCard__bar{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sv-line);font:600 12.5px/1 var(--mono);color:var(--sv-dim)}
.svCard__dots{display:flex;gap:6px}
.svCard__dots i{width:10px;height:10px;border-radius:50%;background:#FF5F57}
.svCard__dots i:nth-child(2){background:#FEBC2E}
.svCard__dots i:nth-child(3){background:#28C840}
.svCard__bar em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;color:#86EFAC}
.svCard__bar em i{width:7px;height:7px;border-radius:50%;background:#22C55E}
.svCard__list{position:relative;list-style:none;margin:0;padding:16px 18px 6px;display:grid;gap:4px}
.svCard__list li{display:flex;align-items:center;gap:11px;padding:8px 0;font:500 14.5px/1.35 var(--sans);color:#E8E9EB;border-bottom:1px dashed rgba(255,255,255,.08)}
.svCard__list li:last-child{border-bottom:0}
.svCard__ck{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(34,197,94,.16);color:#4ADE80}
.svCard__ft{position:relative;margin:0;padding:10px 18px 16px;font:500 12px/1.4 var(--sans);color:rgba(255,255,255,.5)}

/* yang dikerjakan */
.svDo{padding:84px 0;background:var(--sv-soft)}
.svDo__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svDo__grid li{display:flex;gap:14px;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--sv-bd)}
.svDo__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#111317;color:#fff}
.svDo__grid h3{margin:0;font:700 16.5px/1.3 var(--sans);color:var(--ink)}
.svDo__grid p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--sv-mut)}

/* jalur */
.svPath{padding:84px 0;background:#fff}
.svPath__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.svOpt{padding:26px;border-radius:20px;border:1.5px solid var(--sv-bd);background:#fff}
.svOpt--dark{background:linear-gradient(165deg,#1B1D22 0%,#0E1013 100%);border-color:#0E1013;color:#fff}
.svOpt__tag{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--sv-soft);font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.svOpt--dark .svOpt__tag{background:rgba(255,255,255,.1);color:#fff}
.svOpt h3{margin:14px 0 0;font:600 24px/1.15 var(--serif);color:inherit}
.svOpt p{margin:8px 0 16px;font-size:15px;line-height:1.55;color:var(--sv-mut)}
.svOpt--dark p{color:var(--sv-dim)}
.svChips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svChips li{padding:8px 13px;border-radius:999px;border:1.5px solid var(--sv-bd);font:700 13.5px/1 var(--sans);color:var(--ink)}
.svOpt--dark .svChips li{border-color:rgba(255,255,255,.18);color:#fff}
.svApps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px;padding:22px 24px;border-radius:20px;border:1.5px dashed #D5D8DD}
.svApps b{display:block;font:700 16px/1.3 var(--sans);color:var(--ink)}
.svApps p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--sv-mut)}
.svApps__or{display:flex;gap:12px;padding-left:18px;border-left:1px solid var(--sv-bd)}
.svApps__or p{margin:0}
.svApps__or b{display:inline;font-size:14.5px}
.svApps__ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(232,89,12,.1);color:var(--accent)}

/* termasuk / tidak */
.svScope{padding:84px 0;background:var(--sv-soft)}
.svScope__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.svList{padding:24px;border-radius:20px;background:#fff;border:1px solid var(--sv-bd)}
.svList h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;font:700 17px/1.2 var(--sans)}
.svList--in h3{color:var(--sv-ok)}
.svList--out h3{color:var(--sv-bad)}
.svList ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.svList li{display:flex;gap:10px;padding:9px 0;font-size:15px;line-height:1.5;color:var(--ink);border-top:1px solid #EEF0F2}
.svList li:first-child{border-top:0}
.svList li svg{flex:none;margin-top:3px}
.svList--in li svg{color:var(--sv-ok)}
.svList--out li svg{color:var(--sv-bad)}
.svNote{margin:18px 0 0;font-size:15px;color:var(--sv-mut)}

/* alur (tanpa nomor urut) */
.svSteps{padding:84px 0;background:#fff}
.svSteps__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.svSteps__row li{position:relative;padding:20px;border-radius:18px;border:1px solid var(--sv-bd);background:#fff}
.svSteps__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(232,89,12,.1);color:var(--accent)}
.svSteps__row h3{margin:14px 0 0;font:700 16px/1.3 var(--sans);color:var(--ink)}
.svSteps__row p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--sv-mut)}

/* ketentuan */
.svRules{padding:84px 0;background:linear-gradient(180deg,#0E1013 0%,#15171B 100%);color:#fff}
.svRules .svH2{color:#fff}
.svTerms{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:8px 26px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--sv-line)}
.svTerms div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--sv-line)}
.svTerms div:nth-child(-n+2){border-top:0}
.svTerms dt{font:700 14.5px/1.4 var(--sans);color:#fff}
.svTerms dd{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.74)}
.svTerms .is-warn dt{color:#FCA5A5}
.svTerms .is-warn dd{color:#FECACA}

/* FAQ */
.svFaq{padding:84px 0;background:#fff}
.svFaq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.svFaq__side{position:sticky;top:24px}
.svFaq__side p{margin:14px 0 20px;font-size:16px;line-height:1.6;color:var(--sv-mut)}
.svFaq__wa{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 20px;border-radius:999px;background:#fff;color:#111317;border:1.5px solid #111317;font:800 14.5px/1 var(--sans);text-decoration:none}
.svFaq__wa svg{box-sizing:content-box;padding:6px;margin-left:-8px;border-radius:50%;background:#25D366;color:#fff}
.svFaq__wa:hover{background:#111317;color:#fff}
.svQ{border-top:1px solid var(--sv-bd)}
.svQ:last-child{border-bottom:1px solid var(--sv-bd)}
.svQ h3{margin:0}
.svQ button{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border:0;background:none;cursor:pointer;text-align:left;font:700 16.5px/1.4 var(--sans);color:#16181C}
.svQ button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svQ__ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sv-bd);color:var(--ink);transition:transform .2s}
.svQ.is-open .svQ__ic{transform:rotate(180deg);background:var(--accent);border-color:var(--accent);color:#fff}
.svQ__a p{margin:0 0 18px;font-size:15.5px;line-height:1.7;color:#33363B;max-width:44em}

/* CTA */
.svCta{padding:0 0 96px;background:#fff}
.svCta__box{position:relative;overflow:hidden;border-radius:28px;background:#0E1013;color:#fff;padding:56px 48px}
.svCta__grid{position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 0%,rgba(236,101,42,.28),transparent 70%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,36px 36px,36px 36px;pointer-events:none}
.svCta__in{position:relative;max-width:640px}
.svCta h2{margin:0;font:600 clamp(28px,3.4vw,40px)/1.12 var(--serif);letter-spacing:-.02em;color:#fff}
.svCta h2 em{font-style:italic;font-weight:500;color:var(--sv-peach)}
.svCta p{margin:14px 0 24px;font-size:16.5px;line-height:1.6;color:var(--sv-dim)}
.svCta__btns{display:flex;flex-wrap:wrap;gap:12px}
.svCta .svBtn{background:var(--accent)}
.svCta .svBtn:hover{background:#C2410C}
.svCta .svBtn svg{background:rgba(255,255,255,.22)}

/* tablet */
@media (max-width:1024px){
  .svHero__grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .svDo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svSteps__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svTerms{grid-template-columns:minmax(0,1fr)}
  .svTerms div:nth-child(2){border-top:1px solid var(--sv-line)}
  .svFaq__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .svFaq__side{position:static}
}
/* HP: ringkas, tidak boros section */
@media (max-width:720px){
  .svHero{padding:32px 0 48px}
  .svHero__sub{font-size:16px;margin:14px 0 18px}
  .svPrice{padding:10px 14px}
  .svPrice b{font-size:24px}
  .svHero__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
  .svBtn,.svBtn--line,.svBtn--wire{height:48px;padding:0 12px;font-size:14px}
  .svBtn svg{padding:5px;margin-right:-4px}
  .svCard__list{padding:10px 14px 4px}
  .svCard__list li{padding:6px 0;font-size:13.5px}
  .svCard__list li:nth-child(n+7){display:none}
  .svDo,.svPath,.svScope,.svSteps,.svRules,.svFaq{padding:48px 0}
  .svHead{margin-bottom:20px}
  .svLead{font-size:15.5px}
  .svDo__grid{gap:8px}
  .svDo__grid li{flex-direction:column;gap:10px;padding:14px}
  .svDo__ic{width:36px;height:36px}
  .svDo__grid h3{font-size:14.5px}
  .svDo__grid p{display:none}
  .svPath__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .svOpt{padding:18px}
  .svOpt h3{font-size:20px;margin-top:10px}
  .svOpt p{font-size:14px;margin:6px 0 12px}
  .svChips li{padding:7px 11px;font-size:12.5px}
  .svApps{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
  .svApps__or{padding:12px 0 0;border-left:0;border-top:1px solid var(--sv-bd)}
  .svScope__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .svList{padding:16px 18px}
  .svList li{padding:7px 0;font-size:14px}
  .svSteps__row{grid-template-columns:minmax(0,1fr);gap:0;border-left:2px solid var(--sv-bd);margin-left:18px}
  .svSteps__row li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:10px 0 10px 0;border:0;border-radius:0;margin-left:-19px}
  .svSteps__ic{grid-row:1 / span 2;width:36px;height:36px;background:#fff;border:2px solid var(--sv-bd)}
  .svSteps__row h3{margin:2px 0 0;font-size:15px}
  .svSteps__row p{margin:2px 0 0;font-size:13.5px}
  .svTerms{padding:2px 16px}
  .svTerms div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
  .svTerms dt,.svTerms dd{font-size:14px}
  .svQ button{font-size:15px;padding:14px 0}
  .svQ__a p{font-size:14.5px}
  .svCta{padding-bottom:56px}
  .svCta__box{padding:32px 22px;border-radius:22px}
  .svCta p{font-size:15px}
  .svCta__btns{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (prefers-reduced-motion:reduce){.svBtn,.svBtn--line,.svBtn--wire,.svQ__ic{transition:none}.svBtn:hover{transform:none}}
.svHero h1 .svKick{margin-bottom:14px}
.svOnlyM{display:none}
@media (max-width:720px){
  .svHide{display:none}
  .svOnlyM{display:inline}
  .svPrice{display:flex;align-items:baseline}
  .svCard__list li:nth-child(n+5){display:none}
}
/* baris harga hero, menyatu dengan tombol (7 Nov 2026) */
.svPrice{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:0;border:0;border-radius:0;background:none;margin-top:4px}
.svPrice b{font:800 34px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.svPrice__pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#111317;color:#fff;font:700 12.5px/1 var(--sans)}
.svPrice__note{font:600 14px/1 var(--sans);color:var(--sv-mut)}
.svHero__cta{margin-top:22px}
@media (max-width:720px){
  .svPrice{display:flex;gap:8px 10px}
  .svPrice b{font-size:28px}
  .svPrice__pill{height:26px;font-size:12px;padding:0 10px}
  .svPrice__note{font-size:13px}
}

/* ---- Yang dikerjakan: bento + visual mini (7 Nov 2026) ---- */
.svPrice .svPrice__pill{color:#fff}
.svBento{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.svB{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--sv-bd);overflow:hidden;transition:border-color .16s,box-shadow .16s,transform .16s}
.svB:hover{border-color:#C9CCD2;box-shadow:0 16px 36px rgba(17,19,23,.08);transform:translateY(-2px)}
.svB__hd{display:flex;align-items:center;gap:12px}
.svB__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#111317;color:#fff}
.svB h3{margin:0;font:700 17px/1.25 var(--sans);color:var(--ink)}
.svB p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sv-mut)}
.svB--term{grid-row:span 2;background:linear-gradient(165deg,#1B1D22 0%,#0E1013 100%);border-color:#0E1013;color:#fff}
.svB--term::after{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(236,101,42,.28),transparent 70%);pointer-events:none}
.svB--term h3{color:#fff}
.svB--term p{color:var(--sv-dim)}
.svB--term .svB__ic{background:var(--accent)}
.svTerm{position:relative;z-index:1;margin-top:auto;padding:14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--sv-line);display:grid;gap:9px}
.svTerm div{display:flex;align-items:center;gap:9px;min-width:0;font:600 12.5px/1.3 var(--mono)}
.svTerm__p{flex:none;color:#4ADE80}
.svTerm code{flex:1;min-width:0;font:inherit;color:#E8E9EB;background:none;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svTerm em{flex:none;font-style:normal;font-size:11px;padding:3px 7px;border-radius:999px;background:rgba(34,197,94,.16);color:#86EFAC}
.svTerm__ok{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(34,197,94,.16);color:#4ADE80}
.svB__note{position:relative;z-index:1;font:500 11.5px/1.4 var(--sans);color:rgba(255,255,255,.45)}
.svMeter{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:8px}
.svMeter li{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:10px;font:600 12.5px/1 var(--sans);color:var(--ink)}
.svMeter i{display:block;height:8px;border-radius:999px;background:#EEF0F2;overflow:hidden}
.svMeter b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#FFB38A)}
.svTags{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svTags li{padding:6px 11px;border-radius:999px;background:#111317;color:#fff;font:700 12.5px/1 var(--sans)}
.svTags li.is-alt{background:#fff;color:#111317;border:1.5px solid #111317;padding:4.5px 10px}
.svUrl{margin-top:auto;display:flex;align-items:center;gap:6px;min-width:0;padding:10px 12px;border-radius:12px;background:var(--sv-soft);border:1px solid var(--sv-bd);font:600 13px/1 var(--sans);color:var(--sv-mut)}
.svUrl b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svUrl__lock{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(22,163,74,.12);color:var(--sv-ok)}
.svUrl em{margin-left:auto;flex:none;font-style:normal;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(22,163,74,.12);color:#15803D}
.svB--wide{grid-column:2 / span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:20px}
.svB--wide .svB__hd,.svB--wide p{grid-column:1}
.svDoc{grid-column:2;grid-row:1 / span 2;list-style:none;margin:0;padding:14px 16px;border-radius:14px;background:var(--sv-soft);border:1px dashed #D5D8DD;display:grid;gap:8px}
.svDoc li{position:relative;padding-left:18px;font:600 13px/1.3 var(--sans);color:var(--ink)}
.svDoc li::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
@media (max-width:1024px){
  .svBento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svB--term{grid-row:auto;grid-column:1 / -1}
  .svB--wide{grid-column:1 / -1}
}
@media (max-width:720px){
  .svBento{grid-template-columns:minmax(0,1fr);gap:10px}
  .svB{padding:16px;gap:8px}
  .svB__ic{width:34px;height:34px}
  .svB h3{font-size:15.5px}
  .svB p{font-size:13.5px}
  .svB:not(.svB--term) p{display:none}
  .svTerm{padding:10px;gap:7px}
  .svTerm div{font-size:11.5px}
  .svB--wide{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .svDoc{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px}
  .svDoc li{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.svB{transition:none}.svB:hover{transform:none}}
.svB--wide{grid-column:1 / -1}

/* ---- Cara kerja: linimasa tersambung (7 Nov 2026) ---- */
.svSteps{background:linear-gradient(180deg,#fff 0%,#F7F8FA 100%)}
.svFlow{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}
.svFlow::before{content:"";position:absolute;left:10%;right:10%;top:27px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0%,#FFB38A 60%,#22C55E 100%);opacity:.85}
.svFlow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.svFlow__dot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#111317;color:#fff;box-shadow:0 0 0 6px #fff,0 12px 26px rgba(17,19,23,.22);transition:transform .18s}
.svFlow li:hover .svFlow__dot{transform:translateY(-3px)}
.svFlow li.is-done .svFlow__dot{background:#16A34A}
.svFlow__body{margin-top:18px;padding:18px 16px;border-radius:18px;background:#fff;border:1px solid var(--sv-bd);box-shadow:0 10px 26px rgba(17,19,23,.05);width:100%;flex:1}
.svFlow__chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:rgba(232,89,12,.1);color:#C2410C;font:700 12px/1 var(--sans);white-space:nowrap}
.svFlow li.is-done .svFlow__chip{background:rgba(22,163,74,.12);color:#15803D}
.svFlow h3{margin:12px 0 0;font:700 16.5px/1.3 var(--sans);color:var(--ink)}
.svFlow p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--sv-mut)}
@media (max-width:1024px){
  .svFlow{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0}
  .svFlow::before{left:27px;right:auto;top:28px;bottom:28px;width:3px;height:auto;background:linear-gradient(180deg,var(--accent) 0%,#FFB38A 60%,#22C55E 100%)}
  .svFlow li{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:8px 0}
  .svFlow__body{margin-top:0;padding:14px 16px}
}
@media (max-width:720px){
  .svFlow::before{left:21px}
  .svFlow__dot{width:44px;height:44px;box-shadow:0 0 0 5px #F7F8FA,0 8px 18px rgba(17,19,23,.2)}
  .svFlow__dot svg{width:17px;height:17px}
  .svFlow li{gap:12px;padding:6px 0}
  .svFlow__body{padding:12px 14px;border-radius:14px;box-shadow:none}
  .svFlow__chip{height:22px;font-size:11px;padding:0 9px}
  .svFlow h3{margin-top:8px;font-size:15px}
  .svFlow p{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.svFlow__dot{transition:none}}