/* ============ VARIABLES ============ */
:root {
  --gold: #FD8500;
  --gold-light: #FDC45C;
  --black: #080807;
  --cream: #FCFCFB;
  --cream-dim: #F1E7D6;
  --wa-green: #1BC140;
  --wa-green-dark: #149c33;

  --font-heading: 'Montserrat', 'Poppins', sans-serif;
  --font-body: 'Poppins', 'Inter', sans-serif;

  --shadow-soft: 0 10px 30px rgba(8, 8, 7, 0.08);
  --shadow-card: 0 14px 40px rgba(253, 133, 0, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.2;
  color: var(--black);
}

.text-gold { color: var(--gold); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(253, 133, 0, 0.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

section { position: relative; padding: 70px 0; }

/* ============ DECORATIVE ELEMENTS ============ */
.deco-ball {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFE7B8 0%, var(--gold-light) 35%, var(--gold) 75%, #C56600 100%);
  box-shadow:
    inset -8px -10px 20px rgba(8,8,7,0.25),
    inset 6px 8px 14px rgba(255,255,255,0.4),
    0 20px 40px rgba(253,133,0,0.25);
  z-index: 0;
  pointer-events: none;
}
.ball-tl {
  width: 220px; height: 220px;
  top: -80px; left: -90px;
}
.ball-br {
  width: 260px; height: 260px;
  bottom: 5%; right: -110px;
}

.deco-dotgrid {
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(var(--gold) 2.2px, transparent 2.2px);
  background-size: 18px 18px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.dotgrid-tr { top: 90px; right: 4%; }

.sparkle {
  position: absolute;
  color: var(--gold-light);
  font-size: 1.4rem;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
  animation: twinkle 2.6s ease-in-out infinite;
}
.sparkle-1 { top: 14%; left: 6%; font-size: 1.1rem; animation-delay: 0s; }
.sparkle-2 { top: 60%; left: 3%; font-size: 1.6rem; animation-delay: 0.6s; }
.sparkle-3 { top: 20%; right: 8%; font-size: 1.3rem; animation-delay: 1.2s; }
.sparkle-4 { top: 8%; left: 10%; font-size: 1.2rem; animation-delay: 0.3s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

/* Decorations are positioned for wide viewports; on narrow screens they
   land on top of the hero copy and the CTA card, so pull them back. */
@media (max-width: 767px) {
  .dotgrid-tr { display: none; }

  .ball-tl {
    width: 130px; height: 130px;
    top: -60px; left: -55px;
  }
  .ball-br {
    width: 150px; height: 150px;
    right: -75px; bottom: 2%;
  }

  .sparkle-2, .sparkle-3 { display: none; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 13px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-wa {
  background: var(--wa-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(27, 193, 64, 0.35);
}
.btn-wa:hover { background: var(--wa-green-dark); }

.btn-wa-outline {
  background: transparent;
  color: var(--wa-green);
  border: 2px solid var(--wa-green);
}
.btn-wa-outline:hover { background: rgba(27, 193, 64, 0.08); }

.btn-large { padding: 16px 32px; font-size: 1rem; }
.btn-small { padding: 9px 18px; font-size: 0.85rem; }

.ico-wa, .ico-up { width: 20px; height: 20px; flex-shrink: 0; }

.btn:focus-visible,
.main-nav a:focus-visible,
.footer-social a:focus-visible,
.nav-toggle:focus-visible,
.testi-arrow:focus-visible,
.testi-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 252, 251, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(8,8,7,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand-logo { height: 34px; width: auto; }

.main-nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 767px) {
  .main-nav {
    /* Base rule sets display:none; it must be restored here or .open
       can never reveal the menu. --header-h is measured in script.js. */
    display: flex;
    position: fixed;
    top: var(--header-h, 67px);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h, 67px));
    overflow-y: auto;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    gap: 4px;
    border-bottom: 1px solid rgba(8,8,7,0.08);
    box-shadow: var(--shadow-soft);
    transform: translateY(-140%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
  }
  .main-nav a {
    padding: 14px 4px;
    border-radius: var(--radius-sm);
  }
  .main-nav a + a { border-top: 1px solid rgba(8,8,7,0.06); }
  .main-nav a:active { background: rgba(253,133,0,0.08); }
}

@media (min-width: 768px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* ============ HERO ============ */
.hero { padding-top: 50px; padding-bottom: 40px; }

/* Mobile: a single centred stack. The DOM order is text -> photo -> actions,
   so headline, then the illustration, then the CTA buttons — no order hacks
   needed. Desktop swaps to a two-column grid further down. */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

.hero-text { max-width: 640px; }

.hero-text h1 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  margin-bottom: 16px;
}

.hero-desc {
  font-size: 1.05rem;
  color: rgba(8,8,7,0.75);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  /* Clears the sticky header when linked to from #chat-cs. */
  scroll-margin-top: 90px;
}

.hero-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: rgba(8,8,7,0.55);
}

/* Side-by-side pills get cramped below ~480px; stack them full width
   so each one is an easy thumb target. */
@media (max-width: 479px) {
  .hero-cta { width: 100%; }
  .hero-cta .btn { width: 100%; }
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 340px;
  z-index: 1;
}

/* Highlight cahaya emas di bawah figur, jadi kaki yang terpotong melebur ke sini */
.hero-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  width: 94%;
  height: 40%;
  background: radial-gradient(ellipse at 50% 62%, rgba(253, 133, 0, 0.5) 0%, rgba(253, 133, 0, 0.18) 42%, transparent 72%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

.hero-img {
  width: 100%;
  height: auto;
  /* Bagian bawah memudar supaya potongan kaki tidak terlihat keputus */
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
}

/* Desktop: text block and action block stack in the left column, hugging the
   vertical centre (text aligned to its row's bottom, actions to its row's
   top), while the illustration fills the right column across both rows. */
@media (min-width: 900px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    grid-template-areas:
      "text    visual"
      "actions visual";
    column-gap: 50px;
    align-items: center;
    text-align: left;
  }
  .hero-text    { grid-area: text; align-self: end; max-width: none; }
  .hero-actions { grid-area: actions; align-self: start; align-items: flex-start; }
  .hero-visual  { grid-area: visual; justify-self: end; max-width: 420px; }
  .hero-cta     { justify-content: flex-start; }
  .hero-note    { text-align: left; }
}

/* ============ WHY ============ */
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
}
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.section-desc { margin-top: 12px; color: rgba(8,8,7,0.65); }

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
}

.why-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(8,8,7,0.05);
}

.why-badge {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.why-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.why-card p { font-size: 0.92rem; color: rgba(8,8,7,0.68); }

/* ============ SERVICES ============ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(253,133,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(253,133,0,0.2);
}

.service-visual {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #FFF6E8, var(--cream));
  margin-bottom: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-visual img { width: 100%; height: 100%; object-fit: contain; }

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.service-card ul { display: flex; flex-direction: column; gap: 6px; }

.service-card li {
  font-size: 0.88rem;
  color: rgba(8,8,7,0.7);
  padding-left: 18px;
  position: relative;
}
.service-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

/* ============ STEPS ============ */
.steps-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.step-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  flex: 1;
}

.step-num {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--black);
  background: radial-gradient(circle at 32% 28%, #FFE7B8 0%, var(--gold-light) 40%, var(--gold) 100%);
  box-shadow: inset -4px -4px 8px rgba(8,8,7,0.15), inset 3px 3px 6px rgba(255,255,255,0.5);
}

.step-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step-card p { font-size: 0.9rem; color: rgba(8,8,7,0.65); }

.step-connector {
  display: none;
}

@media (min-width: 800px) {
  .steps-grid { flex-direction: row; align-items: center; }
  .step-connector {
    display: block;
    flex: 0 0 60px;
    height: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--gold-light) 0 8px, transparent 8px 16px);
  }
}

/* ============ TESTIMONI ============ */
.testi { background: linear-gradient(180deg, #FFF6E8 0%, var(--cream) 100%); }

.testi-slider { position: relative; }

.testi-track {
  display: flex;
  /* Screenshots vary in height, so pin cards to the top and let each one be
     as tall as its own image — a natural "testimonial wall" look. */
  align-items: flex-start;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px;
  /* Hide the native scrollbar; navigation is via swipe, arrows and dots. */
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
/* While mouse-dragging, snapping fights the drag, so switch it off. */
.testi-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.testi-card {
  flex: 0 0 auto;
  width: 270px;
  scroll-snap-align: center;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(8,8,7,0.05);
  overflow: hidden;
}

.testi-shot {
  width: 100%;
  background: #ece5da;
  line-height: 0;
}
.testi-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.testi-cap {
  padding: 12px 16px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(8,8,7,0.7);
  text-align: center;
}

.testi-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--black);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  z-index: 3;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.testi-arrow:hover { background: var(--gold); color: #fff; transform: translateY(-50%) scale(1.06); }
.testi-arrow svg { width: 20px; height: 20px; }
.testi-prev { left: -8px; }
.testi-next { right: -8px; }

/* Arrows only make sense with a pointer; on touch the swipe + dots do the job. */
@media (min-width: 768px) {
  .testi-arrow { display: flex; }
  .testi-track { padding-left: 10px; padding-right: 10px; }
}

.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.testi-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(8,8,7,0.18);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testi-dot.is-active { background: var(--gold); transform: scale(1.25); }

/* ============ CTA ============ */
/* ============ DIDUKUNG TOOLS ============ */
.tools { background: var(--cream); }

/* Strip abu-abu panjang, logo berjalan otomatis (marquee) */
.tools-strip {
  background: #ECEAE6;
  border-radius: var(--radius-lg);
  max-width: 1040px;
  margin: 0 auto;
  padding: 34px 0;
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  /* logo memudar halus di tepi kiri dan kanan */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-top: 30px; }

.marquee-track {
  display: flex;
  width: max-content;
}
/* baris atas: geser kiri ke kanan; baris bawah: kanan ke kiri */
.marquee-ltr { animation: marquee-ltr 38s linear infinite; }
.marquee-rtl { animation: marquee-rtl 38s linear infinite; }

/* berhenti saat disorot supaya logo bisa dilihat dan di-hover */
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-set {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-left: 60px;
  margin: 0;
}
.marquee-set li { flex: 0 0 auto; display: flex; align-items: center; }

.marquee-set img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
  transition: transform 0.22s ease;
}
.marquee-set img:hover { transform: scale(1.22); }

@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.tools-note {
  text-align: center;
  margin-top: 26px;
  font-size: 0.82rem;
  color: rgba(8, 8, 7, 0.5);
}

@media (max-width: 520px) {
  .marquee-set { gap: 42px; padding-left: 42px; }
  .marquee-set img { max-height: 34px; }
}

.cta {
  margin: 40px 20px;
  border-radius: var(--radius-lg);
  /* Kotak gelap dengan cahaya oranye memancar dari pinggir */
  background: linear-gradient(135deg, #24201b 0%, var(--black) 70%);
  color: var(--cream);
  border: 1.5px solid rgba(253, 133, 0, 0.45);
  overflow: hidden;
  /* Keeps the decorative balls (z-index 0) from bleeding over the card. */
  z-index: 1;
  box-shadow:
    0 0 45px rgba(253, 133, 0, 0.5),
    0 0 100px rgba(253, 133, 0, 0.3),
    0 18px 40px rgba(8, 8, 7, 0.25);
}

.cta-inner {
  text-align: center;
  padding: 20px 0;
}

.cta h2 {
  color: var(--cream);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-bottom: 12px;
}

.cta p {
  color: rgba(252, 252, 251, 0.72);
  margin-bottom: 26px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}


/* ============ FOOTER ============ */
.site-footer {
  background: #DEDCD8;
  color: var(--black);
  padding-top: 50px;
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(8, 8, 7, 0.12);
}

@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.footer-logo {
  height: 30px;
  width: auto;
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 0.88rem;
  color: rgba(8, 8, 7, 0.62);
  max-width: 320px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
}
.footer-social span {
  color: rgba(8, 8, 7, 0.5);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-social a {
  color: var(--black);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social a:hover { color: var(--gold); }
.social-ico { width: 20px; height: 20px; flex-shrink: 0; }

.footer-bottom {
  text-align: center;
  padding: 22px 0;
  font-size: 0.82rem;
  color: rgba(8, 8, 7, 0.5);
}

/* ============ SCROLL REVEAL ============ */
/* Only applied once JS confirms IntersectionObserver support, so
   content stays visible if the script never runs. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .sparkle { animation: none; }

  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover, .service-card:hover { transform: none; }

  .testi-track { scroll-behavior: auto; }
  .testi-arrow:hover { transform: translateY(-50%); }
  .testi-dot.is-active { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ============ FAQ ============ */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(8, 8, 7, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Tanda +/- yang berputar saat dibuka */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }

.faq-item p {
  padding: 0 22px 20px;
  color: rgba(8, 8, 7, 0.68);
  font-size: 0.95rem;
}

/* ============ TOMBOL WHATSAPP MENGAMBANG ============ */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(27, 193, 64, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(27, 193, 64, 0.55);
}
.wa-float svg { width: 30px; height: 30px; }

/* Denyut halus untuk menarik perhatian */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(27, 193, 64, 0.5);
  animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 193, 64, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(27, 193, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 193, 64, 0); }
}

@media (min-width: 640px) {
  .wa-float { right: 26px; bottom: 26px; width: 62px; height: 62px; }
  .wa-float svg { width: 33px; height: 33px; }
}