* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none; /* Basılı tutunca seçim menüsünü kapatır */
}

body { /* Bütün sayfa */
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333;
}

/*Üniversitem logosu yerine text için*/
 @font-face {
    font-family: "Giaza";
    src: url("Icon/Giaza.otf") format("opentype");
    font-weight: 100;
    
}



/* Birinci Header - Logo */
.header-top {
    /* background-color: #ffffff;  <-- BUNU SİL */
    background-color: var(--card-bg, #ffffff); /* <-- BUNU EKLE */
    
    /* Diğer özelliklerin kalsın */
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    transition: background-color 0.3s ease; /* Renk değişimini yumuşat */
}


/* Header içindeki logo */


/* İkinci Header - Menü, arama, giriş ve kayıt */
.header-bottom {
    background-color: #fafafa;
    padding: 15px 20px;
    /* Flex yerine Grid kullanıyoruz */
    display: grid;
    /* Sol(1 birim) - Orta(Otomatik) - Sağ(1 birim) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    gap: 20px; /* Öğeler arası boşluk */
}

/* Soldaki menü barı */
.menu {
    display: flex;
    gap: 15px;
    justify-self: start; /* Grid içinde sola yasla */
}

/* Menü içindeki a etkieti */
.menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* a etiketi üzerine gelince */
.menu a:hover {
    color: #007BFF;
}

/* Arama kutusu */
.search-box {
    width: 100%;
    /* Genişliği sabit tutmak veya max-width vermek önemli */
    width: 400px; 
    max-width: 100%; 
    margin: 0; /* Eski marginleri sıfırla */
    position: relative;
    justify-self: center; /* Grid içinde tam ortaya yasla */
}


.search-box input {
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 25px;
}



.study-search-box input {
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 25px;

}



/* Popup açıldığında butonun popup okunun solunda kalmasını sağla */
.search-box:focus-within .search-clear-btn {
    right: 45px;
}



.auth-buttons {
    display: flex;
    gap: 10px;
    justify-self: end; /* Grid içinde sağa yasla */
    justify-content: flex-end;
}

.auth-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.login-btn {
    background-color: #007BFF;
    color: white;
}

.register-btn {
    background-color: #e0e0e0;
    color: #333;
}

.login-btn:hover {
    background-color: #0056b3;
}

.register-btn:hover {
    background-color: #c2c2c2;
}

/* Ana İçerik - Kartlar */
.universite-galeri {
    max-width: 1200px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 20px;
}

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s;
     /* Mevcut stillerin burada kalacak... */
    
    /* Bu satır SİHİRLİDİR. Tarayıcıya "Ekran dışındaki kartları çizme" der. */
    content-visibility: auto; 
    
    /* Kartın tahmini boyutu (yükseklik kaymasını önler) */
    /* Senin kartların yaklaşık 250-300px yüksekliğinde */
    contain-intrinsic-size: 1px 300px; 
    
}
@media screen and (min-width: 1024px) {
  .card {
  max-width: 100%;
}
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.card h2 {
    justify-content: center;
    display: flex;
    font-size: 18px;
    margin: 10px;
    text-align: center;
}

.card .stars {
    margin: 0 10px 10px;
    color: gold;
    font-size: 18px;
    
}


@media (max-width: 900px) { /* Tablet ve Mobil için kırılma noktası */
    .header-bottom {
        display: flex; /* Mobilde tekrar Flex'e dön */
        flex-direction: column; /* Alt alta sırala */
        gap: 15px;
        padding: 15px;
    }

    .menu {
        justify-self: center;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .search-box {
        width: 100%; /* Tam genişlik */
        max-width: 100%;
    }
    
    .auth-buttons {
        justify-self: center;
        justify-content: center;
        width: 100%;
    }
}

.il {
  display: none;
}
.ilce {
  display: none;
}

/*Filtreleme Barı*/
.filter-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  position: sticky;
}

.filter-bar select,
.filter-bar button {
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
}

.filter-bar button {
  background-color: #007bff;
  color: white;
  border: none;
}

.filter-bar .reset {
  background-color: #6c757d;
  color: white;
}

.filter-bar button:hover {
  opacity: 0.85;
}


/* app.css - Popup, yorum ve arama sistemi stilleri */

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: 0.3s ease;
}



/* Animasyonlar */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
.fade-out {
  animation: fadeOut 0.3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

.popup-container {
  width: 90%;
  max-width: 1100px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  height: 70vh; /* Maksimum yükseklik %90 ekran yüksekliği */
  overflow-y: auto; /* Dikey kaydırma ekle */
  z-index:999999;
  
}

@media (min-width: 1024px) {

  .popup-container {
    height: 95vh;
  }
}

@media (max-width: 1023px) {

  .popup-container {
    height: 70vh;}
}

/* Scrollbar'ı gizle */
.popup-container::-webkit-scrollbar {
  display: none; /* Webkit tarayıcılarında kaydırma çubuğunu gizle */
}

.popup-close {
  position: absolute;
  right: 20px;
  top: 15px;
  background: red;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.popup-main {
  display: flex;
  flex-direction: row;
  gap: 20px;
  transition: all 0.5s ease;
}

.popup-main.show-comment-form .popup-left {
  width: 50%;
}

.popup-main.show-comment-form .popup-right {
  display: block;
}

.popup-left {
  width: 100%;
  transition: 0.5s;
}

.popup-left img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.popup-left h2 {
  text-align: center;
}

.popup-desc {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
}

.popup-desc p {
  margin: 0;
}

.popup-desc button {
  padding: 5px 12px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  justify-self: end; /* butonu sağa yaslar */
  margin-bottom: -30px;
}

/* Eski .desc
.popup-desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.popup-desc button {
  padding: 5px 12px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap; /* Sığmayan kelimenin alta geçmesini engeller */




.popup-rating {
  text-align: center;
  font-size: 16px;
  margin: 5px 0 10px;
}

.popup-comments {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.popup-right {
  width: 50%;
  display: none;
  flex-direction: column;
  gap: 10px;
  background: #fafafa;
  padding: 15px;
  border-radius: 8px;
}

.popup-right textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popup-right button {
  background: #28a745;
  color: white;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.rating-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-group label {
  width: 100px;
}

.stars span {
  font-size: 22px;
  color: #ccc;
  cursor: pointer;
  transition: 0.2s;
}

.stars span.active {
  font-weight: bold;
}

.comment-item {
  margin-bottom: 10px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}


/* Arama Popup */
#search-popup {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
  width: 60%;
  max-height: 400px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none;

}





.search-result {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.search-result img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
}

.search-result h3 {
  font-size: 16px;
  margin: 0;
  flex: 1;
}

.search-result .adrs {
  font-size: 12px;
  color: #666;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 768px) {

  .popup-main {
    flex-direction: column;
  }

  .popup-left,
  .popup-right {
    width: 100% !important;
  }

  #search-popup {
    top: 120px;
  }
}

@media screen and (max-width: 768px) {
  #search-popup {
    width: 90%;
    top: 60% !important;
  }
  
}
@media screen and (max-width: 1280px) {
  #search-popup {
    width: 90%;
    top: 65% !important;
}
}

.adrs {
  margin-bottom: 5px;
}


/* İç popup grid düzeni */
#inner-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  padding: 30px;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  z-index: 10;
  transition: all 0.4s ease;
  border-radius: 15px;
  overflow-y: auto;
}

#inner-popup-content.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Kutucuk düzeni */
.popup-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height:200px; /* Sabit yükseklik */
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.popup-box:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* İç popup grid düzeni */
#inner-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  padding: 30px;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  z-index: 10;
  transition: all 0.4s ease;
  border-radius: 15px;
  overflow-y: auto;
}

#inner-popup-content.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Kutucuk içeriği düzenlemesi */
.popup-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 200px; /* 16:9 oranına göre artırılmış yükseklik */
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.popup-box:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Görsel konteyneri */
.box-image-container {
  width: 100%;
  /* height: 100px;  <-- BU SATIRI SİLİYORUZ */
  aspect-ratio: 16 / 9; /* <-- BU SATIRI EKLİYORUZ: Otomatik 16:9 oranı */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #eee; /* Resim yüklenene kadar gri bir fon */
  position: relative; /* Gerekirse iç konumlandırma için */
}

.box-image-container img {
  width: 100%;
  height: 100%;
  /* Eğer görselin zaten cropper ile 16:9 kesildiyse 'cover' tam oturtur.
     Eğer kesilmemiş görsellerde kenarlardan kırpma olmasın, resmin tamamı görünsün ama kenarlarda boşluk kalsın dersen 'contain' yapabilirsin.
     Ancak senin senaryonda en iyisi 'cover'dır çünkü kutuyu tam doldurur.
  */
  object-fit: cover; 
  transition: transform 0.3s ease;
  display: block; /* Alt kısımdaki boşlukları engellemek için */
}

.popup-box:hover .box-image-container img {
  transform: scale(1.05);
}

.box-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60px; /* Metin alanı için minimum yükseklik */
}

.box-content h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
  text-align: center;
}

.box-content p {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  line-height: 1.4;
}

/* Boş slot stilleri */
.popup-box[onclick] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.popup-box[onclick]:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.popup-box[onclick] h4 {
  color: white;
  margin-bottom: 5px;
  font-size: 16px;
}

.popup-box[onclick] p {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

/* Loading ve hata stilleri */
.loading, .error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  font-size: 16px;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  color: #dc3545;
}

/* Responsive düzen */
@media (max-width: 768px) {
  #inner-popup-content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    padding: 20px;
    gap: 10px;
  }
  
  .popup-box {
    min-height: 200px;
    padding: 10px;
  }
  
  .box-image-container {
    height: auto; /* Yüksekliği serbest bırak */
    aspect-ratio: 16 / 9; /* Oranı zorla */
  }
}

@media (max-width: 480px) {
  #inner-popup-content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    padding: 15px;
  }
  .popup-box {
    min-height: 200px;
    padding: 10px;
  }
}

.popup-box:hover .box-image-container img {
  transform: scale(1.05);
}

/* İçerik alanı */
.box-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-content h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
  text-align: center;
}

.box-content p {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  line-height: 1.4;
}

/* Boş slot stilleri */
.popup-box[onclick] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.popup-box[onclick]:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.popup-box[onclick] h4 {
  color: white;
  margin-bottom: 5px;
  font-size: 16px;
}

.popup-box[onclick] p {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

/* Loading ve hata stilleri */
.loading, .error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  font-size: 16px;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  color: #dc3545;
}

/* Responsive düzen */
@media (max-width: 768px) {
  #inner-popup-content {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    padding: 20px;
    gap: 10px;
  }
  
  .popup-box {
    min-height: 200px;
    padding: 10px;
  }
  
  .box-image-container {
    height: auto; /* Yüksekliği serbest bırak */
    aspect-ratio: 16 / 9; /* Oranı zorla */
  }
}

@media (max-width: 480px) {
  #inner-popup-content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    padding: 15px;
  }
  .popup-box {
    min-height: 200px;
    padding: 10px;
  }
}

#toggle-inner-popup {
  
  background: #4CAF50;
  color: white;
  border: none;
  
  cursor: pointer;
  white-space: nowrap;
  justify-self: start; /* butonu sağa yaslar */
  
}


/*Tümünü göster butonu*/
.btn-container {
  text-align: center;
  margin: 20px 0;
}

#show-all-btn {
  display: block;              /* Ortalamak için block */
  margin: 25px auto;           /* Ortalı */
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#show-all-btn:hover {
  background-color: #004b99;
}









/* ================================================================== */
/* === BAŞLANGIÇ: YENİ TOPLULUK MERKEZİ STİLLERİ (PROFESYONEL GÖRÜNÜM) === */
/* ================================================================== */

/* Eski chat-popup'ı ezelim ve yenisini tanımlayalım */
#chat-popup {
    /* Eski stilleri devredışı bırakmak için display:none !important kullanabiliriz
       ancak biz HTML'i değiştirdiğimiz için (#community-popup) buna gerek yok. */
}

/* === ÇÖZÜM: Arkadaşlar sohbetindeki Geri Tuşu === */
/* Normalde gizli */
#panel-friends .chat-header .back-to-friends-list-btn {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-secondary, #666);
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
}
/* Mobilde göster */
@media (max-width: 768px) {
    #panel-friends .chat-header .back-to-friends-list-btn {
        display: block;
    }
}

.community-hub-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 90vw; /* Genişlik artırıldı */
    max-width: 850px; /* Maksimum genişlik */
    height: 70vh; /* Yükseklik artırıldı */
    min-height: 600px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex; /* Ana layout: flex */
    flex-direction: row; /* Yan yana: Sidebar + Content */
}

/* === Sol Sidebar (Sekmeler) === */
.community-sidebar {
    flex: 0 0 200px; /* 200px sabit genişlik */
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    transition: margin-left 0.4s ease, opacity 0.4s ease;
}

/* Arkadaşlar sekmesinde bir sohbet açıldığında (JS bu class'ı ekleyecek) */
.community-hub-popup.friends-chat-active .community-sidebar {
    margin-left: -200px;
    opacity: 0;
    pointer-events: none; /* Gizliyken tıklanmasın */
}


.community-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px 15px 15px;
    border-bottom: 1px solid #e9ecef;
}

.community-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.community-close-btn-desktop,
.community-close-btn-mobile {
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 5px;
}
.community-close-btn-desktop:hover,
.community-close-btn-mobile:hover {
    color: #000;
}
.community-close-btn-mobile {
    display: none; /* Mobilde gösterilecek */
}

.community-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.community-tab-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 5px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.community-tab-btn i {
    width: 20px;
    margin-right: 12px;
    color: #888;
    transition: color 0.2s ease;
}
.community-tab-btn span {
    flex: 1;
}
.community-tab-btn:hover {
    background: #e9ecef;
    color: #000;
}
.community-tab-btn.active {
    background: #673AB7;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(103, 58, 183, 0.3);
}
.community-tab-btn.active i {
    color: white;
}
.community-tab-btn .notification-badge {
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
}

.community-sidebar-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #e9ecef;
}
.community-sidebar-footer img {
    height: 25px;
    opacity: 0.7;
}

/* === Sağ İçerik Alanı === */
.community-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* Panellerin üst üste binmesi için */
}
.content-panel {
    display: none; /* Varsayılan olarak gizli */
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute; /* Paneller üst üste */
    top: 0; left: 0;
    animation: fadeIn 0.3s ease;
}
.content-panel.active {
    display: flex; /* Aktif olanı göster */
    z-index: 1;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-header-panel {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-header-panel h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}
.chat-header-panel small {
    color: #888;
}

/* Panel 1: Ortak Sohbet (Mevcut stilleri kullanır) */
#panel-global-chat .chat-messages {
    flex: 1; /* Kalan alanı esnek doldur */
    min-height: 0; /* Küçülebilmesi için */
    overflow-y: auto;
    padding: 15px;
}





/* === YENİ: ARKADAŞLAR ÖZEL MESAJ - YANITLAMA KUTUSU === */
.reply-preview-friends {
    padding: 8px 15px;
    background-color: var(--bg-color, #f1f1f1);
    border-bottom: 1px solid var(--border-color, #ddd);
    font-size: 13px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

.reply-preview-friends #reply-preview-content-popup {
    background-color: var(--card-bg, #e4e4e4);
    border-left: 3px solid var(--primary-accent, #007bff);
    padding: 5px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.reply-preview-friends .reply-preview-user {
    font-weight: bold;
    color: var(--primary-accent, #0056b3);
}

.reply-preview-friends .reply-preview-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-friends #cancel-reply-btn-popup {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
}

/* === YENİ: ÖZEL MESAJ KAYDIRMA STİLİ (Opsiyonel ama güzel) === */
.message-bubble.swipeable {
    transition: transform 0.2s ease-out;
}







/* Panel 2 & 3: Yer tutucu stilleri */
.content-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #aaa;
    background: #f8f9fa;
}
.content-placeholder p {
    font-size: 15px;
    margin-top: 15px;
}

/* --- Panel 4: Arkadaşlar (arkadaslar.php'den entegre) --- */
#panel-friends {
    flex-direction: row; /* Sol liste, sağ sohbet */
}

/* arkadaslar.php stillerini bu panel içine scope edelim */
#panel-friends .friends-list {
    width: 260px; /* Sol arkadaş listesi genişliği */
    border-right: 1px solid #e9ecef;
    overflow-y: auto;
    background: #fff;
    height: calc(100% - 50px); /* Alt menü için boşluk bırak */
}
#panel-friends .friend-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
}
#panel-friends .friend-item.active, 
#panel-friends .friend-item:hover {
    background-color: #f8f9fa;
}
#panel-friends .friend-item img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
#panel-friends .friend-info h4 { margin: 0; font-weight: 600; font-size: 15px; }
#panel-friends .friend-info p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

#panel-friends .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px); /* Alt menü için boşluk bırak */
}

/* Hoşgeldin ekranı (arkadaş seçilmediğinde) */
.welcome-screen-friends {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    flex: 1;
    color: #aaa;
    background-color: #f8f9fa;
}
.welcome-screen-friends i { font-size: 60px; margin-bottom: 20px; }
.welcome-screen-friends h3 { font-size: 22px; font-weight: 600; color: #777;}

/* Arkadaş sohbet alanı (arkadaslar.php stilleri) */
#panel-friends .chat-header {
    padding: 10px 20px;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    display: flex;
    align-items: center;
    height: 60px; /* Sabit yükseklik */
}
#panel-friends .chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
#panel-friends .chat-header h3 { margin: 0; font-weight: 600; font-size: 17px; }
#panel-friends .chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Mesaj balonları (arkadaslar.php stilleri) */
#panel-friends .message-bubble { max-width: 65%; padding: 10px 16px; border-radius: 20px; line-height: 1.5; word-wrap: break-word; display: flex; flex-direction: column; }
#panel-friends .message-bubble.sent { background-color: #673AB7; color: white; align-self: flex-end; border-bottom-right-radius: 5px; }
#panel-friends .message-bubble.received { background-color: #fff; border: 1px solid #e5e5e5; align-self: flex-start; border-bottom-left-radius: 5px; }
#panel-friends .message-content { margin-bottom: 5px; }
#panel-friends .message-meta { font-size: 12px; align-self: flex-end; display: flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.7); }
#panel-friends .received .message-meta { color: #888; }
#panel-friends .message-status i { font-size: 16px; }
#panel-friends .message-status .read { color: #4FC3F7; }
#panel-friends .message-bubble img.message-image { max-width: 100%; border-radius: 15px; margin-top: 5px; cursor: pointer; }

#panel-friends .chat-input {
    padding: 10px 15px;
    border-top: 1px solid #e9ecef;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
#panel-friends #message-input-wrapper { flex: 1; position: relative; }
#panel-friends #message-input { width: 100%; padding: 10px 18px; border: none; background-color: #f0f2f5; border-radius: 20px; resize: none; font-size: 15px; box-sizing: border-box; }
#panel-friends #message-input:focus { outline: none; }
#panel-friends .chat-input button { background: none; border: none; cursor: pointer; font-size: 22px; color: #673AB7; padding: 5px; }

/* Arkadaşlar sekmesi alt navigasyonu */
.friends-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e9ecef;
    display: flex;
    z-index: 5;
}
.friends-bottom-nav button {
    flex: 1;
    background: none;
    border: none;
    border-right: 1px solid #e9ecef;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    transition: background 0.2s;
}
.friends-bottom-nav button:last-child { border-right: none; }
.friends-bottom-nav button:hover { background: #f8f9fa; }
.friends-bottom-nav button i { margin-right: 8px; color: #673AB7; }

/* Arkadaş Ekle / İstekler (Alt Paneller) */
.friends-sub-panel {
    display: none; /* JS ile gösterilecek */
    flex-direction: column;
    width: 100%;
    height: calc(100% - 50px); /* Alt menü hariç */
    position: absolute;
    top: 0;
    left: 0;
    background: #f8f9fa;
    z-index: 3;
    animation: fadeIn 0.3s ease;
}
.back-to-friends-list-btn {
    background: none; border: none; font-size: 16px; color: #888; cursor: pointer;
}
.content-wrapper-friends {
    padding: 25px;
    flex: 1;
    overflow-y: auto;
}
.content-header-friends {
    margin-top: 0; margin-bottom: 20px; font-size: 18px; font-weight: 600; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px;
}
.add-friend-form { display: flex; gap: 10px; max-width: 400px; margin-bottom: 20px; }
.add-friend-form input { flex: 1; padding: 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 8px; }
.add-friend-form button { padding: 10px 18px; font-size: 15px; background-color: #673AB7; color: white; border: none; border-radius: 8px; cursor: pointer; }

/* arkadaslar.php'den kopyalanan stil sınıfları */
.form-feedback { margin-top: 15px; padding: 12px; border-radius: 8px; display: none; }
.form-feedback.success { background-color: #D4EDDA; color: #155724; }
.form-feedback.error { background-color: #F8D7DA; color: #721C24; }
.requests-container { margin-top: 20px; display: grid; gap: 12px; }
.request-item { display: flex; align-items: center; padding: 12px; background: #fff; border: 1px solid #e9ecef; border-radius: 8px; }
.request-item img { width: 45px; height: 45px; border-radius: 50%; margin-right: 12px; object-fit: cover;}
.request-item span { flex: 1; font-weight: 600; font-size: 15px; }
.request-actions { display: flex; gap: 8px; }
.request-actions button { padding: 7px 14px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
.btn-accept { background-color: #42b72a; color: white; }
.btn-decline, .btn-cancel { background-color: #e4e6eb; color: #333; }


/* --- Panel 5: Soru Oyunu --- */
.game-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #f0f2f5;
}
.game-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    display: none; /* JS ile yönetilecek */
    flex-direction: column;
    padding: 25px;
    overflow-y: auto;
}
.game-btn-back {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #e9ecef;
    color: #333;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}
.game-btn-back:hover { background: #ddd; }

/* Oyun Ana Menü */
.game-main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    color: #555;
}
.game-main-menu i { color: #673AB7; margin-bottom: 15px; }
.game-main-menu h2 { font-size: 26px; color: #333; margin-bottom: 10px;}
.game-btn-primary, .game-btn-secondary {
    width: 250px;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s;
}
.game-btn-primary { background: #673AB7; color: white; }
.game-btn-primary:hover { background: #512DA8; box-shadow: 0 5px 15px rgba(103, 58, 183, 0.3); }
.game-btn-secondary { background: #e9ecef; color: #333; }
.game-btn-secondary:hover { background: #ddd; }

/* Lobi Ekranı */
#game-panel-lobby h3 { text-align: center; margin-top: 30px; }
.lobby-status-container { max-width: 400px; margin: 20px auto; }
.lobby-countdown {
    font-size: 48px;
    font-weight: bold;
    color: #673AB7;
    text-align: center;
    margin-bottom: 20px;
}
.lobby-countdown small { font-size: 16px; color: #777; display: block; }
#lobby-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    min-height: 100px;
    margin-bottom: 20px;
    align-items: flex-start; /* EKLENDİ: Öğelerin dikeyde esnemesini engeller */
}
.lobby-player-tag {
    background: #e9ecef;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
.lobby-rules {
    text-align: center;
    font-size: 14px;
    color: #777;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 15px;
    border-radius: 8px;
}
.lobby-rules i { color: #856404; }

/* Oyun Soru Ekranı */
.game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.game-info-box { background: #fff; padding: 10px 15px; border-radius: 8px; font-weight: 600; margin-top: 40px; }
.game-timer {
    width: 60px; height: 60px;
    border: 4px solid #673AB7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #673AB7;
}
.game-question-area {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.game-question-area h4 { font-size: 18px; line-height: 1.6; }
.game-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.game-option {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}
.game-option:hover:not(:disabled) { border-color: #673AB7; background: #f8f0ff; }
.game-option:disabled { opacity: 0.7; cursor: not-allowed; }
.game-option.selected { border-color: #673AB7; background: #f0eaff; font-weight: bold; }
.game-option.correct { background: #28a745; color: white; border-color: #28a745; }
.game-option.wrong { background: #dc3545; color: white; border-color: #dc3545; }
.game-player-status { text-align: center; margin-top: 20px; color: #777; }

/* Liderlik Tablosu */
#game-panel-leaderboard h3 { text-align: center; margin-top: 30px; margin-bottom: 20px; }
.leaderboard-top3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}
.top3-player { text-align: center; }
.top3-player img {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    object-fit: cover;
}
.top3-player.rank-1 img { width: 100px; height: 100px; border-color: #ffd700; }
.top3-player.rank-2 img { border-color: #c0c0c0; }
.top3-player.rank-3 img { width: 60px; height: 60px; border-color: #cd7f32; }
.top3-player .username { font-weight: 600; font-size: 15px; margin-top: 5px; }
.top3-player .score { font-size: 14px; color: #673AB7; font-weight: bold; }

.leaderboard-list-container {
    height: 250px;
    overflow-y: auto;
}
.leaderboard-list { list-style: none; padding: 0; margin: 0; }
.leaderboard-list li,
.leaderboard-user-rank {
    color: #a1a1aa !important;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
}
.leaderboard-list .rank { font-size: 16px; font-weight: bold; color: #888; width: 40px; }
.leaderboard-list .username { flex: 1; font-weight: 500; }
.leaderboard-list .score { font-size: 15px; font-weight: bold; color: #673AB7; }

.leaderboard-user-rank {
    margin-top: 15px;
    background: #f0eaff;
    border: 2px solid #673AB7;
    margin-bottom: 0; /* Miras alınan 8px'i sıfırla */
}

/* === Mobil Navigasyon === */
.community-mobile-nav {
    display: none; /* Masaüstünde gizli */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    z-index: 1001;
    flex-direction: row;
}
.community-mobile-nav .community-tab-btn {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin: 0;
    border-radius: 0;
    gap: 4px;
}
.community-mobile-nav .community-tab-btn i { font-size: 20px; margin: 0; }
.community-mobile-nav .community-tab-btn span { font-size: 10px; flex: 0; }
.community-mobile-nav .community-tab-btn.active { background: none; color: #673AB7; }
.community-mobile-nav .community-tab-btn.active i { color: #673AB7; }
.community-mobile-nav .community-tab-btn .notification-badge {
    position: absolute;
    top: 5px;
    right: 20%;
}


@media (max-width: 768px) {
    
    /* 1. Ana Popup Yapısı:
       Popup'ı tam ekran yapar.
    */
    .community-hub-popup {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 0;
        flex-direction: column; /* Üst üste: Content + Mobile Nav */
    }
    
    .community-sidebar {
        display: none; /* Masaüstü sidebar gizlenir */
    }

    /* 2. Ana İçerik Alanı:
       Tüm içeriğin (panellerin) mobil navigasyon (60px) için alttan boşluk bırakmasını sağlar.
    */
    .community-content {
    flex: 1; /* GÜNCELLENDİ: height: 100% yerine bunu kullan */
    min-height: 0; /* EKLENDİ: Esnemesi için */
    box-sizing: border-box; 
    position: relative;
    overflow: hidden; /* EKLENDİ: Taşmayı önle */
    /* padding-bottom: 60px; SİLİNDİ: Artık gerek yok */
}
    
    /* 3. Mobil Navigasyon Barı:
       Altta sabitlenir.
    */
    .community-mobile-nav {
    display: flex;
    position: relative; /* GÜNCELLENDİ: absolute -> relative */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    z-index: 1001;
    flex-direction: row;
    flex-shrink: 0; /* EKLENDİ: Küçülmemesini garanti et */
}
    .community-mobile-nav .community-tab-btn {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px;
        margin: 0;
        border-radius: 0;
        gap: 4px;
    }
    .community-mobile-nav .community-tab-btn i { font-size: 20px; margin: 0; }
    .community-mobile-nav .community-tab-btn span { font-size: 10px; flex: 0; }
    .community-mobile-nav .community-tab-btn.active { background: none; color: var(--primary-accent, #673AB7); }
    .community-mobile-nav .community-tab-btn.active i { color: var(--primary-accent, #673AB7); }
    .community-mobile-nav .community-tab-btn .notification-badge {
        position: absolute;
        top: 5px;
        right: 20%;
    }

    /* 4. Panel Yapısı:
       Panellerin (position: absolute) bu yeni padding'e uymasını sağlar.
    */
    .content-panel {
        display: none; 
    }
    .content-panel.active {
        display: flex;
        flex-direction: column;
        height: 100%; /* Ebeveynin (padding'li) yüksekliğine %100 uyar */
    }

    /* 5. Panel Başlıkları:
       Her panelin kendi başlığını göstermesini sağlar.
    */
    .chat-header-panel {
        display: flex;
        flex-shrink: 0; /* Küçülmesin */
    }

    /* (Global chat'in ekstra başlığını gizle, ana başlık yeterli) */
    #panel-global-chat .chat-header-panel {
        display: none; 
    }
    
    /* (Masaüstü kapatma butonunu gizle) */
    .community-sidebar-header {
        display: none !important; 
    }

    /* 6. Chat Alanları (flex: 1 mucizesi):
       Input'un altta kalmasını ve mesajların üstte scroll olmasını garanti eder.
    */
    #panel-global-chat .chat-messages,
    #panel-cafe .chat-messages,
    #study-chat-container .chat-messages,
    #panel-friends .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    #panel-global-chat .chat-input-container,
    #panel-cafe .chat-input-container,
    #study-chat-container .chat-input-container,
    #panel-friends .chat-input {
        flex-shrink: 0; /* Input alanının küçülmesini engeller */
    }

    /* 7. Arkadaşlar Sekmesi (Mobil):
       Alt menünün (Arkadaş Ekle/İstekler) içeriği ezmesini engeller.
    */
    .friends-bottom-nav {
        position: static; /* position: absolute; yerine */
        flex-shrink: 0;
    }
    
    #panel-friends .friends-list,
    #panel-friends .chat-area {
        /* Yüksekliği, panelin altındaki 'friends-bottom-nav' (50px) kadar kısa yap */
        height: calc(100% - 50px);
    }
    
    /* (Mobil Geri Tuşları) */
    #panel-friends .chat-header .back-to-friends-list-btn,
    #study-chat-container .chat-header-panel .back-to-friends-list-btn {
        display: block; 
    }
}


/* ================================================================== */
/* === BAŞLANGIÇ: TOPLULUK MERKEZİ KARANLIK MOD STİLLERİ === */
/* ================================================================== */
html.dark-mode .community-hub-popup {
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
html.dark-mode .community-sidebar {
    background: #1f1f22; /* Ana card-bg'den bir ton açık */
    border-right-color: var(--border-color);
}
html.dark-mode .community-sidebar-header {
    border-bottom-color: var(--border-color);
}
html.dark-mode .community-sidebar-header h3 {
    color: var(--text-primary);
}
html.dark-mode .community-close-btn-desktop,
html.dark-mode .community-close-btn-mobile {
    color: var(--text-secondary);
}
html.dark-mode .community-close-btn-desktop:hover,
html.dark-mode .community-close-btn-mobile:hover {
    color: var(--text-primary);
}
html.dark-mode .community-tab-btn {
    color: var(--text-secondary);
}
html.dark-mode .community-tab-btn i {
    color: var(--text-light);
}
html.dark-mode .community-tab-btn:hover {
    background: var(--bg-color);
    color: var(--text-primary);
}
html.dark-mode .community-tab-btn.active {
    background: var(--primary-accent);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
html.dark-mode .community-tab-btn.active i {
    color: white;
}
html.dark-mode .community-sidebar-footer {
    border-top-color: var(--border-color);
}

/* Sağ İçerik Karanlık Mod */
html.dark-mode .chat-header-panel {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}
html.dark-mode .chat-header-panel h4 {
    color: var(--text-primary);
}
html.dark-mode .chat-header-panel small {
    color: var(--text-secondary);
}
html.dark-mode .content-placeholder {
    background: var(--bg-color);
    color: var(--text-light);
}

/* Panel 4: Arkadaşlar Karanlık Mod */
html.dark-mode #panel-friends .friends-list {
    background: var(--card-bg);
    border-right-color: var(--border-color);
}
html.dark-mode #panel-friends .friend-item.active, 
html.dark-mode #panel-friends .friend-item:hover {
    background-color: var(--bg-color);
}
html.dark-mode #panel-friends .friend-info h4 { color: var(--text-primary); }
html.dark-mode #panel-friends .friend-info p { color: var(--text-secondary); }
html.dark-mode .welcome-screen-friends {
    background-color: var(--bg-color);
    color: var(--text-light);
}
html.dark-mode .welcome-screen-friends h3 { color: var(--text-secondary); }


html.dark-mode #panel-friends .chat-header {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}
html.dark-mode #panel-friends .chat-header h3 { color: var(--text-primary); }
html.dark-mode #panel-friends .chat-messages {
    background-color: var(--bg-color);
}
html.dark-mode #panel-friends .message-bubble.sent { background-color: var(--primary-accent); }
html.dark-mode #panel-friends .message-bubble.received {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html.dark-mode #panel-friends .received .message-meta { color: var(--text-secondary); }

html.dark-mode #panel-friends .chat-input {
    background: var(--card-bg);
    border-top-color: var(--border-color);
}
html.dark-mode #panel-friends #message-input {
    background-color: var(--bg-color);
    color: var(--text-primary);
}
html.dark-mode #panel-friends .chat-input button { color: var(--primary-accent); }

html.dark-mode .friends-bottom-nav {
    background: var(--card-bg);
    border-top-color: var(--border-color);
}
html.dark-mode .friends-bottom-nav button {
    color: var(--text-secondary);
    border-right-color: var(--border-color);
}
html.dark-mode .friends-bottom-nav button:hover { background: var(--bg-color); }
html.dark-mode .friends-bottom-nav button i { color: var(--primary-accent); }

html.dark-mode .friends-sub-panel { background: var(--bg-color); }
html.dark-mode .back-to-friends-list-btn { color: var(--text-secondary); }
html.dark-mode .content-wrapper-friends { color: var(--text-secondary); }
html.dark-mode .content-header-friends { border-bottom-color: var(--border-color); }
html.dark-mode .add-friend-form input {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html.dark-mode .add-friend-form button { background-color: var(--primary-accent); }

html.dark-mode .form-feedback.success { background-color: var(--success-color-bg); color: var(--success-color); }
html.dark-mode .form-feedback.error { background-color: var(--danger-color-bg); color: var(--danger-color); }
html.dark-mode .request-item { background: var(--card-bg); border-color: var(--border-color); }
html.dark-mode .request-item span { color: var(--text-primary); }
html.dark-mode .btn-accept { background-color: var(--success-color); }
html.dark-mode .btn-decline, .btn-cancel { background-color: var(--border-color); color: var(--text-primary); }


/* Panel 5: Oyun Karanlık Mod */
html.dark-mode .game-container { background: var(--bg-color); }
html.dark-mode .game-btn-back { background: var(--border-color); color: var(--text-primary); }
html.dark-mode .game-btn-back:hover { background: #4b5563; }
html.dark-mode .game-main-menu { color: var(--text-secondary); }
html.dark-mode .game-main-menu i { color: var(--primary-accent); }
html.dark-mode .game-main-menu h2 { color: var(--text-primary); }
html.dark-mode .game-btn-primary { background: var(--primary-accent); }
html.dark-mode .game-btn-primary:hover { background: var(--primary-accent-hover); }
html.dark-mode .game-btn-secondary { background: var(--border-color); color: var(--text-primary); }
html.dark-mode .game-btn-secondary:hover { background: #4b5563; }
html.dark-mode #game-panel-lobby h3 { color: var(--text-primary); }
html.dark-mode .lobby-countdown { color: var(--primary-accent); }
html.dark-mode .lobby-countdown small { color: var(--text-secondary); }
html.dark-mode #lobby-player-list { background: var(--card-bg); }
html.dark-mode .lobby-player-tag { background: var(--border-color); color: var(--text-primary); }
html.dark-mode .lobby-rules { background: var(--warning-color-bg); border-color: #a16207; color: #facc15; }
html.dark-mode .lobby-rules i { color: #f59e0b; }

html.dark-mode .game-info-box { background: var(--card-bg); color: var(--text-primary); }
html.dark-mode .game-timer { border-color: var(--primary-accent); color: var(--primary-accent); }
html.dark-mode .game-question-area { background: var(--card-bg); }
html.dark-mode .game-question-area h4 { color: var(--text-primary); }
html.dark-mode .game-option { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); }
html.dark-mode .game-option:hover:not(:disabled) { border-color: var(--primary-accent); background: #2f2645; }
html.dark-mode .game-option.selected { border-color: var(--primary-accent); background: #3a2d58; }
html.dark-mode .game-option.correct { background: var(--success-color); border-color: var(--success-color); }
html.dark-mode .game-option.wrong { background: var(--danger-color); border-color: var(--danger-color); }
html.dark-mode .game-player-status { color: var(--text-secondary); }

html.dark-mode #game-panel-leaderboard h3 { color: var(--text-primary); }
html.dark-mode .leaderboard-top3 { border-bottom-color: var(--border-color); }
html.dark-mode .top3-player img { border-color: var(--border-color); }
html.dark-mode .top3-player.rank-1 img { border-color: #ffd700; }
html.dark-mode .top3-player.rank-2 img { border-color: #c0c0c0; }
html.dark-mode .top3-player.rank-3 img { border-color: #cd7f32; }
html.dark-mode .top3-player .username { color: var(--text-primary); }
html.dark-mode .top3-player .score { color: var(--primary-accent); }
html.dark-mode .leaderboard-list li { background: var(--card-bg); }
html.dark-mode .leaderboard-list .rank { color: var(--text-secondary); }
html.dark-mode .leaderboard-list .username { color: var(--text-primary); }
html.dark-mode .leaderboard-list .score { color: var(--primary-accent); }
html.dark-mode .leaderboard-user-rank { background: #2f2645; border-color: var(--primary-accent); }

/* Mobil Nav Karanlık Mod */
html.dark-mode .community-mobile-nav {
    background: #1f1f22;
    border-top-color: var(--border-color);
}
html.dark-mode .community-mobile-nav .community-tab-btn.active {
    background: none;
    color: var(--primary-accent);
}
html.dark-mode .community-mobile-nav .community-tab-btn.active i {
    color: var(--primary-accent);
}










/* ========================================= */
/* === BAŞLANGIÇ: YENİ OYUN LOBİSİ VE ÖZEL ODA STİLLERİ === */
/* ========================================= */

/* Oyun Seçim Lobisi */
.game-lobby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
    max-width: 500px;
    width: 100%;
}
.game-lobby-item {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.game-lobby-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.game-lobby-item .game-lobby-image {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    background: #333;
}
.game-lobby-item .game-lobby-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.game-lobby-item .game-lobby-image i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.game-lobby-item:hover .game-lobby-image i {
    opacity: 1;
}
.game-lobby-item:hover .game-lobby-image img {
    filter: brightness(0.8);
}
.game-lobby-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #333);
    text-align: center;
    padding: 15px 10px;
    margin: 0;
}
/* Devre Dışı Oyunlar */
.game-lobby-item.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.game-lobby-item.disabled:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.game-lobby-item.disabled:hover .game-lobby-image img {
    filter: grayscale(1);
    opacity: 0.5;
}
.game-lobby-item.disabled .game-lobby-image i {
    opacity: 1;
}

/* Özel Oda Form Stilleri */
.game-form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin-bottom: 15px;
    text-align: left;
}
.game-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin-bottom: 5px;
}
.game-form-input {
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
}
.game-form-input:focus {
    outline: none;
    border-color: var(--primary-accent, #673AB7);
}

/* Özel Oda Lobisi */
.private-lobby-info {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}
.private-lobby-info .lobby-room-id {
    font-size: 14px;
}
#private-lobby-player-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--bg-color, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}
.private-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg, #fff);
    padding: 8px 12px;
    border-radius: 6px;
}
.private-player-item img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.private-player-item span {
    font-weight: 600;
    color: var(--text-primary, #333);
}
.private-player-item .host-badge {
    font-size: 12px;
    color: var(--primary-accent, #673AB7);
    font-weight: bold;
    margin-left: auto;
}
.private-lobby-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.private-lobby-actions .game-btn-primary,
.private-lobby-actions .game-btn-secondary {
    width: auto;
    flex: 1;
    max-width: 200px;
}
.private-lobby-actions .game-btn-secondary {
    background: var(--danger-color, #dc3545);
    color: white;
}
html.dark-mode .private-lobby-actions .game-btn-secondary {
    background: var(--danger-color, #dc3545);
}

/* ========================================= */
/* === OYUN MANTIĞI CSS GÜNCELLEMELERİ === */
/* ========================================= */

/* P3: Lobi Oda Kimliği (Kayma Düzeltmesi) */
.lobby-room-id {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #888);
    font-weight: 600;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #eee);
    padding: 5px 10px;
    border-radius: 6px;
    
    /* YENİ STİLLER: 'position: relative' kaldırıldı */
    display: block;
    margin: -10px auto 15px auto; /* Başlık ve geri sayım arasına ortalayarak yerleştirir */
    width: fit-content; /* İçeriğe göre genişlik */
}

/* Gerçek Zamanlı Oy Sayımı */
.game-option {
    position: relative;
    /* padding-right: 45px; Oy sayacı için yer aç */
}
.game-option-text {
    flex: 1;
}
.game-option-count {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary, #888);
    background: var(--border-color, #e9ecef);
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 0.3s;
    margin-left: 10px;
}
html.dark-mode .game-option-count {
    background: var(--bg-color, #18181b);
    color: var(--text-secondary, #a1a1aa);
}

/* Oylar gösterilmeye başlandığında (JS ile class eklenecek) */
.game-options-grid.show-votes .game-option-count {
    opacity: 1;
}
/* Cevaplar açıklandığında renkler */
.game-option.correct .game-option-count {
    background: white;
    color: #28a745;
}
.game-option.wrong .game-option-count {
    background: white;
    color: #dc3545;
}
html.dark-mode .game-option.correct .game-option-count,
html.dark-mode .game-option.wrong .game-option-count {
    background: #f4f4f5;
}

/* İzleyici Modu (Elendi) */
.spectator-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    z-index: 10;
    display: none; /* JS ile gösterilecek */
}
html.dark-mode .spectator-overlay {
    background: rgba(24, 24, 27, 0.85);
}
















/* ========================================= */
/* === LİDERLİK TABLOSU AVATAR DÜZELTMESİ === */
/* ========================================= */

/* Açıklama: 
  1. Kural: 4. ve sonraki sıraları hedefler.
  2. Kural: "Sizin Sıranız" bölümünü hedefler.
*/
.leaderboard-list li img,
#leaderboard-user-rank-container li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}


/* ========================================= */
/* === YENİ OYUN STİLLERİ BİTİŞ === */
/* ========================================= */






















/* ================================================================== */
/* === SON: YENİ TOPLULUK MERKEZİ STİLLERİ === */
/* ========================*/

.chat-header {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
        
.chat-header-info {
    display: flex;
    flex-direction: column;
}
        
.online-count {
    font-size: 12px;
    opacity: 0.8;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    background-color: #f4f6f8; /* Arka planı hafifçe değiştirdik */
    overflow-y: auto;
    min-height: 0;
    position: relative; /* YENİ EKLENDİ */
}
        
/* Mesajın sağa kaydırılabilmesi için gerekli stiller */
.chat-item {
    display: flex; /* İçeriği daha iyi hizalamak için flex kullanıyoruz */
    align-items: flex-start; /* Avatarı ve mesaj içeriğini üste hizala */
    margin-bottom: 15px;
    padding: 12px; /* İç boşluğu artırdık */
    border-radius: 12px; /* Köşeleri daha yuvarlak yaptık */
    background: #ffffff; /* Her mesaj için beyaz bir kart */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Hafif bir gölge ekledik */
    gap: 10px; /* Avatar ve mesaj bloğu arasına boşluk */
}

/* Bir mesaj içinde gösterilecek olan yanıtlanmış mesaj kutusu */
.reply-context {
    background-color: #f0eafc;
    border-left: 3px solid #673AB7;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 0.9em;
    opacity: 0.9;
}

.message-text {
    color: #333; /* Metin rengi */
    line-height: 1.5; /* Satır yüksekliğini artırdık */
    word-wrap: break-word; /* Uzun kelimelerin taşmasını engelle */
}

.reply-context-user {
    font-weight: bold;
    color: #512DA8;
    display: block;
    margin-bottom: 3px;
}

.reply-context-message {
    color: #444;
    /* Uzun mesajların sonunu ... ile göstermek için */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mesaj giriş alanının üstünde çıkacak "Yanıtlama" kutusu */
.reply-input-container {
    padding: 8px 15px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    display: none; /* Başlangıçta gizli */
    position: relative;
    border-top-left-radius: 12px; /* Popup'ın köşe yuvarlaklığıyla uyumlu */
    border-top-right-radius: 12px;
}

.reply-input-container .reply-input-content {
    background-color: #e4e4e4;
    border-left: 3px solid #007bff;
    padding: 5px 8px;
    border-radius: 4px;
}

.reply-input-container .reply-input-user {
    font-weight: bold;
    color: #0056b3;
}

.cancel-reply-btn {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.cancel-reply-btn:hover {
    color: #333;
}

        
.chat-item .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
        
.chat-item .user-avatar {
    width: 36px; /* Avatarı biraz büyüttük */
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Küçülmesini engelle */
}
        
.chat-item .message-content {
    display: flex;
    flex-direction: column; /* Kullanıcı adı ve mesajı alt alta sırala */
    width: 100%;
}

.chat-item .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Kullanıcı adı ve mesaj arasına boşluk */
    gap: 8px; /* Kullanıcı adı ve zaman arasına boşluk */
}
        
.chat-item .username {
    font-weight: bold;
    color: #673AB7; /* Ana renk temasını koruyoruz */
    font-size: 15px; /* Fontu biraz büyüttük */
}
        
.chat-item .timestamp {
    font-size: 12px; /* Fontu biraz küçülttük */
    color: #999;   /* Rengi daha soluk yaptık */
}

.chat-input-container {
    padding: 10px;
    border-top: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

.chat-input {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input input {
    flex: 1;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 0 15px;
    font-size: 14px;
}

.chat-input button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background-color: #673AB7;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
        
.char-count {
    text-align: right;
    font-size: 12px;
    color: #888;
}
        
        /* Auth butonları */
        .auth-buttons {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .auth-buttons button {
            padding: 10px 15px;
            background: #673AB7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        /* Responsive tasarım */
        @media (max-width: 768px) {
            .auth-buttons {
               
                align-items: flex-start;
            }
            
            .chat-popup {
                width: 300px;
                right: 10px;
            }
}

        


        



/* Profil Simgesi */
.profile-container {
    position: relative;
    display: flex; /* Hizalama için */
    align-items: center;
    margin-right: 15px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Profil Popup */
.profile-popup {
  position: absolute;
  top: 50px;
  right: 0;
  width: 250px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 15px;
  display: none;
}

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

.profile-popup h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
@media (max-width: 768px) {
  .profile-popup {
    right: -220px; /* Sağdan biraz boşluk bırakır */
    left: auto; /* Soldan otomatik ayarlanır, taşmayı engeller */
  }
}
.avatar-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.avatar-option {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #eee;
  transition: all 0.2s;
}

.avatar-option:hover, .avatar-option.selected {
  border-color: #673AB7;
}

.upload-avatar-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: 1px dashed #ddd;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 15px;
}

.upload-avatar-btn:hover {
  background: #eee;
}

.upload-avatar-input {
  display: none;
}



.unread-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #ff4444;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
}

/* Şikayet Popup Stili */
.complaint-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 30px;
    width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.complaint-container {
    position: relative;
}

.complaint-container h3 {
    margin-bottom: 20px;
    color: #2c3e50;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}

.complaint-container textarea {
    width: 100%;
    height: 120px;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    resize: none;
    font-size: 16px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.complaint-container textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.complaint-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

#gondersikayet {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}

#gondersikayet:hover {
    background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}

#kapatsikayet {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}

#kapatsikayet:hover {
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(198, 40, 40, 0.3);
}

/* Şikayet bildirimi için overlay */
.complaint-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Responsive tasarım */
@media (max-width: 600px) {
    .complaint-popup {
        width: 90%;
        padding: 20px;
    }
    
    .complaint-buttons {
        flex-direction: column;
    }
    
    #gondersikayet, #kapatsikayet {
        width: 100%;
    }
}

/* Uyarı Popup Stili */
.complaint-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.complaint-notification {
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    border-radius: 16px;
    padding: 35px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    border: 3px solid #ff4444;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

.complaint-notification h3 {
    color: #d32f2f;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.complaint-notification p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: 500;
}

.complaint-notification strong {
    color: #d32f2f;
    font-weight: 700;
}

.complaint-notification button {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(179, 0, 0, 0.3);
}

.complaint-notification button:hover {
    background: linear-gradient(135deg, #b71c1c 0%, #8b0000 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(179, 0, 0, 0.4);
}

.complaint-notification button:active {
    transform: translateY(0);
}

/* Geçersiz şikayetler için farklı stil */
.complaint-notification.info {
    border: 3px solid #2196F3;
    animation: pulse-info 2s infinite;
}

@keyframes pulse-info {
    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

.complaint-notification.info h3 {
    color: #1976d2;
}

.complaint-notification.info button {
    background: linear-gradient(135deg, #2196F3 0%, #1976d2 100%);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.complaint-notification.info button:hover {
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}








/* Bildirim stili */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 15px;
    border-radius: 5px;
    z-index: 1000;
    animation: fadeInOut 5s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Düzenleme butonu stili */
.completion-btn {
    position: fixed;
    right: 20px;
    background: #ff9800;
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    z-index: 1000;
    font-size: 14px;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-btn:hover {
    background: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    max-width: 400px;
}

/* Tamamlanmış reklamlar için farklı stil */
.completion-btn[data-completed="true"] {
    background: #4CAF50;
}

.completion-btn[data-completed="true"]:hover {
    background: #45a049;
}

.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo-sol-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo-sag-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo-sol {
  width: 100px;
  height: 100px;
  margin-right: 85px;
  object-fit: contain;
}

.logo {
  width: auto; /* logonun genişliğini ayarlayın */
  height: 60px; /* logonun yüksekliğini ayarlayın */
}

.logo-sag {
  
   width: 100px;
  height: 100px;
  margin-left: 90px;
  object-fit: contain;
}

/* Ekran boyutuna göre düzenleme */
@media (max-width: 1200px) {
  .logo-container {
    flex-direction: column;
    align-items: center;
  }
  
  .logo-sol-container {
    margin-bottom: 2px;
  }
  
  .logo-sag-container {
    margin-top: 2px;
  }
  
  .logo-sol {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
  
  .logo-sag {
    width: 100px;
    height: 100px;
    margin-left: 10px;
  }
}

/* Ekran boyutuna göre düzenleme */
@media (max-width: 768px) {
  .logo-sol {
    width: 100px;
    height: 100px;
    margin-right: 5px;
  }
  
  .logo-sag {
    width: 100px;
    height: 100px;
    margin-left: 5px;
    
    
  }
  .logo{
      margin:10px auto;
  }
  
  
  /*Üniversitem logosu yerine text için*/
  #uni-logo-text {
      margin:10px 0 auto;
  }
  .logo-sol-container {
    margin-right: -10px;
  }
  
}




.processing-indicator {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #2196F3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

 /* ========================================= */
/* === YENİ FOOTER VE YASAL SAYFA STİLLERİ === */
/* ========================================= */

/* Ana Footer Kapsayıcı */
footer {
    background-color: #222;
    color: #aaa;
    padding: 40px 20px;
    font-size: 14px;
    text-align: left; /* Eski center hizalamasını sıfırla */
    line-height: 1.6;
}

/* Footer içeriğini ortalayan ve sütunlara bölen yapı */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Cihaza göre 1, 2 veya 4 sütun göster */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.footer-column {
    padding: 0 10px;
}

.footer-column h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

/* Footer link stillerini sıfırla ve güzelleştir */
footer a {
    color: #aaa;
    text-decoration: none;
    margin: 0; /* Eski stili ez */
    transition: color 0.2s;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

footer p {
    margin-bottom: 10px; /* Paragraflara alt boşluk ver */
    font-size: 13px;
}

/* Sosyal Medya İkonları */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-links a {
    font-size: 22px;
    color: #aaa;
    transition: transform 0.2s, color 0.2s;
}

.social-links a:hover {
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none; /* Sadece ikonlarda alt çizgiyi kaldır */
}

/* Footer Alt Bölümü (Copyright ve Cloudflare) */
.footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Mobilde alt alta gelmesi için */
    gap: 15px;
}

.footer-bottom p {
    margin: 0; /* Copyright yazısındaki boşluğu sıfırla */
    font-size: 13px;
}

.cloudflare-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #aaa;
}

.cloudflare-badge img {
    height: 30px; /* Cloudflare logo boyutu */
    filter: grayscale(100%) brightness(1.5); /* Logoyu footer'a uygun hale getir */
    opacity: 0.7;
}

















/* === YASAL SAYFA STİLLERİ === */
/* (gizlilik.php ve aydinlatma_metni.php için) */

.legal-container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 30px 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    line-height: 1.7;
    font-size: 15px;
    color: #333;
}

.legal-container h2 {
    color: #222;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 24px;
}

.legal-container h3 {
    color: #444;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 18px;
}

.legal-container ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.legal-container p, .legal-container li {
    margin-bottom: 12px;
}













    /* Sorun 3 Çözümü: Yorumlardaki avatarları dairesel yap */
/* ÇÖZÜM: Yorum avatarı için daha ÖZGÜL bir CSS kuralı */
.popup-comments .comment-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 0 !important; /* Alt boşluğu sıfırla */
    margin-right: 10px;
    border: 2px solid #eee;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}




/* --- KULLANICI EYLEM POPUP STİLLERİ --- */
.user-action-popup {
    position: absolute; /* 'fixed' idi, 'absolute' olarak değişti */
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 10002;
    overflow: hidden;
    padding: 5px;
}

.user-action-popup button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
}

.user-action-popup button:hover {
    background-color: #f5f5f5;
}

.user-action-popup button i {
    margin-right: 10px;
    color: #555;
    width: 15px;
}





/* Mod Buton Renkleri */
.mod-btn { color: white; font-weight: 600; }
.btn-del { background-color: #ff9800; } /* Turuncu */
.btn-del:hover { background-color: #f57c00; }

.btn-warn { background-color: #2196F3; } /* Mavi */
.btn-warn:hover { background-color: #1976D2; }

.btn-ban { background-color: #f44336; } /* Kırmızı */
.btn-ban:hover { background-color: #d32f2f; }

/* User Buton Renkleri */
.user-btn { background-color: #f1f1f1; color: #333; }
.user-btn:hover { background-color: #e0e0e0; }
.btn-report { color: #d32f2f; }










.action-feedback {
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

.action-feedback.success {
    color: #155724;
}

.action-feedback.error {
    color: #721c24;
}



/* === YENİ EKLENEN STİLLER: LOGIN SAYFASI === */
.login-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    padding: 40px 35px;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
}

.login-header h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 5px;
}

.login-header p {
    font-size: 16px;
    color: #666;
}

.login-error {
    background: #ffebee;
    color: #c62828;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

.login-form-group {
    margin-bottom: 20px;
}

.login-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.login-form-group label i {
    margin-right: 8px;
    color: #673AB7;
}

.login-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.login-form-group input:focus {
    border-color: #673AB7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.1);
}

.login-options {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.login-options a {
    color: #673AB7;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.login-options a:hover {
    text-decoration: underline;
}

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    gap: 10px;
}

.btn-login-primary {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
}
.btn-login-primary:hover {
    background: linear-gradient(135deg, #512DA8 0%, #673AB7 100%);
    box-shadow: 0 5px 15px rgba(103, 58, 183, 0.3);
}

.login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    margin: 25px 0;
}
.login-separator::before,
.login-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}
.login-separator:not(:empty)::before {
    margin-right: .25em;
}
.login-separator:not(:empty)::after {
    margin-left: .25em;
}

.btn-login-google {
    background: #f8f9fa;
    color: #333;
    border: 2px solid #e9ecef;
}
.btn-login-google:hover {
    background: #e9ecef;
}
.btn-login-google i {
    color: #DB4437;
    font-size: 18px;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #666;
}

.login-footer a {
    color: #673AB7;
    font-weight: 600;
    text-decoration: none;
}
.login-footer a:hover {
    text-decoration: underline;
}

/* Modal Stilleri (kayit.php'dekine benziyor ama login için özelleştirildi) */
.modal-overlay-hidden {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none; 
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay-hidden.modal-visible {
    display: flex;
    opacity: 1;
}

.login-modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px; /* Kayıt modalından daha küçük */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-visible .login-modal-container {
    transform: scale(1);
}

/* Modal Header/Content stilleri kayit.php'deki ile aynı, tekrar yazmaya gerek yok */
/* .modal-header, .modal-close-btn, .modal-content... */

/* === MOBİL UYUMLULUK (app.css'e eklenecek) === */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 25px;
    }
    .login-header h2 {
        font-size: 24px;
    }
}





/* === YENİ: PROFİL SAYFASI STİLLERİ === */
.profile-page-container {
    display: flex;
    max-width: 1200px;
    margin: 30px auto;
    gap: 30px;
}

.profile-sidebar {
    flex: 0 0 280px; /* Sabit genişlik */
}

.profile-avatar-upload {
    background: white;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

#profile-pic-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #f0f0f0;
}

.upload-avatar-btn-profile {
    display: inline-block;
    padding: 10px 20px;
    background: #f5f5f5;
    border: 1px dashed #ddd;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}
.upload-avatar-btn-profile:hover {
    background: #eee;
}
.upload-avatar-input {
    display: none;
}
.profile-avatar-upload small {
    font-size: 12px;
    color: #777;
}

.profile-nav {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.profile-nav-link {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}
.profile-nav-link i {
    margin-right: 10px;
    color: #673AB7;
    width: 20px;
}
.profile-nav-link:last-child {
    border-bottom: none;
}
.profile-nav-link:hover {
    background: #f8f9fa;
}
.profile-nav-link.logout i {
    color: #f44336;
}

.profile-main-content {
    flex: 1; /* Kalan alanı kapla */
}

.profile-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.profile-card h3 {
    font-size: 22px;
    color: #333;
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-info-group {
    display: flex;
    font-size: 16px;
    margin-bottom: 15px;
}
.profile-info-group label {
    font-weight: 600;
    color: #555;
    width: 120px;
}
.profile-info-group span {
    color: #333;
}

.profile-info-alert {
    background: #eef5ff;
    border: 1px solid #b8d4fe;
    color: #314a6c;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-top: 20px;
}
.profile-info-alert i {
    font-size: 18px;
    color: #0056b3;
}

.profile-setting-item {
    display: flex;
    flex-wrap: wrap; /* Mobil için */
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}
.profile-card .profile-setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.profile-card .profile-setting-item:first-of-type {
    padding-top: 0;
}

.setting-info {
    flex: 1;
}
.setting-info strong {
    font-size: 16px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.setting-info span, .setting-info small {
    font-size: 14px;
    color: #777;
}

.btn-profile-action {
    padding: 8px 16px;
    background: #f8f9fa;
    color: #333;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 15px;
}
.btn-profile-action:hover {
    background: #e9ecef;
}
.btn-profile-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8f9fa;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 15px;
}
.status-badge i {
    margin-right: 4px;
}
.status-badge.status-success {
    background: #e8f5e9;
    color: #2E7D32;
}
.status-badge.status-danger {
    background: #ffebee;
    color: #c62828;
}

/* Profil Modalları */
.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

.profile-modal-overlay.modal-visible {
    display: flex;
}

.profile-modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.modal-visible .profile-modal-container {
    transform: scale(1);
}

.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #673AB7;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.forgot-password-link:hover {
    text-decoration: underline;
}

.profile-form-message {
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    display: none; /* Başlangıçta gizli */
}
.profile-form-message.success {
    background: #e8f5e9;
    color: #2E7D32;
    display: block;
}
.profile-form-message.error {
    background: #ffebee;
    color: #c62828;
    display: block;
}


/* === YENİ: YUKARI ÇIK BUTONU === */
#scroll-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #673AB7;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none; /* JS ile gösterilecek */
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 998; /* Chat'in altında, reklamların üstünde */
}
#scroll-to-top.visible {
    display: block;
    opacity: 0.8;
}
#scroll-to-top:hover {
    opacity: 1;
    transform: translateY(-5px);
}

/* === PROFİL SAYFASI MOBİL UYUMLULUK === */
@media (max-width: 768px) {
    .profile-page-container {
        flex-direction: column;
    }
    .profile-sidebar {
        flex: 0 0 auto; /* Genişlik sıfırlanır */
    }
    .profile-setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .btn-profile-action, .status-badge {
        margin-left: 0;
    }
}




/* === YENİ: PROFİL SAYFASI AVATAR SEÇENEKLERİ === */
.avatar-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
    justify-items: center; /* Ortalamak için */
}
.avatar-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid #eee;
    transition: all 0.2s;
}
.avatar-option:hover {
    border-color: #ccc;
}
.avatar-option.selected {
    border-color: #673AB7;
    box-shadow: 0 0 10px rgba(103, 58, 183, 0.4);
}







/* Modal Header/Content Stilleri */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    margin: 0;
    color: #333;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* Login Form Group Stilleri (profil.php için) */
.login-form-group {
    margin-bottom: 20px;
}

.login-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.login-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.login-form-group input:focus {
    border-color: #673AB7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.1);
}

/* Login Button Stilleri */
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    gap: 10px;
}

.btn-login-primary {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
}

.btn-login-primary:hover {
    background: linear-gradient(135deg, #512DA8 0%, #673AB7 100%);
    box-shadow: 0 5px 15px rgba(103, 58, 183, 0.3);
}

/* Forgot Password Link */
.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #673AB7;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.forgot-password-link:hover {
    text-decoration: underline;
}





/* === YENİ: CHAT KAPAT BUTONU === */
.chat-header button#closeChat {
    background: none;
    border: none;
    color: white;
    font-size: 20px; /* İkon boyutu */
    font-weight: 600;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 20px; /* İkonu ortalamak için */
    text-align: center;
    transition: background 0.2s;
}

.chat-header button#closeChat:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-header button#closeChat i {
    margin-right: 2px; /* Yazı ve ikon arası boşluk */
}




/* === YENİ: SOHBET KISITLAMA UYARISI === */
.chat-disabled-warning {
    padding: 15px;
    text-align: center;
    background: #fdf8e6;
    border-top: 1px solid #eee;
}
.chat-disabled-warning p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}
.chat-disabled-warning .btn-profile-action {
    margin: 0;
    background: #0056b3;
    color: white;
    border-color: #0056b3;
    text-decoration: none;
    display: inline-block;
}
.chat-disabled-warning .btn-profile-action:hover {
    background: #004a99;
}












/* === YENİ EKLENEN CSS (Akıllı Kaydırma Butonu) === */
        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative; /* Butonun konumlanması için */
        }
        
        .chat-scroll-down-btn {
            display: none; /* Varsayılan olarak gizli */
            position: absolute;
            bottom: 85px; /* chat-input yüksekliğine göre ayarlayın */
            right: 25px;
            z-index: 10;
            background-color: var(--purple-bg);
            color: var(--primary-color);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            transition: opacity 0.3s ease;
        }
        
        .chat-scroll-down-btn.visible {
            display: block; /* Görünür */
        }
        
        @media (max-width: 768px) {
             .chat-scroll-down-btn {
                 bottom: 75px;
                 right: 15px;
             }
        }
        /* === YENİ CSS SONU === */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    /* ========================================= */
/* === GÜNCELLENDİ: KAYIP ÜNİVERSİTE BUTONU === */
/* ========================================= */

#missing-uni-btn {
    position: absolute;
    /* Masaüstü: Input'un altında belir */
    top: 100%;
    left: 50%;
    
    /* Başlangıç konumu (gizli): Input'un altında, hafif yukarıda */
    transform: translateX(-50%) translateY(0px); 
    
    width: max-content; /* İçeriğe göre genişle */
    max-width: 90%;     /* Mobilde kenara yapışmayı engelle */
    z-index: 998;      /* Arama popup'ının (1000) üstünde */
    background: #ff9800;
    color: white;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    white-space: nowrap;
}

#missing-uni-btn.visible {
    opacity: 1;
    /* Bitiş konumu (görünür): Input'un altında, 5px boşlukla */
    transform: translateX(-50%) translateY(-80px); 
    visibility: visible;
}

#missing-uni-btn:hover {
    background: #f57c00;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

#missing-uni-btn i {
    margin-right: 8px;
}

/* === MOBİL KONUM GÜNCELLEMESİ === */
@media (max-width: 768px) {
    #missing-uni-btn {
        /* Konumu alta (top) değil, üste (bottom) sabitle */
        top: auto;
        bottom: 100%;

        font-size: 13px;
        padding: 8px 14px;

        /* Başlangıç konumu (gizli): Input'un üstünde, hafif aşağıda */
        transform: translateX(-50%) translateY(-10px); 
    }

    #missing-uni-btn.visible {
        /* Bitiş konumu (görünür): Input'un üstünde, 10px boşlukla */
        transform: translateX(-50%) translateY(-35px);
    }
}

/* Scroll-to-top ile çakışırsa onu sola al */
#scroll-to-top.visible {
    left: 30px;
}

/* Popup form stilleri (login stillerini yeniden kullanıyoruz) */
#missing-uni-form .login-form-group {
    margin-bottom: 15px;
    text-align: left;
}
#missing-uni-form .login-form-group label {
    margin-bottom: 6px;
    font-size: 15px;
}

/* Önce her iki butona da temel stilleri verelim */
#gonder-missing-uni, 
#kapat-missing-uni {
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}


/* Yeşil "Gönder" Butonu 
  (Stilleri #gondersikayet'ten kopyalandı) 
*/
#gonder-missing-uni {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}
#gonder-missing-uni:hover {
    background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}

/* Kırmızı "Kapat" Butonu
  (Stilleri #kapatsikayet'ten kopyalandı) 
*/
#kapat-missing-uni {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}
#kapat-missing-uni:hover {
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(198, 40, 40, 0.3);
}

/* Butonlar devre dışı kaldığında (Gönderiliyor... yazarken) */
#gonder-missing-uni:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}




/* === ŞİFREMİ UNUTTUM MODAL (POPUP) STİLLERİ === */

/* Başlangıçta gizli durum (login.php'de bu class kullanılır) */
.modal-overlay-hidden {
    display: none;
    opacity: 0;
}

/* JS ile eklendiğinde görünür yapan class */
.modal-visible {
    display: flex; /* Gizliden flex'e geçirir */
    opacity: 1;
    background: rgba(0, 0, 0, 0.5); /* Arka planı karartır */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

/* İçerik kutusu (login.php'deki login-modal-container) */
.login-modal-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 450px;
    animation: slideIn 0.3s ease;
}

/* Modal başlığı (login.php'deki modal-header) */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}
.modal-header h2 {
    margin: 0;
    font-size: 20px;
}
.modal-close-btn {
    font-size: 28px;
    font-weight: bold;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.modal-close-btn:hover {
    color: #333;
}

/* Modal içeriği (login.php'deki modal-content) */
.modal-content {
    padding: 20px 25px;
}

/* Form Hata/Başarı Mesajları (login.php'deki forgot-form-message) */
#forgot-form-message.login-error {
    display: block;
    padding: 12px;
    background: #ffebee;
    color: #c62828;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 14px;
}
#forgot-form-message.login-success {
    display: block;
    padding: 12px;
    background: #e8f5e9;
    color: #2E7D32;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 14px;
}


/* Animasyonlar */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}









/* Ana Banner Stili */
    .cookie-consent-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #232a34;
        color: #fff;
        padding: 20px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
        z-index: 10000;
        display: none; /* JS ile gösterilecek */
        font-size: 15px;
    }
    .cookie-consent-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        max-width: 1300px;
        margin: 0 auto;
        gap: 15px;
    }
    .cookie-consent-text {
        flex: 1 1 500px; /* Esnek büyüme, min 500px */
    }
    .cookie-consent-text a {
        color: #4a90e2;
        text-decoration: underline;
    }
    .cookie-consent-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .cookie-btn {
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        font-size: 14px;
        transition: background 0.3s;
        white-space: nowrap;
    }
    .cookie-btn-accept {
        background: #4CAF50;
        color: white;
    }
    .cookie-btn-accept:hover { background: #45a049; }
    .cookie-btn-reject, .cookie-btn-settings {
        background: #4f5b6f;
        color: white;
    }
    .cookie-btn-reject:hover, .cookie-btn-settings:hover { background: #606c82; }

    /* Ayar Modalı Stili */
    .cookie-settings-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10001;
        display: none;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .cookie-settings-content {
        background: white;
        color: #333;
        border-radius: 10px;
        padding: 30px;
        width: 100%;
        max-width: 600px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .cookie-settings-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    .cookie-settings-header h3 {
        font-size: 22px;
        margin: 0;
    }
    .cookie-category {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 0;
    }
    .cookie-category:last-of-type { border-bottom: none; }
    .cookie-category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cookie-category-title {
        font-size: 17px;
        font-weight: bold;
    }
    .cookie-category p {
        font-size: 14px;
        color: #666;
        margin-top: 8px;
    }
    .cookie-settings-footer {
        margin-top: 25px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    .cookie-btn-save {
        background: #2196F3;
        color: white;
    }
    .cookie-btn-save:hover { background: #1E88E5; }

    /* Toggle Switch Stili */
    .switch {
        position: relative;
        display: inline-block;
        width: 44px; /* Küçültüldü */
        height: 24px; /* Küçültüldü */
        flex-shrink: 0;
    }
    .switch input { display: none; }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 18px; /* Küçültüldü */
        width: 18px; /* Küçültüldü */
        left: 3px; /* Ayarlandı */
        bottom: 3px; /* Ayarlandı */
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #4CAF50;
    }
    input:checked + .slider:before {
        transform: translateX(20px); /* Ayarlandı */
    }
    input:disabled + .slider {
        background-color: #dcdcdc;
        cursor: not-allowed;
    }
    input:disabled + .slider:before {
        background-color: #f5f5f5;
    }
    
    
    
    /* ========================================= */
/* === YENİ! GERÇEK KARANLIK MOD (SİYAH/GRİ) === */
/* ========================================= */

/* 1. Karanlık Mod Renk Değişkenleri */
html.dark-mode {
    /* Siyah/Gri Tonları */
    --bg-color: #18181b;        /* Ana Zemin (Çok Koyu Gri) */
    --card-bg: #27272a;         /* Kartlar (Koyu Gri) */
    --border-color: #3f3f46;    /* Kenarlıklar (Orta Gri) */
    
    --text-primary: #f4f4f5;    /* Ana Metin (Neredeyse Beyaz) */
    --text-secondary: #a1a1aa;  /* İkincil Metin (Gri) */
    --text-light: #71717a;      /* Soluk Metin (Koyu Gri) */
    --text-logo: #fff;

    /* Marka Rengi (Mevcut Mor temanız) */
    --primary-accent: #8b5cf6; /* Canlı Mor */
    --primary-accent-hover: #7c3aed;
    --primary-accent-bg: rgba(139, 92, 246, 0.1);

    /* Durum Renkleri (Daha Canlı) */
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    
    --success-color-bg: rgba(34, 197, 94, 0.1);
    --danger-color-bg: rgba(239, 68, 68, 0.1);
    --warning-color-bg: rgba(245, 158, 11, 0.1);
    --info-color-bg: rgba(59, 130, 246, 0.1);
}

/* 2. Logo Değişimi */
.logo-dark {
    display: none;
}
html.dark-mode .logo-light {
    display: none !important; /* login.php'deki stili ezmek için */
}
html.dark-mode .logo-dark {
    display: block !important;
    margin: 0 auto !important; /* HATA DÜZELTME: Hem dikey boşluğu sıfırla hem yatay ortala ve zorla */
    max-width: 100%; /* Mobilde taşmayı önlemek için güvenlik */

    
}

/* 3. Tema Değiştirme Butonu */
.dark-mode-toggle.menu-toggle {
    /* Sabit konumlandırma (position: fixed vb.) kaldırıldı */
    background: none;
    border: none;
    color: #333; /* Normal menü linki rengi */
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    padding: 0 5px; /* Diğer linklere benzer boşluk */
    margin-left: 10px; /* "İletişim" yazısından ayırmak için */
}

.dark-mode-toggle.menu-toggle:hover {
    color: #007BFF; /* Normal menü hover rengi */
    transform: rotate(15deg); /* Sabit konumda olmadığı için translateY'e gerek yok */
}

/* Karanlık modda menüdeki butonun rengi */
html.dark-mode .dark-mode-toggle.menu-toggle {
    color: var(--text-secondary);
    background: none;
    border: none;
}

html.dark-mode .dark-mode-toggle.menu-toggle:hover {
    color: var(--primary-accent);
    border: none;
}

/* İkonları gizle/göster (Bu kısım aynı kalıyor) */
.dark-mode-toggle .fa-sun {
    display: none;
}

html.dark-mode .dark-mode-toggle .fa-sun {
    display: block;
    color: #f59e0b; /* Sarı */
}
html.dark-mode .dark-mode-toggle .fa-moon {
    display: none;
}
html.dark-mode .dark-mode-toggle {
    background: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
html.dark-mode .dark-mode-toggle:hover {
    border-color: #f59e0b;
}

/* 4. Genel (app.css) Ayarlamaları */
html.dark-mode body {
    background: var(--bg-color);
    color: var(--text-secondary);
}
html.dark-mode .header-top {
    background-color: var(--card-bg);
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}
html.dark-mode .header-bottom {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}
html.dark-mode .menu a {
    color: var(--text-secondary);
}
html.dark-mode .menu a:hover {
    color: var(--primary-accent);
}
html.dark-mode .search-box input {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html.dark-mode .search-box input:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px var(--primary-accent-bg);
}
html.dark-mode .auth-buttons p,
html.dark-mode .auth-buttons strong {
    color: var(--text-primary);
}
html.dark-mode .auth-buttons button {
    background-color: var(--primary-accent);
    color: white;
}
html.dark-mode .auth-buttons button.register-btn {
    background-color: var(--border-color);
    color: var(--text-primary);
}
html.dark-mode .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
html.dark-mode .card h2,
html.dark-mode h2,
html.dark-mode h3 {
    color: var(--text-primary);
}
html.dark-mode .card .adrs {
    color: var(--text-secondary);
}
html.dark-mode .filter-bar {
    background-color: var(--card-bg);
}
html.dark-mode .filter-bar select {
    background-color: var(--bg-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark-mode .filter-bar button {
    background-color: var(--primary-accent);
}
html.dark-mode .filter-bar .reset {
    background-color: var(--text-light);
    color: var(--text-primary);
}
html.dark-mode .popup-container {
    background: var(--card-bg);
    color: var(--text-secondary);
}
html.dark-mode .popup-close {
    background: var(--danger-color);
    color: white;
}
html.dark-mode .popup-desc button,
html.dark-mode .popup-right button {
    background: var(--primary-accent);
}
html.dark-mode .popup-right {
    background: var(--bg-color);
}
html.dark-mode .popup-right textarea {
    background: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html.dark-mode .popup-comments {
    border-color: var(--border-color);
}
html.dark-mode .comment-item {
    border-color: var(--border-color);
}
html.dark-mode .comment-user strong {
    color: var(--text-primary);
}
html.dark-mode .comment-user small {
    color: var(--text-secondary);
}
html.dark-mode #search-popup {
    background: var(--card-bg);
    border-color: var(--border-color);
}
html.dark-mode .search-result {
    border-color: var(--border-color);
}
html.dark-mode .search-result:hover {
    background: var(--bg-color);
}
html.dark-mode .search-result h3 {
    color: var(--text-primary);
}
html.dark-mode .search-result .adrs {
    color: var(--text-secondary);
}
html.dark-mode #inner-popup-content {
    background: var(--card-bg);
}
html.dark-mode .popup-box {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
html.dark-mode .popup-box:hover {
    background-color: #3f3f46;
}

html.dark-mode .box-content p {
    color: var(--text-secondary);
}
html.dark-mode .popup-box[onclick] {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%) !important;
}
html.dark-mode .popup-box[onclick] h4,
html.dark-mode .popup-box[onclick] p {
    color: white !important;
}
html.dark-mode #toggle-inner-popup {
    background: var(--primary-accent);
}
html.dark-mode .processing-indicator .spinner {
    border-top-color: var(--primary-accent);
}

/* 5. index.php Chat Stilleri */
html.dark-mode #chat-popup {
    background: var(--card-bg);
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
html.dark-mode .chat-header {
    background: linear-gradient(135deg, #333, #111) !important;
}
html.dark-mode .chat-messages {
    background: var(--bg-color);
}
html.dark-mode .chat-item {
    background: var(--card-bg);
    box-shadow: none;
    border: 1px solid var(--border-color);
}
html.dark-mode .chat-item .username {
    color: var(--primary-accent);
}
html.dark-mode .chat-item .message-text {
    color: var(--text-primary);
}
html.dark-mode .reply-context {
    background: var(--bg-color);
    border-color: var(--primary-accent);
}
html.dark-mode .reply-context-user {
    color: var(--primary-accent);
}
html.dark-mode .reply-context-message {
    color: var(--text-secondary);
}
html.dark-mode .reply-input-container {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}
html.dark-mode .reply-input-container .reply-input-content {
    background-color: var(--card-bg);
}
html.dark-mode .chat-input-container {
    border-color: var(--border-color);
    background: var(--card-bg);
}
html.dark-mode .chat-input input {
    background: var(--bg-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark-mode .chat-input button {
    background: var(--primary-accent);
}
html.dark-mode .chat-disabled-warning {
    background: var(--warning-color-bg);
}
html.dark-mode .chat-disabled-warning p {
    color: var(--text-secondary);
}
html.dark-mode .chat-scroll-down-btn {
    background-color: var(--card-bg) !important;
    color: var(--primary-accent) !important;
    border-color: var(--border-color) !important;
}

/* 6. index.php Diğer Stiller */
html.dark-mode .profile-popup {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
html.dark-mode .profile-popup h3 {
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark-mode .upload-avatar-btn {
    background: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
html.dark-mode .upload-avatar-btn:hover {
    background: #3f3f46;
}
html.dark-mode .complaint-overlay {
    background: rgba(10, 10, 10, 0.7);
}
html.dark-mode .complaint-popup {
    background: var(--card-bg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
html.dark-mode .complaint-container h3 {
    color: var(--text-primary);
}
html.dark-mode .complaint-container textarea {
    background: var(--bg-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark-mode .complaint-container textarea:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px var(--primary-accent-bg);
}
html.dark-mode .legal-container {
    background: var(--card-bg);
    color: var(--text-secondary);
}
html.dark-mode .legal-container h2,
html.dark-mode .legal-container h3 {
    color: var(--text-primary);
    border-color: var(--border-color);
}
html.dark-mode #cookie-consent-banner {
    background: #181a1b;
    color: #ddd;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
}
html.dark-mode .cookie-btn-reject, 
html.dark-mode .cookie-btn-settings {
    background: #374151;
    color: #f3f4f6;
}
html.dark-mode .cookie-settings-modal {
    background: rgba(10, 10, 10, 0.7);
}
html.dark-mode .cookie-settings-content {
    background: var(--card-bg);
    color: var(--text-primary);
}
html.dark-mode .cookie-settings-header,
html.dark-mode .cookie-category {
    border-color: var(--border-color);
}
html.dark-mode .cookie-category p {
    color: var(--text-secondary);
}
html.dark-mode .slider {
    background-color: #4b5563;
}
html.dark-mode footer {
    background-color: #111;
    color: #888;
}
html.dark-mode .footer-container {
    border-color: #333;
}
html.dark-mode .footer-column h4 {
    color: #fff;
    border-color: #333;
}
html.dark-mode footer a {
    color: #888;
}
html.dark-mode footer a:hover {
    color: #fff;
}
html.dark-mode .footer-bottom {
    border-color: #333;
}

/* 7. login.php & kayit.php Stilleri */
html.dark-mode .login-container {
    background: var(--bg-color) !important;
}
html.dark-mode .login-box {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
html.dark-mode .login-header {
    background: var(--bg-color) !important;
}
html.dark-mode .login-header h2,
html.dark-mode .login-header h1 {
    color: var(--text-primary) !important;
}
html.dark-mode .login-header p {
    color: var(--text-secondary) !important;
}
html.dark-mode .login-error {
    background: var(--danger-color-bg) !important;
    color: #f87171 !important;
}
html.dark-mode .login-form-group label {
    color: var(--text-primary) !important;
}
html.dark-mode .login-form-group input {
    background: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .login-form-group input:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px var(--primary-accent-bg) !important;
}
html.dark-mode .login-options a,
html.dark-mode .login-footer a {
    color: var(--primary-accent) !important;
}
html.dark-mode .login-footer {
    color: var(--text-secondary) !important;
}
html.dark-mode .login-separator {
    color: var(--border-color) !important;
}
html.dark-mode .login-separator::before,
html.dark-mode .login-separator::after {
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-login-google {
    background: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-login-google:hover {
    background: #374151 !important;
}
html.dark-mode .modal-overlay-hidden {
    background: rgba(0,0,0,0.7) !important;
}
html.dark-mode .login-modal-container,
html.dark-mode .modal-header,
html.dark-mode .modal-content {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .modal-header h2 {
    color: var(--text-primary) !important;
}
html.dark-mode .modal-close-btn {
    color: var(--text-secondary) !important;
}
html.dark-mode .modal-content p {
    color: var(--text-secondary) !important;
}
/* kayit.php ekleri */
html.dark-mode .container {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode .header {
    background: linear-gradient(135deg, #333, #111) !important;
}
html.dark-mode #password-requirements {
    background-color: var(--bg-color) !important;
}
html.dark-mode #password-requirements p.invalid {
    color: #f87171 !important;
}
html.dark-mode .kvkk-group {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
}
html.dark-mode .kvkk-group label {
    color: var(--text-secondary) !important;
}
html.dark-mode .kvkk-group label a {
    color: var(--primary-accent) !important;
}
html.dark-mode .btn-secondary {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-secondary:hover {
    background: #4b5563 !important;
}
html.dark-mode #modal-container,
html.dark-mode #modal-container-gizlilik,
html.dark-mode #modal-container-kosullar {
    background: var(--card-bg) !important;
}
html.dark-mode .modal-content h3 {
    color: var(--primary-accent) !important;
}

/* 8. arkadaslar.php Stilleri */
html.dark-mode body {
    background-color: var(--bg-color) !important;
}
html.dark-mode .sidebar {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .sidebar-header a {
    color: var(--primary-accent) !important;
}
html.dark-mode .nav-tabs button {
    color: var(--text-primary) !important;
}
html.dark-mode .nav-tabs button i {
    color: var(--primary-accent) !important;
}
html.dark-mode .nav-tabs button:hover {
    background-color: var(--bg-color) !important;
}
html.dark-mode .nav-tabs button.active {
    background-color: var(--primary-accent-bg) !important;
    color: var(--primary-accent) !important;
}
html.dark-mode .friends-list {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .friend-item.active, 
html.dark-mode .friend-item:hover {
    background-color: var(--bg-color) !important;
}
html.dark-mode .friend-info h4 {
    color: var(--text-primary) !important;
}
html.dark-mode .friend-info p {
    color: var(--text-secondary) !important;
}
html.dark-mode .chat-area {
    background-color: var(--bg-color) !important;
}
html.dark-mode .chat-header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .chat-header h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .chat-messages {
    background-color: var(--bg-color) !important;
}
html.dark-mode .message-bubble.sent {
    background-color: var(--primary-accent) !important;
}
html.dark-mode .message-bubble.received {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .received .message-meta {
    color: var(--text-secondary) !important;
}
html.dark-mode .chat-input {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode #message-input {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .chat-input button {
    color: var(--primary-accent) !important;
}
html.dark-mode #reply-preview {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode #reply-preview-content {
    background-color: var(--card-bg) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode #welcome-screen {
    background-color: var(--bg-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode #welcome-screen i {
    color: var(--border-color) !important;
}
html.dark-mode #welcome-screen h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .content-wrapper {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .content-header {
    border-color: var(--border-color) !important;
}
html.dark-mode .add-friend-form input {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .add-friend-form button {
    background-color: var(--primary-accent) !important;
}
html.dark-mode .request-item, 
html.dark-mode .friends-list-item {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .request-item span, 
html.dark-mode .friends-list-item span {
    color: var(--text-primary) !important;
}
html.dark-mode .btn-decline, 
html.dark-mode .btn-cancel, 
html.dark-mode .remove-friend {
    background-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 9. reklamlarim.php Stilleri */
html.dark-mode .header {
    background: linear-gradient(135deg, #333, #111) !important;
}
html.dark-mode .back-button {
    background: var(--card-bg) !important;
    color: var(--primary-accent) !important;
}
html.dark-mode .back-button:hover {
    background: var(--bg-color) !important;
}
html.dark-mode .alert-box.alert-danger {
    background: var(--danger-color-bg) !important;
    color: #f87171 !important;
}
html.dark-mode .alert-box[style*="background: #E8F5E9"] {
    background: var(--success-color-bg) !important;
    color: var(--success-color) !important;
}
html.dark-mode .ad-card {
    background: var(--card-bg) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}
html.dark-mode .ad-image-container {
    background: var(--bg-color) !important;
}
html.dark-mode .ad-status {
    background: rgba(0,0,0,0.7) !important;
}
html.dark-mode .ad-content {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-header {
    border-color: var(--border-color) !important;
}
html.dark-mode .ad-header h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .ad-header p {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-info-item {
    background: var(--bg-color) !important;
}
html.dark-mode .ad-info-label {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-info-value {
    color: var(--text-primary) !important;
}
html.dark-mode .ad-info-value.valid {
    color: var(--success-color) !important;
}
html.dark-mode .ad-info-value.expired {
    color: var(--danger-color) !important;
}
html.dark-mode .ad-info-value.cancelled {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-quick-details {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-quick-details i {
    color: var(--primary-accent) !important;
}
html.dark-mode .alert-box.alert-warning {
    background: var(--warning-color-bg) !important; color: #f59e0b !important; border-color: var(--warning-color) !important;
}
html.dark-mode .alert-box.alert-info {
    background: var(--info-color-bg) !important; color: #3b82f6 !important; border-color: var(--info-color) !important;
}
html.dark-mode .alert-box.alert-secondary {
    background: #374151 !important; color: var(--text-secondary) !important; border-color: var(--grey-dark) !important;
}
html.dark-mode .ad-actions {
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-edit {
    background: var(--primary-accent) !important;
}
html.dark-mode .btn-details {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .btn-cancel {
    background: var(--danger-color) !important;
}
html.dark-mode .empty-state {
    background: var(--card-bg) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}
html.dark-mode .empty-state h2,
html.dark-mode .empty-state p {
    color: var(--text-secondary) !important;
}
html.dark-mode #modal-container,
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .modal-header h2 {
    color: var(--text-primary) !important;
}
html.dark-mode .modal-close-btn {
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-box {
    border: none !important;
}
html.dark-mode .invoice-header,
html.dark-mode .invoice-footer {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-header h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .invoice-header span {
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-body {
    background: var(--card-bg) !important;
}
html.dark-mode .invoice-customer-details h4 {
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-customer-details p {
    color: var(--text-primary) !important;
}
html.dark-mode .invoice-table th {
    background: var(--bg-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-table td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-status {
    color: var(--text-primary) !important;
}
html.dark-mode #modal-loading {
    color: var(--text-secondary) !important;
}
html.dark-mode .modal-footer .btn-secondary {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 10. odeme.php & odeme_basarili.php Stilleri */
html.dark-mode .container {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
html.dark-mode .header {
    background: linear-gradient(135deg, #333, #111) !important;
}
html.dark-mode .content {
    color: var(--text-secondary) !important;
}
html.dark-mode .info-card {
    background: var(--bg-color) !important;
    border-color: var(--primary-accent) !important;
}
html.dark-mode .info-card h3 {
    color: var(--primary-accent) !important;
}
html.dark-mode .ad-details {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .ad-detail .detail-value {
    color: var(--primary-accent) !important;
}
html.dark-mode .ad-detail .detail-label {
    color: var(--text-secondary) !important;
}
html.dark-mode .ad-detail:not(:last-child) {
    border-color: var(--border-color) !important;
}
html.dark-mode .selected-plan-badge {
    background: var(--primary-accent) !important;
}
html.dark-mode .payment-options h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .payment-option label {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .payment-option label:hover,
html.dark-mode .payment-option input[type="radio"]:checked + .option-content + .option-badge + label {
    border-color: var(--primary-accent) !important;
}
html.dark-mode .option-title {
    color: var(--text-primary) !important;
}
html.dark-mode .option-desc {
    color: var(--text-secondary) !important;
}
html.dark-mode .payment-info {
    background: var(--bg-color) !important;
}
html.dark-mode .payment-info h4 {
    color: var(--primary-accent) !important;
}
html.dark-mode .payment-info ul {
    color: var(--text-secondary) !important;
}
html.dark-mode .payment-info ul li a {
    color: var(--primary-accent) !important;
}
html.dark-mode .kvkk-group {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .kvkk-group label {
    color: var(--text-secondary) !important;
}
html.dark-mode .kvkk-group label a {
    color: var(--primary-accent) !important;
}
html.dark-mode #iframe-blocker {
    background: rgba(39, 39, 42, 0.85) !important;
    border-color: var(--danger-color) !important;
}
html.dark-mode .blocker-content {
    color: #f87171 !important;
}
html.dark-mode #paytriframe {
    opacity: 0.2;
}
html.dark-mode .iframe-container.unlocked #paytriframe {
    opacity: 1;
}
html.dark-mode #modal-overlay-iptal,
html.dark-mode #modal-overlay-mesafeli {
    background: rgba(0,0,0,0.7) !important;
}
html.dark-mode .modal-content,
html.dark-mode #modal-container-iptal,
html.dark-mode #modal-container-mesafeli {
    background: var(--card-bg) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .modal-header {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .modal-header h2 {
    color: var(--text-primary) !important;
}
html.dark-mode .modal-close-btn {
    color: var(--text-secondary) !important;
}
html.dark-mode .modal-content h3 {
    color: var(--primary-accent) !important;
    border-color: var(--border-color) !important;
}
/* odeme_basarili.php ekleri */
html.dark-mode .header {
    background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
}
html.dark-mode .invoice-box {
    border-color: var(--border-color) !important;
}
html.dark-mode .invoice-header,
html.dark-mode .invoice-footer {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-header h3 {
    color: var(--text-primary) !important;
}
html.dark-mode .invoice-header span {
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-body {
    background: var(--card-bg) !important;
}
html.dark-mode .invoice-customer-details h4 {
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-customer-details p {
    color: var(--text-primary) !important;
}
html.dark-mode .invoice-table th {
    background: var(--bg-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .invoice-table td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .total-row {
    color: var(--success-color) !important;
}
html.dark-mode .form-title {
    color: var(--text-primary) !important;
}
html.dark-mode .form-group label {
    color: var(--text-primary) !important;
}
html.dark-mode .form-control {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .form-control:focus {
    border-color: var(--success-color) !important;
    box-shadow: 0 0 0 3px var(--success-color-bg) !important;
}
html.dark-mode .file-upload-label {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .file-upload-label:hover {
    background: #374151 !important;
    border-color: var(--success-color) !important;
}
html.dark-mode .btn-secondary {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-secondary:hover {
    background: #4b5563 !important;
}
html.dark-mode .edit-link {
    background: var(--warning-color-bg) !important;
    color: #f59e0b !important;
    border-color: var(--warning-color) !important;
}
html.dark-mode .edit-link:hover {
    background: rgba(245, 158, 11, 0.2) !important;
}


/*Üniversitem logosu yerine text için*/
html.dark-mode #uni-logo-text {
    color: var(--text-logo);
}

/* ========================================= */
/* === KARANLIK MOD STİLLERİ BİTİŞ === */
/* ========================================= */
    
    
    
    
    
    
    /* === EKLENECEK: LOGIN.PHP KARANLIK MOD STİLLERİ === */
html.dark-mode body {
    /* login.php'de body'yi değil, .login-container'ı hedef almak daha doğru */
    background: var(--bg-color) !important;
}
html.dark-mode .login-container {
    background: var(--bg-color) !important;
}
html.dark-mode .login-box {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
html.dark-mode .login-header {
    /* login.php'de header'ın arkaplanı yok, sadece logo var */
}
html.dark-mode .login-header h2 {
    color: var(--text-primary) !important;
}
html.dark-mode .login-header p {
    color: var(--text-secondary) !important;
}
html.dark-mode .login-error {
    background: var(--danger-color-bg) !important;
    color: #f87171 !important; /* Daha okunaklı kırmızı */
}
html.dark-mode .login-form-group label {
    color: var(--text-primary) !important;
}
html.dark-mode .login-form-group input {
    background: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .login-form-group input:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px var(--primary-accent-bg) !important;
}
html.dark-mode .login-options a {
    color: var(--primary-accent) !important;
}
html.dark-mode .btn-login-primary {
    background: var(--primary-accent) !important;
}
html.dark-mode .btn-login-primary:hover {
    background: var(--primary-accent-hover) !important;
}
html.dark-mode .login-separator {
    color: var(--border-color) !important;
}
html.dark-mode .login-separator::before,
html.dark-mode .login-separator::after {
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-login-google {
    background: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .btn-login-google:hover {
    background: #3f3f46 !important; /* Koyu gri hover */
}
html.dark-mode .login-footer {
    color: var(--text-secondary) !important;
}
html.dark-mode .login-footer a {
    color: var(--primary-accent) !important;
}

/* login.php - Şifremi Unuttum Modalı */
html.dark-mode .modal-overlay-hidden {
    background: rgba(0,0,0,0.7) !important;
}
html.dark-mode .login-modal-container {
    background: var(--card-bg) !important;
}
html.dark-mode .modal-header {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
html.dark-mode .modal-header h2 {
    color: var(--text-primary) !important;
}
html.dark-mode .modal-close-btn {
    color: var(--text-secondary) !important;
}
html.dark-mode .modal-content {
    background: var(--card-bg) !important;
}
html.dark-mode .modal-content p {
    color: var(--text-secondary) !important;
}
html.dark-mode #forgot-form-message.login-error {
    background: var(--danger-color-bg) !important;
    color: #f87171 !important;
}
html.dark-mode #forgot-form-message.login-success {
    background: var(--success-color-bg) !important;
    color: var(--success-color) !important;
}
    
    
    
    
    
    
    
    /* === ÇÖZÜM 1: Ders Alanı (Üniversite Listesi) Scroll === */
#study-uni-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#study-uni-list.chat-messages {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-color, #f4f6f8);
    min-height: 0;
}

#study-uni-list .search-result {
    border-bottom: 1px solid var(--border-color, #eee);
}
#study-uni-list .search-result:hover {
    background-color: var(--card-bg, #fff);
}


/* === ÇÖZÜM 2: Mobilde Input'un Altta Kalma Sorunu === */
@media (max-width: 768px) {
    /* Tüm panellerin esnek (flex) yapıda olmasını ve dikey büyümesini sağlar */
    .content-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .content-panel.active {
        display: flex;
    }

    /* (Global, Kafe, Ders) Mesaj listelerinin esnemesini sağlar (flex: 1) */
    #panel-global-chat .chat-messages,
    #panel-cafe .chat-messages,
    #study-chat-container .chat-messages {
        flex: 1;
        min-height: 0; /* Bu çok önemli */
        overflow-y: auto;
    }

    /* (Global, Kafe, Ders) Input alanlarının altta sabit kalmasını sağlar */
    #panel-global-chat .chat-input-container,
    #panel-cafe .chat-input-container,
    #study-chat-container .chat-input-container {
        flex-shrink: 0; /* Küçülmesini engeller */
    }
    
    /* (Arkadaşlar) Mesaj listesinin esnemesini sağlar */
    #panel-friends .chat-messages {
        flex: 1;
        min-height: 0;
    }
    /* (Arkadaşlar) Input alanının altta kalmasını sağlar */
    #panel-friends .chat-input {
        flex-shrink: 0;
    }
    
    /* (Arkadaşlar) Alt navigasyon barının (Arkadaş Ekle/İstekler)
       içeriği ezmesini engeller (position: absolute kaldırılır) */
    .friends-bottom-nav {
        position: static; /* position: absolute; yerine */
        flex-shrink: 0;
    }
}

/* === ÇÖZÜM 3: Mobilde "Geri" Tuşunu Göster === */
#panel-friends .chat-header .back-to-friends-list-btn,
#study-chat-container .chat-header-panel .back-to-friends-list-btn {
    display: none; /* Masaüstünde gizli */
}
@media (max-width: 768px) {
    #panel-friends .chat-header .back-to-friends-list-btn,
    #study-chat-container .chat-header-panel .back-to-friends-list-btn {
        display: block; /* Mobilde göster */
    }
}
    
    
    
    
    
    
    

















@media (max-width: 768px) {
    
    /* 1. Ana İçerik Alanı:
       Tüm içeriğin (panellerin) mobil navigasyon (60px) için alttan boşluk bırakmasını sağlar.
    */
    .community-content {
    flex: 1; /* GÜNCELLENDİ: height: 100% yerine bunu kullan */
    min-height: 0; /* EKLENDİ: Esnemesi için */
    box-sizing: border-box; 
    position: relative;
    overflow: hidden; /* EKLENDİ: Taşmayı önle */
    /* padding-bottom: 60px; SİLİNDİ: Artık gerek yok */
}

    /* 2. Panel Yapısı:
       Panellerin (position: absolute) bu yeni padding'e uymasını sağlar.
    */
    .content-panel {
        /* height: 100% kuralı kalmalı, padding'li ebeveyne uyacaktır */
        display: none; /* 'active' olan flex yapacak */
    }
    .content-panel.active {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 3. Panel Başlıkları:
       Her panelin kendi başlığını göstermesini sağlarız.
    */
    .chat-header-panel {
        display: flex;
        flex-shrink: 0; /* Küçülmesin */
    }

    /* (Önceki hatayı düzeltme: Global chat'in kendi başlığı vardı, onu gizleyelim) */
    #panel-global-chat .chat-header-panel {
        display: none; /* Global chat'in ekstra başlığını gizle */
    }
    
    /* (Önceki hatayı düzeltme: Gizli sidebar'daki kapatma butonunu göstermeye çalışma) */
    .community-sidebar-header {
        display: none !important; /* Masaüstü header mobilde tamamen gizli kalmalı */
    }

    /* 4. Chat Alanları:
       Input'un altta kalmasını ve mesajların üstte scroll olmasını garanti eder.
    */
    #panel-global-chat .chat-messages,
    #panel-cafe .chat-messages,
    #study-chat-container .chat-messages,
    #panel-friends .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    #panel-global-chat .chat-input-container,
    #panel-cafe .chat-input-container,
    #study-chat-container .chat-input-container,
    #panel-friends .chat-input {
        flex-shrink: 0; /* Input alanının küçülmesini engeller */
    }

    /* 5. Arkadaşlar Sekmesi (Mobil):
       Alt menünün (Arkadaş Ekle/İstekler) içeriği ezmesini engeller.
    */
    .friends-bottom-nav {
        position: static; /* position: absolute; yerine */
        flex-shrink: 0;
    }
    
    #panel-friends .friends-list,
    #panel-friends .chat-area {
        /* Yüksekliği, panelin altındaki 'friends-bottom-nav' (50px) kadar kısa yap */
        height: calc(100% - 50px);
    }
}

/* === MOBİL DÜZELTMELERİ SONU === */
    
    
    
    
    
    
    
    
    /* === YENİ: OYUN ANA MENÜ SKOR GÖSTERGESİ (4b) === */
.game-user-score {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    background: var(--card-bg, #fff);
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid var(--border-color, #e0e0e0);
}

/* === YENİ: OYUN SEÇENEKLERİ (Tıklanabilirlik) === */
.game-option:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--border-color, #e9ecef);
}

.game-option.correct:disabled,
.game-option.wrong:disabled {
    opacity: 1; /* Renkler soluklaşmasın */
}







/* ========================================= */
/* === YENİ: OYUN ODASI KİMLİĞİ VE OY SAYIMI === */
/* ========================================= */

/* Lobi ekranına Oda ID'si ekleme */
#game-panel-lobby h3 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 5px;
}
.lobby-room-id {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #888);
    font-weight: 600;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #eee);
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}

/* Geri/Kapat butonu (Lobi ve Oyun içi) */
.game-btn-back {
    position: absolute;
    top: 15px;
    /* Geri okunu solda, Kapat çarpısını sağda göster */
    /* right: 15px; */
    left: 15px;
    background: var(--border-color, #e9ecef);
    color: var(--text-primary, #333);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    line-height: 40px;
    text-align: center;
}
.game-btn-back:hover { 
    background: #4b5563; 
}

/* Oyun Seçenekleri (Oy Sayımı için) */
.game-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-right: 45px; /* Oy sayacı için yer aç */
}
.game-option-text {
    flex: 1;
}
.game-option-count {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary, #888);
    background: var(--border-color, #e9ecef);
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 0.3s;
}

/* Cevaplar gösterildiğinde oy sayımını göster */
.game-option.correct .game-option-count,
.game-option.wrong .game-option-count,
.game-option.selected .game-option-count {
    opacity: 1;
}

html.dark-mode .game-option-count {
    background: var(--bg-color, #18181b);
    color: var(--text-secondary, #a1a1aa);
}

.game-option.correct .game-option-count {
    background: white;
    color: #28a745;
}
.game-option.wrong .game-option-count {
    background: white;
    color: #dc3545;
}

html.dark-mode .game-option.correct .game-option-count,
html.dark-mode .game-option.wrong .game-option-count {
    background: #f4f4f5;
}

/* İzleyici Modu (Elendi) */
#game-panel-game .spectator-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 5;
    display: none; /* JS ile gösterilecek */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}
html.dark-mode #game-panel-game .spectator-overlay {
    background: rgba(24, 24, 27, 0.7);
}

/* Elenme Popup Butonları */
#elimination-overlay .complaint-buttons button {
    width: 100%;
    transition: all 0.2s ease;
}
#elimination-overlay .complaint-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}




/* ========================================= */
/* === GELİŞTİRME 1: OYUN STİL DÜZELTMELERİ === */
/* ========================================= */

/* P1: Lobi "Çıkış" butonunu sağa al */
#game-panel-lobby .game-btn-back {
    left: auto;
    right: 15px;
}

/* P3: Lobi Oda Kimliği (Kayma Düzeltmesi) */
.lobby-room-id {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #888);
    font-weight: 600;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #eee);
    padding: 5px 10px;
    border-radius: 6px;
    
    /* YENİ STİLLER: 'position: relative' kaldırıldı */
    display: block;
    margin: -10px auto 15px auto; /* Başlık ve geri sayım arasına ortalayarak yerleştirir */
    width: fit-content; /* İçeriğe göre genişlik */
}

/* P2: Elenme Popup'ını ekrana değil, oyun paneline göre ortala */


/* P4: Oyun Bonus Puan Bilgisi Stili */
.game-bonus-info {
    font-size: 13px;
    color: var(--text-secondary, #777);
    background: var(--primary-accent-bg, rgba(103, 58, 183, 0.1));
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid var(--primary-accent, #673AB7);
    max-width: 300px;
    text-align: left;
    line-height: 1.5;
}
.game-bonus-info strong {
    color: var(--primary-accent, #512DA8);
}

/* Karanlık Mod Düzeltmesi (Bonus Bilgisi) */
html.dark-mode .game-bonus-info {
    border-color: var(--primary-accent);
}
html.dark-mode .game-bonus-info strong {
    color: var(--primary-accent);
}



/* ========================================= */
/* === GELİŞTİRME 2: ARKADAŞLAR "GERİ" BUTONU === */
/* ========================================= */

/* 'Arkadaşlar' sekmesi için MASAÜSTÜ geri tuşu (P5) */
.friends-desktop-back-btn {
    display: none; /* Mobilde gizli */
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-secondary, #666);
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
}
.friends-desktop-back-btn:hover {
    color: var(--text-primary, #000);
}

@media (min-width: 769px) {
    .friends-desktop-back-btn {
        display: block; /* Masaüstünde göster */
    }
    
    /* Mobildeki geri tuşunu (sol ok) masaüstünde gizle */
    #panel-friends .chat-header .back-to-friends-list-btn {
        display: none;
    }
}









/* ========================================= */
/* === GÜNCEL: OYUN ÖNERİ BUTONU STİLİ === */
/* ========================================= */

#missing-game-btn {
    width: 90%;
    max-width: 380px; /* Biraz daralttık */
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%); /* Mor tonları */
    color: white;
    padding: 12px 20px; /* Dikey padding arttırıldı */
    font-size: 16px; /* Yazı boyutu büyüdü */
    font-weight: 600;
    border-radius: 30px; /* Daha oval */
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25); /* Daha belirgin gölge */
    transition: all 0.3s ease; /* Yumuşak geçiş */
    margin-top: 15px; /* Üstündeki içerikten ayırır */
    margin-bottom: 30px; /* Altındaki grid'den ayırır */
    letter-spacing: 0.5px; /* Harf aralığı */
    display: flex; /* İçerik ortalamak için */
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

#missing-game-btn:hover {
    background: linear-gradient(135deg, #7E57C2 0%, #673AB7 100%); /* Hover'da daha açık mor */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Gölge büyümesi */
    transform: translateY(-3px); /* Hafif yukarı kalkma */
}

#missing-game-btn i {
    margin-right: 10px; /* İkon ile yazı arası boşluk arttı */
    font-size: 18px; /* İkon boyutu */
}

/* Oyun öneri popup'ındaki textarea'nın
   login-form-group içinde düzgün görünmesi için */
#missing-game-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box; /* ÖNEMLİ */
    min-height: 120px; /* Minimum yükseklik */
    max-height: 250px; /* Maksimum yükseklik */
}

/* Karanlık Mod için Textarea */
html.dark-mode #missing-game-form textarea {
    background: var(--bg-color-alt) !important; /* Biraz daha koyu bir arka plan */
    color: var(--text-primary) !important;
    border-color: var(--border-color-dark) !important; /* Daha belirgin kenarlık */
}

html.dark-mode #missing-game-form textarea:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.3) !important; /* Mor odak gölgesi */
}

/* Formdaki Gönder ve Kapat butonları (Kayıp Uni'den kopyalandı) */
/* Daha önce bu kısım zaten vardı, sadece renk geçişlerini güncelledim */
#gonder-missing-game, 
#kapat-missing-game {
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}
#gonder-missing-game {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); /* Yeşil tonları */
}
#gonder-missing-game:hover {
    background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%);
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
}
#kapat-missing-game {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%); /* Kırmızı tonları */
}
#kapat-missing-game:hover {
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
    box-shadow: 0 4px 10px rgba(244, 67, 54, 0.4);
}
#gonder-missing-game:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}
















/* ========================================= */
/* === BAŞLANGIÇ: YENİ SATRANÇ STİLLERİ === */
/* ========================================= */

/* --- Satranç Menüleri --- */
.chess-option-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
}
.chess-option-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    color: var(--text-primary, #333);
}
.chess-time-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.chess-time-selector input {
    width: 60px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
}
.chess-time-selector button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    background: var(--border-color, #e9ecef);
    color: var(--text-primary, #333);
    cursor: pointer;
}
.chess-time-selector button:hover {
    background: #ddd;
}
html.dark-mode .chess-time-selector button:hover {
    background: #4b5563;
}

/* --- Satranç Oyun Ekranı --- */
#game-panel-chess-game {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 50px !important; /* Üstteki info bar için boşluk */
    padding-bottom: 70px !important; /* Alttaki info bar için boşluk */
}

.chess-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg, #fff);
    padding: 8px 12px;
    border-radius: 8px;
    width: 90%;
    max-width: 350px;
    flex-shrink: 0; /* <-- İŞTE SİHİRLİ KOD: Bu paneller asla küçülmez! */
    border: 1px solid var(--border-color, #e0e0e0);
}
.chess-player-info img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.chess-player-info span {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary, #333);
}
.chess-timer {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-accent, #673AB7);
    background: var(--bg-color, #f8f9fa);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e0e0e0);
}
/* Aktif sıra vurgusu */
.chess-player-info.active-turn {
    box-shadow: 0 0 10px var(--primary-accent, #673AB7);
    border-color: var(--primary-accent, #673AB7);
}
.chess-player-info.active-turn .chess-timer {
    background: var(--primary-accent, #673AB7);
    color: white;
}
html.dark-mode .chess-player-info.active-turn .chess-timer {
    color: white;
}


#chess-board-container {
    width: 90vw;
    max-width: 350px;
    margin: 0 auto;
    position: relative;
}
#chess-board {
    width: 100%;
}
.chess-status-bar {
    text-align: center;
    font-weight: 600;
    padding: 8px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 14px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
html.dark-mode .chess-status-bar {
    background: rgba(255, 255, 255, 0.1);
}

/* Hamle Onay Butonu (Süreli Mod) */
#chess-confirm-move-btn {
    width: 90%;
    max-width: 350px;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #28a745;
    color: white;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}
#chess-confirm-move-btn:hover {
    background: #218838;
}
#chess-confirm-move-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* --- chessboard.js Güzelleştirmeleri --- */
/* Gidebileceğin yerler için yeşil nokta */
.highlight-move {
    box-shadow: inset 0 0 10px 4px rgba(40, 167, 69, 0.7);
}
/* Taş yiyebileceğin yerler için farklı vurgu (opsiyonel) */
.highlight-capture {
     box-shadow: inset 0 0 10px 4px rgba(220, 53, 69, 0.7);
}

/* Satranç Liderlik Tablosu */
#chess-leaderboard-top3-container,
#chess-leaderboard-list-container,
#chess-leaderboard-user-rank-container {
    width: 100%;
     /* Diğer liderlik tablosuyla aynı */
}

/* ========================================= */
/* === YENİ SATRANÇ STİLLERİ BİTİŞ === */
/* ========================================= */









/* === MOBİL ARKADAŞLAR SEKMESİ DÜZELTMESİ === */
@media (max-width: 768px) {
    /* 1. Panelin kendisi esnek kutu olsun */
    #panel-friends {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* 2. Varsayılan Durum: Sadece Liste Görünsün */
    #panel-friends .friends-list {
        width: 100% !important; /* Genişliği zorla */
        display: block;
        height: calc(100% - 60px); /* Alt menü payı */
    }

    #panel-friends .chat-area {
        display: none; /* Sohbet varsayılan olarak gizli */
        width: 100% !important;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10; /* Listenin üstüne bin */
        background: var(--bg-color, #fff);
    }

    /* 3. Sohbet Aktif Durumu (JS ile 'chat-visible' sınıfı eklendiğinde) */
    #panel-friends.chat-visible .friends-list {
        display: none; /* Listeyi gizle */
    }

    #panel-friends.chat-visible .chat-area {
        display: flex; /* Sohbeti göster */
    }

    /* Geri Butonu Görünürlüğü */
    #panel-friends .chat-header .back-to-friends-list-btn {
        display: block !important;
        margin-right: 15px;
        font-size: 18px;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
    }
}

/* === DÜZELTME: Arkadaş Butonları Çakışması === */

/* Varsayılan olarak bu barı gizle (Güvenlik önlemi) */
.friends-bottom-nav {
    display: none !important;
}

/* Sadece Arkadaşlar Paneli (.content-panel#panel-friends) AKTİF olduğunda göster */
#panel-friends.active .friends-bottom-nav {
    display: flex !important;
}

/* Mobildeki konumu sabitle */
@media (max-width: 768px) {
    #panel-friends.active .friends-bottom-nav {
        position: fixed; /* Ekranın altına yapışsın */
        bottom: 60px; /* Ana menünün (Community Nav) hemen üstünde */
        left: 0;
        width: 100%;
        z-index: 1002; /* Diğer elementlerin üstünde */
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    }

    /* Sohbet açıldığında bu barı gizlememiz gerekebilir */
    #panel-friends.chat-visible .friends-bottom-nav {
        display: none !important;
    }
    
    /* Listeyi bu barın yüksekliği kadar yukarı it */
    #panel-friends .friends-list {
        padding-bottom: 60px; 
    }
}


/* === KESİN ÇÖZÜM: Mobil Çakışma Engelleme === */

/* 1. Eğer panel-friends 'active' sınıfına sahip DEĞİLSE, altındaki fixed/absolute tüm elemanları gizle */
#panel-friends:not(.active) .friends-bottom-nav,
#panel-friends:not(.active) .friends-sub-panel,
#panel-friends:not(.active) .friends-list,
#panel-friends:not(.active) .chat-area {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* 2. Mobildeyken Bottom Nav Sadece ve Sadece Active iken görünsün */
@media (max-width: 768px) {
    .friends-bottom-nav {
        display: none !important; /* Varsayılan gizle */
    }

    /* Sadece panel aktifse ve sohbet açık değilse göster */
    #panel-friends.active:not(.chat-visible) .friends-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 60px;
        left: 0;
        width: 100%;
        z-index: 2000; /* En üste çıkar */
    }
}














/* === YENİ: Sekme Kişi Sayıları === */
.tab-user-count {
    font-size: 11px;
    color: #888;
    margin-left: auto; /* Sağa yasla */
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 10px;
}
.community-tab-btn.active .tab-user-count {
    color: rgba(1,1,1,0.8);
    background: rgba(255,255,255,0.2);
}

/* === YENİ: Arkadaş Okunmamış Mesaj Rozeti === */
.friend-item {
    position: relative; /* Rozet için gerekli */
}

.friend-unread-badge {
    background-color: #ff4444;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px; /* Yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: auto; /* Sağa it */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.4);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mobilde ana menüdeki bildirim rozeti zaten vardı ama stilini garantiye alalım */
.notification-badge {
    background-color: #ff4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 25%;
    min-width: 16px;
    text-align: center;
}

@keyframes popIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Karanlık Mod Uyumu */
html.dark-mode .tab-user-count {
    color: #aaa;
    background: rgba(255,255,255,0.1);
}

html.dark-mode .community-tab-btn.active .tab-user-count {
    color: #aaa;
    
}




/* === YENİ: Ana Sohbet Butonu Bildirim Rozeti === */
.main-chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff4444;
    color: white;
    border-radius: 12px; /* Oval şekil */
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #fff; /* Beyaz kenarlık ile ayrım */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* JS ile flex yapılacak */
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    z-index: 10;
    animation: bounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Karanlık modda kenarlık rengini uyarla */
html.dark-mode .main-chat-badge {
    border-color: var(--card-bg);
}






/* ========================================= */
/* === PROFESYONEL LAZY LOAD ANİMASYONU === */
/* ========================================= */

/* Resim Yüklenmeden Önceki Alan (İskelet Efekti) */
.card img {
    /* Gri bir arka plan ve yükleme animasyonu */
    background: #f0f0f0;
    background-image: linear-gradient(
        to right, 
        #f0f0f0 0%, 
        #e0e0e0 20%, 
        #f0f0f0 40%, 
        #f0f0f0 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%; 
    animation: shimmer 1.5s infinite linear; /* Yüklenirken parlasın */
    
    /* Geçiş ayarları */
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); /* Çok yumuşak geçiş */
    will-change: transform, opacity, filter;
}

/* Resim henüz yüklenmediyse (Başlangıç Durumu) */
img.lazy-load {
    opacity: 0; /* Görünmez */
    transform: scale(0.95) translateY(10px); /* Biraz küçük ve aşağıda */
    filter: blur(10px); /* Bulanık */
}

/* Resim yüklendiğinde (Bitiş Durumu) */
img.loaded {
    opacity: 1; /* Görünür */
    transform: scale(1) translateY(0); /* Normal boyut ve konum */
    filter: blur(0); /* Net */
    background-image: none; /* Arkadaki iskelet efektini kapat */
    animation: none; /* Shimmer animasyonunu durdur */
}

/* Yükleme sırasındaki ışıltı animasyonu */
@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}











/* ========================================= */
/* === DARK MODE DALGA ANİMASYONU (CSS) === */
/* ========================================= */

::view-transition-old(root),
::view-transition-new(root) {
    /* Varsayılan solma efektini kapat */
    animation: none;
    /* İki görüntüyü birbirine karıştırma */
    mix-blend-mode: normal;
}

/* Yeni gelen tema (Karanlık mod açılırken) */
::view-transition-new(root) {
    z-index: 9999; /* En üstte olsun */
}

/* Eski tema (Aydınlık moda dönerken) */
::view-transition-old(root) {
    z-index: 9999; /* En üstte olsun */
}

/* Eğer kullanıcı sistem ayarlarında "Hareketi Azalt" seçmişse animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ========================================= */
/* === PERFORMANS OPTİMİZASYONU (CSS) === */
/* ========================================= */



/* Dalga animasyonunun düzgün çalışması için gerekli ayarlar */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    display: block;
}

/* Yeni gelen görüntü (Dalga) her zaman en üstte olsun */
::view-transition-new(root) {
    z-index: 2147483646;
}










/* ========================================= */
/* === TANITIM (ONBOARDING) - SPOTLIGHT === */
/* ========================================= */

/* 1. Tam Ekran Karartma Katmanı (Overlay) */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* %80 Siyahlık */
    z-index: 9998; /* En üstün bir altı */
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* Başlangıçta tıklanamaz */
}

.tour-overlay.active {
    opacity: 1;
    pointer-events: all; /* Açıldığında arkadaki tıklamaları engeller */
}

/* 2. Butonu Öne Çıkarma (Spotlight) */
.dark-mode-toggle.tour-highlight {
    position: relative; /* Z-index'in çalışması için */
    z-index: 9999 !important; /* Her şeyin en üstünde */
    background-color: #fff; /* Butonun arka planı net görünsün */
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5), /* Beyaz hale */
                0 0 30px 10px rgba(255, 255, 255, 0.8); /* Parlama efekti */
    pointer-events: auto; /* Tıklanabilir */
    transition: all 0.3s;
}

/* Karanlık modda highlight rengini uyarla */
html.dark-mode .dark-mode-toggle.tour-highlight {
    background-color: #333;
    box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.5), 
                0 0 30px 10px rgba(139, 92, 246, 0.8);
}

/* 3. Tanıtım Balonu (Popover) */
.tutorial-popover {
    position: fixed;
    background: #fff;
    color: #333;
    padding: 20px;
    border-radius: 12px;
    width: 280px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 9999; /* Butonla aynı seviyede */
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s; /* Biraz gecikmeli gelsin */
}

.tutorial-popover.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ok İşareti */
.tutorial-popover::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

.tutorial-content h4 {
    margin: 0 0 8px 0;
    color: #673AB7;
    font-size: 18px;
    font-weight: 700;
}

.tutorial-content p {
    margin: 0 0 20px 0;
    color: #555;
}

.tutorial-btn-dismiss {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    transition: transform 0.2s;
}

.tutorial-btn-dismiss:hover {
    transform: scale(1.02);
}

/* Karanlık Mod Popover Uyumu */
html.dark-mode .tutorial-popover {
    background: #27272a;
    color: #f4f4f5;
}
html.dark-mode .tutorial-popover::before {
    border-bottom-color: #27272a;
}
html.dark-mode .tutorial-content h4 {
    color: #a78bfa;
}
html.dark-mode .tutorial-content p {
    color: #a1a1aa;
}










/* Bildirim Butonu - Sadece İkon */
#push-notification-btn {
    background: none;
    border: none;
    color: #555; /* Varsayılan renk (Kapalı) */
    font-size: 18px; /* Dark mode ikonuyla aynı boy */
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.2s;
}

/* Bildirim Açıkken (Aktif) */
#push-notification-btn.active {
    color: #4CAF50; /* Yeşil */
}

/* Hover Efekti */
#push-notification-btn:hover {
    transform: scale(1.1);
}

/* Karanlık Mod Uyumu */
html.dark-mode #push-notification-btn {
    color: var(--text-secondary);
}
html.dark-mode #push-notification-btn.active {
    color: #4CAF50; /* Aktifken yine yeşil kalsın */
}

/* --- Tanıtım (Spotlight) Vurgusu --- */
/* Butonu öne çıkaran sınıf */
#push-notification-btn.tour-highlight {
    position: relative;
    z-index: 9999 !important;
    background-color: #fff; /* Butonun arkasını beyaz yap */
    border-radius: 50%;
    width: 40px; /* Vurgu için genişlik */
    height: 40px; /* Vurgu için yükseklik */
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5), 
                0 0 30px 10px rgba(76, 175, 80, 0.8); /* Yeşil parlama */
    pointer-events: auto;
}

html.dark-mode #push-notification-btn.tour-highlight {
    background-color: #333;
    box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.3), 
                0 0 30px 10px rgba(76, 175, 80, 0.6);
}







/* ================================================== */
/* === YENİ NESİL MOBİL POPUP TASARIMI (Ada/Island) === */
/* ================================================== */

.mobile-full-modal {
    display: none; /* Varsayılan gizli */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); /* Koyulaştırılmış arka plan (blur hissi) */
    backdrop-filter: blur(5px); /* Arkayı flulaştır */
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px; /* Kenar boşluğu */
}

.mobile-full-modal.active {
    display: flex;
    opacity: 1;
}

/* Popup İçeriği (Ada Kartı) */
.mobile-modal-content-wrapper {
    width: 100%;
    max-width: 380px; /* Mobilde çok geniş olmasın */
    background: #ffffff;
    border-radius: 24px; /* iOS tarzı yuvarlak köşeler */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transform: scale(0.85) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* Yaylanma efekti */
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Ekranı taşmasın */
}

.mobile-full-modal.active .mobile-modal-content-wrapper {
    transform: scale(1) translateY(0);
}

/* Karanlık Mod Kartı */
html.dark-mode .mobile-modal-content-wrapper {
    background: #1e1e24; /* Koyu gri */
    border: 1px solid #333;
}

/* --- HEADER --- */
.mobile-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
html.dark-mode .mobile-modal-header {
    background: #1e1e24;
    border-color: #333;
}
.mobile-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}
html.dark-mode .mobile-modal-header h3 { color: #f0f0f0; }

.mobile-modal-header button {
    background: #f5f5f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}
html.dark-mode .mobile-modal-header button { background: #2d2d33; color: #aaa; }

/* --- BODY --- */
.mobile-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    background: #fafafa;
    flex: 1;
}
html.dark-mode .mobile-modal-body { background: #18181b; }

/* --- YILDIZLAR (RENKLİ) --- */
.rating-group-mobile {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
html.dark-mode .rating-group-mobile {
    background: #27272a;
    box-shadow: none;
}
.rating-group-mobile label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
}
html.dark-mode .rating-group-mobile label { color: #ccc; }

.mobile-stars {
    display: flex;
    gap: 5px;
}

.mobile-stars span {
    font-size: 24px; /* Boyut ideal */
    color: #e0e0e0; /* Pasif gri renk */
    cursor: pointer;
    transition: transform 0.1s, color 0.2s;
}

/* Renk sınıfları (JS ile eklenecek) */
.mobile-stars span.s1 { color: #dc3545 !important; } /* Kırmızı */
.mobile-stars span.s2 { color: #fd7e14 !important; } /* Turuncu */
.mobile-stars span.s3 { color: #ffc107 !important; } /* Sarı */
.mobile-stars span.s4 { color: #28a745 !important; } /* Yeşil */
.mobile-stars span.s5 { color: #007bff !important; } /* Mavi */

/* Input Alanı */
#mobile-comment-input {
    width: 100%;
    height: 120px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
}
#mobile-comment-input:focus {
    border-color: #673AB7;
    outline: none;
}
html.dark-mode #mobile-comment-input {
    background: #27272a;
    border-color: #444;
    color: #eee;
}

/* --- FOOTER --- */
.mobile-modal-footer {
    padding: 20px 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}
html.dark-mode .mobile-modal-footer {
    background: #1e1e24;
    border-color: #333;
}

.btn-submit-mobile {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(103, 58, 183, 0.3);
    transition: transform 0.2s;
}
.btn-submit-mobile:active { transform: scale(0.98); }

/* --- 9'lu KUTU LİSTESİ (Liste Görünümü) --- */
#mobile-locations-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Mobil Kutu Kartı */
#mobile-locations-content .popup-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
html.dark-mode #mobile-locations-content .popup-box {
    background: #27272a;
    border-color: #444;
}

/* 16:9 Görsel Alanı */
#mobile-locations-content .box-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #eee;
}
#mobile-locations-content .box-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Yazılar */
#mobile-locations-content .box-content h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #333;
}
#mobile-locations-content .box-content p {
    font-size: 13px;
    color: #666;
    margin: 0;
}
html.dark-mode #mobile-locations-content .box-content h4 { color: #333; }
html.dark-mode #mobile-locations-content .box-content p { color: #aaa; }

/* Boş Slot (Mor) */
#mobile-locations-content .popup-box.slot-empty {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%) !important;
    color: white !important;
    text-align: center;
    justify-content: center;
    min-height: 100px;
}
#mobile-locations-content .popup-box.slot-empty h4,
#mobile-locations-content .popup-box.slot-empty p {
    color: white !important;
}





/* === MOBİL İÇİN KESİN GÖRSEL DÜZELTMESİ === */
@media (max-width: 768px) {
    .box-image-container, 
    .popup-box .box-image-container {
        height: auto !important;       /* Sabit 80px'i iptal et */
        aspect-ratio: 16 / 9 !important; /* 16:9 oranını zorla */
        min-height: unset !important;  /* Varsa min-height engelini kaldır */
    }

    .box-image-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}




/* --- Popup Buton Grubu Düzenlemesi --- */
.popup-action-buttons {
    display: flex;
    gap: 15px; /* Butonlar arası boşluk */
    margin-top: 15px;
    margin-bottom: 20px;
}

.action-btn {
    flex: 1; /* İki buton da eşit genişlikte olsun */
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* İkon ve yazı arası boşluk */
    transition: all 0.2s ease;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Yorum Yap Butonu (Mavi Tonları) */
.comment-btn {
    background: linear-gradient(135deg, #007BFF 0%, #0056b3 100%);
}
.comment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}

/* Konum Butonu (Mor/Turuncu veya senin tema rengin) */
.location-btn {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
}
.location-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(103, 58, 183, 0.3);
}

/* Mobil uyumu: Ekran çok darsa alt alta geçsinler */
@media (max-width: 480px) {
    .popup-action-buttons {
        flex-direction: column;
    }
}

/* Eski stillerin çakışmasını önlemek için temizlik */
.popup-desc button {
    /* Eski buton stillerini devre dışı bırak veya sil */
    display: none; 
}















/* --- Online Durumu ve Son Görülme --- */
.friend-avatar-container {
    position: relative;
    margin-right: 10px;
}

.online-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #4CAF50; /* Yeşil */
    border: 2px solid #fff;
    border-radius: 50%;
    display: none; /* Varsayılan gizli */
    z-index: 2;
}
.friend-item.online .online-status-dot {
    display: block;
}

.last-seen-text {
    font-size: 11px;
    color: #999;
    margin-left: 10px;
}

/* --- Tarih Ayracı --- */
.chat-date-separator {
    text-align: center;
    margin: 15px 0;
    position: relative;
}
.chat-date-separator span {
    background-color: rgba(0,0,0,0.05);
    color: #666;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
html.dark-mode .chat-date-separator span {
    background-color: rgba(255,255,255,0.1);
    color: #aaa;
}

/* --- Yazıyor... Animasyonu --- */
.typing-indicator {
    font-size: 12px;
    color: var(--primary-accent);
    font-style: italic;
    margin-left: 10px;
    display: none;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}









/* --- Sohbet Tarih Ayracı --- */
.chat-date-separator {
    text-align: center;
    margin: 15px 0;
    display: flex;
    justify-content: center;
}
.chat-date-separator span {
    background-color: rgba(0, 0, 0, 0.08);
    color: #555;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
html.dark-mode .chat-date-separator span {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* --- Mavi Tik --- */
.message-status i.read {
    color: #34B7F1 !important; /* WhatsApp Mavisi */
}
.message-status i {
    font-size: 11px;
    margin-left: 3px;
    color: #888; /* Okunmadıysa gri */
}

/* --- Online Yeşil Nokta (Header İçin) --- */
.friend-avatar-container {
    position: relative;
    margin-right: 10px;
}
.online-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #4CAF50;
    border: 2px solid #fff;
    border-radius: 50%;
    display: none; /* JS ile açılacak */
    z-index: 5;
}
html.dark-mode .online-status-dot {
    border-color: var(--card-bg);
}

/* --- Yazıyor Animasyonu --- */
.typing-text {
    font-style: italic;
    font-size: 12px;
    animation: pulseFade 1.5s infinite;
}
@keyframes pulseFade {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* --- Header Bilgisi (İsim ve Durum Alt Alta) --- */
.chat-header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}
.chat-header-info h3 {
    margin: 0;
    font-size: 16px;
}
.sub-info {
    font-size: 12px;
    height: 14px; /* Zıplamayı önler */
}









.friends-list .friend-item {
    transition: background-color 0.3s, transform 0.3s ease;
}

/* Yeni gelen mesaj bildirimi için yanıp sönme efekti (Opsiyonel) */
@keyframes flash-highlight {
    0% { background-color: rgba(103, 58, 183, 0.1); }
    100% { background-color: transparent; }
}
.friend-item.new-message-anim {
    animation: flash-highlight 1s ease;
}







/* --- Arkadaş Listesi Online Noktası --- */

/* Avatarı kapsayan kutu */
.friends-list .friend-avatar-container {
    position: relative; /* Noktanın buna göre konumlanması için */
    margin-right: 10px;
    width: 45px; /* Avatar boyutuyla aynı olmalı */
    height: 45px;
}

/* Resmin kendisi */
.friends-list .friend-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Yeşil Nokta */
.list-online-dot {
    position: absolute;
    bottom: 2px;   /* Alt sınır */
    right: 2px;    /* Sağ sınır (Çapraz alt) */
    width: 11px;
    height: 11px;
    background-color: #4CAF50; /* Canlı Yeşil */
    border: 2px solid #fff;    /* Beyaz çerçeve (ayırıcı) */
    border-radius: 50%;        /* Yuvarlak */
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Karanlık Mod Uyumu */
html.dark-mode .list-online-dot {
    border-color: var(--card-bg); /* Çerçeve rengini arka planla aynı yap */
}







/*Üniversitem logosu yerine text için*/
/* --- FARK YARATAN CAM EFEKTİ (CRYSTAL GLASS) --- */
#uni-logo-text {
    color: #171715;
    font-family: 'Giaza', serif;
    
    /* MOBİL DÜZELTMESİ (Ü Harfinin Noktaları İçin) */
    /* Yazının üstüne ve altına biraz boşluk veriyoruz ki noktalar kesilmesin */
    padding-top: 0.2em; 
    padding-bottom: 0.1em;
    line-height: 1.3; /* Satır aralığını açarak harflere nefes aldırır */
    
    font-size: 55px;
    font-weight: 100;
    margin: 0 auto; /* Margin'i sıfırlayıp padding ile yönettik */
    text-align: center;

    /* BEYAZ BLOK SORUNU ÇÖZÜMÜ */
    /* Başlangıçta opacity 0, böylece yüklenene kadar görünmez */
    opacity: 0; 
    /* Arka plan rengini kesinlikle şeffaf yap */
    background-color: transparent !important;

    /* AYDINLIK MOD GRADYANI */
    background: linear-gradient(
        110deg, 
        #333 20%, 
        #4a148c 40%, 
        #fff 50%,  /* <- İşte cam parlaklığını veren beyaz nokta */
        #4a148c 60%, 
        #333 80%
    );
    background-size: 200% auto;
    
    /* MASKELEME (Standart ve Webkit) */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Yazı Rengi Şeffaf */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* AKICILIK ÇÖZÜMÜ (Performans) */
    /* translate3d kullanarak ekran kartını (GPU) devreye sokuyoruz */
    transform: translate3d(0, 0, 0); 
    /* Tarayıcıya bu elementin değişeceğini önceden haber veriyoruz */
    will-change: transform, opacity, background-position;

    /* ANİMASYONLAR */
    /* logo-giris: Daha yumuşak (ease-out) ve blur efekti azaltılmış */
    animation: 
        logo-giris 1s ease-out forwards, 
        glass-shine 5s linear infinite; /* Parlama süresini uzattık (daha smooth) */
    
    /* Gölgeyi biraz hafiflettik (Performans için) */
    filter: drop-shadow(0px 2px 2px rgba(103, 58, 183, 0.2));
}

#uni-logo-text::before {
    content: '🎄'; /* İstediğin emoji */
    font-size: 30px;
    position: absolute;
    top: -18px; /* Konumu ince ayar */
    left: -15px; 
    transform: rotate(-15deg);
    
    /* İŞTE SİHİRLİ KODLAR BURADA: */
    
    /* 1. Logonun arka plan gradientini iptal et */
    background: none !important; 
    
    /* 2. Logonun şeffaflığını iptal et (Normal rengine dön) */
    -webkit-text-fill-color: initial !important; 
    text-fill-color: initial !important;
    
    /* 3. Rengi zorla (Gerekirse) */
    color: initial !important;
    
    /* 4. Logonun gölgesinden de kurtul (Daha net gözüksün) */
    filter: none !important; 
    text-shadow: none !important;
    
    z-index: 1; /* Yazının üstünde dursun */
    opacity: 1 !important;
}

/* KARANLIK MOD AYARLARI */
html.dark-mode #uni-logo-text {
    background-image: linear-gradient(
        110deg, 
        #fff 20%, 
        #8b5cf6 40%, 
        #ffffff 50%, 
        #8b5cf6 60%, 
        #fff 80%
    );
    /* Karanlık modda gölgeyi biraz daha belirgin yap */
    filter: drop-shadow(0px 2px 2px rgba(103, 58, 183, 0.2));
}

/* --- OPTİMİZE EDİLMİŞ GİRİŞ ANİMASYONU --- */
@keyframes logo-giris {
    0% {
        opacity: 0;
        /* translate3d kullanımı takılmayı önler */
        transform: translate3d(0, -20px, 0); 
        /* Blur'u kaldırdık veya azalttık, çünkü mobil cihazları çok kasar */
        /* filter: blur(5px); -> Bunu iptal ettik, akıcılık için */
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* --- PARLAMA ANİMASYONU --- */
@keyframes glass-shine {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

/* --- MOBİL İÇİN EKSTRA GÜVENLİK --- */
@media (max-width: 768px) {
    #uni-logo-text {
        font-size: 45px; /* Mobilde fontu biraz küçültelim ki taşmasın */
        padding-top: 0.3em; /* Mobilde Ü noktaları için ekstra pay */
    }
}







/* app.css dosyasının en altı */

/* --- Staj Popup Alanı --- */
.staj-popup {
    position: fixed;
    bottom: 30px;
    left: -400px; /* Başlangıçta ekran dışında solda */
    width: 340px;
    background: var(--card-bg); /* Sitenin tema rengini kullanır */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
    border: 1px solid var(--border-color);
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

/* Popup Aktif Class'ı */
.staj-popup.show {
    left: 30px; /* Görünür olduğunda */
}

.staj-popup-content {
    background-color: #fff;
    padding: 25px;
    position: relative;
}

html.dark-mode .staj-popup-content {
    background-color: #27272a;
}

/* İkon ve Başlık */
.staj-icon {
    font-size: 40px;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1));
}

.staj-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
}

.staj-text p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 20px;
}

/* Butonlar */
.staj-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-staj-evet {
    flex: 2;
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-staj-evet:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(103, 58, 183, 0.3);
    color: white;
}

.btn-staj-hayir {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-staj-hayir:hover {
    background: var(--hover-bg);
}

/* Footer ve Checkbox */
.staj-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.staj-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.staj-checkbox-label input {
    accent-color: #673AB7;
    width: 16px;
    height: 16px;
}

/* Kapatma Butonu (X) */
.staj-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.staj-close:hover {
    color: var(--text-main);
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 480px) {
    .staj-popup {
        width: calc(100% - 40px); /* Mobilde ekranı kaplamasın ama geniş olsun */
        bottom: 20px;
        left: -100%; /* Mobilde tamamen dışarıda */
    }
    
    .staj-popup.show {
        left: 20px;
    }
}








/* === REKLAM TANITIM POPUP STİLLERİ === */

/* Menüdeki Butonun Stili */
.nav-ad-btn {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white !important;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.nav-ad-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(245, 124, 0, 0.3);
    color: white !important;
}

/* Popup Konteyner */
.ad-tutorial-container {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Kapatma Butonu */
.ad-tutorial-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    line-height: 30px;
    transition: background 0.2s;
}
.ad-tutorial-close:hover {
    background: rgba(220, 53, 69, 0.9);
}

/* Slider Yapısı */
.ad-slider-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ad-slide-image {
    width: 100%;
    /* Sabit yükseklik yerine oran veriyoruz */
    height: auto; 
    /* Senin görselin oranı: 1920 / 866 */
    aspect-ratio: 1920 / 866; 
    
    background: #f0f0f0; /* Resim yüklenene kadar gri fon */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Taşmaları engelle */
}

.ad-slide-image img {
    width: 100%;
    height: 100%;
    /* 'contain' diyerek resmin tamamını kutuya sığdırıyoruz, kesilme olmaz */
    object-fit: contain; 
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    /* Mobilde de aynı oranı korusun, genişliğe göre yüksekliği kendi ayarlar */
    .ad-slide-image { 
        height: auto; 
        aspect-ratio: 1920 / 866; 
    } 
}

.ad-slide-content {
    padding: 25px 40px;
    text-align: center;
}

.ad-slide-content h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 22px;
}

.ad-slide-content p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    min-height: 50px; /* Yükseklik zıplamasını önler */
}

/* Oklar */
.ad-prev-btn, .ad-next-btn {
    position: absolute;
    top: 35%; /* Resmin ortasına denk gelir */
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
    z-index: 5;
}
.ad-prev-btn { left: 15px; }
.ad-next-btn { right: 15px; }

.ad-prev-btn:hover, .ad-next-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

/* Nokta Göstergeleri */
.ad-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.ad-dot {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}
.ad-dot.active {
    background: #673AB7; /* Senin tema rengin */
    transform: scale(1.2);
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .ad-slide-image { height: 220px; }
    .ad-slide-content { padding: 20px; }
    .ad-slide-content h3 { font-size: 18px; }
    .ad-slide-content p { font-size: 14px; }
}

/* --- Karanlık Mod (Dark Mode) --- */
html.dark-mode .ad-tutorial-container {
    background: var(--card-bg);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}
html.dark-mode .ad-slide-image {
    background: #333;
}
html.dark-mode .ad-slide-content h3 {
    color: var(--text-primary);
}
html.dark-mode .ad-slide-content p {
    color: var(--text-secondary);
}
html.dark-mode .ad-prev-btn, 
html.dark-mode .ad-next-btn {
    background: rgba(50, 50, 50, 0.8);
    color: white;
}
html.dark-mode .ad-prev-btn:hover, 
html.dark-mode .ad-next-btn:hover {
    background: var(--primary-accent);
}
html.dark-mode .ad-dot {
    background: #444;
}
html.dark-mode .ad-dot.active {
    background: var(--primary-accent);
}






/* === ANİMASYONLU REKLAM BUTONU === */

/* Kapsayıcı Konumlandırma */
.tutorial-btn-wrapper {
    position: fixed;
    bottom: 20px;
    right: 19px;
    z-index: 998;
}

/* Buton Temel Stili */
.animated-tutorial-btn {
    background: #673AB7; /* Reklamlarım butonuyla aynı mor */
    color: white;
    border: none;
    height: 50px; /* Yükseklik sabit */
    border-radius: 25px; /* Tam yuvarlak köşeler */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Sola hizalı büyüme için */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(103, 58, 183, 0.4);
    overflow: hidden; /* Taşan yazıyı gizle */
    white-space: nowrap;
    padding: 0; /* Padding animasyonla yönetilecek */
    
    /* Animasyon Tanımı: Toplam 10 saniye (büyüme, bekleme, küçülme, bekleme) */
    animation: expandAndShrink 66s infinite ease-in-out;
}

.animated-tutorial-btn:hover {
    background: #5e35b1; /* Hover durumunda hafif koyu */
    box-shadow: 0 6px 16px rgba(103, 58, 183, 0.6);
}

/* İkon Kısmı */
.animated-tutorial-btn .icon-part {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0; /* İkon asla küçülmesin */
}

/* Yazı Kısmı */
.animated-tutorial-btn .text-part {
    font-weight: 600;
    font-size: 15px;
    padding-right: 20px;
    opacity: 0; /* Başlangıçta görünmez */
    
    /* Yazı Animasyonu */
    animation: fadeInOutText 66s infinite ease-in-out;
}

/* --- KEYFRAMES (Zaman Çizelgesi) --- */

/* Buton Genişliği Animasyonu */
@keyframes expandAndShrink {
    0% { width: 50px; }
    1.5% { width: 230px; } /* Açıldı */
    9% { width: 230px; }   /* Bekledi */
    10.5% { width: 50px; } /* Kapandı */
    100% { width: 50px; }  /* Uzun süre kapalı kaldı */
}

@keyframes fadeInOutText {
    0% { opacity: 0; }
    2% { opacity: 1; }     /* Buton tam açılınca yazı gelsin */
    8.5% { opacity: 1; }   /* Kapanmadan hemen önce yazı gitsin */
    10% { opacity: 0; }
    100% { opacity: 0; }
}

/* Mobil için keyframes */
@media (max-width: 768px) {
    @keyframes expandAndShrink {
        0% { width: 50px; }
        1.5% { width: 210px; }
        9% { width: 210px; }
        10.5% { width: 50px; }
        100% { width: 50px; }
    }
}






/* app.css içine ekle */

/* Yeni Buton Rengi (Turuncu/Amber tonu ayırt edici olsun) */
.units-btn {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}
.units-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 152, 0, 0.3);
}

/* Birimler Popup İçeriği */
.org-category {
    margin-bottom: 15px;
}
.org-cat-title {
    display: block;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    font-size: 14px;
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 4px;
}

.org-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    border: 1px solid #eee;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.org-btn:hover {
    background: #f0f4ff;
    border-color: #673AB7;
    color: #673AB7;
    padding-left: 20px;
}

.org-btn i {
    font-size: 12px;
    color: #ccc;
}
.org-btn:hover i {
    color: #673AB7;
}

/* Karanlık Mod Uyumu */
html.dark-mode .org-cat-title {
    background: #27272a;
    color: #a1a1aa;
}
html.dark-mode .org-btn {
    background: #18181b;
    border-color: #3f3f46;
    color: #f4f4f5;
}
html.dark-mode .org-btn:hover {
    background: #27272a;
    border-color: #8b5cf6;
}








/* --- KART TÜRÜ ETİKETLERİ (SADECE YAZI) --- */

/* Kartın kendisine referans noktası */
.card {
    position: relative; 
}

/* Ortak Yazı Stili */
.card[data-tur]::after {
    position: absolute;
    bottom: 5px; /* Alt kenardan boşluk */
    right: 5px;  /* Sağ kenardan boşluk */
    font-size: 10px; /* Okunabilir boyut */
    font-weight: 800; /* Kalın yazı (Bold) */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    pointer-events: none;
    font-family: 'Segoe UI', sans-serif;
    transition: transform 0.3s ease;
}

/* Devlet Üniversitesi Rengi (Koyu Mavi-Gri) */
.card[data-tur="devlet"]::after {
    content: "DEVLET";
    color: #607d8b; 
}

/* Vakıf Üniversitesi Rengi (Turuncu) */
.card[data-tur="vakif"]::after {
    content: "VAKIF";
    color: #ef6c00;
}

/* Kartın üzerine gelince yazı hafifçe büyüsün */
.card:hover[data-tur]::after {
    transform: scale(1.1); /* %10 büyüme */
}

/* --- KARANLIK MOD UYUMU --- */
/* Koyu arkaplanda renklerin okunabilmesi için tonları açıyoruz */

html.dark-mode .card[data-tur="devlet"]::after {
    color: #90a4ae; /* Daha açık gri-mavi */
}

html.dark-mode .card[data-tur="vakif"]::after {
    color: #ffb74d; /* Daha açık/parlak turuncu */
}




/* ========================================= */
/* === YILBAŞI KAR YAĞIŞI EFEKTİ === */
/* ========================================= */

/* ========================================= */
/* === YILBAŞI KAR YAĞIŞI EFEKTİ (V2) === */
/* ========================================= */

.snowflake {
    position: fixed;
    top: -20px;
    color: #fff; /* Kar tanesi rengi */
    pointer-events: none; /* Tıklamaları engellemez */
    z-index: 9999;
    user-select: none; /* Seçilemez */
    cursor: default;
    
    /* Parlama efekti (Buz gibi görünmesi için) */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); 
    
    /* Dönerek düşme animasyonu */
    animation-name: fall-spin;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Karanlık modda hafif mavi ışıltı */
html.dark-mode .snowflake {
    color: #f0f8ff; /* AliceBlue rengi */
    text-shadow: 0 0 5px rgba(139, 92, 246, 0.6); /* Morumsu parlama */
}

/* Hem düşme hem dönme animasyonu */
@keyframes fall-spin {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.9;
    }
    100% {
        transform: translateY(105vh) translateX(20px) rotate(360deg); /* 360 derece döner */
        opacity: 0.2;
    }
}






/* --- Oyun İçi İlerleme Metni (Gelişmiş) --- */
/* --- Oyun İçi İlerleme Metni (Gelişmiş) --- */
#game-answer-progress-container {
    text-align: center;
    margin-top: 15px;
    background: #f0f2f5;
    padding: 10px 20px;
    border-radius: 50px; /* Hap şeklinde */
    display: block;
    border: 1px solid #e0e0e0;
    width: fit-content;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#game-answer-progress-text {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px; /* İkon ile yazı arası */
    justify-content: center;
}

/* Karanlık Mod */
html.dark-mode #game-answer-progress-container {
    background: #27272a;
    border-color: #3f3f46;
}
html.dark-mode #game-answer-progress-text {
    color: #696969;
}

/* --- Popup Renkleri --- */
h3.win-popup { 
    color: #28a745 !important; 
    font-size: 24px; 
    margin-bottom: 10px; 
    text-transform: uppercase;
}
h3.lose-popup { 
    color: #dc3545 !important; 
    font-size: 24px; 
    margin-bottom: 10px; 
}
.game-result-icon {
    font-size: 60px;
    margin-bottom: 15px;
    display: block;
    animation: popIn 0.5s ease;
}
@keyframes popIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



/* ========================================= */
/* === OYUN SONU POPUP TASARIMI (MODERN) === */
/* ========================================= */

/* Popup Overlay (Arka planı bulanıklaştır) */
.complaint-overlay#elimination-overlay {
    position: fixed !important; /* Sayfa kaydırılsa bile ekranda kalır */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Arka planı karart */
    backdrop-filter: blur(8px); /* Buzlu cam efekti */
    display: none; /* JS ile flex yapılacak */
    justify-content: center; /* Yatay ortala */
    align-items: center; /* Dikey ortala */
    z-index: 2147483647; /* Her şeyin (header, menu) üstünde */
    margin: 0 !important;
    padding: 0 !important;
}

/* Popup Kartı */
#elimination-overlay .complaint-popup {
    position: relative !important;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 30px;
    width: 90%; /* Mobilde kenarlardan taşmaz */
    max-width: 420px; /* Masaüstünde çok genişlemez */
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    border: none;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none; /* Eski transformları iptal et */
    animation: popInElastic 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 100000000;
}

/* Karanlık Mod */
html.dark-mode #elimination-overlay .complaint-popup {
    background: #1e1e24;
    border: 1px solid #333;
    color: #fff;
}

/* --- İÇERİK STİLLERİ --- */

/* İkon */
.popup-icon-wrapper {
    font-size: 72px;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Başlıklar */
.win-title {
    font-size: 28px;
    font-weight: 900;
    color: #10b981; /* Canlı yeşil */
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lose-title {
    font-size: 28px;
    font-weight: 900;
    color: #ef4444; /* Canlı kırmızı */
    margin: 10px 0;
}

/* Mesaj */
.result-msg {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}
html.dark-mode .result-msg { color: #a1a1aa; }

/* Doğru Cevap Kutusu */
.correct-answer-box {
    margin-top: 15px;
    background: #f0fdf4; /* Çok açık yeşil */
    border: 2px solid #22c55e;
    border-radius: 12px;
    padding: 15px;
    color: #15803d;
}
html.dark-mode .correct-answer-box {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}
.correct-answer-box small {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 5px;
}
.correct-answer-box strong {
    font-size: 18px;
    display: block;
}

/* Puan Rozeti */
.result-score-badge {
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    padding: 10px 20px;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: column;
    margin: 10px 0 20px 0;
    min-width: 140px;
}
html.dark-mode .result-score-badge {
    background: #27272a;
    border-color: #3f3f46;
}
.result-score-badge span {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
}
.result-score-badge strong {
    font-size: 26px;
    font-weight: 900;
    color: #673AB7;
}

/* --- BUTON STİLİ (ÖZEL TASARIM) --- */
.elimination-buttons {
    margin-top: 10px;
    width: 100%;
}

/* Çıkış / Ana Menü Butonu */
.btn-game-exit {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); /* Kırmızı Gradyan */
    color: white;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.4);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Hover Efekti */
.btn-game-exit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}
.btn-game-exit:active {
    transform: scale(0.98);
}

/* Kazanan için farklı (Mor/Mavi) Buton Rengi */
.btn-game-exit.winner-btn {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
    box-shadow: 0 10px 20px -5px rgba(103, 58, 183, 0.4);
}
.btn-game-exit.winner-btn:hover {
    background: linear-gradient(135deg, #7E57C2 0%, #673AB7 100%);
    box-shadow: 0 15px 25px -5px rgba(103, 58, 183, 0.5);
}

/* Animasyon */
@keyframes popInElastic {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.btn-game-primary {
    background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%) !important;
    color: white !important;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(103, 58, 183, 0.3);
    transition: transform 0.2s;
    width: 100%;
}
.btn-game-primary:hover { transform: translateY(-2px); }

.btn-game-secondary {
    background: transparent !important;
    color: #666 !important;
    border: 2px solid #e0e0e0 !important;
    padding: 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}
.btn-game-secondary:hover {
    background: #f8f9fa !important;
    color: #333 !important;
    border-color: #ccc !important;
}
html.dark-mode .btn-game-secondary {
    color: #aaa !important;
    border-color: #444 !important;
}
html.dark-mode .btn-game-secondary:hover {
    background: #333 !important;
    color: #fff !important;
}



/* Yeni Oyun Butonu için özel renk */
.btn-game-primary.play-again {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-game-primary.play-again:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}



/* --- SATRANÇ YEŞİL NOKTA EFEKTİ --- */
.highlight-legal-move {
    /* Karenin ortasında yarı saydam yeşil bir nokta */
    background-image: radial-gradient(circle, rgba(100, 210, 100, 0.8) 20%, transparent 25%) !important;
}

/* Taş yiyebileceğin kareler için (İsteğe bağlı: Köşelerde çerçeve) */
.highlight-capture {
    box-shadow: inset 0 0 5px 4px rgba(255, 0, 0, 0.5) !important;
}











/* === SATRANÇ ÖZEL LOBİ STİLLERİ === */

.lobby-content-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Oda Bilgi Kartı */
.lobby-info-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.lobby-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary-color);
}

.lobby-details p {
    margin: 0;
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lobby-details h2 {
    margin: 5px 0;
    font-size: 32px;
    color: #333;
    letter-spacing: 2px;
    font-family: 'Courier New', Courier, monospace; /* Kod havası verir */
}

/* Oyuncu Listesi Grid */
.chess-player-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
}

/* Oyuncu Kartı (JS Tarafından Oluşturulan HTML İçin) */
.private-player-item {
    background: white;
    padding: 12px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

.private-player-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.private-player-item img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.private-player-item .info {
    display: flex;
    flex-direction: column;
}

.private-player-item .name {
    font-weight: bold;
    color: #333;
    font-size: 15px;
}

.private-player-item .role {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 3px;
    font-weight: 500;
}

/* Renk Etiketleri (JS'de gelen role göre otomatik stil almaz, 
   ama JS'de innerHTML oluştururken class ekleyebiliriz veya 
   basitçe role textine göre stil verebiliriz) */

/* Aksiyon Alanı */
.lobby-actions-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.waiting-text {
    color: #666;
    font-style: italic;
    animation: pulse 1.5s infinite;
    margin-bottom: 10px;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Karanlık Mod Desteği */
.dark-mode .lobby-info-card,
.dark-mode .private-player-item {
    background: #2d2d2d;
    border-color: #444;
}

.dark-mode .lobby-details h2,
.dark-mode .private-player-item .name {
    color: #fff;
}



/* === SATRANÇ LİDERLİK TABLOSU AVATAR DÜZELTMESİ === */

/* 1. Alttaki "Siz" Bölümü Avatarı */
#chess-leaderboard-user-rank-container .leaderboard-user-rank img {
    width: 45px !important;       /* Sabit genişlik */
    height: 45px !important;      /* Sabit yükseklik */
    border-radius: 50% !important; /* Tam yuvarlak */
    object-fit: cover;            /* Resim esnemesin, sığsın */
    border: 2px solid var(--primary-color); /* Şık çerçeve */
    margin-right: 10px;           /* İsimle arasına boşluk */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Hafif gölge */
}

/* Hizalama Garantisi (Resim ve yazı ortalansın) */
#chess-leaderboard-user-rank-container .leaderboard-user-rank {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #2f2645;
    
}

/* 2. Üstteki Liste Avatarları (Garanti olsun diye) */
#chess-leaderboard-list-container li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* Karanlık Mod Uyumu */
body.dark-mode #chess-leaderboard-user-rank-container .leaderboard-user-rank {
    background: #2d2d2d;
    color: #fff;
}



/* === 9 TAŞ OYUNU STİLLERİ === */

.nine-board-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1/1;
    margin: 20px auto;
    position: relative;
    background: #deb887; /* Ahşap rengi */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#nine-board {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Kareler (Çizgiler) */
.square {
    position: absolute;
    border: 3px solid #5d4037;
    pointer-events: none; /* Tıklamayı engelleme */
}

.square.outer { top: 0; left: 0; right: 0; bottom: 0; }
.square.middle { top: 16.6%; left: 16.6%; right: 16.6%; bottom: 16.6%; }
.square.inner { top: 33.3%; left: 33.3%; right: 33.3%; bottom: 33.3%; }

/* Bağlantı Çizgileri */
.line {
    position: absolute;
    background: #5d4037;
    pointer-events: none;
}

.line.top { top: 0; left: 50%; width: 3px; height: 33.3%; transform: translateX(-50%); }
.line.bottom { bottom: 0; left: 50%; width: 3px; height: 33.3%; transform: translateX(-50%); }
.line.left { top: 50%; left: 0; width: 33.3%; height: 3px; transform: translateY(-50%); }
.line.right { top: 50%; right: 0; width: 33.3%; height: 3px; transform: translateY(-50%); }

/* Noktalar (Tıklanabilir Alanlar) */
.dot {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #8b5a2b; /* Boş nokta rengi */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    z-index: 10;
    transition: transform 0.2s, background 0.2s;
}

.dot:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: #a07040;
}

/* Dolu Noktalar */
.dot.white-piece {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.dot.black-piece {
    background: #000;
    box-shadow: 0 2px 5px rgba(255,255,255,0.3);
}

.dot.selected {
    outline: 3px solid #00ff00; /* Seçili taş */
    transform: translate(-50%, -50%) scale(1.2);
}

.dot.possible-move {
    background: rgba(0, 255, 0, 0.5); /* Gidilebilir nokta */
    animation: pulse-dot 1s infinite;
}

@keyframes pulse-dot {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
    100% { transform: translate(-50%, -50%) scale(1); }
}


/* === 9 TAŞ LİDERLİK TABLOSU (Satranç ile Aynı Stil) === */

#nine-leaderboard-top3-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    padding-bottom: 20px;
    min-height: 180px;
}

/* Avatar Düzenlemeleri (Yuvarlak ve Boyut) */
#nine-leaderboard-user-rank-container .leaderboard-user-rank img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    margin-right: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#nine-leaderboard-user-rank-container .leaderboard-user-rank {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #fff;
    border-top: 1px solid #eee;
}

#nine-leaderboard-list-container li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* Karanlık Mod */
body.dark-mode #nine-leaderboard-user-rank-container .leaderboard-user-rank {
    background: #2d2d2d;
    border-top: 1px solid #444;
    color: #fff;
}







/* === KESİN ÇÖZÜM: Karanlık Mod Gönder Butonu İkonu === */

/* body yerine html etiketi hedeflendi */
html.dark-mode #panel-global-chat .chat-input button {
    color: #ffffff !important;
    background-color: #673AB7 !important; /* Arka plan rengini de sabitleyelim */
    opacity: 1 !important;
}

/* İkonun kendisi için (Saniye sayacı veya uçak ikonu) */
html.dark-mode #panel-global-chat .chat-input button i,
html.dark-mode #panel-global-chat .chat-input button span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Bazı tarayıcılar için garanti */
}

/* Buton pasifken (süre sayarken) */
html.dark-mode #panel-global-chat .chat-input button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed;
    color: #eeeeee !important;
}





html.dark-mode #panel-cafe .chat-input button {
    color: #ffffff !important;
    background-color: #673AB7 !important; /* Arka plan rengini de sabitleyelim */
    opacity: 1 !important;
}

/* İkonun kendisi için (Saniye sayacı veya uçak ikonu) */
html.dark-mode #panel-cafe .chat-input button i,
html.dark-mode #panel-cafe .chat-input button span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Bazı tarayıcılar için garanti */
}

/* Buton pasifken (süre sayarken) */
html.dark-mode #panel-cafe .chat-input button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed;
    color: #eeeeee !important;
}







html.dark-mode #study-chat-container .chat-input button {
    color: #ffffff !important;
    background-color: #673AB7 !important; /* Arka plan rengini de sabitleyelim */
    opacity: 1 !important;
}

/* İkonun kendisi için (Saniye sayacı veya uçak ikonu) */
html.dark-mode #study-chat-container .chat-input button i,
html.dark-mode #study-chat-container .chat-input button span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Bazı tarayıcılar için garanti */
}

/* Buton pasifken (süre sayarken) */
html.dark-mode #study-chat-container .chat-input button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed;
    color: #eeeeee !important;
}





/* === SATRANÇ GÖRSEL İYİLEŞTİRMELERİ === */






/* === SATRANÇ GELİŞTİRMELERİ (GÜNCEL) === */

/* 1. Ahşap Doku Görünümü (Resim dosyası gerektirir) */
.board-b72b1 .white-1e1d7 {
    background-color: #ecd3b0; /* Resim yoksa bu renk görünür */
    background-image: url('Icon/wood_light.jpg'); /* Açık ahşap resmi */
    background-size: cover;
}

.board-b72b1 .black-3c85d {
    background-color: #c48c58; /* Resim yoksa bu renk görünür */
    background-image: url('Icon/wood_dark.jpg'); /* Koyu ahşap resmi */
    background-size: cover;
}


/* --- SATRANÇ GÖRSEL İYİLEŞTİRMELERİ (FİNAL) --- */

/* 1. Sürüklenen Taşın Büyümesi */
/* Not: Z-index'i çok yüksek tutuyoruz ki diğer taşların üstünden geçsin */
.chessboard-1.0.0-dragging {
    transform: scale(1.4) !important; /* Taşı %40 büyüt */
    opacity: 1 !important;
    z-index: 1000 !important;
    cursor: grabbing;
}

/* 2. Seçili Taş (Bastığın veya Tıkladığın Kare) - YEŞİL */
.highlight-selected {
    background-color: rgba(40, 167, 69, 0.6) !important; /* Belirgin Yeşil */
    box-shadow: inset 0 0 0 4px #28a745; /* Şık bir iç çerçeve */
}

/* 3. Gidilebilir Kareler (Nokta) - Siyah/Gri Nokta */
.highlight-legal-move {
    /* Karenin ortasında yuvarlak bir nokta oluşturur */
    background-image: radial-gradient(circle, rgba(0,0,0,0.3) 20%, transparent 25%) !important;
}

/* 4. Taş Yeme Durumu (Opsiyonel: Köşelerde kırmızımsı çerçeve veya farklı nokta) */
.highlight-capture {
    background-image: radial-gradient(circle, rgba(220, 53, 69, 0.5) 20%, transparent 25%) !important;
    box-shadow: inset 0 0 5px rgba(220, 53, 69, 0.6) !important;
}

/* 5. SON HAMLE (Önceki ve Yeni Konum) - YARI SAYDAM MAVİ */
/* Hem senin hem rakibin hamlesinde bu renk kalacak */
.highlight-last-move {
    box-shadow: inset 0 0 0 1000px rgba(0, 123, 255, 0.5) !important;
}

/* Tahtanın genel imleci */
#chess-board {
    cursor: pointer;
}


/* Modal Stilleri */
.custom-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 10002;
    display: flex; justify-content: center; align-items: center;
}

.modal-buttons { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
.btn-secondary { background: #6c757d; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn-danger { background: #dc3545; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn-primary { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }











/* Modal Arka Planı (Karartma) */
.chess-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Arkası bayağı koyu olsun */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Arkadaki oyunu flulaştırır */
}

/* Pencerenin Kendisi */
.chess-modal-content {
    background: #1e1e2e; /* Koyu gri/lacivert modern ton */
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid #3f3f5f;
    animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* İkon (Kupa veya Kuru Kafa) */
.chess-modal-icon {
    font-size: 60px;
    margin-bottom: 15px;
    display: block;
}

/* Başlık */
#chess-result-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mesaj */
#chess-result-msg {
    color: #a0a0b0;
    font-size: 16px;
    margin: 10px 0 25px 0;
}

/* Butonlar */
.chess-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.chess-modal-buttons button {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: transform 0.2s;
}

.chess-modal-buttons button:active {
    transform: scale(0.95);
}

.btn-restart {
    background: #4facfe;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.btn-close {
    background: #3a3a4a;
    color: white;
}

/* Açılma Animasyonu */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Kazanma Durumu (Yeşil Parlama) */
.chess-modal-content.win { border-color: #00b894; box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); }
/* Kaybetme Durumu (Kırmızı Parlama) */
.chess-modal-content.lose { border-color: #d63031; box-shadow: 0 0 20px rgba(214, 48, 49, 0.3); }









.game-btn-tournament {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #333;
    width: 250px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    animation: pulse 2s infinite;
    margin-top: 10px;
}
.prize-img { width: 100%; max-height: 200px; object-fit: contain; margin: 10px 0; }
.bracket-tree { display: flex; flex-direction: column; gap: 20px; }
.bracket-round { display: flex; justify-content: space-around; border-bottom: 1px solid #ccc; padding: 10px; }
.match-card { background: #eee; padding: 5px 10px; border-radius: 4px; text-align: center; }





/*
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s;
*/






/* TURNUVA STİLLERİ */
.tour-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.tour-tabs button {
    background: none;
    border: none;
    font-size: 16px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    color: #666;
}
.tour-tabs button.active {
    color: #007bff;
    border-bottom: 2px solid #007bff;
}
.bracket-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 20px;
    min-width: 600px; /* Mobilde kaydırmak için */
}
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 40px;
    width: 150px;
}
.match-box {
    border: 1px solid #ccc;
    background: #f9f9f9;
    padding: 8px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 12px;
    position: relative;
}
.match-box.winner {
    border-color: #28a745;
    background: #eaffea;
}
.match-player {
    display: block;
    padding: 2px 0;
}
.match-player.active {
    font-weight: bold;
}









.btn-login-google {
    display: flex;
    align-items: center;
    gap: 10px;
}

.google-g-icon {
    width: 18px;      /* ikon boyutu */
    height: 18px;
    object-fit: contain;
    display: block;
}













#tour-info-content {
    min-height: 200px; /* İçerik gelene kadar alan tutsun */
    padding: 10px;
}
#tour-prize-img {
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}




















/* ========================================= */
/* === ÖZEL SATRANÇ ARKA PLANI === */
/* ========================================= */
#game-panel-chess-game {
    /* 'Görseller/duvar-kagidi.jpg' kısmını kendi resim dosyanızın yoluyla değiştirin */
    background-image: url('Görseller/chess_backgroundd.jpg'); 
    
    /* Resmi tüm alana yayar ve boşluk bırakmaz */
    background-size: cover; 
    
    /* Resmi ortalar */
    background-position: center;
    
    /* Resmin tekrar etmesini engeller */
    background-repeat: no-repeat;
    
    /* Eğer resim yüklenemezse yedek bir renk (isteğe bağlı) */
    background-color: #2c3e50; 
}

/* İPUCU: Eğer yazılar resim üzerinde okunmazsa, 
   oyuncu isimlerinin ve sürenin arkasına yarı saydam bir kutu ekleyebilirsiniz */
#game-panel-chess-game .chess-player-info {
    background-color: rgba(0, 0, 0, 0.6); /* Siyahın %60 saydam hali */
    color: #ffffff; /* Yazı rengi beyaz */
    border-radius: 8px; /* Köşeleri yuvarla */
    padding: 5px 10px;
}








/* ========================================= */
/* === SORU OYUNU ÖZEL ARKA PLANI === */
/* ========================================= */
#game-panel-game {
    /* 'Görseller/soru-duvar-kagidi.jpg' kısmına kendi resim yolunuzu yazın */
    background-image: url('Görseller/quiz_background.jpg');
    
    /* Resmi tüm alana yayar */
    background-size: cover; 
    
    /* Resmi ortalar */
    background-position: center;
    
    /* Resmin tekrar etmesini engeller */
    background-repeat: no-repeat;
    
    /* Resim yüklenemezse yedek renk */
    background-color: #f0f2f5; 
}

/* İPUCU: Soruların ve şıkların arka planını biraz şeffaf yaparak 
   duvar kağıdının görünmesini ama yazının da okunmasını sağlayabilirsiniz */
#game-panel-game .game-question-area,
#game-panel-game .game-option {
    
    border: 1px solid rgba(0, 0, 0, 0.1);
}















/* ========================================= */
/* === OYUN TAM EKRAN (ODAK) MODU V2 === */
/* ========================================= */

/* --- GENEL TAM EKRAN YAPISI --- */
.game-panel.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;

    
}

/* --- SORUN 1: BUTONLARI GİZLEME --- */
/* Tam ekrandayken çıkış butonlarını gizle */
.is-fullscreen .chess-leave-game-btn,
.is-fullscreen .game-btn-back {
    display: none !important;
}

/* Tam Ekran Butonu Konumu */
.game-btn-fullscreen {
    position: absolute;
    top: 50px;
    right: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
.game-btn-fullscreen:hover {
    background: #e74c3c;
    transform: rotate(90deg);
}


/* --- SORUN 2: POPUP GÖRÜNÜRLÜĞÜ (Z-INDEX) --- */
/* Modalları ve Alertleri tam ekranın üstüne çıkar */
.chess-modal-overlay, 
#winner-info-modal,
.swal2-container, 
.custom-alert-box { /* Kullandığın diğer popup sınıfları varsa buraya ekle */
    z-index: 1000001 !important; /* Tam ekrandan (999990) yüksek olmalı */
}

/* --- SATRANÇ OYUNU ÖZEL AYARLARI --- */

/* Satranç Oyunu Arka Planı */
#game-panel-chess-game.is-fullscreen {
    /* Görseli ve %90 siyah perdeyi karıştır */
    background: linear-gradient(rgba(0,0,0,0.90), rgba(0,0,0,0.90)), 
                url('Görseller/chess_full_screen.jpg') no-repeat center center/cover !important;
    
}

/* Satranç Tahtası Konteynerı */
#game-panel-chess-game.is-fullscreen #chess-board-container {
    /* Ekran yüksekliğinin %75'i kadar olsun (Kare kalması için) */
    height: 58vh !important; 
    width: 58vh !important;  
    max-width: 90vw; /* Telefondan girerse taşmasın */
    margin: 0 auto 20px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    transform: none !important; /* Eski scale kodunu iptal et */
}

/* Satranç Kütüphanesinin Tahtası */
#game-panel-chess-game.is-fullscreen #board {
    width: 100% !important;
    height: 100% !important;
}

/* Oyuncu Bilgileri (İsimler, Süreler) */
#game-panel-chess-game.is-fullscreen .chess-player-info {
    width: 58vh !important; /* Tahta ile aynı genişlikte olsun */
    max-width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    font-size: 1.2rem; /* Yazıları büyüt */
    color: #fff;
    backdrop-filter: blur(5px);
    margin: 10px -10px;
}


/* --- SORU (QUIZ) OYUNU ÖZEL AYARLARI --- */

/* Soru Oyunu Arka Planı */
#game-panel-game.is-fullscreen {
    /* Görseli ve %90 siyah perdeyi karıştır */
    background: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)), 
                url('Görseller/quiz_full_screen.jpg') no-repeat center center/cover !important;
                
}

/* Soru Alanı Kapsayıcısı */
#game-panel-game.is-fullscreen .game-question-area {
    width: 60% !important; /* Genişlik artırıldı */
    min-width: 800px;
    
    /* ÖNEMLİ: Arka plan rengini (white) kaldırdım, orijinali neyse o kalsın. 
       Sadece boyutu ve ortalamayı zorluyoruz. */
    margin: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    
    /* Sadece hafif bir parlama ekleyelim ki odakta olduğu belli olsun */
    box-shadow: 0 0 80px rgba(0,0,0, 0.8); 
}

/* Soru Metni */
#game-panel-game.is-fullscreen .game-question-area h4 {
    font-size: 2.2rem !important; /* Metni büyüt */
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.5;
    /* Renk ataması yapmıyorum, orijinali kalsın */
}

/* Şıklar Izgarası */
#game-panel-game.is-fullscreen .game-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PC'de yan yana 2 şık */
    gap: 25px;
    width: 70%;
}

/* Şık Butonları */
#game-panel-game.is-fullscreen .game-option {
    padding: 25px;
    font-size: 1.4rem; /* Yazıları büyüt */
    /* Renk değiştiren kodları sildim, orijinal buton rengin neyse o kalacak */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s;
}

#game-panel-game.is-fullscreen .game-option:hover {
    transform: scale(1.03); /* Hafif büyüme efekti */
    z-index: 5;
}    }
    #game-panel-chess-game.is-fullscreen .chess-player-info {
        height: auto !important;
    }
}





#game-panel-game.is-fullscreen .game-btn-fullscreen {
    
    top: 20px;
}
#game-panel-game .game-btn-fullscreen {
    
    top: 5px;
}



/* --- MOBİL UYUMLULUK DÜZELTMESİ --- */
@media (max-width: 768px) {
    #game-panel-chess-game.game-btn-fullscreen {
    
    display: none;
    }
    #game-panel-game.is-fullscreen .game-question-area {
        width: 95% !important;
        min-width: auto;
        padding: 20px;
    }
    #game-panel-game .game-btn-fullscreen {
    
    display: none;
}
    
    #game-panel-game.is-fullscreen h4 {
        font-size: 1.2rem !important;
    }
    #game-panel-game.is-fullscreen .game-options-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta dönsün */
    }
    
    /* Satranç Mobilde */
    #game-panel-chess-game.is-fullscreen #chess-board-container,
    #game-panel-chess-game.is-fullscreen .chess-player-info {
        width: 95vw !important;
        height: 95vw !important; /* Kare olması için */
    }
    #game-panel-chess-game.is-fullscreen .chess-player-info {
        height: auto !important;
    }
    
    
}



/* ========================================= */
/* === MOBİLDE TAM EKRAN BUTONUNU GİZLE === */
/* ========================================= */
@media (max-width: 768px) {
    .game-btn-fullscreen {
        display: none !important;
    }
}










/* ============================================== */
/* === NEXT-GEN SATRANÇ SIRA GEÇİŞ EFEKTLERİ === */
/* ============================================== */

/* 1. Oyuncu Bilgi Kutusu (Varsayılan Hali) */
.chess-player-info {
    position: relative; /* Efektler için gerekli */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Yumuşak geçiş */
    border-left: 4px solid transparent; /* Sol çizgi için yer ayır */
    opacity: 0.6; /* Sıra onda değilken hafif sönük */
    transform: scale(0.98); /* Sıra onda değilken hafif küçük */
    background: rgba(255, 255, 255, 0.05); /* Çok hafif arka plan */
    overflow: hidden; /* Taşmaları gizle */
}

/* 2. AKTİF SIRA (Sıra Kimdeyse Bu Sınıf Eklenecek) */
.chess-player-info.active-turn {
    opacity: 1; /* Tam görünürlük */
    transform: scale(1.02); /* Öne doğru hafif büyüme (3D hissi) */
    background: linear-gradient(90deg, rgba(103, 58, 183, 0.25) 0%, rgba(0,0,0,0) 100%); /* Soldan sağa mor degrade */
    border: 1px solid #b388ff; /* Parlak mor sol çizgi */
    box-shadow: 0 0 30px rgba(103, 58, 183, 0.4), /* Dış parlama */
                inset 0 0 10px rgba(103, 58, 183, 0.2); /* İç parlama */
}

/* 3. Animasyonlu Parlama Efekti (Nabız Gibi Atması İçin) */
.chess-player-info.active-turn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    
}

@keyframes shine-sweep {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(100%); }
}

/* --- Tam Ekran Moduyla Çakışmaması İçin Ufak Ayar --- */
/* Tam ekranda zaten büyüttüğümüz için scale efektini biraz kısıyoruz */
#game-panel-chess-game.is-fullscreen .chess-player-info.active-turn {
    transform: scale(1.0); 
    background: rgba(255, 255, 255, 0.15);
    border-left-color: #00e676; /* Tam ekranda yeşil veya parlak bir renk daha hoş durabilir, veya mor kalsın istersen silme */
    border-left-color: #b388ff; 
    box-shadow: 0 0 50px rgba(103, 58, 183, 0.6);
}








/* Şifre Görme İkonu İçin */
.password-group {
    position: relative;
}
.password-group .fa-eye,
.password-group .fa-eye-slash {
    position: absolute;
    right: 15px;
    top: 42px; /* Input yüksekliğine göre ayarlaman gerekebilir */
    color: #777;
    cursor: pointer;
    z-index: 10;
}

/* Modal Düzenlemeleri (Çakışmayı önlemek için) */
#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000; /* En üstte olsun */
    display: none; /* Varsayılan gizli */
    justify-content: center;
    align-items: center;
}
#modal-overlay.modal-visible {
    display: flex !important;
}
.modal-overlay-hidden {
    display: none !important;
}





/* Yorum Limiti Bilgilendirme Metni */
.comment-limit-info {
    font-size: 13px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.3s;
}

.comment-limit-info.info-success {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.comment-limit-info.info-error {
    background-color: #ffebee;
    border-color: #ffcdd2;
    color: #c62828;
    font-weight: 500;
}

/* Karanlık Mod Uyumu */
html.dark-mode .comment-limit-info {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

html.dark-mode .comment-limit-info.info-success {
    background-color: rgba(46, 125, 50, 0.1);
    color: #4caf50;
    border-color: rgba(46, 125, 50, 0.2);
}

html.dark-mode .comment-limit-info.info-error {
    background-color: rgba(198, 40, 40, 0.1);
    color: #ef5350;
    border-color: rgba(198, 40, 40, 0.2);
}





/* --- SATRANÇ DÜZENİ VE YENEN TAŞLAR (YATAY DÜZEN) --- */
.chess-game-layout {
    display: flex;
    flex-direction: row; /* Tahta ve yenen taşları yan yana diz */
    align-items: center; /* Dikeyde ortala (tahta yüksekliğine göre) */
    justify-content: center;
    gap: 5px; /* Tahta ve paneller arası boşluk */
    width: 100%;
    max-width: 600px; /* Maksimum genişlik */
    margin: 10px auto;
}

#chess-board-container {
    flex-shrink: 0; 
    width: 100%;
    max-width: 400px; /* Standart tahta boyutu */
    position: relative;
}

.captured-area {
    display: flex;
    flex-direction: column; /* Taşları dikey olarak diz */
    justify-content: flex-end; /* Varsayılan: Taşlar alttan (oyuncunun tarafından) yukarı doğru dolsun (captured-by-me) */
    gap: 2px;
    width: 40px; /* Dikey bar genişliği */
    height: 400px; /* Tahtanın standart yüksekliğine yakın bir değer */
    min-height: 400px;
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding: 5px 2px;
    overflow-y: hidden; /* Taşlar sığmazsa gizle */
}

/* Rakip tarafının yediği taşlar (Sağ Panel) için özel ayar: */
/* Taşlar üstten aşağı dolsun (Rakip tarafına yakın) */
#captured-by-opponent {
    justify-content: flex-start; 
}

.captured-piece {
    width: 30px; 
    height: 30px;
    object-fit: contain;
    transition: transform 0.2s;
}
.captured-piece:hover {
    transform: scale(1.1);
}

/* Mobilde Düzenleme */
@media (max-width: 600px) {
    .captured-area {
        width: 30px; /* Daha dar sütun */
        height: 320px; 
        min-height: 320px;
    }
    .captured-piece {
        width: 25px;
        height: 25px;
    }
}

/* Karanlık Mod */
html.dark-mode .captured-area {
    background: rgba(255,255,255,0.1);
}





/* === SATRANÇ MOBİL DÜZEN DÜZELTMESİ === */
@media (max-width: 768px) {
    /* Ana Tahta Düzeni: Mobilde dikey olsun */
    .chess-game-layout {
        flex-direction: column !important;
        gap: 10px;
    }

    /* Yenen Taşlar Alanı: Mobilde yatay (row) olsun, dikey değil */
    .captured-area {
        flex-direction: row !important; /* Taşlar yan yana dizilsin */
        width: 100% !important; /* Genişlik tam olsun */
        height: 35px !important; /* Yükseklik sabitlensin */
        min-height: 35px !important;
        justify-content: flex-start !important; /* Sola yaslı */
        padding: 2px 5px !important;
        overflow-x: auto; /* Taşarsa yana kaydır */
        overflow-y: hidden;
    }

    /* Rakibin yediği taşlar (Üstte görünsün) */
    #captured-by-opponent {
        order: 1; /* En üst */
        border-bottom: 2px solid rgba(0,0,0,0.1);
    }

    /* Tahta (Ortada) */
    #chess-board-container {
        order: 2;
        margin: 5px 0;
    }

    /* Benim yediğim taşlar (Altta görünsün) */
    #captured-by-me {
        order: 3; /* En alt */
        border-top: 2px solid rgba(0,0,0,0.1);
    }

    /* Taş boyutlarını mobilde biraz küçült */
    .captured-piece {
        width: 25px !important;
        height: 25px !important;
    }
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Karanlık mod uyumu için */
html.dark-mode .champion-card {
    background: linear-gradient(135deg, #b78a02 0%, #8a6d0b 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(183, 138, 2, 0.4) !important;
}






/* === KAYAN DUYURU ŞERİDİ === */
.ticker-wrapper {
    width: 100%;
    overflow: hidden; /* Taşmayı gizle */
    background-color: transparent; /* Şeffaf arka plan */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Çok hafif ayırıcı çizgi */
    padding: 12px 0;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    /* Hafif bir blur efekti ekleyerek modern cam havası verelim */
    backdrop-filter: blur(5px);
}

.ticker-content {
    display: inline-block;
    padding-left: 100%; /* Başlangıçta ekranın sağ dışında */
    animation: ticker-scroll 25s linear infinite; /* 25 saniyede bir tur */
    font-size: 16px;
    font-weight: 600;
    color: #333; /* Varsayılan koyu renk */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Animasyon Tanımı */
@keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Hover durumunda dursun (Kullanıcı okuyabilsin) */
.ticker-wrapper:hover .ticker-content {
    animation-play-state: paused;
}

/* === KARANLIK MOD UYUMU === */
html.dark-mode .ticker-wrapper {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

html.dark-mode .ticker-content {
    color: var(--text-primary); /* Senin tanımladığın tema rengini kullanır */
    text-shadow: 0 0 5px rgba(139, 92, 246, 0.4); /* Hafif mor parıltı (tema rengin) */
}

/* Mobilde fontu biraz küçültelim */
@media (max-width: 768px) {
    .ticker-content {
        font-size: 14px;
        animation-duration: 20s; /* Mobilde daha kısa mesafe ama yine de hızlı akmasın */
    }
}




/* --- Topluluk Etkinlikleri Tasarımı --- */
.community-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    padding-top: 10px;
}

.back-button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-color);
    cursor: pointer;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.back-button:hover {
    background: var(--bg-color);
    transform: scale(1.05);
}

.community-title {
    margin: 0;
    font-size: 18px;
    color: var(--text-color);
    font-weight: 600;
}

.event-card-custom {
    border: 1px solid #909090;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.05));
    background: var(--card-bg);
}

.event-card-img {
    width: 100%;
    height: auto;     /* Yüksekliği otomatiğe geri aldık */
    display: block;
    /* max-height ve object-fit satırlarını sildik */
}

.event-card-body {
    padding: 20px;
}

.event-date-tag {
    color: #673AB7; /* Marka renginiz olduğu için sabit kalabilir veya var(--primary-color) yapabilirsiniz */
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.event-description {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: var(--text-color);
}

.event-contact {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.8;
    background: var(--bg-color);
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}





/* Ödülüm Butonu */
.prize-claim-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); /* Altın Sarısı */
    color: #333;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    display: flex;
    align-items: center;
    border: none;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: pulse-gold 2s infinite;
}

.prize-claim-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Karanlık Mod */
html.dark-mode .prize-claim-btn {
    color: #000;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}










/* app.css dosyasının en altına ekle */

.chess-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
    z-index: 100; /* Diğer öğelerin üzerinde kalsın */
}

.chess-modal-close:hover {
    color: #333; /* Mouse üzerine gelince koyulaşsın */
}

/* Mobilde dokunma alanını biraz daha rahatlatmak için */
@media (max-width: 768px) {
    .chess-modal-close {
        top: 5px;
        right: 15px;
        font-size: 35px;
    }
}





.chess-modal-content p {
    color: #eee !important;
}




#events-content h4 {
    color: #333 !important;
}

html.dark-mode #events-content h4 {
    color: #ddd !important;
}