/* Bileşenler. Her ekranda aynıdır, ekran dosyasında yeniden yorumlanmaz.
   Kaynak: 6-belgeler/tasarim.md · "Bileşenler"
   Sınıf adları bileşen başına tektir; bir ad iki bileşende kullanılmaz. */

/* ---------- Kart ---------- */
/* Kart parşömendir: yan menüyle aynı açık gri zemin, aynı kafes deseni,
   çerçevesi bir ince tel. Gölge yok — kartı ayıran şey gölge değil,
   zemininin sayfadan farklı oluşudur.
   Kaynak: 2-tasarim/degiskenler.css · "Kart yüzeyi · zemin" */
.kart {
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border: var(--kart-cerceve);
  border-radius: var(--kose-kart);
  box-shadow: var(--kart-golge);
  padding: calc(var(--bosluk) * 2);
  /* İçteki ince tel bir kaplama katmanıdır (aşağıda ::after). */
  position: relative;
}

/* ---------- Düğme ---------- */
.dugme-birincil,
.dugme-ikincil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  min-height: var(--dugme);
  padding: 0 calc(var(--bosluk) * 2);
  border-radius: var(--kose-dugme);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
}

.dugme-birincil {
  background: var(--vurgu);
  color: var(--yuzey);
}

.dugme-ikincil {
  background: transparent;
  color: var(--vurgu);
  border: 1px solid var(--vurgu);
}

.dugme-birincil:disabled,
.dugme-ikincil:disabled {
  opacity: .45;
  cursor: default;
}

.dugme-tam-en { width: 100%; }

/* ---------- Simge düğmesi ---------- */
.simge-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dokunma);
  height: var(--dokunma);
  border-radius: var(--kose-kutu);
  color: inherit;
}

.simge-dugme:disabled { opacity: .45; cursor: default; }

/* ---------- Çip ---------- */
.cip {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk);
  height: var(--cip);
  padding: 0 12px;
  border-radius: 999px;
  background: var(--oyuk);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.cip-secili {
  background: var(--vurgu);
  color: var(--yuzey);
}

/* ---------- Rozet ---------- */
.rozet {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--bosluk);
  border-radius: 999px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 500;
}

.rozet-basari { background: rgba(47, 125, 83, .14); color: var(--metin-basari); }
.rozet-uyari  { background: rgba(184, 117, 3, .14); color: var(--metin-uyari); }
.rozet-hata   { background: rgba(183, 44, 40, .14); color: var(--metin-hata); }
.rozet-bilgi  { background: rgba(47, 111, 176, .14); color: var(--metin-bilgi); }

/* ---------- Form alanı ---------- */
.alan {
  display: block;
  margin-bottom: calc(var(--bosluk) * 1.5);
}

.alan-etiket {
  display: block;
  margin-bottom: calc(var(--bosluk) / 2);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.alan-kutu {
  width: 100%;
  height: var(--form-alan);
  padding: 0 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
}

.alan-kutu:focus {
  border: 2px solid var(--vurgu);
  padding: 0 11px;
  outline: none;
}

/* Değiştirilemeyen alan: kutu gibi durmaz, çünkü tıklanınca yazı
   yazılamayan bir kutu kullanıcıyı boşuna uğraştırır. Yükseklik form
   alanıyla aynı kalır ki alanlar aynı ızgarada dursun. */
.alan-okunur {
  display: flex;
  align-items: center;
  min-height: var(--form-alan);
  padding: 0 12px;
  border: 1px dashed var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  color: var(--metin);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Arama ---------- */
.arama {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  height: var(--arama);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
}

.arama-odak { border-color: var(--vurgu); }

.arama-kutu {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: var(--govde-boy);
}

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

.tablo thead th {
  height: var(--tablo-baslik-satir);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--ayirici);
}

.tablo tbody td {
  height: var(--tablo-satir);
  border-bottom: 1px solid var(--ayirici);
}

.tablo-girisli tbody td,
.tablo-girisli thead th { height: var(--tablo-giris-satir); }

.tablo thead th,
.tablo tbody td { padding: 0 calc(var(--bosluk) * 1.5); }

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

/* Dokunma hedefi satırın tamamıdır. */
.tablo-satir {
  cursor: pointer;
  transition: transform var(--basma) ease-out;
}

/* Basma tepkisi yalnız kart görünümünde verilir: dar ekranda satır bir
   karttır, küçülme büyük öğe oranındadır (%98). Geniş ekranda satır bir
   tablo satırıdır ve küçülmek yerinde duran tanıtıcı sütunları
   oynatırdı — orada dokunma değil imleç kullanılır.
   Kaynak: 6-belgeler/tasarim.md · "Animasyon" · "Basma tepkisi" */
@media (max-width: 899.98px) {
  .tablo-satir:active { transform: scale(.98); }
}

/* Devir satırı: seçilen aralıktan önceki bakiyeyi taşır, kalın ve
   zeminden ayrı durur. */
.tablo-devir td {
  background: var(--oyuk);
  font-weight: 600;
}

/* Sütun rolleri. Dar ekranda kartın hangi parçası olacaklarını bunlar
   söyler; geniş ekranda yalnız hizayı verirler.
     tablo-kimlik    kaydı tanıtan ilk sütun (tarih, kod, unvan, belge no)
     tablo-yardimci  kimliğin yanında duran kısa açıklama sütunu
     tablo-rozet     kimliğin hemen sağında duracak durum rozeti sütunu
     tablo-tutar     kartın sağında duracak parasal sütun
     tablo-para      diğer parasal sütunlar
     tablo-ek        kartın altında "etiket: değer" olarak akacak sütun
     tablo-dar-gizli dar ekranda kartta hiç görünmeyen sütun */
.tablo-para,
.tablo-tutar {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Başlık da sütunuyla aynı yana yaslanır. ".tablo thead th" kuralı
   yukarıda sola yaslıyor ve seçici daha güçlü olduğu için parasal
   sütunlarda başlık solda, rakam sağda kalıyordu — göz iki ayrı yere
   bakmak zorunda kalıyordu. Bu satır o farkı kapatır. */
.tablo thead th.tablo-para,
.tablo thead th.tablo-tutar { text-align: right; }

.tablo-eksi { color: var(--metin-hata); }

/* Tablonun kartı. Kaydırma yalnız içteki kutuda olur ki tablonun altındaki
   durum satırı yana kaymasın. */
.tablo-sarmal {
  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;
  /* Tablo kartın kenarına yapışmaz: aradaki 7px'te çift çerçeve ve
     zemin görünür, tablo onun üstünde duran kağıt olur. */
  padding: 7px;
  overflow: hidden;
}

/* Hesap Defteri'nin kendi kartı (.hd-defter) bu kuralın dışındadır:
   kırmızı çerçevesi ve köşe çentiğiyle zaten kendi dili var
   (2-tasarim/ekranlar.css · "Defter kartı"). */
/* Hesap Defteri'nin kartı kendi çerçevesini taşır. */
.tablo-sarmal.hd-defter { padding: 0; }

/* Tablonun kendi yüzeyi kağıttır — rakam zeminin deseni üstünde
   değil, düz kağıt üstünde okunur. */
.tablo { background-color: var(--kart-yuzey); border-radius: 12px; }
.tablo-kutu { background-color: var(--kart-yuzey); border-radius: 12px; }
.hd-defter .tablo, .hd-defter .tablo-kutu { border-radius: 0; }

/* Geniş tablo kendi kutusunda yana kayar; sayfa gövdesi yana kaymaz. */
.tablo-kutu { overflow-x: auto; }

/* Tablonun altındaki durum satırı: yüklenirken ve liste bitince görünür.
   Bekleme yalnız harekete bırakılmaz, yazı da ne olduğunu söyler. */
.tablo-dip {
  padding: calc(var(--bosluk) * 2);
  text-align: center;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
  border-top: 1px solid var(--kart-kenar);
}

@media (min-width: 900px) {
  /* Yatay kaydırmada yerinde duran sütunlar: soldaki iki tanıtıcı sütun
     (tarih ve açıklama) ve sağdaki bakiye. Zeminleri düz, altlarından
     satır geçmez. */
  .tablo-yapisik-bir,
  .tablo-yapisik-iki,
  .tablo-yapisik-sag {
    position: sticky;
    z-index: 1;
    background: var(--yuzey);
  }

  .tablo-yapisik-bir { left: 0; width: 104px; min-width: 104px; }
  .tablo-yapisik-iki { left: 104px; min-width: 220px; }
  .tablo-yapisik-sag { right: 0; width: 132px; min-width: 132px; }

  .tablo-devir .tablo-yapisik-bir,
  .tablo-devir .tablo-yapisik-iki,
  .tablo-devir .tablo-yapisik-sag { background: var(--oyuk); }
}

/* ---------- Tablo dar ekranda · 900px altında kart satırı ---------- */
/* Dönüşüm kuralı her tabloda aynıdır: kimlik sütunu 15px başlık olur,
   parasal sütun aynı satırın sağında durur, kalan sütunlar altta 13px
   "etiket: değer" olarak tek satırda akar. Kart en az 64px yüksektedir ve
   tamamı dokunma hedefidir. */
@media (max-width: 899.98px) {
  .tablo-kutu { overflow-x: visible; }

  .tablo, .tablo tbody, .tablo tr { display: block; width: 100%; }
  .tablo thead { display: none; }

  .tablo tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--bosluk);
    min-height: var(--liste-satir);
    padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
    border-bottom: 1px solid var(--ayirici);
  }

  /* Kartın ikinci satırını açar: yüksekliği yoktur, yalnız satır kırar. */
  .tablo tbody tr::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  /* Hücreler kartın satır içi parçalarıdır: tam genişlik almazlar, yoksa
     her biri kendi satırına düşer ve kart üst üste yığılır. */
  .tablo tbody td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }

  .tablo-kimlik {
    order: 1;
    font-size: var(--govde-boy);
    line-height: var(--govde-satir);
  }

  .tablo-rozet { order: 1; }

  /* Kimliğin yanında duran kısa açıklama sütunu. */
  .tablo-yardimci {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--kucuk-boy);
    line-height: var(--kucuk-satir);
    opacity: .8;
  }

  .tablo-tutar {
    order: 2;
    margin-left: auto;
    font-size: var(--govde-boy);
    line-height: var(--govde-satir);
  }

  .tablo-ek {
    order: 4;
    font-size: var(--kucuk-boy);
    line-height: var(--kucuk-satir);
    opacity: .8;
  }

  .tablo-ek::before { content: attr(data-etiket) ": "; }

  /* Değeri olmayan sütun kartta "Alacak: " diye asılı kalmaz. */
  .tablo tbody td.tablo-ek-bos { display: none; }

  .tablo-para.tablo-ek { text-align: left; }

  .tablo tbody td.tablo-dar-gizli { display: none; }
}

/* ---------- Liste satırı ---------- */
.liste-satir {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  width: 100%;
  min-height: var(--liste-satir);
  padding: 0 calc(var(--bosluk) * 2);
  text-align: left;
  border-bottom: 1px solid var(--ayirici);
}

.liste-satir-simge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(110, 116, 124, .08);
  color: var(--vurgu);
}

.liste-satir-metin { flex: 1; min-width: 0; }

.liste-satir-baslik {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

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

/* ---------- Boş durum ---------- */
.bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 6) calc(var(--bosluk) * 2);
  margin: 0 auto;
  max-width: 420px;
}

.bos-durum-gorsel {
  width: var(--gorsel-bos-durum);
  height: var(--gorsel-bos-durum);
  color: var(--vurgu);
}

.bos-durum-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
}

.bos-durum-aciklama {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  margin-top: calc(var(--bosluk) * -1);
}

.bos-durum-dugme {
  position: relative;
  min-height: var(--dugme-bos-durum);
  height: var(--dugme-bos-durum);
}

/* Düğmenin görünen boyu 40px'tir (6-belgeler/tasarim.md · "Boş durum"), basılan
   alanı 44px: basılan alan görünenden büyüktür, yerleşim değişmez. */
.bos-durum-dugme::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--dokunma);
  transform: translateY(-50%);
}

/* ---------- Bildirim kartı ---------- */
.bildirim-kart {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  min-height: var(--liste-satir);
  padding: calc(var(--bosluk) * 1.5);
  padding-left: calc(var(--bosluk) * 2);
  background: var(--yuzey);
  border-radius: var(--kose-dugme);
  overflow: hidden;
}

.bildirim-kart::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--bilgi);
}

.bildirim-kart-hata::before { background: var(--hata); }
.bildirim-kart-uyari::before { background: var(--uyari); }
.bildirim-kart-basari::before { background: var(--basari); }

/* ---------- Pencere ---------- */
.pencere-perde {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--bosluk) * 2);
  background: var(--perde);
}

.pencere {
  width: 100%;
  max-width: var(--pencere-en);
  padding: calc(var(--bosluk) * 2.5);
  border-radius: var(--kose-modal);
  background: var(--yuzey);
}

/* Panel · onay penceresiyle aynı yüzey, içi çağıranın. Başlık ile
   kapatma düğmesi üstte yan yana durur, gövde altında kendi payıyla
   başlar; uzun form telefonda panelin içinde kaydırılır, sayfa arkada
   kıpırdamaz. */
.pencere-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--bosluk) * 8);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5)
           calc(var(--bosluk) * 2.5);
}

.pencere-tepe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  margin: 0 calc(var(--bosluk) * -1) calc(var(--bosluk) * 2) 0;
}

/* Başlığın kendi alt payı onay penceresi içindir; panelde payı tepe
   satırı verir, ikisi üst üste binmez. */
.pencere-tepe .pencere-baslik { margin-bottom: 0; }

.pencere-govde {
  min-height: 0;
  overflow-y: auto;
}

/* ---------- Ayar satırı ---------- */
/* Ayarlar türündeki ekranların ortak satırı: Şubeler, Ödeme Yöntemleri,
   Hesap Eşleştirme. Solda ad, sağda durum; dokununca altı açılır. */
.ayar-kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  overflow: hidden;
}

.ayar-satir {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  width: 100%;
  min-height: 56px;
  padding: 0 calc(var(--bosluk) * 2);
  text-align: left;
  border-bottom: 1px solid var(--ayirici);
}

.ayar-kart .ayar-satir:last-of-type { border-bottom: 0; }

/* Ad üstte, açıklama altında. İkisi de span olduğu için satır içi
   akıyor ve "Kasa farkıGün sonunda…" diye yapışık görünüyorlardı. */
.ayar-satir-metin {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ayar-satir-ad {
  display: block;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.ayar-satir-kod {
  display: block;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

/* Uzun açıklamalı satırlarda dikey nefes payı: 56px'lik tek satırlık
   ölçü iki üç satırlık metinde kenarlara dayanıyordu. */
.ayar-satir { padding-top: var(--bosluk); padding-bottom: var(--bosluk); }

.ayar-acilan {
  padding: 0 calc(var(--bosluk) * 2) calc(var(--bosluk) * 2);
  border-bottom: 1px solid var(--ayirici);
}

.bolum-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 1.5);
}

.ayar-hata { margin-bottom: calc(var(--bosluk) * 2); }

/* ---------- Hata satırı ---------- */
/* Ekranın içinde kalan uyarı kutusu. Görünüm tek yerde durur; nerede
   duracağını kapsayıcı bileşenin kendi sınıfı söyler. */
.hata-satiri {
  padding: calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: rgba(183, 44, 40, .14);
  color: var(--metin-hata);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* ---------- Arama ve filtre şeridi ---------- */
/* Liste iskeletinin 40px'lik şeridi. Dar ekranda satırlara ayrılır,
   geniş ekranda tek satırda durur. */
.suzgec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 2);
}

.suzgec-grup {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  flex-wrap: wrap;
}

.suzgec-genis { flex: 1 1 220px; min-width: 0; }

.suzgec-sag { margin-left: auto; }

/* Açılır seçici · şeridin içinde arama kutusuyla aynı boyda durur. */
.suzgec-secici {
  height: var(--arama);
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--govde-boy);
}

.suzgec-secici:focus {
  border: 2px solid var(--vurgu);
  padding: 0 11px;
  outline: none;
}

.suzgec-tarih {
  height: var(--arama);
  padding: 0 10px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--kucuk-boy);
}

/* Çip dokunma hedefi 32px'lik çipin dışına taşar. */
.suzgec-cip { position: relative; }

.suzgec-cip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--dokunma);
  transform: translateY(-50%);
}

/* Hata satırının şerit içindeki yeri · görünümü .hata-satiri verir. */
.suzgec-hata { flex: 1 0 100%; }

/* ---------- Hesap planı ----------
   Sayfa üç kattan oluşur: tepe (başlık + tek birincil eylem), şerit
   (arama + sınıf süzgeci) ve üç özet kartı; altında hesap GRUPLARI.

   Her ana hesap kendi kartıdır. Kart başlığına basınca alt hesapları
   açılır; alt hesabı olmayan ana hesapta (600 Gelirler gibi) basmak
   doğrudan hareketlere götürür — orada açılacak bir şey yoktur. Alt
   hesaplar girintili değil, OYUK ZEMİNLİDİR: girinti dar ekranda hesap
   adına kalan yeri yiyordu ve grubun içinde durduğu zaten zeminden
   belli. */

.iskelet-hesaplar {
  display: flex;
  flex-direction: column;
}

/* --- Kâğıt ---
   Sayfanın tamamı tek bir kâğıttır (2026.182 · kullanıcının kararı):
   İrsaliye Aktarımı, Fatura detayı, Gün Sonu ve Nakit Akış ile aynı dil.
   Zemini, çerçevesi ve ince teli dosya sonundaki zemin bloğundan
   gelir; buradaki kurallar yalnız iç düzeni kurar. */
.hesap-kagit {
  border-radius: var(--kose-kart);
  overflow: hidden;
}

/* --- Tepe --- */
.hesap-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);
}

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

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

.hesap-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);
}

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

.hesap-yeni {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
}

/* --- Arama ve süzgeç ---
   Kâğıdın kendi zemininde, tepenin hemen altında duran şerit. */
.hesap-serit {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2.5);
  border-bottom: 1px solid var(--ayirici);
}

.hesap-arama { flex: 1; min-width: 0; }

/* Süzgeç bir SEKME ŞERİDİDİR (2026.284 · kullanıcının kararı:
   "filtreleme kısmı eski tarz kalmış, tasarımı programa uysun").

   Eskiden tarayıcının kendi açılır kutusuydu: uygulamanın hiçbir
   yerinde o kutu yok ve hangi süzgecin açık olduğu ancak kutu okununca
   anlaşılıyordu. Dört seçenek yan yana sığıyor; seçili olan dolu
   zeminle duruyor. */
.hesap-suzgec {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  background: var(--oyuk);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-dugme);
}

.hesap-suzgec-sekme {
  flex: none;
  height: 34px;
  padding: 0 calc(var(--bosluk) * 1.25);
  border: 0;
  background: none;
  border-radius: calc(var(--kose-dugme) - 3px);
  color: inherit;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis) ease-out, color var(--gecis) ease-out;
}

@media (hover: hover) {
  .hesap-suzgec-sekme:hover { background: rgba(0, 0, 0, .04); }
}

.hesap-suzgec-sekme[aria-selected="true"] {
  background: var(--yuzey);
  box-shadow: var(--golge);
  font-weight: 600;
}

/* Boş hesap anahtarı · grup başlığının sağında, sayıyı da söyler.

   BİR ROZETTİR, BAĞLANTI DEĞİL (2026.285 · kullanıcının kararı:
   "hesapları gizle göster kısmı daha belirgin, seçiliyken belli
   olacak, göze çarpıcı şekilde olsun"). Altı çizili bir yazıydı;
   listede hesap eksik olduğunu söyleyen tek işaret oydu ve göze
   çarpmıyordu. İki hâli birbirinden UZAKTAN ayrılır:

     etkin  · boşlar gizli   → dolu kırmızı zemin, beyaz yazı
     sade   · hepsi görünür  → çerçeveli, kâğıt zemin

   Ekranda saklanan bir şey varken sessiz durmak en kötüsüdür. */
.hesap-bos-anahtar {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) / 1.5);
  margin-left: auto;
  height: 30px;
  padding: 0 calc(var(--bosluk) * 1.25);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 999px;
  color: inherit;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis) ease-out, color var(--gecis) ease-out,
              border-color var(--gecis) ease-out;
}

/* Noktanın tek işi göz ucuyla görülmek: yazıyı okumadan da "burada bir
   süzgeç açık" der. */
.hesap-bos-nokta {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
}

/* Ne olacağını söyleyen yarı · "Göster" / "Gizle". Tıklanacak şeyin adı
   rozetin içinde durur, ayrı bir düğme açılmaz. */
.hesap-bos-eylem {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hesap-bos-anahtar.hesap-bos-etkin {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
  font-weight: 600;
}

.hesap-bos-anahtar.hesap-bos-etkin .hesap-bos-nokta { opacity: 1; }

@media (hover: hover) {
  .hesap-bos-anahtar:hover { border-color: var(--vurgu); }
  .hesap-bos-anahtar.hesap-bos-etkin:hover { filter: brightness(1.08); }
}

/* --- Altlık --- */
.hesap-altlik {
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border-top: 1px solid var(--kart-kenar);
  background: var(--oyuk);
}

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

/* --- Grup başlığı --- */
.hesap-grup-basi {
  display: flex;
  /* Başlık ile sayı taban çizgisinde hizalanır; rozet bir kutudur,
     o yüzden hizalama "center"a çekildi ve başlık kendi içinde
     taban çizgisini korur (aşağıdaki kural). */
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--bosluk) / 1.5) var(--bosluk);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5) 0;
}

.hesap-grup-basi .hesap-grup-baslik,
.hesap-grup-basi .hesap-grup-sayi { align-self: baseline; }

.hesap-grup-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
}

.hesap-grup-sayi {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .55;
}

/* --- Gruplar --- */
/* Liste kâğıdın ortasında kendi kutusundadır; gruplar ayrı ayrı kart
   değil, o kutunun içinde alt alta duran bölmelerdir (2026.182). */
.hesap-liste {
  display: flex;
  flex-direction: column;
  margin: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
  overflow: hidden;
}

.hesap-grup + .hesap-grup { border-top: 1px solid var(--ayirici); }

.hesap-satir {
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: calc(var(--bosluk) / 2);
}

/* Satırın geniş alanı tek düğmedir; ⋮ onun yanında ayrı durur. İkisi iç
   içe olsaydı menüye basmak grubu da açardı. */
.hesap-ana-bas {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  flex: 1;
  min-width: 0;
  padding: calc(var(--bosluk) * 1.5) 0 calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  color: inherit;
  text-align: left;
}

.hesap-plaka {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.hesap-kimlik {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Kod ile ad aynı satırda: "100 · Kasa". Kod koyu ve tabular, ad onun
   yanında — göz önce numaraya, sonra ada gider. */
.hesap-ad {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hesap-satir-ana .hesap-ad { font-family: var(--yazi-baslik); font-weight: 600; }

.hesap-kod {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.hesap-aciklama {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hesap-rozet { flex: none; margin-left: var(--bosluk); }

/* Tutar başlık yazı tipiyle ve tabular rakamla durur: alt alta gelen
   tutarların haneleri hizalanır. */
.hesap-tutar {
  flex: none;
  margin-left: var(--bosluk);
  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;
}

/* Para birimi rakamın yanında küçük ve soluk: sayıyı bastırmaz. */
.hesap-tutar-birim {
  margin-left: 2px;
  font-size: var(--kucuk-boy);
  opacity: .65;
}

.hesap-tutar-eksi { color: var(--metin-hata); }

/* Bakiye sorgusu sürerken sütunda tire durur; sayı gelince yerine düşer
   (2026.181 · hesap listesi bakiyeyi beklemez). */
.hesap-tutar-bekler { font-weight: 400; }

/* Ok kapalıyken sağa, açıkken aşağı bakar. Açılamayan satırda da durur ve
   "buraya basınca bir yere gidilir" der. */
.hesap-yon {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: var(--bosluk);
  opacity: .4;
  transition: transform var(--basma) ease-out;
}

.hesap-yon-acik { transform: rotate(90deg); }

.hesap-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  align-self: stretch;
  color: inherit;
  opacity: .45;
  transition: opacity var(--gecis) ease-out;
}

/* --- Açık grubun alt hesapları ---
   ZEMİN BEYAZ, SATIRLAR ÇİZGİLİ (2026.284 · kullanıcının kararı:
   "hesaplar açılınca beyaz rengi oluyor, öyle olmasın; beyaz ve çizgili
   arka plan olsun, Dashboard'daki gibi").

   Beyaz (--oyuk) zemin açık grubu bir "kutu" gibi gösteriyordu; oysa
   alt hesaplar listenin devamıdır. Artık ana satırla aynı kâğıtta
   duruyorlar, aralarını yalnız ince çizgi ayırıyor. */
.hesap-altlar {
  background: var(--yuzey);
  border-top: 1px solid var(--ayirici);
}

.hesap-satir-alt { border-bottom: 1px solid var(--ayirici); }

/* --- Üçüncü ve dördüncü kademe (2026.249 · göç 70'in ekran karşılığı)
   Plan 700 → 700.01 → 700.01.01 diye iniyor. Derinlik GİRİNTİ ile
   anlatılır, ayrı bir kutu açılmaz: dar ekranda iç içe kutular ada
   kalan yeri bitiriyordu. Her kademe bir tık daha içeride başlar. */
.hesap-altlar-ic {
  background: transparent;
  border-top: 0;
}

.hesap-satir-derin .hesap-ana-bas {
  padding-left: calc(var(--bosluk) * (1 + var(--hesap-kademe, 1)));
}

.hesap-satir-derin .hesap-alt-simge { opacity: .6; }

.hesap-altlar-ic .hesap-alt-ekle {
  padding-left: calc(var(--bosluk) * 3);
  font-size: var(--etiket-boy);
}

/* Dallı bir alt hesapta kaç alt olduğu yazar; basınca dal açılır. */
.hesap-dal-sayi {
  background: rgba(47, 111, 176, .12);
  color: var(--metin-bilgi);
}

.hesap-satir-alt .hesap-ana-bas {
  gap: var(--bosluk);
  padding-top: calc(var(--bosluk) * 1.25);
  padding-bottom: calc(var(--bosluk) * 1.25);
  padding-left: calc(var(--bosluk) * 3);
}

/* Alt hesapta ad tek satırdır ve kod onun yanında soluk durur: kodu alt
   satıra almak grubu iki katına çıkarıyordu, oysa alt hesabın kendi
   tarifi yok — kodu bir yan bilgi. */
.hesap-satir-alt .hesap-ad {
  flex: 1;
  min-width: 0;
  font-weight: 400;
}

.hesap-alt-kod {
  margin-left: calc(var(--bosluk) / 1.5);
  font-size: var(--kucuk-boy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  opacity: .5;
}

.hesap-satir-alt .hesap-tutar {
  font-family: var(--yazi-metin);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
}

.hesap-alt-simge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--gri-vurgu);
  opacity: .7;
}

/* Grubun sonundaki ekleme satırı bir liste satırı değil, bir eylemdir:
   vurgu renginde ve artı simgesiyle durur. */
.hesap-alt-ekle {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--bosluk) * 3);
  color: var(--vurgu);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 500;
  text-align: left;
}

@media (hover: hover) {
  .hesap-ana-bas:hover .hesap-ad { color: var(--vurgu); }
  .hesap-menu:hover { opacity: 1; }
  .hesap-alt-ekle:hover { background: rgba(183, 44, 40, .05); }
}

/* Telefon: tepedeki düğme yazısını korur ama alt satıra iner; süzgeç
   aramanın altına geçer; satırların iç boşluğu daralır. */
@media (max-width: 899.98px) {
  .hesap-tepe {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bosluk);
    margin-bottom: calc(var(--bosluk) * 2);
  }

  .hesap-baslik { font-size: var(--h2-boy); line-height: var(--h2-satir); }
  .hesap-yeni { justify-content: center; }

  /* Telefonda kâğıdın payları daralır: liste kutusuna yanlardan giden her
     piksel hesap adından gidiyor, ad da "102 · Ban…" diye kırpılıyordu
     (2026.182). */
  .hesap-tepe,
  .hesap-serit { padding: calc(var(--bosluk) * 2); }

  .hesap-grup-basi { padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2) 0; }
  .hesap-altlik { padding: calc(var(--bosluk) * 2); }
  .hesap-liste { margin: var(--bosluk) calc(var(--bosluk) * 1.25); }

  .hesap-serit { flex-wrap: wrap; }
  .hesap-arama { flex: 1 1 100%; }
  .hesap-suzgec { flex: 1 1 100%; }
  .hesap-suzgec-sekme { flex: 1; padding: 0 calc(var(--bosluk) / 2); }

  .hesap-ana-bas {
    gap: var(--bosluk);
    padding-left: calc(var(--bosluk) * 1.5);
  }

  .hesap-plaka { width: 34px; height: 34px; border-radius: 10px; }

  .hesap-tutar {
    font-size: var(--govde-boy);
    line-height: var(--govde-satir);
  }

  .hesap-satir-alt .hesap-ana-bas,
  .hesap-alt-ekle { padding-left: calc(var(--bosluk) * 2); }

  /* Telefonda alt hesabın kodu kalkar. Yer dar; kod ile ad yan yana
     durunca ikisi birden kırpılıyor ve yarım bir numara ("102.0…")
     hiçbir işe yaramıyordu. Adı tam okunur, kodu hesabın penceresinde
     yazar. */
  .hesap-alt-kod { display: none; }
}

/* Rozet ile tutar dar ekranda yan yana sığmıyor; 480px altında rozet
   satırdan düşer, durumu grubun kendi penceresi söyler.
   (6-belgeler/tasarim.md · tek kırılma noktası kuralının belgeli istisnası.) */
@media (max-width: 480px) {
  .hesap-satir .hesap-rozet { display: none; }

  /* Avans rozeti dar ekranda da durur: "Kapalı" bir durum etiketidir,
     bu ise hesabın raporda nerede göründüğünü söyler — düşerse
     kullanıcı mizanda gördüğü satırı hesap planında bulamaz
     (2026.247). Kısa kalsın diye yalnız kodu yazar. */
  .hesap-satir .hesap-avans { display: inline-flex; }
}

/* Avans rozeti · hesap 320'de kalır, yalnız raporda 159'da görünür. */
.hesap-avans { white-space: nowrap; }


/* ---------- Pencere içi ---------- */
/* Pencerenin kendisi yukarıda tanımlıdır; burada yalnız içindekilerin
   dizilişi durur. Onay düğmesi "Tamam" değil, yapılacak işin adıdır. */
.pencere-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  margin-bottom: var(--bosluk);
}

.pencere-metin {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

/* Geri alınamayan işlemde bunun böyle olduğu onaydan önce söylenir. */
.pencere-uyari {
  margin-top: var(--bosluk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--metin-hata);
}

.pencere-dugmeler {
  display: flex;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 2.5);
}

.pencere-dugmeler > * { flex: 1; }

.dugme-yikici { background: var(--hata); }

/* ---------- Geri alma şeridi ---------- */
/* Onaylanan iş geri alınabiliyorsa kısa bir süre burada durur. Görünümü
   bildirim kartıdır; buradaki iş yalnız onu ekranın dibine oturtmaktır. */
.geri-al {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--alt-menu) + var(--bosluk) + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--bosluk) * 2);
  pointer-events: none;
}

.geri-al .bildirim-kart {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  pointer-events: auto;
}

.geri-al-metin {
  flex: 1;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.geri-al-dugme {
  flex: 0 0 auto;
  height: var(--dokunma);
  padding: 0 calc(var(--bosluk) * 1.5);
}

/* Formun sabit kaydet çubuğu varken şerit onun üstüne çıkar; iki yüzey
   üst üste binmez. */
@media (max-width: 899.98px) {
  .geri-al-yuksek {
    bottom: calc(var(--alt-menu) * 2 + var(--bosluk) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 900px) {
  .geri-al { bottom: calc(var(--bosluk) * 2); }
}

/* ---------- Form alanı · ek biçimler ---------- */
.alan-kutu-uzun {
  height: auto;
  min-height: calc(var(--form-alan) * 2);
  padding: var(--bosluk) calc(var(--bosluk) * 1.5);
  resize: vertical;
}

/* Parasal alanda basamaklar alt alta oturur. */
.alan-kutu-tutar {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.form-hata { margin-bottom: calc(var(--bosluk) * 2); }

/* ---------- Tablo içi giriş satırı ---------- */
/* Satırında giriş kutusu bulunan tabloda satır 44px'e çıkar; kutu 36px
   durur, üstünde ve altında 4'er px görünmez pay kalır ve dokunma alanı
   bu payı da kapsar. */
.tablo-giris-kutu {
  width: 100%;
  height: var(--tablo-satir);
  padding: 0 var(--bosluk);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-family: var(--yazi-metin);
  font-size: var(--kucuk-boy);
}

.tablo-giris-kutu:focus {
  outline: none;
  border: 2px solid var(--vurgu);
}

.tablo-giris-tutar {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Satırı kaldıran düğme; hücrenin tamamı dokunma hedefidir. */
.tablo-sil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dokunma);
  height: var(--dokunma);
  color: var(--metin-hata);
}

.tablo-sil:disabled { opacity: .45; }

/* ---------- Onay kutulu liste satırı ---------- */
/* Tekrarlanan Notlar'ın satırı: solda yapıldı kutucuğu, ortada başlık ve
   tekrar kuralı, sağda sonraki tarih. Satırın gövdesi ayrı bir düğmedir;
   kutucuk ile gövde iç içe geçmez. */
.onay-satir { display: flex; align-items: center; }

.onay-kutu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dokunma);
  height: var(--dokunma);
  color: var(--vurgu);
}

.onay-kutu-isaret {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--kenar);
  border-radius: 6px;
  background: var(--yuzey);
}

.onay-kutu-secili .onay-kutu-isaret {
  border-color: var(--vurgu);
  background: var(--vurgu);
}

.onay-govde {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  min-height: var(--dokunma);
  padding-right: calc(var(--bosluk) * 2);
  text-align: left;
}

/* Satıra dokununca açıklaması aynı satırın altında açılır. */
.onay-aciklama {
  padding: 0 calc(var(--bosluk) * 2) calc(var(--bosluk) * 2) var(--dokunma);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .85;
  border-bottom: 1px solid var(--ayirici);
}

/* ---------- Kural deneme kartı ---------- */
.deneme-kart { padding: calc(var(--bosluk) * 2); }

/* ---------- Bekleme durumu ---------- */
/* Veri gelirken ekran boş kalmaz: dönen küçük bir daire ve yanında ne
   beklendiğini söyleyen yazı durur. Hareket azaltma açıkken daire döner
   değil sabit durur — bekleme bilgisi yalnız harekete bırakılmaz.
   Kaynak: 6-belgeler/tasarim.md · "Animasyon" */
.durum-bekleme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 4) calc(var(--bosluk) * 2);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.durum-daire {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--kenar);
  border-top-color: var(--vurgu);
  border-radius: 999px;
  animation: durum-doner 1s linear infinite;
}


@media (prefers-reduced-motion: reduce) {
  .durum-daire { animation: none; }
}

.durum-bekleme-metin { min-width: 0; }

/* ---------- İşlem sonucu bildirimi ---------- */
/* Geri alınamayan ama söylenmesi gereken sonuç kısa süre ekranın dibinde
   durur. Görünümü bildirim kartıdır; buradaki iş yalnız yerleştirmektir.
   Geri alma şeridiyle aynı yere oturur, ikisi aynı anda açılmaz. */
.islem-sonuc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--alt-menu) + var(--bosluk) + env(safe-area-inset-bottom, 0px));
  z-index: 56;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--bosluk) * 2);
  pointer-events: none;
}

.islem-sonuc .bildirim-kart {
  width: 100%;
  max-width: 480px;
  pointer-events: auto;
  box-shadow: var(--golge);
  border: 1px solid var(--kenar);
}

.islem-sonuc-metin {
  flex: 1;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

@media (max-width: 899.98px) {
  .islem-sonuc-yuksek {
    bottom: calc(var(--alt-menu) * 2 + var(--bosluk) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 900px) {
  .islem-sonuc { bottom: calc(var(--bosluk) * 2); }
}

/* ---------- Dosya yükleme alanı ---------- */
/* Hem tıklanabilir hem sürükle-bırak kabul eder.
   Kaynak: 6-belgeler/NIZAM.md · Tasarım · "Dosya yükleme · Tıkla veya sürükle" */
.yukleme-alani {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  min-height: calc(var(--dokunma) * 2.5);
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 2);
  border: 1px dashed var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: center;
  cursor: pointer;
}

.yukleme-alani-uzerinde {
  border-color: var(--vurgu);
  border-style: solid;
}

/* ---------- Geliştirme isteği satırı ---------- */
.istek-satir {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  min-height: var(--dokunma);
  padding: calc(var(--bosluk) * 1.5) 0;
  border-bottom: 1px solid var(--ayirici);
}

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

.istek-metin {
  flex: 1;
  min-width: 0;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.istek-tarih {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--metin);
  opacity: .7;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Pano izni yokken metnin konduğu geçici kutu: ekranda yer kaplamaz. */
.istek-pano {
  position: fixed;
  top: -1000px;
  left: -1000px;
  opacity: 0;
}

/* Bir alanın altına yazılan kısa açıklama: alanın kendisi kadar önemli
   olmayan ama bilinmesi gereken şey. Etiketten soluk, gövdeden küçük. */
.alan-yardim {
  margin: calc(var(--bosluk) * -.5) 0 calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
}

/* ---------- Aranabilir seçici ----------
   Tarayıcının kendi açılır listesi yerine (2026.157). Görünen kutu
   metin kutusudur; altında süzülmüş liste açılır. Seçilen kimlik
   gizli alanda durur.
   Kaynak: 3-cekirdek/2-arayuz/seciciler.js */
.sec {
  position: relative;
  display: block;
}

.sec-kutu { padding-right: calc(var(--bosluk) * 4); }

.sec-ok {
  position: absolute;
  top: 50%;
  right: calc(var(--bosluk) * 1.25);
  transform: translateY(-50%) rotate(90deg);
  display: inline-flex;
  opacity: .55;
  pointer-events: none;
}

.sec-acik .sec-ok { transform: translateY(-50%) rotate(-90deg); }

/* Yeri sayfaya göre hesaplanır (seciciler.js · secYerlestir): kabına
   göre konsaydı yana kayan tablonun hücresinde kırpılırdı. */
.sec-liste {
  position: fixed;
  z-index: 60;
  display: block;
  max-height: 260px;
  overflow-y: auto;
  padding: calc(var(--bosluk) / 2);
  border: 1px solid var(--defter-tel);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
  box-shadow: var(--kart-golge);
}

.sec-satir {
  display: block;
  width: 100%;
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border: 0;
  border-radius: calc(var(--kose-kutu) - 2px);
  background: none;
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .sec-satir:hover { background: var(--oyuk); }
}

.sec-satir-imlec { background: var(--oyuk); }

.sec-satir-secili {
  background: var(--vurgu);
  color: var(--yuzey);
}

.sec-not {
  display: block;
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* ---- Ortak hesap ekleme paneli ----  (2026.265)
   Uygulamadaki tek "yeni hesap" penceresi. Kaynak:
   3-cekirdek/3-isler/hesap-ekleme.js

   PANEL BÜYÜYÜP KÜÇÜLMEZ (kullanıcının sözü: "panel büyüyüp küçülmesin,
   en ihtiyacı olan büyüklükte olsun"). Gövde en geniş hâline göre bir
   taban yükseklik alır; sekme değişince pencere zıplamaz, düğmeler hep
   aynı yerde durur. */
.he-panel {
  display: flex;
  flex-direction: column;
}

.he-govde {
  /* EN ÇOK İHTİYAÇ DUYULAN BOY (kullanıcının sözü: "en ihtiyacı olan
     büyüklükte olsun, ona göre diğerleri ayarlansın"). En uzun hâl dört
     alanlı olan: ana hesap · alt hesap · yeni alt hesabın adı · hesap
     adı. Öteki hâller o boyun içinde durur, panel sekme değişince ya da
     "＋ Yeni alt hesap" seçilince zıplamaz.

     "Sabit" değil "en az": uzun bir hata cümlesi gelirse panel yine de
     sığdırır, yazı kırpılmaz. */
  min-height: 178px;
}

/* Üç kutulu panel · en uzun hâli: ana hesap · orta hesap + listesi ·
   en alt hesap · özet şeridi. Öteki hâller o boyun içinde durur, panel
   liste açılıp kapandıkça zıplamaz (kullanıcının sözü: "panel büyüyüp
   küçülmesin, en ihtiyacı olan büyüklükte olsun"). */
.he-derin .he-govde { min-height: 470px; }

.he-kunye {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-bottom: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
}

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

.he-kunye-deger {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.he-kunye-not {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* Sekme şeridi · "var olanı seç" ile "yeni hesap aç" arasında geçiş. */
.he-sekme {
  display: flex;
  gap: 2px;
  margin-bottom: calc(var(--bosluk) * 2);
  padding: 2px;
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
}

.he-sekme-dugme {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--bosluk);
  border: 0;
  border-radius: calc(var(--kose-kutu) - 2px);
  background: none;
  color: var(--metin);
  font: inherit;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .7;
  cursor: pointer;
  transition: background-color var(--gecis) ease-out, opacity var(--gecis) ease-out;
}

.he-sekme-secili {
  background: var(--yuzey);
  box-shadow: var(--golge);
  opacity: 1;
  font-weight: 500;
}

/* Alt hesap listesi · kutunun altında durur, yazdıkça daralır.
   Açılır liste DEĞİL: kullanıcının sözü "orta hesaba basınca direk
   seçici açılıyor, oraya yazıp ekleyemiyorum". Kutuya yazılır, liste
   altında süzülür, en üstteki satır yenisini açar. */
.he-alt-liste {
  display: flex;
  flex-direction: column;
  max-height: 132px;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  overflow-y: auto;
}

.he-alt-satir {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--metin);
  font: inherit;
  font-size: var(--kucuk-boy);
  text-align: left;
  cursor: pointer;
}

.he-alt-satir:hover { background: var(--oyuk); }

.he-alt-secili {
  background: var(--oyuk);
  font-weight: 600;
}

/* "＋ Yeni alt hesap aç" en üstte ve ötekilerden ayrı durur: bir
   seçenek değil, bir eylem. */
.he-alt-yeni {
  color: var(--defter-koyu);
  font-weight: 500;
}

.he-alt-kod {
  flex: none;
  min-width: 62px;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.he-alt-bos {
  padding: 8px;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* Özet şeridi · "Ekle"ye basmadan önce ne olacağını söyler
   (2026.269 · kullanıcının isteği: "özet şeridi kalsın"). */
.he-ozet {
  margin-top: calc(var(--bosluk) * 1.5);
  padding: 10px 12px;
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  font-size: var(--etiket-boy);
  line-height: 1.6;
}

.he-ozet b { color: var(--defter-koyu); }
.he-ozet-ok { opacity: .5; }

/* "Hangi adla devam edilsin?" · eşleştirme kipinde iki ad karşı karşıya
   gelir (2026.275 · kullanıcının kararı: "iki ad kabul etmesin").
   Seçenekler alt alta durur; ad kalın, nereden geldiği soluk yazar. */
.he-adsec {
  margin-top: calc(var(--bosluk) * 2);
  padding-top: calc(var(--bosluk) * 2);
  border-top: 1px solid var(--ayirici);
}

.he-adsec-baslik {
  margin-bottom: var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 700;
}

.he-adsec-satir {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  padding: 6px 0;
  cursor: pointer;
}

.he-adsec-satir input { flex: none; }

.he-adsec-ad {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.he-adsec-not {
  flex: none;
  color: var(--metin-ikincil);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
}

.he-adsec-kutu { margin: var(--bosluk) 0 0; }

.he-adsec .he-not { margin-top: var(--bosluk); }

/* Yeni hesap panelinin alt notu · 3-cekirdek/3-isler/hesap-ekleme.js */
.he-not {
  margin: calc(var(--bosluk) * 1.5) 0 0;
  color: var(--metin-ikincil);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
}

/* Listede olmayanı ekleme kapısı (2026.211). Satırların dibinde durur
   ama onlardan biri değildir: üstünde ince bir çizgi, yazısı kırmızı.
   "Bu bir seçenek değil, bir eylem" demenin en sessiz yolu. */
.sec-ekle {
  border-top: 1px solid var(--kenar);
  color: var(--defter-koyu);
  font-weight: 600;
}

/* ---------- Tarih kutusu ve takvim ----------
   Yazarak girmek yerinde durur; düğme ikinci bir yol açar. */
.trh {
  position: relative;
  display: block;
}

.trh .alan-kutu-tarih { padding-right: calc(var(--bosluk) * 5); }

.trh-dugme {
  position: absolute;
  top: 50%;
  right: calc(var(--bosluk) / 2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--kose-kutu);
  background: none;
  color: var(--vurgu);
  cursor: pointer;
}

@media (hover: hover) {
  .trh-dugme:hover { background: var(--oyuk); }
}

.trh-dugme:disabled { opacity: .4; cursor: default; }

.tkv {
  position: fixed;
  z-index: 60;
  width: 268px;
  padding: calc(var(--bosluk) * 1.5);
  border: 1px solid var(--defter-koyu);
  border-radius: var(--kose-kart);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  box-shadow: var(--kart-golge);
}

.tkv-tepe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bosluk);
}

.tkv-baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  font-weight: 600;
  color: var(--defter-koyu);
}

.tkv-ok {
  width: 30px;
  height: 30px;
  border: 1px solid var(--kart-kenar);
  border-radius: 999px;
  background: var(--kart-yuzey);
  color: var(--defter-koyu);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.tkv-hafta,
.tkv-ag {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.tkv-hafta span {
  padding: 2px 0;
  text-align: center;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .6;
}

.tkv-gun {
  height: 32px;
  border: 0;
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

@media (hover: hover) {
  .tkv-gun:hover { background: var(--oyuk); }
}

/* Bugün gri telle çevrilir, seçili gün kırmızı dolar. */
.tkv-bugun { box-shadow: inset 0 0 0 1px var(--defter-tel); }

.tkv-secili {
  background: var(--vurgu);
  color: var(--yuzey);
}

.tkv-dip {
  margin-top: var(--bosluk);
  text-align: right;
}

/* ---------- İşlem sürüyor örtüsü ---------- */
/* Sunucuya gidip gelen iş sırasında (silme, eşleştirme, kaydı
   düzenlemeye alma) ekranın üstüne iner: program donmuş gibi durmasın,
   ne olduğu yazsın (2026.165 · kullanıcının kararı).
   Kaynak: 3-cekirdek/2-arayuz/durum.js · NS.durum.mesgul */
.mesgul-ortu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 37, 42, .22);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  transition: opacity .18s ease;
}

.mesgul-acik { opacity: 1; }

.mesgul-kutu {
  display: flex;
  align-items: center;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 3);
  border: var(--kart-tel);
  border-radius: var(--kose-kart, 14px);
  background: var(--yuzey);
  box-shadow: 0 18px 40px -20px rgba(34, 37, 42, .7);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

@media (prefers-reduced-motion: reduce) {
  .mesgul-ortu { transition: none; }
}

/* ---------- Giriş kutuları · sıcak kağıt görünümü (2026.165) ----------
   Kutular düz beyaz dikdörtgen değil: kağıda oyulmuş gibi ince bir iç
   gölge, üstünde bir tel ışık. Odaklanınca çerçeve kalınlaşıp yazıyı
   kaydırmaz, dışına yumuşak bir kırmızı halka çıkar
   (kullanıcının kararı · "textboxları güzelleştir"). */
.alan-etiket {
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .82;
}

.alan-kutu,
.tablo-giris-kutu {
  border-color: var(--defter-tel-soluk, var(--kenar));
  box-shadow:
    inset 0 1px 2px rgba(34, 37, 42, .10),
    0 1px 0 rgba(255, 255, 255, .6);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.alan-kutu:hover:not(:disabled):not(:focus),
.tablo-giris-kutu:hover:not(:disabled):not(:focus) {
  border-color: var(--defter-tel);
}

/* Odak: çerçeve 1px kalır (yazı zıplamaz), halka dışarıda durur. */
.alan-kutu:focus,
.tablo-giris-kutu:focus {
  border: 1px solid var(--vurgu);
  padding-left: 12px;
  padding-right: 12px;
  outline: none;
  background: var(--yuzey);
  box-shadow:
    0 0 0 3px rgba(183, 44, 40, .14),
    inset 0 1px 2px rgba(34, 37, 42, .06);
}

.tablo-giris-kutu:focus { padding-left: var(--bosluk); padding-right: var(--bosluk); }

.alan-kutu::placeholder,
.tablo-giris-kutu::placeholder { color: var(--metin); opacity: .38; }

.alan-kutu:disabled,
.tablo-giris-kutu:disabled {
  background: var(--oyuk);
  opacity: .75;
  cursor: not-allowed;
  box-shadow: none;
}

/* Açılır listede tarayıcının kendi oku yerine kendi okumuz. */
select.alan-kutu {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--metin) 50%),
    linear-gradient(135deg, var(--metin) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select.alan-kutu:focus { padding-right: 34px; }

/* Kendi sağ payı olan kutular odakta payını korur: ok ve takvim
   düğmesinin altına yazı girmesin. */
.sec-kutu:focus { padding-right: calc(var(--bosluk) * 4); }

.trh .alan-kutu-tarih:focus { padding-right: calc(var(--bosluk) * 5); }

.alan-kutu-uzun:focus {
  padding-left: calc(var(--bosluk) * 1.5);
  padding-right: calc(var(--bosluk) * 1.5);
}

/* Seçili satırın üstüne gelince bordosu kaçmaz (2026.167 · kullanıcının
   kararı). Vurgulama kuralı ":hover"dan zayıf olduğu için seçili
   tedarikçinin zemini açık griye dönüyor, beyaz yazı okunmaz oluyordu.
   Artık üstüne gelince yalnız bir ton koyulaşır. */
@media (hover: hover) {
  .sec-satir-secili:hover,
  .tkv-secili:hover {
    background: #9A231F;
    color: var(--yuzey);
  }
}

.sec-satir-secili.sec-satir-imlec {
  background: #9A231F;
  color: var(--yuzey);
}


/* =====================================================================
   Rehber · "bu iş nasıl yapılır" paneli
   ---------------------------------------------------------------------
   Günlük İş Akışı'ndaki "i" düğmesi açar (2026.193 · kullanıcının
   kararı). Hikâye gibi okunsun diye her adım kendi çizimiyle ve kendi
   kartında durur; numara adın soluna gömülür, listeye benzemesin.
   İşaretleme: 3-cekirdek/2-arayuz/rehber.js
   ===================================================================== */

/* Rehber çekmecenin içinde durur: paneldeki tepe ile arasındaki boşluğu
   panelin kendi ölçüsü verir, burada üstten boşluk bırakılmaz. */
.rhb-giris {
  margin: 0 0 calc(var(--bosluk) * 2);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.rhb-adimlar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) * 1.5);
}

.rhb-adim {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--bosluk) * 2);
  padding: calc(var(--bosluk) * 1.75);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
}

.rhb-gorsel {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  color: var(--gri-vurgu);
}

.rhb-cizim { width: 40px; height: 40px; }

.rhb-yazi { min-width: 0; }

.rhb-adim-ad {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) / 2);
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.rhb-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--defter-koyu);
  color: var(--kart-yuzey);
  font-size: var(--etiket-boy);
  font-variant-numeric: tabular-nums;
}

.rhb-metin {
  margin: 0;
  font-size: var(--kucuk-boy);
  line-height: calc(var(--kucuk-satir) + 3px);
}

/* ---- Uygulama içinden örnek ----
   Adımın altında, o ekranda ne göreceğinin minik bir kopyası. Ekran
   görüntüsü değil: uygulamanın kendi sınıflarıyla kuruluyor, o yüzden
   ekran değişince örnek de değişiyor (2026.194 · kullanıcının kararı).
   Tıklanmaz: içindeki her şey pasif, göze düğme gibi görünse de. */
.rhb-ornek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk);
  margin-top: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.5);
  border: 1px dashed var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  pointer-events: none;
  user-select: none;
}

/* Örnekteki her parça blok gibi davranır: rehberde tıklanacak bir şey
   yok, hepsi <span>. */
.rhb-ornek .yukleme-alani,
.rhb-ornek .tablo-kutu,
.rhb-ornek .ozet-kart,
.rhb-ornek .ba-kontrol,
.rhb-ornek .ba-uyari,
.rhb-ornek .tk-cipler,
.rhb-ornek .rhb-bant,
.rhb-ornek .rhb-akis { display: flex; width: 100%; }

.rhb-ornek .tablo-kutu,
.rhb-ornek .rhb-bant { display: block; }

.rhb-ornek .yukleme-alani {
  flex-direction: column;
  gap: calc(var(--bosluk) / 2);
  padding: calc(var(--bosluk) * 2);
  min-height: 0;
}

.rhb-alan {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 2);
  flex: 1 1 220px;
  min-width: 0;
}

.rhb-kutu {
  display: flex;
  align-items: center;
  background: var(--kart-yuzey);
}

.rhb-kutu.rhb-bos { opacity: .5; }

.rhb-ornek > .rhb-sec { flex: 1 1 220px; }
/* Etiketin altındaki seçici sütun yönünde dizilir: orada "flex-basis"
   yükseklik tabanı olur ve kutunun altında kocaman bir boşluk kalırdı
   (aynı tuzak gün sonu altlığında da yaşandı). */
.rhb-alan .rhb-sec { flex: none; }

.rhb-sec .sec-kutu { background: var(--kart-yuzey); }

/* Ok kutunun hizasında durur: liste açık çizildiği için ".sec" uzuyor
   ve "top: 50%" oku listenin ortasına indiriyordu. */
.rhb-sec .sec-ok { top: calc(var(--form-alan) / 2); }

/* Liste rehberde açık DURUR: burada tıklama yok, "yazınca böyle çıkar"
   demenin tek yolu onu açık göstermek. O yüzden sayfaya göre değil,
   kutunun altına yerleşir. */
.rhb-sec-liste {
  position: static;
  width: auto;
  margin-top: 4px;
  max-height: none;
  box-shadow: none;
}

.rhb-dugme { pointer-events: none; }

.rhb-tablo-kutu { overflow: hidden; }
.rhb-tablo { min-width: 0; width: 100%; font-size: var(--etiket-boy); }
.rhb-tablo th,
.rhb-tablo td { padding: calc(var(--bosluk) / 1.5) var(--bosluk); }
.rhb-uyari { color: var(--defter-koyu); font-weight: 600; }

.rhb-bant {
  padding: calc(var(--bosluk) / 1.5) var(--bosluk);
  border-radius: var(--kose-kutu) var(--kose-kutu) 0 0;
  background: var(--defter-koyu);
  color: var(--kart-yuzey);
  font-size: var(--etiket-boy);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rhb-bant + .rhb-tablo-kutu { border-radius: 0 0 var(--kose-kutu) var(--kose-kutu); }

.rhb-ozet { padding: calc(var(--bosluk) * 1.25); }
.rhb-ozet .ozet-metin { display: block; width: 100%; }
.rhb-ozet .ozet-satir { display: flex; font-size: var(--kucuk-boy); }

.rhb-kontrol {
  align-items: center;
  gap: var(--bosluk);
  padding: var(--bosluk) calc(var(--bosluk) * 1.5);
  border-radius: var(--kose-kutu);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

/* Nakit akış hücreleri · dört küçük kutu, tablonun okunuşunu anlatır. */
.rhb-akis { gap: calc(var(--bosluk) / 1.5); }

.rhb-akis-h {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--bosluk) calc(var(--bosluk) / 2);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
}

.rhb-akis-gun {
  font-size: var(--etiket-boy);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}

.rhb-akis-tutar {
  font-size: var(--kucuk-boy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Gerçekleşmemiş gün soluk yazılır; dolgusu aynı kalır (2026.178). */
.rhb-ongoru .rhb-akis-tutar { opacity: .55; }
.rhb-eksi .rhb-akis-tutar { color: var(--defter-koyu); opacity: .8; }

/* Kapanış cümlesi bir uyarı değil, omuz sıvazlama: oyuk zeminde durur,
   çerçevesi yoktur. */
.rhb-son {
  margin: calc(var(--bosluk) * 2.5) 0 0;
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2);
  border-radius: var(--kose-kutu);
  background: var(--oyuk);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

@media (max-width: 599.98px) {
  .rhb-adim {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bosluk);
  }
  .rhb-gorsel { width: 52px; height: 52px; }
}

/* Avans rozetinin uzun yazısı dar ekranda düşer, kod kalır (2026.247). */
@media (max-width: 480px) {
  .hesap-avans-uzun { display: none; }
}

/* Cari avans rozeti · bakiyenin yanında durur, tutarı ezmez (2026.247). */
.cari-avans {
  margin-left: calc(var(--bosluk) * .5);
  vertical-align: middle;
  white-space: nowrap;
}

/* "Seçimi temizle" · gider seçme penceresinin dibinde, "Yeni gider"in
   yanında durur. Yıkıcı değil, geri alıcıdır: renk değiştirmez, yalnız
   sağa yaslanır (2026.249). */
.gsc-temizle { margin-left: auto; }