/* ==========================================
   DESAIN DASAR & HEADER
   ========================================== */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f8fafc; color: #333; line-height: 1.6; }

/* Header dengan Gambar Site Plan & Latar Biru Gelap Transparan */
header { 
    position: relative; 
    /* Trik tumpukan: Warna Biru Transparan di atas, Gambar Site Plan di bawah */
    background: linear-gradient(rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.7)), url('assets/header-siteplan.jpg');
    background-size: cover;
    background-position: center;
    color: white; 
    padding: 80px 20px 60px 20px; 
    text-align: center; 
    border-bottom: 5px solid #10b981; 
}
header h1 { margin: 0 0 10px 0; font-size: 2.2em; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

.main-nav { margin-top: 15px; }
.main-nav a { display: inline-block; padding: 8px 15px; margin: 0 5px; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s; font-size: 0.9em;}
.main-nav a:hover { background: #10b981; border-color: #10b981; }

.lang-switcher { position: absolute; top: 15px; right: 20px; display: flex; gap: 8px; z-index: 10; }
html[dir="rtl"] .lang-switcher { right: auto; left: 20px; }
.lang-btn { display: inline-block; padding: 4px 8px; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 4px; font-size: 0.8em; border: 1px solid rgba(255,255,255,0.4); transition: 0.3s; cursor: pointer; }
.lang-btn:hover, .lang-btn.active { background: #10b981; border-color: #10b981; color: white; }

/* ==========================================
   KARTU (CARD) & GRID LAYOUT
   ========================================== */
.container { width: 90%; max-width: 1000px; margin: 20px auto; overflow: hidden; }
.card { background: white; padding: 30px; margin-bottom: 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-top: 4px solid rgba(15, 23, 42, 0.7); }
h2 { color: rgba(15, 23, 42, 0.9); margin-top: 0; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }

.quote-box { background-color: #ecfdf5; border-left: 5px solid #10b981; padding: 20px; margin-bottom: 20px; border-radius: 0 8px 8px 0; font-style: italic; }
html[dir="rtl"] .quote-box { border-left: none; border-right: 5px solid #10b981; border-radius: 8px 0 0 8px; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.2em; }
.quote-text { color: #065f46; margin: 0 0 10px 0; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
.doc-item { text-align: center; padding: 20px; background: #f1f5f9; border-radius: 8px; border: 1px solid #cbd5e1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

/* ==========================================
   SLIDER GALERI (6 GAMBAR)
   ========================================== */
.slider-wrapper { position: relative; width: 100%; margin: auto; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; height: 400px; object-fit: cover; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15, 23, 42, 0.7); color: white; border: none; padding: 12px 18px; cursor: pointer; border-radius: 50%; font-size: 1.2em; z-index: 5; transition: 0.3s; }
.slider-btn:hover { background: #10b981; }
.prev { left: 10px; }
.next { right: 10px; }
@media (max-width: 600px) { .slide { height: 250px; } }

/* ==========================================
   TABS 6 TAHAP PEMBANGUNAN
   ========================================== */
.tabs { display: flex; overflow-x: auto; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; padding-bottom: 5px; }
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.tab-btn-phase { background: none; border: none; padding: 10px 20px; font-size: 1.05em; font-weight: bold; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s; white-space: nowrap; margin-right: 10px; }
.tab-btn-phase:hover { color: rgba(15, 23, 42, 0.9); }
.tab-btn-phase.active { color: #10b981; border-bottom-color: #10b981; }
.tab-content { display: none; animation: fadeIn 0.5s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
@media (max-width: 768px) { .phase-grid { grid-template-columns: 1fr; } }
.phase-desc { background: #f8fafc; padding: 20px; border-radius: 8px; border-left: 4px solid rgba(15, 23, 42, 0.7); }

/* ==========================================
   FORM DONASI & TABEL MUHSININ
   ========================================== */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: #334155;}
.form-group input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 5px; box-sizing: border-box; font-family: inherit; }
.donation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 15px; }
.don-opt-btn { padding: 10px; text-align: center; background: #f1f5f9; border: 2px solid #cbd5e1; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.don-opt-btn.active { background: #ecfdf5; border-color: #10b981; color: #065f46; }

.donatur-container { max-height: 350px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 5px; margin-top: 15px; background: #fff;}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
th { background-color: #f8fafc; color: rgba(15, 23, 42, 0.9); position: sticky; top: 0; }
tr:hover { background-color: #f1f5f9; }
.nominal-text { font-weight: bold; color: #10b981; }
.progress-bar-bg { background-color: #e2e8f0; border-radius: 5px; width: 100%; height: 24px; margin: 15px 0; overflow: hidden; }

/* Tombol */
.btn-main { display: block; width: 100%; padding: 15px; background: #10b981; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1.1em; text-align: center; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);}
.btn-main:hover { background: #059669; }
.btn-header { display: inline-block; padding: 12px 25px; background: #10b981; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 15px; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.btn-header:hover { background: #059669; }
.btn-outline { background: white; color: rgba(15, 23, 42, 0.9); border: 2px solid rgba(15, 23, 42, 0.9); display: inline-block; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 0.9em; margin-top: 10px;}
.img-responsive { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 100%; object-fit: cover;}
.map-container { width: 100%; height: 350px; margin-top: 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* Footer */
footer { background-color: rgba(15, 23, 42, 0.9); color: white; text-align: center; padding: 30px 20px; margin-top: 40px; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1000px; margin: 0 auto 20px auto; text-align: left; }
html[dir="rtl"] .footer-content { text-align: right; }
.footer-box { flex: 1; min-width: 250px; margin: 10px; }
.footer-box h3 { border-bottom: 2px solid #10b981; padding-bottom: 5px; display: inline-block; }
.footer-link { color: #34d399; text-decoration: none; font-weight: bold; }
.footer-link:hover { color: #10b981; text-decoration: underline; }
/* ======================================================= */
/* TAMPILAN KHUSUS HP (MOBILE RESPONSIVE - MAX WIDTH 768px)*/
/* ======================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Merapikan Footer agar bersusun ke bawah */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        text-align: center; /* Teks otomatis ke tengah biar manis di HP */
        gap: 25px;
        padding: 0 15px;
    }

    .footer-box {
        width: 100% !important;
        margin-bottom: 10px;
    }

    /* 2. Merapikan Grid / Kolom Berjejer (Form Donasi, dll) */
    .grid-2, .grid-3, .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        width: 100%;
    }

    /* 3. Tombol dan Link Footer dibikin Full Lebar Layar */
    .btn-main, .btn-outline, .footer-link {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        margin-top: 5px;
        padding: 12px 15px; /* Biar gampang dipencet jari */
    }

    /* 4. Menyesuaikan Ukuran Font & Padding Utama */
    body {
        font-size: 14px; /* Huruf sedikit dikecilkan biar gak sempit */
    }
    
    h1, h2, h3 {
        line-height: 1.3;
    }

    .container, .wrapper {
        padding: 10px 15px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 5. Gambar agar tidak keluar jalur layar */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}