@import url("_ev.css");
/* ==========================================================
   DInvite — Tema "Toss Topi" (koleksi Acara Spesial · Wisuda)
   Gaya pop art yang seru: kuning cerah bertitik halftone, topi toga yang beterbangan, ledakan komik "LULUS!", garis hitam tebal, dan bayangan keras.
   Ilustrasi dari evkit.js, susunan di evlulus.js.
   ========================================================== */
.t-evlulus { --bg:#ffd60a; --card:#ffffff; --ink:#111111; --muted:#3a3a3a; --line:#111111; --accent:#ff006e; --accent-2:#3a86ff; --on-accent:#fff; --hero-rgb:17,17,17; --tint-a:.3; --hero-ink:#111; --deep:#111111; --soft:#ffe566; --field:#ffffff;--k1:#111111; --k2:#ff006e; --k3:#111111; --k4:#ffd60a; --k5:#3a86ff; --k6:#ffffff;--fn:'Archivo', sans-serif; --fh:'Archivo', sans-serif; --fb:'Archivo', sans-serif; --fn-w:900; --fn-k:.82; --fn-ls:-.02em; --fn-tt:uppercase; --fh-w:900; --card-r:0; --btn-r:0; --cd-r:0; --ph-r:0;--card-sh: 6px 6px 0 #111; color-scheme: light; }
body.t-evlulus .page { background: radial-gradient(circle, rgba(17,17,17,.14) 2px, transparent 2.5px) 0 0 / 14px 14px, #ffd60a; }
.t-evlulus .cover, .t-evlulus .hero, .t-evlulus .aside, .t-evlulus .sec--closing, body.t-evlulus .cover.has-photo, body.t-evlulus .hero.has-photo, body.t-evlulus .aside.has-photo { background: radial-gradient(circle, rgba(17,17,17,.14) 2px, transparent 2.5px) 0 0 / 14px 14px, #ffd60a; color: var(--ink); }
.t-evlulus .sec--tint, .t-evlulus .sec--countdown { background: linear-gradient(var(--soft), var(--soft)); }
.t-evlulus .cover, body.t-evlulus .cover.has-photo { place-items: center; overflow: hidden; }
.t-evlulus .cover__inner { gap: .5rem; max-width: 340px; }
.t-evlulus .hero, .t-evlulus .aside, body.t-evlulus .cover.has-photo, body.t-evlulus .hero.has-photo, body.t-evlulus .aside.has-photo { min-height: 100svh; place-items: center; padding: 4rem 1.6rem; overflow: hidden; }
.t-evlulus .sec--closing { overflow: hidden; padding-block: 6rem 9rem; }
.t-evlulus .cover__to small { color: var(--muted); }
.t-evlulus .cover__to strong { font: 700 1.4rem/1.2 var(--fh); color: var(--ink); }
.t-evlulus .cover .ek-frame { animation: evUp 1s var(--ease) .2s both; }
.t-evlulus .cover .names { animation: evUp 1.1s var(--ease) .45s both; }
.t-evlulus .cover .cover__date, .t-evlulus .cover .cover__to { animation: evUp 1s var(--ease) .65s both; }
.t-evlulus .cover .ibtn { animation: evUp 1s var(--ease) .85s both; }
body.t-evlulus:not(.is-locked) .hero .ek-frame { animation: evUp 1.1s var(--ease) .2s both; }
body.t-evlulus .sec--tint .event p, body.t-evlulus .sec--tint .event small, body.t-evlulus .sec--tint .event span { color: var(--muted); }
@media (max-height: 760px) { .t-evlulus .cover .ek-frame { --fw: min(124px, 34vw); } .t-evlulus .cover .ev-badge { --bw: 74px; } .t-evlulus .cover__to small:last-child { display: none; } .t-evlulus .cover__inner { gap: .3rem; } }

.t-evlulus .cover, body.t-evlulus .cover.has-photo { padding: 3rem 1.6rem; }
body.t-evlulus .names { color: var(--k1); text-shadow: 4px 4px 0 var(--k2) !important; }
body.t-evlulus .names i { color: var(--k5); font-style: normal; text-shadow: none; }
body.t-evlulus .kicker { color: #111; background: #fff; padding: .4rem .7rem; border: 3px solid #111; letter-spacing: .2em; font-weight: 800; }
.t-evlulus .ek-frame { --fw: min(176px, 48vw); --frame-bg: #fff; --frame-sh: 0 0 0 4px #111, 8px 8px 0 4px #111; transform: rotate(-3deg); }
.t-evlulus .ek-frame:not(.has-photo) > i { background: var(--k5); }
.t-evlulus .ek-frame:not(.has-photo) .ek-emblem { inset: 4%; }
.t-evlulus .cover__to { padding: .8rem 1rem; background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; transform: rotate(1deg); }
.t-evlulus .cover.is-open { transform: translateY(-100%) rotate(-6deg); opacity: 1; transition: transform 1s cubic-bezier(.6,-.2,.3,1); }
body.t-evlulus .ibtn { border: 3px solid #111; color: #111; box-shadow: 5px 5px 0 #111; font-weight: 800; }
body.t-evlulus .ibtn--solid { background: var(--k2); color: #fff; }
body.t-evlulus .ibtn--solid:hover { color: #fff; }
body.t-evlulus .sec__title { display: table; margin: 0 auto 1.8rem; padding: .4rem 1rem; background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; color: #111; text-transform: uppercase; }
body.t-evlulus .countdown div { border: 3px solid #111; box-shadow: 5px 5px 0 #111; }
body.t-evlulus .countdown b { color: var(--k2); }
body.t-evlulus .event { border: 3px solid #111; }
body.t-evlulus .event h3 { color: var(--k2); text-transform: uppercase; font-size: 1.6rem; }
body.t-evlulus .evinfo__stat, body.t-evlulus .evinfo__list, body.t-evlulus .evinfo__note { border: 3px solid #111; box-shadow: 5px 5px 0 #111; }