/* 
	Theme Name: kobimedya.com
	Theme URL: https://kobimedya.com
	Description: kobimedya.com
	Author: kobimedya.com
	Author URI: https://kobimedya.com
	Version: 1.0
*/

/* Ana Kaydırılabilir Kapsayıcı */
.image-slider-wrapper {
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-overflow-scrolling: touch;

    /* Scrollbar'ı gizle (isteğe bağlı ama çoğu zaman tercih edilir) */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* --- CSS Scroll Snap Özellikleri --- */
    scroll-snap-type: x mandatory; /* Yatay yönde zorunlu yapışma */
    /* İlk açılışta ve kaydırma bitince resimleri ortalamak için kritik! */
    /* Kaydırılabilir alana soldan ve sağdan ekranın yarısı kadar sanal boşluk ekler. */
    /* Bu, ilk resmin sağ yarısını ve ikinci resmin sol yarısını göstermek için kullanılır. */
    scroll-padding-left: 50vw; /* Sol taraftan viewport genişliğinin %50'si kadar boşluk */
    scroll-padding-right: 50vw; /* Sağ taraftan viewport genişliğinin %50'si kadar boşluk */
}

/* Chrome, Safari ve Opera için scrollbar'ı gizle */
.image-slider-wrapper::-webkit-scrollbar {
    display: none;
}

/* Her Bir Resim Öğesi */
.slider-item {
    display: inline-block;
    width: 100vw; /* Her bir resmin ekran genişliğinin tamamını kaplamasını sağlar */
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-user-drag: none;
    user-drag: none;

    /* --- CSS Scroll Snap Özellikleri --- */
    scroll-snap-align: center; /* Öğeyi kaydırılabilir alanın merkezine hizala */
    text-decoration: none;
    color: inherit;
}

/* Hover/Active Efekti (İsteğe Bağlı) */
.slider-item:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Eğer JavaScript ile 'is-active' gibi bir sınıf ekleyecekseniz */
.slider-item.is-active {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}