/* ==========================================================
   FAQ - satu kotak berisi pertanyaan (buka/tutup) + kotak ajakan di bawah
   Isi: app/config/faq.php | Kotak menumpuk di tepi bawah hero
   ========================================================== */
.page-faq{max-width:820px;padding-bottom:48px}

/* kotak utama */
.faq-list{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 34px rgba(11,23,54,.08)}
.faq-item+.faq-item{border-top:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;font-weight:600;font-size:14px;cursor:pointer;list-style:none;transition:background .15s,color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-l);font-size:18px;line-height:1;color:var(--brand-d);transition:transform .2s}
.faq-item[open] summary{color:var(--brand-d)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 20px 18px;max-width:46em;font-size:13.5px;line-height:1.7;color:var(--mut)}
.faq-item p.has-steps{padding-bottom:8px}
.faq-steps{margin:0;padding:0 20px 18px 42px;max-width:46em;font-size:13.5px;line-height:1.7;color:var(--mut)}
.faq-steps li{margin-bottom:4px;padding-left:4px}
.faq-steps li::marker{font-weight:700;color:var(--brand-d)}
@media (hover:hover){.faq-item summary:hover{background:var(--bg)}}

/* kotak ajakan (kecil): navy senada hero. Mobile tumpuk tengah, desktop satu baris (teks kiri, tombol kanan) */
.faq-cta{position:relative;overflow:hidden;margin-top:18px;padding:22px 18px 24px;text-align:center;color:#fff;border-radius:22px;
  background:
    radial-gradient(60% 140% at 92% -20%,rgba(96,135,235,.24),transparent 62%),
    linear-gradient(180deg,#12286a 0%,#0e2152 100%)}
.faq-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 100% at 50% 40%,#000,transparent)}
.faq-cta>*{position:relative}
.faq-cta-ic{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.1)}
.faq-cta h2{margin:0 0 2px;font-size:16px;font-weight:800}
.faq-cta p{margin:0 0 14px;font-size:12.5px;color:#cfdcf8}
.faq-cta .btn{min-height:40px;padding:0 20px;font-size:13px;background:#fff;color:#12286a;text-shadow:none;box-shadow:0 8px 20px rgba(5,15,50,.3)}
.faq-cta .btn:hover{filter:none;background:#eaf0fc}

@media (min-width:700px){
  .faq-item summary{padding:20px 26px;font-size:15px}
  .faq-item p{padding:0 26px 22px;font-size:14px}
  .faq-item p.has-steps{padding-bottom:8px}
  .faq-steps{padding:0 26px 22px 48px;font-size:14px}
  .faq-cta{display:flex;align-items:center;gap:16px;margin-top:20px;padding:20px 24px;text-align:left}
  .faq-cta-ic{margin:0}
  .faq-cta-text{flex:1;min-width:0}
  .faq-cta p{margin:0}
  .faq-cta .btn{flex:none}
}