/* -------- Biru --------- */
/*:root{
    --ih-blue-900: #0b074f;
    --ih-blue-700: #232869;
    --ih-blue-600: #5453a7;
    --ih-blue-500: #767fbd;
    --ih-blue-300: #cdcee9;
    --ih-blue-100: #e1e3eb;
    --ih-gold: #c9a227;
    --ih-gold-soft: #e8d68a;
    --ih-cream: #faf6ee;
    --ih-ink: #0f1a14;
    --ih-muted: #5b6b62;
} */
/* ------ hijau ----- */
:root{
    --ih-blue-900:#0b3d2a;
    --ih-blue-700:#115a3d;
    --ih-blue-600:#1a7a4c;
    --ih-blue-500:#2a9d63;
    --ih-blue-300:#7fc8a3;
    --ih-blue-100:#e7f5ed;
    --ih-gold:#c9a227;
    --ih-gold-soft:#e8d68a;
    --ih-cream:#faf6ee;
    --ih-ink:#0f1a14;
    --ih-muted:#5b6b62;
}

*{ -webkit-font-smoothing:antialiased; }
body{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; background:var(--ih-cream); color:var(--ih-ink); overflow-x:hidden; }
.font-arabic{ font-family:'Amiri', serif; }

/* NAVBAR */
.ih-nav {background: linear-gradient(135deg, var(--ih-blue-900) 0%, #010210 60%, var(--ih-blue-600) 100%); box-shadow: 0 10px 30px -10px rgba(11, 61, 42, .35);}
.ih-nav .navbar-brand{ font-weight:800; color:#fff; display:flex; align-items:center; gap:.65rem; line-height:1.1; }
.ih-nav .navbar-brand small{ font-size:.7rem; opacity:.75; font-weight:500; }
.brand-mark{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, var(--ih-gold) 0%, var(--ih-gold-soft) 100%); display:grid; place-items:center; color:var(--ih-blue-900); font-weight:800; font-size:1.1rem; box-shadow:0 6px 16px -4px rgba(201,162,39,.55); }
.ih-nav .nav-link{ color:rgba(255,255,255,.85); font-weight:500; padding:.5rem 1rem!important; border-radius:10px; transition:all .25s ease; position:relative; }
.ih-nav .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.ih-nav .nav-link.active{ color:#fff; }
.ih-nav .nav-link.active::after{ content:''; position:absolute; left:1rem; right:1rem; bottom:.25rem; height:2px; background:var(--ih-gold); border-radius:2px; }
.btn-donasi{ background:linear-gradient(135deg, var(--ih-gold) 0%, #e0b934 100%); color:var(--ih-blue-900); font-weight:700; border:none; padding:.65rem 1.4rem; border-radius:50px; box-shadow:0 8px 22px -6px rgba(201,162,39,.6); transition:transform .25s ease, box-shadow .25s ease; text-decoration:none; display:inline-block; }
.btn-donasi:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(201,162,39,.75); color:var(--ih-blue-900); }

/* HERO */
/* .hero {position: relative;background:radial-gradient(1200px 600px at 80% -10%,rgba(201,162,39,.18),transparent 60% ),radial-gradient(900px 500px at -10% 110%,rgba(42,157,99,.25),transparent 60% ),linear-gradient( 135deg, var(--ih-blue-900) 0%,var(--ih-blue-600) 50%,#000 100%);color: #fff; padding: 7rem 0 6rem;overflow: hidden;} */
.hero { position:relative; background: radial-gradient(1200px 600px at 80% -10%, rgba(201,162,39,.18), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(42,157,99,.25), transparent 60%), linear-gradient(135deg, var(--ih-blue-900) 100%, black, var(--ih-blue-600) 5%); color:#fff; padding:7rem 0 6rem; overflow:hidden; }
/*.hero::before{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M40 0l10 30h30L55 50l10 30L40 60 15 80l10-30L0 30h30z'/%3E%3C/svg%3E"); background-size:120px 120px; opacity:.6; } */
.hero::before{ content:''; position:absolute; inset:0; background-image: url("http://localhost/insajaya.net/uploads/insajaya.png"); background-size: 200px 200px; opacity: .08;); }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:50px; font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ih-gold-soft); }
.hero h1{ font-size:clamp(2.5rem, 5vw, 4.2rem); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin-bottom:1.25rem; }
.hero h1 .gold{ color:var(--ih-gold-soft); }
.hero p.lead{ font-size:1.15rem; color:rgba(255,255,255,.85); max-width:560px; margin-bottom:2rem; }
.hero-cta .btn{ padding:.85rem 1.75rem; border-radius:50px; font-weight:700; }
.hero-cta .btn-primary{ background:linear-gradient(135deg, var(--ih-gold) 0%, #e0b934 100%); color:var(--ih-blue-900); border:none; box-shadow:0 12px 28px -8px rgba(201,162,39,.6); }
.hero-cta .btn-outline-light{ border:1.5px solid rgba(255,255,255,.35); color:#fff; }
.hero-card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(14px); border-radius:24px; padding:2rem; color:#fff; }
.hero-card .progress{ background:rgba(0,0,0,.25); height:10px; border-radius:50px; }
.hero-card .progress-bar{ background:linear-gradient(90deg, var(--ih-gold), var(--ih-gold-soft)); border-radius:50px; }
.arabic-ayah{ font-family:'Amiri', serif; font-size:1.5rem; color:var(--ih-gold-soft); direction:rtl; line-height:1.8; }
.hero-shape{ position:absolute; right:-100px; top:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,39,.2), transparent 70%); pointer-events:none; }

/* STATS */
.stats-section{ position:relative; margin-top:-4rem; z-index:5; }
.stat-card{ background:linear-gradient(45deg, #070b16, transparent); border-radius:20px; padding:1.75rem 1.5rem; text-align:center; box-shadow:0 20px 50px -20px rgba(11,61,42,.18); border:1px solid rgba(11,61,42,.06); transition:transform .3s ease, box-shadow .3s ease; height:100%; }
.stat-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(11,61,42,.28); }
.stat-icon{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin:0 auto 1rem; background:linear-gradient(135deg, var(--ih-blue-100), var(--ih-blue-300)); color:var(--ih-blue-700); font-size:1.5rem; }
.stat-value{ font-size:2.5rem; font-weight:800; color:var(--ih-blue-700); line-height:1; letter-spacing:-.02em; }
.stat-label{ color:var(--ih-muted); font-weight:500; margin-top:.4rem; font-size:.95rem; }

/* SECTIONS */
.section{ padding:5rem 0; 
 background: linear-gradient(rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.7)),url("http://localhost/insajaya.net/uploads/laut1.avif") no-repeat center center fixed;background-size: cover;height: 100%;
 }
.section2{ padding:5rem 0; 
 background: linear-gradient(rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.7)),url("http://localhost/insajaya.net/uploads/laut2.avif") no-repeat center center fixed;background-size: cover;height: 100%;
 }
/*.section-eyebrow{ color:var(--ih-blue-600); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; display:inline-flex; align-items:center; gap:.5rem; } */
.section-eyebrow {
    color: #15144f;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.0rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.section-eyebrow::before{ content:''; width:24px; height:2px; background:var(--ih-gold); border-radius:2px; }
.section-title{ font-size:clamp(2rem, 3.5vw, 2.75rem); font-weight:800; color:var(--ih-blue-900); letter-spacing:-.02em; line-height:1.1; }

/* PROGRAM CARDS */
.program-card{ background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(11,61,42,.07); transition:transform .35s ease, box-shadow .35s ease; height:100%; }
.program-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -25px rgba(11,61,42,.25); }
.program-thumb{ height:50; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--ih-blue-700), var(--ih-blue-500)); }
.program-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.program-card:hover .program-thumb img{ transform:scale(1.08); }
.program-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,61,42,.65) 100%); }
.program-tag{ position:absolute; top:1rem; left:1rem; background:rgba(255,255,255,.95); color:var(--ih-blue-700); padding:.35rem .9rem; border-radius:50px; font-size:.78rem; font-weight:700; z-index:2; }
.program-body{ padding:1.5rem; }
.program-body h3{ font-size:1.25rem; font-weight:700; color:var(--ih-blue-900); margin-bottom:.5rem; }
.program-body p{ color:var(--ih-muted); font-size:.92rem; margin-bottom:1.25rem; }
.program-link{ color:var(--ih-blue-600); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:gap .25s ease; }
.program-link:hover{ gap:.7rem; color:var(--ih-blue-700); }

/* NEWS */
.news-card{ background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(11,61,42,.07); transition:transform .3s ease, box-shadow .3s ease; height:100%; } */
.news-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -22px rgba(11,61,42,.22); }
.news-thumb{ height:200px; overflow:hidden; position:relative; background:linear-gradient(135deg, var(--ih-blue-100), var(--ih-blue-300)); }
.news-thumb img{ width:100%; height:100%; object-fit:fill; transition:transform .5s ease; }
.news-card:hover .news-thumb img{ transform:scale(1.06); }
.news-date{ position:absolute; bottom:1rem; left:1rem; background:rgba(11,61,42,.85); color:#fff; padding:.4rem .8rem; border-radius:10px; font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.news-body{ padding:1.4rem; }
.news-meta{ color:var(--ih-blue-600); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; }
.news-body h3{ font-size:1.1rem; font-weight:700; color:var(--ih-blue-900); line-height:1.35; margin-bottom:.6rem; }
.news-body p{ color:var(--ih-muted); font-size:.9rem; margin-bottom:1rem; }

/* DONATION CTA */
.donate-cta{ background: radial-gradient(800px 400px at 90% 0%, rgba(201,162,39,.18), transparent 60%), linear-gradient(135deg, var(--ih-blue-900) 0%, var(--ih-blue-700) 100%); border-radius:32px; color:#fff; padding:4rem 3rem; position:relative; overflow:hidden; }
.donate-cta::before{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M30 0l7.5 22.5H60l-18 13.5 7.5 22.5L30 45 12 58.5l7.5-22.5L0 22.5h22.5z'/%3E%3C/svg%3E"); background-size:80px 80px; }
.donate-cta > *{ position:relative; z-index:2; }

/* FOOTER */
footer{ background:var(--ih-blue-900); color:rgba(255,255,255,.8); padding:4rem 0 2rem; }
footer h5{ color:#fff; font-weight:700; margin-bottom:1.25rem; font-size:1.05rem; }
footer a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s ease; }
footer a:hover{ color:var(--ih-gold-soft); }
footer .social-icon{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:all .25s ease; }
footer .social-icon:hover{ background:var(--ih-gold); color:var(--ih-blue-900); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; font-size:.88rem; color:rgba(255,255,255,.6); }

/* REVEAL */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ========== ADMIN ========== */
.admin-body{ background:#f4f6f5; min-height:100vh; }
.admin-sidebar{ background:linear-gradient(180deg, var(--ih-blue-900) 0%, var(--ih-blue-700) 100%); min-height:100vh; position:fixed; top:0; left:0; width:250px; padding:1.5rem 0; color:rgba(255,255,255,.85); z-index:1000; }
.admin-sidebar .brand{ padding:0 1.5rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:1rem; display:flex; align-items:center; gap:.65rem; color:#fff; font-weight:800; }
.admin-main{ margin-left:250px; min-height:100vh; }
.admin-topbar{ background:#fff; padding:1rem 1.5rem; border-bottom:1px solid rgba(11,61,42,.08); position:sticky; top:0; z-index:100; }
.admin-content{ padding:2rem 1.5rem; }
.admin-nav-link{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1.5rem; color:rgba(255,255,255,.75); text-decoration:none; font-weight:500; transition:all .25s ease; border-left:3px solid transparent; }
.admin-nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.admin-nav-link.active{ background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--ih-gold); }
.admin-nav-link i{ font-size:1.15rem; }

.admin-card{ background:#fff; border-radius:16px; padding:1.5rem; border:1px solid rgba(11,61,42,.07); box-shadow:0 4px 20px -10px rgba(11,61,42,.08); }
.admin-stat{ border-radius:16px; padding:1.5rem; color:#fff; position:relative; overflow:hidden; }
.admin-stat .icon-bg{ position:absolute; right:-10px; bottom:-10px; font-size:5rem; opacity:.15; }
.admin-stat h3{ font-size:2rem; font-weight:800; margin:0; }

.table thead th{ background:var(--ih-blue-100); color:var(--ih-blue-900); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; border:none; padding:1rem; }
.table tbody td{ padding:1rem; vertical-align:middle; border-bottom:1px solid rgba(11,61,42,.06); }
.table tbody tr:hover{ background:rgba(42,157,99,.04); }
.badge-soft{ padding:.4rem .75rem; border-radius:50px; font-size:.75rem; font-weight:700; }

.form-control:focus, .form-select:focus{ border-color:var(--ih-blue-500); box-shadow:0 0 0 .25rem rgba(42,157,99,.15); }
.btn-ih-primary{ background:var(--ih-blue-600); border:none; color:#fff; font-weight:600; padding:.6rem 1.4rem; border-radius:10px; }
.btn-ih-primary:hover{ background:var(--ih-blue-700); color:#fff; }
.btn-ih-gold{ background:linear-gradient(135deg, var(--ih-gold), #e0b934); border:none; color:var(--ih-blue-900); font-weight:700; padding:.6rem 1.4rem; border-radius:10px; }

.login-wrapper{ min-height:100vh; display:grid; place-items:center; /*background: radial-gradient(800px 400px at 90% 0%, rgba(201,162,39,.18),*/ transparent 30%), linear-gradient(135deg, var(--ih-blue-900), var(--ih-blue-700)); }
.login-card{ background:#fff; border-radius:24px; padding:2.5rem; max-width:420px; width:100%; box-shadow:0 30px 80px -20px rgba(0,0,0,.4); }
.login-card .brand-mark{ width:60px; height:60px; font-size:1.5rem; margin:0 auto 1rem; }

@media (max-width: 991.98px){
    .hero{ padding:5rem 0 4rem; }
    .donate-cta{ padding:2.5rem 1.5rem; }
    .admin-sidebar{ transform:translateX(-100%); transition:transform .3s; }
    .admin-sidebar.show{ transform:translateX(0); }
    .admin-main{ margin-left:0; }
}

.tengah {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Prevents layout overflow on smaller screens */
  }

        .program-box {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: Arial, sans-serif;
        }

        .program-title {
			font-family: cursive;
			font-style: italic;
            font-size: 20px;
            color: #6b6f81;
        }

		.program-number {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: #3A49A7;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: bold;
			color: #f5eded;
			box-shadow: 0 0 0 1px #b1a5a5;
		}

		.program-data {
			font-size: 10px;
			font-style: italic;
			color: #a5a2c9;
		}