/* VipEmlak Yonetim — marka renkleri vipemlak.com'dan alindi (#00aeff / #004274) */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* Yuzeyler */
  --bg: #f2f5f8; --card: #ffffff; --surface-2: #f7f9fb; --surface-3: #eef2f6;
  --border: #e2e7ed; --border-2: #d7dde5;
  --text: #0f1b28; --muted: #67758a; --on-accent: #ffffff;
  --ink: #0b1622; --navy: #06304f; --navy-2: #004274;
  /* Aksanlar */
  --sky: #0090d6; --sky-bright: #00aeff; --sky-tint: #e6f6ff;
  --mint: #1fa15e; --mint-tint: #e7f8ef;
  --coral: #e0393e; --coral-tint: #fdecec;
  --amber: #c9760a; --amber-tint: #fdf3e3;
  --purple: #6d4fd6; --purple-tint: #f1edfc;
  /* --danger kendini isaret ediyordu (cozumlenemez) — coral ile esitlendi 2026-08-31 */
  --danger: var(--coral); --danger-tint: #fdecec;
  /* Ikon seridi (rail) */
  --rail-bg: linear-gradient(180deg, #0b1622 0%, #06304f 100%);
  --rail-text: #c7d3df; --rail-muted: #6f8399; --rail-active: rgba(0,174,255,.16);
  /* Golge, kose, tipografi - respond.io dili (2026-08-30) */
  --shadow-sm: 0 1px 2px rgba(15,27,40,.05); --shadow-md: 0 8px 24px rgba(15,27,40,.10);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius: var(--radius-md);
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;
  --font-display: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5;
  font-feature-settings: 'tnum' 1;
}
a { color: inherit; text-decoration: none; }
h1 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
h2 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Yerlesim */
.layout { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 12px 24px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.topsearch { flex: 1; max-width: 520px; position: relative; }
.topsearch .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.topsearch input {
  width: 100%; padding: 9px 14px 9px 36px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font-size: var(--fs-base);
}
.hamburger { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 4px; }
.content { padding: 24px; max-width: 1500px; width: 100%; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin-top: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.back-link .icon { width: 14px; height: 14px; }
.back-link:hover { color: var(--sky); }

/* Kartlar ve istatistikler */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-body { padding: 18px; }
.mt { margin-top: 18px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: block; position: relative; box-shadow: var(--shadow-sm);
  transition: border-color .12s, transform .12s;
}
a.stat-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-icon {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--sky-tint); color: var(--sky); flex-shrink: 0;
}
.stat-icon.i-red { background: var(--coral-tint); color: var(--coral); }
.stat-icon.i-green { background: var(--mint-tint); color: var(--mint); }
.stat-icon.i-amber { background: var(--amber-tint); color: var(--amber); }
.stat-icon.i-blue { background: var(--sky-tint); color: var(--sky); }
.stat-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.stat-sub { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.text-red { color: var(--coral); } .text-green { color: var(--mint); }
.text-blue { color: var(--sky); } .text-amber { color: var(--amber); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* Grafikler — gercek veriden hesaplanan cubuk grafik (dataviz skill kurallarina gore) */
.chart-card .card-body { padding: 18px 20px 14px; }
.chart-legend { display: flex; gap: 18px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; display: inline-block; border-radius: var(--radius-sm); }
.chart-legend .i-completed { background: var(--sky); }
.chart-legend .i-missed { background: var(--coral); }

.chart-plot {
  display: flex; align-items: flex-end; gap: 10px; height: 128px;
  border-bottom: 1px solid var(--border); padding-top: 8px; position: relative;
}
.chart-col {
  flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; min-width: 0; cursor: default; position: relative;
}
.chart-col-bar { width: 100%; max-width: 22px; display: flex; flex-direction: column; }
.chart-seg { width: 100%; }
.chart-seg.missed { background: var(--coral); border-radius: 3px 3px 0 0; }
.chart-seg.completed { background: var(--sky); }
.chart-seg.completed.is-top { border-radius: 3px 3px 0 0; }
.chart-seg.gap { height: 2px; background: var(--card); }
.chart-col-empty { width: 100%; max-width: 22px; height: 2px; background: var(--border-2); }
.chart-col:hover .chart-seg.missed,
.chart-col:hover .chart-seg.completed { filter: saturate(1.15) brightness(1.06); }
.chart-col:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.chart-axis { display: flex; gap: 10px; margin-top: 6px; }
.chart-axis-label { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); font-weight: 600; min-width: 0; }

.chart-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--on-accent); padding: 8px 11px; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: 0 8px 20px rgba(6,12,20,.25); pointer-events: none; z-index: 30;
  opacity: 0; visibility: hidden; transition: opacity .1s;
}
.chart-col:hover .chart-tooltip, .chart-col:focus-visible .chart-tooltip { opacity: 1; visibility: visible; }
.chart-tooltip strong { font-family: var(--font-display); font-weight: 700; }
.chart-tooltip .tt-date { display: block; color: var(--rail-text); font-weight: 600; margin-bottom: 4px; font-size: var(--fs-xs); }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.chart-tooltip .tt-row + .tt-row { margin-top: 2px; }
.chart-tooltip .tt-key { width: 7px; height: 7px; display: inline-block; flex-shrink: 0; }
.chart-tooltip .tt-key.completed { background: var(--sky-bright); }
.chart-tooltip .tt-key.missed { background: var(--coral); }

.chart-table-toggle { margin-top: 12px; }
.chart-table-toggle summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--sky); list-style: none; }
.chart-table-toggle summary::-webkit-details-marker { display: none; }
.chart-table-toggle table { margin-top: 10px; }
.chart-table-toggle th, .chart-table-toggle td { padding: 6px 10px; font-size: var(--fs-sm); }

/* Filtre cubugu */
.filterbar {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px;
}
.filter-item { display: flex; flex-direction: column; gap: 5px; }
.filter-item.grow { flex: 1; min-width: 200px; }
.filter-item label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.filter-actions { display: flex; gap: 8px; }

input, select, textarea {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-family: inherit; background: var(--card); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-tint); }
form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin: 12px 0 5px; }
form label:first-child { margin-top: 0; }
.card-body form input, .card-body form select, .card-body form textarea,
.login-card input, .modal input, .modal select, .modal textarea { width: 100%; }

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; background: none; font-family: inherit; white-space: nowrap;
  transition: transform .1s, background .12s, border-color .12s, box-shadow .12s; line-height: 1.1;
}
.btn .icon { width: 15px; height: 15px; }
.btn-primary { background: var(--sky); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0,144,214,.25); }
.btn-primary:hover { background: color-mix(in srgb, var(--sky) 85%, black); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,144,214,.3); }
.btn-dark { background: var(--ink); color: var(--on-accent); }
.btn-dark:hover { background: var(--navy); transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); background: var(--card); color: var(--text); }
.btn-ghost:hover { background: var(--bg); border-color: var(--border-2); }
.btn-danger { background: var(--coral-tint); color: var(--coral); border-color: color-mix(in srgb, var(--coral) 35%, var(--card)); }
.btn-danger:hover { background: var(--coral-tint); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); }
.btn-sm .icon { width: 13px; height: 13px; }
.icon.wa-color { color: #25D366; }
.btn-block { width: 100%; justify-content: center; margin-top: 16px; }
.form-actions { margin-top: 14px; }

/* Tablo */
.table-wrap { overflow-x: visible; }   /* HIC yatay kaydirma yok — tablo sutunlari sarar (kullanici kurali 2026-08-27) */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 11px 14px; font-size: var(--fs-xs); letter-spacing: .05em;
  color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface-2); text-transform: uppercase;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:hover { background: var(--surface-2); }
/* Satirin bosluguna tiklayinca detay acilir (kullanici istegi 2026-08-27) */
.satir-link { cursor: pointer; }
.satir-link:hover { background: var(--sky-tint) !important; }
.strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; padding: 28px !important; }

/* Rozetler — dolu hap yerine sol seritli cip (daha rafine, veri-tablosu dostu) */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 8px;
  border-left: 2.5px solid currentColor; background: var(--surface-3);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; color: var(--muted);
}
.badge-dir-gelen { background: var(--mint-tint); color: var(--mint); }
.badge-dir-giden { background: var(--sky-tint); color: var(--sky); }
.badge-dir-bilinmiyor { background: var(--surface-3); color: var(--muted); }
.badge-st-tamamlandi { background: var(--mint-tint); color: var(--mint); }
.badge-st-cevapsiz { background: var(--coral-tint); color: var(--coral); }
.badge-st-caliyor { background: var(--sky-tint); color: var(--sky); }
.badge-st-mesgul { background: var(--amber-tint); color: var(--amber); }
.badge-st-bilinmiyor { background: var(--surface-3); color: var(--muted); }
.badge-blue { background: var(--sky-tint); color: var(--sky); }
.badge-purple { background: var(--purple-tint); color: var(--purple); }
.badge-gray { background: var(--surface-3); color: var(--muted); }
.badge-green { background: var(--mint-tint); color: var(--mint); }
.badge-red { background: var(--coral-tint); color: var(--coral); }
.badge-amber { background: var(--amber-tint); color: var(--amber); }

/* Segment cubugu (leads durum filtresi) */
.seg-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.seg {
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card); font-weight: 600; font-size: var(--fs-base); transition: border-color .12s;
}
.seg:hover { border-color: var(--border-2); }
.seg b { font-weight: 800; margin-left: 5px; }
.seg.active { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.seg.active b { color: var(--sky-bright); }

/* Hal sekmelerindeki sayi rozeti (Herşey 128 / Açık 12 ...) */
.seg-say {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: var(--fs-xs); font-weight: 700; border-radius: var(--radius-sm);
  background: var(--sky-tint); color: var(--sky);
}
.seg.active .seg-say { background: rgba(255,255,255,.18); color: var(--on-accent); }

/*
 * Okunmamis cagri satiri.
 * Ayrim RENGE DEGIL once kalinliga ve sol seride dayaniyor — renk korlugu ve
 * koyu/acik tema farkinda da ayirt edilebilsin diye.
 */
.satir-okunmamis > td { font-weight: 600; }
.satir-okunmamis > td:first-child { box-shadow: inset 3px 0 0 var(--sky-bright); }
.satir-okunmamis { background: rgba(0,174,255,.045); }
tr.hal-kapali > td { opacity: .72; }

.inline-select { padding: 4px 8px; font-size: var(--fs-sm); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-actions form { display: inline; }

/* Dropdown (Hizli Islemler) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(15,27,40,.12); min-width: 216px; padding: 6px;
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px;
  border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 500; border: none;
  background: none; cursor: pointer; font-family: inherit; color: var(--text);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg); }
.dropdown-menu form { margin: 0; }
.dropdown-menu .icon { color: var(--muted); }

/* Sutun secici */
.col-picker { position: relative; }
.col-picker-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(15,27,40,.12); min-width: 180px; padding: 10px 12px;
}
.col-picker-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-base); font-weight: 500; margin: 0; cursor: pointer; }
.col-picker-menu input { width: auto; }

/* Sayfalama */
.pager { display: flex; gap: 6px; padding: 14px 18px; flex-wrap: wrap; }
.pager-item {
  min-width: 32px; text-align: center; padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-base);
}
.pager-item.active { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.pager-item .icon { width: 13px; height: 13px; }
.pager-ellipsis { border-color: transparent; color: var(--muted); cursor: default; }

/* Sidebar okunmamis bildirim rozeti */
.nav-badge {
  margin-left: auto; background: var(--coral); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; min-width: 20px;
  text-align: center; line-height: 1.6;
}

/* Okunmamis bildirim satiri */
.row-unread { background: var(--sky-tint); }

/* Cagri detayi — not defteri */
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-item { border: 1px solid var(--border); padding: 10px 12px; background: var(--bg); }
.note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.note-head form { margin-left: auto; }
.note-item p { margin: 0; font-size: var(--fs-base); white-space: pre-wrap; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input { max-width: 260px; }

/* Hazir mesaj listesi */
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-list .btn { justify-content: flex-start; }

/* Satis hunisi (madde 20) — kutuphanesiz, mevcut grafik yaklasimiyla ayni */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 180px 1fr 70px; align-items: center; gap: 12px; }
.funnel-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); }
.funnel-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--ink); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0;
}
.funnel-bar-wrap { position: relative; background: var(--bg); border: 1px solid var(--border); height: 34px; display: flex; align-items: center; }
.funnel-bar { height: 100%; background: linear-gradient(90deg, var(--navy-2), var(--sky)); }
.funnel-count { position: absolute; left: 10px; color: var(--on-accent); font-weight: 700; font-size: var(--fs-base); text-shadow: 0 0 3px rgba(0,0,0,.45); }
.funnel-conv { text-align: right; }

@media (max-width: 720px) {
  .funnel-row { grid-template-columns: 1fr; gap: 4px; }
  .funnel-conv { text-align: left; }
}

/* Flash mesajlar */
.flash { padding: 12px 18px; border-radius: var(--radius-sm); margin: 16px 24px 0; font-weight: 500; border-left: 3px solid currentColor; }
.content .flash, .login-card .flash { margin: 0 0 16px; }
.flash-ok { background: var(--mint-tint); color: var(--mint); }
.flash-error { background: var(--coral-tint); color: var(--danger); }
.flash-warn { background: var(--amber-tint); color: var(--amber); }
.flash a { text-decoration: underline; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,12,20,.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--card); border-radius: var(--radius-sm); padding: 22px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(6,12,20,.3);
}
.modal h2 { font-size: var(--fs-lg); margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .span2 { grid-column: span 2; }
/* ⚠️ ALAN GENİŞLİĞİ BURADA VERİLİYOR — `.card-body form input` (:158) DEĞİL.
   O seçici formun kartın İÇİNDE olmasını şart koşuyor. Master'ın ayar ve
   paket sayfalarında <form> kartları SARIYOR (tek kaydet düğmesi birden çok
   kartı göndersin diye), dolayısıyla seçici hiç tutmuyordu: alanlar tarayıcı
   varsayılanı ~170px'te kalıp ızgarada rastgele genişlikte duruyordu.
   Sayfanın "dağınık/amatör" görünmesinin ASIL sebebi buydu (2026-09-11). */
.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select, .form-grid textarea { width: 100%; }

/* Giris */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, var(--ink) 0%, var(--navy) 55%, var(--navy-2) 100%); }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 36px 32px; width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Mobil */
@media (max-width: 900px) {

  .hamburger { display: block; }
  .two-col, .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .content { padding: 14px; }
}

/* ---------------------------------------------------------------------------
   Cagri detayi — "Başka Danışmana Gönder" karti
   --------------------------------------------------------------------------- */

/* Paylasim metni: hizalama korunsun diye tek genislikli yazi tipi.
   Uzun satirlar KIRILIR — mobilde yatay kaydirma olusmamali. */
textarea.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  resize: vertical;
  min-height: 180px;
}

/* Onay kutusu + etiket ayni satirda. `form label` kurali display:block
   verdigi icin burada flex ile geri aliyoruz. */
.check-inline {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  cursor: pointer;
}
.check-inline input[type="checkbox"] {
  width: auto !important;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  /* Dar ekranda dugmeler tam genislige yayilsin, sikismasin */
  .card-body .row-actions .btn { flex: 1 1 auto; justify-content: center; }
  textarea.mono { font-size: var(--fs-xs); min-height: 220px; }
}

/* Secenek karti — radyo dugmesi + aciklama. Dokunmatikte kolay hedeflensin
   diye tum kart tiklanabilir (label sarmalayici). Kose yok (--radius: 0). */
.radio-card {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 8px 0 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 400 !important;
  transition: border-color .15s, background .15s;
}
.radio-card:hover { border-color: var(--sky); }
.radio-card:has(input:checked) { border-color: var(--sky); background: var(--sky-tint); }
.radio-card input[type="radio"] {
  width: auto !important;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.radio-card > span { display: flex; flex-direction: column; gap: 3px; }
.radio-card strong { font-size: var(--fs-base); font-weight: 600; }

/* Gorusme sonucu secicisi — secili sonucun rengi kenarda gorunur.
   Renk tek basina isaret degil; yanindaki rozet metni de duruyor. */
.outcome-select { border-left-width: 4px; }
.outcome-select.outcome-none   { border-left-color: var(--border); }
.outcome-select.outcome-gray   { border-left-color: var(--muted); }
.outcome-select.outcome-blue   { border-left-color: var(--sky); }
.outcome-select.outcome-amber  { border-left-color: var(--amber); }
.outcome-select.outcome-green  { border-left-color: var(--mint); }
.outcome-select.outcome-red    { border-left-color: var(--danger); }

/* =====================================================================
   MUHASEBE (2026-08-27)
   ===================================================================== */
.fin-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-tabs a { padding: 7px 12px; border: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.fin-tabs a.active { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
/* Kapsam anahtari: Kisisel | Ortak — hangi deftere yazdiginiz HER SAYFADA gorunur */
.fin-scope { display: inline-flex; border: 1px solid var(--border); background: var(--card); }
.fin-scope button { padding: 7px 14px; border: 0; background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); cursor: pointer; }
.fin-scope button.active { background: var(--sky); color: var(--on-accent); }
.fin-scope button.active.ortak { background: var(--purple); }

.fin-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-period .seg { padding: 6px 12px; }
.fin-period-nav { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--card); }
.fin-period-nav a, .fin-period-nav span { padding: 6px 12px; font-size: var(--fs-base); font-weight: 700; }
.fin-period-nav a { color: var(--muted); border-right: 1px solid var(--border); }
.fin-period-nav a:last-child { border-right: 0; border-left: 1px solid var(--border); }
.fin-period-nav a:hover { color: var(--text); background: var(--bg); }

.fin-amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fin-gelir { color: var(--mint); }
.fin-gider { color: var(--danger); }
.fin-net-pos { color: var(--mint); }
.fin-net-neg { color: var(--danger); }
.stat-value.fin-amount { font-size: var(--fs-xl); }

/* Grafik — dashboard'daki cubuk deseninin gelir/gider hali */
.chart-seg.fin-g { background: var(--mint); }
.chart-seg.fin-x { background: var(--danger); }
.chart-legend .i-fin-g { background: var(--mint); }
.chart-legend .i-fin-x { background: var(--danger); }
.chart-col .fin-tip {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--on-accent); font-size: var(--fs-xs); padding: 6px 8px; white-space: nowrap; z-index: 5; line-height: 1.5;
}
.chart-col:hover .fin-tip, .chart-col:focus-visible .fin-tip { display: block; }

/* Kategori dagilimi — yatay cubuklar */
.fin-cat { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.fin-cat:last-child { border-bottom: 0; }
.fin-cat i { width: 12px; height: 12px; display: block; }
.fin-cat .bar { height: 6px; background: var(--bg); margin-top: 5px; }
.fin-cat .bar b { display: block; height: 100%; }
.fin-cat .name { font-size: var(--fs-base); font-weight: 600; }

/* Kayit formu */
.fin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fin-form-grid .full { grid-column: 1 / -1; }
.fin-type-switch { display: flex; border: 1px solid var(--border); }
.fin-type-switch label { flex: 1; text-align: center; padding: 9px; font-weight: 700; font-size: var(--fs-base); cursor: pointer; color: var(--muted); }
.fin-type-switch input { display: none; }
.fin-type-switch input:checked + label.gelir { background: var(--mint); color: var(--on-accent); }
.fin-type-switch input:checked + label.gider { background: var(--danger); color: var(--on-accent); }

/* Yapay zeka kutusu */
.fin-ai { border: 1px dashed var(--sky); background: var(--sky-tint); padding: 14px 16px; margin-bottom: 16px; }
.fin-ai textarea { width: 100%; min-height: 64px; border: 1px solid var(--border); padding: 10px; font: inherit; font-size: var(--fs-base); resize: vertical; }
.fin-ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fin-ai-mic.dinliyor { background: var(--coral); color: var(--on-accent); border-color: var(--coral); animation: fin-pulse 1s infinite; }
@keyframes fin-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.fin-ai-oneri { background: var(--card); border: 1px solid var(--border); margin-top: 12px; }
.fin-ai-oneri table { width: 100%; }
.fin-ai-oneri input, .fin-ai-oneri select { width: 100%; padding: 5px 7px; font-size: var(--fs-sm); border: 1px solid var(--border); }
.fin-ai-oneri .yeni { color: var(--purple); font-size: var(--fs-xs); font-weight: 700; }

.fin-row-ai { box-shadow: inset 3px 0 0 var(--sky); }
.fin-row-rec { box-shadow: inset 3px 0 0 var(--purple); }
.fin-kaynak { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.fin-debt-bar { height: 6px; background: var(--bg); margin-top: 6px; }
.fin-debt-bar b { display: block; height: 100%; background: var(--sky); }
.fin-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.fin-empty strong { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: 6px; }
@media (max-width: 720px) { .fin-bar { flex-direction: column; align-items: stretch; } .fin-tabs { flex-wrap: wrap; } .fin-tabs a { flex: 1 1 auto; text-align: center; } }
/* Muhasebe form alanlari */
.label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: .3px; text-transform: uppercase; margin-bottom: 5px; }
.input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base); background: var(--card); color: var(--text); }
.input:focus { outline: none; border-color: var(--sky); }

/* =====================================================================
   CAGRI DETAYI — yeniden duzenleme (2026-08-27)
   ===================================================================== */
.cd-hero { padding: 20px 22px; margin-bottom: 18px; border-left: 4px solid var(--sky); }
.cd-hero-missed { border-left-color: var(--coral); }
.cd-hero-main { display: flex; gap: 16px; align-items: flex-start; }
.cd-avatar { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; background: var(--sky-tint); color: var(--sky); }
.cd-avatar .icon { width: 24px; height: 24px; }
.cd-avatar.out { background: var(--mint-tint); color: var(--mint); }
.cd-number { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; word-break: break-all; }
.cd-name { margin-top: 4px; font-size: var(--fs-base); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cd-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.cd-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.cd-meta dd { margin: 3px 0 0; font-size: var(--fs-base); font-weight: 600; }
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cd-actions form { display: inline; }
.cd-audio { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cd-audio audio { flex: 1; min-width: 0; height: 40px; }
.cd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cd-grid2 label, .cd-note-form label { margin-top: 0; }
.cd-callout { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--amber-tint); color: var(--amber); margin-bottom: 12px; font-size: var(--fs-base); }
.cd-callout > div { flex: 1; }
.cd-callout form { margin: 0; }
.cd-when { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cd-when input[type="datetime-local"] { width: auto; flex: 1 1 180px; }
.cd-note-form textarea { margin-bottom: 8px; }
.cd-note-bar { display: flex; gap: 8px; align-items: center; }
.cd-note-bar select { flex: 1; }
.cd-summary { font-size: var(--fs-md); line-height: 1.6; }
.cd-transcript { white-space: pre-wrap; max-height: 320px; overflow-y: auto; background: var(--bg); padding: 10px 12px; }
.cd-details summary { cursor: pointer; color: var(--sky); font-weight: 600; font-size: var(--fs-base); }
.cd-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cd-empty { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: var(--fs-base); padding: 8px 0; }
.cd-fold summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; cursor: pointer; }
.cd-fold summary::-webkit-details-marker { display: none; }
.cd-fold summary h2 { margin: 0; }
.cd-fold summary::after { content: "+"; font-weight: 800; color: var(--muted); margin-left: auto; }
.cd-fold[open] summary::after { content: "−"; }
.cd-fold[open] summary { border-bottom: 1px solid var(--border); }
.cd-mail-row { display: flex; gap: 8px; }
.cd-mail-row input { flex: 1; }
.cd-sticky { display: none; }
@media (max-width: 900px) {
  .cd-number { font-size: var(--fs-xl); }
  .cd-grid2 { grid-template-columns: 1fr; }
  .cd-actions { display: none; }             /* yerine alt yapisik cubuk */
  .cd-sticky { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15,27,40,.08); }
  .cd-sticky .btn, .cd-sticky form { flex: 1; }
  .cd-sticky form .btn { width: 100%; }
  .content { padding-bottom: 84px; }          /* cubuk icerigi ortmesin */
}

/* =====================================================================
   MOBIL — tum panel (2026-08-27): "kaydirma istemiyorum"
   Yatay kaydirma KAYNAKLARI: tablolar, uzun metinler, sabit genislikler.
   Tablolar 720px altinda KART olur (app.js basliklari data-label'a yazar).
   ===================================================================== */
/* overflow-x: hidden position:sticky'yi BOZUYOR (sol menu asagi inince kisa kaldi, 2026-08-27).
   clip ayni korumayi verir, sticky'yi bozmaz. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, audio, canvas { max-width: 100%; }
/* Kelime kirma YALNIZCA mobilde: masaustunde tabloya uygulaninca tarih ve
   numaralar harf harf bolunuyordu (2026-08-27'de ekran goruntusunde gorulen kaos). */
.nowrap { white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--sky); cursor: pointer; text-decoration: underline; }
.cell-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cell-person .badge { vertical-align: middle; }
.cell-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td { vertical-align: middle; }
.table th { white-space: normal; }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cell-actions .row-actions { margin: 0; }
@media (max-width: 720px) {
  .card, .stat-card, .note-item p, .fin-cat .name { overflow-wrap: anywhere; }
  .cell-note { white-space: normal; max-width: none; }
  .content { padding: 12px; }
  .page-head h1 { font-size: var(--fs-xl); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-value { font-size: var(--fs-xl); }
  .stat-value.fin-amount { font-size: var(--fs-lg); }
  .seg-bar { gap: 6px; }
  .seg { padding: 7px 11px; font-size: var(--fs-sm); }
  .row-actions .btn { flex: 1 1 auto; justify-content: center; }
  .inline-form select, .inline-form input { max-width: none; width: 100%; }
  .chart-plot { gap: 3px; }
  .chart-axis { gap: 3px; }
  .chart-axis-label { font-size: 9px; }
  .fin-period { gap: 6px; }
  .fin-period > div:last-child { margin-left: 0 !important; width: 100%; }

  /* Tablolar -> kartlar. thead gizlenir, her td "Baslik: deger" satiri olur. */
  .table-wrap { overflow-x: visible; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { border: 1px solid var(--border); background: var(--card); margin-bottom: 10px; padding: 6px 0; }
  .table tr.satir-okunmamis { box-shadow: inset 3px 0 0 var(--sky-bright); }
  .table td { display: flex; gap: 10px; align-items: flex-start; padding: 6px 12px; border-bottom: 0; text-align: left !important; }
  .table td::before { content: attr(data-label); flex: 0 0 34%; max-width: 120px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
  .table td[data-label=""]::before, .table td:not([data-label])::before { display: none; }
  .table td > * { min-width: 0; }
  .table td .row-actions { flex: 1; justify-content: flex-start; }
  .table td .row-actions .btn { flex: 0 0 auto; }
  .table td[colspan] { display: block; }
  .table td[colspan]::before { display: none; }
  .satir-okunmamis > td:first-child { box-shadow: none; }
}
@media (max-width: 720px) {
  /* Telefon numarasi/tarih gibi kisa guclu metinler ortadan bolunmesin */
  .table td .strong, .table td .fin-amount { overflow-wrap: normal; white-space: nowrap; }
  .table td[data-label=""] { display: none; }
  .table td .small.nowrap { white-space: normal; overflow-wrap: anywhere; } /* uzun santral kuyruk adi tasmasin */
  .table td .cell-actions { flex: 1; }
  .table td .cell-actions .row-actions .btn { flex: 0 0 auto; }
}
.cell-actions > * { flex: 0 0 auto; }   /* dugme grubu, acilir menu yuzunden ezilip dikey yigilmasin */

/* =====================================================================
   DUZEN SISTEMI (2026-08-27) — tum sayfalarda ayni kurallar
   ===================================================================== */
/* Kart izgaralari: sabit sutun sayisi, yetim kart yok */
.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stat-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stat-grid-3, .stat-grid-4, .stat-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Filtre paneli: masaustunde acik, mobilde kapali gelir (app.js) */
.filters { margin-bottom: 16px; }
.filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); background: var(--card); font-weight: 700; font-size: var(--fs-base); cursor: pointer; user-select: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "▾"; color: var(--muted); }
.filters[open] > summary { border-bottom-color: transparent; }
.filters[open] > summary::after { content: "▴"; }
.filters > .filterbar, .filters > form { margin-top: -1px; }
.filters .filterbar { margin-bottom: 0; }

/* Sekme cubugundaki ayrac ve ozel liste sekmeleri */
.seg-ayrac { width: 1px; background: var(--border-2); margin: 4px 4px; }
.seg-ozel { display: inline-flex; align-items: center; gap: 6px; }
.seg-ozel .icon { width: 14px; height: 14px; }

/* Sayfalama */
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 12px 14px; border-top: 1px solid var(--border); }
.pager .seg { padding: 6px 11px; }

/* Uzun sayfalar icin sekmeler (Ayarlar) */
.page-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.page-tabs button { padding: 9px 16px; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer; color: var(--text); }
.page-tabs button.active { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
[data-tab-hidden] { display: none !important; }

/* Performans tablosu: ilk sutun sabit + isimler kirilmasin */
.table-perf td:first-child { white-space: nowrap; font-weight: 700; }
.table-perf th, .table-perf td { padding-left: 8px; padding-right: 8px; font-size: var(--fs-sm); }

@media (max-width: 720px) {
  /* Mobilde onemsiz sutunlar gizlenir (th/td .m-hide) */
  .m-hide { display: none !important; }
  .page-tabs { flex-wrap: wrap; }              /* serit ici kaydirma YOK — alt satira sarar */
  .page-tabs button { flex: 1 1 auto; }
}

@media (max-width: 720px) {
  /* Yogun eksen (31 gun): mobilde yalnizca her 5. gun etiketi kalsin */
  .chart-axis-dense .chart-axis-label { visibility: hidden; }
  .chart-axis-dense .chart-axis-label:nth-child(5n+1) { visibility: visible; }
  .chart-axis-dense .chart-axis-label { font-size: 8.5px; }
  /* 5'li kart izgarasi mobilde 3 sutun — yetim kart kalmasin (5 = 3 + 2 yerine 2+2+1'den iyi degil; 3 sutun daha dengeli) */
  .stat-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat-grid-5 .stat-card { padding: 12px 10px; }
  .stat-grid-5 .stat-value, .stat-grid-5 .stat-value.fin-amount { font-size: var(--fs-md); }
  .stat-grid-5 .stat-label { font-size: 9.5px; }
  .stat-grid-5 .stat-icon { display: none; }
}

/* =====================================================================
   SIMETRI KURALLARI (2026-08-27): dugme gruplari esit bolunur, hicbir
   serit/tablo yatay kaydirmaz.
   ===================================================================== */
.btn { justify-content: center; }
.row-actions { align-items: stretch; }
.row-actions form { display: contents; }         /* form sarmali dugme, dizilimi bozmasin */
.page-head .row-actions { align-items: center; }
.table { table-layout: auto; width: 100%; }
/* Masaustunde kelime/numara BOLUNMEZ (break-word: yalnizca sigmayan tek kelime kirilir);
   mobilde kart gorunumunde 'anywhere' gerekir — o kural 720px blogunda. */
.table td, .table th { overflow-wrap: break-word; }
.table td .nowrap, .table td .strong, .table td .fin-amount { white-space: nowrap; overflow-wrap: normal; }
/* NOT: '* { min-width:0 }' denendi ve GERI ALINDI — tablo hucrelerini icerikten dar
   yapip numaralari kirdi (2026-08-27). min-width yalnizca flex/grid kutulara verilir. */
.row-actions > *, .cell-actions > *, .fin-form-grid > *, .cd-grid2 > *, .filter-item, .page-head > * { min-width: 0; }
img, svg, video { max-width: 100%; }

@media (max-width: 720px) {
  /* Baslik altindaki islem dugmeleri: 2 sutunlu esit izgara, tek kalan tam genislik */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-head .row-actions > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-head .row-actions .btn { width: 100%; }
  /* Sekme/segment seritleri: esit genislikte sarar */
  .seg-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .seg-bar .seg { text-align: center; padding: 9px 8px; }
  .seg-bar .seg-ayrac { display: none; }
  .seg-bar .seg-ozel { justify-content: center; }
  /* Filtre alanlari: 2 sutun, islem dugmeleri tam satir ve esit */
  .filterbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter-item { width: auto !important; min-width: 0 !important; }
  .filter-item.grow, .filter-actions { grid-column: 1 / -1; }
  .filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filter-actions .btn { width: 100%; }
  /* Genel dugme gruplari (kart ici): esit bolunmus */
  .row-actions:not(.page-head .row-actions) { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .row-actions .btn { width: 100%; }
  .table td .row-actions, .table td .cell-actions { display: flex; flex-wrap: wrap; }
  .table td .row-actions .btn { width: auto; }
  /* Muhasebe donem satiri */
  .fin-period { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fin-period > * { grid-column: 1 / -1; }
  .fin-period .seg-bar { grid-template-columns: repeat(4, 1fr); }
  .fin-period-nav { justify-content: space-between; }
  .fin-period-nav span { flex: 1; text-align: center; }
  .fin-period .row-actions { grid-template-columns: 1fr 1fr 1fr; }
  .fin-ai-row { display: grid; grid-template-columns: 1fr 1fr; }
  .fin-ai-row > span { grid-column: 1 / -1; }
  .cd-when { display: grid; grid-template-columns: 1fr 1fr; }
  .cd-when input[type="datetime-local"] { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Tablo karti icindeki islem grubu: ikonlar esit 3 sutun, acilir menu tam satir */
  .table td .cell-actions { display: grid; grid-template-columns: 1fr; gap: 6px; flex: 1; }
  .table td .cell-actions .row-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .table td .cell-actions .row-actions .btn { width: 100%; }
  .table td .cell-actions .dropdown { width: 100%; }
  .table td .cell-actions .dropdown > .btn { width: 100%; }
  /* Cagrilar: "Calan" karti gizlenince 4 kart = 2x2 */
  .stat-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid-5 .stat-value, .stat-grid-5 .stat-value.fin-amount { font-size: var(--fs-lg); }
  .stat-grid-5 .stat-icon { display: flex; }
}
@media (max-width: 720px) {
  /* 5 kartli izgarada gizli kart yoksa (Muhasebe) sonuncu tam satir: 2+2+1 */
  .stat-grid-5:not(:has(.m-hide)) > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .fin-tabs a { flex: 1 1 30%; }                                     /* 6 sekme = 3 + 3 */
  .fin-period .row-actions.row-actions { grid-template-columns: repeat(3, 1fr); }  /* Excel | PDF | Yeni Kayit */
  .chart-axis-dense .chart-axis-label { white-space: nowrap; overflow: visible; font-size: 8px; }
}

@media (max-width: 720px) { .table td, .table th { overflow-wrap: anywhere; } }

/* =====================================================================
   BASLIKLAR (2026-08-27): kart basliklari belirgin — marka mavisi, sol vurgu
   ===================================================================== */
.card h2, .card-head h2, .card-body > h2 {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: -.005em;
  color: var(--sky); padding-left: 10px; border-left: 3px solid var(--sky); line-height: 1.2; margin-bottom: 12px;
}
.card-head h2 { margin-bottom: 0; }
.cd-fold summary h2 { margin-bottom: 0; }
.page-head h1 { color: var(--text); }
.page-head h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--sky); margin-top: 8px; }
h2 .muted, h2 .small { color: var(--muted); font-weight: 500; }
/* Mobil menu arka perdesi: menu acikken sayfa kararir, perdeye dokununca kapanir */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(6,12,20,.45); z-index: 85; }
.sidebar-backdrop.open { display: block; }

/* Cagri hali kontrolu (Acik | Ertele | Kapat) */
.cd-hal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cd-hal-baslik { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.cd-hal-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--border); background: var(--card); }
.cd-hal-seg > * { border-right: 1px solid var(--border); min-width: 0; }
.cd-hal-seg > *:last-child { border-right: 0; }
.cd-hal-seg form { display: block; }
.cd-hal-seg button, .cd-hal-seg summary { width: 100%; padding: 12px 10px; border: 0; background: transparent; font: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--muted); cursor: pointer; text-align: center; list-style: none; }
.cd-hal-seg summary::-webkit-details-marker { display: none; }
.cd-hal-seg button:hover, .cd-hal-seg summary:hover { background: var(--bg); color: var(--text); }
.cd-hal-seg button.active { color: var(--on-accent); cursor: default; }
.cd-hal-seg button.hal-acik { background: var(--amber); }
.cd-hal-seg button.hal-kapali { background: var(--muted); }
.cd-hal-ertele { position: relative; }
.cd-hal-ertele.active > summary { background: var(--sky); color: var(--on-accent); }
.cd-hal-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 12px; display: grid; gap: 8px; min-width: 260px; }
.cd-hal-menu input[type="text"] { width: 100%; }
.cd-hal-menu button { width: 100%; padding: 9px; border: 1px solid var(--border); background: var(--bg); font: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.cd-hal-menu button:hover { background: var(--sky-tint); border-color: var(--sky); }
.cd-hal-tarih { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.cd-hal-aciklama { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 720px) { .cd-hal-menu { position: static; box-shadow: none; margin-top: 6px; } .cd-hal-tarih { grid-template-columns: 1fr; } }

/* Islem gunlugu zaman cizelgesi */
.cd-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); max-height: 360px; overflow-y: auto; }
.cd-timeline li { position: relative; padding: 0 0 12px 10px; }
.cd-timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; background: var(--sky); border: 2px solid var(--card); }
.cd-timeline li.tl-hal::before { background: var(--amber); }
.cd-timeline li.tl-sonuc::before { background: var(--mint); }
.cd-timeline li.tl-atama::before, .cd-timeline li.tl-atama_kaldir::before { background: var(--purple); }
.cd-timeline li.tl-not::before { background: var(--muted); }
.cd-timeline li:last-child { padding-bottom: 0; }
.tl-kim { font-size: var(--fs-base); }
.tl-ne { font-size: var(--fs-base); margin-top: 3px; overflow-wrap: anywhere; }

/* =====================================================================
   DASHBOARD (2026-08-27) — yeniden tasarim
   ===================================================================== */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list-time { flex: 0 0 52px; font-weight: 700; font-size: var(--fs-base); color: var(--sky); }
.dash-list-body { flex: 1; min-width: 0; }

.dash-perf-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 10px; padding: 7px 0; }
.dash-perf-name { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-perf-bar { height: 8px; background: var(--bg); }
.dash-perf-bar b { display: block; height: 100%; background: var(--sky); }
.dash-perf-nums { font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }

.dash-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.dash-fin > div { display: flex; flex-direction: column; gap: 4px; }
.dash-fin .fin-amount { font-size: var(--fs-md); }

.dash-activity { list-style: none; margin: 0; padding: 0; }
.dash-activity li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
.dash-activity li:last-child { border-bottom: 0; }
.dash-activity-link { font-weight: 600; }
.dash-activity-time { margin-left: auto; white-space: nowrap; }

@media (max-width: 720px) {
  .dash-perf-row { grid-template-columns: 1fr; gap: 3px; }
  .dash-perf-nums { text-align: left; }
  .dash-fin { grid-template-columns: 1fr; text-align: left; }
  .dash-activity-time { margin-left: 0; width: 100%; }
}

/* Tekrar arayan rozeti — cagri listesinde numaranin altinda */
.tekrar-rozet {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  padding: 2px 7px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--amber-tint); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--card));
}
.tekrar-rozet:hover { background: var(--amber-tint); }
.tekrar-rozet .icon { width: 11px; height: 11px; }

/* Cagri detayi — "Bu Numaranin Gecmisi" karti */
.gecmis-liste { max-height: 460px; overflow-y: auto; }
.gecmis-satir { padding: 10px 0; border-bottom: 1px solid var(--border); }
.gecmis-satir:last-child { border-bottom: 0; }
.gecmis-ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-base); }
.gecmis-ses { width: 100%; height: 34px; margin-top: 8px; }
.gecmis-ozet {
  display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px;
  background: var(--bg); font-size: var(--fs-sm); line-height: 1.5;
}
.gecmis-ozet .icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--muted); }

/* Cagri sohbeti — danismanlar arasi mesajlasma */
.sohbet-akis { max-height: 380px; overflow-y: auto; padding: 4px 2px 10px; margin-bottom: 10px; }
.sohbet-satir { display: flex; margin-bottom: 8px; }
.sohbet-satir.benim { justify-content: flex-end; }
.sohbet-balon {
  max-width: 78%; padding: 8px 11px; background: var(--bg);
  border: 1px solid var(--border); border-left: 3px solid var(--border-2);
}
.sohbet-satir.benim .sohbet-balon { background: var(--sky-tint); border-left-color: var(--sky); }
.sohbet-kim { font-size: var(--fs-xs); font-weight: 700; color: var(--sky); margin-bottom: 3px; }
.sohbet-metin { font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sohbet-zaman { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.sohbet-form { display: flex; gap: 8px; align-items: flex-end; }
.sohbet-form textarea { flex: 1; margin: 0; }
@media (max-width: 720px) {
  .sohbet-balon { max-width: 88%; }
  .sohbet-form { flex-direction: column; align-items: stretch; }
  .sohbet-form .btn { width: 100%; justify-content: center; }
}

/* Cagri listesinde sohbet mesaji rozeti */
.mesaj-rozet {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; margin-right: 4px;
  padding: 2px 7px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--sky-tint); color: var(--sky); border: 1px solid color-mix(in srgb, var(--sky) 30%, var(--card));
}
.mesaj-rozet.yeni { background: var(--coral-tint); color: var(--danger); border-color: color-mix(in srgb, var(--coral) 35%, var(--card)); }
.mesaj-rozet .icon { width: 11px; height: 11px; }

/* =====================================================================
   CAGRI DETAYI — KART DILI (2026-08-31, respond.io)
   2026-08-28'de 3 kademeli bir dil kurulmustu (.ck-eylem dolu lacivert
   baslik / .ck-bilgi beyaz baslik + renkli ust cizgi / .cd-fold sade).
   Kullanici istegi uzerine (2026-08-31 "respond tarzi guzellestir") TEK
   ACIK dile indirildi: koyu dolgular kalkti, ayrim RENKLI IKON CIPI ile
   veriliyor. .ck-eylem / .ck-bilgi sinif adlari sablonda DURUYOR (geriye
   donuk uyum) ama artik gorsel agirlik tasimiyorlar.
   ===================================================================== */

/* ---- Ortak baslik iskeleti ---- */
.ck-head { display: flex; align-items: center; gap: 11px; margin: -18px -18px 16px; padding: 13px 18px; }
.ck-head h2, .cd-fold summary h2 { margin: 0; padding-left: 0; border-left: 0; flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); }
.ck-ico { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; }
.ck-ico .icon { width: 16px; height: 16px; }
.ck-say { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; white-space: nowrap; }
.ck-alt { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); margin: -4px 0 12px; }
.ck-ops { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.ck-not { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.ck-not strong { color: var(--text); font-weight: 600; }

/* ---- TEK KART DILI (2026-08-31, respond.io) --------------------------
   Onceki tasarimda "eylem" kartlari KOYU LACIVERT dolu baslik tasiyordu;
   respond.io'nun havadar/acik diline zit duruyordu ve sayfa agir gorunuyordu.
   Artik tum kartlar AYNI acik basligi paylasiyor; ayrim yalnizca RENKLI
   IKON CIPI ile veriliyor (tint zemin + renkli ikon). Boylece hiyerarsi
   tipografi ve renkle kuruluyor, blok dolgusuyla degil.
   Renk sayisi bilerek 4 + notr ile sinirli — fazlasi gurultu yapiyor. */
.card { --kat: var(--sky); --kat-tint: var(--sky-tint); }

.ck-head h2 { color: var(--ink); font-weight: 700; }
.ck-ico {
  background: var(--kat-tint); color: var(--kat);
  border-radius: var(--radius-sm);
}
.ck-say {
  background: var(--kat-tint); color: var(--kat);
  border: 1px solid transparent; border-radius: 999px;
}

/* Kategori renkleri — yalnizca ikon cipini ve sayaci boyar */
.ck-hatirlatma { --kat: var(--amber);  --kat-tint: var(--amber-tint); }
.ck-sohbet     { --kat: var(--mint);   --kat-tint: var(--mint-tint); }
.ck-ai         { --kat: var(--purple); --kat-tint: var(--purple-tint); }
.ck-gecmis     { --kat: var(--navy-2); --kat-tint: var(--sky-tint); }
.ck-gunluk     { --kat: var(--muted);  --kat-tint: var(--surface-3); }

/* ---- Kademe 3: ARAC — katli, sade ---- */
.cd-fold { border-color: var(--border); }
.cd-fold summary { justify-content: flex-start; gap: 10px; padding: 12px 18px; background: var(--card); }
.cd-fold summary:hover { background: var(--bg); }
.cd-fold summary h2 { color: var(--text); font-size: var(--fs-base); font-weight: 600; }
.ck-alt-inline { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cd-fold summary::after { flex: 0 0 auto; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-base); font-weight: 700; }
.cd-fold[open] summary { background: var(--bg); }

/* ---- Form dili: TEK etiket bicimi (formun icinde ya da disinda fark etmez) ---- */
.cd-page .card label:not(.check-inline),
.cd-page .cd-fold label:not(.check-inline) {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.cd-page .cd-grid2 label, .cd-page form > label:first-child, .cd-page .cd-note-form label { margin-top: 0; }
.cd-page input:not([type="checkbox"]), .cd-page select { height: 38px; }
.cd-page .btn { min-height: 38px; }
.cd-page .btn-sm { min-height: 34px; }
.cd-page .form-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

/* Sohbet: kutu ve dugme ayni yukseklikte baslar */
.cd-page .sohbet-form { align-items: stretch; }
.cd-page .sohbet-form textarea { min-height: 38px; height: 62px; }
.cd-page .sohbet-form .btn { align-self: stretch; }

/* ---- Gecmis: kompakt ses satiri (yerlesik <audio> yerine) ---- */
.ses-mini { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border); }
.ses-mini-btn { width: 28px; height: 28px; flex: 0 0 28px; border: 0; background: var(--amber); color: var(--on-accent); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ses-mini-btn .icon { width: 13px; height: 13px; }
.ses-mini.caliyor .ses-mini-btn { background: var(--ink); }
.ses-mini-bar { flex: 1; height: 6px; background: var(--border-2); cursor: pointer; position: relative; min-width: 0; }
.ses-mini-bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.ses-mini-sure { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ses-mini-indir { display: flex; color: var(--muted); flex: 0 0 auto; }
.ses-mini-indir .icon { width: 14px; height: 14px; }
.ses-mini-indir:hover { color: var(--text); }
.gecmis-ozet { border-left: 3px solid var(--purple); }

/* ---- Sablonlar: 2 sutun yonga ---- */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-grid .btn { justify-content: flex-start; width: 100%; white-space: normal; text-align: left; line-height: 1.25; }

/* ---- Ilet: onizleme paneli + esit dugmeler ---- */
.ilet-onizleme { border: 1px solid var(--border); background: var(--bg); }
.ilet-onizleme-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--card); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ilet-onizleme-bar span:last-child { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ilet-onizleme textarea.mono { border: 0; background: transparent; width: 100%; padding: 12px; display: block; }
.ilet-onizleme textarea.mono:focus { box-shadow: none; background: var(--card); }
.ilet-arac { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.ilet-arac .btn { width: 100%; justify-content: center; }
.cd-mail-row .btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .ck-head { margin: -18px -18px 12px; padding: 10px 14px; }
  .cd-fold summary { padding: 11px 14px; }
  .ck-alt-inline { display: none; }
  .tpl-grid { grid-template-columns: 1fr; }
  .cd-page .form-actions .btn { width: 100%; }
  .cd-page .sohbet-form .btn { align-self: auto; }
}

/* Arac kartlari birbirinden ayrilsin (kullanici 2026-08-28): kendi rengi + ikonu, sol serit */
.cd-fold { --kat: var(--sky); --kat-tint: var(--sky-tint); border-left: 4px solid var(--kat); }
.cd-fold-wa   { --kat: var(--mint); --kat-tint: var(--mint-tint); }
.cd-fold-mail { --kat: var(--sky); --kat-tint: var(--sky-tint); }
.cd-fold-rnd  { --kat: var(--amber); --kat-tint: var(--amber-tint); }
.cd-fold summary .ck-ico { width: 26px; height: 26px; flex-basis: 26px; background: var(--kat-tint); color: var(--kat); }
.cd-fold summary::after { border-color: var(--kat); color: var(--kat); }
.cd-fold[open] summary { background: var(--kat-tint); }

/* ---- Madde 7: musteri zaman cizelgesi ---- */
.ck-cizelge { --kat: var(--navy-2); --kat-tint: var(--sky-tint); }
.tl-suzgec { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-suzgec button { border: 1px solid var(--border); background: var(--card); padding: 5px 11px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; }
.tl-suzgec button span { color: var(--muted); font-weight: 500; margin-left: 3px; }
.tl-suzgec button.active { background: var(--navy-2); border-color: var(--navy-2); color: var(--on-accent); }
.tl-suzgec button.active span { color: rgba(255,255,255,.75); }
.tl-cizelge { max-height: 720px; }
.tl-cizelge li { padding-bottom: 14px; }
.tl-cizelge li.tl-cagri::before { background: var(--sky); }
.tl-cizelge li.tl-mesaj::before { background: var(--mint); }
.tl-cizelge li.tl-randevu::before { background: var(--purple); }
.tl-cizelge li.tl-islem::before { background: var(--border-2); }
.tl-cizelge li.tl-not::before { background: var(--amber); }
.tl-kim { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-zaman { margin-left: auto; white-space: nowrap; }
.tl-tur { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; color: var(--on-accent); background: var(--muted); }
.tl-tur-cagri { background: var(--sky); } .tl-tur-mesaj { background: var(--mint); }
.tl-tur-randevu { background: var(--purple); } .tl-tur-not { background: var(--amber); } .tl-tur-islem { background: var(--border-2); }
.tl-ne { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: var(--fs-base); }
.tl-metin { margin-top: 6px; padding: 8px 10px; background: var(--bg); font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-metin.tl-ai { border-left: 3px solid var(--purple); }
.tl-link { font-size: var(--fs-sm); font-weight: 600; color: var(--sky); margin-left: auto; white-space: nowrap; }
.tl-link.small { display: inline-block; margin: 4px 0 0; }
@media (max-width: 720px) { .tl-zaman { margin-left: 0; width: 100%; } .tl-link { margin-left: 0; } }

/* ---- Madde 8: cagri detayinda uygun ilanlar ---- */
.ck-ilan { --kat: var(--mint); --kat-tint: var(--mint-tint); }
.ilan-liste { display: flex; flex-direction: column; gap: 6px; }
.ilan-satir { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); background: var(--bg); }
.ilan-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ilan-baslik { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ilan-baslik:hover { color: var(--sky); }
.ilan-fiyat { font-size: var(--fs-sm); font-weight: 700; color: var(--mint); }
.ilan-satir .btn { flex: 0 0 auto; }
@media (max-width: 720px) { .ilan-satir { flex-wrap: wrap; } .ilan-satir .btn { width: 100%; justify-content: center; } }

/* ---- Kisi Defteri (sade muhasebe, 2026-08-29) ---- */
.df-ay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.df-ay-ad { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; padding: 0 6px; }
.df-ay-sec { margin-left: auto; }
.df-ay-sec select { width: auto; height: 38px; }
.df-ozet .df-verdim { border-top: 3px solid var(--coral); }
.df-ozet .df-aldim { border-top: 3px solid var(--mint); }
.df-ai-satir { display: flex; gap: 8px; }
.df-ai-satir input { flex: 1; min-width: 0; height: 40px; font-size: var(--fs-base); }
.df-ai-satir .btn { flex: 0 0 auto; }
.df-ai-satir .btn.active { background: var(--coral-tint); border-color: var(--coral); color: var(--coral); }
.df-onizleme input, .df-onizleme select { width: 100%; min-width: 0; padding: 6px 8px; font-size: var(--fs-sm); }
.df-onizleme input[type="checkbox"] { width: auto; }
.df-tablo td.num, .df-tablo th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-tablo tr.df-bos td { color: var(--muted); }
.df-tablo tr.df-bos a { color: var(--muted); }
.df-tablo tr.df-secili td { background: var(--sky-tint); }
.df-tablo tfoot th { border-top: 2px solid var(--border-2); background: var(--bg); text-align: right; }
.df-tablo tfoot th:first-child { text-align: left; }
/* Ac/kapa duzenleme (telefon, ad) — EKRANIN ORTASINDA KUCUK PENCERE.
   Onceden IKI AYRI .df-adduzenle blogu vardi (biri burada, digeri ~1146'da);
   sondaki oncekini eziyordu ve mobilde form satir icinde buyuyup yanindaki
   "Kaldir" dugmesini kaydiriyordu. Ikisi burada BIRLESTIRILDI; kullanici
   "yine sacma aciliyor, popup olsun" dedi -> pencere + perde (2026-09-01).
   YENI KURAL EKLERKEN: .df-adduzenle icin baska blok ACMA, buraya ekle. */
.df-adduzenle > summary { list-style: none; cursor: pointer; }
.df-adduzenle > summary::-webkit-details-marker { display: none; }
.df-adduzenle[open] > summary { background: var(--sky-tint); border-color: var(--sky); color: var(--sky); }

/* Perde. ::before oldugu icin tiklamanin HEDEFI <details> elemanidir —
   app.js oradan yakalayip kapatiyor. */
.df-adduzenle[open]::before {
  content: ''; position: fixed; inset: 0; z-index: 110;
  background: rgba(6, 20, 34, .5);
}
.df-adduzenle form.df-kisi-ekle {
  position: fixed; z-index: 120; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(15, 27, 40, .28);
}
.df-adduzenle form .df-pencere-bas {
  flex: 1 1 100%; margin: 0 0 2px; font-size: var(--fs-md); font-weight: 700;
}
/* Ozgulluk notu: `.page-head .row-actions .btn { width: 100% }` (0,3,0)
   var; 0,2,0 ile ezilemedigi icin burada da UC secici. */
/* Ozgulluk notu: `.page-head .row-actions .btn { width: 100% }` (0,3,0) var;
   asagidakiler (0,3,1) olmak ZORUNDA, yoksa dugmeler alt alta yigiliyor. */
.df-adduzenle form.df-kisi-ekle input { flex: 1 1 100%; width: 100%; min-width: 0; }
.df-adduzenle form.df-kisi-ekle .btn { flex: 1 1 0; width: auto; justify-content: center; }
.df-liste { list-style: none; margin: 0; padding: 0; }
.df-liste li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.df-liste li:last-child { border-bottom: 0; }
.df-liste-govde { flex: 1; min-width: 0; font-size: var(--fs-base); line-height: 1.35; }
.df-yon { width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--on-accent); }
.df-yon-verdim { background: var(--coral); }
.df-yon-aldim { background: var(--mint); }
.df-tutar { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-liste form { flex: 0 0 auto; }
/* Kisi tablosu kirilimi (2026-09-01): verdim/aldim AYRI SUTUN degil, kisi
   hucresinde ikinci satir. Mobilde her sutun ayri karta donusuyordu (5 sutun
   = 5 satir); 3 sutuna inince kart yariya kisaldi. */
.df-kirilim { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* Ad + "danisman" rozeti + kirilim: kirilim HER ZAMAN alt satira. */
.df-taraf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.df-taraf .df-kirilim { flex: 1 1 100%; margin-top: 2px; }

/* Avatarli, "canli" satir (2026-09-03, firma sahibi: "cok duz sade, canlandiralim").
   Avatar sabit boyut kucumsemesin diye flex-shrink:0; metin dar ekranda tasmasin
   diye min-width:0 + ellipsis. */
.df-taraf-canli { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.df-taraf-canli > .avt { flex: 0 0 auto; margin-top: 1px; }
.df-taraf-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.df-taraf-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.df-taraf-ust > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.df-taraf-metin .df-kirilim { margin-top: 0; }

/* ==================== SOZLESME TIP KARTLARI + MODAL (2026-09-05) ==========
   Firma sahibi: "renkli ikonlu cekici kartlar, form popup acilsin". */
.sz-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 6px; }
.sz-kart {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 16px; cursor: pointer; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--card);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sz-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--k-renk); }
.sz-kart-ikon {
  width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 13px;
  background: var(--k-tint); color: var(--k-renk);
}
.sz-kart-ikon .icon { width: 23px; height: 23px; }
.sz-kart-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sz-kart-govde strong { font-size: var(--fs-md); color: var(--text); }
.sz-kart-govde span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.sz-kart-ok { color: var(--k-renk); opacity: 0; transition: opacity .15s, transform .15s; transform: translateX(-4px); }
.sz-kart:hover .sz-kart-ok { opacity: 1; transform: translateX(0); }

/* Renk degiskenleri — kart ve modal basligi ayni siniftan okur */
.sz-r-sky    { --k-renk: var(--sky);    --k-tint: var(--sky-tint); }
.sz-r-mint   { --k-renk: var(--mint);   --k-tint: var(--mint-tint); }
.sz-r-coral  { --k-renk: var(--coral);  --k-tint: var(--coral-tint); }
.sz-r-purple { --k-renk: var(--purple); --k-tint: var(--purple-tint); }
.sz-r-amber  { --k-renk: var(--amber);  --k-tint: var(--amber-tint); }
.sz-r-navy   { --k-renk: var(--navy-2); --k-tint: var(--surface-3); }

/* ---- Modal ---- */
.sz-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; }
.sz-modal[hidden] { display: none !important; }
.sz-modal-perde { position: absolute; inset: 0; background: rgba(6, 20, 34, .55); }
.sz-modal-pencere {
  position: relative; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; background: var(--card);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(15,27,40,.35); overflow: hidden;
}
.sz-modal-bas {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--k-tint); border-bottom: 2px solid var(--k-renk);
}
.sz-modal-bas strong { font-size: var(--fs-md); color: var(--text); flex: 1; }
.sz-modal-bas .sz-kart-ikon { width: 36px; height: 36px; border-radius: 10px; background: var(--card); }
.sz-modal-x {
  border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted);
  padding: 6px 9px; border-radius: 8px; line-height: 1;
}
.sz-modal-x:hover { background: var(--card); color: var(--coral); }
.sz-modal-icerik { overflow-y: auto; padding: 18px; }
.sz-form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.sz-form-izgara .sz-tam { grid-column: 1 / -1; }
.sz-onay { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 500; margin: 10px 0 4px; }
.sz-onay input { width: auto; }
.sz-modal-alt {
  display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; margin-top: 6px;
  border-top: 1px solid var(--border);
}

/* Form alanlari HUCRESINI DOLDURSUN — girintili/duzensiz gorunumun nedeni
   genel input stillerinin genislik vermemesiydi (firma sahibi bildirdi). */
.sz-form-izgara label { display: block; margin: 12px 0 5px; }
.sz-form-izgara input, .sz-form-izgara textarea, .sz-form-izgara select {
  width: 100%; box-sizing: border-box; min-width: 0;
}
.sz-form-izgara input:focus, .sz-form-izgara textarea:focus {
  border-color: var(--k-renk); box-shadow: 0 0 0 3px var(--k-tint); outline: none;
}

/* ---- Liste satirlari: tip-renkli kartlar ---- */
.sz-liste { display: flex; flex-direction: column; gap: 10px; }
.sz-satir {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--k-renk); border-radius: var(--radius-md);
  padding: 10px 12px; box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.sz-satir:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sz-satir-govde { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sz-satir .sz-kart-ikon { width: 40px; height: 40px; border-radius: 11px; }
.sz-satir .sz-kart-ikon .icon { width: 20px; height: 20px; }
.sz-satir-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sz-satir-metin > strong { font-size: var(--fs-base); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-satir-alt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sz-tip-rozet {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; background: var(--k-tint); color: var(--k-renk);
}
.sz-satir-eylem { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---- Tur suzgeci: SIMETRIK mini-kart izgarasi (2026-09-05 v2) ----
   Serbest saran cipler dagimik gorunuyordu (firma sahibi bildirdi);
   panel kurali "simetrik izgara" ile hizalandi. */
.sz-cipler {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; margin-top: 12px;
}
.sz-cip {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-width: 0;
  border: 1px solid var(--border); border-left: 3px solid var(--k-renk, var(--sky));
  border-radius: 10px; background: var(--card);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, background .12s, transform .12s;
}
.sz-cip .icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--k-renk, var(--sky)); }
.sz-cip b {
  margin-left: auto; flex: 0 0 auto; font-weight: 800; font-size: 11px;
  background: var(--k-tint, var(--sky-tint)); color: var(--k-renk, var(--sky));
  padding: 2px 9px; border-radius: 999px;
}
.sz-cip:hover { transform: translateY(-1px); border-color: var(--k-renk, var(--sky)); }
.sz-cip.aktif { background: var(--k-tint, var(--sky-tint)); border-color: var(--k-renk, var(--sky)); }
.sz-cip.aktif b { background: var(--k-renk, var(--sky)); color: #fff; }
@media (max-width: 640px) {
  .sz-cipler { grid-template-columns: 1fr 1fr; }
  .sz-cip { padding: 8px 10px; font-size: var(--fs-xs); }
  .sz-cip > span.sz-cip-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Manuel eklenen uygun ilan (2026-09-08) — AI ilanlarindan AMBER ile ayrisir */
.kisi-ilan-manuel {
  background: var(--amber-tint);
  border-left: 3px solid var(--amber);
  padding-left: 8px; border-radius: 6px;
}

/* ---- Bildirim kartlari (sz-satir uzerine, 2026-09-05) ---- */
.bd-okunmamis { background: var(--k-tint, var(--sky-tint)); }
.bd-baslik { white-space: normal !important; }   /* baslik kirpilmasin, sarsin */
.bd-govde { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; word-break: break-word; }

/* Mobil: kartlar tek kolon; modal TAM EKRAN (yatay kaydirma yasak kurali) */
@media (max-width: 640px) {
  .sz-kartlar { grid-template-columns: 1fr; }
  .sz-modal { align-items: stretch; }
  .sz-modal-pencere { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; }
  .sz-form-izgara { grid-template-columns: 1fr; }
  .sz-modal-alt .btn { flex: 1; justify-content: center; }
  /* Liste satiri mobilde dikey akar; eylemler sag ustte durur */
  .sz-satir { flex-wrap: wrap; }
  .sz-satir-eylem { margin-left: auto; }
}

/* Imzali makbuz durumu (2026-09-01) — liste satirlarinda.
   Hepsi inline-flex/flex: mobil kart gorunumunde YATAY KAYDIRMA uretmez. */
.df-imza-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.df-imza { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; }
.df-imza-tamam    { color: var(--mint); }
.df-imza-bekliyor { color: var(--amber); }
.df-imza-form { display: inline; }
.df-imza-form .btn { padding: 2px 7px; font-size: var(--fs-xs); }
.df-imza-kutu { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); }
.df-imza-kutu input[type=checkbox] { width: auto; margin: 0; }
.df-imza-kutu.df-pasif { color: var(--muted); }

/* Muhasebe kilit / sifirlama ekrani (2026-09-01) — tek kart, ortalanmis */
.df-kilit { max-width: 400px; margin: 10vh auto; padding: 0 16px; }
.df-kilit .ck-alt { margin-bottom: 14px; }
.df-kilit .flash { margin-bottom: 12px; }
.text-green { color: var(--mint); }
@media (max-width: 720px) {
  .df-ay-sec { margin-left: 0; width: 100%; }
  .df-ay-sec select { width: 100%; }
  .df-ai-satir { flex-wrap: wrap; }
  .df-ai-satir input { flex: 1 1 100%; }
  .df-ai-satir .btn { flex: 1 1 auto; }
  .df-tablo td.num { text-align: left; }
  /* Sekmede zaten "Kisiler/Kurumlar/Giderler" yaziyor — satir basinda tekrar etmesin. */
  .df-tablo td.df-adhucre::before { display: none; }
  .df-tablo td.df-adhucre { padding-top: 10px; }
  /* Net karti 2 sutunlu izgarada tek basina yarim kalmasin. */
  .df-ozet .df-net { grid-column: 1 / -1; }
  /* Satir islemleri: `.table td .cell-actions .row-actions` mobilde 3 sutunlu
     izgara yapip ikon dugmelerini kocaman blok haline getiriyordu. Kart
     icinde saga yasli, 44px dokunma hedefli kucuk dugmeler daha dogru. */
  .df-tablo td.cell-actions { justify-content: flex-end; padding-top: 0; }
  .df-tablo td.cell-actions .row-actions {
    display: flex; grid-template-columns: none; gap: 6px; justify-content: flex-end;
  }
  .df-tablo td.cell-actions .row-actions .btn {
    width: auto; flex: 0 0 auto; min-width: 44px; justify-content: center;
  }
}

/* =====================================================================
   RESPOND.IO KABUGU (2026-08-29): dar ikon seridi + gelen kutusu 3 sutun
   ===================================================================== */
.rail {
  width: 76px; flex: 0 0 76px; background: var(--rail-bg);
  display: flex; flex-direction: column; align-items: stretch; position: sticky; top: 0; height: 100vh; height: 100dvh;
  border-right: 1px solid rgba(255,255,255,.06); z-index: 90;
}
/* .rail-brand kaldirildi (2026-08-31, kullanici: "logoyu kaldiralim
   yonetimden, zaten bizim sistem"). Logonun bosalttigi ust payi nav ustlendi;
   ikonlar seridin en ustune yapismasin. logo.png hala kullaniliyor:
   tarayici sekmesi ikonu, giris sayfasi ve WhatsApp video kapagi. */
.rail-nav { flex: 1; overflow-y: auto; padding: 14px 0 4px; }
.rail-nav::-webkit-scrollbar { width: 0; }
/* ⚠️ `.rail-link` BURAYA SONRADAN EKLENDİ (2026-09-11): master kabuğu ray
   öğelerine `class="rail-link"` veriyordu ama böyle bir kural HİÇ YOKTU.
   `<a class="rail-link">` tesadüfen `.rail a` ile biçimleniyordu; `<button
   class="rail-link">` (Çıkış) ise HİÇBİR kurala düşmüyor, ham tarayıcı
   düğmesi olarak rayın dibinde duruyordu. Ekran görüntüsünde "menü profesyonel
   değil" denen şeyin bir parçası buydu. */
.rail a, .rail .rail-link, .rail-user button, .rail-tema {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  color: var(--rail-text); font-size: 10px; font-weight: 600; letter-spacing: .01em; text-align: center;
  border-left: 3px solid transparent; position: relative; line-height: 1.1;
}
/* Düğme olarak gelen ray öğesi: tarayıcı varsayılanlarını sıfırla */
.rail button.rail-link {
  width: 100%; background: none; border: 0; border-left: 3px solid transparent;
  cursor: pointer; font-family: inherit;
}
.rail a .icon, .rail .rail-link .icon { width: 21px; height: 21px; opacity: .9; }
.rail a:hover, .rail .rail-link:hover { background: rgba(255,255,255,.06); color: var(--on-accent); }
.rail a.active, .rail .rail-link.active { background: var(--rail-active); color: var(--on-accent); border-left-color: var(--sky-bright); }
.rail-badge { position: absolute; top: 6px; right: 14px; background: var(--coral); color: var(--on-accent); font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; line-height: 17px; text-align: center; padding: 0 4px; }
.rail-foot { border-top: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; }
/* Ray dibindeki form yalnızca bir sarmalayıcı — kendi boşluğunu getirmesin */
.rail-foot form { margin: 0; }
.rail-user { margin: 0; }
.rail-user button { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; }
.rail-user button:hover { background: rgba(255,255,255,.06); color: var(--on-accent); }
.rail-avatar { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--sky); color: var(--on-accent); font-weight: 800; font-size: var(--fs-base); }

.mobilebar { display: none; }
body.genis .content { max-width: none; padding: 0; }

/* ---- Gelen kutusu: 3 sutun ---- */
/* Gelen kutusu 4 sutun (2026-08-31): SUZGEC | LISTE | KONUSMA | KISI
   Yasam dongusu + Takim kutulari listenin USTUNDE degil kendi sutununda —
   7 danismanli Takim kutusu numaralari asagi itmiyor, liste hemen saginda.
   Dar ekranda grid ALANLARI ile suzgec yeniden listenin ustune yigiliyor,
   boylece ayni DOM iki duzende de calisiyor. */
.inbox {
  display: grid;
  grid-template-columns: 196px 330px minmax(0, 1fr) 300px;
  grid-template-areas: "suzgec liste konusma kisi";
  height: 100vh; overflow: hidden;
}
.inbox:not(.inbox-secili) {
  grid-template-columns: 196px 330px minmax(0, 1fr);
  grid-template-areas: "suzgec liste konusma";
}
.inbox-suzgec { grid-area: suzgec; }
.inbox-liste  { grid-area: liste; }
.inbox-konusma { grid-area: konusma; }
.inbox-kisi   { grid-area: kisi; }

.inbox-suzgec {
  border-right: 1px solid var(--border); background: var(--card);
  padding: 14px 12px; overflow-y: auto; min-height: 0;
}
/* Kendi sutununda ust cizgiye gerek yok — ilk kutu bosluksuz baslasin */
.inbox-suzgec > .inbox-ozel { margin-bottom: 4px; }
.inbox-suzgec > .inbox-katlanir:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.inbox-liste { border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.inbox-liste-bas { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.inbox-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.inbox-baslik h1 { font-size: var(--fs-lg); }
.inbox-baslik-arac { display: flex; gap: 4px; }
.inbox-baslik-arac form { display: inline; }
.inbox-ara { position: relative; margin-bottom: 10px; }
.inbox-ara .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 15px; height: 15px; }
.inbox-ara input { width: 100%; height: 36px; padding: 0 10px 0 32px; background: var(--bg); font-size: var(--fs-base); }
.inbox-kapsam { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--border); margin-bottom: 8px; }
.inbox-kapsam a { text-align: center; padding: 7px 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); border-right: 1px solid var(--border); }
.inbox-kapsam a:last-child { border-right: 0; }
.inbox-kapsam a b { color: var(--muted); font-weight: 600; margin-left: 3px; }
.inbox-kapsam a.active { background: var(--navy-2); color: var(--on-accent); }
.inbox-kapsam a.active b { color: rgba(255,255,255,.8); }
.inbox-hal { display: flex; gap: 4px; flex-wrap: wrap; }
.inbox-hal a { padding: 4px 9px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); border: 1px solid transparent; }
.inbox-hal a b { font-weight: 600; margin-left: 2px; }
.inbox-hal a.active { background: var(--sky-tint); color: var(--sky); border-color: var(--sky); }
.inbox-hal-ozel { margin-left: auto; color: var(--sky) !important; }
.inbox-ozel { display: flex; gap: 6px; margin-top: 8px; }
.inbox-ozel a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 3px 8px; border: 1px solid var(--border); }
.inbox-ozel a .icon { width: 12px; height: 12px; }
.inbox-ozel a.active { background: var(--amber-tint); color: var(--amber); border-color: var(--amber); }
.inbox-satirlar { flex: 1; overflow-y: auto; min-height: 0; }
.inbox-satir { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.inbox-satir:hover { background: var(--bg); }
.inbox-satir.secili { background: var(--sky-tint); border-left-color: var(--sky); }
.inbox-satir.okunmamis { border-left-color: var(--sky-bright); }
.inbox-satir.okunmamis .inbox-ad { font-weight: 800; }
.inbox-satir.hal-kapali { opacity: .72; }
.inbox-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; background: var(--sky-tint); color: var(--sky); }
.inbox-avatar.giden { background: var(--mint-tint); color: var(--mint); }
.inbox-avatar.cevapsiz { background: var(--coral-tint); color: var(--coral); }
.inbox-avatar .icon { width: 17px; height: 17px; }
.inbox-satir-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-satir-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inbox-ad { font-weight: 600; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-zaman { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.inbox-satir.okunmamis .inbox-zaman { color: var(--sky); font-weight: 700; }
.inbox-onizleme { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-rozetler { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.inbox-rozetler .badge { font-size: 10px; padding: 1px 6px; }
.inbox-danisman { font-size: 10.5px; font-weight: 700; color: var(--navy-2); margin-left: auto; }
.inbox-danisman.havuz { color: var(--amber); }
.inbox-sayfa { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.inbox-bos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--muted); text-align: center; font-size: var(--fs-base); }
.inbox-bos .icon { width: 30px; height: 30px; opacity: .5; }
.inbox-bos-buyuk { padding: 120px 20px; }
.inbox-bos-buyuk .icon { width: 48px; height: 48px; }
.inbox-bos-buyuk h2 { color: var(--text); border: 0; padding: 0; }

.inbox-konusma { overflow-y: auto; min-height: 0; padding: 18px 22px 40px; background: var(--bg); }
.inbox-geri { display: none; }
.inbox-konusma .cd-hero { margin-bottom: 14px; }
.inbox-konusma .two-col { grid-template-columns: 1fr; }

.inbox-kisi { border-left: 1px solid var(--border); background: var(--card); overflow-y: auto; min-height: 0; }
.kisi-bas { padding: 18px 16px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.kisi-avatar { width: 56px; height: 56px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: var(--sky-tint); color: var(--sky); }
.kisi-avatar.out { background: var(--mint-tint); color: var(--mint); }
.kisi-avatar .icon { width: 26px; height: 26px; }
.kisi-ad { font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.kisi-ad a:hover { color: var(--sky); }
.kisi-numara { font-size: var(--fs-base); color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* auto-fit (2026-09-08): sabit 3 kolon dar panelde "Musteri Yap"i kesiyordu —
   sigmayan buton alt satira iner, kesilmez. */
.kisi-eylem { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.kisi-eylem .btn, .kisi-eylem form .btn { width: 100%; justify-content: center; }
.kisi-eylem form { display: contents; }
.kisi-bolum { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.kisi-bolum-bas { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kisi-bolum-bas b { background: var(--mint-tint); color: var(--mint); padding: 0 6px; font-size: 10.5px; }
.kisi-dl { margin: 0; display: grid; gap: 6px; }
.kisi-dl div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-base); }
.kisi-dl dt { color: var(--muted); }
.kisi-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kisi-ilan { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.kisi-ilan:last-child { border-bottom: 0; }
.kisi-ilan > a { font-weight: 600; line-height: 1.3; display: block; }
.kisi-ilan > a:hover { color: var(--sky); }
.kisi-ilan-alt { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.kisi-sablonlar { display: flex; flex-direction: column; gap: 5px; }
.kisi-sablonlar .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.badge-amber { background: var(--amber-tint); color: var(--amber); }

@media (max-width: 1440px) {
  .inbox { grid-template-columns: 180px 300px minmax(0, 1fr) 270px; }
  .inbox:not(.inbox-secili) { grid-template-columns: 180px 300px minmax(0, 1fr); }
}
/* <=1240px: dort sutun sigmiyor -> suzgec LISTENIN USTUNE yigilir (eski duzen) */
@media (max-width: 1240px) {
  .inbox {
    grid-template-columns: 320px minmax(0, 1fr) 270px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "suzgec konusma kisi"
      "liste  konusma kisi";
  }
  .inbox:not(.inbox-secili) {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "suzgec konusma"
      "liste  konusma";
  }
  .inbox-suzgec { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: visible; padding: 12px 14px 8px; }
}
@media (max-width: 1080px) {
  .inbox, .inbox:not(.inbox-secili) {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
      "suzgec konusma"
      "liste  konusma";
  }
  .inbox-kisi { display: none; }
}
@media (max-width: 900px) {
  .rail { position: fixed; left: -90px; top: 0; bottom: 0; height: 100vh; height: 100dvh; transition: left .18s; }
  .rail.open { left: 0; box-shadow: 0 0 28px rgba(0,0,0,.38); }
  /* Serit acikken arka plan kaymasin (perde: .sidebar-backdrop). */
  body.rail-acik { overflow: hidden; }
  .mobilebar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
  .mobilebar .hamburger { display: block; }
  .mobilebar-title { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobilebar-bell { position: relative; display: flex; color: var(--text); }
  .mobilebar-bell b { position: absolute; top: -6px; right: -8px; background: var(--coral); color: var(--on-accent); font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 4px; }
  .inbox, .inbox:not(.inbox-secili) {
    grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas: "suzgec" "liste" "konusma" "kisi";
    height: auto; overflow: visible;
  }
  .inbox-liste { border-right: 0; }
  .inbox-suzgec { border-right: 0; overflow: visible; }
  /* Cagri secilince suzgec de gizlensin — mobilde konusma tam ekran */
  .inbox-secili .inbox-suzgec { display: none; }
  .inbox-satirlar { overflow: visible; }
  .inbox-secili .inbox-liste { display: none; }
  .inbox-konusma { padding: 12px 12px 90px; overflow: visible; }
  .inbox-geri { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 8px; }
  .inbox-geri .icon { width: 14px; height: 14px; }
  .inbox-kisi { display: block; border-left: 0; border-top: 1px solid var(--border); }
  .inbox-secili .inbox-kisi { display: block; }
}

.inbox-konusma .cd-actions { display: none; }  /* eylemler sag panelde */

.inbox-hal a { padding: 4px 7px; font-size: var(--fs-xs); }
.inbox-hal-ozel { margin-left: 0; }
.inbox-ozel a { font-size: var(--fs-xs); }

/* ---- Iki sutunlu sayfalar (Kisiler, Randevular) — gelen kutusuyla ayni dil ---- */
.ikili { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.pane-liste { border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.pane-liste-bas { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.pane-say { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.pane-say a { color: var(--coral); font-weight: 700; margin-left: 4px; }
.pane-gun { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.pane-gun.bugun { color: var(--sky); }
.pane-govde { overflow-y: auto; min-height: 0; padding: 18px 22px 40px; background: var(--bg); }
.pane-govde .page-head { margin-bottom: 14px; }
.pane-govde .two-col { grid-template-columns: 1fr 1fr; }
.inbox-avatar.kisi { background: var(--navy-2); color: var(--on-accent); font-weight: 800; font-size: var(--fs-md); }
.inbox-avatar.rnd { background: var(--purple-tint); color: var(--purple); font-weight: 800; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cd-hal-seg button.hal-iptal { background: var(--coral); }
@media (max-width: 1280px) { .ikili { grid-template-columns: 320px minmax(0, 1fr); } .pane-govde .two-col { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ikili { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .pane-liste { border-right: 0; }
  .ikili-secili .pane-liste { display: none; }
  .pane-govde { padding: 12px; overflow: visible; }
  .ikili .inbox-geri { display: inline-flex; }
}

/* =====================================================================
   RESPOND.IO GORSEL DILI (2026-08-30): yuvarlak kose, hafif golge, Inter
   ===================================================================== */
.card, .stat-card, .modal, .login-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card .card-head, .ck-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.cd-fold summary { border-radius: var(--radius-lg); }
.cd-fold[open] summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.btn, .badge, .seg, .pager-item, input, select, textarea, .inbox-kapsam, .inbox-hal a, .inbox-ozel a,
.tl-suzgec button, .df-yon, .ck-say, .ck-ico, .note-item, .ilan-satir, .ses-mini, .sohbet-balon, .gecmis-ozet,
.tl-metin, .cd-hal-seg, .cd-hal-menu, .fin-tabs a, .page-tabs button, .flash, .cd-callout, .ck-not, .ilet-onizleme { border-radius: var(--radius-sm); }
.inbox-kapsam, .cd-hal-seg { overflow: hidden; }
.inbox-avatar, .kisi-avatar, .cd-avatar, .rail-avatar, .avt { border-radius: 50%; }
.inbox-satir.secili { border-left-width: 2px; }
.btn { font-weight: 500; padding: 8px 14px; }
.btn-sm { padding: 6px 10px; }
.badge { font-weight: 600; letter-spacing: 0; }
.table th { background: var(--surface-2); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); }
.table tbody tr:hover { background: var(--surface-2); }
input, select, textarea { background: var(--card); }
input:focus, select:focus, textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-tint); }
/* Baslik seridi: cok hafif zemin + alt cizgi (koyu dolgu KALDIRILDI) */
.ck-head { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.card h2, .card-head h2, .card-body > h2 { color: var(--text); border-left: 0; padding-left: 0; font-weight: 600; }
.page-head h1::after { display: none; }
.inbox-liste-bas, .pane-liste-bas { background: var(--card); }
.inbox-satir { padding: 12px 14px; }

/* =====================================================================
   DARK MODE (2026-08-30) — yalnizca token override; secici tekrari yok.
   html[data-theme=dark] head'deki inline script ile localStorage'dan gelir.
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c10; --card: #14161c; --surface-2: #1a1d24; --surface-3: #20242c;
  --border: #23272f; --border-2: #2c313b;
  --text: #e6e8ec; --muted: #8b93a1; --on-accent: #ffffff;
  --ink: #0b0c10; --navy: #0f1722; --navy-2: #13233a;
  --sky: #38b6ff; --sky-bright: #5cc4ff; --sky-tint: rgba(0,174,255,.14);
  --mint: #3ccf7a; --mint-tint: rgba(31,161,94,.16);
  --coral: #ff6b6e; --coral-tint: rgba(224,57,62,.16);
  --amber: #f0a13a; --amber-tint: rgba(201,118,10,.16);
  --purple: #a08cff; --purple-tint: rgba(109,79,214,.18);
  --danger: #ff6b6e; --danger-tint: rgba(224,57,62,.16);
  --rail-bg: linear-gradient(180deg, #0e1015 0%, #0b0c10 100%);
  --rail-text: #c7cdd6; --rail-muted: #6b7482; --rail-active: rgba(0,174,255,.18);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 8px 24px rgba(0,0,0,.55);
}
html[data-theme="dark"] .rail { border-right-color: var(--border); }
html[data-theme="dark"] .chart-tooltip { background: var(--surface-3); color: var(--text); }
html[data-theme="dark"] .btn-dark, html[data-theme="dark"] .seg.active, html[data-theme="dark"] .pager-item.active,
html[data-theme="dark"] .fin-tabs a.active, html[data-theme="dark"] .page-tabs button.active { background: var(--sky); border-color: var(--sky); }
html[data-theme="dark"] .cd-hal-seg button.hal-kapali { background: #3a3f4a; }
html[data-theme="dark"] img.tema-ters { filter: brightness(0) invert(1); }
html[data-theme="dark"] .login-page { background: var(--bg); }

/* Tema dugmesi (rail) */
.rail-tema { width: 100%; background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; font-family: inherit; }
.rail-tema:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail-tema .icon { width: 21px; height: 21px; }
.rail-tema .ikon-ay { display: none; }
html[data-theme="dark"] .rail-tema .ikon-ay { display: block; }
html[data-theme="dark"] .rail-tema .ikon-gunes { display: none; }

/* DB'den gelen kategori/kisi renkleri: --kat ile; zemin karistirilir, metin token */
.kat-cip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--kat) 18%, var(--card)); color: var(--text); border: 1px solid color-mix(in srgb, var(--kat) 45%, var(--card)); font-size: var(--fs-xs); font-weight: 600; }
.kat-cip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kat); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .kat-cip { background: var(--surface-3); border-color: var(--border-2); }
}

/* ---- Danisman avatari (2026-08-30): foto varsa foto, yoksa bas harf ---- */
.avt { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: var(--avt-bg, var(--sky-tint)); color: var(--avt-fg, var(--sky)); font-weight: 700; vertical-align: middle; line-height: 1; }
.avt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avt i { font-style: normal; }
.avt-18 { width: 18px; height: 18px; font-size: 8px; } .avt-22 { width: 22px; height: 22px; font-size: 9.5px; }
.avt-20 { width: 20px; height: 20px; font-size: 9px; } .avt-24 { width: 24px; height: 24px; font-size: 10px; }
.avt-28 { width: 28px; height: 28px; font-size: 11px; } .avt-32 { width: 32px; height: 32px; font-size: 12px; }
.avt-38 { width: 38px; height: 38px; font-size: 14px; } .avt-52 { width: 52px; height: 52px; font-size: 19px; } .avt-56 { width: 56px; height: 56px; font-size: 20px; }
.avt-sky { --avt-bg: var(--sky-tint); --avt-fg: var(--sky); } .avt-mint { --avt-bg: var(--mint-tint); --avt-fg: var(--mint); }
.avt-purple { --avt-bg: var(--purple-tint); --avt-fg: var(--purple); } .avt-amber { --avt-bg: var(--amber-tint); --avt-fg: var(--amber); }
.avt-coral { --avt-bg: var(--coral-tint); --avt-fg: var(--coral); } .avt-navy { --avt-bg: var(--surface-3); --avt-fg: var(--navy-2); }
html[data-theme="dark"] .avt-navy { --avt-fg: var(--rail-text); }
.avt-ad { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; min-width: 0; }
.avt-ad > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-danisman { display: inline-flex; align-items: center; gap: 4px; }
.inbox-danisman .avt { border: 1.5px solid var(--card); }
.avt-yigin { display: inline-flex; } .avt-yigin .avt { margin-left: -6px; border: 2px solid var(--card); } .avt-yigin .avt:first-child { margin-left: 0; }
.rail-user .avt { border: 2px solid rgba(255,255,255,.25); }
.sohbet-kim, .tl-kim { display: flex; align-items: center; gap: 6px; }
.dash-perf-name { display: flex; align-items: center; gap: 8px; }
.ayar-foto { display: flex; align-items: center; gap: 10px; }
.ayar-foto input { flex: 1; min-width: 0; }


/* ---- Gelen kutusu: Yasam Dongusu + Takim (2026-08-30) ---- */
.inbox-katlanir { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.inbox-katlanir summary { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; display: flex; align-items: center; padding: 2px 0 6px; }
.inbox-katlanir summary::-webkit-details-marker { display: none; }
.inbox-katlanir summary::after { content: "▾"; margin-left: auto; font-size: 10px; }
.inbox-katlanir[open] summary::after { content: "▴"; }
.inbox-katlanir-govde { display: flex; flex-direction: column; gap: 2px; }
.inbox-katlanir-govde a { display: flex; align-items: center; gap: 7px; padding: 5px 6px; font-size: 12.5px; color: var(--text); min-width: 0; flex-wrap: nowrap; }
.inbox-katlanir-govde a:hover { background: var(--surface-2); }
.inbox-katlanir-govde a.active { background: var(--sky-tint); color: var(--sky); font-weight: 600; }
.inbox-katlanir-etiket { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-katlanir-govde a b { font-weight: 700; color: var(--muted); flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.inbox-katlanir-govde a.active b { color: var(--sky); }
.inbox-katlanir-alt { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 6px; font-size: 12.5px; font-weight: 600; color: var(--sky); border-top: 1px dashed var(--border); }
.inbox-katlanir-alt:hover { background: var(--surface-2); }
.inbox-katlanir-alt .icon { color: var(--sky); }

/* ---- Sag panel: Yasam Dongusu yongalari + Isbirligi ---- */
.kisi-eylem-uyari { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 8px 10px; background: var(--amber-tint); color: var(--amber); font-size: 11.5px; border-radius: var(--radius-sm); }
.kisi-eylem-uyari .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.kisi-yonga-grup { display: flex; flex-direction: column; gap: 6px; }
.kisi-yonga { width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; }
.kisi-yonga:hover { background: var(--surface-2); }
.kisi-yonga.active { background: var(--sky); border-color: var(--sky); color: var(--on-accent); cursor: default; font-weight: 600; }
.kisi-isbirlikci { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.kisi-isbirlikci form { margin: 0; }
.kisi-isbirlikci button { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; padding: 2px; }
.kisi-isbirlikci button:hover { color: var(--danger); }
.kisi-isbirlikci button .icon { width: 14px; height: 14px; }
.kisi-isbirlikci-ekle { display: flex; gap: 6px; margin-top: 8px; }
.kisi-isbirlikci-ekle select { flex: 1; min-width: 0; }

/* ---- AI "sonraki adim" notu (2026-08-31) ----
   Ozet degil EYLEM: gorsel olarak da ozetten ayrilsin diye vurgulu serit. */
.ai-adim { border-left: 3px solid var(--sky); background: var(--sky-tint); padding: 10px 12px; }
.ai-adim-bas { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sky); margin-bottom: 4px; }
.ai-adim-bas .icon { width: 15px; height: 15px; }
.ai-adim p { font-size: var(--fs-base); line-height: 1.5; }

/* ---- Sesli not (2026-08-31) ---- */
.sohbet-ses { display: block; width: 100%; max-width: 260px; height: 36px; margin-bottom: 6px; }
/* ---- Portfoyum (2026-09-02) ---- */
.pf-sekmeler { margin-bottom: 14px; }
/* Dar ekranda sekme yazilari tek satirda kalsin (390px'te kirilma gorundu). */
.pf-sekmeler a { white-space: nowrap; font-size: 12px; padding: 7px 2px; }
.pf-tel-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface-3); color: var(--muted); }
.pf-tel-avatar .icon { width: 16px; height: 16px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pf-kart { position: relative; display: flex; flex-direction: column; }
.pf-kart-govde { display: block; padding: 14px 14px 8px; color: inherit; min-width: 0; }
.pf-ust { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-adlar { min-width: 0; display: flex; flex-direction: column; }
.pf-adlar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rozet-yeni { margin-left: auto; background: var(--coral); color: var(--on-accent);
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 9px; flex: 0 0 auto; }
.pf-rozetler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pf-alt { margin-top: 8px; }
.pf-eylem { display: flex; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.pf-eylem .btn { flex: 1; justify-content: center; }
.pf-yildiz { position: absolute; top: 8px; right: 10px; z-index: 2;
  background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--border-2); padding: 4px; transition: color .14s, transform .14s; }
.pf-yildiz:hover { transform: scale(1.15); }
/* Cagri detayindaki yildiz — numaranin yaninda satir ici (2026-09-02) */
.cd-yildiz { background: none; border: 0; cursor: pointer; font-size: 20px;
  line-height: 1; vertical-align: middle; margin-left: 6px; padding: 2px;
  color: var(--border-2); transition: color .14s, transform .14s; }
.cd-yildiz:hover { transform: scale(1.15); }
.cd-yildiz.acik { color: #f5a623; }
/* Devret ac/kapa (2026-09-03) — kisi panelindeki kucuk form */
.cd-devret { margin-top: 6px; }
.cd-devret > summary { list-style: none; cursor: pointer; }
.cd-devret > summary::-webkit-details-marker { display: none; }
.cd-devret-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pf-yildiz.acik { color: #f5a623; }
@media (max-width: 720px) {
  .pf-grid { grid-template-columns: 1fr; }
}

/* Sohbette resimli mesaj (2026-09-02). max-width %100: yatay kaydirma YASAK. */
.sohbet-resim-link { display: block; margin-bottom: 6px; }
.sohbet-resim { display: block; max-width: min(100%, 280px); max-height: 320px;
  border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.ses-kayit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--border); }
.ses-kayit-sure { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.ses-kayit.kaydediyor .ses-kayit-dugme { color: var(--danger); border-color: var(--danger); }
/* Kayit sirasinda yanip sonen nokta — kaydin surdugu belli olsun */
.ses-kayit.kaydediyor .ses-kayit-sure::before { content: "●"; color: var(--danger);
  margin-right: 5px; animation: sesYanip 1s steps(1) infinite; }
@keyframes sesYanip { 50% { opacity: 0; } }
.ses-kayit-durum { flex-basis: 100%; margin: 0; }
/* .btn display:flex tanimi [hidden] niteligini EZIYORDU — kayit yokken
   Gonder/Vazgec gorunuyordu (2026-08-31 canli testte yakalandi). */
.ses-kayit [hidden] { display: none !important; }

/* =====================================================================
   CANLILIK: renkli ikonlar + yumusak hareket (2026-09-01)
   Firma sahibi: "ikonlar falan renksiz gorunenler var, animasyon
   hareketlilik yok iceriklerde". Satir eylem butonlari gri kutulardi;
   hangisinin ne yaptigi renkten anlasilmiyordu.
   Olcu respond.io: BELIRGIN ama SAKIN — buyuk siçramalar yok.
   ===================================================================== */

/* --- Satir eylem ikonlari artik RENKLI --- */
.cell-actions .btn-ghost,
.row-actions .btn-ghost { transition: background .14s, border-color .14s, color .14s, transform .14s; }
/* Ac / git oku -> marka mavisi */
.cell-actions .btn-ghost:hover,
.row-actions .btn-ghost:hover { background: var(--sky-tint); border-color: var(--sky); color: var(--sky); }
/* Silme -> kirmizi (yanlislikla basmayi zorlastirir, niyet belli olur) */
.cell-actions form[onsubmit] .btn-ghost:hover,
.row-actions form[onsubmit] .btn-ghost:hover,
.df-liste form[onsubmit] .btn-ghost:hover { background: var(--coral-tint); border-color: var(--coral); color: var(--coral); }
.btn .icon { transition: transform .14s; }
.btn:hover .icon { transform: translateX(1px); }
.btn-ghost:active { transform: scale(.96); }

/* --- Tablo satirlari: uzerine gelince hafif kayma + sol renkli serit --- */
.table tbody tr { transition: background .14s, box-shadow .14s; }
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--sky); }

/* --- Defter listesi satirlari --- */
.df-liste li { transition: background .14s, box-shadow .14s; }
.df-liste li:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--sky); }
/* Yon oku (verdim/aldim) uzerine gelince canlanir */
.df-yon { transition: transform .16s; }
.df-liste li:hover .df-yon { transform: scale(1.12); }

/* --- Kartlar sayfaya yumusakca girer (staggered) --- */
@keyframes vipGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cd-page .card, .two-col > div > .card, .stat-grid .stat-card {
  animation: vipGir .26s ease-out both;
}
.stat-grid .stat-card:nth-child(2) { animation-delay: .04s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: .08s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: .12s; }

/* --- Ozet kartlari: uzerine gelince hafif yukselir --- */
.stat-card { transition: transform .16s, box-shadow .16s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- Kart basligindaki ikon cipi nefes alir --- */
.ck-ico { transition: transform .18s; }
.card:hover > .ck-head .ck-ico, .ck-head:hover .ck-ico { transform: scale(1.08); }

/* --- Rozetler --- */
.badge { transition: background .14s, color .14s; }

/* ERISILEBILIRLIK: hareket azaltma tercihine SAYGI. Sistemde "hareketi
   azalt" acikken tum animasyonlar kapanir (bas donmesi/mide bulantisi
   yasayan kullanicilar icin sart). */
@media (prefers-reduced-motion: reduce) {
  .cd-page .card, .two-col > div > .card, .stat-grid .stat-card { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Taraf turu secimi + zorunlu alan isareti (2026-09-01) */
.df-tur-sec { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.df-tur-sec label { display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-size: var(--fs-sm); font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text); cursor: pointer; }
.df-tur-sec input[type=radio] { width: auto; margin: 0; }
.df-zorunlu { color: var(--coral); font-weight: 700; }
/* Tur rozetleri — kisi/kurum/gider ayrimi listede goze carpsin */
.df-tur { font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.df-tur-kurum { background: var(--purple-tint); color: var(--purple); }
.df-tur-gider { background: var(--amber-tint); color: var(--amber); }
.mt-xs { margin-top: 6px; }
/* [hidden] guvencesi: .df-tur-sec display:flex tasidigi icin hidden'i
   ezebilirdi (2026-08-31'de .btn ile ayni tuzak yasandi). */
#dfYeniKutu[hidden] { display: none !important; }

/* Muhasebe sade duzen (2026-09-01) */
/* Kayit formu — dort alan yan yana, dar ekranda sarar (yatay kaydirma YOK) */
.df-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.df-alt-satir { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.df-alt-satir .df-imza-kutu { margin-top: 0; }

/* Kisi / Kurum / Gider sekmeleri */
.df-sekme { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 14px; flex-wrap: wrap; }
.df-sekme a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; }
.df-sekme a:hover { color: var(--text); }
.df-sekme a.active { color: var(--sky); border-bottom-color: var(--sky); }
.df-sekme a b { font-weight: 700; }
.df-sekme .icon { width: 15px; height: 15px; }

/* Katlanabilir bolumler (AI girisi, yeni taraf ekleme) */
.df-katlanir { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.df-katlanir summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--sky); padding: 4px 0; }
.df-katlanir summary::-webkit-details-marker { display: none; }
.df-katlanir summary::after { content: "▾"; margin-left: auto; font-size: 11px; }
.df-katlanir[open] summary::after { content: "▴"; }
.df-katlanir summary .icon { width: 15px; height: 15px; }
/* Kart govdesi disinda duran katlanir (bakiyeler kartinin alti) */
.df-katlanir-alt { margin-top: 0; padding: 10px 18px; }
.df-katlanir-alt .card-body { padding-left: 0; padding-right: 0; }

/* Muhasebe canlilik (2026-09-01) — firma sahibi: "biraz renk ikon canlilik" */
/* Ozet karti ikonlari: tonlu daire + renkli ikon */
.df-ozet .stat-label { display: flex; align-items: center; gap: 7px; }
.df-ozet-ikon { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 6px; }
.df-ozet-ikon .icon { width: 13px; height: 13px; }
.df-oi-v { background: var(--coral-tint); color: var(--coral); }
.df-oi-a { background: var(--mint-tint); color: var(--mint); }
.df-oi-n { background: var(--sky-tint); color: var(--sky); }

/* Yon secimi — renkli yongalar (duz select yerine).
   Kirmizi = cikan para, yesil = giren. Renk yonu bir bakista anlatiyor. */
.df-yon-sec { display: flex; gap: 6px; }
.df-yon-sec input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.df-yon-sec label { flex: 1; margin: 0; text-align: center; cursor: pointer;
  padding: 9px 8px; font-size: var(--fs-sm); font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); transition: background .14s, border-color .14s, color .14s, transform .1s; }
.df-yon-sec label:hover { border-color: var(--border-2); }
.df-yon-sec label:active { transform: scale(.97); }
.df-yon-sec input:checked + label.df-yon-v {
  background: var(--coral-tint); border-color: var(--coral); color: var(--coral); }
.df-yon-sec input:checked + label.df-yon-a {
  background: var(--mint-tint); border-color: var(--mint); color: var(--mint); }
/* Klavye ile gezinenler odagi gorsun */
.df-yon-sec input:focus-visible + label { box-shadow: 0 0 0 3px var(--sky-tint); }

/* Satir eylem ikonlari — her is kendi renginde */
.df-b-pdf:hover { background: var(--purple-tint) !important; border-color: var(--purple) !important; color: var(--purple) !important; }
.df-b-ac:hover  { background: var(--sky-tint) !important; border-color: var(--sky) !important; color: var(--sky) !important; }

/* Sekme ikonu etkin sekmede renklenir */
.df-sekme a.active .icon { color: var(--sky); }

/* ====================================================== CANLI SANTRAL SERIDI
   Gelen kutusunun ustunde, su an devam eden cagrilar (2026-09-10).
   Icerik JS ile dolar (public/js/app.js), santral webhook'u yoksa hic gorunmez.
   Tek sutun: 390 px'te yatay tasma YOK. */
.canli-serit {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.canli-bas {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Serit HER ZAMAN dar gelen kutusu sutununda yasar (~410 px) — ekran genis olsa
   bile ic sutun dardir. Bu yuzden "Ac" dugmesi hep ikinci satirda: tek satira
   sikistirinca dahili numarasi ve danisman adi "dahili 10…" diye kirpiliyordu. */
.canli-kart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--card);
}
.canli-gorusmede { border-left-color: var(--sky); }
.canli-kuyrukta  { border-left-color: var(--purple); }
.canli-baslatiliyor { border-left-color: var(--mint); }

.canli-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  /* Calan telefon "canli" hissetmeli — tek nokta, sayfanin geri kalani sakin */
  animation: canliNabiz 1.4s ease-in-out infinite;
}
.canli-gorusmede .canli-nokta { background: var(--sky); animation: none; }
.canli-kuyrukta  .canli-nokta { background: var(--purple); }
.canli-baslatiliyor .canli-nokta { background: var(--mint); }

@keyframes canliNabiz {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
/* DIKKAT: burada "animation: none" guvenli — nokta zaten opacity:1 ile
   duruyor, animasyon yalnizca onu geri soluklastiriyor. Iceridi opacity:0
   ile baslatip animasyonla gosteren bir kurala ASLA boyle dokunma. */
@media (prefers-reduced-motion: reduce) {
  .canli-nokta { animation: none; }
}

.canli-govde { min-width: 0; }
.canli-ad {
  font-weight: 600;
  font-size: var(--fs-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.canli-alt {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.canli-sag { display: grid; justify-items: end; gap: 1px; }
.canli-durum {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--amber);
}
.canli-gorusmede .canli-durum { color: var(--sky); }
.canli-kuyrukta  .canli-durum { color: var(--purple); }
.canli-baslatiliyor .canli-durum { color: var(--mint); }
.canli-sure {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;   /* saniye ilerlerken satir zıplamasin */
}
.canli-git {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sky);
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}
.canli-git:hover { background: var(--sky-tint); border-color: var(--sky); }
.canli-git { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }

/* --------------------------------------------------- SANTRAL BILDIRIMI
   "Santralden Ara" sonucunu gosteren kisa mesaj. Ekranin ALT ortasinda:
   ust kismi cagri detayinda yapiskan baslikla cakisiyordu. */
.santral-bildirim {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: min(92vw, 420px);
  padding: 11px 16px;
  border: 1px solid var(--mint);
  border-left: 3px solid var(--mint);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--shadow-md);
  animation: santralGir .18s ease-out;
}
.santral-bildirim.hata { border-color: var(--danger); border-left-color: var(--danger); }
.santral-bildirim.gider { opacity: 0; transition: opacity .55s ease; }

@keyframes santralGir {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Hareketi azalt: bildirim YERINDE ve GORUNUR dogar — asla opacity:0 kalmaz. */
@media (prefers-reduced-motion: reduce) {
  .santral-bildirim { animation: none; }
}

/* Ayarlar kartindaki ince ayirici */
hr.ince { border: 0; border-top: 1px solid var(--border); margin: 14px 0 12px; }

/* Mobil yapiskan cubukta Santral butonu YALNIZCA ikon: 390 px'te dort etiketli
   buton (Ara / Santral / WhatsApp / Kapat) sigmiyor, sonuncusu tasiyordu. */
.cd-sticky .cd-sticky-ikon { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.cd-sticky .cd-sticky-ikon svg { margin: 0; }

/* ============================================================ SANTRAL EKRANI
   Kuyruk sayaclari + ajan karolari (2026-09-10). */
.santral-sayaclar {
  display: grid;
  /* Mobilde TEK SUTUNA DUSMEZ — sayi kutulari en az 2x2 kalir (proje kurali) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.santral-sayaclar > div {
  display: grid; gap: 2px; justify-items: center;
  padding: 12px 6px;
  background: var(--card);
}
.santral-sayaclar b {
  font-size: var(--fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.santral-sayaclar span { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
@media (max-width: 620px) {
  .santral-sayaclar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.santral-ajanlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.santral-ajan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 9px;
  padding: 9px 11px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--card);
}
.santral-mint   { border-left-color: var(--mint); }
.santral-amber  { border-left-color: var(--amber); }
.santral-sky    { border-left-color: var(--sky); }
.santral-purple { border-left-color: var(--purple); }
.santral-gri    { border-left-color: var(--border-2); opacity: .62; }

.santral-ajan-govde { min-width: 0; }
.santral-ajan-ad {
  font-weight: 600; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.santral-ajan-alt {
  font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.santral-ajan-hal { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.santral-mint   .santral-ajan-hal { color: var(--mint); }
.santral-amber  .santral-ajan-hal { color: var(--amber); }
.santral-sky    .santral-ajan-hal { color: var(--sky); }
.santral-purple .santral-ajan-hal { color: var(--purple); }
.santral-gri    .santral-ajan-hal { color: var(--muted); }
/* "Mola" dugmesi dar karoda ikinci satira gecer — tasma olmaz */
.santral-mola { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }

/* Santral sayfasindaki serit kart icinde: kendi cercevesi ve zemini olmasin */
.canli-serit-duz { padding: 0; border: 0; background: none; }
/* Kuyruk tablosunda bekleyen cagri varsa dikkat cek */
.santral-vurgu { color: var(--amber); font-weight: 700; }

/* ------------------------------------------------------- CAGRI AKTARMA
   Canli seritteki "Aktar" dugmesinin actigi kucuk secim penceresi. */
.canli-eylem { grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 2px; }
.canli-eylem .canli-git { margin-top: 0; }

.aktar-perde {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(11, 22, 34, .45);
}
.aktar-kutu {
  width: 100%; max-width: 360px;
  max-height: 80vh; overflow-y: auto;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.aktar-bas { font-weight: 700; font-size: var(--fs-md); margin-bottom: 10px; }
.aktar-liste { display: grid; gap: 6px; }
.aktar-kisi {
  display: grid; gap: 1px; text-align: left;
  padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text);
  font: inherit;
}
.aktar-kisi:hover { border-color: var(--sky); background: var(--sky-tint); }
.aktar-kisi b { font-size: var(--fs-sm); }
.aktar-kisi span { font-size: var(--fs-xs); color: var(--muted); }
.aktar-secenek { margin-top: 10px; }
.aktar-alt { margin-top: 12px; display: flex; justify-content: flex-end; }

/* Kapatilmis kullanici satiri — silinmedi, yalnizca giris yapamiyor */
.kul-kapali { opacity: .55; }

/* Marka logosu tanimli degilken metin karsiligi */
.lg-marka-ad { font: 800 26px/1 'Inter', sans-serif; letter-spacing: -.5px; color: #fff; }
.mk-logo-ad { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }

/* ---------------------------------------------------------------------------
   KANALLAR — bildirim hattı vurgusu (2026-09-10)
   Firma birden fazla WhatsApp bağlayabildiği için "bildirimler HANGİ hattan
   gidiyor" sorusu ekranda tereddütsüz okunmalı: kart sol kenardan kalın
   şeritle işaretlenir, satır listede ayrı zeminle durur.
--------------------------------------------------------------------------- */
.kanal-bildirim { border-left: 3px solid var(--border); }
.kanal-bildirim-ok { border-left-color: var(--mint); }
.kanal-bildirim-eksik { border-left-color: var(--amber); }
.kanal-bildirim-satir { margin: 0; font-size: 15px; line-height: 1.7; }
.kanal-vurgu { background: var(--mint-tint); color: var(--mint); padding: 2px 8px; }
.kanal-numara { background: var(--surface-3); padding: 2px 8px; letter-spacing: .02em; }
.kanal-satir-bildirim > td { background: var(--mint-tint); }
.kanal-pasif > td { opacity: .55; }
.kanal-grup { border: 1px solid var(--border); padding: 12px 14px; margin: 14px 0; }
.kanal-grup > legend { padding: 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kanal-test-sonuc { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.kanal-test-sonuc.ok { color: var(--mint); }
.kanal-test-sonuc.hata { color: var(--coral); }

/* ---------------------------------------------------------------------------
   HESAP YAŞAM DÖNGÜSÜ — kurulum sihirbazı, paketler, kilit (2026-09-10)
--------------------------------------------------------------------------- */
/* Kurulum sihirbazı */
.bs-ilerleme { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bs-cubuk { flex: 1; height: 6px; background: var(--surface-3); overflow: hidden; }
.bs-cubuk > span { display: block; height: 100%; background: var(--mint); transition: width .4s ease; }
.bs-sayi { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bs-adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bs-adim .card-body { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.bs-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bs-ust h2 { margin: 0; font-size: 16px; }
.bs-no {
  width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.bs-bitti .bs-no { background: var(--mint-tint); color: var(--mint); }
.bs-aciklama { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.6; }
.bs-adim .btn { align-self: flex-start; }
.bs-yardim { margin-top: 14px; }

/* Paketler — mobilde TEK sütuna düşse de kutular yan yana okunabilir kalsın */
.pk-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pk-kart .card-body { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.pk-mevcut { border-color: var(--mint); }
.pk-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pk-ust h2 { margin: 0; font-size: 17px; }
.pk-fiyat { display: flex; align-items: baseline; gap: 6px; }
.pk-tutar { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.pk-donem { font-size: 13px; color: var(--muted); }
.pk-yillik { margin: -8px 0 0; }
.pk-liste, .pk-ozellik { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 2; }
.pk-ozellik { border-top: 1px solid var(--border); padding-top: 10px; color: var(--muted); }
.pk-ozellik li::before { content: '+'; margin-right: 7px; color: var(--mint); font-weight: 700; }
.pk-kart .btn, .pk-kart form { margin-top: auto; }
.pk-kart form .btn { width: 100%; }
.pk-not { margin-top: 14px; }

/* Kilit sayfası */
.kl-sahne { max-width: 620px; margin: 0 auto; }
.kl-durum { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 4px; }
.kl-madde { display: flex; gap: 11px; font-size: 14px; line-height: 1.6; }
.kl-tik {
  width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: var(--mint-tint); color: var(--mint);
}
.kl-tik-bekle { background: var(--amber-tint); color: var(--amber); }

/* Üst bant — deneme sayacı / kilit uyarısı */
.hs-bant {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  background: var(--sky-tint); color: var(--sky); border-bottom: 1px solid var(--border);
}
.hs-bant-uyari { background: var(--amber-tint); color: var(--amber); }
.hs-bant-kilit { background: var(--coral-tint); color: var(--coral); }
.hs-bant a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Master görünümü bandı — Kirpisoft personeli müşteri panelinde.
   Mor, çünkü master paneli de mor: aynı işaret, aynı anlam. */
.hs-bant-master { background: var(--purple-tint); color: var(--purple); }
.hs-bant-master button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; font-weight: 700; text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   PAKET KULLANIMI — Ayarlar › Paket (2026-09-11)
   "Sürpriz duvar yok": limit dolmadan ÖNCE görünür.
   Mobilde 2x2 kalır, tek sütuna DÜŞMEZ (ev kuralı).
--------------------------------------------------------------------------- */
.lm-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); margin-bottom: 12px; }
.lm-kutu { background: var(--card); padding: 13px 14px; min-width: 0; }
.lm-ust { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
.lm-ad { font-size: 12px; color: var(--muted); font-weight: 600; }
.lm-sayi { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 3px 0 7px; }
.lm-sinir { font-size: 13px; font-weight: 500; color: var(--muted); }
.lm-cubuk { height: 4px; background: var(--surface-3); overflow: hidden; }
.lm-cubuk > span { display: block; height: 100%; background: var(--mint); transition: width .4s ease; }
.lm-cubuk-yok > span { width: 100%; background: var(--surface-3); }
.lm-yaklasti .lm-cubuk > span { background: var(--amber); }
.lm-doldu .lm-cubuk > span { background: var(--coral); }
.lm-doldu .lm-sayi { color: var(--coral); }
.lm-not { font-size: 11px; color: var(--muted); margin-top: 5px; }
@media (max-width: 760px) { .lm-izgara { grid-template-columns: 1fr 1fr; } }

/* Kullanıcının değiştiremeyeceği modül — sebebi yanında yazıyor */
.lm-kilitli { opacity: .55; }
.lm-kilitli input { cursor: not-allowed; }