/*
 * File: assets/css/style.css
 * Deskripsi: CSS Kustom (Versi dengan Hero Image)
 */

/* 1. Pengaturan Global & Font */
:root {
    --bs-primary: #28a745;
    --bs-dark: #343a40; 
    --bs-teal: #20c997;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6;
}

/* 2. Gaya Navbar */
.navbar-dark {
    background-color: var(--bs-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 3. Hero Section (PENTING: Diperbarui) */
.hero-gradient {
    /* Hapus background gradient dari sini */
    background-color: var(--bs-primary); /* Warna fallback jika gambar tidak ada */
    
    /* Ini mengatur gambar latar belakang (yang akan di-supply oleh PHP) */
    background-size: cover;
    background-position: center center;
    
    color: white;
    padding: 5rem 0;
    margin-bottom: 2.5rem;
    border-radius: 0.5rem;
    position: relative; /* Wajib untuk overlay */
    z-index: 1; /* Konteks tumpukan */
}

/* Ini adalah overlay gradasi semi-transparan */
.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Gradasi overlay (dari warna tema kita) */
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(32, 201, 151, 0.85) 100%);
    
    border-radius: 0.5rem; /* Samakan dengan parent */
    z-index: -1; /* Letakkan di belakang konten, di atas gambar */
}

/* Pastikan konten (teks, tombol) ada di atas overlay */
.hero-gradient > .container {
    position: relative;
    z-index: 2;
}

.hero-gradient h1 {
    font-weight: 700;
    font-size: 3.5rem;
}
.hero-gradient p {
    font-size: 1.25rem;
    opacity: 0.9;
}
.hero-gradient .hero-icon {
    font-size: 7rem;
    opacity: 0.2;
}


/* 4. Feature Icon Section (Navigasi Cepat) */
.feature-icon-box {
    text-align: center;
    padding: 2rem 1.5rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    height: 100%;
}
.feature-icon-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature-icon-box .icon {
    font-size: 3.5rem;
    color: var(--bs-primary);
}
.feature-icon-box h4 {
    margin-top: 1rem;
}

/* 5. Gaya Judul Bagian (Section) */
.section-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 2.5rem;
    position: relative;
    font-size: 2.5rem;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--bs-primary);
    margin: 0.5rem auto 0;
}

/* 6. Penyesuaian Kartu Artikel */
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.card-img-top {
    height: 200px;
    object-fit: cover;
}

/* 7. Bagian Call to Action (CTA) Bawah */
.cta-section {
    background-color: var(--bs-dark);
    color: white;
    padding: 3rem;
    border-radius: 0.5rem;
    text-align: center;
}
.cta-section .btn-outline-light {
    border-width: 2px;
    font-weight: 600;
}

/* 8. Penyesuaian Header Halaman (di halaman lain) */
.page-header {
    background-color: var(--bs-primary);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}