/* Theme Name: TRChat Tema
Theme URI: www.trchat.tr
Author: Forbidden
Author URI: www.trchat.tr
Description: TRChat Tema tema trchat.tr için üretilmiştir
Version: v1.3 */

body {
 margin: 0px;
 padding: 0px;
}
body {
	--scrollbarBG: white;
	--thumbBG: #ff914d;
}
body::-webkit-scrollbar {
	width: 10px;
}
body {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}
.yanbar {
	--scrollbarBG: white;
	--thumbBG: #ff7a26;
}
.yanbar::-webkit-scrollbar {
	width: 10px;
}
.yanbar {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.yanbar::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.yanbar::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}
.sohbetbar {
	--scrollbarBG: white;
	--thumbBG: #ff7a26;
}
.sohbetbar::-webkit-scrollbar {
	width: 10px;
}
.sohbetbar {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.sohbetbar::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.sohbetbar::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}

.sohbetbar {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #788ef2;
	background: #00576e;
	box-shadow: 0px -2px 20px 5px black;
	border-top: 2px solid #ff914d;
	overflow: auto;
	padding: 25px;
}
.sohbetbar h2 {
	color: white;
	padding: 10px;
	border-bottom: 1px solid #ff914d;
	font-size: 30px;
	margin-top: 30px;
}
.sohbetbar h3 {
	font-size: 16px;
	color: #f6f6f6;
}
.sohbetbar form {
	text-align: center;
}
.sohbetbar input {
	padding: 11px;
	border: none;
	margin-top: 10px;
	border-radius: 5px;
	width: 70%;
	font-size: 20px;
   border-radius: 10px;

}

.sohbetbar i {
    background: linear-gradient(45deg, #ff914d, #ff5e00);
    color: white;
    padding: 10px;
    font-size: 25px;
    border-radius: 10px 0px 0px 10px;
    display: inline-block;
    margin-left: 0;
}
.sohbetbar i.fa-bars {
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: linear-gradient(45deg, #ff914d, #ff5e00);
    cursor: pointer;
    display: inline-block;
}
.sohbetbar button {
    padding: 10px;
    border: none;
    border-radius: 20px; 
    margin-top: 10px;
    width: 90%;
    font-size: 30px;
    background: linear-gradient(45deg, #ff914d, #ff5e00);
    color: white;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.sohbetbar button:hover {
    color: #ff5e00;
    background: white;
    transform: scale(1.05);
}
.yanbar {
  position: fixed;
  top: -20px;    
  bottom: 0;    
  right: 14px;
  width: 100%;
  background: linear-gradient(178deg, #d9d9d9, transparent);
  border-left: 2px solid #ff914d;
  border-top: 2px solid #ff914d;
  overflow: auto;
}

.navs {
	display: none;
	background: #00576e;
	padding: 10px;
	border-top: 2px solid #ff7a26;
	border-radius: 0px 0px 10px 10px;
}
.navs ul {
	text-align: center; 
}
.navs ul li {
	list-style-type: none;
	margin-top: 10px;
}
.navs ul li a {
	color: white;
	font-size: 20px;
	font-weight: bold;
	padding: 10px;
}
.navs ul li a:hover {
	text-decoration: none;
	background: #ff7a26;
    border-radius: 10px; 
}
.download {
	background: #00576e;
	color: white;
	padding: 15px;
	margin: 0px auto;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #00576e;
	cursor: pointer;
}
.download:hover, .download:hover a {
	text-decoration: none;
	background: white;
	color: #00576e;
}
.download i {
	font-size: 35px;
	float: left;
	margin-right: 15px;
	margin-left: 20px;
	border-radius: 10px;
    background: linear-gradient(45deg, #ff914d, #ff5e00);
	padding: 10px;
	display: inline-block;

}
.download h2 {
	font-size: 25px;
	padding: 10px;
}
.download a {
	color: white;
}
.col-download {
	flex: 0 0 47%;
	max-width: 50%;
}
.rek {
	background: #00576e;
	color: white;
	padding: 15px;
	margin: 0px auto;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #00576e;
}
.rek:hover {
	background: white;
	color: #00576e;
}
.rek i {
	font-size: 35px;
	float: left;
	margin-right: 15px;
	margin-left: 20px;
	border-radius: 10px;
    background: linear-gradient(45deg, #ff914d, #ff5e00);
	padding: 10px;
	display: inline-block;

}
.rek h2 {
	font-size: 20px;
	padding: 10px;
}
.rek p {
	margin-top: 24px;
	margin-left: 22px;
}
.col-rek {
	flex: 0 0 32%;
	max-width: 50%;
}
.blog {
	padding: 20px;
	margin-top: 10px;
	text-align: center; 
	color: #00576e;

}
.blog .item {
	background: white;
	color: #00576e;
	padding: 10px;
	border-radius: 5px;
	margin: 0px auto;
	margin-top: 10px;
	box-shadow: 0px 0px 0px 2px #ff7a26;
}
.category .row {
  gap: 4px; /* aradaki boşluk */
}
.blog .item img {
	width: 250px;
	height: 160px;
	background: #00576e;
	border-radius: 5px;
}
.blog .item h2 {
	font-size: 20px;
	margin-top: 20px;
	font-weight: bold;
}
.blog .item p {

}
.blog .item button {
	width: 100%;
	padding: 10px;
	border: none;
    background: linear-gradient(45deg, #ff914d, #ff5e00);
	color: white;
	font-weight: bold;
	letter-spacing: 3px;
	box-shadow: 0px 0px 5px 1px black;
    display: inline-block;
	border-radius: 10px;
}
.blog .item button:hover {
	color: #ff7a26;
	background: #00576e;
}
.col-blog {
	flex: 0 0 32%;
	max-width: 50%;
}
.altbar {
	background: white;
	padding: 10px;
	border-radius: 10px;
}


.yorum-baslik {
    font-size: 2rem; 
    font-weight: bold;
    margin-bottom: 1rem;
    color: #00576e;
    text-align: center; 
    width: 100%; 
}

.altbar p {
	font-size: 15px;
}
.altbar button {
    background: linear-gradient(45deg, #ff914d, #ff5e00);
	border: none;
	padding: 10px;
	color: white;
	font-weight: bold;
	border-radius: 10px;
	font-size: 20px;
	box-shadow: 0px 0px 5px 1px black;
	display: inline-block;

}
.altbar button:hover {
	color: #ff7a26;
	background: #00576e;
}
.gizlenmis {
	display: none;
}
.medya {
	text-align: center;
	background: #ffffff;
	padding: 10px;
	border-top: 2px solid #ff7a26;
	border-radius: 0px 0px 10px 10px;
	padding-top: 20px;
}
.medya ul {
	text-align: center;
	margin-left: -40px;
}
.medya ul li {
	list-style-type: none;
	display: inline-block;
}
.medya ul li a {
	color: #00576e;
	font-size: 15px;
	font-weight: bold;
	padding: 10px;
	border-radius: 10px;
}
.medya ul li a:hover {
	text-decoration: none;
	background: #ff7a26;
}
.footer {
	background: #ffffff;
	padding: 0;
	border-top: 2px solid #ff7a26;
	border-radius: 0px 0px 10px 10px;

}
.footer ul {
	text-align: center;
	margin-left: -40px;
}
.footer ul li {
	list-style-type: none;
	display: inline-block;
}
.footer ul li a {
	color: #00576e;
	font-size: 15px;
	font-weight: bold;
	padding: 10px;
	border-radius: 5px;
}
.footer ul li a:hover {
	text-decoration: none;
	background: #ff914d;
}
.footer ul li h2 {
    color: #00576e; 
    font-size: 15px;
    font-weight: bold; 
    text-align: center; 
    margin: 0; 
}
.hakkimizda {
  border: 2px solid #ff7a26; 
  background-color: #00576E;
  color: white;
  text-align: center;
  padding: 15px 0 5px 0;
  font-weight: 700; 
}

.hakkimizda .icon {
  font-size: 25px;
  margin-bottom: 5px;
  display: inline-block;
}
@media (max-width: 768px) {
  .hakkimizda {
    font-size: 0.9rem; 
    padding: 10px 0 5px 0; 
  }

  .hakkimizda .icon {
    font-size: 20px; 
	}
  footer, .footer {
    margin: 0;
    padding: 0;
  }
  body > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .katet {
    font-size: 1.5rem !important;
  }
}


.yorum{
	color:#3e4659;
	padding: 20px;
}
.yorum a{
	color: black;
}
.yorum li{
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid white;
	list-style-type: none;
	border-radius: 5px
}
.yorum textarea{
	width: 100%;
	height: 100px;
	border: 3px solid #3e4659;
	border-radius: 5px;
}
.yorum input[type=text]{
	width: 100%;
	border-radius: 5px;
	background: #ffffff;
	color: #24335f;
	padding: 10px;
}
.yorum input[type=submit]{
    background: linear-gradient(45deg, #ff914d, #ff5e00);
	color: #ffffff;
	border: none;
	width: 100%;
	border-radius: 10px;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	display: inline-block;

}
.yorum input[type=submit]:hover {
		color: #ff7a26;

	background: #00576e;
}
.yorum .comment-form-url{
	display: none
}
.text-yorum a:hover {
	background: #00576e;
}
.text-yorum a{
	background: #00576e;
	color: #ffffff;
	font-weight: bold;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0px 0px 10px 3px white;
}
@media screen and (max-width:1044px) { 
	.container-fluet {
		width: 96%;
	}
	.sohbetbar, .yanbar {
		position: relative;
	 margin-bottom: 10px;

	}
	.sohbetbar h2 {
		font-size: 25px;
		margin-top: 0px;
	}

	.sohbetbar button {
		font-size: 25px;
	}
	.yanbar {
		right: 0;
	}
	.col-rek, .col-download, .col-blog {
		flex: 0 0 82%;
		max-width: 100%;
	}
	.download h2 {
		font-size: 20px;
	}
	.rek {
		display: none;
	}
	.blog .item {
	}
	.altbar {
		background: white;
		padding: 20px;
		border-radius: 10px;
		padding-left: 50px;
	}
	.altbar button {
		font-size: 15px;
	}
	.medya {
		padding: 5px;
	}
	.medya ul li {
		display: block;
		margin-top: 10px;
		background: #00576e;
		padding: 10px;
		width: 90%;
		margin: 0px auto;
		margin-top: 10px;
		border-radius: 10px;
	}
	.medya ul li a {
		color: #ffffff;
	}
	.footer ul li {
		display: block;
		margin-top: 10px;
		background: #00576e;
		padding: 10px;
		width: 90%;
		margin: 0px auto;
		margin-top: 10px;
		border-radius: 10px;
	}
	.footer ul li a {
		color: #ffffff;
	}
}


@keyframes right{
	0%{
		transform:translateX(0)
	}
	40%{
		transform:translateX(10px)
	}
	60%{
		transform:translateX(5px)
	}
	100%{
		transform:translateX(0)
	}
}
img.logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    object-fit: contain; 
}

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

.sohbet-girisi {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.sohbet-aciklama {
    font-size: 18px;
    color: white;
}

.trchat-sohbet-baslik {
 font-size: 23px;
 font-weight: 600;
}

.altbar h1 {
    font-size: 2.5rem;
}
.altbar h2 {
    font-size: 2rem;
}
.altbar h3 {
    font-size: 1.75rem;
}
.altbar h4 {
    font-size: 1.5rem;
}
.altbar h5 {
    font-size: 1.25rem;
}
.altbar h6 {
    font-size: 1.25rem;
}

.altbar h1, 
.altbar h2, 
.altbar h3, 
.altbar h4, 
.altbar h5, 
.altbar h6 {
    text-align: center;
    color: #00576e;
    font-weight: bold;
    letter-spacing: 3px;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    margin: 10px 0; 
    white-space: normal; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

@media screen and (max-width: 1044px) {
    .altbar h1, 
    .altbar h2, 
    .altbar h3, 
    .altbar h4, 
    .altbar h5, 
    .altbar h6 {
        font-size: 2rem; 
        letter-spacing: 1px; 
        padding: 5px; 
        margin: 5px 0; 
      font-weight: bold;

	}
}
@media (max-width: 600px) {
  .altbar h1, 
  .altbar h2, 
  .altbar h3, 
  .altbar h4, 
  .altbar h5, 
  .altbar h6 {
    font-size: 1.75rem !important;
        letter-spacing: 1px; 
        padding: 5px; 
        margin: 5px 0; 
      font-weight: bold;
  }
}

/* Genel ayarlar */
.container-fluid {
    padding: 20px;
}

/* Kategori sayfasının ana kapsayıcısı */
.category {
    margin-top: 20px; /* Kategori alanının üst tarafında boşluk bırakır */
    display: flex; /* Flexbox kullanarak yan yana yerleşim */
    flex-direction: column; /* Dikey hizalama */
    align-items: flex-end; /* Elemanları sağa hizala */
    padding-right: -5cm; /* İçeriği sağa kaydırmak için sağ boşluk ekleyin */
}

/* Kategori başlıkları için stil */
.category h1 {
    font-size: 2em; /* Başlık boyutu */
    margin: 0; /* Varsayılan dış boşlukları sıfırla */
    padding-right: 5cm;
}

/* Kategori açıklaması için stil */
.category h1 {
    font-size: 2em; /* Başlık boyutu */
    margin: 0; /* Varsayılan dış boşlukları sıfırla */
    padding-right: 7cm;
    color: #00576E; /* Başlık rengi */
    margin-bottom: 1cm; /* Başlığın altında 10 cm boşluk bırak */
}

/* Blog yazıları için stil */
.alt {
 margin-bottom: 20px; /* Yazılar arasında boşluk bırakır */
    padding: 15px;
    border: 2px solid orange; /* Çerçevenin turuncu kenarlığı */
    border-radius: 5px; /* Kenarları yuvarlar */
    background-color: #fff; /* Arka plan rengi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Gölgelendirme efekti */
    text-align: center; /* İçeriği ortala */
    width: 100%; /* Çerçeve genişliğini %100 yap */
    max-width: 600px; /* Maksimum genişlik ayarı */
    display: flex; /* Flexbox kullanarak içerik hizalaması */
    flex-direction: column; /* Dikey hizalama */
    align-items: center; /* Elemanları ortala */
	   color: #00576E; /* Başlık rengi */
}

/* Kapak resmi için stil */
.alt img {
    width: 100%; /* Resmin genişliği 100% olacak şekilde ayarlanır */
    max-width: 200px; /* Resimlerin maksimum genişliğini ayarla */
    border-radius: 5px; /* Resim kenarları yuvarlanır */
    margin: 10px 0; /* Resim ile metin arasında boşluk bırak */
}

/* Makale başlıkları için stil */
.makale-basliklari {
    font-size: 1.2em; /* Başlık boyutunu küçült */
    font-weight: bold; /* Başlık kalın yazılır */
    margin-bottom: 10px; /* Başlık ile metin arasında boşluk bırakır */
}

.makale-basliklarix a {
    font-size: 1.25rem;
    margin-bottom: 5px; 
    color: #00576E;
    font-weight: 700;
    line-height: 1.2;
    display: inline;
    text-decoration: none; /* Normal halde alt çizgi yok */
    transition: all 0.3s ease; /* Geçiş efekti */
}

.makale-basliklarix a:hover {
    color: #003d4f; /* Daha koyu mavi */
    text-decoration: underline; /* Alt çizgi eklendi */
}

@media (max-width: 768px) {
    .makale-basliklarix a {
        font-size: 1.25rem;
        text-decoration: none;
        margin-bottom: 10px; 
    }
    
    .makale-basliklarix a:hover {
        color: #003d4f;
        text-decoration: underline;
    }
}
/* Özeti gösteren metin */
.custo {
    color: #555; /* Metin rengi */
    margin-bottom: 10px; /* Özeti gösteren metin ile butonlar arasında boşluk bırakır */
    font-size: 14px; /* Yazı boyutunu küçültür */
}

/* Buton için stil */
.btn {
    padding: 10px 15px; /* Buton içindeki boşluklar */
    background-color: #007bff; /* Butonun arka plan rengi */
    color: white; /* Buton yazı rengi */
    border: none; /* Kenar çizgisi yok */
    border-radius: 4px; /* Kenarları yuvarlanır */
    cursor: pointer; /* Fare ile üzerine gelince el simgesi çıkar */
}

.btn:hover {
    background-color: #0056b3; /* Buton üzerine gelince arka plan rengi değişir */
	  color: white; /* Buton yazı rengi */
}

/* Responsive tasarım ayarları */
@media (max-width: 768px) {
    .makale-basliklari {
        font-size: 1em; /* Başlık boyutunu daha da küçült */
    }

    .custo {
        font-size: 10px; /* Özeti gösteren metni daha da küçült */
    }

    .btn {
        font-size: 16px; /* Buton metin boyutunu küçült */
    }

    .category {
        align-items: center; /* Elemanları ortala */
        padding: 0; /* Sağ ve sol boşluğu kaldır */
    }

    .category h1 {
        text-align: center; 
        padding: 0; 
    }

    .alt {
        width: 150%;
        max-width: 800px; 
        padding: 15px; 
        margin: 10px 8px; 
        border: 2px solid orange;
        border-radius: 5px; 
        background-color: #fff; 
    }
}

html, body {
    overflow-x: hidden; 
}

.text-orgin a,
.text-orgin a:link,
.text-orgin a:visited {
    color: black !important; 
    text-decoration: none !important; 
}


.text-orgin a:hover {
    color: #FF5722 !important;  
    text-decoration: underline !important; 
    font-weight: bold !important; 
}
.footer-link {
  color: #ff7a26;
  text-decoration: none !important;
}


.footer-link:hover {
  padding: 6px 6px; 
  color: #00576E;
  background-color: #ff7a26;
	border-radius: 10px;
 text-decoration: none !important;
}

.footer ul li h2 a:hover {
	background-color: #ff7a26;
	border-radius: 10px;
}
.katet {
  text-align: right !important;
  color: #ff7a26 !important;
  font-weight: bold !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}


a {
  color: #ff7a26;
  text-decoration: none; 
  transition: color 0.3s ease;
}

a:hover {
color: #cc5500; 
  cursor: pointer;
}