/* Panel arayüzü — nötr kurumsal palet, derleme yok. */

:root {
  --zemin: #f4f6f8;
  --yuzey: #ffffff;
  --cizgi: #dfe4ea;
  --metin: #1f2933;
  --sonuk: #6b7785;
  --vurgu: #2f5d8c;
  --vurgu-acik: #e8f0f8;
  --uyari: #b4531f;
  --uyari-acik: #fdf1e8;
  --ok: #2c6e49;
  --hata: #a8322a;
  --golge: 0 1px 2px rgba(31, 41, 51, 0.08);
  --yuvarlak: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* --------------------------------------------------------------- üst şerit */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0;
  color: var(--sonuk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar h1 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
}

.status-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: 13px;
}

.status-pill.ok {
  background: #e9f3ed;
  color: var(--ok);
}

.status-pill.hata {
  background: #fbeceb;
  color: var(--hata);
}

.refresh-button {
  padding: 6px 14px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--yuzey);
  color: var(--metin);
  cursor: pointer;
  font-size: 13px;
}

.refresh-button:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

/* ---------------------------------------------------------------- yerleşim */
.workspace {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: 1fr;
  }
}

.pano {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 16px;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.panel-heading h2 {
  margin: 0;
}

.count {
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.hint {
  color: var(--sonuk);
  font-size: 12px;
}

.ozet {
  margin: 0;
  color: var(--metin);
  font-size: 13px;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------ kartlar */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.kart {
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--vurgu);
  border-radius: 8px;
  padding: 9px 11px;
}

.kart.kritik {
  border-left-color: var(--uyari);
  background: var(--uyari-acik);
}

.kart.anomali {
  border-left-color: var(--vurgu);
  background: var(--vurgu-acik);
}

.kart h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.kart-alt {
  margin: 3px 0 0;
  color: var(--sonuk);
  font-size: 12px;
}

.rozet {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(31, 41, 51, 0.06);
  color: var(--sonuk);
  font-size: 11px;
}

.kategori-list {
  display: flex;
  flex-direction: column;
}

.kategori-satir {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 13px;
}

.kategori-satir:last-child {
  border-bottom: none;
}

.kategori-sag {
  color: var(--sonuk);
  font-size: 12px;
  white-space: nowrap;
}

.kategori-sag.uyari {
  color: var(--uyari);
  font-weight: 600;
}

.bos {
  margin: 0;
  color: var(--sonuk);
  font-size: 13px;
}

/* ------------------------------------------------------------------- sohbet */
.sohbet {
  display: flex;
  flex-direction: column;
  min-height: 620px;
}

.mesajlar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
  overflow-y: auto;
  max-height: 60vh;
}

.balon {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.balon.kullanici {
  align-self: flex-end;
  background: var(--vurgu);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.balon.asistan {
  align-self: flex-start;
  background: #eef1f4;
  color: var(--metin);
  border-bottom-left-radius: 3px;
}

.balon.yaziyor {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 12px 14px;
}

.balon.yaziyor span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sonuk);
  animation: zipla 1.2s infinite ease-in-out;
}

.balon.yaziyor span:nth-child(2) {
  animation-delay: 0.15s;
}

.balon.yaziyor span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes zipla {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.oneri-cipleri {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 0;
}

.cip {
  padding: 5px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--vurgu);
  cursor: pointer;
  font-size: 12px;
}

.cip:hover {
  background: var(--vurgu-acik);
}

.giris {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cizgi);
}

.giris input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  font: inherit;
  color: var(--metin);
}

.giris input:focus {
  outline: none;
  border-color: var(--vurgu);
}

.giris input:disabled {
  background: #f0f2f4;
  color: var(--sonuk);
}

.giris button {
  padding: 10px 20px;
  border: none;
  border-radius: var(--yuvarlak);
  background: var(--vurgu);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.giris button:disabled {
  background: #9fb3c8;
  cursor: progress;
}

.giris-not {
  margin: 6px 0 0;
  min-height: 16px;
  color: var(--sonuk);
  font-size: 12px;
}

/* ------------------------------------------ Canlı Tarama Akışı (Faz 6) */
/*
 * Mevcut kurallara DOKUNULMAZ — yalnız ek. Renkler mevcut token'lardan
 * gelir; anomali renk kodu docs/DEMO.md ile birebir:
 * Yüksek = kırmızı (--hata), Orta = turuncu (--uyari), Düşük = gri/mavi.
 */

.canli-rozet {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(31, 41, 51, 0.06);
  color: var(--sonuk);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.canli-rozet.canli {
  background: #e9f3ed;
  color: var(--ok);
}

.canli-rozet.sekteli,
.canli-rozet.yedek {
  background: var(--uyari-acik);
  color: var(--uyari);
}

.akis-liste {
  max-height: 360px;
}

.akis-kart {
  border-left-color: var(--sonuk);
  background: var(--yuzey);
}

.akis-ek {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Boş fark/açıklama satırı yer kaplamasın. */
.akis-ek:empty {
  display: none;
}

.akis-cip {
  margin-top: 6px;
  font-weight: 600;
}

/* Okundu — kart daha yeni doğdu, motor henüz bakmadı. */
.akis-kart.okundu {
  border-left-color: var(--sonuk);
}

.akis-cip.okundu {
  background: rgba(31, 41, 51, 0.06);
  color: var(--sonuk);
}

/* Mutabakat… — tur sürüyor; pulse yalnız BU durumda döner. */
.akis-kart.mutabakat {
  border-left-color: var(--vurgu);
  background: var(--vurgu-acik);
}

.akis-cip.mutabakat {
  background: var(--vurgu);
  color: #fff;
  animation: canli-pulse 1.4s infinite ease-in-out;
}

@keyframes canli-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Eşleşti — nihai, yeşil. */
.akis-kart.eslesti {
  border-left-color: var(--ok);
  background: #f1f8f4;
}

.akis-cip.eslesti {
  background: #e9f3ed;
  color: var(--ok);
}

/* Ara durumlar: anomali/sonuç bekleniyor (pulse YOK — animasyon donmasın). */
.akis-kart.bekliyor {
  border-left-color: var(--sonuk);
}

.akis-cip.bekliyor {
  background: rgba(31, 41, 51, 0.06);
  color: var(--sonuk);
}

/* Anomali seviyeleri — DEMO.md renk kuralı. */
.akis-kart.kirmizi {
  border-left-color: var(--hata);
  background: #fbeceb;
}

.akis-cip.kirmizi {
  background: var(--hata);
  color: #fff;
}

.akis-kart.turuncu {
  border-left-color: var(--uyari);
  background: var(--uyari-acik);
}

.akis-cip.turuncu {
  background: var(--uyari);
  color: #fff;
}

.akis-kart.dusuk,
.akis-kart.gri {
  border-left-color: var(--vurgu);
  background: var(--vurgu-acik);
}

.akis-cip.dusuk,
.akis-cip.gri {
  background: #dde6ef;
  color: var(--vurgu);
}

/* ------------------------------------------------------------ demo şeridi */
/* `hidden` iken hiç görünmez — CANLI_QR_DEMO kapalıyken DOM'a da girmez. */
.demo-serit[hidden] {
  display: none;
}

.demo-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--cizgi);
}

.demo-etiket {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--uyari-acik);
  color: var(--uyari);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-secim {
  flex: 1;
  min-width: 140px;
  padding: 6px 9px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: 12px;
}

.demo-butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-buton {
  padding: 6px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--vurgu);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.demo-buton:hover {
  background: var(--vurgu-acik);
  border-color: var(--vurgu);
}

.demo-durum {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--sonuk);
  font-size: 12px;
}

/* --------------------------------------------------- eşleştirme QR paneli */
/* K-E7: kutu varsayılan KAPALI — QR duvar ekranında sürekli durmaz. */
.eslestirme[hidden] {
  display: none;
}

.eslestirme {
  padding: 10px 12px;
}

.eslestirme-ac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--metin);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.eslestirme-ac:hover {
  color: var(--vurgu);
}

.eslestirme-ok {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.eslestirme-ac[aria-expanded="true"] .eslestirme-ok {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.eslestirme-govde[hidden] {
  display: none;
}

.eslestirme-govde {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

.eslestirme-ipucu {
  margin: 0;
  color: var(--sonuk);
  font-size: 12px;
  text-align: center;
}

#eslestirme-qr {
  width: 200px;
  max-width: 100%;
  height: auto;
  padding: 8px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: #ffffff;
  cursor: zoom-in;
}

#eslestirme-qr[hidden] {
  display: none;
}

.eslestirme-durum {
  margin: 0;
  color: var(--uyari);
  font-size: 12px;
  text-align: center;
}

.eslestirme-durum[hidden] {
  display: none;
}

.eslestirme-tekrar {
  padding: 5px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--vurgu);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.eslestirme-tekrar[hidden] {
  display: none;
}

.eslestirme-tekrar:hover {
  background: var(--vurgu-acik);
  border-color: var(--vurgu);
}

/* K-E6: büyütme saf sınıf geçişi — aynı blob URL, ikinci istek yok. */
.qr-buyuk[hidden] {
  display: none;
}

.qr-buyuk {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 41, 51, 0.72);
  cursor: zoom-out;
}

.qr-buyuk img {
  width: min(80vw, 80vh);
  height: auto;
  padding: 16px;
  border-radius: var(--yuvarlak);
  background: #ffffff;
}

/* --------------------------------------------------- raf etiketi paneli */
/* K-E7 deseniyle aynı: kutu varsayılan KAPALI — 82 seçenek duvar ekranında
   sürekli açık durmaz, yalnız istenince açılır. */
.etiket-panel[hidden] {
  display: none;
}

.etiket-panel {
  padding: 10px 12px;
}

.etiket-ac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--metin);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.etiket-ac:hover {
  color: var(--vurgu);
}

.etiket-ok {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.etiket-ac[aria-expanded="true"] .etiket-ok {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.etiket-govde[hidden] {
  display: none;
}

.etiket-govde {
  padding-top: 10px;
}

.etiket-secim {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: 12px;
}

.etiket-onizleme {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#etiket-qr {
  width: 220px;
  max-width: 100%;
  height: auto;
  padding: 8px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: #ffffff;
}

#etiket-qr[hidden] {
  display: none;
}

.etiket-durum {
  margin: 8px 0 0;
  color: var(--sonuk);
  font-size: 12px;
  text-align: center;
}

.etiket-durum[hidden] {
  display: none;
}

.etiket-yazdir {
  display: block;
  margin: 10px auto 0;
  padding: 6px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--vurgu);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.etiket-yazdir[hidden] {
  display: none;
}

.etiket-yazdir:hover {
  background: var(--vurgu-acik);
  border-color: var(--vurgu);
}