/* =============================================================================
 *  navigasi-pro.css — NAVIGASI DESKTOP & PONSEL (desain ulang)
 *
 *  Pasangan assets/js/navigasi-pro.js. Dimuat PALING AKHIR di <head> supaya
 *  menimpa gaya navigasi lama (penataan.css, aurora.css, premium.css).
 *
 *  Prinsip:
 *  - Hanya transform & opacity yang dianimasikan (murah bagi GPU HP).
 *  - Durasi dikalikan --mo (0 saat "kurangi animasi"), dan html[data-ringan]
 *    mematikan animasi masuk berurutan.
 *  - Desktop: sidebar berkelompok dengan akordeon, indikator aktif meluncur,
 *    mode ciut (ikon saja), dan pencarian menu.
 *  - Ponsel/tablet (< 1024px): TANPA submenu. Tab bar berlabel + peluncur
 *    "Semua Menu" berisi tombol bernama yang semuanya langsung terlihat.
 * ========================================================================== */

:root {
    --np-ease: cubic-bezier(.2, .8, .2, 1);
    --np-spring: cubic-bezier(.34, 1.36, .64, 1);
    --np-side-w: 268px;
    --np-rail-w: 76px;

    /* Warna aksen kelompok: [400] cerah & [600] dalam (RGB tanpa koma). */
    --np-sky: 56 189 248;       --np-sky-d: 2 132 199;
    --np-emerald: 52 211 153;   --np-emerald-d: 5 150 105;
    --np-amber: 251 191 36;     --np-amber-d: 217 119 6;
    --np-violet: 167 139 250;   --np-violet-d: 124 58 237;
    --np-rose: 251 113 133;     --np-rose-d: 225 29 72;
    --np-teal: 45 212 191;      --np-teal-d: 13 148 136;
    --np-fuchsia: 232 121 249;  --np-fuchsia-d: 192 38 211;
    --np-slate: 148 163 184;    --np-slate-d: 71 85 105;
    --np-indigo: 129 140 248;   --np-indigo-d: 79 70 229;
    --np-orange: 251 146 60;    --np-orange-d: 234 88 12;
    --np-cyan: 34 211 238;      --np-cyan-d: 8 145 178;
}
.np-c-sky     { --a: var(--np-sky);     --ad: var(--np-sky-d); }
.np-c-emerald { --a: var(--np-emerald); --ad: var(--np-emerald-d); }
.np-c-amber   { --a: var(--np-amber);   --ad: var(--np-amber-d); }
.np-c-violet  { --a: var(--np-violet);  --ad: var(--np-violet-d); }
.np-c-rose    { --a: var(--np-rose);    --ad: var(--np-rose-d); }
.np-c-teal    { --a: var(--np-teal);    --ad: var(--np-teal-d); }
.np-c-fuchsia { --a: var(--np-fuchsia); --ad: var(--np-fuchsia-d); }
.np-c-slate   { --a: var(--np-slate);   --ad: var(--np-slate-d); }
.np-c-indigo  { --a: var(--np-indigo);  --ad: var(--np-indigo-d); }
.np-c-orange  { --a: var(--np-orange);  --ad: var(--np-orange-d); }
.np-c-cyan    { --a: var(--np-cyan);    --ad: var(--np-cyan-d); }

/* ============================================================================
   1. SIDEBAR DESKTOP
   ========================================================================== */
#app-shell > aside.np-side {
    width: var(--np-side-w);
    flex-direction: column;
    background: linear-gradient(180deg, #101A2B 0%, #0C1423 52%, #090F1A 100%) !important;
    border-right: 1px solid rgb(255 255 255 / .06) !important;
    color: #C9D3E1;
    transition: width calc(.32s * var(--mo, 1)) var(--np-ease);
    overflow: visible;
}
.dark #app-shell > aside.np-side { background: linear-gradient(180deg, #0B1220 0%, #080E19 100%) !important; }
#app-shell > aside.np-side > *:not(.corak-fill) { position: relative; z-index: 1; }
#app-shell > aside.np-side::after { opacity: .55; }

.np-side-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 12px 12px 16px;
}
.np-brand {
    display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1;
    text-align: left; border-radius: 12px; padding: 2px; min-height: 0 !important;
}
.np-brand:focus-visible { outline: 2px solid rgb(var(--c-primary-300)); outline-offset: 2px; }
.np-brand-mark {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -8px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .08);
    transition: transform calc(.4s * var(--mo, 1)) var(--np-spring);
}
.np-brand:hover .np-brand-mark { transform: rotate(-6deg) scale(1.05); }
.np-brand-mark img, .np-brand-mark svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.np-brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.np-brand-text b {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 700; font-size: 14px;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em;
}
.np-brand-text small { font-size: 11px; color: #7F8DA5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.np-rail-btn, .np-icon-btn {
    width: 32px; height: 32px; min-height: 0 !important; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; color: #8392AA; font-size: 12px; position: relative;
    transition: background-color calc(.18s * var(--mo, 1)) ease, color calc(.18s * var(--mo, 1)) ease, transform calc(.18s * var(--mo, 1)) ease;
}
.np-rail-btn:hover, .np-icon-btn:hover { background: rgb(255 255 255 / .07); color: #fff; }
.np-icon-btn:active, .np-rail-btn:active { transform: scale(.92); }
.np-icon-btn.is-danger:hover { background: rgb(244 63 94 / .14); color: #FDA4AF; }
.np-rail-btn i { transition: transform calc(.32s * var(--mo, 1)) var(--np-ease); }
.np-icon-btn .badge-count { top: -4px; right: -4px; }

.np-side-user { padding: 0 12px 10px; }
#app-shell .np-side-user .profile-chip {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 12px; background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .06);
    text-align: left; min-height: 0;
    transition: background-color calc(.2s * var(--mo, 1)) ease, border-color calc(.2s * var(--mo, 1)) ease;
}
#app-shell .np-side-user .profile-chip:hover { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .1); }

.np-search {
    margin: 0 12px 6px; position: relative; display: flex; align-items: center;
}
.np-search > i { position: absolute; left: 11px; font-size: 11.5px; color: #66748C; pointer-events: none; }
.np-search input {
    width: 100%; height: 34px; min-height: 0 !important; border-radius: 10px;
    background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .06);
    padding: 0 30px 0 31px; font-size: 12.5px; color: #E2E8F0; outline: none;
    transition: border-color calc(.2s * var(--mo, 1)) ease, background-color calc(.2s * var(--mo, 1)) ease, box-shadow calc(.2s * var(--mo, 1)) ease;
}
.np-search input::placeholder { color: #66748C; }
.np-search input:focus { border-color: rgb(var(--c-primary-400) / .7); background: rgb(255 255 255 / .06); box-shadow: 0 0 0 3px rgb(var(--c-primary-400) / .16); }
.np-search input::-webkit-search-cancel-button { display: none; }
.np-search kbd {
    position: absolute; right: 8px; font: 600 10px/1 Inter, sans-serif; color: #66748C;
    border: 1px solid rgb(255 255 255 / .1); border-radius: 5px; padding: 3px 5px; pointer-events: none;
    transition: opacity calc(.15s * var(--mo, 1)) ease;
}
.np-search input:focus ~ kbd, .np-search input:not(:placeholder-shown) ~ kbd { opacity: 0; }

/* --- daftar menu ------------------------------------------------------------ */
#app-shell #desktop-nav.np-nav {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 14px;
    scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .12) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
#desktop-nav.np-nav::-webkit-scrollbar { width: 6px; }
#desktop-nav.np-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .1); border-radius: 6px; }
.np-track { position: relative; }
.np-list { position: relative; z-index: 1; }

/* Indikator aktif yang meluncur di antara butir. */
.np-ink {
    position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 0;
    border-radius: 11px; pointer-events: none; opacity: 0;
    background: linear-gradient(95deg, rgb(var(--c-primary-400) / .26), rgb(var(--c-primary-400) / .08));
    box-shadow: inset 0 0 0 1px rgb(var(--c-primary-300) / .18), 0 8px 20px -14px rgb(var(--c-primary-400) / .9);
    transform: translateY(0);
    transition: transform calc(.42s * var(--mo, 1)) var(--np-spring),
                height calc(.3s * var(--mo, 1)) var(--np-ease),
                opacity calc(.2s * var(--mo, 1)) ease;
    will-change: transform;
}
.np-ink::before {
    content: ''; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgb(var(--brs-200, 226 210 174)), rgb(var(--brs-400, 200 164 92)));
    box-shadow: 0 0 10px rgb(var(--brs-400, 200 164 92) / .7);
}
.np-ink.is-on { opacity: 1; }
.np-ink.ikut { transition: opacity calc(.2s * var(--mo, 1)) ease; }

/* Butir menu */
#app-shell #desktop-nav .np-item {
    position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
    height: 40px; min-height: 0; padding: 0 10px 0 6px; margin: 1px 0;
    border-radius: 11px; text-align: left; font-size: 13.5px; font-weight: 500;
    color: #AEB9CA; background: transparent !important; box-shadow: none !important;
    transform: none;
    transition: color calc(.18s * var(--mo, 1)) ease;
}
#app-shell #desktop-nav .np-item::before { content: none !important; }
#app-shell #desktop-nav .np-item::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background: rgb(255 255 255 / .05); opacity: 0; transform: scaleX(.94);
    transition: opacity calc(.2s * var(--mo, 1)) ease, transform calc(.28s * var(--mo, 1)) var(--np-ease);
}
#app-shell #desktop-nav .np-item:hover { color: #fff; transform: none; }
#app-shell #desktop-nav .np-item:hover::after { opacity: 1; transform: scaleX(1); }
#app-shell #desktop-nav .np-item.is-active::after { opacity: 0; }
#app-shell #desktop-nav .np-item:focus-visible { outline: 2px solid rgb(var(--c-primary-300)); outline-offset: -2px; }
#app-shell #desktop-nav .np-item:active .np-item-ikon { transform: scale(.9); }

.np-item-ikon {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 12.5px;
    color: #7C8AA2; background: rgb(255 255 255 / .03);
    transition: background-color calc(.22s * var(--mo, 1)) ease, color calc(.22s * var(--mo, 1)) ease,
                transform calc(.32s * var(--mo, 1)) var(--np-spring), box-shadow calc(.22s * var(--mo, 1)) ease;
}
.np-item:hover .np-item-ikon { color: rgb(var(--a, var(--np-sky))); background: rgb(var(--a, var(--np-sky)) / .12); transform: translateX(1px) rotate(-4deg); }
.np-item.is-active { color: #fff !important; font-weight: 650 !important; }
.np-item.is-active .np-item-ikon {
    color: #fff; transform: none;
    background: linear-gradient(145deg, rgb(var(--c-primary-400)), rgb(var(--c-primary-600)));
    box-shadow: 0 6px 14px -6px rgb(var(--c-primary-500) / .9), inset 0 1px 0 rgb(255 255 255 / .25);
}
.np-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-item-label mark { background: rgb(var(--brs-400, 200 164 92) / .32); color: #fff; border-radius: 3px; padding: 0 1px; }
.np-lencana {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(244 63 94); color: #fff;
}
.np-baru {
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 6px; color: #1E293B;
    background: linear-gradient(135deg, rgb(var(--brs-200, 226 210 174)), rgb(var(--brs-400, 200 164 92)));
}

/* Kelompok (akordeon) */
.np-grup { margin-top: 6px; }
.np-grup + .np-grup { margin-top: 2px; }
.np-pisah { height: 1px; margin: 8px 6px; background: rgb(255 255 255 / .06); }
#app-shell #desktop-nav .np-grup-head {
    width: 100%; display: flex; align-items: center; gap: 9px; height: 32px; min-height: 0;
    padding: 0 8px 0 12px; border-radius: 9px; background: transparent !important; box-shadow: none !important;
    color: #6E7D96; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    transform: none;
    transition: color calc(.2s * var(--mo, 1)) ease;
}
#app-shell #desktop-nav .np-grup-head::before { content: none !important; }
#app-shell #desktop-nav .np-grup-head:hover { color: #C9D3E1; transform: none; }
#app-shell #desktop-nav .np-grup-head:focus-visible { outline: 2px solid rgb(var(--c-primary-300)); outline-offset: -2px; }
.np-grup-ikon { font-size: 10.5px; width: 14px; text-align: center; color: rgb(var(--a, var(--np-slate)) / .8); }
.np-grup-nama { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-grup-jml {
    font-size: 10px; font-weight: 700; letter-spacing: 0; color: #5D6B83;
    min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: rgb(255 255 255 / .05);
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity calc(.2s * var(--mo, 1)) ease;
}
.np-grup.is-open .np-grup-jml { opacity: 0; }
.np-grup-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--brs-400, 200 164 92)); box-shadow: 0 0 0 3px rgb(var(--brs-400, 200 164 92) / .18); }
.np-grup.is-open .np-grup-dot { opacity: 0; }
.np-chev { font-size: 9px; transition: transform calc(.3s * var(--mo, 1)) var(--np-ease); transform: rotate(-90deg); }
.np-grup.is-open .np-chev { transform: rotate(0); }
.np-grup-isi {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows calc(.32s * var(--mo, 1)) var(--np-ease);
}
.np-grup.is-open > .np-grup-isi { grid-template-rows: 1fr; }
.np-grup-dalam { overflow: hidden; min-height: 0; padding-left: 2px; }
.np-grup-dalam > .np-item { opacity: 0; transform: translateY(-4px) !important; transition: opacity calc(.24s * var(--mo, 1)) ease, transform calc(.3s * var(--mo, 1)) var(--np-ease), color calc(.18s * var(--mo, 1)) ease; }
.np-grup.is-open .np-grup-dalam > .np-item { opacity: 1; transform: none !important; transition-delay: calc(var(--i, 0) * 28ms * var(--mo, 1)); }
.np-grup:not(.is-open) .np-grup-dalam > .np-item { transition-delay: 0s; visibility: hidden; transition-property: opacity, transform, visibility; }

/* Pencarian aktif: kelompok yang cocok dibuka paksa, sisanya disembunyikan. */
.np-nav.is-cari .np-grup > .np-grup-isi { grid-template-rows: 1fr; }
.np-nav.is-cari .np-grup .np-grup-dalam > .np-item { opacity: 1; transform: none !important; visibility: visible; }
.np-nav.is-cari .np-grup .np-chev, .np-nav.is-cari .np-grup .np-grup-jml { opacity: 0; }
.np-nav .np-sembunyi { display: none !important; }
.np-kosong { padding: 18px 12px; font-size: 12px; color: #6E7D96; text-align: center; }
.np-kosong i { display: block; font-size: 18px; margin-bottom: 8px; opacity: .6; }

/* Kaki sidebar */
.np-side-foot { padding: 10px 12px 12px; border-top: 1px solid rgb(255 255 255 / .06); }
.np-foot-row { display: flex; align-items: center; gap: 6px; }
.np-foot-row .sync-chip { margin-right: auto; }
.np-foot-actions { display: flex; align-items: center; gap: 2px; }

/* Masuk pertama kali: butir muncul berurutan. */
.np-side.np-masuk .np-list > * { animation: npMasuk calc(.5s * var(--mo, 1)) var(--np-ease) both; animation-delay: calc(var(--k, 0) * 40ms * var(--mo, 1)); }
@keyframes npMasuk { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* --- Mode ciut (ikon saja) ---------------------------------------------------- */
html.np-rail #app-shell > aside.np-side { width: var(--np-rail-w); }
html.np-rail .np-side-head { flex-direction: column; padding: 14px 0 10px; gap: 10px; }
html.np-rail .np-brand { flex: 0; }
html.np-rail .np-brand-text, html.np-rail .np-search, html.np-rail .np-grup-head,
html.np-rail .np-item-label, html.np-rail .np-lencana, html.np-rail .np-baru,
html.np-rail .np-side-foot .sync-chip { display: none !important; }
html.np-rail .np-rail-btn i { transform: rotate(180deg); }
html.np-rail .np-side-user { padding: 0 0 10px; display: flex; justify-content: center; }
html.np-rail #app-shell .np-side-user .profile-chip { width: auto; padding: 4px; background: transparent; border-color: transparent; }
html.np-rail #app-shell .np-side-user .profile-chip > :not(:first-child) { display: none; }
html.np-rail #app-shell #desktop-nav.np-nav { padding: 6px 12px 14px; }
html.np-rail #app-shell #desktop-nav .np-item { justify-content: center; padding: 0; gap: 0; }
html.np-rail .np-item-ikon { width: 34px; height: 34px; font-size: 13.5px; }
html.np-rail .np-grup > .np-grup-isi { grid-template-rows: 1fr; }
html.np-rail .np-grup .np-grup-dalam > .np-item { opacity: 1; transform: none !important; visibility: visible; }
html.np-rail .np-grup + .np-grup, html.np-rail .np-grup { margin-top: 0; }
html.np-rail .np-grup::before { content: ''; display: block; height: 1px; margin: 7px 10px; background: rgb(255 255 255 / .07); }
html.np-rail .np-ink::before { left: -12px; }
html.np-rail .np-foot-row { flex-direction: column; }
html.np-rail .np-foot-actions { flex-direction: column; gap: 4px; }

/* Tooltip mode ciut (satu elemen melayang, dipasang di <body>). */
.np-tip {
    position: fixed; z-index: 120; pointer-events: none;
    padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
    color: #fff; background: #1B2638; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
    opacity: 0; transform: translate(-4px, -50%);
    transition: opacity calc(.15s * var(--mo, 1)) ease, transform calc(.2s * var(--mo, 1)) var(--np-ease);
}
.np-tip.is-on { opacity: 1; transform: translate(0, -50%); }
.np-tip small { display: block; font-size: 10px; font-weight: 600; color: #8392AA; text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================================
   2. HEADER PONSEL
   ========================================================================== */
.app-topbar .np-top-mark { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; }
.app-topbar .np-top-mark img, .app-topbar .np-top-mark svg { width: 100%; height: 100%; object-fit: contain; }
#mobile-header-title { animation: npJudul calc(.35s * var(--mo, 1)) var(--np-ease); }
@keyframes npJudul { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   3. TAB BAR BAWAH (ponsel & tablet)
   ========================================================================== */
#app-shell nav.np-tabbar-wrap { padding: 0; left: 0; right: 0; width: 100%; }
.np-tabbar {
    position: relative; pointer-events: auto;
    background: rgb(255 255 255 / .97);
    border-top: 1px solid rgb(15 23 42 / .08);
    box-shadow: 0 -10px 30px -18px rgb(15 23 42 / .35);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.dark .np-tabbar { background: rgb(12 19 33 / .97); border-top-color: rgb(255 255 255 / .07); box-shadow: 0 -10px 30px -18px rgb(0 0 0 / .8); }
.np-tabs { position: relative; display: flex; align-items: stretch; max-width: 640px; margin: 0 auto; }
.np-tab {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 56px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #64748B; border-radius: 14px; padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
}
.dark .np-tab { color: #8392AA; }
.np-tab-ikon {
    width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
    font-size: 17px; transition: transform calc(.3s * var(--mo, 1)) var(--np-spring), color calc(.2s * var(--mo, 1)) ease;
}
.np-tab-label {
    font-size: 10.5px; font-weight: 600; line-height: 1.1; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em;
    transition: color calc(.2s * var(--mo, 1)) ease;
}
.np-tab:active .np-tab-ikon { transform: scale(.88); }
.np-tab.is-active { color: rgb(var(--c-primary-700)); }
.np-tab.is-active .np-tab-label { font-weight: 800; }
.dark .np-tab.is-active { color: rgb(var(--c-primary-200)); }
.np-tab.is-active .np-tab-ikon { animation: npTabPop calc(.45s * var(--mo, 1)) var(--np-spring); }
@keyframes npTabPop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.np-tab .badge-count { top: 2px; right: calc(50% - 26px); }
.np-tab-ink {
    position: absolute; top: 10px; left: 0; width: 56px; height: 30px; border-radius: 15px; z-index: 0;
    background: rgb(var(--c-primary-500) / .14); opacity: 0; pointer-events: none;
    transition: transform calc(.42s * var(--mo, 1)) var(--np-spring), opacity calc(.2s * var(--mo, 1)) ease;
}
.dark .np-tab-ink { background: rgb(var(--c-primary-300) / .18); }
.np-tab-ink.is-on { opacity: 1; }

/* Tombol mengambang "Absensi" tidak menabrak tab bar yang kini menempel. */
#app-shell #fab-absen { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important; }

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
    #app-shell nav.np-tabbar-wrap { display: block !important; }
    .np-tabbar { padding-left: 24px; padding-right: 24px; }
}

/* ============================================================================
   4. PELUNCUR "SEMUA MENU" (ponsel & tablet) — tombol bernama, tanpa submenu
   ========================================================================== */
.np-launch-bd {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center;
    background: rgb(5 10 20 / .55);
    animation: npFade calc(.25s * var(--mo, 1)) ease both;
}
@keyframes npFade { from { opacity: 0; } to { opacity: 1; } }
.np-launch {
    width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column;
    background: #F6F8FB; border-radius: 26px 26px 0 0; overflow: hidden;
    box-shadow: 0 -20px 50px -20px rgb(0 0 0 / .5);
    animation: npNaik calc(.46s * var(--mo, 1)) var(--np-spring) both;
}
.dark .np-launch { background: #0D1524; }
@keyframes npNaik { from { transform: translateY(100%); } to { transform: none; } }
.np-launch.is-tutup { animation: npTurun calc(.24s * var(--mo, 1)) ease-in both; }
@keyframes npTurun { to { transform: translateY(100%); } }
.np-launch-bd.is-tutup { animation: npPudar calc(.24s * var(--mo, 1)) ease-in both; }
@keyframes npPudar { to { opacity: 0; } }

.np-launch-head {
    position: relative; padding: 10px 18px 16px; color: #fff; flex-shrink: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgb(var(--c-primary-400) / .55), transparent 55%),
        linear-gradient(150deg, #13203A 0%, rgb(var(--c-primary-900)) 60%, #0B1322 100%);
}
.np-launch-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .28); margin: 0 auto 12px; }
.np-launch-user { display: flex; align-items: center; gap: 12px; }
.np-launch-user .np-ava { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: rgb(255 255 255 / .12); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.np-launch-user .np-ava img { width: 100%; height: 100%; object-fit: cover; }
.np-launch-user p { font-size: 11.5px; color: rgb(255 255 255 / .62); line-height: 1.3; }
.np-launch-user h3 { color: #fff; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.np-launch-tutup {
    margin-left: auto; width: 38px; height: 38px; min-height: 0 !important; border-radius: 12px; flex-shrink: 0;
    background: rgb(255 255 255 / .1); color: #fff; display: flex; align-items: center; justify-content: center;
}
.np-launch-tutup:active { transform: scale(.92); }
.np-launch-cari { position: relative; margin-top: 14px; }
.np-launch-cari i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgb(255 255 255 / .55); font-size: 13px; }
.np-launch-cari input {
    width: 100%; height: 44px; border-radius: 14px; padding: 0 14px 0 38px; font-size: 14px;
    background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14); color: #fff; outline: none;
}
.np-launch-cari input::placeholder { color: rgb(255 255 255 / .55); }
.np-launch-cari input:focus { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .3); }
.np-launch-badan { overflow-y: auto; padding: 6px 14px calc(22px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.np-launch-sek { margin-top: 16px; }
.np-launch-sek > h4 {
    display: flex; align-items: center; gap: 8px; margin: 0 4px 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748B;
}
.dark .np-launch-sek > h4 { color: #7F8DA5; }
.np-launch-sek > h4::after { content: ''; flex: 1; height: 1px; background: rgb(100 116 139 / .18); }
.np-launch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
@media (max-width: 359.98px) { .np-launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) { .np-launch-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 700px) { .np-launch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.np-tile {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 2px 8px;
    border-radius: 16px; min-height: 0 !important; color: #1E293B; -webkit-tap-highlight-color: transparent;
    animation: npTile calc(.42s * var(--mo, 1)) var(--np-spring) both;
    animation-delay: calc(min(var(--i, 0), 24) * 18ms * var(--mo, 1));
    transition: background-color calc(.15s * var(--mo, 1)) ease;
}
.dark .np-tile { color: #E2E8F0; }
@keyframes npTile { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.np-tile:active { background: rgb(100 116 139 / .12); }
.np-tile-ikon {
    width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; position: relative;
    background: linear-gradient(150deg, rgb(var(--a)), rgb(var(--ad)));
    box-shadow: 0 8px 16px -10px rgb(var(--ad) / .9), inset 0 1px 0 rgb(255 255 255 / .3);
    transition: transform calc(.3s * var(--mo, 1)) var(--np-spring);
}
.np-tile:active .np-tile-ikon { transform: scale(.9); }
.np-tile.is-active .np-tile-ikon { box-shadow: 0 0 0 3px #F6F8FB, 0 0 0 5px rgb(var(--ad)), 0 8px 16px -10px rgb(var(--ad) / .9); }
.dark .np-tile.is-active .np-tile-ikon { box-shadow: 0 0 0 3px #0D1524, 0 0 0 5px rgb(var(--a)); }
.np-tile-ikon .badge-count { top: -4px; right: -4px; }
.np-tile-label {
    font-size: 11.5px; font-weight: 650; line-height: 1.25; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.np-launch-kosong { text-align: center; padding: 36px 12px; color: #64748B; font-size: 13px; }

/* Baris "terakhir dibuka" */
.np-recent { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 2px; scrollbar-width: none; }
.np-recent::-webkit-scrollbar { display: none; }
.np-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 38px; min-height: 0 !important;
    padding: 0 14px 0 6px; border-radius: 12px; font-size: 12.5px; font-weight: 650;
    background: #fff; color: #1E293B; border: 1px solid rgb(15 23 42 / .07);
    box-shadow: 0 2px 6px -4px rgb(15 23 42 / .25);
    animation: npTile calc(.4s * var(--mo, 1)) var(--np-spring) both;
}
.dark .np-chip { background: #142036; color: #E2E8F0; border-color: rgb(255 255 255 / .06); }
.np-chip > span { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; background: linear-gradient(150deg, rgb(var(--a)), rgb(var(--ad))); }
.np-launch-kaki { display: flex; gap: 8px; margin-top: 18px; }
.np-launch-kaki button {
    flex: 1; height: 44px; border-radius: 14px; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; color: #334155; border: 1px solid rgb(15 23 42 / .08);
}
.dark .np-launch-kaki button { background: #142036; color: #CBD5E1; border-color: rgb(255 255 255 / .06); }
.np-launch-kaki button.is-danger { color: #E11D48; }

/* ============================================================================
   5. NAVIGASI DI DALAM HALAMAN (Gamifikasi, Game Santri, Ujian Kosakata …)
   Di layar sempit, pilihan bagian & submenu ditampilkan sebagai tombol berlabel
   yang semuanya terlihat (lihat NavPro.ratakanSubmenu di navigasi-pro.js).
   ========================================================================== */
.np-flat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
@media (min-width: 480px) { .np-flat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .np-flat { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.np-flat button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 74px; padding: 10px 4px; border-radius: 14px; text-align: center;
    font-size: 11.5px; font-weight: 700; line-height: 1.2; color: #334155;
    background: #fff; border: 1px solid rgb(15 23 42 / .08);
    box-shadow: 0 2px 8px -6px rgb(15 23 42 / .3);
    animation: npTile calc(.38s * var(--mo, 1)) var(--np-spring) both;
    animation-delay: calc(min(var(--i, 0), 20) * 16ms * var(--mo, 1));
    transition: transform calc(.2s * var(--mo, 1)) ease, background-color calc(.2s * var(--mo, 1)) ease;
}
.np-flat button:active { transform: scale(.95); }
.np-flat button i { font-size: 17px; color: rgb(var(--c-primary-600)); }
.np-flat button[aria-current="true"], .np-flat button.is-active {
    background: linear-gradient(150deg, rgb(var(--c-primary-500)), rgb(var(--c-primary-700)));
    color: #fff; border-color: transparent; box-shadow: 0 10px 20px -12px rgb(var(--c-primary-600));
}
.np-flat button[aria-current="true"] i, .np-flat button.is-active i { color: #fff; }
.dark .np-flat button { background: #142036; color: #CBD5E1; border-color: rgb(255 255 255 / .06); }
.dark .np-flat button i { color: rgb(var(--c-primary-300)); }
.np-flat-judul { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #64748B; margin: 14px 2px -4px; grid-column: 1 / -1; }

/* ============================================================================
   6. AKSES CEPAT DI BERANDA PONSEL
   ========================================================================== */
.np-akses { margin: 0 0 18px; }
.np-akses-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.np-akses-head h3 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.np-akses-head button { font-size: 12px; font-weight: 700; color: rgb(var(--c-primary-600)); min-height: 0 !important; padding: 6px 4px; }
.dark .np-akses-head button { color: rgb(var(--c-primary-300)); }
.np-akses .np-launch-grid { background: #fff; border-radius: 20px; padding: 10px 6px; border: 1px solid rgb(15 23 42 / .06); box-shadow: 0 8px 24px -18px rgb(15 23 42 / .35); }
.dark .np-akses .np-launch-grid { background: #111B2E; border-color: rgb(255 255 255 / .05); }
@media (min-width: 1024px) { .np-akses { display: none; } }

/* ============================================================================
   7. HEMAT GERAK
   ========================================================================== */
html[data-ringan="1"] .np-tile, html[data-ringan="1"] .np-chip, html[data-ringan="1"] .np-flat button,
html[data-ringan="1"] .np-side.np-masuk .np-list > * { animation: none !important; }
html[data-ringan="1"] .np-launch { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
    .np-ink, .np-tab-ink, .np-grup-isi, .np-grup-dalam > .np-item { transition: none !important; }
    .np-tile, .np-chip, .np-flat button, .np-launch, .np-launch-bd, .np-tab.is-active .np-tab-ikon, #mobile-header-title { animation: none !important; }
}
@media print { .np-tip, .np-launch-bd { display: none !important; } }

/* ============================================================================
   8. LOGO LEMBAGA (merek.js) — gaya latar: gradasi | putih | transparan
   ========================================================================== */
.mk-logo { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mk-logo img { width: 100%; height: 100%; object-fit: contain; }
html[data-logo-latar="gradasi"] .mk-logo { background: linear-gradient(145deg, rgb(var(--c-primary-400)), rgb(var(--c-primary-700))); padding: 4px; }
html[data-logo-latar="putih"] .mk-logo { background: #fff; padding: 4px; box-shadow: 0 0 0 1px rgb(15 23 42 / .08); }
html[data-logo-latar="transparan"] .mk-logo { background: transparent !important; box-shadow: none !important; padding: 0; }
.splash-mark.mk-logo { border-radius: 26px; }
.splash-mark.mk-logo img { animation: mkMuncul calc(.8s * var(--mo, 1)) cubic-bezier(.34, 1.36, .64, 1) both .1s; }
@keyframes mkMuncul { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
.v14-logo-pratinjau .mark { padding: 4px; }
.v14-logo-pratinjau .mk-pv-gradasi { background: linear-gradient(145deg, rgb(var(--c-primary-400)), rgb(var(--c-primary-700))); }
.v14-logo-pratinjau .mk-pv-putih { background: #fff; box-shadow: 0 0 0 1px rgb(15 23 42 / .08); }
.v14-logo-pratinjau .mk-pv-transparan { background: transparent; padding: 0; }

/* ============================================================================
   9. MENU DI DALAM HALAMAN UNTUK PONSEL & TABLET — tombol berlabel, tanpa submenu
   - Ujian Kosakata: kisi tombol di Dashboard; halaman lain hanya tombol
     "Semua menu ujian" (pola beranda → halaman → kembali).
   - Pengaturan & Game Santri: semua pilihan tampil sebagai kisi tombol.
   ========================================================================== */
.svx-hub-kembali, .np-hub-kembali { display: none; }
@media (max-width: 1023.98px) {
    #svx-akar .svx-nav {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; position: static;
        padding: 0; margin: 0 0 16px; background: none;
    }
    #svx-akar .svx-nav-grup { display: contents; }
    #svx-akar .svx-nav-grup > p { display: block; grid-column: 1 / -1; margin: 10px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--svx-teks-3, #64748B); }
    #svx-akar .svx-nav-grup:first-child > p { margin-top: 0; }
    #svx-akar .svx-nav button {
        flex-direction: column; justify-content: center; min-height: 74px; padding: 10px 4px; gap: 6px; white-space: normal; text-align: center;
        font-size: 11.5px; line-height: 1.2; border-radius: 14px; position: relative;
        animation: npTile calc(.36s * var(--mo, 1)) var(--np-spring) both;
    }
    #svx-akar .svx-nav button i { font-size: 17px; width: auto; color: rgb(var(--c-primary-600)); }
    .dark #svx-akar .svx-nav button i { color: rgb(var(--c-primary-300)); }
    #svx-akar .svx-nav button[aria-current="page"] i { color: #fff; }
    #svx-akar .svx-nav .svx-lencana { position: absolute; top: 6px; right: 6px; }
    #svx-akar:not([data-view="dashboard"]) .svx-nav { display: none; }
    #svx-akar:not([data-view="dashboard"]) .svx-hub-kembali,
    .np-hub-kembali {
        display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; margin: 0 0 14px;
        border-radius: 14px; font-size: 13px; font-weight: 700; text-align: left;
        background: rgb(var(--c-primary-500) / .08); color: rgb(var(--c-primary-700)); border: 1px solid rgb(var(--c-primary-500) / .18);
    }
    .dark #svx-akar .svx-hub-kembali, .dark .np-hub-kembali { color: rgb(var(--c-primary-200)); background: rgb(var(--c-primary-400) / .12); }
    #svx-akar .svx-hub-kembali b, .np-hub-kembali b { margin-left: auto; font-size: 12px; color: #64748B; font-weight: 700; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Pengaturan: rel tab menjadi kisi tombol */
    #content-area .tabs-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; background: none; overflow: visible; }
    #content-area .tabs-rail > .tab-pill {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 10px 4px;
        border-radius: 14px; text-align: center; white-space: normal; line-height: 1.2; font-size: 11.5px;
        background: #fff; border: 1px solid rgb(15 23 42 / .08);
    }
    .dark #content-area .tabs-rail > .tab-pill { background: #142036; border-color: rgb(255 255 255 / .06); }
    #content-area .tabs-rail > .tab-pill i { margin: 0 !important; font-size: 16px !important; }
    #content-area .tabs-rail > .tab-pill.is-on { background: linear-gradient(150deg, rgb(var(--c-primary-500)), rgb(var(--c-primary-700))); color: #fff; border-color: transparent; }

    /* Game Santri: semua bagian sebagai kisi tombol */
    .gs-nav-kelompok { grid-template-columns: 1fr !important; gap: 4px !important; }
    .gs-nav-kelompok section { border: 0 !important; padding: 0 !important; }
    .gs-nav-kelompok h2 { margin: 8px 2px 6px !important; }
    .gs-nav-kelompok .gs-tab { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: none; border: 0; padding: 0; overflow: visible; }
    .gs-nav-kelompok .gs-tab button {
        flex-direction: column; justify-content: center; min-height: 68px; padding: 10px 4px; gap: 6px; white-space: normal; text-align: center;
        border-radius: 14px; background: #fff; border: 1px solid rgb(15 23 42 / .08); font-size: 11.5px; position: relative;
    }
    html.dark .gs-nav-kelompok .gs-tab button { background: #142036; border-color: rgb(255 255 255 / .06); }
    .gs-nav-kelompok .gs-tab button i { font-size: 16px; color: rgb(var(--c-primary-600)); }
    .gs-nav-kelompok .gs-tab button[aria-selected="true"] { background: linear-gradient(150deg, rgb(var(--c-primary-500)), rgb(var(--c-primary-700))); color: #fff; }
    .gs-nav-kelompok .gs-tab button[aria-selected="true"] i { color: #fff; }
    .gs-nav-kelompok .gs-tab em { position: absolute; top: 6px; right: 6px; }
}
@media (min-width: 480px) and (max-width: 1023.98px) {
    #svx-akar .svx-nav, #content-area .tabs-rail, .gs-nav-kelompok .gs-tab { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html[data-ringan="1"] #svx-akar .svx-nav button { animation: none; }