/* Bu dosya bin/sync-design-system ile design-system/ klasöründen üretilir. Elle düzenlemeyin. */
/* Köpük — bileşen stilleri. Tüm değerler tokens.css değişkenlerinden gelir. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.kp-demo { padding: var(--space-4); }
.kp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kp-muted { color: var(--ink-muted); }
.kp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.kp-btn, .kp-iconbtn, .kp-input, .kp-ac__input, .kp-seg__btn, .kp-tab, .kp-switch input, .kp-pay__opt, .kp-svc, .kp-row-btn, .kp-nav__item, .kp-chip, .kp-slot, .kp-appt):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Layout */
.kp-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.kp-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.kp-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(var(--kp-min, 240px), 100%), 1fr)); }

/* Icon */
.kp-icon { flex: none; display: inline-block; vertical-align: middle; }

/* Button */
.kp-btn { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; text-decoration: none; }
.kp-btn:hover { background: var(--surface-hover); }
.kp-btn:disabled { opacity: .5; cursor: not-allowed; }
.kp-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.kp-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.kp-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kp-btn--accent:hover { filter: brightness(.94); background: var(--accent); }
.kp-btn--ghost { background: transparent; border-color: transparent; color: var(--ink); }
.kp-btn--ghost:hover { background: var(--surface-hover); }
.kp-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.kp-btn--danger:hover { filter: brightness(.94); background: var(--danger); }
.kp-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
.kp-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: 15px; }
.kp-btn--block { width: 100%; }
.kp-btn__spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kp-spin .7s linear infinite; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
.kp-iconbtn { font: inherit; display: inline-grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; flex: none; }
.kp-iconbtn:hover { background: var(--surface-hover); color: var(--ink); }
.kp-iconbtn--outline { border-color: var(--line-strong); background: var(--surface-raised); color: var(--ink); }
.kp-iconbtn--sm { width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-sm); }

/* Badge */
.kp-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; background: var(--surface-sunken); color: var(--ink); }
.kp-badge--brand { background: var(--brand-soft); color: var(--brand); }
.kp-badge--accent { background: var(--accent-soft); color: var(--accent); }
.kp-badge--success { background: var(--success-soft); color: var(--success); }
.kp-badge--warning { background: var(--warning-soft); color: var(--warning); }
.kp-badge--danger { background: var(--danger-soft); color: var(--danger); }
.kp-badge--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-muted); }

/* Plate */
.kp-plate { display: inline-flex; align-items: stretch; height: 26px; border: 1.5px solid var(--plate-ink); border-radius: var(--radius-sm); background: var(--plate-bg); color: var(--plate-ink); overflow: hidden; font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: .04em; white-space: nowrap; flex: none; }
.kp-plate__tr { background: var(--plate-band); color: #ffffff; font-size: 9px; letter-spacing: 0; display: grid; place-items: end center; padding: 0 3px 2px; font-family: var(--font-sans); font-weight: 700; }
.kp-plate__no { padding: 0 var(--space-2); display: flex; align-items: center; }
.kp-plate--sm { height: 22px; font-size: 12px; }
.kp-plate--lg { height: 36px; font-size: 20px; }
.kp-plate--lg .kp-plate__tr { font-size: 11px; padding: 0 5px 3px; }

/* Avatar */
.kp-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px; flex: none; }
.kp-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.kp-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* Money */
.kp-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.kp-money--neg { color: var(--danger); }
.kp-money--pos { color: var(--success); }
.kp-money--lg { font-size: 28px; line-height: 34px; font-weight: 600; }
.kp-money--md { font-size: 18px; line-height: 24px; font-weight: 600; }

/* Card */
.kp-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); container-type: inline-size; min-width: 0; }
.kp-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; flex-wrap: wrap; }
.kp-card__titles { flex: 1 1 auto; min-width: 0; }
.kp-card__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 650; }
.kp-card__sub { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.kp-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.kp-card--flush .kp-card__body { padding: var(--space-3) 0 0; }
.kp-card__foot { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
@container (max-width: 420px) { .kp-card__head { padding: var(--space-4) var(--space-4) 0; } .kp-card__body { padding: var(--space-3) var(--space-4) var(--space-4); } }

/* StatCard */
.kp-stat { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; box-shadow: var(--shadow-card); }
.kp-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.kp-stat__ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.kp-stat__ic--accent { background: var(--accent-soft); color: var(--accent); }
.kp-stat__ic--success { background: var(--success-soft); color: var(--success); }
.kp-stat__ic--danger { background: var(--danger-soft); color: var(--danger); }
.kp-stat__ic--warning { background: var(--warning-soft); color: var(--warning); }
.kp-stat__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(20px, 2.2vw + 12px, 26px); line-height: 32px; font-weight: 600; overflow-wrap: anywhere; }
.kp-stat__foot { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); flex-wrap: wrap; }
.kp-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.kp-delta--up { color: var(--success); }
.kp-delta--down { color: var(--danger); }

/* Field shell */
.kp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-field__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.kp-field__req { color: var(--danger); margin-left: 2px; }
.kp-field__hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.kp-field__err { font-size: 12px; line-height: 16px; color: var(--danger); display: flex; gap: 4px; align-items: center; font-weight: 600; }
.kp-control { position: relative; display: flex; align-items: center; min-height: var(--control-md); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); transition: border-color .12s, box-shadow .12s; }
.kp-control:hover { border-color: var(--ink-muted); }
.kp-control:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.kp-control--err { border-color: var(--danger); }
.kp-control--err:focus-within { box-shadow: 0 0 0 1px var(--danger); border-color: var(--danger); }
.kp-control--disabled { opacity: .55; }
.kp-control__ic { color: var(--ink-muted); padding-left: var(--space-3); display: flex; }
.kp-control__affix { color: var(--ink-muted); padding: 0 var(--space-3); font-weight: 500; white-space: nowrap; }
.kp-control__affix--pre { padding-right: 0; }
.kp-input { font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0; flex: 1 1 auto; min-width: 0; height: calc(var(--control-md) - 2px); padding: 0 var(--space-3); }
.kp-input:focus-visible { outline: 0; }
textarea.kp-input { height: auto; min-height: 84px; padding: 10px var(--space-3); resize: vertical; }
.kp-input::placeholder, .kp-ac__input::placeholder { color: var(--ink-muted); opacity: .85; }
.kp-input[type="date"], .kp-input[type="time"] { color-scheme: light dark; }

/* Autocomplete */
.kp-ac { position: relative; }
.kp-ac .kp-control { flex-wrap: wrap; gap: 4px; padding: 3px 4px 3px 0; cursor: text; }
.kp-ac__chips { display: contents; }
.kp-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 var(--space-2); margin-left: 4px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px; border: 0; font-family: inherit; }
.kp-chip button { all: unset; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; }
.kp-chip button:hover { background: var(--surface-raised); }
.kp-ac__input { font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0; flex: 1 1 80px; min-width: 60px; height: 32px; padding: 0 var(--space-3); }
.kp-ac__lead { color: var(--ink-muted); display: flex; padding-left: var(--space-3); }
.kp-ac__btns { display: flex; align-items: center; margin-left: auto; color: var(--ink-muted); }
.kp-ac__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 280px; overflow: auto; }
.kp-ac__opt { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-3); border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; }
.kp-ac__opt[aria-selected="true"] { background: var(--surface-hover); }
.kp-ac__opt--chosen .kp-ac__label { font-weight: 700; }
.kp-ac__opt-ic { color: var(--ink-muted); display: flex; }
.kp-ac__text { flex: 1 1 auto; min-width: 0; }
.kp-ac__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ac__label mark { background: transparent; color: var(--brand); font-weight: 700; }
.kp-ac__desc { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ac__check { color: var(--brand); display: flex; }
.kp-ac__create { color: var(--brand); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; }
.kp-ac__empty { padding: 10px var(--space-3); color: var(--ink-muted); }
.kp-ac__group { padding: 8px var(--space-3) 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* Switch */
.kp-switch { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.kp-switch input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line-strong); position: relative; cursor: pointer; transition: background .15s; }
.kp-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s, background .15s; }
.kp-switch input:checked { background: var(--brand); border-color: var(--brand); }
.kp-switch input:checked::after { transform: translateX(16px); background: var(--on-brand); }
.kp-switch__text { display: flex; flex-direction: column; padding-top: 2px; }
.kp-switch__label { font-weight: 600; }

/* Segmented */
.kp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kp-seg--block { display: flex; width: 100%; }
.kp-seg--block .kp-seg__btn { flex: 1 1 0; }
.kp-seg__btn { font: inherit; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 var(--space-3); border-radius: 7px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.kp-seg__btn[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }

/* Tabs */
.kp-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.kp-tab { font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--space-3); border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.kp-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.kp-tab__count { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); }
.kp-tab[aria-selected="true"] .kp-tab__count { background: var(--brand-soft); color: var(--brand); }

/* DataTable — dar konteynerde karta dönüşür */
.kp-dt { container-type: inline-size; min-width: 0; }
.kp-dt__table { width: 100%; border-collapse: collapse; }
.kp-dt__table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); background: var(--surface-sunken); padding: 10px var(--space-4); white-space: nowrap; }
.kp-dt__table td { padding: 12px var(--space-4); border-top: 1px solid var(--line); vertical-align: middle; }
.kp-dt__table tr[data-click] { cursor: pointer; }
.kp-dt__table tbody tr:hover td { background: var(--surface-hover); }
.kp-dt [data-align="right"] { text-align: right; }
.kp-dt__list { display: none; list-style: none; margin: 0; padding: 0; }
.kp-dt__item { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); display: grid; gap: 6px; }
.kp-dt__item:first-child { border-top: 0; }
.kp-dt__item[data-click] { cursor: pointer; }
.kp-dt__primary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 600; flex-wrap: wrap; }
.kp-dt__pair { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; align-items: center; }
.kp-dt__pair > span:first-child { color: var(--ink-muted); }
@container (max-width: 760px) { .kp-dt [data-hide="md"] { display: none; } }
@container (max-width: 560px) { .kp-dt__table { display: none; } .kp-dt__list { display: block; } }

/* EmptyState */
.kp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); color: var(--ink-muted); }
.kp-empty__ic { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--surface-sunken); display: grid; place-items: center; color: var(--ink-muted); margin-bottom: var(--space-2); }
.kp-empty__title { color: var(--ink); font-size: 16px; font-weight: 650; margin: 0; }
.kp-empty p { margin: 0 0 var(--space-2); max-width: 360px; }

/* Modal — dar ekranda alttan açılan tam genişlik sayfa */
.kp-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }
.kp-modal--inline { position: relative; inset: auto; min-height: 100%; }
.kp-modal__box { width: min(100%, var(--kp-modal-w, 560px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.kp-modal__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.kp-modal__title { margin: 0; flex: 1; font-size: 18px; line-height: 26px; font-weight: 650; }
.kp-modal__body { padding: var(--space-5); overflow: auto; }
.kp-modal__foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 600px) { .kp-modal { padding: 0; place-items: end stretch; } .kp-modal__box { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; } .kp-modal__foot > * { flex: 1 1 0; } }

/* Toast */
.kp-toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-width: 420px; }
.kp-toast__ic { display: flex; padding-top: 1px; }
.kp-toast__body { flex: 1; min-width: 0; }
.kp-toast__title { font-weight: 650; }
.kp-toast__msg { color: var(--ink-muted); font-size: 13px; }
.kp-toast--success .kp-toast__ic { color: var(--success); }
.kp-toast--danger .kp-toast__ic { color: var(--danger); }
.kp-toast--warning .kp-toast__ic { color: var(--warning); }
.kp-toast--info .kp-toast__ic { color: var(--brand); }
.kp-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 60; }

/* AppShell */
.kp-shell { container-type: inline-size; container-name: shell; min-height: 100vh; background: var(--surface); }
.kp-shell__grid { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.kp-nav { background: var(--nav-bg); color: var(--nav-ink); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.kp-nav__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-5); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.kp-nav__brand svg { width: 32px; height: 32px; }
.kp-nav__brand small { display: block; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--nav-ink-muted); letter-spacing: 0; }
.kp-nav__group { font-size: 11px; font-weight: 600; color: var(--nav-ink-muted); padding: var(--space-4) var(--space-3) var(--space-1); }
.kp-nav__item { font: inherit; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 0; background: transparent; color: var(--nav-ink); cursor: pointer; text-align: left; font-weight: 500; }
.kp-nav__item:hover { background: var(--nav-active); }
.kp-nav__item[aria-current="page"] { background: var(--nav-active); font-weight: 700; }
.kp-nav__item[aria-current="page"] .kp-icon { color: var(--accent); }
.kp-nav__item:focus-visible { outline-color: var(--nav-ink); }
.kp-nav__label { flex: 1; }
.kp-nav__badge { font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 20px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); }
.kp-nav__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--nav-active); display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-2); }
.kp-nav__foot .kp-avatar { background: var(--nav-active); color: var(--nav-ink); }
.kp-nav__user { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.kp-nav__user small { display: block; color: var(--nav-ink-muted); font-weight: 500; font-size: 12px; }
.kp-nav__foot .kp-iconbtn { color: var(--nav-ink); }
.kp-nav__foot .kp-iconbtn:hover { background: var(--nav-active); }
.kp-main { min-width: 0; display: flex; flex-direction: column; }
.kp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-height); padding: var(--space-2) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kp-top__menu { display: none; }
.kp-top__titles { flex: 1 1 auto; min-width: 0; }
.kp-top__title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-top__sub { margin: 0; font-size: 12px; color: var(--ink-muted); }
.kp-top__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.kp-content { padding: var(--space-6); width: 100%; max-width: var(--content-max); display: flex; flex-direction: column; gap: var(--space-5); }
.kp-shell__scrim { display: none; }
@container shell (max-width: 1023px) {
  .kp-shell__grid { grid-template-columns: minmax(0, 1fr); }
  .kp-nav { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); z-index: 40; transform: translateX(-105%); transition: transform .2s; }
  .kp-shell--open .kp-nav { transform: none; box-shadow: var(--shadow-modal); }
  .kp-shell--open .kp-shell__scrim { display: block; position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
  .kp-top__menu { display: inline-grid; }
  .kp-top { padding: var(--space-2) var(--space-4); }
  .kp-content { padding: var(--space-4); gap: var(--space-4); }
}
@container shell (max-width: 560px) { .kp-top__title { font-size: 18px; line-height: 26px; } .kp-top__actions .kp-btn__txt { display: none; } .kp-top__actions .kp-btn { padding: 0 10px; } }

/* Toolbar */
.kp-toolbar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.kp-toolbar > .kp-grow { flex: 1 1 220px; min-width: 0; }

/* BarList */
.kp-bars { display: grid; gap: var(--space-3); }
.kp-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); align-items: center; }
.kp-bars__label { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; min-width: 0; }
.kp-bars__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-bars__val { text-align: right; }
.kp-bars__val small { color: var(--ink-muted); margin-left: 6px; font-family: var(--font-sans); }
.kp-bars__track { grid-column: 1 / -1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.kp-bars__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand); }

/* Stacked bar (kasa dağılımı) */
.kp-stackbar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; gap: 2px; background: var(--surface-sunken); }
.kp-stackbar > span { height: 100%; }
.kp-legend { display: grid; gap: var(--space-2); }
.kp-legend__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; }
.kp-legend__sw { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-sunken); }
.kp-legend__pct { color: var(--ink-muted); font-size: 12px; min-width: 40px; text-align: right; }

/* Payment method picker */
.kp-pay { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.kp-pay__opt { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 13px; text-align: center; }
.kp-pay__opt:hover { background: var(--surface-hover); }
.kp-pay__opt[aria-checked="true"] { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--ink); }
.kp-pay__opt small { font-weight: 500; color: var(--ink-muted); font-size: 11px; line-height: 14px; }
.kp-pay--compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.kp-pay--compact .kp-pay__opt { min-height: var(--control-lg); flex-direction: row; }

/* Checkout */
.kp-co { container-type: inline-size; }
.kp-co__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
@container (max-width: 760px) { .kp-co__grid { grid-template-columns: minmax(0, 1fr); } }
.kp-co__who { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); }
.kp-co__who-name { font-weight: 650; }
.kp-co__line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kp-co__qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.kp-co__qty span { min-width: 22px; text-align: center; font-family: var(--font-mono); font-weight: 600; }
.kp-co__qty .kp-iconbtn { width: 30px; height: 30px; }
.kp-co__sum { display: grid; gap: var(--space-2); padding-top: var(--space-3); }
.kp-co__sumrow { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.kp-co__total { font-size: 15px; font-weight: 700; padding-top: var(--space-2); border-top: 1px dashed var(--line-strong); }
.kp-co__split { display: grid; gap: var(--space-2); }
.kp-co__splitrow { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.kp-co__remain { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 700; }
.kp-co__remain--due { background: var(--accent-soft); color: var(--accent); }
.kp-co__remain--ok { background: var(--success-soft); color: var(--success); }
.kp-co__remain--over { background: var(--warning-soft); color: var(--warning); }
.kp-quick { display: flex; gap: 6px; flex-wrap: wrap; }

/* Schedule */
.kp-sch { container-type: inline-size; }
.kp-sch__wrap { overflow-x: auto; }
.kp-sch__grid { display: grid; position: relative; min-width: calc(56px + var(--lanes) * 150px); }
.kp-sch__head { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); border-bottom: 1px solid var(--line); padding: 8px var(--space-3); font-weight: 650; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kp-sch__head small { color: var(--ink-muted); font-weight: 600; font-size: 11px; background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 0 6px; line-height: 16px; }
.kp-sch__lane { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kp-sch__time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); padding: 0 6px; text-align: right; transform: translateY(-7px); }
.kp-sch__cell { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kp-slot { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; }
.kp-slot:hover { background: var(--surface-hover); }
.kp-sch__appt { margin: 2px 4px; z-index: 4; min-width: 0; }
.kp-sch__now { position: absolute; left: 56px; right: 0; height: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.kp-sch__now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.kp-sch__agenda { display: none; }
@container (max-width: 600px) { .kp-sch__wrap { display: none; } .kp-sch__agenda { display: grid; gap: var(--space-2); } }
.kp-sch__agenda-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); font-weight: 600; padding-top: var(--space-2); }

/* AppointmentCard */
.kp-appt { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; height: 100%; width: 100%; padding: 4px 8px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); cursor: pointer; overflow: hidden; font-size: 13px; line-height: 18px; position: relative; }
.kp-appt:hover { border-color: var(--line-strong); }
.kp-appt__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.kp-appt--pending .kp-appt__bar { background: var(--warning); }
.kp-appt--confirmed .kp-appt__bar { background: var(--brand); }
.kp-appt--in_progress { background: var(--accent-soft); border-color: transparent; }
.kp-appt--in_progress .kp-appt__bar { background: var(--accent); }
.kp-appt--done .kp-appt__bar, .kp-appt--paid .kp-appt__bar { background: var(--success); }
.kp-appt--cancelled, .kp-appt--no_show { opacity: .7; }
.kp-appt--cancelled .kp-appt__bar, .kp-appt--no_show .kp-appt__bar { background: var(--danger); }
.kp-appt__row { display: flex; align-items: center; gap: 6px; justify-content: space-between; min-width: 0; }
.kp-appt__time { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.kp-appt__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-appt__svc { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-appt--full { padding: var(--space-3) var(--space-4); gap: 6px; font-size: 14px; line-height: 20px; height: auto; }
.kp-appt__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 4px; }

/* Entity cards (müşteri, araç) */
.kp-ent { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); container-type: inline-size; min-width: 0; box-shadow: var(--shadow-card); }
.kp-ent__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.kp-ent__titles { flex: 1; min-width: 0; }
.kp-ent__name { font-weight: 650; font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ent__sub { font-size: 12px; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kp-ent__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.kp-ent__stat { background: var(--surface-sunken); border-radius: var(--radius-md); padding: 8px 10px; min-width: 0; }
.kp-ent__stat small { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; }
.kp-ent__stat b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.kp-ent__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-ent__foot { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kp-ent__foot .kp-btn { flex: 1 1 auto; }
.kp-ent__meta { display: grid; gap: 6px; font-size: 13px; }
.kp-ent__meta div { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); }
.kp-ent__meta b { color: var(--ink); font-weight: 600; }
@container (max-width: 300px) { .kp-ent__stats { grid-template-columns: minmax(0, 1fr); } }
.kp-pkg { display: grid; gap: 6px; padding: 10px; border-radius: var(--radius-md); background: var(--accent-soft); }
.kp-pkg__row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); }
.kp-pkg__track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.kp-pkg__fill { height: 100%; background: var(--accent); }

/* Service card */
.kp-svc { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); min-width: 0; position: relative; }
.kp-svc[role="checkbox"] { cursor: pointer; }
.kp-svc[role="checkbox"]:hover { border-color: var(--line-strong); }
.kp-svc[aria-checked="true"] { border: 2px solid var(--brand); background: var(--brand-soft); padding: calc(var(--space-4) - 1px); }
.kp-svc__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.kp-svc__ic { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.kp-svc[aria-checked="true"] .kp-svc__ic { background: var(--brand); color: var(--on-brand); }
.kp-svc__name { font-weight: 650; font-size: 15px; line-height: 22px; }
.kp-svc__desc { font-size: 13px; color: var(--ink-muted); }
.kp-svc__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; flex-wrap: wrap; }
.kp-svc__check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); display: grid; place-items: center; background: var(--surface-raised); color: var(--on-brand); }
.kp-svc[aria-checked="true"] .kp-svc__check { background: var(--brand); border-color: var(--brand); }
.kp-svc__prices { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); }
.kp-svc__prices b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

/* Forms */
.kp-form { container-type: inline-size; }
.kp-form__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kp-form__grid > .kp-span { grid-column: 1 / -1; }
@container (max-width: 520px) { .kp-form__grid { grid-template-columns: minmax(0, 1fr); } }
.kp-form__section { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--ink-muted); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.kp-form__actions { display: flex; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-4); flex-wrap: wrap; }
@container (max-width: 520px) { .kp-form__actions > * { flex: 1 1 0; } }
.kp-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); flex-wrap: wrap; }

/* Cash summary */
.kp-cash { container-type: inline-size; }
.kp-cash__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); }
@container (max-width: 640px) { .kp-cash__grid { grid-template-columns: minmax(0, 1fr); } }
.kp-cash__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.kp-cash__drawer { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); align-content: start; }
.kp-cash__line { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 13px; }
.kp-cash__line--total { font-size: 15px; font-weight: 700; border-top: 1px dashed var(--line-strong); padding-top: var(--space-2); margin-top: 2px; }

/* Page helpers */
.kp-kpis { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.kp-cols { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@container shell (max-width: 1100px) { .kp-cols { grid-template-columns: minmax(0, 1fr); } }
.kp-pagehead { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; justify-content: space-between; }

/* Liste satırı (bildirim, bekleyen iş) */
.kp-listrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.kp-listrow:first-child { border-top: 0; padding-top: 0; }
.kp-listrow__text { flex: 1 1 auto; min-width: 0; }