/* ============================================ */
/* ANIMATED CUSTOM CURSOR STYLES - FIXED FOR HOSTING */
/* ============================================ */

/* Cursor utama - lingkaran besar */
.cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(43, 122, 98, 0.15);
    border: 2px solid #2b7a62;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.1s ease, width 0.2s, height 0.2s, background 0.2s;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}

/* Cursor dot - titik kecil di tengah */
.cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #e9b35f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transition: transform 0.05s ease;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(233, 179, 95, 0.6);
    top: 0;
    left: 0;
}

/* Trail effect - ekor cursor */
.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    background: rgba(43, 122, 98, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    top: 0;
    left: 0;
}

/* Efek hover pada link/button */
.cursor-grow {
    transform: translate(-50%, -50%) scale(1.8) !important;
    background: rgba(233, 179, 95, 0.25) !important;
    border-color: #e9b35f !important;
}

/* Efek klik */
.cursor-click {
    transform: translate(-50%, -50%) scale(0.6) !important;
    background: rgba(43, 122, 98, 0.4) !important;
    transition: transform 0.05s ease;
}

/* Efek saat di atas teks */
.cursor-text {
    width: 24px !important;
    height: 24px !important;
    background: rgba(43, 122, 98, 0.2) !important;
    border-color: #1e3a5f !important;
}

/* Ripple effect */
.ripple {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 122, 98, 0.3) 0%, rgba(233, 179, 95, 0.1) 100%);
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleAnim 0.6s ease-out forwards;
}

@keyframes rippleAnim {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Glow effect */
.cursor-glow {
    position: fixed;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 122, 98, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 99996;
    transform: translate(-50%, -50%);
    transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    top: 0;
    left: 0;
}

/* Sembunyikan di mobile */
@media (max-width: 768px) {
    .cursor, .cursor-dot, .cursor-trail, .cursor-glow, .ripple {
        display: none !important;
    }
    * {
        cursor: auto !important;
    }
}