/* --- SYSTEM GLOBAL BRANDING FORSGI --- */
:root {
    --primary-green: #159847;
    --dark-green: #0b662d;
    --bright-green: #22c55e;
    --accent-yellow: #ffd700;
    --dark-top: #064e3b;
    --soft-bg: #fdfdfd;
    --gradient-green: linear-gradient(135deg, #0b662d 0%, #22c55e 100%);
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--soft-bg);
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    color: #2d3436;
}

/* --- BACKGROUND KHUSUS INDEX --- */
body.page-index {
    background-color: #0b662d;
    background-image: linear-gradient(rgba(11,102,45,0.85), rgba(11,102,45,0.85)), url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?q=80&w=2000');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section-padding { padding: 80px 0; }
.section-title { color: var(--dark-green); font-weight: 800; margin-bottom: 40px; }
.fw-800 { font-weight: 800; }

header {
    transition: all 0.3s ease-in-out;
    z-index: 1030;
}

.header-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(rgba(11,102,45,0.98), rgba(6,78,59,0.98)),
                url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?q=80&w=2000') !important;
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 4px solid var(--accent-yellow) !important;
}

.header-scrolled .py-3 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: all 0.3s ease;
}

/* --- HERO SECTION --- */
.hero {
    background: linear-gradient(rgba(11, 102, 45, 0.55), rgba(11, 102, 45, 0.55)),
                url('../logo2.jpeg');
    background-size: cover;
    background-position: center;
    background-color: #0b662d;
    color: white;
    padding: 120px 20px;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* --- LOGO HERO --- */
.hero-logo-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.hero-logo-wrapper::before { display: none !important; }

.hero-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.hero-logo:hover { transform: scale(1.02); }

.hero .lead { text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }

/* --- CARDS & GALERI --- */
.custom-card {
    background: white;
    border: none;
    border-radius: 20px;
    padding: 25px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    height: 100%;
}

.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(21, 152, 71, 0.15) !important;
}

.galeri-section { background-color: #f8f9fa; }

.album-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    aspect-ratio: 4/3;
}

.album-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.album-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.album-card:hover .album-img { transform: scale(1.1); }

.badge-success-custom {
    background: var(--primary-green);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
}