.bk-ba-wrap { margin:18px 0; }
.bk-ba { position:relative; width:100%; max-width:680px; margin:0 auto; overflow:hidden; border-radius:10px; user-select:none; cursor:ew-resize; touch-action:none; }
.bk-ba img { display:block; width:100%; height:auto; pointer-events:none; }
.bk-ba-after { position:absolute; top:0; left:0; width:100%; height:100%; clip-path:inset(0 0 0 50%); -webkit-clip-path:inset(0 0 0 50%); }
.bk-ba-after img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.bk-ba-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.45); }
.bk-ba-handle-grip { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.45); }
.bk-ba-handle-grip::before, .bk-ba-handle-grip::after { content:""; position:absolute; top:50%; width:0; height:0; border:5px solid transparent; }
.bk-ba-handle-grip::before { left:6px; border-right-color:#e8568f; transform:translateY(-50%); }
.bk-ba-handle-grip::after { right:6px; border-left-color:#e8568f; transform:translateY(-50%); }
.bk-ba-label { position:absolute; bottom:12px; padding:3px 12px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); border-radius:20px; }
.bk-ba-label-before { left:12px; }
.bk-ba-label-after { right:12px; }
.bk-ba-empty { padding:34px 20px; text-align:center; color:#999; background:#f6f7f9; border:1px dashed #cfd4da; border-radius:10px; }