@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  /* ── PALET BETAWI ── */
  --merah:        #B71C1C;   /* merah khas Betawi */
  --merah-tua:    #7F0000;
  --merah-muda:   #E53935;
  --hijau:        #1B5E20;   /* hijau Betawi */
  --hijau-muda:   #2E7D32;
  --hijau-terang: #43A047;
  --emas:         #F9A825;   /* emas / kuning Betawi */
  --emas-tua:     #C17900;
  --emas-muda:    #FFD54F;
  --biru:         #0D47A1;   /* biru ondel-ondel */
  --putih:        #FFFDE7;   /* putih gading */
  --putih-bersih: #FFFFFF;
  --gelap:        #1A0000;
  --shadow-merah: rgba(183,28,28,0.25);
  --shadow-hijau: rgba(27,94,32,0.25);
  --shadow-emas:  rgba(249,168,37,0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body {
  background: var(--putih);
  font-family: 'Poppins', sans-serif;
  color: var(--gelap);
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: #FFF8E1; }
::-webkit-scrollbar-thumb { background: var(--merah); border-radius:3px; }

/* ── COVER ── */
#cover {
  position:fixed; inset:0; z-index:9999;
  background: #111;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition: opacity .8s, visibility .8s;
}
#cover.hide { opacity:0; visibility:hidden; pointer-events:none; }
#cover .cover-bg {
  position:absolute; inset:0;
  background: url('assets/couple.png?v=1779336611') center/cover no-repeat;
  opacity:0.45;
}
/* Betawi stripe border */
#cover::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    var(--merah) 0, var(--merah) 20px,
    var(--emas)  20px, var(--emas) 40px,
    var(--hijau) 40px, var(--hijau) 60px
  ) 12;
}
#cover .cover-content { position:relative; text-align:center; padding:2rem; }
#cover h1 {
  font-family:'Playfair Display',serif;
  color: var(--emas-muda); font-size:clamp(2rem,8vw,4.5rem);
  text-shadow:0 2px 20px rgba(0,0,0,.6);
  animation: fadeDown 1.2s ease;
}
#cover p {
  color: var(--putih); font-size:clamp(.85rem,3vw,1.05rem);
  margin:1rem 0 2rem; font-family:'Cormorant Garamond',serif;
  font-style:italic; animation: fadeUp 1.4s ease;
}
#btn-open {
  padding:.9rem 2.5rem;
  background: linear-gradient(135deg, var(--emas), var(--emas-tua));
  border:none; border-radius:50px; cursor:pointer;
  color: var(--gelap); font-family:'Poppins',sans-serif;
  font-size:1rem; font-weight:700;
  box-shadow:0 8px 25px rgba(0,0,0,.5);
  animation: pulse 2s infinite, fadeUp 1.6s ease;
  transition: transform .3s;
}
#btn-open:hover { transform:scale(1.06); }

/* ── ORNAMENT ── */
.ornament {
  text-align:center; margin:1.5rem 0;
  font-size:1.5rem; color: var(--emas);
  letter-spacing:8px;
}
.section-title {
  font-family:'Playfair Display',serif;
  text-align:center; color: var(--merah-tua);
  font-size:clamp(1.6rem,5vw,2.5rem); margin-bottom:.5rem;
}
.section-subtitle {
  text-align:center; color: var(--hijau);
  font-size:.9rem; font-family:'Cormorant Garamond',serif;
  font-style:italic; margin-bottom:2rem;
}

/* ── HERO ── */
#hero {
  min-height:100vh;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding-top:60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#hero::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.6) 0%,
      rgba(0,0,0,.3) 50%,
      rgba(0,0,0,.7) 100%);
}
.hero-content {
  position:relative; text-align:center;
  padding:3rem 1.5rem; animation:fadeIn 1.5s ease;
}
.hero-content .eyebrow {
  font-family:'Cormorant Garamond',serif;
  color: var(--emas-muda); font-size:1.1rem; font-style:italic;
  letter-spacing:3px; display:block; margin-bottom:.5rem;
}
.hero-content h1 {
  font-family:'Playfair Display',serif;
  color: var(--putih-bersih); font-size:clamp(2.5rem,10vw,5.5rem);
  line-height:1.1; text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero-content .amp {
  color: var(--emas-muda); font-style:italic;
  display:block; font-size:.6em;
}
.hero-content .date-badge {
  display:inline-block; margin-top:1.5rem;
  background:rgba(249,168,37,.2); backdrop-filter:blur(8px);
  border:2px solid var(--emas); border-radius:50px;
  padding:.6rem 2rem; color: var(--emas-muda);
  font-family:'Cormorant Garamond',serif; font-size:1.1rem;
  letter-spacing:2px;
}

/* Betawi stripe bottom of hero */
#hero-stripe {
  height:10px;
  background: repeating-linear-gradient(
    90deg,
    var(--merah) 0, var(--merah) 33.33%,
    var(--emas)  33.33%, var(--emas) 66.66%,
    var(--hijau) 66.66%, var(--hijau) 100%
  );
}

/* ── COUNTDOWN ── */
#countdown {
  background: linear-gradient(135deg, var(--merah-tua), var(--merah));
  padding:4rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
}
#countdown::before {
  content:''; position:absolute; inset:0; opacity:.07;
  background: url('assets/pattern_bg.png?v=1779336611') center/400px repeat;
}
#countdown .section-title { color: var(--emas-muda); }
#countdown .section-subtitle { color:#FFE0B2; }
.countdown-grid {
  display:flex; gap:1rem; justify-content:center;
  flex-wrap:wrap; margin-top:2rem;
}
.countdown-box {
  background:rgba(0,0,0,.25);
  border:2px solid var(--emas);
  border-radius:16px; padding:1.5rem 1.2rem;
  min-width:90px; backdrop-filter:blur(5px);
  position:relative; overflow:hidden;
}
.countdown-box::before {
  content:''; position:absolute;
  top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(249,168,37,.12), transparent 70%);
  animation:rotateBg 6s linear infinite;
}
.countdown-box .num {
  font-family:'Playfair Display',serif;
  color: var(--emas-muda); font-size:clamp(2rem,7vw,3.5rem);
  display:block; position:relative;
}
.countdown-box .lbl {
  color:#FFE0B2; font-size:.7rem;
  letter-spacing:2px; text-transform:uppercase; position:relative;
}
.countdown-done {
  color: var(--emas-muda); font-family:'Playfair Display',serif;
  font-size:1.5rem; font-style:italic; margin-top:2rem;
}

/* ── MEMPELAI ── */
#mempelai {
  background: var(--putih); padding:5rem 1.5rem;
  border-top:6px solid var(--hijau);
}
.couple-wrap {
  display:flex; gap:2rem; align-items:center;
  justify-content:center; flex-wrap:wrap;
  max-width:900px; margin:0 auto;
}
.couple-card { flex:1; min-width:260px; max-width:380px; text-align:center; }
.couple-photo {
  width:200px; height:200px; border-radius:50%;
  object-fit:cover; object-position:top;
  border:6px solid var(--merah);
  box-shadow:0 0 0 4px var(--emas), 0 8px 30px var(--shadow-merah);
  transition:transform .4s;
}
.couple-photo:hover { transform:scale(1.05); }
.couple-card h3 {
  font-family:'Playfair Display',serif;
  color: var(--merah-tua); font-size:1.8rem; margin-top:1rem;
}
.couple-card .putra { color: var(--hijau); font-size:.85rem; margin-top:.3rem; font-weight:500; }
.couple-card .parents { color:#555; font-size:.8rem; margin-top:.5rem; font-style:italic; }
.amp-divider {
  font-family:'Playfair Display',serif;
  color: var(--emas-tua); font-size:4rem; font-style:italic;
  flex:0; align-self:center;
}

/* ── ACARA ── */
#acara {
  background: linear-gradient(170deg, #E8F5E9 0%, #FFF8E1 100%);
  padding:5rem 1.5rem;
  border-top:6px solid var(--emas);
}
.acara-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem; max-width:900px; margin:0 auto;
}
.acara-card {
  background: var(--putih-bersih); border-radius:20px;
  border-top:5px solid var(--merah);
  padding:2rem 1.5rem; text-align:center;
  box-shadow:0 6px 25px var(--shadow-merah);
  transition:transform .3s, box-shadow .3s;
}
.acara-card:nth-child(2) { border-top-color: var(--hijau); box-shadow:0 6px 25px var(--shadow-hijau); }
.acara-card:nth-child(3) { border-top-color: var(--biru); }
.acara-card:hover { transform:translateY(-6px); box-shadow:0 14px 35px var(--shadow-merah); }
.acara-icon { font-size:2.5rem; margin-bottom:1rem; }
.acara-card h3 {
  font-family:'Playfair Display',serif;
  color: var(--merah-tua); font-size:1.3rem; margin-bottom:.75rem;
}
.acara-card .date-str { font-weight:600; color: var(--gelap); font-size:.95rem; }
.acara-card .time-str { color: var(--hijau); font-size:1.1rem; font-weight:700; margin:.3rem 0; }
.acara-card .place { color:#555; font-size:.82rem; line-height:1.5; }
.acara-card .dress {
  margin-top:.8rem; display:inline-block;
  background: linear-gradient(135deg, var(--merah), var(--merah-muda));
  border-radius:50px; padding:.3rem 1rem;
  font-size:.75rem; color: var(--putih-bersih); font-weight:600;
}

/* ── GALLERY ── */
#gallery {
  background: linear-gradient(135deg, var(--hijau-muda), var(--hijau));
  padding:5rem 1.5rem;
}
#gallery .section-title { color: var(--emas-muda); }
#gallery .section-subtitle { color:#C8E6C9; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem; max-width:1000px; margin:0 auto;
}
.gallery-item {
  border-radius:14px; overflow:hidden;
  aspect-ratio:1; cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.35);
  border:3px solid var(--emas);
  transition:transform .4s, box-shadow .4s;
}
.gallery-item:hover { transform:scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item.tall { grid-row:span 2; aspect-ratio:auto; height:100%; }

/* LIGHTBOX */
#lightbox {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.93);
  display:none; align-items:center; justify-content:center;
}
#lightbox.active { display:flex; }
#lightbox img { max-width:92vw; max-height:90vh; border-radius:12px; border:3px solid var(--emas); }
#lightbox .close-lb {
  position:absolute; top:1.5rem; right:1.5rem;
  color:var(--emas-muda); font-size:2rem; cursor:pointer;
  background:none; border:none;
}

/* ── LOKASI ── */
#lokasi {
  background: var(--putih); padding:5rem 1.5rem;
  border-top:6px solid var(--merah);
}
.map-wrap {
  border-radius:20px; overflow:hidden;
  box-shadow:0 8px 30px var(--shadow-merah);
  max-width:900px; margin:0 auto;
  border:4px solid var(--merah);
}
.map-wrap iframe { width:100%; height:400px; border:none; display:block; }
.map-btn {
  display:inline-block; margin-top:1.5rem;
  background:linear-gradient(135deg, var(--hijau), var(--hijau-muda));
  color: var(--putih-bersih); padding:.85rem 2.5rem;
  border-radius:50px; text-decoration:none;
  font-weight:600; font-size:.9rem;
  box-shadow:0 6px 20px var(--shadow-hijau);
  transition:transform .3s, box-shadow .3s;
}
.map-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px var(--shadow-hijau); }

/* ── PEMBAYARAN ── */
#pembayaran {
  background: linear-gradient(170deg, #FFF8E1, #FFFDE7);
  padding:5rem 1.5rem;
  border-top:6px solid var(--emas);
}
.payment-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem; max-width:900px; margin:0 auto;
}
.payment-card {
  background: var(--putih-bersih); border-radius:20px;
  padding:2rem; text-align:center;
  box-shadow:0 6px 25px var(--shadow-emas);
  border:2px solid var(--emas); transition:transform .3s;
}
.payment-card:hover { transform:translateY(-5px); }
.payment-card h3 {
  font-family:'Playfair Display',serif;
  color: var(--merah-tua); font-size:1.3rem; margin-bottom:1rem;
}
.payment-card img { width:100%; max-width:220px; border-radius:12px; margin-bottom:1rem; border:2px solid var(--emas); }
.bank-item {
  display:flex; align-items:center; gap:.75rem;
  background:#FFF8E1; border-radius:12px;
  padding:.75rem 1rem; margin-bottom:.75rem; text-align:left;
  border:1px solid #FFE082;
}
.bank-icon { font-size:1.8rem; }
.bank-item .bank-info { flex:1; }
.bank-item .bank-name { font-weight:700; color: var(--merah-tua); font-size:.9rem; }
.bank-item .bank-no { color: var(--hijau); font-size:.85rem; font-weight:600; }
.bank-item .bank-acc { color:#777; font-size:.75rem; }
.copy-btn {
  background: var(--merah); border:none; color: var(--putih-bersih);
  padding:.3rem .75rem; border-radius:8px; cursor:pointer;
  font-size:.75rem; font-weight:600; transition:background .3s;
}
.copy-btn:hover { background: var(--hijau); }

/* ── RSVP ── */
#rsvp {
  background: linear-gradient(135deg, var(--hijau-muda) 0%, var(--hijau) 100%);
  padding:5rem 1.5rem; text-align:center;
}
#rsvp .section-title { color: var(--emas-muda); }
#rsvp .section-subtitle { color:#C8E6C9; }
.rsvp-form {
  max-width:550px; margin:0 auto;
  background:rgba(0,0,0,.2); backdrop-filter:blur(10px);
  border-radius:24px; padding:2.5rem 2rem;
  border:2px solid rgba(249,168,37,.5);
}
.form-group { margin-bottom:1.2rem; text-align:left; }
.form-group label { display:block; color: var(--emas-muda); font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.85rem 1rem;
  border-radius:12px; border:2px solid rgba(249,168,37,.4);
  background:rgba(255,255,255,.1); color: var(--putih-bersih);
  font-family:'Poppins',sans-serif; font-size:.9rem;
  outline:none; transition:border .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--emas-muda);
}
.form-group select option { background: var(--hijau-muda); color: var(--putih-bersih); }
.form-group textarea { resize:vertical; min-height:90px; }
.btn-submit {
  width:100%; padding:1rem;
  background:linear-gradient(135deg, var(--emas), var(--emas-tua));
  border:none; border-radius:12px; cursor:pointer;
  color: var(--gelap); font-size:1rem; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  transition:transform .3s; font-family:'Poppins',sans-serif;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.4); }
#rsvp-success {
  display:none; color: var(--emas-muda);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.2rem; margin-top:1rem;
}

/* ── UCAPAN ── */
#ucapan { background: var(--putih); padding:5rem 1.5rem; border-top:6px solid var(--hijau); }
.wishes-list {
  max-width:700px; margin:0 auto;
  display:flex; flex-direction:column; gap:1rem;
  max-height:450px; overflow-y:auto; padding-right:.5rem;
}
.wish-item {
  background: var(--putih-bersih); border-radius:16px;
  padding:1.25rem 1.5rem;
  border-left:5px solid var(--merah);
  box-shadow:0 3px 12px var(--shadow-merah);
  animation:fadeIn .5s ease;
}
.wish-item .wish-name { font-weight:700; color: var(--merah-tua); font-size:.9rem; }
.wish-item .wish-attend { font-size:.75rem; color: var(--hijau); font-weight:600; margin-bottom:.3rem; }
.wish-item .wish-msg { color:#444; font-size:.88rem; line-height:1.6; font-style:italic; }
.wish-item .wish-time { font-size:.7rem; color:#aaa; margin-top:.5rem; }

/* ── FOOTER ── */
footer {
  background: linear-gradient(135deg, var(--merah-tua), #3E0000);
  color: var(--putih); text-align:center; padding:3rem 1.5rem;
  border-top: 6px solid var(--emas);
}
/* Betawi stripe top of footer */
footer::before {
  content:''; display:block; height:8px; margin:-3rem -1.5rem 2rem;
  background: repeating-linear-gradient(
    90deg,
    var(--merah) 0, var(--merah) 33.33%,
    var(--emas)  33.33%, var(--emas) 66.66%,
    var(--hijau) 66.66%, var(--hijau) 100%
  );
}
footer .footer-names {
  font-family:'Playfair Display',serif;
  color: var(--emas-muda); font-size:2rem; margin-bottom:.5rem;
}
footer p { font-size:.82rem; color:#FFCCBC; line-height:1.8; }
footer .footer-heart { color: var(--emas-muda); font-size:1.2rem; }
.social-links { display:flex; gap:1rem; justify-content:center; margin:1.5rem 0; }
.social-links a {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:2px solid var(--emas);
  display:flex; align-items:center; justify-content:center;
  color: var(--emas-muda); font-size:1.1rem; text-decoration:none;
  transition:background .3s, transform .3s;
}
.social-links a:hover { background: var(--emas); color: var(--gelap); transform:scale(1.1); }

/* ── FLOATING BUTTONS ── */
#music-btn {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:500;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--merah), var(--merah-tua));
  border:2px solid var(--emas); cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  font-size:1.3rem; color: var(--putih-bersih);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s;
}
#music-btn:hover { transform:scale(1.1); }
#music-btn.playing { animation:spin 3s linear infinite; }

#scroll-top {
  position:fixed; bottom:1.5rem; left:1.5rem; z-index:500;
  width:44px; height:44px; border-radius:50%;
  background: var(--hijau); border:2px solid var(--emas);
  color: var(--emas-muda); cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
  box-shadow:0 4px 15px rgba(0,0,0,.3);
}
#scroll-top.visible { opacity:1; pointer-events:all; }

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from { opacity:0; }                      to { opacity:1; } }
@keyframes fadeDown{ from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(30px); }  to { opacity:1; transform:translateY(0); } }
@keyframes pulse   { 0%,100%{ box-shadow:0 0 0 0 rgba(249,168,37,.6); } 50%{ box-shadow:0 0 0 15px rgba(249,168,37,0); } }
@keyframes rotateBg{ from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes spin    { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ── REVEAL ANIMATIONS ── */
.reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.reveal, .reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-scale { transform: scale(0.85); }
.reveal-fade { transform: translateY(0); }

.reveal.visible, .reveal-up.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible, .reveal-fade.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}


/* ── TIMELINE ── */
.timeline-wrap {
  max-width: 700px; margin: 3rem auto 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.timeline-node {
  text-align: center; flex: 1; min-width: 80px;
}
.timeline-icon {
  color: white; border-radius: 50%;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 1.3rem;
  border: 2px solid var(--emas);
}
.timeline-text {
  font-size: 0.75rem; margin-top: 0.5rem; font-weight: 700;
}
.timeline-line {
  flex: 1; height: 3px; min-width: 20px;
}

/* ── RESPONSIVE ── */

@media (max-width:600px) {
  .timeline-wrap {
    flex-direction: column;
    gap: 0.5rem;
  }
  .timeline-line {
    width: 3px; height: 30px; min-height: 30px; flex: none;
    background: var(--emas) !important;
  }
  .amp-divider { font-size:2.5rem; }
  .couple-wrap { flex-direction:column; }
  .countdown-box { min-width:70px; padding:1rem .75rem; }
}