/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #f4eee7; /* 🔥 samain tema */
  color: #333;
  overflow-x: hidden;
}
/* ===== LOCK SCROLL ===== */
body.lock {
  overflow: hidden;
  height: 100vh;
}

/* ===== OVERLAY PEMBUKA ===== */
#overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url('../img/cp1.jpeg') center/cover no-repeat;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: opacity 0.5s ease;
}

#overlay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.5)
  );
}

#overlay .cover-text {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ===== COVER ===== */
#cover {
  width: 100%;
  height: 100vh;
  background: url('../img/cp1.jpeg') center/cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;

  opacity: 1 !important;
  transform: none !important;
}

.cover-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

.cover-text {
  position: relative;
  z-index: 2;
}

/* ===== TEXT ===== */
.small-text {
  letter-spacing: 3px;
  font-size: 12px;
  margin-bottom: 10px;
}

#cover h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  margin: 10px 0;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

/* ===== BUTTON ===== */
button {
  margin-top: 20px;
  padding: 10px 25px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px; /* 🔥 jarak icon & text */
}

button:hover {
  background: #fff;
  color: #000;
}
button:hover i {
  transform: translateY(-2px);
  transition: 0.3s;
}

/* icon */
button i {
  font-size: 14px;
}

.btn-location {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 🔥 jarak icon */
}

/* icon */
.btn-location i {
  font-size: 14px;
}


/* ===== SECTION GLOBAL ===== */
section {
  position: relative;
  text-align: center;

  background: #f4eee7; /* 🔥 INI KUNCINYA */
}

/* garis pemisah halus */
section + section {
  border-top: 1px solid #f0f0f0;
  box-shadow: none; /* 🔥 buang shadow biar ga keliatan glitch */
}


section::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  height: 160px;

  background: url("https://www.svgrepo.com/show/309560/floral.svg") no-repeat;
  background-size: contain;

  transform: rotate(180deg);
  opacity: 0.08;
  pointer-events: none;
}
/* ===== COUPLE NALA STYLE ===== */
#couple {
  background: #ffffff;
  color: #333;
  text-align: center;
  padding: 100px 20px;
}

.mempelai-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  color: #c9a86a;
  margin-bottom: 20px;
}

/* title */
.section-title {
  font-family: 'Playfair Display', serif;
  letter-spacing: 3px;
  margin-bottom: 60px;
}

/* wrapper */
.couple-wrapper {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* circle foto */
.circle {
  width: 140px;
  height: 140px;
  border: 2px solid #c9a86a;
  border-radius: 50%;
  padding: 10px;
  margin: auto;
}

.circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* nama */
.couple-item h3 {
  font-family: 'Great Vibes', cursive;
  font-size: 38px;
  color: #c9a86a;
  margin-top: 20px;
}

/* desc */
.desc {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ornamen */
.ornamen {
  font-size: 20px;
  margin: 50px 0 20px;
  color: #aaa;
}

/* quote */
.quote {
  max-width: 700px;
  margin: auto;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  font-style: italic;
}

/* ayat */
.ayat {
  margin-top: 15px;
  font-size: 14px;
  color: #c9a86a;
}

/* ===== EVENT NALA STYLE ===== */

#event {
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 20%);
  color: #333;
  text-align: center;
  padding: 100px 20px;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.03);
}

/* judul atas & bawah */
.event-title {
  font-family: 'Great Vibes', cursive;
  font-size: 48px;
  color: #c9a86a;
  margin-bottom: 30px;
}

.event-title.closing {
  margin-top: 50px;
}

/* paragraf */
.event-desc {
  max-width: 700px;
  margin: auto;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 40px;
}

.event-desc.bottom {
  margin-top: 50px;
}

/* block tengah */
.event-block {
  margin: 20px 0;
}

/* label kecil */
#event .label {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600; /* biar lebih tegas */
  color: #c9a86a;
}

/* isi besar */
.big {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  margin-top: 5px;
}

/* lokasi */
.place {
  font-family: 'Great Vibes', cursive;
  font-size: 32px;
  color: #c9a86a;
  margin-top: 5px;
}

/* garis */
.divider {
  width: 60px;
  height: 1px;
  background: #ccc;
  margin: 20px auto;
}
/* ===== STORY ===== */
#story {
  background: #0f0f0f;
}

.story-item {
  background: #1a1a1a;
  margin-bottom: 15px;
  padding: 15px;
  border-left: 3px solid #d4af37;
  text-align: left;
}

/* ===== LOCATION NALA STYLE ===== */

#location {
  background: #f8f8f8;
  text-align: center;
  padding: 120px 20px;
}

/* title */
.location-title {
  font-family: 'Great Vibes', cursive;
  font-size: 55px;
  color: #c9a86a;
  margin-bottom: 50px;
}

/* map */
.map-wrapper {
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
  border-radius: 6px;
}

/* button */
.btn-location {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 30px;

  background: #b89563;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 2px;

  border-radius: 4px;
  transition: 0.3s;
}

/* hover */
.btn-location:hover {
  background: #a58452;
}


.fade-delay-1 { transition-delay: 0.2s; }
.fade-delay-2 { transition-delay: 0.4s; }
.fade-delay-3 { transition-delay: 0.6s; }
.fade-delay-4 { transition-delay: 0.8s; }

/* sembunyiin semua sebelum dibuka */
#main-content {
  display: none;
}

/* ===== FOOTER FIX ===== */
#footer {
  background: #f4eee7;
  text-align: center;
  padding: 60px 20px;
}

.footer-copy {
  font-size: 14px;
  color: #5c4634;
}

.footer-sub {
  font-size: 13px;
  color: #999;
}

/* overlay siap animasi */
#overlay {
  transition: transform 0.8s ease, opacity 0.5s ease;
}

/* animasi jatuh */
#overlay.drop {
  animation: dropAnim 0.8s ease forwards;
}

@keyframes dropAnim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

#main-content {
  opacity: 1;
}

/* ===== COVER TEXT STYLE NALA ===== */

.cover-text {
  text-align: center;
  color: #fff;
  max-width: 90%;
}

/* atas */
.top-text {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

/* nama pengantin */
.nama {
  font-family: 'Great Vibes', cursive;
  font-size: 75px;
  line-height: 1.2;
  margin: 10px 0;
}

.hari {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 0; /* 🔥 penting */
}

.tanggal {
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0; /* 🔥 reset semua */
}

/* ❦ */
.ornamen {
  margin: 6px 0; /* 🔥 kecil banget */
  font-size: 18px;
  opacity: 0.7;
}

/* text bawah */
.bottom-text {
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 6px;
}

/* ===== GALLERY NALA STYLE (FINAL) ===== */

#gallery {
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 20%);
  color: #333;
  text-align: center;
  padding: 100px 20px;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.03);
}

/* sub title */
.gallery-sub {
  font-size: 14px;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: 10px;
}

/* title */
.gallery-title {
  font-family: 'Great Vibes', cursive;
  font-size: 50px;
  color: #c9a86a;
  margin-bottom: 10px;
}

/* credit */
.gallery-credit {
  font-size: 14px;
  color: #777;
  margin-bottom: 50px;
}

/* ===== SWIPER ===== */

.mySwiper {
  width: 90%;
  margin: auto;
  padding-top: 40px;
}

/* slide center */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;         
  transition: 0.4s;
}

.swiper-slide-active {
  opacity: 1;             /* 🔥 yang tengah terang */
}

/* gambar */
.swiper-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  transition: 0.5s ease;
}

/* hover */
.swiper-slide:hover img {
  transform: scale(1.05);
}

/* tombol */
/* tombol kecil & putih */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;              /* 🔥 warna putih */
  width: 30px;              /* 🔥 kecilin */
  height: 30px;

  /* posisi lebih rapi */
  top: 50%;
  transform: translateY(-50%);
}

/* ubah icon panah */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;          /* 🔥 kecilin icon */
  font-weight: bold;        /* 🔥 tebelin */
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .swiper-slide img {
    height: 250px;
  }
}

/* ===== COUNTDOWN NALA PERFECT ===== */

#countdown {
  background: #FFFFFFFF;
  text-align: center;
  padding: 120px 20px;
}

/* subtitle */
.count-sub {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #555;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

/* title (yang gede elegant) */
.count-title {
  font-family: 'Great Vibes', cursive !important;
  font-size: 60px !important;
  color: #c9a86a !important;

  line-height: 1.5 !important;
  letter-spacing: 3px !important;

  margin-bottom: 70px !important;
}

/* wrapper */
.count-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 🔥 jarak antar angka */
}

/* box */
.count-box {
  text-align: center;
}

/* angka */
.count-box span {
  font-family: 'Playfair Display', serif;
  font-size: 50px;
  font-weight: 400; /* 🔥 jangan bold */
  color: #c9a86a;
}

/* label */
.count-box p {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

/* separator ":" */
.separator {
  font-size: 40px;
  color: #c9a86a;
  margin: 0 10px;
}

/* ornamen bawah */
#cover .ornamen {
  margin: 6px 0;

  font-size: 26px;
  color: #bbb;
}

/* responsive */
@media (max-width: 768px) {
  .count-wrapper {
    gap: 20px;
  }

  .count-box span {
    font-size: 30px;
  }

  .separator {
    font-size: 25px;
  }

  .count-title {
    font-size: 40px;
  }
}

/* ===== CLOSING SIMPLE ===== */

#closing {
  background: #f8f8f8;
  text-align: center;
  padding: 80px 20px;
}

/* copyright */
.closing-copy p {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
  font-family: 'Playfair Display', serif;
}

/* teks bawah */
.closing-copy span {
  font-size: 14px;
  color: #999;
  letter-spacing: 1px;
}

/* ===== WEDDING GIFT ===== */
#gift {
  background: #f4eee7;
  padding: 100px 20px;
  text-align: center;
}

.gift-container {
  max-width: 900px;
  margin: auto;
}

/* ===== TEXT ===== */
.gift-sub {
  font-size: 13px;
  letter-spacing: 3px;
  color: rgb(201, 168, 106);
}

.gift-title {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  color: #c9a86a;
  margin-bottom: 50px;
}

/* ===== WRAPPER ===== */
.gift-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* ===== ITEM ===== */
.gift-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ===== CARD BASE ===== */
.gift-card {
  position: relative;
  width: 420px;
  aspect-ratio: 16/9;
  border-radius: 18px;
  padding: 25px;
  overflow: hidden;

  box-shadow: 
    0 15px 35px rgba(0,0,0,0.25),
    inset 0 1px 2px rgba(255,255,255,0.3);
}

/* layer fix */
.gift-card::before,
.gift-card::after {
  z-index: 1;
}

.card-top,
.card-body {
  position: relative;
  z-index: 2;
}

/* ===== BNI ===== */
.bni-card {
  background: linear-gradient(135deg,#f36f21,#ff7f2a,#ff9a4d,#ffc07a);
  color: #111;
}

.bni-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%);
}

.bni-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    120deg,
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 2px,
    transparent 2px,
    transparent 12px
  );
}

/* ===== BCA ===== */
.bca-card {
  background: linear-gradient(135deg,#0066b3,#0088cc,#33aaff,#66ccff);
  color: #fff;
}

.bca-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.2), transparent 50%);
}

.bca-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    120deg,
    rgba(255,255,255,0.1) 0px,
    rgba(255,255,255,0.1) 2px,
    transparent 2px,
    transparent 14px
  );
}

/* ===== TOP ===== */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* CHIP */
.chip {
  width: 50px;
  height: 35px;
  border-radius: 6px;
  background: linear-gradient(135deg,#c9a44d,#f5d77a);
}

/* LOGO */
.bank-logo {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.bank-logo::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #fff;
  margin-top: 5px;
  border-radius: 10px;
}

/* ===== BODY ===== */
.card-body {
  margin-top: 25px;
  text-align: center;
}

.label {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.6);
}

.bca-card .label {
  color: rgba(255,255,255,0.8);
}

.rekening {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 3px;
  margin: 6px 0 15px;
}

.card-body h4 {
  font-size: 14px;
  font-weight: 600;
}

.bank-name {
  margin-top: 10px;
  font-size: 13px;
}

/* ===== BUTTON ===== */
.btn-copy {
  background: #c9a86a;
  color: #fff;
  font-weight: 500; /* default */
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
}

/* 🔥 HOVER */
.btn-copy:hover {
  background: #b89655;
  color: #fff;          /* 🔥 paksa tetap putih */
  font-weight: 600;     /* 🔥 lebih tebal */
  transform: translateY(-2px);
}

/* 🔥 FOCUS (biar ga berubah warna aneh) */
.btn-copy:focus {
  color: #fff;
  outline: none;
}

/* 🔥 DISABLED */
.btn-copy:disabled {
  opacity: 0.8;
  color: #fff;
}

/* ===== MUSIC FLOAT ===== */
#music-player {
  position: fixed;
  bottom: 25px;
  right: 25px;

  width: 60px;
  height: 60px;

  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;

  z-index: 9999;

  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.2);

  opacity: 10;
  transition: 0.5s;
}

#music-player.show {
  opacity: 10;
}

/* gambar */
#music-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔥 animasi muter */
.spin {
  animation: spin 3s linear infinite;
}

/* wrapper bulat sudah ada */

/* 🔥 icon di tengah */
.music-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* icon */
.music-icon i {
  color: #fff;
  font-size: 18px;
  background: rgba(0,0,0,0.5);
  width: 28px;
  height: 28px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.3s;
}
.music-icon i:hover {
  transform: scale(1.1);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== SECTION ANIMATION ===== */

section {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease;
}

/* muncul */
section.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {

  /* SECTION */
  #gift {
    padding: 70px 16px;
  }

  .gift-container {
    width: 100%;
  }

  /* TEXT */
  .gift-sub {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .gift-title {
    font-size: 30px;
    margin-bottom: 30px;
  }

  /* WRAPPER */
  .gift-cards {
    width: 100%;
    gap: 24px;
  }

  .gift-item {
    width: 100%;
    gap: 12px;
  }

  /* 🔥 CARD FULL WIDTH */
  .gift-card {
    width: 100%;
    max-width: 100%;

    aspect-ratio: unset;   /* biar ga gepeng */
    height: auto;

    padding: 20px;
    border-radius: 16px;
  }

  /* TOP */
  .card-top {
    margin-bottom: 10px;
  }

  /* CHIP */
  .chip {
    width: 40px;
    height: 28px;
  }

  /* LOGO */
  .bank-logo {
    font-size: 14px;
  }

  .bank-logo::after {
    width: 30px;
    height: 3px;
  }

  /* BODY */
  .card-body {
    margin-top: 10px;
  }

  .label {
    font-size: 18px;
  }

  .rekening {
    font-size: 20px;
    letter-spacing: 2px;
    margin: 6px 0 12px;
  }

  .card-body h4 {
    font-size: 13px;
  }

  .bank-name {
    font-size: 12px;
  }

  /* BUTTON */
  .btn-copy {
    width: 100%;

    display: flex;              /* 🔥 penting */
    align-items: center;        /* vertical center */
    justify-content: center;    /* horizontal center */

    gap: 8px;                   /* jarak icon & text */

    font-size: 13px;
    padding: 12px;
    border-radius: 10px;
  }
}

/* ===== MOBILE COUNTDOWN FIX ===== */
@media (max-width: 480px) {

  #countdown {
    padding: 80px 16px;
  }

  /* TITLE */
  .count-title {
    font-size: 38px !important;
    margin-bottom: 40px !important;
    line-height: 1.3 !important;
  }

  .count-sub {
    font-size: 14px;
  }

  /* 🔥 WRAPPER JADI GRID */
  .count-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    gap: 25px 10px; /* row & column gap */
    justify-items: center;
  }

  /* 🔥 HAPUS ":" */
  .separator {
    display: none;
  }

  /* BOX */
  .count-box span {
    font-size: 28px;
  }

  .count-box p {
    font-size: 13px;
  }

}

/* =========================
   NALA PROTECT WRAPPER
========================= */

#nala-protect{
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;

  z-index: 999999;
}

/* =========================
   NALA ALERT STYLE
========================= */

.nala-alert{

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 290px;
  max-width: 85%;

  padding: 12px 22px;

  border-radius: 999px;

  background:
    rgba(255, 236, 236, 0.76);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border:
    1px solid rgba(255,255,255,.42);

  box-shadow:
    0 6px 22px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55);

  color: #655454;

  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;

  letter-spacing: .15px;

  opacity: 0;

  transform:
    translateY(8px)
    scale(.97);

  transition:
    opacity .35s ease,
    transform .35s ease;

}

/* =========================
   SHOW ALERT
========================= */

.nala-alert.show{

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

}

/* =========================
   ICON
========================= */

.alert-icon{

  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.55);

  font-size: 12px;

  flex-shrink: 0;

}
/* =========================
   TEXT
========================= */

.alert-text{

  letter-spacing: .2px;

}

.alert-text b{

  font-weight: 700;

}

/* =========================
   FIX CURSOR
========================= */

*{
  cursor: default !important;
}

/* tombol & link tetap pointer */
button,
a,
.swiper-button-next,
.swiper-button-prev{
  cursor: pointer !important;
}

/* =========================
   BLOCK TEXT SELECT
========================= */

body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* elemen tertentu tetap normal */
button,
a,
input,
textarea,
.swiper,
.swiper *{
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* =========================
   BLOCK IMAGE DRAG
========================= */

img{
  -webkit-user-drag: none;
  -user-drag: none;
}

/* =========================
   MOBILE
========================= */

@media(max-width:480px){

  .nala-alert{

    min-width: unset;

    width: calc(100% - 38px);

    justify-content: center;

    padding: 14px 18px;

    border-radius: 999px;

    font-size: 13.5px;

  }

}

/* =========================
   RSVP SECTION PREMIUM
========================= */

#rsvp{
  position: relative;

  padding: 130px 20px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #efe3d7 0%,
      #f8f2ec 35%,
      #fffaf7 100%
    );

  text-align: center;
}

/* glow kiri */
#rsvp::before{
  content: "";

  position: absolute;

  top: -120px;
  left: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      rgba(201,168,106,.20),
      transparent 70%
    );

  border-radius: 50%;

  filter: blur(10px);
}

/* glow kanan */
#rsvp::after{
  content: "";

  position: absolute;

  bottom: -140px;
  right: -140px;

  width: 380px;
  height: 380px;

  background:
    radial-gradient(
      rgba(184,138,116,.16),
      transparent 70%
    );

  border-radius: 50%;

  filter: blur(15px);
}

/* =========================
   TEXT
========================= */

.rsvp-sub{

  font-size: 13px;

  letter-spacing: 5px;

  text-transform: uppercase;

  color: #c9a86a;

  margin-bottom: 16px;
}

.rsvp-title{

    font-family: 'Playfair Display', serif;

  font-size: 72px;

  font-weight: 400;

  color: #C9A86A;

  margin-bottom: 18px;

  line-height: 1.1;
}

.rsvp-desc{

  max-width: 580px;

  margin: auto;
  margin-bottom: 60px;

  color: #866e63;

  font-size: 15px;

  line-height: 1.9;
}

/* =========================
   FORM BOX
========================= */

.rsvp-form{

  position: relative;
  z-index: 2;

  max-width: 620px;

  margin: auto;

  padding: 42px;

  border-radius: 38px;

  background:
    rgba(255,255,255,.45);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  border:
    1px solid rgba(255,255,255,.8);

  box-shadow:
    0 25px 80px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* inner glow */
.rsvp-form::before{

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.7),
      rgba(255,255,255,0)
    );

  /* standard */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  mask-composite: exclude;

  /* webkit */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  pointer-events: none;
}
/* =========================
   GROUP
========================= */

.form-group{
  margin-bottom: 24px;
}

/* =========================
   INPUT
========================= */

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{

  width: 100%;

  padding: 19px 22px;

  border: none;
  outline: none;

  border-radius: 20px;

  background:
    rgba(255,255,255,.82);

  color: #5d4b45;

  font-size: 14px;

  font-family: "Poppins", sans-serif;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.03),
    0 3px 10px rgba(0,0,0,.02);

  transition:
    .35s ease;
}

/* placeholder */
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder{
  color: #b09c93;
}

/* focus */
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{

  background: #fff;

  transform:
    translateY(-2px);

  box-shadow:
    0 0 0 4px rgba(201,168,106,.14),
    0 12px 28px rgba(0,0,0,.05);
}

/* textarea */
.rsvp-form textarea{
  resize: none;
}

/* =========================
   BUTTON
========================= */

.btn-rsvp{

  width: 100%;

  border: none;
  outline: none;

  padding: 17px 24px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #d4af95,
      #bb8b74,
      #a97762
    );

  background-size: 200% 200%;

  color: #fff;

  font-size: 14px;
  font-weight: 500;

  font-family: "Poppins", sans-serif;

  cursor: pointer;

  transition:
    .4s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow:
    0 14px 35px rgba(185,138,117,.30);
}

/* hover */
.btn-rsvp:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 45px rgba(185,138,117,.36);

  background-position: right center;
}

/* click */
.btn-rsvp:active{
  transform: scale(.98);
}

/* =========================
   MOBILE
========================= */

@media(max-width:480px){

  #rsvp{
    padding: 95px 18px;
  }

  .rsvp-title{
    font-size: 52px;
  }

  .rsvp-desc{
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 42px;
  }

  .rsvp-form{

    padding: 24px 18px;

    border-radius: 28px;
  }

  .rsvp-form input,
  .rsvp-form select,
  .rsvp-form textarea{

    padding: 16px 16px;

    border-radius: 16px;
  }

}