/* =====================================================
   TOKENS
   File: assets/css/faqv1.css
===================================================== */
:root {
  --bg: #FFFFFF;
  --bg-subtle: #F9F9F9;
  --border: #EBEBEB;
  --text-dark: #1A1A1A;
  --text-mid: #5A5A5A;
  --text-light: #AAAAAA;
  --burgundy: #7A1E1E;
  --burg-hover: #921F1F;
  --burg-glow: rgba(122,30,30,0.12);

  --font-family: 'Montserrat', sans-serif;

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  --radius:       20px;
  --radius-pill:  999px;
  --section-gap:  100px;
  --max-w:        860px;
  --pad-x:        32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-family);
  background: var(--bg-subtle);
  color: var(--text-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a       { color: inherit; text-decoration: none !important; }
button  { border: 0; background: none; cursor: pointer; font: inherit; }

/* =====================================================
   LAYOUT
===================================================== */
.faq-section {
  padding-block:  var(--section-gap);
  padding-inline: var(--pad-x);
}
.faq-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* =====================================================
   HEADER
===================================================== */
.faq-head {
  text-align: center;
  margin-bottom: 64px;
}
.faq-eyebrow {
  display: block;
  font-family: var(--font-family);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 18px;
}
.faq-title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--text-dark);
}
.faq-title em { font-style: normal; color: var(--burgundy); }
.faq-subtitle {
  margin-top: 18px;
  font-family: var(--font-family);
  font-size: 0.82rem;
  color: var(--text-mid);
  font-weight: 400;
  line-height: 1.9;
  max-width: 480px;
  margin-inline: auto;
}

/* =====================================================
   CATEGORIES
===================================================== */
.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* =====================================================
   GROUP LABEL
===================================================== */
.faq-group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.faq-group-label span {
  font-family: var(--font-family);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--burgundy);
  white-space: nowrap;
}
.faq-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* =====================================================
   FAQ LIST
===================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

/* =====================================================
   QUESTION BUTTON
===================================================== */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.5;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.faq-q:hover              { background: var(--bg-subtle); color: var(--burgundy); }
.faq-item.open .faq-q     { color: var(--burgundy); }

/* =====================================================
   ICON
===================================================== */
.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--text-mid);
  transition:
    border-color 0.25s var(--ease),
    background   0.25s var(--ease),
    color        0.25s var(--ease),
    transform    0.35s var(--ease-out);
}
.faq-item.open .faq-icon {
  border-color: var(--burgundy);
  background:   var(--burgundy);
  color: #fff;
  transform: rotate(45deg);
}

/* =====================================================
   ANSWER
===================================================== */
.faq-a-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s var(--ease-out);
}
.faq-item.open .faq-a-wrap { max-height: 400px; }
.faq-a {
  padding: 16px 28px 22px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.8;
  font-weight: 400;
  border-top: 1px solid var(--border);
}

/* =====================================================
   CTA BLOCK
===================================================== */
.faq-cta {
  margin-top: 56px;
  background: var(--text-dark);
  border-radius: var(--radius);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -30%;
  width: 50%;
  height: 160%;
  background: radial-gradient(circle, rgba(122,30,30,.14), transparent 65%);
  pointer-events: none;
  filter: blur(40px);
}
.faq-cta__text            { position: relative; z-index: 1; }
.faq-cta__text p {
  font-family: var(--font-family);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffd4a8;
  margin-bottom: 10px;
}
.faq-cta__text h3 {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #fff;
}
.faq-cta__text h3 em { font-style: normal; color: #ffd4a8; }

.faq-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--burgundy);
  background: var(--burgundy);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background    0.25s var(--ease),
    border-color  0.25s var(--ease),
    transform     0.3s var(--ease-out),
    box-shadow    0.3s var(--ease);
  box-shadow: 0 8px 25px -8px rgba(122,30,30,.45);
}
.faq-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  /*background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);*/
  background: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none;
}
.faq-btn:hover {
  background: var(--burg-hover);
  border-color: var(--burg-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -8px rgba(122,30,30,.50);
}
.faq-btn:hover::after { transform: translateX(120%); }
.faq-btn .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.faq-btn:hover .arrow { transform: translateX(4px); }

.faq-btn a { text-decoration: none; }

/* =====================================================
   REVEAL
===================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].is-visible      { opacity: 1; transform: none; }
[data-reveal-delay="1"]       { transition-delay: 0.08s; }
[data-reveal-delay="2"]       { transition-delay: 0.16s; }
[data-reveal-delay="3"]       { transition-delay: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =====================================================
   SCROLLBAR
===================================================== */
::-webkit-scrollbar         { width: 9px; }
::-webkit-scrollbar-track   { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb   { background: var(--burgundy); border-radius: 9px; border: 2px solid var(--bg-subtle); }
::-webkit-scrollbar-thumb:hover { background: var(--burg-hover); }
::selection { background: var(--burgundy); color: #fff; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 600px) {
  :root { --section-gap: 64px; --pad-x: 20px; }
  .faq-q            { padding: 18px 20px; font-size: 0.78rem; }
  .faq-a            { padding: 14px 20px 20px; }
  .faq-cta          { padding: 28px 24px; }
  .faq-cta__text h3 { font-size: 1.5rem; }
}

/* =====================================================
   OVERRIDE: Pastikan Nav Tetap Full-width
===================================================== */
.nav__inner {
  max-width: 1240px !important;  /* ← Paksa full-width */
}