/* STO Ads (Site Takeover) - frontend. Author: Zahari */
.sto-ad{--sto-ms:300ms;position:fixed;inset:0;z-index:999999;display:flex;padding:40px 12px;box-sizing:border-box;pointer-events:none}
.sto-ad[hidden]{display:none!important}
.sto-overlay{position:absolute;inset:0;pointer-events:auto}
.sto-v-top{align-items:flex-start}.sto-v-center{align-items:center}.sto-v-bottom{align-items:flex-end}
.sto-h-left{justify-content:flex-start}.sto-h-center{justify-content:center}.sto-h-right{justify-content:flex-end}
.sto-box{position:relative;width:100%;pointer-events:auto;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.sto-box.sto-t-image{background:transparent;box-shadow:none;width:auto}
.sto-content{max-height:calc(100vh - 80px);overflow:auto}
.sto-content img{display:block;max-width:100%;height:auto;margin:0 auto}
.sto-content>*:first-child{margin-top:0}.sto-content>*:last-child{margin-bottom:0}

/* Butang tutup */
.sto-close{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;padding:0;border:0;cursor:pointer;font-family:inherit;line-height:1}
.sto-cs-circle_dark .sto-close{width:30px;height:30px;border-radius:50%;background:#000;color:#fff;font-size:20px}
.sto-cs-circle_light .sto-close{width:30px;height:30px;border-radius:50%;background:#fff;color:#000;font-size:20px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.sto-cs-square .sto-close{width:30px;height:30px;border-radius:0;background:#000;color:#fff;font-size:20px}
.sto-cs-minimal .sto-close{width:32px;height:32px;background:transparent;color:#fff;font-size:32px;text-shadow:0 0 3px rgba(0,0,0,.9)}
.sto-cs-text .sto-close{height:28px;padding:0 12px;border-radius:4px;background:#000;color:#fff;font-size:13px;white-space:nowrap}
.sto-close-inside .sto-close{top:8px}
.sto-close-outside .sto-close{top:-36px}
.sto-side-right .sto-close{right:8px}
.sto-side-left .sto-close{left:8px}
.sto-close-outside.sto-side-right .sto-close{right:0}
.sto-close-outside.sto-side-left .sto-close{left:0}
.sto-close:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #1a73e8}

/* Kunci scroll hanya untuk iklan modal (ada overlay) */
html.sto-open{overflow:hidden}

/* Animasi masuk dan keluar */
.sto-a-fade{--ai:sto-fade-in;--ao:sto-fade-out;--oi:sto-fade-in;--oo:sto-fade-out}
.sto-a-slide_down{--ai:sto-sd-in;--ao:sto-sd-out;--oi:sto-fade-in;--oo:sto-fade-out}
.sto-a-slide_up{--ai:sto-su-in;--ao:sto-su-out;--oi:sto-fade-in;--oo:sto-fade-out}
.sto-a-zoom{--ai:sto-zm-in;--ao:sto-zm-out;--oi:sto-fade-in;--oo:sto-fade-out}
.sto-in .sto-box{animation:var(--ai,none) var(--sto-ms) ease both}
.sto-in .sto-overlay{animation:var(--oi,none) var(--sto-ms) ease both}
.sto-out .sto-box{animation:var(--ao,none) var(--sto-ms) ease both}
.sto-out .sto-overlay{animation:var(--oo,none) var(--sto-ms) ease both}

@keyframes sto-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sto-fade-out{from{opacity:1}to{opacity:0}}
@keyframes sto-sd-in{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@keyframes sto-sd-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-40px)}}
@keyframes sto-su-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes sto-su-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(40px)}}
@keyframes sto-zm-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes sto-zm-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.85)}}

@media (prefers-reduced-motion:reduce){
	.sto-ad .sto-box,.sto-ad .sto-overlay{animation:none!important}
}