/* --- BEFORE / AFTER SLIDER CSS --- */

/* Sonraki Görselin Kesilme Ayarı (Sağ Tarafı Gösterir) */
.ba-slider-container .after-image {
    /* polygon(x1 y1, x2 y2, x3 y3, x4 y4)
       var(--position) değeri JS tarafından güncellenir (Örn: %50)
       Sol tarafı gizler, sağ tarafı gösterir.
    */
    clip-path: polygon(var(--position) 0, 100% 0, 100% 100%, var(--position) 100%);
    -webkit-clip-path: polygon(var(--position) 0, 100% 0, 100% 100%, var(--position) 100%);
}

/* Sürgü Çizgisinin Konumlanması */
.ba-slider-container .ba-slider-handle {
    left: var(--position);
    transform: translateX(-50%);
}

/* Chrome/Safari/Firefox'ta gizli input'un gerçekten gizli olması 
   ama tıklamalara cevap vermesi için appearance sıfırlaması
*/
.ba-slider-input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.ba-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    /* Dokunmatik alan genişliği */
    height: 100%;
    background: transparent;
    cursor: ew-resize;
}

.ba-slider-input::-moz-range-thumb {
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    cursor: ew-resize;
}