/*! ============================================================================
    BERANDA - REDESIGN TAMPILAN (lapisan override, dimuat paling akhir)
    ----------------------------------------------------------------------------
    Aturan:
      1. HANYA mengubah tampilan (CSS). Tidak ada perubahan fungsi/data/logic.
      2. Semua selector memakai !important agar mengalahkan beranda.css & CSS
         theme yang dimuat sebelumnya, tanpa perlu mengubah urutan file.
      3. Semua ID, class, atribut data-*, dan event handler di Blade TIDAK
         disentuh - file ini murni gaya visual.
    ============================================================================ */

/* ============================== 1. DESIGN TOKENS =========================== */
:root {
  --gn-red: #dc3545;
  --gn-red-dark: #b02a37;
  --gn-red-soft: rgba(220, 53, 69, .10);
  --gn-ink: #1f2328;
  --gn-body: #57606a;
  --gn-muted: #8b949e;
  --gn-line: #e8eaed;
  --gn-surface: #ffffff;
  --gn-canvas: #f6f7f9;
  --gn-success: #12805c;
  --gn-r-sm: 10px;
  --gn-r-md: 14px;
  --gn-r-lg: 20px;
  --gn-r-pill: 999px;
  --gn-shadow-1: 0 1px 2px rgba(27, 31, 36, .06), 0 1px 3px rgba(27, 31, 36, .04);
  --gn-shadow-2: 0 4px 6px -1px rgba(27, 31, 36, .08), 0 2px 4px -2px rgba(27, 31, 36, .05);
  --gn-shadow-3: 0 12px 24px -6px rgba(27, 31, 36, .14), 0 4px 8px -4px rgba(27, 31, 36, .06);
  --gn-ring: 0 0 0 3px rgba(220, 53, 69, .25);
  --gn-ease: cubic-bezier(.4, 0, .2, 1);
  --gn-dur: .22s;
}

/* ============================== 2. DASAR / TIPOGRAFI ======================= */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Semua fokus keyboard terlihat jelas (a11y) - tidak mengubah perilaku mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gn-red) !important;
  outline-offset: 2px !important;
  box-shadow: var(--gn-ring) !important;
  border-radius: var(--gn-r-sm) !important;
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .motor-card,
  .motor-item,
  .promo-card,
  .card-video-genone,
  .berita-terbaru-card,
  .video-terbaru-card,
  .nav-pills .nav-link,
  .btn-compare,
  .btn-more-product {
    transition: none !important;
    animation: none !important;
  }
  .motor-card:hover,
  .promo-card:hover,
  .berita-terbaru-card:hover,
  .video-terbaru-card:hover {
    transform: none !important;
  }
}

/* ============================== 3. JUDUL SECTION =========================== */
/* Judul lama: .title8 > h2 dengan font-size calc() inline.
   Dibuat konsisten: angka aksen kecil + garis pendek di bawah. */
.title8 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 auto 26px !important;
  padding: 0 16px !important;
  max-width: 720px !important;
}

.title8 h2,
.title8 h4 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gn-ink) !important;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  /* flex + justify-content:center -> judul benar-benar di tengah container,
     bukan cuma text-align (yang tak berpengaruh pada flex container) */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* garis aksen pendek di samping judul */
.title8 h2::before,
.title8 h4::before {
  content: '' !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 3px !important;
  border-radius: var(--gn-r-pill) !important;
  background: var(--gn-red) !important;
}

.title8 h2::after,
.title8 h4::after {
  content: '' !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 3px !important;
  border-radius: var(--gn-r-pill) !important;
  background: var(--gn-red) !important;
}

/* Judul "Motor Honda Untuk Anda" ada di dalam .motor-honda-section (bukan .title8)
   -> samakan perlakunya agar konsisten */
.motor-honda-section .row.mb-3 h2 {
  margin: 0 !important;
  color: var(--gn-ink) !important;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.motor-honda-section .row.mb-3 h2::before {
  content: '' !important;
  width: 22px !important;
  height: 3px !important;
  border-radius: var(--gn-r-pill) !important;
  background: var(--gn-red) !important;
}

/* ============================== 4. SECTION MOTOR =========================== */
.motor-honda-section {
  background: var(--gn-canvas) !important;
  padding: 44px 0 40px !important;
}

/* ---- 4.1 Filter pills: jadi segmented control yang rapi ---- */
.motor-honda-section #motorFilter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 5px !important;
  background: var(--gn-surface) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-pill) !important;
  box-shadow: var(--gn-shadow-1) !important;
}

.motor-honda-section #motorFilter .nav-link {
  margin: 0 !important;
  padding: 8px 20px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--gn-body) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--gn-r-pill) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--gn-dur) var(--gn-ease),
              color var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

.motor-honda-section #motorFilter .nav-link:hover:not(.active) {
  background: var(--gn-red-soft) !important;
  color: var(--gn-red) !important;
}

.motor-honda-section #motorFilter .nav-link.active {
  background: var(--gn-red) !important;
  color: #fff !important;
  border-color: var(--gn-red) !important;
  box-shadow: 0 1px 3px rgba(220, 53, 69, .35) !important;
}

/* ---- 4.2 Grid motor ---- */
.motor-honda-section #motorGrid .row {
  row-gap: 24px !important;
}

.motor-honda-section .motor-item {
  display: flex !important;
}

.motor-honda-section .motor-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--gn-surface) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-lg) !important;
  box-shadow: var(--gn-shadow-1) !important;
  overflow: hidden !important;
  transition: box-shadow var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease),
              border-color var(--gn-dur) var(--gn-ease) !important;
}

.motor-honda-section .motor-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(220, 53, 69, .35) !important;
  box-shadow: var(--gn-shadow-3) !important;
}

.motor-honda-section .motor-card:focus-within {
  border-color: rgba(220, 53, 69, .45) !important;
  box-shadow: var(--gn-shadow-2), var(--gn-ring) !important;
}

/* ---- 4.3 Area gambar: tinggi seragam, tanpa padding, placeholder rapi ---- */
.motor-honda-section .motor-image-container {
  position: relative !important;
  height: 208px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #fff 0%, #f2f4f7 100%) !important;
  border-bottom: 1px solid var(--gn-line) !important;
  border-radius: 0 !important;
  cursor: default !important;
}

.motor-honda-section .motor-image-container .h-100 {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.motor-honda-section .motor-image-container img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: drop-shadow(0 6px 10px rgba(27, 31, 36, .10)) !important;
}

/* gambar utama disembunyikan saat hover, gambar belakang tampil (perilaku lama) */
.motor-honda-section .motor-card:hover .front-img {
  opacity: 0 !important;
}

.motor-honda-section .motor-card:hover .back-img {
  opacity: 1 !important;
}

.motor-honda-section .back-img {
  opacity: 0 !important;
  transition: opacity var(--gn-dur) var(--gn-ease) !important;
}

/* fallback "default motor" tidak ikut di-scale */
.motor-honda-section .motor-image-container img.img-fluid:not(.front-img):not(.back-img) {
  max-width: 78% !important;
  max-height: 78% !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: .55 !important;
}

/* ---- 4.4 Badge "New" ---- */
.motor-honda-section .motor-card .badge-new,
.motor-honda-section .motor-card .badge-favorit {
  top: 12px !important;
  left: 12px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  font-size: .6875rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-radius: var(--gn-r-pill) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  background: linear-gradient(135deg, #e8384a, var(--gn-red)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, .32) !important;
  backdrop-filter: blur(2px) !important;
}

.motor-honda-section .motor-card .badge-favorit {
  background: linear-gradient(135deg, #f5b301, #d98c00) !important;
  color: #3a2a00 !important;
  box-shadow: 0 2px 8px rgba(217, 140, 0, .30) !important;
}

/* ---- 4.5 Badan card: judul + harga ---- */
.motor-honda-section .motor-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
}

/* nama motor - judul card, diletakkan di tengah */
.motor-honda-section .motor-card .motor-name-section {
  padding: 14px 16px 12px !important;
  border-bottom: 0 !important;
  text-align: center !important;
}

/* jaga agar teks nama motor tetap center walau ada elemen block di dalamnya */
.motor-honda-section .motor-card .motor-name-section > * {
  text-align: center !important;
}

.motor-honda-section .motor-card .card-title {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--gn-ink) !important;
  letter-spacing: -.01em !important;
}

/* harga OTR jadi blok menonjol dengan label kecil - isi di tengah */
.motor-honda-section .motor-card .otr-section {
  margin: 0 16px !important;
  padding: 10px 12px !important;
  background: #fbfcfd !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-md) !important;
  text-align: center !important;
}

/* jaga agar nilai harga tetap center walau ada elemen block di dalamnya */
.motor-honda-section .motor-card .otr-section > * {
  text-align: center !important;
}

.motor-honda-section .motor-card .otr-section small {
  display: block !important;
  margin-bottom: 2px !important;
  font-size: .6875rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--gn-muted) !important;
}

.motor-honda-section .motor-card .otr-section .fs-5,
.motor-honda-section .motor-card .otr-section .fw-bold {
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--gn-red) !important;
  letter-spacing: -.01em !important;
}

/* ---- 4.6 Baris DP + Cicilan ---- */
.motor-honda-section .motor-card .row.g-0 {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--gn-r-md) !important;
  overflow: hidden !important;
}

.motor-honda-section .motor-card .row.g-0 .col-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  padding: 10px 14px !important;
  background: #fbfcfd !important;
}

.motor-honda-section .motor-card .row.g-0 .col-6.border-end {
  border-right: 1px solid var(--gn-line) !important;
}

.motor-honda-section .motor-card .row.g-0 small {
  display: block !important;
  margin-bottom: 2px !important;
  font-size: .6875rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--gn-muted) !important;
  white-space: nowrap !important;
}

.motor-honda-section .motor-card .row.g-0 .fw-bold {
  font-size: .9375rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}

.motor-honda-section .motor-card .row.g-0 .text-success {
  color: var(--gn-success) !important;
}

.motor-honda-section .motor-card .row.g-0 .text-danger {
  color: var(--gn-red) !important;
}

/* gaya "Hubungi Dealer" (font kecil) tetap enak dibaca */
.motor-honda-section .motor-card .row.g-0 div[style*="font-size"] {
  font-size: .8125rem !important;
  font-weight: 700 !important;
  color: var(--gn-muted) !important;
}

/* ---- 4.7 Tombol ---- */
.motor-honda-section .motor-card .p-3 {
  margin-top: auto !important;
  padding: 12px 16px 16px !important;
}

.motor-honda-section .motor-card form {
  margin: 0 !important;
}

.motor-honda-section .motor-card .btn-compare {
  width: 100% !important;
  padding: 11px 18px !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  background: var(--gn-ink) !important;
  border: 1px solid var(--gn-ink) !important;
  border-radius: var(--gn-r-pill) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background var(--gn-dur) var(--gn-ease),
              border-color var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

.motor-honda-section .motor-card .btn-compare:hover {
  background: var(--gn-red) !important;
  border-color: var(--gn-red) !important;
  transform: translateY(-1px) !important;
}

.motor-honda-section .motor-card .btn-detail {
  padding: 11px 18px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--gn-ink) !important;
  background: #fff !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-pill) !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  transition: background var(--gn-dur) var(--gn-ease),
              border-color var(--gn-dur) var(--gn-ease) !important;
}

.motor-honda-section .motor-card .btn-detail:hover {
  background: #f6f7f9 !important;
  border-color: var(--gn-ink) !important;
  color: var(--gn-ink) !important;
}

/* ---- 4.8 Tombol "Motor lainnya" ---- */
.motor-honda-section .btn-more-product {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 22px !important;
  padding: 12px 30px !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: var(--gn-ink) !important;
  border: 1px solid var(--gn-ink) !important;
  border-radius: var(--gn-r-pill) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background var(--gn-dur) var(--gn-ease),
              border-color var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

.motor-honda-section .btn-more-product:hover {
  background: var(--gn-red) !important;
  border-color: var(--gn-red) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ============================== 5. HERO PROMO ============================== */
.promo-hero-mobile-text,
.promo-hero-carousel + div,
.col-md-3.d-none.d-md-flex {
  gap: 10px !important;
}

.promo-hero-carousel .promo-card,
#promoHeroCarouselHome .promo-card {
  background: var(--gn-surface) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-md) !important;
  box-shadow: var(--gn-shadow-1) !important;
  overflow: hidden !important;
  transition: box-shadow var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

#promoHeroCarouselHome .promo-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--gn-shadow-3) !important;
}

/* judul promo di bawah gambar */
#promoHeroCarouselHome .promo-card > p {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--gn-ink) !important;
  background: var(--gn-surface) !important;
  border-top: 1px solid var(--gn-line) !important;
  text-align: center !important;
}

/* ============================== 6. CARD REVIEW / BERITA / VIDEO ============ */
.mau-di-kasi-owl .card-video-genone,
.owl-home-slider-berita-terbaru .berita-terbaru-card,
.owl-home-slider-video-terbaru .video-terbaru-card {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--gn-surface) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-lg) !important;
  box-shadow: var(--gn-shadow-1) !important;
  overflow: hidden !important;
  transition: box-shadow var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

.mau-di-kasi-owl .card-video-genone:hover,
.owl-home-slider-berita-terbaru .berita-terbaru-card:hover,
.owl-home-slider-video-terbaru .video-terbaru-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--gn-shadow-3) !important;
}

/* gambar cover seragam */
.mau-di-kasi-owl .card-video-genone .card-img-top,
.owl-home-slider-berita-terbaru .berita-terbaru-card .card-img-top,
.owl-home-slider-video-terbaru .video-terbaru-card .card-img-top {
  height: 176px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: var(--gn-canvas) !important;
}

/* badge kategori (BERITA / VIDEO) jadi capsule glass */
.owl-home-slider-berita-terbaru .badge,
.owl-home-slider-video-terbaru .badge {
  padding: 4px 9px !important;
  font-size: .625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-radius: var(--gn-r-pill) !important;
  backdrop-filter: blur(3px) !important;
}

/* badan card */
.mau-di-kasi-owl .card-video-genone .card-body,
.owl-home-slider-berita-terbaru .berita-terbaru-card .card-body,
.owl-home-slider-video-terbaru .video-terbaru-card .card-body {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* judul review: nama (bold) + motor (merah) + isi */
.mau-di-kasi-owl .card-video-genone .card-title {
  margin: 0 !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--gn-ink) !important;
}

/* judul berita / video */
.owl-home-slider-berita-terbaru .berita-terbaru-card .card-title,
.owl-home-slider-video-terbaru .video-terbaru-card .card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--gn-ink) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* tombol play video */
.owl-home-slider-video-terbaru .play-button {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: rgba(31, 35, 40, .78) !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  box-shadow: var(--gn-shadow-2) !important;
  transition: transform var(--gn-dur) var(--gn-ease),
              background var(--gn-dur) var(--gn-ease) !important;
}

.owl-home-slider-video-terbaru .video-terbaru-card:hover .play-button {
  transform: scale(1.08) !important;
  background: var(--gn-red) !important;
}

/* tombol dots carousel */
.owl-theme .owl-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 22px !important;
}

.owl-theme .owl-dots button {
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--gn-muted) !important;
  border-radius: var(--gn-r-pill) !important;
  opacity: .45 !important;
  transition: width var(--gn-dur) var(--gn-ease),
              background var(--gn-dur) var(--gn-ease),
              opacity var(--gn-dur) var(--gn-ease) !important;
}

.owl-theme .owl-dots button.active {
  width: 24px !important;
  background: var(--gn-red) !important;
  opacity: 1 !important;
}

/* Owl memberi class "disabled" saat tidak ada item - jangan sisakan
   ruang kosong dari dots yang tidak pernah diklik. */
.owl-theme .owl-dots.disabled,
.owl-theme .owl-nav:empty {
  display: none !important;
  margin: 0 !important;
}

/* ============================== 7. BANNER CAROUSEL ========================= */
#bannerCarousel {
  border-radius: var(--gn-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--gn-shadow-2) !important;
}

#bannerCarousel .carousel-control-prev,
#bannerCarousel .carousel-control-next {
  width: 42px !important;
  height: 42px !important;
  top: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  box-shadow: var(--gn-shadow-2) !important;
}

#bannerCarousel .carousel-control-prev:hover,
#bannerCarousel .carousel-control-next:hover {
  background: #fff !important;
  border-color: var(--gn-red) !important;
}

/* ============================== 8. MITRA / LOGO ============================ */
.slide-mitra-kami img.img-mitra {
  max-width: 118px !important;
  height: auto !important;
  object-fit: contain !important;
  padding: 10px !important;
  background: var(--gn-surface) !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: var(--gn-r-md) !important;
  filter: grayscale(1) !important;
  opacity: .7 !important;
  transition: filter var(--gn-dur) var(--gn-ease),
              opacity var(--gn-dur) var(--gn-ease),
              transform var(--gn-dur) var(--gn-ease) !important;
}

.slide-mitra-kami img.img-mitra:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

/* ============================== 9. SPACING SECTION ======================== */
.blog.py-2,
section.py-2 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* buang spacer kosong bawaan untuk ritme spacing yang konsisten */
.motor-honda-section + section > div[style*="height"] {
  display: none !important;
}

/* ============================== 10. RESPONSIF ============================= */
@media (max-width: 991.98px) {
  .motor-honda-section {
    padding: 36px 0 32px !important;
  }

  .motor-honda-section .row.mb-3 h2 {
    margin-bottom: 14px !important;
  }

  .motor-honda-section #motorGrid .row {
    row-gap: 18px !important;
  }

  .motor-honda-section .motor-image-container {
    height: 190px !important;
  }
}

@media (max-width: 767.98px) {
  .motor-honda-section {
    padding: 28px 0 24px !important;
  }

  .title8 {
    margin-bottom: 18px !important;
  }

  .title8 h2,
  .title8 h4 {
    gap: 8px !important;
  }

  .title8 h2::before,
  .title8 h4::before,
  .title8 h2::after,
  .title8 h4::after {
    width: 14px !important;
    height: 2px !important;
  }

  /* filter jadi bisa di-scroll horizontal, tidak membelah 2 baris */
  .motor-honda-section #motorFilter {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-radius: var(--gn-r-pill) !important;
  }

  .motor-honda-section #motorFilter::-webkit-scrollbar {
    display: none !important;
  }

  .motor-honda-section #motorFilter .nav-link {
    flex: 1 0 auto !important;
    padding: 7px 16px !important;
    font-size: .8125rem !important;
  }

  .motor-honda-section #motorGrid .row {
    row-gap: 14px !important;
  }

  .motor-honda-section .motor-card {
    border-radius: var(--gn-r-md) !important;
  }

  .motor-honda-section .motor-image-container {
    height: 150px !important;
  }

  .motor-honda-section .motor-card .motor-name-section {
    padding: 11px 12px 10px !important;
  }

  .motor-honda-section .motor-card .card-title {
    font-size: .875rem !important;
  }

  .motor-honda-section .motor-card .otr-section {
    margin: 0 12px !important;
    padding: 8px 10px !important;
  }

  .motor-honda-section .motor-card .otr-section .fs-5 {
    font-size: .9375rem !important;
  }

  .motor-honda-section .motor-card .row.g-0 .col-6 {
    padding: 9px 12px !important;
  }

  .motor-honda-section .motor-card .row.g-0 .fw-bold {
    font-size: .8125rem !important;
  }

  .motor-honda-section .motor-card .p-3 {
    padding: 10px 12px 12px !important;
  }

  .motor-honda-section .motor-card .btn-compare {
    padding: 10px 14px !important;
    font-size: .8125rem !important;
  }

  .motor-honda-section .btn-more-product {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }

  .mau-di-kasi-owl .card-video-genone .card-img-top,
  .owl-home-slider-berita-terbaru .berita-terbaru-card .card-img-top,
  .owl-home-slider-video-terbaru .video-terbaru-card .card-img-top {
    height: 150px !important;
  }

  .blog.py-2,
  section.py-2 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #bannerCarousel .carousel-control-prev,
  #bannerCarousel .carousel-control-next {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 400px) {
  .motor-honda-section .motor-image-container {
    height: 132px !important;
  }

  .motor-honda-section #motorFilter .nav-link {
    padding: 6px 13px !important;
    font-size: .75rem !important;
  }

  .motor-honda-section .motor-card .otr-section .fs-5 {
    font-size: .875rem !important;
  }
}