body {
  background-color: #c7d3df; /* Açık mavi-gri, istersen değiştirebilirsin */
  font-family: Arial, sans-serif;
  margin: 0px;
}

/* SON HABERLER */
.son-haberler-wrapper {
  padding: 10px 0;
  overflow: hidden;
  
}

.son-haberler-container {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.son-haberler-baslik {
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  color: #c7d3df;
}

.son-haberler-slider {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
}

.son-haberler-list {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scrollHaberler 20s linear infinite;
  white-space: nowrap;
}

.son-haberler-item {
  padding: 10px;
  min-width: max-content;
}

.son-haberler-item a {
  color: #c7d3df;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.son-haberler-item a:hover {
  color: #f2b632;
}

@keyframes scrollHaberler {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* YENİ BÖLÜM CSS - Temel Yapı */
.haber-grid-wrapper {
  padding: 5px 0; /* Üstten ve alttan boşluk bırakalım */
  background-color: c7d3df; /* Beyaz bir arka plan rengi verebiliriz */
}

.haber-grid-wrapper .container {
  display: flex; /* İçindeki öğeleri yan yana hizalamak için flexbox kullanacağız */
  gap: 20px; /* Öğeler arasında boşluk bırakalım */
  align-items: stretch; /* Öğeleri en üste hizala */
}
/* YENİ BÖLÜM CSS - Sağ Sidebar */
.sidebar {
  background-color: #b12727; /* Kırmızı arka plan */
  padding: 15px;
  width: 250px; /* Genişlik sabitleyelim */
  flex-shrink: 0; /* Küçülmesini engelle */
  display: flex;
  justify-content: center; /* Yazıyı ortala */
  align-items: center; /* Yazıyı dikeyde ortala */
  /*min-height: 400px; /* Geçici olarak bir yükseklik verelim */
  position: relative; /* Başlığı döndürmek için */
  margin-top: 20px; /* Yukarıdan 20px boşluk bırak */
  margin-bottom: 20px; /* Aşağıdan 20px boşluk bırak */
}

.sidebar-title {
  font-size: 24px;
  font-weight: bold;
  transform: rotate(90deg); /* Yazıyı 90 derece döndür */
  white-space: nowrap; /* Yazının alt satıra geçmesini engelle */
  position: absolute; /* Döndürülmüş yazının konumunu ayarlamak için */
  left: 50%; /* Yarıya taşı */
  top: 50%; /* Yarıya taşı */
  transform-origin: center center; /* Dönüşüm merkezini ayarla */
  transform: translate(-50%, -50%) rotate(90deg); /* Hem merkezleme hem döndürme */
}

/* Sol ana içerik için placeholder */
.main-content {
  flex-grow: 1; /* Kalan alanı kaplamasını sağla */
  background-color: #c7d3df; /* Geçici bir arka plan rengi verelim */
  /*min-height: 400px; /* Geçici bir yükseklik */
}
/* YENİ BÖLÜM CSS - Öne Çıkanlar Listesi */
.featured-news-list {
  list-style: none; /* Madde işaretlerini kaldır */
  padding: 0;
  margin: 0;
  margin-top: 10px; /* Başlıktan biraz boşluk bırak */
  /* NOT: rotate transform uyguladığımız için liste direk görünmez. */
  /* Sidebar'ı düzenleyeceğiz. Şimdilik sadece yapıyı ekliyoruz. */
}

.featured-news-list li {
  margin-bottom: 10px; /* Haberler arasında boşluk */
}

.featured-news-list li a {
  color: #c7d3df; /* Beyaz yazı rengi */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-size: 16px;
  font-weight: 500;
  display: block; /* Tüm alanı tıklanabilir yap */
  padding: 5px; /* İç boşluk */
  transition: background-color 0.3s ease;
}

.featured-news-list li a:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Hover efekti */
}



/* Sidebar'ın temel yapısı */
.sidebar {
  background-color: #b12727; /* Kırmızı arka plan */
  color: #c7d3df; /* Yazı rengi */
  padding: 15px;
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* Yan öğeleri yatayda ortalar */
  min-height: 400px;
  position: relative;
  border-radius: 15px; /* Buraya yuvarlaklık */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sidebar'a hafif bir gölge */
}


/* Öne çıkanlar başlığı  */
.sidebar-title {
  font-size: 24px;
  font-weight: bold;
  color: #c7d3df;
  transform: none;        /* Döndürmeyi kaldır */
  position: static;       /* Mutlak konumlandırmayı kaldır */
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;    /* Köşeleri yuvarlak yap */
  margin-bottom: 15px;    /* Altına biraz boşluk bırak */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  text-align: center; /* Başlığı ortala */
  width: fit-content; /* Sadece içeriği kadar yer kapla */
}


/* Öne çıkan haberler listesi */
.featured-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 15px; /* Başlıktan sonra daha az boşluk bırakalım */
  width: 100%; /* Tüm sidebar genişliğini kapla */
  display: flex;
  flex-direction: column; /* Öğeleri alt alta sırala */
  gap: 10px; /* Öğeler arasında boşluk */
}

/* Her bir öne çıkan haber öğesi */
.featured-news-item {
  background-color: rgba(255, 255, 255, 0.1); /* Hafif şeffaf beyaz arka plan */
  border-radius: 5px;
  overflow: hidden; /* İçerik taşmasını engelle */
  transition: background-color 0.3s ease;
}

.featured-news-item:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Hover efekti */
}

/* Haber başlığı ve görselini içeren bağlantı */
.featured-news-link {
  display: flex; /* İçindeki resim ve başlığı yan yana hizalamak için */
  flex-direction: column; /* Resim ve başlığı alt alta al */
  align-items: center; /* Dikeyde ortala */
  justify-content: center;    /* Yatayda ortala */
  text-decoration: none;
  padding: 8px; /* İç boşluk */
  text-align: center; /* İçindeki metinleri (başlığı) ortala */
}

* Görselin kapsayıcısı */
.featured-image-wrapper {
  width: 100%;  /* Kapsayıcısının genişliğini tamamen doldur */
  /* max-width: 180px; */ /* Bu satırı kaldırıyoruz, çünkü daha geniş olmasını istiyoruz */
  height: 120px;  /* Yüksekliği sabit kalacak */
  margin-bottom: 8px; /* Resim ile başlık arasına boşluk */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  /* Yeni eklenen: Resmi kendi içinde ortalamak için */
  display: flex; /* İçindeki imajı hizalamak için flexbox kullan */
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala (genelde object-fit cover olduğu için çok etkilemez) */
}

/* Öne çıkan haber görseli */
.featured-news-image {
  width: 100%; /* Kapsayıcısının genişliğini doldur */
  height: 100%; /* Kapsayıcısının yüksekliğini doldur */
  object-fit: cover; /* Resmin en boy oranını koruyarak alanı doldurmasını sağlar */
  display: block;
}

/* Öne çıkan haber başlığı */
.featured-news-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  flex-grow: 1; /* Kalan alanı kapla */
  overflow: hidden; /* Metin taşmasını engelle */
  text-overflow: ellipsis; /* Taşan metni ... ile göster */
  display: -webkit-box; /* Çok satırlı ellipsis için */
  -webkit-box-orient: vertical;
  text-align: center; /* Başlığı ortala */
}

.featured-news-title:hover {
  color: #12273b; /* Hover efekti */
}

/* YENİ BÖLÜM CSS - Sol Ana İçerik Yapısı (Güncellendi) */
.main-content {
  flex-grow: 1; /* Kalan alanı kaplamasını sağla */
  background-color: #e6ebf0; /* İçeriğin arka planı beyaz olsun */
  padding: 10px 20px; /* İç boşluk verelim */
  border-radius: 8px; /* Hafif yuvarlak kenarlar */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Hafif gölge */
  display: flex; /* İçindeki öğeleri dikey sıralamak için */
  flex-direction: column;
  gap: 15px; /* Öğeler arasında boşluk */
  min-height: auto;
  margin-top: 20px; /* Yukarıdan 20px boşluk bırak */
  margin-bottom: 20px; /* Aşağıdan 20px boşluk bırak */
}

/* Haber Başlığı */
.haber-baslik-yeni {
  font-size: 32px; /* Daha büyük bir başlık */
  color: #12273b;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Haber Tarihi */
.haber-tarih-yeni {
  font-size: 15px;
  color: #888;
  margin-bottom: 20px;
  font-style: italic;
}

/* Haber Görseli */
.haber-gorsel-yeni {
    margin-bottom: 20px;
    position: relative; /* Kırmızı çerçeve ve gölgelendirme için */
    border: 5px solid #b12727; /* Kırmızı çerçeve */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Kırmızı gölge */
}

.haber-gorsel-yeni img {
  width: 100%;
  max-height: 450px; /* Daha büyük görsel yüksekliği */
  object-fit: cover;
  display: block; /* Altındaki boşluğu kaldırmak için */
}

/* Haber İçeriği */
.haber-icerik-yeni {
  font-size: 18px; /* Daha okunaklı font boyutu */
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
}

.haber-icerik-yeni p { /* Paragraflar arasına boşluk */
    margin-bottom: 1em;
}

/* Alt Resim Alanı (iki görsel için) - Mevcut haliyle iyi, sadece background kaldırıldı */
.bottom-images-area {
  display: flex;
  flex-direction: column; /* alt alta dizmek için */
  gap: 20px; /* aralarında dikey boşluk */
  margin-top: 20px;
}

.bottom-image-item {
  width: 100%;
  min-height: 300px; /* Biraz daha yükseklik */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.2em; /* Yazı biraz küçüldü */
  font-weight: bold;
  position: relative;
  overflow: hidden; /* Resim taşmasını engelle */
  border: 3px solid #b12727; /* Kırmızı çerçeve */
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Hafif kırmızı gölge */
}

.bottom-image-item .small-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative; /* absolute değil, daha basit tutalım */
    top: 0;
    left: 0;
    opacity: 0.8; /* Resmin biraz şeffaf olması, yazı daha net görünsün */
}

.bottom-image-item .image-text-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* FOOTER */
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.footer-icons {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.footer-icons a {
  color: white;
  background-color: #12273b; /* hafif kontrast */
  padding: 10px;
  margin: 5px;
  border-radius: 50%;
  display: inline-block;
  font-size: 18px;
  transition: background 0.3s;
  text-decoration: none;
}

.footer-icons a:hover {
  background-color: #ffffff;
  color: #12273b;
  transition: background 0.3s;
}
.footer-text {
  font-size: 14px;
  color: #c7d3df;
  margin: 0;
}
@media (max-width: 768px) {
  /* ... (önceki mobil ayarların devamı) ... */

  /* FOOTER Mobil Uyum */
  .footer-container {
    margin-bottom: 5px; /* Alt boşluğu azalt */
    padding: 10px; /* Kenarlardan padding ekle */
    box-sizing: border-box; /* Padding'i genişliğe dahil et */
  }

  .footer-icons {
    gap: 15px; /* İkonlar arası boşluğu azalt */
    margin-bottom: 8px; /* Alt boşluğu azalt */
    flex-wrap: wrap; /* İkonlar çok fazla ise alt satıra geçsin */
    justify-content: center; /* Alt satıra geçerse ikonları ortala */
  }

  .footer-icons img {
    width: 25px; /* İkon boyutunu biraz küçült */
    height: 25px; /* İkon boyutunu biraz küçült */
  }

  .footer-text {
    font-size: 12px; /* Metin font boyutunu küçült */
    text-align: center; /* Metni ortala */
    padding: 0 10px; /* Metin için de yan boşluk ekle */
  }

  /* Daha küçük mobil ekranlar için (isteğe bağlı) */
  @media (max-width: 480px) {
    .footer-icons {
      gap: 10px; /* Çok küçük ekranlarda ikon boşluğunu daha da azalt */
    }

    .footer-icons img {
      width: 22px; /* İkon boyutunu biraz daha küçült */
      height: 22px;
    }

    .footer-text {
      font-size: 11px; /* Çok küçük ekranlarda metin boyutunu daha da küçült */
    }
  }
}

.featured-news-link {
  text-decoration: none;
  color: inherit;
}

.featured-news-title {
  text-decoration: none;
  border-bottom: none;
}
.featured-news-title a {
  text-decoration: none;
  color: inherit;
  border-bottom: none;
}

@media (max-width: 768px) {
  /* Genel Body Ayarı */
  body {
    margin: 0px; /* Mobil için kenar boşluğunu azalt */
  }

  /* Ana İçerik ve Sidebar'ı Kapsayan Wrapper */
  .haber-grid-wrapper {
    padding: 0; /* Mobil'de ekstra padding'i kaldır */
  }

  .haber-grid-wrapper .container {
    flex-direction: column; /* Mobil'de sidebar ve ana içerik alt alta gelsin */
    gap: 20px; /* Aralarındaki boşluğu ayarla */
    padding: 0 10px; /* Konteynerin yan boşluklarını ekle */
    box-sizing: border-box;
  }

  /* SOL ANA HABER İÇERİĞİ (MAIN CONTENT) */
  .main-content {
    flex-grow: 1;
    width: 94%; /* Tam genişlik kapla */
    padding: 15px; /* İç boşluğu ayarla */
    margin-top: 0; /* Ekstra marjini kaldır */
    margin-bottom: 0; /* Ekstra marjini kaldır */
  }

  .haber-baslik-yeni {
    font-size: 24px; /* Başlığı mobil için küçült */
    margin-bottom: 8px;
  }

  .haber-tarih-yeni {
    font-size: 13px; /* Tarih font boyutunu küçült */
    margin-bottom: 15px;
  }

  .haber-gorsel-yeni {
    border-width: 3px; /* Çerçeve kalınlığını azalt */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Gölgeyi küçült */
    margin-bottom: 15px;
  }

  .haber-gorsel-yeni img {
    max-height: 250px; /* Görsel yüksekliğini mobil için küçült */
  }

  .haber-icerik-yeni {
    font-size: 16px; /* İçerik metin boyutunu küçült */
    line-height: 1.6;
    margin-bottom: 15px;
  }

  /* Alt Resim Alanı (iki görsel için) */
  .bottom-images-area {
    flex-direction: column; /* Zaten alt alta ama emin olalım */
    gap: 15px; /* Boşluğu azalt */
    margin-top: 15px;
  }

  .bottom-image-item {
    min-height: 200px; /* Mobil için minimum yüksekliği azalt */
    border-width: 2px; /* Çerçeve kalınlığını azalt */
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.3); /* Gölgeyi küçült */
  }

  .bottom-image-item .image-text-overlay {
    font-size: 14px; /* Overlay metin boyutunu küçült */
    bottom: 8px;
    left: 8px;
  }

  /* SAĞ SİDEBAR (ÖNE ÇIKANLAR) */
  .sidebar {
    width: auto; /* Mobil'de tam genişlik kapla */
    min-height: 94%; /* Minimum yüksekliği kaldır, içeriğe göre ayarlansın */
    margin-top: 0; /* Üst marjini kaldır */
    margin-bottom: 0; /* Alt marjini kaldır */
    padding: 12px; /* İç boşluğu ayarla */
    border-radius: 8px; /* Köşeleri biraz küçült */
  }

  /* Sidebar Başlığı - MOBİL İÇİN DÖNDÜRMEYİ KALDIRIYORUZ! */
  .sidebar-title {
    font-size: 20px; /* Başlık font boyutunu küçült */
    transform: none; /* DİKEY DÖNDÜRMEYİ KALDIR! */
    position: static; /* Mutlak konumlandırmayı kaldır */
    width: 100%; /* Tam genişlik kapla */
    text-align: center; /* Başlığı ortala */
    padding: 8px 0; /* Dikey padding ver */
    margin-bottom: 15px; /* Listeden boşluk bırak */
  }

  /* Öne Çıkan Haberler Listesi */
  .featured-news-list {
    margin-top: 10px; /* Başlıktan sonraki boşluğu ayarla */
    gap: 8px; /* Haberler arasındaki boşluğu azalt */
  }

  /* Her bir öne çıkan haber öğesi */
  .featured-news-item {
    padding: 6px; /* İç padding'i azalt */
    border-radius: 4px;
  }

  /* Haber başlığı ve görselini içeren bağlantı */
  .featured-news-link {
    padding: 6px; /* İç padding'i azalt */
  }

  /* Öne çıkan haber görseli kapsayıcısı */
  .featured-image-wrapper {
    height: 90px; /* Görsel yüksekliğini mobil için küçült */
    margin-bottom: 6px; /* Görsel alt boşluğunu azalt */
    border-width: 2px;
  }

  /* Öne çıkan haber başlığı */
  .featured-news-title {
    font-size: 14px; /* Başlık font boyutunu küçült */
    line-height: 1.3;
    
  }

  /* Daha küçük mobil ekranlar için ek düzenlemeler */
  @media (max-width: 480px) {
    /* Genel Container Padding'i */
    .haber-grid-wrapper .container {
        padding: 0 5px; /* Daha da daralt */
    }

    /* Main Content */
    .main-content {
      padding: 10px; /* Daha küçük iç boşluk */
    }

    .haber-baslik-yeni {
      font-size: 20px;
    }

    .haber-tarih-yeni {
      font-size: 12px;
    }

    .haber-gorsel-yeni img {
      max-height: 200px; /* Görsel yüksekliğini daha da düşür */
    }

    .haber-icerik-yeni {
      font-size: 15px;
    }

    .bottom-image-item {
      min-height: 150px;
    }

    .bottom-image-item .image-text-overlay {
      font-size: 12px;
    }

    /* Sidebar */
    .sidebar {
      padding: 10px;
    }

    .sidebar-title {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .featured-news-list {
      gap: 6px;
    }

    .featured-news-item {
      padding: 4px;
    }

    .featured-image-wrapper {
      height: 70px;
    }

    .featured-news-title {
      font-size: 13px;
    }
  }
}

/* YENİ EKLENEN: YATAY REKLAM BANNER STİLLERİ */
.horizontal-ad-banner {
  width: 100%; /* Ana içeriğin genişliğini kapla */
  height: 100px; /* Yatay banner için uygun bir yükseklik */
  margin: 20px 0; /* Üstten ve alttan boşluk bırak */
  background-color: #f2b632; /* Reklam alanının arka plan rengi */
  border-radius: 8px;
  overflow: hidden; /* Videonun taşmasını engelle */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Hafif gölge */
}

.horizontal-ad-banner video {
  width: 100%; /* Kapsayıcısının genişliğini tamamen doldur */
  height: 100%; /* Kapsayıcısının yüksekliğini tamamen doldur */
  object-fit: cover; /* En-boy oranını koruyarak alanı doldur, taşan kısımları kes */
  display: block; /* Altındaki boşluğu kaldırmak için */
}


@media (max-width: 768px) {
  /* Genel Body Ayarı */
  body {
    margin: 0px; /* Mobil için kenar boşluğunu azalt */
  }

  /* Ana İçerik ve Sidebar'ı Kapsayan Wrapper */
  .haber-grid-wrapper {
    padding: 0; /* Mobil'de ekstra padding'i kaldır */
  }

  .haber-grid-wrapper .container {
    flex-direction: column; /* Mobil'de sidebar ve ana içerik alt alta gelsin */
    gap: 20px; /* Aralarındaki boşluğu ayarla */
    padding: 0 10px; /* Konteynerin yan boşluklarını ekle */
    box-sizing: border-box;
  }
}

.sosyal-paylasim-butonlari {
  background-color: #f9f9f9;
  padding: 12px 20px;
  border-top: 2px solid #ddd;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  flex-wrap: wrap;
}

.sosyal-paylasim-butonlari span {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.paylas-icon {
  height: 32px;
  transition: transform 0.2s ease;
}

.paylas-icon:hover {
  transform: scale(1.15);
}

.back-to-home {
  display: inline-block;
  margin-bottom: 12px;
  color: #b12727;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.back-to-home:hover {
  color: #f2b632;
  text-decoration: underline;
}