:root {
    --bg-dark: #0f0f0f;
    --bg-card: #1a1a1a;
    --text-gold: #D4AF37;
    --text-gold-light: #F4C430;
    --text-white: #f5f5f5;
    --text-gray: #aaaaaa;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    /* Batasi lebar tampilan seperti HP saat di desktop */
    --frame-width: 480px;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-gold);
}

.section-title{font-family:'Great Vibes', cursive;font-weight:400;letter-spacing:1px}

a {
    text-decoration: none;
    color: inherit;
}

/* Utilities */
.text-center { text-align: center; }
.divider-line{width:100%;height:1px;background:linear-gradient(to right, rgba(212,175,55,0), var(--text-gold), rgba(212,175,55,0));opacity:.9}
.text-gold { color: var(--text-gold); }
.text-white { color: var(--text-white); }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* Buttons */
.btn-gold {
    --gold-d1: #5f4a06;
    --gold-d2: #8f6b00;
    --gold:   #D4AF37;
    --gold-l1:#F4C430;
    --gold-l2:#fff2a8;
    position: relative;
    background:
      linear-gradient(160deg, var(--gold-d1) 0%, var(--gold-d2) 18%, var(--gold) 40%, var(--gold-l1) 58%, var(--gold) 72%, var(--gold-d2) 90%, var(--gold-d1) 100%);
    color: #1a1200;
    padding: 12px 24px;
    border: 1px solid rgba(212,175,55,0.9);
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.35),
      inset 0 -6px 10px rgba(0,0,0,0.35),
      0 6px 18px rgba(212,175,55,0.35);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    overflow: hidden;
}

.btn-gold:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.4),
      inset 0 -6px 12px rgba(0,0,0,0.4),
      0 8px 22px rgba(212,175,55,0.45);
}

.btn-gold:active { transform: translateY(0); }

.btn-gold::after{
    content:"";
    position:absolute;inset:0;border-radius:50px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,0.4), transparent 55%),
      radial-gradient(120% 140% at 30% -20%, rgba(255,255,255,0.45), transparent 50%);
    mix-blend-mode: overlay;
    pointer-events:none;
}

/* Sections General */
section {
    min-height: 100vh;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
/* Decorative lines for section containers */
.container.decorated::before,
.container.decorated::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, 90%);
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
/* Removed decorative lines from every container */

/* Parallax Backgrounds */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

/* Force mobile viewport width on desktop */
@media (min-width: 768px) {
    /* Batasi lebar semua section agar terasa seperti mobile */
    #opening-cover,
    #main-content,
    #quote, #couple, #event, #rsvp, #family, #gift, #closing {
        width: var(--frame-width);
        margin-left: auto;
        margin-right: auto;
    }
    /* Center fixed cover horizontally with limited width */
    #opening-cover {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: var(--frame-width);
    }
    /* Keep couple layout stacked like mobile */
    .couple-wrapper {
        flex-direction: column;
    }
    /* Keep music button inside the centered frame */
    .music-btn {
        right: calc((100vw - var(--frame-width)) / 2 + 12px);
    }
}

/* Opening Cover */
#opening-cover {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-image: url('assets/vintage-pattern.webp');
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

#opening-cover .content {
    position: relative;
    z-index: 5;
    width: 90%;
    max-width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#opening-cover.slide-up {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.undangan-title{display:block;position:relative;margin:0 auto 10px;width:min(200px,50vw);height:auto;opacity:.98;pointer-events:none;z-index:6}
.cover-wayang{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-45%);
    width:min(420px,78vw);height:auto;opacity:.2;pointer-events:none;z-index:1
}
.cover-photo{
    position:relative;width:auto;max-width:100%;max-height:65vh;opacity:.95;pointer-events:none;z-index:3;
}


#opening-cover h1.names {
    font-size: 3.5rem;
    margin: 10px 0;
    background: linear-gradient(var(--text-gold), var(--text-gold-light));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.guest-box{margin-top:12px;padding:8px 10px;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;position:relative}
.name-note{display:block;text-align:center;margin-top:6px;font-size:.48rem;color:var(--text-gray)}

.guest-box p{margin:0 0 4px 0}
.guest-name{font-size:1.2rem;font-weight:700;color:var(--text-white);margin:2px 0 4px}
.guest-address{margin:2px 0 0 0}

.guest-address {
    font-size: 0.95rem;
    color: var(--text-gray);
}

.name-note {
    font-size: 0.4rem;
    color: var(--text-gray);
    opacity: 0.9;
}

/* Music Control */
.music-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.8);
    border: 2px solid var(--text-gold);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.music-btn.spinning i {
    animation: spin 3s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* Quote Section */
#quote {
    background-image: url('assets/vintage-pattern.webp');
}

.quote-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
}

.quote-source{
    font-size: .8rem;
    color: var(--text-gray);
    opacity: .85;
    margin-top: 6px;
    font-style: italic;
}

.greeting-opening{
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-white);
    margin-top: 8px;
    letter-spacing: .2px;
}

/* Couple Section */
.couple-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.couple-card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.couple-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--text-gold), transparent);
}

.photo-frame {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 3px solid var(--text-gold);
    overflow: hidden;
    position: relative;
}

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

.photo-frame.elegant-frame{
    width: 150px;
    height: 190px;
    border-radius: 14px;
    border: 2px solid transparent;
    background:
      linear-gradient(180deg, rgba(16,16,16,.85), rgba(16,16,16,.6)) padding-box,
      linear-gradient(140deg, rgba(255,255,255,.55), rgba(212,175,55,0.95) 35%, rgba(110,80,0,.85) 60%, rgba(30,22,0,.9)) border-box;
    box-shadow:
      inset 0 2px 6px rgba(255,255,255,.18),
      inset 0 -8px 14px rgba(0,0,0,.45),
      0 6px 18px rgba(212,175,55,.22);
    overflow: hidden;
}
.photo-frame.elegant-frame img{border-radius:12px}
.photo-frame.elegant-frame::before,
.photo-frame.elegant-frame::after{
    content:"";position:absolute;inset:6px;border-radius:10px;
    border:1px solid rgba(212,175,55,.55);pointer-events:none;
}
.photo-frame.elegant-frame::after{
    inset:auto 22px 8px 22px;height:2px;border:none;background:linear-gradient(90deg,transparent,rgba(212,175,55,.8),transparent);
}

.quote-frame{width:120px;height:150px;margin:8px auto 14px}

.couple-card h3 { font-size: 2rem; margin-bottom: 5px; }
.couple-card .fullname { font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.couple-card .parents { font-size: 0.5rem; color: var(--text-gray); margin-bottom: 15px; }

.divider {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--text-gold);
}

/* Event Section */
.event-bg {
    background-image: url('assets/gunung-wayang.webp');
}

.couple-section{
    background-image: url('assets/vintage-pattern.webp');
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    background-position: center;
}

.event-card {
    background: rgba(26, 26, 26, 0.9);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid var(--text-gold);
    margin-bottom: 20px;
}

.invite-list{margin:0 auto;max-width:720px;text-align:left;padding-left:0;list-style:none}
.invite-list li{margin:6px 0;padding-left:14px;position:relative}
.invite-list li::before{content:"—";position:absolute;left:0;color:var(--text-gold)}

.event-header h3 { font-size: 1.5rem; margin-bottom: 10px; }
.event-body p { margin: 8px 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.event-body i { color: var(--text-gold); width: 20px; }

/* RSVP Section */
.rsvp-form-container {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    width: 100%;
    max-width: 500px;
    margin: 0 auto 16px;
}

.form-group { margin-bottom: 15px; }

input, select, textarea {
    width: 100%;
    padding: 12px;
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 8px;
    color: var(--text-white);
    font-family: var(--font-body);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--text-gold);
}

/* Gallery thumbnails */
.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px;margin:0 auto}
.thumb-grid a{display:block;background:#1a1a1a;border:1px solid rgba(212,175,55,.25);border-radius:10px;overflow:hidden}
.thumb-grid img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .25s ease}
.thumb-grid a:hover img{transform:scale(1.05)}

/* Live wishes list */
.wishes-live{margin-top:16px}
.wishes-live h3{text-align:left}
.wishes-list{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:0 auto}
.wish-item{background:rgba(26,26,26,.9);border:1px solid rgba(212,175,55,.25);border-radius:10px;padding:12px}
.wish-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.wish-name{color:var(--text-gold);font-weight:600}
.wish-meta{font-size:.75rem;color:var(--text-gray)}
.wish-message{color:#ddd;white-space:pre-wrap;line-height:1.5}
.wish-status{display:flex;align-items:center;gap:6px}
.status-hadir i{color:#2ecc71}
.status-tidak i{color:#e74c3c}
.status-ragu i{color:#f1c40f}
.wish-item{position:relative;padding-bottom:28px}
.wish-date{position:absolute;left:12px;bottom:8px;font-size:.72rem;color:var(--text-gray);opacity:.9}

/* Closing Section */
.closing-bg {
    background-image: url('assets/vintage-pattern.webp');
}

.closing-bg, #gift {
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
    background-position: top center;
}

.names-small { font-size: 2.5rem; margin-top: 20px; }

/* Replace H1 with logo image */
.logo-title, .logo-penganten {
    margin: 0 0 8px 0;
}
.logo-title img, .logo-penganten img {
    display: block;
    width: min(300px, 70vw);
    height: auto;
    margin: 0 auto;
}
/* Photo stage to anchor logo at the image bottom */
.photo-stage{position:relative;display:inline-block}
/* Place penganten logo exactly at the bottom edge of the photo */
.logo-penganten{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;pointer-events:none}
.logo-penganten img{width:min(200px,54vw)}

/* Modal (Popup) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;display:flex;align-items:center;justify-content:center}
.modal-backdrop.hidden{display:none}
.modal-card{background:#111;border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:18px 16px;width:90%;max-width:360px;text-align:center}
.modal-title-img{display:block;width:min(180px,60vw);height:auto;margin:0 auto 8px}
.modal-text{color:#e0e0e0;margin:6px 0 12px}
.modal-actions{display:flex;gap:10px;justify-content:center}
.btn-outline{background:transparent;color:#e0e0e0;border:1px solid #666;padding:10px 14px;border-radius:8px}

/* Bottom palette logo in closing section */
.bottom-group{position:absolute;left:0;right:0;bottom:0;z-index:3;height:70px;pointer-events:none}
.bottom-palette{display:none}

.customer-logo{position:fixed;bottom:12vh;left:50%;transform:translateX(-50%);z-index:9997;width:min(150px,28vw);height:auto;opacity:.95;pointer-events:none;margin-top:20px;padding-top:30px}
.customer-logo img{width:100%;height:auto;display:block}

.floating-header,.floating-footer{position:fixed;left:50%;transform:translateX(-50%);z-index:9998;pointer-events:none;width:var(--frame-width)}
.floating-header{top:0;height:80px}
.floating-footer{bottom:0;height:14vh;display:flex;align-items:center;justify-content:center}
.header-line,.footer-line{width:100%;height:auto;display:block;opacity:.95}
.floating-footer .footer-line{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);z-index:1}
.footer-palette{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);width:20%;height:auto;opacity:.95;z-index:2;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}

/* App-like Footer Navigation */
.app-footer-nav{
    position:fixed;left:50%;bottom:2px;transform:translateX(-50%);
    width:min(94vw, var(--frame-width));display:flex;justify-content:center;
    z-index:9999;pointer-events:auto;gap:0;
}
body.no-scroll .app-footer-nav{display:none}
.nav-btn{
    display:flex;align-items:center;justify-content:center;
    width:clamp(36px, 9vw, 42px);height:clamp(36px, 9vw, 42px);border-radius:12px;background:rgba(0,0,0,.55);
    border:1px solid rgba(212,175,55,.35);color:#f5f5f5;text-decoration:none;
    backdrop-filter:saturate(120%) blur(2px);
}
.app-footer-nav .nav-btn + .nav-btn{margin-left:5px}
.nav-btn i{font-size:clamp(16px, 4.2vw, 18px);color:#F4C430}
.nav-btn-center{
    width:clamp(46px, 12vw, 54px);height:clamp(46px, 12vw, 54px);border-radius:50%;
    background:rgba(0,0,0,.75);border:1px solid rgba(212,175,55,.5);
    transform:translateY(-6px);
}

/* Bottom blur mask (hide background bleed-through) */
.screen-bottom-blur{
    position:fixed;left:50%;bottom:0;transform:translateX(-50%);
    width:min(100vw, var(--frame-width));height:10vh;
    background:linear-gradient(to top, rgba(15,15,15,.7), rgba(15,15,15,.3));
    backdrop-filter:blur(10px) saturate(110%);-webkit-backdrop-filter:blur(10px) saturate(110%);
    pointer-events:none;z-index:9995;
}

.closing-bg .container{padding-bottom:14vh}
.closing-bg .customer-logo{position:relative;bottom:auto;left:auto;transform:none;margin:12px auto 0;z-index:9997}

.map-container{position:relative;border-radius:12px;overflow:hidden}
.map-container::before{content:"";position:absolute;inset:0;padding:2px;border-radius:12px;background:linear-gradient(135deg,rgba(212,175,55,.5),rgba(212,175,55,.15));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.map-container::after{content:"";position:absolute;inset:0;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(212,175,55,.18);background:linear-gradient( to bottom, rgba(212,175,55,.06), transparent 45%);pointer-events:none}
.map-container iframe{display:block;width:100%;height:250px;border:0;filter:invert(90%) hue-rotate(180deg) brightness(.8) contrast(1.05) saturate(.85) grayscale(.1)}
.map-container:hover iframe{filter:invert(90%) hue-rotate(180deg) brightness(.88) contrast(1.08) saturate(.9) grayscale(.05)}

.gift-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 20px 0; /* tambah padding atas-bawah antar card */
}

.gift-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;    
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, .5), rgba(212, 175, 55, .15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.gift-card .bank-logo {
    display: inline-block;
    padding: 10px 14px;
    border: none;
    background: none;
    box-shadow: none;
}

.gift-card .bank-logo img {
    height: 28px;
    width: auto;
    display: block;
}

.gift-card .account-no {
    font-size: 1.25rem;
}

.gift-container{
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:center;
}

/* Mobile Optimizations */
@media (min-width: 768px) {
    .couple-wrapper {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .divider { margin: 0 30px; }
    
    #opening-cover h1.names { font-size: 5rem; }
}

.couple-pair{display:flex;flex-direction:column;align-items:center;gap:8px}
.couple-pair .person{width:100%;max-width:360px}
.pair-divider{color:var(--text-gold);font-family:var(--font-heading);font-size:1.4rem;letter-spacing:.5px;margin:6px 0}
.couple-pair .person .parents{font-size:0.9rem;color:var(--text-gray);margin-bottom:8px}
.couple-pair .person .social-link{font-size:0.8rem;color:var(--text-gray)}

/* Keyframe Animations (Custom) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: fadeInUp 1s ease forwards; }
.delay-200 { animation-delay: 0.2s; }