[hidden]{display:none!important}

/* Tata letak: kolom kategori di kiri, daftar pertanyaan di kanan */
.f-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2.5rem;align-items:start;padding:1.6rem 1.2rem 5rem}
.f-samping{position:sticky;top:90px;display:grid;gap:1rem}

/* Kotak cari */
.f-cari{display:flex;align-items:center;gap:.6rem;padding:0 .9rem;background:#fff;border:1.5px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.f-cari:focus-within{border-color:var(--laut2);box-shadow:0 0 0 4px rgba(44,129,153,.15)}
.f-cari svg{flex:none;width:1.15rem;height:1.15rem;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.f-cari input{flex:1;min-width:0;border:0;background:none;padding:.8rem 0;font:inherit;font-size:.93rem;color:var(--ink);outline:none}

/* Daftar kategori */
.f-kat{display:grid;gap:.2rem;padding:.6rem;background:var(--krem);border:1px solid var(--line);border-radius:18px}
.f-kat a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-radius:12px;color:var(--ink);text-decoration:none;
  font-size:.93rem;font-weight:600;border-left:3px solid transparent;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.f-kat a:hover{background:var(--pasir2)}
.f-kat a.on{background:var(--pasir2);color:var(--laut);border-left-color:var(--karang)}
.f-kat a.mati{opacity:.4}
.f-kat small{flex:none;min-width:1.6rem;padding:.1rem .45rem;border-radius:999px;background:var(--pasir2);color:var(--muted);font-size:.75rem;text-align:center}
.f-kat a.on small{background:var(--laut);color:#fff}

/* Kelompok pertanyaan */
.f-grup{scroll-margin-top:90px;margin-bottom:2.4rem}
.f-grup h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:0 0 1rem}
.f-daftar{display:grid;gap:.7rem}

/* Satu pertanyaan: dibuka dan ditutup dengan klik */
.f-item{background:var(--krem);border:1px solid var(--line);border-radius:16px;transition:border-color .3s,box-shadow .3s}
.f-item[open]{border-color:#BFD9DF;box-shadow:0 10px 26px rgba(20,55,68,.08)}
.f-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none}
.f-item summary::-webkit-details-marker{display:none}
.f-q{font-weight:600;color:var(--ink);line-height:1.45;transition:color .2s}
.f-item summary:hover .f-q,.f-item[open] .f-q{color:var(--laut)}
.f-ikon{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--pasir2);transition:background .3s,transform .35s}
.f-ikon::before,.f-ikon::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;border-radius:2px;background:var(--laut);transform:translate(-50%,-50%)}
.f-ikon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s}
.f-item[open] .f-ikon{background:var(--laut);transform:rotate(180deg)}
.f-item[open] .f-ikon::before,.f-item[open] .f-ikon::after{background:#fff}
.f-item[open] .f-ikon::after{transform:translate(-50%,-50%) rotate(0)}
.f-jawab{padding:0 1.2rem 1.2rem;color:var(--muted);line-height:1.75}
.f-item[open] .f-jawab{animation:f-buka .4s cubic-bezier(.2,.7,.2,1)}
@keyframes f-buka{from{opacity:0;transform:translateY(-6px)}}
.f-jawab p{margin:0;text-wrap:pretty}
@media (min-width:700px){.f-jawab p{text-align:justify;text-justify:inter-word}}

/* Paket terkait di bawah jawaban */
.f-paket{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.f-paket>small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.f-paket>div{display:flex;flex-wrap:wrap;gap:.5rem}
.f-paket a{display:flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .35rem;border-radius:999px;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.f-paket a:hover{border-color:var(--laut2);transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,55,68,.1)}
.f-paket img{width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover}
.f-paket b{display:block;font-size:.86rem;line-height:1.25}
.f-paket span small{display:block;font-size:.75rem;color:var(--muted)}

.f-kosong{padding:2rem 1rem;text-align:center;color:var(--muted);background:var(--krem);border:1px dashed var(--line);border-radius:16px}

/* Ajakan bertanya langsung */
.f-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:1rem;padding:1.8rem clamp(1.2rem,4vw,2.2rem);border-radius:22px;color:#FFFDF8;
  background:radial-gradient(circle at 92% 0%,rgba(255,246,218,.45),rgba(255,214,140,0) 45%),linear-gradient(135deg,var(--laut2),var(--laut))}
.f-cta>div:first-child{flex:1 1 280px}
.f-cta h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 .35rem}
.f-cta p{margin:0;color:#DCE8E8;text-wrap:pretty}
.f-cta-btn{display:flex;flex-wrap:wrap;gap:.6rem}
.btn-wa{background:#3A9161}.btn-wa:hover{background:#317E54}

@media (max-width:900px){
  .f-body{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .f-samping{position:sticky;top:60px;z-index:5;margin:0 -1.2rem;padding:.6rem 1.2rem;background:linear-gradient(var(--pasir) 80%,rgba(248,246,240,0))}
  .f-kat{display:flex;overflow-x:auto;scrollbar-width:none;padding:.3rem;border-radius:999px}
  .f-kat::-webkit-scrollbar{display:none}
  .f-kat a{flex:none;border-left:0;border-radius:999px;padding:.45rem .9rem}
  .f-kat a.on{background:var(--laut);color:#fff}
  .f-grup{scroll-margin-top:170px}
  .f-cta-btn,.f-cta-btn .btn,.f-cta-btn .wa-pilih{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .f-ikon,.f-ikon::after,.f-kat a,.f-paket a{transition:none}
  .f-item[open] .f-jawab{animation:none}
}