/* 1. Kategori Grid Düzenlemesi */
#banners_grid .short_info h3 {
    font-size: 1.8rem;
    line-height: 1.2;
    padding: 5px;
    margin: 0;
    text-align: center;
}

.img_container .short_info {
    top: 0 !important;
    bottom: auto !important;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* 2. Sticky Header Düzenlemesi */
header.sticky #top_menu a.back-btn {
    color: #222;
}

/* 3. Kategori Detay Sayfası Başlıkları (YUKARI ÇEKME) */
/* Flex-start ile kutunun en üstüne yaslıyoruz */
.hero_single.inner_pages .opacity-mask {
    justify-content: flex-start !important;
    padding-top: 50px !important;
    /* Metni biraz daha yukarı çekmek için burayı 30px yapabilirsin */
}

/* Metinlerin görünümü için ek boşluk */
.hero_single.inner_pages h1 {
    margin-bottom: 10px !important;
}

.custom-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===================================================================
 * Kategori ve Ana Sayfa Slider/Banner Yükseklik Ayarı (Mobil - PC Uyumlu)
 * =================================================================== */

/* Masaüstü (PC) için orijinal tok görünüm */
.hero_single.inner_pages,
.hero_kenbburns {
    height: 300px !important;
}

/* SADECE MOBİLDE (768px ve altı ekranlarda) daralsın */
@media (max-width: 768px) {

    .hero_single.inner_pages,
    .hero_kenbburns {
        height: 220px !important;
        /* Telefonda istediğin daraltılmış boyut */
    }
}
/* ===================================================================
 * Mobilde Footer Yazılarının Yüzen Butonların Altında Kalmasını Önleme
 * =================================================================== */
@media (max-width: 768px) {
    footer {
        padding-bottom: 80px !important; /* Yüzen butonlar kadar ekstra alt boşluk */
    }
}

/* ===================================================================
 * Footer Alanını Daraltma ve Hizalama
 * =================================================================== */
footer {
    padding: 20px 0 20px 0 !important; /* Orijinal temadaki 60 piksellik gereksiz boşluğu siler */
}

footer .copy {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5;
}

footer .follow_us ul {
    margin: 0 !important; /* İkonların altındaki gereksiz boşluğu kaldırır */
    display: flex;
    justify-content: flex-end; /* Bilgisayarda ikonları sağa yaslar */
    align-items: center;
}

@media (max-width: 768px) {
    footer {
        padding-bottom: 80px !important; /* Mobilde yüzen butonların yazıyı kapatmaması için alttan boşluk */
    }
    
    footer .follow_us ul {
        justify-content: center; /* Mobilde sosyal medya ikonlarını tam ortaya alır */
        margin-top: 15px !important;
    }
}
/* ===================================================================
 * ANA SAYFA KATEGORİ KUTULARINI YUVARLATMA (App Görünümü)
 * =================================================================== */
ul#banners_grid li {
    border: none !important;
    padding: 10px !important; /* Kartlar arası nefes alma boşluğu */
    box-sizing: border-box !important;
    background: transparent !important;
}

ul#banners_grid li a.img_container {
    border-radius: 20px !important; /* Köşeleri ne kadar yumuşatacağını buradan ayarlayabilirsin */
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Hafif bir gölge efekti */
}
.banner .wrapper h3 {
    margin-top: 5px !important;
    margin-bottom: 10px !important; /* Başlık ile altındaki eğik yazı arasına boşluk */
}

.banner .wrapper p {
    margin-bottom: 25px !important; /* Eğik yazı ile Randevu Al butonu arasına kesin boşluk */
}