.ss-slider{--ss-ease:cubic-bezier(.77,0,.18,1);position:relative;overflow:hidden;width:100%;height:var(--ss-h,400px);background:#0b0b0d;touch-action:pan-y;isolation:isolate}
.ss-track{height:100%;position:relative}
.ss-slide{position:absolute;inset:0;overflow:hidden}
.ss-slide img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.ss-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%),linear-gradient(to top,rgba(0,0,0,.55),transparent 40%)}

/* ===== Slide mewah: geser + gambar zoom-out halus ===== */
.ss-fx-slide .ss-track{display:flex;transition:transform 1s var(--ss-ease)}
.ss-fx-slide .ss-slide{position:relative;flex:0 0 100%;inset:auto;height:100%}

/* ===== Efek bertumpuk (fade, kenburns, zoom, 3d) ===== */
.ss-fx-fade .ss-slide,.ss-fx-kenburns .ss-slide,.ss-fx-zoom .ss-slide,.ss-fx-3d .ss-slide{opacity:0;pointer-events:none}
.ss-fx-fade .ss-slide.is-active,.ss-fx-kenburns .ss-slide.is-active,.ss-fx-zoom .ss-slide.is-active,.ss-fx-3d .ss-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.ss-fx-fade .ss-slide{transition:opacity 1s ease}

/* Ken Burns */
.ss-fx-kenburns .ss-slide{transition:opacity 1.4s ease}

/* Zoom blur */
.ss-fx-zoom .ss-slide{transition:opacity 1.1s ease}
.ss-fx-zoom .ss-slide img{filter:blur(10px);transition:filter 1.2s ease}
.ss-fx-zoom .ss-slide.is-active img{filter:blur(0)}

/* 3D flip */
.ss-fx-3d{perspective:1400px}
.ss-fx-3d .ss-track{transform-style:preserve-3d}
.ss-fx-3d .ss-slide{transition:transform 1.1s var(--ss-ease),opacity .9s ease;transform:translateX(40%) rotateY(-55deg) scale(.85);backface-visibility:hidden}
.ss-fx-3d .ss-slide.is-prev{transform:translateX(-40%) rotateY(55deg) scale(.85)}
.ss-fx-3d .ss-slide.is-active{transform:none}

/* ===== Caption animasi ===== */
.ss-caption{position:absolute;z-index:2;left:6%;right:6%;bottom:68px;max-width:640px;color:#fff;font:italic 300 clamp(18px,2.6vw,32px)/1.3 Georgia,"Times New Roman",serif;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.55);opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s var(--ss-ease)}
.ss-caption::before{content:"";display:block;width:0;height:2px;margin-bottom:14px;background:linear-gradient(90deg,#d9b66a,#f3e2b3);transition:width 1s var(--ss-ease) .5s}
.ss-slide.is-active .ss-caption{opacity:1;transform:none;transition-delay:.6s}
.ss-slide.is-active .ss-caption::before{width:70px}



/* ===== Progress bar ===== */
.ss-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15);z-index:3}
.ss-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d9b66a,#f3e2b3)}
.ss-progress.run span{animation:ss-prog var(--ss-iv,4000ms) linear forwards}
.ss-slider.is-paused .ss-progress span{animation-play-state:paused}
@keyframes ss-prog{from{width:0}to{width:100%}}

@media(max-width:600px){
	.ss-slider:not(.ss-auto){height:var(--ss-hm,calc(var(--ss-h,400px)*.65))}
	.ss-caption{bottom:34px}
}
@media(prefers-reduced-motion:reduce){
	.ss-slider *{animation:none!important;transition-duration:.01ms!important}
}

/* ===== Efek wipe (reveal, iris, diagonal) ===== */
.ss-fx-reveal .ss-slide,.ss-fx-iris .ss-slide,.ss-fx-diagonal .ss-slide{visibility:hidden;z-index:0}
.ss-fx-reveal .ss-slide{clip-path:inset(0 0 0 100%)}
.ss-fx-iris .ss-slide{clip-path:circle(0% at 50% 50%)}
.ss-fx-diagonal .ss-slide{clip-path:polygon(-40% 0,-40% 0,-80% 100%,-80% 100%)}
.ss-fx-reveal .ss-slide.is-leaving,.ss-fx-iris .ss-slide.is-leaving,.ss-fx-diagonal .ss-slide.is-leaving{visibility:visible;z-index:1;transition:none}
.ss-fx-reveal .ss-slide.is-leaving{clip-path:inset(0)}
.ss-fx-iris .ss-slide.is-leaving{clip-path:circle(150% at 50% 50%)}
.ss-fx-diagonal .ss-slide.is-leaving{clip-path:polygon(-40% 0,140% 0,100% 100%,-80% 100%)}
.ss-fx-reveal .ss-slide.is-active,.ss-fx-iris .ss-slide.is-active,.ss-fx-diagonal .ss-slide.is-active{visibility:visible;z-index:2;transition:clip-path 1.4s var(--ss-ease)}
.ss-fx-reveal .ss-slide.is-active{clip-path:inset(0)}
.ss-fx-iris .ss-slide.is-active{clip-path:circle(150% at 50% 50%);transition-duration:1.8s}
.ss-fx-diagonal .ss-slide.is-active{clip-path:polygon(-40% 0,140% 0,100% 100%,-80% 100%)}


/* ===== Transisi pecahan (shatter, blinds, mosaic) ===== */
.ss-fx-shatter .ss-slide,.ss-fx-blinds .ss-slide,.ss-fx-mosaic .ss-slide,.ss-fx-crystal .ss-slide,.ss-fx-ripple .ss-slide,.ss-fx-jewel .ss-slide{opacity:0;pointer-events:none}
.ss-fx-shatter .ss-slide.is-active,.ss-fx-blinds .ss-slide.is-active,.ss-fx-mosaic .ss-slide.is-active,.ss-fx-crystal .ss-slide.is-active,.ss-fx-ripple .ss-slide.is-active,.ss-fx-jewel .ss-slide.is-active{opacity:1;pointer-events:auto}
.ss-frag{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ss-frag i{position:absolute;background-repeat:no-repeat;will-change:transform,opacity}
.ss-slide.is-active.is-out .ss-caption{opacity:0;transform:translateY(-16px);transition-delay:0s;transition-duration:.5s}

/* ===== Silk & Glide (digerakkan JS) ===== */
.ss-fx-silk .ss-slide,.ss-fx-glide .ss-slide{opacity:0;visibility:hidden;pointer-events:none}
.ss-fx-silk .ss-slide.is-leaving,.ss-fx-glide .ss-slide.is-leaving{opacity:1;visibility:visible;z-index:1}
.ss-fx-silk .ss-slide.is-active,.ss-fx-glide .ss-slide.is-active{opacity:1;visibility:visible;z-index:2;pointer-events:auto}

/* ===== Kilau cahaya emas di setiap transisi ===== */
.ss-sheen{position:absolute;top:0;bottom:0;left:0;width:45%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 0,rgba(255,236,190,0) 25%,rgba(255,240,205,.34) 50%,rgba(255,236,190,0) 75%,transparent 100%);transform:translateX(-120%) skewX(-18deg)}
.ss-sheen.go{animation:ss-sheen 1.9s .1s var(--ss-ease) both}
@keyframes ss-sheen{0%{opacity:1;transform:translateX(-120%) skewX(-18deg)}100%{opacity:0;transform:translateX(320%) skewX(-18deg)}}

/* Ukuran otomatis mengikuti rasio gambar */
.ss-slider.ss-auto{height:auto;max-height:90vh}

/* ===== Bingkai emas tipis ===== */
.ss-slider::after{content:"";position:absolute;inset:12px;border:1px solid rgba(243,226,179,.38);pointer-events:none;z-index:3}

@media(max-width:600px){.ss-slider::after{inset:8px}}

/* ===== Slide iklan ===== */
.ss-ad-link{position:absolute;inset:0;z-index:1}

/* Gambar tampil utuh */
.ss-contain .ss-slide img{object-fit:contain}
.ss-contain .ss-slide{background:#0b0b0d}

/* Ukuran seperti slider Headline tema dtimur News */
.ss-theme{max-width:1100px;margin-left:auto;margin-right:auto;aspect-ratio:3/2}
@media(min-width:768px){.ss-theme{aspect-ratio:16/8}}
@media(min-width:1024px){.ss-theme{aspect-ratio:21/9}}

/* Banner bersih: tidak ada elemen yang menutupi atau memotong foto */
.ss-clean::after{display:none}
.ss-clean .ss-vignette,.ss-clean .ss-sheen,.ss-clean .ss-progress{display:none!important}
.ss-clean .ss-slide img{transform:none!important;filter:none!important;animation:none!important;transition:none!important}

/* Ukuran otomatis: tinggi berubah halus mengikuti rasio tiap foto */
.ss-slider.ss-auto:not(.ss-theme){transition:aspect-ratio .7s var(--ss-ease)}