/* Yazıyı içeren kapsayıcı */
.slider-banner-text {
    background-color: #f27a1a; /* Arka plan rengi: Turuncu */
    color: white; /* Yazı rengi beyaz */
    padding: 8px 15px; /* İçerik ve kenarlar arasındaki mesafe */
    font-size: 12px; /* Yazı boyutunu 15px'e küçültüyoruz */
    font-weight: bold; /* Kalın yazı */
    border-radius: 5px; /* Yumuşak kenar çerçevesi */
    text-align: center; /* Metni ortalamak */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
    width: fit-content; /* Yalnızca içeriği kapsayacak şekilde genişlik */
    margin: 20px auto; /* Etrafında boşluk bırakmak ve ortalamak */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Yazının tek satırda görünmesini sağlar */
    overflow: hidden; /* Taşan yazıyı gizler */
}

/* Yıldız ikonu için */
.slider-banner-text .fa-bolt {
    margin-left: 10px; /* Yıldız ile yazı arasına mesafe ekler */
    font-size: 20px; /* Yıldız ikonunun boyutunu ayarlıyoruz */
    color: #FFD700; /* Yıldız rengini altın sarısı yapıyoruz */
}

/* H1 stilini belirleyelim */
.slider-banner-text h1 {
    margin: 0; /* H1 etiketinin varsayılan üst ve alt marginlerini kaldırıyoruz */
    font-size: 13px; /* H1 font boyutunu 15px yapıyoruz */
}

/* Mobil cihazlar için uyumlu stil */
@media (max-width: 768px) {
    .slider-banner-text {
        padding: 8px 15px; /* Mobilde padding değerini küçültüyoruz */
        font-size: 13px;
        white-space: normal; /* Yazının taşmasını engeller */
        width: 100%; /* Butonun genişliğini %100 yapar */
    }

    .slider-banner-text .fa-bolt {
        font-size: 18px; /* Yıldız ikonunun boyutunu mobilde küçültüyoruz */
    }
}