/*! Beranda GenOne - stylesheet eksternal.
    Diekstrak dari resources/views/user/home/index_new.blade.php
    (blok <style> inline di dalam <body>).
    Isi & urutan Aturan dipertahankan apa adanya - tidak ada perubahan fungsi.
    DILARANG mengedit file ini via cache: gunakan?v={{ now()->format('ymdHis') }} */

/* ============================================================
   BLOK 1 (dari index_new.blade.php L14-L3524)
   ============================================================ */
  /* ===== MODAL LOKASI POPUP SEARCH FIX ===== */
  #modalLokasiPopup .search-container input {
      pointer-events: auto !important;
      user-select: text !important;
      cursor: text !important;
      background: white !important;
      z-index: 1 !important;
      position: relative !important;
  }

  #modalLokasiPopup .search-container input:focus {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
      outline: none !important;
  }

  /* CRITICAL: Hide filtered items */
  #modalLokasiPopup .lokasi-item-filtered {
      display: none !important;
  }

  #modalLokasiPopup .search-clear-btn {
      position: absolute !important;
      right: 60px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      background: none !important;
      border: none !important;
      color: #6c757d !important;
      z-index: 2 !important;
      cursor: pointer !important;
      padding: 5px !important;
      display: none !important;
  }

  #modalLokasiPopup .search-clear-btn.show {
      display: block !important;
  }

  #modalLokasiPopup .search-clear-btn:hover {
      color: #495057 !important;
  }

  /* Pastikan tombol search berfungsi */
  #modalLokasiPopup #searchLokasiBtn {
      pointer-events: auto !important;
      cursor: pointer !important;
      z-index: 1 !important;
  }

  #modalLokasiPopup #searchLokasiBtn:hover {
      background: #23272b !important;
  }

  /* Pastikan lokasi items bisa diklik */
  #modalLokasiPopup .lokasi-item {
      pointer-events: auto !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
  }

  #modalLokasiPopup .lokasi-item:hover {
      background: #f8f9fa !important;
      color: #dc3545 !important;
  }

  /* Pastikan modal tidak menghalangi interaksi */
  #modalLokasiPopup {
      pointer-events: auto !important;
  }

  #modalLokasiPopup .modal-lokasi-container {
      pointer-events: auto !important;
  }

  #modalLokasiPopup .card {
      pointer-events: auto !important;
  }

  #modalLokasiPopup .card-body {
      pointer-events: auto !important;
  }

  /* Pastikan tombol "Lihat Promo" tetap bisa diklik */
  .btn-compare {
      pointer-events: auto !important;
      cursor: pointer !important;
      z-index: 1 !important;
      position: relative !important;
  }

  .btn-compare:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
  }

  /* ===== BOOTSTRAP DROPDOWN LOKASI STYLING ===== */
  /* Dropdown container - prevent overflow */
  .dropdown {
      position: relative !important;
  }

  /* Dropdown menu styling - SINGLE COLUMN LAYOUT */
  .dropdown-menu {
      border-radius: 8px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      border: 1px solid #dee2e6 !important;
      max-height: 350px !important;
      overflow-y: auto !important;
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 1000 !important;
  }

  /* Override any column layout */
  #diskonPopup .dropdown-menu {
      columns: unset !important;
      column-count: unset !important;
      -webkit-columns: unset !important;
      -moz-columns: unset !important;
      column-width: auto !important;
      -webkit-column-width: auto !important;
      -moz-column-width: auto !important;
  }

  /* Force single column layout for lokasi list */
  #diskonPopup #lokasiList {
      columns: unset !important;
      column-count: unset !important;
      -webkit-columns: unset !important;
      -moz-columns: unset !important;
      column-width: unset !important;
      -webkit-column-width: unset !important;
      -moz-column-width: unset !important;
      display: block !important;
  }

  #diskonPopup #lokasiList li {
      width: 100% !important;
  }

  #diskonPopup #lokasiList .dropdown-item {
      width: 100% !important;
  }

  /* ===== FIX DROPDOWN OVERFLOW IN MODAL ===== */

  /* Modal body - allow overflow for dropdown ONLY on desktop */
  @media (min-width: 769px) {
      #diskonPopup .modal-body {
          overflow: visible !important;
      }

      /* Row container - allow overflow */
      #diskonPopup .row.g-0 {
          overflow: visible !important;
      }

      /* Prevent dropdown from overflowing modal */
      #diskonPopup .col-md-6 {
          position: relative !important;
          overflow: visible !important;
      }

      /* Right column (form side) - allow overflow and higher z-index */
      #diskonPopup .col-md-6:last-child {
          overflow: visible !important;
          position: relative !important;
          z-index: 1 !important;
      }
  }

  #diskonPopup .dropdown {
      position: relative !important;
      z-index: 1050 !important;
  }

  #diskonPopup .dropdown-menu {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-height: 300px !important;
      overflow-y: auto !important;
      margin-top: 0 !important;
      z-index: 1060 !important;
      border-radius: 0 0 8px 8px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      transform: none !important;
  }

  /* Dropdown menu when shown */
  #diskonPopup .dropdown-menu.show {
      display: block !important;
      transform: none !important;
  }

  /* Search input sticky positioning */
  #diskonPopup .dropdown-menu .sticky-top {
      position: sticky !important;
      top: 0 !important;
      z-index: 1061 !important;
      background-color: white !important;
  }

  /* Scrollable list container */
  #diskonPopup #lokasiList {
      max-height: 250px !important;
      overflow-y: auto !important;
  }

  /* Smooth scrolling */
  #diskonPopup .dropdown-menu,
  #diskonPopup #lokasiList {
      scroll-behavior: smooth !important;
      -webkit-overflow-scrolling: touch !important;
  }

  /* Custom scrollbar for dropdown */
  #diskonPopup .dropdown-menu::-webkit-scrollbar,
  #diskonPopup #lokasiList::-webkit-scrollbar {
      width: 6px !important;
  }

  #diskonPopup .dropdown-menu::-webkit-scrollbar-track,
  #diskonPopup #lokasiList::-webkit-scrollbar-track {
      background: #f1f1f1 !important;
      border-radius: 3px !important;
  }

  #diskonPopup .dropdown-menu::-webkit-scrollbar-thumb,
  #diskonPopup #lokasiList::-webkit-scrollbar-thumb {
      background: #dc3545 !important;
      border-radius: 3px !important;
  }

  #diskonPopup .dropdown-menu::-webkit-scrollbar-thumb:hover,
  #diskonPopup #lokasiList::-webkit-scrollbar-thumb:hover {
      background: #c82333 !important;
  }

  /* Dropdown items styling */
  .dropdown-item.lokasi-item {
      padding: 10px 15px !important;
      font-size: 14px !important;
      color: #212529 !important; /* Warna hitam default Bootstrap */
      background-color: transparent !important;
      transition: all 0.2s ease !important;
  }

  .dropdown-item.lokasi-item:hover {
      background-color: #dc3545 !important; /* Background merah saat hover */
      color: white !important; /* Teks putih saat hover */
  }

  .dropdown-item.lokasi-item:active,
  .dropdown-item.lokasi-item.active {
      background-color: #dc3545 !important;
      color: white !important;
  }

  /* Override any Bootstrap or other CSS that might cause horizontal layout */
  #diskonPopup .dropdown-menu ul {
      display: block !important;
      width: 100% !important;
  }

  /* PENTING: JANGAN set `display` dengan !important pada <li> di sini.
     Aturan stylesheet !important mengalahkan inline style, sehingga
     li.style.display = 'none' yang dipakai oleh pencarian wilayah
     ("Cari lokasi...") jadi tidak berefek dan filter tidak pernah bekerja.
     <li> sudah block-level secara default (list-item) + width 100% !important. */
  #diskonPopup .dropdown-menu ul li {
      width: 100% !important;
  }

  #diskonPopup .dropdown-menu {
      columns: unset !important;
      column-count: unset !important;
      -webkit-columns: unset !important;
      -moz-columns: unset !important;
  }

  #diskonPopup #lokasiList .dropdown-item {
      display: block !important;
      width: 100% !important;
  }

  /* Pilih Lokasi Section - Remove container border to avoid double box appearance */
  #diskonPopup .mb-3:has(#lokasiDropdownButton) {
      /* No border on container - only button has border */
  }

  #diskonPopup #lokasiDropdownButton,
  #diskonPopup #lokasiDropdownButton.btn {
      border: 2px solid #dee2e6 !important;
      background-color: #fff !important;
      color: #333 !important;
  }

  #diskonPopup #selectedLokasiDisplay {
      color: #333 !important;
      font-weight: 500;
      display: block !important;
      text-align: left !important;
  }

  #diskonPopup #lokasiDropdownButton {
      color: #333 !important;
  }

  #diskonPopup #lokasiDropdownButton span {
      color: #333 !important;
  }

  #diskonPopup #lokasiDropdownButton:hover,
  #diskonPopup #lokasiDropdownButton.btn:hover {
      border-color: #adb5bd !important;
      background-color: #fff !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
      color: #333 !important;
  }

  #diskonPopup #lokasiDropdownButton:focus,
  #diskonPopup #lokasiDropdownButton.btn:focus {
      border-color: #adb5bd !important;
      background-color: #fff !important;
      box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.25) !important;
      color: #333 !important;
  }

  /* Dropdown button when opened */
  #diskonPopup #lokasiDropdownButton[aria-expanded="true"],
  #diskonPopup #lokasiDropdownButton.btn[aria-expanded="true"] {
      border-color: #adb5bd !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      background-color: #fff !important;
      color: #333 !important;
  }

  /* Dropdown menu border */
  #diskonPopup .dropdown-menu {
      border: 2px solid #dc3545 !important;
      border-top: none !important;
  }

  #lokasiSearchInput:focus {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
  }


  /* Pastikan form submit button bisa diklik */
  #diskonForm button[type="submit"] {
      pointer-events: auto !important;
      cursor: pointer !important;
      z-index: 1 !important;
  }

  /* Pastikan trigger lokasi popup bisa diklik */
  #triggerLokasiPopup {
      pointer-events: auto !important;
      cursor: pointer !important;
  }

  #triggerLokasiPopup:hover {
      background: #f8f9fa !important;
  }

  /* ===== MOTOR HONDA SECTION STYLES ===== */
  .motor-honda-section {
      background-color: #f8f9fa !important;
      padding: 30px 0 !important;
  }

  /* Add spacing on mobile to prevent overlap with hero section */
  @media (max-width: 768px) {
      .motor-honda-section {
          margin-top: 30px !important;
          padding: 20px 0 !important;
      }
  }

  /* Loading indicator styling */
  .spinner-border {
      width: 3rem;
      height: 3rem;
  }

  .no-motor-message {
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 10px;
      border: 2px dashed #dee2e6;
  }

  .no-motor-message i {
      opacity: 0.5;
  }

  /* Badge styling for motor categories */
  .badge-new {
      background: linear-gradient(45deg, #28a745, #20c997) !important;
      color: white !important;
      font-size: 0.75rem !important;
      padding: 0.5rem 0.75rem !important;
      border-radius: 15px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
  }

  .badge-favorit {
      background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
      color: white !important;
      font-size: 0.75rem !important;
      padding: 0.5rem 0.75rem !important;
      border-radius: 15px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
  }

  /* REDUCE SPACING BETWEEN SECTIONS - ULTRA MINIMAL FOR MOBILE */
  /* EXCEPTION: Keep spacing for hero section to prevent overlap */
  section:not(.hero-section) {
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  section.py-3:not(.hero-section) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  section.py-2:not(.hero-section) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  /* Hero section needs proper spacing on mobile */
  @media (max-width: 768px) {
      .hero-section {
          padding-bottom: 20px !important;
          margin-bottom: 15px !important;
      }

      /* Add visual separator between hero and motor section */
      .motor-honda-section::before {
          content: '';
          display: block;
          height: 1px;
          background: linear-gradient(to right, transparent, #dee2e6, transparent);
          margin-bottom: 15px;
      }
  }

  .container {
      margin-bottom: 0 !important;
  }

  /* Reduce card spacing - Ultra minimal */
  .row.g-4 {
      --bs-gutter-y: 0 !important;
  }

  .row.g-3 {
      --bs-gutter-y: 0 !important;
  }

  /* Reduce margin between rows - Ultra minimal */
  .row.mb-3 {
      margin-bottom: 0 !important;
  }

  .row.mt-3 {
      margin-top: 0 !important;
  }

  .row.mt-4 {
      margin-top: 0 !important;
  }

  /* Reduce section spacing - Ultra minimal */
  .section-big-pb-space {
      padding-bottom: 0 !important;
  }

  /* ===== REVIEW SECTION MOBILE IMPROVEMENTS ===== */
  .mau-di-kasi-owl {
      padding: 0 !important; /* Removed all padding for wider cards */
      position: relative !important;
      margin: 0 -10px !important; /* Reduced negative margin for better spacing */
  }

  .mau-di-kasi-owl .item {
      padding: 0 5px !important; /* Reduced padding for tighter spacing on desktop */
  }

  /* Desktop specific - ultra tight spacing */
  @media (min-width: 992px) {
      .mau-di-kasi-owl .item {
          padding: 0 3px !important; /* Ultra tight spacing for desktop */
      }
  }

  /* Styling tombol slide Review Pengguna */
  .mau-di-kasi-owl .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 5px !important;
  }

  .mau-di-kasi-owl .owl-nav button {
      background: rgba(220, 53, 69, 0.8) !important;
      color: white !important;
      border: none !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 5px !important;
      flex-shrink: 0 !important;
      font-size: 18px !important;
  }

  .mau-di-kasi-owl .owl-nav button:hover {
      background: #dc3545 !important;
      transform: scale(1.1) !important;
  }

  .mau-di-kasi-owl .owl-nav button span {
      font-size: 18px !important;
  }

  /* Mobile: 1 card per slide untuk review */
  @media (max-width: 768px) {
      /* Reduced negative margin for mobile */
      .mau-di-kasi-owl {
          margin: 0 -5px !important; /* Smaller negative margin for mobile */
      }

      .mau-di-kasi-owl .owl-stage {
          display: flex !important;
      }

      .mau-di-kasi-owl .owl-item {
          flex: 0 0 100% !important;
          width: 100% !important;
      }

      .mau-di-kasi-owl .item {
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          padding: 0 20px !important; /* More padding for mobile spacing */
      }

      /* Center the cards properly */
      .mau-di-kasi-owl .item > * {
          max-width: 300px !important;
          width: 100% !important;
          margin: 0 auto !important;
      }
  }

  .review-wrapper {
      background: white !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
  }

  .review-wrapper:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-2px) !important;
  }

  .review-motor {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
      color: white !important;
      padding: 8px 12px !important;
      font-size: 0.75rem !important;
      font-weight: 600 !important;
      text-align: center !important;
      flex-shrink: 0 !important;
  }

  .img-review-bg {
      width: 100% !important;
      background-size: cover !important;
      background-position: center !important;
      flex-shrink: 0 !important;
  }

  .review-text {
      padding: 12px !important;
      flex-grow: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
  }

  .review-text h4 {
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      color: #1a1a1a !important;
      margin: 0 0 8px 0 !important;
      line-height: 1.3 !important;
  }

  .review-text p {
      font-size: 0.8rem !important;
      color: #555 !important;
      margin: 0 !important;
      line-height: 1.4 !important;
  }

  .rating {
      display: flex !important;
      justify-content: center !important;
      gap: 2px !important;
      margin: 8px 0 !important;
  }

  .rating i {
      font-size: 0.9rem !important;
      color: #ffc107 !important;
  }

  /* ===== BERITA TERBARU SECTION MOBILE IMPROVEMENTS ===== */
  .owl-home-slider-berita-terbaru {
      padding: 0 !important; /* Removed all padding for wider cards */
      position: relative !important;
      margin: 0 -10px !important; /* Reduced negative margin for better spacing */
  }

  .owl-home-slider-berita-terbaru .item {
      padding: 0 5px !important; /* Reduced padding for tighter spacing on desktop */
  }

  /* Desktop specific - ultra tight spacing */
  @media (min-width: 992px) {
      .owl-home-slider-berita-terbaru .item {
          padding: 0 3px !important; /* Ultra tight spacing for desktop */
      }
  }

  /* Styling tombol slide Berita Terbaru */
  .owl-home-slider-berita-terbaru .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 5px !important;
  }

  .owl-home-slider-berita-terbaru .owl-nav button {
      background: rgba(220, 53, 69, 0.8) !important;
      color: white !important;
      border: none !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 5px !important;
      flex-shrink: 0 !important;
      font-size: 18px !important;
  }

  .owl-home-slider-berita-terbaru .owl-nav button:hover {
      background: #dc3545 !important;
      transform: scale(1.1) !important;
  }

  .owl-home-slider-berita-terbaru .owl-nav button span {
      font-size: 18px !important;
  }

  /* Mobile: 1 card per slide untuk berita terbaru */
  @media (max-width: 768px) {
      /* Reduced negative margin for mobile */
      .owl-home-slider-berita-terbaru {
          margin: 0 -5px !important; /* Smaller negative margin for mobile */
      }

      .owl-home-slider-berita-terbaru .owl-stage {
          display: flex !important;
      }

      .owl-home-slider-berita-terbaru .owl-item {
          flex: 0 0 100% !important;
          width: 100% !important;
      }

      .owl-home-slider-berita-terbaru .item {
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          padding: 0 20px !important; /* More padding for mobile spacing */
      }

      /* Center the cards properly */
      .owl-home-slider-berita-terbaru .item > * {
          max-width: 300px !important;
          width: 100% !important;
          margin: 0 auto !important;
      }
  }

  /* Mobile: 1 card per slide untuk video terbaru */
  @media (max-width: 768px) {
      /* Reduced negative margin for mobile */
      .owl-home-slider-video-terbaru {
          margin: 0 -5px !important; /* Smaller negative margin for mobile */
      }

      .owl-home-slider-video-terbaru .owl-stage {
          display: flex !important;
      }

      .owl-home-slider-video-terbaru .owl-item {
          flex: 0 0 100% !important;
          width: 100% !important;
      }

      .owl-home-slider-video-terbaru .item {
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          padding: 0 20px !important; /* More padding for mobile spacing */
      }

      /* Center the cards properly */
      .owl-home-slider-video-terbaru .item > * {
          max-width: 300px !important;
          width: 100% !important;
          margin: 0 auto !important;
      }
  }

  /* ===== VIDEO TERBARU SECTION DESKTOP IMPROVEMENTS ===== */
  /* Desktop specific - ultra tight spacing */
  @media (min-width: 992px) {
      .owl-home-slider-video-terbaru .item {
          padding: 0 3px !important; /* Ultra tight spacing for desktop */
      }
  }

  /* ===== VIDEO PLAY BUTTON STYLING ===== */
  .video-thumbnail-link {
      display: block;
      position: relative;
      cursor: pointer;
  }

  .play-button {
      width: 70px;
      height: 70px;
      background: rgba(220, 53, 69, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      pointer-events: none; /* Let click pass through to parent link */
  }

  .video-thumbnail-link:hover .play-button {
      background: rgba(220, 53, 69, 1);
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
  }

  .play-triangle {
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      margin-left: 5px;
  }

  /* Video card hover effect */
  .video-terbaru-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
  }

  .video-terbaru-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  .video-terbaru-card:hover .play-button {
      transform: scale(1.15);
  }

  /* Make entire card clickable */
  .video-terbaru-card .position-relative {
      cursor: pointer;
  }

  /* ===== BERITA SECTION MOBILE IMPROVEMENTS ===== */
  .owl-home-slider-news {
      padding: 0 5px !important;
      position: relative !important;
  }

  .owl-home-slider-news .item {
      padding: 5px !important;
  }

  /* Styling tombol slide Berita */
  .owl-home-slider-news .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 5px !important;
  }

  .owl-home-slider-news .owl-nav button {
      background: rgba(220, 53, 69, 0.8) !important;
      color: white !important;
      border: none !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 5px !important;
      flex-shrink: 0 !important;
      font-size: 18px !important;
  }

  .owl-home-slider-news .owl-nav button:hover {
      background: #dc3545 !important;
      transform: scale(1.1) !important;
  }

  .owl-home-slider-news .owl-nav button span {
      font-size: 18px !important;
  }

  /* Mobile: 1 card per slide untuk berita */
  @media (max-width: 768px) {
      .owl-home-slider-news .owl-stage {
          display: flex !important;
      }

      .owl-home-slider-news .owl-item {
          flex: 0 0 100% !important;
          width: 100% !important;
      }

      .owl-home-slider-news .item {
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
      }
  }

  .card-berita-blog {
      background: white !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      max-width: 100% !important;
      width: 100% !important;
  }

  .card-berita-blog:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-2px) !important;
  }

  .card-berita-blog .position-relative {
      position: relative !important;
      width: 100% !important;
      overflow: hidden !important;
      border-radius: 12px 12px 0 0 !important;
  }

  .card-berita-blog .card-img-top {
      width: 100% !important;
      height: 160px !important;
      object-fit: cover !important;
      transition: transform 0.3s ease !important;
      flex-shrink: 0 !important;
      display: block !important;
      max-width: 100% !important;
  }

  .card-berita-blog:hover .card-img-top {
      transform: scale(1.05) !important;
  }

  .card-berita-blog .card-body {
      padding: 12px !important;
      flex-grow: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
  }

  .card-berita-blog .card-title {
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      color: #1a1a1a !important;
      margin: 0 !important;
      line-height: 1.3 !important;
  }

  .card-berita-blog .position-absolute {
      z-index: 10 !important;
      bottom: 0 !important;
      left: 0 !important;
  }

  .card-berita-blog .badge {
      font-size: 0.7rem !important;
      padding: 3px 6px !important;
  }

  /* ===== VIDEO SECTION MOBILE IMPROVEMENTS ===== */
  .owl-home-slider {
      padding: 0 5px !important;
      position: relative !important;
  }

  .owl-home-slider .item {
      padding: 5px !important;
  }

  /* Styling tombol slide Video */
  .owl-home-slider .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 5px !important;
  }

  .owl-home-slider .owl-nav button {
      background: rgba(220, 53, 69, 0.8) !important;
      color: white !important;
      border: none !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 5px !important;
      flex-shrink: 0 !important;
      font-size: 18px !important;
  }

  .owl-home-slider .owl-nav button:hover {
      background: #dc3545 !important;
      transform: scale(1.1) !important;
  }

  .owl-home-slider .owl-nav button span {
      font-size: 18px !important;
  }

  /* Mobile: 1 card per slide untuk video */
  @media (max-width: 768px) {
      .owl-home-slider .owl-stage {
          display: flex !important;
      }

      .owl-home-slider .owl-item {
          flex: 0 0 100% !important;
          width: 100% !important;
      }

      .owl-home-slider .item {
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
      }
  }

  .card-video-genone {
      background: white !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      max-width: 100% !important;
      width: 100% !important;
  }

  .card-video-genone:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-2px) !important;
  }

  .card-video-genone .card-img-top {
      width: 100% !important;
      height: 160px !important;
      object-fit: cover !important;
      transition: transform 0.3s ease !important;
      flex-shrink: 0 !important;
      display: block !important;
      max-width: 100% !important;
  }

  .card-video-genone:hover .card-img-top {
      transform: scale(1.05) !important;
  }

  .card-video-genone .card-body {
      padding: 12px !important;
      flex-grow: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
  }

  .card-video-genone .card-title {
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      color: #1a1a1a !important;
      margin: 0 !important;
      line-height: 1.3 !important;
  }

  /* Reduce title spacing - Ultra minimal */
  .title8 {
      margin-bottom: 0 !important;
      margin-top: 0 !important;
  }

  /* Specific spacing reduction for review section - Ultra minimal */
  .title8.section-big-my-space {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
  }

  /* Mobile spacing for section titles - REVIEW, BERITA, VIDEO - Ultra reduced for maximum tightness */
  @media (max-width: 768px) {
      .title8.section-big-my-space {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
      }

      .title8.section-big-my-space h4 {
          margin-bottom: 0 !important;
          margin-top: 0 !important;
      }
  }

  /* Reduce spacing between review title and content - Ultra minimal */
  .blog.section-big-pb-space {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
  }

  /* Mobile: Ultra reduced spacing between sections for maximum tightness */
  @media (max-width: 768px) {
      .blog.section-big-pb-space {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
          margin-top: 0 !important;
      }

      .blog.py-2 {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
      }

      .blog.py-3 {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
      }
  }

  /* Extra tight spacing for review section */
  .title8.section-big-my-space h4 {
      margin-bottom: 0 !important;
  }

  /* Remove any extra spacing from review container */
  .blog.section-big-pb-space .custom-container {
      padding-top: 0 !important;
  }

  .blog.section-big-pb-space .row.mb-3 {
      margin-bottom: 0.5rem !important;
      margin-top: 0 !important;
  }

  /* Footer content positioning - move content to top */
  .footer1 {
      padding-top: 1.5rem !important;
      padding-bottom: 2rem !important;
  }

  .footer1 .container-fluid {
      padding-top: 0 !important;
  }

  .footer1 .row {
      margin-top: 0 !important;
  }

  .footer-main {
      padding-top: 0 !important;
      margin-top: 0 !important;
  }

  .footer-box {
      padding-top: 0 !important;
      margin-top: 0 !important;
  }

  .footer-title {
      margin-bottom: 0.5rem !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
  }

  .footer-contant {
      padding-top: 0 !important;
      margin-top: 0 !important;
  }

  .footer-box-logo .footer-logo {
      margin-top: 0 !important;
      padding-top: 0 !important;
  }

  /* Reduce carousel spacing */
  #bannerCarousel {
      margin-bottom: 0.5rem !important;
  }

  /* ===== OWL PROMO SLIDER - SMOOTH & BEAUTIFUL ===== */
  .owl-promo-slider {
      padding: 0 !important;
      position: relative !important;
      margin: 0 !important;
  }

  .owl-promo-slider .item {
      padding: 0 10px !important;
  }

  /* Promo card styling */
  .owl-promo-slider .promo-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative !important;
      overflow: hidden !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      border-radius: 15px !important;
      display: block !important;
  }

  .owl-promo-slider .promo-card:hover {
      transform: translateY(-10px) !important;
      box-shadow: 0 15px 30px rgba(220, 53, 69, 0.3) !important;
  }

  .owl-promo-slider .promo-card img {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
      border-radius: 15px 15px 0 0 !important;
  }

  .owl-promo-slider .promo-card:hover img {
      transform: scale(1.08) !important;
  }

  /* Promo overlay */
  .owl-promo-slider .promo-overlay {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 80px !important;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) !important;
      opacity: 0 !important;
      transition: opacity 0.4s ease-in-out !important;
      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      padding: 20px !important;
      border-radius: 15px 15px 0 0 !important;
  }

  .owl-promo-slider .promo-card:hover .promo-overlay {
      opacity: 1 !important;
  }

  .owl-promo-slider .promo-overlay p {
      color: white !important;
      font-weight: 700 !important;
      font-size: 1rem !important;
      margin: 0 !important;
      text-align: center !important;
      transform: translateY(15px) !important;
      transition: transform 0.4s ease-in-out !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  }

  .owl-promo-slider .promo-card:hover .promo-overlay p {
      transform: translateY(0) !important;
  }

  /* Owl navigation buttons */
  .owl-promo-slider .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  .owl-promo-slider .owl-nav button {
      background: rgba(220, 53, 69, 0.9) !important;
      color: white !important;
      border: none !important;
      width: 50px !important;
      height: 50px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      font-size: 24px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  .owl-promo-slider .owl-nav button:hover {
      background: #dc3545 !important;
      transform: scale(1.15) !important;
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
  }

  .owl-promo-slider .owl-nav button span {
      font-size: 24px !important;
      line-height: 1 !important;
  }

  .owl-promo-slider .owl-nav .owl-prev {
      margin-left: -15px !important;
  }

  .owl-promo-slider .owl-nav .owl-next {
      margin-right: -15px !important;
  }

  /* Owl dots */
  .owl-promo-slider .owl-dots {
      text-align: center !important;
      margin-top: 20px !important;
  }

  .owl-promo-slider .owl-dot {
      display: inline-block !important;
      margin: 0 5px !important;
  }

  .owl-promo-slider .owl-dot span {
      width: 12px !important;
      height: 12px !important;
      background: rgba(220, 53, 69, 0.3) !important;
      border-radius: 50% !important;
      display: block !important;
      transition: all 0.3s ease !important;
  }

  .owl-promo-slider .owl-dot.active span {
      background: #dc3545 !important;
      width: 30px !important;
      border-radius: 6px !important;
      transform: scale(1.1) !important;
  }

  .owl-promo-slider .owl-dot:hover span {
      background: rgba(220, 53, 69, 0.6) !important;
  }

  /* Mobile responsive */
  @media (max-width: 768px) {
      .owl-promo-slider .item {
          padding: 0 5px !important;
      }

      .owl-promo-slider .owl-nav button {
          width: 40px !important;
          height: 40px !important;
          font-size: 20px !important;
      }

      .owl-promo-slider .owl-nav .owl-prev {
          margin-left: 5px !important;
      }

      .owl-promo-slider .owl-nav .owl-next {
          margin-right: 5px !important;
      }

      .owl-promo-slider .promo-card:hover {
          transform: translateY(-5px) !important;
      }

      .owl-promo-slider .promo-card p {
          font-size: 0.9rem !important;
          padding: 10px !important;
      }
  }

  /* Reduce review section spacing */
  .blog.section-big-pb-space {
      padding-bottom: 1rem !important;
      margin-bottom: 0.5rem !important;
  }

  /* Reduce video section spacing */
  .blog.py-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
  }

  /* Reduce spacing between motor honda section and other sections */
  .motor-honda-section {
      margin-bottom: 0.5rem !important;
  }

  /* ===== RESPONSIVE MOBILE STYLES ===== */
  @media (max-width: 768px) {
      /* Prevent horizontal scroll */
      html, body {
          overflow-x: hidden !important;
          max-width: 100vw !important;
      }

      /* Fix container widths */
      .container, .container-fluid, .custom-container {
          max-width: 100% !important;
          padding-left: 10px !important;
          padding-right: 10px !important;
          margin-left: auto !important;
          margin-right: auto !important;
      }

      /* Special override for carousel containers - make them full width */
      .blog.section-big-pb-space .custom-container,
      .blog.py-2 .custom-container,
      .blog.py-3 .custom-container {
          padding-left: 0 !important;
          padding-right: 0 !important;
      }

      /* Fix row gutters */
      .row {
          margin-left: -5px !important;
          margin-right: -5px !important;
          --bs-gutter-x: 10px !important;
      }

      .row > * {
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      /* Header fixes */
      .header-style2 {
          position: relative !important;
          z-index: 1000 !important;
      }

      .category-header7 {
          padding: 5px 0 !important;
      }

      /* Navigation mobile fixes */
      #main-menu {
          flex-wrap: wrap !important;
          justify-content: center !important;
          padding: 0 !important;
          margin: 0 !important;
      }

      #main-menu li {
          margin: 2px !important;
      }

      #main-menu li a {
          font-size: 10px !important;
          padding: 4px 8px !important;
          white-space: nowrap !important;
      }

      /* Promo section mobile */
      .w-100.py-2.position-relative {
          padding: 5px 0 !important;
          margin-bottom: 10px !important;
      }
      .w-100.py-2.position-relative .container {
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
      .w-100.py-2.position-relative .row {
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      /* Mobile: tampilkan gambar promo utuh (tidak terpotong), bingkai kotak */
      #promoHeroCarouselHome .promo-card img {
          height: auto !important;
          max-height: none !important;
          object-fit: contain !important;
          transform: none !important;
      }

      .promo-hero-mobile-text {
          padding-bottom: 10px !important;
      }

      /* Carousel mobile fixes */
      .carousel-inner {
          border-radius: 8px !important;
          overflow: hidden !important;
      }

      .carousel-item img {
          width: 100% !important;
          height: auto !important;
          max-height: 200px !important;
          object-fit: cover !important;
      }

      /* Carousel controls mobile */
      .carousel-control-prev, .carousel-control-next {
          width: 25px !important;
          height: 25px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
      }

      .carousel-control-prev {
          left: 5px !important;
      }

      .carousel-control-next {
          right: 5px !important;
      }

      /* Text section mobile */
      .col-md-3 {
          margin-top: 15px !important;
          text-align: center !important;
          padding: 0 15px !important;
      }

      .col-md-3 h3 {
          font-size: 1rem !important;
          margin-bottom: 8px !important;
      }

      .col-md-3 p {
          font-size: 0.85rem !important;
          margin-bottom: 10px !important;
      }

      .col-md-3 .btn {
          font-size: 0.75rem !important;
          padding: 6px 12px !important;
          margin: 2px !important;
          display: inline-block !important;
      }

      /* Motor Honda section mobile */
      .motor-honda-section {
          padding: 15px 0 !important;
          margin-top: 10px !important;
      }

      .motor-honda-section .container {
          padding-left: 8px !important;
          padding-right: 8px !important;
      }

      .motor-honda-section h2 {
          font-size: 1.2rem !important;
          margin-bottom: 10px !important;
          text-align: center !important;
      }

      /* Filter navigation mobile */
      .d-flex.flex-column.flex-md-row {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
      }

      .nav.nav-pills {
          justify-content: center !important;
          flex-wrap: wrap !important;
          gap: 4px !important;
          margin-top: 10px !important;
          width: 100% !important;
      }

      .nav-link {
          font-size: 10px !important;
          padding: 5px 10px !important;
          margin: 2px !important;
          border-radius: 15px !important;
          white-space: nowrap !important;
      }

      /* Motor grid mobile - 2 columns */
      .col-lg-3.col-md-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          padding: 3px !important;
      }

      /* Motor cards mobile */
      .motor-card {
          margin-bottom: 8px !important;
          border-radius: 8px !important;
          overflow: hidden !important;
      }

      .motor-image-container {
          height: 250px !important;
          padding: 0 !important;
          background: #f8f9fa !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
          max-width: 100% !important;
          max-height: 100% !important;
      }



      .motor-card .motor-name-section,
      .motor-card .otr-section {
          padding: 4px 8px !important;
      }

      .motor-card .row.g-0 .col-6 {
          padding: 4px 6px !important;
      }

      .motor-card .p-3 {
          padding: 6px 8px !important;
      }

      .motor-card .motor-name-section h5.card-title {
        font-size: 1.4rem !important;
      }


      .motor-card small.text-muted {
          font-size: 0.75rem !important;
          margin-bottom: 1px !important;
      }

      .motor-card .fw-bold {
          font-size: 1rem !important;
          line-height: 1.1 !important;
      }

      /* Button mobile */
      .btn-compare {
          font-size: 0.65rem !important;
          padding: 4px 6px !important;
          border-radius: 12px !important;
          line-height: 1.2 !important;
      }

      /* Badge mobile */
      .badge.position-absolute {
          top: 3px !important;
          left: 3px !important;
          font-size: 8px !important;
          padding: 2px 4px !important;
          border-radius: 8px !important;
      }

      /* More product button mobile */
      .btn-more-product {
          font-size: 0.8rem !important;
          padding: 8px 16px !important;
          margin-top: 10px !important;
      }

      /* Section spacing mobile */
      section {
          padding: 8px 0 !important;
          margin-bottom: 5px !important;
      }

      .title8 {
          margin: 0 !important;
          text-align: center !important;
      }

      .title8 h4 {
          font-size: 1.1rem !important;
          margin-bottom: 0 !important;
          margin-top: 0 !important;
          padding-top: 0 !important;
      }

      /* Banner carousel mobile */
      #bannerCarousel {
          margin: 10px 0 !important;
          border-radius: 8px !important;
          overflow: hidden !important;
      }

      #bannerCarousel img {
          max-height: 180px !important;
          width: 100% !important;
          object-fit: cover !important;
      }

      /* Review section mobile */
      .blog.section-big-pb-space {
          padding: 0 !important;
          margin-bottom: 0 !important;
      }

      /* Berita and Video sections mobile */
      section.py-2,
      .blog.py-2 {
          padding: 0 !important;
          margin-bottom: 0 !important;
      }

      section.py-3,
      .blog.py-3 {
          padding: 0 !important;
          margin-bottom: 0 !important;
      }

      /* Section titles mobile - Ultra minimal spacing */
      .title8.section-big-my-space {
          margin-bottom: 0 !important;
          margin-top: 0 !important;
      }

      .title8.section-big-my-space h4 {
          margin-bottom: 0 !important;
      }

      .review-wrapper {
          width: 100% !important;
          max-width: 250px !important;
          margin: 0 auto !important;
      }

      /* News and video cards mobile */
      .card-berita-blog,
      .card-video-genone {
          max-width: 280px !important;
          min-height: 180px !important;
          margin: 0 5px !important;
      }

      /* Owl carousel mobile */
      .owl-carousel .item {
          padding: 3px !important;
          min-height: auto !important;
      }

      /* Footer mobile */
      .footer1 {
          padding: 10px 0 !important;
          margin-top: 15px !important;
      }
  }

  /* ===== EXTRA SMALL MOBILE STYLES ===== */
  @media (max-width: 480px) {
      /* No negative margin for extra small mobile - keep cards centered */
      .mau-di-kasi-owl,
      .owl-home-slider-berita-terbaru,
      .owl-home-slider-video-terbaru {
          margin: 0 !important; /* No negative margin for small mobile */
      }

      /* Extra padding for small mobile */
      .mau-di-kasi-owl .item,
      .owl-home-slider-berita-terbaru .item,
      .owl-home-slider-video-terbaru .item {
          padding: 0 25px !important; /* Extra padding for small mobile spacing */
      }

      /* Single column layout */
      .col-lg-3.col-md-6 {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          padding: 2px 5px !important;
      }

      .motor-card {
          max-width: 100% !important;
          margin: 0 auto 6px auto !important;
      }

      .motor-image-container {
          height: 250px !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
          max-width: 100% !important;
          max-height: 100% !important;
      }

      .nav-link {
          font-size: 9px !important;
          padding: 3px 8px !important;
      }

      .motor-honda-section h2 {
          font-size: 1rem !important;
      }

      .btn-more-product {
          font-size: 0.75rem !important;
          padding: 6px 12px !important;
      }

      .motor-card .motor-name-section h5.card-title {
        font-size: 1.2rem !important;
      }




      .motor-card small.text-muted {
          font-size: 0.55rem !important;
      }

      .motor-card .fw-bold {
          font-size: 0.65rem !important;
      }

      .btn-compare {
          font-size: 0.6rem !important;
          padding: 3px 5px !important;
      }

      /* ===== REVIEW SECTION MOBILE ===== */
      .review-wrapper {
          width: 100% !important;
          max-width: 250px !important;
          margin: 0 auto !important;
      }

      .img-review-bg {
          height: 140px !important;
      }

      .review-text {
          min-height: 100px !important;
      }

      .review-text h4 {
          font-size: 0.9rem !important;
      }

      .review-text p {
          font-size: 0.75rem !important;
      }

      /* ===== BERITA TERBARU SECTION MOBILE ===== */
      .owl-home-slider-berita-terbaru {
          max-width: 100% !important;
          width: 100% !important;
          min-height: 200px !important;
          margin: 0 auto !important;
      }

      .owl-home-slider-berita-terbaru .card-video-genone .card-img-top {
          width: 100% !important;
          max-width: 100% !important;
          height: 150px !important;
          display: block !important;
      }

      .owl-home-slider-berita-terbaru .card-video-genone .card-body {
          width: 100% !important;
          max-width: 100% !important;
          padding: 10px !important;
      }

      .owl-home-slider-berita-terbaru .card-video-genone .card-title {
          font-size: 0.85rem !important;
      }

      /* ===== BERITA SECTION MOBILE ===== */
      .card-berita-blog {
          max-width: 100% !important;
          width: 100% !important;
          min-height: 200px !important;
          margin: 0 auto !important;
      }

      .card-berita-blog .position-relative {
          width: 100% !important;
          max-width: 100% !important;
          overflow: hidden !important;
      }

      .card-berita-blog .card-img-top {
          width: 100% !important;
          max-width: 100% !important;
          height: 150px !important;
          display: block !important;
      }

      .card-berita-blog .card-body {
          width: 100% !important;
          max-width: 100% !important;
          padding: 10px !important;
      }

      .card-berita-blog .card-title {
          font-size: 0.85rem !important;
      }

      .card-berita-blog .badge {
          font-size: 0.65rem !important;
          padding: 2px 5px !important;
      }

      /* ===== VIDEO SECTION MOBILE ===== */
      .card-video-genone {
          max-width: 100% !important;
          width: 100% !important;
          min-height: 200px !important;
          margin: 0 auto !important;
      }

      .card-video-genone .card-img-top {
          width: 100% !important;
          max-width: 100% !important;
          height: 150px !important;
          display: block !important;
      }

      .card-video-genone .card-body {
          width: 100% !important;
          max-width: 100% !important;
          padding: 10px !important;
      }

      .card-video-genone .card-title {
          font-size: 0.85rem !important;
      }

      /* Ultra reduced spacing between sections for maximum tightness */
      .blog.section-big-pb-space {
          margin-bottom: 0 !important;
          padding-bottom: 0 !important;
      }

      .blog.py-2 {
          margin-bottom: 0 !important;
          padding-bottom: 0 !important;
      }

      /* ===== OWL CAROUSEL MOBILE ===== */
      .owl-carousel .item {
          padding: 3px !important;
      }

      .mau-di-kasi-owl .item {
          padding: 0 !important; /* Removed all padding for wider cards */
      }

      .owl-home-slider-news .item {
          padding: 5px !important;
      }

      .owl-home-slider .item {
          padding: 5px !important;
      }

      /* Owl Carousel Navigation Mobile */
      .owl-carousel .owl-nav {
          position: absolute !important;
          top: 50% !important;
          width: 100% !important;
          transform: translateY(-50%) !important;
          display: flex !important;
          justify-content: space-between !important;
          z-index: 10 !important;
          padding: 0 5px !important;
      }

      .owl-carousel .owl-nav button {
          background: rgba(0, 0, 0, 0.5) !important;
          color: white !important;
          border: none !important;
          width: 30px !important;
          height: 30px !important;
          border-radius: 50% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          transition: all 0.3s ease !important;
          margin: 0 5px !important;
          flex-shrink: 0 !important;
      }

      .owl-carousel .owl-nav button:hover {
          background: #dc3545 !important;
          transform: scale(1.1) !important;
      }

      .owl-carousel .owl-nav button span {
          font-size: 16px !important;
      }

      /* Owl Carousel Dots Mobile */
      .owl-carousel .owl-dots {
          text-align: center !important;
          margin-top: 10px !important;
      }

      .owl-carousel .owl-dot {
          display: inline-block !important;
          margin: 0 3px !important;
      }

      .owl-carousel .owl-dot span {
          width: 8px !important;
          height: 8px !important;
          background: #ccc !important;
          border-radius: 50% !important;
          display: inline-block !important;
          transition: all 0.3s ease !important;
      }

      .owl-carousel .owl-dot.active span {
          background: #dc3545 !important;
          width: 24px !important;
          border-radius: 4px !important;
      }

      /* Owl Carousel Item Container */
      .owl-carousel .owl-item {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
      }

      .owl-carousel .item {
          width: 100% !important;
          max-width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          overflow: visible !important;
      }

      .owl-home-slider-news .item,
      .owl-home-slider .item {
          width: 100% !important;
          max-width: 100% !important;
          padding: 5px !important;
          box-sizing: border-box !important;
      }

      .owl-home-slider-berita-terbaru .item,
      .owl-home-slider-video-terbaru .item,
      .mau-di-kasi-owl .item {
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 !important; /* Removed all padding for wider cards */
          box-sizing: border-box !important;
      }
  }
  @media (max-width: 768px) {
      /* Fix overflow issues */
      body {
          overflow-x: hidden !important;
      }

      /* Container width fixes */
      .container-fluid {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      /* Row spacing fixes */
      .row {
          margin-left: -5px !important;
          margin-right: -5px !important;
      }

      .row > * {
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      /* Promo section mobile layout */
      .w-100.py-2.position-relative {
          padding: 10px 0 !important;
      }

      .w-100.py-2.position-relative .container {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      /* Carousel mobile fixes */
      #promoCarousel {
          margin-bottom: 15px !important;
      }

      #promoCarousel .carousel-item .row {
          margin: 0 !important;
      }

      #promoCarousel .col-4 {
          padding: 0 5px !important;
      }

      /* Text section mobile */
      .col-md-3 h3 {
          font-size: 1.1rem !important;
          margin-bottom: 10px !important;
      }

      .col-md-3 p {
          font-size: 0.9rem !important;
          margin-bottom: 15px !important;
      }

      .col-md-3 .btn {
          font-size: 0.8rem !important;
          padding: 8px 15px !important;
          margin-right: 5px !important;
      }

      /* Motor section header mobile */
      .d-flex.flex-column.flex-md-row {
          align-items: flex-start !important;
      }

      .d-flex.flex-column.flex-md-row h2 {
          font-size: 1.4rem !important;
          margin-bottom: 15px !important;
          text-align: left !important;
      }

      /* Navigation pills mobile */
      .nav.nav-pills {
          width: 100% !important;
          justify-content: flex-start !important;
          overflow-x: auto !important;
          white-space: nowrap !important;
          padding-bottom: 5px !important;
      }

      .nav.nav-pills::-webkit-scrollbar {
          height: 3px !important;
      }

      .nav.nav-pills::-webkit-scrollbar-track {
          background: #f1f1f1 !important;
      }

      .nav.nav-pills::-webkit-scrollbar-thumb {
          background: #dc3545 !important;
          border-radius: 3px !important;
      }

      /* Badge positioning mobile */
      .badge.position-absolute {
          top: 5px !important;
          left: 5px !important;
          font-size: 9px !important;
          padding: 2px 6px !important;
      }

      /* Image hover effects mobile - disable for better performance */
      .motor-card:hover .front-img,
      .motor-card:hover .back-img {
          opacity: 1 !important;
          transform: none !important;
      }

      /* Form button mobile */
      .motor-card form button {
          font-size: 0.7rem !important;
          padding: 5px 8px !important;
          border-radius: 15px !important;
      }

      /* Price display mobile */
      .otr-section .fs-5 {
          font-size: 1.1rem !important;
      }

      /* Grid spacing mobile */
      #motorGrid .row.g-4 {
          --bs-gutter-x: 8px !important;
          --bs-gutter-y: 12px !important;
      }

      /* More product section mobile */
      .row.mt-3 {
          margin-top: 15px !important;
      }

      /* Video section mobile */
      .py-2 {
          padding-top: 10px !important;
          padding-bottom: 10px !important;
      }

      /* Banner carousel mobile */
      #bannerCarousel {
          margin-bottom: 15px !important;
      }

      #bannerCarousel img {
          max-height: 200px !important;
      }

      /* Review section mobile */
      .title8.section-big-my-space h4 {
          font-size: 1.2rem !important;
          margin-bottom: 10px !important;
          margin-top: 15px !important;
          padding-top: 10px !important;
      }

      .blog.section-big-pb-space {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
      }

      /* Owl carousel mobile */
      .owl-carousel .item {
          min-height: auto !important;
          padding: 5px !important;
      }

      /* Override for wider cards - tighter spacing for desktop */
      .mau-di-kasi-owl .item,
      .owl-home-slider-berita-terbaru .item,
      .owl-home-slider-video-terbaru .item {
          padding: 0 5px !important; /* Tighter spacing for desktop */
      }
  }

  /* Desktop ultra tight spacing override */
  @media (min-width: 992px) {
      .mau-di-kasi-owl .item,
      .owl-home-slider-berita-terbaru .item,
      .owl-home-slider-video-terbaru .item {
          padding: 0 3px !important; /* Ultra tight spacing for desktop */
      }

      /* News section mobile */
      .card-berita-blog {
          min-height: 200px !important;
          max-width: 300px !important;
      }

      .card-video-genone {
          min-height: 200px !important;
          max-width: 300px !important;
      }
  }

  /* Extra mobile fixes for very small screens */
  @media (max-width: 480px) {
      /* Ultra compact layout */
      .motor-honda-section .container {
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      .col-lg-3.col-md-6 {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          margin-bottom: 10px !important;
      }

      .motor-card {
          max-width: 100% !important;
          margin: 0 auto 10px auto !important;
      }

      .motor-image-container {
          height: 250px !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: #f8f9fa !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
          transform: scale(1.3) !important;
      }

      #motorFilter .nav-link {
          font-size: 9px !important;
          padding: 4px 8px !important;
          margin-right: 2px !important;
      }

      .motor-honda-section h2 {
          font-size: 1.1rem !important;
      }

      .btn-more-product {
          font-size: 11px !important;
          padding: 6px 15px !important;
      }
  }
  .blog-card {
      transition: all 0.3s ease !important;
      border-radius: 15px !important;
      overflow: hidden !important;
  }

  .blog-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  }

  .blog-card .card-img-top {
      transition: transform 0.3s ease !important;
  }

  .blog-card:hover .card-img-top {
      transform: scale(1.05) !important;
  }

  /* EMERGENCY MOBILE LAYOUT FIXES */
  @media (max-width: 768px) {
      /* Force proper box-sizing */
      *, *::before, *::after {
          box-sizing: border-box !important;
      }

      /* Prevent any element from causing horizontal scroll */
      * {
          max-width: 100% !important;
      }

      /* Popup Promo Mobile Fixes - Universal untuk semua ukuran layar */
      /* Pastikan modal berada di atas navbar */
      #diskonPopup {
          z-index: 10000 !important;
      }

      #diskonPopup .modal-backdrop {
          z-index: 9999 !important;
      }

      #diskonPopup .modal-dialog {
          margin: 0 !important;
          max-width: 100% !important;
          width: 100% !important;
          height: 100vh !important;
          height: 100dvh !important;
          max-height: 100vh !important;
          max-height: 100dvh !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          overflow: hidden !important;
          padding: 0 !important;
          z-index: 10001 !important;
          position: relative !important;
      }

      #diskonPopup .modal-content {
          border-radius: 15px !important;
          width: calc(100% - 16px) !important;
          max-width: calc(100% - 16px) !important;
          height: calc(100vh - 16px) !important;
          height: calc(100dvh - 16px) !important;
          max-height: calc(100vh - 16px) !important;
          max-height: calc(100dvh - 16px) !important;
          margin: 8px !important;
          padding: 0 !important;
          overflow: hidden !important;
          display: flex !important;
          flex-direction: column !important;
          position: relative !important;
          z-index: 10002 !important;
      }

      #diskonPopup .modal-header {
          flex-shrink: 0 !important;
          flex-grow: 0 !important;
          min-height: 40px !important;
          max-height: 60px !important;
          height: auto !important;
          padding: 0.5rem 0.75rem !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
          color: white !important;
          z-index: 10003 !important;
          position: relative !important;
      }

      #diskonPopup .modal-header .modal-title {
          flex: 1 1 auto !important;
          padding-right: 0.5rem !important;
      }

      /* Tombol Close X untuk Mobile */
      #diskonPopup .modal-header .btn-close {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          width: 32px !important;
          height: 32px !important;
          min-width: 32px !important;
          min-height: 32px !important;
          padding: 0 !important;
          margin: 0 !important;
          background: rgba(255, 255, 255, 0.2) !important;
          border-radius: 50% !important;
          border: 2px solid rgba(255, 255, 255, 0.5) !important;
          cursor: pointer !important;
          flex-shrink: 0 !important;
          position: relative !important;
          z-index: 10004 !important;
          transition: all 0.3s ease !important;
          /* Reset Bootstrap default */
          background-image: none !important;
          filter: none !important;
          -webkit-filter: none !important;
      }

      #diskonPopup .modal-header .btn-close:hover,
      #diskonPopup .modal-header .btn-close:focus {
          background: rgba(255, 255, 255, 0.3) !important;
          border-color: rgba(255, 255, 255, 0.8) !important;
          transform: scale(1.1) !important;
      }

      /* Tanda X menggunakan pseudo-elements */
      #diskonPopup .modal-header .btn-close::before {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          width: 16px !important;
          height: 2.5px !important;
          background: white !important;
          transform: translate(-50%, -50%) rotate(45deg) !important;
          border-radius: 1px !important;
          z-index: 1 !important;
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
      }

      #diskonPopup .modal-header .btn-close::after {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          width: 16px !important;
          height: 2.5px !important;
          background: white !important;
          transform: translate(-50%, -50%) rotate(-45deg) !important;
          border-radius: 1px !important;
          z-index: 1 !important;
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
      }

      /* Pastikan btn-close-white tidak mengganggu */
      #diskonPopup .modal-header .btn-close-white {
          filter: none !important;
          -webkit-filter: none !important;
          opacity: 1 !important;
          background-image: none !important;
      }

      #diskonPopup .modal-body {
          overflow-y: auto !important;
          overflow-x: hidden !important;
          flex: 1 1 auto !important;
          flex-grow: 1 !important;
          flex-shrink: 1 !important;
          min-height: 0 !important;
          height: auto !important;
          max-height: calc(100vh - 76px) !important; /* 16px margin + 60px header */
          max-height: calc(100dvh - 76px) !important;
          -webkit-overflow-scrolling: touch !important;
          scroll-behavior: smooth !important;
          padding: 0.5rem !important;
          overscroll-behavior: contain !important;
          will-change: scroll-position !important;
          position: relative !important;
      }

      /* Override inline style yang menghalangi scrolling */
      #diskonPopup .modal-body .row.g-0 {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
          overflow: visible !important;
      }

      #diskonPopup .modal-body .col-md-6 {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
      }

      #diskonPopup .modal-body .motor-info-container {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
      }

      #diskonPopup .motor-image-wrapper {
          width: 100% !important;
          height: 180px !important;
          min-height: 180px !important;
          max-height: 180px !important;
          margin-bottom: 0.75rem !important;
          margin-top: 0.5rem !important;
          flex-shrink: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      #diskonPopup .motor-image-wrapper img {
          max-width: 95% !important;
          max-height: 95% !important;
          width: auto !important;
          height: auto !important;
          object-fit: cover !important;
          transform: scale(1.2) !important; /* Slight zoom to remove whitespace */
          transition: transform 0.3s ease !important;
      }

      /* Pastikan form terlihat */
      #diskonPopup .col-md-6:last-child {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          height: auto !important;
          min-height: auto !important;
      }

      #diskonPopup #diskonForm {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          height: auto !important;
          min-height: auto !important;
      }

      #diskonPopup .form-control,
      #diskonPopup .btn,
      #diskonPopup input[type="text"],
      #diskonPopup input[type="tel"],
      #diskonPopup button[type="submit"] {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
      }

      #diskonPopup .motor-image-wrapper img {
          transform: scale(1.05) !important;
          max-width: 95% !important;
          max-height: 95% !important;
          padding: 8px !important;
      }

      #diskonPopup .motor-info-container {
          padding: 0.25rem 0.5rem 1rem 0.5rem !important;
      }

      #diskonPopup #motorName {
          font-size: 0.9rem !important;
          margin-bottom: 0.75rem !important;
          margin-top: 0.5rem !important;
      }

      #diskonPopup #motorPrice {
          font-size: 1rem !important;
      }

      #diskonPopup #motorDP,
      #diskonPopup #motorCicilan {
          font-size: 1rem !important;
      }

      /* Specific fixes for elements that might overflow */
      .row, .container, .container-fluid, .custom-container,
      .carousel-inner, .carousel-item, .card, .motor-card,
      .nav, .nav-pills, #motorFilter, .motor-honda-section,
      .promo-card, .blog-card, .review-wrapper {
          max-width: 100% !important;
          overflow-x: hidden !important;
      }

      /* Fix Bootstrap grid system */
      .container {
          width: 100% !important;
          max-width: 100% !important;
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      .row {
          margin-left: -5px !important;
          margin-right: -5px !important;
          width: calc(100% + 10px) !important;
          max-width: calc(100% + 10px) !important;
      }

      .col-md-9, .col-md-3, .col-lg-3, .col-md-6 {
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      /* Fix promo section layout */
      .w-100.py-2.position-relative .container .row {
          align-items: stretch !important;
      }

      .col-md-9 {
          margin-bottom: 15px !important;
      }

      /* Fix carousel container */
      #promoCarousel {
          width: 100% !important;
          max-width: 100% !important;
          overflow: hidden !important;
      }

      #promoCarousel .carousel-inner {
          width: 100% !important;
          max-width: 100% !important;
      }

      #promoCarousel .carousel-item {
          width: 100% !important;
          max-width: 100% !important;
      }

      #promoCarousel .col-4 {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          padding: 0 5px !important;
      }

      /* Fix promo card */
      .promo-card {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 auto !important;
      }

      .promo-card img {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          max-height: 500px !important; /* Increased from 200px */
          object-fit: cover !important;
          transform: scale(1.15) !important;
          transition: transform 0.4s ease !important; /* Changed from cover to contain */
      }

      /* Fix text section */
      .col-md-3 {
          width: 100% !important;
          max-width: 100% !important;
          padding: 10px !important;
          text-align: center !important;
      }

      .col-md-3 .d-flex.gap-2 {
          flex-direction: column !important;
          gap: 8px !important;
          align-items: center !important;
      }

      .col-md-3 .btn {
          width: auto !important;
          max-width: 200px !important;
          margin: 2px auto !important;
          display: block !important;
      }

      /* Fix motor section */
      .motor-honda-section .container {
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 8px !important;
      }

      /* Fix filter navigation */
      .d-flex.flex-column.flex-md-row {
          flex-direction: column !important;
          align-items: center !important;
          width: 100% !important;
      }

      .nav.nav-pills {
          width: 100% !important;
          max-width: 100% !important;
          justify-content: center !important;
          flex-wrap: wrap !important;
          overflow-x: visible !important;
          padding: 0 !important;
      }

      /* Fix motor grid */
      #motorGrid {
          width: 100% !important;
          max-width: 100% !important;
      }

      #motorGrid .row {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 -3px !important;
      }

      #motorGrid .col-lg-3.col-md-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          padding: 3px !important;
          width: 50% !important;
      }

      /* Fix motor cards */
      .motor-card {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 0 8px 0 !important;
          border-radius: 8px !important;
      }

      .motor-image-container {
          width: 100% !important;
          max-width: 100% !important;
          height: 250px !important; /* Increased from 140px */
          overflow: hidden !important;
          padding: 0 !important;
          background: #f8f9fa !important;
      }

      .motor-image-container img {
          width: 100% !important;
          max-width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
      }

      /* Fix card content */
      .motor-card .card-body {
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
      }

      .motor-card .motor-name-section,
      .motor-card .otr-section {
          width: 100% !important;
          max-width: 100% !important;
          padding: 4px 6px !important;
          text-align: center !important;
      }

      .motor-card .row.g-0 {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 !important;
      }

      .motor-card .row.g-0 .col-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          width: 50% !important;
          padding: 4px 3px !important;
          text-align: center !important;
      }

      /* Fix buttons */
      .motor-card .p-3 {
          width: 100% !important;
          max-width: 100% !important;
          padding: 6px !important;
          text-align: center !important;
      }

      .motor-card form {
          width: 100% !important;
          max-width: 100% !important;
      }

      .motor-card button {
          width: 100% !important;
          max-width: 100% !important;
          font-size: 0.65rem !important;
          padding: 4px 6px !important;
          border-radius: 10px !important;
      }

      /* Fix text sizes */
      .motor-card .card-title {
          font-size: 0.7rem !important;
          line-height: 1.1 !important;
          margin: 0 !important;
          padding: 0 !important;
          text-align: center !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
      }

      .motor-card small.text-muted {
          font-size: 0.55rem !important;
          line-height: 1.1 !important;
          margin: 0 !important;
          text-align: center !important;
      }

      .motor-card .fw-bold {
          font-size: 0.65rem !important;
          line-height: 1.1 !important;
          margin: 0 !important;
          text-align: center !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
      }

      /* Fix badges */
      .badge.position-absolute {
          top: 2px !important;
          left: 2px !important;
          font-size: 7px !important;
          padding: 1px 3px !important;
          border-radius: 6px !important;
          z-index: 10 !important;
      }

      /* Fix section spacing */
      section {
          width: 100% !important;
          max-width: 100% !important;
          padding: 8px 0 !important;
          margin: 0 0 5px 0 !important;
          overflow-x: hidden !important;
      }

      /* Fix titles */
      .title8 {
          width: 100% !important;
          max-width: 100% !important;
          text-align: center !important;
          margin: 8px 0 !important;
          padding: 0 10px !important;
      }

      .title8 h4 {
          font-size: 1rem !important;
          margin: 0 !important;
          text-align: center !important;
      }

      /* Fix more product button */
      .btn-more-product {
          width: auto !important;
          max-width: 200px !important;
          margin: 10px auto !important;
          display: block !important;
          font-size: 0.75rem !important;
          padding: 6px 12px !important;
      }
  }

  /* Ultra small screens */
  @media (max-width: 480px) {
      /* Single column for very small screens */
      #motorGrid .col-lg-3.col-md-6 {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          width: 100% !important;
          padding: 2px 5px !important;
      }

      /* Keep DP and Cicilan side by side on mobile */
      .motor-card .row.g-0 .col-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          width: 50% !important;
          padding: 4px 3px !important;
          text-align: center !important;
      }

      /* Popup Promo Ultra Small Screen Fixes */
      #diskonPopup .motor-image-wrapper {
          width: 100% !important;
          height: 160px !important;
          margin-bottom: 1rem !important;
          margin-top: 0.25rem !important;
      }

      #diskonPopup .motor-image-wrapper img {
          transform: scale(1.0) !important;
          max-width: 100% !important;
          max-height: 100% !important;
          padding: 6px !important;
      }

      #diskonPopup .motor-info-container {
          padding: 0.25rem !important;
      }

      #diskonPopup #motorName {
          font-size: 0.8rem !important;
          margin-bottom: 0.5rem !important;
          margin-top: 0.5rem !important;
      }

      #diskonPopup #motorPrice {
          font-size: 0.9rem !important;
      }

      #diskonPopup #motorDP,
      #diskonPopup #motorCicilan {
          font-size: 0.9rem !important;
      }

      .motor-card {
          max-width: 100% !important;
          margin: 0 auto 6px auto !important;
      }

      .motor-image-container {
          height: 250px !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: #f8f9fa !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
          transform: scale(1.3) !important;
      }

      .nav-link {
          font-size: 8px !important;
          padding: 2px 6px !important;
          margin: 1px !important;
      }

      .motor-card .card-title {
          font-size: 0.65rem !important;
      }

      .motor-card small.text-muted {
          font-size: 0.5rem !important;
      }

      .motor-card .fw-bold {
          font-size: 0.6rem !important;
      }

      .btn-compare {
          font-size: 0.55rem !important;
          padding: 2px 4px !important;
      }
  }

  /* Button Hover Effects - Black to Original Color */
  .btn, .btn-danger, .btn-basic, .btn-more-product {
      background: #333 !important;
      color: white !important;
      border: 2px solid #333 !important;
      font-weight: 600 !important;
      border-radius: 20px !important;
      transition: all 0.3s ease !important;
  }

  .btn-compare {
      background: #000000 !important;
      color: white !important;
      border: 2px solid #000000 !important;
      font-weight: 600 !important;
      border-radius: 20px !important;
      transition: all 0.3s ease !important;
  }

  .btn-danger:hover, .btn:hover {
      background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
      border-color: #dc3545 !important;
      color: white !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4) !important;
  }

  .btn-basic:hover {
      background: linear-gradient(45deg, #007bff, #0056b3) !important;
      border-color: #007bff !important;
      color: white !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4) !important;
  }

  .btn-compare:hover {
      background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
      border-color: #dc3545 !important;
      color: white !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4) !important;
  }

  .btn-more-product:hover {
      background: linear-gradient(45deg, #6f42c1, #5a32a3) !important;
      border-color: #6f42c1 !important;
      color: white !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4) !important;
  }

  /* Tab Navigation Styles - FIXED */
  #motorFilter .nav-link {
      border-radius: 25px !important;
      padding: 8px 20px !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      transition: all 0.3s ease !important;
      border: 2px solid #dee2e6 !important;
      text-decoration: none !important;
      background-color: white !important;
      color: #6c757d !important;
      margin-right: 8px !important;
      margin-bottom: 8px !important;
  }

  /* Popup Promo Styling Enhancements */
  #diskonPopup .motor-image-wrapper {
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
      border: 2px solid #e9ecef !important;
      transition: all 0.3s ease !important;
  }

  #diskonPopup .motor-image-wrapper:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  }

  #diskonPopup .motor-image-wrapper img {
      transition: transform 0.3s ease !important;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) !important;
  }

  #diskonPopup .motor-image-wrapper:hover img {
      transform: scale(1.15) !important;
  }

  #diskonPopup .motor-info-container {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  }

  #motorFilter .nav-link.active {
      background-color: #dc3545 !important;
      border-color: #dc3545 !important;
      color: white !important;
      box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
  }

  #motorFilter .nav-link:not(.active):hover {
      background-color: #f8f9fa !important;
      color: #dc3545 !important;
      border-color: #dc3545 !important;
      transform: translateY(-1px) !important;
  }

  /* Motor Item Animation */
  .motor-item {
      transition: all 0.3s ease !important;
  }

  /* Motor Image Non-Clickable Styling */
  .motor-image-container {
      cursor: default !important;
  }

  .motor-image-container img {
      cursor: default !important;
      pointer-events: none !important;
  }

  .motor-image-container:hover {
      transform: none !important;
  }

  /* Motor card content non-clickable */
  .motor-card .card-body {
      cursor: default !important;
  }

  .motor-card .card-title,
  .motor-card .otr-section,
  .motor-card .motor-name-section {
      cursor: default !important;
      pointer-events: none !important;
  }

  /* Only button should be clickable */
  .motor-card .btn {
      cursor: pointer !important;
      pointer-events: auto !important;
  }

  .motor-item[style*="display: none"] {
      opacity: 0 !important;
      transform: scale(0.95) !important;
  }

  .motor-item[style*="display: block"] {
      opacity: 1 !important;
      transform: scale(1) !important;
  }

  /* Motor Card Styles - FIXED */
  .motor-card {
      border-radius: 15px !important;
      overflow: hidden !important;
      transition: all 0.3s ease !important;
      background: white !important;
      border: none !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  .motor-card:hover {
      box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  }

  .motor-card .card-body {
      padding: 0 !important;
  }

  .motor-card .card-title {
      font-size: 1rem !important;
      font-weight: 700 !important;
      color: #333 !important;
      margin-bottom: 0 !important;
  }

  /* Badge Styles - FIXED */
  .badge-new {
      background: linear-gradient(45deg, #dc3545, #ff6b7a) !important;
      color: white !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 4px 8px !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
      z-index: 10 !important;
  }

  .badge-favorit {
      background: linear-gradient(45deg, #ffc107, #ffed4e) !important;
      color: #333 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 4px 8px !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3) !important;
      z-index: 10 !important;
  }

  /* Button Styles - FIXED */
  .btn-compare {
      background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
      border: 1px solid #dc3545 !important;
      color: white !important;
      font-weight: 600 !important;
      border-radius: 20px !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
  }

  .btn-compare:hover {
      background: linear-gradient(45deg, #c82333, #dc3545) !important;
      border-color: #c82333 !important;
      color: white !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
  }

  .btn-detail {
      background-color: transparent !important;
      border: 1px solid #dee2e6 !important;
      color: #6c757d !important;
      font-weight: 500 !important;
      transition: all 0.3s ease !important;
  }

  .btn-detail:hover {
      background-color: #f8f9fa !important;
      border-color: #adb5bd !important;
      color: #495057 !important;
  }

  /* Image Container - FIXED - FULL IMAGE NO PADDING */
  .motor-image-container {
      position: relative !important;
      height: 250px !important; /* Increased from 180px */
      background: #f8f9fa !important;
      overflow: hidden !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  .motor-image-container img {
      transition: all 0.4s ease !important;
      object-fit: cover !important; /* Changed from contain to cover */
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
  }

  /* Compact spacing for motor card sections */
  .motor-card .motor-name-section {
      padding: 8px 15px !important;
      border-bottom: 1px solid #f0f0f0 !important;
  }

  .motor-card .otr-section {
      padding: 8px 15px !important;
      border-bottom: 1px solid #f0f0f0 !important;
  }

  .motor-card .row.g-0 {
      border-bottom: 1px solid #f0f0f0 !important;
  }

  .motor-card .row.g-0 .col-6 {
      padding: 8px 10px !important;
  }

  .motor-card .row.g-0 .col-6.border-end {
      border-right: 1px solid #f0f0f0 !important;
  }

  .motor-card .p-3 {
      padding: 10px 15px !important;
  }

  .motor-card small.text-muted {
      font-size: 0.75rem !important;
      margin-bottom: 2px !important;
  }

  .motor-card .fw-bold {
      font-size: 0.9rem !important;
  }

  /* Price Info Styling */
  .price-info .fw-bold {
      font-weight: 700 !important;
  }

  .price-info .text-success {
      color: #28a745 !important;
  }

  .price-info .text-primary {
      color: #007bff !important;
  }

  .price-info .text-dark {
      color: #333 !important;
  }

  /* More Product Button */
  .btn-more-product {
      background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
      border: none !important;
      color: white !important;
      font-weight: 600 !important;
      padding: 12px 30px !important;
      border-radius: 25px !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
  }

  .btn-more-product:hover {
      background: linear-gradient(45deg, #c82333, #dc3545) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
      color: white !important;
  }

  /* Responsive Design - MOBILE FIXES */
  @media (max-width: 768px) {
      /* Container fixes */
      .container {
          padding-left: 15px !important;
          padding-right: 15px !important;
          max-width: 100% !important;
      }

      /* Promo section mobile fixes */
      .col-md-9 {
          margin-bottom: 20px !important;
      }

      .col-md-3 {
          text-align: center !important;
      }

      /* Motor Honda section mobile fixes */
      .motor-honda-section {
          padding: 20px 0 !important;
      }

      .motor-honda-section .container {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      /* Filter navigation mobile fixes */
      #motorFilter {
          justify-content: flex-start !important;
          flex-wrap: wrap !important;
          gap: 6px !important;
          margin-bottom: 15px !important;
      }

      #motorFilter .nav-link {
          font-size: 11px !important;
          padding: 6px 12px !important;
          margin-right: 3px !important;
          margin-bottom: 6px !important;
          white-space: nowrap !important;
      }

      /* Motor grid mobile fixes */
      .row.g-4 {
          --bs-gutter-x: 10px !important;
          --bs-gutter-y: 15px !important;
      }

      .col-lg-3.col-md-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      /* Motor card mobile fixes */
      .motor-card {
          margin-bottom: 10px !important;
      }

      .motor-card .card-body {
          padding: 0 !important;
      }

      .motor-card .card-title {
          font-size: 0.85rem !important;
          line-height: 1.2 !important;
      }

      .motor-image-container {
          height: 220px !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: #f8f9fa !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
          transform: scale(1.3) !important;
      }

      .motor-card .motor-name-section {
          padding: 6px 8px !important;
      }

      .motor-card .otr-section {
          padding: 6px 8px !important;
      }

      .motor-card .row.g-0 .col-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          width: 50% !important;
          padding: 6px 6px !important;
          text-align: center !important;
      }

      .motor-card .p-3 {
          padding: 8px !important;
      }

      .motor-card small.text-muted {
          font-size: 0.65rem !important;
      }

      .motor-card .fw-bold {
          font-size: 0.75rem !important;
      }

      /* Button mobile fixes */
      .btn-compare {
          font-size: 0.75rem !important;
          padding: 6px 8px !important;
      }

      /* Section spacing mobile fixes */
      section {
          padding-top: 15px !important;
          padding-bottom: 15px !important;
      }

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

      .title8 h4 {
          font-size: 1.2rem !important;
      }
  }

  @media (max-width: 576px) {
      /* Extra small mobile fixes */
      .container {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      /* Single column layout for very small screens */
      .col-lg-3.col-md-6 {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          padding-left: 5px !important;
          padding-right: 5px !important;
      }

      /* Keep DP and Cicilan side by side on mobile */
      .motor-card .row.g-0 .col-6 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
          width: 50% !important;
          padding: 4px 3px !important;
          text-align: center !important;
      }

      /* Filter navigation extra small */
      #motorFilter .nav-link {
          font-size: 10px !important;
          padding: 5px 10px !important;
      }

      /* Motor image smaller */
      .motor-image-container {
          height: 220px !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: #f8f9fa !important;
      }

      .motor-image-container img {
          object-fit: cover !important;
          width: 100% !important;
          height: 100% !important;
      }

      /* More product button mobile */
      .btn-more-product {
          padding: 8px 20px !important;
          font-size: 12px !important;
      }

      /* Card title smaller */
      .motor-card .card-title {
          font-size: 0.8rem !important;
      }

      /* Text smaller */
      .motor-card small.text-muted {
          font-size: 0.6rem !important;
      }

      .motor-card .fw-bold {
          font-size: 0.7rem !important;
      }

      /* Header section mobile */
      .motor-honda-section h2 {
          font-size: 1.3rem !important;
          margin-bottom: 15px !important;
      }

      /* Review section mobile */
      .review-wrapper {
          width: 100% !important;
          max-width: 280px !important;
      }

      /* Blog cards mobile */
      .card-berita-blog,
      .card-video-genone {
          max-width: 100% !important;
          margin: 0 5px !important;
      }
  }
/* ============================================================
   BLOK 2 (dari index_new.blade.php L3536-L3561)
   ============================================================ */
  .front-img {
    transition: opacity 0.3s ease-in-out;
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  .back-img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  .motor-card:hover .front-img {
    opacity: 0;
  }
  .motor-card:hover .back-img {
    opacity: 1;
  }
  .object-fit-cover {
    object-fit: cover;
  }
/* ============================================================
   BLOK 3 (dari index_new.blade.php L3562-L3950)
   ============================================================ */
  .promo-card {
    position: relative;
    overflow: hidden;
  }

  .promo-card img {
    transition: transform 0.3s ease;
  }

  .promo-card:hover img {
    transform: scale(1.05);
  }

  .promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.1rem;
    text-align: center;
    padding: 10px;
  }

  .promo-card:hover .promo-overlay {
    opacity: 1;
  }

  /* ===== OWL CAROUSEL PROMO HERO - SMOOTH & BEAUTIFUL ===== */
  #promoHeroCarouselHome {
      padding: 0 !important;
      position: relative !important;
      margin: 0 !important;
      display: block !important;
      overflow: hidden !important;
  }

  /* CRITICAL: Force hide all items by default */
  #promoHeroCarouselHome .item {
      display: none !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
  }

  /* Desktop: Before Owl loads, show only first 3 items in a row */
  @media (min-width: 992px) {
      #promoHeroCarouselHome:not(.owl-loaded) {
          display: flex !important;
          flex-wrap: nowrap !important;
          gap: 20px !important;
      }

      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(-n+3) {
          display: block !important;
          flex: 0 0 calc(33.333% - 14px) !important;
          max-width: calc(33.333% - 14px) !important;
      }

      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(n+4) {
          display: none !important;
      }
  }

  /* Tablet: Show 2 items */
  @media (min-width: 576px) and (max-width: 991px) {
      #promoHeroCarouselHome:not(.owl-loaded) {
          display: flex !important;
          flex-wrap: nowrap !important;
          gap: 15px !important;
      }

      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(-n+2) {
          display: block !important;
          flex: 0 0 calc(50% - 8px) !important;
          max-width: calc(50% - 8px) !important;
      }

      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(n+3) {
          display: none !important;
      }
  }

  /* Mobile: Show 1 item */
  @media (max-width: 575px) {
      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(1) {
          display: block !important;
          width: 100% !important;
      }

      #promoHeroCarouselHome:not(.owl-loaded) .item:nth-child(n+2) {
          display: none !important;
      }
  }

  /* After Owl Carousel loads, let it handle display */
  #promoHeroCarouselHome.owl-loaded .owl-item {
      display: block !important;
  }

  #promoHeroCarouselHome.owl-loaded .item {
      display: block !important;
  }

  /* Styling tombol slide Promo Hero */
  #promoHeroCarouselHome .owl-nav {
      position: absolute !important;
      top: 50% !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      justify-content: space-between !important;
      z-index: 10 !important;
      padding: 0 10px !important;
      pointer-events: none !important;
  }

  #promoHeroCarouselHome .owl-nav button {
      background: rgba(220, 53, 69, 0.9) !important;
      color: white !important;
      border: none !important;
      width: 50px !important;
      height: 50px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      font-size: 24px !important;
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      opacity: 1 !important;
      visibility: visible !important;
  }

  /* Ensure buttons are always visible */
  #promoHeroCarouselHome .owl-nav button.owl-prev,
  #promoHeroCarouselHome .owl-nav button.owl-next {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
  }

  /* Keep buttons visible in all carousel states */
  #promoHeroCarouselHome.owl-loaded .owl-nav,
  #promoHeroCarouselHome.owl-drag .owl-nav,
  #promoHeroCarouselHome.owl-grab .owl-nav {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
  }

  #promoHeroCarouselHome.owl-loaded .owl-nav button,
  #promoHeroCarouselHome.owl-drag .owl-nav button,
  #promoHeroCarouselHome.owl-grab .owl-nav button {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
  }

  /* Disabled state */
  #promoHeroCarouselHome .owl-nav button.disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
  }

  #promoHeroCarouselHome .owl-nav button:hover:not(.disabled) {
      background: #dc3545 !important;
      transform: scale(1.15) !important;
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5) !important;
  }

  #promoHeroCarouselHome .owl-nav button span {
      font-size: 24px !important;
      line-height: 1 !important;
      font-weight: bold !important;
  }

  /* Owl dots styling */
  #promoHeroCarouselHome .owl-dots {
      text-align: center !important;
      margin-top: 20px !important;
  }

  #promoHeroCarouselHome .owl-dot {
      display: inline-block !important;
      margin: 0 5px !important;
  }

  #promoHeroCarouselHome .owl-dot span {
      width: 12px !important;
      height: 12px !important;
      background: rgba(220, 53, 69, 0.3) !important;
      border-radius: 50% !important;
      display: block !important;
      transition: all 0.3s ease !important;
  }

  #promoHeroCarouselHome .owl-dot.active span {
      background: #dc3545 !important;
      width: 30px !important;
      border-radius: 6px !important;
      transform: scale(1.1) !important;
  }

  /* Promo card: bingkai kotak, gambar utuh */
  #promoHeroCarouselHome .promo-card {
      border-radius: 0 !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative !important;
      background: white !important;
      display: block !important;
      width: 100% !important;
  }

  #promoHeroCarouselHome .promo-card:hover {
      transform: translateY(-10px) !important;
      box-shadow: 0 15px 35px rgba(220, 53, 69, 0.3) !important;
  }

  #promoHeroCarouselHome .promo-card img {
      transition: opacity 0.3s ease !important;
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
      display: block !important;
  }

  #promoHeroCarouselHome .promo-card:hover img {
      transform: none !important;
  }

  /* Promo overlay smooth animation */
  #promoHeroCarouselHome .promo-overlay {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 60px !important;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) !important;
      opacity: 0 !important;
      transition: opacity 0.4s ease-in-out !important;
      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      padding: 20px !important;
      pointer-events: none !important;
  }

  #promoHeroCarouselHome .promo-card:hover .promo-overlay {
      opacity: 1 !important;
  }

  #promoHeroCarouselHome .promo-overlay p {
      color: white !important;
      font-weight: 700 !important;
      font-size: 1rem !important;
      margin: 0 !important;
      text-align: center !important;
      transform: translateY(15px) !important;
      transition: transform 0.4s ease-in-out !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  #promoHeroCarouselHome .promo-card:hover .promo-overlay p {
      transform: translateY(0) !important;
  }

  #promoHeroCarouselHome .promo-card p {
      transition: color 0.3s ease !important;
      border-radius: 0 !important;
  }

  #promoHeroCarouselHome .promo-card:hover p {
      color: #dc3545 !important;
  }

  @media (max-width: 768px) {
      #promoHeroCarouselHome .promo-overlay p {
          font-size: 20px !important;
      }

      #promoHeroCarouselHome .promo-card:hover {
          transform: translateY(-5px) !important;
      }

      #promoHeroCarouselHome .promo-card {
          margin-bottom: 15px !important;
      }

      .w-100.py-2.position-relative {
          padding-bottom: 40px !important;
      }

      .motor-honda-section {
          margin-top: 20px !important;
          padding-top: 25px !important;
      }
  }

  /* Promo Carousel Controls Styling */
  #promoCarousel .carousel-control-prev,
  #promoCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(220, 53, 69, 0.8);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
    transition: all 0.3s ease;
  }

  #promoCarousel .carousel-control-prev {
    left: 10px;
  }

  #promoCarousel .carousel-control-next {
    right: 10px;
  }

  #promoCarousel .carousel-control-prev:hover,
  #promoCarousel .carousel-control-next:hover {
    background: rgba(220, 53, 69, 1);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }

  #promoCarousel .carousel-control-prev-icon,
  #promoCarousel .carousel-control-next-icon {
    width: 24px;
    height: 24px;
  }

  /* Carousel Indicators */
  #promoCarousel .carousel-indicators {
    bottom: -30px;
  }

  #promoCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #dc3545;
    opacity: 0.5;
    border: none;
    margin: 0 5px;
  }

  #promoCarousel .carousel-indicators button.active {
    opacity: 1;
    transform: scale(1.2);
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    #promoCarousel .carousel-control-prev,
    #promoCarousel .carousel-control-next {
      width: 40px;
      height: 40px;
    }

    #promoCarousel .carousel-control-prev {
      left: 5px;
    }

    #promoCarousel .carousel-control-next {
      right: 5px;
    }

    #promoCarousel .carousel-control-prev-icon,
    #promoCarousel .carousel-control-next-icon {
      width: 20px;
      height: 20px;
    }
  }
/* ============================================================
   BLOK 4 (dari index_new.blade.php L3952-L4077)
   ============================================================ */
    /* Mobile: paksa kolom jadi full width */
    @media (max-width: 767.98px){
      #promoCarousel .carousel-item .col-4{
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    @media (max-width: 767.98px) {
    #promoCarousel img {
      max-height: 350px; /* atur sesuai kebutuhan */
      object-fit: cover; /* atau 'contain' kalau mau semua gambar terlihat */
    }

    /* Optional: perkecil padding text di mobile */
    #promoCarousel h5 {
      font-size: 14px;
      padding: 8px;
    }
  }

  #map { z-index: 0 !important; height: 500px; width: 100%; background-color: white; padding: 1px; border-radius: 2px; }

      /* DivIcon custom untuk pin oranye */
      .orange-pin {
        position: relative;
        transform: translateZ(0);
        /* agar klik/hover enak */
        display: inline-block;
        line-height: 0;
      }
      .orange-pin svg {
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
      }
      /* animasi sederhana saat marker diklik */
      .orange-pin.clicked {
        animation: bump .18s ease-in-out;
      }
      @keyframes bump {
        0% { transform: translateY(0) }
        50% { transform: translateY(-2px) }
        100% { transform: translateY(0) }
      }

      /* Pastikan navbar memiliki z-index lebih tinggi */
      header, .header, nav, .navbar, .main-header {
        z-index: 1000 !important;
      }

      /* Styling untuk tombol panah Motor Terbaru carousel */
      .motor-terbaru-slide {
        position: relative;
        z-index: 1 !important;
      }

      .motor-terbaru-slide .slick-prev,
      .motor-terbaru-slide .slick-next {
        width: 45px !important;
        height: 45px !important;
        background: #E63946 !important;
        border-radius: 50% !important;
        z-index: 2 !important;
        transition: all 0.3s ease;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
      }

      .motor-terbaru-slide .slick-prev:hover,
      .motor-terbaru-slide .slick-next:hover {
        background: #d32f3c !important;
        transform: scale(1.15) !important;
      }

      .motor-terbaru-slide .slick-prev {
        left: 10px !important;
      }

      .motor-terbaru-slide .slick-next {
        right: 10px !important;
      }

      .motor-terbaru-slide .slick-prev:before,
      .motor-terbaru-slide .slick-next:before {
        display: none !important;
      }

      .motor-terbaru-slide .slick-prev i,
      .motor-terbaru-slide .slick-next i {
        color: white !important;
        font-size: 20px !important;
        line-height: 45px !important;
      }

      @media (max-width: 991px) {
        .motor-terbaru-slide .slick-prev {
          left: 5px !important;
        }
        .motor-terbaru-slide .slick-next {
          right: 5px !important;
        }
      }

      @media (max-width: 576px) {
        .motor-terbaru-slide .slick-prev,
        .motor-terbaru-slide .slick-next {
          width: 38px !important;
          height: 38px !important;
        }
        .motor-terbaru-slide .slick-prev {
          left: 2px !important;
        }
        .motor-terbaru-slide .slick-next {
          right: 2px !important;
        }
        .motor-terbaru-slide .slick-prev i,
        .motor-terbaru-slide .slick-next i {
          font-size: 18px !important;
          line-height: 38px !important;
        }
      }


/* ============================================================
   BLOK 5 (dari index_new.blade.php L6498-L6507)
   ============================================================ */
            @keyframes slideInRight {
              from { transform: translateX(100%); opacity: 0; }
              to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOutRight {
              from { transform: translateX(0); opacity: 1; }
              to { transform: translateX(100%); opacity: 0; }
            }