@import url("_ev.css");
/* ==========================================================
   DInvite — Tema "Perak 25" (koleksi Acara Spesial · Anniversary & Syukuran)
   Anniversary perak yang anggun: putih dingin & perak berkilau, angka tahun dalam lencana bertekstur foil, karangan daun perak, cincin bertaut, dan kilau bintang.
   Ilustrasi dari evkit.js, susunan di evperak.js.
   ========================================================== */
.t-evperak { --bg:#f4f5f8; --card:#ffffff; --ink:#2f3440; --muted:#6c7383; --line:rgba(110,120,145,.25); --accent:#6e7891; --accent-2:#a7b0c0; --on-accent:#fff; --hero-rgb:47,52,64; --tint-a:.35; --hero-ink:#2f3440; --deep:#2f3440; --soft:#e6e9ef; --field:#fcfcfd;--k1:#b8bfcc; --k2:#8a93a6; --k3:#2f3440; --k4:#c9d0dc; --k5:#a7b0c0; --k6:#ffffff;--fn:'Great Vibes', cursive; --fh:'Cinzel', serif; --fb:'Lato', sans-serif; --fn-w:400; --fn-k:1.12; --fh-w:500; --fh-ls:.08em; --card-r:4px; --cd-r:4px; --bw:108px;--badge-bg:linear-gradient(135deg, #f5f6f8 0%, #b8bfcc 30%, #eef0f4 50%, #8a93a6 75%, #dfe3ea 100%); --badge-ink:#2f3440; --badge-font:600 2.8rem/1 'Cinzel', serif; color-scheme: light; }
body.t-evperak .page { background: radial-gradient(70% 50% at 50% 0%, #fff, transparent 70%), repeating-linear-gradient(45deg, rgba(138,147,166,.05) 0 1px, transparent 1px 12px), #f4f5f8; }
.t-evperak .cover, .t-evperak .hero, .t-evperak .aside, .t-evperak .sec--closing, body.t-evperak .cover.has-photo, body.t-evperak .hero.has-photo, body.t-evperak .aside.has-photo { background: radial-gradient(70% 50% at 50% 0%, #fff, transparent 70%), repeating-linear-gradient(45deg, rgba(138,147,166,.05) 0 1px, transparent 1px 12px), #f4f5f8; color: var(--ink); }
.t-evperak .sec--tint, .t-evperak .sec--countdown { background: linear-gradient(var(--soft), var(--soft)); }
.t-evperak .cover, body.t-evperak .cover.has-photo { place-items: center; overflow: hidden; }
.t-evperak .cover__inner { gap: .5rem; max-width: 340px; }
.t-evperak .hero, .t-evperak .aside, body.t-evperak .cover.has-photo, body.t-evperak .hero.has-photo, body.t-evperak .aside.has-photo { min-height: 100svh; place-items: center; padding: 4rem 1.6rem; overflow: hidden; }
.t-evperak .sec--closing { overflow: hidden; padding-block: 6rem 9rem; }
.t-evperak .cover__to small { color: var(--muted); }
.t-evperak .cover__to strong { font: 700 1.4rem/1.2 var(--fh); color: var(--ink); }
.t-evperak .cover .ek-frame { animation: evUp 1s var(--ease) .2s both; }
.t-evperak .cover .names { animation: evUp 1.1s var(--ease) .45s both; }
.t-evperak .cover .cover__date, .t-evperak .cover .cover__to { animation: evUp 1s var(--ease) .65s both; }
.t-evperak .cover .ibtn { animation: evUp 1s var(--ease) .85s both; }
body.t-evperak:not(.is-locked) .hero .ek-frame { animation: evUp 1.1s var(--ease) .2s both; }
body.t-evperak .sec--tint .event p, body.t-evperak .sec--tint .event small, body.t-evperak .sec--tint .event span { color: var(--muted); }
@media (max-height: 760px) { .t-evperak .cover .ek-frame { --fw: min(124px, 34vw); } .t-evperak .cover .ev-badge { --bw: 74px; } .t-evperak .cover__to small:last-child { display: none; } .t-evperak .cover__inner { gap: .3rem; } }
body.t-evperak .ek-frame ~ .kicker, body.t-evperak .ek-frame + * { margin-top: 1.3rem; }

.t-evperak .cover, body.t-evperak .cover.has-photo { padding: 3rem 1.6rem; }
.t-evperak .cover::before { content: ''; display: block !important; position: absolute; inset: 16px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -7px; border-radius: 0; pointer-events: none; }
body.t-evperak .names { color: var(--k3); }
body.t-evperak .names i { color: var(--accent); font-family: var(--fh); font-style: normal; font-size: .36em; }
body.t-evperak .kicker { color: var(--accent); }
.t-evperak .ek-frame { --fw: min(150px, 40vw); --frame-bg: radial-gradient(circle at 40% 35%, #fff, #e6e9ef); --frame-sh: 0 0 0 4px #fff, 0 0 0 6px var(--k1), 0 16px 30px -18px rgba(47,52,64,.5); margin-bottom: 2.2rem; }
.t-evperak .ek-frame .ek-m { top: auto; bottom: -22%; }
.t-evperak .ev-badge { animation-delay: .9s; }
.t-evperak .cover__to { padding: .75rem .5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.t-evperak .cover.is-open { transform: none; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
body.t-evperak .ibtn--solid { background: linear-gradient(135deg, #8a93a6, #6e7891); }
body.t-evperak .countdown b { color: var(--accent); font-family: var(--fh); }
body.t-evperak .event { border: 1px solid var(--line); }
body.t-evperak .event::before { display: block !important; inset: 6px; border: 1px solid var(--line); border-radius: 0; }
body.t-evperak .event h3 { color: var(--k3); }
