/* Temel: sıfırlama, yazı, zemin dokusu, ortak yardımcılar.
   Renk ve ölçü burada tanımlanmaz, degiskenler.css'ten okunur. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

/* Kaydırma çubuğunun yeri hep ayrılır. Ayrılmasaydı uzun bir sayfadan
   kısa bir sayfaya geçerken çubuk kaybolur, bütün içerik 15px sağa
   kayardı; her sayfa geçişinde ekran bir kere sıçrıyordu. Çubuk çıksa da
   çıkmasa da yer aynı kalır (6-belgeler/NIZAM.md · "gösterilen şey sonradan başka
   bir şeye dönüşmez"). */
html { scrollbar-gutter: stable; }

/* ---- Kaydırma çubuğu · her yerde aynı (2026.367) ----
   Kullanıcının isteği: "kaydırma kısmının tasarımı daha iyi olsun, her
   yerdekini güncelle."

   Tarayıcının kendi gri çubuğu kâğıt yüzeyin üstünde bir makine
   parçası gibi duruyordu: hesap listesinin kenarında kalın, mavi-gri
   bir şerit. Artık defterin kendi teli: ince, yuvarlak uçlu ve
   arkasındaki yüzeyle aynı sıcaklıkta.

   TEK YERDE DURUR. Kural kök öğeye yazılır; scrollbar-width ve
   scrollbar-color miras alındığı için sayfa, panel, açılan liste ve
   tablo — kaydıran her kap aynı çubuğu kullanır. Bunu ekran ekran
   yazmak, bir gün birinin unutulması demekti.

   İki yazım da gerekir: Firefox ve yeni Chrome scrollbar-width/color'ı,
   Safari ve eski Chrome ::-webkit-scrollbar'ı okur.

   İnce ucu "border: 3px solid transparent + background-clip:
   content-box" veriyor: çubuk 10px yer tutar (parmağın ve farenin
   tutması için), boyanan kısım 4px kalır. Genişliği KÜÇÜLTMEK yerine
   içini daraltmak, dokunma hedefini bozmadan inceltmenin yolu. */
:root { scrollbar-color: var(--defter-tel) transparent; }

/* scrollbar-color MİRAS ALINIR, scrollbar-width ALINMAZ: köke yazmak
   yetmiyor, kaydıran her kaba ayrı ayrı düşmesi gerekiyor. Açılan hesap
   listesi kökten yalnız rengi alıyor, kalınlığı tarayıcının kendi
   ölçüsünde kalıyordu. */
* { scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-color: var(--defter-tel);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--defter-koyu); }

/* İki çubuk birleşince kalan kare: boş bırakılır, gri bir leke
   kalmasın. */
::-webkit-scrollbar-corner { background: transparent; }

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-metin);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a { color: var(--vurgu); }

[hidden] { display: none !important; }

/* ---- Zemin katmanı ----
   Şablonda zemin düz renktir: doku, desen ya da arka plan görseli yok.
   Öğe yerinde duruyor (index.html · .zemin-doku) ki bir firmaya kopya
   çıkarılırken istenirse buraya kendi zemini verilebilsin. */
/* KATMAN İÇERİĞİN ALTINDA (2026.399 · kullanıcının bildirimi: "yazılar
   okunmuyor"). z-index 0'daki KONUMLANDIRILMIŞ bir katman, boyama
   sırasında konumlandırılmamış içeriğin hem zeminini hem YAZISINI
   örtüyor; sayfanın altına düşen kutularda İstanbul silueti yazının
   önüne geçiyordu. -1 ile gerçekten arkaya iner. Gövdenin kendi zemini
   de aynı renk olduğu için altından boşluk görünmez. */
.zemin-doku {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--zemin);
}

/* ---- Kağıt greni · kart yüzeylerine değil, arkalarındaki tek kapsayıcıya ---- */
.gren {
  background-image: radial-gradient(var(--doku-gren) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* ---- Yazı kademeleri ---- */
.y-h1 {
  font-family: var(--yazi-baslik);
  font-size: var(--h1-boy);
  line-height: var(--h1-satir);
  font-weight: 600;
}

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

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

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

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

/* Parasal değerler: basamaklar alt alta oturur. */
.y-para {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* Ekranda görünmez, ekran okuyucuda okunur. */
.gizli-baslik {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Soluk zeminli renkli plaka ----
   Bir simgenin arkasında duran yumuşak renk lekesi. Renk anlam taşır ama
   TEK BAŞINA taşımaz: yanındaki yazı da aynı şeyi söyler. Dört renk
   vardır ve dördü de künyedeki paletten gelir (6-belgeler/tasarim.md):
     yeşil  para giren, gelir
     mavi   banka, alacak
     gri    bekleyen, stok
     kırmızı  para çıkan, borç, gider
   İçindeki simge tek renk çizimdir (3-cekirdek/2-arayuz/simgeler.js · NS.simgeTek):
   currentColor aldığı için plakanın rengine döner. */
.renk-yesil { background: rgba(47, 125, 83, .13); color: var(--metin-basari); }
.renk-mavi  { background: rgba(47, 111, 176, .12); color: var(--metin-bilgi); }
.renk-gri { background: rgba(110, 116, 124, .12); color: var(--gri-vurgu); }
.renk-kirmizi { background: rgba(183, 44, 40, .10); color: var(--vurgu); }

/* ---- Sayı gelmeden yerinde duran tire ----
   Tutarla aynı punto ve aynı satır yüksekliği, yalnız soluk. Sayı gelince
   kutu ne kayar ne büyür (6-belgeler/NIZAM.md · "gösterilen şey sonradan başka bir
   şeye dönüşmez"). */
.yer-tire { opacity: .3; }

/* ---- Simge ve boş durum görseli · iki katman, 1.8px çizgi ---- */
.simge, .gorsel {
  flex: none;
  stroke-width: var(--cizgi-simge);
}

.gri-kat { stroke: var(--gri-vurgu); }

/* ---- Dokunma hedefi · basılan alan simgeden büyüktür ---- */
.dokunma-alani { position: relative; }
.dokunma-alani::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--dokunma));
  height: max(100%, var(--dokunma));
  transform: translate(-50%, -50%);
}

/* ---- Basma tepkisi · küçülme, karartma değil ---- */
/* Oran öğenin boyuna göre seçilir: büyük kartta az, küçük simge
   düğmesinde çok. Kullanılamaz durumdaki öğe hiç küçülmez — tepki
   vermek, çalıştığını söylemektir. */
.bas-buyuk:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.bas-orta:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.bas-kucuk:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.94); }

.bas-buyuk, .bas-orta, .bas-kucuk {
  transition: transform var(--basma) ease-out;
}

.bas-buyuk:disabled, .bas-orta:disabled, .bas-kucuk:disabled,
.bas-buyuk[aria-disabled="true"], .bas-orta[aria-disabled="true"],
.bas-kucuk[aria-disabled="true"] { transform: none; }

/* Klavyeyle gezinende halka görünür, parmakla basanda kalmaz.
   HALKA ALTINDIR (2026.438 · 6-belgeler/tasarim-dili.md): kırmızı halka
   "hata" diye okunuyordu ve kırmızı zaten düğmelerin rengi. Koyu altın
   seçildi — açık altın krem zeminde yeterince görünmüyor. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--altin-koyu);
  outline-offset: 2px;
}

/* ---- Açılan yüzeyler solarak gelir ---- */
/* SAYFANIN KENDİSİ ARTIK SOLMAZ (2026.748 · kabuk.js · sayfayiCiz):
   kullanıcı görsellerin ve ekranın belirerek çıkmasını istemedi. */
/* Tek hareket budur: soluklaşma. Kayma, çevirme, büyütme yoktur; üst çubuk
   ve alt menü geçişe katılmaz, yerlerinde kalır (6-belgeler/tasarim.md ·
   "Animasyon"). Açılan yüzeyler — pencere, panel, şerit — aynı sınıfı
   kullanır: uygulamada tek bir açılma hareketi vardır. */

.solarak-gel { animation: ns-sol var(--gecis) ease-out both; }

/* ---- Alttan çıkan kartlar · kayarak gelir ---- */
/* Uyarı ve onay mesajları ekranın altından kayan bir kartla belirir
   (6-belgeler/NIZAM.md · "Bildirim · Uyarılar alttan kartla çıkar"). Kayma yalnız
   ekranın dibinden çıkan üç yüzeye verilir — işlem sonucu bildirimi, geri
   alma şeridi ve güncelleme kartı; sayfa geçişi, pencereler ve paneller
   solarak gelmeye devam eder (6-belgeler/NIZAM.md · "Bu projeye özel"). */

.alttan-gel { animation: ns-alttan var(--gecis) ease-out both; }

/* ---- Hareket azaltma ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* BASMA TEPKİSİ AZALTMADA DA KALIR (2026.511). Eskiden burada
     "transform: none" yazıyordu ve hareketi azaltılmış kullanıcı
     bastığı düğmeden hiçbir cevap alamıyordu — bastı mı basmadı mı
     belli olmuyordu.

     Saklanacak bir hareket yok: yukarıdaki genel kural geçiş süresini
     zaten sıfırlıyor, yani düğme küçülürken YOL ALMIYOR, bir anda
     küçülmüş oluyor. Baş dönmesi yapan yol alan harekettir.

     Aynı gerekçe menü satırının kalkması için de geçerli
     (2-tasarim/kabuk.css · .yan-satir:hover) ve dashboard kartı
     baştan beri böyle davranıyordu. */

  /* Geçiş anlık olur: soluklaşma da, kayma da uygulanmaz; yüzey doğrudan
     yerinde belirir. */
  .solarak-gel, .alttan-gel { animation: none; }

  html { scroll-behavior: auto; }
}

/* =====================================================================
   REFERANS GÖRSELE UYARLAMA · 2026.308
   Sayfanın kâğıdı: krem zemin, üstünde çok hafif bir gren ve en altta
   Zemin görseli (--zemin-gorsel · ana projede boş).
   ===================================================================== */
.zemin-doku {
  background-image: var(--zemin-gorsel, none);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

/* Siluet kâğıdın bir parçası gibi soluk durur; okunan hiçbir şeyin
   önüne geçmez. Çizimin gücü BU TEK SAYIDAN ayarlanır — dosyayı yeniden
   üretmek gerekmez. */
.zemin-doku { opacity: .45; }

/* ==== ETKİLEŞİM ANİMASYONLARI (2026.1465 · 3-cekirdek/2-arayuz/etkilesim.js) ====
   1 · yeni / değişen öğe yanar · 2 · onay kartı · 3 · silinen kayarak çıkar.
   Renk programın başarı yeşili; son karede renk verilmez, öğe kendi
   zeminine döner. */
@keyframes ns-yanar {
  0%, 55% { background-color: color-mix(in srgb, var(--basari) 15%, transparent); box-shadow: inset 3px 0 0 var(--basari); }
}
.ns-yanar:not(tr) { animation: ns-yanar 3.2s ease-out both; animation-delay: var(--ns-yanar-gecikme, 0s); }
tr.ns-yanar > td { animation: ns-yanar-hucre 3.2s ease-out both; animation-delay: var(--ns-yanar-gecikme, 0s); }
tr.ns-yanar > td:first-child { animation-name: ns-yanar; }
@keyframes ns-yanar-hucre {
  0%, 55% { background-color: color-mix(in srgb, var(--basari) 15%, transparent); }
}
.ns-cikiyor { transition: transform .25s ease-in, opacity .25s ease-in !important; transform: translateX(28px) !important; opacity: 0 !important; pointer-events: none !important; }

/* Onay kartı · programın bildirimi; yaylanarak girer, tik çizilir. */
@keyframes ns-yay { 0% { transform: translateY(14px) scale(.96); opacity: 0; } 70% { transform: translateY(-2px) scale(1.01); opacity: 1; } 100% { transform: none; } }
.ns-onay .bildirim-kart { animation: ns-yay .42s ease-out both; cursor: pointer; }
.ns-tik { flex: none; fill: none; stroke: var(--basari); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ns-tik circle { opacity: .35; }
.ns-tik path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: ns-tik-ciz .4s .18s ease-out forwards; stroke-width: 2.4; }
@keyframes ns-tik-ciz { to { stroke-dashoffset: 0; } }
/* Pencere açıkken kart tepeye: formun düğmelerini örtmez. */
.pencere-acik .islem-sonuc { top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; }

/* Hareketi azalt · hareket yok; renk ve yazı kalır. */
@media (prefers-reduced-motion: reduce) {
  .ns-yanar:not(tr), tr.ns-yanar > td, tr.ns-yanar > td:first-child { animation: none; background-color: color-mix(in srgb, var(--basari) 15%, transparent); }
  .ns-yanar:not(tr), tr.ns-yanar > td:first-child { box-shadow: inset 3px 0 0 var(--basari); }
  .ns-cikiyor { transition: none !important; transform: none !important; }
  .ns-onay .bildirim-kart { animation: none; }
  .ns-tik path { animation: none; stroke-dashoffset: 0; }
}