/* ============================================================
   WEDDING INVITATION — Mike & I'in
   Layout: Fixed 3-panel (left bg | center card | right bg)
   Content scrolls inside the card only
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@200;300;400;500&family=Great+Vibes&display=swap");

:root {
  --gold: #c9a96e;
  --gold-dim: rgba(201, 169, 110, 0.3);
  --card-bg: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.12);
  --white: #ffffff;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Montserrat", sans-serif;
  --font-script: "Great Vibes", cursive;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --card-width: 420px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
}
button {
  cursor: pointer;
  font-family: var(--font-sans);
  border: none;
  background: none;
}
ul {
  list-style: none;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #0d0d0d;
  -webkit-font-smoothing: antialiased;
}

/* ── LOADER ────────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition:
    opacity 0.8s var(--ease),
    visibility 0.8s;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-ring {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
.loader-text {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 7px;
  color: var(--gold);
  opacity: 0.75;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════
   FIXED BACKGROUND PANELS
   Left panel and right panel show the same bg image,
   blurred + darkened. They crossfade on section change.
   ═══════════════════════════════════════════════════════════ */
.bg-panel {
  display: none; /* panel kiri-kanan disembunyikan */
}
#bgLeft {
  left: 0;
}
#bgRight {
  right: 0;
}

.bg-panel .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.55) blur(2px);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  transform: scale(1.05); /* hide blur edge */
}
.bg-panel .bg-layer.active {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   CENTER CARD — fixed width, full height, scrollable inside
   ═══════════════════════════════════════════════════════════ */
#card {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--card-width);
  z-index: 2;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* FIX: background langsung pada card — berlaku untuk semua section */
  background: rgba(10, 10, 10, 0.8);
  /* Border gold tipis di kiri dan kanan */
  border-left: 1px solid rgba(201, 169, 110, 0.35);
  border-right: 1px solid rgba(201, 169, 110, 0.35);
}
#card::-webkit-scrollbar {
  display: none;
}

/* Hapus pseudo-element lama yang bermasalah — background sudah di #card */
#card::before {
  display: none;
}

/* ── SECTION base ──────────────────────────────────────────── */
.section {
  width: 100%;
  position: relative;
  padding: 0 36px;
}
.section-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* section that fills full viewport height (cover) */
.section-full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 36px 60px;
}

/* ── COVER BG behind card (card-specific, not panel) ──────── */
#coverBg {
  position: fixed;
  inset: 0;
  z-index: 1; /* above bg panels, behind card */
  pointer-events: none;
}
#coverBg .cover-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.42) saturate(0.7);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
#coverBg .cover-layer.active {
  opacity: 1;
}

/* ── REVEAL ANIMATIONS on scroll ──────────────────────────── */

/* Base reveal — fade + slide dari bawah (default) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Slide dari kiri */
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal-left.visible {
  opacity: 1;
  transform: none;
}

/* Slide dari kanan */
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal-right.visible {
  opacity: 1;
  transform: none;
}

/* Scale up dari kecil */
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade saja (untuk gambar besar) */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.reveal-fade.visible {
  opacity: 1;
}

/* Clip dari atas ke bawah (untuk divider dan line) */
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.6s ease,
    clip-path 0.9s var(--ease);
}
.reveal-clip.visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* Rotate + fade (untuk script/ornamen) */
.reveal-rotate {
  opacity: 0;
  transform: translateY(20px) rotate(-3deg);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}
.reveal-rotate.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* Gallery item — slide masuk dari kiri/kanan dengan stagger
   gal-hero: slide dari kiri (full width)
   gal-item odd (kiri): slide dari kiri
   gal-item even (kanan): slide dari kanan
   Keluar: kebalikannya (via not visible) */
.gal-hero {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.95s var(--ease);
}
.gal-hero.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Item di kolom kiri — masuk dari kiri */
.gal-item:nth-child(odd) {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.85s var(--ease);
}
/* Item di kolom kanan — masuk dari kanan */
.gal-item:nth-child(even) {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.85s var(--ease);
}

/* Semua item saat visible — kembali ke posisi normal */
.gal-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay tiap item */
.gal-item:nth-child(2) {
  transition-delay: 0.08s;
}
.gal-item:nth-child(3) {
  transition-delay: 0.16s;
}
.gal-item:nth-child(4) {
  transition-delay: 0.22s;
}
.gal-item:nth-child(5) {
  transition-delay: 0.3s;
}

/* ═══════════════════════════════════════════════════════════
   COVER SECTION
   ═══════════════════════════════════════════════════════════ */
#coverSection {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 36px 60px;
  position: relative;
  z-index: 1;
}
.cover-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}
.cover-names {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 9vw, 56px);
  letter-spacing: 4px;
  color: var(--white);
  line-height: 1.05;
}
.cover-amp {
  color: var(--gold);
}
.cover-date {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--gold);
  margin-top: 16px;
}

.cover-guest-box {
  text-align: center;
}
.cover-guest-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}
.cover-guest-name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: 5px;
}
.cover-guest-note {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 30px;
}
.btn-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 50px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  background: rgba(201, 169, 110, 0.08);
  backdrop-filter: blur(8px);
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.2s;
}
.btn-open:hover {
  background: rgba(201, 169, 110, 0.2);
  border-color: var(--gold);
  transform: scale(1.03);
}
.btn-open svg {
  transition: transform 0.35s var(--ease);
}
.btn-open:hover svg {
  transform: translateY(3px);
}

/* Cover decorative side lines */
.cover-deco {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201, 169, 110, 0.35),
    transparent
  );
}
.cover-deco-l {
  left: 18px;
}
.cover-deco-r {
  right: 18px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER
   ═══════════════════════════════════════════════════════════ */
.s-divider {
  width: 100%;
  padding: 0 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}
.s-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-dim),
    transparent
  );
}
.s-divider i {
  color: var(--gold);
  font-style: normal;
  font-size: 14px;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════ */
.script {
  font-family: var(--font-script);
  font-size: clamp(28px, 7vw, 40px);
  color: var(--gold);
  line-height: 1.3;
}
.serif-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: 3px;
  color: var(--white);
}
.sans-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 5px;
  color: var(--gold);
  text-transform: uppercase;
}
.body-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.85;
}
.gold-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 16px auto;
}

/* ═══════════════════════════════════════════════════════════
   WELCOME
   ═══════════════════════════════════════════════════════════ */
.welcome-section {
  padding: 80px 36px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.welcome-couple {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(36px, 10vw, 60px);
  letter-spacing: 4px;
  color: var(--white);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   QUOTE / AYAT
   ═══════════════════════════════════════════════════════════ */
.quote-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.photo-portrait {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.35);
  position: relative;
}
.photo-portrait::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 169, 110, 0.18);
  z-index: 1;
  pointer-events: none;
}
.photo-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.9;
  text-align: center;
}
.quote-cite {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   MEMPELAI
   ═══════════════════════════════════════════════════════════ */
.mempelai-section {
  padding: 50px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.mempelai-photo {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 20px;
}
.mempelai-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.mempelai-role {
  /* sans-label style */
}
.mempelai-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 6vw, 34px);
  color: var(--white);
  letter-spacing: 1px;
  line-height: 1.15;
}
.mempelai-parents {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}
.btn-insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
  transition:
    border-color 0.3s,
    color 0.3s;
}
.btn-insta:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   EVENT / ACARA
   ═══════════════════════════════════════════════════════════ */
.event-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.event-block {
  width: 100%;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
}
.event-type {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.event-date {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--gold);
}
.event-time {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}
.event-place {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}
.event-addr {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--gold);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.btn-map:hover {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold);
}
.event-or {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold);
  opacity: 0.4;
  padding: 12px 0;
}

/* ═══════════════════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════════════════ */
.countdown-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.countdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}
.cd-item {
  text-align: center;
  flex: 1;
}
.cd-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(44px, 12vw, 64px);
  color: var(--white);
  line-height: 1;
  letter-spacing: -1px;
}
.cd-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 5px;
  font-weight: 400;
}
.cd-colon {
  font-family: var(--font-serif);
  font-size: clamp(36px, 9vw, 54px);
  color: var(--gold);
  opacity: 0.45;
  line-height: 1;
  margin-top: 0;
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════
   RSVP
   ═══════════════════════════════════════════════════════════ */
.rsvp-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.rsvp-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.field-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
.field-lbl + input,
.field-lbl + select,
.field-lbl + textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--white);
  outline: none;
  transition: border-color 0.25s;
}
.field-lbl + input::placeholder,
.field-lbl + textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.field-lbl + input:focus,
.field-lbl + select:focus,
.field-lbl + textarea:focus {
  border-color: var(--gold);
}
.field-lbl + select option {
  background: #1a1a1a;
}
.field-lbl + textarea {
  resize: none;
  min-height: 88px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hadir-opts {
  display: flex;
  gap: 10px;
}
.hadir-opt {
  flex: 1;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.hadir-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
}
.hadir-opt span {
  display: block;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.hadir-opt input:checked + span {
  background: rgba(201, 169, 110, 0.15);
  color: var(--gold);
  border-color: var(--gold);
}
.btn-submit {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--gold);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 4px;
  transition:
    background 0.3s,
    color 0.3s;
}
.btn-submit:hover {
  background: var(--gold);
  color: #0a0a0a;
}
.rsvp-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}
.rsvp-success .s-icon {
  font-size: 30px;
  color: var(--gold);
}
.rsvp-success .s-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--white);
}
.rsvp-success .s-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  text-align: center;
}
.btn-reset {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 169, 110, 0.4);
  padding-bottom: 2px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   TURUT MENGUNDANG
   ═══════════════════════════════════════════════════════════ */
.turut-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.turut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  text-align: left;
}
.turut-head {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.turut-col li {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 2.2;
}

/* ═══════════════════════════════════════════════════════════
   GIFT
   ═══════════════════════════════════════════════════════════ */
.gift-section {
  padding: 60px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.gift-card {
  width: 100%;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.gift-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(201, 169, 110, 0.07) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.gift-bank {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold);
}
.gift-num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 2px;
}
.gift-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 1px;
}
.btn-copy {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.btn-copy:hover {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold);
}
.btn-copy.copied {
  color: #6fbf73;
  border-color: #6fbf73;
}
.gift-sep {
  color: var(--gold);
  font-size: 18px;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════
   CLOSING
   ═══════════════════════════════════════════════════════════ */
.closing-section {
  padding: 80px 36px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: 100vh;
  justify-content: center;
}
.closing-section .script {
  font-size: clamp(46px, 14vw, 72px);
}
.closing-watermark {
  margin-top: 40px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
}
#lightbox.active {
  display: flex;
}
#lbImg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#lbImg img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
#lbClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lbPrev,
#lbNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#lbPrev {
  left: 14px;
}
#lbNext {
  right: 14px;
}
#lbPrev:hover,
#lbNext:hover {
  background: rgba(201, 169, 110, 0.25);
  color: var(--gold);
}
#lbCounter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   MUSIC BUTTON
   ═══════════════════════════════════════════════════════════ */
#btnMusic {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(201, 169, 110, 0.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition:
    border-color 0.3s,
    transform 0.2s;
}
#btnMusic:hover {
  border-color: var(--gold);
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════
   COVER LOCKED — prevent scroll before open
   ═══════════════════════════════════════════════════════════ */
#card.locked {
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: collapse to single column
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  :root {
    --card-width: 100vw;
  }
  .bg-panel {
    display: none;
  }
  #coverBg .cover-layer {
    filter: brightness(0.42) saturate(0.7);
  }
}

/* ═══════════════════════════════════════════════════════════
   COMMENT FEED
   ═══════════════════════════════════════════════════════════ */
.comment-feed {
  width: 100%;
  margin-top: 28px;
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.comment-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
  margin-bottom: 14px;
}
.comment-count {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px;
}
/* Kolom ucapan yang bisa di-scroll — dibatasi tingginya */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px; /* batasi tinggi, muncul scroll kalau penuh */
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 6px;
  /* Padding bawah agar item terakhir tidak menempel batas */
  padding-bottom: 4px;
}
/* Scrollbar tipis warna gold */
.comment-list::-webkit-scrollbar {
  width: 4px;
}
.comment-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.comment-list::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 110, 0.45);
  border-radius: 4px;
}
.comment-list::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 110, 0.7);
}
/* Firefox */
.comment-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 110, 0.45) rgba(255, 255, 255, 0.04);
}
.comment-empty {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 24px 0;
}

/* Single comment card */
.comment-item {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  animation: commentIn 0.4s var(--ease) both;
}
@keyframes commentIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.comment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--gold); /* default; JS sets unique color */
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.comment-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.comment-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 50px;
}
.badge-hadir {
  background: rgba(111, 191, 115, 0.2);
  color: #6fbf73;
  border: 1px solid rgba(111, 191, 115, 0.3);
}
.badge-tidak {
  background: rgba(220, 100, 100, 0.18);
  color: #e07070;
  border: 1px solid rgba(220, 100, 100, 0.25);
}
.comment-msg {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  word-break: break-word;
}
.comment-time {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 5px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — redesign
   ═══════════════════════════════════════════════════════════ */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#lightbox.active {
  display: flex;
}

#lbInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  gap: 18px;
}

#lbImgWrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lbImg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lbImg img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* Prev / Next — overlaid on sides of image */
#lbPrev,
#lbNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
  z-index: 2;
}
#lbPrev {
  left: 6px;
}
#lbNext {
  right: 6px;
}
#lbPrev:hover,
#lbNext:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.06);
}

/* Bottom bar: counter + close */
#lbBottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#lbCounter {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.4);
}

/* Close button — red circle below photo */
#lbClose {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e05555;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.15s;
  border: none;
}
#lbClose:hover {
  background: #c94444;
  transform: scale(1.08);
}

/* Mobile lightbox: smaller arrows, full-width image */
@media (max-width: 500px) {
  #lbPrev {
    left: 2px;
  }
  #lbNext {
    right: 2px;
  }
  #lbImg img {
    max-height: 65vh;
  }
  #lbPrev,
  #lbNext {
    width: 36px;
    height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ANDROID / MOBILE FIXES
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  :root {
    --card-width: 100vw;
  }

  .bg-panel {
    display: none;
  }

  /* Full-width gallery grid on mobile */

  .gallery-grid 

  /* Turut grid single column on small screens */
  .turut-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* RSVP field row stacked */
  .field-row {
    grid-template-columns: 1fr;
  }

  /* Comment feed full height scrollable */
  .comment-list {
    max-height: 300px;
  }

  /* Prevent double-tap zoom on buttons */
  button,
  a {
    touch-action: manipulation;
  }

  /* Section padding smaller on mobile */
  .section,
  .welcome-section,
  .quote-section,
  .mempelai-section,
  .event-section,
  .countdown-section,
  .gallery-section,
  .rsvp-section,
  .turut-section,
  .gift-section,
  .closing-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Cover names smaller */
  .cover-names {
    font-size: 30px;
  }

  /* Countdown font smaller */
  .cd-num {
    font-size: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX: Turut section text readable on dark bg
   ═══════════════════════════════════════════════════════════ */
.turut-col li {
  color: rgba(255, 255, 255, 0.88) !important;
}
.turut-head {
  color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX: Mobile card — gold border (sama dengan desktop)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  /* Pada mobile card full width, border tetap tampil */
  #card {
    border-left: 1px solid rgba(201, 169, 110, 0.35);
    border-right: 1px solid rgba(201, 169, 110, 0.35);
  }
}

/* ═══════════════════════════════════════════════════════════
   COVER — hero couple photo above guest name
   ═══════════════════════════════════════════════════════════ */
.cover-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 0;
  overflow: hidden;
}
.cover-hero img {
  width: 100%;
  height: 100%;
  max-height: 52vh;
  object-fit: cover;
  object-position: top;
  /* fade bottom into card */
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   GALLERY — hero item taller, no overlap
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 500px) {
}

/* FORCE: turut section all li white regardless of nesting */
.turut-section li,
.turut-section ul li,
.turut-grid li,
.turut-col li {
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 2.2;
}

/* ═══════════════════════════════════════════════════════════
   GALLERY — clean grid, no inline overrides needed
   
   Structure:
   ┌─────────────────────────────┐  ← gal-hero  (row 1–2, col 1–2)
   │         HERO IMAGE          │     height = 2 × CELL_H + gap
   ├──────────────┬──────────────┤  ← row 3
   │   item 2     │   item 3     │
   ├──────────────┼──────────────┤  ← row 4
   │   item 4     │   item 5     │
   └──────────────┴──────────────┘
   ═══════════════════════════════════════════════════════════ */

/* Section wrapper */
.gallery-section {
  padding: 60px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.gallery-section .script,
.gallery-section .serif-title {
  padding: 0 36px;
}

/* Grid: 2 cols, 3 explicit rows (hero + 2 rows of smalls) */
.gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 150px 150px; /* hero row + 2 small rows */
  gap: 4px;
}

/* Hero: spans both columns, first row only */
.gal-hero {
  grid-column: 1 / -1; /* full width */
  grid-row: 1 / 2; /* first row only — grid controls height via row track */
  overflow: hidden;
}

/* Small items: placed automatically in rows 2 and 3 */
.gal-item {
  overflow: hidden;
  position: relative;
}

/* All images fill their grid cell completely */
.gal-hero img,
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition:
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.4s ease;
  filter: brightness(0.88);
  cursor: zoom-in;
}
.gal-hero img:hover,
.gal-item img:hover {
  transform: scale(1.04);
  filter: brightness(1);
}

/* Mobile adjustments — keep same structure, just smaller heights */
@media (max-width: 500px) {
  .gallery-grid {
    grid-template-rows: 200px 120px 120px;
    gap: 3px;
  }
}

/* ═══════════════════════════════════════════════════════════
   FULL SCREEN BG — single panel behind card
   ═══════════════════════════════════════════════════════════ */
#bgFull {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#bgFull .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  filter: brightness(0.52) saturate(0.8);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
#bgFull .bg-layer.active {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   FOTO YANG BISA DIKLIK (lightbox) — cursor + hover
   ═══════════════════════════════════════════════════════════ */
.mempelai-photo img,
.photo-portrait img {
  cursor: zoom-in;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.4s ease;
  filter: brightness(0.9);
}
.mempelai-photo img:hover,
.photo-portrait img:hover {
  transform: scale(1.03);
  filter: brightness(1);
}