* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; font-family: 'Montserrat', sans-serif; overflow-x: hidden; }

#wip-bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
#wip-app { position: relative; z-index: 2; min-height: 100vh; }

.wip-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.wip-hidden { display: none !important; }

/* Dynamic Font Classes for Couple Names */
.wip-font-great-vibes { font-family: 'Great Vibes', cursive !important; }
.wip-font-sacramento { font-family: 'Sacramento', cursive !important; }
.wip-font-dancing-script { font-family: 'Dancing Script', cursive !important; }
.wip-font-alex-brush { font-family: 'Alex Brush', cursive !important; }
.wip-font-parisienne { font-family: 'Parisienne', cursive !important; }
.wip-font-monte-carlo { font-family: 'MonteCarlo', cursive !important; }
.wip-font-cinzel { font-family: 'Cinzel', serif !important; }
.wip-font-playfair { font-family: 'Playfair Display', serif !important; }
.wip-font-cormorant { font-family: 'Cormorant Garamond', serif !important; }

/* Horizontal Gallery Layout */
.wip-gallery-grid-horizontal {
    display: flex; gap: 12px; overflow-x: auto; padding: 15px 5px; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.wip-gallery-thumb {
    flex: 0 0 min(130px, 30vw); height: 130px; border-radius: 12px; overflow: hidden; scroll-snap-align: center;
    border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.3s;
}
.wip-gallery-thumb:hover { transform: scale(1.05); }
.wip-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Audio Floating Button */
#wip-audio-btn {
    position: fixed; bottom: 25px; right: 25px; z-index: 999;
    width: 50px; height: 50px; border-radius: 50%;
    background: #d4af37; color: #111; display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    animation: wipSpin 6s linear infinite;
}
@keyframes wipSpin { 100% { transform: rotate(360deg); } }

/* Toast */
.wip-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #d4af37; color: #111; padding: 10px 20px; border-radius: 20px; font-weight: bold; z-index: 1000; }

/* ============================================================
   VARIASI 10 TEMA & STRUCTURAL LAYOUTS
   ============================================================ */

/* 1. ELEGAN ANIMASI */
.wip-tema-elegan-animasi { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); color: #fff; }
.wip-tema-elegan-animasi .wip-glass-card {
    background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; padding: 30px; margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.wip-tema-elegan-animasi h1, .wip-tema-elegan-animasi h2 { color: #d4af37; text-shadow: 0 0 12px rgba(212,175,55,0.5); }

/* 2. LUXURY GOLD & BLACK */
.wip-tema-luxury-gold { background: #050505; color: #f7e7ce; }
.wip-tema-luxury-gold .wip-glass-card {
    background: #0d0d0d; border: 2px solid #d4af37; border-radius: 0px; padding: 35px; margin-bottom: 30px;
    box-shadow: 0 0 30px rgba(212,175,55,0.25);
}
.wip-tema-luxury-gold h1, .wip-tema-luxury-gold h2 { color: #ffd700; letter-spacing: 2px; text-transform: uppercase; }

/* 3. JAPANESE SAKURA */
.wip-tema-japanese-sakura { background: #fff5f8; color: #4a2c35; }
.wip-tema-japanese-sakura .wip-glass-card {
    background: #ffffff; border-radius: 40px 10px 40px 10px; border: 2px solid #ffccd5; padding: 30px; margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.3);
}
.wip-tema-japanese-sakura h1, .wip-tema-japanese-sakura h2 { color: #e63946; }

/* 4. RUSTIC VINTAGE */
.wip-tema-rustic-vintage { background: #2b1f17; color: #f0e6d2; }
.wip-tema-rustic-vintage .wip-glass-card {
    background: #3a2b20; border: 3px dashed #8c6d46; border-radius: 12px; padding: 30px; margin-bottom: 30px;
}

/* 5. CYBER NEON GLOW */
.wip-tema-cyber-neon { background: #030712; color: #e0f2fe; }
.wip-tema-cyber-neon .wip-glass-card {
    background: rgba(15, 23, 42, 0.85); border: 1px solid #06b6d4; border-radius: 16px; padding: 30px; margin-bottom: 30px;
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.4);
}
.wip-tema-cyber-neon h1, .wip-tema-cyber-neon h2 { color: #38bdf8; text-shadow: 0 0 10px #0284c7; }

/* 6. VOGUE EDITORIAL */
.wip-tema-vogue-editorial { background: #ffffff; color: #000000; }
.wip-tema-vogue-editorial .wip-glass-card {
    background: #fdfdfd; border: 3px solid #000000; border-radius: 0px; padding: 35px; margin-bottom: 30px;
    box-shadow: 12px 12px 0px #000000;
}

/* 7. EMERALD ROYALE */
.wip-tema-emerald-royale { background: #062319; color: #e2f1e8; }
.wip-tema-emerald-royale .wip-glass-card {
    background: #0b3829; border: 2px solid #52b788; border-radius: 20px; padding: 30px; margin-bottom: 30px;
}
.wip-tema-emerald-royale h1, .wip-tema-emerald-royale h2 { color: #74c69d; }

/* 8. BOHO CHIC */
.wip-tema-boho-chic { background: #fdf6ee; color: #5c4033; }
.wip-tema-boho-chic .wip-glass-card {
    background: #ffffff; border-radius: 120px 120px 20px 20px; border: 2px solid #e07a5f; padding: 35px; margin-bottom: 30px;
}
.wip-tema-boho-chic h1, .wip-tema-boho-chic h2 { color: #e07a5f; }

/* 9. OCEAN BREEZE */
.wip-tema-ocean-breeze { background: #f0f8ff; color: #1d3557; }
.wip-tema-ocean-breeze .wip-glass-card {
    background: #ffffff; border-radius: 20px; border: 2px solid #a8dadc; padding: 30px; margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(69, 123, 157, 0.15);
}
.wip-tema-ocean-breeze h1, .wip-tema-ocean-breeze h2 { color: #457b9d; }

/* 10. ROYAL BURGUNDY */
.wip-tema-royal-burgundy { background: #2b0812; color: #fceade; }
.wip-tema-royal-burgundy .wip-glass-card {
    background: #400d1b; border: 2px solid #ee9b00; border-radius: 12px; padding: 30px; margin-bottom: 30px;
}
.wip-tema-royal-burgundy h1, .wip-tema-royal-burgundy h2 { color: #ee9b00; }