/* ═══════════════════════════════════════════════════════════════════════════
   panel.css — kanon.css'in domain-iade uzantısı.
   Kanonda OLMAYAN bileşenler burada: hat sağlığı · seçim şeridi · pencere
   geri sayımı · konuşma balonları · aşama işaretleyici.
   Renk/ölçü DEĞERİ tanımlanmaz, yalnız kanon değişkenleri kullanılır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Üst şerit: gönderici hat sağlığı ──
   Numara sarıya düşerse gönderim durur; bu yüzden kalite üst şeritte,
   sayfanın içinde değil. */
.hat{display:flex;align-items:center;gap:9px;height:32px;padding:0 11px;flex:none;
  background:var(--k);border:1px solid var(--cz);border-radius:8px}
.hat .nk-yesil{width:7px;height:7px;border-radius:50%;background:var(--ak);flex:none}
.hat span{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.hat b{font-size:11.5px;font-weight:600;color:var(--ak2)}
.hat em{font-size:11.5px;font-style:normal;color:var(--ink5);
  border-left:1px solid var(--cz2);padding-left:9px}

/* ── Örnek veri taşıyan metrik: sayı gerçekmiş gibi durmasın ── */
.mk.ornek{background:var(--k3);border-style:dashed}
.mk.ornek .dg{color:var(--ink4)}

/* ── Tablo ── */
.tablo-kaydir{overflow-x:auto}
#t-kuyruk td:first-child,#t-kuyruk th:first-child{padding-right:0}
#t-kuyruk input[type=checkbox]{width:14px;height:14px;accent-color:var(--ak);cursor:pointer}
#t-kuyruk tr.secili{background:var(--ak-yum)}
#t-kuyruk tr.secili:hover{background:var(--ak-yum)}
#t-kuyruk td.ad{max-width:190px}
/* Günlük kullanılan iş listesi: satır sıkılaştırıldı, kaydırmadan 2 satır daha girsin.
   Yatay dolgu 12→10px: 8 sütun 1440'ta 14px taşıyordu, durum sütunu kırpılıyordu (ölçüldü). */
#t-kuyruk tbody td{padding:8px 10px}
#t-kuyruk thead th{padding-left:10px;padding-right:10px}
#t-kuyruk thead th:first-child,#t-kuyruk tbody td:first-child{padding-left:16px}
#t-kuyruk td.sag,#t-kuyruk th.sag{padding-right:16px}
#t-kuyruk td.sut-varyant{color:var(--ink5)}

/* ── Seçim şeridi: kaç öğe seçildi + toplu işlem (operasyon paneli kuralı) ── */
.secim-serit{margin-top:auto;border-top:1px solid var(--cz2);padding:10px 16px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--k3);
  border-radius:0 0 9px 9px}
.secim-serit>span{font-size:11.5px;color:var(--ink3);margin-right:auto}
.secim-serit b{color:var(--ink);font-weight:600}
.ana-dug{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  color:var(--yan-ak);background:var(--ak);border:1px solid var(--ak3);border-radius:7px;
  padding:6px 13px;cursor:pointer;flex:none}
.ana-dug:hover{background:var(--ak3)}
.ana-dug[disabled]{background:var(--k2);color:var(--ink6);border-color:var(--cz2);cursor:not-allowed}

/* ── 24 saatlik pencere geri sayımı ──
   Bu işin en kritik zamanlayıcısı: pencere kapanınca serbest yazışma biter,
   yeniden şablon parası gerekir. O yüzden konuşmanın en üstünde. */
.pencere{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--cz2);background:var(--uy-yum);flex-wrap:wrap}
.pencere svg{color:var(--uy-ink);flex:none}
.pencere>div{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.pencere b{font-size:13.5px;font-weight:600;color:var(--uy-ink)}
.pencere span{font-size:11px;color:var(--uy-ink);opacity:.8}
.pencere .cubuk{flex:1 1 100%;height:4px;background:var(--uy-cz);border-radius:2px;overflow:hidden}
.pencere .cubuk i{display:block;height:100%;background:var(--uy);border-radius:2px;transform-origin:left}

/* ── İki sütunlu çalışma yüzeyi ──
   İlk turda metrikler tam genişlikti; konuşma paneli aşağıdan başlayınca
   aşama işaretleyici katlamanın altına düştü (ölçüldü). Metrikler artık
   kuyruk sütununun İÇİNDE; konuşma sağda, üst şeridin hemen altından başlar. */
.sol-sutun{grid-column:span 8;display:flex;flex-direction:column;gap:20px;min-width:0}
.sol-sutun .metrikler{grid-column:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kuyruk-pan{background:var(--k);border:1px solid var(--cz);border-radius:9px;
  display:flex;flex-direction:column}

/* Sağ sütun panelleri satır yüksekliğine ESNEMEZ; içeriği kadar dururlar.
   (Özette A/B paneli huninin boyuna uzayıp koca boşluk bırakıyordu.) */
.pan.s4{align-self:start}
/* Konuşma paneli ayrı: ekran yüksekliğine sabitlenir, taşan yalnız mesaj akışıdır.
   Bu kural yalnız kuyruk sayfasına ait, özetteki panellere sızmamalı. */
.konusma-pan{position:sticky;top:88px;max-height:calc(100vh - 112px);align-self:stretch}
.konusma{padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  flex:1 1 auto;overflow-y:auto;min-height:120px}
.msj{max-width:88%;display:flex;flex-direction:column;gap:3px}
.msj p{font-size:12.5px;line-height:1.5;padding:9px 11px;border-radius:9px}
.msj time{font-size:10px;color:var(--ink6)}
.msj.giden{align-self:flex-end;align-items:flex-end}
.msj.giden p{background:var(--ak-yum);border:1px solid var(--ak-cz);color:var(--ink);
  border-bottom-right-radius:3px}
.msj.gelen{align-self:flex-start}
.msj.gelen p{background:var(--k2);border:1px solid var(--cz2);border-bottom-left-radius:3px}

/* ── Yanıt kutusu ── */
.yanit{border-top:1px solid var(--cz2);padding:11px 16px;display:flex;flex-direction:column;gap:8px}
.yanit textarea{width:100%;resize:vertical;font:inherit;font-size:12.5px;color:var(--ink);
  background:var(--k3);border:1px solid var(--cz);border-radius:8px;padding:8px 10px;outline:0}
.yanit textarea:focus{border-color:var(--ak);background:var(--k)}
.yanit textarea::placeholder{color:var(--ink6)}
.yanit textarea[disabled]{background:var(--k2);color:var(--ink6)}
.yanit-alt{display:flex;gap:7px;flex-wrap:wrap}

/* ── Aşama işaretleyici: eğitim etiketi ── */
.asama{border-top:1px solid var(--cz2);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.asama .et{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink5);font-weight:600}
.asama-dug{display:flex;gap:6px;flex-wrap:wrap}
.asama-dug button{cursor:pointer;border-style:solid}
.asama-dug button.on{box-shadow:inset 0 0 0 1px var(--ak2)}
.asama .not{font-size:11px;color:var(--ink5);line-height:1.45}

/* ── Kırılma noktaları ──
   Dar ekranda satır alt alta DİZİLMEZ; önceliksiz sütun gizlenir (kanon kuralı). */
@media(max-width:1280px){
  .sol-sutun{grid-column:span 12}
  .sol-sutun .metrikler{grid-template-columns:repeat(3,1fr)}
  .konusma-pan{position:static;max-height:none}
}
@media(max-width:860px){
  .sol-sutun .metrikler{grid-template-columns:repeat(2,1fr)}
}
/* Mobilde altı kartı alt alta dizmek iş yüzeyini altı ekran aşağı itiyordu (ölçüldü).
   İki sütun + sıkı kart: kuyruk tablosu ilk kaydırmada görünüyor. */
@media(max-width:560px){
  .sol-sutun .metrikler{grid-template-columns:repeat(2,1fr);gap:10px}
  .sol-sutun .mk{padding:10px 11px 9px}
  .sol-sutun .mk .ub{margin-bottom:6px}
  .sol-sutun .mk .ub svg{display:none}
  .sol-sutun .mk .dg{font-size:17px}
  .sol-sutun .mk .alt{margin-top:6px}
}
@media(max-width:1024px){
  #t-kuyruk th.sut-varyant,#t-kuyruk td.sut-varyant{display:none}
}
@media(max-width:860px){
  .hat em{display:none}
}
@media(max-width:560px){
  .hat span{display:none}
  .secim-serit .sdug{display:none}
}

/* ══ GİRİŞ SAYFASI ══ */
.giris-sayfa{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.giris{width:100%;max-width:330px;background:var(--k);border:1px solid var(--cz);border-radius:9px;
  padding:26px 24px;display:flex;flex-direction:column;gap:13px}
.giris h1{font-size:17px;font-weight:600;letter-spacing:-.015em}
.giris>p{font-size:11.5px;color:var(--ink5);margin-top:-9px;margin-bottom:4px}
.giris label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink3)}
.giris input{font:inherit;font-size:12.5px;color:var(--ink);background:var(--k3);
  border:1px solid var(--cz);border-radius:8px;padding:8px 10px;outline:0}
.giris input:focus{border-color:var(--ak);background:var(--k)}
.giris button{margin-top:6px;font:inherit;font-size:12.5px;font-weight:500;color:var(--yan-ak);
  background:var(--ak);border:1px solid var(--ak3);border-radius:7px;padding:8px;cursor:pointer}
.giris button:hover{background:var(--ak3)}
.giris-hata{font-size:11.5px;color:var(--ht);background:var(--ht-yum);
  border:1px solid var(--ht-cz);border-radius:7px;padding:8px 10px}

/* ══ HUNİ ══
   Her basamağın çubuğu BİR ÖNCEKİNE oranla daralır; oran aradaki dönüşümü söyler.
   Sıfır basamak silik gösterilir ama gizlenmez: "ölçülmedi" de bilgidir. */
.huni{padding:16px;display:flex;flex-direction:column;gap:13px}
.hb-ust{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.hb-ad{font-size:12.5px;color:var(--ink2);margin-right:auto}
.hb-oran{font-size:11.5px;font-weight:600;color:var(--ak);background:var(--ak-yum);
  border:1px solid var(--ak-cz);border-radius:5px;padding:1px 6px}
.hb-oran.yok{color:var(--ink5);background:var(--nt-yum);border-color:var(--nt-cz)}
.hb-cubuk{height:9px;background:var(--cz3);border-radius:3px;overflow:hidden}
.hb-cubuk i{display:block;height:100%;background:var(--tan);border-radius:3px;
  transform-origin:left;transition:width .5s cubic-bezier(.22,1,.36,1)}
.hb-cubuk i.ak{background:var(--ak)}
.hb-alt{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.hb-alt b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.hb-alt em{font-size:11.5px;font-style:normal;color:var(--ink5)}
.hb.bos .hb-cubuk i{background:var(--cz)}
.hb.bos .hb-alt b{color:var(--ink5)}

/* ══ A/B KARŞILAŞTIRMA ══ */
.vs-kutu{padding:16px;display:flex;flex-direction:column;gap:15px;flex:1 1 auto}
.vs-ust{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.vs-ust b{font-size:12.5px;font-weight:600;margin-right:auto}
.vs-ust span{font-size:11.5px;color:var(--ink5)}
.vs-cubuk{height:7px;background:var(--cz3);border-radius:4px;overflow:hidden}
.vs-cubuk i{display:block;height:100%;background:var(--ak);border-radius:4px}
.vs-alt{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:11.5px;color:var(--ink4)}
.vs-alt b{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink)}

/* ══ BOŞ DURUMLAR — listeyi öğretirler, süs değildir ══ */
.bos-not{padding:16px;font-size:12px;line-height:1.55;color:var(--ink4)}
.bos-hucre{padding:22px 16px!important;text-align:center;font-size:12px;color:var(--ink4)}
.bos-hucre code{font-family:var(--mono);font-size:11.5px;background:var(--k2);
  border:1px solid var(--cz2);border-radius:5px;padding:1px 5px}
.bos-konusma{padding:26px 20px;display:flex;flex-direction:column;align-items:center;
  gap:9px;text-align:center;flex:1 1 auto;justify-content:center}
.bos-konusma svg{color:var(--ink6);width:22px;height:22px}
.bos-konusma b{font-size:12.5px;font-weight:600}
.bos-konusma p{font-size:11.5px;line-height:1.55;color:var(--ink5);max-width:280px}

/* Paylaşımlı kutu: kimin ilgilendiği satırda görünür */
.atanmamis{font-size:11.5px;color:var(--ink6)}
@media(max-width:1024px){
  #t-kuyruk th.sut-atanan,#t-kuyruk td.sut-atanan{display:none}
}

/* Domain sütunu uzun (adanatikanikgideracma.com.tr): kırpılır, tamamı ipucunda.
   Numara listeden çıkarıldı; listeden telefon aranmıyor, o bilgi detay panelinde. */
#t-kuyruk td.dom{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ ADAY DETAYI ══ */
.kunye{padding:13px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--cz2)}
.kunye .ks{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline;font-size:12.5px}
.kunye .et{font-size:11px;color:var(--ink5)}
.kunye b{font-weight:500;overflow-wrap:anywhere}

.metin-kutu{padding:13px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--cz2)}
.mk-ust{display:flex;align-items:center;gap:8px}
.mk-ust .et{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);
  font-weight:600;margin-right:auto}
.metin-kutu pre{font-family:var(--sans);font-size:12.5px;line-height:1.5;white-space:pre-wrap;
  background:var(--k2);border:1px solid var(--cz2);border-radius:8px;padding:10px 11px;margin:0}
.metin-alt{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.metin-alt .kdug{text-decoration:none}
.metin-alt .ana-dug{margin-left:auto}

.atama{border-top:1px solid var(--cz2);padding:12px 16px;display:flex;align-items:center;gap:10px}
.atama .et{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);font-weight:600}
.atama select,.asama select{font:inherit;font-size:12.5px;color:var(--ink);background:var(--k);
  border:1px solid var(--cz);border-radius:7px;padding:5px 8px;margin-left:auto;cursor:pointer}
.asama select{margin-left:0;width:100%}

/* Satır tıklanabilir */
#t-kuyruk tbody tr[data-domain]{cursor:pointer}
#t-kuyruk tbody tr a{color:inherit}
#t-kuyruk tbody tr a:hover{color:var(--ak)}

/* Filtre bağlantıları (buton grubu görünümünde) */
.fgrup{overflow:hidden}
.fdug{display:block;font-size:11.5px;padding:4px 9px;background:var(--k4);color:var(--ink5);
  text-decoration:none;border-left:1px solid var(--cz2)}
.fdug:first-child{border-left:0}
.fdug:hover{text-decoration:none;background:var(--k2)}
.fdug.on{font-weight:600;background:var(--ak);color:var(--z)}
.fdug.on:hover{background:var(--ak3);color:var(--z)}

/* Şablon önizleme */
.sablonlar{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sablon .et{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);font-weight:600}
.sablon pre{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;white-space:pre-wrap;
  background:var(--k2);border:1px solid var(--cz2);border-radius:8px;padding:10px}
@media(max-width:860px){ .sablonlar{grid-template-columns:1fr} }

/* Çıkış düğmesi ve bildirim */
.cikis{margin-left:auto;color:#8E9088;text-decoration:none;font-size:14px;padding:2px 6px}
.cikis:hover{color:#E3E1DA;text-decoration:none}
.bildirim{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  background:var(--ink);color:var(--z);font-size:12.5px;padding:9px 14px;border-radius:8px;
  box-shadow:0 6px 20px rgba(32,33,30,.25)}

/* ══ KAPI: domain alınmadan konu açılmaz ══
   Ticari kural: "adresiniz düştü, serbest" demek müşterinin gidip 79 ₺'ye kendi
   kaydetmesi demektir. Panel bu sırayı hatırlatır, metni de o zamana kadar saklar. */
.kapi{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;flex-wrap:wrap;
  background:var(--uy-yum);border-bottom:1px solid var(--uy-cz)}
.kapi.acik{background:var(--ak-yum);border-bottom-color:var(--ak-cz)}
.kapi svg{flex:none;margin-top:2px;color:var(--uy-ink)}
.kapi.acik svg{color:var(--ak2)}
.kapi>div{flex:1 1 160px;display:flex;flex-direction:column;gap:2px}
.kapi b{font-size:12.5px;font-weight:600;color:var(--uy-ink)}
.kapi.acik b{color:var(--ak2)}
.kapi span{font-size:11.5px;line-height:1.5;color:var(--uy-ink);opacity:.9}
.kapi.acik span{color:var(--ink3);opacity:1}
.kapi .ana-dug{flex:none}
.ipucu{font-size:11px;line-height:1.45;color:var(--ink5);margin:0}

/* ══ WHATSAPP BAĞLANTISI ══ */
.wa-kutu{padding:22px 16px;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;flex:1 1 auto;justify-content:center}
.wa-kutu p{font-size:12.5px;line-height:1.55;color:var(--ink3);max-width:340px}
.wa-qr{width:236px;height:236px;border:1px solid var(--cz);border-radius:9px;background:#fff;padding:8px}
.wa-ok{display:flex;flex-direction:column;align-items:center;gap:5px}
.wa-ok svg{width:22px;height:22px;color:var(--ak)}
.wa-ok b{font-size:13.5px;font-weight:600}
.wa-ok span{font-size:11.5px;color:var(--ink5)}

/* Toplu seçim sütunu */
#t-kuyruk th.sec,#t-kuyruk td.sec{width:34px;padding-right:0}
#t-kuyruk .ssec,#hepsi{width:14px;height:14px;accent-color:var(--ak);cursor:pointer}