:root {
    --hidmat-green: #0f5d43;
    --hidmat-green-dark: #073d2d;
    --hidmat-green-soft: #eaf6f1;
    --hidmat-purple: #6d2b91;
    --hidmat-purple-soft: #f4ebf8;
    --hidmat-gold: #c6a15b;
    --hidmat-ink: #18312a;
    --hidmat-muted: #64766f;
    --hidmat-border: rgba(15, 93, 67, .12);
    --hidmat-shadow: 0 22px 60px rgba(7, 61, 45, .10);
}

body {
    background: #f8fbf9 !important;
    color: var(--hidmat-ink) !important;
    text-rendering: optimizeLegibility;
}

nav.sticky {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid rgba(198, 161, 91, .45) !important;
    box-shadow: 0 10px 35px rgba(7, 61, 45, .08) !important;
    backdrop-filter: blur(18px);
}

nav.sticky > div:first-child {
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
}

nav.sticky img[src*="logo3"] {
    height: 58px !important;
    max-width: 58px;
    object-fit: contain;
}

.nav-title { color: var(--hidmat-green-dark) !important; }
.text-jawa-barat { color: var(--hidmat-purple) !important; }
.nav-text a { color: #28463d !important; }
.nav-text a:hover { color: var(--hidmat-purple) !important; }

#mobile-menu {
    background: linear-gradient(145deg, var(--hidmat-green-dark), var(--hidmat-green)) !important;
    border-radius: 0 0 1.25rem 1.25rem;
    max-height: 0;
}
#mobile-menu.open { max-height: 680px !important; }
#mobile-menu a { color: #fff !important; }

#hamburger-btn {
    background: var(--hidmat-purple) !important;
    box-shadow: 0 8px 20px rgba(109, 43, 145, .22);
}

.admin-nav {
    background: linear-gradient(135deg, var(--hidmat-green-dark), var(--hidmat-green)) !important;
    color: #fff !important;
}
.admin-nav a, .admin-nav button { color: #fff !important; }

.hero-wrapper {
    padding: clamp(.5rem, 1.8vw, 1.5rem) !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(198, 161, 91, .22), transparent 28%),
        linear-gradient(140deg, #052f23, #0f5d43 58%, #073d2d) !important;
}

.hero-image {
    max-width: 1440px;
    max-height: none !important;
    border-radius: clamp(1rem, 2vw, 1.8rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.hero-btn-wrapper {
    position: relative;
    z-index: 2;
    margin-top: -1.35rem;
    padding: 0 1rem 2.2rem !important;
    background: transparent !important;
}

.hero-btn-bottom,
.btn-primary,
.btn-add {
    background: linear-gradient(135deg, var(--hidmat-purple), #8141a4) !important;
    box-shadow: 0 14px 30px rgba(109, 43, 145, .24) !important;
}

.hero-btn-bottom:hover,
.btn-primary:hover,
.btn-add:hover {
    background: linear-gradient(135deg, #592176, var(--hidmat-purple)) !important;
}

.bismillah-section {
    padding: clamp(3.5rem, 8vw, 7rem) 1rem !important;
    background:
        radial-gradient(circle at 10% 15%, rgba(109, 43, 145, .08), transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(198, 161, 91, .13), transparent 25%),
        #fff !important;
}

.intro-shell { max-width: 900px; margin: 0 auto; }
.intro-kicker {
    display: inline-flex;
    padding: .45rem 1rem;
    border: 1px solid rgba(109, 43, 145, .18);
    border-radius: 999px;
    background: var(--hidmat-purple-soft);
    color: var(--hidmat-purple);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.intro-title {
    margin: 1.25rem auto .85rem;
    max-width: 760px;
    color: var(--hidmat-green-dark);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.8vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}
.intro-copy {
    max-width: 720px;
    margin: 0 auto;
    color: var(--hidmat-muted);
    font-size: clamp(.98rem, 1.8vw, 1.12rem);
    line-height: 1.85;
}
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.7rem; }
.intro-actions a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.25rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
}
.intro-actions .primary { background: var(--hidmat-green); color: #fff; box-shadow: 0 12px 28px rgba(15, 93, 67, .2); }
.intro-actions .secondary { background: #fff; color: var(--hidmat-purple); border: 1px solid rgba(109, 43, 145, .2); }

.section-title { color: var(--hidmat-green-dark) !important; letter-spacing: -.025em; }
.section-title::after { background: linear-gradient(90deg, var(--hidmat-purple), var(--hidmat-gold)) !important; width: 76px !important; }

section.bg-white { background: #fff !important; }
section.bg-emerald-50 {
    background:
        linear-gradient(135deg, rgba(15, 93, 67, .04), rgba(109, 43, 145, .035)),
        #f3f9f6 !important;
}

.program-card,
.berita-card,
.form-card,
.card {
    border: 1px solid var(--hidmat-border) !important;
    box-shadow: 0 12px 35px rgba(7, 61, 45, .07) !important;
}
.program-card { border-top: 3px solid var(--hidmat-gold) !important; }
.program-card:hover,
.berita-card:hover { box-shadow: var(--hidmat-shadow) !important; }

.gallery-item,
.produk-item {
    border-radius: 1.2rem !important;
    border: 4px solid rgba(255, 255, 255, .9);
    box-shadow: 0 12px 32px rgba(7, 61, 45, .12) !important;
}

.cta-pendataan {
    background: #fff !important;
    border: 1px solid rgba(109, 43, 145, .15) !important;
    box-shadow: 0 10px 30px rgba(7, 61, 45, .06);
}
.cta-pendataan:hover { transform: translateY(-3px); border-color: rgba(109, 43, 145, .32) !important; }
.cta-pendataan a { color: var(--hidmat-green-dark) !important; }

.bg-daun {
    background:
        radial-gradient(circle at 10% 15%, rgba(198, 161, 91, .25), transparent 26%),
        linear-gradient(140deg, #073d2d, #0f5d43 58%, #0a4935) !important;
}

footer { background: #052f23 !important; }

.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--hidmat-purple) !important;
    box-shadow: 0 0 0 4px rgba(109, 43, 145, .10) !important;
}

.security-note {
    padding: .85rem 1rem;
    border-radius: .9rem;
    background: #f6f1f8;
    color: #5b2a70;
    border: 1px solid rgba(109, 43, 145, .12);
    font-size: .82rem;
}

@media (max-width: 767px) {
    nav.sticky img[src*="logo3"] { height: 48px !important; max-width: 48px; }
    nav.sticky > div:first-child { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    .hero-wrapper { padding: .4rem !important; }
    .hero-image { border-radius: .9rem; }
    .hero-btn-wrapper { margin-top: -.9rem; }
    .bismillah-text { font-size: 1.8rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}