@import url("_ev.css");
/* ==========================================================
   DInvite — Tema "Sirkus Ceria" (koleksi Acara Spesial · Ulang Tahun Anak)
   Panggung sirkus yang meriah: tenda bergaris merah-putih, bendera segitiga, lampu marquee, bintang emas, dan huruf besar yang lucu.
   Ilustrasi dari evkit.js, susunan di evsirkus.js.
   ========================================================== */
.t-evsirkus { --bg:#fff4e0; --card:#ffffff; --ink:#1d3557; --muted:#5a6b86; --line:rgba(29,53,87,.18); --accent:#e63946; --accent-2:#457b9d; --on-accent:#fff; --hero-rgb:29,53,87; --tint-a:.35; --hero-ink:#1d3557; --deep:#1d3557; --soft:#ffe2b8; --field:#fffdf8;--k1:#e63946; --k2:#457b9d; --k3:#1d3557; --k4:#ffb703; --k5:#2a9d8f; --k6:#ffffff;--fn:'Luckiest Guy', sans-serif; --fh:'Luckiest Guy', sans-serif; --fb:'Nunito', sans-serif; --fn-w:400; --fn-k:.82; --fh-w:400; --card-r:16px; --cd-r:12px; --badge-bg:var(--k4); --badge-ink:#1d3557; color-scheme: light; }
body.t-evsirkus .page { background: repeating-linear-gradient(90deg, rgba(230,57,70,.12) 0 26px, transparent 26px 52px), #fff4e0; }
.t-evsirkus .cover, .t-evsirkus .hero, .t-evsirkus .aside, .t-evsirkus .sec--closing, body.t-evsirkus .cover.has-photo, body.t-evsirkus .hero.has-photo, body.t-evsirkus .aside.has-photo { background: repeating-linear-gradient(90deg, rgba(230,57,70,.12) 0 26px, transparent 26px 52px), #fff4e0; color: var(--ink); }
.t-evsirkus .sec--tint, .t-evsirkus .sec--countdown { background: linear-gradient(var(--soft), var(--soft)); }
.t-evsirkus .cover, body.t-evsirkus .cover.has-photo { place-items: center; overflow: hidden; }
.t-evsirkus .cover__inner { gap: .5rem; max-width: 340px; }
.t-evsirkus .hero, .t-evsirkus .aside, body.t-evsirkus .cover.has-photo, body.t-evsirkus .hero.has-photo, body.t-evsirkus .aside.has-photo { min-height: 100svh; place-items: center; padding: 4rem 1.6rem; overflow: hidden; }
.t-evsirkus .sec--closing { overflow: hidden; padding-block: 6rem 9rem; }
.t-evsirkus .cover__to small { color: var(--muted); }
.t-evsirkus .cover__to strong { font: 700 1.4rem/1.2 var(--fh); color: var(--ink); }
.t-evsirkus .cover .ek-frame { animation: evUp 1s var(--ease) .2s both; }
.t-evsirkus .cover .names { animation: evUp 1.1s var(--ease) .45s both; }
.t-evsirkus .cover .cover__date, .t-evsirkus .cover .cover__to { animation: evUp 1s var(--ease) .65s both; }
.t-evsirkus .cover .ibtn { animation: evUp 1s var(--ease) .85s both; }
body.t-evsirkus:not(.is-locked) .hero .ek-frame { animation: evUp 1.1s var(--ease) .2s both; }
body.t-evsirkus .sec--tint .event p, body.t-evsirkus .sec--tint .event small, body.t-evsirkus .sec--tint .event span { color: var(--muted); }
@media (max-height: 760px) { .t-evsirkus .cover .ek-frame { --fw: min(124px, 34vw); } .t-evsirkus .cover .ev-badge { --bw: 74px; } .t-evsirkus .cover__to small:last-child { display: none; } .t-evsirkus .cover__inner { gap: .3rem; } }

.t-evsirkus .cover, body.t-evsirkus .cover.has-photo { padding: 4.4rem 1.6rem 11rem; }
body.t-evsirkus .names { color: var(--k1); text-shadow: 3px 3px 0 var(--k3) !important; letter-spacing: .02em; }
body.t-evsirkus .names i { color: var(--k2); font-style: normal; text-shadow: none; }
.t-evsirkus .ek-frame { --fw: min(170px, 46vw); --frame-bg: radial-gradient(circle, #fff 0 40%, #ffe2b8); filter: drop-shadow(0 0 0 #fff) drop-shadow(4px 4px 0 var(--k3)); }
.t-evsirkus .ek-frame:not(.has-photo) > i { background: radial-gradient(circle, #ffd166, #ffb703); }
.t-evsirkus .ek-frame:not(.has-photo) .ek-emblem { inset: 26%; }
.t-evsirkus .cover__to { padding: .7rem 1rem; border: 3px solid var(--k3); border-radius: 14px; background: #fff; box-shadow: 4px 4px 0 var(--k3); }
.t-evsirkus .cover.is-open { transform: none; clip-path: inset(0 50% 0 50%); transition: clip-path 1s cubic-bezier(.7,0,.25,1); pointer-events: none; }
body.t-evsirkus .ibtn { border: 3px solid var(--k3); box-shadow: 4px 4px 0 var(--k3); }
body.t-evsirkus .ibtn--solid { background: var(--k1); color: #fff; }
body.t-evsirkus .countdown div { border: 3px solid var(--k3); box-shadow: 4px 4px 0 var(--k3); }
body.t-evsirkus .countdown b { color: var(--k1); font-family: var(--fn); }
body.t-evsirkus .event { border: 3px solid var(--k3); box-shadow: 5px 5px 0 var(--k3); }
body.t-evsirkus .event h3 { color: var(--k1); }
body.t-evsirkus .sec__title { color: var(--k3); }