/* ==========================================================================
   NEO-BRUTALISM COMPONENT LIBRARY
   Built on tokens.css. Reused by design-system.html and (Step 1.3) undangan.html.
   ========================================================================== */

/* --- Layout helpers --- */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.rotate-sm {
  transform: rotate(-1.5deg);
}

.rotate-sm--r {
  transform: rotate(1.5deg);
}

/* --- Focus (never remove without replacement) --- */
:focus-visible {
  outline: var(--border-width) solid var(--color-accent-2);
  outline-offset: 3px;
}

/* --- Eyebrow / mono label --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* --- Section header pattern --- */
.section-header {
  margin-bottom: var(--space-6);
}

.section-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, var(--text-3xl));
  line-height: 1;
  margin: var(--space-1) 0 0;
  overflow-wrap: break-word;
}

.section-header__bar {
  width: 4rem;
  height: var(--border-width-lg);
  background: var(--color-accent);
  margin-top: var(--space-2);
}

/* --- Buttons --- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transform: translate(0, 0);
  transition: transform var(--duration-fast) var(--ease-brutal),
    box-shadow var(--duration-fast) var(--ease-brutal);
}

.btn:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-hard-sm);
}

.btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 0 var(--color-ink);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: var(--shadow-hard);
  transform: translate(0, 0);
}

.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
}

.btn--secondary {
  --btn-bg: var(--color-accent-2);
  --btn-fg: var(--color-on-accent);
}

.btn--ghost {
  --btn-bg: transparent;
}

.btn[data-loading="true"] {
  cursor: wait;
  position: relative;
  color: transparent;
}

.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Card --- */
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-lg);
  padding: var(--space-4);
}

/* --- Badge (sticker) --- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: var(--border-width) solid var(--color-ink);
  padding: 0.35em 0.7em;
  transform: rotate(-2deg);
}

/* --- Form field --- */
.field {
  display: block;
  margin-bottom: var(--space-3);
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
}

.field__input {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-2);
  transition: box-shadow var(--duration-base) var(--ease-brutal);
}

.field__input:focus-visible {
  box-shadow: var(--shadow-hard-sm);
  outline-offset: 2px;
}

/* --- Scroll reveal (simple, respects reduced-motion via tokens.css) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-brutal),
    transform var(--duration-slow) var(--ease-brutal);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Decorative geometric marks (SVG, no raster assets) --- */
.mark {
  display: inline-block;
  line-height: 0;
  color: var(--color-ink);
}

/* ==========================================================================
   UNDANGAN.HTML — page-level composition (Step 1.3, static: no scroll-motion
   or countdown-flip yet, that lands in Step 1.4)
   ========================================================================== */

/* --- Cover / gate --- */
.cover {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg);
  text-align: center;
  transition: transform var(--duration-slow) var(--ease-brutal),
    opacity var(--duration-slow) var(--ease-brutal);
}

.cover.is-exiting {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.cover.is-hidden {
  display: none;
}

.cover__inner {
  max-width: 640px;
}

.cover__names {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 12vw, var(--text-5xl));
  line-height: 1;
  margin: var(--space-3) 0;
  overflow-wrap: break-word;
}

.cover__names em {
  font-style: normal;
  color: var(--color-accent-2);
}

.cover__date-badge {
  margin: 0 auto var(--space-4);
}

.cover__guest-box {
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0 auto var(--space-4);
  display: inline-block;
  transform: rotate(-1deg);
}

.cover__guest-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
  margin: 0;
}

.cover__guest-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0;
}

/* --- Content wrapper (revealed after cover) --- */
#konten.is-hidden {
  display: none;
}

.section {
  padding: var(--space-8) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-ink);
}

.section:last-of-type {
  border-bottom: none;
}

/* --- Acara (akad / resepsi) --- */
.acara-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .acara-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.acara-card {
  text-align: center;
}

.acara-card .eyebrow {
  justify-content: center;
  margin-bottom: var(--space-2);
}

.acara-hari-tanggal {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
}

.acara-jam {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.acara-garis {
  width: 2.5rem;
  height: var(--border-width);
  background: var(--color-ink);
  margin: 0 auto var(--space-3);
}

.acara-tempat {
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.acara-alamat {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

/* --- Countdown --- */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  max-width: 640px;
  margin-inline: auto;
}

.countdown-box {
  text-align: center;
  padding: var(--space-3) var(--space-1);
}

.countdown-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 8vw, var(--text-3xl));
  line-height: 1;
}

.countdown-num.flip-animate {
  animation: countdown-punch var(--duration-base) var(--ease-brutal);
}

@keyframes countdown-punch {
  0% {
    transform: translateY(-10px) scale(1.06);
    color: var(--color-accent-2);
  }
  60% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.countdown-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  margin-top: var(--space-1);
}

/* --- Placeholder blocks (galeri / maps — real data in Step 1.5+) --- */
.placeholder-block {
  border: var(--border-width) dashed var(--color-ink);
  background: var(--color-surface);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-3);
  text-align: center;
}

.placeholder-block__icon {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2);
}

.placeholder-block p {
  color: var(--color-ink-soft);
  margin: 0;
}

/* --- Wishes / buku tamu --- */
.ucapan-list {
  max-width: 640px;
  margin: var(--space-6) auto 0;
  display: grid;
  gap: var(--space-2);
}

.ucapan-item {
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.ucapan-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.ucapan-dari {
  font-family: var(--font-display);
  font-weight: 700;
}

.ucapan-waktu {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.ucapan-teks {
  margin: 0;
  font-size: var(--text-sm);
}

/* --- Radio group (RSVP kehadiran) --- */
.radio-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.radio-group legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 0 var(--space-1);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  border: var(--border-width) solid var(--color-ink);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  background: var(--color-surface);
  transition: transform var(--duration-fast) var(--ease-brutal),
    box-shadow var(--duration-fast) var(--ease-brutal);
}

.radio-option:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 0 var(--color-ink);
}

.radio-option:has(input:checked) {
  background: var(--color-accent);
}

.radio-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-ink);
}

.form-status {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  min-height: 1.5em;
}

/* --- Music control (fixed) --- */
.music-btn {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 50;
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  clip-path: circle(50%);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-sm);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-brutal),
    box-shadow var(--duration-fast) var(--ease-brutal);
}

.music-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 0 var(--color-ink);
}

.music-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--color-ink);
}

.music-btn.is-playing {
  background: var(--color-accent);
}

@media (max-width: 480px) {
  .music-btn {
    width: 44px;
    height: 44px;
    bottom: var(--space-2);
    right: var(--space-2);
  }
}

/* --- Skip link (keyboard a11y) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* --- Footer --- */
.footer {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.footer__names {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
}

.footer__date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.footer__credit {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   UNDANGAN.HTML — sections restored in Step 1.3 revision (Mempelai, Quotes,
   Love Story, Video placeholder, Gift)
   ========================================================================== */

/* --- Cover: bismillah --- */
.cover__bismillah {
  font-size: var(--text-lg);
  line-height: 2;
  margin: 0 0 var(--space-2);
}

/* --- Mempelai --- */
.mempelai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 640px) {
  .mempelai-grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
  }
}

/* Bingkai foto: dimiringkan berlawanan arah + selotip di sudut (gaya kolase) */
.mempelai-frame {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-3);
}

.mempelai-frame--l {
  transform: rotate(-2deg);
}

.mempelai-frame--r {
  transform: rotate(2deg);
}

.tape {
  position: absolute;
  z-index: 2;
  width: 76px;
  height: 22px;
  top: -12px;
  left: -22px;
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-ink);
  transform: rotate(-10deg);
}

.tape--r {
  left: auto;
  right: -22px;
  transform: rotate(10deg);
}

.tape--accent2 {
  background: var(--color-accent-2);
}

.mempelai-photo {
  width: 148px;
  height: 148px;
  margin: 0;
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.mempelai-photo--alt {
  background: var(--color-accent-2);
}

.mempelai-photo svg {
  width: 100%;
  height: 100%;
}

/* "&" sebagai badge stiker kotak, bukan huruf mengambang */
.mempelai-divider {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  background: var(--color-accent-2);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  transform: rotate(-8deg);
}

.mempelai-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-lg), 4.5vw, var(--text-xl));
  margin: 0 0 var(--space-1);
}

.mempelai-ortu {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 260px;
  margin-inline: auto;
}

/* --- Quotes --- */
.quotes-card {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard-lg);
}

.quotes-mark {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  margin: 0 0 var(--space-1);
  color: var(--color-accent-2);
}

.quotes-arabic {
  font-size: var(--text-xl);
  line-height: 2;
  margin: 0 0 var(--space-2);
}

.quotes-translation {
  font-style: italic;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

.quotes-source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* --- Love story: timeline kotak per-babak (tahun + cerita) ---
   Jumlah babak dirender dari data (dummy dulu, klien atur sendiri di Step 1.5+) */
.love-timeline {
  max-width: 680px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

.love-item {
  position: relative;
  text-align: left;
}

.love-item .badge {
  position: absolute;
  top: -14px;
  left: var(--space-3);
}

.love-item__teks {
  margin: 0;
}

.love-item:nth-child(odd) {
  transform: rotate(-1.2deg);
}

.love-item:nth-child(even) {
  transform: rotate(1.2deg);
}

@media (min-width: 640px) {
  .love-item {
    width: 88%;
  }

  .love-item:nth-child(even) {
    margin-left: auto;
  }
}

/* --- Gift --- */
.gift-intro {
  max-width: 560px;
  margin: 0 auto var(--space-6);
  text-align: center;
  color: var(--color-ink-soft);
}

.gift-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .gift-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.gift-card {
  text-align: center;
}

.gift-bank-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: var(--space-2) 0 0;
}

.gift-account-number {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.05em;
  margin: var(--space-1) 0;
}

.gift-account-name,
.gift-address {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

/* ==========================================================================
   STEP 1.4b — VARIASI KREATIF PER-SECTION + SISTEM IKON/STIKER
   Energi dari color-blocking, rotasi, dan stiker overlap. Token inti TIDAK
   berubah: radius tetap 0, shadow tetap hard-offset, warna tetap 4 token.
   Kontras teks di tiap kombinasi blok (concrete-acid): ink/lime 16.3:1,
   ink/merah 5.3:1, beige/ink 15.7:1, lime/ink 16.3:1 — semua ≥4.5:1.
   ========================================================================== */

body {
  /* Stiker sengaja bleed keluar tepi — jangan sampai memicu scroll horizontal */
  overflow-x: clip;
}

.section,
.cover {
  position: relative;
}

/* Konten selalu di atas stiker dekoratif */
.section > :not(.stiker),
.cover > :not(.stiker) {
  position: relative;
  z-index: 1;
}

/* --- Ikon SVG inline (pengganti simbol unicode/emoji ♪ ▦ ▶ ❝ ♥ ✦ 📍) --- */
.ikon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
}

.ikon--accent2 {
  color: var(--color-accent-2);
}

/* --- Stiker dekoratif (starburst / zigzag / ring / asterisk) ---
   Posisi/ukuran/rotasi per instance via style attribute — tiap penempatan
   memang satu kali pakai, asimetris, nempel tepi section. */
.stiker {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
  aspect-ratio: 1;
}

.stiker--zigzag {
  aspect-ratio: 3 / 1;
}

.stiker--outline {
  stroke: var(--color-ink);
  stroke-width: 3px;
  stroke-linejoin: miter;
}

.stiker--accent {
  color: var(--color-accent);
}

.stiker--accent2 {
  color: var(--color-accent-2);
}

/* --- Alignment header per section (pecah pola serba-center) --- */
.section-header--center {
  text-align: center;
}

.section-header--center .section-header__bar {
  margin-inline: auto;
}

.section-header--left,
.section-header--right {
  max-width: var(--header-max, 640px);
  margin-inline: auto;
}

.section-header--right {
  text-align: right;
}

.section-header--right .section-header__bar {
  margin-left: auto;
}

/* --- Color-blocking per section --- */
.section--accent {
  background: var(--color-accent);
}

.section--accent .eyebrow {
  color: var(--color-ink);
}

.section--accent .section-header__bar {
  background: var(--color-ink);
}

.section--accent2 {
  background: var(--color-accent-2);
}

.section--accent2 .eyebrow {
  color: var(--color-ink);
}

.section--accent2 .section-header__bar {
  background: var(--color-accent);
}

.section--invert {
  background: var(--color-ink);
  color: var(--color-bg);
}

.section--invert .eyebrow {
  color: var(--color-accent);
}

.section--invert .section-header__bar {
  background: var(--color-accent);
}

.section--invert .quotes-card {
  /* Shadow ink tak terlihat di bg ink — ganti lime supaya tepinya tetap tegas.
     Warna teks direset ke ink: kartu tetap putih, jangan ikut warisan beige. */
  box-shadow: 10px 10px 0 0 var(--color-accent);
  color: var(--color-ink);
}

/* --- Tekstur dot-grid untuk zona warna blok besar --- */
.bg-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--color-ink) 16%, transparent) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.section--invert.bg-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--color-bg) 22%, transparent) 1.5px, transparent 1.5px);
}

/* --- Varian badge (label stiker di header color-block) --- */
.badge--surface {
  background: var(--color-surface);
  color: var(--color-ink);
}

.badge--accent2 {
  background: var(--color-accent-2);
  color: var(--color-on-accent);
}

/* --- Grid staggered (acara & countdown) --- */
@media (min-width: 640px) {
  .acara-grid--stagger .acara-card:nth-child(2) {
    margin-top: var(--space-6);
  }
}

.countdown-grid--stagger .countdown-box:nth-child(1) {
  transform: rotate(-2deg);
}

.countdown-grid--stagger .countdown-box:nth-child(2) {
  transform: translateY(12px) rotate(1.5deg);
}

.countdown-grid--stagger .countdown-box:nth-child(3) {
  transform: rotate(-1deg);
}

.countdown-grid--stagger .countdown-box:nth-child(4) {
  transform: translateY(10px) rotate(2.5deg);
}

/* --- Stabilo highlight (variasi penanda header — pengganti garis bawah
   yang repetitif; garis bar hanya dipakai di sebagian section) --- */
.hl {
  display: inline-block;
  padding: 0.02em 0.18em;
  background: var(--color-accent);
  color: var(--color-ink);
  transform: rotate(-1.2deg);
}

.hl--surface {
  background: var(--color-surface);
}

.hl--accent2 {
  background: var(--color-accent-2);
}

/* --- Section intro (salam pembuka, sebelum Mempelai) --- */
.section--intro {
  text-align: center;
  padding-block: var(--space-8) var(--space-6);
}

.intro-salam {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-lg), 4.5vw, var(--text-xl));
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}

.intro-teks {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--color-ink-soft);
}

.intro-zigzag {
  color: var(--color-accent);
  margin-top: var(--space-4);
}

/* --- CTA simpan ke kalender (section Acara) --- */
.acara-cta {
  max-width: 900px;
  margin: var(--space-6) auto 0;
}

/* --- Footer invert --- */
.footer {
  background: var(--color-ink);
  color: var(--color-bg);
}

.footer__date {
  color: var(--color-accent);
}

.footer__credit {
  color: var(--color-bg);
}

/* ==========================================================================
   STEP 1.5 — elemen data live: galeri, video, maps, state error
   ========================================================================== */

/* --- Galeri (Premium): grid masonry-ish brutalist --- */
.galeri-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .galeri-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
}

.galeri-item {
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  background: var(--color-surface);
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-brutal),
    box-shadow var(--duration-fast) var(--ease-brutal);
}

.galeri-item:nth-child(3n+1) {
  transform: rotate(-1.5deg);
}

.galeri-item:nth-child(3n+2) {
  transform: rotate(1deg);
}

.galeri-item:hover,
.galeri-item:focus-visible {
  transform: translate(-2px, -2px) rotate(0);
  box-shadow: var(--shadow-hard);
}

.galeri-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  cursor: zoom-out;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border: var(--border-width-lg) solid var(--color-surface);
  box-shadow: var(--shadow-hard-lg);
}

/* --- Video (responsive 16:9, dibingkai brutalist) --- */
.video-frame {
  max-width: 720px;
  margin-inline: auto;
  border: var(--border-width-lg) solid var(--color-ink);
  box-shadow: var(--shadow-hard-lg);
  background: var(--color-ink);
  aspect-ratio: 16 / 9;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Maps --- */
.maps-card {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.maps-frame {
  border: var(--border-width-lg) solid var(--color-ink);
  box-shadow: var(--shadow-hard-lg);
  background: var(--color-surface);
  aspect-ratio: 16 / 10;
}

.maps-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.maps-info {
  text-align: center;
}

.maps-nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
}

.maps-alamat {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

/* --- State kosong / error (undangan tak ditemukan) --- */
.state-block {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.state-block__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, var(--text-3xl));
  margin: 0;
}

.state-block__text {
  max-width: 42ch;
  color: var(--color-ink-soft);
  margin: 0;
}

.galeri-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-6) var(--space-3);
  border: var(--border-width) dashed var(--color-ink);
}