/* Genel Stiller */

.form-label {
    font-weight: bold; /* Etiketin kalın olmasını sağlar */
}

#odaCombo {
    background-color: lightskyblue;
    font-weight: bold;
    font-size: 20px; /* Yazı boyutunu ayarlar */
    padding: 5px; /* İç boşluk ekler */
    /*width: 768px;*/
    padding-right: 40px; /*İkon için sağ boşluk */
    text-align: center;
    text-align-last: center;
    -webkit-appearance: menulist; /* Safari ve Chrome için */
    -moz-appearance: menulist; /* Firefox için */
}

#sliderContainer {
    background-color: gainsboro;
    margin-top: 10px; /* Slider ile form arasında boşluk bırakır */
}

.text-center {
    text-align: center; /* Başlığı ortalar */
}

/* OdaSlider için Stiller */
#odaSlider {
    max-width: 768px;
    height: auto; /* Slider yüksekliği */
    margin: auto; /* Slider'ı ortalar */
    position: relative; /* Kontrollerin doğru yerleşimi için */
}

.carousel-inner {
    height: 100%; /* Slider yüksekliğine uyumlu */
}

.carousel-item {
    height: 100%; /* Slider yüksekliğine uyumlu */
    font-weight: bold;
    text-align: center;
    color: red;
}

    .carousel-item img {
        width: 100%;
        height: 100%; /* Yüksekliği otomatik ayarla */
        object-fit: cover; /* Resimleri kapsayıcıya göre kes */
    }

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    bottom: 10px; /* Alt kısımdan biraz boşluk bırak */
    left: 10px; /* Soldan biraz boşluk bırak */
    right: auto; /* Sağdan boşluk bırakma */
    text-align: center; /* Yazıyı sola hizala */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* Responsive ayarlar */
@media (max-width: 768px) {
    /* Oda Resimleri ComboBox için Responsive Ayarlar */
    .form-group {
        margin-left: 10px;
        margin-right: 10px;
    }

    #odaCombo {
        font-size: 14px;  /*Küçük ekranlar için yazı boyutunu ayarlar */
        padding-right: 30px; /* Daha küçük ekranlar için ikonun sağındaki boşluk */
    }

    .position-absolute {
        right: 50%; /* Küçük ekranlar için sağ boşluk */
        top: 50%; /* Üstten ortalar */
        transform: translateY(-50%); /* Dikey olarak tam ortalar */
    }

    /* OdaSlider için Responsive Ayarlar */
    #odaSlider {
        height: auto; /* Küçük ekranlar için daha küçük yükseklik */
    }
}