/* Tema Tapis: kain tapis Lampung. Marun bertenun, benang emas, pita tumpal dan ketupat. Huruf Marcellus + Alegreya Sans. */
:root { --kain: #4a1620; --kain-2: #35101a; --benang: #d9b45b; --benang-d: #a67c2e; --gading: #f3e8d0; --gading-2: #e9dab8; --tinta: #2a1218; --lembut: #7a5a4a;
	--disp: 'Marcellus', 'Trajan Pro', Georgia, serif; --sans: 'Alegreya Sans', system-ui, sans-serif; --gut: clamp(20px, 5vw, 56px);
	/* tumpal: segitiga berderet; ketupat: belah ketupat berderet (SVG tertanam, warna emas) */
	--tumpal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15'%3E%3Cpath d='M0 15 15 0 30 15Z' fill='%23d9b45b'/%3E%3C/svg%3E");
	--ketupat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 12 12 22 2 12Z' fill='none' stroke='%23d9b45b' stroke-width='1.4'/%3E%3Cpath d='M12 8 16 12 12 16 8 12Z' fill='%23d9b45b'/%3E%3C/svg%3E"); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kain); color: var(--gading); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.tp-lock { overflow: hidden; height: 100svh; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--benang); outline-offset: 3px; }
::selection { background: var(--benang); color: var(--kain); }
h1, h2, h3 { font-family: var(--disp); font-weight: 400; margin: 0; letter-spacing: .01em; }

/* ---------- tenunan dan pita ---------- */
.tp-kain { background-color: var(--kain); background-image: repeating-linear-gradient(45deg, rgba(217, 180, 91, .05) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 7px); color: var(--gading); }
.tp-gading { background-color: var(--gading); background-image: repeating-linear-gradient(45deg, rgba(74, 22, 32, .035) 0 2px, transparent 2px 7px); color: var(--tinta); }
.tp-tumpal { height: 15px; background: var(--tumpal) repeat-x center / 30px 15px; }
.tp-tumpal.flip { transform: scaleY(-1); }
.tp-tumpal.sm { height: 10px; background-size: 20px 10px; }
.tp-pita { height: 34px; background: var(--kain-2) var(--ketupat) repeat-x center / 24px 24px; border-block: 2px solid var(--benang); box-shadow: inset 0 0 0 3px var(--kain-2), inset 0 0 0 4px var(--benang-d); }

/* ---------- sampul: tirai kain terbelah ---------- */
.tp-splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: var(--kain-2); transition: opacity .6s ease .7s; }
.tp-half { position: absolute; top: 0; bottom: 0; width: 50.2%; background-color: var(--kain); background-image: repeating-linear-gradient(45deg, rgba(217, 180, 91, .09) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px), var(--tumpal), var(--tumpal); background-repeat: repeat, repeat, repeat-x, repeat-x; background-position: 0 0, 0 0, 0 0, 0 100%; background-size: auto, auto, 30px 15px, 30px 15px; transition: transform 1.25s cubic-bezier(.76, 0, .2, 1); }
.tp-half.l { left: 0; border-right: 2px solid var(--benang); }
.tp-half.r { right: 0; border-left: 2px solid var(--benang); }
.tp-splash.buka .tp-half.l { transform: translateX(-102%); }
.tp-splash.buka .tp-half.r { transform: translateX(102%); }
.tp-splash.buka .tp-plate { opacity: 0; transform: scale(.92); transition: opacity .5s ease, transform .8s ease; }
.tp-splash.selesai { opacity: 0; pointer-events: none; }
.tp-plate { position: relative; z-index: 2; width: min(520px, 88vw); padding: 0 0 18px; text-align: center; background: var(--kain-2); border: 2px solid var(--benang); box-shadow: 0 0 0 6px var(--kain-2), 0 0 0 7px var(--benang-d), 0 30px 60px rgba(0, 0, 0, .5); }
.tp-plate .tp-tumpal:first-child { margin-bottom: 20px; }
.tp-plate .tp-tumpal.flip { margin-top: 22px; }
.tp-kicker { margin: 0; font: 500 13px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--benang); }
.tp-names { margin: 14px 0 6px; font-size: clamp(40px, 11vw, 64px); line-height: 1.04; color: var(--benang); display: grid; justify-items: center; gap: 2px; }
.tp-names i { font-style: normal; font-size: .3em; letter-spacing: .6em; color: var(--gading); opacity: .8; }
.tp-date { margin: 4px 0 0; font-size: 18px; color: var(--gading); }
.tp-to { margin: 20px var(--gut) 0; font-size: 15px; color: rgba(243, 232, 208, .78); }
.tp-to b { display: block; margin-top: 2px; font: 400 24px/1.25 var(--disp); color: var(--gading); }
.tp-to small { display: block; font-size: 14px; }
.tp-open { margin-top: 22px; min-height: 52px; padding: 0 34px; border: 1px solid var(--benang); background: var(--benang); color: var(--kain-2); font: 500 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.tp-open:hover { background: transparent; color: var(--benang); }

/* ---------- bilah atas ---------- */
.tp-bar { position: fixed; z-index: 60; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 14px; padding: 8px var(--gut); background: var(--kain-2); border-bottom: 2px solid var(--benang); font: 400 17px/1 var(--disp); transform: translateY(-110%); transition: transform .6s ease .5s; }
body:not(.tp-lock) .tp-bar { transform: none; }
.tp-bar-name { flex: 1; text-decoration: none; color: var(--benang); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-music { width: 36px; height: 36px; border: 1px solid var(--benang); background: transparent; cursor: pointer; display: grid; place-items: center; font-size: 13px; color: var(--benang); }
.tp-music.play { background: var(--benang); color: var(--kain-2); }
main { padding-top: 54px; }

/* ---------- umum ---------- */
.tp-sec { padding: clamp(64px, 11vw, 120px) var(--gut); text-align: center; }
.tp-sec > * { max-width: 920px; margin-inline: auto; }
.tp-h { font-size: clamp(30px, 6vw, 52px); line-height: 1.1; margin-bottom: 36px; }
.tp-h::after { content: ''; display: block; width: 120px; height: 24px; margin: 16px auto 0; background: var(--ketupat) repeat-x center / 24px 24px; }
.tp-gading .tp-h { color: var(--kain); }
.tp-gading .tp-h::after { filter: brightness(.62) saturate(1.3); }
.tp-lead { max-width: 56ch; font-size: 19px; }
.tp-link { display: inline-block; margin-top: 14px; padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 15px/1.3 var(--sans); letter-spacing: .06em; cursor: pointer; text-decoration: none; }
.tp-link:hover { color: var(--benang); }
.tp-gading .tp-link:hover { color: var(--kain); }
.tp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 28px; padding: 0 30px; border: 1px solid var(--benang); background: transparent; color: var(--benang); font: 500 15px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s; }
.tp-btn:hover, .tp-btn.solid { background: var(--benang); color: var(--kain-2); }
.tp-btn.solid:hover { background: transparent; color: var(--benang); }
.tp-gading .tp-btn { border-color: var(--kain); color: var(--kain); }
.tp-gading .tp-btn:hover { background: var(--kain); color: var(--gading); }

/* bingkai foto: dua lapis garis emas dan sudut tumpal */
.tp-frame { position: relative; margin: 0 auto; padding: 10px; background: var(--kain-2); border: 2px solid var(--benang); box-shadow: 0 0 0 5px var(--kain-2), 0 0 0 6px var(--benang-d), 0 24px 44px rgba(0, 0, 0, .35); }
.tp-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tp-frame.sm { max-width: 280px; }

/* ---------- hero ---------- */
.tp-hero { padding: clamp(48px, 8vw, 96px) var(--gut); text-align: center; background-color: var(--kain); background-image: repeating-linear-gradient(45deg, rgba(217, 180, 91, .05) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 7px); }
.tp-hero .tp-frame { max-width: min(420px, 100%); }
.tp-hero .tp-frame img { aspect-ratio: 3 / 4; }
.tp-hero-txt { margin-top: 44px; }
.tp-hero-txt h2 { margin: 12px 0; font-size: clamp(34px, 8vw, 64px); line-height: 1.08; color: var(--benang); }
.tp-hero-txt p { margin: 0; font-size: 18px; }

/* ---------- salam ---------- */
.tp-arab { font: 400 clamp(26px, 5vw, 36px)/1.9 'Amiri', 'Scheherazade New', serif; color: var(--kain); margin: 0 auto 8px; }
.tp-salam blockquote { margin: 34px auto 0; max-width: 52ch; font: italic 400 19px/1.7 var(--sans); color: var(--lembut); }
.tp-salam cite { display: block; margin-top: 8px; font: 500 13px/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- mempelai ---------- */
.tp-couple { display: grid; gap: 56px; }
.tp-person { text-align: center; }
.tp-person .tp-frame { margin-bottom: 26px; }
.tp-person h3 { font-size: clamp(34px, 7vw, 48px); line-height: 1.1; color: var(--benang); margin: 8px 0 2px; }
.tp-full { margin: 0 0 10px; font-size: 18px; }
.tp-par { margin: 0; font-size: 17px; color: rgba(243, 232, 208, .82); }
@media (min-width: 820px) { .tp-couple { grid-template-columns: 1fr 1fr; gap: 72px; } .tp-sec > .tp-couple { max-width: 1000px; } }

/* ---------- hitung mundur ---------- */
.tp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 18px); max-width: 640px !important; }
.tp-tiles div { padding: 18px 4px 14px; background: var(--kain); color: var(--benang); border: 2px solid var(--benang-d); box-shadow: inset 0 0 0 3px var(--kain), inset 0 0 0 4px var(--benang-d); }
.tp-tiles b { display: block; font: 400 clamp(30px, 8vw, 50px)/1 var(--disp); }
.tp-tiles span { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gading); }

/* ---------- acara: selendang ---------- */
.tp-selendang { display: grid; gap: 28px; max-width: 1000px !important; }
.tp-event { padding: 8px 0 8px; background: var(--kain-2); border: 2px solid var(--benang); box-shadow: 0 0 0 5px var(--kain-2), 0 0 0 6px var(--benang-d); text-align: center; }
.tp-event h3 { margin: 22px 0 10px; font-size: clamp(26px, 5vw, 34px); color: var(--benang); }
.tp-event .tp-tumpal.flip { margin-top: 20px; }
.tp-when { margin: 0; font-size: 20px; }
.tp-when.sub { color: rgba(243, 232, 208, .8); font-size: 17px; }
.tp-where { margin: 14px var(--gut) 0; font-size: 17px; }
.tp-where b { font-weight: 700; color: var(--gading); }
@media (min-width: 820px) { .tp-selendang { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.tp-map { margin-top: 36px; border: 2px solid var(--benang); padding: 6px; background: var(--kain-2); }
.tp-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ---------- kisah: benang emas bersimpul ketupat ---------- */
.tp-benang { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 940px !important; }
.tp-benang::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(var(--benang-d), var(--benang), var(--benang-d)); }
.tp-bab { position: relative; display: grid; gap: 18px; justify-items: center; padding: 0 0 64px; }
.tp-node { position: relative; z-index: 1; width: 22px; height: 22px; background: var(--benang); transform: rotate(45deg); border: 4px solid var(--gading); outline: 1px solid var(--benang-d); }
.tp-bab .tp-frame { margin: 0; }
.tp-bab-txt { max-width: 420px; padding: 18px 20px; background: var(--gading); }
.tp-bab-txt .tp-kicker { color: var(--benang-d); }
.tp-bab-txt h3 { margin: 6px 0 8px; font-size: 28px; color: var(--kain); }
.tp-bab-txt p { margin: 0; }
.tp-bab-txt p:last-child { font-size: 17px; }
@media (min-width: 820px) {
	.tp-bab { grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 40px; text-align: left; padding-bottom: 80px; }
	.tp-bab .tp-node { grid-column: 2; grid-row: 1; }
	.tp-bab .tp-frame { grid-column: 1; grid-row: 1; justify-self: end; }
	.tp-bab .tp-bab-txt { grid-column: 3; grid-row: 1; }
	.tp-bab.r .tp-frame { grid-column: 3; justify-self: start; }
	.tp-bab.r .tp-bab-txt { grid-column: 1; justify-self: end; text-align: right; }
}

/* ---------- galeri ---------- */
.tp-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 2vw, 20px); max-width: 1000px !important; }
.tp-sheet button { padding: 6px; border: 2px solid var(--benang); background: var(--kain-2); cursor: zoom-in; transition: transform .4s ease; }
.tp-sheet button:hover { transform: translateY(-4px); }
.tp-sheet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tp-sheet button:nth-child(3n + 1) img { aspect-ratio: 1 / 1; }
@media (min-width: 820px) { .tp-sheet { grid-template-columns: repeat(3, 1fr); } }

/* ---------- hadiah ---------- */
.tp-accts { display: grid; gap: 22px; margin-top: 30px; max-width: 900px !important; }
.tp-acct { padding: 26px 20px; background: var(--kain); color: var(--gading); border: 2px solid var(--benang); box-shadow: 0 0 0 5px var(--kain), 0 0 0 6px var(--benang-d); }
.tp-acct-bank { display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--benang); }
.tp-logo { height: 26px; width: auto; background: #fff; padding: 3px 6px; }
.tp-acct b { display: block; margin: 14px 0 2px; font: 400 clamp(24px, 6vw, 32px)/1.2 var(--disp); letter-spacing: .06em; }
.tp-acct small { display: block; font-size: 15px; opacity: .8; }
.tp-acct .tp-link:hover { color: var(--benang); }
.tp-qris { width: 180px; margin: 16px auto 0; background: #fff; padding: 8px; }
@media (min-width: 720px) { .tp-accts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

/* ---------- rsvp ---------- */
.tp-form { display: grid; gap: 18px; max-width: 560px !important; margin-top: 28px; text-align: left; }
.tp-form label { display: grid; gap: 6px; font: 500 14px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--benang); }
.tp-form input, .tp-form textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--benang-d); background: var(--kain-2); color: var(--gading); font: 400 17px/1.4 var(--sans); letter-spacing: 0; text-transform: none; border-radius: 0; }
.tp-form input:focus, .tp-form textarea:focus { outline: 2px solid var(--benang); border-color: var(--benang); }
.tp-choice { display: grid; grid-template-columns: 1fr 1fr; }
.tp-choice button { min-height: 50px; border: 1px solid var(--benang); background: transparent; color: var(--benang); font: 500 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tp-choice button + button { border-left: 0; }
.tp-choice button.on { background: var(--benang); color: var(--kain-2); }
.tp-step { display: flex; align-items: center; justify-content: space-between; font: 500 14px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--benang); }
.tp-step div { display: flex; align-items: center; gap: 14px; }
.tp-step button { width: 40px; height: 40px; border: 1px solid var(--benang); background: transparent; color: var(--benang); font-size: 20px; cursor: pointer; }
.tp-step b { min-width: 24px; text-align: center; font: 400 24px/1 var(--disp); color: var(--gading); }
.tp-form .tp-btn { width: 100%; }
.tp-msg { min-height: 1.4em; margin: 0; font-size: 16px; text-align: center; color: var(--benang); }
.tp-wall { display: grid; gap: 14px; margin-top: 40px; max-width: 760px !important; text-align: left; }
.tp-wall .nh-note { margin: 0; padding: 18px 20px; background: var(--kain-2); border-left: 3px solid var(--benang); }
.tp-wall blockquote { margin: 0 0 8px; font-size: 17px; }
.tp-wall figcaption { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--benang); }
.tp-wall figcaption em { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

/* ---------- qr dan penutup ---------- */
.tp-qr-box { display: inline-block; padding: 16px; background: #fff; border: 2px solid var(--kain); }
.tp-end { padding: 0 var(--gut) 48px; text-align: center; background: var(--kain-2); }
.tp-end > .tp-tumpal { margin: 0 calc(var(--gut) * -1) 56px; }
.tp-end .tp-frame { max-width: 240px; }
.tp-end-big { margin: 36px 0 12px; font: 400 clamp(38px, 9vw, 64px)/1.1 var(--disp); color: var(--benang); }
.tp-end-txt { max-width: 52ch; margin: 0 auto; }
.tp-end-names { margin: 26px 0 6px; font: 400 26px/1.2 var(--disp); }
.tp-credit { margin: 32px 0 0; font-size: 13px; opacity: .6; }

/* ---------- gerak ---------- */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
[data-rv].in { opacity: 1; transform: none; }
.tp-tiles[data-rv], .tp-frame[data-par] { will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; transition: none; } .tp-half, .tp-splash, .tp-plate { transition: none !important; } }

.nh-bu.tp-conf { background: var(--benang); border-radius: 1px; }