.mobile-vertical-slider {
    display: flex;
    flex-direction: row;
    max-width: 800px; /* Genişlik 800 piksel */
    height: 500px; /* Yükseklik 500 piksel */
    overflow: hidden; /* Taşmayı gizle */
    margin: 0 auto; /* Ortalamak için */
    position: relative; /* İçerik konumlandırması için */
}

.slider-left {
    width: 50%; /* Masaüstü görünümde yarı genişlik */
    height: 100%; /* Yükseklik %100 yap */
    position: relative;
    overflow: hidden; /* Taşmayı gizle */
    background-image: url('https://www.smmmulviyekirmac.com/wp-content/uploads/2025/03/resmi-gazete-bg.png');
    background-repeat: repeat-y;
    background-size: contain; /* Resim kutuya sığacak şekilde ayarla */
    background-position: center top; /* Resmi yukarıdan başlat */
    transition: background-position 0.5s;
}

.title-box {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 5px;
    cursor: pointer; /* Tıklanabilir olduğunu belirt */
}

.slider-navigation {
    position: absolute; /* Okların konumlandırılması için */
    top: 50%; /* Dikey ortalama */
    width: 100%; /* Tam genişlik */
    display: flex; /* Okları yan yana yerleştir */
    justify-content: space-between; /* Sol ve sağ okları kenarlara yerleştir */
    transform: translateY(-50%); /* Dikey ortalama için */
    z-index: 10; /* Okların üstte görünmesi için */
}

.slider-navigation button {
    background: rgba(0, 0, 0, 0.2); /* Şeffaf arka plan */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%; /* Yuvarlak oklar */
    width: 30px; /* Genişlik ve yükseklik */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-navigation button:hover {
    background: rgba(0, 0, 0, 0.5);
}

.slider-navigation button i {
    font-size: 16px; /* Ok ikonu boyutu */
}

.slider-right {
    width: 50%; /* Masaüstü görünümde yarı genişlik */
    height: 100%; /* Yükseklik %100 yap */
    position: relative;
    overflow: hidden; /* Taşmayı gizle */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#article-titles {
    list-style: none;
    padding: 0;
    margin: 0;
    height: calc(100% - 60px); /* Yüksekliği ok düğmeleri için ayarla */
    overflow: hidden; /* Kaydırma çubuğunu gizle */
    flex-grow: 1;
}

#article-titles li {
    cursor: pointer;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.3s;
    display: flex; /* İkon ve başlık yan yana gelsin */
    align-items: center; /* Dikey olarak ortala */
}

#article-titles li i {
    margin-right: 10px; /* İkon ile başlık arasında boşluk bırak */
    color: #007bff; /* İkon rengi */
}

#article-titles li:hover {
    background-color: rgba(211, 211, 211, 0.5); /* Açık gri arka plan */
}

.scroll-button {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.2); /* Şeffaf arka plan */
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scroll-up-button {
    top: 10px;
}

#scroll-down-button {
    bottom: 10px;
}

.scroll-button:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* İlk ve son maddenin üzerindeki oklar şeffaf görünsün */
#article-titles li:first-child:hover ~ #scroll-up-button,
#article-titles li:last-child:hover ~ #scroll-down-button {
    background: rgba(0, 0, 0, 0.5); /* Daha şeffaf arka plan */
}

/* Mobil görünüm ayarları */
@media (max-width: 800px) {
    .slider-left {
        width: 100%; /* Mobil görünümde tam genişlik */
    }

    .slider-right {
        display: none; /* Mobil görünümde gizle */
    }
}