/* Portal daftar member BASI — dirancang untuk layar HP lebih dulu. */
:root{
  --merah:#e3241b; --merah-tua:#b81c14; --merah-muda:#fdecea;
  --teks:#2f2f2e; --redup:#6d6d6b; --garis:#e4e1dc; --latar:#f6f4f1; --kartu:#ffffff;
  --hijau:#16855b; --hijau-muda:#e6f4ee;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--latar); color:var(--teks);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a{ color:var(--merah); }

.kepala{ text-align:center; padding:22px 16px 6px; }
.kepala img{ width:132px; height:auto; }
.wadah{ max-width:560px; margin:0 auto; padding:8px 16px 120px; }
.judul{ font-size:22px; font-weight:700; margin:6px 0 4px; text-align:center; }
.sub{ color:var(--redup); text-align:center; margin:0 0 18px; font-size:15px; }

.kartu{ background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:16px; margin-bottom:14px; }
.kartu h2{ font-size:16px; margin:0 0 2px; display:flex; align-items:center; gap:8px; }
.kartu h2 .no{ width:24px; height:24px; border-radius:50%; background:var(--merah); color:#fff; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.kartu .ket{ color:var(--redup); font-size:14px; margin:0 0 12px; }

.isian{ margin-bottom:14px; }
.isian:last-child{ margin-bottom:0; }
.isian label.lbl{ display:block; font-weight:600; font-size:14px; margin-bottom:5px; }
.isian .opsional{ font-weight:400; color:var(--redup); }
.isian input[type=text], .isian input[type=tel], .isian input[type=email], .isian input[type=date], .isian textarea{
  width:100%; font:inherit; color:inherit; padding:12px 13px; border:1.5px solid var(--garis); border-radius:11px;
  background:#fff; outline:none; }
.isian textarea{ min-height:96px; resize:vertical; }
.isian input:focus, .isian textarea:focus{ border-color:var(--merah); box-shadow:0 0 0 3px var(--merah-muda); }
.isian .bantu{ font-size:13px; color:var(--redup); margin-top:4px; }
.isian .salah{ font-size:13px; color:var(--merah-tua); margin-top:4px; font-weight:600; }
.isian.ada-salah input, .isian.ada-salah textarea{ border-color:var(--merah); }

/* pilihan sekali ketuk */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--garis); background:#fff; font-size:15px; cursor:pointer; user-select:none; }
.chip span::before{ content:""; width:14px; height:14px; border-radius:4px; border:1.5px solid #bdb9b3; flex:none; }
.chip input[type=radio] + span::before{ border-radius:50%; }
.chip input:checked + span{ border-color:var(--merah); background:var(--merah-muda); color:var(--merah-tua); font-weight:600; }
.chip input:checked + span::before{ background:var(--merah); border-color:var(--merah);
  box-shadow:inset 0 0 0 2px #fff; }
.chip input:focus-visible + span{ box-shadow:0 0 0 3px var(--merah-muda); }

.catatan-pelatih{ border:1.5px dashed var(--merah); background:#fffaf9; border-radius:12px; padding:12px; }
.catatan-pelatih label.lbl{ color:var(--merah-tua); }

.setuju{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
.setuju input{ width:20px; height:20px; margin-top:2px; accent-color:var(--merah); flex:none; }

.kirim-bar{ position:fixed; left:0; right:0; bottom:0; background:rgba(246,244,241,.96);
  border-top:1px solid var(--garis); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
.kirim-bar .dalam{ max-width:560px; margin:0 auto; }
.tombol{ display:block; width:100%; border:0; border-radius:12px; padding:15px; font:inherit; font-weight:700;
  font-size:17px; background:var(--merah); color:#fff; cursor:pointer; text-align:center; text-decoration:none; }
.tombol:active{ background:var(--merah-tua); }
.tombol.wa{ background:#1fa855; }
.tombol.garis{ background:#fff; color:var(--teks); border:1.5px solid var(--garis); }

.pesan-salah{ background:var(--merah-muda); color:var(--merah-tua); border-radius:12px; padding:12px 14px;
  margin-bottom:14px; font-size:14px; font-weight:600; }
.selesai{ text-align:center; padding-top:10px; }
.selesai .ikon{ width:68px; height:68px; border-radius:50%; margin:6px auto 10px; display:flex; align-items:center;
  justify-content:center; font-size:34px; background:var(--hijau-muda); color:var(--hijau); }
.selesai .ikon.info{ background:var(--merah-muda); color:var(--merah); }
.selesai p{ color:var(--redup); }
.selesai .tombol{ margin-top:12px; }
.kaki{ text-align:center; color:var(--redup); font-size:13px; margin-top:20px; }
.sembunyi{ display:none !important; }
.jebakan{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Kontrak (Tata Tertib & Pelepasan Pertanggung-Jawaban) — di form dalam kotak gulir, di /ketentuan utuh */
.ketentuan{ font-size:14px; line-height:1.55; }
.ketentuan h3{ font-size:14px; margin:12px 0 4px; }
.ketentuan h3:first-child{ margin-top:0; }
.ketentuan ol{ padding-left:20px; margin:4px 0; }
.ketentuan li{ margin-bottom:4px; }
.ketentuan p{ margin:4px 0; }
.kotak-ketentuan{ max-height:260px; overflow-y:auto; border:1.5px solid var(--garis); border-radius:12px;
  padding:12px 14px; background:#fbfaf8; -webkit-overflow-scrolling:touch; }
.kotak-ketentuan:focus{ outline:none; border-color:var(--merah); }

/* Formulir lengkap 2026-10 */
.dua-kolom{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dua-kolom .isian{ margin-bottom:14px; }
.isian textarea.rinci{ min-height:64px; }
.chip.tidak-ada span{ border-style:dashed; }
.info-wali{ background:#fff6ee; border:1px solid #f3c99b; border-radius:10px; padding:9px 12px; font-size:14px; margin:6px 0 12px; }
.ttd-wadah{ position:relative; height:170px; border:1.5px dashed #bdb9b3; border-radius:12px; background:#fff; touch-action:none; }
.ttd-wadah canvas{ width:100%; height:100%; display:block; border-radius:12px; cursor:crosshair; touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.ttd-petunjuk{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#b4b0a9; font-size:14px; pointer-events:none; }
.ttd-wadah.terisi .ttd-petunjuk{ display:none; }
.ttd-wadah.terisi{ border-style:solid; border-color:var(--merah); }
.ttd-hapus{ position:absolute; right:8px; top:8px; border:1px solid var(--garis); background:#fff; border-radius:8px; padding:4px 10px; font:inherit; font-size:13px; color:var(--redup); cursor:pointer; }
.isian.ada-salah .ttd-wadah{ border-color:var(--merah); }
.konfirmasi{ text-align:left; background:#fff; border:1.5px solid #1fa855; border-radius:14px; padding:12px 14px; margin:16px 0 4px; font-size:14px; }
.konfirmasi p{ margin:4px 0 8px; color:var(--teks); }
.konfirmasi .kode{ font-size:13px; color:var(--redup); }