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

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. */
.zemin-doku {
  position: fixed;
  inset: 0;
  z-index: 0;
  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. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
}

/* ---- Sayfa geçişi · yeni ekran solarak gelir ---- */
/* 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;
  }
  .bas-buyuk:active, .bas-orta:active, .bas-kucuk:active,
  .tablo-satir:active { transform: none; }

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