/* =============================================================================
   KIRANA — tier Story (acuan: prototypes/kirana-story.html)
   Arah "Jawa modern": pernikahan adat Jawa — motif TRUNTUM (cinta bersemi
   kembali; BUKAN parang, dilarang di pernikahan Jawa), gunungan (kayon)
   line-art menggambar diri, palet sogan (coklat batik + krem lawas + emas).
   TANPA WebGL. Semua kelas ter-scope `.kr`. State mask reveal DIMILIKI JS
   (WAAPI di cover, gsap di konten); CSS hanya menyembunyikan di bawah
   `.is-js.is-motion` → tanpa JS/motion konten tetap terbaca.
============================================================================= */

.kr {
  --kr-krem: #f5eddc;
  --kr-krem2: #ede2c8;
  --kr-panel: #fbf5e6;
  --kr-sogan: #6b4a2b;
  --kr-sogan-d: #452d15;
  --kr-gold: #c09a4a;
  --kr-gold-d: #7b612a;
  --kr-ink: #3b2f22;
  --kr-muted: rgba(59, 47, 34, 0.72);
  --kr-hairline: rgba(107, 74, 43, 0.22);
  /* Pasangan font bawaan = "a". Kustomisasi (Fase G) menimpa lewat inline style
     di elemen `.kr` (inline menang atas rule kelas → var milik-sendiri). */
  --kr-display: var(--kr-disp-a);
  --kr-body: var(--kr-body-a);
  --kr-disp-stack: var(--kr-display), "Cormorant Upright", Georgia, serif;
  --kr-body-stack: var(--kr-body), "Figtree", system-ui, sans-serif;

  position: relative;
  background: #e2d5b4;
  color: var(--kr-ink);
  font-family: var(--kr-body-stack);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.kr *,
.kr *::before,
.kr *::after {
  box-sizing: border-box;
}
.kr ::selection {
  background: var(--kr-gold);
  color: #fff;
}

/* Stage (bingkai undangan terpusat) --------------------------------------- */
.kr-stage {
  max-width: 480px;
  margin: 0 auto;
  background: var(--kr-krem);
  position: relative;
  box-shadow: 0 0 110px rgba(69, 45, 21, 0.4);
}

/* Grain + progress -------------------------------------------------------- */
.kr-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kr-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--kr-sogan), var(--kr-gold));
  transform: scaleX(0);
}

/* Pola truntum (bintang-bunga kecil) sebagai latar lembut ----------------- */
.kr-truntum {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%236B4A2B' stroke-opacity='0.16'%3E%3Ccircle cx='36' cy='36' r='2.2'/%3E%3Cpath d='M36 26v6M36 40v6M26 36h6M40 36h6M29 29l4 4M39 39l4 4M43 29l-4 4M33 39l-4 4'/%3E%3C/g%3E%3C/svg%3E");
}
.kr-truntum--dark {
  opacity: 0.22;
  filter: invert(1);
}

/* Tipografi bersama ------------------------------------------------------- */
.kr-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kr-gold-d);
}
.kr-title {
  font-family: var(--kr-disp-stack);
  font-weight: 500;
  font-size: clamp(32px, 9vw, 42px);
  line-height: 1.18;
  margin-top: 16px;
  color: var(--kr-sogan-d);
}
.kr-title--sm {
  font-size: clamp(28px, 7.5vw, 36px);
}
.kr-title em {
  font-style: italic;
  color: var(--kr-gold-d);
}
.kr-lead {
  color: var(--kr-muted);
  font-size: 14px;
  line-height: 1.9;
  max-width: 320px;
  margin: 14px auto 0;
}

/* Baris bermask — disembunyikan hanya bila JS + motion aktif. */
.kr-line {
  display: block;
  overflow: hidden;
}
.kr-line > span {
  display: block;
}
.kr.is-js.is-motion .kr-line > span {
  visibility: hidden;
}
.kr.is-js.is-motion .kr-reveal {
  opacity: 0;
}

/* Pita truntum — pembatas antar-section dari ubin webp seamless
   (public/ornaments/kirana/truntum.webp, 234×175; satu baris motif = setengah
   tinggi ubin → background-size auto 2× tinggi pita). Tepi memudar via mask. */
.kr-pita {
  width: min(78vw, 340px);
  height: 52px;
  margin: 30px auto 0;
  background-image: url("/ornaments/kirana/truntum.webp");
  background-size: auto 104px;
  background-position: center top;
  background-repeat: repeat-x;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}

/* Sulur lung-lungan di sudut kartu — aset ber-bidang kiri-bawah, dirotasi per
   sudut. Dekoratif murni (aria-hidden), lazy. */
.kr-sulur {
  position: absolute;
  width: 76px;
  height: 76px;
  pointer-events: none;
  opacity: 0.95;
}
.kr-sulur--tl {
  top: 6px;
  left: 6px;
  transform: rotate(90deg);
}
.kr-sulur--br {
  bottom: 6px;
  right: 6px;
  transform: rotate(-90deg);
}
/* Bingkai hitung mundur lebih ramping → sulur lebih kecil agar tak menyentuh
   angka. */
.kr-cd-frame .kr-sulur {
  width: 54px;
  height: 54px;
}

/* Sepasang wayang kulit mengapit gunungan kecil — pembuka section mempelai.
   Putri menghadap kanan (kiri panggung), putra menghadap kiri (kanan) →
   keduanya saling berhadapan. */
.kr-pengapit {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 4vw, 26px);
  margin: 26px auto 0;
  max-width: 420px;
}
.kr-pengapit img {
  width: min(27vw, 118px);
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(69, 45, 21, 0.25));
}
.kr-pengapit img.kr-pengapit__gn {
  width: min(15vw, 64px);
  margin-bottom: 10px;
  flex: none;
}

/* ---------------------------------------------------------------- Cover --- */
/* Tanpa JS: cover disembunyikan → konten langsung terbaca (degradasi anggun). */
.kr-cover {
  display: none;
}
.kr.is-js .kr-cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Foto latar (busana adat Jawa) — scrim GRADIEN DIAGONAL: berat di kiri
     atas (zona teks), foto menampak di kanan bawah; focal atas. Beda arah
     dari tema lain yang vertikal/radial. */
  background-color: var(--kr-krem);
  background-image:
    linear-gradient(
      135deg,
      rgba(245, 237, 220, 0.92),
      rgba(245, 237, 220, 0.72) 45%,
      rgba(245, 237, 220, 0.5) 100%
    ),
    url("/demo/kirana/0.jpg");
  background-size: cover;
  background-position: center 20%;
  clip-path: inset(0 0 0 0);
  /* Wipe naik dari bawah. Transisi ada pada ELEMEN cover sendiri → penanda
     "wipe selesai" bagi cover-gate (transitionend). */
  transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.kr.is-js.is-open .kr-cover {
  clip-path: inset(0 0 100% 0);
}
.kr-cover .kr-truntum {
  opacity: 0.7;
}
.kr-cover__inner {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 24px;
  max-width: 430px;
  width: 100%;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.kr.is-js.is-open .kr-cover__inner {
  opacity: 0;
  transform: translateY(-12px);
}
@media (prefers-reduced-motion: reduce) {
  .kr.is-js .kr-cover,
  .kr-cover__inner {
    transition: none;
  }
}

/* Kelopak melati jatuh — lapisan tipis fixed di atas sampul (z-65) dan tetap
   ada di seluruh undangan. Hanya transform/opacity; pointer-events none;
   reduced-motion → disembunyikan (juga digate motionOn di fx.tsx). Item luar
   menempuh jatuh, svg dalam bergoyang + berputar pelan. */
.kr-drift {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  overflow: hidden;
}
.kr-drift__item {
  position: absolute;
  top: 0;
  left: var(--x);
  opacity: var(--o);
  animation: kr-drift-fall var(--d) linear var(--dl) infinite;
  will-change: transform;
}
.kr-drift__item > svg {
  display: block;
  width: var(--s);
  height: auto;
  /* Bayangan lembut supaya kelopak putih terbaca di atas sampul krem. */
  filter: drop-shadow(0 1px 3px rgba(120, 90, 40, 0.45));
  animation: kr-drift-sway var(--sw) ease-in-out infinite alternate;
}
@keyframes kr-drift-fall {
  from {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, 112vh, 0) rotate(320deg);
  }
}
@keyframes kr-drift-sway {
  from {
    transform: translateX(-11px) rotate(-14deg);
  }
  to {
    transform: translateX(11px) rotate(14deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kr-drift {
    display: none;
  }
}
.kr-cover__eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kr-gold-d);
  font-weight: 600;
}
.kr-gunungan-wrap {
  position: relative;
  width: min(50vw, 200px);
  margin: 14px auto 0;
}
/* Gunungan ukiran raster (latar transparan) — pengganti line-art lama. */
.kr-gunungan-foto {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 32px rgba(69, 45, 21, 0.3));
}
/* Layar pendek: kecilkan gunungan agar seluruh isi cover tetap muat. */
@media (max-height: 700px) {
  .kr-gunungan-wrap {
    width: min(42vw, 165px);
  }
  .kr-guest {
    margin: 14px auto 16px;
  }
  .kr-cover__hint {
    display: none;
  }
}
@media (max-height: 580px) {
  .kr-gunungan-wrap {
    width: min(34vw, 125px);
  }
}
/* Bidang nama di BAWAH gunungan (ukiran terlalu padat untuk teks di atasnya).
   Kolom grid selebar cover, bukan seketat nama terlebar: di kolom seketat teks
   lebar konten masker = lebar teksnya, jadi luapan tak pernah terukur dan
   selisih sub-piksel membuat pengepas (_shared/fit-names.ts) mengecilkan nama
   yang sebenarnya muat. Teks tetap terpusat oleh text-align. */
.kr-gn-center {
  display: grid;
  margin-top: 14px;
  /* Baris "&" seukuran isinya: maskernya (overflow:hidden) boleh menyusut ke 0
     di trek auto, jadi saat nama membungkus seluruh kekurangan tinggi bidang
     tengah diserap "&" dan ia hilang. */
  grid-template-rows: auto max-content auto;
  align-content: center;
  text-align: center;
}
/* min-width:0 — tanpa itu item grid melebar mengikuti nama terpanjang alih-alih
   namanya yang dikecilkan. */
.kr-gn-name {
  font-family: var(--kr-disp-stack);
  font-weight: 500;
  font-size: clamp(26px, 7.5vw, 36px);
  line-height: 1.14;
  color: var(--kr-sogan-d);
  min-width: 0;
}
/* Ruang tinta masker nama: tepi glyph yang menjorok (kait "f") di kedua sisi,
   aksen kapital (É/Á) di atas, dan ekor j/y/g yang turun di bawah kotak baris
   1,14. Margin negatif menetralkan, jadi tata letak tak bergeser. State
   tersembunyi 150% (cover.tsx) mengikuti aturan bersama masker berruang bawah
   (THEME-PORTING §0.4). */
.kr-gn-name .kr-line {
  padding: 0.2em 0.2em 0.15em;
  margin: -0.2em -0.2em -0.15em;
}
.kr-gn-amp {
  font-family: var(--kr-disp-stack);
  color: var(--kr-gold-d);
  font-size: 20px;
  margin: 2px 0;
}
.kr-cover__date {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kr-muted);
  margin-top: 6px;
}
.kr-guest {
  margin: 20px auto 22px;
  max-width: 290px;
  padding: 14px 18px;
  border: 1px solid var(--kr-sogan);
  border-radius: 4px;
  background: rgba(107, 74, 43, 0.05);
  position: relative;
}
.kr-guest::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--kr-hairline);
  border-radius: 2px;
  pointer-events: none;
}
.kr-guest small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kr-muted);
  font-weight: 600;
  margin-bottom: 5px;
}
.kr-guest strong {
  font-family: var(--kr-disp-stack);
  font-weight: 500;
  font-size: 20px;
  color: var(--kr-sogan-d);
}
.kr-open {
  appearance: none;
  border: 0;
  background: var(--kr-sogan);
  color: var(--kr-krem);
  font-family: var(--kr-body-stack);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(69, 45, 21, 0.8);
  transition:
    background 0.3s,
    transform 0.3s;
}
.kr-open:hover {
  background: var(--kr-sogan-d);
  transform: translateY(-2px);
}
.kr-cover__hint {
  margin-top: 16px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kr-muted);
}

/* -------------------------------------------------------------- Section --- */
.kr-section {
  position: relative;
  padding: 86px 26px;
}
.kr-center {
  text-align: center;
}
.kr-inner {
  max-width: 480px;
  margin: 0 auto;
}
.kr-hero {
  padding-top: 74px;
}

/* Sekar pambuka — panel sogan --------------------------------------------- */
.kr-sekar {
  background: var(--kr-sogan-d);
  color: var(--kr-krem);
  overflow: hidden;
}
.kr-sekar__text {
  position: relative;
  font-family: var(--kr-disp-stack);
  font-weight: 500;
  font-style: italic;
  font-size: 21px;
  line-height: 1.75;
  max-width: 330px;
  margin: 0 auto;
  color: var(--kr-krem);
}
.kr-sekar__cite {
  position: relative;
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Latar --kr-sogan-d = aksen varian bila ada custom (sogan #6b4a2b):
     emas mentah 3,0:1. Krem keemasan = warna mono/watermark footer. */
  color: #e5ce9e;
}

/* Mempelai — kartu keraton ------------------------------------------------ */
.kr-couple {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: 420px;
  margin-inline: auto;
}
.kr-keraton {
  background: var(--kr-panel);
  border: 1px solid var(--kr-sogan);
  border-radius: 6px;
  padding: 12px;
  position: relative;
}
.kr-keraton::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--kr-hairline);
  border-radius: 3px;
  pointer-events: none;
}
.kr-keraton__inner {
  border-radius: 3px;
  padding: 24px 20px 28px;
  text-align: center;
  position: relative;
}
/* Sudut kartu keraton memakai .kr-sulur (lihat blok ornamen di atas). */
.kr-foto-oval {
  width: 150px;
  height: 186px;
  margin: 4px auto 16px;
  border-radius: 70px 70px 10px 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--kr-sogan);
}
.kr-foto-oval__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #c9a878, #6b4a2b 88%);
}
.kr-foto-oval__ph span {
  font-family: var(--kr-disp-stack);
  font-size: 64px;
  color: rgba(245, 237, 220, 0.92);
}
.kr-keraton__role {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kr-gold-d);
  font-weight: 600;
}
.kr-keraton__name {
  font-family: var(--kr-disp-stack);
  font-weight: 600;
  font-size: 29px;
  color: var(--kr-sogan-d);
  margin-top: 6px;
}
/* Ruang tinta di kedua tepi masker nama (kait "f" menjorok melewati kotak
   glyph): nama yang dikepas pengepas (fx.tsx) mengisi 98% kartu. Margin
   negatif menetralkan; padding kartu 20px > .2em. Aksen kapital (É/Á) sudah
   muat di kotak baris 1,5. */
.kr-keraton__name .kr-line {
  padding-inline: 0.2em;
  margin-inline: -0.2em;
}
.kr-keraton__meta {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--kr-muted);
  margin-top: 8px;
}

/* Countdown medali -------------------------------------------------------- */
.kr-cd-frame {
  max-width: 390px;
  margin: 26px auto 0;
  border: 1px solid var(--kr-sogan);
  border-radius: 14px;
  padding: 22px 10px;
  background: var(--kr-panel);
  position: relative;
}
.kr-cd-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--kr-hairline);
  border-radius: 9px;
  pointer-events: none;
}
.kr .countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kr .count-box {
  text-align: center;
}
.kr .count-num {
  font-family: var(--kr-disp-stack);
  font-weight: 600;
  font-size: clamp(30px, 8.4vw, 40px);
  font-variant-numeric: tabular-nums;
  color: var(--kr-sogan-d);
  line-height: 1;
  display: block;
}
.kr .count-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kr-muted);
  font-weight: 600;
  margin-top: 5px;
  display: block;
}
.kr .countdown-done {
  font-family: var(--kr-disp-stack);
  font-style: italic;
  font-size: 20px;
  color: var(--kr-gold-d);
  margin-top: 8px;
}

/* Jadwal — tangga upacara ------------------------------------------------- */
.kr-tangga {
  position: relative;
  margin-top: 40px;
  padding-left: 30px;
  max-width: 440px;
  margin-inline: auto;
}
.kr-tangga::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--kr-sogan);
  opacity: 0.4;
}
.kr-step {
  position: relative;
  padding-bottom: 44px;
}
.kr-step:last-child {
  padding-bottom: 0;
}
.kr-step::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1.4px solid var(--kr-gold);
  background: var(--kr-krem);
  transform: rotate(45deg);
}
.kr-step__tag {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kr-gold-d);
  font-weight: 600;
}
.kr-step__title {
  font-family: var(--kr-disp-stack);
  font-weight: 600;
  font-size: 27px;
  color: var(--kr-sogan-d);
  margin: 6px 0 8px;
}
.kr-step__meta {
  font-size: 13px;
  line-height: 1.85;
  color: var(--kr-muted);
}
.kr-step__meta b {
  color: var(--kr-ink);
  font-weight: 600;
}
.kr-step__note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--kr-muted);
  background: rgba(192, 154, 74, 0.12);
  border-left: 2px solid var(--kr-gold);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
}
.kr-pills {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.kr-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--kr-sogan);
  color: var(--kr-sogan);
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.kr-pill:hover {
  background: var(--kr-sogan);
  color: var(--kr-krem);
}
.kr-pill--gold {
  background: var(--kr-gold-d);
  border-color: var(--kr-gold-d);
  color: #fff;
}
.kr-pill--gold:hover {
  background: #6b5525;
  border-color: #6b5525;
}
.kr-cal {
  position: relative;
}
.kr-cal > summary {
  list-style: none;
}
.kr-cal > summary::-webkit-details-marker {
  display: none;
}
.kr-cal__menu {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-cal__opt {
  font-size: 12px;
  text-decoration: none;
  color: var(--kr-sogan);
  border: 1px solid var(--kr-hairline);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--kr-panel);
}
.kr-cal__opt:hover {
  background: rgba(192, 154, 74, 0.12);
}

/* Galeri ------------------------------------------------------------------ */
.kr-gallery-sec {
  padding-left: 0;
  padding-right: 0;
}
.kr-g-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 28px 26px;
  scrollbar-width: none;
}
.kr-g-track::-webkit-scrollbar {
  display: none;
}
.kr-g-item {
  flex: 0 0 58%;
  scroll-snap-align: center;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border-radius: 60px 60px 10px 10px;
  border: 1px solid var(--kr-sogan);
}
.kr-g-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim di dasar foto: keterangan terbaca di foto TERANG mana pun — halo
   text-shadow saja tak cukup (diukur 1,1–2,6:1 di foto terang). */
.kr-g-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.55) 50%,
    transparent
  );
  pointer-events: none;
}
.kr-g-item figcaption {
  z-index: 1;
}
.kr-g-item figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 237, 220, 0.9);
  /* Di atas FOTO: halo gelap agar terbaca di foto terang (pola meihua). */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* RSVP (GuestbookSection dibungkus .kr-inner) + Amplop -------------------- */
.kr-envelope {
  max-width: 440px;
  margin: 22px auto 0;
  text-align: left;
}
.kr-acct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--kr-panel);
  border: 1px solid var(--kr-hairline);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}
.kr-acct b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--kr-ink);
}
.kr-acct small {
  display: block;
  font-size: 11px;
  color: var(--kr-muted);
  margin-top: 2px;
}
.kr-acct--addr {
  display: block;
}
.kr-acct--addr small {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kr-gold-d);
}
.kr-acct--addr p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--kr-muted);
  margin-top: 6px;
}
.kr-copy {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--kr-sogan);
  color: var(--kr-sogan);
  background: transparent;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kr-copy:hover {
  background: var(--kr-gold-d);
  border-color: var(--kr-gold-d);
  color: #fff;
}

/* Footer ------------------------------------------------------------------ */
.kr-footer {
  padding: 70px 26px 92px;
  background: var(--kr-sogan-d);
  color: var(--kr-krem);
  position: relative;
  overflow: hidden;
}
/* Kayon ukiran raster (aset cover), selebar kayon kecil di bagian mempelai. */
.kr-gn-mini {
  width: 64px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}
.kr-footer__role {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 237, 220, 0.74);
}
.kr-footer__mono {
  font-family: var(--kr-disp-stack);
  font-weight: 500;
  font-size: 26px;
  color: #e5ce9e;
  margin-top: 8px;
}
.kr-footer__msg {
  font-size: 12.5px;
  color: rgba(245, 237, 220, 0.78);
  margin-top: 12px;
  line-height: 1.9;
  max-width: 320px;
  margin-inline: auto;
}
.kr-watermark {
  display: inline-block;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 237, 220, 0.74);
  border: 1px solid rgba(245, 237, 220, 0.28);
  padding: 8px 14px;
  border-radius: 999px;
}
.kr-watermark a {
  color: #e5ce9e;
  text-decoration: none;
}

/* Tombol musik — tampil setelah dibuka ------------------------------------ */
.kr-music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--kr-hairline);
  background: rgba(245, 237, 220, 0.95);
  color: var(--kr-sogan-d);
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(69, 45, 21, 0.5);
}
.kr.is-open .kr-music {
  display: grid;
}

/* ====================================================== KUSTOMISASI (Fase G) ==
   Diaktifkan lewat data-atribut/inline var di elemen `.kr` (CoverGate). Tanpa
   custom, atribut ini tak ada → tampilan bawaan utuh. Urutan section diatur di
   JSX (DOM order), BUKAN CSS order (aksesibilitas/SEO/urutan fokus).
============================================================================= */

/* Gaya galeri — "strip" (bawaan) tak butuh rule tambahan. */
.kr[data-gallery="grid"] .kr-g-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  overflow: visible;
  scroll-snap-type: none;
}
.kr[data-gallery="grid"] .kr-g-item {
  flex: initial;
  width: auto;
}
.kr[data-gallery="polaroid"] .kr-g-item {
  border: none;
  border-radius: 3px;
  margin: 8px 14px 26px;
  box-shadow:
    0 0 0 10px #fbf5e6,
    0 0 0 11px var(--kr-hairline),
    0 16px 30px -18px rgba(69, 45, 21, 0.5);
}
.kr[data-gallery="polaroid"] .kr-g-item:nth-child(odd) {
  transform: rotate(-2deg);
}
.kr[data-gallery="polaroid"] .kr-g-item:nth-child(even) {
  transform: rotate(2deg);
}

/* ================================================================ Video ===
   Section video (FASE J) — kelas generik `_shared/video` ditata dengan token
   tema. Tanpa aturan reduced-motion: komponennya sendiri yang tak autoplay. */
.kr-video {
  margin-top: 22px;
}
.kr .video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--kr-sogan-d);
  border: 1px solid var(--kr-sogan);
  box-shadow: 0 18px 38px -22px rgba(69, 45, 21, 0.55);
}
/* Bingkai YouTube tak membawa rasio inline (bingkai berkas membawanya). */
.kr .video-frame--yt {
  aspect-ratio: 16 / 9;
}
.kr .video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.kr .video-mute,
.kr .video-play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kr-krem);
  color: var(--kr-sogan-d);
}
.kr .video-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kr-hairline);
  cursor: pointer;
}
.kr .video-lite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: var(--kr-sogan-d);
  background-size: cover;
  background-position: center;
}
/* Peredup agar tombol putar terbaca di atas poster terang. */
.kr .video-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 26, 12, 0.26);
}
.kr .video-play {
  position: relative;
  width: 64px;
  height: 64px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.kr .video-play svg {
  margin-left: 3px;
}
.kr .video-mute:focus-visible {
  outline: 2px solid var(--kr-gold-d);
  outline-offset: 2px;
}
/* Di dalam bingkai `overflow: hidden` → cincin fokus ke dalam. */
.kr .video-lite:focus-visible {
  outline: 2px solid var(--kr-gold-d);
  outline-offset: -5px;
}
.kr .video-frame::after {
  /* bingkai dalam tipis khas kartu Kirana (prototipe FASE J) */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(245, 237, 220, 0.26);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

/* Tombol live streaming di section acara (Premium, DECISIONS #116) — gaya
   tombolnya `kr-pill kr-pill--gold` yang sama dengan "Petunjuk Arah". */
.kr-live {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* Latar per-slide (aesthetic, Jawa sogan-truntum hangat) */
.kr-hero {
  background:
    radial-gradient(
      110% 80% at 50% 0%,
      color-mix(in srgb, var(--kr-gold) 18%, transparent),
      transparent 55%
    ),
    radial-gradient(
      70% 50% at 90% 80%,
      color-mix(in srgb, var(--kr-sogan) 12%, transparent),
      transparent 50%
    ),
    var(--kr-krem);
}
.kr-sekar {
  background: linear-gradient(
    180deg,
    var(--kr-krem-2, #efe3c7),
    color-mix(in srgb, var(--kr-gold) 10%, var(--kr-krem))
  );
}
.kr-section:has(.kr-couple) {
  background:
    radial-gradient(
      80% 60% at 10% 70%,
      color-mix(in srgb, var(--kr-sogan) 10%, transparent),
      transparent 55%
    ),
    var(--kr-krem);
}
.kr-section:has(.kr-countdown),
.kr-section:has(.kr-cd) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--kr-sogan-d, #4a3320) 10%, var(--kr-krem)),
    var(--kr-krem-2, #efe3c7)
  );
}
.kr-section:has(.kr-event),
.kr-section:has(.kr-schedule) {
  background:
    radial-gradient(
      90% 60% at 80% 20%,
      color-mix(in srgb, var(--kr-gold) 12%, transparent),
      transparent 55%
    ),
    var(--kr-krem);
}
.kr-gallery-sec {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kr-sogan) 6%, var(--kr-krem)),
    var(--kr-krem-2, #efe3c7)
  );
}
.kr-section:has(.kr-story) {
  background:
    radial-gradient(
      70% 50% at 20% 30%,
      color-mix(in srgb, var(--kr-gold) 10%, transparent),
      transparent 55%
    ),
    var(--kr-krem);
}
.kr-section:has(.kr-envelope),
.kr-section:has(.kr-acct) {
  background: linear-gradient(
    180deg,
    var(--kr-krem-2, #efe3c7),
    var(--kr-krem)
  );
}
.kr-footer {
  background: linear-gradient(
    180deg,
    var(--kr-krem),
    color-mix(in srgb, var(--kr-sogan) 12%, var(--kr-krem))
  );
}

/* === Motion Bali (dedup+motion 12 Nov 2026): reveal-on-scroll, latar, panjang === */
/* Reveal: konten section muncul saat di-scroll (zoom-in halus ala referensi).
   `.is-js` hanya ada setelah JS jalan -> tanpa JS konten tetap terlihat. */
.kr.is-js .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.965);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.kr.is-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Foto & kartu di dalam section: muncul menyusul (stagger) setelah section. */
.kr.is-js .reveal img,
.kr.is-js .reveal .kr-event,
.kr.is-js .reveal .kr-story,
.kr.is-js .reveal .kr-foto-oval {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition:
    opacity 0.9s ease 0.18s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.kr.is-js .reveal.is-visible img,
.kr.is-js .reveal.is-visible .kr-event,
.kr.is-js .reveal.is-visible .kr-story,
.kr.is-js .reveal.is-visible .kr-foto-oval {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .kr.is-js .reveal,
  .kr.is-js .reveal img,
  .kr.is-js .reveal .kr-event,
  .kr.is-js .reveal .kr-story,
  .kr.is-js .reveal .kr-foto-oval {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Latar berlapis tiap section: semburat aksen di atas + gradien kertas ke aksen. */
.kr-section {
  background:
    radial-gradient(
      120% 55% at 50% 0%,
      color-mix(in srgb, var(--kr-sogan) 12%, transparent),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--kr-krem),
      color-mix(in srgb, var(--kr-krem) 84%, var(--kr-sogan))
    );
  padding: clamp(84px, 14vw, 128px) 20px;
}
/* Preview lebih panjang: foto mempelai & galeri lebih besar. */
.kr-foto-oval {
  width: min(64%, 220px);
  height: auto;
  aspect-ratio: 150 / 186;
}
.kr-section > img {
  border-radius: 16px;
  margin-bottom: 18px;
}

/* === Motion Bali v2 (12 Nov 2026): ritme latar selang-seling + bingkai === */
div[data-section-id]:nth-child(even) .kr-section {
  background:
    radial-gradient(
      110% 50% at 50% 0%,
      color-mix(in srgb, #6b4a2b 42%, transparent),
      transparent 65%
    ),
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, #6b4a2b 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, #6b4a2b 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #6b4a2b 38%, #fbf5e6),
      color-mix(in srgb, #6b4a2b 28%, #fbf5e6)
    );
}
.kr-section {
  border: 2px solid color-mix(in srgb, #6b4a2b 60%, transparent);
  outline: 1px solid color-mix(in srgb, #6b4a2b 40%, transparent);
  outline-offset: 6px;
  border-radius: 24px;
  margin: 20px 14px;
}
.kr-foto {
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 18px 40px color-mix(in srgb, #6b4a2b 45%, transparent);
}

/* === Tombol Lihat Lokasi (12 Nov 2026): lengkapi data preview === */
.kr-maps {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--kr-acc);
  color: var(--kr-on-acc, #fff);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}