/* FAQ — sub-menu Hubungi Kami. */

/*
  Lebarnya cukup untuk DUA kolom, bukan hanya untuk kolom bacaan.

  Sebelumnya seluruh badan halaman dipatok 46rem. Untuk jawabannya itu benar
  — prosa memang perlu dibatasi agar barisnya tidak terlalu panjang — tetapi
  batas itu ikut menahan judul bagian, sehingga halaman selebar 1292px hanya
  memakai 782px.

  TERUKUR pada layar 1920px, sebelum diperbaiki:
    .page   314..1606  (1292px)
    isi     340..1122  ( 782px)   <- 510px kosong di kanan
    tinggi halaman 2812px

  Kolom jawaban tetap 46rem. Yang berubah hanya judul bagian: ia pindah ke
  lajur kiri, sehingga ketiganya sejajar pada satu sumbu — kosakata yang sama
  dengan daftar cakupan di halaman Kemitraan dan Think Tank.
*/
/*
  Lebar lajur kiri dan jaraknya disebut sekali, lalu dipakai ulang — kisi
  bagian DAN penyelarasan pita ajakan di bawahnya memakai angka yang sama.
  Ditulis dua kali, keduanya akan berbeda pada perubahan berikutnya.
*/
.body {
  --rel: 14rem;
  --sela: 3rem;

  max-width: 63rem;
  margin-top: 2.5rem;
}

.group {
  margin-bottom: 2.5rem;
}

@media (min-width: 64rem) {
  .group {
    display: grid;
    grid-template-columns: var(--rel) minmax(0, 46rem);
    gap: 0 var(--sela);
    align-items: start;
    margin-bottom: 3.5rem;
  }

  /*
    LAJUR SETIAP ANAK DISEBUTKAN. Tanpa ini, kisi menempatkan anak berikutnya
    ke sel berikutnya — judul ke lajur 1, pertanyaan pertama ke lajur 2,
    pertanyaan kedua kembali ke lajur 1, dan seterusnya berselang-seling.
    Saya sempat melewatkannya, dan hasilnya daftar pertanyaan terbelah dua.

    `grid-row: 1 / -1` membuat sel judul setinggi seluruh daftar, sehingga
    `position: sticky` di dalamnya punya ruang untuk mengikuti guliran. Kalau
    judul hanya menempati baris pertama, ia berhenti bergerak seketika.
  */
  /*
    TANPA `position: sticky`, dan itu keputusan yang dikoreksi.

    Saya sempat membuatnya menempel saat digulir. Dua hal membuatnya keliru di
    sini:

    Pertama, nilai `top: 7rem` (119px) lebih pendek daripada kepala situs yang
    juga menempel (TERUKUR 131px), sehingga judul berhenti tepat di baliknya
    dan terpotong. Menaikkannya ke 9rem memperbaiki bagian itu — terukur 22px
    udara — tetapi menyingkap masalah kedua yang lebih mendasar.

    Kedua, bagian di halaman ini PENDEK. "Data Pribadi" hanya tiga pertanyaan,
    jadi selnya cuma sekitar 180px. Elemen menempel tidak boleh keluar dari
    kotak induknya: begitu dasar sel itu lewat, judulnya ikut terdorong ke atas
    — ke belakang kepala situs. TERUKUR pada guliran 1300px: judul di 69px,
    tertutup 62px.

    Menempel berguna ketika daftarnya panjang dan pembaca kehilangan konteks.
    Di sini daftarnya tidak pernah cukup panjang untuk itu, sementara harganya
    adalah judul yang berkedip di balik kepala situs. Lajur kirinya tetap —
    itu yang memperbaiki lebar dan perataan — hanya gerakannya yang dibuang.
  */
  .groupTitle {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .item {
    grid-column: 2;
  }
}

.groupTitle {
  /* Gabungan: pasang juga kelas "judulSeksi" pada elemennya di Blade. */
  margin-top: 0;
}

.item {
  border-bottom: 1px solid var(--border);
}

/*
  BARIS YANG BISA DIKLIK HARUS MENJAWAB SAAT DISENTUH.

  Baris ini `cursor: pointer` tetapi tidak punya satu pun keadaan hover —
  tidak ada perubahan warna, latar, atau apa pun. Kursor berubah bentuk,
  halamannya diam. Pada daftar empat belas baris seragam, itu membuat
  pengunjung ragu apakah barisnya memang dapat dibuka.

  Ukuran pertanyaan juga dinaikkan dari `--t-dasar` ke `--t-isi`. Sebelumnya
  pertanyaan dan jawabannya berukuran sama persis, sehingga keduanya terbaca
  sederajat — padahal yang dipindai mata lebih dulu adalah pertanyaannya.

  Bantalan sisi dan sudut membuat bidang sentuhnya terlihat, bukan hanya
  terasa. `margin-inline` negatif menjaga tulisannya tetap sejajar dengan
  judul bagian, meski bidangnya melebar.
*/
.question {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--r-kartu);
  font-weight: 600;
  font-size: var(--t-isi);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.question:hover {
  background: var(--bg-alt);
  color: var(--brand-ink);
}

.question:hover::before {
  background: var(--primary-isi);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .question {
    transition: none;
  }
}

/* Penanda buka/tutup dibuat sendiri agar konsisten lintas peramban */
.question::-webkit-details-marker {
  display: none;
}

.question::before {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--primary);
  font-weight: 700;
  font-size: var(--t-dasar);
  line-height: 1;
}

.item[open] .question::before {
  content: '\2212';
  background: var(--primary-isi);
  color: #fff;
}

.question:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-kartu);
}

/*
  Tepi kiri jawaban DIHITUNG, bukan dikira-kira.

  Nilainya harus sama dengan lebar penanda (1,5rem) ditambah jaraknya ke
  tulisan (0,75rem), supaya jawaban berbaris tepat di bawah pertanyaannya.
  Nilai lama 2rem meleset 0,25rem — cukup untuk terlihat sebagai barisan yang
  goyah ketika empat belas baris ditumpuk.
*/
.answer {
  margin: 0 0 1.25rem calc(1.5rem + 0.75rem);
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.75;
}

/*
  Pita ajakan disejajarkan dengan KOLOM PERTANYAAN, bukan dengan tepi kiri
  halaman.

  TERUKUR sebelum diperbaiki, pada layar 1920px:
    pertanyaan  629..1411
    pita ajakan 340..1411   <- menjorok 289px ke kiri

  Karena ia berada di luar kisi `.group`, tidak ada yang menahannya; ia
  melebar sampai tepi lajur judul dan terbaca seperti blok yang tidak
  berhubungan dengan daftar di atasnya.
*/
.ctaBox {
  /* Gabungan: pasang juga kelas "ajakan" pada elemennya di Blade. */
}

@media (min-width: 64rem) {
  .ctaBox {
    margin-left: calc(var(--rel) + var(--sela));
  }
}

.ctaNote {
  /* Gabungan: pasang juga kelas "ajakanTeks" pada elemennya di Blade. */
  color: var(--text);
  font-weight: 600;
}

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


/*
  Baris "Langkah pendaftaran" di kaki halaman.

  Sebelumnya `p.count` dengan gaya inline `display: block; marginTop: 2rem` —
  dua angka di luar tangga jarak mana pun — dan rata kiri halaman sementara
  seluruh isi di atasnya rata kolom pertanyaan. Hasilnya terbaca sebagai teks
  yang tercecer, bukan sebagai keterangan penutup.

  Sekarang ia sejajar dengan pita ajakan di atasnya dan diberi garis pemisah
  tipis, sehingga jelas bahwa ia catatan penutup, bukan isi yang terlupa.
*/
.langkah {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--t-kecil);
  line-height: 1.7;
}

@media (min-width: 64rem) {
  .langkah {
    margin-left: calc(var(--rel) + var(--sela));
  }
}