/* --- 1. SETTING BACKGROUND HERO SECTION --- */
.sunburst-bg {
    /* Hanya panggil gambar aslinya saja di sini */
    background-image: url('Foto-web/Foto-Background/background_mainweb.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Wajib relative agar lapisan overlay dan konten di dalamnya tidak berantakan */
    position: relative; 
    
    /* Memastikan gambar background tidak keluar batas */
    overflow: hidden; 
}

/* Kita buat lapisan overlay gelap terpisah menggunakan pseudo-element ::before */
.sunburst-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Ini gradasi gelapnya. Kamu bisa atur ketebalannya di angka 0.7 atau 0.9 */
    background: linear-gradient(rgba(0, 51, 102, 0.7), rgba(0, 0, 0, 0.9));
    
    /* z-index 0 berarti dia ada di TEPAT DI ATAS gambar background asli */
    z-index: 0; 
}

/* Kita pastikan semua konten teks/judul di dalam Hero Section ada di ATAS overlay gelap */
.sunburst-bg > * {
    position: relative;
    /* z-index 10 berarti dia ada PADA LAPISAN PALING DEPAN */
    z-index: 10; 
}

/* --- 2. EFEK UNTUK GAMBAR "FAITH LIVING" --- */
/* Kita tambahkan efek cahaya (glow) putih tipis di belakang gambar PNG-nya */
/* biar makin "keluar" dari background yang gelap */
img.drop-shadow-xl {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}


/* --- 3. ANIMASI MUNCUL SAAT DI-SCROLL (REVEAL) --- */
/* Ini adalah state awal elemen: menghilang (opacity 0) dan turun sedikit (translateY 50px) */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
}

/* Ini adalah state saat elemen terlihat di layar: muncul penuh (opacity 1) dan kembali ke posisi asli */
/* Class .active ini nanti akan disuntikkan secara otomatis oleh JavaScript */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. SETTING BACKGROUND UNTUK ABOUT SECTION --- */
.about-bg-image {
    /* Panggil gambar ibadah. Pastikan foldernya benar. */
    background-image: url('Foto-web/Foto-Background/background_about.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Wajib relative agar lapisan overlay tetap rapi */
    position: relative; 
    overflow: hidden; 
}

/* Kita buat lapisan overlay gelap terpisah menggunakan pseudo-element ::before */
.about-bg-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Gunakan gradasi hitam-ke-hitam transparan */
    /* Ini akan membuat teks putih 'The Heart Behind' terlihat sangat tajam */
    /* Angka 0.75 adalah tingkat kegelapannya. */
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9));
    
    /* Z-index 0 untuk lapisan gelap tepat di atas foto background */
    z-index: 0; 
}

/* Kita angkat semua konten teks/kartu di dalam section ini ke lapisan paling depan */
.about-bg-image > div {
    position: relative;
    /* Z-index 10 memastikan semua konten di atas overlay gelap */
    z-index: 10; 
}