@import url("_marun.css");
/* ==========================================================
   DInvite — Tema "Mawar Emas" (koleksi Marun Romantis)
   Marun polos yang dalam dengan lukisan garis mawar emas yang tergambar
   sendiri (SVG stroke), bingkai garis tipis bersudut, jendela foto
   lengkung berbingkai mawar, kelopak emas berjatuhan. Minimalis & mewah.
   ========================================================== */
.t-mrmawar {
    --bg: #5a1520; --card: rgba(46,8,14,.5); --ink: #f7e8dc; --muted: #e0bfb4; --line: rgba(222,183,117,.4);
    --accent: #deb775; --accent-2: #f3dcae; --on-accent: #3a0b12; --hero-rgb: 58,11,18; --tint-a: .45; --hero-ink: #f7e8dc;
    --gold: #deb775; --gold-2: #f3dcae;
    --fn: 'Parisienne', cursive; --fh: 'Marcellus', serif; --fb: 'Jost', sans-serif; --fn-k: 1.05; --fh-w: 400; --fh-ls: .06em;
    color-scheme: dark;
}
@keyframes mmDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mmFill { from { fill-opacity: 0; } to { fill-opacity: .14; } }
@keyframes mmSway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }

/* Lukisan garis mawar (SVG dari mrmawar.js) */
.t-mrmawar .mm-rose { display: block; margin: 0 auto; overflow: visible; }
.t-mrmawar .mm-rose path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.t-mrmawar .mm-rose .mm-fill { fill: var(--gold); fill-opacity: 0; }
.t-mrmawar .mm-rose.is-drawn path { animation: mmDraw 2.6s var(--ease) forwards; animation-delay: calc(var(--k, 0) * .12s); }
.t-mrmawar .mm-rose.is-drawn .mm-fill { animation: mmDraw 2.6s var(--ease) forwards, mmFill 1.4s ease 2s forwards; }
.t-mrmawar .mm-big { width: min(230px, 58vw); height: auto; transform-origin: 50% 100%; }
.t-mrmawar .mm-big.is-drawn { animation: mmSway 8s ease-in-out 3s infinite; }
.t-mrmawar .mm-small { width: 54px; height: auto; margin-bottom: .6rem; }
.t-mrmawar .mm-corner { position: absolute; width: min(140px, 36vw); pointer-events: none; opacity: .9; }
.t-mrmawar .mm-corner--tl { top: 14px; left: 10px; transform: rotate(-28deg); }
.t-mrmawar .mm-corner--br { bottom: 14px; right: 10px; transform: rotate(152deg); }

/* Bingkai garis tipis bersudut */
.t-mrmawar .mm-frame { position: absolute; inset: 16px; pointer-events: none; border: 1px solid var(--line); z-index: 1; }
.t-mrmawar .mm-frame::before, .t-mrmawar .mm-frame::after { content: ''; position: absolute; width: 28px; height: 28px; border: 1.5px solid var(--gold); }
.t-mrmawar .mm-frame::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.t-mrmawar .mm-frame::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

/* Sampul */
.t-mrmawar .cover, body.t-mrmawar .cover.has-photo { background: var(--bg); color: var(--ink); place-items: center; padding: 2rem 1.6rem; overflow: hidden; }
.t-mrmawar .cover__inner { position: relative; z-index: 2; gap: .5rem; max-width: 340px; }
.t-mrmawar .cover .names, .t-mrmawar .hero .names, .t-mrmawar .aside .names { color: var(--gold-2); }
.t-mrmawar .cover .kicker { animation: mrUp 1s var(--ease) 1.6s both; }
.t-mrmawar .cover .names { animation: mrUp 1.3s var(--ease) 1.8s both; }
.t-mrmawar .cover__date { animation: mrUp 1s var(--ease) 2s both; }
.t-mrmawar .cover__to { margin: .3rem 0 .6rem; padding: .7rem .4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: mrUp 1s var(--ease) 2.15s both; }
.t-mrmawar .cover__to small { color: var(--muted); }
.t-mrmawar .cover__to strong { font: 400 1.3rem 'Marcellus', serif; color: var(--ink); }
.t-mrmawar .cover .ibtn { animation: mrUp 1s var(--ease) 2.3s both; }
.t-mrmawar .cover.is-open { transform: scale(1.04); opacity: 0; transition: transform 1s var(--ease), opacity .9s ease; }
@media (max-height: 720px) { .t-mrmawar .cover .mm-big { width: 140px; } .t-mrmawar .cover__inner { gap: .3rem; } .t-mrmawar .cover__to small:last-child { display: none; } }

/* Pembuka: jendela foto lengkung berbingkai mawar */
.t-mrmawar .hero, .t-mrmawar .aside, body.t-mrmawar .hero.has-photo, body.t-mrmawar .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; background: var(--bg); color: var(--ink); place-items: center; padding: 4rem 1.6rem; }
.t-mrmawar .hero__inner, .t-mrmawar .aside__inner { position: relative; z-index: 2; }
.t-mrmawar .mm-arch { position: relative; width: min(220px, 58vw); aspect-ratio: 3 / 4; margin: 0 auto 1rem; }
.t-mrmawar .mm-arch > i { position: absolute; inset: 0; border-radius: 999px 999px 0 0; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, #3a0b12; }
.t-mrmawar .mm-arch::before { content: ''; position: absolute; inset: -10px; border-radius: 999px 999px 0 0; border: 1px solid var(--gold); border-bottom: 0; }
.t-mrmawar .mm-arch .mm-rose { position: absolute; width: 96px; left: -40px; bottom: -14px; transform: rotate(-12deg); }
.t-mrmawar .mm-arch .mm-rose + .mm-rose { left: auto; right: -40px; transform: scaleX(-1) rotate(-12deg); }
body.t-mrmawar:not(.is-locked) .hero .mm-arch > i { animation: mrFade 1.6s ease .2s both; }
body.t-mrmawar:not(.is-locked) .hero .names { animation: mrUp 1.4s var(--ease) .5s both; }

/* Bagian */
.t-mrmawar .page > .sec:nth-of-type(even), .t-mrmawar .sec--tint, .t-mrmawar .sec--countdown { background: #4a111a; }
.t-mrmawar .sec__title::after { content: ''; display: block; width: 90px; height: 1px; margin: .9rem auto 0; background: var(--gold); }
.t-mrmawar .event, .t-mrmawar .countdown div, .t-mrmawar .gift, .t-mrmawar .rsvp, .t-mrmawar .wish, .t-mrmawar .lstory__card, .t-mrmawar .qr-card { border-radius: 2px; background: transparent; box-shadow: none; }
.t-mrmawar .event { position: relative; padding: 2rem 1.4rem; }
.t-mrmawar .event::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(222,183,117,.22); pointer-events: none; }
.t-mrmawar .countdown div { border-radius: 999px 999px 4px 4px; }
.t-mrmawar .pframe::before { border: 1px solid var(--gold); border-radius: 999px 999px 0 0; border-bottom: 0; inset: -10px; box-shadow: none; }
.t-mrmawar .pframe__arch { border-radius: 999px 999px 0 0; }
.t-mrmawar .gallery__item { border-radius: 2px; }
.t-mrmawar .sec--closing { position: relative; overflow: hidden; padding-block: 5.5rem; }
.t-mrmawar .am-fall i { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }