/* Bölge ve Grid Ayarları */
.kategori-bolumu {
margin-top: 30px;
margin-bottom: 40px;
}
/* Buton alt taraftan taştığı için kartlar arası dikey boşluk */
.koli-ayari {
margin-bottom: 55px; 
}
.kat-link {
text-decoration: none !important;
color: inherit;
display: inline-block;
width: 100%;
max-width: 360px;
}
.kat-kart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
/* KAPSAYICI (Gölge ve Pozisyonlama Burada Yönetilir) */
.kat-resim-ustu {
position: relative; /* Butonun buna göre hizalanması şarttır */
width: 100%;
max-width: 360px;
transition: transform 0.4s ease;
}
/* RESİM STİLİ */
.kat-resim {
width: 100%;
aspect-ratio: 360 / 280;
height: auto;
object-fit: cover;
border-radius: 20px;

/* Resim Gölgesi */
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(0, 0, 0, 0.08);
background-color: #ffffff;
display: block;
}
/* RESMİN ALT KENARINA BİNEN OVAL BUTON */
.kat-baslik-butonu {
position: absolute;
bottom: 115px; /* Masaüstü için orijinal konum */
left: 50%;
transform: translateX(-50%); /* Tam yatay ortalama */

/* Tasarım detayları */
background-color: #e90100;
padding: 10px 24px;
border-radius: 30px; /* Oval buton köşeleri */

/* Butonu öne çıkaran gölge ve kenarlık */
box-shadow: 0 8px 20px rgba(0, 0, 0, 1.18);
border: 2px solid #ffffff;

z-index: 10; /* Resmin üstünde kalmasını sağlar */
white-space: nowrap;
transition: all 0.3s ease;
}
/* BUTON İÇİNDEKİ YAZI STİLİ */
.kat-baslik-metin {
display: block;
font-size: 14px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: color 0.3s ease;
}
/* --- HOVER (ÜZERİNE GELİNCE) EFEKTLERİ --- */
/* Kart yükselir */
.kat-link:hover .kat-resim-ustu {
transform: translateY(-8px);
}
.kat-link:hover .kat-resim {
box-shadow: 0 22px 35px -5px rgba(0, 0, 0, 0.35);
}
/* Buton renk değiştirir (Lacivert Arka Plan, Beyaz Yazı) */
.kat-link:hover .kat-baslik-butonu {
background-color: #00df70;
border-color: #000;
box-shadow: 0 10px 25px rgba(3, 43, 82, 0.35);
}
.kat-link:hover .kat-baslik-metin {
color: #000;
}

/* MOBİL EKRAN UYUMLAMASI (Sadece Mobilde Geçerli) */
@media (max-width: 767px) {
.kategori-bolumu { margin-top: 15px; }
.koli-ayari { margin-bottom: 25px; }

.kat-baslik-butonu {
    padding: 8px 18px;
    bottom: 50%; /* Dikeyde ortaya hizalar */
    transform: translate(-50%, 50%); /* Hem yatayda hem dikeyde mükemmel merkezleme */
}

.kat-baslik-metin {
    font-size: 12px;
}
}