:root {
    --primary-green: #064E3B;
    /* Emerald Forest Green */
    --accent-green: #059669;
    /* Vibrant Green */
    --gold: #D4AF37;
    /* Elegant Gold */
    --merah: #CE1126;
    /* Merah bendera RI */
    --merah-dark: #9B0E1D;
    --light-bg: #F9FAFB;
    /* Light Gray/White Background */
    --text-dark: #1F2937;
    /* Slate Gray for text */
    --text-muted: #6B7280;
    /* Muted text */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: var(--light-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* Base Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 9999px;
    /* Pill shape */
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-green);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
}

.btn-outline:hover {
    background-color: var(--primary-green);
    color: white;
}

/* Sections */
section {
    padding: 80px 0;
}

/* Navbar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-green);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--accent-green);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-top: 80px;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: fadeInUp 1s ease-out;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1.2s ease-out;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Simple mobile hide, usually would have a hamburger menu */
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    section {
        padding: 50px 0;
    }

    .about-text {
        text-align: center;
    }

    .about-image {
        margin-bottom: 2rem;
    }

    .infaq h2 {
        font-size: 2rem;
    }
}

/* Festive Idul Adha Styles */
.announcement-bar {
    background: linear-gradient(90deg, var(--merah) 0%, var(--merah-dark) 100%);
    color: #ffffff;
    text-align: center;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    position: relative;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    line-height: 1.4;
}

.announcement-bar.is-mosque {
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-green) 100%);
}

.announcement-bar.is-kemarau {
    background: linear-gradient(90deg, #8c5a2b 0%, #c58b45 52%, #a66a32 100%);
}

.announcement-bar.is-merdeka {
    background: linear-gradient(90deg, var(--merah) 0%, var(--merah-dark) 100%);
}

.festive-greeting {
    position: relative;
    padding: 100px 0;
    background: #ecfdf5;
    overflow: hidden;
}

.festive-container {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.festive-content {
    flex: 1;
    min-width: 300px;
}

.festive-title {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.festive-badge {
    display: inline-block;
    background: var(--gold);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    margin-top: 2rem;
    animation: pulse 2s infinite;
}

.festive-image {
    flex: 1;
    min-width: 300px;
}

.festive-image img {
    width: 100%;
    border-radius: 40px;
    box-shadow: var(--shadow-lg);
    border: 8px solid white;
}

[hidden] {
    display: none !important;
}

/* Ornaments */
.ornament {
    position: absolute;
    color: var(--gold);
    opacity: 0.2;
    z-index: 0;
    font-size: 4rem;
}

.ornament-1 {
    top: 10%;
    left: 5%;
    animation: float 6s ease-in-out infinite;
}

.ornament-2 {
    bottom: 10%;
    right: 5%;
    animation: float 8s ease-in-out infinite;
}

.ornament-3 {
    top: 50%;
    right: 10%;
    animation: float 7s ease-in-out infinite;
    font-size: 3rem;
}

.seasonal-ornaments {
    pointer-events: none;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-30px) rotate(10deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Updated Nav for Announcement Bar */
nav {
    top: 36px;
    /* Height of announcement bar */
}

@media (max-width: 768px) {
    .festive-title {
        font-size: 2.25rem;
    }

    .festive-container {
        text-align: center;
    }

    nav {
        top: 56px;
    }

    /* Adjusted for mobile wrapped text */
}

/* Accessibility & Utils */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

html {
    scroll-behavior: smooth;
}

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 250px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(6, 78, 59, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    opacity: 0;
    transition: var(--transition);
}

.gallery-overlay span {
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* ===== Festive HUT RI (Agustusan) ===== */
.festive-merdeka {
    background: linear-gradient(160deg, #ffffff 0%, #fff5f6 55%, #ecfdf5 100%);
    padding-top: 130px;
}

/* ===== Festive Nuansa Masjid ===== */
.festive-mosque {
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(5, 150, 105, 0.14), transparent 32%),
        linear-gradient(160deg, #f8fffb 0%, #eefaf4 50%, #fffaf1 100%);
    padding-top: 130px;
}

.masjid-eyebrow {
    display: inline-block;
    color: var(--primary-green);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.festive-mosque .festive-title {
    color: var(--primary-green);
}

.festive-mosque .festive-title span {
    color: var(--gold);
}

.festive-badge--mosque {
    background: var(--primary-green);
    color: white;
}

.mosque-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.75rem;
}

.mosque-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.86);
    color: var(--primary-green);
    border: 1px solid rgba(6, 78, 59, 0.08);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.mosque-highlight i {
    color: var(--gold);
}

.mosque-visual {
    display: flex;
    justify-content: center;
}

.mosque-emblem {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-height: 360px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.82) 100%),
        linear-gradient(180deg, rgba(6, 78, 59, 0.06), rgba(212, 175, 55, 0.07));
    border-radius: 40px;
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: var(--shadow-lg);
    border: 8px solid white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mosque-emblem::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 30px;
    border: 1px solid rgba(6, 78, 59, 0.08);
    pointer-events: none;
}

.mosque-crescent {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold), #f3d46c);
    color: white;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    box-shadow: 0 18px 40px rgba(212, 175, 55, 0.28);
    margin-bottom: 1.25rem;
    position: relative;
}

.mosque-crescent::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: white;
    top: 14px;
    right: 12px;
}

.mosque-crescent i {
    position: relative;
    z-index: 1;
}

.mosque-arch {
    position: relative;
    font-size: 5.5rem;
    color: var(--primary-green);
    line-height: 1;
    margin-bottom: 1rem;
}

.mosque-arch::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 220px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(6, 78, 59, 0), rgba(6, 78, 59, 0.18), rgba(6, 78, 59, 0));
}

.mosque-lights {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mosque-lights span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.12);
    animation: pulse 2.4s infinite;
}

.mosque-lights span:nth-child(2) {
    animation-delay: 0.25s;
}

.mosque-lights span:nth-child(3) {
    animation-delay: 0.5s;
}

.mosque-caption {
    max-width: 280px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Umbul-umbul: deretan bendera segitiga menggantung dari tali */
.bunting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    z-index: 1;
    /* Tali penggantung */
    border-top: 3px solid rgba(155, 14, 29, 0.35);
    /* Deret segitiga merah-putih berselang-seling */
    background-image: repeating-linear-gradient(90deg,
            var(--merah) 0 26px,
            #ffffff 26px 52px);
    /* Potong jadi bentuk segitiga menghadap ke bawah */
    clip-path: polygon(0 0, 100% 0, 100% 12%,
            98.6% 100%, 97.2% 12%,
            95.8% 100%, 94.4% 12%,
            93% 100%, 91.6% 12%,
            90.2% 100%, 88.8% 12%,
            87.4% 100%, 86% 12%,
            84.6% 100%, 83.2% 12%,
            81.8% 100%, 80.4% 12%,
            79% 100%, 77.6% 12%,
            76.2% 100%, 74.8% 12%,
            73.4% 100%, 72% 12%,
            70.6% 100%, 69.2% 12%,
            67.8% 100%, 66.4% 12%,
            65% 100%, 63.6% 12%,
            62.2% 100%, 60.8% 12%,
            59.4% 100%, 58% 12%,
            56.6% 100%, 55.2% 12%,
            53.8% 100%, 52.4% 12%,
            51% 100%, 49.6% 12%,
            48.2% 100%, 46.8% 12%,
            45.4% 100%, 44% 12%,
            42.6% 100%, 41.2% 12%,
            39.8% 100%, 38.4% 12%,
            37% 100%, 35.6% 12%,
            34.2% 100%, 32.8% 12%,
            31.4% 100%, 30% 12%,
            28.6% 100%, 27.2% 12%,
            25.8% 100%, 24.4% 12%,
            23% 100%, 21.6% 12%,
            20.2% 100%, 18.8% 12%,
            17.4% 100%, 16% 12%,
            14.6% 100%, 13.2% 12%,
            11.8% 100%, 10.4% 12%,
            9% 100%, 7.6% 12%,
            6.2% 100%, 4.8% 12%,
            3.4% 100%, 2% 12%,
            0.6% 100%, 0 12%);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.15));
}

.merdeka-eyebrow {
    display: inline-block;
    color: var(--merah);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.festive-merdeka .festive-title {
    color: var(--merah);
}

.festive-merdeka .festive-title span {
    color: var(--primary-green);
}

.festive-merdeka .festive-badge {
    background: var(--merah);
    color: white;
}

/* Countdown 17 Agustus */
.merdeka-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.merdeka-unit {
    background: white;
    border: 2px solid rgba(206, 17, 38, 0.15);
    border-radius: 16px;
    padding: 0.85rem 1.1rem;
    text-align: center;
    min-width: 78px;
    box-shadow: var(--shadow-sm);
}

.merdeka-unit span {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--merah);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.merdeka-unit small {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Emblem 81 + bendera */
.merdeka-visual {
    display: flex;
    justify-content: center;
}

.merdeka-emblem {
    position: relative;
    background: white;
    border-radius: 40px;
    padding: 3rem 2.5rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 8px solid white;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
}

.merdeka-flag {
    width: 120px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    animation: wave 3.5s ease-in-out infinite;
}

.flag-red,
.flag-white {
    display: block;
    height: 50%;
}

.flag-red {
    background: var(--merah);
}

.flag-white {
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
}

.merdeka-number {
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, var(--merah) 0%, var(--merah-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.merdeka-caption {
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.merdeka-mosque {
    position: absolute;
    right: -18px;
    bottom: -18px;
    font-size: 7rem;
    color: var(--primary-green);
    opacity: 0.07;
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(-2.5deg) skewY(1.5deg) scaleY(1);
    }

    25% {
        transform: rotate(0deg) skewY(-1deg) scaleY(0.97);
    }

    50% {
        transform: rotate(2.5deg) skewY(-1.5deg) scaleY(1);
    }

    75% {
        transform: rotate(0deg) skewY(1deg) scaleY(0.97);
    }
}

/* Ornamen agustusan */
.festive-merdeka .ornament-1 {
    color: var(--merah);
    opacity: 0.18;
}

.festive-merdeka .ornament-2 {
    color: var(--gold);
    opacity: 0.25;
}

.festive-merdeka .ornament-3 {
    color: var(--primary-green);
    opacity: 0.12;
}

.festive-mosque .ornament-1 {
    color: var(--gold);
    opacity: 0.22;
}

.festive-mosque .ornament-2 {
    color: var(--primary-green);
    opacity: 0.14;
}

.festive-mosque .ornament-3 {
    color: var(--gold);
    opacity: 0.12;
}

/* ===== Pesan Musim Kemarau ===== */
.festive-kemarau {
    background:
        radial-gradient(circle at 84% 12%, rgba(239, 178, 78, 0.28), transparent 22%),
        radial-gradient(circle at 12% 88%, rgba(139, 94, 48, 0.14), transparent 28%),
        linear-gradient(160deg, #fff8e8 0%, #f5ead3 52%, #e7d4b5 100%);
    padding-top: 130px;
}

.kemarau-eyebrow {
    display: inline-block;
    color: #8c5a2b;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.festive-kemarau .festive-title {
    color: #70431f;
}

.festive-kemarau .festive-title span {
    color: #b7791f;
}

.festive-badge--kemarau {
    background: #8c5a2b;
    color: #fffaf0;
}

.kemarau-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.75rem;
}

.kemarau-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 250, 240, 0.82);
    color: #70431f;
    border: 1px solid rgba(112, 67, 31, 0.12);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(112, 67, 31, 0.1);
    font-weight: 600;
}

.kemarau-highlight i {
    color: #b7791f;
}

.kemarau-visual {
    display: flex;
    justify-content: center;
}

.kemarau-emblem {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-height: 360px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 210, 112, 0.55), transparent 28%),
        linear-gradient(145deg, rgba(255, 250, 240, 0.95), rgba(218, 193, 153, 0.78));
    border-radius: 40px;
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: 0 18px 35px rgba(112, 67, 31, 0.18);
    border: 8px solid rgba(255, 250, 240, 0.9);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kemarau-emblem::before,
.kemarau-emblem::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 42px;
    border-top: 3px solid rgba(140, 90, 43, 0.25);
    border-radius: 50%;
    transform: rotate(-9deg);
}

.kemarau-emblem::before { top: 38%; left: -40px; }
.kemarau-emblem::after { bottom: 22%; right: -50px; transform: rotate(8deg); }

.kemarau-sun {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f4c15d, #d88b2d);
    color: #fff8e8;
    display: grid;
    place-items: center;
    font-size: 3rem;
    box-shadow: 0 16px 35px rgba(216, 139, 45, 0.3);
    margin-bottom: 1.25rem;
}

.kemarau-motif {
    display: flex;
    gap: 1.25rem;
    color: #70431f;
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.kemarau-motif i:first-child { color: #b7791f; }

.kemarau-caption {
    max-width: 280px;
    color: #70431f;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.festive-kemarau .ornament-1 { color: #d88b2d; opacity: 0.24; }
.festive-kemarau .ornament-2 { color: #8c5a2b; opacity: 0.2; }
.festive-kemarau .ornament-3 { color: #3c8c79; opacity: 0.25; }

@media (max-width: 768px) {
    .festive-merdeka {
        padding-top: 90px;
    }

    .festive-mosque {
        padding-top: 90px;
    }

    .festive-kemarau {
        padding-top: 90px;
    }

    .merdeka-countdown {
        justify-content: center;
    }

    .merdeka-number {
        font-size: 4.5rem;
    }

    .merdeka-emblem {
        padding: 2rem 1.5rem;
    }

    .mosque-highlights {
        justify-content: center;
    }

    .mosque-emblem {
        min-height: 320px;
        padding: 2rem 1.5rem;
    }

    .mosque-arch {
        font-size: 4.75rem;
    }

    .kemarau-highlights {
        justify-content: center;
    }

    .kemarau-emblem {
        min-height: 320px;
        padding: 2rem 1.5rem;
    }
}

/* Islamic Calendar Section */
.islamic-calendar {
    background: #f0fdf4;
}

.countdown-card {
    background: linear-gradient(135deg, var(--primary-green), var(--accent-green));
    color: white;
    border-radius: 30px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 3rem;
}

.countdown-label {
    display: inline-block;
    background: var(--gold);
    color: var(--primary-green);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.countdown-info h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.countdown-info p {
    color: #d1fae5;
    font-size: 1rem;
}

.countdown-timer {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.countdown-unit {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    text-align: center;
    min-width: 82px;
}

.countdown-unit span {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.countdown-unit small {
    font-size: 0.75rem;
    color: #d1fae5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Year Filter */
.calendar-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.filter-btn {
    background: white;
    border: 2px solid transparent;
    color: var(--text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
    color: var(--primary-green);
    border-color: var(--accent-green);
}

.filter-btn.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

/* Event Cards */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.5rem;
}

.event-card {
    background: white;
    border-radius: 20px;
    padding: 1.75rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--accent-green);
    transition: var(--transition);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.event-card.is-past {
    opacity: 0.55;
    border-left-color: #d1d5db;
}

.event-card.is-next {
    border-left-color: var(--gold);
    background: #fffdf5;
}

.event-date {
    background: var(--primary-green);
    color: white;
    border-radius: 16px;
    padding: 0.85rem 0.5rem;
    text-align: center;
    min-width: 78px;
    flex-shrink: 0;
}

.event-card.is-next .event-date {
    background: var(--gold);
}

.event-card.is-past .event-date {
    background: var(--text-muted);
}

.event-date .day {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}

.event-date .month {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

.event-date .year {
    display: block;
    font-size: 0.7rem;
    opacity: 0.85;
}

.event-body {
    flex: 1;
    min-width: 0;
}

.event-body h3 {
    font-size: 1.25rem;
    color: var(--primary-green);
    margin-bottom: 0.35rem;
}

.event-hijri {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--accent-green);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.event-body p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.event-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: var(--accent-green);
}

.event-card.is-past .event-status {
    background: #f3f4f6;
    color: var(--text-muted);
}

.event-card.is-next .event-status {
    background: var(--gold);
    color: white;
}

.calendar-note {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.calendar-note i {
    color: var(--gold);
    margin-right: 6px;
}

@media (max-width: 768px) {
    .countdown-card {
        padding: 2rem 1.5rem;
        text-align: center;
        justify-content: center;
    }

    .countdown-info h3 {
        font-size: 1.6rem;
    }

    .countdown-timer {
        width: 100%;
        justify-content: center;
        gap: 0.6rem;
    }

    .countdown-unit {
        min-width: 68px;
        padding: 0.75rem 0.5rem;
    }

    .countdown-unit span {
        font-size: 1.5rem;
    }
}

/* ===== Artikel ===== */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.article-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.article-thumb {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    position: relative;
}

.article-thumb.t-hijau {
    background: linear-gradient(135deg, var(--primary-green), var(--accent-green));
}

.article-thumb.t-emas {
    background: linear-gradient(135deg, #b8860b, var(--gold));
}

.article-thumb.t-sedekah {
    background: linear-gradient(135deg, #9d174d, #db2777);
}

.article-thumb.t-zakat {
    background: linear-gradient(135deg, #7c2d12, #ea580c);
}

.article-thumb.t-peduli {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}

.article-thumb.t-merah {
    background: linear-gradient(135deg, var(--merah-dark), var(--merah));
}

.article-thumb.t-teal {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.article-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: var(--accent-green);
    margin-bottom: 0.85rem;
}

.article-tag.tag-merah {
    background: rgba(206, 17, 38, 0.1);
    color: var(--merah);
}

.article-tag.tag-emas {
    background: #fffbeb;
    color: #b8860b;
}

.article-tag.tag-sedekah {
    background: #fdf2f8;
    color: #9d174d;
}

.article-tag.tag-zakat {
    background: #fff7ed;
    color: #9a3412;
}

.article-tag.tag-peduli {
    background: #eff6ff;
    color: #1e40af;
}

.article-card h3 {
    font-size: 1.3rem;
    color: var(--primary-green);
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.article-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    flex: 1;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid #f3f4f6;
    padding-top: 1rem;
}

.article-readmore {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 0.9rem;
    margin-left: auto;
}

/* Isi artikel */
.article-body-text {
    max-width: 760px;
    margin: 0 auto;
}

.article-body-text .lead {
    font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 2rem;
    padding-left: 1.25rem;
    border-left: 4px solid var(--gold);
}

.article-body-text h2 {
    font-size: 1.9rem;
    color: var(--primary-green);
    margin: 2.5rem 0 1rem;
}

.article-body-text h3 {
    font-size: 1.3rem;
    color: var(--accent-green);
    margin: 2rem 0 0.75rem;
}

.article-body-text p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.25rem;
}

.article-body-text ul,
.article-body-text ol {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 1.5rem 1.25rem;
}

.article-body-text li {
    margin-bottom: 0.6rem;
}

.article-body-text strong {
    color: var(--text-dark);
}

/* Kutipan ayat/hadits */
.quote-box {
    background: #f0fdf4;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 5px solid var(--accent-green);
}

.quote-box p {
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.quote-box cite {
    display: block;
    font-size: 0.9rem;
    color: var(--accent-green);
    font-weight: 700;
    font-style: normal;
}

.quote-box.quote-merah {
    background: #fff5f6;
    border-left-color: var(--merah);
}

.quote-box.quote-merah cite {
    color: var(--merah);
}

/* Kotak sorotan */
.highlight-box {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--gold);
}

.highlight-box h4 {
    color: var(--primary-green);
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

/* ===== Tombol Bagikan Artikel ===== */
.share-box {
    margin-top: 3rem;
    padding: 1.75rem;
    background: #f0fdf4;
    border-radius: 20px;
    text-align: center;
}

.share-box h4 {
    color: var(--primary-green);
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.share-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.07);
}

.share-btn i {
    font-size: 1.05rem;
}

.share-wa {
    background: #25D366;
}

.share-fb {
    background: #1877F2;
}

.share-tg {
    background: #0088cc;
}

.share-x {
    background: #111827;
}

/* Menu berbagi bawaan perangkat (memuat TikTok, Instagram, dll) */
.share-perangkat {
    background: linear-gradient(135deg, #000000, #25F4EE 130%);
}

.share-copy {
    background: var(--text-muted);
}

/* Tombol ber-atribut hidden harus benar-benar tersembunyi
   meski .share-btn memakai display: inline-flex */
.share-btn[hidden] {
    display: none;
}

/* Notifikasi setelah tautan disalin */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    background: var(--primary-green);
    color: white;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2000;
}

.share-toast.tampil {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
    .share-btn {
        padding: 0.65rem 1.1rem;
        font-size: 0.85rem;
    }
}

/* Navigasi antar artikel */
.article-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.article-nav a {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.article-nav a:hover {
    color: var(--primary-green);
}

@media (max-width: 768px) {
    .article-body-text .lead {
        font-size: 1.1rem;
    }

    .article-body-text h2 {
        font-size: 1.5rem;
    }
}

/* ===== Ilustrasi Santri: Al-Quran & Bendera ===== */
.santri-stage {
    background: linear-gradient(170deg, #fff5f6 0%, #ffffff 45%, #ecfdf5 100%);
    padding: 3.5rem 0 2.5rem;
    overflow: hidden;
}

.santri-stage .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.santri-svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
}

.santri-caption {
    margin-top: 1.25rem;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 460px;
}

.santri-caption i {
    color: var(--merah);
    margin-right: 8px;
    opacity: 0.65;
}

/* Kibaran kain bendera — berporos di sisi tiang */
.kibar-merah,
.kibar-putih {
    transform-box: fill-box;
    transform-origin: left center;
    animation: kibar 3s ease-in-out infinite;
}

.kibar-putih {
    animation-delay: 0.18s;
}

@keyframes kibar {

    0%,
    100% {
        transform: skewY(0deg) scaleY(1);
    }

    25% {
        transform: skewY(-2.2deg) scaleY(0.97);
    }

    50% {
        transform: skewY(0.8deg) scaleY(1.02);
    }

    75% {
        transform: skewY(2deg) scaleY(0.98);
    }
}

/* Lengan melambai — transform-box agar origin mengikuti kotak elemen SVG */
.lengan-lambai {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: lambai 2.2s ease-in-out infinite;
}

@keyframes lambai {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-13deg);
    }

    60% {
        transform: rotate(6deg);
    }
}

/* Santri & santriwati bernapas / sedikit naik-turun */
.gugus-santri,
.gugus-santriwati {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: bernapas 3.6s ease-in-out infinite;
}

/* Jeda berbeda agar keduanya tidak bergerak seragam */
.gugus-santriwati {
    animation-duration: 4.1s;
    animation-delay: 0.4s;
}

/* Latar bulat mengembang halus */
.latar-bulat {
    transform-box: fill-box;
    transform-origin: center;
    animation: denyut-latar 7s ease-in-out infinite;
}

@keyframes denyut-latar {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

@keyframes bernapas {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Kilau pada mushaf */
.kilau-mushaf {
    animation: kilau 4s ease-in-out infinite;
}

.kilau-2 {
    animation-delay: 1.2s;
}

@keyframes kilau {

    0%,
    100% {
        opacity: 0.08;
    }

    50% {
        opacity: 0.3;
    }
}

/* Bintang berkelip */
.kelip {
    transform-box: fill-box;
    transform-origin: center;
    animation: kelip 2.6s ease-in-out infinite;
}

.kelip-2 {
    animation-delay: 0.7s;
}

.kelip-3 {
    animation-delay: 1.4s;
}

@keyframes kelip {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.15);
    }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {

    .kibar-merah,
    .kibar-putih,
    .lengan-lambai,
    .gugus-santri,
    .gugus-santriwati,
    .latar-bulat,
    .kilau-mushaf,
    .kelip {
        animation: none;
    }
}

@media (max-width: 768px) {
    .santri-stage {
        padding: 2.5rem 0 1.5rem;
    }

    .santri-caption {
        font-size: 0.92rem;
    }
}

/* Social Links */
.social-links a:hover {
    color: var(--gold) !important;
    transform: translateY(-3px);
}

.fa-youtube:hover { color: #FF0000 !important; }
.fa-instagram:hover { color: #E1306C !important; }
.fa-facebook:hover { color: #1877F2 !important; }
.fa-tiktok:hover { color: #000000 !important; }