/* Shared report styles */
.report-data-table td {
    padding: 1rem;
}

.report-count-cell {
    width: var(--report-count-cell-width, 140px);
}

.report-count-cell--small {
    --report-count-cell-width: 120px;
}

.report-count-cell--medium {
    --report-count-cell-width: 140px;
}

.report-count-cell--large {
    --report-count-cell-width: 150px;
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(var(--report-summary-columns, 4), minmax(0, 1fr));
    min-height: 82px;
}

.report-summary--four-columns {
    --report-summary-columns: 4;
    --report-summary-tablet-columns: 2;
}

.report-summary--five-columns {
    --report-summary-columns: 5;
    --report-summary-tablet-columns: 3;
}

.report-summary--seven-columns { /* -- 08.10.2026 cck&claude-Opus-5.5 — Saha Etkinlikleri raporu */
    --report-summary-columns: 7;
    --report-summary-tablet-columns: 4;
}

.report-summary--six-columns {
    --report-summary-columns: 6;
    --report-summary-tablet-columns: 3;
}

.report-summary__item {
    align-items: center;
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    gap: .85rem;
    padding: 1rem 1.25rem;
}

.report-summary__item:last-child {
    border-right: 0;
}

.report-summary__icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.report-summary__label {
    color: var(--bs-secondary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: .25rem;
}

.report-summary__value {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.report-summary__value .badge,
.report-summary__value .font-small-2 {
    font-size: .65rem;
    font-weight: 600;
    padding: .25rem .35rem;
}

.report-summary__value .font-small-2 {
    border-radius: .25rem;
    display: inline-flex;
}

.report-summary__value .text-danger {
    background-color: rgba(var(--bs-danger-rgb), .12);
}

.report-summary__value .text-primary {
    background-color: rgba(var(--bs-primary-rgb), .12);
}

.report-summary__value .text-success {
    background-color: rgba(var(--bs-success-rgb), .12);
}

.report-summary__value .text-warning {
    background-color: rgba(var(--bs-warning-rgb), .12);
}

@media (max-width: 1199.98px) {
    .report-summary {
        grid-template-columns: repeat(var(--report-summary-tablet-columns, 2), minmax(0, 1fr));
    }

    .report-summary--four-columns .report-summary__item:nth-child(2n),
    .report-summary--five-columns .report-summary__item:nth-child(3n),
    .report-summary--six-columns .report-summary__item:nth-child(3n),
    .report-summary--seven-columns .report-summary__item:nth-child(4n) {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .report-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-summary__item {
        border-bottom: 1px solid var(--bs-border-color);
        border-right: 0;
    }

    .report-summary--four-columns .report-summary__item:nth-last-child(-n + 2),
    .report-summary--six-columns .report-summary__item:nth-last-child(-n + 2),
    .report-summary--five-columns .report-summary__item:last-child,
    .report-summary--seven-columns .report-summary__item:last-child {
        border-bottom: 0;
    }
}

/* Source-agent report */
.source-agent-report__source-row {
    background-color: var(--bs-default) !important;
}

.source-agent-report__source-name {
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
}

.source-agent-collapse,
.source-agent-collapse.collapsing {
    transition: none !important;
}

.source-agent-collapse.collapsing {
    height: auto !important;
}

.source-agent-report-table tr.source-agent-report__agent-detail-row > td {
    background-color: var(--bs-light);
}

.source-agent-detail-table {
    width: 100%;
}

.source-agent-detail-table th,
.source-agent-detail-table td {
    background-color: transparent;
    padding: .75rem 1rem;
}

.source-agent-toggle .fa-chevron-down {
    display: none;
}

.source-agent-toggle:not(.collapsed) .fa-chevron-right {
    display: none;
}

.source-agent-toggle:not(.collapsed) .fa-chevron-down {
    display: inline-block;
}

.source-agent-report__agent-name {
    padding-left: 3.25rem !important;
}

.source-agent-report__agent-avatar-placeholder {
    align-items: center;
    background-color: var(--bs-light-secondary);
    border-radius: 50%;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

/* ===================== BEGIN: ManageClientsv2 — Üyeliği Yükselt / üyelik sipariş ekranları (Vuexy) -- 03.06.2026 MK&claude-Opus-4.8 ===================== */
.pp-mc-v2 {
    --pp-head: #5e5873;
    --pp-body: #6e6b7b;
    --pp-muted: #b9b9c3;
    --pp-border: #ebe9f1;
    --bs-primary-rgb: 115,103,240;
}

.pp-mc-v2 .card { border: none; box-shadow: 0 4px 24px 0 rgba(34,41,47,.06); border-radius: .5rem; margin-bottom: 1.5rem; }
.pp-mc-v2 .card-header { padding: 1.25rem 1.5rem .25rem; border: none; }
.pp-mc-v2 .card-header .card-title { color: var(--pp-head); font-weight: 600; font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: .55rem; }
.pp-mc-v2 .card-header .card-subtitle { font-size: .82rem; color: var(--pp-muted); margin-top: .2rem; }
.pp-mc-v2 .card-body { padding: 1.5rem; }
.pp-card-icn { width: 34px; height: 34px; border-radius: .4rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb),.12); color: var(--bs-primary); font-size: .95rem; }

/* Salt-okunur abonelik bilgi tablosu */
.pp-info-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pp-info-table tr td { padding: .85rem 1.25rem; font-size: .9rem; border-bottom: 1px solid var(--pp-border); }
.pp-info-table tr:last-child td { border-bottom: none; }
.pp-info-table tr:nth-child(odd) { background: #fafafc; }
.pp-info-table td.lbl { color: var(--pp-body); font-weight: 500; width: 40%; }
.pp-info-table td.val { color: var(--pp-head); font-weight: 600; }

/* Üyelik tier segmented */
.pp-field-label { font-size: .78rem; font-weight: 600; color: var(--pp-body); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .45rem; display: block; }
.pp-tier-group { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.pp-tier { position: relative; border: 1.5px solid var(--pp-border); border-radius: .5rem; padding: .85rem 1rem; cursor: pointer; background: #fff; transition: all .18s ease; text-align: left; }
.pp-tier:hover { border-color: rgba(var(--bs-primary-rgb),.45); }
.pp-tier .t-name { font-weight: 600; color: var(--pp-head); font-size: .95rem; display: block; }
.pp-tier .t-desc { font-size: .75rem; color: var(--pp-muted); }
.pp-tier.active { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.08); box-shadow: 0 4px 14px -6px rgba(var(--bs-primary-rgb),.5); }
.pp-tier.active .t-name { color: var(--bs-primary); }
/* -- 10.06.2026 MK&claude-Opus-4.8 check ikonu üyelik tipi yazısıyla aynı hizada (dikey ortalı) */
.pp-tier .t-check { position: absolute; top: 50%; right: .7rem; transform: translateY(-50%); color: var(--bs-primary); opacity: 0; transition: opacity .18s; }
.pp-tier.active .t-check { opacity: 1; }

.pp-mc-v2 .form-label { font-size: .78rem; font-weight: 600; color: var(--pp-body); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.pp-mc-v2 .form-select, .pp-mc-v2 .form-control { font-size: .92rem; color: var(--pp-head); }

/* Seçilen paket satırı (vurgulu line-item) */
.pp-line { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--pp-border); border-radius: .5rem; background: #fff; transition: all .18s ease; }
.pp-line.pp-line-package { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.05); border-left: 3px solid var(--bs-primary); }
.pp-line .l-main { flex: 1; min-width: 0; }
.pp-line .l-name { font-weight: 600; color: var(--pp-head); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.pp-line .l-unit { font-size: .8rem; color: var(--pp-muted); margin-top: .15rem; }
.pp-line .l-total { font-weight: 700; color: var(--pp-head); font-size: 1rem; min-width: 120px; text-align: right; white-space: nowrap; }

/* Miktar stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--pp-border); border-radius: .4rem; overflow: hidden; background: #fff; height: 38px; }
.qty button { border: none; background: #f8f7fa; color: var(--pp-body); width: 34px; height: 100%; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s,color .15s; }
.qty button:hover { background: rgba(var(--bs-primary-rgb),.12); color: var(--bs-primary); }
.qty button:disabled { opacity: .4; cursor: not-allowed; background: #f8f7fa; color: var(--pp-muted); }
.qty input { border: none; width: 46px; height: 100%; text-align: center; font-weight: 600; color: var(--pp-head); font-size: .92rem; background: #fff; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Ek hizmet satırları */
.pp-svc { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.15rem; border: 1px solid var(--pp-border); border-radius: .5rem; background: #fff; margin-bottom: .65rem; transition: all .18s ease; cursor: pointer; }
.pp-svc:hover { border-color: rgba(var(--bs-primary-rgb),.4); box-shadow: 0 2px 10px -4px rgba(var(--bs-primary-rgb),.3); }
.pp-svc.is-on { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.05); border-left: 3px solid var(--bs-primary); }
.pp-svc .form-check { margin: 0; min-height: auto; padding-left: 0; }
.pp-svc .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; float: none; }
.pp-svc .s-main { flex: 1; min-width: 0; }
.pp-svc .s-name { font-weight: 500; color: var(--pp-head); font-size: .92rem; }
.pp-svc .s-unit { font-size: .78rem; color: var(--pp-muted); margin-top: .1rem; }
.pp-svc .s-qty { opacity: .4; pointer-events: none; transition: opacity .18s; }
.pp-svc.is-on .s-qty { opacity: 1; pointer-events: auto; }
.pp-svc .s-total { font-weight: 600; color: var(--pp-head); font-size: .95rem; min-width: 115px; text-align: right; white-space: nowrap; }
.pp-svc:not(.is-on) .s-total { color: var(--pp-muted); }

.pp-svc-period { font-size: .65rem; font-weight: 600; padding: .1rem .45rem; border-radius: 3px; text-transform: uppercase; letter-spacing: .02em; margin-left: .4rem; background: rgba(var(--bs-primary-rgb),.12); color: var(--bs-primary); }

/* Sipariş özeti */
.pp-summary { position: sticky; top: 1.5rem; }
.pp-summary .card-body { padding: 1.35rem 1.5rem; }

.pp-rate-wrap { margin-bottom: 1.1rem; }
.pp-rate-row { display: flex; align-items: center; gap: .5rem; }
.pp-rate-row .rate-prefix { font-size: .82rem; color: var(--pp-body); white-space: nowrap; }
.pp-rate-row .input-group { flex: 1; }
.pp-rate-hint { font-size: .72rem; color: var(--pp-muted); margin-top: .35rem; display: flex; align-items: center; gap: .35rem; }
.pp-rate-hint a { color: var(--bs-primary); font-weight: 600; cursor: pointer; }

.pp-sum-divider { height: 1px; background: var(--pp-border); margin: 1.1rem 0; }
.pp-sum-lines { font-size: .84rem; }
.pp-sum-line { display: flex; justify-content: space-between; gap: .75rem; padding: .32rem 0; color: var(--pp-body); }
.pp-sum-line .sl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sum-line .sl-name .q { color: var(--pp-muted); font-weight: 600; }
.pp-sum-line .sl-amt { font-weight: 600; color: var(--pp-head); white-space: nowrap; }
.pp-sum-empty { color: var(--pp-muted); font-size: .82rem; font-style: italic; text-align: center; padding: .5rem 0; }

.pp-totrow { display: flex; justify-content: space-between; align-items: center; padding: .32rem 0; font-size: .88rem; color: var(--pp-body); }
.pp-totrow .v { font-weight: 600; color: var(--pp-head); }
.pp-disc-group { width: 170px; flex: 0 0 auto; }
.pp-disc-group .form-control { text-align: right; height: 34px; font-size: .82rem; flex: 1 1 auto; min-width: 0; }
.pp-disc-group .form-select { height: 34px; font-size: .78rem; font-weight: 600; color: var(--pp-body); flex: 0 0 84px; width: 84px; padding: .25rem .5rem; background-position: right .4rem center; }
.pp-mc-v2 .pp-vat-select { display: inline-block; width: auto; min-width: 64px; height: 30px; padding: .15rem 1.4rem .15rem .5rem; font-size: .78rem; font-weight: 600; color: var(--pp-body); background-position: right .35rem center; }
.pp-grand { display: flex; justify-content: space-between; align-items: flex-end; margin-top: .4rem; padding-top: .9rem; border-top: 2px solid var(--pp-border); }
.pp-grand .g-lbl { font-weight: 600; color: var(--pp-head); font-size: .95rem; }
.pp-grand .g-amt { font-weight: 700; color: var(--bs-primary); font-size: 1.6rem; line-height: 1.1; }
.pp-grand-try { text-align: right; font-size: .75rem; color: var(--pp-muted); margin-top: .15rem; }

/* -- 10.06.2026 MK&claude-Opus-4.8 Düzenlenebilir Genel Toplam: kenarlıksız (contenteditable), tasarım birebir aynı;
   yalnız hover/focus'ta küçük bir alt çizgi düzenlenebilir olduğunu belli eder (fark indirime tutar olarak yazılır). */
.pp-mc-v2 .pp-grand-edit { cursor: text; outline: none; }
.pp-mc-v2 .pp-grand-edit:hover { text-decoration: underline dotted rgba(var(--bs-primary-rgb), .45); text-underline-offset: 5px; }
.pp-mc-v2 .pp-grand-edit:focus { text-decoration: underline dashed rgba(var(--bs-primary-rgb), .65); text-underline-offset: 5px; }

.pp-actions { display: flex; gap: .65rem; margin-top: 1.25rem; }
.pp-actions .btn { flex: 1; font-weight: 600; }
.pp-vat-note { font-size: .7rem; color: var(--pp-muted); text-align: center; margin-top: .7rem; }

@media (max-width:991px) {
    .pp-summary { position: static; }
    .pp-tier-group { grid-template-columns: 1fr; }
}

@media (max-width:575px) {
    .pp-line, .pp-svc { flex-wrap: wrap; }
    .pp-line .l-total, .pp-svc .s-total { min-width: auto; text-align: left; }
}

/* -- 08.06.2026 MK&claude-Opus-4.8 PpClientOrders/Edit salt-okunur sipariş kalemleri tablosu */
.pp-edit-lines { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.pp-edit-lines thead th { padding: .55rem .75rem; text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-body); border-bottom: 1px solid var(--pp-border); }
.pp-edit-lines tbody td { padding: .7rem .75rem; border-bottom: 1px solid var(--pp-border); color: var(--pp-head); }
.pp-edit-lines tbody tr:last-child td { border-bottom: none; }
.pp-edit-lines .currency-symbol { color: var(--pp-body); font-weight: 500; }

/* ============================================================================
   -- 17.06.2026 ek&claude-Opus-4.8 — Meta Lead Ads "Reklam Kanalları" (rk-*)
   Tasarım paketi (reklam.css) site.css'e taşındı. Token'lar .rk-wrap'e scope'lu;
   .dark-layout override ile light+dark. Marka renkleri (FB mavi) literal kalır.
   ============================================================================ */
.rk-wrap {
    --surface: #fff;
    --fg-heading: var(--pp-head, #5e5873);
    --fg-muted: var(--pp-muted, #6e6b7b);
    --border: var(--pp-border, #ebe9f1);
    --border-input: var(--pp-border, #d8d6de);
    --bg-app: #f8f8f8;
    --radius-card: .5rem;
    --radius-input: .357rem;
    --radius-sm: .25rem;
    --radius-pill: 50rem;
    --shadow-card: 0 .25rem 1.125rem -.25rem rgba(34, 41, 47, .1);
    --shadow-dropdown: 0 5px 25px rgba(34, 41, 47, .1);
    --font-sans: inherit;
    --primary: #7367f0;
    --success: #28c76f;
    --warning: #ff9f43;
    --danger: #ea5455;
    --secondary: #82868b;
    --info: #00cfe8;
    --light-primary: rgba(115, 103, 240, .12);
    --light-success: rgba(40, 199, 111, .12);
    --light-warning: rgba(255, 159, 67, .12);
    --light-danger: rgba(234, 84, 85, .12);
    --light-info: rgba(0, 207, 232, .12);
    --label-primary: rgba(115, 103, 240, .12);
    --label-success: rgba(40, 199, 111, .12);
    --label-warning: rgba(255, 159, 67, .16);
    --label-danger: rgba(234, 84, 85, .14);
    --label-secondary: rgba(130, 134, 139, .12);
}
.dark-layout .rk-wrap, .dark-style .rk-wrap {
    --surface: #283046;
    --fg-heading: #d0d2d6;
    --fg-muted: #b4b7bd;
    --border: #3b4253;
    --border-input: #404656;
    --bg-app: #161d31;
}

.rk-desc { color: var(--fg-muted); font-size: .95rem; margin: .15rem 0 1rem; max-width: 60ch; }

/* Facebook mavi birincil buton (OAuth aksiyonu) */
.btn-fb { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn-fb:hover { color: #fff; box-shadow: 0 8px 25px -8px #1877f2; }

/* Özet şeridi */
.rk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }
.rk-stat { display: flex; align-items: center; gap: 1rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.15rem 1.3rem; }
.rk-stat .si { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.rk-stat .num { font-size: 1.55rem; font-weight: 700; color: var(--fg-heading); line-height: 1; }
.rk-stat .lbl { font-size: .82rem; color: var(--fg-muted); margin-top: .25rem; }

/* Kaynak (FB / IG) işareti */
.rk-src { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 1.05rem; }
.rk-src.fb { background: #1877f2; }
.rk-src.ig { background: linear-gradient(45deg, #f9ce34 5%, #ee2a7b 45%, #6228d7 95%); }
.rk-srcbadge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .28em .6em; border-radius: var(--radius-sm); }
.rk-srcbadge.fb { background: #e7f0fe; color: #1877f2; }
.rk-srcbadge.ig { background: #fdeaf3; color: #c1338a; }

/* Kanal kartı */
.rk-list { display: flex; flex-direction: column; gap: 1rem; }
/* -- 20.07.2026 ek&claude-Opus-4.8 — sarı/kırmızı kart border'ları kaldırıldı (PlanPorts'ta bu desen yok);
   durum artık yalnız badge + standart alert (alert-danger/alert-warning) ile anlatılır. */
.rk-channel { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--border); padding: 1.25rem 1.4rem; transition: box-shadow .15s; }
.rk-channel.muted { opacity: .82; }
.rk-channel:hover { box-shadow: 0 .4rem 1.5rem rgba(75, 70, 92, .14); }
.rk-ch-top { display: flex; align-items: flex-start; gap: 1rem; }
.rk-ch-id { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.rk-ch-name { font-size: 1.1rem; font-weight: 600; color: var(--fg-heading); line-height: 1.2; }
.rk-ch-sub { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; flex-wrap: wrap; }
.rk-ch-spacer { flex: 1; }
.rk-ch-statusbadges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.rk-ch-info { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.rk-health { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; }
.rk-health.ok { color: var(--success); }
.rk-health.danger { color: var(--danger); }
.rk-meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--fg-muted); }
.rk-ch-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; flex-wrap: wrap; }
.rk-warn { display: flex; align-items: flex-start; gap: .65rem; background: var(--label-warning); color: #a96a1c; border-radius: var(--radius-input); padding: .75rem 1rem; font-size: .9rem; margin-top: 1rem; }
.rk-warn i { color: var(--warning); font-size: 1.05rem; margin-top: .05rem; flex: none; }
.rk-warn a { color: #a96a1c; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.rk-warn .ww { flex: 1; }
.rk-reauth { display: flex; align-items: center; gap: .65rem; background: var(--label-danger); color: var(--danger); border-radius: var(--radius-input); padding: .75rem 1rem; font-size: .9rem; margin-top: 1rem; }
.rk-reauth i { font-size: 1.05rem; flex: none; }
.rk-reauth .ww { flex: 1; }

/* Boş durum */
.rk-empty { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 3.2rem 1.5rem 3rem; text-align: center; }
.rk-empty-icon { width: 84px; height: 84px; border-radius: 22px; background: var(--light-primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; margin: 0 auto 1.3rem; }
.rk-empty h3 { font-size: 1.35rem; color: var(--fg-heading); margin: 0 0 .5rem; }
.rk-empty p { color: var(--fg-muted); margin: 0 auto 1.6rem; max-width: 46ch; }
.rk-steps { display: flex; align-items: stretch; justify-content: center; gap: 0; margin: 2.2rem auto 0; max-width: 640px; }
.rk-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 .5rem; position: relative; }
.rk-step .sn { width: 40px; height: 40px; border-radius: 50%; background: var(--light-primary); color: var(--primary); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.rk-step .st { font-weight: 600; color: var(--fg-heading); font-size: .95rem; }
.rk-step .sd { font-size: .82rem; color: var(--fg-muted); line-height: 1.4; }
.rk-step:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: var(--border); }

/* Formlar ekranı */
.rk-pagebar { display: flex; align-items: center; gap: 1rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.05rem 1.3rem; margin-bottom: 1.3rem; }
.rk-form { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid transparent; padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 1.3rem; transition: box-shadow .15s, border-color .15s; }
.rk-form.attention { border-color: #ffe2bf; }
.rk-form:hover { box-shadow: 0 .4rem 1.5rem rgba(75, 70, 92, .14); }
.rk-form-main { min-width: 0; flex: 1; }
.rk-form-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rk-form-title .nm { font-size: 1.05rem; font-weight: 600; color: var(--fg-heading); }
.rk-form-meta { display: flex; align-items: center; gap: 1.2rem; margin-top: .5rem; font-size: .86rem; color: var(--fg-muted); flex-wrap: wrap; }
.rk-mapstate { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; min-width: 190px; }
.rk-mapchip { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; padding: .42em .8em; border-radius: var(--radius-pill); }
.rk-mapchip.done { background: var(--label-success); color: var(--success); }
.rk-mapchip.pending { background: var(--label-warning); color: #c47d1c; }
.rk-mapchip.none { background: var(--label-secondary); color: var(--secondary); }
.rk-prog { display: flex; gap: 3px; flex-wrap: wrap; }
.rk-prog span { width: 16px; height: 6px; border-radius: 3px; background: var(--border); }
.rk-prog span.fill { background: var(--success); }
.rk-prog span.wait { background: var(--warning); }

/* Eşleme ekranı — tek-kart (19.06.2026 ek&claude-Opus-4.8): satırlar düz/ayraçlı, kart-içi */
.rk-map-summary { display: flex; align-items: center; gap: .7rem; }
.rk-map-summary .ms-text { font-size: .82rem; color: var(--fg-muted); white-space: nowrap; }
.rk-map-summary .ms-bar { width: 120px; height: 7px; border-radius: 5px; background: var(--bg-app); overflow: hidden; display: flex; }
.rk-map-summary .ms-bar i { display: block; height: 100%; }
.rk-map-summary .ms-bar i.done { background: var(--success); }
.rk-map-summary .ms-bar i.pending { background: var(--warning); }
.rk-map-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 0 1.2rem; padding: .2rem .2rem .55rem; }
.rk-map-head span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.rk-map-head span.r { grid-column: 2; }
.rk-maplist { display: flex; flex-direction: column; gap: 0; }
/* oklar kaldırıldı → 3 kolon: Meta Sorusu | Sistem Alanı(select) | Otomatik(120px) */
.rk-maprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 0 1.2rem; align-items: center; border-bottom: 1px solid var(--border); padding: .9rem .2rem; transition: background .15s, opacity .15s; }
.rk-maprow:last-child { border-bottom: 0; }
.rk-maprow:hover { background: var(--bg-hover); }
.rk-maprow.automapped { background: var(--label-success); }
.rk-maprow.pending { box-shadow: inset 3px 0 0 var(--warning); }
.rk-maprow.ignored { opacity: .55; }
.rk-q { min-width: 0; }
.rk-q-label { font-size: 1rem; font-weight: 600; color: var(--fg-heading); }
.rk-q-sample { font-size: .82rem; color: var(--fg-muted); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.rk-maprow.ignored .rk-q-label { text-decoration: line-through; }
.rk-q-meta { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.rk-q-key { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .76rem; color: var(--fg-muted); background: var(--bg-app); border: 1px solid var(--border); border-radius: 4px; padding: .08rem .4rem; }
.rk-qtype { font-size: .74rem; font-weight: 600; padding: .25em .55em; border-radius: var(--radius-sm); background: var(--label-primary); color: var(--primary); }
.rk-qtype.custom { background: var(--label-secondary); color: var(--secondary); }
.rk-target { min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.rk-target .form-select { max-width: 360px; }
/* Sabit Değerler — eşleştirme satırlarıyla AYNI grid hizası (19.06.2026 ek&claude-Opus-4.8) */
.rk-const-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 0 1.2rem !important; align-items: center; margin: 0 !important; padding: .7rem .2rem; border-bottom: 1px solid var(--border); }
.rk-const-row .select2-container { width: 100% !important; }                          /* hedef select → col1 (mapping etiket hizası) */
.rk-const-row .rk-const-value { width: 100%; max-width: none !important; min-width: 0; }   /* değer → col2 (mapping select hizası) */
.rk-const-locked .rk-const-lockedlabel { min-width: 0; }                               /* kilitli etiket → col1 */
.rk-const-row .rk-const-remove { justify-self: start; }                                /* sil → col3 (rozet hizası) */
.rk-add-const { margin-top: .9rem; }
/* PoolDetails realtime — adım değişince flash (19.06.2026 ek&claude-Opus-4.8) */
@keyframes rkFlash { 0% { background: var(--label-primary); } 100% { background: transparent; } }
.rka-tl-step.rk-flash { animation: rkFlash 1.3s ease-out; border-radius: 8px; }
.rk-target-row .select2-container { width: 100% !important; }                          /* soru select kolonu doldursun */
@media (max-width: 992px) {
    .rk-const-row { grid-template-columns: 1fr; gap: .5rem !important; }               /* dar ekranda tek kolon (mapping ile aynı) */
}
.rk-auto-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--success); font-weight: 600; }
/* "Otomatik" rozeti — yeşil pill, satırın en sağında (4. grid hücresi) */
.rk-auto-badge { justify-self: end; background: var(--label-success); border-radius: var(--radius-pill); padding: .3em .75em; white-space: nowrap; }
/* -- 19.06.2026 ek&claude-Opus-4.8 — tek-select hedef satırı + ipuçları + çift-seçim uyarısı + kilitli sabit */
.rk-target-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rk-target-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; }
.rk-hint-desc { color: var(--fg-muted); }
.rk-hint-desc i { color: var(--primary); }
.rk-hint-dup { color: #c47d1c; font-weight: 600; }
.rk-hint-dup i { color: var(--warning); }
.rk-maprow.rk-dup { box-shadow: inset 3px 0 0 var(--warning); }
.rk-const-locked .rk-const-lockedlabel { display: inline-flex; align-items: center; gap: .4rem; min-width: 150px; font-weight: 600; color: var(--fg-heading); }
.rk-const-locked .rk-const-lockedlabel i { color: var(--fg-muted); font-size: .8rem; }
/* tek-kart kabuğu + bölümler (19.06.2026 ek&claude-Opus-4.8) */
.rk-map-card { margin-bottom: 0; }
.rk-map-card .rka-card-head { flex-wrap: wrap; gap: .6rem 1rem; }
.rk-map-card .ch-right { margin-left: auto; }
.rk-namewarn { display: flex; align-items: center; gap: .6rem; background: var(--label-warning); color: #a96a1c; border-radius: var(--radius-input); padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1rem; }
.rk-namewarn i { color: var(--warning); }
.rk-unmapped-default { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0 .2rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem; }
.rk-unmapped-default .ud-label { font-size: .85rem; font-weight: 600; color: var(--fg-heading); }
.rk-section-div { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.rk-section-div .sd-title { font-size: .95rem; font-weight: 600; color: var(--fg-heading); display: inline-flex; align-items: center; gap: .45rem; }
.rk-section-div .sd-title i { color: var(--primary); }
.rk-section-div .sd-spacer { flex: 1; }
.rk-footbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: 0 -4px 20px rgba(75, 70, 92, .08); border: 1px solid var(--border); padding: .9rem 1.3rem; margin-top: 1.4rem; z-index: 2; }
.rk-footbar .fb-note { font-size: .85rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: .45rem; }
.rk-footbar .fb-actions { display: flex; gap: .6rem; }

/* -- 23.06.2026 ek&claude-Opus-4.8 — Kaynak & Kampanya kartı (mod + canlı önizleme) */
.rk-sc-card { border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--label-primary); padding: .9rem 1.1rem; margin: 0 0 1.1rem; }
.rk-sc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rk-sc-title { font-size: .92rem; font-weight: 600; color: var(--fg-heading); display: inline-flex; align-items: center; gap: .45rem; }
.rk-sc-title i { color: var(--primary); }
.rk-sc-head .rk-sc-edit, .rk-sc-head .rk-sc-close { margin-left: auto; }
.rk-sc-row { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .55rem .2rem; border-top: 1px solid var(--border); }
.rk-sc-rowlabel { display: inline-flex; align-items: center; gap: .4rem; min-width: 150px; font-weight: 600; color: var(--fg-heading); }
.rk-sc-rowlabel i { color: var(--fg-muted); font-size: .8rem; }
.rk-sc-summary { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .88rem; }
.rk-sc-summary .rk-sc-modelabel { color: var(--fg-muted); }
.rk-sc-summary .rk-sc-arrow { color: var(--fg-muted); font-size: .75rem; }
.rk-sc-summary .rk-sc-prev { font-weight: 600; color: var(--fg-heading); }
.rk-sc-controls { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.rk-sc-preview { font-size: .82rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: .35rem; }
.rk-sc-preview i { color: var(--primary); }
.rk-sc-preview .rk-sc-prev { color: var(--success); font-weight: 600; }
.rk-sc-note { width: 100%; font-size: .8rem; color: var(--fg-muted); display: flex; align-items: center; gap: .4rem; padding-top: .5rem; }
.rk-sc-note i { color: var(--primary); }
@media (max-width: 992px) {
    .rk-sc-row { flex-direction: column; align-items: flex-start; }
}

/* Modal */
.rk-modal-overlay { position: fixed; inset: 0; background: rgba(34, 41, 47, .45); display: none; align-items: center; justify-content: center; z-index: 1090; padding: 1rem; }
.rk-modal-overlay.open { display: flex; }
.rk-modal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-dropdown); width: 460px; max-width: 100%; overflow: hidden; }
.rk-modal-body { padding: 1.6rem 1.5rem 1.3rem; text-align: center; }
.rk-modal-body .mic { width: 64px; height: 64px; border-radius: 50%; background: var(--light-danger); color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.1rem; }
.rk-modal-body h3 { font-size: 1.2rem; color: var(--fg-heading); margin: 0 0 .5rem; }
.rk-modal-body p { color: var(--fg-muted); margin: 0; font-size: .92rem; }
.rk-modal-foot { display: flex; gap: .7rem; padding: 1.1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-app); }
.rk-modal-foot .btn { flex: 1; justify-content: center; }

@media (max-width: 992px) {
    .rk-ch-top { flex-wrap: wrap; }
    .rk-ch-statusbadges { justify-content: flex-start; width: 100%; }
    .rk-ch-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .rk-form { flex-direction: column; align-items: stretch; }
    .rk-mapstate { align-items: flex-start; min-width: 0; }
    .rk-map-head { display: none; }
    .rk-maprow { grid-template-columns: 1fr; gap: .9rem; }
    .rk-map-summary { flex-wrap: wrap; }
    .rk-map-summary .ms-bar { order: 3; max-width: none; width: 100%; }
    /* -- 17.06.2026 ek&claude-Opus-4.8 — mobil: üst bar + alt bar sarmalı */
    .rk-pagebar { flex-wrap: wrap; }
    .rk-footbar { flex-wrap: wrap; gap: .7rem; }
    .rk-footbar .fb-actions { flex-wrap: wrap; align-items: center; }
    .rk-target .form-select { max-width: 100%; }
}
@media (max-width: 576px) {
    /* -- 17.06.2026 ek&claude-Opus-4.8 — telefon: dokunma hedefleri tam genişlik */
    .rk-ch-id { width: 100%; }
    .rk-ch-actions .btn { flex: 1 1 auto; justify-content: center; }
    .rk-mapstate { width: 100%; }
    .rk-footbar { position: static; }                 /* küçük ekranda sticky kaldır (klavye/alan sıkışmasın) */
    .rk-footbar .fb-note { display: none; }            /* yardımcı metin gizle */
    .rk-footbar .fb-actions { width: 100%; }
    .rk-footbar .fb-actions .btn { flex: 1 1 auto; justify-content: center; }
    .rk-pagebar .btn { width: 100%; }
}
/* ===================== END: ManageClientsv2 — Üyeliği Yükselt ===================== */

/* ============================================================================
   -- 17.06.2026 ek&claude-Opus-4.8 — Meta Lead Ads "Reklam Kanalları" TEKVITA ADMIN
   (rka-* / zap-*) — Details / PoolList / PoolDetails ekranları.
   Kaynak: design_handoff_reklam_kanallari_admin/.../reklam-admin.css (global :root +
   [data-theme="dark"]) → mevcut Faz 6 deseni gereği .rk-wrap scope + .dark-layout'a remap.
   Zihinsel model: her havuz satırı = bir ZAP. YEŞİL=lead oluştu · KIRMIZI=hata · GRİ=beklemede.
   Admin view'ları içeriği <div class="rk-wrap rka-wrap"> ile sarmalar.

   ── SINIF SÖZLÜĞÜ (kısaltmalar — gelecekte okurken referans) ───────────────
   kv        = key-value satırı   · kv-key = etiket (sol)  · kv-value = değer (sağ)
   zap-chip  = durum rozeti (ok/err/wait)   · zap-dot = küçük durum noktası
   zap-count = form özeti sayacı  · num = sayı            · label = açıklama
   rka-counter (c-ic/c-n/c-l) = PoolList üst özet sayacı: ikon / sayı / etiket
   zap-row (zr-*) = havuz satırı  · zr-accent=renk şerit · zr-time/target/form/
                    page/lead/status/actions/tenant · zr-err-msg=kısa hata + tooltip
   rka-formrow (fr-*) = form satırı: fr-ic=ikon · fr-name/fr-id · fr-go=chevron
   rka-sig (sağlık kartı): sig-ic/sig-label/sig-state/sig-meta/sig-fix
   rka-result (res-*) = zap sonuç başlığı: res-ic/res-main/res-title/res-sub/res-err/res-actions
   rka-timeline (tl-*) = lead yolculuğu: tl-node/tl-body/tl-head/tl-title/tl-time/tl-desc
   rka-fold = katlanır panel  · rka-pre = JSON bloğu (jk/js/jn/jb = key/string/number/bool renk)
   rka-pii-item: pii-key / pii-value (KVKK on-demand veri)
   ──────────────────────────────────────────────────────────────────────────
   ============================================================================ */

/* 1) Token augment — rka-*/zap-*'ın ihtiyaç duyduğu, .rk-wrap'te olmayan token'lar (additive). */
.rk-wrap {
    --bg-surface: var(--surface);   /* handoff "--bg-surface" → Faz 6 "--surface" alias */
    --bg-hover: #f6f6f9;
    --bg-striped: #fafafc;
    --fg-body: #6f6b7d;
    --fg-on-accent: #fff;
    --zap-ok: var(--success);     --zap-ok-bg: var(--label-success);
    --zap-err: var(--danger);     --zap-err-bg: var(--label-danger);
    --zap-wait: #8b8a98;          --zap-wait-bg: var(--label-secondary);
}
.dark-layout .rk-wrap, .dark-style .rk-wrap {
    --bg-hover: #242b3d;
    --bg-striped: #242b3d;
    --fg-body: #b4b7bd;
    --zap-wait: #9aa0b3;
}

.rka-wrap { width: 100%; }   /* -- 17.06.2026 ek&claude-Opus-4.8 — tam genişlik (max-width kaldırıldı: kartlar içerik alanını doldursun) */

/* -- 22.06.2026 ek&claude-Opus-4.8 — Reklam Kanalları ekranları: gri "dashboard" (çok kart + gri zemin)
   yerine sistemin standart TEK BEYAZ PANEL görünümü. Wrapper'a .rk-panel eklenir; içteki kart-benzeri
   öğeler "flat" olur (gölge kalkar, ince çerçeveyle bölüm gibi ayrılır); geri butonu panel-içi ayağa
   (.rk-panel-foot) taşınır → standart "geri butonu beyaz kartın içinde" deseni. */
.rk-panel { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem; }
.rk-panel > *:last-child { margin-bottom: 0; }
.rk-panel .rka-result, .rk-panel .rka-card, .rk-panel .rka-fold, .rk-panel .zap-list,
.rk-panel .rka-idcard, .rk-panel .rka-sig, .rk-panel .rka-counter,
.rk-panel .rk-stat, .rk-panel .rk-channel, .rk-panel .rk-empty, .rk-panel .rk-pagebar { box-shadow: none; }
.rk-panel .rka-card, .rk-panel .rka-fold, .rk-panel .zap-list, .rk-panel .rka-idcard,
.rk-panel .rka-counter, .rk-panel .rk-stat, .rk-panel .rk-channel { border: 1px solid var(--border); }
.rk-panel-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); display: flex; gap: .6rem; align-items: center; }
.rk-panel-foot .btn { margin-top: 0 !important; }

/* 2) ZAP DURUM DİLİ — durum çipi + nokta */
.zap-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .34em .68em; border-radius: var(--radius-pill); white-space: nowrap; }
.zap-chip i { font-size: .95em; }
.zap-chip.ok { background: var(--zap-ok-bg); color: var(--zap-ok); }
.zap-chip.err { background: var(--zap-err-bg); color: var(--zap-err); }
.zap-chip.wait { background: var(--zap-wait-bg); color: var(--zap-wait); }
.zap-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.zap-dot.ok { background: var(--zap-ok); }
.zap-dot.err { background: var(--zap-err); }
.zap-dot.wait { background: var(--zap-wait); }

/* 3) SAYFA BAŞLIĞI — aksiyon menüsü (dropdown). divider/label .rka-actions-menu'ye scope'lu (Bootstrap çakışma koruması). */
.rka-actions { position: relative; }
.rka-actions-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; display: none; min-width: 15rem; }
.rka-actions-menu.open { display: block; }
.rka-actions-menu .dropdown-divider { height: 1px; background: var(--border); margin: .4rem 0; }
.rka-actions-menu .dropdown-label { padding: .35rem 1.25rem .15rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }

/* 4) DUAL-RUN UYARISI */
.rka-dualrun { display: flex; align-items: flex-start; gap: .9rem; background: var(--label-danger); border: 1px solid #f3b6b6; border-left: 4px solid var(--danger); border-radius: var(--radius-card); padding: 1rem 1.2rem; margin-bottom: 1.3rem; }
.rka-dualrun .dr-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.rka-dualrun .dr-ic i::before, .rka-dualrun .dr-ic i::after { color: #fff; }
.rka-dualrun .dr-body { flex: 1; min-width: 0; }
.rka-dualrun .dr-title { font-weight: 700; color: var(--danger); font-size: .98rem; }
.rka-dualrun .dr-text { color: #a23a3b; font-size: .88rem; margin-top: .2rem; line-height: 1.45; }
.rka-dualrun .dr-text b { color: #8f2e30; }
.rka-dualrun .dr-actions { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

/* 5) KANAL KİMLİĞİ — kart başlığı */
.rka-idcard { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.rka-idcard .rk-src { width: 52px; height: 52px; border-radius: 13px; }
.rka-idcard .rk-src svg { width: 26px; height: 26px; }
.rka-id-main { min-width: 0; }
.rka-id-name { font-size: 1.35rem; font-weight: 600; color: var(--fg-heading); line-height: 1.15; }
.rka-id-sub { display: flex; align-items: center; gap: .65rem; margin-top: .4rem; flex-wrap: wrap; font-size: .86rem; color: var(--fg-muted); }
.rka-id-sub a { font-weight: 600; }
.rka-id-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); opacity: .6; }
.rka-id-badges { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rka-tenant { display: inline-flex; align-items: center; gap: .4rem; background: var(--light-primary); color: var(--primary); font-weight: 600; font-size: .8rem; padding: .3em .7em; border-radius: var(--radius-sm); }
.rka-tenant i { font-size: .9em; }

/* 6) SAĞLIK BAŞLIĞI — kritik sinyaller */
/* -- 24.06.2026 ek&claude-Opus-4.8 — auto-fit: genişliğe göre kendiliğinden sarar (4→2→1), breakpoint'e bağımlı DEĞİL → taşma yok */
.rka-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.rka-sig { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.15rem 1.25rem; border: 1px solid transparent; border-top: 3px solid var(--border); position: relative; }
.rka-sig.ok { border-top-color: var(--success); }
.rka-sig.err { border-top-color: var(--danger); }
.rka-sig.warn { border-top-color: var(--warning); }
.rka-sig.neutral { border-top-color: var(--secondary); }
.rka-sig-top { display: flex; align-items: center; gap: .6rem; }
.rka-sig-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; }
.rka-sig.ok .rka-sig-ic { background: var(--light-success); color: var(--success); }
.rka-sig.err .rka-sig-ic { background: var(--light-danger); color: var(--danger); }
.rka-sig.warn .rka-sig-ic { background: var(--light-warning); color: var(--warning); }
.rka-sig.neutral .rka-sig-ic { background: var(--light-secondary); color: var(--secondary); }
.rka-sig-label { font-size: .78rem; color: var(--fg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rka-sig-state { font-size: 1.12rem; font-weight: 700; color: var(--fg-heading); margin-top: .7rem; display: flex; align-items: center; gap: .45rem; }
.rka-sig.ok .rka-sig-state { color: var(--success); }
.rka-sig.err .rka-sig-state { color: var(--danger); }
.rka-sig.warn .rka-sig-state { color: #c47d1c; }
.rka-sig-meta { font-size: .8rem; color: var(--fg-muted); margin-top: .3rem; }
.rka-sig-fix { margin-top: .7rem; }
.rka-sig-fix .btn { width: 100%; justify-content: center; }
.rka-sig.lastlead .rka-sig-state { font-size: 1.25rem; }

/* 7) BİLGİ TABLOSU (key/value grid) */
.rka-card { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 1.2rem; overflow: hidden; }
.rka-card-head { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--border); }
.rka-card-head h3 { font-size: 1.05rem; font-weight: 600; color: var(--fg-heading); margin: 0; }
.rka-card-head h3 i { color: var(--primary); margin-right: .45rem; }
.rka-card-head .ch-right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.rka-card-body { padding: 1.3rem 1.4rem; }
.rka-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.rka-kv .kv { display: flex; align-items: baseline; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--border); }
.rka-kv .kv:nth-last-child(-n+2) { border-bottom: 0; }
.rka-kv .kv-key { flex: none; width: 148px; font-size: .83rem; color: var(--fg-muted); font-weight: 600; }
.rka-kv .kv-value { font-size: .92rem; color: var(--fg-heading); min-width: 0; word-break: break-word; }
.rka-kv .kv-value.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .84rem; color: var(--fg-body); }
.rka-kv .kv-value a { font-weight: 600; }
.rka-kv .kv-value .muted { color: var(--fg-muted); font-weight: 400; }
.kv-token-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--fg-muted); font-style: italic; }
.kv-token-note i { color: var(--secondary); }

/* 8) FORM ÖZETİ — form satırı + zap sayaçları */
.rka-formrow { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.rka-formrow:last-child { border-bottom: 0; }
.rka-formrow:hover { background: var(--bg-hover); }
.rka-formrow .fr-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--light-primary); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.rka-formrow .fr-main { min-width: 0; flex: 1; }
.rka-formrow .fr-name { font-weight: 600; color: var(--fg-heading); font-size: .98rem; }
.rka-formrow .fr-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; color: var(--fg-muted); margin-top: .2rem; }
.rka-formrow .fr-go { color: var(--fg-muted); font-size: .85rem; }
.zap-counts { display: flex; gap: .5rem; flex-wrap: wrap; }
.zap-count { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: .4rem .55rem; border-radius: var(--radius-input); background: var(--bg-app); }
.zap-count .num { font-size: 1.05rem; font-weight: 700; line-height: 1; color: var(--fg-heading); }
.zap-count .label { font-size: .68rem; color: var(--fg-muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.zap-count.ok { background: var(--zap-ok-bg); }
.zap-count.ok .num { color: var(--zap-ok); }
.zap-count.err { background: var(--zap-err-bg); }
.zap-count.err .num { color: var(--zap-err); }
.zap-count.wait { background: var(--zap-wait-bg); }
.zap-count.wait .num { color: var(--zap-wait); }

/* 9) ÖZET ŞERİDİ (PoolList üstü) — tıklanabilir sayaçlar */
/* -- 24.06.2026 ek&claude-Opus-4.8 — auto-fit: genişliğe göre kendiliğinden sarar (4→2→1), breakpoint'e bağımlı DEĞİL → taşma yok */
.rka-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.rka-counter { display: flex; align-items: center; gap: .9rem; background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.05rem 1.2rem; cursor: pointer; border: 1.5px solid transparent; transition: border-color .12s, box-shadow .12s, transform .12s; }
.rka-counter:hover { transform: translateY(-2px); box-shadow: 0 .45rem 1.5rem rgba(75, 70, 92, .14); }
.rka-counter.active { border-color: var(--primary); }
.rka-counter .c-ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.rka-counter .c-n { font-size: 1.55rem; font-weight: 700; color: var(--fg-heading); line-height: 1; }
.rka-counter .c-l { font-size: .8rem; color: var(--fg-muted); margin-top: .25rem; }
.rka-counter.all .c-ic { background: var(--light-primary); color: var(--primary); }
.rka-counter.ok .c-ic { background: var(--light-success); color: var(--success); }
.rka-counter.wait .c-ic { background: var(--light-secondary); color: var(--zap-wait); }
.rka-counter.err .c-ic { background: var(--light-danger); color: var(--danger); }
.rka-counter.err.active { border-color: var(--danger); }
.rka-counter.ok.active { border-color: var(--success); }

/* 10) ZAP LİSTESİ (task-history) — her satır = bir zap */
.rka-poolbar { display: flex; align-items: center; gap: .8rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.rka-poolbar .pb-title { font-size: .92rem; color: var(--fg-muted); }
.rka-poolbar .pb-spacer { flex: 1; }
/* -- 24.06.2026 ek&claude-Opus-4.8 — SCROLLABLE TABLE: dar ekranda satır yığılmaz; liste yatay kaydırılır
   (overflow-x:auto). Satırlar min-width ile tek uzun çizgi; mobilde sağa-sola swipe ile tüm kolonlar görülür. */
.zap-list { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow-x: auto; overflow-y: hidden; }
/* -- 24.06.2026 ek&claude-Opus-4.8 — "Zap" satırı: HİZALI grid (kolonlar satırlar arası dizilir → derli toplu;
   slack form + kampanya kolonlarına dağıtılır → ölü boşluk yok) + CANLI renkli 42px durum rozeti + kampanya çipi
   + boş-durum metinleri. 🔴 UI'da ID yok. Renk: ok=yeşil, err=kırmızı, wait=amber. */
/* 🔴 son kolon SABİT (auto DEĞİL): hata satırında "Detaylar+Yeniden İşle", başarılı satırda yalnız "Detaylar" var;
   auto olsaydı genişlik satırdan satıra değişip fr kolonları kaydırırdı (kolonlar hizasız görünürdü). */
/* min-width: satır tek uzun çizgi (≥940px) → geniş ekranda doldurur, dar ekranda liste yatay kaydırılır (table). */
.zap-row { display: grid; grid-template-columns: 4px 42px 118px minmax(0, 1.6fr) minmax(0, 1.1fr) 158px 220px; min-width: 940px; align-items: center; gap: .25rem 1.1rem; padding: .8rem 1.3rem .8rem 0; border-bottom: 1px solid var(--border); transition: background .12s, box-shadow .12s; position: relative; }
.zap-row:last-child { border-bottom: 0; }
.zap-row:hover { background: var(--bg-hover); }
.zap-row .zr-accent { width: 4px; height: 100%; min-height: 50px; align-self: stretch; border-radius: 0 4px 4px 0; }
.zap-row.ok .zr-accent { background: var(--zap-ok); }
.zap-row.err .zr-accent { background: var(--zap-err); }
.zap-row.wait .zr-accent { background: var(--warning); }
/* 42px CANLI durum rozeti — renkli tint zemin + dolgun renkli ikon */
.zap-row .zr-badge { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.zap-row .zr-badge i { --fa-secondary-opacity: .55; }
.zap-row.ok .zr-badge { background: var(--light-success); color: var(--success); }
.zap-row.err .zr-badge { background: var(--light-danger); color: var(--danger); }
.zap-row.wait .zr-badge { background: var(--light-warning); color: var(--warning); }
.zap-row .zr-time { font-size: .82rem; color: var(--fg-body); }
.zap-row .zr-time .ago { display: block; font-size: .73rem; color: var(--fg-muted); margin-top: .12rem; }
.zap-row .zr-target { min-width: 0; }
.zap-row .zr-form { font-weight: 600; color: var(--fg-heading); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-row .zr-form.empty { font-weight: 500; font-style: italic; color: var(--fg-muted); }
.zap-row .zr-meta { font-size: .77rem; color: var(--fg-muted); margin-top: .2rem; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.zap-row .zr-meta .mi { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.zap-row .zr-meta .mi > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.zap-row .zr-meta .zr-tenant { color: var(--primary); font-weight: 600; }
/* kampanya çipi — tek satır, kırp + hover tooltip (native title). monospace YOK. */
.zap-row .zr-camp { min-width: 0; }
.zap-row .zr-camp .camp { display: inline-block; max-width: 100%; font-size: .8rem; color: var(--fg-body); background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .28em .75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.zap-row .zr-camp .camp.empty { background: transparent; border: 0; padding-left: 0; color: var(--fg-muted); font-style: italic; }
.zap-row .zr-status { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; min-width: 0; }
/* wait çipi de amber (badge/accent ile tutarlı) — yalnız zap satırına scope'lu */
.zap-row .zr-status .zap-chip.wait { background: var(--light-warning); color: var(--warning); }
.zap-row .zr-err-msg { font-size: .74rem; color: var(--danger); display: inline-flex; align-items: center; gap: .3rem; cursor: help; max-width: 156px; }
.zap-row .zr-err-msg > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* aksiyonlar: 2 sabit hücre → Yeniden İşle (col1, yalnız hatada) | Detaylar (col2, HER satırda aynı x + boyut).
   Form/a açıkça kendi kolonuna sabitlenir; ok satırında Detaylar tek başına da col2'de kalır (kaymaz). */
.zap-row .zr-actions { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: center; }
.zap-row .zr-actions > form { grid-column: 1; justify-self: end; }
.zap-row .zr-actions > a { grid-column: 2; justify-self: end; }
.zap-row .zr-actions .btn { white-space: nowrap; }   /* "Yeniden İşle" tek satır kalsın (2 satıra kırılmasın) */
.zr-tip { position: relative; }
.zr-tip .tip { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; background: #2f2b3a; color: #fff; font-size: .78rem; line-height: 1.4; padding: .5rem .7rem; border-radius: 6px; width: 260px; box-shadow: var(--shadow-dropdown); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.zr-tip .tip::after { content: ""; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: #2f2b3a; }
.zr-tip:hover .tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* 11) TEK ZAP — sonuç başlığı */
.rka-result { display: flex; align-items: center; gap: 1.2rem; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.4rem 1.6rem; margin-bottom: 1.3rem; border-left: 5px solid var(--zap-wait); background: var(--bg-surface); flex-wrap: wrap; }
.rka-result.ok { border-left-color: var(--zap-ok); }
.rka-result.err { border-left-color: var(--zap-err); }
.rka-result .res-ic { width: 58px; height: 58px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; }
.rka-result.ok .res-ic { background: var(--light-success); color: var(--success); }
.rka-result.err .res-ic { background: var(--light-danger); color: var(--danger); }
.rka-result.wait .res-ic { background: var(--light-secondary); color: var(--zap-wait); }
.rka-result .res-main { min-width: 0; }
.rka-result .res-title { font-size: 1.2rem; font-weight: 700; color: var(--fg-heading); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rka-result .res-sub { font-size: .9rem; color: var(--fg-muted); margin-top: .3rem; }
.rka-result .res-sub b { color: var(--fg-body); }
.rka-result .res-err { margin-top: .55rem; background: var(--label-danger); color: var(--danger); border-radius: var(--radius-input); padding: .55rem .8rem; font-size: .85rem; font-family: ui-monospace, Menlo, Consolas, monospace; display: flex; align-items: flex-start; gap: .5rem; }
.rka-result .res-err i { margin-top: .1rem; flex: none; }
.rka-result .res-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* -- 22.06.2026 ek&claude-Opus-4.8 — Yenile dönüşü: snappier (FA varsayılan 2s yerine .7s) */
#rkPoolRefresh i.fa-spin { animation-duration: .7s; transform-origin: center center; }
/* açıklama satırı — "İşlemler" menüsündeki İşle/Çek alt yazıları için */
.rka-act-hint { font-size: .72rem; line-height: 1.35; color: var(--fg-muted); }
/* dropdown varyantı: etiketin altında açıklama satırı */
.rka-actions-menu .dropdown-item.rka-act-item, .dropdown-menu .dropdown-item.rka-act-item { display: flex; align-items: flex-start; gap: .5rem; white-space: normal; }
.dropdown-item.rka-act-item > i { margin-top: .2rem; flex: none; }
.dropdown-item.rka-act-item .rka-act-hint { display: block; margin-top: .15rem; }

/* 12) TEK ZAP — timeline / stepper */
.rka-timeline { position: relative; padding: .3rem 0; }
.rka-tl-step { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding-bottom: 1.4rem; }
.rka-tl-step:last-child { padding-bottom: 0; }
.rka-tl-step:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 38px; bottom: -4px; width: 2px; background: var(--border); }
.rka-tl-step.ok:not(:last-child)::before { background: var(--success); }
.rka-tl-step.err:not(:last-child)::before { background: linear-gradient(var(--danger) 40%, var(--border) 40%); }

/* ============================================================================
   LeadCenter (Lead Merkezi) — .lw-* -- 02.07.2026 ek&claude-Fable-5
   Faz 1: navbar "yeni özellik" girişi — gradient rozet (mor→pembe→turuncu) +
   beyaz fa-sparkles + kırmızı "yeni" noktası + yumuşak parlama animasyonu.
   NOT: anchor'a "nav-link-style" VERME — tema JS'i (app.js:972) dark mode toggle'lar.
   ============================================================================ */
.lw-nav-lc { position: relative; display: inline-flex; align-items: center; }
.lw-nav-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #7367f0 0%, #e73aa8 55%, #ff9f43 100%); box-shadow: 0 2px 8px rgba(231, 58, 168, .45); animation: lw-nav-glow 2.6s ease-in-out infinite; transition: transform .15s ease; }
/* fad (duotone) — solid.css Layout'ta yüklü değil; iki katman da beyaz */
.lw-nav-chip i { color: #fff; --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: .85; font-size: .9rem; line-height: 1; }
.lw-nav-lc:hover .lw-nav-chip { transform: scale(1.12) rotate(-8deg); }
.lw-nav-dot { position: absolute; top: .35rem; right: .1rem; width: 9px; height: 9px; border-radius: 50%; background: #ea5455; border: 2px solid #fff; pointer-events: none; }
@keyframes lw-nav-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(231, 58, 168, .45); }
    50% { box-shadow: 0 2px 14px rgba(115, 103, 240, .75); }
}
html.dark-layout .lw-nav-dot { border-color: #283046; }
html.dark-layout .lw-nav-chip { box-shadow: 0 2px 10px rgba(115, 103, 240, .55); }
.rka-tl-node { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; z-index: 1; background: var(--bg-surface); border: 2px solid var(--border); color: var(--fg-muted); }
.rka-tl-step.ok .rka-tl-node { background: var(--light-success); border-color: var(--success); color: var(--success); }
.rka-tl-step.err .rka-tl-node { background: var(--light-danger); border-color: var(--danger); color: var(--danger); }
.rka-tl-step.wait .rka-tl-node { background: var(--light-secondary); border-color: var(--zap-wait); color: var(--zap-wait); }
.rka-tl-step.future .rka-tl-node { opacity: .55; }
.rka-tl-body { padding-top: .15rem; min-width: 0; }
.rka-tl-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.rka-tl-title { font-size: .98rem; font-weight: 600; color: var(--fg-heading); }
.rka-tl-step.future .rka-tl-title { color: var(--fg-muted); font-weight: 500; }
.rka-tl-time { font-size: .8rem; color: var(--fg-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.rka-tl-desc { font-size: .86rem; color: var(--fg-body); margin-top: .3rem; line-height: 1.45; }
.rka-tl-desc .err-line { color: var(--danger); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.rka-attempts { display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.rka-attempt { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .3em .6em; border-radius: var(--radius-sm); background: var(--bg-app); color: var(--fg-body); border: 1px solid var(--border); }
.rka-attempt.ok { background: var(--label-success); color: var(--success); border-color: transparent; }
.rka-attempt.err { background: var(--label-danger); color: var(--danger); border-color: transparent; }
.rka-attempt .badge-n { font-weight: 700; }
.rka-lease { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--primary); background: var(--light-primary); padding: .2em .55em; border-radius: var(--radius-sm); font-weight: 600; }

/* 13) KATLANABİLİR PANELLER — Ham JSON / PII */
.rka-fold { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 1.2rem; overflow: hidden; }
.rka-fold-head { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.4rem; cursor: pointer; user-select: none; }
.rka-fold-head h3 { font-size: 1.02rem; font-weight: 600; color: var(--fg-heading); margin: 0; display: flex; align-items: center; gap: .55rem; }
.rka-fold-head h3 i.lead { color: var(--primary); }
.rka-fold-head .chev { margin-left: auto; color: var(--fg-muted); transition: transform .2s; }
.rka-fold.open .chev { transform: rotate(180deg); }
.rka-fold-body { display: none; padding: 0 1.4rem 1.4rem; }
.rka-fold.open .rka-fold-body { display: block; }
.rka-pre { background: #272540; color: #e9e7fd; border-radius: var(--radius-input); padding: 1.1rem 1.2rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.6; overflow: auto; margin: 0; max-height: 380px; }
.rka-pre .jk { color: #9d8cff; }
.rka-pre .js { color: #9be8a4; }
.rka-pre .jn { color: #ffb86b; }
.rka-pre .jb { color: #67d8e8; }
.rka-pii-note { display: flex; align-items: flex-start; gap: .6rem; background: var(--label-warning); color: #a96a1c; border-radius: var(--radius-input); padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
.rka-pii-note i { color: var(--warning); margin-top: .05rem; flex: none; }
.rka-pii-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; }
.rka-pii-item { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.rka-pii-item .pii-key { font-size: .78rem; color: var(--fg-muted); font-weight: 600; margin-bottom: .25rem; }
.rka-pii-item .pii-value { font-size: .92rem; color: var(--fg-heading); font-family: ui-monospace, Menlo, Consolas, monospace; }
.rka-pii-item .pii-value.masked { letter-spacing: .12em; color: var(--fg-muted); }
.rka-pii-loading { display: flex; align-items: center; gap: .6rem; color: var(--fg-muted); font-size: .9rem; padding: 1rem 0; }
.rka-pii-loading i { color: var(--primary); animation: rka-spin 1s linear infinite; }
@keyframes rka-spin { to { transform: rotate(360deg); } }

/* 14) FİLTRE accordion */
.rka-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.3rem; }
.rka-filter-grid .fg-wide { grid-column: span 1; }
.rka-daterange { display: flex; align-items: center; gap: .5rem; }
.rka-daterange .form-control { flex: 1; }
.rka-daterange .sep { color: var(--fg-muted); font-size: .85rem; }

/* 15) ONAY MODALI ikon varyantları (modal kabuğu reklam.css/rk-modal'dan gelir) */
.rka-confirm-ic.warn { background: var(--light-warning); color: var(--warning); }
.rka-confirm-ic.primary { background: var(--light-primary); color: var(--primary); }
.rka-confirm-ic.success { background: var(--light-success); color: var(--success); }

/* 16) DARK MODE — yalnız YENİ rka-*/zap-* bileşenleri (Vuexy'nin sahiplendiklerini ezme). */
.dark-layout .zap-count, .dark-layout .rka-attempt,
.dark-style .zap-count, .dark-style .rka-attempt { background: #1f2638; }
.dark-layout .rka-dualrun, .dark-style .rka-dualrun { border-color: #5a2e35; }
.dark-layout .rka-dualrun .dr-text, .dark-style .rka-dualrun .dr-text { color: #e6a9ab; }
.dark-layout .rka-dualrun .dr-text b, .dark-style .rka-dualrun .dr-text b { color: #f3c4c5; }
.dark-layout .rka-pii-note, .dark-style .rka-pii-note { color: #e0b072; }
.dark-layout .rka-sig.warn .rka-sig-state, .dark-style .rka-sig.warn .rka-sig-state { color: #e0b072; }

/* 17) RESPONSIVE */
@media (max-width: 1100px) {
    .rka-twocol { grid-template-columns: 1fr !important; }
    .rka-filter-grid { grid-template-columns: repeat(2, 1fr); }
    .rka-kv { grid-template-columns: 1fr; gap: 0; }
    .rka-kv .kv:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
    .rka-kv .kv:last-child { border-bottom: 0; }
    .rka-pii-grid { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    /* zap-row yığılması artık @container ile (yukarıda) — viewport eşiği kenar çubuğunu görmediği için kaldırıldı */
    .rka-filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    /* -- 24.06.2026 ek&claude-Opus-4.8 — telefon: panel iç boşluk küçülür (sayaç/health auto-fit ile zaten sarar) */
    .rk-panel { padding: 1rem; }
    .rka-result { padding: 1rem 1.1rem; }
}

/* -- 23.06.2026 ek&claude-Opus-4.8 — çok-satırlı not (\n) görünür yap: HTML'de satır sonu olarak render et.
   Meta Lead Ads "Başlık: Değer" ReminderNote satırları alt alta gelsin (Html.Raw kullanmadan, XSS güvenli). */
.pp-preline { white-space: pre-line; }

/* ============================================================================
   == LeadCenter (Lead Merkezi) ANA EKRAN — .lw-cs-* / .lw-row* / durumlar ==
   -- 02.07.2026 ek&claude-Opus-4.8 — Faz 2: mockup ai/lead-workspace ana ekranının
   (arama + 5 hızlı erişim kartı + sonuç listesi + boş/yükleniyor/hata) port'u.
   Token'lar .lw-wrap scope'una alındı (emsal: .rk-wrap, satır ~611); global :root'a
   ve tema bileşen sınıflarına (badge/avatar/btn — Vuexy sağlıyor) DOKUNULMADI.
   Dark = html.dark-layout. Leak koruması: .sk/.sk-circle → .lw-skel-row altına,
   .heat-* → .lw-heat ile birleşik scope'landı. Navbar .lw-nav-* bloğu ~851'de AYRI.
   ============================================================================ */

/* 1) Token scope (mockup :root → .lw-wrap; light) */
.lw-wrap {
    /* -- 04.08.2026 ek&claude-Opus-5 (kullanici istegi: beyaz etiket) — MARKA BAGLANTISI.
       Ham hex birakilmaz: --bs-primary/--bs-light-primary iki markada da :root'ta tanimli
       (Planports #7367f0/#e9e7fd - Karel #00aeef/#def2fa; wwwroot/css/{marka}/colors-extended.css).
       Karel'in KENDI dosyalarina DOKUNULMADI. var() kendi fallback'ini tasir; eski deger
       fallback olarak duruyor. Planports'ta uretilen renk BIREBIR ayni -> gorsel regresyon yok. */
    --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "yeni renk üretme, standart renklerimizi kullan") —
       --primary DIŞINDAKİ beş semantik renk HAM HEX kopyaydı; bu scope fiilen kendi paletini taşıyordu ve
       tema/marka bu değerleri değiştirse takip etmezdi. Hepsi --bs-* türevine bağlandı; desen --primary ile
       AYNI, literal fallback korunuyor → iki markada da üretilen renk BİREBİR aynı, görsel regresyon yok. */
    --primary: var(--bs-primary, #7367f0); --secondary: var(--bs-secondary, #82868b); --success: var(--bs-success, #28c76f); --info: var(--bs-info, #00cfe8); --warning: var(--bs-warning, #ff9f43); --danger: var(--bs-danger, #ea5455);
    --light-primary: var(--bs-light-primary, #e9e7fd); --light-secondary:#f1f1f2; --light-success:#ddf6e8; --light-info:#d6f7fb; --light-warning:#fff1e3; --light-danger:#fce5e6;
    --label-primary: var(--bs-light-primary, #eae8fd);
    --bg-app:#f8f7fa; --bg-surface:#fff; --bg-hover:#f6f6f9;
    --fg-heading:#5e5873; --fg-body:#6f6b7d; --fg-muted:#b9b9c3;
    --border:#ebe9f1; --border-input:#d8d6de;
    --radius-card:.428rem; --radius-input:.357rem; --radius-sm:4px;
    --shadow-card:0 .25rem 1.125rem rgba(75,70,92,.1);
    /* -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği) — arama kartının arkasındaki gri aksiyon tepsisi.
       Token olarak açıldı: mevcut hiçbir değişken bu tonu karşılamıyor (--bg-app sayfa zemini, tepsi ondan
       ayrışmalı; --light-secondary çip zemini). İkiz: wwwroot/css/lead-center.css. */
    --lw-tray:#f4f3f7; --lw-tray-ico:#8f8c9e;
    width:100%;
    /* -- 04.08.2026 ek&claude-Opus-5 — .lw-cs-search'un gomulu rgba'si buraya toplandi (ikiz:
       wwwroot/css/lead-center.css). Cift bildirim: color-mix desteklemeyen tarayici ikinciyi yok sayar. */
    --primary-a35: rgba(115,103,240,.35);
    --primary-a35: color-mix(in srgb, var(--primary) 35%, transparent);
}
/* dark token override (mockup .dark-layout → html.dark-layout .lw-wrap) */
html.dark-layout .lw-wrap {
    --bg-app:#25293c; --bg-surface:#2f3349; --bg-hover:#343a55;
    --fg-heading:#cfd3ec; --fg-body:#b6bad4; --fg-muted:#7a7f9c;
    --border:#3b4159; --border-input:#434968;
    --light-secondary:#3a3f57; --secondary:#a5a9c4; --light-primary:#3a3660; --label-primary:#37335c;
    /* Tepsi dark'ta karttan (--bg-surface #2f3349) DAHA KOYU: arkada kalan yüzey hissi korunsun. */
    --lw-tray:#282c40; --lw-tray-ico:#8a8fad;
    /* -- 04.08.2026 ek&claude-Opus-5 — karanlik soft tonun marka karsiligi YOK (--bs-light-primary-dark-mode
       yalniz Karel'de tanimli) -> markadan TURETILIYOR. Cift bildirim: color-mix desteklemeyen tarayici
       ikinciyi yok sayar, ustteki sabit deger ayakta kalir. Oran _KanbanStyles.cshtml ile ayni. */
    --light-primary: color-mix(in srgb, var(--primary) 26%, #25293c);
    --label-primary: color-mix(in srgb, var(--primary) 20%, #25293c);
}

/* 2) v3 arama ekranı (ContactsSearch) */
.lw-cs-wrap { max-width:760px; margin:0 auto; width:100%; }
.lw-cs-wrap.idle { padding-top:8vh; }
.lw-cs-hero { text-align:center; margin-bottom:1.8rem; }
.lw-cs-hero h1 { display:flex; align-items:center; justify-content:center; gap:.65rem; font-size:1.7rem; font-weight:600; color:var(--fg-heading); margin:0 0 .4rem; }
.lw-cs-hero .hi2 { width:38px; height:38px; border-radius:11px; background:var(--light-primary); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.lw-cs-hero p { color:var(--fg-muted); margin:0; font-size:1rem; }

.lw-cs-search { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--border-input); border-radius:16px; padding:.9rem 1.2rem; box-shadow:0 2px 10px rgba(75,70,92,.06); transition:border-color .15s, box-shadow .15s; }
.lw-cs-search:focus-within { border-color:var(--primary); box-shadow:0 6px 22px -6px var(--primary-a35); }
.lw-cs-search .si { color:var(--fg-muted); font-size:1.15rem; }
.lw-cs-search input { flex:1; border:0; outline:0; background:transparent; font-family:var(--font-sans); font-size:1.1rem; color:var(--fg-body); min-width:0; }
.lw-cs-search input::placeholder { color:var(--fg-muted); }
.lw-cs-clear { border:0; background:var(--light-secondary); color:var(--fg-body); width:30px; height:30px; border-radius:50%; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
.lw-cs-clear:hover { background:var(--light-danger); color:var(--danger); }
html.dark-layout .lw-cs-search { background:var(--bg-surface); }

/* -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği, madde 2) — arama kartı altındaki aksiyon tepsisi
   (Kişi Ekle / Eski Görünüme Dön). İkiz: wwwroot/css/lead-center.css — kural değişirse İKİSİ de.
   -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği) — ayrı, tam genişlikte, çerçeveli beyaz kutu YERİNE
   beyaz kartın ARKASINA sıkışan gri tepsi: iki yandan 15px içeride, karta -18px negatif margin'le girmiş,
   yalnız ALT köşeleri yuvarlak. Tepsinin üstünde border/divider YOK — derinlik yalnızca kartın gölgesinden
   ve dar genişlikten geliyor. z-index ŞART (kart 2 / tepsi 1), yoksa kartın alt gölgesi tepsinin ALTINDA
   kalır ve iki yüzey tek düz blok gibi okunur. */
.lw-cs-combo { position:relative; }
.lw-cs-combo .lw-cs-search { position:relative; z-index:2; }
.lw-cs-acts { position:relative; z-index:1; margin:-18px 15px 0; display:flex; align-items:center; justify-content:space-between; gap:.625rem; flex-wrap:wrap; background:var(--lw-tray); border-radius:0 0 14px 14px; padding:24px 9px 7px; }
/* Aksiyonlar: sakin ghost; hover'da kart yüzeyinde beyaz pill'e dönüşür (ikon primary'ye ısınır). */
.lw-cs-act { display:inline-flex; align-items:center; gap:.5rem; border:1px solid transparent; background:none; border-radius:8px; padding:7px 11px; font-family:var(--font-sans); font-size:.78rem; font-weight:500; line-height:1.2; color:var(--fg-body); cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,color .15s; }
.lw-cs-act i { font-size:.81rem; color:var(--lw-tray-ico); }
.lw-cs-act:hover { background:var(--bg-surface); border-color:var(--border); color:var(--fg-heading); }
.lw-cs-act:hover i { color:var(--primary); }
/* İkincil aksiyon (Eski Görünüme Dön) — birincilin bir tık gerisinde durur. */
.lw-cs-act.quiet { color:var(--lw-tray-ico); }

.lw-cs-sugwrap { display:flex; align-items:center; gap:.5rem; margin-top:1.1rem; }
.lw-cs-arrow { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--fg-body); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); transition:background .12s,color .12s,border-color .12s,opacity .12s; }
.lw-cs-arrow:hover { background:var(--light-primary); color:var(--primary); border-color:transparent; }
.lw-cs-arrow.disabled { opacity:.3; box-shadow:none; }
html.dark-layout .lw-cs-arrow { background:var(--bg-surface); }
.lw-cs-suggests { display:flex; gap:.9rem; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.lw-cs-suggests::-webkit-scrollbar { display:none; }
.lw-cs-chip { flex:0 0 auto; max-width:250px; min-width:170px; display:flex; align-items:flex-start; gap:.5rem; background:#f2f1f7; border:0; border-radius:20px; box-shadow:none; padding:.9rem 1.15rem; cursor:pointer; text-align:left; font-family:var(--font-sans); transition:background .12s; }
.lw-cs-chip:hover { background:#e9e8f1; transform:none; box-shadow:none; }
.lw-cs-chip.active { background:var(--light-primary); box-shadow:none; }
.lw-cs-chip .ci { display:none; }
.lw-cs-chip .ct { min-width:0; flex:1; }
.lw-cs-chip .ct .t { display:block; font-weight:700; color:var(--fg-heading); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-cs-chip .ct .s { display:block; font-size:.8rem; color:var(--fg-muted); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-cs-chip .cn { font-weight:700; color:var(--fg-muted); flex:none; background:transparent; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.lw-cs-chip.active .cn { background:transparent; color:var(--primary); }
html.dark-layout .lw-cs-chip { background:#343a55; }
html.dark-layout .lw-cs-chip:hover { background:#3a4160; }

.lw-cs-results { margin-top:1.6rem; }
.lw-cs-results-head { display:flex; align-items:center; gap:.5rem; margin:0 .2rem .7rem; }
.lw-cs-results-head h3 { margin:0; font-size:1rem; font-weight:600; color:var(--fg-heading); }
.lw-cs-results-head .rc { font-size:.82rem; color:var(--fg-muted); }
.lw-cs-results-head .back { margin-left:auto; font-size:.85rem; color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.lw-cs-close { position:relative; margin-left:auto; width:30px; height:30px; border-radius:50%; border:0; background:var(--light-danger); color:var(--danger); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:background .12s,transform .12s; }
.lw-cs-close:hover { background:var(--danger); color:#fff; transform:scale(1.06); }
.lw-cs-close:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 7px); right:0; background:var(--fg-heading); color:#fff; font-size:.74rem; font-weight:500; padding:.3rem .6rem; border-radius:6px; white-space:nowrap; pointer-events:none; box-shadow:0 4px 12px rgba(34,41,47,.3); }
.lw-cs-empty { text-align:center; padding:2.6rem 1rem; color:var(--fg-muted); }
.lw-cs-empty .ei { font-size:2.2rem; opacity:.5; margin-bottom:.6rem; }
/* -- 31.07.2026 mk&claude-Fable-5 — boş listede aktif filtre notu. İkiz: wwwroot/css/lead-center.css. */
.lw-cs-emptyflt { margin-top:.5rem; font-size:.75rem; opacity:.75; }

/* 3) Sonuç satırı anatomisi (Faz 3-4 doldurur; kabuk hazır) */
.lw-list { background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; }
html.dark-layout .lw-list { background:var(--bg-surface); }
.lw-row { display:flex; align-items:center; gap:1rem; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; position:relative; }
.lw-row:last-child { border-bottom:0; }
.lw-row:hover { background:var(--bg-hover); }
.lw-row.is-overdue::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--danger); }
.lw-row .lw-avatar-wrap { position:relative; flex:none; line-height:0; }
/* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "ikonlar ortalı değil ve şık değil") — liste satırı avatar +
   kanal noktası cilası. Avatar boyu daldan dala değişiyordu (avatarHTML 30px inline vs getAvatars 'taskAvatar'
   30px inline, farklı sarmalayıcılar) → inline stil ancak !important ile ezilir. 20px nokta 30px avatarın 2/3'ünü
   kaplayıp -3px taşıyordu; artık 17px + 1px taşma + yüzey rengiyle halka + yumuşak gölge, glif ortalaması
   grid/place-items (ikon fontlarında baseline kaymaz). Yalnız .lw-row: panelin .lw-oc-meta varyantına dokunmaz.
   Index.cshtml inline bloğuyla BİREBİR senkron. */
.lw-row .lw-avatar-wrap .avatar,
.lw-row .lw-avatar-wrap .avatar > img,
.lw-row .lw-avatar-wrap .avatar > .avatar-content { width:38px !important; height:38px !important; border-radius:50%; }
.lw-row .lw-avatar-wrap .avatar > .avatar-content { display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; letter-spacing:.01em; }
.lw-row .lw-src-dot { right:-1px; bottom:-1px; width:17px; height:17px; box-sizing:border-box; display:grid; place-items:center; border-color:var(--bg-surface); box-shadow:0 1px 3px rgba(75,70,92,.25); }
.lw-row .lw-src-dot i { font-size:9px; line-height:1; display:block; }
.lw-src-dot { position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; border:2px solid #fff; }
.lw-src-dot i { font-size:11px; line-height:1; }
html.dark-layout .lw-src-dot { border-color:var(--bg-surface); }
.lw-row-main { flex:1; min-width:0; }
.lw-row-top { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.lw-row-name { font-weight:600; color:var(--fg-heading); font-size:1rem; }
.lw-src-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; color:var(--fg-muted); }
.lw-action { display:flex; align-items:center; gap:.45rem; margin-top:.3rem; font-size:.9rem; color:var(--fg-body); }
.lw-action i { font-size:.9em; }
.lw-action.overdue { color:var(--danger); font-weight:500; }
.lw-action.today { color:var(--warning); font-weight:500; }
.lw-action .when { color:var(--fg-muted); font-size:.82rem; font-weight:400; }
/* -- 19.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — satırın "eklenme tarihi + kaynak + kampanya" mikro satırı.
   Emsal: PpCards/_GetCards.cshtml (.added-date + .source-info) — aynı bilgi, aynı sıra, aynı tooltip;
   sunum bu ekranın .lw-* diline çevrildi. Renk token'dan (--fg-muted) gelir → dark tema kendiliğinden
   çalışır, ayrı kural gerekmez.
   İÇERİK: artı ikonu · tarih · "- " kaynak · "· " kampanya. Kampanya 19.08'de meta satırından BURAYA taşındı
   (orası yalnız varsayılan bağlamda çiziliyor, Yanıtsız/Bugünün Etkinlikleri dallarında kampanya hiç basılmıyordu).

   Daralma ÖNCELİĞİ — tarih > kaynak > kampanya. Üç kural birlikte çalışır, biri düşerse diğerleri anlamsız:
   🔴 white-space:nowrap KONTEYNERDE (yalnız kırpılan öğede değil): 400px altında tarih "01 Haz" → "01"/"Haz"
      diye İKİ SATIRA kırılıyordu (flex öğesinin otomatik min boyutu min-content'tir).
   🔴 .src'de flex:none — kaynak HİÇ daralmaz. Önce flex-shrink ile oynandı (1 → 99 → 999) ama çözmedi:
      artık kayıp shrink oranından değil ALT-PİKSEL yuvarlamasından geliyordu (öğe 72.54px, içerik 72.99px)
      ve 0.46px'lik açık bile ellipsis'e yer açmak için ~2 harf yiyor ("Web Formu" → "Web For…").
      scrollWidth/clientWidth ikisi de 73'e yuvarladığı için ölçüm "kayıp yok" diyordu — GÖRÜNTÜ yalanladı.
   🔴 Konteynerde overflow:hidden = güvenlik ağı. Kaynak serbest metin (ham PpCard.Source) olduğundan teoride
      tek başına satırı taşırabilir; daralmadığı için o uçta "…" DEĞİL sert kesme olur (denendi: .src'ye
      max-width:100% + ellipsis eklemek İŞE YARAMIYOR — kutu konteyner genişliğine kapanıyor ama ikon+tarih
      kadar sağa kaydığı için "…" görünür alanın dışında kalıyor; kural vaadini karşılamadığı için SİLİNDİ).
      Kabul edilen ödün: gerçek kaynak değerleri kısa etiketler ("Whatsapp", "ig", "Web Formu"). Taşma yok,
      satır bozulmuyor, yalnız o uç örnekte metin sonu kesiliyor.
   Kampanya tek daralan öğe olduğu için ayrıca shrink değeri verilmedi (varsayılan 1 yeter).
   Ölçüldü (320/360/400/900/1280 px, headless): her genişlikte TEK satır (17px), yatay taşma 0,
   kaynak hiç kırpılmıyor, tüm daralmayı kampanya üstleniyor.
   İKİZ: lead-center.css ↔ site.css — bu blok değişirse İKİSİ de değişmeli. */
.lw-added { display:flex; align-items:center; gap:.3rem; margin-top:.22rem; font-size:.78rem; color:var(--fg-muted); min-width:0; white-space:nowrap; overflow:hidden; }
.lw-added i { font-size:.9em; flex:none; }
.lw-added .src { flex:none; }
.lw-added .camp { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lw-row-right { display:flex; align-items:center; gap:.9rem; flex:none; }
.lw-quick { display:flex; gap:.25rem; opacity:.55; transition:opacity .12s; }
.lw-row:hover .lw-quick { opacity:1; }
.lw-qbtn { width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s; text-decoration:none; }
.lw-qbtn:hover { background:var(--light-primary); color:var(--primary); }
.lw-qbtn.wa:hover { background:var(--light-success); color:var(--success); }
.lw-lastmsg { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; font-size:.88rem; color:var(--fg-body); min-width:0; }
.lw-lastmsg i { color:var(--info); flex:none; }
.lw-lastmsg .lm-text { color:var(--fg-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; font-style:italic; }
.lw-lastmsg .when { color:var(--fg-muted); font-style:normal; flex:none; }
.lw-heat { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.9rem; }
.lw-heat.heat-hot { color:var(--danger); }
.lw-heat.heat-warm { color:var(--warning); }
.lw-heat.heat-cold { color:var(--info); }

/* 4) Çoklu telefon: birincil no + "+N" çip + popover */
.lw-phone-cell { position:relative; display:inline-flex; align-items:center; gap:.4rem; }
.lw-phone-chip { border:0; background:var(--light-secondary); color:var(--secondary); font-family:var(--font-sans); font-weight:700; font-size:.72rem; line-height:1; padding:.18rem .4rem; border-radius:8px; cursor:pointer; transition:background .12s,color .12s; }
.lw-phone-chip:hover { background:var(--light-primary); color:var(--primary); }
.lw-hl { background:rgba(255,193,7,.42); color:inherit; border-radius:3px; padding:0 1px; }
html.dark-layout .lw-hl { background:rgba(255,193,7,.3); }
.lw-phone-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:1065; min-width:250px; background:#fff; border:1px solid var(--border); border-radius:var(--lw-r-card,12px); box-shadow:0 14px 34px rgba(75,70,92,.24); padding:.4rem; }
html.dark-layout .lw-phone-pop { background:var(--bg-surface); }
.lw-phone-pop-head { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--fg-heading); padding:.35rem .55rem .45rem; }
.lw-phone-pop-row { display:flex; align-items:center; gap:.5rem; padding:.35rem .55rem; border-radius:var(--lw-r-ic,8px); }
.lw-phone-pop-row:hover { background:var(--bg-hover); }
/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "tıklanabilir değil gibi, imleç değişmiyor") — telefon
   popover'ında satırlar KENDİ İÇLERİNDEKİ düğmelerle çalışıyordu, o yüzden satırda imleç yoktu. Takip menüsünde
   (Detaylar / Şimdi Gönder / Mesajı İptal Et) tıklanan şey SATIRIN KENDİSİ (data-lc) → imleç işaretçi olmalı.
   [data-lc] ile sınırlı: telefon numarası satırlarının davranışı aynen kalır. */
.lw-phone-pop-row[data-lc] { cursor: pointer; }
.lw-phone-pop-row .pp-num { flex:1; min-width:0; font-size:.9rem; color:var(--fg-body); display:flex; align-items:center; gap:.5rem; font-variant-numeric:tabular-nums; }
.lw-phone-pop-row .pp-primary { font-size:.66rem; font-weight:700; color:var(--primary); background:var(--light-primary); padding:.1rem .35rem; border-radius:var(--lw-r-pill,999px); text-transform:uppercase; letter-spacing:.02em; }
.lw-phone-pop-row .pp-acts { display:flex; gap:.2rem; flex:none; }
.lw-phone-pop-row .lw-qbtn { width:30px; height:30px; }

/* 5) Boş / yükleniyor (skeleton) / hata + dev durum segmenti */
.lw-skel-row { display:flex; align-items:center; gap:1rem; padding:.95rem 1.2rem; border-bottom:1px solid var(--border); }
.lw-skel-row:last-child { border-bottom:0; }
.lw-skel-row .sk { background:linear-gradient(90deg,#eeedf4 25%,#f6f5fa 50%,#eeedf4 75%); background-size:200% 100%; animation:lw-sh 1.2s ease-in-out infinite; border-radius:6px; }
.lw-skel-row .sk-circle { width:40px; height:40px; border-radius:50%; flex:none; }
html.dark-layout .lw-skel-row .sk { background:linear-gradient(90deg,#333850 25%,#3d4260 50%,#333850 75%); background-size:200% 100%; }
@keyframes lw-sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .lw-skel-row .sk{ animation:none; } }
.lw-demobar { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; background:var(--light-primary); border-radius:var(--radius-input); padding:.5rem .7rem; margin-bottom:1rem; font-size:.82rem; color:var(--primary); }
.lw-demobar .dl { display:flex; align-items:center; gap:.4rem; font-weight:600; }
.lw-seg { display:inline-flex; background:#fff; border-radius:var(--radius-input); padding:.15rem; box-shadow:0 1px 3px rgba(75,70,92,.12); }
.lw-seg button { border:0; background:transparent; padding:.3rem .7rem; border-radius:5px; font-family:var(--font-sans); font-size:.8rem; color:var(--fg-body); cursor:pointer; }
.lw-seg button.active { background:var(--primary); color:#fff; }
html.dark-layout .lw-seg { background:#363b52; }
html.dark-layout .lw-seg button.active { background:var(--primary); color:#fff; }

/* 6) Responsive (<720px: kartlar ikonsuz tam-yazılı, oklar gizli, parmakla kaydır) */
@media (max-width: 720px){
    .lw-cs-arrow { display:none; }
    .lw-cs-chip { padding:.75rem .95rem; min-width:150px; max-width:200px; border-radius:18px; }
    .lw-cs-chip .ct .t { font-size:.86rem; }
    .lw-cs-chip .ct .s { font-size:.76rem; }
    .lw-cs-hero .hi2 { width:30px; height:30px; border-radius:9px; font-size:.85rem; }
    .lw-cs-hero h1 { font-size:1.25rem; }
    .lw-cs-hero p { font-size:.84rem; }
    .lw-cs-hero { margin-bottom:1.2rem; }
    .lw-cs-wrap.idle { padding-top:3vh; }
}
/* ===================== END: Reklam Kanalları ADMIN (rka-*/zap-*) ===================== */
/* ===================== LeadCenter (Lead Merkezi) — Faz 4: kart liste başlığı + filtre pill'leri + fırsat satırı =====================
   -- 06.07.2026 ek&claude-Fable-5 — KANONİK yer burası; Index.cshtml'deki GEÇİCİ inline <style> bloğunda DUPLİKESİ var
   (bundle cache workaround'u, Faz 3 notuna bak). Bundle fix gelince inline blok silinir, bu blok kalır. */
.lw-cs-rhead { display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; flex-wrap:wrap; }
.lw-cs-rhead .rh-ico { width:30px; height:30px; border-radius:9px; background:var(--light-primary); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; flex:none; }
.lw-cs-rhead .rh-title { font-weight:700; color:var(--fg-heading); font-size:1rem; }
.lw-cs-rhead .rh-count { color:var(--fg-muted); font-size:.9rem; }
.lw-cs-rhead .rh-sp { flex:1; }
.lw-cs-rhead .rh-close { border:0; background:var(--light-secondary); color:var(--fg-body); width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.lw-cs-rhead .rh-close:hover { background:var(--light-danger); color:var(--danger); }
.lw-flt { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin:0 0 .9rem; }
.lw-flt .fi { color:var(--fg-muted); font-size:.72rem; }
.lw-flt-pill { display:inline-flex; align-items:center; background:var(--light-secondary); color:var(--fg-body); font-size:.72rem; font-weight:600; padding:.22rem .55rem; border-radius:999px; }
html.dark-layout .lw-flt-pill { background:#3a3f57; }
.lw-price { display:inline-flex; align-items:center; font-variant-numeric:tabular-nums; background:var(--light-success); color:var(--success); font-weight:700; font-size:.78rem; padding:.18rem .5rem; border-radius:6px; white-space:nowrap; }
/* ===================== END: LeadCenter Faz 4 ===================== */

/* ===================== BEGIN: LeadCenter Faz 5.5 (360 push-stack panel) ===================== */
/* -- 07.07.2026 ek&claude-Opus-4.8 (Faz 5.5) — 360 panel Bootstrap offcanvas → bespoke PUSH-STACK kabuğu
   (iki panel · sol ikon rayı · peek). Card360.js body'ye .lw-ps-overlay.lw-oc-host mount eder; içerik server
   partial (_Card360Panel). Token scope .lw-oc-host'ta (reuse — .lw-wrap'tan bağımsız). Index.cshtml inline ile SENKRON.
   z-index: overlay 1040 (Vuexy menü 1031 üstünde); WhatsApp popover .lw-phone-pop 1065 panellerin üstünde. */
/* Token scope (reuse için — .lw-wrap'tan bağımsız; overlay .lw-oc-host sınıfını taşır) */
.lw-oc-host {
    /* -- 04.08.2026 ek&claude-Opus-5 (kullanici istegi: beyaz etiket) — MARKA BAGLANTISI.
       Ham hex birakilmaz: --bs-primary/--bs-light-primary iki markada da :root'ta tanimli
       (Planports #7367f0/#e9e7fd - Karel #00aeef/#def2fa; wwwroot/css/{marka}/colors-extended.css).
       Karel'in KENDI dosyalarina DOKUNULMADI. var() kendi fallback'ini tasir; eski deger
       fallback olarak duruyor. Planports'ta uretilen renk BIREBIR ayni -> gorsel regresyon yok. */
    --font-sans:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "yeni renk üretme, standart renklerimizi kullan") —
       --primary DIŞINDAKİ beş semantik renk HAM HEX kopyaydı; bu scope fiilen kendi paletini taşıyordu ve
       tema/marka bu değerleri değiştirse takip etmezdi. Hepsi --bs-* türevine bağlandı; desen --primary ile
       AYNI, literal fallback korunuyor → iki markada da üretilen renk BİREBİR aynı, görsel regresyon yok. */
    --primary: var(--bs-primary, #7367f0); --secondary: var(--bs-secondary, #82868b); --success: var(--bs-success, #28c76f); --info: var(--bs-info, #00cfe8); --warning: var(--bs-warning, #ff9f43); --danger: var(--bs-danger, #ea5455);
    --light-primary: var(--bs-light-primary, #e9e7fd); --light-secondary:#f1f1f2; --light-success:#ddf6e8; --light-info:#d6f7fb; --light-warning:#fff1e3; --light-danger:#fce5e6;
    --bg-app:#f8f7fa; --bg-surface:#fff; --bg-hover:#f6f6f9;
    --fg-heading:#5e5873; --fg-body:#6f6b7d; --fg-muted:#b9b9c3;
    --border:#ebe9f1; --border-input:#d8d6de;
    --radius-card:.428rem; --radius-input:.357rem; --radius-sm:4px;
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — PANEL YARIÇAP ÖLÇEĞİ. Panelde 18 farklı yarıçap
       vardı (4/5.71/6/6.85/7/8/8.8/9/10/10.4/11/12/13/16/20px + 50%); dört basamağa indirildi.
       Bildirim BURADA (.lw-oc-host) çünkü overlay body'ye mount ediliyor ve .lw-fof-* tüketicileri
       (PpMeetings Create/Edit/Finalize) panel DIŞINDA — o sayfalarda kap .lw-wrap/.lw-oc-host olur.
       Kullanım yerlerinde literal fallback ŞART: var(--lw-r-box,10px). Emsal: var(--bs-primary,#7367f0).
       Bilinçli istisnalar (ölçeğe girmez): .lw-ps-panel 16px (kabuk, iç kartların üstünde) ·
       mobil .lw-ps-panel 0 · scrollbar 4px · .lw-ps-tab.active::before + .lw-sg-line 2px · 50% daireler.
       _Card360Styles.cshtml ikizi ile BİREBİR senkron. */
    --lw-r-card:12px; --lw-r-box:10px; --lw-r-ic:8px; --lw-r-chip:6px; --lw-r-pill:999px;
    --shadow-card:0 .25rem 1.125rem rgba(75,70,92,.1);
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — YUMUŞAK KART GÖLGESİ. Değer .lw-opp-item ve
       .lw-oc-pane > .lw-sa kurallarının içine HAM yazılmıştı (rgba(34,41,47,.04)) ve #25293c
       zeminde matematiksel olarak görünmezdi. --shadow-card'a bağlamak light görünümü
       ağırlaştırırdı (o .1 alfa) → ayrı token. Dark karşılığı aşağıdaki dark bloğunda. */
    --lw-shadow-soft:0 3px 12px rgba(34,41,47,.04);
    /* -- 04.08.2026 ek&claude-Opus-5 — kurallarin icine gomulu rgba(115,103,240,..) degerleri buraya
       toplandi ve markadan turetildi (once sabit fallback, sonra color-mix; desteklemeyen tarayici
       ikinciyi yok sayar). Emsal: _KanbanStyles.cshtml --ppkb-primary-a55 ailesi. */
    --primary-a12: rgba(115,103,240,.12);
    --primary-a12: color-mix(in srgb, var(--primary) 12%, transparent);
    --primary-a13: rgba(115,103,240,.13);
    --primary-a13: color-mix(in srgb, var(--primary) 13%, transparent);
    --primary-a14: rgba(115,103,240,.14);
    --primary-a14: color-mix(in srgb, var(--primary) 14%, transparent);
    --primary-a35: rgba(115,103,240,.35);
    --primary-a35: color-mix(in srgb, var(--primary) 35%, transparent);
    --primary-a45: rgba(115,103,240,.45);
    --primary-a45: color-mix(in srgb, var(--primary) 45%, transparent);
    --primary-a55: rgba(115,103,240,.55);
    --primary-a55: color-mix(in srgb, var(--primary) 55%, transparent);
}
html.dark-layout .lw-oc-host {
    --bg-app:#25293c; --bg-surface:#2f3349; --bg-hover:#343a55;
    --fg-heading:#cfd3ec; --fg-body:#b6bad4; --fg-muted:#7a7f9c;
    --border:#3b4159; --border-input:#434968;
    --light-secondary:#3a3f57; --secondary:#a5a9c4; --light-primary:#3a3660;
    /* -- 04.08.2026 ek&claude-Opus-5 — karanlik soft tonun marka karsiligi YOK (--bs-light-primary-dark-mode
       yalniz Karel'de tanimli) -> markadan TURETILIYOR. Cift bildirim: color-mix desteklemeyen tarayici
       ikinciyi yok sayar, ustteki sabit deger ayakta kalir. Oran _KanbanStyles.cshtml ile ayni. */
    --light-primary: color-mix(in srgb, var(--primary) 26%, #25293c);
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — 🔴 KÖK NEDEN DÜZELTMESİ. Bu blok altı --light-*
       token'ından yalnız İKİSİNİ remap ediyordu (--light-secondary, --light-primary). Kalan dördü
       dark'ta light bloğun OPAK hex'leriyle kalıyordu (#ddf6e8/#d6f7fb/#fff1e3/#fce5e6) → koyu
       zeminde açık pastel kutular. Panelde bu dörde bağlı 20'den fazla kural var:
       .lw-act-ic.plan/.done/.over · .lw-fbadge.st-* · .lw-opp-item .lw-heat.* · .lw-mf-warn/.lw-mf-info ·
       .lw-del-warn/.lw-del-info/.lw-del-ic · .lw-fof-note.st-* · .lw-fof-pill · .lw-fdot.fin:hover ·
       .lw-sg-done-ic · .lw-fu-disc · .lw-qbtn.wa:hover / .danger:hover.
       Desen --light-primary ile AYNI: önce sabit fallback (26% karışımın hesaplanmış değeri),
       sonra color-mix — desteklemeyen tarayıcı ikinciyi yok sayar. */
    --light-success:#265249; --light-info:#1b5469; --light-warning:#5e483e; --light-danger:#583442;
    --light-success: color-mix(in srgb, var(--success) 26%, #25293c);
    --light-info:    color-mix(in srgb, var(--info)    26%, #25293c);
    --light-warning: color-mix(in srgb, var(--warning) 26%, #25293c);
    --light-danger:  color-mix(in srgb, var(--danger)  26%, #25293c);
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — gölge token'larının dark karşılığı: ikisi de light
       bloğunda mor/gri alfa taşıyor ve #25293c üzerinde görünmüyordu. Referans: aşağıdaki
       html.dark-layout .lw-ps-panel { box-shadow:0 24px 60px -12px rgba(0,0,0,.6) }. */
    --shadow-card:0 .25rem 1.125rem rgba(0,0,0,.45);
    --lw-shadow-soft:0 3px 12px rgba(0,0,0,.35);
}

/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11 · parite onarımı) — panel yükleme iskeleti YALNIZ
   _Card360Styles.cshtml'de vardı, site.css'te HİÇ YOKTU (site.css'teki .lw-skel-row LİSTE iskeletidir,
   ayrı seçici). Sekiz kural BİRLİKTE taşındı: kurallar + @keyframes + dark gradyanı + reduced-motion —
   biri geride kalsaydı animasyon ölür ya da dark'ta iskelet açık gri parlardı. Emsal: .lw-skel-row +
   @keyframes lw-sh (yukarıda) aynı deseni kuruyor. Yarıçaplar Faz 11 ölçeğine bağlandı; 7px'lik bar
   14px yüksekliğinde olduğu için pill ile GÖRSEL OLARAK AYNI kalır. */
.lw-oc-skel { display:flex; flex-direction:column; gap:.85rem; padding:.5rem 0; }
.lw-oc-skel .s { height:14px; border-radius:var(--lw-r-pill,999px); background:linear-gradient(90deg,#eeedf4 25%,#f6f5fa 50%,#eeedf4 75%); background-size:200% 100%; animation:lw-oc-sh 1.2s ease-in-out infinite; }
.lw-oc-skel .s:first-child { height:46px; border-radius:var(--lw-r-box,10px); }
.lw-oc-skel .s:nth-child(3) { width:70%; }
.lw-oc-skel .s:last-child { width:45%; }
html.dark-layout .lw-oc-skel .s { background:linear-gradient(90deg,#333850 25%,#3d4260 50%,#333850 75%); background-size:200% 100%; }
@keyframes lw-oc-sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .lw-oc-skel .s { animation:none; } }
/* pointer-events BİLEREK yok: istek hiç dönmezse (jQuery'de varsayılan timeout YOK) tetikleyici kalıcı
   olarak tıklanamaz kalırdı. Çift tıklama zararsız (ikinci istek aynı paneli tazeler). */
.lw-oc-busy { opacity:.6; transition:opacity .12s; }

/* ---- Push-stack kabuk (overlay + backdrop + panel + ray + içerik + tabbar) ---- */
.lw-ps-overlay { position:fixed; inset:0; z-index:1040; }
.lw-ps-backdrop { position:absolute; inset:0; z-index:0; background:rgba(34,41,47,.30); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:1; transition:opacity .38s ease; }
.lw-ps-backdrop.closing { opacity:0; }
.lw-ps-panel { position:fixed; top:50%; left:0; height:97vh; display:flex; background:var(--bg-surface); border-radius:16px; overflow:hidden; box-shadow:0 24px 60px -12px rgba(34,41,47,.42), 0 8px 20px -8px rgba(34,41,47,.3); transform-origin:right center; transition:transform .5s cubic-bezier(.33,.73,.27,1), opacity .38s ease; }
/* -- 03.08.2026 mk&claude-Opus-5 (kullanıcı bulgusu: "panel açılınca bulanık, mouse gezinince düzeliyor") —
   `will-change:transform,opacity` KALDIRILDI. Kalıcı olduğu için panel animasyon bittikten sonra da kompozitör
   katmanında kalıyor, `top:50%` + `translate(x,-50%)` + `height:97vh` kesirli Y ürettiğinden katman dokusu yarım
   piksel ofsetle örnekleniyor ve tüm panel yumuşuyordu (üstelik katmanda subpixel AA yerine grayscale AA). Hover
   bir paint invalidation üretip katmanı yeniden raster'ladığı için "mouse gezinince düzeliyor" görünüyordu.
   Kayıp yok: transform transition'ı sürerken tarayıcı paneli zaten kendiliğinden terfi ettiriyor. */
.lw-ps-panel.lw-ps-noanim { transition:none !important; }
html.dark-layout .lw-ps-panel { box-shadow:0 24px 60px -12px rgba(0,0,0,.6); }
.lw-ps-rail { width:56px; flex:none; background:var(--bg-app); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:.55rem 0; gap:.3rem; }
html.dark-layout .lw-ps-rail { background:#22263a; }
.lw-ps-rail-nav { display:flex; flex-direction:column; gap:.25rem; margin:.5rem 0; flex:1; width:100%; align-items:center; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — 11px ölçekte YOK. 40px'lik navigasyon butonu, 34px'lik
   ikon rozetlerinden (--lw-r-ic 8px) bir tık büyük durması için --lw-r-box'a bağlandı. Bu bir
   yargı kararıdır — kullanıcıya teyit ettirilecek (Faz 11 "Karar bekleyen" maddesi). */
.lw-ps-rail-btn { position:relative; width:40px; height:40px; border-radius:var(--lw-r-box,10px); border:0; background:transparent; color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.02rem; transition:background .12s,color .12s; }
.lw-ps-rail-btn:hover { background:var(--bg-hover); color:var(--fg-body); }
.lw-ps-rail-btn.active { background:var(--primary); color:#fff; box-shadow:0 4px 10px -2px var(--primary); }
.lw-ps-rail-btn.active i { color:#fff; }
.lw-ps-rail-btn .rl { position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); background:var(--fg-heading); color:#fff; font-size:.74rem; font-weight:500; padding:.28rem .55rem; border-radius:var(--lw-r-chip,6px); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:5; box-shadow:0 4px 12px rgba(34,41,47,.3); }
.lw-ps-rail-btn:hover .rl { opacity:1; }
.lw-ps-rail-x { width:38px; height:38px; border-radius:var(--lw-r-ic,8px); border:0; background:transparent; color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.lw-ps-rail-x:hover { background:var(--light-danger); color:var(--danger); }
.lw-ps-content { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg-app); }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — 1.15rem → .9rem: başlık şeridi ve kimlik kartı, gövdedeki
   kartlarla AYNI sol kenardan başlasın (hiza kararı; bkz. .lw-ps-body notu). */
.lw-ps-head { display:flex; align-items:center; gap:.6rem; padding:1rem .9rem; background:var(--bg-surface); border-bottom:1px solid var(--border); flex:none; }
.lw-ps-head-ic { width:34px; height:34px; border-radius:var(--lw-r-ic,8px); background:var(--light-primary); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none; }
.lw-ps-head h3 { margin:0; font-size:1.1rem; font-weight:600; color:var(--fg-heading); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-ps-back-btn { width:34px; height:34px; border-radius:var(--lw-r-ic,8px); border:0; background:var(--light-secondary); color:var(--fg-body); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; font-size:1rem; }
.lw-ps-back-btn:hover { background:var(--light-primary); color:var(--primary); }
.lw-ps-head-x { width:34px; height:34px; border-radius:var(--lw-r-ic,8px); border:0; background:transparent; color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.lw-ps-head-x:hover { background:var(--light-danger); color:var(--danger); }
/* -- 14.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği — düz/flush panel denemesi; geri alınabilir) — gövde flush
   (yalnız üstte .5rem nefes), panel .lw-sec'leri border/radius'suz. Index.cshtml inline bloğuyla BİREBİR senkron. */
/* -- 28.07.2026 ek&claude-Opus-5 (denetim bulgusu) — overscroll-behavior:contain: gövdenin sonuna gelince
   devam eden kaydırma DOKÜMANA zincirlenmesin. Zincirlenirse Safari alt çubuğunu geri açıyor, 100dvh o anda
   60-100px kısalıyor ve tabbar/Kaydet tekrar çubuğun altına giriyordu — düzeltmenin çözdüğü şikâyetin aynısı,
   bu kez hareketin ortasında. (body.lw-ps-lock{overflow:hidden} iOS'ta tek başına yeterli bir kilit değil.) */
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — HİZA. Gövde padding:0 + padding-top:.5rem idi; kartlar
   panel kenarına DAYALIYDI ve yatay nefesi her bölüm kendi iç padding'inden alıyordu → panelde ÜÇ
   farklı sol kenar oluşuyordu (.lw-sa 1rem · .lw-ps-head/.lw-ps-idcard-fixed 1.15rem · .lw-sec 1.3rem).
   Boşluk tek noktaya (gövdeye) taşındı; kart iç padding'i 1rem'e sabitlendi.
   🔴 Gömülü Sohbet pane'i MUAF — aşağıda .lw-oc-pane.lw-chat-pane negatif margin ile full-bleed'e
   döndürülüyor (14.07'de tam bu yüzden -1.1rem margin'den margin:0'a çevrilmişti). */
.lw-ps-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:.5rem .9rem; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11 · denetim düzeltmesi) — İKİNCİ PANEL (form) MUAF.
   Yukarıdaki yatay padding yalnız ANA panelin kart hizası için; ikinci panelde formun kabı
   (.lw-sec) .lw-oc-pane İÇİNDE OLMADIĞI için kart kuralına girmiyor, yani flush kalıyor
   (border-radius:0). Yatay padding kalsaydı köşesiz beyaz bir slab panel kenarından .9rem
   içeride durur, dark'ta iki zemin farkıyla açıkça görünürdü. Dikey padding KALIYOR. */
.lw-ps-section .lw-ps-body { padding-left:0; padding-right:0; }
.lw-ps-body::-webkit-scrollbar { width:7px; }
.lw-ps-body::-webkit-scrollbar-thumb { background:#d9d7e4; border-radius:4px; }
html.dark-layout .lw-ps-body::-webkit-scrollbar-thumb { background:#434968; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — flush sıfırlaması BURADA KALIYOR: .lw-sec yalnız sekme
   bölümü değil, İKİNCİ paneldeki 8 FORMUN da kabı (_MeetingForm:55 · _ExternalContactForm:41 ·
   _OpportunityForm:26 · _OpportunityFinalizeForm:29 · _FinalizeForm:30 · _DisqualifyForm:14 ·
   _DeleteConfirm:13 · PpChats/_QuickContactForm:27). Sıfırlama kaldırılsaydı taban .lw-sec'in
   çerçeve+gölgesi formlara da inip "kart içinde kart" olurdu. Kart görünümü bunun yerine bir alttaki
   pane-scoped kuralla (0,3,0) geri veriliyor — formlar .lw-oc-pane İÇİNDE OLMADIĞI için etkilenmez. */
.lw-ps-body .lw-sec { box-shadow:none; border:none; border-radius:0; margin-bottom:.75rem; }
.lw-ps-body .lw-sec:last-child { margin-bottom:0; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — KART KABI: her sekmede aynı. 14.07.2026'da başlayan
   "flush panel" denemesi Sohbet + İletişim'de geri alınmış, Etkinlik/Takip/Fırsat'ta bırakılmıştı
   (aşağıdaki 14.07 notu) → panelde iki ayrı görsel dil vardı. Yarım kalan geri alma tamamlandı.
   background yazılmadı çünkü GEREKSİZ: taban .lw-sec zaten var(--bg-surface) veriyor ve buraya
   yazılsaydı html.dark-layout .lw-sec (0,2,1) kuralı da AYNI değeri bildiriyor (mükerrer, bilinçli bırakıldı). */
.lw-ps-body .lw-oc-pane .lw-sec,
.lw-ps-base .lw-ps-body > .lw-sec { border:1px solid var(--border); border-radius:var(--lw-r-card,12px); box-shadow:var(--lw-shadow-soft,0 3px 12px rgba(34,41,47,.04)); }
/* Pane başlıkları (Etkinlikler/Fırsat/Sohbet) panel head'iyle tekrar → gizle. Takip dizisi başlığı (ad + "Takibi
   Sonlandır" butonu) İSTİSNA — .lw-fu-seq korunur (aksi halde sonlandırma butonu kaybolurdu). */
/* -- 14.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — GERİ ALMA: flush denemesi Sohbet + İletişim (summary)
   pane'lerini bozdu → yalnız bu ikisi eski görünüme döner (Etkinlik/Fırsat/Takip flush KALIR). Summary: 1.1rem inset
   + iletişim kartı çerçeve/radius/başlık. Chat: boş-sohbet kartı çerçeve/radius/başlık (full-bleed margin yukarıda onarıldı). */
.lw-oc-pane[data-pane="summary"] { padding:0; } /* -- 21.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — İletişim pane padding kaldırıldı (Sohbet pane hariç, o zaten padding:0). */
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — buradaki İKİ `.lw-sec { border + radius }` kuralı SİLİNDİ:
   çerçeve+yarıçap artık yukarıdaki pane-scoped kart kuralında, bu ikisi mükerrer kalıyordu. Yalnız
   İletişim + Sohbet'e kart görünümü veren 14.07 geri-alması böylece BEŞ pane'e genişledi.
   Aşağıdaki iki `.lw-sec-head { display:flex }` kuralı KALIYOR — onlar başlık görünürlüğünü yönetiyor
   ve o iş Faz 12'de ele alınacak (bu faz markup'a dokunmaz). */
.lw-ps-idcard { display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
/* -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği, madde 5) — kimlik kartı artık İletişim pane'inin içinde
   değil, .lw-ps-head ile .lw-ps-body'nin KARDEŞİ → her sekmede sabit görünür. _Card360Styles.cshtml ikizi ile senkron. */
.lw-ps-idcard-fixed { flex:none; margin:0; padding:.8rem .9rem; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.lw-ps-idcard-fixed .lw-ps-idmeta { flex:1; min-width:0; }
/* -- 03.08.2026 mk&claude-Opus-5 (kullanıcı isteği, madde 5) — .lw-ps-idassign SİLİNDİ: kimlik kartındaki ayrı
   temsilci-atama ikon butonu kalktı, atama artık temsilci ADINA tıklanarak yapılıyor (.lw-oc-agent, aşağıda).
   _Card360Styles.cshtml ikizi ile senkron. */
body.lw-chat-focus .lw-ps-overlay .lw-ps-idcard-fixed { display:none; }
.lw-ps-idmeta { min-width:0; }
.lw-ps-name { font-size:1.15rem; font-weight:600; color:var(--fg-heading); }
.lw-ps-dispo { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.lw-ps-dispo .lw-dispo-btn { flex:1 1 calc(50% - .25rem); }
.lw-ps-tabbar { display:none; flex:none; align-items:stretch; border-top:1px solid var(--border); background:var(--bg-surface); padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0px)); }
.lw-ps-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; border:0; background:transparent; color:var(--fg-heading); cursor:pointer; font-family:var(--font-sans); font-size:.68rem; font-weight:500; padding:.4rem .1rem .3rem; border-radius:var(--lw-r-box,10px); transition:color .12s; position:relative; }
.lw-ps-tab i { font-size:1.2rem; }
.lw-ps-tab span { line-height:1; }
.lw-ps-tab.active { color:var(--primary); }
.lw-ps-tab.active i { color:var(--primary); }
.lw-ps-tab.active::before { content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:2px; background:var(--primary); }
/* ---- Ortak içerik stilleri (pane gövdesi — İletişim; reuse) ---- */
.lw-oc-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.35rem; font-size:.83rem; color:var(--fg-heading); }
.lw-oc-meta .lw-src-dot { position:static; width:18px; height:18px; border:0; flex:0 0 18px; }
.lw-oc-meta .lw-src-dot i { font-size:10px; }
/* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı bulgusu) — kanal logosu + kampanya adı YAN YANA. Eskiden düz bir
   <span> sarmalıyordu; o satır-içi bağlamda .lw-src-dot'un display:flex'i BLOK kutu olduğu için satırı kırıyor,
   kampanya adı logonun altına düşüyordu (logo tek başına kalınca da ortalanmamış görünüyordu).
   flex + align-items:center ikisini aynı satırda dikey ortalar. min-width:0 zinciri (.lw-oc-src ve .lw-oc-camp)
   ellipsis için ŞART — flex öğesinin varsayılan min-width:auto taşmayı engelleyip kısaltmayı bozardı.
   .lw-src-dot'a flex:0 0 18px: uzun adda daire ezilip oval olmasın. Index.cshtml inline ile BİREBİR senkron. */
.lw-oc-src { display:flex; align-items:center; gap:.35rem; min-width:0; max-width:100%; }
.lw-oc-camp { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* -- 03.08.2026 mk&claude-Opus-5 (kullanıcı isteği, madde 5) — kimlik kartındaki TIKLANABİLİR temsilci.
   Meta şeridinin bir parçası olduğu için görünüm düz metne yakın tutuldu (buton kabuğu YOK: kendi zemini/
   kenarlığı olsa rozet+kanal çipiyle üç ayrı kutu yan yana gelirdi); tıklanabilirlik hover'da renk + alt
   çizgiyle bildirilir. Ad uzunsa şerit sarmasın diye ellipsis. site.css/_Card360Styles.cshtml senkron. */
/* -- 04.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — temsilci adı primary. Kimlik kartında artık kendi satırında
   duruyor ve gri okunduğunda "durum/kanal" rozetleriyle aynı ağırlıkta, yani tıklanabilir olduğu anlaşılmıyordu. */
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "kalem ikonu ve temsilci adı anlaşılmıyor") —
   .lw-oc-agent (düz metin + kalem) KALDIRILDI. 03.08'de ikon fa-user-tag → fa-pencil yapılmıştı ama
   sorun ikon DEĞİL, KUTUSUZLUKTU: çerçevesiz düz metnin tıklanabilir olduğunu hiçbir şey söylemiyordu.
   Yeni dil = AÇILIR LİSTE çipi: "Temsilci" etiketi NE olduğunu, çerçeve + aşağı ok TIKLANABİLİR
   olduğunu söyler. Yarıçap pill (rozet ailesiyle aynı). Temsilcisizde kesikli çerçeve + primary metin.
   🔴 .lw-assign sınıfı ve data-card-id KORUNDU — Card360Actions.js:2103/:2127 ve LeadCenterIndex.js:1112
   bunlara bağlı (closest('.lw-assign') + querySelector('.lw-assign[data-card-id]') spinner hedefi). */
.lw-agentpick-lbl { font-size:.72rem; color:var(--fg-heading); flex:none; }
.lw-agentpick { display:inline-flex; align-items:center; gap:.35rem; min-width:0; max-width:100%;
    border:1px solid var(--border-input); border-radius:var(--lw-r-pill,999px);
    background:var(--bg-surface); color:var(--fg-body); font-family:var(--font-sans);
    font-size:.78rem; font-weight:600; padding:.18rem .5rem .18rem .45rem; cursor:pointer;
    transition:border-color .13s, color .13s, background .13s; }
.lw-agentpick-nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-agentpick > i { color:var(--fg-muted); flex:none; }
.lw-agentpick .lw-agentpick-chv { font-size:.7em; margin-left:.05rem; }
.lw-agentpick:hover { border-color:var(--primary); color:var(--primary); background:var(--light-primary); }
.lw-agentpick:hover > i { color:var(--primary); }
.lw-agentpick:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
/* Temsilci YOK: kesikli çerçeve = "burası boş, doldurulabilir" */
.lw-agentpick.empty { border-style:dashed; color:var(--primary); }
.lw-agentpick.empty > i { color:var(--primary); }
/* Yetkisiz kullanıcı: aynı kutu dili ama tıklanamaz → çerçevesiz soft rozet, ok YOK. */
.lw-agentpick.static { border-color:transparent; background:var(--light-secondary); color:var(--fg-body); font-weight:500; cursor:default; }
.lw-dispo-btn { flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.62rem .8rem; border-radius:var(--lw-r-box,10px); border:1px solid var(--border); background:var(--bg-surface); color:var(--fg-body); font-family:var(--font-sans); font-size:.87rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform .13s,box-shadow .13s,background .13s,color .13s,border-color .13s; }
.lw-dispo-btn i { color:var(--fg-muted); transition:color .13s; }
.lw-dispo-btn:hover { transform:translateY(-1px); box-shadow:0 5px 14px -6px rgba(75,70,92,.35); }
.lw-dispo-btn.danger:hover { background:var(--light-danger); border-color:transparent; color:var(--danger); }
.lw-dispo-btn.danger:hover i { color:var(--danger); }
.lw-dispo-btn.info:hover { background:var(--light-info); border-color:transparent; color:var(--info); }
.lw-dispo-btn.info:hover i { color:var(--info); }
.lw-dispo-btn.convert:hover { background:var(--light-primary); border-color:transparent; color:var(--primary); }
.lw-dispo-btn.convert:hover i { color:var(--primary); }
.lw-dispo-btn.warn:hover { background:var(--light-warning); border-color:transparent; color:var(--warning); }
.lw-dispo-btn.warn:hover i { color:var(--warning); }
html.dark-layout .lw-dispo-btn { background:transparent; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — kart dili tekleştirildi: padding 1.15rem/1.3rem → 1rem
   (panelde üç farklı sol kenardan biriydi; mobilde de hiçbir @media bunu ezmiyordu, yani 360px
   telefonda masaüstü boşluğu taşınıyordu), margin 1rem → .75rem (kart arası gap), yarıçap
   .428rem → --lw-r-card, gölge --shadow-card → --lw-shadow-soft (kart içinde kart hissi olmasın).
   background:#fff → var(--bg-surface): dark override'ı zaten aynı şeyi yapıyordu, hardcode gereksizdi
   (alttaki dark kuralı mükerrer kaldı ama BİLİNÇLİ bırakıldı — silmek özgüllük zincirini oynatır). */
.lw-sec { background:var(--bg-surface); border-radius:var(--lw-r-card,12px); box-shadow:var(--lw-shadow-soft,0 3px 12px rgba(34,41,47,.04)); padding:1rem; margin-bottom:.75rem; }
html.dark-layout .lw-sec { background:var(--bg-surface); }
.lw-sec-head { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; }
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı mockup'ı) — başlık kart GENİŞLİĞİNDE bir ayırıcıyla
   gövdeden ayrılır; kartın 1rem padding'i negatif margin ile geri alınır. Tüm pane kartlarına
   uygulanır (tekdüzelik); ikinci panel formlarında .lw-sec-head YOK, onlar etkilenmez. */
.lw-ps-body .lw-sec > .lw-sec-head { margin:-1rem -1rem .85rem; padding:.8rem 1rem; border-bottom:1px solid var(--border); }
.lw-sec-head h4 { font-size:1rem; font-weight:600; color:var(--fg-heading); margin:0; }
.lw-sec-head i { color:var(--primary); }
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı mockup'ı) — İLETİŞİM KARTI SATIR DİLİ.
   Eskiden: çerçevesiz, ayırıcısız, .92rem (panelin en büyük ikincil metni) ve değer düz gövde
   renginde → kart "liste" gibi değil "paragraf" gibi okunuyordu. Mockup: satırlar KESİKLİ
   ayırıcıyla bölünür, etiket soluk, değer KOYU+KALIN. Boyut .85rem ile .lw-sa-t'ye hizalandı. */
.lw-kv { display:flex; align-items:center; gap:.7rem; padding:.55rem 0; font-size:.85rem; }
.lw-kv + .lw-kv { border-top:1px dashed var(--border); }
.lw-kv i { width:1.15rem; text-align:center; color:var(--fg-muted); flex:none; }
/* -- 03.08.2026 mk&claude-Opus-5 (madde 4) — etiket kolonu 88px → 100px: yeni "Ekleyen Kişi" satırı 88px'e
   sığmayıp iki satıra kırılıyordu. Kolon SABİT kaldığı için tüm satırlar hizalı; yalnız değerler 12px sağa
   kayar. _Card360Styles.cshtml ikizi ile senkron. */
.lw-kv .k { color:var(--fg-heading); width:100px; flex:none; }
.lw-kv .v { color:var(--fg-heading); font-weight:600; min-width:0; }
.lw-oc-phone { display:flex; align-items:center; gap:.5rem; padding:.15rem 0; }
.lw-oc-phone-num { font-variant-numeric:tabular-nums; }
.lw-oc-phone .pp-acts { display:flex; gap:.2rem; }
/* Mockup: dolu açık-gri daire. Eskiden şeffaftı ve yalnız hover'da görünüyordu → tıklanabilir
   oldukları anlaşılmıyordu. Hover renkleri (.lw-qbtn:hover / .wa:hover) AYNEN geçerli. */
.lw-oc-phone .lw-qbtn { width:30px; height:30px; background:var(--bg-hover); }
/* -- 04.09.2026 ek&claude-Opus-5 — "WhatsApp Web" HAP butonu kuralı yeniden SİLİNDİ: buton aynı gün kısa süre
   geri konup kullanıcı isteğiyle tekrar kaldırıldı. WhatsApp Web girişi menünün son satırı. _Card360Styles ile senkron. */
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — KOPYALA butonu. İki ikon üst üste durur;
   .is-copied sınıfı geldiğinde kopya ikonu gizlenir, ✓ görünür ve buton yeşil yanıp sönerek
   dinlenme rengine döner. Süreyi CSS animasyonu tutar, JS sınıfı 'animationend' ile kaldırır —
   setTimeout YOK. Bitiş rengi .lw-oc-phone .lw-qbtn'in dinlenme zeminiyle AYNI (var(--bg-hover))
   ki animasyon bitince sıçrama olmasın. */
.lw-qbtn.lw-copy .lw-copy-ok { display:none; }
.lw-qbtn.lw-copy.is-copied > i:first-child { display:none; }
.lw-qbtn.lw-copy.is-copied .lw-copy-ok { display:block; }
.lw-qbtn.lw-copy.is-copied { color:var(--success); animation:lw-copyflash 1.3s ease-out; }
@keyframes lw-copyflash { 0%, 65% { background:var(--light-success); } 100% { background:var(--bg-hover); } }
/* Azaltilmis hareket: animasyon KALDIRILAMAZ — 'animationend' fire etmezse JS sinifi silemez ve buton
   yesil/tikli TAKILI kalir. Bunun yerine gecis basamaklanir: renk yumusak GECMEZ, sure korunur. */
@media (prefers-reduced-motion: reduce) { .lw-qbtn.lw-copy.is-copied { animation-timing-function:steps(1,end); } }
.lw-tagrow { display:flex; gap:.4rem; flex-wrap:wrap; }
.lw-oc-empty { text-align:center; padding:2.4rem 1rem; font-size:.85rem; color:var(--fg-heading); }
/* -- 07.08.2026 ek&claude-Opus-5 — metin fg-heading'e çıkınca ikon da onu DEVRALIYORDU; kullanıcı
   isteği yalnız METİNLER içindi → ikon açıkça muted'ta tutuluyor. */
.lw-oc-empty .ei { font-size:2rem; opacity:.5; margin-bottom:.5rem; color:var(--fg-muted); }
/* ---- Scroll kilidi + mobil tam ekran ---- */
/* -- 31.07.2026 mk&claude-Fable-5 — scrollbar-gutter İKİZDE VARDI, burada YOKTU (_Card360Styles:173).
   overflow:hidden belge kaydırma çubuğunu kaldırıyor → sayfa açılış anında yana zıplıyor ve viewport
   genişliği değiştiği için window 'resize' tetikleniyor (panelin giriş animasyonunu bastıran zincirin
   ilk halkası). Gutter sabitlenince ikisi de olmuyor. */
/* -- 04.08.2026 ek&claude-Opus-5 (kullanıcı bulgusu: kayma SÜRÜYORDU) — gutter body'de İŞE YARAMIYOR:
   scrollbar-gutter yalnız KÖK elemandan viewport'a taşınır (overflow'un aksine body'den taşınmaz) ve
   body'nin overflow'u viewport'a taşındığı an body'nin used değeri `visible` olur — yani body scroll
   container bile değildir, ayrılacak gutter yoktur. Kural html'e taşındı; .lw-ps-gutter'ı Card360.js
   lock() YALNIZ gerçekten klasik çubuk varken ekler (overlay çubuklu/kısa sayfada stable ters yöne
   kaydırırdı). */
/* -- 05.08.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "aşağı kaydırıp bir karta basınca 360 paneli
   açılırken sayfa en üste çıkıyor, kaldığım yerde açılmıyor") — `body.lw-ps-lock{overflow:hidden}`
   SİLİNDİ. 04.08'de "geriye-uyum + ikinci kilit katmanı" diye bırakılmıştı ama html kuralı eklendiği
   an ZARARLI hale geldi:
     · Kök elemanın overflow'u HER ZAMAN viewport'a taşınır. 04.08 ÖNCESİ html `visible` olduğu için
       taşıyan BODY'ydi; taşıyan elemanın kendi used değeri `visible` olur → body kutusu hiçbir şeyi
       kırpmıyordu, kilit yalnız viewport'taydı (doğru davranış, scroll offset korunuyordu).
     · html'e overflow:hidden yazılınca taşıma html'den olur → body'nin overflow'u ARTIK TAŞINMAZ ve
       BODY'NİN KENDİSİNE uygulanır. Tema `html body{height:100%}` veriyor (theme5/components.css:9)
       → body tam viewport boyunda bir scroll container'a dönüşür ve altındaki içeriği KIRPAR.
     · Kırpılınca viewport'un kaydırılabilir taşması da kalmaz (scrollHeight == clientHeight) →
       tarayıcı scrollTop'u 0'a KENETLER. Panel kapanıp kilit kalktığında offset çoktan kaybolmuştur;
       kullanıcının gördüğü "en üste zıpladı" budur. (Aynı kural body'de TEK BAŞINAYKEN zararsızdı —
       bu yüzden 28-31.07 boyunca fark edilmedi.)
   Kilit tek satırda html'de: viewport kırpılır, scroll offset yerinde kalır. Card360.js lock() sınıfı
   body'ye yazmaya DEVAM ediyor (sınıfı bekleyen ileriki kurallar için kanca) — 🔴 body.lw-ps-lock'a
   overflow / height / position VERİLMEMELİ, aynı hata geri gelir. */
html.lw-ps-lock { overflow:hidden; }
html.lw-ps-lock.lw-ps-gutter { scrollbar-gutter:stable; }
@media (max-width:760px){
    /* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "mobilde alttaki sekme çubuğu Safari'de görünmüyor" +
       "fırsat ekle formunda Kaydet'e ulaşamıyorum") — kök neden 100vh idi. Mobil tarayıcılarda `vh` BÜYÜK
       görünüm alanını ölçer: alttaki adres/arama çubuğu YOK sayılır. Panel position:fixed + top:0 + height:100vh
       olduğu için kutunun alt ~60-100px'i ekranın DIŞINDA kalıyordu ve overflow:hidden yüzünden oraya erişim yoktu:
         · ana panelde en altta duran .lw-ps-tabbar (mobil sekme çubuğu) çubuğun altında kalıyordu,
         · form panelinde .lw-ps-body sonuna kadar kaydırılsa bile son içerik (.lw-tl-actions → Kaydet/Vazgeç)
           görünür alana hiç girmiyordu — "aşağıya kayamıyorum" hissi bundan.
       Çözüm 100dvh (dynamic viewport height): tarayıcı çubuğu göründüğünde/gizlendiğinde yükseklik ONUNLA birlikte
       küçülüp büyür. 100vh SATIRI ÖNCE BIRAKILDI — dvh bilmeyen eski tarayıcı ikinciyi yok sayıp eski davranışa
       düşer (aynı desen app-chat-override-v2.css:760'ta zaten kullanılıyor).
       KLAVYE ayrı bir iş: dvh tarayıcı çubuğunu izler ama ekran klavyesini İZLEMEZ. Onu Card360.js layout()
       içinde visualViewport.height'tan gelen INLINE yükseklik çözüyor (inline stil bu kuralı ezer); API yoksa
       buradaki 100dvh devralır.
       ⚠️ env(safe-area-inset-*) BU UYGULAMADA HEP 0: _Layout.cshtml'deki viewport meta'sında `viewport-fit=cover`
       yok, dolayısıyla iOS layout viewport'u zaten sistem çubuklarından içeri alıyor. Aşağıdaki alt boşluk bu
       yüzden fiilen düz .6rem'lik KOZMETİK nefes payıdır — asıl düzeltme 100dvh + inline yükseklik. env() terimi
       ileride viewport-fit=cover eklenirse kendiliğinden devreye girsin diye zararsız biçimde bırakıldı;
       eklemek istenirse TÜM sabit/alta-yaslı elemanların app genelinde yeniden denetlenmesi gerekir. */
    .lw-ps-panel { height:100vh; height:100dvh; border-radius:0; top:0; transform-origin:center; }
    .lw-ps-rail { display:none; }
    .lw-ps-content { background:var(--bg-surface); }
    /* -- 07.08.2026 ek&claude-Opus-5 (E2E denetimi) — yatay padding de .6rem'e iner: masaüstünde
       kurulan "baş şeridi + kimlik kartı + kart dış kenarı TEK çizgide" hizası mobilde bozuluyordu
       (gövde .6rem'e inerken bu ikisi .9rem'de kalmıştı). */
    .lw-ps-head { padding:calc(1rem + env(safe-area-inset-top,0px)) .6rem 1rem; }
    .lw-ps-idcard-fixed { padding-left:.6rem; padding-right:.6rem; }
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — mobilde gövde nefesi .9rem → .6rem. Aşağıdaki
       .lw-ps-section .lw-ps-body kuralı (0,2,0) bu kuralı (0,1,0) ALT kenarda yener; değerler
       bugün aynı olduğu için fark görünmez ama ileride sapmasın diye ikisi yan yana duruyor. */
    .lw-ps-body { background:var(--bg-app); padding:.6rem; }
    .lw-ps-section .lw-ps-body { padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); }
    .lw-ps-tabbar { display:flex; }
}
/* ===================== END: LeadCenter Faz 5.5 ===================== */

/* ===================== BEGIN: LeadCenter Faz 6 (360 panel Sohbet sekmesi — gömülü chat) ===================== */
/* -- 07.07.2026 ek&claude-Opus-4.8 (Faz 6) — Vuexy .chat-application 360 panelin chat pane'ine IN-PLACE taşınır.
   Dikey stack: KK10 kanal/sohbet seçici (üstte yatay şerit) + konuşma (altta, iç scroll #divUserChats).
   ⚠️ app-chat.css tam-sayfa için tasarlı; bu override'lar panele sığdırır — görsel iterasyon kullanıcıda beklenir. */
.lw-chat-holder-off { display:none; } /* holder her zaman gizli (hidden attr); iskelet pane'e taşınır */
/* -- 14.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — full-bleed margin'i .lw-ps-body padding:0'a göre onarıldı
   (eski -1.1rem, body'nin 1.1rem padding'ini negatiflemek içindi; artık padding yok → margin:0/width:100%). */
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — 🔴 NEGATİF MARGIN GERİ GELDİ. Faz 11 gövdeye .5rem/.9rem
   padding verdi (hiza kararı); gömülü sohbet ise FULL-BLEED olmak zorunda — yatay padding kanal
   şeridini/konuşmayı iki yandan 1.8rem daraltır, dikey padding ise `height:100%` padding'i saymadığı
   için pane'i gövdeden .5rem taşırıp mobilde composer'ı tabbar'ın altına indirir (28.07'de 100dvh ile
   çözülen şikâyetin aynısı). Çözüm 14.07 öncesinin aynısı: gövde padding'ini negatifleyen margin +
   telafi edilmiş yükseklik. Değerler .lw-ps-body padding'ine BAĞLI — biri değişirse ikisi de değişir.
   Mobil karşılığı aşağıdaki @media(max-width:760px) bloğunda (.6rem). */
.lw-oc-pane.lw-chat-pane { height:calc(100% + 1rem); margin:-.5rem -.9rem; width:auto; padding:0; display:flex; flex-direction:column; min-height:0; }
.lw-chat-pane .lw-chat-mount,
.lw-chat-pane .lw-chat-app,
.lw-chat-pane .lw-chat-app > .content-area-wrapper { flex:1; min-height:0; width:100%; display:flex; }
.lw-chat-pane .lw-chat-app > .content-area-wrapper { flex-direction:column; height:100%; }
/* KK10 seçici — sol sidebar'ı üstte yatay şeride çevir */
.lw-chat-pane .sidebar-left { position:static; width:100%; height:auto; flex:none; transform:none; box-shadow:none; border-right:0; border-bottom:1px solid var(--border); z-index:auto; }
.lw-chat-pane .sidebar-left .sidebar,
.lw-chat-pane .sidebar-left .sidebar-content,
.lw-chat-pane .sidebar-left #users-list { position:static; width:100%; height:auto; max-height:none; padding:0; box-shadow:none; }
.lw-chat-pane .sidebar-close-icon,
.lw-chat-pane .chat-list-title { display:none; }
.lw-chat-pane #chat-list { display:flex; flex-direction:row; align-items:stretch; gap:.4rem; overflow-x:auto; overflow-y:hidden; padding:.5rem; margin:0; list-style:none; }
.lw-chat-pane #chat-list .chat-list-item { flex:0 0 auto; width:auto; max-width:230px; min-width:150px; margin:0; border-radius:var(--lw-r-box,10px); padding:.4rem .55rem; border:1px solid var(--border); background:var(--bg-surface); }
.lw-chat-pane #chat-list .chat-list-item.active { border-color:var(--primary); background:var(--light-primary); }
.lw-chat-pane #chat-list .chat-list-item .chat-meta,
.lw-chat-pane #chat-list .chat-list-item .chat-last-message { display:none; }
.lw-chat-pane #chat-list .chat-list-item .chat-name { font-size:.85rem; }
/* Konuşma — kalan yüksekliği doldur, iç scroll */
.lw-chat-pane .content-right { position:static; flex:1; min-height:0; width:100%; left:auto; }
.lw-chat-pane .content-right > .content-wrapper,
.lw-chat-pane .content-right .content-body,
.lw-chat-pane .chat-app-window,
.lw-chat-pane .active-chat { height:100%; min-height:0; display:flex; flex-direction:column; width:100%; }
.lw-chat-pane #divUserChats { flex:1; min-height:0; overflow-y:auto; }
.lw-chat-pane .user-profile-sidebar { display:none; } /* profil sidebar panelde gizli (v1; P2) */
.lw-chat-pane .start-chat-area { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* Chat popup'ları panel (overlay z 1040) ÜSTÜNDE kalmalı (msg ⋯ + emoji + reaksiyon) */
#emoji-tooltip, #reaction-emoji-tooltip { z-index:1060; }
.msg-action-menu, .quick-react-popup { z-index:1066; }
@media (max-width:760px) {
    /* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — bu kural 14.07'den beri ÖLÜYDÜ (taban kural zaten
       margin:0/width:100% veriyordu). Faz 11'in mobil gövde padding'ini (.6rem) negatiflemek için
       yeniden hayata döndü — masaüstü karşılığı taban .lw-oc-pane.lw-chat-pane kuralında. */
    .lw-oc-pane.lw-chat-pane { margin:-.6rem; width:auto; height:calc(100% + 1.2rem); }
}
/* ===================== END: LeadCenter Faz 6 ===================== */

/* ===================== BEGIN: LeadCenter Faz 7 (Etkinlik + Takip sekmeleri) =====================
   -- 08.07.2026 ek&claude-Fable-5 — TASARIM REVİZE (kullanıcı): v4/claude-design mockup .lw-act dili portu
   (lead-workspace-v4 styles.css 977-1017). Renkler token'lardan (.lw-oc-host scope) → ayrı dark override yok.
   Satır menüsü mevcut .lw-phone-pop stilini reuse eder. Index.cshtml inline bloğuyla BİREBİR senkron. */
.lw-tl-actions { display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı mockup'ı) — kart altı aksiyon ŞERİDİ: açık zeminli,
   üstten çizgili, kartın alt köşelerine oturan ayrı bant. Kapsam pane kartlarıyla SINIRLI —
   ikinci panel formlarındaki .lw-tl-actions (Vazgeç/Kaydet) flush kalmalı, orada kart yok. */
.lw-ps-body .lw-oc-pane .lw-sec > .lw-tl-actions { margin:.85rem -1rem -1rem; padding:.7rem 1rem; border-top:1px solid var(--border); background:var(--bg-hover); border-radius:0 0 var(--lw-r-card,12px) var(--lw-r-card,12px); }
.lw-acts { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — SATIR DİLİ TEKLEŞTİRİLDİ. .lw-act'ın tabanında ZEMİN YOKTU;
   rengin tamamı acc-* pastel dolgusundan geliyordu (aşağıda kaldırıldı) → taban zemin açıkça verilmeli.
   Seçilen değer .lw-sa-row ile BİREBİR aynı (var(--bg-surface) + dark'ta transparent, aşağıda):
   panelde iki ayrı "liste satırı" dili vardı — Etkinlik/Takip satırları tam pastel dolgu, öneri
   satırları nötr çerçeve. Artık ikisi de "çerçeveli nötr satır"; durum bilgisi sol 3px şerit +
   ikon rozeti + sağdaki rozette taşınıyor. Yarıçap .357rem → --lw-r-box. */
.lw-act { display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--lw-r-box,10px); background:var(--bg-surface); }
html.dark-layout .lw-act { background:transparent; }
.lw-act-ic { width:34px; height:34px; border-radius:var(--lw-r-ic,8px); flex:none; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.lw-act-ic.plan { background:var(--light-warning); color:var(--warning); }
/* -- 21.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — Etkinlik/Takip satırı durum-bazlı renk kodu (PpMeetings
   Index paritesi): sol renk şeridi + solid ikon rozeti + hafif zemin tonu; accent sınıfı satıra yazılır.
   lw-act-next = "Bugünün Takipleri"nden açılan panelde sıradaki (bugüne planlı) adım vurgusu. Index.cshtml inline ile BİREBİR senkron. */
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — pastel DOLGU (background:var(--light-*)) kaldırıldı;
   sol 3px durum şeridi ve aşağıdaki dolu ikon rozeti AYNEN duruyor. Sebep: dolgu satırları
   öneri satırlarından (.lw-sa-row) tamamen ayrı bir dile sokuyordu ve kart içinde renk yükü
   yaratıyordu. Durum bilgisi kaybolmuyor — şerit + ikon rozeti + sağdaki tema rozeti taşıyor. */
.lw-act.acc-info { border-left:3px solid var(--info); }
.lw-act.acc-success { border-left:3px solid var(--success); }
.lw-act.acc-danger { border-left:3px solid var(--danger); }
.lw-act.acc-secondary { border-left:3px solid var(--secondary); }
/* -- 07.08.2026 ek&claude-Opus-5 — acc-warning GERİ: Faz 12'de "tüketicisi yok" diye silinmişti,
   doğruydu; ama ton artık ActivityConclusion.GetConclusionClasses'tan geliyor ve o "MeetAgain"
   satırları için bg-light-warning üretiyor (takvimdeki meeting-again ile aynı). Artık üretiliyor. */
.lw-act.acc-warning { border-left:3px solid var(--warning); }
.lw-act.acc-info .lw-act-ic { background:var(--info); color:#fff; }
.lw-act.acc-success .lw-act-ic { background:var(--success); color:#fff; }
.lw-act.acc-danger .lw-act-ic { background:var(--danger); color:#fff; }
.lw-act.acc-secondary .lw-act-ic { background:var(--secondary); color:#fff; }
.lw-act.acc-warning .lw-act-ic { background:var(--warning); color:#fff; }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — acc-* ile AYNI süpürme: background:var(--light-primary)
   kaldırıldı, yoksa dolgusu kalkan satırların arasında TEK dolgulu satır türü olarak kalırdı.
   Vurgu mor çerçeve + mor halkada duruyor, "sıradaki" okunurluğu bozulmuyor. */
.lw-act.lw-act-next { border:1px solid var(--primary); box-shadow:0 0 0 3px var(--primary-a12); }
/* -- 05.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — Etkinlikler ekranından açılan panelde TIKLANAN etkinliğin
   vurgusu; dil .lw-opp-item.active'ten alındı (mor halka + yumuşak gölge, radius .lw-act'ten).
   border-left KASITLI dokunulmadı: durum accent şeridi (acc-info/success/danger…) korunsun.
   .lw-act-next'ten farkı: zemini boyamaz → durum rengi okunur kalır. _Card360Styles.cshtml ile BİREBİR senkron. */
.lw-act.active { border-top-color:var(--primary-a55); border-right-color:var(--primary-a55); border-bottom-color:var(--primary-a55); box-shadow:0 0 0 3px var(--primary-a12), 0 6px 18px var(--primary-a12); }
.lw-act-main { flex:1; min-width:0; }
.lw-act-title { font-size:.92rem; font-weight:600; color:var(--fg-heading); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; overflow-wrap:anywhere; }
.lw-act-meta { font-size:.78rem; color:var(--fg-heading); margin-top:.1rem; overflow-wrap:anywhere; }
.lw-act-note { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
.lw-act .badge { flex:none; }
.lw-act-menu-btn { flex:0 0 auto; border:0; background:transparent; color:var(--fg-muted); width:30px; height:30px; border-radius:var(--lw-r-ic,8px); cursor:pointer; }
.lw-act-menu-btn:hover { background:var(--bg-hover); color:var(--fg-heading); }
/* -- 10.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — Notlar/Log SEGMENTİ (360 panelin Notlar sekmesi).
   Kurallar Görev 360'ın _Task360Styles.cshtml:410-414 bloğuyla AYNI; oradan TAŞINMADI, çünkü o dosya
   görev host'larında yüklü ve bu dosya panelin kendi ikiz sözleşmesine (site.css ↔ _Card360Styles.cshtml)
   tabi — iki ikiz borcunu birbirine bağlamak yerine kural iki panelde de kendi dosyasından okunur.
   Ham #fff yok; .tk-seg-b.on gölgesi --lw-shadow-soft'a bağlı (koyu tema karşılığı var). */
.tk-seg { display:flex; gap:3px; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:4px; margin-bottom:.75rem; }
.tk-seg-b { flex:1; border:0; background:transparent; color:var(--fg-body); font-family:var(--font-sans); font-size:.8rem; font-weight:600; padding:.42rem .6rem; border-radius:var(--lw-r-ic,8px); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }
.tk-seg-b.on { background:var(--bg-surface); color:var(--primary); box-shadow:var(--lw-shadow-soft,0 3px 12px rgba(34,41,47,.04)); }
html.dark-layout .tk-seg { background:var(--bg-app); }
html.dark-layout .tk-seg-b.on { background:var(--bg-surface); }
/* -- 04.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — takip planı satırında TARİH HAPI + sapma durumu.
   Mevcut .lw-act dili kullanıldı (ikon + başlık/meta + sağda eleman); tasarım paketinin .pr-* sözlüğü
   PORT EDİLMEDİ (paralel dil icat etme kuralı). Görünen tarih hapı satırın sağında, .lw-act-menu-btn'in
   durduğu yerde. Views/Shared/_Card360Styles.cshtml ikiziyle BİREBİR senkron tutulmalı. */
.lw-fu-date { flex:none; display:flex; align-items:center; gap:.35rem; font-family:var(--font-sans); font-size:.82rem; font-weight:600; color:var(--fg-heading); background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--lw-r-pill,999px); padding:.3rem .65rem; cursor:pointer; white-space:nowrap; transition:border-color .13s, color .13s, background .13s; }
.lw-fu-date i { color:var(--fg-muted); font-size:.8rem; }
.lw-fu-date:hover, .lw-fu-date.is-ppdt-open { border-color:var(--primary); color:var(--primary); }
.lw-fu-date:hover i, .lw-fu-date.is-ppdt-open i { color:var(--primary); }
/* -- 06.08.2026 ek&claude-Opus-5 (Faz 11) — `border-color` KISAYOLU üç longhand'e bölündü.
   Kısayol sol kenarı da boyuyordu; pastel dolgu varken fark edilmiyordu, ama dolgu kalkıp
   sol 3px şerit TEK durum sinyali olunca kısayol şeridi mor'a boyayıp bilgiyi yok ederdi.
   Aynı kalıp .lw-act.active kuralında zaten uygulanmış (birkaç satır yukarıda). */
.lw-act.is-moved { border-top-color:var(--primary-a45); border-right-color:var(--primary-a45); border-bottom-color:var(--primary-a45); }
/* JS'in ürettiği önizleme satırları (Card360Actions.js:938) acc-* TAŞIMAZ → korunacak durum şeridi
   yok, sol kenar da vurgulanmalı. Gerçek pane satırlarında acc-* şeridi bozulmadan kalır. */
.lw-act.lw-fu-prev.is-moved { border-left-color:var(--primary-a45); }
.lw-act.is-moved .lw-fu-date { background:var(--light-primary); border-color:transparent; color:var(--primary); }
.lw-act.is-moved .lw-fu-date i, .lw-act.is-moved .lw-act-meta { color:var(--primary); }
.lw-act.is-moved .lw-act-meta s { text-decoration:line-through; opacity:.75; }
.lw-fu-reset { display:flex; justify-content:flex-end; }
.lw-readonly { display:flex; align-items:center; gap:.5rem; padding:.571rem 1rem; background:var(--light-secondary); border-radius:var(--lw-r-box,10px); font-size:.92rem; color:var(--fg-body); }
.lw-oc-host .lw-field { margin-bottom:.7rem; }
.lw-oc-host .lw-field:last-child { margin-bottom:0; }
.lw-fu-seq .lw-sec-head h4 { flex:1; }
/* -- 23.07.2026 ek&claude-Fable-5 (kullanıcı isteği, revizyon 2) — [06.08.2026 Faz 12: SİLİNDİ] .lw-fu-disc GERİ GELDİ + şık buton görünümü: yumuşak kırmızı zemin, hover'da dolu kırmızı; ikon rengi .lw-sec-head i (var(--primary)) kuralını EZER. Ölü .lw-fu-confirm geri eklenmedi. Index.cshtml inline bloğuyla BİREBİR senkron */
.lw-mf-err { font-size:.82rem; margin-bottom:.5rem; }
/* -- 14.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — birleşik silme panosu (etkinlik+fırsat). Index.cshtml inline bloğuyla BİREBİR senkron */
.lw-del-lead { display:flex; align-items:flex-start; gap:.75rem; padding:.4rem 0 .2rem; }
.lw-del-ic { flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:var(--lw-r-ic,8px); background:var(--light-danger); color:var(--danger); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.lw-del-q { font-size:.92rem; font-weight:600; color:var(--fg-heading); }
.lw-del-title { color:var(--fg-heading); font-size:.9rem; margin-top:.15rem; overflow-wrap:anywhere; }
.lw-del-warn { display:flex; align-items:flex-start; gap:.4rem; background:var(--light-danger); color:var(--danger); border-radius:var(--lw-r-box,10px); padding:.55rem .7rem; font-size:.8rem; margin-top:.75rem; }
/* -- 23.07.2026 ek&claude-Fable-5 (kullanıcı isteği) — sonlandırma panosu bilgi notu + formda devam eden takip uyarısı (.lw-del-warn info/warning ikizleri). Index.cshtml inline bloğuyla BİREBİR senkron */
.lw-del-info { display:flex; align-items:flex-start; gap:.4rem; background:var(--light-info); color:var(--info); border-radius:var(--lw-r-box,10px); padding:.55rem .7rem; font-size:.8rem; margin-top:.75rem; }
.lw-mf-warn { display:flex; align-items:flex-start; gap:.4rem; background:var(--light-warning); color:var(--warning); border-radius:var(--lw-r-box,10px); padding:.55rem .7rem; font-size:.8rem; margin-bottom:.75rem; }
/* -- 23.07.2026 ek&claude-Fable-5 (kullanıcı isteği) — otomatik takip planı bilgi notu (önizleme üstü; .lw-mf-warn info ikizi). Index.cshtml inline bloğuyla BİREBİR senkron */
.lw-mf-info { display:flex; align-items:flex-start; gap:.4rem; background:var(--light-info); color:var(--info); border-radius:var(--lw-r-box,10px); padding:.55rem .7rem; font-size:.8rem; margin-bottom:.75rem; }
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — şerit bir ALANIN altına girdiğinde (hızlı kişi formundaki
   mükerrer telefon uyarısı) kendi margin-bottom'ı alan boşluğunun ÜSTÜNE biniyordu; alan içinde üstten
   yaslanır. Diğer iki kullanım (form başı uyarıları) etkilenmez — onlar .lw-field'ın çocuğu değil.
   _Card360Styles.cshtml inline bloğuyla BİREBİR senkron */
.lw-oc-host .lw-field > .lw-mf-warn { margin:.4rem 0 0; }
/* -- 10.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — mükerrer telefon şeridi artık TIKLANABİLİR (<button>):
   "Benzer Kişiler" ikinci panelini açıyor. Taban .lw-mf-warn'ın görünümü korunur, yalnız tarayıcının buton
   varsayılanları (kendi border/arka planı, ortalanmış ve küçülen metni) sıfırlanır. Sağa yaslı ok = "gidilecek
   yer var" işareti. _Card360Styles.cshtml inline bloğuyla BİREBİR senkron
   (07.08'in .lw-mf-warn .lw-lnk ve .lw-dup-pop kuralları KALDIRILDI: ikisi de şeritteki ad linkleri ve onların
    açtığı küçük katman içindi, o akışın yerini bu panel aldı.) */
.lw-mf-warn-act { width:100%; border:0; font:inherit; text-align:left; cursor:pointer; align-items:center; }
/* Hover'da ZEMİN DEĞİŞMEZ (dolu turuncu şerit form içinde bağırıyordu): ince iç çerçeve + okun belirginleşmesi
   "tıklanabilir" demeye yetiyor. */
.lw-mf-warn-act:hover { box-shadow:inset 0 0 0 1px var(--warning); }
.lw-mf-warn-act:hover .lw-mf-warn-go { opacity:1; }
.lw-mf-warn-go { margin-left:auto; flex:none; opacity:.7; }
/* Metin TEK SATIR + üç nokta: uzun ad/etiket şeridi iki satıra çıkarmasın (kullanıcı bulgusu 10.08). */
.lw-mf-warn-act > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* -- 24.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — ÇOK SATIRLI tooltip. pp-tip mekanizması html:false
   (bilinçli: 112 çağrı noktasında XSS yüzeyi açmamak için) → başlıktaki gerçek satır sonları varsayılan
   white-space ile boşluğa dönüşüyor. Bootstrap 5.1 delege tooltip'i her elemanın data-bs-* niteliklerini
   okuduğu için data-bs-custom-class="pp-tip-lines" ile YALNIZ bu balona kural yazılabiliyor.
   Kullanan: Sohbet sekmesindeki "başka kanaldan iletişim" şeridi (_ChatPane.cshtml).
   _Card360Styles.cshtml inline bloğuyla BİREBİR senkron */
.pp-tip-lines .tooltip-inner { white-space:pre-line; text-align:left; max-width:320px; }
/* "Benzer Kişiler" paneli (_SameCardsPanel). Dil panelin fırsat kartından (.lw-opp-item) türetildi: yüzey +
   1px kenarlık + hover'da mor halka/gölge. İlk sürüm kart Detay ekranının .pplist markup'ını basıyordu;
   kullanıcı reddetti (zebra satırlar + her kartta iki satır mor cümle).
   _Card360Styles.cshtml inline bloğuyla BİREBİR senkron */
/* 🔴 YAN BOŞLUK BURADA VERİLİR: ikinci panelde .lw-ps-section .lw-ps-body yan padding'i SIFIRLIYOR — form
   partial'ları boşluğu kendi .lw-sec kabından (padding:1rem) alıyor. Bu görünüm .lw-sec kullanmıyor (kartlar
   zaten kendi yüzeyleri; kart içinde kart olurdu) → cetveli ana panelin gövde padding'inden (.9rem) alıyor ki
   kartlar panel başlığıyla aynı hizada dursun. */
.lw-sc { display:flex; flex-direction:column; gap:.7rem; padding:.25rem .9rem .9rem; }
.lw-sc-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.lw-sc-chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border); background:var(--bg-surface); color:var(--fg-heading); border-radius:var(--lw-r-pill,999px); font-family:var(--font-sans); font-size:.76rem; font-weight:600; padding:.28rem .6rem; cursor:pointer; font-variant-numeric:tabular-nums; }
.lw-sc-chip i { color:var(--fg-muted); font-size:.9em; }
.lw-sc-chip.active { border-color:var(--primary-a55); background:var(--light-primary); color:var(--primary); }
.lw-sc-chip.active i { color:var(--primary); }
.lw-sc-list { display:flex; flex-direction:column; gap:.6rem; }
.lw-sc-item { display:block; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:.75rem .85rem; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease; }
.lw-sc-item:hover { border-color:var(--primary-a55); box-shadow:0 6px 18px var(--primary-a12); text-decoration:none; color:inherit; }
.lw-sc-item:hover .lw-sc-go { opacity:1; color:var(--primary); }
.lw-sc-top { display:flex; align-items:center; gap:.5rem; min-width:0; }
.lw-sc-name { font-size:.92rem; font-weight:600; color:var(--fg-heading); flex:1; min-width:0; overflow-wrap:anywhere; }
.lw-sc-st { flex:none; font-size:.68rem; font-weight:600; padding:.14rem .45rem; border-radius:var(--lw-r-pill,999px); background:var(--bg-hover); color:var(--fg-heading); white-space:nowrap; }
.lw-sc-st.danger { background:var(--light-danger); color:var(--danger); }
.lw-sc-go { flex:none; font-size:.8rem; color:var(--fg-muted); opacity:.35; transition:opacity .15s ease, color .15s ease; } /* dokunmatikte hover yok → tamamen görünmez OLMAZ */
/* -- 11.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — temsilci ve kaynak/kampanya YAN YANA değil ALT ALTA:
   yan yana dizilişte kampanya adı 620px'lik panelde sarıyor ve iki alan tek satır gibi okunuyordu. */
.lw-sc-meta { display:flex; flex-direction:column; align-items:flex-start; gap:.18rem; margin-top:.32rem; font-size:.78rem; color:var(--fg-body); min-width:0; }
.lw-sc-meta span { display:inline-flex; align-items:center; gap:.3rem; max-width:100%; min-width:0; overflow-wrap:anywhere; }
.lw-sc-meta i { color:var(--fg-muted); font-size:.9em; }
.lw-sc-meta .danger, .lw-sc-meta .danger i { color:var(--danger); }
/* "… tarihinde … tarafından eklendi" cümlesi title'da; kartta yalnız tarih · ekleyen (dipnot tonunda). */
.lw-sc-note { display:flex; align-items:center; gap:.3rem; margin-top:.45rem; padding-top:.4rem; border-top:1px dashed var(--border); font-size:.71rem; color:var(--fg-muted); overflow-wrap:anywhere; }
.lw-sc-all { align-self:center; }
/* -- 12.08.2026 ek&claude-Sonnet-5 (kullanıcı isteği) — kart içi "Bu sohbete bağla" (.lw-sc-link). Görünürlüğü
   JS-taraflı gate karar verir (Card360Actions.js); burada yalnız sunum. _Card360Styles.cshtml senkron. */
.lw-sc-actions { display:flex; justify-content:center; margin-top:.5rem; padding-top:.45rem; border-top:1px dashed var(--border); }
.lw-sc-link { font-size:.78rem; }
/* -- 10.09.2026 ek&claude-Opus-5 — ÖLÜ KURAL (zararsız, bırakıldı): üç panel formundaki "tekrar görüşülecek" /
   "takip araması da kur" kutuları ham <input type="checkbox"> idi ve tarayıcının mavi native tikini veriyordu
   (kullanıcı bulgusu). Üçü de temanın kanonik anahtarına geçti: form-check form-switch + form-check-input +
   form-check-label. Etikete bu sınıf VERİLMEZ — display:inline-flex, .form-check .form-check-input'un
   float:left düzeniyle çakışır. Yeniden ham checkbox yazılırsa diye kural silinmedi. */
.lw-fin-machk { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; margin:0; font-size:.92rem; color:var(--fg-body); }
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil) — (1) mobilde ray gizli → panel başlığında yalnız <760px görünen
   kapat X'i; (2) chat tam ekran (odak) modu: chat-focus-mode'un fixed'i transform'lu panelde hapsolur → kendi
   sınıfımız yalnız panel kromunu (başlık+tabbar+çip şeridi) gizler, konuşma flex'le kalan alanı doldurur. */
.lw-ps-x-mob { display:none; }
/* -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği, madde 25) — tam ekran butonu ARTIK HER EKRAN BOYUTUNDA
   görünür; odak modunun kroma-gizleme kuralları da media query'nin DIŞINA alındı (yoksa masaüstünde buton
   görünür ama basınca hiçbir şey olmazdı). _Card360Styles.cshtml ikizi ile senkron. */
.lw-chat-fs-btn { display:inline-flex; }
body.lw-chat-focus .lw-ps-overlay .lw-ps-head { display:none; }
body.lw-chat-focus .lw-ps-overlay .lw-ps-tabbar { display:none; }
body.lw-chat-focus .lw-chat-pane .sidebar-left { display:none; }
@media (max-width:760px){
    .lw-ps-x-mob { display:flex; }
}
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil fix) — tema app-chat.css <992px'te .sidebar-content'i
   translateX(-110%) + position:absolute ile ekran dışına atar (hamburger-overlay deseni) → gömülü çip şeridi
   BOŞ görünüyordu. Embed'de şerit hep inline: transform iptal + hamburger gizli (işlevsiz). */
.lw-chat-pane .sidebar-left .sidebar-content { transform:none !important; position:static !important; transition:none !important; }
.lw-chat-pane .sidebar-toggle { display:none !important; }
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil fix-2) — tema li.active TÜM yazıları #fff yapar (kendi koyu mor
   gradient'i için; app-chat-list.css:140-151) — bizim aktif çip bg'si açık --light-primary → beyaz yazı okunmuyordu.
   #chat-list ID'li seçici temayı spesifiklikle ezer; ikon renkleri (text-success vb.) etkilenmez. */
.lw-chat-pane #chat-list .chat-list-item.active h5,
.lw-chat-pane #chat-list .chat-list-item.active .card-text,
.lw-chat-pane #chat-list .chat-list-item.active .chat-time,
.lw-chat-pane #chat-list .chat-list-item.active small { color:var(--fg-heading); }
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil fix-3) — çip alt satırı: iki small (link ikonu + kaynak) flex'te
   ezilip ikonlar üst üste biniyordu → link ikonu doğal genişliğini korur (shrink yok), kaynak metni temiz kırpılır.
   Kart-bağlantı ikonu (fa-link): override-v2:214 aktif çipte #fff !important yapıyordu (açık zeminde GÖRÜNMEZ) →
   ID'li seçici + !important ile her durumda primary (tema normal-durum rengiyle parite). */
.lw-chat-pane #chat-list .chat-list-item .chat-info > .d-flex { gap:.3rem; align-items:center; min-width:0; }
.lw-chat-pane #chat-list .chat-list-item .chat-linked-info { flex:0 0 auto; width:auto; overflow:visible; }
.lw-chat-pane #chat-list .chat-list-item .chat-source-info { flex:1 1 auto; min-width:0; }
.lw-chat-pane #chat-list .chat-list-item .chat-linked-info > i { color:var(--primary) !important; }
/* -- 25.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — sohbet şeridi + konuşma başlığındaki iki işaret:
   (a) .lw-chat-chan — kişinin sohbetleri BİRDEN FAZLA kanaldaysa kanal adını çipe çevirir (tek kanalda hiç
       basılmaz, sade gri metin kalır). İki farklı WhatsApp kanalının ikonları birebir aynı olduğu için ayrım
       ancak metnin vurgulanmasıyla görülüyor.
   (b) .lw-chat-othercard — sohbet PANELİN kartından BAŞKA bir kişiye bağlı; yazılan mesaj o karta işlenir.
   İkisi de .chat-source-info İÇİNDE durur; o eleman başlığa kopyalandığı için (fillProfileInfo) çipler
   başlıkta da çıkar. max-width + ellipsis ŞART: başlık tek satır kuralında (08.07.2026 fix-4) uzun kart/kanal
   adı diğer çipi ekrandan atardı; tam metin zaten tooltip'te. ⚠️ _Card360Styles.cshtml ikizi ile SENKRON. */
.lw-chat-pane .lw-chat-chan,
.lw-chat-pane .lw-chat-othercard { display:inline-block; vertical-align:bottom; max-width:11rem; overflow:hidden; text-overflow:ellipsis; padding:0 .35rem; border-radius:var(--lw-r-chip,6px); font-weight:600; }
.lw-chat-pane .lw-chat-chan { background:var(--light-primary); color:var(--primary); }
.lw-chat-pane .lw-chat-othercard { background:var(--light-warning); color:var(--warning); margin-right:.25rem; }
/* -- 25.08.2026 mk&claude-Opus-5 (EKİP KARARI) — GÖRÜNMEYEN KANALLAR ŞERİDİ + KİLİT EKRANI.
   .lw-lockedch-box  : kişinin, kullanıcının göremediği kanallardaki sohbetlerini listeleyen şerit (her iki
                       panel hâlinde de basılır). Başlık satırı özet, altındaki düğmeler tek tek kanallar.
   .lw-lockedch      : tıklanabilir kanal satırı — kanal adı + tarih + temsilci. Düğme olmasının sebebi
                       klavye erişimi; görünüm sade tutuldu ki sohbet çipleriyle karışmasın.
   .lw-lockedch-note : satıra tıklanınca HEMEN ALTINDA açılan açıklama (akordeon) + X ile kapanır.
   ⚠️ _Card360Styles.cshtml ikizi ile SENKRON. */
/* Kutu, .lw-chat-mount ile AYNI hizada durur: köşe yuvarlaması ve yan boşluk YOK, tam genişlik (kullanıcı
   kararı 25.08 — panel full-bleed, kutunun kart gibi durması şeridi ortadan kopuk gösteriyordu). Alt çizgi
   sohbet şeridinden ayırır. */
.lw-chat-pane .lw-lockedch-box { margin:0; padding:.4rem .5rem; border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--bg-surface); width:100%; }
.lw-chat-pane .lw-lockedch-head { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-muted,#82868b); margin-bottom:.25rem; }
.lw-chat-pane .lw-lockedch { display:flex; align-items:center; gap:.4rem; width:100%; padding:.3rem .4rem; border:0; border-radius:var(--lw-r-chip,6px); background:transparent; text-align:left; cursor:pointer; }
.lw-chat-pane .lw-lockedch:hover { background:var(--light-primary); }
.lw-chat-pane .lw-lockedch.active { background:var(--light-warning); }
.lw-chat-pane .lw-lockedch-ic { color:var(--warning); flex:0 0 auto; }
.lw-chat-pane .lw-lockedch-nm { font-weight:600; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-chat-pane .lw-lockedch-mt { margin-left:auto; font-size:.75rem; color:var(--text-muted,#82868b); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55%; }
/* Açıklama: tıklanan satırın hemen ALTINDA açılır (akordeon). position:relative → X butonu sağ üste oturur. */
.lw-chat-pane .lw-lockedch-note { position:relative; margin:.15rem .4rem .35rem; padding:.5rem 2rem .5rem .6rem; }
.lw-chat-pane .lw-lockedch-note-t { font-weight:600; font-size:.85rem; color:var(--warning); }
.lw-chat-pane .lw-lockedch-note-d { font-size:.75rem; color:var(--text-muted,#82868b); margin-top:.15rem; }
/* X'in rengi MARKUP'ta (i.text-danger); burada yalnız konum + tıklama alanı. Hover'da renk değil opaklık
   değişir ki utility sınıfıyla çakışmasın. */
.lw-chat-pane .lw-lockedch-x { position:absolute; top:.25rem; right:.25rem; border:0; background:transparent; cursor:pointer; line-height:1; padding:.15rem .3rem; opacity:.75; }
.lw-chat-pane .lw-lockedch-x:hover { opacity:1; }
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil fix-4) — taşmalar: (a) konuşma başlığında ad + kanal bilgisi
   sarıp başlık sınırından taşıyordu → sol blok min-width:0 zinciri + tek satır ellipsis; (b) composer placeholder'ı
   iki satıra sarıp kırpılıyordu → tek satır ellipsis; (c) İletişim'de telefon satırı (numara+Birincil+aksiyonlar)
   dar panelde kart dışına taşıyordu → satır sarar, numara gerekirse kırılır. */
.lw-chat-pane .chat-header > .d-flex:first-child { flex:1 1 auto; min-width:0; }
.lw-chat-pane .chat-header > .d-flex:first-child > div:last-child { min-width:0; overflow:hidden; }
.lw-chat-pane #chat-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-chat-pane .active-chat-source-info { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-chat-pane #txt-message::placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-oc-phone { flex-wrap:wrap; }
/* -- 19.08.2026 ek&claude-Opus-5 — hap "Web" butonuyla aksiyon şeridi 4 öğeye çıktı (~175px); dar ekranda
   .pp-acts kendisi sarmadığı için kırpılabiliyordu. _Card360Styles ile senkron. */
.lw-oc-phone .pp-acts { flex-wrap:wrap; }
.lw-oc-phone .lw-oc-phone-num { min-width:0; overflow-wrap:anywhere; }
/* -- 08.07.2026 ek&claude-Fable-5 (Faz 7 mobil fix-5, kullanıcı kararı) — satır hızlı aksiyonları (Ara + WA)
   mobilde KALDIRILDI: hover için tasarlanmıştı, dokunmatikte hep görünüp yanlış basılıyordu (aynı aksiyonlar panel
   İletişim sekmesinde var). Meta metni de tam satıra iner (telefon çipi yanında dar kolona ezilmesin). */
/* -- 29.07.2026 ek&claude-Opus-5 (kullanıcı kararı) — mobilde ARTIK tüm blok gizlenmiyor: Ara/WhatsApp
   gizli KALIR (yukarıdaki 08.07 kararı korunur) ama "Temsilci Ata" butonu GÖRÜNÜR — mobilde de panel
   açmadan tek dokunuşla atama yapılabilsin. Mobilde hover yok → .lw-quick opaklığı 1'e çekilir.
   ⚠️ Index.cshtml inline ikizi ile BİREBİR senkron. */
@media (max-width:760px){
    .lw-quick:not(.has-assign) { display:none !important; }
    .lw-quick.has-assign { opacity:1; }
    .lw-quick.has-assign .lw-qbtn:not(.lw-assign) { display:none !important; }
    .lw-action { flex-wrap:wrap; row-gap:.15rem; }
    .lw-action .when { flex-basis:100%; }
}

/* -- 29.07.2026 ek&claude-Opus-5 — hızlı temsilci atama butonu + ajan seçim popover'ı.
   Taban .lw-qbtn / .lw-phone-pop / .lw-phone-pop-row kuralları _Card360Styles.cshtml'de —
   burada YALNIZ atamaya özgü ekler var. Index.cshtml inline ikizi ile BİREBİR senkron. */
.lw-qbtn.lw-assign:hover { background:var(--light-primary); color:var(--primary); }
.lw-agent-pop { min-width:230px; max-width:290px; }
.lw-agent-pop .lw-agent-search { width:100%; border:1px solid var(--border-input); background:var(--bg-surface); color:var(--fg-body); border-radius:var(--lw-r-ic,8px); font-family:var(--font-sans); font-size:.82rem; padding:.3rem .5rem; margin-bottom:.25rem; outline:0; }
.lw-agent-pop .lw-agent-search:focus { border-color:var(--primary); }
.lw-agent-list { max-height:238px; overflow-y:auto; }
.lw-agent-row { display:flex; align-items:center; gap:.5rem; width:100%; border:0; background:transparent; color:var(--fg-body); font-family:var(--font-sans); font-size:.86rem; text-align:left; padding:.4rem .5rem; border-radius:var(--lw-r-chip,6px); cursor:pointer; }
.lw-agent-row:hover { background:var(--bg-hover); color:var(--fg-heading); }
.lw-agent-row i { color:var(--fg-muted); font-size:.85em; flex:none; }
.lw-agent-row.me { color:var(--primary); font-weight:600; }
.lw-agent-row.me i { color:var(--primary); }
.lw-agent-sep { height:1px; background:var(--border); margin:.3rem 0; }
.lw-agent-empty { padding:.5rem; font-size:.82rem; color:var(--fg-heading); }
/* -- 29.07.2026 ek&claude-Opus-5 (kullanıcı isteği) — 8'den çok temsilcide liste kırpılır, kalanı bu satırın
   arkasında. Ajan satırından ayrışsın diye ortalı + soluk + küçük punto. Index.cshtml inline ikizi senkron. */
.lw-agent-more { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; border:0; background:transparent; color:var(--fg-heading); font-family:var(--font-sans); font-size:.8rem; padding:.35rem .5rem; border-radius:var(--lw-r-chip,6px); cursor:pointer; }
.lw-agent-more:hover { background:var(--bg-hover); color:var(--primary); }
/* ===================== END: LeadCenter Faz 7 ===================== */

/* ===================== BEGIN: LeadCenter Faz 8 (Fırsat sekmesi) =====================
   -- 08.07.2026 ek&claude-Fable-5 — mockup portu + TASARIM REVİZYONU (kullanıcı: pane=SAF LİSTE, detay/oluştur/
   düzenle ikinci panelde): liste kartı .lw-opp-item (tıkla=düzenle, ⋯=menü) + mini aşama şeridi + meta satırı;
   form .lw-convert-form. .lw-sec/.lw-heat/.lw-tl-actions/.lw-readonly/.lw-field/.lw-act-menu-btn önceki fazlarda
   mevcut — DUPLİKE EDİLMEDİ. Renkler token'lardan (.lw-oc-host) → yalnız spesifiklik gerektiren dark kuralı var
   (html.dark-layout .lw-sec (0,2,1) .lw-convert-form'u eziyordu — denetim fix). Index inline ile BİREBİR senkron. */
/* -- 23.07.2026 ek&claude-Fable-5 — .lw-stage-track/.lw-stage-seg KALDIRILDI (tek kullanıcı _OpportunityPane idi);
   yerine nokta stepper .lw-fsteps (aşağıda "Fırsat Sonuçlandırma" bloğu). */
/* -- 24.07.2026 ek&claude-Fable-5 (Musa UI redesign) — kart .opp portu: zengin kart (beyaz zemin, radius 13,
   yumuşak gölge; hover mor-tonlu çerçeve + gölge — eski bg-hover dolgusu kalktı). */
.lw-opp-list { display:flex; flex-direction:column; gap:.75rem; margin-bottom:.25rem; }
.lw-opp-item { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:1rem; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.lw-opp-item:hover, .lw-opp-item.active { border-color:var(--primary-a55); box-shadow:0 6px 18px var(--primary-a12); }
.lw-opp-top { display:flex; align-items:center; gap:.5rem; min-width:0; }
.lw-opp-name { font-size:.92rem; font-weight:600; color:var(--fg-heading); flex:1; min-width:0; overflow-wrap:anywhere; }
/* -- 24.07.2026 ek&claude-Fable-5 (Musa UI redesign) — kart İÇİ ısı rozeti pill görünümü (tasarım .temp);
   global .lw-heat (soğuyan fırsatlar listesi) ETKİLENMEZ — scope .lw-opp-item. Normal=nötr gri pill. */
.lw-opp-meta { display:flex; flex-wrap:wrap; gap:.3rem; font-size:.82rem; color:var(--fg-heading); min-width:0; }
/* -- 08.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — FIRSAT KARTI ETİKET SATIRI.
   🔴 Başlık sütunu YOK (kullanıcı kararı): ilk sürüm .lw-kv kalıbındaydı (ikon + 100px "Etiketler"
   başlığı), başlık bilgi taşımadığı için kaldırıldı — satır kartın SOL kenarına yaslı.
   Çipin kendi görünümü lib/pptags/pptags.css'te; burada yalnız kart içindeki boşluk var.
   🔴 Bu blok site.css ile _Card360Styles.cshtml arasında BİREBİR İKİZ tutulur (dosyaların kendi notu). */
.lw-opp-item .lw-opp-tags { padding: .5rem 0 0; }
/* -- 14.07.2026 mk&claude-Opus-4.8 (kullanıcı isteği) — Fırsat formu arka planı beyaz: .lw-convert-form sarmalayıcı
   kaldırıldı (form artık düz .lw-sec = Etkinlik formuyla aynı). .row2 grid'i selektörden bağımsızlaştı. */
.lw-row2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.lw-row2 > .lw-field { min-width:0; } /* denetim fix: grid min-content kilidi dar panelde taşırıyordu */
.lw-opt-hint { font-weight:400; color:var(--fg-heading); font-size:.78rem; }
/* ===================== END: LeadCenter Faz 8 ===================== */

/* ===================== BEGIN: LeadCenter Önerilen İşlemler (Suggested Actions) =====================
   -- 20.07.2026 mk&claude-Fable-5 — 360 panel üst aksiyon alanı: eski küçük eşit-pill dispo butonları
   (.lw-ps-dispo/.lw-dispo-btn, kanonik kurallar KORUNUR — kod başka yerde kullanmıyor, silinmedi) yerine
   duruma duyarlı, HİYERARŞİSİZ (tüm kartlar eşit ağırlık) öneri listesi + mini yolculuk stepper'ı. Kaynak:
   Lead Center (Etkileşimli) prototipi. Stepper 3 aşamalı (Yeni/Takipte/Fırsat) — "İlk temas" backend'de
   ayrı durum değil (DECISIONS-lead-welcome-automation.md K1-K20, henüz kodlanmadı). Index inline ile BİREBİR senkron. */
/* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı isteği) — "Önerilen İşlemler" TEK UYGULAMAYA indirildi. Ortada iki
   paralel kabuk vardı: fırsat kartındaki .lw-sa/.lw-sa-* ile diğer pane'lerdeki .lw-suggest/.lw-sg-*. İkisi
   birbirinden bağımsız evrildiği için görünüm ayrışmıştı (kartlı-mor-kenarlıklı vs sade, ikon 32↔34, farklı
   padding/radius). Kullanıcı kararı: FIRSAT baz alınır → tüm view'lar .lw-sa-* sınıflarına geçirildi
   (_Card360Panel, _ActivityPane, _FollowupPane, _OpportunityPane, _ChatPane) ve buradaki kabuk kuralları
   SİLİNDİ: .lw-suggest / .lw-chat-suggest / .lw-sg-head / .lw-sg-list / .lw-sg-act(+:hover,:disabled) /
   .lw-sg-ic / .lw-sg-body / .lw-sg-title / .lw-sg-desc. Böylece yeniden ayrışma imkânsız.
   YAŞAMAYA DEVAM EDENLER (.lw-sa karşılığı olmayan alt bileşenler, aynen kullanılıyor — .lw-sg-label 06.08.2026 Faz 12'de SİLİNDİ): (başlık
   metni), .lw-sg-stepper/.lw-sg-step/.lw-sg-line (yolculuk adımları), .lw-sg-lock (telefon yok notu),
   .lw-sg-done* (sessiz bilgi şeridi). NOT: .lw-chat-suggest SINIFI markup'ta DURUYOR — LeadCenterIndex.js
   removeChatSuggest() onu seçici olarak kullanıyor; yalnız CSS kuralı (köşe yarıçapı) gereksizleştiği için kalktı.
   Index.cshtml inline ile BİREBİR senkron. */
/* -- 07.08.2026 ek&claude-Opus-5 (kullanıcı isteği) — stepper BAŞLIĞIN YANINA geri alındı (Faz 12'de
   kendi satırına indirilmişti). margin-left:auto ile sağa yaslanır; .lw-sa-head'in flex-wrap'i dar
   panelde kendiliğinden alt satıra indirir (eski @media(max-width:700px) bloğuna gerek yok). */
.lw-sg-stepper { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-left:auto; }
.lw-sg-step { display:inline-flex; align-items:center; gap:.28rem; font-size:.62rem; font-weight:600; color:var(--fg-heading); white-space:nowrap; }
.lw-sg-step .dot { width:12px; height:12px; border-radius:50%; border:2px solid var(--border-input); box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; font-size:.42rem; background:var(--bg-surface); }
.lw-sg-step.cur { color:var(--primary); }
.lw-sg-step.cur .dot { border-color:var(--primary); background:var(--light-primary); }
.lw-sg-step.done { color:var(--success); }
.lw-sg-step.done .dot { border-color:var(--success); background:var(--success); }
.lw-sg-line { width:14px; height:2px; background:var(--border); border-radius:2px; }
.lw-sg-line.fill { background:var(--success); }
.lw-sg-lock { display:block; font-size:.7rem; color:var(--warning); margin-top:.3rem; line-height:1.5; }
.lw-sg-lock a { color:var(--warning); text-decoration:underline; }
.lw-sg-done { display:flex; gap:.65rem; align-items:flex-start; border:1px dashed var(--border-input); border-radius:var(--lw-r-box,10px); background:var(--bg-hover); padding:.75rem .85rem; }
.lw-sg-done-ic { width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--light-danger); color:var(--danger); display:flex; align-items:center; justify-content:center; }
/* -- 20.07.2026 mk&claude-Fable-5 (kullanıcı isteği) — Fırsat eklendi bilgi şeridi: danger (Niteliksiz) yerine primary tonu */
.lw-sg-done-pos .lw-sg-done-ic { background:var(--light-primary); color:var(--primary); }
.lw-sg-done-t { font-size:.76rem; line-height:1.55; color:var(--fg-body); }
.lw-sg-done-t b { display:block; color:var(--fg-heading); margin-bottom:.1rem; }
.lw-sg-done-t a { margin-left:.3rem; font-weight:600; }
/* ===================== END: LeadCenter Önerilen İşlemler ===================== */

/* ===================== BEGIN: LeadCenter Fırsat Sonuçlandırma =====================
   -- 23.07.2026 ek&claude-Fable-5 — Musa tasarımı (kanonik 23.07 "Fırsat Aşama Tasarımları.html") .lw token'larına
   uyarlandı: nokta stepper .lw-fsteps (.lw-stage-track'in YERİNE; N aşama flex'le sığar — nokta sabit, çizgi
   daralır), kapalı kart .lw-fbadge/.lw-refin — İKİSİ DE 06.08.2026 Faz 12'de tema karşılığına çevrildi
   (badge badge-light-* / .lw-lnk) — (24.07: açık kartın alt "Sonuçlandır" linki de .lw-refin — .lw-sa kalktı),
   sonuçlandır formu .lw-fof-*.
   Renkler token: won→--success, lost→--danger, abandoned→--secondary, suspended→--warning (OpportunityStates.cs
   hex'leriyle birebir). Dark: çoğu renk .lw-oc-host token remap'inden bedava; yalnız zemin ayrımı netleştirilir.
   Index.cshtml inline ile BİREBİR senkron. */
.lw-fsteps { display:flex; align-items:center; margin:.55rem 0 .1rem; min-height:16px; }
.lw-fdot { width:12px; height:12px; border-radius:50%; background:var(--border); flex:0 0 auto; box-sizing:border-box; }
.lw-fdot.done { background:var(--primary); }
.lw-fdot.cur { width:16px; height:16px; background:var(--bg-surface); border:3px solid var(--primary); box-shadow:0 0 0 4px var(--primary-a13); }
.lw-fline { flex:1 1 10px; min-width:4px; height:2px; background:var(--border); }
.lw-fline.done { background:var(--primary); }
.lw-fdot.fin { cursor:pointer; position:relative; }
.lw-fdot.fin::after { content:""; position:absolute; inset:-8px; border-radius:50%; } /* büyütülmüş tıklama alanı */
.lw-fdot.fin:hover, .lw-fdot.fin:focus-visible { background:var(--success); border-color:var(--success); box-shadow:0 0 0 4px var(--light-success); }
/* -- 31.07.2026 mk&claude-Fable-5 (kullanıcı bulgusu) — `.done` KAPSAMI EKLENDİ: kapalı fırsatta bu kurallar
   noktaların TAMAMINI sonuç rengine boyuyor, ilk adımda kapanan fırsat bile sonuna kadar tamamlanmış
   görünüyordu. Artık yalnız kapandığı evreye kadar olanlar renklenir. İkiz: _Card360Styles.cshtml. */
.lw-fsteps.st-won .lw-fdot.done, .lw-fsteps.st-won .lw-fline.done { background:var(--success); border-color:var(--success); }
.lw-fsteps.st-lost .lw-fdot.done, .lw-fsteps.st-lost .lw-fline.done { background:var(--danger); border-color:var(--danger); }
.lw-fsteps.st-abandoned .lw-fdot.done, .lw-fsteps.st-abandoned .lw-fline.done { background:var(--secondary); border-color:var(--secondary); }
.lw-fsteps.st-suspended .lw-fdot.done, .lw-fsteps.st-suspended .lw-fline.done { background:var(--warning); border-color:var(--warning); }
.lw-fcap { font-size:.8rem; color:var(--fg-heading); margin:.15rem 0 .35rem; }
.lw-fcap b { color:var(--fg-heading); font-weight:600; }
.lw-fcap em { font-style:normal; font-weight:600; color:var(--fg-body); }
/* -- 03.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — "şuanki evre → sıradaki evre" ayıracı: nokta yerine ok.
   Primary + biraz küçük: yön belli olsun ama iki evre adının önüne geçmesin. */
.lw-fcap .lw-fcap-arrow { color:var(--primary); font-size:.72em; margin:0 .18rem; }
.lw-fcap b.st-won { color:var(--success); }
.lw-fcap b.st-lost { color:var(--danger); }
.lw-fcap b.st-abandoned { color:var(--secondary); }
.lw-fcap b.st-suspended { color:var(--warning); }
/* -- 15.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — tutar meta satırından bu satıra taşındı. Sonuç adı
   kadar ağır DEĞİL (b değil, 500): satırın öznesi "Kazanıldı", tutar onun niteliği. İkiz: _Card360Styles.cshtml. */
.lw-fcap .lw-fcap-amt { font-weight:500; color:var(--fg-body); }
/* kapalı kart: ısı rozeti yerine sonuç rozeti + "Sonucu değiştir" */
.lw-opp-acts { display:flex; align-items:center; margin-top:.4rem; padding-top:.45rem; border-top:1px solid var(--border); }
.lw-refin { border:0; background:none; padding:0; color:var(--primary); font-family:var(--font-sans); font-size:.8rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.lw-refin:hover { text-decoration:underline; }
/* -- 11.08.2026 mk&claude-Opus-5 — gerçekleşme ekseninin kartta iki izi. İkiz: Views/Shared/_Card360Styles.cshtml.
   -- 13.08.2026 mk&claude-Opus-5 (kullanıcı bulgusu) — .lw-fbadge.st-realized SİLİNDİ: .lw-fbadge'in TABAN
   kuralı (iç boşluk/köşe/punto) 06.08 Faz 12'de zaten kaldırılmıştı, ayakta kalan tek kural buydu → rozetin
   zemini vardı ama biçimi yoktu. _OpportunityPane'deki iki rozet de tema ailesine (badge badge-light-*)
   çevrildi; "Gerçekleşti" rozetinin sınıfı artık RealizationStates sözlüğünden geliyor.
   .lw-refin.is-locked: "Sonucu değiştir"in yerini alan kilit satırı — düğme DEĞİL (tıklanamaz, imleç değişmez). */
.lw-refin.is-locked { color:var(--fg-muted); cursor:default; }
.lw-refin.is-locked:hover { text-decoration:none; }
/* -- 24.07.2026 ek&claude-Fable-5 (kullanıcı isteği, REVİZE) — kart-başı Önerilen İşlemler .lw-sa GERİ GELDİ
   (redesign'da silinmişti; kullanıcı canlıda görünce istedi). Pane-başı .lw-sg-* AYRI kalır (fırsatsız durum). */
.lw-sa { margin-bottom:.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
/* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı isteği) — TEK BAŞINA duran öneri bloklarına dış çerçeve. Kutu dili
   FIRSAT KARTINDAN (.lw-opp-item :1427) birebir alındı — kullanıcı tarifi zaten oydu: nötr var(--border) kenarlık,
   renk YOK; hover'da mor. Aynı radius/padding/gölge kullanıldı ki iki kart yan yana aynı dili konuşsun.
   SEÇİCİ NEDEN `.lw-oc-pane > .lw-sa`: .lw-sa iki bağlamda render oluyor — (a) pane'in DOĞRUDAN çocuğu olarak
   tek başına (8 yer: _Card360Panel summary, _ActivityPane×2, _FollowupPane×2, _OpportunityPane pane-başı×2,
   _ChatPane), (b) fırsat kartının İÇİNDE (_OpportunityPane:133 açık kart, :160 kazanılmış kart). Doğrudan-çocuk
   seçicisi (a)'yı alır, (b)'yi ALMAZ → kart içinde çerçeve-içinde-çerçeve oluşmaz ve ayrıca bir "reset" kuralı
   yazmaya, özgüllük/sıra yarışına girmeye gerek kalmaz. (Card360.js:236 `$(pane).html(d)` yaptığı için lazy
   partial'ların kök elemanları pane'in doğrudan çocuğu olur — seçici bu yüzden güvenli.)
   Flush pane'lerde kenara dayanması sorun DEĞİL: summary/chat pane'lerinde .lw-sec zaten aynı şekilde
   çerçeveli+yuvarlak ve kenara dayalı (:1196/:1198). */
.lw-oc-pane > .lw-sa { padding:1rem; margin-bottom:.75rem; border:1px solid var(--border); border-radius:var(--lw-r-card,12px);
    background:var(--bg-surface); box-shadow:var(--lw-shadow-soft,0 3px 12px rgba(34,41,47,.04)); }
/* -- 03.08.2026 mk&claude-Opus-5 (kullanıcı isteği, madde 3) — kabuğun KENDİ hover kuralı SİLİNDİ
   (.lw-oc-pane > .lw-sa:has(.lw-sa-row):hover:not(:has(.lw-sa-row:hover)) → mor kenarlık + gölge).
   Gerekçe: dış kart tıklanabilir DEĞİL, yalnız içindeki .lw-sa-row satırları tıklanabilir; kabuğun mor
   yanması yanlış bir "buraya tıklanır" sinyali veriyordu. Satır hover'ı (.lw-sa-row:hover, aşağıda) AYNEN
   duruyor — vurgulanan artık yalnız gerçekten tıklanabilir olan öğe. Statik çerçeve/gölge de kalıyor
   (yukarıdaki kural), yani kart sınırı kayboluyor değil. _Card360Styles.cshtml ile BİREBİR senkron. */
/* -- 28.07.2026 ek&claude-Opus-5 — flex-wrap:wrap eski .lw-sg-head'den DEVRALINDI: @media(max-width:700px) [blok 06.08.2026 Faz 12'de KALDIRILDI — stepper artık
   markup'ta .lw-sa-head'in dışında, kendi satırında] altındaki
   ".lw-sg-stepper { flex-basis:100% }" kuralı yolculuk stepper'ını dar ekranda alt satıra indirir, bu da ancak
   kapsayıcı sarabiliyorsa çalışır. Fırsat kartındaki .lw-sa-cur rozeti nowrap olduğu için orada etkisi yok. */
.lw-sa-head { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:.45rem; }
.lw-sa-list { display:flex; flex-direction:column; gap:.5rem; }
/* -- 28.07.2026 ek&claude-Opus-5 — .lw-sg-act'tan devralınan iki davranış eklendi (o kabuk silinirken kaybolmasın):
   position:relative + :disabled durumu. Tek tüketici: _Card360Panel "İlk Temasa Geç" (telefonsuz kartta disabled).
   :hover artık :not(:disabled) — devre dışı satır hover chrome'u almasın. .lw-sa-txt'ye flex:1 (eski .lw-sg-body):
   uzun açıklama ve .lw-sg-lock notu satır genişliğini kullansın; fırsat kartında görsel etkisi yok (yanında öğe yok). */
.lw-sa-row { position:relative; display:flex; align-items:center; gap:.65rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:.55rem .65rem; cursor:pointer; text-align:left; width:100%; font-family:var(--font-sans); transition:border-color .14s, box-shadow .14s; }
.lw-sa-row:hover:not(:disabled) { border-color:var(--primary); box-shadow:0 5px 14px -6px var(--primary-a35); }
.lw-sa-row:disabled { cursor:not-allowed; opacity:.65; }
/* Concentric: .lw-sec(12) > .lw-opp-item(10) > .lw-sa-row → bir basamak daha küçük (8). */
.lw-opp-item .lw-sa-row { border-radius:var(--lw-r-ic,8px); }
.lw-sa-ic { width:34px; height:34px; border-radius:var(--lw-r-ic,8px); background:var(--light-primary); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex:0 0 auto; }
.lw-sa-txt { display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1; }
.lw-sa-t { font-weight:600; color:var(--fg-heading); font-size:.85rem; }
.lw-sa-d { font-size:.72rem; color:var(--fg-heading); line-height:1.4; }
/* Sonuçlandır formu (#lc-fof) */
.lw-fof-ctx { display:flex; align-items:center; gap:.6rem; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:.6rem .75rem; margin-bottom:.75rem; }
.lw-fof-ctx .fi { width:30px; height:30px; border-radius:var(--lw-r-ic,8px); background:var(--light-primary); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex:0 0 auto; }
.lw-fof-name { font-weight:600; color:var(--fg-heading); font-size:.9rem; min-width:0; overflow-wrap:anywhere; }
.lw-fof-amt { margin-left:auto; font-weight:600; color:var(--primary); font-size:.85rem; white-space:nowrap; }
.lw-fof-q { font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-heading); margin-bottom:.5rem; }
.lw-fof-seg { display:flex; justify-content:center; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--lw-r-box,10px); padding:4px; gap:3px; margin-bottom:.75rem; } /* -- 23.07.2026 ek&claude-Fable-5 (kullanıcı isteği) — sonuç pill'leri ortalandı (flex-end idi) */
.lw-fof-pill { display:flex; flex-direction:column; align-items:center; gap:.35rem; background:none; border:0; border-radius:var(--lw-r-ic,8px); padding:.6rem .8rem; cursor:pointer; font-family:var(--font-sans); color:var(--fg-heading); transition:color .15s, background .15s, box-shadow .15s; }
.lw-fof-pill .pg { font-size:1rem; line-height:1; }
.lw-fof-pill .pn { font-size:.7rem; font-weight:600; white-space:nowrap; }
.lw-fof-pill[data-out="open"] { --lw-oc:var(--primary); --lw-oc-soft:var(--light-primary); } /* -- 24.07.2026 ek&claude-Fable-5 — REOPEN pill'i */
.lw-fof-pill[data-out="won"] { --lw-oc:var(--success); --lw-oc-soft:var(--light-success); }
.lw-fof-pill[data-out="lost"] { --lw-oc:var(--danger); --lw-oc-soft:var(--light-danger); }
.lw-fof-pill[data-out="abandoned"] { --lw-oc:var(--secondary); --lw-oc-soft:var(--light-secondary); }
.lw-fof-pill[data-out="suspended"] { --lw-oc:var(--warning); --lw-oc-soft:var(--light-warning); }
/* -- 11.08.2026 mk&claude-Opus-5 — fırsat GERÇEKLEŞME sonuçlandırma pill'leri (PpOpportunities/_RealizationForm;
   aynı .lw-fof-* iskeleti, ikinci eksen). 🔴 KIRMIZI YOK: "gerçekleşmedi" bir satış kaybı değildir → nötr gri;
   kırmızı satış eksenindeki Kaybedildi'ye ayrılmıştır. İkiz: Views/Shared/_Card360Styles.cshtml. */
.lw-fof-pill[data-out="realized"] { --lw-oc:var(--success); --lw-oc-soft:var(--light-success); }
.lw-fof-pill[data-out="postponed"] { --lw-oc:var(--primary); --lw-oc-soft:var(--light-primary); }
.lw-fof-pill[data-out="notrealized"] { --lw-oc:var(--secondary); --lw-oc-soft:var(--light-secondary); }
/* -- 11.08.2026 mk&claude-Opus-5 — SAPMA ŞERİDİ (tutar alanının hemen altı, yalnız "Gerçekleşti" seçiliyken).
   TEK NESNE: etiket + değer + yüzde AYNI kutuda; eskiden chip + başıboş yardımcı metin ikilisiydi
   ve kullanıcıda "bunlar farklı şeyler" hissi yaratıyordu.
   -- 15.08.2026 mk&claude-Opus-5 (kullanıcı isteği) — sağ uçtaki .dp-n kısıt notu kaldırıldı.
   -- 15.08.2026 mk&claude-Opus-5 (kullanıcı kararı) — 11.08'in "RENK KODU YOK / OK İKONU YOK" kuralı İPTAL:
   yön artık yüzde çipinde renk + ok ile veriliyor (artı yeşil/yukarı, eksi kırmızı/aşağı — borsa deseni).
   Şeridin kendisi ve tutar NÖTR kalmaya devam eder; boyanan tek şey yüzde çipi.
   Renkler panelin kendi token'larından (.lw-oc-host) gelir — ham hex yazılmaz. İkiz: _Card360Styles.cshtml. */
.pp-rzf-dev { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
              background:var(--bg-hover); border:1px solid var(--border); border-radius:9px; padding:10px 13px; }
.pp-rzf-dev[hidden] { display:none; }
.pp-rzf-dev .dp-l { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); }
.pp-rzf-dev .dp-v { font-size:14px; font-weight:700; color:var(--fg-heading); }
/* yüzde ayrı bir chip DEĞİL, aynı satırda ikinci kademe bilgi: tutara 7px yakınlıkta (10px gap − 3px) */
.pp-rzf-dev .dp-p { font-size:11px; font-weight:600; color:var(--fg-muted); margin-left:-3px; }
/* -- 15.08.2026 mk&claude-Opus-5 (kullanıcı kararı) — YÖN OK ile, RENK YALNIZ ARTIDA: yükselen sapma yeşil
   (pozitif enerji), düşen sapma OKUYLA gösterilir ama NÖTR kalır — kırmızı, tutarı zaten düşmüş kullanıcının
   moralini bozardı ve "hata yaptın" gibi okunurdu. .down kuralı bilerek yazıldı (sınıf basılıyor, rengi
   kasıtlı olarak taban muted): ileride biri "kural nerede" diye aramasın.
   Ok yüzdeye 3px yapışık ve .9em: rakamın önünde işaret gibi durur, ikinci bir nesne gibi değil.
   İkiz: _Card360Styles.cshtml. */
.pp-rzf-dev .dp-p.up { color:var(--success); }
.pp-rzf-dev .dp-p.down { color:var(--fg-muted); }
.pp-rzf-dev .dp-p i { font-size:.9em; margin-right:3px; }
.pp-rzf-dev .dp-same { font-size:13px; font-weight:600; color:var(--fg-body); }
.lw-fof-pill:hover { color:var(--lw-oc); }
.lw-fof-pill.on { background:var(--bg-surface); color:var(--lw-oc); box-shadow:0 2px 8px var(--lw-oc-soft); }
.lw-fof-anim { opacity:0; transform:translateY(6px); transition:opacity .28s ease, transform .28s ease; }
.lw-fof-anim.in { opacity:1; transform:none; }
.lw-fof-note { display:flex; align-items:flex-start; gap:.5rem; font-size:.78rem; line-height:1.45; margin-top:.2rem; padding:.55rem .7rem; border-radius:var(--lw-r-box,10px); }
.lw-fof-note i { margin-top:1px; }
.lw-fof-note.st-open { background:var(--light-primary); color:var(--primary); } /* -- 24.07.2026 ek&claude-Fable-5 — REOPEN notu */
.lw-fof-note.st-won { background:var(--light-success); color:var(--success); }
.lw-fof-note.st-lost { background:var(--light-danger); color:var(--danger); }
.lw-fof-note.st-abandoned { background:var(--light-secondary); color:var(--secondary); }
.lw-fof-note.st-suspended { background:var(--light-warning); color:var(--warning); }
/* dark — renkler .lw-oc-host token remap'inden gelir; yalnız zemin ayrımı netleştirilir (.lw-dispo-btn emsali) */
html.dark-layout .lw-fof-seg { background:var(--bg-app); }
html.dark-layout .lw-fof-pill.on { background:var(--bg-surface); }
html.dark-layout .lw-fdot.cur { background:var(--bg-surface); }
html.dark-layout .lw-sa-row { background:transparent; }
/* ===================== END: LeadCenter Fırsat Sonuçlandırma ===================== */

/* ===================== BEGIN: LeadCenter Fırsat Evresi (Musa UI redesign) =====================
   -- 24.07.2026 ek&claude-Fable-5 — "Fırsat Aşama Tasarımları.html" .fld.ev portu: Düzenle formunda collapsible
   "Fırsat Evresi" alanı (mor degrade kutu + radio-satırlar done ✓/on ●/n-N + son-aşama ipucu) + .lw-ep-sep ayraç.
   Renkler token; dark'ta degrade yerine primary-tonlu düz zemin. Index.cshtml inline ile BİREBİR senkron. */
.lw-ev { background:linear-gradient(180deg,#f5f4ff,#fbfaff); background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, #fff), color-mix(in srgb, var(--primary) 3%, #fff)); border:1px solid #e4e0fb; border-color:color-mix(in srgb, var(--primary) 20%, #fff); border-radius:var(--lw-r-card,12px); padding:1rem; }
.lw-ev-lab { display:flex; align-items:center; gap:.45rem; width:100%; background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-sans); font-size:.8rem; font-weight:700; color:var(--primary); text-align:left; }
.lw-ev-title { min-width:0; }
.lw-ev-badge { margin-left:auto; background:var(--primary); color:#fff; font-size:.7rem; font-weight:600; padding:.18rem .65rem; border-radius:var(--lw-r-pill,999px); white-space:nowrap; max-width:45%; overflow:hidden; text-overflow:ellipsis; }
.lw-ev-hintlabel { color:var(--primary); font-weight:600; font-size:.7rem; flex:0 0 auto; }
.lw-ev-chv { color:var(--fg-muted); font-size:.7rem; flex:0 0 auto; transition:transform .2s ease; }
.lw-ev-lab.open .lw-ev-chv { transform:rotate(180deg); }
.lw-ev-body { margin-top:.7rem; }
.lw-ev-rows { display:flex; flex-direction:column; gap:.25rem; }
.lw-evr { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:var(--lw-r-box,10px); cursor:pointer; font-size:.85rem; color:var(--fg-heading); background:var(--bg-surface); border:1px solid transparent; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.lw-evr:hover { background:var(--light-primary); }
.lw-evr.on { border-color:var(--primary); box-shadow:0 4px 12px var(--primary-a14); font-weight:600; }
/* -- 28.07.2026 ek&claude-Opus-5 (kullanıcı isteği) — evre satırı yuvarlağı gözden geçirildi:
   (1) ✓ ikonu 10px'e SABİTLENDİ ve ARTIK DOĞRUDAN <i>'ye veriliyor. Eskiden yalnız span'da font-size:.55rem vardı
       ve ikon bunu MİRAS alıyordu; mirasa dayanan boyut, <i>'yi hedefleyen herhangi bir kural (tema/FA duotone)
       karşısında kaybeder — bu yüzden ikon şişip yuvarlağı dolduruyordu. px kullanıldı: rem kök boyutuna bağlıydı.
   (2) seçili nokta 9px → 8px: dış çember 18px, kenarlık 2px → iç alan 14px; 9px nokta kenara 2.5px kalıyordu
       (tıknaz görünüm), 8px ile her yönden 3px nefes payı kalır — standart radio oranı. */
.lw-evr-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border-input); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; line-height:1; box-sizing:border-box; }
.lw-evr-radio i { font-size:10px; line-height:1; }
.lw-evr.on .lw-evr-radio { border-color:var(--primary); }
.lw-evr.on .lw-evr-radio::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.lw-evr.done .lw-evr-radio { background:var(--primary); border-color:var(--primary); }
.lw-evr-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.lw-evr-num { font-size:.7rem; color:var(--fg-heading); font-weight:500; flex:0 0 auto; }
.lw-ev-hint { display:flex; align-items:center; gap:.45rem; font-size:.74rem; color:var(--primary); font-weight:600; margin-top:.8rem; padding-top:.75rem; border-top:1px dashed var(--primary-a35); }
.lw-ev-hint b { color:var(--fg-heading); }
/* -- 08.09.2026 ek&claude-Opus-5 (kullanıcı isteği: sıfırdan kazanılmış fırsat) — CREATE modunda son aşama
   satırına tıklanınca beliren "Kaydettiğinizde Kazanıldı olarak kapatılır" notu. Görsel dil Sonuçlandır
   formunun Kazanıldı notuyla AYNI (.lw-fof-note.st-won ile birlikte kullanılır); burada yalnız evre
   listesinin altındaki boşluk verilir — EDIT'teki .lw-ev-hint ipucu olduğu gibi kalır. */
.lw-ev-winnote { margin-top:.8rem; }

/* ===================== BEGIN: Faz 12 — ortak kabuklar =====================
   -- 06.08.2026 ek&claude-Opus-5 (Faz 12) — bespoke sınıfların yerine geçen ORTAK kurallar.
   Silinenler: .lw-sg-label · .lw-fbadge(+st-*) · .lw-sa-cur · .lw-next-chip · .lw-opp-empty ·
   .lw-fu-disc · .lw-refin · .lw-mf-detailed · .lw-sec-head .edit · .lw-fu-reset button ·
   .lw-opp-item .lw-heat(+3) · .lw-sa-row.primary(atıl). _Card360Styles.cshtml ikizi ile senkron. */

/* Metin linki — K7'nin ÜÇÜNCÜ seviyesi. Hem <a> hem <button> üzerinde çalışmalı (dört tüketicinin
   ikisi buton, ikisi bağlantıydı) → buton reset'i sınıfın İÇİNDE. Eleman türü <a>/<button> KALMALI:
   Card360.js:578 peek-tıklama istisna listesi element adına bakıyor, <div>/<span>'e çevrilirse
   ikinci panel açıkken tıklama "peek = üstteki formu kapat" dalına düşer. */
.lw-lnk { border:0; background:none; padding:0; font-family:var(--font-sans); font-size:.82rem; font-weight:600; color:var(--primary); cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; }
.lw-lnk:hover { text-decoration:underline; }
.lw-lnk.muted { color:var(--fg-heading); font-weight:500; font-size:.8rem; }
.lw-lnk.muted:hover { color:var(--primary); }
/* .lw-lnk sabit .82rem taşır; küçük metin bloklarının İÇİNDE satır-içi bağlantı olduğunda
   çevresini büyütmesin diye bu iki kapta boyutu ve akışı devralır. */
.lw-sg-done-t .lw-lnk, .lw-sg-lock .lw-lnk { font-size:inherit; display:inline; }
/* Bölüm başlığının sağ ucundaki aksiyon (Düzenle / Takibi Sonlandır) — eski .lw-sec-head .edit ve
   .lw-fu-disc'in margin-left:auto'su buraya taşındı. */
.lw-sec-head > .lw-lnk, .lw-sec-head > .btn { margin-left:auto; }
/* -- 06.08.2026 (Faz 12 denetimi) — silinen .lw-fu-disc i kuralı .lw-sec-head i { color:var(--primary) }
   kuralını EZMEK için vardı. Ezen gitti, ezilen kaldı → danger butonunun ban ikonu MOR çıkıyordu
   (kalıtım doğrudan kurala her zaman yenilir). Genel çözüm: başlıktaki HER tema butonunun ikonu
   butonun kendi rengini devralsın; ileride konacak butonlar da otomatik doğru olur. */
.lw-sec-head > .btn i { color:inherit; }
/* Öneri başlığındaki bağlam çipi (eski .lw-sa-cur) artık tema badge'i → hizası burada. */
.lw-sa-head > .badge { margin-left:auto; text-transform:none; letter-spacing:0; font-size:.68rem; }
/* K9: panel içindeki TÜM tema rozetleri pill. Rozete panel'e özgü SINIF eklenmiyor —
   Card360Actions.js:408 [data-role="status-badge"] elemanının className'ini panel DIŞINDAKİ liste
   satırına kopyalıyor; sınıf eklenseydi liste o sınıfı alıp karşılığı olmayan CSS ile stilsiz kalırdı. */
.lw-oc-host .badge { border-radius:var(--lw-r-pill,999px); display:inline-flex; align-items:center; gap:.3rem; }
/* -- 07.08.2026 ek&claude-Opus-5 (kullanici gerekcesi: "yasli insanlar gri metinleri goremiyor") —
   tema .badge-light-secondary metni --bs-secondary (#82868b) ile boyuyor; kendi soft zemininde
   kontrast ~3.5:1 kaliyor (WCAG AA kucuk metin esigi 4.5). ZEMIN korunuyor (notr anlami tasiyor),
   yalniz METIN okunur tona cekiliyor. Kapsam .lw-oc-host — uygulamanin geri kalanina DOKUNMAZ.
   Geri almak icin bu iki satiri silmek yeterli. */
.lw-oc-host .badge.badge-light-secondary { color:var(--fg-heading); }
.lw-tagrow .badge > i { font-size:.8em; }
/* -- 07.08.2026 ek&claude-Opus-5 (E2E denetimi) — ikinci panelin 57 tema kontrolü ölçeğin dışındaydı
   (theme5/bootstrap.css:1664 .form-control 0.357rem · :2327 .btn 0.358rem) ve panel kutuları 10px.
   Kontroller "kutu" basamağına, butonlar bir alt basamağa (concentric) bağlandı. Yalnız .lw-oc-host
   kapsamında — uygulamanın geri kalanına DOKUNMAZ. */
.lw-oc-host .form-control, .lw-oc-host .form-select { border-radius:var(--lw-r-box,10px); }
.lw-oc-host .btn { border-radius:var(--lw-r-ic,8px); }
/* K8: tek boş-durum dili. ".lw-sec >" ŞART — pane seviyesindeki boş durumlar (lazy yükleniyor /
   rolsüz) .lw-sec içinde DEĞİL ve geniş 2.4rem padding'ini korumalı. */
.lw-sec > .lw-oc-empty { padding:1.4rem 1rem; }
/* Sessiz şeridin altındaki tek satırlık öneri (inline margin-top:.45rem'in yerine). */
.lw-sg-done + .lw-sa-list { margin-top:.5rem; }
/* İletişim kartı: uzun değerli satırlar (telefon/hatırlatma/açıklama/etiket) üstten hizalanır. */
.lw-kv.lw-kv-top { align-items:flex-start; }
.lw-kv.lw-kv-top .v { flex:1; }
.lw-kv .lw-kv-none { color:var(--fg-heading); font-weight:400; font-style:normal; }
.lw-ps-idcard .avatar.lg .avatar-content { width:50px; height:50px; }
/* Tıklanabilir liste satırı + "tekrar görüş" meta satırı (inline style'ların yerine). */
.lw-act-click { cursor:pointer; }
/* Dil .lw-sa-row / .lw-opp-item hover'ıyla BİREBİR aynı (aynı mor alfa basamağı, aynı gölge reçetesi). */
.lw-act-click:hover { border-color:var(--primary); box-shadow:0 5px 14px -6px var(--primary-a35); }
.lw-act-click:focus-visible, .lw-sa-row:focus-visible, .lw-opp-item:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.lw-act-meta.lw-act-again { color:var(--warning); }
/* -- 14.10.2026 ek&claude-Opus-5.5 — etkinlik satırı KONUM ÇİPİ; kanonik yer card360.css (gerekçe orada), BİREBİR ikiz. */
.lw-act-loc { display:inline-flex; align-items:center; gap:.3rem; margin-left:.15rem; padding:.05rem .55rem; border-radius:var(--lw-r-pill,999px); background:var(--light-primary); color:var(--primary); font-size:.72rem; font-weight:600; line-height:1.5; white-space:nowrap; text-decoration:none; transition:background-color .12s, color .12s; }
.lw-act-loc i { font-size:.7rem; }
a.lw-act-loc:hover, a.lw-act-loc:focus-visible { background:var(--primary); color:#fff; text-decoration:none; }
.lw-act-loc.is-off { background:var(--light-secondary); color:var(--fg-body); font-weight:500; }
.lw-act-loc.is-off i { color:var(--fg-muted); }
/* Sohbet pane'i full-bleed olduğu için içindeki kutuların kenar boşluğu BURADA verilir; değerler
   .lw-ps-body padding'iyle aynı (eski inline margin:1.1rem 14.07 öncesi geometriye aitti).
   -- 24.08.2026 mk&claude-Opus-5 — listeye .lw-mf-warn eklendi: "başka kanaldan iletişim" şeridi de
   pane'in DOĞRUDAN çocuğu (kendi .lw-sec kabına konmadı — tek satırlık şerit için kart fazla ağır). */
.lw-chat-pane > .lw-sec, .lw-chat-pane > .lw-sa, .lw-chat-pane > .lw-mf-warn { margin:.5rem .9rem; }
@media (max-width:760px){
    .lw-chat-pane > .lw-sec, .lw-chat-pane > .lw-sa, .lw-chat-pane > .lw-mf-warn { margin:.6rem; }
}
/* ===================== END: Faz 12 ===================== */
.lw-ep-sep { border:0; border-top:1px solid var(--border); margin:0 0 .9rem; }
html.dark-layout .lw-ev { background:var(--bg-hover); border-color:var(--primary-a35); }
html.dark-layout .lw-evr { background:var(--bg-surface); }
/* -- 06.08.2026 ek&claude-Opus-5 (beyaz etiket denetimi) — Faz 12 (K7) ikincil butonları temanın
   btn-label ailesine indirdi; ama tema tarafında btn-label'ın dark override'ı olan TEK sınıf
   .btn-label-primary (planports/dark-style.css:298 · karel/dark-style.css:307). Diğerleri OPAK
   açık zemin taşıyor (#f1f1f2 / #fce4e4) → dark'ta panelin tüm ikincil butonları açık kutu kalırdı.
   Panel-scoped: uygulamanın geri kalanına DOKUNMAZ. Token'lar .lw-oc-host'ta dark-remap'li olduğu
   için değerler iki markada da doğru üretilir. */
html.dark-layout .lw-oc-host .btn-label-secondary { background:var(--light-secondary); color:var(--fg-body); }
html.dark-layout .lw-oc-host .btn-label-secondary:hover { background:var(--secondary); color:var(--bg-app); }
html.dark-layout .lw-oc-host .btn-label-danger { background:var(--light-danger); color:var(--danger); }
html.dark-layout .lw-oc-host .btn-label-danger:hover { background:var(--danger); color:#fff; }
/* ===================== END: LeadCenter Fırsat Evresi ===================== */

/* ===================== BEGIN: Sol menü — aktif öğe ikon rengi =====================
   -- 28.07.2026 ek&claude-Opus-5 (kullanıcı bulgusu: "Lead Merkezi'ne basınca ikon görünmüyor")
   TEMA KUSURU, yalnız Lead Merkezi'ne özgü DEĞİL. Aktif üst-seviye menü öğesi mor gradient zemin + beyaz
   metin alıyor (theme5/components.css:559 menu-light, :702 menu-dark) ama İKON rengini ezen hiçbir kural yok.
   Menü ikonları `text-primary` sınıfı taşıyor ve o `color:#7367f0 !important` (bootstrap.css:6291) — yani ikon
   zeminle AYNI mora sabitleniyor ve kayboluyor. Aynı sorun her düz (alt öğesiz) üst-seviye girişte var:
   Dashboard, Ürünler ve Hizmetler, ve yeni eklenen Lead Merkezi.
   Seçici `> li.active > a` yalnız KENDİSİ aktif olan üst-seviye öğeyi hedefler; alt öğe aktifken parent'a
   .active verilmiyor (o dal `> li .active > a` ile ayrı stillenir, :569/:621) → çocuk menülerin ikonları
   etkilenmez. `!important` şart: text-primary'yi ancak o yener.
   -- 31.07.2026 mk&claude-Fable-5 (kullanıcı isteği, madde 10) — kural YORUMDAN ÇIKARILDI (hata hâlâ açıktı).
   Aktif öğede ikon beyaz; pasif öğede hiçbir şey ezilmediği için text-primary'nin moru geri gelir. Hover'da
   zemin renklenip ikon kaybolduğu için :hover da aynı kurala dahil.

   -- 31.07.2026 mk&claude-Fable-5 (kullanıcı bulgusu) — BEYAZ İKON YALNIZ MOR ZEMİNDE DOĞRU. Menü daraltılmış
   ve hover'la açılmamışken (body.menu-collapsed + .main-menu:not(.expanded)) tema aktif öğeye mor gradient
   DEĞİL, `background:whitesmoke; color:#565656` veriyor (theme5/menu-types/vertical-menu.css:106) → beyaz
   ikon açık zeminde kayboluyordu. Kural artık o duruma HİÇ uygulanmıyor: koşul "menü daraltılmamış VEYA
   panel hover'la açılmış". Renk yeniden atanmıyor, kural sadece devreden çıkıyor; böylece ikon temanın
   kendi `.text-primary`sine (bootstrap.css:6291, #7367f0 !important) geri düşüyor — tenant primary'yi
   değiştirirse ikon onu izler, burada donmuş bir hex kalmaz.
   .expanded YALNIZ daraltılmış menüde eklenir (vertical-menu.css:111), o yüzden ikinci seçicide
   body.menu-collapsed tekrar edilmedi. */
body:not(.menu-collapsed) .main-menu .navigation > li.active > a i,
body:not(.menu-collapsed) .main-menu .navigation > li.active > a svg,
.main-menu.expanded .navigation > li.active > a i,
.main-menu.expanded .navigation > li.active > a svg { color: #fff !important; }
body:not(.menu-collapsed) .main-menu .navigation > li.active > a:hover i,
body:not(.menu-collapsed) .main-menu .navigation > li.active > a:hover svg,
.main-menu.expanded .navigation > li.active > a:hover i,
.main-menu.expanded .navigation > li.active > a:hover svg { color: #fff !important; }
/* ===================== END: Sol menü — aktif öğe ikon rengi ===================== */

/* ===================== Ödeme planı özeti (fırsat detayı) =====================
   -- 01.09.2026 mk&claude-Opus-5 (tasarım dokümanı: "Ödeme Planı Özeti", kullanıcı onaylı)

   Bileşenin TAMAMI temanın mevcut sınıflarıyla kuruldu (.card · .alert · .progress · .row/.col ·
   .bullet · .badge-light-*). Burada yalnız temada KARŞILIĞI OLMAYAN altı yardımcı var; yeni bileşen
   ya da renk tanımlanmıyor.

   🔴 .pp-ps-value için h4 KULLANILMADI: 1.5rem dört kolona sığmıyor ve tutar alt satıra kırılıyordu
      (tasarım §4). Bu yüzden h5 + nowrap.
   🔴 .pp-ps-sep yalnız md ve üstünde ayraç çizer: mobilde hücreler 2x2'ye döndüğü için dikey çizgi
      yanlış yere düşerdi. */
.pp-plan-summary .pp-ps-bar { height: 1.625rem; }
.pp-plan-summary .pp-ps-bar .progress-bar { font-size: .6875rem; font-weight: 700; }
.pp-plan-summary .pp-ps-icon { font-size: 1rem; line-height: 1; }
.pp-plan-summary .pp-ps-label { font-size: .6875rem; letter-spacing: .04em; }
.pp-plan-summary .pp-ps-value { font-size: 1.0625rem; white-space: nowrap; letter-spacing: -.01em; }
.pp-plan-summary .pp-ps-value small { font-size: .6875rem; }
.pp-plan-summary .pp-ps-alt { font-size: .6875rem; opacity: .8; }
.pp-plan-summary .pp-ps-note { font-size: .75rem; }
@media (min-width: 768px) {
    .pp-plan-summary .pp-ps-sep { border-right: 1px solid var(--bs-border-color, #ebe9f1); }
}

/* -- 04.09.2026 mk&claude-Opus-5 (test turu M13) — Taksit tablosunun altındaki "Planlanan" ve
   "Planlanmayan" satırları. Özet kartlarından buraya taşındılar; taksit satırlarından ayrıldıkları
   belli olsun diye üstten çizgi ve hafif zemin. Yeni renk tanımlanmıyor. */
#InstallmentTable .pp-plan-foot td { border-top: 2px solid var(--bs-border-color, #ebe9f1); }
#InstallmentTable .pp-plan-foot tr + tr td { border-top-width: 1px; }
/* ===================== END: Ödeme planı özeti ===================== */

/* ===================== Takip Otomasyonu Faz 2 — WhatsApp mesaj grupları (.wtg-*) — 24.08.2026 ek&claude-Fable-5 =====================
   Liste satırı (Gruplar sekmesi) + grup formu (üye kartı, Şablon Ekle paneli, Dil Kapsamı raili). Renkler tema token'larından;
   koyu tema html.dark-layout ile. site.css bundle'da style.css'ten ÖNCE → eşit özgüllükte tema kazanır, o yüzden .wtg- öneki. */
.wtg-ico, .wtg-card-ico { width: 40px; height: 40px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); }
.wtg-card-ico { width: 38px; height: 38px; font-size: 1.05rem; }
.wtg-card-title { display: flex; align-items: center; gap: .75rem; }
.wtg-min0 { min-width: 0; }
.wtg-health { white-space: nowrap; }
.wtg-opt { font-size: .68rem; font-weight: 500; vertical-align: middle; }
.wtg-member { border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; padding: .85rem 1rem; margin-bottom: .75rem; transition: border-color .15s, box-shadow .15s; }
.wtg-member.wtg-default { border-color: var(--primary, #7367f0); box-shadow: 0 0 0 1px var(--primary, #7367f0) inset; }
.wtg-member-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wtg-st-ico { font-size: 1.05rem; flex: none; }
.wtg-code { font-size: .8rem; background: var(--bg-app, #f8f7fa); color: var(--fg-muted, #6f6b7d); padding: .15em .5em; border-radius: 4px; }
.wtg-spacer { flex: 1 1 auto; }
.wtg-default-ctl { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; font-size: .85rem; color: var(--fg-muted, #6f6b7d); }
.wtg-default-ctl.wtg-disabled { opacity: .5; cursor: not-allowed; }
.wtg-default-ctl .wtg-default-on { display: none; color: var(--primary, #7367f0); font-weight: 600; }
.wtg-member.wtg-default .wtg-default-on { display: inline; }
.wtg-member.wtg-default .wtg-default-lbl { display: none; }
.wtg-body { margin-top: .6rem; background: var(--bg-app, #fafafc); border-radius: .357rem; padding: .6rem .8rem; font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.wtg-var { font-family: monospace; font-size: .8em; background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); padding: .1em .4em; border-radius: 4px; }
.wtg-add-panel { border: 1px dashed var(--border, #ebe9f1); border-radius: .428rem; margin-top: .75rem; }
.wtg-add-head { padding: .6rem .9rem; font-size: .82rem; color: var(--fg-muted, #6f6b7d); border-bottom: 1px solid var(--border, #ebe9f1); }
.wtg-cand { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-bottom: 1px solid var(--border, #ebe9f1); }
.wtg-cand .wtg-cand-body { flex: 1 1 200px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; color: var(--fg-muted, #6f6b7d); }
.wtg-cand .wtg-cand-act { flex: none; }
.wtg-cand.wtg-cand-blocked .wtg-lang { color: var(--fg-muted, #b9b9c3); }
.wtg-lang-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border, #ebe9f1); }
.wtg-lang-row .wtg-lr-name { flex: 1 1 auto; font-weight: 600; }
.wtg-lang-row.wtg-lr-off .wtg-lr-name { color: var(--fg-muted, #6f6b7d); font-weight: 500; }
html.dark-layout .wtg-code, html.dark-layout .wtg-body { background: var(--bg-hover, #363b54); }
html.dark-layout .wtg-member, html.dark-layout .wtg-add-panel, html.dark-layout .wtg-cand, html.dark-layout .wtg-lang-row, html.dark-layout .wtg-add-head { border-color: var(--border, #434968); }
/* ===================== END .wtg-* ===================== */

/* ===================== Takip Otomasyonu Faz 3A — Takip Planı formu (.fup-*) — 25.08.2026 ek&claude-Fable-5 =====================
   Tasarım: design_handoff_takip_otomasyonu README Ekran 2. Kart başlığı .wtg-card-title/.wtg-card-ico ile ORTAK (Faz 2).
   Satır grid'i README ölçüleri (30px · gün · saat · açıklama · 300px grup · 40px); Manuel modda .fup-manual → .fup-auto kolonları
   ve kanal alanı gizlenir, grid daralır. Dar ekranda .fup-scroll yatay kaydırır (README: overflow-x:auto). */
.fup-radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.fup-radios .custom-option-item { flex: 1 1 300px; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; margin: 0; }
.fup-radios .custom-option-item small { color: var(--fg-muted, #6f6b7d); }
.fup-radio-dot { flex: none; width: 18px; height: 18px; margin-top: .15rem; border-radius: 50%; border: 2px solid var(--input-border, #d8d6de); background: var(--surface, #fff); }
.custom-option-item-check:checked + .custom-option-item .fup-radio-dot { border-color: var(--primary, #7367f0); box-shadow: inset 0 0 0 4px var(--surface, #fff); background: var(--primary, #7367f0); }
.fup-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; border: 1px solid var(--input-border, #d8d6de); background: var(--surface, #fff); color: var(--fg-muted, #6f6b7d); font-size: .85rem; }
.fup-dot.is-msg { border-color: var(--success, #28c76f); background: var(--light-success, #ddf6e8); color: var(--success, #28c76f); }
.fup-tl { background: var(--bg-app, #fafafc); border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; padding: .85rem 1rem 1.9rem; margin-bottom: 1.25rem; }
.fup-tl-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.fup-tl-title { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted, #6f6b7d); }
.fup-tl-legend { font-size: .8rem; color: var(--fg-muted, #6f6b7d); display: inline-flex; align-items: center; gap: .4rem; }
.fup-tl-legend .fup-dot { width: 22px; height: 22px; font-size: .7rem; }
.fup-tl-track { position: relative; height: 2px; background: var(--border, #ebe9f1); margin: 1rem 15px 0; }
.fup-tl-pt { position: absolute; top: -14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.fup-tl-pt small { font-size: .72rem; white-space: nowrap; color: var(--fg-muted, #6f6b7d); }
/* -- 25.08.2026 (denetim fix T1) — .fup-scroll overflow-x:auto KALDIRILDI: overflow-y'yi de auto'ya çekip satır içine bağlı PpDateTime
   seçicisini (absolute kök) kırpıyordu. README'nin yatay kaydırması yerine dar ekranda satır sarılır (aşağıdaki media). */
.fup-head, .fup-row { display: grid; grid-template-columns: 30px 190px 130px minmax(180px, 1fr) 300px 40px; gap: 1rem; align-items: start; }
.fup-manual .fup-head, .fup-manual .fup-row { grid-template-columns: 30px 190px minmax(180px, 1fr) 40px; }
.fup-row { position: relative; } /* PpDateTime host'u: seçici satırın alt kenarından açılır */
/* 🔴 Satır-host istisnası: bileşen kabuğu max-height'ı HOST'a göre sınırlar (ppdatetime.css .ppdt--pop calc(100% - 28px), .ppdt--sheet 92%)
   — Card360'ta host = tam boylu panel. Burada host = ~100px'lik satır → seçici 74px'e sıkışıp kullanılamaz oluyordu (headless tanı).
   Kapsamlı override: satır içindeki kabuk doğal yüksekliğinde satırın alt kenarından YUKARI açılır; bileşen dosyasına dokunulmadı. */
.fup-row > .ppdt--pop, .fup-row > .ppdt--sheet { max-height: none; }
@media (max-width: 991.98px) {
    .fup-head { display: none; }
    .fup-row, .fup-manual .fup-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
    .fup-c-days { flex: 1 1 200px; }
    .fup-c-time { flex: 0 0 130px; }
    .fup-c-desc, .fup-c-group { flex: 1 1 100%; }
}
.fup-head { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted, #6f6b7d); padding-bottom: .4rem; border-bottom: 1px solid var(--border, #ebe9f1); margin-bottom: .75rem; }
.fup-row { margin-bottom: .75rem; }
.fup-c-dot { padding-top: .3rem; }
.fup-c-days .inp-days { max-width: 64px; }
.fup-c-days .fup-daysfx { min-width: 106px; justify-content: center; }
.fup-manual .fup-auto { display: none !important; }
.fup-time .ppdt-fv.is-empty { color: var(--fg-muted, #b9b9c3); }
.fup-langs { margin-top: .35rem; }
html.dark-layout .fup-tl, html.dark-layout .fup-dot { border-color: var(--border, #434968); }
html.dark-layout .fup-dot { background: var(--surface, #2f3349); }
html.dark-layout .fup-dot.is-msg { background: rgba(40, 199, 111, .2); }
html.dark-layout .fup-radio-dot { background: var(--surface, #2f3349); }
/* -- 17.09.2026 ek&claude-Opus-5 — Kart A "tüm mesajlar gönderilince niteliksiz yap" kutusu */
.fup-disq { border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; padding: .85rem 1rem; background: var(--bg-app, #fafafc); }
.fup-disq .form-check-label { cursor: pointer; }
html.dark-layout .fup-disq { border-color: var(--border, #434968); background: var(--bg-hover, #363b54); }
/* -- 17.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — Details/Delete "Mesajlar bitince" değeri (_FollowupDisqualifySummary) */
.fup-dsum { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; vertical-align: middle; }
.fup-dsum-pill, .fup-dsum-reason, .fup-dsum-off { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; line-height: 1.2; }
.fup-dsum-pill { background: var(--light-danger, #fce5e6); color: var(--danger, #ea5455); font-weight: 600; }
.fup-dsum-reason { border: 1px solid var(--border, #ebe9f1); background: var(--surface, #fff); color: var(--fg-body, #6e6b7b); border-radius: .75rem; max-width: 100%; }
.fup-dsum-reason strong { overflow-wrap: anywhere; }
.fup-dsum-reason i { color: var(--fg-muted, #a5a3ae); }
.fup-dsum-reason small { font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted, #a5a3ae); }
.fup-dsum-reason strong { font-weight: 600; color: var(--fg-heading, #5e5873); }
.fup-dsum-info { color: var(--fg-muted, #b9b9c3); cursor: help; }
.fup-dsum-info:hover { color: var(--primary, #7367f0); }
.fup-dsum-off { background: var(--bg-hover, #f2f2f3); color: var(--fg-body, #6f6b7d); font-weight: 500; }
.fup-dsum-off i { color: var(--fg-muted, #a5a3ae); }
html.dark-layout .fup-dsum-pill { background: rgba(234, 84, 85, .16); }
html.dark-layout .fup-dsum-reason { border-color: var(--border, #434968); background: var(--surface, #2f3349); color: #d0d2d6; }
html.dark-layout .fup-dsum-reason strong { color: #e6e6ea; }
html.dark-layout .fup-dsum-off { background: rgba(130, 134, 139, .18); color: #d0d2d6; }
/* -- 28.08.2026 ek&claude-Fable-5 — Gün-0 dakika ofseti bloğu (saat yerine; FollowupFunctions.applyTimeMode gösterir/gizler) */
.fup-min { display: flex; gap: .5rem; align-items: center; }
.fup-min-sel { min-width: 0; }
.fup-min-custom { max-width: 70px; flex: none; text-align: center; }
/* ===================== END .fup-* ===================== */

/* ===================== Takip Otomasyonu Faz 3B — Aday Dağılımı (.ldg-*) — 25.08.2026 ek&claude-Fable-5 =====================
   README Ekran 1: plan önizleme kutusu (Kart B) + sağ özet raili. Kart başlığı .wtg-card-title ile ortak. */
.ldg-preview { background: var(--bg-app, #fafafc); border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; padding: .85rem 1rem; }
.ldg-pv-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ldg-pv-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ldg-step { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface, #fff); border: 1px solid var(--border, #ebe9f1); border-radius: 4px; padding: .25rem .5rem; font-size: .8rem; color: var(--fg-muted, #6f6b7d); }
.ldg-step i { color: var(--fg-muted, #b9b9c3); }
.ldg-step.is-msg i { color: var(--success, #28c76f); }
.ldg-step b { color: var(--fg-heading, #5e5873); white-space: nowrap; }
.ldg-step .ldg-step-desc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldg-step em { font-style: normal; font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .1em .4em; border-radius: 3px; background: var(--light-secondary, #f2f2f3); }
.ldg-step.is-msg em { background: var(--light-success, #ddf6e8); color: var(--success, #28c76f); }
.ldg-rail-row { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--border, #ebe9f1); }
.ldg-rail-row:last-of-type { border-bottom: 0; }
.ldg-rail-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); }
.ldg-rail-txt { min-width: 0; font-size: .9rem; }
.ldg-rail-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.ldg-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; background: var(--surface, #fff); border: 1px solid var(--border, #ebe9f1); border-radius: 4px; padding: .15rem .45rem; }
.ldg-chip.is-stopped { opacity: .65; } /* durdurulmuş temsilci (denetim fix S9) */
html.dark-layout .ldg-preview, html.dark-layout .ldg-step, html.dark-layout .ldg-chip, html.dark-layout .ldg-rail-row { border-color: var(--border, #434968); }
html.dark-layout .ldg-preview { background: var(--bg-hover, #363b54); }
html.dark-layout .ldg-step, html.dark-layout .ldg-chip { background: var(--surface, #2f3349); }
html.dark-layout .ldg-step em { background: var(--bg-hover, #363b54); }
/* 360 panel kv satırındaki dil select'i (Faz 3C) — satır yüksekliğini bozmasın */
/* -- 17.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — Kart B "Mesaj gönderim saati": Her zaman / Belirli saatlerde.
   Radyo kartlarının kendisi .fup-radios (Takip Planı formu) — burada yalnız ikon karosu ve saat aralığı satırı. */
.ldg-win { margin-top: .5rem; }
.ldg-win-ico { flex: none; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--light-secondary, #f2f2f3); color: var(--fg-muted, #6f6b7d); transition: background-color .15s ease, color .15s ease; }
.custom-option-item-check:checked + .custom-option-item .ldg-win-ico { background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); }
.ldg-win-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin-top: .75rem; padding: .85rem 1rem; border: 1px dashed var(--border, #ebe9f1); border-radius: .428rem; background: var(--bg-app, #fafafc); }
.ldg-win-field { flex: 0 1 190px; min-width: 150px; }
.ldg-win-field .form-label { margin-bottom: .25rem; }
.ldg-win-sep { flex: none; padding-bottom: .6rem; color: var(--fg-muted, #b9b9c3); }
.ldg-win-err, .ldg-win-help { flex: 1 1 100%; margin: 0; }
.ldg-win-err:empty { display: none; }
@media (max-width: 575.98px) {
    .ldg-win-field { flex: 1 1 0; min-width: 0; }
}
html.dark-layout .ldg-win-range { border-color: var(--border, #434968); background: var(--bg-hover, #363b54); }
html.dark-layout .ldg-win-ico { background: rgba(255, 255, 255, .06); color: #b4b7bd; }
/* -- 17.09.2026 (son kontrol, inceleme bulgusu UI-6) — seçili ikon: açık temanın kuralı (0,4,0) koyu override'ı (0,2,1) eziyordu,
   --light-primary tanımsız olduğu için koyu kartta parlak #e9e7fd karo çıkıyordu. */
html.dark-layout .custom-option-item-check:checked + .custom-option-item .ldg-win-ico { background: rgba(115, 103, 240, .2); color: #a39cf4; }
/* ===================== END .ldg-* ===================== */

/* ===================== Takip Otomasyonu Faz 6 UI — Outbox izleme ekranları (.fo-*) — 01.09.2026 ek&claude-Fable-5 =====================
   design_handoff_takip_otomasyonu prompt-4: Gidecek Mesajlar (KPI + arama + durum çipleri + zengin satır) ve Dil Kapsamı
   (KPI + grup×dil matris hücreleri). Renk aileleri bg-light-* / badge-light-* sınıflarından gelir; burada yalnız ölçü/yerleşim.
   Koyu tema html.dark-layout override'ları blok sonunda (site.css style.css'ten önce yüklenir → önek şart, bkz .wtg- notu). */
.fo-kpi { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.25rem; }
.fo-kpi-ico { width: 42px; height: 42px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.fo-kpi .num { font-size: 1.45rem; font-weight: 600; color: var(--fg-heading, #5e5873); line-height: 1.2; }
.fo-kpi .lbl { font-size: .82rem; color: var(--fg-muted, #6f6b7d); }
.fo-lhead { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1.3rem; border-bottom: 1px solid var(--border, #ebe9f1); }
.fo-search { display: flex; align-items: center; gap: .5rem; flex: 1 1 240px; min-width: 200px; }
.fo-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; color: var(--fg-body, #6f6b7d); box-shadow: none; }
.fo-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.fo-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 50rem; border: 1px solid var(--input-border, #d8d6de); background: var(--surface, #fff); color: var(--fg-body, #6f6b7d); white-space: nowrap; transition: color .15s, border-color .15s; }
.fo-chip:hover { color: var(--primary, #7367f0); border-color: var(--primary, #7367f0); }
.fo-chip .cnt { font-size: .72rem; opacity: .75; }
.fo-chip.is-on { border-color: var(--primary, #7367f0); background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); }
.fo-state { min-width: 128px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
/* -- 01.09.2026 ek&claude-Fable-5 (kullanıcı bildirimi: mobil bozuktu) — satır kolonları sınıfa taşındı; ≤767px'te
   satır sarar: müşteri bloğu tam genişlik, altında zaman solda + durum pili/iptal sağda. KPI kartları ≤575px'te küçülür. */
.fo-row { display: flex; align-items: center; gap: 1rem; }
.fo-main { flex: 1 1 auto; min-width: 0; }
.fo-tpl { min-width: 0; max-width: 220px; }
.fo-when { flex: none; min-width: 150px; max-width: 190px; text-align: right; }
@media (max-width: 767.98px) {
    .fo-row { flex-wrap: wrap; gap: .35rem .75rem; }
    .fo-row .fo-main { flex: 1 1 100%; }
    .fo-row .fo-when { order: 2; min-width: 0; max-width: none; text-align: left; }
    .fo-row .fo-state, .fo-row .fo-out { order: 3; margin-left: auto; min-width: 0; }
    .fo-row .fo-act { order: 4; }
    .fo-lhead { padding: .75rem 1rem; }
}
@media (max-width: 575.98px) {
    .fo-kpi { padding: .8rem .9rem; gap: .6rem; }
    .fo-kpi-ico { width: 34px; height: 34px; font-size: .9rem; }
    .fo-kpi .num { font-size: 1.15rem; }
    .fo-kpi .lbl { font-size: .75rem; }
}
.fo-lang { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; background: var(--light-secondary, #f2f2f3); color: var(--fg-heading, #5e5873); padding: 1px 7px; border-radius: 4px; }
.fo-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: .72rem; }
.fo-cell.sm { width: 20px; height: 20px; border-radius: 6px; font-size: .6rem; }
.fo-cell.is-none { background: var(--bg-app, #f8f7fa); color: var(--fg-muted, #b9b9c3); border: 1px dashed var(--input-border, #d8d6de); }
.fo-cell .fo-cell-star { position: absolute; top: -5px; right: -5px; font-size: .55rem; color: var(--warning, #ff9f43); }
/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — .fo-si-* SOL DURUM ŞERİTLERİ KALDIRILDI: her satırın başında
   yanan sarı/mavi/kırmızı çizgiler listeyi gürültüye boğuyordu ve "mesaj gitti mi?" sorusunu yine de net
   cevaplamıyordu. Cevap artık TEK yerde: aşağıdaki .fo-out sonuç hücresi.

   SONUÇ HÜCRESİ — 9 durum 4 kovaya iner (PpFollowupOutboxState.GetOutcome; kelimeler filtre çipleriyle aynı):
   Gönderildi = yeşil · Başarısız = kırmızı · Sırada / İptal = nötr. Ayrıntılı durum tooltip'te. */
.fo-out { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 132px; padding: .38rem .8rem; border-radius: 50rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.fo-out i { font-size: .95rem; }
.fo-out-sent { background: var(--light-success, #ddf6e8); color: var(--success, #28c76f); }
.fo-out-problem { background: var(--light-danger, #fce5e6); color: var(--danger, #ea5455); }
.fo-out-queued { background: var(--bg-hover, #f2f2f3); color: var(--fg-body, #6f6b7d); }
.fo-out-canceled { background: var(--bg-hover, #f2f2f3); color: var(--fg-muted, #a5a3ae); }
.fo-star { color: var(--fg-muted, #a5a3ae); font-size: .8rem; cursor: default; }
/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı: "bu butonlar çirkin" → sonra "çok renksiz oldu") — satır aksiyonları:
   çerçeveli outline kutular DEĞİL, hayalet de DEĞİL → YUMUŞAK DOLGU (tema `btn-label-*` dili). Çerçevenin keskinliği
   yok ama düğme kendi rengini taşır; hover'da ton doyar (dolu zemin + beyaz ikon) → tıklanabilirlik ve niyet
   ilk bakışta okunur. */
.fo-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: var(--bg-hover, #f2f2f3); color: var(--fg-body, #6f6b7d); border-radius: 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.fo-ico i { font-size: .95rem; }
.fo-ico:hover, .fo-ico:focus { outline: 0; }
.fo-ico.is-send { background: var(--light-primary, #e9e7fd); color: var(--primary, #7367f0); }
.fo-ico.is-send:hover, .fo-ico.is-send:focus { background: var(--primary, #7367f0); color: #fff; }
/* -- 04.09.2026 ek&claude-Opus-5 — .is-del (takip adimini sil) .is-stop ile AYNI danger ailesi: ikisi de
   yikici, ayrimi ikon tasiyor (fa-ban = mesaji iptal et, fa-trash-alt = adimi sil). Ayri kural yazmak yerine
   secici listesine eklendi — ton tek yerden degisir. */
.fo-ico.is-stop, .fo-ico.is-del { background: var(--light-danger, #fce5e6); color: var(--danger, #ea5455); }
.fo-ico.is-stop:hover, .fo-ico.is-stop:focus, .fo-ico.is-del:hover, .fo-ico.is-del:focus { background: var(--danger, #ea5455); color: #fff; }
html.dark-layout .fo-ico { background: rgba(130, 134, 139, .18); color: #d0d2d6; }
html.dark-layout .fo-ico.is-send { background: rgba(115, 103, 240, .18); color: var(--primary, #7367f0); }
html.dark-layout .fo-ico.is-stop, html.dark-layout .fo-ico.is-del { background: rgba(234, 84, 85, .18); color: var(--danger, #ea5455); }
html.dark-layout .fo-out-queued, html.dark-layout .fo-out-canceled { background: rgba(130, 134, 139, .18); color: #d0d2d6; }
html.dark-layout .fo-lhead { border-color: var(--border, #434968); }
html.dark-layout .fo-chip { background: var(--surface, #2f3349); border-color: var(--input-border, #4a5076); }
html.dark-layout .fo-chip.is-on { background: rgba(115, 103, 240, .18); border-color: var(--primary, #7367f0); }
html.dark-layout .fo-lang { background: rgba(130, 134, 139, .18); }
html.dark-layout .fo-cell.is-none { background: var(--bg-hover, #363b54); border-color: var(--input-border, #4a5076); }

/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — etkinlik detayındaki birleşik "Takip Planı" zaman çizelgesi.
   Eski hal: kalın alert bloğu + altında AYRI adım listesi (aynı planı iki kez anlatıyordu). Şimdi tek panel:
   numaralı adım + sonuç rozeti + otomatik mesaj rozeti (.fo-state) + aksiyon ikonları (.fo-act) — ikisi de
   Gidecek Mesajlar ekranından YENİDEN KULLANILIR, kopyalanmaz. Görüntülenen etkinliğin satırı .is-current. */
/* 🔴 overflow:hidden KULLANILMAZ — "ertele" dropdown'ı satırın içinde açılıyor, kırpılırdı; köşeler
   bunun yerine baş/son çocuğa yarıçap vererek yuvarlanır. */
.fo-tl { border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; }
.fo-tl-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .7rem 1rem; background: var(--bg-app, #f8f7fa); border-bottom: 1px solid var(--border, #ebe9f1); border-radius: .428rem .428rem 0 0; }
.fo-tl-list > .fo-tl-step:last-child { border-radius: 0 0 .428rem .428rem; }
.fo-tl-plan { color: var(--fg-muted, #6f6b7d); }
.fo-tl-list { list-style: none; margin: 0; padding: 0; }
.fo-tl-step { display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem; }
.fo-tl-step + .fo-tl-step { border-top: 1px solid var(--border, #ebe9f1); }
.fo-tl-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; background: var(--light-secondary, #f2f2f3); color: var(--fg-heading, #5e5873); }
.fo-tl-main { flex: 1 1 auto; min-width: 0; }
.fo-tl-step.is-current { background: var(--light-primary, #e9e7fd); box-shadow: inset 3px 0 0 var(--primary, #7367f0); }
.fo-tl-step.is-current .fo-tl-dot { background: var(--primary, #7367f0); color: #fff; }
/* durum rozeti burada sütun hizası için genişletilmez (izleme listesindeki 128px sabiti sadece orada anlamlı) */
.fo-tl-step .fo-state, .fo-tl-step .fo-out { min-width: 0; }
/* aksiyon yuvası HER satırda ayrılır → aksiyonsuz satırda durum rozeti sağa kaymaz, rozetler alt alta hizalanır */
/* -- 04.09.2026 ek&claude-Opus-5 (kullanıcı bulgusu) — gap EKLENDİ: mesaj aksiyonları ile "Sil" AYRI .fo-act
   kaplarında duruyor; boşluk yalnız kapların İÇİNDE (.gap-25) vardı, kaplar ARASINDA yoktu → İptal ile Sil
   bitişik görünüyordu. Değer .gap-25 ile AYNI (0.25rem) ki satır içi ritim bozulmasın.
   Genişlik: 3 ikon = 32*3 + 2*4 = 104px, min-width 108px hâlâ yetiyor. */
.fo-tl-acts { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .25rem; min-width: 108px; }
@media (max-width: 767.98px) {
    .fo-tl-step { flex-wrap: wrap; gap: .35rem .6rem; }
    .fo-tl-step .fo-tl-main { flex: 1 1 100%; }
    .fo-tl-step .fo-state { margin-left: 2.4rem; }
    .fo-tl-acts { min-width: 0; margin-left: auto; }
}
/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı bulgusu) — ikonlu rozet: tema `bootstrap-extended.css:1865`
   `.badge i, .badge svg { width:11px; height:12px; vertical-align:top }` ile ikonu 11px kutuya sıkıştırıyor →
   glif kutudan taşıp metne YAPIŞIYOR (me-25 boşluğu yenik düşüyor) ve `vertical-align:top` yüzünden KAYIYOR.
   Çözüm .fo-state ile aynı: flex + gap (boşluk artık margin'e değil kapsayıcıya ait) + ikon kutusu serbest. */
.fo-badge { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
/* -- 01.09.2026 ek&claude-Opus-5 (kullanıcı: "mavi mor yeşil karma karışık, minimal şık yap") — 360 Takip
   sekmesinin SAKİN DİLİ. Eskiden tek satırda 4 hue yarışıyordu: yeşil "Otomatik Takip" rozeti, kırmızı
   "Takibi Sonlandır" dolgusu, mor "Sıradaki" rozeti, camgöbeği ikon karosu + "Yeni" + "Planlanan" rozetleri.
   Yeni kural: TEK AKSAN = primary (yalnız "Sıradaki" ve satır halkası); geri kalan her şey nötr; RENK ancak
   bir SONUÇ (olumlu/olumsuz) ya da SORUN (hata/şablon yok/telefon yok) varsa girer.
   Hepsi .lw-fu-seq'e scope'lu → Etkinlik sekmesinin satır dili DEĞİŞMEZ. */
.lw-fu-seq > .lw-sec-head { flex-wrap: wrap; }
.lw-fu-seq > .lw-sec-head h4 { flex: 1 1 auto; }
/* başlık: "Otomatik Takip" nötr çip + "Takibi Sonlandır" hayalet buton (kırmızı yalnız hover'da).
   .fo-quiet = aynı sakin çip Etkinlik Detayı panelinde de kullanılır → iki yüzey tek dil. */
.fo-quiet, .lw-fu-auto { background: var(--bg-hover, #f2f2f3); color: var(--fg-body, #6f6b7d); font-weight: 500; }
.fo-quiet i, .lw-fu-auto i { color: var(--fg-muted, #a5a3ae); }
/* NOT: .lw-fu-stop (hayalet "Takibi Sonlandır") 01.09.2026'da KALDIRILDI — kullanıcı "disabled gibi görünüyor"
   dedi, buton tema `btn-label-danger` dolgusuna geri döndü. Sınıf üretilmiyor, kural da tutulmuyor. */
/* 🔴 01.09.2026 GERİ ALINDI (kullanıcı: "her takibin önünde bir border vardı, gitmiş; eski tasarımla bu kadar
   oynamaman lazımdı") — satırın MEVCUT tasarımına dokunan tüm kurallar SİLİNDİ: durum şeridi (.lw-act.acc-*
   border-left 3px), renkli ikon karosu, "Sıradaki" rozeti ve "Planlanan" rozet rengi AYNEN eski halinde.
   Bu bloktan yalnız YENİ eklenen öğeler kalır: başlıktaki "Otomatik Takip" çipi ve meta satırındaki
   otomatik mesaj durumu — ikisi de var olan hiçbir öğeyi değiştirmez. */
/* otomatik mesaj durumu: META satırında sessiz metin — renk yalnız sorun/başarı durumunda */
.lw-fu-sep { color: var(--fg-muted, #a5a3ae); opacity: .55; }
.lw-fu-msg { display: inline-flex; align-items: center; gap: .3rem; color: var(--fg-muted, #a5a3ae); }
.lw-fu-msg.is-ok { color: var(--success, #28c76f); }
.lw-fu-msg.is-warn { color: var(--warning, #ff9f43); }
.lw-fu-msg.is-err { color: var(--danger, #ea5455); }
/* -- 17.09.2026 ek&claude-Opus-5 (kullanıcı: "sessiz hatalar olmasın") — izleme listesinde sıradaki kaydın erteleme sebebi */
.fo-pend { display: block; max-width: 240px; color: var(--fg-muted, #a5a3ae); white-space: normal; line-height: 1.3; margin-top: .15rem; }
.fo-pend.is-warn { color: var(--warning, #ff9f43); font-weight: 500; }
.fo-badge i, .fo-badge svg { width: auto; height: auto; vertical-align: middle; }
.fo-state i, .fo-state svg { width: auto; height: auto; vertical-align: middle; }
/* Etkinlik Detayı token scope TAŞIMAZ (.lw-oc-host / .lw-wrap yok) → sakin çip orada fallback'lerle çizilir;
   karanlık temada fallback'ler açık kalacağı için nötr ton burada ELLE verilir (emsal .fo-lang). */
html.dark-layout .fo-quiet, html.dark-layout .lw-fu-auto { background: rgba(130, 134, 139, .18); color: #d0d2d6; }
html.dark-layout .fo-tl, html.dark-layout .fo-tl-head, html.dark-layout .fo-tl-step + .fo-tl-step { border-color: var(--border, #434968); }
html.dark-layout .fo-tl-head { background: var(--bg-hover, #363b54); }
html.dark-layout .fo-tl-dot { background: rgba(130, 134, 139, .18); }
html.dark-layout .fo-tl-step.is-current { background: rgba(115, 103, 240, .16); }
/* ===================== END .fo-* ===================== */

/* -- 14.10.2026 ek&claude-Opus-5.5 (kullanıcı: "konum görüntüle çok kötü olmuş, daha şık yap") — Etkinlik
   Detayı KONUM KUTUCUĞU (PpMeetings/Details). Çıplak "Konumu Görüntüle" bağlantısı tarih satırı ile Takip Planı
   paneli arasında sahipsiz duruyordu; şimdi ikon karosu + başlık + koordinat + dış bağlantı oku taşıyan, içeriği
   kadar geniş bir kutucuk. Kenarlık/yarıçap .fo-tl'den (hemen altındaki panelle aynı aile), hover .lw-act-click
   reçetesinden (mor kenar + yumuşak gölge). .is-off = konumsuz başlatıldı (sönük, tıklanmaz).
   🔴 Sayfa token scope TAŞIMAZ (.lw-wrap yok) → marka rengi global --bs-primary'den (--primary değil: Karel'de
      mavi kalsın); karanlık tonlar ELLE (emsal .fo-quiet). color-mix çift bildirimli (desteklemeyen ilkini kullanır). */
.mtg-loc { display: inline-flex; align-items: center; gap: .7rem; margin-top: .75rem; padding: .45rem .95rem .45rem .5rem; border: 1px solid var(--border, #ebe9f1); border-radius: .428rem; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.mtg-loc:hover, a.mtg-loc:focus-visible { color: inherit; text-decoration: none; border-color: var(--bs-primary, #7367f0); box-shadow: 0 5px 14px -6px rgba(115, 103, 240, .35); box-shadow: 0 5px 14px -6px color-mix(in srgb, var(--bs-primary, #7367f0) 35%, transparent); }
.mtg-loc-ic { flex: none; width: 36px; height: 36px; border-radius: .357rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--bs-light-primary, #e9e7fd); color: var(--bs-primary, #7367f0); }
.mtg-loc-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mtg-loc-t { font-weight: 600; color: var(--bs-primary, #7367f0); }
.mtg-loc-s { font-size: .8rem; color: #82868b; font-variant-numeric: tabular-nums; }
.mtg-loc-go { margin-left: .35rem; font-size: .8rem; color: #b9b9c3; transition: color .15s, transform .15s; }
a.mtg-loc:hover .mtg-loc-go, a.mtg-loc:focus-visible .mtg-loc-go { color: var(--bs-primary, #7367f0); transform: translate(1px, -1px); }
.mtg-loc.is-off .mtg-loc-ic { background: #f1f1f2; color: #a5a3ae; }
.mtg-loc.is-off .mtg-loc-t { color: #6f6b7d; font-weight: 500; }
html.dark-layout .mtg-loc { border-color: #434968; }
html.dark-layout .mtg-loc-ic { background: rgba(115, 103, 240, .18); background: color-mix(in srgb, var(--bs-primary, #7367f0) 18%, transparent); }
html.dark-layout .mtg-loc-s, html.dark-layout .mtg-loc-go { color: #7a7f9c; }
html.dark-layout .mtg-loc.is-off .mtg-loc-ic { background: rgba(130, 134, 139, .18); color: #b4b7bd; }
html.dark-layout .mtg-loc.is-off .mtg-loc-t { color: #d0d2d6; }

/* -- 10.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — PpMeetings takvimi "Tümü | Planlanan" KAPSAM SEGMENTİ.
   Bootstrap'in `btn-group btn-outline-primary`'si çerçeveli/ağır duruyordu; bu yumuşak (iOS tarzı) segment
   Lead Merkezi'ndeki `.lw-seg` ile AYNI görsel dil: kapsayıcı soluk zemin, aktif öğe BEYAZ kart + gölge.
   🔴 `.lw-seg` DOĞRUDAN KULLANILAMAZ: onun token'ları (--primary/--radius-input/--font-sans) `.lw-wrap`ta
      tanımlı, PpMeetings ise onun dışında → renkler çözülmez (takvim noktasında yaşanan hatanın aynısı).
      Bu yüzden global `--bs-primary` + sabit değerlerle YENİDEN yazıldı. */
/* Olcu iki kez ayarlandi: 31px (iri) -> 25px (kullanici: cok kucuk) -> 32px. Yanindaki badge'lerden
   BILEREK bir tik buyuk: bu bir BILGI rozeti degil, listeyi yoneten bir MOD ANAHTARI. */
#ActivityScope { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #F2F2F4; }
#ActivityScope button { border: 0; background: transparent; border-radius: 6px; padding: .32rem .9rem; font-size: .83rem; font-weight: 600; line-height: 1.35; color: #6E6B7B; cursor: pointer; white-space: nowrap; transition: color .15s ease, background .15s ease; }
#ActivityScope button:hover { color: var(--bs-primary, #7367F0); }
#ActivityScope button.active { background: #FFF; color: var(--bs-primary, #7367F0); box-shadow: 0 1px 3px rgba(75, 70, 92, .16); }
html.dark-layout #ActivityScope { background: #363B52; }
html.dark-layout #ActivityScope button { color: #B4B7BD; }
html.dark-layout #ActivityScope button.active { background: #283046; color: var(--bs-primary, #7367F0); }

/* -- 10.09.2026 ek&claude-Opus-5 (kullanıcı isteği, BEŞİNCİ TUR: "varsayılan yap butonu hâlâ hoşuma gitmedi,
   şu UI'a bir güzellik yap") — TAKİP ARAMALARI listesi (PpFollowup/Index).
   Teşhis: sorun düğmenin TONU değil AĞIRLIĞIydı. Her satırda çerçeveli bir kutu vardı → altı satırda altı
   kutu, gri bir duvar; üstelik ekleyen/tarih sağda ayrı bir sütun olduğu için satır iki başlı duruyordu.
   Çözüm üç adımda:
     1) satır tek sütun: isim + rozet üstte, "ekleyen · tarih" altında sessiz meta satırı,
     2) düğme HAYALET: normalde çerçevesiz/zeminsiz soluk yıldız + metin; satırın ya da düğmenin üzerine
        gelince yumuşak primary zemin belirir → sakin liste, ama etiket duruyor (tooltip'e mahkûm değil),
     3) varsayılan satır: soldan 3px primary şerit + dolgu yıldızlı açık-primary çip → listedeki TEK renkli nokta.
   🔴 Tema kuralları (zebra #f9f9f9, sarı hover #fff7ca) AYNEN kalır; buradaki hiçbir kural onları ezmez —
      şerit ::before ile çizildiği için hover zemini değiştiğinde de yerinde durur.
   🔴 Önek `.fupl-` (LİSTE), `.fup-` DEĞİL: `.fup-row`/`.fup-head` YUKARIDA (satır ~2413) Takip Planı
      FORMUNUN grid'i olarak zaten tanımlı (`display:grid` + 6 kolon). İlk yazımda `.fup-row` kullanıldı ve
      liste satırı sessizce o grid'e düştü → isim sütunu min-content'e çöküp metin HARF HARF alt alta yazıldı.
      Yalnız ekran görüntüsü gösterdi; hiçbir sayısal ölçüm bunu bağırmıyordu. */
.fupl-help { padding: .6rem 1rem .35rem; font-size: .78rem; line-height: 1.45; color: #a5a3ae; }
.fupl-help i { margin-right: .35rem; opacity: .8; }
.pplist .pplist-item.fupl-row { position: relative; overflow: hidden; padding-top: .75rem; padding-bottom: .75rem; }
.pplist .pplist-item.fupl-row.is-default::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bs-primary, #7367F0); }
.fupl-row .fupl-main { flex: 1 1 auto; min-width: 0; }
.fupl-row .fupl-name { font-size: .95rem; font-weight: 500; line-height: 1.4; color: #5d596c; word-break: break-word; }
.fupl-row .fupl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-top: .1rem; font-size: .75rem; line-height: 1.4; color: #a5a3ae; }
.fupl-row .fupl-sep { opacity: .55; margin: 0 .4rem; }
/* Hayalet düğme: yalnız ikon+metin. Çerçeve/zemin YOK — "tıklanabilir mi" sorusunu hover cevaplıyor. */
.fup-default { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border: 0; border-radius: 50rem; background: transparent; color: #a5a3ae; font-family: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.35; white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.fup-default .fup-def-ico { font-size: .875rem; }
.pplist-item:hover .fup-default:not(.on) { color: #6E6B7B; }
/* 🔴 Düğme hover'ı SATIR hover'ından daha spesifik yazılmalı: `.pplist-item:hover .fup-default` (0,4,0)
   yalnız `.fup-default:hover` (0,3,0) kuralını ezip düğmeyi sarı satırda gri bırakıyordu (önizlemede görüldü).
   Zemin `--primary-hover` yerine sabit rgba: o token sarı satırda neredeyse beyaz kalıyor. */
.fup-default:not(.on):hover, .fup-default:not(.on):focus-visible,
.pplist-item:hover .fup-default:not(.on):hover { background: rgba(115, 103, 240, .12); color: var(--bs-primary, #7367F0); }
.fup-default.on { background: rgba(115, 103, 240, .12); color: var(--bs-primary, #7367F0); font-weight: 600; }
.fup-default:disabled { opacity: .5; cursor: default; }
html.dark-layout .fupl-help { color: #9a9ba3; }
html.dark-layout .fupl-row .fupl-name { color: #d0d2d6; }
html.dark-layout .fupl-row .fupl-meta { color: #9a9ba3; }
html.dark-layout .fup-default { color: #9a9ba3; }
html.dark-layout .pplist-item:hover .fup-default:not(.on) { color: #b4b7bd; }
html.dark-layout .fup-default.on { background: rgba(115, 103, 240, .18); }

/* ============================================================================
   -- 21.09.2026 ek&claude-Opus-5 — Meta Conversions API for CRM: "Dönüşüm Gönderimi" (dg-*)
   Tasarım paketi: ai/PlanPorts Design System CAPİ/…/donusum-gonderimi/donusum.css
   Plan: ai/conversion-api/phase-06-ui-admin.md

   🔴 TOKEN KAPSAMI: tüm değişkenler .rk-wrap'e scope'ludur → dg-* kullanan her kök
      element AYRICA .rk-wrap taşımalıdır (view'larda "rk-wrap dg-wrap" olarak yazılır).
      Taşımazsa renkler/gölgeler sessizce boşa düşer.
   🔴 DARK: tasarım paketi [data-theme="dark"] kullanıyordu; bu projede konvansiyon
      .dark-layout / .dark-style'dır — çeviri burada yapıldı, geri alma.
   🔴 Önek çakışması: site.css TEK ad alanıdır; "dg-" öneki eklemeden önce çakışma
      taranmıştır (0 eşleşme). Yeni bileşende bu öneki tekrar KULLANMA.
   ============================================================================ */

/* Sekme şeridi (Reklam Kanalları artık iki bölümlü) */
.dg-tabwrap { margin-bottom: 0; }
.dg-tabs { margin-bottom: 1.3rem; border-bottom: 1px solid var(--border); display: flex; gap: .3rem; flex-wrap: wrap; }
.dg-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; font-weight: 600; color: var(--fg-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; }
.dg-tabs .nav-link:hover { color: var(--primary); }
.dg-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }

.dg-wrap { width: 100%; }

/* ---------- 1A: bağlı değil (satış yüzü) ---------- */
.dg-pitch { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 2.2rem 2.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.4rem; align-items: center; margin-bottom: 1.2rem; }
.dg-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--label-primary); padding: .32em .7em; border-radius: var(--radius-sm); }
.dg-pitch h2 { font-size: 1.6rem; font-weight: 600; color: var(--fg-heading); margin: .9rem 0 .7rem; line-height: 1.22; }
.dg-pitch p { color: var(--fg-body); font-size: 1rem; margin: 0 0 1.5rem; max-width: 46ch; line-height: 1.55; }
.dg-pitch-cta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.dg-pitch-time { font-size: .85rem; color: var(--fg-muted); }
.dg-pitch-note { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--fg-muted); margin-top: 1rem; line-height: 1.45; }
.dg-pitch-note i { margin-top: .15rem; flex: none; }
.dg-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; align-items: start; }
.dg-flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; position: relative; padding: 0 .35rem; }
.dg-flow-ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--light-primary); color: var(--primary); }
.dg-flow-step.meta .dg-flow-ic { background: var(--light-success); color: var(--success); }
.dg-flow-step .ft { font-weight: 600; color: var(--fg-heading); font-size: .9rem; line-height: 1.25; }
.dg-flow-step .fd { font-size: .76rem; color: var(--fg-muted); line-height: 1.4; }
.dg-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: calc(50% + 36px); right: calc(-50% + 36px); height: 2px; background: var(--border); }
.dg-flow-step.meta::after { display: none; }
.dg-ba { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.7rem; }
.dg-ba > div { border-radius: var(--radius-input); padding: .85rem 1rem; font-size: .84rem; line-height: 1.45; border: 1px solid var(--border); background: var(--bg-app); color: var(--fg-body); }
.dg-ba .l { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.dg-ba .after { border-color: #b8ecd0; background: var(--label-success); }
.dg-ba .after .l { color: var(--success); }
.dg-ba b { color: var(--fg-heading); }

/* ---------- 1B: durum kahramanı ---------- */
.dg-hero { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border-left: 5px solid var(--zap-wait); padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; }
.dg-hero.ok { border-left-color: var(--success); }
.dg-hero.warn { border-left-color: var(--warning); }
.dg-hero.err { border-left-color: var(--danger); }
.dg-hero-top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.dg-hero-ic { width: 58px; height: 58px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; background: var(--label-secondary); color: var(--zap-wait); }
.dg-hero.ok .dg-hero-ic { background: var(--light-success); color: var(--success); }
.dg-hero.warn .dg-hero-ic { background: var(--light-warning); color: var(--warning); }
.dg-hero.err .dg-hero-ic { background: var(--light-danger); color: var(--danger); }
.dg-hero-main { min-width: 0; flex: 1; }
.dg-hero-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.dg-hero-name { font-size: 1.25rem; font-weight: 600; color: var(--fg-heading); line-height: 1.2; }
.dg-hero-sub { font-size: .86rem; color: var(--fg-muted); margin-top: .35rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.dg-hero-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); opacity: .6; }
.dg-hero-sub b { color: var(--fg-body); font-weight: 600; }
.dg-hero-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dg-hero-actions form { margin: 0; }
.dg-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.dg-stat { display: flex; align-items: center; gap: .8rem; }
.dg-stat .si { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-app); color: var(--fg-body); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.dg-stat .sv { font-size: 1.15rem; font-weight: 700; color: var(--fg-heading); line-height: 1.1; }
.dg-stat .sv.ok { color: var(--success); }
.dg-stat .sv.muted { color: var(--fg-muted); font-weight: 600; font-size: 1rem; }
.dg-stat .sl { font-size: .78rem; color: var(--fg-muted); margin-top: .2rem; }

.dg-chip { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; padding: .4em .9em .4em .75em; border-radius: var(--radius-pill); white-space: nowrap; background: var(--label-secondary); color: var(--zap-wait); }
.dg-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dg-chip.ok { background: var(--label-success); color: var(--success); }
.dg-chip.warn { background: var(--label-warning); color: #c47d1c; }
.dg-chip.err { background: var(--label-danger); color: var(--danger); }

/* bildirim şeritleri */
.dg-notice { display: flex; align-items: center; gap: .75rem; border-radius: var(--radius-input); padding: .85rem 1rem; font-size: .9rem; margin-top: 1.1rem; flex-wrap: wrap; line-height: 1.45; }
.dg-notice > i { font-size: 1.1rem; flex: none; }
.dg-notice > span { flex: 1; min-width: 220px; }
.dg-notice.warn { background: var(--label-warning); color: #a96a1c; }
.dg-notice.warn > i { color: var(--warning); }
.dg-notice.err { background: var(--label-danger); color: var(--danger); }
.dg-notice.info { background: var(--label-primary); color: var(--primary); }
.dg-notice.subtle { background: transparent; border: 1px dashed var(--border); color: var(--fg-muted); }
.dg-notice.subtle > i { color: var(--warning); }

/* ---------- genel bölüm kartı ---------- */
.dg-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 1.2rem; overflow: hidden; }
.dg-card-head { display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem 1.5rem 1rem; }
.dg-card-head .hi { width: 40px; height: 40px; border-radius: 10px; background: var(--light-primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; }
.dg-card-head h3 { font-size: 1.1rem; font-weight: 600; color: var(--fg-heading); margin: 0; line-height: 1.3; }
.dg-card-head p { margin: .25rem 0 0; font-size: .88rem; color: var(--fg-muted); max-width: 66ch; line-height: 1.45; }
.dg-card-body { padding: .4rem 1.5rem 1.5rem; }
.dg-cardfoot { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.1rem; }
.dg-cardfoot form { margin: 0; }

/* ---------- tetikleyici aşama ---------- */
.dg-q { font-size: .95rem; font-weight: 600; color: var(--fg-heading); margin: .4rem 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.dg-q .qn { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.dg-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.dg-profile { position: relative; display: flex; gap: 1rem; align-items: flex-start; border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 1.1rem 2.6rem 1.1rem 1.2rem; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; background: var(--surface); }
.dg-profile:hover { border-color: #c9c4f5; }
.dg-profile.on { border-color: var(--primary); background: var(--label-primary); box-shadow: 0 0 0 3px rgba(115, 103, 240, .12); }
.dg-profile .pi { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-app); color: var(--fg-body); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; transition: background .12s, color .12s; }
.dg-profile.on .pi { background: var(--primary); color: #fff; }
.dg-profile.on .pi i::before, .dg-profile.on .pi i::after { color: #fff; }
.dg-profile .pt { font-weight: 600; color: var(--fg-heading); font-size: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dg-profile .pd { font-size: .85rem; color: var(--fg-body); margin-top: .25rem; line-height: 1.45; }
.dg-profile .pr { margin-top: .65rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--fg-muted); flex-wrap: wrap; }
.dg-profile .pr i { color: var(--success); }
.dg-profile .pchk { position: absolute; top: .85rem; right: .85rem; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-input); display: flex; align-items: center; justify-content: center; font-size: .68rem; background: var(--surface); transition: all .12s; }
.dg-profile .pchk i { opacity: 0; }
.dg-profile .pchk i::before, .dg-profile .pchk i::after { color: #fff; }
.dg-profile.on .pchk { background: var(--primary); border-color: var(--primary); }
.dg-profile.on .pchk i { opacity: 1; }
.dg-rec { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--success); background: var(--label-success); padding: .22em .55em; border-radius: var(--radius-sm); letter-spacing: .02em; }

.dg-window { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 1rem 1.3rem; margin-bottom: 1.5rem; }
.dg-window-head { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: var(--fg-body); line-height: 1.45; }
.dg-window-head i { color: var(--primary); margin-top: .15rem; flex: none; }
.dg-window-head b { color: var(--fg-heading); }

.dg-stages { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.dg-stage { display: grid; grid-template-columns: auto 42px minmax(0, 1fr) 250px; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); transition: background .15s; }
.dg-stage:last-child { border-bottom: 0; }
.dg-stage.off, .dg-stage.locked { background: var(--bg-app); }
.dg-stage .si { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--light-primary); color: var(--primary); transition: all .15s; }
.dg-stage.off .si { background: var(--label-secondary); color: var(--secondary); }
.dg-stage .st { font-weight: 600; color: var(--fg-heading); font-size: .98rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.dg-stage .sd { font-size: .83rem; color: var(--fg-muted); margin-top: .2rem; line-height: 1.4; }
.dg-stage.off .st, .dg-stage.off .sd { opacity: .65; }
.dg-stage .sn label { font-size: .68rem; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .3rem; }
.dg-stage .sn .form-control { font-size: .9rem; padding: .45rem .75rem; }
.dg-stage .sn .form-control[readonly] { background: var(--bg-app); cursor: not-allowed; }
.dg-stage.off .sn { opacity: .5; }
.dg-lock { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; color: var(--fg-body); background: var(--label-secondary); padding: .22em .55em; border-radius: var(--radius-sm); cursor: help; }
.dg-stage-warn { display: flex; align-items: flex-start; gap: .4rem; font-size: .78rem; color: #a96a1c; margin-top: .4rem; line-height: 1.4; }
.dg-stage-warn i { margin-top: .12rem; flex: none; color: var(--warning); }

.dg-valid { display: flex; align-items: flex-start; gap: .6rem; background: var(--label-danger); color: var(--danger); border-radius: var(--radius-input); padding: .8rem 1rem; font-size: .87rem; margin-top: 1rem; line-height: 1.45; }
.dg-valid i { margin-top: .1rem; flex: none; }
/* -- 21.09.2026 ek&claude-Opus-5 (kullanıcı geri bildirimi) — KAPSAM SATIRI (kahraman kartta).
   "Birden fazla sayfam varsa?" sorusunun görünür cevabı: tüm sayfalar tek ölçüm hesabına yazar. */
.dg-hero-scope { display: flex; align-items: flex-start; gap: .5rem; margin-top: .6rem; padding: .55rem .8rem;
                 background: var(--bg-app); border-radius: var(--radius-card); font-size: .83rem; color: var(--fg-muted); }
.dg-hero-scope i { color: var(--primary); margin-top: .15rem; flex: none; }
.dg-hero-scope b { color: var(--fg-heading); font-weight: 600; }

/* -- 21.09.2026 ek&claude-Opus-5 (kullanıcı geri bildirimi) — ANA ŞALTER kartı.
   Şalter sayfanın en altındaydı; kapalıyken üstteki tüm ayarlar anlamsız olduğu için en üste alındı.
   Açıkken sol kenarı yeşil, kapalıyken turuncu + uyarı zemini: durum tek bakışta okunur. */
.dg-master { margin-bottom: 1.2rem; border-left: 4px solid var(--success); }
.dg-master .dg-opt { margin-top: 0; border: 0; }
.dg-master.off { border-left-color: var(--warning); background: var(--light-warning); }
.dg-master.off .oi { background: var(--light-warning); color: var(--warning); }

/* Şalter kapalıyken aşama kartı sönükleşir — bağımlılık gözle görünsün.
   🔴 pointer-events AÇIK kalır: müşteri önce kurup sonra açabilmeli (input'lar disable EDİLMEZ,
   disabled input POST edilmez ve kaydedilen ayar sessizce kaybolurdu). */
.dg-muted { opacity: .55; filter: saturate(.6); transition: opacity .15s, filter .15s; }

.dg-opt { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-card); margin-top: 1.1rem; }
.dg-opt .oi { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-app); color: var(--fg-body); display: flex; align-items: center; justify-content: center; flex: none; }
.dg-opt .ot { font-weight: 600; color: var(--fg-heading); font-size: .95rem; }
.dg-opt .od { font-size: .83rem; color: var(--fg-muted); margin-top: .15rem; line-height: 1.4; }
.dg-opt .form-switch { margin-left: auto; }

.dg-footbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: 0 -4px 20px rgba(75, 70, 92, .08); border: 1px solid var(--border); padding: .9rem 1.3rem; margin-top: 1.2rem; z-index: 5; flex-wrap: wrap; }
.dg-footbar .fn { font-size: .86rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: .45rem; }
.dg-footbar .fa { display: flex; gap: .6rem; }

/* ---------- kurulum listesi (4 madde) ---------- */
.dg-laststep { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid #c9c4f5; padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; }
.dg-laststep .li { width: 46px; height: 46px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.dg-laststep .li i::before, .dg-laststep .li i::after { color: #fff; }
.dg-laststep h4 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--fg-heading); }
.dg-laststep p { margin: .3rem 0 0; font-size: .88rem; color: var(--fg-body); max-width: 72ch; line-height: 1.45; }
.dg-laststep .la { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 190px; }
.dg-laststep .la form { margin: 0; }
.dg-setup { display: grid; gap: .5rem; margin-top: .95rem; }
.dg-setup-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; background: var(--bg-app); border-radius: var(--radius-input); padding: .7rem .85rem; }
.dg-setup-row .n { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.dg-setup-row .st { font-size: .88rem; font-weight: 600; color: var(--fg-heading); line-height: 1.35; }
.dg-setup-row .sd { font-size: .8rem; color: var(--fg-muted); margin-top: .12rem; line-height: 1.4; }
.dg-setup-row .who { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); background: var(--label-secondary); padding: .22em .55em; border-radius: var(--radius-sm); white-space: nowrap; }
.dg-setup-row .who.pp { color: var(--primary); background: var(--label-primary); }
.dg-setup-row .stt { font-size: .75rem; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.dg-setup-row.done .stt { color: var(--success); }
.dg-setup-row.pending .stt { color: #a96a1c; }
.dg-setup-row.early { opacity: .6; }
.dg-setup-row .stt.checking { font-style: italic; opacity: .7; }

/* ---------- kaynak seçimi + Events Manager rehberi ---------- */
/* -- 21.09.2026 ek&claude-Opus-5 (kullanıcı isteği) — ölçüm hesabı seçimi radyo listesi → select2.
   Kapsayıcı artık bir <select> taşıyor: kendi çerçevesi select2'ninkiyle ÇİFT ÇERÇEVE yapıyordu,
   kaldırıldı. Aşağıdaki .dg-acct kuralları (an/ad/disabled) KORUNUYOR — select2 açılır satırları
   .dg-acct-opt ile aynı görsel dili sürdürüyor (CapiConversions.js templateResult). */
.dg-acctlist { border: 0; border-radius: 0; overflow: visible; }

/* select2 açılır listesindeki ve seçili gösterimdeki satır */
.dg-acct-opt { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dg-acct-opt .an { font-weight: 600; color: var(--fg-heading); font-size: .95rem; }
.dg-acct-opt .ad { font-size: .8rem; color: var(--fg-muted); flex-basis: 100%; }
/* seçili kutuda ipucu satırı yer kaplamasın */
.select2-selection__rendered .dg-acct-opt .ad { display: none; }
.dg-acct { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; transition: background .12s; flex-wrap: wrap; }
.dg-acct:last-child { border-bottom: 0; }
.dg-acct:hover { background: var(--bg-hover); }
.dg-acct.disabled { cursor: not-allowed; background: var(--bg-app); opacity: .7; }
.dg-acct .an { font-weight: 600; color: var(--fg-heading); font-size: .95rem; }
.dg-acct .ad { font-size: .8rem; color: var(--fg-muted); flex-basis: 100%; }
.dg-guide { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.1rem 1.3rem; margin-top: 1.2rem; }
.dg-guide h5 { font-size: .95rem; font-weight: 600; color: var(--fg-heading); margin: 0 0 .6rem; display: flex; align-items: center; gap: .45rem; }
.dg-guide ol { margin: 0; padding-left: 1.2rem; }
.dg-guide li { font-size: .86rem; color: var(--fg-body); line-height: 1.5; margin-bottom: .3rem; }
.dg-empty-sm { display: flex; align-items: center; gap: .7rem; color: var(--fg-muted); font-size: .9rem; padding: 1.2rem; justify-content: center; }
.dg-empty-sm i { font-size: 1.4rem; }

/* ---------- admin: olay türü çipleri + aşama rozetleri ---------- */
.dg-ev { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .25em .6em; border-radius: var(--radius-sm); white-space: nowrap; background: var(--label-secondary); color: var(--fg-body); }
.dg-ev.lead { background: var(--label-primary); color: var(--primary); }
.dg-ev.created { background: var(--label-info, rgba(0, 207, 232, .12)); color: var(--info); }
.dg-ev.won { background: var(--label-success); color: var(--success); }
.dg-ev.lost { background: var(--label-danger); color: var(--danger); }
.dg-sc { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: .68rem; font-weight: 700; background: var(--label-primary); color: var(--primary); }
.dg-sc.lock { background: var(--label-secondary); color: var(--fg-body); }
.dg-sc.off { background: transparent; border: 1px dashed var(--border); color: var(--fg-muted); }
.dg-stagechips { display: inline-flex; gap: .25rem; }
.dg-tenant { color: var(--fg-muted); font-size: .8rem; }
.dg-nopii { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--success); background: var(--label-success); padding: .22em .6em; border-radius: var(--radius-sm); }
.dg-meta-resp { font-family: var(--bs-font-monospace, monospace); font-size: .8rem; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-input); padding: .6rem .8rem; margin-top: .5rem; white-space: pre-wrap; word-break: break-all; color: var(--fg-body); }
.dg-meta-resp .k { color: var(--fg-muted); }
.dg-copy { border: 0; background: var(--label-primary); color: var(--primary); font-size: .72rem; font-weight: 600; border-radius: var(--radius-sm); padding: .15em .5em; margin-left: .4rem; cursor: pointer; }
.dg-filter-checks { display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.dg-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--fg-body); cursor: pointer; margin: 0; }
.dg-unknown { color: var(--fg-muted); font-style: italic; font-size: .8rem; }

/* zap-chip'in bu modülde gereken iki yeni varyantı (mevcut ok/err/wait'e ek) */
.zap-chip.warn { background: var(--label-warning); color: #c47d1c; }
.zap-chip.dead { background: var(--zap-err-bg); color: var(--zap-err); opacity: .75; }

/* ---------- dark ---------- */
.dark-layout .dg-ba .after, .dark-style .dg-ba .after { border-color: #2f5c45; }
.dark-layout .dg-chip.warn, .dark-style .dg-chip.warn { color: #e0b072; }
.dark-layout .dg-notice.warn, .dark-style .dg-notice.warn { color: #e0b072; }
.dark-layout .dg-stage-warn, .dark-style .dg-stage-warn { color: #e0b072; }
.dark-layout .dg-setup-row.pending .stt, .dark-style .dg-setup-row.pending .stt { color: #e0b072; }
.dark-layout .dg-profile:hover, .dark-style .dg-profile:hover { border-color: #4d4680; }
.dark-layout .dg-laststep, .dark-style .dg-laststep { border-color: #4d4680; }
.dark-layout .zap-chip.warn, .dark-style .zap-chip.warn { color: #e0b072; }

/* ---------- dar ekran ---------- */
@media (max-width: 991.98px) {
    .dg-pitch { grid-template-columns: 1fr; padding: 1.5rem 1.3rem; gap: 1.6rem; }
    .dg-profiles { grid-template-columns: 1fr; }
    .dg-stage { grid-template-columns: auto 42px minmax(0, 1fr); }
    .dg-stage .sn { grid-column: 1 / -1; }
    .dg-laststep { grid-template-columns: auto minmax(0, 1fr); }
    .dg-laststep .la { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .dg-hero-stats { grid-template-columns: 1fr; }
    .dg-setup-row { grid-template-columns: 22px minmax(0, 1fr); }
    .dg-setup-row .who, .dg-setup-row .stt { grid-column: 2; justify-self: start; }
}
@media (max-width: 575.98px) {
    .dg-flow { grid-template-columns: 1fr 1fr; gap: 1rem .2rem; }
    .dg-flow-step:not(:last-child)::after { display: none; }
    .dg-ba { grid-template-columns: 1fr; }
}

/* -- 21.09.2026 ek&claude-Opus-5 — Reklam Kanallari > Formlar: form/sayfa bazli Conversions API
   gonderim anahtarlari. Stok Bootstrap .form-check.form-switch uzerine YALNIZ hizalama + solgunluk. */
.rk-capi-sw { display: flex; align-items: center; gap: .45rem; margin-bottom: 0; padding-left: 2.4rem; }
.rk-capi-sw .form-check-input { margin-top: 0; cursor: pointer; }
.rk-capi-sw .form-check-label { margin-bottom: 0; color: var(--fg-muted); cursor: pointer; }
/* Sayfa anahtari kapaliyken form anahtarlari ETKISIZDIR: solgun gosterilir ama tiklanabilir kalir
   (kullanici sayfayi geri actiginda gecerli olacak ayari simdiden duzenleyebilsin). */
.rk-capi-sw.rk-capi-muted { opacity: .45; }

/* ============================================================================
   -- 21.09.2026 ek&claude-Opus-5 — Meta Lead Ads "Geçmişe Dönük Çekme" sihirbazı
   Tasarım: ai/Backfill-Sihirbazi/design/backfill.css
   🔴 TAMAMI .bf-page ALTINA KAPSANDI. Tasarım dosyası .bs-stepper / .form-check-input /
      .btn-outline-secondary / .flatpickr-* gibi GLOBAL sınıfları yeniden boyuyordu; site.css tek ad
      alanı olduğu için bunlar ImportCards sihirbazını ve tüm formları etkilerdi.
   🔴 flatpickr stilleri ALINMADI — uygulamada gerçek flatpickr CSS'i yüklü (lib/flatpickr).
   🔴 bs-stepper temel stilleri ALINMADI — lib/wizard/css/bs-stepper.min.css zaten var (ImportCards emsali).
   🔴 Koyu tema: tasarımdaki [data-theme="dark"] palet bloğu ALINMADI (site.css'te dark-layout token'ları
      zaten tanımlı); yalnız .bf-* özel düzeltmeleri html.dark-layout altına yazıldı.
   ============================================================================ */

.bf-page { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.bf-page > .card, .bf-page .bs-stepper { overflow: visible; }

.bf-page .bf-content-header { margin-bottom: 1.25rem; }
.bf-page .bf-content-header h5 { margin: 0 0 .15rem; font-weight: 600; }
.bf-page .bf-content-header small { color: var(--fg-muted); }

/* ---- Bağlam şeridi: hangi sayfa için ---- */
.bf-page .bf-context { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-input); margin-bottom:1.35rem; background:var(--bg-striped); flex-wrap:wrap; }
.bf-page .bf-brand { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:1rem; }
/* Facebook marka mavisi — yalnız logo dairesinde (tasarımın tek sabit hex istisnası) */
.bf-page .bf-brand.fb { background:#1877f2; }
.bf-page .bf-brand.ig { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.bf-page .bf-ctx-main { flex:1; min-width:0; }
.bf-page .bf-ctx-title { font-weight:600; color:var(--fg-heading); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-page .bf-ctx-sub { font-size:.8rem; color:var(--fg-muted); display:flex; gap:.75rem; flex-wrap:wrap; }
.bf-page .bf-ctx-sub b { color:var(--fg-body); font-weight:500; }
.bf-page .bf-context .badge { flex:none; }

/* ---- Adım 1 — tarih aralığı ---- */
.bf-page .bf-range-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; max-width:640px; }
.bf-page .bf-field .form-label { font-weight:500; }
.bf-page .bf-field .form-label .hint { color:var(--fg-muted); font-weight:400; }
.bf-page .bf-field .input-group-text { color:var(--primary); }
.bf-page .bf-quick { display:flex; align-items:center; gap:.5rem; margin-top:1.1rem; flex-wrap:wrap; }
.bf-page .bf-quick .lbl { font-size:.857rem; color:var(--fg-muted); margin-right:.15rem; }
.bf-page .bf-quick .btn { padding:.38rem .9rem; font-size:.857rem; border-radius:var(--radius-pill); }
.bf-page .bf-quick .btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.bf-page .bf-range-summary { display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.9rem; color:var(--fg-body); }
.bf-page .bf-range-summary i { color:var(--primary); }
.bf-page .bf-range-summary.is-err span { color:var(--danger); }
.bf-page .alert.bf-note { margin-top:1.35rem; max-width:640px; align-items:center; }
.bf-page .alert.bf-note i { font-size:1.05rem; flex:none; }

/* ---- Adım 2 — sayaç şeridi ---- */
.bf-page .bf-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.15rem; }
.bf-page .bf-stat { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-input); background:var(--bg-surface); }
.bf-page .bf-stat .ic { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.bf-page .bf-stat .num { font-size:1.45rem; font-weight:700; color:var(--fg-heading); line-height:1.1; }
.bf-page .bf-stat .lbl { font-size:.8rem; color:var(--fg-muted); margin-top:.1rem; }
.bf-page .bf-stat.total .ic { background:var(--light-primary); color:var(--primary); }
.bf-page .bf-stat.new .ic { background:var(--light-success); color:var(--success); }
.bf-page .bf-stat.dup .ic { background:var(--light-secondary); color:var(--secondary); }
.bf-page .bf-stat.forms .ic { background:var(--light-info); color:var(--info); }
.bf-page .bf-stats.is-skel .num { color:transparent; background:var(--light); border-radius:4px; width:3ch; }

/* ---- araç şeridi ---- */
.bf-page .bf-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; flex-wrap:wrap; }
.bf-page .bf-sel { font-size:.9rem; color:var(--fg-body); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.bf-page .bf-sel b { color:var(--fg-heading); font-weight:600; }
.bf-page .bf-sel .btn-link { border:0; background:none; color:var(--primary); font-size:.857rem; cursor:pointer; padding:0 .15rem; }
.bf-page .bf-sel .btn-link:hover { text-decoration:underline; }
.bf-page .bf-range-chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.857rem; color:var(--fg-body); background:var(--bg-striped); border:1px solid var(--border); border-radius:var(--radius-pill); padding:.3rem .8rem; }
.bf-page .bf-range-chip i { color:var(--primary); }
.bf-page .alert.bf-limit { margin-bottom:.9rem; align-items:center; display:flex; gap:.6rem; }
.bf-page .alert.bf-limit i { font-size:1.05rem; flex:none; }
.bf-page .alert.bf-limit .btn { margin-left:auto; flex:none; }

/* ---- Tablo (yoğun) ---- */
.bf-page .bf-table-wrap { border:1px solid var(--border); border-radius:var(--radius-input); overflow:auto; max-height:560px; position:relative; }
.bf-page .bf-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; min-width:900px; }
.bf-page .bf-table th { position:sticky; top:0; z-index:2; background:var(--bg-striped); text-align:left; padding:.6rem .85rem; color:var(--fg-heading); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; }
.bf-page .bf-table td { padding:.5rem .85rem; border-bottom:1px solid var(--border); color:var(--fg-body); white-space:nowrap; vertical-align:middle; }
.bf-page .bf-table tbody tr:last-child td { border-bottom:0; }
.bf-page .bf-table tbody tr:hover td { background:var(--bg-hover); }
.bf-page .bf-table .col-check { width:40px; padding-right:.25rem; }
.bf-page .bf-table .col-mono { font-variant-numeric:tabular-nums; }
.bf-page .bf-table .col-mono .t { color:var(--fg-muted); margin-left:.3rem; font-size:.8rem; }
.bf-page .bf-table .col-name { font-weight:600; color:var(--fg-heading); }
.bf-page .bf-table .col-empty { color:var(--fg-muted); font-style:italic; }
.bf-page .bf-table .col-status { text-align:right; }
.bf-page .bf-table tr.is-dup td { opacity:.55; }
.bf-page .bf-table tr.is-dup td.col-check, .bf-page .bf-table tr.is-dup td.col-status { opacity:1; }
.bf-page .bf-table tr.is-selected td { background:rgba(115,103,240,.06); }
.bf-page .badge.bf-badge { font-size:.72rem; padding:.38em .6em; }

/* ---- Yükleniyor / boş / hata ---- */
.bf-page .bf-state { display:none; }
.bf-page .bf-state.active { display:block; }
.bf-page .bf-loading { padding:.5rem 0 0; }
.bf-page .bf-loading-head { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:1.6rem 1rem 1.25rem; color:var(--fg-body); font-size:.95rem; flex-wrap:wrap; }
.bf-page .bf-loading-head b { color:var(--fg-heading); font-weight:600; }
.bf-page .bf-loading-head small { display:block; color:var(--fg-muted); font-size:.8rem; margin-top:.15rem; }
.bf-page .bf-spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--light-primary); border-top-color:var(--primary); animation:bf-spin .8s linear infinite; flex:none; }
@keyframes bf-spin { to { transform:rotate(360deg); } }
.bf-page .bf-skel-row { display:grid; grid-template-columns:40px 1.4fr 1.3fr 1.2fr 1.6fr 1.4fr 1.4fr .8fr; gap:.85rem; align-items:center; padding:.62rem .85rem; border-top:1px solid var(--border); }
.bf-page .bf-skel-row span { height:12px; border-radius:6px; background:linear-gradient(90deg,var(--light) 25%,var(--border) 50%,var(--light) 75%); background-size:200% 100%; animation:bf-shimmer 1.4s ease-in-out infinite; }
@keyframes bf-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.bf-page .bf-empty { text-align:center; padding:3rem 1rem 2.5rem; }
.bf-page .bf-empty .ic { width:72px; height:72px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:1.8rem; background:var(--light-secondary); color:var(--secondary); }
.bf-page .bf-empty.is-error .ic { background:var(--light-danger); color:var(--danger); }
.bf-page .bf-empty h5 { font-weight:600; margin-bottom:.35rem; }
.bf-page .bf-empty p { color:var(--fg-muted); font-size:.9rem; margin:0 auto 1.25rem; max-width:460px; }
.bf-page .bf-err-code { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--danger); background:var(--light-danger); border-radius:var(--radius-input); padding:.25rem .6rem; margin-bottom:1.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.bf-page .bf-empty .actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* ---- Adım 3 — sonuç ---- */
.bf-page .bf-result { text-align:center; padding:1rem 0 .5rem; }
.bf-page .bf-result-ic { width:64px; height:64px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:1.7rem; background:var(--light-success); color:var(--success); }
.bf-page .bf-result-ic.is-warn { background:var(--light-warning); color:var(--warning); }
.bf-page .bf-result h4 { font-weight:600; margin-bottom:.25rem; }
.bf-page .bf-result > p { color:var(--fg-muted); margin:0 0 1.75rem; }
.bf-page .bf-result-nums { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.bf-page .bf-result-num { min-width:180px; padding:1.1rem 1.25rem; border:1px solid var(--border); border-radius:var(--radius-input); background:var(--bg-surface); }
.bf-page .bf-result-num .n { font-size:2.4rem; font-weight:700; line-height:1; }
.bf-page .bf-result-num .l { font-size:.85rem; color:var(--fg-muted); margin-top:.35rem; display:flex; align-items:center; justify-content:center; gap:.35rem; }
.bf-page .bf-result-num.added .n { color:var(--success); }
.bf-page .bf-result-num.dup .n { color:var(--secondary); }
.bf-page .bf-result-num.err .n { color:var(--danger); }
.bf-page .bf-result-num.err { border-color:rgba(234,84,85,.35); }
.bf-page .bf-result-note { display:inline-flex; align-items:center; gap:.5rem; color:var(--fg-body); font-size:.9rem; background:var(--bg-striped); border:1px solid var(--border); border-radius:var(--radius-pill); padding:.45rem 1rem; margin-bottom:1.5rem; }
.bf-page .bf-result-note i { color:var(--primary); }
/* -- 22.09.2026 ek&claude-Opus-5 — aktarim hatasinin teknik sebebi (PpAdmin ekrani). */
.bf-page .bf-result-note.is-err { color:var(--danger); border-color:var(--danger); background:rgba(234,84,85,.08); max-width:100%; text-align:left; }
.bf-page .bf-result-note.is-err i { color:var(--danger); }
.bf-page .bf-result-note.is-err span { word-break:break-word; }
.bf-page .bf-result .actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* ---- Adım alt çubuğu ---- */
.bf-page .bf-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.5rem; margin-top:1.5rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.bf-page .bf-footer .left, .bf-page .bf-footer .right { display:flex; align-items:center; gap:.6rem; }
.bf-page .bf-footer .right { margin-left:auto; }
.bf-page .bf-footer .hint { font-size:.857rem; color:var(--fg-muted); }
.bf-page .btn .bf-count { background:rgba(255,255,255,.25); border-radius:var(--radius-pill); padding:.1rem .5rem; font-size:.78rem; font-weight:600; }

/* ---- Mobil ---- */
@media (max-width:820px){ .bf-page .bf-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bf-page .bf-range-grid { grid-template-columns:1fr; } }
@media (max-width:760px){ .bf-page .bf-result-num { min-width:0; flex:1 1 140px; } }

/* ---- Koyu tema (yalnız .bf-* düzeltmeleri; palet site.css'te zaten tanımlı) ---- */
html.dark-layout .bf-page .bf-table tr.is-selected td { background:rgba(115,103,240,.12); }
html.dark-layout .bf-page .bf-skel-row span { background:linear-gradient(90deg,#2f3750 25%,#3b4253 50%,#2f3750 75%); background-size:200% 100%; }
html.dark-layout .bf-page .bf-spinner { border-color:#3b4253; border-top-color:var(--primary); }

/* -- 22.09.2026 ek&claude-Opus-5 - Donusum Gonderimi: coklu Business portfoyu secimi.
   Musterinin olcum hesabini HANGI portfoyde olusturacagini secmesi icin; tek portfoyde cizilmez. */
.dg-bizlist { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dg-bizlist-hd { width: 100%; font-size: .857rem; color: var(--fg-muted); margin-bottom: .15rem; }

/* -- 23.09.2026 cck&claude-Opus-5.5 (K51, Can'ın tasarımı) — Saha etkinliği formu KAPASİTE ŞERİDİ
   (Views/PpFieldEvents/_EventForm.cshtml). Formül gibi: [randevu/doktor/gün] × [doktor] × [gün] = [TOPLAM].
   Renkler proje değişkenlerinden (--bs-primary, --bs-light-primary); değişkeni olmayanlar Vuexy'nin kendi tonları.
   Sağ bölümün mor zemini ve beyaz yazısı Bootstrap sınıfları (bg-primary text-white) ile. */
.pp-capacity { display:flex; border:1px solid var(--bs-light-primary, #e9e7fd); border-radius:.428rem; overflow:hidden; }
.pp-capacity-formula { flex:1; display:flex; align-items:center; justify-content:space-evenly; gap:.75rem; padding:1rem 1.25rem; background:#f8f7ff; }
.pp-capacity-term { display:flex; flex-direction:column; align-items:center; text-align:center; }
.pp-capacity-num { font-size:26px; font-weight:700; line-height:1.1; color:#5e5873; font-variant-numeric:tabular-nums; }
.pp-capacity-lbl { font-size:12px; color:#6e6b7b; }
.pp-capacity-op { font-size:20px; font-weight:300; color:#b9b9c3; }
.pp-capacity-total { min-width:190px; display:flex; flex-direction:column; justify-content:center; padding:.875rem 1.75rem; }
.pp-capacity-total-lbl { letter-spacing:.06em; opacity:.9; }
.pp-capacity-total-num { font-size:34px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.pp-capacity-total-unit { font-size:15px; font-weight:500; }
.pp-capacity-help { font-size:13px; }
html.dark-layout .pp-capacity { border-color:#3b4253; }
html.dark-layout .pp-capacity-formula { background:rgba(115,103,240,.08); }
html.dark-layout .pp-capacity-num { color:#d0d2d6; }
html.dark-layout .pp-capacity-lbl { color:#b4b7bd; }
@media (max-width:767.98px) {
    .pp-capacity { flex-direction:column; }
    .pp-capacity-total { min-width:0; }
}

/* -- 25.09.2026 ek&claude-Fable-5.1 — CAPI OutboxList (admin debug tablosu).
   .dg-table* = tasarım kitinin tablosu (ai/…/design/ui_kits/donusum-gonderimi/donusum.css §dg-table) site.css'e taşındı;
   🔴 .rk-wrap token'larını kullanır (--surface/--border/--bg-hover/--bg-striped/--zap-wait…) → sarmalayıcı şart.
   .cqo-* = bu ekrana özel ekler (site.css tek ad alanı; önek çakışmıyor).
   Kovalar: temanın nav-pills'i + paylaşımlı .nav-filter; sayaç rozeti aktif (mor) pill'de beyaza döner. */
.cqo-facets .nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; }
.cqo-facets .nav-link .badge { background: rgba(115, 103, 240, .12); color: var(--bs-primary, #7367f0); font-weight: 600; }
.cqo-facets .nav-link.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }
.cqo-facets .nav-link .remove-filter { float: none !important; margin-left: .25rem; }

.dg-table-wrap { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: auto; }
.dg-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0; }
.dg-table th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-striped); white-space: nowrap; }
.dg-table th a { color: inherit; text-decoration: none; }
.dg-table th a:hover, .dg-table th a.active { color: var(--primary); }
.dg-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--fg-body); white-space: nowrap; line-height: 1.35; }
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-table tbody tr { transition: background .12s; cursor: pointer; }
.dg-table tbody tr:hover td { background: var(--bg-hover); }
.dg-table tbody tr.cqo-empty { cursor: default; }
.dg-table td:first-child { border-left: 4px solid transparent; padding-left: .85rem; }
.dg-table tr.ok td:first-child { border-left-color: var(--success); }
.dg-table tr.warn td:first-child { border-left-color: var(--warning); }
.dg-table tr.err td:first-child { border-left-color: var(--danger); }
.dg-table tr.wait td:first-child { border-left-color: var(--zap-wait); }
.dg-table tr.dead td:first-child { border-left-color: var(--secondary); }
.dg-tenant { font-weight: 600; color: var(--fg-heading); white-space: nowrap; display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dg-tenant small { display: block; font-size: .76rem; color: var(--fg-muted); font-weight: 400; margin-top: .1rem; }
.dg-last { white-space: nowrap; color: var(--fg-heading); font-variant-numeric: tabular-nums; }
.dg-last small { display: block; font-size: .74rem; color: var(--fg-muted); }
.dg-tdact { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.dg-table .pp-ctx { border: 0; background: transparent; color: var(--fg-muted); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dg-table .pp-ctx:hover, .dg-table .pp-ctx.show { background: var(--light-primary); color: var(--primary); }

.cqo-id { font-weight: 700; color: var(--fg-heading); font-variant-numeric: tabular-nums; }
.cqo-num { color: var(--fg-heading); font-variant-numeric: tabular-nums; }
.cqo-mono { font-family: var(--bs-font-monospace, monospace); font-size: .82rem; color: var(--fg-body); }
.cqo-mute { color: #b9b9c3; }
.cqo-ev small { display: block; font-size: .72rem; color: var(--fg-muted); margin-top: .25rem; font-family: var(--bs-font-monospace, monospace); }
.cqo-amt b { color: var(--fg-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.cqo-amt small { color: var(--fg-muted); margin-left: .3rem; font-size: .76rem; font-weight: 600; }
.cqo-retry { display: inline-flex; align-items: center; gap: .45rem; }
.cqo-retry .rc { font-weight: 700; color: var(--fg-heading); font-variant-numeric: tabular-nums; }
.cqo-retry .nx { font-size: .74rem; color: #c47d1c; white-space: nowrap; }
.cqo-meta { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--bs-font-monospace, monospace); font-size: .78rem; color: var(--fg-muted); }
.cqo-meta .n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 .45em; border-radius: 6px; font-weight: 700; }
.cqo-meta .n.ok { background: var(--label-success); color: var(--success); }
.cqo-meta .n.zero { background: var(--label-warning); color: #c47d1c; }
.cqo-err { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--danger); font-size: .82rem; }
.cqo-err b { font-weight: 600; }
.dark-layout .cqo-mute, .dark-style .cqo-mute { color: #676d7d; }
.dark-layout .cqo-retry .nx, .dark-style .cqo-retry .nx { color: #e0b072; }
.dark-layout .cqo-meta .n.zero, .dark-style .cqo-meta .n.zero { color: #e0b072; }

/* -- 25.09.2026 ek&claude-Fable-5.1 — OutboxDetails zenginleştirme (cqo-*: kuyruk no rozeti, hızlı bağlantılar, kod çipleri, JSON, kv çipleri) */
.cqo-hid { font-size: .78rem; font-weight: 700; color: var(--fg-muted); background: var(--label-secondary); border-radius: var(--radius-sm); padding: .2em .55em; white-space: nowrap; }
.cqo-links { margin-top: .55rem; gap: 1rem !important; }
.cqo-links a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--primary); font-size: .84rem; }
.cqo-links a:hover { text-decoration: underline; }
.cqo-code { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; background: rgba(0, 0, 0, .07); border-radius: 4px; padding: .1em .45em; margin-right: .3rem; }
.cqo-hint { margin-top: .7rem; font-size: .76rem; color: var(--fg-muted); line-height: 1.6; }
.cqo-hint code { font-size: .72rem; color: var(--fg-body); background: var(--bg-app); border-radius: 3px; padding: 0 .3em; }
.cqo-json { max-height: 440px; overflow: auto; margin: 0; white-space: pre; }
.cqo-tlmeta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; font-size: .8rem; color: var(--fg-muted); }
.cqo-tlmeta i { margin-right: .2rem; }
.cqo-kvchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .15em .5em; border-radius: var(--radius-sm); background: var(--label-secondary); color: var(--fg-body); margin-left: .35rem; white-space: nowrap; vertical-align: middle; }
.cqo-kvchip.ok { background: var(--label-success); color: var(--success); }
.cqo-kvchip.warn { background: var(--label-warning); color: #c47d1c; }
.cqo-kvchip.err { background: var(--label-danger); color: var(--danger); }
.rka-kv.cqo-kv1 { grid-template-columns: 1fr; }
.rka-kv.cqo-kv1 .kv:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
.rka-kv.cqo-kv1 .kv:last-child { border-bottom: 0; }
.rka-kv .kv-value .dg-copy { vertical-align: middle; margin-left: .3rem; }
.dg-table tr.cqo-current { cursor: default; }
.dg-table tr.cqo-current td { background: var(--label-primary); }
.dg-table tr.cqo-current td:first-child { border-left-color: var(--primary); }
.dark-layout .cqo-code, .dark-style .cqo-code { background: rgba(255, 255, 255, .1); }
.dark-layout .cqo-kvchip.warn, .dark-style .cqo-kvchip.warn { color: #e0b072; }
@media (max-width: 991.98px) { .rka-twocol { grid-template-columns: 1fr !important; } }

/* -- 28.09.2026 ek&claude-Fable-5.1 — OutboxList responsive: kolon gruplama + esneyen hata kolonu + öncelikli gizleme.
   Hata kolonu (cqo-grow) tüm artık genişliği emer → diğer kolonlar içeriğe sığar, arada boşluk kalmaz.
   cqo-p3 <1600px, cqo-p2 <1400px gizlenir; <992px tablo min-width ile yatay kayar (bilgi title/alt satırda korunur). */
.cqo-table { table-layout: auto; }
.cqo-table th, .cqo-table td { padding: .7rem .85rem; }
.cqo-table th.cqo-grow, .cqo-table td.cqo-grow { width: 100%; min-width: 180px; white-space: normal; }
.cqo-table .cqo-sep { color: var(--fg-muted); opacity: .55; margin: 0 .2rem; font-weight: 400; }
.cqo-ids { display: inline-flex; flex-direction: column; gap: .15rem; font-size: .84rem; color: var(--fg-heading); font-variant-numeric: tabular-nums; line-height: 1.3; }
.cqo-ids i { width: 1.15rem; color: var(--fg-muted); font-size: .76rem; }
.cqo-utc { display: block; font-size: .72rem; color: var(--fg-muted); margin-top: .2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cqo-utc i { font-size: .68rem; margin-right: .15rem; }
.cqo-sub { display: flex; gap: .55rem; align-items: center; font-size: .74rem; color: var(--fg-muted); margin-top: .3rem; white-space: nowrap; }
.cqo-sub i { font-size: .68rem; }
.cqo-sub .cqo-next { color: #c47d1c; }
.cqo-table .cqo-lat { display: none; }
.cqo-err { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 520px; min-width: 160px; line-height: 1.35; }
/* Kap: viewport'a bağlı yükseklik → yatay kaydırma çubuğu HEP görünür (tablonun en altında kalmaz); başlık yapışkan. */
.dg-table-wrap.cqo-wrap { max-height: calc(100vh - 230px); min-height: 280px; overflow: auto; }
.cqo-wrap .cqo-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
@media (max-width: 1749.98px) { .cqo-table .cqo-p3 { display: none; } }
@media (max-width: 1499.98px) { .cqo-table .cqo-p2 { display: none; } .cqo-table .cqo-lat { display: inline; } }
@media (max-width: 991.98px) { .cqo-table { min-width: 960px; } .dg-table-wrap.cqo-wrap { max-height: calc(100vh - 180px); } .cqo-facets .nav-link { padding: .4rem .7rem; font-size: .85rem; } }
.dark-layout .cqo-sub .cqo-next, .dark-style .cqo-sub .cqo-next { color: #e0b072; }

/* -- 28.09.2026 ek&claude-Opus-5.5 — OutboxList "Hatalıları yeniden gönder" aralık modalı (cqo-rq-*). Modal .rk-wrap dışında olabilir → token'lar fallback'li. */
#cqoRequeueModal .cqo-rq-desc { color: var(--fg-body, #6f6b7d); font-size: .9rem; margin-bottom: .8rem; }
#cqoRequeueModal .cqo-rq-scope { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
#cqoRequeueModal .cqo-rq-scope b { margin-left: .2rem; }
#cqoRequeueModal .cqo-rq-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted, #6e6b7b); margin: .2rem 0 .55rem; }
#cqoRequeueModal .cqo-rq-label i { color: var(--primary, #7367f0); margin-right: .3rem; }
#cqoRequeueModal .cqo-rq-label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
#cqoRequeueModal .cqo-rq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1.1rem; }
#cqoRequeueModal .cqo-rq-btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .75rem .5rem; border: 1px solid var(--border, #ebe9f1); border-radius: .5rem; background: var(--surface, #fff); color: var(--fg-heading, #5e5873); cursor: pointer; transition: border-color .12s, background .12s, color .12s, transform .12s; }
#cqoRequeueModal .cqo-rq-btn i { font-size: 1.15rem; color: var(--primary, #7367f0); margin-bottom: .1rem; }
#cqoRequeueModal .cqo-rq-btn b { font-size: .86rem; font-weight: 600; }
#cqoRequeueModal .cqo-rq-btn small { font-size: .72rem; color: var(--fg-muted, #6e6b7b); font-variant-numeric: tabular-nums; }
#cqoRequeueModal .cqo-rq-btn:hover:not(:disabled) { border-color: var(--primary, #7367f0); background: rgba(115, 103, 240, .08); color: var(--primary, #7367f0); transform: translateY(-1px); }
#cqoRequeueModal .cqo-rq-btn:disabled { opacity: .55; cursor: wait; }
@media (max-width: 575.98px) { #cqoRequeueModal .cqo-rq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dark-layout #cqoRequeueModal .cqo-rq-btn, .dark-style #cqoRequeueModal .cqo-rq-btn { background: #283046; border-color: #3b4253; color: #d0d2d6; }