:root{
    --bs-primary: #1E3A8A;   /* Biru logo */
    --bs-success: #2E7D32;  /* Hijau daun */
    --sidebar: #1E293B;
    --bg: #F8FAFC;
    --text: #0F172A;
    --muted: #64748B;
}

/* GLOBAL */
body{
    background-color: var(--bg);
    color: var(--text);
}

/* NAVBAR */
.navbar{
    background-color: var(--bs-primary) !important;
}

/* SIDEBAR */
.sidebar{
    position: sticky;
    top: 76px; /* Height of navbar + some padding */
    min-height: calc(100vh - 76px);
    background-color: var(--sidebar);
}

.sidebar .nav-link{
    color:#CBD5E1;
    border-radius:8px;
    padding:10px 14px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active{
    background-color:#334155;
    color:#fff;
}

/* CARD */
.card{
    border:none;
    border-radius:14px;
}

.card h2{
    color: var(--bs-primary);
}

/* BUTTON */
.btn-primary{
    background-color: var(--bs-primary);
    border: none;
}

.btn-primary:hover{
    background-color:#1E40AF;
}

.btn-success{
    background-color: var(--bs-success);
    border:none;
}

/* FOOTER */
footer{
    background:#0F172A;
    color:#CBD5E1;
}
/* WARNA UTAMA */
:root{
    --primary:#1E40AF;
    --bg:#F8FAFC;
}

/* NAVBAR */
.navbar{
    background-color:var(--primary);
}

/* HERO */
.hero-section{
    background-color:#1E6FFF;
    color:white;
    padding:80px 0;
    overflow:hidden;
}

.hero-title{
    font-size:2.6rem;
    line-height:1.2;
}

.hero-logo-box{
    background:white;
    padding:30px;
    border-radius:20px;
    display:inline-block;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.hero-logo{
    max-height:320px;
}

/* UKM CARD */
.ukm-card{
    border:none;
    border-radius:16px;
    transition:.3s;
}

.ukm-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.12);
}

/* RESPONSIVE HP */
@media (max-width:768px){
    .hero-section{
        padding:50px 0;
        text-align:center;
    }

    .hero-title{
        font-size:1.9rem;
    }

    .hero-logo{
        max-height:220px;
    }
}