:root{--gold:#F0A010;--green:#00B040;--blue:#0080D0;--red:#E01020;--ink:#1c2430;--muted:#6b7686;--line:#e6e9ee;--bg:#f6f8fb;--card:#fff;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 'Open Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3,.brand,.btn,.stat b{font-family:Poppins,'Open Sans',sans-serif}
h1{font-size:1.65rem;line-height:1.2;margin:.1em 0 .3em}h2{font-size:1.15rem;margin:1.2em 0 .6em}h3{font-size:1rem;margin:1.2em 0 .5em}
a{color:var(--blue)}.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.g{color:var(--green)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topin{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:1rem}
.dots{display:inline-grid;grid-template-columns:repeat(2,9px);gap:3px}.dots i{width:9px;height:9px;border-radius:50%}
.dots i:nth-child(1){background:var(--gold)}.dots i:nth-child(2){background:var(--green)}.dots i:nth-child(3){background:var(--blue)}.dots i:nth-child(4){background:var(--red)}
.dots.big{grid-template-columns:repeat(4,12px);margin-bottom:12px}.dots.big i{width:12px;height:12px}
.top nav{display:flex;gap:2px;flex:1;overflow-x:auto}.top nav a{padding:8px 12px;border-radius:9px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.92rem;white-space:nowrap}
.top nav a:hover{background:var(--bg)}.top nav a.on{color:var(--blue);background:#e8f3fb}
.me{display:flex;align-items:center;gap:10px}.meb{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem}.lo{font-size:.85rem;color:var(--muted)}
.main{padding-top:24px;padding-bottom:60px}
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-block}.av-i{display:inline-flex;align-items:center;justify-content:center;background:#e8f3fb;color:var(--blue);font-weight:700;font-family:Poppins}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}.ph2{display:flex;justify-content:space-between;align-items:center;gap:10px}.ph2 h2{margin:0}
.back{font-size:.9rem;text-decoration:none;color:var(--muted)}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{border-color:#c9d0da}.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-primary:hover{background:#0070b8;border-color:#0070b8}
.btn-on{background:#e8f3fb;border-color:var(--blue);color:var(--blue)}.btn-block{display:block;width:100%;text-align:center;padding:13px;font-size:1rem;margin-top:10px}
.lnk{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:underline;padding:0}.red{color:var(--red)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:0 0 16px}.card>h2:first-child{margin-top:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.cols>section.card{margin:0}.cols>section>h2:first-child{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 12px}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}.stat b{display:block;font-size:1.7rem}.stat span{color:var(--muted);font-size:.85rem}
.list{display:flex;flex-direction:column;gap:8px}
.evrow{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 0;text-decoration:none;color:inherit;overflow:hidden}
.evrow:hover{border-color:#c9d0da;box-shadow:0 2px 8px rgba(20,30,50,.05)}
.bar{width:5px;align-self:stretch;border-radius:0 4px 4px 0}.evd{display:flex;flex-direction:column;align-items:center;min-width:44px}.evd b{font:600 1.4rem Poppins;line-height:1}.evd small{text-transform:uppercase;color:var(--muted);font-size:.7rem}
.evm{display:flex;flex-direction:column;gap:1px;min-width:0}.evm small{color:var(--muted)}
.badge{display:inline-block;font:600 .7rem Poppins;padding:2px 9px;border-radius:99px;background:#eef1f5;color:var(--muted);vertical-align:middle}
.b-green{background:#e3f7ea;color:#0a8a3a}.b-blue{background:#e5f2fb;color:#0870b5}.b-red{background:#fde7e9;color:#c0101c}
.empty{color:var(--muted);padding:14px;background:#fff;border:1px dashed var(--line);border-radius:12px;margin:0}
.tabs{display:flex;gap:6px;margin-bottom:14px}.tabs a{padding:7px 14px;border-radius:99px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.88rem;background:#fff;border:1px solid var(--line)}.tabs a.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.calnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.calnav b{min-width:140px;text-align:center;font-family:Poppins}
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal-h,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-h div{padding:8px;text-align:center;font:600 .78rem Poppins;color:var(--muted);background:#fafbfd;border-bottom:1px solid var(--line)}
.cell{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px}.cell:nth-child(7n){border-right:0}.cell.off{background:#fafbfd}
.cell.today{background:#fffaf0}.cell.today .dn{background:var(--gold);color:#fff}.dn{font:600 .78rem Poppins;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.chip{display:block;text-decoration:none;color:var(--ink);font-size:.72rem;line-height:1.25;padding:3px 6px;border-radius:6px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);overflow:hidden}
.chip small{display:block;color:var(--muted);font-size:.66rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip.cx{opacity:.55;text-decoration:line-through}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 18px;font-size:.85rem;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.form label{display:block;font-weight:600;font-size:.88rem;margin-bottom:14px}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid #cfd6df;border-radius:10px;font:inherit;font-weight:400;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #bfe0f6;border-color:var(--blue)}input[type=color]{height:42px;padding:3px;width:80px}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}.grid4{display:grid;grid-template-columns:2fr 1fr auto auto;gap:0 14px;align-items:end}.grid4 .btn{margin-bottom:14px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 14px}legend{font:600 .85rem Poppins;padding:0 6px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}.chk{display:flex!important;align-items:center;gap:8px;font-weight:400!important;margin:0!important;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.actions{display:flex;gap:10px}.row-av{display:flex;align-items:center;gap:18px;margin-bottom:12px}.row-av label{flex:1}
.copy{display:flex;gap:8px}.copy input{margin:5px 0 0}.copy .btn{margin-top:5px;white-space:nowrap}
.dl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;margin:0}.dl dt{color:var(--muted);font-size:.85rem}.dl dd{margin:0}
.tlist{display:flex;flex-direction:column;gap:8px}.tchip{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:8px;border:1px solid var(--line);border-radius:12px}.tchip span{display:flex;flex-direction:column}.tchip small{color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}.tcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 12px;text-decoration:none;color:inherit}.tcard:hover{border-color:#c9d0da;box-shadow:0 2px 10px rgba(20,30,50,.06)}.tcard.off{opacity:.55}.tcard small{color:var(--muted)}
.prof{display:flex;gap:22px;align-items:center}.prof h1{margin:0}
.pinbox{display:flex;align-items:center;gap:14px;background:#fff8e6;border:1px solid #f6dc9a;border-radius:12px;padding:10px 14px;margin:10px 0 14px}.pinbox span{font-size:.85rem;color:#8a6200;font-weight:600}.pinbox b{font:700 1.6rem Poppins;letter-spacing:.2em}.pinbox form{margin-left:auto}
.qrs{display:flex;gap:22px;flex-wrap:wrap;margin:8px 0}.qrs figure{margin:0;text-align:center}.qrs figcaption{font-size:.8rem;color:var(--muted);margin-top:4px}.qrs div{padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;display:inline-block;min-width:60px;min-height:60px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}th{font:600 .78rem Poppins;color:var(--muted)}
blockquote{margin:8px 0;padding:8px 14px;border-left:3px solid var(--gold);background:#fffaf0;border-radius:0 8px 8px 0}blockquote small{display:block;color:var(--muted);font-size:.75rem}
.danger{text-align:right;margin-top:8px}
.flash{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;padding:10px 18px;border-radius:10px;background:#0a8a3a;color:#fff;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:opacity .5s;max-width:92vw}.flash-err{background:var(--red)}
.alert{background:#fde7e9;color:#a30d18;padding:10px 14px;border-radius:10px;margin:0 0 14px;font-size:.92rem}.notice{background:#eef6fc;color:#0a5c93;padding:12px 14px;border-radius:10px;margin:0 0 14px}
/* halaman publik & login */
body.pub{background:linear-gradient(180deg,#f2f8fd,#fff 320px);padding:20px 14px 50px}
.pub-card{max-width:480px;margin:20px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px;box-shadow:0 8px 30px rgba(20,40,80,.06)}
.pub-card .eyebrow{font:600 .72rem Poppins;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin:6px 0 2px}.pub-card h1{font-size:1.35rem;margin:0 0 6px}
.pub-card .sub{margin:20px 0 14px;padding-top:16px;border-top:1px solid var(--line);font-size:1.05rem}
.pub-card label{display:block;font-weight:600;font-size:.9rem;margin-bottom:14px}
.pin-in{font:700 1.6rem Poppins;letter-spacing:.35em;text-align:center}
.ok-box{text-align:center;padding:10px 0}.big-ok{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}.big-ok.heart{background:var(--red)}
.tblock{border-radius:14px;padding:14px;margin-bottom:16px}.tblock legend{display:flex;align-items:center;gap:10px;font-size:1rem}
.q{margin-bottom:12px}.q span{font-weight:600;display:block}.q small{color:var(--muted);display:block}
.rate{display:inline-flex;flex-direction:row-reverse;gap:2px;margin-top:4px}.rate input{position:absolute;opacity:0;width:1px;height:1px}
.rate label{font-size:2.1rem;line-height:1;color:#d5dae1;cursor:pointer;margin:0;padding:0 2px}.rate input:checked~label,.rate label:hover,.rate label:hover~label{color:var(--gold)}.rate input:focus-visible+label{outline:2px solid var(--blue);border-radius:4px}
.donate{margin-top:18px;padding:16px;border-radius:14px;background:#f2fbf5;border:1px solid #cdeed8}.bank{text-align:center;background:#fff;border:1px dashed #86d4a3;border-radius:12px;padding:14px}.bank span{font:600 .9rem Poppins;color:var(--muted)}.bank b{display:block;font:700 1.6rem Poppins;letter-spacing:.06em;margin:2px 0}.bank small{display:block;color:var(--muted);margin-bottom:10px}
@media(max-width:760px){.cols,.grid2,.grid3,.grid4{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.cell{min-height:64px;padding:2px}.chip{font-size:.62rem;padding:2px 3px}.chip small{display:none}.prof{flex-direction:column;text-align:center}.me span{display:none}.topin{gap:8px}}

.evm .badge{align-self:flex-start;margin:2px 0}