:root {
    --latar: #eaf4ff;
    --latar-2: #d7eaff;
    --biru: #4a90d9;
    --biru-tua: #2e3a59;
    --biru-muda: #a9d0f5;
    --pink: #f7b6c8;
    --kuning: #ffe8a3;
    --putih: #ffffff;
    --teks: #2e3a59;
    --teks-redup: #6b7a99;
    --merah: #e0607e;
    --radius: 22px;
    --bayang: 0 6px 0 rgba(46, 58, 89, .12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--latar);
    color: var(--teks);
    font-family: 'Fredoka', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 15% 10%, #fff 0 2px, transparent 3px) 0 0 / 60px 60px,
        radial-gradient(circle at 70% 60%, var(--biru-muda) 0 2px, transparent 3px) 0 0 / 90px 90px,
        var(--latar);
    overflow-x: hidden;
}

button { font-family: inherit; }

/* ---------- Komponen umum ---------- */

.tombol {
    display: inline-block;
    border: 3px solid var(--biru-tua);
    background: var(--biru);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 5px 0 var(--biru-tua);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.tombol:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--biru-tua); }
.tombol--kedua { background: var(--putih); color: var(--biru-tua); }
.tombol[hidden] { display: none; }

.kartu {
    background: var(--putih);
    border: 3px solid var(--biru-tua);
    border-radius: var(--radius);
    box-shadow: var(--bayang);
    padding: 1.25rem;
}

.gelembung {
    position: relative;
    background: var(--putih);
    border: 3px solid var(--biru-tua);
    border-radius: 20px;
    padding: .8rem 1.1rem;
    font-size: 1.1rem;
    max-width: 340px;
    text-align: center;
    box-shadow: var(--bayang);
    margin-bottom: 14px;
}
.gelembung::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 18px;
    height: 18px;
    background: var(--putih);
    border-right: 3px solid var(--biru-tua);
    border-bottom: 3px solid var(--biru-tua);
    transform: translateX(-50%) rotate(45deg);
}
.gelembung--bingung { background: #ffe3ea; }
.gelembung--bingung::after { background: #ffe3ea; }

/* ---------- Kucing ---------- */

.kucing { display: block; overflow: visible; }
.kucing--besar { width: min(52vw, 210px); }
.kucing--sedang { width: 130px; }
.kucing--mini { width: 64px; }
.kucing__mata-panik { display: none; }
.kucing--panik .kucing__mata { display: none; }
.kucing--panik .kucing__mata-panik { display: inline; }
.kucing--panik { animation: panik .12s linear infinite; }
.kucing--goyang .kucing__kepala { transform-origin: 100px 150px; animation: goyang 2.4s ease-in-out infinite; }
.kucing--bingung .kucing__kepala { transform-origin: 100px 150px; transform: rotate(-12deg); }
.kucing__ekor { transform-origin: 146px 185px; animation: kibas 1.6s ease-in-out infinite; }
.kucing__mata { animation: kedip 4s infinite; transform-origin: 100px 106px; }

@keyframes goyang { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes kibas { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes kedip { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes panik { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(-3px); } }

/* ---------- Gerbang ---------- */

.gerbang {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.gerbang__form {
    margin-top: 14px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.gerbang__tanya { font-size: 1.2rem; font-weight: 600; }
.gerbang__form input, .harapan textarea {
    font: inherit;
    font-size: 1.1rem;
    padding: .75rem 1rem;
    border: 3px solid var(--biru-muda);
    border-radius: 14px;
    outline: none;
    color: var(--teks);
    width: 100%;
}
.gerbang__form input { text-align: center; }
.gerbang__form input:focus, .harapan textarea:focus { border-color: var(--biru); }

/* ---------- Adegan ---------- */

.adegan {
    display: none;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 16px 110px;
    text-align: center;
}
.adegan--aktif { display: flex; animation: muncul .5s ease-out; }
@keyframes muncul { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hud {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
    font-size: .8rem;
    background: rgba(255, 255, 255, .9);
    border: 2px solid var(--biru-tua);
    border-radius: 999px;
    padding: .35rem .8rem;
    white-space: nowrap;
}
.hud b { color: var(--biru); }
.hud .naik { animation: naik .5s; display: inline-block; }
@keyframes naik { 0% { transform: scale(1); } 50% { transform: scale(1.8); color: var(--merah); } 100% { transform: scale(1); } }

.tombol-musik {
    position: fixed;
    top: 52px;
    right: 12px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--biru-tua);
    background: var(--putih);
    font-size: 1.2rem;
    cursor: pointer;
}
.tombol-musik.mati { opacity: .5; text-decoration: line-through; }

.kanvas-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}

.titik {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.titik span { width: 10px; height: 10px; border-radius: 50%; background: var(--biru-muda); transition: .3s; }
.titik span.aktif { background: var(--biru); width: 26px; border-radius: 6px; }

/* ---------- Sambutan ---------- */

.nama-besar {
    font-size: clamp(2.2rem, 10vw, 3.6rem);
    margin: 0;
    color: var(--biru);
    -webkit-text-stroke: 1px var(--biru-tua);
}
.nama-besar .y-terbang {
    display: inline-block;
    color: var(--merah);
    animation: y-terbang .9s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes y-terbang {
    from { transform: translate(40vw, -40vh) rotate(720deg) scale(3); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.catatan-kecil { margin: 0; color: var(--teks-redup); font-size: 1rem; }

/* ---------- Pemutar musik ---------- */

.panggung-musik {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
}
.kucing--dj { width: min(30vw, 120px); flex-shrink: 0; margin-right: -6px; position: relative; z-index: 2; }
.panggung-musik.tahap-1 .kucing--dj { animation: dorong .5s ease-in-out 2; }
@keyframes dorong { 50% { transform: translateX(10px) rotate(4deg); } }
.panggung-musik.tahap-4 .kucing--dj .kucing__kepala { transform-origin: 100px 150px; animation: angguk .5s ease-in-out infinite; }
@keyframes angguk { 50% { transform: rotate(6deg) translateY(3px); } }
.panggung-musik__pemutar { position: relative; z-index: 3; width: min(60vw, 240px); }
.pemutar { display: block; width: 100%; overflow: visible; }

/* Piringan: mulai di "tangan" kucing, lalu meluncur ke atas pemutar */
.pemutar__piringan {
    transform: translate(-150px, 30px) scale(.55) rotate(-25deg);
    transform-box: view-box;
    transform-origin: 105px 114px;
    transition: transform 1s cubic-bezier(.5, 0, .3, 1.2);
}
.tahap-2 .pemutar__piringan, .tahap-3 .pemutar__piringan, .tahap-4 .pemutar__piringan { transform: none; }
.pemutar__putar { transform-box: view-box; transform-origin: 105px 114px; }
.tahap-4 .pemutar__putar { animation: putar 1.8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* Lengan jarum: istirahat di samping, lalu turun ke piringan */
.pemutar__lengan {
    transform-box: view-box;
    transform-origin: 214px 66px;
    transform: rotate(-32deg);
    transition: transform .8s ease-in-out;
}
.tahap-3 .pemutar__lengan, .tahap-4 .pemutar__lengan { transform: rotate(20deg); }

.not-musik { position: absolute; left: 35%; top: 0; pointer-events: none; }
.not-musik i {
    position: absolute;
    font-style: normal;
    font-size: 1.6rem;
    color: var(--biru);
    opacity: 0;
}
.tahap-4 .not-musik i { animation: not-naik 2.4s ease-out infinite; }
.tahap-4 .not-musik i:nth-child(2) { animation-delay: .6s; left: 30px; color: var(--merah); }
.tahap-4 .not-musik i:nth-child(3) { animation-delay: 1.2s; left: -24px; }
.tahap-4 .not-musik i:nth-child(4) { animation-delay: 1.8s; left: 56px; color: #c9a227; }
@keyframes not-naik {
    0% { transform: translateY(20px) scale(.6); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(14px, -90px) rotate(20deg) scale(1.1); opacity: 0; }
}
.judul-lagu { margin: 0; font-weight: 600; opacity: 0; transition: opacity .6s; }
.judul-lagu.tampil { opacity: 1; }

/* ---------- Kado ---------- */

.kado {
    position: relative;
    width: 180px;
    height: 180px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-top: 20px;
    touch-action: manipulation;
}
.kado__badan, .kado__tutup, .kado__pita, .kado__retak { position: absolute; display: block; }
.kado__badan {
    left: 15px; right: 15px; bottom: 0; height: 120px;
    background: linear-gradient(90deg, transparent 42%, var(--pink) 42% 58%, transparent 58%), var(--biru);
    border: 4px solid var(--biru-tua);
    border-radius: 10px;
}
.kado__tutup {
    left: 5px; right: 5px; top: 30px; height: 40px;
    background: linear-gradient(90deg, transparent 42%, var(--pink) 42% 58%, transparent 58%), #6aa8e6;
    border: 4px solid var(--biru-tua);
    border-radius: 10px;
    z-index: 2;
}
.kado__pita {
    left: 50%; top: 0; width: 70px; height: 40px;
    transform: translateX(-50%);
    z-index: 3;
    background:
        radial-gradient(ellipse at 25% 60%, var(--pink) 0 45%, transparent 47%),
        radial-gradient(ellipse at 75% 60%, var(--pink) 0 45%, transparent 47%);
}
.kado__retak {
    inset: 70px 15px 0;
    z-index: 4;
    opacity: 0;
    background:
        linear-gradient(60deg, transparent 48%, var(--biru-tua) 48% 52%, transparent 52%) 20% 30% / 40px 40px no-repeat,
        linear-gradient(-50deg, transparent 47%, var(--biru-tua) 47% 53%, transparent 53%) 70% 60% / 50px 50px no-repeat,
        linear-gradient(80deg, transparent 47%, var(--biru-tua) 47% 53%, transparent 53%) 40% 80% / 30px 40px no-repeat;
}
.kado.retak-1 .kado__retak { opacity: .5; }
.kado.retak-2 .kado__retak { opacity: 1; }
.kado.guncang { animation: guncang var(--kuat, .3s) ease-in-out; }
@keyframes guncang {
    0%, 100% { transform: rotate(0) scale(1); }
    25% { transform: rotate(calc(var(--sudut, 6deg) * -1)) scale(1.04); }
    75% { transform: rotate(var(--sudut, 6deg)) scale(1.04); }
}
.kado.meledak { animation: meledak .5s forwards; }
@keyframes meledak { to { transform: scale(1.8); opacity: 0; } }
.kado__progres { width: 200px; height: 14px; border: 3px solid var(--biru-tua); border-radius: 999px; background: #fff; overflow: hidden; }
.kado__progres span { display: block; height: 100%; width: 0; background: var(--pink); transition: width .2s; }

/* ---------- Surat ---------- */

.kartu-lagu {
    background: var(--kuning);
    border: 3px solid var(--biru-tua);
    border-radius: 16px;
    padding: .5rem 1rem;
    font-size: .95rem;
}
.surat {
    width: 100%;
    max-width: 520px;
    min-height: 320px;
    text-align: left;
    background:
        repeating-linear-gradient(transparent 0 33px, #cfe3fa 33px 35px),
        #fffdf7;
    border: 3px solid var(--biru-tua);
    border-radius: 12px;
    box-shadow: var(--bayang);
    padding: 1.2rem 1.4rem;
    font-family: 'Caveat', cursive;
    font-size: 1.55rem;
    line-height: 35px;
    cursor: pointer;
}
.surat p { margin: 0 0 35px; }
.surat .kursor { display: inline-block; width: 2px; height: 1.1em; background: var(--biru-tua); vertical-align: -3px; animation: kedip-kursor .8s steps(1) infinite; }
@keyframes kedip-kursor { 50% { opacity: 0; } }
.surat .y-baru { color: var(--merah); font-weight: 700; animation: kedip-y 1s 3; }
@keyframes kedip-y { 50% { color: var(--biru); } }
.surat .jatuh { display: inline-block; animation: jatuh 1.1s ease-in forwards; }
@keyframes jatuh { to { transform: translateY(110vh) rotate(25deg); } }
.surat .kembali { display: inline-block; animation: kembali .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes kembali { from { transform: translateY(60px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.petunjuk { color: var(--teks-redup); font-size: .85rem; margin: 0; }

/* ---------- Game ---------- */

.judul-game { margin: 0; font-size: 1.8rem; }
.aturan { margin: 0; max-width: 460px; color: var(--teks-redup); }
.arena {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: min(60dvh, 460px);
    border: 3px solid var(--biru-tua);
    border-radius: var(--radius);
    background: linear-gradient(#cfe6ff, #f2f8ff);
    overflow: hidden;
    touch-action: manipulation;
    box-shadow: var(--bayang);
}
.arena canvas { display: block; width: 100%; height: 100%; }
.arena__layar {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(234, 244, 255, .88);
    font-size: 1.25rem;
    padding: 16px;
}
.arena__layar[hidden] { display: none; }
.arena__layar p { margin: 0; }
.rekor { font-size: 1rem; color: var(--teks-redup); }

/* ---------- Game kejar tanda tangan ---------- */

.arena--ttd { height: auto; padding: 12px; }
.ttd-info { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.ttd-info span { white-space: nowrap; }
.ttd-waktu { flex: 1; height: 14px; border: 3px solid var(--biru-tua); border-radius: 999px; background: #fff; overflow: hidden; }
.ttd-waktu span { display: block; height: 100%; width: 100%; background: var(--biru); }
.ttd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lubang {
    position: relative;
    aspect-ratio: 1;
    border: 3px solid var(--biru-tua);
    border-radius: 16px 16px 8px 8px;
    background:
        linear-gradient(transparent 70%, var(--biru-muda) 70%),
        #fffdf7;
    overflow: hidden;
}
.lubang::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 30%;
    width: 3px;
    background: var(--latar-2);
}
.dosen {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 78%;
    height: 72%;
    border: 0;
    background: none;
    font-size: clamp(2rem, 11vw, 3.2rem);
    line-height: 1;
    cursor: pointer;
    transform: translate(-50%, 110%);
    transition: transform .16s ease-out;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.lubang.muncul .dosen { transform: translate(-50%, 0); }
.lubang.dapat { background: linear-gradient(transparent 70%, var(--biru-muda) 70%), #e3f7e8; }
.lubang.dapat .dosen { animation: dapat .4s; }
.lubang.kabur .dosen { transform: translate(60%, -140%) rotate(-20deg); transition: transform .5s ease-in; }
@keyframes dapat { 50% { transform: translate(-50%, 0) scale(1.3); } }
.lubang__kata {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    z-index: 2;
    font-size: .68rem;
    line-height: 1.15;
    color: var(--biru-tua);
    pointer-events: none;
}
.lubang:not(.muncul) .lubang__kata { visibility: hidden; }

/* ---------- Harapan ---------- */

.harapan { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.harapan label { font-weight: 600; }
.harapan textarea { resize: vertical; font-size: 1rem; }
.pesan-form { margin: 0; min-height: 1.2em; font-size: .95rem; }
.pesan-form.galat { color: var(--merah); }
.pesan-form.sukses { color: var(--biru); }

/* ---------- Sinema lampion (musim gugur) ---------- */

.sinema {
    position: fixed;
    inset: 0;
    z-index: 45;
    overflow: hidden;
    transition: opacity 1s;
}
.sinema[hidden] { display: none; }
.sinema.pudar { opacity: 0; }
.sinema__langit {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f57f3a 0%, #ffb35c 45%, #ffe0a0 100%);
    opacity: 0;
    transition: opacity 4s ease-in-out;
}
.sinema.gugur .sinema__langit { opacity: 1; }
.sinema__dunia { position: absolute; inset: 0; transition: transform 6.5s cubic-bezier(.45, 0, .3, 1); }
.sinema__dunia > * { position: absolute; left: 0; top: 0; }
.sinema__tanah {
    width: 400vw;
    height: 120vh;
    border-radius: 50% 50% 0 0 / 60px 60px 0 0;
    background: linear-gradient(#d98a45, #b8652c 40%);
    opacity: 0;
    transition: opacity 3s 1s;
}
.sinema.gugur .sinema__tanah { opacity: 1; }

/* Kertas harapan */
.kertas {
    transform-origin: 0 0;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: .75rem 1rem;
    overflow: hidden;
    color: var(--teks);
    transition: all 1.4s cubic-bezier(.45, 0, .3, 1);
}
.kertas > span {
    position: absolute;
    inset: .6rem .8rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: opacity 1.2s;
}
.kertas__ketik { font-size: 1rem; line-height: 1.5; }
.kertas__tulis {
    font-family: 'Caveat', cursive;
    font-size: 1.25rem;
    line-height: 1.15;
    color: #6b3a14;
    opacity: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.kertas.jadi {
    background: repeating-linear-gradient(transparent 0 22px, #f2d9b0 22px 23px), #fff8e6;
    border-color: #c98a4a;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(110, 60, 20, .25);
}
.kertas.jadi .kertas__ketik { opacity: 0; }
.kertas.jadi .kertas__tulis { opacity: 1; }
.kertas.cepat { transition-duration: .6s; }
.kertas.diam { transition: none; }

/* Kucing oren */
.kucing-oren { width: 110px; transition: transform 1.5s linear; }
.kucing-oren .kucing { width: 100%; }
.kucing-oren.jalan .kucing { animation: langkah .35s ease-in-out infinite; }
@keyframes langkah { 50% { transform: translateY(-6px) rotate(-3deg); } }
.kucing-oren.lompat .kucing { animation: lompat-kucing .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes lompat-kucing { 40% { transform: translateY(-46px) rotate(-6deg); } }
.kucing-oren.dadah .kucing__kepala { transform-origin: 100px 150px; animation: goyang 1.2s ease-in-out infinite; }

/* Lampion */
.lampion { width: 110px; }
.lampion__gambar { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 16px rgba(255, 190, 90, .9)); }
.lampion__api { animation: api .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes api { to { transform: scaleY(1.25); opacity: .8; } }
.lampion--utama { opacity: 0; transition: opacity 1.2s, transform 7s cubic-bezier(.5, 0, .4, 1); }
.lampion--utama.nyala { opacity: 1; }
.lampion--utama .kertas { position: absolute; left: 0; top: 0; }

.lampion-lain { width: 300px; opacity: 0; transition: opacity 2s; text-align: center; }
.lampion-lain.tampil { opacity: 1; }
.lampion-lain .lampion__gambar { width: 110px; margin: 0 auto; }
.lampion-lain > div { animation: melayang 4s ease-in-out infinite alternate; }
@keyframes melayang { to { transform: translateY(-24px); } }
.lampion-lain__kertas {
    position: relative;
    display: inline-block;
    max-width: 300px;
    margin-top: 30px;
    padding: .4rem .9rem;
    font-family: 'Caveat', cursive;
    font-size: 32px;
    line-height: 1.1;
    color: #6b3a14;
    background: #fff8e6;
    border: 2px solid #c98a4a;
    border-radius: 4px;
    transform: rotate(-3deg);
}
.lampion-lain__kertas::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -32px;
    height: 32px;
    border-left: 2px solid #8a4a1a;
}

/* Daun berguguran */
.sinema__daun { position: absolute; inset: 0; pointer-events: none; }
.sinema__daun span {
    position: absolute;
    top: -40px;
    font-size: 1.5rem;
    animation: daun-jatuh linear infinite;
}
@keyframes daun-jatuh {
    0% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(30px, 28vh) rotate(90deg); }
    50% { transform: translate(-20px, 55vh) rotate(200deg); }
    75% { transform: translate(25px, 82vh) rotate(280deg); }
    100% { transform: translate(-10px, 110vh) rotate(360deg); }
}

.sinema__akhir {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 1.5s, transform 1.5s;
}
.sinema__akhir.tampil { opacity: 1; pointer-events: auto; transform: none; }
.sinema__akhir p {
    margin: 0;
    max-width: 380px;
    font-size: 1.15rem;
    font-weight: 500;
    color: #5a2e0e;
    background: rgba(255, 248, 230, .9);
    border: 2px solid #c98a4a;
    border-radius: 16px;
    padding: .7rem 1rem;
}
.tombol--oren { background: #f08a24; border-color: #5a2e0e; box-shadow: 0 5px 0 #5a2e0e; }
.tombol--oren:active { box-shadow: 0 1px 0 #5a2e0e; }

.harapan-terkirim { margin: 0; max-width: 340px; font-size: 1.1rem; }

/* ---------- Penutup ---------- */

.penutup__judul { font-size: clamp(1.8rem, 7vw, 2.8rem); margin: 0; line-height: 1.2; }
.penutup__judul span { color: var(--biru); }
.penutup__tanggal { margin: 0; color: var(--teks-redup); }
.penutup__pesan { max-width: 420px; font-size: 1.15rem; margin: 0; }
.penutup__dari { font-family: 'Caveat', cursive; font-size: 1.8rem; margin: 0; }
.huruf-y {
    position: relative;
    width: 130px;
    height: 130px;
    border: 4px solid var(--biru-tua);
    border-radius: 26px;
    background: var(--kuning);
    color: var(--merah);
    font-size: 5rem;
    font-weight: 600;
    box-shadow: 0 8px 0 var(--biru-tua);
    cursor: pointer;
    animation: lompat 1.4s ease-in-out infinite;
}
.huruf-y::after { content: '🎀'; position: absolute; top: -24px; right: -20px; font-size: 2.2rem; transform: rotate(20deg); }
@keyframes lompat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* ---------- Hujan daun kenangan ---------- */

.hujan-daun { position: fixed; inset: 0; z-index: 47; overflow: hidden; pointer-events: none; }
.hujan-daun[hidden] { display: none; }
.daun-jatuh { position: absolute; left: 0; top: 0; will-change: transform; }
.daun-jatuh > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 5px rgba(90, 40, 10, .3));
}
.daun-jatuh__polaroid {
    position: absolute;
    left: 20%;
    top: 13%;
    width: 60%;
    padding: 5% 5% 15%;
    background: #fffdf7;
    box-shadow: 0 3px 6px rgba(60, 30, 10, .3);
}
.daun-jatuh__polaroid img, .daun-jatuh__sobek img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #e9d9c0;
}
.daun-jatuh__selotip {
    position: absolute;
    top: -7%;
    left: 28%;
    width: 44%;
    height: 11%;
    background: rgba(255, 236, 170, .85);
    transform: rotate(-6deg);
}
.daun-jatuh__sobek {
    position: absolute;
    left: 17%;
    top: 14%;
    width: 66%;
    filter: drop-shadow(0 3px 4px rgba(60, 30, 10, .35));
}
.daun-jatuh__peniti {
    position: absolute;
    left: 50%;
    top: -5%;
    width: 13px;
    height: 13px;
    margin-left: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffb3c6, #e0607e 60%, #9a2a45);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
.hujan-daun__angin span {
    position: absolute;
    left: -50vw;
    height: 2px;
    width: 45vw;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: angin 1s ease-in forwards;
}
@keyframes angin { to { transform: translateX(170vw); } }

/* ---------- Penutup: danau musim gugur ---------- */

.danau-layar {
    position: fixed;
    inset: 0;
    z-index: 46;
    background: #f08a4b;
    opacity: 0;
    transition: opacity 1s;
}
.danau-layar[hidden] { display: none; }
.danau-layar.tampil { opacity: 1; }
.danau { display: block; width: 100%; height: 100%; }
.danau__kamera { transform-box: view-box; transform-origin: 0 0; transition: transform 4s cubic-bezier(.45, 0, .3, 1); }

.danau__awan { animation: awan 30s ease-in-out infinite alternate; }
@keyframes awan { to { transform: translateX(40px); } }
.danau__kilau rect { animation: kilau 2.2s ease-in-out infinite alternate; }
.danau__kilau rect:nth-child(2n) { animation-delay: -1.1s; }
.danau__kilau rect:nth-child(3n) { animation-delay: -.6s; }
@keyframes kilau { from { opacity: .25; transform: translateX(-3px); } to { opacity: .95; transform: translateX(3px); } }
.danau__riak ellipse { transform-box: fill-box; transform-origin: center; animation: riak 3.2s ease-out infinite; }
.danau__riak ellipse:nth-child(2) { animation-delay: -1s; }
.danau__riak ellipse:nth-child(3) { animation-delay: -2.1s; }
@keyframes riak { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.danau__bebek { animation: bebek 16s ease-in-out infinite alternate; }
@keyframes bebek { from { transform: translateX(-40px); } to { transform: translateX(50px); } }
.danau__teratai { animation: teratai 4s ease-in-out infinite alternate; }
@keyframes teratai { to { transform: translate(2px, 1.5px); } }

.danau__pohon { transform-box: view-box; transform-origin: 62px 690px; animation: sepoi 4.5s ease-in-out infinite alternate; }
@keyframes sepoi { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }
.danau__rumput path { transform-box: fill-box; transform-origin: 50% 100%; animation: rumput 2.4s ease-in-out infinite alternate; }
.danau__rumput path:nth-child(2n) { animation-delay: -.8s; animation-duration: 2s; }
.danau__rumput path:nth-child(3n) { animation-delay: -1.5s; }
@keyframes rumput { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.danau__daun-pohon path { animation: daun-pohon 8s linear infinite; opacity: 0; }
@keyframes daun-pohon {
    0% { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(0); opacity: 0; }
    8% { opacity: 1; }
    50% { transform: translate(calc(var(--x) * 1px + 60px), calc(var(--y) * 1px + 120px)) rotate(250deg); }
    90% { opacity: 1; }
    100% { transform: translate(calc(var(--x) * 1px + 150px), calc(var(--y) * 1px + 230px)) rotate(540deg); opacity: 0; }
}

.danau__ikan { opacity: 0; }
.danau__ikan.lompat { animation: ikan-lompat 1.3s ease-in-out; }
@keyframes ikan-lompat {
    0% { transform: translate(112px, 582px) rotate(-60deg); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translate(131px, 545px) rotate(0); }
    88% { opacity: 1; }
    100% { transform: translate(150px, 584px) rotate(60deg); opacity: 0; }
}
.danau__percik ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.danau__percik.lompat ellipse:first-child { animation: percik .6s ease-out; }
.danau__percik.lompat ellipse:last-child { animation: percik .6s 1.1s ease-out; }
@keyframes percik { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.8); } }


.danau__akhir {
    position: absolute;
    left: 16px;
    right: 16px;
    top: max(24px, 5vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 2s, transform 2s;
}
.danau__akhir.tampil { opacity: 1; pointer-events: auto; transform: none; }
.danau__akhir .penutup__judul { color: #5a2e0e; text-shadow: 0 2px 0 rgba(255, 240, 210, .7); }
.danau__akhir .penutup__judul span { color: #fff6dc; -webkit-text-stroke: 1px #8a3a1c; }
.danau__akhir .penutup__tanggal { color: #6b3a14; font-weight: 500; }
.danau__akhir .penutup__dari { color: #5a2e0e; }

/* Kucing tampak belakang: berjalan, lalu duduk santai */
.danau__kucing { transform: translate(90px, 612px); }
#kucing-belakang .kucing__ekor { transform-origin: 146px 196px; }
.danau__kucing.jalan #kucing-belakang { animation: langkah-belakang .4s ease-in-out infinite; }
@keyframes langkah-belakang { 50% { transform: translateY(-5px) rotate(3deg); } }
.danau__kucing.duduk .kucing__kepala { transform-origin: 100px 140px; animation: tengok 7s ease-in-out infinite; }
@keyframes tengok {
    0%, 30% { transform: rotate(0); }
    40%, 55% { transform: rotate(-8deg); }
    65%, 80% { transform: rotate(6deg); }
    90%, 100% { transform: rotate(0); }
}

/* ---------- Kucing mini ceroboh ---------- */

.kucing-mini {
    position: fixed;
    left: 8px;
    bottom: 34px;
    z-index: 15;
    pointer-events: none;
}
.kucing-mini__barang {
    position: absolute;
    left: 20px;
    top: -18px;
    font-size: 1.4rem;
    transition: transform .2s;
}
.kucing-mini__barang.jatuh { animation: barang-jatuh 1.2s ease-in forwards; }
@keyframes barang-jatuh {
    0% { transform: translateY(0) rotate(0); }
    20% { transform: translate(14px, -24px) rotate(40deg); }
    100% { transform: translate(40px, 120px) rotate(300deg); opacity: 0; }
}

body[data-adegan="surat"] .kucing-mini,
body[data-adegan="ttd"] .kucing-mini,
body[data-adegan="pemutar"] .kucing-mini { display: none; }

/* ---------- Karakter ngintip & jempol ---------- */

.ngintip {
    position: fixed;
    right: 0;
    bottom: 0;
    width: min(46vw, 190px);
    aspect-ratio: 1;
    z-index: 25;
    pointer-events: none;
    mix-blend-mode: multiply; /* latar putih gambar menyatu dengan latar web */
    transform: translate(105%, 105%);
    transition: transform .55s cubic-bezier(.3, 1.4, .5, 1);
}
.ngintip img { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.ngintip.tampil { transform: translate(8%, 5%); pointer-events: auto; cursor: pointer; }
.ngintip.kaget { transition: transform .18s ease-in; }

.jempol {
    position: fixed;
    left: 50%;
    top: 18%;
    z-index: 35;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%) scale(0) rotate(-25deg);
    transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.jempol.tampil { transform: translateX(-50%) scale(1) rotate(0); }
.jempol img {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid var(--biru-tua);
    box-shadow: var(--bayang);
    object-fit: cover;
}
.jempol span {
    display: inline-block;
    margin-top: 8px;
    background: var(--putih);
    border: 3px solid var(--biru-tua);
    border-radius: 999px;
    padding: .25rem .9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Halaman rahasia ---------- */

.rahasia { max-width: 720px; margin: 0 auto; padding: 32px 16px; }
.rahasia h1 { margin-top: 0; }
.rahasia .kartu { margin-bottom: 16px; }
.rahasia .harapan-isi { white-space: pre-wrap; margin-bottom: .3rem; }
.rahasia .harapan-item { border-bottom: 2px dashed var(--biru-muda); padding: .8rem 0; }
.rahasia .harapan-item:last-child { border-bottom: 0; }
.rahasia small { color: var(--teks-redup); }
.rahasia table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rahasia td, .rahasia th { text-align: left; padding: .35rem; border-bottom: 1px solid var(--latar-2); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}