/* =========================================================
   APIKH - Elegant Purple Breathing Glow Card
   ========================================================= */

.apikh-card-glow {
    position: relative;
    z-index: 0;

    background: #ffffff;
    border: 1px solid rgba(91, 76, 180, 0.12);
    border-radius: 8px;

    /*
     * Shadow normal card
     */
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.035);

    /*
     * Animasi glow
     */
    animation: apikhCardBreathing 8.5s ease-in-out infinite;

    transition:
        transform 2.3s ease;
}


/* =========================================================
   BREATHING PURPLE GLOW
   ========================================================= */

@keyframes apikhCardBreathing {

    0%,
    100% {

        box-shadow:

            /* shadow normal */
            0 5px 15px rgba(0, 0, 0, 0.035),

            /* glow ungu lembut */
            0 18px 30px -18px rgba(99, 76, 255, 0.45),

            /* glow lebih jauh */
            0 30px 55px -25px rgba(99, 76, 255, 0.25);
    }


    50% {

        box-shadow:

            /* shadow normal */
            0 5px 15px rgba(0, 0, 0, 0.035),

            /* glow membesar */
            0 22px 38px -14px rgba(99, 76, 255, 0.75),

            /* cahaya menyebar */
            0 38px 65px -20px rgba(99, 76, 255, 0.40);
    }

}


/* =========================================================
   HOVER
   ========================================================= */

.apikh-card-glow:hover {

    transform: translateY(-3px);

    animation-duration: 8.5s;
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .apikh-card-glow {

        animation: none;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.035),
            0 22px 38px -14px rgba(99, 76, 255, 0.55),
            0 38px 65px -20px rgba(99, 76, 255, 0.25);
    }

}

/* =========================================================
   APIKH CARD - 3D BACK GLOW
   Glow berada DI BELAKANG CARD
   ========================================================= */

.apikh-card-glow-wrap {

    position: relative;

    z-index: 1;

    /*
     * Jangan hidden!
     * Glow harus boleh keluar dari wrapper.
     */
    overflow: visible;
}


/* =========================================================
   CARD UTAMA
   ========================================================= */

.apikh-card-glow-wrap .apikh-card {

    position: relative;

    z-index: 2;

    background: #ffffff;

    border: 1px solid rgba(90, 70, 220, 0.12);

    border-radius: 10px;

    /*
     * Shadow card
     */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.04);

}


/* =========================================================
   GLOW DI BELAKANG CARD
   ========================================================= */

.apikh-card-glow-wrap::before {

    content: "";

    position: absolute;

    z-index: 0;

    /*
     * Glow sedikit lebih besar
     * daripada card
     */
    top: 4px;
    left: 3px;
    right: 3px;
    bottom: -4px;

    border-radius: 13px;

    /*
     * CAHAYA UTAMA
     *
     * Paling terang di bawah tengah
     * lalu menyebar ke kiri dan kanan
     */
    background:
        radial-gradient(
            ellipse 75% 55% at 50% 100%,
            rgba(99, 76, 255, 0.75) 0%,
            rgba(99, 76, 255, 0.45) 30%,
            rgba(99, 76, 255, 0.18) 55%,
            rgba(99, 76, 255, 0) 78%
        );

    /*
     * Cahaya keluar dari belakang
     */
    filter: blur(16px);

    opacity: 0.9;

    pointer-events: none;
}


/* =========================================================
   GLOW LEMBUT KEDUA
   Untuk memberikan depth / 3D
   ========================================================= */

.apikh-card-glow-wrap::after {

    content: "";

    position: absolute;

    z-index: 0;

    top: 10px;
    left: 10px;
    right: 10px;
    bottom: -8px;

    border-radius: 14px;

    background:
        radial-gradient(
            ellipse 65% 45% at 50% 100%,
            rgba(99, 76, 255, 0.40) 0%,
            rgba(99, 76, 255, 0.18) 45%,
            rgba(99, 76, 255, 0) 75%
        );

    filter: blur(28px);

    opacity: 0.65;

    pointer-events: none;
}

/* =========================================================
   WARNA GLOW
   ========================================================= */

.apikh-glow-purple {
    --glow-rgb: 99, 76, 255;
}

.apikh-glow-blue {
    --glow-rgb: 54, 112, 255;
}

.apikh-glow-green {
    --glow-rgb: 38, 180, 110;
}

.apikh-glow-orange {
    --glow-rgb: 245, 150, 55;
}

.apikh-glow-red {
    --glow-rgb: 235, 75, 85;
}

.apikh-glow-cyan {
    --glow-rgb: 30, 180, 210;
}