/* daftar.css — halaman Mulai (/daftar/). Dasar warna, tombol, kepala, kaki dari /beranda.css. */

.daftar{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;padding-top:48px;padding-bottom:72px}
.daftar h1{font-size:clamp(30px,4vw,44px);font-weight:780}
.daftar .lead{margin-top:12px;color:var(--tx2);font-size:17px;max-width:560px}

/* kartu utama dengan tahap bernomor */
.kartu-daftar{margin-top:28px;background:var(--kartu);border:1px solid var(--garis);border-radius:20px;box-shadow:var(--bayang);padding:28px}
.tahap{padding:22px 0;border-top:1px solid var(--garis)}
.bagian-daftar>.tahap:first-child{padding-top:0;border-top:0}

/* penunjuk dua langkah */
.urutan-daftar{list-style:none;display:flex;gap:10px;margin:0 0 24px;padding:0}
.urutan-daftar li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--tx3)}
.urutan-daftar li+li::before{content:"";width:28px;height:1.5px;background:var(--garis);margin-right:2px}
.urutan-daftar .no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:13px;background:var(--bg2);color:var(--tx3)}
.urutan-daftar li.aktif{color:var(--tx)}
.urutan-daftar li.aktif .no{background:var(--hijau);color:#fff}
.urutan-daftar li.selesai .no{background:var(--hijau-muda);color:var(--hijau)}
.aksi-lanjut{display:flex;justify-content:flex-end;margin-top:8px}
.aksi-dua{justify-content:space-between;align-items:center;gap:12px}
.aksi-dua .tbl-teks{margin-top:14px}
.tbl-teks{display:block;margin-top:14px;padding:0;border:0;background:none;color:var(--tx2);font:inherit;font-size:14px;cursor:pointer}
.tbl-teks:hover{color:var(--tx)}
.tahap h2{font-size:18px;font-weight:720;letter-spacing:-.015em;margin-bottom:12px}
.tahap h2 label{cursor:pointer}
.bantu{color:var(--tx2);font-size:14px;margin-top:8px;line-height:1.55}
.bantu.kecil{font-size:12.5px;color:var(--tx3);margin-top:12px}

/* pilihan jalur */
.pilihan{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opsi{position:relative;cursor:pointer}
.opsi input{position:absolute;opacity:0;pointer-events:none}
.opsi-kartu{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px 16px 14px 44px;border:1.5px solid var(--garis);border-radius:14px;font-size:14px;color:var(--tx2);transition:border-color .15s,background .15s;position:relative}
.opsi-kartu::before{content:"";position:absolute;left:16px;top:16px;width:16px;height:16px;border-radius:50%;border:2px solid var(--garis);background:var(--kartu);transition:all .15s}
.opsi-atas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opsi-atas b{color:var(--tx);font-size:15px}
.tanda-jalur{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--hijau-muda);color:var(--hijau)}
.opsi:hover .opsi-kartu{border-color:color-mix(in srgb,var(--hijau) 40%,var(--garis))}
.opsi input:checked+.opsi-kartu{border-color:var(--hijau);background:color-mix(in srgb,var(--hijau-muda) 55%,var(--kartu))}
.opsi input:checked+.opsi-kartu::before{border-color:var(--hijau);background:var(--hijau);box-shadow:inset 0 0 0 3px var(--kartu)}
.opsi input:focus-visible+.opsi-kartu{outline:3px solid var(--mint);outline-offset:2px}

/* isian */
#nama_usaha,#jenis_usaha{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--garis);border-radius:12px;background:var(--bg);color:var(--tx)}
#nama_usaha:focus,#jenis_usaha:focus{outline:none;border-color:var(--hijau);box-shadow:0 0 0 4px color-mix(in srgb,var(--hijau) 18%,transparent)}
#nama_usaha[aria-invalid="true"],#jenis_usaha[aria-invalid="true"]{border-color:var(--merah)}
.sub-jenis{margin-top:18px}
.isian-akun{display:flex;flex-direction:column;gap:6px}
.isian-akun label{font-size:14px;font-weight:650;margin-top:6px}
.isian-akun input{width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1.5px solid var(--garis);border-radius:12px;background:var(--bg);color:var(--tx)}
.isian-akun input:focus{outline:none;border-color:var(--hijau);box-shadow:0 0 0 4px color-mix(in srgb,var(--hijau) 18%,transparent)}
.isian-akun input[aria-invalid="true"]{border-color:var(--merah)}
.dua-isian{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dua-isian>div{display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.dua-isian{grid-template-columns:1fr}}
.kotak-aktivasi{max-width:520px;margin:22px auto 0;padding:16px 18px;border-radius:14px;background:var(--hijau-muda);text-align:left;font-size:14.5px}
.kotak-aktivasi .tbl{margin-top:12px}

/* tombol besar + putaran */
.tbl-besar{margin-top:14px;padding:15px 26px;font-size:16px;cursor:pointer}
.tbl-besar:disabled{opacity:.6;cursor:default;transform:none}
.putar{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:putar .8s linear infinite}
.tbl.sibuk .putar{display:inline-block}
@keyframes putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.putar{animation:none}}

/* status */
.status{margin-top:18px;padding:14px 16px;border-radius:14px;font-size:14.5px;border:1px solid var(--garis);background:var(--bg2)}
.status.ok{background:var(--hijau-muda);border-color:color-mix(in srgb,var(--hijau) 30%,transparent)}
.status.galat{background:color-mix(in srgb,var(--merah) 9%,var(--kartu));border-color:color-mix(in srgb,var(--merah) 30%,transparent)}
.status a{font-weight:650}

/* berhasil */
.berhasil{text-align:center;padding:40px 32px}
.centang{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--hijau);position:relative;box-shadow:0 10px 30px -8px rgba(18,138,90,.7)}
.centang::after{content:"";position:absolute;left:23px;top:16px;width:14px;height:26px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
.berhasil h2{font-size:26px;font-weight:760}
.nomor-besar{margin-top:6px;font-size:18px;font-weight:650;color:var(--hijau)}
.lead-kecil{margin:12px auto 0;max-width:520px;color:var(--tx2)}
.lanjut{text-align:left;max-width:520px;margin:24px auto 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;color:var(--tx2);font-size:14.5px}
.lanjut b{color:var(--tx)}
.lanjut a{display:inline-block;margin-top:2px;font-weight:650}
.aksi-baris{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* samping */
.daftar-samping{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.kartu-samping{background:var(--bg2);border:1px solid var(--garis);border-radius:18px;padding:20px 22px}
.kartu-samping h3{font-size:15px;margin-bottom:12px}
.kartu-samping p{font-size:14px;color:var(--tx2)}
.cek{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--tx2)}
.cek li{position:relative;padding-left:28px}
.cek li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--hijau-muda)}
.cek li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;border:solid var(--hijau);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cek b{color:var(--tx)}
.alur{list-style:none;margin:0;padding:0;counter-reset:a;display:flex;flex-direction:column;gap:14px}
.alur li{counter-increment:a;position:relative;padding-left:34px;font-size:14px}
.alur li::before{content:counter(a);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--kartu);border:1px solid var(--garis);color:var(--tx2)}
.alur b{display:block;color:var(--tx)}
.alur span{color:var(--tx2)}
.bantuan{font-size:14px;color:var(--tx2);padding:0 6px}
.bantuan a{font-weight:650}

/* kaki ringkas */
.hal-daftar .kaki{border-top:1px solid var(--garis);padding:28px 0 40px}
.kaki-baris{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.kaki-kiri{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.hal-daftar .kaki .merek{font-size:16px;margin:0}
.kaki-pt{font-size:13px;color:var(--tx3)}
.kaki-tautan{display:flex;gap:22px;font-size:13.5px;font-weight:550}
.hal-daftar .penafian{border-top:0;padding-top:0;margin-top:14px;font-size:12px;line-height:1.6;color:var(--tx3);white-space:normal}
/* Satu baris di layar lebar (sama dengan beranda); di layar sempit tetap turun baris. */
@media (min-width:1180px){.hal-daftar .penafian{white-space:nowrap;text-align:left}}

@media (max-width:920px){
  .daftar{grid-template-columns:1fr;gap:24px;padding-top:32px}
  .daftar-samping{position:static}
}
@media (max-width:600px){
  .kartu-daftar{padding:20px 16px;border-radius:16px}
  .pilihan{grid-template-columns:1fr}
  .urutan-daftar li{font-size:13px}
  .aksi-dua{flex-direction:column-reverse;align-items:stretch}
  .aksi-dua .tbl-teks{margin-top:4px;text-align:center}
  .urutan-daftar li+li::before{width:16px}
  .tbl-besar{width:100%;justify-content:center}
  .atas nav a:not(.tbl){display:none}
}