@keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }

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

        @keyframes slideInLeft {
            from {
                transform: translateX(-30px);
                opacity: 0;
            }

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

        @keyframes slideInRight {
            from {
                transform: translateX(30px);
                opacity: 0;
            }

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

        @keyframes float {

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

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

        .hero-gradient {
            background: linear-gradient(to top, #175AF2 0%, #6920D9 100%);
        }

        .media-gradient {
            background: linear-gradient(to bottom, #6920D9 2%, #175AF2 100%);
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .default_content span, 
        .default_content p {
            margin-bottom: 20px;
        }

        .gradient-c1{
            background: linear-gradient(to bottom, #4e1eaf, #1943c0);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .add-background-leaf:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../images/add-background-leaf.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            z-index: 2;
        }


        .bg_articles_home{
            background: url('../images/bg-article-home.jpg');
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .hm-gradient-c2{
            background: linear-gradient(to top, #175AF2 2%, #6920D9 100%);
            z-index: 1;
        }
        .hm-gradient-c2:after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 15%;
            background-color: #fff;
            z-index: 2;
        }
        .customs-shadow:before{
            box-sizing: border-box;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 25%;
            z-index: 2;
            background: linear-gradient(180deg, rgba(23, 90, 242, 0) 0%, #6920D9 132.81%);
            border-radius: 0px 0px 12px 12px;
        }

        .head_home{
            height: auto;
        }
        .head_home .hero-gradient{
            background: transparent;
            z-index: 1;
        }

        .bg-gradient-customsQuestion{
            background: linear-gradient(to bottom, #6920D9 2%, #175AF2 100%);
        }
        
        .customAffixHeader{
            background: linear-gradient(to top, rgba(23, 90, 242, 0.9) 2%, rgba(105, 32, 217, 0.9) 100%) !important;
        }

        @media (max-width: 768px) {
            .head_home{
                height: auto;
            }
        }

        /* Vanilla JS Slider Styles */
        .slider-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .slider-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            /* Smooth crossfade */
            transition: opacity 0.9s ease;
            transform: none;
            will-change: opacity;
            z-index: 0;
        }

        .slide.active {
            opacity: 1;
            transform: none;
            z-index: 1;
        }

        /* Optional directional classes can be added if needed later */

        .slider-nav {
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .slider-nav:hover {
            transform: translateY(-50%) scale(1.1);
        }

        .slider-caption {
            position: absolute;
            left: 0 !important;
            right: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
            text-align: center !important;
        }

        .slider-dots {
            position: absolute;
            left: 0 !important;
            right: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }

        .slider-dots .dot.active {
            background-color: white !important;
            transform: scale(1.2);
        }

        .slider-dots .dot {
            cursor: pointer;
        }

        /* Fade transition alternative */
        .slider-container.fade .slide {
            transform: none;
        }

        .slider-container.fade .slide.active {
            transform: none;
        }

        /* Touch/Swipe support styles */
        .slider-wrapper.dragging {
            cursor: grabbing;
        }

        .slider-wrapper.dragging .slide {
            transition: none;
        }

        /* Hide browser default password reveal and clear buttons (Edge / IE) */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
        }

        /* Disable Microsoft Edge Visual Search hover icon on images */
        img {
            pointer-events: none;
            -webkit-user-drag: none;
            user-select: none;
        }

        /* Ensure parent links remain clickable */
        a:has(img), a img {
            cursor: pointer;
        }

        /* ==========================================================================
           MOBILE ONLY (max-width: 1024px) - DARK MODE IMMUNITY FIX
           Prevents mobile browsers (Chrome Android, Samsung Internet, iOS Safari)
           from algorithmically inverting or force-darkening colors.
           Desktop version is 100% untouched and unaltered.
           ========================================================================== */
        :root {
            color-scheme: only light;
            supported-color-schemes: light;
        }

        @media (max-width: 1024px) {
            :root, html, body {
                color-scheme: only light !important;
                forced-color-adjust: none !important;
                -webkit-text-size-adjust: 100%;
            }

            /* 1. Header & Footer Brand Backgrounds & Logos on Mobile */
            .bg-home-section1, .head_home, .hero-header-main,
            header.hero-header-main, header[style*="6324db"], [style*="background-color: #6324db"] {
                background-color: #6324db !important;
            }
            header a img[src*="logo-header"] {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                filter: none !important;
            }
            footer.media-gradient, #kontak.media-gradient {
                background: linear-gradient(to bottom, #6920D9 2%, #175AF2 100%) !important;
            }
            footer img[src*="logo-footer"] {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                filter: none !important;
            }

            /* 2. Footer Social Icons & Streaming Logos on Mobile (Never Turn Solid White) */
            footer .w-10.h-10[class*="bg-white"],
            footer a[class*="bg-white/20"],
            footer a[class*="bg-white\/20"] {
                background-color: rgba(255, 255, 255, 0.20) !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            footer a[class*="bg-white/20"]:hover,
            footer a[class*="bg-white\/20"]:hover {
                background-color: rgba(255, 255, 255, 0.32) !important;
            }
            footer a img,
            footer a img[src*="spotify"],
            footer a img[src*="music"],
            footer a img[src*="ytbmusic"],
            footer a img[src*="listbkk"] {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                max-width: 22px !important;
                max-height: 22px !important;
                object-fit: contain !important;
            }
            footer a i.fab, footer a i.fas {
                color: #ffffff !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* 3. Translucent Glass Overlays on Purple/Gradient Cards (Do NOT Force Solid White) */
            [class*="bg-white/5"],   [class*="bg-white\/5"]   { background-color: rgba(255, 255, 255, 0.05) !important; }
            [class*="bg-white/10"],  [class*="bg-white\/10"]  { background-color: rgba(255, 255, 255, 0.12) !important; }
            [class*="bg-white/15"],  [class*="bg-white\/15"]  { background-color: rgba(255, 255, 255, 0.18) !important; }
            [class*="bg-white/20"],  [class*="bg-white\/20"]  { background-color: rgba(255, 255, 255, 0.20) !important; }
            [class*="bg-white/25"],  [class*="bg-white\/25"]  { background-color: rgba(255, 255, 255, 0.25) !important; }
            [class*="bg-white/30"],  [class*="bg-white\/30"]  { background-color: rgba(255, 255, 255, 0.30) !important; }

            /* 4. Fix Text Readability in Member Dashboard Stat Boxes on Mobile */
            .grid [class*="bg-white/10"],
            .grid [class*="bg-white\/10"] {
                background-color: rgba(255, 255, 255, 0.14) !important;
                border: 1px solid rgba(255, 255, 255, 0.22) !important;
            }
            .grid [class*="bg-white/10"] .text-purple-200,
            .grid [class*="bg-white\/10"] .text-purple-200 {
                color: #f3e8ff !important;
                font-weight: 500 !important;
            }
            .grid [class*="bg-white/10"] .text-white,
            .grid [class*="bg-white\/10"] .text-white {
                color: #ffffff !important;
                font-weight: 700 !important;
            }
            .grid [class*="bg-white/10"] .text-emerald-300,
            .grid [class*="bg-white\/10"] .text-emerald-300 {
                color: #6ee7b7 !important;
                font-weight: 700 !important;
            }

            /* 5. Fix Contact Page Anti-Spam Captcha Box & Form on Mobile */
            #contactForm [class*="bg-white/10"],
            #contactForm [class*="bg-white\/10"] {
                background-color: rgba(255, 255, 255, 0.14) !important;
                border: 1px solid rgba(255, 255, 255, 0.25) !important;
                color: #ffffff !important;
            }
            #contactForm [class*="bg-white/10"] p,
            #contactForm [class*="bg-white\/10"] p,
            #contactForm [class*="bg-white/10"] span,
            #contactForm [class*="bg-white\/10"] span {
                color: #ffffff !important;
            }
            #contactForm [class*="bg-white/10"] .text-yellow-300,
            #contactForm [class*="bg-white\/10"] .text-yellow-300 {
                color: #fde047 !important;
            }
            #contactForm input:not([type="checkbox"]):not([type="radio"]),
            #contactForm textarea {
                background-color: rgba(255, 255, 255, 0.15) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
                border: 1px solid rgba(255, 255, 255, 0.28) !important;
            }
            #contactForm input::placeholder,
            #contactForm textarea::placeholder {
                color: rgba(243, 232, 255, 0.85) !important;
                -webkit-text-fill-color: rgba(243, 232, 255, 0.85) !important;
            }
            #contactForm input[name="captcha_code"] {
                background-color: rgba(255, 255, 255, 0.25) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
                border: 1px solid rgba(255, 255, 255, 0.40) !important;
            }

            /* 6. Event Detail Sidebar Card & Badges on Mobile */
            aside [class*="bg-white/15"],
            aside [class*="bg-white\/15"] {
                background-color: rgba(255, 255, 255, 0.18) !important;
            }
            aside .text-yellow-300 {
                color: #fde047 !important;
            }
            aside .text-white\/95 {
                color: #ffffff !important;
            }

            /* 7. Donasi Bank Account Box on Mobile */
            .border-purple-500 {
                border-color: #7c3aed !important;
                background-color: #f8fafc !important;
            }
            .border-purple-500 h3,
            .border-purple-500 .text-gray-900 {
                color: #0f172a !important;
                font-weight: 700 !important;
            }
            .border-purple-500 p,
            .border-purple-500 .text-gray-700 {
                color: #334155 !important;
            }

            /* 8. Solid White Content Cards & Legible Contrast on Mobile */
            main.bg-white,
            section.bg-white,
            .bg-white:not([class*="/"]):not([class*="hover:"]):not([class*="focus:"]) {
                background-color: #ffffff !important;
            }
            .bg-white .text-gray-900, .bg-white .text-gray-800,
            .bg-white .text-slate-900, .bg-white .text-slate-800 {
                color: #0f172a !important;
            }
            .bg-white .text-gray-700, .bg-white .text-slate-700 {
                color: #334155 !important;
            }
            .bg-white .text-gray-600, .bg-white .text-gray-500,
            .bg-white .text-slate-600, .bg-white .text-slate-500 {
                color: #475569 !important;
            }

            /* 9. Standard Inputs Outside of Contact Form */
            input:not([type="checkbox"]):not([type="radio"]):not(#contactForm input),
            select,
            textarea:not(#contactForm textarea) {
                background-color: #ffffff !important;
                color: #0f172a !important;
                -webkit-text-fill-color: #0f172a !important;
                border-color: #cbd5e1;
            }
        }