/* Global Styles */
div ul li a {
  color: black;
  text-decoration: none;
}

input[type="file"] {
  display: none; /* Dosya yükleme öğesini gizle */
}

/* Profil Menüsü */
.profile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 200px;
  z-index: 1000;
  transform: translateY(-20px);
}


.profile-menu.active {
  display: block;
}

.profile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-menu ul li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.profile-menu ul li:last-child {
  border-bottom: none;
}

.profile-menu ul li i {
  margin-right: 10px;
  font-size: 0.9rem;
  color: #333;
}

.profile-menu ul li:hover {
  background-color: #f1f1f1;
}
  /* Profil Header */
  .profile-header {
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover; /* Başlangıçta contain ile ayarlanır */
    background-position: center;
    background-repeat: no-repeat;
  }



.profile-header img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid white;
}

/* Profil Menü Responsive */
@media (max-width: 768px) {
  .profile-menu {
    width: 150px;
  }
  .profile-header {
    height: 250px; /* Mobil cihazlarda biraz daha küçük yükseklik */
  }
  .profile-header img {
    width: 120px; /* Profil fotoğrafı için daha küçük boyut */
    height: 120px;
  }
}

/* Daha küçük ekranlar için özel ayar (telefonlar) */
@media (max-width: 576px) {
  .profile-header {
    height: 200px; /* Yüksekliği daha da küçültüyoruz */
  }
  .profile-header img {
    width: 100px; /* Profil fotoğrafını küçültme */
    height: 100px;
  }
}

/* Profil fotoğrafının üstündeki dairesel alan için */
.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.upload-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

/* Kalem simgesi stil ayarları */
.edit-icon-profile {
  top: 68%;
  
  position: absolute;
  
  left: calc(47.6% + 39.8px); /* Kalemi profil fotoğrafının sağ kenarına hizalar */
  transform: translate(-50%, -50%);
  color: rgb(0, 0, 0);
  background: rgba(255, 255, 255, 0.8); /* Hafif beyaz arka plan, görünürlüğü artırır */
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  z-index: 20; /* Profil fotoğrafının üstünde kalmasını sağlar */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}

/* Profil fotoğrafına hover olduğunda kalemi göster */
.profile-header img:hover + .edit-icon-profile,
.edit-icon-profile:hover {
  opacity: 1;
  display: flex; /* Görünür hale gelir */
}

/* Varsayılan durumda kalem simgesini biraz gizli tutar */
.edit-icon-profile {
  opacity: 0.8;
}

/* Arka plan resmi ayarları */
.profile-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* Profil fotoğrafının arkasında kalır */
}

/* Mobil görünüm için yüksekliği azalt */
@media (max-width: 768px) {
  .profile-header {
    height: 200px; /* Mobil cihazlar için yükseklik */
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .profile-header {
    margin-top: 10px; /* Mobil cihazlar için yükseklik */
  }
  }

/* Kullanıcı Bilgisi */
.user-name {
  text-align: center;
  margin: 10px auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 80%;
  max-width: 400px;
}

.user-name h3 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  color: #222;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
}

/* Dinamik Arka Plan Rengi */
.user-name.erkek::after {
  background: rgba(30, 144, 255, 0.2);
}

.user-name.kiz::after {
  background: rgba(255, 192, 203, 0.2);
}

.user-name::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  z-index: 0;
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

.user-name:hover::after {
  transform: scale(1);
}

@media (max-width: 600px) {
  .user-name h3 {
    font-size: 28px;
  }
}



/* Profil Header Genişlik ve Responsive Ayarlamalar */
.profile-header img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid white;
  position: relative;
}

.profile-header h3 {
  margin-top: 10px;
}

.rounded-circle {
  width: 75px;
  height: 75px;
}


/* Show edit icon when hovering over the profile image */
.profile-header img:hover + .edit-icon-profile,
.edit-icon-profile:hover {
  display: block;
}

.edit-icon-background {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgb(0, 0, 0);
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8); /* Hafif beyaz arka plan, görünürlüğü artırır */
}

.edit-icon-background img {
  width: 100%; /* Genişliği tam olarak ayarla */
  height: 100%; /* Yükseklik oranını koru */
}


/* Menu Container */
.menu-container {
  border: 2px solid black;
  border-radius: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  background-color: #ffffff;
  padding: 10px 0;
  margin: 0 auto;
  margin-bottom: 10px;
  display: flex; /* Use Flexbox to align items side by side */
  justify-content: space-around; /* Distribute items evenly */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Adds space between the menu items */
  padding: 10px;
  background-color: #f9f9f9; /* Optional: Add background color for better visibility */
  border-radius: 10px; /* Optional: Add rounded corners */
}

.menu-item {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 30px;
}

.menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

.menu-item span {
  font-size: 14px;
}

.details-section {
  width: 50%; /* Menü genişliği kadar olsun */
  margin: 20px auto; /* Ortala */
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  display: none; /* Başlangıçta gizle */
}

.details-section p {
  margin: 10px 0;
  font-size: 18px;
}

/* Küçük ekranlar için */
@media (max-width: 768px) {
  .menu-container {
    flex: 1 1 48%; /* Daha geniş ekranlarda %48 genişlik */
    
    gap: 5px; /* Adjust gap between items on smaller screens */
    width: 80%;
  }

  .menu-item {
    margin-bottom: 10px;
  }

  .details-section {
    width: 80%;
  }
}



div i input {
  width: 100%; /* Genişliği tam olarak ayarla */
  height: 100%; /* Yükseklik oranını koru */
}









/* Profil İstatistikleri */
.profile-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.profile-stats div {
  text-align: center;
  flex: 1;
  padding: 15px;
  background: linear-gradient(135deg, #007bff 0%, #00c3ff 100%);
  color: white;
  border-radius: 8px;
  margin: 0 10px;
  transition: transform 0.3s, background-color 0.3s;
}

.profile-stats div:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, #0056b3 0%, #0099cc 100%);
}

@media (max-width: 600px) {
  .profile-stats {
    flex-direction: column;
    align-items: center;
  }
  
  .profile-stats div {
    margin-bottom: 15px;
    width: 90%;
  }
}





/* Daha iyi yazı hizalaması için */
h5 {
  font-size: 14px;
  margin: 5px 0 5px 0; /* Başlık üstündeki boşluğu ayarlama */
}

p {
  font-size: 10px; /* Yazı boyutunu daha da küçültme */
  margin: 0; /* Paragraf üst ve alt boşluğunu sıfırlama */
  text-align: center; /* Yazıyı ortalama */
}
















.text-container {
  color: #333; /* Metin rengi */
}

.text-container strong {
  font-weight: bold;
  font-size: 1.1rem; /* Başlık boyutu */
  display: block; /* Altına boşluk vermek için */
}

.text-container span {
  font-size: 1rem; /* Değerlerin yazı boyutu */
  color: #666; /* Açık gri yazı rengi */
}

/* Profil Items */
.profile-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.profile-item p {
  margin: 0;
  
}

.edit-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #007bff;
  font-size: 16px;
 
  margin-left: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.edit-button i {
  font-size: 16px;
  color: #007bff;
}

button {
  margin-left: 5px;
  padding: 5px 10px;
  cursor: pointer;
}



.edit-button:hover {
  color: #0056b3;
}

/* Seçme kutusu için stil */
#relationship-input {
  padding: 5px;
  margin-left: 10px;
}

/* Kaydet butonu için stil */
#relationship-save {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

#relationship-save:hover {
  background-color: #0056b3;
}




#university-select,
#job-select,
#city-select,
#about-input {
  width: 500px;
  padding: 5px;
}


.profile-item p {
  margin-right: 10px; /* "Hakkımda" başlığı ile metin arasında sağ tarafa boşluk ekler */
  font-size: 1rem;
}


#city-save,
#job-save,
#edit-button,
#university-save,
#about-save {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

/* Mobile first approach */
@media (max-width: 768px) {
  .profile-header {
    padding: 20px; /* İçerik daralması */
  }

  .profile-header img {
    width: 80px; /* Mobil için profil resmini küçültme */
    height: 80px;
  }

  .edit-icon-profile {
    top: 72%; /* Mobilde biraz daha alta yerleştir */
    left: 50%;
    transform: translate(-50%, -50%); /* Merkezleme için */
    width: 30px; /* İkonun boyutunu ayarla */
    height: 30px; /* İkonun boyutunu ayarla */
    padding: 4px; /* İç boşluğu ayarla */
  }

  .profile-header h3 {
    font-size: 1.2rem; /* Mobilde başlık boyutunu küçült */
  }

  .profile-tabs {
    margin-bottom: 30px; /* Profil sekmelerinden sonra daha fazla boşluk */
  }

  .profile-tabs button {
    padding: 10px; /* Butonları biraz küçült */
    font-size: 1rem;
    width: 100%; /* Mobilde butonlar tüm genişliği kapsasın */
  }

  .profile-stats {
    padding: 10px;
    gap: 10px; /* Mobilde kutular arası biraz daha küçük boşluk */
  }
  .profile-img{
    top:40px;
  }
  .new-questions-section {
    margin-bottom: 40px; /* Yeni sorular bölümüne boşluk ekleme */
    padding: 15px; /* Mobilde içerik daraltma */
  }

 

  .navbar-custom {
    margin-bottom: 20px; /* Menü altına ekstra boşluk */
  }

  .profile-menu {
    width: 55%; /* Menü genişliğini tam genişlik yap */
    left: 75px; /* Menü genişliğini tam olarak profil fotoğrafının altına hizala */
    top: 240px;
  }

 

 
 

  .text-container strong {
    font-size: 1rem; /* Başlık boyutunu küçült */
  }

  .text-container span {
    font-size: 0.9rem; /* Değerlerin yazı boyutunu küçült */
  }
}





/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .menu-container {
    flex-direction:row; /* Dikey düzende göster */
    flex-wrap: nowrap; /* Taşma olmasın */
    max-width: 100%;
    overflow: hidden; /* Taşmaları gizle */
  }
  .menu-item {
    flex: 0 1 auto; /* Öğelerin esnekliğini ayarla */
    min-width: 50px; /* Her öğenin minimum genişliğini ayarla */
    max-width: 100px; /* Her öğenin maksimum genişliğini ayarla */
    box-sizing: border-box; /* Kenar boşlukları hesaplamalarına dahil olsun */
    margin-right: 5px; /* Öğeler arasındaki boşluğu ayarla */
  }
}
@media (max-width: 768px) {
  .profile-item {
      flex-direction: column; /* Dikey düzen */
      align-items: flex-start; /* Soldan hizala */
  }
  
  .edit-button {
      margin-top: 5px; /* Butonlar arasında boşluk */
  }
  textarea, select {
    width: 100%; /* Tam genişlik */
}

#university-select,
#job-select,
#city-select,
#about-input,
#relationship-input {
    width: 90%; /* Tam genişlik */
    padding: 5px; /* İçerik için boşluk */
    box-sizing: border-box; /* Padding ve border genişliğe dahil edilir */
    display: flex; /* Flex container yap */
    justify-content: center; /* Yatay ortala */
    align-items: center; /* Dikey ortala */
    text-align: center; /* Metni ortala */
    margin-top: 5px; /* Üst kısımda biraz boşluk bırakır */
}

}



.profile-actions button {
  font-size: 16px; /* Tüm butonlarda aynı font boyutunu kullan */
  height: 50px; /* İstediğiniz yükseklikte sabit bir değer verin */
}


.profile-actions {
  display: flex;
  
  justify-content: center; /* Butonları ortala */
  margin: 0; /* veya istediğiniz bir değer */
  padding: 10px; /* veya istediğiniz bir değer */
}

.profile-actions button {
  background-color: #f8f9fa; /* Buton arka plan rengi */
  color: #363a3d; /* Metin rengi */
  border: none; /* Kenarları kaldır */
  border-radius: 5px; /* Kenarları yuvarla */
  padding: 10px 15px; /* İç boşluk */
  margin: 0 10px; /* Butonlar arasında boşluk */
  cursor: pointer; /* Fare imlecini göster */
  transition: background-color 0.3s, transform 0.3s; /* Geçiş efekti */
}

.profile-actions button:hover {
  background-color: #e2e6ea; /* Hover durumu arka plan rengi */
  transform: scale(1.05); /* Hover durumu büyütme efekti */
}

.profile-actions button i {
  margin-right: 5px; /* İkon ile metin arasında boşluk */
}

@media (max-width: 600px) {
  .profile-actions {
      flex-direction: column; /* Butonları dikey hizala */
      align-items: center; /* Butonları ortala */
  }

  .profile-actions button {
      width: 100%; /* Butonların genişliğini 100% yap */
      margin: 5px 0; /* Butonlar arasında dikey boşluk */
  }
  .profile-container{
    align-items: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}





.username-display {
  font-size: 1rem; 
  font-weight: 600; 
  color: #333; 
  padding: 5px 10px; 
  border-radius: 5px; 
  background-color: #f0f0f0; 
  transition: background-color 0.3s, color 0.3s; 
}
.username-display:hover {
  background-color: #e0e0e0; 
  color: #007bff; 
  cursor: pointer; 
}




.background-icon {
  position: absolute; /* Konumlandırmayı mutlak yap */
  top: 20px; /* Yukarıdan 20px */
  right: 20px; /* Sağdan 20px */
  color: white; /* İkon rengi */
  font-size: 2rem; /* İkon boyutu */
  transition: color 0.3s; /* Renk geçişi */
}

.background-icon:hover {
  color: #007bff; /* Üzerine gelindiğinde renk değişimi */
}




#upload-profile-button, #upload-background-button {
  display: block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4CAF50; /* Buton rengi */
  color: white;
  border: none;
  cursor: pointer;
  z-index: 11231232;
}

#upload-profile-button:hover, #upload-background-button:hover {
  background-color: #45a049;
}



 /* Modal stil ayarları */
 .modal {
  display: none; /* Başlangıçta gizli */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Arka planın kararması */
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Genişlik */
  border-radius: 10px;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #aaa;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.pagination .active {
  background-color: #007bff;
  color: white;
}

#pagination-numbers {
  display: block; /* ya da inline-block olduğundan emin olun */
}
#pagination-numbers button {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 2px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
}

#pagination-numbers .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}





/* Karanlık Mod Ayarları */
body.dark-mode {
  background-color: #343a40; /* Karanlık arka plan rengi */
  color: white; /* Genel metin rengi */
}

body.dark-mode .text-container {
  color: #f8f9fa; /* Metin rengi */
}

body.dark-mode .text-container strong {
  color: #ffffff; /* Kalın metin rengi */
}

body.dark-mode .text-container span {
  color: #cccccc; /* Açık gri yazı rengi */
}

body.dark-mode .profile-item {
  background-color: #495057; /* Profil öğeleri arka plan rengi */
  border: 1px solid #555; /* Profil öğeleri kenar rengi */
}

body.dark-mode .edit-button {
  color: #007bff; /* Düzenle butonu rengi */
}

body.dark-mode button {
  background-color: #007bff; /* Genel buton arka plan rengi */
  color: white; /* Buton metin rengi */
}

body.dark-mode #relationship-save,
body.dark-mode #city-save,
body.dark-mode #job-save,
body.dark-mode #university-save,
body.dark-mode #about-save {
  background-color: #007bff; /* Kaydet butonu rengi */
  color: white; /* Kaydet butonu metin rengi */
}

body.dark-mode #relationship-save:hover,
body.dark-mode #city-save:hover,
body.dark-mode #job-save:hover,
body.dark-mode #university-save:hover,
body.dark-mode #about-save:hover {
  background-color: #0056b3; /* Hover durumu için arka plan rengi */
}

body.dark-mode .menu-container {
  background-color: #495057; /* Menü arka plan rengi */
  border-radius: 10px; /* Köşeleri yuvarla */
}

body.dark-mode .menu-item {
  color: white; /* Menü öğeleri yazı rengi */
}

body.dark-mode .username-display {
  background-color: #444; /* Kullanıcı adı arka plan rengi */
  color: white; /* Kullanıcı adı yazı rengi */
}

body.dark-mode .username-display:hover {
  background-color: #555; /* Kullanıcı adı üzerine gelindiğinde arka plan rengi */
}

body.dark-mode .background-icon {
  color: white; /* İkon rengi */
}

body.dark-mode .modal-content {
  background-color: #495057; /* Modal arka plan rengi */
  color: white; /* Modal metin rengi */
}

body.dark-mode .pagination button {
  background-color: #495057; /* Sayfalama butonu arka plan rengi */
  color: white; /* Sayfalama butonu metin rengi */
}

body.dark-mode .pagination .active {
  background-color: #007bff; /* Aktif sayfa arka plan rengi */
  color: white; /* Aktif sayfa metin rengi */
}
/* Karanlık Mod Ayarları */
body.dark-mode {
  background-color: #343a40; /* Karanlık arka plan rengi */
  color: white; /* Yazı rengi */
}

body.dark-mode .profile-menu {
  background-color: #444; /* Profil menüsü arka plan rengi */
  border: 1px solid #555; /* Profil menüsü kenar rengi */
}




body.dark-mode .profile-header,
body.dark-mode .user-name,
body.dark-mode .menu-container,
body.dark-mode .profile-stats div,
body.dark-mode .badge {
  background-color: #495057; /* Elemanların arka plan rengi */
  color: white; /* Elemanların yazı rengi */
}

body.dark-mode .profile-menu ul li {
  border-bottom: 1px solid #555; /* Menülerdeki ayırıcı rengi */
}
body.dark-mode .profile-menu ul li:hover {
  background-color: rgb(79, 77, 77); /* Menülerdeki ayırıcı rengi */
}
body.dark-mode .profile-menu ul li a{
  color:white; /* Menülerdeki ayırıcı rengi */
}
body.dark-mode .profile-menu ul li i{
  color:white; /* Menülerdeki ayırıcı rengi */
}

body.dark-mode .badge {
  background-color: #555; /* Rozet arka plan rengi */
}

body.dark-mode .badge:hover {
  background-color: #666; /* Rozet hover rengi */
}
body.dark-mode .edit-button {
  background-color: transparent; /* Arka plan rengi */
  border: none; /* Kenarları kaldır */
  cursor: pointer; /* İmleç değişimi */
  color: #007bff; /* Metin rengi */
  font-size: 16px; /* Font boyutu */
  margin-left: 10px; /* Sol boşluk */
}

body.dark-mode .edit-button i {
  font-size: 16px; /* İkonun boyutu */
  color: #ffffff; /* İkon rengi */
}

body.dark-mode button {
  margin-left: 5px; /* Sol boşluk */
  padding: 5px 10px; /* İç boşluk */
  cursor: pointer; /* İmleç değişimi */
  background-color: #495057; /* Karanlık modda buton arka plan rengi */
  color: white; /* Karanlık modda buton metin rengi */
  border: 1px solid #555; /* Karanlık modda buton kenar rengi */
}

body.dark-mode .edit-button:hover {
  color: #0056b3; /* Hover durumunda metin rengi */
}

body.dark-mode button:hover {
  background-color: #666; /* Hover durumunda buton arka plan rengi */
}


body.dark-mode .profile-stats {
  background-color: #343a40; /* Karanlık mod arka plan rengi */
  box-shadow: none; /* Karanlık modda gölgeyi kaldır */
}



body.dark-mode .profile-stats div {
  background: #343a40; /* Karanlık modda koyu gradient rengi */
  color: white; /* Metin rengi */
}

.profile-stats div:hover {
  transform: translateY(-5px);
  background: #343a40; /* Normal mod hover rengi */
}

body.dark-mode .profile-stats div:hover {
  background:#343a40; /* Karanlık mod hover rengi */
}



body.dark-mode .navbar-custom {
  background-color: #343a40; /* Karanlık mod arka plan rengi */
}

body.dark-mode .navbar-custom .navbar-brand,
body.dark-mode .navbar-custom .navbar-text {
  color: white; /* Karanlık modda yazı rengi */
}

body.dark-mode .navbar-custom .btn-custom {
  padding: 12px 25px;
  background-color: #495057; /* Karanlık mod buton rengi */
  color: white; /* Buton yazı rengi */
}

body.dark-mode .navbar-custom .btn-custom:hover {
  background-color: #6c757d; /* Karanlık modda buton hover rengi */
}



body.dark-mode .navbar-custom .btn:hover {
  background-color: #6c757d; /* Karanlık modda buton hover rengi */
}


body.dark-mode .search-bar input::placeholder {
  color: #a0a0a0; /* Karanlık modda placeholder rengi */
}

/* Profil fotoğrafı ve kullanıcı adı için */
body.dark-mode .profile-infoo {
  color: white; /* Karanlık modda yazı rengi */
}

body.dark-mode .profile-photo {
  border: 2px solid #495057; /* Karanlık modda profil fotoğrafı kenarı */
}





/* Scroll Bar Özelleştirmeleri */
::-webkit-scrollbar {
  width: 8px; /* Scroll bar'ın genişliğini küçültüyoruz */
  background-color: transparent; /* Arka planı şeffaf yapıyoruz */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3); /* Scroll bar'ın kendisini şeffaf yapıyoruz */
  border-radius: 10px; /* Köşeleri yuvarlıyoruz */
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5); /* Hover durumunda biraz daha belirgin yapıyoruz */
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2); /* Scroll bar'ın arka planını koyulaştırıyoruz */
  border-radius: 10px;
}