/* Surat — ucapan permintaan maaf: amplop krem di atas biru pucat, surat tulisan tangan di kertas bergaris. */
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: normal; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root { --sky: #dce6f2; --navy: #1e2f4d; --soft: #3f5272; --line: #a9b9d0; --paper: #fffdf8; --ruled: #d9e2ee; --seal: #b5425a; --serif: "Instrument Serif", Georgia, serif; --hand: "Caveat", cursive; --sans: "Plus Jakarta Sans", system-ui, sans-serif;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #1e2f4d;
}

/* Tone warna (field "tone"): biru-langit = bawaan di atas. */
:root[data-tone="peach"] { --sky: #f2e2dc; --navy: #4d2e1e; --soft: #72503f; --line: #d0b5a9; --ruled: #eedfd9; --tn-1: #4d2e1e; }
:root[data-tone="mint"] { --sky: #dcf2e6; --navy: #1e4d38; --soft: #3f725a; --line: #a9d0bc; --ruled: #d9eee3; --tn-1: #1e4d38; }
:root[data-tone="merah-muda"] { --sky: #f2dce0; --navy: #4d1e22; --soft: #723f44; --line: #d0a9ae; --ruled: #eed9dc; --tn-1: #4d1e22; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky); }
body { margin: 0; background: var(--sky); color: var(--navy); font: 500 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
main { max-width: 480px; margin: 0 auto; padding: 28px 22px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hint { font-size: 14px; color: var(--soft); text-align: center; }

/* Amplop (hanya mode amplop dengan JS) */
.envelope { display: none; }
.js body[data-opener="amplop"] .envelope { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; cursor: pointer; }
.js body[data-opener="amplop"] .letter-box { display: none; }
.js body[data-opener="amplop"].opened .envelope { display: none; }
.js body[data-opener="amplop"].opened .letter-box { display: flex; animation: muncul .7s ease both; }
.js body[data-opener="amplop"] footer { display: none; }
.js body[data-opener="amplop"].opened footer { display: block; }
.envelope .lead { font-size: 15px; font-weight: 600; }
.envelope h1 { font: 400 44px/1 var(--serif); }
.pack { position: relative; width: min(300px, 100%); aspect-ratio: 3 / 2; border-radius: 10px; background: #f7f2e8; box-shadow: 0 24px 40px color-mix(in srgb, var(--tn-1) 18%, transparent); overflow: hidden; transition: transform .25s ease; }
.envelope:hover .pack { transform: translateY(-4px) rotate(-1deg); }
.pack svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal { position: absolute; left: 50%; top: 48%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--seal); color: #f7f2e8; display: flex; align-items: center; justify-content: center; font: italic 400 22px/1 var(--serif); box-shadow: 0 3px 0 #8e2f44; text-transform: uppercase; }

/* Surat */
.letter-box { flex: 1; flex-direction: column; gap: 18px; display: flex; }
.paper { flex: 1 1 auto; min-height: 380px; padding: 30px 24px 22px; border-radius: 6px; background-color: var(--paper); background-image: repeating-linear-gradient(var(--paper) 0, var(--paper) 33px, var(--ruled) 33px, var(--ruled) 34px); box-shadow: 0 20px 36px color-mix(in srgb, var(--tn-1) 16%, transparent); transform: rotate(-1deg); display: flex; flex-direction: column; gap: 6px; font: 400 25px/34px var(--hand); color: var(--navy); }
.greet { font-weight: 700; }
.body { white-space: pre-line; overflow-wrap: anywhere; }
.sign { margin-top: auto; align-self: flex-end; font-weight: 700; }
.photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 6px 0; }
.photos figure { margin: 0; width: calc(50% - 6px); padding: 6px 6px 22px; background: #fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--tn-1) 16%, transparent); transform: rotate(-2deg); }
.photos figure:nth-child(even) { transform: rotate(2deg); }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photos figure:only-child { width: 70%; }

.reply { display: flex; flex-direction: column; gap: 10px; }
.who { font-size: 14px; font-weight: 700; }
.note { padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.reply form { display: flex; flex-direction: column; gap: 10px; }
.quick { display: flex; flex-direction: column; gap: 10px; }
.opt { min-height: 50px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--navy); font: 700 15px/1.2 var(--sans); cursor: pointer; }
.opt.first { background: #fff; }
.opt:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.reply textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--navy); font: 500 15px/1.4 var(--sans); resize: vertical; }
.send { min-height: 50px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font: 700 15px/1.2 var(--sans); cursor: pointer; }
footer { padding: 4px 16px 26px; text-align: center; font-size: 12px; color: var(--soft); }

@keyframes muncul { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.music-toggle { position: fixed; bottom: 16px; right: max(14px, calc(50% - 226px)); z-index: 50; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 8px 20px color-mix(in srgb, var(--tn-1) 22%, transparent); cursor: pointer; }
.music-toggle svg { width: 18px; height: 18px; }
.music-toggle[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: var(--navy); transform: rotate(-45deg); }
html:not(.js) .music-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js body[data-opener="amplop"].opened .letter-box { animation: none; }
  .pack { transition: none; }
}

/* ---------- Animasi ---------- */
.flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: #ede5d4; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.pack { perspective: 700px; }
.envelope.opening .flap { transform: rotateX(180deg); opacity: 0; transition: transform .7s cubic-bezier(.5, 0, .3, 1), opacity .3s .45s; }
.envelope.opening .seal { opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; }
.envelope.opening .pack { transform: translateY(-6px); }
@media (prefers-reduced-motion: no-preference) {
  .pack { animation: apung 3.6s ease-in-out infinite; }
  .envelope.opening .pack { animation: none; }
  .envelope h1, .envelope .lead, .envelope .hint { animation: naik .9s cubic-bezier(.2, .7, .2, 1) both; }
  .envelope h1 { animation-delay: .15s; }
  .envelope .hint { animation-delay: .3s; }
  .seal { animation: denyut 2.2s ease-in-out infinite; }
  .js body[data-opener="amplop"].opened .paper { animation: surat-naik 1s cubic-bezier(.2, .8, .2, 1) both; }
  .js body[data-opener="amplop"].opened .photos figure { animation: naik .8s .5s cubic-bezier(.2, .7, .2, 1) both; }
  .js body[data-opener="amplop"].opened .reply { animation: naik .8s .8s cubic-bezier(.2, .7, .2, 1) both; }
  .opt { transition: background .2s, color .2s, transform .15s; }
  .opt:active { transform: scale(.97); }
}
@keyframes apung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes denyut { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes surat-naik { from { opacity: 0; translate: 0 90px; rotate: 4deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

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