/* Ribony web — tanitim sayfasinin (ribony.com) tasarim diliyle:
   sicak notr zemin, Plus Jakarta Sans, hap dugmeler, yumusak katmanli
   golge, mor vurgu (#8B6CFF). Koyu tema de ayni sicaklikta tutuldu;
   soguk gri yerine moru hafif tasiyan notrler kullanildi. */

:root {
  /* Vurgu — tanitim sayfasindaki .accent rengi */
  --marka:        #8B6CFF;
  --marka-koyu:   #7854F2;
  --marka-sis:    #F1ECFF;

  /* Sicak notrler */
  --zemin:        #F4F3EF;
  --yuzey:        #FFFFFF;
  --yuzey-2:      #FAF9F5;
  --cizgi:        #E7E3DA;
  --yazi:         #111111;
  --soluk:        #6B6B6B;

  --benim:        #EBE4FF;
  --benim-yazi:   #241A4D;
  --onlar:        #FFFFFF;

  --iyi:          #2E7D4F;
  --kotu:         #D2443F;
  --uyari:        #B87514;

  /* Katmanli golge: duz kenarlik yerine yukseklik */
  --golge-1: 0 1px 2px rgba(17,17,17,.04), 0 2px 8px rgba(17,17,17,.045);
  --golge-2: 0 14px 40px rgba(17,17,17,.10);
  --golge-3: 0 24px 70px rgba(17,17,17,.26);

  --yan-en:  380px;
  --r:       20px;    /* kart */
  --r-kucuk: 14px;    /* ic ogeler */
  --hap:     999px;

  /* Birincil dugme. Tanitim sayfasindaki App Store dugmesiyle ayni dil:
     mor degil, murekkep siyahi. Koyu temada ters cevriliyor -- siyah
     dugme koyu zeminde kaybolurdu. */
  --dugme:       #111111;
  --dugme-yazi:  #FFFFFF;
  --dugme-ustu:  #2B2B2B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marka:      #A98CFF;
    --marka-koyu: #9472FF;
    --marka-sis:  #26203A;

    --zemin:      #131116;
    --yuzey:      #1C1A21;
    --yuzey-2:    #23202A;
    --cizgi:      #2E2A37;
    --yazi:       #F2F0EB;
    --soluk:      #9B95A6;

    --benim:      #3A2F63;
    --benim-yazi: #F0ECFF;
    --onlar:      #23202A;

    --iyi:        #5FD08A;
    --kotu:       #FF8E89;
    --uyari:      #F0B457;

    --dugme:      #F2F0EB;
    --dugme-yazi: #15131A;
    --dugme-ustu: #FFFFFF;

    --golge-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22);
    --golge-2: 0 14px 40px rgba(0,0,0,.38);
    --golge-3: 0 24px 70px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --marka: #A98CFF; --marka-koyu: #9472FF; --marka-sis: #26203A;
  --zemin: #131116; --yuzey: #1C1A21; --yuzey-2: #23202A; --cizgi: #2E2A37;
  --yazi: #F2F0EB; --soluk: #9B95A6;
  --benim: #3A2F63; --benim-yazi: #F0ECFF; --onlar: #23202A;
  --iyi: #5FD08A; --kotu: #FF8E89; --uyari: #F0B457;
  --golge-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22);
  --golge-2: 0 14px 40px rgba(0,0,0,.38);
  --golge-3: 0 24px 70px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

/* `hidden` ozniteligi yazarin display kuralini yenmeli: .giris ve
   .uygulama display:grid oldugu icin tarayici varsayilani eziliyordu. */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--zemin);
  color: var(--yazi);
  font: 15px/1.55 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  letter-spacing: -0.005em;
}

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }

/* ================= GIRIS / UYGULAMA GECISI =================
   Hangisinin gorunecegine <head>'deki betik karar veriyor; boylece ilk
   boya dogru ekranla basliyor ve F5'te giris kutusu cakmiyor. */

/* Uc ekran var ve AYNI ANDA yalnizca biri duruyor:
   yok     -> giris / uye olma
   dogrula -> e-posta dogrulama (tek seferlik ara adim)
   var     -> uygulama
   Secimi <head>'deki betik yapiyor; ilk boya dogru ekranla basliyor. */
.giris, .uygulama { display: none; }
html[data-oturum="yok"]     #giris   { display: grid; }
html[data-oturum="unuttum"] #unuttum { display: grid; }
html[data-oturum="dogrula"] #dogrula { display: grid; }
html[data-oturum="ulke"]    #ulke    { display: grid; }
html[data-oturum="var"]     .uygulama { display: grid; }
.giris {
  height: 100%;
  grid-template-columns: 1fr;
  place-items: stretch;
  padding: 0;
  overflow-y: auto;
}

.giris-marka { display: none; }

.giris-marka-ic {
  max-width: 420px;
  display: flex; flex-direction: column;
  color: #fff;
}
/* Panelin ustunde duran kelime isareti. Tanitim sayfasindaki
   `.brand` ile ayni is: simge yok, yalnizca ad. */
.marka-isaret {
  margin: 0 0 26px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

.giris-marka h1 {
  margin: 0 0 16px;
  /* 1.08 cok sikiydi: "kimligin" gibi bir satirda g'nin breve'si
     ustteki satira giriyor, s'nin cedillasi kirpilyordu. */
  font-size: clamp(32px, 3.4vw, 46px); line-height: 1.22;
  font-weight: 800; letter-spacing: -0.035em;
  text-wrap: balance;
}
.giris-marka h1 span { color: #AE92FF; opacity: 1; }
.giris-marka p { margin: 0 0 30px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 34ch; }


.giris-panel { display: grid; place-items: center; padding: 32px 18px; min-width: 0; background: var(--zemin); }

.giris-kart {
  width: 100%; max-width: 420px;
  background: var(--yuzey);
  border-radius: 28px;
  box-shadow: var(--golge-2);
  padding: 32px 30px 28px;
}

@media (min-width: 900px) {
  .giris { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .giris-marka {
    display: grid; place-items: center;
    padding: 48px;
    /* Duz murekkep -- gradyan yok. Renk tek bir yerde: basligin
       ikinci satiri. Dugmelerle ayni siyah (#111). */
    background: #111111;
  }
  /* Iki sinif: `.marka { display:flex }` kurali bu medya sorgusundan
     SONRA geldigi icin tek sinifla yazinca eziliyordu. */
  .giris-kart .giris-mobil-marka { display: none; }

  /* KOYU TEMA: zemin zaten koyu (#131116); panel duz #111 kalsaydi iki
     yarim birbirine karisir, bolunme okunmazdi. Koyu temada panel
     zeminin bir tik USTUNDE, ustune ince bir ayirici. Yine duz renk. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .giris-marka {
      background: #221E2C;
      border-inline-end: 1px solid rgba(255, 255, 255, .06);
    }
  }
  .giris-panel { padding: 48px; }
  .giris-kart { box-shadow: none; background: transparent; padding: 0; max-width: 400px; }
}

/* Kip sekmeleri */
/* Giris/Uye ol: alt cizgili sekme yerine bolmeli anahtar. Sayfanin
   geri kalani hap bicimli (girdiler, dugmeler); sekme de ayni dili
   konussun. `.sekme` uygulama sekmeleriyle ORTAK, o yuzden kurallar
   `.kip-sekme` altina kapatildi. */
.kip-sekme {
  display: flex; gap: 4px; margin: 0 0 24px;
  padding: 4px;
  border-radius: var(--hap);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
}

.kip-sekme .sekme {
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: var(--hap);
  color: var(--soluk);
}

.kip-sekme .sekme:hover { background: transparent; color: var(--yazi); }

.kip-sekme .sekme.etkin {
  background: var(--yuzey);
  color: var(--yazi);
  border-bottom-color: transparent;
  box-shadow: var(--golge-1);
}

/* Koyu paletde `--yuzey-2` `--yuzey`ten ACIK; secili bolme yolundan
   koyu kalip ters gorunuyordu. Koyu temada ikisi yer degistiriyor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kip-sekme { background: var(--yuzey); }
  :root:not([data-theme="light"]) .kip-sekme .sekme.etkin { background: var(--yuzey-2); }
}

/* Kayit adimlari */
.adim-cizgi { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.adim-cizgi i { flex: 1; height: 2px; background: var(--cizgi); border-radius: 2px; }
.adim {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yuzey-2); color: var(--soluk);
  font-size: 13px; font-weight: 800;
  border: 1.5px solid var(--cizgi);
}
.adim.etkin { background: var(--dugme); color: var(--dugme-yazi); border-color: var(--dugme); }
.adim.bitti { background: var(--yuzey-2); color: var(--yazi); border-color: var(--yazi); }

#kayit-form { display: flex; flex-direction: column; gap: 5px; }
#kayit-form label, .alan-etiket { font-size: 12.5px; font-weight: 600; color: var(--soluk); }
#kayit-form input[type="text"],
#kayit-form input[type="email"],
#kayit-form input[type="password"],
#kayit-form input[type="date"] {
  width: 100%; padding: 13px 16px; margin-top: 5px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--hap); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#kayit-form input:focus-visible {
  border-color: var(--yazi); background: var(--yuzey);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yazi) 10%, transparent); outline: none;
}
#kayit-form input.gecersiz { border-color: var(--kotu); }

/* Şifreyi göster/gizle. Girdi sarmala alınıyor, göz düğmesi iç kenara
   mutlak konumlanıyor. `inset-inline-end` + `padding-inline-end` RTL'de
   kendiliğinden karşı tarafa geçiyor (Arapça). */
.sifre-sarmal { position: relative; display: block; }
.sifre-sarmal input { padding-inline-end: 46px !important; }
.sifre-goz {
  position: absolute;
  inset-inline-end: 6px;
  top: 5px;                 /* input margin-top: 5px ile hizalı */
  bottom: 0;
  width: 40px;
  display: grid; place-items: center;
  color: var(--soluk);
  cursor: pointer;
  border-radius: var(--hap);
  transition: color .12s;
}
.sifre-goz:hover { color: var(--yazi); }
.sifre-goz:focus-visible { outline: 2px solid var(--yazi); outline-offset: -2px; }
.sifre-goz svg[hidden] { display: none; }

.alan-ipucu { margin: 6px 2px 14px; font-size: 11.5px; line-height: 1.5; color: var(--soluk); }
.alan-ipucu.iyi { color: var(--iyi); }
.alan-ipucu.kotu { color: var(--kotu); }

.cinsiyet,
.tur-sec { display: flex; gap: 8px; margin: 8px 0 14px; }
.cinsiyet label,
.tur-sec label { flex: 1; }
.cinsiyet input,
.tur-sec input { position: absolute; opacity: 0; pointer-events: none; }
.cinsiyet span,
.tur-sec span {
  display: grid; place-items: center;
  padding: 11px 8px; border-radius: var(--hap);
  background: var(--yuzey-2); border: 1.5px solid var(--cizgi);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cinsiyet label:hover span,
.tur-sec label:hover span { border-color: var(--yazi); }
.cinsiyet input:checked + span,
.tur-sec input:checked + span { background: var(--dugme); border-color: var(--dugme); color: var(--dugme-yazi); }
.cinsiyet input:focus-visible + span,
.tur-sec input:focus-visible + span { outline: 2px solid var(--yazi); outline-offset: 2px; }

#kayit-ileri, #kayit-btn {
  margin-top: 8px; padding: 14px;
  border-radius: var(--hap);
  background: var(--dugme); color: var(--dugme-yazi); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .16);
  transition: background .15s, transform .1s, box-shadow .15s;
}
#kayit-ileri { width: 100%; }
#kayit-ileri:hover, #kayit-btn:hover { background: var(--dugme-ustu); }
#kayit-ileri:active, #kayit-btn:active { transform: translateY(1px); }
#kayit-btn[disabled] { opacity: .65; cursor: default; box-shadow: none; }
#kayit-btn.yukleniyor .donuyor { display: block; }

.kayit-dugmeler { display: flex; gap: 10px; margin-top: 8px; }
.kayit-dugmeler #kayit-btn { flex: 1; margin-top: 0; }
.ikincil-dugme {
  flex: none; padding: 14px 22px; border-radius: var(--hap);
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  font-weight: 700; color: var(--yazi);
  transition: background .12s;
}
.ikincil-dugme:hover { background: var(--yuzey-2); border-color: var(--yazi); }

/* Logo kutusu kaldirildi; tanitim sayfasinda da oldugu gibi yalnizca
   kelime isareti duruyor (`<a class="brand">Ribony</a>`). */
.marka { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.marka h1 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; }
.marka-alt { margin: 3px 0 0; font-size: 13px; color: var(--soluk); }

/* Dogrulama formlari giris formuyla AYNI dili konussun: etiket ustte,
   alan altinda. Kurallar ID bazli oldugu icin tek tek ekleniyor. */
#giris-form, #dg-degistir-form, #dg-kod-form,
#un-adres-form, #un-kod-form { display: flex; flex-direction: column; gap: 5px; }
#giris-form label, #dg-degistir-form label, #dg-kod-form label,
#un-adres-form label, #un-kod-form label {
  font-size: 12.5px; font-weight: 600; color: var(--soluk);
}
#giris-form label + input,
#dg-degistir-form label + input,
#dg-kod-form label + input,
#un-adres-form label + input,
#un-kod-form label + input { margin-bottom: 16px; }

#giris-form input, #dg-degistir-form input, #dg-kod-form input,
#un-adres-form input, #un-kod-form input {
  width: 100%; padding: 13px 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--hap);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#giris-form input:focus-visible,
#dg-degistir-form input:focus-visible,
#dg-kod-form input:focus-visible,
#un-adres-form input:focus-visible,
#un-kod-form input:focus-visible {
  border-color: var(--yazi); background: var(--yuzey);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yazi) 10%, transparent);
  outline: none;
}

#giris-btn, #dg-gonder, #dg-degistir-btn, #dg-kod-btn,
#un-adres-btn, #un-kod-btn, #ulke-btn {
  width: 100%;
  margin-top: 10px; padding: 14px;
  border-radius: var(--hap);
  background: var(--dugme); color: var(--dugme-yazi); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .16);
  transition: background .15s, transform .1s, box-shadow .15s;
}
#giris-btn:hover, #dg-gonder:hover, #dg-degistir-btn:hover, #dg-kod-btn:hover,
#un-adres-btn:hover, #un-kod-btn:hover, #ulke-btn:hover { background: var(--dugme-ustu); }
#giris-btn:active, #dg-gonder:active, #dg-degistir-btn:active, #dg-kod-btn:active,
#un-adres-btn:active, #un-kod-btn:active, #ulke-btn:active { transform: translateY(1px); }
#giris-btn[disabled], #dg-gonder[disabled], #dg-degistir-btn[disabled], #dg-kod-btn[disabled],
#un-adres-btn[disabled], #un-kod-btn[disabled], #ulke-btn[disabled] { opacity: .65; cursor: default; box-shadow: none; }

.donuyor {
  display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  animation: don .7s linear infinite;
}
#giris-btn.yukleniyor .donuyor,
#un-adres-btn.yukleniyor .donuyor,
#un-kod-btn.yukleniyor .donuyor { display: block; }
@keyframes don { to { transform: rotate(360deg); } }

.hata {
  margin: 6px 0 0; padding: 10px 14px;
  border-radius: var(--r-kucuk);
  background: color-mix(in srgb, var(--kotu) 12%, transparent);
  color: var(--kotu); font-size: 13.5px;
}

.giris-not {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--cizgi);
  font-size: 12.5px; line-height: 1.6; color: var(--soluk);
}

/* ================= DUZEN ================= */

/* minmax(0,1fr) SART: `1fr`in otomatik asgarisi min-content; Kesfet
   satirlarindaki uzun nowrap biyografiler sutunu sisiriyordu. */
.uygulama {
  height: 100%;
  grid-template-columns: var(--yan-en) minmax(0, 1fr);
}

.yan {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--yuzey);
  border-inline-end: 1px solid var(--cizgi);
}

.yan-ust {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cizgi);
}

.ben {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1;
  text-align: start; padding: 4px; margin: -4px;
  border-radius: var(--hap);
  transition: background .12s;
}
.ben:hover { background: var(--yuzey-2); }
.ben-ad { min-width: 0; display: flex; flex-direction: column; }
.ben-ad strong { font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.durum { font-size: 11.5px; color: var(--soluk); }
.durum.canli { color: var(--iyi); }
.durum.kopuk { color: var(--kotu); }

.avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--marka-sis);
}
.avatar-sarmal { position: relative; flex: none; }
.avatar-tik { cursor: pointer; transition: opacity .12s; }
.avatar-tik:hover { opacity: .82; }
/* Profil modali avatari: gercek fotografta tiklayinca buyur. */
.tiklanir-foto { cursor: zoom-in; transition: opacity .12s; }
.tiklanir-foto:hover { opacity: .85; }

.nokta {
  position: absolute; inset-inline-end: -1px; bottom: -1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--iyi); border: 2.5px solid var(--yuzey);
}

.ikon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--soluk);
  transition: background .12s, color .12s;
}
.ikon-btn:hover { background: var(--marka-sis); color: var(--marka); }

/* Takip ikonu (⋮ solunda) + takip sayisi rozeti (circle) */
.takip-ikon { position: relative; }
.ikon-rozet {
  position: absolute; top: 0; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--marka); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  box-sizing: border-box; pointer-events: none;
}

/* Sekmeler */
.sekmeler { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--cizgi); }
.sekme {
  flex: 1; padding: 10px 10px 12px;
  font-size: 14px; font-weight: 700; color: var(--soluk);
  letter-spacing: -0.01em;
  border-bottom: 2.5px solid transparent;
  border-radius: 12px 12px 0 0;
  transition: color .12s, border-color .12s, background .12s;
}
.sekme:hover { background: var(--yuzey-2); }
.sekme.etkin { color: var(--marka); border-bottom-color: var(--marka); }

.sayac {
  display: inline-grid; place-items: center;
  min-width: 21px; height: 21px; padding: 0 7px; margin-inline-start: 7px;
  border-radius: var(--hap);
  background: var(--marka-sis); color: var(--marka);
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.sekme.etkin .sayac { background: var(--marka); color: #fff; }

/* Arama */
.arama-sarmal { position: relative; padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
.arama-ikon { position: absolute; inset-inline-start: 28px; top: 50%; transform: translateY(-50%); color: var(--soluk); pointer-events: none; }
#arama {
  flex: 1; min-width: 0;
  padding-block: 11px;
  padding-inline: 38px 14px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--hap);
  outline: none;
  transition: border-color .15s, background .15s;
}
#arama:focus-visible { border-color: var(--marka); background: var(--yuzey); outline: none; }

.karistir { flex: none; transition: opacity .15s, background .12s, color .12s; }
.karistir:active { transform: scale(.92); }
.karistir.doniyor { opacity: .45; }
.karistir[disabled] { cursor: default; }

/* ================= SOHBET LISTESI ================= */

.sohbetler { list-style: none; margin: 0; padding: 4px 10px 14px; overflow-y: auto; flex: 1; min-width: 0; }
.sohbetler > li { min-width: 0; }

.sohbet-satir {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-width: 0;
  padding: 11px 12px;
  border-radius: var(--r-kucuk);
  text-align: start;
  transition: background .12s;
}
.sohbet-satir:hover { background: var(--yuzey-2); }
.sohbet-satir.sabit { background: color-mix(in srgb, var(--marka) 6%, transparent); }
/* Vurgular sabitlemeden SONRA: ayni ozgullukte oldugu icin sira belirliyor,
 * onceki duzende sabitlenmis bir sohbet acikken secili gorunmuyordu. */
.sohbet-satir.secili { background: var(--marka-sis); }
.sohbet-satir.secildi { background: var(--marka-sis); }
/* Kesfet'ten acilan, henuz mesaji olmayan gecici satir. */
.sohbet-satir.taze { background: var(--marka-sis); box-shadow: inset 2px 0 0 var(--marka); }
.satir-onizleme.taze-ipucu { color: var(--marka); font-style: italic; }
.sohbet-satir:hover .nokta { border-color: var(--yuzey-2); }

.satir-govde { min-width: 0; flex: 1; }
.satir-ust { display: flex; align-items: baseline; gap: 8px; }
.satir-ad {
  font-weight: 700; font-size: 14.5px; flex: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.satir-saat { font-size: 11px; color: var(--soluk); flex: none; font-variant-numeric: tabular-nums; }
.satir-onizleme {
  margin-top: 2px; font-size: 13px; color: var(--soluk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rozet {
  flex: none; min-width: 21px; height: 21px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: var(--hap);
  background: var(--marka); color: #fff;
  font-size: 11.5px; font-weight: 800;
}

.pin-ikon { flex: none; color: var(--soluk); }

.menu-btn {
  flex: none; width: 30px; height: 30px;
  display: none; place-items: center;
  border-radius: 50%; color: var(--soluk);
}
.sohbet-satir:hover .menu-btn, .menu-btn.acik { display: grid; }
.menu-btn:hover { background: var(--marka-sis); color: var(--marka); }

.kutucuk {
  flex: none; width: 21px; height: 21px;
  display: grid; place-items: center;
  border: 2px solid var(--soluk); border-radius: 50%;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.sohbet-satir.secildi .kutucuk { background: var(--marka); border-color: var(--marka); color: #fff; }
.uygulama.secimde .menu-btn { display: none !important; }

.etiket { flex: none; padding: 2px 8px; border-radius: var(--hap); font-size: 10.5px; font-weight: 800; letter-spacing: .3px; }
.etiket.boost { background: var(--uyari); color: #fff; }
.etiket.premium { background: var(--marka-sis); color: var(--marka); }

/* Web rozeti: dolu degil cerceveli, kucuk harf, soluk. Amac fark
   edilmek degil, bakinca anlasilmak -- PREMIUM/ONE CIKAN'in yanindayken
   onlari bastirmamali. */
/* Kesfet'te satirda saat yok; `.satir-ad { flex: 1 }` adi tum genislige
   yayip rozeti sagi dayiyordu. Burada ad icerigi kadar kaliyor, rozet
   adin HEMEN yaninda duruyor. Sohbet listesi degismiyor: orada saat var
   ve adin yayilmasi dogru. */
#kesfet .satir-ad { flex: 0 1 auto; min-width: 0; }
#kesfet .satir-ust { justify-content: flex-start; }

.etiket.web {
  background: none;
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 1px 7px;
}

.bos { padding: 30px 20px; text-align: center; color: var(--soluk); font-size: 14px; }
.mesaj-bos { margin: auto; text-align: center; color: var(--soluk); font-size: 14px; }

/* Sohbet acilis WELCOME karti (mesaj yokken) — mobildeki ChatWelcomeView. */
.hosgeldin {
  margin: auto; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 20px;
}
.hosgeldin-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--marka-sis); box-shadow: var(--golge-1);
}
.hosgeldin-ad { margin: 2px 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.hosgeldin-rozet {
  display: flex; gap: 9px; align-items: flex-start;
  width: 100%; padding: 11px 14px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.45; text-align: start;
}
.hosgeldin-rozet svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.hosgeldin-anon {
  align-items: center; justify-content: center; width: auto;
  background: var(--marka-sis); color: var(--marka); font-weight: 700;
}
.hosgeldin-uyari { background: var(--yuzey-2); color: var(--soluk); }

/* Toplu secim cubugu */
.secim-ust {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: var(--marka-sis);
  border-bottom: 1px solid var(--cizgi);
}
.secim-ust #secim-sayi { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--marka); font-variant-numeric: tabular-nums; }
.secim-ust .ikon-btn { color: var(--marka); }
.secim-ust .ikon-btn:hover { background: color-mix(in srgb, var(--marka) 16%, transparent); }
.yikici-btn { color: var(--kotu) !important; }
.yikici-btn:hover { background: color-mix(in srgb, var(--kotu) 14%, transparent) !important; }
.metin-btn { flex: none; padding: 7px 14px; border-radius: var(--hap); font-size: 13px; font-weight: 700; color: var(--marka); transition: background .12s; }
.metin-btn:hover { background: color-mix(in srgb, var(--marka) 16%, transparent); }

/* ================= SOHBET ================= */

.sohbet { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--zemin); }

.karsilama { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; }
.karsilama-logo { color: color-mix(in srgb, var(--marka) 38%, transparent); margin-bottom: 16px; }
.karsilama h2 { margin: 0 0 7px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.karsilama p { margin: 0; color: var(--soluk); font-size: 14.5px; max-width: 34ch; }

.sohbet-ic { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.sohbet-ust {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.karsi-ad { min-width: 0; display: flex; flex-direction: column; }
.karsi-ad strong {
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geri { display: none; }

.mesajlar {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 18px 12px;
  display: flex; flex-direction: column; gap: 3px;
  overscroll-behavior: contain;
}

.gun {
  align-self: center; margin: 16px 0 12px;
  padding: 5px 14px; border-radius: var(--hap);
  background: var(--yuzey); box-shadow: var(--golge-1);
  font-size: 11.5px; font-weight: 600; color: var(--soluk);
}

.balon {
  max-width: min(74%, 580px);
  padding: 10px 15px 7px;
  border-radius: var(--r);
  background: var(--onlar);
  box-shadow: var(--golge-1);
  align-self: flex-start;
  overflow-wrap: anywhere;
}
.balon.benim { align-self: flex-end; background: var(--benim); color: var(--benim-yazi); }
.balon + .balon { margin-top: 2px; }
.balon.yeni-grup { margin-top: 11px; }
/* Kuyruk: grubun son baloncugunda kose daraliyor */
.balon:not(.benim) { border-bottom-left-radius: 7px; }
.balon.benim { border-bottom-right-radius: 7px; }

.balon-yazi { white-space: pre-wrap; }
.balon-alt {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-top: 3px; font-size: 10.5px; color: var(--soluk);
  font-variant-numeric: tabular-nums;
}
.balon.benim .balon-alt { color: color-mix(in srgb, var(--benim-yazi) 55%, transparent); }
.balon.bekliyor { opacity: .6; }
.balon.hatali { box-shadow: 0 0 0 1.5px var(--kotu); }

.tik { display: inline-flex; align-items: center; margin-inline-start: 1px; color: color-mix(in srgb, var(--benim-yazi) 45%, transparent); }
.tik.goruldu { color: #3EA6FF; }

/* Sesli mesaj baloncugu. Web'den ses GONDERILMIYOR; bu yalnizca
   mobilden gelen kaydi calmak icin. */
.ses { display: flex; align-items: center; gap: 10px; padding: 2px 0; min-width: 196px; }
.ses-dugme {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--marka); color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, transform .1s ease;
}
.ses-dugme:hover { background: var(--marka-koyu); }
.ses-dugme:active { transform: scale(.93); }
.balon.benim .ses-dugme { background: var(--benim-yazi); color: var(--benim); }
.ses-cubuk {
  flex: 1 1 auto; min-width: 0; height: 4px; border-radius: 2px; cursor: pointer;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.ses-dolu { width: 0; height: 100%; border-radius: 2px; background: var(--marka); transition: width .1s linear; }
.balon.benim .ses-dolu { background: var(--benim-yazi); }
.ses-sure { flex: none; font-size: 11.5px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.ses.calan .ses-sure { color: var(--marka); }
.balon.benim .ses.calan .ses-sure { color: var(--benim-yazi); }
/* Dosyasi silinmis kayit: oynatici yok, duz aciklama. */
.ses.ses-yok { min-width: 0; }

.ek { display: inline-flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--soluk); font-style: italic; font-size: 13.5px; }

.kural-uyari {
  margin: 0 18px 10px; padding: 11px 15px;
  border-radius: var(--r-kucuk);
  background: color-mix(in srgb, var(--uyari) 15%, transparent);
  color: var(--uyari); font-size: 13px; font-weight: 500;
}

.yazma {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
}
.ek-btn { flex: none; align-self: flex-end; }
#metin {
  flex: 1; resize: none; max-height: 140px;
  padding: 12px 18px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  /* Tek satırda ~46px yüksek: 22px yarıçap hap gibi görünür. Çok satıra
     uzayınca `var(--hap)` (999px) dev bir ovale dönüyordu; sabit yarıçap
     uzadıkça yuvarlak dikdörtgen kalıyor. Gönder düğmesinin yarıçapıyla
     (23px) uyumlu. */
  border-radius: 22px;
  outline: none;
  transition: border-color .15s, background .15s;
}
#metin:focus-visible { border-color: var(--marka); background: var(--yuzey); outline: none; }
#gonder {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marka); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--marka) 34%, transparent);
  transition: background .15s, transform .1s, opacity .15s, box-shadow .15s;
}
#gonder:hover { background: var(--marka-koyu); }
#gonder:active { transform: scale(.93); }
#gonder[disabled] { opacity: .4; cursor: default; box-shadow: none; }

/* Fotograf */
.foto-kutu {
  display: flex; align-items: center; gap: 12px;
  width: min(270px, 100%); padding: 14px 16px; margin: 3px 0 5px;
  border-radius: var(--r-kucuk);
  background: color-mix(in srgb, var(--marka) 12%, transparent);
  text-align: start;
  transition: background .12s;
}
.foto-kutu:hover { background: color-mix(in srgb, var(--marka) 18%, transparent); }
.foto-kutu[disabled] { cursor: default; opacity: .8; }
.foto-kutu-ikon { flex: none; color: var(--marka); display: grid; place-items: center; }
/* Ikisi de <span>: kapsayici kolon olmazsa yan yana akiyorlar
   ("Fotograf goruntulendiiki taraf da gordu"). */
.foto-kutu-yazi { min-width: 0; display: flex; flex-direction: column; }
.foto-kutu-ust { font-size: 14px; font-weight: 700; }
.foto-kutu-alt { font-size: 11.5px; color: var(--soluk); margin-top: 2px; }
.foto-tuketilmis { background: var(--yuzey-2); }
.foto-tuketilmis .foto-kutu-ikon { color: var(--soluk); }

.foto-resim {
  display: block; max-width: min(270px, 100%); max-height: 330px;
  border-radius: var(--r-kucuk); margin: 3px 0 5px;
  cursor: zoom-in; background: var(--yuzey-2);
}
.foto-ortu { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(10,8,14,.93); }
.foto-ortu img { max-width: 100%; max-height: 100%; border-radius: var(--r-kucuk); }
.foto-kapat {
  position: absolute; top: 18px; inset-inline-end: 18px;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  transition: background .12s;
}
.foto-kapat:hover { background: rgba(255,255,255,.24); }

/* ================= HESABIM ================= */

.hesap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hesap-ic {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px 18px 36px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 640px; width: 100%; margin: 0 auto;
}

.hesap-tepe { display: flex; align-items: center; gap: 18px; }
.buyuk-avatar { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover; background: var(--marka-sis); box-shadow: var(--golge-1); }
.hesap-tepe h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.soluk-yazi { margin: 4px 0 0; color: var(--soluk); font-size: 13.5px; overflow-wrap: anywhere; }

/* flex:none SART — overflow:hidden, min-height:auto korumasini kaldirir
   ve kolon flex bu kutuyu 2px'e eziyordu. */
.sayilar {
  flex: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin: 0;
  background: var(--cizgi);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--golge-1);
}
.sayilar > div { background: var(--yuzey); padding: 15px 16px; }
.sayilar dt { font-size: 11.5px; color: var(--soluk); margin: 0 0 4px; font-weight: 600; }
.sayilar dd { margin: 0; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.sayilar > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 560px) { .sayilar { grid-template-columns: repeat(3, 1fr); }
  .sayilar > div:last-child:nth-child(odd) { grid-column: auto; } }

.kutu {
  flex: none;
  background: var(--yuzey);
  border-radius: var(--r);
  box-shadow: var(--golge-1);
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.kutu h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--soluk); }
.kutu label { font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.kutu input[type="text"], .kutu input[type="password"], .kutu textarea {
  width: 100%; padding: 11px 15px; margin-bottom: 9px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk); outline: none; resize: vertical;
  transition: border-color .15s, background .15s;
}
.kutu input:focus-visible, .kutu textarea:focus-visible { border-color: var(--marka); background: var(--yuzey); outline: none; }

.ipucu { margin: 0 0 4px; font-size: 12px; color: var(--soluk); line-height: 1.6; }
.deger { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; word-break: break-all; }

.anahtar {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  font-size: 14.5px !important; font-weight: 500 !important; color: var(--yazi) !important;
  cursor: pointer;
}
.anahtar + .anahtar { border-top: 1px solid var(--cizgi); }
.anahtar input { width: 19px; height: 19px; flex: none; accent-color: var(--marka); cursor: pointer; }

.birincil {
  align-self: flex-start; margin-top: 10px;
  padding: 11px 22px; border-radius: var(--hap);
  background: var(--marka); color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--marka) 28%, transparent);
  transition: background .15s, transform .1s, opacity .15s;
}
.birincil:hover { background: var(--marka-koyu); }
.birincil:active { transform: translateY(1px); }
.birincil[disabled] { opacity: .6; cursor: default; box-shadow: none; }

.ikincil-yikici {
  align-self: stretch; padding: 11px 18px;
  border-radius: var(--hap);
  border: 1.5px solid color-mix(in srgb, var(--kotu) 32%, transparent);
  color: var(--kotu); font-weight: 700; font-size: 14px;
  transition: background .12s;
}
.ikincil-yikici:hover { background: color-mix(in srgb, var(--kotu) 10%, transparent); }
.ikincil-yikici[disabled] { opacity: .5; cursor: default; }

.ikili-dugme { display: flex; gap: 9px; flex-wrap: wrap; }
.ikili-dugme .birincil { flex: 1; min-width: 150px; text-align: center; }

.ince-not { margin: 7px 0 0; font-size: 13px; }
.ince-not.iyi { color: var(--iyi); }
.ince-not.kotu { color: var(--kotu); }

/* ================= PENCERELER ================= */

.profil-ortu {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 8, 14, .5);
  backdrop-filter: blur(4px);
}

.profil {
  position: relative; width: 100%; max-width: 400px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 30px 26px 26px;
  background: var(--yuzey);
  border-radius: 26px;
  box-shadow: var(--golge-3);
  display: flex; flex-direction: column; gap: 15px;
}
.pr-kapat { position: absolute; top: 12px; inset-inline-end: 12px; }

.pr-tepe { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.pr-tepe .avatar-sarmal { margin-bottom: 8px; }
.pr-tepe h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pr-nokta { width: 18px; height: 18px; inset-inline-end: 4px; bottom: 4px; border-width: 3.5px; }

.pr-bio {
  margin: 0; padding: 14px 16px;
  background: var(--yuzey-2); border-radius: var(--r-kucuk);
  font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere;
}
/* Profil modal aksiyonlari — kompakt, net hiyerarsi.
   Mesaj gonder = birincil; Takip et = cerceveli ikincil; Sikayet/Engelle =
   kucuk ve sonuk, yan yana (nadir yikici islemler one cikmasin). */
.pr-aksiyon { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.pr-btn {
  align-self: stretch; text-align: center;
  padding: 11px 16px; border-radius: 14px;
  font-weight: 700; font-size: 14.5px;
  transition: background .14s, color .14s, border-color .14s, transform .1s;
}
.pr-btn:active { transform: translateY(1px); }
.pr-btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.pr-btn-ana {
  background: var(--marka); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--marka) 24%, transparent);
}
.pr-btn-ana:hover { background: var(--marka-koyu); }
.pr-btn-takip {
  background: transparent; color: var(--marka);
  border: 1.5px solid color-mix(in srgb, var(--marka) 36%, transparent);
}
.pr-btn-takip:hover { background: var(--marka-sis); }
.pr-btn-takip.takipte {
  background: var(--yuzey-2); color: var(--soluk);
  border-color: transparent; box-shadow: none;
}
.pr-btn-takip.takipte:hover { background: var(--marka-sis); color: var(--marka); }
.pr-mini { display: flex; gap: 6px; margin-top: 2px; }
.pr-btn-mini {
  flex: 1; padding: 8px 8px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--soluk);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.pr-btn-mini:hover { background: color-mix(in srgb, var(--kotu) 10%, transparent); color: var(--kotu); }
.pr-btn-mini[disabled] { opacity: .5; cursor: default; }

.engel-kutu { max-width: 460px; }
.engel-kutu h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.025em; }
.engel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 46dvh; overflow-y: auto; }
.engel-satir { display: flex; align-items: center; gap: 12px; padding: 11px 2px; min-width: 0; }
.engel-satir + .engel-satir { border-top: 1px solid var(--cizgi); }
.engel-govde { flex: 1; min-width: 0; }
.engel-ad { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engel-alt { font-size: 12px; color: var(--soluk); margin-top: 1px; }
.engel-kaldir {
  flex: none; padding: 8px 15px; border-radius: var(--hap);
  border: 1.5px solid var(--cizgi);
  font-size: 13px; font-weight: 700; color: var(--marka);
  transition: background .12s, border-color .12s;
}
.engel-kaldir:hover { background: var(--marka-sis); border-color: var(--marka-sis); }
.engel-kaldir[disabled] { opacity: .5; cursor: default; }
.takip-birak { color: var(--soluk) !important; }
.takip-birak:hover { background: var(--yuzey-2) !important; }
.takip-sekme { padding: 0; margin-bottom: 4px; border-bottom: 1px solid var(--cizgi); }

/* Sikayet */
.sebepler { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sebepler legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--soluk); }
.sebepler label { display: flex; align-items: center; gap: 11px; padding: 10px 0; cursor: pointer; font-size: 14.5px; }
.sebepler label + label { border-top: 1px solid var(--cizgi); }
.sebepler input { width: 18px; height: 18px; flex: none; accent-color: var(--marka); }
#sikayet-form textarea {
  width: 100%; padding: 11px 15px; margin-top: 4px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk); outline: none; resize: vertical;
}
#sikayet-form textarea:focus-visible { border-color: var(--marka); background: var(--yuzey); outline: none; }
#sikayet-form > label { font-size: 12.5px; font-weight: 600; color: var(--soluk); }

/* Satir / ust menu */
.menu-ortu { position: fixed; inset: 0; z-index: 40; }
.satir-menu {
  position: fixed; z-index: 41;
  min-width: 210px; padding: 8px;
  background: var(--yuzey);
  border-radius: 18px;
  box-shadow: var(--golge-2);
  display: flex; flex-direction: column;
}
.satir-menu button { padding: 11px 14px; border-radius: 12px; text-align: start; font-size: 14.5px; font-weight: 500; transition: background .1s; }
.satir-menu button:hover { background: var(--yuzey-2); }
.satir-menu .yikici { color: var(--kotu); }
.satir-menu .yikici:hover { background: color-mix(in srgb, var(--kotu) 10%, transparent); }
.menu-sayi { color: var(--soluk); font-weight: 400; }

/* ================= BILDIRIM ================= */

.bildirimler {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(460px, calc(100vw - 32px)); pointer-events: none;
}
.bildirim {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 18px;
  background: var(--yuzey);
  box-shadow: var(--golge-2);
  pointer-events: auto;
  animation: bildirim-gir .24s cubic-bezier(.2,.8,.3,1);
}
.bildirim.cikiyor { animation: bildirim-cik .2s ease-in forwards; }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bildirim-cik { to { opacity: 0; transform: translateY(6px) scale(.98); } }

.bildirim-ikon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.bildirim.iyi .bildirim-ikon { background: var(--iyi); }
.bildirim.kotu .bildirim-ikon { background: var(--kotu); }
.bildirim.bilgi .bildirim-ikon { background: var(--marka); }
.bildirim-yazi { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bildirim-eylem { flex: none; padding: 7px 13px; border-radius: var(--hap); font-size: 13px; font-weight: 800; color: var(--marka); transition: background .12s; }
.bildirim-eylem:hover { background: var(--marka-sis); }
.bildirim-kapat { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--soluk); transition: background .12s; }
.bildirim-kapat:hover { background: var(--yuzey-2); }

/* ================= DAR EKRAN ================= */

@media (max-width: 820px) {
  .uygulama { grid-template-columns: minmax(0, 1fr); }
  .yan { border-inline-end: 0; }
  .sohbet { display: none; }
  .geri { display: grid; }
  .uygulama.sohbette .yan, .uygulama.hesapta .yan { display: none; }
  .uygulama.sohbette .sohbet, .uygulama.hesapta .sohbet { display: flex; }
  .balon { max-width: 86%; }
}

@media (max-width: 520px) {
  .bildirimler { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .hesap-tepe { flex-direction: column; text-align: center; gap: 12px; }
}

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

/* ================= E-POSTA DOGRULAMA ================= */

/* Maskelenmis adres (`de*****k@gmail.com`) -- yildizlar hizalansin diye
   sabit genislikli. */
.dg-adres {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--yazi);
  /* `break-all` alan adini ortasindan boluyordu (".loc / al").
     `anywhere` yalnizca gerektiginde ve daha dogal noktalarda boluyor;
     `nowrap` ise dar kartta yatay tasmaya yol acardi. */
  overflow-wrap: anywhere;
}

.dg-uyari { color: var(--uyari); }

/* Kod kutusu: altı hane, aralikli ve ortali. */
.dg-kod-kutu {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 10px;
  text-align: center;
  font-weight: 700;
}
.dg-kod-kutu::placeholder { letter-spacing: 10px; color: var(--soluk); font-weight: 400; }

/* Ikincil eylemler: dugme gibi degil, bag gibi dursun. */
.bag-dugme {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  font: inherit;
  font-size: 13px;
  color: var(--soluk);
  background: none;
  border-radius: var(--hap);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.bag-dugme:hover { background: var(--yuzey-2); color: var(--yazi); }
.bag-dugme[disabled] { color: var(--soluk); background: none; cursor: default; }

/* ================= PROFIL FOTOGRAFI ================= */

.foto-sarmal { position: relative; flex: none; line-height: 0; }

/* Kamera rozeti avatarin sag alt kosesinde. Dokunma hedefi 34px --
   avatarin uzerine binmemesi icin disari tasiyoruz. */
.foto-rozet {
  position: absolute; inset-inline-end: -2px; bottom: -2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marka); color: #fff;
  border: 3px solid var(--yuzey);
  box-shadow: var(--golge-1);
  transition: background .15s, transform .1s;
}
.foto-rozet:hover { background: var(--marka-koyu); }
.foto-rozet:active { transform: translateY(1px); }
.foto-rozet[disabled] { background: var(--soluk); cursor: default; }

.foto-durum { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.foto-durum.bekliyor { color: var(--uyari); }
.foto-durum.kotu { color: var(--kotu); }
.foto-durum.iyi { color: var(--iyi); }

.foto-kurallar .kural-liste {
  margin: 0 0 10px; padding-inline-start: 18px;
  font-size: 12.5px; line-height: 1.65; color: var(--soluk);
}
.foto-kurallar .kural-liste li { margin-bottom: 3px; }
.foto-kurallar .kural-liste strong { color: var(--yazi); }

/* GIRDI YAZI BOYUTU 16px'TEN KUCUK OLAMAZ.
   iOS Safari, odaklanilan girdinin yazisi 16px'in altindaysa sayfayi
   kendiliginden yakinlastiriyor; kullanici her alana dokundugunda ekran
   zipliyor ve geri uzaklasmiyor. Tasarim olcegi 15px'ti, yalnizca
   girdilerde 16'ya cikiyor -- gozle fark edilmiyor, zipllama bitiyor. */
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
textarea,
select {
  font-size: 16px;
}


/* ---------- Moderasyon bildirimi ---------- */
/* Yonetici uyarisi ve icerik reddi. Ustte, her ekranin uzerinde; kullanici
   okudugunu bildirmeden kapanmiyor (sunucudaki bayrak da ancak o zaman
   dusuyor, yoksa her acilista yeniden cikardi). */
.moderasyon {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 22px;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(3px);
}
.moderasyon[hidden] { display: none; }
.moderasyon-ic {
  width: min(420px, 100%); padding: 22px;
  border-radius: var(--r); background: var(--yuzey-2);
  box-shadow: var(--golge-3); text-align: center;
}
.moderasyon-ic h3 { margin: 0 0 8px; font-size: 17px; }
.moderasyon-ic p { margin: 0 0 14px; color: var(--soluk); font-size: 14px; white-space: pre-wrap; }
.moderasyon-ic img {
  display: block; max-width: 180px; max-height: 180px; margin: 0 auto 14px;
  border-radius: var(--r-kucuk); object-fit: cover;
}
.moderasyon-ic button { width: 100%; }

/* ---------- Hesap islemleri (eski "Tehlikeli bolge") ---------- */
/* Kutu artik kirmizi cerceveli degil ve "Tehlikeli bolge" yazmiyor;
   uyariyi tasiyan tek sey kalici silme dugmesinin kendi kirmizisi.
   Duzen kurallari (tam genislik, araliklar) burada korunuyor. */
.kutu.hesap-islem .ipucu { margin-top: 12px; }
.kutu.hesap-islem button { width: 100%; margin-top: 7px; }

/* `.ikincil` dugmelerin hic kurali yoktu; eskiden yalnizca tehlike
   kutusunun tam-genislik kurali onlara govde veriyordu. */
.kutu.hesap-islem .ikincil {
  padding: 11px 18px;
  border-radius: var(--hap);
  border: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  color: var(--yazi);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.kutu.hesap-islem .ikincil:hover { border-color: var(--yazi); }
.kutu.hesap-islem .ikincil[disabled] { opacity: .55; cursor: default; }
button.tehlikeli {
  border: 0; border-radius: var(--hap); padding: 11px 18px;
  background: var(--kotu); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
button.tehlikeli:hover { filter: brightness(1.07); }
button.tehlikeli:disabled { opacity: .55; cursor: default; }

/* ---------- Gizlenen sohbetler ---------- */
.mini-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mini-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-kucuk); background: var(--onlar);
}
.mini-satir span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-satir button { flex: none; }
.mini-bos { color: var(--soluk); font-size: 13px; font-style: italic; }

/* ---------- Cevrimdisi seridi ---------- */
.cevrimdisi {
  position: fixed; left: 0; right: 0; top: 0; z-index: 80;
  padding: 7px 14px; text-align: center;
  background: var(--uyari); color: #1b1300;
  font-size: 13px; font-weight: 600;
}
.cevrimdisi[hidden] { display: none; }

/* ---------------- Dil secici (Hesabim > Dil) ---------------- */
/* Tercihler'deki `.anahtar` satirlariyla ayni hizada dursun diye
   ayni dikey bosluk ve yazi boyu kullaniliyor. */
.dil-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.dil-satir select {
  flex: 0 0 auto;
  min-width: 10.5rem;
  padding: 8px 10px;
  border: 1px solid var(--cizgi, #E7E3DA);
  border-radius: 10px;
  background: var(--yuzey, #fff);
  color: inherit;
  /* iOS 16px altinda alana dokununca sayfayi buyutuyor. */
  font: inherit;
  font-size: 16px;
}

.dil-satir select:focus-visible {
  outline: 2px solid var(--marka, #8B6CFF);
  outline-offset: 2px;
}

/* Giris ekranindaki kucuk dil secici */
/* Ulke secimi: kayit formundaki girdilerle ayni gorunsun. Yerli
   `select` -- 200'den fazla secenekte mobilde isletim sisteminin
   kendi listesi kendi aramasiyla geliyor, kendi menumuzden iyi. */
.ulke-secim {
  width: 100%;
  padding: 13px 16px;
  margin-top: 5px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--hap);
  color: inherit;
  font: inherit;
  /* iOS 16px altinda alana dokununca sayfayi buyutuyor. */
  font-size: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.ulke-secim:focus-visible {
  border-color: var(--yazi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yazi) 10%, transparent);
  outline: none;
}

#ulke-btn { width: 100%; margin-top: 14px; }

.giris-dil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--soluk, #6B6B6B);
}

.giris-dil select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  /* iOS 16px altinda alana dokununca sayfayi buyutuyor. */
  font-size: 16px;
  padding: 2px 4px;
  cursor: pointer;
}

.giris-dil select:focus-visible {
  outline: 2px solid var(--marka, #8B6CFF);
  outline-offset: 2px;
  border-radius: 6px;
}

.gorunmez-etiket {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}