/* ==========================================================
   DInvite — Tema "Nova" (koleksi Modern)
   Modern & kekinian ala "bento": tipografi besar Instrument Serif miring
   + Space Grotesk, ubin warna lilac · lime · peach di atas off-white,
   lencana teks berputar, gradasi mesh yang bergerak pelan, tekstur grain.
   Gerak dimatikan otomatis bila perangkat meminta gerak minimal.
   ========================================================== */
.t-nova {
    --bg: #f4f3ee; --bg-2: #ecebe4; --card: #ffffff; --ink: #111111; --muted: #5c5c57;
    --accent: #111111; --accent-2: #d4ff4f; --on-accent: #f4f3ee; --line: rgba(17,17,17,.12);
    --hero-rgb: 244,243,238; --tint-a: .8; --hero-ink: #111111;
    --nv-lilac: #cdbdff; --nv-lime: #d4ff4f; --nv-peach: #ffbf9b; --nv-sky: #a9dcff;
    --nv-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
    --nv-sans: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
    color-scheme: light;
    background: var(--bg);
    font-family: var(--nv-sans);
}
/* Gradasi mesh yang bergerak + tekstur grain halus */
.t-nova::before {
    content: ''; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(205,189,255,.55), transparent) 12% 18% / 60vmax 60vmax no-repeat,
        radial-gradient(closest-side, rgba(212,255,79,.38), transparent) 86% 30% / 52vmax 52vmax no-repeat,
        radial-gradient(closest-side, rgba(255,191,155,.45), transparent) 40% 92% / 64vmax 64vmax no-repeat;
    animation: nvMesh 24s ease-in-out infinite alternate;
}
.t-nova::after {
    content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes nvMesh { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.06); } }
@keyframes nvSpin { to { transform: rotate(360deg); } }
@keyframes nvUp { from { opacity: 0; transform: translateY(28px); } }
@keyframes nvPop { 0% { opacity: 0; transform: scale(.8) rotate(-6deg); } 70% { opacity: 1; transform: scale(1.04) rotate(2deg); } 100% { transform: none; } }

.t-nova .page { background: transparent; box-shadow: none; }

/* ---------- Huruf ---------- */
.t-nova .names { font-family: var(--nv-serif); font-style: italic; font-weight: 400; letter-spacing: -.035em; line-height: .9; color: var(--ink); }
.t-nova .names i { font-family: var(--nv-serif); font-style: italic; font-size: .7em; color: var(--ink); opacity: .45; }
.t-nova .cover .names { font-size: clamp(3.9rem, 19vw, 6.6rem); }
.t-nova .names--lg { font-size: clamp(3.6rem, 17vw, 5.4rem); line-height: .9; }
.t-nova .names--xl { font-size: clamp(4.2rem, 7vw, 6.6rem); line-height: .9; }
.t-nova .names--md { font-size: 2.6rem; line-height: 1; color: var(--ink); }
.t-nova .kicker { display: inline-block; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--ink); font-family: var(--nv-sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; color: var(--ink); background: rgba(255,255,255,.55); }
.t-nova .sec__title { display: flex; flex-direction: column; align-items: center; gap: .55rem; font-family: var(--nv-serif); font-style: italic; font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.t-nova .sec__title::after { content: '✦'; order: -1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: var(--nv-lime); color: var(--ink); font-family: var(--nv-sans); font-style: normal; font-size: .9rem; }
.t-nova .cover__date, .t-nova .hero__date, .t-nova .aside__date { display: inline-block; padding: .55rem 1.1rem; border-radius: 999px; background: var(--ink); color: #f4f3ee; font-family: var(--nv-sans); font-style: normal; font-weight: 500; font-size: .9rem; letter-spacing: .02em; }
.t-nova .countdown__date, .t-nova .thanks { font-family: var(--nv-serif); font-style: italic; font-size: 1.5rem; color: var(--ink); }
.t-nova .cover__to strong { font-family: var(--nv-serif); font-style: italic; font-weight: 400; font-size: 1.9rem; }
.t-nova .quote { font-family: var(--nv-serif); font-style: italic; font-size: 1.45rem; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.t-nova .lead-txt { font-family: var(--nv-sans); }

/* ---------- Sampul: tipografi besar + lencana berputar ---------- */
.t-nova .cover { background: radial-gradient(closest-side, rgba(205,189,255,.65), transparent) 0 0 / 90vmax 90vmax no-repeat, radial-gradient(closest-side, rgba(212,255,79,.45), transparent) 100% 100% / 80vmax 80vmax no-repeat, var(--bg); }
.t-nova .cover::before { inset: 14px; border: 1px solid var(--line); border-radius: 28px; }
.t-nova .cover::after { display: none; }
.t-nova .cover__inner { gap: 1rem; max-width: 460px; }
.t-nova .cover.is-open { transform: translateY(-100%) scale(.96); opacity: 1; border-radius: 0 0 40px 40px; }
.t-nova .cover .kicker { animation: nvUp .8s ease .1s both; }
.t-nova .cover .names { animation: nvUp 1s cubic-bezier(.2,.8,.2,1) .25s both; }
.t-nova .cover__date { animation: nvUp .8s ease .5s both; }
.t-nova .cover__to { animation: nvUp .8s ease .65s both; }
.t-nova .cover .ibtn { animation: nvUp .8s ease .8s both; }

/* Lencana teks berputar (disisipkan nova.js) */
.nv-badge { position: relative; width: 96px; height: 96px; margin: -.4rem auto -.2rem; animation: nvPop .9s ease .7s both; }
.nv-badge svg { width: 100%; height: 100%; animation: nvSpin 14s linear infinite; }
.nv-badge text { font: 600 10.5px var(--nv-sans); letter-spacing: .14em; fill: var(--ink); }
.nv-badge span { position: absolute; inset: 0; display: grid; place-items: center; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--nv-lime); font-size: 1rem; }
.hero .nv-badge, .aside .nv-badge { position: absolute; right: -6px; top: -14px; margin: 0; width: 86px; height: 86px; }

/* ---------- Bagian pembuka: bento ---------- */
.t-nova .hero, .t-nova .aside { background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, transparent; }
.t-nova .hero__inner { position: relative; gap: 1rem; width: min(100%, 420px); padding: 2rem 1.4rem 1.6rem; border-radius: 32px; background: rgba(255,255,255,.62); border: 1px solid rgba(17,17,17,.08);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -36px rgba(17,17,17,.35); }
.t-nova .hero.has-photo .hero__inner { background: rgba(255,255,255,.72); }
.t-nova .hero__scroll { color: var(--ink); }
.t-nova .aside__inner { position: relative; padding: 2.4rem; border-radius: 36px; background: rgba(255,255,255,.55); border: 1px solid rgba(17,17,17,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.t-nova .tm-house, .t-nova .tm-frame { display: none; }

/* ---------- Kartu & ubin warna ---------- */
.t-nova .event, .t-nova .gift, .t-nova .rsvp, .t-nova .wish, .t-nova .qr-card, .t-nova .lstory__card {
    border-radius: 28px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 20px 40px -32px rgba(17,17,17,.4);
}
.t-nova .event::before { display: none; }
.t-nova .events { gap: .9rem; }
.t-nova .event { text-align: left; padding: 1.6rem 1.5rem; }
.t-nova .event:nth-child(3n+1) { background: var(--nv-lilac); border-color: transparent; }
.t-nova .event:nth-child(3n+2) { background: var(--nv-lime); border-color: transparent; }
.t-nova .event:nth-child(3n) { background: var(--nv-peach); border-color: transparent; }
.t-nova .event h3 { font-family: var(--nv-serif); font-style: italic; font-weight: 400; font-size: 2.3rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); margin-bottom: .8rem; }
.t-nova .event__date { font-weight: 600; }
.t-nova .event__time, .t-nova .event__addr { color: rgba(17,17,17,.7); }
.t-nova .event .divider { margin: .9rem 0; width: 100%; height: 1px; background: rgba(17,17,17,.18); }
.t-nova .event__btns { justify-content: flex-start; }
.t-nova .event .ibtn { border-color: var(--ink); color: var(--ink); }
.t-nova .event .ibtn--solid { background: var(--ink); color: #f4f3ee; }
.t-nova .reveal .event, .t-nova .reveal .gift, .t-nova .reveal .person { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.t-nova .reveal.is-visible .event, .t-nova .reveal.is-visible .gift, .t-nova .reveal.is-visible .person { opacity: 1; transform: none; }
.t-nova .reveal.is-visible .event:nth-child(2), .t-nova .reveal.is-visible .gift:nth-child(2), .t-nova .reveal.is-visible .person:nth-of-type(2) { transition-delay: .15s; }

/* Hitung mundur: ubin bento berwarna */
.t-nova .countdown { gap: .5rem; }
.t-nova .countdown div { border-radius: 20px; border: 0; padding: .85rem 0; box-shadow: none; }
.t-nova .countdown div:nth-child(1) { background: var(--ink); }
.t-nova .countdown div:nth-child(1) b, .t-nova .countdown div:nth-child(1) small { color: #f4f3ee; }
.t-nova .countdown div:nth-child(2) { background: var(--nv-lime); }
.t-nova .countdown div:nth-child(3) { background: var(--nv-lilac); }
.t-nova .countdown div:nth-child(4) { background: var(--nv-peach); }
.t-nova .countdown b { font-family: var(--nv-sans); font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; color: var(--ink); }
.t-nova .countdown small { color: rgba(17,17,17,.7); letter-spacing: .1em; }

/* Tombol: pil hitam & lime dengan panah */
.t-nova .ibtn { border-radius: 999px; font-family: var(--nv-sans); font-weight: 600; border-color: var(--ink); color: var(--ink); }
.t-nova .ibtn:hover { background: var(--ink); color: #f4f3ee; }
.t-nova .ibtn--solid { background: var(--ink); color: #f4f3ee; box-shadow: 0 12px 26px -14px rgba(17,17,17,.7); }
.t-nova .cover .ibtn--solid { background: var(--nv-lime); color: var(--ink); border-color: var(--ink); padding: .85rem 1.5rem; }
.t-nova .cover .ibtn--solid::after { content: '↗'; display: grid; place-items: center; width: 26px; height: 26px; margin-right: -.6rem; border-radius: 50%; background: var(--ink); color: var(--nv-lime); font-size: .9rem; transition: transform .3s; }
.t-nova .cover .ibtn--solid:hover::after { transform: rotate(45deg); }
.t-nova .ibtn--solid:hover { background: #2a2a2a; color: #f4f3ee; }
.t-nova .att input:checked + span { background: var(--ink); border-color: var(--ink); color: #f4f3ee; }
.t-nova .ifld input, .t-nova .ifld textarea, .t-nova .ifld select { border-radius: 16px; background: #f7f6f2; }

/* The Couple, love story, galeri */
.t-nova .pframe { padding: 0; }
.t-nova .pframe::before, .t-nova .pframe::after { display: none; }
.t-nova .pframe__arch { border-radius: 32px; box-shadow: 0 24px 50px -30px rgba(17,17,17,.5); }
.t-nova .person:nth-of-type(1) .pframe__init { background: var(--nv-lilac); color: var(--ink); }
.t-nova .person:nth-of-type(2) .pframe__init { background: var(--nv-peach); color: var(--ink); }
.t-nova .pframe__init { font-family: var(--nv-serif) !important; font-style: italic; }
.t-nova .amp { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; background: var(--nv-lime); font-family: var(--nv-serif); font-size: 1.9rem; color: var(--ink); }
.t-nova .psoc { border-color: var(--ink); color: var(--ink); background: transparent; }
.t-nova .psoc:hover { background: var(--ink); color: #f4f3ee; }
.t-nova .lstory::before { background: var(--ink); opacity: .2; }
.t-nova .lstory__dot { background: var(--nv-lime); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--ink); }
.t-nova .lstory__date, .t-nova .tale__date { color: var(--ink); background: var(--nv-lilac); padding: .2rem .55rem; border-radius: 999px; letter-spacing: .1em; }
.t-nova .lstory__title, .t-nova .tale__title { font-family: var(--nv-serif); font-style: italic; font-weight: 400; font-size: 1.8rem; line-height: 1; }
.t-nova .tale__no { font-family: var(--nv-sans); font-style: normal; font-weight: 600; color: var(--ink); }
.t-nova .tale__text::first-letter { font-family: var(--nv-serif); color: var(--ink); }
.t-nova .gslider, .t-nova .gallery__item { border-radius: 26px; }
.t-nova .gift__num { font-family: var(--nv-sans); font-weight: 600; letter-spacing: .04em; }
.t-nova .gift__bank { color: var(--ink); background: var(--nv-lime); padding: .15rem .6rem; border-radius: 999px; }
.t-nova .sec--tint { background: transparent; }
.t-nova .tag--hadir { color: var(--ink); background: var(--nv-lime); }
.t-nova .ifoot { border-top: 1px solid var(--line); }
.t-nova .music { background: var(--nv-lime); color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .t-nova .reveal .event, .t-nova .reveal .gift, .t-nova .reveal .person { opacity: 1; transform: none; }
    .nv-badge svg { animation: none; }
}

/* Ubin bento di bagian pembuka (disisipkan nova.js) */
.t-nova .hero { grid-template-rows: auto auto; align-content: center; gap: .7rem; }
.nv-bento { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: .7rem; width: min(100%, 420px); animation: nvUp .9s ease .3s both; }
.nv-tile { position: relative; display: grid; align-content: space-between; min-height: 104px; padding: 1rem 1.1rem; border-radius: 26px; text-align: left; text-decoration: none; color: var(--ink); }
.nv-tile small { font: 600 .66rem var(--nv-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.nv-tile b { font: 600 2.4rem/1 var(--nv-sans); letter-spacing: -.05em; }
.nv-tile--date { background: var(--nv-lilac); }
.nv-tile--year { place-content: end start; background: var(--nv-lime); }
.nv-tile--year b { font-family: var(--nv-serif); font-style: italic; font-weight: 400; font-size: 2.6rem; }
.nv-tile--place { grid-column: 1 / -1; min-height: 0; padding-right: 3.6rem; background: var(--ink); color: #f4f3ee; }
.nv-tile--place span { font-family: var(--nv-serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; margin-top: .3rem; }
.nv-tile--place i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nv-lime); color: var(--ink); font-style: normal; transition: transform .3s; }
.nv-tile--place:hover i { transform: translateY(-50%) rotate(45deg); }
.t-nova .hero .hero__scroll { display: none; }
@media (prefers-reduced-motion: reduce) { .nv-bento { animation: none; } }
.t-nova .aside__inner { justify-items: center; }