:root {
    --b:#e5e7eb;
    --radius: 10px;
}

/* Orta Bölüm (Sol ve Sağ) */
.orta-bolum {
    display: flex; /* Flexbox ile öğeleri yan yana hizala */
    flex-wrap: nowrap;     /* Esnek öğeler sığmadığında alt satıra geçmesini engeller */    
    background-color: #ffffff;
}

.sol-bolum, .sag-bolum {
    margin: 0;
}

.sol-bolum {
    width: 70%; 
    background-color: #ffffff; 
    height: auto;
    padding-bottom: 20px !important; 
    margin-bottom: 20px;
    
}

/* Sağ Bölüm */
.sag-bolum { 
    width: 30%; /* Sağ bölümün genişliği */
    background-color: #ffffff; /* Arka plan rengi */
    height: auto;
}

@media (max-width: 992px) {
    /* Tablet boyutunda orta bölüm düzeni */
    .orta-bolum {
      flex-direction: column; /* Sol-sağ yan yana değil, alt alta */
    }
    .sol-bolum, .sag-bolum {
      width: 100% !important; /* Tam genişlik */
    }
}

/* SOL BÖLÜM */


.sol-bolum-genel-container { 
    width: 100%;
    background-color: #ffffff;
    padding: 20px 20px 20px 40px;
    
      
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .sol-bolum-genel-container {
        padding: 15px;
        margin: 15px auto;
    }   
}

.sol-bolum-genel-aciklama {       
    min-height: 65px;
    background-color: #ffffff;
    color: var(--siyah-300);    
    padding: 20px 20px 20px 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(189, 189, 189, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: var(--satir-yuksekligi);
    border:1px solid var(--b);   
    border-radius: var(--radius);       
}



.sol-bolum-genel-aciklama p {
    font-size: var(--font-size-ana);   
    text-align: justify; 
}

.sol-bolum-genel-aciklama h1 { 
    color: var(--mavi-500); 
    text-align: center;
    font-size: var(--font-size-h1);
    margin-bottom: 17px;    
    font-weight: 700; 
}

@media (max-width: 768px) {
    .sol-bolum-genel-aciklama h1 {
        font-size: 22px; /* Mobilde daha küçük başlık boyutu */
    }
}

.sol-bolum-genel-aciklama h2 { 
    color: var(--siyah-300);    
    margin-bottom: 15px;
    font-size: 1.5em;
    text-align: left; /* veya hiç yazma, varsayılan zaten soldur */  
}


.sol-bolum-genel-aciklama .site-uye-olun { 
    color: var(--siyah-300);    
    margin-bottom: 15px;
    font-size: 1.5em;
    text-align: center; 
}

.sol-bolum-genel-aciklama a {
    text-decoration: none;     /* sol.php de açıklama kısmındaki linklerin altındaki çizgiyi kaldırır */
    color: var(--mavi-500);  /* sol.php de açıklama kısmındaki linklerin rengini belirler */
}


.sol-bolum-genel-aciklama a.uye-ol-buton,
.sol-bolum-genel-aciklama a.uye-ol-buton:visited {
    display: block; /* Tam satırı kaplasın ki margin auto çalışsın */
    background-color: var(--mavi-500);
    color: #fff; /* Bembeyaz yazı */
    margin: 15px auto 0 auto; /* Üstte 15px boşluk, sağ/sol auto ile ortalama */
    padding: 10px 23px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700; /* Bold yerine 700 yazdık */
    width: fit-content; /* Yazı boyutuna göre genişlik */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sol-bolum-genel-aciklama a.uye-ol-buton:hover {
    background-color: #2980b9;
    color: #fff; /* Hover'da da beyaz kalsın */
}

/* İçerik Stili */

.sol-ana-cervece { 
    width: 100%;
    background-color: #ffffff;
    padding: 20px 20px 20px 40px; 
}

@media (max-width: 767px) {
    .sol-ana-cervece {
        padding-left: 20px; /* Mobilde soldan boşluk olmasın */
    }
}

/* Blog Yazılarının Genel Çerçevesi */
.dortlu-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    /* Mobilde blog kartları */
    .dortlu-liste {
      gap: 15px; /* Kartlar arası boşluk */
    } 
}



/* Blog Kartları */
.sol-blog {
    width: calc(50% - 10px); /* 2 sütun olacak şekilde boşluğu daha iyi ayarladık */
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(165, 165, 165, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--radius);
    border:1px solid var(--b);   
}

.sol-blog h2 { 
    margin: 10px 15px;
    text-align: center;
}

.sol-blog h2 a {
    font-size: 20px;
    font-weight: 700;
    color: var(--mavi-500);    
    text-decoration: none;
    transition: color 0.3s ease;
}

.sol-blog h2 a:hover {
    color: #024162;
}

@media (max-width: 768px) {
    .sol-blog {
        width: 100% !important; /* Tek sütun */
        margin-bottom: 20px;
    }
    .sol-blog h2 {
        font-size: 16px !important;
        margin: 8px 10px !important;
    }  
}

/* Blog Resmi */
.sol-blog img {
    width: 100%;
    height: 220px;
    object-fit: cover;  
}

@media (max-width: 480px) {
    /* Küçük mobil cihazlar */
    .sol-blog img {
      height: 180px !important; /* Görsel boyutu küçült */
    }    
  }


/* Blog Meta Bilgileri */

.sol-blog-meta { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px; /* Üstten biraz boşluk ekler */
    margin-bottom: 15px; /* En altta boşluk bırakır */
    font-size: 14px !important;
    color: #666;
}

@media (max-width: 768px) {   
    
    .sol-blog-meta {
        font-size: 12px !important; /* Daha okunaklı */
      }
}

.sol-blog-meta span {
    display: flex;
    align-items: center;
}

.sol-blog-meta span a {
    color: #666 !important; /* Meta yazılarıyla aynı renk */
    text-decoration: none !important; /* Alt çizgiyi kaldır */
}

/* Aralara dikey çizgi ekleme */
.sol-blog-meta span:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    margin-right: 10px;
    color: #bbb; /* Çizginin rengini belirle */
}

/* Sayfalandırma Alanı */
#page-numbers {
    text-align: center;
    margin: 30px 0;
}

#page-numbers ul {
    list-style: none;
    padding: 0;
}

#page-numbers ul li {
    display: inline-block;
    margin: 5px;
}

#page-numbers ul li a {
    text-decoration: none;
    padding: 8px 12px;
    background: #eee;
    color: #333;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease;
}

#page-numbers ul li a:hover {
    background-color: var(--mavi-500);  
    color: white;
}

@media (max-width: 480px) {
    
    #page-numbers ul li a {
      padding: 6px 10px !important; /* Sayfa numaraları */
    }
  }



/* DETAY SAYFASI TASARIMI */


.sol-blog-icerik {  
    background-color: #ffffff;
    margin-top: 7px;
    width: 100%;
    font-size: 17px;
    line-height: 1.6; /* Satır yüksekliği */
    color: var(--siyah-300, #374151);    
}
 
.sol-blog-icerik p {
    font-size: 18px !important; /* Test amaçlı !important ekleyin */
    text-align: justify !important; /* Sağa sola yay */
}

.sol-blog-icerik ul, ol {
    font-size: 18px !important;
    text-align: justify !important;
    padding-left: 30px !important; /* veya margin-left: 20px !important; */
}

@media (max-width: 768px) {  
    .sol-blog-icerik p,
    .sol-blog-icerik ul,
    .sol-blog-icerik ol {
      font-size: 16px !important; /* Mobilde okunabilirlik */
    }
  }

.sol-blog-icerik em {
    font-size: 18px !important;
    display: block;      /* Blok seviyesine çıkarır, böylece text-align çalışır */
    text-align: center;  /* Ortalar */
    font-style: italic;  /* Zaten em italik yapıyor ama burada da netleştirebilirsin */
}

/* Link stilleri */
.sol-blog-icerik a {
    text-decoration: none;
    color: #42ade7; /* Mavi link rengi */
    transition: color 0.3s ease; /* Renk geçiş efekti */
    font-weight: 700; /* Bold */
}

.sol-blog-icerik a:hover {
    color: #2a7aaf; /* Daha koyu mavi (hover rengi) */
    text-decoration: none; /* Alt çizgi olmayacak */
    font-weight: 700; 
}

.sol-blog-icerik h1 {
    font-size: 28px;
    margin-bottom: 7px;
    line-height: 1.3;
    color: #222 !important;;
}

.sol-blog-icerik h2 {
    font-size: 24px; 
    margin: 1.5em 0 0.8em;
    line-height: 1.3;
    color: #222;
}

.sol-blog-icerik h3 {
    font-size: 20px;  
    margin: 1.3em 0 0.7em;
    line-height: 1.3;
    color: #222;
}

@media (max-width: 768px) {

    .sol-blog-icerik {
        margin-top: 2px;
    }
    .sol-blog-icerik h1 {
        font-size: 21px; /* Mobilde daha küçük başlık boyutu */
    }
    .sol-blog-icerik h2 {
        font-size: 19px; /* Mobilde daha küçük başlık boyutu */
    }
    .sol-blog-icerik h3 {
        font-size: 18px; /* Mobilde daha küçük başlık boyutu */
    }
}

.sol-blog-resmi {
    width: 100%;   
}

.arama-sonucu{
    width: 100%;
    height: 30px;
    border:1px solid var(--b);   /* Daha açık bir renk */
    font-size: 1.2em;  /* Test amaçlı !important ekleyin */  
    margin: 16px auto;  /* üst-alt 16px, sağ-sol otomatik */
    background-color: #fff;
}

.mdi {  /* Kütüphaneden gelen iconlar */
    font-size: 16px;  /* İcon boyutunu ayarlamak için */
    margin-right: 5px; /* İcon ile metin arasındaki mesafeyi ayarlamak için */
}





/* Detay Sayfası - Sosyal Medya Paylaşım Butonları */
.sosyal-paylasim {
    margin: 30px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; }
     
.sosyal-paylasim span {
    font-weight: 700;
    margin-right: 10px;}

.sosyal-icon {
    padding: 8px 15px;
    border-radius: 4px;
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s; }

    .sosyal-icon.facebook { background: #3b5998; }
    .sosyal-icon.twitter { background: #1da1f2; }
    .sosyal-icon.linkedin { background: #0077b5; }
    .sosyal-icon.whatsapp { background: #25d366; }  
    
    






/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .sol-bolum-genel-container {
        padding: 15px;
        margin: 15px auto;
    }
    .uye-ol-buton {
        padding: 10px 20px;
    }
}




.sag-ana-cerceve {
  margin: 0 !important;           /* Sağ bölüme üstten margin eklemesini engelliyoruz */
  padding-top: 20px !important;   /* Üst kısmı düzenleyerek sağda aşırı boşluk oluşmasını engelliyoruz */
  padding-left: 20px !important;  /* Yatayda dengeyi sağlamak için sol padding ekliyoruz */
  padding-right: 20px !important; /* Aynı şekilde sağ padding de ekliyoruz */
  background-color: rgb(255, 255, 255) !important;
}



/* Bölüm çerçeveleri */
.sag-bolum-cerceve {
    background-color: #fff !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    border:1px solid var(--b);   
    box-shadow: 0 2px 5px rgba(233, 233, 233, 0.1) !important;
    border-radius: var(--radius); 
}




/* Başlıklar */
.sag-bolum-cerceve h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

/* Arama Kutusu */
.search-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;    
    font-size: 14px;
}


.sag-bolum-cerceve-post { 
  display: flex;
  align-items: flex-start;     /* Başlık resimle üstten hizalı */
  gap: 10px;                   /* RESİM–METİN arası boşluk buradan */
  margin-bottom: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--b);
  padding: 8px;
}



.sag-bolum-cerceve-resim {
  /* Kartın içindeki resme özel ayrı bir kutu */
  width: 120px;              /* HTML'deki width="120" ile aynı */
  flex: 0 0 120px;           /* sağ kolonda sabit kolon */
  aspect-ratio: 3 / 2;       /* dikdörtgen oran */
  border-radius: var(--radius);
  overflow: hidden;          /* radius'un gerçekten kırpması için */
  display: block;            /* güvenli kutulama */  
}

.sag-bolum-cerceve-resim > a {
  display: block;
  width: 100%;
  height: 100%;
}

.sag-bolum-cerceve-resim img {
  display: block;            /* baseline boşluğunu kaldırır */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* oran koru, taşanı kırp */
  border-radius: 0;          /* kırpma işini sarmalayıcı yapıyor */
}

.sag-bolum-cerceve-post-info {
    display: flex;
    flex-direction: column; /* Metin, tarih üstte, başlık altta olacak şekilde */
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;     /* kalan alanı kullan */
    min-width: 0;
}


.sag-bolum-cerceve-post-info h3 {
    
    line-height: 1.3;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
}

.sag-bolum-cerceve-post-info h3 a {
    display:block;
    text-decoration: none;
    color: #333;
}

.sag-bolum-cerceve-post-info h3 a:hover {
    color: #007bff; /* Link üzerine gelince renk değişimi */
}

/* Kategori Listesi */
ul.social.list {
    list-style: none;
    padding: 0;
}

ul.social.list li {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

ul.social.list li:last-child {
    border-bottom: none;
}

/* Kategori ikonu ve isim */
ul.social.list li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

ul.social.list li i {
    margin-right: 8px;
}

/* Kategori içindeki yazı sayısı */
ul.social.list li span:last-child {
    background-color: lightblue;
    color: white;
    padding: 3px 6px;
   
    font-size: 12px;
    margin-left: auto;
}

/* Sosyal Ağlar */
ul.social.list img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}


li.border {
	border-bottom:1px solid #e6e6e6;
}