/* Ceria — ucapan ulang tahun: untaian bendera, lencana pita berisi usia, kartu kaca di atas warna lembut. */
@font-face { font-family: "Fraunces"; font-weight: 300 700; src: url("fonts/fraunces.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; font-weight: 400 700; src: url("fonts/caveat.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400 800; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-display: swap; }

:root {
  --page: #f6d98a;
  --base: #fff7e0;
  --blob-1: #ffd25e;
  --blob-2: #ffb48a;
  --blob-3: #ffe9a8;
  --ink: #2a2140;
  --soft: #6c6384;
  --accent: #ff7a45;
  --accent-2: #f2b01e;
  --accent-3: #2a2140;
  --glass: rgba(255, 255, 255, 0.72);
  --display: "Fraunces", Georgia, serif;
  --hand: "Caveat", "Fraunces", cursive;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Tone warna (field "tone"): kuning = bawaan di atas. */
:root[data-tone="peach"] { --page: #f5c3ad; --base: #fff3ec; --blob-1: #ffc4a8; --blob-2: #ffd9a8; --blob-3: #ffe1d4; --accent: #e8603c; --accent-2: #f2a03c; }
:root[data-tone="mint"] { --page: #a9dcc3; --base: #f1fbf5; --blob-1: #a8e6cf; --blob-2: #d7f0a8; --blob-3: #cdf3e3; --accent: #1f9e74; --accent-2: #8fc23c; }
:root[data-tone="lavender"] { --page: #c8b9ee; --base: #f7f3ff; --blob-1: #cdbdf7; --blob-2: #f7bde0; --blob-3: #e2d8fb; --accent: #7a5cd6; --accent-2: #e06aae; }

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 500 16px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; }

main { max-width: 480px; margin: 0 auto; position: relative; overflow: hidden; background: var(--base); }
@media (min-width: 560px) { main { box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 26%, transparent); } }
.blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; }
.blob.a { width: 420px; height: 420px; top: -120px; right: -150px; background: var(--blob-1); opacity: 0.85; }
.blob.b { width: 380px; height: 380px; top: 34%; left: -190px; background: var(--blob-2); opacity: 0.7; }
.blob.c { width: 460px; height: 460px; bottom: -160px; right: -160px; background: var(--blob-1); opacity: 0.7; }
main > section { z-index: 1; }
section { min-height: 100vh; min-height: 100svh; padding: 96px 26px 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; position: relative; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.hint { font-size: 14px; font-weight: 600; color: var(--soft); }
.js-only { display: none; }

/* Untaian bendera */
.bunting { position: absolute; top: 0; left: 0; width: 100%; height: auto; filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--ink) 16%, transparent)); }
.tali { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-opacity: 0.55; }
.fl0 { fill: var(--accent); } .fl1 { fill: var(--accent-2); } .fl2 { fill: var(--ink); }

/* Hero */
.pita { position: absolute; width: 34px; height: 113px; }
.p1 { left: 5%; top: 24%; color: var(--accent-2); rotate: -14deg; }
.p2 { right: 6%; top: 46%; color: var(--accent); rotate: 16deg; }
.kilau { position: absolute; color: var(--accent-2); }
.k1 { width: 24px; height: 24px; right: 14%; top: 22%; }
.k2 { width: 15px; height: 15px; left: 16%; top: 50%; color: var(--accent); }
.k3 { width: 18px; height: 18px; right: 20%; bottom: 14%; }
.rosette { position: relative; width: 210px; margin: 6px 0 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 22px 22px color-mix(in srgb, var(--ink) 26%, transparent)); }
.rosette > svg { width: 100%; height: auto; }
.r-tail { fill: var(--accent); }
.r-tail.d { fill: color-mix(in srgb, var(--accent) 78%, #000); }
.r-petal { fill: var(--accent); }
.r-face { fill: #fff; }
.r-ring { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.num { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); }
.num b { font: 700 78px/0.9 var(--display); letter-spacing: -0.04em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.num i { font: 800 11px/1 var(--body); letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-top: 6px; padding-left: 0.32em; }
.num svg { width: 76px; height: 76px; color: var(--accent-2); }
.hero h1 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.08; max-width: 100%; }
.hero .name { display: block; font: 700 clamp(64px, 20vw, 86px)/0.95 var(--hand); letter-spacing: 0; color: var(--accent); rotate: -3deg; padding-top: 6px; overflow-wrap: anywhere; }
.hero .hint { margin-top: 8px; }

/* Kartu pesan */
.card { position: relative; width: 100%; padding: 46px 26px 30px; text-align: left; border-radius: 30px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 30px 60px -28px color-mix(in srgb, var(--ink) 45%, transparent); }
.kutip { position: absolute; top: -30px; left: 22px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: flex-start; justify-content: center; background: var(--accent); color: #fff; font: 700 76px/1 var(--display); box-shadow: 0 12px 20px -10px var(--accent); overflow: hidden; }
.card .eyebrow { margin-bottom: 12px; }
.message .text { white-space: pre-line; font: 500 21px/1.6 var(--display); font-variation-settings: "SOFT" 100; color: var(--ink); }
.from { margin-top: 20px; text-align: right; font: 700 40px/1.1 var(--hand); color: var(--accent); overflow-wrap: anywhere; }
.from span { font: 600 14px/1 var(--body); color: var(--soft); margin-right: 4px; }

/* Galeri */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; align-items: start; }
.photos figure { position: relative; margin: 0; padding: 7px; border-radius: 22px; background: #fff; box-shadow: 0 20px 34px -18px color-mix(in srgb, var(--ink) 50%, transparent); rotate: -2.5deg; }
.photos figure:nth-child(even) { rotate: 2.5deg; translate: 0 18px; }
.photos figure::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 22px; margin-left: -32px; rotate: -4deg; background: color-mix(in srgb, var(--accent-2) 70%, transparent); border-radius: 3px; }
.photos figure:nth-child(even)::before { background: color-mix(in srgb, var(--accent) 60%, transparent); rotate: 5deg; }
.photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.photos figure:nth-child(odd):last-child { grid-column: 1 / -1; width: 66%; justify-self: center; translate: 0 8px; }
.gallery .hint { margin-top: 26px; }

/* Balasan */
.kilau.big { position: static; width: 48px; height: 48px; }
.reply h2 { font-size: 38px; line-height: 1.1; }
.reply h2 em { font: 700 54px/1 var(--hand); color: var(--accent); letter-spacing: 0; }
.lead { color: var(--soft); font-weight: 600; margin-top: 4px; }
.reply form { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 18px; border-radius: 28px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 30px 60px -30px color-mix(in srgb, var(--ink) 45%, transparent); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 15px/1 var(--body); cursor: pointer; box-shadow: 0 14px 24px -12px var(--ink); }
.btn.ghost { min-height: 44px; padding: 0 16px; background: #fff; color: var(--ink); font-size: 14px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); }
.btn:focus-visible, textarea:focus-visible, .envelope:focus-visible, .rosette:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
textarea { font: inherit; font-size: 16px; padding: 13px 15px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); min-height: 90px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); resize: vertical; }
textarea::placeholder { color: var(--soft); opacity: 0.8; }
.note { font-weight: 800; color: var(--accent); }

/* Amplop */
.envelope { display: none; }
.js [data-opener=amplop] .envelope { display: flex; cursor: pointer; }
.js [data-opener=amplop] main > section:not(.envelope) { display: none; }
.js [data-opener=amplop].opened .envelope { display: none; }
.js [data-opener=amplop].opened main > section:not(.envelope) { display: flex; animation: muncul 0.8s ease both; }
.env-title { font: 600 34px/1.1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 20px; }
.env-title em { display: block; font: 700 58px/1 var(--hand); color: var(--accent); rotate: -3deg; padding-top: 4px; }
.env { position: relative; width: 280px; height: 190px; filter: drop-shadow(0 26px 28px color-mix(in srgb, var(--ink) 28%, transparent)); }
.env > span { position: absolute; }
.liner { inset: 0; border-radius: 18px; background: repeating-linear-gradient(45deg, var(--accent) 0 10px, var(--accent-2) 10px 20px); }
.peek { left: 16px; right: 16px; top: 14px; height: 118px; border-radius: 12px; background: #fff; }
.pocket { inset: 0; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--blob-3) 70%, #fff) 100%); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.pocket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blob-1) 55%, transparent)); clip-path: polygon(0 100%, 50% 50%, 100% 100%); }
.flap { inset: 0 0 auto 0; height: 114px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--blob-3) 60%, #fff) 0%, #fff 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.seal { left: 50%; top: 78px; width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; box-shadow: 0 10px 16px -8px var(--accent), inset 0 0 0 4px rgba(255, 255, 255, 0.35); }
.seal svg { width: 30px; height: 30px; }
.envelope .hint { margin-top: 22px; }

/* Story */
.bars { display: none; }
.js [data-opener=story] .bars { display: flex; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(452px, calc(100% - 28px)); gap: 4px; z-index: 5; }
.bars span { flex: 1; height: 4px; border-radius: 4px; background: var(--ink); opacity: 0.16; }
.bars span.done { opacity: 1; background: var(--accent); }
.js [data-opener=story] [data-step] { display: none; cursor: pointer; }
.js [data-opener=story] [data-step].active { display: flex; animation: muncul 0.5s ease both; }
.js [data-opener=story] footer { display: none; }
.js [data-opener=story] .js-only { display: block; }

footer { max-width: 480px; margin: 0 auto; padding: 22px 24px 32px; text-align: center; font-size: 13px; font-weight: 600; color: var(--soft); background: var(--base); }
footer a { color: var(--accent); font-weight: 800; }
.music-toggle { position: fixed; right: max(16px, calc(50% - 240px + 16px)); bottom: 16px; z-index: 20; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 12px 22px -8px var(--ink); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }

.message, .gallery, .reply { min-height: 0; padding: 62px 26px 50px; }
.reply { padding-bottom: 72px; }
.js [data-opener=story] .message, .js [data-opener=story] .gallery, .js [data-opener=story] .reply { min-height: 100vh; min-height: 100svh; }

/* Konfeti jatuh (dibuat ucapan.js) */
.confetti { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 3px; background: var(--accent); opacity: 0; animation: jatuh var(--t, 2.8s) cubic-bezier(0.25, 0.6, 0.45, 1) var(--dl, 0s) forwards; }
.confetti i:nth-child(4n + 1) { background: var(--accent-2); }
.confetti i:nth-child(4n + 2) { background: var(--ink); width: 9px; height: 9px; border-radius: 50%; }
.confetti i:nth-child(4n + 3) { background: var(--blob-1); }
@keyframes jatuh { 0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx, 0px), 104vh, 0) rotate(var(--r, 540deg)); } }

/* ---------- Animasi ---------- */
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes muncul { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-naik { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-pop { 0% { opacity: 0; scale: 0.3; rotate: -30deg; } 70% { scale: 1.06; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mo-turun { from { opacity: 0; translate: 0 -60px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-ayun { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.3; scale: 0.6; } }
@keyframes mo-layang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes mo-hanyut { 0%, 100% { translate: 0 0; } 50% { translate: 26px 20px; } }

@media (prefers-reduced-motion: no-preference) {
  .blob { animation: mo-hanyut 16s ease-in-out infinite; }
  .blob.b { animation-duration: 20s; animation-delay: -6s; }
  .blob.c { animation-duration: 24s; animation-delay: -12s; }
  .bunting { transform-origin: 50% 0; animation: mo-turun 0.8s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
  .pita { animation: mo-layang 7s ease-in-out infinite; }
  .p2 { animation-delay: -3s; }
  .kilau { animation: mo-kerlip 3s ease-in-out infinite; }
  .k2 { animation-delay: -1s; } .k3 { animation-delay: -2s; }
  main > section:not(.envelope) :where(.eyebrow) { animation: mo-naik 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .rosette { animation: mo-pop 0.9s cubic-bezier(0.3, 1.3, 0.5, 1) 0.25s both; }
  .rosette > svg { transform-origin: 50% 40%; animation: mo-ayun 5s ease-in-out 1.2s infinite; }
  main > section:not(.envelope) :where(h1, h2) { animation: mo-naik 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
  main > section:not(.envelope) :where(.card) { animation: mo-naik 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
  .kutip { animation: mo-pop 0.7s cubic-bezier(0.3, 1.3, 0.5, 1) 0.45s both; }
  main > section:not(.envelope) :where(.lead, form, .note, .hint) { animation: mo-naik 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
  main .photos figure { animation: mo-naik 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  main .photos figure:nth-child(2) { animation-delay: 0.32s; }
  main .photos figure:nth-child(3) { animation-delay: 0.44s; }
  main .photos figure:nth-child(n+4) { animation-delay: 0.56s; }

  .env { animation: mo-layang 3.6s ease-in-out infinite; }
  .flap { transition: transform 0.5s ease-in; }
  .seal { transition: opacity 0.25s ease, scale 0.3s ease; }
  .peek { transition: translate 0.55s ease 0.28s; }
  .opening .env { animation: none; }
  .opening .seal { opacity: 0; scale: 1.5; }
  .opening .flap { transform: perspective(700px) rotateX(178deg); }
  .opening .peek { translate: 0 -84px; }
  .opening .envelope :is(.eyebrow, .hint, .env-title) { opacity: 0; transition: opacity 0.3s; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .confetti { display: none; } }


/* Kado kejutan: tema (bentuk & perilaku di kado.css). */
.kado-sec, .kartu-kado { --k-judul: var(--display); --k-teks: "Plus Jakarta Sans", system-ui, sans-serif; --k-aksen: var(--accent); --k-aksen2: var(--accent-2); --k-kertas: #fffaf0; --k-tinta: var(--ink); --k-judul-tinta: var(--ink); --k-latar: rgba(42, 33, 64, .55); }

/* Video unggahan (field video): ditaruh sebelum galeri, bingkai mengikuti warna teks template (currentColor). */
.vk { width: min(100%, 440px); margin: 34px auto; padding: 0 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.vk-layar { width: 100%; }
.vk-judul { margin: 0 0 12px; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.vk-layar { position: relative; margin: 0; padding: 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: 0 16px 34px rgba(0, 0, 0, .16); }
.vk-layar video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.vk-layar figcaption { margin-top: 10px; font-size: 14px; font-style: italic; opacity: .75; }