/* ============================================================
   02-deck.css  — MESIN SLIDE (satu layar penuh, satu slide aktif)
   ------------------------------------------------------------
   Cara kerja:
   - Semua .slide punya posisi sama, cuma .is-active yang terlihat.
   - Transisi pakai class .leaving / .entering dari deck.js.
   - Tinggi layar penuh pakai 100svh supaya tidak geser di HP.
   ============================================================ */

.deck{
  position:relative;
  width:min(100% - 2 * var(--jarak), var(--lebar));
  height:100svh;
  margin-inline:auto;
  z-index:2;
}

/* kontrol bawah muncul setelah halaman siap */
body.is-loading .kontrol{ opacity:0; pointer-events:none; }
body.is-siap .kontrol{ opacity:1; transition: opacity .4s ease .2s; }

.slide{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap: clamp(10px, 2.2vh, 22px);
  text-align:center;
  padding: clamp(62px, 9vh, 96px) clamp(6px, 3vw, 24px) clamp(92px, 14vh, 128px);
  overflow:hidden;
  transition: opacity var(--durasi-slide, 520ms) ease;
}
.slide.is-active{ display:flex; }

/* ---------- nuansa tiap slide (latar sangat tipis biar kertas
     tetap kelihatan) ---------- */
.slide--open  { background: radial-gradient(120% 90% at 50% 20%, #FFF0C9 0%, transparent 60%); }
.slide--kue   { background: radial-gradient(120% 90% at 50% 30%, #FFEFF2 0%, transparent 60%); }
.slide--surat { background: radial-gradient(120% 90% at 50% 25%, #F2FFF7 0%, transparent 60%); }
.slide--foto  { background: radial-gradient(120% 90% at 50% 30%, #F3F0FF 0%, transparent 60%); }
.slide--hadiah,
.slide--voucher{ background: radial-gradient(120% 90% at 50% 30%, #FFF7E0 0%, transparent 60%); }
.slide--maaf  { background: radial-gradient(120% 90% at 50% 30%, #FFF4F6 0%, transparent 60%); }
.slide--video { background: radial-gradient(120% 90% at 50% 30%, #EDF6FF 0%, transparent 60%); }
.slide--kocak { background: radial-gradient(120% 90% at 50% 30%, #FFFBE6 0%, transparent 60%); }
.slide--akhir { background: radial-gradient(120% 90% at 50% 35%, #EFFFF4 0%, transparent 62%); }

/* ---------- transisi FADE ----------
   Dua slide ditumpuk sebentar (lama di atas, baru di bawah),
   lalu sama-sama transparan → crossfade yg mulus.
   Durasi diatur deck.js lewat --durasi-slide dari
   config.durasiTransisi (ms). Set 0 = langsung pindah. */
.slide.leaving{ opacity:0; z-index:2; }
.slide.entering{ opacity:0; z-index:1; }
.slide.is-active{ z-index:1; }
/* masuk pertama kali (slide 1): isi muncul bertahap */
.slide.siap-tampil > *{ animation: munculNaik .5s cubic-bezier(.2,1.15,.3,1) both; }
.slide.siap-tampil > *:nth-child(1){ animation-delay:.02s; }
.slide.siap-tampil > *:nth-child(2){ animation-delay:.08s; }
.slide.siap-tampil > *:nth-child(3){ animation-delay:.14s; }
.slide.siap-tampil > *:nth-child(4){ animation-delay:.2s; }
.slide.siap-tampil > *:nth-child(5){ animation-delay:.26s; }
.slide.siap-tampil > *:nth-child(6){ animation-delay:.32s; }

/* ---------- elemen umum tiap slide ---------- */
.slide__head{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1.25rem, 4.2vw, 2.1rem);
  line-height:1.2;
  text-decoration-line:underline wavy var(--merah);
  text-decoration-thickness:3px;
  text-underline-offset:.32em;
  transform: rotate(-1deg);
  max-width:22ch;
}
.slide__kicker{
  font-family:var(--font-tulis);
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  color:var(--tinta-lembut);
  background:var(--putih);
  border: var(--garis) dashed var(--tinta-lembut);
  border-radius:999px;
  padding:.15em 1.2em;
  transform: rotate(-2deg);
}
.slide__sub{
  font-size: clamp(.95rem, 2.5vw, 1.2rem);
  color:var(--tinta-lembut);
  max-width:40ch;
}
.slide__tap{
  font-family:var(--font-tulis);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color:var(--tinta);
  animation: denyut 1.8s ease-in-out infinite;
}
.slide__aksi{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; }
.slide__catatan{
  font-family:var(--font-tulis);
  font-size: clamp(.8rem, 2vw, 1rem);
  color:var(--tinta-lembut);
  max-width:44ch;
}
.slide__cake-mini{ font-size: clamp(3rem, 11vw, 6rem); }

/* ---------- SLIDE 1: nama ---------- */
.nama{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(3rem, 17vw, 9rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--merah);
  -webkit-text-stroke: 4px var(--tinta);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--kuning), 12px 12px 0 rgba(47,42,38,.2);
  max-width:14ch;
  overflow-wrap:anywhere;
  transform: rotate(-1.6deg);
  animation: goyang 5s ease-in-out infinite;
}
.nama.is-panjang{ font-size: clamp(2rem, 10vw, 5rem); -webkit-text-stroke-width: 3px; text-shadow:4px 4px 0 var(--kuning); }

/* ---------- SLIDE 2: panggung kue ---------- */
.kue-panggung{
  position:relative;
  width: min(78vw, 380px);
  aspect-ratio: 1 / 1;
  display:grid; place-items:end center;
}
.kue-gambar{
  width:100%; height:auto;
  max-height:100%;
  object-fit:contain;
  filter: drop-shadow(0 8px 0 rgba(47,42,38,.16));
}
/* gif kue darimu sudah termasuk lilin + api, jadi lilin CSS disembunyikan.
   Lilin CSS cuma tampil kalau gif belum ada (mode tanpa-gambar). */
.kue-panggung.gif-mode .lilin{ display:none; }

/* file kue belum ada -> pakai emoji biar slide tetap lucu */
.kue-panggung.tanpa-gambar::before{
  content:"🎂";
  position:absolute; left:50%; bottom:2%;
  transform: translateX(-50%);
  font-size: clamp(6rem, 26vw, 12rem);
  line-height:1;
  filter: drop-shadow(0 8px 0 rgba(47,42,38,.16));
  animation: goyang 4s ease-in-out infinite;
}
.kue-panggung.tanpa-gambar .lilin{ top: 16% !important; }

/* ---------- lilin ---------- */
.lilin{
  position:absolute;
  left:50%; top:6%;
  transform: translateX(-50%);
  width: clamp(18px, 5vw, 26px);
  display:flex; flex-direction:column; align-items:center;
  z-index:3;
}
.lilin__corak{
  width:100%; height:6px; border-radius:3px;
  background:repeating-linear-gradient(45deg, var(--merah) 0 4px, var(--putih) 4px 8px);
  border:2px solid var(--tinta);
}
.lilin--batang{
  width:100%; height: clamp(34px, 10vw, 56px);
  background:linear-gradient(90deg, #FFF0C4, #FFE2A0);
  border:2px solid var(--tinta);
  border-top:0;
  border-radius:0 0 4px 4px;
}

/* ---------- api ---------- */
.api{
  position:relative;
  width: clamp(16px, 4.4vw, 24px);
  height: clamp(30px, 8vw, 46px);
  margin-bottom:-4px;
  transform-origin: 50% 100%;
  animation: kedipApi 1.1s ease-in-out infinite alternate;
}
.api::before,
.api::after,
.api--inti{ content:""; position:absolute; left:50%; transform:translateX(-50%); border-radius:50% 50% 46% 46% / 62% 62% 38% 38%; }
.api::before{ inset:0; background:radial-gradient(ellipse at 50% 78%, #FFF3B0 0 22%, #FFC93C 45%, #FF8A3D 78%, rgba(255,138,61,0) 100%); }
.api::after { inset:26% 26% 18% 26%; background:radial-gradient(ellipse at 50% 80%, #FFFDF0 0 30%, #FFE066 65%, rgba(255,224,102,0) 100%); }
.api--inti   { inset:52% 38% 10% 38%; background:#FFFDF0; border-radius:50%; }

.lilin.api mati .api,
.lilin.api-mati .api{ animation:none; transform:scale(.2) translateY(6px); opacity:0; }
.lilin.ditiup{ animation: goyangLilin .18s ease-in-out infinite alternate; }

/* ---------- asap (muncul sebentar setelah lilin padam) ---------- */
.asap{ position:absolute; inset:0; pointer-events:none; }

.asap i{
  position:absolute; left:50%; top:4%;
  width:12px; height:12px; margin-left:-6px;
  background:rgba(120,120,130,.35); border-radius:50%;
  opacity:0;
}
.asap.aktif i{ animation: naikAsap 1.9s ease-out infinite; }
.asap.aktif i:nth-child(2){ animation-delay:.45s; }
.asap.aktif i:nth-child(3){ animation-delay:.9s; }

/* ---------- meter tiupan ---------- */
.tiup-meter{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:min(320px, 78vw);
}
.tiup-meter__bar{
  width:100%; height:16px;
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius:999px; overflow:hidden;
}
.tiup-meter__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--biru), var(--hijau), var(--kuning));
  transition: width .12s linear;
}
.tiup-meter__teks{
  font-family:var(--font-tulis);
  font-size: clamp(.9rem, 2.3vw, 1.1rem);
  color:var(--tinta-lembut);
}

/* ---------- kontrol atas (progress + aksi), tidak menutupi slide ---------- */
.kontrol{
  position:fixed; z-index:80;
  left:50%; transform:translateX(-50%);
  top: max(10px, env(safe-area-inset-top));
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px;
  width:min(94vw, 560px);
  padding: 8px 12px;
  pointer-events:none;
}
.kontrol__dots{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; pointer-events:auto; }
.kontrol__dots span{
  width:9px; height:9px; border-radius:50%;
  border:2px solid var(--tinta);
  background:transparent;
  transition: background .25s ease, transform .25s ease;
}
.kontrol__dots span.is-done{ background:var(--kuning); }
.kontrol__dots span.is-now{ background:var(--merah); transform:scale(1.35); }
.kontrol__aksi{ display:flex; gap:8px; pointer-events:auto; }
.kontrol__btn{
  width:38px; height:38px;
  display:grid; place-items:center;
  font-size:1rem; line-height:1;
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius:50%;
  box-shadow: var(--bayang-kecil);
  transition: transform .12s ease, background .2s ease;
}
.kontrol__btn:active{ transform: translateY(3px); }
.kontrol__btn[aria-pressed="true"]{ background:var(--kuning); }

/* ---------- tombol lanjut / kembali menyatu di tiap slide ---------- */
.slide__nav{
  position:absolute;
  left:0; right:0;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 8px);
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding: 0 14px;
}
.slide__lanjut{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(.92rem, 2.4vw, 1.08rem);
  padding:.6em 1.5em;
  background:var(--kuning);
  border: var(--garis) solid var(--tinta);
  border-radius: 999px;
  box-shadow: var(--bayang);
  transition: transform .12s ease, background .2s ease;
}
.slide__lanjut:active{ transform: translateY(4px) rotate(-1deg); box-shadow: var(--bayang-kecil); }
.slide__lanjut:hover{ background:#FFD75E; }
.slide__kembali{
  width:44px; height:44px;
  display:grid; place-items:center;
  font-size:1rem; line-height:1;
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius:50%;
  box-shadow: var(--bayang-kecil);
  transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.slide__kembali:active{ transform: translateY(3px); }
/* slide pertama tidak ada "sebelumnya" */
.slide[data-slide="1"] .slide__kembali{ visibility:hidden; pointer-events:none; }
/* slide terakhir tidak ada "lanjut" */
.slide--akhir .slide__lanjut{ display:none; }