:root{--hijau:#1d9e75;--hijau-muda:#e1f5ee;--hijau-tua:#085041;--kuning:#ef9f27;--kuning-muda:#faeeda;--putih:#fafaf8;--abu:#888780;--teks:#2c2c2a;--radius:16px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--putih);color:var(--teks);min-height:100vh;font-family:DM Sans,sans-serif;overflow-x:hidden}body:before{content:"";z-index:0;background:radial-gradient(circle,#9fe1cb55 0%,#0000 70%);border-radius:50%;width:420px;height:420px;animation:8s ease-in-out infinite float;position:fixed;top:-120px;right:-120px}body:after{content:"";z-index:0;background:radial-gradient(circle,#fac77555 0%,#0000 70%);border-radius:50%;width:340px;height:340px;animation:10s ease-in-out infinite reverse float;position:fixed;bottom:-100px;left:-100px}@keyframes float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-30px)scale(1.05)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}70%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes leafSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{box-shadow:0 0 #1d9e7540}50%{box-shadow:0 0 0 14px #1d9e7500}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes successBounce{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.hero{z-index:1;text-align:center;padding:60px 24px 40px;animation:.7s both fadeUp;position:relative}.hero-badge{background:var(--hijau-muda);color:var(--hijau-tua);letter-spacing:.04em;border-radius:999px;align-items:center;gap:8px;margin-bottom:20px;padding:6px 18px;font-size:13px;font-weight:500;animation:.6s .2s both popIn;display:inline-flex}.hero-badge .dot{background:var(--hijau);border-radius:50%;width:7px;height:7px;animation:2s infinite pulse}.hero h1{color:var(--hijau-tua);margin-bottom:14px;font-family:Playfair Display,serif;font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.1;animation:.7s .15s both fadeUp}.hero h1 span{color:var(--kuning);display:inline-block;position:relative}.hero h1 span:after{content:"";background:var(--kuning);opacity:.25;border-radius:4px;width:100%;height:6px;position:absolute;bottom:2px;left:0}.hero-sub{color:var(--abu);max-width:480px;margin:0 auto 32px;font-size:16px;line-height:1.7;animation:.7s .3s both fadeUp}.info-row{z-index:1;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:48px;padding:0 24px;animation:.7s .4s both fadeUp;display:flex;position:relative}.info-card{background:#fff;border:1px solid #e8e6df;border-radius:14px;align-items:center;gap:12px;min-width:160px;padding:16px 22px;transition:transform .2s,box-shadow .2s;display:flex}.info-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #1d9e7518}.info-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:20px;display:flex}.info-icon.green{background:var(--hijau-muda)}.info-icon.yellow{background:var(--kuning-muda)}.info-label{color:var(--abu);letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:500}.info-val{color:var(--teks);margin-top:2px;font-size:14px;font-weight:500}.form-wrap{z-index:1;max-width:600px;margin:0 auto;padding:0 20px 80px;animation:.7s .5s both fadeUp;position:relative}.form-card{background:#fff;border:1px solid #e8e6df;border-radius:24px;padding:40px 36px;transition:box-shadow .3s;box-shadow:0 4px 40px #1d9e7510}.form-card:focus-within{box-shadow:0 8px 60px #1d9e7520}.form-title{color:var(--hijau-tua);align-items:center;gap:10px;margin-bottom:28px;font-family:Playfair Display,serif;font-size:22px;display:flex}.form-title .leaf{font-size:24px;animation:6s linear infinite leafSpin;display:inline-block}.status-toggle{background:#f4f2eb;border-radius:14px;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px;padding:5px;display:grid}.status-btn{cursor:pointer;color:var(--abu);background:0 0;border:none;border-radius:10px;padding:11px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;transition:all .25s}.status-btn.active-ikut{background:var(--hijau);color:#fff;box-shadow:0 4px 14px #1d9e7540}.status-btn.active-tidak{color:#fff;background:#d85a30;box-shadow:0 4px 14px #d85a3040}.field{margin-bottom:22px}.field label{color:var(--teks);letter-spacing:.01em;margin-bottom:8px;font-size:13px;font-weight:500;display:block}.field label span{color:#d85a30;margin-left:2px}.field input,.field textarea{width:100%;color:var(--teks);resize:none;background:#fafaf8;border:1.5px solid #e8e6df;border-radius:12px;outline:none;padding:12px 16px;font-family:DM Sans,sans-serif;font-size:15px;transition:border-color .2s,box-shadow .2s,transform .15s}.field input:focus,.field textarea:focus{border-color:var(--hijau);background:#fff;transform:scale(1.005);box-shadow:0 0 0 4px #1d9e7518}.field textarea{min-height:100px}.field input::placeholder,.field textarea::placeholder{color:#c4c2bb}.alasan-box{opacity:0;max-height:0;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s;overflow:hidden}.alasan-box.show{opacity:1;max-height:200px}.submit-btn{background:var(--hijau);color:#fff;cursor:pointer;letter-spacing:.02em;border:none;border-radius:14px;width:100%;padding:15px;font-family:DM Sans,sans-serif;font-size:16px;font-weight:500;transition:transform .15s,box-shadow .2s;position:relative;overflow:hidden}.submit-btn:before{content:"";background:linear-gradient(90deg,#0000,#fff2,#0000) 0 0/200% 100%;animation:2.5s infinite shimmer;position:absolute;inset:0}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px #1d9e7550}.submit-btn:active{transform:scale(.98)}.submit-btn.tidak{box-shadow:none;background:#d85a30}.submit-btn.tidak:hover{box-shadow:0 10px 28px #d85a3050}.success-overlay{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:300px;padding:40px 20px;display:none}.success-overlay.show{display:flex}.success-icon{border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:36px;animation:.6s both successBounce;display:flex}.success-icon.ikut{background:var(--hijau-muda)}.success-icon.tidak{background:#faece7}.success-overlay h2{color:var(--hijau-tua);font-family:Playfair Display,serif;font-size:26px}.success-overlay p{color:var(--abu);font-size:15px;line-height:1.6}.success-overlay .name-highlight{color:var(--teks);font-weight:500}.reset-btn{border:1.5px solid var(--hijau);color:var(--hijau);cursor:pointer;background:0 0;border-radius:10px;margin-top:8px;padding:10px 28px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;transition:all .2s}.reset-btn:hover{background:var(--hijau);color:#fff}.daftar-section{z-index:1;max-width:700px;margin:0 auto;padding:0 20px 80px;position:relative}.daftar-header{justify-content:space-between;align-items:center;margin-bottom:20px;animation:.7s .6s both fadeUp;display:flex}.daftar-header h2{color:var(--hijau-tua);font-family:Playfair Display,serif;font-size:20px}.counter-pill{gap:8px;display:flex}.pill{border-radius:999px;padding:5px 14px;font-size:12px;font-weight:500}.pill.ikut{background:var(--hijau-muda);color:var(--hijau-tua)}.pill.tidak{color:#993c1d;background:#faece7}.daftar-list{flex-direction:column;gap:10px;display:flex}.item-row{background:#fff;border:1px solid #e8e6df;border-radius:14px;align-items:center;gap:14px;padding:14px 20px;transition:transform .2s,box-shadow .2s;animation:.4s both fadeUp;display:flex}.item-row:hover{transform:translate(4px);box-shadow:0 4px 20px #1d9e7512}.avatar{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-family:Playfair Display,serif;font-size:15px;font-weight:700;display:flex}.avatar.ikut{background:var(--hijau-muda);color:var(--hijau-tua)}.avatar.tidak{color:#993c1d;background:#faece7}.item-info{flex:1}.item-nama{font-size:15px;font-weight:500}.item-nim{color:var(--abu);margin-top:2px;font-size:12px}.item-alasan{color:#d85a30;margin-top:4px;font-size:12px;font-style:italic}.status-badge{border-radius:999px;flex-shrink:0;padding:4px 12px;font-size:12px;font-weight:500}.status-badge.ikut{background:var(--hijau-muda);color:var(--hijau-tua)}.status-badge.tidak{color:#993c1d;background:#faece7}.empty-state{text-align:center;color:var(--abu);padding:48px 20px;font-size:15px}.empty-state .big{margin-bottom:12px;font-size:48px}@media (width<=520px){.form-card{padding:28px 20px}.hero{padding:48px 16px 32px}}