@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');:root{--maroon:#650d24;--maroon2:#8d1835;--gold:#d9b56d;--ink:#26212a;--muted:#827b83;--line:#eee8eb;--bg:#f7f4f5;--green:#18794e}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',Arial,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}.shell{display:flex;min-height:100vh}.sidebar{width:245px;background:#fff;border-right:1px solid var(--line);padding:25px 16px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:11px;font-size:14px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.5px;margin-top:4px}.brand-mark{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,var(--maroon2),#420719);color:var(--gold);display:grid;place-items:center;font:800 18px 'Playfair Display';box-shadow:0 8px 20px #650d242b}.smallmark{width:42px;height:42px;border-radius:13px;font-size:14px}.sidebar nav{display:grid;gap:7px;margin-top:42px}.sidebar nav a,.sidebar-bottom a{padding:13px;border-radius:11px;color:#766d75;font-weight:700;font-size:13px}.sidebar nav a.active,.sidebar nav a:hover{background:#f7edf0;color:var(--maroon)}.sidebar-bottom{margin-top:auto;display:grid;gap:5px;border-top:1px solid var(--line);padding-top:14px}.main{margin-left:245px;width:calc(100% - 245px);padding:27px 32px;max-width:1500px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.topbar h1{font-size:25px;margin:4px 0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.7px;color:var(--maroon2);margin:0 0 7px}.eyebrow.light{color:#e8c982}.user-chip{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700}.user-chip small{display:block;color:var(--muted);font-size:10px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f3e6ea;color:var(--maroon)}.hero{padding:29px 30px;border-radius:19px;background:radial-gradient(circle at 80% 10%,#a7465d,transparent 35%),linear-gradient(120deg,#51091e,#811b37);color:white;display:flex;justify-content:space-between;align-items:center;gap:15px}.hero h2{font:700 28px 'Playfair Display';margin:5px 0 8px}.hero p:not(.eyebrow){color:#f2dfe5;font-size:13px}.btn{border:0;border-radius:9px;padding:11px 15px;font:700 12px 'DM Sans';cursor:pointer;display:inline-flex;justify-content:center}.primary{background:var(--maroon);color:#fff}.gold{background:var(--gold);color:#3f2b0b}.secondary,.smallbtn{background:#f2ecef;color:var(--maroon)}.lightbtn{background:white;color:var(--maroon)}.full{width:100%;margin-top:12px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:17px 0}.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;box-shadow:0 5px 20px #3c152008}.stat span{font-size:11px;color:var(--muted)}.stat strong{font-size:23px;display:block;margin:8px 0 4px}.stat small{font-size:10px;color:var(--muted)}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.panel{margin-bottom:15px}.panel h3{margin:0 0 13px;font-size:16px}.quick-links{display:grid;gap:8px}.quick-links a{padding:11px;border-radius:9px;background:#faf7f8;color:var(--maroon);font-size:12px;font-weight:700}.muted{color:var(--muted);font-size:12px;line-height:1.7}.inline-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.inline-form input{flex:1;min-width:170px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label{font-size:11px;color:var(--muted)}input,select{width:100%;padding:11px;border:1px solid #e5dce0;border-radius:9px;background:white;font:13px 'DM Sans';margin-top:6px}label{display:block;font-size:11px;font-weight:700;color:#665b62;margin:12px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:540px}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #f0eaed;font-size:11px}th{color:var(--muted);font-size:10px;text-transform:uppercase}td form{margin:0}.smallbtn{padding:7px 10px;font-size:10px}.alert{padding:12px 14px;border-radius:9px;margin:0 0 15px;font-size:12px}.alert.success{background:#eaf7ef;color:#17653e}.alert.danger{background:#fff0f1;color:#a21f38}.alert.warning{background:#fff6df;color:#805b0a}.draw-admin{text-align:center;padding:40px 18px}.draw-admin h2{font:700 30px 'Playfair Display';color:var(--maroon)}.draw-admin form{max-width:350px;margin:20px auto}.draw-admin form button{width:100%;padding:15px}footer{text-align:center;color:#a69da3;font-size:10px;padding:20px}.auth-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f8f5f6,#eee6e9)}.auth-card{width:min(420px,calc(100% - 32px));background:white;border:1px solid var(--line);border-radius:21px;padding:34px;box-shadow:0 20px 70px #4e11201a}.auth-card .brand-mark{margin-bottom:20px}.auth-card h1{font:700 28px 'Playfair Display';margin:5px 0}.auth-card form{margin-top:20px}.public-bg{min-height:100vh;background:radial-gradient(circle at 50% 10%,#8e2845,#410719 48%,#1c0710);color:white}.public-wrap{max-width:1050px;margin:auto;padding:35px 22px}.public-head{text-align:center;padding:20px 0 28px}.public-head .brand-mark{margin:0 auto 15px}.public-head h1{font:800 42px 'Playfair Display';letter-spacing:2px;margin:8px 0}.public-head p:not(.eyebrow){color:#e7cbd3;font-size:13px}.public-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.public-stats article{border:1px solid #ffffff25;background:#ffffff0d;border-radius:13px;padding:16px;text-align:center}.public-stats span{display:block;color:#e4cbd2;font-size:10px}.public-stats b{display:block;margin-top:7px;color:#f3d99d;font-size:16px}.winner-stage{position:relative;text-align:center;margin:22px 0;padding:42px 18px;border:1px solid #d9b56d77;border-radius:21px;background:linear-gradient(135deg,#ffffff12,#ffffff06);overflow:hidden}.winner-stage:before,.winner-stage:after{content:'✦';position:absolute;color:#d9b56d66;font-size:75px}.winner-stage:before{left:22px;top:5px}.winner-stage:after{right:22px;bottom:0}.winner-stage .eyebrow{color:#e8c982}.winner-name{font:800 clamp(32px,6vw,60px) 'Playfair Display';color:#f4d58d;margin:18px 0;text-shadow:0 4px 25px #f2ca6b55}.prize-label{font-size:9px;letter-spacing:2px;color:#e4cbd2;margin-top:20px}.prize-value{font-size:30px;font-weight:800;color:#f5d995;margin-top:5px}.waiting{font:700 24px 'Playfair Display';color:#f2d28c;padding:25px}.spark{font-size:26px;color:var(--gold)}.public-history{background:#ffffff0d;border:1px solid #ffffff20;border-radius:15px;padding:21px}.public-history h2{font:700 21px 'Playfair Display'}.history-list>div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #ffffff18;font-size:12px}.history-list small{display:block;color:#d7bfc7;margin-top:4px}.history-list strong{color:#f3d58e}.public-foot{text-align:center;color:#d7bfc7;font-size:10px;margin-top:24px}
@media(max-width:950px){.sidebar{width:210px}.main{margin-left:210px;width:calc(100% - 210px);padding:22px}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.shell{display:block}.sidebar{position:relative;width:100%;padding:12px}.sidebar nav{display:flex;overflow:auto;margin-top:13px}.sidebar nav a{white-space:nowrap;padding:9px}.sidebar-bottom{display:flex;margin-top:10px;padding-top:9px}.main{margin:0;width:100%;padding:16px 12px}.topbar h1{font-size:20px}.hero{padding:22px;display:block}.hero h2{font-size:23px}.hero>a{margin-top:10px}.stat-grid{gap:8px}.stat{padding:13px}.stat strong{font-size:17px}.panel-grid,.form-grid{grid-template-columns:1fr}.public-stats{grid-template-columns:repeat(2,1fr)}.public-head h1{font-size:34px}}
.winner-name.rolling{animation:rollPulse .18s linear infinite;filter:blur(.25px);color:#fff0bd}@keyframes rollPulse{0%{transform:translateY(-2px);opacity:.72}50%{transform:translateY(2px);opacity:1}100%{transform:translateY(-2px);opacity:.72}}

/* Penyempurnaan ARISAN KBHN v2 */
.pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#f4edf0;color:var(--maroon);font-size:10px;font-weight:800}
.pill.green{background:#e8f6ee;color:#176b43}
.pill.warning{background:#fff3d7;color:#805b0a}
.draw-admin{background:radial-gradient(circle at 50% 0,#fff9e8,white 62%);border-color:#ead9b0}
.draw-admin h2{font-size:34px}
.winner-stage{box-shadow:0 20px 60px #12020b55,inset 0 0 50px #f8d98b10}
.winner-name.rolling{animation:roulette .12s linear infinite;text-shadow:0 0 20px #f5d995,0 0 48px #f5d995;filter:none;letter-spacing:2px}
@keyframes roulette{0%{transform:translateY(-8px) scale(.98);opacity:.7}50%{transform:translateY(8px) scale(1.02);opacity:1}100%{transform:translateY(-8px) scale(.98);opacity:.7}}
.stat-grid{align-items:stretch}
.stat{transition:transform .2s ease,box-shadow .2s ease}
.stat:hover{transform:translateY(-3px);box-shadow:0 12px 28px #3c152015}
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
@media(max-width:650px){.draw-admin h2{font-size:26px}}

/* v3 interaction refinements */
.action-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.danger-btn{background:#fff0f0!important;color:#a32635!important;border:1px solid #f0c9ce!important}.winner-attendance{font-weight:700;color:#8d1835;margin:8px 0 0}.history-list small{display:block}.btn{transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px #650d2418}
@media(max-width:700px){.action-row{flex-direction:column;align-items:stretch}.action-row form,.action-row button{width:100%}}

.roster-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.public-history .table-wrap{overflow:auto}.public-history table{width:100%;border-collapse:collapse}.public-history th,.public-history td{text-align:left;padding:12px 10px;border-bottom:1px solid #eee8eb;font-size:13px}.public-history th{color:#827b83;font-size:11px;text-transform:uppercase;letter-spacing:.6px}


/* ARISAN KBHN - public participant page refresh */
.public-bg{
 min-height:100vh;
 background:linear-gradient(180deg,#fbf8f4 0%,#f4edf0 58%,#f8f5f0 100%);
 color:#30232a;
}
.public-wrap{max-width:1120px;padding:38px 24px 28px}
.public-head{padding:8px 0 28px}
.public-head h1{color:#5e1028;text-shadow:none;letter-spacing:1.2px}
.public-head p:not(.eyebrow){color:#6d6066;font-size:14px}
.public-head .brand-mark{box-shadow:0 8px 24px #5e102822}
.public-stats article{
 background:#fff;border:1px solid #eadfe2;box-shadow:0 8px 24px #4a1a2409;
}
.public-stats span{color:#756871;font-size:11px}
.public-stats b{color:#741b37;font-size:17px}
.winner-stage{
 background:radial-gradient(circle at 50% 0%,#8d2948 0%,#68172f 52%,#4e1025 100%);
 border:1px solid #d6b56e;box-shadow:0 18px 44px #4d142015;
 color:#fff;padding:52px 20px;margin:22px 0;
}
.winner-stage .eyebrow{color:#f4d58d}
.winner-name{color:#ffe3a0;text-shadow:0 5px 25px #16040a66}
.winner-meta{color:#fff;font-weight:600}
.winner-attendance{color:#f7e7c5}
.prize-label{color:#f4d58d}
.prize-value{color:#ffe3a0}
.winner-stage .muted{color:#ead7dc}
.waiting{color:#ffe3a0}
.public-history{
 background:#fff;border:1px solid #eadfe2;border-radius:17px;
 padding:23px;margin:16px 0;box-shadow:0 9px 26px #4a1a2409;color:#30232a;
}
.public-history h2{color:#5e1028;margin:0 0 14px}
.public-history .eyebrow{color:#8b2948}
.public-history th{color:#776a70}
.public-history td{color:#3c3036;border-bottom-color:#eee6e8}
.public-history .muted{color:#81747a}
.public-history .history-list>div{border-bottom:1px solid #eee6e8;color:#382b32}
.public-history .history-list small{color:#82747b}
.public-history .history-list strong{color:#7b1c39}
.public-foot{color:#81747a}
.pill.warning{background:#fff0ed;color:#a33c30}
.paid-date{display:block;margin-top:5px;color:#6d6066;font-size:10px}
.winner-stage.rolling .winner-name{color:#fff;text-shadow:0 0 24px #ffe5a5}
.winner-stage.winner-celebrate{animation:winnerGlow 1.2s ease}
.winner-name.winner-final{animation:winnerPop .75s cubic-bezier(.2,1.4,.4,1)}
@keyframes winnerPop{0%{transform:scale(.45);opacity:.15;filter:blur(8px)}65%{transform:scale(1.13);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes winnerGlow{0%,100%{box-shadow:0 18px 44px #4d142015}45%{box-shadow:0 0 0 7px #d6b56e55,0 0 60px #d6b56e77}}
.confetti{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;z-index:4;pointer-events:none;animation:confettiFall 2.6s ease-in forwards}
@keyframes confettiFall{0%{transform:translate3d(0,-10px,0) rotate(0);opacity:1}100%{transform:translate3d(var(--fall-x),520px,0) rotate(780deg);opacity:0}}
@media(max-width:650px){
 .public-wrap{padding:22px 14px}
 .public-head h1{font-size:32px}
 .public-stats{gap:9px}
 .public-stats article{padding:13px 9px}
 .winner-stage{padding:38px 12px}
 .winner-name{font-size:clamp(30px,10vw,48px)}
 .public-history{padding:16px}
 .public-history th,.public-history td{padding:10px 8px;font-size:11px}
}


/* Dramatic ARISAN KBHN spin wheel */
.wheel-area{position:relative;width:min( min(78vw,560px), 100% );aspect-ratio:1;margin:24px auto 12px;display:grid;place-items:center;filter:drop-shadow(0 18px 28px rgba(35,4,18,.28));}
.wheel-area canvas{display:block;width:100%;height:100%;border-radius:50%;background:#f8e9c8;border:7px solid #f2d58c;box-shadow:0 0 0 5px rgba(255,255,255,.16),inset 0 0 0 3px rgba(91,17,43,.22);}
.wheel-pointer{position:absolute;z-index:4;top:-13px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:23px solid transparent;border-right:23px solid transparent;border-top:0;border-bottom:48px solid #f7d77e;filter:drop-shadow(0 4px 3px rgba(0,0,0,.32));}
.wheel-pointer:after{content:"";position:absolute;left:-11px;top:8px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:25px solid #8b1738;}
.wheel-hub{position:absolute;z-index:3;width:18%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#9d3150,#5b102a 72%);border:5px solid #f6d98f;box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.18);color:#f9df9c;font-family:Georgia,serif;font-weight:900;font-size:clamp(13px,2.2vw,25px);letter-spacing:.04em;}
.wheel-hint{min-height:22px;margin:8px 0 18px;color:#f6d98f;font-size:.9rem;font-weight:700;letter-spacing:.04em;}
.result-eyebrow{margin-top:6px;}
.winner-stage{overflow:hidden;}
.winner-name.rolling{font-size:clamp(1.4rem,4vw,2.5rem);letter-spacing:.08em;opacity:.94;}
.winner-name.winner-final{animation:wheelWinnerPop .9s cubic-bezier(.2,1.5,.4,1) both;text-shadow:0 0 24px rgba(255,218,125,.55);}
@keyframes wheelWinnerPop{0%{transform:scale(.35) rotate(-8deg);filter:blur(8px);opacity:0}65%{transform:scale(1.16) rotate(2deg);filter:blur(0);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:600px){.wheel-area{width:min(88vw,430px);margin:22px auto 8px}.wheel-pointer{border-left-width:18px;border-right-width:18px;border-bottom-width:38px}.wheel-pointer:after{left:-9px;top:7px;border-left-width:9px;border-right-width:9px;border-bottom-width:20px}.wheel-hub{border-width:3px}.wheel-hint{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.winner-name.winner-final{animation:none}}
/* Tombol pembayaran iuran */
.btn-lunas {
    background: #16834a !important;
    color: #ffffff !important;
    border: 1px solid #16834a !important;
}

.btn-lunas:hover {
    background: #106b3b !important;
    box-shadow: 0 4px 12px #16834a40;
}

.btn-batalkan {
    background: #c62828 !important;
    color: #ffffff !important;
    border: 1px solid #c62828 !important;
}

.btn-batalkan:hover {
    background: #a51f1f !important;
    box-shadow: 0 4px 12px #c6282840;
}