:root{
  --charcoal:#15171b;
  --asphalt:#20242b;
  --asphalt-2:#2b303a;
  --off-white:#f2f0e9;
  --paper:#faf9f5;
  /* ===== WARNA BRAND MITSUBISHI ===== */
  --mitsubishi-red:#E60012;
  --mitsubishi-red-hover:#C40010;
  --mitsubishi-red-light:rgba(230,0,18,0.1);
  /* Alias lama → tetap mengarah ke warna brand (kompatibilitas global) */
  --red:var(--mitsubishi-red);
  --red-dark:var(--mitsubishi-red-hover);
--red-gradient:linear-gradient(135deg,#710410 0%,#a50612 48%,var(--mitsubishi-red) 100%);
--red-gradient-hover:linear-gradient(135deg,#5c030d 0%,#8f0510 48%,var(--mitsubishi-red-hover) 100%);
  --steel:#8b919c;
  --steel-line:#3b3f47;
  --silver:#c9cdd4;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--charcoal);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:600;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
:focus-visible{outline:3px solid var(--red); outline-offset:2px;}

/* ===== NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
nav{display:flex;align-items:center;justify-content:space-between;}
.logo{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;
  color:#fff;letter-spacing:0.03em;display:flex;align-items:center;gap:10px;
}
.logo-img{
  height:40px;width:auto;display:block;object-fit:contain;
}
.sales-badge{
  display:flex;align-items:center;gap:10px;margin-right:8px;
  text-decoration:none;color:var(--silver);font-size:13px;font-weight:500;
}
.sales-badge:hover{color:#fff;}
.sales-badge img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:2px solid var(--red);
}
.sales-profile-card{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;margin-bottom:24px;
  background:#fff;border:1px solid var(--silver);
  max-width:380px;
}
.sales-profile-card img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid var(--red);flex-shrink:0;
}
.sales-profile-placeholder{
  width:64px;height:64px;border-radius:50%;background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  flex-shrink:0;
}
.sales-profile-card strong{display:block;font-size:15px;color:var(--charcoal);}
.sales-profile-card span{display:block;font-size:13px;color:var(--steel);margin-top:2px;}
.navlinks{display:flex;gap:34px;}
.navlinks a{
  color:var(--silver);font-size:14px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.04em;
  transition:color .2s;
}
.navlinks a:hover{color:#fff;}

/* Dropdown menu "Layanan" (mengelompokkan Tentang Saya, Booking Test Drive,
   Testimoni, FAQ) supaya menu utama tidak terlalu padat di desktop */
.has-dropdown{position:relative;}
.dropdown-toggle{
  all:unset;
  cursor:pointer;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:6px;line-height:inherit;
  color:var(--silver);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.04em;transition:color .2s;
}
.dropdown-toggle::after{
  content:'';flex-shrink:0;width:0;height:0;margin-top:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .2s;
}
.dropdown-toggle:hover,.dropdown-toggle.active{color:#fff;}
.has-dropdown.active .dropdown-toggle{color:var(--red);}
.has-dropdown.open .dropdown-toggle::after,
.has-dropdown:hover .dropdown-toggle::after{transform:rotate(180deg);}
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 20px);left:0;
  min-width:210px;background:var(--charcoal);border:1px solid var(--steel-line);
  flex-direction:column;padding:8px 0;gap:0;z-index:80;
}
.has-dropdown.open .dropdown-menu{display:flex;}

/* Di perangkat dengan mouse (bukan layar sentuh), dropdown langsung
   terbuka saat kursor diarahkan ke tombolnya — tidak perlu diklik. */
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown-menu{display:flex;}
}
.dropdown-menu a{
  padding:11px 20px;font-size:13px;display:block;color:var(--silver);
  text-transform:uppercase;letter-spacing:0.03em;
}
.dropdown-menu a:hover{color:#fff;background:var(--asphalt-2);}
.dropdown-menu a.active{color:var(--red);}

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:transparent;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{
  display:block;width:100%;height:2px;background:#fff;transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:14px;text-transform:uppercase;letter-spacing:0.05em;
  border:none;cursor:pointer;transition:transform .2s ease, background .2s ease;
}
.btn-primary{background:var(--red-gradient);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.16);}
.btn-primary:hover{background:var(--red-gradient-hover);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.35);}
.btn-ghost:hover{border-color:#fff;transform:translateY(-2px);}
/* Varian untuk dipakai di atas section berlatar TERANG (paper/putih) —
   .btn-ghost teksnya putih jadi tidak kelihatan di sana. */
.btn-ghost-dark{background:transparent;color:var(--charcoal);border:1.5px solid var(--silver);}
.btn-ghost-dark:hover{border-color:var(--charcoal);transform:translateY(-2px);}
.btn-dark{background:var(--charcoal);color:#fff;}
.btn-dark:hover{background:#000;transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--charcoal);}
.btn-light:hover{background:var(--off-white);transform:translateY(-2px);}

/* ===== MODEL DETAIL PAGE — HERO (template universal semua produk) ===== */
.model-detail-hero{
  position:relative;
  background:
    linear-gradient(100deg, rgba(8,11,17,.95) 0%, rgba(8,11,17,.86) 32%, rgba(8,11,17,.58) 60%, rgba(8,11,17,.32) 100%),
    url('uploads/site/showroom-bg4.jpg') center 78%/cover no-repeat;
  padding-top:136px;padding-bottom:64px;
  border-bottom:1px solid var(--steel-line);
}
@media(max-width:900px){
  .model-detail-hero{
    padding-top:100px;
    background:
      linear-gradient(180deg, rgba(8,11,17,.92) 0%, rgba(8,11,17,.8) 45%, rgba(8,11,17,.55) 100%),
      url('uploads/site/showroom-bg4.jpg') center 82%/cover no-repeat;
  }
}
.model-detail-hero-flex{
  display:flex;align-items:center;justify-content:space-between;gap:48px;
}
.model-detail-copy{flex:1 1 auto;min-width:0;padding-top:20px;}
.model-detail-back{
  display:inline-block;color:var(--silver);font-size:13px;margin-bottom:20px;
  font-family:'JetBrains Mono',monospace;transition:color .2s;
}
.model-detail-back:hover{color:var(--red);}
.model-detail-copy h1{color:#fff;font-size:clamp(32px,4.5vw,54px);line-height:1.08;margin:10px 0 14px;}
.model-detail-hero-desc{color:var(--silver);font-size:15px;line-height:1.75;max-width:520px;margin-bottom:26px;}

.model-hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;}

/* --- Swatch warna (khusus Passenger, lihat model-detail.php) --- */
.model-color-picker{margin-bottom:26px;}
.mcp-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silver);margin-bottom:10px;
}
.mcp-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.mcp-swatch{
  position:relative;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);padding:0;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .18s ease,border-color .18s ease;
}
.mcp-swatch:hover{transform:translateY(-2px) scale(1.08);}
.mcp-swatch.is-active{border-color:#fff;}
.mcp-swatch.is-active::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--red);
}
@media(max-width:900px){
  .mcp-swatches{justify-content:center;}
}

.model-detail-media{
  position:relative;flex:0 0 56%;max-width:800px;
  min-height:520px;display:flex;align-items:center;justify-content:center;
  padding:10px 42px;
}
.model-detail-media::before{
  /* bayangan lantai di bawah mobil — kesan mobil berdiri di atas permukaan.
     Dibuat lembut (blur besar, opacity rendah) dan meredup halus saat foto
     sedang berpindah (lihat .is-sliding, diatur JS) supaya tidak terlihat
     "menempel kaku" saat mobil sedang melintas. */
  content:'';position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:56%;height:24px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 75%);
  filter:blur(5px);
  opacity:1;
  transition:opacity .5s ease;
}
.model-detail-media.is-sliding::before{opacity:.35;}
.model-detail-media img{
  position:relative;
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
}

/* --- Slider foto varian di hero: geser dengan panah tipis (bukan bulat),
   dipakai kalau model ini punya lebih dari 1 foto unik (lihat $heroSlides
   di model-detail.php). --- */
.model-hero-img-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transform:translateX(0) scale(.97);
  filter:blur(0);
  transition:transform .85s cubic-bezier(.16,.6,.24,1),opacity .8s ease,filter .8s ease;
}
.model-hero-img-slide.is-active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;}
/* Masuk dari kanan/kiri dengan sedikit blur — kesan mobil melaju masuk ke
   frame, bukan sekadar fade biasa. Dipicu JS lewat kelas ini (lihat
   assets/script.js), lalu ditransisikan ke .is-active pada frame berikutnya.
   Jarak & blur dibuat halus (bukan lompatan tajam) supaya terasa mengalir. */
.model-hero-img-slide.is-enter-right{transform:translateX(30%) scale(.97);opacity:0;filter:blur(4px);}
.model-hero-img-slide.is-enter-left{transform:translateX(-30%) scale(.97);opacity:0;filter:blur(4px);}
.model-hero-img-slide.is-leave-right{transform:translateX(30%) scale(.97);opacity:0;filter:blur(3px);}
.model-hero-img-slide.is-leave-left{transform:translateX(-30%) scale(.97);opacity:0;filter:blur(3px);}
.model-hero-img-slide img{
  position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
}
.model-hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;align-items:center;justify-content:center;
  width:44px;height:64px;padding:0;border:none;background:transparent;
  color:rgba(255,255,255,.55);cursor:pointer;
  transition:color .25s ease,opacity .25s ease,transform .18s ease;
  opacity:.65;
}
.model-hero-arrow:hover{color:#fff;opacity:1;}
.model-hero-arrow:active{transform:translateY(-50%) scale(.82);}
.model-hero-prev{left:0;}
.model-hero-prev:hover{transform:translateY(-50%) translateX(-3px);}
.model-hero-prev:active{transform:translateY(-50%) translateX(-3px) scale(.82);}
.model-hero-next{right:0;}
.model-hero-next:hover{transform:translateY(-50%) translateX(3px);}
.model-hero-next:active{transform:translateY(-50%) translateX(3px) scale(.82);}
.model-hero-arrow svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .3s ease-out;}
/* Denyut merah singkat saat diklik (lihat JS: kelas is-clicked ditambah
   lalu dilepas otomatis) — efek "tap" yang terasa premium tanpa mengubah
   bentuk tombol jadi bulat permanen. */
.model-hero-arrow.is-clicked{color:var(--red);}
.model-hero-arrow.is-clicked svg{transform:scale(1.12);}
@media(prefers-reduced-motion:reduce){
  .model-hero-img-slide{transition:none;}
  .model-hero-arrow svg{transition:none;}
}
@media(max-width:900px){
  .model-detail-hero-flex{flex-direction:column;text-align:center;gap:8px;}
  .model-detail-copy{padding-top:0;}
  .model-detail-hero-desc{margin-left:auto;margin-right:auto;}
  .model-hero-cta-row{justify-content:center;}
  .model-detail-media{min-height:340px;max-width:100%;width:100%;padding:4px 28px;}
  .model-badges-row{justify-content:center;}
  .model-hero-arrow{width:34px;height:52px;}
  .model-hero-prev{left:0;}
  .model-hero-next{right:0;}
}

.model-varian-dropdown-wrap{position:relative;display:inline-block;}
.model-varian-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 18px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.03em;
  color:#fff;transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.model-varian-pill svg{color:var(--red);flex-shrink:0;}
.model-varian-pill .mvp-arrow{transition:transform .25s ease;}
.model-varian-pill[aria-expanded="true"]{border-color:var(--red);background:rgba(230,0,18,.12);}
.model-varian-pill[aria-expanded="true"] .mvp-arrow{transform:rotate(180deg);}
.model-varian-pill:hover{border-color:var(--red);background:rgba(230,0,18,.1);color:#fff;}

.model-varian-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  z-index:30;width:320px;max-width:calc(100vw - 48px);max-height:340px;overflow-y:auto;
  background:#12151c;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);padding:8px;
  text-align:left;
}
.mvd-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:10px;
  transition:background .15s ease;
}
a.mvd-item:hover{background:rgba(255,255,255,.07);}
.mvd-item.is-active{background:rgba(230,0,18,.14);}
.mvd-name{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.02em;color:#fff;}
.mvd-price{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--red);font-weight:600;flex-shrink:0;}
.mvd-item.is-active .mvd-price{color:var(--silver);font-weight:400;}

.model-detail-body{background:var(--paper);padding:70px 0;}
.model-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;}
.model-detail-desc-eyebrow{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  font-weight:500;margin-bottom:8px;
}
.model-detail-desc{
  color:var(--asphalt-2);font-size:16px;line-height:1.85;
  margin-bottom:30px;max-width:62ch;
}
.model-detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.model-detail-facts div{
  background:#fff;border:1px solid var(--silver);border-left:3px solid var(--red);
  border-radius:12px;padding:20px 22px;
  box-shadow:0 2px 10px rgba(21,23,27,.04);
  transition:box-shadow .2s ease,transform .2s ease;
}
.model-detail-facts div:hover{box-shadow:0 12px 26px rgba(21,23,27,.09);transform:translateY(-2px);}
.model-detail-facts b{
  display:block;font-family:'Inter',sans-serif;font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);margin-bottom:8px;
}
.model-detail-facts span{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;color:var(--charcoal);}
@media(max-width:480px){
  .model-detail-facts{grid-template-columns:1fr;}
}
.model-detail-cta{
  background:var(--charcoal);padding:36px;position:sticky;top:110px;
}
.model-detail-cta h3{color:#fff;font-size:22px;margin:10px 0 14px;}
.model-detail-cta p{color:var(--silver);font-size:14px;margin-bottom:24px;}

@media(max-width:900px){
  .model-detail-grid{grid-template-columns:1fr;}
  .model-detail-cta{position:static;}
  .model-detail-media{height:400px;}
}

/* ===== CAR SLIDESHOW ===== */
.car-slideshow{
  position:relative;background:var(--charcoal);
  /* padding-bottom:0 SENGAJA menimpa aturan generik "section{padding:110px 0}"
     (lihat SECTION GENERIC di bawah) — slideshow ini full-bleed (foto+dots
     dibuat pas mengisi kotak .slides tanpa sisa), padding bawah 110px
     bawaan itu bikin ada bar kosong warna charcoal di bawah foto sebelum
     section berikutnya, kelihatan seperti "batasan hitam" yang tidak perlu. */
  padding-top:100px;padding-bottom:0;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.car-slideshow .slides{
  position:relative;width:100%;
  aspect-ratio:2.2 / 1;
  overflow:hidden;
}
/* CATATAN: sempat dicoba bikin kotak lebih tinggi khusus HP supaya teks
   tidak tumpuk — dibatalkan (2026-09-02) karena foto pakai object-fit:
   cover, jadi mengubah aspect-ratio box = ikut memotong foto berbeda
   dari komposisi aslinya. Rasio TETAP sama persis di semua ukuran layar;
   masalah teks kepenuhan diatasi lewat ukuran font & jarak yang lebih
   ringkas di media query bawah, bukan lewat bentuk kotaknya. */
.car-slideshow .slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s ease;
  background:
    linear-gradient(180deg,rgba(21,23,27,.04) 0%,rgba(21,23,27,.48) 100%),
    linear-gradient(150deg,var(--asphalt-2),var(--asphalt));
}
.car-slideshow .slide.active{opacity:1;visibility:visible;pointer-events:auto;}
.car-slideshow .slide-media{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.car-slideshow .slide.has-photo .slide-media img{
  width:100%;height:100%;object-fit:cover;opacity:1;
}
.hero-premium-overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:min(100% - 64px,1200px);margin:auto;padding:24px 7%;
  color:#fff;pointer-events:none;
}
.hero-premium-overlay h1{max-width:620px;color:#fff;font-size:clamp(34px,4.8vw,64px);line-height:1.02;margin:0 0 16px;text-wrap:balance;}
.hero-premium-overlay > p{max-width:560px;color:#fff;font-size:clamp(15px,1.35vw,19px);line-height:1.6;margin:0 0 26px;text-shadow:0 2px 16px rgba(0,0,0,.45);}
.hero-premium-actions{display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto;}
.hero-premium-actions .btn{min-height:40px;padding:10px 20px;font-size:13px;border-radius:8px;}
.hero-slide-context{
  position:absolute;left:50%;bottom:9%;z-index:2;transform:translateX(-50%);
  width:min(100% - 64px,1200px);padding:0 7%;color:#fff;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
}
.car-slideshow .slide.active .hero-slide-context{opacity:1;}
.hero-slide-context span{display:block;color:var(--red);font-family:'Oswald',sans-serif;font-size:30px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.55);}
.hero-slide-context p{max-width:520px;margin:8px 0 0;color:rgba(255,255,255,.86);font-size:15px;line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.55);}
/* Tombol CTA per-slide (opsional, diisi admin lewat "Tautan Tombol" +
   "Teks Tombol" di form Slideshow) — .hero-slide-context sendiri
   pointer-events:none (biar tidak menghalangi klik tombol panah/dots di
   belakangnya), jadi tombolnya perlu pointer-events:auto sendiri. */
.hero-slide-cta{
  display:inline-block;margin-top:18px;pointer-events:auto;
  background:transparent;
  border:1.5px solid #fff;
  color:#fff;box-shadow:none;
}
.hero-slide-cta:hover{background:#fff;border-color:#fff;color:#000;transform:none;}
.car-slideshow .slide-caption{
  position:relative;z-index:2;text-align:center;
}
.slide-eyebrow{
  font-family:'JetBrains Mono',monospace;color:var(--red);
  font-size:13px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px;display:block;
}
.car-slideshow .slide-caption h2{
  color:#fff;font-size:clamp(32px,5vw,56px);line-height:1.05;margin-bottom:12px;
}
.car-slideshow .slide-caption p{
  color:var(--silver);font-size:16px;
}
.car-slideshow .slide-caption p a{color:var(--red);font-weight:600;}
/* Dots melayang langsung di atas foto slideshow, tanpa gradasi/scrim
   gelap di baliknya lagi (sempat ada, tapi kelihatan seperti noda/blur
   hitam memanjang di foto — dihapus, dot-nya sendiri sudah cukup
   kontras karena punya warna solid, lihat .slide-dots .dot). */
.slide-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:0 32px 22px;
  pointer-events:none;
}
.slide-nav .slide-dots{pointer-events:auto;}
.slide-arrow{
  background:rgba(10,11,13,0.42);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.92);
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.28),0 2px 6px rgba(0,0,0,0.18);
  transition:border-color .2s,background .2s,color .2s,transform .15s,box-shadow .2s;
}
.slide-arrow svg{width:17px;height:17px;flex-shrink:0;stroke-width:1.75;}
.slide-arrow:hover{
  border-color:rgba(255,255,255,0.4);
  background:rgba(10,11,13,0.58);
  box-shadow:0 10px 28px rgba(0,0,0,0.32),0 2px 6px rgba(0,0,0,0.2);
}
.slide-arrow:active{
  border-color:rgba(230,0,18,0.7);background:rgba(230,0,18,0.28);color:var(--red);
  transform:scale(0.92);
  box-shadow:0 4px 14px rgba(230,0,18,0.25);
}
.slide-arrow:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* Posisi tombol: sedikit masuk ke dalam sisi kiri/kanan gambar banner */
.car-slideshow .slides > .slide-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
}
.car-slideshow .slides > .slide-arrow:active{transform:translateY(-50%) scale(0.92);}
.car-slideshow .slides > .slide-prev{left:18px;}
.car-slideshow .slides > .slide-next{right:18px;}

@media (hover:hover) and (pointer:fine){
  .slide-arrow{width:42px;height:42px;}
  .slide-arrow svg{width:18px;height:18px;}
}
@media(max-width:640px){
  .car-slideshow .slides > .slide-prev{left:12px;}
  .car-slideshow .slides > .slide-next{right:12px;}
}

.slide-dots{display:flex;gap:10px;}
.slide-dots .dot{
  width:9px;height:9px;border-radius:50%;background:var(--steel-line);border:none;cursor:pointer;
  padding:0;transition:background .2s,transform .2s;
}
.slide-dots .dot.active{background:var(--red);transform:scale(1.2);}
@media(max-width:720px){
  .car-slideshow{padding-top:88px;}
}

/* ===== SALES POSTER ===== */
.sales-poster{background:var(--charcoal);padding:70px 0;}
.sales-poster-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(320px,42%) 1fr;gap:0;
  background:linear-gradient(150deg,var(--asphalt-2),var(--asphalt));
  border:1px solid var(--steel-line);
  clip-path:polygon(0 0,100% 0,100% 100%,4% 100%,0 88%);
}
.sales-poster-photo{
  position:relative;min-height:420px;background:var(--off-white);
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);
}
.sales-poster-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;}
.sales-poster-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 55%,rgba(21,23,27,.5) 96%);
}
.sales-poster-photo-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--steel);font-family:'JetBrains Mono',monospace;font-size:12px;
  text-align:center;padding:20px;
}
.sales-poster-info{padding:56px 60px 56px 46px;color:#fff;}
.sales-poster-brand{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  color:var(--red);text-transform:uppercase;margin-bottom:14px;
}
.sales-poster-info h2{
  font-family:'Oswald',sans-serif;font-size:44px;line-height:1;
  letter-spacing:.01em;margin-bottom:8px;
}
.sales-poster-role{
  display:inline-block;font-family:'Oswald',sans-serif;font-size:14px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--silver);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--steel-line);
}
.sales-poster-info p{color:var(--silver);font-size:14.5px;max-width:520px;margin-bottom:22px;}
.sales-poster-info .info-line{border-top-color:rgba(255,255,255,.15);color:#fff;max-width:520px;align-items:flex-start;}
.sales-poster-info .info-line b{min-width:90px;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;padding-top:1px;}
.sales-poster-promo{
  display:block;max-width:520px;margin:22px 0 26px;padding:16px 20px;
  background:rgba(230,0,18,0.12);border:1px solid rgba(230,0,18,0.4);
  text-decoration:none;transition:background .2s ease;
}
.sales-poster-promo:hover{background:rgba(230,0,18,0.2);}
.sales-poster-promo .tag{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--red);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.sales-poster-promo strong{display:block;color:#fff;font-size:16px;margin-bottom:8px;}
.sales-poster-promo .link{font-size:13px;color:var(--silver);}
.sales-poster-actions{
  display:flex;flex-wrap:wrap;gap:12px;
}
/* Chat WhatsApp sebagai CTA utama: lebih besar, selebar baris,
   diberi sedikit glow merah supaya jadi fokus utama mata. */
.sales-poster-cta{
  flex:1 1 100%;
  padding:17px 26px;font-size:15px;letter-spacing:0.06em;
  box-shadow:0 10px 26px rgba(230,0,18,0.28);
}
.sales-poster-cta:hover{box-shadow:0 12px 30px rgba(230,0,18,0.38);}
/* Telepon & Booking Test Drive: baris kedua, tetap jelas & mudah
   ditemukan tapi berperan sebagai aksi sekunder. */
.sales-poster-actions .btn-light{
  flex:1 1 calc(50% - 6px);
  border:1px solid rgba(255,255,255,0.14);
}
@media(max-width:520px){
  .sales-poster-actions .btn-light{flex:1 1 100%;}
}
@media(max-width:720px){
  .sales-poster{padding:0;}
  .sales-poster-card{grid-template-columns:1fr;clip-path:none;}
  .sales-poster-photo{min-height:360px;clip-path:none;}
  .sales-poster-photo::after{background:linear-gradient(to bottom,transparent 60%,rgba(21,23,27,.55) 100%);}
  .sales-poster-info{padding:36px 26px 40px;}
  .sales-poster-info h2{font-size:32px;}
}

/* ===== TENTANG SAYA — Premium Profile Card (khusus tentang-saya.php) =====
   Referensi visual: "Profil Sales Executive" (.executive-*) di Beranda +
   Mercedes-Benz/BMW/Lexus Indonesia. Dibuat dgn class baru (prefix
   .about-) supaya TIDAK mengubah .sales-poster* (masih dipakai di
   simulasi-kredit.php) ataupun .executive-* di Beranda — murni visual
   untuk halaman ini, data/URL/SEO/schema/fungsi WhatsApp tidak berubah. */

@keyframes aboutFadeUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}

.about-profile-section{
  position:relative;overflow:hidden;
  padding:96px 0 110px;
  background:linear-gradient(165deg,#020617 0%,#0b1220 55%,#050810 100%);
}
.about-profile-glow{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);
}
.about-profile-glow-1{
  width:520px;height:520px;top:-180px;right:-120px;
  background:radial-gradient(circle,rgba(230,0,18,.28) 0%,transparent 70%);
}
.about-profile-glow-2{
  width:420px;height:420px;bottom:-160px;left:-100px;
  background:radial-gradient(circle,rgba(59,90,170,.22) 0%,transparent 70%);
}

.about-profile-card{
  position:relative;z-index:1;
  display:grid;grid-template-columns:45% 55%;align-items:stretch;
  border-radius:24px;overflow:hidden;
  background:rgba(15,23,42,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  animation:aboutFadeUp .7s ease both;
  transition:transform .4s ease,box-shadow .4s ease;
}
.about-profile-card:hover{
  transform:translateY(-4px);
  box-shadow:0 50px 120px rgba(0,0,0,.62);
}

/* --- Foto --- */
.about-profile-photo{
  position:relative;min-height:620px;background:#0b1220;overflow:hidden;
}
.about-profile-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;
  transition:transform .6s ease;
}
.about-profile-card:hover .about-profile-photo img{transform:scale(1.05);}
.about-profile-photo-placeholder{
  width:100%;height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;
  color:var(--steel);font-family:'JetBrains Mono',monospace;font-size:12px;text-align:center;padding:20px;
}
.about-profile-photo-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(2,6,23,.85) 0%,rgba(2,6,23,.1) 45%,transparent 70%);
}
.about-profile-photo-badge{
  position:absolute;left:24px;top:24px;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);color:#fff;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
}
.about-profile-photo-badge svg{color:var(--red);flex-shrink:0;}

/* --- Info --- */
.about-profile-info{padding:64px 60px;color:#e2e8f0;}
.about-profile-brand{
  display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:16px;
  animation:aboutFadeUp .6s ease both;animation-delay:.05s;
}
.about-profile-name{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(30px,4vw,48px);
  line-height:1.08;letter-spacing:-.01em;color:#fff;margin-bottom:10px;text-transform:none;
  animation:aboutFadeUp .6s ease both;animation-delay:.1s;
}
.about-profile-role{
  display:inline-block;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;
  padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);
  animation:aboutFadeUp .6s ease both;animation-delay:.15s;
}
.about-profile-desc{
  max-width:600px;line-height:1.8;color:#cbd5e1;font-size:15.5px;margin-bottom:24px;
  animation:aboutFadeUp .6s ease both;animation-delay:.2s;
}
.about-profile-experience{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(230,0,18,.12);border:1px solid rgba(230,0,18,.35);color:#fff;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
  padding:10px 16px;border-radius:10px;margin-bottom:28px;
  animation:aboutFadeUp .6s ease both;animation-delay:.25s;
}
.about-profile-experience svg{color:var(--red);flex-shrink:0;}

.about-contact-list{
  display:flex;flex-direction:column;gap:18px;max-width:600px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:24px;margin-bottom:28px;
  animation:aboutFadeUp .6s ease both;animation-delay:.3s;
}
.about-contact-item{display:flex;align-items:flex-start;gap:14px;}
.about-contact-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(230,0,18,.14);color:var(--red);
}
.about-contact-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.about-contact-label{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;
}
.about-contact-value{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;color:#fff;}

.about-trust-badges{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;
  animation:aboutFadeUp .6s ease both;animation-delay:.35s;
}
.about-trust-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#e2e8f0;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;
}
.about-trust-badge svg{color:var(--red);flex-shrink:0;}

.about-profile-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  animation:aboutFadeUp .6s ease both;animation-delay:.4s;
}
.about-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:54px;padding:0 30px;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.about-btn-wa{
  background:var(--red-gradient);color:#fff;
  box-shadow:0 14px 34px rgba(230,0,18,.35);
}
.about-btn-wa:hover{background:var(--red-gradient-hover);transform:translateY(-2px);box-shadow:0 18px 40px rgba(230,0,18,.45);}
.about-btn-tel{
  background:rgba(255,255,255,.04);color:#fff;border:1.5px solid rgba(255,255,255,.25);
}
.about-btn-tel:hover{background:rgba(255,255,255,.09);border-color:#fff;transform:translateY(-2px);}

@media(max-width:960px){
  .about-profile-card{grid-template-columns:1fr;}
  .about-profile-photo{min-height:380px;}
  .about-profile-info{padding:44px 40px;}
  .about-profile-name{font-size:34px;}
}
@media(max-width:640px){
  .about-profile-section{padding:56px 0 64px;}
  .about-profile-glow-1,.about-profile-glow-2{width:300px;height:300px;}
  .about-profile-photo{min-height:300px;}
  .about-profile-info{padding:32px 22px;}
  .about-profile-name{font-size:27px;}
  .about-contact-list{padding:18px;gap:16px;}
  .about-profile-actions{flex-direction:column;}
  .about-btn{width:100%;}
}

/* ===== SECTION GENERIC ===== */
section{padding:110px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;flex-wrap:wrap;gap:20px;
}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}
.section-head p{color:var(--steel);max-width:380px;font-size:15px;}

/* ===== MODELS (redesign 2026) ===== */
.models{background:var(--paper);padding:80px 0;}
.models-head{margin-bottom:40px;}
.models .wrap{padding-left:32px;padding-right:32px;max-width:1320px;}

/* Tabs */
.model-tabs{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:var(--off-white);margin-bottom:48px;
}
.model-tab-btn{
  padding:12px 26px;border-radius:999px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--steel);background:transparent;border:none;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.model-tab-btn.is-active{background:#000 !important;color:#fff !important;}
.model-tab-btn:hover:not(.is-active){color:var(--charcoal);}

/* Panels: hanya satu kategori tampil sekaligus — klik tab untuk beralih */
.model-panel{display:none;padding:40px 0 0;}
.model-panel.is-active{display:block;}
.model-panel--tint{background:#f8fafc;padding:40px 0;}
.model-panel-title{
  font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--charcoal);margin-bottom:32px;
}

/* Carousel: geser horizontal, bukan grid penuh sekaligus -> mengurangi tumpukan foto */
.model-carousel{position:relative;}
.model-grid{
  display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
  padding:4px 4px 8px;margin:-4px -4px 0;
}
.model-grid::-webkit-scrollbar{display:none;}
.model-grid.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none;}

/* Navigasi carousel di bawah daftar: dot progress + link "Lihat Semua Model" */
.model-nav{
  display:flex;align-items:center;justify-content:center;position:relative;
  margin-top:32px;
}
.model-dots{display:inline-flex;align-items:center;position:relative;gap:6px;}
.model-dot{
  position:relative;z-index:1;width:26px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;
}
.model-dot span{
  display:block;width:9px;height:9px;border-radius:50%;
  background:#fff;border:1.5px solid var(--silver);transition:all .25s ease;
}
.model-dot.is-active span{
  width:12px;height:12px;background:var(--red);border-color:var(--red);
}
.model-dot:hover:not(.is-active) span{border-color:var(--steel);}
.model-seeall{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--red);white-space:nowrap;
  transition:gap .2s ease;
}
.model-seeall:hover{gap:10px;}

/* Card: lebar tetap supaya carousel konsisten (bukan stretch mengisi baris).
   Photo-first: mobil sebagai fokus utama — tanpa kotak putih, tanpa border.
   Hero-style: mobil dominan, berdiri di atas lantai, ada bayangan + refleksi. */
.model-card{
  flex:0 0 calc((100% - 64px) / 3);scroll-snap-align:start;
  background:#fff;border:1px solid var(--silver);border-radius:20px;
  box-shadow:0 16px 40px rgba(21,23,27,.06);
  padding:18px 18px 14px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.model-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(21,23,27,.1);
}

/* Commercial Vehicle (niaga) di beranda — 1 kartu penuh per tampilan,
   sisanya "mengintip" sedikit di kanan supaya kelihatan masih bisa digeser. */
.model-panel--tint .model-card{flex:0 0 82%;max-width:560px;}
@media (min-width:901px) and (max-width:1024px){
  .model-panel--tint .model-card{flex-basis:80%;}
}
@media (max-width:900px){
  .model-panel--tint .model-card{flex-basis:86%;max-width:none;}
}

.model-card-media{
  position:relative;display:block;width:100%;
  aspect-ratio:4/3;overflow:visible;border-radius:14px;
  background:url('uploads/site/promo-road-skyline.webp') center 42%/cover no-repeat;
}
.model-card-media img{
  width:100%;height:100%;object-fit:contain;
  /* Clean professional look — subtle floor shadow only */
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
  padding:4px 8px 0;
  transform:translateY(0);
  transition:transform .3s ease,filter .3s ease;
  pointer-events:none;
  -webkit-box-reflect:below 1px linear-gradient(transparent,transparent 80%,rgba(0,0,0,.03));
}
.model-card:hover .model-card-media img{
  transform:translateY(-4px);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.12));
}
/* Premium accent line — subtle, positioned like shadow under tires */
/* Premium soft shadow — bayangan lembut & elegan di bawah ban, tanpa aksen warna */
.model-card-media::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:15%;width:58%;height:10px;
  background:radial-gradient(ellipse at center, rgba(15,17,21,.35) 0%, rgba(15,17,21,.15) 45%, transparent 75%);
  filter:blur(5px);
  pointer-events:none;
}
.model-shape-slideshow img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:4px 8px 0;
  /* Clean professional look — consistent with .model-card-media img */
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
  -webkit-box-reflect:below 2px linear-gradient(transparent,transparent 70%,rgba(0,0,0,.05));
  transform:translateY(0);
  opacity:0;transition:opacity 1s ease,transform .3s ease,filter .3s ease;
}
.model-shape-slideshow img.active{opacity:1;}
.model-card:hover .model-shape-slideshow img{
  transform:translateY(-8px);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.12));
}
.model-card-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:18px;white-space:nowrap;
  padding:0 8px;border-radius:999px;
  background:rgba(230,0,18,.85);
  color:#fff;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.model-card-body{padding:16px 2px 4px;}
.model-card-title{font-size:22px;margin-bottom:8px;}
.model-card-title a{color:inherit;transition:color .2s;}
.model-card-title a:hover{color:var(--red);}
/* Baris spesifikasi ringkas (mis. "7 Penumpang · Automatic · 1.5L MIVEC")
   — diambil dari data "Quick Spec" yang sudah diisi admin per model,
   bukan data baru/hardcode. */
.model-card-specs{
  display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0;
}
.model-card-specs li{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--charcoal);
  background:var(--off-white);border:1px solid var(--silver);
  border-radius:20px;padding:4px 10px 4px 8px;line-height:1.3;
}
.model-card-specs li svg{width:13px;height:13px;color:var(--red);flex-shrink:0;}
.model-card-price{
  display:flex;align-items:baseline;gap:8px;margin-bottom:12px;
}
.model-card-price span{font-size:13px;color:var(--steel);}
.model-card-price strong{
  font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--charcoal);
}
.model-card-actions{display:flex;gap:12px;}
.model-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:12px;font-size:14px;font-weight:600;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.model-btn-detail{border:1px solid var(--charcoal);background:var(--charcoal);color:#fff;}
.model-btn-detail:hover{border-color:var(--charcoal);background:#000;}
.model-btn-wa{
  background:var(--red-gradient);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.16);
  color:#fff;
}
.model-btn-wa:hover{
  background:var(--red-gradient-hover);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.2);
}
.model-btn-wa svg{width:16px;height:16px;fill:#fff;flex-shrink:0;}

/* Passenger Cars: fixed Featured Vehicle + supporting model composition. */
.model-panel--passenger .passenger-feature-layout{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px;align-items:stretch;
}
.model-panel--passenger .passenger-featured-card{
  display:flex;flex-direction:column;border-radius:20px;
  overflow:visible;
}
.model-panel--passenger .passenger-featured-card .model-card-media{aspect-ratio:16/10;}
.model-panel--passenger .passenger-featured-card .model-card-media img{padding:10px 14px 0;transition:transform .3s ease,filter .3s ease;}
.model-panel--passenger .passenger-featured-card .model-card-body{padding:20px 8px 8px;}
.model-panel--passenger .passenger-featured-card .model-card-title{font-size:30px;margin-bottom:8px;}
.passenger-positioning{
  color:var(--steel);font-size:14px;line-height:1.65;min-height:46px;margin:0 0 12px;
}
.model-panel--passenger .passenger-featured-card .model-card-actions{margin-top:auto;}
.model-panel--passenger .passenger-featured-card .model-btn-wa{order:-1;}
.model-panel--passenger .passenger-supporting-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0;
}
.model-panel--passenger .passenger-supporting-card{border-radius:16px;}
.model-panel--passenger .passenger-supporting-card .model-card-media{aspect-ratio:4/3;}
.model-panel--passenger .passenger-supporting-card .model-card-media img{padding:8px 8px 0;}
.model-panel--passenger .passenger-supporting-card .model-card-body{padding:16px 4px 4px;}
.model-panel--passenger .passenger-supporting-card .model-card-title{font-size:18px;margin-bottom:8px;}
.model-panel--passenger .passenger-supporting-card .model-card-price{display:block;margin-bottom:12px;}
.model-panel--passenger .passenger-supporting-card .model-card-price span{display:block;margin-bottom:3px;}
.model-panel--passenger .passenger-supporting-card .model-card-price strong{font-size:18px;}
.model-panel--passenger .passenger-supporting-card .model-card-actions{gap:8px;}
.model-panel--passenger .passenger-supporting-card .model-btn{padding:10px 8px;font-size:12px;}
.model-panel--passenger .passenger-supporting-card .model-btn-wa{flex:0 0 42px;font-size:0;}
.model-panel--passenger .passenger-supporting-card .model-btn-wa svg{width:16px;height:16px;}
.model-panel--passenger .passenger-featured-card:hover{transform:translateY(-6px);}
.model-panel--passenger .passenger-featured-card:hover .model-card-media img{transform:translateY(-8px);}
.model-panel--passenger .passenger-supporting-card:hover{transform:translateY(-4px);}
.model-panel--passenger .passenger-supporting-card:hover .model-card-media img{transform:translateY(-8px);}

/* ===== Harga premium khusus card beranda (class .home-price hanya ada di index.php) ===== */
/* "Mulai dari" selalu di baris sendiri tepat di bawah nama mobil, harga besar di bawahnya */
.home-price{
  display:block;margin-bottom:14px;
}
.home-price span{
  display:block;margin-bottom:5px;
  font-size:12.5px;font-weight:500;color:var(--steel);
  letter-spacing:.08em;text-transform:uppercase;
}
.home-price strong{
  font-family:'Inter',sans-serif;font-size:clamp(26px,4vw,37px);
  font-weight:800;color:var(--charcoal);line-height:1.08;letter-spacing:-.01em;
  white-space:nowrap;
}
.model-panel--passenger .passenger-supporting-card .home-price strong{font-size:clamp(26px,2.4vw,30px);}
.model-panel--passenger .passenger-supporting-card .home-price span{margin-bottom:2px;}
/* Khusus desktop (4 card sejajar, lebih sempit per-card): "Rp 296 Juta"
   bisa kepotong jadi 2 baris ("Juta" turun sendiri) di ukuran 26-30px.
   Diperkecil sedikit KHUSUS di lebar ini supaya muat 1 baris — tampilan
   HP (grid 2 kolom / scroll horizontal, card lebih lega) tidak disentuh. */
@media(min-width:901px){
  .model-panel--passenger .passenger-supporting-card .home-price strong{font-size:clamp(21px,1.7vw,26px);}
}

@media(max-width:900px){
  .model-panel--passenger .passenger-feature-layout{display:block;}
  .model-panel--passenger .passenger-featured-card{margin-bottom:28px;}
  .model-panel--passenger .passenger-supporting-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}
@media(max-width:560px){
  .model-panel--passenger .passenger-featured-card .model-card-media{aspect-ratio:4/3;}
  .model-panel--passenger .passenger-featured-card .model-card-media img{padding:10px 10px 0;}
  .model-panel--passenger .passenger-featured-card .model-card-body{padding:20px 8px 8px;}
  .model-panel--passenger .passenger-featured-card .model-card-title{font-size:25px;}
  .passenger-positioning{min-height:0;}
  .model-panel--passenger .passenger-featured-card .model-card-actions{flex-direction:column;}
  .model-panel--passenger .passenger-supporting-grid{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:4px 4px 8px;margin:-4px -4px 0;
  }
  .model-panel--passenger .passenger-supporting-grid::-webkit-scrollbar{display:none;}
  .model-panel--passenger .passenger-supporting-card{flex:0 0 min(82vw,320px);scroll-snap-align:start;}
}

@media (max-width:900px){
  .models{padding:56px 0;}
  .models .wrap{padding-left:20px;padding-right:20px;}
  .model-tabs{margin-bottom:40px;width:100%;overflow-x:auto;}
  .model-grid{gap:20px;}
  .model-card{flex-basis:calc((100% - 20px) / 2);max-width:none;}
  .model-panel--tint{padding:32px 0;}
  .model-card-body{padding:20px;}
  .model-card-actions{flex-direction:column;}
  .model-nav{flex-direction:column;gap:16px;margin-top:24px;}
  .model-seeall{position:static;transform:none;}
}

.model-varian-list{
  list-style:none;margin:0 0 14px;padding:0;
  border-top:1px dashed var(--silver);padding-top:12px;
}
.model-varian-list li + li{margin-top:2px;}
.model-varian-list a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 10px;font-size:13px;color:var(--charcoal);
  border-radius:2px;transition:background .2s ease;
}
.model-varian-list a:hover{background:var(--off-white);}
.model-varian-list a span:first-child{font-weight:600;}
.model-varian-list .v-harga{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--steel);white-space:nowrap;
}
.model-varian-list a:hover .v-harga{color:var(--red);}

/* ===== PROMO ===== */
.promo{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#0d1017 0%,#181c24 60%,#20242c 100%);
  padding:70px 0;
}
.promo::before{
  content:'';position:absolute;top:-160px;left:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.16) 0%,transparent 72%);pointer-events:none;
}
.promo-inner{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;
}
.promo-inner h2{color:#fff;font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.15;max-width:560px;text-transform:uppercase;}
.promo-inner h2 span{color:var(--red);}
.promo-inner .promo-ringkasan{color:var(--silver);font-size:14.5px;line-height:1.6;max-width:460px;margin-top:14px;}
.promo-eyebrow{
  display:inline-block;
  background:var(--red);color:#fff;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 18px;margin-bottom:18px;border-radius:999px;
  box-shadow:0 3px 10px rgba(230,0,18,.25);
}
.promo-inner p.deadline{
  display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  color:#fff;background:rgba(230,0,18,.9);
  padding:5px 12px;border-radius:999px;margin-top:12px;
}
.promo-inner p.deadline.deadline-plain{
  background:none;color:var(--silver);padding:0;border-radius:0;margin-top:10px;
}
@media(max-width:640px){
  .promo-inner h2{font-size:22px;}
  .promo-eyebrow{font-size:11px;padding:6px 14px;}
  .promo-inner .dw-actions .btn{padding:10px 18px;font-size:12px;}
}

/* ===== SIMULATOR ===== */
.simulator{background:var(--off-white);padding:70px 0 80px;}
.sim-box{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:#fff;border:1px solid var(--silver);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(21,23,27,.08);
}
.sim-controls{padding:48px;border-right:1px solid var(--silver);}
.sim-result{
  position:relative;overflow:hidden;
  padding:48px;color:#fff;
  background:linear-gradient(155deg,#0d1017 0%,#181c24 60%,#20242c 100%);
}
.sim-result::before{
  content:'';position:absolute;top:-140px;right:-110px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.16) 0%,transparent 72%);pointer-events:none;
}
.field{margin-bottom:30px;}
.field label{
  display:flex;justify-content:space-between;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:10px;
}
.field label b{font-family:'JetBrains Mono',monospace;color:var(--charcoal);font-size:14px;}

/* Field dengan nilai teks panjang (mis. nama varian + harga) — label &
   value ditumpuk vertikal supaya tidak tertimpa/berhimpit seperti
   layout default (justify-content:space-between) saat teksnya panjang. */
.field--stack label{display:block;}
.field--stack label b{
  display:block;margin-top:6px;font-size:15px;letter-spacing:0;
  text-transform:none;white-space:normal;line-height:1.4;
}

/* Slider DP & tenor — track terisi warna merah sampai posisi thumb
   (--range-progress diatur otomatis oleh JS di assets/script.js setiap
   nilai berubah, lihat setRangeProgress()), bukan cuma garis abu polos. */
input[type=range]{
  width:100%;height:6px;border-radius:999px;appearance:none;outline:none;
  background:linear-gradient(to right, var(--red) var(--range-progress,20%), var(--silver) var(--range-progress,20%));
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:20px;height:20px;background:#fff;border:3px solid var(--red);
  border-radius:50%;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;background:#fff;border:3px solid var(--red);
  border-radius:50%;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--silver);}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--red);}

select{
  width:100%;padding:12px;border:1px solid var(--silver);background:#fff;
  font-family:'Inter',sans-serif;font-size:14px;
}
.sim-result .label{position:relative;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);}
.sim-result .amount{
  position:relative;font-family:'Oswald',sans-serif;font-weight:700;
  font-size:46px;letter-spacing:.01em;color:#fff;margin:8px 0 30px;
}
.sim-result .amount span{font-size:18px;color:var(--red);}
.sim-row{position:relative;display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px;}
.sim-row span:first-child{color:var(--silver);}
.sim-row span:last-child{font-family:'JetBrains Mono',monospace;color:#fff;}
.sim-disclaimer{max-width:760px;margin:22px auto 0;font-size:12.5px;line-height:1.6;color:var(--steel);text-align:center;}

/* ===== ADVANTAGES ===== */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
.adv-item .num{font-family:'JetBrains Mono',monospace;color:var(--red);font-size:13px;margin-bottom:16px;}
.adv-item .num svg{width:30px;height:30px;display:block;}
.adv-item h3{font-size:18px;margin-bottom:10px;}
.adv-item p{font-size:14px;color:var(--steel);}

/* ===== TESTIMONIALS "PELANGGAN MITSUBISHI" — premium otomotif: foto
   pelanggan asli sebagai visual utama (bukan avatar kecil), TIDAK ada
   teks ditumpuk di atas foto (teks selalu di panel terpisah di bawah
   foto), logo Mitsubishi kecil sebagai watermark di pojok foto. Palet
   putih/hitam/abu + aksen merah, sengaja tidak ramai. ===== */
.testi{background:var(--off-white);color:var(--charcoal);}
.testi .section-head h2{color:var(--charcoal);}
.testi .section-head p{color:var(--steel);}

/* Carousel: geser horizontal + tombol panah, dipakai kalau kartu testimoni
   lebih banyak dari yang muat sekaligus — pola sama dengan carousel model
   di beranda. */
.testi-carousel{position:relative;}
.testi-grid{
  display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
  padding:4px 4px 8px;margin:-4px -4px 0;
}
.testi-grid::-webkit-scrollbar{display:none;}
.testi-grid.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none;}

.cust-card{
  flex:0 0 calc((100% - 56px) / 3);scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--silver);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 28px rgba(21,23,27,.06);
  transition:transform .3s ease,box-shadow .3s ease;
}
.cust-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(21,23,27,.12);}

.testi-arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:20;
  background:#fff;border:1px solid var(--silver);color:var(--charcoal);
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(21,23,27,.12);
  transition:border-color .2s,color .2s,transform .15s;
}
.testi-arrow:hover{border-color:var(--red);color:var(--red);}
.testi-arrow:active{transform:translateY(-50%) scale(.92);}
.testi-arrow[disabled]{opacity:.35;pointer-events:none;}
.testi-arrow-prev{left:-21px;}
.testi-arrow-next{right:-21px;}
@media(max-width:1100px){
  .testi-arrow-prev{left:-8px;}
  .testi-arrow-next{right:-8px;}
}
@media(max-width:900px){
  .cust-card{flex-basis:100%;}
  .testi-arrow{display:none;}
}

/* --- Foto pelanggan: visual utama, potret (4:5), tanpa teks di atasnya.
   Fallback abu-abu netral (inisial huruf) kalau belum ada foto. --- */
.cust-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--off-white);}
.cust-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.cust-card:hover .cust-photo img{transform:scale(1.05);}
.cust-photo-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--off-white);
  font-family:'Oswald',sans-serif;font-size:52px;font-weight:600;color:var(--silver);
}
.cust-logo{
  position:absolute;bottom:14px;right:14px;width:24px;height:24px;
  color:var(--red);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.35));
  pointer-events:none;
}

/* --- Panel konten: terpisah dari foto, latar putih bersih. --- */
.cust-body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1;}
.cust-lokasi{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin-bottom:14px;
}
.cust-lokasi svg{width:11px;height:11px;flex-shrink:0;}
.cust-quote-icon{display:block;width:24px;height:24px;margin-bottom:10px;color:var(--silver);}
.cust-quote{
  font-size:14.5px;line-height:1.7;color:var(--asphalt-2);
  margin-bottom:20px;min-height:80px;
}
.cust-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--steel-line);
}
.cust-foot strong{display:block;font-size:14.5px;color:var(--charcoal);letter-spacing:.01em;}
.cust-foot span{display:block;font-size:12.5px;color:var(--steel);margin-top:2px;}
.cust-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel);white-space:nowrap;flex-shrink:0;}

/* ===== FAQ (halaman khusus faq.php) ===== */
.faq-page{
  position:relative;overflow:hidden;
  padding:80px 0 90px;background:var(--paper);
}
.faq-page::before{
  content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.06) 0%,transparent 70%);
  pointer-events:none;
}
.faq-list{position:relative;max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:#fff;border:1px solid var(--silver);border-radius:14px;
  padding:22px 26px;box-shadow:0 4px 14px rgba(21,23,27,.04);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{border-color:var(--red);box-shadow:0 10px 26px rgba(21,23,27,.08);}
.faq-item[open]{border-color:var(--red);box-shadow:0 14px 32px rgba(230,0,18,.08);}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  font-family:'Oswald',sans-serif;font-size:16px;text-transform:none;letter-spacing:0;color:var(--charcoal);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q-badge{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:rgba(230,0,18,.1);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
  transition:background .2s ease,color .2s ease;
}
.faq-item[open] .faq-q-badge{background:var(--red-gradient);color:#fff;}
.faq-q-text{flex:1;}
.faq-item summary::after{content:'+';margin-left:auto;font-size:22px;color:var(--red);flex-shrink:0;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{margin-top:16px;padding-left:44px;color:var(--steel);font-size:14px;line-height:1.7;}
@media(max-width:520px){
  .faq-item{padding:18px 20px;}
  .faq-item p{padding-left:0;margin-top:12px;}
}

/* ===== CONTACT ===== */
.maps-embed{
  margin-top:24px;border:1px solid var(--silver);overflow:hidden;
  filter:grayscale(0.15);
}
.maps-embed iframe{display:block;}
/* ===== INFO KONTAK REDESIGN (kontak.php) — kartu + peta 2 kolom ===== */
.ci-section{padding:70px 0 30px;background:var(--paper);}
.ci-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start;}
.ci-col h2{font-size:clamp(24px,3vw,34px);margin:6px 0 14px;}
.ci-lead{color:var(--steel);font-size:15px;line-height:1.7;margin-bottom:26px;max-width:460px;}

.ci-card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--silver);border-radius:14px;padding:20px 22px;margin-bottom:14px;
  box-shadow:0 6px 18px rgba(21,23,27,.04);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ci-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(21,23,27,.08);}
.ci-card b,.ci-cta-card b{display:block;font-size:15px;margin-bottom:4px;}
.ci-card span,.ci-cta-card span{display:block;font-size:14px;color:var(--steel);line-height:1.6;}

.ci-icon{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  background:rgba(230,0,18,0.08);color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.ci-icon svg{width:20px;height:20px;}

.ci-cta-card{
  position:relative;overflow:hidden;
  display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(155deg,#0d1017 0%,#181c24 60%,#20242c 100%);
  border-radius:14px;padding:20px 22px;margin-bottom:24px;
  box-shadow:0 16px 36px rgba(21,23,27,.12);
}
.ci-cta-card::before{
  content:'';position:absolute;top:-80px;right:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.2) 0%,transparent 72%);pointer-events:none;
}
.ci-cta-card b{position:relative;color:#fff;}
.ci-cta-card span{position:relative;color:var(--silver);}
.ci-icon-wa{position:relative;background:var(--red-gradient);color:#fff;}
.ci-icon-wa svg{width:18px;height:18px;}

.ci-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.ci-actions .btn{border-radius:10px;}

.ci-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:#fff;border:1px solid var(--silver);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px rgba(21,23,27,.04);
}
.ci-strip > div{
  display:flex;align-items:center;gap:10px;padding:18px 16px;
  border-right:1px solid var(--steel-line);
  transition:background .2s ease;
}
.ci-strip > div:hover{background:var(--off-white);}
.ci-strip > div:last-child{border-right:none;}
.ci-strip svg{width:20px;height:20px;color:var(--red);flex-shrink:0;}
.ci-strip b{display:block;font-size:13px;}
.ci-strip span{display:block;font-size:12px;color:var(--steel);}

.ci-map-col{position:sticky;top:110px;}
.ci-map-frame{
  position:relative;
  border:1px solid var(--silver);border-radius:14px;overflow:hidden;
  box-shadow:0 16px 40px rgba(21,23,27,.08);
  height:460px;
}
.ci-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

@media (max-width:900px){
  .ci-grid{grid-template-columns:1fr;}
  .ci-map-col{position:static;}
  .ci-map-frame{height:280px;}
  .ci-strip{grid-template-columns:1fr;}
  .ci-strip > div{border-right:none;border-bottom:1px solid var(--steel-line);}
  .ci-strip > div:last-child{border-bottom:none;}
}

.contact{background:var(--off-white);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.contact-info h3{font-size:22px;margin-bottom:18px;}
.contact-info p{color:var(--steel);font-size:15px;margin-bottom:26px;max-width:380px;}
.info-line{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--silver);font-size:14px;}
.info-line b{font-family:'JetBrains Mono',monospace;color:var(--red);min-width:110px;display:inline-block;}
form{display:flex;flex-direction:column;gap:18px;position:relative;}
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%;padding:14px 16px;border:1px solid var(--silver);background:#fff;
  font-family:'Inter',sans-serif;font-size:14px;
}
textarea{resize:vertical;min-height:100px;}
/* Input tanggal & jam untuk form Booking Test Drive (Task 2) — menyesuaikan gaya input teks yang sudah ada */
input[type=date],input[type=time]{
  width:100%;padding:14px 16px;border:1px solid var(--silver);background:#fff;
  font-family:'Inter',sans-serif;font-size:14px;
}
form label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:6px;display:block;}
.form-success{
  background:#1f7a3d;color:#fff;padding:16px 20px;font-size:14px;margin-bottom:20px;
}
.form-error{
  background:var(--red-dark);color:#fff;padding:16px 20px;font-size:14px;margin-bottom:20px;
}

/* Honeypot anti-spam: sembunyikan dari pengguna manusia tanpa display:none,
   supaya bot form-filler sederhana yang mengecek visibility tetap "melihat" field ini. */
.hp-check{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* ===== BOOKING TEST DRIVE — khusus halaman ini (booking-test-drive.php).
   Pakai class .booking-page/.booking-info-card/.booking-form supaya TIDAK
   ikut mengubah kontak.php/faq.php/tentang-saya.php/testimoni.php yang
   sama-sama memakai .contact/.contact-grid/.sales-profile-card. ===== */
.booking-page{padding:70px 0 90px;}
.booking-info-card{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#0d1017 0%,#181c24 60%,#20242c 100%);
  color:#fff;border-radius:20px;padding:40px;
  box-shadow:0 20px 50px rgba(21,23,27,.12);
}
.booking-info-card::before{
  content:'';position:absolute;top:-120px;right:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.18) 0%,transparent 72%);pointer-events:none;
}
.booking-info-card .eyebrow{position:relative;}
.booking-info-card h3{position:relative;color:#fff;}
.booking-info-card p{position:relative;color:var(--silver);max-width:440px;}
.booking-info-card .sales-profile-card{
  position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;
}
.booking-info-card .sales-profile-card strong{color:#fff;}
.booking-info-card .info-line{position:relative;border-top-color:rgba(255,255,255,.12);color:#fff;}
.booking-info-card .info-line b{color:var(--red);}
.booking-info-card .maps-embed{
  position:relative;border-radius:14px;border-color:rgba(255,255,255,.14);
}

.booking-form{
  background:#fff;border:1px solid var(--silver);border-radius:20px;
  box-shadow:0 20px 50px rgba(21,23,27,.08);
  padding:40px;
}
.booking-form input[type=text],.booking-form input[type=tel],.booking-form input[type=date],
.booking-form input[type=time],.booking-form select,.booking-form textarea{
  border-radius:10px;
}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.1);
}
.booking-form button{border-radius:10px;}

@media(max-width:900px){
  .booking-info-card,.booking-form{padding:28px;border-radius:16px;}
}

/* ===== KONTAK — khusus halaman ini (kontak.php). Pola sama dengan Booking
   Test Drive (kartu gelap + kartu putih), pakai class sendiri supaya tidak
   ikut mengubah faq.php/tentang-saya.php/testimoni.php. ===== */
.kontak-page{padding:20px 0 90px;}
.kontak-info-card{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#0d1017 0%,#181c24 60%,#20242c 100%);
  color:#fff;border-radius:20px;padding:40px;
  box-shadow:0 20px 50px rgba(21,23,27,.12);
}
.kontak-info-card::before{
  content:'';position:absolute;top:-120px;right:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.18) 0%,transparent 72%);pointer-events:none;
}
.kontak-info-card .eyebrow{position:relative;}
.kontak-info-card h3{position:relative;color:#fff;}
.kontak-info-card p{position:relative;color:var(--silver);max-width:440px;}
.kontak-info-card .sales-profile-card{
  position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;
}
.kontak-info-card .sales-profile-card strong{color:#fff;}
.kontak-info-card .rekening-card{
  position:relative;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);box-shadow:none;
}

.kontak-form{
  background:#fff;border:1px solid var(--silver);border-radius:20px;
  box-shadow:0 20px 50px rgba(21,23,27,.08);
  padding:40px;
}
.kontak-form input[type=text],.kontak-form input[type=tel],.kontak-form select,.kontak-form textarea{
  border-radius:10px;
}
.kontak-form input:focus,.kontak-form select:focus,.kontak-form textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.1);
}
.kontak-form button{border-radius:10px;}

@media(max-width:900px){
  .kontak-info-card,.kontak-form{padding:28px;border-radius:16px;}
}

/* ===== FOOTER ===== */
footer{background:var(--charcoal);color:var(--silver);padding:60px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
footer h4{color:#fff;font-size:15px;margin-bottom:16px;}
footer p{font-size:13px;color:var(--steel);max-width:280px;}
footer ul li{margin-bottom:10px;}
footer ul a{font-size:13px;color:var(--silver);}
footer ul a:hover{color:var(--red);}
.footer-social a{display:inline-flex;align-items:center;gap:9px;}
.footer-social svg{width:17px;height:17px;flex-shrink:0;color:var(--red);}
.footer-bottom{
  border-top:1px solid var(--steel-line);padding-top:24px;
  display:flex;justify-content:space-between;font-size:12px;color:var(--steel);flex-wrap:wrap;gap:10px;
}

/* ===== FADE-IN GAMBAR SAAT TERMUAT — supaya foto tidak "muncul kasar"
   begitu selesai load, transisi opacity singkat. ===== */
img.fade-img{opacity:0;transition:opacity .18s ease-out;}
img.fade-img.is-loaded{opacity:1;}

/* ===== BACK TO TOP — muncul otomatis setelah scroll, kiri-bawah supaya
   tidak bertabrakan dengan widget chatbot (kanan-bawah). ===== */
.back-to-top{
  position:fixed;left:26px;bottom:26px;z-index:200;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--silver);
  background:#fff;color:var(--asphalt);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(21,23,27,.14);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--off-white);}
.back-to-top svg{width:20px;height:20px;}
@media (max-width:640px){
  .back-to-top{left:16px;bottom:16px;width:42px;height:42px;}
}

/* ===== WHATSAPP FLOAT (dipertahankan kalau masih dipakai di file lain) ===== */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:200;
  width:58px;height:58px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}

/* ===== CHATBOT WIDGET — asisten pilihan cepat, menggantikan tombol
   WA bulat polos di posisi yang sama (kanan-bawah). ===== */
.chatbot-widget{position:fixed;bottom:26px;right:26px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.chatbot-launcher{
  width:58px;height:58px;background:#25D366;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .2s ease;
}
.chatbot-launcher:hover{transform:scale(1.08);}

/* Bubble teaser — muncul otomatis beberapa detik setelah halaman dibuka
   untuk mengundang klik, mirip widget WhatsApp resmi. Disembunyikan lewat
   class .is-visible (bukan display default) supaya animasi masuk/keluar
   halus, dan TIDAK pakai atribut [hidden] (pernah jadi bug: CSS class
   lain bisa menimpa default browser [hidden]{display:none}). */
.chatbot-teaser{
  display:none;position:absolute;right:0;bottom:72px;max-width:240px;
  background:#25D366;color:#fff;border-radius:14px 14px 4px 14px;
  padding:12px 30px 12px 16px;font-size:13.5px;font-weight:500;line-height:1.4;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
  cursor:pointer;
}
.chatbot-teaser.is-visible{display:block;opacity:1;transform:none;}
.chatbot-teaser-close{
  position:absolute;top:6px;right:6px;
  width:20px;height:20px;border-radius:50%;border:none;
  background:rgba(255,255,255,.25);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.chatbot-teaser-close:hover{background:rgba(255,255,255,.4);}

.chatbot-panel{
  width:340px;max-width:calc(100vw - 52px);max-height:520px;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  display:none;flex-direction:column;
  animation:chatbotIn .22s ease;
}
/* Class eksplisit, bukan andalkan atribut [hidden] — supaya tidak ada
   selector lain yang bisa "menimpa" display:none via kelas biasa. */
.chatbot-panel.is-open{display:flex;}
@keyframes chatbotIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}

.chatbot-panel-head{
  background:var(--charcoal);color:#fff;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;
}
.chatbot-panel-title{display:flex;align-items:center;gap:10px;}
.chatbot-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--red-gradient);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
}
.chatbot-avatar-photo{object-fit:cover;}
.chatbot-panel-title div{display:flex;flex-direction:column;line-height:1.35;}
.chatbot-panel-title strong{font-size:13.5px;}
.chatbot-panel-title span{font-size:11.5px;color:var(--silver);}
.chatbot-close{
  background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  width:28px;height:28px;flex-shrink:0;opacity:.8;
}
.chatbot-close:hover{opacity:1;}

.chatbot-body{
  padding:16px 16px 18px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:12px;background:#f7f7f9;
}
.chatbot-msg{
  max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;
}
.chatbot-msg-bot{
  align-self:flex-start;background:#fff;color:var(--charcoal);
  border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.chatbot-msg-user{
  align-self:flex-end;background:var(--red-gradient);color:#fff;
  border-bottom-right-radius:4px;
}
.chatbot-options{display:flex;flex-direction:column;gap:8px;}
.chatbot-option{
  text-align:left;background:#fff;border:1.5px solid var(--silver);border-radius:10px;
  padding:10px 14px;font-size:13px;font-weight:600;color:var(--charcoal);
  cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.chatbot-option:hover{border-color:var(--red);background:var(--mitsubishi-red-light);}
.chatbot-action{
  display:block;text-align:center;text-decoration:none;
  background:var(--red-gradient);color:#fff;border-radius:10px;
  padding:10px 14px;font-size:13px;font-weight:600;
}
.chatbot-action.is-secondary{background:#fff;border:1.5px solid var(--silver);color:var(--charcoal);}
.chatbot-action:hover{opacity:.92;}

@media(max-width:900px){
  /* Di HP ada bar merah "sticky-cta" nempel di bawah layar (WhatsApp/
     Kredit/Test Drive/Dealer) — chatbot digeser ke atas bar itu supaya
     tidak tertutup/tumpang tindih. */
  .chatbot-widget{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 16px);right:16px;}
}
@media(max-width:640px){
  .chatbot-widget{right:14px;}
}

/* ===== STICKY CALL BAR (mobile) ===== */
.sticky-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:210;
  padding-bottom:env(safe-area-inset-bottom,0);
  background:var(--red-gradient);
  box-shadow:0 -6px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.18);
}
.sticky-cta a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:58px;padding:8px 4px;color:#fff;text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.02em;text-align:center;line-height:1.15;
  border-right:1px solid rgba(255,255,255,.15);
}
.sticky-cta a:focus-visible{outline:3px solid #fff;outline-offset:-3px;}
.sticky-cta a:last-child{border-right:none;}
@media(max-width:900px){
  .sticky-cta{display:flex;}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px));}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .navlinks{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(21,23,27,0.98);backdrop-filter:blur(6px);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .navlinks.open{max-height:80vh;overflow-y:auto;border-top:1px solid var(--steel-line);}
  .navlinks li{width:100%;}
  .navlinks a{display:block;padding:16px 32px;border-bottom:1px solid var(--steel-line);}
  .dropdown-toggle{
    width:100%;padding:16px 32px;border-bottom:1px solid var(--steel-line);
    justify-content:space-between;
  }
  .dropdown-menu{
    position:static;border:none;padding:0;background:var(--asphalt);
  }
  .dropdown-menu a{padding:14px 32px 14px 48px;border-bottom:1px solid var(--steel-line);}
  .nav-toggle{display:flex;}
  .hide-mobile{display:none;}
  header .wrap{position:relative;}
  .adv-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .sim-box{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid div:nth-child(1){grid-column:span 2;}
}

/* ===== PRICELIST PAGE (harga.php) ===== */
.price-hero{
  background:var(--charcoal);
  padding:100px 0 60px;
  border-bottom:1px solid var(--steel-line);
  color:#fff;
}
.price-hero h1{font-size:clamp(28px,4vw,42px);color:#fff;margin-bottom:14px;}
.price-hero-note{color:var(--silver);font-size:14px;max-width:640px;line-height:1.7;}

.price-list{padding:60px 0 80px;background:var(--paper);}
.price-block{padding:44px 0;border-bottom:1px solid var(--silver);}
.price-block:first-child{padding-top:0;}
.price-block:last-child{border-bottom:none;}
.price-block h2{font-size:24px;color:var(--charcoal);margin-bottom:20px;}
.hu-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:8px;
}
.hu-actions{display:flex;flex-wrap:wrap;gap:12px;}
@media(max-width:480px){
  .hu-actions{flex-direction:column;}
  .hu-actions .btn{width:100%;}
}

.price-table-wrap{overflow-x:hidden;margin-bottom:28px;}
.price-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;}
.price-table th,.price-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--silver);}
.price-table th{background:var(--charcoal);color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-family:'Oswald',sans-serif;}
.price-table tbody tr:nth-child(even){background:#fff;}
.price-table td{font-family:'JetBrains Mono',monospace;}
.price-table td:nth-child(1){font-family:'Inter',sans-serif;word-break:break-word;}
.price-table td:nth-child(2){font-weight:600;color:var(--red);white-space:nowrap;}
.price-table th:nth-child(2),.price-table td:nth-child(2){width:172px;padding-left:10px;padding-right:6px;}
.price-table th:last-child,.price-table td:last-child{font-family:'Inter',sans-serif;width:58px;text-align:center;padding-left:6px;padding-right:6px;}
.price-chat-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:#25D366;transition:background .2s,transform .2s;
}
.price-chat-btn:hover{background:#1ebe5b;transform:scale(1.08);}

/* Card "Informasi Harga" di bawah tabel harga (model-detail.php) */
.price-info-card{
  background:#fff;
  border:1px solid var(--silver);
  border-left:4px solid var(--red);
  border-radius:14px;
  box-shadow:0 4px 18px rgba(21,23,27,0.06);
  padding:26px 28px;
  margin-bottom:28px;
}
.price-info-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.price-info-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(230,0,18,0.1);color:var(--red);
  flex-shrink:0;
}
.price-info-title{
  font-size:16px;color:var(--charcoal);
  text-transform:uppercase;letter-spacing:.03em;
}
.price-info-text{
  font-family:'Inter',sans-serif;
  font-size:14.5px;line-height:1.75;color:var(--charcoal);
  margin-bottom:8px;
}
.price-info-text:last-of-type{margin-bottom:16px;}
.price-info-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--charcoal);color:var(--off-white);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;
  padding:7px 14px;border-radius:999px;
}
.price-info-badge svg{color:var(--red);flex-shrink:0;}

/* Harga + label "Harga chassis" — khusus produk Truck, disisipkan di
   antara 2 baris teks info harga (lihat model-detail.php). Harga dibuat
   paling menonjol di dalam kartu (font besar, monospace, merah — pola
   yang sama dipakai di .mvd-price/.variant-card-price), label kecil di
   bawahnya supaya jelas ini BUKAN harga unit lengkap. */
.price-info-value{margin:14px 0;}
.price-info-amount{
  display:block;font-family:'JetBrains Mono',monospace;
  font-size:26px;font-weight:700;color:var(--red);line-height:1.2;
}
.price-info-chassis-label{
  display:inline-block;margin-top:4px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--steel);
}
.price-info-text.price-info-karoseri{color:var(--asphalt);font-size:13.5px;}

@media (max-width:640px){
  .price-info-card{padding:20px 20px;border-radius:12px;}
  .price-info-title{font-size:14.5px;}
  .price-info-text{font-size:14px;}
  .price-info-amount{font-size:22px;}
}

.price-media-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;}
.price-media{
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;aspect-ratio:16/9;
}
.price-media img{width:100%;height:100%;object-fit:contain;}
.price-info p{color:var(--charcoal);font-size:15px;line-height:1.8;margin-bottom:20px;}

@media (max-width:800px){
  .price-media-grid{grid-template-columns:1fr;}
  .price-block{padding:32px 0;}
}

/* Tabel harga di model-detail.php: pastikan selalu muat di layar HP
   320-430px tanpa scroll horizontal. TIPE tetap fleksibel (sisa ruang),
   HARGA & CHAT dipersempit secukupnya, teks harga TIDAK diperkecil
   drastis (masih 13.5px, cukup terbaca) — kalau harga tetap kepanjangan
   untuk 1 baris, dibiarkan turun ke baris ke-2 lewat word-break, bukan
   memperlebar tabel. */
@media (max-width:480px){
  .price-table th,.price-table td{padding:10px 8px;}
  .price-table{font-size:13.5px;}
  .price-table th:nth-child(2),.price-table td:nth-child(2){width:144px;white-space:nowrap;padding-left:8px;padding-right:4px;}
  .price-table th:last-child,.price-table td:last-child{width:46px;padding-left:4px;padding-right:4px;}
  .price-chat-btn{width:30px;height:30px;}
}

/* ===== TOP BAR PROMO (announcement bar premium: badge + fade slider + benefits + kontak) ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:101;
  height:36px;
  background:linear-gradient(90deg,#710410 0%,#a50612 48%,var(--red) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.22);
  color:#fff;
  font-family:'Inter',sans-serif;font-size:12.5px;
}
.topbar-inner{
  max-width:1200px;margin:0 auto;height:100%;
  display:flex;align-items:center;gap:20px;
  padding:0 32px;
}
.topbar-promo{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;}
.topbar-badge{
  flex:none;display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:3px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.topbar-fade{display:grid;flex:1;min-width:0;}
.topbar-msg{
  grid-area:1/1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;letter-spacing:.03em;
  opacity:0;transform:translateY(4px);
  transition:opacity .7s ease,transform .7s ease;
}
.topbar-msg.is-active{opacity:1;transform:translateY(0);}
.topbar-benefits{
  flex:none;display:flex;align-items:center;gap:14px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.topbar-benefits i{display:block;width:1px;height:11px;background:rgba(255,255,255,.32);}
.topbar-contact{
  flex:none;display:flex;align-items:center;gap:5px;
  color:#fff;text-decoration:none;font-weight:600;letter-spacing:.02em;
  transition:opacity .2s ease;
}
.topbar-contact strong{font-weight:700;letter-spacing:.05em;}
.topbar-contact:hover{opacity:.82;}
@media (prefers-reduced-motion:reduce){.topbar-msg{transition:none;}}
header#siteHeader{top:36px;}
.car-slideshow{padding-top:136px;}
.model-detail-hero{padding-top:136px;}
.price-hero{padding-top:136px;}
@media(max-width:1100px){
  .topbar-benefits{display:none;}
  .topbar-inner{padding:0 20px;gap:14px;}
}
@media(max-width:560px){
  /* Nomor telepon topbar disembunyikan total (bukan cuma label "Hubungi
     Sales:") supaya teks promo dapat ruang lebih lega dan tetap 1 baris
     tanpa kepotong "..." — tombol WhatsApp/telepon tetap ada di bar aksi
     bawah (lihat footer.php), jadi kontak sales tetap 1 tap dari mana saja. */
  .topbar-contact{display:none;}
  .topbar-inner{padding:0 12px;gap:10px;}
}

/* ===== MEGA MENU MODEL (Passenger Car / Commercial Vehicle) ===== */
.has-dropdown{position:relative;}
.has-dropdown > a{display:flex;align-items:center;gap:4px;}
.has-dropdown .caret{font-size:9px;opacity:.7;}
@media(max-width:900px){
  /* Topbar merah tetap fixed & terlihat di HP (dulu position:static bikin
     header#siteHeader yang fixed di top:0 menimpanya sepenuhnya — topbar
     jadi tidak pernah kelihatan). Header digeser turun 32px (tinggi topbar
     di HP) supaya tidak tumpang tindih, sama seperti pola desktop. */
  header#siteHeader{top:32px;}
  .topbar{height:32px;}
  .topbar-inner{padding:0 14px;gap:12px;}
  .car-slideshow{padding-top:120px;}
  .model-detail-hero{padding-top:132px;}
  .price-hero{padding-top:132px;}
}

/* ===== SCROLL REVEAL (JS native, lihat script.js) ===== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ===== NAV ACTIVE STATE ===== */
.navlinks a.active{color:var(--red);}

/* ===== BERITA / ARTIKEL PREVIEW (Beranda) =====
   Catatan: card artikel di Beranda & halaman Detail kini memakai komponen
   bersama article-card.php (rule .artikel-*). Rule .berita-* di bawah
   tetap dipertahankan karena masih dipakai card promo
   (promo.php & promo-detail.php). */
.berita{padding:70px 0;background:#f8f9fb;}
.berita-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.berita-card{
  background:#fff;border:1px solid var(--silver);border-radius:16px;overflow:hidden;
  box-shadow:0 10px 26px rgba(21,23,27,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.berita-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,23,27,.1);}
.berita-thumb{display:block;aspect-ratio:16/9;background:var(--off-white);overflow:hidden;}
.berita-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.berita-thumb-1,.berita-thumb-2,.berita-thumb-3{width:100%;height:100%;}
.berita-thumb-1{background:linear-gradient(135deg,var(--asphalt),var(--asphalt-2));}
.berita-thumb-2{background:linear-gradient(135deg,var(--red-dark),var(--red));}
.berita-thumb-3{background:linear-gradient(135deg,var(--asphalt-2),var(--charcoal));}
.berita-card h4{font-size:15px;text-transform:none;letter-spacing:0;padding:16px 16px 6px;transition:color .2s ease;}
.berita-card:hover h4{color:var(--red);}
.berita-card p{font-size:13px;color:var(--steel);padding:0 16px 18px;}

/* Foto Berita (Beranda) & Promo Tambahan (promo.php/promo-detail.php) —
   sama-sama pakai .berita-thumb: kotak dipatok rasio 16:9 supaya kartu
   dalam satu baris tetap sejajar tingginya. Pakai object-fit:cover supaya
   foto memenuhi penuh kotaknya (sebagian foto punya rasio persegi/4:5,
   beda dari 16:9 — kalau pakai contain jadi ada ruang kosong di kiri-kanan). */

@media (max-width:860px){
  .dw-checklist{grid-template-columns:1fr;}
  .berita-grid{grid-template-columns:1fr;}
}

/* ===== HALAMAN ARTIKEL (artikel.php) — khusus, tidak dipakai di Beranda =====
   Redesign premium: card putih mengambang di atas background #f8f9fb, tanpa
   garis hitam (border #f1f1f1), radius 18px + shadow lembut, hover lift &
   zoom gambar, badge kategori glass di kiri-atas foto, judul 2 baris +
   excerpt 3 baris (line-clamp), animasi fade-up berurutan.
   Hanya tampilan visual — fungsi, URL, dan SEO halaman artikel tidak berubah. */

/* Hero halaman artikel — konten rata kiri & sejajar dengan container .wrap
   artikel di bawahnya; tipografi bersih & premium tanpa garis dekoratif
   (referensi Mercedes/BMW/Lexus). Kata "Artikel" memakai merah Mitsubishi.
   Selector .artikel-hero .artikel-hero-title sengaja lebih spesifik supaya
   menang dari rule global .sim-page-hero h1 tanpa mengubah halaman lain. */
.sim-page-hero.artikel-hero{padding:150px 0 76px;}
.artikel-hero .artikel-hero-title{
  font-weight:700;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.15;letter-spacing:.005em;
  color:#fff;max-width:860px;
}
.artikel-hero .artikel-hero-accent{color:var(--red);}
.artikel-hero .artikel-hero-desc{
  max-width:700px;margin-top:18px;
  color:var(--silver);font-size:16px;line-height:1.8;
}

/* --- Kategori artikel: card premium ber-ikon (murni visual) --- */
.artikel-kategori-section{background:#f8f9fb;padding:64px 0 6px;}
.artikel-kategori-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.artikel-kategori-card{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid #f1f1f1;border-radius:18px;
  padding:20px 22px;box-shadow:0 4px 18px rgba(0,0,0,.05);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.artikel-kategori-card:hover{
  transform:translateY(-4px);border-color:rgba(230,0,18,.22);
  box-shadow:0 14px 34px rgba(230,0,18,.10);
}
.artikel-kategori-icon{
  width:48px;height:48px;flex-shrink:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--mitsubishi-red-light);color:var(--red);
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.artikel-kategori-icon svg{width:22px;height:22px;}
.artikel-kategori-card:hover .artikel-kategori-icon{background:var(--red);color:#fff;transform:scale(1.06);}
.artikel-kategori-card.is-active{border-color:var(--red);box-shadow:0 14px 34px rgba(230,0,18,.14);}
.artikel-kategori-card.is-active .artikel-kategori-icon{background:var(--red);color:#fff;}
.artikel-kategori-info{min-width:0;display:flex;flex-direction:column;}
.artikel-kategori-name{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--charcoal);line-height:1.3;}
.artikel-kategori-count{font-size:12.5px;color:#6b7280;margin-top:2px;}
.artikel-kategori-reset{margin-top:20px;font-size:13.5px;color:var(--steel);}
.artikel-kategori-reset a{color:var(--red);font-weight:600;}

/* --- Grid & card artikel premium --- */
.artikel-list-section{padding:48px 0 96px;background:#f8f9fb;}
.artikel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.artikel-card{
  background:#fff;border:1px solid #f1f1f1;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:transform .35s ease,box-shadow .35s ease;
  /* fade-up sengaja memakai properti `translate` (bukan transform) supaya
     animasinya tidak menimpa efek hover translateY pada `transform` */
  animation:artikelFadeUp .65s ease both;
}
.artikel-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,0.14);}
@keyframes artikelFadeUp{from{opacity:0;translate:0 22px;}to{opacity:1;translate:0 0;}}
.artikel-card:nth-child(1){animation-delay:.04s;}
.artikel-card:nth-child(2){animation-delay:.1s;}
.artikel-card:nth-child(3){animation-delay:.16s;}
.artikel-card:nth-child(4){animation-delay:.22s;}
.artikel-card:nth-child(5){animation-delay:.28s;}
.artikel-card:nth-child(6){animation-delay:.34s;}
.artikel-card:nth-child(7){animation-delay:.4s;}
.artikel-card:nth-child(8){animation-delay:.46s;}
.artikel-card:nth-child(n+9){animation-delay:.52s;}

/* --- Gambar: full width, tinggi konsisten 232px, zoom halus saat hover --- */
.artikel-thumb{
  position:relative;display:block;width:100%;height:232px;
  background:var(--off-white);overflow:hidden;
}
.artikel-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.artikel-card:hover .artikel-thumb img{transform:scale(1.05);}
/* lapisan gelap tipis di dasar foto (glass effect ringan) untuk kedalaman */
.artikel-thumb::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,23,27,0) 58%,rgba(21,23,27,.16));
  opacity:.75;transition:opacity .35s ease;
}
.artikel-card:hover .artikel-thumb::after{opacity:.4;}
.artikel-thumb-fallback{width:100%;height:100%;}
.artikel-thumb-1{background:linear-gradient(135deg,var(--asphalt),var(--asphalt-2));}
.artikel-thumb-2{background:linear-gradient(135deg,var(--red-dark),var(--red));}
.artikel-thumb-3{background:linear-gradient(135deg,var(--asphalt-2),var(--charcoal));}

/* --- Badge kategori: pill merah solid (kiri-atas foto) --- */
.artikel-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:18px;white-space:nowrap;
  padding:0 8px;border-radius:999px;
  background:rgba(230,0,18,.85);
  color:#fff;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
/* --- Isi card --- */
.artikel-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.artikel-card-title{
  font-family:'Inter',sans-serif;font-size:19px;font-weight:700;
  line-height:1.35;letter-spacing:-.01em;text-transform:none;
  color:var(--charcoal);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.artikel-card-title a{color:var(--charcoal);transition:color .3s ease;}
.artikel-card-title a:hover{color:var(--red);}
.artikel-excerpt{
  font-size:14px;color:#4b5563;line-height:1.7;margin-bottom:16px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- Meta tanggal: kecil, abu premium #6b7280, ikon kalender --- */
.artikel-date{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  color:#6b7280;letter-spacing:.01em;margin-bottom:14px;
  padding-top:14px;border-top:1px solid #f1f1f1;
}
.artikel-date svg{width:14px;height:14px;flex-shrink:0;color:var(--red);}

/* --- Baca artikel: merah Mitsubishi, panah bergeser saat hover --- */
.artikel-readmore{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--red);transition:color .3s ease;
}
.artikel-readmore-arrow{display:inline-block;transition:transform .35s ease;}
.artikel-readmore:hover{color:var(--red-dark);}
.artikel-readmore:hover .artikel-readmore-arrow{transform:translateX(5px);}

/* --- Responsif: 3 kolom desktop / 2 tablet / 1 mobile --- */
@media (max-width:1000px){
  .artikel-grid{grid-template-columns:repeat(2,1fr);}
  .artikel-kategori-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .sim-page-hero.artikel-hero{padding:162px 0 52px;}
  .artikel-hero .artikel-hero-title{font-size:26px;}
  .artikel-hero .artikel-hero-desc{font-size:15px;}
  .artikel-kategori-section{padding:44px 0 4px;}
  .artikel-kategori-grid{grid-template-columns:1fr;gap:16px;}
  .artikel-list-section{padding:36px 0 72px;}
  .artikel-grid{grid-template-columns:1fr;}
  .artikel-thumb{height:220px;}
  .artikel-card-body{padding:18px 18px 20px;}
  .artikel-card-title{font-size:17.5px;}
}

/* --- Aksesibilitas: hormati preferensi reduce motion --- */
@media (prefers-reduced-motion:reduce){
  .artikel-card{animation:none;}
  .artikel-card,.artikel-thumb img,.artikel-thumb::after,
  .artikel-readmore,.artikel-readmore-arrow,
  .artikel-kategori-card,.artikel-kategori-icon{transition:none;}
  .artikel-card:hover,.artikel-card:hover .artikel-thumb img,
  .artikel-kategori-card:hover,.artikel-kategori-card:hover .artikel-kategori-icon{transform:none;}
}

/* ===== PROMO PER MODEL (promo.php) — flat/edge-to-edge, tanpa bingkai
   kartu (bukan lagi card putih rounded+shadow): judul dengan garis merah
   memanjang, foto & panel promo rata bersebelahan tanpa jarak, sudut
   siku (bukan membulat) — sesuai referensi yang diminta. ===== */
.promo-models{padding:70px 0 80px;background:var(--paper);}
.promo-model{margin-bottom:60px;}
.promo-model:last-of-type{margin-bottom:0;}
.promo-model-title{
  display:flex;align-items:center;gap:24px;
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(24px,3.2vw,36px);text-transform:uppercase;letter-spacing:.01em;
  color:var(--charcoal);
  margin-bottom:0;padding-bottom:22px;
  border-bottom:1px solid rgba(21,23,27,.1);
}
.promo-model-title::after{
  content:'';flex:1 1 auto;height:3px;min-width:40px;
  background:var(--red-gradient);border-radius:2px;
}
.promo-model-top{display:grid;grid-template-columns:1.1fr 1fr;margin-top:32px;}
.promo-model-photo-wrap{
  position:relative;overflow:hidden;min-height:280px;
  border-radius:10px 0 0 10px;
  background:url('uploads/site/promo-road-skyline.webp') center 42%/cover no-repeat;
}
.promo-model-photo{
  height:100%;background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:transparent;
  display:flex;align-items:center;justify-content:center;
}
.promo-model-photo-fallback span{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;font-size:18px;text-align:center;padding:0 20px;opacity:.85;
}
.promo-model-photo-1{background:linear-gradient(135deg,var(--asphalt),var(--asphalt-2));}
.promo-model-photo-2{background:linear-gradient(135deg,var(--red-dark),var(--red));}
.promo-model-photo-3{background:linear-gradient(135deg,var(--asphalt-2),var(--charcoal));}

/* Panel "Promo Super Hot Deals" — hitam solid, menempel langsung ke foto
   di sebelahnya (tanpa jarak/gap), sudut luar sedikit melengkung. */
.promo-model-deals{
  background:#000;
  color:#fff;padding:32px 30px 30px;
  display:flex;flex-direction:column;
  border-radius:0 10px 10px 0;
}
@media (max-width:860px){
  .promo-model-photo-wrap{border-radius:10px 10px 0 0;}
  .promo-model-deals{border-radius:0 0 10px 10px;}
}
.promo-model-deals h3{
  position:relative;display:flex;align-items:center;gap:9px;
  font-size:18px;margin-bottom:16px;
}
.promo-model-deals h3 svg{color:var(--red);flex-shrink:0;}
.promo-model-deals ul{position:relative;margin-bottom:22px;}
.promo-model-deals li{
  position:relative;padding-left:26px;
  font-size:14px;color:var(--silver);margin-bottom:12px;line-height:1.5;
}
.promo-model-deals li::before{
  content:'';position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:rgba(230,0,18,.18);
}
.promo-model-deals li::after{
  content:'';position:absolute;left:5px;top:7px;width:6px;height:10px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(40deg);
}
.promo-model-deals .btn{position:relative;align-self:flex-start;margin-top:auto;}

.promo-model-gifts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;}
.promo-gift-col{
  background:var(--off-white);border:1px solid var(--silver);border-radius:14px;padding:22px 24px;
}
.promo-gift-col h4{
  display:flex;align-items:center;gap:8px;
  font-size:15px;margin-bottom:12px;color:var(--charcoal);
}
.promo-gift-col h4 svg{color:var(--red);flex-shrink:0;}
.promo-gift-lead{font-size:13.5px;color:var(--asphalt-2);margin-bottom:10px;}
.promo-gift-col li{
  position:relative;padding-left:18px;
  font-size:13.5px;color:var(--asphalt-2);margin-bottom:8px;line-height:1.5;
}
.promo-gift-col li::before{
  content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--red);
}
.promo-disclaimer{font-size:12.5px;color:var(--steel);margin-top:10px;}

@media (max-width:860px){
  .promo-model-title{gap:16px;}
  .promo-model-top{grid-template-columns:1fr;}
  .promo-model-gifts{grid-template-columns:1fr;}
  .promo-model-photo-wrap{min-height:200px;}
}

/* ===== INFO REKENING (kontak.php & simulasi-kredit.php) ===== */
.rekening-card{
  background:var(--charcoal);color:#fff;border-radius:16px;
  box-shadow:0 16px 36px rgba(21,23,27,.18);
  padding:26px 26px 22px;margin-top:26px;
}
.rekening-card h4{font-size:14px;letter-spacing:.04em;color:var(--silver);margin-bottom:4px;}
.rekening-card .rekening-perusahaan{font-size:16px;color:#fff;margin-bottom:18px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
.rekening-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;}
.rekening-item{display:flex;gap:14px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.15);padding-top:12px;}
.rekening-logo{
  width:44px;height:44px;flex-shrink:0;border-radius:6px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.rekening-logo img{max-width:34px;max-height:26px;object-fit:contain;}
.rekening-details{flex:1;min-width:0;}
.rekening-item .bank{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.02em;color:#fff;margin-bottom:2px;}
.rekening-item .cabang{font-size:12px;color:var(--steel);display:block;margin-bottom:4px;}
.rekening-item .nomor{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--silver);}
.rekening-note{font-size:12px;color:var(--steel);margin-top:18px;}
.sales-poster-info .rekening-card{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);max-width:520px;margin-top:22px;}
.sales-poster-info .rekening-card h4{color:var(--silver);}

@media (max-width:560px){
  .rekening-grid{grid-template-columns:1fr;}
}

/* ===== OUR PARTNER (leasing, simulasi-kredit.php) ===== */
.partner-section{padding:60px 0 70px;background:#fff;border-top:1px solid var(--steel-line);}
.partner-title{text-align:center;font-size:clamp(24px,3vw,34px);margin-bottom:36px;}
.partner-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:20px;
  align-items:center;justify-items:center;
}
.partner-item{
  width:100%;min-height:60px;display:flex;align-items:center;justify-content:center;
  padding:10px 14px;
}
.partner-item img{max-height:48px;max-width:100%;object-fit:contain;}
.partner-item span{
  font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px;
  letter-spacing:.02em;color:var(--asphalt-2);text-align:center;line-height:1.3;
}
@media (max-width:860px){
  .partner-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .partner-grid{grid-template-columns:repeat(2,1fr);}
}

/* ===== PRODUK CATALOG GRID (Langkah 2) =====
   Photo-first: mobil sebagai fokus utama — tanpa kotak putih/border. */
.produk-catalog{padding:70px 0;}

/* Hero katalog — mobil unggulan besar di samping judul */
.produk-hero-flex{
  display:flex;align-items:flex-start;justify-content:space-between;gap:48px;
}
.produk-hero-copy{flex:1 1 auto;padding-top:20px;}
@media(max-width:860px){
  .produk-hero-copy{padding-top:0;}
}
.produk-hero-car{
  position:relative;flex:0 0 55%;max-width:680px;
  min-height:520px;overflow:visible;
  padding:20px 40px;
}
  .produk-hero-car:hover img{transform:translateY(-8px);}
  @media(max-width:860px){
    .produk-hero-flex{flex-direction:column;align-items:center;text-align:center;gap:28px;}
    .produk-hero-car{
      position:relative;flex:1 1 auto;width:100%;max-width:480px;margin:0 auto;
      min-height:520px;overflow:visible;
      padding:20px 40px;
    }
  }
  /* ===== PRODUK HERO SLIDER ===== */
/* --- Teks yang berganti (nama mobil + tagline) --- */
.phero-copy-track{position:relative;min-height:170px;margin:18px 0 14px;}
.phero-copy-slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease;
  pointer-events:none;
}
.phero-copy-slide.is-active{
  position:relative;opacity:1;transform:translateY(0);pointer-events:auto;
}
.phero-car-name{
  font-family:'Oswald',sans-serif;font-weight:800;
  font-size:clamp(40px,6vw,72px);letter-spacing:.02em;line-height:1.05;
  margin-bottom:12px;
  color:var(--mitsubishi-red);
}
.produk-hero-copy h1{
  font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1.08;
}
.phero-tagline{color:var(--silver);font-size:15px;line-height:1.6;max-width:440px;}

/* --- Navigasi: panah tipis di samping gambar, tanpa lingkaran/border,
   hanya ikon halus yang muncul saat area gambar di-hover --- */
@media(max-width:860px){
  .phero-tagline{margin:0 auto;}
}

/* --- Gambar mobil yang berganti: fade + slide + zoom halus + floating --- */
.phero-visual{position:relative;}
.phero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;display:flex;align-items:center;justify-content:center;
  width:44px;height:64px;padding:0;border:none;background:transparent;
  color:rgba(255,255,255,.55);cursor:pointer;
  transition:color .25s ease,opacity .25s ease,transform .25s ease;
  opacity:.6;
}
.phero-arrow:hover{color:#fff;opacity:1;}
.phero-prev{left:-6px;}
.phero-prev:hover{transform:translateY(-50%) translateX(-3px);}
.phero-next{right:-6px;}
.phero-next:hover{transform:translateY(-50%) translateX(3px);}
.phero-arrow svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
@media(max-width:860px){
  .phero-arrow{width:38px;height:56px;}
  .phero-prev{left:-2px;}
  .phero-next{right:-2px;}
}

.phero-img-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.94) translateY(16px);
  transition:opacity .9s ease,transform .9s ease;
  pointer-events:none;
}
.phero-img-slide.is-active{
  position:relative;opacity:1;transform:scale(1) translateY(0);pointer-events:auto;
}
.phero-float{width:100%;height:100%;animation:pheroFloat 4.5s ease-in-out infinite;}
.phero-img-slide img{
  width:100%;height:100%;object-fit:contain;
  border-radius:22px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.4));
  transition:transform 6s ease;
  transition:transform 6s ease;
}
.phero-img-slide.is-active img{transform:scale(1.035);}
/* Netralkan efek hover-lift lama ".produk-hero-car:hover img" (translateY)
   supaya tidak bentrok dengan animasi float/zoom slider — kedua class
   sama-sama menempel di elemen yang sama saat mode slider aktif. */
.produk-hero-car.phero-visual:hover img{transform:scale(1.035);}
@keyframes pheroFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media(prefers-reduced-motion:reduce){
  .phero-float{animation:none;}
  .phero-img-slide img{transition:none;}
  .phero-img-slide.is-active img{transform:none;}
}

@media(max-width:860px){
  .phero-copy-track{min-height:130px;}
}

/* --- CTA di bawah foto banner (dipakai mode slider & fallback) --- */
.produk-hero-cta-wrap{
  display:flex;justify-content:center;
  margin-top:36px;padding-top:0;
}
.produk-hero-cta{
  display:inline-flex;align-items:center;gap:9px;
  height:52px;padding:0 32px;border-radius:12px;
  font-size:14.5px;
}
@media(max-width:860px){
  .produk-hero-cta-wrap{margin-top:28px;}
}

/* Section .produk-models memakai class "models" (sama seperti Beranda)
   supaya tampilan tab Passenger/Commercial identik — styling tab & panel
   sudah tersedia lewat .model-tabs/.model-tab-btn/.model-panel (lihat
   blok "Tabs" & "Panels" di atas), tidak perlu CSS baru di sini. */

.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.pd-card{
  background:transparent;border:none;border-radius:20px;
  padding:8px 8px 4px;text-align:center;
  transition:transform .3s ease;
}
.pd-card:hover{transform:translateY(-6px);}
.pd-thumb{
  position:relative;height:240px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;overflow:visible;
}
.pd-thumb img{
  width:100%;height:100%;max-height:100%;object-fit:contain;
  margin:0 auto;padding:10px 10px 0;
  transform:translateY(0);
  transition:transform .3s ease;
}
.pd-card:hover .pd-thumb img{transform:translateY(-8px);}
/* Bayangan tipis di bawah mobil — kesan mobil berdiri di atas lantai */
.pd-thumb::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:6px;width:70%;height:10px;
  background:rgba(0,0,0,.15);
  filter:blur(12px);border-radius:50%;
  pointer-events:none;
}
.pd-name{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:16px;letter-spacing:.02em;margin-bottom:8px;
}
.pd-price{display:block;font-size:13.5px;color:var(--steel);margin-bottom:12px;}
.pd-cta{
  display:inline-block;margin-top:0;font-size:12px;font-weight:600;
  color:var(--charcoal);letter-spacing:.02em;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.pd-card:hover .pd-cta{border-bottom-color:var(--charcoal);}

@media (max-width:860px){
  .pd-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .pd-thumb{height:190px;}
  .pd-card{padding:6px 6px 2px;}
}

/* ===== SIMULASI KREDIT PAGE (Langkah 3) ===== */
.sim-page-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0a0e16 0%,#141821 45%,#1a1f2b 100%);
  padding:150px 0 64px;
}
.sim-page-hero::before{
  content:'';position:absolute;top:-220px;right:-180px;
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.1) 0%,transparent 70%);
  pointer-events:none;
}
.sim-page-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;
}
.sim-page-hero h1{position:relative;color:#fff;font-size:clamp(34px,4.5vw,52px);margin-bottom:12px;}
.sim-page-hero-sub{position:relative;color:var(--silver);font-size:15px;line-height:1.7;max-width:560px;}
.sim-page-body{padding:60px 0;}
.sim-page-subtitle{font-size:22px;margin-bottom:16px;}
.sim-page-intro{max-width:760px;color:var(--asphalt-2);margin-bottom:28px;}
.sim-page-form{
  background:#fff;border:1px solid var(--silver);border-radius:18px;
  box-shadow:0 16px 40px rgba(21,23,27,.07);
  padding:36px;max-width:640px;gap:22px;
}
.sim-page-form label{font-size:13px;text-transform:none;color:var(--charcoal);font-weight:500;margin-bottom:8px;}
.sim-page-form select{width:100%;padding:14px 16px;border:1px solid var(--silver);border-radius:10px;background:#fff;font-family:'Inter',sans-serif;font-size:14px;}
.sim-page-form input[type=text],.sim-page-form input[type=tel]{border-radius:10px;}
.sim-page-form input[type=text]:focus,.sim-page-form input[type=tel]:focus,.sim-page-form select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.1);
}
.sim-page-form button{align-self:flex-start;border-radius:10px;}

.sim-page-contact{padding:20px 0 70px;}
.sim-page-contact h3{font-size:20px;text-transform:none;font-weight:600;letter-spacing:0;margin-bottom:24px;max-width:760px;}
.sim-page-contact h3 span{color:var(--red);}
.sim-contact-grid{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start;
  background:#fff;border:1px solid var(--steel-line);padding:36px 40px;max-width:900px;
  box-shadow:0 24px 48px rgba(21,23,27,.08);
}
.sim-contact-grid::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--red),var(--charcoal));
}
.sim-contact-grid .sales-poster-photo{
  width:100%;aspect-ratio:3/4;border-radius:4px;overflow:hidden;
  box-shadow:0 14px 28px rgba(21,23,27,.16);
}
.sim-contact-body{display:flex;flex-direction:column;}
.sim-contact-brand{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--red);text-transform:uppercase;margin-bottom:10px;
}
.sim-contact-grid h4{font-family:'Oswald',sans-serif;font-size:25px;letter-spacing:.01em;color:var(--charcoal);margin-bottom:4px;}
.sim-contact-role{
  font-size:13px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--silver);
}
.sim-contact-quote{
  position:relative;font-size:14.5px;font-style:italic;color:var(--asphalt-2);
  line-height:1.6;max-width:480px;padding-left:20px;margin-bottom:22px;
}
.sim-contact-quote::before{
  content:"\201C";position:absolute;left:-3px;top:-8px;
  font-size:32px;font-style:normal;line-height:1;color:var(--red);
}
.sim-contact-list{margin-bottom:20px;}
.sim-contact-list li{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--silver);font-size:14px;}
.sim-contact-list li:first-child{border-top:none;padding-top:0;}
.sim-contact-label{
  display:flex;align-items:center;gap:6px;
  color:var(--steel);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.sim-contact-label svg{width:10px;height:10px;flex-shrink:0;color:var(--red);}
.sim-contact-services{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.sim-contact-services span{
  font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--charcoal);background:var(--off-white);border:1px solid var(--silver);padding:7px 12px;
}
.sim-contact-footer{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}
.sim-contact-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-left:auto;}
.sim-contact-qr img{width:112px;height:112px;padding:6px;background:#fff;border:1px solid var(--silver);}
.sim-contact-qr span{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.02em;
  color:var(--steel);text-align:center;max-width:126px;
}

@media (max-width:640px){
  .sim-contact-grid{grid-template-columns:1fr;padding:28px 24px;}
  .sim-contact-grid .sales-poster-photo{max-width:200px;margin:0 auto;}
  .sim-contact-footer{justify-content:center;}
  .sim-contact-qr{margin-left:0;}
}

/* ===== GALERI PAGE (Langkah 5) ===== */
.galeri-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.galeri-page-item{position:relative;border-radius:4px;overflow:hidden;background:var(--asphalt);}
.galeri-page-item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .5s ease;}
.galeri-page-item::after{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s ease;pointer-events:none;
}
.galeri-page-item:hover img{transform:scale(1.06);}
.galeri-page-item:hover::after{background:rgba(0,0,0,.12);}
.galeri-page-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}

@media (max-width:860px){
  .galeri-page-grid{grid-template-columns:repeat(2,1fr);}
}

.galeri-page-item img{cursor:zoom-in;}
.model-detail-body .wrap > img{cursor:zoom-in;}
.artikel-featured-img,
.artikel-content img,
.artikel-galeri-item img{cursor:zoom-in;}

/* Lightbox galeri — dibangun murni lewat JS, overlay full-screen dengan
   navigasi kiri/kanan untuk foto berikutnya/sebelumnya. */
.gallery-lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,11,14,.45);
  backdrop-filter:blur(4px) saturate(1.4);-webkit-backdrop-filter:blur(4px) saturate(1.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease;
}
.gallery-lightbox.is-open{opacity:1;visibility:visible;}
.gallery-lightbox-img{
  max-width:90vw;max-height:85vh;object-fit:contain;
  border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transform:scale(.96);transition:opacity .28s ease,transform .28s ease;
}
.gallery-lightbox.is-open .gallery-lightbox-img.is-shown{opacity:1;transform:scale(1);}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next{
  position:absolute;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:22px;line-height:1;transition:background .2s ease;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover{background:rgba(255,255,255,.2);}
.gallery-lightbox-close{top:20px;right:20px;}
.gallery-lightbox-prev{left:20px;top:50%;transform:translateY(-50%);}
.gallery-lightbox-next{right:20px;top:50%;transform:translateY(-50%);}
.gallery-lightbox-caption{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;color:#fff;font-size:14px;
  padding:0 80px;
}
@media (max-width:640px){
  .gallery-lightbox-prev,.gallery-lightbox-next{width:40px;height:40px;font-size:18px;}
  .gallery-lightbox-close{width:40px;height:40px;font-size:18px;top:12px;right:12px;}
  .gallery-lightbox-prev{left:8px;}
  .gallery-lightbox-next{right:8px;}
  .gallery-lightbox-caption{padding:0 50px;}
}

/* ===== CONTACT CTA (Beranda, versi ringkas - Langkah 6) ===== */
.contact-cta{padding:70px 0;background:var(--paper);border-top:1px solid var(--steel-line);}
.contact-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
.contact-cta-inner h3{margin-bottom:12px;}
.contact-cta-inner p{color:var(--asphalt-2);max-width:480px;margin-bottom:16px;}
.contact-cta-inner .info-line{max-width:480px;}

@media (max-width:760px){
  .contact-cta-inner{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================
   ARTIKEL DETAIL — PREMIUM EDITORIAL REDESIGN
   Semua class di bawah ini KHUSUS dipakai oleh artikel-detail.php.
   Tidak menimpa/mengubah rule di atas — supaya halaman lain (Beranda,
   halaman mobil, carousel mobil, dsb) tidak terpengaruh sama sekali.
   Gaya: putih/off-white + charcoal + merah aksen, spacing lega,
   tanpa emoji/gradient/shadow berat/ornamen ramai.
   ========================================================== */

.artikel-detail-page{
  background:var(--paper);
  padding:126px 0 64px;
}
@media(max-width:960px){
  .artikel-detail-page{padding-top:150px;}
}
@media(max-width:480px){
  .artikel-detail-page{padding:130px 0 40px;}
}

/* --- Breadcrumb: pill style modern, tanpa separator (referensi Mercedes/BMW) ---
   CATATAN: selector global "nav{justify-content:space-between}" (baris 57,
   dipakai utk navigasi menu utama) ikut kena ke elemen ini karena breadcrumb
   juga tag <nav>. justify-content:flex-start di sini meng-override itu
   supaya pill "Beranda / Artikel / Promo" merapat sesuai gap, bukan
   tersebar ke seluruh lebar. */
.artikel-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;
  margin-bottom:20px;
}
.artikel-crumb{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:#F5F6F8;border:1px solid #ECECEC;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;line-height:1;
  color:#6B7280;white-space:nowrap;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .18s ease;
}
a.artikel-crumb:hover{background:#ECEEF1;border-color:#E2E4E8;color:#374151;transform:translateY(-1px);}
.artikel-crumb-current{
  background:rgba(228,0,43,.08);border-color:rgba(228,0,43,.15);color:#E4002B;
}
@media(max-width:480px){
  .artikel-breadcrumb{gap:7px;margin-bottom:16px;}
  .artikel-crumb{padding:7px 13px;font-size:12px;}
}

/* --- Layout 2 kolom (konten + sidebar) ---
   PENYEBAB LAMA area baca melebar: kolom utama dulu didefinisikan sebagai
   "1fr" (tanpa batas atas), jadi ia meregang mengisi SISA lebar grid
   (±804px di dalam .wrap 1200px). .artikel-detail-main sendiri tidak
   punya max-width, jadi kotak kartu ikut meregang ke ±716px, dan di
   bawah 960px (saat sidebar disembunyikan) kolom "1fr" itu melebar lagi
   sampai ±1048px — jauh lebih lebar dari nyaman dibaca. .artikel-content
   memang dibatasi 76ch, tapi elemen lain (gambar, author block, tombol
   share, TOC, CTA box, navigasi prev/next) tidak dibatasi sama sekali,
   jadi lebar antar-elemen tidak konsisten dan halaman terasa "melebar". */
.artikel-detail-layout{
  display:grid;grid-template-columns:minmax(0,760px) 320px;gap:32px;align-items:start;
  min-width:0;
}
@media(max-width:960px){
  .artikel-detail-layout{grid-template-columns:minmax(0,760px);}
  .artikel-detail-aside{display:none;}
}

/* --- Card putih utama — max-width eksplisit, tidak lagi ikut melebar --- */
.artikel-detail-main{
  background:#fff;border-radius:16px;
  box-shadow:0 2px 18px rgba(21,23,27,.05);
  padding:40px 44px 48px;
  max-width:760px;
  min-width:0;
}
@media(max-width:640px){
  .artikel-detail-main{padding:24px 18px 28px;border-radius:12px;}
}

/* --- Meta: KATEGORI • TANGGAL (uppercase premium, merah + abu) --- */
.artikel-eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#6B7280;
}
.artikel-eyebrow-kategori{color:var(--red);}
.artikel-eyebrow-sep{color:#D1D5DB;font-weight:400;}
.artikel-eyebrow-date{color:#6B7280;}
@media(max-width:480px){
  .artikel-eyebrow{font-size:12px;gap:7px;margin-bottom:14px;}
}

/* --- Judul: elemen utama — Inter 800, proporsi premium, lebar dibatasi 700px --- */
.artikel-detail-title{
  font-family:'Inter',sans-serif;font-weight:800;text-transform:none;
  font-size:clamp(24px,2vw,32px);
  line-height:1.2;letter-spacing:-.01em;
  color:#111827;margin-bottom:32px;
  max-width:700px;
}
@media(max-width:1200px){
  .artikel-detail-title{font-size:30px;}   /* laptop */
}
@media(max-width:900px){
  .artikel-detail-title{font-size:26px;}   /* tablet */
}
@media(max-width:640px){
  .artikel-detail-title{font-size:22px;}   /* mobile */
}

/* --- Foto utama (hero) --- */
.artikel-featured-img{
  width:100%;height:auto;border-radius:16px;margin-bottom:24px;
  aspect-ratio:16/9;object-fit:cover;background:var(--off-white);
  box-shadow:0 6px 22px rgba(21,23,27,.08);
}
@media(max-width:640px){
  .artikel-featured-img{border-radius:14px;margin-bottom:20px;}
}

/* --- Profil penulis: identitas kecil DI BAWAH hero, bukan hero --- */
.artikel-author-block{
  display:flex;align-items:center;gap:12px;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--off-white);
}
.artikel-author-avatar{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  flex-shrink:0;background:var(--off-white);
}
.artikel-author-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:var(--charcoal);color:#fff;font-family:'Oswald',sans-serif;
  font-size:17px;text-transform:uppercase;
}
.artikel-author-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.artikel-author-name{
  font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:var(--charcoal);
}
.artikel-author-role{font-size:13px;color:var(--steel);}
.artikel-author-meta{font-size:12.5px;color:var(--steel);}
@media(max-width:480px){
  .artikel-author-block{gap:10px;padding-bottom:18px;margin-bottom:18px;}
  .artikel-author-avatar,.artikel-author-avatar-fallback{width:42px;height:42px;}
  .artikel-author-name{font-size:13.5px;}
  .artikel-author-role,.artikel-author-meta{font-size:12px;}
}

/* --- Tombol share --- */
.artikel-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--off-white);
}
.artikel-share-label{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);font-weight:600;
}
.artikel-share-buttons{display:flex;flex-wrap:wrap;gap:10px;}
.artikel-share-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  border:1px solid var(--off-white);cursor:pointer;color:var(--charcoal);
  background:var(--paper);transition:background .18s ease,border-color .18s ease;
}
.artikel-share-btn:hover{background:var(--off-white);}
.artikel-share-wa{color:#25D366;}
.artikel-share-fb{color:#1877F2;}
.artikel-share-copy.is-copied{color:var(--red);border-color:var(--red);}
.artikel-fb-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;font-family:Georgia,serif;font-weight:700;
  font-style:italic;font-size:13px;line-height:1;
}
@media(max-width:480px){
  .artikel-share{gap:9px;padding-bottom:20px;margin-bottom:20px;}
  .artikel-share-btn{padding:7px 12px;font-size:12px;}
}

/* --- Daftar Isi otomatis --- */
.artikel-toc{
  display:block;
  background:var(--paper);border:1px solid var(--off-white);border-radius:10px;
  padding:16px 20px;margin-bottom:30px;
}
.artikel-toc-toggle{
  width:100%;display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:none;border:none;cursor:pointer;padding:0;
  font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:.02em;color:var(--charcoal);
}
.artikel-toc-toggle > span:first-child{display:flex;align-items:center;gap:8px;}
.artikel-toc-icon{display:inline-flex;color:var(--red);}
.artikel-toc-chevron{transition:transform .25s ease;flex-shrink:0;color:var(--steel);}
.artikel-toc.is-collapsed .artikel-toc-chevron{transform:rotate(-90deg);}
.artikel-toc-list{
  list-style:decimal;margin:14px 0 0 20px;display:flex;flex-direction:column;gap:8px;
  max-height:600px;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease,opacity .2s ease;
}
.artikel-toc.is-collapsed .artikel-toc-list{max-height:0;margin-top:0;opacity:0;}
.artikel-toc-list a{font-size:13.5px;color:var(--charcoal);}
.artikel-toc-list a:hover{color:var(--red);text-decoration:underline;}

/* --- Isi artikel (typography) --- */
/* max-width 76ch lama (≈646px) dilepas — kartu induk sudah dibatasi 760px,
   jadi teks kini selebar elemen lain (gambar, CTA, dst) alih-alih punya
   lebar sendiri yang berbeda. */
.artikel-content{color:var(--charcoal);font-size:17px;line-height:1.8;max-width:100%;}
.artikel-content p{margin-bottom:20px;}
.artikel-content h2{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:25px;line-height:1.3;margin:40px 0 16px;color:var(--charcoal);
  scroll-margin-top:120px;
}
.artikel-content h3{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:20px;line-height:1.35;margin:32px 0 14px;color:var(--charcoal);
  scroll-margin-top:120px;
}
.artikel-content h4{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:16px;margin:24px 0 12px;color:var(--charcoal);scroll-margin-top:120px;
}
.artikel-content ul.artikel-list{
  list-style:disc;margin:0 0 20px 22px;display:flex;flex-direction:column;gap:8px;
}
.artikel-content ul.artikel-list li{line-height:1.7;}
.artikel-content blockquote.artikel-quote{
  border-left:3px solid var(--red);background:var(--paper);
  padding:14px 18px;margin:0 0 20px;border-radius:0 8px 8px 0;
  font-style:italic;color:var(--steel);line-height:1.7;
}
/* Foto yang disisipkan di tengah isi artikel lewat kode [foto:ID] */
.artikel-content figure.artikel-inline-foto{margin:28px 0;}
.artikel-content figure.artikel-inline-foto img{
  display:block;width:100%;border-radius:10px;
}
.artikel-content figure.artikel-inline-foto figcaption{
  margin-top:8px;font-size:13px;color:var(--steel);text-align:center;line-height:1.5;
}
.artikel-content strong{color:var(--charcoal);font-weight:700;}
.artikel-content a{color:var(--red);text-decoration:none;}
/* Nomor HP yang disebut di isi artikel (di-deteksi otomatis lewat
   linkify_nomor_hp_artikel()) — link klik-langsung ke WhatsApp, tampil
   sebagai teks merah standar (tanpa ikon/bold) menyatu dengan paragraf. */
.artikel-content a.artikel-tel-cta{
  color:var(--red);font-weight:400;text-decoration:none;
  white-space:nowrap;
}
.artikel-content a.artikel-tel-cta:hover{text-decoration:underline;}
.artikel-content a:hover{color:var(--red-dark);}
@media(max-width:480px){
  .artikel-content{font-size:16px;line-height:1.75;}
  .artikel-content h2{font-size:21px;margin:32px 0 12px;}
  .artikel-content h3{font-size:18px;margin:26px 0 10px;}
}

/* --- Tag Terkait --- */
.artikel-tags{margin:6px 0 34px;}
.artikel-tags-label{
  display:block;font-family:'Inter',sans-serif;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel);font-weight:600;margin-bottom:10px;
}
.artikel-tags-list{display:flex;flex-wrap:wrap;gap:9px;}
.tag-pill{
  display:inline-block;background:var(--paper);color:var(--charcoal);
  font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;
  border:1px solid var(--off-white);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.tag-pill:hover,.tag-pill:focus-visible{
  background:var(--red);color:#fff;border-color:var(--red);
}

/* --- CTA WhatsApp: flat, tanpa gradient --- */
.artikel-cta-box{
  background:var(--charcoal);
  border-radius:14px;padding:30px 32px;margin-bottom:34px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
}
.artikel-cta-text h3{
  font-family:'Oswald',sans-serif;font-weight:600;
  color:#fff;font-size:19px;margin-bottom:8px;
}
.artikel-cta-text p{color:var(--silver);font-size:14px;line-height:1.6;max-width:420px;}
.artikel-cta-box .dw-actions,.artikel-cta-box .btn-ghost-dark{flex-shrink:0;}
.artikel-cta-box .btn-ghost-dark{
  /* .btn-ghost-dark aslinya didesain utk background terang (teks charcoal) —
     di sini background CTA gelap, jadi ditimpa supaya teks/border kelihatan.
     Hanya berlaku di dalam .artikel-cta-box, TIDAK memengaruhi tombol
     .btn-ghost-dark yang sama di halaman lain (Beranda, Promo, FAQ, dst). */
  color:#fff;border-color:rgba(255,255,255,.4);
}
.artikel-cta-box .btn-ghost-dark:hover{border-color:#fff;}
.artikel-cta-btn{display:inline-flex;align-items:center;gap:8px;}
@media(max-width:640px){
  .artikel-cta-box{padding:22px 20px;flex-direction:column;align-items:flex-start;border-radius:12px;}
  .artikel-cta-box .dw-actions{width:100%;}
  .artikel-cta-box .dw-actions .btn{width:100%;text-align:center;justify-content:center;}
}

/* --- Navigasi artikel sebelumnya/berikutnya --- */
.artikel-prevnext{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px;
}
.artikel-prevnext-link{
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--off-white);border-radius:10px;padding:16px 18px;
  transition:border-color .2s ease;
}
.artikel-prevnext-link:hover{border-color:var(--red);}
.artikel-next{text-align:right;align-items:flex-end;}
.artikel-prevnext-label{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.05em;font-weight:600;
  text-transform:uppercase;color:var(--red);
}
.artikel-prevnext-title{
  font-size:14px;font-weight:600;color:var(--charcoal);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:640px){
  .artikel-prevnext{grid-template-columns:1fr;}
  .artikel-next{text-align:left;align-items:flex-start;}
}

/* --- Sidebar (desktop): Sales Consultation Card, referensi Lexus/Mercedes/BMW --- */
.artikel-sidebar-card{
  background:#fff;border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.08);
  padding:32px 26px;position:sticky;top:110px;
}
.artikel-help-card{text-align:center;}
.artikel-help-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--mitsubishi-red-light);color:var(--red);
  margin:0 auto 16px;
}
.artikel-help-card h4{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:16px;line-height:1.35;letter-spacing:.01em;text-transform:uppercase;
  color:var(--charcoal);margin-bottom:10px;
}
.artikel-help-card p{font-size:13.5px;color:var(--steel);line-height:1.6;margin-bottom:24px;}
.artikel-help-btn{
  width:100%;height:52px;border-radius:12px;
  justify-content:center;margin-bottom:16px;font-size:14.5px;
}
.artikel-help-phone{
  display:block;text-align:center;font-family:'Inter',sans-serif;
  font-size:15px;color:var(--charcoal);font-weight:700;letter-spacing:.01em;
}
.artikel-help-phone:hover{color:var(--red);}

/* --- Galeri Foto Tambahan (carousel geser) --- */
.artikel-galeri{position:relative;margin-bottom:22px;width:100%;max-width:100%;}
.artikel-galeri-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;border-radius:12px;
  width:100%;max-width:100%;
}
.artikel-galeri-track::-webkit-scrollbar{display:none;}
.artikel-galeri-item{
  flex:0 0 auto;width:260px;scroll-snap-align:start;margin:0;
}
.artikel-galeri-item img{
  width:100%;height:170px;object-fit:cover;border-radius:12px;
  background:var(--off-white);display:block;
}
.artikel-galeri-item figcaption{
  font-size:12px;color:var(--steel);margin-top:6px;text-align:center;
}
.artikel-galeri-nav{
  position:absolute;top:70px;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(21,23,27,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.artikel-galeri-nav:hover{background:var(--red-gradient);}
.artikel-galeri-prev{left:4px;}
.artikel-galeri-next{right:4px;}
@media(max-width:420px){
  .artikel-galeri-item{width:220px;}
  .artikel-galeri-item img{height:145px;}
  .artikel-galeri-nav{top:58px;width:32px;height:32px;}
}

/* --- Bottom nav (PROMO|DEALER|CALL CENTER|TEST DRIVE|CHAT) —
   HANYA di halaman artikel (selector di-scope via general sibling
   combinator, jadi TIDAK menimpa .sticky-cta di halaman lain).
   Fungsi & link asli dari footer.php sama sekali tidak diubah,
   ini murni pemolesan visual: charcoal solid + aksen garis merah
   tipis di atas, spacing & tipografi lebih rapi. --- */
.artikel-detail-page ~ .sticky-cta{
  background:var(--charcoal);
  border-top:2px solid var(--red);
  box-shadow:0 -4px 16px rgba(0,0,0,.12);
}
.artikel-detail-page ~ .sticky-cta a{
  font-family:'Inter',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.03em;gap:6px;padding:12px 4px;
  border-right:1px solid rgba(255,255,255,.08);
  opacity:.92;transition:opacity .15s ease;
}
.artikel-detail-page ~ .sticky-cta a:hover,
.artikel-detail-page ~ .sticky-cta a:active{opacity:1;color:#fff;}

/* ==========================================================
   KATALOG PRODUK — Filter Kategori Commercial/Niaga + CTA kartu
   ========================================================== */
.pd-cta{
  display:inline-block;margin-top:0;font-size:12px;font-weight:600;
  color:var(--charcoal);letter-spacing:.02em;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}

.kategori-filter{
  display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px;
}
.kategori-pill{
  display:inline-block;padding:8px 18px;border-radius:999px;
  border:1.5px solid var(--steel-line);color:var(--charcoal);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.02em;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.kategori-pill:hover{border-color:var(--charcoal);color:var(--charcoal);}
.kategori-pill.is-active{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
@media(max-width:600px){
  .kategori-filter{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;
  }
  .kategori-filter::-webkit-scrollbar{display:none;}
  .kategori-pill{flex-shrink:0;padding:7px 15px;font-size:12.5px;}
}

.lihat-semua-varian-btn{
  display:block;width:100%;margin-top:14px;padding:12px;
  background:var(--off-white,#f2f0e9);border:1.5px solid var(--steel-line);
  border-radius:6px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.02em;color:var(--charcoal);
  transition:border-color .18s ease,color .18s ease;
}
.lihat-semua-varian-btn:hover{border-color:var(--red);color:var(--red);}

/* ===== PROFIL SALES FLAGSHIP — kartu executive (index.php) =====
   Dulu "PREMIUM PATCH" satu baris terminifikasi yang diam-diam MENIMPA
   .btn-whatsapp/.btn-dark secara GLOBAL (tombol WhatsApp di seluruh situs
   jadi merah polos bukan gradasi, tombol gelap jadi putih) — sudah
   dirapikan: dua class itu dihapus dari sini (dipakai versi bawaan
   .btn/.btn-whatsapp/.btn-ghost yang sudah benar, lihat markup). */
.btn-whatsapp{background:var(--red-gradient);}
.executive-section{padding:100px 0;background:#020617;}
.executive-card{
  display:grid;grid-template-columns:45% 55%;overflow:hidden;border-radius:32px;
  background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.08);
}
.executive-photo{position:relative;min-height:620px;}
.executive-photo img{width:100%;height:100%;object-fit:cover;}
.executive-photo-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,6,23,.95),rgba(2,6,23,.2),transparent);
}
.executive-badge{
  position:absolute;left:30px;bottom:30px;color:#fff;
  padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.08);
}
.executive-content{padding:70px;color:#fff;}
.executive-brand{color:var(--red);letter-spacing:4px;font-size:12px;font-weight:700;}
.executive-description{color:#cbd5e1;}
.executive-contact{
  margin-top:30px;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
  display:flex;flex-direction:column;gap:16px;
}
.executive-contact small{display:block;color:#94a3b8;}
.executive-actions{display:flex;gap:16px;margin-top:30px;}
@media(max-width:992px){
  .executive-card{grid-template-columns:1fr;}
  .executive-content{padding:32px;}
  .executive-actions{flex-direction:column;}
}
header#siteHeader{
  padding:18px 0;
  background:rgba(21,23,27,0.78);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
}
header#siteHeader.scrolled{
  padding:11px 0;
  background:rgba(21,23,27,0.97);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
header#siteHeader .logo-img{height:42px;transition:height .3s ease;}
header#siteHeader.scrolled .logo-img{height:36px;}
.navlinks{gap:28px;align-items:center;}
.navlinks a,.dropdown-toggle{transition:color .2s ease,opacity .2s ease;}
.navlinks a.active,.dropdown-toggle.active{font-weight:650;}
.nav-cta{min-height:40px;padding:10px 17px;box-shadow:0 8px 18px rgba(230,0,18,.18);}
.nav-cta:hover{box-shadow:0 10px 22px rgba(230,0,18,.28);}

.car-slideshow .slide-media img{
  transform:scale(1.015);
  transition:transform 1.1s ease;
}
.car-slideshow .slide:not(.active) .slide-media img{transform:scale(1);}
.car-slideshow .slide-caption{text-shadow:0 2px 18px rgba(0,0,0,.35);}
.car-slideshow .slide-caption p{max-width:620px;margin-inline:auto;line-height:1.65;}
.slide-dots .dot{width:8px;height:8px;}

@media(max-width:900px){
  header#siteHeader{padding:12px 0;background:rgba(21,23,27,.96);}
  header#siteHeader.scrolled{padding:9px 0;}
  header#siteHeader .logo-img{height:36px;}
  header#siteHeader.scrolled .logo-img{height:32px;}
  .navlinks{gap:0;align-items:stretch;box-shadow:0 14px 24px rgba(0,0,0,.18);}
  .navlinks a,.dropdown-toggle{min-height:52px;display:flex;align-items:center;}
  .dropdown-menu a{min-height:46px;}
  .car-slideshow .slide-caption{padding:0 56px;}
  .car-slideshow .slide-caption h2{font-size:clamp(28px,7vw,42px);}
  .car-slideshow .slide-caption p{font-size:14px;}
  /* Rasio kotak foto TETAP sama di semua layar (lihat catatan di
     .car-slideshow .slides) — supaya teks muat tanpa mengubah bentuk
     foto. Khusus HP: judul besar "Dealer Resmi..." + deskripsi + eyebrow
     disembunyikan (cuma tampil di desktop, dipakai kalau BELUM ada slide
     diisi admin sama sekali — lihat fallback di index.php). Nama/teks/
     tombol per-slide (hero-slide-context, ISI ADMIN) TETAP DI BAWAH foto
     (sama seperti desktop) — supaya tidak menabrak elemen desain yang
     admin taruh sendiri di foto (banyak foto promo sudah ada pita/badge
     di pojok atas). */
  .hero-premium-overlay{
    width:100%;padding:0 20px 14px;justify-content:flex-end;
  }
  .hero-premium-overlay .slide-eyebrow,
  .hero-premium-overlay h1,
  .hero-premium-overlay > p{display:none;}
  .hero-premium-actions{gap:8px;}
  .hero-premium-actions .btn{min-height:32px;padding:0 12px;font-size:10.5px;border-radius:6px;}
  .hero-slide-context{
    width:100%;padding:0 20px;
  }
  .hero-slide-context span{font-size:22px;}
  .hero-slide-context p{font-size:13px;}
  .hero-slide-cta{min-height:0;height:auto;padding:8px 12px;font-size:10.5px;line-height:1;border-radius:6px;margin-top:10px;}
}
@media(max-width:480px){
  .hero-slide-context span{font-size:16px;}
  .slide-nav{padding:0 20px 12px;}
  .slide-arrow{width:36px;height:36px;}
}

@media(prefers-reduced-motion:reduce){
  header#siteHeader,.car-slideshow .slide-media img{transition:none;}
}

/* ===== TABLET LANDSCAPE (901px–1024px) =====
   Mengisi "gap" tablet di antara breakpoint desktop (>1024) dan mobile
   (<=900). Di rentang ini sebelumnya konten masih memakai layout desktop
   yang terlalu sempit (featured side-by-side, advantages 4 kolom, gallery
   4 kolom, carousel 3 kartu). Blok ini HANYA berlaku 901–1024 px sehingga
   tampilan desktop (>1024) dan mobile (<=900) tidak diubah sama sekali. */
@media (min-width:901px) and (max-width:1024px){
  /* Featured Xforce: full width (stack di atas supporting grid) */
  .model-panel--passenger .passenger-feature-layout{display:block;}
  .model-panel--passenger .passenger-featured-card{margin-bottom:30px;}

  /* Supporting Models: tetap 2 kolom */
  .model-panel--passenger .passenger-supporting-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}

  /* Advantages: 2 kolom (bukan 4) */
  .adv-grid{grid-template-columns:1fr 1fr;gap:28px;}

  /* Commercial Vehicle + "Pilihan Model Mitsubishi": 2 kartu per tampilan
     (mengurangi horizontal scrolling & kartu lebih lega) */
  .model-grid{gap:20px;}
  .model-card{flex-basis:calc((100% - 20px)/2);}

  /* Better section spacing */
  .models{padding:64px 0;}
}


/* ===== PROFIL SALES FLAGSHIP (Prioritas 1) ===== */
.executive-role{
  color:var(--silver);
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  margin:-6px 0 18px;
}
.executive-tags{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:28px;
}
.executive-tags small{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:12px;
}
.exec-chips{display:flex;flex-wrap:wrap;gap:8px;}
.exec-chips span{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#e2e8f0;font-size:12.5px;
}
.exec-services li{
  position:relative;
  padding:4px 0 4px 22px;
  color:#e2e8f0;font-size:14px;
}
.exec-services li::before{
  content:'';position:absolute;left:0;top:12px;
  width:12px;height:2px;background:var(--red);
}
@media(max-width:992px){
  .executive-tags{grid-template-columns:1fr;gap:20px;}
  .executive-photo{min-height:440px;}
  .executive-content h2{font-size:40px;}
}
@media(max-width:640px){
  .executive-photo{min-height:380px;}
  .executive-content{padding:26px 22px;}
  .executive-content h2{font-size:34px;}
  .executive-role{font-size:13px;}
}

/* ===== SPRINT 5 — MENGENAL SALES CONSULTANT (heading) ===== */
.exec-head{margin-bottom:40px;}
.exec-head h2{color:#fff;}
.exec-head p{color:#94a3b8;max-width:560px;}
.executive-content .exec-name{
  font-size:clamp(34px,4.5vw,54px);
  color:#fff;line-height:1.05;
  margin-bottom:6px;
}

/* ===== SPRINT 5 — KUNJUNGI SHOWROOM ===== */
.visit-premium{padding:90px 0;background:#020617;}
.visit-head{margin-bottom:44px;}
.visit-head h2{color:#fff;}
.visit-head p{color:#94a3b8;max-width:560px;}
.visit-media{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.visit-photo{
  position:relative;aspect-ratio:4/3;overflow:visible;
}
.visit-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  transform:translateY(0);
  transition:transform .3s ease;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.45));
}
.visit-photo:hover img{transform:translateY(-10px);}
/* Bayangan lantai — kesan foto showroom melayang di atas lantai */
.visit-photo::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:-5px;width:78%;height:16px;
  background:rgba(0,0,0,.55);
  filter:blur(12px);border-radius:50%;
  pointer-events:none;
}
.visit-photo-badge{
  position:absolute;left:20px;bottom:20px;
  padding:8px 16px;border-radius:999px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-family:'Oswald',sans-serif;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
/* Link "+N Foto Lainnya" ke galeri lengkap — dulunya section terpisah
   "Showroom Kami", sekarang digabung sebagai badge kecil di foto ini. */
.visit-photo-more{
  position:absolute;right:20px;bottom:20px;
  padding:8px 16px;border-radius:999px;
  background:var(--red-gradient);
  color:#fff;font-family:'Oswald',sans-serif;
  font-size:13px;letter-spacing:.04em;text-transform:none;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(230,0,18,.3);
}
.visit-photo-more:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(230,0,18,.4);}
.visit-map{
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  aspect-ratio:4/3;
}
.visit-map iframe{width:100%;height:100%;border:0;display:block;}
.visit-info{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:20px;
}
.visit-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;padding:24px;color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.visit-card h3{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px;font-weight:600;
}
.visit-card p{font-size:14px;color:#cbd5e1;line-height:1.6;margin:0;}
a.visit-card{transition:border-color .25s ease,transform .25s ease;}
a.visit-card:hover{border-color:var(--red);transform:translateY(-3px);}
@media(max-width:1024px){
  .visit-media{grid-template-columns:1fr;}
  .visit-info{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .visit-premium{padding:64px 0;}
  .visit-card{padding:20px;}
}

/* ===== SPRINT 5 — FINAL CTA ===== */
.final-cta{padding:90px 0;background:var(--charcoal);}
.final-cta-card{
  position:relative;overflow:hidden;
  border-radius:24px;padding:64px 56px;text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-top:2px solid var(--red);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.final-eyebrow{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  margin-bottom:14px;
}
.final-cta-card h2{color:#fff;font-size:clamp(30px,4vw,46px);margin-bottom:14px;}
.final-cta-card > p{color:#94a3b8;font-size:16px;max-width:520px;margin:0 auto 32px;}
.final-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.final-cta-actions .btn{min-height:50px;padding:14px 30px;border-radius:12px;}
@media(max-width:700px){
  .final-cta{padding:64px 0;}
  .final-cta-card{padding:44px 24px;}
  .final-cta-actions .btn{width:100%;}
}

/* =========================================================================
   MODEL DETAIL — REDESIGN PREMIUM (task restyle by Claude, append-only)
   Restyle tampilan halaman detail varian model (model-detail.php) supaya
   berkesan lebih premium: badge kepercayaan di hero, kartu varian (ganti
   tabel), kartu penawaran, mini simulasi kredit, kartu sales ringkas, dan
   sticky price bar khusus desktop. Semua class baru, tidak menimpa selector
   lama di atas.
   ========================================================================= */

/* --- Hero: CTA row + badge kepercayaan --- */
.model-hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.model-hero-cta-row .btn{min-height:46px;padding:12px 26px;}
.model-badges-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:22px;}
.model-badge{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--silver);font-size:12.5px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
}
.model-badge svg{color:var(--red);flex-shrink:0;}
@media(max-width:640px){
  .model-hero-cta-row .btn{flex:1;justify-content:center;text-align:center;}
  .model-badges-row{gap:8px 14px;}
  .model-badge{font-size:11.5px;}
}

/* --- Grid varian + kartu penawaran --- */
.variant-section-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start;margin-bottom:28px;}
.variant-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:10px;}
.variant-card{
  flex:1 1 200px;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1.5px solid var(--silver);border-radius:14px;
  padding:22px 20px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.variant-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,23,27,.08);}
.variant-card-media{
  width:100%;aspect-ratio:4/3;margin-bottom:4px;border-radius:10px;overflow:hidden;
  background:url('uploads/site/promo-road-skyline.webp') center 42%/cover no-repeat;
}
.variant-card-media img{width:100%;height:100%;object-fit:contain;}
.variant-card.is-active{border-color:var(--red);box-shadow:0 14px 30px rgba(230,0,18,.12);}
.variant-card-hidden{display:none;}
.variant-card-type{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:15px;color:var(--charcoal);}
.variant-card-label{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.variant-card-price{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:17px;color:var(--red);margin-bottom:10px;}
.variant-card-btn{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:8px;border:1.5px solid var(--charcoal);
  font-family:'Oswald',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--charcoal);transition:background .2s ease,color .2s ease;
}
.variant-card-btn:hover{background:var(--charcoal);color:#fff;}
.variant-card-btn-active{background:var(--red-gradient);border-color:var(--red);color:#fff;cursor:default;}
.variant-card-btn-active:hover{background:var(--red-gradient);color:#fff;}
.variant-price-note{font-size:12px;color:var(--steel);margin-top:6px;}

.variant-offer-card{
  background:var(--charcoal);border-radius:16px;padding:32px 30px;color:#fff;
  position:sticky;top:110px;
}
.variant-offer-card h3{color:#fff;font-size:19px;margin-bottom:18px;}
.variant-offer-list li{
  position:relative;padding:6px 0 6px 26px;color:var(--silver);font-size:14px;
}
.variant-offer-list li::before{
  content:'✓';position:absolute;left:0;top:5px;
  color:var(--red);font-weight:700;font-size:14px;
}
.variant-offer-cta{width:100%;justify-content:center;margin:18px 0 14px;}
.variant-offer-divider{text-align:center;font-size:11.5px;color:var(--steel);margin-bottom:8px;}
.variant-offer-phone{
  display:block;text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:16px;font-weight:600;color:#fff;
}
@media(max-width:960px){
  .variant-section-grid{grid-template-columns:1fr;}
  .variant-offer-card{position:static;}
}

/* --- Mini simulasi kredit + kartu sales (di bawah "Tentang Model") --- */
.model-extra-section{padding:70px 0;background:var(--off-white);}
.model-extra-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start;}
.mini-sim-card .sim-box{border-radius:14px;overflow:hidden;}
.mini-sim-card .sim-controls,.mini-sim-card .sim-result{padding:32px;}
.mini-sim-card .sim-result .amount{font-size:34px;margin:6px 0 20px;}

.sales-mini-card{
  background:#fff;border:1px solid var(--silver);border-radius:16px;
  padding:26px;display:flex;gap:18px;align-items:flex-start;
}
.sales-mini-photo{
  width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--charcoal);
}
.sales-mini-photo img{width:100%;height:100%;object-fit:cover;}
.sales-mini-eyebrow{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.sales-mini-name{font-size:18px;margin-bottom:2px;}
.sales-mini-role{font-size:13px;color:var(--steel);margin-bottom:14px;}
.sales-mini-list li{position:relative;padding:3px 0 3px 20px;font-size:13.5px;color:var(--charcoal);}
.sales-mini-list li::before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:700;font-size:12px;}
.sales-mini-cta{width:100%;justify-content:center;margin-top:16px;}
@media(max-width:960px){
  .model-extra-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .sales-mini-card{flex-direction:column;align-items:center;text-align:center;}
}

/* --- "Model Lainnya" di halaman detail model — grid mandiri, tidak
   bergantung pada wrapper .model-panel--passenger milik beranda --- */
.related-models-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.related-models-grid .model-card-media img{padding:10px 10px 0;}
.related-models-grid .model-card-media::after{bottom:15%;}
@media(max-width:900px){
  .related-models-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
}
@media(max-width:560px){
  .related-models-grid{grid-template-columns:1fr;gap:16px;}
}

/* ================================================================
   SPRINT 5 — PRODUK REDESIGN PREMIUM
   Showroom otomotif kelas atas
   ================================================================ */
.produk-catalog{padding:40px 0 80px;}

/* --- Section Header Katalog --- */
.produk-section-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:40px;gap:24px;flex-wrap:wrap;
}
.produk-section-header .psh-left{display:flex;flex-direction:column;gap:8px;}
.produk-section-header .psh-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--red);font-weight:500;
}
.produk-section-header .psh-title{
  font-family:'Oswald',sans-serif;font-size:30px;font-weight:600;
  letter-spacing:0.02em;color:var(--charcoal);text-transform:uppercase;
}
.produk-section-header .psh-link{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--charcoal);letter-spacing:0.03em;
  display:inline-flex;align-items:center;gap:6px;
  padding-bottom:4px;border-bottom:1.5px solid var(--charcoal);
  transition:all .2s ease;
}
.produk-section-header .psh-link:hover{color:var(--red);border-bottom-color:var(--red);}
.produk-section-header .psh-link svg{width:14px;height:14px;}

/* --- Grid katalog --- */
.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}

/* --- Kartu Premium --- */
.pd-card{
  display:block;background:#fff;border-radius:20px;
  padding:20px 20px 24px;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;overflow:visible;
}
.pd-card:hover{
  transform:translateY(-8px);
  box-shadow:0 4px 6px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.08);
}

/* --- Badge --- */
.pd-badge{
  position:absolute;top:14px;left:14px;z-index:5;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;
  background:var(--charcoal);color:#fff;
}
.pd-badge--new{background:var(--red);color:#fff;}
.pd-badge--best{background:var(--red-gradient);color:#fff;}
.pd-badge--suv{background:var(--red-gradient);color:#fff;}
.pd-badge--comm{background:var(--asphalt);color:#fff;}

/* Logo kecil "Dipo Group" di pojok kanan-bawah thumbnail — cuma dipakai
   di halaman Produk (lihat produk.php). TIDAK dipasang di Beranda/Truk
   karena di Beranda sempat bikin foto varian yang ganti-ganti (slideshow
   mini) ikut kehitung/kepotong siklusnya — lihat catatan di script.js.
   Selector ".pd-thumb img.pd-brand-badge" (bukan ".pd-brand-badge" saja)
   SENGAJA dipakai supaya spesifisitasnya menang atas ".pd-thumb img" di
   atas (yang men-set width/height 100% untuk foto mobil) — tanpa ini,
   badge ikut melar seukuran penuh thumbnail dan menutupi foto. */
.pd-thumb img.pd-brand-badge{
  position:absolute;inset:auto;top:auto;left:auto;bottom:10px;right:10px;z-index:5;
  width:auto;height:16px;max-height:16px;
  object-fit:contain;opacity:.85;margin:0;padding:0;
  transform:none;
  /* Logo aslinya teks hitam — filter ini mengubahnya jadi putih murni
     (invert warna gelap/transparan tetap transparan) tanpa perlu file
     gambar versi putih terpisah. */
  filter:brightness(0) invert(1);
  pointer-events:none;
}

/* --- Thumbnail / Foto Mobil --- */
.pd-thumb{
  position:relative;height:240px;width:100%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;overflow:hidden;border-radius:14px;
  background:url('uploads/site/promo-road-skyline.webp') center 42%/cover no-repeat;
}
.pd-thumb img{
  width:100%;height:100%;max-height:100%;object-fit:contain;
  margin:0 auto;padding:4px 8px 0;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.10));
  transition:transform .3s ease, filter .3s ease;
}
.pd-card:hover .pd-thumb img{
  transform:translateY(-8px) scale(1.04);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.14));
}

/* --- Bayangan lantai --- */
.pd-thumb::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:4px;width:38%;height:10px;
  background:rgba(0,0,0,.08);filter:blur(10px);
  border-radius:999px;z-index:1;pointer-events:none;
}

/* --- Nama Mobil --- */
.pd-name{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:17px;letter-spacing:.02em;color:var(--charcoal);
  margin-bottom:8px;
}

/* --- Harga --- */
.pd-price{
  display:block;font-family:'JetBrains Mono',monospace;
  font-size:14px;font-weight:500;color:var(--red);margin-bottom:14px;
}

/* --- CTA --- */
.pd-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  color:var(--charcoal);letter-spacing:.03em;
  transition:all .2s ease;
}
.pd-card:hover .pd-cta{
  color:var(--red);
}

/* ================================================================
   TABS — Segmented Control Modern
   ================================================================ */
.model-tabs{
  display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:#f3f4f6;margin-bottom:48px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
}
.model-tab-btn{
  padding:12px 28px;border-radius:999px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;
  color:#6b7280;background:transparent;border:none;cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.model-tab-btn:hover:not(.is-active){color:var(--charcoal);}
.model-tab-btn.is-active{
  background:var(--charcoal);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ================================================================
   KATEGORI FILTER PILLS
   ================================================================ */
.kategori-filter{
  display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 32px;
}
.kategori-pill{
  display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:999px;
  border:1.5px solid #e0e0e0;color:#6b7280;
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;background:#fff;
  transition:all .18s ease;cursor:pointer;text-decoration:none;
}
.kategori-pill:hover{
  border-color:var(--charcoal);color:var(--charcoal);
  transform:translateY(-1px);
}
.kategori-pill.is-active{
  background:var(--charcoal);border-color:var(--charcoal);color:#fff;
}

/* ================================================================
   HERO — Premium Showroom
   ================================================================ */
.produk-hero-slider-section{
  position:relative;overflow:hidden;
  padding-top:136px;padding-bottom:80px;
  min-height:680px;
  background:
    linear-gradient(100deg, rgba(6,8,13,.88) 0%, rgba(6,8,13,.72) 30%, rgba(6,8,13,.42) 58%, rgba(6,8,13,.22) 100%),
    url('uploads/site/mitsubishi-lineup.webp') center 55%/cover no-repeat;
}
@media(max-width:900px){
  .produk-hero-slider-section{
    background:
      linear-gradient(180deg, rgba(6,8,13,.9) 0%, rgba(6,8,13,.74) 45%, rgba(6,8,13,.5) 100%),
      url('uploads/site/mitsubishi-lineup.webp') center 55%/cover no-repeat;
  }
}
.produk-hero-slider-section::before{
  content:'';position:absolute;top:-200px;right:-200px;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,18,.08) 0%,transparent 70%);
  pointer-events:none;
}

/* Hero khusus halaman Truk — banner lineup Fuso Canter/Fighter sendiri,
   menimpa background .produk-hero-slider-section (mitsubishi-lineup.webp)
   yang dipakai halaman Produk. */
.truk-hero-slider-section{
  background:
    linear-gradient(100deg, rgba(6,8,13,.88) 0%, rgba(6,8,13,.72) 30%, rgba(6,8,13,.42) 58%, rgba(6,8,13,.22) 100%),
    url('uploads/site/truk-lineup.webp') center 55%/cover no-repeat;
}
@media(max-width:900px){
  .truk-hero-slider-section{
    background:
      linear-gradient(180deg, rgba(6,8,13,.9) 0%, rgba(6,8,13,.74) 45%, rgba(6,8,13,.5) 100%),
      url('uploads/site/truk-lineup.webp') center 55%/cover no-repeat;
  }
}
/* Versi statis (tanpa slider): copy tunggal dibatasi lebar supaya rapi
   di atas banner lineup yang lebar. Dipakai di halaman Produk & Truk. */
.truk-hero-static .produk-hero-copy,
.produk-hero-static .produk-hero-copy{max-width:640px;}
/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px){
  .produk-hero-slider-section{min-height:620px;}
}
@media (max-width:1024px){
  .pd-grid{grid-template-columns:repeat(3,1fr);gap:22px;}
  .produk-hero-slider-section{min-height:560px;padding-bottom:60px;}
  .produk-section-header .psh-title{font-size:26px;}
}
/* Topbar di HP tetap fixed (lihat header#siteHeader{top:32px} di
   media(max-width:900px) atas) — jarak aman header jadi 132px,
   sama seperti .price-hero pada breakpoint yang sama. */
@media (max-width:900px){
  .produk-hero-slider-section{padding-top:132px;}
}
@media (max-width:860px){
  .pd-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .produk-hero-slider-section{min-height:480px;padding-bottom:50px;}
  .model-tabs{margin-bottom:36px;}
}
@media (max-width:520px){
  .pd-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .pd-card{padding:14px 14px 18px;border-radius:16px;}
  .pd-thumb{height:150px;margin-bottom:14px;}
  .pd-name{font-size:14px;margin-bottom:6px;}
  .pd-price{font-size:12px;margin-bottom:10px;}
  .pd-cta{font-size:11px;}
  .pd-badge{font-size:9px;padding:4px 8px;top:10px;left:10px;}
  .produk-section-header{margin-bottom:28px;}
  .produk-section-header .psh-title{font-size:22px;}
  .model-tabs{margin-bottom:28px;}
  .model-tab-btn{padding:10px 20px;font-size:12px;}
  .produk-hero-slider-section{min-height:400px;padding-bottom:40px;}
  .kategori-pill{padding:7px 14px;font-size:11.5px;}
}

.produk-hero-cta-inline{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 34px;border-radius:999px;
  background:var(--red);color:#fff;
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  transition:all .2s ease;
  margin-top:28px;
}
.produk-hero-cta-inline:hover{
  background:var(--red-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(230,0,18,.25);
  gap:14px;
}
.produk-hero-cta-inline svg{flex-shrink:0;transition:transform .2s ease;}
.produk-hero-cta-inline:hover svg{transform:translateX(2px);}

@media(max-width:860px){
  .produk-hero-cta-inline{margin-top:24px;height:48px;padding:0 26px;font-size:14px;}
}
@media(max-width:520px){
  .produk-hero-cta-inline{margin-top:20px;height:44px;padding:0 22px;font-size:13px;border-radius:10px;}
  .phero-copy-track{min-height:110px;}
}

/* ================================================================
   MODEL DETAIL — TEMPLATE UNIVERSAL (Quick Specs / Keunggulan /
   Spesifikasi Lengkap / Galeri). Semua section ini hanya dirender kalau
   datanya ada (lihat model-detail.php) — CSS di bawah murni presentasi.
   ================================================================ */

/* --- Quick Specs (strip gelap langsung di bawah hero) --- */
.model-quick-specs{background:var(--charcoal);padding:0 0 56px;}
.model-quick-specs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:16px;
  overflow:hidden;
}
.model-quick-spec-card{
  background:#181c24;padding:26px 16px;text-align:center;
  display:flex;flex-direction:column;gap:6px;
}
.mqs-value{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);color:#fff;}
.mqs-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--silver);}
@media(max-width:700px){
  .model-quick-specs-grid{grid-template-columns:repeat(2,1fr);}
}

/* --- Keunggulan Produk --- */
.model-features{background:var(--paper);padding:70px 0;}
.model-features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:36px;
}
.model-feature-card{
  background:#fff;border:1px solid var(--silver);border-top:3px solid var(--red);
  border-radius:14px;padding:26px 24px;
}
.model-feature-card h3{font-size:17px;color:var(--charcoal);margin-bottom:10px;}
.model-feature-card p{font-family:'Inter',sans-serif;font-size:14px;line-height:1.7;color:var(--steel);}

/* --- Spesifikasi Lengkap (accordion native <details>, tanpa JS) --- */
.model-spec-lengkap{background:var(--off-white);padding:70px 0;}
.model-spec-accordion{margin-top:36px;display:flex;flex-direction:column;gap:12px;}
.model-spec-group{
  background:#fff;border:1px solid var(--silver);border-radius:12px;overflow:hidden;
}
.model-spec-group summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--charcoal);
  display:flex;align-items:center;justify-content:space-between;
}
.model-spec-group summary::-webkit-details-marker{display:none;}
.model-spec-group summary::after{
  content:'+';font-family:'Inter',sans-serif;font-size:18px;color:var(--red);flex-shrink:0;
}
.model-spec-group[open] summary::after{content:'−';}
.model-spec-group[open] summary{border-bottom:1px solid var(--silver);}
.model-spec-table{padding:6px 22px 6px;}
.model-spec-row{
  display:flex;justify-content:space-between;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--steel-line);
  font-family:'Inter',sans-serif;font-size:14px;
}
.model-spec-row:last-child{border-bottom:none;}
.model-spec-label{color:var(--steel);}
.model-spec-value{color:var(--charcoal);font-weight:600;text-align:right;}

/* --- Galeri --- */
.model-gallery-section{background:var(--paper);padding:70px 0;}
.model-gallery-section .section-head h2{font-size:clamp(22px,2.4vw,32px);}
.model-gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;
  align-items:start;
}
.model-gallery-item{position:relative;border-radius:10px;overflow:hidden;}
.model-gallery-item img{width:100%;height:auto;display:block;}
.model-gallery-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 14px 10px;
  background:linear-gradient(to top,rgba(13,16,23,.82) 0%,transparent 100%);
  color:#fff;font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
@media(max-width:700px){
  .model-gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  /* Di HP, kotak foto jadi jauh lebih kecil (2 kolom) — teks keterangan
     15px jadi proporsinya kebesaran, menutupi sebagian besar foto.
     Dikecilkan + padding dirapatkan supaya foto tetap dominan. */
  .model-gallery-item figcaption{padding:16px 8px 6px;font-size:10px;}
}
@media(max-width:420px){
  .model-gallery-grid{grid-template-columns:1fr;}
  .model-gallery-item figcaption{padding:20px 12px 8px;font-size:11.5px;}
}