/* Mode presentasi: satu layar = satu slide */
html,body{height:100%;overflow:hidden}
.deck{position:fixed;inset:0}
.deck > .slide{position:absolute;inset:0;max-width:none;margin:0;
  padding:2.5rem 1.4rem calc(7.5rem + env(safe-area-inset-bottom));
  overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;transform:translateX(5%);
  transition:opacity .25s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .25s}
.deck > .slide::-webkit-scrollbar{display:none}
.deck > .slide.before{transform:translateX(-5%)}
.deck > .slide.active{opacity:1;visibility:visible;transform:none;
  transition:opacity .5s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.deck > .slide:focus{outline:none}

/* pusatkan konten; spesifisitas nol agar max-width komponen tetap berlaku */
:where(.deck > .slide > :not(.bg-star)){width:100%;max-width:900px}
.deck > .slide > :first-child{margin-top:auto}
.deck > .slide > :last-child{margin-bottom:auto}
.hero{overflow:hidden}
.hero > .stack{margin-block:auto}
.stack > .reveal + .reveal{margin-top:1.6rem}

/* isi slide muncul berurutan (build) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* progress */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;transform-origin:0 50%;transform:scaleX(0);
  background:var(--gold);transition:transform .5s ease;pointer-events:none}

/* navigasi bawah */
.nav{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:.3rem;padding:.3rem .45rem;border-radius:999px;
  background:#0f3d38f2;border:1px solid #c8a45d88;transition:opacity .25s}
.nav[hidden]{display:none}
.nav.away{opacity:0;pointer-events:none}
.nav button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--gold2);
  font-size:1.3rem;cursor:pointer}
.nav button:hover:not(:disabled){background:#c8a45d33}
.nav button:disabled{opacity:.3;cursor:default}
.nav button:focus-visible,.fab:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.nav .count{min-width:52px;text-align:center;font:400 .8rem 'Jost';letter-spacing:.1em;color:var(--cream)}
.dots{display:none;align-items:center}
.dots button{width:22px;height:44px;display:grid;place-items:center;font-size:0}
.dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:#c8a45d66;transition:.3s}
.dots button.on::before{background:var(--gold2);transform:scale(1.4)}
@media(min-width:640px){.dots{display:flex}}

.fab{bottom:calc(16px + env(safe-area-inset-bottom))}
.fab-auto{bottom:calc(72px + env(safe-area-inset-bottom))}
.fab-auto.on{background:var(--gold);color:var(--green)}
.fab-auto.away,.fab.away{opacity:0;pointer-events:none}

/* indikator waktu per slide saat putar otomatis */
#dwell{position:fixed;left:0;top:3px;height:2px;width:100%;z-index:90;background:var(--gold2);opacity:.7;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
#dwell.run{transform:scaleX(1);transition:transform var(--dwell,10s) linear}

@media(prefers-reduced-motion:reduce){
  .deck > .slide,.deck > .slide.active{transition:opacity .2s;transform:none}
  .reveal{transition:opacity .2s;transform:none}
  #dwell.run{transition:none}
}

/* Bingkai sudut emas (satu overlay untuk semua slide) */
.frame{position:fixed;inset:8px;z-index:40;pointer-events:none;color:var(--gold);opacity:.8;transition:color .5s}
.frame.on-dark{color:var(--gold2)}
.frame svg{position:absolute;width:44px;height:44px}
.frame .tl{top:0;left:0}.frame .tr{top:0;right:0;transform:scaleX(-1)}
.frame .bl{bottom:0;left:0;transform:scaleY(-1)}.frame .br{bottom:0;right:0;transform:scale(-1)}
@media(min-width:760px){.frame{inset:16px}.frame svg{width:84px;height:84px}}
.frame[hidden]{display:none}
.deck > .slide{padding-top:3.2rem}

/* petunjuk masih ada isi di bawah */
.cue{position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  background:#0f3d38d9;color:var(--gold2);border:1px solid #c8a45d88;pointer-events:none;
  opacity:0;transition:opacity .3s;animation:cue 1.8s ease-in-out infinite}
.cue.show{opacity:1}
@keyframes cue{50%{transform:translate(-50%,4px)}}
@media(prefers-reduced-motion:reduce){.cue{animation:none}}