/* ==========================================================================
   Undangan Pernikahan Arifah & Parmono
   Tema: elegan floral islami, krem gading + emas.

   Undangan ini sengaja TANPA FOTO — peran visual yang biasanya dipegang foto
   mempelai digantikan ornamen SVG, monogram inisial, dan tipografi.
   ========================================================================== */

:root {
  --gading: #fdfaf4;
  --gading-tua: #f6efe2;
  --emas: #b08d57;
  --emas-muda: #d4b483;
  --emas-pucat: #e8d9bf;
  --tinta: #4a3f35;
  --tinta-lembut: #7a6a5a;
  --hijau-sage: #8a9a7b;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --skrip: 'Parisienne', cursive;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Font Arab terpisah: font latin di atas tidak punya glyph Arab sama sekali,
     jadi ayat & doa wajib memakai ini agar tampil seragam di semua perangkat. */
  --arab: 'Amiri', 'Traditional Arabic', serif;

  --lebar-konten: 480px;
  --transisi: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--gading);
  color: var(--tinta);
  line-height: 1.75;
  font-size: 15px;
  overflow-x: hidden;
}

/* Undangan ini dirancang mobile-first (hampir semua tamu membukanya dari
   WhatsApp di HP). Di layar besar kontennya tetap selebar HP dan dipusatkan,
   dengan latar bertekstur di kiri-kanan — bukan direntangkan melebar. */
.bingkai {
  max-width: var(--lebar-konten);
  margin: 0 auto;
  background: var(--gading);
  position: relative;
  box-shadow: 0 0 60px rgba(74, 63, 53, 0.08);
  min-height: 100vh;
}

/* ── Tipografi ───────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.nama-skrip {
  font-family: var(--skrip);
  color: var(--emas);
  font-weight: 400;
}

.judul-bagian {
  font-family: var(--serif);
  font-size: 1.9rem;
  text-align: center;
  color: var(--tinta);
  margin-bottom: 0.5rem;
}

.label-kecil {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--emas);
  text-align: center;
  display: block;
  margin-bottom: 0.75rem;
}

.teks-tengah { text-align: center; }

/* ── Bagian / section ────────────────────────────────────────────────────── */

.bagian {
  padding: 4.5rem 1.75rem;
  position: relative;
}

.bagian--gading { background: var(--gading-tua); }

/* Ornamen pembatas antar bagian, menggantikan foto sebagai jeda visual */
.pembatas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem auto 2rem;
  max-width: 220px;
}

.pembatas::before,
.pembatas::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emas-muda));
}

.pembatas::after { background: linear-gradient(270deg, transparent, var(--emas-muda)); }

.pembatas svg { width: 18px; height: 18px; fill: var(--emas); flex-shrink: 0; }

/* ── Sampul (layar pembuka) ──────────────────────────────────────────────── */

.sampul {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--gading);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  max-width: var(--lebar-konten);
  margin: 0 auto;
  transition: opacity var(--transisi), visibility var(--transisi);
}

.sampul--tertutup {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ornamen sudut — dipakai di sampul & penutup */
.ornamen-sudut {
  position: absolute;
  width: 110px;
  height: 110px;
  opacity: 0.45;
  pointer-events: none;
}

.ornamen-sudut svg { width: 100%; height: 100%; fill: var(--emas-muda); }
.ornamen-sudut--ka-atas { top: 0; right: 0; }
.ornamen-sudut--ki-atas { top: 0; left: 0; transform: scaleX(-1); }
.ornamen-sudut--ka-bawah { bottom: 0; right: 0; transform: scaleY(-1); }
.ornamen-sudut--ki-bawah { bottom: 0; left: 0; transform: scale(-1); }

.sampul__label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--emas);
  margin-bottom: 1.75rem;
}

.sampul__nama {
  font-family: var(--skrip);
  font-size: clamp(3rem, 15vw, 4.25rem);
  color: var(--emas);
  line-height: 1.1;
  margin: 0.25rem 0;
}

.sampul__dan {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--tinta-lembut);
  font-style: italic;
  margin: 0.35rem 0;
}

.sampul__tanggal {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--tinta);
  margin: 1.75rem 0 2.25rem;
}

.sampul__kepada {
  font-size: 0.8rem;
  color: var(--tinta-lembut);
  margin-bottom: 0.35rem;
}

.sampul__tamu {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--tinta);
  margin-bottom: 2.25rem;
  word-break: break-word;
}

/* ── Tombol ──────────────────────────────────────────────────────────────── */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 2.25rem;
  border: 1px solid var(--emas);
  border-radius: 999px;
  background: transparent;
  color: var(--emas);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.tombol:hover,
.tombol:focus-visible { background: var(--emas); color: var(--gading); }

.tombol--isi { background: var(--emas); color: var(--gading); }
.tombol--isi:hover { background: var(--tinta); border-color: var(--tinta); }

.tombol--kecil { padding: 0.6rem 1.4rem; font-size: 0.7rem; }

.tombol svg { width: 14px; height: 14px; fill: currentColor; }

/* ── Bagian pembuka (salam) ──────────────────────────────────────────────── */

.bismillah {
  font-family: var(--arab);
  font-size: 1.75rem;
  line-height: 2;
  color: var(--emas);
  text-align: center;
  margin-bottom: 1.5rem;
  direction: rtl;
}

.salam { font-size: 0.95rem; color: var(--tinta); margin-bottom: 1rem; }

.paragraf { color: var(--tinta-lembut); text-align: center; font-size: 0.92rem; }

/* ── Mempelai ────────────────────────────────────────────────────────────── */

.mempelai { text-align: center; }

.mempelai + .mempelai { margin-top: 3rem; }

/* Monogram inisial menggantikan foto mempelai */
.monogram {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border: 1px solid var(--emas-muda);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--gading);
}

.monogram::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--emas-pucat);
  border-radius: 50%;
}

.monogram span {
  font-family: var(--skrip);
  font-size: 2.75rem;
  color: var(--emas);
  line-height: 1;
  padding-top: 0.35rem;
}

.mempelai__nama {
  font-family: var(--serif);
  font-size: 1.85rem;
  color: var(--tinta);
  margin-bottom: 0.4rem;
}

.mempelai__anak-ke {
  font-size: 0.82rem;
  color: var(--emas);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.mempelai__ortu {
  font-size: 0.88rem;
  color: var(--tinta-lembut);
  line-height: 1.6;
}

.mempelai__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--emas);
  text-decoration: none;
}

.mempelai__ig svg { width: 14px; height: 14px; fill: currentColor; }

.simbol-dan {
  font-family: var(--skrip);
  font-size: 3rem;
  color: var(--emas-muda);
  text-align: center;
  margin: 2rem 0 1rem;
  line-height: 1;
}

/* ── Ayat & doa ──────────────────────────────────────────────────────────── */

.ayat { text-align: center; margin-top: 2.5rem; }

.ayat__arab {
  font-family: var(--arab);
  font-size: 1.4rem;
  /* Naskh butuh leading lebih lega dari font latin: harakat di atas dan
     bawah baris akan bertabrakan antarbaris kalau terlalu rapat. */
  line-height: 2.4;
  color: var(--tinta);
  direction: rtl;
  margin-bottom: 1.25rem;
}

.ayat__terjemah {
  font-size: 0.87rem;
  color: var(--tinta-lembut);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.ayat__sumber {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--emas);
  text-transform: uppercase;
}

/* ── Hitung mundur ───────────────────────────────────────────────────────── */

.hitung-mundur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  max-width: 340px;
  margin: 0 auto;
}

.hitung-mundur__kotak {
  background: var(--gading);
  border: 1px solid var(--emas-pucat);
  border-radius: 6px;
  padding: 0.9rem 0.3rem;
  text-align: center;
}

.bagian--gading .hitung-mundur__kotak { background: var(--gading); }

.hitung-mundur__angka {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--emas);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.hitung-mundur__satuan {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin-top: 0.4rem;
  display: block;
}

.hitung-mundur__selesai {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--emas);
  font-style: italic;
}

/* ── Acara ───────────────────────────────────────────────────────────────── */

.acara {
  background: var(--gading);
  border: 1px solid var(--emas-pucat);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.bagian--gading .acara { background: var(--gading); }

.acara + .acara { margin-top: 1.5rem; }

.acara__nama {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--emas);
  margin-bottom: 1rem;
}

.acara__baris {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--tinta);
  margin-bottom: 0.4rem;
}

.acara__baris svg { width: 14px; height: 14px; fill: var(--emas); flex-shrink: 0; }

.acara__tempat {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--tinta);
  margin: 0.9rem 0 0.25rem;
}

.acara__alamat { font-size: 0.85rem; color: var(--tinta-lembut); margin-bottom: 1.25rem; }

/* ── Formulir (RSVP & ucapan) ────────────────────────────────────────────── */

.formulir { max-width: 380px; margin: 0 auto; }

.kolom { margin-bottom: 1.1rem; }

.kolom__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin-bottom: 0.45rem;
}

.kolom input[type='text'],
.kolom select,
.kolom textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--tinta);
  background: var(--gading);
  border: 1px solid var(--emas-pucat);
  border-radius: 5px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s ease;
}

.kolom input:focus,
.kolom select:focus,
.kolom textarea:focus {
  outline: none;
  border-color: var(--emas);
}

.kolom textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* Pilihan hadir / tidak hadir */
.pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.pilihan label { display: block; cursor: pointer; }

.pilihan input { position: absolute; opacity: 0; pointer-events: none; }

/* Teks pilihan ditulis sekali saja di dalam <span>, dan span itu sendiri yang
   diberi kotak/border — bukan label yang diberi teks lalu ditimpa span
   berposisi absolute. Cara lama membuat teksnya ada dua kali di DOM: tertutup
   secara visual, tapi pembaca layar membacanya dobel ("Hadir Hadir"). */
.pilihan span {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--emas-pucat);
  border-radius: 5px;
  color: var(--tinta-lembut);
  background: var(--gading);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pilihan input:checked + span {
  background: var(--emas);
  border-color: var(--emas);
  color: var(--gading);
}

/* Fokus keyboard harus tetap kelihatan walau input aslinya disembunyikan */
.pilihan input:focus-visible + span { outline: 2px solid var(--emas); outline-offset: 2px; }

/* ── Daftar ucapan ───────────────────────────────────────────────────────── */

.ucapan-daftar {
  margin-top: 2rem;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.ucapan {
  background: var(--gading);
  border: 1px solid var(--emas-pucat);
  border-left: 3px solid var(--emas-muda);
  border-radius: 5px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
}

.ucapan__nama {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--tinta);
  margin-bottom: 0.15rem;
}

.ucapan__waktu {
  font-size: 0.7rem;
  color: var(--emas);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.ucapan__pesan {
  font-size: 0.88rem;
  color: var(--tinta-lembut);
  line-height: 1.65;
  /* Ucapan tamu bisa berisi kata sangat panjang tanpa spasi — tanpa ini
     layout bisa melebar dan merusak tampilan di HP. */
  overflow-wrap: anywhere;
}

.ucapan-kosong {
  text-align: center;
  color: var(--tinta-lembut);
  font-style: italic;
  font-size: 0.88rem;
  padding: 1.5rem 0;
}

/* Statistik kehadiran */
.statistik {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.statistik__item { text-align: center; }

.statistik__angka {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--emas);
  display: block;
  line-height: 1;
}

.statistik__label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin-top: 0.35rem;
  display: block;
}

/* Pesan hasil kirim form */
.pesan-hasil {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  display: none;
}

.pesan-hasil--tampil { display: block; }
.pesan-hasil--sukses { background: #eef3ea; color: #4a6741; border: 1px solid var(--hijau-sage); }
.pesan-hasil--galat { background: #faeeee; color: #8c4a4a; border: 1px solid #c98a8a; }

/* ── Penutup ─────────────────────────────────────────────────────────────── */

.penutup { position: relative; padding: 5rem 1.75rem; text-align: center; }

.penutup__nama {
  font-family: var(--skrip);
  font-size: 3rem;
  color: var(--emas);
  line-height: 1.15;
  margin-top: 1.5rem;
}

.kredit {
  text-align: center;
  padding: 1.75rem 1.5rem 2.5rem;
  font-size: 0.7rem;
  color: var(--tinta-lembut);
  letter-spacing: 0.06em;
  background: var(--gading-tua);
}

.kredit a { color: var(--emas); text-decoration: none; }

/* ── Pemutar musik ───────────────────────────────────────────────────────── */

.musik {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--emas-muda);
  background: var(--gading);
  color: var(--emas);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(74, 63, 53, 0.14);
  transition: transform 0.25s ease;
}

/* Ditampilkan lewat JS hanya setelah undangan dibuka */
.musik--tampil { display: flex; }

.musik:hover { transform: scale(1.08); }

.musik svg { width: 18px; height: 18px; fill: currentColor; }

.musik__ikon-jeda { display: none; }
.musik--main .musik__ikon-main { display: none; }
.musik--main .musik__ikon-jeda { display: block; }

/* Piringan berputar saat lagu diputar */
.musik--main svg { animation: putar 4s linear infinite; }

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

/* ── Animasi muncul saat di-scroll ───────────────────────────────────────── */

.muncul {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.muncul--tampil { opacity: 1; transform: none; }

/* Hormati preferensi sistem: matikan animasi untuk yang sensitif gerakan
   (vestibular disorder) — termasuk piringan musik yang berputar terus. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .muncul { opacity: 1; transform: none; transition: none; }
  .musik--main svg { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ── Layar lebar ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  body {
    background:
      radial-gradient(circle at 20% 30%, rgba(212, 180, 131, 0.08), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(138, 154, 123, 0.07), transparent 45%),
      var(--gading-tua);
  }

  .musik { right: calc(50% - var(--lebar-konten) / 2 + 1.5rem); }
}