/* Tema token'ları — TAM set üç yerde tekrar eder: (1) :root açık tema,
   (2) @media dark (sistem tercihi, data-theme yokken), (3) [data-theme] blokları
   (kullanıcının paneldeki seçimi — sistem tercihini EZER). Yeni renk eklerken
   ÜÇ bloğa da ekle; eksik kalan değişken karşı temadan sızar (ölçüldü: kontrast kırığı). */
:root {
  --bg: #f4f6fb; --yuzey: #ffffff; --kenar: #d3d9e6; --metin: #1a2233;
  --mute: #5a6478; --marka: #1f6feb; --marka-metin: #ffffff;
  --ok: #17794f; --hata: #c0362c; --uyari: #9a6700; --on-hata: #ffffff;
  --balon-musteri: #2563eb; --balon-bot: #0f766e; --vurgu: #b45309; --canli: #b91c1c;
  --rozet-uyari-metin: #6f4a00; --rozet-canli-metin: #991111;
  --golge: 0 1px 3px rgba(20,30,60,.10), 0 4px 16px rgba(20,30,60,.06);
  --toast-golge: 0 8px 24px rgba(20,30,60,.18);
  --backdrop: rgba(30,40,60,.45);
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0d1117; --yuzey:#161b22; --kenar:#2a323d; --metin:#e6edf3;
    --mute:#9aa4b2; --marka:#4d90fe; --marka-metin:#0d1117; --ok:#3fb950; --hata:#ff7b72; --uyari:#e3b341;
  --on-hata:#0d1117;
    --balon-musteri:#3b82f6; --balon-bot:#10b981; --vurgu:#f59e0b; --canli:#ef4444;
  --rozet-uyari-metin:#e3b341; --rozet-canli-metin:#ffa8a8;
    --golge: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
    --toast-golge: 0 8px 24px rgba(0,0,0,.35);
    --backdrop: rgba(0,0,0,.55); }
}
:root[data-theme="dark"] { --bg:#0d1117; --yuzey:#161b22; --kenar:#2a323d; --metin:#e6edf3;
  --mute:#9aa4b2; --marka:#4d90fe; --marka-metin:#0d1117; --ok:#3fb950; --hata:#ff7b72; --uyari:#e3b341;
  --on-hata:#0d1117;
  --balon-musteri:#3b82f6; --balon-bot:#10b981; --vurgu:#f59e0b; --canli:#ef4444;
  --rozet-uyari-metin:#e3b341; --rozet-canli-metin:#ffa8a8;
  --golge: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  --toast-golge: 0 8px 24px rgba(0,0,0,.35);
  --backdrop: rgba(0,0,0,.55); }

* { box-sizing: border-box; }
/* hidden özniteliği her zaman kazanmalı — .giris{display:grid} gibi kurallar ezmesin */
[hidden] { display: none !important; }
body { margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--metin); line-height:1.5; }
h1,h2 { line-height:1.25; }
a { color:var(--marka); }

.atla { position:absolute; left:-999px; top:0; background:var(--marka); color:var(--marka-metin);
  padding:.6rem 1rem; z-index:100; }
.atla:focus { left:0; }

:focus-visible { outline:3px solid var(--marka); outline-offset:2px; border-radius:4px; }

/* Giriş */
.giris { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.kart { background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r);
  box-shadow:var(--golge); padding:2rem; width:min(400px,100%); }
.kart h1 { margin:0 0 .25rem; font-size:1.5rem; }
.kart .alt { margin:0 0 1.5rem; color:var(--mute); }

/* Alanlar */
.alan { margin-bottom:1rem; display:flex; flex-direction:column; gap:.35rem; }
.alan.kucuk { max-width:140px; }
label { font-weight:600; font-size:.9rem; }
.ops { font-weight:400; color:var(--mute); }
input, textarea, select { font:inherit; padding:.6rem .7rem; border:1px solid var(--kenar);
  border-radius:8px; background:var(--yuzey); color:var(--metin); width:100%; }
textarea { resize:vertical; }
/* SEÇİM KUTULARI metin girişi DEĞİLDİR: yukarıdaki genel `input{width:100%}` onları
   satırın tamamına yayıyor ve yanlarındaki etiketi sıfıra çökertiyordu. ÖLÇÜLDÜ
   (headless Chrome, admin "Hat türü" alanı): radio 575 px, etiket span 0 px → metin
   diyaloğun dışına taşıp harf harf diziliyordu. `.onay input` istisnası yalnız o sınıfı
   kurtarıyordu; kural artık tüm radio/checkbox'lar için geçerli. */
input[type="radio"], input[type="checkbox"] { width:auto; flex:none; }
.onay { flex-direction:row; align-items:center; gap:.5rem; }
.onay input { width:auto; }

button { font:inherit; font-weight:600; cursor:pointer; border-radius:10px;
  padding:.6rem 1.1rem; border:1px solid transparent; line-height:1.2;
  transition:background-color .15s, border-color .15s, box-shadow .15s, transform .06s; }
button:active { transform:translateY(1px); }
/* Klavye odağı HER zaman görünür (WCAG 2.4.7); fare tıklamasında halka çıkmaz. */
button:focus-visible { outline:2px solid var(--marka); outline-offset:2px; }
.birincil { background:var(--marka); color:var(--marka-metin); border-color:var(--marka);
  box-shadow:0 1px 2px rgba(0,0,0,.18); }
.birincil:hover { filter:brightness(1.08); box-shadow:0 3px 10px rgba(0,0,0,.24); }
.ikincil { background:var(--yuzey); color:var(--metin); border-color:var(--kenar); }
.ikincil:hover { border-color:var(--marka); box-shadow:0 2px 8px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce) {
  button { transition:none; }
  button:active { transform:none; }
}
.tehlike { color:var(--hata); background:transparent; border-color:var(--kenar); }
.tehlike:hover { border-color:var(--hata); }
.detay h3 .tehlike { font-size:.78rem; margin-left:.6rem; vertical-align:middle; padding:.2rem .55rem; }

.hata { color:var(--hata); font-weight:600; min-height:1.2em; margin:.5rem 0 0; }

/* Üst bar */
.ust { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--yuzey); border-bottom:1px solid var(--kenar); padding:.6rem 1rem; box-shadow:var(--golge); }
.marka { font-weight:700; font-size:1.1rem; }
.firma { display:inline-block; margin-left:.4rem; padding:.1rem .65rem; border-radius:999px;
  background:color-mix(in srgb, var(--marka) 14%, var(--yuzey)); border:1px solid var(--marka);
  color:var(--metin); font-weight:600; font-size:.9rem; vertical-align:middle; }
.firma::before { content:"👤 "; }
.firma:empty { display:none; }
/* olay etiketi rozeti (hakaret vb.) */
.rozet.uyari-rozet { background:var(--hata); color:var(--yuzey); border-radius:999px;
  padding:.05rem .5rem; font-size:.75rem; font-weight:700; white-space:nowrap; }
/* Çağrılar sekmesi canlı çağrı sayacı */
.canli-rozet { display:inline-block; min-width:1.3em; padding:0 .35em; margin-left:.25rem;
  border-radius:999px; background:var(--hata); color:var(--yuzey);
  font-size:.75rem; font-weight:700; text-align:center; }
/* transkript: bot cevabının koşul rozeti ("neden bu cevap") */
.tsatir .kosul { font-size:.72rem; color:var(--marka); border:1px solid var(--marka);
  border-radius:999px; padding:.05rem .45rem; white-space:nowrap; }

/* IVR menü editörü: tuş satırları */
.ivr-satir { display:grid; grid-template-columns:3rem 12rem 1fr 1fr 2rem; gap:.5rem;
  align-items:center; margin:.4rem 0; }
.ivr-satir .ivr-tus { text-align:center; }
@media (max-width:640px) { .ivr-satir { grid-template-columns:1fr 1fr; } }

/* Mesajlar: okunmamış sesli mesaj + bekleyen geri arama vurgusu */
.bkart.okunmadi { border-left:3px solid var(--marka); }
tr.cb-bekliyor td { background:color-mix(in srgb, var(--marka) 7%, transparent); }

/* Rapor: grafik kartları + inline SVG bar + yatay bar */
.rapor-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1rem; margin-top:1rem; }
.rapor-kart { background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r); padding:1rem; }
.rapor-kart h3 { margin:0 0 .75rem; font-size:1rem; }
.grafik { min-height:150px; }
.bar-svg rect { fill:var(--marka); }
.bar-svg text { fill:var(--mute); }
#rapor-saatlik .bar-svg rect { fill:var(--ok); }
.yatay-satir { display:grid; grid-template-columns:9rem 1fr 2.5rem; align-items:center; gap:.5rem; margin:.3rem 0; }
.yatay-ad { font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yatay-cubuk { background:var(--bg); border-radius:999px; height:.8rem; overflow:hidden; }
.yatay-cubuk span { display:block; height:100%; background:var(--marka); border-radius:999px; }
.yatay-adet { text-align:right; font-weight:600; font-size:.85rem; }
#rapor-csv { text-decoration:none; }

/* Bilgi Bankası: kart seçimi (toplu silme) */
.bkart { position:relative; }
.bkart-sec { position:absolute; top:.6rem; right:.7rem; display:flex; align-items:center;
  gap:.3rem; font-size:.8rem; color:var(--mute); cursor:pointer; }
.bkart-sec input { width:auto; }
.bkart:has(.bilgi-sec:checked) { outline:2px solid var(--marka); }

/* Senaryolar: mesai özeti + "seçilen anda geçersiz" görünümü */
.mesai-ozet { background:var(--yuzey); border:1px solid var(--kenar); border-radius:8px;
  padding:.6rem .9rem; line-height:1.8; margin:.25rem 0 .75rem; }
.baglanti { background:none; border:none; padding:0; color:var(--marka);
  text-decoration:underline; font-weight:600; cursor:pointer; }
tr.anda-pasif td { opacity:.45; }
tr.anda-pasif td.satir-islem { opacity:1; }
tr.anda-aktif td { background:color-mix(in srgb, var(--ok) 9%, transparent); }
.senaryo-sec { width:auto; }
.anda-not { font-size:.75rem; color:var(--uyari); white-space:nowrap; }
.mesai-sec { min-width:7.5rem; padding:.3rem .4rem; font-size:.85rem; }

/* Yardım sayfası */
.yardim details { background:var(--yuzey); border:1px solid var(--kenar); border-radius:8px;
  padding:.6rem .9rem; margin:.5rem 0; }
.yardim summary { cursor:pointer; font-weight:600; font-size:1.02rem; }
.yardim details[open] summary { margin-bottom:.5rem; }
.yardim li { margin:.3rem 0; line-height:1.55; }
.yardim p { line-height:1.6; }

/* Duygu rozetleri */
.rozet.duygu-olumlu { color:var(--ok); border-color:var(--ok); }
.rozet.duygu-notr { color:var(--mute); }
.rozet.duygu-olumsuz { color:var(--hata); border-color:var(--hata); }
/* GÖRÜŞME SONUCU (mig078) — duygudan ayrı okunsun diye ayrı renk ailesi:
   çözüldü yeşil, kapsam dışı mavi (bot hatası DEĞİL: hattın/saatin sınırı),
   çözülemedi turuncu (asıl aksiyon burada), yarım kaldı gri. Metin renkleri
   `--ok/--marka/--uyari/--mute` token'ları; hepsi WCAG AA (§5) için 4.5:1. */
.rozet.sonuc-cozuldu { color:var(--ok); border-color:var(--ok); }
.rozet.sonuc-kapsam { color:var(--marka); border-color:var(--marka); }
.rozet.sonuc-cozulemedi { color:var(--uyari); border-color:var(--uyari); }
.rozet.sonuc-yarim { color:var(--mute); }

/* Çağrı detayı: operatör notu düzenleme */
.not-duzen { background:var(--yuzey); border:1px solid var(--kenar); border-radius:8px;
  padding:.75rem; margin:.5rem 0 1rem; }

/* Tatil günleri listesi */
.tatil-satir { display:flex; justify-content:space-between; align-items:center;
  padding:.3rem .6rem; border:1px solid var(--kenar); border-radius:6px; margin:.25rem 0; }
.tatil-ekle { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.tatil-ekle input[type="date"], .tatil-ekle input[type="text"] { width:auto; }

/* çalışma gün/saat tablosu: gün düğmesi (tıkla → açık/kapalı) + çoklu saat aralığı */
.mesai { display:flex; flex-direction:column; gap:.45rem; max-width:34rem; }
.mesai-satir { display:grid; grid-template-columns:9rem 1fr; gap:.6rem; align-items:start; }
.gun-btn { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  width:100%; padding:.5rem .8rem; border-radius:8px; text-align:left;
  border:1px solid var(--kenar); background:var(--yuzey); color:var(--mute); font-weight:600; }
.gun-btn[aria-pressed="true"] { background:var(--marka); border-color:var(--marka);
  color:var(--marka-metin); }
.gun-durum::after { content:"kapalı"; font-size:.75rem; font-weight:500; opacity:.85; }
.gun-btn[aria-pressed="true"] .gun-durum::after { content:"açık"; }
/* kampanya popup: kompakt gün seçimi (Pzt..Paz tek satır) */
.gun-secim { display:flex; gap:.35rem; flex-wrap:wrap; }
.gun-secim .gun-btn { width:auto; justify-content:center; padding:.35rem .6rem; }
.araliklar { display:flex; flex-direction:column; gap:.35rem; padding-top:.15rem; }
.aralik { display:flex; align-items:center; gap:.45rem; }
.aralik input[type="time"] { width:auto; padding:.4rem .55rem; }
.aralik-sil { padding:.15rem .55rem; line-height:1.2; border:1px solid var(--kenar);
  background:var(--yuzey); color:var(--mute); border-radius:6px; }
.aralik-sil:hover { color:var(--hata); border-color:var(--hata); }
.aralik-ekle { align-self:flex-start; padding:.3rem .7rem; font-size:.85rem; }
@media (max-width:640px) { .mesai-satir { grid-template-columns:1fr; } }
/* anket API istek örneği */
details.alan summary { cursor:pointer; font-weight:600; }
.kod { background:var(--bg); border:1px solid var(--kenar); border-radius:8px;
  padding:.7rem .9rem; overflow-x:auto; font-size:.85rem; line-height:1.45; margin:.4rem 0; }
/* Nav kendi satırında (order:3, tam genişlik) — sekmeler sığmayınca Çıkış'ı
   alta itmek yerine gruplar kendi satırında sarar, marka+Çıkış üstte kalır */
.sekmeler { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; order:3; width:100%; }
/* Açılır menü nav: grup başlıkları menü çubuğunda hep görünür; tıklayınca altına
   panel açılır (details/summary — klavye erişilebilir), seçim yapılınca kapanır.
   Aktif sayfanın grubu marka alt çizgisiyle işaretlenir. */
.sekme-grup { position:relative; }
.sekme-grup > summary { list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:.35rem; font-weight:600;
  padding:.5rem .9rem; border:1px solid transparent; border-radius:8px; color:var(--metin); }
.sekme-grup > summary::-webkit-details-marker { display:none; }
.sekme-grup > summary::after { content:"▾"; font-size:.7rem; color:var(--mute); }
.sekme-grup[open] > summary::after { content:"▴"; }
.sekme-grup > summary:hover { border-color:var(--kenar); }
.sekme-grup > summary:focus-visible { outline:3px solid var(--marka); outline-offset:2px; }
.sekme-grup[open] > summary { background:var(--bg); border-color:var(--kenar); }
.sekme-grup.aktif > summary { box-shadow:inset 0 -2px 0 var(--marka); }
.grup-menu { position:absolute; top:calc(100% + .35rem); left:0; z-index:60;
  min-width:12.5rem; display:flex; flex-direction:column; gap:.15rem;
  background:var(--yuzey); border:1px solid var(--kenar); border-radius:10px;
  box-shadow:var(--toast-golge); padding:.4rem; }
.grup-menu .sekme { width:100%; text-align:left; padding:.5rem .8rem;
  display:grid; grid-template-columns:1.4em 1fr auto; align-items:center; gap:.55rem; }
/* Emoji genişlikleri eşit değil (🗣️ ile 🔢 arasında ~4 px fark var); ikon sabit
   genişlikte bir sütunda durmazsa menü etiketleri birbirine göre kayık başlıyor. */
.mikon { display:inline-flex; justify-content:center; width:1.4em; font-style:normal;
  flex:none; }
/* Yatay şeritteki (admin) düğmelerde grid yok — ikonla metin arası boşluk yeterli. */
.sekmeler > .sekme .mikon, .sekme-tek .mikon { margin-right:.35rem; }
.sekme-tek { font-weight:600; }
@media (max-width:640px) {
  /* mobilde panel yerinde açılır (akordiyon) — kaydırma/kapanma derdi olmasın */
  .grup-menu { position:static; box-shadow:none; border:none;
    padding:.1rem 0 .1rem .9rem; min-width:0; }
}
.sekme { background:transparent; border:1px solid transparent; color:var(--metin); }
.sekme[aria-current="page"] { background:var(--marka); color:var(--marka-metin); }
.sekme:not([aria-current]):hover { border-color:var(--kenar); }
#cikis { margin-left:auto; }

main#ana { max-width:min(1560px, 96vw); margin:0 auto; padding:1.5rem 1rem 4rem; }
.bolum h2 { margin:.2rem 0 .3rem; }
.ipucu { color:var(--mute); margin:0 0 1.2rem; }
.durum { color:var(--ok); font-weight:600; min-height:1.3em; }

/* Tablo */
.tablo-sar { overflow-x:auto; border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey); }
table { border-collapse:collapse; width:100%; min-width:600px; }
th, td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--kenar); vertical-align:top; }
th { background:var(--bg); font-size:.85rem; }
tbody tr:hover { background:var(--bg); }
td.cevap { max-width:480px; min-width:200px; color:var(--mute); }
/* Uzun regex desenleri (uzantı senaryoları) sütunu şişirip "Cevap" sütununu harf harf
   alt alta düşürüyordu. Hücre tek satıra kırpılır; tam desen title ile görünür. */
td .regex-hucre { display:inline-block; max-width:260px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
#s-senaryolar table { min-width:1180px; }
/* Rozet metni TEK SATIR kalır: duygu/sonuç sütunları dar, "kapsam dışı" iki satıra
   kırılıp hücreyi şişiriyordu (kullanıcı bildirdi 2026-09-18). Emoji de bu yüzden
   kaldırıldı — anlam metinde ve renkte. */
.rozet { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.8rem;
  background:var(--bg); border:1px solid var(--kenar); white-space:nowrap; }
.rozet.evet { color:var(--ok); border-color:var(--ok); }
.rozet.hayir { color:var(--mute); }
.rozet.mesai-mesai_ici { color:var(--marka); border-color:var(--marka); }
/* KAYNAK ROZETİ (mig103). Yeni TOKEN eklenmedi ve TINT'li zemin KULLANILMADI: `.rozet`
   zemini --bg'dir ve --marka orada ölçülmüş (açık 4,63 / koyu 5,55 ≥ 4,5). Tint'li
   zemin (color-mix) kontrastı 3,85'e düşürüyordu — /uzak-destek#akis dersi. */
.rozet.kaynak-ses { color:var(--marka); border-color:var(--marka); }
.rozet.mesai-mesai_disi { color:var(--uyari); border-color:var(--uyari); }
/* Tablo satırı eylemleri. Her satırda DOLGULU bir düğme (mavi "+ Numara") tabloyu
   okunmaz yapıyordu: göz veriye değil düğmeye gidiyor, "Sil" de alta düşüyordu.
   Hepsi sessiz/ghost; renk ANLAMI taşır (mavi=ekle, kırmızı=sil) ve dolgu yalnız
   hover'da gelir. `margin-right` yerine flex+gap: son düğmeden sonra boşluk kalmaz
   ve sarma düzgün hizalanır. */
.satir-islem { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
td.satir-islem { white-space:nowrap; }
.satir-islem button { margin:0; padding:.28rem .55rem; font-size:.82rem; font-weight:500;
  line-height:1.35; border-radius:6px; background:transparent; border:1px solid var(--kenar);
  color:var(--metin); }
.satir-islem button:hover { border-color:var(--marka);
  background:color-mix(in srgb, var(--marka) 12%, transparent); }
.satir-islem .birincil { color:var(--marka);
  border-color:color-mix(in srgb, var(--marka) 45%, var(--kenar)); }
.satir-islem .birincil:hover { background:var(--marka); color:var(--marka-metin);
  border-color:var(--marka); filter:none; }
.satir-islem .tehlike { color:var(--hata); border-color:var(--kenar); }
/* Silme onayı dolgulu kırmızıyla verilir — ölçüldü: metin/zemin 5.52:1 (açık),
   7.51:1 (koyu), ikisi de AA. Sabit `#fff` koyu temada 2.5:1'e düşerdi. */
.satir-islem .tehlike:hover { background:var(--hata); color:var(--on-hata);
  border-color:var(--hata); }
/* Düğme ikonu: emoji genişlikleri eşit değil, metinden ayrık dursun. */
.satir-islem button .di { margin-right:.28rem; font-style:normal; }

/* Kartlar */
.kartlar { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.bkart { background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r); padding:1rem; }
.bkart h3 { margin:0 0 .4rem; font-size:1.05rem; }
.bkart p { margin:0 0 .6rem; color:var(--mute); white-space:pre-wrap; }
.etiketler { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem; }

/* Özet istatistik */
.ozet { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.ist { background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r);
  padding:.7rem 1rem; min-width:110px; }
.ist .sayi { display:block; font-size:1.5rem; font-weight:700; color:var(--marka); }
.ist .etk { color:var(--mute); font-size:.82rem; }

/* Çağrı düzeni */
/* çağrı listesi ÜSTTE tam genişlik, detay ALTTA tam genişlik (yatay okuma) */
.cagri-duzen { display:flex; flex-direction:column; gap:1rem; }
.detay { background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r); padding:1rem 1.25rem; }
.detay .bos { color:var(--mute); }
.detay audio { width:100%; max-width:640px; margin:.5rem 0 1rem; }
/* transkript = sohbet: müşteri solda, bot sağda; baloncuklar yatayı kullanır.
   Uzun görüşmeler dikey scroll ile kaydırılır (sabit yükseklik + kendi kaydırması). */
.transkript { display:flex; flex-direction:column; gap:.55rem;
  max-height:60vh; overflow-y:auto; padding-right:.4rem; scroll-behavior:smooth; }
.tsatir { max-width:min(78%, 680px); padding:.55rem .85rem; border-radius:12px; background:var(--bg);
  border:1px solid var(--kenar); transition:background .15s, border-color .15s, box-shadow .15s; }
.tsatir .konusan { font-size:.78rem; font-weight:600; margin-right:.5rem; }
.tsatir .zaman { color:var(--mute); font-size:.78rem; }
.tsatir .duzeltme { color:var(--mute); font-size:.85rem; margin-top:.2rem; font-style:italic; }
.tsatir .metin { margin-top:.25rem; line-height:1.45; }
/* müşteri sola hizalı (mavi), bot sağa hizalı (yeşil) */
.tsatir.musteri { align-self:flex-start; border-left:3px solid var(--balon-musteri); }
.tsatir.bot { align-self:flex-end; border-right:3px solid var(--balon-bot);
  background:color-mix(in srgb, var(--bg) 88%, var(--balon-bot)); }
.tsatir.bot .konusan { color:var(--balon-bot); }
.tsatir.musteri .konusan { color:var(--balon-musteri); }
/* altyazı vurgusu: ses çalarken o an konuşulan satır */
.tsatir.aktif { background:color-mix(in srgb, var(--bg) 55%, var(--vurgu)); border-color:var(--vurgu);
  box-shadow:0 0 0 2px var(--vurgu) inset; }
.tsatir.aktif .metin { font-weight:600; }
@media (max-width:640px){ .tsatir{ max-width:92%; } }
.ipucu { color:var(--mute); font-size:.8rem; font-weight:normal; }
/* admin: kurulum zinciri şeridi (Sağlayıcı → Trunk → Numara → Müşteri) */
.akis-serit { display:inline-block; font-size:.85rem; color:var(--metin);
  background:color-mix(in srgb, var(--marka) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--marka) 35%, transparent);
  border-radius:999px; padding:.3rem .8rem; margin:.2rem 0 .6rem; }
.akis-serit strong { color:var(--marka); }
/* admin: numara formu hat türü seçimi (tek müşteri / ortak-tuşlamalı) */
.hat-turu { border:1px solid var(--kenar); border-radius:8px; padding:.6rem .9rem; margin:0 0 1rem; }
.hat-turu legend { font-weight:600; padding:0 .3rem; }
.hat-turu-sec { display:flex; gap:.55rem; align-items:flex-start; padding:.35rem 0; cursor:pointer; }
.hat-turu-sec input { margin-top:.25rem; flex:none; }
.hat-turu-sec span { font-size:.9rem; }
.satir { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
/* `.satir` yan yana koyduğu alanların ETİKETLERİ farklı sayıda satıra sarınca
   ("Aktarılacak numara (aktar modunda)" iki satır, "Bitiş (opsiyonel)" tek satır)
   girdiler dikeyde kayıyor ve form "biri aşağı biri yukarı" görünüyordu. Etiket
   kutusu iki satırlık yükseklikte sabitlenir ve içerik ALTA yaslanır → girdiler
   etiket kaç satır sararsa sarsın aynı hizadan başlar. */
.satir > .alan > label { min-height:3.1em; display:flex; flex-direction:column;
  justify-content:flex-end; gap:.1rem; }
/* Parantezli ipucu ("(gün)", "(aktar modunda)") KENDİ satırında durur: etiketin kaç
   satır saracağı metnin uzunluğuna kalırsa hizalama tek dilde bile bozulur. */
.satir > .alan > label .ops { display:block; font-size:.85em; }
/* 140 px pek çok Türkçe etiketi sardırıyordu; satır içinde alan biraz geniş olsun. */
.satir > .alan.kucuk { flex:0 1 210px; max-width:210px; }
/* TUZAK (ölçüldü 2026-09-23, Lighthouse + hesap): rozetin TINT'li zemini kontrastı yer.
   `--canli`/`--uyari` sayfa zemininde 4,5:1 geçiyordu ama %22/%18 tint üstünde açık temada
   4,41 / 3,85'e düşüyordu (akış haritasında 31 öğe FAIL). Metin rengi bu yüzden zemine göre
   ayrı token: `--rozet-*-metin`. Token'ı ÜÇ tema bloğuna da ekle (yoksa karşı temadan sızar). */
.rozet.canli { background:color-mix(in srgb, var(--canli) 22%, transparent); color:var(--rozet-canli-metin);
  font-weight:700; animation:nabiz 1.4s ease-in-out infinite; }
@keyframes nabiz { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.canli-satir { background:color-mix(in srgb, var(--bg) 88%, var(--canli)); }
/* KUYRUKTA bekleyen arayan (mig061): sarı (--uyari token'ı, her temada ≥4.5:1). Kırmızı
   "görüşmede" rozetinden ayrık — nabız YOK, arayan henüz botla konuşmuyor. */
.rozet.kuyrukta { background:color-mix(in srgb, var(--uyari) 18%, transparent);
  color:var(--rozet-uyari-metin); border-color:var(--uyari); font-weight:700; }
.kuyruk-satir { background:color-mix(in srgb, var(--bg) 90%, var(--uyari)); }
.ist.ist-kuyruk .sayi { color:var(--uyari); }
/* Admin müşteri formu — bekletme müziği yükleme satırı */
.kuyruk-alan { margin:.6rem 0; }
.kuyruk-alan .ipucu { margin:0 0 .6rem; }
.kuyruk-alan .muzik-satir { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.kuyruk-alan .muzik-satir input[type="file"] { flex:1 1 220px; width:auto; padding:.4rem; }
.satir-ic.onay { display:flex; align-items:center; gap:.35rem; }
.bilgi-arac { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.bilgi-arac #link-url { flex:1; min-width:220px; }
.bilgi-arac #bilgi-arac-sonuc { color:var(--mute); font-size:.85rem; flex-basis:100%; }
/* KB işlemi sürerken durum mesajı belirgin: vurgu şeritli, nabız atan bant */
.bilgi-arac #bilgi-arac-sonuc.calisiyor { color:var(--metin); font-size:1rem; font-weight:700;
  background:color-mix(in srgb, var(--vurgu) 16%, transparent);
  border-left:4px solid var(--vurgu); border-radius:8px; padding:.55rem .8rem;
  animation:nabiz 1.4s ease-in-out infinite; }

/* sol-alt canlı çağrı bildirimleri (SSE toast) */
#toastlar { position:fixed; left:1rem; bottom:1rem; display:flex; flex-direction:column-reverse;
  gap:.5rem; z-index:1000; }
/* Balon artık <button> DEĞİL <div>: içinde iki düğme var (gövde = aç, × = kapat).
   İç içe etkileşimli öğe geçersiz HTML'dir ve ekran okuyucu ikisini tek düğme sanardı. */
.toast { display:flex; align-items:stretch; background:var(--yuzey); color:var(--metin);
  border:1px solid var(--kenar); border-left:4px solid var(--ok);
  border-radius:12px; box-shadow:var(--toast-golge); overflow:hidden;
  transform:translateX(-120%); opacity:0; transition:transform .3s ease, opacity .3s ease; }
.toast.gir { transform:translateX(0); opacity:1; }
.toast-ac { display:flex; align-items:center; gap:.7rem; text-align:left; cursor:pointer;
  background:transparent; color:inherit; border:0; border-radius:0;
  padding:.7rem .3rem .7rem .9rem; font:inherit; }
.toast-ac:hover { background:color-mix(in srgb, var(--marka) 8%, transparent); }
/* Kapatma hedefi 44px (WCAG 2.5.8); × görsel, adı `aria-label`da bağlamlı yazılı. */
.toast-kapat { flex:0 0 auto; min-width:2.75rem; background:transparent; color:var(--mute);
  border:0; border-left:1px solid var(--kenar); border-radius:0; font-size:1.35rem;
  line-height:1; cursor:pointer; padding:0 .6rem; }
.toast-kapat:hover { background:color-mix(in srgb, var(--hata) 12%, transparent); color:var(--metin); }
.toast-ac:focus-visible, .toast-kapat:focus-visible { outline:2px solid var(--marka); outline-offset:-2px; }
.toast .zil { font-size:1.3rem; animation:zille .6s ease 2; }
.toast .ar { color:var(--mute); font-size:.85rem; }
@keyframes zille { 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-18deg); } 75%{ transform:rotate(18deg); } }

/* Dış API bölümü */
.dis-api { border:1px solid var(--kenar); border-radius:8px; padding:.5rem .8rem; margin:.5rem 0 1rem; }
.dis-api summary { cursor:pointer; font-weight:600; }
.dis-api[open] summary { margin-bottom:.6rem; }
.dis-api .ipucu { font-size:.85rem; margin:.4rem 0 .8rem; }
pre.json { background:var(--bg); border:1px solid var(--kenar); border-radius:8px;
  padding:.6rem; overflow-x:auto; font-size:.82rem; max-height:220px; }
code { background:var(--bg); padding:.05rem .3rem; border-radius:4px; font-size:.9em; }

/* Diyalog */
dialog { border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey);
  /* mobil: padding daralır, genişlik viewport içinde kalır */
  color:var(--metin); box-shadow:var(--golge); padding:clamp(1rem, 4vw, 1.8rem); width:min(680px, calc(100vw - 2rem));
  max-height:92vh; overflow-y:auto; }
#senaryo-dlg { width:min(980px,96vw); }
#kampanya-dlg, #hedef-dlg, #kontak-dlg { width:min(860px,96vw); }
/* Kampanya formu: sayısal alanlar eşit kolonlu grid'de — dağınık flex yerine hizalı */
#kampanya-form .satir { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem 1.1rem; align-items:start; margin:.4rem 0 .9rem; }
#kampanya-form .satir .alan { max-width:none; margin:0; }
#kampanya-form .alan label { min-height:2.2em; display:flex; align-items:end; }
#kampanya-form input, #kampanya-form select { width:100%; }
/* Arama penceresi satırı: iki saat kutusu sabit, günler kalan genişliği alır */
#kampanya-form .satir.kmp-pencere { grid-template-columns:minmax(130px,160px) minmax(130px,160px) minmax(240px,1fr); }
/* Deneme ayarları satırı: üç eşit sütun, hep aynı hizada */
#kampanya-form .satir.kmp-deneme { grid-template-columns:repeat(3,minmax(120px,1fr)); }
@media (max-width:640px) {
  #kampanya-form .satir.kmp-pencere { grid-template-columns:1fr 1fr; }
  #kampanya-form .satir.kmp-pencere .alan:last-child { grid-column:1/-1; }
  #kampanya-form .satir.kmp-deneme { grid-template-columns:1fr 1fr 1fr; }
}
#hdf-kontaklar { display:flex; flex-direction:column; gap:.3rem; max-height:300px;
  overflow-y:auto; border:1px solid var(--kenar); border-radius:8px;
  padding:.6rem .8rem; margin:.6rem 0; }
#hdf-kontaklar label { margin:0; }
/* KALİTE sekmesi: deneme sonucu kartı */
.dene-kart { border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey);
  padding:.9rem 1rem; margin:.6rem 0 1.2rem; }
.dene-cevap { margin:0 0 .5rem; }
.dene-kart .ipucu { margin:.35rem 0; }
.dene-kart ul.ipucu { padding-left:1.2rem; }
#firsat-liste h4, #denetim-sonuc h4 { margin:1.2rem 0 .3rem; }
#firsat-liste table td:nth-child(2) { text-align:right; white-space:nowrap; }

/* KURULUM SİHİRBAZI (admin): adım şeridi + panel + alt işlem çubuğu.
   Zincirin sırası görünür olsun diye adımlar numaralı ve tamamlananlar işaretli —
   dört ayrı sekmede parça parça kurulum, bağımlılıkları göstermediği için
   anlaşılmıyordu. */
.sihirbaz-adimlar { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none;
  margin:0 0 1.2rem; padding:0; counter-reset:adim; }
.sihirbaz-adimlar li { counter-increment:adim; display:flex; align-items:center;
  gap:.4rem; padding:.35rem .7rem; border:1px solid var(--kenar); border-radius:999px;
  font-size:.88rem; color:var(--mute); background:var(--yuzey); }
.sihirbaz-adimlar li::before { content:counter(adim); display:grid; place-items:center;
  width:1.4rem; height:1.4rem; border-radius:999px; background:var(--kenar);
  color:var(--metin); font-size:.78rem; font-weight:700; }
.sihirbaz-adimlar li[aria-current="step"] { color:var(--metin); font-weight:600;
  border-color:var(--marka); }
.sihirbaz-adimlar li[aria-current="step"]::before { background:var(--marka);
  color:var(--marka-metin); }
.sihirbaz-adimlar li[data-tamam="1"] { color:var(--metin); }
.sihirbaz-adimlar li[data-tamam="1"]::before { content:"✓"; background:var(--ok);
  color:var(--yuzey); }
.sihirbaz-panel { border:1px solid var(--kenar); border-radius:var(--r);
  background:var(--yuzey); padding:1rem 1.1rem; margin-bottom:1rem; }
.sihirbaz-panel h3 { margin-top:0; }
.sihirbaz-islem { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.kw-ozet-satir { display:flex; gap:.6rem; padding:.4rem 0;
  border-bottom:1px solid var(--kenar); }
.kw-ozet-satir:last-child { border-bottom:none; }
.kw-ozet-satir b { min-width:9rem; }

/* Hat bazlı kod eşlemesi listesi (admin numara formu) */
.kod-liste { display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0; }
.kod-satir { display:flex; align-items:center; gap:.5rem; padding:.3rem .5rem;
  border:1px solid var(--kenar); border-radius:8px; background:var(--yuzey); }
.kod-satir .kod { font-weight:600; }
.kod-satir button { margin-left:auto; }

/* ETİKET (chip) GİRİŞİ — anahtar kelimeler ve desen oluşturucu.
   Tek satıra "|" ile yazdırmak yerine terimler ayrı ayrı görünür: kaç terim olduğu
   sayılabilir, yanlış ayırıcı yazılamaz ve kısa/çakışan terim anında uyarılabilir
   (CLAUDE.md: anahtar kelime SUBSTRING eşleşir, "co" ⊂ "com" başka senaryoyu kapar). */
.cip-kutu { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
  border:1px solid var(--kenar); border-radius:8px; padding:.4rem .5rem;
  background:var(--yuzey); min-height:2.6rem; }
.cip-kutu:focus-within { outline:3px solid var(--marka); outline-offset:1px; }
.cip { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem;
  background:color-mix(in srgb, var(--marka) 12%, var(--yuzey));
  border:1px solid color-mix(in srgb, var(--marka) 35%, var(--kenar));
  color:var(--metin); border-radius:999px; padding:.15rem .2rem .15rem .6rem; }
.cip button { border:0; background:none; color:var(--metin); cursor:pointer;
  font-size:1rem; line-height:1; padding:0 .25rem; border-radius:999px; }
.cip button:hover { background:color-mix(in srgb, var(--hata) 22%, transparent); }
.cip-giris { border:0; outline:0; background:transparent; color:var(--metin);
  flex:1 1 140px; min-width:120px; padding:.2rem; font:inherit; }
/* Uyarı satırı: renk TEK BAŞINA ayırt edici olmasın diye ⚠ işareti metne dahildir. */
.ipucu.uyari-var { color:var(--uyari); font-weight:600; }
.desen-yapici { margin-bottom:1rem; }
.desen-yapici .alan { margin-bottom:.6rem; }

/* FIELDSET (numara formundaki "Hat türü", trunk formundaki "Müşteri santrali"):
   tarayıcı varsayılanı `min-inline-size:min-content` — flex içerik kutuyu TAŞIRIYOR ve
   radio etiketleri diyaloğun dışına çıkıp harf harf diziliyordu (ekran görüntüsüyle
   bildirildi, 2026-09-04). `min-inline-size:0` şart; `max-width` yatay kaydırmayı keser. */
dialog fieldset, fieldset { min-inline-size:0; max-width:100%; box-sizing:border-box;
  border:1px solid var(--kenar); border-radius:var(--r);
  padding:.7rem .9rem; margin:0 0 1rem; }
dialog fieldset legend, fieldset legend { padding:0 .35rem; font-weight:600; font-size:.92rem; }
/* Uzun açıklama metni radio'nun yanında sarmalı — `min-width:0` olmadan flex öğesi
   içeriğinden küçülmez ve taşırır. */
.hat-turu-sec span { flex:1 1 auto; min-width:0; }
dialog form { max-width:100%; }
dialog::backdrop { background:var(--backdrop); }
dialog h2 { margin:0 0 1rem; }

/* diyalog içi sekmeler (senaryo formu: Temel / Eşleştirme / Dış API / Ayarlar) */
.dlg-sekmeler { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem;
  border-bottom:1px solid var(--kenar); padding-bottom:.6rem; }
.dlg-sekme { background:transparent; color:var(--metin); border:1px solid var(--kenar);
  border-radius:999px; padding:.4rem .9rem; cursor:pointer; font-weight:600; font-size:.9rem; }
.dlg-sekme:hover { border-color:var(--marka); }
.dlg-sekme.aktif { background:var(--marka); color:var(--marka-metin); border-color:var(--marka); }
.dlg-sekme:focus-visible { outline:3px solid var(--marka); outline-offset:2px; }
.dlg-panel { min-height:260px; }
.regex-test { flex-direction:row; align-items:end; gap:.5rem; flex-wrap:wrap; }
.regex-test input { flex:1; min-width:180px; }
.test-sonuc { font-weight:600; }
.dlg-islem { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }

/* Senaryo araç çubuğu (CSV indir/yükle) */
.senaryo-arac { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
.dbtn { display:inline-block; font-weight:600; cursor:pointer; border-radius:8px;
  padding:.6rem 1.1rem; border:1px solid var(--kenar); background:var(--yuzey);
  color:var(--metin); text-decoration:none; }
.dbtn:hover { border-color:var(--marka); }
/* Tablo hücresi içindeki sayaç düğmesi (ör. "📞 3 arayan"): küçük ama metin rengi
   DEĞİŞMEZ — `--mute` tonu 4.5:1 eşiğini bu punto ile geçmiyor (WCAG AA). */
.dbtn.sayac { padding:.15rem .5rem; font-size:.8rem; font-weight:600; }
#csv-sonuc { color:var(--ok); font-weight:600; }

/* Çağrı araç çubuğu + sıralama + sayfalama + tıklanabilir özet */
.cagri-arac { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.cagri-arac #cagri-ara { flex:1; min-width:220px; }
.satir-ic { display:flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--mute); }
.satir-ic select { width:auto; }
/* Gelişmiş filtre paneli: alanlar YAN YANA akar, Uygula/Temizle sona itilir.
   (Bozuk bir <label>/<div> yuvası alanları tam genişliğe yayıp mobil görünümü
   veriyordu — HTML onarıldı, bu kural düzeni kilitler.) */
#cagri-filtre-panel { align-items:flex-end; row-gap:.6rem; }
#cagri-filtre-panel > label { flex:0 0 auto; }
#cagri-filtre-panel > button { margin-left:auto; }
#cagri-filtre-panel > button + button { margin-left:.5rem; }
/* Çağrı listesinde LLM'in görüşme özeti — niyet rozetlerinin altında tek satır. */
.cagri-ozet { color:var(--mute); font-size:.8rem; margin-top:.25rem; max-width:34ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aktif-filtre { color:var(--mute); font-size:.9rem; display:flex; align-items:center; gap:.4rem; }
button.ist { text-align:left; border:1px solid var(--kenar); background:var(--yuzey); cursor:pointer; }
button.ist:hover { border-color:var(--marka); }
button.ist.secili { border-color:var(--marka); box-shadow:0 0 0 2px var(--marka) inset; }
.sirala { background:transparent; border:none; color:inherit; font-weight:600; font-size:.85rem;
  cursor:pointer; padding:0; }
.sirala:hover { color:var(--marka); }
.sayfalama { display:flex; align-items:center; gap:1rem; justify-content:center; margin-top:1rem; }
.sayfalama button:disabled { opacity:.45; cursor:default; }
#sayfa-bilgi { color:var(--mute); font-size:.9rem; }

/* TTS ses seçimi: dropdown + dinle butonu yan yana */
.ses-sec { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ses-sec select { flex:1 1 220px; min-width:180px; padding:.45rem .6rem;
  border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey); color:var(--metin); }
.ses-sec #ses-durum { color:var(--mute); font-size:.85rem; }

/* Sesli anonslar alt-sekmeleri + metin↔süre yan yana düzen */
.alt-sekmeler { display:flex; gap:.25rem; margin:0 0 1rem; border-bottom:1px solid var(--kenar); flex-wrap:wrap; }
.alt-sekme { background:transparent; border:1px solid transparent; border-bottom:none;
  color:var(--metin); border-radius:8px 8px 0 0; padding:.5rem .9rem; }
.alt-sekme[aria-selected="true"] { background:var(--marka); color:var(--marka-metin); }
.alt-sekme:not([aria-selected="true"]):hover { border-color:var(--kenar); }
/* kilitli adım (arşiv kurulum zinciri): önceki adım tamamlanmadan tıklanamaz — opaklık
   yerine renk: WCAG 3:1 UI eşiği için --mute üstü çizili */
.alt-sekme:disabled { color:var(--mute); text-decoration:line-through; cursor:not-allowed; }
.satir.esli { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.satir.esli .alan.buyuk { flex:1 1 60%; min-width:260px; margin-bottom:1rem; }
.satir.esli .alan.kucuk { flex:1 1 160px; max-width:220px; }

/* Rapor yatay barları mobilde daralır (ad kolonu kısalır, bar görünür kalır) */
@media (max-width:640px) {
  .yatay-satir { grid-template-columns:5.5rem 1fr 2.2rem; }
  main#ana { padding:1rem .6rem 3rem; }
}
/* Admin güvenlik/trunk gibi çok kolonlu tablolar scroll alanında rahat genişlesin */
#s-guvenlik table { min-width:900px; }

/* Anketler sayfası: soru satırları + rapor özeti */
.soru-satir { margin-bottom:.4rem; }
.soru-satir input { flex:1; }
#anket-rapor { margin-top:1.2rem; }
#anket-rapor-ozet details { border:1px solid var(--kenar); border-radius:8px;
  padding:.4rem .7rem; margin:.35rem 0; }
#anket-rapor-ozet summary { cursor:pointer; }

/* Giden çağrılar: kampanya türü rozetleri (anket/duyuru/senaryo) */
.rozet.kamp-anket { color:var(--marka); border-color:var(--marka); }
.rozet.kamp-duyuru { color:var(--vurgu); border-color:var(--vurgu); }
.rozet.kamp-senaryo { color:var(--ok); border-color:var(--ok); }

/* kampanya rapor sayfası: satır aç → transkript + anket cevapları */
.krapor-satir { cursor:pointer; }
.krapor-no { color:var(--mute); font-size:.82rem; }
.krapor-detay td { background:color-mix(in srgb, var(--bg) 94%, var(--marka)); padding:1rem 1.2rem; }
.krapor-detay .transkript { max-height:40vh; margin-top:.6rem; }
.krapor-anket { width:auto; min-width:50%; margin-bottom:.6rem; }
.krapor-anket th, .krapor-anket td { padding:.4rem .7rem; }

/* durum bildirimi: sayfa üstünde kayboluyordu (kaydet butonu altta) → sabit toast.
   Boşken görünmez; dolunca ekranın alt-ortasında her kaydırma konumundan okunur. */
#durum:not(:empty) { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 10px;
  padding: .6rem 1.2rem; box-shadow: var(--toast-golge, 0 4px 16px rgba(0,0,0,.35));
  z-index: 1000; font-weight: 600; }

/* Rapor: tıklanabilir dağılım satırları + duygu renkleri */
.yatay-satir.tikla { cursor: pointer; border-radius: 6px; padding: .1rem .3rem; margin: .2rem -.3rem; }
.yatay-satir.tikla:hover { background: color-mix(in srgb, var(--marka) 10%, transparent); }
.yatay-satir.tikla:hover .yatay-ad { color: var(--marka); text-decoration: underline; }
.yatay-cubuk.renk-olumlu span { background: var(--ok); }
.yatay-cubuk.renk-notr span { background: var(--mute); }
.yatay-cubuk.renk-olumsuz span { background: var(--hata); }

/* Form içi kısa kural listesi — üç senaryonun hangisinde ne yapılacağı. */
.liste-sik { margin:.3rem 0 .6rem 1.1rem; padding:0; }
.liste-sik li { margin:.25rem 0; }

/* Diyalog içi sekme şeridi — uzun formu bölmek için (SIP trunk: hesap / santral). */
.form-sekmeler { margin:.2rem 0 .8rem; }
.form-panel { margin-bottom:.4rem; }

/* Tablo hücresi içindeki küçük eylem düğmesi (santral kaydını yeniden dene). */
.ufak { padding:.15rem .45rem; font-size:.8rem; }

/* Tablo hücresine sığan küçük parola kutusu (santral bağlantısı). Genel
   `input{width:100%}` kuralı burada satırı taşırırdı. */
.ufak-girdi { width:auto; max-width:150px; padding:.2rem .4rem; font-size:.85rem; }

/* Çağrı listesi: kim ne kadar konuştu (müşteri / bot) — renk TEK BAŞINA anlam
   taşımaz (WCAG 1.4.1): oran + tur sayısı ayrıca METİN olarak yazılır. */
.konusma { min-width:9.5rem; }
.liste-ses-hucre { min-width:13rem; }
.liste-ses { width:13rem; max-width:100%; height:2rem; display:block; }
.konusma-cubuk { display:flex; height:.5rem; border-radius:999px; overflow:hidden;
  background:var(--kenar); margin-bottom:.25rem; }
.konusma-cubuk i { display:block; height:100%; }
.konusma-cubuk .k-mus { background:var(--marka); }
.konusma-cubuk .k-bot { background:var(--uyari); }
.konusma-metin { font-size:.78rem; color:var(--mute); white-space:nowrap; }
.konusma-metin b { color:var(--metin); font-weight:600; }

/* Çağrıda tespit edilen tüm niyetler — rozet listesi (adet rozetin içinde) */
.niyetler { display:flex; flex-wrap:wrap; gap:.25rem; max-width:15rem; }
.niyet-rozet { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem;
  padding:.05rem .4rem; border:1px solid var(--kenar); border-radius:999px;
  background:var(--yuzey); color:var(--metin); white-space:nowrap; }
.niyet-rozet b { font-weight:700; color:var(--mute); font-size:.7rem; }
.niyet-rozet.niyet-artik { color:var(--mute); }

/* Cevapsız sorular */
.soru-turler { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; }
.cip-filtre { background:var(--yuzey); color:var(--metin); border:1px solid var(--cizgi, var(--mute));
  border-radius:999px; padding:.25rem .7rem; cursor:pointer; font:inherit; }
.cip-filtre.secili { border-color:var(--marka); box-shadow:inset 0 0 0 1px var(--marka); }
.cip-filtre:focus-visible { outline:2px solid var(--marka); outline-offset:2px; }
.soru-tablo td { vertical-align:top; }
.soru-tablo .soru-cevap { max-width:22rem; color:var(--mute); }
.soru-dene-sonuc { margin-top:.35rem; font-size:.85rem; }

/* Admin — model sunucuları */
.ms-url { max-width:16rem; word-break:break-all; font-size:.85rem; }
.ms-test { list-style:none; padding:0; display:grid; gap:.3rem; }

/* Sistem ayarları (admin, mig073) */
.satir-arac { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.5rem 0 .8rem; }
.satir-arac input[type="search"] { flex:1 1 16rem; }
.uyari-kutu { border:1px solid var(--hata); color:var(--hata); border-radius:.5rem; padding:.5rem .8rem; }
.rozet.uyari { color:var(--hata); border-color:var(--hata); }
.rozet.ok { color:var(--ok); border-color:var(--ok); }
.rozet.mute { color:var(--mute); }
.mini { font-size:.78rem; color:var(--mute); margin-top:.15rem; }
.ay-acik { max-width:36rem; }
#ay-tablo .grup-baslik th { background:var(--yuzey2, var(--yuzey)); font-weight:600; text-align:left; }
#ay-tablo .ay-giris { min-width:12rem; width:100%; }
#ay-tablo textarea.ay-giris { min-width:20rem; }
/* Sistem ayarları kategori sekmeleri — ÜSTTEKİ `.alt-sekme` bloğuyla AYNI seçiciyi
   kullanır, bu yüzden EKSİK bırakılan bir özellik önceki bloktan sızar: `background`
   yazılmayınca seçili sekme yukarıdaki `background:var(--marka)`yı koruyor, buradaki
   `color:var(--marka)` ile mavi üstüne mavi yazı oluyordu (ekran görüntüsü 2026-09-16:
   "arka planlar tamamen mavi kalıyor", metin görünmez). Seçili durum TEK yerde
   tanımlanır: marka zemin + `--marka-metin`. */
.alt-sekmeler.bolum-sekmeler,
.alt-sekmeler.kat-sekmeler { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; border-bottom:none; }
.bolum-sekmeler .alt-sekme,
.kat-sekmeler .alt-sekme { border:1px solid var(--kenar); background:var(--yuzey); color:var(--metin); border-radius:.5rem; padding:.35rem .7rem; cursor:pointer; }
.bolum-sekmeler .alt-sekme[aria-selected="true"],
.kat-sekmeler .alt-sekme[aria-selected="true"] { background:var(--marka); color:var(--marka-metin); border-color:var(--marka); font-weight:600; }
.kat-acik { margin:.2rem 0 .6rem; }
.ay-acik { margin-top:.3rem; max-width:40rem; }
.uyari-metin { color:var(--hata); }
#ay-onay { max-width:44rem; border:1px solid var(--kenar); border-radius:.6rem; padding:1rem 1.2rem; }
#ay-onay::backdrop { background:rgba(0,0,0,.45); }
.onay-liste dt { font-weight:600; margin-top:.5rem; }
.onay-liste dd { margin:0; }
.dialog-butonlar { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem; }

/* BAKIM UYARI BANDI (numara bakımda): metin --metin (her temada ≥4.5:1), sarı yalnız kenar/zemin tonu */
.bakim-bandi { margin:0; padding:.6rem 1rem; border-bottom:2px solid var(--uyari);
  background:color-mix(in srgb, var(--uyari) 14%, var(--yuzey)); color:var(--metin); font-size:.9rem; }
.bakim-bandi strong { font-weight:700; }
.bakim-bandi ul { margin:.25rem 0 0; padding-left:1.2rem; }
/* "Bakımda arayanları göster": bant içinde küçük, bandın zeminiyle 3:1 kenarlı buton */
.bakim-bandi .dbtn { margin-top:.4rem; padding:.35rem .7rem; font-size:.85rem; }

/* ── UZAK DESTEK (mig080) — müşteri #s-uzak + admin #s-uzak (aynı dosya, iki SPA) ──
   Yeni renk token'ı YOK: durum rozetleri mevcut .rozet.canli/.kuyrukta/.evet/.hayir;
   --mute yalnız yardımcı metinde (ipucu, boş liste, zaman), durum/hata metni --metin/--hata. */
.uz-kod { font-size:1.05em; letter-spacing:.08em; }        /* maskeli erişim kodu okunaklı */
#s-uzak table { min-width:900px; }
#s-uzak #uz-may-tablo { min-width:700px; }
#s-uzak #uz-may-tablo .may-giris { min-width:12rem; width:100%; }
#s-uzak #uz-may-tablo textarea.may-giris { min-width:20rem; }
/* "Bot böyle söyler" önizleme: bot balonu rengi KENAR olarak (metin --metin, zemin yüzey → kontrast korunur) */
.uz-bot-onizleme { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; margin:.4rem 0 .9rem;
  padding:.6rem .9rem; border:1px solid var(--kenar); border-left:4px solid var(--balon-bot);
  border-radius:var(--r); background:var(--yuzey); color:var(--metin); line-height:1.5; }
.uz-bot-etiket { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--metin); white-space:nowrap; }
/* Konu ağacı (mig087): kategori ▸ alt kategori ▸ başlık. Durum YALNIZ renkle gösterilmez —
   rozetin metni de var (WCAG 2.1 AA, global kural §5); girinti aria-level ile de taşınır. */
.uz-agac-satir { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.45rem .7rem; margin:.25rem 0; border:1px solid var(--kenar); border-radius:8px;
  background:var(--yuzey); color:var(--metin); }
.uz-agac-satir .satir-islem { margin-left:auto; display:flex; gap:.4rem; }
.uz-agac-yaprak { background:var(--bg); border-style:dashed; }
#uz-agac-cumleler { display:flex; flex-direction:column; gap:.3rem; }
#uz-agac-govde { display:flex; flex-direction:column; }
/* Kurulum anahtarı kutusu */
.uz-anahtar-kutu { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:.7rem 1rem; margin:.4rem 0 .8rem; border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey); }
.uz-anahtar-goster { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.6rem 0; }
.uz-anahtar-goster code { font-size:1.1rem; letter-spacing:.06em; padding:.4rem .7rem; word-break:break-all; user-select:all; }
/* Konu formu: komut satırları (no · seçim · parametreler · sil) */
.uz-fieldset { border:1px solid var(--kenar); border-radius:var(--r); padding:.6rem .9rem .8rem; margin:0 0 1rem; }
.uz-fieldset legend { font-weight:600; padding:0 .3rem; }
.uz-secenekler { display:flex; gap:.4rem 1.1rem; flex-wrap:wrap; }
.uz-komutlar { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.uz-komut-satir { display:grid; grid-template-columns:1.6rem minmax(160px,220px) 1fr auto; gap:.5rem; align-items:center;
  padding:.4rem .5rem; border:1px solid var(--kenar); border-radius:8px; background:var(--bg); }
.uz-komut-no { font-weight:700; }
.uz-komut-param { display:flex; gap:.4rem .9rem; flex-wrap:wrap; align-items:center; }
.uz-param { display:inline-flex; gap:.35rem; align-items:center; font-size:.9rem; }
.uz-param input, .uz-param select { width:auto; min-width:7rem; padding:.3rem .45rem; }
.uz-komut-satir .uz-komut-sil { padding:.25rem .55rem; }
/* Oturum detayı: olay zaman çizelgesi + ekran görüntüleri */
#uz-detay-dlg, #uz-konu-dlg { width:min(900px,96vw); }
.uz-detay-ozet dd { margin-bottom:.15rem; }
.uz-olaylar { list-style:none; margin:0 0 1rem; padding:0 0 0 1rem; border-left:2px solid var(--kenar); }
.uz-olay { position:relative; padding:.2rem 0 .45rem .8rem; display:flex; flex-wrap:wrap; gap:.15rem .7rem; align-items:baseline; }
.uz-olay::before { content:""; position:absolute; left:-1.35rem; top:.6rem; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--kenar); border:2px solid var(--yuzey); }
.uz-olay-onay::before, .uz-olay-sonuc::before, .uz-olay-dosya::before { background:var(--ok); }
.uz-olay-red::before, .uz-olay-hata::before, .uz-olay-kilit::before { background:var(--hata); }
.uz-olay-istek::before, .uz-olay-komut::before { background:var(--marka); }
.uz-olay-zaman { color:var(--mute); font-size:.82rem; white-space:nowrap; }
.uz-olay-ad { font-weight:600; }
.uz-olay-ozet { flex-basis:100%; color:var(--metin); }
.uz-gorseller { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin-bottom:.6rem; }
.uz-gorsel { margin:0; }
.uz-gorsel img { width:100%; height:auto; border:1px solid var(--kenar); border-radius:8px; background:var(--bg); display:block; }
/* Kurulum sekmesi */
.uz-indir { padding-left:1.2rem; }
.uz-indir li { margin:.3rem 0; }
pre.uz-kur { background:var(--bg); border:1px solid var(--kenar); border-radius:8px; padding:.7rem .9rem;
  overflow-x:auto; font-size:.85rem; line-height:1.5; }
.uz-aydinlatma { width:100%; font:inherit; font-size:.9rem; line-height:1.5; padding:.6rem .8rem;
  border:1px solid var(--kenar); border-radius:8px; background:var(--yuzey); color:var(--metin); resize:vertical; }
.uz-ayar-form { border:1px solid var(--kenar); border-radius:var(--r); padding:.8rem 1rem .4rem; margin-bottom:1.2rem; background:var(--yuzey); }
.uz-ayar-form h3 { margin:0 0 .6rem; }
/* ── AKIŞ HARİTASI (docs/panel-uzak-akis-sayfalari.md §5) ──────────────────────────
   YENİ RENK TOKEN'I YOK — hepsi mevcut set. Ölçüldü (iki tema, en zorlu yüzey):
   --mute 5,95 / 6,86 · --uyari 4,87 / 8,89 · --hata 5,52 / 6,86 · --ok 5,41 / 6,81 ·
   --marka 4,63 / 5,55 (metin eşiği 4,5 her puntoda). Pasif satır OPACITY ile
   soldurulmaz (opacity kontrastı ölçülemez yapar): kesikli kenar + METİNLİ rozet. */
.uz-harita { list-style:none; margin:.2rem 0; padding:0; }
.uz-harita .uz-harita { margin-left:1.1rem; padding-left:.6rem; border-left:2px solid var(--kenar); }
.uz-akis-satir { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.45rem .7rem; margin:.3rem 0; border:1px solid var(--kenar); border-radius:8px;
  background:var(--yuzey); color:var(--metin); }
.uz-akis-satir .satir-islem { margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap; }
.uz-anons { margin:.4rem 0 .8rem; padding:.55rem .85rem; border:1px solid var(--kenar);
  border-left:4px solid var(--balon-bot); border-radius:var(--r); background:var(--yuzey); }
.uz-anons-mini { flex-basis:100%; color:var(--metin); }
/* Yaprak kartı: <summary> düz metin (h4 YOK — heading-order bileşen bağlamına göre kırılır) */
.uz-akis-kart { margin:.3rem 0; border:1px solid var(--kenar); border-radius:8px;
  background:var(--yuzey); color:var(--metin); padding:.35rem .7rem; }
.uz-akis-kart > summary { cursor:pointer; display:flex; gap:.45rem; align-items:center;
  flex-wrap:wrap; padding:.25rem 0; font-weight:600; }
.uz-akis-kart .onay-liste { margin:.4rem 0 .2rem; }
.uz-akis-kart .onay-liste dd { margin:0 0 .5rem; }
.uz-komut-liste { margin:.2rem 0; padding-left:1.2rem; }
.uz-komut-liste li { margin:.25rem 0; }
/* Pasif = kesikli kenar + sol şerit + METİNLİ rozet (renk tek başına ayırt edici olamaz) */
.uz-pasif { border-style:dashed; border-left:4px solid var(--uyari); }
.uz-yeni { outline:3px solid var(--marka); outline-offset:2px; }
.uz-cip { display:inline-flex; gap:.3rem; align-items:baseline; flex-wrap:wrap;
  padding:.2rem .5rem; margin:.1rem .15rem; border:1px solid var(--kenar); border-radius:999px;
  background:var(--bg); color:var(--metin); font-size:.9rem; }
.uz-cip-zayif { border-style:dashed; border-color:var(--uyari); }
.uz-yer-cip { padding:.2rem .5rem; font-size:.85rem; }
/* ÖRNEK kutusu: gerçek sanılmasın — kesikli uyarı kenarı + metinli etiket */
.uz-ornek { display:block; margin:.35rem 0 0; padding:.45rem .7rem; border:1px dashed var(--uyari);
  border-radius:8px; background:var(--bg); color:var(--metin); }
.uz-ornek-etiket { display:block; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--uyari); }
/* Deneme kutusu + adım listesi (aria-live YALNIZ tek satırlık özette) */
.uz-dene { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.3rem 0; }
.uz-dene input[type="text"] { flex:1; min-width:16rem; }
.uz-dene-turlar { display:inline-flex; gap:.3rem; flex-wrap:wrap; }
.uz-dene-turlar input { width:8rem; padding:.2rem .4rem; }
.uz-ozet-satir { margin:.5rem 0; font-weight:600; color:var(--metin); }
.uz-adimlar { list-style:none; margin:.4rem 0 1rem; padding:0; display:flex;
  flex-direction:column; gap:.3rem; }
.uz-adim { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap;
  padding:.4rem .7rem; border:1px solid var(--kenar); border-radius:8px;
  background:var(--yuzey); color:var(--metin); }
.uz-adim-no { min-width:1.4rem; font-weight:700; color:var(--mute); }
.uz-adim-etiket { min-width:7rem; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--metin); }
.uz-adim-metin { flex:1; min-width:12rem; }
.uz-denetim { list-style:none; margin:.3rem 0 1rem; padding:0; display:flex;
  flex-direction:column; gap:.3rem; }
.uz-denetim li { padding:.4rem .7rem; border:1px solid var(--kenar); border-radius:8px;
  background:var(--yuzey); color:var(--metin); }
/* Metin bloğu içindeki bağ: renk tek başına yeterli değil (WCAG 1.4.1) → alt çizgi */
.uz-bag { text-decoration:underline; text-underline-offset:3px; }
/* Admin: relay sağlık kartları + müşteri kapı tablosu */
.uz-relay-kart .sayi.kotu { color:var(--hata); }
@media (max-width:640px) {
  .uz-komut-satir { grid-template-columns:1.6rem 1fr auto; }
  .uz-komut-satir .uz-komut-param { grid-column:1 / -1; }
  .uz-anahtar-kutu { flex-direction:column; align-items:flex-start; }
  .uz-gorseller { grid-template-columns:1fr; }
  .uz-harita .uz-harita { margin-left:.5rem; padding-left:.4rem; }
  .uz-adim-etiket { min-width:0; flex-basis:100%; }
  .uz-dene input[type="text"] { min-width:0; width:100%; }
  .uz-akis-satir .satir-islem { margin-left:0; }
}

/* ── 📋 KURALLAR EKRANI (docs/panel-basit-kurallar.md) ─────────────────────────────────
   Dört sütun: ARAYAN NE DER | İŞLETİM SİSTEMİ | ÇALIŞACAK KOMUTLAR | işlem.
   KONTRAST DİSİPLİNİ (seo-guvenlik §5.2): rozet metni `--uyari`/`--ok` DEĞİL, tint'li zemin
   üstünde ölçülmüş `--rozet-uyari-metin`; `--metin`/`--mute` doğrudan kullanılan yerlerde
   zemin `--yuzey`. Açık ve koyu tema AYRI ölçüldü (tools/kontrast_olc.py). */
.gorsel-gizli { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.kr-kategori { border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey);
  padding:.8rem 1rem 1rem; margin:0 0 1.1rem; }
.kr-kategori > h3 { margin:0 0 .3rem; }
.kr-altgrup { border:1px dashed var(--kenar); border-radius:8px; background:var(--bg);
  padding:.6rem .8rem .8rem; margin:.8rem 0 .4rem; }
.kr-altgrup > h4 { margin:0 0 .3rem; font-size:1rem; }
.kr-menusuz { border:1px dashed var(--kenar); border-radius:var(--r); background:var(--bg);
  padding:.8rem 1rem 1rem; margin:0 0 1.1rem; }
.kr-menusuz > h3 { margin:0 0 .2rem; }
.kr-basbilgi { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 .6rem; }
.kr-basbilgi .satir-islem { margin-left:auto; display:flex; gap:.35rem; }
.kr-bos { margin:.3rem 0 .6rem; }
.kr-doluluk { margin:.6rem 0 0; }
.kr-tablo { width:100%; border-collapse:collapse; }
.kr-tablo td { vertical-align:top; }
.kr-tablo .satir-islem { display:flex; gap:.3rem; }
/* Dokunma hedefi ≥24×24 CSS px (WCAG 2.5.8); ikon düğmelerin hepsinde bağlamlı aria-label.
   KENAR: ikon-only düğmeyi ayırt eden TEK sınır çizgisidir (1.4.11 → 3:1). Global `--kenar`
   bu eşiği geçmiyor (ölçüldü: açık 1,42 / koyu 1,34 — tüm panelde ortak, burada değiştirilmez);
   satır düğmelerine `--mute` verildi (5,95 / 6,86). Token global olarak düzeltilene kadar
   yeni yüzey doğru davranır. */
.kr-dgm { padding:.35rem .5rem; min-width:2rem; min-height:2rem; line-height:1;
  border-color:var(--mute); }
/* Kapalı satır: RENK TEK BAŞINA AYIRT EDİCİ DEĞİL (1.4.1) — kesikli sol çizgi + "kapalı" rozeti. */
.kr-satir-kapali > td { border-left:3px dashed var(--kenar); }
.rozet.kr-kapali { color:var(--mute); border-style:dashed; }
.rozet.kr-platform { color:var(--metin); border-color:var(--kenar); background:var(--yuzey); }
.rozet.kr-sayac { color:var(--metin); border-color:var(--kenar); background:var(--yuzey); }
.rozet.kr-uyari { background:color-mix(in srgb, var(--uyari) 18%, transparent);
  color:var(--rozet-uyari-metin); border-color:var(--uyari); font-weight:700; }
/* Metin düşüren yer tutucu çipi: renk + "⚠" + title — üçü birden. */
.uz-yer-cip.uz-yer-riskli { border-color:var(--uyari); color:var(--rozet-uyari-metin);
  background:color-mix(in srgb, var(--uyari) 12%, var(--yuzey)); font-weight:700; }
.uz-ayrinti { border:1px solid var(--kenar); border-radius:var(--r); background:var(--yuzey);
  padding:.5rem .9rem; margin:1rem 0; }
.uz-ayrinti > summary { cursor:pointer; font-weight:600; padding:.25rem 0; }
.uz-ayrinti[open] > summary { border-bottom:1px solid var(--kenar); margin-bottom:.6rem; }
/* Telefonda KART DİZİLİMİ: yatay sayfa kaydırması yok, yan boşluk 16px korunur. */
@media (max-width:640px) {
  .kr-tablo, .kr-tablo tbody, .kr-tablo tr, .kr-tablo td { display:block; width:100%; }
  .kr-tablo thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .kr-tablo tr { border:1px solid var(--kenar); border-radius:8px; margin:0 0 .6rem; padding:.5rem .7rem; }
  .kr-tablo td { border-bottom:0; padding:.25rem 0; }
  /* `[data-etiket]` ŞART: etiketsiz İşlem sütunu kart dizilimde çıplak bir " · " basıyordu
     (ölçüldü 2026-09-23, 390 px) — `attr()` boş dönüyor ama ayıraç kalıyor. */
  .kr-tablo td[data-etiket]::before { content:attr(data-etiket) " · "; font-size:.75rem;
    color:var(--mute); text-transform:uppercase; letter-spacing:.03em; }
  .kr-tablo td:first-child::before { content:""; }
  .kr-satir-kapali > td { border-left:0; }
  .kr-kategori, .kr-menusuz { padding:.7rem .8rem .8rem; }
}

/* ── Kurallar alt sekmeleri + sihirbaz (2026-09-23) ─────────────────────────────
   Kullanıcı: "Kurallar hiç anlaşılmıyor. alt sekmelere bölerek bir sihirbaz yardımı ile
   ekleme, düzenleme ve silme eylemlerini yaptır." Yeni renk TOKEN'I YOK — hepsi var olan
   --kenar / --marka / --mute / --ok üzerinden; ölçülmüş kontrastlar bozulmasın. */
.kr-sekmeler { margin: .2rem 0 .9rem; }
.kr-panel[hidden] { display: none; }

/* Adım şeridi. Durum ÜÇ işaretle birden verilir: numara/✓, kalınlık ve kenarlık —
   renk TEK ayırt edici olsaydı WCAG 1.4.1'i kırardı. */
.sh-serit { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0 0 1rem; padding:0; }
.sh-nokta { display:flex; align-items:center; gap:.4rem; padding:.3rem .6rem;
  border:1px solid var(--kenar); border-radius:999px; color:var(--mute); font-size:.86rem; }
.sh-nokta .sh-no { display:inline-flex; align-items:center; justify-content:center;
  width:1.4rem; height:1.4rem; border-radius:50%; border:1px solid currentColor; font-size:.78rem; }
/* `--ok` METİN rengi OLARAK kullanılmaz (3:1 UI eşiğinde doğrulandı, 4.5:1 metin eşiği
   için ölçülmedi) — yalnız kenarlık. Tamamlanma zaten ✓ imiyle ve tıklanabilirlikle
   ayrıca işaretli, yani renk tek ayırt edici değil. */
.sh-nokta.gecti { color:var(--metin); border-color:var(--ok); cursor:pointer; }
.sh-nokta.gecti .sh-no { border-color:var(--ok); }
.sh-nokta.simdi { color:var(--metin); border-color:var(--marka); border-width:2px; font-weight:600; }
.sh-nokta.simdi .sh-no { background:var(--marka); color:var(--marka-metin); border-color:var(--marka); }
@media (max-width: 560px) { .sh-nokta:not(.simdi) .sh-ad { display:none; } }

.sh-adim[hidden] { display:none; }
.sh-adim > .ipucu:first-child { margin-top:0; }
/* Geri/İleri sağda, Vazgeç solda: yıkıcı olmayan çıkış yolu ile ilerleme yolu ayrı köşelerde. */
.sh-islem { display:flex; align-items:center; gap:.5rem; }
.sh-bosluk { flex:1; }

.sh-ozet { display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.45rem .9rem; margin:0; }
.sh-ozet dt { color:var(--mute); font-size:.88rem; }
.sh-ozet dd { margin:0; }
.sh-ozet-komut { margin:0; padding-left:1.1rem; }
@media (max-width: 560px) {
  .sh-ozet { grid-template-columns:1fr; gap:.15rem; }
  .sh-ozet dd { margin-bottom:.5rem; }
}

/* Silme onayı: "ne" ile "sonra ne olacak" görsel olarak da ayrı. */
.uz-sil-ne { font-size:1.02rem; margin:.2rem 0 .6rem; }
.uz-sil-sonuc { margin:0 0 1rem; padding-left:1.1rem; color:var(--metin); }
.uz-sil-sonuc li { margin:.3rem 0; }

/* ── Basit kural listesi + detay sayfası (2026-09-23) ───────────────────────────
   Kullanıcı: "kural listesi hala çok karışık daha basit bir listeleme lazım. tek tek
   kurallara ayrı sayfalar ile açıp düzenleme yapılmalı." Satır TEK SATIR; eş anlamlılar,
   komut adları ve düzenle/sil düğmeleri detay sayfasına indi. Yeni renk TOKEN'I YOK. */
.kr-liste { list-style:none; margin:.4rem 0 .6rem; padding:0;
  border:1px solid var(--kenar); border-radius:var(--r); overflow:hidden; }
.kr-sira { display:flex; align-items:stretch; border-top:1px solid var(--kenar); }
.kr-sira:first-child { border-top:0; }
/* Satırın TAMAMI düğme: tıklama hedefi 44px'ten büyük (WCAG 2.5.8) ve tek bir ad okunur. */
.kr-ac { flex:1; display:flex; align-items:center; gap:.6rem; min-height:2.9rem;
  padding:.55rem .8rem; background:transparent; border:0; border-radius:0;
  color:var(--metin); text-align:left; font:inherit; cursor:pointer; }
.kr-ac:hover { background:color-mix(in srgb, var(--marka) 7%, transparent); }
.kr-ac:focus-visible { outline:2px solid var(--marka); outline-offset:-2px; }
.kr-ad { flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere; }
.kr-ek { color:var(--mute); font-size:.86rem; white-space:nowrap; }
.kr-rozetler { display:flex; gap:.3rem; flex-wrap:wrap; }
.kr-ok { color:var(--mute); font-size:1.1rem; }
.kr-tasi { display:flex; align-items:center; gap:.2rem; padding:.3rem .5rem .3rem 0; }
.kr-sira.kr-satir-kapali .kr-ad { text-decoration:line-through; }
@media (max-width: 560px) {
  .kr-ac { flex-wrap:wrap; gap:.25rem .6rem; }
  .kr-ad { flex:1 0 100%; }
  .kr-ok { display:none; }
}

/* Detay sayfası: liste ile AYNI panelde ikinci görünüm (modal değil). */
.kr-detay-ust { display:flex; align-items:center; gap:.5rem; margin:.2rem 0 .8rem; }
#uz-kr-detay-baslik { margin:.2rem 0 .1rem; }
#uz-kr-detay-baslik:focus-visible { outline:2px solid var(--marka); outline-offset:3px; }
#uz-kr-detay-yol { margin:0 0 1rem; }
.kr-detay-form[hidden] { display:none; }
.kr-detay-form > form { max-width:56rem; }