/* ============================================================
   03-components.css  — komponen tiap slide
   ============================================================ */

/* ---------- SLIDE 3: amplop + surat ---------- */
.slide--surat{ gap: clamp(14px, 3vh, 26px); }

.amplop{
  position:relative;
  width:min(88vw, 430px);
  aspect-ratio: 3 / 2;
  cursor:pointer;
  background:var(--kertas-2);
  border: var(--garis) solid var(--tinta);
  border-radius: 12px;
  box-shadow: var(--bayang);
  display:grid; place-items:center;
  transition: transform .2s ease;
  transform: rotate(-1deg);
}
.amplop:hover{ transform: rotate(1deg) translateY(-3px); }
.amplop__kantong{
  position:absolute; inset:0;
  background:var(--kertas-2);
  border: var(--garis) solid var(--tinta);
  border-radius:12px;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  z-index:2;
}
.amplop__tutup{
  position:absolute; inset:0;
  background:var(--merah);
  border: var(--garis) solid var(--tinta);
  border-radius:12px;
  clip-path: polygon(0 0, 50% 62%, 100% 0);
  transform-origin: top center;
  transition: transform .5s cubic-bezier(.3,1.4,.4,1);
  z-index:3;
}
.amplop__label{
  position:relative; z-index:4;
  margin-top: 26%;
  font-family:var(--font-comik); font-weight:800;
  font-size:clamp(1.1rem,3.4vw,1.6rem);
  color:var(--putih);
  text-align:center; line-height:1.2;
  text-shadow: 2px 2px 0 rgba(47,42,38,.5);
}
.amplop__label small{ font-size:.55em; font-weight:500; opacity:.9; }
.amplop.is-terbuka{ pointer-events:none; }
.amplop.is-terbuka .amplop__tutup{ transform: rotateX(180deg); }
.amplop.is-terbuka .amplop__kantong{ opacity:0; transition: opacity .3s ease .25s; }

.surat{
  position:relative;
  width:min(94vw, 620px);
  max-height: min(66svh, 520px);
  overflow-y:auto;
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  padding: clamp(20px, 4vw, 34px);
  text-align:left;
  display:flex; flex-direction:column; gap:12px;
  transform: rotate(-.6deg);
}
.surat__alamat{
  font-family:var(--font-comik); font-weight:800;
  font-size:clamp(1.1rem,3vw,1.5rem);
  text-decoration:underline wavy var(--hijau) 3px;
  text-underline-offset:.3em;
}
.surat__isi{ display:flex; flex-direction:column; gap:10px; font-size:clamp(.95rem,2.2vw,1.05rem); }
.surat__isi p{ text-indent:1.4em; }
.surat__isi p:first-child{ text-indent:0; }
.surat__isi ul{ display:flex; flex-direction:column; gap:4px; padding-left:1.2em; list-style:reversed; }
.surat__isi li{ list-style:"⭐ "; }
.surat__ttd{ font-family:var(--font-tulis); font-style:italic; color:var(--tinta-lembut); }

.tape{
  position:absolute; width:74px; height:26px;
  background:repeating-linear-gradient(45deg, #FFE27A55 0 8px, #FFD65C66 8px 16px);
  border:2px solid #ffffff88;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  opacity:.9;
}
.tape--tl{ top:-14px; left:-12px; transform: rotate(-24deg); }
.tape--tr{ top:-14px; right:-12px; transform: rotate(22deg); }

/* ---------- SLIDE 4 & 9: galeri foto ---------- */
.foto-grid{
  display:grid; gap: clamp(10px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  width:100%;
  max-width: 860px;
}
.foto, .kocak{
  position:relative;
  aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(45deg,#EFE3C8 0 10px,#E7D8B6 10px 20px);
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-kecil);
  overflow:hidden;
  display:grid; place-items:center;
  transform: rotate(-.6deg);
}
.foto:nth-child(2n){ transform: rotate(1deg); }
.foto img, .kocak img{ width:100%; height:100%; object-fit:cover; }
.foto::after, .kocak::after{
  content:"crayon kosong 🖍️";
  position:absolute; inset:auto 0 8px; text-align:center;
  font-family:var(--font-tulis); font-size:.78rem; color:var(--tinta-lembut);
}
.foto:has(img:not([data-error]))::after,
.kocak:has(img:not([data-error]))::after{ content:""; }
.foto img[data-error], .kocak img[data-error]{ display:none; }

/* ---------- SLIDE 5: kado ---------- */
.kado{
  position:relative;
  width:min(66vw, 260px);
  aspect-ratio: 1 / 1;
  cursor:pointer;
  transform: rotate(-2deg);
  transition: transform .2s ease;
  animation: mengambang 4s ease-in-out infinite;
}
.kado:hover{ transform: rotate(2deg) translateY(-6px); }
.kado__kotak{
  position:absolute; inset:22% 8% 6%;
  background:linear-gradient(160deg, var(--kuning), #FFB03D);
  border: var(--garis) solid var(--tinta);
  border-radius: 10px;
  box-shadow: var(--bayang);
}
.kado__tutup{
  position:absolute; left:8%; right:8%; top:12%; height:20%;
  background:linear-gradient(160deg, #FFD86B, #FFA93D);
  border: var(--garis) solid var(--tinta);
  border-radius: 10px;
}
.kado__pita{
  position:absolute; left:46%; top:12%; bottom:6%; width:9%;
  background:var(--merah);
  border-left:2px solid var(--tinta); border-right:2px solid var(--tinta);
}
.kado__tali{
  position:absolute; left:38%; top:0; width:24%; height:20%;
  border:3px solid var(--tinta);
  border-bottom:0;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}
.kado.is-terbuka{ animation: kadoTerbuka .5s ease forwards; }

/* ---------- SLIDE 6: voucher ---------- */
.voucher-box{
  position:relative;
  width:min(92vw, 460px);
  background:var(--putih);
  border: var(--garis) dashed var(--tinta);
  border-radius: var(--r-besar);
  box-shadow: var(--bayang);
  padding: clamp(18px, 3.4vw, 30px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transform: rotate(-.8deg);
}
.voucher__gambar{
  width:min(100%, 340px);
  max-height: clamp(140px, 30vh, 260px);
  object-fit: contain;
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kecil);
  background: repeating-linear-gradient(45deg,#EFE3C8 0 10px,#E7D8B6 10px 20px);
}
/* bingkai voucher KOSONG 16:9 — sengaja dikosongkan, gambarnya mau
   digambar sendiri. Kalau gambar sudah jadi, ganti div .voucher__kosong
   di ucapan.html dengan <img class="voucher__gambar" ...> lagi. */
.voucher__kosong{
  width:min(100%, 380px);
  aspect-ratio: 16 / 9;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border: var(--garis) dashed var(--tinta);
  border-radius: var(--r-kecil);
  background:
    radial-gradient(circle at 18% 28%, #FF4D6D26 0 9px, transparent 10px),
    radial-gradient(circle at 82% 72%, #4D9DE026 0 11px, transparent 12px),
    repeating-linear-gradient(45deg,#EFE3C8 0 10px,#E7D8B6 10px 20px);
  padding:12px;
}
.voucher__kosong-teks{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
}
.voucher__kosong-teks small{
  display:block; margin-top:4px;
  font-family:var(--font-tulis); font-weight:600; font-size:.9em;
  color:var(--tinta-lembut);
}
.voucher__judul{
  font-family:var(--font-comik); font-weight:800;
  font-size:clamp(1.2rem,3.6vw,1.7rem);
  text-decoration:underline wavy var(--oranye) 3px;
  text-underline-offset:.3em;
}
/* cara pakai voucher — di bawah bingkai voucher */
.voucher__cara{
  width:100%;
  margin-top:4px;
  text-align:left;
  background:var(--kertas);
  border: var(--garis) dashed var(--tinta-lembut);
  border-radius: var(--r-kecil);
  padding: clamp(12px, 2.6vw, 18px);
}
.voucher__cara-judul{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  text-align:center;
  margin-bottom:8px;
  color:var(--oranye);
}
.voucher__cara-list{
  margin:0; padding-left:1.4em;
  display:grid; gap:6px;
  font-size: clamp(.86rem, 2.1vw, 1rem);
  line-height:1.45;
}
.voucher__cara-list li::marker{ color:var(--merah); font-weight:800; }

/* ---------- SLIDE 7: maaf & makasih ---------- */
.maaf-dua{
  display:grid; gap: clamp(12px, 2.4vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  width:100%; max-width: 900px;
}
.panel{
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  padding: clamp(16px, 3vw, 26px);
  text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.panel--maaf{ transform: rotate(-1deg); background:#FFF4F6; }
.panel--makasih{ transform: rotate(1deg); background:#F3FFF7; }
.panel__head{
  font-family:var(--font-comik); font-weight:800;
  font-size:clamp(1.1rem,3vw,1.45rem);
  text-decoration:underline wavy var(--merah) 3px;
  text-underline-offset:.3em;
}
.panel--makasih .panel__head{ text-decoration-color: var(--hijau); }
.panel__isi{ display:flex; flex-direction:column; gap:8px; font-size:clamp(.9rem,2.1vw,1rem); }
.panel__isi li{ list-style:"🖍️ "; }

/* ---------- SLIDE 8: video ---------- */
.video-box{
  width:min(94vw, 640px);
  aspect-ratio: 9 / 14;
  max-height: 62svh;
  background:#2F2A26;
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  overflow:hidden;
  display:grid; place-items:center;
}
.video-box video{ width:100%; height:100%; object-fit:contain; background:#2F2A26; }
.video-box.video-kosong::after{
  content:"belum ada video 🎬";
  position:absolute; color:var(--putih); font-family:var(--font-tulis);
}
.video-box{ position:relative; }

/* ---------- SLIDE 9: kocak ---------- */
.kocak-grid{
  display:grid; gap: clamp(10px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  width:100%; max-width: 860px;
}
.kocak{ transform: rotate(1.2deg); }
.kocak:nth-child(2n){ transform: rotate(-1.4deg); }
.kocak figcaption{
  position:absolute; bottom:0; left:0; right:0;
  padding:4px 8px;
  background:#FFFDF7EE;
  border-top: var(--garis) solid var(--tinta);
  font-family:var(--font-tulis);
  font-size:.8rem; text-align:left;
}

/* ---------- SLIDE 10: penutup ---------- */
.akhir__kata{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(2.4rem, 12vw, 6rem);
  line-height:.95;
  color:var(--hijau);
  -webkit-text-stroke: 4px var(--tinta);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--kuning);
  transform: rotate(-1.5deg);
}
.akhir__teks{ font-family:var(--font-tulis); font-size:clamp(1.1rem,3vw,1.5rem); color:var(--tinta-lembut); }
.akhir__nama{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1.3rem, 4.5vw, 2.2rem);
  color:var(--merah);
  text-decoration:underline wavy var(--merah) 3px;
  text-underline-offset:.3em;
}
.akhir__aksi{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* ---------- toast ---------- */
.toast{
  position:fixed; z-index:130;
  left:50%; transform: translate(-50%, 20px);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px);
  background:var(--tinta); color:var(--kertas);
  font-family:var(--font-tulis);
  font-size:1rem;
  padding:.4em 1.1em;
  border-radius:999px;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: 86vw; text-align:center;
}
.toast.is-tampil{ opacity:1; transform: translate(-50%, 0); }