/*
Theme Name: Gawah Bunut Baok Theme
Theme URI: https://gawahbunutbaok.id/
Description: Tema kustom ekosistem digital Gawah Bunut Baok (Portal Publik & Manajemen Internal).
Author: Amrillah
Version: 1.0
*/

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

/* =========================================================================
   1. DASAR & LAYOUT UTAMA
   ========================================================================= */
body { 
    font-family: 'Open Sans', sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    padding: 0; 
    background-color: #F8F9FA; 
    color: #333; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: #2E7D32; 
    font-weight: 700;
}

.container { 
    max-width: 1200px; 
    margin: auto; 
    overflow: hidden; 
    padding: 0 20px; 
}

/* =========================================================================
   2. HEADER & NAVIGASI
   ========================================================================= */
#header { 
    background: #FFFFFF; 
    color: #2E7D32; 
    padding: 1.5rem 0; 
    border-bottom: 5px solid #D4AF37; 
}

#header .container { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

#header .logo-area img { 
    max-height: 80px; 
    width: auto; 
}

#main-nav { 
    background: #2E7D32; 
}

#main-nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
}

#main-nav ul li a { 
    color: #FFFFFF; 
    padding: 15px 20px; 
    display: block; 
    text-decoration: none; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

#main-nav ul li a:hover { 
    background: #1B5E20; 
    color: #D4AF37;
}

.btn-portal {
    background-color: #D4AF37;
    color: #FFFFFF !important;
    border-radius: 4px;
    margin-left: auto;
    padding: 10px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    font-family: 'Montserrat', sans-serif;
}
.btn-portal:hover {
    background-color: #B8860B;
}

/* =========================================================================
   3. HERO SECTION (Sambutan Utama Beranda)
   ========================================================================= */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://gawahbunutbaok.id/wp-content/uploads/2026/09/WhatsApp-Image-2026-09-19-at-01.14.44.jpeg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 120px 20px;
    text-align: left;
    border-bottom: 5px solid #D4AF37;
}

.hero-section h1 { color: #fff; font-size: 3.5em; margin-bottom: 10px; }
.hero-section p { font-size: 1.2em; margin-bottom: 20px; line-height: 1.4; color: #fff; }

.btn-primary { 
    background-color: #D4AF37; color: #fff !important; padding: 12px 25px; 
    text-decoration: none; border-radius: 5px; font-weight: bold; 
    display: inline-block; font-family: 'Montserrat', sans-serif;
}
.btn-primary:hover { background-color: #B8860B; }

/* =========================================================================
   4. GRID 7 PILAR PENGGERAK
   ========================================================================= */
.section-title { text-align: center; color: #2E7D32; margin-top: 60px; margin-bottom: 30px; font-size: 2em; }
.pilar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 20px 0; }
.pilar-card { 
    background: #fff; padding: 25px 20px; border-radius: 8px; text-align: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 4px solid #2E7D32; transition: 0.3s;
}
.pilar-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.pilar-card h3 { color: #2E7D32; font-size: 1.2em; margin-bottom: 10px; }
.pilar-card p { font-size: 0.9em; color: #666; margin: 0; }

/* =========================================================================
   5. MATRIKS DAMPAK
   ========================================================================= */
.matriks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px 0; }
.matriks-card { 
    display: flex; align-items: center; justify-content: center; flex-direction: column; 
    background: #fff; padding: 30px 20px; border-radius: 8px; 
    border-bottom: 4px solid #D4AF37; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center;
}
.matriks-angka { font-size: 2.5em; font-weight: bold; color: #2E7D32; font-family: 'Montserrat', sans-serif; line-height: 1; }
.matriks-label { font-size: 0.9em; color: #555; font-weight: 600; text-transform: uppercase; margin-top: 10px; }

/* =========================================================================
   6. TATA LETAK RESPONSIF (UNTUK HP)
   ========================================================================= */
@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.2em; }
    #header .container { flex-direction: column; text-align: center; gap: 15px; }
    .header-right { width: 100%; }
    .btn-portal { display: block; width: 100%; box-sizing: border-box; }
}

/* =========================================================================
   7. BERITA & PAGINASI
   ========================================================================= */
.berita-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.berita-card h2 a:hover { color: #D4AF37 !important; }

.pagination .nav-links { display: inline-flex; gap: 10px; justify-content: center; }
.pagination a, .pagination span { 
    padding: 10px 15px; background: #fff; border: 1px solid #ddd; 
    color: #2E7D32; text-decoration: none; border-radius: 4px; font-weight: bold; 
}
.pagination .current { background: #2E7D32; color: #fff; border-color: #2E7D32; }
.pagination a:hover { background: #D4AF37; color: #fff; border-color: #D4AF37; }