.bcCarousel {
    position: relative;
    width: 100%;
    height: 426px;
    padding: 10px;
    gap: 4vw;

    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    columns: 1;
    text-align: center;

    scroll-marker-group: after; /* scroll grup butonlarını göster*/
}
.bcCarousel .bcScrollTarget{
    list-style-type: none;

    display: inline-flex;
    height: 400px;
    width: auto;


    /*background-color: #eeeeee;*/
    /*border: 1px solid #dddddd;*/
    /*padding: 10px;*/
    margin: 0 10px;

    text-align: left;
    scroll-snap-align: center;
    justify-content: center;
    align-items: center;       /* dikey ortalama (opsiyonel) */

}
.bcCarousel .bcScrollTarget img {
  height: 100%;    /* li'nin yüksekliğini tamamen kapla */
  width: auto;     /* oranı koruyarak genişliği ayarla */
  object-fit: contain; /* orantılı göster, taşma yok */
  display: block;  /* alt boşluğu kaldırır */
  max-width: 100%; /* li içinde kalmayı garanti eder */


}

.bcCarousel::column {
    scroll-snap-align: center;
}
.bcCarousel::scroll-marker-group{
    position: absolute;
    top: anchor(bottom);
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center; /* marker'ları dikeyde ortalar */
    gap: 10px;
}
.bcCarousel::column::scroll-marker {
    content: "";
    width: 6px;
    height: 6px;
    background-color: darkgrey;/*background-color: transparent;*/
    border: none;/*border: 2px solid black;*/
    transition: background-color 0.3s ease, scale 0.2s;
    border-radius: 10px;
}

.bcCarousel::column::scroll-marker:target-current {
    width: 6px;
    height: 6px;
    background-color: #ffed00; /*black;*/
    border: 1px solid #d2ad5c; /* siyah kenar */
    box-shadow: 0 0 6px 2px rgba(201, 169, 90, 0.5);

}