/*
 * ==========================================
 * File CSS: Edukasi Event
 * ------------------------------------------
 * File ini mengatur gaya (styling) khusus untuk halaman Edukasi Event.
 * Pastikan untuk menjaga hierarki spesifisitas agar tidak bentrok dengan layout utama.
 * ==========================================
 */



.home-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.blob { position: absolute; filter: blur(80px); animation: floatBlob 12s infinite alternate ease-in-out; opacity: 0.5; }
.blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; max-width: 60vw; max-height: 60vw; background: #19AEDD; border-radius: 50%; }
.blob-2 { bottom: -10%; right: -10%; width: 600px; height: 600px; max-width: 70vw; max-height: 70vw; background: #19DDAA; border-radius: 50%; animation-delay: -6s; }
@keyframes floatBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }

.fade-up { animation: fadeUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; opacity: 0; }
.delay-1 { animation-delay: 0.2s; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-hover-ghost {
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent !important;
}
.btn-hover-ghost:hover {
    background-color: transparent !important;
    color: #19AEDD !important;
    border-color: #19AEDD !important;
}

.animate-pulse {
    animation: pulse-shadow 2s infinite;
    background-color: #19AEDD;
    border-color: #19AEDD;
}
.animate-pulse:hover {
    background-color: #148cb2;
    transform: scale(1.05);
}
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(25, 174, 221, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(25, 174, 221, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 174, 221, 0); }
}

.custom-scrollbar::-webkit-scrollbar {
    display: none;
}
.custom-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.event-carousel {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
    .event-carousel::-webkit-scrollbar { display: none; }
    .event-carousel {
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-bottom: 0.5rem;

        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);

        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }
}

.event-card-wrapper {
    flex: 0 0 85%;
    max-width: 350px;
}

@media (min-width: 768px) {
    .event-card-wrapper {
        flex: 0 0 42%;
        max-width: 400px;
    }
    .event-carousel {
        -ms-overflow-style: auto;
        padding-bottom: 1.5rem; 
    }
    @supports (-moz-appearance:none) {
        .event-carousel {
            scrollbar-width: auto;
            scrollbar-color: #19AEDD transparent;
        }
    }
    .event-carousel::-webkit-scrollbar {
        display: block;
        height: 12px;
    }
    .event-carousel::-webkit-scrollbar-track {
        background-color: #ffffff;
        border-radius: 100px;
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
        margin: 0 20vw;
    }
    .event-carousel::-webkit-scrollbar-thumb {
        background-image: linear-gradient(90deg, #7CF0E2, #19AEDD, #194CDD);
        border-radius: 100px;
        border: 3px solid #ffffff;
        background-clip: padding-box;
    }
    .event-carousel::-webkit-scrollbar-thumb:hover {
        border-width: 2px;
    }
}

@media (min-width: 1200px) {
    .event-card-wrapper {
        flex: 0 0 30%;
        max-width: 400px;
    }
    .event-carousel::-webkit-scrollbar-track {
        margin: 0 30vw;
    }
}