@import url("_marun.css");
/* ==========================================================
   DInvite — Tema "Velvet Deco" (koleksi Marun Romantis)
   Art deco 1920-an: beludru marun, sinar matahari emas berputar perlahan,
   bingkai oktagon garis emas ganda, kipas deco, pintu bermotif garis emas.
   ========================================================== */
.t-mrdeco {
    --bg: #2a0a10; --card: rgba(61,12,19,.75); --ink: #f6e9dc; --muted: #d5b7ad; --line: rgba(212,175,106,.4);
    --accent: #d4af6a; --accent-2: #f1d9a2; --on-accent: #22070b; --hero-rgb: 34,7,11; --tint-a: .5; --hero-ink: #f6e9dc;
    --fn: 'Italiana', serif; --fh: 'Cinzel', serif; --fb: 'Jost', sans-serif; --fn-tt: uppercase; --fn-ls: .08em; --fn-k: .78; --fh-w: 500; --fh-ls: .12em;
    --btn-r: 0; --card-r: 0; --cd-r: 0; --ph-r: 0;
    --velvet: url(../../img/themes/roseromance/beludru.jpg) center / cover;
    --oct: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    color-scheme: dark;
}
@keyframes mdSun { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mdFan { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes mdDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Bingkai oktagon garis emas ganda (SVG dari mrdeco.js) */
.t-mrdeco .md-frame { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.t-mrdeco .md-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-mrdeco .md-frame polygon { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mdDraw 1.8s var(--ease) .3s forwards; }
.t-mrdeco .md-frame polygon + polygon { stroke-width: .6; opacity: .65; animation-delay: .6s; }
.t-mrdeco .md-sun { position: absolute; left: 50%; top: 46%; width: 170vmax; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
    background: repeating-conic-gradient(from 0deg, rgba(212,175,106,.16) 0 1.4deg, transparent 1.4deg 9deg);
    -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.7) 25%, transparent 55%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.7) 25%, transparent 55%); animation: mdSun 120s linear infinite; }
.t-mrdeco .md-fan { position: relative; width: 120px; height: 60px; margin: 0 auto .2rem; left: 50%; transform-origin: 50% 100%; animation: mdFan 1s var(--ease) .5s both;
    background: repeating-conic-gradient(from -90deg at 50% 100%, var(--gold) 0 1.5deg, transparent 1.5deg 15deg); -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 58px, transparent 59px); mask: radial-gradient(circle at 50% 100%, #000 0 58px, transparent 59px); }
.t-mrdeco .md-fan::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 28px; height: 14px; margin-left: -14px; border-radius: 28px 28px 0 0; background: var(--gold); }
.t-mrdeco .sec__title::after { content: ''; display: block; width: 180px; height: 12px; margin: .8rem auto 0;
    background: linear-gradient(var(--gold), var(--gold)) left center / 40% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) right center / 40% 1px no-repeat,
    linear-gradient(45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 12px 12px no-repeat, linear-gradient(-45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 12px 12px no-repeat; }

/* Sampul */
.t-mrdeco .cover, body.t-mrdeco .cover.has-photo { background: radial-gradient(circle at 50% 45%, rgba(109,26,36,.4), transparent 60%), var(--velvet), var(--m2); color: var(--ink); place-items: center; padding: 1.4rem; overflow: hidden; }
.t-mrdeco .cover__inner { position: relative; z-index: 2; width: min(340px, calc(100vw - 40px)); gap: .55rem; padding: 2rem 1.4rem 1.8rem; background: rgba(34,7,11,.82); clip-path: var(--oct);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: mrUp 1.1s var(--ease) both; }
.t-mrdeco .cover__inner > :not(.md-frame) { position: relative; z-index: 1; }
.t-mrdeco .cover .names, .t-mrdeco .hero .names, .t-mrdeco .aside .names { color: var(--gold-2); }
.t-mrdeco .cover__to { margin: .3rem 0 .6rem; padding: .7rem .5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; }
.t-mrdeco .cover__to small { color: var(--muted); }
.t-mrdeco .cover__to strong { font: 500 1.2rem 'Cinzel', serif; letter-spacing: .06em; color: var(--ink); }
.t-mrdeco .am-panel::before { background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(212,175,106,.32) 26px 27px, transparent 27px 33px, rgba(212,175,106,.18) 33px 34px), var(--velvet), var(--m1); }
.t-mrdeco .am-panel { box-shadow: inset -3px 0 0 var(--gold); transition-duration: 1.8s; }
.t-mrdeco .am-panel--b { box-shadow: inset 3px 0 0 var(--gold); }
body.am-has-opening.t-mrdeco .cover.is-open .cover__inner { animation: none; opacity: 0; transition: opacity .4s; }
.t-mrdeco .cover .am-open { z-index: 1; }
@media (max-height: 700px) { .t-mrdeco .cover__inner { padding: 1.3rem 1.1rem 1.2rem; gap: .35rem; } .t-mrdeco .md-fan { height: 40px; width: 80px; } }

/* Pembuka */
.t-mrdeco .hero, .t-mrdeco .aside, body.t-mrdeco .hero.has-photo, body.t-mrdeco .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; background: radial-gradient(circle at 50% 40%, rgba(109,26,36,.5), transparent 65%), var(--velvet), var(--m2); color: var(--ink); place-items: center; padding: 4rem 1.5rem; }
.t-mrdeco .hero__inner, .t-mrdeco .aside__inner { position: relative; z-index: 2; }
.t-mrdeco .md-portrait { position: relative; width: min(200px, 54vw); aspect-ratio: 3 / 4; margin: 0 auto .6rem; clip-path: polygon(50% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat;
    box-shadow: inset 0 0 0 3px var(--gold); }
.t-mrdeco .md-portrait::after { content: ''; position: absolute; inset: 8px; clip-path: inherit; border: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(241,217,162,.7); }
body.t-mrdeco:not(.is-locked) .hero .md-portrait { animation: mrUp 1.2s var(--ease) .2s both; }
body.t-mrdeco:not(.is-locked) .hero .names { animation: mrUp 1.4s var(--ease) .5s both; }

/* Bagian */
.t-mrdeco .page > .sec:nth-of-type(odd) { background: var(--bg); }
.t-mrdeco .page > .sec:nth-of-type(even), .t-mrdeco .sec--tint, .t-mrdeco .sec--countdown { background: #170508; }
.t-mrdeco .sec--quote { background: var(--velvet), var(--m2) !important; }
.t-mrdeco .event, .t-mrdeco .countdown div { clip-path: var(--oct); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.t-mrdeco .event { position: relative; padding: 2.2rem 1.4rem 2rem; }
.t-mrdeco .event > :not(.md-frame) { position: relative; z-index: 1; }
.t-mrdeco .pframe::before { border: 1px solid var(--gold); border-radius: 0; inset: -8px; clip-path: polygon(50% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); background: transparent; box-shadow: none; }
.t-mrdeco .pframe__arch { clip-path: polygon(50% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); border-radius: 0; }
.t-mrdeco .sec--closing { background: var(--velvet), var(--m2) !important; padding-block: 5.5rem; }