
    *{ -webkit-tap-highlight-color:transparent }
    :root{ --ring:2px; --blue-from:#2563eb; --blue-via:#3b82f6; --blue-to:#38bdf8; --blue-ring:rgba(59,130,246,.45) }

    /* Header transparan -> blur saat scroll */
    header.site-header{
      position:fixed; inset:0 0 auto 0; z-index:60;
      background:transparent;
      transition:background .2s, backdrop-filter .2s, box-shadow .2s, color .2s;
    }
    header.site-header.is-stuck{
      background:rgba(255,255,255,.85);
      backdrop-filter:blur(8px);
      box-shadow:0 10px 30px -20px rgba(2,6,23,.35);
    }
    header .nav-link{ color:#fff }
    header.site-header.is-stuck .nav-link{ color:#1f2937 }
    header .nav-link:hover{ background-color:rgba(255,255,255,.2); border-radius:.5rem }
    header.site-header.is-stuck .nav-link:hover{ background-color:#f1f5f9 }

    /* Nav atas: state aktif (konsisten di semua halaman) */
    header .nav-link[aria-current="page"]{ background:rgba(255,255,255,.18); color:#fff; border-radius:.5rem }
    header.site-header.is-stuck .nav-link[aria-current="page"]{ background:rgba(15,23,42,.06); color:#1f2937 }

    /* Scroll reveal */
    .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
    .reveal.in-view{ opacity:1; transform:translateY(0) }
    .reveal.delay-1{ transition-delay:.08s }
    .reveal.delay-2{ transition-delay:.16s }
    .reveal.delay-3{ transition-delay:.24s }

    /* Back-to-top gradien biru */
    #backTop{
      opacity:0; pointer-events:none; color:#fff;
      background-image:linear-gradient(135deg,var(--blue-from),var(--blue-via),var(--blue-to));
      box-shadow:0 12px 30px -10px rgba(59,130,246,.45);
      transition:opacity .2s ease, transform .12s ease;
    }
    #backTop.show{ opacity:1; pointer-events:auto }
    #backTop:active{ transform:scale(.96) }

    /* Konten */
    .prose p{ margin-top:.6rem; margin-bottom:.6rem }
    .prose ul{ list-style:disc; padding-left:1.25rem }
    .prose ol{ list-style:decimal; padding-left:1.25rem }
    .badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; padding:.35rem .6rem; border-radius:9999px; border:1px solid rgb(226 232 240); background:#fff }
    .step{ display:flex; gap:.75rem; align-items:flex-start }
    .step-num{ flex:none; height:28px; width:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#1e3a8a; background:#eff6ff; border:1px solid #bfdbfe }
