/* SaveUs — Dashboard shell untuk semua halaman publik (sidebar navy + top navbar + kartu pastel) */
:root{
  --bg:#eef2fb;--bg2:#e6ecf8;--card:#fff;--card2:#f5f7fd;--border:#e3e8f4;--border2:#d3dbec;
  --ink:#10192f;--ink2:#4b566f;--ink3:#8591ab;
  --blue:#2f6bff;--blue-h:#2459e0;--blue-s:#e3ecff;--blue-b:#bcd0ff;
  --green:#12a150;--green-s:#dff6e8;--amber:#f07d1a;--amber-s:#ffeedd;
  --radius:18px;--shadow:0 1px 2px rgba(20,35,80,.05),0 6px 18px rgba(20,35,80,.06);
  --navy:#0f1b3d;--navy2:#1a2a55;--shell-w:230px;
}
[data-theme=dark]{
  --bg:#0b1126;--bg2:#0f1731;--card:#131c38;--card2:#182244;--border:#232f57;--border2:#2f3d6b;
  --ink:#f1f4fc;--ink2:#aab5d3;--ink3:#7886ab;--blue-s:#16264f;--green-s:#0f2a22;--amber-s:#33220f;--navy:#081029;
}
html body{background:var(--bg)!important;color:var(--ink)}
@media(min-width:901px){html body{padding-left:var(--shell-w)}body.shell-collapsed{padding-left:0!important}body.shell-collapsed .shell-side{display:none}}

/* Sidebar */
.shell-side{position:fixed;inset:0 auto 0 0;width:var(--shell-w);z-index:80;display:flex;flex-direction:column;gap:20px;padding:22px 14px;background:var(--navy);color:#b4c0e4;overflow-y:auto}
.shell-brand{display:flex;align-items:center;gap:11px;padding:0 8px;color:#fff;font-weight:800;font-size:20px}
.shell-brand i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#2f6bff)}
.shell-brand svg,.shell-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shell-brand small{display:block;font-size:11px;font-weight:600;color:#7f8fbd}
.shell-nav{display:flex;flex-direction:column;gap:4px}
.shell-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:600;color:#b4c0e4;text-decoration:none;transition:background .15s}
.shell-nav a:hover{background:var(--navy2);color:#fff}
.shell-nav a.on{background:#2f6bff;color:#fff;box-shadow:0 6px 16px rgba(47,107,255,.35)}
.shell-sep{margin:6px 14px 0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6c7cab;font-weight:700}

/* Top navbar (nav bawaan jadi top navbar) */
html body>nav{position:sticky;top:0;z-index:60;background:var(--card)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;backdrop-filter:none!important}
html body>nav .nav-inner{max-width:none!important;padding:10px 26px!important;gap:14px}
.shell-menu{width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--ink);display:none;place-items:center;cursor:pointer}
.shell-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(min-width:901px){
  html body>nav .brand,html body>nav .nav-links,html body>nav .mobile-nav-toggle{display:none!important}
  .shell-menu{display:inline-grid}
  html body>nav .nav-inner{justify-content:flex-start}
  html body>nav .nav-right{margin-left:auto}
}
.shell-search{display:none}
@media(min-width:901px){.shell-search{display:flex;align-items:center;gap:10px;flex:1;max-width:440px;height:42px;padding:0 14px;border-radius:12px;background:var(--bg2);color:var(--ink3)}
.shell-search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.shell-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink)}}

/* Konten & kartu */
.page{max-width:1000px!important;padding-top:24px}
.card,.panel,.result,.result-card,.faq-item,details,.cmp-card,.step,.feature{border-radius:18px!important;border-color:var(--border)!important;box-shadow:var(--shadow)}
.hero h1 span,h1 span{color:var(--blue)}
.nav-cta,.btn.primary,.btn-primary,button.primary{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;border-radius:12px!important}
input:focus,select:focus,textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(47,107,255,.18)!important}
footer{background:transparent!important;border-top:1px solid var(--border)!important}

/* Mobile: bottom tab bar navy */
@media(max-width:900px){
  .shell-side{inset:auto 0 0 0;width:auto;height:calc(64px + env(safe-area-inset-bottom,0px));flex-direction:row;gap:0;padding:0 0 env(safe-area-inset-bottom,0px);overflow:hidden;border-top:1px solid var(--navy2)}
  .shell-brand,.shell-sep,.shell-nav a:nth-child(n+5){display:none}
  .shell-nav{flex-direction:row;width:100%}
  .shell-nav a{flex:1;flex-direction:column;justify-content:center;gap:3px;font-size:10.5px;padding:0;border-radius:0;box-shadow:none!important}
  .shell-nav a.on{background:transparent;color:#fff;box-shadow:none;border-top:3px solid #2f6bff}
  html body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}