/* Bar */
.adk-menu-bar { display:flex; align-items:center; gap:16px; padding:10px 16px; background:#fff; }
.adk-menu-brand img { height:32px; width:auto; display:block; }
.adk-menu { flex:1; }
.adk-menu-list { list-style:none; margin:0; padding:0; display:flex; gap:20px; }
.adk-menu.align-left .adk-menu-list { justify-content:flex-start; }
.adk-menu.align-center .adk-menu-list { justify-content:center; }
.adk-menu.align-right .adk-menu-list { justify-content:flex-end; }
.adk-menu-item a { text-decoration:none; color:#111; padding:8px 6px; display:block; position: relative; }
.adk-menu-item a::after { content:""; position:absolute; left:0; right:0; bottom:0; height: var(--menu-underline-thickness, 2px); background: var(--menu-underline-color, currentColor); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.adk-menu-item a:hover::after { transform: scaleX(1); }
.adk-menu-item.active a::after { transform: scaleX(1); }
.adk-menu-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.adk-menu-actions { display:flex; gap:8px; }
.adk-menu-action { display:inline-flex; align-items:center; gap:8px; padding: var(--btn-pad, 8px 12px); border:1px solid rgba(0,0,0,.12); border-radius: var(--btn-radius, 8px); text-decoration:none; color: var(--btn-color, #111); background: var(--btn-bg, transparent); font-size: var(--btn-font-size, inherit); }
.adk-menu-action:hover { background: var(--btn-hover-bg, rgba(0,0,0,.05)); color: var(--btn-hover-color, var(--btn-color, inherit)); }
.adk-theme-toggle { background:none; border:none; cursor:pointer; font-size:18px; line-height:1; }

/* Toggle */
.adk-menu-toggle { background:none; border:1px solid rgba(0,0,0,.15); border-radius:6px; width:40px; height:36px; display:none; align-items:center; justify-content:center; cursor:pointer; }

/* Overlay & Dialog */
.adk-menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .26s ease; }
.adk-menu-dialog { position:fixed; top:0; right:0; bottom:0; width:min(86vw,400px); max-width:86vw; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.3); transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; }
/* Tambahan agar dialog benar-benar tersembunyi saat ditutup */
.adk-menu-dialog[aria-hidden="true"] { visibility:hidden; opacity:0; pointer-events:none; box-shadow:none; }
.adk-menu-nav.open .adk-menu-dialog { visibility:visible; opacity:1; }
.adk-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.adk-dialog-body { padding:10px 12px; overflow:auto; display:flex; flex-direction:column; gap:12px; }

/* Positions */
.adk-menu-nav.open .adk-menu-overlay { opacity:1; pointer-events:auto; }
.adk-menu-nav.open[data-pos="right"] .adk-menu-dialog { transform:translateX(0); right:0; left:auto; }
.adk-menu-nav.open[data-pos="left"] .adk-menu-dialog { transform:translateX(0); left:0; right:auto; }
.adk-menu-nav[data-pos="left"] .adk-menu-dialog { transform:translateX(-100%); }
.adk-menu-nav[data-pos="top"] .adk-menu-dialog { width:100%; height:min(86vh,520px); left:0; right:0; transform:translateY(-100%); }
.adk-menu-nav[data-pos="bottom"] .adk-menu-dialog { width:100%; height:min(86vh,520px); left:0; right:0; transform:translateY(100%); }
.adk-menu-nav.open[data-pos="top"] .adk-menu-dialog { transform:translateY(0); }
.adk-menu-nav.open[data-pos="bottom"] .adk-menu-dialog { transform:translateY(0); }

/* Vertical list in dialog */
.adk-menu-list.vertical { display:flex; flex-direction:column; gap:12px; }
.adk-menu-dialog .adk-menu-actions { display:flex; flex-direction:column; gap:8px; }

/* Breakpoints */
@media (max-width: 991px) {
  .adk-menu-bar .adk-menu-actions { display:none; }
}
@media (max-width: 768px) {
  .adk-menu-bar .adk-menu-list { display:none; }
  .adk-menu-toggle { display:flex; }
  .adk-menu-dialog .adk-menu-list { display:flex; }
  /* Dua kolom untuk tombol aksi di popup mobile */
  .adk-menu-dialog .adk-menu-actions { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
  .adk-menu-dialog .adk-menu-action { display:flex; width:100%; justify-content:center; }
}
@media (min-width: 992px) {
  .adk-menu-toggle { display:none; }
  .adk-menu-list { display:flex; }
}