/* =========================================================
   VERSI 43 - FIX GARIS HAMBURGER MENU
   Memastikan 3 garis menu muncul di HP/Tablet.
   ========================================================= */

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){

  .mobile-menu-btn{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    flex:0 0 48px !important;
    padding:0 !important;
    border-radius:15px !important;
    overflow:visible !important;
  }

  /* Reset total agar tidak kalah oleh CSS/icon lama */
  .mobile-menu-btn .hamb{
    position:relative !important;
    display:block !important;
    width:24px !important;
    height:19px !important;
    min-width:24px !important;
    min-height:19px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .mobile-menu-btn .hamb span{
    position:absolute !important;
    left:0 !important;
    display:block !important;
    width:24px !important;
    height:3px !important;
    min-height:3px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    box-shadow:0 1px 2px rgba(0,0,0,.12) !important;
  }

  .mobile-menu-btn .hamb span:nth-child(1){
    top:0 !important;
  }

  .mobile-menu-btn .hamb span:nth-child(2){
    top:8px !important;
  }

  .mobile-menu-btn .hamb span:nth-child(3){
    top:16px !important;
  }

  /* Kalau browser/tema menghapus span, garis cadangan tetap dibuat */
  .mobile-menu-btn::before,
  .mobile-menu-btn::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    display:block !important;
    width:24px !important;
    height:3px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:translateX(-50%) !important;
    z-index:2 !important;
  }

  .mobile-menu-btn::before{
    top:15px !important;
  }

  .mobile-menu-btn::after{
    bottom:15px !important;
  }

  .mobile-menu-btn .hamb::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:8px !important;
    display:block !important;
    width:24px !important;
    height:3px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:3 !important;
  }
}

@media (max-width:480px){
  .mobile-menu-btn{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    flex-basis:46px !important;
    border-radius:14px !important;
  }

  .mobile-menu-btn .hamb{
    width:23px !important;
    min-width:23px !important;
  }

  .mobile-menu-btn .hamb span,
  .mobile-menu-btn::before,
  .mobile-menu-btn::after,
  .mobile-menu-btn .hamb::after{
    width:23px !important;
  }

  .mobile-menu-btn::before{
    top:14px !important;
  }

  .mobile-menu-btn::after{
    bottom:14px !important;
  }
}