/* === NAVBAR NAVFIX4: Mobile = brand di atas, menu 1 baris horizontal di bawah === */
.nav-wrap{ position:sticky; top:0; z-index:2000; background:#ffffffcc; backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid #e5e7eb; }
.nav-wrap nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; }
.nav-wrap .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; white-space:nowrap; }
.nav-wrap .brand img{ height:34px; width:auto; display:block; }
.nav-wrap .brand .title{ font-weight:700; letter-spacing:.5px; }

@media (max-width:1200px){
  body.nav-open{ overflow:auto !important; }
  #hamb, .hamb, .hamburger, .nav-toggle, .menu-toggle,
  .offcanvas, .offcanvas.show { display:none !important; }

  .nav-wrap nav{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; padding:8px 10px !important; }
  .nav-wrap .brand{ flex:0 0 auto !important; max-width:100% !important; overflow:hidden !important; }
  .nav-wrap .brand img{ height:30px !important; }
  .nav-wrap .brand .title{ font-size:13px !important; line-height:1.1 !important; }

  body .nav-wrap nav .menu{
    order:2 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
    padding:0 !important; margin:0 !important;
    height:auto !important; max-height:none !important; transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:thin;
  }
  body .nav-wrap nav .menu a{ display:inline-block !important; padding:6px 8px !important; font-size:12px !important; line-height:1.2 !important; color:inherit !important; text-decoration:none !important; flex:0 0 auto !important; }
  body .nav-wrap nav .menu a.order-btn{ border-radius:999px !important; border:1px solid #0ea5e9 !important; background:#0ea5e9 !important; color:#fff !important; padding:6px 12px !important; }
}

@media (max-width:380px){
  .nav-wrap .brand .title{ font-size:12px !important; }
  .nav-wrap .menu a{ font-size:11px !important; padding:6px 6px !important; }
}

.nav-wrap .menu::-webkit-scrollbar{ height:6px; }
.nav-wrap .menu::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:6px; }