@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
  /* Temel Renk Değişkenleri */
:root {
  --primary-color: #000;   
  --secondary-color: #333;  
  --accent-color: #17a2b8;     
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-bg: #f8f9fa;       
  --dark-bg: #000;        
}

 
body {
   background-image: url('bg.webp'); /* Resminizin URL'sini buraya yazın */
  background-size: cover; /* Resmi, arka planı tamamen kaplayacak şekilde boyutlandırır */
  background-repeat: no-repeat; /* Resmin tekrarlanmasını engeller */
  background-position: center center; /* Resmi yatayda ve dikeyde ortalar */
  background-attachment: fixed; /* (Opsiyonel) Sayfa kaydırıldığında resmin sabit kalmasını sağlar */
  
  /* Arka plan resmi yüklenirken veya bir sorun olduğunda görünecek bir arka plan rengi */
  background-color: #000000; 
  color: var(--dark-bg); 
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

 
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--accent-color);
}
 

 
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Kart Bileşeni Örneği */
.card {
  border-color: var(--secondary-color);
}

.card-header {
  background-color: var(--primary-color);
  color: var(--light-bg);
}

/* Footer */
footer {
  background-color: var(--dark-bg);
  color: var(--light-bg);
}

/* Diğer Bileşenlerde Kullanılabilecek Örnekler */
/* Örneğin, hover efektinde arka plan rengini değiştirme */
.hover-effect:hover {
  background-color: var(--accent-color);
  color: var(--light-bg);
}

#scrollToTopBtn {
    position: fixed; /* Sayfada sabit konum */
    bottom: 110px;    /* Alttan boşluk */
    right: 25px;     /* Sağdan boşluk */
    z-index: 1000;   /* Diğer elementlerin üzerinde görünmesini sağlar */
    width: 50px;     /* Buton genişliği */
    height: 50px;    /* Buton yüksekliği */
    display: flex;   /* İçindeki ikonu ortalamak için */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    font-size: 1.5rem; /* İkon boyutu */
    opacity: 0.8;    /* Hafif şeffaflık */
    transition: opacity 0.3s ease-in-out; /* Fare üzerine gelindiğinde yumuşak geçiş */
}

#scrollToTopBtn:hover {
    opacity: 1;      /* Fare üzerine gelince tam görünürlük */
    text-decoration: none; /* Link alt çizgisini kaldır */
}

/* Küçük ekranlar için daha küçük buton veya farklı konum */
@media (max-width: 768px) {
    #scrollToTopBtn {
        bottom: 110px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
	
		/* genel swiper ayarları mobil*/
	.slide-content {
	  position: absolute;
	  bottom: 0!important;
	  left: 0!important;
	  /*transform: translate(-50%, -50%);*/
	  z-index: 2;
	  color: #fff;
	  text-align: left;
	  backdrop-filter: blur(10px); 
	  background: rgba(0, 0, 0, 0.7); /* isteğe bağlı arka plan */
	  padding: 20px; 
	  max-width: 100%!important; 
	}
	.slide-content h1{
	font-size:1.5em!important;
}
	
}

/* genel swiper ayarları */
.slide-content {
  position: absolute;
  bottom: 0;
  left: 10%;
  /*transform: translate(-50%, -50%);*/
  z-index: 2;
  color: #fff;
  text-align: left;
  backdrop-filter: blur(10px); 
  background: rgba(0, 0, 0, 0.7); /* isteğe bağlı arka plan */
  padding: 20px;
  max-width: 45%; 
} 

.slide-content h1{
	font-size:3.5em;
}

.animate-text {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.animate-text.active {
  opacity: 1;
  transform: translateY(0);
}
.animate-text2 {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.6s ease;
}

.animate-text2.active {
  opacity: 1;
  transform: translateX(0);
}

.capraz-border{
	border-radius: 0 20px 0 0!important;
	
}
 
 .boxes {
    transition: transform 0.3s ease;
  }
  .boxes:hover {
    transform: translateY(-5px);
  }
  
  
  .text-shadow {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.text-shadow-lg {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}
.text-shadow-white {
  text-shadow: 1px 1px 2px white;
}
.text-shadow-outline {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
}
.blur-black-bg{
backdrop-filter: blur(10px); background: rgba(0,0,0,0.4);
}
.blur-white-bg{
backdrop-filter: blur(10px); background: rgba(255,255,255,0.4);
}

/* SES*/
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

#chatBox {
  z-index: 1055; /* dropdown'un üstünde kalması için */
}

/* Webkit (Chrome, Edge, Safari) */
#volumeMobile::-webkit-slider-thumb, #volume::-webkit-slider-thumb {
  background-color: #ff5722;   /* Örnek: turuncu */
  border: none;
}

/* Firefox */
#volumeMobile::-moz-range-thumb,#volume::-moz-range-thumb {
  background-color: #ff5722;
  border: none;
}

/* Internet Explorer */
#volumeMobile::-ms-thumb,#volume::-ms-thumb {
  background-color: #ff5722;
  border: none;
}

#volumeMobile::-webkit-slider-thumb,#volume::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
/* SES FINAL */