:root{
  /* === NPP CORPORATE COLORS === */
  --primary:#0B3C5D;     /* Biru tua logo */
  --secondary:#2FA4B6;   /* Teal logo */
  --accent:#6BC7D6;

  --bg:#F4F9FB;
  --surface:#FFFFFF;
  --border:#D6E6EC;

  --text:#1F2D3D;
  --muted:#6B7C93;

  --shadow:0 10px 30px rgba(11,60,93,.10);
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ===== LAYOUT ===== */
.container{max-width:1200px;margin:auto;padding:0 18px}
.page{padding-top:90px;padding-bottom:70px}

/* ===== CARD ===== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===== BUTTON ===== */
.btn{
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--secondary);color:#fff}

/* ===== TABLE ===== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.table thead{
  background:var(--primary);
  color:#fff;
}
.table th,.table td{
  padding:12px 14px;
  font-size:14px;
}
.table tbody tr:hover{
  background:#EEF7FA;
}
/* ===== MODERN ENHANCEMENT ===== */
.glass{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
}

.soft-shadow{
  box-shadow:0 20px 45px rgba(11,60,93,.12);
}

.section-title{
  font-size:34px;
  letter-spacing:-.5px;
}

.subtext{
  color:var(--muted);
  max-width:620px;
}

.icon-box{
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  display:grid;place-items:center;
  color:#fff;
  font-weight:900;
}