/* HEADER KISMINI DÜZENLERKEN KULLANDIĞIM CSS KODLARI ............................................................................ */

.page-header {
  display: none;
}

.elementor-element.elementor-element-74cd87a.e-flex.e-con-boxed.e-con.e-parent {
  display: none;
}

/* 404 Sayfasında Footer alanını gizle */
body.error404 #site-footer {
    display: none;
}

.search-in-place .label {
    display: none !important;
}

/* BU KISIM ARCHIVE PHP ve SEARCH PHP SAYFALARININ CSS KODLARINI İÇERMEKTEDİR. ÇOK GEREKMEDİKÇE MÜDAHALE ETMEYİN...................................... */
/* Görsel ve Metin Arasında Boşluk */
.content-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

/* Görsel Stili */
.content-image {
    width: 400px;
    height: 200px; /* Masaüstü ve tablet görünümünde görsel yüksekliği */
    object-fit: cover;
    border-radius: 5px; /* Köşelerin oval görünümü */
    margin-right: 25px;
}

/* Başlık ve İçerik Metni Stili */
.content-text {
    flex: 1;
}

/* Başlık Stili */
.entry-title a {
    color: #4C668F;
    font-family: 'Urbanist', sans-serif;
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-title a:hover {
    color: #F46F27;
}

/* Başlık Font Boyutları */
@media (min-width: 1024px) {
    .entry-title {
        font-size: 19px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .entry-title {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .entry-title {
        font-size: 15px;
    }
}

/* İçerik Metin Rengi ve Font Boyutları */
.entry-content {
    color: #666666;
    font-family: 'Urbanist', sans-serif;
}

@media (min-width: 1024px) {
    .entry-content {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .entry-content {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .entry-content {
        font-size: 13px;
    }
}

/* "Devamını oku" bağlantısının yerleşimi ve responsive ölçüler */
.read-more {
    display: block;
    text-align: right;
    margin-top: 10px;
    color: #0073aa;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .read-more {
        font-size: 16px; /* Font boyutu */
        padding: 10px 15px; /* İç boşluklar */
    }

    .read-more:hover {
        text-decoration: underline; /* Hover efekti */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .read-more {
        font-size: 14px; /* Font boyutu */
        padding: 8px 12px; /* İç boşluklar */
    }

    .read-more:hover {
        text-decoration: underline; /* Hover efekti */
    }
}

@media (max-width: 767px) {
    .read-more {
        font-size: 12px; /* Font boyutu */
        padding: 6px 10px; /* İç boşluklar */
    }

    .read-more:hover {
        text-decoration: underline; /* Hover efekti */
    }
}

/* İçerik Kutuları Arası Mesafe */
.content-area article {
    border-bottom: 1px solid #F5F5F5; /* Çizgi rengi ve kalınlığı */
    padding-bottom: 25px; /* Opsiyonel: İçeriklerin altına boşluk ekler */
}

/* İçeriklerin Sayfadan 50px Aşağıda Başlaması */
.content-area {
    padding-top: 50px;
}

/* Responsive Stiller */
@media (max-width: 1023px) {
    .content-container {
        flex-direction: column;
    }

    .content-image {
        height: 200px; /* Tablet görünümünde görsel yüksekliği otomatik ayarlanacak */
        width: 100%;
    }
}

@media (max-width: 767px) {
    .content-image {
        width: 100%; /* Mobil görünümde görsel genişliği ekran genişliğine göre ayarlanacak */
        height: 150px; /* Mobil görünümünde görsel yüksekliği 150px */
        margin-right: 0; /* Mobilde sağa margin verme */
        margin-bottom: 10px; /* Mobilde alt boşluk ekleme */
    }

    .content-text {
        margin-top: 15px; /* Mobilde metnin üstüne boşluk ekleme */
    }
}

/* Arama sonuçlarının nasıl görüneceğini belirleyen bazı kodlar............................................................................. */
.page-content .post {
    margin-bottom: 30px;
    border-bottom: 1px solid #F5F5F5; /* Çizgi rengi ve kalınlığını ayarlayabilirsiniz */
    padding-bottom: 15px; /* Opsiyonel: İçeriklerin altına boşluk ekler */
}

.page-content .post:last-child {
    padding-bottom: 50px;
}

/* Arama Sonuçları Sayfasında Footer alanını gizle */
body.search #site-footer {
    display: none;
}

/* Archive.php ve Search.php dosyalarına eklediğim Pagination kodu için hazırladığım CSS kodu................................................. */
/* Archive.php ve Search.php dosyalarına eklediğim Pagination kodu için hazırladığım CSS kodu................................................. */
.navigation {
    text-align: center; /* Pagination'ı ortalamak için */
    margin-bottom: 50px; /* Alttan 50px boşluk */
    margin-top: 50px; /* Üstten 50px boşluk */
}

/* Tablet görünümünde boşluk değeri güncellemesi */
@media (min-width: 768px) and (max-width: 1023px) {
    .navigation {
        margin-bottom: 40px; /* Tablette alttan boşluk 40px */
        margin-top: 40px; /* Tablette üstten boşluk 40px */
    }
}

/* Mobil görünümünde boşluk değeri güncellemesi */
@media (max-width: 767px) {
    .navigation {
        margin-bottom: 30px; /* Mobilde alttan boşluk 30px */
        margin-top: 30px; /* Mobilde üstten boşluk 30px */
    }
}

/* Genel stiller */
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #FFFFFF; /* Yazı rengi */
    text-decoration: none;
    background-color: #4C668F; /* Butonların arkaplan rengi */
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}

/* Masaüstü görünümünde stiller */
@media (min-width: 1024px) {
    .navigation li a,
    .navigation li a:hover,
    .navigation li.active a,
    .navigation li.disabled {
        font-size: 16px; /* Font boyutu */
        padding: 12px 15px; /* İç boşluklar */
    }
}

/* Tablet görünümünde stiller */
@media (min-width: 768px) and (max-width: 1023px) {
    .navigation li a,
    .navigation li a:hover,
    .navigation li.active a,
    .navigation li.disabled {
        font-size: 14px; /* Font boyutu */
        padding: 10px 12px; /* İç boşluklar */
    }
}

/* Mobil görünümünde stiller */
@media (max-width: 767px) {
    .navigation li a,
    .navigation li a:hover,
    .navigation li.active a,
    .navigation li.disabled {
        font-size: 12px; /* Font boyutu */
        padding: 8px 10px; /* İç boşluklar */
    }
}

.navigation li {
    display: inline;
}

.navigation li a:hover {
    background-color: #F46F27; /* Hover efekti */
}

.navigation li.active a {
    background-color: #293D5E; /* Seçili olan alan */
}

.nav-previous,
.nav-next {
    display: none;
}


/* Kategori başlıkları için oluşturduğum PHP kod parçacığında yer alan yazıya ait CSS kodu ................................... */
.banner-category {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}

@media (max-width: 1024px) {
    .banner-category {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .banner-category {
        font-size: 17px;
    }
}

.category-name {
    font-weight: bold;
}

/* Arama sonuçları için oluşturduğum PHP kod parçacığında yer alan yazıya ait CSS kodu ..................................... */
.arama-sonuclari {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}

@media (max-width: 1024px) {
    .arama-sonuclari {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .arama-sonuclari {
        font-size: 17px;
    }
}

.arama-kelimesi {
    font-weight: bold;
}

/* Etiket başlıkları için oluşturduğum PHP kod parçacığında yer alan yazıya ait CSS kodu ..................................... */
.banner-tags {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}

/* Mobil uyumluluk */
@media (max-width: 1024px) {
    .banner-tags .tags-title {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .banner-tags .tags-title {
        font-size: 17px;
    }
}
@media (max-width: 1024px) {
    .banner-tags {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .banner-tags {
        font-size: 17px;
    }
}

.banner-tags .tags-title {
    font-weight: bold;
}

/* Genel site style css ayarları ..................................................................*/
a {
     color: #293D5E;
}

a:hover {
     color: #F46F27;
     text-decoration: none;
}

a:visited {
     color: #4C668F;
}


/* Liste işaretlerini kaldırma */
ul, ol {
     list-style-type: none; /* Liste işaretlerini kaldırır */
}

/* Alt listelerin hizalanmasını koruma */
ul ul, ul ol, ol ul, ol ol {
     list-style-type: none; /* Alt liste işaretlerini kaldırır */
}

/* Search In Place ile ilgili bazı görselleştirmeler ..................................................*/
.search-in-place {
		border-radius: 5px;
}

.search-in-place-close-icon {
  display: none; /* Varsayılan olarak gizli */
}

/* Etiketi yazıda gizleyen kod ..................................................*/
.post-tags {
    display: none;
}

/* Custon-Tag ismini verdiğim, her sayfanın sadece kendi etiketlerini listeleyen kodun görünümünü ayarlıyor ..................................................*/
.custom-tag-list {
    list-style: none;
    padding: 0;
}

.custom-tag-item {
    display: inline-block;
    margin: 2px;
    padding: 5px 10px;
    border: 1px solid #DFDFDF;
    border-radius: 3px;
    color: #4C668F;
    font-size: 13px; /* Yazı boyutu */
    font-family: "Urbanist", sans-serif; /* Yazı tipi */
    text-decoration: none;
    transition: all 0.3s ease;
}

.custom-tag-item:hover {
    background-color: #4C668F;
    color: #FFFFFF;
    border-color: #4C668F;
}

.custom-tag-item a {
    color: inherit;
    text-decoration: none;
}

.custom-tag-item a:hover {
    color: #FFFFFF;
    text-decoration: none;
}