/* azatech – Finans, rapor, acenta ve kırmızı liste ekranlarının ortak tasarım katmanı (Stripe tarzı sade).
 * Kapsam (yalnız bu kök sınıflar): .hk-app (Hakediş) · .rp-app (Raporlar) · .fn-app (Tahsilat tahmini) · .ac-app (Acenta ilişkileri)
 * .ah-app (Acenta hesapları) · .fg-app (Fiyat ve kur geçmişi) · .sg-app (Kırmızı liste).
 * Renk tanımlamaz: yalnız mevcut değişkenler. kutu.css'ten SONRA yüklenir. PDF/yazdır (.rp-pg, .rp-pdf) etkilenmez. */

.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app { --f2-gap: 12px; --f2-gap-l: 24px; }

/* ---- bölüm başlıkları (rapor gövdesi, tahsilat tahmini, hakediş): tek hiyerarşi ---- */
:is(.rp-app #rB2, .fn-app #fnB, .hk-app #hkB) > h3, .hk-app .hd-baslik > h3 { margin: var(--f2-gap-l) 0 var(--f2-gap); font-size: var(--yz-lg, 16px); font-weight: 650; line-height: 1.3; color: var(--ink); }
:is(.rp-app #rB2, .fn-app #fnB, .hk-app #hkB) > h3:first-child { margin-top: 0; }
:is(.rp-app #rB2, .fn-app #fnB) > .help { margin: 0 0 var(--f2-gap); max-width: 72ch; }

/* ---- çok para birimli kart değeri: taşmasın, sözcük aralarından alta insin ---- */
:is(.hk-app, .rp-app, .fn-app, .fg-app) :is(.stat, .kpi, .rp-card) > b .ap-ana { white-space: normal; overflow-wrap: anywhere; }
:is(.hk-app, .rp-app, .fn-app) :is(.stat, .kpi, .rp-card) { overflow: hidden; }

/* ---- araç çubuğu: arama + süzgeç solda, dışa aktarma sağda ---- */
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--f2-gap); margin: 0 0 var(--f2-gap); }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar > input[type=search] { flex: 1 1 240px; min-width: 0; max-width: 380px; }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar > :is(.xls, #rPdf, #sgXls, #sgYenile) { margin-inline-start: auto; }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar > :is(.xls, #rPdf, #sgXls, #sgYenile) ~ :is(.xls, #rPdf, #sgXls, #sgYenile) { margin-inline-start: 0; }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar > .help { margin: 0; color: var(--mut); font-size: var(--yz-xs, 12px); }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar select { min-width: 0; max-width: 100%; }

/* süzgeç düğmeleri: bölünmüş denetim (segmented) */
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: color-mix(in srgb, var(--navy) 6%, var(--panel, #fff)); border-radius: 10px; }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .chips .chip { border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--mut); box-shadow: none; }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .chips .chip:hover { color: var(--ink); }
:is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .chips .chip.on { background: var(--panel, #fff); color: var(--navy); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .08)); }
.hk-app .tk-bar:has(.chips:only-child:has(.chip:only-child)) { display: none; }   /* tek sekme: sekme çubuğu gereksiz */

/* ---- tablolar: tek görünüm ---- */
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) .tbl-x { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .06)); overflow-x: auto; margin: 0 0 var(--f2-gap); }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk { border-collapse: collapse; width: 100%; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk thead th { font-size: var(--yz-xs, 12px); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--mut); background: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff)); padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; line-height: 1.4; max-width: none; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk tbody tr:last-child td { border-bottom: 0; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app) table.tk tbody tr:hover td { background: color-mix(in srgb, var(--navy) 3%, transparent); }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk th.n, :is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk td.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk td small, :is(.hk-app, .ac-app) table.tk td small.by { display: block; margin-top: 2px; font-size: var(--yz-xs, 12px); color: var(--mut); }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) table.tk td.none { text-align: center; color: var(--mut); padding: 28px 14px; }
:is(.hk-app, .ac-app, .ah-app, .sg-app) table.tk td.acts { white-space: nowrap; text-align: end; display: table-cell; }
:is(.hk-app, .ac-app, .ah-app, .sg-app) table.tk td.acts > * + * { margin-inline-start: 8px; }
:is(.hk-app, .ac-app, .ah-app, .sg-app) table.tk td.acts .btn-satir > * + * { margin-inline-start: 0; }
.hk-app table.tk td .ts, .ac-app table.tk td .ts { white-space: nowrap; }
.hk-app table.tk th:last-child, .ac-app table.tk th:last-child { text-align: end; }
.hk-app .tk-bar + #hkForm:empty { display: none; }

/* ---- yükleniyor / hata / boş durum ---- */
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) .loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--mut); font-size: 14px; text-align: center; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) .loading:not(.err)::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--navy); animation: f2-don .8s linear infinite; flex: none; }
:is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .fg-app, .sg-app) .loading.err { margin: 0 0 var(--f2-gap); border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--panel, #fff)); color: var(--red); border-radius: var(--r-lg, 12px); }
@keyframes f2-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }

/* ---- ilerleme çubukları (rapor / tahsilat tahmini) ---- */
:is(.rp-app, .fn-app) .rp-bar { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) auto; align-items: center; gap: var(--f2-gap); padding: 6px 0; font-size: 14px; }
:is(.rp-app, .fn-app) .rp-bar .rp-l { color: var(--ink); overflow-wrap: anywhere; }
:is(.rp-app, .fn-app) .rp-bar .hd-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); overflow: hidden; }
:is(.rp-app, .fn-app) .rp-bar .hd-fill { height: 100%; border-radius: 999px; background: var(--navy); }
:is(.rp-app, .fn-app) .rp-bar > b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
@media (max-width: 640px) { :is(.rp-app, .fn-app) .rp-bar { grid-template-columns: minmax(0, 1fr) auto; } :is(.rp-app, .fn-app) .rp-bar .hd-track { grid-column: 1 / -1; order: 3; } }

/* ---- Hakediş ---- */
.hk-app .hd-baslik { margin: 0 0 var(--f2-gap); }
.hk-app #hkForm .ay-card, .hk-app #hkForm .bv-form { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .06)); padding: 16px 20px; margin: 0 0 var(--f2-gap); }
.hk-app #hkForm h3 { margin: 0 0 var(--f2-gap); font-size: var(--yz-lg, 16px); font-weight: 650; }
.hk-app .th-p { list-style: none; margin: 0 0 var(--f2-gap); padding: 0; }
.hk-app .th-p li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hk-app .th-p li:last-child { border-bottom: 0; }
.hk-app .th-p li small { flex: 1 1 200px; color: var(--mut); }
.hk-app .th-pa2 { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-inline-start: auto; }

/* ---- Kırmızı liste: aciliyet rengi yalnız süre göstergesinde; sayfa kendisi sakin ---- */
.sg-app { background: transparent; min-height: 0; padding: 0 0 var(--f2-gap-l); }
.sg-app .sg-kapak { background: var(--panel, #fff); color: var(--ink); border: 1px solid var(--line); border-inline-start: 4px solid var(--red); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .06)); padding: 16px 20px; margin: 0 0 var(--f2-gap); flex-wrap: wrap; }
.sg-app .sg-kapak h2 { font-size: 18px; margin: 4px 0 2px; color: var(--ink); }
.sg-app .sg-kapak p { opacity: 1; color: var(--mut); font-size: 14px; }
.sg-app .sg-kapak p b { color: var(--ink); }
.sg-app .sg-etiket { background: color-mix(in srgb, var(--red) 10%, transparent); border: 0; color: var(--red); }
.sg-app .sg-kapak .ghost { background: var(--panel, #fff); color: var(--ink); border-color: var(--line); }
.sg-app .sg-kapak-s { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-app .sg-serit { padding: 0; background: transparent; border: 0; margin: 0 0 var(--f2-gap); gap: 8px 18px; }
.sg-app .sg-serit .help { flex: 1 1 280px; margin: 0; max-width: 72ch; }
.sg-app .rp-cards, .sg-app .stat-grid { padding: 0; margin: 0 0 var(--f2-gap); }
.sg-app .tk-bar, .sg-app .tbl-x, .sg-app > p, .sg-app .sg-kisiler { margin-left: 0; margin-right: 0; }
.sg-app .tbl-x { margin-bottom: var(--f2-gap); }
.sg-app .sg-k { text-align: start; cursor: pointer; font: inherit; }
.sg-app .sg-k.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.sg-app table.tk thead th { background: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff)); color: var(--mut); }
.sg-app table.tk tbody tr { background: transparent; }
.sg-app table.tk tbody tr:hover td { background: color-mix(in srgb, var(--red) 4%, transparent); }
.sg-app .sg-gun { white-space: nowrap; }
.sg-app table.tk td { max-width: none; }
.sg-app table.tk td:nth-child(n+4) { white-space: nowrap; }
.sg-app .sg-kisiler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--f2-gap); }
.sg-app .sg-bos { text-align: center; color: var(--mut); padding: 40px 16px; background: var(--panel, #fff); border: 1px dashed var(--line); border-radius: var(--r-lg, 12px); }
.sg-app .sg-arac { padding: 10px 14px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); }
.sg-app .sg-arac select { max-width: 100%; }
@media (max-width: 640px) {
  .sg-app .sg-kapak { padding: 14px 16px; }
  .sg-app .sg-kapak-s { width: 100%; }
  .sg-app .sg-kapak-s .ghost { flex: 1 1 0; white-space: nowrap; }
  .sg-app .tk-bar select, .sg-app .tk-bar > input[type=search] { flex: 1 1 100%; max-width: none; }
}

/* ---- Acenta ilişkileri ---- */
.ac-app .tk-bar { padding: 0; }
.ac-app .ac-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--f2-gap); margin: 0 0 var(--f2-gap); }
.ac-app .ac-sum { display: block; padding: 10px 14px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .06)); font-size: 13px; color: var(--mut); line-height: 1.5; }
.ac-app .ac-sum b { display: block; color: var(--ink); font-size: 12px; font-weight: 650; margin: 0 0 2px; }
.ac-app .ac-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); margin: 0 0 var(--f2-gap); }
.ac-app .ac-bulk[hidden] { display: none; }
.ac-app td.bv-ac { white-space: normal; }
.ac-app .ac-formrow td { background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); }
.ac-app .ac-f { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.ac-app .ac-f label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mut); min-width: 0; }
.ac-app .ac-f .ac-not { flex: 1 1 220px; }
.ac-app #acForm .ay-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); padding: 16px 20px; margin: 0 0 var(--f2-gap); }

/* ---- Acenta hesapları ---- */
.ah-app .kutu .chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ah-app #frm:empty { display: none; }
.ah-app .crmbox { position: relative; }
.ah-app .crmres { position: absolute; inset-inline: 0; top: 100%; z-index: 20; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 24, 40, .14); padding: 4px; }
.ah-app .crmres[hidden] { display: none; }
.ah-app .crmres button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.ah-app .crmres button:hover { background: color-mix(in srgb, var(--navy) 7%, transparent); }

/* ---- Fiyat ve kur geçmişi ---- */
.fg-app { padding-inline: 0; padding-top: 0; gap: var(--f2-gap); }
.fg-app .fg-tabs { display: inline-flex; align-self: flex-start; padding: 3px; gap: 4px; background: color-mix(in srgb, var(--navy) 6%, var(--panel, #fff)); border-radius: 10px; }
.fg-app .fg-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--mut); }
.fg-app .fg-tabs button.on { background: var(--panel, #fff); color: var(--navy); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .08)); }
.fg-app .fg-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0, 0, 0, .06)); padding: 16px 20px; min-width: 0; }
.fg-app .fg-card h3 { margin: var(--f2-gap-l) 0 var(--f2-gap); font-size: var(--yz-lg, 16px); font-weight: 650; color: var(--ink); }
.fg-app .fg-card h3:first-child { margin-top: 0; }
.fg-app .fg-card .fg-kpis + h3 { margin-top: var(--f2-gap-l); }
.fg-app .fg-kpis { gap: var(--f2-gap); margin: 0 0 var(--f2-gap); }
.fg-app .fg-kpis > div { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); padding: 14px 16px; gap: 3px; min-width: 0; }
.fg-app .fg-kpis b { font-size: 22px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.fg-app .fg-card .tbl-x { box-shadow: none; }
.fg-app .fg-split { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.fg-app .fg-side { background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); }
.fg-app .fg-t tr.on td { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.fg-app .fg-chart { width: 100%; height: auto; }
.fg-app .fg-leg { margin-inline-start: 0; }
@media (max-width: 1100px) { .fg-app .fg-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .fg-app .fg-card { padding: 14px 14px; } }

/* ---- dar ekran: tablo kaydırması kutu içinde kalır, sayfa taşmaz ---- */
@media (max-width: 640px) {
  :is(.hk-app, .rp-app, .fn-app, .ac-app, .ah-app, .sg-app) .tk-bar > :is(input[type=search], select) { flex: 1 1 100%; max-width: none; }
  :is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .tk-bar > :is(.xls, #rPdf) { margin-inline-start: 0; }
  :is(.hk-app, .rp-app, .ac-app, .sg-app, .fg-app) .chips { width: 100%; }
}

/* ---- son ince ayarlar ---- */
.sg-app { padding-inline: var(--sayfa-px, 18px); }
.hk-app table.tk tbody td:nth-child(2) { white-space: nowrap; }
.sg-app .sg-kapak { margin-top: 4px; }
.sg-app table.tk td a.link { text-decoration: none; }
.sg-app table.tk td a.link:hover { text-decoration: underline; }
.ac-app table.tk td .ts { display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); color: var(--navy); font-size: 12px; font-weight: 600; }
.ac-app table.tk td .ts.ac-Aktif { background: color-mix(in srgb, var(--green, #1a7f4b) 14%, var(--panel, #fff)); color: var(--green, #1a7f4b); }
.ac-app table.tk td .ts.ac-Ilgisiz { background: color-mix(in srgb, var(--red) 10%, var(--panel, #fff)); color: var(--red); }