/* style.css - Complete Stylesheet with Mobile Responsive Fixes */

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

html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    background-color: #1a1a1a;
    font-family: 'Work Sans', sans-serif;
}

.mobile-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    background-color: #ece5dd;
    position: relative;
    margin: 0 auto;
    overflow-x: hidden; /* FIX: Mencegah layar tergeser ke samping */
}

@media (min-width: 768px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-wrapper {
        max-width: 480px !important;
        box-shadow: 0 0 25px rgba(0,0,0,0.6);
    }
    .cover-section {
        max-width: 480px !important;
    }
}

.font-aesthetic { font-family: 'Alex Brush', cursive; }
.font-arabic { font-family: 'Amiri', serif; font-size: 1.4rem; }
.text-brown { color: #5c4333; }
.hashtag-text { font-size: 0.85rem; letter-spacing: 1px; opacity: 0.9; }
.letter-spacing { letter-spacing: 2px; }
.xsmall { font-size: 0.72rem; }

/* ==================== EFEK ANIMASI MASUK CINEMATIC ==================== */
.anim-left { opacity: 0; transform: translateX(-40px); filter: blur(4px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, filter; }
.anim-right { opacity: 0; transform: translateX(40px); filter: blur(4px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, filter; }
.anim-up { opacity: 0; transform: translateY(50px); filter: blur(4px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, filter; }
.anim-zoom { opacity: 0; transform: scale(0.85); filter: blur(6px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, filter; }

.anim-left.show, .anim-right.show, .anim-up.show, .anim-zoom.show { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }

/* Delay lebih banyak untuk variasi Masonry */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }
.delay-5 { transition-delay: 0.75s; }

/* ==================== COVER SECTION ==================== */
.cover-section {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100% !important; height: 100vh; z-index: 999;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), opacity 1s ease-in-out;
    overflow: hidden;
}
.cover-section.open { transform: translate(-50%, -100%); opacity: 0; }
.bg-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: opacity 1.5s ease-in-out;
    animation: coverKenBurns 9s ease-in-out infinite alternate;
}
.bg-slide.active { opacity: 1; }
@keyframes coverKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }

/* HERO SECTION (SLIDE 2) */
.hero-section { position: relative; height: 100vh; width: 100%; overflow: hidden; background-color: #000; }
.hero-img-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out; overflow: hidden; }
.hero-img-container.active { opacity: 1; }
.smooth-pan-img { width: 140%; height: 100%; object-fit: cover; object-position: center; will-change: transform; animation: smoothMoveLeftRight 12s ease-in-out infinite alternate; }
.smooth-pan-img.pan-reverse { animation: smoothMoveRightLeft 12s ease-in-out infinite alternate; }
@keyframes smoothMoveLeftRight { 0% { transform: translate3d(-15%, 0, 0) scale(1.02); } 100% { transform: translate3d(0%, 0, 0) scale(1.08); } }
@keyframes smoothMoveRightLeft { 0% { transform: translate3d(0%, 0, 0) scale(1.08); } 100% { transform: translate3d(-15%, 0, 0) scale(1.02); } }
.cover-dark-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%); z-index: 1; }
.cover-content, .hero-content { position: relative; z-index: 2; }

/* BUTTONS & TIMER */
.btn-buka-undangan { border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); font-size: 0.9rem; border-radius: 8px !important; }
.timer-box { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); border-radius: 12px; padding: 8px 10px; min-width: 60px; text-align: center; }
.timer-box span { display: block; font-size: 1.1rem; font-weight: 600; line-height: 1; }
.timer-box small { font-size: 0.65rem; opacity: 0.8; }
.btn-date-pill, .btn-save-date { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; }

/* MEMPELAI SECTION */
.slide-3-section { background: transparent; position: relative; overflow: hidden; }
.profile-container-card { background-color: #ffffff; border-radius: 20px; padding: 12px; display: flex; align-items: center; position: relative; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); overflow: hidden; }
.profile-container-card.bride-card { flex-direction: row; }
.profile-container-card.groom-card { flex-direction: row-reverse; }
.profile-img-wrapper { position: relative; flex: 1; height: 380px; border-radius: 14px; overflow: hidden; }
.profile-img-wrapper::after { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 10px; pointer-events: none; z-index: 2; }
.profile-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-tag-wrapper { width: 60px; display: flex; justify-content: center; align-items: center; user-select: none; }
.vertical-text-custom { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Alex Brush', cursive; font-size: 2.2rem; color: #2b2b2b; white-space: nowrap; letter-spacing: 1px; }
.profile-overlay-box-new { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(55, 45, 38, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; padding: 12px 10px; text-align: center; color: #ffffff; z-index: 3; }

/* MUSIC FLOATING BUTTON */
.btn-music { position: fixed; bottom: 20px; right: 20px; z-index: 998; width: 45px; height: 45px; border-radius: 50%; border: none; background-color: #D4AF37; color: #fff; }

/* ==================== EVENT SECTION (SLIDE 3) ==================== */
.event-section-bg { background-color: #c4b197; position: relative; padding: 60px 0px 80px; color: #fff; overflow: hidden; }
.event-quran-box { margin-bottom: 40px; padding: 0 15px; }
.event-quran-text { font-size: 0.85rem; line-height: 1.6; color: #ffffff; opacity: 0.95; }
.wedding-event-title { font-family: 'Alex Brush', cursive; font-size: 3rem; color: #fff; margin-bottom: 30px; text-shadow: 1px 1px 5px rgba(0,0,0,0.1); }
.event-card { background-color: #fcf9f2; border-radius: 0; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2); overflow: hidden; position: relative; margin-bottom: 40px; }
.event-card-header { width: 100%; height: 380px; overflow: hidden; }
.event-card-header img { width: 100%; height: 100%; object-fit: cover; }
.event-card-body { display: flex; background-color: #fcf9f2; }
.event-card-sidebar { width: 50px; background-color: #c4b197; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0,0,0,0.05); }
.event-vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Alex Brush', cursive; font-size: 1.8rem; color: #fff; white-space: nowrap; letter-spacing: 2px; }
.event-card-content { flex: 1; padding: 25px 15px; text-align: center; color: #333; }
.event-day { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; letter-spacing: 1px; }
.event-date-large { font-size: 3.2rem; line-height: 1; font-family: 'Work Sans', sans-serif; font-weight: 300; margin: 5px 0; color: #2b2b2b; }
.event-year-time { font-size: 0.9rem; color: #555; margin-bottom: 20px; line-height: 1.5; }
.event-divider { width: 100%; height: 1px; background-color: #bbb; margin: 5px 0; }
.event-location { font-size: 0.85rem; line-height: 1.5; margin-bottom: 20px; color: #444; }
.btn-maps { background-color: #c4b197; color: #fff !important; border: none; padding: 10px 20px; font-size: 0.85rem; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }

/* ==================== SLIDE 4: LOVE STORY & GALLERY ==================== */
.love-story-section { background-color: #c4b197; padding: 50px 0px 40px; color: #fff; position: relative; }
.love-story-title { font-family: 'Alex Brush', cursive; font-size: 3.2rem; color: #fff; text-align: left; margin-bottom: 20px; line-height: 1; }
.love-story-img-container { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); border: 3px solid rgba(255,255,255,0.3); }
.love-story-img-container img { width: 100%; display: block; }
.timeline-container { position: relative; padding-left: 20px; margin-left: 10px; border-left: 1px solid rgba(255,255,255,0.4); margin-bottom: 40px; text-align: left; }
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-item::before { content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #c4b197, 0 0 0 4px rgba(255,255,255,0.5); }
.timeline-title { font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; }
.timeline-text { font-size: 0.85rem; line-height: 1.6; opacity: 0.9; }

/* OUR MOMENTS MASONRY */
.moments-section { background-color: #c4b197; padding: 20px 0px 50px; text-align: center; }
.moments-title { font-family: 'Alex Brush', cursive; font-size: 3.2rem; color: #fff; text-align: left; margin-bottom: 20px; line-height: 1; }
.masonry-grid { column-count: 2; column-gap: 12px; padding: 0; }
.masonry-grid img { width: 100%; margin-bottom: 12px; border-radius: 10px; break-inside: avoid; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* WEDDING GIFT */
.gift-section { background-color: #c4b197; padding: 40px 0px 60px; text-align: center; color: #fff; }
.gift-title { font-family: 'Alex Brush', cursive; font-size: 3.2rem; margin-bottom: 10px; }
.gift-desc { font-size: 0.85rem; opacity: 0.9; margin-bottom: 30px; line-height: 1.6; padding: 0 10px; }
.bank-card { background: linear-gradient(135deg, #f9f9f9 0%, #e0e0e0 100%); border-radius: 16px; padding: 20px; color: #333; text-align: left; margin-bottom: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); position: relative; }
.bank-chip { width: 35px; margin-bottom: 15px; opacity: 0.8;}
.bank-logo { position: absolute; top: 20px; right: 20px; height: 25px; font-weight: bold; font-size: 1.1rem; color: #0056b3; font-style: italic;}
.bank-name-text { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; margin-bottom: 2px;}
.bank-number { font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; font-family: 'Courier New', Courier, monospace; word-break: break-all; padding-right: 70px; } /* FIX: Mencegah angka panjang jebol */
.btn-copy { background-color: #fff; border: 1px solid #ccc; font-size: 0.75rem; padding: 5px 12px; border-radius: 20px; color: #555; position: absolute; bottom: 20px; right: 20px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* RSVP */
.rsvp-section { background-color: #c4b197; padding: 40px 0px 60px; text-align: center; color: #fff; }
.rsvp-title { font-family: 'Work Sans', sans-serif; font-size: 2.2rem; font-weight: 300; margin-bottom: 10px; }
.rsvp-box { background-color: #fcf9f2; border-radius: 20px; padding: 25px 20px; text-align: left; color: #333; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.rsvp-form label { font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #555;}
.rsvp-form input, .rsvp-form textarea, .rsvp-form select { background-color: #fff; border: 1px solid #ddd; border-radius: 10px; font-size: 0.9rem; padding: 12px; width: 100%; margin-bottom: 15px; }
.btn-rsvp { background-color: #1a1a1a; color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 600; width: 100%; margin-top: 10px;}
.comment-list { margin-top: 30px; }
.comment-item { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; border: 1px solid #eee; position: relative; }
.comment-name { font-weight: bold; font-size: 0.95rem; margin-bottom: 5px; }
.comment-text { font-size: 0.85rem; color: #555; }
.comment-badge { position: absolute; top: 15px; right: 15px; font-size: 0.7rem; padding: 4px 8px; border-radius: 12px; background: #e8f5e9; color: #2e7d32; font-weight: bold;}

/* ==================== MINI GALLERY SLIDING ==================== */
.marquee-gallery-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; padding: 10px 0; }
.marquee-track { display: inline-flex; animation: scrollGallery 25s linear infinite; }
.mini-gallery-card { display: inline-block; width: 120px; height: 160px; margin-right: 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 2px solid rgba(255,255,255,0.5); }
.mini-gallery-card img { width: 100%; height: 100%; object-fit: cover; }
@keyframes scrollGallery { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }