<style>
    /* Floating Elements */
    .floating-spmb {
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,165,0,0.15));
        filter: blur(50px);
        z-index: 1;
        animation: floatSpmb 15s ease-in-out infinite;
    }

    .spmb-float-1 {
        width: 500px;
        height: 500px;
        top: -200px;
        right: -200px;
        animation-delay: 0s;
    }

    .spmb-float-2 {
        width: 400px;
        height: 400px;
        bottom: -150px;
        left: -150px;
        animation-delay: -5s;
        background: rgba(255,215,0,0.2);
    }

    .spmb-float-3 {
        width: 300px;
        height: 300px;
        top: 40%;
        left: 30%;
        animation-delay: -10s;
        background: rgba(255,165,0,0.2);
        filter: blur(70px);
    }

    @keyframes floatSpmb {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        25% {
            transform: translate(30px, -30px) scale(1.1);
        }
        50% {
            transform: translate(0, -50px) scale(1.2);
        }
        75% {
            transform: translate(-30px, -20px) scale(1.1);
        }
    }

    /* Jenjang Cards */
    .jenjang-card {
        transition: all 0.4s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .jenjang-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.1));
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .jenjang-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 30px 40px rgba(0,0,0,0.5);
        border-color: rgba(255,215,0,0.4) !important;
    }

    .jenjang-card:hover::before {
        opacity: 1;
    }

    .jenjang-icon {
        transition: all 0.4s ease;
    }

    .jenjang-card:hover .jenjang-icon {
        transform: scale(1.15) rotate(5deg);
        background: rgba(255,215,0,0.25) !important;
        border-color: #FFD700 !important;
    }

    /* Timeline Premium */
    .timeline-item-premium {
        position: relative;
    }

    .timeline-dot-premium {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        transition: all 0.4s ease;
    }

    .timeline-item-premium:hover .timeline-dot-premium {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(255,215,0,0.4) !important;
    }

    .timeline-line-premium {
        position: absolute;
        left: 19px;
        top: 40px;
        width: 2px;
        height: calc(100% - 20px);
        background: linear-gradient(180deg, #FFD700, #FFA500);
        opacity: 0.3;
        z-index: 1;
    }

    .timeline-item-premium:last-child .timeline-line-premium {
        display: none;
    }

    .timeline-content-premium {
        padding-bottom: 1.5rem;
        transition: all 0.3s ease;
    }

    .timeline-item-premium:hover .timeline-content-premium {
        transform: translateX(5px);
    }

    /* CTA Buttons */
    .btn-cta-premium {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .btn-cta-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.6s ease;
        z-index: -1;
    }

    .btn-cta-premium:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 30px rgba(255,215,0,0.4) !important;
    }

    .btn-cta-premium:hover::before {
        left: 100%;
    }

    .btn-cta-premium-outline:hover {
        background: rgba(255,215,0,0.15) !important;
        border-color: #FFD700 !important;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    /* Deadline Pulse */
    .deadline-pulse {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: deadlinePulse 1.8s ease-in-out infinite;
    }

    @keyframes deadlinePulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.6);
            opacity: 0.6;
        }
    }

    /* Badge Status */
    .badge-status {
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        font-size: 0.9rem;
    }

    .jenjang-card:hover .badge-status {
        transform: scale(1.05);
        background: rgba(255,215,0,0.25) !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .display-5 {
            font-size: 2rem;
        }
        
        .jenjang-card {
            padding: 1.25rem !important;
        }
        
        .jenjang-icon {
            width: 50px !important;
            height: 50px !important;
        }
        
        .jenjang-icon span {
            font-size: 2rem !important;
        }
        
        .jadwal-card {
            padding: 1.5rem !important;
        }
        
        .timeline-dot-premium {
            width: 35px;
            height: 35px;
        }
        
        .timeline-line-premium {
            left: 17px;
        }
    }

    /* AOS Animation */
    [data-aos="fade-right"] {
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    [data-aos="fade-left"] {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    [data-aos].aos-animate {
        opacity: 1;
        transform: translateX(0);
    }
</style>