/* Widget captcha puzzle geser — mandiri, aman dipakai di tema V1 (Bootstrap) maupun V2 */
.scap {
    --scap-navy: #0a1a3f; --scap-gold: #d4a537; --scap-line: #dfe4ee; --scap-ok: #12805c; --scap-fail: #c0392b;
    position: relative; user-select: none; -webkit-user-select: none; font-family: inherit; text-align: left;
}
.scap-panel {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 20;
    padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--scap-line);
    box-shadow: 0 24px 50px -18px rgba(4, 11, 32, .45);
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: bottom center;
    transition: opacity .25s, transform .25s, visibility 0s linear .25s;
}
.scap.is-open .scap-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.scap-stage { position: relative; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #10265a, #040b20); }
.scap-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scap-piece { position: absolute; left: 0; display: block; max-width: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); pointer-events: none; }
.scap-bg:not([src]), .scap-piece:not([src]) { visibility: hidden; }
.scap-refresh {
    position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: rgba(4, 11, 32, .6); color: #fff; font-size: 17px; line-height: 30px; text-align: center; cursor: pointer; padding: 0;
}
.scap-refresh:hover { background: var(--scap-navy); }
.scap-msg { position: absolute; inset: auto 0 0; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(192, 57, 43, .9); transform: translateY(100%); transition: transform .2s; }
.scap-msg:not(:empty) { transform: none; }

.scap-track {
    position: relative; height: 48px; border-radius: 14px; background: #f3f6fb; border: 1.5px solid var(--scap-line);
    display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color .2s, background-color .2s;
}
.scap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(212, 165, 55, .12), rgba(212, 165, 55, .3)); }
.scap-label { position: relative; padding-left: 48px; padding-right: 8px; font-size: 13px; font-weight: 600; color: #6b7794; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scap-handle {
    position: absolute; left: 0; top: 0; bottom: 0; width: 48px; padding: 0; border: 0; border-radius: 12px; cursor: grab; touch-action: none;
    display: grid; place-items: center; color: var(--scap-gold); background: linear-gradient(135deg, #1a3570, var(--scap-navy));
    box-shadow: 0 6px 14px -6px rgba(10, 26, 63, .7);
}
.scap-handle:focus-visible { outline: 3px solid var(--scap-gold); outline-offset: 2px; }
.scap.is-drag .scap-handle { cursor: grabbing; }
.scap:not(.is-drag) .scap-handle, .scap:not(.is-drag) .scap-fill, .scap:not(.is-drag) .scap-piece { transition: transform .3s, width .3s, left .3s; }
.scap.is-busy .scap-label { color: #24478f; }
.scap.is-ok .scap-track { border-color: var(--scap-ok); background: #ebf8f3; }
.scap.is-ok .scap-fill { background: rgba(18, 128, 92, .14); }
.scap.is-ok .scap-handle { background: var(--scap-ok); color: #fff; cursor: default; }
.scap.is-ok .scap-label { color: var(--scap-ok); }
.scap.is-fail .scap-track { border-color: var(--scap-fail); }
.scap.is-fail .scap-label { color: var(--scap-fail); }
.scap-hint { display: block; padding: 8px 4px 2px; font-size: 12px; font-weight: 600; color: #6b7794; text-align: center; }

/* Mode auto-submit: slider menjadi tombol login utama */
.scap-auto .scap-track { height: 54px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #1a3570, var(--scap-navy)); box-shadow: 0 10px 24px -12px rgba(10, 26, 63, .8); }
.scap-auto .scap-fill { background: linear-gradient(90deg, rgba(212, 165, 55, .25), rgba(212, 165, 55, .55)); border-radius: 999px; }
.scap-auto .scap-label { color: #fff; font-size: 15px; font-weight: 700; padding-left: 56px; letter-spacing: .01em; }
.scap-auto .scap-handle { top: 4px; bottom: 4px; left: 4px; width: 46px; border-radius: 999px; color: var(--scap-navy); background: linear-gradient(135deg, #f3dc95, var(--scap-gold) 55%, #b8891f); box-shadow: 0 6px 14px -6px rgba(212, 165, 55, .9); }
.scap-auto:not(.is-ok):not(.is-drag) .scap-handle { animation: scap-nudge 2.4s ease-in-out infinite; }
.scap-auto.is-busy .scap-label, .scap-auto.is-fail .scap-label { color: #fff; }
.scap-auto.is-fail .scap-track { box-shadow: 0 0 0 2px var(--scap-fail); }
.scap-auto.is-fail .scap-label { font-size: 13px; }
.scap-auto.is-ok .scap-track { background: var(--scap-ok); }
.scap-auto.is-ok .scap-label { color: #fff; }
.scap-auto.is-ok .scap-handle { background: #fff; color: var(--scap-ok); }
@keyframes scap-nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 8px 0; } 90% { translate: 0 0; } }

.scap.shake { animation: scap-shake .4s; }
@keyframes scap-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .scap * { transition: none !important; animation: none !important; } .scap.shake { animation: none; } }