/* =========================================================
   V288 - MOBILE/TABLET SIDEBAR SMOOTH MOTION
   Fokus:
   - efek slide tetap terasa, tidak terlalu cepat
   - overlay fade ringan tanpa backdrop blur
   - hanya transform + opacity (compositor friendly)
   - hindari animasi box-shadow/filter/layout saat bergerak
   ========================================================= */

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  /* ---------------- PUBLIC DRAWER ---------------- */
  body:not(.app-body) .mobile-drawer{
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
    overflow:hidden !important;
  }

  body:not(.app-body) .mobile-drawer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(5,18,42,.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .20s ease-out !important;
    will-change:opacity;
  }

  body:not(.app-body) .mobile-drawer.open{
    pointer-events:auto !important;
  }

  body:not(.app-body) .mobile-drawer.open::before{
    opacity:1;
    pointer-events:auto;
  }

  body:not(.app-body) .mobile-drawer > .mobile-panel,
  body:not(.app-body) .mobile-drawer > .mobile-panel-v41{
    position:relative !important;
    z-index:1 !important;
    transform:translate3d(-100%,0,0) !important;
    -webkit-transform:translate3d(-100%,0,0) !important;
    opacity:1 !important;
    /* Shadow tipis memberi depth tetapi tidak dianimasikan. */
    box-shadow:10px 0 28px rgba(8,28,64,.12) !important;
    transition:transform .30s cubic-bezier(.16,1,.30,1) !important;
    will-change:transform;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform-style:preserve-3d;
  }

  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;
    -webkit-transform:translate3d(0,0,0) !important;
  }

  /* ---------------- APP / ADMIN / PIC / SISWA ---------------- */
  body.app-body .sidebar-overlay{
    display:block !important;
    visibility:visible !important;
    opacity:0 !important;
    pointer-events:none !important;
    background:rgba(5,18,42,.42) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:opacity .20s ease-out !important;
    will-change:opacity;
  }

  body.app-body .sidebar-overlay.open{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  body.app-body .app-sidebar{
    left:0 !important;
    transform:translate3d(-100%,0,0) !important;
    -webkit-transform:translate3d(-100%,0,0) !important;
    box-shadow:10px 0 28px rgba(8,28,64,.12) !important;
    transition:transform .30s cubic-bezier(.16,1,.30,1) !important;
    will-change:transform;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform-style:preserve-3d;
  }

  body.app-body .app-sidebar.open{
    left:0 !important;
    transform:translate3d(0,0,0) !important;
    -webkit-transform:translate3d(0,0,0) !important;
  }

  /* Jangan ikut menggerakkan / men-shadow isi panel. */
  body:not(.app-body) .mobile-panel a,
  body:not(.app-body) .mobile-panel-v41 a,
  body.app-body .app-sidebar .side-nav a,
  body:not(.app-body) .mobile-panel .close,
  body:not(.app-body) .mobile-panel-v41 .close,
  body.app-body .sidebar-close{
    transition:background-color .12s ease, color .12s ease, border-color .12s ease !important;
    transform:none !important;
    filter:none !important;
  }

  body:not(.app-body) .mobile-drawer *,
  body.app-body .app-sidebar *{
    -webkit-tap-highlight-color:transparent;
  }
}

/* HP: tetap lembut, tetapi sedikit lebih singkat daripada tablet. */
@media (max-width:600px) and (hover:none), (max-width:600px) and (pointer:coarse){
  body:not(.app-body) .mobile-drawer > .mobile-panel,
  body:not(.app-body) .mobile-drawer > .mobile-panel-v41,
  body.app-body .app-sidebar{
    transition-duration:.27s !important;
  }

  body:not(.app-body) .mobile-drawer::before,
  body.app-body .sidebar-overlay{
    transition-duration:.18s !important;
  }
}

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