/* ---------- Temsilci çalışma alanı: Çağrılar (tasarım: "Temsilci arayüzü · Çağrılar", 29.10.2026) ----------
   Üç sütun: sol = selam, kuyruk, bugün, günlük özet · orta = büyük kart (dış arama / çalan çağrı / görüşme / kayıt) · sağ = not, müşteri, asistan (boştayken canlı asistan önizlemesi).
   Sınıflar `dc-` (design component) önekli; yüzeyler tokens.css belirteçlerinden (go / stop / off / raised / pressed / well). `ag-` sınıfları: konuşma yazısı ve müşteri özeti. */

/* tasarımdaki düğme yüzeyleri (her yerde kullanılabilir) */
.raised { border: 0; background: var(--raised-bg); box-shadow: var(--raised-sh); color: var(--ink-900); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.raised:hover:not(:disabled) { transform: translateY(-1px); }
.raised:active:not(:disabled) { transform: none; box-shadow: var(--raised-sh-bas); }
.pressed { border: 0; background: var(--pressed-bg); box-shadow: var(--pressed-sh); color: var(--pressed-ink); }
.go { border: 0; color: #fff; background: var(--go-bg); box-shadow: var(--go-sh); }
.go:hover:not(:disabled) { filter: brightness(1.06); }
.stop { border: 0; color: #fff; background: var(--stop-bg); box-shadow: var(--stop-sh); }
.stop:hover:not(:disabled) { filter: brightness(1.06); }
.off { border: 0; background: var(--off-bg); color: var(--off-ink); box-shadow: var(--off-sh); cursor: not-allowed; }
.raised:disabled { background: var(--off-bg); color: var(--off-ink); box-shadow: var(--off-sh); cursor: not-allowed; }

.dc-sayfa { display: flex; flex-direction: column; gap: 20px; }
/* Üçüncü sütun boş yanları kullanır: ekran genişledikçe 760 px'e kadar büyür (içindeki kartlar kendiliğinden iki kolona bölünür).
   Satır en az ekran yüksekliği kadardır (üst çubuk + alt boşluk düşülür): sağdaki panel her ekranda ekran boyunu doldurur, sayfayı uzatmaz. */
.dc-stage { display: grid; grid-template-columns: 300px 540px minmax(300px, 760px); gap: 36px; justify-content: center; align-items: start; min-height: min(calc(100vh - 175px), 880px); }
.dc-sag { align-self: stretch; }
.dc-sag-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; }
.dc-sag-izgara > .dc-kolon:empty { display: none; }          /* asistan/konuşma kartları (ses servisi yoksa) hiçbir şey çizmez: boş kolon yer tutmasın */
.as-yan-kap { position: relative; flex: 1 1 auto; min-height: 320px; }           /* kendi yüksekliği yok: satırı büyütmez, sütunun kalanını doldurur */
.dc-kolon { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dc-orta { min-width: 0; }
.dc-selam { margin: 0; padding: 4px 4px 8px; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; text-wrap: balance; }
.dc-canli-ses { max-width: 860px; width: 100%; margin: 0 auto; }

/* paneller */
.dc-panel { border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.dc-bilgi-kose { position: absolute; top: 14px; right: 16px; }
.dc-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-600); }
.dc-eyebrow-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-canli { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--pos-ink); text-align: right; }
.dc-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--pos)); flex: none; }
.dc-nabiz { animation: dc-nabiz 1.8s ease-out infinite; }
@keyframes dc-nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--pos)) 50%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.dc-sayi-satir { display: flex; align-items: baseline; gap: 10px; }
.dc-sayi-buyuk { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.dc-birim { font-size: 14px; color: var(--ink-600); font-weight: 600; }
.dc-aciklama { margin: 0; font-size: 13px; color: var(--ink-600); line-height: 1.55; text-wrap: pretty; }
.dc-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 18px; }
.dc-satir-ad { font-weight: 700; min-width: 0; }
.dc-satir-etiket { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.dc-satir b { font-weight: 800; white-space: nowrap; }
.dc-satir-sag { display: flex; align-items: center; gap: 10px; flex: none; }
.dc-satir-sag .wait { font-size: 14px; }
.dc-satir-sag .wait.long { color: var(--neg-ink); }
.dc-ikili { flex-direction: row; align-items: center; gap: 0; padding-top: 28px; }
.dc-ikili > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-deger { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.dc-deger.warn { color: var(--warn-ink); }
.dc-deger.neg { color: var(--neg-ink); }
.dc-etiket { font-size: 12px; font-weight: 600; color: var(--ink-600); }
.dc-ayrac { width: 1px; align-self: stretch; background: var(--line-2); margin: 0 18px; flex: none; }

/* küçük yuvarlak düğme (kuyruk satırında Cevapla) */
.dc-mini { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: var(--raised-bg); box-shadow: var(--raised-sh); color: var(--pos-ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dc-mini:hover:not(:disabled) { transform: translateY(-1px); }
.dc-mini:active:not(:disabled) { transform: none; box-shadow: var(--raised-sh-bas); }
.dc-mini:disabled { background: var(--off-bg); color: var(--off-ink); box-shadow: var(--off-sh); cursor: not-allowed; }

/* büyük kart */
.dc-hero { min-height: 700px; box-sizing: border-box; border-radius: var(--r-hero); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.dc-bosluk { flex: 1 1 auto; }
.dc-baslik-kap { display: flex; flex-direction: column; gap: 4px; }
.dc-baslik { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.dc-ipucu { font-size: 12.5px; color: var(--ink-600); font-weight: 500; }
.dc-numara-kap { display: flex; align-items: center; justify-content: center; min-height: 84px; }
.dc-numara { width: 100%; border: 0; background: transparent; text-align: center; font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink-900); padding: 0; border-radius: 16px; min-width: 0; }
.dc-numara::placeholder { color: var(--ink-300); }
.dc-numara:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.dc-oneri { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: -8px; }
.dc-oneri-dugme { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-pill); padding: 7px 14px; background: var(--raised-bg); box-shadow: var(--raised-sh); font-size: 12.5px; color: var(--ink-700); }
.dc-oneri-dugme b { color: var(--ink-900); font-weight: 700; }
.dc-tus { display: grid; grid-template-columns: repeat(3, 76px); gap: 20px 24px; justify-content: center; }
.dc-tus button { width: 76px; height: 76px; border-radius: 50%; border: 0; font-size: 24px; font-weight: 700; color: var(--ink-900); background: var(--raised-bg); box-shadow: var(--raised-sh); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dc-tus button:hover { transform: translateY(-1px); }
.dc-tus button:active { transform: none; box-shadow: var(--raised-sh-bas); }
.dc-tus.kucuk { grid-template-columns: repeat(3, 64px); gap: 14px 18px; }
.dc-tus.kucuk button { width: 64px; height: 64px; font-size: 20px; }
.dc-alt { display: flex; align-items: center; gap: 12px; }
.dc-esnek { flex: 1 1 auto; min-width: 0; }
.dc-esnek > .dc-hap { width: 100%; min-width: 0; }
.dc-esnek > .dc-hap > span { overflow: hidden; text-overflow: ellipsis; }
.dc-hap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 64px; padding: 0 26px; border-radius: var(--r-pill); font-size: 14px; font-weight: 800; white-space: nowrap; flex: none; }
.dc-hap.dc-esnek { flex: 1 1 auto; }
.dc-hap.raised { font-weight: 700; }
.dc-hap.go, .dc-hap.stop, .dc-hap.off { padding: 0 30px; font-size: 15px; }
.dc-blok { width: 100%; }
.dc-yuvarlak { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; padding: 0; border-radius: 50%; }
.dc-yuvarlak.dc-kucuk { width: 52px; height: 52px; }
.dc-reddet { color: var(--neg-ink); }

/* yalnız gelen çağrı alan temsilcinin bekleme kartı (Dış arama yok) */
.dc-bos-metin { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dc-bekleme .dc-aciklama { font-size: 14px; max-width: 360px; }

/* çalan çağrı / görüşme sahnesi */
.dc-calan-ust { display: flex; align-items: center; gap: 10px; min-height: 52px; font-size: 14px; font-weight: 700; color: var(--ink-600); }
.dc-calan-ust .dc-nokta { width: 10px; height: 10px; }
.dc-ust-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.dc-ust-sag { display: flex; align-items: center; gap: 12px; }
.dc-sahne { position: relative; height: 300px; flex: none; }
.dc-disk-kap { position: absolute; left: 50%; top: 28px; width: 176px; height: 176px; margin-left: -88px; z-index: 1; }
.card.buyuk.dc-disk { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dc-halka { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--marka-eflatun); animation: dc-halka 2.6s ease-out infinite; }
.dc-halka.d2 { animation-delay: 0.87s; }
.dc-halka.d3 { animation-delay: 1.74s; }
@keyframes dc-halka { 0% { transform: scale(0.85); opacity: 0.55; } 100% { transform: scale(1.75); opacity: 0; } }
.dc-yay { position: absolute; left: 50%; margin-left: -238px; top: 146px; max-width: none; }
.dc-yay path:first-child { stroke: var(--hi); stroke-width: 3; stroke-linecap: round; }
.dc-yay path:last-child { stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.dc-hap-canli { position: absolute; left: 50%; top: 223px; transform: translateX(-50%); min-width: 92px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 800; z-index: 2; background: var(--raised-bg); box-shadow: var(--raised-sh); white-space: nowrap; }
.dc-tus-sahne { display: flex; align-items: center; justify-content: center; }
.dc-kimlik { display: flex; flex-direction: column; gap: 14px; }
.dc-rozet { align-self: flex-start; font-size: 12px; }
.dc-kimlik-satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dc-kimlik-metin { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-ad { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; overflow-wrap: anywhere; }
.dc-no { font-size: 15px; font-weight: 600; color: var(--ink-600); }
.dc-kuyruk-adi { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-600); }
.dc-sure { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.dc-sure span { font-size: 12px; font-weight: 700; color: var(--ink-600); }
.dc-sure b { font-size: 36px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dc-form { display: flex; flex-direction: column; gap: 16px; }
.dc-bitti .dc-form { margin-top: 4px; }

/* sağ sütun */
.dc-not { box-sizing: border-box; width: 100%; height: 120px; border: 0; border-radius: 20px; padding: 14px 16px; resize: none; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ink-900); }
.dc-not::placeholder { color: var(--ink-300); }

/* müşteri özeti (sağ sütundaki panel içinde) */
.ag-bilgi { margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--well-bg); box-shadow: var(--well-sh); }
.ag-sayilar { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-600); font-weight: 600; }
.ag-sayilar b { color: var(--ink-900); font-weight: 800; font-variant-numeric: tabular-nums; }
.ag-sayilar .uyari b { color: var(--warn-ink); }
.ag-not { font-size: 13px; line-height: 1.55; color: var(--ink-700); }
.ag-gecmis { border-top: 1px solid var(--line-2); padding-top: 4px; }

/* canlı konuşma yazısı (yan oturum: konusma-karti.js) */
.ag-talep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ag-talep-etiket { font-size: 12.5px; font-weight: 700; color: var(--ink-600); }
.ag-satirlar { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.ag-satir { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; }
.ag-kim { font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; text-align: center; padding: 3px 0; border-radius: var(--r-pill); background: var(--well-bg); box-shadow: var(--well-sh); color: var(--ink-600); }
.ag-satir.musteri .ag-kim { background: var(--accent-soft); box-shadow: none; color: var(--accent-ink); }
.ag-yazi { color: var(--ink-900); overflow-wrap: anywhere; }
.ag-konusma .notice { margin-bottom: 12px; }

/* gösterge şeridi (diğer sayfaların başı) */
.mini-stat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: var(--r-pill); background: var(--well-bg); box-shadow: var(--well-sh); }
.mini-ico { display: inline-flex; color: var(--ink-600); }
.mini-val { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.mini-label { font-size: 12px; font-weight: 700; color: var(--ink-600); }
.mini-stat.tone-warn .mini-val { color: var(--warn-ink); }
.mini-stat.tone-neg .mini-val { color: var(--neg-ink); }
.mini-stat .info-btn { margin-left: 2px; }

@media (max-width: 1320px) {
  .dc-stage { grid-template-columns: minmax(0, 540px); min-height: 0; }
  .dc-orta { order: -1; }
  .dc-sol { order: 1; }
  .dc-sag { order: 2; }
}
@media (max-width: 720px) {
  .dc-hero { padding: 22px 18px; border-radius: 36px; min-height: 0; }
  .dc-numara { font-size: 34px; }
  .dc-tus { grid-template-columns: repeat(3, 68px); gap: 14px 18px; }
  .dc-tus button { width: 68px; height: 68px; }
  .dc-ad { font-size: 24px; }
  .dc-sure b { font-size: 28px; }
  .dc-hap.go, .dc-hap.stop, .dc-hap.off { padding: 0 22px; }
  .dc-alt { gap: 8px; }
  .dc-alt .dc-hap { height: 56px; }
  .dc-alt .dc-yuvarlak { width: 52px; height: 52px; }
  .dc-alt .dc-esnek > .dc-hap { padding: 0 12px; gap: 8px; }
  .dc-alt .dc-hap.go, .dc-alt .dc-hap.off { padding: 0 20px; }
  .dc-yay { display: none; }
  .dc-sahne { height: 250px; }
  .dc-hap-canli { top: 205px; }
  .dc-selam { font-size: 26px; }
}