
/* ====== Brand & shared ====== */
:root{
  --wiras-brand:#e81c25;          /* <<< warna brand */
  --wiras-faq-accent:var(--wiras-brand);
  --wiras-faq-border:#e4eef9;
  --wiras-faq-text:#0f172a;
  --wiras-faq-sub:#475569;
  --wiras-shadow:0 6px 20px rgba(2,42,106,.06);
}

/* Quick Summary (collapsible, ALL collapsed by default) */
.wiras-qs{margin:20px 0;border:1px solid var(--wiras-faq-border);border-radius:14px;box-shadow:var(--wiras-shadow);background:#f9fbff}
.wiras-qs__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--wiras-faq-border)}
.wiras-qs__title{margin:0;font-weight:800;color:var(--wiras-faq-text)}
.wiras-qs__toggle{appearance:none;-webkit-appearance:none;border:1px solid var(--wiras-faq-border);
  background:#fff;border-radius:10px;padding:6px 10px;display:flex;gap:8px;align-items:center;cursor:pointer;
  font-weight:700;color:var(--wiras-faq-text)}
.wiras-qs__toggle .chev{transition:transform .2s ease;color:var(--wiras-brand)}
.wiras-qs__toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.wiras-qs__lead{margin:8px 14px;color:var(--wiras-faq-sub)}
.wiras-qs__panel{overflow:hidden;height:0;transition:height .2s ease}
.wiras-qs__panel.is-collapsed{height:0}
.wiras-qs__panel:not(.is-collapsed){height:auto}
.wiras-qs__list{list-style:none;margin:10px 14px 14px;padding:0}
.wiras-qs__item{position:relative;padding-left:28px;margin:8px 0}
.wiras-qs__item:before{
  content:"";position:absolute;left:0;top:.35rem;width:18px;height:18px;border-radius:50%;
  background:var(--wiras-brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.285 6.709a1 1 0 0 1 0 1.414l-9.193 9.193a1 1 0 0 1-1.414 0L3.715 11.55a1 1 0 1 1 1.414-1.414l5.134 5.134 8.486-8.486a1 1 0 0 1 1.536 0z"/></svg>') center/16px 16px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.285 6.709a1 1 0 0 1 0 1.414l-9.193 9.193a1 1 0 0 1-1.414 0L3.715 11.55a1 1 0 1 1 1.414-1.414l5.134 5.134 8.486-8.486a1 1 0 0 1 1.536 0z"/></svg>') center/16px 16px no-repeat;
}

/* ====== FAQ (brand merah) ====== */
/* Spacing antar item + perbaikan alignment tombol di mobile */
.wiras-faq{
  margin:36px 0;
  display:grid;
  gap:14px;                 /* jarak antar FAQ item */
}
.wiras-faq__title{
  margin:0 0 16px;
  font-size:1.5rem;
  font-weight:800;
  color:var(--wiras-faq-text);
  border-bottom:3px solid var(--wiras-faq-accent);
  padding-bottom:8px
}
.wiras-faq__item{
  background:#fff;
  border:1px solid var(--wiras-faq-border);
  border-radius:14px;
  margin-bottom: 5px;
  overflow:hidden;
  box-shadow:var(--wiras-shadow);
}

button.wiras-faq__q{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:none!important;
  border:0!important;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;        /* icon di kanan pakai margin-left:auto */
  gap:12px;
  padding:16px 18px;
  font-weight:700;
  line-height:1.4;
  color:var(--wiras-faq-text)!important;
  cursor:pointer;
  text-align:left!important;         /* pastikan tidak center di mobile */
}
.wiras-faq__q .chev{
  width:22px;height:22px;color:#64748b;
  transition:transform .2s ease,color .2s;
  margin-left:auto;                  /* dorong ikon ke kanan */
}
.wiras-faq__q[aria-expanded="true"] .chev{
  transform:rotate(180deg);
  color:var(--wiras-faq-accent)
}

/* Jawaban: beri pemisah & padding lebih lega */
.wiras-faq__a{overflow:hidden;height:0}
.wiras-faq__a-inner{
  padding:14px 18px 18px;            /* tambah padding atas */
  color:var(--wiras-faq-sub);
  line-height:1.75;
  border-top:1px solid var(--wiras-faq-border); /* pemisah Q/A */
}

/* Mobile fine-tune */
@media (max-width:640px){
  button.wiras-faq__q{padding:14px 16px;font-size:1rem;text-align:left!important}
  .wiras-faq{gap:12px}
}

/* Fokus ring untuk aksesibilitas */
button.wiras-faq__q:focus-visible{
  outline:2px solid color-mix(in srgb, var(--wiras-faq-accent) 70%, transparent);
  outline-offset:2px;
}
