/* ══════════════════════════════════════════
   WEDDING INVITATION — style.css
   Ganti nilai variabel di :root untuk
   mengubah warna tema secara global.
══════════════════════════════════════════ */

:root {
  --cream:      #faf7f2;
  --blush:      #e8c9bc;
  --dusty-rose: #c9967f;
  --sage:       #9aab97;
  --charcoal:   #2c2c2c;
  --muted:      #8a8278;
  --white:      #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ══ SPLASH ══ */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(232,201,188,.4) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 75%, rgba(154,171,151,.3) 0%, transparent 55%),
    var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px;
  transition: opacity .8s ease, transform .8s ease;
}
#splash::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(201,150,127,.07) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
#splash.hide { opacity: 0; transform: scale(1.04); pointer-events: none; }

.sp-bismillah { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--muted); letter-spacing:.1em; margin-bottom:28px; animation:fadeUp .8s ease .2s both; }
.sp-kepada    { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; animation:fadeUp .8s ease .4s both; }
.sp-guest     { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,8vw,52px); font-weight:300; color:var(--charcoal); margin-bottom:6px; animation:fadeUp 1s ease .5s both; }
.sp-sub       { font-size:12px; color:var(--muted); margin-bottom:36px; animation:fadeUp .8s ease .65s both; }
.sp-divider   { display:flex; align-items:center; gap:12px; margin-bottom:24px; animation:fadeUp .8s ease .7s both; }
.sp-dline     { width:48px; height:1px; background:var(--blush); }
.sp-ddot      { width:5px; height:5px; border-radius:50%; background:var(--blush); }
.sp-from      { font-size:12px; color:var(--muted); margin-bottom:4px; animation:fadeUp .8s ease .8s both; }
.sp-couple    { font-family:'Cormorant Garamond',serif; font-size:clamp(20px,5vw,30px); font-weight:300; color:var(--charcoal); margin-bottom:44px; animation:fadeUp .8s ease .9s both; }
.sp-couple em { color:var(--dusty-rose); font-style:italic; }
.sp-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 38px; background:var(--charcoal); color:white;
  border:none; border-radius:100px; font-family:'DM Sans',sans-serif;
  font-size:13px; letter-spacing:.15em; text-transform:uppercase;
  cursor:pointer; transition:background .3s, transform .2s;
  animation:fadeUp .8s ease 1.1s both;
}
.sp-btn:hover { background:var(--dusty-rose); transform:translateY(-2px); }

/* ── AUDIO PLAYER (floating) ── */
#audio-player {
  position: fixed; bottom: 24px; right: 24px; z-index: 8000;
  display: none; align-items: center; gap: 10px;
  background: var(--charcoal); color: white;
  padding: 10px 16px 10px 12px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(44,44,44,.25);
  animation: fadeUp .5s ease both;
}
#audio-player.show { display: flex; }
#audio-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dusty-rose); border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .2s;
}
#audio-toggle:hover { background: var(--blush); }
#audio-toggle svg   { width:14px; height:14px; }
#audio-title { font-size:11px; letter-spacing:.08em; opacity:.75; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }

/* ══ MAIN ══ */
#main { opacity: 0; transition: opacity .8s ease .2s; }
#main.visible { opacity: 1; }

/* ── COVER ── */
.cover {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; position: relative;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(232,201,188,.35) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(154,171,151,.25) 0%, transparent 55%),
    var(--cream);
}
.cover::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(201,150,127,.08) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.cv-tag   { font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--dusty-rose); margin-bottom:6px; opacity:0; animation:fadeUp .8s ease .2s forwards; }
.cv-gname { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,3.5vw,24px); color:var(--muted); margin-bottom:28px; opacity:0; animation:fadeUp .8s ease .35s forwards; }
.bismillah { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--muted); letter-spacing:.08em; margin-bottom:22px; opacity:0; animation:fadeUp 1s ease .5s forwards; }
.ornament  { display:flex; align-items:center; gap:12px; margin-bottom:18px; opacity:0; animation:fadeUp 1s ease .6s forwards; }
.orn-line  { width:60px; height:1px; background:linear-gradient(to right, transparent, var(--dusty-rose)); }
.orn-line.r { background:linear-gradient(to left, transparent, var(--dusty-rose)); }
.orn-dia   { width:6px; height:6px; background:var(--dusty-rose); transform:rotate(45deg); }
.we-invite { font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; opacity:0; animation:fadeUp 1s ease .7s forwards; }
.names     { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(48px,12vw,90px); line-height:.95; color:var(--charcoal); opacity:0; animation:fadeUp 1.2s ease .8s forwards; }
.names .and { font-style:italic; font-size:.5em; color:var(--dusty-rose); display:block; line-height:1.6; }
.date-block { margin-top:36px; opacity:0; animation:fadeUp 1s ease 1.1s forwards; }
.date-text  { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.date-main  { font-family:'Cormorant Garamond',serif; font-size:clamp(20px,4vw,30px); font-weight:300; margin-top:6px; }
.scroll-hint { position:absolute; bottom:28px; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fadeUp 1s ease 1.5s forwards; }
.scroll-hint span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.scroll-line { width:1px; height:36px; background:linear-gradient(to bottom, var(--dusty-rose), transparent); animation:scrollPulse 2s ease-in-out infinite; }

/* ── SHARED SECTION STYLES ── */
section { padding:72px 24px; max-width:720px; margin:0 auto; text-align:center; }
.sec-label { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--dusty-rose); margin-bottom:16px; }
.sec-title { font-family:'Cormorant Garamond',serif; font-size:clamp(26px,6vw,42px); font-weight:300; line-height:1.2; margin-bottom:20px; }
.divider   { display:flex; align-items:center; justify-content:center; gap:12px; margin:28px auto; }
.dline     { width:48px; height:1px; background:var(--blush); }
.ddot      { width:5px; height:5px; border-radius:50%; background:var(--blush); }

/* ── QUOTE ── */
.quote-section { background:linear-gradient(135deg,rgba(232,201,188,.2),rgba(154,171,151,.15)); padding:72px 24px; text-align:center; }
.quote-text    { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,3.5vw,24px); font-weight:300; line-height:1.75; color:var(--charcoal); max-width:560px; margin:0 auto 14px; }
.quote-src     { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ── COUPLE ── */
.couple-grid  { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-top:36px; }
.person       { text-align:center; }
.person-avatar {
  width:90px; height:90px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg, var(--blush), var(--sage));
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:32px; font-style:italic; color:white;
  border:3px solid white; box-shadow:0 4px 20px rgba(201,150,127,.2);
}
.person-name   { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:300; }
.person-parent { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.amp-big       { font-family:'Cormorant Garamond',serif; font-size:60px; font-style:italic; color:var(--blush); line-height:1; }

/* ── EVENTS ── */
.event-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.event-card  {
  background:white; border-radius:16px; padding:28px 20px; text-align:center;
  box-shadow:0 2px 24px rgba(44,44,44,.06); border:1px solid rgba(232,201,188,.4);
  position:relative; overflow:hidden;
}
.event-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right, var(--blush), var(--dusty-rose)); }
.ev-type   { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--dusty-rose); margin-bottom:10px; }
.ev-name   { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:300; margin-bottom:14px; }
.ev-detail { font-size:13px; color:var(--muted); line-height:1.9; }
.ev-detail strong { display:block; color:var(--charcoal); font-weight:400; margin-top:2px; }

/* ── COUNTDOWN ── */
.cd-section           { background:linear-gradient(135deg, var(--charcoal) 0%, #3d3530 100%); color:white; padding:72px 24px; }
.cd-section .sec-label { color:var(--blush); }
.cd-section .sec-title { color:white; }
.cd-grid { display:flex; justify-content:center; gap:clamp(12px,4vw,36px); margin-top:36px; flex-wrap:wrap; }
.cd-item { text-align:center; min-width:64px; }
.cd-num  { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,10vw,68px); font-weight:300; line-height:1; color:var(--blush); }
.cd-lbl  { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:6px; }
.cd-sep  { font-family:'Cormorant Garamond',serif; font-size:56px; font-weight:300; color:rgba(232,201,188,.25); line-height:1; align-self:flex-start; padding-top:2px; }

/* ── GALLERY ── */
.gallery-grid       { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:32px; }
.gallery-item       { aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer; position:relative; background:linear-gradient(135deg, var(--blush), var(--sage)); }
.gallery-item:first-child { grid-column:span 2; aspect-ratio:2/1; }
.gallery-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,.8); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.gallery-placeholder svg   { width:28px; height:28px; opacity:.7; }
.gallery-item img          { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img    { transform:scale(1.05); }
.gallery-hint { font-size:12px; color:var(--muted); margin-top:12px; font-style:italic; }

/* ── LIGHTBOX ── */
#lightbox       { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:20px; }
#lightbox.open  { display:flex; }
#lightbox img   { max-width:90vw; max-height:85vh; border-radius:8px; object-fit:contain; }
#lightbox-close { position:absolute; top:20px; right:24px; background:none; border:none; color:white; font-size:32px; cursor:pointer; line-height:1; }

/* ── DIGITAL WALLET ── */
.wallet-section { padding:72px 24px; background:linear-gradient(135deg,rgba(232,201,188,.12),rgba(154,171,151,.1)); }
.wallet-inner   { max-width:560px; margin:0 auto; text-align:center; }
.wallet-note    { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:32px; }
.wallet-cards   { display:flex; flex-direction:column; gap:14px; }
.wallet-card    {
  background:white; border-radius:16px; padding:20px 24px;
  display:flex; align-items:center; gap:16px;
  box-shadow:0 2px 16px rgba(44,44,44,.07); border:1px solid rgba(232,201,188,.4);
  text-align:left; position:relative;
}
.wallet-icon         { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }
.wallet-icon.bank    { background:#eef4ff; }
.wallet-icon.dana    { background:#e8f0ff; }
.wallet-icon.gopay   { background:#e8f5e9; }
.wallet-info         { flex:1; }
.wallet-label        { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.wallet-name         { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:300; margin-bottom:2px; }
.wallet-number       { font-size:15px; color:var(--charcoal); font-weight:400; letter-spacing:.05em; }
.copy-btn            { background:none; border:1px solid var(--blush); border-radius:8px; padding:6px 12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all .2s; flex-shrink:0; }
.copy-btn:hover      { background:var(--dusty-rose); color:white; border-color:var(--dusty-rose); }
.copy-btn.copied     { background:var(--sage); color:white; border-color:var(--sage); }

/* ── MAP ── */
.map-container       { margin-top:28px; border-radius:20px; overflow:hidden; box-shadow:0 4px 32px rgba(44,44,44,.1); border:1px solid rgba(232,201,188,.3); }
.map-container iframe { width:100%; height:300px; border:none; display:block; }
.map-btn             { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:13px 30px; background:var(--dusty-rose); color:white; border-radius:100px; text-decoration:none; font-size:13px; letter-spacing:.1em; transition:background .3s, transform .2s; }
.map-btn:hover       { background:var(--charcoal); transform:translateY(-2px); }

/* ── GUESTBOOK ── */
.gb-section  { padding:72px 24px; background:var(--cream); }
.gb-inner    { max-width:600px; margin:0 auto; }
.gb-form     { background:white; border-radius:20px; padding:32px; box-shadow:0 2px 24px rgba(44,44,44,.07); border:1px solid rgba(232,201,188,.4); margin-bottom:32px; }
.gb-row      { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.gb-field    { display:flex; flex-direction:column; gap:6px; }
.gb-field label { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.gb-field input,
.gb-field textarea,
.gb-field select {
  width:100%; padding:12px 14px; border:1px solid rgba(232,201,188,.6); border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:300; color:var(--charcoal);
  background:var(--cream); outline:none; transition:border-color .2s, box-shadow .2s; resize:none;
}
.gb-field input:focus,
.gb-field textarea:focus,
.gb-field select:focus { border-color:var(--dusty-rose); box-shadow:0 0 0 3px rgba(201,150,127,.1); }
.gb-full   { grid-column:span 2; }
.gb-submit {
  width:100%; padding:14px; margin-top:8px;
  background:var(--charcoal); color:white; border:none; border-radius:100px;
  font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:.15em; text-transform:uppercase;
  cursor:pointer; transition:background .3s, transform .2s;
}
.gb-submit:hover    { background:var(--dusty-rose); transform:translateY(-1px); }
.gb-submit:disabled { background:var(--muted); cursor:not-allowed; transform:none; }
.gb-messages        { display:flex; flex-direction:column; gap:14px; }
.gb-msg             { background:white; border-radius:16px; padding:20px 22px; box-shadow:0 2px 12px rgba(44,44,44,.06); border:1px solid rgba(232,201,188,.35); }
.gb-msg-header      { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.gb-msg-name        { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:300; }
.gb-msg-attend      { font-size:10px; letter-spacing:.15em; text-transform:uppercase; padding:3px 10px; border-radius:100px; }
.gb-msg-attend.hadir { background:rgba(154,171,151,.2); color:#5a7a56; }
.gb-msg-attend.tidak { background:rgba(201,150,127,.15); color:#a06040; }
.gb-msg-attend.ragu  { background:rgba(138,130,120,.12); color:var(--muted); }
.gb-msg-text         { font-size:14px; color:var(--muted); line-height:1.6; }
.gb-msg-time         { font-size:11px; color:rgba(138,130,120,.6); margin-top:6px; }
.gb-empty            { text-align:center; padding:32px; color:var(--muted); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:18px; }

/* ── CLOSING ── */
.closing       { padding:72px 24px 56px; text-align:center; }
.closing-text  { font-family:'Cormorant Garamond',serif; font-size:clamp(17px,3vw,22px); font-weight:300; line-height:1.8; color:var(--muted); margin-bottom:28px; }
.closing-names { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,7vw,50px); font-weight:300; font-style:italic; color:var(--charcoal); }
.closing-names .amp { color:var(--dusty-rose); }

footer {
  text-align:center; padding:20px;
  font-size:11px; letter-spacing:.15em; color:var(--blush);
  border-top:1px solid rgba(232,201,188,.3);
}

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
  .event-cards, .couple-grid, .gb-row { grid-template-columns: 1fr; }
  .gb-full    { grid-column: span 1; }
  .amp-big    { font-size: 40px; }
  .gallery-item:first-child { grid-column: span 1; aspect-ratio: 1; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  #audio-player { bottom: 16px; right: 16px; }
  #audio-title  { display: none; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity:.4; }
  50%       { opacity:1; }
}
.reveal         { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }