@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --navy:       #0f1f3d;
  --navy-mid:   #1a3160;
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --cream:      #f5f0e8;
  --cream-dark: #e3ddd1;
  --paper:      #faf8f4;
  --text:       #1a1a2e;
  --muted:      #6b7280;
  --border:     #d4c9b5;
  --white:      #ffffff;
  --mono:       'IBM Plex Mono', monospace;
  --sans:       'IBM Plex Sans', sans-serif;
  --radius:     6px;
  --shadow:     0 2px 12px rgba(15,31,61,0.08);
  --shadow-lg:  0 6px 28px rgba(15,31,61,0.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--paper);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;}

/* HEADER */
.site-header{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,0.25);}
.header-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;}
.brand-icon{width:34px;height:34px;background:var(--gold);border-radius:4px;display:grid;place-items:center;font-size:17px;flex-shrink:0;}
.brand-name{font-family:var(--mono);font-size:14px;font-weight:600;color:white;}
.brand-sub{font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:.06em;}
.header-actions{display:flex;gap:8px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;transition:.18s ease;text-decoration:none;border:none;white-space:nowrap;}
.btn-outline{background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);}
.btn-outline:hover{background:rgba(255,255,255,.1);color:white;}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--cream);}
.btn-sm{padding:5px 11px;font-size:12px;}

/* HERO */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-bottom:3px solid var(--gold);color:white;padding:40px 0 32px;}
.hero-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hero-left{flex:1;}
.hero-eye{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.hero-title{font-family:var(--mono);font-size:clamp(20px,3.5vw,28px);font-weight:600;margin-bottom:8px;}
.hero-desc{font-size:14px;color:rgba(255,255,255,.6);}
.hero-ket{font-size:13px;color:var(--gold);font-family:var(--mono);margin-top:6px;letter-spacing:0.05em;font-weight:700;}
.hero-stats{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap;}
.stat-val{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--gold);line-height:1;}
.stat-lbl{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;}
.hero-logo{flex-shrink:0;}
.hero-logo img{height:80px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;}

/* TOOLBAR */
.toolbar{background:white;border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:90;padding:12px 0;}
.toolbar-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:180px;}
.search-wrap input{width:100%;padding:9px 14px 9px 36px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--sans);font-size:13px;background:var(--paper);color:var(--text);transition:border-color .18s;}
.search-wrap input:focus{outline:none;border-color:var(--navy-mid);background:white;}
.search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none;}
.filter-sel{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--sans);font-size:13px;background:var(--paper);cursor:pointer;}
.filter-sel:focus{outline:none;border-color:var(--navy-mid);}
.result-lbl{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto;}

/* MAIN */
.main{max-width:1080px;margin:0 auto;padding:32px 24px;}

/* CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;}
.dus-card{background:white;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow);}
.dus-card:hover{border-color:var(--navy-mid);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.card-head{background:var(--navy);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;}
.card-label{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--gold);}
.card-badge{font-family:var(--mono);font-size:10px;color:var(--gold-light);border:1px solid rgba(201,168,76,.35);border-radius:3px;padding:2px 7px;background:rgba(201,168,76,.12);}
.card-body{padding:16px 18px;}
.card-title{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:8px;line-height:1.35;}
.card-meta-r{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.card-foot{padding:10px 18px;border-top:1px solid var(--cream-dark);background:var(--cream);display:flex;align-items:center;justify-content:space-between;}
.dok-count{font-size:12px;color:var(--muted);}
.dok-count strong{font-family:var(--mono);font-size:17px;color:var(--navy);}
.view-arrow{font-size:12px;color:var(--navy-mid);font-weight:500;}

/* EMPTY */
.empty{text-align:center;padding:70px 20px;color:var(--muted);grid-column:1/-1;}
.empty-ico{font-size:44px;margin-bottom:14px;}
.empty-ttl{font-size:17px;font-weight:600;color:var(--text);margin-bottom:6px;}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap;}
.breadcrumb a{color:var(--navy-mid);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.bc-sep{color:var(--border);}

/* NAV */
.nav-duo{display:flex;gap:10px;margin-bottom:20px;}
.nav-duo a{flex:1;text-align:center;}

/* DETAIL CARD */
.detail-card{background:white;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:20px;}
.detail-head{background:var(--navy);padding:22px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.detail-num{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;}
.detail-title{font-family:var(--mono);font-size:20px;font-weight:700;color:#ffffff;line-height:1.2;}
.detail-ket{font-size:13px;color:var(--gold);font-family:var(--mono);margin-top:6px;letter-spacing:0.05em;font-weight:700;}

/* QR BOX */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;}
#qr-render{width:200px;height:200px;}
#qr-render canvas,#qr-render img{width:200px !important;height:200px !important;border-radius:4px;}

/* META BAR */
.meta-bar{padding:16px 26px;display:flex;gap:28px;flex-wrap:wrap;}
.meta-item{display:flex;flex-direction:column;gap:2px;}
.meta-key{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-weight:600;}
.meta-val{font-size:15px;font-weight:700;color:var(--navy);}

/* TABLE */
.table-wrap{background:white;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.table-head{padding:14px 18px;border-bottom:1px solid var(--cream-dark);background:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.table-head-title{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--navy);}
table{width:100%;border-collapse:collapse;}
thead th{padding:11px 16px;text-align:left;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--cream);border-bottom:2px solid var(--border);white-space:nowrap;}
tbody td{padding:10px 16px;border-bottom:1px solid var(--cream-dark);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(201,168,76,.05);}
.td-no{font-family:var(--mono);font-size:13px;color:var(--text);font-weight:700;width:40px;text-align:center;}
.td-nama{font-weight:700;font-size:15px;text-align:center;color:var(--text);}

/* TOAST */
.toast{position:fixed;bottom:22px;right:22px;background:var(--navy);color:white;padding:11px 18px;border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow-lg);z-index:999;display:flex;align-items:center;gap:8px;animation:slideUp .25s ease;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

mark{background:rgba(201,168,76,.35);color:inherit;border-radius:2px;padding:0 2px;}

/* RESPONSIVE */
@media(max-width:640px){
  .cards-grid{grid-template-columns:1fr;}
  .detail-head{flex-direction:column;}
  thead th,tbody td{padding:9px 11px;}
  .meta-bar{gap:16px;}
  .nav-duo{flex-direction:column;}
}

/* PRINT */
@media print {
  .site-header,.toolbar,.no-print{display:none !important;}
  body{background:white;font-size:12px;}
  .main{padding:10px 16px;}
  .detail-card,.table-wrap{box-shadow:none;border:1px solid #999;margin-bottom:10px;}
  .detail-head{padding:14px 18px;background:white !important;border-bottom:2px solid #333;}
  .detail-num{color:#333 !important;font-size:11px;}
  .detail-title{color:#000 !important;font-size:15px;font-weight:700;}
  .detail-ket{color:#333 !important;}
  #badge-label{color:#000 !important;}
  #badge-tahun{color:#000 !important;}
  .meta-bar{padding:10px 18px;gap:20px;}
  .meta-key{color:#333 !important;}
  .meta-val{color:#000 !important;font-weight:700;}
  .table-head{padding:8px 14px;background:#f0f0f0 !important;}
  .table-head-title{color:#000 !important;}
  thead th{padding:7px 14px;font-size:9px;color:#333 !important;background:#f0f0f0 !important;}
  tbody td{padding:6px 14px;}
  .td-no{color:#000 !important;font-weight:700;}
  .td-nama{font-size:13px;color:#000 !important;font-weight:700;}
  .breadcrumb,.nav-duo{display:none !important;}
  #qr-render canvas,#qr-render img{width:200px !important;height:200px !important;}
  @page{size:A4 portrait;margin:12mm;}


  /* ── BADGE C7 (tambahkan di bagian bawah style.css) ── */
.c7-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #c9a84c;
  color: #0d1b2a;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
}