/* ==========================================================
   DInvite — Tema "Puncak Fajar" (Pegunungan saat fajar)
   Barisan gunung berlapis dengan parallax (gulir & gerak jari/mouse),
   matahari terbit, awan & kabut melayang, burung terbang, hutan pinus.
   Saat dibuka: kamera seolah terbang masuk ke lembah. Bagian gelap
   diawali siluet pegunungan & bertabur bintang.
   Pemandangan dipasang puncak.js; gerak dimatikan bila diminta perangkat.
   ========================================================== */
.t-puncak {
    --bg: #f8f1ec; --bg-2: #f1e6e0; --card: #fffaf7; --ink: #22304a; --muted: #5f6a80;
    --accent: #c47a63; --accent-2: #22304a; --on-accent: #fff; --line: rgba(34,48,74,.16);
    --night: #121c2c; --night-2: #1c2a42; --dawn: #f2a99a; --gold: #f3c98b;
    --hero-rgb: 34,48,74; --tint-a: .35; --hero-ink: #ffffff;
    --sky: linear-gradient(180deg, #3a4680 0%, #6a6aa0 26%, #b98aa6 46%, #eda596 62%, #fbd3b0 78%, #fde6cc 100%);
    --ease: cubic-bezier(.22,.61,.12,1);
    color-scheme: light;
}
@keyframes pkSun { from { transform: translate(-50%, 70%); opacity: .2; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes pkGlow { 0%, 100% { opacity: .75; transform: translate(-50%, 0) scale(1); } 50% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } }
@keyframes pkCloud { from { transform: translateX(-12vw); } to { transform: translateX(12vw); } }
@keyframes pkMist { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@keyframes pkBird { 0% { transform: translate(-10vw, 0) scale(var(--s)); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(55vw, -6vh) scale(var(--s)); } 92% { opacity: 1; } 100% { transform: translate(120vw, -2vh) scale(var(--s)); opacity: 0; } }
@keyframes pkWing { 0%, 100% { d: path('M0 6 Q6 0 12 6 Q18 0 24 6'); } 50% { d: path('M0 4 Q6 8 12 6 Q18 8 24 4'); } }
@keyframes pkUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pkTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes pkTick { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }

/* ---------- Huruf ---------- */
.t-puncak { font-family: 'Jost', 'Plus Jakarta Sans', sans-serif; font-weight: 300; color: var(--ink); background: var(--bg); }
.t-puncak .page { background: var(--bg); }
.t-puncak .names { font-family: 'Parisienne', cursive; font-weight: 400; font-style: normal; color: var(--ink); line-height: 1.1; letter-spacing: 0; }
.t-puncak .names i { font-family: 'Marcellus', serif; font-style: normal; font-size: .5em; color: var(--accent); vertical-align: .2em; }
.t-puncak .cover .names { font-size: clamp(3.2rem, 15vw, 4.6rem); }
.t-puncak .names--lg { font-size: clamp(3.6rem, 17vw, 5.2rem); }
.t-puncak .names--xl { font-size: clamp(4rem, 6vw, 6rem); }
.t-puncak .names--md { font-size: 2.3rem; }
.t-puncak .kicker { font: 400 .74rem/1 'Marcellus', serif; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); padding-left: .4em; }
.t-puncak .sec { padding: 4.4rem 1.6rem; }
.t-puncak .sec__title { font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.15 'Marcellus', serif; letter-spacing: .04em; color: var(--ink); }
.t-puncak .sec__title::after { content: ''; display: block; width: 190px; max-width: 60vw; height: 54px; margin: .2rem auto 0; background: url(../../img/themes/puncak/pinus.webp) center / contain no-repeat; }
.t-puncak .cover__date, .t-puncak .hero__date, .t-puncak .aside__date, .t-puncak .countdown__date { font: 400 .86rem/1.4 'Marcellus', serif; font-style: normal; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
.t-puncak .lead-txt, .t-puncak .person__parents, .t-puncak .story { line-height: 1.8; color: var(--muted); }
.t-puncak .quote { font: italic 400 1.15rem/1.8 'Jost', sans-serif; color: var(--ink); }
.t-puncak .thanks { font: 400 2.6rem 'Parisienne', cursive; color: var(--accent); }
.t-puncak .amp { font: 400 3rem 'Parisienne', cursive; color: var(--accent); }
.t-puncak .ornament { color: var(--accent); }
.t-puncak .divider { background: linear-gradient(90deg, transparent, var(--accent), transparent); height: 1px; }

/* ---------- Tombol ---------- */
.t-puncak .ibtn { border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); font: 400 .76rem/1 'Marcellus', serif; letter-spacing: .2em; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease), transform .25s; }
.t-puncak .ibtn:hover { background: var(--ink); color: #fff; }
.t-puncak .ibtn--solid { background: linear-gradient(135deg, #d98c72, #b7664f); border-color: transparent; color: #fff; box-shadow: 0 14px 30px -14px rgba(183,102,79,.9); }
.t-puncak .ibtn--solid:hover { background: linear-gradient(135deg, #e39a80, #c4705a); color: #fff; }
.t-puncak #openBtn:hover { transform: translateY(-2px); }

/* ==========================================================
   PEMANDANGAN (sampul, pembuka, panel kiri, penutup)
   ========================================================== */
.t-puncak .pk-host { overflow: hidden; isolation: isolate; }
.t-puncak .pk-host:not(.cover) { position: relative; }
.t-puncak .pk-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky); }
.t-puncak .pk-stars { position: absolute; inset: 0 0 55%; opacity: .55; background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent), radial-gradient(1px 1px at 76% 6%, #fff, transparent), radial-gradient(1px 1px at 88% 22%, #fff, transparent), radial-gradient(1px 1px at 44% 26%, #fff, transparent), radial-gradient(1px 1px at 6% 34%, #fff, transparent); animation: pkTwinkle 5s ease-in-out infinite; }
.t-puncak .pk-sun { position: absolute; left: 66%; bottom: 47%; width: 190px; height: 190px; border-radius: 50%; transform: translate(-50%, 0);
    background: radial-gradient(circle, #fff8e6 0 22%, #ffe9c4 26%, rgba(255,222,180,.55) 38%, rgba(255,210,170,.18) 55%, rgba(255,210,170,0) 70%); animation: pkSun 3.2s var(--ease) .3s both; }
.t-puncak .pk-glow { position: absolute; left: 66%; bottom: 26%; width: 160%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 0); background: radial-gradient(closest-side, rgba(255,220,180,.45), rgba(255,200,170,.12) 55%, transparent); animation: pkGlow 7s ease-in-out infinite; }
.t-puncak .pk-cloud { position: absolute; width: 70%; max-width: 620px; opacity: .85; animation: pkCloud 38s ease-in-out infinite alternate; }
.t-puncak .pk-cloud--1 { top: 14%; left: -6%; }
.t-puncak .pk-cloud--2 { top: 6%; right: -10%; width: 54%; animation-duration: 46s; animation-direction: alternate-reverse; opacity: .7; }
.t-puncak .pk-l { position: absolute; left: 50%; width: max(100%, 920px); height: auto; max-width: none; transform: translate3d(calc(-50% + var(--mx, 0px) * var(--k, 0)), calc(var(--py, 0px) * var(--k, 0)), 0); will-change: transform; transition: transform .9s var(--ease); }
.t-puncak .pk-l--1 { bottom: 22%; --k: .15; }
.t-puncak .pk-l--2 { bottom: 15%; --k: .3; }
.t-puncak .pk-l--3 { bottom: 8%; --k: .5; }
.t-puncak .pk-l--4 { bottom: 0; --k: .75; }
.t-puncak .pk-l--5 { bottom: -8%; --k: 1; }
.t-puncak .pk-mist { position: absolute; left: 0; width: 200%; height: 22%; pointer-events: none; background: radial-gradient(40% 60% at 25% 50%, rgba(255,240,240,.7), transparent 70%), radial-gradient(35% 55% at 70% 50%, rgba(255,236,236,.55), transparent 70%); animation: pkMist 30s linear infinite alternate; }
.t-puncak .pk-mist--a { bottom: 24%; }
.t-puncak .pk-mist--b { bottom: 8%; opacity: .7; animation-duration: 40s; animation-direction: alternate-reverse; }
.t-puncak .pk-birds { position: absolute; left: 0; top: 22%; width: 100%; height: 20%; }
.t-puncak .pk-birds svg { position: absolute; left: 0; width: 26px; height: 10px; overflow: visible; animation: pkBird var(--d, 26s) linear infinite; animation-delay: var(--delay, 0s); }
.t-puncak .pk-birds path { fill: none; stroke: #2c3558; stroke-width: 1.6; stroke-linecap: round; animation: pkWing .6s ease-in-out infinite; }
.t-puncak .pk-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, var(--night)); }

/* ---------- Sampul ---------- */
.t-puncak .cover, body.t-puncak .cover.has-photo { background: var(--night); color: #fff; place-items: start center; padding: 13vh 1.5rem 2rem; }
.t-puncak .cover::before, .t-puncak .cover::after { display: none; }
.t-puncak .cover .tm-house, .t-puncak .cover .lx-tilt { display: none; }
.t-puncak .cover__inner { position: relative; z-index: 3; gap: .6rem; max-width: 360px; }
.t-puncak .cover .names, .t-puncak .hero .names, .t-puncak .aside .names { color: #fff; text-shadow: 0 4px 30px rgba(34,48,74,.45); }
.t-puncak .cover .names i, .t-puncak .hero .names i, .t-puncak .aside .names i { color: var(--gold); }
.t-puncak .cover .kicker, .t-puncak .hero .kicker, .t-puncak .aside .kicker { color: #fde6cc; text-shadow: 0 1px 10px rgba(34,48,74,.5); }
.t-puncak .cover__date, .t-puncak .hero__date, .t-puncak .aside__date { color: #fff; text-shadow: 0 1px 10px rgba(34,48,74,.5); }
.t-puncak .cover__to { margin: .3rem 0 .6rem; padding: .8rem 1.1rem; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.t-puncak .cover__to small { color: rgba(255,255,255,.85); }
.t-puncak .cover__to strong { font: 400 1.4rem 'Marcellus', serif; color: #fff; }
.t-puncak .cover .kicker { animation: pkUp 1.1s var(--ease) .5s both; }
.t-puncak .cover .names { animation: pkUp 1.4s var(--ease) .75s both; }
.t-puncak .cover__date { animation: pkUp 1.1s var(--ease) 1s both; }
.t-puncak .cover__to { animation: pkUp 1.1s var(--ease) 1.2s both; }
.t-puncak .cover .ibtn { animation: pkUp 1.1s var(--ease) 1.4s both; }
@media (max-height: 720px) { .t-puncak .cover { padding-top: 6vh; } .t-puncak .cover__inner { gap: .4rem; } }
/* Dibuka: kamera terbang masuk ke lembah, lalu sampul memudar */
.t-puncak .cover.is-open { transform: none; opacity: 0; transition: opacity 1.1s ease .55s; }
.t-puncak .cover.is-open .cover__inner { opacity: 0; transform: translateY(-30px); transition: opacity .5s, transform .7s var(--ease); }
.t-puncak .cover.is-open .pk-l { transition: transform 1.6s cubic-bezier(.6,0,.3,1), opacity 1.4s; transform: translate3d(-50%, 0, 0) scale(calc(1 + var(--k) * .9)); transform-origin: 50% 100%; }
.t-puncak .cover.is-open .pk-l--5 { opacity: 0; }
.t-puncak .cover.is-open .pk-cloud { transition: transform 1.6s var(--ease); transform: scale(1.6) translateY(-20%); }

/* ---------- Bagian pembuka & panel kiri ---------- */
.t-puncak .hero, .t-puncak .aside, body.t-puncak .hero.has-photo, body.t-puncak .aside.has-photo { min-height: 100svh; background: var(--night); color: #fff; place-items: start center; padding: 15vh 1.5rem 3rem; }
.t-puncak .hero .tm-house, .t-puncak .aside .tm-house, .t-puncak .hero .lx-tilt, .t-puncak .aside .lx-tilt { display: none; }
.t-puncak .hero__inner, .t-puncak .aside__inner { position: relative; z-index: 3; }
.t-puncak .hero__scroll { position: absolute; left: 50%; bottom: 2rem; margin-left: -11px; z-index: 3; border-color: rgba(255,255,255,.7); color: #fff; }
body.t-puncak:not(.is-locked) .hero .kicker { animation: pkUp 1.2s var(--ease) .6s both; }
body.t-puncak:not(.is-locked) .hero .names { animation: pkUp 1.5s var(--ease) .85s both; }
body.t-puncak:not(.is-locked) .hero__date { animation: pkUp 1.2s var(--ease) 1.15s both; }
.t-puncak .hero .countdown div { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.t-puncak .hero .countdown b { color: #fff; }
.t-puncak .hero .countdown small { color: rgba(255,255,255,.8); }
.t-puncak .hero .ibtn:not(.ibtn--solid) { color: #fff; border-color: rgba(255,255,255,.7); }
/* Foto pasangan (bila ada): lingkaran berbingkai di langit fajar */
.t-puncak .pk-portrait { position: relative; z-index: 3; width: min(150px, 38vw); aspect-ratio: 1; margin: 0 auto .4rem; border-radius: 50%; overflow: hidden;
    background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat; box-shadow: 0 0 0 4px rgba(255,255,255,.75), 0 0 0 10px rgba(255,255,255,.18), 0 20px 40px -16px rgba(34,48,74,.6); }

/* ==========================================================
   ISI
   ========================================================== */
.t-puncak .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.t-puncak .reveal.is-visible { opacity: 1; transform: none; }
/* Bagian gelap: diawali siluet pegunungan & bertabur bintang */
.t-puncak .sec--tint, .t-puncak .sec--countdown { position: relative; margin-top: 90px; background: radial-gradient(1px 1px at 15% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 86% 44%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 38% 62%, rgba(255,255,255,.5), transparent), linear-gradient(var(--night), var(--night-2)); color: #fff; }
.t-puncak .sec--tint::before, .t-puncak .sec--countdown::before { content: ''; position: absolute; left: 0; right: 0; top: -99px; height: 100px; pointer-events: none; background: url(../../img/themes/puncak/g5.webp) center -92px / max(100%, 920px) auto repeat-x; }
.t-puncak .sec--tint .sec__title, .t-puncak .sec--countdown .sec__title { color: #fff; }
.t-puncak .sec--tint .sec__title::after, .t-puncak .sec--countdown .sec__title::after { filter: brightness(1.6) saturate(.6); }
.t-puncak .sec--tint .lead-txt, .t-puncak .sec--tint .muted { color: rgba(255,255,255,.78); }
.t-puncak .sec--countdown .countdown__date { color: var(--gold); }
.t-puncak .sec--tint + .sec--tint, .t-puncak .sec--countdown + .sec--tint { margin-top: 0; }
.t-puncak .sec--countdown + .sec--tint::before, .t-puncak .sec--tint + .sec--tint::before { display: none; }

/* Mempelai */
.t-puncak .pframe::before { border: 1px solid var(--accent); border-radius: 999px 999px 20px 20px; box-shadow: none; }
.t-puncak .pframe::after { background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.t-puncak .pframe__arch { border-radius: 999px 999px 16px 16px; box-shadow: 0 24px 44px -24px rgba(34,48,74,.55); background: var(--sky); }
.t-puncak .pframe__init { font: 400 4rem 'Parisienne', cursive; color: #fff; }
.t-puncak .person__soc .psoc { background: var(--ink); color: #fff; }

/* Hitung mundur di langit malam */
.t-puncak .countdown div { border-radius: 16px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); box-shadow: none; }
.t-puncak .countdown b { display: block; overflow: hidden; font: 400 2.2rem/1.1 'Marcellus', serif; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.t-puncak .countdown b.pk-tick { animation: pkTick .6s var(--ease); }
.t-puncak .countdown small { color: rgba(255,255,255,.75); letter-spacing: .16em; text-transform: uppercase; font-size: .58rem; }
.t-puncak .sec--countdown .ibtn:not(.ibtn--solid), .t-puncak .sec--tint .ibtn:not(.ibtn--solid) { color: #fff; border-color: rgba(255,255,255,.6); }
.t-puncak .sec--countdown .ibtn:not(.ibtn--solid):hover, .t-puncak .sec--tint .ibtn:not(.ibtn--solid):hover { background: #fff; color: var(--ink); }

/* Acara: kartu kaca di malam pegunungan */
.t-puncak .event { border-radius: 22px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.7); }
.t-puncak .event::before { display: none; }
.t-puncak .event h3 { font: 400 2.3rem 'Parisienne', cursive; color: var(--gold); }
.t-puncak .sec--tint .event p, .t-puncak .sec--tint .event small, .t-puncak .sec--tint .event span { color: rgba(255,255,255,.82); }
.t-puncak .sec--tint .event strong, .t-puncak .sec--tint .event b, .t-puncak .event__place { color: #fff; }
.t-puncak .event__date { font-family: 'Marcellus', serif; letter-spacing: .14em; text-transform: uppercase; }
.t-puncak .event__map { border-radius: 14px; border-color: rgba(255,255,255,.2); }

/* Love story, galeri, kartu */
.t-puncak .lstory::before { background: linear-gradient(var(--line), var(--accent), var(--line)); }
.t-puncak .lstory__dot { background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(196,122,99,.35); }
.t-puncak .lstory__card { border-radius: 18px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 20px 40px -32px rgba(34,48,74,.5); }
.t-puncak .lstory__title, .t-puncak .tale__title { font: 400 1.35rem 'Marcellus', serif; color: var(--ink); }
.t-puncak .lstory__date { color: var(--accent); letter-spacing: .18em; text-transform: uppercase; font-size: .68rem; }
.t-puncak .gallery__item, .t-puncak .gslider__slide, .t-puncak .gslider__slide img { border-radius: 16px; }
.t-puncak .gslider__dots button.is-active { background: var(--accent); }
.t-puncak .gift, .t-puncak .rsvp, .t-puncak .wish, .t-puncak .qr-card { border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 20px 40px -32px rgba(34,48,74,.5); }
.t-puncak .sec--tint .qr-card { color: var(--ink); }
.t-puncak .ifld input, .t-puncak .ifld textarea, .t-puncak .ifld select { border-radius: 12px; }
.t-puncak .wishes__title { font-family: 'Marcellus', serif; color: var(--ink); }

/* Penutup: pemandangan senja */
.t-puncak .sec--closing { min-height: 92svh; display: grid; place-content: start center; padding: 14vh 1.6rem 40vh; background: var(--night); color: #fff; }
.t-puncak .sec--closing .tm-house, .t-puncak .sec--closing .lx-tilt { display: none; }
.t-puncak .sec--closing > :not(.pk-scene) { position: relative; z-index: 2; }
.t-puncak .sec--closing .names { color: #fff; text-shadow: 0 4px 30px rgba(34,48,74,.45); }
.t-puncak .sec--closing .lead-txt { color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(34,48,74,.6); }
.t-puncak .sec--closing .thanks { color: #fde6cc; }
.t-puncak .sec--closing .pk-scene { background: linear-gradient(180deg, #2b3366 0%, #6b5c94 30%, #c77f8f 55%, #f2a585 75%, #f9cf9e 100%); }
.t-puncak .ifoot { border-top: 0; background: var(--night); color: rgba(255,255,255,.75); }
.t-puncak .ifoot .ifoot__txt, .t-puncak .ifoot a { color: rgba(255,255,255,.8); }

@media (min-width: 960px) {
    .t-puncak .aside { padding-top: 12vh; }
    .t-puncak .aside .pk-l { width: max(100%, 1500px); }
}

@media (prefers-reduced-motion: reduce) {
    .t-puncak .pk-sun, .t-puncak .pk-glow, .t-puncak .pk-cloud, .t-puncak .pk-mist, .t-puncak .pk-stars, .t-puncak .pk-birds, .t-puncak .countdown b.pk-tick,
    .t-puncak .cover *, body.t-puncak .hero * { animation: none !important; }
    .t-puncak .pk-birds { display: none; }
    .t-puncak .pk-l { transition: none; }
    .t-puncak .reveal { opacity: 1; transform: none; transition: none; }
    .t-puncak .cover.is-open, .t-puncak .cover.is-open * { transition-duration: .01s !important; }
}

/* Kaki pemandangan selalu menyatu dengan warna malam */
.t-puncak .pk-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5%; background: var(--night); z-index: 1; }