/*
 * tokomdr — tampilan toko yang bersih dan tenang.
 * Latar abu-abu sangat muda, kartu putih bersudut lembut, satu warna utama
 * (biru tokomdr), dan tipografi Archivo lebar normal. Tanpa build step: file
 * ini langsung dipakai apa adanya.
 */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
    --meja: #f6f7fb;
    --kertas: #ffffff;
    --tinta: #0f172a;
    --tinta-2: #475569;
    --tinta-3: #64748b;
    --karbon: #1f3bcb;
    --karbon-tua: #162d9e;
    --karbon-pucat: #eef1fd;
    --karbon-muda: #d9e0fb;
    --garis: #e2e8f0;
    --garis-kuat: #cbd5e1;
    --garis-tipis: #f1f5f9;
    --merah: #c62828;
    --merah-pucat: #fdecec;
    --stabilo: #f5b301;
    --stabilo-pucat: #fff8e1;
    --hijau: #15803d;
    --hijau-pucat: #e9f7ef;
    --jingga: #b45309;
    --jingga-pucat: #fff4e0;
    --salinan-penjual: #fde7ee;
    --salinan-admin: #fff3c4;
    --malam: #0b1430;
    --merek: #12177c;

    --bayang-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --bayang-2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -12px rgba(15, 23, 42, 0.16);
    --bayang-3: 0 2px 4px rgba(15, 23, 42, 0.04), 0 24px 48px -16px rgba(31, 59, 203, 0.22);

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lebar: 1180px;
    --r: 10px;
    --r-besar: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--meja);
    color: var(--tinta);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

img, svg { max-width: 100%; }

a { color: var(--karbon); text-underline-offset: 3px; }
a:hover { color: var(--karbon-tua); }

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; max-width: 68ch; }

.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 20px; }
.wadah--sempit { max-width: 760px; }
.wadah--kecil { max-width: 480px; }
@media (max-width: 480px) { .wadah { padding: 0 16px; } }

.bagian { padding-top: 40px; padding-bottom: 40px; }
.redup { color: var(--tinta-2); }
.kecil { font-size: 0.875rem; }
.kanan { text-align: right; }
.tengah { text-align: center; }
.tebal { font-weight: 700; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--kertas); padding: 8px 12px; border-radius: var(--r); box-shadow: var(--bayang-2); }

:focus-visible { outline: 2px solid var(--karbon); outline-offset: 2px; }

.ikon { width: 20px; height: 20px; flex: none; display: block; }

/* ── Kepala & kaki halaman ─────────────────────────────────────────────── */

.kepala {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--garis);
    position: relative;
    z-index: 40;
}
@supports (backdrop-filter: blur(8px)) {
    .kepala { background: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
}
@media (min-width: 721px) { .kepala { position: sticky; top: 0; } }
.kepala__isi { display: flex; align-items: center; gap: 28px; min-height: 68px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }

.merek {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.16em;
    color: var(--merek);
    text-decoration: none;
    line-height: 1;
}
.merek svg { height: 26px; width: auto; flex: none; }
.merek:hover { color: var(--merek); }

.menu { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.menu a, .menu-akun a, .menu-akun button {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--tinta-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.4;
}
.menu a:hover, .menu-akun a:hover { background: var(--garis-tipis); color: var(--tinta); }
.menu a[aria-current="page"], .menu-akun a[aria-current="page"] { background: var(--karbon-pucat); color: var(--karbon-tua); }
.menu-akun { display: flex; gap: 4px; align-items: center; }
.menu-akun form { margin: 0; }
.menu-akun button { background: none; border: 0; font: inherit; font-weight: 600; font-size: 0.94rem; cursor: pointer; }
.menu-akun button:hover { color: var(--merah); background: var(--merah-pucat); }
.menu-akun a.tombol { color: #fff; padding: 6px 16px; margin-left: 6px; }
.menu-akun a.tombol:hover { background: var(--karbon-tua); color: #fff; }

@media (max-width: 720px) {
    .kepala__isi { gap: 4px 12px; min-height: 60px; }
    .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; margin: 0 -16px; padding: 0 10px 4px; scrollbar-width: none; }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { white-space: nowrap; padding: 7px 10px; font-size: 0.9rem; }
    .menu-akun { margin-left: auto; }
}

.kaki { background: var(--malam); color: #94a3c4; margin-top: 72px; padding: 56px 0 0; font-size: 0.92rem; }
.kaki a { color: #d5dcef; text-decoration: none; }
.kaki a:hover { color: #fff; text-decoration: underline; }
.kaki p { margin: 0 0 6px; }
.kaki__isi { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
@media (min-width: 640px) { .kaki__isi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .kaki__isi { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.kaki__merek { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; letter-spacing: 0.16em; color: #fff; margin-bottom: 14px !important; }
.kaki__merek svg { height: 24px; width: auto; }
.kaki__ket { max-width: 36ch; line-height: 1.6; }
.kaki__judul { color: #fff; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px !important; }
.kaki__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kaki__bawah { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kaki__bawah .wadah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; font-size: 0.85rem; }
.kaki__bawah p { margin: 0; }

/* ── Pesan kilat ───────────────────────────────────────────────────────── */

.kabar { padding: 12px 16px; border-radius: var(--r); margin: 16px 0 0; border: 1px solid; font-weight: 400; }
.kabar--ok { background: var(--hijau-pucat); border-color: #b7e2c8; color: #0f4d2a; }
.kabar--galat { background: var(--merah-pucat); border-color: #f5c2c2; color: #7f1d1d; }
.kabar--info { background: var(--karbon-pucat); border-color: var(--karbon-muda); color: var(--karbon-tua); }
.kabar ul { margin: 0; padding-left: 18px; }

/* ── Tombol ────────────────────────────────────────────────────────────── */

.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid var(--karbon);
    border-radius: var(--r);
    background: var(--karbon);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.06s;
}
.tombol:hover { background: var(--karbon-tua); border-color: var(--karbon-tua); color: #fff; }
.tombol:active { transform: translateY(1px); }
.tombol[disabled] { background: #b8c0d6; border-color: #b8c0d6; box-shadow: none; cursor: not-allowed; }
.tombol .ikon { width: 18px; height: 18px; }
.tombol--garis { background: var(--kertas); border-color: var(--garis-kuat); color: var(--tinta); box-shadow: var(--bayang-1); }
.tombol--garis:hover { background: var(--garis-tipis); border-color: var(--tinta-3); color: var(--tinta); }
.tombol--bahaya { background: var(--kertas); border-color: #f0b4b4; color: var(--merah); box-shadow: var(--bayang-1); }
.tombol--bahaya:hover { background: var(--merah); border-color: var(--merah); color: #fff; }
.tombol--hijau { background: var(--hijau); border-color: var(--hijau); }
.tombol--hijau:hover { background: #106330; border-color: #106330; }
.tombol--terang { background: #fff; border-color: #fff; color: var(--karbon-tua); }
.tombol--terang:hover { background: var(--karbon-pucat); border-color: var(--karbon-pucat); color: var(--karbon-tua); }
.tombol--kaca { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }
.tombol--kaca:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.tombol--besar { min-height: 52px; padding: 12px 24px; font-size: 1.02rem; }
.tombol--kecil { min-height: 36px; padding: 6px 12px; font-size: 0.9rem; border-radius: 8px; }
.tombol--penuh { width: 100%; white-space: normal; }
.tombol-baris { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Formulir ──────────────────────────────────────────────────────────── */

.isian { margin-bottom: 18px; }
.isian > label, .label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.93rem; color: var(--tinta); }
.isian .petunjuk { display: block; font-size: 0.85rem; color: var(--tinta-3); margin-top: 5px; font-weight: 400; }
.isian .galat { display: block; font-size: 0.875rem; color: var(--merah); margin-top: 5px; font-weight: 600; }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--garis-kuat);
    border-radius: var(--r);
    background: var(--kertas);
    color: var(--tinta);
    font: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
textarea { min-height: 110px; resize: vertical; }
input[type="file"] { padding: 8px; }
input:hover, select:hover, textarea:hover { border-color: #b4bfd0; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--karbon);
    box-shadow: 0 0 0 4px rgba(31, 59, 203, 0.14);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--merah); }
.centang { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.centang input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--karbon); flex: none; }

.kisi-2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .kisi-2 { grid-template-columns: 1fr 1fr; } }

/* ── Kartu formulir (dulu "nota") ──────────────────────────────────────── */

.nota {
    position: relative;
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    box-shadow: var(--bayang-2);
}
.nota__kepala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--garis);
}
.nota__judul { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--tinta); margin: 0; }
.nota__nomor { color: var(--tinta-3); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.nota__badan { padding: 6px 22px 22px; }
.nota__badan--lega { padding: 22px; }

.baris { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--garis-tipis); align-items: baseline; }
.baris:last-child { border-bottom: 0; }
.baris dt, .baris__label { color: var(--tinta-2); font-size: 0.92rem; font-weight: 400; flex: none; }
.baris dd, .baris__nilai { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
dl.daftar { margin: 0; }

.total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 4px; margin-top: 4px; border-top: 1px solid var(--garis); }
.total__label { font-weight: 600; color: var(--tinta-2); }
.total__angka { font-weight: 800; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.025em; color: var(--tinta); }

.stabilo { background: var(--karbon-pucat); color: var(--karbon-tua); border-radius: 5px; padding: 0 4px; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── Label status ──────────────────────────────────────────────────────── */

.cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--karbon);
    background: var(--karbon-pucat);
    border: 1px solid var(--karbon-muda);
}
.cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cap--success { color: var(--hijau); background: var(--hijau-pucat); border-color: #b7e2c8; }
.cap--danger { color: var(--merah); background: var(--merah-pucat); border-color: #f5c2c2; }
.cap--warning { color: var(--jingga); background: var(--jingga-pucat); border-color: #f7d49a; }
.cap--gray { color: var(--tinta-2); background: var(--garis-tipis); border-color: var(--garis); }

.status { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; background: var(--garis-tipis); color: var(--tinta-2); }
.status--success { background: var(--hijau-pucat); color: var(--hijau); }
.status--danger { background: var(--merah-pucat); color: var(--merah); }
.status--warning { background: var(--jingga-pucat); color: var(--jingga); }
.status--info, .status--primary { background: var(--karbon-pucat); color: var(--karbon-tua); }

.lencana { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 0.8rem; font-weight: 700; background: var(--karbon-pucat); color: var(--karbon-tua); white-space: nowrap; line-height: 1.5; }
.lencana--hijau { background: var(--hijau-pucat); color: var(--hijau); }

/* ── Bagian pembuka halaman ────────────────────────────────────────────── */

.muka { display: grid; gap: 28px; padding: 36px 0 8px; align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "nota" "ekstra"; }
.muka > * { min-width: 0; }
.muka__intro { grid-area: intro; }
.muka__nota { grid-area: nota; }
.muka__ekstra { grid-area: ekstra; }
.muka__intro h1 { margin-bottom: 0.4em; }
.muka__intro p { margin-bottom: 0; font-size: 1.1rem; color: var(--tinta-2); line-height: 1.65; }
@media (min-width: 900px) {
    .muka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro nota" "ekstra nota"; grid-template-rows: auto 1fr; gap: 28px 56px; padding-top: 56px; }
}
.muka--tunggal { grid-template-areas: "intro"; grid-template-columns: minmax(0, 760px); grid-template-rows: auto; }

.langkah { list-style: none; margin: 0; padding: 0; counter-reset: langkah; display: grid; gap: 4px; }
.langkah li { counter-increment: langkah; display: flex; gap: 14px; padding: 12px 0; }
.langkah li::before {
    content: counter(langkah);
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--karbon-pucat); color: var(--karbon);
    font-weight: 700; font-size: 0.9rem; line-height: 1;
}
.langkah b { display: block; font-weight: 600; margin-top: 3px; }
.langkah span { color: var(--tinta-2); font-size: 0.95rem; }

.tab { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--garis); padding: 0 14px; scrollbar-width: thin; }
.tab button {
    flex: none; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.94rem; color: var(--tinta-3);
    padding: 13px 8px 11px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.tab button:hover { color: var(--tinta); }
.tab button[aria-selected="true"] { color: var(--karbon); border-bottom-color: var(--karbon); }

.tujuan { position: relative; }
.tujuan input { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; padding-right: 120px; min-height: 52px; }
.tujuan__operator { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; font-weight: 700; color: var(--karbon-tua); background: var(--karbon-pucat); border: 1px solid var(--karbon-muda); padding: 3px 10px; border-radius: 99px; }
.tujuan__operator:empty { display: none; }

.pilihan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.pilihan label {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    min-height: 76px; padding: 11px 13px; cursor: pointer;
    border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--kertas);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pilihan label:hover { border-color: var(--karbon); }
.pilihan input { position: absolute; opacity: 0; pointer-events: none; }
.pilihan__nama { font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.pilihan__harga { font-weight: 700; color: var(--karbon-tua); }
.pilihan label:has(input:checked) { border-color: var(--karbon); background: var(--karbon-pucat); box-shadow: inset 0 0 0 1px var(--karbon); }
.pilihan label:has(input:focus-visible) { outline: 2px solid var(--karbon); outline-offset: 2px; }
.pilihan__kosong { grid-column: 1 / -1; color: var(--tinta-2); padding: 14px 2px; margin: 0; font-size: 0.95rem; }

/* Kartu tautan ke layanan lain (halaman pulsa) */
.layanan { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.layanan li { display: flex; }
.layanan a {
    display: flex; flex-direction: column; gap: 8px; width: 100%;
    padding: 22px; text-decoration: none; color: inherit;
    background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang-1);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.layanan a:hover { border-color: var(--karbon-muda); box-shadow: var(--bayang-2); transform: translateY(-2px); color: inherit; }
.layanan__nama { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.015em; color: var(--tinta); }
.layanan__ket { color: var(--tinta-2); font-size: 0.95rem; }
.layanan__aksi { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--karbon); }
.layanan__aksi::after { content: " →"; }

/* ── Daftar rincian (dipakai di halaman diskon pajak) ──────────────────── */

.rincian { list-style: none; margin: 0; padding: 0; }
.rincian__grup { margin: 18px 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.rincian li { border-bottom: 1px solid var(--garis-tipis); }
.rincian li:last-child { border-bottom: 0; }
.rincian a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 11px 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.rincian a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; font-weight: 700; color: var(--karbon); }
.rincian a:hover { background: var(--garis-tipis); }
.rincian__nama { font-weight: 600; color: var(--tinta); }
.rincian__ket { grid-column: 1; font-size: 0.9rem; color: var(--tinta-2); }
.rincian__bayar { margin-top: 12px; border-top: 1px solid var(--garis); }

/* ── Halaman bayar ─────────────────────────────────────────────────────── */

.qr { width: min(280px, 78vw); margin: 6px auto 10px; padding: 14px; background: #fff; border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang-2); }
.qr svg, .qr img { display: block; width: 100%; height: auto; }
.hitung-mundur { font-weight: 700; font-size: 1.1rem; }
.pita-simulasi { background: var(--jingga-pucat); border: 1px solid #f7d49a; color: #78350f; padding: 10px 14px; border-radius: var(--r); font-weight: 600; margin-bottom: 14px; }

.kode-besar > span { min-width: 0; }
.kode-besar { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; overflow-wrap: anywhere; background: var(--karbon-pucat); border: 1px dashed #9fb0ef; border-radius: 12px; padding: 12px 14px; margin: 6px 0; display: flex; gap: 10px; justify-content: space-between; align-items: center; }

.putar { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--garis); border-top-color: var(--karbon); border-radius: 50%; animation: putar 0.8s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ── Daftar & tabel (tagihan, pesanan, paket) ──────────────────────────── */

.judul-halaman { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 36px 0 18px; }
.judul-halaman h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.4rem); }
.judul-halaman p { margin: 6px 0 0; color: var(--tinta-2); }

.saring { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.saring a { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--garis-kuat); background: var(--kertas); color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.saring a:hover { border-color: var(--tinta-3); color: var(--tinta); }
.saring a[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.saring__jeda { flex: 1; }

.lembar { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang-1); }
.lembar__isi { padding: 22px; }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th { text-align: left; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); padding: 14px 16px 10px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 14px 16px; border-bottom: 1px solid var(--garis-tipis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: #fafbfd; }
.tabel .kanan { text-align: right; }
.tabel__utama { font-weight: 600; }
.tabel a.tabel__utama { text-decoration: none; }
.tabel a.tabel__utama:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .tabel--lipat thead { display: none; }
    .tabel--lipat, .tabel--lipat tbody, .tabel--lipat tr, .tabel--lipat td { display: block; width: 100%; }
    .tabel--lipat tr { padding: 14px 16px; border-bottom: 1px solid var(--garis); }
    .tabel--lipat tr:last-child { border-bottom: 0; }
    .tabel--lipat tbody tr:hover td { background: none; }
    .tabel--lipat td { padding: 3px 0; border: 0; text-align: left !important; display: flex; justify-content: space-between; gap: 12px; }
    .tabel--lipat td[data-label]::before { content: attr(data-label); color: var(--tinta-3); font-size: 0.85rem; font-weight: 400; flex: none; }
    .tabel--lipat td.tabel__kepala { display: block; font-size: 1.05rem; padding-bottom: 6px; }
    .tabel--lipat td.tabel__aksi { padding-top: 10px; }
    .tabel--lipat td.tabel__aksi .tombol { width: 100%; }
}

.kosong { padding: 40px 20px; text-align: center; color: var(--tinta-2); }
.kosong p { margin-left: auto; margin-right: auto; }

.halaman-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }

/* ── Paket jasa: kartu harga ───────────────────────────────────────────── */

.paket { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.paket > li { display: grid; gap: 14px 32px; padding: 24px; grid-template-columns: 1fr; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-besar); box-shadow: var(--bayang-1); }
@media (min-width: 760px) { .paket > li { grid-template-columns: 1fr 250px; align-items: start; } .paket > li > div:last-child { border-left: 1px solid var(--garis-tipis); padding-left: 28px; } }
.paket h3 { font-size: 1.25rem; margin-bottom: 6px; }
.paket p { margin-bottom: 10px; color: var(--tinta-2); }
.paket ul { margin: 0; padding: 0; list-style: none; color: var(--tinta-2); font-size: 0.95rem; display: grid; gap: 6px; }
.paket ul li { position: relative; padding-left: 26px; }
.paket ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--hijau-pucat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.paket__harga { display: block; font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.025em; }
.paket__satuan { color: var(--tinta-3); font-size: 0.88rem; display: block; margin: 4px 0 14px; }

/* ── Pajak: submenu konsultan / diskon, kotak sorotan ──────────────────── */

.submenu { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--garis); margin-top: 20px; }
.submenu a { flex: none; padding: 12px 8px 10px; margin-right: 12px; font-weight: 600; color: var(--tinta-3); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.submenu a:hover { color: var(--tinta); }
.submenu a[aria-current="page"] { color: var(--karbon); border-bottom-color: var(--karbon); }

.sorot { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1fr); align-items: center; background: linear-gradient(120deg, var(--karbon-pucat), #fff 70%); border-color: var(--karbon-muda); }
@media (min-width: 860px) { .sorot { grid-template-columns: minmax(0, 1fr) auto; } }
.sorot h2 { margin-bottom: 6px; }
.sorot p { margin: 0; color: var(--tinta-2); }

.iklan__judul { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 10px; }
.iklan__judul + p { color: var(--tinta-2); }

/* ── Tagihan: lembar per peran & tahapan ───────────────────────────────── */

.rangkap { border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; display: inline-block; border: 1px solid var(--garis); background: var(--kertas); }
.rangkap--penjual { background: var(--salinan-penjual); border-color: #f2c2d0; }
.rangkap--admin { background: var(--salinan-admin); border-color: #ecd77a; }
.lembar--penjual { background: linear-gradient(#e7a3b8 0 4px, var(--kertas) 4px); }
.lembar--admin { background: linear-gradient(#e2c34a 0 4px, var(--kertas) 4px); }
.lembar--pembeli { background: linear-gradient(var(--karbon) 0 4px, var(--kertas) 4px); }
.lembar--penjual, .lembar--admin, .lembar--pembeli { overflow: hidden; }

.tahap { list-style: none; display: flex; margin: 0 0 20px; padding: 0; counter-reset: tahap; overflow-x: auto; }
.tahap li { counter-increment: tahap; flex: 1; min-width: 96px; position: relative; padding: 34px 6px 0; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--tinta-3); }
.tahap li::before { content: counter(tahap); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--kertas); border: 2px solid var(--garis-kuat); font-size: 0.78rem; line-height: 22px; font-weight: 700; z-index: 1; }
.tahap li::after { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--garis); }
.tahap li:first-child::after { display: none; }
.tahap li.lewat { color: var(--tinta); }
.tahap li.lewat::before { background: var(--karbon); border-color: var(--karbon); color: #fff; }
.tahap li.lewat::after { background: var(--karbon); }
.tahap li.kini { color: var(--karbon-tua); font-weight: 700; }
.tahap li.kini::before { background: var(--kertas); border-color: var(--karbon); color: var(--karbon); box-shadow: 0 0 0 4px var(--karbon-pucat); }
.tahap li.kini::after { background: var(--karbon); }

.dua-kolom { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.dua-kolom > * { min-width: 0; }
.dua-kolom > .tindakan { order: -1; }
@media (min-width: 900px) { .dua-kolom > .tindakan { order: 0; position: sticky; top: 88px; } }
@media (min-width: 900px) { .dua-kolom { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

.tindakan { border: 1px solid var(--garis); border-radius: var(--r-besar); background: var(--kertas); padding: 22px; box-shadow: var(--bayang-2); }
.tindakan h2 { font-size: 1.2rem; margin-bottom: 8px; }
.tindakan > :last-child { margin-bottom: 0; }

.angka-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--garis); border-radius: var(--r-besar); overflow: hidden; background: var(--kertas); box-shadow: var(--bayang-1); }
.angka-kisi > div { padding: 14px 16px; border-right: 1px solid var(--garis-tipis); border-bottom: 1px solid var(--garis-tipis); margin: 0 -1px -1px 0; }
.angka-kisi dt { font-size: 0.82rem; color: var(--tinta-3); font-weight: 600; }
.angka-kisi dd { margin: 2px 0 0; font-weight: 800; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }

.riwayat { list-style: none; margin: 0; padding: 0; }
.riwayat li { padding: 10px 0 10px 20px; border-left: 2px solid var(--garis); position: relative; margin-left: 6px; }
.riwayat li::before { content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--kertas); border: 2px solid var(--karbon); }
.riwayat time { display: block; font-size: 0.82rem; color: var(--tinta-3); }

.obrolan { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.obrolan__pesan { max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--garis-tipis); border: 1px solid var(--garis); }
.obrolan__pesan--saya { align-self: flex-end; background: var(--karbon-pucat); border-color: var(--karbon-muda); border-radius: 14px 14px 4px 14px; }
.obrolan__pesan--admin { background: var(--salinan-admin); border-color: #ecd77a; }
.obrolan__siapa { font-size: 0.8rem; font-weight: 700; color: var(--tinta-2); margin-bottom: 2px; }
.obrolan__pesan p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

details.lipat { border-top: 1px solid var(--garis); padding: 12px 0; }
details.lipat summary { cursor: pointer; font-weight: 600; color: var(--karbon); }
details.lipat[open] summary { margin-bottom: 12px; }
details.lipat--voucher { border-top: 0; padding: 0 0 14px; }
.captcha { min-height: 66px; }

/* ── Akun ──────────────────────────────────────────────────────────────── */

.akun { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
.akun > * { min-width: 0; }
@media (min-width: 860px) { .akun { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; } }
.akun__menu { display: flex; gap: 4px; overflow-x: auto; }
.akun__menu a { padding: 9px 12px; border-radius: var(--r); text-decoration: none; color: var(--tinta-2); font-weight: 600; white-space: nowrap; }
.akun__menu a:hover { background: var(--kertas); color: var(--tinta); }
.akun__menu a[aria-current="page"] { background: var(--kertas); color: var(--karbon-tua); box-shadow: var(--bayang-1); }
@media (min-width: 860px) { .akun__menu { flex-direction: column; position: sticky; top: 88px; } }
.akun h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.saldo-besar { font-weight: 800; font-size: 2.4rem; line-height: 1.1; letter-spacing: -0.03em; }
.plus { color: var(--hijau); font-weight: 700; }
.minus { color: var(--merah); font-weight: 700; }
.tumpuk > * + * { margin-top: 20px; }

/* ── Beranda ───────────────────────────────────────────────────────────── */

.pahlawan {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(31, 59, 203, 0.13), transparent 70%),
        radial-gradient(700px 360px at -10% 110%, rgba(31, 59, 203, 0.07), transparent 70%),
        linear-gradient(#fff, var(--meja));
    border-bottom: 1px solid var(--garis);
}
.pahlawan::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.pahlawan__isi { position: relative; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-top: 48px; padding-bottom: 56px; align-items: center; }
@media (min-width: 960px) { .pahlawan__isi { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; padding-top: 80px; padding-bottom: 88px; } }
.pahlawan h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin-bottom: 0.38em; }
.pahlawan h1 em { font-style: normal; color: var(--karbon); }
.pahlawan__judul > span, .pahlawan__judul > em { display: block; }
.pahlawan__lead { font-size: 1.14rem; line-height: 1.65; color: var(--tinta-2); max-width: 54ch; margin-bottom: 28px; }

.label-atas {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 6px; margin-bottom: 20px;
    border-radius: 99px; border: 1px solid var(--garis); background: rgba(255, 255, 255, 0.8);
    font-size: 0.84rem; font-weight: 600; color: var(--tinta-2); box-shadow: var(--bayang-1);
}
.label-atas .ikon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--karbon-pucat); color: var(--karbon); }

.ceklis { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--tinta-2); font-size: 0.94rem; font-weight: 600; }
.ceklis li { display: inline-flex; align-items: center; gap: 8px; }
.ceklis .ikon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--hijau-pucat); color: var(--hijau); }

.menu-cepat { background: var(--kertas); border: 1px solid var(--garis); border-radius: 20px; box-shadow: var(--bayang-3); padding: 24px; }
.menu-cepat__kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.menu-cepat__kepala h2 { font-size: 1.12rem; margin: 0; letter-spacing: -0.015em; }
.menu-cepat__kepala span { font-size: 0.84rem; color: var(--tinta-3); font-weight: 600; white-space: nowrap; }
.menu-cepat__kisi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 380px) { .menu-cepat__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-cepat__kisi a {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    height: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--garis);
    text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 0.92rem; line-height: 1.3;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.menu-cepat__kisi a:hover { border-color: var(--karbon-muda); background: var(--karbon-pucat); color: var(--tinta); transform: translateY(-1px); }
.menu-cepat__ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--karbon-pucat); color: var(--karbon); }
.menu-cepat__kisi a:hover .menu-cepat__ikon { background: var(--karbon); color: #fff; }
.menu-cepat__kaki { display: flex; align-items: center; gap: 12px; margin: 14px -10px -10px; padding: 12px 10px; border-top: 1px solid var(--garis-tipis); border-radius: 0 0 12px 12px; font-size: 0.88rem; color: var(--tinta-2); text-decoration: none; }
.menu-cepat__kaki:hover { background: var(--garis-tipis); color: var(--tinta-2); }
.menu-cepat__kaki > div { flex: 1; }
.menu-cepat__kaki .ikon:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--garis-tipis); color: var(--tinta); }
.menu-cepat__kaki:hover .ikon:first-child { background: var(--kertas); }
.menu-cepat__kaki .ikon:last-child { width: 18px; height: 18px; color: var(--karbon); transition: transform 0.15s; }
.menu-cepat__kaki:hover .ikon:last-child { transform: translateX(3px); }
.menu-cepat__kaki b { display: block; color: var(--tinta); font-weight: 600; }

.bagian-kepala { max-width: 640px; margin-bottom: 32px; }
.bagian-kepala--tengah { margin-left: auto; margin-right: auto; text-align: center; }
.bagian-kepala--tengah p { margin-left: auto; margin-right: auto; }
.bagian-kepala h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.028em; margin-bottom: 12px; }
.bagian-kepala p { color: var(--tinta-2); font-size: 1.05rem; margin: 0; }
.alis { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--karbon); margin-bottom: 10px; }

.kartu-layanan { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .kartu-layanan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kartu-layanan__item {
    display: flex; flex-direction: column;
    padding: 28px; background: var(--kertas);
    border: 1px solid var(--garis); border-radius: 20px; box-shadow: var(--bayang-1);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.kartu-layanan__item:hover { box-shadow: var(--bayang-2); border-color: var(--garis-kuat); }
.kartu-layanan__ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--karbon); color: #fff; margin-bottom: 20px; box-shadow: 0 8px 20px -8px rgba(31, 59, 203, 0.6); }
.kartu-layanan__ikon .ikon { width: 24px; height: 24px; }
.kartu-layanan__item h3 { font-size: 1.25rem; margin-bottom: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kartu-layanan__item > p { color: var(--tinta-2); margin-bottom: 20px; }
.kartu-layanan__tautan { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--garis-tipis); }
.kartu-layanan__tautan li { border-bottom: 1px solid var(--garis-tipis); }
.kartu-layanan__tautan li:last-child { border-bottom: 0; }
.kartu-layanan__tautan a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; font-weight: 600; color: var(--tinta); }
.kartu-layanan__tautan a .ikon { width: 18px; height: 18px; color: var(--karbon); transition: transform 0.15s; }
.kartu-layanan__tautan a:hover { color: var(--karbon); }
.kartu-layanan__tautan a:hover .ikon { transform: translateX(3px); }
.kartu-layanan__tautan small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 0.85rem; }

.pita-putih { background: var(--kertas); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }

.alur { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); counter-reset: alur; }
@media (min-width: 760px) { .alur { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.alur li { position: relative; counter-increment: alur; }
.alur__nomor { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.alur__nomor .ikon { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--karbon-pucat); color: var(--karbon); }
.alur__nomor::after { content: "0" counter(alur); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--tinta-3); }
@media (min-width: 760px) {
    .alur li:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 120px; right: -16px; height: 1px; background: repeating-linear-gradient(90deg, var(--garis-kuat) 0 6px, transparent 6px 12px); }
}
.alur h3 { font-size: 1.12rem; margin-bottom: 6px; }
.alur p { color: var(--tinta-2); margin: 0; font-size: 0.97rem; }

.ajakan {
    position: relative; overflow: hidden;
    display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center;
    padding: 36px 28px; border-radius: 24px; color: #c9d3f5;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(99, 132, 255, 0.35), transparent 60%),
        linear-gradient(135deg, #1a32b8, #0f1f7a);
    box-shadow: var(--bayang-3);
}
@media (min-width: 860px) { .ajakan { grid-template-columns: minmax(0, 1fr) auto; padding: 48px 56px; } }
.ajakan h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.028em; margin-bottom: 10px; }
.ajakan p { margin: 0; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition: none !important; scroll-behavior: auto !important; }
}