/* ============================================
   DMP LAYOUT v3 - MEGA MENU WARNA-WARNI
   2 Kolom | Hover-Open | Floating Proporsional
   ============================================ */

/* Tidak ada overlay gelap全屏 - menu mengambang, tidak menutup layar */
#sidebar-overlay { display: none !important; }

/* Panel Mega Menu Mengambang (proporsional, bukan sidebar penuh) */
#sidebar-panel {
  position: fixed !important;
  left: 12px !important;
  top: 70px; /* diset ulang via JS sesuai tinggi header */
  width: min(94vw, 780px) !important;
  max-height: min(74vh, 600px) !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  z-index: 70 !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.28), 0 4px 14px rgba(15,23,42,.12);
  transform-origin: top left;
  transform: perspective(1100px) rotateX(-14deg) translateY(-18px) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2,1.2,.36,1), opacity .22s ease;
}
#sidebar-panel.mm-open {
  transform: perspective(1100px) rotateX(0) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

#sidebar-root { height: 100%; display: flex; flex-direction: column; }

/* Header panel: gradient pelangi beranimasi */
.mm-head {
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(90deg,#10b981,#3b82f6,#8b5cf6,#ec4899,#f59e0b,#10b981);
  background-size: 300% 100%;
  animation: mmShift 8s linear infinite;
}
.mm-head .mm-title { font-size: .95rem; font-weight: 800; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mm-head .mm-sub { font-size: .6rem; color: rgba(255,255,255,.85); margin-top: 2px; }
@keyframes mmShift { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* Body 2 kolom */
.mm-body {
  flex: 1; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px;
  padding: 12px;
  background: #f8fafc;
}
.mm-col { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.mm-col::-webkit-scrollbar { width: 4px; }
.mm-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#mm-right { background: rgba(255,255,255,.7); border: 1px solid #eef2f7; border-radius: .9rem; padding: 8px; }

.mm-group {
  font-size: .56rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #94a3b8; margin: 6px 2px 2px;
}

/* Item menu kiri: kartu putih dengan aksen warna per modul */
.mm-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: .8rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-left: 4px solid var(--g1);
  color: #0f172a; font-size: .78rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: mmIn .35s both;
}
.mm-item .mm-ico {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: .7rem; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 4px 10px var(--sh);
  transition: transform .2s ease;
}
.mm-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px var(--sh);
  z-index: 2;
}
.mm-item:hover .mm-ico { transform: rotate(-8deg) scale(1.12); }
/* Efek shine menyapu saat hover */
.mm-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .5s ease;
}
.mm-item:hover::after { transform: translateX(130%); }
/* Item yang sedang disorot (hover) -> penuh gradient warna modul */
.mm-item.mm-sel {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: #fff; border-left-color: transparent;
  box-shadow: 0 8px 20px var(--sh);
}
.mm-item.mm-sel .mm-ico { background: rgba(255,255,255,.25); box-shadow: none; }

/* Kolom kanan: banner modul terpilih + sub item */
.mm-right-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: .8rem; color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 6px 16px var(--sh);
  margin-bottom: 8px;
  animation: mmIn .3s both;
}
.mm-right-head .mm-ico {
  width: 34px; height: 34px; flex: none; border-radius: .7rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.25); font-size: .95rem;
}
.mm-right-head .t { font-size: .8rem; font-weight: 800; }
.mm-right-head .s { font-size: .58rem; opacity: .85; }

.mm-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: .6rem;
  background: #fff; border: 1px solid #eef2f7;
  color: #334155; font-size: .72rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  animation: mmIn .3s both;
}
.mm-sub-item .mm-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--g1); box-shadow: 0 0 8px var(--g1); flex: none; }
.mm-sub-item:hover { transform: translateX(3px); background: #f1f5f9; box-shadow: 0 4px 10px rgba(15,23,42,.08); }

.mm-foot {
  padding: 8px 14px; border-top: 1px solid #eef2f7;
  color: #94a3b8; font-size: .58rem; text-align: center; background: #fff;
}

@keyframes mmIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#sidebar-panel:not(.mm-open) .mm-item,
#sidebar-panel:not(.mm-open) .mm-sub-item,
#sidebar-panel:not(.mm-open) .mm-right-head { animation: none; opacity: 0; }

/* Bottom Navigation warna-warni */
#bottomnav-root {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 50 !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; margin: 0 2px; border-radius: .8rem;
  color: #64748b; font-size: .58rem; font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease, background .15s ease;
}
.bn-item i { font-size: 1.05rem; transition: transform .15s ease; }
.bn-item:hover { transform: translateY(-2px); color: var(--g1); }
.bn-item.bn-active {
  color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 6px 14px var(--sh);
}
.bn-item.bn-active i { transform: scale(1.1); }

/* Layar kecil: rapatkan, tetap 2 kolom */
@media (max-width: 480px) {
  #sidebar-panel { left: 8px !important; width: calc(100vw - 16px) !important; }
  .mm-body { gap: 6px; padding: 8px; }
  .mm-item { font-size: .72rem; padding: 7px 8px; }
  .mm-item .mm-ico { width: 28px; height: 28px; font-size: .75rem; }
  .mm-sub-item { font-size: .66rem; }
}