/* Sidebar Styling */
#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    /* Changed from 100px to 0 to remove gap */
    transform: translate(-15%, -50%) translate(0px, 0.2px);
    background-color: transparent;
    padding: 1rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5rem;
    height: 100vh;
    justify-content: center;
}

/* Sidebar items */
.sidebar-item {
    position: relative;
    /* Parent needs to be relative for .sidebar-dot to position itself */
    color: #2E8B57;
    /* Green text color */
    font-size: 28px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    padding-right: 25px;
    /* Space for the dot */
    will-change: transform;
}


.sidebar-text {
    transition: transform 0.3s ease;
    /* Only animate the parent */
}

/* Hover effect - move to left */
.sidebar-text:hover {
    transform: translateX(-10px);
    /* Move parent to the left */
}

/* Dot styling */
.sidebar-dot {
    opacity: 0;
    /* Sembunyikan dot dengan opacity */
    visibility: hidden;
    /* Sembunyikan dengan visibility */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #2E8B57;
    /* Green color for the dot */
    position: absolute;
    right: -22px;
    /* Positioned outside the parent */
    pointer-events: none;
    /* Dot is not interactive */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    /* Transisi opacity dan visibility */
}

/* Show dot only for active item */
.sidebar-item.active .sidebar-dot {
    opacity: 1;
    /* Membuat dot terlihat */
    visibility: visible;
    /* Ubah visibility menjadi visible */
    transition: opacity 0.3s ease, visibility 0s 0s;
    /* Transisi hanya untuk opacity */
}


/* Prevent dot from moving when parent is hovered */
.sidebar-item:hover .sidebar-dot {
    transform: none;
    /* Ensure the dot stays in place */
    transition: none;
    /* Prevent additional animation */
}

/* Show dot only for active item */
.sidebar-item.active .sidebar-dot {
    display: block;
}

/* Vertical line next to the sidebar */
#sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    background-color: #2E8B57;
    /* Green vertical line */
}



@media (max-width: 768px) {
    #sidebar {
        display: none;
        /* Hide sidebar on small screens */
    }
}

/* Transisi */
#sidebar {
    opacity: 0;
    /* Mulai dengan opacity 0 */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s, transform 0.5s ease;
}