/* 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 {    left: 5px;  }  .media-modal .modal-nav-btn.next {    right: 5px;  }}