@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{font-family:"Poppins",Arial;background:#f4f4f4;margin:0}
.container{max-width:1100px;margin:20px auto;background:#fff;padding:20px;border-radius:8px}

.cards{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:15px;
    margin-bottom:20px;
}

.card{
    padding:18px;
    border-radius:10px;
    color:white;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
}

.bg-pink{background:#ff1493;}
.bg-green{background:#28a745;}
.bg-red{background:#dc3545;}

.panel{
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
    margin-bottom:20px;
}


/* ========================
   NAVBAR STYLE
   ======================== */
nav {
    background-color: #ffb7f0;   /* biru profesional */
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

nav a {
    color: deeppink;
    text-decoration: none;
    margin-right: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

nav a:hover {
    color: #27f; /* warna hover emas */
    text-decoration: underline;
}

nav a.active {
    font-weight: bold;
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 0 20px 0;
}

table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{border:1px solid #ddd;padding:8px}
th{background:#b270ee;color:#fff}
.btn{padding:6px 10px;border:0;border-radius:4px;cursor:pointer}
.btn-primary{background:#007bff;color:white}
.btn-danger{background:#dc3545;color:white}
.btn-cetak{background:#17a2b8;}
input,select{padding:6px;width:100%;margin:5px 0}

/* --- GRAFIK BATANG SEDERHANA (TANPA LIBRARY) --- */
.chart{
    display:flex;
    align-items:flex-end;
    gap:10px;
    height:220px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

.bar{
    flex:1;
    background:#ff1493;
    border-radius:6px 6px 0 0;
    text-align:center;
    color:white;
    font-size:12px;
}

.bar-label{
    text-align:center;
    font-size:12px;
}