/*
 * Halaman /faq — pertanyaan yang paling sering dikirim ke support@katuranga.com.
 *
 * Berkas terpisah dari app.css dengan alasan yang sama seperti legal.css dan blog.css:
 * halaman ini dibaca, bukan dipakai bermain. Yang dikejar keterbacaan (baris ±68 huruf,
 * jarak longgar) dan satu hal lagi yang tidak dipunyai halaman lain — **ketegasan**.
 *
 * Ketegasan itu warnanya merah: tiap sub judul diberi garis merah pendek, dan aturan
 * yang tidak bisa ditawar (kecurangan, pembelian yang tidak bisa dibatalkan) diberi
 * kotak sendiri. Merahnya bukan nilai baru — `--danger` sudah ada di app.css sejak lama
 * dan dipakai untuk galat. Yang baru cuma penempatannya.
 *
 * Semua nama kelas di berkas ini berawalan `faq-`. Bukan gaya penulisan, melainkan
 * pengalaman: nama pendek seperti `.promo` dan `.check` sudah tiga kali bertabrakan
 * dengan kelas lama di app.css yang 4000+ baris, dan yang melihat akibatnya pengunjung.
 */

.faq-wrap { max-width: 920px; }

/* ----------------------------------------------------------------- banner ---- */

.faq-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #fff; border-radius: 20px; margin: 8px 0 24px;
  /* Ruang kanan disediakan untuk pita merah di sudut. Tanpa itu judul yang panjang
     berjalan menembusnya, dan merah pekat di balik huruf putih adalah tabrakan warna,
     bukan hiasan. */
  padding: 30px 116px 30px 32px;
}
/* Pita merah miring di sudut kanan. Hiasan, tapi hiasan yang mengumumkan warna: garis
   merah di bawah tiap sub judul jadi terbaca sebagai satu bahasa, bukan aksen yang
   muncul entah dari mana di tengah halaman. */
.faq-hero::after {
  content: ''; position: absolute; right: -58px; top: -74px;
  width: 186px; height: 196px; transform: rotate(34deg);
  /* Merahnya pekat, bukan tembus pandang: merah beralpha di atas hijau menjadi cokelat,
     dan cokelat tidak mengumumkan apa pun. */
  background: linear-gradient(170deg, #d9503f 0%, #a8352a 100%);
  border-radius: 24px; pointer-events: none;
}
.faq-hero > * { position: relative; z-index: 1; }
.faq-kicker {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.faq-hero h1 { margin: 0 0 10px; font-size: 33px; line-height: 1.16; color: #fff; }
.faq-lead {
  margin: 0 0 16px; font-size: 16.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .93); max-width: 60ch;
}
/* Jam layanan ditaruh di banner, bukan cuma di kaki halaman: yang membuka halaman ini
   sedang punya masalah, dan pertanyaan pertamanya adalah "ke siapa saya mengadu". */
.faq-hero-help {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px; padding: 10px 14px; font-size: 14.5px;
}
.faq-hero-help a { color: #fff; font-weight: 700; text-decoration: underline; }
.faq-hero-help span { color: rgba(255, 255, 255, .9); }

/* -------------------------------------------------------------- daftar isi ---- */

.faq-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.faq-toc a {
  display: block; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--text); font-size: 14px; font-weight: 600;
}
.faq-toc a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------- isi ------ */

.faq-body { font-size: 16.5px; line-height: 1.75; color: var(--text); }

/* Sub judul dengan garis merah di bawahnya — inti tampilan halaman ini.
   `scroll-margin-top` dipasang karena bilah atas situs `position: sticky`: tanpa itu,
   judul yang dilompati dari daftar isi berhenti persis di balik bilah. */
.faq-sec { margin: 0 0 34px; scroll-margin-top: 76px; }
.faq-sec h2 {
  margin: 0 0 4px; font-size: 23px; line-height: 1.25;
}
.faq-rule {
  display: block; width: 58px; height: 4px; border-radius: 3px;
  background: var(--danger); margin: 0 0 16px;
}

.faq-q {
  margin: 22px 0 6px; font-size: 17.5px; font-weight: 700; line-height: 1.4;
  scroll-margin-top: 76px;
}
.faq-body p { margin: 0 0 14px; max-width: 68ch; }
.faq-body ul { margin: 0 0 14px; padding-left: 20px; max-width: 68ch; }
.faq-body li { margin-bottom: 7px; }
.faq-body a { color: var(--accent); font-weight: 600; }
.faq-body strong { font-weight: 700; }

/* Kotak keterangan biasa: dipakai untuk langkah yang harus diikuti berurutan. */
.faq-note {
  margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: 15.5px; line-height: 1.65;
}
.faq-note p:last-child, .faq-note ul:last-child { margin-bottom: 0; }
.faq-note b { color: var(--text); }

/* Kotak aturan keras: garis merah tebal di kiri. Dipakai persis dua kali — pembelian
   yang tidak bisa dibatalkan, dan wilayah yang tidak bisa diubah lagi. Kalau suatu hari
   dipakai lima kali, ia berhenti berarti apa-apa. */
.faq-strict {
  margin: 0 0 16px; padding: 14px 18px; border-left: 5px solid var(--danger);
  background: #fdf1ef; border-radius: 0 14px 14px 0;
  font-size: 15.5px; line-height: 1.65; color: var(--text);
}
.faq-strict p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- kartu hitam ------- */

/*
 * Sanksi kecurangan. Hitam, bukan merah, dan disengaja: di lapangan kartu merah berarti
 * keluar dari satu pertandingan — yang dimaksud di sini keluar dari seluruh liga.
 */
.faq-ban {
  display: flex; gap: 18px; align-items: flex-start;
  margin: 4px 0 18px; padding: 20px 22px; border-radius: 18px;
  background: #17201b; color: #eef3ef; border: 1px solid #0b110d;
  box-shadow: 0 14px 34px rgba(8, 20, 13, .22);
}
.faq-ban-card { flex: none; margin-top: 2px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.faq-ban h3 { margin: 0 0 8px; font-size: 19px; color: #fff; line-height: 1.3; }
.faq-ban p { margin: 0 0 10px; color: #cfdad3; font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
.faq-ban p:last-child { margin-bottom: 0; }
.faq-ban ul { margin: 0 0 10px; padding-left: 20px; color: #cfdad3; font-size: 15.5px; }
.faq-ban li { margin-bottom: 6px; }
.faq-ban b { color: #fff; }
.faq-ban a { color: #7fd6a4; font-weight: 600; }

@media (max-width: 560px) {
  .faq-ban { flex-direction: column; gap: 12px; padding: 18px; }
}

/* ---------------------------------------------------------------- kontak ----- */

.faq-contact {
  margin: 30px 0 10px; padding: 22px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--bg-soft);
}
.faq-contact h2 { margin: 0 0 4px; font-size: 21px; }
.faq-contact p { margin: 0 0 12px; color: var(--muted); max-width: 62ch; }
.faq-contact .faq-mail {
  display: inline-block; font-size: 19px; font-weight: 700; color: var(--accent);
  margin-bottom: 4px;
}
.faq-hours {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 7px 12px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-dark); font-size: 14px; font-weight: 700;
}
.faq-contact .row { display: flex; flex-wrap: wrap; gap: 10px; }

.faq-tail {
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

@media (max-width: 720px) {
  .faq-hero { padding: 24px 76px 24px 22px; }
  .faq-hero h1 { font-size: 26px; }
  /* Di layar sempit pitanya mengecil dan mundur ke pojok: yang dibutuhkan halaman ini
     di HP adalah lebar untuk kalimat, bukan hiasan yang memakan setengah banner. */
  .faq-hero::after { right: -74px; top: -92px; width: 150px; height: 168px; }
  /* Titik pemisah hanya masuk akal kalau kedua sisinya berada di satu baris. Begitu
     barisnya patah, ia menggantung sendirian di ujung — jadi ia dibuang, bukan
     dipertahankan. */
  .faq-sep { display: none; }
  .faq-hero-help { flex-direction: column; align-items: flex-start; gap: 4px; }
  .faq-body { font-size: 16px; }
  .faq-sec h2 { font-size: 21px; }
}