/* Halaman pengantar keanggotaan. Primitif bersama ada di page.module.css. */

/* ---------- Pita seksi berselang-seling ---------- */

/*
  Halaman ini panjang dan seluruhnya teks pendukung: syarat, langkah, tahap,
  janji privasi. Di atas satu bidang putih tanpa putus, keempatnya melebur dan
  pembaca kehilangan tempat. Latar yang berganti memberi batas tanpa perlu
  garis pemisah di mana-mana.

  Melebar ke seluruh layar dengan `box-shadow` + `clip-path`, bukan
  `margin-inline: calc(50% - 50vw)`: `100vw` ikut menghitung batang gulir dan
  memunculkan gulir mendatar beberapa piksel di Windows. Alasan lengkapnya ada
  pada `.pita` di beranda.module.css.
*/
.pita {
  position: relative;
  padding: 3.5rem 0;
}

.pitaAbu {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
  border-block: 1px solid var(--border);
}

/*
  ---------- Satu bab, tiga langkah ----------

  MEMBUAT AKUN, MENGISI FORMULIR, DAN MENUNGGU VERIFIKASI ADALAH SATU URUSAN
  yang dikerjakan berturut-turut oleh orang yang sama dalam sekali duduk.
  Ketiganya semula tampil sebagai tiga pita yang latarnya berganti-ganti —
  abu, putih, abu — sehingga yang dikabarkan kepada pembaca justru kebalikan
  dari yang benar: tiga pokok terpisah.

  Latar berselang-seling sebagai satu-satunya pembeda antar-seksi punya nama
  sendiri di daftar pola slop ("Alternating Background Only"). Alasan yang
  ditulis di kepala berkas ini — "latar yang berganti memberi batas" — masih
  berlaku, tetapi batas yang diberikannya keliru letak: ia memotong di tengah
  bab, bukan di antara bab.

  Ketiga kelas di bawah menyatukannya menjadi SATU bidang abu utuh. Tidak ada
  kepala yang diturunkan derajatnya, karena ketiga langkah itu memang sederajat
  — yang mengelompokkan mereka adalah jaraknya: 2,25rem di dalam bab, 3,5rem
  di antara bab.

  Jaraknya lewat `padding`, BUKAN `margin`: `.pitaAbu` melukis latarnya dengan
  `box-shadow` lalu memangkasnya dengan `clip-path`, dan pangkasan itu berhenti
  tepat di tepi elemen. Margin berada di luar tepi tersebut, jadi ia akan
  menyisakan celah berlatar halaman persis di tempat yang seharusnya menyatu.
*/
.babAwal {
  padding-bottom: 0;
  border-bottom: 0;
}

.babLanjut {
  padding-top: 2.25rem;
  padding-bottom: 0;
  border-block: 0;
}

.babAkhir {
  padding-top: 2.25rem;
  border-top: 0;
}

/* ---------- Kepala seksi ---------- */

.kepala {
  margin-bottom: 2rem;
}

.label {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.15rem 0.75rem;
  border-radius: var(--r-kecil);
  /*
    Dua token menggantikan satu media query, DAN memperbaiki kontrasnya.

    Latarnya persis pasangan `--brand-wash` (`--brand-50` terang, `--brand-950`
    gelap), jadi media query-nya tidak pernah perlu ada — ia hanya menambah
    cacat: media query tidak mengenal `[data-theme]`, sehingga memilih tema
    terang di atas sistem gelap menghasilkan lencana bertanah gelap di atas
    kartu terang.

    Tintanya diganti dari `--primary` ke `--brand-ink`. Di tema terang keduanya
    bernilai sama persis (`--brand-700`), jadi tidak ada yang berubah. Di tema
    gelap `--primary` adalah `--brand-400`, dan di atas `--brand-950` ia hanya
    mencapai 4,63:1 — untuk teks 0,7rem itu lolos AA dengan sangat tipis.

    KONTRAS TERUKUR:
      #a80808 di atas #fef1f1 -> 7,05:1  (terang, tidak berubah)
      #eb4c4c di atas #3e0404 -> 4,63:1  (gelap, SEBELUMNYA)
      #f48b8b di atas #3e0404 -> 7,28:1  (gelap, sekarang)
  */
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.judul {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.25;
}

.subjudul {
  margin: 0.5rem 0 0;
  max-width: 44rem;
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.6;
}

/* ---------- Syarat kelayakan ---------- */

.syarat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.syaratKartu {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.syaratKartu:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--naik-angkat);
}

.syaratAtas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.centang {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  /* Cakram centang — sama persis kasusnya dengan `.label` di atas:
     latar `--brand-wash`, tinta `--brand-ink` (7,28:1 di gelap, naik dari
     4,63:1), dan media query-nya dibuang. */
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.syaratKategori {
  color: var(--primary);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.syaratNama {
  margin: 0 0 0.6rem;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-isi);
  line-height: 1.3;
}

.syaratKet {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.6;
}

/* ---------- Tujuh langkah pengisian ---------- */

/*
  Kartu bernomor dalam kisi, BUKAN garis waktu.

  Ketujuhnya dikerjakan dalam satu duduk sepanjang 20-30 menit, jadi yang ingin
  diketahui pembaca adalah "apa saja yang akan ditanyakan", bukan "kapan
  masing-masing terjadi". Garis waktu di sini justru menyiratkan tunggu-menunggu
  yang tidak ada.

  Bandingkan dengan `.tahap` di bawah, yang memang kronologi — dan yang
  nomornya sengaja dibuat cincin, bukan cakram, karena dikerjakan Sekretariat.
*/
.langkah {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.langkahButir {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  font-size: var(--t-dasar);
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.langkahButir:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.langkahNo {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  font-family: var(--font-judul), Georgia, serif;
  font-size: var(--t-dasar);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 0.18s ease;
}

.langkahButir:hover .langkahNo {
  transform: scale(1.08);
}

/* Tindakan di bawah kartu langkah nol. */
.akunAksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
}

/*
  Terukur 26px. Aturan target sentuh global sudah berlaku di sini — tautan ini
  BUKAN di dalam kalimat, melainkan aksi yang berdiri sendiri — tetapi
  `min-height: auto` mematikannya. Yang tersisa dari pemeriksaan menyeluruh
  hanyalah empat tautan semacam ini; keduanya di jalur pendaftaran, tempat
  salah tekan paling merugikan.
*/
.akunMasuk {
  display: inline-flex;
  align-items: center;
  min-height: var(--tombol-h-kecil);
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-dasar);
}

.akunMasuk:hover {
  text-decoration: underline;
}

/* ---------- Delapan tahap verifikasi ---------- */

.tahap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.tahapKartu {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tahapKartu:hover {
  border-color: var(--brand-300);
  /* `--brand-wash` = `--brand-50` terang / `--brand-950` gelap — pasangan yang
     sama persis dengan media query yang dulu ada di bawah aturan ini, tetapi
     ikut menghormati toggle tema. */
  background: var(--brand-wash);
}

/*
  Cincin, bukan cakram penuh.

  Perbedaan bentuk itu membawa arti: cakram merah dipakai tujuh langkah yang
  dikerjakan PEMOHON, cincin dipakai delapan tahap yang dikerjakan
  SEKRETARIAT. Dua urutan bernomor berdampingan di satu halaman terlalu mudah
  tertukar kalau keduanya tampil sama.
*/
.tahapNo {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--bg);
  color: var(--primary);
  font-size: var(--t-kecil);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tahapIsi {
  min-width: 0;
}

.tahapNama {
  margin: 0 0 0.5rem;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-isi);
  line-height: 1.3;
}

/*
  Penanda status tahap.

  Isinya BUKAN hiasan: ia membedakan tahap yang benar-benar menentukan nasib
  pengajuan dari tahap yang tidak. Lima tahap wajib lolos sebelum sebuah
  pengajuan boleh dinyatakan terverifikasi; dua terjadi sesudah keputusan; satu
  — pembayaran — belum bisa dinyatakan apa pun karena skema iuran belum
  ditetapkan DPP. Pemohon berhak tahu yang mana.

  Ketiganya dibedakan bentuk, bukan hanya warna: bidang penuh, bidang bergaris,
  dan garis putus-putus. Penanda yang hanya berbeda warna tidak terbaca oleh
  sebagian pengguna buta warna.
*/
.tanda {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-kecil);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.tandaWajib {
  background: var(--brand-700);
  color: #fff;
}

.tandaSesudah {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/*
 * GARISNYA UTUH, BUKAN PUTUS-PUTUS.
 *
 * Semula putus-putus, dan itu benar pada waktunya: penandanya berbunyi "Belum
 * diberlakukan", dan garis putus-putus adalah bahasa visual untuk sesuatu yang
 * belum pasti.
 *
 * Ketua Umum meminta tulisannya diganti menjadi "Sudah diberlakukan". Garis
 * putus-putus yang tertinggal akan membantah kalimat yang dibingkainya — dan
 * ketika gambar dan tulisan berselisih, yang dipercaya orang gambarnya.
 */
.tandaMenunggu {
  border: 1px solid var(--brand-300);
  color: var(--primary);
}

/* Keterangan arti ketiga penanda, di bawah kisinya. */
.arti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 1.75rem;
  color: var(--text-muted);
  font-size: var(--t-kecil);
  line-height: 1.5;
}

.artiButir {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Catatan di bawah seksi ---------- */

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 52rem;
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--primary);
  background: var(--bg);
  border-radius: 0 var(--r-kartu) var(--r-kartu) 0;
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.65;
}

/* Di atas pita abu, catatannya justru yang putih — supaya tetap terpisah. */
.pitaAbu .note {
  background: var(--surface);
}

.noteIkon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--primary);
}

/* ---------- Data pribadi ---------- */

/*
  Panelnya sendiri, tidak disamakan dengan seksi lain.

  Untuk mendaftar, seorang guru besar menyerahkan nomor identitas dan alamat
  pribadinya kepada organisasi yang situsnya baru berdiri. Janji tentang
  perlakuan data itu ikut menentukan apakah ia jadi mendaftar atau menutup
  halaman — dan janji semacam itu tidak boleh terlihat seperti catatan kaki.
*/
.privasi {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 2rem 2.25rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-kartu);
  background: var(--bg);
  box-shadow: var(--naik-panel);
}

.privasiJudul {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-besar);
  line-height: 1.3;
}

.gembok {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
}

.privasiDaftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.privasiButir {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--t-dasar);
  line-height: 1.65;
}

.privasiIkon {
  flex: none;
  margin-top: 0.4rem;
  color: var(--primary);
}

/* ---------- Ajakan mendaftar ---------- */

.ctaBox {
  /* Gabungan: pasang juga kelas "ajakan" pada elemennya di Blade. */
  max-width: 46rem;
  margin-inline: auto;
}

.ctaJudul {
  margin: 0 0 0.6rem;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-xl);
  line-height: 1.25;
}

.cta {
  /* Gabungan: pasang juga kelas "ajakanTombol" pada elemennya di Blade. */
}

.ctaNote {
  /* Gabungan: pasang juga kelas "ajakanTeks" pada elemennya di Blade. */
  margin: 1rem auto 0;
  font-size: var(--t-dasar);
}

/*
  Tautan pendukung — keduanya halaman yang BENAR-BENAR ADA.

  Mockup asalnya menaruh tiga janji layanan di sini ("Bebas Biaya Formulir",
  "Hotline WhatsApp"); ketiganya belum ada, dan janji layanan yang tidak bisa
  ditepati merugikan lebih besar daripada ruang kosong. Dua tautan ini
  menggantikannya karena keduanya benar-benar berguna bagi orang yang ragu
  mendaftar.
*/
.ctaTautan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-dasar);
}

.ctaTautan a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tombol-h-kecil);
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.ctaTautan a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

  .syaratKartu,
  .langkahButir,
  .langkahNo,
  .tahapKartu {
    transition: none;
  }

  .syaratKartu:hover,
  .langkahButir:hover {
    transform: none;
  }

  .langkahButir:hover .langkahNo {
    transform: none;
  }
}