/* =========================
   FLUENT IMAGE SLIDER
========================= */

.fluent-image-slider {
    position: relative;
    width: 100%;

    height: var(--slider-height, 380px);

    overflow: hidden;

    background: var(--ms-color-bg-success-subtle);
}

/* =========================
   TRACK (UPDATED)
========================= */

.fluent-image-slider__track {
    position: relative;
    height: 100%;
}

/* =========================
   SLIDE (UPDATED: FADE + SLIDE)
========================= */

.fluent-image-slider__slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    transform: translateX(20px) scale(1.02);

    transition:
        opacity 500ms var(--ms-ease-standard),
        transform 500ms var(--ms-ease-standard);

    z-index: 0;
}

/* ACTIVE */
.fluent-image-slider__slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 1;
}

/* OVERLAY GRADIENT (TETAP) */
.fluent-image-slider__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--ms-color-overlay) 0%,
        var(--ms-color-overlay-strong) 40%,
        rgba(0,0,0,0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* =========================
   CONTENT OVERLAY
========================= */

.fluent-image-slider__content {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--ms-color-text-inverse);
    z-index: 2;
    pointer-events: none;
    padding: var(--ms-space-6xl);
}

/* =========================
   TYPOGRAPHY
========================= */

.fluent-image-slider__content h1 {
    margin: 0 0 var(--ms-space-sm);
    font-size: var(--ms-font-size-xxl);
    font-weight: var(--ms-font-weight-bold);
}

.fluent-image-slider__content p {
    margin: 0;
    font-size: var(--ms-font-size-h2);
    color: rgba(255,255,255,0.85);
}

/* IMAGE */
.fluent-image-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   EMPTY STATE
========================= */

.fluent-image-slider__empty {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-body);

    background: var(--ms-color-bg-subtle);
}

/* =========================
   NAVIGATION
========================= */

.fluent-image-slider__nav {
    position: absolute;
    bottom: 40%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    z-index: 10;

    border-radius: var(--ms-radius-pill);
    border: var(--ms-space-2xs) solid var(--ms-color-border-default);

    background: var(--ms-color-overlay-strong);
    color: var(--ms-color-text-inverse);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: all var(--ms-motion-fast);
}

.fluent-image-slider__nav:hover {
    background: var(--ms-color-scrim);
}

.fluent-image-slider__nav--prev {
    left: var(--ms-space-md);
}

.fluent-image-slider__nav--next {
    right: var(--ms-space-md);
}

/* =========================
   DOTS
========================= */

.fluent-image-slider__dots {
    position: absolute;
    bottom: var(--ms-space-md);
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);

    display: flex;
    gap: var(--ms-space-xs);
}

.fluent-image-slider__dot {
    width: 8px;
    height: 8px;

    border-radius: var(--ms-radius-pill);

    background: var(--ms-color-neutral-400);
    cursor: pointer;

    transition: all var(--ms-motion-fast);
}

.fluent-image-slider__dot.is-active {
    background: var(--ms-color-primary);
    width: 18px;
}

/* =========================
   CONTENT ANIMATION
========================= */

.fluent-image-slider__content {
    opacity: 0;
    transform: translateY(20px);

    transition: 
        opacity var(--ms-motion-base) var(--ms-ease),
        transform var(--ms-motion-base) var(--ms-ease);
}

.fluent-image-slider__slide.is-active .fluent-image-slider__content {
    opacity: 1;
    transform: translateY(0);
}

/* STAGGER */
.fluent-image-slider__content > * {
    opacity: 0;
    transform: translateY(10px);
    transition: 
        opacity var(--ms-motion-base) var(--ms-ease),
        transform var(--ms-motion-base) var(--ms-ease);
}

.fluent-image-slider__slide.is-active .fluent-image-slider__content > * {
    opacity: 1;
    transform: translateY(0);
}

.fluent-image-slider__slide.is-active .fluent-image-slider__content > *:nth-child(1) {
    transition-delay: 80ms;
}
.fluent-image-slider__slide.is-active .fluent-image-slider__content > *:nth-child(2) {
    transition-delay: 140ms;
}
.fluent-image-slider__slide.is-active .fluent-image-slider__content > *:nth-child(3) {
    transition-delay: 200ms;
}