/* =========================================
   Sticky Action Bar (Akıllı Sabit Menü)
   ========================================= */

.sticky-action-bar {
    position: fixed;
    z-index: 9999;
}

.sticky-btn {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-family: var(--body-font);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Yaylanma efekti */
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Renk Tanımlamaları */
.call-btn { background-color: #007bff; } /* Mavi */
.whatsapp-btn { background-color: #25D366; } /* Yeşil */
.offer-btn { background-color: var(--theme-color); } /* Kırmızı (Sizin temanız) */

/* -----------------------------------------
   MOBİL GÖRÜNÜM (Altta Sabit Şerit)
   ----------------------------------------- */
@media (max-width: 991px) {
    .sticky-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 70px;
        height: auto;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 8px 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        /* Chrome mobil için viewport ve rendering fix */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Viewport değişimlerinde stabil kalması için */
        z-index: 9999;
    }

    .sticky-btn {
        flex-direction: column; /* İkon üstte, yazı altta */
        justify-content: center;
        background: transparent !important; /* Arka planı kaldır */
        color: var(--body-color); /* Yazıyı koyu yap */
        flex: 1;
        height: 100%;
        font-size: 11px;
        border-radius: 0;
    }

    .icon-box {
        font-size: 20px;
        margin-bottom: 2px;
        display: block;
    }
    
    /* Mobilde ikon renkleri */
    .call-btn .icon-box { color: #007bff; }
    .whatsapp-btn .icon-box { color: #25D366; }
    .offer-btn .icon-box { color: var(--theme-color); }
    
    .btn-text {
        opacity: 1; /* Mobilde yazı hep açık */
    }
}

/* -----------------------------------------
   MASAÜSTÜ GÖRÜNÜM (Sağda Hover Efektli)
   ----------------------------------------- */
@media (min-width: 992px) {
    .sticky-action-bar {
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Sağa yasla ki sola doğru büyüsün */
        gap: 15px;
    }

    .sticky-btn {
        width: 50px; /* Başlangıç genişliği (sadece yuvarlak) */
        height: 50px;
        border-radius: 50px; /* Tam yuvarlak */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        justify-content: flex-start; /* İçerik soldan başlasın */
        position: relative;
    }

    .icon-box {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0; /* İkonun sıkışmasını engelle */
    }

    .btn-text {
        opacity: 0; /* Başlangıçta yazı gizli */
        white-space: nowrap; /* Alt satıra geçmesin */
        padding-right: 20px;
        transform: translateX(10px); /* Yazı biraz sağda dursun */
        transition: all 0.3s ease;
        font-size: 15px;
    }

    /* --- HOVER EFEKTLERİ --- */
    
    /* Mouse üzerine gelince genişle */
    .sticky-btn:hover {
        width: 200px; /* Açılma genişliği */
    }

    /* Mouse üzerine gelince yazıyı göster */
    .sticky-btn:hover .btn-text {
        opacity: 1;
        transform: translateX(0);
    }
}
.hero-thumb img {
    border-radius: 0 20px 20px 0; /* Sırasıyla: Sol-Üst:0, Sağ-Üst:50px, Sağ-Alt:50px, Sol-Alt:0 */
    width: 100%;      /* Kapsayıcıyı doldurur */
    height: 100%;     /* Yüksekliği doldurur */
    object-fit: cover; /* Resmin orantısını bozmadan (sündürmeden) kırparak oturtur */
    display: block;   /* Resim altındaki boşluğu siler */
}

/* Mobilde (ekran daraldığında) ovalliği düzeltmek isterseniz */
@media (max-width: 768px) {
    .hero-thumb img {
        border-radius: 20px; /* Mobilde her köşeyi eşit yuvarlar */
        margin-bottom: 20px;
    }
}