/* =====================================================================
   DMRID -- navigasi bersama: rel kiri (PC), tab bawah (HP), lompat cepat (Ctrl+K)
   Dipakai halaman anggota, Surat, Pesan, Cari Anggota, profil, dan Admin Panel.
   ===================================================================== */
:root{--rail:84px;--tab:62px;--safe-b:env(safe-area-inset-bottom,0px);--nav-line:var(--line);--nav-muted:var(--muted);--nav-accent:var(--accent2);--nav-red:var(--red)}
@view-transition{navigation:auto}
.rail{view-transition-name:rail}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.s{width:17px;height:17px}
/* ---------- rel menu (PC) & tab bawah (HP) ---------- */
.rail{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;height:calc(var(--tab) + var(--safe-b));padding-bottom:var(--safe-b);background:color-mix(in srgb,var(--nav-bg) 94%,transparent);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--nav-line)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--nav-muted);text-decoration:none;font-size:11px;font-weight:600;position:relative;letter-spacing:.2px}
.tabbar a.on{color:var(--text)}
.tabbar a.on .ico{color:var(--nav-accent)}
.nbadge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
body.shell{padding-bottom:calc(var(--tab) + var(--safe-b) + 12px)}


.tabbar a.on::before{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--nav-accent)}
.tabbar a:active .ico,.rail a.it:active .ico{transform:scale(.88)}
.tabbar .ico,.rail .ico{transition:transform .12s}
.jump-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--nav-accent);background:none;border:0;cursor:pointer;flex:none}
.jump-btn:hover{background:var(--hover)}

/* lompat cepat */
.pal{position:fixed;inset:0;z-index:200;background:rgba(2,6,23,.62);display:none;align-items:flex-start;justify-content:center;padding:calc(10vh + env(safe-area-inset-top,0px)) 12px 12px}
.pal.show{display:flex}
.pal .box{width:100%;max-width:560px;background:var(--panel2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line2);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;font:15px/1.4 var(--font);color:var(--text)}
.pal .in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pal input{flex:1;background:none;border:0;color:var(--text);font-size:17px;outline:none;min-width:0}
.pal kbd{font:11px var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:2px 6px}
.pal ul{list-style:none;margin:0;padding:6px;max-height:min(60vh,440px);overflow:auto}
.pal li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer}
.pal li.hl{background:var(--accent-soft)}
.pal li .ico{color:var(--accent2)}
.pal li small{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.pal .sec{padding:8px 12px 4px;font-size:11.5px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;cursor:default}
.pal .foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

@media (min-width:900px){
  body.shell{padding-bottom:0;padding-left:var(--rail)}
  .tabbar{display:none}
  .rail{display:flex;flex-direction:column;align-items:center;gap:4px;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;background:var(--bg2);border-right:1px solid var(--line);padding:12px 0}
  .rail .logo{width:48px;height:48px;margin-bottom:12px;display:block}
  .rail .logo img{width:100%;height:100%;object-fit:contain}
  .rail a.it{width:70px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 8px;border-radius:14px;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600;position:relative}
  .rail a.it:hover{background:var(--hover);color:var(--text)}
  .rail a.it.on{background:var(--accent-soft);color:var(--text)}
  .rail a.it.on .ico{color:var(--accent2)}
  .rail .nbadge{top:4px;left:calc(50% + 4px)}
  .rail .sp{flex:1}
}
@media (max-width:899px){ .pal{padding-top:calc(10px + env(safe-area-inset-top,0px))} .pal .foot{display:none} }
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }