/* Mainan — ucapan bertema kotak mainan: langit berawan, balok huruf, kemasan "action figure edisi terbatas". */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root { --bg: #8fd3ff; --cloud: #ffffff; --ink: #1d2a4d; --soft: #4d6a94; --accent: #e5383b; --sun: #ffd23f; --c0: #e5383b; --c1: #ffd23f; --c2: #2a9d5c; --c3: #2f6fed; --card: #ffffff; --line: #1d2a4d; --btn-ink: #ffffff; --round: "Fredoka", system-ui, sans-serif; --sans: "Nunito", system-ui, sans-serif; }
/* Tone warna (field "tone"): langit = bawaan di atas. */
:root[data-tone="malam"] { --bg: #1b2452; --cloud: #33407a; --ink: #f4f6ff; --soft: #a9b4de; --accent: #ffd23f; --sun: #7bdff2; --card: #26306a; --line: #f4f6ff; --btn-ink: #1b2452; }
:root[data-tone="permen"] { --bg: #ffe3ef; --ink: #47204a; --soft: #9a6c98; --accent: #ff7aa8; --sun: #6c63ff; --c0: #ff7aa8; --c1: #ffc857; --c2: #5cc9a7; --c3: #6c63ff; --line: #47204a; }

/* Awan: tumpukan lingkaran putih yang diulang, bergeser pelan. */
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 22px 30px, var(--cloud) 20px, transparent 21px), radial-gradient(circle at 50px 22px, var(--cloud) 26px, transparent 27px), radial-gradient(circle at 82px 32px, var(--cloud) 19px, transparent 20px), radial-gradient(circle at 52px 40px, var(--cloud) 22px, transparent 23px), var(--bg); background-size: 240px 190px, 240px 190px, 240px 190px, 240px 190px, auto; background-position: 20px 30px, 20px 30px, 20px 30px, 20px 30px, 0 0; color: var(--ink); font: 700 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
em { font-style: normal; color: var(--accent); }
.kicker, .lbl { font: 600 13px/1.4 var(--round); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kicker { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 3px solid var(--line); }

.cover h1 { font: 600 40px/1.08 var(--round); }
/* Kotak mainan: peti kayu dengan tutup yang terangkat saat dibuka. */
.chest { position: relative; width: 190px; height: 150px; }
.chest .base { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border: 4px solid var(--line); border-radius: 8px 8px 14px 14px; background: repeating-linear-gradient(90deg, #c98a4b 0 36px, #b97a3c 36px 40px); }
.chest .base i { position: absolute; left: 50%; top: -6px; width: 34px; height: 30px; margin-left: -17px; border: 4px solid var(--line); border-radius: 6px; background: var(--sun); }
.chest .lid { position: absolute; left: -6px; right: -6px; bottom: 90px; height: 50px; border: 4px solid var(--line); border-radius: 60px 60px 6px 6px / 44px 44px 6px 6px; background: repeating-linear-gradient(90deg, #d79a5a 0 36px, #b97a3c 36px 40px); transform-origin: 6% 100%; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.cover:hover .lid { transform: rotate(-5deg); }
.opening .chest .lid { transform: rotate(-62deg); }
.open { min-height: 54px; padding: 0 28px; border: 4px solid var(--line); border-radius: 999px; background: var(--sun); color: var(--line); font: 600 18px/1 var(--round); cursor: pointer; box-shadow: 0 5px 0 var(--line); }
:root[data-tone="malam"] .open { color: #1b2452; }

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.blocks { font: 700 60px/1 var(--round); overflow-wrap: anywhere; }
.blocks.built { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 34px; }
.blocks span { width: 52px; height: 52px; border: 4px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: #fff; text-transform: uppercase; box-shadow: 0 5px 0 var(--line); animation: jatuh .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.blocks span[data-c="0"] { background: var(--c0); } .blocks span[data-c="1"] { background: var(--c1); color: #1d2a4d; } .blocks span[data-c="2"] { background: var(--c2); } .blocks span[data-c="3"] { background: var(--c3); }
.blocks span:nth-child(odd) { transform: rotate(-4deg); } .blocks span:nth-child(even) { transform: rotate(3deg); }
/* Dengan 3D aktif balok huruf digambar scene.js: balok CSS disembunyikan, kotaknya jadi acuan dan area ketuk. */
.poke { display: none; }
.gl .blocks { width: 100%; min-height: 150px; cursor: pointer; }
.gl .blocks span { visibility: hidden; animation: none; }
.gl .poke { display: block; margin-top: -6px; font-size: 13px; color: var(--soft); }
.blocks .gap { width: 18px; border: 0; box-shadow: none; background: none; }
@keyframes jatuh { from { opacity: 0; translate: 0 -70px; } to { opacity: 1; translate: 0 0; } }

/* Kemasan action figure: kartu karton dengan jendela plastik berisi foto. */
.pack { padding: 18px 18px 20px; border: 4px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 8px 0 var(--line); text-align: center; }
.pack header { display: flex; align-items: center; gap: 12px; text-align: left; }
.burst { flex: none; width: 74px; height: 74px; border-radius: 50%; background: var(--accent); color: var(--btn-ink); display: grid; place-items: center; text-align: center; font: 700 11px/1.15 var(--round); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-12deg); border: 3px dashed var(--card); outline: 3px solid var(--accent); }
.pack header small { display: block; font: 600 12px/1.3 var(--round); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.pack header b { font: 700 26px/1.05 var(--round); overflow-wrap: anywhere; }
.blister { margin: 16px auto 12px; width: 78%; aspect-ratio: 3 / 4; border: 4px solid var(--line); border-radius: 46% 46% 18px 18px / 30% 30% 18px 18px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 60%, #fff), var(--bg)); display: grid; place-items: center; font-size: 70px; color: var(--sun); position: relative; }
.blister::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .55) 0 12%, transparent 12% 30%, rgb(255 255 255 / .28) 30% 36%, transparent 36%); pointer-events: none; }
.blister img { width: 100%; height: 100%; object-fit: cover; }
.name { font: 700 34px/1.05 var(--round); overflow-wrap: anywhere; }
.only { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--sun); color: #1d2a4d; font: 600 13px/1.3 var(--round); }
.incl { margin-top: 16px; padding: 14px 16px; border-radius: 16px; border: 3px dashed var(--line); text-align: left; }
.lbl { margin-bottom: 8px; }
.incl li { position: relative; padding: 4px 0 4px 26px; font-size: 15px; line-height: 1.35; }
.incl li::before { content: "★"; position: absolute; left: 0; top: 3px; color: var(--accent); }
.fine { margin-top: 14px; font-size: 12px; color: var(--soft); }

.card { padding: 24px 20px; border: 4px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 8px 0 var(--line); }
.msg { font-size: 17px; line-height: 1.6; }
.sign { margin-top: 14px; font: 600 22px/1.1 var(--round); color: var(--accent); text-align: right; }
.album .lbl { display: table; margin: 0 auto 14px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 3px solid var(--line); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photos figure { margin: 0; border: 4px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 var(--line); background: var(--card); }
.photos figure:nth-child(odd) { transform: rotate(-2deg); } .photos figure:nth-child(even) { transform: rotate(2deg); }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.reply h2 { margin-bottom: 14px; font: 600 28px/1.1 var(--round); }
.hint { font-size: 14px; color: var(--soft); }
.btn { min-height: 52px; padding: 0 24px; border: 4px solid var(--line); border-radius: 999px; background: var(--accent); color: var(--btn-ink); font: 600 16px/1.2 var(--round); cursor: pointer; box-shadow: 0 5px 0 var(--line); }
.btn.ghost { min-height: 44px; padding: 0 14px; border-width: 3px; background: var(--card); color: var(--ink); font-size: 14px; box-shadow: 0 3px 0 var(--line); }
textarea { border: 3px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: 700 15px/1.5 var(--sans); }
textarea::placeholder { color: var(--soft); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.js-only { display: none; }
.js .js-only { display: block; }
main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0 22px; }

/* Cara dibuka "amplop": sampul diketuk dulu. Tanpa JS sampul dilewati dan semua isi langsung tampil. */
.cover { display: none; min-height: 100vh; min-height: 100svh; padding: 48px 0 40px; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; cursor: pointer; }
.js body[data-opener="amplop"]:not(.opened) .cover { display: flex; }
.js body[data-opener="amplop"]:not(.opened) .content,
.js body[data-opener="amplop"]:not(.opened) .foot { display: none; }
.content { display: flex; flex-direction: column; gap: 28px; padding: 40px 0 54px; }
.opened .content { animation: masuk .7s cubic-bezier(.2, .7, .2, 1) both; }
form { display: flex; flex-direction: column; gap: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; resize: vertical; }
.msg { white-space: pre-line; overflow-wrap: anywhere; }
.music-toggle { position: fixed; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
.foot { position: relative; z-index: 1; padding: 8px 22px 34px; text-align: center; font-size: 12px; color: var(--soft); }
.anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.anim .reveal.in { opacity: 1; transform: none; }
@keyframes masuk { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes napas { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Adegan 3D (scene.js + three.js): kanvas menempel di layar di belakang isi. Tanpa WebGL kanvas tetap tak terlihat
   dan gambar CSS/SVG biasa yang tampil. */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.gl .scene { opacity: 1; }


/* Kado kejutan: tema (bentuk & perilaku di kado.css). */
.kado-sec, .kartu-kado { --k-judul: var(--round); --k-judul-w: 600; --k-teks: var(--sans); --k-aksen: var(--c0); --k-aksen-b: var(--c3); --k-aksen-c: var(--c2); --k-aksen2: var(--c1); --k-kertas: var(--card); --k-tinta: var(--ink); --k-judul-tinta: var(--ink); --k-tombol-tinta: var(--btn-ink); --k-latar: rgba(29, 42, 77, .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; }