/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:var(--bg-deep);
color:white;
overflow-x:hidden;
min-height:100vh;
}

/* =========================
VARIABLES
========================= */

:root{

--pink:#ff85d5;
--purple:#8f5cff;
--gold:#ffd66b;

/* Warna aksen utama yang sering dipakai di judul, tombol, dan glow.
   Ini yang paling menentukan "vibe" tema — override variable ini
   (lewat js/themes.js) untuk membuat tema baru. */
--accent:#ff6fa8;
--accent-soft:#ffb6ea;
--bg-deep:#040612;
--panel-dark:#0f0a1c;

--glass:
rgba(255,255,255,.08);

--glass-border:
rgba(255,255,255,.12);

}

/* =========================
GALAXY
========================= */

#galaxy{
position:fixed;
inset:0;
width:100%;
height:100%;
z-index:-100;
}

.aurora{
position:fixed;
width:700px;
height:700px;
border-radius:50%;
filter:blur(140px);
z-index:-90;
}

.aurora-1{
background:var(--pink);
top:-250px;
left:-250px;
opacity:.12;
}

.aurora-2{
background:var(--purple);
right:-250px;
bottom:-250px;
opacity:.12;
}

/* =========================
SHOOTING STAR
========================= */

.shooting-star{
position:fixed;
width:220px;
height:2px;
background:
linear-gradient(
90deg,
white,
transparent
);

left:-300px;
top:20%;

z-index:-80;

animation:
shootingStar 8s linear infinite;

}

.two{
top:50%;
animation-delay:3s;
}

.three{
top:70%;
animation-delay:6s;
}

@keyframes shootingStar{

from{
    transform:
    translateX(0)
    translateY(0)
    rotate(25deg);
}

to{
    transform:
    translateX(2200px)
    translateY(500px)
    rotate(25deg);
}

}

/* =========================
UTILITIES
========================= */

.hidden{
display:none;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:0 24px;
}

.narrow{
max-width:900px;
}

.section{
padding:120px 0;
}

.section-title{

text-align:center;

font-family:
'Cormorant Garamond',
serif;

font-size:4rem;

margin-bottom:20px;

}

.section-subtitle{

text-align:center;

opacity:.8;

margin-bottom:70px;

}

.small-title{

color:var(--gold);

letter-spacing:2px;

}

button{

border:none;

cursor:pointer;

transition:.3s ease;

font-family:inherit;

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

}

button:hover{
transform:translateY(-4px);
}

/* =========================
GATE
========================= */

#gate{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:24px;

}

.glass-card{

width:100%;
max-width:650px;

text-align:center;

padding:60px;

border-radius:30px;

background:
var(--glass);

backdrop-filter:blur(20px);

border:
1px solid
var(--glass-border);

box-shadow:
0 0 40px
rgba(255,255,255,.05);

}

.glass-card h1{

font-family:
'Cormorant Garamond',
serif;

font-size:4rem;

margin:20px 0;

}

.glass-card p{

opacity:.8;

line-height:1.8;

margin-bottom:30px;

}

.glass-card input{

width:100%;

padding:16px;

margin-bottom:15px;

border:none;

outline:none;

border-radius:15px;

background:
rgba(255,255,255,.08);

color:white;

}

.glass-card input::placeholder{
color:#ddd;
}

#enterBtn{

padding:16px 40px;

border-radius:999px;

background:
linear-gradient(
135deg,
var(--pink),
var(--purple)
);

color:white;

font-weight:600;

}

/* =========================
HERO
========================= */

.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:24px;

}

.hero-badge{

background:
rgba(255,255,255,.08);

padding:10px 18px;

border-radius:999px;

margin-bottom:30px;

}

.hero h1{

font-family:
'Cormorant Garamond',
serif;

font-size:6rem;

line-height:1.1;

}

.hero-text{

max-width:700px;

margin-top:30px;

opacity:.85;

line-height:2;

}

.scroll-down{

margin-top:50px;

opacity:.7;

animation:
bounce 2s infinite;

}

@keyframes bounce{

50%{
    transform:
    translateY(10px);
}

}

/* =========================
PHOTO MOMENT (foto utama antara Hero & Constellation)
========================= */

.photo-moment{
    text-align:center;
}

.photo-frame{
    width:100%;
    max-width:420px;
    aspect-ratio: 4 / 5;
    margin:0 auto 20px auto;
    border-radius:20px;
    overflow:hidden;
    background: var(--glass);
    border:1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.photo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.photo-caption{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.2rem;
    opacity:.85;
    max-width:420px;
    margin:0 auto;
}

/* =========================
CONSTELLATION
========================= */

.constellation {
    display: grid;
    /* Dikunci persis 3 kolom sejajar di layar laptop/desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.star {
    height: 180px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    transition: .4s;
}

.star:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 40px rgba(255,133,213,.4);
}

/* =========================
LETTER
========================= */

.letter-box{

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

padding:50px;

border-radius:30px;

line-height:2;

font-size:1.05rem;

}

#typedLetter{
white-space:pre-line;
}

/* =========================
REASONS
========================= */

.reasons-grid {
    display: grid;
    /* Dikunci persis 4 kolom sejajar (4 kolom x 3 baris = 12 kotak simetris) */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.reason-card {
    height: 150px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reason-card:hover {
    color: #ffffff;
    transform: translateY(-8px); 
    background: linear-gradient(135deg, rgba(255, 111, 168, 0.25), rgba(142, 68, 173, 0.25));
    border-color: var(--pink);
    box-shadow: 0 15px 30px rgba(255, 111, 168, 0.3);
}

/* =========================
NEW CINEMATIC CAKE & CANDLE (FIXED POSITIONING!)
========================= */

.cake-section {
    text-align: center;
    padding: 100px 24px; /* Disesuaikan agar tidak terlalu renggang */
    position: relative;
    transition: background 1.2s ease;
    z-index: 10;
}

/* Memastikan judul utama memiliki jarak aman */
.cake-section .section-title {
    margin-bottom: 10px;
    position: relative;
    z-index: 5;
}

/* Memastikan subtitle berada di bawah judul, bukan di belakang kue */
.cake-section .section-subtitle {
    margin-bottom: 40px;
    position: relative;
    z-index: 5;
    opacity: 0.8;
}

/* Kontainer utama kue dengan ruang vertikal yang presisi */
.cake-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Kue duduk manis di dasar kontainer */
    height: 340px;        /* Memberikan ruang vertikal agar lilin tidak mentok ke atas */
    margin: 20px auto 50px auto; /* Margin bawah ditambah agar menjauh dari tombol */
    position: relative;
    width: 100%;
    max-width: 300px;
}

/* Tier Paling Bawah */
.cake {
    width: 220px;
    height: 120px;
    background: linear-gradient(180deg, #ff9ebb, var(--accent));
    border-radius: 15px 15px 4px 4px;
    position: relative;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4), inset 0 8px 0 rgba(255,255,255,0.3);
}

/* Tier Tengah */
.cake::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 85px;
    background: linear-gradient(180deg, #fdced9, #f7a1b5);
    bottom: 115px; /* Pas di atas tier bawah */
    left: 25px;
    border-radius: 12px 12px 4px 4px;
    box-shadow: inset 0 6px 0 rgba(255,255,255,0.4);
    z-index: 2;
}

/* Tier Paling Atas */
.cake::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 60px;
    background: linear-gradient(180deg, #ffffff, #eaeaea);
    bottom: 195px; /* Pas di atas tier tengah */
    left: 55px;
    border-radius: 10px 10px 4px 4px;
    box-shadow: inset 0 5px 0 rgba(255,255,255,1);
    z-index: 3;
}

/* Lilin Diposisikan Sempurna di Atas Tier Teratas */
.candle {
    width: 12px;
    height: 55px;
    background: linear-gradient(to right, #7bf2da, #b6fff0);
    position: absolute;
    left: 50%;
    bottom: 250px; /* Tepat bertengger di atas kue paling atas */
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 4;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Api Lilin Glowing */
#flame {
    width: 20px;
    height: 32px;
    background: radial-gradient(circle, #ffea4a 20%, #ff7b00 70%, transparent);
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
    position: absolute;
    top: -34px;
    left: -4px;
    box-shadow: 0 0 20px #ff9d00, 0 0 40px #ffea4a;
    animation: flameFlicker 0.15s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
    0% { transform: scale(1) rotate(-1deg); }
    100% { transform: scale(1.1) rotate(1.5deg); }
}

/* Tombol Tiup Lilin */
#blowBtn {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    color: white;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(255, 133, 213, 0.3);
    margin-bottom: 25px; /* Memberikan jarak ke teks wish di bawahnya */
    position: relative;
    z-index: 5;
}

/* Teks Wish di Paling Bawah */
#cakeMessage {
    margin-top: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent-soft);
    text-shadow: 0 0 10px rgba(255, 182, 234, 0.4);
    min-height: 40px; /* Menjaga space agar layout tidak lompat saat teks muncul */
}

/* =========================
NEXT GIFT
========================= */

.next-gift-section{

text-align:center;

padding-bottom:150px;

}

#nextGiftBtn{

padding:18px 40px;

border-radius:999px;

background:
linear-gradient(
135deg,
var(--gold),
var(--pink)
);

color:white;

}

/* =========================
MUSEUM
========================= */

.museum-hero{

min-height:60vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:24px;

}

.museum-hero h1{

font-size:5rem;

font-family:
'Cormorant Garamond',
serif;

}

.museum-hero p{

margin-top:20px;

opacity:.8;

}

.timeline{

display:grid;

gap:30px;

}

.timeline-item{

background:
rgba(255,255,255,.06);

padding:30px;

border-radius:25px;

}

.timeline-item span{

color:var(--gold);

font-size:2rem;

}

/* =========================
GALLERY
========================= */

.gallery{

columns:3;
column-gap:20px;

}

.gallery-item{

margin-bottom:20px;

overflow:hidden;

border-radius:20px;

}

.gallery-item img{

width:100%;

display:block;

transition:.5s;

}

.gallery-item:hover img{

transform:
scale(1.08);

}

/* =========================
AUDIO
========================= */

.voice-player{

width:100%;

}

/* =========================
ENDING
========================= */

.ending-section{

text-align:center;

padding:180px 24px;

}

.ending-section h2{

font-size:4rem;

font-family:
'Cormorant Garamond',
serif;

margin-bottom:20px;

}

/* =========================
POPUP
========================= */

#starPopup{

position:fixed;

inset:0;

background:
rgba(0,0,0,.75);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.popup-content{

width:90%;
max-width:600px;

padding:40px;

text-align:center;

border-radius:25px;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(15px);

}

.popup-content p{

line-height:2;

margin-bottom:25px;

}

#closePopup{

background:
linear-gradient(
135deg,
var(--pink),
var(--purple)
);

color:white;

padding:12px 30px;

border-radius:999px;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.hero h1{
    font-size:4rem;
}

.section-title{
    font-size:3rem;
}

.glass-card{
    padding:35px;
}

.glass-card h1{
    font-size:3rem;
}

.gallery{
    columns:1;
}

}

/* =========================================================
MUSEUM PREMIUM ADDITIONS (3D CARD & GALLERY MASONRY FIX)
========================================================= */

/* Efek Perspektif 3D pada Kontainer Galeri */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    perspective: 1000px; /* Memberikan kedalaman efek 3D */
}

/* Kartu Galeri dengan Efek Transformasi 3D */
.gallery-item {
    margin-bottom: 0; /* Override bawaan columns lama */
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Inti dari pergerakan 3D halus */
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Ketika Foto di-hover */
.gallery-item:hover {
    box-shadow: 0 15px 35px rgba(255, 133, 213, 0.25); /* Glow pink halus */
}

/* Memastikan Gambar di Dalamnya Terlihat Jernih & Presisi */
.gallery-item img {
    width: 100%;
    height: 350px;       /* Tinggi seragam agar rapi simetris */
    object-fit: cover;   /* Foto otomatis terpotong proporsional, tidak peyang */
    display: block;
    pointer-events: none; /* Mencegah bentrok koordinat mouse saat di-hover */
    transition: transform 0.5s ease;
}

/* Efek Zoom Ringan di Dalam Dimensi 3D */
.gallery-item:hover img {
    transform: scale(1.04) translateZ(10px); /* Gambar sedikit maju ke depan layar */
}

/* Animasi Halus untuk Memunculkan Voice Message */
#voiceSection {
    transition: opacity 1.5s ease, transform 1.5s ease;
    transform: translateY(30px);
}

#voiceSection.show-voice {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0);
}

/* Responsive Grid untuk HP */
@media(max-width: 768px){
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
    }
    .gallery-item img {
        height: 280px; /* Sedikit lebih pendek di layar HP */
    }
}

/* =========================================================
   MUSEUM GALLERY: MANUAL SCROLL REVEAL VIA ACTIVE CLASS (HD)
   ========================================================= */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom sejajar desktop */
    gap: 40px;
}

/* Penataan Kartu Utama */
.gallery-item {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(15, 10, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    
    /* 1. KONDISI AWAL: Sembunyi, transparan, dan bergeser agak ke bawah */
    opacity: 0;
    transform: translateY(50px);
    
    /* Pengunci transisian animasi: pisahkan antara transisi scroll dan transisi hover */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease;
    cursor: pointer;
}

/* 2. KONDISI SAAT DI-SCROLL: Menjadi active (Muncul perlahan naik ke atas) */
.gallery-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. KONDISI SAAT DI-HOVER KURSOR (Hanya bekerja jika sudah berstatus .active) */
.gallery-item.active:hover {
    transform: translateY(-8px); /* Kartu sedikit terangkat naik flat nan mewah */
    border-color: rgba(255, 133, 213, 0.4);
    box-shadow: 0 20px 40px rgba(255, 133, 213, 0.25), 0 0 25px rgba(142, 68, 173, 0.2);
}

/* Pembungkus Foto */
.gallery-img-wrapper {
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: relative;
    border-radius: 24px 24px 0 0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-item.active:hover img {
    transform: scale(1.03); /* Zoom tipis aman anti pecah */
}

/* Kotak Teks */
.gallery-text-box {
    padding: 25px;
    text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.0) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-tag {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 10px;
}

.gallery-caption {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-style: italic;
}

/* Responsive Layar HP */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .gallery-img-wrapper {
        height: 280px;
    }
}

/* =========================================================
   LIGHTBOX PREMIUM POPUP EFFECTS
   ========================================================= */

.lightbox {
    display: none; /* Sembunyi secara default */
    position: fixed;
    z-index: 9999; /* Pastikan berada di layer paling atas menutupi segalanya */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 2, 15, 0.95); /* Latar belakang gelap galaksi pekat */
    backdrop-filter: blur(10px); /* Efek blur kaca transparan kekinian */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Wrapper agar gambar dan caption tersusun rapi vertikal */
.lightbox-content-wrapper {
    text-align: center;
    max-width: 85%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gambar di dalam popup */
.lightbox-img {
    max-width: 100%;
    max-height: 70vh; /* Membatasi tinggi agar teks caption di bawah tidak tenggelam */
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(255, 133, 213, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Caption / Teks romantis di bawah foto popup */
.lightbox-caption {
    margin-top: 20px;
    color: var(--accent-soft);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 182, 234, 0.5);
    animation: fadeInCaption 0.6s ease forwards;
}

/* Tombol Close (Silang) di kanan atas */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    z-index: 10000;
}

.lightbox-close:hover {
    color: var(--accent);
    transform: rotate(90deg);
}

@keyframes fadeInCaption {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Optimasi Lightbox di HP */
@media (max-width: 768px) {
    .lightbox-close {
        top: 20px;
        right: 25px;
        font-size: 40px;
    }
    .lightbox-caption {
        font-size: 1.2rem;
    }
}

/* =========================================================
   MEGA BUTTON ENTER MUSEUM STYLEWITH PREMIUM HOVER EFFECT
   ========================================================= */
.btn-masuk-pameran-mega {
    padding: 18px 45px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 111, 168, 0.2), rgba(223, 186, 92, 0.15));
    border: 2px solid rgba(255, 111, 168, 0.4);
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 30px rgba(255, 111, 168, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-masuk-pameran-mega:hover {
    background: linear-gradient(135deg, var(--accent), #dfba5c);
    border-color: #ffffff;
    color: var(--panel-dark);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 40px rgba(255, 111, 168, 0.45), 0 0 20px rgba(223, 186, 92, 0.2);
    font-weight: 700;
}

.btn-masuk-pameran-mega:active {
    transform: translateY(-1px) scale(0.99);
}

/* =========================================================
   PREMIUM GHOST BUTTON FOR SECURITY VERIFICATION
   ========================================================= */
.btn-quiz-elegant {
    width: 100%;
    padding: 16px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efek Hover Mewah Transparan Menyatu dengan Warna Tema */
.btn-quiz-elegant:hover {
    color: #ffffff;
    background: rgba(255, 111, 168, 0.08);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 111, 168, 0.25);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* State khusus tombol saat dinonaktifkan (ketika jawaban benar sudah terpilih) */
.btn-quiz-elegant:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================================
   DEFAULT (GALAXY) — teks yang sebelumnya inline, dipindah ke sini supaya
   bisa di-override tema lain (skin-scrapbook / skin-garden). Kalau tidak
   ada skin aktif (default galaxy), tampilannya identik seperti sebelumnya.
   ========================================================================= */
#museumHeroTitle{
    color:#ffffff;
    text-shadow: 0 0 40px rgba(255,111,168,0.4);
}
#museumHeroSubtitle{
    color: rgba(255,255,255,0.85);
}
#typedLetterMain{
    color: rgba(255,255,255,0.95);
}
#quizTitle{
    color: var(--accent);
    text-shadow: 0 0 20px rgba(255,111,168,0.2);
}
#quizSubtitle{
    color: rgba(255,255,255,0.6);
}
#quizQuestion{
    color: #ffffff;
}
.masterpiece-title{
    color: var(--gold);
    text-shadow: 0 0 20px rgba(223,186,92,0.3);
}
.masterpiece-letter-box{
    border-color: rgba(223,186,92,0.25);
    background: rgba(25, 18, 40, 0.55);
    margin-bottom: 40px;
}
#typing-masterpiece{
    color: #ffffff;
}

/* =========================================================================
   ============================================================
   SKIN: SCRAPBOOK / PAPER LOVE LETTER — PRODUK KEDUA
   ============================================================
   Identitas visual yang benar-benar berbeda dari Galaxy:
   - Background kertas kraft hangat, bukan langit malam berbintang
   - Font tulisan tangan (Caveat/Kalam), bukan serif dingin
   - Kartu "kertas ditempel washi tape", bukan glassmorphism
   - Tanpa canvas Three.js sama sekali (lebih ringan)
   ============================================================
   ========================================================================= */

/* --- Matikan seluruh dekorasi galaxy saat skin ini aktif --- */
body.skin-scrapbook #galaxy,
body.skin-scrapbook .aurora,
body.skin-scrapbook .shooting-star{
    display:none !important;
}

/* --- Latar kertas kraft dengan tekstur grain halus (CSS murni, tanpa gambar) --- */
body.skin-scrapbook{
    background:
        radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-deep), #e9d6ae);
    background-size: 4px 4px, 100% 100%;
    color: var(--panel-dark);
}

/* Lapisan "serat kertas" tambahan di seluruh halaman */
body.skin-scrapbook::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        repeating-linear-gradient(90deg, rgba(74,47,33,0.02) 0px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(74,47,33,0.02) 0px, transparent 1px, transparent 3px);
}

/* --- Judul & body font berubah total --- */
body.skin-scrapbook .glass-card h1,
body.skin-scrapbook .hero h1,
body.skin-scrapbook .section-title,
body.skin-scrapbook .museum-hero h1,
body.skin-scrapbook .ending-section h2{
    font-family:'Caveat','Kalam',cursive;
    font-weight:700;
    color: var(--panel-dark);
    text-shadow:none;
}

body.skin-scrapbook .small-title,
body.skin-scrapbook .hero-badge{
    font-family:'Kalam',cursive;
    color: var(--accent);
}

body.skin-scrapbook body,
body.skin-scrapbook p,
body.skin-scrapbook .hero-text,
body.skin-scrapbook .section-subtitle{
    color: rgba(74,47,33,0.85);
}

/* --- Kartu utama: "kertas ditempel", bukan kaca --- */
body.skin-scrapbook .glass-card,
body.skin-scrapbook .letter-box{
    background: #fffaf0;
    border: 1px solid rgba(74,47,33,0.15);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(74,47,33,0.18), 0 2px 0 rgba(74,47,33,0.05);
    backdrop-filter: none;
    position: relative;
}

/* Efek washi tape di pojok kartu */
body.skin-scrapbook .glass-card::before,
body.skin-scrapbook .letter-box::before{
    content:"";
    position:absolute;
    top:-14px;
    left:40px;
    width:90px;
    height:28px;
    background: rgba(224,164,88,0.55);
    transform: rotate(-4deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

body.skin-scrapbook .glass-card input{
    background: rgba(74,47,33,0.06);
    color: var(--panel-dark);
    border: 1px dashed rgba(74,47,33,0.3);
}

body.skin-scrapbook .glass-card input::placeholder{
    color: rgba(74,47,33,0.45);
}

body.skin-scrapbook #enterBtn,
body.skin-scrapbook #nextGiftBtn,
body.skin-scrapbook #blowBtn{
    background: var(--accent);
    color: #fffaf0;
    font-family:'Kalam',cursive;
    box-shadow: 0 6px 0 rgba(74,47,33,0.25);
}

/* --- Constellation → jadi "Sticky Notes Kenangan" --- */
body.skin-scrapbook .star{
    background: #fff6da;
    color: var(--panel-dark);
    font-family:'Kalam',cursive;
    border-radius: 3px;
    border: 1px solid rgba(74,47,33,0.12);
    box-shadow: 3px 5px 10px rgba(74,47,33,0.2);
}
body.skin-scrapbook .star:nth-child(odd){ transform: rotate(-3deg); }
body.skin-scrapbook .star:nth-child(even){ transform: rotate(2deg); }
body.skin-scrapbook .star:hover{ transform: scale(1.06) rotate(0deg); }

/* --- Reasons → jadi "kartu polaroid" bernomor --- */
body.skin-scrapbook .reason-card{
    background: #fffaf0;
    color: var(--panel-dark);
    border: 1px solid rgba(74,47,33,0.15);
    box-shadow: 0 6px 14px rgba(74,47,33,0.18);
    font-family:'Caveat',cursive;
    font-size: 1.6rem;
}
body.skin-scrapbook .reason-card:nth-child(3n){ transform: rotate(-2deg); }
body.skin-scrapbook .reason-card:nth-child(3n+1){ transform: rotate(2deg); }

/* --- Popup pesan --- */
body.skin-scrapbook .popup-content{
    background: #fffaf0;
    color: var(--panel-dark);
    border: 1px solid rgba(74,47,33,0.15);
}
body.skin-scrapbook .popup-content p{
    font-family:'Caveat',cursive;
    font-size: 1.6rem;
}

/* --- Museum → jadi "Kotak Kenangan" --- */
body.skin-scrapbook #museumHeroTitle{
    color: var(--panel-dark);
    text-shadow:none;
}
body.skin-scrapbook #museumHeroSubtitle{
    color: rgba(74,47,33,0.75);
}
body.skin-scrapbook #typedLetterMain,
body.skin-scrapbook #typing-masterpiece{
    font-family:'Caveat',cursive;
    font-size: 1.4rem;
    color: var(--panel-dark);
}
body.skin-scrapbook #quizTitle{
    color: var(--accent);
    text-shadow:none;
}
/* quizSubtitle & quizQuestion SENGAJA tidak diubah — box #quizBox tetap
   gelap di semua tema (efek "vault keamanan"), jadi teks terang bawaan
   sudah pas kontrasnya. Jangan ganti ke warna gelap di sini. */
body.skin-scrapbook .masterpiece-title{
    color: var(--accent);
    text-shadow:none;
}
body.skin-scrapbook .masterpiece-letter-box{
    border-color: rgba(74,47,33,0.15);
    background: #fffaf0;
}
body.skin-scrapbook .btn-masuk-pameran-mega{
    color: #fffaf0;
    background: var(--accent);
    border-color: rgba(74,47,33,0.2);
    box-shadow: 0 10px 25px rgba(74,47,33,0.25);
}
body.skin-scrapbook .btn-masuk-pameran-mega:hover{
    background: var(--panel-dark);
    color: #fffaf0;
    border-color: var(--panel-dark);
}

body.skin-scrapbook .timeline-item{
    background: #fffaf0;
    border: 1px solid rgba(74,47,33,0.15);
    box-shadow: 3px 5px 12px rgba(74,47,33,0.15);
}
body.skin-scrapbook .timeline-item h3{
    font-family:'Kalam',cursive;
    color: var(--accent);
}
body.skin-scrapbook .timeline-item p{
    color: rgba(74,47,33,0.8);
}

/* --- Foto Momen Utama → jadi polaroid ditempel washi tape --- */
body.skin-scrapbook .photo-frame{
    background:#fffaf0;
    border: 1px solid rgba(74,47,33,0.15);
    box-shadow: 4px 8px 18px rgba(74,47,33,0.25);
    transform: rotate(-2deg);
    position:relative;
}
body.skin-scrapbook .photo-frame::before{
    content:"";
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%) rotate(-3deg);
    width:90px;
    height:26px;
    background: rgba(224,164,88,0.55);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index:2;
}
body.skin-scrapbook .photo-caption{
    font-family:'Caveat',cursive;
    font-size:1.6rem;
    color: rgba(74,47,33,0.85);
}

/* --- Gallery foto → jadi "polaroid ditempel washi tape" --- */
body.skin-scrapbook .gallery-item{
    background:#fffaf0;
    border: 1px solid rgba(74,47,33,0.15);
    box-shadow: 4px 6px 14px rgba(74,47,33,0.2);
}
body.skin-scrapbook .gallery-item:nth-child(odd){ transform: rotate(-2deg); }
body.skin-scrapbook .gallery-item:nth-child(even){ transform: rotate(2deg); }
body.skin-scrapbook .gallery-tag{
    font-family:'Kalam',cursive;
    color: var(--accent);
}
body.skin-scrapbook .gallery-caption{
    font-family:'Caveat',cursive;
    font-size: 1.2rem;
    color: rgba(74,47,33,0.85);
}

/* --- Kuis & ending --- */
body.skin-scrapbook .btn-quiz-elegant{
    font-family:'Kalam',cursive;
    background: #fffaf0;
    color: var(--panel-dark);
    border-color: rgba(74,47,33,0.2);
}
body.skin-scrapbook .ending-section p{
    font-family:'Caveat',cursive;
    font-size: 1.4rem;
    color: rgba(74,47,33,0.85);
}

/* =========================================================================
   ============================================================
   SKIN: BLOOMING GARDEN — PRODUK KETIGA
   ============================================================
   Identitas visual yang berbeda dari Galaxy (mistis) & Scrapbook
   (nostalgic/kertas):
   - Minimalis, elegan, pastel — banyak white space, tidak ramai
   - Font Playfair Display (serif modern-elegan), bukan handwritten
     atau serif klasik
   - Dekorasi: kelopak bunga melayang pelan + blur lembut warna
     pastel (bukan bintang, bukan tekstur kertas)
   - Kartu berbentuk soft/rounded dengan border tipis, bukan kaca
     gelap atau kertas kraft
   ============================================================
   ========================================================================= */

/* --- Matikan bintang & shooting star; aurora dipakai ulang jadi "blur bunga" --- */
body.skin-garden #galaxy,
body.skin-garden .shooting-star{
    display:none !important;
}

/* Aurora sudah pakai var(--pink)/var(--purple) → otomatis jadi blur pastel
   lembut untuk skin ini, tidak perlu override lagi. Cukup naikkan opacity
   dikit biar terasa sebagai elemen dekoratif utama, bukan sekadar residu. */
body.skin-garden .aurora{
    opacity:.35;
    filter: blur(160px);
}

/* --- Latar pastel lembut, bukan gelap (galaxy) atau kraft (scrapbook) --- */
body.skin-garden{
    background: linear-gradient(160deg, var(--bg-deep), #f3ece7 45%, #eef2ea 100%);
    color: var(--panel-dark);
}

/* --- Kelopak bunga melayang pelan (CSS murni, tanpa gambar/JS) --- */
body.skin-garden::before,
body.skin-garden::after{
    content:"";
    position:fixed;
    width:26px;
    height:26px;
    background: var(--accent-soft);
    border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
    opacity:.55;
    z-index:-70;
    pointer-events:none;
    animation: gardenPetalFall 14s linear infinite;
}
body.skin-garden::before{ left: 12%; top:-40px; animation-delay: 0s; }
body.skin-garden::after{ left: 78%; top:-40px; width:18px; height:18px; animation-delay: 6s; background: var(--pink); }

@keyframes gardenPetalFall{
    0%   { transform: translateY(-40px) translateX(0) rotate(0deg); opacity:0; }
    10%  { opacity:.55; }
    50%  { transform: translateY(50vh) translateX(40px) rotate(180deg); }
    90%  { opacity:.55; }
    100% { transform: translateY(105vh) translateX(-20px) rotate(360deg); opacity:0; }
}

/* --- Judul pakai Playfair Display, elegan & lapang --- */
body.skin-garden .glass-card h1,
body.skin-garden .hero h1,
body.skin-garden .section-title,
body.skin-garden .museum-hero h1,
body.skin-garden .ending-section h2{
    font-family:'Playfair Display', serif;
    font-weight:600;
    color: var(--panel-dark);
    text-shadow:none;
    letter-spacing: 0.5px;
}

body.skin-garden .small-title,
body.skin-garden .hero-badge{
    font-family:'Poppins', sans-serif;
    font-weight:500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--accent);
}

body.skin-garden p,
body.skin-garden .hero-text,
body.skin-garden .section-subtitle{
    color: rgba(74,59,66,0.75);
    font-weight:300;
}

/* --- Kartu utama: soft, rounded, border tipis, banyak ruang kosong --- */
body.skin-garden .glass-card,
body.skin-garden .letter-box{
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(201,123,147,0.2);
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(201,123,147,0.12);
    backdrop-filter: blur(10px);
}

body.skin-garden .glass-card input{
    background: rgba(255,255,255,0.7);
    color: var(--panel-dark);
    border: 1px solid rgba(201,123,147,0.25);
}
body.skin-garden .glass-card input::placeholder{
    color: rgba(74,59,66,0.4);
}

body.skin-garden #enterBtn,
body.skin-garden #nextGiftBtn,
body.skin-garden #blowBtn{
    background: var(--accent);
    color: #fffaf0;
    font-family:'Poppins', sans-serif;
    font-weight:500;
    border-radius: 30px;
    box-shadow: 0 10px 25px rgba(201,123,147,0.3);
}

/* --- Constellation → jadi "Kelopak Kenangan", kartu bulat lembut --- */
body.skin-garden .star{
    background: rgba(255,255,255,0.65);
    color: var(--panel-dark);
    font-family:'Poppins', sans-serif;
    font-weight: 500;
    border-radius: 50% / 40%;
    border: 1px solid rgba(201,123,147,0.2);
    box-shadow: 0 10px 25px rgba(201,123,147,0.15);
}
body.skin-garden .star:hover{
    background: var(--accent-soft);
}

/* --- Reasons → kartu daun/bunga individual, soft & rapi --- */
body.skin-garden .reason-card{
    background: rgba(255,255,255,0.65);
    color: var(--accent);
    border: 1px solid rgba(201,123,147,0.2);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(201,123,147,0.12);
    font-family:'Playfair Display', serif;
}

/* --- Popup pesan --- */
body.skin-garden .popup-content{
    background: #fffaf7;
    color: var(--panel-dark);
    border: 1px solid rgba(201,123,147,0.2);
    border-radius: 24px;
}
body.skin-garden .popup-content p{
    font-family:'Playfair Display', serif;
    font-size: 1.3rem;
}

/* --- Museum → jadi "Taman Kenangan" --- */
body.skin-garden #museumHeroTitle{
    color: var(--panel-dark);
    text-shadow:none;
}
body.skin-garden #museumHeroSubtitle{
    color: rgba(74,59,66,0.7);
}
body.skin-garden #typedLetterMain,
body.skin-garden #typing-masterpiece{
    font-family:'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--panel-dark);
}
body.skin-garden #quizTitle{
    color: var(--accent);
    text-shadow:none;
}
/* quizSubtitle & quizQuestion SENGAJA tidak diubah — box #quizBox tetap
   gelap di semua tema (efek "vault keamanan"), jadi teks terang bawaan
   sudah pas kontrasnya. Jangan ganti ke warna gelap di sini. */
body.skin-garden .masterpiece-title{
    color: var(--accent);
    text-shadow:none;
}
body.skin-garden .masterpiece-letter-box{
    border-color: rgba(201,123,147,0.2);
    background: rgba(255,255,255,0.55);
}
body.skin-garden .btn-masuk-pameran-mega{
    color: #fffaf0;
    background: var(--accent);
    border-color: rgba(201,123,147,0.25);
    box-shadow: 0 10px 25px rgba(201,123,147,0.25);
}
body.skin-garden .btn-masuk-pameran-mega:hover{
    background: var(--panel-dark);
    color: #fffaf0;
    border-color: var(--panel-dark);
}

body.skin-garden .timeline-item{
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(201,123,147,0.2);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(201,123,147,0.12);
}
body.skin-garden .timeline-item h3{
    font-family:'Playfair Display', serif;
    color: var(--accent);
}
body.skin-garden .timeline-item p{
    color: rgba(74,59,66,0.75);
    font-weight:300;
}

/* --- Foto Momen Utama → bingkai soft-rounded, elegan --- */
body.skin-garden .photo-frame{
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(201,123,147,0.25);
    border-radius: 28px;
    box-shadow: 0 20px 45px rgba(201,123,147,0.18);
}
body.skin-garden .photo-caption{
    font-family:'Playfair Display', serif;
    color: rgba(74,59,66,0.8);
}

/* --- Gallery foto → bingkai soft-rounded, tanpa efek miring --- */
body.skin-garden .gallery-item{
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(201,123,147,0.2);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(201,123,147,0.15);
}
body.skin-garden .gallery-tag{
    font-family:'Poppins', sans-serif;
    letter-spacing: 1px;
    color: var(--accent);
}
body.skin-garden .gallery-caption{
    font-family:'Playfair Display', serif;
    color: rgba(74,59,66,0.8);
}

/* --- Kuis & ending --- */
body.skin-garden .btn-quiz-elegant{
    font-family:'Poppins', sans-serif;
    background: rgba(255,255,255,0.65);
    color: var(--panel-dark);
    border-color: rgba(201,123,147,0.25);
    border-radius: 20px;
}
body.skin-garden .ending-section p{
    font-family:'Playfair Display', serif;
    font-size: 1.2rem;
    color: rgba(74,59,66,0.8);
}

/* =========================================================
   RESPONSIVE GRID OPTIMIZATION (WAJIB DITAROH DI BAWAH)
   ========================================================= */
@media(max-width: 992px) {
    /* Untuk tablet / layar tanggung, ubah jadi 2 kolom sejajar */
    .constellation {
        grid-template-columns: repeat(2, 1fr);
    }
    .reasons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 768px) {
    /* Menyesuaikan dengan media query bawaanmu di baris bawah */
    .constellation {
        grid-template-columns: 1fr; /* 1 kolom penuh di HP agar tulisan star tidak sempit */
        gap: 20px;
    }
    .reasons-grid {
        grid-template-columns: repeat(2, 1fr); /* Tetap 2 kolom di HP agar hemat ruang vertikal */
        gap: 15px;
    }
}