/* menu-hub.css — bar cip hub menu (public/menu-hub.js). Mudah alih dahulu (390px). */
.mh-bar{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px;margin:0 0 6px;min-width:0}
.mh-bar::-webkit-scrollbar{display:none}
.mh-cip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid transparent;font:inherit;font-weight:700;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  background:var(--mh-bg,var(--tona-biru-bg));color:var(--mh-fg,var(--tona-biru-fg))}
.mh-cip.aktif{border-color:var(--mh-fg,var(--tona-biru-fg));box-shadow:0 0 0 2px color-mix(in srgb,var(--mh-fg,var(--tona-biru-fg)) 25%,transparent)}
.mh-cip.terkunci{opacity:.6}
.mh-cip:focus-visible{outline:2px solid var(--mh-fg,var(--tona-biru-fg));outline-offset:2px}
.mh-t-biru{--mh-bg:var(--tona-biru-bg);--mh-fg:var(--tona-biru-fg)}
.mh-t-hijau{--mh-bg:var(--tona-hijau-bg);--mh-fg:var(--tona-hijau-fg)}
.mh-t-oren{--mh-bg:var(--tona-oren-bg);--mh-fg:var(--tona-oren-fg)}
.mh-t-ungu{--mh-bg:var(--tona-ungu-bg);--mh-fg:var(--tona-ungu-fg)}
.mh-t-cyan{--mh-bg:var(--tona-cyan-bg);--mh-fg:var(--tona-cyan-fg)}
.mh-t-pink{--mh-bg:var(--tona-pink-bg);--mh-fg:var(--tona-pink-fg)}