/* =====================================================
   PC MODERN FIX v2 - TEMİZ UYUMLU SÜRÜM
   Sadece PC index.html için.
   Mobil index2.html / mobil css dosyalarına dokunmaz.
   ===================================================== */

:root {
  --pc-primary: #667eea;
  --pc-secondary: #764ba2;
  --pc-bg: #f4f6fb;
  --pc-panel: #ffffff;
  --pc-border: rgba(15,23,42,0.10);
  --pc-shadow-soft: 0 6px 18px rgba(15,23,42,0.08);
  --pc-shadow-panel: 0 14px 34px rgba(15,23,42,0.14);
  --pc-radius: 14px;
  --pc-radius-lg: 18px;
}

/* ================= KRİTİK SİSTEM KORUMA ================= */

/* gizle sınıfı hiçbir modern kural tarafından ezilmemeli */
.gizle,
.ui.label.gizle,
.ui.floating.label.gizle,
.floating.ui.circular.label.gizle,
.ozelmesaj_sayisi.gizle,
.ozelarama_sayisi.gizle,
#online_say_ozel.gizle,
#yeniaramavar.gizle,
#radyoalani.gizle,
.kisiler_oda_site_link .ks_sayi.gizle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Genel font: sadece PC body ve ana UI */
body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--pc-bg);
  overflow-x: hidden !important;
}

/* Rütbe, nick, kullanıcı renkleri korunur */
.nick,
.user-nick,
.kullaniciadi,
[class*="renk"],
[class*="rank"],
[class*="rutbe"],
[class*="yildiz"],
.material-icons,
i,
svg,
.icon {
  color: inherit;
}

/* ================= GİRİŞ EKRANI - REFERANS UYUMLU AMA MEVCUT LOGIN.CSS KORUNUR ================= */

.GirisAnaSablon {
  background-size: 200% 200%;
}

.formalani {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 18px 48px rgba(31,38,135,0.22) !important;
}

.girisInput {
  border-radius: 14px !important;
}

.girisButonu,
#girisButonu,
.girisButon {
  border-radius: 14px !important;
}

/* ================= DİALOG / ADMIN / MODAL ================= */

.ui-dialog,
.ui.modal,
#modallar {
  border-radius: var(--pc-radius-lg) !important;
  box-shadow: var(--pc-shadow-panel) !important;
  overflow: hidden !important;
}

.ui-dialog-titlebar {
  border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0 !important;
}

.ui-dialog-content,
.ui.modal .content {
  background: #f8fafc !important;
}

/* Admin mevcut admin.css yapısını bozmadan sadece yumuşatma */
#adminButtonPanel {
  border-radius: var(--pc-radius-lg) !important;
}

#adminButtonPanel .admin-btn,
.admin-btn {
  border-radius: 16px !important;
}

/* ================= ODA ARKA PLANI - DİNAMİK SENKRON KORUMA ================= */

/*
Burada background-image kesinlikle verilmez.
Oda resmi JS/inline style ile mobil-PC senkron gelebiliyor.
*/
#oda_mesaj_list.sohbetalani,
.sohbetalani {
  background-color: #e5ddd5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}

/* Inline oda resmi geldiyse yalnız hizalama korunur */
#oda_mesaj_list.sohbetalani[style*="background"],
.sohbetalani[style*="background"] {
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Mesaj container şeffaf kalmalı */
#oda_mesaj_list .messages_oda,
.messages_oda,
.messages_oda.messages {
  background: transparent !important;
  background-color: transparent !important;
}

/* ================= GENEL SOHBET MESAJ DÜZENİ ================= */

/* Sadece gerçek PC mesaj wrapper */
.messagero.mesaj_oda {
  display: flex !important;
  align-items: flex-start !important;
  gap: 3px !important;
  padding: 4px 10px !important;
  margin: 0 0 5px 0 !important;
  max-width: 82% !important;
  box-sizing: border-box !important;
}

/* Gelen mesaj: avatar solda, balon yanında */
.messagero.mesaj_oda.message-received {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  margin-right: auto !important;
}

/* Giden mesaj: sağda */
.messagero.mesaj_oda.message-sent {
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-self: flex-end !important;
  margin-left: auto !important;
}

/* Avatar daha yakın */
.messagero.mesaj_oda .message-avatar {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  flex: 0 0 35px !important;
  margin: 1px 2px 0 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Balon düzeni: yazı rengine dokunma */
.messagero.mesaj_oda .message-text {
  margin: 0 !important;
  max-width: calc(100% - 39px) !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
}

/* Kullanıcı adı hizayı bozmasın */
.messagero.mesaj_oda .message-name {
  margin: 0 0 3px 0 !important;
  line-height: 1.2 !important;
}

/* Sistem mesajları ortada kalmalı */
.messagero.message-sistem-center {
  align-self: center !important;
  align-items: center !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================= MESAJ YAZMA ALANI ================= */

.yazismalani_oda {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,0.94) !important;
  border-top: 1px solid var(--pc-border) !important;
  box-shadow: 0 -6px 18px rgba(15,23,42,0.06) !important;
}

.yazismalani_oda .toolbar-group,
.yazismalani_oda .toolbar-left,
.yazismalani_oda .toolbar-right,
.yazismalani_oda .icon-toggle-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.yazismalani_oda .message_oda_outer {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 4px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--pc-border) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
  box-sizing: border-box !important;
}

/* Gerçek Semantic UI ikonlarını koru; pseudo icon yok */
.yazismalani_oda .iconlarspan {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,0.08) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  color: var(--pc-primary) !important;
}

.yazismalani_oda .iconlarspan > i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--pc-primary) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

.yazismalani_oda .iconlarspan:hover {
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-secondary)) !important;
  border-color: rgba(102,126,234,0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.14) !important;
}

.yazismalani_oda .iconlarspan:hover > i {
  color: #ffffff !important;
}

/* Dropdown menü içi ikonlar bozulmasın */
#menusecond .menu i {
  display: inline-block !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================= ODA / KULLANICI LİSTESİ - RENDER KORUMALI ================= */

/* Liste gövdelerinin JS render yapısını bozma: display flex yok */
#odalar_listesi_govde .odaLi,
#kisiler_listesi_govde .kisiLi,
#kisiler_listesi_govde .kisiLiOda {
  margin: 0 !important;
  padding: 0 !important;
}

/* Sadece hover yumuşatması */
#odalar_listesi_govde .odaLi:hover,
#kisiler_listesi_govde .kisiLi:hover,
#kisiler_listesi_govde .kisiLiOda:hover {
  background: rgba(102,126,234,0.06) !important;
}

/* Badge sistemleri gizle classını ezmeden korunur */
.ks_sayi,
.online_say_hepsi,
.ozelmesaj_sayisi:not(.gizle),
.ozelarama_sayisi:not(.gizle),
.ui.floating.label:not(.gizle) {
  border-radius: 999px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* ================= MİKROFON SLOT ================= */

#micSlotsRow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

#micSlotsRow .slot-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

#micSlotsRow .mic-slot {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--pc-border) !important;
  box-shadow: var(--pc-shadow-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

#micSlotsRow .mic-slot:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.12) !important;
}

#micSlotsRow .mic-slot.active,
#micSlotsRow .mic-slot[aria-pressed="true"] {
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.14), 0 10px 22px rgba(15,23,42,0.12) !important;
}

#micSlotsRow .slot-username {
  max-width: 82px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ================= PROFİL / POPUP ================= */

.profil-card,
.profile-card,
.kullanici-profil,
.uye-profil,
#profil,
#profilKart,
#profilDetay {
  border-radius: var(--pc-radius-lg) !important;
  box-shadow: var(--pc-shadow-panel) !important;
}

.profil-aksiyon-btn,
.profile-action-btn,
.uye-action-btn,
#profil button,
#profilKart button,
#profilDetay button {
  min-height: 36px !important;
  line-height: 1.2 !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

/* ================= TOAST / UYARI ================= */

.iziToast,
.swal-modal,
.ui.message,
.durum-bildirim-icerik {
  border-radius: 14px !important;
  box-shadow: var(--pc-shadow-soft) !important;
}

/* ================= PERFORMANS ================= */

* {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Acil kapatma: body classına pc-modern-off eklenirse görsel efektler kapanır */
body.pc-modern-off * {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ================= PC MODERN ICON JS PATCH STYLE ================= */

.yazismalani_oda .iconlarspan .pc-action-icon {
  font-family: "Material Icons" !important;
  font-size: 21px !important;
  line-height: 1 !important;
  color: var(--pc-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
}

.yazismalani_oda .iconlarspan > i.pc-hidden-old-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* El indir için aynı el ikonunu ters çevir */
#elindir .pc-action-icon {
  transform: rotate(180deg);
}

/* Hover'da icon beyaz kalsın */
.yazismalani_oda .iconlarspan:hover .pc-action-icon {
  color: #ffffff !important;
}

/* gizle classı yine en güçlü kalsın */
.yazismalani_oda .iconlarspan.gizle {
  display: none !important;
}