@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Readex Pro', sans-serif !important;
	font-size: 14px;
	color: #ffe2a3;
	/* background: url('../img/bg.jpg') center center no-repeat; */ /* Bu kısım index.php'den kontrol ediliyor */
	background-size: cover;
	background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ekran yüksekliğini kaplamasını sağlar */
}

/* NAVIGATION */
.navbar{
	max-width: 100% !important;
	height: 51px;
	display: block !important;
	margin-right: auto !important;
	margin-left: auto !important;
	text-align: center;
}

.navbar-nav{
	text-align: center !important;
	float: none !important;
}

.navbar-nav>li{
	float: none !important;
	list-style: none !important;
	display: inline-block !important;
}

.navbar-nav>li>a{
	line-height: 20px !important;
}

@media (min-width: 768px) {

	.navbar-default {
		background: url('../img/bg-menu.html') no-repeat center;
	}

	.baslik{
		background: url(../img/baslik.html) no-repeat center;
		text-align: center;
		width: 100%;
		height: 82px;
		line-height: 80px;
		font-size: 22px;
		font-weight: bold;
		color: #3e1c00;
		text-shadow: 0px 0px 5px #ffe5b1;
		margin:20px 0px 20px 0px;
		text-transform: uppercase;
	}
}

@media (max-width: 767px) {
	.navbar-default .navbar-collapse, .navbar-default .navbar-form{
		border-color: #cfb26b !important;
		background: #0b2234;
	}

	.navbar-header{
		background: #081723;
	}

	.navbar-default .navbar-toggle{
		border-color: #ffd370!important;
	}

	.navbar-default .navbar-toggle .icon-bar{
		background-color: #c4904d !important;
	}

	.navbar-default .navbar-toggle:focus , .navbar-default .navbar-toggle:hover{
		background-color: #0b2234 !important;
	}

	.baslik{
		background: linear-gradient(to top, #6c3c00, #ffb257);
		padding: 10px;
		max-width: 100%;
		width: 100%;
		font-size: 24px;
		font-weight: bold;
		color: #1e1107;
		border: 2px solid #ffc176;
		text-shadow: 1px 1px 1px #ffb257;
		margin-bottom: 10px;
		margin-top: 10px;
		border-radius: 30px;
		text-transform: uppercase;
	}
}

.navbar-default {
	background-color: transparent!important;
	border:none !important;
	text-align: center;
}

.navbar-default .navbar-nav>li>a{
	color: #ffffff !important;
	font-size: 18px;
	background: -webkit-linear-gradient(90deg, rgb(195 145 53) 20%, rgb(255 255 107) 100%);
	font-weight: bold;
	-webkit-background-clip: text;
	-webkit-text-fill-color: #ff000000;
}

.navbar-default .navbar-nav>li>a:hover{
	color: #595959 !important;
}
.footer{
	background: url('../img/footer.html');
	height: 367px;
}

.logo{
	margin: 0 auto;
}

.icerik{
	background: #0b0708;
}
img{
	max-width: 129%; /* Bu değeri temaya göre ayarlayabiliriz */
}
hr{
	width: 50%;
	height: 1px !important;
	border-top: 1px solid #c09437 !important;
}

.ml-auto, .mx-auto{
	margin-left: auto!important;
}

.mr-auto, .mx-auto {
	margin-right: auto!important;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.nav-pills>li{
	display: block;
	margin-right: auto !important;
	margin-left: auto !important;
}

.nav-pills>li.active>a, .nav-pills>li>a:hover, .nav-pills>li>a:focus, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
	background: linear-gradient(to top, rgb(66 4 4), rgb(175 16 16));
	color: #ffd472 !important;
	border: 1px solid #ffd472;
	background-color:transparent !important;
}

.nav-pills{
	display: block!important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Discord ve Facebook için bireysel konumlandırmaları sıfırlıyoruz */
/* Çünkü artık .left-social-buttons-group veya .right-social-buttons-group tarafından yönetilecekler */
.discord-widget, #discord4, #facebook {
    position: static !important; /* Fixed konumlandırmayı kaldır */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important; /* Genişlik ayarını kaldır */
    z-index: auto !important;
    margin: 0 !important; /* Dış boşlukları sıfırla */
}
.discord-widget:hover, #discord4:hover, #facebook:hover {
    opacity: 1 !important; /* Hover etkisini sıfırla veya yeniden tanımla */
}


.aciklama{
	background: linear-gradient(to top, #200d03, #833816);
	max-width: 100%;
	width: 100%;
	padding: 15px;
	margin-top: 10px;
	border-radius: 20px;
	border: 5px solid #ff8917;
}

.aciklama p{
	margin: 0 !important;
	font-size: 40px;
	color: #ffb46c;
	text-shadow: 0px 2px 2px #120702;
}

/* Yeni Sosyal Butonlar Grubu Stili (sağ alt için - default_theme kullanır) */
.right-social-buttons-group {
    position: fixed; /* Ekranın sağ altına sabitle */
    right: 5%; /* Sağdan boşluk */
    bottom: 5%; /* Alttan boşluk */
    display: flex;
    flex-direction: column; /* Butonları dikey olarak sırala */
    gap: 10px; /* Butonlar arasında 10px boşluk bırak */
    z-index: 99; /* Diğer öğelerin üzerinde görünmesini sağla */
    align-items: flex-end; /* Butonları sağa hizala (kendi içlerinde) */
}

/* Yeni Sosyal Butonlar Grubu Stili (sol alt için - theme_2 ve theme_3 kullanır) */
.left-social-buttons-group {
    position: fixed; /* Ekranın sol altına sabitle */
    left: 5%; /* Soldan boşluk */
    bottom: 5%; /* Alttan boşluk */
    display: flex;
    flex-direction: column; /* Butonları dikey olarak sırala */
    gap: 10px; /* Butonlar arasında 10px boşluk bırak */
    z-index: 99; /* Diğer öğelerin üzerinde görünmesini sağla */
    align-items: flex-start; /* Butonları sola hizala (kendi içlerinde) */
}


/* Sosyal butonların genel stili (eğer img kullanıyorsa) */
.social-button {
    display: block;
    width: 308px; /* Mevcut genişliğini koru */
    height: auto;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.social-button img {
    max-width: 100%;
    height: auto;
    display: block;
}

.social-button:hover {
    opacity: .65;
}


.sag_menu{
	z-index:99;
	position: fixed;
	right: 5%;
	top: 5%;
	background: rgb(12 41 0);
	outline: rgb(255 255 255) dotted 2px;
	padding: 1px 28px 0px 0px;
	border: 3mm ridge rgb(236 225 127);
}
.sag_menu ul{
	width: 100%;
	list-style: none;
	margin: 0px!important;
	padding: 10px 20px!important;
}
.sag_menu ul li a{
	font-size: 14px;
	color: #e1cd9e;
	transition: 500ms;
	text-shadow: 1px 1px 1px #141414;
}
.sag_menu ul li a:hover{
	filter: brightness(1.8);
	transition: 500ms;
	text-decoration:none;
}

/* Soldaki Anasayfa, Kayıt Ol, Kurulum butonları (masaüstü için) */
/* Bu stil, theme_2 ve default_theme için sağ üstte dikey konumlandırmayı sağlar */
.button-container {
    position: fixed; 
    top: 25px; 
    right: 85px; /* Sağdan 85px boşluk bırakıyoruz */
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 10; 
    transition: filter 0.3s ease, transform 0.3s ease; 
}

/* Yeni üst orta buton grubu stili (theme_3 için) */
.top-center-buttons-group {
    /* Bu stil artık theme_3 için kullanılmayacak */
    display: none; /* Gizle */
}

/* Yeni üst sol buton grubu stili (theme_3 için) */
.left-site-buttons-group {
    position: fixed;
    top: 100px; /* Üstten boşluk */
    left: 5%; /* Soldan boşluk */
    display: flex;
    flex-direction: column; /* Butonları dikey olarak sırala */
    gap: 10px; /* Butonlar arasında boşluk */
    z-index: 999; /* Butonların her zaman önde olmasını sağlar */
    align-items: flex-start; /* İçindeki öğeleri sola hizala */
}


/* Ana içeriği ve görseli aşağıya kaydırıyoruz */
/* theme_3 için özel ayar */
main {
    padding-top: 0px !important; /* Boşluğu azaltarak görseli yukarı taşıyoruz */
    justify-content: flex-start !important; /* İçeriği yukarı hizala */
    align-items: center !important; /* İçeriği yatayda ortala */
}

.site-button {
    display: block;
    width: 260px; 
    height: auto;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

.site-button:hover {
    filter: brightness(1.2); 
    transform: scale(1.02); 
}

.site-button img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sol_menu {
    z-index: 9;
    position: fixed;
    left: 3%;
    top: 20%; 
}
.sol_menu ul{
	width: 109%;
	list-style: none;
	margin: 0px!important;
	padding: 10px 20px!important;
}
.sol_menu ul li a{
	width: 200px; 
	margin: 10px;
	transition: 500ms;
	display: block;
	text-align: center;
}

.sol_menu .discord{
	background: url(../img/dcbuton.html) no-repeat;
}

.sol_menu ul li a:hover{
	filter: brightness(1.2);
	transition: 500ms;
	text-decoration:none;
}

.mobil_menu{
	background: rgb(0 0 0 / 61%);
	width: 100%;
	max-width: 100%;
	z-index: 9;
	position: fixed;
	bottom: 0px;
}

.mobil_menu ul{
	width: 100%;
	list-style: none;
	margin: 0px!important;
	padding: 10px 20px!important;
}
.mobil_menu ul li a{
	float: left;
	font-size: 22px;
	color: #fdffa4;
	transition: 500ms;
	text-shadow: 1px 1px 1px #141414;
	display: inline-block;
	text-align: center;
	width: 50%;
}

/* --- RESPONSIVE AYARLAR --- */

/* Varsayılan olarak büyük ekran öğelerini göster, mobil öğeleri gizle */
.large-screen-only {
    display: block; /* Masaüstünde görünür */
}

.mobile-buttons-container {
    display: none; /* Masaüstünde gizli */
}

/* Küçük Ekranlar / Mobil İçin (768px veya daha küçük) */
@media (max-width: 768px) {
    /* Mobil ekranlarda büyük ekran öğelerini gizle */
    .large-screen-only {
        display: none !important; 
    }

    /* Mobil ekranlarda mobil buton konteynerini göster */
    .mobile-buttons-container {
        display: flex !important; /* Esnek kutu olarak göster */
        justify-content: center; /* Yatayda ortala */
        align-items: center; /* Dikeyde ortala (eğer butonların yükseklikleri farklıysa) */
        width: 100%; /* Tam genişlik */
        gap: 10px; /* Butonlar arasında boşluk */
        margin-top: 20px; /* Ana banner'ın üstünde boşluk */
        margin-bottom: 20px; /* Ana banner'ın altında boşluk */
        flex-wrap: wrap; /* Butonlar sığmazsa alt satıra geçsin */
    }

    .mobile-site-button {
        display: block;
        max-width: 150px; /* Buton genişliğini mobil için ayarla */
        height: auto;
        text-align: center;
        text-decoration: none;
    }

    .mobile-site-button img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* main içeriğini mobil uyumlu hale getir */
    main {
        justify-content: flex-start !important; /* İçeriği yukarı hizala */
        padding-top: 20px !important; /* Üst boşluk ekle */
        padding-bottom: 20px; /* Alt boşluk ekle */
    }

    /* Daha önceki .aciklama ve .baslik stilleri (HTML'den kaldırılmış olsalar da burada bırakıldı) */
    .aciklama {
        padding: 10px; 
    }
    .aciklama p {
        font-size: 18px !important; 
    }
}

/* Mevcut diğer medya sorgularınızı koruyoruz */
@media (max-width: 1365px) {
    .m-d-n {
        display: none;
        overflow: hidden;
    }
}

@media (min-width: 1366px) {
    .f-d-n {
        display: none;
        overflow: hidden;
    }
	.video {
		position: absolute;
		margin: 300px auto;
		left: 0;
		right: 0;
	}
}

@media (min-width: 501px) {
    .v-f-d-n {
        display: none;
        overflow: hidden;
    }
	.video {
		position: absolute;
		margin: 300px auto;
		left: 0;
		right: 0;
	}
}

@media (max-width: 500px) {
    .v-m-d-n {
        display: none;
        overflow: hidden;
    }
	.mobilvideo {
		position: absolute;
		margin: 121px auto;
		left: 0;
		right: 0;
	}
}


/* Footer Stili */
.site-footer {
    background-color: transparent; /* Arka planı şeffaf yapar */
    color: #fff; /* Yazı rengi beyaz */
    padding: 15px 0;
    width: 100%;
    margin-top: auto;
    box-shadow: none;
    text-align: center;
    font-size: 14px;
}
.site-footer p {
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
/* Link stili */
.site-footer .footer-link {
    color: #fff; /* Link rengini beyaz yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

/* Linkin üzerine gelince (hover) ve tıklanınca (active) stili */
.site-footer .footer-link:hover,
.site-footer .footer-link:active {
    color: #cccccc; /* Linkin üzerine gelince rengini hafifçe gri yapar */
    text-decoration: none;
}
/* Soluk gri renkli metin için yeni stil */
.site-footer .faded-text {
    color: #cccccc; /* Daha soluk gri tonu */
}