/* Bulut Demo Paneli. Marka değerleri app/demo/tahsilat/yeni.css ile aynı; renk ve ölçünün tek kaynağı aşağıdaki :root.
   Görsel kural: renkli etiket (.flag) yapılacak işi söyler, nokta + yazı durumu söyler. Satırda aynı anda bir tek şey bağırır.
   CSP sıkı: satır içi stil ve data: görsel çalışmaz. Simgeler icons/ klasöründen mask ile çizilir, rengini yazıdan alır. */
:root {
  color-scheme: light;
  --bg: #F4F6F9; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #F1F5F9;
  --line: #E2E8F0; --line-soft: #EEF2F6; --line-btn: #CBD5E1;
  --line-input: #8492A6; /* Beyaz ve #F8FAFC üstünde 3:1 */
  --ink: #0F172A; --ink-2: #334155; --ink-3: #5B6B82; /* --ink-3 en koyu gri zeminde de 4.5:1 */
  --brand: #2563EB; --brand-strong: #1D4ED8; --brand-deep: #1E40AF; --brand-soft: #EFF6FF; --brand-line: #BFDBFE;
  --warn-soft: #FFF7ED; --warn-line: #FED7AA; --warn-ink: #9A3412; --warn-dot: #F97316;
  --ok-soft: #ECFDF5; --ok-line: #A7F3D0; --ok-ink: #047857; --ok-dot: #10B981;
  --bad-soft: #FEF3F2; --bad-line: #FECACA; --bad-ink: #B42318; --bad-dot: #D92D20;
  --meet-dot: #6366F1; --idle-dot: #94A3B8;
  --r-card: 16px; --r-box: 12px; --r: 10px; --r-sm: 8px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-2: 0 10px 28px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
  --shadow-3: 0 24px 56px rgba(15, 23, 42, .26);
  --scrim: rgba(15, 23, 42, .42);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: 20px;
  --page: 1312px;
  --edge: max(24px, calc((100% - var(--page)) / 2)); /* Üst bar ve şerit içeriği kartlarla aynı hizada */
  --top-h: 56px; --tab-h: 36px;
  --ctl: 40px; --ctl-sm: 34px;
}

html, body { margin: 0; background: var(--bg); }
html { scrollbar-gutter: stable; scroll-padding-top: 48px; -webkit-text-size-adjust: 100%; }
html.has-modal { overflow: hidden; }
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 20px; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #DBEAFE; }
[hidden] { display: none !important; }
a { color: var(--brand-strong); }
b, strong { font-weight: 600; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
input, select, textarea, button { font: inherit; }
img { display: block; }
time { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 18px; }

/* Odak: her yerde aynı halka. Pencere ve çekmece programla odak alır, halka göstermez. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.drawer__panel:focus, .confirm__box:focus, .timeline:focus { outline: none; }

/* Simge: sınıf adı .ico-* ; düğme "İşleniyor…" yazısına dönse de simge kaybolmaz çünkü işaretlemede değil, CSS'te. */
[class*="ico-"]::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-phone { --ico: url(icons/phone.svg); }
.ico-message { --ico: url(icons/message.svg); }
.ico-mail { --ico: url(icons/mail.svg); }
.ico-copy { --ico: url(icons/copy.svg); }
.ico-download { --ico: url(icons/download.svg); }
.ico-logout { --ico: url(icons/logout.svg); }
.ico-x { --ico: url(icons/x.svg); }

/* Bekleme göstergesi */
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: inline-flex; align-items: center; gap: 10px; }
.loading::before, .boot::before, .btn[aria-disabled="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; background: none; -webkit-mask: none; mask: none; animation: spin .8s linear infinite;
}

/* Temel parçalar */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.card--pad { padding: 24px; }

.btn { height: var(--ctl); padding: 0 14px; border: 1px solid var(--line-btn); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-1); transition: background-color .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--surface-2); border-color: var(--idle-dot); color: var(--ink); }
.btn:active { background: var(--surface-3); }
.btn--sm { height: var(--ctl-sm); padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; gap: 6px; }
.btn--sm[class*="ico-"]::before { width: 14px; height: 14px; }
.btn--primary { border-color: transparent; background: var(--brand); color: #FFFFFF; font-weight: 600; }
.btn--primary:hover { border-color: transparent; background: var(--brand-strong); color: #FFFFFF; }
.btn--primary:active { background: var(--brand-deep); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-3); box-shadow: none; }
.btn--ghost:hover { border-color: transparent; background: var(--surface-3); color: var(--ink); }
.btn--ghost:active { background: var(--line); }
.btn--link { color: var(--brand-strong); font-size: 13px; }
.btn--link:hover { background: var(--brand-soft); color: var(--brand-deep); }
.btn--danger { border-color: var(--bad-line); color: var(--bad-ink); }
.btn--danger:hover { border-color: #FDA29B; background: var(--bad-soft); color: #912018; }
.btn--danger:active { background: #FEE4E2; }
.btn--solid-danger { border-color: transparent; background: var(--bad-ink); color: #FFFFFF; font-weight: 600; }
.btn--solid-danger:hover { border-color: transparent; background: #912018; color: #FFFFFF; }
.btn--solid-danger:active { background: #7A271A; }
.btn--block { width: 100%; height: 44px; }
.btn:disabled { border-color: var(--line); background: var(--surface-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.btn--primary:disabled, .btn--solid-danger:disabled { border-color: transparent; background: var(--line); color: #475569; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn--primary[aria-disabled="true"] { background: var(--brand-strong); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.field__hint { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.field__hint:empty { display: none; }
.field__error { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bad-ink); }
.input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-input); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 400; transition: border-color .12s; }
.input:hover { border-color: var(--ink-3); }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--bad-ink); }
.input--sm { width: auto; min-height: var(--ctl-sm); padding: 4px 10px; border-radius: var(--r-sm); font-size: 13px; line-height: 18px; }
textarea.input { display: block; resize: vertical; }
select.input { -webkit-appearance: none; appearance: none; padding-right: 30px; background: var(--surface) url(icons/chevron-down.svg) right 10px center / 14px no-repeat; cursor: pointer; }

.alert { margin: 0; padding: 10px 12px; border: 1px solid var(--bad-line); border-radius: var(--r); background: var(--bad-soft); color: var(--bad-ink); font-size: 13px; line-height: 18px; }
.alert--ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok-ink); }
.alert--warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-ink); }

/* Açılış ve giriş */
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
.boot { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-3); }
.boot::before { animation: spin .8s linear 25, boot-out .01s 20s forwards; } /* boot.js 20 sn sonra hata yazar; dönen halka da durur */

.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login__card { width: 100%; max-width: 400px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-1); }
.login__head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; text-align: center; }
.login__logo { width: 76px; height: auto; margin-bottom: 12px; }
.login__card h1 { font-size: 20px; line-height: 28px; }
.login__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pass { position: relative; display: block; }
.pass .input { padding-right: 76px; }
.pass__toggle { position: absolute; top: 5px; right: 5px; }

/* Üst bar */
.top { display: flex; align-items: center; gap: 28px; min-height: var(--top-h); padding: 0 var(--edge); background: var(--surface); border-bottom: 1px solid var(--line); }
.top__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.top__brand img { width: 40px; height: 20px; }
.top__user { margin-left: auto; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; text-align: right; }
.top .btn { flex: none; }
.tabs { display: flex; align-self: stretch; align-items: center; gap: 4px; }
.tabs button { position: relative; height: var(--tab-h); padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .12s, color .12s; }
.tabs button:hover { background: var(--surface-3); color: var(--ink); }
.tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: calc((var(--tab-h) - var(--top-h)) / 2); height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); }

.banner { position: sticky; top: 0; z-index: 8; margin: 0; padding: 8px var(--edge); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--warn-line); background: var(--warn-soft); color: var(--warn-ink); font-size: 13px; line-height: 18px; font-weight: 500; }
.banner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-dot); } /* Çevrimdışıyken dosyadan simge yüklenemez */
.main { max-width: 1360px; margin: 0 auto; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; }

/* Özet kutuları: tek şerit, her biri hazır süzgeç */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.kpi { --tone: var(--idle-dot); position: relative; min-width: 0; padding: 12px var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color .12s; }
.kpi:first-child { border-left: 0; }
.kpi:hover { background: var(--surface-2); }
.kpi:focus-visible { outline-offset: -3px; border-radius: var(--r-card); }
.kpi span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.kpi span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.kpi b { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi[data-tile="call"] { --tone: var(--warn-dot); }
.kpi[data-tile="opened"] { --tone: var(--ok-dot); }
.kpi[data-tile="today"] { --tone: var(--brand); }
.kpi[data-tile="link"] { --tone: var(--bad-dot); }
.kpi[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand); }
.kpi[aria-pressed="true"] span { color: var(--brand-strong); }
.kpi[aria-pressed="true"] b { color: var(--brand-strong); }

/* Liste kartı. overflow: clip köşeyi keser ama sticky başlığı bozmaz. */
#list { overflow: clip; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px var(--gutter); }
.bar__search { flex: 1 1 260px; width: auto; min-height: 36px; padding: 6px 12px 6px 36px; border-radius: var(--r-sm); background: var(--surface) url(icons/search.svg) left 11px center / 15px no-repeat; }
.bar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px; padding: 0 var(--gutter) 12px; font-size: 13px; line-height: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.seg button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
.seg button:hover { background: var(--line); color: var(--ink); }
.seg button:focus-visible { outline-offset: 0; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand-strong); font-weight: 600; box-shadow: 0 0 0 1px var(--line-input), var(--shadow-1); }
.seg__n { margin-left: 2px; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.seg__n:empty { display: none; }
.seg button[aria-pressed="true"] .seg__n { color: var(--brand-strong); }

/* Tablo: iki satırlık hücreler aynı taban çizgisinde; ilk satır 20px, ikinci 18px. */
.scroll { overflow-x: auto; }
.table { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.table th { padding: 8px 10px; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; line-height: 16px; font-weight: 500; text-align: left; white-space: nowrap; }
.table th:nth-child(2) { width: 18%; }
.table th:nth-child(3) { width: 16%; }
.table th:nth-child(4) { width: 124px; }
.table th:nth-child(5) { width: 18%; }
.table th:nth-child(6) { width: 100px; text-align: right; }
.table th:first-child, .table td:first-child { padding-left: var(--gutter); }
.table th:last-child, .table td:last-child { padding-right: var(--gutter); }
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td small { display: block; color: var(--ink-3); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table tbody tr[data-id] { cursor: pointer; }
.table tbody tr[data-id] td { transition: background-color .1s; }
.table tbody tr[data-id]:hover td { background: var(--surface-2); }
.row__open { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.row__open:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.row__open:focus-visible { border-radius: 4px; }
.row__phone { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.row__call { display: none; }
.cell-date { white-space: nowrap; color: var(--ink-3); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-task, .cell-status, .cell-link { white-space: nowrap; }

.empty { padding: 56px 24px !important; text-align: center; color: var(--ink-3); }
.table tbody .empty { border-bottom: 0; }
.empty__text { display: block; margin: 0 0 12px; color: var(--ink-2); font-weight: 500; }
.empty__text:last-child { margin-bottom: 0; }

/* Renkli etiket: yapılacak iş */
.flag { --flag-bg: var(--surface-3); --flag-line: var(--line); --flag-ink: var(--ink-2); display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; vertical-align: top; background: var(--flag-bg); box-shadow: inset 0 0 0 1px var(--flag-line); color: var(--flag-ink); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.flag--warn { --flag-bg: var(--warn-soft); --flag-line: var(--warn-line); --flag-ink: var(--warn-ink); }
.flag--bad { --flag-bg: var(--bad-soft); --flag-line: var(--bad-line); --flag-ink: var(--bad-ink); }
.flag--info { --flag-bg: var(--brand-soft); --flag-line: var(--brand-line); --flag-ink: var(--brand-strong); }
.flag--muted { --flag-bg: var(--surface-3); --flag-line: var(--line); --flag-ink: #475569; }

/* Nokta + yazı: durum. Satırda seçim kutusu, üzerine gelince belli olur. */
.badge { --tone: var(--idle-dot); }
.badge--new { --tone: var(--warn-dot); }
.badge--contacted { --tone: var(--brand); }
.badge--meeting { --tone: var(--meet-dot); }
.badge--won { --tone: var(--ok-dot); }
.badge--lost { --tone: var(--idle-dot); }
.status-pick { position: relative; display: inline-flex; margin: -4px 0 -4px -8px; border-radius: var(--r-sm); vertical-align: top; }
.status-pick::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--tone); pointer-events: none; }
.status-pick::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--ink-3); -webkit-mask: url(icons/chevron-down.svg) center / contain no-repeat; mask: url(icons/chevron-down.svg) center / contain no-repeat; pointer-events: none; }
.status-pick select { -webkit-appearance: none; appearance: none; min-height: 28px; padding: 4px 22px 4px 21px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; transition: background-color .12s; }
.status-pick select:hover { background: var(--line); }
.status-pick select:focus { background: var(--surface); }
.status-pick select option { color: var(--ink); }

.link { --tone: var(--idle-dot); display: inline-flex; align-items: center; gap: 7px; height: 20px; vertical-align: top; color: var(--ink); font-size: 13px; white-space: nowrap; }
.link::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.link--ok { --tone: var(--ok-dot); }
.link--wait { color: var(--ink-2); }
.link--off { color: var(--ink-3); }
.link--bad { --tone: var(--bad-dot); color: var(--bad-ink); font-weight: 500; }
.cell-link small { padding-left: 14px; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.pager span { margin-right: auto; font-variant-numeric: tabular-nums; }

/* Çekmece */
@keyframes fade-in { from { opacity: 0; } }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes pop-in { from { transform: translateY(6px) scale(.985); opacity: 0; } }
@keyframes toast-in { from { transform: translate(-50%, 8px); opacity: 0; } }
.drawer { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: var(--scrim); animation: fade-in .16s ease-out; }
.drawer__panel { width: 100%; max-width: 560px; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); padding: 0 24px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-3); animation: drawer-in .22s var(--ease); }
.drawer__head { position: sticky; top: 0; z-index: 2; margin: 0 -24px; padding: 14px 16px 12px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer__title { min-width: 0; }
.drawer__head h2 { font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.drawer__title .muted { margin-top: 2px; overflow-wrap: anywhere; }
.drawer__title .muted:empty { display: none; }
.drawer__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .12s, color .12s; }
.drawer__close::before { width: 18px; height: 18px; }
.drawer__close:hover { background: var(--surface-3); color: var(--ink); }
.drawer__body { display: flex; flex-direction: column; gap: 20px; }

.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface-2); color: var(--ink-2); font-size: 13px; line-height: 18px; }
.next b { grid-column: 1; color: var(--ink); font-size: 14px; line-height: 20px; }
.next p { grid-column: 1; margin: 0; overflow-wrap: anywhere; }
.next .btn { grid-column: 2; grid-row: 1 / span 2; }
.next--warn { border-color: var(--warn-line); background: var(--warn-soft); }
.next--warn b { color: var(--warn-ink); }
.next--bad { border-color: var(--bad-line); background: var(--bad-soft); }
.next--bad b { color: var(--bad-ink); }
.next--info { border-color: var(--brand-line); background: var(--brand-soft); }
.next--info b { color: var(--brand-strong); }

.contact { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.contact .row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.contact__mail { grid-column: 1 / 3; height: auto; min-height: var(--ctl-sm); justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; white-space: normal; overflow-wrap: anywhere; text-align: left; }

.block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.block h3 { font-size: 14px; line-height: 20px; }
.block .field, .block .seg { width: 100%; }
.block .seg { display: flex; }
.block .seg button { flex: 1 1 auto; }
.last-note { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: 13px; line-height: 18px; }
.last-note span { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.last-note p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* Geçmiş: nokta hattı, sağda tarih. Kısa ayrıntı başlığın yanında durur, not kendi satırında okunur. */
.timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; width: 100%; }
.timeline li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 0 0 12px 18px; font-size: 13px; line-height: 18px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--idle-dot); }
.timeline li::after { content: ""; position: absolute; left: 3px; top: 17px; bottom: -3px; width: 1px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li.muted, .timeline li.alert { display: block; padding: 0; }
.timeline li.alert { padding: 10px 12px; }
.timeline li.muted::before, .timeline li.muted::after, .timeline li.alert::before, .timeline li.alert::after { display: none; }
.timeline b { min-width: 0; font-weight: 500; color: var(--ink); }
.timeline p { flex: 0 1 auto; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-3); }
.timeline time { order: 2; margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.timeline small { order: 3; flex-basis: 100%; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.timeline__note::before { background: var(--brand) !important; }
.timeline__note b { color: var(--brand-strong); }
.timeline__note p { order: 3; flex-basis: 100%; margin-top: 2px; color: var(--ink); }
.timeline__note small { order: 4; margin-top: 2px; }
.block > .btn--ghost { margin: -6px 0 0 -12px; }

.fold { border-top: 1px solid var(--line); }
.fold + .fold { margin-top: -20px; } /* Katlanan satırlar peş peşe liste gibi durur */
.fold > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--r-sm); transition: color .12s; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--ink-3); -webkit-mask: url(icons/chevron-down.svg) center / contain no-repeat; mask: url(icons/chevron-down.svg) center / contain no-repeat; transform: rotate(-90deg); transition: transform .14s var(--ease); }
.fold[open] > summary::before { transform: none; }
.fold > summary:hover { color: var(--brand-strong); }
.fold > summary:focus-visible { outline-offset: -2px; }
.fold__state { margin-left: auto; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.fold__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px 0 16px; }
.fold__body .field { width: 100%; }
.fold__body .facts { width: 100%; margin: 0; }
.fold--danger > summary { color: var(--bad-ink); }
.fold--danger > summary:hover { color: #912018; }
.facts { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.facts dt { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.facts dd { margin: 2px 0 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }

/* Ayarlar */
.settings { max-width: 640px; }
.settings__form { display: flex; flex-direction: column; gap: 16px; }
.settings h2 { font-size: 16px; line-height: 24px; }
.settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.settings > .btn { margin-top: 12px; }
.settings + .settings { margin-top: 16px; }
.admins { margin: 12px 0 20px; padding: 0; border-top: 1px solid var(--line-soft); list-style: none; }
.admins__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.admins__who { display: flex; flex-direction: column; min-width: 0; }
.admins__who b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; }
.admins__who small { color: var(--ink-3); font-size: 13px; line-height: 18px; }
.admins__form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.admins__form .field { align-self: stretch; }

/* Onay penceresi */
.confirm { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); animation: fade-in .14s ease-out; }
.confirm__box { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; border-radius: var(--r-card); background: var(--surface); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-3); animation: pop-in .18s var(--ease); }
.confirm__box h2 { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.confirm__box p { margin: 0; color: var(--ink-2); line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
.confirm__box .field { margin-top: 6px; }
.confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Bildirim */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: var(--r); background: var(--ink); color: #FFFFFF; font-size: 13px; line-height: 18px; font-weight: 500; box-shadow: var(--shadow-2); animation: toast-in .2s var(--ease); }
.toast--error { background: var(--bad-ink); }
.toast--hide { display: none; }
.toast__action { min-height: 28px; padding: 0 8px; margin: -4px -8px -4px 0; border: 0; border-radius: 6px; background: transparent; color: #93C5FD; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .12s; }
.toast__action:hover { background: rgba(255, 255, 255, .12); }
.toast__action:focus-visible { outline-color: #FFFFFF; outline-offset: 0; }

/* Geniş ekranda başlık satırı kaydırırken üstte kalır. Bağlantı şeridi açıkken onun altına iner. */
@media (min-width: 1000px) {
  .scroll { overflow: visible; }
  .table { min-width: 0; }
  .table th { position: sticky; top: 0; z-index: 3; }
  #app:has(.banner:not([hidden])) .table th { top: 35px; }
}

/* Dokunmatikte her hedef en az 44px; yazı alanı iOS'ta yakınlaşmasın diye 16px. */
@media (pointer: coarse), (max-width: 820px) {
  :root { --tab-h: 44px; }
  .btn--sm, .input--sm, .bar__search, .tabs button, .seg button, .status-pick select, .drawer__close, .toast__action, .pass__toggle { min-height: 44px; }
  .btn--sm { height: 44px; }
  .drawer__close { width: 44px; }
  .pass__toggle { top: 0; right: 0; }
  .toast__action { margin-top: -8px; margin-bottom: -8px; }
  .fold > summary { min-height: 48px; }
}
@media (pointer: coarse) {
  .input, .input--sm { font-size: 16px; }
}

/* Dar ekranda tablo kart düzenine döner; sayfada yatay kaydırma olmaz. İlk kayıt ekranın üst yarısında başlar. */
@media (max-width: 820px) {
  :root { --gutter: 16px; --edge: 16px; }
  html { scroll-padding-top: 8px; }
  .main { padding: 12px 16px 24px; gap: 12px; }
  .top { gap: 12px; }
  .top__user { display: none; }
  .tabs { margin-right: auto; gap: 2px; }
  .tabs button { padding: 0 10px; }
  .tabs button[aria-pressed="true"]::after { left: 10px; right: 10px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi[data-tile="all"] { display: none; }
  .kpi { padding: 8px 10px; gap: 0; }
  .kpi b { order: -1; font-size: 20px; line-height: 26px; }
  .kpi span { display: block; font-size: 12px; line-height: 15px; }
  .kpi span::before { display: none; }
  .bar { gap: 8px; padding: 10px 12px 8px; }
  .bar__search { flex-basis: 100%; }
  /* Süzgeçler tek satır, parmakla kayar; yanlardaki boşluk kartın kenarına kadar uzar */
  .bar .seg { display: flex; flex-wrap: nowrap; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; gap: 6px; overflow-x: auto; border-radius: 0; background: transparent; scrollbar-width: none; }
  .bar .seg::-webkit-scrollbar { display: none; }
  .bar .seg button { flex: none; padding: 0 12px; border-radius: var(--r); background: var(--surface-3); }
  .bar .seg button:focus-visible { outline-offset: -2px; }
  .bar .seg button[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
  .summary { padding: 0 12px 8px 16px; min-height: 44px; }
  .bar__end { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .bar__end .input--sm { flex: 0 1 auto; min-width: 0; }
  .scroll { overflow: visible; }
  .table { display: block; min-width: 0; }
  .table tbody { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: grid; grid-template-columns: minmax(112px, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .table td { display: block; min-width: 0; padding: 0 !important; border: 0; }
  .table td:empty { display: none; }
  .table td.empty { grid-column: 1 / -1; padding: 40px 16px !important; }
  .table tr[data-id] { position: relative; transition: background-color .1s; }
  .table tbody tr[data-id]:hover td { background: transparent; } /* Kartta boşluklar hücre hücre boyanmasın */
  .table tbody tr[data-id]:hover, .table tbody tr[data-id]:active { background: var(--surface-2); }
  .row__open::after { content: ""; position: absolute; inset: 0; }
  .row__open:focus-visible { outline: none; }
  .row__open:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
  .row__call, .status-pick { position: relative; z-index: 1; }
  /* Ad ve iş üst satırda; site adı tüm genişliği kullanır. */
  .table td.cell-name { display: contents; }
  .row__open { grid-column: 1; grid-row: 1; align-self: center; }
  .cell-name small { grid-column: 1 / -1; grid-row: 2; margin-top: -5px; }
  .cell-task { grid-column: 2; grid-row: 1; display: flex !important; flex-direction: row-reverse; align-items: center; gap: 8px; }
  .cell-contact { grid-column: 1 / -1; grid-row: 3; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .cell-contact .row__phone, .cell-contact small { grid-column: 1; }
  .row__call { display: inline-flex; grid-column: 2; grid-row: 1 / span 2; min-width: 72px; border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; box-shadow: none; }
  .row__call:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
  .cell-status { grid-column: 1; grid-row: 4 / span 2; align-self: center; }
  .status-pick { margin: 0 0 0 -8px; }
  .cell-link { grid-column: 2; grid-row: 4; display: flex !important; flex-direction: column; align-items: flex-end; text-align: right; }
  .cell-link small { padding-left: 0; }
  .cell-date { grid-column: 2; grid-row: 5; margin-top: -6px; line-height: 18px; }
  .cell-date::before { content: "Kayıt: "; }
  .empty .btn { display: flex; margin: 0 auto; }
  .pager { padding: 8px 12px 8px 16px; }
  .drawer__panel { max-width: none; padding: 0 16px 16px; }
  .drawer__head { margin: 0 -16px; padding: 8px 8px 10px 16px; }
  .drawer__head h2 { margin-top: 4px; }
  .drawer .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .drawer .seg button { grid-column: span 2; padding: 0 6px; }
  .drawer .seg button:nth-child(n + 4) { grid-column: span 3; }
  .settings { max-width: none; }
  .confirm__actions .btn { flex: 1 1 100%; }
  .toast { bottom: 16px; }
}

@media (max-width: 560px) {
  #export { flex: none; width: 44px; padding: 0; font-size: 0; gap: 0; } /* Yazı ekran okuyucuda kalır */
  .card--pad { padding: 16px; }
  .login__card { padding: 24px 20px; }
  .top__brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .next { grid-template-columns: minmax(0, 1fr); }
  .next .btn { grid-column: 1; grid-row: auto; margin-top: 8px; width: 100%; }
  .contact .row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .row:first-child .btn--primary { grid-column: 1 / -1; }
  .contact .row:last-child { grid-template-columns: minmax(0, 1fr) auto; }
  .contact__mail { grid-column: 1; }
  .settings__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Dokunmatikte üzerine gelme durumu dokunduktan sonra takılı kalmasın. */
@media (hover: none) {
  .tabs button:hover { background: transparent; color: var(--ink-3); }
  .tabs button[aria-pressed="true"]:hover { color: var(--ink); }
  .kpi:not([aria-pressed="true"]):hover { background: transparent; }
  .block .seg button:not([aria-pressed="true"]):hover { background: transparent; color: var(--ink-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .boot::before { animation: boot-out .01s 20s forwards !important; }
}
@media (forced-colors: active) {
  [class*="ico-"]::before, .fold > summary::before, .status-pick::after { forced-color-adjust: none; background: CanvasText; }
  .tabs button[aria-pressed="true"], .seg button[aria-pressed="true"], .kpi[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}