@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* CSS Document */
.nav-link {
	font-weight: bold!important;
	font-family: "Roboto", sans-serif!important;
	color: white!important;
	font-size: 14px;
	
}

.nav-link:hover {
	color: #FFFFFF!important; /* Örneğin sarımsı bir renk */
    background-color: #670000; 
}

.nav-link.active {
	color: #000000!important; /* Mavi-turkuaz renk */
	/* İsteğe bağlı: Active arka planı */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    border-radius: 5px;
}

/* Arka Plan Resmi Olan Alanın Stilleri */
.background-image-container {
    /* * Resmi tanımlayın. (Resim yolunu kontrol edin)
     * Örneğin: url('images/ana-banner.jpg')
     */
    background-image: url('../images/2.jpg'); 
    background-size: cover; /* Resmi kapsayıcıya sığdırır */
    background-position: center center; /* Resmi ortalar */
    background-repeat: no-repeat; /* Tekrar etmesini engeller */
    
    /* * EN ÖNEMLİ KISIM: Mobil görünüm için minimum yükseklik tanımlama.
     * Bu, yazı az olsa bile alanın görünmesini sağlar. 
     */
    min-height: 400px; /* Örneğin 400 piksel yükseklik verdik */
    
    /* İçeriği merkeze almak için Flexbox */
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    text-align: center;
    position: relative;
    color: white; /* Yazıların okunması için */
}

/* Yazıların bulunduğu katman (overlay-content) için stiller */
.overlay-content {
    /* Resim üzerine karanlık bir katman ekleyip yazıları daha okunur hale getirebiliriz (isteğe bağlı) */
    position: relative;
    padding: 20px;
    z-index: 2; /* Yazının resmin üstünde kalmasını sağlar */
}

/* İsteğe bağlı: Resmin üzerine hafif siyah bir overlay katmanı ekleme */
.background-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* %40 siyahlık */
    z-index: 1;
}

/* Mobil için daha kısa bir yükseklik isterseniz (isteğe bağlı) */
@media (max-width: 768px) {
    .background-image-container {
        min-height: 300px; /* Mobilde biraz daha az yükseklik */
    }
}

/* Ana Kapsayıcı: Geçişi pürüzsüz hale getirir */
.img-hover-zoom {
    overflow: hidden; /* Resmin dışına taşan zoom'u gizler */
}

/* Resim Etiketi: Zoom efektini uygular */
.img-hover-zoom img {
    /* Geçiş süresini ayarla (örn: 0.5 saniye) */
    transition: transform 0.3s ease; 
    /* Başlangıçta resmi %100 boyutunda tutar */
    transform: scale(1);
}

/* Hover Etkisi: Fare resmin üzerine geldiğinde */
.img-hover-zoom:hover img {
    /* Resmi hafifçe büyüt (örn: %105) */
    transform: scale(1.05); 
}

/* Kartın üzerine gelindiğinde (hover) çalışacak zoom efekti */
   
    /* İsteğe bağlı: Karta hover olunca gölgeyi de biraz arttıralım */
    .kart-zoom-efekt:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }