:root {
    --mpyazilim_slide_background-color: #1b1d20;
    --mpyazilim_slide-width: 344px;
    --mpyazilim_slide-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.4);
    --mpyazilim_slide-thumb-height: 3px;
    --mpyazilim_slide-thumb-default-color: rgba(0, 0, 0, 0.4);
    --mpyazilim_slide-thumb-active-color: rgba(255, 255, 255, 0.9);
}

/*.mpyazilim_item_div .mpyazilim_slide_img{*/
/*    width: 100%;*/
/*    height: 100%; !* Div'in yüksekliğini belirleyin *!*/
/*    background-position: center; !* Resmi ortalayın *!*/
/*    background-size: cover; !* Resmi div'in boyutlarına göre ölçekleyin *!*/
/*    background-repeat: no-repeat; !* Resmin tekrar etmesini engelleyin *!*/
/*    transition: background-size 0.5s ease-in-out; !* Geçiş efekti *!*/
/*}*/

.mpyazilim_slide_img {
    touch-action: auto; /* Dokunmatik olayları yönetmek için */
    -ms-touch-action: auto; /* Internet Explorer için */
}

.mpyazilim_slide {
    display: grid;
    width: 100vw; /* Tam genişlik */
    height: 100vh; /* Tam yükseklik */
    position: absolute; /* Konumlandırmayı belirleyin */
    top: 0;
    left: 0;
    box-shadow: var(--mpyazilim_slide-shadow);
    background-color: black; /* Arka planı siyah yapın */
}

.mpyazilim_slide-items {
    border-radius: 5px;
    grid-area: 1/1;
    overflow: hidden;
    position: relative;
}

.mpyazilim_slide-items > * {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.mpyazilim_slide-items .mpyazilim_active {
    opacity: 1;
    height: 100%;
    pointer-events: initial;
    position: relative;
    background-color: black; /* Beyaz arka plan ekleyin */
    transition: opacity 0.5s ease-in-out; /* Geçiş efektini ekleyin */
}

.mpyazilim_slide-nav {
    display: grid;
    grid-area: 1/1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    z-index: 1;
}

.mpyazilim_slide-thumbs {
    display: flex;
    grid-column: 1 / 3;
}

.mpyazilim_slide-thumb-item {
    background-color: var(--mpyazilim_slide-thumb-default-color);
    border-radius: 3px;
    display: block;
    flex: 1;
    height: var(--mpyazilim_slide-thumb-height);
    margin: 5px;
    overflow: hidden;
}

.mpyazilim_slide-thumb-item.mpyazilim_active::after {
    animation: thumb var(--mpyazilim_slide_thumb-animation-duration) forwards linear; /* ANİMASYON HIZI BURASI */
    background-color: white; /* Beyaz arka plan rengi */
    border-radius: 3px;
    content: '';
    display: block;
    height: inherit;
    transform: translateX(-100%);
    transition: background-color 0.5s ease-in-out; /* Geçiş efekti */
    animation-play-state: var(--animation-state, running);
}

.mpyazilim_beyaz {
    background-color: aliceblue;
}

.mpyazilim_slide-next,
.mpyazilim_slide-prev {
    opacity: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@keyframes thumb {
    to {
        transform: initial;
    }
}

#mpyazilim_story {
    opacity: 0;
    transform: translateY(20px); /* Sayfanın biraz altından başlatmak için */
    transition: opacity 1s ease, transform 1s ease; /* 3 saniyelik geçiş */
}

/* Slide aktif hale geldiğinde görünür ve yukarıya taşınır */
#mpyazilim_story.mpyazilim_active {
    opacity: 1;
    transform: translateY(0); /* Orijinal pozisyona getir */
}

.mpyazilim_item_div {
    display: flex;
    justify-content: center;
}

.mpyazilim_item_div button {
    bottom: calc(100dvh - 640px);
    border-radius: 12px;
    padding: 15px;
    background: white;
    color: black;
    font-weight: bold;
    position: absolute;

}

@media (max-width: 767px) {
    .mpyazilim_item_div {
        align-items: flex-start;
    }
}