@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Paspor Travel" (koleksi Hobi)
   Paspor cinta bersampul biru dongker berlambang emas yang terbuka;
   halaman data bermotif guilloche dengan foto & baris MRZ; halaman
   visa dengan cap imigrasi berwarna yang tertera satu per satu;
   papan keberangkatan untuk hitung mundur; pesawat menyusuri rute.
   ========================================================== */
.t-trpaspor {
    --bg: #f3eee2; --card: #fbf8f0; --ink: #1f2a44; --muted: #66708a; --line: rgba(31,42,68,.2);
    --accent: #b3402f; --accent-2: #2f6f78; --on-accent: #fff; --hero-rgb: 20,32,62; --tint-a: .5; --hero-ink: #1f2a44;
    --navy: #1d2a52; --gold: #c9a65a; --gold-2: #ecd79f;
    --deep: #152040; --soft: #e6dfcf; --field: #fffdf7; --ring: rgba(47,111,120,.16);
    --fn: 'Alex Brush', cursive; --fh: 'Libre Baskerville', Georgia, serif; --fb: 'Libre Baskerville', Georgia, serif; --fn-k: 1.12; --fh-w: 400; --fh-ls: .02em;
    --mono: 'Space Mono', ui-monospace, monospace;
    --guil: repeating-radial-gradient(circle at 20% 30%, transparent 0 6px, rgba(47,111,120,.07) 6px 7px), repeating-radial-gradient(circle at 80% 70%, transparent 0 7px, rgba(179,64,47,.06) 7px 8px), repeating-linear-gradient(60deg, transparent 0 10px, rgba(31,42,68,.03) 10px 11px), #f6f1e4;
    --card-r: 10px; --btn-r: 8px; --cd-r: 6px; --ph-r: 6px;
    color-scheme: light;
}
@keyframes ppOpen { 0% { transform: perspective(1600px) rotateY(0); } 100% { transform: perspective(1600px) rotateY(-115deg); } }
@keyframes ppStamp { 0% { opacity: 0; transform: scale(1.9) rotate(var(--r, -8deg)); } 55% { opacity: 1; transform: scale(.94) rotate(var(--r, -8deg)); } 100% { opacity: .9; transform: scale(1) rotate(var(--r, -8deg)); } }
@keyframes ppFly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes ppFlap { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes ppDash { to { stroke-dashoffset: -40; } }

body.t-trpaspor .page { background: var(--guil); }
.t-trpaspor .sec--tint, .t-trpaspor .sec--countdown { background: linear-gradient(rgba(47,111,120,.05), rgba(47,111,120,.05)), var(--guil); }
body.t-trpaspor .names { color: var(--navy); }
body.t-trpaspor .names i { font-family: var(--fh); font-style: italic; color: var(--accent); font-size: .42em; }
body.t-trpaspor .kicker { font: 700 .66rem/1 var(--mono); letter-spacing: .32em; color: var(--accent-2); }
body.t-trpaspor .cover__date, body.t-trpaspor .hero__date, body.t-trpaspor .aside__date, body.t-trpaspor .countdown__date, body.t-trpaspor .event__date { font-family: var(--mono); letter-spacing: .14em; font-weight: 700; }

/* Sampul: buku paspor */
.t-trpaspor .cover, body.t-trpaspor .cover.has-photo { place-items: center; padding: 1.6rem; overflow: hidden; background: var(--guil); color: var(--gold-2); }
.t-trpaspor .pp-under { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .8rem/1.8 var(--mono); letter-spacing: .2em; color: var(--muted); text-align: center; }
.t-trpaspor .pp-book { position: relative; z-index: 3; width: min(330px, calc(100vw - 40px)); height: min(560px, calc(100svh - 3.2rem)); display: grid; place-items: center; padding: 2rem 1.6rem; border-radius: 10px 18px 18px 10px; transform-origin: 0 50%;
    background: radial-gradient(130% 90% at 70% 10%, rgba(255,255,255,.1), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px), var(--navy);
    box-shadow: inset 10px 0 14px -8px rgba(0,0,0,.55), 0 30px 50px -24px rgba(10,15,35,.75); }
.t-trpaspor .pp-book::after { content: ''; position: absolute; inset: 12px; border-radius: 6px 12px 12px 6px; border: 1px solid rgba(201,166,90,.35); pointer-events: none; }
.t-trpaspor .pp-crest { width: 108px; height: 108px; margin: 0 auto .4rem; }
.t-trpaspor .pp-crest svg { width: 100%; height: 100%; overflow: visible; }
.t-trpaspor .pp-word { font: 700 1.05rem/1.2 var(--fh); letter-spacing: .3em; color: var(--gold); text-transform: uppercase; }
.t-trpaspor .pp-sub { font: 400 .6rem/1 var(--mono); letter-spacing: .36em; color: rgba(236,215,159,.7); }
.t-trpaspor .pp-chip { width: 34px; height: 24px; margin: .6rem auto 0; border: 1.4px solid var(--gold); border-radius: 5px; background: linear-gradient(var(--gold), var(--gold)) 50% 0 / 1.4px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) 0 50% / 100% 1.4px no-repeat; opacity: .8; }
.t-trpaspor .cover__inner { position: relative; z-index: 2; gap: .45rem; max-width: 280px; }
body.t-trpaspor .cover .names { color: var(--gold-2); }
body.t-trpaspor .cover .names i { color: var(--gold); }
body.t-trpaspor .cover .kicker { color: var(--gold); }
body.t-trpaspor .cover__date { color: var(--gold-2); }
.t-trpaspor .cover__to { margin: .3rem 0 .6rem; padding: .7rem .9rem; border-radius: 8px; border: 1px dashed rgba(236,215,159,.45); }
.t-trpaspor .cover__to small { color: rgba(236,215,159,.7); }
.t-trpaspor .cover__to strong { font: 700 1.15rem/1.3 var(--fh); color: #fff6dc; }
body.t-trpaspor .cover .ibtn--solid { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy); border-color: transparent; }
body.t-trpaspor .ibtn { border: 1.5px solid var(--navy); color: var(--navy); font: 700 .74rem/1 var(--mono); letter-spacing: .14em; }
body.t-trpaspor .ibtn:hover { background: var(--navy); color: #fff; }
body.t-trpaspor .ibtn--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
body.t-trpaspor .ibtn--solid::after { display: none; }
.t-trpaspor .cover.is-open { transform: none; opacity: 0; transition: opacity .35s ease .7s; pointer-events: none; }
.t-trpaspor .cover.is-open .pp-book { animation: ppOpen .9s cubic-bezier(.5,0,.3,1) forwards; }
@media (max-height: 740px) { .t-trpaspor .pp-crest { width: 70px; height: 70px; } .t-trpaspor .cover__to small:last-child { display: none; } .t-trpaspor .cover__inner { gap: .3rem; } }

/* Pembuka: halaman data */
.t-trpaspor .hero, .t-trpaspor .aside, body.t-trpaspor .hero.has-photo, body.t-trpaspor .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; place-items: center; padding: 4rem 1.3rem; background: var(--guil); color: var(--ink); }
.t-trpaspor .hero__inner, .t-trpaspor .aside__inner { position: relative; z-index: 2; width: 100%; max-width: 380px; }
.t-trpaspor .pp-data { position: relative; display: grid; grid-template-columns: 38% 1fr; gap: .9rem; padding: 1.1rem 1rem 0; border-radius: 12px; text-align: left; background: rgba(255,253,246,.85); border: 1px solid var(--line); box-shadow: 0 20px 36px -28px rgba(20,30,60,.5); overflow: hidden; }
.t-trpaspor .pp-data::before { content: attr(data-head); grid-column: 1 / -1; font: 700 .56rem/1 var(--mono); letter-spacing: .24em; color: var(--accent-2); }
.t-trpaspor .pp-photo { aspect-ratio: 3 / 4; border-radius: 4px; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, linear-gradient(160deg, #d9d2c0, #bfb59d); filter: saturate(.85) contrast(1.02); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); display: grid; place-items: center; font: 400 2.2rem/1 var(--fn); color: rgba(255,255,255,.95); }
.t-trpaspor .pp-fields { display: grid; gap: .45rem; align-content: start; }
.t-trpaspor .pp-fields span { display: grid; gap: .1rem; }
.t-trpaspor .pp-fields small { font: 700 .5rem/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.t-trpaspor .pp-fields b { font: 700 .88rem/1.25 var(--fh); color: var(--ink); overflow-wrap: anywhere; }
.t-trpaspor .pp-mrz { grid-column: 1 / -1; margin: .2rem -1rem 0; padding: .6rem 1rem .7rem; background: rgba(31,42,68,.05); font: 400 .66rem/1.5 var(--mono); letter-spacing: .1em; color: var(--ink); white-space: nowrap; overflow: hidden; }
.t-trpaspor .pp-stamp { position: absolute; display: grid; place-items: center; padding: .4rem .7rem; border: 2.5px double var(--c, var(--accent)); border-radius: var(--br, 10px); color: var(--c, var(--accent)); font: 700 .62rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; opacity: 0; mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.6) 61%) 0 0 / 7px 7px; mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.6) 61%) 0 0 / 7px 7px; }
.t-trpaspor .pp-stamp.is-in { animation: ppStamp .55s cubic-bezier(.3,1.4,.5,1) var(--dl, 0s) forwards; }
.t-trpaspor .pp-stamp--round { width: 96px; height: 96px; padding: 0; border-radius: 50%; }

/* Bagian: halaman visa */
body.t-trpaspor .sec__title { position: relative; display: table; margin: 0 auto 1.8rem; padding: .7rem 1.4rem; color: var(--c, var(--accent-2)); border: 3px double currentColor; border-radius: 12px; font: 700 clamp(1.15rem, 5vw, 1.4rem)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(var(--r, -3deg)); }
body.t-trpaspor .sec:nth-of-type(3n) .sec__title { --c: var(--accent); --r: 2deg; }
body.t-trpaspor .sec:nth-of-type(3n+1) .sec__title { --c: #6c4a8a; --r: -1.5deg; }
body.t-trpaspor .sec__title::before { content: attr(data-visa); display: block; margin-bottom: .25rem; font: 700 .54rem/1 var(--mono); letter-spacing: .3em; opacity: .8; }
body.t-trpaspor .sec__title::after { display: none; }
body.t-trpaspor .event { position: relative; padding: 2rem 1.3rem 1.6rem; background: var(--card); border: 1.5px dashed rgba(31,42,68,.3); }
body.t-trpaspor .event h3 { font-family: var(--fn); color: var(--navy); }
body.t-trpaspor .event::before { display: block !important; content: 'VISA'; position: absolute; inset: auto 12px auto auto; top: 12px; width: auto; height: auto; padding: .2rem .5rem; border: 1.5px solid var(--accent); border-radius: 4px; color: var(--accent); font: 700 .55rem/1 var(--mono); letter-spacing: .2em; transform: rotate(8deg); }
/* Papan keberangkatan */
body.t-trpaspor .countdown div { position: relative; background: #1b1e24; border: 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 8px 16px -10px rgba(0,0,0,.6); }
body.t-trpaspor .countdown div::after { content: ''; position: absolute; left: 0; right: 0; top: 42%; height: 1px; background: rgba(0,0,0,.6); }
body.t-trpaspor .countdown b { font-family: var(--mono); font-weight: 700; color: #f6c445; }
body.t-trpaspor .countdown b.tr-tick { animation: ppFlap .35s ease; transform-origin: 50% 100%; }
body.t-trpaspor .countdown small { color: rgba(255,255,255,.55); font-family: var(--mono); }
.t-trpaspor .pp-route { display: block; width: min(320px, 86vw); height: 80px; margin: 0 auto 1rem; overflow: visible; }
.t-trpaspor .pp-route path { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 6 7; animation: ppDash 2s linear infinite; }
.t-trpaspor .pp-plane { position: absolute; left: 0; top: 0; width: 26px; height: 26px; offset-rotate: auto 0deg; animation: ppFly 6s ease-in-out infinite; color: var(--navy); }
.t-trpaspor .pp-routebox { position: relative; width: min(320px, 86vw); margin: 0 auto 1rem; }
.t-trpaspor .pp-routebox .pp-route { margin: 0; width: 100%; }
.t-trpaspor .pp-routebox b { position: absolute; bottom: -1.1rem; font: 700 .62rem/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
body.t-trpaspor .pframe::before { border: 1.5px dashed rgba(31,42,68,.35); border-radius: 6px; inset: -10px; box-shadow: none; }
body.t-trpaspor .pframe__arch { border-radius: 4px; }
body.t-trpaspor .gallery__item { border: 6px solid #fffdf6; box-shadow: 0 10px 20px -14px rgba(20,30,60,.6); }
body.t-trpaspor .quote { font-style: italic; color: var(--ink); }
body.t-trpaspor .thanks { color: var(--navy); }
.t-trpaspor .sec--closing { position: relative; overflow: hidden; padding-block: 5rem; }
@media (prefers-reduced-motion: reduce) { .t-trpaspor .pp-plane, .t-trpaspor .pp-route path { animation: none !important; } .t-trpaspor .pp-stamp { opacity: .9 !important; } }