/* =====================================================================
   TitikInvite — Invitation Core CSS
   Hanya utilitas & komponen fungsional (musik, toast, lightbox, demo bar,
   preview ribbon, reveal default). Tampilan visual sepenuhnya milik tema.
   Semua selector diawali .ti- agar tidak bentrok.
   ===================================================================== */
.ti-invitation { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
.ti-invitation *, .ti-invitation *::before, .ti-invitation *::after { box-sizing: border-box; }
.ti-invitation img { max-width: 100%; height: auto; display: block; }
.ti-invitation a { -webkit-tap-highlight-color: transparent; }
html.ti-locked, html.ti-locked body { overflow: hidden; height: 100%; }
html.ti-locked.ti-embed-scroll, html.ti-locked.ti-embed-scroll body { overflow: hidden; }
.ti-sr, .ti-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.ti-invitation :focus-visible { outline: 2px solid var(--ti-accent, #c95d7f); outline-offset: 3px; }

/* Reveal default (tema boleh override) */
.ti-js [data-ti-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 70ms); }
.ti-js [data-ti-reveal].is-visible { opacity: 1; transform: none; }
.ti-seq-word { display: inline-block; opacity: 0; transform: translateY(.6em); transition: opacity .7s ease, transform .7s ease; }
.is-visible > .ti-seq-word, .is-visible .ti-seq-word { opacity: 1; transform: none; }

/* Animasi scroll data-ti-anim (tema boleh mengatur --ti-dur, --ti-ease, --ti-dist) */
.ti-js [data-ti-anim] { --ti-dist: 46px; opacity: 0; transition: opacity var(--ti-dur, 1.1s) var(--ti-ease, cubic-bezier(.2,.65,.25,1)), transform var(--ti-dur, 1.1s) var(--ti-ease, cubic-bezier(.2,.65,.25,1)), filter var(--ti-dur, 1.1s) ease, clip-path var(--ti-dur, 1.2s) var(--ti-ease, cubic-bezier(.7,0,.25,1)); transition-delay: var(--ti-delay, 0ms); }
.ti-js [data-ti-anim="fade-up"] { transform: translate3d(0, var(--ti-dist), 0); }
.ti-js [data-ti-anim="fade-down"] { transform: translate3d(0, calc(var(--ti-dist) * -1), 0); }
.ti-js [data-ti-anim="fade-left"] { transform: translate3d(var(--ti-dist), 0, 0); }
.ti-js [data-ti-anim="fade-right"] { transform: translate3d(calc(var(--ti-dist) * -1), 0, 0); }
.ti-js [data-ti-anim="zoom-in"] { transform: scale(.82); }
.ti-js [data-ti-anim="zoom-out"] { transform: scale(1.18); }
.ti-js [data-ti-anim="flip-up"] { transform: perspective(900px) rotateX(38deg) translate3d(0, 30px, 0); transform-origin: 50% 100%; }
.ti-js [data-ti-anim="blur-in"] { filter: blur(14px); transform: scale(1.06); }
.ti-js [data-ti-anim="unveil"] { opacity: 1; clip-path: inset(0 0 100% 0); }
.ti-js [data-ti-anim="curtain"] { opacity: 1; clip-path: inset(0 50% 0 50%); }
.ti-js [data-ti-anim="bloom"] { transform: scale(.25) rotate(-35deg); }
.ti-js [data-ti-anim="swing"] { transform: perspective(700px) rotateY(-70deg); transform-origin: 0 50%; }
.ti-js [data-ti-anim="rise"] { transform: translate3d(0, 90px, 0) rotate(-3deg); }
.ti-js [data-ti-anim].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* Tombol umum (tema mewarnai lewat --ti-accent) */
.ti-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.ti-btn svg { flex: none; }
.ti-btn--primary, .ti-btn--maps { background: var(--ti-accent, #c95d7f); color: #fff; }
.ti-btn--primary:hover, .ti-btn--maps:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px var(--ti-accent, #c95d7f); color: #fff; }
.ti-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.ti-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.ti-btn--block { width: 100%; }
.ti-btn[disabled] { opacity: .6; cursor: wait; }
.ti-event-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* Countdown (struktur), tema mengatur tampilan */
.ti-countdown { display: flex; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.ti-countdown__item { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.ti-countdown__num { font-size: 28px; line-height: 1.1; font-weight: 600; }
.ti-countdown__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.ti-countdown__done { width: 100%; text-align: center; margin: 8px 0 0; }

/* Form RSVP & guestbook (struktur) */
.ti-rsvp, .ti-guestbook__form { display: grid; gap: 14px; text-align: left; }
.ti-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ti-field label, .ti-field legend { font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 0; }
.ti-field input[type="text"], .ti-field select, .ti-field textarea { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.92); font: inherit; font-size: 15px; color: #2f2228; }
.ti-field textarea { resize: vertical; min-height: 92px; }
.ti-field input:focus, .ti-field select:focus, .ti-field textarea:focus { outline: none; border-color: var(--ti-accent, #c95d7f); box-shadow: 0 0 0 3px rgba(201,93,127,.15); }
.ti-attend { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-attend legend { width: 100%; margin-bottom: 6px; }
.ti-choice { position: relative; flex: 1 1 90px; }
.ti-choice input { position: absolute; opacity: 0; inset: 0; }
.ti-choice span { display: block; text-align: center; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.9); font-size: 14px; cursor: pointer; transition: all .2s; color: #2f2228; }
.ti-choice input:checked + span { background: var(--ti-accent, #c95d7f); border-color: var(--ti-accent, #c95d7f); color: #fff; }
.ti-choice input:focus-visible + span { outline: 2px solid var(--ti-accent, #c95d7f); outline-offset: 2px; }
.ti-form-msg { margin: 0; font-size: 14px; min-height: 1em; }
.ti-form-msg.is-ok { color: #2b7a55; }
.ti-form-msg.is-error { color: #b23a4c; }
.ti-guestbook__count { margin: 18px 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ti-guestbook__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ti-guestbook__item { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.75); text-align: left; color: #2f2228; }
.ti-guestbook__item strong { display: block; font-size: 14px; }
.ti-guestbook__item p { margin: 4px 0; font-size: 14px; line-height: 1.55; }
.ti-guestbook__item time { font-size: 12px; opacity: .6; }
.ti-guestbook__item.is-new { animation: ti-new .6s ease; }
.ti-guestbook__empty { padding: 16px; text-align: center; opacity: .7; font-size: 14px; }

/* Gift */
.ti-gift { display: grid; gap: 14px; }
.ti-gift__card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.85); color: #2f2228; text-align: center; }
.ti-gift__bank { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.ti-gift__number { font-size: 22px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ti-gift__name { font-size: 14px; opacity: .8; margin-bottom: 8px; }
.ti-gift__qris { width: 180px; border-radius: 12px; margin: 8px 0; }

/* Gallery standar */
.ti-gallery { display: grid; gap: 8px; }
.ti-gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ti-gallery--grid .ti-gallery__item:nth-child(5n+1) { grid-column: span 2; }
.ti-gallery__item { display: block; overflow: hidden; border-radius: 12px; position: relative; }
.ti-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .8s ease; }
.ti-gallery--grid .ti-gallery__item:nth-child(5n+1) img { aspect-ratio: 16 / 11; }
.ti-gallery__item:hover img { transform: scale(1.05); }

/* Foto/monogram mempelai */
.ti-couple-monogram { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 48px; }

/* Video */
.ti-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; }
.ti-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Guest greeting */
.ti-guest { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ti-guest__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ti-guest__name { font-size: 18px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

/* Music button */
.ti-music-btn { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--ti-accent, #c95d7f); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .4s, transform .4s; }
.ti-opened .ti-music-btn, .ti-no-cover .ti-music-btn { opacity: 1; transform: none; pointer-events: auto; }
.ti-music-btn svg { width: 22px; height: 22px; }
.ti-music-bars { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.ti-music-bars i { display: block; width: 3px; background: currentColor; border-radius: 2px; animation: ti-bars 1s ease-in-out infinite; }
.ti-music-bars i:nth-child(2) { animation-delay: .2s; }
.ti-music-bars i:nth-child(3) { animation-delay: .4s; }
.ti-music-btn.is-playing .ti-music-icon { display: none; }
.ti-music-btn.is-playing .ti-music-bars { display: inline-flex; }
.ti-has-demo-bar .ti-music-btn { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* Demo sticky bar (milik TitikInvite, bukan tema) */
.ti-demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #f1dde4; font-family: "DM Sans", "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 -10px 30px -18px rgba(158,63,95,.45); }
.ti-demo-bar__back { display: flex; align-items: center; gap: 8px; color: #2f2228; text-decoration: none; min-width: 0; flex: 1; }
.ti-demo-bar__back span { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-demo-bar__back small { font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9a8590; }
.ti-demo-bar__cta { flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: linear-gradient(135deg, #efa7bd 0%, #df7f9d 45%, #c95d7f 100%); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(201,93,127,.8); }
.ti-has-demo-bar { padding-bottom: 72px; }

/* Preview ribbon */
.ti-preview-ribbon { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 75; padding: 6px 14px; border-radius: 999px; background: rgba(47,34,40,.88); color: #fff; font: 700 11px/1.2 "DM Sans", Arial, sans-serif; letter-spacing: .16em; pointer-events: none; }

/* Toast */
.ti-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90; padding: 11px 18px; border-radius: 14px; background: rgba(47,34,40,.94); color: #fff; font: 500 14px/1.4 "DM Sans", Arial, sans-serif; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); max-width: calc(100% - 32px); text-align: center; animation: ti-new .35s ease; }

/* Lightbox */
.ti-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(15,10,12,.94); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.ti-lightbox.is-open { opacity: 1; }
.ti-lightbox img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transition: opacity .25s; }
.ti-lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.ti-lightbox button:hover { background: rgba(255,255,255,.24); }
.ti-lightbox__close { top: 16px; right: 16px; }
.ti-lightbox__prev { left: 12px; top: 50%; margin-top: -23px; }
.ti-lightbox__next { right: 12px; top: 50%; margin-top: -23px; }
.ti-lightbox__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font: 500 13px "DM Sans", Arial, sans-serif; letter-spacing: .1em; }

@keyframes ti-bars { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes ti-new { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ti-invitation *, .ti-invitation *::before, .ti-invitation *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ti-js [data-ti-reveal], .ti-js [data-ti-anim], .ti-seq-word { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  [data-ti-parallax] { transform: none !important; }
}
/* Mode demo: konten cover tidak boleh tertutup sticky bar */
.ti-has-demo-bar [data-ti-cover] { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }