/* Kotak centang, tombol pilihan, dan kotak pilih (select) bergaya sendiri. CSS murni; pencarian untuk daftar panjang ditambah ps-pilih.js */
:root{--pl-ease:cubic-bezier(.34,1.56,.64,1)}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:21px;height:21px;margin:0;padding:0;border:2px solid var(--faint,#94a3b8);background:var(--card,#fff) center/0 0 no-repeat;cursor:pointer;vertical-align:-5px;position:relative;transition:background-color .18s,border-color .18s,box-shadow .25s,background-size .22s var(--pl-ease),transform .15s}
input[type=checkbox]{border-radius:7px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--accent,#2563eb)}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.88)}
input[type=checkbox]:checked{background-color:var(--accent,#2563eb);border-color:var(--accent,#2563eb);background-size:15px 15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");animation:pl-pop .32s var(--pl-ease)}
input[type=checkbox]:indeterminate{background-color:var(--accent,#2563eb);border-color:var(--accent,#2563eb);background-size:11px 11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
input[type=radio]:checked{border-color:var(--accent,#2563eb);background-image:radial-gradient(circle,var(--accent,#2563eb) 0 45%,transparent 50%);background-size:100% 100%;animation:pl-pop .32s var(--pl-ease)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#2563eb) 28%,transparent)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
@keyframes pl-pop{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#2563eb) 45%,transparent);transform:scale(.8)}60%{transform:scale(1.1)}100%{box-shadow:0 0 0 9px transparent;transform:scale(1)}}
label.check,.check{align-items:center}
.check:has(input:checked){border-color:var(--accent,#2563eb);background:var(--info-bg,#eff6ff)}
.check input{margin-top:0}
/* kotak pilih bawaan (daftar pendek) */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--faint,#94a3b8) 50%),linear-gradient(135deg,var(--faint,#94a3b8) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;transition:border-color .18s,box-shadow .18s,background-position .2s}
select:not([multiple]):not([size]):hover{border-color:var(--accent,#2563eb)}
select:not([multiple]):not([size]):focus{background-image:linear-gradient(45deg,transparent 50%,var(--accent,#2563eb) 50%),linear-gradient(135deg,var(--accent,#2563eb) 50%,transparent 50%)}
select:disabled{opacity:.55;cursor:not-allowed}
select option{background:var(--card,#fff);color:var(--text,#0f172a)}
/* kotak pilih dengan pencarian (daftar panjang) */
.cs-wrap.pl{display:block;position:relative}
.cs-wrap.pl>select{display:none!important}
.cs-wrap.pl .cs-btn{min-height:42px;transition:border-color .18s,box-shadow .18s}
.cs-wrap.pl.open .cs-btn{box-shadow:var(--ring,0 0 0 3px rgba(37,99,235,.2))}
.cs-wrap.pl .cs-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-wrap.pl .cs-btn::after{transition:transform .2s}
.cs-wrap.pl.open .cs-btn::after{transform:translateY(-30%) rotate(225deg)}
.cs-wrap.pl .cs-dd{display:block;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top;transition:opacity .16s,transform .18s var(--pl-ease),visibility 0s .18s}
.cs-wrap.pl.open .cs-dd{visibility:visible;opacity:1;transform:none;transition:opacity .16s,transform .18s var(--pl-ease),visibility 0s}
.cs-wrap.pl .cs-dd .cs-q{position:relative}.cs-wrap.pl .cs-dd .cs-q i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;pointer-events:none}
.cs-wrap.pl .cs-dd input{padding-left:34px;width:100%}
.cs-wrap.pl .cs-list div.g{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);background:var(--tert);cursor:default}
.cs-wrap.pl .cs-list div.on{font-weight:700;color:var(--accent,#2563eb)}
.cs-wrap.pl .cs-list div.on::after{content:'';width:6px;height:11px;border:solid var(--accent,#2563eb);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);flex:none;margin-right:4px}
.cs-wrap.pl .cs-list div.kosong{cursor:default;color:var(--faint);justify-content:center}
.cs-wrap.pl .cs-list div.dis{opacity:.45;cursor:not-allowed}
@media(max-width:819px){.cs-wrap.pl .cs-dd{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:80vh;border-radius:20px 20px 0 0;z-index:90;display:flex;flex-direction:column;transform:translateY(100%);opacity:1}.cs-wrap.pl.open .cs-dd{transform:none}.cs-wrap.pl .cs-list{max-height:none;flex:1}.cs-wrap.pl.open::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2147483000}.cs-wrap.pl.open:not(.cs-pt)::before{content:none}.cs-wrap.pl .cs-dd{z-index:2147483001}.cs-wrap.pl.cs-pt .cs-q input{font-size:16px}}
@media(prefers-reduced-motion:reduce){input[type=checkbox],input[type=radio],.cs-wrap.pl .cs-dd{transition:none!important;animation:none!important}input[type=checkbox]:checked,input[type=radio]:checked{animation:none!important}}
/* pilih berkas */
input[type=file]{cursor:pointer;font-size:13px;color:var(--muted,#64748b)}
input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:13px;margin-right:12px;padding:8px 14px;border:0;border-radius:10px;background:var(--accent,#2563eb);color:#fff;cursor:pointer;transition:filter .15s,transform .15s}
input[type=file]::file-selector-button:hover{filter:brightness(1.1)}
input[type=file]::file-selector-button:active{transform:scale(.95)}
/* geser (range) */
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;padding:0;border:0;border-radius:99px;background:var(--tert,#e2e8f0);accent-color:var(--accent,#2563eb)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent,#2563eb);border:3px solid var(--card,#fff);box-shadow:0 1px 5px rgba(0,0,0,.3);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent,#2563eb);border:3px solid var(--card,#fff)}
/* tanggal, jam, warna */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;min-height:44px;cursor:pointer;color-scheme:light dark}
:root[data-theme=light] input[type=date],:root[data-theme=light] input[type=time],:root[data-theme=light] input[type=datetime-local]{color-scheme:light}
:root[data-theme=dark] input[type=date],:root[data-theme=dark] input[type=time],:root[data-theme=dark] input[type=datetime-local]{color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{cursor:pointer;padding:5px;border-radius:8px;opacity:.75;transition:background .15s,opacity .15s}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{background:var(--info-bg,#eff6ff);opacity:1}
input[type=color]{-webkit-appearance:none;appearance:none;width:52px;height:40px;padding:3px;border-radius:12px;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:9px}input[type=color]::-moz-color-swatch{border:0;border-radius:9px}