/* CSS khusus faq.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
.fq-wrap { max-width: 900px; }
.fq-search { position: relative; max-width: 560px; margin-top: 1.75rem; }
.fq-search > i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--ugs-accent); }
.fq-search input { width: 100%; padding: .9rem 3rem .9rem 2.8rem; border-radius: 999px; border: 1px solid var(--ugs-hairline-strong); background: var(--ugs-card); color: var(--ugs-fg); font-size: 1rem; outline: none; }
.fq-search input::placeholder { color: var(--ugs-fg-3); }
.fq-search input:focus { border-color: var(--ugs-accent); box-shadow: 0 0 0 3px rgba(var(--ugs-accent-rgb), .15); }
.fq-search button { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ugs-fg-3); cursor: pointer; }
.fq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.fq-tab { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--ugs-hairline-strong); background: var(--ugs-card); color: var(--ugs-fg); font-size: .9rem; cursor: pointer; }
.fq-tab:hover { border-color: var(--ugs-fg); }
.fq-tab.is-active { background: var(--ugs-fg); color: var(--ugs-page); border-color: var(--ugs-fg); }
.fq-result { color: var(--ugs-fg-2); margin: 0 0 1.5rem; }
.fq-result strong { color: var(--ugs-fg); }
.fq-group { margin-bottom: 2.5rem; }
.fq-group-title { display: flex; align-items: center; gap: .65rem; font-family: var(--ugs-font-body); font-size: 1.2rem; font-weight: 600; text-transform: none; color: var(--ugs-fg); margin: 0 0 1rem; }
.fq-group-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ugs-accent-tint); color: var(--ugs-accent); font-size: .95rem; }
.fq-count { font-size: .78rem; font-weight: 500; color: var(--ugs-fg-3); }
.fq-list { display: flex; flex-direction: column; gap: .6rem; }
.fq-item { background: var(--ugs-card); border: 1px solid var(--ugs-hairline); border-radius: 18px; overflow: hidden; transition: border-color .2s; }
.fq-item.is-open { border-color: rgba(var(--ugs-accent-rgb), .4); }
.fq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border: 0; background: transparent; color: var(--ugs-fg); font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; }
.fq-chevron { color: var(--ugs-fg-3); font-size: .8rem; transition: transform .25s; flex-shrink: 0; }
.fq-item.is-open .fq-chevron { transform: rotate(180deg); color: var(--ugs-accent); }
.fq-a-inner { padding: 0 1.3rem 1.2rem; font-size: .95rem; }
.fq-a-inner > :last-child { margin-bottom: 0; }
.fq-reset { margin-top: 1.25rem; }
.fq-cta { display: flex; align-items: center; gap: 1.25rem; padding: 1.6rem; margin-top: 3rem; }
.fq-cta > div { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.fq-cta-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--ugs-accent-tint); color: var(--ugs-accent); font-size: 1.25rem; flex-shrink: 0; }
@media (max-width: 700px) { .fq-cta { flex-direction: column; align-items: flex-start; } }