/*
 * csk-tema.css — CSK METAL ortak görünüm katmanı (v1, 2026-11-09)
 * Tabler'ın üzerine gelir. Şimdilik zil paneli ve bildirim merkezi kullanıyor;
 * diğer ekranlar yeni tasarıma geçtikçe aynı değişkenleri kullanacak.
 */
:root {
  --csk-zemin: #f4f6fa;
  --csk-yuzey: #ffffff;
  --csk-yuzey-2: #f1f4f9;
  --csk-cizgi: #e3e8ef;
  --csk-metin: #1d273b;
  --csk-metin-2: #5f6b80;
  --csk-lacivert: #1d273b;
  --csk-mavi: #206bc4;
  --csk-mavi-acik: #e8f0fb;
  --csk-turuncu: #f76707;
  --csk-turuncu-acik: #fff1e6;
  --csk-mor: #ae3ec9;
  --csk-kirmizi: #d63939;
  --csk-gri-rozet: #667085;
  --csk-golge: 0 8px 28px rgba(29, 39, 59, .16);
  --csk-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

.csk-mono { font-family: var(--csk-mono); font-variant-numeric: tabular-nums; }
.csk-etiket { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--csk-metin-2); }

/* ── Bildirim türü renkleri ── */
.bld-tur-atama  { background: var(--csk-mavi); }
.bld-tur-etiket { background: var(--csk-mor); }
.bld-tur-sa     { background: var(--csk-turuncu); }
.bld-tur-sevk   { background: var(--csk-gri-rozet); }

/* ── Zil düğmesi ── */
.csk-zil { position: relative; }
.csk-zil-btn { position: relative; }
.csk-zil-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.csk-rozet { position: absolute; font-size: 10px; font-weight: 700; line-height: 1; min-width: 18px; padding: 3px 5px; border-radius: 999px; color: #fff; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.csk-rozet-kirmizi { background: var(--csk-kirmizi); top: -7px; right: -7px; }
.csk-rozet-gri { background: var(--csk-gri-rozet); bottom: -7px; right: -7px; font-size: 9px; min-width: 16px; }
@keyframes csk-titre { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.csk-zil-btn.yeni-geldi .ti-bell { animation: csk-titre .45s ease 2; }
@media (prefers-reduced-motion: reduce) { .csk-zil-btn.yeni-geldi .ti-bell { animation: none; } }

/* ── Zil paneli ── */
.csk-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 400px; max-width: calc(100vw - 24px); background: var(--csk-yuzey); color: var(--csk-metin); border: 1px solid var(--csk-cizgi); border-radius: 10px; box-shadow: var(--csk-golge); z-index: 1060; overflow: hidden; text-align: left; font-size: 14px; }
.csk-panel-bas { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
.csk-panel-bas h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--csk-metin); }
.csk-sekmeler { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--csk-cizgi); }
.csk-sekme { border: 0; background: none; padding: 8px 10px; font-weight: 650; font-size: 13px; color: var(--csk-metin-2); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.csk-sekme[aria-selected="true"] { color: var(--csk-metin); border-bottom-color: var(--csk-mavi); }
.csk-sayac { font-size: 10px; font-weight: 700; color: #fff; border-radius: 999px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.csk-sayac-kirmizi { background: var(--csk-kirmizi); }
.csk-sayac-gri { background: var(--csk-gri-rozet); }
.csk-panel-liste { max-height: min(420px, 60vh); overflow-y: auto; }
.csk-grup-bas { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--csk-metin-2); padding: 10px 14px 4px; background: var(--csk-yuzey); position: sticky; top: 0; z-index: 1; }
.csk-bos { padding: 36px 14px; text-align: center; color: var(--csk-metin-2); }
.csk-bos i { font-size: 28px; display: block; margin-bottom: 6px; }
.csk-panel-alt { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--csk-cizgi); font-size: 13px; }
.csk-panel-alt button, .csk-panel-alt a { border: 0; background: none; color: var(--csk-mavi); font-weight: 650; padding: 0; text-decoration: none; cursor: pointer; }

/* ── Bildirim satırı (panel ve merkez ortak) ── */
.csk-bld { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--csk-cizgi); align-items: start; color: var(--csk-metin); text-decoration: none; }
a.csk-bld:hover { background: var(--csk-yuzey-2); color: var(--csk-metin); }
.csk-bld.yeni { background: var(--csk-mavi-acik); }
a.csk-bld.yeni:hover { background: #dce8f8; }
.csk-bld-av { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 17px; }
.csk-bld-ust { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.csk-bld-kim { font-weight: 650; }
.csk-bld-mesaj { color: var(--csk-metin-2); font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.csk-bld-is { font-size: 12px; color: var(--csk-mavi); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; margin-top: 2px; }
.csk-bld-sag { display: grid; justify-items: end; gap: 6px; }
.csk-bld-zaman { font-size: 11px; color: var(--csk-metin-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.csk-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--csk-mavi); }
.csk-bld:not(.yeni) .csk-nokta { visibility: hidden; }

/* Rota izi: işin geçtiği bölümler */
.csk-rota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; }
.csk-rota span { padding: 1px 7px; border-radius: 999px; background: var(--csk-yuzey-2); color: var(--csk-metin-2); border: 1px solid var(--csk-cizgi); }
.csk-rota span.gecti { text-decoration: line-through; text-decoration-color: rgba(95,107,128,.5); }
.csk-rota span.su_an { background: var(--csk-mavi); color: #fff; border-color: var(--csk-mavi); font-weight: 650; }
.csk-rota i { font-style: normal; color: var(--csk-metin-2); }

/* ── Bildirim merkezi ── */
.csk-merkez { display: grid; grid-template-columns: 240px 1fr; background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 10px; overflow: hidden; }
.csk-filtre { border-right: 1px solid var(--csk-cizgi); padding: 16px 12px; display: grid; gap: 18px; align-content: start; background: var(--csk-yuzey-2); }
.csk-filtre-grup { display: grid; gap: 2px; }
.csk-filtre-grup .csk-etiket { padding: 0 10px 4px; }
.csk-filtre a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--csk-metin); text-decoration: none; }
.csk-filtre a:hover { background: var(--csk-yuzey); }
.csk-filtre a.secili { background: var(--csk-yuzey); box-shadow: inset 0 0 0 1px var(--csk-cizgi); }
.csk-filtre .adet { color: var(--csk-metin-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.csk-filtre .adet.yeni { color: var(--csk-kirmizi); font-weight: 700; }
.csk-filtre .renk { display: inline-flex; align-items: center; gap: 8px; }
.csk-filtre .kare { width: 10px; height: 10px; border-radius: 3px; }
.csk-sessiz-satir { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; }
.csk-sessiz-satir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csk-sessiz-satir button { border: 0; background: none; color: var(--csk-mavi); font-weight: 650; font-size: 12px; padding: 0; white-space: nowrap; }
.csk-merkez-ana { display: grid; align-content: start; min-width: 0; }
.csk-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--csk-cizgi); }
.csk-arama { display: flex; align-items: center; gap: 8px; border: 1px solid var(--csk-cizgi); border-radius: 6px; padding: 5px 10px; flex: 1 1 220px; max-width: 360px; background: var(--csk-yuzey); color: var(--csk-metin-2); }
.csk-arama input { border: 0; outline: 0; background: none; color: var(--csk-metin); width: 100%; font: inherit; }
.csk-secim { display: flex; gap: 10px; align-items: center; padding: 8px 16px; background: var(--csk-mavi-acik); border-bottom: 1px solid var(--csk-cizgi); font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.csk-merkez .csk-bld { grid-template-columns: 18px 34px 1fr auto; padding: 12px 16px; }
.csk-merkez .csk-bld input[type="checkbox"] { margin-top: 9px; accent-color: var(--csk-mavi); width: 16px; height: 16px; }
.csk-merkez .csk-grup-bas { position: static; border-top: 1px solid var(--csk-cizgi); background: var(--csk-yuzey-2); }
.csk-satir-aksiyon { display: flex; gap: 4px; }
.csk-satir-aksiyon button { border: 1px solid var(--csk-cizgi); background: var(--csk-yuzey); border-radius: 6px; width: 30px; height: 28px; display: grid; place-items: center; color: var(--csk-metin-2); padding: 0; }
.csk-satir-aksiyon button:hover { color: var(--csk-metin); border-color: var(--csk-metin-2); }
.csk-sayfalama { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--csk-cizgi); font-size: 13px; color: var(--csk-metin-2); }
@media (max-width: 768px) {
  .csk-merkez { grid-template-columns: 1fr; }
  .csk-filtre { border-right: 0; border-bottom: 1px solid var(--csk-cizgi); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .csk-merkez .csk-bld { grid-template-columns: 18px 34px 1fr; }
  .csk-merkez .csk-bld .csk-bld-sag { grid-column: 3; justify-items: start; }
}

/* ── Sohbet ── */
.csk-sohbet { display: grid; grid-template-columns: 290px 1fr 260px; height: calc(100vh - 150px); min-height: 520px; background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 10px; overflow: hidden; }
.csk-sohbet.bilgi-kapali { grid-template-columns: 290px 1fr; }
.csk-sohbet.bilgi-kapali .csk-s-bilgi { display: none; }
.csk-s-kanallar { border-right: 1px solid var(--csk-cizgi); display: grid; grid-template-rows: auto 1fr; min-height: 0; background: var(--csk-yuzey-2); position: relative; }
.csk-s-kanallar-ust { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--csk-cizgi); }
.csk-s-kanallar-ust .csk-arama { max-width: none; }
.csk-s-liste { overflow-y: auto; padding: 6px; display: grid; gap: 1px; align-content: start; }
.csk-s-liste .csk-etiket { padding: 10px 8px 4px; display: flex; justify-content: space-between; align-items: center; }
.csk-s-kanal { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 7px; border: 0; background: none; text-align: left; width: 100%; color: var(--csk-metin); cursor: pointer; }
.csk-s-kanal:hover { background: var(--csk-yuzey); }
.csk-s-kanal[aria-current="true"] { background: var(--csk-yuzey); box-shadow: inset 0 0 0 1px var(--csk-cizgi); }
.csk-s-kanal .kb { min-width: 0; display: grid; }
.csk-s-kanal .ad { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csk-s-kanal.okunmamis-var .ad { font-weight: 800; }
.csk-s-kanal .son { font-size: 12px; color: var(--csk-metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csk-s-kanal .yan { display: grid; justify-items: end; gap: 3px; }
.csk-s-kanal .zaman { font-size: 11px; color: var(--csk-metin-2); font-variant-numeric: tabular-nums; }
.csk-s-ikon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); color: var(--csk-metin-2); font-size: 16px; }
.csk-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; letter-spacing: .02em; }
.csk-av.kucuk { width: 26px; height: 26px; font-size: 10px; }
.csk-s-okunmamis { background: var(--csk-kirmizi); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.csk-s-izleme { font-size: 9px; font-weight: 700; color: #ae3ec9; background: #f8f0fc; border-radius: 4px; padding: 1px 4px; margin-left: 4px; vertical-align: 1px; }
.csk-s-kisi-sec { position: absolute; inset: 0; background: var(--csk-yuzey); z-index: 5; display: grid; grid-template-rows: auto 1fr; }
.csk-s-kisi-sec .ust { padding: 12px; border-bottom: 1px solid var(--csk-cizgi); display: grid; gap: 8px; }

.csk-s-konusma { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0; min-width: 0; }
.csk-s-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--csk-cizgi); min-height: 58px; }
.csk-s-bas h3 { font-size: 15px; font-weight: 700; margin: 0; }
.csk-s-bas .meta { font-size: 12px; color: var(--csk-metin-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csk-s-baglanti { display: inline-flex; align-items: center; gap: 5px; }
.csk-s-baglanti::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--csk-gri-rozet); }
.csk-s-baglanti.bagli::before { background: #2fb344; }
.csk-s-baglanti.koptu::before { background: #f59f00; }
.csk-kare-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--csk-cizgi); background: var(--csk-yuzey); display: grid; place-items: center; color: var(--csk-metin-2); padding: 0; cursor: pointer; }
.csk-kare-btn:hover, .csk-kare-btn[aria-pressed="true"] { color: var(--csk-metin); border-color: var(--csk-metin-2); }
.csk-kare-btn.ana { background: var(--csk-mavi); border-color: var(--csk-mavi); color: #fff; }
.csk-kare-btn:disabled { opacity: .5; cursor: not-allowed; }
.csk-s-geri { display: none; }
.csk-s-arama-cubuk { padding: 8px 16px; border-bottom: 1px solid var(--csk-cizgi); background: var(--csk-yuzey-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csk-s-arama-cubuk .csk-arama { max-width: none; }
.csk-s-arama-sonuc { max-height: 260px; overflow-y: auto; width: 100%; display: grid; gap: 2px; }
.csk-s-arama-sonuc button { text-align: left; border: 0; background: var(--csk-yuzey); border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--csk-metin); cursor: pointer; }
.csk-s-arama-sonuc button:hover { background: var(--csk-mavi-acik); }
.csk-s-arama-sonuc small { color: var(--csk-metin-2); display: block; }
.csk-s-arama-sonuc mark { background: #fff3bf; padding: 0 1px; }

.csk-s-mesajlar { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.csk-s-gun { align-self: center; font-size: 11px; font-weight: 700; color: var(--csk-metin-2); background: var(--csk-yuzey-2); border: 1px solid var(--csk-cizgi); border-radius: 999px; padding: 2px 10px; letter-spacing: .04em; margin: 12px 0 6px; text-transform: uppercase; }
.csk-s-daha { align-self: center; margin-bottom: 8px; }
.csk-s-msj { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 8px; max-width: 78%; margin-top: 8px; position: relative; }
.csk-s-msj.devam { margin-top: 2px; }
.csk-s-msj.devam .csk-av, .csk-s-msj.devam .kim { visibility: hidden; height: 0; }
.csk-s-msj.devam .csk-av { height: 0; }
.csk-s-msj .kim { font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.csk-s-msj .kim small { font-weight: 500; color: var(--csk-metin-2); font-variant-numeric: tabular-nums; }
.csk-s-msj .kim .bolum { font-weight: 500; color: var(--csk-metin-2); font-size: 11px; }
.csk-s-balon { background: var(--csk-yuzey-2); border-radius: 4px 12px 12px 12px; padding: 7px 11px; margin-top: 3px; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.45; width: fit-content; max-width: 100%; }
.csk-s-msj.devam .csk-s-balon { border-radius: 12px; }
.csk-s-msj.ben { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
.csk-s-msj.ben .csk-av { display: none; }
.csk-s-msj.ben .kim { justify-content: flex-end; }
.csk-s-msj.ben .csk-s-balon { background: var(--csk-mavi); color: #fff; border-radius: 12px 4px 12px 12px; }
.csk-s-msj.ben.devam .csk-s-balon { border-radius: 12px; }
.csk-s-msj.bot .csk-s-balon { background: #f8f0fc; border: 1px solid #eebefa; }
.csk-s-msj.silindi .csk-s-balon { font-style: italic; color: var(--csk-metin-2); background: transparent; border: 1px dashed var(--csk-cizgi); }
.csk-s-msj.vurgu .csk-s-balon { box-shadow: 0 0 0 3px #ffd43b; }
.csk-s-saat-ic { font-size: 10px; color: var(--csk-metin-2); margin-top: 2px; }
.csk-s-msj-arac { position: absolute; top: 18px; right: -34px; opacity: 0; transition: opacity .15s; }
.csk-s-msj.ben .csk-s-msj-arac { right: auto; left: -34px; }
.csk-s-msj:hover .csk-s-msj-arac, .csk-s-msj:focus-within .csk-s-msj-arac { opacity: 1; }
.csk-s-msj-arac button { border: 1px solid var(--csk-cizgi); background: var(--csk-yuzey); border-radius: 6px; width: 28px; height: 26px; display: grid; place-items: center; color: var(--csk-metin-2); padding: 0; cursor: pointer; }
.csk-s-msj-arac button:hover { color: var(--csk-kirmizi); }
.csk-s-isno { font-family: var(--csk-mono); font-weight: 700; color: var(--csk-mavi); background: var(--csk-mavi-acik); border-radius: 4px; padding: 0 4px; text-decoration: none; }
.csk-s-msj.ben .csk-s-isno { color: #fff; background: rgba(255,255,255,.2); }
.csk-s-bahsetme { font-weight: 650; color: var(--csk-turuncu); background: var(--csk-turuncu-acik); border-radius: 4px; padding: 0 3px; }
.csk-s-bahsetme.ben-im { color: #fff; background: var(--csk-turuncu); }
.csk-s-msj.ben .csk-s-bahsetme { color: #fff; background: rgba(255,255,255,.2); }
.csk-is-karti { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--csk-cizgi); background: var(--csk-yuzey); border-radius: 8px; color: var(--csk-metin); text-decoration: none; white-space: normal; max-width: 360px; }
.csk-is-karti:hover { border-color: var(--csk-mavi); color: var(--csk-metin); }
.csk-is-karti .no { font-family: var(--csk-mono); font-weight: 700; color: var(--csk-mavi); }
.csk-is-karti b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csk-is-karti .alt { grid-column: 2; font-size: 12px; color: var(--csk-metin-2); }
.csk-s-bos { margin: auto; text-align: center; color: var(--csk-metin-2); max-width: 340px; display: grid; gap: 6px; justify-items: center; }
.csk-s-bos i { font-size: 36px; }

.csk-s-yazim { border-top: 1px solid var(--csk-cizgi); padding: 10px 12px; display: grid; gap: 6px; position: relative; }
.csk-s-yazim-satir { display: flex; gap: 8px; align-items: flex-end; }
.csk-s-yazim textarea { flex: 1; min-width: 0; border: 1px solid var(--csk-cizgi); border-radius: 8px; padding: 8px 12px; font: inherit; background: var(--csk-yuzey); color: var(--csk-metin); resize: none; max-height: 160px; line-height: 1.45; }
.csk-s-yazim textarea:disabled { background: var(--csk-yuzey-2); }
.csk-s-ipucu { font-size: 11px; color: var(--csk-metin-2); }
.csk-s-oneri { position: absolute; bottom: calc(100% - 4px); left: 12px; width: min(320px, calc(100% - 24px)); background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 8px; box-shadow: var(--csk-golge); overflow: hidden; z-index: 10; }
.csk-s-oneri button { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 10px; text-align: left; color: var(--csk-metin); font-size: 13px; cursor: pointer; }
.csk-s-oneri button[aria-selected="true"], .csk-s-oneri button:hover { background: var(--csk-mavi-acik); }
.csk-s-oneri small { color: var(--csk-metin-2); margin-left: auto; }

.csk-s-bilgi { border-left: 1px solid var(--csk-cizgi); padding: 14px; display: grid; gap: 18px; align-content: start; overflow-y: auto; background: var(--csk-yuzey-2); }
.csk-s-bilgi .grup { display: grid; gap: 8px; }
.csk-s-uye { display: flex; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.csk-s-uye span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csk-s-uye small { color: var(--csk-metin-2); margin-left: auto; font-size: 11px; white-space: nowrap; }
.csk-s-bilgi .csk-is-karti { margin: 0; }

@media (max-width: 1100px) {
  .csk-sohbet, .csk-sohbet.bilgi-kapali { grid-template-columns: 260px 1fr; }
  .csk-s-bilgi { display: none; }
}
@media (max-width: 700px) {
  .csk-sohbet, .csk-sohbet.bilgi-kapali { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .csk-sohbet .csk-s-konusma { display: none; }
  .csk-sohbet.konusma-acik .csk-s-kanallar { display: none; }
  .csk-sohbet.konusma-acik .csk-s-konusma { display: grid; }
  .csk-s-geri { display: grid; }
  .csk-s-msj { max-width: 92%; }
  .csk-s-msj-arac { position: static; opacity: 1; margin-top: 2px; }
}

/* ── İş emri dosya listesi ve önizleme ── */
.csk-dosya-liste { display: grid; max-height: 520px; overflow-y: auto; border: 1px solid var(--csk-cizgi); border-radius: 8px; background: var(--csk-yuzey); }
.csk-dosya { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; border-top: 1px solid var(--csk-cizgi); align-items: start; }
.csk-dosya:first-child { border-top: 0; }
.csk-dosya.secili { background: var(--csk-mavi-acik); }
.csk-dosya-simge { font-size: 24px; line-height: 1; margin-top: 2px; }
.csk-dosya-bilgi { min-width: 0; }
.csk-dosya-ad { font-weight: 650; color: var(--csk-metin); overflow-wrap: anywhere; line-height: 1.35; }
.csk-dosya-meta { font-size: 12px; color: var(--csk-metin-2); }
.csk-dosya-dugmeler { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.csk-dosya-dugmeler .btn { white-space: nowrap; }
.csk-onizleme { background: var(--csk-yuzey-2); border: 1px solid var(--csk-cizgi); border-radius: 8px; min-height: 520px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.csk-onizleme-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--csk-yuzey); border-bottom: 1px solid var(--csk-cizgi); flex-wrap: wrap; }
.csk-onizleme-bas .ad { font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.csk-onizleme-bos { grid-row: 1 / span 2; display: grid; place-content: center; text-align: center; color: var(--csk-metin-2); padding: 24px; gap: 4px; }
.csk-onizleme-bos i { font-size: 36px; }
.csk-onizleme iframe { width: 100%; height: 100%; min-height: 480px; border: 0; background: #fff; }
.csk-onizleme img { max-width: 100%; max-height: 640px; object-fit: contain; margin: 12px auto; display: block; }

/* ── Dashboard (index.php) ── */
:root { --csk-seri-1: #2a78d6; --csk-seri-2: #eb6834; --csk-izgara: #e6e9ef; --csk-metin-3: #8a94a6; --csk-kritik: #d03b3b; --csk-kritik-acik: #fdecec; --csk-uyari: #fab219; --csk-uyari-acik: #fff6e0; --csk-iyi: #0ca30c; }
.csk-db { display: grid; gap: 14px; padding-block: 14px 24px; }
.csk-db-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.csk-db-bas h2 { font-size: 20px; font-weight: 750; margin: 0; }
.csk-db-canli { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--csk-metin-2); }
.csk-db-canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--csk-iyi); box-shadow: 0 0 0 3px rgba(12, 163, 12, .18); }
.csk-db-canli.koptu i { background: var(--csk-uyari); box-shadow: 0 0 0 3px rgba(250, 178, 25, .25); }
@media (prefers-reduced-motion: no-preference) { .csk-db-canli:not(.koptu) i { animation: csk-nabiz 2s ease-in-out infinite; } }
@keyframes csk-nabiz { 50% { box-shadow: 0 0 0 6px rgba(12, 163, 12, 0); } }

.csk-db-serit { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 10px; }
.csk-db-kutu { background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; color: var(--csk-metin); text-decoration: none; }
a.csk-db-kutu:hover { border-color: var(--csk-metin-3); color: var(--csk-metin); }
.csk-db-kutu .deger { font-size: 30px; font-weight: 700; line-height: 1.1; }
.csk-db-kutu.ana .deger { font-size: 48px; }
.csk-db-kutu .deger small { font-size: 14px; font-weight: 600; color: var(--csk-metin-2); }
.csk-db-kutu .alt { font-size: 12px; color: var(--csk-metin-2); }
.csk-db-kutu.kritik { border-color: #f0b3b3; }
.csk-db-durum { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--csk-metin); }
.csk-db-durum::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--csk-kritik); }
.csk-db-durum.uyari::before { background: var(--csk-uyari); }
.csk-db-mini { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; margin-top: 4px; }
.csk-db-mini span { display: block; border-radius: 3px; }
.csk-db-iz { width: 100%; height: 34px; margin-top: 2px; }

.csk-db-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.csk-db-panel { background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 10px; min-width: 0; }
.csk-db-panel-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px 0; flex-wrap: wrap; }
.csk-db-panel-bas h3 { font-size: 14px; font-weight: 700; margin: 0; }
.csk-db-panel-bas p { font-size: 12px; color: var(--csk-metin-2); margin: 0; }
.csk-db-lejant { display: flex; gap: 12px; font-size: 12px; color: var(--csk-metin-2); flex-wrap: wrap; }
.csk-db-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.csk-db-lejant i { width: 10px; height: 10px; border-radius: 3px; }

.csk-db-hat { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); padding: 14px; overflow-x: auto; }
.csk-db-asama { position: relative; padding: 4px 10px 8px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--csk-izgara); color: var(--csk-metin); text-decoration: none; border-radius: 8px; }
.csk-db-asama:hover { background: var(--csk-yuzey-2); color: var(--csk-metin); }
.csk-db-asama:last-child { border-right: 0; }
.csk-db-asama::after { content: "›"; position: absolute; right: -6px; top: 6px; color: var(--csk-metin-3); background: var(--csk-yuzey); font-size: 14px; line-height: 1; padding: 0 1px; }
.csk-db-asama:last-child::after { display: none; }
.csk-db-asama.darbogaz { background: linear-gradient(var(--csk-uyari-acik), transparent 75%); }
.csk-db-asama.bos { opacity: .55; }
.csk-db-asama .ad { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csk-db-asama .wip { font-size: 26px; font-weight: 700; line-height: 1; }
.csk-db-asama .wip small { font-size: 12px; font-weight: 500; color: var(--csk-metin-2); }
.csk-db-yigin { height: 120px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--csk-cizgi); }
.csk-db-yigin > div { width: 24px; display: flex; flex-direction: column-reverse; gap: 2px; }
.csk-db-yigin span { display: block; width: 24px; }
.csk-db-yigin span:last-child { border-radius: 4px 4px 0 0; }
.csk-db-asama .bilgi { display: grid; gap: 3px; font-size: 12px; color: var(--csk-metin-2); }
.csk-db-asama .bilgi b { color: var(--csk-metin); font-weight: 650; }
.csk-db-cip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; width: fit-content; color: var(--csk-metin); background: var(--csk-yuzey-2); }
.csk-db-cip.kritik { background: var(--csk-kritik-acik); }
.csk-db-cip.kritik::before, .csk-db-cip.uyari::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--csk-kritik); }
.csk-db-cip.uyari { background: var(--csk-uyari-acik); }
.csk-db-cip.uyari::before { background: var(--csk-uyari); }

.csk-db-alt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.csk-db-tablo { overflow-x: auto; padding: 6px 4px 8px; }
.csk-db-tablo table { width: 100%; border-collapse: collapse; font-size: 13px; }
.csk-db-tablo th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--csk-metin-2); padding: 8px 10px; border-bottom: 1px solid var(--csk-cizgi); white-space: nowrap; }
.csk-db-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--csk-izgara); font-variant-numeric: tabular-nums; }
.csk-db-tablo .s { text-align: right; }
.csk-db-tablo tr:last-child td { border-bottom: 0; }
.csk-db-tablo a { color: var(--csk-metin); text-decoration: none; font-weight: 600; }
.csk-db-yatay { display: flex; align-items: center; gap: 2px; min-width: 120px; }
.csk-db-yatay span.c { height: 10px; display: block; }
.csk-db-yatay span.c:last-of-type { border-radius: 0 4px 4px 0; }
.csk-db-yatay em { font-style: normal; margin-left: 6px; font-size: 12px; color: var(--csk-metin-2); }

.csk-db-grafik { padding: 8px 14px 12px; position: relative; }
.csk-db-grafik svg { width: 100%; height: auto; display: block; overflow: visible; }
.csk-db-ipucu { position: absolute; pointer-events: none; background: var(--csk-metin); color: var(--csk-yuzey); font-size: 12px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; }
.csk-db-ozet { display: flex; gap: 18px; padding: 0 14px; font-size: 12px; color: var(--csk-metin-2); flex-wrap: wrap; }
.csk-db-ozet b { color: var(--csk-metin); font-size: 16px; }

.csk-db-filtre { display: flex; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.csk-db-filtre button { border: 1px solid var(--csk-cizgi); background: var(--csk-yuzey); color: var(--csk-metin-2); border-radius: 999px; padding: 2px 10px; font: 600 12px inherit; cursor: pointer; }
.csk-db-filtre button[aria-pressed="true"] { background: var(--csk-metin); color: var(--csk-yuzey); border-color: var(--csk-metin); }
.csk-db-gec { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 14px; border-top: 1px solid var(--csk-izgara); color: var(--csk-metin); text-decoration: none; }
.csk-db-gec:hover { background: var(--csk-yuzey-2); color: var(--csk-metin); }
.csk-db-gec .ad { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csk-db-gec .meta { font-size: 12px; color: var(--csk-metin-2); }
.csk-db-gec .gun { grid-row: 1 / span 2; align-self: center; text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.csk-db-gec .gun small { display: block; font-size: 10px; font-weight: 600; color: var(--csk-metin-2); }
.csk-db-gec-cubuk { grid-column: 1 / -1; height: 3px; background: var(--csk-yuzey-2); border-radius: 2px; margin-top: 4px; }
.csk-db-gec-cubuk span { display: block; height: 3px; border-radius: 2px; background: var(--csk-kritik); }
.csk-db-liste-alt { padding: 10px 14px; border-top: 1px solid var(--csk-izgara); font-size: 12px; color: var(--csk-metin-2); display: grid; gap: 8px; }
.csk-db-liste-alt a { color: var(--csk-mavi); font-weight: 650; text-decoration: none; }
.csk-db-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #2fb344; color: #fff; padding: 14px 24px; border-radius: 10px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 2000; max-width: 90%; transition: opacity .5s; }

/* TV modu: menü gizlenir, ekran tam kullanılır */
body.csk-tv header.navbar { display: none; }
body.csk-tv .csk-db { padding-block: 12px; }
body.csk-tv .container-xl { max-width: none; }

@media (max-width: 1200px) {
  .csk-db-serit { grid-template-columns: repeat(3, 1fr); }
  .csk-db-kutu.ana { grid-column: span 3; }
  .csk-db-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .csk-db-alt { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .csk-db-serit { grid-template-columns: 1fr 1fr; }
  .csk-db-kutu.ana { grid-column: span 2; }
}
.csk-isno { font-family: var(--csk-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Tasarım önizleme şeridi ── */
.csk-onizleme-serit { background: #fff6e0; border: 1px solid #f5d98a; color: #5c4400; border-radius: 8px; padding: 6px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csk-onizleme-serit a { font-weight: 700; color: #5c4400; }

/* ── Ortak sayfa parçaları (yeni tasarım) ── */
.csk-sayfa { display: grid; gap: 14px; padding-block: 16px 28px; }
.csk-sayfa-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.csk-sayfa-bas h1 { font-size: 22px; font-weight: 750; margin: 0; color: var(--csk-metin); }
.csk-sayfa-bas p { margin: 2px 0 0; color: var(--csk-metin-2); font-size: 13px; }
.csk-sekme-serit { display: flex; gap: 2px; border-bottom: 1px solid var(--csk-cizgi); overflow-x: auto; }
.csk-sekme-serit a { padding: 8px 12px; font-size: 13px; font-weight: 650; color: var(--csk-metin-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.csk-sekme-serit a:hover { color: var(--csk-metin); }
.csk-sekme-serit a[aria-current="page"] { color: var(--csk-metin); border-bottom-color: var(--csk-mavi); }
.csk-kart { background: var(--csk-yuzey); border: 1px solid var(--csk-cizgi); border-radius: 10px; }
.csk-hap { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--csk-yuzey-2); color: var(--csk-metin); line-height: 1.5; }
.csk-hap::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--csk-metin-3, #8a94a6); }
.csk-hap.mavi::before { background: var(--csk-seri-1, #2a78d6); }
.csk-hap.turuncu::before { background: var(--csk-seri-2, #eb6834); }
.csk-hap.yesil { background: #e8f7ea; } .csk-hap.yesil::before { background: #2fb344; }
.csk-hap.kritik { background: var(--csk-kritik-acik, #fdecec); } .csk-hap.kritik::before { background: var(--csk-kritik, #d03b3b); }
.csk-hap.uyari { background: var(--csk-uyari-acik, #fff6e0); } .csk-hap.uyari::before { background: var(--csk-uyari, #fab219); }
.csk-hap.mor { background: #f8f0fc; } .csk-hap.mor::before { background: #ae3ec9; }
.csk-hap.yalin::before { display: none; }

/* ── Sohbet 3: çevrimiçi, yazıyor, yanıt, dosya, görüldü (2026-11-13) ── */
.csk-s-konusma { grid-template-rows: auto auto 1fr auto auto; }
.csk-av-kap { position: relative; display: inline-flex; flex-shrink: 0; }
.csk-cevrimici-nokta { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #2fb344; border: 2px solid var(--csk-yuzey); display: none; }
.csk-cevrimici-nokta.acik { display: block; }
.csk-s-cevrimici-yazi { color: #2b8a3e; font-weight: 700; }
.csk-s-kanal .son.yaziyor { color: #2b8a3e; font-style: italic; }
.csk-s-yaziyor { font-size: 12px; color: var(--csk-metin-2); font-style: italic; min-height: 20px; padding: 2px 16px 0; }
.csk-s-alinti { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--csk-mavi); background: rgba(32, 107, 196, .08); color: inherit; padding: 4px 8px; border-radius: 4px; margin-bottom: 6px; font-size: 12px; line-height: 1.35; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csk-s-alinti b { display: block; color: var(--csk-mavi); font-size: 11px; }
.csk-s-msj.ben .csk-s-alinti { background: rgba(255, 255, 255, .16); border-left-color: #fff; }
.csk-s-msj.ben .csk-s-alinti b { color: #fff; }
.csk-s-resim { display: block; margin-top: 4px; }
.csk-s-resim img { display: block; max-width: min(280px, 100%); max-height: 280px; border-radius: 8px; background: var(--csk-cizgi); }
.csk-s-dosya { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--csk-cizgi); border-radius: 8px; background: var(--csk-yuzey); color: var(--csk-metin); text-decoration: none; margin-top: 4px; max-width: 320px; white-space: normal; }
.csk-s-dosya:hover { border-color: var(--csk-mavi); color: var(--csk-metin); text-decoration: none; }
.csk-s-dosya > .ti { font-size: 26px; color: var(--csk-mavi); flex-shrink: 0; }
.csk-s-dosya .y { min-width: 0; display: grid; }
.csk-s-dosya b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csk-s-dosya small { color: var(--csk-metin-2); font-size: 11px; }
.csk-s-tik { font-size: 15px; margin-left: 6px; vertical-align: -3px; color: var(--csk-metin-2); }
.csk-s-msj.ben .csk-s-tik { color: rgba(255, 255, 255, .6); }
.csk-s-msj.ben .csk-s-tik.goruldu { color: #fff; }
.csk-s-gorenler { font-size: 11px; color: var(--csk-metin-2); margin-top: 3px; text-align: right; cursor: default; }
.csk-s-msj-arac { display: flex; flex-direction: column; gap: 4px; }
.csk-s-msj-arac button.yanitla:hover { color: var(--csk-mavi); }
.csk-s-yanit-cubuk { display: flex; gap: 8px; align-items: center; background: var(--csk-yuzey-2); border-left: 3px solid var(--csk-mavi); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.csk-s-yanit-cubuk > .ti { color: var(--csk-mavi); font-size: 18px; }
.csk-s-yanit-cubuk .metin { flex: 1; min-width: 0; display: grid; }
.csk-s-yanit-cubuk .metin b { color: var(--csk-mavi); }
.csk-s-yanit-cubuk .metin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--csk-metin-2); }
.csk-s-yukleme { font-size: 12px; color: var(--csk-mavi); font-weight: 600; }
.csk-s-mesajlar.surukleniyor { outline: 2px dashed var(--csk-mavi); outline-offset: -8px; background: var(--csk-mavi-acik); }
@media (max-width: 700px) { .csk-s-msj-arac { flex-direction: row; } }