/* Naisu Store - halaman FAQ */
.faq-page { max-width: 820px; margin: 0 auto; padding: 40px 20px 20px; }

.faq-hero { text-align: center; margin-bottom: 28px; }
.faq-badge { display: inline-block; padding: 4px 14px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--primary); background: rgba(245, 182, 19, 0.12); border: 1px solid rgba(245, 182, 19, 0.35); border-radius: 999px; }
.faq-hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; color: #fff; }
.faq-hero p { margin: 0 auto 22px; max-width: 480px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }

.faq-search { position: relative; max-width: 480px; margin: 0 auto; }
.faq-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #888; pointer-events: none; }
.faq-search input { width: 100%; height: 48px; padding: 0 18px 0 46px; font-size: 14px; color: #fff; background: rgba(25, 26, 27, 0.85); border: 1px solid #444; border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.faq-search input::placeholder { color: #777; }
.faq-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 182, 19, 0.3); }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: rgba(25, 26, 27, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: rgba(255, 255, 255, 0.18); }
.faq-item.open { border-color: rgba(245, 182, 19, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.faq-item[hidden] { display: none; }

.faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; font: inherit; color: #fff; background: none; border: 0; cursor: pointer; }
.faq-num { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; font-size: 13px; font-weight: 700; color: var(--primary); background: rgba(245, 182, 19, 0.12); border-radius: 50%; transition: all .2s; }
.faq-item.open .faq-num { color: #191a1b; background: var(--primary); }
.faq-text { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; }

.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #aaa; border-radius: 2px; transform: translate(-50%, -50%); transition: transform .3s, background .2s; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--primary); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 18px 18px 62px; font-size: 14px; line-height: 1.7; color: #bbb; }

.faq-empty { padding: 30px 0; text-align: center; font-size: 14px; color: var(--text-soft); }

.faq-cta { margin-top: 36px; padding: 30px 20px; text-align: center; background: linear-gradient(135deg, rgba(245, 182, 19, 0.12), rgba(25, 26, 27, 0.85)); border: 1px solid rgba(245, 182, 19, 0.3); border-radius: 12px; }
.faq-cta h2 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.faq-cta p { margin: 0 0 18px; font-size: 13px; color: var(--text-soft); }
.faq-cta-actions { display: flex; justify-content: center; gap: 10px; }
.btn-yellow, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 8px; transition: all .2s ease; }
.btn-yellow { color: #191a1b; background: var(--primary); border: 1px solid var(--primary); }
.btn-yellow:hover { box-shadow: 0 0 18px rgba(245, 182, 19, 0.5); transform: translateY(-1px); }
.btn-ghost { color: #fff; border: 1px solid #444; }
.btn-ghost:hover { color: var(--primary); border-color: var(--primary); }

@media (max-width: 600px) {
  .faq-page { padding: 24px 16px 10px; }
  .faq-hero h1 { font-size: 22px; }
  .faq-q { gap: 10px; padding: 14px; }
  .faq-text { font-size: 14px; }
  .faq-a p { padding: 0 14px 16px 14px; font-size: 13px; }
  .faq-cta-actions { flex-direction: column; }
}