.custom-header-color{
  color:  #EAE6CA;
}

.custom-header-color:hover {
  color: #C5A059;
  text-shadow: 0px 0px 10px #8FBBE9;
  
}

.gorsel-yuvarlak {
  border-radius: 60%;
  object-fit: cover;
  border: 5px solid #C5A059;
  justify-content: center;
}



.owl-carousel .owl-nav {
  position: absolute;
  top: 50%; 
  width: 114%; 
  left: -7%;  
  transform: translateY(-50%);
  pointer-events: none; 
}


.owl-carousel .owl-nav button.owl-prev, 
.owl-carousel .owl-nav button.owl-next {
  position: absolute !important;
  background-color: transparent !important;
  border: none !important;
  width: 80px !important; 
  height: 80px !important; 
  font-size: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: auto; 
  transition: transform 0.2s ease;
}


.owl-carousel .owl-nav button.owl-prev {
  left: 5px !important;
  background-image: url('../gorsel/finger_left.webp') !important;
}


.owl-carousel .owl-nav button.owl-next {
  right: 0 !important;
  background-image: url('../gorsel/finger_right.webp') !important;
}


.owl-carousel .owl-nav button:hover {
  transform: scale(1.0);
}


.owl-carousel .owl-nav button.owl-prev:hover {
  transform: translateY(-50%) translateX(-15px) !important;
  background-color: transparent !important;
}


.owl-carousel .owl-nav button.owl-next:hover {
  transform: translateY(-50%) translateX(15px) !important;
  background-color: transparent !important;
}


.owl-carousel .owl-nav button.owl-prev, 
.owl-carousel .owl-nav button.owl-next {
 
  transition: transform 0.3s ease-out !important;
}

.btn-discord-hover {
  background-color: #5865F2;
  border-color: #5865F2;
  color: white;
  font-size: 1.1rem;
  border-radius: 8px;
  transition: all 0.3s ease; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: inline-block;
}


.btn-discord-hover:hover {
  background-color: #4752c4; 
  border-color: #4752c4;
  color: white;
  transform: scale(1.05); 
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); 
}


.btn-discord-hover:active {
  transform: scale(0.98); 
}


.dante-glow {
  color: white; 
  transition: all 0.4s ease; 
  cursor: pointer;
  display: inline-block;
}


.dante-glow:hover {
  text-shadow: 0 0 10px #C5A059; 
  cursor: default;
}


.svg-fill-color-secondary path {
  fill: #C5A059 !important;
}


.icon-animated svg path {
  fill: #C5A059 !important;
}


.discord-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #5865F2;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 18px 30px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}


.discord-custom-btn:hover {
  background-color: #4752C4;
  box-shadow: 0 10px 25px rgba(88, 101, 242, 0.5); 
  filter: brightness(1.1);
}

.discord-custom-btn i {
  font-size: 1.6rem;
}

.icon-animated {
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100%;
 
}

@media (max-width: 991px) {
  /* 1. Gereksiz grafikleri gizle ve arka planı sabitle */
  #home .shape-divider, 
  #home .custom-section-svg svg,
  #home .custom-section-svg-background {
      display: none !important;
  }

  /* 2. Ana alanı ortala ve boşlukları düzenle */
  #home.section {
      background-color: #002A54 !important;
      min-height: 50vh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 0 !important;
  }

  /* 3. Konteynırı ve Satırı (Row) tam genişlik yap */
  #home .container,
  #home .row {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      justify-content: center !important;
  }

  /* 4. Metin Kolonunu Tam Genişlik Yap ve Ortala */
  #home .col-lg-6 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      text-align: center !important; /* Metni yatayda ortalar */
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important; /* İçerikleri kolon içinde ortalar */
      padding: 0 20px !important;
  }

  /* 5. Yazı Boyutlarını ve Kırılmaları Düzelten Ayarlar */
  #home h1 {
      font-size: 2.2rem !important; /* Mobilde ideal başlık boyutu */
      line-height: 1.2 !important;
      margin-bottom: 10px !important;
      display: inline-block !important; /* Genişliği içeriğe göre ayarlar */
      width: auto !important;
  }

  #home h2 {
      font-size: 1.4rem !important;
      line-height: 1.4 !important;
      white-space: nowrap !important; /* Kelimelerin alt alta kırılmasını engeller */
      text-shadow: 0 0 15px rgba(143, 187, 233, 0.5) !important; /* Hafif parıltı */
      margin: 0 !important;
      width: auto !important;
  }

  /* 6. Varsa spacer (boşluk) elemanlarını kapat */
  #home .spacer {
      display: none !important;
  }
}

/* Hakkımızda Bölümü Mobil Düzenleme */
@media (max-width: 991px) {
    
  /* 1. Satırı ve Sütunları Ortala */
  #aboutus {
      text-align: center !important;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
  }

  /* 2. Görsel sütunundaki sağa iten boşlukları temizle */
  #aboutus .col-lg-6:first-child {
      display: flex !important;
      justify-content: center !important;
      padding: 0 !important;
      margin-bottom: 30px !important;
  }

  /* Görselin kendisindeki sağ margin ve paddingleri sıfırla */
  #aboutus img {
      margin: 0 auto !important;
      padding: 0 !important;
      float: none !important;
      max-width: 80% !important; /* Mobilde çok devasa durmasın */
  }

  /* 3. Metin sütunundaki içerikleri ortala */
  #aboutus .col-lg-6:last-child {
      padding-left: 20px !important;
      padding-right: 20px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Başlık ve Paragrafları Ortala */
  #aboutus h2, 
  #aboutus p, 
  #aboutus span {
      text-align: center !important;
      padding-right: 0 !important; /* HTML'deki pe-lg-5'i mobilde sıfırlar */
      margin-left: auto !important;
      margin-right: auto !important;
  }

  #aboutus p {
      line-height: 1.6 !important;
      font-size: 0.95rem !important;
  }

  /* 4. Arka plandaki SVG dairelerini mobilde gizle veya küçült (Görseli bozmaması için) */
  #aboutus .custom-svg-wrapper-1 svg {
      display: none !important; /* Daireler karışıklık yaratıyorsa gizlemek en iyisidir */
  }
  
  #aboutus .custom-svg-wrapper-1 {
      padding: 0 !important;
  }
}

/* Sadece İletişim Alanı İçin Özel Ortalama */
.contact-fix .row {
  justify-content: center !important; /* Satırı yatayda ortalar */
}

.contact-fix .col-lg-6 {
  flex: 0 0 100% !important;   /* İçteki 6'lık kolonu 12'lik gibi tam genişlik yapar */
  max-width: 100% !important;  /* Sol tarafa sıkışmasını engeller */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* İçindeki öğeleri (buton, ikon) merkeze çeker */
}

/* Gereksiz sağ boşluk bırakan boş kolonu tamamen kapat */
.contact-fix .col-lg-6.pt-5 {
  display: none !important;
}

/* Discord butonu ve altındaki öğelerin hizasını garantile */
.contact-fix .discord-custom-btn, 
.contact-fix img, 
.contact-fix a {
  margin-left: auto !important;
  margin-right: auto !important;
}