/* GateQRIS — tema gelap espresso + emas (senada Listener & dashboard) */
:root {
  --bg: #0d0703;
  --bg2: #170d05;
  --kartu: #1d130a;
  --kartu2: #241811;
  --garis: #3a2a16;
  --garis2: #57431f;
  --krem: #f3e7d2;
  --redup: #a98f66;
  --redup2: #8a6f4d;
  --emas: #d8b075;
  --emas2: #efcf9b;
  --hijau: #4ade80;
  --merah: #f08a80;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(1100px 520px at 70% -10%, #3a2210 0%, var(--bg2) 48%, var(--bg) 100%);
  background-repeat: no-repeat;
  color: var(--krem);
  line-height: 1.55;
}
a { color: var(--emas); }
.bungkus { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ——— Navigasi ——— */
nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(13, 7, 3, 0.82);
  border-bottom: 1px solid var(--garis);
}
nav .bungkus { display: flex; align-items: center; gap: 26px; height: 62px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--krem); }
.logo .ubin {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: #2a1a0c; border: 1px solid var(--garis2);
  display: flex; align-items: center; justify-content: center;
}
.logo b { font-size: 18px; letter-spacing: 0.01em; }
.logo b span { color: var(--emas); }
nav .tautan { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav .tautan a { color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 600; }
nav .tautan a:hover { color: var(--krem); }
@media (max-width: 720px) { nav .tautan a:not(.btn) { display: none; } }

/* ——— Tombol ——— */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 800; font-size: 14.5px; border-radius: 13px;
  padding: 11px 22px; border: 1px solid transparent;
}
.btn-emas {
  background: linear-gradient(135deg, #4a2a16, #8a5a33 55%, var(--emas));
  color: #2a1708;
}
.btn-garis { border-color: var(--garis2); color: var(--emas); background: transparent; }
.btn-merah { border-color: #6b241b; color: var(--merah); background: transparent; }
.btn:disabled { opacity: 0.5; cursor: wait; }

/* ——— Hero ——— */
.hero { padding: 74px 0 30px; text-align: center; }
.hero .lencana {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--emas2); border: 1px solid var(--garis2); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 22px; background: rgba(216, 176, 117, 0.06);
}
.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5.4vw, 52px); line-height: 1.14; font-weight: 700;
  color: #fff6e8; max-width: 760px; margin: 0 auto 16px;
}
.hero h1 em { font-style: normal; color: var(--emas); }
.hero p.sub { color: var(--redup); font-size: 17px; max-width: 620px; margin: 0 auto 26px; }
.hero .aksi { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hero .catatan { font-size: 13px; color: var(--redup2); }

/* Simulasi alur */
.alur {
  max-width: 680px; margin: 40px auto 0; text-align: left;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 22px; padding: 22px;
}
.alur .langkah { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--garis); }
.alur .langkah:last-child { border-bottom: none; }
.alur .no {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid var(--garis2); color: var(--emas);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.alur b { color: #fff6e8; }
.alur .isi { color: var(--redup); font-size: 14px; }
.alur .isi b { display: block; font-size: 15px; }
.pill {
  margin-left: auto; flex: none; align-self: flex-start;
  font-size: 10.5px; font-weight: 800; border: 1px solid; border-radius: 999px; padding: 4px 10px;
}
.pill-hijau { background: #12331e; color: var(--hijau); border-color: #1f5c33; }
.pill-emas { background: #33270f; color: #e8c87a; border-color: #5c4a1f; }
.pill-abu { background: #2a2018; color: #b3a284; border-color: #4a3a28; }
.pill-merah { background: #38140f; color: var(--merah); border-color: #6b241b; }

/* ——— Statistik ——— */
.statistik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 56px 0 8px; }
@media (max-width: 820px) { .statistik { grid-template-columns: repeat(2, 1fr); } }
.statistik .kotak { background: var(--kartu); border: 1px solid var(--garis); border-radius: 18px; padding: 20px; text-align: center; }
.statistik .angka { font-size: 27px; font-weight: 800; color: #fff6e8; }
.statistik .label { font-size: 12px; color: var(--redup); margin-top: 3px; }

/* ——— Seksi ——— */
section { padding: 52px 0 8px; }
section > h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.6vw, 33px); color: #fff6e8; text-align: center; margin-bottom: 8px;
}
section > p.lead { text-align: center; color: var(--redup); max-width: 640px; margin: 0 auto 30px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.fitur { background: var(--kartu); border: 1px solid var(--garis); border-radius: 18px; padding: 22px; }
.fitur h3 { font-size: 16px; color: #fff6e8; margin-bottom: 6px; }
.fitur p { font-size: 14px; color: var(--redup); }
.langkah4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .langkah4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .langkah4 { grid-template-columns: 1fr; } }
.langkah4 .kotak { background: var(--kartu); border: 1px solid var(--garis); border-radius: 18px; padding: 20px; }
.langkah4 .no { font-size: 12px; font-weight: 800; color: var(--emas); letter-spacing: 0.1em; }
.langkah4 h3 { font-size: 15.5px; color: #fff6e8; margin: 6px 0 5px; }
.langkah4 p { font-size: 13.5px; color: var(--redup); }

.kanal { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.kanal span {
  border: 1px solid var(--garis2); border-radius: 999px; padding: 7px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--krem); background: rgba(216,176,117,0.05);
}

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--kartu); border: 1px solid var(--garis); border-radius: 15px; margin-bottom: 9px; }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: #fff6e8; font-size: 15px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 20px 16px; color: var(--redup); font-size: 14px; }

.cta { text-align: center; padding: 64px 0 20px; }
.cta h2 { font-family: Georgia, serif; font-size: clamp(24px, 3.6vw, 32px); color: #fff6e8; margin-bottom: 10px; }
.cta p { color: var(--redup); margin-bottom: 22px; }

footer { border-top: 1px solid var(--garis); margin-top: 56px; padding: 26px 0 34px; text-align: center; }
footer .tautan { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
footer .tautan a { color: var(--redup); text-decoration: none; font-size: 13.5px; }
footer .tautan a:hover { color: var(--emas); }
footer p { color: var(--redup2); font-size: 12.5px; }

/* ——— Halaman legal ——— */
.legal { max-width: 760px; margin: 0 auto; padding: 34px 20px 0; }
.legal .kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 22px; padding: 26px; }
.legal h1 { font-family: Georgia, serif; font-size: 25px; color: #fff6e8; margin-bottom: 4px; }
.legal .sub { color: var(--redup); font-size: 14px; margin-bottom: 22px; }
.legal h2 { font-size: 11.5px; letter-spacing: 0.13em; color: var(--emas); margin: 20px 0 8px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 14.5px; color: var(--krem); margin-bottom: 8px; }

/* ——— Dashboard ——— */
.dash { max-width: 1080px; margin: 0 auto; padding: 26px 20px 10px; }
.dash header.kepala { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.dash header.kepala h1 { font-family: Georgia, serif; font-size: 21px; color: #fff6e8; }
.dash header.kepala .sub { color: var(--redup); font-size: 13.5px; }
.dash header.kepala .kanan { margin-left: auto; display: flex; gap: 9px; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 20px; padding: 20px; }
.kartu h2 { font-size: 11px; letter-spacing: 0.14em; color: var(--emas); margin-bottom: 12px; display: flex; align-items: center; }
.kartu h2 .aksi { margin-left: auto; }
.grid-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 820px) { .grid-stat { grid-template-columns: repeat(2, 1fr); } }
.grid-stat .kotak { background: var(--kartu); border: 1px solid var(--garis); border-radius: 20px; padding: 18px 20px; }
.grid-stat .label { font-size: 10.5px; letter-spacing: 0.13em; color: var(--redup); font-weight: 700; margin-bottom: 7px; }
.grid-stat .angka { font-size: 25px; font-weight: 800; color: #fff6e8; line-height: 1; }
.grid-stat .sub { font-size: 12px; color: var(--redup); margin-top: 7px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.tumpuk { display: flex; flex-direction: column; gap: 12px; }
.baris { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.baris.pertama { border-top: none; padding-top: 0; }
.baris .tumbuh { flex: 1; min-width: 0; }
.baris b.nama { color: #fff6e8; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baris .kecil { font-size: 12px; color: var(--redup); }
.titik { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.titik-hidup { background: var(--hijau); }
.titik-mati { background: #6b5b43; }
.kode-pairing { font-family: ui-monospace, Consolas, monospace; font-size: 27px; font-weight: 700; letter-spacing: 0.3em; color: var(--emas2); }
.mutasi-teks { font-size: 13.5px; }
.kosong { color: var(--redup); font-size: 14px; }
.gagal {
  color: #f0665e; background: #2a0e0c; border: 1px solid #5a2320;
  border-radius: 13px; padding: 11px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px;
}

/* ——— Login ——— */
.masuk { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 18px; }
.masuk form { width: 100%; max-width: 392px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 24px; padding: 26px; }
.masuk .ubin-besar {
  width: 62px; height: 62px; border-radius: 17px; margin: 0 auto 16px;
  background: #2a1a0c; border: 1px solid var(--garis2);
  display: flex; align-items: center; justify-content: center;
}
.masuk h1 { font-family: Georgia, serif; text-align: center; font-size: 22px; color: #fff6e8; margin-bottom: 4px; }
.masuk .sub { text-align: center; color: var(--redup); font-size: 14px; margin-bottom: 22px; }
label.field { display: block; font-weight: 700; font-size: 13.5px; margin: 0 0 6px; }
input.field {
  width: 100%; font-size: 15px; color: var(--krem); background: var(--kartu2);
  border: 2px solid var(--garis); border-radius: 14px; padding: 11px 14px; margin-bottom: 15px;
  font-family: inherit;
}
input.field:focus { outline: none; border-color: var(--emas); }
input.field::placeholder { color: var(--redup2); }
.masuk .btn { width: 100%; text-align: center; }
.masuk .bawah { text-align: center; font-size: 12px; color: var(--redup2); margin-top: 16px; }

/* ——— Login/Daftar split (pola halaman masuk gateway publik) ——— */
.topbar { border-bottom: 1px solid var(--garis); background: rgba(13,7,3,0.82); backdrop-filter: blur(10px); }
.topbar .bungkus { display: flex; align-items: center; height: 62px; }
.topbar .kembali { margin-left: auto; color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 600; }
.topbar .kembali:hover { color: var(--krem); }
.split { display: grid; grid-template-columns: 400px 1fr; gap: 54px; max-width: 1080px; margin: 0 auto; padding: 52px 20px 10px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px; } }
.kartu-masuk { background: var(--kartu); border: 1px solid var(--garis); border-radius: 22px; padding: 28px; }
.kartu-masuk h1 { font-size: 23px; color: #fff6e8; margin-bottom: 5px; }
.kartu-masuk .sub { color: var(--redup); font-size: 14px; margin-bottom: 22px; }
.kartu-masuk .persetujuan { text-align: center; font-size: 12.5px; color: var(--redup); margin-top: 16px; line-height: 1.7; }
.di-bawah-kartu { text-align: center; margin-top: 20px; font-size: 14px; color: var(--redup); }
.bungkus-ikon { position: relative; }
.bungkus-ikon > svg { position: absolute; left: 13px; top: 12px; opacity: 0.55; }
.bungkus-ikon input.field { padding-left: 40px; }
.bungkus-ikon .mata { position: absolute; right: 12px; top: 10px; background: none; border: none; cursor: pointer; color: var(--redup); font-size: 12px; font-weight: 700; padding: 4px; }
label.field .lupa { float: right; font-size: 12.5px; color: var(--emas); text-decoration: none; font-weight: 600; }
.sisi-kanan h2 { font-family: Georgia, serif; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.2; color: #fff6e8; margin-bottom: 22px; }
.sisi-kanan h2 em { font-style: normal; color: var(--emas); }
.mock {
  border: 1px solid var(--garis2); border-radius: 18px; overflow: hidden; margin-bottom: 26px;
  background: var(--kartu); box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.mock .palang { display: flex; align-items: center; gap: 7px; background: #241811; padding: 10px 14px; border-bottom: 1px solid var(--garis); }
.mock .palang i { width: 10px; height: 10px; border-radius: 50%; background: #57431f; display: block; }
.mock .palang span { margin-left: 8px; font-size: 12px; color: var(--redup); background: #170d05; border-radius: 7px; padding: 3px 12px; }
.mock .isi-mock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.mock .mini { background: var(--kartu2); border: 1px solid var(--garis); border-radius: 12px; padding: 12px; }
.mock .mini .k { font-size: 9.5px; letter-spacing: 0.1em; color: var(--redup); font-weight: 700; }
.mock .mini .v { font-size: 16px; font-weight: 800; color: #fff6e8; margin-top: 3px; }
.manfaat { display: flex; flex-direction: column; gap: 16px; }
.manfaat .item { display: flex; gap: 12px; }
.manfaat .cek {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 1.6px solid var(--emas); color: var(--emas);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.manfaat b { color: #fff6e8; font-size: 14.5px; display: block; }
.manfaat p { color: var(--redup); font-size: 13.5px; }

/* ——— Sidebar dashboard ——— */
.dash-layout { display: grid; grid-template-columns: 228px 1fr; gap: 22px; max-width: 1180px; margin: 0 auto; padding: 24px 20px 10px; align-items: start; }
@media (max-width: 900px) { .dash-layout { grid-template-columns: 1fr; } }
.sidebar {
  position: sticky; top: 20px; background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 20px; padding: 16px 12px;
}
@media (max-width: 900px) { .sidebar { position: static; } }
.sidebar .menu { display: flex; flex-direction: column; gap: 3px; }
.sidebar .menu a {
  color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 11px; display: flex; gap: 10px; align-items: center;
}
.sidebar .menu a:hover { background: var(--kartu2); color: var(--krem); }
.sidebar .menu a.aktif { background: linear-gradient(135deg, #4a2a16, #8a5a33 60%, #a97c46); color: #fff6e8; }
.sidebar .grup { font-size: 10px; letter-spacing: 0.13em; color: var(--redup2); font-weight: 800; padding: 13px 12px 5px; }
.sidebar .akun-bawah { border-top: 1px solid var(--garis); margin-top: 13px; padding: 13px 12px 4px; }
.sidebar .akun-bawah b { color: #fff6e8; font-size: 13.5px; display: block; }
.sidebar .akun-bawah span { color: var(--redup); font-size: 12px; display: block; margin-bottom: 9px; }

/* ——— Langkah integrasi (checklist) ——— */
.cek-item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.cek-item.pertama { border-top: none; padding-top: 0; }
.cek-item .bulat {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.cek-item .sudah { background: #12331e; color: var(--hijau); border: 1px solid #1f5c33; }
.cek-item .belum { background: transparent; color: var(--redup2); border: 1.6px solid var(--garis2); }
.cek-item b { color: #fff6e8; font-size: 14px; display: block; }
.cek-item p { color: var(--redup); font-size: 12.5px; }

textarea.field {
  width: 100%; font-size: 13px; color: var(--krem); background: var(--kartu2);
  border: 2px solid var(--garis); border-radius: 14px; padding: 11px 14px; margin-bottom: 12px;
  font-family: ui-monospace, Consolas, monospace; resize: vertical; min-height: 74px;
}
textarea.field:focus { outline: none; border-color: var(--emas); }