/**
 * Floating Sidebar Styles
 * Side homepage links dengan icon mengambang di sisi kiri
 */

/* ===== FLOATING SIDEBAR CONTAINER ===== */
.floating-sidebar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    transition: all 0.3s ease;
}

.sidebar-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===== SIDEBAR LINK STYLES ===== */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 0 50px 50px 0;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 2px;
}

.sidebar-link:hover {
    width: 180px;
    box-shadow: 3px 0 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* ===== SIDEBAR ICON ===== */
.sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 70px;
    font-size: 24px;
    transition: all 0.3s ease;
}

.sidebar-link:hover .sidebar-icon {
    transform: scale(1.1);
}

/* ===== SIDEBAR LABEL ===== */
.sidebar-label {
    position: absolute;
    left: 70px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    padding-right: 15px;
}

.sidebar-link:hover .sidebar-label {
    opacity: 1;
    transform: translateX(0);
}

/* ===== COLOR VARIATIONS ===== */

/* Emergency Link - Red */
.emergency-link {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.emergency-link .sidebar-icon {
    color: #ffffff;
}

.emergency-link .sidebar-label {
    color: #ffffff;
}

.emergency-link:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
}

/* Registration Link - Blue */
.registration-link {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
}

.registration-link .sidebar-icon {
    color: #ffffff;
}

.registration-link .sidebar-label {
    color: #ffffff;
}

.registration-link:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
}

/* Services Link - Green */
.services-link {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.services-link .sidebar-icon {
    color: #ffffff;
}

.services-link .sidebar-label {
    color: #ffffff;
}

.services-link:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
}

/* Contact Link - Orange */
.contact-link {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
}

.contact-link .sidebar-icon {
    color: #ffffff;
}

.contact-link .sidebar-label {
    color: #ffffff;
}

.contact-link:hover {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* BUG FIX #5: body:hover tidak bekerja di touchscreen.
   Sembunyikan sidebar total di tablet & mobile (≤991px).
   Hanya tampil di desktop (≥992px). */
@media (max-width: 991px) {
    .floating-sidebar {
        display: none !important;
    }
}

/* ===== ANIMATION ===== */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }

    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

.floating-sidebar {
    animation: slideInLeft 0.6s ease-out 1s both;
}

/* ===== PRINT STYLES ===== */
@media print {
    .floating-sidebar {
        display: none !important;
    }
}

/* ===== ACCESSIBILITY ===== */
.sidebar-link:focus {
    outline: 3px solid rgba(14, 165, 233, 0.5);
    outline-offset: 2px;
}

.sidebar-link:focus:not(:focus-visible) {
    outline: none;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {

    .floating-sidebar,
    .sidebar-link,
    .sidebar-icon,
    .sidebar-label {
        animation: none !important;
        transition: none !important;
    }
}