/* Genel, tekrar kullanılabilir mobil slider mekaniği. Herhangi bir kart grid'ine
   ".slider" class'ı eklenip js/script.js'teki initSlider() çağrılarak kullanılabilir.
   ".slider-full-bleed" modifier'ı, .container'ın yatay boşluğunu iptal ederek slider
   track'ini ekran kenarlarına tam yaslar; kartlar tam ekran genişliğinde değildir,
   ortalandıklarında sağda ve solda bir sonraki/önceki kartın ucu peek olarak görünür. */

@media (max-width: 768px) {
    .slider {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        cursor: grab;
        user-select: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .slider::-webkit-scrollbar {
        display: none;
    }

    .slider.slider-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

    .slider > * {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }

    .slider-full-bleed {
        margin-left: -20px;
        margin-right: -20px;
        /* İlk ve son kart da ortalanabilsin diye (100% - kart genişliği) / 2 kadar
           boşluk bırakıyoruz; aksi halde ilk kart scroll'un başına yapışık kalır. */
        padding-left: 20px;
        padding-right: 20px;
        gap: 12px;
    }

    .slider-full-bleed > * {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }
}