@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

        :root {
            --primary-green: #198754;
            --dark-green: #0d5132;
            --accent-gold: #ffc107;
            --soft-bg: #f8fafc;
        }

        /* --- FADE IN DYNAMICE CSS --- */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #334155;
            background-color: #fff;
            font-size: 0.95rem;
        }
        

.ketua-photo{
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.program-card{
    background:#fff;
    border-radius:24px;
    padding:35px;
    text-align:center;
    height:100%;
    transition:.3s;
    border:1px solid #e5e7eb;
}

.program-card:hover{
    transform:translateY(-10px);
}

.program-card i{
    font-size:3rem;
    color:#198754;
    margin-bottom:20px;
}

.pengurus-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.pengurus-card img{
    width:100%;
    height:300px;
    object-fit:cover;
}


.agenda-item{
    background:#fff;
    border-radius:20px;
    padding:20px;
    display:flex;
    gap:20px;
    align-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.agenda-date{
    width:80px;
    height:80px;
    background:#198754;
    color:#fff;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.agenda-date span{
    font-size:2rem;
    font-weight:800;
}

        /* ======================================
        NEWS CARD 2 KOLOM
        ====================================== */

        .news-card{
            display:flex;
            align-items:stretch;
            background:#fff;
            border-radius:20px;
            overflow:hidden;
            height:100%;

            border:1px solid #e5e7eb;

            transition:.3s ease;
        }

        .news-card:hover{
            transform:translateY(-5px);
            box-shadow:0 15px 35px rgba(0,0,0,.08);
        }

        .news-image{
            width:180px;
            min-width:180px;
            overflow:hidden;
        }

        .news-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:.5s;
        }

        .news-card:hover img{
            transform:scale(1.08);
        }

        .news-content{
            padding:20px;
            display:flex;
            flex-direction:column;
            flex:1;
        }

        .news-title{
            font-size:1rem;
            font-weight:800;
            line-height:1.5;
            color:#0f172a;
            margin-bottom:10px;

            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }

        .news-excerpt{
            color:#64748b;
            font-size:.9rem;
            line-height:1.7;

            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }

        .news-link{
            text-decoration:none;
            color:#198754;
            font-weight:700;
        }

        .news-link:hover{
            color:#146c43;
        }

        .date-badge{
            display:inline-flex;
            align-items:center;

            background:#dcfce7;
            color:#166534;

            padding:5px 12px;

            border-radius:999px;

            font-size:.75rem;
            font-weight:700;

            width:fit-content;
        }

    /* Tablet */

    @media(max-width:991px){

        .news-image{
            width:150px;
            min-width:150px;
        }

    }

    .news-title-link{
        text-decoration:none;
    }

    .news-title{
        color:#0f172a;
        font-weight:800;
        line-height:1.5;
        transition:.3s ease;
    }

    .news-title-link:hover .news-title{
        color:#198754;
    }

    .news-title-link:hover{
        text-decoration:none;
    }

    /* Mobile */

    @media(max-width:768px){

        .news-card{
            flex-direction:column;
        }

        .news-image{
            width:100%;
            min-width:100%;
            height:220px;
        }

    }

        /* --- HERO SECTION --- */
        .hero-section {
            min-height: 100vh !important;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background-color: #000; /* Fallback warna hitam */
        }

        /* Overlay agar teks tetap terbaca */
        .hero-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(13, 81, 50, 0.4)); 
            z-index: 2;
        }

        /* Mengatur gambar slide */
        .carousel-item {
            height: 100vh;
        }

        .carousel-item img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        .hero-section .container { 
            position: relative; 
            z-index: 3; /* Pastikan teks di atas overlay dan gambar */
        }

        .hero-title {
            font-weight: 900;
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.1;
            color: white;
        }

        .text-highlight { color: var(--accent-gold) !important; }

        /* --- SECTION STYLING --- */
        .section-title {
            font-weight: 800;
            font-size: 1.75rem;
            color: #0f172a;
            margin-bottom: 0.75rem;
        }

        .section-desc {
            font-size: 0.95rem;
            color: #64748b;
            margin: 0 auto;
            max-width: none !important; 
            text-align: center; 
        }

        .py-section { padding: 80px 0; }

        /* --- ABOUT/MISI CARD (MODERN & CENTERED) --- */
        .about-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 100%;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center; /* Rata tengah secara horizontal */
            text-align: center;   /* Rata tengah untuk teks */
        }

        .about-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 22px 45px rgba(0, 0, 0, 0.08);
            border-color: rgba(25, 135, 84, 0.2);
        }

        .icon-box {
            width: 70px;
            height: 70px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1.75rem;
            transition: all 0.3s ease;
            margin-left: auto;
            margin-right: auto;
        }

        /* Warna variasi ikon */
        .bg-soft-primary { background-color: #eef2ff; color: #4f46e5; }
        .bg-soft-danger { background-color: #fff1f2; color: #e11d48; }
        .bg-soft-warning { background-color: #fffbeb; color: #d97706; }

        .about-card h5 {
            color: #1e293b;
            font-weight: 700 !important;
            margin-bottom: 1rem;
            letter-spacing: -0.5px;
        }

        .about-card p {
            color: #64748b;
            line-height: 1.7;
            font-size: 0.95rem;
            margin-bottom: 0;
        }

        /* --- KEGIATAN CARD --- */
        .kegiatan-card {
            background: white;
            border-radius: 18px;
            border: 1px solid #f1f5f9;
            transition: 0.3s;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .kegiatan-card:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transform: translateY(-5px);
        }

        .kegiatan-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }

        .date-badge {
            background: #f0fdf4;
            color: var(--primary-green);
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 15px;
            display: inline-block;
        }

        .btn-pill {
            padding: 10px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .bg-soft { background-color: var(--soft-bg); }