/* azatech – Finans ekranları DÖRDÜNCÜ katman (yeniden yazılan yerleşim): Tahsilat · Hakediş · Tahsilat tahmini · Muhasebe aktarımı · Pazarlama harcamaları · Fiyat ve kur geçmişi.
 * Hiyerarşi her ekranda aynı: sayfa özeti + tek ana eylem → KPI şeridi → süzgeç çubuğu → liste / ayrıntı (yan sayfa).
 * Yalnız .f4-app kapsamı; renk TANIMLAMAZ (tema değişkenleri: --navy, --line, --panel, --mut, --ink, --red). Üç anlam tonu (iyi / uyarı / kötü) aşağıdaki iki değişkenle gelir.
 * Aralık ölçeği belirtec.css (--b-*, --yz-*). Yön bağımsız: yalnız mantıksal özellikler (inline-start/end) → Arapça / Farsça (RTL) aynen çalışır.
 * Eski finans-tasarim.css silindi; finans2/finans3 içindeki yalnız bu ekranlara ait kurallar buraya taşındı. */

.f4-app {
  --f4-iyi: #1a7f4b; --f4-uyari: #a86a00; --f4-kotu: var(--red, #c00000);
  --f4-yuz: color-mix(in srgb, var(--navy) 3.5%, var(--panel, #fff));   /* tablo başlığı / ikincil zemin */
  --f4-cizgi: color-mix(in srgb, var(--line) 70%, transparent);
  display: flex; flex-direction: column; gap: var(--b-4, 16px);
  min-width: 0; padding: var(--b-2, 8px) var(--sayfa-px, 18px) var(--b-6, 32px);
}
.f4-app > * { min-width: 0; margin-block: 0; }
.f4-app :is(h3, h4) { margin: 0; color: var(--ink); line-height: 1.3; }
.f4-app .none, .f4-app .loading { margin: 0; }

/* ---- 1. sayfa başlığı: tek cümle özet + tek ana eylem (Ortak.sayfaBasi) ---- */
.f4-app > .page-head { margin: 0; min-height: 0; gap: var(--b-2, 8px) var(--b-4, 16px); align-items: center; }
.f4-app .page-head-m { flex: 1 1 320px; }
.f4-app .page-head-o { white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--yz-md, 14px); line-height: 1.45; max-width: 72ch; }
.f4-app .page-head-a { gap: var(--b-2, 8px); }
.f4-app .page-head > .bilgi { flex: 1 1 100%; }

/* ---- 2. KPI şeridi ---- */
.f4-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--b-3, 12px); margin: 0; }
.f4-kpi {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden;
  padding: var(--b-4, 16px) var(--b-5, 24px) var(--b-4, 16px) var(--b-4, 16px);
  background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 7%, transparent);
}
.f4-kpi-l { display: flex; align-items: center; gap: 6px; font-size: var(--yz-xs, 12px); font-weight: 600; line-height: 1.3; color: var(--mut); }
.f4-kpi-l::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--navy) 40%, var(--line)); }
.f4-kpi[data-t="kotu"] .f4-kpi-l::before { background: var(--f4-kotu); }
.f4-kpi[data-t="uyari"] .f4-kpi-l::before { background: var(--f4-uyari); }
.f4-kpi[data-t="iyi"] .f4-kpi-l::before { background: var(--f4-iyi); }
.f4-kpi-v { display: block; min-width: 0; font-size: clamp(20px, 1.2vw + 8px, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.f4-kpi-v .ap-ana { display: block; font-size: inherit; font-weight: inherit; white-space: nowrap; }
.f4-kpi-v .ap-ikinci { display: block; margin-top: 4px; font-size: var(--yz-xs, 12px); font-weight: 400; line-height: 1.45; color: var(--mut); white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
.f4-kpi[data-t="kotu"] .f4-kpi-v { color: var(--f4-kotu); }
.f4-kpi-s { font-size: var(--yz-xs, 12px); line-height: 1.35; color: var(--mut); overflow-wrap: anywhere; }
.f4-kpi-s.f4-uyari { color: var(--f4-uyari); font-weight: 600; }

/* ---- 3. süzgeç çubuğu: arama + parça düğmeleri + seçimler solda, eylem sağda ---- */
.f4-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0; }
.f4-bar > .f4-ara { flex: 1 1 220px; max-width: 360px; }
.f4-app input.f4-ara, .f4-app .f4-bar select, .f4-app .f4-form :is(input, select) { height: 36px; min-height: 36px; padding-block: 0; font-size: var(--yz-md, 14px); border: 1px solid var(--line); border-radius: var(--r-md, 10px); background-color: var(--panel, #fff); }
.f4-app input.f4-ara { width: 100%; padding-inline: 12px; }
.f4-app .f4-bar select { max-width: 100%; }
.f4-app .f4-bar select:focus-visible, .f4-app input.f4-ara:focus-visible, .f4-app .f4-form :is(input, select):focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.f4-bar-a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px); margin-inline-start: auto; }
.f4-bar-n { font-size: var(--yz-xs, 12px); color: var(--mut); }
.f4-app :is(.ghost, .primary).sm { min-height: 32px; padding: 0 12px; font-size: var(--yz-sm, 13px); }
.f4-app .ghost { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-md, 10px); color: var(--ink); }
.f4-app .ghost:hover { border-color: var(--navy); color: var(--navy); }

.f4-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--navy) 6%, var(--panel, #fff)); border-radius: var(--r-md, 10px); max-width: 100%; }
.f4-seg > button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: calc(var(--r-md, 10px) - 3px); background: transparent; color: var(--mut); font-size: var(--yz-sm, 13px); font-weight: 600; white-space: nowrap; }
.f4-seg > button:hover { color: var(--ink); }
.f4-seg > button.on { background: var(--panel, #fff); color: var(--navy); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 16%, transparent); }

/* ---- 4. kart ve tablo ---- */
.f4-card { display: flex; flex-direction: column; min-width: 0; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 7%, transparent); overflow: hidden; }
.f4-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--b-1, 4px) var(--b-3, 12px); padding: var(--b-4, 16px) var(--b-4, 16px) 0; }
.f4-card-h h3 { font-size: var(--yz-lg, 16px); font-weight: 650; }
.f4-card-h small, .f4-not { font-size: var(--yz-xs, 12px); color: var(--mut); line-height: 1.4; }
.f4-card-b { display: flex; flex-direction: column; gap: var(--b-3, 12px); padding: var(--b-4, 16px); min-width: 0; }
.f4-card > .f4-tw { margin-top: var(--b-3, 12px); border-width: 1px 0 0; border-radius: 0; }
.f4-card > .f4-card-h:not(:has(+ *)) { padding-bottom: var(--b-4, 16px); }
.f4-card > .f4-card-h + .f4-tw { margin-top: var(--b-3, 12px); }
.f4-card > .f4-card-h + .f4-card-b { padding-top: var(--b-3, 12px); }

.f4-tw.tbl-x { overflow-x: auto; overflow-y: hidden; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 7%, transparent); }
.f4-app table.tk { width: 100%; table-layout: auto; border-collapse: collapse; font-size: var(--yz-sm, 13px); }
.f4-app table.tk thead th { position: static; padding: 10px 14px; background: var(--f4-yuz); border-bottom: 1px solid var(--line); color: var(--mut); font-size: var(--yz-xs, 12px); font-weight: 600; letter-spacing: .01em; text-transform: none; text-align: start; white-space: nowrap; vertical-align: bottom; }
.f4-app table.tk tbody td { max-width: none; padding: 12px 14px; border: 0; border-top: 1px solid var(--f4-cizgi); vertical-align: middle; line-height: 1.4; overflow-wrap: break-word; }
.f4-app table.tk tbody tr:first-child td { border-top: 0; }
.f4-app table.tk tbody tr:hover td { background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); }
.f4-app table.tk :is(th, td).n { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f4-app table.tk td small { display: block; margin-top: 2px; font-size: var(--yz-xs, 12px); color: var(--mut); line-height: 1.35; }
.f4-app table.tk td.n small { text-align: end; }
.f4-app table.tk td.none { padding: var(--b-5, 24px) var(--b-4, 16px); text-align: center; color: var(--mut); white-space: normal; }
.f4-app table.tk td.acts { width: 1%; white-space: nowrap; text-align: end; }
.f4-app table.tk td.acts > * { vertical-align: middle; margin-block: 0; }
.f4-app table.tk td.acts > * + * { margin-inline-start: var(--b-2, 8px); }
.f4-app table.tk tr[data-no] { cursor: pointer; }
.f4-app table.tk tr.on td { background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); }
.f4-app table.tk tr.on td:first-child, .f4-app table.tk tr.late td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
[dir="rtl"] .f4-app table.tk tr.on td:first-child, [dir="rtl"] .f4-app table.tk tr.late td:first-child { box-shadow: inset -3px 0 0 var(--navy); }
.f4-app table.tk tr.late:not(.on) td:first-child { box-shadow: inset 3px 0 0 var(--f4-kotu); }
[dir="rtl"] .f4-app table.tk tr.late:not(.on) td:first-child { box-shadow: inset -3px 0 0 var(--f4-kotu); }
.f4-app .f4-kes { display: block; max-width: var(--kes-w, 22ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f4-app table.tk td small.f4-ek { display: inline; margin: 0 var(--b-2, 8px) 0 6px; }
.f4-app table.tk td.f4-bb { white-space: nowrap; }
.f4-app table.tk td.f4-bb .f4-pill { margin-top: 0; }
.f4-app .f4-kirmizi { color: var(--f4-kotu); }
.f4-app .f4-yesil { color: var(--f4-iyi); font-weight: 600; }
.f4-app .f4-sol { color: var(--mut); }
.f4-app td.up { color: var(--f4-iyi); } .f4-app td.dn { color: var(--f4-kotu); }
.f4-app b.warn { color: var(--f4-uyari); }

/* durum rozeti */
.f4-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: var(--yz-xs, 12px); font-weight: 650; line-height: 1.5; white-space: nowrap; background: color-mix(in srgb, var(--navy) 9%, var(--panel, #fff)); color: var(--navy); }
.f4-pill[data-t="kotu"] { background: color-mix(in srgb, var(--f4-kotu) 11%, var(--panel, #fff)); color: var(--f4-kotu); }
.f4-pill[data-t="iyi"] { background: color-mix(in srgb, var(--f4-iyi) 13%, var(--panel, #fff)); color: var(--f4-iyi); }
.f4-pill[data-t="uyari"] { background: color-mix(in srgb, var(--f4-uyari) 14%, var(--panel, #fff)); color: var(--f4-uyari); }
.f4-pill[data-t="sade"] { background: color-mix(in srgb, var(--mut) 12%, var(--panel, #fff)); color: var(--mut); }
.f4-app table.tk td .f4-pill { margin-top: 4px; }
.f4-app table.tk td .f4-pill:first-child { margin-top: 0; }

/* ilerleme çizgisi */
.f4-ilerleme { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); overflow: hidden; }
.f4-ilerleme > i { display: block; height: 100%; width: var(--p, 0%); border-radius: 4px; background: var(--f4-iyi); }

/* ---- 5. liste + ayrıntı: ayrıntı yan sayfadır (geniş ekranda sağda yapışkan, dar ekranda sağdan açılan çekmece) ---- */
.f4-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-4, 16px); align-items: start; }
.f4-split.has-yan { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); }
.f4-yan { position: sticky; top: var(--b-4, 16px); display: flex; flex-direction: column; gap: var(--b-4, 16px); min-width: 0; padding: var(--b-4, 16px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); box-shadow: 0 4px 18px color-mix(in srgb, var(--navy) 10%, transparent); }
.f4-yan[hidden], .f4-perde[hidden] { display: none; }
.f4-yan-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-3, 12px); }
.f4-yan-h h3 { font-size: var(--yz-lg, 16px); font-weight: 700; overflow-wrap: anywhere; }
.f4-yan-alt { margin: 4px 0 0; font-size: var(--yz-xs, 12px); line-height: 1.5; color: var(--mut); overflow-wrap: anywhere; }
.f4-x { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--panel, #fff); color: var(--ink); font-size: var(--yz-sm, 13px); font-weight: 600; text-decoration: none; }
.f4-x:hover { border-color: var(--navy); color: var(--navy); }
.f4-perde { display: none; }
@media (max-width: 1100px) {
  .f4-split.has-yan { grid-template-columns: minmax(0, 1fr); }
  .f4-perde:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ink) 38%, transparent); }
  .f4-split.has-yan > .f4-yan { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 71; width: min(460px, 100%); max-height: 100dvh; overflow-y: auto; border-radius: var(--r-lg, 14px) 0 0 var(--r-lg, 14px); border-width: 0; box-shadow: -8px 0 28px color-mix(in srgb, var(--navy) 22%, transparent); }
  [dir="rtl"] .f4-split.has-yan > .f4-yan { border-radius: 0 var(--r-lg, 14px) var(--r-lg, 14px) 0; box-shadow: 8px 0 28px color-mix(in srgb, var(--navy) 22%, transparent); }
}
@media (max-width: 560px) { .f4-split.has-yan > .f4-yan { border-radius: 0; } }

/* ayrıntı bölümleri */
.f4-sec { display: flex; flex-direction: column; gap: var(--b-2, 8px); min-width: 0; padding-top: var(--b-4, 16px); border-top: 1px solid var(--f4-cizgi); }
.f4-sec > h4 { font-size: var(--yz-sm, 13px); font-weight: 650; }
.f4-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-2, 8px); margin: 0; }
.f4-ozet > div { min-width: 0; padding: var(--b-2, 8px) var(--b-3, 12px); border-radius: var(--r-md, 10px); background: var(--f4-yuz); }
.f4-ozet small { display: block; font-size: var(--yz-xs, 12px); color: var(--mut); }
.f4-ozet b { display: block; font-size: var(--yz-md, 14px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.f4-ozet .f4-kirmizi { color: var(--f4-kotu); }
@media (max-width: 420px) { .f4-ozet { grid-template-columns: minmax(0, 1fr); } }

/* takvim satırları (ödeme planı) */
.f4-takvim { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.f4-takvim > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--b-3, 12px); align-items: center; padding: 10px 0; border-top: 1px solid var(--f4-cizgi); }
.f4-takvim > li:first-child { border-top: 0; }
.f4-takvim .t-a { min-width: 0; font-size: var(--yz-sm, 13px); overflow-wrap: anywhere; }
.f4-takvim .t-a small { display: block; font-size: var(--yz-xs, 12px); color: var(--mut); }
.f4-takvim .t-n { text-align: end; font-weight: 650; font-variant-numeric: tabular-nums; font-size: var(--yz-sm, 13px); white-space: nowrap; }
.f4-takvim .t-n small { display: block; font-weight: 400; color: var(--mut); font-size: var(--yz-xs, 12px); }
.f4-takvim .t-d { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px); }
.f4-takvim li.gecikti .t-n { color: var(--f4-kotu); }
.f4-takvim li.odendi .t-n { color: var(--f4-iyi); }

/* ödeme / iade kayıtları */
.f4-kayit { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.f4-kayit > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--b-3, 12px); align-items: baseline; padding: 10px 0; border-top: 1px solid var(--f4-cizgi); font-size: var(--yz-sm, 13px); }
.f4-kayit > li:first-child { border-top: 0; }
.f4-kayit > li > span:first-child { color: var(--mut); font-size: var(--yz-xs, 12px); white-space: nowrap; }
.f4-kayit > li > b { min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.f4-kayit > li > small { grid-column: 2; font-size: var(--yz-xs, 12px); color: var(--mut); line-height: 1.4; overflow-wrap: anywhere; }
.f4-kayit .f4-eylem { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--b-3, 12px); }
.f4-app .link.up { cursor: pointer; }
.f4-app .link.danger-l { color: var(--f4-kotu); }

/* ---- 6. form: tek ızgara, etiket üstte ---- */
.f4-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--b-3, 12px); align-items: end; margin: 0; }
.f4-form > .f4-tam { grid-column: 1 / -1; }
.f4-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-size: var(--yz-xs, 12px); font-weight: 600; line-height: 16px; color: var(--mut); }
.f4-f > :is(input, select) { width: 100%; font-weight: 400; color: var(--ink); }
.f4-f > span { display: flex; align-items: center; gap: var(--b-2, 8px); font-size: var(--yz-md, 14px); font-weight: 400; color: var(--ink); min-height: 36px; }
.f4-f > span > input[type=checkbox] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; }
.f4-form-a { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px); }
.f4-form-a > button { min-height: 36px; }
.f4-yan .f4-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f4-yan .f4-form > .f4-tam { grid-column: 1 / -1; }
@media (max-width: 420px) { .f4-yan .f4-form { grid-template-columns: minmax(0, 1fr); } }
.f4-app .f4-form input[name=oran], .f4-app input.f4-kisa { max-width: 110px; }

/* ---- 7. yatay çubuklar (aylık beklenen tahsilat) ---- */
.f4-cubuk { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, auto); align-items: center; gap: var(--b-3, 12px); padding: 6px 0; font-size: var(--yz-sm, 13px); }
.f4-cubuk > span { color: var(--mut); font-variant-numeric: tabular-nums; }
.f4-cubuk > i { display: block; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--navy) 9%, var(--panel, #fff)); overflow: hidden; }
.f4-cubuk > i > em { display: block; height: 100%; width: var(--w, 2%); border-radius: 6px; background: var(--navy); }
.f4-cubuk > b { text-align: end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 560px) { .f4-cubuk { grid-template-columns: 70px minmax(0, 1fr); } .f4-cubuk > b { grid-column: 1 / -1; text-align: start; } }

/* ---- 8. durumlar: yükleniyor / hata / boş ---- */
.f4-app > .durum, .f4-ic > .durum, .f4-app .f4-split > .durum { background: var(--panel, #fff); border: 1px dashed var(--line); border-radius: var(--r-lg, 14px); padding: var(--b-6, 32px) var(--b-4, 16px); }
.f4-app .f4-tw .durum, .f4-app .f4-card .durum { border: 0; border-radius: 0; }
.f4-app .loading { padding: var(--b-6, 32px) var(--b-4, 16px); text-align: center; color: var(--mut); background: var(--panel, #fff); border: 1px dashed var(--line); border-radius: var(--r-lg, 14px); }
.f4-app .loading.err { color: var(--f4-kotu); border-style: solid; border-color: color-mix(in srgb, var(--f4-kotu) 35%, var(--line)); }

/* ---- 9. grafik (Fiyat ve kur geçmişi) ---- */
.f4-grafik { display: block; width: 100%; height: auto; }
.f4-g-izgara { stroke: var(--line); stroke-width: 1; opacity: .7; }
.f4-g-yazi { fill: var(--mut); font-size: 11px; }
.f4-g-s1 { stroke: var(--navy); } .f4-g-s2 { stroke: var(--f4-uyari); } .f4-g-s3 { stroke: var(--f4-iyi); }
.f4-g-n1 { fill: var(--navy); } .f4-g-n2 { fill: var(--f4-uyari); } .f4-g-n3 { fill: var(--f4-iyi); }
.f4-g-cizgi { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.f4-lejant { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px) var(--b-4, 16px); margin: 0; font-size: var(--yz-xs, 12px); color: var(--mut); }
.f4-lejant > span { display: inline-flex; align-items: center; gap: 6px; }
.f4-lejant i { width: 14px; height: 3px; border-radius: 2px; background: var(--navy); }
.f4-lejant i.s2 { background: var(--f4-uyari); } .f4-lejant i.s3 { background: var(--f4-iyi); }

/* ---- 10. Muhasebe aktarımı ve Pazarlama harcamaları (finans-ekran.css ızgara/giriş ölçüleri üzerine) ---- */
.fe-sayfa.f4-app { gap: var(--b-4, 16px); }
.f4-app .fe-kutu, .f4-app .fe-ac { border-radius: var(--r-lg, 14px); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 7%, transparent); }
.f4-app .fe-sonuc { display: flex; flex-direction: column; gap: var(--b-4, 16px); min-width: 0; }
.f4-app .fe-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-2, 8px) var(--b-4, 16px); padding: var(--b-3, 12px) var(--b-4, 16px); border-top: 1px solid var(--f4-cizgi); }
.f4-app .fe-bos { margin: 0; padding: var(--b-6, 32px) var(--b-4, 16px); text-align: center; color: var(--mut); }
.f4-app .fe-tablo.f4-card { overflow: hidden; padding: 0; }
.f4-app .fe-tablo .f4-tw.tbl-x { border: 0; border-radius: 0; box-shadow: none; }
.f4-app .mh-acik { max-width: 36ch; }
.f4-app .hh-sil { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--panel, #fff); color: var(--f4-kotu); font-size: var(--yz-sm, 13px); font-weight: 600; }
.f4-app .hh-sil:hover { border-color: var(--f4-kotu); }

@media (max-width: 640px) {
  .f4-bar > .f4-ara { flex-basis: 100%; max-width: none; }
  .f4-bar-a { margin-inline-start: 0; width: 100%; }
  .f4-seg { width: 100%; }
  .f4-seg > button { flex: 1 1 auto; justify-content: center; }
  .f4-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-2, 8px); }
  .f4-kpi { padding: var(--b-3, 12px); }
  .f4-tah .f4-kpis, .f4-hak .f4-kpis { grid-template-columns: minmax(0, 1fr); }
  .f4-card-h { padding-inline: var(--b-3, 12px); }
  .f4-card-b { padding: var(--b-3, 12px); }
}
@media (prefers-reduced-motion: no-preference) { .f4-yan { animation: f4-ac .16s ease-out; } }
@keyframes f4-ac { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ayrıntı yan sayfası: portal bağlantısı ve düğme satırları */
.f4-kart-ic { display: flex; flex-direction: column; gap: var(--b-2, 8px); min-width: 0; }
.f4-form-a { align-items: center; }
.f4-app input.f4-girdi { width: 100%; height: 36px; padding-inline: 12px; font-size: var(--yz-sm, 13px); border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--panel, #fff); }

/* ayrıntı yan sayfası açıkken liste daralır: hücre boşluğu ve kesme genişliği küçülür, tablo kutudan taşmaz */
.f4-split.has-yan table.tk :is(th, td) { padding-inline: 8px; }
.f4-split.has-yan table.tk .f4-kes { --kes-w: 13ch; }
.f4-split.has-yan table.tk .f4-ilerleme { min-width: 60px; }
.f4-split.has-yan table.tk td small { white-space: normal; }

.f4-ic { display: flex; flex-direction: column; gap: var(--b-4, 16px); min-width: 0; }
#hkForm:empty { display: none; }
.f4-app table.tk td .f4-girdi.f4-kisa { width: 100px; }
.f4-ic > .f4-card-h { padding: 0; }
.f4-app .f4-card .durum { border: 0; }
.f4-app table.tk td.f4-ek { white-space: nowrap; }
.f4-fin .f4-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .f4-fin .f4-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .f4-fin .f4-kpis { grid-template-columns: minmax(0, 1fr); } }
.f4-card.fe-izgara { display: grid; }
.f4-card.fe-ac { display: block; }
.f4-card.fe-tablo { padding: 0; }
.f4-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-5, 24px); }
@media (max-width: 900px) { .f4-cift { grid-template-columns: minmax(0, 1fr); } }
.f4-fiy .f4-card-h .f4-bar-a { margin-inline-start: 0; }
.f4-liste { display: flex; flex-direction: column; gap: var(--b-2, 8px); min-width: 0; }
.f4-split > .f4-liste > .durum { border: 1px dashed var(--line); background: var(--panel, #fff); border-radius: var(--r-lg, 14px); padding: var(--b-6, 32px) var(--b-4, 16px); }
[dir="rtl"] .f4-kpi-v .ap-ana { direction: ltr; text-align: right; }