/* FuelGuard Fluid Cards Widget

   Prefix: fluid-

   ======================================== */



/* Ana Kapsayıcı */

.fluid-alanlar {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

    padding: 30px 0;

}



/* Kart Stili - Derinlik ve Sıvı Efekt Hazırlığı */

.fluid-kart {

    background-color: #ffffff;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Başlangıç gölgesi */

    transition: box-shadow 0.4s ease;

    position: relative;

    overflow: hidden; /* Sıvı efektin kart dışına taşmasını engelle */

    cursor: pointer;

    text-decoration: none;

    display: block;

}



/* Kart Hover Efekti - Göz Alıcı Gölge */

.fluid-kart:hover {

    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15); /* Hover'da daha belirgin gölge */

}



/* SIVI VURGU EFEKTİ (::before) */

.fluid-kart::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 3px; /* Başlangıçta ince çizgi */

    background-color: #bb0a07; /* Ana vurgu rengi */

    transition: height 0.4s ease-out, background-color 0.4s ease; /* Akıcı geçiş */

    z-index: 1;

}



/* Hover'da Sıvı Yükselme Efekti */

.fluid-kart:hover::before {

    height: 100%; /* Yavaşça kartın tamamına yayılır */

    background-color: rgba(187, 10, 7, 0.05); /* Yükselince şeffaflaşır */

}



/* Görsel ve İçerik Kısımları */

.kart-gorsel-kapsayici {

    width: 100%;

    height: 160px;

    overflow: hidden;

    position: relative;

    z-index: 2; /* Sıvı efektin üstünde */

}



.kart-gorsel {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



/* Hover'da Görsel Hafifçe Büyüsün */

.fluid-kart:hover .kart-gorsel {

    transform: scale(1.05);

}



/* İçerik Kapsayıcısı */

.kart-icerik {

    padding: 20px 25px;

    position: relative;

    z-index: 3; /* İçeriği en üstte tut */

}



/* Başlık ve Metin Stilleri */

.kart-icerik h4 {

    color: #212529;

    font-size: 1.25em;

    font-weight: 700;

    margin-bottom: 8px;

    margin-top: 0;

    position: relative;

}



.kart-icerik p {

    color: #495057;

    font-size: 0.95em;

    line-height: 1.5;

    margin: 0;

}



/* DERİNLİK VURGUSU (::after) - Fırlayan Ok */

.kart-icerik h4::after {

    content: '→'; /* Ok işareti */

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%) translateX(20px); /* Başlangıçta sağdan dışarı itilmiş */

    opacity: 0;

    color: #bb0a07;

    font-size: 1.5em;

    font-weight: 300;

    transition: transform 0.4s ease-out, opacity 0.4s ease;

}



/* Hover'da Okun İçeri Fırlaması */

.fluid-kart:hover .kart-icerik h4::after {

    transform: translateY(-50%) translateX(0px); /* Kartın içine fırlasın */

    opacity: 1;

}



/* Link kartları için özel stil */

a.fluid-kart:hover {

    text-decoration: none;

}



/* Mobil Uyumlu Düzenleme */

@media (max-width: 768px) {
    .fluid-alanlar {
        grid-template-columns: unset !important;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 12px 16px;
        scrollbar-width: none;
    }

    .fluid-alanlar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .fluid-kart {
        scroll-snap-align: start;
    }

    .kart-gorsel-kapsayici {
        height: 140px;
    }
    
    .kart-icerik {
        padding: 15px 20px;
    }
    
    .kart-icerik h4 {
        font-size: 1.15em;
    }
    
    .kart-icerik p {
        font-size: 0.9em;
    }
}


@media (max-width: 480px) {

    .kart-gorsel-kapsayici {

        height: 120px;

    }

    

    .kart-icerik {

        padding: 12px 15px;

    }

    

    .kart-icerik h4 {

        font-size: 1.1em;

        margin-bottom: 6px;

    }

    

    .kart-icerik h4::after {

        font-size: 1.2em;

    }

}