/* =====================================================================
   NAVBAR - SEMUA DROPDOWN (desktop)
   ---------------------------------------------------------------------
   File ini merapikan TIGA dropdown besar di navbar:

     1. "PRODUK"    -> 24 foto motor   (li.nav-product-item > .gn-mega-menu)
     2. "DEALER"    -> daftar kota     (li.nav-dealer-item  > .gn-dealer-mega-menu)
     3. "KATALOG"   -> sub-motor       (li.gn-katalog-item > .gn-motor-mega-menu)

   MASALAH YANG DIPERBAIKI
   a) Border & bayangan dropdown hilang, karena ada aturan global
      "FORCE NO BORDERS" di header_new.blade.php yang menimpa
      .category-header7 * / #main-menu * / .pixelstrap *.
   b) Kartu ikut aturan theme
      `html body .header-style2 ... nav#main-nav ul#main-menu li a
       { padding:5px 10px; height:28px; border:none; color:#000 }`
      sehingga kartu jadi gepeng, tanpa pinggir, dan tinggi tetap 28px.
      Karena itu tiap selektor di bawah memakai rantai DOM penuh yang
      memuat dua id (#main-nav + #main-menu).
   c) Nama motor/kota 10px HURUF BESAR dan mudah terpotong.
   d) Dropdown DEALER meluber keluar layar pada lebar 1200px & 1280px.
   e) Foto motor dulu tampil pudar (opacity .5 + grayscale 100%).

   CATATAN PENTING
   - Hanya berlaku untuk desktop (min-width 1200px). Di bawah 1200px navbar
     memakai menu mobile (#main-nav lebarnya 0), jadi dropdown ini tidak
     pernah terbuka.
   - Murni CSS. Tidak ada perubahan pada route, query, data, event handler,
    maupun atribut id / data-*.
   - WARNA yang ditulis JavaScript sebagai inline style !important TIDAK bisa
     ditimpa CSS, dan sengaja dibiarkan apa adanya supaya tidak berkedip
     saat hover:
       * Sidebar kategori   -> gnSelectCategory()  : #f43d00 / transparent
       * Kartu dealer/katalog -> jQuery mouseenter/leave : #f43d00 / #fafafa
     Karena itu:
       * warna aktif sidebar tetap oranye-merah #f43d00
       * warna dasar kartu dealer & katalog disetel #fafafa (bukan putih)
         supaya warna yang dikembalikan JS saat mouse-leave sama persis
       * efek hover memakai box-shadow inset, bukan background
   ===================================================================== */

@media (min-width: 1200px) {

  /* ==================================================================
     BAGIAN 1 - DROPDOWN "PRODUK"
     lebar 880px, menempel di kiri (li sudah berada di sisi kiri navbar
     yang terpusat), sehingga selalu muat di layar >= 1200px.
     ================================================================== */

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu {
    width: 880px !important;
    max-width: 94vw !important;
    margin-top: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e4e8ee !important;
    border-top: 3px solid #e21c21 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16) !important;
    overflow: visible !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container {
    height: auto !important;
    min-height: 400px !important;
    max-height: calc(100vh - 158px) !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 13px 13px !important;
    overflow: hidden !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar {
    width: 160px !important;
    background: #f7f8fa !important;
    border-right: 1px solid #e7eaef !important;
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar::before {
    content: "Kategori" !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
    padding: 1px 12px 9px !important;
    border-bottom: 1px solid #e4e8ee !important;
    color: #9aa3af !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item {
    margin: 0 0 4px !important;
    padding: 9px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 solid transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #4a5563 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
    transition: box-shadow .18s ease, transform .18s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item:last-child {
    margin-bottom: 0 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item:hover {
    transform: translateX(2px) !important;
    border-left: 3px solid #f43d00 !important;
    box-shadow: inset 0 0 0 100px #eef2f7 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item.is-active,
  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item.is-active:hover {
    transform: none !important;
    border-left: 3px solid rgba(0, 0, 0, .30) !important;
    box-shadow: inset 3px 0 0 rgba(0, 0, 0, .30),
                0 6px 14px rgba(244, 61, 0, .28) !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar a.gn-sidebar-item:focus-visible {
    outline: 2px solid #e21c21 !important;
    outline-offset: 2px !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-content-wrapper {
    padding: 10px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-content-wrapper div.gn-mega-panel {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 91px !important;
    padding: 7px 8px 8px !important;
    background: #ffffff !important;
    border: 1px solid #e7eaef !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    opacity: 1 !important;
    filter: none !important;
    color: #1f2937 !important;
    overflow: hidden !important;
    transition: transform .18s ease, box-shadow .18s ease,
                border-color .18s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background: #e21c21 !important;
    border-radius: 0 0 3px 3px !important;
    transform: translateX(-50%) !important;
    transition: width .2s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card:hover {
    transform: translateY(-3px) !important;
    border-color: #f2c3c4 !important;
    box-shadow: 0 14px 28px rgba(226, 28, 33, .13) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card:hover::before {
    width: 62% !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card:focus-visible {
    outline: 2px solid #e21c21 !important;
    outline-offset: 2px !important;
  }

  /* panggung foto: kotak lembut di belakang foto */
  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card::after {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    left: 8px !important;
    right: 8px !important;
    height: 56px !important;
    border-radius: 9px !important;
    background:
      repeating-linear-gradient(135deg,
        rgba(15, 23, 42, .025) 0 6px,
        rgba(15, 23, 42, 0) 6px 12px),
      linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card img.gn-product-img {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 0 6px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .16)) !important;
    /* bila foto gagal dimuat, teks alt disembunyikan agar kartu tetap rapi
       (elemennya sendiri dihapus oleh onerror="this.remove()") */
    font-size: 0 !important;
    color: transparent !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card p.gn-product-name {
    position: relative !important;
    z-index: 1 !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #1f2937 !important;
    background: transparent !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    transition: color .18s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-mega-panel a.gn-product-card:hover p.gn-product-name {
    color: #e21c21 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar::-webkit-scrollbar,
  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar {
    width: 7px !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-track,
  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-thumb,
  html body #main-nav ul#main-menu li.nav-product-item:not(.nav-dealer-item) div.gn-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-thumb {
    background: #d2d7de !important;
    border-radius: 99px !important;
  }


  /* ==================================================================
     BAGIAN 2 - DROPDOWN "DEALER"
     Lebar tetap 700px, tapi dipusatkan di bawah navbar (left:50% +
     translateX(-50%) terhadap li.nav-dealer-item). Sebelumnya memakai
     left:0 sehingga pada lebar 1200px & 1280px dropdown meluber keluar
     layar masing-masing 51px dan 11px.
     ================================================================== */

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    width: 700px !important;
    max-width: calc(100vw - 32px) !important;
    margin-top: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e4e8ee !important;
    border-top: 3px solid #e21c21 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16) !important;
    overflow: visible !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container {
    height: auto !important;
    min-height: 220px !important;
    max-height: calc(100vh - 158px) !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 13px 13px !important;
    overflow: hidden !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar {
    width: 160px !important;
    background: #f7f8fa !important;
    border-right: 1px solid #e7eaef !important;
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar::before {
    content: "Provinsi" !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
    padding: 1px 12px 9px !important;
    border-bottom: 1px solid #e4e8ee !important;
    color: #9aa3af !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar .gn-sidebar-item {
    margin: 0 0 4px !important;
    padding: 9px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 solid transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #4a5563 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
    transition: box-shadow .18s ease, transform .18s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar .gn-sidebar-item:last-child {
    margin-bottom: 0 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar .gn-sidebar-item:hover {
    transform: translateX(2px) !important;
    border-left: 3px solid #f43d00 !important;
    box-shadow: inset 0 0 0 100px #eef2f7 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar .gn-sidebar-item.is-active,
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar .gn-sidebar-item.is-active:hover {
    transform: none !important;
    border-left: 3px solid rgba(0, 0, 0, .30) !important;
    box-shadow: inset 3px 0 0 rgba(0, 0, 0, .30),
                0 6px 14px rgba(244, 61, 0, .28) !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-content-wrapper {
    padding: 10px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-content-wrapper div.gn-dealer-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* kartu kota: warna #fafafa + border #eee sengaja sama dengan nilai
     yang dikembalikan jQuery saat mouse-leave, supaya kartu tidak
     berganti warna setelah pernah di-hover */
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 91px !important;
    padding: 7px 8px 8px !important;
    background: #fafafa !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  /* aksen putih di tepi atas kartu (kartu jadi oranye saat hover) */
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background: rgba(255, 255, 255, .9) !important;
    border-radius: 0 0 3px 3px !important;
    transform: translateX(-50%) !important;
    transition: width .2s ease !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 28px rgba(226, 28, 33, .22) !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card:hover::before {
    width: 62% !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card:focus-visible {
    outline: 2px solid #e21c21 !important;
    outline-offset: 2px !important;
  }

  /* area gambar kota: jadi panggung 56px penuh lebar kartu */
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card div.gn-dealer-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 56px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 0 solid transparent !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    color: #e21c21 !important;
    font-size: 22px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card div.gn-dealer-icon > div {
    width: 100% !important;
    height: 100% !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card div.gn-dealer-icon img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .14)) !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-dealer-panel a.gn-dealer-card p.gn-dealer-city {
    position: relative !important;
    z-index: 1 !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #1f2937 !important;
    background: transparent !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar::-webkit-scrollbar,
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar {
    width: 7px !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-track,
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-thumb,
  html body #main-nav ul#main-menu li.nav-product-item.nav-dealer-item div.gn-dealer-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-thumb {
    background: #d2d7de !important;
    border-radius: 99px !important;
  }


  /* ==================================================================
     BAGIAN 3 - DROPDOWN "KATALOG MOTOR"
     Ini flyout yang muncul saat kursor diarahkan ke "Katalog Motor"
     (bukan dropdown utama), jadi lebar tidak boleh lebih dari ~600px
     agar tidak keluar layar pada 1200px.
     ================================================================== */

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu {
    left: 100% !important;
    right: auto !important;
    transform: none !important;
    top: 0 !important;
    width: 580px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e4e8ee !important;
    border-left: 3px solid #e21c21 !important;
    border-radius: 0 14px 14px 14px !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16) !important;
    z-index: 9999999 !important;
    overflow: hidden !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container {
    height: auto !important;
    min-height: 220px !important;
    max-height: calc(100vh - 158px) !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 11px 11px 11px !important;
    overflow: hidden !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar {
    width: 150px !important;
    background: #f7f8fa !important;
    border-right: 1px solid #e7eaef !important;
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar::before {
    content: "Kategori" !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
    padding: 1px 12px 9px !important;
    border-bottom: 1px solid #e4e8ee !important;
    color: #9aa3af !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar .gn-sidebar-item {
    margin: 0 0 4px !important;
    padding: 9px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 solid transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #4a5563 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
    transition: box-shadow .18s ease, transform .18s ease !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar .gn-sidebar-item:hover {
    transform: translateX(2px) !important;
    border-left: 3px solid #f43d00 !important;
    box-shadow: inset 0 0 0 100px #eef2f7 !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar .gn-sidebar-item.is-active,
  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar .gn-sidebar-item.is-active:hover {
    transform: none !important;
    border-left: 3px solid rgba(0, 0, 0, .30) !important;
    box-shadow: inset 3px 0 0 rgba(0, 0, 0, .30),
                0 6px 14px rgba(244, 61, 0, .28) !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-content-wrapper {
    padding: 10px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-content-wrapper div.gn-motor-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 91px !important;
    padding: 7px 8px 8px !important;
    background: #fafafa !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background: rgba(255, 255, 255, .9) !important;
    border-radius: 0 0 3px 3px !important;
    transform: translateX(-50%) !important;
    transition: width .2s ease !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 28px rgba(226, 28, 33, .22) !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card:hover::before {
    width: 62% !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card:focus-visible {
    outline: 2px solid #e21c21 !important;
    outline-offset: 2px !important;
  }

  /* ikon motor jadi panggung 56px, sama seperti area foto di dropdown lain */
  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card div.gn-dealer-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 56px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 0 solid transparent !important;
    background:
      repeating-linear-gradient(135deg,
        rgba(15, 23, 42, .022) 0 6px,
        rgba(15, 23, 42, 0) 6px 12px),
      linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    color: #e21c21 !important;
    font-size: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-container div.gn-mega-content-wrapper div.gn-motor-panel a.gn-dealer-card p.gn-dealer-city {
    position: relative !important;
    z-index: 1 !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #1f2937 !important;
    background: transparent !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar::-webkit-scrollbar,
  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar {
    width: 7px !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-track,
  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-sidebar::-webkit-scrollbar-thumb,
  html body #main-nav ul#main-menu li.gn-katalog-item div.gn-motor-mega-menu div.gn-mega-content-wrapper::-webkit-scrollbar-thumb {
    background: #d2d7de !important;
    border-radius: 99px !important;
  }
}