/* ============================================================
   Undangan Sunatan - gaya halaman tamu
   Urutan: token -> dasar -> slot gambar -> cover -> layout
           -> bagian -> form -> slider -> nav -> tiket -> responsif
   ============================================================ */

/* ---------------- Token ----------------
   Palet sogan: warna celup batik Jawa Tengah (soga = kulit kayu tingi/tegeran).
   Coklat sogan + kuning gading + emas kencana.
   ---------------------------------------- */
:root {
  --sogan:        #6b4226;   /* coklat sogan - warna utama */
  --sogan-2:      #4a2c18;   /* sogan tua - cover & panel */
  --sogan-muda:   #8a6137;
  --emas:         #b08a3e;   /* kencana - ornamen & garis, BUKAN untuk teks kecil */
  --emas-teks:    #846226;   /* kencana tua - dipakai kalau emas jadi warna teks,
                                karena #b08a3e hanya 2.78:1 di atas gading (gagal AA) */
  --emas-muda:    #e3cd96;
  --gading:       #f6eedc;   /* kuning gading - latar halaman */
  --gading-2:     #ebdfc4;
  --putih:        #fffdf7;   /* putih gading, bukan putih murni */
  --teks:         #33281f;
  --teks-lembut:  #7b6a56;
  --garis-warna:  rgba(107, 66, 38, .18);

  --r:    14px;
  --r-s:  10px;
  --r-l:  22px;

  --bayang-s: 0 2px 8px rgba(74, 44, 24, .08);
  --bayang:   0 8px 28px rgba(74, 44, 24, .12);
  --bayang-l: 0 18px 50px rgba(74, 44, 24, .20);

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tulis:  'Great Vibes', 'Cormorant Garamond', cursive;

  --isi-lebar: 34rem;   /* lebar maksimal kolom konten */
  --nav-tinggi: 4.25rem;
}

/* ---------------- Dasar ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--gading);
  color: var(--teks);
  font-family: var(--sans);
  font-size: clamp(.95rem, .9rem + .25vw, 1.02rem);
  line-height: 1.75;
  overflow-x: hidden;
}

/* Selama cover belum dibuka, halaman di belakangnya tidak boleh di-scroll. */
body.terkunci { overflow: hidden; height: 100vh; }

img, svg, iframe { max-width: 100%; }

/* Penjaga atribut [hidden].
   Peramban menyembunyikan elemen ber-atribut hidden lewat aturan bawaan
   [hidden]{display:none}. Begitu CSS kita menulis display sendiri pada
   kelas elemen itu, aturan bawaan kalah karena kekhususannya lebih rendah,
   dan elemen jadi tampil terus walau hidden terpasang. Satu baris ini
   mengembalikan perilaku yang benar untuk seluruh halaman. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0 0 1rem; }
a { color: var(--sogan-2); }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--emas);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------- Tombol ---------------- */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              color .18s ease, box-shadow .18s ease;
}
.tombol:active { transform: scale(.97); }
.tombol svg { width: 1.1em; height: 1.1em; flex: none; }

.tombol-isi {
  background: var(--sogan);
  color: var(--gading);
  box-shadow: var(--bayang-s);
}
.tombol-isi:hover { background: var(--sogan-2); }
.tombol-isi:disabled { opacity: .6; cursor: not-allowed; }

.tombol-garis {
  background: transparent;
  color: var(--sogan);
  border: 1.4px solid var(--garis-warna);
}
.tombol-garis:hover { background: var(--gading-2); border-color: var(--sogan-muda); }

/* ============================================================
   SLOT GAMBAR
   .slot        -> foto sudah ada
   .slot-kosong -> foto belum ada, tampil box putus-putus berlabel.
   Rasio dikunci di kedua kondisi lewat atribut style dari PHP,
   jadi menaruh foto nanti tidak menggeser layout.
   ============================================================ */
.slot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 100%;
  padding: 1rem;
  border: 1.6px dashed rgba(74, 44, 24, .28);
  border-radius: var(--r);
  background-color: var(--gading-2);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(74, 44, 24, .035) 0 10px,
    transparent 10px 20px
  );
  color: var(--sogan-2);
  text-align: center;
  overflow: hidden;
}

.slot-ikon {
  width: 30px;
  height: 30px;
  margin-bottom: .35rem;
  opacity: .5;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4226' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E");
}

.slot-ikon.ikon-video {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4226' stroke-width='1.5'%3E%3Crect x='2' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E");
}

.slot-label  { font-weight: 600; font-size: .86rem; line-height: 1.3; }
.slot-ukuran { font-size: .76rem; color: var(--teks-lembut); }
.slot-file {
  margin-top: .4rem;
  padding: .12rem .45rem;
  border-radius: 5px;
  background: rgba(74, 44, 24, .07);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .68rem;
  color: var(--sogan-2);
  word-break: break-all;
}

/* Box kecil (galeri) tidak perlu nama file */
.galeri-item .slot-file { display: none; }
.galeri-item .slot-ikon { width: 24px; margin-bottom: .2rem; }

/* ============================================================
   COVER
   ============================================================ */
.cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: end center;   /* isi cover menempel dasar layar */
  overflow: hidden;
  background: var(--sogan);
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s ease;
}
.cover.terbuka {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.cover-gambar { position: absolute; inset: 0; }
.cover-gambar .cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder di cover: penuhi layar, abaikan rasio */
.cover-gambar .slot-kosong {
  height: 100%;
  aspect-ratio: auto !important;
  border: 0;
  border-radius: 0;
  background-color: var(--sogan-2);
  color: var(--emas-muda);
}
.cover-gambar .slot-kosong .slot-ukuran { color: var(--emas-muda); opacity: .75; }
.cover-gambar .slot-kosong .slot-file,
.panel-gambar .slot-kosong .slot-file {
  background: rgba(255, 255, 255, .14);
  color: var(--emas-muda);
}
.cover-gambar .slot-ikon,
.panel-gambar .slot-ikon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3cd96' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E");
  opacity: .8;
}

.cover-tirai {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(74, 44, 24, .45) 0%, rgba(74, 44, 24, .82) 70%),
    linear-gradient(to top, rgba(74, 44, 24, .95), transparent 55%);
}

/* ---------------- Isi cover ----------------
   2 Kolom sama rata (50% kiri sosok, 50% kanan teks)
   Lebar kedua kolom seimbang persis di semua mode layar. */
.cover-isi {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  gap: clamp(.75rem, 2.5vw, 2.5rem);
  padding: clamp(1rem, 3vh, 2.5rem) clamp(.85rem, 3vw, 2.5rem) 0; /* 0 di bawah agar sosok tepat menyentuh dasar layar */
  text-align: left;
  color: var(--gading);
  animation: munculNaik 1s ease .15s both;
}

/* ---------------- Sosok Morgan (Kolom Kiri - 50%) ----------------
   Mengambil tepat 50% lebar kontainer.
   Sosok berdiri tegak di dasar layar, digeser ke kiri secara proporsional. */
.cover-sosok {
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: clamp(0.3rem, 1.8vw, 2.2rem);
  margin: 0;
  padding-left: 0;
  --sosok-rasio: 0.4951;             /* 859 / 1735 */
  --sosok-tinggi: min(85vh, 780px);
  height: auto;
  max-height: var(--sosok-tinggi);
  line-height: 0;
  pointer-events: none;
}

.cover-sosok .sosok-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: var(--sosok-tinggi);
  aspect-ratio: 859 / 1735;
  object-fit: contain;
  object-position: bottom center;
  vertical-align: bottom;
  margin: 0;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.58));
  pointer-events: auto;
}

/* ---------------- Kolom Teks (Kolom Kanan - 50%) ----------------
   Hierarki tipografi proporsional mengimbangi postur tubuh sosok Morgan. */
.cover-teks {
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(1.2rem, 3vh, 2.5rem);
  padding-left: clamp(0.2rem, 1vw, 0.5rem);
}

/* 1. Kicker / Overline: Identifikasi Acara */
.cover-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}
.cover-kategori {
  font-family: var(--sans);
  font-size: clamp(0.72rem, 0.58rem + 0.35vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emas-muda);
  opacity: 0.88;
  line-height: 1.2;
}
.cover-acara {
  font-family: var(--sans);
  font-size: clamp(0.92rem, 0.76rem + 0.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emas-muda);
  line-height: 1.25;
}

/* 2. Ornamen Pemisah Emas */
.cover-teks .ornamen {
  justify-content: flex-start;
  margin: clamp(0.45rem, 1.2vh, 0.85rem) 0;
}
.cover-teks .ornamen span {
  width: clamp(1.8rem, 3.2vw, 4.5rem);
}
.cover-teks .ornamen svg {
  width: clamp(15px, 1.4vw, 22px);
  height: clamp(15px, 1.4vw, 22px);
}

/* 3. Hero Display Heading: Nama Panggilan (Script Font) */
.cover-nama {
  margin: 0.1rem 0;
  font-family: var(--tulis);
  font-size: clamp(4.4rem, 2.6rem + 5.5vw, 7.5rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--putih);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* 4. Subheading: Tanggal & Hari Acara (Opsi B - Miniatur Kalender Monogram) */
.cover-tanggal {
  margin: clamp(0.35rem, 0.9vh, 0.75rem) 0 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  width: fit-content;
  max-width: 100%;
}

.cover-tgl-monogram {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.55rem, 2.1rem + 1vw, 3.4rem);
  height: clamp(2.55rem, 2.1rem + 1vw, 3.4rem);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(232, 217, 160, 0.22) 0%, rgba(74, 44, 24, 0.5) 100%);
  border: 1.5px solid rgba(232, 217, 160, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.15rem + 0.6vw, 1.85rem);
  font-weight: 700;
  color: #fffdf5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  line-height: 1;
}

.cover-tgl-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  min-width: 0;
}

.cover-tgl-hari {
  font-family: var(--sans);
  font-size: clamp(0.68rem, 0.58rem + 0.26vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emas-muda);
  line-height: 1.2;
}

.cover-tgl-bulan {
  font-family: var(--serif);
  font-size: clamp(0.92rem, 0.8rem + 0.38vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fffdf5;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  line-height: 1.25;
}

/* 5. Kartu Undangan Tamu (Personal Greeting Recipient) */
.cover-tamu {
  margin-top: clamp(0.85rem, 2vh, 1.5rem);
  padding: clamp(0.48rem, 1.1vh, 0.8rem) clamp(0.65rem, 1.5vw, 1.6rem);
  border: 1px solid rgba(232, 217, 160, 0.32);
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  max-width: 24rem;
}
.cover-tamu span {
  display: block;
  font-size: clamp(0.6rem, 0.52rem + 0.22vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emas-muda);
  opacity: 0.92;
  line-height: 1.2;
}
.cover-tamu strong {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.82rem + 0.55vw, 1.4rem);
  font-weight: 600;
  color: var(--putih);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* 6. Tombol Buka Undangan (Primary Call To Action - Pill Button Elegan) */
.tombol-buka {
  margin-top: clamp(1.1rem, 2.5vh, 1.8rem);
  width: fit-content;
  max-width: 100%;
  min-height: clamp(2.65rem, 4.5vh, 2.9rem);
  padding: clamp(0.58rem, 1.2vh, 0.75rem) clamp(1.2rem, 2.5vw, 1.9rem);
  font-size: clamp(0.84rem, 0.76rem + 0.22vw, 0.95rem);
  font-weight: 600;
  background: linear-gradient(135deg, #fdf8ee 0%, #ecd9b3 100%);
  color: var(--sogan-2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.25s ease;
  cursor: pointer;
}
.tombol-buka:hover {
  background: #ffffff;
  color: var(--sogan);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36), 0 0 18px rgba(227, 205, 150, 0.4);
}
.tombol-buka:active {
  transform: translateY(0) scale(0.98);
}
.tombol-buka svg {
  width: 1.15em;
  height: 1.15em;
  transition: transform 0.25s ease;
}
.tombol-buka:hover svg {
  transform: translateY(-1px) scale(1.08);
}

/* ---------------- Breakpoint Responsif Teruji ---------------- */
/* Mode HP Portrait & Seluler (<= 767px) - Khusus Cover Buka Link */
@media (max-width: 767px) {
  .cover {
    place-items: center; /* Kontainer cover di tengah vertikal, seimbang di tengah pendopo Joglo */
  }

  .cover-isi {
    min-height: auto;
    align-items: center; /* Sejajar di tengah vertikal, tidak tenggelam di bawah */
    justify-content: center;
    gap: clamp(0.4rem, 2vw, 1rem);
    padding: clamp(1rem, 2.5vh, 2rem) clamp(0.6rem, 2.5vw, 1.25rem);
    margin: auto 0;
  }

  /* Sosok Morgan: Kolom kiri, tampil anggun dari kepala sampai sepatu dengan pudar halus sisi kanan & bawah */
  .cover-sosok {
    flex: 0 0 46%;
    width: 46%;
    max-width: 46%;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0;
    --sosok-tinggi: min(65vh, 490px);
    max-height: var(--sosok-tinggi);
  }

  .cover-sosok .sosok-img {
    aspect-ratio: 784 / 2413;
    max-height: var(--sosok-tinggi);
    width: 100%;
    height: auto;
    object-position: center right;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.7));
    -webkit-mask-image: 
      linear-gradient(to right, black 80%, rgba(0, 0, 0, 0.85) 90%, transparent 100%),
      linear-gradient(to bottom, black 88%, rgba(0, 0, 0, 0.75) 96%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image: 
      linear-gradient(to right, black 80%, rgba(0, 0, 0, 0.85) 90%, transparent 100%),
      linear-gradient(to bottom, black 88%, rgba(0, 0, 0, 0.75) 96%, transparent 100%);
    mask-composite: intersect;
  }

  /* Kolom Teks: Kolom kanan sejajar di tengah, leluasa melintas di atas area pudar sisi kanan */
  .cover-teks {
    flex: 1 1 54%;
    width: 54%;
    min-width: 0;
    align-self: center;
    padding-left: clamp(0.2rem, 1vw, 0.5rem);
    padding-bottom: 0;
    margin-left: clamp(-1rem, -2.5vw, -0.3rem); /* Masuk lembut ke atas area pudar sosok agar teks semakin lega */
    z-index: 2;
  }

  .cover-label {
    gap: 0.18rem;
  }

  .cover-kategori {
    font-size: clamp(0.66rem, 0.58rem + 0.32vw, 0.82rem);
    letter-spacing: 0.22em;
    line-height: 1.2;
  }

  .cover-acara {
    font-size: clamp(0.86rem, 0.75rem + 0.45vw, 1.15rem);
    letter-spacing: 0.12em;
    line-height: 1.25;
  }

  .cover-teks .ornamen {
    margin: clamp(0.25rem, 0.8vh, 0.45rem) 0;
  }

  .cover-teks .ornamen span {
    width: clamp(1.6rem, 4vw, 2.6rem);
  }

  .cover-teks .ornamen svg {
    width: 14px;
    height: 14px;
  }

  /* Nama Morgan: proporsional, pasti satu baris, megah & diperbesar */
  .cover-nama {
    font-size: clamp(3.2rem, 2.3rem + 5.2vw, 4.8rem);
    line-height: 1.0;
    margin: 0.12rem 0;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Tanggal & Hari: Opsi B Miniatur Kalender Tanggal */
  .cover-tanggal {
    margin-top: clamp(0.35rem, 0.8vh, 0.65rem);
    gap: 0.55rem;
  }

  .cover-tgl-monogram {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1.48rem;
    border-radius: 7px;
  }

  .cover-tgl-hari {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
  }

  .cover-tgl-bulan {
    font-size: 0.88rem;
    letter-spacing: 0.03em;
  }

  .cover-tamu {
    margin-top: clamp(0.5rem, 1.4vh, 0.9rem);
    padding: clamp(0.35rem, 0.8vh, 0.55rem) clamp(0.55rem, 1.5vw, 0.9rem);
    max-width: 100%;
  }

  .cover-tamu span {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .cover-tamu strong {
    font-size: clamp(0.88rem, 0.8rem + 0.3vw, 1.05rem);
    margin-top: 0.1rem;
    line-height: 1.25;
  }

  /* Tombol Buka Undangan: satu baris utuh, elegan, pas di jari jempol */
  .tombol-buka {
    margin-top: clamp(0.75rem, 1.8vh, 1.2rem);
    padding: 0.52rem 1.15rem;
    font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.88rem);
    min-height: auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
}

/* HP Sangat Sempit (< 360px, misal iPhone SE 1st gen / Galaxy Fold Cover 320px) */
@media (max-width: 360px) {
  .cover-isi {
    gap: 0.3rem;
    padding-inline: 0.4rem;
  }
  .cover-sosok {
    flex: 0 0 44%;
    width: 44%;
    max-width: 44%;
  }
  .cover-teks {
    flex: 1 1 56%;
    width: 56%;
    margin-left: -0.4rem;
  }
  .cover-nama {
    font-size: 2.8rem;
  }
  .tombol-buka {
    padding: 0.48rem 0.95rem;
    font-size: 0.75rem;
  }
}

/* Tablet (768px - 1023px): Skala proporsional transisi */
@media (min-width: 768px) and (max-width: 1023px) {
  .cover-isi {
    max-width: 50rem;
    padding-inline: 2rem;
    gap: 2rem;
  }
  .cover-sosok {
    --sosok-tinggi: min(86vh, 740px);
    padding-right: 1.5rem;
  }
  .cover-kategori {
    font-size: 0.88rem;
    letter-spacing: 0.24em;
  }
  .cover-acara {
    font-size: 1.2rem;
    letter-spacing: 0.14em;
  }
  .cover-nama {
    font-size: 5.2rem;
  }
  .cover-tgl-monogram {
    width: 3rem;
    height: 3rem;
    font-size: 1.65rem;
  }
  .cover-tamu strong {
    font-size: 1.25rem;
  }
  .cover-teks .tombol-buka {
    font-size: 0.88rem;
    padding: 0.6rem 1.6rem;
  }
}

/* Desktop & Laptop (>= 1024px): Komposisi menyatu, jarak intim, tipografi megah berwibawa */
@media (min-width: 1024px) {
  .cover-isi {
    max-width: 62rem;
    gap: 2rem;
    padding-inline: 2rem;
  }
  .cover-sosok {
    justify-content: flex-end;
    padding-right: 2.2rem; /* Geser sosok Morgan ke kiri */
  }
  .cover-teks {
    padding-left: 0.5rem;
  }
  .cover-kategori {
    font-size: 1.05rem;
    letter-spacing: 0.26em;
  }
  .cover-acara {
    font-size: 1.45rem;
    letter-spacing: 0.16em;
  }
  .cover-teks .ornamen {
    margin: 0.75rem 0;
  }
  .cover-teks .ornamen span {
    width: 4.5rem;
  }
  .cover-teks .ornamen svg {
    width: 22px;
    height: 22px;
  }
  .cover-nama {
    font-size: 7.2rem;
    line-height: 1.05;
  }
  .cover-tanggal {
    margin-top: 0.6rem;
    gap: 0.85rem;
  }
  .cover-tgl-monogram {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.85rem;
  }
  .cover-tgl-hari {
    font-size: 0.85rem;
  }
  .cover-tgl-bulan {
    font-size: 1.25rem;
  }
  .cover-tamu {
    margin-top: 1.35rem;
    padding: 0.8rem 1.6rem;
    max-width: 24rem;
  }
  .cover-tamu span {
    font-size: 0.8rem;
  }
  .cover-tamu strong {
    font-size: 1.4rem;
  }
  .cover-teks .tombol-buka {
    margin-top: 1.35rem;
    padding: 0.68rem 1.8rem;
    font-size: 0.92rem;
    min-height: 2.65rem;
  }
}

/* Mode HP Landscape / Layar Pendek (Tinggi <= 520px) */
@media (max-height: 520px) and (orientation: landscape) {
  .cover-isi {
    align-items: flex-end;
    padding: 0.4rem 1.25rem 0;
    gap: 1.25rem;
  }
  .cover-sosok {
    --sosok-tinggi: 100vh;
  }
  .cover-teks {
    align-self: center;
    padding-bottom: 0.45rem;
  }
  .cover-label {
    font-size: 0.65rem;
  }
  .cover-teks .ornamen {
    margin: 0.2rem 0;
  }
  .cover-nama {
    font-size: clamp(1.8rem, 5.5vh + 0.6rem, 2.6rem);
    line-height: 1.1;
  }
  .cover-tanggal {
    margin-top: 0.2rem;
    font-size: 0.82rem;
  }
  .cover-tamu {
    margin-top: 0.35rem;
    padding: 0.3rem 0.65rem;
  }
  .cover-tamu strong {
    font-size: 0.92rem;
  }
  .cover-teks .tombol-buka {
    margin-top: 0.4rem;
    padding: 0.4rem 0.95rem;
    min-height: 2.2rem;
    font-size: 0.8rem;
    width: fit-content;
  }
}

/* Ornamen pemisah: garis - bintang - garis */
.ornamen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 1rem 0;
}
.ornamen span {
  display: block;
  width: clamp(2rem, 12vw, 4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--emas));
}
.ornamen span:last-child { background: linear-gradient(to left, transparent, var(--emas)); }
.ornamen svg { width: 15px; height: 15px; fill: var(--emas); flex: none; }

@keyframes munculNaik {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   LAYOUT UNDANGAN
   Mobile/tablet : satu kolom
   Desktop       : panel foto sticky (kiri) + konten scroll (kanan)
   ============================================================ */
.undangan { display: block; }

.panel { display: none; }   /* muncul di >= 1024px */

.isi {
  width: 100%;
  max-width: var(--isi-lebar);
  margin: 0 auto;
  padding: 0 1.25rem calc(var(--nav-tinggi) + 1.5rem);
}

/* ---------------- Bagian (Section-by-Section) ---------------- */
.bagian {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0;
  border-bottom: 1px solid var(--garis-warna);
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-sizing: border-box;
}
.bagian > .reveal {
  width: 100%;
}
.bagian:last-child {
  border-bottom: 0;
  justify-content: space-between;
}

/* Bagian berukuran dinamis yang mungkin panjang di HP tetap bisa di-scroll internal tanpa terpotong */
.bagian-form,
.bagian-galeri,
.bagian-acara {
  min-height: 100dvh;
  height: auto;
}

/* Animasi masuk saat tergulir (dipicu js/undangan.js) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.tampil { opacity: 1; transform: none; }

.judul-kecil {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--emas-teks);
}

.judul {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
  font-weight: 600;
  color: var(--sogan);
}

/* ---------------- Sambutan Keluarga ---------------- */
.bagian-salam {
  padding-top: clamp(0.5rem, 1.5vh, 1.25rem);
  padding-bottom: calc(var(--nav-tinggi) + 1.25rem);
  justify-content: flex-start;
}

.salam-keluarga {
  position: relative;
  width: min(100%, 28rem);
  margin: 0 auto clamp(0.35rem, 1vh, 0.75rem);
  pointer-events: none;
}

.salam-keluarga-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(32vh, 245px);
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 10px 24px rgba(74, 44, 24, 0.2));
  -webkit-mask-image: linear-gradient(to bottom, black 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
}

.salam-konten .judul-kecil {
  margin-bottom: 0.2rem;
}

.salam-title {
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.65rem);
  font-weight: 700;
  color: var(--sogan);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.salam-konten .ornamen {
  margin: clamp(0.35rem, 0.9vh, 0.6rem) auto;
}

.salam-teks {
  max-width: 32rem;
  margin: 0 auto;
}

.paragraf {
  color: var(--teks-lembut);
  text-wrap: pretty;
  line-height: 1.58;
  font-size: clamp(0.9rem, 0.84rem + 0.16vw, 0.98rem);
  margin: 0 0 0.5rem;
}

.salam-pembuka-2 {
  margin-bottom: 0 !important;
}

.paragraf.kecil { font-size: .9rem; }

.garis {
  width: 56px;
  height: 1px;
  margin: 1.25rem auto;
  background: var(--emas);
}

/* ---------------- Makna & Renungan (Wujud Syukur) ---------------- */
.bagian-makna {
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(232, 217, 160, 0.15) 0%, transparent 70%);
}

.makna-wadah {
  width: 100%;
  max-width: 30rem;
  margin: 0.85rem auto 0;
  padding: 0 0.5rem;
}

.makna-kartu {
  position: relative;
  padding: clamp(1.8rem, 4vh, 2.6rem) clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--r-m);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 237, 219, 0.75) 100%);
  border: 1px solid rgba(206, 171, 95, 0.45);
  box-shadow: 0 8px 30px rgba(74, 44, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.makna-petik {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7vw, 4.5rem);
  line-height: 0.5;
  color: var(--emas);
  opacity: 0.5;
  margin: 0 auto 0.85rem;
}

.makna-kutipan {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--sogan);
  text-wrap: balance;
}

.makna-sumber {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emas-teks);
}

.makna-keluarga {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}

/* ---------------- Profil ---------------- */
.profil {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

.profil-badan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Di Mobile & Tablet Portrait: Sosok Morgan menjadi latar siluet / overlay artistik di samping teks */
.profil-sosok-samping {
  position: absolute;
  left: -1.25rem;
  bottom: -0.5rem;
  width: 15rem;
  max-width: 50%;
  height: 95%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  display: flex;
  align-items: flex-end;
}
.profil-sosok-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 784 / 2413;
  object-fit: contain;
  object-position: bottom left;
  -webkit-mask-image: linear-gradient(to right, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%), linear-gradient(to top, transparent 4%, black 25%);
  -webkit-mask-composite: destination-in;
  mask-image: linear-gradient(to right, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
}

.profil-konten {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

/* Foto profil anak di mobile diringkas menjadi medali lingkaran mewah agar teks muat 1 layar */
.profil-foto {
  width: clamp(5.2rem, 14vw, 7.5rem);
  height: clamp(5.2rem, 14vw, 7.5rem);
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--emas);
  box-shadow: 0 4px 16px rgba(74, 44, 24, 0.2);
}
.profil-foto .slot,
.profil-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profil-foto .slot-kosong {
  border-radius: 50%;
  height: 100%;
  padding: 0.5rem;
}
.profil-foto .slot-kosong .slot-file,
.profil-foto .slot-kosong .slot-ukuran {
  display: none;
}

.profil-nama {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.95rem);
  color: var(--sogan);
  line-height: 1.25;
}
.profil-panggil {
  margin: .25rem 0 0;
  font-family: var(--tulis);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.3rem);
  color: var(--emas-teks);
  line-height: 1.1;
}
.profil-ortu {
  margin: 0;
  color: var(--teks-lembut);
  line-height: 1.7;
  font-size: clamp(0.88rem, 0.82rem + 0.3vw, 0.98rem);
}
.profil-ortu strong { color: var(--teks); font-weight: 600; }
.profil-ortu .dan { color: var(--emas-teks); font-family: var(--serif); font-size: 1.15rem; }

.harapan {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.12rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--sogan-2);
  text-wrap: pretty;
}

/* Tablet (min-width: 640px) dan Desktop: Penyesuaian Ruang */
@media (min-width: 640px) {
  .profil {
    max-width: 36rem;
  }
  .profil-sosok-samping {
    left: -4rem;
    width: 18rem;
    opacity: 0.22;
  }
}

/* Desktop (min-width: 1024px): Sisi kiri sudah ada foto sticky, maka sosok samping disembunyikan agar bersih */
@media (min-width: 1024px) {
  .bagian-salam {
    padding-top: clamp(2.5rem, 6vh, 4.5rem);
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
    justify-content: center;
  }
  .salam-keluarga {
    display: none;
  }
  .profil-sosok-samping {
    display: none;
  }
  .profil-foto {
    width: 6.8rem;
    height: 6.8rem;
    margin-bottom: 1.1rem;
  }
}

/* ---------------- Hitung mundur ---------------- */
.hitung {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
  margin-top: 1.5rem;
}
.hitung-kotak {
  padding: .9rem .35rem;
  border: 1px solid var(--garis-warna);
  border-radius: var(--r);
  background: var(--putih);
  box-shadow: var(--bayang-s);
}
.hitung-kotak strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--sogan);
  font-variant-numeric: tabular-nums;
}
.hitung-kotak span {
  display: block;
  margin-top: .15rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}
.hitung-selesai {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--sogan-muda);
}

/* ---------------- Kartu acara (Terpadu) ---------------- */
.kartu {
  padding: 1.4rem;
  border: 1px solid var(--garis-warna);
  border-radius: var(--r-l);
  background: var(--putih);
  box-shadow: var(--bayang);
  text-align: left;
}

.kartu-terpadu {
  padding: 0;
  overflow: hidden;
  max-width: 32rem;
  margin: 0 auto;
  border-color: rgba(227, 205, 150, 0.45);
  box-shadow: 0 10px 30px rgba(74, 44, 24, 0.14);
}

.kartu-peta {
  position: relative;
  width: 100%;
  height: clamp(210px, 28vh, 280px);
  background: #1a1612;
  border-bottom: 1px solid var(--garis-warna);
}
.peta-satelit-canvas {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Kustomisasi Kontrol Zoom Leaflet agar senada tema Sogan Emas */
.leaflet-bar {
  border: 1px solid rgba(227, 205, 150, 0.5) !important;
  border-radius: var(--r-s) !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
.leaflet-bar a {
  background-color: rgba(35, 17, 7, 0.88) !important;
  color: var(--emas-muda) !important;
  border-bottom-color: rgba(227, 205, 150, 0.25) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  transition: all 0.2s ease;
}
.leaflet-bar a:hover {
  background-color: var(--sogan) !important;
  color: #fff !important;
}
.leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.55) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a {
  color: var(--emas-muda) !important;
}

.kartu-isi {
  padding: 1.15rem 1.4rem 1.35rem;
}

.kartu-baris {
  display: flex;
  gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--garis-warna);
}
.kartu-baris:first-child { padding-top: 0; }
.kartu-baris svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--emas-teks); margin-top: .2rem; }
.kartu-baris strong { display: block; color: var(--sogan); font-weight: 600; font-size: .95rem; }
.kartu-baris span { display: block; font-size: .84rem; color: var(--teks-lembut); line-height: 1.45; }

.kartu-aksi {
  padding-top: 0.95rem;
}
.kartu-aksi .tombol-rute {
  width: 100%;
  min-height: 2.85rem;
  padding: .65rem 1.2rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  box-shadow: 0 4px 14px rgba(74, 44, 24, 0.22);
}

/* ---------------- Galeri ---------------- */
/* Di layar sempit galeri jadi deretan yang digeser menyamping, bukan
   grid 2 kolom - supaya media potret (4:5 dan 9:16) tidak mengecil
   jadi perangko. Mulai tablet barulah tersusun 3 kolom. */
.galeri {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 0 15% .75rem;
  margin-inline: -1.25rem;          /* membentang sampai tepi layar */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.galeri > * { scroll-snap-align: center; }
.galeri-video {
  grid-auto-columns: 58%;
  padding: 0 21% .75rem;
}

.galeri-item {
  margin: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  box-shadow: var(--bayang-s);
  background: var(--gading-2);
}
.galeri-item .slot-kosong { border-radius: var(--r-s); }

.galeri-sub {
  margin: 1.75rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}
.galeri-catatan {
  margin: .75rem 0 0;
  font-size: .78rem;
  color: var(--teks-lembut);
}

/* Video: latar gelap supaya bilah kontrol bawaan peramban tetap
   terbaca sebelum frame pertama muncul. */
.slot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1c140d;
}

/* ============================================================
   FORM
   ============================================================ */
.form {
  margin-top: 1.5rem;
  padding: 1.4rem;
  border: 1px solid var(--garis-warna);
  border-radius: var(--r-l);
  background: var(--putih);
  box-shadow: var(--bayang);
  text-align: left;
}

.bidang { margin-bottom: 1.1rem; }
.bidang > label,
.bidang > .label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sogan);
}
.opsional { font-weight: 400; color: var(--teks-lembut); }

.form input[type="text"],
.form input[type="number"],
.form input[type="password"],
.form textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.4px solid var(--garis-warna);
  border-radius: var(--r-s);
  background: var(--gading);
  font: inherit;
  font-size: .95rem;
  color: var(--teks);
  transition: border-color .18s ease, background-color .18s ease;
}
.form textarea { resize: vertical; min-height: 6rem; line-height: 1.65; }
.form input:focus, .form textarea:focus {
  border-color: var(--sogan-muda);
  background: var(--putih);
  outline: none;
}
.form input.salah, .form textarea.salah { border-color: #c0392b; }

.bantuan { display: block; margin-top: .3rem; font-size: .76rem; color: var(--teks-lembut); }
.galat   { display: none; margin-top: .3rem; font-size: .78rem; color: #c0392b; font-weight: 500; }
.galat.tampil { display: block; }

/* Pilihan kehadiran */
.pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pil { position: relative; cursor: pointer; }
.pil input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pil span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .5rem .75rem;
  border: 1.4px solid var(--garis-warna);
  border-radius: var(--r-s);
  background: var(--gading);
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
  transition: all .18s ease;
}
/* "Hadir" melebar penuh selagi kolom jumlah tersembunyi, lalu menyusut
   jadi separuh begitu jumlah muncul di sebelahnya. Kelasnya dipasang
   dari JS, bukan :has(), supaya aman di peramban Android lawas. */
.pil-hadir { grid-column: 1 / -1; }
.pilihan.dengan-jumlah .pil-hadir { grid-column: auto; }

/* Kotak jumlah menempati satu sel grid, tingginya menyamai tombol pilihan */
.pil-jumlah { display: flex; }
.pil-jumlah .angka { display: flex; width: 100%; }
.pil-jumlah .angka button { flex: none; }
.pil-jumlah .angka input { flex: 1 1 auto; width: auto !important; min-width: 0; }
.pil input:checked + span {
  border-color: var(--sogan);
  background: var(--sogan);
  color: var(--gading);
  font-weight: 600;
}
.pil input:focus-visible + span { outline: 2px solid var(--emas); outline-offset: 2px; }
.pil:hover span { border-color: var(--sogan-muda); }

/* Penambah jumlah orang */
.angka {
  display: inline-flex;
  align-items: center;
  border: 1.4px solid var(--garis-warna);
  border-radius: var(--r-s);
  background: var(--gading);
  overflow: hidden;
}
.angka button {
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  background: transparent;
  color: var(--sogan);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.angka button:hover { background: var(--gading-2); }
.angka input {
  width: 3.5rem !important;
  border: 0 !important;
  border-left: 1.4px solid var(--garis-warna) !important;
  border-right: 1.4px solid var(--garis-warna) !important;
  border-radius: 0 !important;
  background: var(--putih) !important;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.angka input::-webkit-outer-spin-button,
.angka input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#tombol-kirim { width: 100%; margin-top: .25rem; }

.pemuat {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(246, 238, 220, .35);
  border-top-color: var(--gading);
  border-radius: 50%;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

.pesan-form {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--r-s);
  font-size: .88rem;
  font-weight: 500;
}
.pesan-form.sukses { background: #e9f0e2; color: #4e6b35; border: 1px solid #c7d6b4; }
.pesan-form.gagal  { background: #fdecea; color: #9c2d20; border: 1px solid #f3c4bd; }

/* ---------------- Kartu QR di halaman undangan ---------------- */
.tiket-kartu {
  margin-top: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 1.6px dashed var(--emas);
  border-radius: var(--r-l);
  background: var(--putih);
  box-shadow: var(--bayang);
  animation: munculNaik .55s ease both;
}
.tiket-judul {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sogan);
}
.tiket-ket { margin: .35rem 0 1rem; font-size: .84rem; color: var(--teks-lembut); }
.tiket-qr {
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  padding: .75rem;
  width: fit-content;
  border-radius: var(--r-s);
  background: var(--putih);
  box-shadow: var(--bayang-s);
}
.tiket-qr img, .tiket-qr canvas { display: block; }
.tiket-kode {
  margin: 0 0 1rem;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--sogan);
}

/* ============================================================
   SLIDER UCAPAN
   ============================================================ */
.slider-ucapan {
  width: 100%;
  max-width: 100%;
  margin-top: 1.5rem;
  padding-bottom: 2.25rem;
  overflow: hidden;
}
.slider-ucapan .swiper-slide {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.ucapan-kartu {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  min-height: 11rem;
  padding: 1.4rem;
  border: 1px solid var(--garis-warna);
  border-radius: var(--r-l);
  background: var(--putih);
  box-shadow: var(--bayang-s);
  text-align: left;
}
.ucapan-atas { display: flex; align-items: center; gap: .7rem; }
.ucapan-inisial {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--sogan);
  color: var(--emas-muda);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
}
.ucapan-nama {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--sogan);
  line-height: 1.3;
}
.ucapan-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  color: var(--teks-lembut);
}
.lencana {
  padding: .08rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
}
.lencana.hadir  { background: #e9f0e2; color: #4e6b35; }
.lencana.tidak_hadir { background: #f1f0ee; color: #70736e; }
.lencana.ragu   { background: #fdf4e3; color: #8a6a14; }

.ucapan-pesan {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--teks);
  white-space: pre-line;
  text-wrap: pretty;
}
.ucapan-kosong {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--teks-lembut);
}
.ucapan-kosong p { margin: 0; }

.slider-ucapan .swiper-pagination-bullet { background: var(--sogan); opacity: .25; }
.slider-ucapan .swiper-pagination-bullet-active { opacity: 1; background: var(--emas); }

.slider-nav { display: flex; justify-content: center; gap: .6rem; margin-top: .5rem; }
.nav-bulat {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.4px solid var(--garis-warna);
  border-radius: 50%;
  background: var(--putih);
  color: var(--sogan);
  cursor: pointer;
  transition: all .18s ease;
}
.nav-bulat svg { width: 1.1rem; height: 1.1rem; }
.nav-bulat:hover { background: var(--sogan); color: var(--gading); border-color: var(--sogan); }
.nav-bulat:disabled { opacity: .35; cursor: not-allowed; }

/* ---------------- Penutup ---------------- */
.keluarga-label { margin: 1.75rem 0 .2rem; font-size: .84rem; color: var(--teks-lembut); }
.keluarga-nama {
  margin: 0;
  font-family: var(--tulis);
  font-size: clamp(1.7rem, 1.2rem + 2.5vw, 2.4rem);
  line-height: 1.35;
  color: var(--sogan);
}

/* Turut mengundang */
.turut {
  margin-top: 2.25rem;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--garis-warna);
  border-bottom: 1px solid var(--garis-warna);
}
.turut-label {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--emas-teks);
}
.turut-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.turut-daftar li {
  font-family: var(--serif);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.15rem);
  font-weight: 600;
  color: var(--sogan);
  text-wrap: balance;
}
.footer {
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--garis-warna);
  margin-top: 2.5rem;
}
.footer p { margin: 0; font-size: .76rem; color: var(--teks-lembut); }

/* ============================================================
   NAVIGASI SAMPING / SIDE DOT NAVIGATOR (DESKTOP)
   ============================================================ */
.nav-titik {
  display: none;
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  flex-direction: column;
  gap: 0.85rem;
}

.titik-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  padding: 4px;
}
.titik-item::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emas-teks);
  opacity: 0.4;
  transition: all 0.25s ease;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.titik-item:hover::after {
  opacity: 0.85;
  transform: scale(1.3);
}
.titik-item.aktif::after {
  opacity: 1;
  background: var(--sogan);
  width: 10px;
  height: 22px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(74, 44, 24, 0.4);
}

.titik-label {
  position: absolute;
  right: calc(100% + 8px);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-s);
  background: rgba(35, 17, 7, 0.92);
  color: var(--emas-muda);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: all 0.2s ease;
  box-shadow: var(--bayang-s);
}
.titik-item:hover .titik-label {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   NAVIGASI BAWAH + TOMBOL MUSIK
   ============================================================ */
.nav-bawah {
  position: fixed;
  left: 50%;
  bottom: calc(.65rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  width: min(94vw, 24rem);
  transform: translateX(-50%) translateY(140%);
  padding: .32rem .45rem;
  border: 1px solid rgba(227, 205, 150, 0.35);
  border-radius: 999px;
  background: rgba(253, 248, 238, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(45, 23, 10, 0.12);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
body.dibuka .nav-bawah { transform: translateX(-50%) translateY(0); }

.nav-bawah a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 2.2rem;
  height: 2.35rem;
  border-radius: 999px;
  color: var(--sogan-2);
  opacity: 0.75;
  text-decoration: none;
  transition: all .2s ease;
}
.nav-bawah a svg {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform .2s ease;
}
.nav-bawah a:hover svg {
  transform: scale(1.15);
  opacity: 1;
}
.nav-bawah a.aktif {
  background: rgba(74, 44, 24, 0.88);
  color: var(--emas-muda);
  opacity: 1;
  box-shadow: 0 2px 10px rgba(74, 44, 24, 0.28);
}
.nav-bawah a.aktif svg {
  transform: scale(1.08);
}

.tombol-musik {
  position: fixed;
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--garis-warna);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  color: var(--sogan);
  box-shadow: var(--bayang);
  cursor: pointer;
}
.tombol-musik svg { width: 1.2rem; height: 1.2rem; }
.tombol-musik.berputar svg { animation: putar 3.5s linear infinite; }
.tombol-musik.diam { color: var(--teks-lembut); opacity: .65; }

/* ============================================================
   HALAMAN TIKET (tiket.php)
   ============================================================ */
.halaman-tiket {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(42, 122, 92, .18), transparent 55%),
    var(--sogan);
}
.tiket-bungkus { width: 100%; max-width: 24rem; }

.tiket {
  border-radius: var(--r-l);
  background: var(--putih);
  box-shadow: var(--bayang-l);
  overflow: hidden;
}
.tiket-atas {
  padding: 1.75rem 1.5rem 1.5rem;
  background: linear-gradient(160deg, var(--sogan), var(--sogan-2));
  color: var(--gading);
  text-align: center;
}
.tiket-label {
  margin: 0 0 .5rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emas-muda);
}
.tiket-nama {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
}
.tiket-sub { margin: .4rem 0 0; font-size: .84rem; color: var(--emas-muda); }

/* Gerigi pemisah seperti tiket sungguhan */
.tiket-gerigi {
  height: 18px;
  background:
    radial-gradient(circle at 9px 9px, transparent 8px, var(--putih) 8px) repeat-x 0 0 / 18px 18px;
  margin-top: -9px;
  position: relative;
  z-index: 2;
}

.tiket-bawah { padding: 1.5rem; text-align: center; }
.tiket-bawah .tombol { width: 100%; margin-top: .5rem; }
.tiket-qr.besar { padding: 1rem; border: 1px solid var(--garis-warna); }
.tiket-sudah {
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border-radius: var(--r-s);
  background: #e9f0e2;
  border: 1px solid #c7d6b4;
  font-size: .84rem;
  color: #4e6b35;
}
.tiket-sudah strong { display: block; }

.tiket-info {
  display: grid;
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border-radius: var(--r-s);
  background: var(--gading);
  text-align: left;
}
.tiket-info span {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}
.tiket-info strong { color: var(--sogan); font-weight: 600; font-size: .92rem; }

.tautan-kecil {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--teks-lembut);
}

/* ============================================================
   RESPONSIF
   ============================================================ */

/* ---- Tablet: kolom lebih lega, galeri 3 kolom ---- */
@media (min-width: 640px) {
  :root { --isi-lebar: 38rem; }

  .isi { padding-inline: 2rem; }

  /* Tablet ke atas: galeri berhenti menggeser, jadi 3 kolom rapi */
  .galeri {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: .75rem;
    padding: 0;
    margin-inline: 0;
    overflow: visible;
  }
  .form, .kartu { padding: 1.75rem; }
  .hitung { gap: .75rem; }
  .nav-bawah { width: min(88vw, 26rem); }
}

/* ---- Desktop: panel foto sticky di kiri ---- */
@media (min-width: 1024px) {
  :root { --isi-lebar: 36rem; }

  .undangan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }

  .panel {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--sogan);
  }
  .panel-gambar { position: absolute; inset: 0; }
  .panel-gambar .panel-img { width: 100%; height: 100%; object-fit: cover; }
  .panel-gambar .slot-kosong {
    height: 100%;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    background-color: var(--sogan-2);
    color: var(--emas-muda);
  }
  .panel-gambar .slot-kosong .slot-ukuran { color: var(--emas-muda); opacity: .75; }
  .panel-tirai {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(74, 44, 24, .95) 0%, rgba(74, 44, 24, .25) 55%, rgba(74, 44, 24, .55) 100%);
  }
  .panel-isi {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 1.8rem 2.4rem;
    text-align: center;
    color: var(--gading);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(45, 23, 10, 0.45) 30%,
      rgba(45, 23, 10, 0.88) 60%,
      rgba(35, 17, 7, 0.98) 100%
    );
  }
  .panel-sosok {
    position: relative;
    width: 100%;
    max-width: 32rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .panel-keluarga-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 54vh;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.48));
  }
  .panel-isi .ornamen {
    margin: 0.85rem 0 0.5rem;
  }
  .panel-isi .ornamen span {
    width: 3.5rem;
    opacity: 0.75;
  }
  .panel-isi .ornamen svg {
    width: 13px;
    height: 13px;
    opacity: 0.9;
  }
  .panel-label {
    margin: 0 0 .35rem;
    font-size: .75rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--emas-muda);
  }
  .panel-nama {
    font-family: var(--tulis);
    font-size: clamp(3.2rem, 4vw, 4.5rem);
    font-weight: 400;
    color: var(--putih);
    line-height: 1.1;
  }
  .panel-tanggal {
    margin: .45rem 0 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    letter-spacing: .06em;
    color: var(--emas-muda);
  }

  .isi { padding-bottom: 3rem; }

  /* Di desktop panel kiri sudah jadi penanda tempat, nav bawah ganti ke nav-titik */
  .nav-bawah { display: none; }
  body.dibuka .nav-titik { display: flex; }
  .tombol-musik { bottom: 1.5rem; }

  .cover { place-items: end center; }
}

/* ---- Layar sangat lebar: jaga agar tidak melebar berlebihan ---- */
@media (min-width: 1600px) {
  :root { --isi-lebar: 40rem; }
  .undangan { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
}

/* ---- Cetak: buang elemen interaktif ---- */
@media print {
  .cover, .nav-bawah, .tombol-musik, .peta, .slider-nav, .form { display: none !important; }
  body { background: #fff; }
  .panel { display: none !important; }
  .undangan { display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}