/* Fitri — ucapan Idul Fitri: hijau zamrud, emas, krem. Ketupat, bulan sabit, lentera. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; src: url("fonts/amiri.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; src: url("fonts/amiri-arabic.woff2") format("woff2"); font-display: swap; unicode-range: U+0600-06FF, U+FE70-FEFF; }

:root {
  --g9: #082a1f; --g8: #0d3a2b; --g7: #124b38; --g6: #1a5c45;
  --gold: #d9b56a; --gold-l: #f1d996; --gold-d: #85601f;
  --cream: #f7efdc; --paper: #fffaf0; --ink: #1d3a2e;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Amiri", Georgia, serif;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #114634; --tn-2: #1b6249; --tn-3: #082a1f; --tn-4: #233f33;
}

/* Tone warna (field "tone"): hijau-zamrud = bawaan di atas. */
:root[data-tone="marun"] { --g9: #2a080d; --g8: #3a0d14; --g7: #4b121b; --g6: #5c1a25; --ink: #3a1d24; --tn-1: #461119; --tn-2: #621b27; --tn-3: #2a080d; --tn-4: #3f232a; }
:root[data-tone="ungu-tua"] { --g9: #1b082a; --g8: #260d3a; --g7: #31124b; --g6: #3d1a5c; --ink: #2b1d3a; --tn-1: #2e1146; --tn-2: #411b62; --tn-3: #1b082a; --tn-4: #30233f; }
:root[data-tone="biru-malam"] { --g9: #08112a; --g8: #0d1a3a; --g7: #12224b; --g6: #1a2e5c; --ink: #1d283a; --tn-1: #112046; --tn-2: #1b3062; --tn-3: #08112a; --tn-4: #232e3f; }
* { box-sizing: border-box; }
html { background: var(--g9); }
body { margin: 0; min-height: 100vh; color: var(--cream); font: 18px/1.7 var(--body); -webkit-font-smoothing: antialiased; background: radial-gradient(ellipse at 50% 0%, var(--tn-1) 0%, var(--g9) 60%) fixed, var(--g9); position: relative; }
body::before { content: ""; position: fixed; inset: 0; background: url("img/pola.svg") 0 0 / 56px 56px; opacity: 0.07; pointer-events: none; }
main { max-width: 480px; margin: 0 auto; position: relative; z-index: 1; background: var(--g8); box-shadow: 0 0 0 1px rgba(217, 181, 106, 0.18), 0 30px 90px rgba(0, 0, 0, 0.55); }
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; overflow: hidden; }
h1, h2, p { margin: 0; }
img { display: block; }
.eyebrow { font: 600 14px/1.4 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.hint { font: italic 500 17px/1.4 var(--serif); color: rgba(247, 239, 220, 0.82); }

/* Bingkai geometris dengan sudut bintang delapan */
.frame { position: absolute; inset: 14px; border: 1px solid rgba(217, 181, 106, 0.4); pointer-events: none; z-index: 1; }
.frame i { position: absolute; width: 54px; height: 54px; background: url("img/sudut.svg") 0 0 / 100% 100% no-repeat; }
.frame i:nth-child(1) { top: -4px; left: -4px; }
.frame i:nth-child(2) { top: -4px; right: -4px; transform: scaleX(-1); }
.frame i:nth-child(3) { bottom: -4px; left: -4px; transform: scaleY(-1); }
.frame i:nth-child(4) { bottom: -4px; right: -4px; transform: scale(-1, -1); }
.envelope::before, .hero::before, .reply::before, .gallery::before { content: ""; position: absolute; inset: 0; background: url("img/pola.svg") 0 0 / 48px 48px; opacity: 0.075; pointer-events: none; }

/* Amplop */
.envelope { display: none; background: radial-gradient(ellipse at 50% 45%, var(--tn-2) 0%, var(--g8) 55%, var(--g9) 100%); }
.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.45s ease both; }
.envelope > p, .envelope > .env { position: relative; z-index: 2; }
.env-moon { width: 84px; height: auto; position: relative; z-index: 2; margin-bottom: 6px; }
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: -8px; }
.env-to { font: 500 40px/1.15 var(--serif); color: var(--cream); max-width: 340px; text-wrap: balance; }
.env-to span { display: block; font-style: italic; font-size: 22px; color: var(--gold); }
.env { width: min(300px, 78vw); height: auto; overflow: visible; margin: 34px 0 20px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.4)); animation: melayang 4.5s ease-in-out infinite; }
.env .ar { font-family: "Amiri", serif; font-size: 34px; fill: #a87a2c; }
.env .flap-front, .env .flap-back, .env .letter, .env .seal { transform-box: view-box; }
.env .flap-front, .env .flap-back { transform-origin: 150px 50px; }
.env .flap-front { transition: transform 0.24s ease-in; }
.env .flap-back { transform: scaleY(0); transition: transform 0.22s ease-out 0.24s; }
.env .seal { transform-origin: 150px 146px; transition: opacity 0.16s, transform 0.16s; }
.env .letter { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s; }
.opening .env { animation: none; }
.opening .env .flap-front { transform: scaleY(0); }
.opening .env .flap-back { transform: scaleY(-1); }
.opening .env .seal { opacity: 0; transform: scale(0.6); }
.opening .env .letter { transform: translateY(-58px); }
.envelope .hint { animation: denyut 2.4s ease-in-out infinite; }

/* Pembuka */
.hero { background: radial-gradient(ellipse at 50% 26%, var(--tn-2) 0%, var(--g8) 52%, var(--g9) 100%); padding: 200px 34px 150px; }
.sky { position: absolute; inset: 0 0 auto; height: 240px; pointer-events: none; }
.lantern { position: absolute; width: 46px; height: auto; transform-origin: 50% 0; animation: ayun 5.2s ease-in-out infinite alternate; }
.l1 { left: 9%; top: -104px; }
.l2 { left: 27%; top: -112px; width: 32px; animation-duration: 6.4s; animation-delay: -2s; opacity: 0.85; }
.l3 { right: 9%; top: -74px; width: 52px; animation-duration: 4.6s; animation-delay: -1s; }
.moon { position: absolute; right: 27%; top: 34px; width: 104px; height: auto; }
.hero-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ar { font: 400 40px/1.5 "Amiri", serif; color: var(--gold-l); }
.translit { font: italic 500 17px/1.4 var(--serif); color: rgba(247, 239, 220, 0.75); letter-spacing: 0.02em; }
.rule { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.rule::before, .rule::after { content: ""; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { transform: scaleX(-1); }
.rule span { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--g8), 0 0 0 4px rgba(217, 181, 106, 0.6); }
.hero h1 { font: 600 76px/0.95 var(--serif); letter-spacing: -0.01em; margin: 6px 0 12px; background: linear-gradient(180deg, #fff3cf 0%, #f1d996 45%, #c99a45 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 4px 6px; }
.maaf { font: italic 500 28px/1.25 var(--serif); color: var(--cream); }
.to-chip { margin-top: 26px; padding: 10px 22px; border: 1px solid rgba(217, 181, 106, 0.55); border-radius: 999px; font: 500 17px/1.35 var(--serif); letter-spacing: 0.04em; color: var(--cream); background: color-mix(in srgb, var(--tn-3) 45%, transparent); max-width: 100%; }
.ketupat-pair { position: absolute; inset: auto 0 0; height: 130px; pointer-events: none; }
.ketupat-pair img { position: absolute; width: 78px; height: auto; bottom: 18px; }
.ketupat-pair img:first-child { left: 30px; transform: rotate(-16deg); }
.ketupat-pair img:last-child { right: 30px; width: 64px; bottom: 30px; transform: rotate(14deg); }
.js-only { display: none; }
.js [data-opener=story] .js-only { display: block; }
.hero .js-only { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 2; font-size: 15px; }

/* Pesan */
.message { background: #efe3c5; color: var(--ink); padding: 92px 22px 64px; }
.message::before { content: ""; position: absolute; inset: 0; background: url("img/pola.svg") 0 0 / 48px 48px; opacity: 0.16; pointer-events: none; }
.card { position: relative; width: 100%; background: var(--paper); border: 1px solid #dcc287; border-radius: 4px; padding: 58px 26px 38px; box-shadow: 0 24px 50px -24px rgba(60, 40, 5, 0.45); }
.card::before { content: ""; position: absolute; inset: 7px; border: 1px solid #ecdcb0; pointer-events: none; }
.card-ketupat { position: absolute; top: -46px; left: 50%; width: 64px; height: auto; margin-left: -32px; filter: drop-shadow(0 8px 10px rgba(30, 50, 10, 0.25)); }
.message .eyebrow { color: var(--gold-d); }
.salam { font: italic 500 26px/1.25 var(--serif); color: var(--g7); margin: 14px 0 12px; }
.message .text { font: 18px/1.85 var(--body); color: var(--tn-4); white-space: pre-line; text-wrap: pretty; }
.from { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.from span { font: italic 500 18px/1.3 var(--serif); color: #5a6b5f; }
.from strong { font: 600 30px/1.2 var(--serif); color: var(--g7); }
.from::before { content: ""; width: 9px; height: 9px; margin-bottom: 12px; background: var(--gold); transform: rotate(45deg); }

/* Galeri: bingkai lengkung */
.gallery { background: var(--g8); gap: 26px; }
.arches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.arches img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 6px 6px; outline: 1px solid rgba(217, 181, 106, 0.6); outline-offset: 5px; }
.arches img:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 200px 200px 6px 6px / 130px 130px 6px 6px; }

/* Balasan */
.reply { background: radial-gradient(ellipse at 50% 20%, var(--tn-2) 0%, var(--g8) 55%, var(--g9) 100%); padding: 72px 34px 64px; }
.reply > *:not(.frame) { position: relative; z-index: 2; }
.reply-moon { width: 78px; height: auto; margin-bottom: 4px; }
.reply h2 { font: 500 44px/1.05 var(--serif); color: var(--cream); text-wrap: balance; margin-bottom: 4px; }
.reply h2 em { font-style: italic; color: var(--gold-l); }
.reply form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 6px; }
.quick { display: flex; flex-direction: column; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f3dc9c, #cfa553); color: var(--g9); font: 600 19px/1.25 var(--serif); letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.btn.ghost { background: rgba(255, 250, 240, 0.04); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, 0.6); font: 400 16px/1.35 var(--body); }
.btn:hover { filter: brightness(1.06); }
.btn.ghost:hover { background: rgba(217, 181, 106, 0.14); }
.btn:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
textarea { font: 17px/1.5 var(--body); padding: 14px 16px; border: 1px solid rgba(217, 181, 106, 0.45); border-radius: 16px; background: rgba(255, 250, 240, 0.06); color: var(--cream); min-height: 104px; resize: vertical; }
textarea::placeholder { color: rgba(247, 239, 220, 0.6); }
.note { font: 500 20px/1.4 var(--serif); color: var(--gold-l); padding: 12px 18px; border: 1px solid rgba(217, 181, 106, 0.45); border-radius: 14px; }
footer { position: relative; z-index: 1; padding: 26px; text-align: center; font: 15px/1.4 var(--serif); letter-spacing: 0.04em; color: rgba(247, 239, 220, 0.6); }
footer a { color: var(--gold-l); }

/* Story */
.bars { display: none; }
.js [data-opener=story] .bars { display: flex; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: min(452px, calc(100% - 28px)); gap: 4px; z-index: 30; color: var(--gold); }
.bars span { flex: 1; height: 3px; border-radius: 3px; background: currentColor; opacity: 0.3; }
.bars span.done { opacity: 1; }
.js [data-opener=story] [data-step] { display: none; cursor: pointer; }
.js [data-opener=story] [data-step].active { display: flex; animation: muncul 0.45s ease both; }
.js [data-opener=story] footer { display: none; }

.music-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; border: 1px solid rgba(217, 181, 106, 0.7); border-radius: 50%; background: var(--g8); color: var(--gold-l); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }

@keyframes muncul { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ayun { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes melayang { 50% { transform: translateY(-6px); } }
@keyframes denyut { 50% { opacity: 0.6; } }
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 700px) {
  html, body { background: url("img/bulan.svg") no-repeat calc(50% - 470px) 70px / 210px auto fixed, url("img/lentera.svg") no-repeat calc(50% + 400px) -150px / 64px auto fixed, url("img/lentera.svg") no-repeat calc(50% + 500px) -70px / 84px auto fixed, url("img/ketupat.svg") no-repeat calc(50% - 400px) calc(100% - 50px) / 110px auto fixed, radial-gradient(ellipse at 50% 0%, var(--tn-1) 0%, var(--g9) 60%) fixed, var(--g9); }
  body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35) 100%); pointer-events: none; }
}
/* Mode langsung & tanpa JS: bagian setelah pembuka mengikuti tinggi isinya */
[data-opener=langsung] main > section:not(.hero), [data-opener=amplop].opened main > section:not(.hero), html:not(.js) main > section:not(.hero) { min-height: 0; padding-top: 96px; padding-bottom: 84px; }

/* ---------- Animasi ---------- */
@media (prefers-reduced-motion: no-preference) {
  main > section:not(.envelope) :where(.eyebrow) { animation: mo-blur .8s var(--mo-e) .05s both; }
  main > section:not(.envelope) :where(h1, h2) { animation: mo-blur .9s var(--mo-e) .16s both; }
  main > section:not(.envelope) :where(.text, .lead, .letter) { animation: mo-blur .9s var(--mo-e) .34s both; }
  main > section:not(.envelope) :where(.from) { animation: mo-blur .8s var(--mo-e) .52s both; }
  main > section:not(.envelope) :where(.photos) { animation: mo-blur .9s var(--mo-e) .46s both; }
  main > section:not(.envelope) :where(.quick, form, .note) { animation: mo-blur .8s var(--mo-e) .62s both; }
  main > section:not(.envelope) :where(.hint) { animation: mo-blur .8s var(--mo-e) .75s both; }
  :root { --mo-e: cubic-bezier(.2,.7,.2,1); }

  .ketupat-pair { transform-origin: 50% 0; animation: mo-ayun 6.5s ease-in-out infinite alternate; }
  .moon, .env-moon, .reply-moon { animation: mo-ambang 9s ease-in-out infinite; }
}
@keyframes mo-denyut { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mo-ambang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes mo-ayun { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
@keyframes mo-putar { to { rotate: 360deg; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .72; } }
@keyframes mo-kilau { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mo-geser { from { translate: -26px 0; } to { translate: 26px 0; } }
@keyframes mo-garis { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes mo-naik { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-blur { from { opacity: 0; filter: blur(10px); scale: 1.05; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes mo-pop { from { opacity: 0; scale: .55; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mo-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes mo-hujan { to { background-position: 0 520px, 0 520px, 0 520px, 0 780px, 0 780px; } }
@keyframes mo-wiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

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