:root{
  --soft:#f6f8fb;
  --card:#ffffff;
}

/* Tambahan variabel teks gelap */
:root{
  --ink:#0f172a; /* warna teks utama yg gelap */
}

/* Pastikan kartu selalu pakai teks gelap meski diletakkan di dalam .hero */
.card-soft{
  color: var(--ink);
}

/* Angka KPI ditonjolkan dan tidak mewarisi putih dari .hero */
.card-soft .num{
  color: var(--ink);
  font-weight: 800;
}

/* Subteks pada kartu: abu-abu netral, bukan putih */
.card-soft .text-secondary{
  color:#64748b !important;
}

/* Dot KPI tetap berwarna */
.kpi-pri{ background: var(--c-pri); }
.kpi-ok{ background: #22c55e; }
.kpi-risk{ background: #ef4444; }

/* Opsional: tema gelap (agar tetap terbaca) */
[data-bs-theme="dark"] .card-soft{
  background:#0b1220;
  color:#e5e7eb;
}
[data-bs-theme="dark"] .card-soft .text-secondary{ color:#94a3b8 !important; }
[data-bs-theme="dark"] .card-soft .num{ color:#f8fafc; }


body{ background: var(--soft); }

/* Navbar blur & brand */
.nav-blur{
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.brand-dot{
  width:14px;height:14px;border-radius:50%;
  background: linear-gradient(135deg,var(--c-pri),var(--c-acc));
  display:inline-block;
}
.brand-accent{ color: var(--c-acc); }

/* Hero */
.hero{
  background: linear-gradient(135deg,var(--c-deep),var(--c-pri));
  color:#fff;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.hero .btn{ box-shadow:0 10px 25px rgba(0,0,0,.15); }

/* Cards */
.card-soft{
  border: none;
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.stat{ display:flex; align-items:center; gap:.9rem; }
.stat .num{ color: #1C352D; font-size:clamp(1.6rem,4vw,2.1rem); font-weight:800; letter-spacing:-.5px; }

.kpi-dot{ width:12px;height:12px;border-radius:50%; }
.kpi-pri{ background: var(--c-pri); }
.kpi-ok{ background: #22c55e; }
.kpi-risk{ background: #ef4444; }

/* Table accents */
.table-hover>tbody>tr:hover{ background: rgba(51,161,224,.07); }
.table-light{ background: #eaf6ff; }

/* Footer text */
.footer{ color:#6b7280; }

/* Highlight chip */
.hl-chip{
  background: var(--c-hl);
  color:#1f2937;
  border-radius: 999px;
  padding:.2rem .6rem;
  font-weight:600;
  line-height: 1.65;
  
}

/* Dark toggle pointer */
.dark-toggle{ cursor:pointer; }

/* Navbar: jarak ikon & ukuran sentuh */
.navbar .nav-link i { margin-right: .5rem; }
.dropdown-menu .dropdown-item i { width: 1.1rem; }

.navbar,
.navbar .dropdown-menu {
  z-index: 2000 !important;
}

/* Tinggi area link saat di mobile agar nyaman disentuh */
@media (max-width: 991.98px) {
  .navbar .nav-link,
  .dropdown-menu .dropdown-item { padding-top: .65rem; padding-bottom: .65rem; }
}

/* Opsional: kecilkan khusus NAVBAR + HERO di desktop (90%) */
@media (min-width: 992px) {
  .navbar.zoom-90, .hero.zoom-90 { zoom: .9; }
  @supports not (zoom:1) {
    .navbar.zoom-90, .hero.zoom-90 {
      transform: scale(.9);
      transform-origin: top left;
      width: 111.111%;
    }
  }
}