/* ============================================================
   Kredi portföyü paneli — kart tabanlı düzen
   Tek tipografi ailesi (IBM Plex), ince cetvel çizgileri,
   rakamlar daima tabular monospace.
   Yeni kart eklemek için: <section class="card card--6">…</section>
   ============================================================ */

:root {
  --ink:        #101A24;
  --paper:      #EBEEF1;
  --card:       #FFFFFF;
  --rule:       #D6DCE2;
  --rule-soft:  #E7EBEF;
  --hover:      #F5F7F9;
  --text:       #17222D;
  --muted:      #66727F;
  --faint:      #A6AFB8;

  --anapara:    #E07B39;
  --finansman:  #2E9E63;
  --toplam:     #114A3B;

  --focus:      #2F6FD0;
  --danger:     #B3341F;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gap: 16px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.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: 2px solid var(--focus); outline-offset: 2px; }

/* hidden özniteliği DAİMA kazansın.
   Tarayıcının [hidden]{display:none} kuralı varsayılan stil sayfasından gelir ve
   display tanımlayan herhangi bir yazar sınıfı (ör. .chartbox__empty{display:flex})
   onu ezer. Bu satır olmadan "gizlenmiş" katmanlar ekranda kalır. */
[hidden] { display: none !important; }

/* ---------------- Üst şerit ---------------- */

.topbar {
  background: var(--ink);
  color: #F2F5F8;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 24px; min-height: 56px; flex-wrap: wrap;
}
.topbar__mark { display: flex; align-items: baseline; gap: 10px; }
.topbar__glyph {
  font-family: var(--mono); font-size: 18px; color: var(--finansman);
  border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  padding: 1px 7px; line-height: 1.35;
}
.topbar__name {
  font-family: var(--cond); font-weight: 700; font-size: 20px;
  letter-spacing: .06em; text-transform: uppercase;
}
.topbar__sub {
  font-family: var(--cond); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(242,245,248,.55);
}
.topbar__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar__source { font-family: var(--mono); font-size: 11.5px; color: rgba(242,245,248,.6); }

/* ---------------- Butonlar ---------------- */

.btn {
  font-family: var(--cond); font-size: 13px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--radius); border: 1px solid transparent;
  padding: 6px 12px; cursor: pointer; background: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn--ghost { color: #F2F5F8; border-color: rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--quiet { color: var(--muted); border-color: var(--rule); background: var(--card); }
.btn--quiet:hover { color: var(--danger); border-color: var(--danger); }
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: #1C2B39; }

.banner {
  background: #FBE9E5; border-bottom: 1px solid #E9B8AC; color: #78210F;
  padding: 12px 24px; font-size: 14px; font-family: var(--mono);
}

.wrap { max-width: 1560px; margin: 0 auto; padding: 20px 24px 40px; }

/* ---------------- Filtre rayı ---------------- */

.rail {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px; display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;
}
.rail__group { display: flex; flex-direction: column; gap: 7px; }
.rail__group--grow { flex: 1 1 420px; min-width: 240px; }
.rail__label {
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.seg {
  display: inline-flex; border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; background: #F7F9FA;
}
.seg__btn {
  font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 13px; border: 0; border-right: 1px solid var(--rule);
  background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { background: #ECF0F3; color: var(--text); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fdrop { position: relative; }
.fdrop__btn {
  font-family: var(--sans); font-size: 13.5px; background: #F7F9FA;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 11px; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.fdrop__btn:hover { background: #ECF0F3; }
.fdrop__btn[aria-expanded="true"] { border-color: var(--ink); }
.fdrop__count {
  font-family: var(--mono); font-size: 11px; background: var(--ink);
  color: #fff; border-radius: 8px; padding: 1px 6px;
}
.fdrop__caret { color: var(--muted); font-size: 10px; }
.fdrop__panel {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0;
  width: 290px; max-height: 340px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(16,26,36,.16);
}
.fdrop__panel[hidden] { display: none; }
.fdrop__search {
  font-family: var(--sans); font-size: 13.5px; border: 0;
  border-bottom: 1px solid var(--rule-soft); padding: 9px 12px; outline: none;
}
.fdrop__search:focus { border-bottom-color: var(--focus); }
.fdrop__list { overflow-y: auto; padding: 5px 0; flex: 1; }
.fdrop__opt { display: flex; align-items: center; gap: 9px; padding: 5px 12px; font-size: 13.5px; cursor: pointer; }
.fdrop__opt:hover { background: var(--hover); }
.fdrop__opt input { accent-color: var(--ink); margin: 0; flex: none; }
.fdrop__opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdrop__foot { border-top: 1px solid var(--rule-soft); padding: 7px 12px; display: flex; justify-content: space-between; }
.fdrop__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--cond); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.fdrop__link:hover { color: var(--ink); text-decoration: underline; }

/* ---------------- Kart ızgarası ---------------- */

.deck {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
  align-items: start;
}
.card--12 { grid-column: span 12; }
.card--7  { grid-column: span 7; }
.card--6  { grid-column: span 6; }
.card--5  { grid-column: span 5; }
.card--4  { grid-column: span 4; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 0;
}

.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap;
}
.card__title {
  margin: 0; font-family: var(--cond); font-size: 15px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
}
.card__sub { font-size: 12.5px; color: var(--muted); }
.card__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card__hint { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.card__tools .card__hint { margin-left: 0; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }
.card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 10px; padding: 1px 9px;
}
.chip--scope { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- sekmeler (Kredi Bilgisi / Yapılandırma) --- */
.tabs { display: flex; gap: 2px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.tab {
  font-family: var(--cond); font-size: 13.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 7px 16px; border: 0; background: #F7F9FA;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.tab:hover { background: #ECF0F3; color: var(--text); }
.tab.is-on { background: var(--ink); color: #fff; }

/* --- ödeme ilerlemesi --- */
.progress { display: grid; gap: 12px; }
.prog {
  display: grid; grid-template-columns: 1fr auto 58px; gap: 4px 12px; align-items: baseline;
}
.prog__label { font-size: 13px; color: var(--text); }
.prog__val, .prog__pct {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right;
}
.prog__pct { color: var(--muted); }
.prog__bar { grid-column: 1 / -1; height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.prog__fill { display: block; height: 100%; background: var(--ink); transition: width .35s ease; }
.prog--toplam    .prog__fill { background: var(--toplam); }
.prog--anapara   .prog__fill { background: var(--anapara); }
.prog--finansman .prog__fill { background: var(--finansman); }
.prog--taksit    .prog__fill { background: var(--muted); }
.prog__of { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* --- kart katlama --- */
.collapse {
  border: 1px solid var(--rule); border-radius: var(--radius); background: #F7F9FA;
  width: 28px; height: 28px; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.collapse:hover { background: #ECF0F3; color: var(--text); }
.collapse__icon { font-size: 11px; line-height: 1; transition: transform .18s ease; display: block; }
.collapse[aria-expanded="false"] .collapse__icon { transform: rotate(-90deg); }
.card.is-collapsed .card__head { border-bottom: 0; }

/* --- yapılandırma formu --- */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label {
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #F7F9FA; padding: 8px 10px; color: var(--text); width: 100%;
}
.field select { font-family: var(--sans); }
.field input:focus, .field select:focus { outline: none; border-color: var(--focus); background: #fff; }
.field__hint { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.field__link {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.field__link:hover { color: var(--ink); text-decoration: underline; }

.formerr {
  margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius);
  background: #FBE9E5; border: 1px solid #E9B8AC; color: #78210F;
  font-family: var(--mono); font-size: 12.5px;
}

/* karşılaştırma tabloları */
.tbl--cmp td:first-child { font-weight: 500; }
.tbl .strong, .grid .strong { font-weight: 600; color: var(--ink); }
.tbl .up,   .grid .up   { color: var(--danger); }
.tbl .down, .grid .down { color: var(--finansman); }
.grid tbody tr.is-balon td { background: #FFF6EE; font-weight: 500; }
.grid tbody tr.is-balon:hover td { background: #FDEEE0; }
.detailsplit--res { margin-top: 4px; }

/* Kredi Bilgisi: solda grafik, sağda ödeme planı */
.detailsplit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.detailsplit__left, .detailsplit__right { min-width: 0; }
.detailsplit .minihead--gap { margin-top: 0; }
.detailsplit .gridwrap--sm { max-height: 348px; }
.detailsplit .chartbox--sm { height: 300px; }
@media (max-width: 1080px) { .detailsplit { grid-template-columns: 1fr; } }

.empty--pad { padding: 22px 16px; }

.stats--wide { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.stats--wide dd { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minihead--gap { margin-top: 22px; }
.legend--static { margin-bottom: 4px; }
.legend--static span { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--muted); margin-right: 16px; }
.chartbox--sm { height: 280px; padding: 6px 0 0; }
.gridwrap--sm { max-height: 340px; border: 1px solid var(--rule-soft); border-radius: var(--radius); }
#planTable tbody tr.is-paid td { color: var(--muted); }
#loanBody tr.is-active td { box-shadow: inset 0 0 0 9999px rgba(17,74,59,.07); }
#loanBody tr { cursor: pointer; }

.minihead {
  margin: 0 0 8px; font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}

.empty { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------------- Portföy rakamları ---------------- */

.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.figure {
  border-left: 3px solid var(--ink); padding: 2px 0 2px 13px;
  display: flex; flex-direction: column; min-width: 0;
}
.figure--risk  { border-left-color: var(--anapara); }
.figure--fin   { border-left-color: var(--finansman); }
.figure--total { border-left-color: var(--toplam); }

.figure__label {
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.figure__value {
  font-family: var(--mono); font-weight: 500; font-size: 29px;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  color: var(--ink); margin-top: 3px; overflow-wrap: anywhere;
}
.figure__note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.figures--sm .figure__value { font-size: 21px; }

.ratio { margin-top: 18px; }
.ratio__bar {
  display: flex; height: 9px; border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden; background: var(--card);
}
.ratio__seg { display: block; transition: width .35s ease; }
.ratio__seg--anapara   { background: var(--anapara); }
.ratio__seg--finansman { background: var(--finansman); }
.ratio__legend { display: flex; gap: 22px; margin-top: 7px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.ratio__legend b { font-family: var(--mono); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

.dot { width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; display: inline-block; flex: none; }
.dot--anapara   { background: var(--anapara); }
.dot--finansman { background: var(--finansman); }
.dot--toplam    { background: #e61010; border-radius: 50%; }

/* küçük istatistik listesi */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 18px 0 0; padding: 0;
  background: var(--rule-soft); border: 1px solid var(--rule-soft);
}
.stats > div { background: var(--card); padding: 9px 12px; }
.stats dt {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.stats dd {
  margin: 2px 0 0; font-family: var(--mono); font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--text);
}

#planTable thead th { cursor: pointer; user-select: none; }
#planTable thead th:hover { color: var(--ink); }

.banklist { margin-top: 18px; }
.banklist__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.banklist__ul li { display: grid; grid-template-columns: 1fr 108px 46px; gap: 10px; align-items: center; font-size: 13px; }
.banklist__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banklist__meter { grid-column: 1 / -1; height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.banklist__fill { display: block; height: 100%; background: var(--toplam); }
.banklist__val, .banklist__pct {
  font-family: var(--mono); font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted);
}

/* ---------------- Grafik ---------------- */

.chartmeta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 10px 16px 0; flex-wrap: wrap;
}
.windowline { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0; }
.windowline b { color: var(--text); font-weight: 500; }

.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.legend__item {
  display: inline-flex; align-items: center; font-size: 12.5px; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: 3px 8px; cursor: pointer; font-family: var(--sans);
}
.legend__item:hover { background: var(--hover); }
.legend__item.is-off { color: var(--faint); text-decoration: line-through; }
.legend__item.is-off .dot { opacity: .3; }

.chartbox { position: relative; height: 420px; padding: 8px 10px 4px; }
.chartbox canvas { display: block; max-width: 100%; }
.svgchart { position: absolute; inset: 8px 10px 4px; }
.svgchart svg { display: block; width: 100%; height: 100%; }
.chartbox__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; background: var(--card); padding: 20px;
}
.emptybox { text-align: center; max-width: 460px; }
.emptybox p { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.emptybox .emptybox__sub { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.footnote { margin: 0; padding: 9px 16px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---------------- Krediler tablosu ---------------- */

.gridwrap { overflow: auto; max-height: 560px; border-bottom: 1px solid var(--rule-soft); }

.grid { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; }

.grid th, .grid td {
  padding: 7px 12px; border-bottom: 1px solid var(--rule-soft);
  background: var(--card); text-align: left;
}

.grid thead th {
  position: sticky; top: 0; z-index: 20;
  background: #F3F6F8; border-bottom: 1px solid var(--rule);
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; user-select: none;
}
.grid thead th:hover { color: var(--text); }
.grid thead th .sortmark { color: var(--faint); margin-left: 5px; font-size: 10px; }
.grid thead th[aria-sort] { color: var(--ink); }
.grid thead th[aria-sort] .sortmark { color: var(--ink); }

.grid .col-sticky { position: sticky; z-index: 15; }
.grid thead .col-sticky { z-index: 30; }
.grid .col-sticky::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: -1px; width: 1px; background: var(--rule);
}
.grid .col-last-sticky::after { box-shadow: 3px 0 6px -2px rgba(16,26,36,.18); width: 1px; }

.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.is-picked td { background: #FFF6EE; }
.grid tbody tr.is-picked:hover td { background: #FDEEE0; }

.grid td.num {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.grid th.num { text-align: right; }
.grid td.zero { color: var(--faint); }
.grid td.name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.grid td.pick, .grid th.pick { width: 38px;}
.grid input[type="checkbox"] { accent-color: var(--anapara); margin: 0; cursor: pointer; }

.grid tfoot td {
  position: sticky; bottom: 0; z-index: 18;
  background: #F3F6F8; border-top: 1px solid var(--rule); border-bottom: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500;
}
.grid tfoot td.col-sticky { z-index: 28; }
.grid tfoot td.lbl {
  font-family: var(--cond); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; font-size: 11px; color: var(--muted);
}

/* yüzde çubuğu hücresi */
.pcell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pcell__bar { flex: 1; min-width: 42px; height: 5px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.pcell__fill { display: block; height: 100%; background: var(--anapara); }
.pcell__fill--fin { background: var(--finansman); }
.pcell__num { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }

.badge {
  font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 9px; padding: 1px 9px; border: 1px solid;
}
.badge--acik { color: #1C6D48; border-color: #A9D5BF; background: #EDF7F1; }
.badge--kapali { color: var(--muted); border-color: var(--rule); background: #F3F5F7; }

.est { color: var(--faint); font-size: 11px; margin-left: 4px; }
.cap { color: var(--anapara); font-size: 11px; margin-left: 5px; }

.search input {
  font-family: var(--sans); font-size: 13px; border: 1px solid var(--rule);
  border-radius: var(--radius); background: #F7F9FA; padding: 6px 10px;
  width: 230px; color: var(--text);
}
.search input:focus { outline: none; border-color: var(--focus); background: #fff; }

.check, .switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input, .switch input { accent-color: var(--ink); margin: 0; }
.switch { margin-top: 16px; color: var(--text); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; max-height: 108px; overflow-y: auto; }
.chips li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  border: 1px solid var(--rule); border-radius: 11px; padding: 2px 5px 2px 10px; background: #F7F9FA;
}
.chips button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 0 4px;
}
.chips button:hover { color: var(--danger); }

/* ---------------- Dönem tablosu ---------------- */

.tablebox { max-height: 430px; overflow: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  position: sticky; top: 0; background: #F3F6F8; border-bottom: 1px solid var(--rule);
  text-align: left; padding: 8px 14px; font-family: var(--cond); font-size: 11px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.tbl td { padding: 6px 14px; border-bottom: 1px solid var(--rule-soft); }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl thead th.num { text-align: right; }
.tbl td.zero { color: var(--faint); }
.tbl tr.is-empty td { color: var(--muted); text-align: center; padding: 22px; }

/* ---------------- Alt bilgi ---------------- */

.foot {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}

body.is-loading .card__body { opacity: .55; }
.card__body { transition: opacity .15s ease; }

/* ---------------- Duyarlı ---------------- */

@media (max-width: 1180px) {
  .card--7, .card--5, .card--6, .card--4 { grid-column: span 12; }
}
@media (max-width: 820px) {
  .figures { grid-template-columns: 1fr; gap: 12px; }
  .chartmeta { align-items: flex-start; }
}
@media (max-width: 680px) {
  .wrap { padding: 14px 12px 32px; }
  .topbar { padding: 10px 14px; }
  .chartbox { height: 320px; }
  .figure__value { font-size: 24px; }
  .search input { width: 100%; }
  .card__tools { width: 100%; }
  .gridwrap { max-height: 440px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ---------------- Açılır sayısal filtre paneli ---------------- */

.fpanel { border-bottom: 1px solid var(--rule-soft); background: #FBFCFD; }
.fpanel__head {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 14px; list-style: none;
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.fpanel__head::-webkit-details-marker { display: none; }
.fpanel__head:hover { color: var(--ink); }
.fpanel__count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 1px 8px;
}
.fpanel__chev { margin-left: auto; transition: transform .15s ease; }
.fpanel[open] .fpanel__chev { transform: rotate(180deg); }

.fpanel__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; padding: 4px 14px 12px;
}
.fpanel__foot { padding: 0 14px 12px; }

.rgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rgroup__title {
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 4px;
}
.rrow { display: grid; grid-template-columns: 1fr 92px 92px; gap: 8px; align-items: center; }
.rrow__label { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow__inp {
  font-family: var(--mono); font-size: 12.5px; text-align: right;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 4px 7px; background: var(--card); color: var(--ink); min-width: 0;
}
.rrow__inp:focus { outline: none; border-color: var(--toplam); }
.rrow__inp.is-on { border-color: var(--toplam); background: #F1F7F4; }

@media (max-width: 620px) { .rrow { grid-template-columns: 1fr 1fr; } .rrow__label { grid-column: 1 / -1; } }


/* ---------------- Excel yükleme ---------------- */

.upload {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 8px 3px 4px; border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.28);
  transition: border-color .15s ease, background-color .15s ease;
}
.upload__hint {
  font-family: var(--cond); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(242,245,248,.5);
}
.upload.is-over { border-color: var(--finansman); background: rgba(46,158,99,.16); }
.upload.is-busy { opacity: .6; pointer-events: none; }
.upload.is-busy .upload__hint::after { content: " · yükleniyor…"; }

@media (max-width: 760px) { .upload__hint { display: none; } }