/* ATSO Kampanya paneli - Apple-calm ilhamli acik tema */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --border: #e5e5ea;
  --border-strong: #d1d1d6;
  --accent: #007aff;
  --accent-weak: #e8f1ff;
  --success: #34c759;
  --success-weak: #e6f7ec;
  --warning: #ff9500;
  --danger: #ff3b30;
  --danger-weak: #ffeceb;
  --radius: 14px;
  --radius-sm: 10px;
  /* Topbar yuksekligi TEK kaynakta: yapiskan (sticky) ogeler buna gore konumlanir.
     Elle yazilirsa topbar yuksekligi degisince sessizce topbar'in ALTINA girerler. */
  --topbar-h: 60px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.04);
  --sidebar-w: 248px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #007aff, #34aadc);
  display: grid; place-items: center; color: #fff; font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
}
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: var(--text-3); }

.nav { display: flex; flex-direction: column; gap: 2px; }
/* [hidden] her zaman kazanmali: tarayicinin varsayilan [hidden]{display:none} kurali,
   asagidaki gibi acik `display` veren SINIF kurallarina yenilir (ozgulluk daha dusuk).
   Bu olmadan `el.hidden = true` sessizce ETKISIZ kalir (orn. admin-only menuler herkese gorunur). */
[hidden] { display: none !important; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer; font-weight: 500;
  user-select: none; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.nav-item .ic { font-size: 17px; width: 20px; text-align: center; }
.nav-badge {
  margin-left: auto; font-size: 11px; background: var(--border);
  color: var(--text-2); border-radius: 20px; padding: 1px 8px; font-weight: 600;
}
.nav-item.active .nav-badge { background: #fff; color: var(--accent); }

.sidebar-foot { margin-top: auto; padding-top: 14px; }
.wa-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.dot.open { background: var(--success); box-shadow: 0 0 0 3px rgba(52,199,89,.15); }
.dot.qr, .dot.connecting { background: var(--warning); box-shadow: 0 0 0 3px rgba(255,149,0,.15); }
.dot.disconnected { background: var(--text-3); }

/* Main */
.main { flex: 1; min-width: 0; }
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.8); backdrop-filter: saturate(180%) blur(16px);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.content { padding: 28px; max-width: 1200px; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 20px;
}
.card-title { font-size: 15px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.card-sub { color: var(--text-2); font-size: 13px; margin: 0 0 16px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* Stat tiles */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.stat .k { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.stat .v { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; }
.stat .v small { font-size: 14px; color: var(--text-3); font-weight: 500; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 550; font-size: 13.5px;
  cursor: pointer; font-family: var(--font); transition: filter .12s, background .12s, opacity .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-weak); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.block { width: 100%; }

/* Forms */
label.fld { display: block; margin-bottom: 12px; }
label.fld .lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
input[type=text], input[type=tel], input[type=number], input[type=datetime-local], input[type=time], input[type=date], input[type=password], input[type=email], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font);
  background: var(--surface); color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
textarea { resize: vertical; min-height: 90px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge.gray { background: var(--border); color: var(--text-2); }
.badge.blue { background: var(--accent-weak); color: var(--accent); }
.badge.green { background: #e3f9ea; color: #248a3d; }
.badge.orange { background: #fff2e0; color: #c76b00; }
.badge.red { background: #ffe9e7; color: #d70015; }

/* Progress */
.progress { height: 8px; background: var(--border); border-radius: 20px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 20px; transition: width .4s; }

/* QR */
.qr-box { display: grid; place-items: center; gap: 14px; padding: 20px; text-align: center; }
.qr-box img { width: 280px; height: 280px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.qr-placeholder { width: 280px; height: 280px; border-radius: 12px; border: 2px dashed var(--border-strong); display: grid; place-items: center; color: var(--text-3); }

/* Log feed */
.logfeed { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; max-height: 320px; overflow-y: auto; background: #1d1d1f; color: #e5e5ea; border-radius: var(--radius-sm); padding: 12px 14px; }
.logfeed .l { padding: 2px 0; display: flex; gap: 8px; }
.logfeed .l .t { color: #636366; flex-shrink: 0; }
.logfeed .l.info .m { color: #d1d1d6; }
.logfeed .l.warn .m { color: #ffd60a; }
.logfeed .l.error .m { color: #ff6961; }

/* Voice item */
.voice-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.voice-item.inactive { opacity: .55; }
.voice-item audio { height: 34px; }

/* Toast */
.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { padding: 12px 16px; border-radius: var(--radius-sm); background: #1d1d1f; color: #fff; box-shadow: var(--shadow); font-size: 13.5px; max-width: 340px; animation: slidein .2s ease; }
.toast.success { background: #248a3d; }
.toast.error { background: #d70015; }
@keyframes slidein { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 500; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 520px; padding: 24px; max-height: 88vh; overflow-y: auto; }
.modal h3 { margin: 0 0 16px; font-size: 17px; }

.empty { text-align: center; color: var(--text-3); padding: 40px 20px; }
.checks { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-2); }
.sep { height: 1px; background: var(--border); margin: 16px 0; }
.tag-accent { color: var(--accent); font-weight: 600; }
.callout { background: #fff8ec; border: 1px solid #ffe2b3; color: #8a5a00; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }
.callout.blue { background: var(--accent-weak); border-color: #bcdcff; color: #0058c0; }
.callout.green { background: #eafaf0; border-color: #b6e6c9; color: #1c7a44; }
.callout.danger { background: #fdecec; border-color: #f5c2c2; color: #b23434; }

/* Inbox iki-panel */
.inbox-panes { display: flex; min-height: 460px; }
.inbox-list { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; max-height: 560px; }
.inbox-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inbox-back { display: none; }

/* Hamburger (sadece mobil) */
.hamburger { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 18px; cursor: pointer; align-items: center; justify-content: center; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }

/* ---------- MOBIL ---------- */
@media (max-width: 820px) {
  .hamburger { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar h1 { font-size: 17px; }
  .content { padding: 16px; }
  .card { padding: 16px; }
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 24px; }
  .topbar-actions-wrap { }

  /* Inbox: mobilde tek panel, secilince sohbete gec */
  .inbox-list { width: 100%; border-right: none; max-height: none; }
  .inbox-pane { display: none; }
  .inbox-panes.showing .inbox-list { display: none; }
  .inbox-panes.showing .inbox-pane { display: flex; min-height: 60vh; }
  .inbox-back { display: inline-flex; }

  /* Formlarda daralt */
  .row, .inline { gap: 8px; }
  input[type=text], input[type=tel], input[type=number], select { font-size: 16px; } /* iOS zoom onleme */
}
@media (max-width: 480px) {
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .brand-name { font-size: 14px; }
}

/* ================= CRM ================= */
.stage-pill {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; color: var(--sc, #6b7280);
  background: color-mix(in srgb, var(--sc, #6b7280) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #6b7280) 30%, transparent);
}
/* Asama filtre chip'leri */
.stage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chips .chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.stage-chips .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #6b7280); display: inline-block; }
.stage-chips .chip b { color: var(--text); font-weight: 600; }
.stage-chips .chip:hover { border-color: var(--border-strong); }
.stage-chips .chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--text); }
.filters { flex-wrap: wrap; gap: 10px; }
.filters select, .filters input { max-width: 220px; }
.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.chk-inline input { width: auto; }

/* ---- Kisi listesi: MOBIL-ONCELIKLI kart duzeni ------------------------------
   Neden tablo degil: tablo 390px ekranda 920px'e tasiyordu, kullanici telefonu
   gormek icin YANA kaydirmak zorundaydi. Kartta her sey alt alta; "Ara" tek
   dokunus. Asil kullanicilar 55+ ve telefondan calisiyor.
   Asagidaki kurallar MOBIL varsayilanidir; genis ekran ayari en altta. */
/* Kisi ekrani filtreleri: HEP EKRANDA, alt alta, etiketli ve BUYUK.
   Pop-up/acilir panel kullanma — kullanici kitlesi 50-55+ ve teknik degil;
   gizlenen filtreyi bulamiyor. Yer kaplamasi bilinen ve kabul edilen takas. */
#c-filters { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
#c-filters .fld { margin: 0; }
#c-filters .lbl { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
#c-filters select {
  width: 100%; max-width: none;
  min-height: 52px; font-size: 17px; padding: 0 12px;
  border-width: 2px;
}
#c-filters .chk-inline { font-size: 17px; min-height: 52px; color: var(--text); }
#c-filters .chk-inline input { width: 26px; height: 26px; }
#c-filters #flt-clear { min-height: 48px; font-size: 15px; }
/* Kutu basliklari: filtre kutusu ile veri kutusunun nerede baslayip bittigi
   ilk bakista belli olsun (kullanici istegi — ikisi tek kartta karisiyordu). */
.box-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.box-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.box-count { font-size: 14px; font-weight: 600; color: var(--text-2); }
/* Filtre kutusu veri kutusundan gorsel olarak ayrilsin: hafif gri zemin. */
.flt-card { background: var(--surface-2); }
.sel-bar { padding: 4px 2px 10px; border-bottom: 1px solid var(--border); }
.sel-bar .chk-inline { font-size: 15px; min-height: 44px; }
.sel-bar .chk-inline input { width: 22px; height: 22px; }

.c-list { display: flex; flex-direction: column; }
.c-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "chk main" ". act";
  gap: 4px 10px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.c-card:last-child { border-bottom: 0; }
.c-card.on { background: var(--accent-weak); }
.c-card-chk { grid-area: chk; display: flex; align-items: flex-start; padding-top: 2px; }
.c-card-chk input { width: 22px; height: 22px; }
.c-card-main { grid-area: main; min-width: 0; }
.c-card-name { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.3; }
/* Firma adi TEK satir + ucu uc nokta. Resmi ticaret unvanlari cok uzun
   ("EGEDENIZ OZEL SAGLIK HIZMETLERI TURIZM INSAAT TICARET LIMITED SIRKETI") ve
   sarmasina izin verilirse tek kart 3 satir yiyor. Tam metin title'da duruyor. */
.c-card-sub {
  font-size: 14px; color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.c-card-act { grid-area: act; display: flex; gap: 8px; margin-top: 8px; }
/* Dokunma hedefleri: HIG alt siniri 44x44. Butonlar ESIT genislikte (kullanici istegi).
   Uc buton olunca 390px ekranda ~83px kaliyor; "WhatsApp" kelimesi sarmasin diye
   yatay dolgu ve punto biraz kisiliyor — yukseklik (dokunma hedefi) korunuyor. */
.c-card-act .btn { min-height: 44px; font-size: 14px; padding-left: 6px; padding-right: 6px; gap: 5px; white-space: nowrap; }
.c-card-act .c-call,
.c-card-act .c-wa,
.c-card-act .c-open { flex: 1 1 0; min-width: 0; }
.c-card-act .c-call { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* WhatsApp yesili: "Ara" ve "Aç" mavi oldugu icin mesaj butonu renkle ayrisiyor —
   55+ kullanicida ikon+renk, metni okumadan once tanimayi sagliyor. */
.c-card-act .c-wa { background: var(--success); border-color: var(--success); color: #fff; }

/* Genis ekran: ayni kart, tek satirda. Aksiyonlar sagda, alta kaymaz.
   Mobil duzen varsayilan oldugu icin burada sadece GENISLETIYORUZ. */
@media (min-width: 881px) {
  .c-card {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "chk main act";
    align-items: center;
    padding: 12px 4px;
  }
  .c-card-act { margin-top: 0; }
  /* Genis ekranda kartin genisligini yemesinler; esit genislik korunuyor. */
  .c-card-act .c-call,
  .c-card-act .c-wa,
  .c-card-act .c-open { flex: 0 0 96px; justify-content: center; }
  .c-card:hover { background: var(--surface-2); }
  /* Genis ekranda alt alta 5 filtre gereksiz yer yer — yan yana sigiyorlar.
     Mobildeki "hepsi alt alta ve buyuk" kurali degismiyor. */
  #c-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  #c-filters .fld { flex: 1 1 190px; }
  #c-filters select { min-height: 44px; font-size: 15px; border-width: 1px; }
  #c-filters .chk-inline { font-size: 15px; min-height: 44px; }
  #c-filters .chk-inline input { width: auto; height: auto; }
  #c-filters #flt-clear { width: auto; }
  /* Toplu islem: genis ekranda yatay serit — yer bol, alt alta gerek yok.
     Yikici buton yine sagda ve ayri dursun. */
  .bulk-acts { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .bulk-acts .fld { flex: 1 1 170px; }
  .bulk-acts .btn { flex: 0 0 auto; }
  .bulk-bar select { min-height: 40px; font-size: 14px; }
  .bulk-acts .btn, .bulk-danger .btn { min-height: 40px; font-size: 14px; }
  .bulk-danger { margin-top: 10px; padding-top: 10px; }
  .bulk-danger .btn { width: auto; }
}
/* Liste hucreleri */
.cell-name { font-weight: 500; }
.cell-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
tr.row-sel { background: var(--accent-weak) !important; }
.row-chk { width: auto; cursor: pointer; }
.pager .btn:disabled { opacity: .4; cursor: default; }
/* Toplu islem bari */
/* Toplu islem cubugu — MOBIL varsayilani: baslik + her eylem tam satir.
   Yatay serit halindeyken mobilde rastgele sariyor, "Komiteye tasi…" kesiliyor ve
   kirmizi "Sil" tam "Kara liste"nin yanina dusuyordu. */
.bulk-bar {
  background: var(--accent-weak); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px;
}
.bulk-bar[hidden] { display: none; }
.bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bulk-bar .bulk-count { font-size: 15px; color: var(--text); }
.bulk-bar .bulk-count b { font-size: 17px; }
.bulk-acts { display: flex; flex-direction: column; gap: 10px; }
.bulk-acts .fld { margin: 0; }
.bulk-acts .lbl { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.bulk-bar select { width: 100%; max-width: none; min-height: 46px; font-size: 16px; }
.bulk-acts .btn { min-height: 46px; font-size: 15px; }
/* Yikici eylem AYRI ve en altta — "Kara liste"nin hemen yaninda olmasin. */
.bulk-danger { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--accent); }
.bulk-danger .btn { min-height: 46px; font-size: 15px; }
/* Ice aktar collapsible */
.imp-card > summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.imp-card > summary::-webkit-details-marker { display: none; }
.imp-card > summary::before { content: '▸ '; color: var(--text-3); }
.imp-card[open] > summary::before { content: '▾ '; }
/* Asama stepper (detay) */
.stage-stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-stepper .step {
  cursor: pointer; font-size: 12px; font-weight: 500; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.stage-stepper .step.on { color: #fff; background: var(--sc, #6b7280); border-color: var(--sc, #6b7280); }
/* Aktivite / not akisi */
.act-feed { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; margin-bottom: 4px; }
.act-item { display: flex; gap: 9px; align-items: flex-start; }
.act-ic { flex: none; font-size: 14px; line-height: 1.5; }
.act-body { flex: 1; min-width: 0; font-size: 13px; }
.act-meta { color: var(--text-3); font-size: 11px; margin-top: 1px; }
.convo-hist { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* CRM bandi (dashboard) */
.crm-band { margin-top: 16px; }
.crm-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.funnel { display: flex; flex-direction: column; gap: 7px; }
.funnel-row { display: grid; grid-template-columns: 68px 1fr 34px; align-items: center; gap: 8px; }
.funnel-label { font-size: 12px; color: var(--text-2); }
.funnel-track { background: var(--surface-2); border-radius: 6px; height: 18px; overflow: hidden; border: 1px solid var(--border); }
.funnel-fill { height: 100%; border-radius: 6px 0 0 6px; min-width: 2px; transition: width .4s ease; }
.funnel-n { font-size: 12px; font-weight: 600; text-align: right; }
.crm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.kpi-v { font-size: 22px; font-weight: 650; }
.kpi-k { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.kpi-warn { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
/* Inbox sohbet context + not */
.convo-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.convo-notes { padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cn-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 120px; overflow-y: auto; }

@media (max-width: 820px) {
  .crm-grid { grid-template-columns: 1fr; gap: 14px; }
  /* NOT: .filters mobil duzeni artik "Arama kahramani" bolumunde (880px) — her filtre tam satir. */
  /* Secim yapip listeyi kaydirinca eylemler kaybolmasin: cubuk yapiskan.
     top:0 DEGIL — topbar orada ve z-index'i 10; cubuk onun ALTINA girip kayboluyordu.
     Arama kutusu da yapiskan, o yuzden cubuk ikisinin de altina yapisir. */
  .bulk-bar { position: sticky; top: calc(var(--topbar-h) + 72px); z-index: 5; }
  .stage-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .stage-chips .chip { white-space: nowrap; }
}

/* ============================================================
   ERISILEBILIRLIK KATMANI — 50+ yas, kolay/sezgisel kullanim.
   Buyuk yazi, yuksek kontrast, genis dokunma hedefleri.
   (Sonda oldugu icin ustteki degerleri ezer.)
   ============================================================ */
:root {
  --text-2: #48484a;   /* yardimci metin: daha yuksek kontrast */
  --text-3: #6a6a6e;   /* soluk metin: yine de okunakli */
  --radius: 16px;
  --radius-sm: 12px;
}
body { font-size: 16.5px; line-height: 1.55; }

/* Basliklar */
:root { --topbar-h: 66px; } /* 50+ erisilebilirlik katmani — yapiskan ogeler otomatik uyar */
.topbar h1 { font-size: 22px; }
.card-title { font-size: 18px; }
.card-sub { font-size: 14.5px; }
.brand-name { font-size: 16px; }
.brand-sub { font-size: 12px; }

/* Navigasyon — buyuk ve net */
.nav-item { padding: 13px 13px; font-size: 16px; gap: 13px; }
.nav-item .ic { font-size: 22px; width: 24px; }
.nav-badge { font-size: 13px; padding: 2px 10px; }
.wa-chip { font-size: 14px; padding: 12px 13px; }

/* Butonlar — genis dokunma hedefi */
.btn { padding: 12px 20px; font-size: 16px; gap: 8px; }
.btn.sm { padding: 9px 15px; font-size: 14.5px; }

/* Form alanlari — buyuk, okunakli, mobilde zoom yok */
input[type=text], input[type=tel], input[type=number], input[type=datetime-local],
input[type=time], input[type=date], input[type=password], input[type=email], select, textarea {
  padding: 13px 15px; font-size: 16.5px;
}
label.fld .lbl { font-size: 14px; }
textarea { font-family: var(--font); font-size: 16px; line-height: 1.5; min-height: 80px; }

/* Tablolar — genis satir, tiklanabilir */
table { font-size: 16px; }
th { font-size: 13px; padding: 12px 14px; }
td { padding: 16px 14px; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--accent-weak); }

/* Rozet / pill / chip — buyuk */
.badge { font-size: 13px; padding: 3px 11px; }
.stage-pill { font-size: 13px; padding: 3px 11px; }
.stage-chips .chip { font-size: 15.5px; padding: 9px 16px; }
.stage-chips .chip i { width: 10px; height: 10px; }
.stage-stepper .step { font-size: 14px; padding: 9px 14px; }

/* Stat + KPI + huni */
.stat .k { font-size: 14px; }
.kpi-v { font-size: 26px; }
.kpi-k { font-size: 13px; }
.funnel-label { font-size: 14px; }
.funnel-row { grid-template-columns: 80px 1fr 40px; }
.funnel-track { height: 22px; }
.funnel-n { font-size: 14px; }

/* Aktivite / not akisi — okunakli */
.act-body { font-size: 15px; }
.act-ic { font-size: 17px; }
.act-meta { font-size: 12.5px; }

/* Modal */
.modal { max-width: 600px; padding: 26px; }
.modal h3 { font-size: 21px; }

/* Belirgin "Not Ekle" kutusu (kisi detay + sohbet) */
.note-box { background: #fffbe9; border: 1.5px solid #ffe8a3; border-radius: var(--radius-sm); padding: 14px; margin: 6px 0 14px; }
.note-box .note-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.note-box input { font-size: 16.5px; }
.note-box .btn { padding: 12px 22px; }

/* "Aç" (detay) butonu — net cagri */
.btn.open-cta { font-weight: 700; color: var(--accent); border-color: var(--accent); background: var(--accent-weak); }
.btn.open-cta:hover { background: #d9eaff; }

/* ============================================================
   KISI DETAY MODALI — yeniden tasarim (sabit baslik + 3 sekme)
   50+ dostu: buyuk avatar, net sekmeler, tek govde scroll'u.
   ============================================================ */
body.modal-open { overflow: hidden; }
.cd-modal { padding: 0; max-width: 560px; display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }

/* Sabit ust baslik — kaydirinca kaybolmaz, kisi hep belli */
.cd-head { display: flex; align-items: flex-start; gap: 15px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cd-avatar { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.cd-id { flex: 1; min-width: 0; }
.cd-name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-phone { color: var(--text-2); font-size: 15.5px; margin-top: 3px; }
.cd-idtags { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-close { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }
.cd-close:hover { background: var(--danger-weak); color: var(--danger); border-color: var(--danger); }

/* Sekme cubugu — buyuk dokunma hedefleri */
.cd-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.cd-tab { flex: 1; border: none; background: transparent; padding: 15px 6px; font-size: 15.5px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; font-family: var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: color .12s, background .12s; }
.cd-tab:hover { color: var(--text); }
.cd-tab.on { color: var(--accent); background: var(--surface); border-bottom-color: var(--accent); }
.cd-tab-n { background: var(--border); color: var(--text-2); border-radius: 20px; padding: 1px 8px; font-size: 12.5px; font-weight: 700; }
.cd-tab.on .cd-tab-n { background: var(--accent); color: #fff; }

/* Govde — tek scroll (ic ice scroll yok) */
.cd-body { padding: 18px 22px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.cd-section { padding: 16px 0; border-top: 1px solid var(--border); }
.cd-section:first-child { padding-top: 4px; border-top: none; }
.cd-section-t { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cd-info td { padding: 9px 10px; font-size: 15px; }
.cd-info td:first-child { width: 122px; color: var(--text-2); }
.cd-info table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* Modal icinde ic-scroll kapat — govde zaten kayiyor */
.cd-body .act-feed-lg, .cd-body .convo-hist-lg { max-height: none; overflow: visible; }

@media (max-width: 480px) {
  .cd-head { padding: 16px 16px 13px; gap: 12px; }
  .cd-avatar { width: 46px; height: 46px; font-size: 20px; }
  .cd-name { font-size: 19px; }
  .cd-tab { font-size: 14px; padding: 13px 4px; gap: 5px; }
  .cd-body { padding: 16px 16px 20px; }
}

/* ============================================================
   MESAJ SABLONLARI (metin) + kampanya turu secimi
   ============================================================ */
/* Segmented control — kampanya turu (Sesli / Metin) */
.seg {
  display: flex; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px;
}
.seg-btn {
  flex: 1; border: none; background: transparent; color: var(--text-2);
  font-weight: 600; font-size: 16px; padding: 12px 18px; border-radius: 9px;
  cursor: pointer; font-family: var(--font); transition: background .12s, color .12s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* Sablon listesi */
.tpl-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 12px;
}
.tpl-item.inactive { opacity: .6; }
.tpl-main { flex: 1; min-width: 0; }
.tpl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tpl-head strong { font-size: 16.5px; }
.tpl-body {
  color: var(--text); font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.tpl-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; }
.tpl-actions .check { white-space: nowrap; font-size: 14.5px; }

/* Yardim metnindeki kod ornekleri */
.hint code, .tpl-hint code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .92em; color: var(--accent);
}

@media (max-width: 640px) {
  .tpl-item { flex-direction: column; gap: 10px; }
  .tpl-actions { flex-direction: row; flex-wrap: wrap; }
  .seg-btn { padding: 12px 10px; font-size: 15px; }
}

/* ============================================================
   CRM v2 — Etiketler, Durum butonlari, "Bugun" ekrani
   (55+ yas: buyuk hedefler, net renk, sade)
   ============================================================ */

/* Yeni rozet renkleri */
.badge.purple { background: #efe7fb; color: #7c3aed; }
.badge.teal   { background: #d9f5f1; color: #0d7d70; }

/* Etiket rozeti (kisi satiri + baslik) + cikarma x */
.tagchip { position: relative; }
.tag-x { font-style: normal; margin-left: 5px; cursor: pointer; font-weight: 700; opacity: .7; padding: 0 3px; border-radius: 6px; }
.tag-x:hover { opacity: 1; background: rgba(0,0,0,.12); }
.tag-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 28px; }

/* Durum (disposition) rozeti */
.dispo-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 20px; font-size: 13px; font-weight: 650;
  color: var(--dc, #444); background: color-mix(in srgb, var(--dc) 14%, #fff); border: 1px solid color-mix(in srgb, var(--dc) 35%, transparent); }

/* Durum butonlari — kisi detayinda tek dokunusluk 2 sutun */
.dispo-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.dispo-title { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.dispo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dispo-btn { display: flex; align-items: center; gap: 10px; text-align: left; padding: 15px 16px; border-radius: 14px;
  border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text);
  transition: transform .06s, border-color .12s, background .12s; }
.dispo-btn .di { font-size: 22px; line-height: 1; }
.dispo-btn:hover { border-color: var(--dc); }
.dispo-btn:active { transform: scale(.97); }
.dispo-btn.on { background: var(--dc); border-color: var(--dc); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--dc) 40%, transparent); }

/* "Bugun" ekrani */
.today-hero { background: linear-gradient(135deg, var(--accent) 0%, #4c9dff 100%); color: #fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.today-hero-date { font-size: 15px; opacity: .92; text-transform: capitalize; margin-bottom: 6px; }
.today-hero-line { font-size: 22px; font-weight: 600; line-height: 1.3; }
.today-hero-line b { font-weight: 800; }
.today-section { margin-bottom: 22px; }
.today-h { font-size: 18px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.today-count { background: var(--accent-weak); color: var(--accent); border-radius: 20px; font-size: 15px; font-weight: 700; padding: 2px 12px; }
.today-item { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow); }
.today-item.is-overdue { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.today-item.done { opacity: .4; transition: opacity .4s; }
.today-main { min-width: 220px; flex: 1; }
.today-name { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.today-phone { display: inline-block; font-size: 18px; font-weight: 650; color: var(--accent); margin-bottom: 6px; }
.today-sub { font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.today-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.today-when { font-size: 14px; color: var(--danger); font-weight: 600; margin-top: 6px; }
.today-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Buyuk buton (Bugun ekrani + onemli aksiyonlar) */
.btn.big { padding: 14px 20px; font-size: 16.5px; font-weight: 650; border-radius: 13px; }

/* Etiket secici (tagPicker) */
.tp-body { display: flex; flex-direction: column; gap: 16px; max-height: 50vh; overflow-y: auto; }
.tp-group-t { font-size: 14px; font-weight: 650; color: var(--text-2); margin-bottom: 8px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.tp-chip { cursor: pointer; border: 2px solid transparent; font-size: 15px; padding: 8px 14px; transition: transform .06s; }
.tp-chip:active { transform: scale(.95); }
.tp-chip.on { outline: 2px solid var(--text); outline-offset: 1px; font-weight: 750; }
.tp-new { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Etiket yonetimi (tagManager) */
.tm-modal { max-width: 640px; }
.tm-new { display: flex; gap: 10px; margin-bottom: 16px; }
.tm-new input { flex: 1; }
.tm-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
.tm-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.tm-name-in { flex: 1; min-width: 120px; }
.tm-color { max-width: 120px; }
.tm-count { font-size: 13px; min-width: 62px; text-align: right; }
.tm-prev { min-width: 70px; justify-content: center; }

@media (max-width: 640px) {
  .dispo-grid { grid-template-columns: 1fr; }
  .today-actions { width: 100%; }
  .today-actions .btn { flex: 1; }
  .tm-row { flex-wrap: wrap; }
}

/* ===== Bugün açılış arama çubuğu (55+ için büyük, belirgin) ===== */
.today-search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 16px; box-shadow: var(--shadow); }
.today-search .ts-icon { font-size: 20px; flex: none; line-height: 1; }
.today-search input { flex: 1; border: none; background: transparent; font-size: 17px; font-family: var(--font); color: var(--text); outline: none; min-width: 0; padding: 9px 2px; }
.today-search input::placeholder { color: var(--text-2); }
.today-search .btn { flex: none; font-size: 16px; padding: 11px 20px; }
@media (max-width: 480px) { .today-search .btn { padding: 11px 14px; } }

/* ===== Arama kahramani: aramanin her ekranda ILK ve EN BELIRGIN oge olmasi =====
   55+ operatorler telefondan calisiyor; arama bir filtre kutusu degil, ana eylem.
   Kisiler ekraninda arama eskiden 3 dropdown arasina sikisiyordu (mobilde ~140px) — artik tek basina. */
.search-hero { border-width: 2px; border-color: var(--accent); }
.search-hero input { font-size: 18px; font-weight: 500; }
/* Temizle (✕): arama doluyken cikar, tek dokunusta sifirlar. */
.ts-clear { flex: none; border: none; background: var(--accent-weak); color: var(--text-2); cursor: pointer;
  font-size: 15px; line-height: 1; border-radius: 999px; width: 30px; height: 30px; font-family: var(--font); }
.ts-clear:hover { background: var(--border); color: var(--text); }
.ts-clear:active { transform: scale(.92); }
@media (max-width: 880px) {
  /* Arama ekranin tepesine yapisir: liste kaydirilirken bile bir dokunusla erisilir.
     top:0 DEGIL — topbar da yapiskan (z-index 10) ve top:0'da duruyordu; arama kutusu
     tam onun ALTINA girip goruntuden kayboluyordu (olculdu: 63px ortusme, yani %100).
     Topbar yuksekligi kadar asagi yapissin. */
  .search-hero {
    position: sticky; top: var(--topbar-h); z-index: 6;
    margin-bottom: 12px;
    background: var(--surface); /* altindan liste gecerken saydam kalmasin */
  }
  .search-hero input { font-size: 17px; }
  /* Kisi ekraninin filtreleri artik burada degil — "⚙️ Filtrele" sayfasinda (bkz. .flt-bar).
     Asagidaki kural DIGER ekranlarda (Kampanyalar, Loglar, Kim Ne Yapti) kalan .filters
     satirlari icin: mobilde her kontrol tam satir ve parmakla basilabilir olsun. */
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters select, .filters input { width: 100%; max-width: none; flex: none; font-size: 16px; min-height: 46px; }
  .filters .chk-inline { font-size: 16px; min-height: 46px; padding: 0 2px; }
  .filters .chk-inline input { width: 22px; height: 22px; }
  .filters .spacer { display: none; }
  /* Filtre sayfasindaki secimler de parmakla basilabilir olsun. */
  .modal .fld select { min-height: 46px; font-size: 16px; }
}

/* ===== Kim Ne Yaptı (denetim izi) ===== */
.au-feed { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.au-item { display: flex; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.au-item:last-child { border-bottom: none; }
.au-av { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.au-body { min-width: 0; flex: 1; }
.au-what { font-size: 15px; line-height: 1.45; word-break: break-word; }
.au-when { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
@media (max-width: 880px) { .au-what { font-size: 15.5px; } }

/* ===== Kişi detayı — Geri butonu (PWA'da tarayıcı geri yok) ===== */
.cd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px 0; flex-shrink: 0; }
.cd-topbar + .cd-head { padding-top: 8px; }
.cd-back { border: none; background: transparent; color: var(--accent); font-size: 17px; font-weight: 600; cursor: pointer; padding: 8px 12px 8px 6px; border-radius: 10px; font-family: var(--font); display: inline-flex; align-items: center; gap: 1px; min-height: 42px; }
.cd-back:hover { background: var(--accent-weak); }
.cd-back:active { transform: scale(.97); }

/* ===== Tekil WhatsApp mesaj penceresi ===== */
.wa-ico { flex: none; vertical-align: -3px; }
/* Baslikta ve gonder butonunda logo, metnin YANINDA dursun (ustune/altina degil). */
.wa-title { display: flex; align-items: center; gap: 8px; color: #128c7e; }
.wa-send-btn { gap: 7px; }
.wa-who { padding: 10px 12px; background: var(--success-weak); border: 1px solid #b6e6c9; border-radius: var(--radius-sm); margin-bottom: 14px; }
.wa-who-to { font-size: 12.5px; color: #1c7a44; font-weight: 600; margin-bottom: 3px; }
.wa-who-name { font-size: 16px; font-weight: 600; color: var(--text); }
/* Ic kaydirma YOK — tek kayan alan .wa-body. Eskiden burada da max-height+overflow
   vardi; mobilde parmak listeye gelince pencere kaydirmasi kilitleniyordu. */
.wa-presets { display: flex; flex-direction: column; gap: 8px; }
/* Hazir mesaj = tam genislikte dokunma hedefi. Kucuk "chip"ler 55+ kullanicida
   isabet sorunu yaratiyordu; kart seklinde basligi + onizlemesi birlikte duruyor. */
.wa-preset {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; font-family: var(--font); min-height: 44px;
}
.wa-preset:hover { background: var(--surface-2); }
.wa-preset.on { border-color: var(--success); background: var(--success-weak); }
.wa-preset-lbl { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.wa-preset-txt { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
/* 16px ALTINA DUSURMEYIN: iOS Safari, 16px'ten kucuk yazi kutusuna dokununca
   sayfayi otomatik buyutuyor ve kullanici geri sigdiramiyordu. */
#wa-text { font-family: var(--font); font-size: 16px; line-height: 1.5; min-height: 110px; }

/* WhatsApp penceresi: sabit baslik + tek kayan govde + sabit alt cubuk */
.modal.wa-modal { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; }
.wa-head { flex: none; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.wa-head h3 { margin: 0; }
.wa-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px 4px; }
/* Alt cubuk govdeden ayri: klavye acilinca "Gonder" ekranda kalir, aranmaz. */
.wa-foot {
  flex: none; display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--surface);
}
.wa-foot .btn { min-height: 46px; }
.wa-remind { margin-bottom: 4px; }

/* Hatirlatma cipleri (WhatsApp penceresi + kisi detayi ortak) */
.rm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 10px 15px; font-size: 15px; font-family: var(--font);
  cursor: pointer; min-height: 44px;
}
.rm-chip:hover { background: var(--surface-2); }
.rm-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fu-now { background: var(--accent-weak); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 15px; }
.fu-exact { margin-top: 12px; }
.fu-exact summary { cursor: pointer; font-size: 14px; color: var(--text-2); padding: 6px 0; }

@media (max-width: 480px) {
  /* Dar ekranda cerceve payi icerigi yiyordu (20px perde + 26px pencere = her iki
     yandan 92px). Once icerik, sonra bosluk. */
  .modal-back { padding: 10px; }
  .modal { padding: 18px; }
  .wa-head { padding: 14px 16px 10px; }
  .wa-body { padding: 14px 16px 4px; }
  /* Butonlar yan yana sigmiyordu; tam satir + birincil eylem ustte. */
  .wa-foot { flex-direction: column-reverse; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .wa-foot .btn { width: 100%; }
  .rm-chip { flex: 1 1 calc(50% - 4px); text-align: center; }
}

/* ===== Kampanya durum takibi ===== */
.cp-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 14px; }
.cp-tile { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; }
.cp-tile .k { font-size: 12px; color: var(--text-2); }
.cp-tile .v { font-size: 22px; font-weight: 650; margin-top: 3px; line-height: 1.1; }
.cp-bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cp-bar > span { display: block; height: 100%; background: var(--success); border-radius: 999px; transition: width .4s ease; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; color: var(--text-2); margin-top: 10px; }
.cp-next { margin-top: 12px; font-size: 14px; }
@media (max-width: 640px) {
  .cp-live { grid-template-columns: 1fr 1fr; }
  .cp-tile .v { font-size: 20px; }
}

/* Kampanya formu — bolum basliklari (form uzadi, gozle ayrilabilsin) */
.c-sect { font-size: 14px; font-weight: 650; margin: 0 0 10px; letter-spacing: -0.01em; }
.checks-sm { max-height: 148px; }

/* ===== Bu Hafta — 7 gunluk takip seridi ===== */
.wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wk-sum { font-size: 14px; color: var(--text-2); text-align: center; flex: 1; }
/* 7 gun HER ZAMAN tek satirda ve esit: yana kaydirma 55+ kullanicida keşfedilmiyor. */
.wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 14px; }
.wk-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 7px; min-height: 62px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--font);
}
.wk-day:hover { background: var(--surface-2); }
.wk-day.is-past { background: var(--surface-2); }
.wk-day.is-today { border-color: var(--accent); }
.wk-day.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 2px var(--accent-weak); }
.wk-dow { font-size: 11px; color: var(--text-2); font-weight: 600; }
.wk-num { font-size: 18px; font-weight: 650; color: var(--text); line-height: 1.1; }
.wk-day.is-today .wk-num { color: var(--accent); }
.wk-dots { display: flex; gap: 3px; min-height: 15px; align-items: center; }
.wk-pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 5px; line-height: 15px; }
.wk-pill.wait { background: var(--warning); color: #fff; }
.wk-pill.done { background: var(--success); color: #fff; }
.wk-daytitle { font-size: 17px; font-weight: 650; margin: 4px 0 10px; letter-spacing: -0.01em; }
/* Yapilmis isler geri planda dursun — dikkat bekleyenlerde kalsin. */
.today-item.is-done { opacity: .72; }
@media (max-width: 380px) {
  .wk-num { font-size: 16px; }
  .wk-day { min-height: 58px; }
}

/* ============================================================
   YENİ CRM BİLEŞENLERİ — kim işaretledi şeridi, oy tablosu,
   oy hakkı düzenleyici, kapanmış işyeri kartı, Raporlar ekip
   satırları ve rapor tabloları.
   55+ kullanıcı kuralı: dokunma hedefi >=44px, yazı >=14px,
   mobilde (max-width: 720px) tek sütun — tablolar hariç
   (onlar kendi kutusunda .tbl-scroll ile kayar, sayfa kaymaz).
   ============================================================ */

/* ---- Kişi kartı üstü: "kim işaretledi" bilgi şeridi ---- */
.kim-serit {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: 14px; line-height: 1.4; margin-bottom: 14px;
}

/* ---- Pano: oy tablosu — renkli nokta + etiket + kişi (soluk) + oy (renkli/kalın) ---- */
.oy-table { display: flex; flex-direction: column; }
.oy-row {
  display: grid; grid-template-columns: 10px 1fr auto auto;
  align-items: center; gap: 9px; padding: 8px 2px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.oy-row:last-child { border-bottom: none; }
.oy-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.oy-label { color: var(--text); font-weight: 500; }
.oy-kisi { font-size: 14px; text-align: right; white-space: nowrap; }
.oy-hak { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; min-width: 44px; }

/* ---- Oy işaretleme kutusu — .dispo-box varyantı, durum kutusundan ayırt edilsin ---- */
.vote-box {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

/* ---- Kompakt durum butonu (oy durumu + grup) — dokunma hedefi yine >=44px ---- */
.dispo-btn.sm {
  padding: 10px 12px; gap: 8px; font-size: 14px; min-height: 44px; border-radius: 12px;
}
.dispo-btn.sm .di { font-size: 17px; }
/* sm buton barındıran grid'de daha çok sütun sığsın; genişliğe göre kendiliğinden ayarlanır. */
.dispo-grid:has(.dispo-btn.sm) { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }

/* ---- Oy hakkı ayarlayıcı satırı ---- */
.oy-hak-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.oy-hak-row .lbl { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
#vr-input { width: 66px; text-align: center; font-size: 20px; font-weight: 700; padding: 9px 4px; }
#vr-minus, #vr-plus { min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; font-weight: 700; }

/* ---- Kapanmış işyeri kartı — soluk + sol gri şerit, okunabilirlik korunur ---- */
.c-card.kapali { opacity: .62; border-left: 3px solid var(--border-strong); padding-left: 7px; }
.c-card.kapali.on { opacity: .8; }

/* ---- Raporlar: kullanıcı performans satırları ---- */
.rep-list { display: flex; flex-direction: column; }
.rep-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.rep-row:last-child { border-bottom: none; }
.rep-main { flex: 1 1 200px; min-width: 0; }
.rep-name { font-size: 16px; font-weight: 700; color: var(--text); }
.rep-sub { font-size: 14px; margin-top: 2px; }
.rep-nums { display: flex; gap: 16px; flex-wrap: wrap; }
.rep-num { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.rep-num b { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.15; }
.rep-num span { display: block; font-size: 14px; color: var(--text-2); margin-top: 1px; white-space: nowrap; }
.rep-num.ok b { color: var(--success); }
.rep-num.warn b { color: var(--danger); }

.rep-sub-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 18px 0 10px; }
.rep-sub-title:first-child { margin-top: 0; }

/* ---- Rapor tabloları — SADECE tablo kayar (yatay), sayfa gövdesi asla kaymaz ---- */
.tbl-scroll {
  overflow-x: auto; overflow-y: auto; max-height: 62vh;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: right;
}
.tbl thead th:first-child { text-align: left; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:nth-child(even) { background: var(--surface-2); }

/* Yatay kaydirmada satirin KIM oldugu kaybolmasin: ilk kolon sabit kalir.
   Komite tablosu 11 kolon; 390px telefonda saga kaydirinca komite adi ekrandan
   cikiyor ve hangi satirin okundugu anlasilmiyordu. Zebra seridi ile bas satiri
   ayni arka plani almali, yoksa sabit hucre saydam gorunup altindaki rakamlarin
   ustune biniyor. */
.tbl thead th:first-child,
.tbl tbody td:first-child { position: sticky; left: 0; }
.tbl tbody td:first-child { z-index: 1; background: var(--surface); }
.tbl tbody tr:nth-child(even) td:first-child { background: var(--surface-2); }
.tbl thead th:first-child { z-index: 2; }
.tbl thead th:first-child::after,
.tbl tbody td:first-child::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: var(--border);
}
.tbl .tbl-name { text-align: left; font-weight: 700; color: var(--text); white-space: normal; }
.tbl .ok { color: var(--success); font-weight: 700; }
.tbl .bad { color: var(--danger); font-weight: 700; }
.tbl .num-on { font-weight: 700; color: var(--accent); }
.tbl .muted { color: var(--text-3); }

@media (max-width: 720px) {
  .rep-row { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Satır dikeye dönünce flex ana ekseni de dikey olur ve `flex-basis: 200px`
     genişlik değil YÜKSEKLİK dayatır — isim ile sayılar arasında kocaman bir
     boşluk açılıyordu. Dikey düzende taban ölçüsü içeriğe bırakılır. */
  .rep-main { flex: 0 0 auto; }
  /* Sayılar tek satırda eşit aralıklı dursun. (Grid denendi ve bırakıldı:
     auto-fit + 1fr, satır yüksekliğini sütun genişliğine bağlayıp her hücreyi
     ~126px'e şişiriyordu; flex içeriğe göre 45px'te kalıyor.) */
  .rep-nums { gap: 6px; justify-content: space-between; }
  .rep-num { min-width: 0; flex: 1 1 auto; }
  .rep-num span { font-size: 13px; }
  .rep-row > .btn { width: 100%; }
}

/* ================= TEKRAR TEMİZLİĞİ =================
   Kritik: bu bir "sil" ekranı değil. Karar verirken kullanıcının iki şeyi net
   görmesi gerekiyor — hangi kaydın kalacağı (radyo) ve neden eşleştikleri. */
.tab-rozet { background: var(--danger); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 12px; margin-left: 4px; }
.dup-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.dup-card { border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; background: var(--surface); }
.dup-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.dup-tur { font-weight: 700; color: var(--dc); font-size: 14px; }
.dup-firma-baslik { font-weight: 700; margin: 10px 0 4px; font-size: 15px; line-height: 1.35; }
.dup-oneri { font-size: 14px; margin-bottom: 4px; }
.dup-neden { font-size: 13px; margin-bottom: 10px; }
.dup-rows { display: flex; flex-direction: column; gap: 8px; }
/* Satırın tamamı tıklanabilir olsun — telefonda küçük radyo düğmesini
   yakalamak zor; 55+ kullanıcıda bu tek başına ekranı kullanılmaz kılıyor. */
.dup-row { display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; min-height: 56px; }
.dup-row:has(input:checked) { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dup-row input[type="radio"] { width: 22px; height: 22px; flex: none; }
.dup-main { flex: 1 1 auto; min-width: 0; }
.dup-name { font-weight: 600; font-size: 15px; }
.dup-sub, .dup-firma { font-size: 13px; line-height: 1.4; }
.dup-firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-acts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dup-acts .btn { flex: 1 1 auto; min-height: 44px; }
@media (max-width: 720px) {
  .dup-acts { flex-direction: column; }
  .dup-acts .btn { width: 100%; }
}

/* ---- "Kim görüştü?" seçimi (tek dokunuş panelinin üstü) ----
   Reşat telefonda görüşüp Nurdan'a söylüyor, girişi Nurdan yapıyor.
   Varsayılan "Ben" seçili; fazladan dokunuş istemesin diye en sık durum önde.
   Butonlar 44px yüksekliğinde — 55+ kullanıcı telefonda parmakla vuruyor. */
.goruslen-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.goruslen-lbl { font-size: 14px; font-weight: 700; color: var(--text-2); }
.goruslen-grid { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.goruslen-btn {
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.goruslen-btn.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (max-width: 720px) {
  .goruslen-box { flex-direction: column; align-items: stretch; }
  .goruslen-grid { width: 100%; }
  .goruslen-btn { flex: 1 1 auto; }
}

/* ---------- Numara Bekleyen Üyeler ----------
   Tablo degil KART listesi: bu ekrani 55+ kullanicilar telefondan kullaniyor ve
   her kayitta tek bir is yapiliyor — numarayi yazmak. Dokunma hedefleri 44px
   (Apple HIG asgarisi); giris alani mobilde tam genislik, masaustunde yan yana. */
.bek-sekmeler { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.bek-sekme {
  flex: 1 1 auto; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-2);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.bek-sekme b { font-weight: 700; margin-left: 2px; }
.bek-sekme.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.bek-filtre { display: flex; gap: 8px; margin-bottom: 10px; }
.bek-filtre input, .bek-filtre select { min-height: 44px; font-size: 15px; }
.bek-filtre input { flex: 1 1 60%; }
.bek-filtre select { flex: 1 1 40%; max-width: 260px; }

.bek-sayac { font-size: 12.5px; margin-bottom: 10px; }

.bek-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.bek-kart.cozuldu { background: var(--surface-2); }
.bek-ad { font-size: 16px; font-weight: 600; line-height: 1.3; }
.bek-alt { font-size: 14px; color: var(--text-2); margin-top: 3px; }
.bek-yer { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

/* Dosyadaki bozuk numara: gizlenmez — kullanicinin en iyi ipucu. Dokununca
   giris alanina tasinir, boylece elle yeniden yazmak gerekmez. */
.bek-ipucu { font-size: 12.5px; color: var(--text-3); margin-top: 8px; }
.bek-kullan {
  min-height: 32px; padding: 4px 10px; margin: 2px 0;
  border: 1px dashed var(--border-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.bek-kullan:hover { border-color: var(--accent); color: var(--accent); }

.bek-giris { display: flex; gap: 8px; margin-top: 12px; }
.bek-giris input { flex: 1; min-height: 46px; font-size: 16px; } /* 16px: iOS'ta odaklaninca sayfayi yakinlastirmaz */
.bek-giris .btn { min-height: 46px; padding: 0 20px; white-space: nowrap; }
.bek-yok { margin-top: 8px; min-height: 40px; color: var(--text-3); }
.bek-durum-satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 640px) {
  .bek-filtre { flex-direction: column; }
  .bek-filtre select { max-width: none; }
  .bek-sekme { flex: 1 1 100px; padding: 10px 8px; font-size: 13.5px; }
}