/* Theme Name: Warning Tema 
Theme URI: www.Cinselchat.net.tr
Author: Forbidden
Author URI: Geliştirici Web Sayfası
Description: Warning Teması
Version: v1 */


body {
    font-family: Arial, sans-serif;
	margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
	background-color: #f5f5f5; 
    color: #333; 
}

.kenarlik {
	border-radius: 10px;
}
.renk-1 {
	background: #e7ee04;
}
.renk-2 {
	background: #c51212;
}
.renk-3 {
	background: #41a5ff;
}
.arkaplan {
	background-image: url("image/Arkaplanfrb.webp");
	background-repeat: no-repeat;
	background-size: cover;
}
.sohbet {
	margin: auto;
	border-radius: 10px;
}
.bg-dark-new {
	background: #fdfffd;
}
.bg-warning-active {
	background: #dee502;
}
.bg-dark-slow {
	background: #343a408f;
}
.bg-dark-slow:hover {
	opacity: 0.5;
	background: black;
}
.bg-dark-slow li:hover {
	opacity: 0.8;
}
.blogmetin {
	padding-bottom: 5px;
	color:white;
	border: 2px solid #ffc107;
	border-radius: 1px 1px 10px 1px;
	transition: all 0.5s ease;
}
.blogmetin:hover {
	opacity: 0.8;
	background: #fdfffd;
}
.ftrs {
	margin-top: 30px;
}
.sayfalar ul li {
	padding-left: 15px;
	color: #289e58;
	font-size: 20px;
	list-style-type: none;
	text-decoration: none;
}
.sayfalar ul li a {
	color: #ffc107;
	text-decoration: none;
}
.ellipsis p {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* kaç satırla sınırlayacağımızı yazıyoruz */
	-webkit-box-orient: vertical;
}
.altsayfa {
	color: white;
	list-style-type: none;
}
.altsayfa ul li {
	margin-bottom: 3px;
	text-decoration: none;
}
.altsayfa a {
	color: white;
	text-decoration: none;
}
.yorum {
	color:#ffc107;
}
.yorum li {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid black;
	list-style-type: none;
	border-radius: 5px;
}
.yorum textarea {
	width: 100%;
	border-radius: 5px;
}
.yorum input[type=text] {
	width: 100%;
	border-radius: 5px;
}
.yorum input[type=submit] {
	background: #ffc107;
	width: 150px;
	border-radius: 10px;
}
.sayfabaslik {
	font-size:50px;
	border: 1px solid #ffc107;
	border-radius: 10px;
	margin-top: 10px;
}

.sosyal {
	width: 60px;
	list-style-type: none;
	display: inline;
	align-items: center;
	margin: 10px;
	padding: 10px;
	border: 1px solid #1378dd8f;
	border-radius: 300px;
	background: white;
   transition: all 0.1s ease;
}
.sosyal:hover {
	background: black;
	color: #ffc107;
}
.ilerigeri {
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #ffc107;
	border-radius: 10px;
}
.ilerigeri a {
	color: white;
	text-decoration: none;
}
.ilerigeri a:hover {
	color: #ffc107;
	text-decoration: none;
}
.comment-form-url {
	display: none;
}
.comment-body .fn {
	color: #007bff
}


/* Blog makale öğesi düzenlemeleri */
.blog-item {
    display: flex;
    flex-direction: row; /* Resim ve içeriği yatayda hizalar */
    align-items: flex-start; /* Üst hizalama */
    margin-bottom: 20px; /* Alt boşluk */
    background-color: #343a40; /* Arka plan rengi */
    border-radius: 8px; /* Köşe yuvarlaklığı */
    overflow: hidden; /* Taşan içeriği gizle */
    padding: 15px; /* İç boşluk */
    border: 3px solid #ffc107; /* Sarı çerçeve */
    position: relative; /* Çizgi için konumlandırma */
}

/* Blog resmi düzenlemeleri */
.blog-image {
    flex: 0 0 25%; /* Resmin genişliği %25 */
    margin-right: 15px; /* Sağ boşluk */
    border-right: 3px solid #ffc107; /* Çizgi genişliği */
    padding-right: 15px; /* Resim ve çizgi arasında boşluk */
}

.blog-image img {
    width: 100%; /* Resim genişliği */
    height: auto; /* Resim yüksekliği otomatik */
    max-height: 200px; /* Maksimum yükseklik */
    object-fit: cover; /* Resmi kutu içinde kaplamak için */
    border-radius: 5px; /* Resim köşe yuvarlaklığı */
}

/* Blog içerik düzenlemeleri */
.blog-content {
    flex: 1; /* İçeriğin kalan alanı kaplamasını sağlar */
    display: flex;
    flex-direction: column; /* İçeriği dikey hizalar */
    justify-content: space-between; /* İçerik arasında boşluk bırakır */
}

/* Başlık düzenlemeleri */
.blog-content h2 {
    font-size: 22px; /* Başlık boyutu */
    color: #ffc107; /* Başlık rengini sarı yapar */
    margin: 0 0 10px 0; /* Alt margin */
}

/* Başlık link düzenlemeleri */
.blog-content h2 a {
    color: #ffc107; /* Başlık link rengini sarı yapar */
    text-decoration: none; /* Alt çizgi yok */
}

.blog-content h2 a:hover {
    text-decoration: underline; /* Üzerine gelindiğinde altı çizili olur */
}

/* Özet metni düzenlemeleri */
.blog-content .excerpt {
    color: #ffffff; /* Özet metin rengi */
    background-color: rgba(0, 0, 0, 0.5); /* Özet arka plan rengi */
    padding: 10px; /* İç boşluk */
    border-radius: 5px; /* Köşe yuvarlaklığı */
    margin-bottom: 10px; /* Alt boşluk */
    flex: 1; /* Yüksekliği özet içeriğine göre uyumlu */
}

/* Devamını Oku bağlantısı düzenlemeleri */
.read-more {
    display: block;
    width: fit-content; /* İçeriğe uyacak şekilde genişlik */
    margin: 0; /* Sağ ve sol boşlukları kaldırır */
    padding: 10px 20px; /* İç boşluk */
    background-color: #ffc107; /* Arka plan rengi sarı */
    color: #343a40; /* Yazı rengi siyah */
    text-decoration: none; /* Alt çizgi yok */
    font-weight: bold; /* Kalın font */
    border-radius: 5px; /* Köşe yuvarlaklığı */
    text-align: center; /* Metin ortalama */
}

.read-more:hover {
    background-color: #e0a800; /* Hover durumunda buton arka plan rengini koyulaştırma */
    color: #343a40; /* Hover durumunda yazı rengi değişmemeli */
    text-decoration: none; /* Alt çizgi yok */
}

/* Bilgisayar görünümde butonu sola hizala */
@media (min-width: 768px) {
    .read-more {
        align-self: flex-start; /* Sol tarafa hizalar */
    }
}

/* Mobil görünüm düzenlemeleri */
@media (max-width: 767px) {
    .blog-item {
        flex-direction: column; /* Mobilde içerik dikey olarak hizalanır */
        border: 3px solid #ffc107; /* Sarı çerçeve */
        border-radius: 10px; /* Köşe yuvarlaklığı */
        padding: 15px; /* İç boşluk */
    }

    .blog-image {
        display: none; /* Mobilde resmi gizler */
    }

    .blog-content {
        text-align: center; /* Mobilde içerikleri ortalar */
    }

    .blog-content h2 {
        font-size: 18px; /* Mobilde başlık boyutunu küçültür */
    }

    .blog-content .excerpt {
        font-size: 14px; /* Mobilde özet metin boyutunu küçültür */
    }

    .read-more {
        font-size: 14px; /* Mobilde "Devamını Oku" bağlantı boyutunu küçültür */
        margin: 0 auto; /* Ortalamak için */
        align-self: center; /* Mobilde ortalamak için */
    }
}


/* Navbar üst menü bölümü */
/* Varsayılan Stil */
.navbar-brand {
    font-size: 1.8rem; /* Varsayılan font boyutu */
    letter-spacing: 2px; /* Harf aralığı */
    font-weight: 600; /* Font ağırlığı */
    white-space: nowrap; /* Metni tek satırda tutar */
    overflow: hidden; /* Taşan metinleri gizler */
}

/* Küçük ekranlar (Telefonlar) */
@media (max-width: 320px) {
    .navbar-brand {
        font-size: 1.2rem; /* Daha küçük font boyutu */
    }
}

/* Orta ekranlar (Tabletler) */
@media (max-width: 414px) {
    .navbar-brand {
        font-size: 1.4rem; /* Orta font boyutu */
    }
}

/* Büyük ekranlar (Genel bilgisayar ekranları) */
@media (min-width: 769px) {
    .navbar-brand {
        font-size: 1.8rem; /* Daha büyük font boyutu */
    }
}

/* Esnetme ve Fırlatma Animasyonu */
@keyframes rubberBand {
    0% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    50% {
        transform: scaleX(1.15) scaleY(1.15);
    }
    100% {
        transform: scaleX(1) scaleY(1);
    }
}

/* Animasyonu Uygulama */
.logo {
    animation: rubberBand 1s ease;
    font-size: 1.5rem; /* İstediğiniz font boyutunu ayarlayın */
    letter-spacing: 2px; /* Harf aralığını ayarlayın */
    font-weight: 600; /* Font ağırlığını ayarlayın */
    white-space: nowrap; /* Metni tek satırda tutar */
    overflow: hidden; /* Taşan metinleri gizler */
}

/* Genel Stil */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Footer sarı çerçeve düzenlemeleri */
.footer-wrapper {
    border: 3px solid #ffc107;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    background-color: #343a40;
}

/* Footer içindeki container düzenlemeleri */
.footer-wrapper .container {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Footer içindeki satır düzenlemeleri */
.footer-wrapper .row {
    margin: 0;
}

/* Footer başlık düzenlemeleri */
.footer-wrapper h4 {
    color: #ffc107;
    font-size: 25px;
    margin: 0 0 15px 0;
}

/* Sarı çizgi düzenlemeleri */
.footer-wrapper .yellow-line {
    border: 1px solid #ffc107;
    width: 50%;
    margin: 10px auto;
}

/* Sosyal medya ve alt sayfa linkleri düzenlemeleri */
.footer-wrapper .altsayfa,
.footer-wrapper .sosyal-medya {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-wrapper .altsayfa li,
.footer-wrapper .sosyal-medya li {
    margin-bottom: 10px;
}

.footer-wrapper .altsayfa a,
.footer-wrapper .sosyal-medya a {
    color: #ffc107;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.footer-wrapper .altsayfa a:hover,
.footer-wrapper .sosyal-medya a:hover {
    color: #ffffff;
}

/* Footer altındaki küçük yazı düzenlemeleri */
.footer-bottom {
    text-align: center;
    margin-top: 20px;
}

.footer-bottom .bottom-line {
    border: 1px solid #ffc107;
    width: 100%;
    margin: 10px auto;
}

.footer-bottom .footer-copyright {
    font-size: 14px;
    color: #ffc107;
    font-weight: bold;
    margin-top: 10px;
}

/* Mobil düzenlemeleri */
@media (max-width: 767px) {
    .footer-wrapper .row {
        text-align: center;
    }
    .footer-wrapper h4 {
        margin: 0 auto 15px;
    }
}

/* Genel Stil */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Chat Girişi Stilleri */
.sohbet {
    border: 3px solid #ffc107; /* Sarı çerçeve */
    border-radius: 10px; /* Kenarları yuvarlat */
    padding: 20px;
    background-color: #343a40; /* Arka plan rengi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Hafif gölge */
}

.sohbet .form-control {
    border-radius: 5px; /* Input ve password alanlarının kenarlarını yuvarlat */
    border: 1px solid #ffc107; /* Sarı kenarlık */
    background-color: #ffffff; /* Arka plan rengi beyaz */
    color: #000000; /* Yazı rengi siyah */
}

.sohbet .form-control::placeholder {
    color: #000000; /* Placeholder yazısının rengi siyah */
}

.sohbet .btn-warning {
    background-color: #ffc107; /* Sarı arka plan rengi */
    border-color: #ffc107; /* Sarı kenarlık */
    color: #343a40; /* Buton üzerindeki yazının rengi */
    font-size: 20px; /* Yazı boyutu */
    padding: 15px; /* Buton içi boşluk */
    font-weight: bold; /* Yazıyı belirginleştirmek için kalın yapalım */
    text-transform: uppercase; /* Yazıları büyük harfe çevirir */
}

.sohbet .btn-warning:hover {
    background-color: #e0a800; /* Hover durumunda daha koyu sarı */
    border-color: #e0a800; /* Hover durumunda daha koyu sarı kenarlık */
}

.sohbet .btn-light {
    background-color: #ffffff; /* App Store butonunun arka plan rengi */
    border-color: #cccccc; /* App Store butonunun kenarlık rengi */
    color: #343a40; /* Buton üzerindeki yazının rengi */
    font-size: 18px; /* Yazı boyutu */
    padding: 12px; /* Buton içi boşluk */
    font-weight: bold; /* Yazıyı belirginleştirmek için kalın yapalım */
    text-transform: uppercase; /* Yazıları büyük harfe çevirir */
}

.sohbet .btn-light:hover {
    background-color: #f8f9fa; /* Hover durumunda daha açık renk */
    border-color: #bfc1c3; /* Hover durumunda daha açık kenarlık */
}

.sohbet img {
    max-width: 100%; /* Resmi kapsayıcıya sığdır */
}

/* Mobil stil ayarları */
@media (max-width: 768px) {
    .sohbet .btn-warning,
    .sohbet .btn-light {
        width: calc(100% - 20px); /* Buton genişliğini kapsayıcıdan biraz küçük yapar */
        font-size: 18px; /* Yazı boyutunu küçült */
        padding: 12px; /* Buton içi boşluk */
        margin: 10px 0; /* Butonlar arasındaki boşluk */
        display: block; /* Butonları alt alta getirir */
        box-sizing: border-box; /* Butonların genişliğini hesaplamada kenarlık ve paddingi de dahil eder */
    }

    .sohbet .btn-light {
        font-size: 16px; /* Mobilde daha küçük yazı boyutu */
        padding: 10px; /* Mobilde daha küçük buton içi boşluk */
    }
}












/* Çerçeve içindeki bölüm için özel stil ayarları */
.special-section {
    background-color: #343A40; /* Çerçevenin arka plan rengi siyahımsı gri */
    padding: 20px;
    border: 2px solid #f1c40f; /* Çerçevenin rengi sarı */
    margin: 0 auto;
    width: calc(100% - 2cm); /* Sağdan ve soldan 1 cm kısaltma */
}

/* Mobilde çerçeve görünmesin */
@media (max-width: 768px) {
    .special-section {
        display: none; /* Mobilde çerçeve görünmemesi için gizle */
    }
}

/* Çerçeve içindeki başlık ve yazılar için stil ayarları */
.special-section h1, .special-section h2, .special-section h3 {
    color: #ffc107; /* Başlıkların yazı rengi sarı */
    text-align: center; /* Başlıkların ortalanması */
    margin-top: 0;
}

.special-section h1 {
    font-size: 2.5em; /* Büyük başlık boyutu */
}

.special-section h2 {
    font-size: 2em; /* Orta boy başlık boyutu */
}

.special-section h3 {
    font-size: 1.5em; /* Küçük başlık boyutu */
}

.special-section p {
    color: #ffffff; /* Çerçeve içindeki yazı rengi beyaz */
    font-size: 1em; /* Yazı boyutu */
    line-height: 1.6; /* Satır yüksekliği */
    margin: 0 0 1em; /* Alt boşluk */
}

/* Blog sayfası özetleri için stil ayarları */
.blog-summary {
    background-color: #000; /* Özetteki arka plan rengi siyah */
    color: #fff; /* Özetteki yazının rengi beyaz */
    padding: 10px; /* İç boşluk */
    border-radius: 5px; /* Köşe yuvarlama */
    margin: 10px 0; /* Üst ve alt boşluk */
}

/* Blog özetlerinin görünümünü etkileyen özel CSS */
.blog-summary p {
    color: #fff; /* Blog özetindeki yazı rengi beyaz */
    background-color: #000; /* Blog özetindeki arka plan rengi siyah */
}

/* Kenar boşluklarının ana tema renginde kalması için stil ayarları */


/* Genel Stil Ayarları */



.special-section-container {
    background-color: #f5f5f5; /* Çerçeve dışı kenar boşluğu rengini ana temaya uygun yap */
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    .special-section {
        width: calc(100% - 1cm); /* Mobilde sağdan ve soldan 0.5 cm kısaltma */
        padding: 15px; /* Daha küçük padding */
    }
}

@media (max-width: 576px) {
    .special-section h1, .special-section h2, .special-section h3 {
        font-size: 1.2em; /* Mobilde başlık boyutlarını küçült */
    }
}


/* Gri arka plan çerçevesi */
.icerik-kenarlik {
    border: 2px solid #f7c636; /* Sarı renkli çerçeve */
    padding: 15px; /* İçerik ile çerçeve arasındaki boşluk */
    margin: 10px auto; /* Çerçeveyi ortalamak için margin */
    border-radius: 8px; /* Köşeleri yuvarlamak için */
    background-color: transparent; /* Arka plan rengini kaldırdık */
}

/* Çerçeve içindeki yazılar */
.custom-frame {
    border: 2px solid #f7c636; /* Sarı renkli çerçeve */
    padding: 15px; /* İçerik ile çerçeve arasındaki boşluk */
    border-radius: 8px; /* Köşeleri yuvarlamak için */
    background-color: #343A40; /* Gri arka plan */
    color: #fff; /* Beyaz yazı rengi */
    margin: 10px; /* Çerçeveler arasına boşluk ekle */
}

/* Başlık ve yazı renklerini kontrol edelim */
.custom-frame h2, .custom-frame h3 {
    color: #ffc107; /* Sarı renk */
}
.custom-frame p {
    color: #fff; /* Beyaz yazı rengi */
}

/* Footer ve navbar etkisini kaldırmak için genel stil */
footer, nav {
    background-color: initial !important;
    color: initial !important;
}

/* Çerçeveler arasına boşluk eklemek için */
.custom-frame {
    margin-bottom: 20px; /* Alt tarafa boşluk ekle */
}












/* Kategori makale öğesi düzenlemeleri */
.category-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 20px;
    background-color: #343a40;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px;
    border: 3px solid #ffc107;
    position: relative;
}

/* Kategori resmi düzenlemeleri */
.category-image {
    flex: 0 0 25%;
    margin-right: 10px;
    border-right: 3px solid #ffc107;
    padding-right: 10px;
}

.category-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

/* Kategori içerik düzenlemeleri */
.category-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Başlık düzenlemeleri */
.category-content h2 {
    font-size: 22px;
    color: #ffc107;
    margin: 0 0 10px 0;
}

.category-content h2 a {
    color: #ffc107;
    text-decoration: none;
}

.category-content h2 a:hover {
    text-decoration: underline;
}

/* Özet metni düzenlemeleri */
.category-content .excerpt {
    color: #ffffff;
    background-color: #1a1d20;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    flex: 1;
}

/* Devamını Oku bağlantısı düzenlemeleri */
.read-more, .btn-custom {
    display: block;
    width: fit-content;
    padding: 10px 20px;
    background-color: #ffc107;
    color: #343a40;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Solma efekti için */
.btn-custom:hover {
    background-color: #e0a800;
    color: #343a40;
}

/* Bilgisayar görünümde Devamını Oku butonunu sola almak */
.category-content .read-more {
    align-self: flex-start; /* Sola hizalar */
}

/* Bilgisayar görünümde sayfalama butonlarını ortalama */
@media (min-width: 768px) {
    .pagination {
        display: flex;
        justify-content: center; /* Butonları yatay olarak ortalar */
        margin: 20px 0;
        width: 100%; /* Kapsayıcının genişliğini tam olarak kullanır */
        box-sizing: border-box; /* Padding ve border genişlik hesaplamalarına dahil edilir */
    }

    .pagination .btn-prev,
    .pagination .btn-next {
        margin: 0 10px; /* Butonlar arasında boşluk bırakır */
    }
}

/* Mobil görünüm düzenlemeleri */
@media (max-width: 767px) {
    .category-item {
        flex-direction: column;
        border: 3px solid #ffc107;
        border-radius: 10px;
        padding: 15px;
    }

    .category-image {
        display: none;
    }

    .category-content {
        text-align: center;
    }

    .category-content h2 {
        font-size: 18px;
    }

    .category-content .excerpt {
        font-size: 14px;
    }

    .read-more {
        font-size: 14px;
        margin: 10px auto;
    }

    .pagination {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin: 20px 0;
    }

    .pagination .btn-custom {
        margin: 0 10px;
    }

    .pagination .btn-prev,
    .pagination .btn-next {
        display: inline-block;
    }
}

/* Sayfalama numaralarını gizleme */
.page-numbers {
    display: none;
}


.single-post-wrapper {
    position: relative;
    margin-top: 0px; /* İlk olarak sıfırla */
    padding-top: 19px; /* Alternatif olarak padding ile yukarı boşluk ekle */
}

/* Kategori Başlığı Rengi ve Boyutu */
.category-header {
    display: flex;
    align-items: center;       /* Simge ve başlığı dikeyde ortala */
    justify-content: center;   /* Ortala */
    gap: 8px;                  /* Simge ile başlık arasında boşluk */
}

.category-header h1 {
    color: #d32f2f;            /* Başlık rengi */
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}
.category-header .category-subtext {
    color: #d32f2f;       /* H1 ile aynı renk */
    font-size: 36px;      /* H1 ile aynı boyut */
    font-weight: bold;    /* H1 ile aynı kalınlık */
    margin: 0;            /* Üst ve alt boşluk kaldırıldı */
    display: inline-flex; /* Flex içinde h1 ile aynı satırda kalmasını sağlar */
    align-items: center;  /* Dikey ortalama */
}

.category-header .category-icon .material-icons {
    font-size: 36px;           /* Simge boyutu */
    color: #d32f2f;            /* Simge rengi */
    vertical-align: middle;
}

/* Mobil Görünüm Düzenlemeleri */
@media (max-width: 767px) {
    .category-header {
        flex-direction: row;        
        justify-content: center;    
        gap: 5px;                   
    }

    .category-header h1,
    .category-header .category-subtext {
        font-size: 28px;            /* Mobilde aynı boyuta düşürüldü */
        margin: 0;                  
    }

    .category-header .category-icon .material-icons {
        font-size: 28px;            
    }

    .category-header .category-subtext {
        display: inline-flex;       
        align-items: center;        
    }
}



/* Navbar Stil */
.navbar {
    padding: 0;
    margin: 0;
}

.navbar .container {
    padding: 0 15px;
}

.navbar-brand,
.navbar-nav .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    color: #ffffff;
}

.navbar-nav .nav-link:hover {
    color: #ffc107;
}
/* Menü bağlantıları */
.navbar-nav a {
    color: #ffc107; /* Yazı rengi beyaz */
    text-decoration: none; /* Alt çizgi yok */
    font-size: 18px; /* Font boyutu */
    font-weight: 600; /* Yazı kalınlığı */
    transition: color 0.3s, opacity 0.3s; /* Renk ve opasite geçişi */
}

.navbar-nav a:hover {
    color: #ffc107; /* Sönük sarı renk */
    opacity: 0.7; /* Üzerine gelindiğinde yazı sönükleşir */
}


/* Yazı içindeki başlıkların sarı olması ve boyutlarının ayarlanması */
.post-content-wrapper h1,
.post-content-wrapper h2,
.post-content-wrapper h3,
.post-content-wrapper h4,
.post-content-wrapper h5,
.post-content-wrapper h6,
.page-content-wrapper h1,
.page-content-wrapper h2,
.page-content-wrapper h3,
.page-content-wrapper h4,
.page-content-wrapper h5,
.page-content-wrapper h6 {
    color: #ffc107; /* Sarı renk */
}

/* Mobil cihazlar için başlık boyutları */
@media (max-width: 768px) {
  .post-content-wrapper h1,
  .page-content-wrapper h1 {
    font-size: 2rem;
  }
  .post-content-wrapper h2,
  .page-content-wrapper h2 {
    font-size: 1.75rem;
  }
  .post-content-wrapper h3,
  .page-content-wrapper h3 {
    font-size: 1.50rem;
  }
  .post-content-wrapper h4,
  .page-content-wrapper h4 {
    font-size: 1.25rem;
  }
  .post-content-wrapper h5,
  .page-content-wrapper h5 {
    font-size: 1.05rem;
  }
  .post-content-wrapper h6,
  .page-content-wrapper h6 {
    font-size: 1rem;
  }
}

/* Tablet ve büyük ekranlar için başlık boyutları */
@media (min-width: 769px) {
  .post-content-wrapper h1,
  .page-content-wrapper h1 {
    font-size: 2.5rem;
  }
  .post-content-wrapper h2,
  .page-content-wrapper h2 {
    font-size: 2rem;
  }
  .post-content-wrapper h3,
  .page-content-wrapper h3 {
    font-size: 1.75rem;
  }
  .post-content-wrapper h4,
  .page-content-wrapper h4 {
    font-size: 1.5rem;
  }
  .post-content-wrapper h5,
  .page-content-wrapper h5 {
    font-size: 1.25rem;
  }
  .post-content-wrapper h6,
  .page-content-wrapper h6 {
    font-size: 1rem;
  }
}


/* Yazı ve sayfa içeriği için genel stiller */
.post-content-wrapper,
.page-content-wrapper {
    border: 3px solid #ffc107;
    padding: 15px;
    background-color: #343a40;
    color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%; /* Maksimum genişlik %100 olarak ayarlandı */
    margin: 0 auto;
}

.single-post-wrapper {
    position: relative;
    margin-top: 0px; /* İlk olarak sıfırla */
    padding-top: 19px; /* Alternatif olarak padding ile yukarı boşluk ekle */
}



/* Bilgisayar görünümünde padding ve boşluk ayarları */
@media (min-width: 992px) {
    .post-content-wrapper,
    .page-content-wrapper {
        max-width: 1000px; /* Bilgisayarda çerçeve genişliği eski hali */
        margin-top: 0; /* Üst boşluk */
        margin-bottom: 40px; /* Alt boşluk */
    }

    .blog-section {
        margin-top: 0; /* 'Son Yazılar' çerçevesinin üst boşluğunu kaldır */
    }
}

/* Blog'dan Kareler bölümü */
.blog-section {
    border: 3px solid #ffc107;
    background-color: #343a40;
    padding: 15px;
    margin: 20px 0;
    color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

/* Blog'dan Kareler içindeki çizgiler */
.section-divider {
    border: none;
    height: 3px;
    background-color: #ffffff;
    margin: 10px 0;
}

/* Blog'dan Kareler başlıkları */
.section-heading {
    font-size: 1.75rem; /* Hedef boyut */
    font-weight: bold;  /* Kalınlık */
    color: #ffc107;
}

/* Blog'dan Kareler başlıkları */
.post-title a {
	font-size: 1.4rem; /* Hedef boyut */
    color: #ffffff;
    text-decoration: none;
}

.post-title a:hover {
    text-decoration: underline;
}

/* Post thumbnail'ı gizleme */
.post-thumbnail {
    display: none;
}

/* Yorumlar bölümü */
.comment-section {
    border: 3px solid #ffc107;
    padding: 15px;
    background-color: #343a40;
    color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 20px 0;
    width: 100%;
    overflow: hidden;
}

/* Yorum formu */
.comment-form {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: none;
    padding: 0;
}

/* E-posta ve yorum alanlarının görünümü */
.comment-form input[type="email"],
.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

/* Yorum Gönder Butonu */
.comment-form input[type="submit"] {
    background-color: #ffc107;
    color: #000000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0 auto;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
}

.comment-form input[type="submit"]:hover {
    background-color: #e0a800;
}

/* Sayfa ve Blog Kareler hizalama */
.container {
    padding: 20px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

/* Okunma Sayısı Stili */
.post-meta .fa-eye::after {
   /* content: " Okunma"; */
}

/* Post Meta Bilgilerini Ortalama (PC) */
@media (min-width: 992px) {
    .post-meta {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

/* Post Meta Bilgilerini Solda Hizala (Mobil) */
@media (max-width: 991px) {
    .post-meta {
        text-align: left;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}


.post-meta .tag-links {
    display: inline; /* Etiketleri tek satırda hizalar */
    color: #ffffff !important; /* Etiketlerin beyaz renkte olması */
}

/* Etiket bağlantılarının beyaz olması ve alt çizgi ekleme */
.post-meta .tag-links a {
    color: #ffffff !important;
    text-decoration: none; /* Alt çizgiyi kaldır */
}

/* Etiketlere hover (üstüne gelince) efekti ekleyerek alt çizgi eklemek */
.post-meta .tag-links a:hover {
    text-decoration: underline; /* Üstüne gelince alt çizgi ekle */
}

/* Etiketler yoksa, gizle */
.post-meta .tag-links:empty {
    display: none !important; /* Etiket yoksa, alanı gizle */
}




/* Yorumlar Başlıkları */
.comment-respond h3 {
    margin-top: 0;
}

/* Mobil Görünüm */
@media (max-width: 768px) {
    .container {
        padding: 0; /* Mobilde padding kaldırıldı */
    }

    .post-content-wrapper,
    .page-content-wrapper,
    .blog-section,
    .comment-section {
        padding: 15px; /* Mobilde padding */
        margin: 20px 0; /* Mobilde üst ve alt boşluk */
        width: 100%; /* Ekrana tam uyum sağlama */
        box-sizing: border-box; /* Ekrana uyum sağlamak için */
    }

    .comment-form input[type="email"],
    .comment-form input[type="text"],
    .comment-form textarea {
        padding: 10px;
        margin-bottom: 10px;
    }

    .comment-form textarea {
        height: 120px;
        font-size: 14px;
    }

    footer {
        margin-top: 30px; /* Footer ile yazı arasındaki boşluk */
    }
}


/* Masaüstü Görünüm */
@media (min-width: 769px) {
    .desktop-marginfrb {
        margin-top: 30px; /* Header ile içerik arasında 20px boşluk ekler */
    }
}

/* Başlık ve alt yazıyı sadece custom-header içinde stillendirin */
.custom-header h2 {
    font-size: 36px; /* Başlık boyutunu büyütmek için */
    color: #d32f2f; /* Başlık rengini kırmızı yapmak için */
    margin: 0 0 10px 0; /* Başlık çevresindeki boşluğu ayarlamak için */
    text-align: center; /* Başlığı ortalamak için */
}

/* Başlık simgesi */
.custom-header h2 .material-icons {
    font-size: 36px; /* Simge boyutunu başlıkla uyumlu hale getirmek için */
    margin-right: 3px; /* Simge ile başlık metni arasındaki boşluğu ayarlamak için */
    vertical-align: middle; /* Simgeyi başlık metni ile hizalamak için */
    position: relative; /* Simgenin konumunu ayarlamak için */
    top: -5px; /* Simgeyi yukarıya doğru kaydırmak için */
}

/* Alt yazı stilini sadece custom-header içinde etkileyecek şekilde ayarlayın */
.custom-header p {
    font-size: 18px; /* Alt yazı boyutunu ayarlamak için */
    color: #d32f2f; /* Alt yazı rengini kırmızı yapmak için */
    margin: 0; /* Alt yazı çevresindeki boşluğu kaldırmak için */
    text-align: center; /* Alt yazıyı ortalamak için */
}

/* Mobil görünümde başlık ve alt yazıyı ayarlayın */
@media (max-width: 767px) {
    .custom-header h2 {
        font-size: 28px; /* Mobil görünümde başlık boyutunu küçültmek için */
        margin: 0 0 8px 0; /* Mobil görünümde başlık çevresindeki boşluğu ayarlamak için */
    }

    .custom-header h2 .material-icons {
        font-size: 28px; /* Mobil görünümde simge boyutunu küçültmek için */
        margin-right: 3px; /* Simge ile başlık metni arasındaki boşluğu ayarlamak için */
    }

    .custom-header p {
        font-size: 16px; /* Mobil görünümde alt yazı boyutunu küçültmek için */
    }
}

#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #d32f2f; /* Koyu Mercan */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    display: none;
    z-index: 9999;
    transition: background-color 0.3s, box-shadow 0.3s;
    text-align: center;
}

#scrollToTop:hover {
    background-color: #c62828; /* Daha koyu mercan */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#scrollToTop:focus {
    outline: none;
}

#scrollToTop i {
    font-size: 20px;
    color: #fff; /* Beyaz simge */
}

/* Mobil uyumluluk için medya sorgusu */
@media (max-width: 600px) {
    #scrollToTop {
        right: 15px; /* Sağdan biraz daha yakın */
        bottom: 15px; /* Alttan biraz daha yakın */
        font-size: 14px; /* Mobilde daha küçük yazı boyutu */
        padding: 8px 12px; /* Mobilde daha küçük padding */
    }

    #scrollToTop i {
        font-size: 18px; /* Mobilde daha küçük simge boyutu */
    }
}



.form-group input[type="text"] {
    background-color: #ffffff; /* Arka plan rengini beyaz yapar */
    color: #000000; /* Yazı rengini siyah yapar */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="black"%3E%3Cpath fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 24px; 
    padding-left: 40px; /* Simge boyutuna göre padding ayarlayın */
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
}

.form-group input[type="password"] {
    background-color: #ffffff; /* Arka plan rengini beyaz yapar */
    color: #000000; /* Yazı rengini siyah yapar */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="black"%3E%3Cpath d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 015.905-.75 1 1 0 001.937-.5A5.002 5.002 0 0010 2z" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 24px; 
    padding-left: 40px; /* Simge boyutuna göre padding ayarlayın */
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
}

/* Kullanıcı Adı ve Şifre placeholder'ları için stil */
.form-control::placeholder {
    font-size: 16px; /* Font boyutu */
    color: #333; /* Yazı rengi */
    font-weight: 600; 
}


/* Tüm bağlantılar için stil */
body a {
    color: #ffc107; /* Sarı renk */
    text-decoration: none; /* Alt çizgi kaldırma */
    text-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.1), -0.5px 0 0 rgba(0, 0, 0, 0.1); /* Hafif gölge ile kalınlaştırma efekti */
    font-weight: 600; /* Orta kalınlık */
}

/* Bağlantıya hover yapıldığında stil */
body a:hover {
    color: #e0a800; /* Hover durumunda daha koyu sarı */
    text-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.2), -0.5px 0 0 rgba(0, 0, 0, 0.2); /* Hover durumunda hafif gölge ile kalınlaştırma efekti */
}

/* Yazılardaki ve sayfalardaki bağlantılar için stil */
.article-content a, .page-content a {
    color: #ffc107; /* Sarı renk */
    text-decoration: none; /* Alt çizgi kaldırma */
    text-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.1), -0.5px 0 0 rgba(0, 0, 0, 0.1); /* Hafif gölge ile kalınlaştırma efekti */
    font-weight: 600; /* Orta kalınlık */
}

/* Yazılardaki ve sayfalardaki bağlantılar için hover durumu */
.article-content a:hover, .page-content a:hover {
    color: #e0a800; /* Hover durumunda daha koyu sarı */
    text-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.2), -0.5px 0 0 rgba(0, 0, 0, 0.2); /* Hover durumunda hafif gölge ile kalınlaştırma efekti */
    font-weight: 600; /* Orta kalınlık */
}



/* Footer içeriğini düzenler */
.footer-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Kol genişlikleri ve alt boşluk */
.footer-wrapper .col-lg-4, 
.footer-wrapper .col-sm-6, 
.footer-wrapper .col-sm-12 {
    flex: 1;
    min-width: 200px; /* Minimum genişlik */
    margin-bottom: 10px; /* Bölüm alt boşluğu */
}

/* Sayfalar ve diğer liste öğeleri için stil ayarları */
.altsayfa ul, .sosyal-medya {
    list-style: none; /* Liste işaretlerini kaldırır */
    padding: 0;
    margin: 0; /* Fazla boşluğu kaldırır */
}

.altsayfa ul li, .sosyal-medya li {
    margin-bottom: 5px; /* Liste öğeleri arasındaki boşluk */
}

/* Sosyal medya stil ayarları */
.sosyal-medya {
    display: flex;
    flex-direction: column; /* Alt alta dizilmesini sağlar */
    padding: 0;
    margin: 0; /* Fazla boşluğu kaldırır */
}

.sosyal-medya li {
    margin-bottom: 5px; /* Aralarına boşluk ekler */
}

/* Sosyal medya bağlantıları */
.sosyal-medya li a {
    color: #fff; /* Bağlantı rengi beyaz */
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

.sosyal-medya li a:hover {
    color: #e0a800; /* Üzerine gelince soluk sarı */
    text-decoration: underline; /* Üzerine gelince alt çizgi */
}

/* Menü bağlantı stil ayarları */
.footer-wrapper .altsayfa a {
    color: #FFC107; /* Sarı renk */
    text-decoration: none; /* Alt çizgi kaldırılır */
}

.footer-wrapper .altsayfa a:hover {
    color: #e0a800; /* Üzerine gelince soluk sarı */
    text-decoration: underline; /* Üzerine gelince alt çizgi */
}

/* Footer genel boşluk ayarları */
.footer-wrapper {
    padding-bottom: 0; /* Footer altındaki boşluğu azaltır */
}

/* Footer altındaki diğer boşluk ayarları */
.footer-wrapper .footer-bottom {
    margin-top: 0; /* Footer altındaki bölüm için üst boşluğu azaltır */
}
.section-title {
    font-size: 1.5rem; /* Başlık boyutu */
    font-weight: bold; /* Kalın yazı */
    margin-bottom: 10px; /* Başlık alt boşluk */
}
/* Sohbet Girişi başlığı için stil ayarları */

/* Genel Başlık Stili */
.heading {
    font-size: 2rem; /* Boyutu ayarlayın */
    font-weight: 500;  /* Kalınlık ayarları */
    color: #fff;       /* Renk ayarları */
    margin: 0;         /* Margin değerlerini sıfırlar */
    padding: 0;        /* Padding değerlerini sıfırlar */
    line-height: 1.2;  /* Satır yüksekliği */
}

.orta-yazilar {
    font-size: 2rem; /* Başlık boyutu */
    font-weight: 500;  /* Kalın yazı tipi */
    color: #FFC107;    /* Sarı renk */
    text-align: center; /* Metni ortala */
	 margin: 0;
	margin-bottom: 0.1rem;
}

.baslik-ver {
    font-size: 2rem; /* Başlık boyutu */
    color: #000;      /* Siyah renk */
}

/* Simge üzerine gelince büyüme efekti */
.iconlar {
    transition: transform 0.3s ease; /* 0.3 saniyede büyüme efekti */
    display: inline-block; /* Bunu ekleyerek sadece simgeyi hedef alıyoruz */
}

.iconlar:hover {
    transform: scale(1.2); /* Simgeyi %20 büyütme */
}
.error-404 {
    border: 3px solid #ffc107;     /* Çerçeve rengi */
    background-color: #343a40;     /* Arka plan rengi */
    color: #ffffff;                /* Yazı rengi */
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 20px auto;             /* Ortalamak için üstten ve alttan boşluk */
    text-align: center;
}
.h1-wrapper {
    display: inline-flex;        /* Aynı satırda hizala */
    align-items: center;         /* Dikey ortala */
    justify-content: center;     /* Ortaya al */
    margin-bottom: 15px;
}

.h1-wrapper h1 {
    font-size: 36px;
    color: #d32f2f;
    margin: 0;
}

.h1-wrapper .warning-icon {
    font-size: 40px;
    margin-right: 10px;
	 color: #d32f2f;
}

/* H2 daha küçük ve ayrı satırda */
.error-404 h2 {
    font-size: 24px;
    margin-bottom: 20px;
}
@media (max-width: 576px) {
    .h1-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;   /* Aynı satırda kal */
        margin-top: 10px;    /* H1 üstüne boşluk */
        margin-bottom: 10px; /* H1 altına boşluk */
    }

    .h1-wrapper h1 {
        font-size: 28px;    /* Daha küçük yazı */
        margin: 0;
    }

    .h1-wrapper .warning-icon {
        font-size: 32px;    /* Daha küçük ikon */
        margin-right: 8px;
    }

    .error-404 h2 {
        font-size: 18px;    /* H2 küçült */
        margin-bottom: 10px; /* H2 altına boşluk */
    }

    .error-404 a.btn {
        margin-bottom: 10px; /* Butonların altına boşluk */
    }
}