body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            /*background-color: #ebf5ec;*/
			background-color: rgba(0, 92, 45, 0.30);
            background-image: url('../assets/img/batik.png');
            background-size: 1920px auto;
            background-position: center;
            background-repeat: round repeat;/*no-repeat;*/
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Outfit', sans-serif;
        }

        /* Glassmorphism Dark Sticky Header */
        .glass-sticky-header {
            background: rgba(11, 70, 50, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 2px solid rgba(251, 191, 36, 0.4);
        }

        /* Running Text Ticker Animation */
        .ticker-wrap {
            overflow: hidden;
            white-space: nowrap;
        }
        .ticker-move {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: ticker 80s linear infinite;
        }
        .ticker-wrap:hover .ticker-move {
            animation-play-state: paused;
        }
        @keyframes ticker {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-100%, 0, 0); }
        }

        /* Floating Widget & Back to Top Smooth Positioning */
        #floating-widget, #back-to-top {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @media (max-width: 640px) {
            #floating-widget {
                max-width: calc(100vw - 32px);
            }
        }

        /* Smooth Expand for Mobile Dropdown Menu */
        #mobile-menu {
            transition: all 0.3s ease-in-out;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #10b981;
            border-radius: 4px;
        }
        /*===========================
        EFEK SHADOW GRID
        ===========================*/
        .bento-card {
		/* Warna dasar kartu dan sudut yang membulat khas bento */
		background-color: #defce3;
		border-radius: 16px;
		padding: 24px;
  
		/* Border tipis untuk mempertegas batas struktur kotak */
		border: 3px solid rgba(0, 123, 58, 1);
  
		/* Efek Multi-layered Shadow agar tegas namun tetap halus */
		box-shadow: 
			0px 3px 3px rgba(0, 0, 0, 0.15), 
  
			0px 1px 2px rgba(0, 0, 0, 0.02),
			0px 4px 8px rgba(0, 0, 0, 0.04),
			0px 12px 24px -4px rgba(0, 0, 0, 0.06);
    
		/* Transisi halus saat ada interaksi */
		transition: transform 0.3s ease, box-shadow 0.3s ease;
}

		/* Efek interaktif saat kursor diarahkan ke kartu (Hover) */
		.bento-card:hover {
		/* Kartu sedikit terangkat ke atas */
		transform: translateY(-5px); 
		box-shadow: 
			0px 2px 4px rgba(0, 92, 45, 0.04),
			0px 8px 16px rgba(0, 92, 45, 0.10),
			0px 20px 32px -4px rgba(0, 92, 45, 0.15);
		border: 2px solid #005C2D;
}
        
        /* =========================================================
           INTRO / SPLASH SCREEN ANIMATION WITH LIGHT BLUR MAIN PAGE
           ========================================================= */
        html.intro-active, 
        body.intro-active {
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            width: 100% !important;
            height: 100% !important;
        }

        /* Efek Blur Ringan pada Halaman Utama saat Intro Berlangsung */
        html.intro-active header,
        html.intro-active main,
        html.intro-active footer,
        html.intro-active #floating-widget {
            filter: blur(5px) brightness(0.50);
            transition: filter 0.8s ease;
            will-change: filter;
        }

        /* Splash Screen / Intro Full Screen Rapat (Background Transparan/Glass) */
        #intro-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            z-index: 999999;
            background: rgba(10, 28, 56, 0.55);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #intro-screen.fade-out {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Keyframe Zoom-In Halus Tanpa Blur */
        @keyframes zoomInFromInside {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            65% {
                opacity: 0.95;
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 1. Animasi Logo Kemenag Muncul Dari Dalam (Memperjelas ukuran) */
        .intro-logo {
            opacity: 0;
            transform: scale(0);
            animation: zoomInFromInside 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
        }

        /* 2. Tulisan SiWALAN Langsung Menyusul */
        .intro-title {
            opacity: 0;
            transform: scale(0);
            font-family: 'Cormorant Garamond', serif !important;
            font-weight: 700;
            letter-spacing: 0.08em;
            animation: zoomInFromInside 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 1s;
        }

        /* 3. Garis Kuning-Orange Menyapu Ketiga */
        .intro-line-container {
            width: 240px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            overflow: hidden;
            position: relative;
            margin-top: 20px;
            opacity: 0;
            animation: fadeInLineContainer 0.3s ease forwards 1s;
        }

        @keyframes fadeInLineContainer {
            to { opacity: 1; }
        }

        .intro-line {
            width: 0%;
            height: 4%;
            background: linear-gradient(90deg, #f59e0b, #ea580c, #fbbf24);
            border-radius: 999px;
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.9);
            animation: sweepFromLeft 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.5s;
        }

        @keyframes sweepFromLeft {
            0% {
                width: 0%;
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            80% {
                width: 100%;
                opacity: 1;
            }
            100% {
                width: 100%;
                opacity: 0;
            }
        }

        /* Modal Glassmorphism */
        .glass-modal {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(8px);
        }