/* =========================================
   STYLE PREMIUM - UNDANGAN DIGITAL (ULTIMATE DARK GOLD)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

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

body { background-color: #050505; background-image: url('https://www.transparenttextures.com/patterns/stardust.png'); color: #eaeaea; font-family: 'Montserrat', sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; background-image: url('assets/images/bg-mewah.jpg'); background-size: cover; background-position: center;}
h1, h2, h3, .subtitle, .dan { font-family: 'Playfair Display', serif; }

.gold-text { background: linear-gradient(to right, #d4af37, #fff2cd, #aa771c, #fff2cd, #d4af37); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shineGold 4s linear infinite; text-shadow: 0px 4px 15px rgba(212, 175, 55, 0.4); }
@keyframes shineGold { to { background-position: 200% center; } }

#particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* PERBAIKAN: Gunakan 100dvh untuk HP modern agar tinggi presisi mengabaikan bar URL browser */
.container { position: relative; z-index: 60; display: flex; justify-content: center; align-items: center; height: 100vh; height: 100dvh; perspective: 1200px; background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%); transition: opacity 1.5s ease, transform 1.5s ease; }

/* PERBAIKAN: Padding diperkecil agar lebih padat dan presisi */
.card-3d { background: rgba(15, 15, 15, 0.4); padding: 20px 15px; border-radius: 25px; border: 1px solid rgba(212, 175, 55, 0.3); text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(212, 175, 55, 0.1); transform-style: preserve-3d; transition: transform 0.1s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); width: 92%; max-width: 380px; }

/* PERBAIKAN: Tinggi foto pakai vh (Viewport Height). Otomatis panjang di HP panjang, otomatis pendek di HP pendek */
.cover-photo {
    width: 100%; 
    height: 30vh; /* Tinggi menyesuaikan layar */
    min-height: 160px; /* Batas paling pendek */
    max-height: 250px; /* Batas paling tinggi */
    object-fit: cover; 
    object-position: top; 
    border-radius: 15px;
    margin-bottom: 12px; /* Margin diperkecil */
    border: 2px solid #d4af37;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* PERBAIKAN: Margin & Font size disesuaikan agar tidak memakan banyak ruang vertikal */
.subtitle { font-size: 1rem; color: #d4af37; letter-spacing: 3px; transform: translateZ(35px); margin-bottom: 3px; text-transform: uppercase;}
.card-3d h1 { font-size: 2.1rem; margin: 8px 0; transform: translateZ(60px); }
.date { font-size: 0.95rem; color: #ccc; margin-bottom: 12px; transform: translateZ(30px); letter-spacing: 2px;}

.guest-box { background: rgba(0,0,0,0.5); border: 1px solid rgba(212,175,55,0.3); padding: 8px; border-radius: 10px; margin-bottom: 15px; transform: translateZ(40px); }
.guest-box p { margin-bottom: 2px !important; }
.guest-box h2 { font-size: 1.3rem !important; margin: 2px 0 5px 0 !important; }

/* FITUR BARU: STEMPEL LILIN EMAS (WAX SEAL) diperkecil proporsional */
.wax-seal {
    width: 70px; height: 70px; margin: 0 auto;
    background: radial-gradient(circle at 30% 30%, #fcf6ba, #d4af37 40%, #aa771c 80%, #523707);
    border-radius: 50%; cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8), inset 0 -5px 15px rgba(0,0,0,0.6), inset 0 5px 10px rgba(255,255,255,0.4);
    display: flex; justify-content: center; align-items: center;
    position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(50px);
}
.wax-seal-inner {
    width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid rgba(138, 90, 25, 0.6);
    display: flex; justify-content: center; align-items: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: bold; color: #4a2e05;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.wax-seal:hover { transform: scale(1.15) translateZ(50px); box-shadow: 0 15px 30px rgba(212, 175, 55, 0.5), inset 0 -5px 15px rgba(0,0,0,0.6); }
.seal-broken { transform: scale(1.8) translateZ(50px) !important; opacity: 0; pointer-events: none; filter: blur(5px); }
.wax-seal + p { margin-top: 5px !important; margin-bottom: 0px !important;}

/* Tombol Global */
.btn-gold { display: inline-block; background: linear-gradient(135deg, #d4af37 0%, #aa771c 100%); color: #000; padding: 12px 28px; border-radius: 40px; font-weight: 600; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateZ(50px); border: none; cursor: pointer; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); text-decoration: none; text-align: center; }
.btn-gold:hover { transform: scale(1.08) translateZ(50px); box-shadow: 0 15px 25px rgba(212, 175, 55, 0.6); }

/* Gerbang Teater */
.theater-mask-left, .theater-mask-right { position: fixed; top: 0; width: 50%; height: 100%; background: linear-gradient(to right, #111, #0a0a0a); background-image: url('https://www.transparenttextures.com/patterns/black-scales.png'); z-index: 50; transition: transform 1.8s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: 0 0 50px rgba(0,0,0,1); }
.theater-mask-left { left: 0; border-right: 1px solid rgba(212, 175, 55, 0.2); }
.theater-mask-right { right: 0; border-left: 1px solid rgba(212, 175, 55, 0.2); }
.theater-mask-left::after, .theater-mask-right::after { content: ''; position: absolute; top: 0; width: 6px; height: 100%; background: linear-gradient(to bottom, #aa771c, #fff2cd, #d4af37, #fff2cd, #aa771c); box-shadow: 0 0 15px rgba(0,0,0,0.8); }
.theater-mask-left::after { right: 0; } .theater-mask-right::after { left: 0; }
.theater-open-left { transform: translateX(-100%); } .theater-open-right { transform: translateX(100%); }

/* Isi Undangan */
.main-content { display: none; position: relative; z-index: 5; padding: 20px 15px; text-align: center; }
.main-show { display: block; animation: fadeInContent 2.5s ease forwards; }
@keyframes fadeInContent { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
.section { margin: 60px auto; padding: 40px 25px; max-width: 550px; background: rgba(20, 20, 20, 0.5); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.section h2 { font-size: 2.2rem; margin-bottom: 20px; }
.section p { font-size: 0.95rem; line-height: 1.8; color: #d0d0d0; margin-bottom: 15px; font-weight: 300; }
.shimmer-wrapper { position: relative; overflow: hidden; display: inline-block; }
.shimmer-wrapper::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: shimmerSweep 4s infinite; pointer-events: none; }
@keyframes shimmerSweep { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.couple { margin-top: 30px; }
.arch-frame { width: 180px; height: 250px; margin: 0 auto 20px auto; border-radius: 90px 90px 15px 15px; overflow: hidden; border: 3px solid #d4af37; box-shadow: 0 15px 30px rgba(0,0,0,0.7), inset 0 0 10px rgba(255,255,255,0.2); }
.profile-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.arch-frame:hover .profile-img { transform: scale(1.1); }
.dan { font-size: 4rem; color: #d4af37; margin: 10px 0; display: block; font-style: italic;}

/* FITUR BARU: PESAN SUARA RAHASIA */
.voice-btn { display: inline-flex; align-items: center; gap: 12px; background: rgba(20, 20, 20, 0.8); border: 1px solid #d4af37; color: #d4af37; padding: 12px 25px; border-radius: 30px; cursor: pointer; margin-top: 25px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; transition: 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.voice-btn:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-3px); }
.waveform { display: flex; gap: 3px; align-items: center; height: 15px; margin-left: 5px;}
.waveform span { width: 3px; background: #d4af37; border-radius: 3px; height: 20%; transition: height 0.1s; }
.waveform.playing span { animation: waveAnim 0.8s infinite alternate ease-in-out; }
.waveform.playing span:nth-child(1) { animation-delay: 0s; }
.waveform.playing span:nth-child(2) { animation-delay: 0.2s; }
.waveform.playing span:nth-child(3) { animation-delay: 0.4s; }
.waveform.playing span:nth-child(4) { animation-delay: 0.1s; }
@keyframes waveAnim { 0% { height: 20%; } 100% { height: 100%; } }

.timeline { position: relative; max-width: 100%; margin: 30px auto 0 auto; padding-left: 20px; text-align: left; border-left: 2px solid #d4af37; }
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-item::before { content: ''; position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #050505; border: 2px solid #d4af37; border-radius: 50%; box-shadow: 0 0 10px #d4af37, 0 0 5px #d4af37 inset; }
.timeline-date { color: #d4af37; font-weight: bold; font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 5px; }
.timeline-content { background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.2); }

.countdown { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.time-box { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(212, 175, 55, 0.4); padding: 12px 10px; border-radius: 12px; min-width: 65px; box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.1); }
.time-box span { display: block; font-size: 1.6rem; color: #d4af37; font-weight: bold; font-family: 'Playfair Display', serif;}
.time-box p { font-size: 0.75rem; margin: 0; color: #aaa; text-transform: uppercase; letter-spacing: 1px;}

.event-card { background: linear-gradient(135deg, rgba(20,20,20,0.8), rgba(10,10,10,0.9)); padding: 20px; border-radius: 15px; margin-bottom: 20px; border-left: 4px solid #d4af37; border-right: 1px solid rgba(212, 175, 55, 0.2); border-top: 1px solid rgba(212, 175, 55, 0.2); border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.event-card h3 { color: #d4af37; margin-bottom: 12px; font-size: 1.4rem;}

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid rgba(212, 175, 55, 0.3); cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.9);}
.gallery-item:hover img { transform: scale(1.15); filter: brightness(1); }

.lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(10px); justify-content: center; align-items: center; }
.lightbox-img { max-width: 90%; max-height: 80%; border: 3px solid #d4af37; border-radius: 15px; box-shadow: 0 0 40px rgba(212,175,55,0.5); animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.close-lightbox { position: absolute; top: 25px; right: 30px; color: #d4af37; font-size: 45px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.close-lightbox:hover { color: #fff; transform: scale(1.2); }
@keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bank-card { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(212, 175, 55, 0.4); padding: 25px; border-radius: 20px; margin: 20px auto; text-align: left; position: relative; overflow: hidden; max-width: 380px; box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 10px rgba(212, 175, 55, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.bank-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.8), inset 0 0 15px rgba(212, 175, 55, 0.2); }
.bank-card::before { content: ''; position: absolute; top: -40px; left: -40px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%); }
.bank-logo { font-size: 1.2rem; font-weight: 700; color: #d4af37; margin-bottom: 20px; letter-spacing: 2px;}
.account-number { font-size: 1.8rem; font-weight: 600; color: #fff; margin-bottom: 8px; font-family: 'Courier New', Courier, monospace; letter-spacing: 3px; text-shadow: 0 2px 5px rgba(0,0,0,0.8);}
.account-name { font-size: 0.9rem; color: #ccc; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;}
.btn-copy { background: rgba(212, 175, 55, 0.1); color: #d4af37; border: 1px solid #d4af37; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-size: 0.85rem; font-family: 'Montserrat', sans-serif; font-weight: 500; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; }
.btn-copy:hover { background: #d4af37; color: #050505; box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }

.rsvp-form { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; }
.input-group { position: relative; width: 100%; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #d4af37; font-size: 1.1rem; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { width: 100%; padding: 15px 15px 15px 45px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 12px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; transition: all 0.3s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); appearance: none; }
.rsvp-form select { cursor: pointer; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), inset 0 2px 5px rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.8); }
.rsvp-form textarea { resize: vertical; min-height: 120px; padding-top: 15px; }
.btn-submit { width: 100%; margin-top: 10px; font-size: 1rem; padding: 15px; }

.wishes-container { margin-top: 35px; max-height: 350px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 15px; padding-right: 10px; }
.wishes-container::-webkit-scrollbar { width: 6px; }
.wishes-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 10px; }
.wishes-container::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 10px; }
.wish-item { background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(10,10,10,0.95)); padding: 20px; border-radius: 15px; border-left: 4px solid #d4af37; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.wish-item h4 { color: #d4af37; margin-bottom: 10px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;}
.wish-item p { font-size: 0.9rem; color: #eaeaea; margin: 0; line-height: 1.6; }
.badge-hadir { font-size: 0.7rem; background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.badge-absen { font-size: 0.7rem; background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; padding: 4px 10px; border-radius: 20px; font-weight: 600; }

.fade-in { opacity: 0; transform: translateY(60px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.music-btn { position: fixed; bottom: 20px; right: 20px; width: 45px; height: 45px; background: linear-gradient(135deg, #d4af37, #aa771c); color: #000; border-radius: 50%; display: none; justify-content: center; align-items: center; font-size: 18px; cursor: pointer; z-index: 100;}
.spinning { animation: spin 4s linear infinite; }
.ripple { animation: rippleEffect 1.5s infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes rippleEffect { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }

.footer { padding: 30px 20px; text-align: center; margin-bottom: 50px;}

/* Tambahan Media Query untuk HP sangat kecil agar tetap rapi */
@media (max-width: 380px) { 
    .card-3d h1 { font-size: 1.8rem; } 
    .arch-frame { width: 140px; height: 190px; } 
    .cover-photo { height: 25vh; }
}