/* Gambar manual:
    images/logo.png, images/hero-bg.jpg (opsional, latar banner),
    images/panduan-pengaduan.png, images/panduan-aspirasi.png, images/panduan-lacak.png (tangkapan layar tiap panduan) */
:root {
    --hero-bg: url('images/hero-bg.jpg');
    --navy: #0b1f5c;
    --blue: #1d6bf3;
    --purple: #8b3dff;
    --green: #27b863;
    --text: #2b3a55;
    --muted: #5b6985;
    --line: #dde5f3;
    --soft: #f4f7fd;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    background: var(--soft);
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

svg {
    display: block
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit
}

/* BANNER */
.banner {
    position: relative;
    height: 210px;
    background: #16328a var(--hero-bg) center/cover no-repeat;
    overflow: hidden;
    animation: pan 14s ease-in-out infinite alternate
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 44, 130, .92), rgba(60, 50, 200, .7))
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    animation: floatY 8s ease-in-out infinite
}

.banner-in {
    position: relative;
    padding: 44px 92px 0;
    color: #fff
}

.crumb {
    font-size: 13px;
    opacity: .85;
    margin-bottom: 10px;
    animation: aUp .8s var(--ease) .1s both
}

.banner h1 {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.5px;
    animation: aUp .8s var(--ease) .2s both
}

.banner h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #27d3f0, #3a8bff 50%, #b45cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.banner p {
    font-size: 14.5px;
    margin-top: 8px;
    opacity: .9;
    max-width: 640px;
    animation: aUp .8s var(--ease) .35s both
}

/* LAYOUT */
.wrap {
    position: relative;
    z-index: 5;
    margin: -14px 84px 0;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    gap: 34px
}

.panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(20, 50, 130, .09)
}

.title {
    text-align: center;
    margin-bottom: 26px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: .3px
}

.title h2 {
    font-size: 28px;
    color: var(--navy);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: -.4px
}

.title p {
    font-size: 14px;
    color: var(--muted);
    margin-top: 6px
}

/* ===== PANDUAN (TAB) ===== */
.guide {
    padding: 34px 40px 40px;
    animation: aUp .9s var(--ease) .2s both
}

.tabs {
    position: relative;
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--soft);
    border-radius: 40px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 34px
}

.tabs .ind {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    border-radius: 30px;
    background: linear-gradient(90deg, #17a2ff, #9a45f5);
    box-shadow: 0 8px 18px rgba(110, 70, 245, .3);
    transition: left .5s var(--ease), width .5s var(--ease)
}

.tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    transition: color .3s
}

.tab.on {
    color: #fff
}

.pane {
    display: none;
    grid-template-columns: 1fr 420px;
    gap: 44px;
    align-items: start
}

.pane.show {
    display: grid
}

.tl {
    display: flex;
    flex-direction: column
}

.st {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 28px
}

.st:last-child {
    padding-bottom: 0
}

.st::before,
.st::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px
}

.st::before {
    background: var(--line)
}

.st::after {
    background: linear-gradient(#17a2ff, #9a45f5);
    transform: scaleY(0);
    transform-origin: top
}

.st:last-child::before,
.st:last-child::after {
    display: none
}

.st .n {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ea7ff, #8b3dff);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(110, 70, 245, .3);
    transition: transform .4s var(--ease)
}

.st:hover .n {
    transform: scale(1.12) rotate(-8deg)
}

.st b {
    display: block;
    font-size: 15.5px;
    color: var(--navy);
    font-weight: 600;
    margin-top: 2px
}

.st p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 3px
}

.pane.show .st {
    animation: aUp .6s var(--ease) calc(var(--i)*.12s) both
}

.pane.show .st::after {
    animation: grow .6s var(--ease) calc(var(--i)*.18s + .35s) forwards
}

.pane.show .st .n {
    animation: pop .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i)*.12s + .1s) both
}

.shot {
    position: sticky;
    top: 104px;
    border-radius: 16px;
    background: var(--soft);
    border: 1px solid var(--line);
    overflow: hidden;
    animation: floatY 7s ease-in-out infinite
}

.shot .bar {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    background: #e9effa
}

.shot .bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c4d0ea
}

.shot .bar i:nth-child(1) {
    background: #ff6b6b
}

.shot .bar i:nth-child(2) {
    background: #ffc02e
}

.shot .bar i:nth-child(3) {
    background: #27b863
}

.shot .slot {
    position: relative;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px;
    border-radius: 10px
}

.shot .slot span {
    position: absolute;
    font-size: 12px;
    color: #9fb0d0;
    text-align: center;
    padding: 6px;
    pointer-events: none
}

.shot .slot img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain
}

/* ===== PERBEDAAN ===== */
.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.opt {
    padding: 32px 34px 34px;
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s
}

.opt::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease)
}

.opt:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(20, 50, 130, .15)
}

.opt:hover::before {
    transform: scaleX(1)
}

.opt .ic {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: transform .5s var(--ease)
}

.opt:hover .ic {
    transform: scale(1.12) rotate(-8deg)
}

.opt h3 {
    font-size: 19px;
    color: var(--navy);
    margin: 16px 0 6px
}

.opt>p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.7
}

.opt ul {
    margin: 16px 0 22px
}

.opt li {
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 9px
}

.opt li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
    margin-top: 7px
}

.opt .go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 24px;
    border-radius: 30px;
    border: 1.5px solid var(--c);
    color: var(--c);
    font-size: 13.5px;
    font-weight: 600;
    transition: all .3s var(--ease)
}

.opt .go svg {
    transition: transform .3s var(--ease)
}

.opt .go:hover {
    background: var(--c);
    color: #fff;
    transform: translateY(-2px)
}

.opt .go:hover svg {
    transform: translateX(5px)
}

/* ===== ALUR STATUS ===== */
.status {
    padding: 34px 40px 40px
}

.flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 6px
}

.flow::before,
.flow .fill {
    content: "";
    position: absolute;
    top: 31px;
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    border-radius: 4px;
    background: var(--line)
}

.flow .fill {
    background: linear-gradient(90deg, #17a2ff, #9a45f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s var(--ease) .5s
}

.flow.in .fill {
    transform: scaleX(1)
}

.nd {
    position: relative;
    text-align: center;
    padding: 0 10px
}

.nd .c {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 4px solid var(--col);
    box-shadow: 0 8px 20px rgba(20, 50, 130, .12);
    position: relative;
    z-index: 1;
    transform: scale(0);
    transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i)*.4s + .3s)
}

.flow.in .nd .c {
    transform: scale(1)
}

.nd:hover .c {
    animation: bump .5s
}

.nd b {
    display: block;
    font-size: 15px;
    color: var(--navy);
    margin-top: 14px
}

.nd p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 4px
}

.pill {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--pbg);
    color: var(--col)
}

/* ===== FAQ ===== */
.faq {
    max-width: 860px;
    margin: 0 auto;
    width: 100%
}

.fq {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 50, 130, .07);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .3s
}

.fq:hover {
    box-shadow: 0 10px 26px rgba(20, 50, 130, .12)
}

.fq button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    text-align: left;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy)
}

.fq .pl {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    transition: transform .4s var(--ease), background .3s, color .3s
}

.fq.open .pl {
    transform: rotate(135deg);
    background: var(--blue);
    color: #fff
}

.fq .ans {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease)
}

.fq .ans p {
    padding: 0 26px 22px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--muted)
}

/* ===== CTA ===== */
.cta {
    margin-left: 0 !important;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 46px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #fff;
    background: linear-gradient(120deg, #1d6bf3, #7a3df0, #1d6bf3);
    background-size: 200% 200%;
    animation: gradShift 9s ease infinite
}

.cta .orb {
    background: rgba(255, 255, 255, .1)
}

.cta h2 {
    font-size: 26px;
    position: relative
}

.cta p {
    font-size: 14px;
    opacity: .92;
    margin-top: 6px;
    position: relative
}

.cta .bt {
    display: flex;
    gap: 14px;
    position: relative;
    flex-wrap: wrap
}

.cta .bt a {
    height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s
}

.cta .bt .w {
    background: #fff;
    color: var(--blue)
}

.cta .bt .w:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25)
}

.cta .bt .o {
    border: 1.5px solid #fff
}

.cta .bt .o:hover {
    background: #fff;
    color: var(--blue);
    transform: translateY(-3px)
}

/* ===== ANIMASI SCROLL ===== */
.rv {
    opacity: 0;
    transform: translateY(36px) scale(.97);
    transition: opacity .9s ease, transform .9s var(--ease);
    transition-delay: var(--d, 0s)
}

.rv.in {
    opacity: 1;
    transform: none
}

.rv.done {
    transition: transform .4s var(--ease), box-shadow .4s, opacity .3s;
    transition-delay: 0s
}

@keyframes aUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes aDown {
    from {
        opacity: 0;
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.4)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes grow {
    to {
        transform: scaleY(1)
    }
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@keyframes pan {
    from {
        background-position: 50% 35%
    }

    to {
        background-position: 50% 65%
    }
}

@keyframes gradShift {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes bump {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.18)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.eyebrow svg {
    animation: spin 6s linear infinite
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1 !important;
        transform: none !important
    }

    .nd .c {
        transform: none !important
    }

    .flow .fill {
        transform: none !important
    }

    .st::after {
        transform: scaleY(1) !important
    }
}

@media (max-width:1100px) {
    header {
        padding: 0 24px;
        flex-wrap: wrap;
        height: auto;
        gap: 10px;
        position: relative
    }

    nav {
        margin: 0;
        flex-wrap: wrap;
        gap: 18px
    }

    .banner-in {
        padding: 36px 24px 0
    }

    .wrap {
        margin: -40px 16px 0
    }

    .guide,
    .status {
        padding: 24px 18px
    }

    .tabs {
        flex-direction: column;
        border-radius: 20px;
        width: 100%
    }

    .tabs .ind {
        display: none
    }

    .tab.on {
        background: linear-gradient(90deg, #17a2ff, #9a45f5)
    }

    .pane.show {
        grid-template-columns: 1fr
    }

    .shot {
        position: static
    }

    .two {
        grid-template-columns: 1fr
    }

    .flow {
        grid-template-columns: 1fr 1fr;
        row-gap: 30px
    }

    .flow::before,
    .flow .fill {
        display: none
    }

    .cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 26px
    }
}
/* =====================================================================
   TAMBAHAN ANIMASI, ELEMEN & WARNA (visual saja — tanpa request baru)
   Hanya transform/opacity; berhenti saat tab tersembunyi (.paused)
   dan mati otomatis bila pengguna memilih "reduce motion".
   ===================================================================== */
:root { --pink: #ec4899; --teal: #06b6d4; --spring: cubic-bezier(.34, 1.56, .64, 1); }

/* latar aurora lembut di belakang halaman */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(520px 380px at 8% 18%, rgba(23, 162, 255, .13), transparent 70%),
        radial-gradient(520px 420px at 95% 40%, rgba(139, 61, 255, .12), transparent 70%),
        radial-gradient(460px 360px at 40% 100%, rgba(39, 184, 99, .09), transparent 70%);
    animation: auroraMove 22s ease-in-out infinite alternate
}
@keyframes auroraMove { from { transform: translate3d(0, 0, 0) scale(1) } to { transform: translate3d(-2%, 3%, 0) scale(1.06) } }

.scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none }
.scroll-bar b { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #17a2ff, #9a45f5, var(--pink)) }

/* banner */
.banner::after {
    content: ""; position: absolute; inset: -50% 0; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: translateX(-120%) skewX(-18deg); animation: sheen 9s ease-in-out 1.5s infinite
}
@keyframes sheen { 0% { transform: translateX(-120%) skewX(-18deg) } 40%, 100% { transform: translateX(380%) skewX(-18deg) } }
.banner h1 em { background-size: 200% 100%; animation: textShift 6s ease-in-out infinite alternate }
@keyframes textShift { from { background-position: 0 50% } to { background-position: 100% 50% } }
.b-chips { position: absolute; right: 92px; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%) }
.b-chips span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; color: #fff;
    font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: chipIn .8s var(--ease) both, floatY 6s ease-in-out infinite
}
.b-chips span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 8px #6ee7b7 }
.b-chips span:nth-child(1) { animation-delay: .5s, 0s; align-self: flex-end }
.b-chips span:nth-child(2) { animation-delay: .7s, -2s }
.b-chips span:nth-child(3) { animation-delay: .9s, -4s; align-self: flex-end }
@keyframes chipIn { from { opacity: 0; transform: translateX(30px) } to { opacity: 1; transform: none } }

/* judul seksi */
.eyebrow { padding: 5px 14px; border-radius: 30px; background: linear-gradient(90deg, #e6f3ff, #f1e8ff) }
.title h2 { position: relative; display: inline-block; padding-bottom: 10px }
.title h2::after {
    content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #17a2ff, #9a45f5, var(--pink)); transform: scaleX(0); transition: transform .9s var(--ease) .4s
}
.title.in h2::after, .rv.in .title h2::after { transform: scaleX(1) }

/* panduan */
.guide { position: relative }
.guide::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #17a2ff, #9a45f5, var(--pink), #17a2ff); background-size: 200% 100%; animation: textShift 6s linear infinite
}
.tab { transition: color .3s, transform .3s var(--spring) }
.tab:hover { transform: translateY(-1px) }
.tab svg { transition: transform .4s var(--spring) }
.tab:hover svg, .tab.on svg { transform: rotate(-10deg) scale(1.1) }
.prog { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 22px }
.prog::before { content: ""; position: absolute; left: 0; right: 100px; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 5px; background: var(--line) }
.prog i { position: relative; flex: 1; height: 5px; margin-right: 0; border-radius: 5px; background: linear-gradient(90deg, #17a2ff, #9a45f5, var(--pink)); transform-origin: 0 50%; transform: scaleX(.25); transition: transform .7s var(--ease) }
.prog small { position: relative; flex: none; width: 88px; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: right }
.prog small b { color: var(--blue) }
.st { cursor: pointer; border-radius: 14px; transition: background .3s }
.st:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px }
.st > div:last-child { transition: transform .4s var(--ease) }
.st.act > div:last-child { transform: translateX(6px) }
.st.act b { background: linear-gradient(90deg, #17a2ff, #9a45f5); -webkit-background-clip: text; background-clip: text; color: transparent }
.st.act .n { box-shadow: 0 0 0 6px rgba(139, 61, 255, .14), 0 8px 18px rgba(110, 70, 245, .4) }
.st .n { position: relative }
.st.act .n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #9a45f5; animation: ringPulse 1.8s ease-out infinite }
.st.pass .n { background: linear-gradient(135deg, #27b863, #06b6d4) }
@keyframes ringPulse { from { transform: scale(.85); opacity: .9 } to { transform: scale(1.6); opacity: 0 } }
.shot { box-shadow: 0 18px 40px -12px rgba(70, 60, 200, .25) }
.shot .slot { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; background: repeating-linear-gradient(45deg, rgba(23, 162, 255, .04) 0 10px, transparent 10px 20px) }

/* pengaduan vs aspirasi */
.opt > * { position: relative; z-index: 1 }
.opt::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 14%, transparent), transparent 65%)
}
.opt:hover::after { opacity: 1 }
.opt .ic { position: relative }
.opt .ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: ringPulse 3s ease-out infinite }
.opt.in li { animation: aUp .5s var(--ease) backwards }
.opt.in li:nth-child(1) { animation-delay: .35s } .opt.in li:nth-child(2) { animation-delay: .45s } .opt.in li:nth-child(3) { animation-delay: .55s }
.opt li { transition: transform .3s var(--ease), color .3s }
.opt li:hover { transform: translateX(6px); color: var(--navy) }
.opt .go { position: relative; overflow: hidden }
.opt .go::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease) }
.opt .go:hover::before { transform: translateX(120%) }

/* alur status */
.flow .fill { overflow: hidden }
.flow .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: translateX(-100%); animation: lineShine 3s ease-in-out 3s infinite }
@keyframes lineShine { to { transform: translateX(100%) } }
.nd { border-radius: 16px; transition: transform .35s var(--ease), background .3s; padding-bottom: 12px }
.nd:hover { transform: translateY(-5px); background: var(--pbg) }
.nd > * { position: relative; z-index: 1 }
.nd::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .8), transparent 70%)
}
.nd:hover::after { opacity: 1 }
.nd .c::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--col); opacity: 0 }
.flow.in .nd .c::after { animation: wave 6s ease-out calc(var(--i) * .6s + 3s) infinite }
@keyframes wave { 0% { transform: scale(.85); opacity: .7 } 20%, 100% { transform: scale(1.35); opacity: 0 } }
.pill { position: relative; overflow: hidden }
.flow.in .pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); animation: lineShine 4s ease-in-out calc(var(--i) * .5s + 3.5s) infinite }

/* FAQ */
.fq { position: relative; transition: box-shadow .3s, transform .3s var(--ease) }
.fq:hover { transform: translateX(4px) }
.fq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#17a2ff, #9a45f5); transform: scaleY(0); transition: transform .4s var(--ease) }
.fq.open::before { transform: scaleY(1) }
.fq.open { box-shadow: 0 14px 32px rgba(110, 70, 245, .16) }
.fq.open button { color: var(--blue) }
.fq button { transition: color .3s }
.fq button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 14px }
.fq .ans p { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease .1s, transform .4s var(--ease) .1s }
.fq.open .ans p { opacity: 1; transform: none }

/* CTA */
.cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 120%, rgba(236, 72, 153, .35), transparent 50%) }
.cta h2, .cta p, .cta .bt { z-index: 1 }
.cta .bt .w { position: relative; animation: btnGlow 2.8s ease-in-out infinite }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55) } 60% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0) } }
.cta .bt .w:active, .cta .bt .o:active { transform: scale(.96) }

/* tombol ke atas */
.totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #17a2ff, #9a45f5);
    box-shadow: 0 10px 24px rgba(110, 70, 245, .4); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
    transition: opacity .3s, transform .4s var(--spring)
}
.totop.show { opacity: 1; transform: none; pointer-events: auto }
.totop:hover { transform: translateY(-3px) }

.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important }

@media (max-width: 1100px) { .b-chips { display: none } }
@media (max-width: 700px) {
    .title h2 { font-size: 23px }
    .totop { right: 14px; bottom: 14px; width: 42px; height: 42px }
    .prog small { display: none } .prog::before { right: 0 }
}
@media (prefers-reduced-motion: reduce) {
    .title h2::after { transform: scaleX(1) !important }
    .fq .ans p { opacity: 1 !important; transform: none !important }
    .prog i { transition: none !important }
}

/* =====================================================
   RESPONSIF MOBILE - Halaman Cara Penggunaan
   ===================================================== */
@media (max-width: 768px) {
    /* Header */
    header { padding: 0 16px; height: auto; flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .brand-text strong { font-size: 24px; }
    .brand-text small { display: none; }
    nav { display: none; }
    .auth { gap: 8px; }
    .btn-login { height: 38px; padding: 0 16px; font-size: 13px; }

    /* Banner */
    .banner { height: 160px; }
    .banner-in { padding: 30px 16px 0; }
    .banner h1 { font-size: 24px; }
    .banner p { font-size: 13px; max-width: 100%; }

    /* Layout konten utama - jadi 1 kolom */
    .main { padding: 0 16px 60px; }
    .layout { grid-template-columns: 1fr; gap: 20px; }
    .sidebar { display: none; }

    /* Steps / panduan */
    .step-grid { grid-template-columns: 1fr; }
    .tabs { flex-wrap: wrap; gap: 8px; }
    .tab { font-size: 13px; padding: 8px 14px; }
}

@media (max-width: 480px) {
    header { padding: 10px 14px; }
    .brand-text strong { font-size: 18px; }
    .btn-login { display: none; }
    .banner h1 { font-size: 20px; }
    .title h2 { font-size: 20px; }
    .main { padding: 0 12px 50px; }
}