/* ======================================================
   KURSOR WHITEBOARD
   ====================================================== */

.area-slide {
    position: relative;
}


/* ======================================================
   YELLOW SPOTLIGHT
   ====================================================== */

#yellowSpotlight {
    position: absolute;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(255, 221, 0, 0.45);

    border: 2px solid rgba(255, 210, 0, 0.9);

    box-shadow:
        0 0 8px rgba(255, 220, 0, 0.8),
        0 0 20px rgba(255, 220, 0, 0.5);

    pointer-events: none;

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

    opacity: 0;

    z-index: 9999;

    transition:
        opacity 0.15s ease,
        width 0.12s ease,
        height 0.12s ease;
}


/* ======================================================
   AKTIF
   ====================================================== */

#yellowSpotlight.aktif {
    opacity: 1;
}


/* ======================================================
   KLIK
   ====================================================== */

#yellowSpotlight.klik {
    width: 48px;
    height: 48px;
}