:root{
  --navy:#0B3350; --blue:#1E5C8C; --blue-light:#E7F0F7;
  --teal:#0E9488; --teal-light:#E4F5F3;
  --bg:#F3F6F9; --paper:#FFFFFF; --ink:#142433; --ink-soft:#5B6E7E;
  --line:#E1E8EE; --amber:#C9822B; --red:#C24C3C; --radius:10px;
  --shadow:0 1px 2px rgba(11,51,80,.06), 0 6px 20px -12px rgba(11,51,80,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,.serif{font-family:'Source Serif 4',serif;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;}

/* ---------- Topbar & sidebar (portal) ---------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 28px;height:66px;position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:center;gap:11px;margin-right:8px;}
.brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(160deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.brand-text .name{font-weight:800;font-size:15px;letter-spacing:.2px;color:var(--navy);line-height:1.15;}
.brand-text .tag{font-size:11px;color:var(--ink-soft);}
.topnav{display:flex;gap:26px;flex:1;}
.topnav a{font-size:14px;font-weight:500;color:var(--ink-soft);padding:22px 0;border-bottom:2px solid transparent;}
.topnav a.active{color:var(--navy);font-weight:600;border-color:var(--teal);}
.topsearch-form{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 14px;width:280px;}
.topsearch-form input{border:none;outline:none;background:transparent;font-size:13px;width:100%;color:var(--ink);}
.topsearch-form svg{color:var(--ink-soft);flex-shrink:0;}
.top-actions{display:flex;align-items:center;gap:16px;margin-left:6px;}
.user-chip{display:flex;align-items:center;gap:9px;position:relative;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;}
.user-chip .greet{font-size:13.5px;color:var(--ink-soft);}
.user-chip .greet b{color:var(--ink);}
.login-btn{background:var(--blue);color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;}

.layout{display:flex;align-items:flex-start;}
.sidebar{width:220px;flex-shrink:0;background:var(--paper);border-right:1px solid var(--line);padding:20px 12px;position:sticky;top:66px;height:calc(100vh - 66px);}
.side-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink-soft);margin-bottom:2px;}
.side-link svg{flex-shrink:0;opacity:.85;}
.side-link.active{background:var(--navy);color:#fff;}
.side-link.active svg{opacity:1;}
.side-link:not(.active):hover{background:var(--bg);color:var(--ink);}
.main{flex:1;min-width:0;padding:28px 32px 60px;}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg,#0E3B5C,#134A72 55%,#0E9488);border-radius:16px;padding:40px 42px;display:flex;align-items:center;gap:32px;color:#fff;position:relative;overflow:hidden;margin-bottom:30px;}
.hero-copy{position:relative;z-index:2;flex:1;}
.eyebrow-line{width:34px;height:3px;background:var(--teal);border-radius:2px;margin-bottom:16px;}
.hero h1{font-size:32px;line-height:1.18;margin:0 0 12px;font-weight:600;}
.hero h1 span{color:#8FE3D8;}
.hero p{font-size:14.5px;line-height:1.6;color:#CFE1EC;max-width:440px;margin:0 0 22px;}
.hero-search{background:#fff;border-radius:10px;display:flex;align-items:center;gap:10px;padding:13px 16px;max-width:460px;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);}
.hero-search input{border:none;outline:none;flex:1;font-size:13.5px;font-family:inherit;color:var(--ink);}
.hero-search button{background:none;border:none;color:var(--ink-soft);display:flex;}
.hero-art{width:200px;flex-shrink:0;position:relative;z-index:1;opacity:.92;}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 16px;}
.section-head h2{font-size:19px;font-weight:600;margin:0;color:var(--navy);}
.section-head a{font-size:13px;color:var(--blue);font-weight:600;}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;}
.cat-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 10px;text-align:center;transition:.15s;}
.cat-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow);}
.cat-ic{width:38px;height:38px;border-radius:9px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.cat-card .cname{font-size:13px;font-weight:700;color:var(--ink);}
.cat-card .ccount{font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* ---------- Document cards ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.doc-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.doc-cover{height:112px;padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.doc-cover .cat-tag{font-size:9.5px;font-weight:700;letter-spacing:.5px;opacity:.85;}
.doc-cover .dtitle{font-family:'Source Serif 4',serif;font-weight:600;font-size:15.5px;line-height:1.22;}
.doc-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 100%, rgba(255,255,255,.16), transparent 60%);}
.doc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1;}
.doc-body .dname{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:2px;}
.doc-body .ddept{font-size:12px;color:var(--ink-soft);}
.doc-body .dmeta{font-size:11.5px;color:var(--ink-soft);margin-bottom:10px;}
.btn-read{margin-top:auto;border:1.4px solid var(--blue);color:var(--blue);background:transparent;padding:8px 0;border-radius:8px;font-size:12.5px;font-weight:700;width:100%;transition:.15s;display:block;text-align:center;}
.btn-read:hover{background:var(--blue);color:#fff;}

.c1{background:linear-gradient(135deg,#123B5E,#0E9488);}
.c2{background:linear-gradient(135deg,#1E5C8C,#123B5E);}
.c3{background:linear-gradient(135deg,#C9822B,#8C5A1E);}
.c4{background:linear-gradient(135deg,#1E5C8C,#0E9488);}
.c5{background:linear-gradient(135deg,#0E9488,#0B3350);}

.empty-state{padding:50px 20px;text-align:center;color:var(--ink-soft);}
.empty-state svg{color:var(--line);margin-bottom:12px;}

/* ---------- Filter bar (koleksi) ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.filter-bar select, .filter-bar input[type=text]{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;}
.filter-bar button{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;}

.pagination{display:flex;gap:6px;justify-content:center;margin-top:30px;}
.pagination a, .pagination span{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--ink-soft);}
.pagination a.cur{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- Document detail / reader ---------- */
.doc-detail{display:grid;grid-template-columns:280px 1fr;gap:26px;}
.doc-detail-cover{border-radius:14px;padding:26px;color:#fff;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;}
.doc-detail-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px;}
.doc-detail-panel h1{font-size:23px;margin:0 0 8px;color:var(--navy);}
.doc-tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.tag-pill{background:var(--teal-light);color:#0B7A6E;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;}
.meta-row{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.meta-item .lab{font-size:11px;color:var(--ink-soft);margin-bottom:3px;}
.meta-item .val{font-size:13.5px;font-weight:700;color:var(--ink);}
.pdf-frame{width:100%;height:640px;border:1px solid var(--line);border-radius:10px;margin-top:18px;background:#fff;}

/* ---------- Forms (auth) ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#0E3B5C,#0B3350 60%,#0E9488);padding:20px;}
.auth-card{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.auth-card .brand{justify-content:center;margin-bottom:22px;}
.auth-card h2{font-size:20px;margin:0 0 6px;text-align:center;color:var(--navy);}
.auth-card p.sub{text-align:center;color:var(--ink-soft);font-size:13px;margin:0 0 24px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;}
.field textarea{resize:none;height:64px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn{padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink-soft);}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;width:100%;padding:12px;}
.btn-primary:hover{background:var(--navy);}
.alert{padding:11px 14px;border-radius:8px;font-size:12.5px;margin-bottom:16px;}
.alert-error{background:#F5E4E1;color:var(--red);}
.alert-success{background:var(--teal-light);color:#0B7A6E;}
.demo-note{background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:11.5px;color:var(--ink-soft);margin-top:18px;line-height:1.6;}
.auth-foot{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:16px;}
.auth-foot a{color:var(--blue);font-weight:600;}

/* ================= ADMIN ================= */
.admin-shell{display:flex;min-height:100vh;}
.admin-side{width:232px;flex-shrink:0;background:var(--navy);color:#BFD4E4;padding:22px 14px;position:sticky;top:0;height:100vh;}
.admin-brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px;}
.admin-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.admin-brand span{font-weight:800;font-size:13px;color:#fff;letter-spacing:.4px;}
.admin-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;margin-bottom:2px;color:#A9C1D3;}
.admin-link svg{opacity:.8;flex-shrink:0;}
.admin-link.active{background:var(--teal);color:#fff;}
.admin-link.active svg{opacity:1;}
.admin-link:not(.active):hover{background:rgba(255,255,255,.06);color:#fff;}
.admin-link.logout{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.admin-main{flex:1;min-width:0;padding:26px 30px 50px;}
.admin-h1{font-size:21px;font-weight:600;color:var(--navy);margin:2px 0 20px;display:flex;justify-content:space-between;align-items:center;}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.stat-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);}
.stat-ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-ic.b1{background:var(--blue-light);color:var(--blue);}
.stat-ic.b2{background:var(--teal-light);color:var(--teal);}
.stat-ic.b3{background:#FBEFE0;color:var(--amber);}
.stat-ic.b4{background:#F5E4E1;color:var(--red);}
.stat-num{font-size:21px;font-weight:800;color:var(--ink);line-height:1;}
.stat-lab{font-size:12px;color:var(--ink-soft);margin-top:4px;}

.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow);}
.panel h3{font-size:14.5px;font-weight:700;margin:0 0 16px;color:var(--navy);}
.top-doc-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.8px;}
.top-doc-row:last-child{border:none;}
.top-doc-row .n{color:var(--ink-soft);width:16px;flex-shrink:0;}
.top-doc-row .t{flex:1;color:var(--ink);font-weight:500;}
.top-doc-row .v{color:var(--ink-soft);font-size:11.5px;white-space:nowrap;}

.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.drop{border:1.6px dashed #B9CBD8;border-radius:12px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);text-align:center;background:var(--bg);cursor:pointer;padding:20px;}
.drop.has-file{border-color:var(--teal);color:var(--teal);background:var(--teal-light);}
.drop svg{color:var(--blue);}
.drop.has-file svg{color:var(--teal);}
.drop .hint{font-size:11.5px;}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}

.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.table-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:12px;flex-wrap:wrap;}
table{width:100%;border-collapse:collapse;font-size:12.8px;}
thead th{text-align:left;padding:10px 20px;color:var(--ink-soft);font-weight:600;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#FAFCFD;}
tbody td{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.status{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.status.aktif{background:var(--teal-light);color:#0B7A6E;}
.status.nonaktif{background:#F5E4E1;color:var(--red);}
.row-actions{display:flex;gap:8px;justify-content:flex-end;}
.row-actions a, .row-actions button{border:1px solid var(--line);background:#fff;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.row-actions .danger{color:var(--red);}
.row-actions a:hover, .row-actions button:hover{border-color:var(--blue);color:var(--blue);}

@media(max-width:1180px){.cat-grid{grid-template-columns:repeat(4,1fr);}.doc-grid{grid-template-columns:repeat(3,1fr);}.stat-row{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}}
@media(max-width:800px){.sidebar,.admin-side{display:none;}.topnav{display:none;}.cat-grid{grid-template-columns:repeat(2,1fr);}.doc-grid{grid-template-columns:repeat(2,1fr);}.hero{flex-direction:column;}.hero-art{display:none;}.doc-detail{grid-template-columns:1fr;}.upload-grid{grid-template-columns:1fr;}}