:root {
  color-scheme: light;
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #edf3f4;
  --surface-warm: #fff7e8;
  --text: #242723;
  --muted: #687064;
  --line: #dfe5dc;
  --brand: #197a6a;
  --brand-dark: #0d5f53;
  --brand-soft: #dff1ec;
  --debt: #c62f2f;
  --debt-soft: #fdeaea;
  --debt-line: #f3c9c9;
  --credit: #157a3c;
  --credit-soft: #e7f6ec;
  --credit-line: #bfe6cd;
  --amber: #b7791f;
  --amber-soft: #fff1d6;
  --info: #2f6387;
  --info-soft: #e7f0f7;
  --shadow: 0 18px 44px rgba(40, 52, 42, 0.1);
  --radius: 12px;
  --tap: 56px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(25, 122, 106, 0.08), transparent 260px),
    var(--bg);
  color: var(--text);
  font-size: 16px;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
}

.auth-screen {
  display: grid;
  min-height: 100vh;
  align-content: center;
  padding: 24px 18px;
}

.auth-card {
  display: grid;
  width: 100%;
  max-width: 440px;
  gap: 20px;
  margin: 0 auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.auth-logo {
  justify-self: center;
  width: auto;
  max-width: 270px;
  max-height: 150px;
  margin-bottom: 4px;
  /* Logonun beyaz/şeffaf zeminini açık kart yüzeyine temiz oturtur. */
  mix-blend-mode: multiply;
}

.brand-lockup {
  display: grid;
  gap: 12px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text {
  display: grid;
  gap: 2px;
}

.eyebrow {
  margin: 0;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.12;
}

h2 {
  font-size: 22px;
  line-height: 1.2;
}

h3 {
  font-size: 16px;
  line-height: 1.25;
}

.supporting {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.field input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--text);
  background: #fbfcf8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 17px;
  outline: none;
}

.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(25, 122, 106, 0.15);
}

.primary-button,
.secondary-button,
.ghost-button,
.icon-button {
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 800;
}

.primary-button {
  width: 100%;
  color: #fff;
  background: var(--brand);
  font-size: 18px;
}

.primary-button:hover {
  background: var(--brand-dark);
}

.secondary-button {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.ghost-button {
  color: var(--brand-dark);
  background: transparent;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.message {
  display: none;
  padding: 12px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid rgba(25, 122, 106, 0.2);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.45;
}

.message.is-visible {
  display: block;
}

/* Portal tek ekran: header (sabit) + içerik (kalan alanı doldurur) + alt menü (akışta, en altta). */
.portal {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Aktif sayfa alanı kalan yüksekliği kaplar. Özet buraya tam sığar; Hareket listesi gerekirse burada kayar. */
#page-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Özet: içerik alanını doldurur. Boş alan bloklar ARASINA değil, KARTLARIN İÇİNE dağıtılır —
   yani aralar sabit kalır, kartlar büyür (uzun ekranlarda seyrek boşluk yerine dolu görünüm). */
/* .page.page-ozet → .page kuralını (aynı özgüllük, sonra tanımlı) kesin ezer; flex layout gerçekten uygulanır. */
.page.page-ozet {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding: 4px 16px 12px;   /* üstte dar → isim ile Özet arası boşluk kapanır, içerik yukarı gelir */
}

/* Başlık doğal boyutta; kartlar kalan alanı paylaşıp büyür (içerik boyutundan başlayarak). */
.page.page-ozet > .hero {
  flex: 1.6 1 auto;
  align-content: center;
}

.page.page-ozet > .stat-row,
.page.page-ozet > .mini-grid {
  flex: 1 1 auto;
}

.portal-header {
  flex-shrink: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  height: 74px;              /* SABİT yükseklik → alt çizgi hep burada, logoyla kaymaz */
  padding: 0 16px;
  background: rgba(243, 246, 248, 0.94);
  border-bottom: 1px solid rgba(223, 229, 220, 0.7);
  backdrop-filter: blur(14px);
}

.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.portal-logo {
  height: 52px;              /* ← logo boyutu: header (74px) içinde kaldıkça çizgi kaymaz */
  width: auto;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.producer-block {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.producer-block strong {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.producer-block span {
  color: var(--muted);
  font-size: 13px;
}

.topbar-logout {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 0;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.topbar-logout:hover {
  background: #d5e4dd;
}

.sync-pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--credit);
  background: var(--credit-soft);
  border: 1px solid var(--credit-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.page {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-head span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* ---- Ana ekran: kocaman "Alacağınız / Borcunuz" kartı ---- */
.hero {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.hero-label {
  font-size: 22px;
  font-weight: 800;
}

.hero-amount {
  font-size: clamp(32px, 9vw, 54px);
  font-weight: 900;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.hero-sub {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.hero-credit {
  background: var(--credit-soft);
  border-color: var(--credit-line);
}

.hero-credit .hero-label,
.hero-credit .hero-amount {
  color: var(--credit);
}

.hero-debt {
  background: var(--debt-soft);
  border-color: var(--debt-line);
}

.hero-debt .hero-label,
.hero-debt .hero-amount {
  color: var(--debt);
}

.update-line {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ---- Alacak / Borç küçük kartları ---- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-chip {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  cursor: pointer;
}

.stat-chip:hover {
  border-color: var(--brand);
}

.stat-chip:active {
  transform: scale(0.98);
}

.stat-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.stat-credit .stat-dot {
  background: var(--credit);
}

.stat-debt .stat-dot {
  background: var(--debt);
}

.stat-value {
  font-size: clamp(20px, 5.4vw, 32px);
  font-weight: 900;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.stat-credit .stat-value {
  color: var(--credit);
}

.stat-debt .stat-value {
  color: var(--debt);
}

/* ---- Özet ekranı: kompakt istatistik kutuları (tek ekranda, kaydırmasız) ---- */
.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Borsa / Ziraat / Bağkur — üç eşit kolon yan yana. */
.mini-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mini-grid-3 .mini-value {
  font-size: clamp(15px, 4.2vw, 23px);
}

.mini-tile {
  display: grid;
  gap: 2px;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 50px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mini-tile.is-wide {
  grid-column: 1 / -1;
  gap: 4px;
  padding: 14px;
  background: var(--brand-soft);
  border-color: transparent;
}

.mini-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.mini-value {
  font-size: clamp(18px, 4.8vw, 27px);
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.mini-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mini-tile.is-wide .mini-label,
.mini-tile.is-wide .mini-sub {
  color: var(--brand-dark);
}

.mini-tile.is-wide .mini-value {
  font-size: 23px;
  color: var(--brand-dark);
}

.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.balance-card,
.transaction-card,
.profile-item,
.summary-row,
.notice-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.balance-card {
  display: grid;
  gap: 12px;
  min-height: 122px;
  padding: 16px;
}

.balance-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.card-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 900;
}

.card-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.card-icon.debt {
  color: var(--debt);
  background: var(--debt-soft);
}

.card-icon.credit {
  color: var(--credit);
  background: var(--credit-soft);
}

.card-icon.net {
  color: var(--info);
  background: var(--info-soft);
}

.amount {
  overflow-wrap: anywhere;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* Demo ekranındaki 2x2 ölçü kartlarının rakamı (küçük ekranda daha da küçülür). */
.stat-tile-amount {
  font-size: 22px;
}

.balance-card small {
  color: var(--muted);
  font-size: 13px;
}

.mini-chart {
  display: grid;
  gap: 9px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.chart-line {
  display: grid;
  grid-template-columns: 74px 1fr 70px;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  background: #e7ece4;
  border-radius: 999px;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.bar-fill.debt {
  background: var(--debt);
}

.bar-fill.credit {
  background: var(--credit);
}

.bar-fill.net {
  background: var(--info);
}

.transaction-list {
  display: grid;
  gap: 10px;
}

.transaction-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

/* renderNetInvoices hâlâ top/bottom yapısını kullanır (net-tutar sayfası). */
.transaction-top,
.transaction-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.transaction-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.transaction-title strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.transaction-title span,
.transaction-bottom span {
  color: var(--muted);
  font-size: 13px;
}

.transaction-date {
  margin-top: 2px;
}

/* Hareket kartında malzeme açıklaması ve miktarı/birimi — açıklamadan biraz daha belirgin. */
.transaction-title span.transaction-material,
.transaction-title span.transaction-qty {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

/* Fatura kartındaki malzeme açıklaması notu — uzunsa 2 satırla sınırlı. */
.invoice-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.transaction-amount {
  flex: 0 0 auto;
  font-size: clamp(15px, 4.3vw, 20px);
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.transaction-amount.debt {
  color: var(--debt);
}

.transaction-amount.credit {
  color: var(--credit);
}

.filter-panel {
  display: grid;
  gap: 10px;
}

.search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 17px;
  outline: none;
}

/* Sekme başına toplam (Tümü=net, Alacak=alacak, Borç=borç) — sekmelerin üzerinde büyük gösterilir. */
.segment-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 4px;
}

.seg-total {
  text-align: center;
  font-size: clamp(12.5px, 3.6vw, 19px);
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.seg-total.credit {
  color: var(--credit);
}

.seg-total.debt {
  color: var(--debt);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: #e9eee5;
  border-radius: var(--radius);
}

/* Tümü / Alacak / Borç / Fatura — dört eşit kolon. */
.segmented-4 {
  grid-template-columns: repeat(4, 1fr);
}

.segmented-4 .segment {
  font-size: 14px;
}

.segment {
  min-height: 46px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
}

.segment.is-active {
  color: var(--brand-dark);
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(38, 48, 40, 0.1);
}

.summary-list {
  display: grid;
  gap: 8px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 10px 16px;
}

.summary-row span {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.summary-row strong {
  font-size: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.notice-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--surface-warm);
  border-color: #f0d9ad;
}

.notice-card span {
  color: var(--amber);
  font-size: 13px;
  font-weight: 900;
}

.profile-list {
  display: grid;
  gap: 8px;
}

.profile-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 9px 16px;
}

.profile-item span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.profile-list + .secondary-button {
  margin-top: 4px;
}

/* ---- Detay sayfası: tek tablo, gruplar içeride (KFCT09 alış kalemleri) ----
   Tüm gruplar tek <table> içinde olduğu için her grupta sütun hizaları birebir aynıdır. */
.detail-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
}

/* Sabit sütun oranları — bütün gruplarda aynı genişlik. */
.dt-col-name { width: 46%; }
.dt-col-date { width: 18%; }
.dt-col-qty { width: 18%; }
.dt-col-amount { width: 18%; }

.detail-table th,
.detail-table td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: middle;
}

/* Üst başlık (Malzeme/Tarih/Miktar/Tutar) — bir kez, tablonun tepesinde. */
.detail-table thead th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

/* Malzeme sütunu: uzun adlar kırpılmadan sarar. */
.dt-name {
  font-weight: 700;
  word-break: break-word;
}

.dt-date {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12.5px;
}

/* Sayısal sütunlar (Miktar/Tutar) sağa yaslı ve rakamları hizalı. */
.dt-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dt-amount {
  color: var(--brand-dark);
}

/* Kalem satırları. */
.detail-table tr.dt-row td {
  border-top: 1px solid var(--surface-soft);
  color: var(--text);
}

.detail-table tr.dt-row td.dt-num {
  font-weight: 700;
}

.detail-table tr.dt-row:nth-child(even) td {
  background: rgba(24, 122, 106, 0.045);
}

/* Grup başlığı satırı (yeşil bant) — tablo içinde grubu ayırır. */
.detail-table tr.dt-group-head th {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-top: 8px solid var(--bg);
  border-bottom: 1px solid var(--line);
}

/* İlk grubun üstünde kalın boşluk çizgisi olmasın (başlığa yapışsın). */
.detail-table tbody:first-of-type tr.dt-group-head th {
  border-top-width: 0;
}

/* Grup alt toplam satırı — gri zeminde, tutarı vurgulu (Excel toplam çizgisi gibi). */
.detail-table tr.dt-subtotal td {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--surface-soft);
  border-top: 2px solid var(--line);
}

.detail-table tr.dt-subtotal .dt-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.detail-table tr.dt-subtotal .dt-amount {
  font-weight: 800;
  color: var(--brand-dark);
}

/* ---- Mobil (dar ekran): sakin 2×2 kart düzeni; etiket tekrarı yok, göz yormaz ----
   Üst satır: malzeme (sol) + tutar (sağ, vurgulu). Alt satır: tarih (sol) + miktar (sağ, soluk). */
@media (max-width: 640px) {
  /* Taşmayı bitir: tablo blok akışına döner, yatay kaydırma kalkar. */
  .detail-table-wrap {
    overflow-x: visible;
  }

  .detail-table {
    display: block;
    table-layout: auto;
    width: 100%;
  }

  .detail-table thead {
    display: none;
  }

  .detail-table tbody,
  .detail-table tr,
  .detail-table td,
  .detail-table th {
    display: block;
    width: auto;
  }

  /* Grup başlığı: tam genişlik yeşil bant, üstünde ince boşluk. */
  .detail-table tr.dt-group-head th {
    border-top: 10px solid var(--bg);
  }

  .detail-table tbody:first-of-type tr.dt-group-head th {
    border-top-width: 0;
  }

  /* Her kalem = 2 sütun × 2 satırlık sakin kart. Kartlar ince çizgiyle ayrılır. */
  .detail-table tr.dt-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
  }

  .detail-table tr.dt-row:nth-child(even) td {
    background: transparent; /* kart düzeninde zebra yok */
  }

  .detail-table tr.dt-row td {
    padding: 0;
    border: 0;
  }

  /* Üst satır: malzeme adı solda, tutar sağda (bold, marka yeşili). */
  .detail-table tr.dt-row td.dt-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
    line-height: 1.3;
  }

  .detail-table tr.dt-row td.dt-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-dark);
    white-space: nowrap;
  }

  /* Alt satır: tarih solda, miktar sağda — ikisi de küçük ve soluk (ikincil bilgi). */
  .detail-table tr.dt-row td.dt-date {
    grid-column: 1;
    grid-row: 2;
    font-size: 12.5px;
    color: var(--muted);
  }

  .detail-table tr.dt-row td.dt-num:not(.dt-amount) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
  }

  /* Mobilde etiket (::before) gösterme — birim/₺ zaten anlamı veriyor. */
  .detail-table tr.dt-row td[data-label]::before {
    content: none;
  }

  /* Alt toplam: "N kalem" solda, tutar sağda; yumuşak zeminli sakin bant. */
  .detail-table tr.dt-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: var(--surface-soft);
    border-top: 2px solid var(--line);
  }

  .detail-table tr.dt-subtotal td {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .detail-table tr.dt-subtotal td:empty {
    display: none;
  }
}

.bottom-nav {
  flex-shrink: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.nav-inner {
  display: flex;
  justify-content: center;
  width: min(100%, 500px);
  gap: 10px;
}

.nav-button {
  display: grid;
  flex: 1 1 0;
  max-width: 220px;
  min-height: 52px;
  place-items: center;
  gap: 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 900;
}

.nav-icon {
  display: grid;
  width: 26px;
  height: 24px;
  place-items: center;
}

.nav-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.35;
}

.nav-button.is-active {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.empty-state {
  padding: 22px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.status-panel {
  display: grid;
  min-height: 280px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px 18px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.spinner {
  width: 34px;
  height: 34px;
  border: 4px solid var(--brand-soft);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 92px;
  left: 16px;
  z-index: 30;
  display: none;
  max-width: 488px;
  min-height: 48px;
  margin: 0 auto;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  background: #2d3731;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 800;
}

.toast.is-visible {
  display: flex;
}

@media (min-width: 760px) {
  .app-shell {
    width: min(100%, 960px);
    height: calc(100vh - 48px);
    min-height: 0;              /* base'teki min-height:100vh'yi ez → kabuk ekrandan taşmasın */
    margin: 24px auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }

  .auth-screen {
    min-height: calc(100vh - 48px);
  }

  /* Portal kartın tam yüksekliğini alır; içerik header ile alt menü arasına tam oturur. */
  .portal {
    height: 100%;
  }

  /* Özet blokları geniş kartta (ama tek ekranda kalır, üstte boşluk minimum). */
  .page.page-ozet {
    gap: 12px;
    padding: 6px 22px 14px;
  }

  .balance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .auth-screen,
  .page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .auth-card {
    padding: 20px;
  }

  h1 {
    font-size: 25px;
  }

  h2 {
    font-size: 20px;
  }

  .amount {
    font-size: 24px;
  }

  .stat-tile-amount {
    font-size: 19px;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .chart-line {
    grid-template-columns: 62px 1fr 56px;
    gap: 8px;
  }

  .nav-button {
    font-size: 12px;
  }
}