/* Apps Slideshow — penampil deck profil aplikasi (kanvas 1920×1080, diskalakan ke layar) */
@font-face{font-family:'Plus Jakarta Sans';src:url(/fonts/plus-jakarta-sans.woff2) format('woff2');font-weight:200 800;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0E0716;color:#FBF7FA;overflow:hidden;font-family:'Plus Jakarta Sans',Arial,sans-serif}
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;animation:masuk .45s ease both}
.slide[hidden]{display:none!important}
@keyframes masuk{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.slide.mundur{animation-name:masuk-kiri}@keyframes masuk-kiri{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.slide h1{line-height:1.1}.slide h2{line-height:1.15}.slide h3{line-height:1.2}.slide p{line-height:1.4}
.slide ul,.slide ol{padding-left:1.15em}
.slide li::marker{color:currentColor}
.slide b{font-weight:700}
.slide table{border-collapse:collapse}
.slide th,.slide td{padding:.35em .6em;border-bottom:1px solid rgba(160,140,180,.28);vertical-align:top}
.slide th{font-weight:700}
.slide .xc{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;overflow:visible}
.slide img.anim{display:block;pointer-events:none;user-select:none}
#bar{position:fixed;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;background:rgba(14,7,22,.86);backdrop-filter:blur(8px);font-size:14px;z-index:5;transition:opacity .3s,transform .3s}
#bar .sb-title{color:#CDBEDD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bar .sb-sp{flex:1}
.sb-btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#FBF7FA;font:inherit;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap}
.sb-btn:hover{background:rgba(255,255,255,.14)}
.sb-btn:focus-visible{outline:2px solid #F06BB5;outline-offset:2px}
.sb-btn kbd{font:inherit;font-size:12px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.14);margin-left:4px}
.sb-count{min-width:64px;text-align:center;font-variant-numeric:tabular-nums;color:#CDBEDD}
#prog{position:fixed;left:0;right:0;bottom:52px;height:3px;background:rgba(255,255,255,.08);z-index:5;transition:opacity .3s}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C8177E,#8E4FD8);transition:width .3s}
body.fs #bar,body.fs #prog{opacity:0;pointer-events:none}
body.fs.ui #bar,body.fs.ui #prog{opacity:1;pointer-events:auto}
body.fs #prog{bottom:0}
@media (max-width:720px){#bar .sb-title,.sb-btn kbd{display:none}#fs{font-size:0;padding:7px 10px}#fs::before{content:'⛶';font-size:16px}}
@media (prefers-reduced-motion:reduce){.slide{animation:none}}

.sb-btn.on{background:#C8177E;border-color:#C8177E}
.sb-sel{appearance:none;max-width:210px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#FBF7FA;font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;cursor:pointer;text-overflow:ellipsis}
.sb-sel option{background:#1A0E27;color:#FBF7FA}
#cap{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);max-width:min(1100px,92vw);padding:12px 22px;border-radius:14px;background:rgba(14,7,22,.82);backdrop-filter:blur(6px);color:#FBF7FA;font-size:clamp(15px,1.5vw,22px);line-height:1.45;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6}
#cap.on{opacity:1}
body.fs #cap{bottom:28px}
@media (max-width:900px){#auto{display:none}.sb-sel{display:none}}