/* =========================================================
   SKT ANIMATED PROMOTION ENGINE
   Reusable untuk homepage dan modul SKT lainnya.
========================================================= */

.animated-promo{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    isolation:isolate;
    background:#e2e8f0;
}

.animated-promo .promo-slide{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0;
    pointer-events:none;
    transition:opacity 500ms ease;
}

.animated-promo .promo-slide.is-active{
    z-index:2;
    opacity:1;
    pointer-events:auto;
}

.animated-promo .promo-slide-link,
.animated-promo .promo-slide-static{
    display:block;
    width:100%;
    height:100%;
}

.animated-promo .promo-slide-link{
    color:inherit;
    text-decoration:none;
}

.animated-promo .promo-slide img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1);
    will-change:transform;
}

.animated-promo .promo-slide.is-active[data-animate="1"] img{
    animation:promo-ken-burns 8s linear both;
}

.animated-promo .promo-slide[data-animate="1"]::after{
    content:"";
    position:absolute;
    inset:-30% auto -30% -45%;
    z-index:2;
    width:28%;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,.08) 30%,
        rgba(255,255,255,.42) 50%,
        rgba(255,255,255,.08) 70%,
        transparent 100%
    );
    transform:translate3d(0,0,0) skewX(-16deg);
}

.animated-promo .promo-slide.is-active[data-animate="1"]::after{
    animation:promo-shine 1100ms ease-out 350ms 1 both;
}

.animated-promo .promo-badge{
    position:absolute;
    z-index:3;
    right:14px;
    bottom:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:48px;
    padding:8px;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:12px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(15,23,42,.22);
}

.animated-promo .promo-slide.is-active[data-animate="1"] .promo-badge{
    animation:promo-badge-pulse 650ms ease-out 500ms 1 both;
}

.animated-promo .promo-control{
    position:absolute;
    top:50%;
    z-index:5;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;
    background:rgba(15,23,42,.55);
    color:#fff;
    font-size:22px;
    line-height:1;
    opacity:0;
    cursor:pointer;
    transform:translateY(-50%);
    transition:opacity 180ms ease, background-color 180ms ease;
    backdrop-filter:blur(5px);
}

.animated-promo .promo-control:hover,
.animated-promo .promo-control:focus-visible{
    background:rgba(15,23,42,.82);
}

.animated-promo:hover .promo-control,
.animated-promo:focus-within .promo-control{
    opacity:1;
}

.animated-promo .promo-control-prev{
    left:10px;
}

.animated-promo .promo-control-next{
    right:10px;
}

.animated-promo .promo-indicators{
    position:absolute;
    left:50%;
    bottom:10px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transform:translateX(-50%);
}

.animated-promo .promo-indicator{
    width:8px;
    height:8px;
    padding:0;
    border:1px solid rgba(255,255,255,.9);
    border-radius:999px;
    background:rgba(15,23,42,.28);
    cursor:pointer;
    transition:background-color 180ms ease, transform 180ms ease;
}

.animated-promo .promo-indicator.is-active{
    background:#fff;
    transform:scale(1.2);
}

.animated-promo[data-slide-count="1"] .promo-control,
.animated-promo[data-slide-count="1"] .promo-indicators{
    display:none;
}

@keyframes promo-ken-burns{
    from{ transform:scale(1.05); }
    to{ transform:scale(1); }
}

@keyframes promo-shine{
    0%{
        opacity:0;
        transform:translate3d(0,0,0) skewX(-16deg);
    }
    18%{ opacity:.75; }
    100%{
        opacity:0;
        transform:translate3d(520%,0,0) skewX(-16deg);
    }
}

@keyframes promo-badge-pulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.03); }
}

@media (hover:none){
    .animated-promo .promo-control{
        opacity:.82;
    }
}

@media (prefers-reduced-motion:reduce){
    .animated-promo .promo-slide,
    .animated-promo .promo-control,
    .animated-promo .promo-indicator{
        transition:none;
    }

    .animated-promo .promo-slide img,
    .animated-promo .promo-slide::after,
    .animated-promo .promo-badge{
        animation:none !important;
        transform:none !important;
    }
}