/* Biar background putih nyambung ke seluruh navbar */
.navbar {
  background-color: #fff !important;
  border: none;
  /* hilangkan garis default bootstrap */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* opsional, biar ada bayangan */
}

/* Logo rapi */
.navbar-brand img {
  height: 40px;
  /* sesuaikan tinggi logo */
  width: auto;
  /* biar proporsional */
  display: block;
  background: transparent;
  /* gak perlu kotak putih lagi */
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 2000;
  /* pastikan di atas menu */
}

/* default: desktop >800px */
.desktop-only {
  display: inline-block !important;
}

.middle-only {
  display: none !important;
}

/* 760–800px: tampilkan middle-only, hide desktop */
@media screen and (max-width: 1130px) and (min-width: 760px) {
  .desktop-only {
    display: none !important;
  }

  .middle-only {
    display: inline-block !important;
  }
}

/* <760px: semua hide, ikut burger menu */
@media screen and (max-width: 759px) {
  .desktop-only {
    display: block !important;
  }

  /* ikut burger */
  .middle-only {
    display: none !important;
  }

  /* dropdown tengah hilang */
}

/* Default dropdown hidden */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f0f0f0; /* ubah dari #fff ke abu-abu terang */
  min-width: 200px;
  z-index: 1000;
}

/* Desktop ≥760px: hover otomatis */
@media screen and (min-width: 760px) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* Disable hover effects di mobile */
@media (max-width: 759px) {

  .dropdown:hover .dropdown-content,
  .dropdown a:hover+.dropdown-content {
    display: none !important;
  }

  /* Atau jika menggunakan class mobile-mode */
  .mobile-mode .dropdown:hover .dropdown-content,
  .mobile-mode .dropdown a:hover+.dropdown-content {
    display: none !important;
  }
}

/* Pastikan dropdown content hidden by default di mobile */
@media (max-width: 759px) {
  .dropdown-content {
    display: none !important;
  }
}

/* Atur margin khusus untuk li yang punya img di menu_main_menu saat mobile */
@media screen and (max-width: 760px) {

  /* sesuaikan breakpoint burger */
  #menu_main_menu li a img {
    margin: 10px 0 10px 10px;
    /* atas 5px, kanan 0, bawah 5px, kiri 10px */
  }
}
/* Hanya berlaku di desktop (≥760px) */@media screen and (min-width: 760px) {
  .navbar-nav > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .navbar-nav > li {
    margin: 0 5px !important;
  }
}