/* 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;
}

/* BİRİNCİL DÜĞME · KIRMIZI DOLGU · BEYAZ YAZI · ALTIN ÇERÇEVE
   (2026.437 · kullanıcının kuralı: "tüm düğmeler kırmızı dolgu beyaz
   font altın çerçeve"). Çerçeve önceden yoktu; kırmızı zemin krem
   sayfanın üstünde kenarsız duruyor ve düğme kağıda basılmış bir leke
   gibi görünüyordu. Altın tel onu kağıdın kendi süsüne bağlar — ikincil
   düğmedeki çerçevenin aynısı, böylece ikisi aynı ailedendir ve yalnız
   DOLGUSUYLA ayrılır.
   Künye: 6-belgeler/tasarim-dili.md · "1.1 Birincil düğme" */
.dugme-birincil {
  background: var(--vurgu);
  color: var(--yuzey);
  border: 1px solid var(--altin);
}

@media (hover: hover) {
  .dugme-birincil:hover:not(:disabled) { background: var(--vurgu-koyu); }
}

/* İKİNCİL DÜĞME · BEYAZ ZEMİN, İNCE ALTIN ÇERÇEVE (2026.411 ·
   kullanıcının isteği: "düğmelerde hep beyaz arka plan altın çerçeve
   kullan, ince çerçeve").

   Eskiden saydam zeminli ve KIRMIZI çerçeveliydi. Kırmızı uygulamanın
   vurgu rengidir ve asıl işi "bas" demektir; bir ekranda dört ikincil
   düğme yan yana durunca dördü de bağırıyordu. Altın ise kâğıdın kendi
   çerçevesi (--kart-cerceve) — düğme artık kâğıttan kesilmiş gibi durur,
   yazısı okunur ve kırmızı yalnız BİRİNCİL düğmede kalır.

   Zemin saydam değil YÜZEY: düğme desenli bir bandın üstünde durunca
   (gün sonu kâğıdı, nakit akış tepesi) desen yazının altından geçiyordu. */
.dugme-ikincil {
  background: var(--yuzey);
  color: var(--vurgu);
  border: 1px solid var(--altin);
}

@media (hover: hover) {
  .dugme-ikincil:hover:not(:disabled) { border-color: 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;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}



/* ---------- 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-color: var(--altin);
  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 ÇUBUĞU FORM ALANIYLA AYNI AİLEDİR (2026.437 ·
   6-belgeler/tasarim-dili.md · "3 · Form alanları"). Oyuk zeminli ve
   çerçevesizdi; aynı şeritte duran beyaz kutuların yanında başka bir
   uygulamadan kopmuş gibi görünüyordu. Artık aynı zemin, aynı kenar,
   aynı odak halkası — farkı yalnız solundaki büyüteç. */
/* ARAMA ÇUBUĞU (2026.438 · kullanıcının bildirimi: "arama çubuğuna
   basınca kırmızı kötü bir çerçeve oluyor ... altına çevir evet ama daha
   güzel bir tasarım yap, kötü duruyor").

   ESKİDEN: oyuk gri zemin, çerçevesiz; basınca 1px kırmızı çerçeve.
   Yanındaki beyaz form kutularından kopuk duruyordu ve kırmızı çerçeve
   "bir şey yanlış" diye okunuyordu.

   ŞİMDİ: kâğıttan kesilmiş beyaz bir kutu. Yüksekliği form alanıyla
   AYNI (44px) — aynı şeritte yan yana dururken biri kısa kalmasın.
   Büyüteç solda, soluk altın; yazı yazılınca koyulaşır, çünkü o an
   arama gerçekten çalışıyordur.

   ODAKTA: çerçeve altına döner ve dışında YUMUŞAK bir halka belirir.
   Halka 3px'ti ve kutunun etrafında kalın bir yaka gibi duruyordu;
   2px + ince bir iç ışık daha zarif. */
.arama {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--form-alan);
  padding: 0 14px;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--ikinci);
  transition: border-color var(--gecis) ease-out,
              box-shadow var(--gecis) ease-out;
}

.arama .simge {
  flex: none;
  color: var(--ikinci);
  transition: color var(--gecis) ease-out;
}

@media (hover: hover) {
  .arama:hover:not(.arama-odak) { border-color: var(--altin); }
}

/* Odak halkası ALTIN · form alanındakiyle aynı dil, yalnız daha ince. */
.arama-odak,
.arama:focus-within {
  border-color: var(--altin);
  box-shadow:
    0 0 0 2px var(--altin-soluk),
    inset 0 1px 2px rgba(58, 42, 29, .05);
}

.arama-odak .simge,
.arama:focus-within .simge { color: var(--vurgu); }

/* Kutunun İÇİNDEKİ yazı alanı ayrıca çerçevelenmez (2026.687 · kullanıcının
   isteği: "arama çubuğunda böyle bir çerçeve olmasın"). Odağı dıştaki
   altın halka gösterir. */
.arama-kutu:focus,
.arama-kutu:focus-visible { outline: none; }

.arama-kutu {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--metin);
  font-family: var(--yazi-metin);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

.arama-kutu::placeholder {
  color: var(--ikinci);
  opacity: .7;
}

/* Tarayıcının kendi "temizle" çarpısı kaldırıldı: her tarayıcıda başka
   görünüyor ve kutunun altın çerçevesinin içinde gri bir sistem parçası
   gibi duruyordu. */
.arama-kutu::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ===================================================================
   TABLOLARIN ORTAK DİLİ (2026.438)

   Kullanıcının kararı: "tablolar ... ne varsa hepsine ortak bir tasarım
   dili yapacağız."

   NE VARDI: otuz ayrı tablo sınıfı ve DÖRT ayrı başlık görünüşü. Kimi
   tablonun başlığı krem şeritliydi ve serif yazıyordu (Mizan, Kredi
   Kartı), kimi düz krem zeminde kalın Inter'di (Gün Sonu, Banka), kimi
   büyük harf küçük etiketti (ortak .tablo), kimi de başka bir krem tonu
   kullanıyordu (Ay Sonu). Aynı programda dört ayrı defter gibi
   duruyorlardı.

   KAZANAN DEFTER BAŞLIĞIDIR: krem şerit · koyu kahve serif · seyreltilmiş
   büyük harf · altında kalın kural. Kullanıcı Günlük İşlemler için
   "mizan gibi gösterelim" demişti; referans o.

   BURADA YALNIZ GÖRÜNÜŞ VAR. Sütun genişliği, iç pay, en küçük genişlik
   ve hangi sütunun nerede duracağı ekranın kendi işidir ve ekran
   dosyasında kalır — bir fatura tablosuyla bir mizan aynı ölçüde olamaz.

   Künye: 6-belgeler/tasarim-dili.md · "4 · Tablolar"
   =================================================================== */
.tablo thead th,
.mz-tablo thead th,
.gs-tablo thead th,
.gsd-tablo thead th,
.gsk-tablo thead th,
.gsm-tablo thead th,
.ba-tablo thead th,
.sf-tablo thead th,
.ir-tablo thead th,
.kk-tablo thead th,
.kz-tablo thead th,
.kzk-tablo thead th,
.kzm-tablo thead th,
.kzd-tablo thead th,
.rl-tablo thead th,
.sy-tablo thead th,
.rhb-tablo thead th,
.kur-tablo thead th,
.fzs-tablo thead th,
.fatura-b-tablo thead th,
.fatura-toplu-tablo thead th {
  /* DEFTER BAŞLIĞI · krem şerit · koyu kahve serif · seyreltilmiş büyük
     harf · altında kalın kural.

     Bir ara dolgu kaldırılıp yerine ince altın kural konmuştu; kullanıcı
     "tablo renkleri öncekiler iyidi, onları geri al" dedi. Krem şerit
     geri geldi: defterin başlık şeridi budur ve tablo kâğıdın üstünde
     kendi başına bir nesne gibi durur. */
  background: var(--defter-baslik);
  color: var(--defter-koyu);
  font-family: var(--yazi-baslik);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 2px solid var(--defter-koyu);
  white-space: nowrap;
}

/* PARA SÜTUNU · sağa yaslı, haneler hizalı, satır kırılmaz. Muhasebe
   tablosunda alt alta duran tutarların haneleri tutmalı; `tabular-nums`
   rakamları eşit genişliğe getirir. Kural sütunun ADINI değil İŞİNİ
   tanır: hangi ekranın sınıfıyla yazıldığına bakmaz. */
.tablo .tablo-para,
.tablo-para,
.td-para,
.sag,
.mz-td-para,
.kz-td-para,
.gs-td-para {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ===================================================================
   YAZI ROLLERİ (2026.439)

   Kullanıcının kararı: "ilgili fontlar her yerde aynı olsun; mesela her
   yerde başlıklar aynı, açıklamalar aynı, aileler aynı tarzda olsun."

   İKİ AİLE ZATEN VARDI ve ikisi de jetondan geliyordu — orada dağınıklık
   yoktu. Dağınıklık ROLLERDEYDİ: aynı işi yapan yazı ekrandan ekrana
   başka türlü boyanıyordu.

     AÇIKLAMA · on sekiz sınıf aynı boyu kullanıyor ama rengini ALTI
     AYRI SAYDAMLIKLA veriyordu (.6 · .7 · .72 · .75 · .85 · hiç), ikisi
     de elle renk yazıyordu. Aynı sayfada iki açıklama iki ayrı tonda
     duruyordu.

     BAŞLIK · otuz dokuz sınıf serif + h2 kullanıyor ama on yedisi hiç
     renk vermiyordu; hangi rengi aldıkları bulundukları kabın rengine
     kalmıştı.

   SAYDAMLIK KALKTI, RENK GELDİ. `opacity` yazıyı zeminle karıştırır:
   krem kâğıt üstünde başka, beyaz kutu üstünde başka bir ton verir ve
   yazı seçilebilirliğini düşürür. Rengin kendisi yazılır.

   Künye: 6-belgeler/tasarim-dili.md · "3.1 Yazı rolleri"
   =================================================================== */

/* AÇIKLAMA · başlığın altındaki tarif, alanın altındaki yardım yazısı,
   listenin ikinci satırı. Hepsi aynı boy, aynı renk. */
.hesap-tarif,
.hesap-aciklama,
.ayarlar-obek-tarif,
.ayarlar-aciklama,
.ayarlar-yardimci,
.bos-durum-aciklama,
.akis-aciklama,
.kk-aciklama,
.kk-yardimci,
.ku-yardimci,
.giris-yardimci,
.onay-aciklama,
.alan-yardim,
.sf-yardim,
.zil-aciklama,
.liste-satir-yardimci,
.rl-bos-yazi,
.rl-not,
.pencere-metin {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  color: var(--ikinci);
}

/* BAŞLIK · sayfanın, kâğıdın, kartın ve pencerenin adı. Serif, h2,
   koyu kahve. Rengini kendisi söylemeyen başlıklar buradan alır;
   bilerek başka renk verenlere (öbek rengi, giriş ekranının markası)
   dokunulmaz — onların rengi anlam taşır. */
.bos-durum-baslik,
.hesap-grup-baslik,
.pencere-baslik,
.gs-tepe-baslik,
.ba-secim-baslik,
.ba-tepe-baslik,
.sf-baslik,
.obek-panel-ad,
.sube-panel-ad,
.rl-baslik,
.hd-tepe-baslik,
.kz-sayfa-baslik,
.mz-baslik {
  color: var(--defter-koyu);
}

/* KÂĞIT VE PENCERE BAŞLIĞI · sayfa başlığının bir kademe altı. Aynı
   aile, aynı ağırlık, aynı renk — yalnız BOY ayrılır. Büyük harf
   YOKTUR: iki ekranda başlık "MUHASEBE KAYDI" diye bağırıyor, ötekinde
   "Fatura detayı" diye fısıldıyordu; üçüncüsünde kalınlık hiç
   verilmediği için ince kalıyordu. */
.gs-tepe-baslik,
.ba-tepe-baslik,
.ir-tepe-baslik,
.na-tepe-baslik,
.fatura-b-tepe-baslik,
.fzs-tepe-baslik,
.ba-secim-baslik,
.ekc-baslik,
.fk-baslik,
.akis-baslik,
.sf-baslik,
.pencere-baslik,
.bos-durum-baslik,
.hesap-baslik,
.hesap-grup-baslik,
.obek-panel-ad,
.sube-panel-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--defter-koyu);
}

/* KÜÇÜK BÖLÜM ETİKETİ · bir bölümün üstündeki iki kelimelik başlıkçık.
   Büyük harf ve seyreltilmiş; başlık DEĞİLDİR, işaret levhasıdır. */
.ayarlar-baslik,
.gecmis-baslikcik,
.kayit-baslikcik,
.he-adsec-baslik,
.fatura-b-tepe-etiket {
  font-family: var(--yazi-metin);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ikinci);
}

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

/* ARAYA GİREN SÜTUN TEK SATIRDA KALIR (2026.396 · kullanıcının
   bildirimi: "önizlemede banka açıklaması çok uzun, kötü duruyor").
   Banka açıklaması yüz karakteri geçebiliyor; sütun dar olduğu için
   hücre on satırlık bir kuleye dönüyor ve satırın yüksekliği tabloyu
   bozuyordu. Yazı tek satırda kalır, taşanı üç noktayla kesilir,
   tamamı üzerine gelince görünür. */
.tablo td.tablo-ek { max-width: 220px; }

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

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

/* ---------- 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 ya da panel açıkken arkadaki sayfa kilitlenir; tekerlek
   sayfayı altından kaydırmasın diye (2026.334 · kullanıcının
   bildirimi).

   GÖVDE YERİNDEN OYNATILARAK kilitlenir, yalnız overflow kapatılarak
   değil: overflow: hidden tek başına denendi ve tarayıcı sayfayı o anda
   en başa alıyor — kullanıcı paneli açar açmaz arkadaki liste tepeye
   zıplıyor, kapanınca geri iniyordu. Gövde sabitlenip kaldığı kadar
   yukarı çekilince sayfa göründüğü yerde kalır.

   Nereye çekileceğini pencere.js yazar (body.style.top) ve kilit
   kalkınca sayfayı aynı yere geri götürür.

   Kaydırma çubuğunun yeri html'de zaten hep ayrılı (temel.css ·
   scrollbar-gutter), o yüzden kilitlenince sayfa yana kaymaz. */
.pencere-acik { overflow: hidden; }

.pencere-acik body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  /* Boyu içeriği kadar olmalı. temel.css gövdeye height: 100% veriyor;
     sabitlenmiş gövdede o kural kutuyu bir ekran boyuna kırpıyor ve
     arkadaki sayfanın yalnız ilk ekranı görünüyordu — panel altındaki
     liste boşluğa dönüyordu. */
  height: auto;
}

.pencere-perde {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Perde kendisi kaydırılabilir: tekerlek onun üstünde kalır, arkaya
     geçmez (overscroll-behavior). Pencere perdeden uzun olursa da
     görünmeyen yeri kalmaz. */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ortalama flex-start ile değil, çocuğun kendi "margin: auto"suyla:
     yer varken ortalar, pencere perdeden uzunsa tepeden başlar ve üstü
     kırpılmaz. align-items: center olsaydı uzun pencerenin başlığı
     erişilemez olurdu. */
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--bosluk) * 2);
  background: var(--perde);
}

.pencere-perde > * { margin: auto; }

.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;
  /* Gövde sonuna gelince tekerlek arkadaki sayfaya devrolmasın. */
  overscroll-behavior: contain;
}

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

/* YENİ KAYIT FORMU KARTIN TEPESİNDE AÇILIR (2026.462 · kullanıcının
   bildirimi: "depo adı sıkışmış"). Açılan formun üst payı yoktur, çünkü
   normalde bir satırın ALTINDA açılır ve payı o satır verir. Yeni kayıtta
   ise kartın ilk çocuğudur ve ilk etiket kenara yapışır. Kural bütün
   ayar ekranlarını kapsar — Şubeler, Ödeme Yöntemleri, Depolar. */
.ayar-kart > .ayar-acilan:first-child {
  padding-top: calc(var(--bosluk) * 2);
}

.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. */
/* Süzgeç şeridindeki seçici · 2026.319'dan beri uygulamanın kendi
   açılır listesi (NS.form.aranan), tarayıcının <select>'i değil. Sınıf
   artık sarmalayıcı öğenin üstünde; ölçü ve çerçeve içteki kutunun işi.
   Sarmalayıcıya yalnız genişlik sınırı kalır. */
.suzgec-secici { max-width: 100%; }

.suzgec-secici .sec-kutu {
  height: var(--arama);
  padding: 0 12px;
  padding-right: calc(var(--bosluk) * 4);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--govde-boy);
}

/* ODAK İŞARETİ ALTINDIR · her yerde aynı (2026.438 ·
   6-belgeler/tasarim-dili.md · "3 · Form alanları"). Kırmızı çerçeve
   kullanıcıya "hata" diye okunuyordu (kullanıcının bildirimi: "arama
   çubuğuna basınca kırmızı kötü bir çerçeve oluyor") ve kırmızı zaten
   düğmelerin rengi. Klavyeyle gezen kişi nerede olduğunu tek işaretten
   anlasın. */
.suzgec-secici .sec-kutu:focus {
  border: 2px solid var(--altin);
  padding: 0 11px;
  padding-right: calc(var(--bosluk) * 4);
  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);
}

.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. */
/* Görünüşü ORTAK (.secim-serit + .secim-sekme · 2026.437 ·
   6-belgeler/tasarim-dili.md). Burada yalnız şeridin süzgeç şeridindeki
   yerleşimi kalır: arama kutusunun yanında esnemeden durur. */
.hesap-suzgec { flex: none; }

/* 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: var(--yuzey);
  font-weight: 600;
}

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

@media (hover: hover) {
  /* Açıkken (hesap-bos-etkin) fareyle HİÇBİR ŞEY değişmez: anahtar
     zaten kırmızıdır, üstüne gelince parlaması "değişti mi?" dedirtiyordu
     (2026.509 · seçili olanın görünüşü fareyle değişmez). Kapalıyken
     yalnız çerçevesi bordoya döner. */
  .hesap-bos-anahtar:hover:not(.hesap-bos-etkin) { border-color: var(--vurgu); }
}

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

/* ÜST Mİ ALT MI BELLİ OLSUN (2026.929 · kullanıcının bildirimi:
   "hangisi alt başlık hangisi üst anlayamıyorum"). Girinti kuralı
   aşağıdaki `.hesap-satir-alt .hesap-ana-bas` dolgusuna yeniliyordu
   (aynı ağırlık, sonra yazılmış) ve 700.03'ün altı 700.03'le aynı
   hizada duruyordu. Artık:
     · altında hesap olan satırın adı kalın (dal başı);
     · açık dal başının zemini hafif koyu;
     · alt kademe her basamakta içeri girer, solunda altın bir çizgi
       ve hafif zemin durur, yazısı bir tık küçük. */
.hesap-satir-alt.hesap-satir-derin .hesap-ana-bas {
  padding-left: calc(var(--bosluk) * (3 + (var(--hesap-kademe, 2) - 1) * 2.5));
}
.hesap-satir-derin {
  background: color-mix(in srgb, var(--altin) 7%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--altin) 55%, transparent);
}
.hesap-satir-alt.hesap-satir-derin .hesap-ad { font-size: var(--kucuk-boy); }
.hesap-satir-alt.hesap-satir-dalli .hesap-ad { font-weight: 600; }
.hesap-satir-dal-acik { background: color-mix(in srgb, var(--altin) 14%, transparent); }

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

/* "… hesap daha var · göster" · uzun dalın dibindeki sayfa düğmesi
   (2026.429). "Alt hesap ekle" ile aynı yerde durduğu için onunla aynı
   yüksekliği ve girintiyi alır, ama ondan ayrılsın diye rengi soluktur:
   burası bir EYLEM değil, listenin devamıdır. */
.hesap-daha {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--bosluk) * 3);
  border-top: 1px solid var(--ayirici);
  color: var(--ikinci);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  text-align: left;
}

@media (hover: hover) {
  /* Üstüne gelince RENK DEĞİŞMEZ, AD KALINLAŞIR (2026.692 · kullanıcının
     isteği: "rengi değişiyor ya, öyle olmasın, kalınlaşsın"). Kırmızı ad
     bir uyarı gibi okunuyordu. */
  .hesap-ana-bas:hover .hesap-ad { font-weight: 600; }
  .hesap-satir-ana .hesap-ana-bas:hover .hesap-ad { font-weight: 700; }
  .hesap-menu:hover { opacity: 1; }
  .hesap-alt-ekle:hover { background: rgba(183, 44, 40, .05); }
  .hesap-daha:hover { color: var(--vurgu); 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%; }
  /* Telefonda şerit satırı doldurur, sekmeler payı eşit böler. */
  .hesap-suzgec { flex: 1 1 100%; }
  .hesap-suzgec .secim-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); }
  .hesap-satir-alt.hesap-satir-derin .hesap-ana-bas {
    padding-left: calc(var(--bosluk) * (2 + (var(--hesap-kademe, 2) - 1) * 1.75));
  }

  /* 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; }

/* YIKICI DÜĞME · BİR DEĞİŞTİRİCİDİR, kendi başına bir düğme değil
   (2026.437). Kullanımı hep `dugme-birincil dugme-yikici` ya da
   `dugme-ikincil dugme-yikici` biçimindedir; ölçüyü, köşeyi ve ALTIN
   ÇERÇEVEYİ o taban sınıftan alır. Burada değişen yalnız RENKTİR:
   bordo yerine hata kırmızısı. Böylece "Sil" düğmesi programın diliyle
   konuşmaya devam eder ama bordo "kaydet" düğmesiyle karışmaz.
   Künye: 6-belgeler/tasarim-dili.md · "1.3 Yıkıcı düğme" */
.dugme-birincil.dugme-yikici { background: var(--hata); }
.dugme-ikincil.dugme-yikici { color: var(--metin-hata); }

@media (hover: hover) {
  .dugme-birincil.dugme-yikici:hover:not(:disabled) { background: var(--metin-hata); }
  .dugme-ikincil.dugme-yikici:hover:not(:disabled) { border-color: var(--metin-hata); }
}

/* ---------- Çoklu seçim · şerit ve sekme (2026.437) ----------
   Kullanıcının kuralı: "tüm çoklu seçim düğmeleri beyaz, basınca şu renk
   altın çerçeve gibi." Seçili renk KIRMIZI seçildi (kullanıcının kararı):
   uzaktan görünür ve düğmelerle aynı dili konuşur.

   ÇERÇEVE ŞERİDİN KENDİSİNDEDİR, sekmelerin değil: yan yana duran
   seçeneklerin her birine çerçeve konsaydı aradaki çizgiler ikiye
   katlanıp kalın bir merdiven gibi görünürdü.

   Seçili olan `aria-selected` ile söylenir, ayrı bir sınıfla değil —
   ekran okuyucu da aynı bilgiyi alsın.

   On dokuz ayrı "seçili" sınıfının yerini bu ikisi alır.
   Künye: 6-belgeler/tasarim-dili.md · "2 · Çoklu seçim" */
/* ŞERİDİN ÜYELERİ (2026.440) · ekranların kendi şerit sınıfları da
   buraya bağlandı. Sınıf ADLARI yerinde kaldı — otuz JS dosyasında
   işaretleme değiştirmek, kazancı olmayan bir risk. Değişen, GÖRÜNÜŞÜN
   NEREDEN GELDİĞİ: artık tek yerden. Bir rengi değiştirmek bir satır. */
.secim-serit,
.suzgec-grup,
.fatura-sekme,
.he-sekme,
.elk-tur-satir,
.na-gezinme,
.fatura-secim {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--yuzey);
  border: 1px solid var(--altin);
  border-radius: var(--kose-dugme);
}

/* Süzgeç şeridi satırı doldurabilir ve sığmazsa alta iner: rapor
   ekranlarında dört beş dönem çipi yan yana duruyor. */
.suzgec-grup { flex-wrap: wrap; }

.secim-sekme,
.suzgec-cip,
.fatura-sekme-dugme,
.he-sekme-dugme,
.elk-tur,
.na-gez-dugme,
.fatura-secim-dugme {
  flex: none;
  min-height: 34px;
  padding: 0 calc(var(--bosluk) * 1.75);
  border: 0;
  background: none;
  border-radius: calc(var(--kose-dugme) - 3px);
  color: var(--metin);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis) ease-out, color var(--gecis) ease-out;
}

/* SEÇİLİ · hem aria ile hem de ekranların kendi "-secili" sınıfıyla
   söylenebilir. İkisi de kabul edilir: aria erişilebilirliğin, sınıf
   da on beş ekranın bugünkü işaretlemesinin dili. */
.secim-sekme[aria-selected="true"],
.secim-sekme[aria-pressed="true"],
.suzgec-cip[aria-pressed="true"],
.cip-secili,
.he-sekme-secili,
.elk-tur-secili,
.fatura-secim-secili,
.fatura-sekme-dugme[aria-selected="true"],
.na-gez-dugme[aria-pressed="true"] {
  background: var(--vurgu);
  color: var(--yuzey);
  font-weight: 600;
}

.secim-sekme:disabled,
.suzgec-cip:disabled,
.he-sekme-dugme:disabled,
.elk-tur:disabled,
.na-gez-dugme:disabled,
.fatura-secim-dugme:disabled,
.fatura-sekme-dugme:disabled { opacity: .45; cursor: default; }

@media (hover: hover) {
  .secim-sekme:hover:not(:disabled):not([aria-selected="true"]):not([aria-pressed="true"]),
  .suzgec-cip:hover:not(:disabled):not(.cip-secili),
  .fatura-sekme-dugme:hover:not([aria-selected="true"]),
  .he-sekme-dugme:hover:not(.he-sekme-secili),
  .elk-tur:hover:not(.elk-tur-secili),
  .na-gez-dugme:hover:not([aria-pressed="true"]),
  .fatura-secim-dugme:hover:not(.fatura-secim-secili) {
    background: var(--oyuk);
  }
}

/* ---------- Ekrana özel düğmeler · görünüşü ortaktan alır ----------
   Dört düğme kendi beyaz-çerçeveli kopyasını yazıyordu; üçü altın, biri
   turuncu çerçeveliydi. Hepsi ikincil düğmedir (2026.440). */
.gs-grup-dugme,
.na-ongoru-dugme,
.fatura-oz-dugme,


@media (hover: hover) {
  .gs-grup-dugme:hover:not(:disabled),
  .na-ongoru-dugme:hover:not(:disabled),
  .fatura-oz-dugme:hover:not(:disabled),
  .gsm-secdugme:hover:not(:disabled) { border-color: var(--vurgu); }
}

/* ---------- 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(--altin);
}

.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);
  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önmez,
   solur — bekleme bilgisi yalnız harekete bırakılmaz, yazı da her zaman
   yanındadır. 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);
}

/* ---------- Dönen çember · TEK KAYNAK ---------- */
/* Programdaki bütün "bekleniyor" çemberleri budur (2026.499). Üç yerde
   çıkar: sayfa yüklenirken (durum-bekleme), iş sürerken inen örtüde
   (mesgul-kutu) ve Hesap Defteri'nin şeridinde (defter-donen). Üçü de
   NS.durum.daire() ile yazılır; ölçü dışında hiçbir farkları yoktur.

   İki halka üst üstedir: soluk bir iz (çemberin tamamı) ve onun
   üstünde dönen yay. İz olmasa yay boşlukta dönerdi ve ne kadar yol
   kaldığı hiç okunmazdı.

   Hareketin anlatımı 2-tasarim/animasyon.css · ns-daire-tur ·
   ns-daire-yay. */
.ns-daire {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}

.ns-daire-cizim {
  display: block;
  width: 100%;
  height: 100%;
  animation: ns-daire-tur 2s linear infinite;
}

.ns-daire-iz {
  fill: none;
  stroke: var(--kenar);
  stroke-width: 2.4;
}

.ns-daire-yay {
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: ns-daire-yay 1.5s ease-in-out infinite;
}

/* Hareket azaltılmışken çember YİNE DÖNER, yalnız ağır döner
   (2026.503 · kullanıcının bildirimi: "yükleme halkası yanıp sönüyor
   öyle olmasın, dönsün").

   GEÇMİŞİ: 2026.488'de dönme yerine yavaş bir soluma konmuştu. İşaret
   o zaman yanıp sönüyor gibi okundu — bekleme değil, uyarı gibi.
   Kullanıcının kararıyla dönmeye geri dönüldü: 3 sn/tur, sabit hızla,
   yayın uzunluğu sabit. Göz için yorucu olan hızlı dönme ile büyüyüp
   küçülen yaydır; ağır ve düzgün dönen bir halka değildir.

   !important ŞART: temel.css'teki genel kural bütün animasyonları
   !important ile sıfırlıyor. Seçici daha güçlü olduğu için bu satır
   onu yener, ama yalnız aynı ağırlıktayken. */
@media (prefers-reduced-motion: reduce) {
  .ns-daire-cizim {
    animation: ns-daire-tur 3s linear infinite !important;
  }

  .ns-daire-yay {
    stroke-dasharray: 26 90;
    stroke-dashoffset: -8;
    animation: none !important;
  }
}

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

/* ---------- Yükleme paneli (2026.1071) ----------
   Ekranın ortasında küçük krem kart: logo nefes alır, altında çember ve
   ne beklendiği, en altta akan bordo-altın çizgi. Dar kapta kart
   çerçevesi, logo ve çizgi gizlenir; çember ve yazı kalır. Bir an geç
   belirir. Hareket azaltılmışsa logo ve çizgi durur. */
.durum-panel {
  flex-direction: column;
  width: 100%;
  min-height: min(46vh, 360px);
  box-sizing: border-box;
  container-type: inline-size;
  /* Geç belirir (2026.1073 · "anlık bir yükleme ekranı açılıp kapanıyor,
     kötü duruyor"): 0,45 sn içinde gelen veri panel hiç görünmeden çizilir. */
  animation: yp-belir .45s ease-in .7s both;
}
.yp-kart {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(300px, 100%);
  box-sizing: border-box;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--altin, #C2A268) 45%, transparent);
  box-shadow: 0 18px 40px -22px rgba(74, 53, 36, .45), 0 2px 6px -3px rgba(74, 53, 36, .2);
}
.yp-logo { display: block; height: 46px; width: auto; animation: yp-nefes 1.8s ease-in-out infinite; }
.yp-satir { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.yp-cubuk {
  position: relative; display: block; width: 100%; height: 3px; overflow: hidden;
  border-radius: 3px; background: color-mix(in srgb, var(--kenar) 45%, transparent);
}
.yp-cubuk i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vurgu, #8F2D22), var(--altin, #C2A268));
  animation: yp-ak 1.2s ease-in-out infinite;
}
@keyframes yp-ak { 0% { transform: translateX(-100%); } 100% { transform: translateX(265%); } }
@keyframes yp-nefes { 0%, 100% { opacity: .75; transform: scale(.98); } 50% { opacity: 1; transform: scale(1); } }
@keyframes yp-belir { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@container (max-width: 280px) {
  .yp-kart { width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  .yp-logo, .yp-cubuk { display: none; }
}
td .durum-panel, .pencere .durum-panel, .akis-panel .durum-panel { min-height: 0; }
td .yp-kart, .akis-panel .yp-kart { width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
td .yp-logo, td .yp-cubuk, .akis-panel .yp-logo, .akis-panel .yp-cubuk { display: none; }
@media (prefers-reduced-motion: reduce) {
  .yp-logo, .yp-cubuk i, .durum-panel { animation: none; }
}

/* ---------- Üst yükleme çubuğu (2026.1068) ----------
   Sunucuya istek sürerken ekranın en tepesinde akan bordo-altın çizgi
   (durum.js · NS.durum.cubuk). */
#yukleme-cubugu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 10000;
  height: 3px; pointer-events: none;
  opacity: 0; transition: opacity .25s ease-out;
  background: linear-gradient(90deg, transparent 0%, var(--vurgu, #8F2D22) 30%, var(--altin, #C2A268) 50%, var(--vurgu, #8F2D22) 70%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: yc-ak 1.1s ease-in-out infinite;
}
#yukleme-cubugu.yc-acik { opacity: 1; }
@keyframes yc-ak { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { #yukleme-cubugu { animation-duration: 3s; } }

/* ---------- İş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));
  /* PENCERENİN ÜSTÜNDE DURUR (2026.451). 56'da kalınca panel perdesinin
     (60) altında kalıyor ve panel açıkken çıkan bildirim hiç
     görünmüyordu: kullanıcı işin neden olmadığını göremiyordu. */
  z-index: 70;
  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);
}

/* ---------- 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;
}

/* SEÇİLİ SATIR FAREYLE DEĞİŞMEZ (2026.509 · kullanıcının bildirimi:
   "fatura aktarımdaki seçiciye bastığımızda seçili olanın üstüne
   gelince dolgu değişiyor, normalde öyle bir ayar yok").

   Seçili satır zaten kırmızıdır; üstüne gelince zemini değişirse
   kullanıcı bir an "seçim mi değişti?" diye bakar. Kural tek: SEÇİLİ
   OLANIN GÖRÜNÜŞÜ FAREYLE DEĞİŞMEZ. Bu yüzden vurgu seçili satırı
   atlar. */
@media (hover: hover) {
  .sec-satir:hover:not(.sec-satir-secili) { 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;
}

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

.he-sekme-secili {
  opacity: 1;
}

/* 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(--ikinci);
  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(--ikinci);
  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:not(.tkv-secili) { 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(58, 42, 29, .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(58, 42, 29, .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(58, 42, 29, .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.
   HALKA ALTINDIR (2026.437): kırmızı halka "hata" gibi okunuyordu ve
   arama çubuğu ile form kutusu iki ayrı renkte parlıyordu. Tek işaret,
   her yerde aynı (6-belgeler/tasarim-dili.md · "3 · Form alanları"). */
.alan-kutu:focus,
.tablo-giris-kutu:focus {
  border: 1px solid var(--altin);
  padding-left: 12px;
  padding-right: 12px;
  outline: none;
  background: var(--yuzey);
  box-shadow:
    0 0 0 3px var(--altin-soluk),
    inset 0 1px 2px rgba(58, 42, 29, .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);
}

/* 2026.509'A KADAR burada şöyle bir kural vardı:
       .sec-satir-secili:hover, .tkv-secili:hover {
         background: var(--vurgu-koyu); color: var(--yuzey);
       }
   Daha eski bir kusuru onarıyordu: seçili satırın üstüne gelince
   yukarıdaki genel vurgu onu açık griye çeviriyor, beyaz yazı
   okunmaz oluyordu. O gün çözüm "bari bir ton koyulaşsın" olmuştu.

   Doğrusu vurguyu seçili satıra hiç uğratmamaktı; yukarıdaki :not()
   bunu yapıyor. Seçilinin görünüşü fareyle değişmez. */

/* Klavye imleci seçili satırın üstündeyken de dolgu değişmez
   (2026.509). Yerini iç halka söyler: kırmızının içinde açık bir çizgi.
   Fare ile klavye aynı kurala uyar, ikisi ayrı davranmaz. */
.sec-satir-secili.sec-satir-imlec {
  box-shadow: inset 0 0 0 2px 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; }

/* =====================================================================
   REFERANS GÖRSELE UYARLAMA · 2026.308
   Kartın çerçevesi ve süsleme katmanı. Renk ve ölçü buraya yazılmaz,
   hepsi 2-tasarim/degiskenler.css'ten okunur.
   Kaynak: 6-belgeler/tasarim.md · "İstanbul dili"
   ===================================================================== */

/* ÇİFT ÇİZGİ ÇERÇEVE. Referans görseldeki panel tek bir çizgiyle değil,
   dışta altın tel ve içeride ondan bir tık içeride ikinci bir soluk telle
   çerçeveleniyor. İkinci çizgi kaplama katmanı olarak çizilir: ayrı bir
   HTML öğesi gerekmez, hiçbir ekran dosyası değişmez.

   pointer-events yok: kaplama tıklamayı yutmaz, altındaki düğmeler
   çalışmaya devam eder. */
.kart::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--kose-kart) - 3px);
  border: var(--kart-tel);
  pointer-events: none;
}

/* Süslü ayraç · başlığın altına düşen ince altın çizgi ve ortasında bir
   baklava. Referans görselde sayfa adının altında duruyor. Yalnız CSS:
   iki çizgi bir döndürülmüş kareyle ortada buluşur. */
.suslu-ayrac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk);
  margin: calc(var(--bosluk) * 1.25) 0 0;
}

.suslu-ayrac::before,
.suslu-ayrac::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--altin));
}

.suslu-ayrac::after { background: linear-gradient(90deg, var(--altin), transparent); }

.suslu-ayrac-tas {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--altin);
  border-radius: 1px;
}

/* =====================================================================
   HESAPLARIN BASİT GÖRÜNÜMÜ · kare kartlar (2026.402)
   Kullanıcının isteği: "hesaplarda basit görünümümüz olacak, varsayılan
   olarak bu açılacak. Kare kart şeklinde kullanıcının görmek istediği
   ana hesapları gösterecek. Basınca o hesabın defterine gidecek."
   Kaynak: 4-ekranlar/3-tanimlar/hesaplar.js
   ===================================================================== */

/* Görünüm şeridi · sayfanın TAMAMINI değiştiren denetim, kendi
   satırında ve sağa yaslı durur (2026.435 · kullanıcının bildirimi:
   "düğmenin yerleşimi pek iyi değil"). Sola yapışıkken altındaki
   listeyle aynı hizada başlıyor ve listenin bir parçası gibi
   görünüyordu.

   ŞERİDİN GÖRÜNÜŞÜ ARTIK ORTAK (2026.437): .secim-serit + .secim-sekme
   (6-belgeler/tasarim-dili.md · "2 · Çoklu seçim"). Buradaki kural
   yalnız YERLEŞİM. Eskiden hesap-gorunum / hesap-gorunum-sekme diye iki
   kopya vardı ve on dokuz ekranın her biri kendi seçili rengini
   yazıyordu. */
.hesap-gorunum-serit {
  display: flex;
  justify-content: flex-end;
  padding: calc(var(--bosluk) * 1.5) calc(var(--bosluk) * 2.5) 0;
}

/* --- Kart ızgarası ---
   Kart KAREDİR (aspect-ratio: 1). Kare, listeden en belirgin farktır:
   göz bir satır değil bir nesne görür. Genişlik esner, dar ekranda iki
   sütuna iner; sütun sayısı elle verilmez, kartın en küçük genişliği
   verilir ve tarayıcı sığdığı kadarını dizer. */
.hk-basi {
  display: flex;
  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;
}

.hk-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.5);
}

/* Yuva kartı ve kaldırma düğmesini birlikte tutar: düğme kartın İÇİNDE
   değil üstündedir — iç içe düğme olmaz ve ✕'e basmak defteri açmaz. */
.hk-yuva { position: relative; }

.hk-kart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--bosluk) / 2);
  width: 100%;
  aspect-ratio: 1;
  padding: calc(var(--bosluk) * 1.75);
  background: var(--kart-yuzey);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--gecis) ease-out, box-shadow var(--gecis) ease-out;
}

@media (hover: hover) {
  .hk-kart:hover { border-color: var(--vurgu); }
}

.hk-plaka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--kose-kutu);
}

/* Görselli kart · plaka yerine hesabın kendi logosu (2026.414).
   Logo kartın ORTASINDA ve büyük durur, yazılar altında küçülür
   (kullanıcının isteği: "görselleri ortala ve büyüt, metinler altta ve
   küçük olsun"). Logoya sabit bir ölçü verilmez: artan boşluğun hepsini
   kaplar (flex: 1) ve kendi oranınca sığar. Böylece Ziraat gibi iki
   katlı logo da Garanti gibi geniş logo da aynı kartta olabildiğince
   büyük çıkar, kare bozulmaz. */
.hk-gorsel {
  /* Taban ÖLÇÜSÜ sıfırdır (flex-basis: 0), yüksekliği artan boşluk
     belirler. "auto" olsaydı tarayıcı görselin kendi yüksekliğini taban
     sayar, dar ve uzun bir logo (TL işareti) kartı taşırırdı. */
  flex: 1 1 0;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Yazılar logonun altında, ortalı ve küçük: kartta asıl söz logonun,
   kod ile ad onu doğrulayan künyedir. Tutar kartın en altında kalır ama
   artık başlık boyunda değil — logo ondan daha yüksek sesle konuşur. */
.hk-kart-gorselli {
  align-items: center;
  text-align: center;
  gap: calc(var(--bosluk) / 4);
}

.hk-kart-gorselli .hk-kod { margin-top: calc(var(--bosluk) / 2); }

.hk-kart-gorselli .hk-ad {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.hk-kart-gorselli .hk-tutar {
  margin-top: 0;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

/* Kod küçük bir künyedir: kartın kim olduğunu söyler ama adı
   bastırmaz. */
.hk-kod {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .04em;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Ad iki satıra kadar iner, taşan kısım üç noktayla biter: uzun hesap
   adları kartı büyütmez, kare bozulmaz. */
.hk-ad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
}

/* Tutar kartın DİBİNDE durur: bütün kartlarda aynı yükseklikte,
   göz soldan sağa tarayınca rakamlar bir hizada okunur. */
.hk-tutar {
  margin-top: auto;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.hk-kart .yer-tire { margin-top: auto; }

.hk-not {
  margin-top: auto;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
}

/* Cariler kartı ve ekleme kutusu bir hesap değildir: tutar taşımazlar,
   ne yapacaklarını yazıyla söylerler. Ekleme kutusu kesik çerçeveyle
   "burası boş bir yer" der. */
.hk-kart-ekle {
  background: var(--oyuk);
  border-style: dashed;
  box-shadow: none;
}

.hk-plaka-bos {
  background: rgba(0, 0, 0, .05);
  color: var(--gri-vurgu);
}

/* Kaldırma düğmesi · yalnız düzen kipinde çizilir. */
.hk-cikar {
  position: absolute;
  top: calc(var(--bosluk) * -0.75);
  right: calc(var(--bosluk) * -0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--vurgu);
  color: var(--yuzey);
  border-radius: 50%;
  box-shadow: var(--golge);
  cursor: pointer;
}

@media (hover: hover) {
  .hk-cikar:hover { filter: brightness(1.1); }
}

/* --- Hesap arama paneli · kart eklemede ve Cariler kartında --- */
.hk-ara-kutu { width: 100%; }

.hk-sonuc {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  margin-top: var(--bosluk);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
  background: var(--yuzey);
}

.hk-sonuc-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
  text-align: left;
  cursor: pointer;
}

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

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

.hk-sonuc-plaka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--kose-kutu);
}

.hk-sonuc-kod {
  flex: none;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.hk-sonuc-ad {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.hk-sonuc-bos {
  padding: calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

/* Telefonda kartlar iki sütuna iner ve payı daralır. */
@media (max-width: 640px) {
  .hesap-gorunum-serit { padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) * 2) 0; }
  .hk-basi { padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2) 0; }
  /* Telefonda sütun sayısı ÖLÇÜYE BIRAKILMAZ, ikidir. auto-fill bir
     hesaptır ve kâğıdın payı çıkınca elde 274px kalıyordu: 136px'lik
     iki kart altı piksel farkla sığmayıp tek sütuna düşüyordu. İki
     sütun telefonda doğru olan; kart biraz daralsın. */
  .hk-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk);
    padding: calc(var(--bosluk) * 2);
  }
  .hk-kart { padding: calc(var(--bosluk) * 1.25); }
  .hk-plaka { width: 32px; height: 32px; }
}

/* Panelin yardım cümlesi arama kutusuna yapışmasın. */
.hk-ara-kutu + .alan-yardim { margin-top: calc(var(--bosluk) / 1.5); }

/* Gider grubu simgesi (2026.988) · 700'ün doğrudan altındaki gruplar
   kendi simgesini taşır; soluk gri değil vurgu renginde, biraz büyük. */
.hesap-gider-simge {
  color: var(--vurgu, #8B1E2D);
  opacity: .85;
}

/* Banka simgesi (2026.989) · logonun işaret kısmı, soluklaşmadan. */
.hesap-banka-simge { opacity: 1; }
.hesap-banka-simge img { width: 20px; height: 20px; object-fit: contain; display: block; }