/* ══════════════════════════════════════════════════════════════
   FunnelX — yayın platformu arayüzü
   Üç sütun: gezinme · akış · istatistik
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --zemin:    #101014;
  --yuzey:    #1a1a21;
  --yuzey2:   #22222b;
  --yuzey3:   #2b2b36;
  --kenar:    #2a2a34;
  --kenar2:   #3a3a47;

  --tur:      #ff5c28;
  --tur2:     #ff7a45;
  --tur-akis: linear-gradient(135deg, #ff6b35 0%, #ff4500 100%);
  --tur-is:   rgba(255, 92, 40, .32);

  --canli:    #ef2b2b;
  --yesil:    #22c55e;
  --sari:     #f5b02e;
  --mavi:     #3b82f6;
  --mor:      #a855f7;

  --metin:    #ffffff;
  --metin2:   #9b9bab;
  --metin3:   #6a6a7a;

  --yazi: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tek:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r:  16px;
  --r2: 12px;
  --r3: 10px;
  --gec: 170ms cubic-bezier(.33, 1, .68, 1);
  --yay: 400ms cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--yazi);
  background: var(--zemin);
  color: var(--metin);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 14% 10%, rgba(255, 92, 40, .09), transparent 62%),
    radial-gradient(34% 30% at 88% 14%, rgba(168, 85, 247, .07), transparent 62%),
    radial-gradient(40% 34% at 64% 96%, rgba(239, 43, 43, .06), transparent 62%);
  animation: aurora 42s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(3%, -2.5%, 0) scale(1.06); } }

:focus-visible { outline: 2px solid var(--tur); outline-offset: 2px; border-radius: 6px; }

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

.tek, .pano-deger, .olcum-deger, .metre-deger, .sayi {
  font-family: var(--tek);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kenar2); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a59; }

/* ═══════════════════ Giriş ekranı ═══════════════════ */

.giris-sayfa {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(760px 420px at 50% -12%, rgba(255, 92, 40, .14), transparent 62%),
    var(--zemin);
}

.giris-kutu { width: 100%; max-width: 420px; animation: gir var(--yay) both; }
@keyframes gir { from { opacity: 0; transform: translateY(16px); } }

.marka { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.marka-ad { font-size: 36px; font-weight: 800; letter-spacing: -.045em; }
.marka-ad::first-letter { color: var(--tur); }
.marka-sur {
  font-family: var(--tek);
  font-size: 10.5px;
  color: var(--metin3);
  letter-spacing: .1em;
  padding: 3px 8px;
  background: var(--yuzey);
  border-radius: 100px;
}
.giris-alt { color: var(--metin2); margin-bottom: 28px; font-size: 14.5px; }

.giris-panel {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 20px;
  padding: 26px 24px 24px;
}

.sekmeler {
  display: flex;
  gap: 4px;
  background: var(--zemin);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 22px;
}
.sekme {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: var(--metin3);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--gec);
}
.sekme:hover { color: var(--metin2); }
.sekme.secili { background: var(--tur-akis); color: #fff; box-shadow: 0 4px 16px var(--tur-is); }

/* ═══════════════════ Form ═══════════════════ */

.alan { margin-bottom: 16px; }
.alan:last-child { margin-bottom: 0; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--metin2); margin-bottom: 8px; }

input[type=text], input[type=password], input[type=number],
input[type=url], textarea, select {
  width: 100%;
  padding: 12px 14px;
  background: var(--zemin);
  border: 1px solid var(--kenar);
  border-radius: var(--r2);
  color: var(--metin);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--gec), box-shadow var(--gec);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--tur);
  box-shadow: 0 0 0 3px rgba(255, 92, 40, .12);
}
input::placeholder, textarea::placeholder { color: var(--metin3); }
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
select { cursor: pointer; }
input.tek, textarea.tek { font-family: var(--tek); font-size: 13px; }

.ipucu { font-size: 12px; color: var(--metin3); margin-top: 7px; line-height: 1.5; }

/* ═══════════════════ Düğmeler ═══════════════════ */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--yuzey2);
  color: var(--metin);
  border: 0;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--gec);
}
.dugme:hover:not(:disabled) { background: var(--yuzey3); }
.dugme:disabled { opacity: .4; cursor: not-allowed; }
.dugme.tam { width: 100%; padding: 13px; }

/* Birincil — turuncu */
.dugme:not(.ikincil):not(.sade):not(.tehlike):not(.olumlu) {
  background: var(--tur-akis);
  color: #fff;
  box-shadow: 0 4px 16px var(--tur-is);
}
.dugme:not(.ikincil):not(.sade):not(.tehlike):not(.olumlu):hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px var(--tur-is);
}

.dugme.ikincil { background: var(--yuzey2); }
.dugme.sade { background: transparent; color: var(--metin2); }
.dugme.sade:hover:not(:disabled) { background: var(--yuzey2); color: var(--metin); }
.dugme.tehlike { background: rgba(239, 43, 43, .14); color: #ff8080; }
.dugme.tehlike:hover:not(:disabled) { background: rgba(239, 43, 43, .22); }
.dugme.olumlu { background: rgba(34, 197, 94, .14); color: #5ee08a; }
.dugme.kucuk { padding: 7px 14px; font-size: 12.5px; }

.dugme.yayin-ac {
  padding: 13px 26px;
  font-size: 14.5px;
  font-weight: 700;
  background: var(--tur-akis);
  box-shadow: 0 6px 24px var(--tur-is);
}
.dugme.yayin-ac:hover:not(:disabled) { transform: translateY(-1px); }

/* ═══════════════════ Uyarılar ═══════════════════ */

.uyari {
  padding: 13px 16px;
  border-radius: var(--r2);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: none;
}
.uyari.goster { display: block; }
.uyari.hata   { background: rgba(239,43,43,.11);  color: #ff9a9a; }
.uyari.basari { background: rgba(34,197,94,.11);  color: #6ee6a0; }
.uyari.bilgi  { background: rgba(59,130,246,.11); color: #9cc3ff; }
.uyari.dikkat { background: rgba(245,176,46,.11); color: #ffd279; }
.uyari b { font-weight: 700; color: #fff; }

/* ═══════════════════ Üç sütunlu iskelet ═══════════════════ */

.uyg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  min-height: 100vh;
  padding: 14px 14px 14px 252px;
}
.uyg.iki-sutun { grid-template-columns: minmax(0, 1fr); }
.uyg.tek-sutun { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
.uyg.tek-sutun .govde { max-width: 1280px; margin: 0 auto; width: 100%; }

/* ── Sol: uçan gezinme ── */

.yan {
  position: fixed;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 224px;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
/* Üstte ince ışık çizgisi — yüzeyi kaldırır */
.yan::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

.yan-bas { padding: 20px 18px 14px; }
.yan-marka { display: flex; align-items: center; gap: 10px; }
.yan-marka b { font-size: 20px; font-weight: 800; letter-spacing: -.045em; }
.yan-marka span {
  font-family: var(--tek);
  font-size: 9.5px;
  color: var(--metin3);
  border: 1px solid var(--kenar2);
  border-radius: 100px;
  padding: 1px 6px;
  align-self: center;
}

/* Marka işareti — tek giriş, çok çıkış */
.marka-im { flex-shrink: 0; display: block; }
.marka-im .giris { stroke: var(--tur); }
.marka-im .dal { stroke: var(--tur); opacity: .55; }
.marka-im .uc { fill: var(--tur); }
.marka-im .uc.c1 { animation: uc-parla 3s ease-in-out infinite; }
.marka-im .uc.c2 { animation: uc-parla 3s ease-in-out .4s infinite; }
.marka-im .uc.c3 { animation: uc-parla 3s ease-in-out .8s infinite; }
@keyframes uc-parla { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }

.yan-menu { padding: 6px 12px; }

.menu-oge {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--r2);
  color: var(--metin2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  margin-bottom: 3px;
  transition: all var(--gec);
}
.menu-oge:hover { background: var(--yuzey2); color: var(--metin); }
.menu-oge.secili {
  background: var(--tur-akis);
  color: #fff;
  box-shadow: 0 5px 18px var(--tur-is);
}
.menu-oge .im { width: 19px; flex-shrink: 0; display: grid; place-items: center; }
.menu-sayi {
  margin-left: auto;
  font-family: var(--tek);
  font-size: 11px;
  font-weight: 600;
  color: var(--metin3);
}
.menu-oge.secili .menu-sayi { color: rgba(255,255,255,.8); }

/* Kanal listesi — referanstaki abonelikler bölümü */
.yan-bolum { padding: 14px 12px 10px; }
.yan-bolum-bas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--metin2);
}
.yan-bolum-bas .sag { margin-left: auto; color: var(--metin3); }

.yan-kanal {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px;
  border-radius: var(--r2);
  cursor: default;
  transition: background var(--gec);
}
.yan-kanal:hover { background: var(--yuzey2); }
.yan-kanal-sim {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--yuzey2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  position: relative;
}
.yan-kanal-sim img { width: 100%; height: 100%; object-fit: cover; }
.yan-kanal-sim.canli::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--canli);
}
.yan-kanal-ad {
  font-size: 13px;
  font-weight: 500;
  color: var(--metin2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.yan-kanal-nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--metin3);
  flex-shrink: 0;
}
.yan-kanal-nokta.canli { background: var(--canli); box-shadow: 0 0 8px var(--canli); }

.yan-alt { margin-top: auto; padding: 14px; }

/* ── Orta: ana akış ── */

.icerik { min-width: 0; display: flex; flex-direction: column; }

.ust {
  height: 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 18px;
  margin-bottom: 16px;
  position: sticky;
  top: 14px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.ust-selam { font-size: 19px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.ust-selam span { color: var(--metin3); font-weight: 500; }
.ust h1 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.ust .yan-marka { flex-shrink: 0; }

.arama {
  flex: 1;
  max-width: 400px;
  position: relative;
  display: flex;
  align-items: center;
}
.arama .im {
  position: absolute;
  left: 15px;
  color: var(--metin3);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.arama input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: var(--zemin);
  border: 1px solid var(--kenar);
  border-radius: 100px;
  font-size: 13.5px;
}
.arama input:focus { border-color: var(--kenar2); box-shadow: none; }
.arama:focus-within .im { color: var(--tur); }

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* OBS bağlantı rozeti */
.obs-rozet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--yuzey2);
  color: var(--metin3);
  cursor: pointer;
  transition: all var(--gec);
}
.obs-rozet:hover { background: var(--yuzey3); }
.obs-rozet.bagli { background: rgba(34, 197, 94, .13); color: #6ee6a0; }
.obs-rozet.yayinda { background: rgba(239, 43, 43, .14); color: #ff8f8f; }
@media (max-width: 1020px) { .obs-rozet { display: none; } }

.yuvarlak-dugme {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--yuzey);
  border: 0;
  color: var(--metin2);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--gec);
}
.yuvarlak-dugme:hover { background: var(--yuzey2); color: var(--metin); }
.yuvarlak-dugme .uyari-nokta {
  position: absolute;
  top: 9px; right: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--canli);
  border: 2px solid var(--zemin);
}

.ust-avatar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  background: var(--yuzey);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  color: var(--metin);
  transition: background var(--gec);
}
.ust-avatar:hover { background: var(--yuzey2); }
.ust-avatar .sim {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tur-akis);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.govde { padding: 0 0 14px; flex: 1; }

/* ── Sağ: istatistik paneli ── */

.sag-panel {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 22px;
  padding: 20px 16px;
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.sag-panel::-webkit-scrollbar { width: 6px; }

/* ═══════════════════ Ana ekran (hero) ═══════════════════ */

@property --aci { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  margin-bottom: 16px;
  isolation: isolate;
  
}
.hero-icerik {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
  min-height: 300px;
}
.hero-baslik {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.12;
  max-width: 22ch;
}
.hero-aciklama {
  color: var(--metin2);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
  max-width: 54ch;
}

/* ── Yayın öncesi kontrol ── */
.hero.onay {
  background:
    radial-gradient(640px 340px at 100% 0%, rgba(255, 92, 40, .17), transparent 62%),
    radial-gradient(520px 320px at 0% 110%, rgba(168, 85, 247, .11), transparent 60%),
    var(--yuzey);
}
.onay-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  max-width: 640px;
}
.onay-adim {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--kenar);
  transition: border-color var(--gec), background var(--gec);
}
.onay-adim.tamam { border-color: rgba(34, 197, 94, .28); background: rgba(34, 197, 94, .055); }
.onay-adim.eksik { border-color: rgba(255, 92, 40, .38); background: rgba(255, 92, 40, .05); }
.onay-isaret {
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--kenar2);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: all var(--gec);
}
.onay-adim.eksik .onay-isaret { border-color: var(--tur); }
.onay-adim.tamam .onay-isaret {
  background: var(--yesil);
  border-color: var(--yesil);
  color: #052e14;
  animation: isaret-gir 320ms var(--yay);
}
@keyframes isaret-gir { from { transform: scale(.4); } }
.onay-ad { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.onay-alt {
  font-size: 12px;
  color: var(--metin3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Canlıya geç: dolum halkası kontrol listesinin ilerlemesini gösterir */
.onay-sag { display: grid; place-items: center; padding-right: 6px; }
.canliya-gec {
  --ilerleme: 0deg;
  position: relative;
  width: 178px; height: 178px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--tur) var(--ilerleme), rgba(255, 255, 255, .07) 0);
  transition: transform var(--gec), filter var(--gec);
}
.canliya-gec-ic {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--yuzey3), var(--yuzey2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 300ms ease;
}
.canliya-gec-ikon { display: grid; place-items: center; color: var(--metin3); transition: color var(--gec); }
.canliya-gec-yazi { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.canliya-gec-alt { font-family: var(--tek); font-size: 11px; color: rgba(255, 255, 255, .55); }
.canliya-gec:disabled { cursor: not-allowed; }
.canliya-gec:disabled .canliya-gec-yazi { color: var(--metin2); }

.canliya-gec.hazir { animation: hazir-nabiz 2.4s ease-out infinite; }
.canliya-gec.hazir .canliya-gec-ic { background: radial-gradient(circle at 50% 28%, #ff7d4d, #ff4500 72%); }
.canliya-gec.hazir .canliya-gec-ikon { color: #fff; }
.canliya-gec.hazir:hover { transform: scale(1.045); }
.canliya-gec.isliyor { background: conic-gradient(from var(--aci), var(--tur), rgba(255,255,255,.06) 40%, var(--tur)); animation: aci-don 1.1s linear infinite; }
@keyframes hazir-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(255, 92, 40, .5); }
  100% { box-shadow: 0 0 0 28px rgba(255, 92, 40, 0); }
}
@keyframes aci-don { to { --aci: 360deg; } }

/* ── Canlı yayın ekranı ── */
.hero.canli { border-color: transparent; }
.hero.canli::before {
  /* Kenarda dönen ışık: yayının açık olduğunu her an hissettirir */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--aci),
    rgba(255, 107, 53, .95), rgba(239, 43, 43, .1) 22%,
    rgba(168, 85, 247, .65) 50%, rgba(239, 43, 43, .1) 78%, rgba(255, 107, 53, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: aci-don 8s linear infinite;
  z-index: 3;
  pointer-events: none;
}
.hero-zemin {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(620px 420px at 18% 0%, rgba(255, 92, 40, .3), transparent 62%),
    radial-gradient(520px 380px at 100% 100%, rgba(168, 85, 247, .18), transparent 60%),
    #140d11;
}
.hero-zemin img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.35);
  transform: scale(1.18);
  opacity: .5;
}
.hero-perde {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(14, 10, 14, .92) 0%, rgba(14, 10, 14, .72) 55%, rgba(14, 10, 14, .5) 100%);
}
.hero.canli .hero-icerik { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: stretch; }
.canli-sol { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

.onair {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  border-radius: 9px;
  background: var(--canli);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: 0 0 34px rgba(239, 43, 43, .5);
}
.onair-nokta { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nabiz 1.3s ease-in-out infinite; }
.hero.canli .hero-baslik { font-size: 26px; margin-top: 18px; }
.hero-sayac {
  font-family: var(--tek);
  font-variant-numeric: tabular-nums;
  font-size: 58px;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  margin: 12px 0 20px;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .55));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.avatar-yigin { display: flex; align-items: center; margin-bottom: 22px; }
.avatar-yigin .av {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2.5px solid #170f13;
  margin-left: -9px;
  background: var(--yuzey3);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 800;
}
.avatar-yigin .av:first-child { margin-left: 0; }
.avatar-yigin .av img { width: 100%; height: 100%; object-fit: cover; }
.avatar-yigin .yazi { margin-left: 12px; font-size: 13px; color: var(--metin2); font-weight: 600; }
.hero-dugmeler { gap: 10px; }

.canli-sag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  gap: 10px;
}
.canli-olcu {
  background: rgba(12, 9, 13, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 0;
}
.canli-olcu.genis { grid-column: span 2; }
.canli-olcu-etiket {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--metin3);
}
.canli-olcu-deger { font-size: 27px; font-weight: 600; letter-spacing: -.035em; margin-top: 6px; line-height: 1.05; }
.canli-olcu .grafik { height: 34px; margin-top: 8px; }
.yt-ozet { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.yt-ozet-satir { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.yt-ozet-satir .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.yt-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--metin3); flex-shrink: 0; }
.yt-nokta.kirmizi { background: var(--canli); box-shadow: 0 0 10px var(--canli); animation: nabiz 1.4s ease-in-out infinite; }
.yt-nokta.mavi    { background: var(--mavi); animation: nabiz 1s ease-in-out infinite; }
.yt-nokta.sari    { background: var(--sari); }
.yt-ozet-durum { font-size: 11.5px; font-weight: 700; color: var(--metin3); }
.yt-ozet-durum.kirmizi { color: #ff8f8f; }
.yt-ozet-durum.mavi    { color: #9cc3ff; }
.yt-ozet-durum.sari    { color: #ffd279; }

/* Dağıtım kartındaki YouTube durumu */
.yt-durum {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--yuzey3);
  color: var(--metin2);
}
.yt-durum.kirmizi { background: rgba(239, 43, 43, .12); color: #ff8f8f; }
.yt-durum.mavi    { background: rgba(59, 130, 246, .12); color: #9cc3ff; }
.yt-durum.sari    { background: rgba(245, 176, 46, .12); color: #ffd279; }

/* ═══════════════════ OBS stüdyosu ═══════════════════ */

.studyo {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
}
.studyo > .kart { margin-bottom: 16px; }
.studyo.kapali { display: block; }
.studyo-bos { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.studyo-bos-ikon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255, 92, 40, .12);
  color: var(--tur);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.studyo-bos-metin { flex: 1; min-width: 0; }
.studyo-bos-metin .k { margin-top: 3px; line-height: 1.55; max-width: 70ch; }

.sahneler { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.sahne {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--kenar);
  background: var(--yuzey2);
  color: var(--metin2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--gec), border-color var(--gec), color var(--gec), background var(--gec);
}
.sahne:hover { border-color: var(--kenar2); color: var(--metin); transform: translateY(-2px); }
.sahne-no { font-size: 10.5px; color: var(--metin3); }
.sahne-ad {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sahne.aktif {
  background: linear-gradient(150deg, rgba(239, 43, 43, .24), rgba(255, 92, 40, .07) 70%);
  border-color: rgba(239, 43, 43, .6);
  color: #fff;
  box-shadow: 0 10px 28px rgba(239, 43, 43, .18), inset 0 0 0 1px rgba(239, 43, 43, .25);
  cursor: default;
  transform: none;
}
.sahne.aktif .sahne-no { color: #ff9a9a; }
.sahne-program {
  position: absolute;
  top: 11px; right: 11px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--canli);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
}
.sahne.geciyor { opacity: .55; pointer-events: none; }

.saglik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saglik-oge { background: var(--yuzey2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.saglik-etiket { font-size: 11.5px; color: var(--metin3); font-weight: 600; }
.saglik-deger { font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -.03em; line-height: 1.1; }
.saglik-oge .metre-cubuk { margin-top: 9px; height: 5px; }

.ses-satir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ses-dugme {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border-radius: 12px;
  border: 1px solid var(--kenar);
  background: var(--yuzey2);
  color: var(--metin);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--gec), background var(--gec);
}
.ses-dugme:hover { border-color: var(--kenar2); }
.ses-ikon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(34, 197, 94, .14);
  color: #6ee6a0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ses-ad { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-durum { font-size: 11px; font-weight: 700; color: #6ee6a0; }
.ses-dugme.sessiz { border-color: rgba(239, 43, 43, .35); background: rgba(239, 43, 43, .06); }
.ses-dugme.sessiz .ses-ikon { background: rgba(239, 43, 43, .15); color: #ff8f8f; }
.ses-dugme.sessiz .ses-durum { color: #ff8f8f; }

@media (max-width: 1180px) {
  .studyo { grid-template-columns: 1fr; }
  .hero.canli .hero-icerik { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-icerik { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; min-height: 0; }
  .hero-baslik { font-size: 25px; }
  .onay-liste { grid-template-columns: 1fr; }
  .onay-sag { padding: 0; }
  .canliya-gec { width: 150px; height: 150px; }
  .hero-sayac { font-size: 44px; }
  .canli-sag { grid-template-columns: 1fr 1fr; }
  .saglik-izgara { grid-template-columns: 1fr 1fr; }
}

.canli-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--canli);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.izleyici-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  font-family: var(--tek);
  font-size: 11.5px;
  font-weight: 600;
}

/* ═══════════════════ Bölüm başlığı ═══════════════════ */

.bolum-ara {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 15px;
}
.bolum-ara:first-child { margin-top: 0; }
.bolum-ara h2 { font-size: 19px; font-weight: 700; letter-spacing: -.028em; }
.bolum-ara .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bag {
  font-size: 13px;
  font-weight: 600;
  color: var(--tur);
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
}
.bag:hover { text-decoration: underline; }

/* ═══════════════════ Yayın kartları ═══════════════════ */

.seritler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 16px;
}

.serit {
  background: var(--yuzey);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform var(--gec), background var(--gec);
  
}
.serit:hover { transform: translateY(-3px); background: var(--yuzey2); }

.serit-onizleme {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--yuzey2);
  overflow: hidden;
}
.serit-onizleme img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--gec); }
.serit:hover .serit-onizleme img { transform: scale(1.06); }
.serit-onizleme.bos { display: grid; place-items: center; }
.onizleme-harf { font-size: 38px; font-weight: 800; opacity: .2; }

.onizleme-ust {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
}
.onizleme-ust .izleyici-etiket { margin-left: auto; }
.onizleme-sure {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .68);
  font-family: var(--tek);
  font-size: 11px;
  font-weight: 600;
}

.serit-tally { display: none; }

.serit-bas { padding: 13px 14px 10px; display: flex; align-items: center; gap: 10px; }
.serit-sim {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--yuzey2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
}
.serit-sim img { width: 100%; height: 100%; object-fit: cover; }
.serit-ad {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.018em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.serit-platform { font-size: 12px; color: var(--metin3); font-weight: 500; }

.serit-govde { padding: 0 14px 13px; display: flex; flex-direction: column; gap: 10px; }

.serit-durum { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.serit-durum.canli { color: #ff8080; }
.serit-durum.iyi   { color: #6ee6a0; }
.serit-durum.bekle { color: var(--metin3); }
.serit-durum.uyari { color: #ffd279; }
.serit-durum.hata  { color: #ff8080; }

.serit-olcum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--kenar);
}
.olcum-kutu { display: flex; flex-direction: column; gap: 2px; }
.olcum-etiket {
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--metin3);
  text-transform: uppercase;
  font-weight: 700;
}
.olcum-deger { font-size: 14px; font-weight: 600; }

.serit-hata {
  font-size: 11.5px;
  color: #ff8080;
  line-height: 1.5;
  background: rgba(239, 43, 43, .09);
  padding: 8px 10px;
  border-radius: var(--r3);
  word-break: break-word;
}

.serit-alt {
  margin-top: auto;
  padding: 11px 14px;
  border-top: 1px solid var(--kenar);
  display: flex;
  gap: 7px;
}

/* ═══════════════════ Sağ panel kartları ═══════════════════ */

.sp-kart {
  background: var(--yuzey2);
  border-radius: var(--r);
  padding: 18px 16px;
}
.sp-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.sp-bas h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.sp-bas .sag { margin-left: auto; }

/* Öne çıkan — büyük avatar + metrikler */
.sp-one { text-align: center; }
.sp-one-sim {
  width: 68px; height: 68px;
  border-radius: 50%;
  margin: 2px auto 11px;
  background: var(--yuzey3);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  overflow: hidden;
  position: relative;
}
.sp-one-sim img { width: 100%; height: 100%; object-fit: cover; }
.sp-one-sim.canli { box-shadow: 0 0 0 3px var(--zemin), 0 0 0 5px var(--canli); }
.sp-one-ad { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.sp-one-alt { font-size: 12.5px; color: var(--metin3); margin-top: 2px; }

.sp-metrikler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid var(--kenar);
}
.sp-metrik { text-align: left; }
.sp-metrik-deger {
  font-family: var(--tek);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.sp-metrik-deger.artis { color: var(--yesil); }
.sp-metrik-etiket { font-size: 11.5px; color: var(--metin3); margin-top: 3px; }
.sp-mini { display: block; width: 100%; height: 26px; margin-top: 7px; }

/* Sağ panel listesi */
.sp-satir {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}
.sp-satir + .sp-satir { border-top: 1px solid var(--kenar); }
.sp-satir-sim {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--yuzey3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
}
.sp-satir-sim img { width: 100%; height: 100%; object-fit: cover; }
.sp-satir-bilgi { flex: 1; min-width: 0; }
.sp-satir-ad {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-satir-alt { font-size: 11.5px; color: var(--metin3); }
.sp-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--metin3);
  flex-shrink: 0;
}
.sp-nokta.canli { background: var(--yesil); box-shadow: 0 0 8px rgba(34,197,94,.6); }

/* ═══════════════════ Ölçüm panosu ═══════════════════ */

.pano {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.pano-kutu {
  background: var(--yuzey);
  border-radius: var(--r);
  padding: 17px 18px;
  position: relative;
  overflow: hidden;
  transition: background var(--gec);
}
.pano-kutu:hover { background: var(--yuzey2); }
.pano-kutu.ana { grid-column: span 2; }
@media (max-width: 620px) { .pano-kutu.ana { grid-column: span 1; } }

.pano-ikon { position: absolute; top: 16px; right: 16px; color: var(--kenar2); }
.pano-kutu.canli-vurgu .pano-ikon { color: var(--tur); }

.pano-etiket {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--metin3);
  margin-bottom: 10px;
}
.pano-deger { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.pano-deger.sessiz { color: var(--metin3); }
.pano-birim { font-size: 13.5px; color: var(--metin3); font-weight: 500; margin-left: 4px; }
.pano-alt { font-size: 12.5px; color: var(--metin3); margin-top: 6px; }

.grafik { display: block; width: 100%; height: 50px; margin-top: 12px; }

/* ═══════════════════ Kartlar ═══════════════════ */

.kart {
  background: var(--yuzey);
  border-radius: var(--r);
  margin-bottom: 18px;
  overflow: hidden;
  
}
.kart-bas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--kenar);
}
.kart-bas h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.022em; }
.kart-bas .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kart-govde { padding: 20px; }
.kart-govde.sikisik { padding: 0; }

.izgara { display: grid; gap: 15px; }
.izgara.i2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.izgara.i3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ═══════════════════ Liste satırı ═══════════════════ */

.satir-oge {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  background: var(--yuzey2);
  border-radius: var(--r2);
  margin-bottom: 9px;
  transition: all var(--gec);
}
.satir-oge:last-child { margin-bottom: 0; }
.satir-oge.secilebilir { cursor: pointer; }
.satir-oge.secilebilir:hover { background: var(--yuzey3); }
.satir-oge.secili { background: rgba(255, 92, 40, .12); box-shadow: inset 0 0 0 1.5px var(--tur); }

.satir-sim {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--yuzey3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
}
.satir-sim img { width: 100%; height: 100%; object-fit: cover; }
.satir-bilgi { flex: 1; min-width: 0; }
.satir-ad {
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.satir-alt {
  font-size: 12.5px;
  color: var(--metin3);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.satir-sag { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.kutu {
  width: 21px; height: 21px;
  border: 2px solid var(--kenar2);
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--gec);
}
.kutu.isaretli { background: var(--tur); border-color: var(--tur); }
.kutu.isaretli::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ═══════════════════ Rozet / lamba / metre ═══════════════════ */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.rozet.yesil   { background: rgba(34,197,94,.13);  color: #6ee6a0; }
.rozet.kirmizi { background: rgba(239,43,43,.13);  color: #ff8f8f; }
.rozet.sari    { background: rgba(245,176,46,.13); color: #ffd279; }
.rozet.mavi    { background: rgba(59,130,246,.13); color: #9cc3ff; }
.rozet.mor     { background: rgba(168,85,247,.14); color: #d4b3ff; }
.rozet.gri     { background: var(--yuzey3); color: var(--metin2); }

.lamba { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lamba.yanip { animation: nabiz 1.7s ease-in-out infinite; }
@keyframes nabiz { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.durum-gosterge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--yuzey);
  color: var(--metin2);
}
.durum-gosterge.canli { background: rgba(239,43,43,.14); color: #ff8f8f; }
.durum-gosterge.hazir { background: rgba(34,197,94,.13); color: #6ee6a0; }

.metre { display: flex; flex-direction: column; gap: 6px; }
.metre-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.metre-etiket {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--metin3); text-transform: uppercase;
}
.metre-deger { font-size: 13px; font-weight: 600; }
.metre-cubuk {
  height: 6px;
  background: var(--zemin);
  border-radius: 100px;
  overflow: hidden;
}
.metre-dolu {
  height: 100%;
  border-radius: 100px;
  background: var(--yesil);
  transition: width 460ms var(--gec), background var(--gec);
}
.metre-dolu.orta   { background: var(--sari); }
.metre-dolu.yuksek { background: var(--canli); }
.metre-dolu.yok    { background: var(--kenar2); }
.metre-cubuk.segmentli { background: var(--zemin); }

/* ═══════════════════ Tablo ═══════════════════ */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  padding: 13px 18px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--metin3);
  font-weight: 700;
  border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}
td { padding: 14px 18px; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--gec); }
tbody tr:hover { background: var(--yuzey2); }
.tablo-sar { overflow-x: auto; }
#akisTablo td { padding: 9px 18px; font-size: 13px; }

/* ═══════════════════ Sohbet duvarı ═══════════════════ */

.sohbet-arac {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--yuzey);
  border-radius: var(--r);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.duzen-sec {
  display: flex;
  gap: 3px;
  background: var(--zemin);
  border-radius: 100px;
  padding: 3px;
}
.duzen-dugme {
  padding: 6px 13px;
  border: 0;
  background: transparent;
  color: var(--metin3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--tek);
  cursor: pointer;
  transition: all var(--gec);
}
.duzen-dugme:hover { color: var(--metin2); }
.duzen-dugme.secili { background: var(--tur); color: #fff; }

.sohbet-duvar {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr));
}
@media (max-width: 920px) { .sohbet-duvar { grid-template-columns: 1fr; } }

.sohbet-cerceve {
  background: var(--yuzey);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: var(--sohbet-yuk, 520px);
  
}
.sohbet-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--kenar);
  flex-shrink: 0;
}
.sohbet-bas .serit-sim { width: 28px; height: 28px; font-size: 11px; }
.sohbet-ad {
  font-size: 13px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sohbet-izleyici {
  font-family: var(--tek);
  font-size: 11.5px;
  font-weight: 600;
  color: #ff8f8f;
  background: rgba(239, 43, 43, .12);
  padding: 3px 9px;
  border-radius: 100px;
}
.sohbet-gov { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--zemin); }
.sohbet-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sohbet-durum {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--yuzey2); color: var(--metin3); font-size: 12.5px; text-align: center;
}
.sm { display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; animation: sm-gir 220ms var(--yay); }
.sm:hover { background: rgba(255, 255, 255, .03); }
@keyframes sm-gir { from { opacity: 0; transform: translateY(6px); } }
.sm-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--yuzey3); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--metin2);
}
.sm-ic { min-width: 0; font-size: 13.5px; line-height: 1.45; word-wrap: break-word; }
.sm-yazar { font-weight: 700; color: var(--metin2); margin-right: 6px; }
.sm.sahip .sm-yazar { color: #ffd279; }
.sm.modm .sm-yazar { color: #7fb2ff; }
.sm-rozet { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; margin-right: 6px; vertical-align: 1px; }
.sm-rozet.sahip { background: rgba(245, 176, 46, .16); color: #ffd279; }
.sm-rozet.mod { background: rgba(59, 130, 246, .16); color: #9cc3ff; }
.sm-rozet.uye { background: rgba(34, 197, 94, .14); color: #6ee6a0; }
.sm-metin { color: var(--metin); }
.sm.super { background: linear-gradient(90deg, rgba(255, 92, 40, .14), transparent); border-left: 2px solid var(--tur); }
.sm-tutar { font-weight: 800; color: var(--tur2); margin-right: 6px; }
.sohbet-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--kenar); background: var(--yuzey); }
.sohbet-form input { flex: 1; padding: 9px 13px; border-radius: 100px; font-size: 13px; }
.sohbet-form .dugme { padding: 8px 12px; }
.sohbet-not { font-size: 11px; color: var(--metin3); padding: 0 14px 9px; background: var(--yuzey); }
.mod-hesap .satir { flex-wrap: nowrap; gap: 14px; }
.mod-hesap-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: rgba(255, 92, 40, .12); color: var(--tur); display: grid; place-items: center; font-weight: 800;
}
.mod-hesap.bagli { border-color: rgba(34, 197, 94, .28); }

/* ═══════════════════ Pencere ═══════════════════ */

.perde {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.perde.goster { display: grid; animation: solgun 160ms ease; }
@keyframes solgun { from { opacity: 0; } }

.pencere {
  background: var(--yuzey);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
  animation: pencere-ac 260ms var(--yay);
}
@keyframes pencere-ac { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.pencere.genis { max-width: 760px; }

.pencere-bas {
  padding: 18px 22px;
  border-bottom: 1px solid var(--kenar);
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  background: var(--yuzey);
  z-index: 1;
}
.pencere-bas h3 { font-size: 16px; font-weight: 700; letter-spacing: -.022em; }
.pencere-kapat {
  margin-left: auto;
  background: var(--yuzey2);
  border: 0;
  color: var(--metin2);
  cursor: pointer;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: all var(--gec);
}
.pencere-kapat:hover { color: var(--metin); background: var(--yuzey3); }
.pencere-govde { padding: 22px; }
.pencere-alt {
  padding: 16px 22px;
  border-top: 1px solid var(--kenar);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ═══════════════════ Kod kutusu ═══════════════════ */

.kod-sar { position: relative; }
.kod {
  background: var(--zemin);
  border-radius: var(--r2);
  padding: 13px 15px;
  padding-right: 84px;
  font-family: var(--tek);
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-all;
  color: #8fd0ff;
}
.kod-kopya {
  position: absolute;
  top: 8px; right: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--yuzey2);
  border: 0;
  color: var(--metin2);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--yazi);
  transition: all var(--gec);
}
.kod-kopya:hover { color: #fff; background: var(--yuzey3); }

/* ═══════════════════ Bildirim ═══════════════════ */

#bildirimler {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 370px;
  pointer-events: none;
}
.bildirim {
  background: var(--yuzey2);
  border-radius: var(--r2);
  padding: 13px 17px 13px 19px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  animation: bildirim-gir 300ms var(--yay);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.bildirim::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mavi);
}
.bildirim.hata::before   { background: var(--canli); }
.bildirim.basari::before { background: var(--yesil); }
.bildirim.dikkat::before { background: var(--sari); }
@keyframes bildirim-gir { from { transform: translateX(26px); opacity: 0; } }

/* ═══════════════════ Boş durum ═══════════════════ */

.bos { text-align: center; padding: 50px 24px; color: var(--metin3); font-size: 13.5px; }
.bos-baslik { color: var(--metin); font-weight: 700; font-size: 16px; margin-bottom: 6px; letter-spacing: -.02em; }
.bos .dugme { margin-top: 16px; }

.donuyor {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--kenar2);
  border-top-color: var(--tur);
  border-radius: 50%;
  animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ═══════════════════ Yardımcılar ═══════════════════ */

.sayfa { display: none; }
.sayfa.etkin { display: block; animation: gir 300ms var(--yay); }

.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir.esit > * { flex: 1; min-width: 0; }
.sag { margin-left: auto; }
.k { color: var(--metin3); font-size: 12.5px; }
.k2 { color: var(--metin2); }
.kucuk { font-size: 12.5px; }
.kalin { font-weight: 700; }
.gizli { display: none !important; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.hepsi { width: 100%; }
.tally-serit { display: none; }

/* ═══════════════════ Uyarlanır ═══════════════════ */

.menu-dugme {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--yuzey);
  border: 0;
  border-radius: 50%;
  color: var(--metin);
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 1240px) {
  .uyg { grid-template-columns: minmax(0, 1fr); }
  .sag-panel {
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sag-panel > * { flex: 1; min-width: 250px; }
}

@media (max-width: 880px) {
  .uyg { padding: 10px; }
  .yan {
    left: -240px;
    top: 10px;
    bottom: 10px;
    transition: left 250ms var(--yay);
    box-shadow: 0 0 50px rgba(0, 0, 0, .7);
    z-index: 60;
  }
  .yan.acik { left: 10px; }
  .menu-dugme { display: grid; }
  .ust { padding: 0 14px; height: 60px; gap: 10px; top: 10px; }
  .ust-selam { font-size: 16px; }
  .arama { display: none; }
  .sag-panel { flex-direction: column; }
  .sag-panel > * { min-width: 0; }
  .seritler { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
  .izgara.i2, .izgara.i3 { grid-template-columns: 1fr; }
  #bildirimler { left: 14px; right: 14px; max-width: none; }
  .pano { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pano-kutu.ana { grid-column: span 2; }
  .pano-deger { font-size: 26px; }
}

@media (max-width: 460px) {
  .seritler { grid-template-columns: 1fr; }
  .pano { grid-template-columns: 1fr; }
  .pano-kutu.ana { grid-column: span 1; }
  .ust-avatar span { display: none; }
}

.yan-perde {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 55;
}
.yan-perde.goster { display: block; animation: solgun 180ms ease; }
@media (min-width: 881px) { .yan-perde { display: none !important; } }

/* ═══════════════ v6.4 — Premium kenarlar ═══════════════ */
.kart, .serit, .sag-panel > *, .sohbet-cerceve, .hero {
  background-image: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px -18px rgba(0,0,0,.8);
}
.serit { transition: transform var(--gec), border-color var(--gec), box-shadow var(--gec); }
.serit:hover { transform: translateY(-2px); border-color: rgba(255,92,40,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -20px rgba(255,92,40,.45); }
.kart:hover { border-color: var(--kenar2); }
::selection { background: rgba(255,92,40,.35); }
* { -webkit-tap-highlight-color: transparent; }
html { scrollbar-color: #3a3a47 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #34343f; border-radius: 10px; border: 3px solid var(--zemin); }

/* ═══════════════ Yayın formu: sayaç / geçmiş / etiketler ═══════════════ */
.alan-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sayac { font: 600 11px var(--tek); color: var(--metin3); }
.sayac.uyar { color: var(--sari); }
.sayac.asim { color: var(--canli); }
.gecmis-serit { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 6px; scrollbar-width: thin; }
.gecmis-serit:empty { display: none; }
.gecmis-oge {
  flex: 0 0 auto; max-width: 260px; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 34px 10px 12px; border-radius: 12px; border: 1px solid var(--kenar); background: var(--yuzey2);
  color: var(--metin); cursor: pointer; position: relative; transition: border-color var(--gec), background var(--gec);
  font-family: inherit;
}
.gecmis-oge:hover { border-color: rgba(255,92,40,.45); background: #26262f; }
.gecmis-oge b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gecmis-oge small { font-size: 11px; color: var(--metin3); }
.gecmis-sil { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 7px; border: 0; background: transparent; color: var(--metin3); cursor: pointer; display: grid; place-items: center; }
.gecmis-sil:hover { background: rgba(239,43,43,.15); color: #ff8f8f; }
.gecmis-baslik { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--metin3); margin: 2px 0 8px; display: flex; align-items: center; gap: 8px; }
.etiket-oneri { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.etiket-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.etiket-grup-ad { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--metin3); min-width: 92px; }
.etiket {
  border: 1px solid rgba(255,92,40,.28); background: rgba(255,92,40,.08); color: #ffb08f;
  padding: 4px 10px; border-radius: 999px; font: 600 12px var(--yazi); cursor: pointer;
  transition: background var(--gec), transform var(--gec), opacity var(--gec);
}
.etiket:hover { background: rgba(255,92,40,.2); transform: translateY(-1px); }
.etiket.kullanildi { opacity: .35; pointer-events: none; text-decoration: line-through; }
.etiket.oneri-ai { border-color: rgba(168,85,247,.35); background: rgba(168,85,247,.1); color: #d6b4ff; }
.oneri-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--metin2); }
.baglanti-dugme { background: none; border: 0; color: var(--tur2); font: 700 12px var(--yazi); cursor: pointer; padding: 0; }

/* ═══════════════ Mobil sekme çubuğu ═══════════════ */
.alt-menu { display: none; }
@media (max-width: 880px) {
  .alt-menu {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 50; height: 64px; padding: 6px; gap: 4px;
    background: rgba(24, 24, 31, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--kenar2); border-radius: 20px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.8);
  }
  .alt-oge {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: var(--metin3); border-radius: 14px; cursor: pointer;
    font: 700 10.5px var(--yazi); min-width: 0; transition: color var(--gec), background var(--gec);
  }
  .alt-oge span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alt-oge.secili { color: #fff; background: rgba(255,92,40,.16); }
  .alt-oge.secili .alt-ikon { color: var(--tur); }
  .alt-ikon { display: grid; place-items: center; height: 20px; }
  .alt-ikon svg { width: 20px; height: 20px; }
  .uyg { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  .menu-dugme { display: none !important; }
  #bildirimler { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .perde .pencere { max-height: calc(100vh - 40px); overflow-y: auto; }
  .govde { min-width: 0; }
}
@media (max-width: 600px) {
  .ust { padding: 0 10px; gap: 8px; }
  .ust-selam { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .ust-selam { font-size: 0 !important; }
  .ust-selam #kiraciAd { font-size: 15px; font-weight: 800; color: var(--metin); }
  #dUstYayin { padding: 0 12px; font-size: 0; gap: 0; }
  #dUstYayin span { font-size: 14px; }
  .ust-sag { gap: 6px; }
  .yuvarlak-dugme { width: 38px; height: 38px; }
  .ust-avatar span.kucuk { display: none; }
  .kart { padding: 16px; }
  .kart-bas { flex-wrap: wrap; gap: 8px; }
  .hero-baslik { font-size: 22px; }
  .hero-sayac { font-size: 38px; }
  .canli-sag { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sohbet-cerceve { height: 70vh; }
  .etiket-grup-ad { min-width: 100%; }
  table { display: block; overflow-x: auto; }
  .satir, .dugme-satir { flex-wrap: wrap; }
}
@media (min-width: 601px) and (max-width: 880px) {
  .izgara.i3 { grid-template-columns: repeat(3, 1fr); }
  .izgara.i2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 881px) and (max-width: 1240px) {
  .sag-panel > * { min-width: 220px; }
}
.saglik-oneri { margin-top: 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(245,176,46,.35); background: rgba(245,176,46,.08); color: #ffd58a; font-size: 12.5px; line-height: 1.5; }
.kaynak-uyari { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--r); border: 1px solid rgba(239,43,43,.45); background: linear-gradient(135deg, rgba(239,43,43,.16), rgba(239,43,43,.05)); color: #ffd0d0; }
.kaynak-uyari.gizli { display: none; }
.kaynak-uyari b { color: #fff; }
.kaynak-uyari p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #ffc2c2; }
.ku-ikon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(239,43,43,.2); color: #ff8f8f; }
.sp-baglanti { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kenar); }
.sp-baglanti.gizli { display: none; }
.spb-bas { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--metin2); margin-bottom: 10px; }
.spb-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spb-izgara > div { background: var(--yuzey2); border-radius: 10px; padding: 8px 10px; }
.spb-izgara b { display: block; font: 700 14px var(--tek); }
.spb-izgara small { font-size: 10.5px; color: var(--metin3); }
.spb-not { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #ffd58a; }
.spb-not:empty { display: none; }
.gizli-metin { filter: blur(5px); transition: filter var(--gec); }
.kod-sar:hover .gizli-metin { filter: none; }
details summary { font-size: 12.5px; }
.yt-gomulu iframe { flex: 1; width: 100%; border: 0; background: #0f0f0f; display: block; }
.yt-gomulu .sohbet-bas { display: flex; align-items: center; gap: 10px; }
.sohbet-ad { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet-izl { font: 700 11.5px var(--tek); color: #ff8f8f; background: rgba(239,43,43,.12); padding: 3px 8px; border-radius: 999px; }
.sohbet-bas-ek { display: flex; gap: 6px; }

/* ═══════════════ Yayın özeti / geçmiş ═══════════════ */
.pencere.genis { max-width: 860px; }
.ozet-tarih { font-size: 12.5px; color: var(--metin3); margin-bottom: 14px; }
.ozet-izgara, .arsiv-toplam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.arsiv-toplam { grid-template-columns: repeat(4, 1fr); }
.arsiv-toplam:empty { display: none; }
.ozet-kutu { background: var(--yuzey2); border: 1px solid var(--kenar); border-radius: 14px; padding: 14px 16px; }
.ozet-kutu.vurgu { background: linear-gradient(135deg, rgba(255,92,40,.22), rgba(255,92,40,.06)); border-color: rgba(255,92,40,.4); }
.ozet-etiket { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--metin3); }
.ozet-deger { font: 800 26px var(--yazi); letter-spacing: -.02em; margin-top: 4px; }
.ozet-alt { font-size: 11.5px; color: var(--metin3); margin-top: 2px; }
.ozet-grafik { background: var(--yuzey2); border: 1px solid var(--kenar); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.ozet-svg { width: 100%; height: 120px; display: block; margin-top: 8px; }
.ozet-tablo { width: 100%; font-size: 13px; }
.ozet-tablo th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--metin3); padding: 8px; }
.ozet-tablo td { padding: 8px; border-top: 1px solid var(--kenar); }
.ozet-kanal { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ozet-kanal .serit-sim, .arsiv-kanallar .serit-sim { width: 26px; height: 26px; font-size: 10px; }
.ozet-linkler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ozet-not { font-size: 11.5px; color: var(--metin3); margin-top: 12px; }
.arsiv-liste { display: flex; flex-direction: column; gap: 10px; }
.arsiv-oge { display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 16px; border-radius: 14px; border: 1px solid var(--kenar); background: var(--yuzey2); cursor: pointer; position: relative; transition: border-color var(--gec), transform var(--gec); }
.arsiv-oge:hover { border-color: rgba(255,92,40,.45); transform: translateY(-1px); }
.arsiv-kanallar { display: flex; }
.arsiv-kanallar > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--yuzey2); border-radius: 50%; }
.arsiv-kanallar > *:first-child { margin-left: 0; }
.arsiv-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arsiv-bilgi b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arsiv-bilgi small { color: var(--metin3); font-size: 12px; }
.arsiv-sayilar { display: flex; gap: 18px; }
.arsiv-sayilar span { display: flex; flex-direction: column; align-items: flex-end; }
.arsiv-sayilar b { font: 700 15px var(--tek); }
.arsiv-sayilar small { font-size: 10.5px; color: var(--metin3); }
.arsiv-oge .gecmis-sil { top: 50%; transform: translateY(-50%); right: 10px; }
@media (max-width: 700px) {
  .ozet-izgara, .arsiv-toplam { grid-template-columns: 1fr 1fr; }
  .arsiv-oge { flex-wrap: wrap; }
  .arsiv-sayilar { width: 100%; justify-content: space-between; }
  .ozet-deger { font-size: 21px; }
}

/* Gömülü sohbet + kanal adına yazma çubuğu */
.yt-yaz { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--kenar); background: var(--yuzey); }
.yt-yaz input { flex: 1; min-width: 0; }
.yt-yaz-not { font-size: 11px; color: var(--metin3); padding: 0 12px 10px; background: var(--yuzey); }