/**
 * "Sizin İçin Ne Yapıyoruz?" bölümü — mobilde yatay kaydırmalı carousel
 * Hedef: #sizinicinneyapiyoruz (Elementor inner-section, 3 kolon)
 * Masaüstünde hiçbir şey değişmez; sadece <=767px'te carousel devreye girer.
 */

/* Noktalar masaüstünde gizli */
#sizinicinneyapiyoruz .tutku-carousel-dots { display: none; }

@media (max-width: 767px) {

    /* Konteyner -> yatay kaydırma + snap */
    #sizinicinneyapiyoruz > .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 16px;
        gap: 14px;
        padding: 4px 16px 10px;
        scrollbar-width: none;          /* Firefox */
        overscroll-behavior-x: contain;
    }
    #sizinicinneyapiyoruz > .elementor-container::-webkit-scrollbar {
        display: none;                  /* WebKit */
        width: 0;
        height: 0;
    }

    /* Her kolon = bir slide */
    #sizinicinneyapiyoruz > .elementor-container > .elementor-column {
        flex: 0 0 90% !important;
        width: 90% !important;
        max-width: 90% !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* Giriş animasyonu (elementor-invisible) kaydırıcı içinde slide'ları
       gizli bırakabiliyor -> mobilde hepsini görünür yap */
    #sizinicinneyapiyoruz .elementor-column.elementor-invisible {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Sayfalama noktaları */
    #sizinicinneyapiyoruz .tutku-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }
    #sizinicinneyapiyoruz .tutku-carousel-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cbd5e1;
        cursor: pointer;
        transition: width .2s ease, background .2s ease, border-radius .2s ease;
        -webkit-appearance: none;
        appearance: none;
    }
    #sizinicinneyapiyoruz .tutku-carousel-dots button.is-active {
        width: 24px;
        border-radius: 5px;
        background: #362c66;            /* marka rengi */
    }
}