/* ── Satoshi (self-hosted, sumber: fontshare.com) ───────────────────────── */
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* ── dari <helmet> file desain — jangan diubah, ini yang bikin rendering 1:1 ─ */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Satoshi', system-ui, sans-serif; background: #FFFCF6; -webkit-font-smoothing: antialiased; }
a { color: #D48400; text-decoration: none; }
a:hover { color: #0A0A0A; }
::-webkit-scrollbar { display: none; }
@keyframes kloaPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 1250px) {
  [data-hero] { flex-direction: column !important; align-items: center !important; padding: 52px 32px 0 !important; gap: 16px !important; }
  [data-hero-text] { min-width: 0 !important; padding-bottom: 40px !important; max-width: 640px; }
  [data-hero-phones] { transform: none; width: 634px !important; height: 578px !important; align-self: center; }
  [data-car-slide] { overflow-y: auto !important; }
  [data-car-slide] > div { flex-wrap: wrap !important; gap: 26px !important; justify-content: center; }
  [data-car-slide] > div > div { min-width: 0; }
}
@media (max-width: 760px) {
  [data-nav-links] { display: none !important; }
  [data-nav-masuk] { display: none !important; }
  [data-rs] { padding: 52px 20px !important; }
  [data-hero] { flex-direction: column !important; padding: 44px 20px 0 !important; gap: 10px !important; }
  [data-hero-text] { min-width: 0 !important; padding-bottom: 36px !important; }
  [data-h1] { font-size: 42px !important; letter-spacing: -1.5px !important; }
  [data-hero-bullets] { flex-wrap: wrap !important; gap: 10px 18px !important; }
  [data-hero-phones] { transform: none; width: auto !important; height: auto !important; align-self: center; }
  [data-hero-side] { display: none !important; }
  [data-why-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-why-row] { flex-direction: column !important; gap: 36px !important; }
  [data-why-row] > div:first-child { align-self: center; }
  [data-strip] { flex-direction: column !important; gap: 8px !important; text-align: center; }
  [data-testi-grid] { grid-template-columns: 1fr !important; }
  [data-price-row] { flex-direction: column !important; align-items: center !important; }
  [data-cta-btns] { flex-wrap: wrap !important; }
  [data-car-stage] { height: 812px !important; }
  [data-car-ring] { width: calc(100vw - 44px) !important; margin-left: calc(-50vw + 22px) !important; height: 800px !important; }
  [data-car-slide] { padding: 20px !important; overflow-y: auto !important; }
  [data-car-slide] > div { flex-direction: column !important; flex-wrap: nowrap !important; gap: 18px !important; align-items: stretch !important; }
  [data-car-slide] > div > div { min-width: 0; width: 100%; }
  [data-car-slide] [data-phones] { order: 2; transform: scale(.58); transform-origin: top center; height: 345px !important; width: 100% !important; display: flex !important; justify-content: center; }
  [data-car-arrow] { width: 46px !important; height: 46px !important; top: auto !important; bottom: 2px !important; }
}

/* ── tambahan produksi (tidak mengubah tampilan) ─────────────────────────── */

/* heading dipakai untuk semantik/SEO; direset supaya persis seperti <div> di desain */
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }

/* tombol dot carousel: reset default <button> */
button[data-dot] { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; }

/* anchor nav */
html { scroll-behavior: smooth; }

/* Perbaikan bug sumber: navbar tidak pernah mengecilkan padding 64px-nya, jadi tombol
   "Coba Gratis" keluar layar di bawah ~900px (lihat catatan di README). Hanya padding &
   gap yang dikecilkan; ukuran, warna, dan urutan elemen tetap. Desktop tidak terpengaruh. */
@media (max-width: 900px) {
  [data-nav] { padding: 20px 24px !important; gap: 20px !important; }
}
@media (max-width: 760px) {
  [data-nav] { padding: 20px !important; gap: 14px !important; }
}
@media (max-width: 380px) {
  [data-nav] { padding: 16px 14px !important; gap: 10px !important; }
}

/* hover panah carousel — di desain ini atribut style-hover */
.hv-lift { transition: transform .18s, box-shadow .18s; }
.hv-lift:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0A0A0A; }

/* fokus keyboard untuk elemen interaktif non-native */
[data-act]:focus-visible, [data-dot]:focus-visible { outline: 3px solid #0085FF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}