/* ============================================================
   PROMO MITSUBISHI - Lapisan Responsif
   Mobile-first. Uji pada 390px, 768px, 1024px, 1280px.
   ============================================================ */

/* ---------- <= 1180px ---------- */
@media (max-width: 1180px) {
  .nav { gap: var(--s-200); }
  .header-inner { width: calc(100% - var(--s-500)); }
}

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px) {
  :root { --s-900: 80px; --s-800: 64px; }

  .nav { display: none; }
  .header-cta { display: none; }
  .burger { display: block; margin-left: auto; }

  /* Kartu unggulan kembali ke lebar penuh dan tumpukan tegak. */
  .product-card.is-feature { grid-column: span 2; flex-direction: column; }
  .product-card.is-feature .product-media { flex: none; }
  .product-card.is-feature .product-media img { height: auto; aspect-ratio: 3 / 2; }
  .product-card.is-feature .product-body { flex: none; padding: var(--s-300); }

  .hero { padding-top: 148px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }
  .hero-visual { order: -1; }

  .product-grid,
  .promo-grid,
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Hero: tinggi berbasis konten, bukan 72vh. Teks dan kontrol
     diletakkan dalam aliran normal supaya tidak pernah saling tumpuk. */
  .hero-carousel {
    height: auto;
    min-height: 0;
    display: block;
    padding-bottom: var(--s-600);
  }
  .hero-carousel .slides {
    position: relative;
    height: 58vh;
    min-height: 320px;
  }
  .hero-carousel .hero-isi {
    position: relative;
    inset: auto;
    z-index: 3;
    display: block;
    align-items: stretch;
    padding: var(--s-500) var(--s-300) var(--s-400);
    /* Panel gelap solid di bawah foto: kontras teks tidak lagi
       bergantung pada isi foto di belakangnya. (R-25) */
    background: var(--ink);
  }
  .hero-carousel .hero-teks {
    max-width: 660px;
    padding-left: 0;
    margin-inline: auto;
  }
  .hero-carousel .hero-p { max-width: 620px; }
  .hero-carousel .hero-nav { top: 29%; }
  .hero-prev { left: 12px; }
  .hero-next { right: 12px; }
  /* Target sentuh minimum di layar kecil. Ukuran visual panah tetap,
     area klik yang diperluas. (R-03) */
  .hero-carousel .hero-nav { width: 44px; height: 44px; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
  .brand { min-height: 44px; }
  /* Titik indikator turun ke dasar hero, tepat di bawah panel teks;
     sebelumnya ia menjadi anak flex dan keluar dari kotak hero. */
  .hero-dots {
    position: absolute;
    left: 50%;
    bottom: var(--s-300);
    transform: translateX(-50%);
    margin: 0;
  }
  .hero-count { display: none; }

  .lead-grid,
  .contact-grid,
  .model-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }

  .model-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .model-hero .hero-actions .btn { width: 100%; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }
  .article-side { position: static; }
  .promo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sim-form { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .page-hero { padding-top: 148px; }
}

/* ---------- <= 768px ---------- */
@media (max-width: 768px) {
  :root { --s-900: 64px; --s-800: 48px; }

  .wrap { padding-inline: var(--s-200); }
  .header-inner { width: calc(100% - var(--s-300)); padding-left: var(--s-100); }
  .header { top: var(--s-100); }

  .heading-1 { font-size: 36px; line-height: 40px; }
  .heading-2 { font-size: 30px; line-height: 36px; }
  .heading-3 { font-size: 30px; line-height: 36px; }
  .heading-4 { font-size: 24px; line-height: 32px; }

  .tagline-text { font-size: 30px; line-height: 36px; }

  .hero { padding-top: 132px; }
  .hero-actions .btn { flex: 1 1 auto; }

  .product-grid,
  .promo-grid,
  .why-grid,
  .steps,
  .feature-list,
  .spec-grid,
  .gallery,
  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  /* Daftar "mengapa kami" jadi satu kolom: dua kolom pada 768px
     menyisakan lebar terlalu sempit untuk ikon 44px + teks. */
  .why-grid { column-gap: 0; }

  .model-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .form-card { padding: var(--s-300); }

  .faq-q { font-size: 16px; line-height: 24px; }

  .trust-inner { gap: var(--s-300); justify-content: flex-start; }

  .breadcrumb { padding-top: 116px; }
  .page-simple { padding-top: 132px; }
  .error-code { font-size: 96px; }

  .wa-float span.label { display: none; }
  .wa-float { padding: var(--s-100); border-radius: var(--r-full); }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .action-grid,
  .program-list,
  .promo-tiles,
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .action-num { font-size: 32px; line-height: 36px; }
  .promo-table th,
  .promo-table td { padding: var(--s-200); }
  .page-hero { padding-top: 132px; }
  .sim-form,
  .sim-result { padding: var(--s-300); }
}

/* ---------- <= 420px, termasuk 390px ---------- */
@media (max-width: 420px) {
  .brand-text { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .product-actions .btn { flex: 1 1 100%; }
  .pill-group { flex-direction: column; }
  .model-links { grid-template-columns: minmax(0, 1fr); }
  .why-item, .promo-card, .spec { padding: var(--s-200); }
  .map-frame { aspect-ratio: 1 / 1; }
}

/* ---------- Cegah luapan horizontal ---------- */
@media (max-width: 1024px) {
  .hero, .section, .tagline, .footer { overflow-x: clip; }
}

/* ---------- Cetak ---------- */
@media print {
  .header, .wa-float, .mobile-menu, .hero-actions { display: none !important; }
  body { color: #000; }
}