/* Tulus — permintaan maaf: surat gading bersegel lilin di atas warna malam, ranting zaitun emas. */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; 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: #0b1428;
  --bg: #14213d;
  --bg-2: #22365c;
  --text: #f1eee6;
  --muted: #b3bdd2;
  --paper: #f8f2e4;
  --paper-2: #eadfc6;
  --paper-3: #d9caa8;
  --ink: #27304a;
  --ink-soft: #636b83;
  --gold: #dcbb78;
  --gold-soft: #f0d9a2;
  --gold-deep: #a8843f;
  --seal: #8f2f3a;
  --seal-2: #6b1f29;
  --emas: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-soft) 45%, var(--gold-deep) 100%);
  --display: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Tone warna (field "tone"): biru-langit = bawaan di atas. */
:root[data-tone="peach"] { --page: #22130c; --bg: #382015; --bg-2: #5a3524; --muted: #d8c2b4; --ink: #40291e; --ink-soft: #7a6156; --seal: #b0563a; --seal-2: #8a3e27; }
:root[data-tone="mint"] { --page: #0a2018; --bg: #123428; --bg-2: #1f5a43; --muted: #b6d2c5; --ink: #1f3a2e; --ink-soft: #5c7468; }
:root[data-tone="merah-muda"] { --page: #230a0e; --bg: #3a1419; --bg-2: #5e2430; --muted: #dfc0c6; --ink: #40202a; --ink-soft: #7c5a63; --seal: #b78a3c; --seal-2: #8f6a28; }

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 16px/1.7 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:
    radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--bg-2) 90%, transparent), transparent 100%),
    radial-gradient(70% 34% at 50% 100%, color-mix(in srgb, var(--bg-2) 70%, transparent), transparent 100%),
    var(--bg);
}
main::before { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); pointer-events: none; }
@media (min-width: 560px) { main { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); } }
section { min-height: 100vh; min-height: 100svh; padding: 64px 30px; 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: 500; }
p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); }
.hint { font: italic 400 17px/1.4 var(--display); color: var(--muted); }
.js-only { display: none; }
.pembatas { width: 180px; height: 18px; }

.star { position: absolute; }
.k1 { width: 16px; height: 16px; top: 11%; left: 14%; }
.k2 { width: 11px; height: 11px; top: 18%; right: 15%; }
.k3 { width: 13px; height: 13px; bottom: 14%; right: 20%; }

/* Hero: lingkar ranting zaitun */
.wreath { position: relative; width: 320px; max-width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; margin: 6px 0; }
.wreath svg { position: absolute; top: 4px; width: 138px; height: 290px; }
.wreath .kiri { left: -8px; }
.wreath .kanan { right: -8px; transform: scaleX(-1); }
.wreath h1 { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.wreath h1 span { font: 500 32px/1.1 var(--display); letter-spacing: 0.02em; color: var(--text); }
.wreath h1 em { font: 400 78px/0.95 var(--script); background: var(--emas); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 12px 8px; }
.sub { font: italic 400 21px/1.4 var(--display); color: var(--muted); }
.hero .hint { margin-top: 10px; }

/* Surat */
.letter { position: relative; width: 100%; padding: 34px 28px 58px; text-align: left; color: var(--ink); border-radius: 3px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--paper-2) 100%);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.letter::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--gold-deep) 55%, transparent); pointer-events: none; }
.letter .pembatas { margin: 0 auto 18px; }
.salam { font: 400 46px/1.15 var(--script); color: var(--ink); margin-bottom: 6px; overflow-wrap: anywhere; }
.message .text { white-space: pre-line; font: 400 21px/1.65 var(--display); color: var(--ink); }
.from { margin-top: 22px; padding-right: 74px; font: italic 400 18px/1.4 var(--display); color: var(--ink-soft); }
.from span { display: block; font: 400 44px/1.15 var(--script); color: var(--ink); overflow-wrap: anywhere; }
.cap, .seal { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f6e6c6; font: italic 500 30px/1 var(--display); text-transform: uppercase;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--seal) 70%, #fff) 0%, var(--seal) 38%, var(--seal-2) 100%);
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.55), inset 0 0 0 4px color-mix(in srgb, var(--seal-2) 70%, transparent), inset 0 0 0 5px color-mix(in srgb, #fff 18%, transparent); }
.cap { position: absolute; right: 22px; bottom: -22px; width: 66px; height: 66px; rotate: -8deg; }

/* Galeri */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 6px; align-items: start; }
.photos figure { margin: 0; padding: 7px 7px 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--gold-deep), 0 18px 32px -16px rgba(0, 0, 0, 0.6); rotate: -1.6deg; }
.photos figure:nth-child(even) { rotate: 1.6deg; margin-top: 20px; }
.photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(0.92); }
.photos figure:nth-child(odd):last-child { grid-column: 1 / -1; width: 64%; justify-self: center; margin-top: 0; }

/* Balasan */
.reply .zaitun { width: 54px; height: 113px; rotate: 62deg; margin: -18px 0 -22px; }
.reply h2 { font-size: 34px; line-height: 1.15; }
.reply h2 em { display: block; font: 400 60px/1.1 var(--script); background: var(--emas); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 10px; }
.lead { color: var(--muted); margin-top: 6px; font: italic 400 18px/1.4 var(--display); }
.reply form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--emas); color: #2e2108; font: 700 15px/1 var(--body); cursor: pointer; box-shadow: 0 12px 24px -12px var(--gold-deep); }
.btn.ghost { background: color-mix(in srgb, var(--page) 45%, transparent); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent); }
.btn:focus-visible, textarea:focus-visible, .envelope:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
textarea { font: inherit; font-size: 16px; padding: 14px 16px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--page) 50%, transparent); color: var(--text); min-height: 96px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, transparent); resize: vertical; }
textarea::placeholder { color: var(--muted); opacity: 0.8; }
.note { color: var(--gold-soft); font-weight: 600; }

/* 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: 500 36px/1.15 var(--display); max-width: 8.5em; margin-bottom: 20px; }
.env-title em { display: block; font: 400 62px/1 var(--script); background: var(--emas); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 4px 10px 6px; }
.env { position: relative; width: 288px; height: 196px; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.5)); }
.env > span { position: absolute; }
.liner { inset: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--gold-deep) 0 1.5px, var(--bg-2) 1.5px 9px); }
.peek { left: 16px; right: 16px; top: 14px; height: 120px; border-radius: 3px; background: var(--paper); box-shadow: 0 0 0 1px var(--gold-deep); }
.pocket { inset: 0; border-radius: 8px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 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(--paper-3) 85%, transparent)); clip-path: polygon(0 100%, 50% 50%, 100% 100%); }
.flap { inset: 0 0 auto 0; height: 118px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.seal { left: 50%; top: 82px; width: 68px; height: 68px; margin-left: -34px; }
.envelope .hint { margin-top: 22px; }

/* Story */
.bars { display: none; }
.js [data-opener=story] .bars { display: flex; position: fixed; top: 22px; left: 50%; transform: translateX(-50%); width: min(432px, calc(100% - 48px)); gap: 4px; z-index: 5; }
.bars span { flex: 1; height: 2px; border-radius: 2px; background: var(--text); opacity: 0.22; }
.bars span.done { opacity: 1; background: var(--gold); }
.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: 24px 24px 34px; text-align: center; font-size: 13px; color: var(--muted); background: var(--bg); border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
footer a { color: var(--gold); font-weight: 700; }
.music-toggle { position: fixed; right: max(16px, calc(50% - 240px + 16px)); bottom: 16px; z-index: 20; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; background: var(--bg); color: var(--gold-soft); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }

.message, .gallery, .reply { min-height: 0; padding: 56px 30px; }
.message { padding-bottom: 78px; }
.reply { padding-bottom: 78px; }
.js [data-opener=story] .message, .js [data-opener=story] .gallery, .js [data-opener=story] .reply { min-height: 100vh; min-height: 100svh; }

/* ---------- 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 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-cap { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.3; scale: 0.7; } }
@keyframes mo-angguk { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; translate: 0 -6px; } }
@keyframes mo-tumbuh { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  :root { --mo-e: cubic-bezier(0.2, 0.7, 0.2, 1); }
  .star { animation: mo-kerlip 3.6s ease-in-out infinite; }
  .k2 { animation-delay: -1.2s; } .k3 { animation-delay: -2.2s; }
  main > section:not(.envelope) :where(.eyebrow) { animation: mo-naik 0.9s var(--mo-e) 0.05s both; }
  .wreath svg { animation: mo-tumbuh 1.6s var(--mo-e) 0.15s both; }
  main > section:not(.envelope) :where(h1, h2) { animation: mo-pudar 1.2s ease 0.7s both; }
  main > section:not(.envelope) :where(.sub, .lead) { animation: mo-naik 0.9s var(--mo-e) 1s both; }
  main > section:not(.envelope) :where(.letter) { animation: mo-naik 1s var(--mo-e) 0.1s both; }
  .cap { animation: mo-cap 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1s both; }
  main > section:not(.envelope) :where(.quick, form, .note, .hint) { animation: mo-naik 0.8s var(--mo-e) 1.1s both; }
  main .photos figure { animation: mo-naik 0.9s var(--mo-e) 0.3s both; }
  main .photos figure:nth-child(2) { animation-delay: 0.44s; }
  main .photos figure:nth-child(3) { animation-delay: 0.58s; }
  main .photos figure:nth-child(n+4) { animation-delay: 0.72s; }

  .env { animation: mo-angguk 4s 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 -86px; }
  .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; } }

/* 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; }