/* Para - B1 arayuz stili (UX_UI_SPEC 1/2/7).
   Renk tokenlari SPEC 1.2'deki degerlerdir; finansal ekranlarda baska
   vurgu rengi kullanilmaz. Dekoratif gradyan/grafik/kart ordusu yoktur. */

:root {
  /* FAZ E-5a: yerel form/datepicker/scrollbar denetimleri temaya uyar. */
  color-scheme: light;

  /* --- Yuzey / metin --- */
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --text: #0F172A;
  --text-secondary: #475569;

  /* --- Durum renkleri (metin ve 1px rozet siniri) --- */
  --success: #047857;
  --warning: #92400E;
  --error: #B91C1C;

  /* --- Durum yuzeyleri (rozet/banner arka plani) --- */
  --surface-neutral: #F1F5F9;
  --surface-success: #ECFDF5;
  --surface-warning: #FFFBEB;
  --surface-danger: #FEF2F2;
  --border-success-soft: #A7F3D0;
  --banner-danger-border: #EF4444;

  /* --- Bilgi blogu (akis seridi notu) --- */
  --info: #1E40AF;
  --info-bg: #EFF6FF;
  --info-border: #3B82F6;

  /* --- Katman --- */
  --overlay: rgba(15, 23, 42, 0.45);

  /* --- PWA senkronu: JS bu degeri okuyup <meta name="theme-color"> yazar;
         manifest.webmanifest theme_color ile ayni olmalidir. --- */
  --theme-color: #FFFFFF;

  --radius: 6px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* HTML hidden attribute'unun yazar CSS'i tarafindan ezilmesini engelleyen
   global guvenlik kurali (UA [hidden] kurali herhangi bir author display
   bildirimiyle - orn. .field-hint display:block - ezilebilir). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* --- Erisilebilirlik yardimcilari --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--text);
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 8px;
}

:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Ust bar / nav --- */
.app-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.app-header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
}

.app-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 10px 4px;
  display: inline-block;
}

.app-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--text);
}

.app-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-user-name {
  color: var(--text-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* --- Yerlesim --- */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

.container:focus {
  outline: none;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

h1 {
  font-size: 22px;
  margin: 12px 0;
}

h2 {
  font-size: 17px;
  margin: 20px 0 8px;
}

/* --- Butonlar --- */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--text);
  font: inherit;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--text);
  background: var(--card);
}

.btn-primary {
  background: var(--text);
  color: var(--card);
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
}

.btn-error {
  background: var(--error);
  border-color: var(--error);
  color: var(--card);
}

.btn-link {
  border: none;
  background: none;
  color: var(--text-secondary);
  text-decoration: underline;
  min-height: 44px;
  padding: 10px 8px;
}

.btn-sm {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* --- Flash / live bolge --- */
.flash {
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 8px 0;
  overflow-wrap: anywhere;
}

.flash-success { border-left-color: var(--success); color: var(--success); }
.flash-error { border-left-color: var(--error); color: var(--error); }
.flash-info { border-left-color: var(--text-secondary); color: var(--text-secondary); }

/* --- Filtre cubugu --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: end;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0 16px;
}

.filter-bar .filter-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 180px;
}

.filter-bar .filter-actions {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: end;
}

/* --- Formlar --- */
.stack-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  max-width: 560px;
}

.inline-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: end;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.inline-add-form .form-field {
  flex: 1 1 160px;
}

.form-field {
  margin: 0 0 14px;
  min-width: 0;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 16px; /* iOS odak zoom engeli */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 44px;
  scroll-margin-bottom: 96px; /* sticky bar odaagi gizlemez */
}

.form-field textarea {
  min-height: 88px;
  resize: vertical;
}

.field-hint {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.req {
  color: var(--error);
}

.field-error {
  color: var(--error);
  font-size: 14px;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.backdate-confirm.hidden,
.hidden {
  display: none;
}

.warning-box {
  border: 1px solid var(--warning);
  border-left-width: 4px;
  color: var(--warning);
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.inline-form {
  display: inline-block;
  margin: 0;
}

.auth-shell {
  max-width: 560px;
  margin: 48px auto 0;
}

.subnav,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.subnav {
  margin: 0 0 16px;
}

.subnav a {
  color: var(--text-secondary);
  padding: 8px 0;
}

.subnav a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

.action-row input,
.action-row select {
  min-height: 36px;
  max-width: 180px;
  font: inherit;
}

/* --- Hata ozeti --- */
.error-summary {
  border: 1px solid var(--error);
  border-left-width: 4px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0;
}

.error-summary-title {
  margin: 0 0 6px;
  color: var(--error);
}

.error-summary ul {
  margin: 0;
  padding-left: 20px;
}

.error-summary a {
  color: var(--error);
  overflow-wrap: anywhere;
}

/* --- Ozet seridi (kaynak lot) --- */
.summary-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0 16px;
  max-width: 720px;
}

.summary-line {
  margin: 0 0 8px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.summary-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}

.summary-figures div {
  min-width: 0;
}

.summary-figures dt {
  font-size: 13px;
  color: var(--text-secondary);
}

.summary-figures dd {
  margin: 0;
}

.detail-list {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 12px 16px;
  max-width: 640px;
}

.detail-list div {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  min-width: 0;
}

.detail-list dt {
  flex: 0 0 140px;
  color: var(--text-secondary);
}

.detail-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Tablolar --- */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto; /* genis icerik icin kaydirma bolgesi; body tasirilmasi yok */
  margin-top: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  min-width: 0;
}

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.amount {
  font-variant-numeric: tabular-nums;
}

.amount-strong {
  font-weight: 700;
}

.cur {
  color: var(--text-secondary);
  font-size: 12px;
}

.ref {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cell-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cell-ref .cell-date {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.cell-actions {
  white-space: normal;
}

.cell-actions .btn {
  margin: 2px 4px 2px 0;
}

/* Lot genisletme alani: mevcut .lineage desenini kullanir; hucre icinde tasirilmaz. */
.lot-records {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.lot-records li {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.lot-records li .badge {
  margin-left: 4px;
}

/* Audit günlüğü eski/yeni JSON görüntüleme (salt-okunur, kaydırılabilir) */
.audit-detail summary {
  cursor: pointer;
  color: var(--text-secondary);
}

.audit-json-label {
  margin: 6px 0 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.audit-json {
  margin: 0 0 8px;
  padding: 8px;
  max-height: 240px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre;
  overflow-wrap: normal;
}

/* Bildirim geçmişi: batch satırı içinde alıcı bazlı attempt detay listesi */
.notification-attempts {
  margin: 4px 0 0;
  padding-left: 1.1rem;
  font-size: 13px;
}

.notification-attempts li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--text-secondary);
  font-size: 13px;
  display: inline-block;
  overflow-wrap: anywhere;
}

/* --- Rozetler: acik zemin + koyu metin + 1px sinir + durum kelimesi --- */
.badge {
  display: inline-block;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-muted {
  background: var(--surface-neutral);
  border-color: var(--border);
  color: var(--text-secondary);
}

.badge-success {
  background: var(--surface-success);
  border-color: var(--success);
  color: var(--success);
}

.badge-warning {
  background: var(--surface-warning);
  border-color: var(--warning);
  color: var(--warning);
}

.badge-error {
  background: var(--surface-danger);
  border-color: var(--error);
  color: var(--error);
}

/* --- Lineage --- */
.lineage {
  margin-top: 4px;
}

.lineage-line {
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.lineage-full {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* --- Modal --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.modal-head h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-error {
  color: var(--error);
  overflow-wrap: anywhere;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* --- Onay metni / bos durum --- */
.confirm-text {
  max-width: 640px;
  overflow-wrap: anywhere;
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  padding: 24px 16px;
  text-align: center;
  background: var(--card);
  overflow-wrap: anywhere;
}

/* --- B1 lot listesi sayfalama --- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
}

.pagination-info {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.pagination-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pagination-disabled {
  color: var(--text-secondary);
  opacity: 0.6;
  font-size: 14px;
  min-height: 36px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
}

/* FAZ E-1 onarim Akis B: bulunulan sayfa DEVRE DISI bir kontrol degildir;
   konum gostergesidir. Onceki/Sonraki `.pagination-disabled` kalir.
   Ton `.btn-primary` ile ayni token ciftini kullanir (yeni token yok). */
.pagination-current {
  background: var(--text);
  border-color: var(--text);
  color: var(--card);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-height: 36px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
}

.rate-preview strong {
  font-variant-numeric: tabular-nums;
}

/* --- B2: patron ozeti + raporlar (SPEC 3.2 defter tipografi) --- */
.preset-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  min-width: 0;
}

.preset-links a {
  display: inline-block;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.preset-links a[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
  border-color: var(--text);
}

.report-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0;
  max-width: 720px;
  min-width: 0;
}

.net-line {
  margin: 0;
}

.net-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

/* SPEC 3.2: "Kalan Net" 28px semibold tabular-nums */
.net-amount {
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.net-cur {
  color: var(--text-secondary);
  font-size: 16px;
  margin-left: 4px;
}

/* SPEC 3.2: ikincil satirlar 13px regular */
.secondary-line {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.secondary-line .amount {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* SPEC 3.2: FX seridi 13px, ayri operasyonel blok */
.fx-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13px;
  max-width: 720px;
  min-width: 0;
}

.fx-strip h2 {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  flex-basis: 100%;
  min-width: 0;
}

.fx-item {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fx-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

.fx-item .amount {
  font-variant-numeric: tabular-nums;
}

.footnote {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.as-of-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.history-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 16px 0;
  overflow-wrap: anywhere;
}

.breakdown-cur {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 12px 0 4px;
}

.see-all {
  margin: 12px 0 0;
}

.filter-field-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.filter-field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* --- Mobil: tablo -> islem karti donusumu (<=768px) --- */
@media (max-width: 768px) {
  .container {
    padding: 12px 16px 40px;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 12px 0;
    padding: 8px 0;
  }

  .data-table td {
    border-bottom: none;
    padding: 6px 12px;
  }

  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }

  .data-table td.num {
    text-align: left;
  }

  .cell-actions .btn {
    margin: 4px 4px 4px 0;
  }

  /* 320px: aksiyon butonlari alt alta tam genislik */
  .form-actions,
  .modal-actions,
  .filter-bar .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* FX seridi mobilde dikey dizilir (yan yana sikistirma yok) */
  .fx-strip {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions .btn,
  .modal-actions .btn {
    width: 100%;
  }

  /* Sticky action bar: safe-area padding tasiir; icerigi gizlemez.
     Baglanti-donus bildirimi (flash-region) sticky'nin ustunde kalir. */
  .stack-form .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--card);
    margin: 16px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }
}

/* --- Dar ekran guvenligi --- */
@media (max-width: 360px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .stack-form,
  .summary-strip,
  .detail-list,
  .report-block,
  .fx-strip {
    max-width: 100%;
  }

  .detail-list div {
    flex-direction: column;
    gap: 0;
  }
}

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skip-link {
    transition: none;
  }
}

/* --- B3: Export indirme butonlari ve durum bolgesi --- */
.export-status {
  min-height: 1.2em;
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.btn.is-busy,
a.btn.is-busy {
  pointer-events: none;
  opacity: 0.6;
}

/* Masaustunde yalniz sag-ust buton; mobil buton gizlidir (>768px). */
.pdf-download-mobile {
  display: none;
}

@media (max-width: 768px) {
  .pdf-download-mobile {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin: 8px 0 16px;
  }
}

/* --- Hata sayfaları ve semantik bildirimler --- */
.error-page {
  max-width: 600px;
  margin: 48px auto;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.error-page h1 {
  margin-top: 0;
  font-size: 24px;
}

.error-page-message {
  margin: 16px 0 24px;
  color: var(--text-secondary);
  font-size: 16px;
}

.period-sub {
  font-size: 14px;
}

.see-all {
  margin: 12px 0 0;
}

.filter-field-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.filter-field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* --- Mobil: tablo -> islem karti donusumu (<=768px) --- */
@media (max-width: 768px) {
  .container {
    padding: 12px 16px 40px;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 12px 0;
    padding: 8px 0;
  }

  .data-table td {
    border-bottom: none;
    padding: 6px 12px;
  }

  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }

  .data-table td.num {
    text-align: left;
  }

  .cell-actions .btn {
    margin: 4px 4px 4px 0;
  }

  /* 320px: aksiyon butonlari alt alta tam genislik */
  .form-actions,
  .modal-actions,
  .filter-bar .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* FX seridi mobilde dikey dizilir (yan yana sikistirma yok) */
  .fx-strip {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions .btn,
  .modal-actions .btn {
    width: 100%;
  }

  /* Sticky action bar: safe-area padding tasiir; icerigi gizlemez.
     Baglanti-donus bildirimi (flash-region) sticky'nin ustunde kalir. */
  .stack-form .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--card);
    margin: 16px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }
}

/* --- Dar ekran guvenligi --- */
@media (max-width: 360px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .stack-form,
  .summary-strip,
  .detail-list,
  .report-block,
  .fx-strip {
    max-width: 100%;
  }

  .detail-list div {
    flex-direction: column;
    gap: 0;
  }
}

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skip-link {
    transition: none;
  }
}

/* --- B3: Export indirme butonlari ve durum bolgesi --- */
.export-status {
  min-height: 1.2em;
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.btn.is-busy,
a.btn.is-busy {
  pointer-events: none;
  opacity: 0.6;
}

/* Masaustunde yalniz sag-ust buton; mobil buton gizlidir (>768px). */
.pdf-download-mobile {
  display: none;
}

@media (max-width: 768px) {
  .pdf-download-mobile {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin: 8px 0 16px;
  }
}

/* --- Hata sayfaları ve semantik bildirimler --- */
.error-page {
  max-width: 600px;
  margin: 48px auto;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.error-page h1 {
  margin-top: 0;
  font-size: 24px;
}

.error-page-message {
  margin: 16px 0 24px;
  color: var(--text-secondary);
  font-size: 16px;
}

.period-sub {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-secondary);
  margin-left: 6px;
}

.period-flow-note {
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: var(--info-bg);
  border-left: 3px solid var(--info-border);
  border-radius: var(--radius);
  color: var(--info);
  font-size: 13px;
  line-height: 1.5;
}

/* --- C1: Operasyonel Ayarlar ve Bildirim Yönetimi --- */
.settings-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.form-row .flex-1 {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.form-row .flex-2 {
  flex: 2 1 320px;
  margin-bottom: 0;
}

.badge-neutral {
  background: var(--surface-neutral);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.badge-active {
  background: var(--surface-success);
  color: var(--success);
  border: 1px solid var(--border-success-soft);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 13px;
  min-height: 32px;
}

@media (max-width: 600px) {
  .settings-section {
    padding: 16px;
  }
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  .form-row .flex-1,
  .form-row .flex-2 {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* --- PWA Offline Koruma Banneri (FAZ C2) + oturum sonu uyarisi (FAZ E-3)
       FAZ E-5a: yerlesim ortak, ton (renk) ayri token'lara baglidir. --- */
.offline-banner,
.session-banner {
  padding: 10px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow-wrap: anywhere;
}

/* Cevrimdisi: islem yapilamaz -> hata tonu (kirmizi) */
.offline-banner {
  background: var(--surface-danger);
  color: var(--error);
  border-bottom: 2px solid var(--banner-danger-border);
}

/* Oturum sonu uyarisi: veri KAYBI yok, kullaniciya bir eylem onerilir ->
   uyari tonu (amber). E-3 davranisi (DOM uyarisi, sayfa yenilenmez) aynen
   korunur; yalniz gorsel ton ve sinif degisti. */
.session-banner {
  background: var(--surface-warning);
  color: var(--warning);
  border-bottom: 2px solid var(--warning);
}

/* FAZ E-1 onarim Akis B: oturum sonucu (uzatildi / suresi doldu) bannerin
   DISINDA, kalici ve gorunur olarak duyurulur. Banner gizlendiginde icindeki
   metin de kaybolur; bu satir onsiz gorusur onay yoktu. */
.session-status-line {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Ayarlar ekrani: kayitli parola ipucu basari/olumlu durum tonundadir.
   Sabit renk yerine `--success` token'i: koyu temada `--card` uzerinde
   ~7.5:1, acik temada ~5.5:1 (WCAG AA). */
.form-hint-success {
  color: var(--success);
  font-size: 0.85rem;
}


/* =====================================================================
   FAZ E-4 — operator verimlilik UX (C5 onizleme, C6 akis seridi,
   C7 konum satiri, C10 mobil menu). Yeni kurallar yalniz E-4 bilesenleri
   icindir; mevcut tema token'lari ve temel tipografi KORUNUR (koyu tema
   E-5a'da token mimarisiyle baglanacak).
   320px sozlesmesi: sabit genislik yok, `min-width: 0` + `overflow-wrap`
   + `flex-wrap` ile tasma olmaz; yatay tasmayı gizleme kuralı KULLANILMAZ.
   ===================================================================== */

/* --- C5: tutar bicimi onizlemesi --- */
.amount-preview {
  display: block;
  min-height: 20px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.amount-preview:empty {
  min-height: 0;
}

.amount-preview.is-invalid {
  color: var(--error);
  font-weight: 600;
}

/* --- C6: akis seridi --- */
.flow-steps-wrap {
  margin: 0 0 16px;
}

.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flow-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
  color: var(--text-secondary);
}

.flow-step-index {
  font-weight: 700;
  color: var(--text);
}

.flow-step-label {
  overflow-wrap: anywhere;
}

.flow-step-state {
  white-space: nowrap;
}

.flow-step.is-done {
  border-color: var(--success);
}

.flow-step.is-done .flow-step-state {
  color: var(--success);
  font-weight: 600;
}

.flow-step.is-current {
  border-color: var(--text);
  border-width: 2px;
}

.flow-step.is-current .flow-step-state {
  color: var(--text);
  font-weight: 600;
}

/* --- C7: konum satiri (breadcrumb) --- */
.breadcrumb {
  margin: 0 0 12px;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.breadcrumb-list li + li::before {
  content: "\203A";
  color: var(--text-secondary);
}

.breadcrumb-list a {
  color: var(--text-secondary);
}

.breadcrumb-list [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* --- C4: filtre uyarilari --- */
.filter-notice {
  margin: 0 0 4px;
}

.filter-notice:last-child {
  margin-bottom: 0;
}

/* --- C10: mobil menu (gizleme kurali YALNIZ `js-nav` varken) --- */
.nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
  }

  .nav-toggle-bars {
    font-size: 18px;
    line-height: 1;
  }

  /* JS yoksa menü gorunur kalir; yalniz `js-nav` ile katlanir. */
  .js-nav .app-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .js-nav .app-nav.is-open {
    display: flex;
  }

  .js-nav .app-nav a {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
  }

  /* Push butonu ve cikis katlanan menusun disinda: 320px'te de gorunur. */
  .app-header-inner {
    gap: 8px 12px;
  }

  .app-user {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 4px;
  }

  .app-user-name {
    flex-basis: 100%;
  }

  .flow-step,
  .breadcrumb-list li {
    max-width: 100%;
  }
}

/* =====================================================================
   FAZ E-5a / C1 — KOYU TEMA TOKEN MIMARISI

   Oncelik sirasi:
     1) :root[data-theme="dark"]        (kullanici tercihi, kalici)
     2) @media prefers-color-scheme:dark (OS tercihi, varsayilan)
     3) :root                           (acik tema)

   :root data-theme="light" yaziyorsa OS koyu olsa bile acik tema gecerlidir
   (`:not([data-theme="light"])` filtresi). Iki koyu blok BILINCLI olarak ayni
   degerleri bildirir; `tests/test_e5a_theme.py::test_dark_theme_blocks_are_
   identical` esitligi denetler, tek bir blogun guncellenip digerinin
   eskalamesi testi kirar.

   `--theme-color` her iki temada da tanimlidir: `app.js` bu degeri okuyup
   `<meta name="theme-color">` niteligini yazar (PWA/Chrome renk senkronu).
   --theme-color: ise varsayilandir; inline head script'i sayfa acilirken
   meta'yi henuz yazamadigi durum icin acik tema degerini verir.
   ===================================================================== */

/* --- Tema dugmesi (ust bar / giris ekrani) --- */
.theme-toggle {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}

/* --- Koyu tema: ortak yuzey ve durum degerleri --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0F172A;
    --card: #1E293B;
    --border: #334155;
    --text: #F1F5F9;
    --text-secondary: #CBD5E1;

    --success: #34D399;
    --warning: #FBBF24;
    --error: #F87171;

    --surface-neutral: #243348;
    --surface-success: #0C2E24;
    --surface-warning: #332A08;
    --surface-danger: #3A1518;
    --border-success-soft: #14855F;
    --banner-danger-border: #F87171;

    --info: #93C5FD;
    --info-bg: #0F2749;
    --info-border: #3B82F6;

    --overlay: rgba(2, 6, 23, 0.72);

    --theme-color: #1E293B;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F172A;
  --card: #1E293B;
  --border: #334155;
  --text: #F1F5F9;
  --text-secondary: #CBD5E1;

  --success: #34D399;
  --warning: #FBBF24;
  --error: #F87171;

  --surface-neutral: #243348;
  --surface-success: #0C2E24;
  --surface-warning: #332A08;
  --surface-danger: #3A1518;
  --border-success-soft: #14855F;
  --banner-danger-border: #F87171;

  --info: #93C5FD;
  --info-bg: #0F2749;
  --info-border: #3B82F6;

  --overlay: rgba(2, 6, 23, 0.72);

  --theme-color: #1E293B;
}

/* --- FAZ E-10a / 05-B1: "Benzerini gir" kopyalama uyarisi (bilgi tonu) --- */
.copy-notice {
  border: 1px solid var(--info-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--info-bg);
  color: var(--text);
  padding: 10px 14px;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.copy-notice p {
  margin: 4px 0 0;
}

.copy-notice-title {
  font-weight: 600;
  color: var(--info);
}

/* --- FAZ E-10a / 05-B5: hizli arama (Ctrl+K) sonuclari ---
   Genislik sabiti ve yatay tasmanin overflow-x ile gizlenmesi YOKTUR;
   (kural: overflow-x ozelligi `hidden` degeriyle kullanilmaz) yatay tasma `.modal`
   kalibinin `min(480px, calc(100vw - 32px))` + `overflow-wrap` kurallariyla
   320px'te cozulur. */
.quick-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.quick-search-results li {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.quick-search-results a {
  display: block;
  padding: 6px 4px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.quick-search-results .ref {
  font-variant-numeric: tabular-nums;
}

.quick-search-empty {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.quick-search-status {
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
   FAZ E-10b / 05-B2: Toplu Dagitim sihirbazi (yalniz yeni siniflar).
   Kural: yatay tasma gizlenmez. Genis icerik
   `.bulk-rows-wrap` icinde kendi kaydirma bolgesini alir; dar ekranda tablo
   yatay kaydirilir (E-4/E-5a kart-kuraliyla uyumlu).
   Renkler yalniz E-5a token'larindan gelir.
   --------------------------------------------------------------------------- */
.bulk-steps {
  margin: 0 0 16px;
}

.bulk-step-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bulk-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 180px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 13px;
}

.bulk-step-label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bulk-step-state {
  color: var(--text-secondary);
  font-size: 12px;
}

.bulk-step.is-current {
  border-color: var(--info-border);
  background: var(--info-bg);
}

.bulk-step.is-done .bulk-step-state {
  color: var(--success);
}

.bulk-limit-note,
.bulk-confirm-note,
.bulk-result-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  background: var(--info-bg);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.bulk-live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-neutral);
  font-size: 14px;
}

.bulk-live-total {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bulk-live-cur {
  font-weight: 600;
}

.bulk-live-remaining {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.bulk-alert {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-success-soft);
  border-radius: var(--radius);
  background: var(--surface-success);
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.bulk-alert[hidden] {
  display: none;
}

.bulk-alert-error {
  border-color: var(--banner-danger-border);
  background: var(--surface-danger);
}

.bulk-alert:empty {
  display: none;
}

.bulk-row-error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.bulk-rows-wrap {
  /* Genis tablo kendi kaydirma bolgesinde; sayfa yatay tasmaz.
     `position: relative` sart: `.visually-hidden` etiketleri
     `position: absolute` oldugu icin icinde konumlanmadiginda kaydirma
     bolgesinden kacip belgenin yatay kaydirma alanini buyutuyordu
     (320px olcumunde documentElement.scrollWidth 477 > clientWidth 305). */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}


.bulk-rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}


.bulk-rows th,
.bulk-rows td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.bulk-rows thead th {
  background: var(--surface-neutral);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bulk-row-no {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.bulk-rows select,
.bulk-rows input[type="text"] {
  width: 100%;
  max-width: 100%;
}

.bulk-rows-static td.amount,
.bulk-rows-static th {
  font-variant-numeric: tabular-nums;
}

.bulk-block {
  margin: 0 0 20px;
}

.bulk-block h2 {
  margin: 0 0 8px;
  font-size: 16px;
}

/* 320px / dar ekran: projenin mevcut "tablo -> islem karti" donusumu
   (UX_UI_SPEC 2.2, `.data-table` kalibiyla ayni) kullanilir. Satir sabit
   genislik veya yatay kaydirma zorlamaz; hucreler etiket + deger olarak
   alt alta dizilir. */
@media (max-width: 768px) {
  .bulk-rows-wrap {
    border: 0;
  }

  .bulk-rows thead {
    position: absolute;
    max-width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .bulk-rows,
  .bulk-rows tbody,
  .bulk-rows tr,
  .bulk-rows td,
  .bulk-rows th {
    display: block;
    width: 100%;
  }

  .bulk-rows tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 10px;
    padding: 8px 0;
  }

  .bulk-rows td {
    border-bottom: none;
    padding: 6px 12px;
  }

  .bulk-rows td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }

  .bulk-row-no {
    width: 100%;
    padding: 4px 12px 0;
    font-size: 12px;
  }

  .bulk-step {
    flex: 1 1 100%;
  }
}