/* ================================================
   SPMI POLISMA – Design System
   Warna: Hijau POLISMA + Emas Unisma
   Tahun: 2026 | Pedoman SPMI Permendiktisaintek No.39/2025
   ================================================ */

:root {
  --g900:#0d2a0d; --g800:#1a4d1a; --g700:#1e6b1e;
  --g600:#2d8a2d; --g500:#3aaa3a; --g400:#5dc45d;
  --g200:#a8e0a8; --g100:#d4f0d4; --g50:#edf7ed;
  --gold:#e69c00; --gold-l:#f5b832; --gold-d:#c88200;
  --gold-bg:#fff8e1; --gold-border:#fce08a;
  --white:#ffffff; --bg:#f4f7f0;
  --border:#d8e2cf; --border-l:#eef2e8;
  --text:#1a2e1a; --text-2:#4a6642; --text-3:#8fa882;
  --red:#c0392b; --red-bg:#fce4e4;
  --sidebar-w:240px;
  --radius:10px; --radius-lg:14px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --transition:.2s ease;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;
  line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── TYPOGRAPHY ── */
h1{font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.15;font-weight:800}
h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:700}
h3{font-size:1.1rem;font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{color:var(--text-2)}

/* ── UTILITIES ── */
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:760px;margin:0 auto;padding:0 1.5rem}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;
  border-radius:var(--radius);font-size:.875rem;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all var(--transition);border:none;
  text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--gold);color:var(--g900)}
.btn-primary:hover{background:var(--gold-l);transform:translateY(-1px)}
.btn-green{background:var(--g800);color:#fff}
.btn-green:hover{background:var(--g700)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-2)}
.btn-outline:hover{border-color:var(--g400);color:var(--g800)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid #f5c2c2}
.btn-danger:hover{background:#f5c2c2}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-icon{padding:7px;border-radius:8px;aspect-ratio:1}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;
  border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.badge-green{background:var(--g100);color:var(--g800);border:1px solid var(--g200)}
.badge-gold{background:var(--gold-bg);color:var(--gold-d);border:1px solid var(--gold-border)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-gray{background:var(--border-l);color:var(--text-3)}
.badge-ongoing{background:rgba(61,170,61,.15);color:var(--g600)}
.badge-upcoming{background:var(--gold-bg);color:var(--gold-d)}
.badge-done{background:var(--border-l);color:var(--text-3)}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow)}
.card-hover:hover{border-color:var(--g400);box-shadow:0 4px 20px rgba(45,138,45,.12);
  transform:translateY(-2px);transition:all var(--transition)}

/* ── FORMS ── */
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.8rem;font-weight:700;
  color:var(--g800);margin-bottom:5px;letter-spacing:.02em}
.form-group label .req{color:var(--red);margin-left:2px}
.form-control{width:100%;padding:10px 14px;border:1.5px solid var(--border);
  border-radius:var(--radius);font-size:.9rem;font-family:inherit;
  outline:none;color:var(--text);background:#fff;transition:border-color var(--transition)}
.form-control:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(58,170,58,.1)}
textarea.form-control{resize:vertical;min-height:90px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ── ALERTS ── */
.alert{padding:10px 16px;border-radius:var(--radius);font-size:.85rem;
  font-weight:600;margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:8px}
.alert-success{background:var(--g100);color:var(--g800);border:1px solid var(--g200)}
.alert-error{background:var(--red-bg);color:var(--red);border:1px solid #f5c2c2}
.alert-warning{background:var(--gold-bg);color:var(--gold-d);border:1px solid var(--gold-border)}
.alert-info{background:#e8f4fd;color:#1565c0;border:1px solid #bbdefb}

/* ── TABLE ── */
.table-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
thead tr{background:var(--bg)}
th{padding:10px 14px;text-align:left;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);
  border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border-l);font-size:.875rem;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--g50)}

/* ── SECTION TAG ── */
.section-tag{display:inline-block;background:var(--g100);color:var(--g800);
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 14px;border-radius:100px;border:1px solid var(--g200);margin-bottom:.75rem}
.section-title{color:var(--g900);margin-bottom:.5rem}
.section-desc{color:var(--text-2);max-width:560px;margin:0 auto;font-size:.9rem}

/* ── SIDEBAR LAYOUT ── */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--g900);color:#fff;
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:200;overflow-y:auto;
  transition:transform var(--transition)}
.sidebar-brand{padding:1.25rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:center}
.sb-logo{width:40px;height:40px;background:var(--gold);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;color:var(--g900);flex-shrink:0}
.sb-name{font-size:.85rem;font-weight:700;color:#fff;line-height:1.2}
.sb-name span{display:block;font-size:.68rem;font-weight:400;color:rgba(255,255,255,.45);margin-top:1px}
.sb-nav{flex:1;padding:.75rem 0}
.sb-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.28);padding:.5rem 1.1rem;margin-top:.25rem}
.sb-link{display:flex;align-items:center;gap:9px;padding:8px 1.1rem;
  color:rgba(255,255,255,.62);font-size:.83rem;font-weight:500;
  transition:all var(--transition);border-left:3px solid transparent;text-decoration:none}
.sb-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.sb-link.active{color:var(--gold);background:rgba(230,156,0,.1);border-left-color:var(--gold)}
.sb-link .ico{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.sb-footer{padding:.9rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.7rem;color:rgba(255,255,255,.35)}
.sb-footer a{color:var(--gold-l);text-decoration:none}

/* ── MAIN AREA ── */
.main-area{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);
  padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;gap:1rem}
.topbar h1{font-size:.95rem;font-weight:800;color:var(--g900);white-space:nowrap}
.user-pill{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-2);flex-shrink:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--g800);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.content-area{padding:1.5rem;flex:1}

/* ── HAMBURGER ── */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;
  flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--g900);
  border-radius:2px;transition:all var(--transition)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150}

/* ── PUBLIC NAVBAR ── */
.pub-nav{position:fixed;top:0;left:0;right:0;z-index:300;
  background:var(--g900);border-bottom:3px solid var(--gold);height:62px;
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem}
.pub-nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pn-logo{width:38px;height:38px;background:var(--gold);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
  font-weight:900;color:var(--g900);flex-shrink:0}
.pn-name{color:#fff;font-size:.85rem;font-weight:700;line-height:1.2}
.pn-name span{display:block;font-size:.65rem;font-weight:400;opacity:.6}
.pub-nav-links{display:flex;gap:2px;list-style:none;margin-left:auto;align-items:center}
.pub-nav-links a{color:rgba(255,255,255,.75);font-size:.8rem;font-weight:600;
  padding:6px 11px;border-radius:7px;transition:all var(--transition);text-decoration:none}
.pub-nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)}
.pub-nav-links a.active{color:var(--gold)}
.pn-cta{background:var(--gold)!important;color:var(--g900)!important;
  font-weight:700!important;padding:7px 14px!important}
.pn-cta:hover{background:var(--gold-l)!important}
.pn-hamburger{display:none;background:none;border:none;cursor:pointer;margin-left:auto;padding:4px}
.pn-hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;
  transition:all var(--transition);border-radius:2px}

/* ── TICKER ── */
.ticker{background:var(--g800);padding:.55rem 1.5rem;display:flex;align-items:center;gap:10px;
  margin-top:62px;overflow:hidden}
.ticker-label{background:var(--gold);color:var(--g900);font-size:.65rem;font-weight:800;
  padding:2px 9px;border-radius:4px;white-space:nowrap;text-transform:uppercase;flex-shrink:0}
.ticker-text{color:rgba(255,255,255,.8);font-size:.78rem;white-space:nowrap;
  animation:ticker 40s linear infinite}
@keyframes ticker{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ── HERO ── */
.hero{min-height:100vh;background:linear-gradient(135deg,var(--g900) 0%,var(--g800) 55%,#0a3d14 100%);
  display:flex;align-items:center;justify-content:center;padding:80px 1.5rem 4rem;
  position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 15% 25%,rgba(230,156,0,.07) 0%,transparent 50%),
             radial-gradient(circle at 85% 75%,rgba(58,170,58,.08) 0%,transparent 50%)}
.hero-ring{position:absolute;right:-100px;top:50%;transform:translateY(-50%);
  width:480px;height:480px;border:1.5px solid rgba(230,156,0,.12);border-radius:50%;opacity:.6;pointer-events:none}
.hero-ring::after{content:'';position:absolute;inset:50px;border:1px solid rgba(230,156,0,.07);border-radius:50%}
.hero-content{position:relative;z-index:2;max-width:780px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(230,156,0,.13);
  border:1px solid rgba(230,156,0,.32);color:var(--gold-l);padding:5px 15px;
  border-radius:100px;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:1.5rem}
.hero h1{color:#fff;margin-bottom:.75rem}
.hero h1 span{color:var(--gold)}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.68);max-width:540px;margin:0 auto 2rem}
.hero-stats{display:flex;gap:1.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.25rem;
  align-items:center}
.hero-stat .num{font-size:1.9rem;font-weight:800;color:var(--gold);display:block}
.hero-stat .lbl{font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em}
.hs-div{width:1px;height:40px;background:rgba(255,255,255,.13)}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── SIKLUS PPEPP ── */
.ppepp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.ppepp-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.25rem 1rem;text-align:center;transition:all var(--transition);position:relative}
.ppepp-card:hover{border-color:var(--g400);box-shadow:0 4px 18px rgba(45,138,45,.12);transform:translateY(-3px)}
.ppepp-num{width:42px;height:42px;border-radius:50%;background:var(--g800);color:#fff;
  font-size:1rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto .9rem}
.ppepp-card:nth-child(2) .ppepp-num{background:var(--gold-d)}
.ppepp-card:nth-child(3) .ppepp-num{background:var(--g600)}
.ppepp-card:nth-child(4) .ppepp-num{background:#c88200}
.ppepp-card:nth-child(5) .ppepp-num{background:var(--g800)}
.ppepp-card h3{font-size:.87rem;color:var(--g900);margin-bottom:.4rem}
.ppepp-card p{font-size:.78rem;color:var(--text-2);line-height:1.5}

/* ── DOKUMEN PUBLIK ── */
.dok-pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.dok-pub-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.1rem 1.25rem;display:flex;align-items:flex-start;gap:.9rem;
  transition:all var(--transition);text-decoration:none;color:inherit}
.dok-pub-card:hover{border-color:var(--g400);box-shadow:0 4px 14px rgba(45,138,45,.1)}
.dok-ico{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;flex-shrink:0}
.dok-ico.k{background:var(--g100)}.dok-ico.m{background:var(--gold-bg)}
.dok-ico.s{background:#e8f0fe}.dok-ico.f{background:#fce4ec}
.dok-pub-card h4{font-size:.85rem;font-weight:700;color:var(--g900);margin-bottom:2px}
.dok-pub-card p{font-size:.75rem}
.dok-count-pill{margin-left:auto;align-self:center;background:var(--g100);color:var(--g800);
  font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:100px;white-space:nowrap}

/* ── PRODI CARDS ── */
.prodi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.prodi-card{border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:1.25rem;transition:all var(--transition)}
.prodi-card:hover{border-color:var(--g500);background:var(--g50)}
.prodi-akr{display:inline-block;font-size:.68rem;font-weight:800;
  padding:2px 10px;border-radius:100px;margin-bottom:.65rem}
.akr-b{background:var(--gold-bg);color:var(--gold-d)}
.akr-a{background:var(--g100);color:var(--g800)}
.prodi-card h3{font-size:.88rem;font-weight:700;color:var(--g900);margin-bottom:3px}
.prodi-jenjang{font-size:.77rem;color:var(--text-2)}
.prodi-status{margin-top:.6rem;font-size:.74rem;color:var(--g700);
  display:flex;align-items:center;gap:5px}

/* ── TIMELINE AMI ── */
.timeline{position:relative;max-width:680px;margin:0 auto;padding-left:1.75rem}
.timeline::before{content:'';position:absolute;left:0;top:4px;bottom:4px;
  width:2px;background:rgba(230,156,0,.22)}
.tl-item{position:relative;margin-bottom:1.75rem;padding-left:1.5rem}
.tl-dot{position:absolute;left:-2.15rem;top:4px;width:15px;height:15px;
  border-radius:50%;background:var(--gold);border:3px solid var(--g900);
  box-shadow:0 0 0 2px var(--gold)}
.tl-date{font-size:.7rem;font-weight:800;color:var(--gold-l);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.tl-title{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:3px}
.tl-desc{font-size:.82rem;color:rgba(255,255,255,.58);line-height:1.5}

/* ── PENGUMUMAN ── */
.peng-list{display:flex;flex-direction:column;gap:.85rem;max-width:720px;margin:0 auto}
.peng-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.1rem 1.25rem;display:flex;align-items:flex-start;gap:.9rem;
  transition:all var(--transition);text-decoration:none;color:inherit}
.peng-item:hover{border-color:var(--g400);box-shadow:0 3px 12px rgba(45,138,45,.08)}
.peng-date{min-width:48px;text-align:center;background:var(--g800);color:#fff;
  border-radius:9px;padding:7px 5px;flex-shrink:0}
.peng-date .day{font-size:1.3rem;font-weight:800;line-height:1;display:block}
.peng-date .mon{font-size:.6rem;font-weight:700;text-transform:uppercase;opacity:.75;display:block;margin-top:1px}
.peng-body{flex:1;min-width:0}
.peng-kat{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.kat-ami{color:var(--g700)}.kat-monev{color:var(--gold-d)}.kat-kebijakan{color:var(--red)}
.kat-pelatihan{color:#1565c0}.kat-umum{color:var(--text-3)}
.peng-judul{font-size:.875rem;font-weight:700;color:var(--g900);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peng-ringkas{font-size:.77rem;color:var(--text-2);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.peng-arr{align-self:center;color:var(--text-3);font-size:1.1rem;flex-shrink:0}

/* ── STATISTIK ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:1rem}
.stat-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.25rem;text-align:center;border-top:3px solid var(--g600)}
.stat-box:nth-child(even){border-top-color:var(--gold)}
.stat-num{font-size:2.1rem;font-weight:900;color:var(--g800);line-height:1;display:block}
.stat-lbl{font-size:.75rem;color:var(--text-2);margin-top:5px}
.stat-sub{font-size:.68rem;color:var(--g600);font-weight:700;margin-top:3px}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;background:var(--g900);display:flex;align-items:center;
  justify-content:center;padding:1.5rem;
  background-image:radial-gradient(circle at 20% 30%,rgba(230,156,0,.07) 0%,transparent 50%),
                   radial-gradient(circle at 80% 70%,rgba(58,170,58,.08) 0%,transparent 50%)}
.login-box{background:#fff;border-radius:16px;padding:2.25rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:1.75rem}
.login-logo .badge-logo{width:60px;height:60px;background:var(--g800);border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:900;color:var(--gold);margin-bottom:.75rem}
.login-logo h1{font-size:1.4rem;color:var(--g900);margin-bottom:4px}
.login-logo p{font-size:.8rem;color:var(--text-2)}

/* ── DASHBOARD STATS ── */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:1rem;margin-bottom:1.5rem}
.ds-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.1rem;border-top:3px solid var(--g600)}
.ds-box:nth-child(2){border-top-color:var(--gold)}
.ds-box:nth-child(3){border-top-color:var(--g800)}
.ds-box:nth-child(4){border-top-color:var(--gold-d)}
.ds-num{font-size:1.8rem;font-weight:900;color:var(--g800);line-height:1}
.ds-lbl{font-size:.77rem;color:var(--text-2);margin-top:4px}

/* ── PANELS ── */
.panels{display:grid;grid-template-columns:2fr 1fr;gap:1.1rem}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.panel-head{padding:.9rem 1.1rem;border-bottom:1px solid var(--border-l);
  display:flex;align-items:center;justify-content:space-between}
.panel-head h3{font-size:.85rem;font-weight:800;color:var(--g900)}
.panel-head a{font-size:.75rem;color:var(--g600);font-weight:700;text-decoration:none}
.panel-head a:hover{color:var(--g800)}
.dok-row{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--border-l);transition:background var(--transition)}
.dok-row:hover{background:var(--g50)}
.dok-row:last-child{border-bottom:none}
.ext-badge{display:inline-block;background:var(--bg);color:var(--g800);font-size:.65rem;
  font-weight:900;padding:2px 6px;border-radius:5px;text-transform:uppercase;flex-shrink:0}
.dok-row-info .t{font-size:.82rem;font-weight:700;color:var(--g900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dok-row-info .m{font-size:.7rem;color:var(--text-3);margin-top:1px}
.peng-mini{padding:.75rem 1.1rem;border-bottom:1px solid var(--border-l)}
.peng-mini:last-child{border-bottom:none}
.peng-mini .pk{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--g600)}
.peng-mini .pj{font-size:.82rem;font-weight:700;color:var(--g900);margin-top:2px}
.peng-mini .pd{font-size:.7rem;color:var(--text-3);margin-top:1px}

/* ── DROPZONE ── */
.dropzone{border:2px dashed var(--g200);border-radius:var(--radius-lg);
  padding:2rem 1rem;text-align:center;cursor:pointer;
  transition:all var(--transition);background:var(--g50);position:relative}
.dropzone:hover,.dropzone.drag{border-color:var(--g500);background:var(--g100)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-ico{font-size:2rem;margin-bottom:.4rem}
.dz-txt{font-size:.88rem;font-weight:700;color:var(--g700)}
.dz-sub{font-size:.75rem;color:var(--text-3);margin-top:3px}
.file-preview{display:none;align-items:center;gap:.75rem;background:var(--g50);
  border:1px solid var(--g200);border-radius:var(--radius);padding:.75rem 1rem;margin-top:.75rem}
.file-preview .fn{font-size:.85rem;font-weight:700;color:var(--g800)}
.file-preview .fs{font-size:.72rem;color:var(--text-3)}
.fp-rm{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--red);font-size:1.1rem;line-height:1}

/* ── HIGHLIGHT BOX ── */
.hbox{background:var(--g50);border:1.5px solid var(--g200);border-left:4px solid var(--g600);
  border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.25rem}
.hbox h4{color:var(--g800);font-size:.88rem;margin-bottom:4px}
.hbox p{font-size:.82rem;color:var(--g700)}

/* ── LINK TERKAIT ── */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem}
.link-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:.75rem;text-align:center;
  transition:all var(--transition);text-decoration:none;color:rgba(255,255,255,.7);font-size:.75rem}
.link-card:hover{background:rgba(230,156,0,.12);border-color:rgba(230,156,0,.3);color:var(--gold-l)}

/* ── FOOTER ── */
.pub-footer{background:var(--g900);color:rgba(255,255,255,.65);padding:3rem 1.5rem 1.5rem}
.footer-grid{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.fg-brand h3{color:#fff;font-size:1rem;margin-bottom:.25rem}
.fg-brand .tagline{font-size:.75rem;color:var(--gold-l);font-style:italic;margin-bottom:.75rem}
.fg-brand p{font-size:.78rem;line-height:1.6;margin-bottom:.75rem}
.social-row{display:flex;gap:6px}
.social-btn{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  transition:all var(--transition);text-decoration:none;color:rgba(255,255,255,.6)}
.social-btn:hover{background:var(--gold);color:var(--g900)}
.fg-col h4{color:#fff;font-size:.82rem;font-weight:800;margin-bottom:.75rem;letter-spacing:.02em}
.fg-col ul{list-style:none}
.fg-col li{margin-bottom:.4rem}
.fg-col a{color:rgba(255,255,255,.55);font-size:.78rem;transition:color var(--transition)}
.fg-col a:hover{color:var(--gold-l)}
.footer-bottom{max-width:1100px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);
  padding-top:1.25rem;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.73rem}
.footer-bottom .cr{color:var(--gold-l)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .ppepp-grid{grid-template-columns:repeat(3,1fr)}
  .panels{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-240px);width:240px}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay.show{display:block}
  .main-area{margin-left:0}
  .hamburger{display:flex}
  .pub-nav-links{display:none;flex-direction:column;position:absolute;
    top:62px;left:0;right:0;background:var(--g900);padding:.75rem 0;
    border-top:1px solid rgba(255,255,255,.1)}
  .pub-nav-links.show{display:flex}
  .pub-nav-links a{padding:.65rem 1.25rem;border-radius:0}
  .pn-hamburger{display:block}
  .ppepp-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats .hs-div{display:none}
  .prodi-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .content-area{padding:1rem}
  .topbar{padding:.7rem 1rem}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .ppepp-grid{grid-template-columns:1fr}
  .hero-stats{gap:1rem}
  .hero-btns{flex-direction:column;align-items:center}
  .btn{width:100%;justify-content:center}
  .stat-grid{grid-template-columns:1fr 1fr}
  .dok-pub-grid{grid-template-columns:1fr}
  table{min-width:480px}
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}