/* =====================================================================
   UYGULAMA EK BİLEŞENLERİ
   app.css (tasarım sistemi) üzerine, uygulamaya özgü bileşenler.
   Token kullanır; app.css'i değiştirmez.
   ===================================================================== */

/* --- Erişilebilirlik --------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(77,128,238,.3); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Sidebar ------------------------------------------------------ */
.sidebar__brand-link { display: flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; min-width: 0; }
.sidebar__brand-link:hover { text-decoration: none; }
.sidebar__logo { background: linear-gradient(135deg, #4D80EE, #2C6FD8); border-radius: 6px; }
.sidebar__logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.is-collapsed .nav-link { justify-content: center; padding-inline: 0; }
.sidebar.is-collapsed .sidebar__brand { justify-content: center; padding-inline: 0; }
.sidebar-toggle { display: none; }
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 79;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* --- Topbar ------------------------------------------------------- */
/* Komut paleti (Ctrl+K) — topbar'daki arama kutusunun yerini aldı */
.command-palette { display: flex; flex-direction: column; gap: var(--space-3); }
.command-palette__field { position: relative; }
.command-palette__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-faint); pointer-events: none; display: flex; }
.command-palette__input { width: 100%; height: 41px; padding-left: 38px; }
.command-palette__results { max-height: 46vh; overflow-y: auto; }
.command-palette__hint { padding: var(--space-5) var(--space-3); text-align: center;
  color: var(--c-text-muted); font-size: var(--fs-sm); }
.global-search__results {
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  max-height: 46vh; overflow-y: auto;
}
.global-search__group { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-text-muted); padding: 8px 10px 4px; }
.global-search__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 8px 10px;
  border: 0; background: transparent; border-radius: var(--r-sm); text-align: left; color: var(--c-text); text-decoration: none;
}
.global-search__item:hover, .global-search__item.is-active { background: var(--c-primary-soft); text-decoration: none; }
.global-search__item small { color: var(--c-text-muted); margin-left: auto; }

.avatar { width: 30px; height: 30px; border-radius: var(--r-full); object-fit: cover; }
.avatar--sm { width: 26px; height: 26px; }
.avatar--initials { display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; font-size: 12px; }
.badge-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-danger); }
.icon-btn { position: relative; }

.theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: block; }

/* --- Dropdown ek ------------------------------------------------- */
.dropdown__menu[hidden] { display: none; }
.dropdown__header { padding: 8px 10px; font-size: var(--fs-sm); color: var(--c-text-muted); border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
.dropdown__empty { padding: 16px 10px; text-align: center; color: var(--c-text-muted); font-size: 13px; }
.dropdown__menu--wide { min-width: 340px; }
.dropdown__menu--columns { min-width: 280px; padding: 10px; }
.dropdown__menu--left { right: auto; left: 0; }
.dropdown__menu--fab { bottom: calc(100% + 10px); top: auto; min-width: 232px; }
.fab-wrap { position: fixed; right: 28px; bottom: 28px; z-index: 60; }
.fab-wrap .fab { position: static; }
.dropdown__item[disabled] { opacity: .45; pointer-events: none; }
.column-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.column-list__item { padding: 5px 6px; border-radius: var(--r-sm); }
.column-list__item:hover { background: var(--c-surface-2); }

.notification-list { max-height: 380px; overflow-y: auto; }
.notification-item { display: flex; gap: var(--space-3); padding: 10px; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.notification-item:hover { background: var(--c-surface-2); text-decoration: none; }
.notification-item__dot { width: 8px; height: 8px; border-radius: var(--r-full); margin-top: 6px; flex: 0 0 8px; }

/* --- Giriş ekranı ------------------------------------------------ */
.auth__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.4px; }
.auth__sub { color: var(--c-text-muted); margin-top: 6px; }
.auth-hero__logo { display: flex; justify-content: center; }
.input-group__addon--btn { cursor: pointer; background: var(--c-surface); }
.input-group__addon--btn:hover { background: var(--c-surface-3); color: var(--c-text); }

/* --- Hata sayfaları ---------------------------------------------- */
.error-page { text-align: center; padding: 64px 20px; }
.error-page__code { font-size: 64px; font-weight: 800; color: var(--c-primary); letter-spacing: -2px; line-height: 1; }
.error-page__title { font-size: var(--fs-xl); font-weight: 700; margin-top: var(--space-3); }
.error-page__ref { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.error-page code { background: var(--c-surface-3); padding: 2px 6px; border-radius: var(--r-sm); }

/* --- Tablo ek ----------------------------------------------------- */
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { text-decoration: none; color: var(--c-primary); }
.th-sort .sort { opacity: .4; font-size: 11px; }
.th-sort.is-sorted { color: var(--c-primary); }
.th-sort.is-sorted .sort { opacity: 1; }
.table tbody tr.is-cancelled td { opacity: .6; }
.table tbody tr.is-cancelled .cell-series { text-decoration: line-through; }
.table__row-link { color: inherit; text-decoration: none; display: block; }
.table__row-link:hover { text-decoration: none; }
.table-scroll { max-width: 100%; }
.table--compact tbody td { padding: 9px var(--space-3); }
.table tfoot td { background: var(--c-surface-2); font-weight: 700; border-top: 2px solid var(--c-border-strong); padding: 12px var(--space-3); }
.select--sm { height: 34px; width: 78px; padding: 0 8px; }
.input--sm { height: 34px; }
.pagination__ellipsis { color: var(--c-text-faint); padding: 0 4px; }
.pagination__btn { text-decoration: none; }
.pagination__btn:hover { background: var(--c-surface-2); text-decoration: none; }
.pagination__btn.is-disabled { opacity: .4; pointer-events: none; }
.pagination__size { display: inline-flex; }

.empty__text { font-size: var(--fs-base); }
.empty--sm { padding: var(--space-6) var(--space-4); }
.empty--sm .empty__icon { width: 40px; height: 40px; }

/* --- Filtre chip'leri --------------------------------------------- */
.filter-chips { flex-wrap: wrap; align-items: center; }
.filter-chip__x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--c-text-faint); }
.filter-chip__x:hover { background: var(--c-danger-soft); color: var(--c-danger); text-decoration: none; }

/* --- Aranabilir seçim kutusu (combobox) --------------------------- */
.ss { position: relative; }
.ss__control {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--h-control);
  padding: 0 34px 0 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r);
  background: var(--c-surface); cursor: pointer; text-align: left; font-size: var(--fs-base);
}
.ss__control:hover { border-color: #A9BBD4; }
.ss.is-open .ss__control, .ss__control:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(77,128,238,.16); }
.ss__control.is-invalid { border-color: var(--c-danger); }
.ss__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss__value--placeholder { color: var(--c-text-faint); }
.ss__caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--c-text-faint); pointer-events: none; }
.ss__clear { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--c-text-faint); padding: 2px; }
.ss__clear:hover { color: var(--c-danger); }
.ss__panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 6px; max-height: 320px; display: flex; flex-direction: column;
}
.ss__search { margin-bottom: 6px; }
.ss__list { overflow-y: auto; flex: 1; }
.ss__option {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%; padding: 8px 10px;
  border: 0; background: transparent; border-radius: var(--r-sm); text-align: left; font-size: var(--fs-base); color: var(--c-text);
}
.ss__option:hover, .ss__option.is-active { background: var(--c-primary-soft); }
.ss__option.is-selected { font-weight: 600; color: var(--c-primary); }
.ss__option small { color: var(--c-text-muted); margin-left: auto; white-space: nowrap; }
.ss__empty { padding: 16px; text-align: center; color: var(--c-text-muted); font-size: 13px; }
.ss__footer { border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 6px; }
.ss__group { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-muted); }

/* --- Çoklu seçim (etiketler) -------------------------------------- */
.multi { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: var(--h-control);
  padding: 4px 8px; border: 1px solid var(--c-border-strong); border-radius: var(--r); background: var(--c-surface); }
.multi:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(77,128,238,.16); }
.multi__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px;
  border-radius: var(--r-full); background: var(--c-surface-3); font-size: var(--fs-sm); }
.multi__chip button { border: 0; background: transparent; color: var(--c-text-faint); padding: 0 2px; line-height: 1; }
.multi__chip button:hover { color: var(--c-danger); }
.multi__input { border: 0; outline: 0; flex: 1; min-width: 90px; height: 30px; background: transparent; }

/* --- Form ek ------------------------------------------------------ */
.form-section { margin-bottom: var(--space-5); }
.form-section__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--space-3); }
.form-section__title::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-primary); }
.label .ml-auto { margin-left: auto; font-weight: 400; }
.label a { font-size: var(--fs-sm); }
.field--inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.hint-icon { cursor: help; }
.readonly-value { display: flex; align-items: center; height: var(--h-control); padding: 0 12px;
  background: var(--c-surface-3); border: 1px solid var(--c-border); border-radius: var(--r); color: var(--c-text-muted); }
.link-btn { border: 0; background: transparent; color: var(--c-primary); padding: 0; text-decoration: underline; }
.repeat-row { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--c-surface); }
.repeat-row__remove { position: absolute; top: 8px; right: 8px; }
.repeat-row__title { font-weight: 600; margin-bottom: var(--space-3); }

/* --- Sihirbaz ----------------------------------------------------- */
.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.steps { flex-wrap: wrap; }
.step__index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full);
  background: rgba(255,255,255,.25); font-size: 12px; }
.step:not(.is-active):not(.is-completed) .step__index { background: var(--c-border); color: var(--c-text-muted); }
.step__label { font-size: 13px; }

/* --- Fatura satır düzenleyici -------------------------------------- */
.line-editor__optional { display: none; }
.line-editor__optional.is-on { display: flex; }
.line-total-bar { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;
  background: var(--c-primary-softer); border: 1px solid var(--c-primary-border); border-radius: var(--r);
  padding: 10px var(--space-4); margin-top: var(--space-3); }
.line-total-bar__item { font-size: 13px; }
.line-total-bar__item strong { display: block; font-size: var(--fs-lg); color: var(--c-primary); }
.totals__row--sub { color: var(--c-text-muted); font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.totals__row--negative span:last-child { color: var(--c-danger); }

/* --- Detay ekranı ------------------------------------------------- */
.detail-head__title { line-height: 1.2; }
.info-list__value { word-break: break-word; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tabs--sub { border-bottom: 0; margin-bottom: var(--space-3); }
.tabs--sub .tab { padding: 8px var(--space-3); font-size: 13px; }
.summary-list__row--total { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { position: relative; padding: 0 0 var(--space-5) var(--space-6); border-left: 2px solid var(--c-border); }
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--c-primary); border: 2px solid var(--c-surface); }
.timeline__title { font-weight: 600; }
.timeline__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- Notlar / dosyalar --------------------------------------------- */
.note-list, .file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.note-item, .file-item { display: flex; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-surface-2); }
.note-item__body { flex: 1; min-width: 0; }
.note-item__body p { margin: 4px 0 0; }
.note-item__meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 6px; }
.note-item__actions, .file-item__actions { display: flex; gap: 4px; align-items: flex-start; }
.file-item { align-items: center; }
.file-item__body { flex: 1; min-width: 0; }
.file-item__icon { color: var(--c-text-muted); }
.dropzone { border: 2px dashed var(--c-border-strong); border-radius: var(--r-md); padding: var(--space-8);
  text-align: center; color: var(--c-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.dropzone.is-dragover { border-color: var(--c-primary); background: var(--c-primary-softer); color: var(--c-primary); }

/* --- Kartlar ------------------------------------------------------ */
.card--flush { box-shadow: none; }
.card__body--tight { padding: var(--space-4); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.mini-stat { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); background: var(--c-surface); }
.mini-stat__label { font-size: var(--fs-sm); color: var(--c-text-muted); }
.mini-stat__value { font-size: var(--fs-xl); font-weight: 700; margin-top: 2px; }

/* --- Gider tipi kartları ------------------------------------------ */
.expense-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.expense-card__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.expense-card__item { display: flex; align-items: center; gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.expense-card__item:last-child { border-bottom: 0; }
.expense-card__item .icon-btn { margin-left: auto; }

/* --- Kredi kartı görseli ------------------------------------------ */
.credit-card-visual {
  background: linear-gradient(135deg, #2C6FD8, #1E3A8A); color: #fff; border-radius: var(--r-lg);
  padding: var(--space-5); min-height: 168px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-md); max-width: 340px;
}
.credit-card-visual__number { font-size: var(--fs-xl); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.credit-card-visual__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.progress { height: 8px; border-radius: var(--r-full); background: var(--c-surface-3); overflow: hidden; }
.progress__bar { height: 100%; background: var(--c-primary); border-radius: var(--r-full); }
.progress__bar--danger { background: var(--c-danger); }
.progress__bar--warning { background: var(--c-warning); }

/* --- Grafikler (bağımlılıksız SVG) -------------------------------- */
.chart { width: 100%; height: 220px; }
.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--c-text-muted); margin-top: var(--space-3); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; }
.chart-tooltip { position: absolute; background: #1E293B; color: #fff; font-size: 12px; padding: 6px 8px;
  border-radius: var(--r-sm); pointer-events: none; white-space: nowrap; z-index: 5; }
.chart-wrap { position: relative; }
.donut-legend { display: flex; flex-direction: column; gap: var(--space-2); }
.donut-legend__row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.donut-legend__row strong { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- Modal ek ------------------------------------------------------ */
.modal-backdrop[hidden] { display: none; }
.modal__steps { display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.modal__step { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--c-surface-3); }
.modal__step.is-active { background: var(--c-primary); }
.modal__step.is-done { background: var(--c-success); }
.modal-loading { padding: var(--space-8); text-align: center; color: var(--c-text-muted); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Toast ek ------------------------------------------------------ */
.toast__body { flex: 1; }
.toast__close { border: 0; background: transparent; color: var(--c-text-faint); padding: 0 2px; }
.toast--info { border-left-color: var(--c-primary); }

/* --- Yazdırma ------------------------------------------------------ */
.print-toolbar { display: flex; gap: var(--space-2); padding: var(--space-4); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 10; }
.print-body { background: var(--c-surface-3); }
.print-sheet { background: #fff; margin: var(--space-5) auto; padding: 18mm 14mm; width: 210mm; min-height: 297mm;
  box-shadow: var(--sh-md); color: #1E293B; }
.print-sheet--landscape { width: 297mm; min-height: 210mm; }

/* --- Yardımcılar ---------------------------------------------------- */
.gap-5 { gap: var(--space-5); }
.mt-3 { margin-top: var(--space-3); } .mt-6 { margin-top: var(--space-6); }
.mb-3 { margin-bottom: var(--space-3); } .mb-6 { margin-bottom: var(--space-6); }
.p-0 { padding: 0 !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.w-auto { width: auto; }
.text-warning { color: var(--c-warning-text); }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.border-t { border-top: 1px solid var(--c-border); }
.bg-soft { background: var(--c-surface-2); }
.rounded { border-radius: var(--r); }
.list-reset { list-style: none; margin: 0; padding: 0; }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
}
@media (max-width: 768px) {
  .sidebar-toggle { display: grid; }
  .expense-cards { grid-template-columns: 1fr; }
  .detail-head__actions { width: 100%; }
  .detail-head__actions .btn { flex: 1; }
  .table-toolbar { flex-direction: column; align-items: stretch; }
  /* .search-combo İÇİNDEKİ select/input hariç — combo kendi oranını yönetir,
     ikisi birden %100 olunca arama kutusu sıfır genişliğe düşüyordu. */
  .table-toolbar > .input,
  .table-toolbar > .select,
  .table-toolbar > form > .input:not(.search-combo .input),
  .table-toolbar .dropdown { width: 100%; }
  .table-toolbar .search-combo { width: 100%; }
  .table-toolbar .search-combo .select { width: 120px; flex: 0 0 120px; }
  .table-toolbar .search-combo .input { width: auto; flex: 1 1 auto; min-width: 0; }
  .fab-wrap { right: 16px; bottom: 16px; }
  .print-sheet { width: auto; padding: var(--space-5); }
  .modal { max-height: 92vh; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  /* --- Topbar mobilde taşmasın ---------------------------------------
     Firma butonu `white-space:nowrap` metin taşıdığı için flex içinde
     küçülemiyordu; 375px'te topbar 450px'e çıkıp sayfayı yana kaydırıyordu. */
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar__company { min-width: 0; flex: 0 1 auto; overflow: hidden; padding: 0 var(--space-2); }
  .topbar__company .truncate { max-width: 34vw; }
  .topbar__actions { gap: 0; flex: 0 0 auto; }
  .icon-btn { width: 32px; height: 32px; }

  /* Mobil menü: sidebar tam genişlikte değil, okunur bir panel olarak açılır */
  .sidebar { width: min(280px, 84vw); flex-basis: min(280px, 84vw); box-shadow: var(--sh-lg); }
  .sidebar__collapse { display: none; }

  /* Sayfa başlığı aksiyonları alt alta sığsın */
  .page-head { gap: var(--space-3); }
  .page-head__actions { flex-wrap: wrap; }
  .page-head__actions .btn { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; }

  /* Uzun etiketler butonu taşırmasın */
  .btn { min-width: 0; }
  .btn > span, .btn { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .steps { gap: 4px; }
  .step { min-width: 0; flex: 1; padding: 10px 8px; }
  .step__label { font-size: 11px; }

  /* 375px: yeni bileşenler tek sütuna iner, hiçbir şey yatay taşmaz */
  .modal-backdrop { padding: var(--space-3); }
  .report-cards { grid-template-columns: 1fr; }
  .report-totals { gap: var(--space-2); }
  .report-totals__item { min-width: 0; flex: 1 1 45%; }
  .report-filter__foot { flex-direction: column-reverse; }
  .report-filter__foot .btn { width: 100%; }
  .check-list__item { flex-wrap: wrap; }
  .check-list__amount { width: 100%; text-align: right; }
  .setting-row { flex-wrap: wrap; }
  .setting-row__title { flex: 1 1 100%; }
  .switch-list__row { gap: var(--space-2); }
  .chips { gap: 6px; }
  .chip { padding: 0 10px; font-size: var(--fs-xs); }
  /* Uzun etiketli aksiyonlar (ör. "Satış İade Faturası Oluştur") 375px'te
     yarım genişliğe sığmıyordu; tek sütuna iniyorlar. */
  .page-head__actions .btn { flex: 1 1 100%; }
  .drawer { width: 100%; }
  .drawer__foot { flex-wrap: wrap; }
  .drawer__total { flex: 1 1 100%; margin: 0 0 var(--space-2); }
  .detail-head__title { font-size: var(--fs-xl); }
  .info-list__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .info-list__value { text-align: left; }
}

/* --- Koyu tema düzeltmeleri ---------------------------------------- */
[data-theme="dark"] .sidebar__logo { background: linear-gradient(135deg,#4D80EE,#1E3A8A); }
[data-theme="dark"] .credit-card-visual { background: linear-gradient(135deg,#1E3A8A,#0F172A); }
[data-theme="dark"] .print-sheet { background: var(--c-surface); color: var(--c-text); }
[data-theme="dark"] .auth__hero { background: #17294B; }
[data-theme="dark"] .dropdown__menu--warning { background: #3A2E12; border-color: #5A4A1E; }
[data-theme="dark"] .dropdown__menu--success { background: #14352A; border-color: #1F5A40; }

/* --- Modül sekmeleri buton olarak kullanıldığında ---------------- */
button.module-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
button.module-tab:hover { color: var(--c-text); }
.tabs.hidden { display: none !important; }

/* --- Çoklu seçim listesi (bordro, mahsup vb.) --------------------- */
.check-list { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.check-list__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4);
  border-bottom: 1px solid var(--c-border); cursor: pointer; }
.check-list__item:last-child { border-bottom: 0; }
.check-list__item:hover { background: var(--c-bg); }
.check-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.check-list__title { font-weight: 600; font-size: var(--fs-sm); }
.check-list__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.check-list__amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.drawer__total { margin-right: auto; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- Rapor ekranları ---------------------------------------------- */
.report-filter { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  margin-bottom: var(--space-4); overflow: hidden; }
.report-filter__head { display: flex; align-items: center; gap: var(--space-2); padding: 12px var(--space-4);
  font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.report-filter__head::-webkit-details-marker { display: none; }
.report-filter__caret { margin-left: auto; transition: transform .18s ease; }
.report-filter[open] .report-filter__caret { transform: rotate(180deg); }
.report-filter__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--c-border); padding-top: var(--space-4); }
.report-filter__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

.report-totals { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 12px var(--space-4);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--space-4); }
.report-totals__item { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.report-totals__label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .3px; }
.report-totals__value { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.report-totals__item--accent .report-totals__value { color: var(--c-primary); }

.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.report-card { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.report-card:hover { border-color: var(--c-primary); box-shadow: var(--sh-md); transform: translateY(-1px); }
.report-card__icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r);
  background: var(--c-primary-soft); color: var(--c-primary); }
.report-card__body { flex: 1; min-width: 0; }
.report-card__title { font-weight: 600; margin-bottom: 2px; }
.report-card__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45; }
.report-card__go { align-self: center; color: var(--c-text-faint); }
.report-section { margin-bottom: var(--space-6); }
.report-section__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-3); }

@media print {
  .report-filter, .table-toolbar { display: none !important; }
  .report-totals { break-inside: avoid; }
}

/* --- Kategori chip'leri (rapor merkezi, tanım kartları) ----------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { height: 30px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--r-full);
  background: var(--c-surface); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* --- Ayarlar ekranları -------------------------------------------- */
.icon-btn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.switch-list { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.switch-list__row { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4);
  border-bottom: 1px solid var(--c-border); cursor: pointer; }
.switch-list__row:last-child { border-bottom: 0; }
.switch-list__row:hover { background: var(--c-bg); }
.switch-list__label { flex: 1; font-size: var(--fs-base); }
.logo-box { display: grid; place-items: center; min-height: 140px; padding: var(--space-4);
  border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg); }
.logo-box img { max-height: 110px; max-width: 100%; object-fit: contain; }
.logo-box__empty { display: grid; place-items: center; gap: var(--space-2); color: var(--c-text-faint); font-size: var(--fs-sm); }

.setting-list { display: flex; flex-direction: column; gap: var(--space-2); }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-full); vertical-align: -1px; }
.perm-tree { max-height: 420px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--space-3); }
.perm-tree__module { margin-bottom: var(--space-3); }
.perm-tree__module > .check { font-weight: 700; }
.perm-tree__entity { margin: 6px 0 6px var(--space-5); }
.perm-tree__entity > .check { font-weight: 600; }
.perm-tree__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: var(--space-5); }
.perm-tree__actions .check { font-size: var(--fs-sm); color: var(--c-text-muted); }
.dropdown__menu--end { right: 0; left: auto; }
.setting-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3);
  border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-surface); }
.setting-row__title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-row__sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { width: 28px; height: 28px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; }
.swatch[data-active] { border-color: var(--c-text); box-shadow: 0 0 0 2px var(--c-surface) inset; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm);
  background: var(--c-surface-3); padding: 2px 6px; border-radius: var(--r-sm); }
.fs-xs { font-size: var(--fs-xs); }
.avatar--xl { width: 110px; height: 110px; font-size: 40px; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }

/* --- Tarih seçici (bağımlılıksız) ---------------------------------- */
.date-field .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.datepicker {
  position: absolute; z-index: var(--z-modal); width: 268px; padding: var(--space-3);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); font-size: var(--fs-sm);
}
.datepicker__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.datepicker__title { flex: 1; text-align: center; font-weight: 700; }
.datepicker__nav {
  width: 28px; height: 28px; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text-muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.datepicker__nav:hover { background: var(--c-surface-3); color: var(--c-text); }
.datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker__dow { display: grid; place-items: center; height: 26px; font-size: var(--fs-xs);
  font-weight: 700; color: var(--c-text-faint); }
.datepicker__day {
  height: 32px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--c-text); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums;
}
.datepicker__day:hover:not(:disabled) { background: var(--c-primary-soft); color: var(--c-primary); }
.datepicker__day:disabled { opacity: .35; cursor: default; }
.datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.datepicker__day.is-selected { background: var(--c-primary); color: #fff; font-weight: 700; }
.datepicker__foot { display: flex; justify-content: space-between; margin-top: var(--space-2);
  padding-top: var(--space-2); border-top: 1px solid var(--c-border); }

/* --- Mobil: yatay kayma ve iOS otomatik yakınlaştırma -----------------
   1) Hiçbir ekran yana kaymaz: gövde yatay taşmayı keser, kapsayıcılar
      flex/grid içinde küçülebilsin diye `min-width:0` alır.
   2) iOS, odaklanılan input'un yazı boyutu 16px'in ALTINDAysa sayfayı
      otomatik yakınlaştırır. Mobilde form kontrollerini 16px yaparak bunu
      engelliyoruz — masaüstünde tasarım 14px olarak kalır.
   ------------------------------------------------------------------- */
/* Yatay kaymayı YALNIZ kök öğede kes.
   .app veya .main üzerinde overflow kullanmak, içlerindeki position:fixed
   (FAB) öğeleri KIRPAR ve position:sticky (sidebar/topbar) referansını
   bozar. Kökte kesmek bu iki yan etkiyi yaratmaz. */
html { overflow-x: hidden; }
body { max-width: 100%; overscroll-behavior-x: none; }
.app  { max-width: 100%; }
.main, .page { min-width: 0; max-width: 100%; }

/* Geniş tablolar KENDİ kapsayıcısında kayar; kart asla sayfayı taşırmaz.
   .table-scroll'a min-width:0 verilmezse tablo, kartı kendi genişliğine
   zorluyor ve son kolon (Bakiye) ekranın dışında kalıyordu. */
.table-wrap   { min-width: 0; max-width: 100%; }
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.card         { min-width: 0; max-width: 100%; }

/* FAB sayfanın son satırını/sayfalamayı kapatmasın */
.page { padding-bottom: calc(var(--space-5) + 76px); }

@media (max-width: 768px) {
  .input, .select, .textarea { font-size: 16px; }
  .input--sm, .select--sm { font-size: 16px; }

  /* Tablolar yalnız kendi kapsayıcısında kayar, sayfa kaymaz */
  .table-wrap, .card, .kpi, .form-grid, .layout-2col { min-width: 0; max-width: 100%; }
  .table-scroll { -webkit-overflow-scrolling: touch; }

  /* Dokunma hedefleri en az 40px */
  .dropdown__item, .nav-link, .module-tab { min-height: 40px; }

  /* Notch/gesture bar güvenli alanı */
  .page { padding-left: max(var(--space-4), env(safe-area-inset-left));
          padding-right: max(var(--space-4), env(safe-area-inset-right)); }
  .fab-wrap { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Mobil menü açıkken arka plan kaymasın */
body.is-sidebar-open { overflow: hidden; }

/* --- Arama combo (alan seçici + metin + buton tek çerçevede) ---------
   KolayBi'de bunlar tek bileşen gibi bitişik durur; bizde üç ayrı kutuydu. */
.search-combo {
  display: flex; align-items: stretch; height: 34px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r);
  background: var(--c-surface); overflow: hidden; min-width: 0;
}
.search-combo:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(77,128,238,.16); }
.search-combo .select,
.search-combo .input {
  border: 0; box-shadow: none; height: 100%; border-radius: 0; background: transparent;
}
.search-combo .select {
  flex: 0 0 auto; width: 130px; border-right: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--fs-sm);
}
.search-combo .input { flex: 1 1 auto; min-width: 0; }
.search-combo .input:focus { box-shadow: none; }
.search-combo__btn {
  flex: 0 0 34px; border: 0; background: transparent; color: var(--c-text-faint);
  display: grid; place-items: center; cursor: pointer;
}
.search-combo__btn:hover { color: var(--c-primary); }

@media (max-width: 768px) {
  .search-combo { width: 100%; height: 41px; }
  .search-combo .select { width: 108px; font-size: 16px; }
}

/* Liste hücresinde metin + yeşil tik (KolayBi: "Aktif ✓") */
.cell-check { display: inline-flex; align-items: center; gap: 4px; }
/* Tablo satırındaki ünvan: link rengi değil, koyu ve kalın (satır zaten tıklanabilir) */
.table__row-link { color: inherit; font-weight: 600; text-decoration: none; }
.table__row-link:hover { color: var(--c-primary); text-decoration: none; }

/* --- Tablo satır yüksekliği (madde 15) -------------------------------
   Bakiye hücresi "tutar + rozet" iki satır olduğu için satır 68.5px'e
   çıkıyordu; KolayBi ~63px. Rozet küçültülüp satır aralığı sıkıştırıldı. */
.table tbody td { line-height: 1.3; }
.cell-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cell-stack__main { line-height: 1.25; }
.badge--xs { height: 16px; padding: 0 6px; font-size: 10px; line-height: 16px; }
.table .num .cell-stack { align-items: flex-end; }

/* --- Klavye erişilebilirliği ----------------------------------------
   Odak halkası her etkileşimli öğede net görünür; fare ile tıklamada
   çıkmaz (:focus-visible). Koyu temada da yeterli kontrast taşır. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.nav-link:focus-visible, .tab:focus-visible, .module-tab:focus-visible,
.dropdown__item:focus-visible, .chip:focus-visible, .datepicker__day:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(77,128,238,.22);
  border-radius: var(--r-sm);
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .input:focus-visible,
[data-theme="dark"] .select:focus-visible {
  outline-color: #93B4F5;
  box-shadow: 0 0 0 4px rgba(147,180,245,.28);
}

/* --- Koyu tema: sabit hex zeminli bileşenler -------------------------
   .alert--* varyantları açık tema için sabit hex zemin kullanıyor;
   koyu temada bunlar beyaz kalıp göz alıyordu. */
[data-theme="dark"] .alert--warning { background: var(--c-warning-soft); }
[data-theme="dark"] .alert--danger  { background: var(--c-danger-soft); }
[data-theme="dark"] .alert--success { background: var(--c-success-soft); }
[data-theme="dark"] .alert          { background: var(--c-surface-2); }
[data-theme="dark"] .auth__hero     { background: #17294B; }
[data-theme="dark"] .table thead th { background: var(--c-surface-2); }
[data-theme="dark"] .search-combo .select { background: var(--c-surface-2); }
[data-theme="dark"] .datepicker     { background: var(--c-surface); }
[data-theme="dark"] .command-palette__results { background: var(--c-surface); }