:root {
    --pmi-red: #E31E25; /* Warna resmi PMI */
    --pmi-dark: #B3181E;
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --bg-light: #F5F5F7;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --radius: 0.75rem;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
}
  /* Info Card */
        .info-card {
            background: #f7f4f4;
            border: 1px solid #FECACA;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
        }
        .info-card h6 {
            color: var(--pmi-red);
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
        }
        .info-card p {
            font-size: 0.95rem;
            color: #30305d;
            margin: 0;
            line-height: 1.5;
        }
/* PMI Theme Overrides */
.bg-pmi { background-color: var(--pmi-red) !important; }
.text-pmi { color: var(--pmi-red) !important; }
.btn-outline-pmi {
    border-color: var(--pmi-red);
    color: var(--pmi-red);
}
.btn-outline-pmi:hover {
    background-color: var(--pmi-red);
    color: #fff;
}

/* Navbar */
.navbar {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.nav-link {
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.2s;
}
.nav-link:hover, .nav-link.active {
    color: var(--pmi-red);
}

/* Cards & Hover Effects */
.hover-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important;
}

/* Stock Status Badges */
.stock-status {
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 7px;
}
.status-tersedia { background: #E8F5E9; color: #2E7D32; }
.status-terbatas { background: #FFF3E0; color: #E65100; }
.status-kosong   { background: #FCE4EC; color: #C62828; }

/* Filter Buttons */
.filter-btn {
    border-radius: 999px;
    font-size: 0.85rem;
    padding: 0.4em 1em;
    transition: all 0.2s;
}
.filter-btn:hover { background-color: var(--pmi-red); color: #fff; border-color: var(--pmi-red); }
.filter-btn.active-filter { background-color: var(--pmi-red); color: #fff; border-color: var(--pmi-red); }

/* Footer Hover */
.hover-text-white:hover { color: #fff !important; }

/* Utilities */
.text-muted { color: #3e3e89 !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

@media (max-width: 767.98px) {
    .display-5 { font-size: 2rem; }
    .navbar-brand span { font-size: 1.1rem; }
}