/* ==========================================================
   DInvite — Tema "Pendopo Agung" (Adat Jawa · Editorial Mewah)
   Seperti memasuki pendopo keraton: pintu gebyok jati berukir terbuka
   perlahan, foto nyata layar penuh dengan parallax halus (foto sampul
   pengguna atau foto venue dari admin), ronce melati, ornamen emas yang
   berkilau, motif parang & kawung. Gading, hijau tua, emas antik, jati.
   Hiasan & parallax dipasang pendopo.js; gerak dimatikan bila perangkat
   meminta gerak minimal.
   ========================================================== */
.t-pendopo {
    --bg: #f7f1e3; --bg-2: #efe6d2; --card: #fffaf0; --ink: #2f2619; --muted: #6f6250;
    --accent: #a77c2c; --accent-2: #173a2c; --on-accent: #fff; --line: rgba(167,124,44,.32);
    --green: #173a2c; --green-2: #10291f; --ivory: #f8efdc; --gold-1: #e2c070;
    --gold: linear-gradient(180deg, #f3dc9a 0%, #cfa752 45%, #a77c2c 100%);
    --hero-rgb: 16,38,29; --tint-a: .55; --hero-ink: #f8efdc;
    --pattern: url(../../img/themes/pendopo/kawung.svg) 0 0 / 60px 60px;
    --parang: url(../../img/themes/pendopo/parang.svg) 0 0 / 48px 100% repeat-x;
    --am-seam: linear-gradient(#f3dc9a, #a77c2c, #f3dc9a);
    color-scheme: light;
}
@keyframes pdFade { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pdLight { 0%, 100% { opacity: .75; transform: translate(-50%, 0) scale(1); } 50% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } }
@keyframes pdSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes pdShine { 0%, 70% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@keyframes pdZoom { from { transform: translate3d(0, var(--py, 0px), 0) scale(1.2); } to { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); } }

/* Huruf: serif Cormorant + sans Jost */
.t-pendopo { font-family: 'Jost', 'Plus Jakarta Sans', sans-serif; font-weight: 300; }
.t-pendopo .names { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.t-pendopo .names i { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .6em; color: var(--accent); }
.t-pendopo .cover .names { font-size: clamp(2.9rem, 12vw, 4.2rem); line-height: 1.05; }
.t-pendopo .names--lg { font-size: clamp(3.2rem, 14vw, 4.6rem); line-height: 1; }
.t-pendopo .names--xl { font-size: clamp(3.4rem, 5vw, 5rem); line-height: 1; }
.t-pendopo .names--md { font-size: 2.2rem; font-style: italic; }
.t-pendopo .kicker { font-family: 'Jost', sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--accent); }
.t-pendopo .sec__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 2.1rem; letter-spacing: .02em; color: var(--ink); }
.t-pendopo .sec__title::after { content: ''; display: block; width: 230px; height: 49px; margin: .1rem auto 0; background: url(../../img/themes/pendopo/pembatas.webp) center / contain no-repeat; }
.t-pendopo .cover__date, .t-pendopo .hero__date, .t-pendopo .aside__date, .t-pendopo .countdown__date { font-family: 'Jost', sans-serif; font-style: normal; font-weight: 400; font-size: .86rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.t-pendopo .thanks { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.3rem; color: var(--accent); }
.t-pendopo .cover__to strong { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.6rem; }
.t-pendopo .quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.28rem; line-height: 1.7; color: var(--ink); }
.t-pendopo .lead-txt, .t-pendopo .person__parents { font-weight: 300; line-height: 1.75; }
.t-pendopo .tm-divider { width: 230px; }
.t-pendopo .ornament { color: var(--accent); }

/* Latar: gading bermotif kawung samar; bagian hijau tua berpita parang emas */
.t-pendopo .page { background: var(--pattern), var(--bg); }
.t-pendopo .sec--tint, .t-pendopo .sec--countdown, .t-pendopo .sec--closing {
    background: radial-gradient(ellipse at 50% 0%, rgba(226,192,112,.12), transparent 60%), var(--green); color: var(--ivory); }
.t-pendopo .sec--tint::before, .t-pendopo .sec--countdown::before, .t-pendopo .sec--closing::before,
.t-pendopo .sec--tint::after, .t-pendopo .sec--countdown::after, .t-pendopo .sec--closing::after {
    content: ''; position: absolute; left: 0; right: 0; height: 14px; background: var(--parang); z-index: 2; pointer-events: none; }
.t-pendopo .sec--tint::before, .t-pendopo .sec--countdown::before, .t-pendopo .sec--closing::before { top: 0; }
.t-pendopo .sec--tint::after, .t-pendopo .sec--countdown::after, .t-pendopo .sec--closing::after { bottom: 0; transform: scaleY(-1); }
.t-pendopo .sec--tint .sec__title, .t-pendopo .sec--countdown .sec__title, .t-pendopo .sec--closing .names { color: var(--ivory); }
.t-pendopo .sec--tint .lead-txt, .t-pendopo .sec--countdown .countdown__date, .t-pendopo .sec--closing .lead-txt { color: rgba(248,239,220,.85); }
.t-pendopo .sec--tint .muted { color: rgba(248,239,220,.7); }

/* Pembuka (pintu gebyok terbuka perlahan) */
.t-pendopo .am-panel { transition-duration: 2.2s; transition-timing-function: cubic-bezier(.55,.05,.2,1); }
.t-pendopo .am-panel::before { background: url(../../img/themes/pendopo/pintu.webp) center / cover no-repeat, #4a2810; }
.t-pendopo .cover { background: radial-gradient(ellipse at 50% 45%, #3b6a52, var(--green-2) 75%); }
.t-pendopo .cover::before, .t-pendopo .cover::after { display: none; }
.t-pendopo .cover__inner { width: min(320px, calc(100vw - 52px)); padding: 1.4rem 1.2rem 1.6rem; gap: .65rem; border-radius: 160px 160px 10px 10px;
    background: linear-gradient(rgba(255,250,240,.96), rgba(247,241,227,.96)), var(--pattern); border: 1.5px solid #cfa752;
    box-shadow: inset 0 0 0 5px rgba(255,250,240,.9), inset 0 0 0 6px rgba(207,167,82,.55), 0 30px 60px -20px rgba(0,0,0,.75); color: var(--ink); }
.t-pendopo .cover__to { margin: .4rem 0 .4rem; }
.t-pendopo .cover .tm-house { width: min(150px, 40vw); animation: pdFade 1.4s ease both; }
.t-pendopo .cover .kicker { animation: pdFade 1.1s ease .3s both; }
.t-pendopo .cover .names { animation: pdFade 1.4s ease .5s both; }
.t-pendopo .cover__date { animation: pdFade 1.1s ease .75s both; }
.t-pendopo .cover__to { animation: pdFade 1.1s ease .95s both; }
.t-pendopo .cover .ibtn { animation: pdFade 1.1s ease 1.15s both; }
@media (min-width: 960px) { .t-pendopo .cover__inner { width: 380px; } }
@media (max-height: 720px) { .t-pendopo .cover .tm-house { width: 104px; } .t-pendopo .cover__inner { gap: .4rem; } }
.t-pendopo .am-garland { height: clamp(70px, 22vw, 120px); background-size: auto 100%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.t-pendopo .am-fall i { width: calc(18px * var(--s)); height: calc(18px * var(--s)); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* ---------- Bagian pembuka: pendopo ---------- */
.t-pendopo .pd-host { position: relative; overflow: hidden; isolation: isolate; }
.t-pendopo .hero, .t-pendopo .aside { background: radial-gradient(ellipse at 50% 40%, #2f5a45, var(--green-2) 72%); color: var(--ivory); min-height: 100svh; }
.t-pendopo .hero .names, .t-pendopo .aside .names, .t-pendopo .hero .names i, .t-pendopo .aside .names i { color: var(--ivory); text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.t-pendopo .hero .kicker, .t-pendopo .aside .kicker, .t-pendopo .hero__date, .t-pendopo .aside__date { color: var(--gold-1); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.t-pendopo .hero__inner, .t-pendopo .aside__inner { z-index: 3; }
.t-pendopo .pd-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.t-pendopo .pd-scene img { position: absolute; display: block; max-width: none; user-select: none; }
.t-pendopo .pd-beam { top: 0; left: 50%; width: 140%; translate: -50% 0; z-index: 2; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.t-pendopo .pd-door { top: 9%; height: 92%; width: auto; z-index: 1; filter: brightness(.82) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.t-pendopo .pd-door--l { left: 0; transform-origin: 0 50%; transform: perspective(900px) rotateY(68deg); }
.t-pendopo .pd-door--r { right: 0; transform-origin: 100% 50%; transform: perspective(900px) rotateY(-68deg); }
body.t-pendopo.is-locked .pd-door--l { transform: perspective(900px) rotateY(20deg); }
body.t-pendopo.is-locked .pd-door--r { transform: perspective(900px) rotateY(-20deg); }
.t-pendopo .pd-door { transition: transform 2.6s cubic-bezier(.5,.05,.2,1) .2s; }
.t-pendopo .pd-untai { top: 8%; height: 56%; width: auto; z-index: 2; transform-origin: 50% 0; animation: pdSway 7s ease-in-out infinite; opacity: .95; }
.t-pendopo .pd-untai--l { left: 3%; }
.t-pendopo .pd-untai--r { right: 3%; animation-delay: -3.5s; }
.t-pendopo .pd-light { position: absolute; left: 50%; top: 18%; width: 140%; aspect-ratio: 1; transform: translate(-50%, 0); z-index: 0; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,214,140,.38), rgba(255,214,140,.1) 50%, transparent); animation: pdLight 6s ease-in-out infinite; }
/* Foto nyata dengan parallax (foto sampul pengguna, atau venue dari admin) */
.t-pendopo .pd-photo { position: absolute; inset: -8% 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(16,38,29,.5) 0%, rgba(16,38,29,.12) 28%, rgba(16,38,29,.5) 48%, rgba(12,30,22,.82) 66%, rgba(12,30,22,.95) 100%), var(--cover, var(--tp-venue)) center 30% / cover no-repeat;
    transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; animation: pdZoom 8s ease-out both; }
.t-pendopo .pd-photo--venue { background-image: linear-gradient(180deg, rgba(16,38,29,.45) 0%, rgba(16,38,29,.1) 28%, rgba(16,38,29,.5) 48%, rgba(12,30,22,.82) 66%, rgba(12,30,22,.95) 100%), var(--tp-venue); }
.t-pendopo .pd-photo--detail { inset: -10% 0; background: linear-gradient(rgba(16,38,29,.86), rgba(16,38,29,.9)), var(--tp-detail) center / cover no-repeat; animation: none; }
.t-pendopo .hero.has-photo, .t-pendopo .aside.has-photo, body.pd-has-venue.t-pendopo .hero, body.pd-has-venue.t-pendopo .aside { background: var(--green-2) !important; place-items: end center; padding-bottom: 3.6rem; }
.t-pendopo .pd-scene--photo .pd-beam { opacity: .95; }
.t-pendopo .hero .tm-house { width: min(150px, 40vw); }
.t-pendopo .aside .tm-house { width: 180px; }
.t-pendopo .hero.has-photo .lx-tilt, body.pd-has-venue .hero .lx-tilt, body.pd-has-venue .aside .lx-tilt { display: block; }
.t-pendopo .hero.has-photo .tm-house, body.pd-has-venue .hero .tm-house { display: block; width: min(110px, 30vw); }
body.t-pendopo:not(.is-locked) .hero .kicker { animation: pdFade 1.2s ease .6s both; }
body.t-pendopo:not(.is-locked) .hero .names { animation: pdFade 1.6s ease .9s both; }
body.t-pendopo:not(.is-locked) .hero__date { animation: pdFade 1.2s ease 1.3s both; }
body.t-pendopo:not(.is-locked) .hero .lx-tilt { animation: pdFade 1.4s ease .3s both; }
.t-pendopo .hero__scroll { border-color: rgba(248,239,220,.6); }

/* Juntaian melati di sisi bagian */
.t-pendopo .pd-scene--side .pd-untai { top: 0; height: min(70%, 560px); opacity: .9; }
.t-pendopo .pd-scene--side .pd-untai--l { left: 4px; }
.t-pendopo .pd-scene--side .pd-untai--r { right: 4px; }
.t-pendopo #mempelai > :not(.pd-scene), .t-pendopo .sec--closing > :not(.pd-scene):not(.pd-photo) { position: relative; z-index: 1; }
.t-pendopo #acara > :not(.pd-photo) { position: relative; z-index: 1; }

/* Transisi sinematik antarbagian */
.t-pendopo .reveal { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(4px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.2s ease; }
.t-pendopo .reveal.is-visible { opacity: 1; transform: none; filter: none; }
.t-pendopo .reveal .sec__title::after { clip-path: inset(0 50% 0 50%); transition: clip-path 1.6s cubic-bezier(.2,.7,.2,1) .35s; }
.t-pendopo .reveal.is-visible .sec__title::after { clip-path: inset(0 0 0 0); }

/* Mempelai: bingkai lengkung emas dengan foto */
.t-pendopo .pframe::before { border: 1.5px solid #cfa752; border-radius: 999px 999px 8px 8px; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(207,167,82,.5); }
.t-pendopo .pframe::after { background: #cfa752; box-shadow: 0 0 0 4px var(--bg); }
.t-pendopo .pframe__arch { border-radius: 999px 999px 4px 4px; box-shadow: 0 24px 44px -24px rgba(23,58,44,.7); }
.t-pendopo .pframe__init { color: #cfa752; font-family: 'Cormorant Garamond', serif; font-style: italic; }
.t-pendopo .person__soc .psoc { background: var(--green); color: var(--gold-1); }

/* Hitung mundur di bagian hijau */
.t-pendopo .countdown div { border: 1px solid rgba(226,192,112,.45); background: rgba(255,255,255,.04); border-radius: 999px 999px 10px 10px; }
.t-pendopo .countdown b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 2.3rem; color: var(--gold-1); }
.t-pendopo .countdown small { color: rgba(248,239,220,.8); letter-spacing: .2em; font-size: .62rem; }

/* Kartu acara, hadiah, RSVP */
.t-pendopo .event { border-radius: 4px; border: 1px solid rgba(226,192,112,.45); background: rgba(255,255,255,.035); color: var(--ivory);
    box-shadow: inset 0 0 0 5px rgba(16,38,29,.6), inset 0 0 0 6px rgba(226,192,112,.25); position: relative; overflow: hidden; }
.t-pendopo .event::before { inset: auto 0 0; height: 0; border: 0; }
.t-pendopo .event::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,230,170,.12) 50%, transparent 60%) 200% 0 / 250% 100% no-repeat; animation: pdShine 7s ease-in-out infinite; }
.t-pendopo .event h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: 2rem; color: var(--gold-1); }
.t-pendopo .event > * { position: relative; z-index: 1; }
.t-pendopo .sec--tint .event p, .t-pendopo .sec--tint .event small, .t-pendopo .sec--tint .event span { color: rgba(248,239,220,.82); }
.t-pendopo .sec--tint .event strong, .t-pendopo .sec--tint .event b { color: var(--ivory); }
.t-pendopo .gift, .t-pendopo .rsvp, .t-pendopo .wish, .t-pendopo .qr-card, .t-pendopo .lstory__card {
    border-radius: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 20px 40px -30px rgba(23,58,44,.45); }
.t-pendopo .sec--tint .qr-card { color: var(--ink); }
.t-pendopo .divider { background: #cfa752; }
.t-pendopo .lstory__dot { background: #cfa752; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(207,167,82,.4); }
.t-pendopo .lstory__title, .t-pendopo .tale__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; color: var(--accent-2); }
.t-pendopo .amp { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--accent); }

/* Tombol: emas antik berkilau */
.t-pendopo .ibtn { border-radius: 2px; font-family: 'Jost', sans-serif; font-weight: 400; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; border-color: #cfa752; color: var(--accent); }
.t-pendopo .sec--tint .ibtn:not(.ibtn--solid), .t-pendopo .sec--countdown .ibtn:not(.ibtn--solid) { color: var(--gold-1); border-color: rgba(226,192,112,.7); }
.t-pendopo .ibtn--solid { position: relative; overflow: hidden; background: var(--gold); color: #fff; border-color: #cfa752; text-shadow: 0 1px 1px rgba(80,55,10,.45); box-shadow: 0 12px 26px -14px rgba(167,124,44,.95); }
.t-pendopo .ibtn--solid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 200% 0 / 250% 100% no-repeat; animation: pdShine 5s ease-in-out infinite 1.5s; pointer-events: none; }
.t-pendopo .ibtn--solid:hover { background: linear-gradient(180deg, #f7e4a8, #d6b05c 45%, #b08732); color: #fff; }

/* Penutup */
.t-pendopo .sec--closing { padding-block: 5rem; padding-inline: 2.6rem; }
.t-pendopo #mempelai { padding-inline: 2.4rem; }
.t-pendopo .sec--closing .tm-house { width: 120px; }
.t-pendopo .ifoot { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
    .t-pendopo .reveal { opacity: 1; transform: none; filter: none; transition: none; }
    .t-pendopo .reveal .sec__title::after { clip-path: none; }
    .t-pendopo .pd-untai, .t-pendopo .pd-light, .t-pendopo .pd-photo, .t-pendopo .event::after, .t-pendopo .ibtn--solid::after { animation: none; }
    .t-pendopo .pd-door { transition: none; }
}