/* ============================================================
   Undangan Perayaan Natal Gabungan — Tema Merah & Emas
   ============================================================ */
:root{
  --merah-tua:#5a0d12;
  --merah:#7a141a;
  --merah-muda:#9a1c24;
  --emas:#d4af37;
  --emas-terang:#f0d078;
  --emas-pucat:#f5e6c8;
  --krem:#faf3e0;
  --hijau:#2e7d32;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(ellipse at top,#8a1a20 0%,var(--merah-tua) 55%,#2e0508 100%);
  color:var(--emas-pucat);
  line-height:1.7;
  overflow-x:hidden;
}
canvas#snow{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:60px 20px 80px;
  background:
    linear-gradient(180deg,rgba(60,5,10,.55) 0%,rgba(90,13,18,.35) 50%,rgba(46,5,8,.85) 100%),
    url('hero-bg.jpg') center/cover no-repeat;
  background-attachment:fixed;
}
.hero-inner{max-width:760px;position:relative;z-index:2;animation:fadeUp 1.2s ease both}
.tree-icon{margin-bottom:18px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.hero-opening{
  font-family:'Great Vibes',cursive;
  font-size:clamp(20px,3vw,28px);
  color:var(--emas-terang);
  margin-bottom:10px;
}
.hero-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(38px,7.5vw,76px);
  line-height:1.05;
  letter-spacing:1px;
  background:linear-gradient(180deg,#fff4d6 0%,var(--emas-terang) 45%,#b8860b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 4px 30px rgba(212,175,55,.25);
  margin-bottom:24px;
}
.hero-date{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(250,243,224,.12);
  border:1.5px solid var(--emas);
  border-radius:50px;
  padding:10px 34px;
  margin-bottom:34px;
  backdrop-filter:blur(4px);
}
.hero-date .hari{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--emas-terang)}
.hero-date .tanggal{font-family:'Playfair Display',serif;font-size:clamp(20px,3vw,28px);font-weight:600;color:var(--krem)}
.scroll-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:2px;color:var(--emas-terang);
  animation:bounce 2s infinite;z-index:2;
}

/* ---------- TOMBOL EMAS ---------- */
.btn-gold{
  display:inline-block;
  padding:14px 36px;
  background:linear-gradient(135deg,#f6e29a 0%,var(--emas) 50%,#b8860b 100%);
  color:#3d080c;
  font-weight:600;font-size:15px;letter-spacing:.5px;
  border:none;border-radius:50px;cursor:pointer;
  text-decoration:none;font-family:inherit;
  box-shadow:0 6px 24px rgba(212,175,55,.4);
  transition:transform .2s,box-shadow .2s;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(212,175,55,.55)}
.btn-block{display:block;width:100%;margin-top:8px}

/* ---------- SECTION UMUM ---------- */
section{padding:70px 20px;position:relative;z-index:2}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,4.5vw,38px);
  text-align:center;color:var(--emas-terang);
  margin-bottom:36px;font-weight:600;
}
.section-title::after{
  content:'';display:block;width:70px;height:2px;
  background:linear-gradient(90deg,transparent,var(--emas),transparent);
  margin:12px auto 0;
}

/* ---------- COUNTDOWN ---------- */
.countdown-section{background:rgba(46,5,8,.35)}
.countdown{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cd-box{
  background:linear-gradient(180deg,rgba(250,243,224,.14),rgba(250,243,224,.05));
  border:1.5px solid var(--emas);
  border-radius:14px;
  min-width:80px;padding:16px 10px;
  text-align:center;
  backdrop-filter:blur(4px);
}
.cd-num{display:block;font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:var(--emas-terang)}
.cd-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--emas-pucat);margin-top:4px}

/* ---------- KARTU DETAIL ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:860px;margin:0 auto}
.card{
  background:linear-gradient(160deg,rgba(122,20,26,.85),rgba(90,13,18,.9));
  border:1.5px solid var(--emas);
  border-radius:18px;
  padding:34px 28px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  transition:transform .25s;
}
.card:hover{transform:translateY(-6px)}
.card-icon{margin-bottom:14px}
.card h3{font-family:'Playfair Display',serif;color:var(--emas-terang);font-size:20px;margin-bottom:10px;letter-spacing:1px}
.card-big{font-weight:600;color:var(--krem);font-size:16px;margin-bottom:6px}
.card p{font-size:14.5px;color:var(--emas-pucat)}
.link-gold{display:inline-block;margin-top:12px;color:var(--emas-terang);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px dashed var(--emas)}
.link-gold:hover{color:#fff}

/* ---------- AYAT / TEMA ---------- */
.verse-section{
  background:
    linear-gradient(rgba(46,5,8,.7),rgba(46,5,8,.7)),
    url('hero-bg.jpg') center/cover fixed no-repeat;
  padding:80px 20px;
}
.verse-box{
  max-width:720px;margin:0 auto;text-align:center;
  background:rgba(90,13,18,.7);
  border:2px solid var(--emas);border-radius:18px;
  padding:44px 36px;
  backdrop-filter:blur(6px);
  box-shadow:0 16px 50px rgba(0,0,0,.4);
}
.verse-label{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--emas);margin-bottom:16px}
.verse-text{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(20px,3.5vw,30px);color:var(--krem);
  line-height:1.5;margin-bottom:16px;
}
.verse-ref{color:var(--emas-terang);font-weight:500;font-size:15px}

/* ---------- PENYELENGGARA ---------- */
.org-list{list-style:none;max-width:560px;margin:0 auto;text-align:center}
.org-list li{
  padding:14px 20px;margin-bottom:10px;
  background:rgba(250,243,224,.08);
  border:1px solid rgba(212,175,55,.5);
  border-radius:12px;
  font-size:16px;font-weight:500;color:var(--krem);
}

/* ---------- RSVP FORM ---------- */
.rsvp-section{background:rgba(46,5,8,.35)}
.rsvp-sub{text-align:center;max-width:560px;margin:0 auto 30px;color:var(--emas-pucat);font-size:15px}
.notif{max-width:560px;margin:0 auto 20px;padding:14px 20px;border-radius:10px;font-size:14px;text-align:center}
.notif.sukses{background:rgba(46,125,50,.25);border:1px solid #66bb6a;color:#a5d6a7}
.notif.error{background:rgba(198,40,40,.25);border:1px solid #ef5350;color:#ef9a9a}
.rsvp-form{max-width:560px;margin:0 auto;background:rgba(90,13,18,.6);border:1.5px solid var(--emas);
  border-radius:18px;padding:34px 30px;backdrop-filter:blur(6px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rsvp-form label{display:block;font-size:13px;color:var(--emas-terang);margin-bottom:16px;font-weight:500}
.req{color:#ff8a80}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{
  width:100%;margin-top:6px;padding:12px 14px;
  background:rgba(46,5,8,.6);border:1px solid #8a6d2f;border-radius:10px;
  color:var(--krem);font-size:15px;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{
  outline:none;border-color:var(--emas-terang);box-shadow:0 0 0 3px rgba(212,175,55,.2)
}
.rsvp-form select option{background:#5a0d12;color:#f5e6c8}

/* ---------- KONTAK ---------- */
.contact-card{
  max-width:460px;margin:0 auto;text-align:center;
  background:linear-gradient(160deg,rgba(122,20,26,.85),rgba(90,13,18,.9));
  border:1.5px solid var(--emas);border-radius:18px;padding:38px 30px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.contact-name{font-family:'Playfair Display',serif;font-size:24px;color:var(--emas-terang);font-weight:600}
.contact-phone{font-size:18px;color:var(--krem);margin:8px 0 22px;letter-spacing:1px}

/* ---------- FOOTER ---------- */
.footer{text-align:center;padding:44px 20px 34px;background:#2e0508;border-top:2px solid var(--emas);position:relative;z-index:2}
.footer-verse{font-style:italic;color:var(--emas-pucat);max-width:640px;margin:0 auto 14px;font-size:14px}
.footer-copy{font-size:12.5px;color:#8a7a5a}

/* ---------- ANIMASI ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ---------- RESPONSIF ---------- */
@media(max-width:640px){
  .form-row{grid-template-columns:1fr;gap:0}
  .hero{background-attachment:scroll}
  .verse-section{background-attachment:scroll}
  .cd-box{min-width:68px;padding:12px 6px}
  .cd-num{font-size:26px}
}