/* detail sayfası */
.detail-image {
    max-width: 100%; /* Resmin genişliği main içindeki alanı aşmayacak */
    height: auto; /* Yükseklik otomatik olarak ayarlanacak */
    display: block; /* Resmin altında boşluk oluşmasını engeller */
    margin: 0 auto; /* Resmi ortalar */
	border-radius: 4px;
}

.detail-content {
    margin-top: 10px; /* Resim ile etiketler arasında boşluk bırakır */
	margin-bottom: 15px;
    font-size: 15px; /* Etiketlerin yazı boyutu */
    color: #555; /* Etiketlerin rengi */
    font-style:normal; /* İsteğe bağlı: Etiketleri italik yapar */
	line-height: 1.7;
	}
	
	.topic-label {
    display: inline-block; /* Kutunun satır içinde blok olmasını sağlar */
    background-color: green; /* Arka plan rengi */
    color: white; /* Yazı rengi */
    padding: 5px 10px; /* İç boşluk */
    border-radius: 2px; /* Köşeleri yuvarlak yapar */
    margin-right: 10px; /* Başlık ile arasında boşluk bırakır */
    font-size: 14px; /* Yazı boyutu */
    font-weight: bold; /* Yazıyı kalın yapar */
}

	.tag-baslik-label {
    display: inline-block; /* Kutunun satır içinde blok olmasını sağlar */
    background-color: dodgerblue; /* Arka plan rengi */
    color: white; /* Yazı rengi */
    padding: 5px 10px; /* İç boşluk */
    border-radius: 2px; /* Köşeleri yuvarlak yapar */
    margin-right: 10px; /* Başlık ile arasında boşluk bırakır */
    font-size: 14px; /* Yazı boyutu */
    font-weight: bold; /* Yazıyı kalın yapar */
}


		
        /* Etiketler için stil */
        .tag-links {
            margin-top: 10px;
			margin-bottom: 15px;
        }
        .tag-links a {
            display: inline-block;
            margin-right: 5px;
			margin-bottom:8px;
            padding:8px;
            background-color:ghostwhite;
            color: #333;
            text-decoration: none;
            border-radius: 2px;
            font-size: 14px;
        }
        .tag-links a:hover {
            background-color: #ddd;
        }
        .tag-baslik-label {
            display: inline-block;
            background-color: #1D50C8;
            color: white;
            padding: 5px 10px;
            border-radius: 2px;
            margin-right: 10px;
            font-size: 14px;
            font-weight: bold;
        }
	 


/* istatistik kismi */
				.istatistik {margin-bottom: 15px ; padding: 6px ; border-radius:2px ; font-style: italic; font-size: 13px; color: #999 ; text-align: right;}
				@media (max-width: 768px) { .istatistik { text-align: center;}}


				
/* div2x stili */
.div2x {
    display: flex;
    gap: 10px; /* Div'ler arası boşluk */
	    padding: 2px;
	padding-top: 10px;
    flex-wrap: wrap; /* Mobilde alt alta gelsin */
}

/* Box stil */
.box {
    flex: 1; /* Eşit genişlikte olacaklar */
    min-width: 200px; /* Minimum genişlik */
    padding: 5px;
    background-color: #fff;
    border: 0px solid #EDEDED;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
	overflow: hidden;
}

/* Mobil cihazlar için stil */
@media (max-width: 768px) {
    .box {
        flex: 100%; /* Mobilde tam genişlik */
    }
}


/* Önceki ve Sonraki Butonları */
.nextprevious {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    width: 100%; /* Butonların genişliği main div'inin genişliğini aşmasın */
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil et */
}

.nextprevious a {
    flex: 1; /* Butonların eşit genişlikte olmasını sağla */
    text-align: center;
    padding: 15px;
    background-color: #ECE7E7;
    color: #555;
    text-decoration: none;
    border-radius: 2px;
    font-size: 16px;
    transition: background-color 0.3s;
    pointer-events: auto; /* Butonların tıklanabilir olması için */
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil et */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nextprevious a:hover {
    background-color: #555;
    color:white;
	
}

.nextprevious a i {
    margin-bottom: 10px; /* İkon ile başlık arasında boşluk */
}

.nextprevious a span {
    font-size: 14px; /* Başlık yazı boyutu */
    margin-top: 5px; /* Buton ile başlık arasında boşluk */
    color:#322F2F; /* Başlık rengi */
    font-weight: bold; /* Başlık kalın olsun */
}

/* Eğer önceki veya sonraki başlık yoksa buton pasif görünsün */
.nextprevious a[href="#"] {
    background-color: #fff;
    cursor: not-allowed;
}

/* Mobil cihazlar için stil */
@media (max-width: 768px) {
    .nextprevious {
        flex-direction: column;
        gap: 10px;
    }
    .nextprevious a {
        width: 100%; /* Mobilde tam genişlik */
    }
}			
			



/* similar post  */

    .similar-topics {
        margin-top: 20px;
    }

    .similar-topics h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
    }

    .similar-topics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);/* 4 li grup */
        gap: 15px;
    }

    .similar-topic {
        background-color: #f9f9f9;
        border-radius: 4px;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .similar-topic a {
        text-decoration: none;
        color: #333;
        display: block;
    }

    .similar-topic img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 4px 4px 0 0;
    }

    .similar-topic span {
        display: block;
        padding: 10px;
        font-size: 14px;
        color: #1D50C8;
    }

    .similar-topic a:hover {
        background-color: #f1f1f1;
    }

    @media (max-width: 768px) {
        .similar-topics-grid {
            display: grid;
        grid-template-columns: repeat(2, 1fr);/* 4 li grup */
        gap: 15px;
        }
    }