/* Base wrapper - default wrap mode */
.fms-wrapper{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    /* Performance optimization */
    contain:layout style;
}

/* Slider mode - horizontal drag & slide */
.fms-wrapper.slider-mode{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    /* Hide scrollbar */
    scrollbar-width:none;
    -ms-overflow-style:none;
    user-select:none;
    /* GPU acceleration */
    will-change:scroll-position;
    transform:translateZ(0);
    /* Performance optimization */
    contain:layout style paint;
}

/* Hide scrollbar untuk Chrome/Safari */
.fms-wrapper.slider-mode::-webkit-scrollbar{
    display:none;
}

/* Visual feedback saat drag */
.fms-wrapper.slider-mode.dragging{
    scroll-behavior:auto;
}

.fms-wrapper.slider-mode.dragging .fms-item{
    pointer-events:none;
}

/* Menu items */
.fms-item{
    width:140px;
    height:140px;
    position:relative;
    overflow:hidden;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    /* Performance optimization */
    contain:layout style paint;
}

.fms-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
    will-change:transform;
    backface-visibility:hidden;
    /* Image optimization */
    image-rendering:auto;
}

.fms-item span{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.5);
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    max-width:90%;
    overflow:hidden;
    text-overflow:ellipsis;
    /* Text rendering optimization */
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

.text-bottom span{bottom:8px}
.text-center span{top:50%;transform:translate(-50%,-50%)}

.hover .fms-item:hover img{transform:scale(1.1)}
.overlay .fms-item:after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.4);
    opacity:0;
    transition:.3s;
    pointer-events:none;
}
.overlay .fms-item:hover:after{opacity:1}

.fms-circle .fms-item{border-radius:50%}
.fms-square .fms-item{border-radius:12px}

/* Border yang lebih halus */
.border-border .fms-item{
    border:2px solid rgba(255,255,255,.3);
    box-sizing:border-box;
}
.border-shadow .fms-item{
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* Kombinasi border dan shadow */
.border-border.border-shadow .fms-item{
    border:2px solid rgba(255,255,255,.25);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.icon span{display:none}
.text img{display:none}

/* Background colors dengan gradient */
.green .fms-item{background:linear-gradient(135deg, #1f7f50 0%, #196b44 100%)}
.blue .fms-item{background:linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%)}
.gray .fms-item{background:linear-gradient(135deg, #6c757d 0%, #5a6268 100%)}

/* Hover effects dengan GPU acceleration */
.fms-item{
    transition:transform .3s ease, box-shadow .3s ease;
    will-change:transform;
    backface-visibility:hidden;
}
.hover .fms-item:hover{
    transform:translateY(-4px) translateZ(0);
}
.hover.border-shadow .fms-item:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.3);
}

/* Focus state untuk accessibility */
.fms-item:focus{
    outline:2px solid #2271b1;
    outline-offset:2px;
}

/* Container untuk slider mode */
.fms-slider-container{
    position:relative;
}

/* Responsive design */
@media (max-width: 768px) {
    .fms-wrapper{gap:12px}
    .fms-item{width:100px;height:100px}
    .fms-item span{font-size:11px;padding:4px 8px}
}

@media (max-width: 480px) {
    .fms-wrapper{gap:8px}
    .fms-item{width:80px;height:80px}
    .fms-item span{font-size:10px;padding:3px 6px}
}

/* Responsive slider mode */
@media (max-width: 768px) {
    .fms-wrapper.slider-mode .fms-item{width:100px;height:100px}
}

@media (max-width: 480px) {
    .fms-wrapper.slider-mode .fms-item{width:80px;height:80px}
}

/* Reduced motion untuk accessibility */
@media (prefers-reduced-motion: reduce) {
    .fms-wrapper.slider-mode{
        scroll-behavior:auto;
    }
    .fms-item,
    .fms-item img,
    .overlay .fms-item:after{
        transition:none;
    }
}

/* Print optimization */
@media print {
    .fms-wrapper.slider-mode{
        overflow:visible;
        flex-wrap:wrap;
    }
}