/* ==========================================================================
   Toko Ebook Berlisensi
   ========================================================================== */
:root {
	--bg: #f6f5f1;
	--permukaan: #ffffff;
	--permukaan-2: #faf9f6;
	--teks: #1c1b17;
	--redup: #6a665b;
	--garis: #e5e1d6;
	--utama: #3346d3;
	--utama-gelap: #2735a8;
	--utama-lembut: #eef0ff;
	--aksen: #d98e04;
	--hijau: #127a55;   --hijau-lembut: #e5f5ee;
	--kuning: #9a5b00;  --kuning-lembut: #fff3dc;
	--merah: #bf3227;   --merah-lembut: #fdebe8;
	--biru: #1d5fbf;    --biru-lembut: #e7f0fd;
	--abu: #5c5a52;     --abu-lembut: #efede7;
	--radius: 14px;
	--radius-kecil: 9px;
	--bayang: 0 1px 2px rgba(28, 27, 23, .05), 0 6px 20px rgba(28, 27, 23, .06);
	--huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--huruf);
	font-size: 15px;
	line-height: 1.6;
	color: var(--teks);
	background: var(--bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
small, .kecil { font-size: .85em; }
.redup { color: var(--redup); }
.mono { font-family: var(--mono); }
.wadah { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.wadah--sempit { max-width: 760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* Kepala ----------------------------------------------------------------- */
.kepala { background: var(--permukaan); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 20; }
.kepala__isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.merek { display: flex; align-items: center; gap: 10px; color: var(--teks); font-weight: 800; font-size: 1.05rem; }
.merek:hover { text-decoration: none; }
.merek__ikon { width: 34px; height: 34px; border-radius: 10px; background: var(--utama); color: #fff; display: grid; place-items: center; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--redup); font-weight: 600; font-size: .92rem; padding: 7px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current] { background: var(--utama-lembut); color: var(--utama); text-decoration: none; }

.utama { flex: 1; padding: 28px 0 56px; }
.kaki { border-top: 1px solid var(--garis); background: var(--permukaan); padding: 22px 0; color: var(--redup); font-size: .88rem; }
.kaki .wadah { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Tombol ----------------------------------------------------------------- */
.tombol {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
	padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
	background: var(--utama); color: #fff; cursor: pointer; text-align: center;
	transition: background .15s, transform .05s;
}
.tombol:hover { background: var(--utama-gelap); text-decoration: none; }
.tombol:active { transform: translateY(1px); }
.tombol:disabled { opacity: .55; cursor: not-allowed; }
.tombol--garis { background: var(--permukaan); color: var(--teks); border-color: var(--garis); }
.tombol--garis:hover { background: var(--permukaan-2); }
.tombol--hijau { background: var(--hijau); }
.tombol--hijau:hover { background: #0d6143; }
.tombol--merah { background: var(--merah); }
.tombol--merah:hover { background: #9b261d; }
.tombol--wa { background: #1fa855; }
.tombol--wa:hover { background: #178a45; }
.tombol--kecil { padding: 7px 12px; font-size: .85rem; border-radius: 8px; }
.tombol--penuh { width: 100%; }
.deret { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Kartu & tata letak ------------------------------------------------------ */
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); padding: 22px; }
.kartu + .kartu { margin-top: 18px; }
.kartu__judul { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kartu__judul h2, .kartu__judul h3 { margin: 0; }
.dua-kolom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.tata-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
@media (max-width: 860px) {
	.dua-kolom, .tata-detail { grid-template-columns: minmax(0, 1fr); }
}

/* Formulir ---------------------------------------------------------------- */
.isian { margin-bottom: 14px; }
.isian label, .label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.isian .bantu { font-size: .83rem; color: var(--redup); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], textarea, select {
	width: 100%; font: inherit; color: var(--teks);
	padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--radius-kecil);
	background: var(--permukaan);
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--utama-lembut); border-color: var(--utama); }
input[type=file] { font: inherit; font-size: .9rem; max-width: 100%; }
textarea { min-height: 120px; resize: vertical; }
.isian--galat input, .isian--galat textarea { border-color: var(--merah); }
.galat-teks { color: var(--merah); font-size: .85rem; margin-top: 4px; }
.centang { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.centang input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.input-token { font-family: var(--mono); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* Pemberitahuan ----------------------------------------------------------- */
.info { border-radius: var(--radius-kecil); padding: 12px 14px; margin-bottom: 16px; border: 1px solid; font-size: .92rem; }
.info p:last-child, .info ul:last-child { margin-bottom: 0; }
.info--sukses { background: var(--hijau-lembut); border-color: #bfe5d4; color: #0b5a3e; }
.info--galat { background: var(--merah-lembut); border-color: #f4c7c1; color: #8e2119; }
.info--peringatan { background: var(--kuning-lembut); border-color: #f2d7a6; color: #6f4200; }
.info--biru { background: var(--biru-lembut); border-color: #c5dafa; color: #15458c; }

.lencana { display: inline-block; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lencana--abu { background: var(--abu-lembut); color: var(--abu); }
.lencana--kuning { background: var(--kuning-lembut); color: var(--kuning); }
.lencana--hijau { background: var(--hijau-lembut); color: var(--hijau); }
.lencana--merah { background: var(--merah-lembut); color: var(--merah); }
.lencana--biru { background: var(--biru-lembut); color: var(--biru); }

/* Pahlawan & katalog ------------------------------------------------------ */
.pahlawan { padding: 18px 0 30px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.pahlawan p { font-size: 1.05rem; color: var(--redup); max-width: 540px; }
.keunggulan { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.keunggulan li { display: flex; gap: 12px; align-items: flex-start; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; }
.keunggulan b { display: block; }
.keunggulan span { color: var(--redup); font-size: .88rem; }
.ikon-bulat { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--utama-lembut); color: var(--utama); display: grid; place-items: center; }
@media (max-width: 860px) { .pahlawan { grid-template-columns: minmax(0, 1fr); } }

.grid-buku { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.buku { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: inherit; box-shadow: var(--bayang); transition: transform .15s, box-shadow .15s; }
.buku:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(28, 27, 23, .1); }
.buku__sampul { aspect-ratio: 3 / 4; background: var(--abu-lembut); }
.buku__sampul img { width: 100%; height: 100%; object-fit: cover; }
.buku__isi { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.buku__judul { font-weight: 700; line-height: 1.35; }
.buku__penulis { color: var(--redup); font-size: .86rem; }
.buku__harga { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--teks); font-size: 1.05rem; }
.kosong { text-align: center; padding: 50px 20px; color: var(--redup); }

.sampul-besar { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--garis); box-shadow: var(--bayang); max-width: 340px; aspect-ratio: 3 / 4; background: var(--abu-lembut); }
.sampul-besar img { width: 100%; height: 100%; object-fit: cover; }
.produk-atas { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 22px; }
@media (max-width: 600px) { .produk-atas { grid-template-columns: minmax(0, 1fr); } .produk-atas .sampul-besar { max-width: 200px; } }
.harga-besar { font-size: 1.7rem; font-weight: 800; margin: 6px 0 10px; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--redup); font-size: .88rem; }
.deskripsi { white-space: pre-line; }

.langkah { list-style: none; counter-reset: l; padding: 0; margin: 0; display: grid; gap: 12px; }
.langkah li { counter-increment: l; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: .92rem; }
.langkah li::before { content: counter(l); width: 28px; height: 28px; border-radius: 50%; background: var(--utama-lembut); color: var(--utama); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }

/* Pesanan ----------------------------------------------------------------- */
.tahapan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 4px; }
.tahap { text-align: center; font-size: .8rem; color: var(--redup); position: relative; padding-top: 30px; }
.tahap::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--abu-lembut); border: 2px solid var(--garis); }
.tahap::after { content: ""; position: absolute; top: 11px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--garis); }
.tahap:last-child::after { display: none; }
.tahap--selesai::before { background: var(--hijau); border-color: var(--hijau); }
.tahap--selesai::after { background: var(--hijau); }
.tahap--kini::before { background: var(--permukaan); border-color: var(--utama); box-shadow: 0 0 0 4px var(--utama-lembut); }
.tahap--kini { color: var(--teks); font-weight: 700; }

.ringkas { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.ringkas img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); }
.tabel-harga { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .93rem; }
.tabel-harga td { padding: 6px 0; }
.tabel-harga td:last-child { text-align: right; }
.tabel-harga tr.total td { border-top: 1px dashed var(--garis); padding-top: 10px; font-weight: 800; font-size: 1.1rem; }

.rekening { display: grid; gap: 10px; margin: 12px 0 16px; }
.rekening__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; background: var(--permukaan-2); }
.rekening__item b { font-family: var(--mono); font-size: 1.02rem; letter-spacing: .02em; }

.kotak-token { border: 2px dashed var(--utama); background: var(--utama-lembut); border-radius: var(--radius); padding: 18px; text-align: center; margin: 12px 0 16px; }
.kotak-token__kode { font-family: var(--mono); font-size: clamp(1.05rem, 4.2vw, 1.6rem); font-weight: 700; letter-spacing: .06em; word-break: break-all; margin: 4px 0 10px; color: var(--utama-gelap); }
.daftar-cek { padding-left: 18px; margin: 0 0 14px; font-size: .9rem; }
.daftar-cek li { margin-bottom: 4px; }
.salin { cursor: pointer; }
.salin.disalin { background: var(--hijau); color: #fff; border-color: var(--hijau); }

/* Halaman tolak ----------------------------------------------------------- */
.terkunci { text-align: center; max-width: 560px; margin: 20px auto; }
.terkunci__ikon { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: var(--merah-lembut); color: var(--merah); display: grid; place-items: center; }

/* ==========================================================================
   Pembaca
   ========================================================================== */
.pembaca-badan { background: #3a3a40; color: #fff; display: block; }
.bilah { position: sticky; top: 0; z-index: 30; background: #1f1f24; border-bottom: 1px solid #2c2c33; }
.bilah__isi { display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
.bilah__judul { flex: 1; min-width: 160px; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilah__judul small { display: block; font-weight: 500; color: #a9a9b3; font-size: .78rem; }
.bilah .tombol--garis { background: #2c2c33; border-color: #3d3d46; color: #fff; }
.bilah .tombol--garis:hover { background: #3a3a43; }
.bilah__hal { font-variant-numeric: tabular-nums; color: #d6d6dd; font-size: .88rem; min-width: 70px; text-align: center; }
.halaman-wadah { padding: 18px 10px 60px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.halaman { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); position: relative; max-width: 100%; }
.halaman canvas { display: block; width: 100%; height: 100%; }
.halaman__no { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .75rem; color: #b8b8c0; }
.pembaca-pesan { max-width: 560px; margin: 30px auto; padding: 0 16px; text-align: center; }
.kemajuan { height: 6px; background: #2c2c33; border-radius: 99px; overflow: hidden; margin: 14px auto; max-width: 320px; }
.kemajuan span { display: block; height: 100%; width: 0; background: #8f9cff; transition: width .2s; }
.pita { background: #2a2f63; color: #e6e8ff; font-size: .85rem; padding: 8px 14px; text-align: center; }
.pita a { color: #fff; font-weight: 700; }
.pita--hijau { background: #0f5a40; }
.pita--merah { background: #7d231b; }
@media print { .pembaca-badan * { display: none !important; } .pembaca-badan::after { content: "Ebook ini tidak dapat dicetak."; } }
.halaman-wadah { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-badan { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sisi { background: #17172a; color: #cfd0e6; padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.sisi .merek { color: #fff; margin: 0 6px 18px; }
.sisi a, .sisi button.tautan { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #cfd0e6; padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: .92rem; }
.sisi a:hover, .sisi a[aria-current] { background: #26264a; color: #fff; text-decoration: none; }
.sisi .hitung { background: var(--aksen); color: #1c1b17; font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.sisi__bawah { margin-top: auto; border-top: 1px solid #2a2a45; padding-top: 12px; font-size: .85rem; }
button.tautan { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; }
.admin-utama { padding: 26px 28px 60px; min-width: 0; }
.admin-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-kepala h1 { font-size: 1.5rem; margin: 0; }
@media (max-width: 900px) {
	.admin-badan { grid-template-columns: minmax(0, 1fr); }
	.sisi { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px 12px; }
	.sisi .merek { margin: 0 8px 0 0; width: 100%; }
	.sisi__bawah { margin: 0; border: 0; padding: 0; display: flex; gap: 4px; }
	.admin-utama { padding: 18px 16px 50px; }
}

.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--bayang); color: inherit; }
a.stat:hover { text-decoration: none; border-color: var(--utama); }
.stat__label { color: var(--redup); font-size: .82rem; font-weight: 600; }
.stat__angka { font-size: 1.6rem; font-weight: 800; margin-top: 2px; }
.stat__sub { font-size: .8rem; color: var(--redup); }
.stat--sorot { border-color: #f2d7a6; background: var(--kuning-lembut); }

.tabel-wadah { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); }
table.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); background: var(--permukaan-2); padding: 10px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tr.bisa-klik { cursor: pointer; }
.tabel tr.bisa-klik:hover td { background: var(--permukaan-2); }
.tabel .kanan { text-align: right; }
.tabel img.mini { width: 40px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; border: 1px solid var(--garis); }

.tab { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab a { padding: 7px 13px; border-radius: 999px; background: var(--permukaan); border: 1px solid var(--garis); color: var(--redup); font-weight: 600; font-size: .86rem; }
.tab a[aria-current] { background: var(--utama); border-color: var(--utama); color: #fff; }
.tab a:hover { text-decoration: none; }
.cari { display: flex; gap: 8px; margin-bottom: 14px; max-width: 460px; }
.halaman-nav { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.halaman-nav a, .halaman-nav span { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--garis); background: var(--permukaan); font-size: .86rem; }
.halaman-nav span { background: var(--utama); color: #fff; border-color: var(--utama); }

dl.rincian { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .92rem; }
dl.rincian dt { color: var(--redup); }
dl.rincian dd { margin: 0; word-break: break-word; }
@media (max-width: 560px) { dl.rincian { grid-template-columns: minmax(0, 1fr); gap: 2px; } dl.rincian dd { margin-bottom: 8px; } }
.bukti-pratinjau { border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; background: var(--permukaan-2); max-height: 520px; }
.bukti-pratinjau img { margin: 0 auto; max-height: 520px; object-fit: contain; }

.masuk-badan { display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #17172a, #2a2f63); }
.masuk-kartu { width: 100%; max-width: 380px; }

/* Akun ------------------------------------------------------------------- */
.nav { align-items: center; }
.nav__akun { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--garis); }
.nav__keluar { font: inherit; font-weight: 600; font-size: .92rem; color: var(--redup); background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.nav__keluar:hover { background: var(--merah-lembut); color: var(--merah); }
.kartu-akun { max-width: 440px; margin: 0 auto; }
.kartu-akun h1 { font-size: 1.6rem; }
.pindah-akun { text-align: center; margin: 16px 0 0; font-size: .92rem; }
.ebook-saya { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.ebook-saya__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px; box-shadow: var(--bayang); }
.ebook-saya__item img { width: 76px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); }
.ebook-saya__item b { display: block; line-height: 1.35; margin-bottom: 4px; }
.ebook-saya__aksi { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.token-kecil { font-family: var(--mono); font-size: .9rem; letter-spacing: .04em; background: var(--utama-lembut); color: var(--utama-gelap); padding: 3px 8px; border-radius: 6px; display: inline-block; margin: 4px 0; word-break: break-all; }
.akun-ringkas { display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--utama); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.sandi-baru { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; letter-spacing: .05em; }
.input-hp { display: flex; }
.input-hp span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--garis); border-right: 0; border-radius: var(--radius-kecil) 0 0 var(--radius-kecil); background: var(--permukaan-2); color: var(--redup); font-weight: 600; }
.input-hp input { border-radius: 0 var(--radius-kecil) var(--radius-kecil) 0; }

/* Metode pembayaran ------------------------------------------------------ */
.pilih-metode { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.pilih-metode__item { display: block; border: 1px dashed var(--garis); border-radius: 12px; padding: 14px 16px; color: var(--teks); background: var(--permukaan-2); }
.pilih-metode__item:hover { border-color: var(--utama); background: var(--utama-lembut); text-decoration: none; }
.pilih-metode__item b { display: block; }
.pilih-metode__item span { font-size: .84rem; color: var(--redup); }
.qris-mini { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--garis); border-radius: 6px; background: #fff; margin-bottom: 4px; }
.qris-pratinjau { width: 180px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; margin-bottom: 8px; }
.qris-bayar { width: 100%; max-width: 260px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; margin: 10px 0 6px; }
.rekening__item--qris { align-items: flex-start; }
fieldset.pilih-bayar { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.pilih-bayar .centang { margin-bottom: 6px; }
.metode-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.metode { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--garis); border-radius: 12px; padding: 14px; background: var(--permukaan); }
.metode--mati { background: var(--permukaan-2); opacity: .75; }
.metode__isi { min-width: 0; flex: 1; }
.metode__judul { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.metode__nomor { font-size: 1rem; margin-top: 4px; word-break: break-all; }
.metode__aksi { margin-top: 10px; }

/* Pengaturan -------------------------------------------------------------- */
.pilih-akses { display: grid; gap: 12px; margin-bottom: 16px; }
.pilih-akses__item { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--permukaan); }
.pilih-akses__item:has(input:checked) { border-color: var(--utama); background: var(--utama-lembut); }
.pilih-akses__item input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.pilih-akses__item > span > .kecil { display: block; margin-top: 4px; }

/* Konfirmasi ke admin ----------------------------------------------------- */
.konfirmasi-wa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid #bfe5d4; background: var(--hijau-lembut); border-radius: var(--radius-kecil); padding: 12px 14px; margin-bottom: 16px; }
.konfirmasi-wa .tombol { flex: 1 1 220px; max-width: 100%; }
.konfirmasi-wa > div { flex: 999 1 240px; }

/* Halaman pemasangan ------------------------------------------------------ */
.daftar-periksa { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: .9rem; }
.daftar-periksa li { padding-left: 26px; position: relative; }
.daftar-periksa li::before { position: absolute; left: 0; font-weight: 800; }
.daftar-periksa li.ok::before { content: "✓"; color: var(--hijau); }
.daftar-periksa li.gagal::before { content: "✗"; color: var(--merah); }
.daftar-periksa li.gagal { color: var(--merah); }