/* Mixtape — ucapan bertema musik: kaset dengan rol berputar, daftar lagu, catatan sampul. */
@font-face { font-family: "Bagel Fat One"; src: url("fonts/bagel-fat-one.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 { --bg: #f4e9d4; --ink: #1d2433; --soft: #7a7362; --accent: #e4572e; --second: #17406d; --card: #fffaf0; --line: #dfcfae; --shell: #1d2433; --btn-ink: #fffaf0; --fat: "Bagel Fat One", system-ui, sans-serif; --sans: "Plus Jakarta Sans", system-ui, sans-serif; }
/* Tone warna (field "tone"): retro = bawaan di atas. */
:root[data-tone="neon"] { --bg: #14101f; --ink: #f6f0ff; --soft: #9d92b8; --accent: #ff4fa3; --second: #39e6d0; --card: #1f1930; --line: #382e54; --shell: #2a2140; --btn-ink: #14101f; }
:root[data-tone="laut"] { --bg: #e3f1f4; --ink: #12333a; --soft: #5f8088; --accent: #0f7c8c; --second: #f2a03d; --card: #ffffff; --line: #bcdbe1; --shell: #12333a; --btn-ink: #ffffff; }

body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 500 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
em { font-style: normal; color: var(--accent); }
.kicker, .lbl { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--second); }

.cover h1 { font: 400 44px/1.02 var(--fat); }
/* Kaset: cangkang gelap, label warna, jendela dengan dua rol bergigi. */
.tape { width: 260px; padding: 14px 14px 18px; border-radius: 14px; background: var(--shell); box-shadow: 0 18px 34px rgb(0 0 0 / .25); transform: rotate(-3deg); }
.tape .label { padding: 10px 12px; border-radius: 6px; background: linear-gradient(180deg, var(--card) 0 62%, var(--accent) 62% 81%, var(--second) 81%); color: #1d2433; text-align: left; }
.tape .label b { display: block; font: 400 22px/1.1 var(--fat); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tape .label span { display: block; margin-bottom: 20px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.window { margin: 12px auto 0; width: 62%; height: 46px; border-radius: 23px; background: #0b0d12; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; }
.window i { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#fff 0 12%, #0b0d12 12% 25%, #fff 25% 37%, #0b0d12 37% 50%, #fff 50% 62%, #0b0d12 62% 75%, #fff 75% 87%, #0b0d12 87%); border: 3px solid #fff; }
.opening .window i, .playing .window i { animation: putar 1.6s linear infinite; }
/* Dengan 3D aktif kaset digambar scene.js di kotak .tape (kaset CSS disembunyikan, ukurannya tetap jadi acuan). */
.gl .tape { background: none; box-shadow: none; }
.gl .tape > * { visibility: hidden; }
.gl .tape { height: 190px; }
.gl .tape.small { width: 240px; height: 176px; margin-top: 50px; }
.tape.small { width: 200px; margin-top: 14px; transform: rotate(2deg); }
.tape.small .label b { font-size: 18px; }
.tape.small .label span { margin-bottom: 12px; }
.open { min-width: 130px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--accent); color: var(--btn-ink); font: 400 20px/1 var(--fat); cursor: pointer; animation: napas 2s ease-in-out infinite; }

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero h1 { font: 400 70px/.95 var(--fat); color: var(--accent); overflow-wrap: anywhere; }
.lbl { margin-bottom: 12px; }
.tracks { counter-reset: lagu; display: flex; flex-direction: column; }
.tracks li { counter-increment: lagu; display: flex; gap: 14px; padding: 14px 0; border-top: 2px solid var(--line); }
.tracks li:last-child { border-bottom: 2px solid var(--line); }
.tracks li::before { content: counter(lagu, decimal-leading-zero); flex: none; width: 34px; font: 400 24px/1.1 var(--fat); color: var(--second); }
.tracks h2 { font: 800 18px/1.2 var(--sans); overflow-wrap: anywhere; }
.tracks span { font-size: 13px; font-weight: 600; color: var(--soft); }
.tracks p { margin-top: 4px; font-size: 14px; font-style: italic; }

.card { padding: 24px 20px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); }
.msg { font-size: 17px; line-height: 1.6; }
.sign { margin-top: 14px; font: 400 24px/1.1 var(--fat); color: var(--accent); text-align: right; }
.album .lbl { text-align: center; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photos figure { margin: 0; border-radius: 6px; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 8px 18px rgb(0 0 0 / .14); }
.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: 400 30px/1.1 var(--fat); }
.hint { font-size: 13px; color: var(--soft); }
.btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--btn-ink); font: 800 15px/1.2 var(--sans); cursor: pointer; }
.btn.ghost { min-height: 44px; padding: 0 16px; border: 2px solid var(--line); background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; }
textarea { border: 2px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); font: 500 15px/1.5 var(--sans); }
textarea::placeholder { color: var(--soft); }
@keyframes putar { to { transform: rotate(360deg); } }
*, *::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(--fat); --k-judul-w: 400; --k-teks: var(--sans); --k-aksen: var(--accent); --k-aksen2: var(--second); --k-kaset: var(--shell); --k-kertas: var(--card); --k-tinta: var(--ink); --k-judul-tinta: var(--ink); --k-tombol-tinta: var(--btn-ink); --k-latar: rgba(29, 36, 51, .6); }

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