/* ==========================================================================
   Mesajlar — koyu tema arayüz
   Sığ seçiciler, geçişler yalnızca renk üzerinde, düzen Grid + Flexbox.
   ========================================================================== */

:root {
  color-scheme: dark;

  --zemin:         #08090c;
  --panel:         #0e1116;
  --panel-ust:     #141922;
  --panel-hover:   #1b2129;
  --kenarlik:      #212936;
  --kenarlik-acik: #2c3646;

  --metin:       #e8ecf3;
  --metin-orta:  #9aa6b8;
  --metin-soluk: #64708a;

  --neon:       #00b4ff;
  --neon-koyu:  #0093d4;
  --neon-sis:   rgba(0, 180, 255, 0.10);
  --neon-cizgi: rgba(0, 180, 255, 0.35);
  --neon-uzeri: #04131d;

  --basarili: #2ee6a8;
  --tehlike:  #ff4d6d;

  --kenar-genislik: 340px;
  --yuvarlak-sm: 8px;
  --yuvarlak:    12px;
  --yuvarlak-lg: 18px;
  --hap:         999px;

  --bosluk-sm: 8px;
  --bosluk:    14px;
  --bosluk-lg: 20px;

  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.5;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

img, video { display: block; max-width: 100%; }
ul, ol, menu { list-style: none; }
a { color: var(--neon); }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
button { cursor: pointer; }
fieldset { border: 0; }

:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: var(--yuvarlak-sm); }

[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--kenarlik-acik); border-radius: var(--hap); }
::-webkit-scrollbar-track { background: transparent; }

/* Görsel gizli / ekran okuyucuya açık */
#akis-alani > h3,
#yazma-form legend,
label[for="sohbet-ara"],
label[for="mesaj-metni"],
#cikartma-paneli h3,
#gif-paneli h3 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================== 1. GİRİŞ EKRANI ===== */

body[data-ekran="giris"],
body[data-ekran="yukleniyor"] { display: grid; place-items: center; padding: var(--bosluk); }

#giris-ekrani { width: 100%; max-width: 400px; }

#giris-ekrani > section {
  padding: 32px 28px;
  background: var(--panel);
  border: 1px solid var(--kenarlik);
  border-radius: 20px;
}

#giris-ekrani header { text-align: center; margin-bottom: 24px; }
#giris-ekrani header img { margin: 0 auto 12px; }
#giris-ekrani h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
#giris-ekrani header p { margin-top: 8px; font-size: 0.84rem; color: var(--metin-orta); }

#giris-ekrani nav menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: var(--panel-ust);
  border-radius: var(--hap);
}

#giris-ekrani nav button {
  padding: 9px;
  border-radius: var(--hap);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--metin-orta);
  transition: background-color 0.1s linear, color 0.1s linear;
}

#giris-ekrani nav button[aria-pressed="true"] { background: var(--neon); color: var(--neon-uzeri); }

#giris-ekrani form p { margin-bottom: 14px; }

#giris-ekrani label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--metin-orta);
}

#giris-ekrani input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--yuvarlak);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  font-size: 0.92rem;
  transition: border-color 0.1s linear;
}

#giris-ekrani input:focus { border-color: var(--neon-cizgi); outline: none; }
#giris-ekrani small { display: block; margin-top: 5px; font-size: 0.72rem; color: var(--metin-soluk); }

#giris-ekrani form > button {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: var(--yuvarlak);
  background: var(--neon);
  color: var(--neon-uzeri);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background-color 0.1s linear;
}

#giris-ekrani form > button:hover { background: var(--neon-koyu); }
#giris-ekrani form > button:disabled { opacity: 0.55; cursor: progress; }

#giris-uyari {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--yuvarlak);
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff97ab;
  font-size: 0.82rem;
}

/* ================================================== 2. UYGULAMA DÜZENİ == */

body[data-ekran="uygulama"] {
  display: grid;
  grid-template-columns: var(--kenar-genislik) minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}

/* ================================================== 3. KENAR ÇUBUĞU ===== */

#kenar-cubugu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--kenarlik);
}

#kenar-cubugu > header {
  flex: none;
  padding: var(--bosluk-lg) var(--bosluk) var(--bosluk);
  border-bottom: 1px solid var(--kenarlik);
}

#kenar-cubugu figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

#ben-avatar { width: 44px; height: 44px; border-radius: var(--hap); border: 2px solid var(--neon-cizgi); }

#kenar-cubugu figcaption { min-width: 0; }
#ben-ad { display: block; font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ben-kadi { font-size: 0.76rem; color: var(--metin-soluk); }

#kenar-cubugu > header menu {
  display: flex;
  gap: 6px;
  margin-top: var(--bosluk);
}

#kenar-cubugu > header menu li:first-child { flex: 1; }
#kenar-cubugu > header menu li:nth-child(2) { flex: 1; }

#kenar-cubugu > header menu button {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--hap);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--metin-orta);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  white-space: nowrap;
  transition: color 0.1s linear, border-color 0.1s linear;
}

#kenar-cubugu > header menu button:hover { color: var(--neon); border-color: var(--neon-cizgi); }
#btn-cikis:hover { color: var(--tehlike) !important; border-color: rgba(255, 77, 109, 0.4) !important; }

/* Arama kutusu */
#kenar-cubugu search { display: block; flex: none; padding: var(--bosluk); }

#ara-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  border-radius: var(--hap);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  transition: border-color 0.1s linear;
}

#ara-form:focus-within { border-color: var(--neon-cizgi); }
#sohbet-ara { min-width: 0; padding: 8px 0; font-size: 0.88rem; }
#sohbet-ara::placeholder { color: var(--metin-soluk); }
#sohbet-ara::-webkit-search-cancel-button { display: none; }

#btn-ara-temizle {
  padding: 6px 14px;
  border-radius: var(--hap);
  font-size: 0.76rem;
  color: var(--metin-orta);
  transition: background-color 0.1s linear, color 0.1s linear;
}
#btn-ara-temizle:hover { background: var(--neon); color: var(--neon-uzeri); }

/* Sohbet listesi + arama sonuçları */
#sohbet-listesi-alani,
#arama-sonuc-alani {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--bosluk-sm) var(--bosluk);
}

#liste-baslik,
#arama-sonuc-alani h2 {
  padding: var(--bosluk-sm) 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

#sohbet-listesi button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px;
  border-radius: var(--yuvarlak);
  text-align: left;
  transition: background-color 0.1s linear;
}

#sohbet-listesi button:hover { background: var(--panel-hover); }
#sohbet-listesi button[aria-current="true"] { background: var(--neon-sis); box-shadow: inset 2px 0 0 var(--neon); }

#sohbet-listesi img {
  grid-row: span 2;
  width: 40px; height: 40px;
  border-radius: var(--hap);
  background: var(--panel-ust);
}

/* Çevrimiçi noktası avatarın köşesine */
#sohbet-listesi img[data-cevrimici] {
  box-shadow: 0 0 0 2px var(--panel), 12px 12px 0 -3px var(--basarili), 0 0 0 0 transparent;
}

#sohbet-listesi strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sohbet-listesi span { min-width: 0; font-size: 0.8rem; color: var(--metin-orta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sohbet-listesi time { font-size: 0.7rem; color: var(--metin-soluk); white-space: nowrap; }

#sohbet-listesi data { justify-self: end; font-size: 0; line-height: 1; }
#sohbet-listesi data::before {
  content: attr(value);
  display: block;
  min-width: 19px;
  padding: 3px 6px;
  border-radius: var(--hap);
  background: var(--neon);
  color: var(--neon-uzeri);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

#liste-bos, #sonuc-bos {
  padding: 24px 14px;
  font-size: 0.83rem;
  color: var(--metin-soluk);
  text-align: center;
}

#sonuc-kisiler button, #sonuc-mesajlar button {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: var(--yuvarlak);
  text-align: left;
  transition: background-color 0.1s linear;
}
#sonuc-kisiler button:hover, #sonuc-mesajlar button:hover { background: var(--panel-hover); }
#sonuc-kisiler strong, #sonuc-mesajlar strong { font-size: 0.86rem; font-weight: 600; }
#sonuc-kisiler small { font-size: 0.75rem; color: var(--metin-soluk); }
#sonuc-mesajlar span {
  font-size: 0.79rem; color: var(--metin-orta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sonuc-mesajlar time { font-size: 0.68rem; color: var(--metin-soluk); }

/* ================================================== 4. SOHBET ALANI ===== */

#sohbet-alani {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--zemin);
}

#sohbet-baslik {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: var(--bosluk) var(--bosluk-lg);
  background: var(--panel);
  border-bottom: 1px solid var(--kenarlik);
}

#btn-geri {
  display: none;
  padding: 7px 12px;
  border-radius: var(--hap);
  font-size: 0.78rem;
  color: var(--metin-orta);
  background: var(--panel-ust);
}

#sohbet-avatar { width: 40px; height: 40px; border-radius: var(--hap); }
#sohbet-baslik hgroup { min-width: 0; }
#sohbet-ad { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sohbet-durum { font-size: 0.75rem; color: var(--metin-soluk); }

#sohbet-baslik menu { display: flex; gap: var(--bosluk-sm); }

#sohbet-baslik menu button {
  padding: 7px 14px;
  border-radius: var(--hap);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--metin-orta);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  white-space: nowrap;
  transition: color 0.1s linear, border-color 0.1s linear;
}
#sohbet-baslik menu button:hover { color: var(--neon); border-color: var(--neon-cizgi); }

/* Boş durum */
#bos-durum {
  grid-row: 3;
  place-self: center;
  max-width: 300px;
  padding: var(--bosluk-lg);
  text-align: center;
  font-size: 0.88rem;
  color: var(--metin-soluk);
}
#bos-durum strong { color: var(--metin-orta); }

/* --------------------------------------------------------- mesaj akışı */

#akis-alani {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bosluk-lg);
}

#daha-fazla-alani { text-align: center; padding-bottom: var(--bosluk-lg); }

#btn-daha-fazla {
  padding: 7px 18px;
  border-radius: var(--hap);
  font-size: 0.76rem;
  color: var(--metin-orta);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  transition: color 0.1s linear;
}
#btn-daha-fazla:hover { color: var(--neon); }
#btn-daha-fazla:disabled { opacity: 0.5; cursor: progress; }

#akis {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-sm);
  margin-top: auto;
}

/* Gün ayracı ve sistem/arama olayları */
#akis li[data-tur="gun"] p,
#akis li[data-tur="olay"] p {
  width: fit-content;
  max-width: 80%;
  margin: 6px auto;
  padding: 5px 14px;
  border-radius: var(--hap);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  font-size: 0.72rem;
  color: var(--metin-soluk);
  text-align: center;
}

/* Baloncuklar */
#akis article {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: min(70%, 580px);
  padding: 9px 13px;
  border-radius: var(--yuvarlak-lg);
  border-bottom-left-radius: var(--yuvarlak-sm);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  overflow-wrap: anywhere;
}

#akis article h4 { font-size: 0.76rem; font-weight: 700; margin-bottom: 3px; }
#akis article > p { font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }

#akis article > footer {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-top: 3px;
}

#akis article time { font-size: 0.66rem; color: var(--metin-soluk); }
#akis .okundu-bilgi { font-size: 0.64rem; color: var(--metin-soluk); }

/* Giden — neon */
#akis li[data-yon="giden"] article {
  margin-left: auto;
  background: var(--neon);
  border-color: var(--neon);
  color: var(--neon-uzeri);
  border-bottom-left-radius: var(--yuvarlak-lg);
  border-bottom-right-radius: var(--yuvarlak-sm);
}
#akis li[data-yon="giden"] article > p { font-weight: 500; }
#akis li[data-yon="giden"] article a { color: var(--neon-uzeri); text-decoration: underline; }
#akis li[data-yon="giden"] time,
#akis li[data-yon="giden"] .okundu-bilgi { color: rgba(4, 19, 29, 0.62); }

/* Medya baloncukları: çerçeve yerine görselin kendisi */
#akis article[data-medya] { padding: 5px; background: transparent; border-color: transparent; }
#akis li[data-yon="giden"] article[data-medya] { background: transparent; border-color: transparent; }
#akis article[data-medya] > footer { padding: 0 6px 2px; }
#akis li[data-yon="giden"] article[data-medya] time,
#akis li[data-yon="giden"] article[data-medya] .okundu-bilgi { color: var(--metin-soluk); }
#akis article[data-medya] h4 { padding: 2px 6px; }

.medya-dugme { display: block; padding: 0; border-radius: var(--yuvarlak); overflow: hidden; }
#akis img.medya, #akis video.medya {
  max-width: 100%;
  max-height: 380px;
  width: auto; height: auto;
  border-radius: var(--yuvarlak);
  background: var(--panel-ust);
}
#akis img.cikartma { width: 128px; height: 128px; }
#akis img.gif { max-width: 240px; border-radius: var(--yuvarlak); }

.gif-yap-dugme {
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: var(--hap);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--neon);
  background: var(--neon-sis);
  border: 1px solid var(--neon-cizgi);
  transition: background-color 0.1s linear;
}
.gif-yap-dugme:hover { background: var(--neon); color: var(--neon-uzeri); }

.dosya-baglanti {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
  text-decoration: none;
  color: inherit;
}
.dosya-baglanti strong { font-size: 0.85rem; text-decoration: underline; }
.dosya-baglanti small { font-size: 0.7rem; opacity: 0.75; }

#akis audio { width: min(280px, 60vw); }

#yaziyor-satiri {
  flex: none;
  padding: 8px 4px 0;
  font-size: 0.76rem;
  color: var(--neon);
}

/* ------------------------------------------------------- yazma alanı */

#yazma-alani {
  padding: var(--bosluk) var(--bosluk-lg) var(--bosluk-lg);
  background: var(--panel);
  border-top: 1px solid var(--kenarlik);
}

#yazma-form fieldset {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px;
  padding: 6px;
  border-radius: var(--yuvarlak-lg);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  transition: border-color 0.1s linear;
}
#yazma-form fieldset:focus-within { border-color: var(--neon-cizgi); }

#ek-dosya { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

label[for="ek-dosya"],
#btn-cikartma,
#btn-gif {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--hap);
  font-size: 0;
  color: var(--metin-orta);
  cursor: pointer;
  transition: background-color 0.1s linear, color 0.1s linear;
}

label[for="ek-dosya"]::before { content: "+"; font-size: 1.6rem; font-weight: 300; line-height: 1; }
#btn-cikartma::before { content: "☺"; font-size: 1.3rem; line-height: 1; }
#btn-gif::before { content: "GIF"; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }

label[for="ek-dosya"]:hover,
#btn-cikartma:hover,
#btn-gif:hover { background: var(--panel-hover); color: var(--neon); }

#btn-cikartma[aria-expanded="true"],
#btn-gif[aria-expanded="true"] { background: var(--neon); color: var(--neon-uzeri); }

#mesaj-metni {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  max-height: 160px;
  padding: 9px 6px;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
  field-sizing: content;
}
#mesaj-metni::placeholder { color: var(--metin-soluk); }

#btn-gonder {
  justify-self: end;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--hap);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--neon-uzeri);
  background: var(--neon);
  transition: background-color 0.1s linear;
}
#btn-gonder:hover { background: var(--neon-koyu); }

#yukleme-durumu {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--neon);
}

/* --------------------------------------------------- çıkartma / gif panelleri */

#cikartma-paneli, #gif-paneli {
  max-height: 260px;
  margin-bottom: var(--bosluk-sm);
  padding: var(--bosluk-sm);
  overflow-y: auto;
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  border-radius: var(--yuvarlak-lg);
}

#cikartma-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

#gif-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

#cikartma-listesi button, #gif-listesi button {
  display: block;
  width: 100%;
  padding: 4px;
  border-radius: var(--yuvarlak);
  transition: background-color 0.1s linear;
}
#cikartma-listesi button:hover, #gif-listesi button:hover { background: var(--panel-hover); }
#cikartma-listesi img { width: 100%; height: auto; }
#gif-listesi img { width: 100%; height: 82px; object-fit: cover; border-radius: var(--yuvarlak-sm); }

/* ================================================== 5. PENCERELER ======= */

dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(80dvh, 680px);
  padding: var(--bosluk-lg);
  border: 1px solid var(--kenarlik);
  border-radius: 18px;
  background: var(--panel);
  color: var(--metin);
  overflow-y: auto;
}

dialog::backdrop { background: rgba(4, 8, 14, 0.72); }

dialog > form[method="dialog"] { display: flex; justify-content: flex-end; margin-bottom: -8px; }

dialog > form[method="dialog"] button {
  width: 32px; height: 32px;
  border-radius: var(--hap);
  font-size: 0;
  color: var(--metin-soluk);
  transition: background-color 0.1s linear, color 0.1s linear;
}
dialog > form[method="dialog"] button::before { content: "✕"; font-size: 0.95rem; }
dialog > form[method="dialog"] button:hover { background: var(--panel-hover); color: var(--metin); }

dialog h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--bosluk); }
dialog h3 {
  margin: var(--bosluk) 0 var(--bosluk-sm);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--metin-soluk);
}

dialog label { display: block; margin-bottom: 6px; font-size: 0.76rem; font-weight: 600; color: var(--metin-orta); }

dialog input[type="text"],
dialog input[type="search"],
dialog input[type="number"] {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--yuvarlak);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
  font-size: 0.88rem;
}
dialog input:focus { border-color: var(--neon-cizgi); outline: none; }
dialog p { margin-bottom: var(--bosluk-sm); }

dialog ul { display: grid; gap: 4px; }

dialog ul button {
  width: 100%;
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border-radius: var(--yuvarlak);
  text-align: left;
  background: var(--panel-ust);
  transition: background-color 0.1s linear;
}
dialog ul button:hover { background: var(--panel-hover); }
dialog ul strong { font-size: 0.86rem; font-weight: 600; }
dialog ul small { font-size: 0.74rem; color: var(--metin-soluk); }
dialog ul small.cevrimici { color: var(--basarili); }

#pg-uyeler li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--yuvarlak);
  background: var(--panel-ust);
}

#yg-secilenler li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 13px;
  border-radius: var(--yuvarlak);
  background: var(--neon-sis);
  border: 1px solid var(--neon-cizgi);
  font-size: 0.85rem;
}

#yg-secilenler button {
  padding: 4px 10px;
  border-radius: var(--hap);
  font-size: 0.72rem;
  color: var(--tehlike);
  background: rgba(255, 77, 109, 0.12);
}

#btn-grup-olustur, #btn-gif-olustur {
  width: 100%;
  margin-top: var(--bosluk);
  padding: 12px;
  border-radius: var(--yuvarlak);
  background: var(--neon);
  color: var(--neon-uzeri);
  font-weight: 700;
  transition: background-color 0.1s linear;
}
#btn-grup-olustur:hover, #btn-gif-olustur:hover { background: var(--neon-koyu); }
#btn-grup-olustur:disabled, #btn-gif-olustur:disabled { opacity: 0.55; cursor: progress; }

#btn-gruptan-ayril {
  width: 100%;
  margin-top: var(--bosluk-lg);
  padding: 11px;
  border-radius: var(--yuvarlak);
  color: var(--tehlike);
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.3);
  font-weight: 600;
}

#yg-uyari, #gy-uyari {
  padding: 9px 13px;
  border-radius: var(--yuvarlak);
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff97ab;
  font-size: 0.8rem;
}

#gy-onizleme { width: 100%; max-height: 240px; border-radius: var(--yuvarlak); background: #000; margin-bottom: var(--bosluk); }

#pen-gorsel { width: min(92vw, 1100px); max-height: 92dvh; padding: var(--bosluk-sm); }
#pgo-gorsel { width: 100%; height: auto; max-height: 82dvh; object-fit: contain; border-radius: var(--yuvarlak); }

#pen-gelen-arama menu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-sm); margin-top: var(--bosluk-lg); }
#btn-arama-kabul { padding: 12px; border-radius: var(--yuvarlak); background: var(--basarili); color: #04211a; font-weight: 700; }
#btn-arama-red { padding: 12px; border-radius: var(--yuvarlak); background: var(--tehlike); color: #2a0008; font-weight: 700; }
#gelen-arama-metin { font-size: 0.9rem; color: var(--metin-orta); }

/* ================================================== 6. ARAMA KATMANI ==== */

#arama-katmani {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: #05070b;
}

#uzak-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #05070b;
}

#yerel-video {
  position: absolute;
  right: 20px; bottom: 108px;
  width: min(210px, 32vw);
  border-radius: var(--yuvarlak);
  border: 1px solid var(--kenarlik-acik);
  background: #000;
  object-fit: cover;
  transform: scaleX(-1);   /* ayna görüntüsü: kendi videonuz doğal görünsün */
}

#arama-katmani > header {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 12px 26px;
  border-radius: var(--yuvarlak-lg);
  background: rgba(14, 17, 22, 0.82);
  border: 1px solid var(--kenarlik);
  text-align: center;
}
#arama-ad { font-size: 1.05rem; font-weight: 700; }
#arama-durum { font-size: 0.8rem; color: var(--neon); font-variant-numeric: tabular-nums; }

#arama-katmani nav { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); }
#arama-katmani menu { display: flex; gap: var(--bosluk-sm); }

#arama-katmani menu button {
  padding: 12px 20px;
  border-radius: var(--hap);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(20, 25, 34, 0.9);
  border: 1px solid var(--kenarlik-acik);
  white-space: nowrap;
  transition: background-color 0.1s linear;
}
#arama-katmani menu button[aria-pressed="true"] { background: var(--neon); color: var(--neon-uzeri); border-color: var(--neon); }
#btn-arama-kapat { background: var(--tehlike) !important; color: #2a0008 !important; border-color: var(--tehlike) !important; }

/* ================================================== 7. BİLDİRİM ======== */

#bildirim {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 20px;
  border-radius: var(--hap);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik-acik);
  font-size: 0.84rem;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
#bildirim[data-tur="hata"] { background: #2a0e16; border-color: rgba(255, 77, 109, 0.45); color: #ff97ab; }

/* ================================================== 8. DUYARLI DÜZEN === */

@media (max-width: 1080px) {
  :root { --kenar-genislik: 292px; }
}

@media (max-width: 820px) {
  body[data-ekran="uygulama"] { grid-template-columns: minmax(0, 1fr); }

  #kenar-cubugu { border-right: 0; }
  #btn-geri { display: block; }

  /* Tek sütunda: ya liste ya sohbet görünür. */
  body[data-panel="sohbet"] #kenar-cubugu { display: none; }
  body[data-panel="liste"] #sohbet-alani { display: none; }

  #sohbet-baslik { padding: var(--bosluk) var(--bosluk); }
  #sohbet-baslik menu button { padding: 7px 11px; font-size: 0.74rem; }
  #akis-alani { padding: var(--bosluk); }
  #akis article { max-width: 84%; }
  #yazma-alani { padding: var(--bosluk-sm) var(--bosluk) var(--bosluk); }
  #yerel-video { bottom: 96px; right: 12px; }
  #arama-katmani menu button { padding: 11px 15px; font-size: 0.78rem; }
}

/* Dar ekran: arama düğmeleri kısalsın ki sohbet adına yer kalsın.
   Metin font-size:0 ile gizleniyor ama DOM'da duruyor; erişilebilir ad
   title özniteliğinden gelmeye devam ediyor. */
@media (max-width: 560px) {
  #sohbet-baslik { gap: 8px; }
  /* Özgüllük, yukarıdaki `#sohbet-baslik menu button` kuralıyla eşit olmalı;
     aksi halde font-size ve padding orada kalır ve kısaltma çalışmaz. */
  #sohbet-baslik menu #btn-sesli,
  #sohbet-baslik menu #btn-goruntulu,
  #sohbet-baslik menu #btn-grup-bilgi {
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 7px 10px;
    font-size: 0;
  }
  #sohbet-baslik menu #btn-sesli::before      { content: "Ara";    font-size: 0.72rem; font-weight: 600; }
  #sohbet-baslik menu #btn-goruntulu::before  { content: "Video";  font-size: 0.72rem; font-weight: 600; }
  #sohbet-baslik menu #btn-grup-bilgi::before { content: "Üyeler"; font-size: 0.72rem; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --metin-orta: #c3ccdb; --metin-soluk: #a2adc0; --kenarlik: #3a4556; }
}

/* ==========================================================================
   9. AVATARLAR, PROFİL ve GÖRSEL YÜKSELTME
   ========================================================================== */

/* --- Avatar: fotoğraf varsa <img>, yoksa baş harfli renkli daire --------- */
.avatar {
  flex: none;
  width: var(--av-boyut, 40px);
  height: var(--av-boyut, 40px);
  border-radius: var(--hap);
  object-fit: cover;
  background: var(--av-renk, var(--neon));
  color: #04131d;
  font-size: calc(var(--av-boyut, 40px) * 0.38);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Çevrimiçi noktası: avatarın sağ altına oturur */
.avatar[data-cevrimici] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    calc(var(--av-boyut, 40px) * 0.32) calc(var(--av-boyut, 40px) * 0.32) 0 calc(var(--av-boyut, 40px) * -0.08) var(--basarili),
    calc(var(--av-boyut, 40px) * 0.32) calc(var(--av-boyut, 40px) * 0.32) 0 calc(var(--av-boyut, 40px) * -0.02) var(--panel);
}

/* Önceki kuralların sabit boyutlarını ez */
#sohbet-listesi .avatar { grid-row: span 2; }
#ben-avatar { width: 44px; height: 44px; border: 0; }
#sohbet-avatar { width: 40px; height: 40px; }

/* --- Kendi profil düğmen ------------------------------------------------ */
#btn-profil {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin: -8px -8px 0;
  border-radius: var(--yuvarlak);
  text-align: left;
  transition: background-color 0.1s linear;
}
#btn-profil:hover { background: var(--panel-hover); }
#btn-profil > span { min-width: 0; display: grid; }

/* --- Profil penceresi --------------------------------------------------- */
#profil-onizleme { display: grid; justify-items: center; gap: 8px; margin-bottom: var(--bosluk-lg); }
#profil-kadi { font-size: 0.82rem; color: var(--metin-soluk); }

#profil-dosya { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#pen-profil label[for="profil-dosya"] {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--hap);
  background: var(--neon-sis);
  border: 1px solid var(--neon-cizgi);
  color: var(--neon);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0 6px 0 0;
}
#pen-profil label[for="profil-dosya"]:hover { background: var(--neon); color: var(--neon-uzeri); }

#btn-avatar-sil {
  padding: 9px 16px;
  border-radius: var(--hap);
  font-size: 0.8rem;
  color: var(--metin-soluk);
  background: var(--panel-ust);
  border: 1px solid var(--kenarlik);
}
#btn-avatar-sil:hover { color: var(--tehlike); border-color: rgba(255, 77, 109, 0.4); }

#btn-profil-kaydet {
  width: 100%;
  margin-top: var(--bosluk);
  padding: 12px;
  border-radius: var(--yuvarlak);
  background: var(--neon);
  color: var(--neon-uzeri);
  font-weight: 700;
}
#btn-profil-kaydet:hover { background: var(--neon-koyu); }

#profil-uyari {
  padding: 9px 13px;
  border-radius: var(--yuvarlak);
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff97ab;
  font-size: 0.8rem;
}

/* --- Kullanıcı adı canlı önizlemesi ------------------------------------- */
#k-kadi-onizleme { transition: color 0.1s linear; }
#k-kadi-onizleme[data-durum="hata"]  { color: #ff97ab; }
#k-kadi-onizleme[data-durum="uygun"] { color: var(--basarili); }
#k-kadi-onizleme[data-durum="bilgi"] { color: var(--neon); }

/* --- Kişi listelerinde avatarlı satır ----------------------------------- */
#ys-sonuc button, #sonuc-kisiler button, #yg-sonuc button, #pg-sonuc button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
}
#ys-sonuc .avatar, #sonuc-kisiler .avatar, #yg-sonuc .avatar, #pg-sonuc .avatar { grid-row: span 2; }
#pg-uyeler li { align-items: center; }

#ys-baslik { margin-top: var(--bosluk); }

/* ==========================================================================
   10. GÖRSEL YÜKSELTME — derinlik, ışık, tipografi
   ========================================================================== */

/* Giriş ekranına neon halesi: tek bir statik degrade, animasyon yok. */
body[data-ekran="giris"],
body[data-ekran="yukleniyor"] {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(0, 180, 255, 0.16), transparent 62%),
    radial-gradient(760px 520px at 88% 108%, rgba(122, 31, 255, 0.13), transparent 64%),
    var(--zemin);
}

#giris-ekrani > section {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 64px rgba(0, 0, 0, 0.55);
}

#giris-ekrani header img {
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 180, 255, 0.28);
}

#giris-ekrani h1 { font-size: 1.72rem; }

/* Sohbet zeminine çok hafif bir derinlik */
#sohbet-alani {
  background:
    radial-gradient(900px 520px at 78% -12%, rgba(0, 180, 255, 0.055), transparent 60%),
    var(--zemin);
}

/* Baloncuklara oturmuşluk hissi veren minik gölge */
#akis article { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
#akis li[data-yon="giden"] article { box-shadow: 0 2px 10px rgba(0, 180, 255, 0.18); }
#akis article[data-medya] { box-shadow: none; }

/* Aktif sohbet satırı biraz daha belirgin */
#sohbet-listesi button[aria-current="true"] {
  background: linear-gradient(90deg, rgba(0, 180, 255, 0.16), rgba(0, 180, 255, 0.05));
}

/* Gönder düğmesine hafif ışık */
#btn-gonder { box-shadow: 0 2px 14px rgba(0, 180, 255, 0.3); }

/* Başlıklar biraz daha iri ve net */
#sohbet-ad { font-size: 1rem; letter-spacing: -0.01em; }
#ben-ad { font-size: 0.98rem; letter-spacing: -0.01em; }
/* Marka etiketi — h1 gizlenmez (sayfanın tek başlığı, erişilebilirlik için gerekli) */
#kenar-cubugu h1 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--bosluk);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
#kenar-cubugu h1::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
}

/* ==========================================================================
   11. GRUP ARAMASI — kare ızgarası ve "katıl" şeridi
   ========================================================================== */

#arama-kareler {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 8px;
  padding: 92px 14px 108px;
  place-content: stretch;
}

/* Sütun sayısı katılımcı sayısına göre. 2 kişide tek büyük kare + kendi karen
   küçük köşede (klasik birebir görünümü); 3+ kişide eşit ızgara. */
#arama-kareler[data-adet="1"],
#arama-kareler[data-adet="2"] { grid-template-columns: 1fr; }
#arama-kareler[data-adet="3"],
#arama-kareler[data-adet="4"] { grid-template-columns: repeat(2, 1fr); }
#arama-kareler[data-adet="5"],
#arama-kareler[data-adet="6"] { grid-template-columns: repeat(3, 1fr); }

#arama-kareler li {
  position: relative;
  min-height: 0;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: #0b0f16;
  border: 1px solid var(--kenarlik);
}

#arama-kareler video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0f16;
}

#arama-kareler li[data-ben] video { transform: scaleX(-1); }  /* ayna */

#arama-kareler figcaption {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--hap);
  background: rgba(4, 8, 14, 0.72);
  font-size: 0.74rem;
  font-weight: 600;
}

/* Birebirde (2 kare) kendi karen köşede küçülür */
#arama-kareler[data-adet="2"] li[data-ben] {
  position: absolute;
  right: 22px; bottom: 118px;
  width: min(210px, 30vw);
  aspect-ratio: 16 / 10;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Sesli aramada video yok: kareler kimlik kartına dönüşür */
#arama-kareler[data-ses] video { opacity: 0; }
#arama-kareler[data-ses] li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(0, 180, 255, 0.16), transparent 62%);
}
#arama-kareler[data-ses] figcaption {
  left: 50%; bottom: 50%;
  transform: translate(-50%, 50%);
  font-size: 0.95rem;
  padding: 10px 20px;
}

#arama-kareler li[data-kamera-kapali] video { opacity: 0.06; }

/* --- Sohbetteki "devam eden arama" şeridi ------------------------------- */
#arama-serit {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px var(--bosluk-lg);
  background: linear-gradient(90deg, rgba(46, 230, 168, 0.12), rgba(0, 180, 255, 0.12));
  border-bottom: 1px solid var(--kenarlik);
  font-size: 0.82rem;
  color: var(--metin);
}

#arama-serit::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--hap);
  background: var(--basarili);
  box-shadow: 0 0 10px var(--basarili);
}

#btn-aramaya-katil {
  padding: 7px 18px;
  border-radius: var(--hap);
  background: var(--basarili);
  color: #04211a;
  font-size: 0.78rem;
  font-weight: 700;
}
#btn-aramaya-katil:hover { filter: brightness(1.08); }

#akis-alani { grid-row: 3; }
#yazma-alani { grid-row: 4; }

@media (max-width: 820px) {
  #arama-kareler { padding: 86px 10px 96px; }
  #arama-kareler[data-adet="2"] li[data-ben] { right: 12px; bottom: 104px; width: min(140px, 34vw); }
  #arama-kareler[data-adet="5"],
  #arama-kareler[data-adet="6"] { grid-template-columns: repeat(2, 1fr); }
}