.main-image {
    position: relative;
    display: inline-block;
}

    .main-image img {
        max-width: 400px;
        max-height: 400px;
        cursor: zoom-in;
        transition: transform 0.3s ease;
    }

        .main-image img:hover {
            transform: scale(1.2); /* hover zoom efekti */
        }

/* Ok butonları fotoğrafın üstüne */
.scroll-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.3);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    z-index: 5;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

    .scroll-btn:hover {
        opacity: 1;
    }

    .scroll-btn.up {
        top: 5px;
    }

    .scroll-btn.down {
        bottom: 5px;
    }


:root {
    --thumb-gap: 12px;
    --border: #e6e6e6;
    --radius: 8px;
}