/* Carousel içindeki görsel boyutlandırması */
.tk-player-gallery-carousel .tk-player-gallery-item img {
    width: 100%;
    height: auto; /* Yüksekliği otomatik ayarla */
    display: block; /* Alt boşluğu kaldır */
}

/* Slick okları için modern stil */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 30px; /* Ok kapsayıcı genişliği */
    height: 30px; /* Ok kapsayıcı yüksekliği */
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent; /* Arka planı transparan yap */
    z-index: 10; /* Diğer elementlerin üzerinde olduğundan emin olun */
}

.slick-prev:before,
.slick-next:before {
    font-family: sans-serif; /* Daha basit bir font kullan */
    font-size: 24px; /* Ok boyutunu ayarla */
    line-height: 1;
    color: transparent; /* Karakteri gizle, ok şeklini CSS ile oluşturacağız */
    opacity: 1; /* Opaklığı tam yap */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Ok şeklini oluşturmak için border trick */
    content: ''; /* İçeriği boşalt */
    display: inline-block;
    width: 10px; /* Ok kalınlığı */
    height: 10px; /* Ok kalınlığı */
    border: solid #ffffff8c;
    border-width: 0 2px 2px 0; /* Sadece sağ ve alt kenarlıkları göster */
    padding: 0; /* İç dolguyu sıfırla */
    position: absolute; /* Kapsayıcı içinde konumlandırma için */
    top: 50%; /* Dikey ortalama */
    left: 50%; /* Yatay ortalama */
    transform: translate(-50%, -50%) rotate(45deg); /* Ortala ve sağa döndür */
}

.slick-prev {
    left: -40px; /* Sola boşluk */
}
[dir='rtl'] .slick-prev {
    right: -40px;
    left: auto;
}
.slick-prev:before {
    transform: translate(-50%, -50%) rotate(135deg); /* Sola bakan ok */
}
[dir='rtl'] .slick-prev:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.slick-next {
    right: -40px; /* Sağa boşluk */
}
[dir='rtl'] .slick-next {
    left: -40px;
    right: auto;
}
.slick-next:before {
    transform: translate(-50%, -50%) rotate(-45deg); /* Sağa bakan ok */
}
[dir='rtl'] .slick-next:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Okların hover durumu */
.slick-prev:hover:before,
.slick-next:hover:before {
    border-color: #fff; /* Hover'da ok rengini koyulaştır */
}

/* Dots (göstergeler) eğer kullanmak isterseniz */
.slick-dots {
    bottom: -30px; /* Alt boşluk */
}
.slick-dots li button:before {
    font-size: 10px;
    color: #ccc; /* Nokta rengi */
}
.slick-dots li.slick-active button:before {
    color: #333; /* Aktif nokta rengi */
}