/* =====================================================================
   BX3 FAQ - satu kolom sempit di tengah: judul, lalu pertanyaan buka-tutup (akordeon).
   Tanpa tombol sendiri: ajakan konsultasi ada di section berikutnya.
   Tanpa JS: semua jawaban terbuka.
   ===================================================================== */

.bx3.bx3-faq{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x)}
.bx3.bx3-faq--cream{background:var(--bx3-cream)}
.bx3 .bx3-faq__in{max-width:880px;margin:0 auto}
.bx3 .bx3-faq__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.bx3 .bx3-faq__head .bx3-text{max-width:30em}
.bx3 .bx3-faq__list{margin-top:clamp(36px,3.6vw,64px)}

.bx3 .bx3-faq__list{border-top:1px solid var(--bx3-line-btn)}
.bx3 .bx3-qa{border-bottom:1px solid var(--bx3-line-btn)}
.bx3 button.bx3-qa__q{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;width:100%;padding:clamp(20px,2vw,28px) 0;text-align:left;white-space:normal;-webkit-user-select:text;user-select:text;color:var(--bx3-ink)}
.bx3 .bx3-qa__text{font-size:clamp(1.0625rem,1.25vw,1.3rem);font-weight:400;line-height:1.5;color:var(--bx3-ink);transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-qa__icon{position:relative;display:block;width:36px;height:36px;border:1px solid var(--bx3-line-btn);border-radius:50%;color:var(--bx3-ink);transition:background-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease),border-color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-qa__icon::before,.bx3 .bx3-qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-qa__icon::after{transform:rotate(90deg)}
.bx3 button.bx3-qa__q:is(:hover,:focus-visible) .bx3-qa__text{color:var(--bx3-orange)}
.bx3 button.bx3-qa__q:is(:hover,:focus-visible) .bx3-qa__icon{background:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}
.bx3 .bx3-qa.is-open .bx3-qa__icon::after{transform:rotate(0deg)}

/* Jawaban: tinggi 0 → otomatis (animasi grid-template-rows). Tanpa JS semua terbuka. */
.bx3 .bx3-qa__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--bx3-ease)}
.bx3.bx3-faq.is-js .bx3-qa:not(.is-open) .bx3-qa__a{grid-template-rows:0fr}
.bx3.bx3-faq.is-init .bx3-qa__a{transition:none}
.bx3.bx3-faq:not(.is-js) .bx3-qa__icon{visibility:hidden}
.bx3 .bx3-qa__inner{min-height:0;overflow:hidden}
.bx3 .bx3-qa__inner p+p{margin-top:.8em}
.bx3 .bx3-qa__inner p:last-child{padding-bottom:clamp(22px,2.2vw,30px)}
.bx3 .bx3-qa__inner p{max-width:40em;padding-right:56px;font-size:var(--bx3-fs-body);line-height:1.8;color:var(--bx3-ink-soft)}

@media (max-width:767px){
  .bx3 .bx3-qa__inner p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-qa__a,.bx3 .bx3-qa__icon::before,.bx3 .bx3-qa__icon::after{transition:none}
}