/* Dekorasi tema undangan: pola, ornamen, bingkai, foil emas. Semua berbasis variabel CSS tema (lihat config/themes.php). */
:root{--fgrad:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));--fsheen:linear-gradient(100deg,var(--g1) 0%,var(--g2) 28%,var(--g1) 52%,var(--g2) 78%,var(--g1) 100%)}
body{background:var(--bg2,var(--soft))}
h1,h2,h3{font-weight:var(--hw)}
.names{font-family:var(--fn);font-weight:var(--nw)}
[data-scr] .names{font-size:clamp(46px,14.5vw,70px);line-height:1.04;letter-spacing:0;padding:.05em 0;text-wrap:balance}
[data-scr] .names.big{font-size:clamp(50px,15.5vw,76px)}
.h{font-weight:var(--hw)}
[data-caps] .h{text-transform:uppercase;letter-spacing:.14em;font-size:23px}
.eyebrow{color:var(--accent2)}

/* ikon, pemisah, sudut */
.ico{display:inline-block;width:54px;height:54px;background:var(--fgrad);-webkit-mask:var(--orn) center/contain no-repeat;mask:var(--orn) center/contain no-repeat}
.hero-ico{width:64px;height:64px;margin-bottom:10px}
.dv{display:block;margin:0 auto;width:min(230px,70%);height:22px;background:var(--fgrad);-webkit-mask:var(--dv) center/contain no-repeat;mask:var(--dv) center/contain no-repeat}
.orn{display:block;max-width:none;margin:20px auto}.orn::before,.orn::after{display:none}
.h::after{content:"";display:block;margin:12px auto 0;width:150px;height:16px;background:var(--fgrad);-webkit-mask:var(--dv) center/contain no-repeat;mask:var(--dv) center/contain no-repeat}

/* ===== COVER ===== */
.cover{background-color:var(--bg);background-image:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.22) 130%),radial-gradient(110% 60% at 50% 0%,var(--bg2) 0,transparent 75%),linear-gradient(180deg,var(--bg),var(--bg2) 130%);background-size:cover;background-position:center;overflow:auto}
.cover .cover-in{position:relative;z-index:2;margin:auto}
.cv-bg{position:absolute;inset:0;background:var(--g2);-webkit-mask:var(--pat) 0 0/var(--patsz) auto repeat;mask:var(--pat) 0 0/var(--patsz) auto repeat;opacity:calc(var(--patop)*1.2);pointer-events:none}
.cv-spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 52% at 50% 52%,var(--bg) 0,var(--bg) 18%,transparent 100%);opacity:.72}
.has-photo .cv-bg,.has-photo .cv-spot{display:none}
.cv-frame,.cv-c{display:none;position:absolute;pointer-events:none;z-index:1}
.cv-medal{position:relative;width:88px;height:88px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--f2)}
.cv-medal::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid var(--line)}
.cv-medal .ico{width:44px;height:44px}
[data-foil] .cv-medal{box-shadow:0 0 38px var(--glow)}
[data-cv=frame] .cv-frame,[data-cv=deco] .cv-frame{display:block;inset:17px;border:1px solid var(--f2);outline:1px solid var(--line);outline-offset:-8px}
[data-cv=deco] .cv-frame{border:3px double var(--f2);outline:0}
[data-cv=frame] .cv-c,[data-cv=deco] .cv-c{display:block;width:80px;height:80px;background:var(--fgrad);-webkit-mask:var(--cnr) center/contain no-repeat;mask:var(--cnr) center/contain no-repeat}
.cv-c.c1{top:14px;left:14px}.cv-c.c2{top:14px;right:14px;transform:scaleX(-1)}.cv-c.c3{bottom:14px;left:14px;transform:scaleY(-1)}.cv-c.c4{bottom:14px;right:14px;transform:scale(-1,-1)}
[data-cv=deco] .cv-c{width:70px;height:70px}
[data-cv=deco] .cover::before{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:repeating-conic-gradient(from 90deg at 50% 0,var(--g2) 0 2.4deg,transparent 2.4deg 11deg);opacity:.15;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);pointer-events:none}
[data-cv=arch] .cover-in{width:min(88%,350px);padding:64px 20px 38px;border:1px solid var(--f2);border-radius:999px 999px 26px 26px;outline:1px solid var(--line);outline-offset:8px;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%)}
[data-cv=arch] .cv-medal{margin-top:-10px}
[data-cv=band] .cover::before,[data-cv=band] .cover::after{content:"";position:absolute;left:0;right:0;height:92px;background:var(--g2);-webkit-mask:var(--pat) 0 0/var(--patsz) auto repeat;mask:var(--pat) 0 0/var(--patsz) auto repeat;opacity:.5;pointer-events:none}
[data-cv=band] .cover::before{top:0}[data-cv=band] .cover::after{bottom:0}
[data-cv=band] .cv-frame{display:block;inset:92px 0;border-top:1px solid var(--f2);border-bottom:1px solid var(--f2)}
[data-cv=plain] .cv-medal{border-color:var(--line)}

/* ===== FOIL (tema premium) ===== */
[data-foil] .names,[data-foil] .h,[data-foil] .cd b{background:var(--fsheen);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:foil 9s ease-in-out infinite alternate}
[data-foil] .cover-in.on-photo .names{background:none;-webkit-text-fill-color:#fff;color:#fff;animation:none}
@keyframes foil{from{background-position:0 0}to{background-position:100% 0}}
[data-foil] .cv-medal{animation:glowp 5s ease-in-out infinite}
@keyframes glowp{50%{box-shadow:0 0 56px var(--glow)}}
[data-foil] .btn{background:var(--fgrad);border-color:transparent;color:var(--onbtn);box-shadow:0 8px 22px var(--glow)}
[data-foil] .btn.ghost{background:transparent;border:1px solid var(--f2);color:var(--accent2);box-shadow:none}
[data-foil] .wrap{background:var(--bg)}
[data-foil] .sec.alt{background:linear-gradient(180deg,var(--bg2),var(--bg) 45%,var(--bg2))}
[data-foil] .card{border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--soft))}
[data-foil] .card::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);border-radius:13px;opacity:.75;pointer-events:none}
[data-foil] .cd div{background:transparent;border:1px solid var(--line);color:var(--ink)}
[data-foil] .tl{border-color:var(--line)}[data-foil] .tl-item::before{background:var(--fgrad);box-shadow:0 0 0 4px var(--bg)}
[data-foil] .gal img{border:1px solid var(--line);padding:3px;background:var(--card)}
[data-foil] .wish .av,[data-foil] .music{background:var(--fgrad);color:var(--onbtn)}
[data-foil] .tag{background:transparent;border:1px solid var(--line)}

/* ornamen latar bagian */
.card{position:relative}
.sec{position:relative}.sec>*{position:relative}
.hero::before,.sec.alt::before,.closing::before{content:"";position:absolute!important;inset:0;background:var(--g2);-webkit-mask:var(--pat) 0 0/var(--patsz) auto repeat;mask:var(--pat) 0 0/var(--patsz) auto repeat;opacity:calc(var(--patop)*.55);pointer-events:none}

/* foto tokoh */
[data-ph=arch] .person img,[data-ph=arch] .person .ph{width:168px;height:224px;border:0;border-radius:999px 999px 16px 16px;outline:1px solid var(--f2);outline-offset:6px}
[data-foil] .person img{box-shadow:0 16px 36px var(--glow)}
[data-foil] .person .ph{background:var(--fgrad);color:var(--onbtn)}

.preview-bar a{color:#ffd98a}
.demo-bar{position:fixed;top:auto;bottom:10px;left:50%;transform:translateX(-50%);width:min(450px,calc(100% - 20px));border-radius:12px;padding:10px 12px;line-height:1.4;z-index:90;box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ===== KARTU TEMA MINI (katalog, editor, beranda) ===== */
.tc{--fgrad:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));--fsheen:linear-gradient(100deg,var(--g1) 0%,var(--g2) 28%,var(--g1) 52%,var(--g2) 78%,var(--g1) 100%);display:block;position:relative;isolation:isolate;aspect-ratio:3/4.15;border-radius:16px;overflow:hidden;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(110% 60% at 50% 0%,var(--bg2) 0,transparent 75%),linear-gradient(180deg,var(--bg),var(--bg2) 130%);box-shadow:0 12px 30px rgba(20,10,0,.2);transition:transform .25s}
a.tc:hover,.tc.is-on{transform:translateY(-3px)}
.tc-pat{position:absolute;inset:0;background:var(--g2);-webkit-mask:var(--pat) 0 0/calc(var(--patsz)*.55) auto repeat;mask:var(--pat) 0 0/calc(var(--patsz)*.55) auto repeat;opacity:calc(var(--patop)*1.8)}
.tc-frame,.tc-c{display:none;position:absolute;pointer-events:none}
.tc[data-cv=frame] .tc-frame,.tc[data-cv=deco] .tc-frame{display:block;inset:9px;border:1px solid var(--f2);outline:1px solid var(--line);outline-offset:-5px}
.tc[data-cv=deco] .tc-frame{border:2px double var(--f2);outline:0}
.tc[data-cv=frame] .tc-c,.tc[data-cv=deco] .tc-c{display:block;width:42px;height:42px;background:var(--fgrad);-webkit-mask:var(--cnr) center/contain no-repeat;mask:var(--cnr) center/contain no-repeat}
.tc-c.c1{top:7px;left:7px}.tc-c.c2{top:7px;right:7px;transform:scaleX(-1)}.tc-c.c3{bottom:7px;left:7px;transform:scaleY(-1)}.tc-c.c4{bottom:7px;right:7px;transform:scale(-1,-1)}
.tc[data-cv=deco]::before{content:"";position:absolute;left:0;right:0;top:0;height:60%;background:repeating-conic-gradient(from 90deg at 50% 0,var(--g2) 0 2.4deg,transparent 2.4deg 11deg);opacity:.15;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.tc[data-cv=band]::before,.tc[data-cv=band]::after{content:"";position:absolute;left:0;right:0;height:34px;background:var(--g2);-webkit-mask:var(--pat) 0 0/calc(var(--patsz)*.5) auto repeat;mask:var(--pat) 0 0/calc(var(--patsz)*.5) auto repeat;opacity:.5}
.tc[data-cv=band]::before{top:0}.tc[data-cv=band]::after{bottom:0}
.tc-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:22px 16px}
.tc[data-cv=arch] .tc-in{inset:16px 18px;padding:30px 8px 16px;border:1px solid var(--f2);border-radius:999px 999px 14px 14px;outline:1px solid var(--line);outline-offset:4px}
.tc .ico{width:38px;height:38px}
.tc-eye{font:600 8px/1.2 var(--fb);letter-spacing:.26em;text-transform:uppercase;color:var(--accent2)}
.tc-names{font-family:var(--fn);font-weight:var(--nw);font-size:25px;line-height:1.08;color:var(--accent2)}
.tc[data-scr] .tc-names{font-size:34px;line-height:1}
.tc[data-foil] .tc-names{background:var(--fsheen);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tc .dv{width:70%;height:12px}
.tc-btn{font:600 8px var(--fb);letter-spacing:.04em;padding:6px 14px;border-radius:99px;background:var(--fgrad);color:var(--onbtn);margin-top:4px}
.tc-tag{position:absolute;top:9px;left:9px;z-index:3;font:700 9.5px/1 var(--fb);padding:4px 9px;border-radius:99px;background:rgba(20,12,4,.62);color:#fff;letter-spacing:.03em}
.tc-tag.premium{background:linear-gradient(135deg,#fbeab0,#d4a246);color:#2b1c05}
.tc-lock{position:absolute;top:9px;right:9px;z-index:3;width:22px;height:22px;border-radius:50%;background:rgba(20,12,4,.62);color:#fff;display:grid;place-items:center;font-size:11px}