/* Carousel özelle?tirm?l?ri */
:root {
    --carousel-control-color: #fff;
    --carousel-control-width: 15%;
    --carousel-control-opacity: .5;
    --carousel-control-hover-opacity: .9;
    --carousel-control-transition: opacity .15s ease;
    --carousel-indicator-width: 30px;
    --carousel-indicator-height: 3px;
    --carousel-indicator-hit-area-height: 10px;
    --carousel-indicator-spacer: 3px;
    --carousel-indicator-opacity: .5;
    --carousel-indicator-active-bg: #fff;
    --carousel-indicator-active-opacity: 1;
    --carousel-indicator-transition: opacity .6s ease;
    --carousel-caption-width: 70%;
    --carousel-caption-color: #fff;
    --carousel-caption-padding-y: 1.25rem;
    --carousel-caption-spacer: 1.25rem;
    --carousel-control-icon-width: 2rem;
    --carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    --carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    --carousel-transition-duration: .6s;
    --carousel-transition: transform var(--carousel-transition-duration) ease-in-out;
    --carousel-dark-indicator-active-bg: #000;
    --carousel-dark-caption-color: #000;
    --carousel-dark-control-icon-filter: invert(1) grayscale(100);
}

#carouselExampleDark {
    width: 100%;
    height: 500px;
}

    #carouselExampleDark .carousel-item {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #carouselExampleDark .carousel-inner {
        width: 100%;
        height: 100%;
    }

.carousel-caption {
    position: absolute;
    bottom: var(--carousel-caption-padding-y);
    left: 20px;
    right: 20px;
    color: var(--carousel-caption-color);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--carousel-control-color);
}

.carousel-indicators button {
    background-color: var(--carousel-indicator-active-bg);
}