@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Serif:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Amiri:ital@0;1&display=swap");

:root {
  --rose: #f6c2d2; /* softer, lighter pink */
  --rose-deep: #eea7c0;
  --cream: #ece3ac;
  --cream-soft: #f1ebc4;
  --teal: #1f767d;
  --teal-deep: #175f66;
  --navy: #33486b;
  --gold: #c6a14b;
  --gold-soft: #d8bd78;
  --ink: #5d6b54;
  --shell: 480px;
  --oval-w: 268px; /* hero oval frame size — change this one value */
  --script: "Pinyon Script", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --noto: "Noto Serif", Georgia, serif;
  --arabic: "Amiri", serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--serif);
  color: var(--teal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ---------- standalone / section page (own rose + damask bg) ---------- */
body.page {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--rose);
  overflow-x: hidden;
}
body.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/pattern-bg.png");
  background-size: 540px auto;
  background-repeat: repeat;
  background-position: 92px 0;
  opacity: 0.78;
  pointer-events: none;
  z-index: 0;
}
/* when embedded in the shell, the shell supplies one continuous bg → section transparent */
body.page.embed {
  background: transparent;
}
body.page.embed::before {
  display: none;
}

/* ---------- shell (index.html composes section iframes) ---------- */
.shell {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--rose);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(120, 40, 70, 0.25);
}
.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/pattern-bg.png");
  background-size: 540px auto;
  background-repeat: repeat;
  background-position: 92px 0;
  opacity: 0.78;
  pointer-events: none;
  z-index: 0;
}
.shell iframe.sec {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

section {
  position: relative;
  z-index: 1;
}

/* ---------- shared type ---------- */
.script {
  font-family: var(--script);
  color: var(--teal);
  line-height: 1;
  font-weight: 400;
}
.arabic {
  font-family: var(--arabic);
  color: var(--gold);
  direction: rtl;
}
.body-it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal);
}
.label {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--teal);
}

/* ---------- decorative florals ---------- */
.decor {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
}
/* baked decor from the editor (z-index/left/top/width set inline) */
.dec {
  position: absolute;
  pointer-events: none;
}

/* ---------- cream scalloped card ---------- */
.card {
  position: relative;
  margin: 0 22px;
  padding: 54px 30px 60px;
  background:
    radial-gradient(
        circle at 12px 12px,
        transparent 11px,
        var(--cream) 12px
      ) -12px -12px /
      24px 24px,
    var(--cream);
  background-color: var(--cream);
  z-index: 1;
}
.card-wrap {
  position: relative;
  padding: 14px 0;
}
.card .inner {
  position: relative;
  z-index: 2;
}
.card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 161, 75, 0.45);
  pointer-events: none;
}
.card-damask::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/pattern-card.png");
  background-size: 150px auto;
  background-repeat: repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 130px;
  padding: 13px 20px;
  background: var(--cream-soft);
  border: 1.5px solid var(--gold-soft);
  border-radius: 7px;
  color: var(--teal);
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(120, 60, 80, 0.16);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(120, 60, 80, 0.24);
  background: #fff7d8;
}
.btn .bt {
  font-family: var(--script);
  font-size: 26px;
  line-height: 1;
  color: var(--teal);
}
.btn .bs {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--teal-deep);
}
.btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ HERO ============ */
.hero {
  padding: 84px 0 184px;
  text-align: center;
  position: relative;
}
.hero .top-flora-l {
  top: -8px;
  left: -28px;
  width: 188px;
}
.hero .top-flora-r {
  top: 8px;
  right: -24px;
  width: 170px;
}
.hero .hang-l {
  top: 118px;
  left: -12px;
  width: 118px;
}
.hero .bot-flora-l {
  bottom: -4px;
  left: -30px;
  width: 200px;
}
.hero .bot-flora-r {
  bottom: 18px;
  right: -28px;
  width: 188px;
}
.hero .bush {
  bottom: 0;
  right: 14px;
  width: 120px;
}
.walimah {
  display: block;
  width: 120px;
  margin: 0 auto 10px;
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(120, 60, 80, 0.18));
}
/* width drives everything; inner text uses container units (cqw) so it scales with the frame */
.frame-oval {
  position: relative;
  width: var(--oval-w);
  margin: 0 auto;
  z-index: 2;
  container-type: inline-size;
}
/* solid oval fill behind the gold frame (inside the opening) so text sits on cream, not the pink bg */
.oval-bg {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 10%;
  bottom: 10%;
  border-radius: 50%;
  background: var(--cream-soft);
  z-index: 0;
}
.frame-oval > img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(120, 60, 80, 0.28));
}
.oval-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16.4cqw;
}
.oval-content .bismillah {
  font-family: var(--arabic);
  font-size: 4.9cqw;
  color: var(--gold);
  margin-bottom: 0.7cqw;
}
.oval-content .bismillah-img {
  display: block;
  width: 17cqw;
  height: auto;
  margin: -5cqw auto 6cqw;
}
.oval-content .nm {
  font-family: var(--script);
  color: var(--teal);
  font-size: 12cqw;
  line-height: 0.73;
}
.oval-content .amp {
  font-family: var(--script);
  color: var(--teal);
  font-size: 8.5cqw;
  margin: 0.6cqw 0;
}
.oval-content .date {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 4.7cqw;
  color: var(--teal-deep);
  margin-top: 3.4cqw;
}
.oval-content .tag {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 4.1cqw;
  color: var(--teal);
  letter-spacing: 0.2px;
}
.play {
  margin: 22px auto 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(31, 118, 125, 0.45);
  z-index: 4;
  position: relative;
  transition: transform 0.15s ease;
}
.play:hover {
  transform: scale(1.08);
}
.play svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-left: 3px;
}
.play.playing svg.pause {
  margin-left: 0;
}

/* ============ OPENING ============ */
.opening {
  position: relative;
  padding: 30px 0 90px;
}
/* text sits above the card-cream image backdrop (decor z1/z2) */
.opening .card-wrap {
  position: relative;
  z-index: 5;
  padding: 74px 52px 70px;
  margin: 0 16px;
  background-image: url('assets/img/card-cream.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.opening .arabic-head {
  font-size: 26px;
  text-align: center;
  margin-bottom: 4px;
  color: #B38F1A;
}
.opening .salam-img {
  display: block;
  width: 100px;
  height: auto;
  margin: 8px auto 6px;
}
.opening .salam {
  font-family: var(--noto);
  font-size: 11px;
  text-align: center;
  color: #B38F1A;
  margin-bottom: 18px;
}
.opening .parents {
  font-family: var(--noto);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  color: #B38F1A;
}
.opening .invite {
  font-family: var(--noto);
  font-size: 11px;
  text-align: center;
  margin: 16px 22px 6px;
  color: #B38F1A;
  line-height: 1.6;
}
.opening .big-name {
  font-family: var(--script);
  font-size: 40px;
  text-align: center;
  color: var(--teal);
  line-height: 0.9;
  margin: 26px 0;
}
.opening .between {
  font-family: var(--noto);
  font-size: 11px;
  text-align: center;
  color: #B38F1A;
}
.divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 18px auto;
  border: 0;
}
.opening .verse {
  font-family: var(--noto);
  font-style: italic;
  font-size: 11px;
  text-align: center;
  margin: 0 14px;
  color: #B38F1A;
  line-height: 1.6;
}
.opening .verse .ref {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 12px;
}
.opening .cluster {
  margin: 6px auto -40px;
  display: block;
  width: 78%;
  position: relative;
  z-index: 3;
}

/* ============ COUNTDOWN (crowned box) ============ */
.countdown {
  padding: 84px 26px 64px;
  text-align: center;
}
.cd-stage {
  position: relative;
  display: inline-block;
  width: 100%;
}
/* florals sit in front, overlapping the box edges */
.cd-fl {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.cd-fl.crown {
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
}
.cd-fl.bl {
  bottom: -40px;
  left: -50px;
  width: 112px;
  transform: scaleX(-1);
}
.cd-fl.br {
  bottom: -40px;
  right: -50px;
  width: 112px;
}
.cd-panel {
  position: relative;
  z-index: 2;
  background: var(--cream-soft);
  border: 1px solid var(--gold);
  border-radius: 18px;
  padding: 34px 18px 30px;
  box-shadow: 0 10px 30px rgba(51, 72, 107, 0.15);
}
.countdown h2 {
  font-family: var(--script);
  font-size: 40px;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 4px;
}
.cd-sub {
  font-family: var(--noto);
  font-style: normal;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}
.clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  color: var(--navy);
}
.clock .unit {
  min-width: 62px;
}
.clock .num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: 1px;
}
.clock .sep {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  color: var(--gold);
  padding-top: 2px;
}
.clock .u {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--teal);
  margin-top: 6px;
  display: block;
}

/* ============ ATURCARA ============ */
.aturcara {
  padding: 24px 0 10px;
}
.aturcara .top-garland {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 104%;
  z-index: 3;
}
.aturcara .hang-r {
  top: 30px;
  right: -4px;
  width: 80px;
  z-index: 3;
}
.aturcara h2 {
  font-family: var(--script);
  font-size: 46px;
  color: var(--teal);
  text-align: center;
  margin-bottom: 26px;
  padding-top: 30px;
}
.prog {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.prog .time {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 17px;
  color: var(--teal-deep);
}
.prog .act {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--teal);
}

/* ============ LOKASI ============ */
.lokasi {
  padding: 54px 0 30px;
  text-align: center;
}
.lokasi .flora-bl {
  bottom: -10px;
  left: -24px;
  width: 150px;
  z-index: 2;
}
.lokasi h2 {
  position: relative;
  display: inline-block;
  font-family: var(--script);
  font-size: 46px;
  color: var(--teal);
  margin-bottom: 18px;
}
.lokasi h2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 200px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(242, 189, 204, 1) 0%,
    rgba(242, 189, 204, 0.92) 30%,
    rgba(242, 189, 204, 0.7) 60%,
    rgba(242, 189, 204, 0.2) 80%,
    rgba(242, 189, 204, 0) 100%
  );
  filter: blur(14px);
}
.lokasi .venue {
  font-weight: 700;
  font-style: italic;
  font-size: 17px;
  color: var(--teal-deep);
  margin-bottom: 22px;
}
.lokasi .save {
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  color: var(--teal-deep);
  margin: 34px 0 6px;
}
.lokasi .save-date {
  font-style: italic;
  font-size: 14px;
  color: var(--teal);
  margin-bottom: 20px;
}
.lokasi .lk-card {
  background: rgba(241,235,196,.88);
  border: 1px solid rgba(198,161,75,.55);
  border-radius: 18px;
  padding: 28px 20px 26px;
  margin: 0 20px;
  box-shadow: 0 14px 32px rgba(51,72,107,.18);
}
.lokasi .lk-card .venue {
  margin-bottom: 14px;
}
.lokasi .lk-map {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(198,161,75,.5);
  margin-bottom: 14px;
}
.lokasi .lk-map iframe {
  width: 100%;
  height: 160px;
  display: block;
  border: none;
}
/* ---- inset rows: two separate buttons, icon chip + chevron ---- */
.lokasi .seg { display: flex; gap: 12px; width: 100%; margin-bottom: 12px; }
.lokasi .seg a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--teal-deep);
  background: #fbf6dd;
  border: 1px solid rgba(198,161,75,.4);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(198,161,75,.14);
  transition: background .15s ease, transform .1s ease;
}
.lokasi .seg a:hover { background: rgba(198,161,75,.14); }
.lokasi .seg a:active { transform: scale(.98); }
.lokasi .seg .ic {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,118,125,.14);
}
.lokasi .seg .ic svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.75; }
.lokasi .seg .chev { margin-left: auto; display: flex; }
.lokasi .seg .chev svg { width: 16px; height: 16px; stroke: var(--gold-soft); fill: none; stroke-width: 1.75; }
.lokasi .lk-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 10px;
  color: var(--gold-soft);
}
.lokasi .lk-divider::before,
.lokasi .lk-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.lokasi .lk-divider span { font-family: var(--noto); font-style: normal; font-size: 11px; color: var(--navy); white-space: nowrap; }
.lokasi .cal { display: flex; gap: 12px; width: 100%; }
.lokasi .cal a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  text-decoration: none;
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #fbf6dd;
  border: 1px solid rgba(198,161,75,.4);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(198,161,75,.14);
  transition: background .15s ease, transform .1s ease;
}
.lokasi .cal a:hover { background: rgba(198,161,75,.14); }
.lokasi .cal a:active { transform: scale(.98); }
.lokasi .cal .ic {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(198,161,75,.22);
}
.lokasi .cal .ic svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.75; }
.lokasi .cal .chev { margin-left: auto; display: flex; }
.lokasi .cal .chev svg { width: 16px; height: 16px; stroke: var(--gold-soft); fill: none; stroke-width: 1.75; }

/* ============ GALLERY / RSVP / HUBUNGI ============ */
.gallery {
  padding: 30px 0 60px;
  text-align: center;
}
.gallery .corner-tr {
  top: -10px;
  right: -24px;
  width: 150px;
  z-index: 2;
}
.gallery .sp1 {
  top: 120px;
  right: 24px;
  width: 34px;
}
.gallery .sp2 {
  top: 300px;
  left: 18px;
  width: 26px;
}
.banner {
  position: relative;
  display: inline-block;
  margin: 0 auto 22px;
  padding: 20px 44px;
}
.banner .script {
  font-size: 34px;
  color: var(--teal);
  line-height: 1.05;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream-soft);
  border: 1.5px solid var(--gold-soft);
  border-radius: 50%/46%;
  z-index: -1;
  box-shadow: 0 4px 12px rgba(120, 60, 80, 0.15);
}
.couple {
  width: 84%;
  margin: 8px auto 30px;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(120, 60, 80, 0.3));
}
.rsvp-block {
  margin: 6px 0 40px;
}
.rsvp-block .klik {
  font-weight: 600;
  font-style: italic;
  font-size: 13px;
  color: var(--teal-deep);
  margin-top: 8px;
}
/* ---- Hubungi Kami (avatar-less pill rows) ---- */
.hubungi {
  padding: 20px 0 48px;
}
.hubungi-wrap {
  margin: 18px 22px 4px;
  text-align: center;
}
.hubungi-title {
  position: relative;
  display: inline-block;
  font-family: var(--script);
  font-weight: 400;
  font-size: 44px;
  line-height: 0.9;
  color: var(--teal);
}
.hubungi-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 200px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(242, 189, 204, 1) 0%,
    rgba(242, 189, 204, 0.92) 30%,
    rgba(242, 189, 204, 0.7) 60%,
    rgba(242, 189, 204, 0.2) 80%,
    rgba(242, 189, 204, 0) 100%
  );
  filter: blur(14px);
}
.hubungi-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--navy);
  margin: 6px 0 22px;
}
.hg-row {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: rgba(241, 235, 196, 0.9);
  border: 1px solid var(--gold-soft);
  border-radius: 50px;
  padding: 10px 14px;
  margin-bottom: 13px;
  box-shadow: 0 4px 12px rgba(51, 72, 107, 0.1);
}
.hg-meta {
  flex: 1;
  min-width: 0;
  padding-left: 6px;
}
.hg-nm {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.12;
}
.hg-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--teal);
}
.hg-acts {
  display: flex;
  gap: 8px;
}
.hg-acts a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hg-call {
  background: var(--teal);
}
.hg-wa {
  background: #25a35a;
}
.hg-acts svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

footer {
  padding: 24px 0 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}
footer .f {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--teal-deep);
  opacity: 0.8;
}

@media (max-width: 380px) {
  .opening .big-name {
    font-size: 54px;
  }
  .clock .num {
    font-size: 38px;
  }
  .clock .unit {
    min-width: 52px;
  }
}

@media (max-width: 430px) {
  .opening .big-name { font-size: 32px; }
  .lokasi .seg { flex-direction: column; gap: 10px; }
  .lokasi .seg a { flex: none; width: 100%; }
  .lokasi .cal { flex-direction: column; gap: 10px; }
  .lokasi .cal a { flex: none; width: 100%; }
}

/* ============ RSVP ============ */
.rsvp {
  position: relative;
  padding: 48px 22px 60px;
  /* scoped tokens */
  --rsvp-white: var(--cream-soft); /* standardized to match other cards */
  --rsvp-field-bg: #faf8ee;
  --rsvp-line: #e7dfc4;
  --rsvp-err: #b23a48;
  --rsvp-muted: #48566f;
  --r-card: 16px;
  --r-field: 10px;
  --r-pill: 999px;
}
.rsvp-accent {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: -30px;
  width: 132px;
  pointer-events: none;
  opacity: 0.92;
}
.rsvp-card {
  position: relative;
  z-index: 1;
  background: var(--rsvp-white);
  border: 1px solid var(--gold);
  border-radius: var(--r-card);
  padding: 34px 24px 30px;
  box-shadow: 0 14px 34px rgba(120, 60, 80, 0.18);
  animation: rsvp-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rsvp-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--gold-soft);
  border-radius: calc(var(--r-card) - 5px);
  pointer-events: none;
  opacity: 0.55;
}
.rsvp h2 {
  font-family: var(--script);
  font-size: 54px;
  line-height: 0.9;
  color: var(--teal);
  text-align: center;
  padding-bottom: 4px;
}
.rsvp-rule {
  width: 46px;
  height: 1px;
  background: var(--gold);
  margin: 8px auto 6px;
}
.rsvp-sub {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--rsvp-muted);
  margin-bottom: 24px;
}
.rsvp-field {
  margin-bottom: 18px;
}
.rsvp-field label {
  display: block;
  font-style: italic;
  font-size: 15px;
  color: var(--teal-deep);
  margin-bottom: 6px;
}
.rsvp-field label .req {
  color: var(--rsvp-err);
  font-style: normal;
}
.rsvp-field .opt {
  font-style: normal;
  color: var(--rsvp-muted);
}
.rsvp input,
.rsvp textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--navy);
  background: var(--rsvp-field-bg);
  border: 1px solid var(--rsvp-line);
  border-radius: var(--r-field);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rsvp input::placeholder,
.rsvp textarea::placeholder {
  color: var(--rsvp-muted);
  opacity: 0.8;
}
.rsvp input:focus,
.rsvp textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 118, 125, 0.22);
  background: #fff;
}
.rsvp textarea {
  resize: none;
  height: 74px;
}
.rsvp-err-msg {
  display: none;
  color: var(--rsvp-err);
  font-style: italic;
  font-size: 13px;
  margin-top: 5px;
}
.rsvp-field.invalid input {
  border-color: var(--rsvp-err);
}
.rsvp-field.invalid .rsvp-err-msg {
  display: block;
}
.rsvp-toggle {
  display: flex;
  gap: 10px;
}
.rsvp-toggle button {
  flex: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  padding: 11px;
  border: 1.5px solid var(--rsvp-line);
  border-radius: var(--r-pill);
  background: var(--rsvp-field-bg);
  color: var(--teal);
  cursor: pointer;
  transition: 0.15s;
}
.rsvp-toggle button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 118, 125, 0.3);
}
.rsvp-toggle button[aria-pressed="true"] {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(23, 95, 102, 0.3);
}
.rsvp-toggle button:active {
  transform: scale(0.97);
}
#rsvpPaxField {
  display: none;
}
.rsvp-note {
  display: none;
  font-style: italic;
  font-size: 14px;
  color: var(--rsvp-muted);
  background: rgba(31, 118, 125, 0.07);
  border-radius: var(--r-field);
  padding: 11px 14px;
  margin-bottom: 18px;
}
.rsvp-submit {
  width: 100%;
  font-family: var(--script);
  font-size: 30px;
  color: #fff;
  background: linear-gradient(160deg, var(--teal), var(--teal-deep));
  border: none;
  border-radius: var(--r-pill);
  padding: 10px;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 7px 18px rgba(23, 95, 102, 0.34);
  transition: transform 0.12s, box-shadow 0.15s;
}
.rsvp-submit:hover {
  box-shadow: 0 10px 24px rgba(23, 95, 102, 0.42);
}
.rsvp-submit:active {
  transform: scale(0.98);
}
.rsvp-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(31, 118, 125, 0.35);
}
.rsvp-done {
  display: none;
  text-align: center;
  padding: 20px 6px;
  animation: rsvp-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rsvp-done .check {
  width: 58px;
  height: 58px;
  border-radius: var(--r-pill);
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  font-size: 30px;
}
.rsvp-done .script {
  font-family: var(--script);
  font-size: 48px;
  color: var(--teal);
  line-height: 1;
}
.rsvp-done p {
  font-style: italic;
  color: var(--rsvp-muted);
  margin-top: 8px;
}
.rsvp-form-err {
  display: none;
  margin: 4px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(178, 58, 72, 0.1);
  border: 1px solid var(--rsvp-err);
  color: var(--rsvp-err);
  font-size: 14px;
  text-align: center;
}
.rsvp-cal {
  margin-top: 16px;
}
.rsvp-cal-note {
  font-style: italic;
  color: var(--rsvp-muted);
  font-size: 14px;
  margin: 0 0 12px;
}
.rsvp-cal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.rsvp-cal-btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--teal);
  background: var(--rsvp-field-bg);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rsvp-cal-btn:hover {
  background: var(--teal);
  color: #fff;
}
@keyframes rsvp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rsvp-card,
  .rsvp-done {
    animation: none;
  }
  .rsvp-submit,
  .rsvp-toggle button {
    transition: none;
  }
}

/* ---------- couple reveal (v7 tilted keepsakes) ----------
   SHAPE LOCK: photos = baked ornate frames, gently tilted like scattered keepsakes.
   ACCENT LOCK: teal title · gold = frame material (sparkle motif), not a 2nd accent. */
.couple {
  position: relative;
  z-index: 1;
  padding: 44px 18px 64px;
  margin: 32px auto 8px;
}
.couple-title {
  text-align: center;
  margin-bottom: 6px;
  animation: couple-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.couple-title h2 {
  position: relative;
  display: inline-block;
  font-family: var(--script);
  color: var(--teal);
  font-size: 42px;
  line-height: 1.1;
  padding-bottom: 8px;
  font-weight: 400;
}
/* title sparkles — scattered 4-point stars around the blur oval */
.couple-ts1 { position:absolute; width:34px; top:-24px; left:10px;  animation-delay:0s;   }
.couple-ts3 { position:absolute; width:30px; top:-22px; right:14px; animation-delay:0.8s; }
.couple-ts4 { position:absolute; width:22px; bottom:-10px; right:50px; animation-delay:1.4s; }

/* title sparkle wrapper — used by all section titles */
.title-spark-wrap {
  position: relative;
  display: inline-block;
}
/* inside card contexts (rsvp, aturcara) — full-width so text-align:center works */
.rsvp-card .title-spark-wrap,
.cd-panel .title-spark-wrap {
  display: block;
  text-align: center;
}
.ts-a { position: absolute; width: 34px; top: -22px; left: -12px;  animation-delay: 0s;   }
.ts-b { position: absolute; width: 28px; top: -20px; right: -10px; animation-delay: 0.9s; }
.ts-c { position: absolute; width: 22px; bottom: -12px; right: -6px; animation-delay: 1.8s; }

/* rose oval blur — standardized across all bare section titles */
.couple-title h2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 200px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(242, 189, 204, 1) 0%,
    rgba(242, 189, 204, 0.92) 30%,
    rgba(242, 189, 204, 0.7) 60%,
    rgba(242, 189, 204, 0.2) 80%,
    rgba(242, 189, 204, 0) 100%
  );
  filter: blur(14px);
}
.couple-scatter {
  position: relative;
  height: 430px;
  margin-top: 61px;
}
.couple-one {
  position: absolute;
  width: 58%;
  filter: drop-shadow(0 12px 18px rgba(120, 60, 80, 0.22));
}
.couple-one > img {
  width: 100%;
  display: block;
}
.couple-g {
  left: -2%;
  top: 0;
  animation: couple-rise-g 0.8s both;
}
.couple-b {
  right: -2%;
  top: 120px;
  animation: couple-rise-b 0.8s 0.16s both;
}
.couple-spark {
  position: absolute;
  pointer-events: none;
  width: 34px;
  animation: couple-tw 3.4s ease-in-out infinite;
}
.couple-s1 {
  top: 30px;
  right: 30px;
}
.couple-s2 {
  bottom: 40px;
  left: 30px;
  animation-delay: 1.2s;
}
@keyframes couple-rise-g {
  from { opacity: 0; transform: translateY(18px) rotate(-5deg); }
  to { opacity: 1; transform: rotate(-5deg); }
}
@keyframes couple-rise-b {
  from { opacity: 0; transform: translateY(18px) rotate(5deg); }
  to { opacity: 1; transform: rotate(5deg); }
}
@keyframes couple-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes couple-tw {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .couple-title,
  .couple-g,
  .couple-b,
  .couple-spark {
    animation: none;
  }
  /* keep the tilt without the entrance transform */
  .couple-g { transform: rotate(-5deg); }
  .couple-b { transform: rotate(5deg); }
}

/* ============================================================
   POLISHED ADD-ONS — scroll reveal + parallax (flat DOM only)
   Originals untouched; loaded by polished.html.
   ============================================================ */

/* flat-DOM shell: one continuous bg, real page scroll */
body.page.polished { background: var(--rose); }
body.page.polished::before { display: none; }
.polished .shell { box-shadow: 0 0 60px rgba(120,40,70,.25); }
.polished section { z-index: 1; }

/* ---- scroll reveal (generic) ----
   data-reveal=up|fade|scale ; optional --d stagger delay (s) */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(22px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="down"]  { transform: translateY(-18px); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---- bespoke keyframe entrances: defer to scroll-in ----
   pause the existing CSS animation until the element is revealed,
   so couple/rsvp/aturcara entrances fire on view, not on load */
[data-anim] { animation-play-state: paused !important; }
[data-anim].in { animation-play-state: running !important; }

/* parallax layers get a GPU hint */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-anim]   { animation-play-state: running !important; }
  [data-parallax] { transform: none !important; }
}

/* ---- STAR BLOOM ----
   all sparkle stars glow/pulse via filter+opacity ONLY (no transform),
   leaving transform free for parallax. Replaces scale-twinkle. */
.polished img[src*="sparkle"] {
  animation-name: star-bloom;
  animation-duration: 3.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 0 2px rgba(255,243,200,.6));
}
@keyframes star-bloom {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 1px rgba(255,245,200,.45)) brightness(1); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 8px rgba(255,238,180,.95)) brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .polished img[src*="sparkle"] { animation: none !important; filter: none !important; }
}

/* ---- HUBUNGI KAMI micro-interactions ---- */
.polished .hg-row {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.polished .hg-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(51,72,107,.18);
}
.polished .hg-acts a {
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, filter .18s ease;
}
.polished .hg-acts a:hover {
  transform: scale(1.12);
  box-shadow: 0 5px 14px rgba(51,72,107,.3);
}
.polished .hg-acts a:active { transform: scale(.95); }
/* WhatsApp gets a gentle attention pulse */
.polished .hg-wa { animation: hg-wa-pulse 2.6s ease-in-out infinite; }
@keyframes hg-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,163,90,.0); }
  50%      { box-shadow: 0 0 0 6px rgba(37,163,90,.16); }
}
@media (prefers-reduced-motion: reduce) {
  .polished .hg-wa { animation: none !important; }
}

/* ============ BOTTOM NAV (matches Lokasi .seg/.cal button style) ============ */
/* keep last content clear of the fixed bar */
.polished .shell { padding-bottom: 78px; }
html { scroll-padding-top: 12px; scroll-padding-bottom: 86px; }

/* Rose-tint frosted glass (variant G2) */
.botnav {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: calc(var(--shell) - 24px);
  z-index: 50;
  display: flex;
  gap: 5px;
  padding: 7px;
  background: rgba(246,194,210,.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(180,70,110,.2), inset 0 1px 0 rgba(255,255,255,.55);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
.botnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  text-decoration: none;
  border-radius: 14px;
  color: #8a3b5c;
  transition: background .15s ease, transform .1s ease;
}
.botnav-item:active { transform: scale(.95); }
.botnav-item svg {
  width: 18px; height: 18px;
  stroke: #a8506e; fill: none; stroke-width: 1.75;
  transition: stroke .15s ease;
}
.botnav-item .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1px;
  color: #8a3b5c;
  transition: color .15s ease;
}
.botnav-item.is-active {
  background: rgba(255,255,255,.55);
}
.botnav-item.is-active svg { stroke: var(--teal); }
.botnav-item.is-active .lbl { color: var(--teal-deep); }

@media (max-width: 380px) {
  .botnav-item .lbl { font-size: 9.5px; }
  .botnav-item svg { width: 17px; height: 17px; }
}