/* ============================================================
   PROMO MITSUBISHI - Design System
   Dealer: MITSUBISHI Srikandi Diamond Motors Citra Raya
   ------------------------------------------------------------
   Token mengikuti sistem desain: skala tipe, skala spasi,
   radius Tailwind, latar flat, satu typeface (Manrope).
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  /* Warna brand */
  --red: #E60012;
  --red-hover: #C5000F;
  --ink: #111111;
  --white: #FFFFFF;
  --gray-light: #F4F4F4;
  --gray-dark: #333333;

  /* Turunan netral */
  --ink-2: #181818;
  --ink-3: #1F1F1F;
  --ink-4: #272727;
  --line: #E4E4E4;
  --line-dark: #313131;
  /* --muted di atas putih = 5.7:1, --muted-dark di atas --ink = 7.3:1.
     Nilai sebelumnya (6B6B6B / 9B9B9B) gagal WCAG AA untuk teks kecil
     di atas --gray-light dan --ink. */
  --muted: #5F5F5F;
  --muted-dark: #A8A8A8;
  /* Merah aksen untuk teks kecil: #E60012 hanya 3.9:1 di atas putih,
     jadi teks merah memakai nada lebih gelap ini (4.9:1 di atas putih,
     4.5:1 di atas --gray-light). Tetap bagian dari keluarga merah brand. */
  --red-text: #C5000F;
  /* Di atas latar gelap arahnya dibalik: merah brand terlalu gelap
     (3.9:1). Nada lebih terang ini 5.4:1 di atas --ink. */
  --red-on-dark: #FF4D5A;

  /* Spasi */
  --s-0: 0;
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* Radius */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* Gerak */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur-base: 500ms;

  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-lift: 0 16px 40px rgba(17, 17, 17, 0.10);
  --container: 1200px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  font-synthesis: none;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Utilitas ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-300);
}

.skip-link {
  position: absolute;
  left: var(--s-300);
  top: -100px;
  z-index: 200;
  padding: var(--s-100) var(--s-200);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease);
}
.skip-link:focus { top: var(--s-200); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SKALA TIPE - setiap ukuran ada di tangga skala
   ============================================================ */

/* Heading */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }

/* Title */
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }

/* Body */
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }

/* Caption */
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

/* ============================================================
   TOMBOL
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.btn svg { flex: none; }
.btn:active { transform: scale(0.98); }

.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-hover); box-shadow: 0 8px 20px rgba(230, 0, 18, 0.24); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink-4); }

.btn-outline { border: 1px solid var(--line); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--ink); }

.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.72);
  color: var(--white);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.14); }

.btn-lg { font-size: 18px; line-height: 28px; padding: var(--s-100) var(--s-200); }
.btn-sm { font-size: 14px; line-height: 20px; }
.btn-block { width: 100%; }

/* Keadaan nonaktif yang terlihat jelas */
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   HEADER - bilah mengapung, kaca buram
   ============================================================ */
.header {
  position: fixed;
  inset-inline: 0;
  top: var(--s-200);
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.header-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-300);
  width: calc(100% - var(--s-600));
  max-width: var(--container);
  padding: var(--s-75) var(--s-100) var(--s-75) var(--s-200);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition:
    background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.header.is-stuck .header-inner {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(17, 17, 17, 0.12);
  box-shadow: var(--shadow-lift);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-100);
  flex: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xl);
  background: var(--red);
}
.brand-mark svg,
.brand-mark img { width: 23px; height: 20px; display: block; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.brand-sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-300);
  margin-inline: auto;
}
.nav a {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gray-dark);
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"],
.nav a.is-active { color: var(--ink); }
.nav a[aria-current="page"]::after,
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--red);
}

.header-cta { flex: none; }

/* Tombol menu */
.burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
  flex: none;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* Panel menu seluler */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-100);
  padding: var(--s-900) var(--s-300) var(--s-600);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.mobile-menu.is-open a { opacity: 1; transform: translateY(0); }
.mobile-menu .mm-contact {
  margin-top: var(--s-400);
  padding-top: var(--s-400);
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--muted);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: 168px;
  padding-bottom: var(--s-800);
  background: var(--gray-light);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-700);
  align-items: center;
}

.hero-copy { max-width: 680px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-50) var(--s-100) var(--s-50) var(--s-75);
  margin-bottom: var(--s-300);
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--gray-dark);
}
.dot-live {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--red);
}

/* Gradien hanya pada teks judul, sesuai aturan tema terang */
.hero h1 {
  background-image: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s-300);
  max-width: 680px;
}

.hero-sub {
  max-width: 680px;
  color: var(--gray-dark);
  margin-bottom: var(--s-400);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100);
  margin-bottom: var(--s-400);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--s-100);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.hero-proof svg { flex: none; color: var(--red); }

.hero-visual { position: relative; }
.hero-visual img {
  width: 100%;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lift);
}

/* Pita kepercayaan */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  padding-block: var(--s-300);
}
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-500);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  color: var(--gray-dark);
}
.trust-item svg { color: var(--red); flex: none; }

/* ============================================================
   BAGIAN UMUM
   ============================================================ */
.section { padding-block: var(--s-900); }
.section-tight { padding-block: var(--s-800); }
.section-alt { background: var(--gray-light); }
.section-dark { background: var(--ink); color: var(--white); }
.section-dark .section-sub { color: var(--muted-dark); }

.section-head { max-width: 680px; margin-bottom: var(--s-600); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  margin-bottom: var(--s-100);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-text);
}
.section-dark .eyebrow,
.lead-section .eyebrow,
.tagline .eyebrow { color: var(--red-on-dark); }
.section-sub { margin-top: var(--s-200); color: var(--muted); max-width: 680px; }
.section-head.center .section-sub { margin-inline: auto; }
/* Di dalam bagian gelap, teks muted memakai nada terang. Tanpa ini,
   --muted (dioptimalkan untuk latar putih) jatuh ke 2.6:1 di atas --ink. */
.section-dark .section-sub,
.lead-section .section-sub,
.section-dark .caption-5,
.lead-section .caption-5,
.section-dark .field .optional,
.lead-section .field .optional,
.section-dark .form-note,
.lead-section .form-note,
.section-dark .form-privacy,
.lead-section .form-privacy { color: var(--muted-dark); }

/* ============================================================
   TAGLINE REVEAL - tiap kata menyala saat melewati garis
   ============================================================ */
.tagline {
  padding-block: var(--s-900);
  background: var(--ink);
  color: var(--white);
}
.tagline-text {
  max-width: 680px;
  font-size: 48px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tagline-text .w {
  color: rgba(255, 255, 255, 0.28);
  transition: color 620ms var(--ease);
}
.tagline-text .w.on { color: var(--white); }

/* ============================================================
   KARTU PRODUK
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
}

/* Kartu unggulan melebar 2 kolom: Xpander adalah model terlaris, jadi
   hierarkinya harus terbaca. Ini yang memutus ritme kartu seragam. */
.product-card.is-feature {
  grid-column: span 2;
  flex-direction: row;
}
.product-card.is-feature .product-media {
  flex: 1 1 54%;
  min-width: 0;
}
.product-card.is-feature .product-media img { height: 100%; aspect-ratio: auto; }
.product-card.is-feature .product-body {
  flex: 1 1 46%;
  gap: var(--s-200);
  padding: var(--s-500);
  justify-content: center;
}
.product-card.is-feature .heading-6 { font-size: 24px; line-height: 32px; }

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 17, 17, 0.16);
  box-shadow: var(--shadow-lift);
}

.product-media {
  position: relative;
  background: var(--gray-light);
}
.product-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.product-cat {
  position: absolute;
  top: var(--s-100);
  left: var(--s-100);
  padding: var(--s-25) var(--s-75);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-100);
  padding: var(--s-300);
}
.product-body p { color: var(--muted); }
.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75);
  margin-top: auto;
  padding-top: var(--s-200);
}

/* ============================================================
   KARTU PROMO
   ============================================================ */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
}
.promo-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-100);
  padding: var(--s-300);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  background: var(--ink-3);
}
.promo-card .promo-top {
  display: flex;
  align-items: center;
  gap: var(--s-100);
  margin-bottom: var(--s-75);
}
.promo-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-xl);
  background: var(--ink-4);
  color: var(--red);
  flex: none;
}
.promo-card h3 { color: var(--white); }
.promo-card p { color: var(--muted-dark); }

.promo-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-100);
  margin-top: var(--s-400);
  padding: var(--s-200) var(--s-300);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: var(--ink-2);
  color: var(--muted-dark);
}
.promo-note svg { color: var(--red); flex: none; margin-top: 2px; }

/* Placeholder yang terlihat sebagai placeholder */
.ph {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  color: var(--muted-dark);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.ph-dark {
  border-color: rgba(17, 17, 17, 0.32);
  color: var(--muted);
}

/* ============================================================
   MENGAPA KAMI
   ============================================================ */
/* Daftar, bukan kisi kartu: enam kotak bergaris dengan ukuran seragam
   mengulang ritme kartu produk tepat di atasnya. Baris daftar memberi
   komposisi berbeda dan memakai garis sebagai pemisah nyata, bukan hiasan. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-600);
  row-gap: 0;
}
.why-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--s-200);
  row-gap: var(--s-50);
  padding: var(--s-300) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.why-icon {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 44px; height: 44px;
  margin-bottom: 0;
  border-radius: var(--r-xl);
  background: var(--gray-light);
  color: var(--red);
}
.why-item h3 { grid-column: 2; }
.why-item p { grid-column: 2; color: var(--muted); }

/* ============================================================
   PROSES PEMBELIAN
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-300);
  counter-reset: step;
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-100);
  padding-top: var(--s-300);
  border-top: 2px solid var(--line);
}
.step-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.step p { color: var(--muted); }

/* ============================================================
   FORMULIR LEADS
   ============================================================ */
.lead-section { background: var(--ink); color: var(--white); }
.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-700);
  align-items: start;
}
.lead-copy { max-width: 680px; }
.lead-copy .section-sub { color: var(--muted-dark); }

.lead-points {
  display: flex;
  flex-direction: column;
  gap: var(--s-200);
  margin-top: var(--s-400);
}
.lead-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-100);
  color: var(--muted-dark);
}
.lead-points svg { color: var(--red); flex: none; margin-top: 3px; }

.form-card {
  padding: var(--s-400);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  background: var(--ink-3);
}

.field { margin-bottom: var(--s-200); }
.field label {
  display: block;
  margin-bottom: var(--s-75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted-dark);
}
.field .optional { color: var(--muted-dark); font-weight: 400; }

/* Target sentuh minimum 44px untuk kontrol yang di layar kecil hanya
   punya ikon atau satu baris teks. Ukuran visualnya tidak berubah,
   area klik yang diperluas lewat padding. (R-03) */
.burger { min-width: 44px; height: 44px; }

.field input,
.field select {
  width: 100%;
  padding: var(--s-100);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: var(--ink-2);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field input::placeholder { color: #6B6B6B; }
.field input:hover,
.field select:hover { border-color: #4A4A4A; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--red);
  background: var(--ink);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-100) center;
  padding-right: var(--s-500);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-200);
}

/* Radio pil */
.pill-group { display: flex; gap: var(--s-75); }
.pill { flex: 1; position: relative; }
.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill span {
  display: block;
  padding: var(--s-100);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: var(--ink-2);
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--muted-dark);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pill input:checked + span {
  border-color: var(--red);
  background: rgba(230, 0, 18, 0.12);
  color: var(--white);
}
.pill input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

/* Pesan galat inline */
.field-error {
  margin-top: var(--s-50);
  color: #FF6B6B;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  min-height: 16px;
}
.field.has-error input,
.field.has-error select { border-color: #FF6B6B; }

.form-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--s-75);
  margin-top: var(--s-200);
  color: var(--muted);
}
.form-privacy svg { flex: none; margin-top: 3px; }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-75);
  margin-top: var(--s-200);
  padding-top: var(--s-200);
  border-top: 1px solid var(--line-dark);
  color: var(--muted);
}

/* Status formulir */
.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--s-100);
  margin-top: var(--s-200);
  padding: var(--s-200);
  border-radius: var(--r-xl);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.form-status.is-visible { display: flex; }
.form-status.is-error {
  border: 1px solid rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.1);
  color: #FF9B9B;
}
.form-status.is-ok {
  border: 1px solid rgba(120, 200, 140, 0.4);
  background: rgba(120, 200, 140, 0.1);
  color: #A8E0BA;
}
.form-status svg { flex: none; margin-top: 2px; }
.form-status .retry {
  margin-top: var(--s-100);
  display: inline-block;
  text-decoration: underline;
  font-weight: 600;
  color: inherit;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  width: 100%;
  padding: var(--s-300) 0;
  text-align: left;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover { color: var(--red); }
.faq-q svg {
  flex: none;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
.faq-item.is-open .faq-q svg { transform: rotate(180deg); color: var(--red); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding-bottom: var(--s-300);
  color: var(--muted);
  max-width: 720px;
}

/* ============================================================
   KONTAK
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-600);
  align-items: start;
}
.contact-list { display: flex; flex-direction: column; gap: var(--s-300); }
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-200);
  padding-bottom: var(--s-300);
  border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-xl);
  background: var(--gray-light);
  color: var(--red);
  flex: none;
}
.contact-row p { color: var(--muted); margin-top: var(--s-25); }
.contact-row a.link { color: var(--red-text); font-weight: 600; }
.contact-row a.link:hover { text-decoration: underline; }

.map-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--gray-light);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   CTA AKHIR
   ============================================================ */
.final-cta {
  padding-block: var(--s-800);
  background: var(--gray-light);
  text-align: center;
}
.final-cta .section-head { margin-inline: auto; text-align: center; }
.final-cta .hero-actions { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding-block: var(--s-800) var(--s-400);
  background: var(--ink);
  color: var(--muted-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-500);
  padding-bottom: var(--s-600);
  border-bottom: 1px solid var(--line-dark);
}
.footer .brand-name { color: var(--white); }
.footer-brand p { margin-top: var(--s-200); max-width: 340px; }
.footer h3 {
  margin-bottom: var(--s-200);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-links { display: flex; flex-direction: column; gap: var(--s-100); }
.footer-links a {
  color: var(--muted-dark);
  font-size: 14px;
  line-height: 20px;
  transition: color var(--dur-fast) var(--ease);
}
/* Halaman 404 memakai nav .footer-links di dalam <main> berlatar terang,
   jadi nada terang tidak terbaca (2.38:1). Nada gelap dipakai di sana. (R-25) */
.error-page .footer-links a { color: var(--muted); }
.error-page .footer-links a:hover { color: var(--ink); }
/* Tautan di baris bawah footer (mis. halaman 404) mewarisi warna induk
   footer, bukan warna tautan footer-links. Tanpa aturan ini `.caption-5`
   memakai --muted yang gelap di atas latar --ink. (R-25) */
.footer-bottom a { color: var(--muted-dark); }
.footer-bottom a:hover { color: var(--white); }
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding-top: var(--s-400);
}

/* Tombol WhatsApp mengapung */
.wa-float {
  position: fixed;
  right: var(--s-200);
  bottom: var(--s-200);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-100) var(--s-200);
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(230, 0, 18, 0.32);
  transition: transform var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease);
}
.wa-float:hover { background: var(--red-hover); transform: translateY(-2px); }
.wa-float:active { transform: scale(0.98); }

/* ============================================================
   HALAMAN PRODUK
   ============================================================ */
.breadcrumb {
  padding-top: 128px;
  padding-bottom: var(--s-300);
  background: var(--gray-light);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-75);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--muted);
}
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

.model-hero {
  padding-bottom: var(--s-800);
  background: var(--gray-light);
}
.model-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-700);
  align-items: center;
}
.model-hero h1 { max-width: 680px; margin-bottom: var(--s-200); }
.model-hero .lede { max-width: 680px; color: var(--gray-dark); margin-bottom: var(--s-400); }
.model-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75);
  margin-bottom: var(--s-300);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  padding: var(--s-25) var(--s-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--gray-dark);
}
.model-hero img {
  width: 100%;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lift);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
}
.spec {
  padding: var(--s-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
}
.spec dt { color: var(--muted); margin-bottom: var(--s-75); }
.spec dd { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-300) var(--s-500);
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-200);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-xl);
  background: var(--gray-light);
  color: var(--red);
  flex: none;
}
.feature p { color: var(--muted); margin-top: var(--s-50); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-200);
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
}

.model-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-200);
}
.model-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-75);
  padding: var(--s-200);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
}
.model-link:hover { border-color: var(--ink); transform: translateY(-2px); }
.model-link img { border-radius: var(--r-lg); aspect-ratio: 3 / 2; object-fit: cover; }

/* ============================================================
   HALAMAN LEGAL & 404
   ============================================================ */
.page-simple { padding-top: 160px; padding-bottom: var(--s-800); }
.prose { max-width: 720px; }
.prose h2 {
  margin-top: var(--s-600);
  margin-bottom: var(--s-200);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.prose p, .prose li { color: var(--gray-dark); margin-bottom: var(--s-200); }
.prose ul { list-style: disc; padding-left: var(--s-300); }
.prose a { color: var(--red); font-weight: 600; }

.error-page {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-top: 160px;
  padding-bottom: var(--s-800);
  text-align: center;
}
.error-code {
  font-size: 128px;
  line-height: 1;
  font-weight: 600;
  color: var(--red);
  letter-spacing: -0.04em;
}

/* ============================================================
   HALAMAN PROMO (promo/)
   ============================================================ */
.page-hero {
  padding-top: 160px;
  padding-bottom: var(--s-800);
  background: var(--gray-light);
}
.page-hero .heading-1 { max-width: 900px; }
.page-hero .lede { max-width: 720px; margin-top: var(--s-300); color: var(--gray-dark); }
.page-hero .hero-actions { margin-top: var(--s-400); margin-bottom: 0; }

/* Aksi cepat dengan nomor besar */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-200);
}
.action-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-75);
  padding: var(--s-300);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  background: var(--ink-3);
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
}
.action-card:hover { border-color: var(--red); transform: translateY(-2px); }
.action-num {
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}
.section-dark .action-card p { color: var(--muted-dark); }

/* Daftar program promo */
.program-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-200) var(--s-500);
}
.program-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-200);
  padding: var(--s-200) 0;
  border-bottom: 1px solid var(--line);
}
.program-item svg { color: var(--red); flex: none; margin-top: 4px; }
.program-item h3 { margin-bottom: var(--s-25); }
.program-item p { color: var(--muted); }

/* Label program */
.pill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75);
  margin-top: var(--s-300);
}
.pill-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--s-50) var(--s-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--gray-dark);
}

/* Tabel promo */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  -webkit-overflow-scrolling: touch;
}
.promo-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}
.promo-table caption {
  padding: var(--s-200) var(--s-300);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.promo-table th,
.promo-table td {
  padding: var(--s-200) var(--s-300);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.promo-table thead th {
  background: var(--gray-light);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-dark);
  white-space: nowrap;
}
.promo-table tbody th { font-weight: 600; }
.promo-table tbody tr:last-child th,
.promo-table tbody tr:last-child td { border-bottom: 0; }
.promo-table tbody tr:hover { background: var(--gray-light); }
.promo-table .cell-action { text-align: right; white-space: nowrap; }
.promo-table .link-model { color: var(--ink); }
.promo-table .link-model:hover { color: var(--red); text-decoration: underline; }

/* Catatan kaki tabel */
.table-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-100);
  margin-top: var(--s-200);
  color: var(--muted);
}
.table-note svg { color: var(--red); flex: none; margin-top: 3px; }

/* Simulasi kredit */
.sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-600);
  align-items: start;
}
.sim-card {
  padding: var(--s-400);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  background: var(--ink-3);
}
.sim-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-200) 0;
  border-bottom: 1px solid var(--line-dark);
}
.sim-row:last-of-type { border-bottom: 0; }
.sim-row dt {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted-dark);
}
.sim-row dd {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
}
.sim-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
  counter-reset: simstep;
}
.sim-step { display: flex; align-items: flex-start; gap: var(--s-200); }
.sim-step-num {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  flex: none;
}
.sim-step h3 { margin-bottom: var(--s-25); }
/* Langkah simulasi berada di dalam bagian gelap, jadi teks memakai nada
   terang. Sebelumnya --muted (2.96:1 di atas --ink) tidak terbaca. (R-25) */
.section-dark .sim-step p,
.lead-section .sim-step p { color: var(--muted-dark); }
.sim-step p { color: var(--muted); }

/* Syarat dan ketentuan */
.terms-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-200);
  counter-reset: term;
}
.terms-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-200);
  color: var(--gray-dark);
}
.terms-list li::before {
  counter-increment: term;
  content: counter(term);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  background: var(--gray-light);
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  flex: none;
}

/* Kartu pilihan model di halaman promo */
.promo-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-200);
}
.promo-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-75);
  padding: var(--s-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
}
.promo-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.promo-tile-cat {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}
.promo-tile-name { font-size: 18px; line-height: 28px; font-weight: 600; }
.promo-tile-note { font-size: 14px; line-height: 20px; color: var(--muted); }

/* Tombol Hitung yang sedang dipakai sebagai rujukan kalkulator */
.promo-table .btn.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Hero halaman model: dua tombol utama sejajar, tombol spesifikasi di baris sendiri */
.model-hero .hero-actions { gap: var(--s-100); }
.model-hero .hero-actions .btn { flex: 1 1 0; min-width: 0; }
.model-hero .hero-actions .btn-hero-wide { flex: 1 1 100%; }
@media (max-width: 1180px) {
  .model-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .model-hero .hero-actions .btn { width: 100%; }
}

/* ============================================================
   HARGA VARIAN & KALKULATOR KREDIT
   ============================================================ */
.promo-table .cell-price {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Kalkulator: kotak form gelap di dalam section terang maupun gelap */
.section-alt .sim-form,
.section-alt .sim-result,
.section .sim-form,
.section .sim-result { color: var(--white); }

.section-alt .sim-grid,
.section .sim-grid {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--ink);
}

.section-alt .sim-form,
.section .sim-form { border-right: 1px solid var(--line-dark); }
.section-alt .sim-result,
.section .sim-result { background: var(--ink-3); }

.sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.sim-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s-200);
  padding: var(--s-400) var(--s-400);
  background: var(--ink);
}
.sim-form .field { margin-bottom: 0; }
.sim-form .field:last-of-type { margin-bottom: 0; }
.sim-result {
  display: flex;
  flex-direction: column;
  padding: var(--s-400);
  background: var(--ink-3);
}
.sim-result > i {
  display: block;
  margin-bottom: var(--s-300);
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.sim-headline {
  padding-bottom: var(--s-300);
  margin-bottom: var(--s-100);
  border-bottom: 1px solid var(--line-dark);
}
.sim-headline b {
  display: block;
  margin-bottom: var(--s-75);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.sim-headline span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.sim-rows { list-style: none; }
.sim-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-100) 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 14px;
  line-height: 20px;
}
.sim-rows li:last-child { border-bottom: 0; }
.sim-rows li span { color: var(--muted-dark); }
.sim-rows li b {
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sim-note {
  margin: var(--s-200) 0 var(--s-300);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-dark);
}
.sim-result .btn { align-self: flex-start; }

/* Di dalam section gelap, form tetap punya latar sendiri */
.section-dark .sim-form { background: var(--ink-2); }
.section-dark .sim-result { background: var(--ink-3); }

/* ============================================================
   HALAMAN ARTIKEL
   ============================================================ */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-200);
}
.article-card {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.article-card:hover {
  border-color: rgba(17, 17, 17, 0.16);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.article-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-100);
  width: 100%;
  padding: var(--s-300);
}
.article-cat {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.article-card h3 { color: var(--ink); }
.article-card p { color: var(--muted); }
.article-more {
  margin-top: auto;
  padding-top: var(--s-200);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--red);
}

/* Tata letak artikel: isi + sidebar */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-700);
  align-items: start;
}
.article-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
  position: sticky;
  top: 112px;
}
.article-body h2 {
  margin-top: var(--s-700);
  margin-bottom: var(--s-200);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.article-body h3 {
  margin-top: var(--s-500);
  margin-bottom: var(--s-200);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.article-body p,
.article-body li { color: var(--gray-dark); }
.article-body p { margin-bottom: var(--s-200); }
.article-body ul { list-style: disc; padding-left: var(--s-300); }
.article-body ol { list-style: decimal; padding-left: var(--s-300); }
.article-body li { margin-bottom: var(--s-100); }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--red); font-weight: 600; }
.article-body .callout {
  margin: var(--s-400) 0;
  padding: var(--s-300);
  border-left: 3px solid var(--red);
  border-radius: var(--r-lg);
  background: var(--gray-light);
}
.article-body .callout b {
  display: block;
  margin-bottom: var(--s-75);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Label kecil di atas --gray-light: merah brand hanya 4.37:1 di sini,
     jadi memakai nada teks yang lebih gelap. (R-25) */
  color: var(--red-text);
}
.article-body .callout p { margin: 0; }
.art-meta-line {
  margin-top: var(--s-300);
  padding-top: var(--s-200);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75);
  margin-top: var(--s-500);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
}
.art-tags span {
  padding: var(--s-25) var(--s-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--muted);
}
.art-back { margin-top: var(--s-400); }

/* Kotak samping */
.side-box {
  padding: var(--s-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
}
.side-box h4 { margin-bottom: var(--s-200); }
.side-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-100);
  list-style: none;
}
.side-list a {
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-dark);
  transition: color var(--dur-fast) var(--ease);
}
.side-list a:hover { color: var(--red); }
.side-cta { background: var(--gray-light); }
.side-cta p { margin-bottom: var(--s-200); color: var(--muted); }

/* ------------------------------------------------------------
   Ruang aman untuk tombol WhatsApp yang melayang.
   Tanpa ini, tombol melayang menutupi tombol aksi pada baris
   terakhir tabel varian saat halaman digulir ke bawah.
   ------------------------------------------------------------ */
.lead-section,
main > section:last-of-type {
  padding-bottom: calc(var(--s-800) + 72px);
}

/* Tombol aksi di kolom paling kanan tabel harga diberi jarak
   dari tepi supaya tidak pernah bersinggungan dengan tombol melayang. */
.promo-table .cell-action {
  padding-right: var(--s-500);
  padding-left: var(--s-200);
}

@media (max-width: 768px) {
  .lead-section,
  main > section:last-of-type { padding-bottom: calc(var(--s-600) + 80px); }
}

/* ============================================================
   HERO CAROUSEL + BAR AKSI CEPAT (beranda)
   ------------------------------------------------------------
   Pita hero memakai rasio tetap supaya foto banner (2.09)
   tidak gepeng. Di ponsel dipakai foto versi tegak (0.83).
   ============================================================ */
.hero-carousel{
  position:relative;width:100%;
  height:clamp(520px,72vh,760px);
  overflow:hidden;background:var(--ink);isolation:isolate;
}
/* Di bawah 1024px tinggi viewport terlalu tidak pasti untuk hero penuh:
   teks 4 baris + dua tombol tidak pernah muat di 72vh layar pendek.
   Jadi hero memakai tinggi berbasis konten di breakpoint itu (lihat
   responsive.css), dan aturan clamp di atas hanya untuk layar lebar. */
.slides,.slide{position:absolute;inset:0}
.slide{
  opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease),visibility 700ms var(--ease);
}
.slide.is-active{opacity:1;visibility:visible}
.slide picture{display:block;width:100%;height:100%}
.slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.045);transition:transform 7000ms linear;
}
.slide.is-active img{transform:scale(1)}

.hero-carousel .veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,0) 46%),
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.26) 68%,rgba(0,0,0,.38) 100%);
}
/* Di bawah 900px gambar hero bertukar ke potret dan teks menutupi bagian
   bawah frame, tempat yang di desktop masih tertutup veil kiri. Gradasi
   mendatar saja tidak cukup, jadi ditambah gradasi tegak dari bawah.
   Ini satu-satunya alasan lapisan ini ada: menjaga kontras teks (R-25). */
.hero-carousel .veil::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 38%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.2) 100%);
}
@media (max-width:900px){ .hero-carousel .veil::after{opacity:1} }

.hero-carousel .hero-isi{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:flex-end;
  width:100%;max-width:var(--container);margin-inline:auto;
  padding:0 var(--s-300) 132px;
}
.hero-carousel .hero-teks{max-width:min(660px,calc(100% - 190px));padding-left:76px}
.hero-eyebrow{
  display:block;margin-bottom:22px;
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero-h1{
  margin-bottom:20px;
  font-size:clamp(30px,4.2vw,56px);line-height:1.06;
  font-weight:600;letter-spacing:-.025em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero-carousel .hero-p{
  max-width:560px;margin-bottom:28px;
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.84);
}
.hero-carousel .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-100);margin-bottom:0}
/* Tombol garis di atas foto perlu border lebih tegas supaya tidak
   menyatu dengan bagian gelap kendaraan di belakangnya. */
.hero-carousel .btn-outline-light{
  border-width:2px;
  border-color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.45);
}

/* Teks masuk berurutan tiap ganti slide */
.hero-teks > *{opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.hero-teks.is-on > *{opacity:1;transform:none}
.hero-teks.is-on > *:nth-child(1){transition-delay:110ms}
.hero-teks.is-on > *:nth-child(2){transition-delay:190ms}
.hero-teks.is-on > *:nth-child(3){transition-delay:270ms}
.hero-teks.is-on > *:nth-child(4){transition-delay:350ms}

/* Panah */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:7;
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.72);background:rgba(0,0,0,.58);
  color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hero-nav:hover{background:rgba(0,0,0,.82);border-color:#fff}
.hero-nav:active{transform:translateY(-50%) scale(.95)}
.hero-prev{left:24px}
.hero-next{right:24px}

/* Titik indikator dengan pelat gelap agar terbaca di foto terang */
.hero-dots{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:var(--r-full);
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.dot{
  position:relative;width:34px;height:5px;padding:0;border:0;border-radius:var(--r-full);
  background:rgba(255,255,255,.34);cursor:pointer;overflow:hidden;
  transition:background-color var(--dur-fast) var(--ease),width var(--dur-base) var(--ease);
}
/* Area klik 44px lewat pseudo-element: bentuk titik tetap 5px, tapi
   target sentuh memenuhi minimum. (R-03) */
.dot::before{content:"";position:absolute;inset:-20px 0}
.dot::after{content:"";position:absolute;inset:-13px 0}
.dot:hover{background:rgba(255,255,255,.58)}
.dot.is-active{width:56px;background:rgba(255,255,255,.5)}
.dot span{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left center}
.dot.is-active span{animation:dotIsi var(--slide-dur,6500ms) linear forwards}
@keyframes dotIsi{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-count{
  position:absolute;left:30px;bottom:28px;z-index:6;
  padding:8px 13px;border-radius:var(--r-full);
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.72);
}
.hero-count b{color:#fff;font-size:14px}

/* ---------- Bar aksi cepat ---------- */
.util-bar{background:var(--ink);color:var(--white)}
.util-in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.util-in a{
  display:flex;align-items:center;justify-content:center;gap:var(--s-100);
  padding:var(--s-400) var(--s-200);
  border-right:1px solid var(--line-dark);
  color:var(--white);text-align:center;
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.util-in a:last-child{border-right:0}
.util-in a:hover{color:var(--red);background:var(--ink-2)}
.util-in svg{flex:none}
.util-in span{letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-size:12px}

/* ---------- Responsif ---------- */
@media (max-width:1024px){
  .hero-carousel{height:clamp(520px,68vh,680px)}
  .hero-carousel .hero-isi{padding:0 var(--s-200) 124px}
  .hero-carousel .hero-teks{max-width:min(660px,calc(100% - 140px));padding-left:52px}
  .hero-prev{left:14px}.hero-next{right:14px}
  .hero-nav{width:46px;height:46px}
  .hero-count{left:20px}
}
@media (max-width:900px){
  .hero-carousel{height:auto;min-height:clamp(560px,86vh,720px)}
  /* Di ponsel teks ada di bawah foto, jadi scrim dibuat gelap dari bawah,
     bukan dari kiri seperti di desktop. */
  .hero-carousel .veil{
    background:
      linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.1) 22%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.92) 100%);
  }
  .hero-carousel .hero-isi{padding:0 var(--s-200) 132px;align-items:flex-end}
  .hero-carousel .hero-teks{max-width:100%;padding-left:0}
  .hero-carousel .slide img{object-position:50% 42%}
  .hero-eyebrow{letter-spacing:.2em;margin-bottom:16px}
  .hero-carousel .hero-p{font-size:15px;margin-bottom:22px}
  .hero-carousel .hero-actions .btn{flex:1 1 100%}
  .hero-nav{width:42px;height:42px;top:auto;bottom:62px;transform:none}
  .hero-nav:active{transform:scale(.95)}
  .hero-prev{left:var(--s-200)}.hero-next{right:var(--s-200)}
  .hero-dots{bottom:14px;gap:6px;padding:7px 10px}
  .dot{width:22px;height:4px}
  .dot.is-active{width:34px}
  .hero-count{display:none}
  .util-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .util-in a{padding:var(--s-300) var(--s-200);border-bottom:1px solid var(--line-dark)}
  /* Baris bawah dibuat satu kolom penuh supaya tidak ada sel yang berada
     tepat di bawah tombol WhatsApp yang mengapung di kanan bawah. */
  .util-in a:nth-child(3){grid-column:1 / -1}
  .util-in a:nth-child(4){grid-column:1 / -1}
  .util-in a:nth-child(odd){border-right:1px solid var(--line-dark)}
  .util-in a:nth-child(3),.util-in a:nth-child(4){border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .slide,.slide img,.hero-teks > *{transition:none !important;animation:none !important}
  .dot.is-active span{transform:scaleX(1)}
}

/* Tombol WhatsApp mengapung baru muncul setelah pengunjung menggulir
   melewati hero dan bar aksi cepat, supaya tidak menutupi konten awal. */
.wa-float--siap{
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
             visibility var(--dur-base) var(--ease),background-color var(--dur-fast) var(--ease);
}
.wa-float--siap.is-tampil{opacity:1;visibility:visible;transform:none}

/* ============================================================
   REVEAL SAAT SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tagline-text .w { color: var(--white); }
}