/* ==========================================================================
   TurboChat — tasarım sistemi

   Tek dosya, tek kaynak. Kural seti:
     • Gölge yerine ince kenarlık + katman rengi. Gölge yalnızca üstte
       yüzen katmanlarda (menü, kip penceresi, açılır liste) kullanılır.
     • Köşe yarıçapı ölçülü: 6px küçük öğeler, 8px kartlar, 10px pencereler.
     • Bilgi yoğunluğu yüksek: 13px taban, 4px'lik boşluk ızgarası.
     • Sistem yazı tipi yığını — dışarıdan font yüklenmez (CSP de engeller).
     • Sol ray her iki temada da koyu kalır; panelin "alet çantası" kenarı
       içerik alanından net ayrılsın diye.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sıfırlama
   -------------------------------------------------------------------------- */

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

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video, canvas { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--marka) 26%, transparent); }

/* --------------------------------------------------------------------------
   2. Renk belirteçleri
   -------------------------------------------------------------------------- */

:root {
  /* Marka */
  --marka: #2563EB;
  --marka-koyu: #1D4ED8;
  --marka-acik: #3B82F6;
  --vurgu: #06B6D4;
  --sicak: #F59E0B;
  --murekkep: #0B1220;

  /* Anlam */
  --basari: #059669;
  --uyari: #D97706;
  --tehlike: #DC2626;
  --bilgi: #0284C7;
  --notr: #64748B;
  /* Renkli zemin üzerine yazılan metin: ham vurgu rengi açık temada
     yeterli kontrast vermiyor, koyulaştırılmış karşılıkları kullanılıyor. */
  --sicak-metin: #92400E;
  --tehlike-metin: #991B1B;

  /* Kanal kimlikleri */
  --k-whatsapp: #25D366;
  --k-whatsapp-cloud: #128C7E;
  --k-instagram: #E1306C;
  --k-messenger: #0084FF;
  --k-tiktok: #111827;
  --k-email: #EA4335;

  /* Yüzeyler — açık tema */
  --zemin: #EEF2F6;
  --kagit: #FFFFFF;
  --kagit-2: #F8FAFC;
  --kagit-3: #F1F5F9;
  --kenar: #E2E8F0;
  --kenar-guclu: #CBD5E1;
  --metin: #0B1220;
  --metin-2: #475569;
  /* Eskiden #8A97A8 idi: beyaz üzerinde 2,68:1 — WCAG AA'nın (4,5:1)
     epey altı. Saat, okundu bilgisi ve "Resmî/Gayriresmî" gibi karar
     verdiren metinler ucuz monitörde okunmuyordu. #64748B ≈ 4,8:1. */
  --metin-3: #64748B;
  --ustu: rgba(15, 23, 42, .045);
  --ustu-2: rgba(15, 23, 42, .08);
  --perde: rgba(11, 18, 32, .48);
  --golge-menu: 0 12px 28px -12px rgba(11, 18, 32, .3), 0 2px 8px -3px rgba(11, 18, 32, .18);
  --golge-pencere: 0 32px 64px -24px rgba(11, 18, 32, .45);

  /* Sol ray — her iki temada koyu */
  --ray: #0B1220;
  --ray-kenar: #1B2436;
  --ray-metin: #93A3B8;
  --ray-aktif: #FFFFFF;
  --ray-aktif-zemin: rgba(37, 99, 235, .22);

  /* Sohbet balonları */
  --balon-gelen: #FFFFFF;
  --balon-giden: #E8F0FE;
  --balon-gelen-kenar: #E2E8F0;
  --balon-giden-kenar: #C7DAFB;
  --akis-zemin: #F4F6FA;

  /* Ölçüler */
  --ray-en: 56px;
  --liste-en: 336px;
  --panel-en: 320px;
  --ust-yukseklik: 46px;
  --r-kucuk: 6px;
  --r: 8px;
  --r-buyuk: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #060A12;
    --kagit: #0E1624;
    --kagit-2: #131D2E;
    --kagit-3: #18243A;
    --kenar: #1E2A3E;
    --kenar-guclu: #33415A;
    --metin: #E6EDF7;
    --metin-2: #9BAAC0;
    --metin-3: #6A7A92;
    --ustu: rgba(255, 255, 255, .045);
    --ustu-2: rgba(255, 255, 255, .085);
    --perde: rgba(2, 5, 11, .68);
    --golge-menu: 0 12px 28px -12px rgba(0, 0, 0, .7), 0 2px 8px -3px rgba(0, 0, 0, .5);
    --golge-pencere: 0 32px 64px -24px rgba(0, 0, 0, .8);
    --ray: #070C16;
    --ray-kenar: #16202F;
    --balon-gelen: #16202F;
    --balon-giden: #1B3055;
    --balon-gelen-kenar: #22304A;
    --balon-giden-kenar: #2A4776;
    --akis-zemin: #0A111C;
    --marka: #3B82F6;
    --marka-acik: #60A5FA;
    --basari: #10B981;
    --uyari: #F59E0B;
    --tehlike: #F05252;
    --sicak-metin: #FBBF24;
    --tehlike-metin: #FCA5A5;
  }
}

:root[data-tema="koyu"] {
  --zemin: #060A12;
  --kagit: #0E1624;
  --kagit-2: #131D2E;
  --kagit-3: #18243A;
  --kenar: #1E2A3E;
  --kenar-guclu: #33415A;
  --metin: #E6EDF7;
  --metin-2: #9BAAC0;
  --metin-3: #6A7A92;
  --ustu: rgba(255, 255, 255, .045);
  --ustu-2: rgba(255, 255, 255, .085);
  --perde: rgba(2, 5, 11, .68);
  --golge-menu: 0 12px 28px -12px rgba(0, 0, 0, .7), 0 2px 8px -3px rgba(0, 0, 0, .5);
  --golge-pencere: 0 32px 64px -24px rgba(0, 0, 0, .8);
  --ray: #070C16;
  --ray-kenar: #16202F;
  --balon-gelen: #16202F;
  --balon-giden: #1B3055;
  --balon-gelen-kenar: #22304A;
  --balon-giden-kenar: #2A4776;
  --akis-zemin: #0A111C;
  --marka: #3B82F6;
  --marka-acik: #60A5FA;
  --basari: #10B981;
  --uyari: #F59E0B;
  --tehlike: #F05252;
  --sicak-metin: #FBBF24;
  --tehlike-metin: #FCA5A5;
}

/* --------------------------------------------------------------------------
   3. Yardımcı sınıflar
   -------------------------------------------------------------------------- */

.gizli { display: none !important; }
.gorunmez { visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.iki-satir { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; }
.sayisal { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.esnek { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esnek-arasi { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dikey { display: flex; flex-direction: column; min-height: 0; }
.bosluk { flex: 1 1 auto; min-width: 0; }
.sarmal { flex-wrap: wrap; }
.kucuk { font-size: 11.5px; }
.sonuk { color: var(--metin-2); }
.cok-sonuk { color: var(--metin-3); }
.kalin { font-weight: 600; }
.merkez { text-align: center; }
.sag { text-align: right; }
.kaydir { overflow-y: auto; overflow-x: hidden; }
.yatay-kaydir { overflow-x: auto; }
.tikla-yok { pointer-events: none; }
.tehlike-metin { color: var(--tehlike); }
.basari-metin { color: var(--basari); }
.uyari-metin { color: var(--uyari); }

/* Kaydırma çubuğu — ince ve sessiz */
* { scrollbar-width: thin; scrollbar-color: var(--kenar-guclu) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--kenar-guclu);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--metin-3); background-clip: content-box; }

/* --------------------------------------------------------------------------
   4. Uygulama iskeleti
   -------------------------------------------------------------------------- */

#uygulama {
  display: grid;
  grid-template-columns: var(--ray-en) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.ray {
  grid-column: 1;
  background: var(--ray);
  border-right: 1px solid var(--ray-kenar);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  z-index: 30;
}

.ray-marka {
  width: 34px; height: 34px;
  border-radius: var(--r-kucuk);
  background: linear-gradient(140deg, var(--marka) 0%, var(--vurgu) 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  margin-bottom: 10px;
  flex: none;
}

.ray-dugme {
  width: 48px; min-height: 44px;
  border-radius: var(--r-kucuk);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ray-metin);
  position: relative;
  flex: none;
  padding: 5px 2px;
  transition: background .12s, color .12s;
}

/* Yalnız ikon gösteren bir şeritte bölümlerin ne olduğu, üzerine gelmeden
   anlaşılmıyor; kanal bağlama ekranı bu yüzden bulunamadı. Etiket küçük ama
   kalıcı. */
/* Kanal seçicideki renkli nokta — hangi hattı izlediğiniz tek bakışta. */
.ray-kanal-nokta {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ray) 70%, transparent);
}

.ray-etiket {
  font-size: 8.5px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.01em; text-align: center;
  max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ray-dugme:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ray-dugme.aktif { background: var(--ray-aktif-zemin); color: var(--ray-aktif); }
.ray-dugme.aktif::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--marka-acik);
}
.ray-dugme svg { width: 19px; height: 19px; }
.ray-rozet {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--tehlike); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--ray);
  box-sizing: content-box;
}
.ray-ayirac { width: 24px; height: 1px; background: var(--ray-kenar); margin: 6px 0; flex: none; }

.govde {
  grid-column: 2;
  display: grid;
  grid-template-rows: var(--ust-yukseklik) 1fr;
  min-width: 0;
  min-height: 0;
}

/* --- Üst çubuk --- */

.ust {
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 12px;
  background: var(--kagit);
  border-bottom: 1px solid var(--kenar);
  z-index: 20;
  min-width: 0;
}
.ust-baslik { font-size: 13.5px; font-weight: 650; letter-spacing: -.1px; flex: none; }
.ust-araclar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }

.sayfa {
  min-height: 0; min-width: 0;
  display: flex;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Düğmeler
   -------------------------------------------------------------------------- */

.dg {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-kucuk);
  background: var(--kagit);
  color: var(--metin);
  font-size: 12.5px; font-weight: 550;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.dg:hover:not(:disabled) { background: var(--kagit-3); border-color: var(--metin-3); }
.dg:active:not(:disabled) { transform: translateY(.5px); }
.dg:disabled { opacity: .5; cursor: not-allowed; }
.dg svg { width: 15px; height: 15px; flex: none; }

.dg-birincil {
  background: var(--marka); border-color: var(--marka); color: #fff;
}
.dg-birincil:hover:not(:disabled) { background: var(--marka-koyu); border-color: var(--marka-koyu); }

.dg-tehlike { background: var(--tehlike); border-color: var(--tehlike); color: #fff; }
.dg-tehlike:hover:not(:disabled) { filter: brightness(.92); }

.dg-sessiz { border-color: transparent; background: transparent; color: var(--metin-2); }
.dg-sessiz:hover:not(:disabled) { background: var(--ustu); color: var(--metin); border-color: transparent; }

.dg-anahat-tehlike { color: var(--tehlike); border-color: color-mix(in srgb, var(--tehlike) 40%, transparent); }
.dg-anahat-tehlike:hover:not(:disabled) { background: color-mix(in srgb, var(--tehlike) 10%, transparent); }

.dg-kucuk { height: 25px; padding: 0 8px; font-size: 11.5px; border-radius: 5px; }
.dg-kucuk svg { width: 13px; height: 13px; }
.dg-buyuk { height: 36px; padding: 0 16px; font-size: 13.5px; }

.dg-ikon { width: 30px; padding: 0; }
.dg-ikon.dg-kucuk { width: 25px; }
.dg-ikon.dg-buyuk { width: 36px; }

.dg-grup { display: inline-flex; }
.dg-grup .dg { border-radius: 0; margin-left: -1px; }
.dg-grup .dg:first-child { border-radius: var(--r-kucuk) 0 0 var(--r-kucuk); margin-left: 0; }
.dg-grup .dg:last-child { border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0; }
.dg-grup .dg.secili { background: var(--marka); border-color: var(--marka); color: #fff; z-index: 1; }

/* --------------------------------------------------------------------------
   6. Form öğeleri
   -------------------------------------------------------------------------- */

.gr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gr > label, .etiket {
  font-size: 11.5px; font-weight: 600; color: var(--metin-2);
  letter-spacing: .01em;
}
.ipucu { font-size: 11.5px; color: var(--metin-3); line-height: 1.45; }
.hata-metni { font-size: 11.5px; color: var(--tehlike); }

.gd, select.gd, textarea.gd {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-kucuk);
  background: var(--kagit);
  color: var(--metin);
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
textarea.gd { height: auto; min-height: 68px; padding: 7px 9px; resize: vertical; line-height: 1.5; }
select.gd {
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 14px;
}
.gd:hover:not(:disabled) { border-color: var(--metin-3); }
.gd:focus {
  border-color: var(--marka);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 16%, transparent);
}
.gd:disabled, .gd[readonly] { background: var(--kagit-3); color: var(--metin-2); cursor: not-allowed; }
.gd::placeholder { color: var(--metin-3); }
.gd.hatali { border-color: var(--tehlike); }

.gd-onek { display: flex; align-items: center; }
.gd-onek > span {
  height: 32px; display: grid; place-items: center; padding: 0 9px;
  border: 1px solid var(--kenar-guclu); border-right: none;
  border-radius: var(--r-kucuk) 0 0 var(--r-kucuk);
  background: var(--kagit-3); color: var(--metin-2); font-size: 12px;
}
.gd-onek .gd { border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0; }

.kutu, .radyo {
  display: inline-flex; align-items: flex-start; gap: 8px;
  cursor: pointer; font-size: 12.5px; line-height: 1.45;
}
.kutu input, .radyo input {
  appearance: none;
  width: 16px; height: 16px; margin: 1px 0 0;
  border: 1.5px solid var(--kenar-guclu);
  border-radius: 4px;
  background: var(--kagit);
  flex: none;
  position: relative;
  transition: background .12s, border-color .12s;
}
.radyo input { border-radius: 50%; }
.kutu input:checked, .radyo input:checked { background: var(--marka); border-color: var(--marka); }
.kutu input:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.radyo input:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
}
.kutu input:disabled, .radyo input:disabled { opacity: .45; cursor: not-allowed; }

/* Rolün kendiliğinden verdiği yetkiler: işaretli ama değiştirilemez.
   Soluk bir onay yerine dolu kalması gerekiyor — "bu kutu boş, demek ki
   yapamıyor" yanılgısı tam olarak buradan çıkmıştı. */
.kutu.kilitli { cursor: default; color: var(--metin-2); }
.kutu.kilitli input:disabled {
  opacity: 1; cursor: default;
  background: var(--kenar-guclu); border-color: var(--kenar-guclu);
}

.anahtar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.anahtar input { appearance: none; width: 34px; height: 19px; border-radius: 10px;
  background: var(--kenar-guclu); position: relative; transition: background .15s; flex: none; }
.anahtar input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.anahtar input:checked { background: var(--marka); }
.anahtar input:checked::after { transform: translateX(15px); }
.anahtar input:disabled { opacity: .5; cursor: not-allowed; }

.renk-gd { width: 34px; height: 32px; padding: 2px; border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-kucuk); background: var(--kagit); cursor: pointer; }

.arama-kutu { position: relative; display: flex; align-items: center; min-width: 0; }
.arama-kutu > svg {
  position: absolute; left: 8px; width: 15px; height: 15px; color: var(--metin-3);
  pointer-events: none;
}
.arama-kutu .gd { padding-left: 29px; padding-right: 28px; }
.arama-kutu .temizle { position: absolute; right: 3px; }
/* Arama kutusu boşken temizle düğmesi görünmez. :placeholder-shown yalnızca
   girdi boşken eşleşir. */
.arama-kutu .gd:placeholder-shown ~ .temizle { display: none; }
/* type="search" alanlarında tarayıcının kendi temizle düğmesi bizimkiyle
   yan yana iki çarpı gösteriyordu. */
.arama-kutu .gd::-webkit-search-cancel-button { display: none; }

/* Arama sonucunda eşleşen kelime */
.arama-oge mark {
  background: color-mix(in srgb, var(--sicak) 35%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px;
}

/* Arama sonuçları artık listenin içinde çizildiği için satırlar sütun
   genişliğinde olmalı (button varsayılanı içerik kadar daralmaktır). */
.arama-oge { width: 100%; text-align: left; }

/* --------------------------------------------------------------------------
   7. Rozetler, çipler, etiketler
   -------------------------------------------------------------------------- */

.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  background: var(--ustu-2); color: var(--metin-2);
  white-space: nowrap;
}
.rozet svg { width: 11px; height: 11px; }
.rozet-basari { background: color-mix(in srgb, var(--basari) 16%, transparent); color: var(--basari); }
.rozet-uyari  { background: color-mix(in srgb, var(--uyari) 18%, transparent); color: var(--uyari); }
.rozet-tehlike{ background: color-mix(in srgb, var(--tehlike) 15%, transparent); color: var(--tehlike); }
.rozet-marka  { background: color-mix(in srgb, var(--marka) 15%, transparent); color: var(--marka); }
.rozet-bilgi  { background: color-mix(in srgb, var(--bilgi) 15%, transparent); color: var(--bilgi); }
.rozet-nokta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

.sayac {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--marka); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.sayac-sessiz { background: var(--kenar-guclu); color: var(--metin-2); }

.cip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--kenar); border-radius: 11px;
  background: var(--kagit-2); color: var(--metin-2);
  font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.cip svg { width: 12px; height: 12px; }
.cip.secili { background: color-mix(in srgb, var(--marka) 12%, transparent);
  border-color: color-mix(in srgb, var(--marka) 45%, transparent); color: var(--marka); }
.cip button { display: grid; place-items: center; color: inherit; opacity: .6; }
.cip button:hover { opacity: 1; }

.etiket-cip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px; padding: 0 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.etiket-nokta { width: 7px; height: 7px; border-radius: 2px; flex: none; }

/* Kanal rozeti — ikon + kanal adı, kanal renginde etiket.
   Sabit kare ölçü VERİLMEZ: her çağrı yerinde içine bir metin (WhatsApp,
   Instagram, kanal etiketi) konuyor; kare kutuda o metin taşıp okunmaz hâle
   geliyordu. Genişlik içeriğe göredir, yükseklik sabittir. */
.kanal-rozet {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 18px; padding: 2px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: -.2px;
  white-space: nowrap; flex: none;
}
.kanal-rozet svg { width: 11px; height: 11px; flex: none; }
.kanal-rozet.kucuk { min-height: 16px; padding: 1px 5px; font-size: 9.5px; gap: 3px; border-radius: 4px; }
.kanal-rozet.kucuk svg { width: 10px; height: 10px; }
.kanal-rozet.buyuk { min-height: 24px; padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.kanal-rozet.buyuk svg { width: 14px; height: 14px; }
.k-whatsapp_qr    { background: var(--k-whatsapp); }
.k-whatsapp_cloud { background: var(--k-whatsapp-cloud); }
.k-instagram      { background: var(--k-instagram); }
.k-messenger      { background: var(--k-messenger); }
.k-tiktok         { background: var(--k-tiktok); }
.k-email          { background: var(--k-email); }

.durum-nokta { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--notr); }
.durum-connected { background: var(--basari); }
.durum-connecting, .durum-qr { background: var(--sicak); animation: nabiz 1.4s ease-in-out infinite; }
.durum-error { background: var(--tehlike); }
.durum-pending_approval { background: var(--bilgi); }
.durum-disconnected { background: var(--notr); }
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------------------------------------------------
   8. Avatar
   -------------------------------------------------------------------------- */

.avatar {
  width: 34px; height: 34px; border-radius: var(--r-kucuk);
  display: grid; place-items: center; overflow: hidden;
  background: var(--marka); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -.2px;
  flex: none; position: relative;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.yuvarlak { border-radius: 50%; }
.avatar.k18 { width: 18px; height: 18px; font-size: 8px; border-radius: 4px; }
.avatar.k22 { width: 22px; height: 22px; font-size: 9px; border-radius: 5px; }
.avatar.k26 { width: 26px; height: 26px; font-size: 10px; }
.avatar.k44 { width: 44px; height: 44px; font-size: 15px; border-radius: var(--r); }
.avatar.k64 { width: 64px; height: 64px; font-size: 21px; border-radius: var(--r); }

.avatar-yigin { display: flex; }
.avatar-yigin .avatar { margin-left: -6px; border: 2px solid var(--kagit); }
.avatar-yigin .avatar:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   9. Kartlar, bölümler, tablolar
   -------------------------------------------------------------------------- */

.kart {
  background: var(--kagit);
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  overflow: hidden;
}
.kart-bas {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--kenar);
  background: var(--kagit-2);
  min-height: 38px;
}
.kart-bas h3 { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.kart-govde { padding: 12px; }
.kart-govde.sik { padding: 0; }
.kart-alt {
  padding: 9px 12px; border-top: 1px solid var(--kenar); background: var(--kagit-2);
  display: flex; align-items: center; gap: 8px;
}

.bolum-bas {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.bolum-bas h2 { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }

.tablo { font-size: 12.5px; }
.tablo th {
  text-align: left; font-weight: 600; font-size: 11px; color: var(--metin-2);
  padding: 7px 10px; border-bottom: 1px solid var(--kenar);
  background: var(--kagit-2);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.tablo td { padding: 8px 10px; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover td { background: var(--kagit-2); }
.tablo td.sayisal, .tablo th.sayisal { text-align: right; font-variant-numeric: tabular-nums; }
.tablo-sarmal { overflow-x: auto; }

/* Not: .veri-listesi'nin tek tanımı aşağıda, "Sayfa düzenleri" bölümündedir.
   Burada bir zamanlar ikinci bir (dl/dt/dd) tanımı vardı; panelde tanım listesi
   kullanılmadığı için kaldırıldı. Aynı sınıfın iki tanımı, hangisinin geçerli
   olduğunu okurken görünmez kılıyordu. */

.olcum { display: flex; flex-direction: column; gap: 2px; }
.olcum-deger { font-size: 21px; font-weight: 680; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.olcum-ad { font-size: 11.5px; color: var(--metin-2); }
.olcum-fark { font-size: 11px; font-weight: 600; }

.izgara { display: grid; gap: 10px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara-oto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Sekmeler */
.sekmeler {
  display: flex; gap: 2px; border-bottom: 1px solid var(--kenar);
  overflow-x: auto; scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  padding: 8px 11px; font-size: 12.5px; font-weight: 550; color: var(--metin-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.sekme:hover { color: var(--metin); }
.sekme.aktif { color: var(--marka); border-bottom-color: var(--marka); }
.sekme svg { width: 14px; height: 14px; }

/* Yan menü (ayarlar) */
.yan-menu { display: flex; flex-direction: column; gap: 1px; padding: 8px; }
.yan-menu button {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-kucuk);
  font-size: 12.5px; font-weight: 550; color: var(--metin-2); text-align: left;
  width: 100%;
}
.yan-menu button svg { width: 15px; height: 15px; flex: none; }
.yan-menu button:hover { background: var(--ustu); color: var(--metin); }
.yan-menu button.aktif { background: color-mix(in srgb, var(--marka) 12%, transparent); color: var(--marka); }

/* Boş durum */
.bos-durum {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 24px; text-align: center; color: var(--metin-2);
  max-width: 420px; margin: 0 auto;
}
.bos-durum > svg { width: 34px; height: 34px; color: var(--metin-3); }
/* Düğme içindeki ikon boş durumun büyük simgesiyle aynı boyutu
   almamalı; seçici doğrudan çocuğa daraltıldı. */
.bos-durum .dg svg { width: 15px; height: 15px; color: inherit; }
.bos-durum h3 { font-size: 14px; font-weight: 620; color: var(--metin); }
.bos-durum p { font-size: 12.5px; line-height: 1.55; }

/* İskelet yükleme */
.iskelet {
  background: linear-gradient(90deg, var(--kagit-3) 25%, var(--ustu-2) 37%, var(--kagit-3) 63%);
  background-size: 400% 100%;
  animation: kayan 1.2s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes kayan { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.yukleniyor-cizgi {
  height: 2px; background: var(--kenar); overflow: hidden; position: relative;
}
.yukleniyor-cizgi::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--marka); animation: kosan 1s ease-in-out infinite;
}
@keyframes kosan { 0% { left: -40%; } 100% { left: 100%; } }

.donen { animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* Uyarı şeridi */
.serit {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border-radius: var(--r-kucuk);
  border: 1px solid var(--kenar); background: var(--kagit-2);
  font-size: 12.5px; line-height: 1.5;
}
.serit svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.serit-uyari { border-color: color-mix(in srgb, var(--uyari) 40%, transparent);
  background: color-mix(in srgb, var(--uyari) 10%, transparent); color: var(--uyari); }
.serit-tehlike { border-color: color-mix(in srgb, var(--tehlike) 40%, transparent);
  background: color-mix(in srgb, var(--tehlike) 9%, transparent); color: var(--tehlike); }
.serit-bilgi { border-color: color-mix(in srgb, var(--bilgi) 40%, transparent);
  background: color-mix(in srgb, var(--bilgi) 9%, transparent); color: var(--bilgi); }
.serit-basari { border-color: color-mix(in srgb, var(--basari) 40%, transparent);
  background: color-mix(in srgb, var(--basari) 9%, transparent); color: var(--basari); }
.serit strong { font-weight: 650; }
.serit a { color: inherit; text-decoration: underline; }

/* İlerleme */
.ilerleme { height: 6px; border-radius: 3px; background: var(--kagit-3); overflow: hidden; }
.ilerleme > i { display: block; height: 100%; background: var(--marka); border-radius: 3px;
  transition: width .3s ease; }

/* --------------------------------------------------------------------------
   10. Açılır menü ve ipucu
   -------------------------------------------------------------------------- */

.menu {
  position: fixed; z-index: 400;
  min-width: 190px; max-width: 320px; max-height: 70vh;
  padding: 4px;
  background: var(--kagit);
  border: 1px solid var(--kenar-guclu);
  border-radius: var(--r);
  box-shadow: var(--golge-menu);
  overflow-y: auto;
}
.menu-oge {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 8px; border-radius: 5px;
  font-size: 12.5px; text-align: left; color: var(--metin);
}
.menu-oge:hover { background: var(--ustu); }
.menu-oge svg { width: 15px; height: 15px; flex: none; color: var(--metin-2); }
.menu-oge.tehlike { color: var(--tehlike); }
.menu-oge.tehlike svg { color: var(--tehlike); }
.menu-oge.secili { background: color-mix(in srgb, var(--marka) 12%, transparent); color: var(--marka); }
.menu-oge:disabled { opacity: .45; cursor: not-allowed; }
.menu-oge .kisayol { margin-left: auto; font-size: 10.5px; color: var(--metin-3);
  font-variant-numeric: tabular-nums; }
.menu-ayirac { height: 1px; background: var(--kenar); margin: 4px 2px; }
.menu-baslik { padding: 6px 8px 3px; font-size: 10.5px; font-weight: 700; color: var(--metin-3);
  text-transform: uppercase; letter-spacing: .05em; }

[data-ipucu] { position: relative; }
[data-ipucu]:hover::after {
  content: attr(data-ipucu);
  position: absolute; z-index: 500; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  padding: 4px 7px; border-radius: 5px;
  background: var(--murekkep); color: #fff;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Kip penceresi (modal) ve toast
   -------------------------------------------------------------------------- */

.perde {
  position: fixed; inset: 0; z-index: 500;
  background: var(--perde);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: belir .12s ease-out;
}
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }

.pencere {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--kagit);
  border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-buyuk);
  box-shadow: var(--golge-pencere);
  animation: yukari .16s cubic-bezier(.2, .8, .3, 1);
  overflow: hidden;
}
@keyframes yukari { from { transform: translateY(10px) scale(.99); opacity: 0; } }
.pencere.genis { max-width: 760px; }
.pencere.cok-genis { max-width: 1040px; }
.pencere.dar { max-width: 400px; }

.pencere-bas {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--kenar);
  flex: none;
}
.pencere-bas h2 { font-size: 14px; font-weight: 650; letter-spacing: -.15px; }
.pencere-govde { padding: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pencere-govde.sik { padding: 0; }
.pencere-alt {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  padding: 11px 14px; border-top: 1px solid var(--kenar); background: var(--kagit-2);
  flex: none;
}

.toast-yuva {
  position: fixed; z-index: 600; right: 14px; bottom: 14px;
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: min(380px, calc(100vw - 28px));
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px;
  background: var(--kagit); border: 1px solid var(--kenar-guclu);
  border-left: 3px solid var(--marka);
  border-radius: var(--r);
  box-shadow: var(--golge-menu);
  font-size: 12.5px; line-height: 1.5;
  animation: kaydir-gir .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes kaydir-gir { from { transform: translateX(16px); opacity: 0; } }
.toast.cikiyor { animation: kaydir-cik .16s ease-in forwards; }
@keyframes kaydir-cik { to { transform: translateX(16px); opacity: 0; } }
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--marka); }
.toast.hata { border-left-color: var(--tehlike); }
.toast.hata svg { color: var(--tehlike); }
.toast.basari { border-left-color: var(--basari); }
.toast.basari svg { color: var(--basari); }
.toast.uyari { border-left-color: var(--uyari); }
.toast.uyari svg { color: var(--uyari); }
.toast-kapat { margin-left: auto; color: var(--metin-3); }

/* Işık kutusu (medya) */
.isik-kutusu {
  position: fixed; inset: 0; z-index: 550;
  background: rgba(2, 5, 11, .92);
  display: flex; flex-direction: column;
}
.isik-kutusu-ust {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  color: #E2E8F0; font-size: 12.5px;
}
.isik-kutusu-ust .dg { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2);
  color: #fff; }
.isik-kutusu-ust .dg:hover { background: rgba(255, 255, 255, .18); }
.isik-kutusu-icerik {
  flex: 1; display: grid; place-items: center; padding: 8px 16px 20px; min-height: 0;
}
.isik-kutusu-icerik img, .isik-kutusu-icerik video {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   12. Gelen kutusu — üç sütun
   -------------------------------------------------------------------------- */

.gk {
  display: grid;
  /* İki `auto`: hat sütunu ve (yalnızca e-postada görünen) klasör sütunu.
     Gizliyken `display:none` olduğu için `auto` sıfır yer kaplıyor. */
  grid-template-columns: auto auto var(--liste-en) minmax(0, 1fr);
  width: 100%; min-height: 0;
}
.gk.panel-acik {
  grid-template-columns: auto auto var(--liste-en) minmax(0, 1fr) var(--panel-en);
}

/* --- Sol: sohbet listesi --- */

.sohbet-sutun {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--kagit);
  border-right: 1px solid var(--kenar);
}
.sohbet-arac {
  padding: 8px; border-bottom: 1px solid var(--kenar);
  display: flex; flex-direction: column; gap: 7px; flex: none;
}
.suzgec-satir { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* Süzgeçler yatay kaydırma yerine ALT SATIRA iner.
   Yatay kaydırma faresi olan kullanıcıda çalışmıyor (tekerlek dikey kaydırır,
   yatayı için Shift gerekir) ve gizli kaydırma çubuğu yüzünden taşan
   süzgeçlerin varlığı bile anlaşılmıyordu: "Açık" yarım, "Arşiv" hiç
   görünmüyordu. */
/* Önizleme satırındaki okundu tiki metinle AYNI satırda kalmalı.
   Genel `img, svg { display:block }` sıfırlaması onu alt satıra atıyordu;
   sohbet satırları üç sıraya çıkıp 1000px ekrana 9 sohbet sığıyordu. */
/* Tik metne yapışmasın: satır içi ama kendi payı olsun. */
.sohbet-onizleme svg {
  display: inline-block; vertical-align: -2px; flex: none;
  margin-right: 3px;
}

.hizli-suzgecler {
  display: flex; gap: 3px; flex-wrap: wrap; row-gap: 4px; padding-bottom: 1px;
}
/* --------------------------------------------------------------------------
   Hatırlatmalar sayfası
   -------------------------------------------------------------------------- */

.obek-bas {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 10px;
}
.obek-bas:first-child { margin-top: 0; }
.obek-bas h3 { font-size: 13.5px; font-weight: 650; }

/* Liste — kart yerine tek sıra satır: aynı ekrana kaç kat fazla hatırlatma
   sığdığı doğrudan işe yarıyor. */
.hat-liste {
  border: 1px solid var(--kenar); border-radius: var(--r);
  background: var(--kagit); overflow: hidden;
}
.hat-obek {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--kagit-2);
  border-top: 1px solid var(--kenar); border-bottom: 1px solid var(--kenar);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--metin-2);
}
.hat-obek:first-child { border-top: 0; }
.hat-obek[data-obek="gecikmis"] { color: var(--tehlike); }

.hat-satir {
  display: grid;
  grid-template-columns: 18px minmax(0, 3fr) minmax(140px, 1.2fr) minmax(0, 1.4fr) 22px auto;
  align-items: center; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--kenar);
  border-left: 3px solid transparent;
}
.hat-satir:last-child { border-bottom: 0; }
.hat-satir:hover { background: var(--kagit-2); }
.hat-satir > svg { color: var(--metin-3); }
/* Gecikmiş olan listede bakılmadan ayırt edilmeli. */
.hat-satir.gecikmis { border-left-color: var(--tehlike); }
.hat-satir.gecikmis > svg { color: var(--tehlike); }
.hat-satir.bitti { opacity: .6; }
.hat-satir.bitti .hat-ad .kalin { text-decoration: line-through; }
.hat-ad { min-width: 0; }
.hat-zaman { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hat-kisi { min-width: 0; }
.hat-eylem { justify-content: flex-end; }

@media (max-width: 1100px) {
  /* Dar ekranda kişi sütunu düşer; zaman ve eylem kalır. */
  .hat-satir { grid-template-columns: 18px minmax(0, 2fr) minmax(120px, 1fr) 0 0 auto; }
  .hat-kisi, .hat-satir > .cip-basari { display: none; }
}

.sayfalama {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.sayfalama .dg-grup { align-items: center; gap: 8px; }

.cip-basari {
  border-color: color-mix(in srgb, var(--basari) 40%, transparent);
  background: color-mix(in srgb, var(--basari) 12%, transparent);
  color: var(--basari);
}

/* --------------------------------------------------------------------------
   Seçim çipleri

   Açılır liste yerine: seçenekler zaten görünür, tek tık yeter, seçili olan
   rengiyle ayrışır. Kişi kartında aynı çipler salt okunur olarak kullanılır.
   -------------------------------------------------------------------------- */
.cip-grup { display: flex; flex-wrap: wrap; gap: 4px; }
.secim-cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 13px;
  border: 1px solid var(--kenar-guclu); background: var(--kagit);
  font-size: 11.5px; font-weight: 550; color: var(--metin-2);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.secim-cip:hover { border-color: var(--metin-3); color: var(--metin); }
.secim-cip.aktif {
  --cip-renk: var(--marka);
  border-color: var(--cip-renk);
  background: color-mix(in srgb, var(--cip-renk) 13%, transparent);
  color: var(--cip-renk);
}
.cip-nokta { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Salt okunur kullanımda tıklanır görünmesin. */
span.secim-cip { cursor: default; }

/* Hat seçme şeridi — sohbet listesinin hemen üstünde. */
.kanal-serit {
  display: flex; gap: 3px; flex-wrap: wrap; row-gap: 4px;
  padding: 7px 9px 0;
}
.kanal-nokta {
  width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
}

/* Süzgeç düğmesindeki sayı: kaç sohbet olduğunu görmek için basmak gerekmesin. */
.suzgec-sayac {
  min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--marka); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hizli-suzgec.aktif .suzgec-sayac { background: rgba(255, 255, 255, .28); color: inherit; }

.hizli-suzgec {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px; border-radius: 12px;
  border: 1px solid var(--kenar); background: var(--kagit-2);
  font-size: 11.5px; font-weight: 550; color: var(--metin-2); white-space: nowrap;
}
.hizli-suzgec:hover { border-color: var(--kenar-guclu); color: var(--metin); }
.hizli-suzgec.aktif {
  background: var(--murekkep); border-color: var(--murekkep); color: #fff;
}
:root[data-tema="koyu"] .hizli-suzgec.aktif { background: var(--marka); border-color: var(--marka); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .hizli-suzgec.aktif { background: var(--marka); border-color: var(--marka); }
}
.hizli-suzgec .sayac { height: 15px; min-width: 15px; line-height: 15px; font-size: 9.5px; }

.sohbet-liste { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Satır bir <button>: tarayıcı düğmeleri içerik kadar DARALTIR ve metnini
   ORTALAR. Bu ikisi belirtilmezse satırlar farklı genişliklerde çıkar (seçili
   satırın zemini yarım kalır, saat sağ kenara yaslanamaz) ve adlar ortalanır. */
.sohbet-oge {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 8px 10px 8px 9px;
  border-bottom: 1px solid var(--kenar);
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
}
.sohbet-oge:hover { background: var(--kagit-2); }
.sohbet-oge.aktif { background: color-mix(in srgb, var(--marka) 9%, transparent);
  border-left-color: var(--marka); }
.sohbet-oge.okunmamis .sohbet-ad { font-weight: 700; }
.sohbet-oge.okunmamis .sohbet-onizleme { color: var(--metin); }
/* Bekleme çipi — JS bu iki sınıfı üretiyordu ama CSS'te KARŞILIĞI YOKTU.
   Sonuç: "1 gün 22 sa bekliyor" sıradan gri bir çip olarak çiziliyor,
   aciliyet hiç öne çıkmıyordu. Renk tek başına taşımıyor: çip zaten
   süreyi yazıyor, sol kenar çizgisi de ikinci bir işaret. */
.cip-uyari {
  background: color-mix(in srgb, var(--sicak) 18%, transparent);
  color: var(--sicak-metin, var(--sicak));
  border-color: color-mix(in srgb, var(--sicak) 45%, transparent);
  font-weight: 600;
}
.cip-tehlike {
  background: color-mix(in srgb, var(--tehlike) 18%, transparent);
  color: var(--tehlike-metin, var(--tehlike));
  border-color: color-mix(in srgb, var(--tehlike) 50%, transparent);
  font-weight: 600;
}

.sohbet-oge.sla-uyari { border-left-color: var(--sicak); }
.sohbet-oge.sla-kritik { border-left-color: var(--tehlike); }
.sohbet-oge.aktif.sla-uyari, .sohbet-oge.aktif.sla-kritik { border-left-color: var(--marka); }

.sohbet-avatar { position: relative; width: 38px; height: 38px; }
.sohbet-avatar .avatar { width: 38px; height: 38px; font-size: 13px; }
.sohbet-avatar .kanal-rozet {
  position: absolute; right: -3px; bottom: -3px;
  border: 2px solid var(--kagit); box-sizing: content-box; border-radius: 5px;
}
.sohbet-oge:hover .sohbet-avatar .kanal-rozet { border-color: var(--kagit-2); }

/* Sohbet satırının sağ sütunu: üç satır ALT ALTA durur (ad+saat, önizleme+sayaç,
   rozetler). Bir zamanlar yatay bir kutu olarak tanımlıydı ve 10.5px yazıyla
   her şeyi tek satıra sıkıştırıyordu. */
.sohbet-meta { display: flex; flex-direction: column; min-width: 0; justify-content: center; }

/* Ad satırı: adla saat aynı satırda ama saat sağa yaslı. Blok kutuyken
   margin-left:auto işlemiyor, ad ile saat bitişik yazılıyordu
   ("90541573791712:19"). */
.sohbet-ad {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-size: 12.8px; font-weight: 560; letter-spacing: -.1px;
}
.sohbet-ad > .tek-satir { flex: 1 1 auto; min-width: 0; }
/* Rehberde kayıtlı OLMAYAN kişinin kendi koyduğu ad ("~Burak").
   Başlık numaradır; bu ikincil kalır ve yer darsa önce bu kırpılır.
   Aynı özgüllükte olduğu için .tek-satir kuralından SONRA gelmeli. */
.sohbet-ad > .sohbet-takma {
  flex: 0 1 auto; min-width: 0;
  font-weight: 400; font-size: 11.5px; color: var(--metin-3);
}
.sohbet-ad svg { flex: none; width: 12px; height: 12px; color: var(--metin-3); }
.sohbet-zaman { margin-left: auto; font-size: 10.5px; color: var(--metin-3); flex: none;
  font-variant-numeric: tabular-nums; }

.sohbet-alt { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.sohbet-onizleme { font-size: 12px; color: var(--metin-2); flex: 1 1 auto; min-width: 0; }
.sohbet-onizleme .ben { color: var(--metin-3); }

/* Rozetler sığmazsa alt satıra iner — sütunun dışına taşıp kırpılmaz. */
.sohbet-isaretler {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 4px; min-width: 0;
}
.sohbet-isaretler svg { width: 13px; height: 13px; color: var(--metin-3); }
.sohbet-etiketler { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }

.liste-alt-durum { padding: 12px; text-align: center; font-size: 12px; color: var(--metin-3); }

/* --- Orta: mesaj akışı --- */

.akis-sutun {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--akis-zemin);
}
.akis-bas {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  background: var(--kagit); border-bottom: 1px solid var(--kenar);
  flex: none; min-height: 50px;
}
.akis-bas-bilgi { min-width: 0; flex: 1 1 auto; }
/* Başlıktaki eylem düğmeleri: yatay ve sağa yaslı. */
.akis-bas-arac { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.akis-bas-ad { font-size: 13.5px; font-weight: 640; letter-spacing: -.15px; }
.akis-bas-alt { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--metin-2); }

.akis {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 12px 16px 6px;
  display: flex; flex-direction: column; gap: 2px;
  scroll-behavior: auto;
}

.gun-ayirac {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 8px;
  color: var(--metin-3); font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em;
}
.gun-ayirac::before, .gun-ayirac::after {
  content: ""; flex: 1; height: 1px; background: var(--kenar);
}

.mesaj-satir { display: flex; gap: 7px; align-items: flex-end; margin-top: 2px; }
/* Grupta gönderenin avatarı — tıklanınca profil açılır. */
.mesaj-avatar {
  flex: none; padding: 0; border-radius: 50%; line-height: 0;
  cursor: pointer; transition: opacity .12s;
}
.mesaj-avatar:hover { opacity: .8; }

.profil-kutu { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0; }
.profil-foto {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  background: var(--kagit-2); border: 1px solid var(--kenar);
  cursor: zoom-in;
}
.profil-foto.profil-bos { display: grid; place-items: center; cursor: default; }

/* Numara satırı bir <button>: tıklanınca panoya kopyalar. Düğme varsayılanları
   (arka plan, kenarlık, ortalama) sıfırlanmazsa profil kutusunun ortasında
   gri bir kutu gibi durur. */
.profil-numara {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 3px 8px;
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--metin-2); font-size: 12.5px; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.profil-numara:hover { border-color: var(--kenar); color: var(--metin-1); }
.profil-numara svg { opacity: .55; }
.mesaj-satir.giden { flex-direction: row-reverse; }
.mesaj-satir.grup-basi { margin-top: 10px; }
.mesaj-satir .avatar { margin-bottom: 2px; }

.balon {
  position: relative;
  max-width: min(620px, 74%);
  padding: 6px 9px 5px;
  border: 1px solid var(--balon-gelen-kenar);
  background: var(--balon-gelen);
  border-radius: 10px 10px 10px 3px;
  font-size: 13.5px; line-height: 1.48;
  overflow-wrap: anywhere;
}
/* Hem satırdan miras (.giden .balon) hem baloncuğun kendi sınıfı (.balon.giden)
   kabul edilir; ikisi de kullanımda. */
.giden .balon, .balon.giden {
  background: var(--balon-giden);
  border-color: var(--balon-giden-kenar);
  border-radius: 10px 10px 3px 10px;
}
.mesaj-satir:not(.grup-basi) .balon { border-radius: 10px; }
.balon.sistem {
  max-width: 100%; margin: 6px auto; text-align: center;
  background: var(--ustu); border-color: transparent; color: var(--metin-2);
  font-size: 11.5px; border-radius: 6px; padding: 5px 10px;
}
.balon.silinmis { font-style: italic; color: var(--metin-3); }
.balon.vurgulu { box-shadow: 0 0 0 2px var(--sicak); }

.mesaj-gonderen { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }

/* Gruptaki gönderen adı <button> olarak çizilir (tıklanınca kişi bilgisi).
   Düğme varsayılanları sıfırlanmazsa ad ortalanır ve baloncuğun içinde
   çerçeveli bir kutu gibi görünür. */
.mesaj-gonderen.tiklanir-ad {
  display: block; width: auto; padding: 0;
  background: none; border: 0; text-align: left;
  color: var(--marka); font: inherit; font-size: 11.5px; font-weight: 700;
  cursor: pointer;
}
.mesaj-gonderen.tiklanir-ad:hover { text-decoration: underline; }
.mesaj-metin { white-space: pre-wrap; }
.mesaj-metin a { text-decoration: underline; overflow-wrap: anywhere; }

.mesaj-alt {
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  margin-top: 2px; font-size: 10px; color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.mesaj-alt svg { width: 14px; height: 14px; }
.mesaj-alt .okundu { color: var(--marka); }
.mesaj-alt .hatali { color: var(--tehlike); }

/* Temsilci imzası — ürünün temel vaadi: kim yanıtladı */
.temsilci-etiketi {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--ustu-2);
}
.temsilci-noktasi { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* Alıntı */
.alinti {
  display: block; margin-bottom: 4px; padding: 4px 7px;
  border-left: 3px solid var(--marka);
  background: var(--ustu); border-radius: 4px;
  font-size: 12px; color: var(--metin-2);
  cursor: pointer;
}
.alinti strong { display: block; font-size: 11px; color: var(--marka); font-weight: 650; }
.alinti span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* Çeviri satırı */
.ceviri {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px dashed var(--kenar-guclu);
  font-size: 12.5px; color: var(--metin-2);
}
.ceviri-bas {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 650; color: var(--metin-3);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 1px;
}
.ceviri-bas svg { width: 11px; height: 11px; }
.ceviri-gecis { font-size: 10.5px; color: var(--marka); font-weight: 600; margin-left: 4px; }
.ceviri-not { font-size: 10px; color: var(--metin-3); margin-top: 2px; }

/* Giden baloncuğun zemini temaya göre değişiyor (açıkta açık mavi, koyuda
   lacivert). Sabit bir renk vermek yerine baloncuğun kendi yazı renginden
   türetiyoruz: beyaz yazsaydık açık temada görünmezdi. */
.balon.giden .ceviri {
  color: inherit;
  border-top-color: color-mix(in srgb, currentColor 32%, transparent);
}
.balon.giden .ceviri-bas,
.balon.giden .ceviri-not { color: inherit; opacity: .7; }

/* Medya */
/* Dosyası inmemiş medya: boş baloncuk yerine ne olduğunu söyleyen kart. */
.medya-yok {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 3px; padding: 8px 10px;
  border: 1px dashed var(--kenar-guclu); border-radius: 7px;
  background: var(--ustu); color: var(--metin-2);
}
.medya-yok svg { flex: none; color: var(--metin-3); }

/* Genişlik SABİT verilir, yalnızca max-width değil.
   Video önizlemesi WhatsApp'ın gömdüğü küçük bir JPEG (çoğu zaman 60-100 px).
   Kutu yalnızca "en fazla 340px" derse, kendisi içeriğe göre daralır ve
   img'in width:100%'i o daracık kutuya oranlanır: video pul kadar görünür.
   Sabit genişlikle fotoğraf da video da aynı ölçüde çizilir. */
.medya-sarmal { margin: 2px 0 3px; border-radius: 7px; overflow: hidden; position: relative;
  width: 300px; max-width: 100%; background: var(--ustu); }
.medya-sarmal img, .medya-sarmal video { width: 100%; height: auto; display: block; cursor: zoom-in;
  max-height: 340px; object-fit: cover; }
/* Küçük önizlemenin bulanık büyümesini yumuşatır. */
.medya-sarmal img { image-rendering: auto; }
.medya-oynat {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(2, 5, 11, .25); pointer-events: none;
}
.medya-oynat span {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(2, 5, 11, .62); display: grid; place-items: center; color: #fff;
}
.medya-oynat svg { width: 20px; height: 20px; }
.medya-sure {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px;
  background: rgba(2, 5, 11, .68); color: #fff; font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.cikartma { max-width: 130px; background: transparent; }
.cikartma img { max-height: 130px; object-fit: contain; }

.belge-karti {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px;
  background: var(--ustu); min-width: 220px; margin: 2px 0 3px;
}
.belge-ikon { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center;
  background: var(--marka); color: #fff; flex: none; }
.belge-ikon svg { width: 16px; height: 16px; }

/* Sesli mesaj oynatıcı */
.ses-karti {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 4px; min-width: 236px; margin: 1px 0 2px;
}
.ses-dugme {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--marka); color: #fff; display: grid; place-items: center;
}
.ses-dugme svg { width: 15px; height: 15px; }
.ses-govde { flex: 1; min-width: 0; }
.ses-dalga { display: flex; align-items: center; gap: 2px; height: 22px; cursor: pointer; }
.ses-dalga i {
  flex: 1; background: var(--kenar-guclu); border-radius: 1px; min-width: 2px;
  transition: background .1s;
}
.ses-dalga i.gecti { background: var(--marka); }
.ses-alt { display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--metin-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.ses-hiz { font-weight: 700; color: var(--marka); }

/* Konum ve kişi kartı */
.konum-karti, .kisi-karti-mesaj {
  display: flex; gap: 9px; align-items: center;
  padding: 8px 9px; border-radius: 7px; background: var(--ustu);
  min-width: 230px; margin: 2px 0 3px;
}
.konum-harita {
  width: 46px; height: 46px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, #cfe0d0 0%, #a9c6ad 100%);
  display: grid; place-items: center; color: #1f513a;
}
:root[data-tema="koyu"] .konum-harita { background: linear-gradient(135deg, #1e3a2c 0%, #16302a 100%);
  color: #7fd3a6; }
.konum-harita svg { width: 20px; height: 20px; }

/* Reklam kartı (tıkla-yaz) */
.reklam-karti {
  display: block; margin: 0 0 5px;
  border: 1px solid var(--kenar-guclu); border-radius: 8px;
  overflow: hidden; background: var(--kagit-2);
  max-width: 320px;
}
.reklam-gorsel { position: relative; background: var(--ustu-2); }
.reklam-gorsel img { width: 100%; max-height: 150px; object-fit: cover; }
.reklam-govde { padding: 7px 9px; }
.reklam-rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  padding: 2px 6px; border-radius: 4px; margin-bottom: 4px;
  background: linear-gradient(100deg, var(--k-instagram), #F77737); color: #fff;
}
.reklam-rozet.facebook { background: var(--k-messenger); }
.reklam-rozet svg { width: 11px; height: 11px; }
.reklam-baslik { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.reklam-aciklama { font-size: 11.5px; color: var(--metin-2); margin-top: 2px; line-height: 1.4; }
.reklam-kaynak { display: flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 10.5px; color: var(--marka); }
.reklam-kaynak svg { width: 11px; height: 11px; }

/* Tepki */
.tepki {
  position: absolute; bottom: -9px; right: 8px;
  padding: 0 5px; height: 18px; border-radius: 9px;
  background: var(--kagit); border: 1px solid var(--kenar-guclu);
  font-size: 11px; line-height: 16px;
}

/* Mesaj eylemleri */
.mesaj-eylemler {
  /* ÜSTTE hizalanır, ortada değil. `center` kısa mesajda doğru duruyordu
     ama uzun bir e-postada (600px+) simgeler dikey ortaya, mesajın ilk
     satırından yüzlerce piksel uzağa düşüyordu — kullanıcı ne olduklarını
     anlamıyordu. Baloncuğun ilk satırıyla hizalansın diye küçük bir
     üst boşluk veriliyor. */
  display: flex; gap: 2px; align-self: flex-start; margin-top: 3px;
  flex: none; opacity: 0;
  transition: opacity .1s;
}
.mesaj-satir:hover .mesaj-eylemler { opacity: 1; }
.mesaj-eylemler button {
  width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center;
  color: var(--metin-3); background: var(--kagit); border: 1px solid var(--kenar);
}
.mesaj-eylemler button:hover { color: var(--metin); background: var(--kagit-3); }
.mesaj-eylemler svg { width: 13px; height: 13px; }

/* Yazıyor göstergesi */
.yaziyor-satir { display: flex; align-items: center; gap: 6px; padding: 4px 2px;
  font-size: 11.5px; color: var(--metin-2); }
.yaziyor-nokta { display: flex; gap: 3px; }
.yaziyor-nokta i { width: 5px; height: 5px; border-radius: 50%; background: var(--metin-3);
  animation: zipla 1s infinite; }
.yaziyor-nokta i:nth-child(2) { animation-delay: .15s; }
.yaziyor-nokta i:nth-child(3) { animation-delay: .3s; }
@keyframes zipla { 0%, 60%, 100% { transform: translateY(0); opacity: .5; }
                   30% { transform: translateY(-4px); opacity: 1; } }

/* --- Yazma alanı --- */

.yazma {
  flex: none; background: var(--kagit); border-top: 1px solid var(--kenar);
  padding: 8px 10px 9px;
  position: relative;
}
.yazma.suruklenen::after {
  content: "Dosyayı bırakın";
  position: absolute; inset: 4px; z-index: 5;
  border: 2px dashed var(--marka); border-radius: var(--r);
  background: color-mix(in srgb, var(--marka) 12%, var(--kagit));
  display: grid; place-items: center;
  font-size: 13px; font-weight: 650; color: var(--marka);
}
.yazma-ust { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.yazma-alan {
  display: flex; align-items: flex-end; gap: 6px;
  border: 1px solid var(--kenar-guclu); border-radius: var(--r);
  background: var(--kagit); padding: 4px 4px 4px 6px;
  transition: border-color .12s, box-shadow .12s;
}
.yazma-alan:focus-within {
  border-color: var(--marka);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 14%, transparent);
}
.yazma-metin {
  flex: 1; min-height: 30px; max-height: 190px;
  border: none; background: none; resize: none;
  padding: 6px 2px; font-size: 13.5px; line-height: 1.5;
}
.yazma-metin:focus { outline: none; }
.yazma-araclar { display: flex; align-items: center; gap: 2px; flex: none; }
.yazma-araclar button {
  width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  color: var(--metin-2);
}
.yazma-araclar button:hover { background: var(--ustu); color: var(--metin); }
.yazma-araclar button.aktif { color: var(--marka); background: color-mix(in srgb, var(--marka) 12%, transparent); }
.yazma-araclar svg { width: 17px; height: 17px; }
.gonder-dg {
  width: 30px; height: 30px; border-radius: 6px; background: var(--marka); color: #fff;
  display: grid; place-items: center; flex: none;
}
.gonder-dg:hover { background: var(--marka-koyu); }
.gonder-dg:disabled { opacity: .4; cursor: not-allowed; }
.gonder-dg svg { width: 16px; height: 16px; }

.yazma-alt { display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-size: 10.5px; color: var(--metin-3); }

/* Çeviri durumu düğmesi: üç hâli renkle ayırt edilir — çeviri işleyecek
   (marka rengi), dil farklı ama çeviri kapalı (sıcak uyarı), diğer (sönük).
   Kapalı hâlin görünmesi şart: müşteri İngilizce yazarken Türkçe yanıt
   göndermek sessizce olmamalı. */
.ceviri-durum { color: var(--metin-3); }
.ceviri-durum.etkin { color: var(--marka); }
.ceviri-durum.etkin svg { color: var(--marka); }
.ceviri-durum.uyari { color: var(--sicak); }
.ceviri-durum.uyari svg { color: var(--sicak); }

.ekler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ek-oge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px; border: 1px solid var(--kenar); border-radius: 6px;
  background: var(--kagit-2); font-size: 11.5px; max-width: 220px;
}
.ek-onizleme { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex: none;
  background: var(--ustu); }

.kilitli-yazma {
  padding: 12px; border: 1px dashed var(--kenar-guclu); border-radius: var(--r);
  background: var(--kagit-2);
  display: flex; align-items: center; gap: 10px;
}
.kilitli-yazma svg { width: 20px; height: 20px; color: var(--uyari); flex: none; }

/* Hazır cevap / şablon açılır listesi */
.oneri-liste {
  position: absolute; bottom: calc(100% + 6px); left: 10px; right: 10px;
  max-height: 260px; overflow-y: auto; z-index: 40;
  background: var(--kagit); border: 1px solid var(--kenar-guclu);
  border-radius: var(--r); box-shadow: var(--golge-menu);
  padding: 4px;
}
.oneri-oge {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;
}
.oneri-oge:hover, .oneri-oge.secili { background: var(--ustu); }
.oneri-ust { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.oneri-kisayol { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--marka); }
.oneri-govde { font-size: 11.5px; color: var(--metin-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* --- Sağ panel --- */

.yan-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--kagit); border-left: 1px solid var(--kenar);
}
.yan-panel-bas {
  display: none;
  align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--kenar);
  flex: none;
}
.yan-panel-govde { flex: 1; overflow-y: auto; min-height: 0; }
.panel-bolum { border-bottom: 1px solid var(--kenar); }
.panel-bolum-bas {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 11px; font-size: 11px; font-weight: 700; color: var(--metin-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.panel-bolum-bas:hover { background: var(--kagit-2); }
.panel-bolum-bas svg.ok { width: 13px; height: 13px; transition: transform .15s; }
.panel-bolum.kapali svg.ok { transform: rotate(-90deg); }
.panel-bolum.kapali .panel-bolum-govde { display: none; }
.panel-bolum-govde { padding: 0 11px 11px; display: flex; flex-direction: column; gap: 8px; }

.kisi-ozet { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 11px 11px; text-align: center; }
.kisi-ozet .avatar { width: 58px; height: 58px; font-size: 20px; }
.kisi-ozet-ad { font-size: 14px; font-weight: 650; letter-spacing: -.15px; }

/* Kişi kartının eylem şeridi — WhatsApp'ın kişi bilgisi ekranındaki
   Mesaj/Ara düğmelerinin karşılığı. */
.kisi-eylem-serit {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 0 11px 12px; border-bottom: 1px solid var(--kenar);
}
.kisi-eylem-serit .dg { font-variant-numeric: tabular-nums; }
.foto-dg { padding: 0; border: 0; background: none; line-height: 0; cursor: zoom-in; border-radius: 50%; }
.foto-dg:hover { opacity: .85; }

.not-oge {
  padding: 7px 8px; border-radius: 6px; background: var(--kagit-2);
  border: 1px solid var(--kenar); font-size: 12px; line-height: 1.5;
}
.not-oge.sabit { border-color: color-mix(in srgb, var(--sicak) 45%, transparent);
  background: color-mix(in srgb, var(--sicak) 8%, transparent); }
.not-ust { display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
  font-size: 10.5px; color: var(--metin-3); }

.hatirlatici-oge {
  display: flex; gap: 8px; padding: 7px 8px; border-radius: 6px;
  border: 1px solid var(--kenar); background: var(--kagit-2); font-size: 12px;
}
.hatirlatici-oge.gecti { border-color: color-mix(in srgb, var(--tehlike) 45%, transparent);
  background: color-mix(in srgb, var(--tehlike) 7%, transparent); }

.gecmis-oge { display: flex; gap: 8px; font-size: 11.5px; color: var(--metin-2); padding: 3px 0; }
.gecmis-cizgi { width: 1px; background: var(--kenar); position: relative; flex: none; margin-left: 4px; }
.gecmis-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--kenar-guclu);
  flex: none; margin-top: 4px; }

/* --------------------------------------------------------------------------
   13. Birleşik arama penceresi
   -------------------------------------------------------------------------- */

.arama-perde {
  position: fixed; inset: 0; z-index: 480; background: var(--perde);
  display: flex; justify-content: center; padding-top: 8vh;
  animation: belir .1s;
}
.arama-pencere {
  width: min(680px, calc(100vw - 28px)); max-height: 74vh;
  display: flex; flex-direction: column;
  background: var(--kagit); border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-buyuk); box-shadow: var(--golge-pencere);
  overflow: hidden;
  animation: yukari .14s cubic-bezier(.2, .8, .3, 1);
}
.arama-giris {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border-bottom: 1px solid var(--kenar);
}
.arama-giris svg { width: 17px; height: 17px; color: var(--metin-3); flex: none; }
.arama-giris input {
  flex: 1; border: none; background: none; font-size: 15px; padding: 0;
}
.arama-sonuc { overflow-y: auto; padding: 5px; }
.arama-grup-bas {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px 4px; font-size: 10.5px; font-weight: 700;
  color: var(--metin-3); text-transform: uppercase; letter-spacing: .05em;
}
.arama-oge {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px; border-radius: 6px; text-align: left;
}
.arama-oge:hover, .arama-oge.secili { background: var(--ustu); }
.arama-oge-ad { font-size: 12.8px; font-weight: 570; }
.arama-oge-alt { font-size: 11.5px; color: var(--metin-2); }
.arama-alt-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; border-top: 1px solid var(--kenar); background: var(--kagit-2);
  font-size: 11px; color: var(--metin-3);
}
kbd {
  display: inline-block; min-width: 17px; padding: 1px 4px;
  border: 1px solid var(--kenar-guclu); border-bottom-width: 2px; border-radius: 4px;
  background: var(--kagit); font-family: inherit; font-size: 10.5px; font-weight: 600;
  text-align: center; color: var(--metin-2);
}

/* --------------------------------------------------------------------------
   14. Sayfa düzenleri (kişiler, kampanya, rapor, ayarlar)
   -------------------------------------------------------------------------- */

.icerik {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto;
  padding: 14px;
}
.icerik.dar { max-width: 900px; margin: 0 auto; width: 100%; }
.icerik.sik { padding: 0; }

.arac-cubugu {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--kenar); background: var(--kagit);
  flex: none;
}

.bolme { display: flex; min-height: 0; min-width: 0; flex: 1; }
.bolme-yan {
  width: 232px; flex: none; border-right: 1px solid var(--kenar);
  background: var(--kagit); overflow-y: auto;
}
.bolme-ana { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.liste-sutun {
  width: 320px; flex: none; border-right: 1px solid var(--kenar);
  background: var(--kagit); display: flex; flex-direction: column; min-height: 0;
}

/* Satış hunisi (kanban benzeri özet) */
.huni { display: flex; flex-direction: column; gap: 6px; }
.huni-asama { display: flex; align-items: center; gap: 9px; }
.huni-ad { width: 118px; flex: none; font-size: 12px; font-weight: 570; }
.huni-cubuk { flex: 1; height: 24px; border-radius: 5px; background: var(--kagit-3);
  overflow: hidden; position: relative; }
.huni-dolgu { height: 100%; border-radius: 5px; transition: width .35s ease; min-width: 3px; }
.huni-sayi { width: 120px; flex: none; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--metin-2); }

/* SVG grafik kabı */
.grafik { width: 100%; display: block; overflow: visible; }
.grafik-eksen { stroke: var(--kenar); stroke-width: 1; }
.grafik-izgara { stroke: var(--kenar); stroke-width: 1; stroke-dasharray: 3 4; opacity: .75; }
.grafik-yazi { fill: var(--metin-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.grafik-nokta { fill: var(--kagit); stroke-width: 2; }
.grafik-imlec { stroke: var(--metin-3); stroke-width: 1; stroke-dasharray: 3 3; }
.grafik-alan { opacity: .14; }
.grafik-lejant { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--metin-2); }
.grafik-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.grafik-lejant i { width: 9px; height: 9px; border-radius: 2px; }
.grafik-ipucu {
  position: absolute; z-index: 10; pointer-events: none;
  padding: 5px 8px; border-radius: 6px;
  background: var(--murekkep); color: #fff; font-size: 11px; line-height: 1.5;
  box-shadow: var(--golge-menu); white-space: nowrap;
}
.grafik-sarmal { position: relative; }

/* QR penceresinin gövdesi — ortalanmış içerik.
   Bir zamanlar 232x232 sabit beyaz bir çerçeveydi (yalnızca görseli
   çerçevelemek için). Oysa pencerenin TÜM gövdesi bu sınıfı taşıyor: görselin
   yanı sıra "kod 60 saniyede yenilenir" satırı ve dört maddelik yönerge de
   içine giriyor. Sabit kutuda bunlar taşıyor ve görünmez oluyordu.
   Beyaz çerçeveyi artık görselin kendi biçemi taşıyor. */
.qr-kutu { text-align: center; }
.qr-kutu img { image-rendering: pixelated; border: 1px solid var(--kenar-guclu); }
.qr-bekleme { display: grid; place-items: center; gap: 8px; padding: 34px 0; color: var(--metin-3); }

/* Sihirbaz adımları */
.adim-cizgi { display: flex; align-items: center; gap: 0; margin-bottom: 14px; }
.adim {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--metin-3);
  font-weight: 600;
}
.adim-no {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--kenar-guclu); font-size: 10.5px; font-weight: 700;
}
.adim.aktif { color: var(--marka); }
.adim.aktif .adim-no { border-color: var(--marka); background: var(--marka); color: #fff; }
.adim.bitti { color: var(--basari); }
.adim.bitti .adim-no { border-color: var(--basari); background: var(--basari); color: #fff; }
.adim-ara { flex: 1; height: 1px; background: var(--kenar); margin: 0 8px; }

.kilavuz-liste { counter-reset: adim; display: flex; flex-direction: column; gap: 8px; }
.kilavuz-oge {
  display: flex; gap: 9px; font-size: 12.5px; line-height: 1.55;
}
.kilavuz-oge::before {
  counter-increment: adim; content: counter(adim);
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--marka) 14%, transparent); color: var(--marka);
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; margin-top: 1px;
}

/* Kanal türü kartı: üstte rozet + durum etiketi olan bir SATIR, altında ad ve
   açıklama. Kart bir zamanlar yatay (satır) kutuydu; içerik blokları yan yana
   dizilip her biri dar bir sütuna sıkışıyordu. */
.tur-karti {
  display: flex; flex-direction: column; gap: 0; padding: 12px; text-align: left; width: 100%;
  border: 1px solid var(--kenar); border-radius: var(--r); background: var(--kagit);
  transition: border-color .12s, background .12s;
}
.tur-karti:hover:not(:disabled) { border-color: var(--marka); background: var(--kagit-2); }
.tur-karti:disabled { opacity: .55; cursor: not-allowed; }
.tur-karti.secili { border-color: var(--marka);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marka) 22%, transparent); }

/* Kod / gizli değer alanı */
.kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: var(--kagit-3); border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk); padding: 7px 9px;
  overflow-x: auto; white-space: pre; color: var(--metin);
}
code.satirici {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; background: var(--ustu-2); padding: 1px 4px; border-radius: 4px;
}

/* Fatura yazdırma görünümü */
@media print {
  body { overflow: visible; background: #fff; }
  .ray, .ust, .yan-panel, .arac-cubugu, .yazdirma-gizle { display: none !important; }
  #uygulama { display: block; height: auto; }
  .perde { position: static; background: none; padding: 0; }
  .pencere { max-width: none; box-shadow: none; border: none; max-height: none; }
  .pencere-alt, .pencere-bas .dg { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. Giriş / kayıt sayfası
   -------------------------------------------------------------------------- */

body.giris-sayfasi { overflow: auto; background: var(--zemin); }

.giris-duzen {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .giris-duzen { grid-template-columns: 1fr 460px; }
}

.giris-tanitim {
  display: none;
  padding: 44px 48px;
  background:
    radial-gradient(1000px 520px at 12% -8%, rgba(6, 182, 212, .22), transparent 60%),
    radial-gradient(760px 460px at 88% 108%, rgba(37, 99, 235, .3), transparent 62%),
    var(--murekkep);
  color: #E2E8F0;
  flex-direction: column; justify-content: space-between;
}
@media (min-width: 940px) { .giris-tanitim { display: flex; } }
.giris-tanitim h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; line-height: 1.2;
  color: #fff; max-width: 15ch; }
.giris-tanitim p { color: #9BAAC0; font-size: 14px; line-height: 1.65; max-width: 44ch; margin-top: 12px; }
.tanitim-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.tanitim-oge { display: flex; gap: 11px; align-items: flex-start; }
.tanitim-ikon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  display: grid; place-items: center; color: var(--vurgu);
}
.tanitim-ikon svg { width: 15px; height: 15px; }
.tanitim-oge strong { display: block; color: #fff; font-size: 13.5px; font-weight: 600; }
.tanitim-oge span { font-size: 12.5px; color: #93A3B8; line-height: 1.55; }
.tanitim-kanallar { display: flex; gap: 6px; margin-top: 26px; flex-wrap: wrap; }

.giris-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 22px; background: var(--kagit);
  border-left: 1px solid var(--kenar);
}
.giris-kutu { width: 100%; max-width: 372px; margin: 0 auto; }
.giris-marka { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.giris-marka .ray-marka { margin: 0; width: 30px; height: 30px; font-size: 13px; }
.giris-marka span { font-size: 16px; font-weight: 700; letter-spacing: -.4px; }
.giris-kutu h2 { font-size: 20px; font-weight: 680; letter-spacing: -.4px; margin-bottom: 4px; }
.giris-kutu .alt-metin { color: var(--metin-2); font-size: 13px; margin-bottom: 18px; }
.giris-form { display: flex; flex-direction: column; gap: 12px; }
.giris-form .gd { height: 38px; font-size: 13.5px; }
.giris-form .dg { height: 38px; }
.giris-alt { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--metin-2); }
.giris-ayirac { display: flex; align-items: center; gap: 10px; margin: 16px 0;
  color: var(--metin-3); font-size: 11px; }
.giris-ayirac::before, .giris-ayirac::after { content: ""; flex: 1; height: 1px; background: var(--kenar); }
.parola-guc { display: flex; gap: 3px; margin-top: 4px; }
.parola-guc i { flex: 1; height: 3px; border-radius: 2px; background: var(--kenar); }
.parola-guc i.dolu-1 { background: var(--tehlike); }
.parola-guc i.dolu-2 { background: var(--sicak); }
.parola-guc i.dolu-3 { background: var(--basari); }

/* --------------------------------------------------------------------------
   16. Duyarlı düzen
   -------------------------------------------------------------------------- */

/* Geniş masaüstü: üç sütun tam genişlikte */
@media (min-width: 1600px) {
  :root { --liste-en: 372px; --panel-en: 348px; }
}

/* Tablet: sağ panel kayan katman olur */
@media (max-width: 1279px) {
  .gk.panel-acik { grid-template-columns: auto var(--liste-en) minmax(0, 1fr); }
  .gk .yan-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 336px; z-index: 60;
    box-shadow: var(--golge-menu);
  }
  .gk .yan-panel-bas { display: flex; }
  .gk { position: relative; }
  .bolme-yan { width: 200px; }
}

@media (max-width: 1023px) {
  :root { --liste-en: 300px; }
  .liste-sutun { width: 272px; }
}

/* Mobil: tek sütun, geri düğmesiyle gezinme */
@media (max-width: 767px) {
  :root { --ray-en: 0px; --ust-yukseklik: 48px; }

  #uygulama { grid-template-columns: 1fr; }
  .ray {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    flex-direction: row; justify-content: space-around;
    height: 54px; padding: 0 4px;
    border-right: none; border-top: 1px solid var(--ray-kenar);
    z-index: 70;
  }
  .ray-marka, .ray-ayirac, .ray-alt-grup { display: none; }
  .ray-dugme { width: 46px; height: 42px; }
  .ray-dugme.aktif::before { left: 50%; top: -1px; bottom: auto; transform: translateX(-50%);
    width: 22px; height: 2px; border-radius: 0 0 2px 2px; }
  .govde { grid-column: 1; padding-bottom: 54px; }

  .gk, .gk.panel-acik { grid-template-columns: 1fr; }
  .gk .sohbet-sutun { grid-column: 1; grid-row: 1; }
  .gk .akis-sutun { grid-column: 1; grid-row: 1; }
  .gk:not(.sohbet-secili) .akis-sutun { display: none; }
  .gk.sohbet-secili .sohbet-sutun { display: none; }

  .gk .yan-panel {
    position: fixed; inset: 0; width: auto; z-index: 90;
    border-left: none;
  }
  .gk .yan-panel-bas { display: flex; }
  .gk:not(.panel-acik) .yan-panel { display: none; }

  .balon { max-width: 88%; }
  .akis { padding: 10px 10px 4px; }

  .bolme { flex-direction: column; }
  .bolme-yan { width: auto; border-right: none; border-bottom: 1px solid var(--kenar);
    display: flex; overflow-x: auto; }
  .bolme-yan .yan-menu { flex-direction: row; }
  .bolme-yan .yan-menu button { white-space: nowrap; }

  .liste-sutun { width: 100%; }
  .liste-sutun.gizli-mobil { display: none; }

  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: minmax(0, 1fr); }
  .icerik { padding: 10px; }
  .ust-baslik { font-size: 14px; }
  .toast-yuva { left: 10px; right: 10px; bottom: 62px; max-width: none; }
  .pencere { max-height: calc(100dvh - 20px); }
  .arama-perde { padding-top: 0; }
  .arama-pencere { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .huni-ad { width: 88px; }
  .huni-sayi { width: 80px; }
}

/* Geri düğmesi yalnızca mobilde */
.geri-dg { display: none; }
@media (max-width: 767px) { .geri-dg { display: grid; } }

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

/* ==========================================================================
   17. Panel iskeleti — gerçek DOM yapısına göre

   Yukarıdaki bölümler tasarım aşamasında farklı bir sarmalayıcı adlandırması
   varsayıyordu (#uygulama / .govde). Panelin çizilen yapısı şu:

     body > .sayfa > nav.ray + .icerik
     .icerik > #seritler + .bolme
     .bolme  > (liste sütunu) + .bolme-ana + .yan-panel

   Bu bölüm o yapıyı bağlar. Sonda durduğu için önceki kuralları ezer.
   ========================================================================== */

html, body { height: 100%; }

.sayfa {
  display: grid;
  grid-template-columns: var(--ray-en) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.icerik {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.icerik > .bolme { flex: 1 1 auto; min-height: 0; }

/* Bölüm başlığı çubuğu her görünümün kendi içinde duruyor */
.bolme-ana > .ust,
.bolme-ana > .arac-cubugu {
  height: var(--ust-yukseklik);
  flex: none;
}

.bolme-ana > .kaydir { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.kaydir { overflow-y: auto; min-height: 0; }

/* --- Gelen kutusu sütunları --- */

.sohbet-sutun {
  width: var(--liste-en);
  flex: none;
  min-width: 0;
}

.yan-panel {
  width: var(--panel-en);
  flex: none;
}

.liste-ust-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--kenar);
  flex: none;
}
.liste-ust-bar .arama-kutu { flex: 1 1 auto; min-width: 0; }
.liste-ust-bar .arama-kutu .gd { width: 100%; height: 30px; }

.hizli-suzgecler {
  padding: 7px 9px;
  border-bottom: 1px solid var(--kenar);
  flex: none;
}
.hizli-suzgec.aktif {
  background: var(--murekkep);
  border-color: var(--murekkep);
  color: #fff;
}

/* Sohbet listesi satırındaki kanal noktası */
.kanal-rozet-nokta {
  position: absolute; right: -2px; bottom: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--kanal-renk, var(--marka));
  border: 2px solid var(--kagit);
}

/* --- Sol ray --- */

.ray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  overflow: visible;
}
.ray-marka { display: flex; align-items: center; justify-content: center; }
.ray-dugme { position: relative; }
.ray-rozet {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--tehlike); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}

/* --- Şeritler --- */

#seritler { flex: none; }
#seritler:empty { display: none; }
.serit {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--kenar);
}
.serit svg { flex: none; }
/* Metin kalan boşluğu alsın diye yazılmıştı ama şeritteki DÖNEN de bir
   <span>: kural ona da uyunca 14 pikselik halka 550 piksel genişleyip
   ekranda pervane gibi dönüyordu. Yükleniciyi dışarıda bırakıyoruz. */
.serit > span:not(.donen) { flex: 1 1 auto; }
.serit-bilgi    { background: color-mix(in srgb, var(--bilgi) 10%, var(--kagit)); color: var(--metin); }
.serit-uyari    { background: color-mix(in srgb, var(--uyari) 13%, var(--kagit)); color: var(--metin); }
.serit-tehlike  { background: color-mix(in srgb, var(--tehlike) 11%, var(--kagit)); color: var(--metin); }
.serit-basari   { background: color-mix(in srgb, var(--basari) 12%, var(--kagit)); color: var(--metin); }

/* --- Ayarlar yan menüsü --- */

.yan-menu {
  width: 208px; flex: none;
  border-right: 1px solid var(--kenar);
  background: var(--kagit);
  overflow-y: auto;
  padding: 8px 6px;
}
.yan-menu .menu-oge { width: 100%; border-radius: var(--r-kucuk); }
.yan-menu .menu-oge.aktif { background: var(--ustu-2); font-weight: 620; color: var(--marka); }

/* --- Kanal ekleme sihirbazı --- */

.adim-cizgi { display: flex; align-items: center; gap: 10px; }
.adim {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--metin-3);
}
.adim.aktif { color: var(--marka); font-weight: 620; }
.adim.tamam { color: var(--basari); }
.adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ustu-2); font-size: 10.5px; font-weight: 700; flex: none;
}
.adim.aktif .adim-no { background: var(--marka); color: #fff; }
.adim.tamam .adim-no { background: var(--basari); color: #fff; }

.tur-karti {
  text-align: left; padding: 12px;
  border: 1px solid var(--kenar); border-radius: var(--r);
  background: var(--kagit); transition: border-color .12s;
}
.tur-karti:hover:not(:disabled) { border-color: var(--marka); }
.tur-karti.kilitli { opacity: .55; cursor: not-allowed; }

/* .qr-kutu ve .qr-bekleme yukarıda, "QR penceresi" bölümünde tanımlıdır. */
.kilavuz-liste { display: flex; flex-direction: column; gap: 7px; }
.kilavuz-oge { display: flex; gap: 8px; align-items: flex-start; font-size: 12.8px; line-height: 1.55; }

/* --- Kartlar ve ızgara --- */

.izgara { display: grid; gap: 12px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara-oto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.kart {
  border: 1px solid var(--kenar); border-radius: var(--r);
  background: var(--kagit); overflow: hidden;
  display: flex; flex-direction: column;
}
.kart.aktif { border-color: var(--marka); }
.kart-bas {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-bottom: 1px solid var(--kenar);
}
.kart-govde { padding: 11px; flex: 1 1 auto; }
.kart-alt {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 11px; border-top: 1px solid var(--kenar); background: var(--kagit-2);
}

.olcum {
  border: 1px solid var(--kenar); border-radius: var(--r);
  background: var(--kagit); padding: 11px;
}
.olcum-ad { font-size: 11.5px; color: var(--metin-2); }
.olcum-deger { font-size: 22px; font-weight: 700; letter-spacing: -.6px; margin-top: 3px; }

.ilerleme { height: 5px; border-radius: 3px; background: var(--ustu-2); overflow: hidden; }
.veri-listesi { display: flex; flex-direction: column; }

/* Liste satırı: solda esneyen metin sütunu, sağda düğmeler.
   .oneri-oge ile karıştırmayın — o, yazma alanındaki "/" menüsünün öğesidir ve
   dikey yığındır; satır olarak kullanılırsa düğmeler alt alta tam genişlik olur. */
.liste-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--kenar);
  min-width: 0;
}
.liste-satir:last-child { border-bottom: 0; }
.liste-satir > .dikey { gap: 2px; }

/* Satır bir <button> ise: düğme varsayılanları (daralma, ortalama, kendi
   arka planı ve yazı tipi) sıfırlanmazsa satır listenin ortasında küçük bir
   kutuya döner. Aynı hata sohbet listesinde de yaşanmıştı. */
button.liste-satir {
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--kenar);
  border-radius: 6px; cursor: pointer;
}
button.liste-satir:hover { background: var(--kagit-2); }
button.liste-satir:last-child { border-bottom: 0; }
.tablo-sarmal { overflow: auto; }
.tablo th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--metin-2); padding: 7px 9px; border-bottom: 1px solid var(--kenar); white-space: nowrap; }
.tablo td { padding: 8px 9px; border-bottom: 1px solid var(--kenar); font-size: 12.5px; }
.tablo tr.tiklanir { cursor: pointer; }
.tablo tr.tiklanir:hover { background: var(--kagit-2); }

.esnek { display: flex; align-items: center; }
.esnek-arasi { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.merkez { display: flex; align-items: center; justify-content: center; }
.gorunmez { display: none !important; }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalin { font-weight: 620; }
.kucuk { font-size: 11.5px; }
.sonuk { color: var(--metin-2); }
.sayisal { font-variant-numeric: tabular-nums; }
.renk-gd { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--kenar-guclu);
  border-radius: var(--r-kucuk); background: var(--kagit); cursor: pointer; }
.ipucu { font-size: 11px; color: var(--metin-3); line-height: 1.45; }
.bolum-bas { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--metin-2); margin-bottom: 7px; }
.kod { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; background: var(--kagit-3); padding: 3px 6px; border-radius: 4px; }
.donen {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--kenar-guclu); border-top-color: var(--marka);
  border-radius: 50%; animation: don .7s linear infinite;
  /* Esnek bir kapsayıcı içinde asla büyümesin ya da ezilmesin. */
  flex: none;
}
@keyframes don { to { transform: rotate(360deg); } }

/* --- Giriş ekranı --- */

.giris-govde { overflow: auto; }
.giris-duzen { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.giris-tanitim { background: var(--ray); color: #E6EDF6; padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center; }
.giris-panel { display: flex; align-items: center; justify-content: center; padding: 32px 24px; }

/* --- Duyarlı --- */

@media (max-width: 1180px) {
  .yan-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 40;
    box-shadow: var(--golge-menu); transform: translateX(100%); transition: transform .18s; }
  .panel-acik .yan-panel { transform: none; }
  .yan-panel-bas { display: flex; }
  .icerik { position: relative; }
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sayfa { grid-template-columns: 48px 1fr; }
  .sohbet-sutun { width: 100%; }
  .akis-sutun { display: none; }
  .sohbet-acik .sohbet-sutun { display: none; }
  .sohbet-acik .akis-sutun { display: flex; }
  .yan-panel { width: 100%; }
  .yan-menu { width: 64px; }
  .yan-menu .menu-oge span { display: none; }
  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: minmax(0, 1fr); }
  .giris-duzen { grid-template-columns: 1fr; }
  .giris-tanitim { display: none; }
  .geri-dg { display: inline-flex !important; }
}

.geri-dg { display: none; }

/* ==========================================================================
   Kanallar sayfası — tür rayı + bağlı kanallar

   Eskiden üst çubukta "Kanal ekle" düğmesi ve ızgarada kesikli "bağla"
   kartları vardı; aynı iş iki yerden yapılıyordu ve hangi kanalların var
   olduğu ancak düğmeye basınca görünüyordu. Şimdi türler solda sabit
   duruyor, bağlananlar sağda birikiyor.
   ========================================================================== */

.kanal-duzen {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;              /* çocukların kendi kaydırması çalışsın */
}

.kanal-ray {
  flex: 0 0 264px;
  border-left: 1px solid var(--kenar);
  background: var(--kagit-2);
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ray-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 0 4px;
  font-weight: 600; font-size: 13px;
}

.ray-liste { display: flex; flex-direction: column; gap: 4px; }

.ray-satir {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px;
  border: 1px solid transparent; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.ray-satir:hover:not(.kilitli) {
  background: color-mix(in srgb, var(--marka) 7%, transparent);
  border-color: color-mix(in srgb, var(--marka) 30%, var(--kenar));
}
.ray-satir:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; }
.ray-satir.kilitli { opacity: .5; cursor: not-allowed; }

/* Rozet ray içinde yalnızca simge taşıyor; metin satırın kendisinde. */
.ray-satir .kanal-rozet { flex: none; padding: 5px; }

.ray-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
/* Ad kesilmiyor, sarıyor: "WhatsApp Business (Cloud API)" gibi uzun
   adlar üç noktayla bitince hangi kanal olduğu anlaşılmıyordu. */
.ray-ad {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 550; line-height: 1.3;
}
.ray-sayi {
  flex: none; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--marka) 15%, transparent);
  color: var(--marka);
  font-variant-numeric: tabular-nums;
}
.ray-not { font-size: 11.5px; color: var(--metin-3); }
.ray-arti { flex: none; opacity: .45; display: flex; }
.ray-satir:hover:not(.kilitli) .ray-arti { opacity: 1; color: var(--marka); }

.kanal-govde { flex: 1 1 auto; padding: 14px; min-width: 0; }

/* Dar ekranda ray üste geçer ve yatay kaydırılır. */
@media (max-width: 760px) {
  .kanal-duzen { flex-direction: column; }
  .kanal-ray {
    /* Dar ekranda ray üste alınıyor: telefonda önce "ne ekleyebilirim"
       görünsün, kanal kartları altında kalsın. */
    order: -1;
    flex: none; width: auto;
    border-left: 0; border-bottom: 1px solid var(--kenar);
    padding: 10px;
  }
  .ray-liste { flex-direction: row; overflow-x: auto; gap: 6px; }
  .ray-satir { flex: 0 0 auto; }
  .ray-not, .kanal-ray .ipucu { display: none; }
}

/* --------------------------------------------------------------------------
   Gönderi yorumları şeridi

   Yorum yanıtı HERKESE AÇIK; DM ise özel. Bu ayrım görünmezse temsilci
   özel sandığı bir cevabı bütün takipçilerin gördüğü yere yazar. Uyarı
   bu yüzden bir kerelik bildirim değil, sohbet açık kaldığı sürece
   akışın üstünde duran sabit bir şerit.
   -------------------------------------------------------------------------- */

.yorum-serit {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--uyari-metin, #92400e);
  background: color-mix(in srgb, var(--uyari, #F59E0B) 14%, var(--kagit));
  border-bottom: 1px solid color-mix(in srgb, var(--uyari, #F59E0B) 35%, var(--kenar));
}
.yorum-serit svg { flex: none; }
.yorum-serit strong { font-weight: 650; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .yorum-serit { color: #F3C77B; }
}
:root[data-tema="koyu"] .yorum-serit { color: #F3C77B; }

/* --------------------------------------------------------------------------
   Yorum akışı

   Sohbet balonu değil, iç içe liste. Bir gönderinin altında birden çok
   kişi konuşuyor; balonlarla çizilince kimin kime cevap verdiği kayboluyor.
   Yanıtlar girintili, yanıtlanmamış yorumlar sol kenarından işaretli —
   asıl dert "yorumları gözden kaçırıyoruz" olduğu için görsel öncelik
   orada.
   -------------------------------------------------------------------------- */

.yorum-oge {
  padding: 12px 14px;
  border-bottom: 1px solid var(--kenar);
}
/* Yanıt bekleyen yorum: sol kenarda turuncu şerit. Renk tek başına
   taşımıyor — yanında "yanıt bekliyor" rozeti de var. */
.yorum-oge.bekliyor {
  border-left: 3px solid var(--uyari, #F59E0B);
  background: color-mix(in srgb, var(--uyari, #F59E0B) 5%, transparent);
}

.yorum-satir { display: flex; gap: 10px; align-items: flex-start; }
.yorum-satir + .yorum-satir { margin-top: 10px; }
.yorum-satir .mesaj-avatar { flex: none; }

.yorum-govde { flex: 1 1 auto; min-width: 0; }

.yorum-bas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.yorum-ad { font-weight: 600; font-size: 13px; }
.yorum-saat { font-size: 11.5px; color: var(--metin-3); font-variant-numeric: tabular-nums; }

.yorum-metin { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }

/* Yanıtlar girintili ve solda ince bir çizgiyle bağlı — hangi yoruma ait
   olduğu konum olarak belli olsun, renkle değil. */
.yorum-yanitlar {
  margin: 10px 0 0 34px;
  padding-left: 12px;
  border-left: 2px solid var(--kenar);
  display: flex; flex-direction: column; gap: 10px;
}

/* Kendi yanıtımız sağa kaymıyor: yorumda taraf yok, sıra var. Dolgulu
   bir kutu da değil — yanıtlar zaten girintili ve "yanıtınız" rozeti
   taşıyor; üstüne zemin eklemek akışı bloklara bölüp okumayı zorlaştırdı.
   Ayrımı ince bir sol vurgu veriyor. */
.yorum-satir.bizim {
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--marka) 55%, transparent);
  margin-left: -10px;
}
.yorum-satir.bizim .yorum-ad { color: var(--marka); }

.yorum-eylem {
  display: flex; gap: 6px; align-items: center; margin-top: 6px;
  opacity: 0; transition: opacity .12s;
}
.yorum-satir:hover .yorum-eylem,
.yorum-satir:focus-within .yorum-eylem { opacity: 1; }
/* Dokunmatikte hover yok; eylemler hep görünür. */
@media (hover: none) {
  .yorum-eylem { opacity: 1; }
}

/* Yanıt hedefi şeridi — yorum akışında yazma kutusunun üstünde.
   Bu bir "alıntı" değil: yazdığınız şey TAM OLARAK bu yorumun altına,
   herkese açık düşecek. O yüzden gizlenebilir bir süs değil, kalıcı ve
   okunur bir denetim. */
.yanit-hedef {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--marka) 8%, transparent);
  border-left: 3px solid var(--marka);
  font-size: 13px;
}
.yanit-hedef.bos {
  background: color-mix(in srgb, var(--uyari, #F59E0B) 12%, transparent);
  border-left-color: var(--uyari, #F59E0B);
}
.yanit-hedef svg { flex: none; }
.yanit-hedef-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.yanit-hedef-metin .tek-satir { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Kanal sütunu

   Hat seçimi çip şeridinden kendi sütununa taşındı. Sekiz hesapla çip
   şeridi taşıyordu; üstelik hemen altındaki durum süzgeçleriyle aynı
   biçimde çizildiği için kullanıcı "hesap seçimi" ile "sohbet durumu"nu
   tek küme sanıyordu.

   Genişlik 208px ve DARALTILABİLİR: dört sütun 1366px laptopta sohbete
   yer bırakmıyor. Daraltınca 52px'e iner, yalnızca simgeler kalır.
   -------------------------------------------------------------------------- */

.kanal-sutun {
  grid-column: 1;
  width: 208px;
  display: flex; flex-direction: column;
  background: var(--kagit-2);
  border-right: 1px solid var(--kenar);
  min-height: 0;
  transition: width .14s ease;
}
.kanal-sutun.gizli { display: none; }
.kanal-sutun.kapali { width: 52px; }
.kanal-sutun.kapali .kanal-satir-metin,
.kanal-sutun.kapali .kanal-sutun-grup,
.kanal-sutun.kapali .kanal-sutun-baslik,
.kanal-sutun.kapali .kanal-sutun-temizle { display: none; }
.kanal-sutun.kapali .kanal-satir { justify-content: center; padding: 8px 4px; }
/* Daraltılmışken sayı simgenin köşesine iner. */
.kanal-sutun.kapali .kanal-satir-sayi {
  position: absolute; top: 2px; right: 4px;
  min-width: 15px; padding: 0 3px; font-size: 9.5px; line-height: 15px;
}
.kanal-sutun.kapali .kanal-satir { position: relative; }

.kanal-sutun-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 8px 8px 8px 10px;
  border-bottom: 1px solid var(--kenar);
  flex: none;
}
.kanal-sutun-baslik { font-size: 12px; font-weight: 650; letter-spacing: .01em; }

.kanal-sutun-govde { flex: 1 1 auto; overflow-y: auto; padding: 6px; min-height: 0; }

.kanal-sutun-grup {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
  padding: 12px 6px 5px;
}

.kanal-satir {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 7px 8px; border-radius: 7px;
  color: inherit; font: inherit;
  border: 1px solid transparent;
}
.kanal-satir:hover { background: var(--kagit-3, color-mix(in srgb, var(--marka) 6%, transparent)); }
.kanal-satir.aktif {
  background: color-mix(in srgb, var(--marka) 14%, transparent);
  border-color: color-mix(in srgb, var(--marka) 34%, transparent);
}
.kanal-satir:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; }

.kanal-satir-ikon {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--kanal-renk, var(--notr));
  color: #fff;
}

.kanal-satir-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kanal-satir-ad {
  font-size: 12.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanal-satir-alt { font-size: 10.5px; color: var(--metin-3); }

.kanal-satir-sayi {
  flex: none; min-width: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--marka); color: #fff;
  font-size: 10.5px; font-weight: 650; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.kanal-sutun-temizle {
  margin: 6px; justify-content: center; flex: none;
}

/* Dar ekranda sütun tamamen kalkar; hat seçimi soldaki rayda zaten var. */
@media (max-width: 1100px) {
  .kanal-sutun { display: none; }
}

/* Açık süzgeç göstergesi — huni düğmesindeki nokta ve liste üstündeki
   kaldırılabilir çipler. Süzgeç uygulanınca liste kısalıyor; NEDEN
   kısaldığı görünmezse kullanıcı sistemi bozuk sanıyor. */
.dg.dg-etkin { position: relative; color: var(--marka); }
.suzgec-nokta {
  position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--marka); border: 1.5px solid var(--kagit);
}

.suzgec-serit {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 7px 9px;
  border-bottom: 1px solid var(--kenar);
  background: color-mix(in srgb, var(--marka) 5%, transparent);
  flex: none;
}
.suzgec-cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 99px;
  font-size: 11.5px; font-weight: 550;
  background: color-mix(in srgb, var(--marka) 16%, transparent);
  color: var(--marka);
  border: 1px solid color-mix(in srgb, var(--marka) 32%, transparent);
}
.suzgec-cip:hover { background: color-mix(in srgb, var(--marka) 26%, transparent); }

/* --------------------------------------------------------------------------
   Yorum akışında gönderi kartı

   Yan panelin başında, kişi kartının yerinde durur. Tek işi var: "bu yorum
   hangi paylaşımın altında?" sorusunu bakışta yanıtlamak. Öncesinde yalnızca
   gönderinin adı yazıyordu ve temsilci paylaşımı Instagram'da elle arıyordu.
   -------------------------------------------------------------------------- */
.gonderi-karti {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 11px 12px; border-bottom: 1px solid var(--kenar);
}

/* Kare çerçeve: kapak 256×256 kırpılmış geliyor, oran sabit olunca kart
   görsel inmeden önce de aynı yeri kaplıyor — yükleyince liste zıplamıyor. */
.gonderi-gorsel {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: 1px solid var(--kenar); border-radius: var(--r-buyuk);
  overflow: hidden; background: var(--kagit-3); line-height: 0;
}
.gonderi-gorsel.tiklanir { cursor: zoom-in; }
.gonderi-gorsel.tiklanir:hover { border-color: var(--kenar-guclu); }
.gonderi-gorsel.tiklanir:hover .gonderi-kapak { transform: scale(1.03); }

.gonderi-kapak {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .18s ease;
}
.gonderi-kapak-yok {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--metin-3); line-height: 1.4; text-align: center; padding: 8px;
}

/* Tür rozeti kapağın üstünde: koyu/açık her fotoğrafta okunması için kendi
   perdesini taşıyor, temaya bağlı değil. */
.gonderi-tur {
  position: absolute; left: 7px; bottom: 7px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(11, 18, 32, .72); color: #FFFFFF;
  font-size: 11px; font-weight: 650; letter-spacing: .1px; line-height: 1.6;
  backdrop-filter: blur(3px);
}

/* Açıklama kırpılı başlar; tıklayınca tamamı açılır. Instagram açıklamaları
   çoğu zaman etiket yığını — kapanmazsa kartın altındaki her şeyi aşağı itiyor. */
.gonderi-aciklama {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--metin-2);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.gonderi-aciklama.acik { -webkit-line-clamp: unset; line-clamp: unset; }
.gonderi-aciklama.sonuk { color: var(--metin-3); cursor: default; font-style: italic; }

.gonderi-karti > .dg { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   E-posta klasörleri

   Hat sütununun içinde, seçili e-posta kanalının altında. 56 klasörü birden
   listelemek sütunu boğduğu için özel olanlar (gelen, spam, çöp) her zaman
   görünür, kullanıcının kendi etiketleri katlanmış durur.
   -------------------------------------------------------------------------- */
.klasor-satir .kanal-satir-ikon {
  background: transparent;
  color: var(--metin-3);
}
.klasor-satir .kanal-satir-ad { font-weight: 500; }
.klasor-satir.aktif .kanal-satir-ikon { color: var(--marka); }

/* Etiket listesini açan satır — bir klasör değil, bir kontrol. */
.klasor-ac .kanal-satir-ikon { background: transparent; color: var(--metin-3); }
.klasor-ac .kanal-satir-ad { font-size: 12px; color: var(--metin-2); }

/* Taşıma penceresindeki klasör seçici. */
.klasor-secim {
  margin-top: 8px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--kenar); border-radius: var(--r);
  background: var(--kagit-2);
}
.klasor-secenek {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--metin); text-align: left;
  border-bottom: 1px solid var(--kenar);
}
.klasor-secenek:last-child { border-bottom: 0; }
.klasor-secenek:hover { background: var(--ustu); }
.klasor-secenek.aktif { background: var(--ray-aktif-zemin); color: var(--metin); font-weight: 600; }
.klasor-secenek svg { flex: none; color: var(--metin-3); }
.klasor-secenek.aktif svg { color: var(--marka); }
.klasor-secenek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   E-posta klasör sütunu

   Kendi kolonu. "Hatlar"ın altına sıkıştırılmıştı: hem dar kalıyordu hem de
   hat listesiyle karışıyordu, üstelik sürükle-bırak hedefi olarak dar bir
   şeride nişan almak zor.
   -------------------------------------------------------------------------- */
.klasor-sutun {
  display: flex; flex-direction: column; min-height: 0;
  width: 216px; flex: none;
  background: var(--kagit-2);
  border-right: 1px solid var(--kenar);
}
.klasor-sutun.gizli { display: none; }
.klasor-sutun.kapali { width: 52px; }
.klasor-sutun.kapali .klasor-satir-ad,
.klasor-sutun.kapali .kanal-sutun-baslik,
.klasor-sutun.kapali .kanal-sutun-grup,
.klasor-sutun.kapali .klasor-ipucu { display: none; }
.klasor-sutun.kapali .klasor-satir { justify-content: center; padding: 8px 0; }

.klasor-sutun-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 10px; border-bottom: 1px solid var(--kenar); flex: none;
  min-height: var(--ust-yukseklik);
}

.klasor-arama {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 9px; border-bottom: 1px solid var(--kenar);
  color: var(--metin-3);
}
.klasor-arama input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 12px; color: var(--metin);
}
.klasor-arama input::placeholder { color: var(--metin-3); }

.klasor-sutun-govde { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 6px 10px; }

.klasor-satir {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: var(--r);
  background: none; cursor: pointer; font: inherit; text-align: left;
  color: var(--metin-2);
}
.klasor-satir:hover { background: var(--ustu); color: var(--metin); }
.klasor-satir.aktif { background: var(--ray-aktif-zemin); color: var(--metin); font-weight: 600; }
.klasor-satir-ikon { flex: none; display: flex; color: var(--metin-3); }
.klasor-satir.aktif .klasor-satir-ikon { color: var(--marka); }
.klasor-satir-ad {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sürükleme hedefi — bırakılabilir olduğu net görünmeli. */
.klasor-satir.birak-hedef {
  background: var(--ray-aktif-zemin);
  outline: 2px dashed var(--marka); outline-offset: -2px;
  color: var(--metin);
}

.klasor-ipucu {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 10px; border-top: 1px solid var(--kenar);
  font-size: 11.5px; line-height: 1.45; color: var(--metin-2);
  background: var(--kagit-3);
}
.klasor-ipucu svg { flex: none; color: var(--marka); }

/* --------------------------------------------------------------------------
   Çoklu seçim
   -------------------------------------------------------------------------- */

/* Onay kutusu AVATARIN TAMAMINI kaplar.

   Önce satırın soluna 17px'lik bir kare olarak konmuştu; avatarın köşesine
   biniyor ve dağınık duruyordu. Gmail'in deseni doğru olan: satırın üstüne
   gelince avatar yerini onay dairesine bırakır, tıklama alanı avatar kadar
   büyük olur. */
.sohbet-sec {
  /* Avatarın TAM üstünde ama biraz içeride ve YUVARLAK.
     Önce köşesine binen 17px'lik bir kareydi — dağınıktı. Sonra avatarı
     birebir kaplayan 38px'lik dolu bir kare oldu; bu sefer birkaç satır
     seçilince ekran mavi bloklarla doldu. Ortası: 28px yuvarlak. Tıklama
     hedefi hâlâ rahat, görsel ağırlık üçte bir. */
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--kagit-3); border: 1.5px solid var(--kenar-guclu);
  display: flex; align-items: center; justify-content: center;
  color: var(--metin-3);
  opacity: 0; transition: opacity .12s ease; cursor: pointer;
  z-index: 2;
}
.sohbet-oge { position: relative; }
.sohbet-oge:hover .sohbet-sec { opacity: 1; }
.sohbet-sec.isaretli {
  opacity: 1;
  background: var(--marka); border-color: var(--marka); color: #FFFFFF;
}
/* Seçiliyken kanal rozeti onay dairesinin altında kalmasın. */
.sohbet-sec.isaretli ~ .kanal-rozet { display: none; }
.sohbet-oge.secili { background: var(--ray-aktif-zemin); }
.sohbet-oge.secili:hover { background: var(--ray-aktif-zemin); }
/* Seçiliyken satır sürüklenebilir; imleç bunu söylesin. */
.sohbet-oge.secili { cursor: grab; }
.sohbet-oge.secili:active { cursor: grabbing; }

.secim-serit {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; margin: 0 0 6px;
  background: var(--ray-aktif-zemin); border-radius: var(--r);
  flex-wrap: wrap;
}
.secim-sayi { font-size: 12.5px; font-weight: 650; color: var(--metin); }
.secim-eylemler { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

@media (max-width: 1280px) {
  /* Dar ekranda dördüncü sütun sohbeti boğuyor. */
  .klasor-sutun { display: none; }
}

/* Başlık araç çubuğunda e-posta işlemlerini genel işlemlerden ayıran çizgi. */
.arac-ayrac {
  width: 1px; height: 18px; flex: none;
  background: var(--kenar); margin: 0 3px;
}

/* --------------------------------------------------------------------------
   HTML e-posta gövdesi

   Ayrı bir belge (sandbox iframe) olduğu için dışarıdan biçimlendirilemiyor;
   yalnızca çerçevenin kendisi konumlandırılıyor.
   -------------------------------------------------------------------------- */
.eposta-govde { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.eposta-cerceve {
  /* `height` JS'ten içeriğe göre yazılıyor. Buradaki değer yalnızca ölçüm
     yetişene kadar geçerli: iframe'in tarayıcı varsayılanı 150px ve o
     yükseklikte her mail çift kaydırma çubuğuyla sıkışık görünüyordu. */
  width: 100%; height: 320px; min-height: 80px;
  border: 0; border-radius: var(--r);
  background: #FFFFFF; display: block;
  /* Küçültme sonrası artık gerek yok; çıkarsa da kaydırma çerçevenin
     kendisinde değil sayfada olsun. */
  overflow: hidden;
}

/* Uzak görsel uyarısı — gizlilik kararı görünür olmalı, sessizce
   engellemek "mail bozuk" izlenimi veriyor. */
.eposta-uyari {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 9px; border-radius: var(--r);
  background: var(--kagit-3); border: 1px solid var(--kenar);
  font-size: 11.5px; line-height: 1.45; color: var(--metin-2);
}
.eposta-uyari svg { flex: none; color: var(--metin-3); }
.eposta-uyari .dg { margin-left: auto; }

/* Sınıra dayanan mailde çıkar; kırpmanın sessiz kalmaması için. */
.eposta-genislet { align-self: center; }
.eposta-genislet[hidden] { display: none; }

/* HTML gövdeli baloncuk ALANIN TAMAMINI kullanır. Sohbet baloncuğu
   mantığı (dar sütun, sağa/sola yaslı) e-postada işe yaramıyor: mailler
   sabit genişlikli tablolarla geliyor, dar baloncukta ya yatay kayıyor ya
   da çok küçülüp okunmaz oluyordu. Panelin sağındaki boşluk da boşa
   gidiyordu.

   `flex: 1 1 auto` + `max-width: none`: baloncuk satırdaki artan yeri
   alır, eylem simgelerine (`flex: none`) dokunmaz. */
.mesaj-satir:has(.eposta-govde) { align-items: flex-start; position: relative; }
.balon:has(.eposta-govde) { flex: 1 1 auto; max-width: none; min-width: 0; }

/* Eylem simgeleri e-postada baloncuğun ÜST KÖŞESİNE biner.
   Satırda yan yana dururken 133px'lik bir sütun yiyorlardı; geniş panelde
   o yer maile lazım. Yalnızca imleç satırın üzerindeyken göründükleri için
   mailin içeriğini kalıcı olarak kapatmıyorlar. */
.mesaj-satir:has(.eposta-govde) .mesaj-eylemler {
  position: absolute; top: 6px; right: 8px; z-index: 2; margin-top: 0;
}
.mesaj-satir:has(.eposta-govde) .mesaj-eylemler button {
  /* Mailin beyaz zemini üzerinde de seçilebilsin. */
  background: var(--kagit); border-color: var(--kenar-guclu);
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}

/* Uyarı çubuğu baloncuğun EN ÜSTÜNDE ve düğmesi sağa yaslı; üste binen
   eylem simgeleri tam onun üzerine geliyordu ve "Görselleri göster"e
   tıklanamıyordu — imleç oradayken simgeler zaten görünür oluyor.
   Simgelere yer ayrılıyor: en fazla 5 düğme × 24px + aralıklar + kenar. */
.mesaj-satir:has(.eposta-govde) .eposta-uyari { padding-right: 145px; }

/* Çeviri istenip yapılamadığında baloncukta kalıcı iz. Tek seferlik bildirim
   yetmiyor: kullanıcı sonradan sohbete baktığında hangi mesajın çevrilmeden
   gittiğini görebilmeli. */
.ceviri-uyari {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; font-size: 10.5px; line-height: 1.4;
  color: var(--sicak-metin);
}
.ceviri-uyari svg { flex: none; }

/* --------------------------------------------------------------------------
   Mesajlarda çoklu seçim

   Tek tek iletmek hem yavaştı hem de karşı tarafta sıra karışıyordu.
   -------------------------------------------------------------------------- */
/* Onay kutusu baloncuğun YANINDA, üstünde değil.

   Önce mutlak konumla baloncuğun sol üstüne biniyordu ve metni kapatıyordu
   ("tamamdır" yazısının yarısı görünmüyordu). Satır zaten flex; kutuyu
   sıradan bir öğe yapmak yeterli — `row-reverse` sayesinde giden mesajlarda
   kendiliğinden sağa geçiyor.

   Yer HER ZAMAN ayrılıyor (görünmezken bile): yalnızca imleç üstündeyken
   yer kaplasaydı baloncuklar her hover'da yana kayardı. */
.mesaj-sec {
  flex: none; width: 20px; height: 20px; align-self: center;
  border-radius: 50%; padding: 0;
  border: 1.5px solid var(--kenar-guclu); background: var(--kagit);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; opacity: 0; transition: opacity .12s ease; cursor: pointer;
}
.mesaj-satir:hover .mesaj-sec { opacity: 1; }
.mesaj-sec.isaretli { opacity: 1; background: var(--marka); border-color: var(--marka); }

/* Seçili satır: baloncuk değil SATIR vurgulanıyor, metin okunur kalsın. */
.mesaj-satir.secili { background: var(--ray-aktif-zemin); border-radius: var(--r); }

/* Şerit akışın üstüne yapışır: uzun sohbette kaydırınca kaybolmasın. */
.mesaj-secim-serit {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--kagit); border: 1px solid var(--marka);
  border-radius: var(--r); box-shadow: var(--golge-menu);
  flex-wrap: wrap;
}