/* ===================== RESET & BASE ===================== */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Roboto",sans-serif; }
body { background:#f0f2f5; display:flex; flex-direction:column; min-height:100vh; }

/* ===================== TOP HEADER ===================== */
.top-header { background:white; padding:10px 8%; display:flex; justify-content:space-between; align-items:center; }
.logo-text h2 { font-family:"Oswald",sans-serif; color:#002347; line-height:1.2; font-size:22px; }
.logo-text p  { font-size:12px; color:#666; letter-spacing:1px; }

/* ===================== NAVBAR ===================== */
nav { background:#002347; padding:0 8%; display:flex; justify-content:center; position:sticky; top:0; z-index:1000; }
.nav-links { list-style:none; display:flex; align-items:center; }
.nav-links > li { position:relative; }
.nav-links > li > a { color:white; text-decoration:none; padding:15px 20px; display:block; font-size:13px; font-weight:bold; letter-spacing:1px; transition:color 0.3s; }
.nav-links > li > a:hover { color:#c5a059; }
.active-link { background:#c5a059; color:white !important; }

/* ===================== DROPDOWN ===================== */
.nav-links > li .dropdown-menu { display:none; position:absolute; top:100%; left:0; background:#001a33; min-width:200px; z-index:1000; border-top:2px solid #c5a059; list-style:none; }
.nav-links > li:hover .dropdown-menu { display:block; }
.dropdown-menu li a { color:#ccc; padding:12px 15px; display:block; text-decoration:none; font-size:12px; border-bottom:1px solid rgba(255,255,255,0.05); transition:0.3s; }
.dropdown-menu li a:hover { background:#002347; color:white; padding-left:20px; }

/* ===================== HERO ===================== */
.hero { position:relative; height:550px; background-size:cover; background-position:center; background-repeat:no-repeat; display:flex; flex-direction:column; justify-content:center; padding-left:8%; color:white; }
.hero h1 { font-family:"Oswald",sans-serif; font-size:50px; line-height:1.1; text-transform:uppercase; }
.hero h3 { font-family:"Oswald",sans-serif; font-size:35px; margin-top:80px; }
.hero p.sub-text { font-size:14px; opacity:0.8; margin-top:5px; }

/* ===================== WIDGETS HOME ===================== */
.widgets-container { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; padding:0 8%; margin-top:-80px; position:relative; z-index:10; margin-bottom:40px; }
.widget-card { background:rgba(0,35,71,0.92); color:white; padding:20px; border-top:4px solid #c5a059; border-radius:4px; }
.widget-white { background:white; color:#333; }
.widget-card h4 { font-family:"Oswald",sans-serif; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:10px; margin-bottom:15px; letter-spacing:1px; }
.sholat-table { width:100%; border-collapse:collapse; text-align:center; }
.sholat-table th { font-size:11px; color:#aaa; font-weight:normal; padding-bottom:10px; }
.sholat-table td { font-size:16px; font-weight:bold; color:#c5a059; }

/* ===================== INNER PAGES ===================== */
.banner { width:100%; height:400px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:white; }
.banner h1 { font-family:"Oswald",sans-serif; font-size:3.5rem; text-shadow:2px 2px 10px rgba(0,0,0,0.5); text-transform:uppercase; }
.container { max-width:1000px; margin:-50px auto 50px; background:white; padding:50px; border-radius:15px; box-shadow:0 15px 35px rgba(0,0,0,0.1); position:relative; color:#333; }
.content-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; margin-top:20px; }
.text-box h2 { font-family:"Oswald",sans-serif; color:#002347; margin-bottom:20px; font-size:30px; border-left:6px solid #c5a059; padding-left:18px; }
.text-box p { line-height:1.9; margin-bottom:20px; text-align:justify; font-size:16px; color:#444; }
.feature-img { width:100%; border-radius:10px; margin-bottom:25px; border-bottom:5px solid #c5a059; }

/* ===================== GALERI ===================== */
.gallery-container { max-width:1100px; margin:0 auto 50px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; padding:0 20px; }
.gallery-item { position:relative; overflow:hidden; border-radius:10px; height:250px; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover img { transform:scale(1.1); }
.overlay-gallery { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,35,71,0.8)); color:white; padding:20px; opacity:0; transition:opacity 0.3s; }
.gallery-item:hover .overlay-gallery { opacity:1; }

/* ===================== MAP ===================== */
.map-wrapper { width:100%; height:450px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); border:1px solid #ccc; margin-bottom:30px; }
.map-wrapper iframe { width:100%; height:100%; border:0; }

/* ===================== DONASI ===================== */
.donasi-box { text-align:center; background:#f7f9fb; border-radius:12px; padding:40px; border:1px dashed #c5a059; margin-top:30px; }
.donasi-box h3 { font-family:"Oswald",sans-serif; color:#002347; margin-bottom:15px; }
.btn-kirim { background:#002347; color:white; border:none; padding:12px 30px; font-size:14px; font-weight:bold; border-radius:25px; cursor:pointer; transition:background 0.3s; text-decoration:none; display:inline-block; margin-top:20px; }
.btn-kirim:hover { background:#c5a059; }

/* ===================== LOGIN ===================== */
.login-card { background:white; padding:40px; border-radius:15px; width:100%; max-width:400px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.15); margin:80px auto; }
.login-card h2 { font-family:"Oswald",sans-serif; color:#002347; margin-bottom:30px; letter-spacing:1px; }
.input-group { margin-bottom:20px; text-align:left; }
.input-group label { display:block; font-size:14px; margin-bottom:8px; color:#666; font-weight:bold; }
.input-group input { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; outline:none; transition:border-color 0.3s,box-shadow 0.3s; }
.input-group input:focus { border-color:#c5a059; box-shadow:0 0 5px rgba(197,160,89,0.3); }
.alert-error { background:rgba(198,40,40,0.08); border:1px solid #c62828; color:#c62828; padding:10px 15px; border-radius:5px; margin-bottom:15px; font-size:13px; font-weight:bold; }

/* ===================== SUCCESS CARD ===================== */
.success-card { background:white; padding:50px 40px; border-radius:20px; box-shadow:0 15px 35px rgba(0,0,0,0.1); text-align:center; max-width:500px; width:100%; margin:80px auto; }
.success-icon { width:80px; height:80px; background:#4caf50; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:40px; margin:0 auto 25px; box-shadow:0 10px 20px rgba(76,175,80,0.3); }

/* ===================== DASHBOARD ===================== */
.dashboard-container { display:flex; min-height:80vh; background:#f4f7f6; margin-top:10px; color:#333; }
.sidebar { width:260px; background:#002347; color:white; padding:30px 20px; display:flex; flex-direction:column; flex-shrink:0; }
.sidebar h2 { font-family:"Oswald",sans-serif; color:#c5a059; margin-bottom:30px; font-size:1.4rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:10px; }
.sidebar ul { list-style:none; flex-grow:1; }
.sidebar ul li { padding:12px 15px; margin-bottom:6px; border-radius:5px; cursor:pointer; transition:background 0.3s; font-size:14px; }
.sidebar ul li a { color:inherit; text-decoration:none; display:block; }
.sidebar ul li:hover, .sidebar ul li.active { background:#c5a059; }
.logout-btn-dash { background:#e53935; color:white; border:none; padding:10px 15px; border-radius:5px; cursor:pointer; font-weight:bold; text-decoration:none; text-align:center; display:block; transition:background 0.3s; }
.logout-btn-dash:hover { background:#b71c1c; }
.notif-badge { background:#e53935; color:white; font-size:10px; font-weight:bold; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:middle; display:inline-block; line-height:1.6; }
.main-content { flex:1; padding:40px; overflow-y:auto; }
.card-dash { background:white; padding:30px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.05); margin-bottom:20px; }

/* ===================== STAT CARDS ===================== */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:white; border-radius:10px; padding:20px; box-shadow:0 3px 12px rgba(0,0,0,0.06); border-top:4px solid; text-align:center; }
.stat-card .stat-val { font-family:'Oswald',sans-serif; font-size:28px; font-weight:bold; line-height:1; margin-bottom:6px; }
.stat-card .stat-lbl { font-size:12px; color:#888; letter-spacing:0.5px; }

/* ===================== TABLE ===================== */
table { width:100%; border-collapse:collapse; margin-top:20px; }
th, td { padding:12px 15px; text-align:left; border-bottom:1px solid #eee; }
th { background-color:#002347; color:white; font-family:"Oswald",sans-serif; font-weight:normal; letter-spacing:0.5px; }
tbody tr:hover { background:#f9f9f9; }
.status-masuk  { color:#2e7d32; font-weight:bold; }
.status-keluar { color:#c62828; font-weight:bold; }

/* ===================== BUTTONS ===================== */
.btn-tambah { background:#2e7d32; color:white; border:none; padding:10px 20px; border-radius:5px; cursor:pointer; font-weight:bold; font-size:14px; margin-bottom:20px; display:inline-block; transition:background 0.3s; }
.btn-tambah:hover { background:#1b5e20; }
.btn-hapus { background:#c62828; color:white; border:none; padding:5px 12px; border-radius:3px; cursor:pointer; font-size:12px; text-decoration:none; transition:background 0.3s; }
.btn-hapus:hover { background:#7f0000; }
.btn-terima { background:#2e7d32; color:white; border:none; padding:5px 12px; border-radius:4px; font-size:12px; cursor:pointer; text-decoration:none; font-weight:bold; transition:background 0.2s; }
.btn-terima:hover { background:#1b5e20; }
.btn-tolak { background:#e65100; color:white; border:none; padding:5px 12px; border-radius:4px; font-size:12px; cursor:pointer; text-decoration:none; font-weight:bold; transition:background 0.2s; margin-left:4px; }
.btn-tolak:hover { background:#bf360c; }

/* ===================== STATUS PILL ===================== */
.status-pill { padding:3px 12px; border-radius:20px; font-size:12px; font-weight:bold; display:inline-block; }
.pill-pending  { background:#fff3e0; color:#e65100; }
.pill-diterima { background:#e8f5e9; color:#2e7d32; }
.pill-ditolak  { background:#fce4e4; color:#c62828; }

/* ===================== MODAL ===================== */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:2000; }
.modal-content { background:white; padding:30px; border-radius:10px; width:100%; max-width:500px; box-shadow:0 10px 25px rgba(0,0,0,0.2); color:#333; }
.modal-content h3 { font-family:"Oswald",sans-serif; color:#002347; margin-bottom:20px; font-size:1.4rem; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; font-size:13px; margin-bottom:5px; color:#555; font-weight:bold; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:5px; outline:none; font-size:14px; transition:border-color 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#c5a059; }
.form-buttons { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.btn-batal { padding:10px 20px; border-radius:5px; border:1px solid #ccc; cursor:pointer; background:white; color:#555; font-size:14px; transition:background 0.3s; }
.btn-batal:hover { background:#f0f0f0; }
.btn-simpan { padding:10px 20px; border-radius:5px; border:none; cursor:pointer; background:#002347; color:white; font-size:14px; font-weight:bold; transition:background 0.3s; }
.btn-simpan:hover { background:#c5a059; }

/* ===================== FOOTER ===================== */
footer { background:#001a33; color:#ccc; padding:60px 8% 30px; margin-top:auto; display:grid; grid-template-columns:1fr 1fr 1fr 1.5fr; gap:40px; border-top:5px solid #c5a059; }
footer h4 { color:white; font-family:"Oswald",sans-serif; letter-spacing:1px; margin-bottom:15px; }
footer p { font-size:14px; line-height:1.8; }
.footer-maps iframe { width:100%; height:150px; border:none; border-radius:5px; filter:grayscale(1) invert(1) opacity(0.7); }
.social-icons { display:flex; gap:12px; margin-top:15px; }
.social-icons a { color:white; background:#c5a059; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; font-size:14px; transition:background 0.3s; }
.social-icons a:hover { background:#002347; }
.footer-bottom { background:#001122; color:#555; text-align:center; padding:15px; font-size:11px; }


/* ===================== RESPONSIVE MOBILE ===================== */
@media (max-width: 768px) {

    /* Header */
    .top-header { padding: 10px 4%; }
    .logo-text h2 { font-size: 16px; }

    /* Navbar */
    nav { padding: 0; overflow-x: auto; }
    .nav-links { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-links > li > a { padding: 12px 14px; font-size: 11px; white-space: nowrap; }
    .nav-links > li .dropdown-menu { position: fixed; top: auto; min-width: 160px; }

    /* Hero */
    .hero { height: 380px; padding-left: 5%; }
    .hero h1 { font-size: 28px; }
    .hero h3 { font-size: 20px; margin-top: 40px; }

    /* Widgets home */
    .widgets-container { grid-template-columns: 1fr; margin-top: 20px; padding: 0 4%; gap: 12px; }

    /* Banner halaman dalam */
    .banner { height: 220px; }
    .banner h1 { font-size: 2rem; }

    /* Container */
    .container { padding: 24px 16px; margin: -20px 10px 30px; }
    .content-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Galeri */
    .gallery-container { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding: 0 10px; }
    .gallery-item { height: 180px; }

    /* Footer */
    footer { grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px 5% 20px; }
    .footer-maps { grid-column: 1 / -1; }

    /* Dashboard */
    .dashboard-container { flex-direction: column; }
    .sidebar { width: 100%; padding: 15px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-height: auto; }
    .sidebar > div:first-child { display: none; } /* sembunyikan profil di mobile */
    .sidebar ul { display: flex; flex-wrap: wrap; gap: 4px; flex-grow: 0; }
    .sidebar ul li { margin-bottom: 0; padding: 8px 10px; font-size: 11px; border-radius: 4px; }
    .sidebar ul li a { white-space: nowrap; }
    .sidebar > div[style*="Samudera"] { display: none; }
    .logout-btn-dash { padding: 8px 14px; font-size: 12px; white-space: nowrap; margin-top: 0; }
    .main-content { padding: 16px; }

    /* Stat grid dashboard */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card .stat-val { font-size: 16px; }

    /* Tables */
    table { font-size: 12px; }
    th, td { padding: 8px 10px; }

    /* Ziswaf */
    .container[style*="1050px"] { max-width: 100% !important; }

    /* Cards dalam ziswaf */
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Modal */
    .modal-content { margin: 10px; width: calc(100% - 20px); max-width: none; max-height: 90vh; overflow-y: auto; }

    /* Login */
    .login-card { margin: 30px 16px; }

    /* Success card */
    .success-card { margin: 30px 16px; padding: 30px 20px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 22px; }
    .hero h3 { font-size: 16px; }
    .banner h1 { font-size: 1.5rem; }
    footer { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .sidebar ul li { font-size: 10px; padding: 6px 8px; }
}

/* ===================== UTILS ===================== */
img { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: transparent; }
input, select, textarea, button { max-width: 100%; }