/* Halaman /daftar. Token warna/font dari styles.css dipakai ulang, tapi
   layoutnya ditulis dari nol -- ini formulir panjang, bukan landing page. */

/* Sama seperti kelas.css dan admin.css: aturan display di bawah menang
   atas [hidden] bawaan browser, jadi ini harus ada supaya panel sukses
   dan blok Peserta 3 benar-benar tersembunyi. Bug ini sudah dua kali
   kejadian di proyek ini. */
[hidden] {
  display: none !important;
}

.daftar-body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--body);
}

/* Hitam, bukan putih. Logo EQUAL berwarna pink, dan pink di atas putih
   nyaris tidak terlihat. Sekalian menyamakan dengan topbar halaman admin
   yang memang sudah hitam, jadi seluruh halaman non-beranda punya kepala
   yang sama. */
.daftar-topbar {
  padding: 20px 24px;
  background: var(--black);
}

.daftar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
}

.daftar-brand img {
  height: 22px;
  width: auto;
}

.daftar-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 90px;
}

.daftar-shell h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0.9rem 0 0;
}

.daftar-lede {
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: 1rem 0 0;
}

.daftar-group {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  padding: 22px;
  margin: 28px 0 0;
}

.daftar-group legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 8px;
}

/* Tanda wajib. Merah dipakai konsisten dengan --red yang sudah ada di
   situs, dan tidak berdiri sendiri sebagai penanda -- teks errornya nanti
   menyebut nama fieldnya, jadi tetap kebaca kalau warnanya tidak terlihat. */
.daftar-field em,
.daftar-group legend em,
.daftar-upload-label em {
  font-style: normal;
  color: var(--red);
}

.daftar-note {
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 4px;
}

.daftar-field {
  display: block;
  margin-top: 16px;
}

.daftar-field > span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.daftar-field input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--black);
}

.daftar-field input:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--white);
}

/* Field yang gagal validasi ditandai border merah DAN pesan teks di
   bawah tombol -- warna saja tidak cukup buat yang tidak bisa
   membedakan warna. */
.daftar-field input[aria-invalid='true'] {
  border-color: var(--red);
}

.daftar-field small {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.daftar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.daftar-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.daftar-plan input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.daftar-plan-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.daftar-plan-box strong {
  font-family: var(--display);
  font-size: 1rem;
}

.daftar-plan-box small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.daftar-plan input:checked + .daftar-plan-box {
  border-color: var(--black);
  background: var(--pink);
}

/* Fokus keyboard harus tetap terlihat walau input aslinya disembunyikan,
   supaya pilihan paket bisa dipakai tanpa mouse. */
.daftar-plan input:focus-visible + .daftar-plan-box {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.daftar-person {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.daftar-person h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0;
}

/* Kotak terang, sama seperti .daftar-group di atasnya. Ini keharusan,
   bukan pilihan gaya: sejak halaman ini berlatar foto gelap, apa pun
   yang tidak punya kotak terang sendiri mewarisi color:var(--black)
   dari .daftar-body dan berubah jadi teks hitam di atas latar yang
   hampir hitam. Kotak ini sempat persis begitu -- label, teks bantuan,
   dan tombol "Choose File" bawaan browser sama sekali tidak terbaca,
   dan bordernya (hitam 14% alpha) juga hilang.

   Bordernya tetap putus-putus supaya masih terbaca sebagai area unggah,
   bukan kartu isian biasa. Radius dan padding disamakan dengan
   .daftar-group karena keduanya kartu yang bertumpuk langsung
   berdampingan di kolom yang sama. */
.daftar-upload {
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: var(--white);
  padding: 22px;
  margin-top: 14px;
}

.daftar-upload-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.daftar-upload input[type='file'] {
  font-size: 0.85rem;
  max-width: 100%;
}

.daftar-upload-preview {
  display: block;
  max-width: 180px;
  max-height: 130px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 10px;
  background: var(--paper);
}

.daftar-upload-status {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 8px;
  min-height: 1em;
}

.daftar-upload-status[data-state='ok'] {
  color: #1a7f37;
}

.daftar-upload-status[data-state='error'] {
  color: var(--red);
}

/* Perangkap bot: harus tidak terlihat DAN tidak terbaca screen reader,
   tapi tetap terisi oleh bot yang mengisi semua input. Karena itu bukan
   display:none (banyak bot melewati field yang display:none). */
.daftar-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.daftar-error {
  margin: 22px 0 0;
  padding: 13px 16px;
  border: 1px solid rgba(229, 72, 77, 0.35);
  background: rgba(229, 72, 77, 0.07);
  color: #8a2226;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}

#daftar-submit {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
}

#daftar-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.daftar-sukses-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 620px) {
  .daftar-row,
  .daftar-plans {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Elemen yang muncul sejak form digambar dinamis dari susunan di
   /admin (lihat daftar.js). Sebelumnya pertanyaan ditulis tetap di
   daftar.html, jadi beberapa pembungkus ini belum ada.
   ============================================================ */

/* Pengganti <legend>: dipakai di kotak yang isinya dibuat JavaScript,
   di mana <fieldset>/<legend> asli tidak lagi dipakai. */
.daftar-legend {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.daftar-legend + small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.daftar-group-paket {
  padding-bottom: 22px;
}

.daftar-field select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--black);
}

.daftar-field select:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--white);
}

.daftar-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--black);
  resize: vertical;
}

.daftar-field textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--white);
}

/* Kotak unggahan sekarang berdiri sendiri (bukan di dalam satu fieldset
   "Unggahan" seperti versi sebelumnya), jadi butuh jarak antar kotak. */
.daftar-upload + .daftar-upload {
  margin-top: 14px;
}

.daftar-upload > small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 8px;
}

/* Keadaan memuat sebelum susunan pertanyaan datang dari server. */
.daftar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  color: var(--ink-muted);
  padding: 40px 0;
}

.daftar-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--pink);
  animation: daftar-spin 0.8s linear infinite;
}

@keyframes daftar-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   LATAR FOTO
   ============================================================
   Sama persis pendekatannya dengan admin.css: lapisan position:fixed
   tersendiri, bukan background-attachment:fixed, supaya menggulir
   halaman tidak memicu gambar ulang. Lihat catatan lengkapnya di sana.

   Halaman ini formulir panjang yang digulir jauh, jadi bedanya paling
   terasa di sini. */
body.daftar-body {
  background-color: #12100f;
}

body.daftar-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Lapisan gelap di atas fotonya. Titik paling terang foto aslinya ada
     di nilai 93, dan di titik itu aksen pink cuma mencapai kontras 3,8:1
     terhadap teks -- di bawah ambang baca. Diredupkan 45%, titik
     tercerahnya turun ke sekitar 51 dan SELURUH rentang foto jadi aman
     untuk teks putih maupun pink, tanpa perlu menambal warna satu per
     satu. Fotonya juga jadi latar yang menemani, bukan yang bersaing
     dengan isi halaman. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('/EDITS/bg-panel.webp');
  background-size: cover;
  background-position: center;
}

/* Judul, pengantar, dan panel hasil duduk langsung di atas foto.

   Isian formulirnya sendiri ada di dalam kotak terang, jadi tidak
   terpengaruh -- TAPI itu berlaku hanya selama setiap kotak benar-benar
   punya background sendiri. .daftar-upload dulu tidak punya, dan seluruh
   isinya jadi hitam di atas hitam tanpa ada yang menyadarinya sampai
   dilaporkan pemakainya. Kalau menambah kotak isian baru di halaman ini,
   pastikan kotaknya punya background, atau warnai isinya untuk latar
   gelap di bagian ini. */
.daftar-shell h1 {
  color: var(--white);
}

.daftar-lede {
  color: rgba(255, 255, 255, 0.75);
}

.daftar-shell .section-kicker {
  color: var(--pink);
}

.daftar-status {
  color: rgba(255, 255, 255, 0.75);
}

/* Tombol kirim tadinya hitam, dan hitam di atas foto gelap hampir
   hilang. Diganti pink, yang juga menjadikannya satu-satunya elemen
   paling mencolok di halaman ini, sesuai perannya. */
#daftar-submit {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--black);
}

.daftar-topbar {
  /* Topbar hitam pekat tidak lagi perlu jadi kotak tersendiri di atas
     foto; dibuat setengah tembus supaya menyatu dengan latarnya. */
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* .button-outline dipakai bersama dengan beranda, di mana latarnya terang
   dan teks hitam memang benar. Di halaman ini latarnya foto gelap, jadi
   versi terangnya dipakai. DIBATASI ke .daftar-body supaya tampilan
   tombol yang sama di beranda tidak ikut berubah. */
.daftar-body .button-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.daftar-body .button-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}