/* ==========================================================
   DInvite — Tema "Potret" (koleksi Foto)
   Foto pengguna menjadi latar utama: sampul layar penuh dengan efek
   zoom sinematik (Ken Burns), slide foto di bagian pembuka, latar foto
   di tiap bagian, foto mempelai bergaya polaroid, dan pita film berjalan.
   Foto diatur oleh undangan.php (variabel --cover, --ph, --img) dan
   assets/js/themes/potret.js. Gerak dimatikan bila perangkat meminta
   gerak minimal.
   ========================================================== */
.t-potret {
    --bg: #0f0d0c; --bg-2: #171412; --card: rgba(255,255,255,.055); --ink: #f6efe5; --muted: #bdb1a1;
    --accent: #dcc29a; --accent-2: #ecd8b6; --on-accent: #15110e; --line: rgba(220,194,154,.24);
    --hero-rgb: 12,10,9; --tint-a: .5; --hero-ink: #fbf6ee;
    --pt-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --pt-glass: rgba(18,15,13,.5);
    color-scheme: dark;
    background: #0f0d0c;
}
.t-potret .page { background: #0f0d0c; box-shadow: none; }
.t-potret .sec--tint { background: #141110; }

/* ---------- Huruf ---------- */
.t-potret .names { font-family: var(--pt-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.t-potret .names i { font-family: var(--pt-serif); font-style: italic; font-weight: 400; color: var(--accent); font-size: .55em; }
.t-potret .cover .names { font-size: clamp(2.9rem, 12.5vw, 4.6rem); line-height: 1.05; }
.t-potret .names--lg { font-size: clamp(2.8rem, 12vw, 3.6rem); line-height: 1.05; }
.t-potret .names--xl { font-size: clamp(3.3rem, 5.4vw, 5rem); line-height: 1.05; }
.t-potret .names--md { font-size: 2rem; color: var(--ink); }
.t-potret .kicker { font-size: .66rem; letter-spacing: .48em; text-indent: .48em; color: var(--accent-2); font-weight: 600; }
.t-potret .cover__date, .t-potret .hero__date, .t-potret .aside__date { font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-size: .82rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--hero-ink); opacity: .92; }
.t-potret .cover__date, .t-potret .hero__date { display: flex; align-items: center; justify-content: center; gap: .8rem; text-indent: .28em; }
.t-potret .cover__date::before, .t-potret .cover__date::after,
.t-potret .hero__date::before, .t-potret .hero__date::after { content: ''; flex: none; width: 22px; height: 1px; background: var(--accent); }
.t-potret .cover__date, .t-potret .hero__date { white-space: nowrap; }
@media (max-width: 440px) {
    .t-potret .cover__date, .t-potret .hero__date { font-size: .74rem; letter-spacing: .18em; gap: .55rem; }
    .t-potret .cover__date::before, .t-potret .cover__date::after, .t-potret .hero__date::before, .t-potret .hero__date::after { width: 14px; }
}
@media (max-width: 350px) { .t-potret .cover__date::before, .t-potret .cover__date::after, .t-potret .hero__date::before, .t-potret .hero__date::after { display: none; } }
.t-potret .sec__title { font-family: var(--pt-serif); font-style: italic; font-weight: 400; font-size: 2.2rem; color: var(--ink); }
.t-potret .sec__title::after { content: ''; width: 46px; height: 1px; margin: .9rem auto 0; background: var(--accent); }
.t-potret .quote { font-family: var(--pt-serif); font-style: italic; font-weight: 400; font-size: 1.22rem; line-height: 1.75; color: var(--ink); }
.t-potret .event h3, .t-potret .lstory__title, .t-potret .tale__title, .t-potret .wishes__title { font-family: var(--pt-serif); font-weight: 500; }
.t-potret .countdown b { font-family: var(--pt-serif); font-weight: 400; }
.t-potret .amp { font-family: var(--pt-serif); color: var(--accent); }
.t-potret .thanks { font-family: var(--pt-serif); }

/* ---------- Sampul: foto layar penuh, zoom perlahan ---------- */
.t-potret .cover { overflow: hidden; background: #0c0a09; }
.t-potret .cover::before {
    inset: 0; border: 0; border-radius: 0; z-index: 0;
    background: radial-gradient(120% 70% at 50% 30%, rgba(220,194,154,.22), transparent 60%), #0c0a09;
}
.t-potret .cover.has-photo::before { background: var(--cover) center 30% / cover no-repeat; animation: ptKen 22s ease-in-out infinite alternate; transform-origin: 50% 35%; }
.t-potret .cover::after {
    inset: 0; border: 0; border-radius: 0; opacity: 1; z-index: 0;
    background: linear-gradient(to bottom, rgba(12,10,9,.42) 0%, rgba(12,10,9,0) 20%, rgba(12,10,9,0) 48%, rgba(12,10,9, calc(var(--tint-a) + .1)) 70%, rgba(12,10,9,.93) 88%, #0c0a09 100%);
}
body[class].t-potret .cover.has-photo { background: #0c0a09; }
.t-potret .cover__inner { z-index: 2; max-width: min(640px, 100%); }
.t-potret .cover .ibtn--solid { background: rgba(251,246,238,.94); color: #15110e; border-color: transparent; box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.t-potret .cover .ibtn--solid:hover { background: #fff; }
.t-potret .cover__to strong { font-family: var(--pt-serif); font-style: italic; font-weight: 400; }
.t-potret .cover.is-open { transform: scale(1.06); opacity: 0; }
@keyframes ptKen {
    0%   { transform: scale(1.02) translate3d(0, 0, 0); }
    100% { transform: scale(1.14) translate3d(-1.5%, -1.2%, 0); }
}

/* Bidik kamera (sudut) di sampul & pembuka — disisipkan potret.js */
.pt-vf { position: absolute; inset: 22px; z-index: 1; pointer-events: none; }
.pt-vf i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(251,246,238,.75); }
.pt-vf i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.pt-vf i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.pt-vf i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.pt-vf i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.pt-vf b { position: absolute; top: 4px; left: 38px; display: flex; align-items: center; gap: .45rem; font: 600 .62rem/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .3em; color: rgba(251,246,238,.82); }
.pt-vf b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e0564a; box-shadow: 0 0 8px #e0564a; animation: ptRec 1.6s ease-in-out infinite; }
@keyframes ptRec { 50% { opacity: .2; } }

/* ---------- Bagian pembuka & panel kiri: slide foto berganti ---------- */
.t-potret .hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; }
body[class].t-potret .hero.has-photo, body[class].t-potret .aside.has-photo {
    background: linear-gradient(to bottom, rgba(12,10,9,.42) 0%, rgba(12,10,9,0) 20%, rgba(12,10,9,0) 48%, rgba(12,10,9, calc(var(--tint-a) + .1)) 70%, rgba(12,10,9,.93) 88%, #0c0a09 100%), var(--cover, none) center 30% / cover no-repeat, #0f0d0c;
}
.ph-show { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0f0d0c; }
.ph-show span { position: absolute; inset: 0; background: var(--img) center 30% / cover no-repeat; opacity: 0; transition: opacity 1.8s ease; will-change: opacity, transform; }
.ph-show span.is-on { opacity: 1; animation: ptKen 9s ease-out both; }
.ph-show::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,10,9,.42) 0%, rgba(12,10,9,0) 20%, rgba(12,10,9,0) 48%, rgba(12,10,9, calc(var(--tint-a) + .1)) 70%, rgba(12,10,9,.93) 88%, #0c0a09 100%); }
.t-potret .hero__inner, .t-potret .aside__inner { z-index: 2; }
.t-potret .aside { overflow: hidden; }
.t-potret .hero__scroll { color: var(--hero-ink); }

/* ---------- Latar foto tiap bagian ---------- */
.t-potret .ph-bg {
    background: linear-gradient(rgba(12,10,9,.58), rgba(12,10,9,.76)), var(--ph) center / cover no-repeat;
    background-attachment: scroll, fixed;
}
@media (hover: none), (max-width: 959px) { .t-potret .ph-bg { background-attachment: scroll; } }
.t-potret .sec--quote.ph-bg { display: grid; place-items: center; align-content: center; min-height: 68vh; padding-block: 4.5rem; }
.t-potret .sec--quote.ph-bg + .sec { padding-top: 4.2rem; }
.t-potret .sec--quote .quote { max-width: 420px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.t-potret .sec--quote .ornament { color: var(--accent); }
.t-potret .sec--closing.ph-bg { display: grid; align-content: end; justify-items: center; min-height: 92vh; padding-bottom: 4rem;
    background: linear-gradient(to bottom, rgba(15,13,12,1) 0%, rgba(12,10,9,.25) 22%, rgba(12,10,9,.35) 50%, rgba(12,10,9,.9) 86%), var(--ph) center / cover no-repeat; }
.t-potret .sec--closing .names--md { font-size: 2.8rem; color: var(--hero-ink); }
.t-potret .sec--closing .lead-txt { color: rgba(251,246,238,.82); }
.t-potret .sec--countdown.ph-bg, .t-potret #acara.ph-bg { padding-block: 5rem; }

/* Kartu kaca di atas foto */
.t-potret .event, .t-potret .countdown div, .t-potret .gift, .t-potret .rsvp, .t-potret .wish, .t-potret .lstory__card {
    background: var(--pt-glass); border-color: rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
.t-potret .event { border-radius: 6px; }
.t-potret .event::before { inset: 8px; border-radius: 3px; border-color: rgba(220,194,154,.22); }
.t-potret .event h3 { color: var(--accent-2); }
.t-potret .countdown div { border-radius: 6px; }
.t-potret .ifld input, .t-potret .ifld textarea, .t-potret .ifld select { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.t-potret .ialert--ok { color: #a9dcae; }
.t-potret .ialert--err { color: #f2b3b3; }

/* ---------- The Couple: foto bergaya polaroid ---------- */
.t-potret .pframe { width: min(232px, 66vw); padding: 10px 10px 38px; margin-bottom: 1.5rem; background: #f6f0e6; border-radius: 3px;
    box-shadow: 0 30px 50px -28px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.3); transform: rotate(-2.2deg); transition: transform .5s ease; }
.t-potret .couple > .person:nth-of-type(2) .pframe { transform: rotate(2.2deg); }
.t-potret .pframe:hover { transform: rotate(0) scale(1.02); }
.t-potret .pframe::before { inset: auto; top: -11px; left: 50%; width: 74px; height: 22px; margin-left: -37px; border: 0; border-radius: 2px; opacity: .85; background: rgba(236,216,182,.75); transform: rotate(-3deg); }
.t-potret .pframe::after { display: none; }
.t-potret .pframe__arch { border-radius: 2px; aspect-ratio: 4 / 5; box-shadow: none; background: #d9d1c5; }
.t-potret .pframe__init { font-family: var(--pt-serif) !important; font-style: italic; color: #8a7458; background: linear-gradient(160deg, #e9e1d4, #cfc4b4); }
.t-potret .couple--framed .amp { font-size: 2.6rem; }

/* ---------- Pita film berjalan ---------- */
.ph-strip { position: relative; overflow: hidden; padding: 18px 0; background: #080706; }
.ph-strip::before, .ph-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; z-index: 1;
    background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(246,239,229,.75) 9px 19px, transparent 19px 28px); opacity: .55; }
.ph-strip::before { top: 4px; }
.ph-strip::after { bottom: 4px; }
.ph-strip__track { display: flex; gap: 8px; width: max-content; animation: ptStrip calc(var(--n, 6) * 6s) linear infinite; }
.ph-strip img { width: auto; height: 132px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; filter: saturate(.92) contrast(1.02); }
@keyframes ptStrip { to { transform: translateX(-50%); } }

/* ---------- Galeri & cerita ---------- */
.t-potret .gslider, .t-potret .gallery__item { border-radius: 4px; }
.t-potret .gallery--grid .gallery__item:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 16 / 10; }
.t-potret .tale__fig { border-radius: 2px; }
.t-potret .tale__fig::after { border-color: rgba(251,246,238,.4); }
.t-potret .tale__text { color: var(--ink); }

@media (min-width: 960px) {
    .t-potret .layout { grid-template-columns: 1fr 500px; }
    .t-potret .aside { padding: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-strip { overflow-x: auto; }
    .ph-strip__track { animation: none; }
    .ph-show span { transition: none; }
}