/* Ekranlar: açılış, giriş ve sayfa iskeletleri.
   Kaynak: 6-belgeler/tasarim.md · "Sayfa iskeletleri" ve Nizam Standardı */

/* ---------- Açılış ekranı · minimal, animasyonsuz ---------- */
.acilis {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 4);
  background: var(--zemin);
  animation: ns-sol var(--gecis) ease-out both;
}

.acilis-logo {
  width: 224px;
  max-width: 100%;
  height: auto;
}

/* Açılış ekranı dekoratif şerit taşımaz (şablon): ortada logo, altında
   marka adı, en altta ilerleme çubuğu. Şerit yüksekliği sıfırdır ama
   değişken duruyor — ilerleme çubuğunun konumu ondan okunuyor. */
.acilis { --acilis-serit: 0px; }

/* Logo ile marka şeridin üstünde kalır. */
.acilis-logo,
.acilis-marka,
.acilis-alt { position: relative; z-index: 1; }

.acilis-marka {
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
  text-align: center;
}

.acilis-alt {
  position: absolute;
  left: 0;
  right: 0;
  /* Çubuk şeridin üstünde durur: çizimin üstüne binince ne çubuk ne de
     "Hazırlanıyor…" okunuyordu (2026.183). */
  bottom: calc(var(--acilis-serit) + var(--bosluk) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk);
  padding: 0 calc(var(--bosluk) * 4);
}

.acilis-cubuk {
  width: min(240px, 100%);
  height: 3px;
  border-radius: 999px;
  background: var(--kenar);
  overflow: hidden;
}

.acilis-cubuk-dolu {
  width: 0;
  height: 100%;
  background: var(--vurgu);
  transition: width .2s linear;
}

.acilis-durum {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

/* ---------- Sayfa iskeletleri ---------- */
.sayfa-icerik {
  padding: calc(var(--bosluk) * 2);
}

/* Liste iskeletinin 40px'lik arama ve filtre şeridi bir bileşendir:
   bkz. bilesenler.css · ".suzgec". Burada ikinci bir tanım açılmaz. */

/* Form: en fazla 720px, tek sütun, 24px bölüm aralığı. */
.iskelet-form {
  max-width: var(--form-en);
  margin: 0 auto;
}

/* ---------- Dashboard ----------
   Sayfa bir GÜNÜ anlatır: tepede şube ve tarih, altında o günün dört
   ölçüsü, yedi günlük satış çizgisi, yapılacaklar, paranın yeri ve dört
   kısayol.

   NİYE HER KUTU SABİT
     Veri gelmeden çizilen iskelet, dolu hâlin ta kendisidir: aynı kutu,
     aynı satır sayısı, aynı punto. Kartların yüksekliği içeriğe değil
     kendi ölçüsüne bağlıdır — grafik alanı boşken de aynı yeri kaplar,
     yapılacaklar hep dört satırdır, hesap kırılımına hep dört yer
     ayrılır. Böylece sayfa yüklenirken hiçbir şey büyüyüp küçülmez
     (6-belgeler/NIZAM.md · "gösterilen şey sonradan başka bir şeye dönüşmez"). */

/* ---------- Dashboard ----------
   İki kat: tepede paranın bugünkü durumunu gösteren dört kart, altta üç
   dik tablo (brüt satış · son ödemeler · yaklaşan ödemeler). Karta
   basınca dökümü panelde açılır.
   Kaynak: 4-ekranlar/4-yonetim/panel.js · 5-veritabani/2-guncellemeler/46 */

/* ---- Tepe kuşağı ----
   Panelin kim olduğunu söyleyen şerit: solda sayfanın kimliği, sağda
   kullanıcı. Alttaki kartlarla aynı yüzeyi kullanır; süs taşımaz. */
.sayfa-kusak {
  position: relative;
  overflow: hidden;
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 3.5)
           calc(var(--bosluk) * 2.75);
  margin-bottom: calc(var(--bosluk) * 3);
  border-radius: var(--kose-kart);
  border: var(--kart-cerceve);
  /* Kuşak alttaki kartlarla AYNI yüzey. */
  background-color: var(--kart-zemin);
  box-shadow: var(--kart-golge);
  text-align: center;
}

/* Kuşak iki yana açılır: solda sayfanın kimliği, sağda kullanıcı.
   Dar ekranda alt alta iner ve ortalanır — yan yana sıkıştırmak iki
   tarafı da okunmaz yapıyordu. */
.sayfa-kusak-ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
}

.sayfa-kusak-sol {
  min-width: 0;
  text-align: left;
}

.sayfa-kusak-ust {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ikinci);
}

.sayfa-kusak-ad {
  margin: calc(var(--bosluk) * .75) 0 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--metin);
}

/* Ayraç · YALNIZ DAR EKRANDA görünür: geniş ekranda iki blok zaten
   kuşağın iki ucunda duruyor, aradaki boşluğun ortasına asılı bir çizgi
   yersiz kalıyordu. Alt alta inince araları ayıran bir şey gerekiyor. */
.sayfa-kusak-ayrac { display: none; }

/* Kullanıcı satırı · fotoğraf, selam ve ünvan. Kuşağın ortasında,
   ayraçla tarihin arasında durur. */
.kusak-selam {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  text-align: right;
}

/* Fotoğraf sağda, yazı solunda: kuşağın sağ ucunda yüz durur. */
.kusak-selam-yazi { order: -1; }

.kusak-selam-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kart-yuzey);
  box-shadow: 0 0 0 1px var(--kenar);
}

.kusak-selam-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kusak-selam-harf {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: 1;
  color: var(--metin);
}

.kusak-selam-yazi { min-width: 0; }

.kusak-selam-ad {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  color: var(--metin);
}

.kusak-selam-unvan {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gri-vurgu);
}

.sayfa-kusak-alt {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--metin);
  opacity: .75;
}

@media (max-width: 700px) {
  .sayfa-kusak { padding: calc(var(--bosluk) * 2.5) calc(var(--bosluk) * 2.5); }

  /* Dar ekranda tarih iki satıra düşüyordu; açıklama eki orada
     gereksiz — gün ve tarih yeter. */
  .sayfa-kusak-alt-ek { display: none; }

  .sayfa-kusak-ad { font-size: var(--h2-boy); line-height: var(--h2-satir); }
  .sayfa-kusak-ic { flex-direction: column; gap: calc(var(--bosluk) * 1.5); }
  .sayfa-kusak-sol { text-align: center; }
  .sayfa-kusak-ayrac {
    position: relative;
    display: block;
    align-self: center;
    width: 148px;
    max-width: 60%;
    height: 9px;
    background-image:
      linear-gradient(var(--ayirici), var(--ayirici)),
      linear-gradient(var(--ayirici), var(--ayirici));
    background-size: calc(50% - 9px) 1px, calc(50% - 9px) 1px;
    background-position: left center, right center;
    background-repeat: no-repeat;
  }
  .kusak-selam { text-align: left; }
  .kusak-selam-yazi { order: 0; }
  .kusak-selam-avatar { width: 44px; height: 44px; }
  .kusak-selam-ad { font-size: var(--govde-boy); line-height: var(--govde-satir); }
}

/* Yazdırırken kuşak çıkmaz: kâğıda basılan şey raporun kendisidir,
   kimin baktığı değil. */
@media print {
  .sayfa-kusak { display: none; }
}

/* ---- Dört kart ---- */
.pn-kartlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 2);
  margin: 0 0 calc(var(--bosluk) * 3);
}

@media (min-width: 700px) {
  .pn-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .pn-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pn-kart {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk);
  width: 100%;
  min-height: 150px;
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.25);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: 20px;
  box-shadow: var(--kart-golge);
  text-align: left;
  position: relative;
  transition: transform var(--gecis) ease-out;
}

.pn-kart::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

@media (hover: hover) {
  .pn-kart:hover { transform: translateY(-1px); }
  .pn-kart:hover .pn-kart-ok { opacity: .85; }
}

.pn-kart-tepe {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
}

/* Simge kutusu · içindeki simge renkli settendir (3-cekirdek/2-arayuz/simgeler.js),
   rengini kendi taşır; kutu ona yalnız kağıt zemin verir. */
.pn-simge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
}

.pn-kart-ad {
  flex: 1;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}

.pn-kart-ok { flex: none; display: inline-flex; opacity: .4; }

.pn-tutar {
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.pn-alt {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* Bankadaki para ikiye bölünür: üstte hesaptaki, altta blokedeki. */
.pn-ikili {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: calc(var(--bosluk) / 2);
  border-top: 1px solid var(--defter-tel-soluk);
}

.pn-ikili-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.pn-ikili-satir span { opacity: .7; }

.pn-ikili-satir b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---- Üç sütun ---- */
.pn-sutunlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 2);
  align-items: stretch;
}

@media (min-width: 1000px) {
  .pn-sutunlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pn-sutun {
  display: flex;
  flex-direction: column;
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: 20px;
  box-shadow: var(--kart-golge);
  position: relative;
  overflow: hidden;
}

.pn-sutun::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.pn-sutun-basi {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.25);
  border-bottom: 1px solid var(--defter-tel-soluk);
}

.pn-sutun-simge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
}

.pn-sutun-yazi { min-width: 0; }

.pn-sutun-ad {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.pn-sutun-alt {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

.pn-sutun-govde { flex: 1 1 auto; background: var(--kart-yuzey); }

.pn-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.pn-tablo td {
  padding-top: calc(var(--bosluk) * 1.1);
  padding-bottom: calc(var(--bosluk) * 1.1);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
}

.pn-tablo tr:last-child td { border-bottom: 0; }

.pn-gun,
.pn-tarih {
  width: 1%;
  padding-left: calc(var(--bosluk) * 2.25);
  padding-right: var(--bosluk);
  white-space: nowrap;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.pn-ad { padding-right: var(--bosluk); min-width: 0; }

.pn-ad-yazi {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-kaynak {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

/* Brüt satış çubuğu · sayıyı okumadan da hangi gün iyi geçmiş görünsün. */
.pn-cubuk {
  padding-right: var(--bosluk);
  width: auto;
}

.pn-cubuk-dolu {
  display: block;
  height: 8px;
  min-width: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--defter-tel), var(--defter-koyu));
}

.pn-sayi {
  width: 1%;
  padding-right: calc(var(--bosluk) * 2.25);
  text-align: right;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.pn-bos td {
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 2.25);
  text-align: center;
  opacity: .6;
}

/* Dar ekranda sütunlar sabitlensin · tarih ve tutar taşmasın, ad kısalsın. */
@media (max-width: 640px) {
  .pn-tablo { table-layout: fixed; }
  .pn-gun,
  .pn-tarih {
    width: 7em;
    padding-left: calc(var(--bosluk) * 1.25);
    padding-right: var(--bosluk);
    font-size: var(--etiket-boy);
  }
  .pn-sayi {
    width: 7.6em;
    padding-right: calc(var(--bosluk) * 1.25);
    font-size: var(--kucuk-boy);
  }
}

.pn-sutun-dip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 2.25);
  border-top: 1px solid var(--defter-tel-soluk);
  background: var(--defter-acilis);
  font-size: var(--kucuk-boy);
}

.pn-sutun-dip b {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---- Kartın dökümü · panel ---- */
.pn-pan-ara {
  margin: calc(var(--bosluk) * 2) 0 var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

.pn-pan-ara:first-child { margin-top: 0; }

.pn-pan-satir {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.pn-pan-kod { flex: none; width: 58px; opacity: .6; }
.pn-pan-ad { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.pn-pan-tutar {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pn-pan-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  margin-top: var(--bosluk);
  padding: var(--bosluk) 0 0;
  border-top: 1px solid var(--defter-tel);
  font-size: var(--kucuk-boy);
}

.pn-pan-toplam b {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  font-variant-numeric: tabular-nums;
}

.pn-pan-bos { margin: 0; font-size: var(--kucuk-boy); opacity: .7; }

/* ---------- Ayarlar ekranı ---------- */
/* Ana ekran öbek kartlarıdır (2026.110): otuz satır alt alta değil, dört
   kapı. Her kapı kendi sayfasına götürür; sayfanın tepesinde geri
   düğmesi ve adı durur. Kart ölçüsü yan menüdeki satırın ölçüsüdür —
   plakalı simge, 16px kapsül, ince tel. */
.ayarlar-obekler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 1.5);
}

@media (min-width: 900px) {
  .ayarlar-obekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ayarlar-obek {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.75);
  width: 100%;
  min-height: 76px;
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.25);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: 20px;
  box-shadow: var(--kart-golge);
  position: relative;
  text-align: left;
  color: var(--metin);
  transition: transform var(--gecis) ease-out;
}

/* Üstüne gelince kart bir tık daha kalkar; çerçeve değişmez. */
@media (hover: hover) {
  .ayarlar-obek:hover { transform: translateY(-1px); }
  .ayarlar-obek:hover .ayarlar-obek-ok { opacity: .8; }
}

.ayarlar-obek-simge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  color: var(--defter-koyu);
}

.ayarlar-obek-yazi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ayarlar-obek-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.ayarlar-obek-tarif {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .72;
}

/* Kaç sayfa olduğunu söyleyen küçük sayı: kapıyı açmadan bilinsin. */
.ayarlar-obek-sayi {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  font-size: var(--etiket-boy);
  line-height: 24px;
  text-align: center;
  opacity: .8;
}

.ayarlar-obek-ok {
  flex: none;
  display: inline-flex;
  opacity: .4;
  transition: opacity var(--gecis) ease-out;
}

/* Alt sayfanın tepesi: geri düğmesi üstte, sayfanın adı altında. */
.ayarlar-tepe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 2);
}

.ayarlar-geri {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  min-height: 32px;
  padding: 0 calc(var(--bosluk) * 1.5) 0 var(--bosluk);
  border: 1px solid var(--kart-kenar);
  border-radius: 16px;
  background: var(--kart-kagit);
  color: var(--vurgu);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Ok simgesi ileriyi gösterir; geri düğmesinde ters çevrilir. */
.ayarlar-geri .simge { transform: rotate(180deg); }

@media (hover: hover) {
  .ayarlar-geri:hover { background: var(--kart-yuzey); }
}

.ayarlar-tepe-ad {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

/* Tek sütun, başlıklı bölümler; her bölüm bir kart, her satırda solda alan
   adı sağda değeri. 24px aralıklarla ayrılmış gruplar, 11px/16 büyük harf
   başlık, 56px ayar satırları.
   Kaynak: 6-belgeler/NIZAM.md · Tasarım · "Ayarlar" · 6-belgeler/tasarim.md · "Sayfa
   iskeletleri" — Tanımlar öbeğinin ayar kartlarından (.ayar-kart) ayrı bir
   bileşendir: orada kayıt listesi, burada bilgi satırı durur. */
.ayarlar-grup + .ayarlar-grup { margin-top: calc(var(--bosluk) * 3); }

.ayarlar-baslik {
  margin: 0 0 var(--bosluk);
  padding: 0 calc(var(--bosluk) / 2);
  color: var(--metin);
  opacity: .7;
  font-family: var(--yazi-metin);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ayarlar-kart {
  padding: 0 calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
}

.ayarlar-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
  min-height: calc(var(--ust-cubuk));
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
}

.ayarlar-satir:last-child { border-bottom: 0; }

.ayarlar-ad {
  flex: 0 0 auto;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.ayarlar-deger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bosluk);
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: right;
  overflow-wrap: anywhere;
}

.ayarlar-yardimci {
  color: var(--metin);
  opacity: .7;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ayarlar-dugme {
  flex: 0 0 auto;
  padding: 0 calc(var(--bosluk) * 2);
}

/* Bir sayfaya götüren satır bilgi satırı değildir: solda ad, sağda yön
   işareti, satırın tamamı düğmedir. "Aç" düğmeli biçim burada yorardı —
   telefonda bilgi satırı alt alta iner ve yedi tanım sayfası on dört
   satıra çıkar, her birinin altında tek başına duran küçük bir düğmeyle.
   Bu satır dar ekranda da tek satır kalır. */
.ayarlar-git-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
  width: 100%;
  min-height: var(--dokunma);
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
  color: var(--metin);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  text-align: left;
}

.ayarlar-git-satir:last-child { border-bottom: 0; }

/* Adın altındaki yardımcı yazı: satır iki satırlık olur, ad üstte kalır. */
.ayarlar-git-yazi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.ayarlar-ana-ad { margin-bottom: calc(var(--bosluk) * 2); }

.ayarlar-git-satir .simge {
  flex: none;
  opacity: .55;
}

@media (hover: hover) {
  .ayarlar-git-satir:hover { color: var(--vurgu); }
}

/* Güncelleme satırı tek satırın istisnasıdır: düğme üstte, sürüm etiketi
   onun altında durur (6-belgeler/NIZAM.md · "Ayarlar · Güncelleme ayarlardaki
   düğmeyle yapılır"). */
.ayarlar-guncelleme {
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--bosluk) / 2);
}

.ayarlar-aciklama {
  margin: calc(var(--bosluk) * 2) 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ayarlar-eylem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2) 0;
}

/* Çıkış düğmesi en altta ve sade durur, kırmızı değildir. */
.ayarlar-cikis {
  display: flex;
  justify-content: center;
  padding: calc(var(--bosluk) * 4) 0 calc(var(--bosluk) * 2);
}

@media (max-width: 899.98px) {
  .ayarlar-satir {
    align-items: flex-start;
    flex-direction: column;
    gap: calc(var(--bosluk) / 2);
  }

  .ayarlar-deger {
    justify-content: flex-start;
    text-align: left;
  }

  .ayarlar-guncelleme { align-items: flex-start; }
}


/* ---------- İşlem geçmişi · Ayarlar ---------- */
/* Toplu iş tek satırdır: "Toplu fatura aktarımı · 180 fatura". Yapılan
   iş kalın, özeti soluk — göz önce ne olduğunu okur, ayrıntıyı sonra. */
.gecmis-zaman { font-variant-numeric: tabular-nums; }
.gecmis-is { font-weight: 500; }
.gecmis-ozet { opacity: .6; }

/* Geri alınmış işlem listeden silinmez, solar: ne yapıldığı kadar neyin
   geri alındığı da geçmişin bir parçasıdır. Düğmesi olmaz. */
.gecmis-geri { opacity: .55; }

.gecmis-dugme { min-height: 34px; }

/* ---- Geri alma paneli ---- */
.gecmis-pan-ust {
  display: flex;
  flex-wrap: wrap;
  gap: 2px calc(var(--bosluk) * 2);
  margin-bottom: calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.gecmis-sat {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 1.5);
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
}

.gecmis-sat:last-of-type { border-bottom: 0; }
.gecmis-sat b { font-weight: 500; font-variant-numeric: tabular-nums; }

.gecmis-baslikcik {
  margin: calc(var(--bosluk) * 2) 0 0;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
}

.gecmis-uyari {
  margin-top: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: rgba(184, 117, 3, .10);
  color: var(--metin-uyari);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}


/* ---------- Kontrol sihirbazı · Hareketler ---------- */
/* Aktarımdan sonra hesaplar sırayla gezilir. Süzgeç şeridi kapanır,
   yerine kaçıncı hesapta olunduğunu söyleyen başlık gelir. */
.sihirbaz-tepe {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-bottom: 0;
  border-radius: var(--kose-kart) var(--kose-kart) 0 0;
}

.sihirbaz-sayac {
  flex: 0 0 auto;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.sihirbaz-ad {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sihirbaz-bakiye {
  flex: 0 0 auto;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* İlerleme çubuğu yalnız nerede olunduğunu söyler; sayı da yanında
   yazdığı için ayrıca etiketlenmez. */
.sihirbaz-cubuk {
  height: 3px;
  background: var(--oyuk);
  border-left: 1px solid var(--kenar);
  border-right: 1px solid var(--kenar);
}

.sihirbaz-dolu {
  height: 3px;
  background: var(--vurgu);
  transition: width var(--gecis) ease-out;
}

.sihirbaz-alt {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-top: 0;
  border-radius: 0 0 var(--kose-kart) var(--kose-kart);
}

.sihirbaz-bosluk { flex: 1; }

/* Sihirbazda gezilecek hesap çıkmazsa boş durum ve altında tek düğme
   durur; boş durumun kendi düğmesi süzgeç temizlemeye bağlı, buradaki iş
   ekrandan çıkmak. */
.sihirbaz-bos-dugme {
  display: flex;
  justify-content: center;
  padding-bottom: calc(var(--bosluk) * 3);
}

/* Sihirbazda tarihin yanına "Yeni" damgası giriyor; sütun onunla
   birlikte ölçülmeli, yoksa damga alt satıra kaçıyor. */
@media (min-width: 900px) {
  .sihirbaz-liste .tablo-yapisik-bir { width: 164px; min-width: 164px; }
  .sihirbaz-liste .tablo-yapisik-iki { left: 164px; }
}

/* Dar ekranda düğmeler alt alta değil, yan yana ama dar durur: üçü de
   parmakla basılabilir kalsın. */
@media (max-width: 899.98px) {
  .sihirbaz-alt { flex-wrap: wrap; }
  .sihirbaz-alt .dugme-birincil { flex: 1 1 100%; order: 3; }
  .sihirbaz-bosluk { display: none; }
  .sihirbaz-alt .dugme-ikincil { flex: 1 1 0; }
}


/* ---------- Hesap defteri · kayıt paneli ---------- */
/* Gözcünün baktığı nokta. Görünmez ama yüksekliği vardır: sıfır boyda bir
   öğe kaydırma sırasında kesişme üretmiyor. */
.defter-gozcu { height: 1px; }

.kayit-sat {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 1.5);
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
}

.kayit-sat b { font-weight: 500; }

/* Çift kaydın iki bacağı bir arada durur: kaydın tek satır değil, iki
   bacak olduğu buradan görünür. */
.kayit-bacaklar {
  margin-top: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
}

.kayit-bacak {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * .5) 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.kayit-bacak b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Panelde bölüm başlığı: "Muhasebe kaydı" iki bacağın üstünde durur ve
   o kutunun ne olduğunu söyler. */
.kayit-baslikcik {
  margin-top: calc(var(--bosluk) * 2);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
}

.kayit-baslikcik + .kayit-bacaklar { margin-top: calc(var(--bosluk) * .75); }

/* Bacaklar gelene kadar kutunun yüksekliği hazır durur: veri gelince
   panel büyüyüp göze çarpmasın. */
.kayit-bekliyor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  min-height: 68px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
}

.kayit-kilit {
  margin-top: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: rgba(184, 117, 3, .10);
  color: var(--metin-uyari);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Silme solda, kapat ve düzenle sağda: yıkıcı olan onaylayıcıdan uzakta
   dursun (6-belgeler/NIZAM.md · "Onay penceresi"). */
.kayit-dugmeler { align-items: center; }
.kayit-bosluk { flex: 1; }
.kayit-sil { color: var(--metin-hata); border-color: rgba(183, 44, 40, .35); }
.kayit-sil:disabled { opacity: .45; }


/* ---------- Hesap defteri · yukarı yükleme ---------- */
/* Kullanıcı yukarı kaydırınca önceki kayıtlar gelirken listenin tepesinde
   bu şerit durur. Eskiden tablo baştan çiziliyordu; liste bir an boşalıp
   ekran gidip geliyordu. Artık yalnız yeni satırlar üste giriyor ve
   bekleyiş burada görünüyor. */
.defter-yukleniyor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.75);
  background: var(--oyuk);
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.defter-donen {
  width: 14px;
  height: 14px;
  border: 2px solid var(--kenar);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: defter-don 1s linear infinite;
}


/* Hareket az tutulur: dönme kapalıysa şerit yalnız yazıdır
   (6-belgeler/NIZAM.md · "Geçişler · Hareket az tutulur"). */
@media (prefers-reduced-motion: reduce) {
  .defter-donen { animation: none; }
}

/* Tarih ve tutar yan yana: ikisi de kısa, alt alta yazmak paneli boşuna
   uzatıyordu. */
.kayit-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--bosluk) * 1.5);
}

@media (max-width: 420px) {
  .kayit-ikili { grid-template-columns: 1fr; }
}

/* Tarih kutusu artık maskeli bir metin kutusu; tarayıcının kendi tarih
   kutusundan kalan iç boşluklar temizlenir ki öteki alanlarla aynı
   hizada dursun. */
.alan-kutu-tarih {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Fatura beş sütunlu bir kalem tablosu taşıyor; onay penceresi genişliği
   ona dar geliyor ve "Tutar" sütunu görüş dışında kalıyordu. Fatura
   görünümü taşıyan panel geniş ekranda açılır — telefonda zaten tam
   genişlik. Sınıf panel açılırken verilir (NS.pencere.ac · genis), içerik
   gelince değil: sonradan genişleyen panel bir anda büyüyüp göze
   çarpıyordu. */
@media (min-width: 720px) {
  .pencere-genis { max-width: 720px; }
}

/* Geniş ekranda daha da açılır (2026.230 · kullanıcının isteği: "açılan
   formu güzelleştir · pencere daha geniş olsun"). Kâr-Zarar dökümünde
   tarih · açıklama · pay · tutar yan yana durur; 640 piksele açıklama
   sığmıyor ve satırlar iki katına çıkıyordu. Telefonda değişen bir şey
   yok — orada pencere zaten tam genişlik. */
@media (min-width: 1100px) {
  .pencere-genis { max-width: 960px; }
}


/* ---------- Gün Sonu Aktarımı · karşılaştırma kartı ----------
   Ekran bir form kâğıdı gibi durur: tepede başlık, tarih ve dosya adı,
   ortada Samba/Gerçekleşen/Fark karşılaştırması, altta Kaydet. Kullanıcının
   gönderdiği örnek tasarıma göre kuruldu (6-belgeler/kararlar.md).

   Üç sütun karşılaştırılıyor: dosyanın söylediği, gerçekte olan, aradaki
   fark. Rakamlar sağa yaslı ve eşit genişlikte (tabular-nums) — göz
   sütunu yukarıdan aşağı tarayacak, basamaklar kaymamalı.

   "Muhasebe Kaydı" ekranı (kayitCiz) da aynı .gs-kart/.gs-tepe kabuğunu
   kullanır — iki sayfa tek görsel dilin parçasıdır. */
.gs-kart {
  max-width: 900px;
  margin: 0 auto calc(var(--bosluk) * 3);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  overflow: hidden;
}

.gs-tepe {
  position: relative;
  padding: calc(var(--bosluk) * 3.5) calc(var(--bosluk) * 3) calc(var(--bosluk) * 2.5);
  text-align: center;
  border-bottom: 1px solid var(--ayirici);
}

.gs-tepe-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---- Gün ve şube · dosya okununca sorulan iki şey ----
   Tepedeki küçük gri tarih kutusunun yerini aldı. Sebebi: o kutu bir
   ayrıntı gibi duruyordu, oysa gün ve şube kaydın KİMLİĞİ — rapor
   mükerrer denetimini ikisiyle yapıyor (5-veritabani/2-guncellemeler/20) ve bütün hareketler o
   şubeye yazılıyor. Karşılaştırma tablosunun hemen üstünde, adıyla ve
   altında ne olduğu yazılı olarak duruyorlar. */
.gs-secim {
  display: flex;
  gap: calc(var(--bosluk) * 3);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.gs-secim-alan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 0 1 240px;
}

.gs-secim-ad {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .55;
}

.gs-secim-kutu {
  height: var(--form-alan);
  background: var(--yuzey);
}

.gs-secim-not {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .5;
}

/* Seçilmemiş şube kırmızı çerçeveyle bekler — kaydetmeden önce
   doldurulacağı satırın kendisinden okunsun, düğmeye basınca öğrenilmesin. */
.gs-secim-eksik .gs-secim-kutu { border-color: var(--hata); }
.gs-secim-eksik .gs-secim-not { color: var(--metin-hata); opacity: .9; }

@media (max-width: 900px) {
  .gs-secim {
    flex-direction: column;
    gap: calc(var(--bosluk) * 1.5);
    padding: calc(var(--bosluk) * 2);
  }

  .gs-secim-alan { flex: none; }
}

.gs-tepe-dosya {
  display: block;
  margin-top: 2px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .45;
}

.gs-baska { position: absolute; right: calc(var(--bosluk) * 3); top: calc(var(--bosluk) * 3.5); }

/* Muhasebe kaydı ekranında "geri dön" sol üstte durur — sağ üst
   .gs-baska'nın aynası, örnek tasarımdaki gibi. */
.gs-geri { position: absolute; left: calc(var(--bosluk) * 3); top: calc(var(--bosluk) * 3.5); }

/* =====================================================================
   Gün Sonu kâğıdı · .gs-kagit
   ---------------------------------------------------------------------
   Gün sonu akışının üç sayfası — kontrol formu, nakit masraflar, muhasebe
   kaydı — İrsaliye Aktarımı'nın mal giriş kartıyla ve Fatura Aktarımı'nın
   detay kâğıdıyla aynı dili konuşur (2026.170 · kullanıcının kararı):
   oyuk zeminli tepede solda kırmızı başlık, altında künye satırı,
   sağda o sayfanın işleri; tablo kendi kutusunda, kâğıdın kenarından
   payla; en altta oyuk zeminli altlıkta solda not, sağda büyük rakam ve
   düğme.

   Sınıf yalnız bu üç sayfaya konur. .gs-kart kabuğunu ödünç alan öteki
   ekranlar (banka, kredi kartı, gider grupları, kullanıcılar, sıfırlama)
   eski ortalanmış tepesinde kalır — onlar bu akışın parçası değil.
   İşaretleme: 4-ekranlar/1-aktarimlar/gun-sonu-aktarimi.js
   ===================================================================== */

.gs-kagit .gs-tepe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  text-align: left;
  background: var(--oyuk);
}

.gs-tepe-yazi { min-width: 0; }

.gs-kagit .gs-tepe-baslik {
  margin: 0;
  color: var(--defter-koyu);
  letter-spacing: normal;
  text-transform: none;
}

.gs-kagit .gs-tepe-dosya {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* Sayfanın işleri sağ üstte, akışın içinde: eski .gs-baska/.gs-geri
   mutlak konumlu duruyordu ve sola yaslanan başlığın üstüne binerdi. */
.gs-tepe-sag {
  display: flex;
  flex: none;
  gap: var(--bosluk);
}

.gs-kagit .gs-baska,
.gs-kagit .gs-geri { position: static; }

/* Gün ve şube şeridi kâğıdın kendi zeminini kullanır: tepe artık oyuk,
   iki oyuk şerit üst üste gelirse ikisi de ayraç olmaktan çıkar. */
.gs-kagit .gs-secim { background: transparent; }

/* Tablo kâğıdın kenarına dayanmaz, irsaliyedeki gibi payla durur. */
.gs-kagit > .tablo-sarmal {
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
}

.gs-kagit .gsk-altlik {
  /* Not solda kalan payı alır; rakam ve düğmeler sağda toplanır. Notun
     olmadığı sayfada (muhasebe kaydı) düğmeler yine sağda durur. */
  justify-content: flex-end;
  gap: calc(var(--bosluk) * 2.5);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-top: 1px solid var(--kart-kenar);
  border-bottom: 0;
  background: var(--oyuk);
}

/* Not solda kalan payı alır, rakam ile düğme sağda toplanır. */
.gs-kagit .gsk-altlik-not { flex: 1 1 180px; }

.gs-altlik-toplam {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: none;
  text-align: right;
}

.gs-altlik-toplam > span:first-child {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

/* Toplam fark faturanın genel toplamıyla aynı boyda durur: sayfanın tek
   ana rakamı odur. Sıfırsa soluk kalır — "tuttu" demenin sessiz yolu. */
.gs-altlik-toplam .gs-fark {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
}

@media (max-width: 899.98px) {
  .gs-kagit .gs-tepe {
    flex-direction: column;
    gap: var(--bosluk);
    padding: calc(var(--bosluk) * 2);
  }

  /* Telefonda tablo kâğıdın kenarına yaklaşır: dört sütun 390px'e zaten
     zor sığıyor, yanlardan alınan her piksel satır adından gidiyor ve
     "Personel İkramı" hece hece kırılıyordu. */
  .gs-kagit > .tablo-sarmal { margin: var(--bosluk) calc(var(--bosluk) / 2); }

  .gs-kagit .gsk-altlik {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--bosluk) * 1.5);
    padding: calc(var(--bosluk) * 2);
  }

  /* Alt alta dizilen sütunda "flex: 1 1 180px" YÜKSEKLİK temeli olur:
     not bloğu 180px'e uzayıp altına kocaman bir boşluk bırakıyordu. */
  .gs-kagit .gsk-altlik-not { flex: none; }

  .gs-altlik-toplam {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk);
    width: 100%;
  }

  .gs-kagit .gsk-altlik .dugme-birincil { width: 100%; }
}

.gs-tablo {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Sütun başlıkları düz durur — büyük harf ve aralıklı değil, gönderilen
   örnek tasarımdaki gibi soluk gri ve normal ağırlıkta. */
.gs-tablo thead th {
  height: var(--tablo-baslik-satir);
  padding: 0 calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 700;
  color: var(--metin);
}

.gs-tablo td {
  height: var(--tablo-giris-satir);
  padding: 0 calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
}

.gs-tablo tbody tr:last-child td { border-bottom: 0; }

/* Parasal sütunlar sağa yaslı; başlık da öyle, yoksa göz iki ayrı yere
   bakar (bkz. 2-tasarim/bilesenler.css · aynı düzeltme tabloda da yapıldı). */
.gs-tablo th.gs-para,
.gs-tablo td.gs-para {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Sütun genişlikleri sabit: parasal üç sütun ölçüsünü korur, kalan bütün
   pay satır adına gider. Eskiden sütunlar içeriğe göre büyüyüp
   küçülüyordu — bir kutuya yazdıkça ad sütunu daralıp genişliyor ve
   tablo oynuyordu. */
.gs-tablo th.gs-para:nth-child(2),
.gs-tablo td.gs-para:nth-child(2) { width: 132px; }

.gs-tablo th:nth-child(3),
.gs-tablo td:nth-child(3) { width: 168px; }

.gs-tablo th:nth-child(4),
.gs-tablo td:nth-child(4) { width: 132px; }

/* =====================================================================
   Gün Sonu · ikili düzen
   ---------------------------------------------------------------------
   Solda o an yapılan iş, sağda işlenmiş gün sonları — İrsaliye
   Aktarımı'nın düzeninin aynısı (2026.172 · kullanıcının kararı).
   Kırılım orada olduğu gibi 1200'dür: dar ekranda iki sütun yan yana
   durmaz, liste tablonun altına iner.

   Oran 8/4: soldaki karşılaştırma tablosu dört sütun taşıyor (üçü sabit
   ölçülü parasal sütun), sağdaki liste ise tarih · rapor no · tutar —
   üçü de kısa. Eşit bölünseydi sol sütunda satır adına pay kalmazdı.

   Nakit masraflar, muhasebe kaydı ve "işlendi" sayfaları .gs-tek ile
   tek sütuna döner: onlar odaklanılan ara adımlardır, sekiz sütunlu
   defter blokları bütün genişliği ister.
   ===================================================================== */

.gs-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 3);
  align-items: start;
}

@media (min-width: 1200px) {
  .gs-ikili:not(.gs-tek) {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

.gs-tek .gs-sag { display: none; }

/* Sütunun içindeki kart ortalanmaz ve genişliğini sınırlamaz: kolon
   zaten ölçüyü veriyor. Tek sütunda eski 900px'lik ölçü geri gelir. */
.gs-sol > .gs-kart,
.gs-sag > .gs-kart {
  max-width: none;
  margin: 0;
}

.gs-tek .gs-sol > .gs-kart { max-width: 900px; margin: 0 auto; }
.gs-tek .gs-sol > .gsd-kart { max-width: 1160px; }

/* Sütunlar alt alta düştüğünde kart eski ölçüsüne döner: geniş ekranda
   tek başına uzayan bir form kâğıdı okunmuyor. */
@media (max-width: 1199.98px) {
  .gs-sol > .gs-kart,
  .gs-sag > .gs-kart { max-width: 900px; margin: 0 auto; }

  .gs-sol > .gsd-kart { max-width: 1160px; }
}

/* İşlenmiş günler · sağ sütunun kartı. Liste uzarsa kendi içinde kayar,
   sayfa aşağı uzamaz. */

.gs-kayit-liste {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 calc(var(--bosluk) * 2) calc(var(--bosluk) * 2);
}

.gs-kayitlar .gs-islenmis-satir:first-child { border-top: 0; }

.gs-kayit-bos {
  padding: calc(var(--bosluk) * 3) 0;
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* ---- Elle giriş · karşılaştırma kapalı ----
   Samba dosyası olmadan girilen gün sonunda tablo iki sütuna iner: satır
   adı ve tutar. Dördüncü-sütun ölçüleri burada geçmez; tutar sütunu
   giriş kutusu taşıdığı için Gerçekleşen'in genişliğini alır.
   (2026.171 · kullanıcının kararı) */

.gs-tablo-elle th.gs-para:nth-child(2),
.gs-tablo-elle td.gs-para:nth-child(2),
.gs-tablo-elle th:nth-child(2),
.gs-tablo-elle td:nth-child(2) { width: 168px; }

/* Dosyasız yol · yükleme ekranının altında duran ikinci kapı. */

.gs-elle-yol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) * 2);
  margin-top: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  background: var(--oyuk);
}

.gs-elle-not {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

/* "Satır ekle" tablonun içinde, ait olduğu grubun hemen altında durur:
   veresiye satırı veresiyelerin arkasına eklenir, listenin dışında bir
   düğme aranmaz. */

.gs-ekle-satir td {
  padding: var(--bosluk) calc(var(--bosluk) * 2);
  background: var(--oyuk);
}

@media (max-width: 899.98px) {
  .gs-elle-yol {
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--bosluk) * 2);
  }

  .gs-tablo-elle th.gs-para:nth-child(2),
  .gs-tablo-elle td.gs-para:nth-child(2),
  .gs-tablo-elle th:nth-child(2),
  .gs-tablo-elle td:nth-child(2) { width: 132px; }
}

/* Muhasebe kaydı tablosu (kayitCiz) üç sütunlu: Hesap, Borç, Alacak.
   Genel dördüncü-sütun kuralı burada geçerli değil — Alacak, Borç ile
   aynı genişliği alır. */
.gsk-tablo th:nth-child(3),
.gsk-tablo td:nth-child(3) { width: 132px; }

.gs-ad {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tutarın yanında küçük soluk ₺: sayı kendi punto ve renginde kalır,
   sembol onu bastırmaz (bkz. 2-tasarim/bilesenler.css · ".hesap-tutar-birim" —
   aynı kural). currentColor'ı devralır: farkta kırmızı, vurguda koyu. */
.gs-tl {
  margin-left: 3px;
  font-size: var(--etiket-boy);
  opacity: .6;
  font-variant-numeric: normal;
}

/* Bant: bir bölüm ayracı — Satış İndirimleri, Fireler, Ödeme Yöntemleri,
   Yemek Platformları, Cari Hesap. Toplam taşımaz, yalnız başlığı; toplamı
   görmek isteyen altındaki satırları okur. Zemin rengi YALNIZ burada
   durur; tablodaki geri kalan her satır beyazdır.

   Zemin üst çubukla AYNI kırmızı (dolu var(--vurgu), soluk tint değil) —
   "belli olsun" dendi. Metin beyaz ve büyük durur, tıpkı üst çubuktaki
   gibi (aynı .gs-band'i Muhasebe Kaydı ekranı da paylaşır, bkz.
   bolumHtml()). */
.gs-band td {
  height: 44px;
  background: var(--vurgu);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--yuzey);
}

/* Bütün alt satırlar (açılabilir grup başlığı, ara toplam, yaprak) aynı
   hizada durur — tek girinti, kademe yok. Kademelenme (kat kat girinti)
   merdiven gibi duruyordu ve iç içeliği anlatmıyordu, yalnız dağınık
   görünüyordu; hangi satırın hangi gruba ait olduğu artık bant başlığından
   ve kalınlıktan okunuyor. */
.gs-satir .gs-ad { padding-left: calc(var(--bosluk) * 4); }

/* Açılabilir grup başlığı (İkramlar, Kredi Kartı, her banka, Havale) ve
   açılamayan ara toplam (Toplam Nakit, Tahsilat, Veresiye) aynı kalınlıkta
   yazılır — ikisi de "bu bir toplam" der. Zemin farkı yoktur: ok tek
   başına "buraya basılır" demeye yeter, iki ayrı işaret aynı şeyi iki kere
   söylemez. */
.gs-acilir td,
.gs-alt-toplam td { font-weight: 600; }

.gs-acilir[data-grup] { cursor: pointer; }

/* Ok grubun açık mı kapalı mı olduğunu söyler; kapalı satırda sağa,
   açıkken aşağı bakar (▸/▾ metin karakteri olarak kendisi döner, ok
   burada yalnız yerleşimini alır). */
.gs-ok {
  display: inline-block;
  width: 14px;
  margin-left: calc(var(--bosluk) * -2);
  margin-right: 2px;
  color: var(--gri-vurgu);
  font-size: 10px;
  opacity: .85;
}

/* Grubun gerçekleşen toplamı, girdi sütununun hizasında ama kutu değil:
   üst satıra elle yazılmaz, altındakilerden toplanır. */
.gs-grup-ger { opacity: .8; }

/* Brüt Satış ve Net Satış: sayfanın iki ana rakamı, ayrıntı değil —
   girintisiz, kalın, üstü çizgili. */
.gs-vurgu td {
  height: 54px;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-weight: 600;
  border-top: 2px solid var(--kenar);
}

/* Toplam Fark: sayfanın son satırı, beyaz zeminde kalın ve üstü çizgili
   durur — renk yalnız kırmızı bant başlıklarında, burada değil. */
.gs-toplam td {
  height: 56px;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-weight: 700;
  border-top: 2px solid var(--kenar);
  border-bottom: 0;
}

/* Girdi kutusu sütun başlığıyla aynı hizada bitmeli: hücre sağa
   yaslanır, yoksa "GERÇEKLEŞEN" başlığı kutunun sağından taşıyor ve göz
   iki ayrı yere bakıyordu. */
.gs-giris {
  padding: 0 calc(var(--bosluk) * 2);
  text-align: right;
}

.gs-kutu-sarma { position: relative; display: inline-block; }

/* ---- Genel İkram dökümü (2026.208) ----
   Tutarın solunda küçük bir "+" durur: satır kutusuz olduğu için tıkla-
   nacak bir yer lazım, ama rakamın kendisi ana bilgi olarak kalmalı.
   Bu yüzden düğme rakamın yerini almaz, önüne iliştirilir. */
.gs-dokum {
  margin-inline-end: calc(var(--bosluk) * .75);
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--kenar);
  border-radius: 7px;
  background: var(--yuzey);
  color: var(--defter-koyu);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.gs-dokum:hover { border-color: var(--defter-koyu); }

.gsi-not {
  margin: 0 0 calc(var(--bosluk) * 2);
  color: var(--metin-ikincil);
  font-size: var(--etiket-boy);
}

/* Döküm penceresi · üstte TEK kayıtlık form, altında eklenenlerin
   listesi (2026.210 · kullanıcının kararı: "altta bir daha ikram ekli
   olmasın, tek kayıt kayıt olsun; gönderince bir daha gönderebilirsin").
   Alanlar alt alta durur: yan yana beş kutu sığmıyordu (2026.208). */
.gsi-form {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5);
  border: 1px solid var(--kenar);
  border-radius: 12px;
  background: var(--yuzey);
}

.gsi-alan { display: flex; flex-direction: column; gap: calc(var(--bosluk) * .5); }

.gsi-etiket {
  font-size: var(--etiket-boy);
  color: var(--metin-ikincil);
}

.gsi-alan .alan-kutu, .gsi-alan .trh { width: 100%; }

/* Tutar kutusu tek başına dar kalmasın: formun içinde tam genişlik alır,
   ₺ işareti sağ kenarda durur. */
.gsi-tutar { display: block; width: 100%; }
.gsi-tutar .gs-kutu { max-width: none; }

.gsi-uyari {
  margin-top: var(--bosluk);
  color: var(--metin-hata);
  font-size: var(--etiket-boy);
}

.gsi-ekle { margin-top: calc(var(--bosluk) * 1.5); width: 100%; }

/* Eklenenler · her biri tek satır: künye solda, tutar sağda, Sil sonda.
   Kutu değil yazı, çünkü artık düzeltilmiyor — silinip yeniden yazılır. */
.gsi-liste {
  list-style: none;
  margin: calc(var(--bosluk) * 2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.gsi-kayit {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: var(--bosluk) 0;
}

.gsi-kayit + .gsi-kayit { border-top: 1px solid var(--kenar); }

.gsi-kayit-yazi {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--etiket-boy);
  overflow-wrap: anywhere;
}

.gsi-kayit-tutar {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Toplam en altta, kalın ve tek satır: kaç lira yazıldığı pencereyi
   kapatmadan görünsün. */
.gsi-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 2);
  padding-top: calc(var(--bosluk) * 1.5);
  border-top: 1px solid var(--kenar);
}

.gsi-toplam b {
  font-size: calc(var(--govde-boy) * 1.15);
  font-variant-numeric: tabular-nums;
}

/* ₺, kutunun İÇİNE yazılamayacağı için üstüne bindirilir: input tek
   başına aynı kalır, ₺ yalnız görsel bir kaplama. */
.gs-kutu-tl {
  position: absolute;
  right: calc(var(--bosluk) * 1.25);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--etiket-boy);
  opacity: .4;
  pointer-events: none;
}

/* Gerçekleşen kutusu: yuvarlak kenarlı bir kutu, gönderilen örnek
   tasarımdaki gibi. Arkaplanı HER ZAMAN beyazdır — dosyadan gelen bir
   değer olsa da olmasa da, kullanıcı yazsa da yazmasa da kutu aynı
   kalır; renk "bunu ben mi doldurdum, dosya mı doldurdu" sorusuna cevap
   vermeye çalışmaz, o bilgi kenar rengindedir (gs-dolu). */
.gs-kutu {
  width: 100%;
  max-width: 150px;
  height: 34px;
  padding: 0 calc(var(--bosluk) * 3.25) 0 var(--bosluk);
  border: 1px solid var(--kenar);
  border-radius: 10px;
  background: var(--yuzey);
  color: var(--metin);
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.gs-kutu:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(183, 44, 40, .10);
}

/* Dosyadan dolu gelen satırda kenar soluktur: orada yapılacak bir iş
   kalmadı. Satır yine düzeltilebilir. Dolu (gs-dolu) kenarı koyulaşır:
   hangi satırın onaylandığı uzaktan görünür. */
.gs-kutu.gs-hazir { border-color: var(--ayirici); }
.gs-kutu.gs-dolu { border-color: var(--kenar); }
.gs-kutu.gs-hazir:hover { border-color: var(--kenar); }

/* Renk yalnız farkta ve tek anlamda: sıfır değilse bakılacak bir şey
   var. İki yön için iki ayrı renk kullanılmadı — eksik de fazla da
   açıklanması gereken bir farktır. */
.gs-fark-var { color: var(--metin-hata); }
.gs-fark-sifir { opacity: .4; }

.gs-toplam .gs-fark-var,
.gs-toplam .gs-fark-sifir {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--h2-boy);
}

.gs-rozet { border: 0; cursor: pointer; margin-left: var(--bosluk); }

/* Boş grup sessiz kalmaz: Kredi Kartı'na basınca ok dönüp altından hiçbir
   banka çıkmıyordu ve ekranın bozuk olduğu sanılıyordu — oysa 108'in
   altında hesap yoktu. */
.gs-bos-grup td {
  padding-left: calc(var(--bosluk) * 4);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
  white-space: normal;
}

/* Cari adı bölünmeyen uzun bir dizgi olabilir ("ÖRNEKCARİ-0000000000") ve
   tek başına ad sütununu iki katına çıkarıyor. Yalnız o satırlarda
   kelime ortasından kırılmaya izin verilir; öteki satırlarda Türkçe
   kelimeler bütün kalır. */
.gs-satir-cari .gs-ad { overflow-wrap: anywhere; }

/* ---- Okunmayan satırlar ---- */
.gs-okunmayan {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--bosluk) * 1.75);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
}

.gs-okunmayan-baslik { font-weight: 500; }

.gs-okunmayan-not {
  margin: calc(var(--bosluk) * .5) 0 var(--bosluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.gs-okunmayan-liste {
  margin: 0;
  padding-left: calc(var(--bosluk) * 2.5);
  font-size: var(--kucuk-boy);
  line-height: calc(var(--kucuk-satir) * 1.4);
  font-variant-numeric: tabular-nums;
}

/* ---------- Gider Grupları ----------
   Gün sonu ekranlarının .gs-kart kabuğunu ödünç alır: bu da bir A4
   yaprağıdır, yalnız içinde tablo değil açılır gruplar durur. Her grup
   bir başlık, altında o grubun gider adları — her biri 700 Giderler'in
   bir alt hesabı (5-veritabani/2-guncellemeler/21). */
.gg-yukleme {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
  font-size: var(--kucuk-boy);
}

.gg-yukleme-metin { flex: 1; opacity: .7; }

.gg-grup { border-bottom: 1px solid var(--ayirici); }
.gg-grup:last-of-type { border-bottom: 0; }

.gg-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  width: 100%;
  min-height: 48px;
  padding: 0 calc(var(--bosluk) * 2);
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gg-baslik:hover { background: var(--oyuk); }
.gg-acik > .gg-baslik { background: var(--oyuk); }

/* Önizlemede ve "Grubu olmayanlar" başlığında düğme yok: açılıp
   kapanmaz, yalnız başlıktır. */
.gg-baslik-duz { cursor: default; }
.gg-baslik-duz:hover { background: none; }
.gg-acik > .gg-baslik-duz { background: var(--oyuk); }

.gg-ok { width: 12px; opacity: .45; font-size: 11px; }
.gg-ad { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.gg-say { font-size: var(--kucuk-boy); opacity: .5; white-space: nowrap; }

.gg-icerik { padding: 0 calc(var(--bosluk) * 2) var(--bosluk); }

.gg-kalem {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  min-height: 38px;
  padding: 0 var(--bosluk) 0 calc(var(--bosluk) * 3);
  border-top: 1px solid var(--ayirici);
}

.gg-kalem-kod {
  min-width: 54px;
  font-size: var(--etiket-boy);
  font-weight: 700;
  opacity: .35;
  font-variant-numeric: tabular-nums;
}

.gg-kalem-ad { flex: 1; font-size: var(--kucuk-boy); overflow-wrap: anywhere; }

.gg-kalem-eylem {
  display: flex;
  gap: var(--bosluk);
  font-size: var(--etiket-boy);
  white-space: nowrap;
}

/* Satır içi metin düğmesi: listeyi kalabalıklaştırmasın diye çerçevesiz. */
.gg-bag {
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--vurgu);
  font: inherit;
  font-size: var(--etiket-boy);
  cursor: pointer;
}

.gg-bag:hover { background: var(--oyuk); text-decoration: underline; }

.gg-icerik-alt {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  flex-wrap: wrap;
  margin-top: var(--bosluk);
  padding-left: calc(var(--bosluk) * 3);
}

.gg-ekle {
  padding: 6px calc(var(--bosluk) * 1.5);
  border: 1px dashed var(--kenar);
  border-radius: 8px;
  background: none;
  color: var(--vurgu);
  font: inherit;
  font-size: var(--kucuk-boy);
  cursor: pointer;
}

.gg-ekle:hover { border-color: var(--vurgu); background: var(--oyuk); }

.gg-form {
  display: flex;
  gap: var(--bosluk);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--bosluk);
  padding-left: calc(var(--bosluk) * 3);
}

/* Grup formu satırın kendi yerinde açılır, girinti almaz. */
.gg-form-grup { margin: 0; padding: var(--bosluk) calc(var(--bosluk) * 2); }

.gg-kutu {
  flex: 1;
  min-width: 180px;
  height: 34px;
  padding: 0 var(--bosluk);
  border: 1px solid var(--vurgu);
  border-radius: 10px;
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  box-shadow: 0 0 0 3px rgba(183, 44, 40, .10);
}

.gg-kutu:focus { outline: none; }

.gg-bos {
  padding: var(--bosluk) 0 var(--bosluk) calc(var(--bosluk) * 3);
  border-top: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  opacity: .55;
}

.gg-bos-buyuk {
  padding: calc(var(--bosluk) * 4) calc(var(--bosluk) * 2);
  border-top: 0;
  text-align: center;
}

.gg-devam {
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-top: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  opacity: .5;
}

.gg-altlik {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  flex-wrap: wrap;
  padding: calc(var(--bosluk) * 2);
  border-top: 1px solid var(--kenar);
  background: var(--yuzey);
}

.gg-altlik-not {
  flex: 1;
  min-width: 200px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

/* Excel önizlemesinin dört sayacı: ne okundu, ne yazılacak. */
.gg-ozet {
  display: flex;
  gap: var(--bosluk);
  flex-wrap: wrap;
  padding: calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--ayirici);
}

.gg-ozet-kutu {
  flex: 1;
  min-width: 120px;
  padding: calc(var(--bosluk) * 1.5);
  background: var(--oyuk);
  border-radius: var(--kose-kutu);
  text-align: center;
}

.gg-ozet-sayi {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gg-ozet-etiket {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

.gg-ozet-yeni .gg-ozet-sayi { color: var(--vurgu); }

@media (max-width: 899.98px) {
  .gg-yukleme { flex-wrap: wrap; }
  .gg-kalem { padding-left: calc(var(--bosluk) * 1.5); }
  .gg-kalem-kod { min-width: 46px; }
  .gg-icerik-alt,
  .gg-form { padding-left: calc(var(--bosluk) * 1.5); }
  .gg-ozet-kutu { min-width: 100px; }
}

/* ---------- Gün sonu · işlenmiş raporlar ----------
   Sağ sütunun kartında durur (2026.172 · "Gün Sonu Kayıtları"). Gün sonu
   fişi çok bacaklı olduğu için defterden düzeltilemiyor (bkz.
   5-veritabani/2-guncellemeler/20); bir yanlış görülürse rapor buradan
   açılır, düzeltilir ve yeniden işlenir. */
.gs-islenmis-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  width: 100%;
  min-height: 44px;
  padding: calc(var(--bosluk) / 2) var(--bosluk);
  border: 0;
  border-top: 1px solid var(--ayirici);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gs-islenmis-satir:hover { background: var(--oyuk); }

.gs-islenmis-tarih { font-weight: 600; font-variant-numeric: tabular-nums; }

.gs-islenmis-no {
  flex: 1;
  font-size: var(--kucuk-boy);
  opacity: .55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-islenmis-tutar {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Gün sonu · Nakit Masraflar ----------
   Karşılaştırma ile Muhasebe Kaydı arasındaki adım. Aynı .gs-kart/.gs-tepe
   kabuğunu ve aynı tabloyu kullanır — üç ekran tek görsel dilin parçası.
   Kendine ait olan yalnız üç sütunlu düzeni ve yazarak arayan hesap
   kutusudur. */
.gsm-tablo th:nth-child(2),
.gsm-tablo td:nth-child(2) { width: 268px; }

.gsm-tablo th:nth-child(3),
.gsm-tablo td:nth-child(3) { width: 168px; }

/* Öneri listesi kartın dışına taşabilmeli. .gs-kart'ta overflow:hidden
   köşeleri kırpmak için var; bu sayfada tabloda taşan bir şey yok, listeyi
   kesmesin diye kapatılır. */
.gsm-kart { overflow: visible; }
.gsm-sarma { position: relative; display: block; }

/* Açıklama kutusu: kenarlığı yok, yalnız dolunca ya da odaklanınca belli
   olur. 15 satırın her birinde çerçeve dursaydı tablo kafese dönerdi. */
.gsm-ack {
  width: calc(100% - 26px);
  height: 34px;
  padding: 0 var(--bosluk);
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--metin);
  font: inherit;
}

.gsm-ack::placeholder { opacity: .32; }
.gsm-ack:hover { border-color: var(--ayirici); }
.gsm-ack.gsm-dolu { border-color: var(--ayirici); background: var(--yuzey); }

.gsm-hesap {
  width: 100%;
  height: 34px;
  padding: 0 var(--bosluk);
  border: 1px solid var(--ayirici);
  border-radius: 10px;
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
  font-size: var(--kucuk-boy);
}

.gsm-hesap::placeholder { opacity: .32; }
.gsm-hesap.gsm-dolu { border-color: var(--kenar); }

/* Tutarı yazılmış ama hesabı seçilmemiş satır: kayıt bu satırı yazamaz,
   kenar bunu söyler. */
.gsm-hesap.gsm-eksik { border-color: var(--metin-hata); }

.gsm-ack:focus,
.gsm-hesap:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--yuzey);
  box-shadow: 0 0 0 3px rgba(183, 44, 40, .10);
}

/* Yazarak arama listesi. Seçmek zorunlu değil: tek eşleşme kalınca
   odaktan çıkmak da onu alır (4-ekranlar/1-aktarimlar/gun-sonu-aktarimi.js · blur). */
.gsm-oneri {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: block;
  padding: calc(var(--bosluk) / 2) 0;
  border: 1px solid var(--kenar);
  border-radius: 10px;
  background: var(--yuzey);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  text-align: left;
}

.gsm-oneri-satir {
  display: block;
  padding: 7px calc(var(--bosluk) * 1.25);
  font-size: var(--kucuk-boy);
  line-height: 1.35;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsm-oneri-satir + .gsm-oneri-satir { border-top: 1px solid var(--ayirici); }
.gsm-oneri-satir.gsm-secili { background: var(--oyuk); }
.gsm-oneri-kod { font-weight: 700; margin-right: 6px; }

.gsm-oneri-bos {
  display: block;
  padding: 7px calc(var(--bosluk) * 1.25);
  font-size: var(--kucuk-boy);
  line-height: 1.35;
  opacity: .6;
  white-space: normal;
}

/* Listenin dibindeki ekleme kapısı · öteki seçicilerdekiyle aynı
   görünür (2026.229): üstünde bir çizgi, hafif oyuk zemin. */
.gsm-oneri-ekle {
  border-top: 1px solid var(--kart-kenar);
  background: var(--oyuk);
  font-weight: 600;
}

.gsm-oneri-bos + .gsm-oneri-ekle { border-top: 1px solid var(--ayirici); }

/* Satır numarası: gözün kaçıncı satırda olduğunu kaybetmemesi için var,
   okunması için değil — bu yüzden çok soluk. */
.gsm-sira {
  display: inline-block;
  width: 18px;
  margin-right: var(--bosluk);
  text-align: right;
  font-size: var(--etiket-boy);
  opacity: .28;
  font-variant-numeric: tabular-nums;
}

/* ---------- Gün sonu · dar ekran ----------
   Kart kenara yaklaşır ama kaybolmaz — bir form telefonda da form gibi
   durur. Tablo telefonda da tablo kalır: dört sütun yan yana okunuyor,
   karşılaştırma ancak yan yana anlaşılıyor. Sığdırmak için boşluk, yazı
   ve girdi kutusu daraltılır. */
@media (max-width: 899.98px) {
  .gs-kart { margin-bottom: calc(var(--bosluk) * 2); border-radius: var(--kose-kutu); }

  .gs-tepe { padding: calc(var(--bosluk) * 4) calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2); }
  .gs-tepe-baslik { font-size: var(--govde-boy); line-height: var(--govde-satir); }
  .gs-baska,
  .gs-geri { position: static; display: block; margin: 0 auto calc(var(--bosluk) * 2); }

  .gs-tablo thead th,
  .gs-tablo td { padding: 0 3px; }

  /* Başlık satırı sütunu genişletmesin: "Gerçekleşen" tek satırda kalınca
     sütunu kutudan geniş yapıyordu, iki satıra inebilir. */
  .gs-tablo thead th { font-size: 10px; white-space: normal; line-height: 13px; }

  .gs-tablo td {
    height: auto;
    min-height: 48px;
    font-size: var(--kucuk-boy);
    line-height: var(--kucuk-satir);
  }

  .gs-tablo td.gs-para { font-size: 13px; }

  /* "anywhere" sütunu daraltıyordu ama sıradan kelimeleri de ortadan
     kesiyordu ("Yuvarla/ma"). "break-word" yalnız satıra sığmayan uzun bir
     kelimeyi kırar — cari adı gibi. */
  .gs-tablo th.gs-para:nth-child(2),
  .gs-tablo td.gs-para:nth-child(2) { width: 76px; }

  .gs-tablo th:nth-child(3),
  .gs-tablo td:nth-child(3) { width: 78px; }

  .gs-tablo th:nth-child(4),
  .gs-tablo td:nth-child(4) { width: 82px; }

  /* Muhasebe kaydı tablosu üç sütunlu: Alacak (3.) Borç'un mobil
     genişliğini alır, dört sütunluk karşılaştırma tablosunun 78px'lik
     üçüncü-sütun kuralı burada geçerli değil. */
  .gsk-tablo th:nth-child(3),
  .gsk-tablo td:nth-child(3) { width: 76px; }

  /* Nakit masraflarda üç sütunun üçü de yazı taşır: karşılaştırma
     tablosundaki 76-78px'lik parasal sütun ölçüleri buraya uymaz, hiçbir
     hesap adı o genişliğe sığmaz. Tablo ekrana sığmaya çalışmak yerine
     kendi ölçüsünde kalır ve yana kayar (.tablo-kutu) — açıklama sütunu
     ezilip "Ekmek a" diye kesilmesin. */
  .gsm-tablo { min-width: 520px; }

  .gsm-tablo th:nth-child(2),
  .gsm-tablo td:nth-child(2) { width: 176px; }

  .gsm-tablo th:nth-child(3),
  .gsm-tablo td:nth-child(3) { width: 104px; }

  .gsm-ack,
  .gsm-hesap { height: 30px; font-size: var(--kucuk-boy); }
  .gsm-sira { width: 14px; margin-right: 4px; }
  .gsm-ack { width: calc(100% - 18px); }

  /* Masraf tutarı da yazı kutusu kadar yer ister: karşılaştırmadaki 74px
     burada "1.340,00"ı kırpıyordu. */
  .gsm-tablo .gs-kutu { max-width: 92px; }

  /* Düğmenin yanındaki açıklama telefonda dar bir sütuna sıkışıyordu;
     alta iner ve tam genişliği alır. */
  .gsk-altlik { flex-direction: column; align-items: stretch; }
  .gsk-altlik-not { flex: none; }

  .gs-ad { overflow-wrap: break-word; white-space: normal; }

  /* Dört sütun 390px'e sığmıyor: sabit ölçülü üç parasal sütundan sonra
     satır adına 55px kalıyor ve "Personel İkramı" harf harf, dikey bir
     şerit gibi kırılıyordu (kararlar.md · açık nokta). Tablo artık ekrana
     sığmaya çalışmıyor, kendi ölçüsünde kalıp KENDİ KUTUSUNDA yana kayıyor
     — nakit masraf tablosu da 899'un altında böyle davranıyor
     (.gsm-tablo · min-width). Dört sütun hâlâ yan yana okunur, yalnız
     hepsini görmek için parmakla kaydırılır. */
  .gs-tablo { min-width: 460px; }

  .gs-tablo-elle { min-width: 320px; }

  /* Telefonda girinti yarıya iner: 32px'lik pay satır adından gidiyor ve
     "Personel İkramı" hecesinden bölünüyordu. */
  .gs-kagit .gs-satir .gs-ad { padding-left: calc(var(--bosluk) * 2); }

  .gs-satir .gs-ad,
  .gs-bos-grup td { padding-left: calc(var(--bosluk) * 1.75); }

  .gs-ok { margin-left: 0; width: 12px; }

  /* ₺ girdi kutusunun içinde dar ekranda kalkar: ayrılan pay basamağı
     kırpıyordu ("3.740,00" son hanesi kutudan taşıyordu). Kutunun kendi
     kenarındaki değer zaten Samba ve Fark sütunlarında ₺'yle duruyor,
     girdi kutusunda tekrarına gerek yok — burada asıl olan rakamın tam
     okunmasıdır. */
  .gs-kutu { max-width: 74px; height: 26px; padding: 0 4px; font-size: 13px; }
  .gs-kutu-tl { display: none; }

  .gs-rozet { margin-left: 0; }

  .gs-toplam .gs-fark-var,
  .gs-toplam .gs-fark-sifir { font-size: var(--kucuk-boy); }
}

/* Telefonda parasal sütunlar bir tık daha küçülür ve payı ad sütununa
   bırakır: rakam zaten kısa, uzun olan satır adı. */
@media (max-width: 480px) {
  .gs-tablo td.gs-para { font-size: 12px; }
  .gs-kutu { max-width: 64px; font-size: 12px; }
  .gs-toplam .gs-fark-var,
  .gs-toplam .gs-fark-sifir { font-size: 13px; }
}

/* Dar telefonda (400px ve altı) son on beş piksel girdi kutusundan ve
   girintiden kısılır; tablo o zaman tam sığar. */
@media (max-width: 400px) {
  .gs-tablo thead th,
  .gs-tablo td { padding: 0 2px; }
  .gs-kutu { max-width: 72px; }
  .gs-satir .gs-ad,
  .gs-bos-grup td { padding-left: var(--bosluk); }
  .gs-ok { width: 11px; }
}


/* ---------- Gün Sonu · muhasebe kaydı önizlemesi ---------- */
/* "Kaydet"e basınca karşılaştırma tablosunun yerini bu ekran alır.
   Deftere hâlâ hiçbir şey yazılmaz: kullanıcı hangi paranın hangi hesaba
   gideceğini burada görür, yazma kararını ondan sonra verir
   (6-belgeler/sayfalar.md · "Gün Sonu Aktarımı"). */
.gsk-uyari {
  margin: 0;
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: rgba(184, 117, 3, .10);
  border-bottom: 1px solid var(--kenar);
  color: var(--metin-uyari);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Engel uyarısı ayrı renkte: bunlar düzeltilmeden düğme çalışmaz. */
.gsk-uyari-engel {
  background: rgba(183, 44, 40, .09);
  color: var(--metin-hata);
}

/* Teknik tablo artık BİRİNCİL görünüm — kapalı bir "muhasebe dilinde
   göster" anahtarının arkasında durmuyor, ekran açılır açılmaz görünür
   (6-belgeler/kararlar.md). Kendisi 2-tasarim/ekranlar.css'teki .gs-tablo/.gs-band'i
   aynen kullanır (sütun genişlikleri de dahil, bkz. ".gsk-tablo" satırları
   yukarıda); burada yalnız hesap-satırına özgü küçük parçalar (kod,
   açıklama) durur. */
.gsk-kod {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
}

/* Bacağın hangi satırdan geldiği altında küçük yazıyla durur: "Toplam
   Nakit", "Garanti Bankası · kart". Kullanıcı rakamı önizlemedeki
   satıra buradan bağlar. */
.gsk-ack {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

/* ---- Muhasebe kaydı · hesap blokları (gsd) ----
   Önizleme hesap hesap defterdir: her hesap kendi bloğunu alır, blok
   içindeki tablo Hesap Defteri'nin kendi bileşenidir (.tablo) — burada
   yalnız bloğun çerçevesi ve başlığı tanımlanır. Tablo stili
   tekrarlanmaz; iki ekranda aynı defter görünsün diye
   (4-ekranlar/1-aktarimlar/gun-sonu-aktarimi.js · blokHtml). */
/* Kayıt ekranı gün sonunun öteki sayfalarından geniştir: defter
   bloğunun sekiz sütunu 900px'e sığmıyordu. */
.gs-kart.gsd-kart { max-width: 1160px; }

.gsd-bloklar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2);
  background: var(--oyuk);
  border-bottom: 1px solid var(--kenar);
}

/* Blok, Hesap Defteri'nin kartını olduğu gibi kullanır
   (.tablo-sarmal.hd-defter): kırmızı çerçeve, ince tel, köşe çentiği,
   zemin satırlar, ortalanmış sütunlar. Burada yalnız başlık şeridi
   tanımlanır — kart, tablo ve renkler defterin kendi kurallarından
   gelir, ikinci kez yazılmaz. */
.gsd-blok { overflow: hidden; }

/* Blok başlığı hesabın kendisidir: kod · ad, sağda bugünkü bakiye.
   Defterin başlık şeridiyle aynı gri tonu, aynı kırmızı mürekkep. */
.gsd-tepe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: var(--defter-baslik);
  border-bottom: 1px solid var(--defter-koyu);
}

.gsd-tepe .gsk-kod { color: var(--defter-koyu); }

.gsd-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.gsd-bugun {
  margin-left: auto;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--defter-notr);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.gsd-bugun b { font-weight: 600; color: var(--metin); }

/* Bütün blokların sütunları AYNI ölçüde ve aynı hizada durur; esneyen
   tek sütun Açıklama'dır (kullanıcının isteği). Ölçü sabit olduğu için
   sütunu az olan blokta — kasada Şube tek, gelir hesabında hiç yok —
   artan yer açıklamaya gider ve sağdaki parasal sütunlar bütün
   bloklarda aynı çizgide kalır. Dar ekranda satır karta dönüştüğü için
   bu kurallar geçmez. */
@media (min-width: 900px) {
  .gsd-tablo { table-layout: fixed; width: 100%; }

  /* Uzun başlık ("Komisyon Oranı") kendi hücresinde iki satıra iner;
     nowrap kalsaydı yandaki sütunun üstüne taşıyordu. */
  .gsd-tablo th { white-space: normal; }

  .gsd-tablo th.tablo-yapisik-bir { width: 104px; }
  .gsd-tablo th.gsd-sut-kod { width: 92px; }
  .gsd-tablo th.gsd-sut { width: 124px; }
  .gsd-tablo th.tablo-para { width: 124px; }
  .gsd-tablo th.tablo-yapisik-sag { width: 140px; }

  /* Açıklama ölçü almaz: kalan bütün pay onundur. Uzun açıklama satır
     içinde sarar, kırpılmaz. */
  .gsd-tablo td.tablo-yardimci {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Bakiye gelmediyse sayı uydurulmaz, çizgi durur. */
.gsd-yok { opacity: .45; font-weight: 400; }

/* Toplam şeridi bloktan sonra gelir: fişin tamamı denk mi, oraya bakılır. */
.gsd-toplam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--kenar);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
}

/* Tek taraflı gider kaydı toplam şeridinde kendi yerinde durur: borç ve
   alacak sütunlarına karışmaz, denkliğe girmediği yanında yazar. */
.gsd-toplam-gider {
  margin-left: auto;
  font-weight: 500;
  opacity: .75;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.gsd-toplam-gider + .gsd-toplam-cift { margin-left: 0; }

.gsd-toplam-cift {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.gsd-toplam-cift:nth-of-type(2) { margin-left: auto; }

@media (max-width: 899.98px) {
  .gsd-bloklar { padding: var(--bosluk); gap: calc(var(--bosluk) * 1.5); }
  .gsd-tepe { padding: var(--bosluk) calc(var(--bosluk) * 1.5); }
  .gsd-bugun { margin-left: 0; width: 100%; }
}

/* Borç ile alacak yapı gereği hep denktir (muhasebeKaydi() farkı otomatik
   "Kasa farkı" bacağıyla kapatır) — bu yüzden şart değil, ONAY: kullanıcı
   kaydın dengede olduğunu görüp rahatlasın. */
.gsk-denge {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: rgba(47, 125, 83, .14);
  border-bottom: 1px solid var(--kenar);
  color: var(--metin-basari);
  font-size: var(--kucuk-boy);
  font-weight: 600;
}

.gsk-denge svg { flex: none; }

.gsk-not {
  margin: 0;
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
}

.gsk-alan {
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border-bottom: 1px solid var(--kenar);
}

.gsk-alan label {
  display: block;
  margin-bottom: calc(var(--bosluk) * .75);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.gsk-altlik {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border-bottom: 1px solid var(--kenar);
}

.gsk-altlik-not {
  flex: 1;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

.gsk-bitti {
  padding: calc(var(--bosluk) * 5) calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border-top: 1px solid var(--kenar);
  border-bottom: 1px solid var(--kenar);
  text-align: center;
}

.gsk-yuvarlak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto calc(var(--bosluk) * 1.5);
  border-radius: 50%;
  background: rgba(47, 125, 83, .14);
  color: var(--metin-basari);
}

.gsk-bitti h3 {
  margin: 0 0 calc(var(--bosluk) * .5);
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
}

.gsk-bitti p {
  margin: 0 0 calc(var(--bosluk) * 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.gsk-bitti .gsk-altlik {
  justify-content: center;
  padding: 0;
  border-bottom: 0;
}

/* ---------- Banka Aktarımı ----------
   Üç adım, iki kabuk. Banka seçimi ve dosya bırakma sade bir sütundur;
   önizleme kendi geniş kartında durur; muhasebe kaydı Gün Sonu'nun
   .gs-kart kabuğunu olduğu gibi kullanır — iki ekran tek görsel dilin
   parçasıdır (4-ekranlar/1-aktarimlar/banka-aktarimi.js).

   Kaynak: 6-belgeler/sayfalar.md · "Banka Aktarımı" */

.ba-secim {
  max-width: var(--form-en);
  margin: 0 auto;
}

.ba-secim-baslik {
  margin: 0 0 2px;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
}

.ba-secim-not {
  margin: 0 0 calc(var(--bosluk) * 3);
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .55;
}

.ba-bankalar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--bosluk) * 2);
  margin-bottom: calc(var(--bosluk) * 3);
}

.ba-banka {
  display: block;
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  text-align: center;
  cursor: pointer;
  color: var(--metin);
  font: inherit;
}

/* Seçili banka kenarıyla belli olur, gölgeyle değil: kart havada durmaz
   (bkz. 2-tasarim/degiskenler.css · "Malzeme"). */
.ba-banka.ba-secili {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 2px rgba(183, 44, 40, .16), var(--golge);
}


.ba-banka-plaka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto calc(var(--bosluk) * 1.5);
  border-radius: 12px;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-weight: 700;
}

/* Plakalar bankaların kendi rengini taşımaz — uygulamanın paletinden üç
   ayrı ton alır; amaç marka taklidi değil, üçünü birbirinden ayırmak. */
.ba-p-garanti { background: rgba(47, 125, 83, .13); color: var(--metin-basari); }
.ba-p-kuveyt { background: rgba(47, 111, 176, .13); color: var(--metin-bilgi); }
.ba-p-ziraat { background: rgba(110, 116, 124, .14); color: var(--gri-vurgu); }

.ba-banka-ad {
  display: block;
  font-weight: 600;
  font-size: var(--govde-boy);
}

.ba-banka-alt {
  display: block;
  margin-top: 3px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .45;
}

.ba-hesap-not {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  margin: calc(var(--bosluk) * 2) 0 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
}

.ba-hesap-not svg { flex: none; }

/* ---- Önizleme kartı ----
   On sütunlu bir defter satırı 900px'e sığmaz; kart kendi genişliğini
   alır ve tablo .tablo-kutu içinde yana kayar (2-tasarim/bilesenler.css).
   Yeni bir kırılım noktası açılmadı — gövde yana kaymaz, yalnız tablo
   kayar. */
/* Tablo on sütunluydu, dokuz kaldı ama yine geniş: kart 1640px'e
   çıkarıldı (2026.187 · kullanıcının kararı) — geniş ekranda hesap adı
   ve banka açıklaması kırpılmadan okunsun. */
.ba-kart {
  max-width: 1640px;
  margin: 0 auto calc(var(--bosluk) * 3);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  overflow: hidden;
}

.ba-tepe {
  position: relative;
  padding: calc(var(--bosluk) * 3.5) calc(var(--bosluk) * 3) calc(var(--bosluk) * 2.5);
  text-align: center;
  border-bottom: 1px solid var(--ayirici);
}

.ba-tepe-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ba-tepe-alt {
  display: block;
  margin-top: 4px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .5;
}

.ba-sol { position: absolute; left: calc(var(--bosluk) * 3); top: calc(var(--bosluk) * 3.5); }
.ba-sag { position: absolute; right: calc(var(--bosluk) * 3); top: calc(var(--bosluk) * 3.5); }

/* Dört sayı: dosyadan ne çıktığı tek bakışta. */
.ba-oz {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ayirici);
}

.ba-oz-h {
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-right: 1px solid var(--ayirici);
}

.ba-oz-h:last-child { border-right: 0; }

.ba-oz-e {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .5;
}

.ba-oz-d {
  margin-top: 2px;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ba-oz-d.uy { color: var(--metin-uyari); }

/* ---- Defter tablosu ---- */
/* min-width ölçülerek kondu, yuvarlak bir sayı değil: 1440px'lik bir
   ekranda yan panelden sonra sayfaya 1133px, .sayfa-icerik'in 16px'lik
   iki yanından sonra karta 1101px kalıyor (ölçüldü) — tablo oraya
   sığmalı, yoksa her satırda yatay kaydırma gerekir. Parasal üç sütun
   ile Tarih ve Gider Hesabı en uzun içeriklerinin ölçüsünü alır — bir
   tutarın kırpılması kabul edilemez. "No" sütunu da öyle: Kuveyt Türk'te
   bir günün POS satırları "535–554" gibi geniş bir aralık yazıyor ve
   yarım okunan bir aralık hiç okunmamış sayılır. İşlem Adı ve İlgili
   Hesap gerekirse
   üç noktayla biter. Artan payı İKİ sütun paylaşır: Açıklama ve Banka
   Açıklaması (ikisinin de col kuralında en yoktur). Tek başına banka
   açıklamasına verilseydi kullanıcının yazdığı açıklama dar ekranda
   okunamayacak kadar kısalıyordu. Daha dar
   ekranda tablo .tablo-kutu içinde kayar; sayfa gövdesi kaymaz. */
.ba-tablo {
  width: 100%;
  min-width: 1094px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Başlık sarar, kırpılmaz: on sütunlu bir tabloda "Banka Açıklaması"
   dar ekranda tek satıra sığmıyor ve nowrap onu sessizce kesiyordu —
   başlığı yarım okumak sütunu bilmemekle aynı şey. Sardığında satır
   yükselir, ölçü yerinde kalır. Rakamlar sarmaz (td.sag nowrap). */
.ba-tablo thead th {
  height: auto;
  padding: 7px var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
  vertical-align: bottom;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 700;
}

.ba-tablo td {
  height: 46px;
  padding: 0 var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
  font-size: var(--kucuk-boy);
  /* table-layout:fixed tek başına kırpmaz; her hücre kendi taşmasını
     yutmalı, yoksa uzun banka açıklaması Borç sütununun üstüne biner. */
  overflow: hidden;
}

.ba-tablo td > * { max-width: 100%; }
.ba-tablo tbody tr:last-child td { border-bottom: 0; }

.ba-tablo th.sag,
.ba-tablo td.sag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Sütun genişlikleri sabit: parasal üç sütun ile hesap kutuları ölçüsünü
   korur, artan pay banka açıklamasına gider — eşleştirmenin okunduğu yer
   orasıdır. */
.ba-tablo col.c-tar { width: 104px; }
.ba-tablo col.c-isl { width: 132px; }
/* Numara kalktı, hücrede yalnız hesabın adı duruyor: pay adlara geçti. */
.ba-tablo col.c-hes { width: 190px; }
/* Gider Hesabı artık doldurulan bir sütun (para çıkan satırlarda
   zorunlu): ilgili hesapla aynı payı alır, kod + ad sığsın. */
.ba-tablo col.c-gid { width: 190px; }
.ba-tablo col.c-bor { width: 104px; }
.ba-tablo col.c-ala { width: 112px; }
.ba-tablo col.c-bak { width: 120px; }

.ba-islem {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-tl {
  margin-left: 2px;
  font-size: var(--etiket-boy);
  opacity: .55;
  font-variant-numeric: normal;
}

.ba-tablo .bos { opacity: .28; }

/* Birleşen satır bant başlığıyla değil kendi zemini ve rozetiyle belli
   olur: bant, ekstrenin kayıt sırasını bozuyordu ve yürüyen bakiye
   ancak o sırayla doğru okunuyor. */
.ba-birlesik { background: rgba(110, 116, 124, .07); }
.ba-birlesik td { height: 56px; }

.ba-rozet {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(110, 116, 124, .14);
  color: var(--gri-vurgu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Hesap hücresi üç durumdadır: sabit (gün sonu, komisyon), seçili ve
   bulunamadı. Üçü de aynı kutuda durur, yalnız kenar rengi değişir —
   satır yüksekliği durumdan duruma oynamasın. */
.ba-sarma { position: relative; display: block; }

.ba-hesap {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 28px;
  padding: 0 var(--bosluk);
  border: 1px solid var(--ayirici);
  border-radius: 8px;
  background: var(--oyuk);
  font: inherit;
  font-size: var(--kucuk-boy);
  color: var(--metin);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-hesap.dolu { background: var(--yuzey); border-color: var(--kenar); cursor: pointer; }
.ba-hesap.dolu:hover { border-color: var(--vurgu); }

.ba-hesap.yok {
  border-color: var(--hata);
  color: var(--metin-hata);
  background: rgba(183, 44, 40, .05);
  font-weight: 600;
  cursor: pointer;
}

.ba-hesap.ba-giris { background: var(--yuzey); border-color: var(--vurgu); cursor: text; }
.ba-hesap:focus { outline: none; border-color: var(--vurgu); }

.ba-ack {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 28px;
  padding: 0 var(--bosluk);
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: var(--kucuk-boy);
  color: var(--metin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-ack::placeholder { opacity: .32; }
.ba-ack:hover { border-color: var(--ayirici); }
.ba-ack.dolu { border-color: var(--ayirici); background: var(--yuzey); }
.ba-ack:focus { outline: none; border-color: var(--vurgu); background: var(--yuzey); }

/* Nakit çekim hücresi · gider hesabı yerine iki küçük tutar kutusu
   (2026.255 · göç 76). Firmanın aldığı komisyon ve faturanın KDV'si
   elle yazılır; altındaki satır kasaya girecek tutarı söyler. */
.ba-nakit { display: flex; flex-direction: column; gap: 3px; }

.ba-nakit-satir { display: flex; gap: 4px; }

.ba-nakit-satir label {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  font-size: 10px;
  opacity: .6;
}

.ba-nakit-kutu {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 5px;
  border: 1px solid var(--ayirici);
  border-radius: 7px;
  background: var(--yuzey);
  font: inherit;
  font-size: var(--kucuk-boy);
  color: var(--metin);
  text-align: right;
}

.ba-nakit-kutu:focus { outline: none; border-color: var(--vurgu); }

.ba-nakit-alt {
  font-size: 10px;
  opacity: .7;
  white-space: nowrap;
}

.ba-nakit-alt.uy { color: var(--uyari); opacity: 1; font-weight: 600; }

/* Banka açıklaması eşleştirmenin kaynağıdır — kırpmak yerine iki satıra
   sarar; satır yüksekliği zaten iki satırı taşıyor. */
.ba-banka-ack {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--etiket-boy);
  line-height: 15px;
  opacity: .62;
  white-space: normal;
}

/* Hesap önerisi EKRANA göre konumlanır (position: fixed), hücreye göre
   değil. Sebebi ölçüldü: her hücre kendi taşmasını yutuyor
   (".ba-tablo td · overflow: hidden" — uzun banka açıklaması yan sütuna
   binmesin diye) ve mutlak konumlu liste 46px'lik hücrenin içinde
   kırpılıyordu. Liste açılıyor, DOM'da duruyor ama görünmüyordu; "hesap
   bulunamadı"ya basan kullanıcıya hiçbir şey olmuyormuş gibi geliyordu.
   Tablo kutusu (overflow-x: auto) ve kart (overflow: hidden) da aynı
   şeyi yapardı; fixed üçünü birden aşar.
   Yeri js tarafında veriliyor (4-ekranlar/1-aktarimlar/banka-aktarimi.js ·
   oneriYerlestir): kutunun altına, sığmıyorsa üstüne. */
.ba-oneri {
  position: fixed;
  z-index: 60;
  max-height: 208px;
  overflow-y: auto;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  box-shadow: 0 4px 12px -6px rgba(34, 37, 42, .3);
}

.ba-oneri-satir {
  padding: 7px var(--bosluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  cursor: pointer;
}

.ba-oneri-satir + .ba-oneri-satir { border-top: 1px solid var(--ayirici); }
.ba-oneri-satir:hover { background: var(--oyuk); }
.ba-oneri-kod { font-weight: 700; margin-right: 6px; }

/* Listenin sonundaki "yeni hesap aç" satırı: önerilerden bir çizgiyle
   ayrılır, artı işareti kırmızı durur — seçim değil, yeni bir şey açma. */
.ba-oneri-yeni {
  border-top: 1px solid var(--kenar);
  color: var(--vurgu);
  font-weight: 500;
}

.ba-oneri-yeni .ba-oneri-kod { color: var(--vurgu); }

.ba-panel-not {
  margin: 0 0 calc(var(--bosluk) * 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

.ba-oneri-bos {
  padding: 7px var(--bosluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .5;
}

.ba-toplam td {
  height: 50px;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-weight: 700;
  border-top: 2px solid var(--kenar);
  border-bottom: 0;
}

/* Kapanış denetimi: açılış + hareketler ekstrenin son bakiyesini
   vermeli. Dosya eksik okunmuşsa burada görünür — bu şerit süs değil,
   aktarımın tek nesnel ölçüsüdür. */
.ba-kontrol {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5);
  border-top: 1px solid var(--ayirici);
  background: rgba(47, 125, 83, .05);
  color: var(--metin-basari);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ba-kontrol svg { flex: none; }

.ba-uyari {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--ayirici);
  background: rgba(184, 117, 3, .08);
  color: var(--metin-uyari);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ba-uyari svg { flex: none; vertical-align: -3px; }

.ba-altlik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--ayirici);
}

.ba-altlik-not {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .55;
}

.ba-ileri { margin-left: var(--bosluk); }

/* Muhasebe kaydı Gün Sonu'nun kabuğunu kullanır; tek fark başlıktaki
   dosya satırıdır. */
/* Banka aktarımının kayıt ekranı da defter blokları taşıyor: genişliği
   .gsd-kart veriyor (1160px), burada ayrıca daraltılmaz. */

@media (max-width: 900px) {
  .ba-bankalar { grid-template-columns: 1fr; gap: var(--bosluk); }

  .ba-banka {
    display: flex;
    align-items: center;
    gap: calc(var(--bosluk) * 1.5);
    text-align: left;
    padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  }

  .ba-banka-plaka { margin: 0; width: 38px; height: 38px; }
  .ba-banka-ad { flex: 1; }

  /* Dört özet sayısı ikişerli iki sıraya iner; alttaki iki kutunun
     üstünde ayırıcı olur, yoksa iki sıra tek yığın gibi durur. */
  .ba-oz { grid-template-columns: repeat(2, 1fr); }
  .ba-oz-h:nth-child(2n) { border-right: 0; }
  .ba-oz-h:nth-child(n + 3) { border-top: 1px solid var(--ayirici); }

  .ba-tepe { padding-top: calc(var(--bosluk) * 8); }
  .ba-sol, .ba-sag { top: calc(var(--bosluk) * 2); }

  .ba-altlik { flex-direction: column; align-items: stretch; }
  .ba-altlik-not { order: 2; text-align: center; }
}

/* ---------- Sıfırlama ----------
   Ayarlar'ın içinden açılan tek amaçlı bir sayfa. Gün Sonu'nun .gs-kart
   kabuğunu kullanır — uygulamanın kâğıdı burada da aynıdır — ama iki
   şeyi başka türlü yapar: sayfa dar durur (bu bir tablo değil, bir
   karar) ve tek düğmesi yıkıcıdır.

   Renk tek yerde: uyarı şeridi ve kırmızı düğme. Silinecek satırlar
   kırmızıya boyanmaz — on satır kırmızı olsaydı hiçbiri okunmazdı,
   sayfanın tehlikesi tek bir şeritte toplanır.

   Kaynak: 6-belgeler/sayfalar.md · "Sıfırlama" */

.sf-kart { max-width: 640px; }

.sf-giris {
  margin: 0;
  padding: calc(var(--bosluk) * 2.5) calc(var(--bosluk) * 3) 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

.sf-sarmal {
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-radius: var(--kose-kutu);
}

.sf-tablo { table-layout: auto; }

.sf-tablo th,
.sf-tablo td {
  padding: 0 calc(var(--bosluk) * 2);
}

.sf-tablo th.sf-sayi,
.sf-tablo td.sf-sayi {
  width: 96px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sf-satir td { height: 44px; }

/* Sayısı sıfır olan satır soluk durur ama gizlenmez: "bunu da baktım,
   yoktu" demek, satırı hiç göstermemekten fazlasını söyler. */
.sf-bos td { opacity: .4; }

/* Açılış bakiyesi satırı silinmiyor, sıfırlanıyor: toplama girmez ve
   üstündeki çizgiyle listeden ayrılır — aynı sütunda ama aynı cinsten
   değil. */
.sf-sayilmaz td { border-top: 1px solid var(--kenar); }

.sf-ad { font-weight: 500; }

.sf-not {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 400;
  opacity: .55;
}

/* Kalacaklar listesi tabloya girmez: silinenlerle aynı biçimde
   dursaydı göz ikisini ayırmazdı. Oyuk zeminde, satır satır. */
.sf-kalan {
  margin: 0 calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  background: var(--oyuk);
  border-radius: var(--kose-kutu);
}

.sf-kalan-baslik {
  display: block;
  margin-bottom: var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--metin-basari);
  font-weight: 700;
}

.sf-kalan ul { margin: 0; padding: 0; list-style: none; }

.sf-kalan-satir {
  font-size: var(--kucuk-boy);
  line-height: 22px;
}

.sf-kalan-sayi {
  display: inline-block;
  min-width: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sf-kalan-duz { margin-top: 4px; opacity: .7; }

.sf-uyari,
.sf-temiz {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  margin: 0 calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-radius: var(--kose-kutu);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.sf-uyari {
  background: rgba(183, 44, 40, .08);
  color: var(--metin-hata);
}

.sf-temiz {
  background: rgba(47, 125, 83, .07);
  color: var(--metin-basari);
  align-items: center;
}

.sf-uyari svg,
.sf-temiz svg { flex: none; margin-top: 1px; }

/* Onay kutusu · yanlışlıkla basılmasın diye tek engel budur. */
.sf-onay {
  margin: 0 calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
}

.sf-onay label {
  display: block;
  margin-bottom: calc(var(--bosluk) * .75);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.sf-kutu {
  width: 100%;
  max-width: 240px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

@media (max-width: 900px) {
  .sf-giris,
  .sf-sarmal,
  .sf-kalan,
  .sf-uyari,
  .sf-temiz,
  .sf-onay {
    margin-left: calc(var(--bosluk) * 2);
    margin-right: calc(var(--bosluk) * 2);
  }

  .sf-giris { padding-left: 0; padding-right: 0; }
  .sf-kutu { max-width: none; }
}

/* ---------- Hareketler · Hesap Defteri ----------
   Kullanıcının gönderdiği referans tasarıma göre kuruldu. Bütün sınıflar
   hd- önekli ve YALNIZ bu ekranda geçerli: süzgeç şeridi (.suzgec) ve
   tablo (.tablo) paylaşılan bileşenlerdir — Cariler, İrsaliye Aktarımı
   ve Tekrarlayan Ödemeler de kullanır. Onların ortak stiline
   dokunulmadı; bu ekranın görünümü .hd-ekran ve .hd-defter
   niteleyicilerinin altında duruyor.

   Renkler hex olarak burada değil, 2-tasarim/degiskenler.css'te --defter-*
   adlarıyla duruyor.

   Kaynak: 6-belgeler/sayfalar.md · "Hareketler" */

/* ---- Sayfa kimliği ---- */
.hd-tepe {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 2);
  margin-bottom: calc(var(--bosluk) * 2.5);
}

.hd-tepe-simge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--defter-tel-soluk);
  background: var(--defter-zemin);
  color: var(--defter-koyu);
}

.hd-tepe-yazi { min-width: 0; }

.hd-tepe-baslik {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  font-family: var(--yazi-baslik);
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  color: var(--defter-koyu);
}

/* Hareket sayısı başlığın yanında küçük bir rozet: sayfanın ne kadar
   defter taşıdığı başlıkla birlikte okunsun. */
.hd-rozet {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--defter-tel-soluk);
  background: var(--oyuk);
  font-family: var(--yazi-metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
  color: var(--defter-notr);
}

.hd-tepe-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  color: var(--defter-notr);
  opacity: .8;
}

/* ---- Kontrol paneli ----
   .suzgec'in ortak kuralları duruyor; burada yalnız kabuk ve alan
   yükseklikleri eşitleniyor. */
.hd-suzgec {
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.5);
  border: 1px solid var(--defter-tel-soluk);
  border-radius: 14px;
  background: var(--defter-zemin);
  box-shadow: 0 1px 2px -1px rgba(34, 37, 42, .18);
}

.hd-suzgec .suzgec-secici,
.hd-suzgec .arama,
.hd-suzgec .hd-disari {
  height: var(--form-alan);
}

.hd-suzgec .suzgec-secici,
.hd-suzgec .arama {
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
}

.hd-suzgec .suzgec-secici:focus,
.hd-suzgec .arama-odak {
  border-color: var(--defter-koyu);
  outline: none;
}

.hd-disari {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) * .75);
  background: var(--defter-koyu);
  color: var(--yuzey);
  border-color: var(--defter-koyu);
}

.hd-disari:disabled { opacity: .45; }
.hd-disari svg { flex: none; }

/* ---- Özet kartları ---- */
.hd-ozet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--bosluk) * 2);
  margin: calc(var(--bosluk) * 2) 0 calc(var(--bosluk) * 2.5);
}

.hd-kart {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 2);
  border: 1px solid var(--defter-tel-soluk);
  border-radius: 14px;
  background: var(--defter-zemin);
  box-shadow: 0 1px 2px -1px rgba(34, 37, 42, .16);
  min-width: 0;
}

.hd-kart-simge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--oyuk);
  color: var(--defter-notr);
}

.hd-kart-yazi { min-width: 0; }

.hd-kart-etiket {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--defter-notr);
  opacity: .75;
}

.hd-kart-deger {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bakiyenin yönü renkle VE kalınlıkla anlatılır: yalnız renge
   güvenilmez (6-belgeler/NIZAM.md · Erişilebilirlik). */
.hd-kart-deger.hd-arti { color: var(--defter-arti); font-weight: 700; }
.hd-kart-deger.hd-eksi { color: var(--defter-eksi); font-weight: 700; }
.hd-kart-deger.hd-notr { color: var(--defter-notr); }

.hd-kart-alt {
  display: block;
  margin-top: 1px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .5;
}

/* ---- Defter kartı ----
   Dışta ince kırmızı çerçeve, içinde bir ince tel çizgi. İkisi ayrı
   katman: çerçeve border, ince çizgi inset gölge — böylece köşe
   yuvarlaklığı ikisinde de aynı kalır. */
.tablo-sarmal.hd-defter {
  border: 1px solid var(--defter-koyu);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk),
              0 2px 6px -4px rgba(34, 37, 42, .35);
  background: var(--defter-zemin);
  position: relative;
}

/* Köşe süsü: iki ince çizginin kesiştiği küçük bir işaret. Motif değil,
   kâğıdın köşesini işaretleyen bir çentik — okumayı hiç etkilemesin
   diye 10px ve soluk. */
.tablo-sarmal.hd-defter::before,
.tablo-sarmal.hd-defter::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--defter-tel);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

.tablo-sarmal.hd-defter::before {
  top: 5px; left: 5px;
  border-right: 0; border-bottom: 0;
}

.tablo-sarmal.hd-defter::after {
  bottom: 5px; right: 5px;
  border-left: 0; border-top: 0;
}

.hd-defter .tablo thead th {
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--defter-koyu);
  background: var(--defter-baslik);
  border-bottom: 2px solid var(--defter-koyu);
}

/* Satır zemini: geniş ekranda HÜCREYE, dar ekranda SATIRA verilir.
   Sebebi iki düzenin farkı: geniş ekranda ilk iki sütun yapışkandır ve
   kaydırırken altından satır geçmesin diye kendi zeminini taşımak
   zorundadır; 900px altında satır karta dönüşüyor (2-tasarim/bilesenler.css ·
   "Tablo dar ekranda") ve her hücreye zemin vermek kartı kutucuklara
   bölüyordu. */
@media (min-width: 900px) {
  .hd-defter .tablo tbody tr:nth-child(even) td { background: var(--defter-satir-cift); }
  .hd-defter .tablo tbody tr:nth-child(odd) td { background: var(--defter-satir); }
  .hd-defter .tablo tbody tr:hover td { background: var(--defter-hover); }
  /* nth-child kuralıyla aynı özgüllükte olmalı, yoksa zebra bastırır;
     !important yerine seçici düzeltilir. */
  .hd-defter .tablo tbody tr.hd-acilis td { background: var(--defter-acilis); }

  /* Sütun ayracı: başlıkta ve gövdede aynı çizgi, aynı yerde. İlk
     sütunda çizgi yok — kartın kendi çerçevesi zaten orada. */
  .hd-defter .tablo th + th,
  .hd-defter .tablo td + td {
    border-left: 1px solid var(--defter-cizgi);
  }

  .hd-defter .tablo td {
    height: 52px;
    border-bottom: 1px solid var(--defter-tel-soluk);
  }

  .hd-defter .tablo tbody tr:last-child td { border-bottom: 0; }

  /* Hizalama · kullanıcı kararı: yalnız Açıklama sütunu soldan başlar,
     öbür sütunların hem başlığı hem verisi ortada durur. Ortak .tablo
     kurallarına dokunulmadı (Cariler, İrsaliye, Tekrarlayan Ödemeler
     aynı tabloyu kullanıyor); kural yalnız .hd-defter'in altında ve
     yalnız geniş ekranda — 900px altında satır karta dönüşüyor, orada
     ortalamanın anlamı yok.
     Özgüllük: ".tablo thead th.tablo-para" (0,2,2) sağa yaslıyor;
     aşağıdaki seçici onunla eşit ama bu dosya sonra yüklendiği için
     kazanır. !important'e gerek yok. */
  .hd-defter .tablo thead th,
  .hd-defter .tablo tbody td { text-align: center; }

  .hd-defter .tablo thead th.tablo-yapisik-iki,
  .hd-defter .tablo tbody td.tablo-yapisik-iki { text-align: left; }
}

@media (max-width: 899.98px) {
  .hd-defter .tablo tbody tr:nth-child(even) { background: var(--defter-satir-cift); }
  .hd-defter .tablo tbody tr:nth-child(odd) { background: var(--defter-satir); }
  .hd-defter .tablo tbody tr:hover { background: var(--defter-hover); }
  .hd-defter .tablo tbody tr.hd-acilis { background: var(--defter-acilis); }
  /* Yapışkan sütunların zemini kart düzeninde işe yaramaz; kalırsa
     satırın içinde ayrı kutular gibi durur. */
  .hd-defter .tablo tbody td { background: none; }
  .hd-defter .tablo tbody tr { border-bottom: 1px solid var(--defter-tel-soluk); }
}

/* Açılış satırı: defterin başlangıcı, hareket değil. Kalın yazı iki
   düzende de onu listeden ayırır. */
.hd-defter .hd-acilis td { font-weight: 600; }

.hd-acilis-rozet {
  display: inline-block;
  margin-right: var(--bosluk);
  padding: 2px 9px;
  border-radius: 8px;
  border: 1px solid var(--defter-tel-soluk);
  background: var(--defter-zemin);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--defter-notr);
  vertical-align: 1px;
}

.hd-acilis-ad { white-space: nowrap; }

/* Yön işareti · açıklamanın önünde, metni bastırmayacak kadar küçük. */
.hd-yon {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
}

.hd-yon-giren { color: var(--defter-arti); }
.hd-yon-cikan { color: var(--defter-eksi); }

.hd-ack { overflow-wrap: anywhere; }

/* Bakiye sütunu: yön renkle ve kalınlıkla. */
.hd-defter .tablo .tablo-tutar { font-weight: 600; color: var(--defter-arti); }
.hd-defter .tablo .tablo-tutar.tablo-eksi { color: var(--defter-eksi); font-weight: 700; }

/* ---- Dip ---- */
.hd-dip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  border-top: 1px solid var(--defter-tel-soluk);
  color: var(--defter-notr);
}

.hd-dip-sag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .75;
}

.hd-dip-sag svg { flex: none; }

@media (max-width: 900px) {
  .hd-tepe { gap: calc(var(--bosluk) * 1.5); margin-bottom: calc(var(--bosluk) * 2); }
  .hd-tepe-simge { width: 44px; height: 44px; border-radius: 12px; }
  .hd-tepe-simge svg { width: 24px; height: 24px; }

  .hd-tepe-baslik {
    flex-wrap: wrap;
    gap: var(--bosluk);
    font-size: var(--h1-boy);
    line-height: var(--h1-satir);
  }

  .hd-tepe-alt { font-size: var(--kucuk-boy); line-height: var(--kucuk-satir); }

  /* Üç kart tek sütuna iner: yan yana sıkıştırmak tutarları kırpıyordu. */
  .hd-ozet {
    grid-template-columns: 1fr;
    gap: var(--bosluk);
    margin: calc(var(--bosluk) * 1.5) 0 calc(var(--bosluk) * 2);
  }

  .hd-kart { padding: calc(var(--bosluk) * 1.5); }
  .hd-kart-simge { width: 38px; height: 38px; }
  .hd-kart-deger { font-size: 22px; line-height: 30px; }

  .hd-suzgec { padding: var(--bosluk); border-radius: 12px; }
  .hd-defter .tablo td { height: 46px; }

  /* Kart satırında rozet kimliğin yanında durur, satırı taşırmaz. */
  .hd-acilis-rozet { margin-right: 6px; }
  .hd-acilis-ad { white-space: normal; }

  /* Köşe süsü kart satırlarının üstüne binmesin. */
  .tablo-sarmal.hd-defter::before,
  .tablo-sarmal.hd-defter::after { display: none; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hd-kart { padding: calc(var(--bosluk) * 1.5); gap: var(--bosluk); }
  .hd-kart-simge { width: 40px; height: 40px; }
  .hd-kart-deger { font-size: 22px; line-height: 30px; }
}

/* Sonuç satırı ("İşlenince") defterin açılış satırıyla aynı gri
   zemini alır: bloğun cevabı odur, satırların arasında kaybolmasın.
   Kural defter renklerinden SONRA gelir — .hd-defter'in zebra kuralları
   aynı ağırlıkta, sonra yazılan kazanır (css cascade). */
.hd-defter .tablo tbody tr.gsd-sonuc td { background: var(--defter-acilis); }
.hd-defter .tablo tbody tr.gsd-sonuc { background: var(--defter-acilis); }
.hd-defter .tablo tbody tr.gsd-sonuc td { font-weight: 600; }

/* ---- Fatura Aktarımı · muhasebe kaydı tek tabloda ----
   Bir dosyada onlarca tedarikçi hesabı geçiyor; her hesaba ayrı kart
   verilseydi ekran kartlardan görünmezdi. Tek tablo, hesap sütunuyla
   (4-ekranlar/1-aktarimlar/fatura-aktarimi.js · fisTablosuHtml). */
@media (min-width: 900px) {
  .fa-tablo th.fa-sut-hesap { width: 210px; }

  /* Hesap adı sütuna sığmazsa sarar; kod hep başta ve okunur kalır. */
  .fa-tablo td.fa-hesap {
    white-space: normal;
    text-align: left;
    line-height: var(--kucuk-satir);
  }

  .fa-tablo th.fa-sut-hesap { text-align: left; }

  /* Fatura numarası sütunu: gün sonu tablosunun 124px'lik ölçüsü
     e-fatura numarasına yetmiyor, numara ikiye bölünüyordu. Burada
     156px alır ve tek satırda durur; artan yer açıklamadan gelir,
     çünkü açıklama ölçü almaz ve zaten sarar. */
  .fa-tablo th.fa-sut-fatura { width: 156px; }

  .fa-tablo td.fa-fatura-no {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bir faturanın iki bacağı birlikte okunur: ikinci satır üstündekine
     yapışır, aradaki çizgi silinir. */
  .hd-defter .fa-tablo tbody tr.fa-cift td { border-top: 0; }
  .hd-defter .fa-tablo tbody tr:not(.fa-cift) td { border-top: 1px solid var(--defter-tel-soluk); }
}

/* Hesap özeti · tablonun altında, bakiye burada durur. */
.fa-ozet {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 2);
  padding: calc(var(--bosluk) * 2);
  background: var(--defter-zemin);
  border: 1px solid var(--defter-tel-soluk);
  border-radius: var(--kose-kutu);
}

.fa-ozet-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--defter-koyu);
  margin-bottom: calc(var(--bosluk) / 2);
}

.fa-ozet-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk);
  padding: 4px 0;
  border-bottom: 1px solid var(--defter-tel-soluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.fa-ozet-satir:last-child { border-bottom: 0; }

.fa-ozet-satir .gsk-kod { color: var(--defter-koyu); }

.fa-ozet-ad { flex: 1 1 auto; min-width: 0; }

.fa-ozet-bakiye {
  margin-left: auto;
  color: var(--defter-notr);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fa-ozet-bakiye b { color: var(--metin); font-weight: 600; }
.fa-ozet-ok { opacity: .5; margin: 0 2px; }

/* ---- İrsaliye · mal girişi ----
   Mal kapısında telefonla doldurulan ekran: künye üstte, ürünler alt
   alta, her satırda tek kutu (miktar). Muhasebe dili yok.
   Kaynak: 4-ekranlar/1-aktarimlar/irsaliye-aktarimi.js · girisiCiz */
/* ---- İki bölme · solda mal girişi, sağda irsaliyeler ----
   İkisi ayrı ekrandı, düğmeyle gidilip geliniyordu. Mal kapısındaki iş
   ikisini birlikte ister (2026.152 · kullanıcının kararı).

   1200px altında alt alta iner: önce giriş, altında liste. Yan yana
   sıkıştırmak iki tarafı da okunmaz yapıyordu. */
.ir-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 3);
  align-items: start;
}

@media (min-width: 1200px) {
  .ir-ikili {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: calc(var(--bosluk) * 3);
    /* İki kart da sayfayı boydan kaplar (2026.155 · kullanıcının
       kararı): ekranın kalanı kadar yükselir, sayfa aşağı uzamaz.
       232px = üst çubuğun altındaki kuşak (140) + sayfa payları. */
    height: calc(100vh - var(--ust-cubuk) - 232px);
    min-height: 520px;
  }

  .ir-sol,
  .ir-sag {
    display: flex;
    height: 100%;
    min-height: 0;
  }

  /* Kart kolonun tamamını doldurur; içindeki uzun bölüm (solda ürün
     tablosu, sağda irsaliye listesi) KENDİ İÇİNDE kayar. */
  .ir-sol > .ir-kart,
  .ir-sag > .ir-kart {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }

  .ir-kart > .ir-tepe,
  .ir-kart > .ir-kunye,
  .ir-kart > .ir-bos,
  .ir-kart > .ir-arama-satir,
  .ir-kart > .ir-ekle,
  .ir-kart > .ir-altlik { flex: none; }

  /* KAYAN YER DIŞ ÇERÇEVE DEĞİL, İÇİNDEKİ KUTUDUR (2026.264 ·
     kullanıcının bildirimi: "aşağı kaydırırken çerçeve sabit kalıyor,
     görüntü bozuluyor").

     Eskiden .tablo-sarmal'ın kendisi kayıyordu. O kutunun ince teli
     mutlak konumlu bir ::after katmanıdır ve mutlak konumlu çocuk,
     kayan kutunun İÇERİĞİYLE birlikte kayar: çerçeve yukarı doğru
     sıyrılıp satırların arasında kalıyordu. Artık dış kutu yerinde
     duruyor, tablo onun içindeki .tablo-kutu'da kayıyor — yatay kayma
     zaten orada yapılıyordu. */
  .ir-kart > .tablo-sarmal {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .ir-kart > .tablo-sarmal > .tablo-kutu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Kaydırırken sütun başlıkları kaybolmasın: hangi rakamın fiyat,
     hangisinin miktar olduğu yüz satır aşağıda da görünsün. */
  .ir-kart > .tablo-sarmal > .tablo-kutu .ir-tablo thead th {
    position: sticky;
    top: 0;
    /* Satırdaki kutular başlığın altından sıyrılırken üstte kalmalı;
       kenarlık da başlığın kendi gölgesiyle çizilir, yoksa kaydırırken
       ince bir çizgi olarak kayıp gidiyor. */
    z-index: 3;
    background: var(--kart-yuzey);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 var(--ayirici);
  }

  .ir-liste-suzgec {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Liste de mal girişiyle AYNI KART: aynı başlık kuşağı, aynı kâğıt,
   aynı çerçeve (2026.154 · kullanıcının kararı). Süzgeç şeridi kartın
   içinde, başlığın hemen altında durur; tablo da onun altında. */
.ir-liste-suzgec { padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3); }

.ir-liste-suzgec .suzgec { margin-bottom: calc(var(--bosluk) * 2); }

/* Kartın içindeki tablonun çerçevesi dosyanın SONUNDA kaldırılır:
   zemin bloğu orada kart yüzeyini ve gri telini herkese veriyor,
   buradaki kural onun altında kalırdı. */

.ir-sag .suzgec { margin-bottom: calc(var(--bosluk) * 2); }

.ir-kart {
  margin: 0 0 calc(var(--bosluk) * 3);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  overflow: hidden;
}

.ir-tepe {
  position: relative;
  /* Kart tepesi ince tutulur (2026.157 · kullanıcının kararı): ürün
     listesi asıl iştir, üstündeki kısım ona yer bırakmalı. */
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.ir-tepe-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.ir-tepe-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
  max-width: 52ch;
}

/* Faturanın irsaliyelerine inince tepede geri düğmesi durur
   (2026.272). Başlığın üstünde, kendi satırında: kullanıcı nerede
   olduğunu görsün ve tek dokunuşla çıksın. */
.ir-geri {
  display: inline-flex;
  margin-bottom: calc(var(--bosluk) * 1.25);
}

/* Düzenleme sırasında kart başlığı kırmızı bir şeritle işaretlenir:
   kullanıcı yeni kayıt açmadığını, var olanı değiştirdiğini görsün. */
.ir-kart .ir-tepe-sag { top: calc(var(--bosluk) * 1.5); }

.ir-tepe-sag { position: absolute; right: calc(var(--bosluk) * 3); top: calc(var(--bosluk) * 3); }

/* Künye iki katlı: üstte tedarikçi tek başına (unvanlar uzun, adı
   okumak yer ister), altta tarih · irsaliye no · şube yan yana. Dar
   ekranda hepsi alt alta iner (2026.165 · kullanıcının kararı). */
.ir-kunye {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
}

.ir-kunye-alt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
}

.ir-kunye .alan { margin: 0; }

/* Arama kutusu ile büyüteç yan yana durur. Büyüteç aynı listeyi
   ortada geniş bir panelde açar (2026.274 · kullanıcının isteği:
   "şu an irsaliyelerde 2 ürün görebiliyoruz ya, bir büyüteç koyalım").
   Dar kartta bir ekrana birkaç satır sığıyordu. */
.ir-arama-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3) 0;
}

.ir-arama-satir > .ir-arama { flex: 1 1 auto; min-width: 0; margin: 0; }

.ir-arama { margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3) 0; }

.ir-buyutec { flex: none; }

/* ---- Büyüteçle açılan ürün paneli (2026.274) ----
   Panel penceresi kendi yüksekliğini içeriğe göre alır; tablo panelin
   içinde kayar, başlıklar yapışık kalır. Kartın dar sürümüyle aynı
   tabloyu gösterir, yalnız daha çok satır sığar. */
.ir-panel { display: flex; flex-direction: column; min-height: 0; }

.ir-panel-arama { margin: 0 0 calc(var(--bosluk) * 2); }

.ir-panel-kutu {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: var(--kose-kutu);
  box-shadow: none;
}

.ir-panel-kutu > .tablo-kutu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ir-panel-kutu > .tablo-kutu .ir-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--kart-yuzey);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 0 var(--ayirici);
}

.ir-panel-alt {
  flex: none;
  padding-top: calc(var(--bosluk) * 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

.ir-bos {
  padding: calc(var(--bosluk) * 4) calc(var(--bosluk) * 3);
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.ir-kart .tablo-sarmal {
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-radius: var(--kose-kutu);
  box-shadow: none;
}

.ir-tablo { width: 100%; border-collapse: collapse; }

.ir-tablo thead th {
  padding: var(--bosluk) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
  font-size: var(--kucuk-boy);
  font-weight: 700;
}

.ir-tablo td {
  padding: 6px calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ir-tablo tbody tr:last-child td { border-bottom: 0; }

/* Miktar yazılan satır belli olur: göz hangi ürünleri girdiğini tek
   bakışta bulur. */
.ir-urun-dolu td { background: rgba(47, 125, 83, .08); }

.ir-urun-ad { width: auto; font-weight: 500; }

.ir-birim {
  margin-left: 6px;
  font-size: var(--etiket-boy);
  opacity: .55;
  font-weight: 400;
}

.ir-fiyat,
.ir-tutar {
  width: 110px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  opacity: .75;
}

.ir-tutar { opacity: 1; font-weight: 600; }

/* Sütun başlığının altındaki küçük not: "Son fiyat / KDV dahil".
   Başlığı uzatmadan fiyatın hangi tabanda olduğunu söyler
   (2026.244 · kullanıcının kararı · KDV sütunu istemedi, sade kalsın). */
.ir-bas-not {
  display: block;
  font-size: var(--etiket-boy);
  font-weight: 400;
  opacity: .6;
  letter-spacing: 0;
  text-transform: none;
}

.ir-miktar { width: 104px; }

.ir-miktar-kutu {
  height: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fiyat kutusu · miktarın kardeşi ama daha sessiz durur: çoğu satırda
   fiyat zaten geçmişten geliyor, kullanıcı yalnız eksik olanı yazacak
   (2026.263). */
.ir-fiyat-kutu {
  width: 100%;
  height: 34px;
  padding: 0 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  border-color: transparent;
  background: none;
}

.ir-fiyat-kutu:hover { border-color: var(--ayirici); }
.ir-fiyat-kutu:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--yuzey);
}

/* Ürün adını düzeltme · satırın üstüne gelince belirir, dokunmatikte
   her zaman durur. */
.ir-ad-duzelt {
  margin-left: 6px;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  vertical-align: middle;
}

.ir-urun:hover .ir-ad-duzelt,
.ir-ad-duzelt:focus { opacity: .7; }
.ir-ad-duzelt:hover { opacity: 1; background: var(--oyuk); }

@media (hover: none) {
  .ir-ad-duzelt { opacity: .55; }
}

.ir-ekle {
  display: flex;
  gap: var(--bosluk);
  padding: 0 calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
}

.ir-ekle-kutu { flex: 1 1 auto; min-width: 0; }

.ir-altlik {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-top: 1px solid var(--kenar);
  background: var(--oyuk);
}

.ir-altlik-not {
  flex: 1 1 auto;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

@media (max-width: 899.98px) {
  .ir-tepe { padding: calc(var(--bosluk) * 2); }
  .ir-tepe-sag { position: static; display: block; margin-top: var(--bosluk); }
  .ir-kunye { padding: calc(var(--bosluk) * 2); gap: var(--bosluk); }
  .ir-kunye-alt { grid-template-columns: minmax(0, 1fr); gap: var(--bosluk); }
  .ir-arama-satir { margin: var(--bosluk) calc(var(--bosluk) * 2) 0; }
  .ir-arama { margin: var(--bosluk) calc(var(--bosluk) * 2) 0; }
  .ir-kart .tablo-sarmal { margin: var(--bosluk) calc(var(--bosluk) * 2); }
  .ir-ekle { padding: 0 calc(var(--bosluk) * 2) calc(var(--bosluk) * 2); flex-direction: column; }
  .ir-altlik { padding: calc(var(--bosluk) * 2); flex-direction: column; align-items: stretch; }
  /* Fiyat sütunu dar ekranda GİZLENMEZ (2026.263): artık yazılabilir
     bir kutu ve listede olmayan ürünün fiyatı yalnız oradan giriliyor.
     Gizlenseydi telefondan yeni ürün fiyatı hiç girilemezdi. Sütun
     daralır, tutar sütunu kısalır. */
  .ir-fiyat { width: 84px; }
  .ir-tutar { width: 84px; }
}

/* ---- İrsaliye · faturayla eşleştirme ----
   Bekleyenler listesinde işaret kutusu, altında seçim şeridi; faturayı
   seçme paneli. Kaynak: 4-ekranlar/1-aktarimlar/irsaliye-aktarimi.js */
.ir-sec-sutun { width: 44px; text-align: center; }

.ir-sec { width: 18px; height: 18px; accent-color: var(--vurgu); cursor: pointer; }

.tablo-satir.ir-secili td { background: rgba(47, 125, 83, .10); }

.tablo-satir.ir-pasif { opacity: .45; }

.ir-not {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* Seçim şeridi tablonun altında durur: kaç irsaliye, hangi tedarikçi,
   toplam kaç lira — ve tek düğme. */
.ir-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2);
  border-top: 1px solid var(--kenar);
  background: var(--oyuk);
}

.ir-serit-yazi {
  flex: 1 1 auto;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ir-panel-ozet,
.ir-panel-bos,
.ir-panel-fark {
  margin: 0 0 calc(var(--bosluk) * 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.ir-panel-bos { opacity: .7; }

/* Fatura listesi: her fatura bir düğme, seçilen kırmızı çerçeveyle
   işaretlenir. */
.ir-fatura-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 2);
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: calc(var(--bosluk) * 2);
}

.ir-fatura {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  width: 100%;
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

.ir-fatura-secili {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 2px rgba(183, 44, 40, .12);
}

.ir-fatura-no { font-weight: 600; }
.ir-fatura-tarih { opacity: .6; }

.ir-fatura-tutar {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
}

/* Fark cümlesi: tutuyorsa yeşil, tutmuyorsa uyarı rengi. Fark olağandır
   (iskonto, eksik teslim) — engel değil, bilgi. */
.ir-panel-fark {
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: rgba(184, 117, 3, .12);
  color: var(--metin-uyari);
}

.ir-panel-fark.ir-fark-yok {
  background: rgba(47, 125, 83, .14);
  color: var(--metin-basari);
}

/* Farkın altındaki ipucu: fiyat tabanı değiştiği için eski kayıtlarda
   çıkabilecek farkı anlatır (2026.244). Uyarı değil, yol gösterir. */
.ir-panel-ipucu {
  margin-top: calc(var(--bosluk) * .5);
  padding: 0 calc(var(--bosluk) * 1.5);
  font-size: var(--etiket-boy);
  color: var(--metin);
  opacity: .6;
}

@media (max-width: 899.98px) {
  .ir-serit { padding: calc(var(--bosluk) * 1.5); }
  .ir-serit-yazi { width: 100%; }
}

/* ---- Nakit Akış ----
   Yatay tablo: solda satır başlıkları yapışık, sağa doğru günler.
   Dört öbek (devir · giren · çıkan · kalan) bant başlıklarıyla ayrılır.
   Öngörü sayıları SOLUK AMA BELİRGİN durur — kullanıcının isteği:
   "o gün yaşanınca gerçek rakamla değişecek".
   Kaynak: 4-ekranlar/2-raporlar/nakit-akis.js */
.na-kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  overflow: hidden;
}

/* Tepe, İrsaliye Aktarımı'nın mal giriş kartıyla ve Gün Sonu kâğıdıyla
   aynı: solda kırmızı başlık, altında künye satırı, sağda sayfanın
   işleri (2026.174 · kullanıcının kararı). Başlık ile künye eskiden aynı
   satırda yan yana duruyordu; ölçüler artık ".ir-tepe" ile birebir. */

.na-tepe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.na-tepe-yazi { min-width: 0; }

.na-tepe-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.na-tepe-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.na-tepe-sag { display: flex; flex: none; flex-wrap: wrap; gap: var(--bosluk); }

/* Tablo kâğıdın kenarına dayanmaz, kendi kutusunda payla durur ve orada
   yana kayar; sayfa gövdesi kaymaz. */
.na-kaydir {
  overflow-x: auto;
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  /* Çubuk gizlenir, kaydırma durur (2026.198 · kullanıcının kararı):
     bu tablo kendiliğinden kaydırılan bir tablo — kenara gelince
     önceki/sonraki haftayı kendisi getiriyor (nakit-akis.js ·
     kaydirmayiIzle). Altta duran gri çubuk kâğıdın dibinde yabancı
     duruyordu. Fare tekerleği, dokunmatik ve klavye yine çalışır;
     haftalar arası gezinmenin asıl yolu zaten tepedeki düğmeler. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.na-kaydir::-webkit-scrollbar { width: 0; height: 0; }

/* Altlık · tablonun bittiğini söyleyen oyuk şerit. */
.na-altlik {
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border-top: 1px solid var(--kart-kenar);
  background: var(--oyuk);
}

.na-tablo {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Sol sütun yapışık: gün gün kaydırırken hangi hesaba baktığı kaybolmaz. */
.na-tablo th.na-baslik {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Kod sütunu kalkınca ad tek başına daha dar bir sütuna sığar; artan
     yer günlere gider (2026.175). */
  min-width: 158px;
  padding: 6px calc(var(--bosluk) * 1.5);
  background: var(--yuzey);
  text-align: left;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
  border-bottom: 1px solid var(--ayirici);
  border-right: 1px solid var(--kenar);
}

.na-kose { z-index: 3; background: var(--oyuk); }

.na-hesap { font-weight: 400; }

/* Hesap adı satırın kimliğidir; kod yazılmaz (2026.175 · kullanıcının
   kararı) ve soluk da durmaz — artık bakılacak tek şey o. */
.na-ad { font-weight: 500; }

/* Gün başlığı üç satır: sayı · ay · haftanın günü. */
.na-gun {
  /* Gün başlığı ortalı ve tam yazılı: "5 · Eylül · Cumartesi". Sütun da
     onun kadar geniş (2026.177 · kullanıcının kararı). */
  min-width: 132px;
  padding: 6px calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  border-right: 1px solid var(--defter-cizgi);
  text-align: center;
  font-size: var(--etiket-boy);
  line-height: 1.3;
  font-weight: 600;
  background: var(--oyuk);
  white-space: nowrap;
}

.na-gun-sayi { display: block; font-size: var(--govde-boy); }
.na-gun-ay { display: block; opacity: .65; font-weight: 400; }
.na-gun-hafta { display: block; opacity: .5; font-weight: 400; }

.na-bugun {
  background: rgba(183, 44, 40, .10);
  color: var(--vurgu);
  box-shadow: inset 0 -2px 0 0 var(--vurgu);
}

.na-haftasonu .na-gun-hafta { color: var(--metin-hata); opacity: .7; }

/* Öbek bandı: dört grubu birbirinden ayırır. */
/* ---- Dört öbek, dört blok ----
   Devir · Giren · Çıkan · Kalan tek tablonun içinde ama ayrı bloklar gibi
   durur (2026.176 · kullanıcının kararı · "rakam yığını değil"): her
   öbeğin kendi rengi var ve o renk üç yerde birden görünür — dolu bant
   başlığında, satırların çok hafif zemininde ve toplam şeridinde. Sol
   yapışık sütunda ise öbeğin renginde bir tel durur; göz yukarıdan aşağı
   inerken bloğun nerede başlayıp bittiğini oradan okur.

   Renk anlamı taşır: giren yeşil, çıkan kırmızı, devir nötr
   gri (henüz bir şey olmadı, günün başındaki para), kalan kırmızı —
   günün sonucu ve uygulamanın kendi rengi. */

.na-obek th,
.na-obek td {
  border-bottom: 1px solid var(--defter-tel-soluk);
  border-top: 1px solid var(--defter-tel-soluk);
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  letter-spacing: .02em;
  text-transform: uppercase;
  /* Bant ince bir ayraç şeridi: blokları ayırmaya yeter, satırların
     yerini almaz (2026.177 · kullanıcının kararı). */
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  /* Başlık tek satırda kalır: "Kalan bakiyeler" ikiye bölününce bandın
     yüksekliği öteki üç bloktan farklı çıkıyordu. */
  white-space: nowrap;
}

/* Bant başlığı doludur, yazısı kâğıt rengi: blok orada başlar. Yapışık
   sol sütunun beyaz zemini (".na-tablo th.na-baslik") iki sınıf
   özgüllüğünde; bant ve toplam şeridi onu ancak aynı önekle geçer. */
.na-tablo .na-obek th.na-baslik,
.na-obek td {
  background: var(--obek-renk);
  color: var(--kart-yuzey);
  font-weight: 700;
}

/* Bloğun gövdesi renk taşımaz: bütün hücrelerin dolgusu aynı kâğıttır
   (2026.178 · kullanıcının kararı). Rengi bant başlığı ile sol sütundaki
   tel taşır; tabloda göze çarpan tek yer eksiye düşen gün olsun.

   Toplam şeridi de zeminle değil, kalın yazı ve üstündeki renkli ince
   çizgiyle ayrılır. */
.na-tablo .na-satir th.na-baslik,
.na-tablo .na-toplam th.na-baslik { border-left: 3px solid var(--obek-renk); }

.na-toplam td,
.na-tablo .na-toplam th.na-baslik { border-top: 1px solid var(--obek-renk); }

/* Son sütunun sağında çizgi olmaz: tablonun kendi kenarı orada. */
.na-gun:last-child,
.na-h:last-child { border-right: 0; }

/* Bant satırı dolu bir şerittir; içinde sütun ayracı görünmez. */
.na-obek td { border-right: 0; }

/* Bloklar arasındaki nefes. Yapışık sol sütun burada zemin taşımaz ki
   iki blok arasında gerçekten boşluk görünsün. */
.na-ara td {
  height: 10px;
  padding: 0;
  border: 0;
  background: var(--kart-yuzey);
}

/* Dört öbeğin paleti · her blok rengini buradan alır; renk yalnız bant
   başlığında, sol teldeki çizgide ve toplam şeridinin üst çizgisinde
   görünür. */
.na-g-devir {
  --obek-renk: var(--defter-notr);
}

.na-g-giren {
  --obek-renk: var(--defter-arti);
}

.na-g-cikan {
  --obek-renk: var(--defter-eksi);
}

.na-g-kalan {
  --obek-renk: var(--defter-koyu);
}

/* Kalan bakiyelerin toplam şeridi günün sonucudur: rakamın altında ince
   bir çubuk on dört günün seyrini rakam okumadan gösterir. */
.na-cubuk {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(183, 44, 40, .12);
  overflow: hidden;
}

/* Çubuk da rakamı gibi ortadan büyür: sola yaslı kalsaydı ortalanmış
   sayının altında kaymış dururdu. */
.na-cubuk-dolu {
  display: block;
  height: 100%;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--defter-koyu);
}

/* Öngörü günlerinde çubuk da soluklaşır: rakamla aynı dili konuşur. */
.na-ongoru .na-cubuk-dolu { opacity: .45; }

.na-eksi .na-cubuk-dolu { background: var(--metin-hata); }

/* Sayı hücresi. */
.na-h {
  padding: 6px calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  /* Günler ince bir telle ayrılır: on dört sütun yan yanayken göz hangi
     rakamın hangi güne ait olduğunu çizgiden okur (2026.179 ·
     kullanıcının kararı). */
  border-right: 1px solid var(--defter-cizgi);
  /* Tutarlar da başlıkları gibi ortalı durur (2026.177 · kullanıcının
     kararı): sütun geniş olduğu için sağa yaslı rakam başlığından
     kopuyordu. */
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  white-space: nowrap;
}

.na-bos { opacity: .28; }
/* Eksiye düşen gün tablonun tek uyarısıdır ama zeminiyle değil, yalnız
   METNİYLE: dolgu beyaz kalır, rakam kırmızı ve kalın yazılır
   (2026.179 · kullanıcının kararı). Soluk öngörü kuralı burada geçmez —
   uyarı soluklaşmaz. */
.na-eksi {
  color: var(--metin-hata);
  font-weight: 700;
}

.na-ongoru.na-eksi { opacity: 1; }

/* Gerçekleşmemiş gün yalnız bir tık soluk yazılır, başka hiçbir şey
   değişmez (2026.178 · kullanıcının kararı): eğik yazı da, ayrı zemin de
   kalktı — tablodaki tek vurgu eksiye düşen güne kalsın. */
.na-ongoru { opacity: .72; }

.na-ongoru.na-bos { opacity: .22; }

.na-tiklanir { cursor: pointer; text-decoration: underline dotted var(--defter-tel); }
.na-tiklanir:hover { background: var(--defter-hover); }
.na-tiklanir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

.na-satir:hover .na-h { background: rgba(168, 174, 182, .08); }

/* Zemini yukarıdaki öbek paleti veriyor; burada yalnız kalınlık ve alt
   çizgi kalır. */
.na-toplam th,
.na-toplam td {
  font-weight: 700;
  border-bottom: 1px solid var(--kenar);
}

/* Notun kendi payı ve çizgisi yok: ikisini de altlık şeridi taşıyor. */
.na-not {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* ---- Hücre ayrıntısı paneli ----
   Bir tutara basınca açılan gün dökümü. Kâğıdın öteki sayfalarıyla aynı
   dilde (2026.180 · kullanıcının kararı): oyuk zeminli tepede hesabın adı
   kırmızı başlık, altında günü ve türü; ortada işlem listesi kendi
   kutusunda; en altta oyuk altlıkta günün toplamı.

   Tepenin ve toplamın rengi öbekten gelir: giren yeşil, çıkan kırmızı —
   tablodaki bantla aynı renk, panel hangi bloktan açıldığını kendi
   söyler. */

.na-kagit {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  overflow: hidden;
}

.na-kagit-tepe {
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
  border-left: 4px solid var(--obek-renk);
}

.na-kagit-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--obek-renk);
  overflow-wrap: anywhere;
}

.na-kagit-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.na-kagit-altlik {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--kenar);
  background: var(--oyuk);
}

.na-kagit-not {
  flex: 1 1 140px;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.na-kagit-toplam {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: none;
  text-align: right;
}

.na-kagit-toplam > span {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.na-kagit-toplam > b {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--obek-renk);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Yükleme, boş durum ve hata da kâğıdın içinde, kendi payıyla durur. */
.na-kagit [data-ayrinti] { padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2.5); }

.na-panel-bos {
  margin: 0;
  padding: calc(var(--bosluk) * 2) 0;
  text-align: center;
  font-size: var(--kucuk-boy);
  opacity: .7;
}

.na-ayrinti {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  overflow: hidden;
}

.na-ayrinti-satir {
  display: flex;
  align-items: baseline;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.na-ayrinti-satir:last-child { border-bottom: 0; }

.na-ayrinti-ad { flex: 1 1 auto; min-width: 0; font-weight: 500; }

.na-ayrinti-kaynak {
  display: block;
  margin-top: 1px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 400;
  opacity: .6;
}

.na-ayrinti-tutar {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

@media (max-width: 899.98px) {
  .na-kagit-tepe,
  .na-kagit [data-ayrinti] { padding: calc(var(--bosluk) * 2); }

  .na-kagit-altlik {
    padding: calc(var(--bosluk) * 2);
    flex-direction: column;
    align-items: stretch;
    gap: var(--bosluk);
  }

  /* Alt alta dizilen sütunda "flex: 1 1 140px" YÜKSEKLİK temeli olur: not
     140px'e uzayıp altına kocaman bir boşluk bırakıyordu. */
  .na-kagit-not { flex: none; }

  .na-kagit-toplam {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk);
  }
}

@media (max-width: 899.98px) {
  .na-tepe { padding: calc(var(--bosluk) * 2); gap: var(--bosluk); }
  .na-tepe-sag { width: 100%; flex-wrap: wrap; }
  .na-tablo th.na-baslik { min-width: 124px; }
  /* Telefonda da tam ad yazılır, sütun biraz daralır; tablo zaten yana
     kayıyor. */
  .na-gun { min-width: 112px; }

  /* Tablonun payı telefonda yarıya iner: on dört sütun zaten yana
     kayıyor, yanlardan alınan her piksel hesap adından gidiyor. */
  .na-kaydir { margin: var(--bosluk) calc(var(--bosluk) * 1.5); }
  .na-altlik { padding: calc(var(--bosluk) * 2); }
}

/* ---------- Personel ----------
   Personel listesi ve künye formu. Liste satırında avatar, ad ve ünvan.
   Form aynı kartın içinde açılır — ayrı bir pencere açmak bu kadar alan
   için fazla. Aynı satır biçimi personel seçim penceresinde de kullanılır
   (3-cekirdek/2-arayuz/personel-secimi.js).
   Kaynak: 4-ekranlar/3-tanimlar/personel.js */
.ku-kart {
  --ku-pay: calc(var(--bosluk) * 3);
  max-width: 720px;
  margin: 0 auto calc(var(--bosluk) * 3);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  box-shadow: var(--kart-golge);
  position: relative;
  overflow: hidden;
}

.ku-kart::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

/* ---- Liste ---- */
.ku-liste { background: var(--kart-yuzey); }

.ku-satir {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.75);
  width: 100%;
  padding: calc(var(--bosluk) * 1.5) var(--ku-pay);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
}

.ku-satir:last-child { border-bottom: 0; }

@media (hover: hover) {
  .ku-satir:hover { background: var(--defter-hover); }
}

.ku-ara {
  padding: var(--bosluk) var(--ku-pay);
  background: var(--oyuk);
  border-bottom: 1px solid var(--defter-tel-soluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

.ku-bos {
  padding: calc(var(--bosluk) * 4) var(--ku-pay);
  text-align: center;
  font-size: var(--kucuk-boy);
  opacity: .7;
}

/* Avatar · fotoğraf yoksa baş harfler. */
.ku-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--oyuk);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
}

.ku-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ku-avatar-harf {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  color: var(--defter-koyu);
}

.ku-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ku-ad {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 600;
}

.ku-alt {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
  overflow-wrap: anywhere;
}

.ku-sag { flex: none; display: flex; align-items: center; gap: var(--bosluk); }


.ku-pasif {
  padding: 2px calc(var(--bosluk) * 1.25);
  border-radius: 12px;
  background: rgba(183, 44, 40, .12);
  color: var(--metin-hata);
  font-size: var(--etiket-boy);
  line-height: 18px;
  font-weight: 600;
}

/* ---- Form ---- */
.ku-form {
  padding: calc(var(--bosluk) * 2.5) var(--ku-pay) var(--ku-pay);
  background: var(--kart-yuzey);
}

.ku-form .alan + .alan,
.ku-form .alan { margin-top: calc(var(--bosluk) * 2); }

.ku-foto-satir {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 2);
  padding-bottom: var(--bosluk);
}

.ku-foto-dugmeler {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
}

.ku-yardimci {
  display: block;
  flex: 1 1 100%;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.ku-sifre-satir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
}

.ku-bolum {
  margin: calc(var(--bosluk) * 3) 0 var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---- Durum ---- */
.ku-durum { display: flex; gap: var(--bosluk); }

.ku-durum-secim {
  flex: 1;
  min-height: var(--dugme);
  border: 1px solid var(--kart-kenar);
  border-radius: 14px;
  background: var(--kart-zemin);
  font-size: var(--govde-boy);
}

.ku-durum-secim.secili {
  border-color: var(--defter-koyu);
  background: var(--defter-acilis);
  font-weight: 600;
  color: var(--defter-koyu);
}

@media (max-width: 899.98px) {
  .ku-kart { --ku-pay: calc(var(--bosluk) * 2); }
  .ku-foto-satir { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kredi Kartı Aktarımı ----------
   Banka aktarımının üç adımı: dosya → önizleme → muhasebe kaydı. Kart
   ekstresinde dekont yok, satırın izi tarih·açıklama·tutardan çıkar;
   ekranda da satır bunlarla tanınır. Kart ödemesi satırı gri durur,
   kayıt açılmaz (banka aktarımından işlenir).
   Kaynak: 4-ekranlar/1-aktarimlar/kredi-karti-aktarimi.js */
.kk-kart {
  /* Banka aktarımıyla aynı genişlik (2026.230 · kullanıcının isteği:
     "açılan aktarım alanı daha büyük olsun bankadaki gibi"). Dokuz
     sütun 1240 piksele sığmıyor, açıklama kutusu eziliyordu. */
  max-width: 1640px;
  margin: 0 auto calc(var(--bosluk) * 3);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  box-shadow: var(--kart-golge);
  position: relative;
  overflow: hidden;
}

.kk-kart::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

.kk-yukleme { padding: calc(var(--bosluk) * 3); }

.kk-yardimci {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.kk-not {
  margin: 0;
  padding: 0 calc(var(--bosluk) * 3) calc(var(--bosluk) * 3);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

.kk-uyari { color: var(--metin-uyari); opacity: 1; }

/* ---- Kart bloğu · dosyada birden fazla kart olabilir ---- */
.kk-blok { margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3); }

.kk-blok-tepe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.5) 0 var(--bosluk);
}

.kk-blok-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  color: var(--defter-koyu);
}

.kk-blok-say {
  font-size: var(--kucuk-boy);
  opacity: .7;
}

.kk-eksik {
  padding: 2px calc(var(--bosluk) * 1.25);
  border-radius: 12px;
  background: rgba(183, 44, 40, .12);
  color: var(--metin-hata);
  font-size: var(--etiket-boy);
  line-height: 18px;
  font-weight: 600;
}

/* ---- Satır tablosu ---- */
.kk-tablo {
  width: 100%;
  border-collapse: collapse;
  background: var(--kart-yuzey);
  border-radius: 12px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.kk-tablo thead th {
  height: var(--tablo-baslik-satir);
  padding: 0 var(--bosluk);
  border-bottom: 1px solid var(--defter-tel-soluk);
  background: var(--defter-baslik);
  font-family: var(--yazi-baslik);
  font-size: var(--etiket-boy);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--defter-koyu);
  white-space: nowrap;
}

.kk-tablo td {
  padding: calc(var(--bosluk) * 0.75) var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
}

.kk-tablo tr:last-child td { border-bottom: 0; }

.kk-islem {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kk-gun, .kk-taksit { white-space: nowrap; opacity: .8; }

/* Hangi ekstreye düştüğü · tarihin altında tek kelime (2026.287).
   Tarih "30.10.2026" diyor ama bunun sonraki dönem olduğunu ancak
   kesim gününü ezberleyen biri anlar; yazı onu söyler. */
.kk-donem {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* Deftere yazılacak açıklama · boşken ekstrenin metnini soluk gösterir
   (2026.229). Tablonun içinde durduğu için kendi yüksekliğini
   büyütmez. */
.kk-aciklama {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-size: var(--kucuk-boy);
}

/* Ekstrenin kendi metni · değiştirilemez, tek satırda kalır. */
.kk-kartack {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .65;
}

/* Sabit sütun genişlikleri · banka aktarımındaki colgroup ile aynı
   mantık: metin uzayınca tablo kaymasın. */
.kk-tablo { table-layout: fixed; min-width: 1420px; }
.kc-tar { width: 96px; }
.kc-isl { width: 220px; }
.kc-gun { width: 110px; }
.kc-tak { width: 76px; }
.kc-ack { width: 230px; }
.kc-car { width: 200px; }
.kc-gid { width: 200px; }
.kc-kack { width: 220px; }
.kc-tut { width: 120px; }

.kk-tutar {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
}

/* Kart ödemesi satırı: gri, kayıt açılmaz. */
.kk-odeme td { background: var(--oyuk); opacity: .75; }

.kk-atlandi {
  font-size: var(--etiket-boy);
  line-height: 18px;
  opacity: .8;
}

/* ---- Seçiciler ----
   Tarayıcının <select>'i değil, uygulamanın yazarak süzülen seçicisi
   (2026.185 · kullanıcının kararı). Kabuk ".sec", içindeki kutu
   ".sec-kutu"; ölçüler tabloya sığsın diye alan kutusundan küçüktür. */
.kk-secim {
  width: 100%;
  min-width: 150px;
  max-width: 220px;
}

.kk-secim .sec-kutu {
  height: 32px;
  padding: 0 calc(var(--bosluk) * 3.5) 0 var(--bosluk);
  border-radius: 10px;
  background: var(--kart-yuzey);
  font-size: var(--kucuk-boy);
  text-overflow: ellipsis;
}

.kk-secim.dolu .sec-kutu {
  border-color: var(--defter-tel);
  font-weight: 500;
}

@media (max-width: 899.98px) {
  .kk-blok { margin: calc(var(--bosluk) * 2); }
  .kk-secim { min-width: 130px; }
}

/* ---------- Rapor listesi · ortak bileşen ----------
   Giderler ve Gelirler raporlarının ikisi de aynı kabı kullanır: üstte
   dönem süzgeci ve toplam, altında satırlar, bir satıra basınca altında
   ayrıntısı. İki ekran için iki ayrı ad açmak yerine tek bileşen: aynı
   şey iki yerde iki türlü davranmasın (nizam · "Bileşenler").
   Kaynak: 4-ekranlar/2-raporlar/giderler.js · 4-ekranlar/2-raporlar/gelirler.js */
.rl-kart {
  --rl-pay: calc(var(--bosluk) * 3);
  max-width: 820px;
  margin: 0 auto calc(var(--bosluk) * 3);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  box-shadow: var(--kart-golge);
  position: relative;
  overflow: hidden;
}

.rl-kart::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

.rl-tepe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2.5) var(--rl-pay) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--defter-tel-soluk);
}

.rl-tepe-yazi { min-width: 0; }

.rl-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.rl-tarih {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* Toplam sağ üstte, tek bakışta okunur. */
.rl-toplam {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.rl-toplam span {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .7;
}

.rl-toplam b {
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.rl-suzgec {
  padding: calc(var(--bosluk) * 1.5) var(--rl-pay);
  border-bottom: 1px solid var(--defter-tel-soluk);
}

.rl-aralik { display: flex; align-items: center; gap: var(--bosluk); }
.rl-aralik .alan-kutu { width: 160px; }
.rl-aralik-ok { opacity: .5; }

/* Liste kağıt üstünde durur. Dar ekranda sığmazsa kendi içinde yana
   kayar; kartın kenarında kesilmez. */
.rl-liste { background: var(--kart-yuzey); overflow-x: auto; }

.rl-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.rl-tablo td {
  padding-top: calc(var(--bosluk) * 1.25);
  padding-bottom: calc(var(--bosluk) * 1.25);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
}

.rl-tablo tr:last-child td { border-bottom: 0; }

.rl-td-simge {
  width: calc(var(--rl-pay) + 30px);
  padding-left: var(--rl-pay);
  color: var(--gri-vurgu);
  opacity: .8;
}

.rl-td-simge .simge { display: block; margin: 0 auto; }

.rl-td-ad {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  min-width: 0;
  overflow-wrap: anywhere;
}

.rl-td-tutar {
  width: 1%;
  padding-right: var(--rl-pay);
  text-align: right;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rl-baslik-satir { cursor: pointer; }
.rl-baslik-satir .rl-td-ad { font-weight: 600; }
.rl-baslik-satir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

/* Uzun başlık kelime kelime sarar. "anywhere" denendi ve dar ekranda
   künyeler yeri kapınca adı harf harf alt alta diziyordu; kırılım
   kelimeden olur, satır da aşağıda sarmalanır. */
.rl-ad,
.rl-islem-ad { min-width: 0; overflow-wrap: break-word; }

/* Hesap kodu ve ödeme sayısı küçük künyeler. */
.rl-kod,
.rl-adet {
  flex: none;
  padding: 1px calc(var(--bosluk) * 0.875);
  border-radius: 9px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  font-size: var(--etiket-boy);
  line-height: 17px;
  font-weight: 500;
  opacity: .75;
}

.rl-ok {
  flex: none;
  display: inline-flex;
  color: var(--gri-vurgu);
  opacity: .5;
  transition: transform var(--gecis) ease-out;
}

.rl-baslik-satir[aria-expanded="true"] .rl-ok { transform: rotate(90deg); opacity: .9; }

.rl-acik td { background: var(--defter-satir-cift); }

/* Ciro girmemiş gün listede kalır ama öne çıkmaz (Gelirler raporu). */
.rl-satir-bos .rl-td-ad,
.rl-satir-bos .rl-td-tutar { opacity: .45; }

/* Satıştan düşen kalem eksi yazılır. */
.rl-eksi { color: var(--metin-hata); }

/* İşlem satırı · başlıkla aynı hizada, soldan kılavuz çizgisiyle bağlı */
.rl-islem td {
  background: rgba(168, 174, 182, .10);
  border-bottom-color: rgba(168, 174, 182, .22);
}

.rl-islem .rl-td-ad { font-weight: 400; }
.rl-islem .rl-td-tutar { font-weight: 400; }

.rl-islem .rl-td-simge { position: relative; }

.rl-islem .rl-td-simge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rl-pay) + 9px);
  border-left: 1px solid var(--defter-tel);
  opacity: .45;
}

.rl-islem-son .rl-td-simge::before { bottom: 50%; }
.rl-islem-son td { border-bottom: 1px solid var(--defter-tel-soluk); }

.rl-islem-tarih {
  flex: none;
  width: 84px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}


@media (hover: hover) {
  .rl-baslik-satir:hover td { background: var(--defter-hover); }
  .rl-acik:hover td { background: var(--defter-satir-cift); }
  .rl-islem:hover td { background: rgba(168, 174, 182, .20); }
}

/* Dip toplamı · açık gri şerit, listenin altını kapatır. */
.rl-dip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25) var(--rl-pay);
  border-top: 1px solid var(--defter-tel-soluk);
  background: var(--defter-acilis);
  font-size: var(--kucuk-boy);
}

.rl-dip b {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.rl-not {
  margin: 0;
  padding: calc(var(--bosluk) * 1.5) var(--rl-pay);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: center;
  opacity: .6;
}

/* Boş durum · kartın içinde durur, sayfa boş kalmaz. */
.rl-bos {
  padding: calc(var(--bosluk) * 5) var(--rl-pay);
  text-align: center;
}

.rl-bos-baslik {
  margin-top: calc(var(--bosluk) * 2);
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  color: var(--defter-koyu);
}

.rl-bos-yazi {
  margin: var(--bosluk) auto 0;
  max-width: 46ch;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

@media (max-width: 899.98px) {
  .rl-kart { --rl-pay: calc(var(--bosluk) * 2); }

  /* Dar ekranda başlık kendi satırında durur, künyeler altına iner:
     yan yana sığmayınca ad iyice daralıp okunmaz oluyordu. */
  .rl-baslik-satir .rl-td-ad { flex-wrap: wrap; row-gap: 2px; }
  .rl-baslik-satir .rl-ad { flex: 1 1 100%; }
  .rl-ok { margin-left: auto; }
  .rl-islem .rl-td-ad { flex-wrap: nowrap; }
  .rl-tepe { align-items: flex-start; flex-direction: column; }
  .rl-toplam { align-items: flex-start; text-align: left; }
  .rl-aralik { width: 100%; }
  .rl-aralik .alan-kutu { flex: 1 1 auto; width: auto; }
  .rl-islem-tarih { width: 76px; }
}

/* ---- Kâr-Zarar · iki A4 sayfası ----
   Muhasebe dili yok. Birinci sayfa dört kutu: tepede "Ne vardı", solda
   "Ne girdi", sağda "Ne çıktı", altta "Ne kaldı". İkinci sayfa
   harcamaların dökümü. Her kutunun kendi rengi var (--kz-renk); simge
   plakası ve başlık o rengi alır, satırlar hep kağıt üstünde kalır.
   Kaynak: 4-ekranlar/2-raporlar/kar-zarar.js */
.kz-suzgec {
  max-width: 820px;
  margin: 0 auto calc(var(--bosluk) * 2);
}

.kz-aralik { display: flex; align-items: center; gap: var(--bosluk); }
.kz-aralik .alan-kutu { width: 160px; }
.kz-aralik-ok { opacity: .5; }

/* Sayfa gerçekten A4 oranındadır: 210×297 → 1 / 1.414. İçerik sığmazsa
   sayfa uzar (min-height), kısalmaz. */
.kz-sayfa {
  max-width: 820px;
  margin: 0 auto calc(var(--bosluk) * 3);
  padding: calc(var(--bosluk) * 3);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  box-shadow: var(--kart-golge);
  position: relative;
}

@media (min-width: 900px) {
  .kz-sayfa { min-height: 1160px; }
}

.kz-sayfa-tepe {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 2.5);
  padding-bottom: calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--defter-tel-soluk);
}

.kz-sayfa-yazi { flex: 1; min-width: 0; }

.kz-sayfa-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.kz-sayfa-alt {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* Sayfa numarası köşede küçük bir künye. */
.kz-sayfa-no {
  flex: none;
  padding: 2px calc(var(--bosluk) * 1.25);
  border: 1px solid var(--kart-kenar);
  border-radius: 12px;
  background: var(--kart-kagit);
  font-size: var(--etiket-boy);
  line-height: 20px;
  opacity: .8;
}

/* ---- Kutular ---- */
/* Kutu bir sütundur: tablo ortada esner, toplam ve alt not hep dipte
   durur. Yan yana iki kutunun toplam satırları böylece aynı hizaya
   gelir — rapor simetrik okunur. */
.kz-kutu {
  --kz-renk: var(--defter-koyu);
  /* Kutunun yan payı tek yerden: başlık, satır, toplam ve alt not hep
     bu paydan başlar. Simgeler kutunun kenarına, rakamlar sağ kenara
     yapışıyor ve taşmış gibi duruyordu. */
  --kz-pay: calc(var(--bosluk) * 3);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--kart-yuzey);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  overflow: hidden;
}

.kz-kutu-govde { flex: 1 1 auto; }

.kz-girdi { --kz-renk: var(--metin-basari); }
.kz-cikti { --kz-renk: var(--gri-vurgu); }
.kz-kaldi { --kz-renk: var(--defter-koyu); }
/* Kâr kutusu · raporun vardığı yer (2026.293). Gri çizgi onu öteki
   kutulardan ayırır: bakılan sayı budur. */
.kz-kar {
  --kz-renk: var(--defter-tel);
  box-shadow: inset 0 0 0 1px var(--defter-tel);
}

/* Kutular alt alta ve numaralıdır. Tek istisna 2 ve 3'tür: para solda
   girer, sağda çıkar — göz soldan sağa okuduğu için sıra bozulmaz. */
.kz-kutu + .kz-kutu { margin-top: calc(var(--bosluk) * 2); }


/* Adım numarası başlığın önünde küçük bir künye. */
.kz-adim {
  flex: none;
  padding: 1px calc(var(--bosluk) * 0.875);
  border-radius: 10px;
  background: var(--oyuk);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  font-family: var(--yazi-metin);
  font-size: var(--etiket-boy);
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--kz-renk);
  opacity: .85;
}

.kz-kutu-basi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  margin: 0;
  padding: calc(var(--bosluk) * 1.5) var(--kz-pay);
  border-bottom: 1px solid var(--defter-tel-soluk);
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--kz-renk);
}

/* Simge plakası kutunun rengini soluk zeminle taşır. */
.kz-kutu-simge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--oyuk);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  color: var(--kz-renk);
}

/* ---- Satırlar ---- */
.kz-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Satır yüksekliği burada, YAN PAY HÜCRENİN KENDİSİNDE verilir. Kısayol
   "padding: x 0" yazılırsa hücrelerin yan payını sıfırlıyor ve daha
   güçlü seçici olduğu için simge sola, tutar sağa yapışıyordu. */
.kz-tablo td {
  padding-top: calc(var(--bosluk) * 1.25);
  padding-bottom: calc(var(--bosluk) * 1.25);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
}

/* İki sütunlu kutuda satır bir tık sıkışır ama yan pay korunur: iki
   tablo yan yana sığsın, rakam ne ayraca ne kenara yapışsın. */
.kz-ciftli { --kz-pay: calc(var(--bosluk) * 2.5); }
.kz-ciftli .kz-tablo td {
  padding-top: var(--bosluk);
  padding-bottom: var(--bosluk);
}
.kz-ciftli .kz-td-simge { width: calc(var(--kz-pay) + 26px); }
.kz-ciftli .kz-td-ad { font-size: var(--kucuk-boy); padding-right: var(--bosluk); }
.kz-ciftli .kz-td-tutar { font-size: 14px; }

.kz-tablo tr:last-child td { border-bottom: 0; }

/* Simge hücresi: çizim satırın ortasına oturur, kendi satır yüksekliğini
   dayatmaz. line-height: 0 yerine blok svg — svg satır kutusunun altına
   inip satırı büyütüyordu. */
/* Simge kendi hücresinde ORTALANIR; sola yapışmaz. Hücre kutunun yan
   payı kadar içeriden başlar, simge de o alanın ortasında durur. */
.kz-td-simge {
  width: calc(var(--kz-pay) + 30px);
  padding-left: var(--kz-pay);
  color: var(--kz-renk);
  opacity: .75;
}

.kz-td-simge .simge { display: block; margin: 0 auto; }

/* Uzun hesap adı taşmaz, gerekirse alt satıra iner; rakam hiç kırılmaz. */
.kz-td-ad {
  width: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kz-td-tutar {
  width: 1%;
  padding-right: var(--kz-pay);
  text-align: right;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kz-satir-kalin .kz-td-ad,
.kz-satir-kalin .kz-td-tutar { font-weight: 600; }

.kz-satir-eksi .kz-td-tutar { color: var(--metin-hata); }
.kz-satir-eksi .kz-td-ad { opacity: .8; }

.kz-satir-bos .kz-td-ad { opacity: .55; }

/* ---- Varlıklar · Borçlar · iki sütun ----
   "Ne vardı" ve "Ne kaldı" kutusunun içi ikiye bölünür. Sütunlar eşit
   yükseklikte biter: tablo ortada esner, alt toplam dipte durur, iki
   toplam aynı hizaya gelir. Aradaki ayrım bir ince tel çizgidir. */
.kz-ciftli {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 640px) {
  .kz-ciftli { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kz-sutun + .kz-sutun { border-left: 1px solid var(--defter-tel-soluk); }
}

@media (max-width: 639.98px) {
  .kz-sutun + .kz-sutun { border-top: 1px solid var(--defter-tel-soluk); }
}

.kz-sutun {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kz-sutun-govde { flex: 1 1 auto; }

/* Sütun başlığı: küçük, seyrek harfli, kendi rengiyle. */
.kz-sutun-basi {
  padding: calc(var(--bosluk) * 1.25) var(--kz-pay) var(--bosluk);
  border-bottom: 1px solid var(--defter-tel-soluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kz-sutun-varlik .kz-sutun-basi { color: var(--metin-basari); }
.kz-sutun-borc .kz-sutun-basi { color: var(--metin-hata); }

.kz-sutun-varlik { --kz-renk: var(--metin-basari); }
.kz-sutun-borc { --kz-renk: var(--metin-hata); }

/* Sütunun kendi toplamı · kutunun dibindeki büyük toplamdan sakin. */
.kz-sutun-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: var(--bosluk) var(--kz-pay);
  border-top: 1px solid var(--defter-tel-soluk);
  background: var(--oyuk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}

.kz-sutun-toplam b {
  flex: none;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Kontrol kutusu · tuttuğunda yeşil, tutmadığında kırmızı konuşur. */
.kz-kontrol { --kz-renk: var(--bilgi); margin-top: calc(var(--bosluk) * 1.5); }

/* Kontrolü açan düğme · kapalıyken raporun tek fazlalığı budur. */
.kz-acar {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  width: 100%;
  min-height: 52px;
  margin-top: calc(var(--bosluk) * 2);
  padding: var(--bosluk) calc(var(--bosluk) * 3);
  background: var(--kart-kagit);
  border: 1px solid var(--kart-kenar);
  border-radius: 14px;
  text-align: left;
  color: var(--metin-bilgi);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
}

.kz-acar-simge { flex: none; display: inline-flex; }
.kz-acar-ad { flex: 1 1 auto; min-width: 0; }

.kz-acar-ok {
  flex: none;
  display: inline-flex;
  opacity: .5;
  transition: transform var(--gecis) ease-out;
}

.kz-acar[aria-expanded="true"] .kz-acar-ok { transform: rotate(90deg); }

@media (hover: hover) {
  .kz-acar:hover { background: var(--kart-yuzey); border-color: var(--defter-tel); }
}

.kz-kontrol-ipucu {
  display: block;
  margin-top: calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

.kz-satir-acilir { cursor: pointer; }
.kz-satir-acilir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

@media (hover: hover) {
  .kz-satir-acilir:hover td { background: var(--defter-hover); }
}

/* Kutunun altındaki toplam: açık gri zemin, kalın rakam. */
.kz-kutu-toplam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25) var(--kz-pay);
  border-top: 1px solid var(--defter-tel-soluk);
  background: var(--defter-acilis);
  font-size: var(--kucuk-boy);
}

.kz-kutu-toplam span { min-width: 0; }

.kz-kutu-toplam b {
  flex: none;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kz-kutu-not {
  margin: 0;
  padding: var(--bosluk) var(--kz-pay) calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

/* Arttı · azaldı rozeti. */
.kz-rozet {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  padding: 3px calc(var(--bosluk) * 1.25);
  border-radius: 14px;
  background: var(--oyuk);
  font-weight: 600;
}

.kz-rozet-artan  { background: rgba(47, 125, 83, .14); color: var(--metin-basari); }
.kz-rozet-azalan { background: rgba(183, 44, 40, .12); color: var(--metin-hata); }

.kz-artan { color: var(--metin-basari); }
.kz-azalan { color: var(--metin-hata); }

/* ---- Ne çıktı · açılır gruplar ----
   Grup satırına basılınca altında o grubun kalemleri açılır. Kalem adı
   grubun adıyla AYNI HİZADA başlar; alta ait olduğunu girinti değil,
   simge sütunundan geçen ince gri kılavuz çizgisi söyler. */
.kz-grup { cursor: pointer; }

.kz-grup .kz-td-ad {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  font-weight: 600;
}

.kz-grup-ad { min-width: 0; }

/* Kaç kalem olduğu küçük bir künye. */
.kz-grup-adet {
  flex: none;
  padding: 1px calc(var(--bosluk) * 0.875);
  border-radius: 9px;
  background: var(--kart-yuzey);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  font-size: var(--etiket-boy);
  line-height: 17px;
  font-weight: 500;
  opacity: .75;
}

.kz-grup-ok {
  flex: none;
  display: inline-flex;
  color: var(--kz-renk);
  opacity: .5;
  transition: transform var(--gecis) ease-out;
}

.kz-grup[aria-expanded="true"] .kz-grup-ok { transform: rotate(90deg); opacity: .9; }

/* Açık grup: zemin şeridi. Kutunun dibindeki "toplam" barı antik
   altındır; açık grup ondan bir ton açık kalsın ki ikisi karışmasın. */
.kz-grup-acik td {
  background: var(--defter-satir-cift);
  border-bottom-color: var(--defter-tel-soluk);
}

.kz-grup-acik .kz-td-ad,
.kz-grup-acik .kz-td-tutar { color: var(--defter-notr); }

.kz-grup-acik .kz-grup-adet { background: rgba(255, 255, 255, .75); }

/* Kalem satırı: sıcak kağıt tonu, girinti yok, hizası grupla aynı. */
.kz-kalem td {
  background: rgba(168, 174, 182, .10);
  border-bottom-color: rgba(168, 174, 182, .22);
}

.kz-kalem .kz-td-ad {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  font-size: var(--kucuk-boy);
}

/* İşlem satırı: solda tarih, yanında açıklama. */
.kz-islem-tarih {
  flex: none;
  width: 84px;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

.kz-islem-ad { min-width: 0; overflow-wrap: anywhere; }

/* Bu sürede parası çıkmamış başlık listede durur ama öne çıkmaz. */
.kz-grup-bos .kz-td-ad,
.kz-grup-bos .kz-td-tutar { opacity: .5; }
.kz-kalem .kz-td-tutar { font-weight: 400; }

/* Kılavuz çizgisi simge sütunundan geçer: kalemler grubun altında bir
   dal gibi durur ama hiçbir yazı sağa kaymaz. */
.kz-kalem .kz-td-simge { position: relative; }

.kz-kalem .kz-td-simge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--kz-pay) + 9px);
  border-left: 1px solid var(--defter-tel);
  opacity: .45;
}

/* Son kalemde çizgi yarıda kalır ve blok gri telle kapanır. */
.kz-kalem-son .kz-td-simge::before { bottom: 50%; }

.kz-kalem-son td { border-bottom: 1px solid var(--defter-tel-soluk); }

@media (hover: hover) {
  .kz-grup:hover td { background: var(--defter-hover); }
  .kz-grup-acik:hover td { background: var(--defter-satir-cift); }
  .kz-kalem:hover td { background: rgba(168, 174, 182, .20); }
}

.kz-bos,
.kz-not {
  margin: 0;
  padding: calc(var(--bosluk) * 2) 0 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: center;
  opacity: .7;
}

.kz-not { border-top: 1px solid var(--defter-tel-soluk); opacity: .6; }

/* ---- Ayrıntı paneli ---- */
.kz-panel-bos { margin: 0; font-size: var(--kucuk-boy); opacity: .7; }

.kz-ayrinti { display: flex; flex-direction: column; }

.kz-ayrinti-satir {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  padding: var(--bosluk) 0;
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.kz-ayrinti-satir:last-child { border-bottom: 0; }

.kz-ayrinti-tarih {
  flex: none;
  width: 84px;
  opacity: .7;
}

.kz-ayrinti-ad { flex: 1 1 auto; min-width: 0; }

.kz-ayrinti-kaynak {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

.kz-ayrinti-tutar {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---- Döküm penceresi (2026.229) ----
   Eski panel yalnız hareket listesiydi ve künyesi yoktu. Yenisi tepede
   neye baktığını, altta kaç kalem ve toplam kaç lira olduğunu söyler;
   satırlar sol kod · orta ad · sağ tutar diye üç sütuna oturur. */
.kzp { display: flex; flex-direction: column; }

.kzp-basi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--bosluk);
  margin-bottom: calc(var(--bosluk) / 2);
  border-bottom: 1px solid var(--ayirici);
}

.kzp-basi-ad { font-weight: 600; }

.kzp-basi-alt {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .6;
}

.kzp-liste { list-style: none; margin: 0; padding: 0; }

.kzp-satir {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 0.9) calc(var(--bosluk) / 2);
  border-bottom: 1px solid var(--ayirici);
  border-radius: var(--kose-kucuk, 6px);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Büyüklük çubuğu satırın ARKASINDA durur: rakamları okumadan
   hangisinin ağır bastığı görünsün, ama yazıyı bastırmasın. */
.kzp-cubuk {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--defter-tel, currentColor);
  opacity: .55;
  pointer-events: none;
}

.kzp-cubuk-eksi { background: var(--metin-hata); opacity: .45; }

.kzp-pay {
  flex: none;
  width: 46px;
  text-align: right;
  font-size: var(--etiket-boy);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

.kzp-not {
  margin: 0 0 var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

.kz-fark-dugme { margin-top: var(--bosluk); }

/* ---- Kontrol · üç sütunlu tablo (2026.231) ----
   Solda ne bakıldığı, ortada defterin dediği, sağda olması gereken.
   Tutmayan satır kendini belli eder. */
.kzk-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.kzk-tablo th {
  padding: 0 var(--bosluk) var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--etiket-boy);
  font-weight: 600;
  text-align: left;
  opacity: .6;
}

.kzk-tablo td {
  padding: calc(var(--bosluk) * 0.8) var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: top;
}

.kzk-tablo tr:last-child td { border-bottom: 0; }

.kzk-ad { width: 46%; }

.kzk-not {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

.kzk-sayi {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kzk-kalin td, .kzk-kalin .kzk-ad { font-weight: 600; }
.kzk-kalin td { border-top: 1px solid var(--kart-kenar); }

/* Tutmayan satırın iki rakamı yan yana okunur; sağdaki beklenen
   vurgulanır ki gözle karşılaştırma kolay olsun. */
.kzk-vurgu .kzk-sayi:last-child { color: var(--metin-hata); }
.kzk-vurgu { background: var(--oyuk); }

/* ---- Kontrol · mizan tablosu (2026.233) ----
   Beş rakam sütunu yan yana; sağdaki fark sütunu tutmayan hesabı
   işaret eder. Kök satırlar tıklanır, altları açılır. */
.kzm-tablo {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.kzm-tablo th {
  padding: 0 var(--bosluk) var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--etiket-boy);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  opacity: .6;
}

.kzm-tablo td {
  padding: calc(var(--bosluk) * 0.7) var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
}

.kzm-tablo tr:last-child td { border-bottom: 0; }

.kzm-sayi {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kzm-ad { min-width: 200px; }

.kzm-kod {
  display: inline-block;
  min-width: 54px;
  margin-right: 8px;
  font-weight: 700;
  opacity: .7;
}

.kzm-kok { cursor: pointer; font-weight: 600; }
.kzm-kok:hover, .kzm-kok:focus-visible { background: var(--oyuk); }

.kzm-alt { cursor: pointer; }
.kzm-alt .kzm-ad { padding-left: calc(var(--bosluk) * 2); font-weight: 400; }
.kzm-alt td { opacity: .85; }
.kzm-alt:hover, .kzm-alt:focus-visible { background: var(--oyuk); }

.kzm-sonu { font-weight: 600; }

/* Denklik satırı tablonun dibinde durur, kalın çizgiyle ayrılır. */
.kzm-denklik td {
  border-top: 2px solid var(--kart-kenar);
  border-bottom: 0;
  font-weight: 600;
  padding-top: var(--bosluk);
}

.kzm-not {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 400;
  opacity: .55;
}

.kzm-araclar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--bosluk);
}

.kzm-fark { color: var(--metin-basari); }
.kzm-farkli .kzm-fark { color: var(--metin-hata); font-weight: 600; }
.kzm-farkli { background: var(--oyuk); }

/* Eksi bakiye kırmızı okunur (2026.259 · kullanıcının isteği). Sınıf
   ortaktır — hareketler ekranı ve defter de aynısını kullanıyor — ama
   kâr-zarar tablolarının kendi renkleri daha güçlü seçicilerle geliyor;
   burada onların üstüne yazılır. */
.kz-td-tutar.tablo-eksi,
.kz-grup-acik .kz-td-tutar.tablo-eksi,
.kz-satir-acilir .kz-td-tutar.tablo-eksi,
.kzm-sayi.tablo-eksi,
.kzm-sonu.tablo-eksi,
.kz-sutun-toplam b.tablo-eksi { color: var(--metin-hata); font-weight: 600; }

/* Fark teşhisi · kutu içinde küçük bir liste. */
.kz-teshis {
  margin: calc(var(--bosluk) / 2) 0 var(--bosluk);
  padding-left: calc(var(--bosluk) * 1.5);
}

.kz-teshis li { margin-bottom: 3px; }

.kzp-tiklanir { cursor: pointer; }
.kzp-tiklanir:hover,
.kzp-tiklanir:focus-visible { background: var(--oyuk); }

.kzp-satir:last-child { border-bottom: 0; }

/* Hesap satırı tıklanır, işlem satırı tıklanmaz. */
.kzp-satir[data-hesap] { cursor: pointer; }
.kzp-satir[data-hesap]:hover,
.kzp-satir[data-hesap]:focus-visible { background: var(--vurgu-zemin, rgba(0, 0, 0, .04)); }

.kzp-kod {
  flex: none;
  width: 84px;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.kzp-ad { flex: 1 1 auto; min-width: 0; }

.kzp-kaynak {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

.kzp-tutar {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.kzp-eksi { color: var(--metin-hata); }

.kzp-toplam {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bosluk);
  margin-top: var(--bosluk);
  padding-top: var(--bosluk);
  border-top: 1px solid var(--kart-kenar);
  font-size: var(--kucuk-boy);
}

.kzp-toplam span { opacity: .7; }
.kzp-toplam b { font-variant-numeric: tabular-nums; }

.kzp-bos { margin: 0; font-size: var(--kucuk-boy); opacity: .7; }

@media (max-width: 899.98px) {
  .kz-sayfa { padding: calc(var(--bosluk) * 2); }
  .kzp-kod { width: 72px; }

  /* Gider başlığı dar ekranda kendi satırında durur, künyesi altına
     iner (Giderler raporundaki ile aynı sebep). */
  .kz-grup .kz-td-ad { flex-wrap: wrap; row-gap: 2px; }
  .kz-grup .kz-grup-ad { flex: 1 1 100%; }
  .kz-grup .kz-grup-ok { margin-left: auto; }
  .kz-aralik { width: 100%; }
  .kz-aralik .alan-kutu { flex: 1 1 auto; width: auto; }
  .kz-ayrinti-tarih { width: 72px; }
  .kz-islem-tarih { width: 76px; white-space: nowrap; }
  .kz-kutu { --kz-pay: calc(var(--bosluk) * 2); }
}

/* Yazdırınca gerçekten iki A4 sayfası çıkar: süzgeç basılmaz, her
   sayfa kendi kağıdında durur. */
@media print {
  .kz-suzgec { display: none; }
  .kz-sayfa {
    margin: 0;
    min-height: 0;
    border: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .kz-sayfa:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- Tekrarlayan Ödeme ve Gelirler · kural seçimleri ----------
   Form soruyu soruyor, kullanıcı düğmeye basıyor: haftanın günü, ayın
   günleri, kaçıncı hafta. Yazı kutusu yerine düğme, çünkü seçenek belli
   ve sayısı az; yazılan bir sayının doğru olup olmadığını kullanıcı
   ancak kaydettikten sonra anlardı. */
.tk-oyuk {
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 1.75);
  margin-bottom: calc(var(--bosluk) * 1.5);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
}

.tk-baslik {
  margin-bottom: var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.tk-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) * .75);
}

.tk-cipler .cip {
  border: 1px solid var(--kenar);
  background: var(--yuzey);
  cursor: pointer;
}

.tk-cipler .cip-secili {
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: var(--yuzey);
}

/* Ayın günleri · 31 düğme, dar ekranda da tek ekrana sığsın. */
.tk-gun-agi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: calc(var(--bosluk) * .6);
}

.tk-gun {
  justify-content: center;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.tk-not {
  margin: var(--bosluk) 0 0;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

.tk-onizleme {
  margin-top: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.75);
  border: 1px dashed var(--kart-kenar);
  border-radius: var(--kose-kutu);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--metin);
}

.tk-satir-alt {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .6;
}

/* =====================================================================
   GERİ GETİRİLEN KURALLAR · 2026.150
   ---------------------------------------------------------------------
   2026.133'te panel yeniden yazılırken bu dosyadan yanlışlıkla ~1000
   satır silinmiş: fatura önizlemesi, detay panelleri, künye satırları,
   özet kutuları ve FORM BÖLÜMLERİ. Formlar boşluksuz, fatura listesi
   ızgarasız kalmıştı.

   Buradaki her şey 2026.132'deki hâlinden alındı; yalnız eski panelin
   (.panel-*) kuralları dışarıda bırakıldı — o ekran yeniden yazıldı ve
   yerini .pn-* aldı.
   ===================================================================== */

/* Panel: 16px boşlukla başlayan tam genişlik alan; kaydırılmaz. */

.iskelet-panel {
  display: flex;
  flex-direction: column;
}

/* Masaüstü: dört ölçü tek şeritte, kartlar iki sütunda ve genişlik
   sınırlı. 1920px'lik bir ekranda kartlar iki metre uzamaz. */

@media (min-width: 900px) {
  /* Kapak var: 2560px'lik bir monitörde ölçü kartları ~560px'e gerilir ve
     yapılacak satırının solundaki nokta ile sağındaki rozet arası gözle
     taranamaz. Ortalama da var: kapaklı içerik sola yaslanınca artan pay
     hep sağda birikir ve boşluk kusur gibi durur. Form ekranı da aynı
     ikisini birlikte kullanır (bkz. .iskelet-form). */

  .iskelet-panel {
    max-width: 1640px;
    margin-inline: auto;
  }
}

/* Detay: künye bloğu iki sütun, 900px altında tek sütun. */

/* Künye · detay kartının gövdesi. Tepe kuşağıyla aynı kartın içinde
   durur; iki parça arasında yalnız ince bir ayırıcı vardır. */
.iskelet-detay-kunye {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
}

/* Tepe ve künye birlikte tek kart: ikisi kardeş olduğu için kabı
   sayfanın kendisi kurar — .detay-basi kartın üstü, künye altıdır. */
.detay-basi,
.iskelet-detay-kunye {
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border-left: var(--kart-cerceve);
  border-right: var(--kart-cerceve);
}

.detay-basi {
  border-top: var(--kart-cerceve);
  border-radius: var(--kose-kart) var(--kose-kart) 0 0;
}

.iskelet-detay-kunye {
  border-bottom: var(--kart-cerceve);
  border-radius: 0 0 var(--kose-kart) var(--kose-kart);
  box-shadow: var(--kart-golge);
  margin-bottom: calc(var(--bosluk) * 3);
}

.kunye-deger { color: var(--metin); }

/* Gri tel · kartlardaki iç çerçevenin aynısı, iki parçaya bölünmüş
   hâli: üst yarısı kuşakta, alt yarısı künyede. İkisi birleşince tek
   bir tel gibi görünür. */
.detay-basi,
.iskelet-detay-kunye { position: relative; }

.detay-basi::after,
.iskelet-detay-kunye::after {
  content: "";
  position: absolute;
  border: var(--kart-tel);
  pointer-events: none;
}

.detay-basi::after {
  inset: 3px 3px 0;
  border-bottom: 0;
  border-radius: calc(var(--kose-kart) - 3px) calc(var(--kose-kart) - 3px) 0 0;
}

.iskelet-detay-kunye::after {
  inset: 0 3px 3px;
  border-top: 0;
  border-radius: 0 0 calc(var(--kose-kart) - 3px) calc(var(--kose-kart) - 3px);
}

/* Ayarlar: 24px aralıklı gruplar. */

.iskelet-ayarlar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) * 3);
}

@media (min-width: 900px) {
  .iskelet-detay-kunye {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--bosluk) * 4);
  }
}

/* Liste: içerik doğrudan akar; şerit ayrı sınıfla verilir. */

.iskelet-liste { display: block; }

/* Tek sütun, 24px bölüm aralığı; alan aralığı bileşen tarifinde durur. */

.form-bolum + .form-bolum { margin-top: calc(var(--bosluk) * 3); }

.form-bolum-baslik {
  margin-bottom: calc(var(--bosluk) * 1.5);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}

/* İki alan yan yana; dar ekranda alt alta iner. */

.form-ikili { display: grid; gap: 0 calc(var(--bosluk) * 1.5); }

/* Mobilde ekranın altında sabit kaydet çubuğu; geniş ekranda formun
   altında akar. Alt menü üstünde durur, son alan altında kalmaz. */

.form-dip {
  display: flex;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 3);
}

.form-dip > * { flex: 1; }

@media (min-width: 900px) {
  .form-ikili { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899.98px) {
  .form-dip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    margin: 0;
    height: var(--alt-menu);
    align-items: center;
    padding: 0 calc(var(--bosluk) * 2);
    background: var(--yuzey);
    border-top: 1px solid var(--kenar);
  }

  /* Kaydet çubuğu içeriğin üstünde durur; son alan altında kalmasın. */

  .iskelet-form-dipli { padding-bottom: calc(var(--alt-menu) + var(--bosluk) * 2); }
}

/* Üstte künye bloğu, 24px sonra kalem tablosu, en altta sağa hizalı
   toplam bloğu. */

/* Detay tepesi · belge no, durumu ve tutarı bir kuşakta (2026.151).
   Önce üçü sayfanın üstünde havada duruyordu: zeminin üstüne düşen
   çıplak yazı, altındaki tablo ise kartın içinde. Şimdi tepe de bir
   kart: künye onun içinde, kalemler tablosu altında. */
.detay-basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk) calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--kart-kenar);
}

.detay-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  margin: 0;
  color: var(--defter-koyu);
}

.detay-tutar {
  margin-left: auto;
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.detay-tutar-eksi { color: var(--metin-hata); }

/* Rakamın yanındaki tek kelime: yön yalnız renge bırakılmaz. */

.detay-tutar-yon {
  font-family: var(--yazi-metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

.detay-bolum { margin-top: calc(var(--bosluk) * 3); }

.detay-bolum-baslik {
  margin-bottom: calc(var(--bosluk) * 1.5);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}

.detay-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 3);
}

.detay-toplam {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--bosluk) * 2);
  margin-top: calc(var(--bosluk) * 2);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.detay-toplam-tutar {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Künye çiftleri: solda etiket, altında değer. */

.kunye-cift {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 4);
}

.kunye-etiket {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}

.kunye-deger {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.kunye-deger-tutar {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kunye-bag {
  align-self: flex-start;
  min-height: var(--dokunma);
  display: flex;
  align-items: center;
  color: var(--vurgu);
  text-align: left;
  text-decoration: underline;
}

/* Özet kartının kendi kuralı yoktu: yalnız zemin zeminini alıyor,
   görselle metin üst üste biniyordu (2026.189). Kart bir satırdır:
   solda küçük görsel, sağda iki satırlık özet. */
.ozet-kart {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2);
  border-radius: var(--kose-kutu);
}

.ozet-gorsel {
  flex: 0 0 auto;
  width: var(--gorsel-ozet);
  height: var(--gorsel-ozet);
  color: var(--gri-vurgu);
}

.ozet-metin { flex: 1; min-width: 0; }

.ozet-satir {
  display: flex;
  gap: var(--bosluk);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.ozet-satir-ad {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozet-satir-tutar {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ozet-bos {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

/* Izgaradaki her hücre daralabilir. Bunu yazmazsak uzun bir hesap adı
   ya da fatura numarası sütunu şişirir ve satır kabın dışına taşar —
   masaüstünde Detay düğmesi ekrandan çıkıyordu. */

.fatura-h { min-width: 0; }

/* Yüklenen dosyanın adı ve "başka dosya" düğmesi. */

.fatura-dosya {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.fatura-dosya > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fatura-degistir { flex: 0 0 auto; }

.fatura-uzanti {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

.fatura-oz-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.fatura-oz-hucre {
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2);
  border-right: 1px solid var(--ayirici);
  min-width: 0;
}

.fatura-oz-hucre:last-child { border-right: 0; }

.fatura-oz-sayi {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uzun tutar (12.440.300,70 ₺) dar hücreye sığmıyordu: rakam küçülür,
   satır aynı kalır. */

.fatura-oz-uzun { font-size: var(--h2-boy); line-height: var(--h2-satir); }

.fatura-oz-ad {
  display: block;
  margin-top: 2px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.fatura-oz-alt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 2);
  border-top: 1px solid var(--ayirici);
  background: var(--oyuk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.fatura-oz-not { opacity: .7; }

.fatura-oz-bosluk { flex: 1; }

.fatura-oz-dugme {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(184, 117, 3, .45);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin-uyari);
  font-weight: 500;
}

@media (max-width: 560px) {
  .fatura-oz-izgara { grid-template-columns: repeat(2, 1fr); }

  .fatura-oz-hucre { border-bottom: 1px solid var(--ayirici); }

  .fatura-oz-hucre:nth-child(2n) { border-right: 0; }

  .fatura-oz-hucre:nth-last-child(-n+2) { border-bottom: 0; }

  .fatura-oz-sayi { font-size: var(--h2-boy); line-height: var(--h2-satir); }

  .fatura-oz-uzun { font-size: var(--govde-boy); line-height: var(--govde-satir); }

  .fatura-oz-alt { align-items: stretch; flex-direction: column; }

  .fatura-oz-bosluk { display: none; }
}

@media (hover: hover) {
  .fatura-oz-dugme:hover { opacity: .75; }
}

/* Sütun başlıkları yalnız tablo düzeninde görünür. */

.fatura-basliklar { display: none; }

.fatura-kart + .fatura-kart { border-top: 1px solid var(--ayirici); }

/* Telefon düzeni: iki sütunlu ızgara. Tarih ile tutar aynı satırda,
   altında ad, altında fatura no ve çeşidi, en altta açıklama ile detay. */

.fatura-satir {
  display: grid;
  align-items: center;
  gap: calc(var(--bosluk) / 2) var(--bosluk);
  padding: calc(var(--bosluk) * 1.5);
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "tarih  alacak"
    "cari   cari"
    "no     cesit"
    "aciklama detay";
}

.fatura-tarih {
  grid-area: tarih;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.fatura-cari {
  grid-area: cari;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  flex-wrap: wrap;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
}

/* Rozet aynı zamanda düğmedir: eşleştirme formunu o açar. */

.fatura-rozet {
  border: 0;
  cursor: pointer;
}

/* Eşleşmiş satırdaki düğme sessizdir: iş bitmiştir, yalnız düzeltme
   kapısı açık durur. Üzerine gelince belirir (2026.275). */
.fatura-rozet-sessiz {
  background: transparent;
  color: var(--metin);
  opacity: .45;
  font-weight: 500;
}

.fatura-rozet-sessiz:hover,
.fatura-rozet-sessiz:focus-visible { opacity: 1; background: var(--yan-zemin); }

/* Telefonda üç nokta olmaz: dokunmatikte "üzerine gelme" yok, kesilen
   numaranın tamamı hiçbir yerde görünmez. Sığmazsa alt satıra sarar. */

.fatura-no {
  grid-area: no;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.fatura-cesit {
  grid-area: cesit;
  text-align: right;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
}

/* Alış faturasında borç sütunu hep boştur; telefonda yer kaplamasın diye
   gizlenir, masaüstü tabloda sütun olarak durur. */

.fatura-borc { display: none; }

.fatura-alacak {
  grid-area: alacak;
  text-align: right;
  white-space: nowrap;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fatura-birim {
  margin-left: 2px;
  font-size: var(--kucuk-boy);
  opacity: .65;
}

.fatura-aciklama {
  grid-area: aciklama;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--kucuk-boy);
}

.fatura-aciklama:focus {
  border: 2px solid var(--vurgu);
  padding: 0 9px;
  outline: none;
}

.fatura-detay {
  grid-area: detay;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  white-space: nowrap;
}

/* Eşleştirme paneli · pencerenin içinde durur (js/pencere.js · ac). */

.fatura-eslestir-kunye { margin-bottom: calc(var(--bosluk) * 2); }

.fatura-eslestir-not {
  display: block;
  margin-top: calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

/* --- Toplu açılış bakiyesi paneli (2026.289) ---
   Üç sütun: hesap, şu anki bakiye, olacak bakiye. Liste uzun olabilir
   (bir dalın bütün hesapları), o yüzden tablo kendi içinde kayar. */
.hesap-acilis { display: flex; flex-direction: column; gap: var(--bosluk); }

.hesap-acilis-not {
  margin: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .8;
}

.hesap-acilis-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
}

/* Dosya seçme düğmesi bir etikettir: içindeki input gizli durur. */
.hesap-acilis-sec { cursor: pointer; }

.hesap-acilis .tablo-kutu { max-height: 52vh; overflow: auto; }

/* Hesabın numarası ve satırın durumu adın altında, soluk. */
.hesap-acilis-kod,
.hesap-acilis-durum {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

.hesap-acilis-bozuk td { color: var(--uyari); }

/* --- Toplu hesap açma paneli (2026.286) ---
   İki sütun: hesap adı ile ana hesap. Ad kutusu esner, ana hesap
   kutusu okunacak en uzun seçeneğe göre sabit durur — yan yana iki
   esneyen kutu satırdan satıra farklı genişlikte çıkıyordu. */
.fatura-toplu { display: flex; flex-direction: column; gap: var(--bosluk); }

.fatura-toplu-not,
.fatura-toplu-uyari {
  margin: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.fatura-toplu-not { opacity: .8; }
.fatura-toplu-uyari { color: var(--uyari); }

/* Liste uzun olabilir (ilk aktarımda yetmiş satır): tablo kendi
   içinde kayar, panel ekrandan taşmaz. */
.fatura-toplu .tablo-kutu {
  max-height: 52vh;
  overflow: auto;
}

.fatura-toplu-tablo th:last-child,
.fatura-toplu-tablo td:last-child { width: 240px; }

.fatura-toplu-tablo .alan-kutu { width: 100%; }

@media (max-width: 900px) {
  .fatura-toplu-tablo th:last-child,
  .fatura-toplu-tablo td:last-child { width: auto; }
}

.fatura-secim {
  display: flex;
  gap: 2px;
  margin-bottom: calc(var(--bosluk) * 2);
  padding: 2px;
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
}

.fatura-secim-dugme {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--bosluk);
  border-radius: calc(var(--kose-kutu) - 2px);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
  transition: background-color var(--gecis) ease-out, opacity var(--gecis) ease-out,
              transform var(--basma) ease-out;
}

.fatura-secim-secili {
  background: var(--yuzey);
  box-shadow: var(--golge);
  opacity: 1;
  font-weight: 500;
}

/* Detay paneli · fatura kâğıdındaki gibi: tepe, künye, kalemler, toplam.
   Kâğıdın dili İrsaliye Aktarımı'nın mal giriş kartından geldi
   (2026.169 · kullanıcının kararı): aynı oyuk zeminli tepe, aynı kırmızı
   başlık, aynı künye şeridi, aynı iç tablo kutusu, aynı altlık.
   İki ekranın kâğıdı birbirine benzesin diye ölçüler ".ir-kart" ile
   birebir aynı tutuldu. İşaretleme: 3-cekirdek/3-isler/fatura-gorunum.js */

.fatura-b-kagit {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  overflow: hidden;
}

.fatura-b-tepe {
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.fatura-b-tepe-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
  overflow-wrap: anywhere;
}

.fatura-b-tepe-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
  overflow-wrap: anywhere;
}

/* Künye şeridi: fatura no · fatura tarihi · vade yan yana, dar ekranda
   alt alta. Tedarikçi burada ikinci kez yazılmaz, başlıkta duruyor. */

.fatura-b-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
}

.fatura-b-alan {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fatura-b-etiket {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.fatura-b-deger {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Kalem tablosu kâğıdın ortasında kendi kutusunda durur; dar ekranda
   kutu kendi içinde yana kayar, kâğıt taşmaz. */

.fatura-b-tablo-kutu {
  overflow-x: auto;
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
}

.fatura-b-tablo {
  width: 100%;
  border-collapse: collapse;
}

.fatura-b-tablo th {
  padding: var(--bosluk) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 700;
  white-space: nowrap;
}

.fatura-b-tablo td {
  padding: 6px calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  vertical-align: middle;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.fatura-b-tablo tbody tr:last-child td { border-bottom: 0; }

.fatura-b-tablo th.sag,
.fatura-b-tablo td.sag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Ürün adı sütunu ezilmesin: kalan payın tamamı onundur, rakam
   sütunları kendi genişliğinde durur. */

.fatura-b-tablo th:first-child,
.fatura-b-tablo td:first-child { min-width: 160px; width: auto; font-weight: 500; }

.fatura-b-kalemsiz {
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 2.5);
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* Altlık: solda matrah ile KDV küçük, sağda genel toplam büyük —
   irsaliye kartının altlığıyla aynı şerit. */

.fatura-b-altlik {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--kenar);
  background: var(--oyuk);
}

/* Matrah ile KDV iki sütunlu bir ızgaradır: etiketler solda, rakamlar
   sağda alt alta hizalı. Düz akışta bıraksaydık "12.450,75" ile
   "2.490,15" birbirinin altında kaymış dururdu. */

.fatura-b-kirim {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 3px calc(var(--bosluk) * 1.5);
  min-width: 0;
}

.fatura-b-kirim-satir {
  display: contents;
  font-size: var(--kucuk-boy);
}

.fatura-b-kirim-satir > span {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

.fatura-b-kirim-satir > span:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fatura-b-genel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}

.fatura-b-genel > span {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.fatura-b-genel > b {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Telefonda kâğıdın payları daralır ve altlık alt alta iner; irsaliye
   kartı da 900'ün altında böyle davranıyor. */

@media (max-width: 899.98px) {
  .fatura-b-tepe,
  .fatura-b-kunye { padding: calc(var(--bosluk) * 2); }
  /* Künye telefonda iki katlı olur: numara tek başına üstte, iki tarih
     altında yan yana. Üçü birden yan yana konsaydı sütun 120px'e
     düşüyor ve numara ikiye bölünüyordu. */
  .fatura-b-kunye {
    gap: var(--bosluk) calc(var(--bosluk) * 1.5);
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }

  .fatura-b-genis { grid-column: 1 / -1; }
  .fatura-b-tablo-kutu { margin: var(--bosluk) calc(var(--bosluk) * 2); }

  /* Beş sütun telefona sığmıyor ve tablo yana kayınca "Tutar" görüş
     dışında kalıyordu. Birim fiyat ile KDV oranı burada düşer; kalan üç
     sütun asıl sorunun cevabıdır: hangi üründen kaç tane, ne kadar.
     İrsaliye kartı da telefonda ikinci sütununu böyle düşürüyor. */
  .fatura-b-tablo th:nth-child(3),
  .fatura-b-tablo td:nth-child(3),
  .fatura-b-tablo th:nth-child(4),
  .fatura-b-tablo td:nth-child(4) { display: none; }

  /* Üç sütun telefon genişliğine sabitlenir: rakam sütunları kendi
     ölçüsünü alır, ürün adı kalanı alır ve sararak sığar. Serbest
     bırakılsaydı tablo birkaç piksel taşıyor, "Tutar" yarım kalıyordu. */
  .fatura-b-tablo { table-layout: fixed; }

  .fatura-b-tablo th,
  .fatura-b-tablo td { padding: 6px var(--bosluk); }

  /* "Ürün / Hizmet" başlığı dar sütunda iki satıra iner; nowrap kalsaydı
     yanındaki "Miktar" başlığının üstüne biniyordu. */
  .fatura-b-tablo th { white-space: normal; }

  .fatura-b-tablo th:first-child,
  .fatura-b-tablo td:first-child { min-width: 0; }

  .fatura-b-tablo th:nth-child(2) { width: 54px; }
  .fatura-b-tablo th:nth-child(5) { width: 98px; }
  .fatura-b-kalemsiz { padding: calc(var(--bosluk) * 2); }
  .fatura-b-altlik {
    padding: calc(var(--bosluk) * 2);
    flex-direction: column;
    align-items: stretch;
  }
  .fatura-b-genel {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk);
  }
}

.fatura-aktar { margin-top: calc(var(--bosluk) * 2); }

/* Masaüstü: aynı hücreler tek satıra dizilir ve tablo görünümünü alır.
   Ayrı bir <table> yazılmaz; ızgara zaten sütunları hizalar.

   Kırılım burada 900 değil 1200'dür ve bu, uygulamanın tek kırılım
   kuralının bilerek konmuş istisnasıdır (css/degiskenler.css). Sebebi
   ölçülebilir: 900px'te yan panel 240px alır, satıra 594px kalır ve sekiz
   sütun oraya sığmaz — fatura numarası kesilir, Detay düğmesi ekrandan
   taşar. 1200px'te satıra ~894px kalır ve sekizi de sığar. Kırılımı
   şablona değil, içeriğin gerçekten sığdığı yere koyduk.

   Fatura numarası sütunu 116px'ti ve e-fatura numarası oraya sığmıyordu:
   üç harf + dört haneli yıl + dokuz hane = on altı karakter, 13px yazıyla
   ~120px yer ister. Sütun 152px'e çıkarıldı; aradaki fark açıklama
   (98→80) ile fatura çeşidi (94→88) sütunlarından alındı, çünkü çeşit
   hep "Alış Faturası" yazar ve açıklama zaten kalan payı da alır. Yeni
   toplam ~866px, satıra kalan ~894px'in içinde. */

@media (min-width: 1200px) {
  .fatura-basliklar {
    display: grid;
    gap: var(--bosluk);
    padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
    background: var(--oyuk);
    border-bottom: 1px solid var(--kenar);
    grid-template-columns: 86px minmax(126px, 1.4fr) minmax(80px, 1fr)
                           64px 120px 88px minmax(152px, 0.9fr) 72px;
    font-size: var(--etiket-boy);
    line-height: var(--etiket-satir);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
  }

  .fatura-baslik-sag { text-align: right; }

  .fatura-satir {
    grid-template-columns: 86px minmax(126px, 1.4fr) minmax(80px, 1fr)
                           64px 120px 88px minmax(152px, 0.9fr) 72px;
    grid-template-areas: "tarih cari aciklama borc alacak cesit no detay";
    gap: var(--bosluk);
    padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  }

  .fatura-borc {
    display: block;
    grid-area: borc;
    text-align: right;
    opacity: .35;
  }

  .fatura-alacak {
    font-size: var(--govde-boy);
    line-height: var(--govde-satir);
  }

  .fatura-cesit,
  .fatura-no {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fatura-detay { padding: 0 var(--bosluk); }

  .fatura-eslestir,
  .fatura-kalem {
    padding-left: calc(var(--bosluk) * 1.5);
    padding-right: calc(var(--bosluk) * 1.5);
  }
}

/* =====================================================================
   Zemin yüzey · bütün kartlar ve tablolar
   ---------------------------------------------------------------------
   Kartlar düz beyaz kutulardır: desen, doku ya da çift çerçeve taşımaz;
   kartı ayıran şey 1px kenarıdır.
   Renkler 2-tasarim/degiskenler.css · "Kart yüzeyi".

   Blok neden dosyanın SONUNDA: yukarıdaki ekran kuralları da tek sınıf
   özgüllüğünde ve kendi zeminlerini veriyor. Aynı özgüllükte sonra
   gelen kazanır; bu blok yukarı taşınırsa .na-kart, .ba-kart gibi
   ekran kartları yeniden beyaza döner.

   Hesap Defteri'nin kartı (.hd-defter) listede yok: kırmızı çerçevesi ve
   köşe çentiğiyle zaten bu dilin kendisidir.
   (2026.109 · "Zemin" · 2026.111 · çift çerçeve ve gölge)
   ===================================================================== */
/* =====================================================================
   Form kâğıdı · .fk-kagit — PAYLAŞILAN
   ---------------------------------------------------------------------
   Form ekranları başlıksız, kabuksuz duruyordu; alanlar sayfanın
   ortasında asılıydı (2026.189 · kullanıcının kararı). Artık İrsaliye,
   Gün Sonu ve Hesaplar ile aynı kâğıdın üstündeler: oyuk zeminli tepede
   kırmızı başlık ve künye satırı, ortada alanlar, altta oyuk
   şeritte not ve düğmeler.

   Sınıf tek ekranın değil (2026.191): ikinci form ekranı da aynı kabuğu
   isteyince "ek-" (Elle Kayıt) öneki "fk-" (form kâğıdı) oldu.
   Kullananlar: 4-ekranlar/1-aktarimlar/elle-kayit.js
                4-ekranlar/3-tanimlar/tekrarlayan-odeme-ve-gelirler.js
   ===================================================================== */

.fk-sarmal {
  max-width: 820px;
  margin: 0 auto;
}

.fk-kagit {
  border-radius: var(--kose-kart);
  overflow: hidden;
}

.fk-tepe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.fk-tepe-yazi { min-width: 0; }

.fk-tepe-sag { display: flex; flex: none; gap: var(--bosluk); }

.fk-baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.fk-kunye {
  display: block;
  margin-top: calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .72;
}

.fk-govde { padding: calc(var(--bosluk) * 2.5); }

/* Alanların üstünde duran kağıt: rakamın yazıldığı yüzey zeminin
   deseni üstünde durmasın. */
.fk-govde .alan-kutu,
.fk-govde .sec-kutu { background-color: var(--kart-yuzey); }

.fk-altlik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--ayirici);
  background: var(--oyuk);
}

.fk-altlik-not {
  flex: 1 1 240px;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .78;
}

.fk-dugmeler { display: flex; flex: none; gap: var(--bosluk); }

@media (max-width: 899.98px) {
  .fk-govde { padding: calc(var(--bosluk) * 2); }
  .fk-tepe,
  .fk-altlik { padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2); }
  /* Telefonda altlık alt alta iner. "flex: none" tek başına yetmiyor:
     not kısalmıyor ama satır da sarmıyordu, cümlenin sonu kırpılıyordu —
     tam genişlik verilir. */
  .fk-altlik {
    flex-direction: column;
    align-items: stretch;
  }
  .fk-altlik-not { flex: none; width: 100%; }
  .fk-dugmeler { width: 100%; }
  .fk-dugmeler > * { flex: 1; }
}

.ozet-kart,
.fk-kagit,
.fatura-oz,
.fatura-liste,
.ayarlar-kart,
.sihirbaz-tepe,
.sihirbaz-alt,
.gs-kart,
.ba-banka,
.ba-kart,
.ir-kart,
.hesap-kagit,
.na-kart {
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  box-shadow: var(--kart-golge);
  position: relative;
}

/* ---- Çift çerçevenin içteki ince teli ----
   Kutu gölgesiyle değil kaplama katmanıyla çizilir: içeriği kartın
   kenarına dayanan kartlarda (nakit akış tablosu, fatura listesi) satır
   zemini inset gölgeyi örtüyordu — çocuk öğe kendi zeminini gölgenin
   üstüne boyar. ::after içeriğin üstünde durur ve tıklamayı geçirir. */
.kart::after,
.tablo-sarmal:not(.hd-defter)::after,
.ozet-kart::after,
.fk-kagit::after,
.fatura-oz::after,
.fatura-liste::after,
.ayarlar-kart::after,
.ayarlar-obek::after,
.sihirbaz-tepe::after,
.sihirbaz-alt::after,
.gs-kart::after,
.ba-banka::after,
.ba-kart::after,
.ir-kart::after,
.hesap-kagit::after,
.na-kart::after,
.kz-sayfa::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

/* Defter kartı listede yok: köşe çentiklerini kendi ::before/::after'ı
   çiziyor, üstüne ikinci bir tel gelmez. */

/* Parşömenin üstünde duran kağıtlar: rakamın okunduğu her yüzey. */
.na-tablo,
.gsd-tablo {
  background-color: var(--kart-yuzey);
}

/* Kartın içindeki alt şeritler kendi zeminlerini taşımaz; zemin
   altlarından geçer, ayraçları da gri tele döner. */
.gsk-altlik,
.gsk-bitti,
.gg-altlik {
  background: transparent;
  border-color: var(--kart-kenar);
}

/* İrsaliye listesi kartın İÇİNDE: tablo ikinci bir kart çizmesin.
   Zemin bloğundan SONRA gelir, yoksa ince tel geri gelir. */
.ir-liste-suzgec .tablo-sarmal {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.ir-liste-suzgec .tablo-sarmal::after { content: none; }

.ir-liste-suzgec .tablo,
.ir-liste-suzgec .tablo-kutu { background: transparent; }

.ir-liste-suzgec .tablo-dip {
  padding-left: 0;
  padding-right: 0;
}


/* ---------------------------------------------------------------------
   İrsaliye detay paneli · TEK PARÇA, DİKEY FİŞ (2026.162)
   ---------------------------------------------------------------------
   Önce üç ayrı kutu vardı: künye kartı, kalemler kartı, altta toplam.
   Üst üste üç çerçeve bir belge gibi değil, bir arayüz yığını gibi
   duruyordu. Şimdi hepsi tek kâğıt ve kâğıt DİK: gerçek bir irsaliye
   fişi gibi dar ve uzun, künye satırları alt alta.

   Düzenleme de bu kâğıdın içinde açılır; kullanıcı fişten ayrılmaz.

   Kurallar dosyanın SONUNDA durur: zemin bloğu daha yukarıda her
   karta yüzey ve ince tel veriyor, buradaki kaldırmalar onun altında
   kalırdı. */
.ir-fis {
  position: relative;
  /* Fiş dar ve dik ama sıkışık değil: 380px'te kalem satırları
     birbirine giriyordu (2026.163). */
  max-width: 460px;
  margin: 0 auto;
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2)
           calc(var(--bosluk) * 1.5);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  box-shadow: var(--kart-golge);
}

.ir-fis::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--kart-tel);
  border-radius: inherit;
  pointer-events: none;
}

/* Fişin başı: belge no ve durumu üstte, tutarı altında sağda. */
.ir-fis .detay-basi {
  padding: 0 0 var(--bosluk);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--kart-kenar);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ir-fis .detay-basi::after { content: none; }

.ir-fis .detay-ad {
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
}

.ir-fis .detay-tutar {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

/* Künye TEK SÜTUN: fiş dar, iki sütun sığmaz ve okunmaz. */
.ir-fis .iskelet-detay-kunye {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--bosluk) * .75);
  padding: var(--bosluk) 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ir-fis .iskelet-detay-kunye::after { content: none; }

/* Etiket solda, değer sağda: fişlerdeki gibi tek satırda okunur. */
.ir-fis .kunye-cift {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
}

.ir-fis .kunye-etiket {
  flex: none;
  font-size: 10px;
  line-height: 16px;
}

.ir-fis .kunye-deger,
.ir-fis .kunye-bag {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: right;
}

/* Kalemler · fişin gövdesi. Üstünde kesik çizgi durur. */
.ir-fis .detay-bolum {
  margin-top: 0;
  padding-top: var(--bosluk);
  border-top: 1px dashed var(--kart-kenar);
}

.ir-fis .detay-bolum-baslik { margin-bottom: calc(var(--bosluk) / 2); }

.ir-fis .tablo-sarmal {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.ir-fis .tablo-sarmal::after { content: none; }

.ir-fis .tablo,
.ir-fis .tablo-kutu { background: transparent; }

.ir-fis .tablo thead th {
  height: auto;
  padding: 0 4px 4px;
  border-bottom: 1px solid var(--kart-kenar);
  background: none;
  font-size: 10px;
}

.ir-fis .tablo tbody td {
  height: auto;
  padding: 6px 4px;
  border-bottom: 1px dotted var(--kart-kenar);
  font-size: var(--kucuk-boy);
}

.ir-fis .tablo tbody tr:last-child td { border-bottom: 0; }

.ir-fis .detay-toplam {
  margin-top: var(--bosluk);
  padding-top: var(--bosluk);
  border-top: 1px solid var(--defter-koyu);
  font-family: var(--yazi-baslik);
  color: var(--defter-koyu);
}

/* Düğmeler fişin dibinde, alt alta sığacak şekilde. */
.ir-fis .detay-eylem,
.ir-fis .form-dip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
  margin: calc(var(--bosluk) * 1.5) 0 0;
  padding-top: calc(var(--bosluk) * 1.5);
  border-top: 1px solid var(--kart-kenar);
}

.ir-fis .detay-eylem .dugme-birincil,
.ir-fis .detay-eylem .dugme-ikincil,
.ir-fis .form-dip .dugme-birincil,
.ir-fis .form-dip .dugme-ikincil { flex: 1 1 auto; }

/* ---- Fişin düzenleme yüzü ----
   Aynı kâğıt, alanlar yazılabilir. Bölümler kutu açmaz, aralarında
   yalnız kesik çizgi durur. */
.ir-fis-form .form-bolum {
  padding-top: var(--bosluk);
  border-top: 1px dashed var(--kart-kenar);
}

.ir-fis-form .form-bolum:first-child {
  padding-top: 0;
  border-top: 0;
}

.ir-fis-form .form-bolum + .form-bolum { margin-top: var(--bosluk); }

.ir-fis-form .form-ikili { grid-template-columns: minmax(0, 1fr); }

.ir-fis-form .alan-kutu { font-size: var(--kucuk-boy); }

.ir-fis-form .tablo-giris-kutu { font-size: var(--kucuk-boy); }

/* ---- İrsaliye · seçili satır (2026.164) ----
   Detay paneli kaldırıldı: satıra tıklayınca kayıt soldaki mal
   girişine düşer. Sağdaki listede hangi satırın düzenlendiği kırmızı bir
   şeritle ve koyu zeminle belli olur; işaretleme (yeşil) ile
   karışmasın diye ayrı renk kullanılır.
   Kaynak: 4-ekranlar/1-aktarimlar/irsaliye-aktarimi.js */
.tablo-satir.ir-duzenlenen td {
  background: rgba(183, 44, 40, .12);
  font-weight: 600;
}

.tablo-satir.ir-duzenlenen td:first-child {
  box-shadow: inset 3px 0 0 0 var(--vurgu);
}

/* Düzenleme kipinde kartın tepesindeki işler yan yana durur. */
.ir-kart .ir-tepe-sag {
  display: flex;
  gap: calc(var(--bosluk) / 2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 899.98px) {
  .ir-kart .ir-tepe-sag { justify-content: flex-start; }
}


/* ---------- Gider Seçici · kademeli hesap seçimi (2026.236) ----------
   Panel iki yolu birden taşır: boş kutuda kademe kademe gezinme, dolu
   kutuda bütün dalda arama. */
.gsc { display: flex; flex-direction: column; gap: var(--bosluk); }

.gsc-arama { width: 100%; }

.gsc-tepe {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  padding-bottom: calc(var(--bosluk) / 2);
  border-bottom: 1px solid var(--ayirici);
}

.gsc-yol { font-weight: 600; font-size: var(--kucuk-boy); }

.gsc-geri { flex: none; }

.gsc-liste {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  overflow-y: auto;
}

.gsc-satir {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  width: 100%;
  padding: calc(var(--bosluk) * 0.8) calc(var(--bosluk) / 2);
  border: 0;
  border-bottom: 1px solid var(--ayirici);
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

.gsc-satir:last-child { border-bottom: 0; }
.gsc-satir:hover, .gsc-satir:focus-visible { background: var(--oyuk); }

.gsc-kod {
  flex: none;
  width: 92px;
  font-weight: 700;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.gsc-ad { flex: 1 1 auto; min-width: 0; }

.gsc-yolcuk {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

.gsc-ok { flex: none; opacity: .5; }

.gsc-buraya {
  width: 100%;
  padding: calc(var(--bosluk) * 0.8);
  border: 1px dashed var(--kart-kenar);
  border-radius: var(--kose-kucuk, 8px);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  cursor: pointer;
}

.gsc-buraya:hover { background: var(--oyuk); }

.gsc-dip { display: flex; justify-content: flex-end; }

.gsc-bos { margin: 0; padding: var(--bosluk) 0; font-size: var(--kucuk-boy); opacity: .65; }

.gsc-soru { margin: 0; font-weight: 600; }

.gsc-secenekler { display: flex; flex-direction: column; gap: var(--bosluk); }

.gsc-secenek {
  display: block;
  width: 100%;
  padding: var(--bosluk);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kucuk, 8px);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gsc-secenek:hover, .gsc-secenek:focus-visible {
  border-color: var(--defter-tel, currentColor);
  background: var(--oyuk);
}

.gsc-secenek b { display: block; margin-bottom: 3px; }

.gsc-secenek span {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

.gsc-not {
  margin: 0;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* Ekranlardaki gider alanı · seçiciyi açan düğme. */
.gider-dugme {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kucuk, 8px);
  background: var(--yuzey);
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

.gider-dugme:hover { border-color: var(--defter-tel, currentColor); }
.gider-dugme-bos { color: var(--metin-hata); }
.gider-dugme .gsc-kod { width: auto; margin-right: 4px; }


/* ---------- Gideri Böl (2026.237) ----------
   Her satır: gider hesabı · tutar · açıklama · sil. Kalan sürekli
   görünür; sıfırlanmadan Kaydet açılmaz. */
.gbl { display: flex; flex-direction: column; gap: var(--bosluk); }

.gbl-tepe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--bosluk);
  border-bottom: 1px solid var(--ayirici);
  font-size: var(--kucuk-boy);
}

.gbl-tepe b { font-size: var(--h3-boy, 18px); font-variant-numeric: tabular-nums; }

.gbl-liste { display: flex; flex-direction: column; gap: calc(var(--bosluk) / 2); }

.gbl-satir {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1fr) 32px;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
}

.gbl-tutar { text-align: right; font-variant-numeric: tabular-nums; }

.gbl-sil { justify-self: center; opacity: .6; }
.gbl-sil:hover { opacity: 1; }

/* "Kalanı buraya yaz" satırın altına, tutar sütununun hizasına düşer. */
.gbl-kalan {
  grid-column: 2 / 4;
  justify-self: start;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--etiket-boy);
  text-decoration: underline;
  opacity: .7;
  cursor: pointer;
}

.gbl-kalan:hover { opacity: 1; }

.gbl-ekle { align-self: flex-start; }

.gbl-durum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--bosluk) * 0.75) var(--bosluk);
  border-radius: var(--kose-kucuk, 8px);
  font-size: var(--kucuk-boy);
}

.gbl-tam { background: var(--basari-zemin, var(--oyuk)); color: var(--metin-basari); }
.gbl-eksik { background: var(--oyuk); }
.gbl-eksik b { font-variant-numeric: tabular-nums; }

.gbl-uyari { margin: 0; font-size: var(--kucuk-boy); color: var(--metin-hata); }

@media (max-width: 719.98px) {
  .gbl-satir { grid-template-columns: minmax(0, 1fr) 100px 32px; }
  .gbl-ack { grid-column: 1 / 3; }
  .gbl-kalan { grid-column: 1 / 4; }
}

/* Kart satırındaki küçük "Böl" düğmesi · gider düğmesinin altında. */
.kk-bol {
  display: block;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--etiket-boy);
  text-decoration: underline;
  opacity: .6;
  cursor: pointer;
}

.kk-bol:hover { opacity: 1; }

/* Bölünmüş nakit masraf satırı · hesap kutusunun yerine düğme. */
.gsm-bolunmus {
  width: 100%;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kucuk, 8px);
  background: var(--yuzey);
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

/* Elle Kayıt'ta gider kutusunun altındaki bölme bağlantısı. */
.elk-bol { margin: -6px 0 var(--bosluk); }

/* Gün sonu nakit masrafında hesap hücresi · kutu değil düğme (2026.239). */
.gsm-secdugme {
  width: 100%;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kucuk, 8px);
  background: var(--yuzey);
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsm-secdugme:hover { border-color: var(--defter-tel, currentColor); }

/* Elle Kayıt'ta seçilmemiş gider düğmesi uyarı rengi taşımaz: alan
   isteğe bağlı. */
.gider-dugme-sade { color: inherit; opacity: .6; }


/* ---------- Gider Seçici · yeni gider paneli (2026.242) ----------
   Üç kademe alt alta: 700 sabit, alt grup, en alt gider. Her kutunun
   altında yazdıkça süzülen öneri listesi durur. */
.gsc-sabit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ayirici);
  border-radius: var(--kose-kucuk, 8px);
  background: var(--oyuk);
  font-size: var(--kucuk-boy);
}

.gsc-kademe { position: relative; }

.gsc-kapali { opacity: .5; }

.gsc-kademe-kod {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--etiket-boy);
  font-weight: 700;
  opacity: .6;
}

.gsc-secili { border-color: var(--defter-tel, currentColor); }

.gsc-oneri-kutu {
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--ayirici);
  border-radius: var(--kose-kucuk, 8px);
  background: var(--yuzey);
}

.gsc-oneri-satir {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--ayirici);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

.gsc-oneri-satir:last-child { border-bottom: 0; }
.gsc-oneri-satir:hover,
.gsc-oneri-satir:focus-visible { background: var(--oyuk); }

/* "Yeni açılacak" satırı listenin başında, ayrı görünür. */
.gsc-oneri-yeni {
  padding: 7px 10px;
  border-bottom: 1px solid var(--ayirici);
  background: var(--oyuk);
  font-size: var(--kucuk-boy);
  font-weight: 600;
}

.gsc-oneri-bos {
  padding: 7px 10px;
  font-size: var(--kucuk-boy);
  opacity: .6;
}

/* ---- Bloke denetimi ----  (2026.250)
   Blokeye giren ile çözülen tutmuyorsa çıkan şerit. Aktarımı
   engellemediği için ENGEL rengi (gsk-uyari-engel) kullanılmaz: bu bir
   bilgi, bir durdurma değil. */
.ba-bloke-bekle {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  color: var(--metin);
  opacity: .75;
}

.ba-bloke-ac {
  background: none;
  border: 0;
  padding: 0;
  margin-left: calc(var(--bosluk) / 2);
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.ba-bloke-dokum { margin-top: calc(var(--bosluk) * .75); }

/* Satır durumu renkle de anlatılır ama YALNIZ renkle değil: "Durum"
   sütununda yazısı da var (6-belgeler/NIZAM.md · erişilebilirlik). */
.ba-bloke-fazla td,
.ba-bloke-gecikmis td,
.ba-bloke-gunSonuYok td { background: rgba(184, 117, 3, .10); }

.ba-bloke-bekliyor td { opacity: .7; }

.ba-bloke-tamam td { background: rgba(47, 125, 83, .07); }

/* Son fiyatın altındaki küçük tarih: fiyat EN SON faturadan gelir,
   hangisi olduğu görünmeyince "bu fiyat nereden çıktı" sorusu cevapsız
   kalıyordu (2026.252 · kontrol raporu · H1). */
.ir-fiyat-kaynak {
  display: block;
  font-size: var(--etiket-boy);
  opacity: .55;
  font-variant-numeric: normal;
}


/* ---------------------------------------------------------------------
   KÂR DAĞITIMI · 2026.293 · 4-ekranlar/2-raporlar/kar-zarar.js
   Kutunun dibindeki düğme ve dağıtım paneli.
   --------------------------------------------------------------------- */
.kz-dagit-dugme { margin-top: calc(var(--bosluk) / 2); }
.kz-dagit-gecmis { margin-left: var(--bosluk); }

.kzd { display: flex; flex-direction: column; gap: calc(var(--bosluk) * 1.5); }

/* Dönem · kâr · dağıtılabilir · üç künye yan yana, dar ekranda alt alta. */
.kzd-ozet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
}

.kzd-ozet > div {
  flex: 1 1 140px;
  min-width: 0;
  padding: var(--bosluk) calc(var(--bosluk) * 1.25);
  border-radius: 12px;
  background: var(--oyuk);
}

.kzd-ozet span {
  display: block;
  font-size: var(--kucuk-boy);
  opacity: .7;
}

.kzd-ozet b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kzd-tablo { width: 100%; border-collapse: collapse; }

.kzd-tablo th {
  padding: 0 calc(var(--bosluk) / 2) calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  font-weight: 600;
  text-align: left;
  opacity: .7;
}

.kzd-tablo th:not(:first-child) { text-align: right; }

.kzd-satir > td {
  padding: calc(var(--bosluk) / 2);
  border-top: 1px solid var(--ayirici);
  vertical-align: middle;
}

.kzd-ad { line-height: 1.3; }

.kzd-kod {
  display: block;
  font-size: var(--kucuk-boy);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Kutu ile birimi yan yana: yüzde ve lira işareti kutunun dışında
   durur, kutuya yazılan sayıyı daraltmaz. Hizalama td'ye DEĞİL içindeki
   span'e verilir; flex olan bir td tablo hücresi olmaktan çıkar ve satır
   alt alta dağılır. */
.kzd-oran,
.kzd-tutar { text-align: right; white-space: nowrap; }

.kzd-kutu {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--bosluk) / 2);
}

.kzd-oran .alan-kutu { width: 5.5rem; text-align: right; }
.kzd-tutar .alan-kutu { width: 9rem; text-align: right; }
.kzd-kutu i { font-style: normal; opacity: .6; }

.kzd-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: var(--bosluk) calc(var(--bosluk) * 1.25);
  border-radius: 12px;
  background: var(--oyuk);
  font-weight: 600;
}

.kzd-toplam b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Kalanı aşan toplam kırmızı okunur: kaydet düğmesine basmadan görünür. */
.kzd-asiyor {
  background: rgba(183, 44, 40, .12);
  color: var(--metin-hata);
}

.kzd-araclar,
.kzd-ekle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
  justify-content: flex-end;
}

.kzd-ekle { justify-content: flex-start; }

.kzd-gecmis {
  padding-top: var(--bosluk);
  border-top: 1px solid var(--ayirici);
}

.kzd-gecmis-basi {
  margin-bottom: calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  font-weight: 600;
  opacity: .7;
}

.kzd-gecmis-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) / 2) 0;
  border-top: 1px solid var(--ayirici);
}

.kzd-gecmis-ad { flex: 1 1 auto; min-width: 0; line-height: 1.3; }

.kzd-gecmis-not {
  display: block;
  font-size: var(--kucuk-boy);
  opacity: .6;
}

.kzd-gecmis-tutar {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Telefonda tablo sıkışmasın: kutular kendi satırına iner. */
@media (max-width: 560px) {
  .kzd-tablo thead { display: none; }
  .kzd-satir { display: block; padding: calc(var(--bosluk) / 2) 0; }
  .kzd-satir > td { display: block; border-top: 0; padding: 2px 0; }
  .kzd-satir > td.kzd-ad {
    border-top: 1px solid var(--ayirici);
    padding-top: calc(var(--bosluk) / 2);
    font-weight: 600;
  }
  .kzd-kutu { display: flex; justify-content: space-between; }
  .kzd-oran .alan-kutu,
  .kzd-tutar .alan-kutu { flex: 1 1 auto; width: auto; }
}