:root{
  --primary:#020062; --primary-dark:#010042; --primary-light:#6B7EBD;
  --accent:#F97316; --accent-light:#FED7AA;
  --text:#020062; --muted:#6F6E8F; --border:#DCDBE9;
  --surface-1:#F8F9FF; --surface-2:#F0F2FF;
  --glass-bg:rgba(255,255,255,.62); --glass-bg-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.75);
  --navy-panel:linear-gradient(160deg,#020062 0%,#0A1B7A 55%,#16339E 100%);
  --btn-navy:linear-gradient(180deg,#1B2FA3 0%,#020062 100%);
  --shadow-glass:0 12px 32px -8px rgba(2,0,98,.18),inset 0 1px 0 rgba(255,255,255,.9);
  --radius-sm:.375rem; --radius-md:.625rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.5rem;
  --radius-pill:9999px;
  /* Lebar sidebar = lebar satu kolom konten. Dipakai header & shell supaya sejajar. */
  --sidebar-w:240px; --shell-gap:1.5rem; --shell-pad:1.5rem;
  --page-max:1280px;
  --font-heading:'Montserrat',sans-serif; --font-body:'Google Sans','Product Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-body);color:var(--text);line-height:1.5;min-height:100vh;
  background:radial-gradient(60rem 40rem at 10% -10%,rgba(59,130,246,.18),transparent 60%),
    radial-gradient(50rem 36rem at 100% 10%,rgba(2,0,98,.10),transparent 60%),
    linear-gradient(180deg,#EEF2FB,#E6ECF8) fixed;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* HEADER */
.header{
  position:sticky;top:0;z-index:30;background:var(--navy-panel);color:#fff;
  padding:env(safe-area-inset-top,0px) var(--shell-pad) 0;
  box-shadow:0 20px 40px -12px rgba(2,0,98,.45);
}
/* Isi header selebar konten (sama dengan .shell), supaya search bisa sejajar dengan kolom kanan */
.header-inner{
  height:72px;display:flex;align-items:center;gap:var(--shell-gap);
  width:100%;max-width:var(--page-max);margin:0 auto;
}
.logo{display:flex;align-items:center;flex:0 0 var(--sidebar-w);min-width:0;text-decoration:none}
.logo-img{display:block;height:40px;width:auto;max-width:none;flex:0 0 auto}
/* Jarak minimum ujung search bar ke logo, dan ujung kanan search sejajar tepi card */
.search{position:relative;flex:1;min-width:0;width:auto}
.search input{
  width:100%;height:44px;padding:0 1rem 0 2.75rem;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.14);color:#fff;outline:none;
}
.search input::placeholder{color:rgba(255,255,255,.75)}
.search input:focus{background:rgba(255,255,255,.22)}
.search>svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.8);width:18px;height:18px}
.search-drop{
  position:absolute;right:0;left:0;top:calc(100% + .5rem);display:none;padding:.375rem;
  background:var(--glass-bg-strong);color:var(--text);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);box-shadow:0 12px 32px -8px rgba(2,0,98,.25);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:360px;overflow:auto;
}
.search.open .search-drop{display:block}
.drop-label{font-size:.7rem;font-weight:600;color:var(--muted);padding:.5rem .75rem .25rem;text-transform:uppercase;letter-spacing:.05em}
.drop-item{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.6rem .75rem;border-radius:var(--radius-md)}
.drop-item:hover{background:var(--surface-1)}
.drop-item span{flex:1;font-size:.9rem}
.drop-item small{font-size:.7rem;color:var(--muted)}
.drop-empty{padding:.75rem;color:var(--muted);font-size:.9rem}

/* LAYOUT */
.shell{
  display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:var(--shell-gap);
  padding:var(--shell-pad);max-width:var(--page-max);margin:0 auto;
}
.sidebar{
  position:sticky;top:96px;align-self:start;padding:1rem;border-radius:var(--radius-2xl);
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.nav-btn{
  display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;border-radius:var(--radius-pill);
  font-weight:500;color:var(--muted);margin-bottom:.25rem;text-align:left;
}
.nav-btn:hover{background:rgba(255,255,255,.6);color:var(--text)}
.nav-btn.active{background:var(--btn-navy);color:#fff;box-shadow:0 8px 18px -6px rgba(2,0,98,.55)}
/* Bahasa English: kata Indonesia tetap di atas, English lebih kecil & miring di bawahnya */
.lang-en .nav-btn>span[data-i18n^="nav_"]{
  display:flex;flex-direction:column;line-height:1.15;
}
.lang-en .nav-btn>span[data-i18n^="nav_"]::after{
  content:attr(data-alt);font-size:.7em;font-style:italic;color:var(--muted);font-weight:400;letter-spacing:.01em;
}
.lang-en .side-cta-txt b[data-i18n]{display:flex;flex-direction:column;line-height:1.15}
.lang-en .side-cta-txt b[data-i18n]::after{
  content:'Masukan & Saran';font-size:.78em;font-style:italic;font-weight:400;
}
.nav-sep{height:1px;background:var(--border);margin:.75rem .5rem}
/* Tombol Masukan & Saran: kartu CTA tepat di bawah grup menu (bukan di dasar layar) */
.side-cta{
  display:flex;align-items:center;gap:.65rem;margin-top:.25rem;padding:.6rem .75rem;
  border-radius:var(--radius-xl);background:var(--accent-light);color:#9A3412;
  text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;
}
.side-cta:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(234,88,12,.7)}
.side-cta:hover .side-cta-txt b{color:var(--primary-dark)}
.side-cta:hover .side-cta-txt small{color:#3E1C00}
.side-cta-ic{
  width:32px;height:32px;border-radius:var(--radius-pill);display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.65);color:#C2410C;
}
.side-cta:hover .side-cta-ic{background:rgba(255,255,255,.75);color:#9A3412}
.side-cta-ic svg.ic{width:17px;height:17px}
.side-cta-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.side-cta-txt b{font-size:.85rem;font-weight:600}
.side-cta-txt small{font-size:.68rem;color:#9A3412;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0}
.page{display:none}
.page.active{display:block}

/* TITLES */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
h1{font-family:var(--font-heading);font-size:2.25rem;font-weight:800;line-height:1.2}
/* Judul halaman versi English yang belum lengkap: beri keterangan kecil & miring */
h1[data-lang-note]::after{
  content:attr(data-lang-note);display:block;font-family:var(--font-body);
  font-size:.8rem;font-style:italic;font-weight:400;color:var(--muted);margin-top:.15rem;
}
.sub{color:var(--muted);font-size:.9rem;margin-top:.25rem}
h2{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:2rem 0 1rem;gap:1rem}
.counter{font-size:.8rem;color:var(--muted)}
select.filter{
  height:42px;padding:0 2.5rem 0 1rem;border-radius:var(--radius-pill);border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);outline:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;
}

/* STAT CARDS */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.stat{
  padding:1.25rem;border-radius:var(--radius-2xl);background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;
}
.stat .ic-wrap{margin-bottom:.75rem}
.stat .label{font-size:.85rem;color:rgba(255,255,255,.85)}
.stat{background:var(--navy-panel);color:#fff;border-color:transparent;box-shadow:0 16px 32px -10px rgba(2,0,98,.5)}
.stat .ic-wrap{background:rgba(255,255,255,.16);color:#fff}
.stat:nth-child(2){background:linear-gradient(160deg,#F97316 0%,#EA580C 100%);box-shadow:0 16px 32px -10px rgba(234,88,12,.5)}
.stat:nth-child(2) .ic-wrap{background:rgba(255,255,255,.2)}
.stat .num{font-family:var(--font-heading);font-size:2.25rem;font-weight:800;line-height:1.1}

/* KARTU (sama dengan kartu favorit di dashboard) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{
  position:relative;padding:1.25rem;border-radius:var(--radius-2xl);background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;min-height:170px;transition:transform .15s,box-shadow .15s;
  cursor:pointer;
}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(2,0,98,.25)}
.card:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.9rem}
.ic-wrap{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--surface-3,#E8EBFF);color:var(--primary)}
.ic-wrap.mat{background:var(--accent-light);color:#C2410C}
.star{width:36px;height:36px;border-radius:var(--radius-pill);display:grid;place-items:center;color:#A8A7BF;background:rgba(255,255,255,.7);position:relative;z-index:2}
.star:hover{color:var(--accent)}
.star.on{color:var(--accent)}
.star:disabled{opacity:.4;cursor:not-allowed}
.card-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.35rem}
/* Tautan kartu: seluruh kartu bisa diklik, bukan hanya tulisannya */
.card-link{color:inherit;text-decoration:none}
.card-link:focus-visible{outline:none}
.card-link::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:1}
.card-desc{font-size:.85rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{margin-top:auto;padding-top:.75rem;font-size:.7rem;color:var(--muted)}
.tag b{display:inline-block;padding:.2rem .55rem;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--primary);font-weight:600}
.empty{padding:1.25rem;border-radius:var(--radius-2xl);border:1px dashed var(--primary-light);color:var(--muted);font-size:.9rem;background:rgba(255,255,255,.4)}

/* PAGINATION */
.pager{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem}
.pager button{min-width:38px;height:38px;border-radius:var(--radius-pill);padding:0 .75rem;background:var(--glass-bg-strong);border:1px solid var(--glass-border)}
.pager button.active{background:var(--btn-navy);color:#fff}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ICON PICKER */
.picker{
  position:fixed;inset:0;background:rgba(1,0,66,.35);display:none;place-items:center;z-index:50;padding:1rem;
}
.picker.open{display:grid}
.picker-box{width:min(340px,100%);padding:1.25rem;border-radius:var(--radius-2xl);background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.picker-box p{font-size:.9rem;color:var(--muted);margin-bottom:1rem}
.picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.picker-grid button{height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--surface-1);border:1px solid var(--border);color:var(--primary)}
.picker-grid button:hover{border-color:var(--primary);background:#fff}
.picker-cancel{margin-top:1rem;width:100%;height:42px;border-radius:var(--radius-pill);background:var(--glass-bg);border:1px solid var(--glass-border);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy-panel);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-pill);font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.toast.show{opacity:1}

/* RESPONSIVE */
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr;padding:1rem 1rem 7rem}
  .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;min-height:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px));border-radius:1.25rem 1.25rem 0 0}
  .nav-btn{flex-direction:column;justify-content:center;gap:.2rem;font-size:.72rem;padding:.5rem .2rem;margin-bottom:0;border-radius:1rem;text-align:center;white-space:normal}
  .nav-btn svg.ic{width:22px;height:22px}
  .side-cta{margin-top:0;flex-direction:column;justify-content:center;gap:.2rem;padding:.5rem .2rem;border-radius:1rem;background:none;color:var(--muted);box-shadow:none}
  .side-cta:hover{background:rgba(255,255,255,.6);color:var(--text);transform:none;box-shadow:none}
  .side-cta-ic{width:auto;height:auto;background:none;color:inherit}
  .side-cta-ic svg.ic{width:22px;height:22px}
  .side-cta-txt{align-items:center}
  .side-cta-txt b{font-size:.72rem;font-weight:500;text-align:center}
  .side-cta-txt small{display:none}
  /* English di layar sempit: pakai label pendek & rapatkan spasi baris */
  .lang-en .nav-btn>span[data-i18n^="nav_"]::after{font-size:.78em}
  .lang-en .side-cta-txt b[data-i18n]::after{display:none}
  .lang-en .side-cta-txt b[data-i18n]::before{
    content:attr(data-alt-short);font-size:.78em;font-style:italic;font-weight:400;
  }
  .header-inner{height:64px;gap:.75rem}
  /* Mobile: logo kembali selebar isinya, search mengisi sisa ruang */
  .logo{flex:0 0 auto}
  .search{min-width:0}
  .search input{height:40px}
  .sec-head{margin:1.5rem 0 .75rem}
  .nav-sep{display:none}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .logo-img{height:32px}
  h1{font-size:1.75rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}