:root{
    --navy:#063f5c;
    --ice:#d4f5ff;
    --blue:#419ebd;
    --amber:#f7ad1a;
    --mist:#f4f8f9;

    --navy-soft:#3d6b83;
    --line:#d3e2e8;
    --line-ice:#b3e2f0;
    --amber-dark:#d8930b;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    background:var(--mist);color:var(--navy);
    font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:38rem;margin:0 auto;padding:0 1.375rem}
  h1,h2,.lede{font-family:"Newsreader",Georgia,serif;font-weight:400;letter-spacing:-0.01em}

  /* ---------- hero ---------- */
  .hero{background:var(--navy);color:var(--ice);padding:2.75rem 0 3rem}
  .byline{display:flex;align-items:center;gap:.875rem;padding-bottom:2rem}
  .byline img{width:3rem;height:3rem;border-radius:50%;object-fit:cover;flex:none;
    box-shadow:0 0 0 2px var(--blue)}
  .byline p{font-size:.8125rem;line-height:1.45;color:rgba(212,245,255,.72)}
  .byline b{display:block;font-weight:600;font-size:.9375rem;color:#fff}
  .hero h1{font-size:2.125rem;line-height:1.16;color:#fff;padding-bottom:1.125rem}
  .hero .sub{color:rgba(212,245,255,.85);font-size:1.0625rem;padding-bottom:1.75rem}

  blockquote{
    border-left:2px solid var(--blue);
    padding:.125rem 0 .125rem 1.125rem;
    margin-bottom:1.75rem;
  }
  blockquote p{
    font-family:"Newsreader",Georgia,serif;font-size:1.0625rem;line-height:1.5;
    color:rgba(212,245,255,.9);padding-bottom:.5rem;
  }
  blockquote cite{font-style:normal;font-size:.8125rem;color:rgba(212,245,255,.6)}

  .jump{display:inline-block;color:var(--amber);text-decoration:none;
    font-size:.9375rem;font-weight:600;
    border-bottom:1px solid rgba(247,173,26,.45);padding-bottom:.125rem}
  .jump:hover{border-bottom-color:var(--amber)}
  .jump:focus-visible{outline:2px solid var(--ice);outline-offset:4px}

  /* ---------- shared ---------- */
  .block{padding:3.25rem 0}
  .block h2{font-size:1.5rem;line-height:1.25;padding-bottom:.625rem}
  .block .intro{color:var(--navy-soft);font-size:.9375rem;padding-bottom:1.75rem;line-height:1.55}

  .sits{list-style:none}
  .sits li{border-top:1px solid var(--line);padding:1.125rem 0}
  .sits li:last-child{border-bottom:1px solid var(--line)}
  .sits strong{display:block;font-weight:600;font-size:1rem;padding-bottom:.25rem}
  .sits span{color:var(--navy-soft);font-size:.9375rem;line-height:1.55;display:block}

  /* ---------- apa bedanya ---------- */
  .diff{background:var(--ice)}
  .diff .intro{color:#2c5f76}
  .diff dl{display:grid;gap:.75rem}
  .diff div{background:#fff;border:1px solid var(--line-ice);border-radius:.625rem;padding:1.25rem}
  .diff dt{font-weight:600;font-size:1rem;padding-bottom:.3125rem}
  .diff dd{color:var(--navy-soft);font-size:.9375rem;line-height:1.5}

  /* ---------- kebutuhan ---------- */
  .needs{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .needs ul{list-style:none}
  .needs li{display:flex;gap:1rem;border-top:1px solid var(--line);padding:1.25rem 0}
  .needs li:first-of-type{border-top:0;padding-top:0}
  .needs svg{width:1.375rem;height:1.375rem;stroke:var(--blue);fill:none;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.1875rem}
  .needs h3{font-size:1rem;font-weight:600;padding-bottom:.25rem;font-family:"Archivo",sans-serif}
  .needs p{color:var(--navy-soft);font-size:.9375rem;line-height:1.5}

  /* ---------- steps ---------- */
  .steps ol{list-style:none;counter-reset:s}
  .steps li{counter-increment:s;display:flex;gap:1rem;padding-bottom:1.75rem}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{content:counter(s);font-family:"Newsreader",serif;font-size:1.5rem;
    color:var(--blue);line-height:1.15;flex:none;width:1.25rem}
  .steps h3{font-size:1rem;font-weight:600;padding-bottom:.25rem;font-family:"Archivo",sans-serif}
  .steps p{color:var(--navy-soft);font-size:.9375rem;line-height:1.55}

  /* ---------- about ---------- */
  .about-block{border-top:1px solid var(--line)}
  .about{display:flex;flex-direction:column;gap:1.5rem}
  .portrait{width:100%;max-width:15rem;aspect-ratio:1;border-radius:.75rem;
    object-fit:cover;background:var(--ice);flex:none}
  .about p{padding-bottom:.875rem;color:var(--navy-soft);font-size:1rem}
  .about p:last-child{padding-bottom:0}
  .about .lede{font-size:1.1875rem;line-height:1.45;color:var(--navy)}

  /* ---------- satu-satunya CTA ---------- */
  .close{background:var(--navy);color:var(--ice);padding:3.5rem 0}
  .close h2{font-size:1.625rem;line-height:1.25;color:#fff;padding-bottom:.875rem}
  .close p{color:rgba(212,245,255,.85);padding-bottom:2rem}
  a.wa{display:flex;align-items:center;justify-content:center;gap:.6rem;
    background:var(--amber);color:var(--navy);text-decoration:none;
    font-family:"Archivo",sans-serif;font-weight:600;font-size:1.0625rem;
    padding:1.0625rem 1.5rem;border-radius:.5rem}
  a.wa:hover{background:var(--amber-dark)}
  a.wa:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
  a.wa svg{width:1.25rem;height:1.25rem;flex:none;fill:currentColor}
  .reassure{font-size:.875rem;color:rgba(212,245,255,.62);padding-top:.875rem;line-height:1.5}

  footer{padding:2.25rem 0 2.75rem;font-size:.8125rem;color:var(--navy-soft);line-height:1.6}
  footer p{padding-bottom:.5rem}
  .social{display:flex;gap:1.5rem;padding-bottom:1.5rem}
  .social a{
    display:inline-flex;align-items:center;gap:.5rem;
    color:var(--navy);text-decoration:none;font-size:.875rem;font-weight:500;
  }
  .social a:hover{color:var(--blue)}
  .social a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:.25rem}
  .social svg{
    width:1.125rem;height:1.125rem;flex:none;stroke:var(--blue);fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  }

  @media (min-width:44rem){
    body{font-size:18px}
    .hero{padding:4.25rem 0 4.5rem}
    .hero h1{font-size:2.875rem}
    .block{padding:4.5rem 0}
    .close{padding:5rem 0}
    .diff dl{grid-template-columns:1fr 1fr}
    .about{flex-direction:row;align-items:flex-start;gap:2.25rem}
    .portrait{width:13rem}
    a.wa{display:inline-flex}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* ============================================================
     TAMBAHAN — halaman layanan, artikel, FAQ
     ============================================================ */
  .hero h1 .kicker{display:block;font-family:"Archivo",sans-serif;font-size:.75rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--amber);padding-bottom:.875rem;line-height:1.4}

  .needs h3 a{color:inherit;text-decoration:none}
  .needs h3 a:hover{color:var(--blue)}
  a.more{display:inline-block;margin-top:.5rem;color:var(--blue);font-weight:600;font-size:.875rem;
    text-decoration:none;border-bottom:1px solid rgba(65,158,189,.35);padding-bottom:.0625rem}
  a.more:hover{border-bottom-color:var(--blue)}
  a.more:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .after{padding-top:1.25rem}

  /* ---------- bar atas (halaman dalam) ---------- */
  .topbar{background:var(--navy);border-bottom:1px solid rgba(212,245,255,.12)}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.875rem;padding-bottom:.875rem}
  .brand{display:flex;align-items:center;gap:.625rem;color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem}
  .brand img{width:2rem;height:2rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--blue)}
  .topbar .cta{color:var(--amber);text-decoration:none;font-weight:600;font-size:.875rem;white-space:nowrap}
  .topbar .cta:hover{text-decoration:underline}
  .brand:focus-visible,.topbar .cta:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:.25rem}

  .hero.page{padding:2.25rem 0 2.5rem}
  .hero.page h1{font-size:1.875rem}
  .crumbs{font-size:.8125rem;color:rgba(212,245,255,.6);padding-bottom:1.25rem;line-height:1.5}
  .crumbs a{color:rgba(212,245,255,.85);text-decoration:none}
  .crumbs a:hover{text-decoration:underline}
  .postmeta{font-size:.8125rem;color:rgba(212,245,255,.6)}

  /* ---------- isi tulisan ---------- */
  .prose h2{font-size:1.5rem;line-height:1.25;padding:2.25rem 0 .625rem}
  .prose h2:first-child{padding-top:0}
  .prose h3{font-size:1.0625rem;font-weight:600;padding:1.5rem 0 .375rem;font-family:"Archivo",sans-serif}
  .prose p{padding-bottom:1rem;color:var(--navy)}
  .prose ul,.prose ol{padding:0 0 1rem 1.25rem}
  .prose li{padding-bottom:.5rem;padding-left:.25rem}
  .prose li::marker{color:var(--blue)}
  .prose a{color:var(--blue);text-underline-offset:.15em}
  .prose strong{font-weight:600}
  .note{background:var(--ice);border-left:3px solid var(--blue);border-radius:.5rem;
    padding:1rem 1.125rem;margin:.5rem 0 1.5rem;font-size:.9375rem;line-height:1.55}
  .prose .note p{padding-bottom:.5rem;color:#2c5f76}
  .prose .note p:last-child{padding-bottom:0}
  .tbl{width:100%;border-collapse:collapse;margin:.25rem 0 1.25rem;font-size:.9375rem;background:#fff}
  .tbl th,.tbl td{border:1px solid var(--line);padding:.5625rem .75rem;text-align:left;vertical-align:top}
  .tbl th{font-weight:600;background:var(--mist)}
  .tbl td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .tblwrap{overflow-x:auto}

  /* ---------- daftar tautan ---------- */
  .links{list-style:none}
  .links li{border-top:1px solid var(--line);padding:1rem 0}
  .links li:last-child{border-bottom:1px solid var(--line)}
  .links a{color:var(--navy);text-decoration:none;font-weight:600;display:block;padding-bottom:.25rem}
  .links a:hover{color:var(--blue)}
  .links span{color:var(--navy-soft);font-size:.9375rem;line-height:1.5;display:block}
  .related{background:#fff;border-top:1px solid var(--line)}

  /* ---------- FAQ ---------- */
  .faq details{border-top:1px solid var(--line)}
  .faq details:last-of-type{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;padding:1.125rem 2rem 1.125rem 0;font-weight:600;list-style:none;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:.25rem;top:1rem;color:var(--blue);font-size:1.25rem;font-weight:400}
  .faq details[open] summary::after{content:"–"}
  .faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .faq .ans{padding-bottom:1.125rem;color:var(--navy-soft);font-size:.9375rem;line-height:1.6}
  .faq .ans p{padding-bottom:.625rem}
  .faq .ans a{color:var(--blue)}

  /* ---------- navigasi footer ---------- */
  .fnav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;padding-bottom:1.5rem;list-style:none}
  .fnav a{color:var(--navy-soft);text-decoration:none;font-size:.8125rem}
  .fnav a:hover{color:var(--blue);text-decoration:underline}

  @media (min-width:44rem){
    .hero.page{padding:3rem 0 3.25rem}
    .hero.page h1{font-size:2.375rem}
  }

  /* ============================================================
     CTA WHATSAPP — atas, mengambang, bawah
     ============================================================ */
  .cta-top{padding:.25rem 0 1.75rem}
  .cta-top a.wa{box-shadow:0 8px 24px -10px rgba(247,173,26,.65);transition:transform .2s,background .2s}
  .cta-top a.wa:hover{transform:translateY(-2px)}
  .cta-note{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8125rem;
    color:rgba(212,245,255,.72);padding-top:.75rem;line-height:1.45}
  .live{width:.5rem;height:.5rem;border-radius:50%;background:#4ade80;flex:none;position:relative}
  .live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ade80;animation:ping 1.8s ease-out infinite}
  .trust{display:flex;flex-wrap:wrap;gap:.375rem .5rem;list-style:none;padding:0 0 1.75rem}
  .trust li{font-size:.75rem;line-height:1;color:var(--ice);border:1px solid rgba(212,245,255,.22);
    border-radius:99px;padding:.4375rem .6875rem;background:rgba(212,245,255,.05)}
  .hero .jump{margin-top:.25rem}

  .topbar .cta{display:inline-flex;align-items:center;gap:.375rem;background:var(--amber);color:var(--navy);
    padding:.4375rem .8125rem;border-radius:99px;font-size:.8125rem}
  .topbar .cta:hover{background:var(--amber-dark);text-decoration:none}
  .topbar .cta svg{width:.9375rem;height:.9375rem;fill:currentColor}

  .wa-float{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:50;
    display:inline-flex;align-items:center;gap:.5rem;background:var(--amber);color:var(--navy);
    text-decoration:none;font-weight:600;font-size:.9375rem;padding:.8125rem 1.125rem .8125rem 1rem;
    border-radius:99px;box-shadow:0 10px 28px -8px rgba(6,63,92,.55),0 0 0 1px rgba(6,63,92,.08);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,background .2s}
  .wa-float:hover{background:var(--amber-dark)}
  .wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
  .wa-float svg{width:1.375rem;height:1.375rem;fill:currentColor;flex:none}
  .wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:0 0 0 0 rgba(247,173,26,.6);animation:halo 2.4s ease-out 1s 4}
  .js .wa-float:not(.show){transform:translateY(calc(100% + 2rem));opacity:0;pointer-events:none}
  footer{padding-bottom:6rem}

  /* ============================================================
     HERO DENGAN ILUSTRASI
     ============================================================ */
  .hero{position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;width:42rem;height:42rem;right:-14rem;top:-20rem;border-radius:50%;
    background:radial-gradient(closest-side,rgba(65,158,189,.32),rgba(65,158,189,0));pointer-events:none;
    animation:drift 14s ease-in-out infinite alternate}
  .hero .wrap{position:relative}
  .hero-art{max-width:20rem;margin:2rem auto 0}
  .hero-art svg{display:block;width:100%;height:auto;overflow:visible}
  @media (min-width:62rem){
    .topbar .wrap,.hero .wrap{max-width:70rem}
    .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);column-gap:4.5rem;align-items:center}
    .hero .wrap > *{grid-column:1;justify-self:start}
    .hero .wrap > .hero-art{grid-column:2;grid-row:1 / span 12;align-self:center;justify-self:stretch;
      max-width:none;width:100%;margin:0}
    .hero .cta-top,.hero .trust{justify-self:stretch}
  }

  /* gaya garis ilustrasi */
  .hero-art .ln,.hero-art .ln-a,.hero-art .ln-b{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  .hero-art .ln{stroke:rgba(212,245,255,.85)}
  .hero-art .ln-a{stroke:var(--amber)}
  .hero-art .ln-b{stroke:var(--blue)}
  .hero-art .thin{stroke-width:1.75}
  .hero-art .thick{stroke-width:4}
  .hero-art .f-a{fill:var(--amber)}
  .hero-art .f-i{fill:var(--ice)}
  .hero-art .f-b{fill:var(--blue)}
  .hero-art .f-n{fill:var(--navy)}
  .hero-art .soft{opacity:.35}
  .hero-art .soft2{fill-opacity:.25}
  .hero-art .canopy{fill:rgba(247,173,26,.16);stroke:var(--amber);stroke-width:2.5;stroke-linejoin:round}
  .hero-art .drop{stroke:rgba(65,158,189,.75);stroke-width:2;stroke-linecap:round}
  .hero-art .coin{fill:var(--amber);stroke:var(--navy);stroke-width:1.5}
  .hero-art .flow{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
  .hero-art .ring{fill:none;stroke:var(--amber);stroke-width:2}
  .hero-art .sunring{fill:none;stroke:rgba(247,173,26,.35);stroke-width:1.5}
  .hero-art .book{stroke:rgba(212,245,255,.85);stroke-width:2}
  .hero-art .jar{fill:rgba(212,245,255,.07);stroke:rgba(212,245,255,.85);stroke-width:2.5;stroke-linejoin:round}
  .hero-art .shield{fill:rgba(247,173,26,.16);stroke:var(--amber);stroke-width:2.5;stroke-linejoin:round}
  .hero-art .heartp{fill:rgba(247,173,26,.18);stroke:var(--amber);stroke-width:2.5;stroke-linejoin:round}
  .hero-art .pulse{fill:none;stroke:var(--ice);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:.28 1;stroke-dashoffset:1.28}
  .hero-art .bub1{fill:rgba(212,245,255,.1);stroke:rgba(212,245,255,.85);stroke-width:2;stroke-linejoin:round}
  .hero-art .page{fill:rgba(212,245,255,.08);stroke:rgba(212,245,255,.85);stroke-width:2;stroke-linejoin:round}

  /* gerak */
  .hero-art *{transform-box:fill-box;transform-origin:center}
  .hero-art .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.4,0,.2,1) .2s forwards}
  .hero-art .d1{animation-delay:.5s}.hero-art .d2{animation-delay:.9s}.hero-art .d3{animation-delay:1.3s}
  .hero-art .float{animation:float 6s ease-in-out infinite}
  .hero-art .drop.long{animation:fall 1.6s linear infinite}
  .hero-art .drop.short{animation:fallshort 1.4s linear infinite}
  .hero-art .glow{animation:glow 3.2s ease-in-out infinite}
  .hero-art .tw{animation:twinkle 2.8s ease-in-out infinite}
  .hero-art .coin,.hero-art .pop,.hero-art .book{opacity:0;animation:pop .5s cubic-bezier(.3,1.5,.5,1) forwards}
  .hero-art .flow{animation:flow 1.2s linear infinite}
  .hero-art .pin{animation:pindrop 1s cubic-bezier(.3,1.4,.5,1) .3s both,float 5s ease-in-out 1.4s infinite}
  .hero-art .ring{animation:ring 2.2s ease-out 1.2s infinite;opacity:0}
  .hero-art .rise{animation:rise .9s ease-out both}
  .hero-art .sun{animation:sunup 1.6s ease-out both}
  .hero-art .sunring{animation:ring 3s ease-out 1.4s infinite;opacity:0}
  .hero-art .beat{animation:pop .5s cubic-bezier(.3,1.5,.5,1) 2s forwards,beat 1.6s ease-in-out 2.6s infinite}
  .hero-art .swing{transform-box:view-box;transform-origin:160px 88px;animation:swing 3s ease-in-out infinite}
  .hero-art .dropcoin{animation:coindrop 2.6s cubic-bezier(.5,0,.8,.4) 1s infinite;opacity:0}
  .hero-art .heart{animation:beat 1.4s ease-in-out infinite}
  .hero-art .pulse{animation:pulse 2.2s linear infinite}
  .hero-art .bub{opacity:0;animation:pop .6s cubic-bezier(.3,1.4,.5,1) forwards}
  .hero-art .typ{animation:typ 1.2s ease-in-out infinite}
  .hero-art .scan{animation:scan 4s ease-in-out infinite}

  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes float{50%{transform:translateY(-5px)}}
  @keyframes fall{from{transform:translateY(-14px);opacity:0}15%{opacity:1}to{transform:translateY(236px);opacity:0}}
  @keyframes fallshort{from{transform:translateY(-12px);opacity:0}25%{opacity:1}80%{opacity:1}to{transform:translateY(38px);opacity:0}}
  @keyframes glow{50%{opacity:.45}}
  @keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
  @keyframes pop{from{opacity:0;transform:scale(.4) translateY(8px)}to{opacity:1;transform:none}}
  @keyframes flow{to{stroke-dashoffset:-24}}
  @keyframes pindrop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
  @keyframes ring{from{transform:scale(.5);opacity:.9}to{transform:scale(1.6);opacity:0}}
  @keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
  @keyframes sunup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
  @keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(1)}45%{transform:scale(1.05)}}
  @keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
  @keyframes coindrop{0%{transform:translateY(0);opacity:0}10%{opacity:1}60%{transform:translateY(112px);opacity:1}70%,100%{transform:translateY(112px);opacity:0}}
  @keyframes pulse{to{stroke-dashoffset:0}}
  @keyframes typ{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
  @keyframes scan{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,-42px)}}
  @keyframes ping{to{transform:scale(2.6);opacity:0}}
  @keyframes halo{to{box-shadow:0 0 0 16px rgba(247,173,26,0)}}
  @keyframes drift{to{transform:translate(-6rem,4rem)}}

  /* ============================================================
     MUNCUL SAAT DI-SCROLL
     ============================================================ */
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .needs li svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease .25s}
  .js .needs li.in svg path{stroke-dashoffset:0}
  .js .steps li::before{transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.5,1) .15s,opacity .3s .15s}
  .js .steps li.in::before{transform:none;opacity:1}
  .needs li{transition:background .2s}
  .diff dl > div{transition:transform .25s,box-shadow .25s}
  .diff dl > div:hover{transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(6,63,92,.45)}

  /* ============================================================
     GRAFIK
     ============================================================ */
  .viz{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:1.125rem 1.125rem 1rem;margin:.5rem 0 1.5rem}
  .viz figcaption{font-size:.875rem;font-weight:600;color:var(--navy);padding-bottom:.875rem;line-height:1.4}
  .cmp{display:grid;gap:.625rem}
  .cmp .row{display:grid;grid-template-columns:6.25rem 1fr;gap:.75rem;align-items:center;font-size:.875rem;color:var(--navy-soft)}
  .cmp .track{height:2.125rem;background:var(--mist);border-radius:.375rem;overflow:hidden}
  .cmp .fill{height:100%;width:var(--w);background:var(--blue);color:#fff;font-weight:600;font-size:.875rem;
    display:flex;align-items:center;justify-content:flex-end;padding:0 .625rem;border-radius:.375rem;
    white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;
    transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
  .cmp .fill.hi{background:var(--amber);color:var(--navy)}
  .viz-note{font-size:.75rem;color:var(--navy-soft);padding:.75rem 0 0 !important;line-height:1.45}
  .stack{display:flex;height:2.375rem;border-radius:.375rem;overflow:hidden;background:var(--mist)}
  .stack span{width:var(--w);transition:width .9s cubic-bezier(.2,.7,.2,1);border-right:2px solid #fff}
  .stack span:last-child{border-right:0}
  .legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding:.875rem 0 0 !important;font-size:.8125rem}
  .prose .legend li{display:flex;align-items:center;gap:.4375rem;padding:0;color:var(--navy-soft);line-height:1.3}
  @media (max-width:30rem){.legend{grid-template-columns:1fr}}
  .legend i{width:.75rem;height:.75rem;border-radius:.1875rem;flex:none}
  .legend b{margin-left:auto;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
  .js .viz:not(.in) .fill,.js .viz:not(.in) .stack span{width:0}

  /* ============================================================
     HORMATI PENGATURAN "KURANGI GERAKAN"
     ============================================================ */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    .hero-art .draw{stroke-dashoffset:0}
    .hero-art .coin,.hero-art .pop,.hero-art .book,.hero-art .bub,.hero-art .ring{opacity:1}
    .hero-art .drop,.hero-art .dropcoin,.hero-art .ring,.hero-art .sunring{opacity:0}
    .hero-art .pulse{stroke-dasharray:none}
    .js .rv{opacity:1;transform:none}
    .js .needs li svg path{stroke-dashoffset:0}
    .js .steps li::before{transform:none;opacity:1}
    .js .viz:not(.in) .fill,.js .viz:not(.in) .stack span{width:var(--w)}
    html{scroll-behavior:auto}
  }

  /* ============================================================
     DESKTOP — satu garis kiri yang sama untuk semua bagian
     ============================================================ */
  .side{display:none}
  @media (min-width:62rem){body:has(.side) .wa-float{display:none}}
  @media (min-width:62rem){
    .wrap{max-width:70rem}
    .block h2,.block .intro,.close h2,.close p,.about p{max-width:42rem}

    /* beranda: kartu situasi */
    .sits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-top:.75rem}
    .sits li,.sits li:last-child{border:1px solid var(--line);border-radius:.75rem;background:#fff;padding:1.375rem 1.25rem}
    .diff dl{grid-template-columns:repeat(2,1fr);gap:1rem}
    .needs ul{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem}
    .needs li,.needs li:first-of-type{border-top:1px solid var(--line);padding:1.5rem 0}
    .steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;padding-top:.75rem}
    .steps li{padding-bottom:0}
    .related .links{display:grid;grid-template-columns:repeat(2,1fr);column-gap:3rem}
    .related .links li,.related .links li:last-child{border-top:1px solid var(--line);border-bottom:0}
    .about{gap:3.5rem;align-items:center}
    .portrait{width:16rem;max-width:16rem}
    .close a.wa{display:inline-flex;padding-left:2rem;padding-right:2rem}

    /* halaman dalam: isi + kartu WhatsApp di kanan */
    .layout{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,19rem);justify-content:space-between;gap:4rem;align-items:start}
    .side{display:block;position:sticky;top:1.5rem;background:#fff;border:1px solid var(--line);border-radius:.875rem;
      padding:1.5rem 1.375rem;box-shadow:0 18px 40px -28px rgba(6,63,92,.5)}
    .side img{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--ice)}
    .side h2{font-size:1.25rem;line-height:1.3;padding:1rem 0 .5rem}
    .side p{font-size:.875rem;color:var(--navy-soft);line-height:1.55;padding-bottom:1.125rem}
    .side a.wa{font-size:.9375rem;padding:.875rem 1rem}
    .side ul{list-style:none;padding-top:1rem;display:grid;gap:.4375rem;font-size:.8125rem;color:var(--navy-soft)}
    .side li::before{content:"✓";color:var(--blue);font-weight:600;margin-right:.5rem}
  }
  .diff .wrap{background:none;border:0;border-radius:0;padding-top:0;padding-bottom:0}
  @media (min-width:62rem){.diff .wrap{padding-left:1.375rem;padding-right:1.375rem}}
  .portrait{height:auto}

  /* ============================================================
     Cek kebutuhan (kuesioner) — ditambahkan Okt 2026
     ============================================================ */

  /* --- tombol & kotak ajakan di halaman lain --- */
  .quiz-link{display:inline-block;line-height:1.45;color:var(--ice);text-decoration:none;
    font-weight:600;font-size:.9375rem;border:1px solid rgba(212,245,255,.35);border-radius:.5rem;
    padding:.75rem 1.125rem;margin:0 0 1.75rem;transition:border-color .2s,color .2s}
  .quiz-link:hover{border-color:var(--amber);color:#fff}
  .quiz-link:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
  .quiz-link span{color:var(--amber);white-space:nowrap}

  .quiz-cta{background:var(--ice);border-radius:.75rem;padding:1.25rem;margin-top:1.75rem;
    display:flex;flex-direction:column;gap:.875rem}
  .quiz-cta p,.prose .quiz-cta p{font-weight:600;color:var(--navy);font-size:1rem;line-height:1.45;padding:0}
  .quiz-cta p span{display:block;font-weight:400;color:#2c5f76;font-size:.9375rem;padding-top:.25rem}
  .quiz-cta a,.prose .quiz-cta a{align-self:flex-start;background:var(--navy);color:#fff;text-decoration:none;
    font-weight:600;font-size:.9375rem;padding:.75rem 1.125rem;border-radius:.5rem;white-space:nowrap}
  .quiz-cta a:hover{background:#0a5273}
  .quiz-cta a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
  @media (min-width:44rem){
    .quiz-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
    .quiz-cta a,.prose .quiz-cta a{align-self:auto}
  }

  .close p.quiz-alt{padding:1rem 0 0}
  .quiz-alt a{color:var(--amber);font-weight:600;font-size:.9375rem;text-decoration:none;
    border-bottom:1px solid rgba(247,173,26,.45);padding-bottom:.125rem}
  .quiz-alt a:hover{border-bottom-color:var(--amber)}

  /* --- halaman kuesioner --- */
  .quiz-sec{padding:2rem 0 3.5rem}
  .qcard{max-width:38rem;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:.875rem;
    padding:1.5rem 1.25rem;box-shadow:0 12px 32px -24px rgba(6,63,92,.45)}
  .qcard h2{font-size:1.5rem;line-height:1.25;padding-bottom:1.125rem}
  .q-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);padding-bottom:.5rem}
  .q-points{list-style:none;display:grid;gap:.625rem;padding:.25rem 0 1.5rem}
  .q-points li{display:flex;gap:.625rem;font-size:.9375rem;color:var(--navy-soft);line-height:1.5}
  .q-points li::before{content:"✓";color:var(--blue);font-weight:600}
  .q-btn{display:flex;width:100%;justify-content:center;background:var(--navy);color:#fff;border:0;border-radius:.5rem;
    padding:1.0625rem 1.5rem;font:600 1.0625rem/1 "Archivo",sans-serif;cursor:pointer}
  .q-btn:hover{background:#0a5273}
  .q-btn:focus-visible,.q-opt:focus-visible,.q-ghost:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .q-fine{font-size:.8125rem;color:var(--navy-soft);text-align:center;padding-top:.875rem}
  .q-ghost{background:none;border:0;color:var(--navy-soft);font:500 .9375rem "Archivo",sans-serif;cursor:pointer;padding:.5rem 0}
  .q-ghost:hover{color:var(--navy)}

  .q-prog{display:flex;align-items:center;gap:.75rem;padding-bottom:1.25rem}
  .q-bar{flex:1;height:.375rem;background:var(--ice);border-radius:99px;overflow:hidden}
  .q-bar i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .3s}
  .q-prog small{font-size:.8125rem;color:var(--navy-soft);font-variant-numeric:tabular-nums}
  .q-help{color:var(--navy-soft);font-size:.9375rem;margin-top:-.625rem;padding-bottom:1rem}
  .q-opts{display:grid;gap:.625rem}
  .q-opt{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:#fff;color:var(--navy);
    border:1.5px solid var(--line);border-radius:.625rem;padding:.875rem 1rem;
    font:500 1rem/1.35 "Archivo",sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
  .q-opt:hover{border-color:var(--blue)}
  .q-opt.sel{border-color:var(--navy);background:var(--ice)}
  .q-opt small{display:block;font-weight:400;font-size:.8125rem;color:var(--navy-soft);padding-top:.125rem}
  .q-dot{flex:0 0 1.125rem;height:1.125rem;border-radius:50%;border:2px solid var(--line);background:#fff}
  .q-opt.sel .q-dot{border-color:var(--navy);box-shadow:inset 0 0 0 .25rem var(--navy)}
  .q-nav{min-height:2.5rem;padding-top:.75rem}

  .q-top{background:var(--navy);color:var(--ice);border-radius:.75rem;padding:1.25rem;margin-bottom:.875rem}
  .q-top .q-eyebrow{color:var(--amber)}
  .q-top h3{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:1.625rem;line-height:1.2;color:#fff}
  .q-top p{color:rgba(212,245,255,.85);font-size:.9375rem;line-height:1.55;padding-top:.5rem}
  .q-est{margin-top:.875rem;background:rgba(212,245,255,.1);border-radius:.5rem;padding:.75rem .875rem;font-size:.9375rem;color:#fff;line-height:1.5}
  .q-est small{display:block;font-size:.75rem;color:rgba(212,245,255,.65);padding-top:.25rem}
  .q-read{display:inline-block;margin-top:.875rem;color:var(--amber);font-weight:600;font-size:.875rem;text-decoration:none;
    border-bottom:1px solid rgba(247,173,26,.45)}
  .q-needs{display:grid;gap:.625rem;padding-bottom:1.25rem}
  .q-need{border:1px solid var(--line);border-radius:.625rem;padding:.875rem 1rem}
  .q-row{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
  .q-row b{font-weight:600;font-size:1rem}
  .q-tag{font-size:.75rem;font-weight:600;border-radius:99px;padding:.1875rem .625rem;white-space:nowrap}
  .q-tag.hi{background:#fde8dd;color:#c2410c}
  .q-tag.md{background:#fff3d6;color:#8a5a00}
  .q-tag.lo{background:#e3f3ea;color:#2f7d5b}
  .q-tag.na{background:var(--mist);color:var(--navy-soft)}
  .q-meter{height:.375rem;background:var(--mist);border-radius:99px;margin:.625rem 0 .5rem;overflow:hidden}
  .q-meter i{display:block;height:100%;border-radius:99px}
  .q-need p{font-size:.875rem;color:var(--navy-soft);line-height:1.5;padding-top:.25rem}
  .q-need .q-est2{color:var(--navy)}
  .q-note{background:var(--ice);border-left:3px solid var(--blue);border-radius:.5rem;padding:1rem 1.125rem;
    font-size:.9375rem;color:#2c5f76;line-height:1.55;margin-bottom:1rem}
  .q-note b{color:var(--navy);font-weight:600}
  .q-again{text-align:center;padding-top:.5rem}
  .q-disc{font-size:.75rem;color:var(--navy-soft);line-height:1.5;padding-top:.75rem}
  .q-fade{animation:qf .25s ease}
  @keyframes qf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (min-width:44rem){
    .qcard{padding:2rem}
    .qcard h2{font-size:1.75rem}
  }