/* Hilangkan cursor bawaan */
body{
    cursor:none;
}

/* Titik tengah */
.cursor-dot{
    position:fixed;
    width:8px;
    height:8px;

    background:#fd6c9c;
    border-radius:50%;

    pointer-events:none;
    z-index:99999;

    transform:translate(-50%,-50%);
}

/* Lingkaran luar */
.cursor-outline{
    position:fixed;

    width:38px;
    height:38px;

    border:2px solid rgba(253,108,156,.8);
    border-radius:50%;

    pointer-events:none;
    z-index:99998;

    transform:translate(-50%,-50%);

    transition:
        width .25s ease,
        height .25s ease,
        border-color .25s ease,
        background .25s ease;
}

/* Hover di button/link */
.cursor-hover{
    width:58px !important;
    height:58px !important;

    background:rgba(253,108,156,.12);

    border-color:#fd6c9c;

    box-shadow:
        0 0 15px rgba(216,27,96,.45),
        0 0 35px rgba(253,108,156,.25);
}

.spark{
    position: fixed;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 999999;

    background: #ffffff;

    box-shadow:
        0 0 6px #fff,
        0 0 12px #fd6c9c,
        0 0 20px #d81b60;

    animation: sparkle .8s linear forwards;
}

@keyframes sparkle{

    0%{
        opacity:1;
        transform:scale(1);
    }

    100%{
        opacity:0;
        transform:
            translateY(-20px)
            scale(0);
    }

}