/* Video Kapsayıcısına Maksimum Genişlik Ekleme */
.video-kapsayici {
    /* Bilgisayarda videonun görebileceği maksimum genişlik (eski 560px'iniz) */
    max-width: 560px; 
    
    /* Kapsayıcıyı sayfa ortasına hizalamak için (isteğe bağlı ama önerilir) */
    margin-left: auto;
    margin-right: auto;
}

/* Bu kural, max-width eklediğiniz div'in içindeki oranın bozulmamasını sağlar. */
.video-kapsayici .ratio {
    max-width: 100%;
}

/* Carousel oklarının simgelerini hedefle */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* 🔴 SORUNLU SATIRI KALDIRIN 🔴 */
    /* filter: none !important; */ 
    
    /* 🟢 YENİ DÜZELTME: Drop-shadow'u tek satırda ve sadece gölge için bırakın */
    /* Siyah (0,0,0) renkte, 0 piksel ofsetli, 3 piksel bulanıklıkta yoğun gölge */
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 1)) !important; 
    
    /* İsteğe bağlı, boyutu biraz büyütmek için */
    width: 2rem; 
    height: 2rem;
}

/* Ok butonlarının arka plan rengi aynı kalır (Bu doğru) */
.carousel-control-prev,
.carousel-control-next {
    background-color: transparent !important;
}


/* Thumbnail'ler için yeni bir sınıf tanımlıyoruz */
.thumb-korumali {
    height: 192px;       /* Yüksekliği sabitler */
    width: auto;        /* Genişliği resmin doğal oranına bırakır */
    object-fit: contain; /* Resmi kesmeden, alana sığdırır (boşluk kalabilir) */
    cursor: pointer;
    /* Optional: Resmin bulunduğu alanda ortalanmasını sağlar */
    display: block; 
    margin-left: auto;
    margin-right: auto;
}
 
.modal-body .lazy-load-img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out; 
}
.modal-body .lazy-load-img.loaded {
    opacity: 1;
}

/* Modal içindeki büyük resmin yüksekliğini sınırlama (isteğe bağlı) */
.modal-body .img-lightbox {
    max-height: 90vh; /* Ekran yüksekliğinin %90'ını geçmesin */
    width: auto !important; /* Resmin en boy oranını koru */
    margin: 0 auto; /* Resmi ortala */
}

/* Modal arka planını daha koyu yapma (Sayfa kararma etkisi) */
.modal-backdrop.show {
    opacity: 0.9 !important; 
}

/* Carousel Item'larını flex container olarak ayarla */
/* Bu, resmin geçiş sırasında ortalamasını korur. */
.carousel-inner .carousel-item {
    display: flex; /* İçeriğin esnek (flex) olmasını sağlar */
    justify-content: center; /* İçeriği yatayda ortalar */
    align-items: center; /* İçeriği dikeyde ortalar */
    
    /* Gerekirse, Modal Body yüksekliğini zorlayın (Modal-fullscreen kullanıyorsanız gereksiz) */
    /* min-height: 80vh; */
}

/* Resim boyutunu zorlayan varsayılan Bootstrap kurallarını geçersiz kıl */
.carousel-inner img {
    /* Resmin %100 genişliğe yayılmasını engelleyerek orijinal boyutunu korur */
    max-width: none !important; 
    
    /* Modal Body'nin overflow-auto olması şartıyla, resim büyükse taşıp kaydırma çubuğu çıkar */
    width: auto !important; 
    height: auto !important;
}

.orijinal-boyut-alan750 {
    height: 750px; /* İstediğiniz sabit yüksekliği buradan ayarlayın */
    width: 100%;  /* Alanın genişliği */
    overflow: hidden; /* **Taşan kısmı keser ve gizler** */
	display: flex;             /* Flexbox modelini etkinleştirir */
    align-items: center;       /* Dikey eksende (üst-alt) ortalar */
    justify-content: center;   /* Yatay eksende (sol-sağ) ortalar (isteğe bağlı) */
}

/* Resim etiketine herhangi bir yükseklik/genişlik zorlaması yapmıyoruz. 
   Böylece orijinal boyutunda kalacak. */
.orijinal-boyut-alan750 img {
    /* Resmin orijinal boyutunda kalması için zorunlu boyutlandırmayı kaldırıyoruz */
    /* object-fit: cover; ve width: 100%;, height: 100%; kullanmıyoruz */
    max-width: none; /* Bazı Bootstrap ayarlarını geçersiz kılmak için */
    height: auto;
}
.orijinal-boyut-alan600 {
    height: 600px; /* İstediğiniz sabit yüksekliği buradan ayarlayın */
    width: 100%;  /* Alanın genişliği */
    overflow: hidden; /* **Taşan kısmı keser ve gizler** */
	display: flex;             /* Flexbox modelini etkinleştirir */
    align-items: center;       /* Dikey eksende (üst-alt) ortalar */
    justify-content: center;   /* Yatay eksende (sol-sağ) ortalar (isteğe bağlı) */
}

/* Resim etiketine herhangi bir yükseklik/genişlik zorlaması yapmıyoruz. 
   Böylece orijinal boyutunda kalacak. */
.orijinal-boyut-alan600 img {
    /* Resmin orijinal boyutunda kalması için zorunlu boyutlandırmayı kaldırıyoruz */
    /* object-fit: cover; ve width: 100%;, height: 100%; kullanmıyoruz */
    max-width: none; /* Bazı Bootstrap ayarlarını geçersiz kılmak için */
    height: auto;
}
.orijinal-boyut-alan300 {
    height: 300px; /* İstediğiniz sabit yüksekliği buradan ayarlayın */
    width: 100%;  /* Alanın genişliği */
    overflow: hidden; /* **Taşan kısmı keser ve gizler** */
	display: flex;             /* Flexbox modelini etkinleştirir */
    align-items: center;       /* Dikey eksende (üst-alt) ortalar */
    justify-content: center;   /* Yatay eksende (sol-sağ) ortalar (isteğe bağlı) */
}

/* Resim etiketine herhangi bir yükseklik/genişlik zorlaması yapmıyoruz. 
   Böylece orijinal boyutunda kalacak. */
.orijinal-boyut-alan300 img {
    /* Resmin orijinal boyutunda kalması için zorunlu boyutlandırmayı kaldırıyoruz */
    /* object-fit: cover; ve width: 100%;, height: 100%; kullanmıyoruz */
    max-width: none; /* Bazı Bootstrap ayarlarını geçersiz kılmak için */
    height: auto;
}

.sabit-yukseklik-alan {
    height: 300px; /* İstediğiniz sabit yüksekliği buradan ayarlayın */
    width: 100%; /* Alanın genişliği (örneğin %100) */
    overflow: hidden; /* Bu div'den taşan her şeyi gizler */
}

.sabit-yukseklik-alan img {
    /* Resmin, bulunduğu alana sığarken oranını korumasını sağlar */
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Sadece Carousel içindeki başlıkları hedefler */
.carousel-caption h5 {
    color: #000000 !important; /* Mutlak siyah rengi zorlar */ 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Koyu renkli bir resim üzerinde okunurluğu artırmak için gölge de ekleyebilirsiniz (Opsiyonel) */
}