/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ivory:#FBF7EF;
  --card:#F4EEDF;
  --deep:#2B3F2C;
  --deep-ink:#1B2A1C;
  --sage:#7E9271;
  --sage-soft:#C9D3BC;
  --gold:#B08A50;
  --gold-light:#E3C79A;
  --line:rgba(43,63,44,0.18);

  --display:'Cormorant Garamond', serif;
  --label:'Marcellus', serif;
  --body:'Jost', sans-serif;

  --maxw:720px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;
overflow-x: hidden;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--deep-ink);
  font-family:var(--body);
  font-weight:300;
position: relative; /* Penting untuk mengikat .vine-spine */
width: 100%;
  
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}


/* Atau spesifik untuk section tertentu */
#beranda {
  padding-bottom: 180px;
}

#mempelai {
  padding-top: 120px;
}

/* =========================================================
   SIGNATURE ELEMENT — the growing vine spine
   ========================================================= */
.vine-spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  max-width: 100%; /* Tambahkan ini */
  height: 3000px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  overflow: hidden; /* Tambahkan ini */
} 

.vine-spine path{
  fill:none;
  stroke:var(--sage);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:3200;
  stroke-dashoffset:3200;
  transition:stroke-dashoffset 2.4s ease-out;
}
.vine-spine.grow path{ stroke-dashoffset:0; }

/* =========================================================
   COVER OVERLAY
   ========================================================= */

.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* Lebih aman daripada inset: 0 */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #34492F 0%, var(--deep) 55%, var(--deep-ink) 100%);
  transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .9s ease;
  overflow: hidden; /* Tambahkan ini */
}

.cover.opened{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
.cover-frame{
  position:relative;
  width:min(90vw,420px);
  padding:56px 28px 44px;
  text-align:center;
  color:var(--ivory);
  border:1px solid rgba(227,199,154,0.45);
  border-radius:2px;
}
.cover-frame::before{
  content:"";
  position:absolute; inset:10px;
  border:1px solid rgba(227,199,154,0.25);
  pointer-events:none;
}
.corner{ position:absolute; width:64px; height:64px; opacity:.85; }
.corner-tl{ top:-14px; left:-14px; }
.corner-br{ bottom:-14px; right:-14px; transform:rotate(180deg); }
.corner path{ fill:none; stroke:var(--gold-light); stroke-width:1.4; }
.corner path.sprig-vein{ stroke-width:1; opacity:.7; }
.closing .corner path{ stroke:var(--gold); }

.eyebrow{
  font-family:var(--label);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--gold-light);
  margin:0 0 18px;
}
.eyebrow.center{ text-align:center; }
.eyebrow.light{ color:var(--gold-light); }
.section .eyebrow:not(.light){ color:var(--gold); }

.monogram{ width:150px; height:90px; margin:0 auto 6px; display:block; }
.monogram-text{
  font-family:var(--display);
  font-style:italic;
  font-size:44px;
  fill:var(--ivory);
}
.monogram-flourish{ fill:none; stroke:var(--gold-light); stroke-width:1.2; }

.cover-names{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.6rem,9vw,3.4rem);
  margin:6px 0 4px;
  line-height:1.05;
}
.cover-names span{ color:var(--gold-light); font-style:italic; font-size:.7em; padding:0 .15em; }

.cover-guest{ margin-bottom:34px; font-size:.85rem; color:var(--sage-soft); }
.guest-name{
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  color:var(--ivory);
  margin-top:6px;
}

.btn-open{
  font-family:var(--label);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  background:transparent;
  color:var(--ivory);
  border:1px solid var(--gold-light);
  padding:14px 34px;
  border-radius:999px;
  cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.btn-open:hover{ background:var(--gold-light); color:var(--deep-ink); }
.btn-open:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* =========================================================
   LAYOUT / SECTIONS
   ========================================================= */
.content{ position:relative; z-index:1; }
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px 28px;
  position:relative;
}
.section-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.6rem,4.4vw,2.15rem);
  line-height:1.35;
  margin:0 0 8px;
  color:var(--deep-ink);
}
.section-title.light{ color:var(--ivory); }
.center{ text-align:center; }

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---- hero ---- */
.hero{ text-align:center; padding-top:120px; }
.quote-arabic{ font-family:var(--display); font-size:2.6rem; color:var(--gold); margin:0 0 22px; }
.lead-text{ font-size:1rem; line-height:1.9; color:var(--deep-ink); max-width:520px; margin:0 auto; }
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:44px; }
.divider span{ height:1px; width:64px; background:var(--line); }
.divider-icon{ width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.4; }

/* ---- couple ---- */
.couple-grid{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; margin-top:48px;
}
.couple-card{
  flex:1 1 220px; max-width:260px;
  background:var(--card);
  padding:38px 22px 30px;
  text-align:center;
  border-radius:4px;
  border:1px solid var(--line);
}
.couple-initial{
  font-family:var(--display); font-style:italic;
  font-size:2.6rem; color:var(--gold);
  margin-bottom:6px;
}
.couple-card h3{
  font-family:var(--display); font-weight:500; font-size:1.5rem; margin:6px 0 10px;
}
.couple-role{ font-size:.8rem; letter-spacing:.05em; color:var(--sage); margin:0; }
.couple-parents{ font-size:.92rem; line-height:1.6; margin:4px 0 16px; }
.ig-link{
  font-family:var(--label); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--deep); text-decoration:none;
  border-bottom:1px solid var(--gold);
}
.couple-and{
  font-family:var(--display); font-style:italic; font-size:2rem; color:var(--gold);
}

/* ---- countdown ---- */
.countdown-section{
  background:var(--deep); color:var(--ivory);
  max-width:none; padding:96px 28px;
  text-align:center;
}
.countdown{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.cd-box{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(227,199,154,.3);
  border-radius:6px;
  padding:18px 14px;
  min-width:76px;
}
.cd-box span{ display:block; font-family:var(--display); font-size:2.1rem; color:var(--gold-light); }
.cd-box small{ font-family:var(--label); letter-spacing:.12em; font-size:.65rem; text-transform:uppercase; color:var(--sage-soft); }

/* ---- events ---- */
.events-grid{
  display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:48px;
}
.event-card{
  flex:1 1 260px; max-width:300px;
  background:var(--card);
  padding:34px 26px; text-align:center;
  border-radius:4px; border:1px solid var(--line);
}
.event-label{
  font-family:var(--label); letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold); margin:0 0 18px;
}
.event-date{ display:flex; flex-direction:column; align-items:center; margin-bottom:14px; }
.event-day{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.event-num{ font-family:var(--display); font-size:3rem; line-height:1; color:var(--deep-ink); }
.event-month{ font-size:.85rem; letter-spacing:.06em; color:var(--deep-ink); }
.event-time{ font-weight:500; margin:8px 0; }
.event-place{ font-size:.9rem; line-height:1.6; color:#4a4a3f; margin-bottom:18px; }
.event-map{
  display:inline-block; font-family:var(--label); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--deep); border:1px solid var(--gold);
  padding:9px 20px; border-radius:999px; text-decoration:none;
  transition:background .3s, color .3s;
}
.event-map:hover{ background:var(--gold); color:#fff; }

/* ---- story ---- */
.story{ background:var(--deep); color:var(--ivory); max-width:none; }
.story-timeline{ max-width:560px; margin:52px auto 0; }
.story-item{ display:flex; gap:20px; margin-bottom:40px; position:relative; }
.story-item:last-child{ margin-bottom:0; }
.story-dot{
  flex:0 0 auto; width:12px; height:12px; border-radius:50%;
  background:var(--gold-light); margin-top:8px;
  box-shadow:0 0 0 4px rgba(227,199,154,0.18);
}
.story-item:not(:last-child) .story-dot::after{
  content:""; position:absolute; left:5px; top:24px; bottom:-40px;
  width:1px; background:rgba(227,199,154,0.3);
}
.story-tag{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--gold-light); margin:0 0 6px; }
.story-body p:last-child{ font-size:.92rem; line-height:1.8; color:var(--sage-soft); margin:0; }

/* ---- rsvp ---- */
.rsvp-form{ max-width:460px; margin:44px auto 0; display:flex; flex-direction:column; gap:14px; }
.rsvp-form input[type=text], .rsvp-form textarea{
  font-family:var(--body); font-size:.95rem;
  padding:13px 16px; border:1px solid var(--line); border-radius:4px;
  background:var(--card); color:var(--deep-ink); resize:vertical;
}
.rsvp-form textarea{ min-height:90px; }
.rsvp-attend{ display:flex; gap:24px; font-size:.9rem; justify-content:center; }
.rsvp-attend label{ display:flex; align-items:center; gap:6px; }
.btn-outline{
  font-family:var(--label); letter-spacing:.12em; text-transform:uppercase; font-size:.78rem;
  background:var(--deep); color:var(--ivory); border:none; border-radius:999px;
  padding:13px 0; cursor:pointer; transition:background .3s;
}
.btn-outline:hover{ background:var(--gold); }
.rsvp-summary{
  display:flex; gap:34px; justify-content:center; margin:34px 0 8px;
  font-family:var(--label); letter-spacing:.08em; font-size:.85rem; color:var(--deep);
}
.rsvp-summary strong{ font-family:var(--display); font-size:1.3rem; color:var(--gold); margin-right:4px; }
.rsvp-list{ max-width:460px; margin:24px auto 0; display:flex; flex-direction:column; gap:14px; }
.rsvp-empty{ text-align:center; font-size:.88rem; color:#8a8a7c; }
.rsvp-card{
  background:var(--card); border-radius:4px; padding:16px 18px; border:1px solid var(--line);
}
.rsvp-card .rn{ font-weight:500; font-size:.92rem; }
.rsvp-card .rn small{ font-weight:300; color:var(--sage); margin-left:6px; }
.rsvp-card p{ margin:6px 0 0; font-size:.88rem; line-height:1.6; color:#454538; }

/* ---- gift ---- */
.gift{ background:var(--deep); color:var(--ivory); max-width:none; text-align:center; }
.gift-note{ max-width:440px; margin:0 auto; font-size:.92rem; line-height:1.8; color:var(--sage-soft); }
.gift-grid{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.gift-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(227,199,154,.28);
  border-radius: 6px;
  padding: 30px 26px;
  min-width: 230px;
  max-width: 100%; /* Tambahkan ini */
  text-decoration: none;
  color: rgb(251, 247, 247);
}


.bank-name{ font-family:var(--label); letter-spacing:.1em; font-size:.85rem; color:var(--gold-light); margin:0 0 10px; }
.bank-number{ font-family:var(--display); font-size:1.6rem; letter-spacing:.03em; margin:0; 
text-decoration: none;
color: rgb(251, 247, 247);}
.bank-holder{ font-size:.85rem; color:var(--sage-soft); margin:4px 0 18px; }
.btn-copy{
  font-family:var(--label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; border:1px solid var(--gold-light); color:var(--ivory);
  padding:9px 18px; border-radius:999px; cursor:pointer; transition:background .3s, color .3s;
}
.btn-copy:hover{ background:var(--gold-light); color:var(--deep-ink); }

/* ---- closing ---- */
.closing{
  text-align:center; position:relative;
  padding-top:100px; padding-bottom:60px;
}
.closing-quote{
  font-family:var(--display); font-style:italic; font-size:1.15rem; line-height:1.9;
  max-width:520px; margin:12px auto 0; color:var(--deep-ink);
}
.closing-quote cite{
  display:block; margin-top:14px; font-style:normal; font-family:var(--label);
  letter-spacing:.12em; font-size:.72rem; text-transform:uppercase; color:var(--gold);
}
.closing-names{ font-family:var(--display); font-size:2.4rem; margin:38px 0 10px; }
.closing-sub{ max-width:420px; margin:0 auto; font-size:.9rem; color:#565648; line-height:1.7; }
.made-with{ margin-top:48px; font-size:.72rem; letter-spacing:.08em; color:#9a9a8a; }

/* Social Icons Styling */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 2px solid #aaa;
    border-radius: 50%;
    color: #888;
    font-size: 1.3rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    border-color: #6b8e6b;
    color: #6b8e6b;
    transform: translateY(-3px);
}

.social-link i {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MUSIC TOGGLE
   ========================================================= */
.music-btn{
  position:fixed;
  bottom:22px; right:22px;
  z-index:40;
  width:50px; height:50px;
  border-radius:50%;
  border:none;
  background:var(--gold);
  color:var(--green-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.music-btn svg{width:22px; height:22px;}

.music-icon{ width:20px; height:20px; fill:none; stroke:var(--ivory); stroke-width:1.6; }
.music-btn.playing .music-icon{ animation:spin 3.5s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:560px){
  .section{ padding:72px 20px; }
  .couple-and{ display:none; }
  .vine-spine{ opacity:.35; }
}


/* ========== PENGAMAN ANTI OVERFLOW ========== */
#mainContent {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.section {
  overflow-x: hidden; /* Tambahkan ini */
  max-width: 100%; /* Tambahkan ini */
}

/* Pastikan semua elemen tidak overflow */
* {
  max-width: 100%;
  box-sizing: border-box;
}

img, svg {
  max-width: 100%;
  height: auto;
}