/*
 * Köpük — uygulama katmanı. bundle.css (tasarım sistemi) olduğu gibi kullanılır; burada yalnızca
 * sunucu tarafı işaretlemeye özgü uyarlamalar ve CSP uyumlu yardımcı sınıflar bulunur. Tüm değerler token'lardan gelir.
 */

/* --- Erişilebilirlik --- */
[hidden] { display: none !important; }
.kp-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.kp-skip:focus { top: var(--space-4); outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--link); }
:where(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-main:focus, .kp-content:focus { outline: none; }

/* --- Sunucu tarafı bağlantılar: bundle.css button stillerini <a>'ya uygula --- */
a.kp-btn, a.kp-iconbtn, a.kp-nav__item, a.kp-tab, a.kp-seg__btn { text-decoration: none; }
.kp-nav__user { color: var(--nav-ink); text-decoration: none; }
.kp-nav__user:hover { text-decoration: underline; }
.kp-nav__foot form { display: contents; }
.kp-nav__foot .kp-iconbtn:focus-visible, .kp-nav__user:focus-visible { outline-color: var(--nav-ink); }
.kp-nav { scrollbar-width: thin; }
.kp-row-link { color: inherit; text-decoration: none; }
.kp-row-link:hover { text-decoration: underline; }

/* --- Logo (SVG doldurmaları token'dan) --- */
.kp-logo__tile { fill: var(--accent); }
.kp-logo__bubble { fill: var(--nav-bg); }

/* --- Radio tabanlı segment ve ödeme kutucukları (JS'siz çalışır): aria-checked karşılığı :has(:checked) --- */
.kp-seg__btn:has(input:checked) { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }
.kp-seg__btn:has(input:focus-visible), .kp-pay__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-pay__opt:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--ink); }
.kp-pay__opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kp-seg__btn, .kp-pay__opt { cursor: pointer; }

/* --- Sekmeler bağlantı olarak --- */
.kp-tab[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

/* --- Autocomplete --- */
.kp-ac__root { position: relative; }
.kp-ac__pad { width: 8px; }
.kp-ac__btns .kp-iconbtn { width: 28px; height: 28px; }
.kp-ac__list[hidden] { display: none; }
.kp-ac__fallback { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: var(--space-2); }
.kp-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.kp-ac__fallback-text { border: 1px solid var(--line-strong); border-radius: var(--radius-md); margin-top: var(--space-2); }
.kp-ac__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Modal --- */
.kp-modal--closed:not(:target) { display: none; }
.kp-modal__box--sm { --kp-modal-w: 420px; }
.kp-modal__box--md { --kp-modal-w: 560px; }
.kp-modal__box--lg { --kp-modal-w: 760px; }
.kp-modal__box--xl { --kp-modal-w: 960px; }
.kp-modal__box:focus { outline: none; }
body.kp-modal-open { overflow: hidden; }

/* --- Toast --- */
.kp-toast { animation: kp-toast-in .16s ease-out; }
.kp-toast[data-leaving] { opacity: 0; transform: translateY(8px); transition: opacity .16s, transform .16s; }
@keyframes kp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kp-toast, .kp-toast[data-leaving] { animation: none; transition: none; } }

/* --- Yardımcılar: boşluk, ızgara, renk (CSP: style özniteliği yerine sınıf) --- */
.kp-gap-1 { gap: var(--space-1); } .kp-gap-2 { gap: var(--space-2); } .kp-gap-3 { gap: var(--space-3); }
.kp-gap-4 { gap: var(--space-4); } .kp-gap-5 { gap: var(--space-5); } .kp-gap-6 { gap: var(--space-6); }
.kp-mt-2 { margin-top: var(--space-2); } .kp-mt-3 { margin-top: var(--space-3); } .kp-mt-4 { margin-top: var(--space-4); }
.kp-grid--min-200 { --kp-min: 200px; } .kp-grid--min-240 { --kp-min: 240px; } .kp-grid--min-260 { --kp-min: 260px; }
.kp-grid--min-280 { --kp-min: 280px; } .kp-grid--min-320 { --kp-min: 320px; }
.kp-c-brand { color: var(--brand); } .kp-c-accent { color: var(--accent); } .kp-c-ink-muted { color: var(--ink-muted); }
.kp-c-success { color: var(--success); } .kp-c-warning { color: var(--warning); } .kp-c-danger { color: var(--danger); }
.kp-c-pay-cash { color: var(--pay-cash); } .kp-c-pay-card { color: var(--pay-card); } .kp-c-pay-transfer { color: var(--pay-transfer); }
.kp-c-pay-package { color: var(--pay-package); } .kp-c-pay-credit { color: var(--pay-credit); }
.kp-bg-brand { background: var(--brand); } .kp-bg-accent { background: var(--accent); } .kp-bg-danger { background: var(--danger); }
.kp-bg-success { background: var(--success); } .kp-bg-warning { background: var(--warning); } .kp-bg-ink-muted { background: var(--ink-muted); }
.kp-bg-pay-cash { background: var(--pay-cash); } .kp-bg-pay-card { background: var(--pay-card); } .kp-bg-pay-transfer { background: var(--pay-transfer); }
.kp-bg-pay-package { background: var(--pay-package); } .kp-bg-pay-credit { background: var(--pay-credit); }
.kp-narrow { max-width: 760px; width: 100%; }
.kp-subhead { margin: var(--space-4) 0 var(--space-1); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.kp-subhead:first-child { margin-top: 0; }
.kp-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); }
.kp-notice .kp-icon { color: var(--brand); flex: none; }
.kp-listrow--link { color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.kp-listrow--link:hover { background: var(--surface-hover); }
code { font-family: var(--font-mono); font-size: 13px; }

/* --- Sayfalama --- */
.kp-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.kp-pager__info { color: var(--ink-muted); font-size: 13px; }

/* --- Menüsüz sayfalar (giriş, hata, kurulum) --- */
.kp-plain { min-height: 100vh; }
.kp-plain__main { width: min(100%, 440px); margin: 0 auto; padding: var(--space-10) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.kp-plain__main--wide { width: min(100%, 720px); }
.kp-plain__brand { display: flex; align-items: center; gap: var(--space-3); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.kp-plain__brand .kp-logo__bubble { fill: var(--surface); }
.kp-form__grid--one { grid-template-columns: minmax(0, 1fr); }
.kp-devtrace { margin-top: var(--space-4); font-size: 12px; }
.kp-devtrace pre { overflow: auto; max-height: 360px; background: var(--surface-sunken); padding: var(--space-3); border-radius: var(--radius-md); white-space: pre-wrap; }

/* --- Kurulum adımları --- */
.kp-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kp-steps__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 600; font-size: 13px; padding-right: var(--space-2); }
.kp-steps__no { width: 24px; height: 24px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--surface-sunken); font-size: 12px; }
.kp-steps__item[aria-current="step"] { color: var(--ink); }
.kp-steps__item[aria-current="step"] .kp-steps__no { background: var(--brand); color: var(--on-brand); }
.kp-steps__item--done .kp-steps__no { background: var(--success-soft); color: var(--success); }

/* --- Geliştirme: debug bar --- */
.kp-debugbar { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 70; max-width: min(960px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 12px; }
.kp-debugbar summary { padding: 6px var(--space-3); cursor: pointer; }
.kp-debugbar--warn summary b { color: var(--danger); }
.kp-debugbar ol { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3) var(--space-8); max-height: 320px; overflow: auto; }
.kp-debugbar li { margin-bottom: 4px; }
.kp-debugbar li .kp-num { display: inline-block; min-width: 64px; color: var(--ink-muted); }
.kp-debugbar code { font-size: 11px; }

/* --- Yazdırma: menü ve eylemler gizlenir --- */
@media print {
  .kp-nav, .kp-top__actions, .kp-top__menu, .kp-toasts, .kp-debugbar, .kp-skip { display: none !important; }
  .kp-shell__grid { grid-template-columns: minmax(0, 1fr); }
  body { background: #fff; }
}

/* İkon sprite'ı: görünmez, yer kaplamaz */
.kp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (min-width: 1024px) { .kp-shell ~ .kp-debugbar { left: calc(var(--sidebar-width) + var(--space-4)); } }
.kp-shell--open ~ .kp-debugbar { display: none; }

/* --- İş bileşenleri: sunucu tarafı uyarlamalar --- */
.kp-svc__titles { min-width: 0; }
label.kp-svc { cursor: pointer; }
label.kp-svc .kp-svc__titles { padding-right: 28px; }
label.kp-svc:hover { border-color: var(--line-strong); }
label.kp-svc .kp-svc__check { color: var(--on-brand); }
label.kp-svc .kp-svc__check .kp-icon { visibility: hidden; }
label.kp-svc:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-soft); padding: calc(var(--space-4) - 1px); }
label.kp-svc:has(input:checked) .kp-svc__ic { background: var(--brand); color: var(--on-brand); }
label.kp-svc:has(input:checked) .kp-svc__check { background: var(--brand); border-color: var(--brand); }
label.kp-svc:has(input:checked) .kp-svc__check .kp-icon { visibility: visible; }
label.kp-svc:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-svc--passive { opacity: .7; }
.kp-ent__meta .kp-ent__note { color: var(--warning); font-weight: 600; align-items: flex-start; }
.kp-ent__name .kp-row-link { color: inherit; }

/* Sayfa düzenleri */
.kp-detail { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
@container shell (max-width: 1100px) { .kp-detail { grid-template-columns: minmax(0, 1fr); } }
.kp-deflist { display: grid; gap: 0; margin: 0; }
.kp-deflist > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.kp-deflist > div:first-child { border-top: 0; }
.kp-deflist dt { color: var(--ink-muted); }
.kp-deflist dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.kp-price-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.kp-price-grid__head { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.kp-price-grid__class { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; min-height: var(--control-md); }
@container (max-width: 520px) { .kp-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kp-price-grid__class { grid-column: 1 / -1; min-height: 0; } .kp-price-grid__head { display: none; } }
.kp-filters { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.kp-filters > .kp-grow { flex: 1 1 240px; min-width: 0; }
.kp-diff-up { color: var(--danger); } .kp-diff-down { color: var(--success); }
[data-show-when][hidden] { display: none !important; }

/* JS açıkken gereksiz kalan düğmeler (ör. otomatik gönderilen formun "Git" düğmesi) */
.kp-js .kp-js-hide { display: none; }

/* Hafta görünümü: 7 gün sütunu; dar kapta alt alta */
.kp-week { display: grid; gap: var(--space-3); grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kp-week__day { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; display: flex; flex-direction: column; }
.kp-week__day--today { border-color: var(--accent); }
.kp-week__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--line); font-size: 13px; }
.kp-week__list { display: grid; gap: var(--space-2); padding: var(--space-2); }
.kp-week__list .kp-appt { height: auto; position: relative; }
.kp-week__add { display: flex; align-items: center; gap: var(--space-1); justify-content: center; padding: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; font-size: 13px; }
.kp-week__add:hover { background: var(--surface-hover); }
@container shell (max-width: 1100px) { .kp-week { grid-template-columns: minmax(0, 1fr); } }
a.kp-appt { color: inherit; }
.kp-notice--danger { background: var(--danger-soft); } .kp-notice--danger .kp-icon { color: var(--danger); }

/* --- Kasa --- */
.kp-grow-min { flex: 1 1 auto; min-width: 0; }
.kp-strong { font-weight: 600; }
.kp-small { font-size: 12px; }
.kp-control--sm { min-height: var(--control-sm); }
.kp-control--sm .kp-input { height: calc(var(--control-sm) - 2px); }
.kp-pos-who { margin-bottom: var(--space-3); }
.kp-pos-class { margin-bottom: var(--space-3); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.kp-pos-discount { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.kp-pos-discount .kp-control:first-of-type { width: 84px; }
.kp-pos-discount .kp-grow { flex: 1 1 140px; min-width: 120px; }
.kp-co__sumrow--discount { flex-wrap: wrap; }
.kp-co__qty form { display: contents; }
.kp-quick { align-items: center; }
.kp-quick form { display: contents; }
.kp-quick__label { margin-right: var(--space-1); }
.kp-co__splitrow form { display: contents; }
.kp-pos-pkgs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.kp-pos-busy { opacity: .6; pointer-events: none; transition: opacity .12s; }
.kp-tiles { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.kp-tiles form { display: contents; }
.kp-tile { font: inherit; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  text-align: left; min-height: var(--control-lg); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.kp-tile:hover { background: var(--surface-hover); }
.kp-tile:disabled { opacity: .5; cursor: not-allowed; }
.kp-tile__ic { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.kp-tile__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-tile__meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.kp-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-await { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.kp-await .kp-appt { height: auto; position: relative; }
.kp-await .kp-appt--selected { outline: 2px solid var(--brand); outline-offset: 1px; }
.kp-co__splitrow--void { opacity: .6; text-decoration: line-through; }

/* ColumnChart (raporlar) — SVG, renkler token */
.kp-chart { margin: 0; display: grid; gap: var(--space-3); }
.kp-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.kp-chart__grid { stroke: var(--line); stroke-width: 1; }
.kp-chart__axis { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 11px; }
.kp-chart__bar { transition: opacity .15s; }
.kp-chart__bar:hover { opacity: .75; }
.kp-fill-brand { fill: var(--brand); } .kp-fill-danger { fill: var(--danger); } .kp-fill-success { fill: var(--success); } .kp-fill-accent { fill: var(--accent); }
.kp-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; color: var(--ink-muted); }
.kp-chart__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.kp-chart__sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.kp-cols.kp-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container shell (max-width: 1100px) { .kp-cols.kp-cols--even { grid-template-columns: minmax(0, 1fr); } }
.kp-wrap { flex-wrap: wrap; }
.kp-self-end { align-self: flex-end; }
.kp-logo-preview { display: grid; place-items: center; padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-sunken); }
.kp-logo-preview img { max-width: 100%; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.kp-input.kp-file { padding-top: 8px; height: auto; min-height: calc(var(--control-md) - 2px); }
.kp-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-2) 0; }
.kp-code { margin: 4px 0 0; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.kp-right { margin-left: auto; text-align: right; }
.kp-diff th[scope="row"] { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); background: transparent; border-top: 1px solid var(--line); white-space: normal; }
.kp-diff td { font-family: var(--font-mono); font-size: 12px; word-break: break-word; }
.kp-plain__logo { display: grid; place-items: center; } .kp-plain__logo img { max-width: 200px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
/* Tek dilimlik (kısa) randevu: hizmet satırı gizlenir, saat ile plaka aynı satıra iner — 48 px'e sığar. */
.kp-appt--dense { padding-top: 5px; padding-bottom: 3px; line-height: 16px; }
.kp-appt--dense .kp-appt__svc { display: none; }
.kp-appt--dense > div:has(.kp-plate) { display: none; }

/* --- Demo modu (DEMO_MODE) --- */
.kp-demo-accounts { display: grid; gap: var(--space-3); }
.kp-demo-accounts__cred { margin: var(--space-1) 0 0; font-size: 12px; text-align: center; }
.kp-demo-bar { display: flex; gap: var(--space-2); align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); background: var(--brand-soft); color: var(--ink); font-size: 13px; text-align: center; }
.kp-demo-bar .kp-icon { color: var(--brand); flex: none; }