body{
    margin:0;
    font-family:Arial;
    background:#f4f6f8;
}

/* TOPBAR */
.topbar{
    background:#2e7d32;
    color:#fff;
    padding:12px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:35px;
}

.nav a{
    color:#fff;
    text-decoration:none;
    margin-left:10px;
    font-weight:bold;
}

/* CONTAINER */
.container{
    padding:15px;
}

/* GRID KPI */
.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

/* CARD */
.card{
    background:#fff;
    padding:15px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.title{
    font-size:13px;
    color:#777;
}

.value{
    font-size:22px;
    font-weight:bold;
    color:#2e7d32;
}

/* LIST */
.list div{
    padding:6px 0;
    border-bottom:1px solid #eee;
}

/* STATUS */
.badge{
    padding:3px 6px;
    border-radius:5px;
    color:#fff;
    font-size:11px;
}

.darurat{background:#e53935;}
.rujukan{background:#1e88e5;}
.sosial{background:#43a047;}

.small{font-size:11px;color:#777}

/* GRID 2 */
.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

/* RESPONSIVE */
@media(max-width:992px){
    .grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .grid{
        grid-template-columns:1fr;
    }
    .grid-2{
        grid-template-columns:1fr;
    }
}