/* =================================================================
   Selamat Ulang Tahun — gaya elegan (biru muda · putih pastel · cream)
   Palet & ukuran ada di :root. Edit teks di js/main.js (objek CONFIG).
   ================================================================= */

:root {
  /* Palet */
  --blue:        #a9d6e5;   /* biru muda */
  --blue-soft:   #cfeaf5;
  --blue-deep:   #6fb2d2;
  --cream:       #fdf6ea;
  --cream-deep:  #f6e7cf;
  --pastel:      #fbfdff;   /* putih pastel */
  --gold:        #d9b88a;   /* aksen champagne */
  --gold-soft:   #ecd4ad;
  --ink:         #41545f;   /* teks utama (slate lembut) */
  --ink-soft:    #6b7d87;

  --glass:        rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.75);
  --shadow:       0 30px 60px -25px rgba(70, 90, 110, 0.45);

  /* Tinggi viewport sebenarnya (di-set oleh JS untuk mobile) */
  --app-height: 100vh;

  --slide-ease: cubic-bezier(0.76, 0, 0.18, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* pastikan atribut hidden selalu bekerja */

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 15% 10%, var(--cream) 0%, transparent 55%),
    radial-gradient(1100px 900px at 85% 90%, var(--blue-soft) 0%, transparent 55%),
    linear-gradient(160deg, #fbf6ec 0%, #eaf4fb 45%, #dcecf8 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Lapisan latar (aurora + partikel) ---------- */
.bg-aurora {
  position: fixed; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 420px at 20% 30%, rgba(169, 214, 229, 0.45), transparent 70%),
    radial-gradient(480px 480px at 80% 70%, rgba(246, 231, 207, 0.5), transparent 70%),
    radial-gradient(360px 360px at 60% 20%, rgba(255, 255, 255, 0.55), transparent 70%);
  filter: blur(10px);
  animation: auroraFloat 22s ease-in-out infinite alternate;
}
@keyframes auroraFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

.bg-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.bg-particles .p {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.1));
  opacity: 0.6;
  animation: drift linear infinite;
}
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) translateX(var(--dx, 20px)); opacity: 0; }
}

#confetti-canvas {
  position: fixed; inset: 0;
  z-index: 60; pointer-events: none;
}

/* Background pixel art sakura: scene statis + kelopak jatuh */
/* Background gambar (mengganti scene pixel) */
#sceneCanvas, #treeCanvas, #petalCanvas { display: none; }
.bg-image {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #f3d9e6 url("../img/bg.gif") center center / cover no-repeat;
}

/* =================== DECK / SLIDE SYSTEM =================== */
.deck {
  position: relative;
  z-index: 2;
  display: flex;
  height: var(--app-height);
  width: 100%;
  transform: translate3d(calc(var(--i, 0) * -100vw), 0, 0);
  transition: transform 0.85s var(--slide-ease);
}
.slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: var(--app-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: calc(env(safe-area-inset-top, 0px) + clamp(52px, 13vw, 92px)) 20px
           calc(env(safe-area-inset-bottom, 0px) + 92px);
  text-align: center;
  overflow: hidden;
}

.slide-hint {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(17px, 4.6vw, 23px);
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
  max-width: 22ch;
  animation: fadeUp 0.9s var(--slide-ease) both;
}

/* =================== TOMBOL =================== */
.btn {
  font-family: "Poppins", sans-serif;
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  color: #3c4f59;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.3s ease;
  touch-action: manipulation;
  user-select: none;
}
.btn-primary {
  background: linear-gradient(120deg, var(--blue), var(--gold-soft));
  box-shadow: 0 14px 30px -10px rgba(111, 178, 210, 0.7);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -10px rgba(111, 178, 210, 0.85); }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.72); }
.btn:active { transform: scale(0.96); }

/* =================== SLIDE 1 — KARTU =================== */
.card {
  position: relative;
  max-width: 540px;
  width: min(92vw, 540px);
  padding: clamp(30px, 6vw, 56px) clamp(24px, 5vw, 48px);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.card::after { /* bingkai emas tipis */
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(217, 184, 138, 0.5);
  border-radius: 20px;
  pointer-events: none;
}
.eyebrow {
  display: block;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.name {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(64px, 17vw, 130px);
  line-height: 0.95;
  background: linear-gradient(110deg, var(--blue-deep), var(--gold), var(--blue-deep));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }

.flourish {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 8px 0 14px;
  color: var(--gold); font-size: 13px;
}
.flourish span {
  height: 1px; width: clamp(40px, 16vw, 90px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.flourish span:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }

.greet {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 6.6vw, 38px);
  font-weight: 600;
  color: var(--ink);
}
.card-msg {
  margin: 16px auto 4px;
  max-width: 40ch;
  font-weight: 300;
  font-size: clamp(14px, 3.7vw, 16.5px);
  line-height: 1.85;
  color: var(--ink-soft);
  white-space: pre-line;
}
.card-date {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--gold);
  margin-bottom: 26px;
}
.card .btn { margin-top: 4px; }

/* =================== SLIDE 2 — KUE & LILIN =================== */
.cake-scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 26px 24px rgba(80, 100, 120, 0.22));
}
.cake {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* lilin */
.candles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 2.6vw, 16px);
  z-index: 5;
  margin-bottom: -6px;
}
.candle-hit {
  --flame: #ffb03a;
  position: relative;
  width: clamp(30px, 9vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 34px;            /* area sentuh di atas api */
  cursor: pointer;
  touch-action: manipulation;
}
.stick {
  width: clamp(8px, 2.4vw, 11px);
  height: clamp(34px, 9vw, 46px);
  border-radius: 4px 4px 0 0;
  background:
    repeating-linear-gradient(45deg, var(--blue) 0 6px, var(--pastel) 6px 12px);
  box-shadow: inset -3px 0 rgba(0,0,0,0.08), inset 3px 0 rgba(255,255,255,0.35);
}
.wick {
  position: absolute;
  top: 30px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 6px; background: #4a3b2e; border-radius: 2px;
}
.flame-anim {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  animation: flameSway 2.6s ease-in-out infinite;
}
@keyframes flameSway {
  0%, 100% { transform: translateX(-50%) rotate(-2.5deg) scaleY(1); }
  50%      { transform: translateX(-50%) rotate(2.5deg) scaleY(1.06); }
}
.flame {
  position: relative;
  width: clamp(13px, 3.6vw, 16px);
  height: clamp(18px, 5vw, 22px);
  background: linear-gradient(to top, #ff7a00 0%, #ffb43a 45%, #ffe79a 100%);
  border-radius: 0 50% 50% 50%;        /* teardrop */
  transform: rotate(45deg);
  box-shadow: 0 0 22px 6px rgba(255, 150, 40, 0.55);
  animation: flicker 0.12s infinite alternate;
}
.flame::before {                        /* inti terang */
  content: "";
  position: absolute; inset: 22% 24% 14% 22%;
  background: linear-gradient(to top, #ffd76b, #fffefb);
  border-radius: 0 50% 50% 50%;
  opacity: 0.95;
}
.flame::after {                         /* dasar biru */
  content: "";
  position: absolute; left: 32%; bottom: 6%;
  width: 36%; height: 30%;
  background: radial-gradient(circle, rgba(120,180,255,0.9), transparent 70%);
  border-radius: 50%;
  transform: rotate(-45deg);
}
@keyframes flicker { from { opacity: 1; } to { opacity: 0.86; } }

.glow {
  position: absolute;
  top: 0; left: 50%;
  width: 40px; height: 50px;
  transform: translate(-50%, -40%);
  background: radial-gradient(circle, rgba(255,170,60,0.45), transparent 65%);
  filter: blur(6px);
  pointer-events: none;
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.7} 50%{opacity:1} }

.smoke {
  position: absolute;
  top: 6px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(180, 185, 195, 0.55);
  opacity: 0;
  pointer-events: none;
}

/* keadaan lilin padam */
.candle-hit.out .flame-anim {
  opacity: 0;
  transform: translateX(-50%) scale(0.2);
  animation: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.candle-hit.out .flame { animation: none; }
.candle-hit.out .glow {
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.3);
  animation: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.candle-hit.out .smoke { animation: smokeRise 1.5s ease-out forwards; }
@keyframes smokeRise {
  0%   { opacity: 0.7; transform: translate(-50%, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(2.4); filter: blur(6px); }
}

/* tier kue */
.tier {
  position: relative;
  border-radius: 14px 14px 8px 8px;
  box-shadow:
    inset 0 -10px 16px -8px rgba(120, 90, 60, 0.25),
    inset 0 8px 10px -6px rgba(255,255,255,0.6);
}
.tier-top {
  width: clamp(150px, 52vw, 220px);
  height: clamp(54px, 15vw, 74px);
  background: linear-gradient(180deg, #fff5e6 0%, #f3ddbf 100%);
  z-index: 3;
}
.tier-bottom {
  width: clamp(200px, 70vw, 290px);
  height: clamp(66px, 18vw, 92px);
  margin-top: -6px;
  background: linear-gradient(180deg, #eef7fc 0%, #cfe6f3 100%);
  z-index: 2;
}
.icing {                                /* lelehan krim di tepi atas */
  position: absolute; top: -10px; left: 0; right: 0; height: 22px;
  background:
    radial-gradient(12px 16px at 12px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 14px at 38px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 18px at 64px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 14px at 90px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 17px at 116px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 14px at 142px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 16px at 168px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 15px at 194px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 16px at 220px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 15px at 246px 0, var(--pastel) 60%, transparent 62%),
    radial-gradient(12px 16px at 272px 0, var(--pastel) 60%, transparent 62%);
  filter: drop-shadow(0 4px 3px rgba(120,140,160,0.18));
}
.tier-top .icing {
  background:
    radial-gradient(11px 15px at 10px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 13px at 33px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 17px at 56px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 13px at 79px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 16px at 102px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 14px at 125px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 16px at 148px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 14px at 171px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 16px at 194px 0, #fff 60%, transparent 62%),
    radial-gradient(11px 14px at 217px 0, #fff 60%, transparent 62%);
}
.dots-deco {                            /* titik hiasan di tier bawah */
  position: absolute; inset: 26px 0 0;
  background:
    radial-gradient(4px 4px at 24px 8px, var(--gold-soft) 50%, transparent 52%),
    radial-gradient(4px 4px at 64px 26px, var(--blue) 50%, transparent 52%),
    radial-gradient(4px 4px at 104px 10px, var(--gold-soft) 50%, transparent 52%),
    radial-gradient(4px 4px at 150px 28px, var(--blue) 50%, transparent 52%),
    radial-gradient(4px 4px at 196px 12px, var(--gold-soft) 50%, transparent 52%),
    radial-gradient(4px 4px at 240px 28px, var(--blue) 50%, transparent 52%);
  opacity: 0.8;
}
.plate {
  width: clamp(230px, 80vw, 330px);
  height: clamp(16px, 4vw, 22px);
  margin-top: -4px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e4eef5);
  box-shadow: 0 10px 18px -8px rgba(80,100,120,0.4);
  z-index: 1;
}
.plate-shadow {
  width: clamp(220px, 76vw, 320px);
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(90, 110, 130, 0.18);
  filter: blur(7px);
}

.wish-text {
  min-height: 1.6em;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 5vw, 26px);
  color: var(--blue-deep);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.wish-text.show { opacity: 1; transform: translateY(0); }

.cake-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cake-next { animation: fadeUp 0.6s var(--slide-ease) both; }
.mic-btn.is-off { display: none; }
.mic-btn.listening {
  background: linear-gradient(120deg, var(--blue), var(--gold-soft));
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,178,210,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(111,178,210,0); }
}

/* Toast kecil */
.toast {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  transform: translate(-50%, 16px);
  z-index: 80;
  max-width: 86vw;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(60, 79, 89, 0.92);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =================== SLIDE 3 — KADO =================== */
.gift-stage {
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
.gift {
  --box: clamp(150px, 44vmin, 230px);
  position: relative;
  width: var(--box);
  height: var(--box);
  cursor: pointer;
  transform: rotateX(6deg);
  transition: transform 0.5s ease;
  outline: none;
}
.gift:focus-visible { filter: drop-shadow(0 0 0 2px var(--gold)); }
.gift:active { transform: rotateX(6deg) scale(0.98); }
.gift.opened { cursor: default; }

.gift-glow {
  position: absolute; left: 50%; top: 55%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 246, 220, 0.0), transparent 60%);
  transition: background 0.6s ease;
  pointer-events: none;
}
.gift.opened .gift-glow {
  background: radial-gradient(circle, rgba(255, 240, 200, 0.85), rgba(169,214,229,0.25) 45%, transparent 65%);
  animation: glowBeat 2.4s ease-in-out infinite;
}
@keyframes glowBeat { 0%,100%{opacity:.8} 50%{opacity:1} }

/* badan kotak */
.box {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 72%;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #bfe2f1 0%, #9ccbe2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset -22px 0 34px -22px rgba(0,0,0,0.25),
    0 24px 34px -16px rgba(80,110,130,0.55);
  overflow: hidden;
  z-index: 3;
}
.box::before {                          /* kilau lembut */
  content: "";
  position: absolute; top: 0; left: -30%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
}
.ribbon-v {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 22%; transform: translateX(-50%);
  background: linear-gradient(90deg, #f0dcb6, #fbf1dc 50%, #e6cda0);
  box-shadow: 0 0 0 1px rgba(217,184,138,0.4);
}

/* tutup kotak */
.lid {
  position: absolute;
  top: 8%; left: 50%;
  width: 112%; height: 30%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  border-radius: 10px;
  background: linear-gradient(180deg, #d5ecf6 0%, #aed5e8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.45),
    0 12px 20px -10px rgba(80,110,130,0.5);
  z-index: 6;
  transition: transform 0.85s cubic-bezier(0.5, -0.3, 0.3, 1), opacity 0.85s ease;
}
.ribbon-h {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 30%; transform: translateY(-50%);
  background: linear-gradient(180deg, #f0dcb6, #fbf1dc 50%, #e6cda0);
}
.gift.opened .lid {
  transform: translateX(-50%) translateY(-180%) rotate(-14deg);
  opacity: 0;
}

/* pita di atas */
.bow {
  position: absolute; left: 50%; top: -22%;
  width: 70%; height: 60%;
  transform: translateX(-50%);
}
.bow-loop {
  position: absolute; top: 10%;
  width: 44%; height: 80%;
  background: linear-gradient(135deg, #f3e2c2, #e3c89c);
  box-shadow: inset 0 0 0 1px rgba(217,184,138,0.5);
}
.bow-l { left: 0;  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(-22deg) skewX(8deg); }
.bow-r { right: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(22deg) skewX(-8deg); }
.bow-knot {
  position: absolute; left: 50%; top: 32%;
  width: 22%; height: 42%; transform: translateX(-50%);
  background: linear-gradient(135deg, #e9d2a8, #d9b88a);
  border-radius: 6px;
  z-index: 2;
}
.bow-tail { position: absolute; top: 60%; width: 16%; height: 60%;
  background: linear-gradient(180deg, #ecd6ad, #d9b88a); }
.bow-tail-l { left: 36%; transform: rotate(14deg); border-radius: 0 0 4px 6px; }
.bow-tail-r { right: 36%; transform: rotate(-14deg); border-radius: 0 0 6px 4px; }

/* surat di dalam kado */
.letter {                               /* kartu surat — overlay di tengah slide */
  position: absolute;
  left: 50%; top: 47%;
  width: min(92vw, 380px);
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  z-index: 9;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.2,0.8,0.25,1) 0.4s, opacity 0.6s ease 0.45s;
}
.letter.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.letter-inner {
  max-height: min(74vh, 560px);         /* batasi tinggi → sisanya bisa di-scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #ffffff, #fbf6ec);
  border: 1px solid rgba(217,184,138,0.5);
  border-radius: 18px;
  padding: clamp(20px, 5vw, 30px);
  box-shadow: var(--shadow);
}
/* (surat kini overlay tengah — lihat .letter.show) */
.letter-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(19px, 5vw, 26px);
  color: var(--blue-deep);
  margin-bottom: 10px;
}
.letter-body {
  font-weight: 300;
  font-size: clamp(13.5px, 3.6vw, 16px);
  line-height: 1.85;
  color: var(--ink-soft);
  white-space: pre-line;
}
.letter-sign {
  margin-top: 14px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(22px, 6vw, 30px);
  color: var(--gold);
}

.tap-pulse {
  position: absolute; left: 50%; top: 60%;
  width: 70px; height: 70px; transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 2px solid rgba(217,184,138,0.7);
  animation: tapPulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes tapPulse {
  0%   { opacity: 0.8; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.8); }
}
.gift.opened .tap-pulse { display: none; }

/* =================== BUNTING FOTO =================== */
.bunting {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 40;
  pointer-events: none;
}
.bunting-rope {
  position: absolute;
  top: 9px; left: 1.5%; right: 1.5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 5%, #c9a774 50%, var(--gold) 95%, transparent);
  border-radius: 2px;
  opacity: 0.85;
}
.bunting-flags {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, 0.8vw, 7px);
  padding: 9px clamp(8px, 3vw, 24px) 0;
}
.flag {
  flex: 0 0 auto;
  width: clamp(27px, 8vw, 54px);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: top center;
}
.flag-inner {
  position: relative;
  width: 100%;
  height: clamp(38px, 10.6vw, 72px);   /* tinggi eksplisit (≈4:3 dari lebar) */
  transform-origin: top center;
  animation: sway 3.4s ease-in-out infinite;
  filter: drop-shadow(0 5px 5px rgba(70, 90, 110, 0.28));
  transition: transform 0.2s ease;
}
.flag:hover .flag-inner { transform: scale(1.07); }
.flag:active .flag-inner { transform: scale(0.96); }
.flag-inner::before {                 /* simpul kecil di tali */
  content: "";
  position: absolute; top: -6px; left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.flag-frame, .flag-photo {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.flag-frame { background: linear-gradient(180deg, #ffffff, var(--cream-deep)); }
.flag-photo {
  inset: 3px;
  background-size: cover;
  background-position: center;
}
@keyframes sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}

/* Lightbox foto */
.lightbox {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(45, 56, 66, 0.85);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(92vw, 520px);
  max-height: 82vh;
  border-radius: 16px;
  border: 5px solid #fff;
  box-shadow: var(--shadow);
  transform: scale(0.92);
  transition: transform 0.3s ease;
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: 20px;
  font-size: 36px; color: #fff; line-height: 1;
}

/* =================== NAVIGASI =================== */
.dots {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translateX(-50%);
  z-index: 70;
  display: flex; gap: 12px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(111, 178, 210, 0.35);
  transition: all 0.3s ease;
}
.dot.is-active { background: var(--gold); width: 28px; border-radius: 6px; }

.nav-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 70;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--ink); font-size: 26px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: transform 0.2s ease, opacity 0.3s ease;
}
.nav-arrow:hover { transform: translateY(-50%) scale(1.08); }
.nav-prev { left: 14px; }
.nav-next { right: 14px; }

.audio-toggle {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  left: 16px;
  z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--gold); font-size: 18px;
  cursor: pointer; display: grid; place-items: center;
  transition: transform 0.2s ease;
}
.audio-toggle.playing { animation: spin 4s linear infinite; }
.audio-toggle:hover { transform: scale(1.08); }
@keyframes spin { to { transform: rotate(360deg); } }

/* =================== ANIMASI MASUK =================== */
.reveal > * { animation: fadeUp 0.9s var(--slide-ease) both; }
.reveal > *:nth-child(1) { animation-delay: 0.05s; }
.reveal > *:nth-child(2) { animation-delay: 0.18s; }
.reveal > *:nth-child(3) { animation-delay: 0.30s; }
.reveal > *:nth-child(4) { animation-delay: 0.42s; }
.reveal > *:nth-child(5) { animation-delay: 0.54s; }
.reveal > *:nth-child(6) { animation-delay: 0.66s; }
.reveal > *:nth-child(7) { animation-delay: 0.78s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================== RESPONSIF =================== */
/* Layar sempit (HP): sembunyikan panah samping agar tak menimpa kartu.
   Navigasi tetap bisa lewat swipe & titik di bawah. */
@media (max-width: 820px) {
  .nav-arrow { display: none !important; }
}
@media (max-width: 380px) {
  .candles { gap: 6px; }
  .slide { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
}
@media (min-width: 720px) {
  .slide { gap: 30px; }
}
/* layar agak pendek */
@media (max-height: 720px) {
  .cake-scene { transform: scale(0.9); }
  .slide { gap: 8px; }
}
/* layar pendek (mode lanskap HP) */
@media (max-height: 560px) {
  .name { font-size: clamp(48px, 12vh, 84px); }
  .cake-scene { transform: scale(0.78); }
  .card { padding: 22px 26px; }
  .slide { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  .flame, .glow { animation: none !important; }
}

/* =================== TIRAI BUNGA PEMBUKA =================== */
.curtain {
  position: fixed; inset: 0;
  z-index: 300;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.curtain.gone { display: none; }
.curtain-panel {
  position: absolute; top: 0; bottom: 0; width: 50.6%;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(55, 105, 145, 0.15) 0 15px, rgba(255, 255, 255, 0.07) 15px 32px),
    linear-gradient(180deg, #c9e7f6 0%, #a9d6ea 55%, #8ec5e0 100%);
  transition: transform 1.25s cubic-bezier(0.72, 0, 0.2, 1);
  will-change: transform;
}
.curtain-panel.left  { left: 0;  box-shadow: inset -14px 0 26px rgba(45, 95, 135, 0.32); }
.curtain-panel.right { right: 0; box-shadow: inset 14px 0 26px rgba(45, 95, 135, 0.32); }
.curtain.open .curtain-panel.left  { transform: translateX(-101%); }
.curtain.open .curtain-panel.right { transform: translateX(101%); }

.bloom {                                /* satu bunga (digenerate via JS) */
  position: absolute;
  width: 40px; height: 40px; margin: -20px;
  transform: translateY(0) scale(var(--sc, 1)) rotate(var(--r, 0deg));
  animation: bloomSway var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  background:
    radial-gradient(circle at 20px 8px,  var(--p) 0 8px, transparent 9px),
    radial-gradient(circle at 31px 15px, var(--p) 0 8px, transparent 9px),
    radial-gradient(circle at 27px 28px, var(--p) 0 8px, transparent 9px),
    radial-gradient(circle at 13px 28px, var(--p) 0 8px, transparent 9px),
    radial-gradient(circle at 9px 15px,  var(--p) 0 8px, transparent 9px),
    radial-gradient(circle at 20px 20px, var(--c) 0 4px, transparent 5px);
  background-repeat: no-repeat;
  pointer-events: none;
}
@keyframes bloomSway {                   /* ayun + denyut + naik-turun lembut */
  0%, 100% { transform: translateY(0) scale(var(--sc, 1)) rotate(var(--r, 0deg)); }
  50% {
    transform: translateY(var(--bob, -5px))
               scale(calc(var(--sc, 1) * 1.12))
               rotate(calc(var(--r, 0deg) + var(--sway, 16deg)));
  }
}

.curtain-valance {                      /* hiasan kain di atas */
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  z-index: 2;
  background: linear-gradient(180deg, #7bb4d6, #5f9ec4);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 7px 16px rgba(40, 80, 110, 0.4);
  transition: transform 0.9s ease;
}
.curtain-valance::after {               /* rumbai melengkung */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: radial-gradient(circle at 11px -2px, #5f9ec4 11px, transparent 12px) repeat-x;
  background-size: 22px 16px;
}
.curtain.open .curtain-valance { transform: translateY(-102%); }

.curtain-knob {                         /* medali bunga di tengah */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.curtain.open .curtain-knob { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.curtain-bloom {
  width: clamp(70px, 20vw, 92px); height: clamp(70px, 20vw, 92px);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(32px, 9vw, 42px); color: #5e9ec4;
  background: radial-gradient(circle at 50% 38%, #ffffff, #e6f4fc);
  border: 2px solid rgba(217, 184, 138, 0.85);
  box-shadow: 0 12px 28px rgba(45, 95, 135, 0.45);
  animation: knobPulse 2s ease-in-out infinite;
}
@keyframes knobPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.curtain-hint {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(16px, 4.6vw, 22px);
  color: #fff;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 10px rgba(30, 70, 100, 0.5);
  animation: hintFade 2.4s ease-in-out infinite;
}
@keyframes hintFade { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* =================== KUCING MENGINTIP DI ATAS SURAT =================== */
.letter-cat {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 16px);             /* paws bertumpu di tepi atas surat */
  width: 104px; height: 92px;
  transform: translateX(-50%) translateY(16px) scale(0.6);
  transform-origin: bottom center;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.5s ease 0.6s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}
.letter.show .letter-cat { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.cat { position: absolute; inset: 0; animation: catBob 3s ease-in-out infinite; transform-origin: bottom center; }
@keyframes catBob {
  0%, 100% { transform: translateY(0) rotate(-2.2deg); }
  50%      { transform: translateY(-5px) rotate(2.2deg); }
}

.cat-head {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 82px; height: 66px;
  background: radial-gradient(circle at 50% 38%, #fffdf9, #f6ecdd);
  border: 2px solid #e7dbc9;
  border-radius: 48% 48% 46% 46% / 52% 52% 48% 48%;
  box-shadow: 0 8px 16px rgba(80, 90, 110, 0.22);
}
.cat-ear {
  position: absolute; top: -15px;
  width: 30px; height: 26px;
  background: #fdf4e6;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: bottom center;
}
.cat-ear.left  { left: 4px;  transform: rotate(-20deg); }
.cat-ear.right { right: 4px; transform: rotate(20deg); }
.cat-ear::after {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 16px; height: 14px; background: #ffc2d6;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cat-eye {
  position: absolute; top: 26px;
  width: 10px; height: 13px; border-radius: 50%;
  background: #41545f;
  transform-origin: center;
  animation: catBlink 4.6s infinite;
}
.cat-eye.left  { left: 20px; }
.cat-eye.right { right: 20px; }
.cat-eye::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
}
@keyframes catBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
.cat-nose {
  position: absolute; top: 37px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 8px; background: #ff9bbb;
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 2px;
}
.cat-blush {
  position: absolute; top: 36px;
  width: 13px; height: 8px; border-radius: 50%;
  background: rgba(255, 150, 180, 0.5);
}
.cat-blush.left  { left: 8px; }
.cat-blush.right { right: 8px; }
.cat-whisker {
  position: absolute; top: 36px;
  width: 20px; height: 2px; border-radius: 2px; background: #cdbda7;
}
.cat-whisker.w1 { left: -12px; transform: rotate(8deg); }
.cat-whisker.w2 { left: -12px; top: 43px; transform: rotate(-8deg); }
.cat-whisker.w3 { right: -12px; transform: rotate(-8deg); }
.cat-whisker.w4 { right: -12px; top: 43px; transform: rotate(8deg); }
.cat-bow {
  position: absolute; top: -6px; right: 8px;
  width: 7px; height: 9px; border-radius: 3px; background: #7bb4d6; z-index: 2;
}
.cat-bow::before {
  content: ""; position: absolute; top: 50%; left: -9px; transform: translateY(-50%);
  width: 10px; height: 12px; background: #a9d6ea;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.cat-bow::after {
  content: ""; position: absolute; top: 50%; right: -9px; transform: translateY(-50%);
  width: 10px; height: 12px; background: #a9d6ea;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.cat-paw {
  position: absolute; bottom: 0;
  width: 22px; height: 14px;
  background: #fffdf9; border: 2px solid #e7dbc9;
  border-radius: 9px 9px 7px 7px;
  box-shadow: 0 3px 6px rgba(80, 90, 110, 0.18);
  z-index: 3;
}
.cat-paw.left  { left: 22px; }
.cat-paw.right { right: 22px; }
.cat-paw::after {
  content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 6px; background: #e7dbc9; border-radius: 2px;
}

/* =================== KADO DANA KAGET (slide 4) =================== */
.dana-gifts {
  display: flex;
  gap: clamp(22px, 9vw, 60px);
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  perspective: 900px;
}
.dana-gift {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gift.mini { --box: clamp(96px, 30vw, 148px); }
.dana-gift .gift { transition: transform 0.25s ease; }
.dana-gift:hover .gift { transform: rotateX(6deg) translateY(-6px) scale(1.05); }
.dana-gift:active .gift { transform: rotateX(6deg) scale(0.97); }
.dana-label {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 4.8vw, 21px);
  font-weight: 600;
  color: var(--ink);
}
.dana-note {
  font-size: clamp(12px, 3.4vw, 14px);
  color: var(--ink-soft);
  margin-top: 2px;
}