/* =========================================================
   V257 - SIDEBAR MENU PUBLIK: EFEK SAMA DENGAN MENU ROLE
   - drawer slide dari kiri
   - overlay fade + blur
   - penutupan tetap halus (tidak display:block/none mendadak)
   - aman untuk HP dan tablet
   ========================================================= */

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  body:not(.app-body) .mobile-drawer{
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:rgba(3,14,35,.48) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    transition:
      opacity .26s ease,
      visibility 0s linear .26s !important;
  }

  body:not(.app-body) .mobile-drawer.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:
      opacity .26s ease,
      visibility 0s linear 0s !important;
  }

  body:not(.app-body) .mobile-drawer > .mobile-panel,
  body:not(.app-body) .mobile-drawer > .mobile-panel-v41{
    margin-left:0 !important;
    margin-right:auto !important;
    transform:translate3d(-106%,0,0) !important;
    opacity:.985 !important;
    transition:
      transform .28s cubic-bezier(.22,.8,.24,1),
      opacity .22s ease !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
  }

  body:not(.app-body) .mobile-drawer.open > .mobile-panel,
  body:not(.app-body) .mobile-drawer.open > .mobile-panel-v41{
    transform:translate3d(0,0,0) !important;
    opacity:1 !important;
  }

  /* Efek item dibuat konsisten dengan kartu menu dalam role. */
  body:not(.app-body) .mobile-panel a,
  body:not(.app-body) .mobile-panel-v41 a{
    transition:
      background-color .18s ease,
      border-color .18s ease,
      color .18s ease,
      box-shadow .18s ease,
      transform .18s ease !important;
  }

  body:not(.app-body) .mobile-panel a:active,
  body:not(.app-body) .mobile-panel-v41 a:active{
    transform:scale(.985) !important;
  }

  body:not(.app-body) .mobile-panel .close,
  body:not(.app-body) .mobile-panel-v41 .close{
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease !important;
  }

  body:not(.app-body) .mobile-panel .close:active,
  body:not(.app-body) .mobile-panel-v41 .close:active{
    transform:scale(.94) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body:not(.app-body) .mobile-drawer,
  body:not(.app-body) .mobile-drawer > .mobile-panel,
  body:not(.app-body) .mobile-drawer > .mobile-panel-v41,
  body:not(.app-body) .mobile-panel a,
  body:not(.app-body) .mobile-panel-v41 a,
  body:not(.app-body) .mobile-panel .close,
  body:not(.app-body) .mobile-panel-v41 .close{
    transition:none !important;
  }
}