/* =========================================================
   Sandingan — tema KENCANA (template Gold)
   Taman pendopo Jawa: gapura batu berukir, wisteria menjuntai, kembar mayang emas, lampu kuningan.
   Dimuat di atas invite.css hanya untuk tema dengan 'skin' => 'kencana'.
   Ilustrasi: assets/themes/kencana/img/ (sumber: tools/kencana-art/)
   ========================================================= */
@font-face { font-family: "Cinzel Decorative"; src: url("../../fonts/cinzel-decorative-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Corinthia"; src: url("../../fonts/corinthia-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- palet ---------- */
[data-theme="kencana"] {
  --bg: #EFE9DA; --bg-2: #EFE9DA; --card: #FBF7EE; --ink: #45432F; --muted: #67644E;
  --accent: #6A6E44; --accent-soft: rgba(106, 110, 68, .14); --on-accent: #FBF7EE;
  --line: rgba(69, 67, 47, .16); --shadow: 0 22px 44px -30px rgba(60, 55, 30, .55);
  --side-bg: #E6E0CC; --side-ink: #45432F; --side-accent: #977535;
  --cover-bg: #E6E0CC;
  --kc-title: #977535;   /* nama & judul (emas tua) */
  --kc-gold-2: #C9A866;  /* garis & hiasan */
  --kc-gold-3: #E4CF98;
  --kc-mist: 251, 247, 238; /* kabut gading (r,g,b) */
  --kc-ease-out: cubic-bezier(.16, .84, .3, 1);
  --kc-ease-soft: cubic-bezier(.45, .05, .25, 1);
  --kc-col: min(100%, 520px);
  --kc-lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white'%3E%3Cellipse cx='12' cy='7.6' rx='1.9' ry='3.1'/%3E%3Cellipse cx='12' cy='16.4' rx='1.9' ry='3.1'/%3E%3Cellipse cx='7.6' cy='12' rx='3.1' ry='1.9'/%3E%3Cellipse cx='16.4' cy='12' rx='3.1' ry='1.9'/%3E%3Ccircle cx='0' cy='0' r='1.7'/%3E%3Ccircle cx='24' cy='0' r='1.7'/%3E%3Ccircle cx='0' cy='24' r='1.7'/%3E%3Ccircle cx='24' cy='24' r='1.7'/%3E%3C/g%3E%3Cpath d='M0 12L12 0 24 12 12 24Z' fill='none' stroke='white' stroke-width='.9'/%3E%3C/svg%3E");
}
[data-theme="kencana"][data-palette="emas"] {
  --bg: #F3EDDF; --bg-2: #F3EDDF; --card: #FDF9F0; --ink: #3F3524; --muted: #6C604A;
  --accent: #8C6A2E; --accent-soft: rgba(140, 106, 46, .14); --line: rgba(63, 53, 36, .16);
  --kc-title: #8A6428;
}
[data-theme="kencana"][data-palette="sogan"] {
  --bg: #F2EADF; --bg-2: #F2EADF; --card: #FCF7EF; --ink: #3B2A1E; --muted: #6E5847;
  --accent: #7B5434; --accent-soft: rgba(123, 84, 52, .14); --line: rgba(59, 42, 30, .16);
  --kc-title: #8A5A30;
}
/* warna bebas (paket Gold): nama & judul mengikuti warna aksen, ilustrasi tetap */
[data-theme="kencana"][data-custom] { --kc-title: var(--accent); --cover-bg: #E6E0CC; --side-bg: #E6E0CC; --side-ink: var(--ink); }

/* ---------- dasar & tipografi ---------- */
.kc { background: var(--bg); color: var(--ink); font: 400 18px/1.62 "EB Garamond", Georgia, serif; }
.kc .content { background: transparent; overflow-x: hidden; overflow-x: clip; } /* hiasan yang menjorok ke luar tidak boleh melebarkan halaman */
/* nama: huruf kapital berhias + ampersand kaligrafi */
.kc-names { font-family: "Cinzel Decorative", serif; font-weight: 400; color: var(--kc-title); letter-spacing: .02em; line-height: 1.08; font-size: clamp(34px, 9.8vw, 50px); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); margin: 0; }
.kc-names .kc-n { display: inline-block; white-space: nowrap; }
.kc-amp, .kc .couple-amp, .kc .closing-names .amp { font-family: "Corinthia", cursive; font-weight: 400; font-style: normal; color: var(--kc-gold-2); }
.kc-amp { font-size: 1.5em; line-height: .6; margin: 0 .12em 0 .02em; vertical-align: -.08em; }
/* label kecil: kaligrafi */
.kc-kicker, .kc .eyebrow, .kc .ia-title { font: 400 32px/1 "Corinthia", cursive; letter-spacing: 0; text-transform: none; color: var(--kc-title); }
.kc .sec-title { font-family: "Cinzel Decorative", serif; font-weight: 400; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.15; color: var(--kc-title); letter-spacing: .03em; margin-top: 2px; }
.kc .sec-sub, .kc .lead { font-size: 17.5px; color: var(--muted); max-width: 34ch; }
.kc .greeting { font-family: "EB Garamond", serif; font-style: italic; font-size: 20px; color: var(--kc-title); }
.kc svg { stroke-width: 1.6; }
.kc :focus-visible { outline-color: var(--kc-title); }

/* ---------- tombol ---------- */
.kc .btn { font: 500 17px/1 "EB Garamond", serif; letter-spacing: .02em; min-height: 46px; padding: 0 24px; }
.kc .btn-sm { min-height: 40px; padding: 0 18px; font-size: 16px; }
.kc .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(60, 58, 30, .7); }
.kc .btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, #000); }
.kc .btn-ghost { color: color-mix(in srgb, var(--accent) 80%, #000); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(255, 255, 255, .35); }
.kc .btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

/* =========================================================
   PEMANDANGAN (sampul, latar konten, panel desktop, save the date)
   ========================================================= */
.kc-scene { position: absolute; inset: 0; overflow: hidden; background: #E6E0CC; pointer-events: none; }
.kc-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.kc-land { position: absolute; left: 0; width: 100%; height: var(--land-h, 44%); bottom: var(--land-b, 22%); object-fit: cover; object-position: 50% 0; }
.kc-pendopo { position: absolute; left: 50%; bottom: 0; width: var(--pw, min(142vw, 86vh, 1100px)); max-width: none; transform: translateX(-50%); }
.kc-ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pw, min(142vw, 86vh, 1100px)) * .2); background: linear-gradient(180deg, rgba(167, 174, 122, 0), #A3AA76 22%, #929C66); }
.kc-cloud { position: absolute; width: 70%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 253, 246, .85), rgba(255, 253, 246, 0)); filter: blur(2px); }
.kc-cloud--a { top: 9%; left: -30%; animation: kcCloud 70s linear infinite; }
.kc-cloud--b { top: 21%; left: -50%; width: 55%; height: 11%; animation: kcCloud 95s linear -40s infinite; opacity: .8; }
@keyframes kcCloud { from { transform: translateX(0); } to { transform: translateX(260%); } }
.kc-medal {
  position: absolute; width: 58px; height: 58px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M30 2L58 30 30 58 2 30Z'/%3E%3Cpath d='M30 9L51 30 30 51 9 30Z' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cellipse cx='30' cy='21' rx='4.6' ry='7.6'/%3E%3Cellipse cx='30' cy='39' rx='4.6' ry='7.6'/%3E%3Cellipse cx='21' cy='30' rx='7.6' ry='4.6'/%3E%3Cellipse cx='39' cy='30' rx='7.6' ry='4.6'/%3E%3Ccircle cx='30' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: kcTwinkle 7s ease-in-out infinite;
}
.kc-medal--1 { top: 50%; left: 7%; }
.kc-medal--2 { top: 44%; right: 6%; width: 44px; height: 44px; animation-delay: -2.4s; }
.kc-medal--3 { display: none; } /* terlalu kecil: terbaca seperti tanda tambah */
@keyframes kcTwinkle { 0%, 100% { opacity: 0; transform: scale(.9) rotate(-8deg); } 45%, 60% { opacity: .5; transform: scale(1) rotate(0); } }

/* burung: kawanan melintas, sayap mengepak */
.kc-birds { position: absolute; top: var(--birds-top, 19%); left: 0; width: 160px; height: 60px; opacity: 0; animation: kcFlock 19s linear 1.5s infinite; }
.kc-bird { position: absolute; left: var(--x); top: calc(20px + var(--y)); width: calc(30px * var(--s)); animation: kcBob 1.6s ease-in-out var(--d) infinite alternate; }
.kc-bird svg { display: block; width: 100%; height: auto; fill: #6C7058; stroke: none; overflow: visible; }
.kc-wing { transform-box: fill-box; transform-origin: 50% 90%; animation: kcFlap .42s ease-in-out var(--d) infinite alternate; }
@keyframes kcFlock {
  0% { opacity: 0; transform: translate(-180px, 40px); }
  6% { opacity: 1; }
  48% { opacity: 1; }
  56% { opacity: 0; transform: translate(calc(var(--kc-fly, 560px) + 60px), -50px); }
  100% { opacity: 0; transform: translate(calc(var(--kc-fly, 560px) + 60px), -50px); }
}
@keyframes kcBob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg); } }
@keyframes kcFlap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }

/* ---------- bunga di sudut, ubin batik, hamparan ---------- */
.kc-corners { position: absolute; inset: 0; pointer-events: none; }
.kc-hang, .kc-bloom, .kc-batik, .kc-bed { position: absolute; display: block; }
.kc-hang img, .kc-bloom img, .kc-batik img, .kc-bed img { display: block; width: 100%; height: auto; will-change: transform; }
.kc-batik { top: -14px; width: calc(var(--hang-w, min(52%, 320px)) * .92); opacity: .9; }
.kc-batik--l { left: -18px; }
.kc-batik--r { right: -18px; }
.kc-batik--r img { transform: scaleX(-1); }
.kc-hang { top: -6px; width: var(--hang-w, min(52%, 320px)); }
.kc-hang--l { left: -6px; }
.kc-hang--r { right: -6px; }
.kc-hang--l img { transform-origin: 0 0; animation: kcSwayL 6.5s ease-in-out infinite alternate; }
.kc-hang--r img { transform-origin: 100% 0; animation: kcSwayR 7.2s ease-in-out -2s infinite alternate; }
.kc-bloom { bottom: -10px; width: var(--bloom-w, min(50%, 330px)); }
.kc-bloom--l { left: -8px; }
.kc-bloom--r { right: -8px; }
.kc-bloom--l img { transform-origin: 0 100%; animation: kcSwayB 5.8s ease-in-out infinite alternate; }
.kc-bloom--r img { transform-origin: 100% 100%; animation: kcSwayB 6.4s ease-in-out -3s infinite alternate-reverse; }
.kc-bed { left: -4%; right: -4%; bottom: -12px; }
.kc-bed img { transform-origin: 50% 100%; animation: kcBreath 7s ease-in-out infinite alternate; }
@keyframes kcSwayL { from { transform: rotate(-1.2deg); } to { transform: rotate(2.4deg); } }
@keyframes kcSwayR { from { transform: rotate(1.2deg); } to { transform: rotate(-2.6deg); } }
@keyframes kcSwayB { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes kcBreath { from { transform: scale(1) translateY(0); } to { transform: scale(1.025) translateY(-3px); } }

/* ---------- kupu-kupu ---------- */
.kc-flies { position: absolute; inset: 0; overflow: hidden; }
.kc-fly { position: absolute; width: 26px; opacity: 0; }
.kc-fly svg { display: block; width: 100%; height: auto; fill: #EAD7A9; stroke: #B3955A; stroke-width: .6; overflow: visible; }
.kc-fly-w { transform-box: fill-box; transform-origin: 100% 40%; animation: kcWing .26s ease-in-out infinite alternate; }
.kc-fly-w--r { transform-origin: 0 40%; }
@keyframes kcWing { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.kc-fly--1 { top: 62%; left: 6%; animation: kcFly1 21s ease-in-out 3s infinite; }
.kc-fly--2 { top: 30%; right: 8%; width: 22px; animation: kcFly2 26s ease-in-out 9s infinite; }
.kc-fly--3 { top: 78%; left: 70%; width: 18px; animation: kcFly3 23s ease-in-out 15s infinite; }
.kc-fly--3 svg { fill: #F3E9EC; stroke: #C9A99A; }
@keyframes kcFly1 { 0% { opacity: 0; transform: translate(0, 0) rotate(10deg); } 8% { opacity: 1; } 30% { transform: translate(60px, -90px) rotate(-8deg); } 55% { transform: translate(130px, -40px) rotate(14deg); } 80% { opacity: 1; transform: translate(210px, -150px) rotate(-6deg); } 92%, 100% { opacity: 0; transform: translate(260px, -220px) rotate(4deg); } }
@keyframes kcFly2 { 0% { opacity: 0; transform: translate(0, 0) rotate(-12deg); } 8% { opacity: 1; } 35% { transform: translate(-80px, 70px) rotate(8deg); } 60% { transform: translate(-150px, 20px) rotate(-10deg); } 85% { opacity: 1; transform: translate(-230px, 110px) rotate(6deg); } 95%, 100% { opacity: 0; transform: translate(-280px, 160px) rotate(0); } }
@keyframes kcFly3 { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 40% { transform: translate(-70px, -60px) rotate(-10deg); } 70% { transform: translate(-30px, -130px) rotate(12deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-110px, -200px); } }

/* =========================================================
   SAMPUL
   ========================================================= */
.kc .cover.kc-cover { display: block; padding: 0; background: #E6E0CC; overflow: hidden; transition: none; --land-h: 46%; --land-b: 20%; --birds-top: 49%; }
.kc .cover.kc-cover::before, .kc .cover.kc-cover::after { content: none; }
.kc-cover-text {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(env(safe-area-inset-top) + clamp(70px, 12vh, 124px));
  display: grid; justify-items: center; text-align: center; padding: 0 26px;
}
.kc-cover-text::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: -30px; bottom: -40px; background: radial-gradient(closest-side, rgba(var(--kc-mist), .78), rgba(var(--kc-mist), .4) 62%, rgba(var(--kc-mist), 0)); }
.kc-cover .kc-names { margin: 6px 0 10px; }
.kc-cover-date { font-family: "EB Garamond", serif; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.kc-guest { margin: 22px 0 18px; }
.kc-guest p:first-child { font-size: 15.5px; color: var(--muted); font-style: italic; }
.kc-guest-name { font-family: "Cinzel Decorative", serif; font-size: 22px; line-height: 1.25; margin-top: 4px; color: var(--ink); }
.kc-cover .btn-open { min-height: 48px; padding: 0 26px; }

/* urutan masuk sampul (dijalankan saat gambar siap: .is-in).
   .kc-ready dipasang skrip kecil di <head>; dilepas otomatis bila kencana.js gagal dimuat → semua tetap tampil */
.kc-ready .kc-cover .kc-in, .kc-ready .kc-cover .kc-land, .kc-ready .kc-cover .kc-pendopo, .kc-ready .kc-cover .kc-ground,
.kc-ready .kc-cover .kc-hang, .kc-ready .kc-cover .kc-batik, .kc-ready .kc-cover .kc-bed { opacity: 0; }
.kc-cover.is-in .kc-land { animation: kcRiseSoft 2s var(--kc-ease-out) .1s both; }
.kc-cover.is-in .kc-pendopo { animation: kcRisePendopo 2.2s var(--kc-ease-out) .25s both; }
.kc-cover.is-in .kc-ground { animation: kcRiseSoft 2.2s var(--kc-ease-out) .25s both; }
.kc-cover.is-in .kc-batik { animation: kcFade 1.6s ease .4s both; }
.kc-cover.is-in .kc-hang--l { animation: kcDrop 1.7s var(--kc-ease-out) .55s both; }
.kc-cover.is-in .kc-hang--r { animation: kcDrop 1.7s var(--kc-ease-out) .8s both; }
.kc-cover.is-in .kc-bed { animation: kcRise 1.8s var(--kc-ease-out) 1s both; }
.kc-cover.is-in .kc-in { animation: kcFadeUp 1.2s var(--kc-ease-out) calc(1.5s + var(--i) * .22s) both; }
.kc-cover.is-in .kc-names { animation-name: kcTitle; animation-duration: 1.6s; }
@keyframes kcRiseSoft { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes kcRisePendopo { from { opacity: 0; transform: translate(-50%, 16%) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes kcDrop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes kcRise { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes kcFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kcTitle { from { opacity: 0; letter-spacing: .2em; filter: blur(6px); } to { opacity: 1; letter-spacing: .02em; filter: blur(0); } }

/* membuka: teks memudar, bunga menyingkir, kamera masuk ke pendopo, kabut menutup */
.kc .cover.kc-cover.is-open { transform: none; opacity: 1; animation: kcCoverOut .7s ease .85s forwards; }
.kc-cover.is-open .kc-cover-text { animation: kcFadeOut .45s ease forwards; }
.kc-cover.is-open .kc-hang, .kc-cover.is-open .kc-batik { animation: kcExitUp 1s var(--kc-ease-soft) forwards; opacity: 1; }
.kc-cover.is-open .kc-bed { animation: kcExitDown 1s var(--kc-ease-soft) forwards; opacity: 1; }
.kc-cover.is-open .kc-scene { animation: kcZoomIn 1.5s var(--kc-ease-soft) forwards; transform-origin: 50% 78%; }
.kc-cover .kc-scene::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 90% at 50% 70%, #F8F5EC 30%, #EFEADC 100%); }
.kc-cover.is-open .kc-scene::after { animation: kcMist .8s ease .15s forwards; }
@keyframes kcMist { to { opacity: .86; } }
@keyframes kcCoverOut { to { opacity: 0; visibility: hidden; } }
@keyframes kcFadeOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes kcExitUp { to { transform: translateY(-110%); } }
@keyframes kcExitDown { to { transform: translateY(110%); } }
@keyframes kcZoomIn { to { transform: scale(1.18); } }

/* =========================================================
   LATAR & BINGKAI KONTEN
   ========================================================= */
.kc-backdrop, .kc-frame { position: fixed; top: 0; bottom: 0; left: 50%; width: var(--kc-col); transform: translateX(-50%); pointer-events: none; }
.kc-backdrop { z-index: 0; --land-h: 40%; --land-b: 20%; --birds-top: 34%; }
.kc-backdrop .kc-scene { --pw: min(150vw, 780px); }
/* parallax halus: --kc-sy (0..1) diisi kencana.js saat menggulir */
.kc-backdrop .kc-land { translate: 0 calc(var(--kc-sy, 0) * -18px); }
.kc-backdrop .kc-pendopo, .kc-backdrop .kc-ground { translate: 0 calc(var(--kc-sy, 0) * -38px); }
.kc-backdrop .kc-sky { scale: calc(1 + var(--kc-sy, 0) * .06); }
.kc-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(239, 233, 218, 0) 0%, rgba(239, 233, 218, .14) 55%, rgba(239, 233, 218, .3) 100%); }
.kc-frame { z-index: 5; --hang-w: min(31%, 170px); --bloom-w: min(34%, 190px); }
.kc-frame .kc-hang { top: -10px; }
.kc-frame .kc-batik { opacity: .7; }

/* sebelum dibuka, latar & bingkai disembunyikan; setelah dibuka diputar berurutan */
.kc-ready .kc .kc-backdrop, .kc-ready .kc .kc-frame .kc-hang, .kc-ready .kc .kc-frame .kc-batik, .kc-ready .kc .kc-frame .kc-bloom, .kc-ready .kc .kc-frame .kc-flies, .kc-ready .kc .kc-intro .kc-lamp { opacity: 0; }
.kc.kc-open .kc-backdrop { animation: kcFade .6s ease .3s both; }
.kc.kc-open .kc-backdrop .kc-land { animation: kcRiseSoft 2.4s var(--kc-ease-out) .9s both; }
.kc.kc-open .kc-backdrop .kc-pendopo { animation: kcRisePendopo 2.6s var(--kc-ease-out) 1.1s both; }
.kc.kc-open .kc-backdrop .kc-ground { animation: kcRiseSoft 2.6s var(--kc-ease-out) 1.1s both; }
.kc.kc-open .kc-frame .kc-batik { animation: kcFade 1.4s ease 1.2s both; }
.kc.kc-open .kc-frame .kc-hang--l { animation: kcDrop 1.6s var(--kc-ease-out) 1.4s both; }
.kc.kc-open .kc-frame .kc-hang--r { animation: kcDrop 1.6s var(--kc-ease-out) 1.6s both; }
.kc.kc-open .kc-frame .kc-bloom--l { animation: kcRise 1.5s var(--kc-ease-out) 1.7s both; }
.kc.kc-open .kc-frame .kc-bloom--r { animation: kcRise 1.5s var(--kc-ease-out) 1.85s both; }
.kc.kc-open .kc-frame .kc-flies { animation: kcFade 1s ease 3s both; }

/* ---------- gapura: mahkota (gambar) + tiang (ubin berulang) ---------- */
.kc-gate { position: relative; margin: 0 auto; }
.kc-gate-crown { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
/* pola tiang berulang tiap 1/6 lebar gapura; mahkota setinggi 5/6 lebar → sambungan selalu pas */
.kc-gate-pillar { position: absolute; z-index: 1; top: 0; bottom: 0; width: 13.34%; background: url("img/gapura-tiang.webp") 0 0 / 100% auto repeat-y; }
.kc-gate-pillar--l { left: 0; }
.kc-gate-pillar--r { right: 0; background-image: url("img/gapura-tiang-kanan.webp"); }
.kc-gate-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- pembuka: gapura setinggi layar, taman terlihat di baliknya ---------- */
.kc .sec.kc-intro { position: relative; z-index: 2; padding: 0; min-height: 100vh; min-height: 100svh; background: none; }
.kc-gate--intro { min-height: 100vh; min-height: 100svh; }
.kc-gate--intro .kc-gate-crown { position: absolute; top: 0; left: 0; }
/* persen pada padding/margin dihitung dari LEBAR → posisi selalu sejajar dengan gambar mahkota */
.kc-gate--intro .kc-gate-inner { position: absolute; inset: 0; padding: calc(31% + 104px) 15% 0; }
.kc-lamp { position: absolute; z-index: 3; top: 0; left: 50%; width: 96px; margin: 31.5% 0 0 -48px; }
.kc-lamp img { display: block; width: 100%; transform-origin: 50% 0; animation: kcSwing 5.5s ease-in-out infinite alternate; will-change: transform; }
@keyframes kcSwing { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.kc-intro-text { position: relative; isolation: isolate; margin-top: clamp(6px, 4vh, 40px); padding: 22px 12px 26px; }
.kc-intro-text::before { content: ""; position: absolute; z-index: -1; inset: -18px -34px; background: radial-gradient(closest-side, rgba(var(--kc-mist), .92) 0 48%, rgba(var(--kc-mist), .7) 74%, rgba(var(--kc-mist), 0)); }
.kc-intro .kc-names { margin: 4px 0 10px; font-size: clamp(30px, 8.6vw, 44px); }
.kc-intro .kc-names .kc-n { display: block; }
.kc-intro-date { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.kc-intro-guest { margin-top: 12px; font-size: 16px; font-style: italic; color: var(--muted); }
.kc-intro-guest strong { font-style: normal; font-weight: 600; color: var(--ink); }
.kc-scroll { margin-top: auto; margin-bottom: 92px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: color-mix(in srgb, var(--accent) 80%, #000); background: rgba(251, 247, 238, .8); box-shadow: 0 0 0 1px rgba(201, 168, 102, .5); animation: kcNudge 2.2s ease-in-out infinite; }
.kc-scroll svg { width: 20px; height: 20px; }
@keyframes kcNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* layar pendek (mis. 375x667): lampu & pendopo diperkecil supaya nama tidak menumpuk di atap */
@media (max-width: 599px) and (max-height: 800px) {
  .kc-backdrop .kc-scene { --pw: min(126vw, 92vh, 780px); }
  .kc-lamp { width: 76px; margin-left: -38px; }
  .kc-gate--intro .kc-gate-inner { padding-top: calc(31% + 80px); }
  .kc-intro-text { margin-top: 0; }
  .kc-scroll { margin-bottom: 84px; }
}

.kc-ready .kc .kc-gate--intro .kc-gate-crown, .kc-ready .kc .kc-gate--intro .kc-gate-pillar, .kc-ready .kc .kc-intro-text, .kc-ready .kc .kc-scroll { opacity: 0; }
.kc.kc-open .kc-gate--intro .kc-gate-crown { animation: kcCrown 1.8s var(--kc-ease-out) 1.2s both; }
.kc.kc-open .kc-gate--intro .kc-gate-pillar--l { animation: kcPillarL 1.6s var(--kc-ease-out) 1.35s both; }
.kc.kc-open .kc-gate--intro .kc-gate-pillar--r { animation: kcPillarR 1.6s var(--kc-ease-out) 1.35s both; }
.kc.kc-open .kc-intro .kc-lamp { animation: kcLampDrop 2s var(--kc-ease-out) 2s both; }
.kc.kc-open .kc-intro-text { animation: kcFadeUp 1.4s var(--kc-ease-out) 2.6s both; }
.kc.kc-open .kc-intro-text .kc-names { animation: kcTitle 1.8s var(--kc-ease-out) 2.7s both; }
.kc.kc-open .kc-scroll { animation: kcFade .8s ease 3.8s both, kcNudge 2.2s ease-in-out 4.6s infinite; }
@keyframes kcCrown { from { opacity: 0; transform: translateY(-55%); } to { opacity: 1; transform: none; } }
@keyframes kcPillarL { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }
@keyframes kcPillarR { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes kcLampDrop { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }

/* =========================================================
   BAGIAN-BAGIAN
   ========================================================= */
.kc .sec { position: relative; z-index: 2; background: none; padding: 56px 20px; }
.kc .sec + .sec { padding-top: 30px; }

/* jendela lengkung: isi gading tembus pandang, pinggiran renda putih, garis emas tipis, rumpun bunga di kaki */
.kc .sec.opening, .kc .sec.story, .kc .sec.gallery-sec, .kc .sec.rsvp, .kc .sec.twibbon-sec, .kc .sec.gifts {
  width: calc(100% - 36px); max-width: 410px; margin: 40px auto 0; padding: 60px 14px 56px;
  border: 13px solid transparent; border-radius: 50% 50% 26px 26px / 160px 160px 26px 26px;
  background: linear-gradient(180deg, rgba(var(--kc-mist), .8) 0%, rgba(var(--kc-mist), .93) 22%, rgba(var(--kc-mist), .95) 100%) padding-box;
  outline: 1px solid rgba(201, 168, 102, .7); outline-offset: -19px;
  box-shadow: 0 34px 60px -40px rgba(60, 55, 30, .55);
}
.kc .sec.opening::before, .kc .sec.story::before, .kc .sec.gallery-sec::before, .kc .sec.rsvp::before, .kc .sec.twibbon-sec::before, .kc .sec.gifts::before {
  content: ""; position: absolute; inset: -13px; border: 13px solid transparent; border-radius: inherit; pointer-events: none;
  background: var(--kc-lace) 0 0 / 20px 20px border-box, rgba(255, 255, 255, .34) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
.kc .sec.opening::after, .kc .sec.story::after, .kc .sec.rsvp::after, .kc .sec.gifts::after, .kc .sec.twibbon-sec::after, .kc .sec.gallery-sec::after {
  content: ""; position: absolute; z-index: 3; left: -36px; right: -36px; bottom: -44px; height: 120px; pointer-events: none;
  background: url("img/bunga-kiri.webp") 0 100% / 44% auto no-repeat, url("img/bunga-kanan.webp") 100% 100% / 44% auto no-repeat;
}
.kc .sec.story::after, .kc .sec.twibbon-sec::after { background: url("img/bunga-kanan.webp") 100% 100% / 44% auto no-repeat; }
.kc .sec.gallery-sec::after { background: url("img/bunga-kiri.webp") 0 100% / 44% auto no-repeat; }
.kc .sec.gallery-sec { max-width: 460px; padding-left: 8px; padding-right: 8px; }

/* salam & ayat */
.kc .opening .greeting { margin-bottom: 14px; }
.kc-sprig { display: block; width: 150px; margin: 22px auto 0; }
.kc .quote { margin: 14px auto 0; padding: 0; background: none; max-width: 34ch; }
.kc .quote p { font-family: "EB Garamond", serif; font-style: italic; font-size: 18.5px; line-height: 1.6; }
.kc .quote cite { font: 400 15px/1.3 "Cinzel Decorative", serif; letter-spacing: .06em; color: var(--kc-title); margin-top: 14px; }

/* mempelai: bingkai oval emas berisi foto (atau lukisan + inisial), nama di atas kabut */
.kc .sec.couple { display: grid; gap: 0; padding-top: 70px; }
.kc .person { display: grid; justify-items: center; gap: 0; }
.kc .person-media { position: relative; width: min(80vw, 300px); aspect-ratio: 400 / 480; margin: 0 auto; z-index: 2; }
.kc .person-photo, .kc .monogram { position: absolute; left: 18.4%; top: 15.6%; width: 63.2%; height: 70.8%; margin: 0; border: 0; border-radius: 50%; box-shadow: none; overflow: hidden; }
.kc .monogram { display: grid; place-items: center; background: url("img/vinyet.webp") 50% 50% / cover no-repeat; }
.kc .monogram::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(var(--kc-mist), .72), rgba(var(--kc-mist), 0) 80%); }
.kc .monogram .script { position: relative; font-family: "Cinzel Decorative", serif; font-size: clamp(70px, 21vw, 92px); color: var(--kc-title); text-shadow: 0 2px 0 rgba(255, 255, 255, .8); margin: 0; }
.kc-oval-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kc-person-card { position: relative; isolation: isolate; width: 100%; max-width: 380px; margin-top: -18px; padding: 30px 26px 34px; text-align: center; }
/* kabut di balik nama: lebih lebar dari kartu supaya tepinya lembut, bagian tengah cukup pekat untuk dibaca di atas pendopo */
.kc-person-card::before { content: ""; position: absolute; z-index: -1; inset: -26px -30px -20px; background: radial-gradient(closest-side, rgba(var(--kc-mist), .96) 0 56%, rgba(var(--kc-mist), .84) 76%, rgba(var(--kc-mist), 0)); }
.kc .person-nick { font: 400 clamp(30px, 8.4vw, 38px)/1.1 "Cinzel Decorative", serif; color: var(--kc-title); margin: 0; }
.kc .person-name { font-family: "EB Garamond", serif; font-size: 21px; font-weight: 600; margin-top: 8px; }
.kc .person-parents { margin: 6px auto 0; color: var(--muted); font-size: 17px; max-width: 30ch; }
.kc .person-ig { display: inline-flex; margin-top: 14px; padding: 8px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 15.5px/1 "EB Garamond", serif; }
.kc .couple-amp { font-size: 110px; line-height: .8; margin: 22px 0 0; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); position: relative; z-index: 2; }

/* kisah */
.kc .timeline { margin-top: 24px; }
.kc .timeline::before { background: linear-gradient(var(--kc-gold-2), rgba(201, 168, 102, .2)); }
.kc .tl-item::before, .kc .sec .tl-item::before { width: 12px; height: 12px; border: 0; background: var(--kc-gold-2); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px rgba(201, 168, 102, .5); }
.kc .tl-date { font: 400 16px/1.3 "Cinzel Decorative", serif; color: var(--kc-title); letter-spacing: .06em; text-transform: none; }
.kc .tl-title { font-family: "EB Garamond", serif; font-size: 20px; font-weight: 600; }
.kc .tl-text { font-size: 17px; }

/* save the date: foto/lukisan memudar ke taman + hitung mundur melengkung */
.kc .sec.events { padding: 60px 0 24px; }
.kc-save { position: relative; text-align: center; }
.kc-save-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 14%, #000 58%, transparent 92%); mask-image: linear-gradient(transparent 0, #000 14%, #000 58%, transparent 92%); }
.kc-save-photo img { width: 100%; height: 100%; object-fit: cover; }
.kc-save-photo--scene .kc-scene { --pw: 128%; --land-h: 44%; --land-b: 22%; --birds-top: 26%; }
.kc-save-body { position: relative; margin-top: -96px; padding: 0 20px 56px; display: grid; justify-items: center; gap: 8px; }
.kc-save-body::before { content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -70px; bottom: -10px; background: radial-gradient(closest-side, rgba(var(--kc-mist), .97), rgba(var(--kc-mist), .9) 55%, rgba(var(--kc-mist), .5) 80%, rgba(var(--kc-mist), 0)); }
.kc-save-title { font: 400 clamp(30px, 8.8vw, 40px)/1.1 "Cinzel Decorative", serif; color: var(--kc-title); text-shadow: 0 0 20px rgba(var(--kc-mist), 1), 0 0 3px rgba(var(--kc-mist), .9); }
.kc-save-date { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 12px rgba(var(--kc-mist), 1); }
.kc .countdown { gap: 10px; width: min(100%, 360px); margin: 12px auto 10px; }
.kc .countdown div { padding: 16px 4px 10px; border-radius: 999px 999px 12px 12px; background: rgba(var(--kc-mist), .9); border: 1px solid rgba(201, 168, 102, .6); box-shadow: 0 14px 26px -20px rgba(60, 55, 30, .7), inset 0 0 0 3px rgba(var(--kc-mist), 1), inset 0 0 0 4px rgba(201, 168, 102, .35); }
.kc .countdown span { font: 400 30px/1.1 "Cinzel Decorative", serif; color: var(--kc-title); }
.kc .countdown small { font-size: 14px; color: var(--muted); letter-spacing: .04em; }

/* acara di dalam gapura: taman terlihat di puncak lengkung, kabut gading di tempat teks */
.kc-gate--events { width: calc(100% - 28px); max-width: 470px; background: linear-gradient(180deg, rgba(var(--kc-mist), 0) 0, rgba(var(--kc-mist), .55) 20%, rgba(var(--kc-mist), .95) 34%, rgba(var(--kc-mist), .95) 100%); box-shadow: 0 30px 60px -36px rgba(60, 55, 30, .65); padding-bottom: 18px; }
.kc-gate--events::after { content: ""; position: absolute; z-index: 2; left: -8px; right: -8px; bottom: -12px; height: 22px; border-radius: 4px; background: linear-gradient(#C4BBA6, #9A917C 60%, #857D69); box-shadow: 0 10px 20px -12px rgba(40, 35, 20, .8), inset 0 2px 0 rgba(255, 255, 255, .35); }
.kc-gate--events .kc-gate-inner { margin-top: -44%; padding: 0 15.5% 30px; }
.kc-gate--events .eyebrow { display: none; }
.kc-gate--events .sec-title { margin: 0; font-size: clamp(21px, 5.8vw, 27px); text-shadow: 0 0 14px rgba(var(--kc-mist), 1); }
.kc .event-card { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; width: 100%; }
.kc .event-card:first-of-type { margin-top: 0; }
.kc .event-card + .event-card { margin-top: 26px; }
.kc .event-card + .event-card::before {
  content: "Dilanjutkan dengan"; display: block; margin-bottom: 4px; font: 400 28px/1.2 "Corinthia", cursive; color: var(--kc-title);
  background: linear-gradient(90deg, transparent, var(--kc-gold-2)) 0 55% / 18% 1px no-repeat, linear-gradient(90deg, var(--kc-gold-2), transparent) 100% 55% / 18% 1px no-repeat;
}
.kc .ev-ico { color: var(--kc-gold-2); margin-top: 16px; }
.kc .ev-ico svg { width: 52px; height: 35px; }
.kc .event-name { font: 400 26px/1.15 "Cinzel Decorative", serif; color: var(--kc-title); }
.kc .event-meta { margin: 10px 0 12px; padding: 10px 0; border-color: rgba(201, 168, 102, .45); font-size: 17px; }
.kc .event-meta p { font-weight: 500; }
.kc .event-meta svg { color: var(--kc-gold-2); }
.kc .event-venue { font-size: 19px; font-weight: 600; }
.kc .event-address { font-size: 16.5px; }
.kc .event-actions { gap: 8px; margin-top: 16px; }
.kc .map-slot { border-radius: 14px; border: 0; box-shadow: 0 0 0 1px rgba(201, 168, 102, .5); }

/* galeri & video */
.kc .gallery { grid-auto-rows: 150px; gap: 8px; margin-top: 22px; }
.kc .g-item { border-radius: 10px; background: #EDE5D3; box-shadow: 0 0 0 1px rgba(201, 168, 102, .45); grid-row: auto; grid-column: auto; }
.kc .g-item:first-child { grid-column: span 2; grid-row: span 2; border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; }
.kc .g-item:last-child:nth-child(even) { grid-column: span 2; }
.kc .video-wrap { margin-top: 22px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(201, 168, 102, .5), var(--shadow); }

/* RSVP & ucapan */
.kc .rsvp-form { margin: 24px 0 0; padding: 0 6px; background: none; border: 0; box-shadow: none; gap: 16px; }
.kc .field > span, .kc .field legend { font-size: 16px; font-weight: 600; color: var(--ink); }
.kc .rsvp-form input[type="text"], .kc .rsvp-form select, .kc .rsvp-form textarea { font: 400 17px/1.5 "EB Garamond", serif; background: rgba(255, 255, 255, .7); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 12px; color: var(--ink); }
.kc .choice span { border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: 15.5px; font-weight: 500; min-height: 44px; background: rgba(255, 255, 255, .55); }
.kc .choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kc .form-status { font-size: 16px; }
.kc .wishes { margin-top: 30px; padding: 22px 6px 0; border-top: 1px solid rgba(201, 168, 102, .45); }
.kc .wishes-head { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.kc .wishes-head h3 { font: 400 22px/1.2 "Cinzel Decorative", serif; color: var(--kc-title); }
.kc .wish-list { max-height: 440px; }
.kc .wish { background: rgba(255, 255, 255, .62); border: 0; border-left: 3px solid var(--kc-gold-2); border-radius: 4px 14px 14px 4px; }
.kc .wish-name { font-size: 17px; }
.kc .wish-badge { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 80%, #000); font-size: 12.5px; }
.kc .wish-msg { font-size: 16.5px; }
.kc .wish-reply { border-left-color: var(--kc-gold-2); font-size: 15.5px; }
.kc .wish-reply-label { color: var(--kc-title); }

/* twibbon */
.kc .tw-privacy { font-size: 14.5px; }

/* tanda kasih */
.kc .gift-list { gap: 12px; margin-top: 20px; padding: 0 6px; }
.kc .gift-card { gap: 4px; padding: 24px 18px; border: 0; border-radius: 18px; color: var(--on-accent); background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 30px -22px rgba(40, 40, 20, .9); }
.kc .gift-bank { font: 400 17px/1.3 "Cinzel Decorative", serif; letter-spacing: .08em; text-transform: none; color: var(--kc-gold-3); }
.kc .gift-number { font-family: "EB Garamond", serif; font-weight: 500; font-size: 28px; letter-spacing: .08em; }
.kc .gift-holder, .kc .gift-address { color: inherit; font-style: italic; font-size: 16.5px; opacity: .92; }
.kc .gift-card .btn-ghost { background: var(--card); color: color-mix(in srgb, var(--accent) 80%, #000); border-color: transparent; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5); }

/* penutup: adegan akhir tanpa kotak, hamparan bunga di kaki */
.kc .sec.closing { min-height: 100vh; min-height: 100svh; padding: 110px 26px 0; display: flex; flex-direction: column; align-items: center; }
.kc .closing > :not(.kc-closing-bed) { position: relative; z-index: 2; }
.kc .closing::before { content: ""; position: absolute; z-index: 1; left: -10%; right: -10%; top: 20px; height: 82%; background: radial-gradient(closest-side, rgba(var(--kc-mist), .96), rgba(var(--kc-mist), .9) 55%, rgba(var(--kc-mist), .55) 80%, rgba(var(--kc-mist), 0)); pointer-events: none; }
.kc .closing .ornament { width: 150px; height: 70px; margin: 0 auto 6px; background: url("img/ranting.webp") center / contain no-repeat; }
.kc .closing .ornament::before, .kc .closing .ornament::after { content: none; }
.kc-thanks { font-size: clamp(30px, 9vw, 40px) !important; margin-bottom: 16px; }
.kc .signoff { font-style: italic; font-size: 17px; letter-spacing: .02em; }
.kc .closing-names { font: 400 clamp(30px, 8.6vw, 42px)/1.15 "Cinzel Decorative", serif; color: var(--kc-title); margin-top: 8px; }
.kc .closing-names .amp { font-size: 1.5em; margin: 0 .14em; vertical-align: -.08em; }
.kc .invites-also { border-top-color: rgba(201, 168, 102, .45); }
.kc .invites-also ul { font-size: 17px; }
.kc-closing-bed { position: relative; z-index: 3; display: block; width: 116%; max-width: none; margin: auto -8% -6px; padding-top: 30px; transform-origin: 50% 100%; }

/* kaki */
.kc .foot { position: relative; z-index: 6; border-top: 0; background: color-mix(in srgb, var(--accent) 82%, #000); color: var(--on-accent); }
.kc .foot-brand { color: var(--on-accent); font-size: 16px; }
.kc .foot-brand .foot-mark { color: var(--kc-gold-3); }
.kc .foot-brand .foot-mark circle { stroke: var(--kc-gold-3) !important; }
.kc .demo-note { color: var(--on-accent); opacity: .8; font-size: 14.5px; }
.kc .foot .btn-primary { background: var(--card); color: color-mix(in srgb, var(--accent) 80%, #000); }
.kc .foot .btn-ghost { color: var(--on-accent); border-color: rgba(255, 255, 255, .45); background: none; }

/* menu ikon bawah & musik */
.kc .dock { background: color-mix(in srgb, var(--card) 92%, transparent); border-color: rgba(201, 168, 102, .55); }
.kc .dock:not([hidden]) { animation: kcDock .8s var(--kc-ease-out) 1.8s both; }
@keyframes kcDock { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translateX(-50%); } }
.kc .music-btn { background: var(--accent); color: var(--on-accent); border: 0; }
.kc .toast { background: color-mix(in srgb, var(--accent) 82%, #000); color: var(--on-accent); font-family: "EB Garamond", serif; font-size: 16px; }

/* ---------- animasi muncul saat menggulir: bervariasi per jenis ---------- */
.js .kc .reveal { transform: translateY(26px); transition: opacity 1.1s var(--kc-ease-out), transform 1.1s var(--kc-ease-out), letter-spacing 1.4s var(--kc-ease-out); }
.js .kc .reveal.is-visible { transform: none; }
/* jendela lengkung terangkat & membuka dari bawah */
.js .kc .sec.reveal:is(.opening, .twibbon-sec) { transform: translateY(46px) scale(.94); transform-origin: 50% 100%; transition-duration: 1.3s; }
/* judul merapat */
.js .kc .sec-title.reveal { letter-spacing: .24em; }
.js .kc .sec-title.reveal.is-visible { letter-spacing: .03em; }
/* bingkai oval membesar perlahan, kartu nama menyusul */
.js .kc .person.reveal .person-media { transform: scale(.82) rotate(-2deg); opacity: 0; transition: transform 1.4s var(--kc-ease-out), opacity 1.1s ease; }
.js .kc .person.reveal .kc-person-card { transform: translateY(24px); opacity: 0; transition: transform 1.2s var(--kc-ease-out) .35s, opacity 1s ease .35s; }
.js .kc .person.reveal.is-visible .person-media, .js .kc .person.reveal.is-visible .kc-person-card { transform: none; opacity: 1; }
.js .kc .person.reveal { transform: none; }
.js .kc .couple-amp.reveal { transform: scale(.6) rotate(-12deg); }
.js .kc .couple-amp.reveal.is-visible { transform: none; }
/* gapura acara turun dari atas */
.js .kc .kc-gate--events.reveal { transform: translateY(-40px); transition-duration: 1.4s; }
/* rumpun bunga di kaki jendela tumbuh setelah jendela muncul */
.kc .sec.reveal::after, .kc .sec:has(.reveal)::after { transition: transform 1.4s var(--kc-ease-out) .3s, opacity 1.2s ease .3s; }
.js .kc .sec.reveal:not(.is-visible)::after { transform: translateY(40px) scale(.9); opacity: 0; }

/* =========================================================
   TABLET & DESKTOP
   ========================================================= */
@media (min-width: 600px) and (max-width: 1023px) {
  .kc-backdrop { left: 0; width: 100%; transform: none; }
  .kc-backdrop .kc-scene { --pw: min(106vw, 72vh, 900px); }
  /* bila pendopo lebih sempit dari layar, tepinya dilebur ke lanskap (tanpa garis potong) */
  .kc-backdrop .kc-pendopo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
@media (min-width: 1024px) {
  [data-theme="kencana"] { --kc-col: 520px; }
  .kc .side.kc-side { inset: 0 520px 0 0; background: #E6E0CC; color: var(--ink); }
  .kc .side.kc-side::after { content: none; }
  .kc-side .kc-scene { --pw: min(calc((100vw - 520px) * .9), 80vh, 1000px); --land-h: 52%; --land-b: 16%; --kc-fly: 900px; }
  .kc-side .kc-corners { --hang-w: min(22vw, 300px); --bloom-w: min(24vw, 320px); }
  .kc-side-text { position: absolute; z-index: 2; top: 8vh; left: 0; right: 0; text-align: center; padding: 30px 0; background: radial-gradient(closest-side, rgba(var(--kc-mist), .7), rgba(var(--kc-mist), 0)); }
  .kc-side-text .kc-names { font-size: clamp(44px, 4.2vw, 72px); margin: 4px 0 12px; }
  .kc .content { box-shadow: -24px 0 50px -36px rgba(40, 40, 20, .6); }
  .kc-backdrop, .kc-frame { left: auto; right: 0; transform: none; }
  .kc .cover.kc-cover { --land-h: 56%; --land-b: 14%; }
  .kc-cover .kc-scene { --pw: min(70vw, 84vh, 1050px); --kc-fly: 1400px; }
  .kc-cover .kc-corners { --hang-w: min(24vw, 340px); }
  .kc-cover .kc-bed { left: 0; right: 0; margin: 0 auto; width: min(62vw, 820px); }
}

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .kc *, .kc *::before, .kc *::after { animation: none !important; transition: none !important; }
  .kc .kc-in, .kc .kc-land, .kc .kc-pendopo, .kc .kc-ground, .kc .kc-hang, .kc .kc-batik, .kc .kc-bed, .kc .kc-bloom, .kc .kc-lamp, .kc .kc-backdrop,
  .kc .kc-gate-crown, .kc .kc-gate-pillar, .kc .kc-intro-text, .kc .kc-scroll, .kc .reveal, .kc .person-media, .kc .kc-person-card { opacity: 1 !important; }
  .js .kc .reveal, .js .kc .person.reveal .person-media, .js .kc .person.reveal .kc-person-card { transform: none !important; }
  .js .kc .sec.reveal:not(.is-visible)::after { transform: none; opacity: 1; }
  .kc-birds, .kc-medal, .kc-cloud, .kc-flies { display: none; }
  .kc .cover.kc-cover.is-open { opacity: 0; visibility: hidden; }
}