@import url("_marun.css");
/* ==========================================================
   DInvite — Tema "Cahaya Lilin" (koleksi Marun Romantis)
   Makan malam diterangi lilin: marun hampir hitam, deretan lilin dengan
   nyala yang berkedip, cahaya hangat berpendar, bokeh & bara yang naik.
   Saat dibuka: nyala lilin membesar lalu cahaya memenuhi layar.
   ========================================================== */
.t-mrlilin {
    --bg: #1d0609; --card: rgba(70,16,24,.55); --ink: #fbeee2; --muted: #d9b9ad; --line: rgba(255,196,120,.28);
    --accent: #f0c27b; --accent-2: #ffe0ad; --on-accent: #22070b; --hero-rgb: 29,6,9; --tint-a: .55; --hero-ink: #fbeee2;
    --gold: #f0c27b; --gold-2: #ffe0ad;
    --fn: 'Great Vibes', cursive; --fh: 'Cormorant Garamond', Georgia, serif; --fb: 'Lato', sans-serif; --fn-k: 1.12; --fh-w: 600;
    --warm: radial-gradient(70% 45% at 50% 100%, rgba(255,160,80,.28), transparent 70%), radial-gradient(60% 40% at 50% 0%, rgba(140,30,45,.5), transparent 70%), #1d0609;
    color-scheme: dark;
}
@keyframes mlFlick { 0%, 100% { transform: translateX(-50%) scale(1, 1) skewX(0); } 25% { transform: translateX(-50%) scale(.94, 1.06) skewX(2deg); } 50% { transform: translateX(-50%) scale(1.04, .96) skewX(-2deg); } 75% { transform: translateX(-50%) scale(.97, 1.04) skewX(1deg); } }
@keyframes mlGlow { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes mlRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: var(--o, .8); } 100% { transform: translate3d(var(--dx, 20px), -110vh, 0); opacity: 0; } }
@keyframes mlBokeh { 0%, 100% { transform: translate(0, 0); opacity: var(--o, .35); } 50% { transform: translate(var(--bx, 14px), var(--by, -18px)); opacity: calc(var(--o, .35) * 1.6); } }
@keyframes mlLight { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* Lilin (dibuat cahayalilin.js) */
.t-mrlilin .ml-room { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--warm); }
.t-mrlilin .ml-candles { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: clamp(14px, 5vw, 30px); }
.t-mrlilin .ml-c { position: relative; width: var(--w, 22px); height: var(--h, 90px); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #e9d6bf, #fff7ea 40%, #e2cbb0 75%, #c9ad8c); box-shadow: inset 0 6px 8px -4px rgba(255,190,110,.8); }
.t-mrlilin .ml-c::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 8px; margin-left: -1px; background: #2a1a10; border-radius: 1px; }
.t-mrlilin .ml-c i { position: absolute; left: 50%; bottom: calc(100% + 1px); width: calc(var(--w, 22px) * .6); height: calc(var(--w, 22px) * 1.5); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 72%, #fff 0 18%, #ffe38a 30%, #ff9a2e 62%, rgba(255,90,20,0) 76%); transform-origin: 50% 90%; animation: mlFlick var(--f, 1.6s) ease-in-out infinite; filter: blur(.3px); }
.t-mrlilin .ml-c b { position: absolute; left: 50%; top: -10px; width: calc(var(--w, 22px) * 9); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255,190,100,.42), rgba(255,140,60,.12) 50%, transparent); animation: mlGlow var(--f, 1.6s) ease-in-out infinite; }
.t-mrlilin .ml-bokeh { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,130,.55), rgba(255,170,90,.12) 60%, transparent 70%); animation: mlBokeh var(--t, 9s) ease-in-out infinite; }
.t-mrlilin .ml-ember { position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%; background: #ffd48a; box-shadow: 0 0 6px 2px rgba(255,170,80,.7); animation: mlRise var(--t, 9s) linear infinite; animation-delay: var(--d, 0s); }

/* Sampul */
.t-mrlilin .cover, body.t-mrlilin .cover.has-photo { background: var(--bg); color: var(--ink); place-items: start center; padding: 12vh 1.5rem 2rem; overflow: hidden; }
.t-mrlilin .cover__inner { position: relative; z-index: 3; gap: .55rem; max-width: 360px; }
.t-mrlilin .cover .names, .t-mrlilin .hero .names, .t-mrlilin .aside .names, .t-mrlilin .sec--closing .names { color: #ffe9c9; text-shadow: 0 0 24px rgba(255,170,80,.45), 0 0 2px rgba(255,220,170,.6) !important; }
.t-mrlilin .cover .kicker { animation: mrUp 1s var(--ease) .4s both; }
.t-mrlilin .cover .names { animation: mrUp 1.4s var(--ease) .6s both; }
.t-mrlilin .cover__date { animation: mrUp 1s var(--ease) .85s both; }
.t-mrlilin .cover__to { margin: .3rem 0 .6rem; padding: .75rem 1rem; border-radius: 16px; background: rgba(255,200,140,.07); border: 1px solid var(--line); animation: mrUp 1s var(--ease) 1s both; }
.t-mrlilin .cover__to small { color: var(--muted); }
.t-mrlilin .cover__to strong { font: 600 1.4rem 'Cormorant Garamond', serif; color: var(--ink); }
.t-mrlilin .cover .ibtn { animation: mrUp 1s var(--ease) 1.2s both; }
.t-mrlilin .cover .ml-candles { bottom: 0; }
.t-mrlilin .cover.is-open { transform: none; opacity: 0; transition: opacity 1.2s ease .6s; pointer-events: none; }
.t-mrlilin .cover.is-open .cover__inner { opacity: 0; transform: translateY(-20px); transition: opacity .5s, transform .7s; }
.t-mrlilin .cover.is-open .ml-c i { animation: none; transform: translateX(-50%) scale(1.8, 2.2); transition: transform .7s ease; }
.t-mrlilin .cover.is-open .ml-room::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 85%, rgba(255,220,160,.9), rgba(255,170,90,.4) 40%, transparent 75%); animation: mlLight 1.6s ease forwards; }
@media (max-height: 700px) { .t-mrlilin .cover { padding-top: 5vh; } .t-mrlilin .cover__inner { gap: .35rem; } }

/* Pembuka */
.t-mrlilin .hero, .t-mrlilin .aside, body.t-mrlilin .hero.has-photo, body.t-mrlilin .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; background: var(--bg); color: var(--ink); place-items: start center; padding: 13vh 1.5rem 3rem; }
.t-mrlilin .hero__inner, .t-mrlilin .aside__inner { position: relative; z-index: 3; }
.t-mrlilin .ml-portrait { width: min(170px, 44vw); aspect-ratio: 4 / 5; margin: 0 auto .5rem; border-radius: 999px 999px 20px 20px; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(255,200,140,.5), 0 0 40px 6px rgba(255,150,70,.28), 0 26px 40px -20px rgba(0,0,0,.8); filter: sepia(.15) saturate(1.05); }
body.t-mrlilin:not(.is-locked) .hero .ml-portrait { animation: mrFade 1.6s ease .2s both; }
body.t-mrlilin:not(.is-locked) .hero .names { animation: mrUp 1.5s var(--ease) .5s both; }
.t-mrlilin .hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; margin-left: -11px; z-index: 3; }

/* Bagian: hangat, kartu bercahaya */
.t-mrlilin .page { background: var(--warm); background-attachment: scroll; }
.t-mrlilin .sec--tint, .t-mrlilin .sec--countdown { background: radial-gradient(70% 50% at 50% 0%, rgba(255,160,80,.14), transparent 70%), #160408; }
.t-mrlilin .sec__title { color: #ffe9c9; text-shadow: 0 0 20px rgba(255,170,80,.25); }
.t-mrlilin .sec__title::before { content: ''; display: block; width: 10px; height: 16px; margin: 0 auto .7rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 72%, #fff 0 18%, #ffe38a 32%, #ff9a2e 64%, transparent 78%); box-shadow: 0 0 18px 6px rgba(255,160,70,.35); }
.t-mrlilin .sec__title::after { content: ''; display: block; width: 80px; height: 1px; margin: .8rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.t-mrlilin .event, .t-mrlilin .countdown div, .t-mrlilin .gift, .t-mrlilin .rsvp, .t-mrlilin .wish, .t-mrlilin .lstory__card, .t-mrlilin .qr-card { box-shadow: 0 0 40px -12px rgba(255,150,70,.35), inset 0 1px 0 rgba(255,220,170,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.t-mrlilin .event h3 { text-shadow: 0 0 18px rgba(255,170,80,.4); }
.t-mrlilin .pframe::before { border: 1px solid rgba(255,200,140,.55); border-radius: 999px 999px 22px 22px; box-shadow: 0 0 30px rgba(255,160,70,.3); }
.t-mrlilin .pframe__arch { border-radius: 999px 999px 18px 18px; }
.t-mrlilin .sec--closing { position: relative; overflow: hidden; min-height: 82svh; display: grid; place-content: start center; padding: 8vh 1.6rem 34vh; background: var(--bg); }
.t-mrlilin .sec--closing > :not(.ml-room) { position: relative; z-index: 2; }
/* Hitung mundur di pembuka: lilin lebih kecil agar tombol tidak tertutup */
.t-mrlilin .hero:has(.hero__cd) .ml-candles { transform: translateX(-50%) scale(.62); transform-origin: 50% 100%; }
.t-mrlilin .hero:has(.hero__cd) { padding-top: 9vh; }