:root{
    --maroon:#5c0f1a;
    --maroon-dark:#3d0a12;
    --gold:#c9a24b;
    --gold-light:#e8d3a0;
    --cream:#faf6ee;
    --ink:#2b2b2b;
    --font-serif:'Cormorant Garamond', serif;
    --font-sans:'Poppins', sans-serif;
}

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

html,body{
    max-width:480px;
    margin:0 auto;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-sans);
    overflow-x:hidden;
}

/* ===== Motif Batak Toba (watermark rumah adat, satu gambar besar & samar) ===== */

/* Watermark siluet rumah adat Batak Toba - satu gambar besar & samar,
   dipakai sebagai aksen di section tertentu, bukan pola berulang */
.watermark-house{
    position:absolute;
    top:50%; left:50%;
    width:62%;
    max-width:300px;
    aspect-ratio:776 / 1024;
    transform:translate(-50%,-50%);
    -webkit-mask-image:url('../img/rumah-bolon-motif.png');
    mask-image:url('../img/rumah-bolon-motif.png');
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
    background-color:var(--gold);
    opacity:.12;
    z-index:0;
    pointer-events:none;
}
/* varian warna: pakai di atas latar terang (cream/putih) */
.watermark-house.tint-maroon{background-color:var(--maroon); opacity:.07;}
/* varian ukuran lebih kecil untuk section yang lebih pendek */
.watermark-house.small{width:42%; max-width:190px; opacity:.16;}
/* varian paling kecil - untuk section pendek seperti footer, agar tidak terpotong */
.watermark-house.tiny{width:30%; max-width:130px; opacity:.14;}

.screen{
    position:relative;
    padding:64px 28px;
    text-align:center;
    overflow:hidden;
}
.screen > *:not(.watermark-house){position:relative; z-index:1;}
.screen{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.screen.in-view{opacity:1; transform:translateY(0);}
.screen.cover{opacity:1; transform:none;} /* cover selalu tampil langsung */

.eyebrow{
    font-family:var(--font-sans);
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:12px;
    color:var(--gold);
    margin-bottom:10px;
}

.section-title{
    font-family:var(--font-serif);
    font-size:28px;
    color:var(--maroon);
    margin-bottom:28px;
    position:relative;
}
.section-title.light{color:var(--gold-light);}
.section-title::after{
    content:"";
    display:block;
    width:50px; height:2px;
    background:var(--gold);
    margin:10px auto 0;
}

/* ===== COVER ===== */
.cover{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(circle at 50% 30%, rgba(201,162,75,.14), transparent 55%),
        linear-gradient(180deg, var(--maroon-dark), var(--maroon));
    color:var(--cream);
}
.cover-inner{position:relative; z-index:1;}
.cover-names{
    font-family:var(--font-serif);
    font-size:48px;
    letter-spacing:1px;
    color:var(--gold-light);
    margin:14px 0;
}
.cover-date{letter-spacing:4px; font-size:14px; color:var(--gold); margin-bottom:34px;}
.guest-box{
    border:1px solid rgba(201,162,75,.5);
    padding:14px 20px;
    margin-bottom:36px;
    font-size:13px;
}
.guest-name{font-family:var(--font-serif); font-size:20px; color:var(--gold-light); margin-top:6px;}
.btn-open{
    background:var(--gold);
    color:var(--maroon-dark);
    border:none;
    padding:14px 34px;
    font-family:var(--font-sans);
    font-weight:600;
    letter-spacing:1px;
    border-radius:30px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* ===== MAIN CONTENT ===== */
.main-content{display:none;}
.main-content.show{display:block;}

.hero{background:var(--cream); color:var(--maroon);}
.hero-names{font-family:var(--font-serif); font-size:26px; line-height:1.4; margin:16px 0;}
.hero-names .amp{color:var(--gold); font-size:20px;}
.hero-sub{font-size:13px; color:#6b6b6b; max-width:320px; margin:0 auto;}

.verse-section{background:var(--maroon-dark); color:var(--gold-light); padding:56px 30px;}
.verse-ornament{color:var(--gold); margin-bottom:14px; display:flex; justify-content:center;}
.verse-text{font-family:var(--font-serif); font-style:italic; font-size:19px; line-height:1.6;}
.verse-ref{margin-top:14px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold);}

.couple{background:linear-gradient(180deg,#fff,var(--cream));}
.couple-card{
    background:#fff;
    border-radius:14px;
    padding:22px 18px;
    box-shadow:0 10px 26px rgba(92,15,26,.08);
    border:1px solid rgba(201,162,75,.25);
}
.couple-card h4{font-family:var(--font-serif); font-size:24px; color:var(--maroon); margin-bottom:6px;}
.couple-role{font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:2px;}
.couple-parents{font-size:13px; color:#555; margin-top:6px; line-height:1.6;}
.divider-ulos{
    display:flex; align-items:center; gap:10px;
    width:70%; margin:26px auto;
}
.divider-ulos::before, .divider-ulos::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold));
}
.divider-ulos::after{background:linear-gradient(90deg, var(--gold), transparent);}
.divider-ulos::before{transform:none;}
.divider-icon{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold);
}

.countdown-section{background:var(--maroon);}
.countdown{display:flex; justify-content:center; gap:10px; position:relative; z-index:1;}
.cd-box{
    background:rgba(255,255,255,.08);
    border:1px solid var(--gold);
    border-radius:8px;
    padding:12px 10px;
    min-width:62px;
}
.cd-box span{display:block; font-family:var(--font-serif); font-size:26px; color:var(--gold-light);}
.cd-box small{font-size:10px; letter-spacing:1px; color:var(--cream); opacity:.8;}

.events{background:var(--cream);}
.event-card{
    margin-bottom:6px;
    background:#fff;
    border-radius:14px;
    padding:22px 18px;
    box-shadow:0 10px 26px rgba(92,15,26,.08);
    border:1px solid rgba(201,162,75,.25);
}
.event-label{font-family:var(--font-serif); font-size:20px; color:var(--maroon);}
.event-day, .event-time{font-size:13px; margin-top:4px;}
.event-place{font-weight:600; margin-top:8px;}
.event-address{font-size:12px; color:#666; margin-top:2px;}
.map-wrap{margin-top:26px; text-align:left;}
.map-caption{font-size:12px; color:var(--maroon); margin-bottom:6px; font-weight:600;}
.map-wrap iframe{width:100%; height:220px; border:0; border-radius:10px;}
.map-legend{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.map-legend p{font-size:12px; color:#555; display:flex; align-items:center; gap:8px;}
.map-legend .dot{
    width:16px; height:16px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-size:0; flex-shrink:0;
}
.map-legend .dot-a{background:var(--maroon);}
.map-legend .dot-b{background:var(--gold);}

.gallery{background:#fff;}
.gallery-hint{font-size:11px; color:#999; margin-bottom:14px;}
.gallery-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.gallery-item{
    border:none; padding:0; cursor:pointer;
    display:block; width:100%;
    aspect-ratio:1 / 1;
    border-radius:8px;
    overflow:hidden;
    background:#f4ece0;               /* latar lembut pengisi ruang kosong di sekitar foto */
    border:1px solid rgba(201,162,75,.35);
}
.gallery-item img{
    width:100%; height:100%;
    object-fit:contain;   /* foto ditampilkan utuh, tidak dipotong sama sekali */
    display:block;
}
.empty-note{font-size:13px; color:#888;}

/* ===== Lightbox: menampilkan foto UTUH (tidak terpotong) saat di-tap ===== */
.lightbox{
    display:none;
    position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,.92);
    align-items:center; justify-content:center;
    padding:20px;
}
.lightbox.show{display:flex;}
.lightbox img{
    max-width:100%;
    max-height:90vh;
    object-fit:contain;  /* seluruh foto terlihat, tanpa terpotong */
    border-radius:6px;
}
.lightbox-close{
    position:absolute; top:16px; right:20px;
    background:none; border:none; color:#fff;
    font-size:32px; line-height:1; cursor:pointer;
}

.gift{background:var(--maroon-dark); color:var(--cream);}
.gift-note{font-size:13px; max-width:320px; margin:0 auto 24px; opacity:.9;}
.gift-cards{display:flex; flex-direction:column; gap:14px;}
.gift-card{
    background:rgba(255,255,255,.06);
    border:1px solid var(--gold);
    border-radius:10px;
    padding:16px;
}
.gift-bank{color:var(--gold); font-weight:600; letter-spacing:1px;}
.gift-number{font-family:var(--font-serif); font-size:22px; margin:6px 0;}
.gift-holder{font-size:12px; opacity:.85; margin-bottom:10px;}
.btn-copy{
    background:var(--gold); color:var(--maroon-dark); border:none;
    padding:8px 18px; border-radius:20px; font-size:12px; cursor:pointer; font-weight:600;
}

.comments{background:var(--cream);}
.comment-form{display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
.comment-form input, .comment-form textarea{
    border:1px solid #d9cba8; border-radius:8px; padding:10px 12px;
    font-family:var(--font-sans); font-size:13px; background:#fff;
}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0;}
.btn-send{
    background:var(--maroon); color:#fff; border:none; padding:12px; border-radius:8px;
    font-weight:600; cursor:pointer;
}
.form-msg{font-size:12px; min-height:16px;}
.form-msg.ok{color:#2e7d32;}
.form-msg.err{color:#c62828;}
.comment-list{display:flex; flex-direction:column; gap:12px; text-align:left; max-height:360px; overflow-y:auto;}
.comment-item{border-bottom:1px solid #eadfc4; padding-bottom:10px;}
.comment-name{font-weight:600; color:var(--maroon); font-size:13px;}
.comment-message{font-size:13px; margin-top:2px;}
.comment-date{font-size:10px; color:#999; margin-top:4px;}

.footer{
    position:relative;
    overflow:hidden;
    background:var(--maroon-dark);
    color:var(--gold-light);
    padding:56px 30px;
    text-align:center;
    min-height:340px;      /* pastikan cukup tinggi agar watermark tidak terpotong */
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.footer > *{position:relative; z-index:1;}
.footer .eyebrow{margin-bottom:16px;}
.footer-message{
    font-family:var(--font-serif);
    font-style:italic;
    font-size:15px;
    line-height:1.8;
    color:var(--cream);
    opacity:.9;
    max-width:320px;
    margin:0 auto;
}
.footer-divider{
    color:var(--gold);
    display:flex; justify-content:center;
    margin:22px auto;
}
.footer-names{
    font-family:var(--font-serif);
    font-size:26px;
    color:var(--gold-light);
    letter-spacing:1px;
}

.music-toggle{
    position:fixed; bottom:18px; right:18px; z-index:50;
    width:46px; height:46px; border-radius:50%;
    background:var(--maroon); color:var(--gold-light); border:1px solid var(--gold);
    font-size:20px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.music-toggle.spin{animation:spin 4s linear infinite;}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}