/* ── FAQ — page-specific overrides (reuses index.css tokens) ── */

/* Banner hero khusus halaman ini — corak sama seperti statistik-gunatanah.css/
   kamus-gunatanah.css (lihat nota di sana). Kelas berasingan supaya tidak
   bertindih dengan banner halaman lain. */
.faq-hero { padding: clamp(10px, 1.5vw, 16px) var(--gutter) clamp(14px, 2vw, 20px); }
.faq-page-hero-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.faq-page-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/gj_hero4.jpeg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.faq-page-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 50%, transparent 85%),
    linear-gradient(0deg, var(--bg) 0%, transparent 20%);
}
.faq-page-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 6vw, 48px) clamp(24px, 5vw, 56px) clamp(24px, 4vw, 36px);
}
@media (max-width: 768px) {
  /* Kembali kepada identiti .faq-hero asal (latar bg polos, tiada kad) di bawah 768px. */
  .faq-hero { padding: 0; }
  .faq-page-hero-banner { border: none; border-radius: 0; }
  .faq-page-hero-banner::before, .faq-page-hero-banner::after { display: none; }
  .faq-page-hero-content { padding: clamp(36px, 7vw, 56px) var(--gutter) clamp(28px, 5vw, 40px); }
}