/* Modal içeriğinin arka planını, kenarlığını ve gölgesini kaldırır */
.media-modal .modal-content {
background-color: transparent;
}.media-modal .modal-content .modal-body {
background-color: transparent;
padding: 0px;
}/* Her modal için özel, beyaz Kapat Butonu */
.media-modal .btn-close {
position: absolute;
top: -35px;
/* Modalın biraz dışına, üstüne konumlandırır */
right: 0;
z-index: 10;
opacity: 1;
}.media-modal .btn-close svg {
width: 20px;
height: 20px;
fill: #fff;
}/* Resim modalı için resmin üzerine gelen başlık */
.media-modal .modal-title-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
padding: 40px 20px 20px 20px;
text-align: left;
font-size: 1.1rem;
pointer-events: none;
margin: 0;
/* Üzerine tıklanmasını engeller */
}/* Galeri İleri/Geri Okları */
.media-modal .modal-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
border: none;
font-size: 30px;
line-height: 1;
z-index: 10;
transition: background-color 0.2s;
border-radius: 5px;
background: transparent;
cursor: pointer;
}.media-modal .modal-nav-btn:hover {
color: white;
}.media-modal .modal-nav-btn.prev {
left: -55px;
}.media-modal .modal-nav-btn.next {
right: -55px;
}.media-modal .modal-nav-btn svg {
fill: #fff;
width: 30px;
height: 30px;
}.media-modal .modal-dialog {
max-width: 50%;
}.media-modal .modal-dialog iframe {
width: 100%;
height: 400px;
}.media-modal .img-fluid {
max-width: 100%;
max-height: 100%;
}.media-modal .modal-content {
border: none;
padding: 0px;
background: transparent;
}/* ------------------------------------- */
/* --- MOBİL UYUMLULUK AYARLARI --- */
/* ------------------------------------- */
@media (max-width: 767px) {/* Mobil'de modal, ekranın tamamını kaplar */
.media-modal .modal-dialog {
margin: 0;
max-width: 100vw;
height: 100vh;
}.media-modal .modal-content,
.media-modal .modal-body {
height: 100%;
border-radius: 0;
}/* Resim ve videonun dikeyde de ortalanmasını sağlar */
.media-modal .modal-body {
display: flex;
align-items: center;
}/* Mobil'de kapatma butonu ekranın içine alınır */
.media-modal .btn-close {
top: 15px;
right: 15px;
transform: scale(1.2);
}.media-modal .modal-nav-btn {
padding: 0.6rem 1rem;
font-size: 1.8rem;
}.media-modal .modal-nav-btn.prev {
left: 10px;
}.media-modal .modal-nav-btn.next {
right: 10px;
}
}/* --------------------------------------------------- */
/* --- YENİ ÖZEL MEDYA MODAL STİLLERİ (FANCYBOX TARZI) --- */
/* --------------------------------------------------- */
/* Modal arka planını daha koyu ve şık yapar */
.media-modal.modal {
--bs-modal-bg: transparent;
--bs-modal-border-width: 0;
--bs-modal-box-shadow: none;
background: #000000c2;
}.modal-backdrop.show {
opacity: 0.9;
/* Daha da koyu bir arka plan için */
}/* YENİ: Modal dialog'u ekranı kaplayan bir çerçeveye dönüştürür */
.media-modal .modal-dialog {
margin: 0;
max-width: 100%;
width: 100%;
height: 100%;
transform: none !important;
/* Bootstrap'in transform animasyonunu iptal et */
}/* YENİ: İçeriği tam ekran yapar */
.media-modal .modal-content {
background-color: transparent;
border: none;
height: 100%;
border-radius: 0;
}/* YENİ: Resmi/Videoyu dikey ve yatayda mükemmel ortalar */
.media-modal .modal-body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0;
}/* YENİ: Resmin ekran boyutlarına göre kendini ayarlamasını sağlar */
.media-modal .modal-body .img-fluid {
/* Kenarlarda boşluk bırakarak resmi sığdır */
max-width: calc(100vw - 140px);
/* Sağ ve sol oklara yer bırak */
max-height: calc(100vh - 80px);
/* Üst ve altta boşluk bırak */
width: auto;
height: auto;
object-fit: contain;
/* Resmin oranını koru */
}/* Video için aynı şekilde davranmasını sağlar */
.media-modal .modal-body .ratio {
max-width: 1280px;
/* Video için makul bir maksimum genişlik */
width: 90%;
height: auto;
}.media-modal .modal-body.video-body .ratio {
max-width: 700px;
}/* --- KONTROL ELEMANLARI (BUTONLAR VE OKLAR) --- */
/* DEĞİŞTİ: Kapatma butonu artık ekrana sabitleniyor */
.media-modal .btn-close {
position: fixed;
/* Ekrana göre sabit pozisyon */
top: 20px;
right: 25px;
z-index: 1060;
/* Modal'ın üzerinde kalması için yüksek z-index */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
/* Okunabilirliği artırmak için gölge */
background: none;
opacity: 1;
}.media-modal .btn-close svg {
width: 33px;
height: 33px;
fill: #fff;
}/* Resim modalı için resmin üzerine gelen başlık */
.media-modal .modal-title-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 40px 20px 20px 20px;
text-align: left;
font-size: 1.1rem;
pointer-events: none;
margin: 0;
}/* DEĞİŞTİ: Galeri okları artık ekrana sabitleniyor */
.media-modal .modal-nav-btn {
position: fixed;
/* Ekrana göre sabit pozisyon */
top: 50%;
transform: translateY(-50%);
color: white;
border: none;
z-index: 1060;
/* Modal'ın üzerinde kalması için yüksek z-index */
cursor: pointer;
padding: 15px 10px;
border-radius: 5px;
transition: background-color 0.2s;
}.media-modal .modal-nav-btn:hover {
background-color: rgba(10, 10, 10, 0.5);
}.media-modal .modal-nav-btn.prev {
left: 20px;
}.media-modal .modal-nav-btn.next {
right: 20px;
}.media-modal .modal-nav-btn svg {
fill: #fff;
width: 30px;
height: 30px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}@media (max-width: 767px) {/* YENİ: Mobilde resmin kenarlara daha yakın olmasını sağlar */
.media-modal .modal-body .img-fluid {
max-width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
}/* YENİ: Mobil'de kapatma butonu ve okların konumunu ayarlar */
.media-modal .btn-close {
top: 15px;
right: 15px;
}.media-modal .modal-nav-btn.prev {
width: auto;
background: #00000054;
}.media-modal .modal-nav-btn.next {
width: auto;
background: #00000054;
}
}