/* BİLEŞENLER: görünümün yapısı. Değerler tema.css'teki anahtarlardan gelir;
   buraya çıplak renk, piksel ya da font adı yazma. Kurallar: Design.md (gölge yok, ince çizgi,
   tam yuvarlak düğme, büyük harf + geniş aralıklı başlık yok, renk yalnızca anlam için). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Sayfa kısa kalsa da belge ekran boyunda: telefonda alttaki sabit çubuk kısa sayfada yukarı kaymasın */
html { min-height: 100%; background: var(--zemin); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--zemin);
  color: var(--yazi);
  font: var(--yazi-boyut) / var(--satir-araligi) var(--font);
}
main {
  max-width: var(--sayfa-genislik); margin: 0 auto;
  /* Ana ekrandan tam ekran açılınca çentik ve alttaki çubuk içeriğin üstüne binmesin */
  padding: calc(var(--bosluk-5) + env(safe-area-inset-top, 0px)) var(--kenar)
    calc(var(--sekme-cubugu) + var(--bosluk-6) + env(safe-area-inset-bottom, 0px));
}

h1 { font-size: var(--yazi-baslik); font-weight: var(--kalin); letter-spacing: var(--sik); margin: 0; }
h2 { font-size: var(--yazi-alt-baslik); font-weight: var(--kalin); letter-spacing: var(--sik); margin: 0; overflow-wrap: anywhere; }
h3 { font-size: var(--yazi-orta); font-weight: var(--orta-kalin); color: var(--soluk); margin: var(--bosluk-5) 0 var(--bosluk-2); }
.kucuk { color: var(--soluk); font-size: var(--yazi-kucuk); }

/* Üst çubuk: başlık, test etiketi, tema düğmesi */
.ust { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); margin-bottom: var(--bosluk-3); }
.ust-sag { display: flex; align-items: center; gap: var(--bosluk-2); }
/* Buluttaki giriş ekranı */
.giris-formu { display: grid; gap: var(--bosluk-2); }
.giris-formu p { margin: 0; }
.giris-hata { color: var(--danger); }
.giris-karti { display: grid; justify-items: center; text-align: center; gap: var(--bosluk-2); padding-block: var(--bosluk-6); }
.giris-karti p { margin: 0; }
.giris-simge { width: var(--simge-buyuk); height: var(--simge-buyuk); }
.giris-davet { background: var(--zemin); border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose); padding: var(--bosluk-3); }
/* Google düğmesi: Google'ın kurallarına göre logo değişmeden, yanında "Google ile …" yazısı */
.google-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  min-height: var(--kontrol-yukseklik); width: 100%; max-width: 320px; margin-top: var(--bosluk-3);
  padding: 0 var(--bosluk-4); border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-tam);
  background: var(--kart); color: var(--yazi); font-weight: var(--orta-kalin); text-decoration: none;
}
.google-dugme:focus-visible { outline: var(--odak-kalinlik) solid var(--vurgu); outline-offset: 2px; }
/* Sayfa sonu: kayıt sayısı ve Excel'le tutup tutmadığı */
.ayna-bilgisi { margin-top: var(--bosluk-5); text-align: center; }
/* Excel'de tutarı boş bırakılmış kayıt: satırda ve ay başlığında */
.bos-tutar { display: inline-flex; align-items: center; gap: var(--bosluk-1); color: var(--uyari-renk); font-size: var(--yazi-kucuk); white-space: nowrap; }

.etiket {
  display: inline-flex; align-items: center; gap: var(--bosluk-1); margin-left: var(--bosluk-2);
  padding: 0 var(--bosluk-2); border-radius: var(--kose-tam); background: var(--kart-2);
  font-size: var(--yazi-kucuk); font-weight: var(--orta-kalin); color: var(--yazi);
}
/* Durum yalnızca küçük renkli nokta ile (dolgu yok) */
.nokta { width: var(--bosluk-2); height: var(--bosluk-2); border-radius: var(--kose-tam); background: var(--soluk); flex: none; }
.etiket.test .nokta, .bildirim.uyari::before { background: var(--uyari-renk); }

.kart {
  background: var(--kart); border: var(--cizgi-kalinlik) solid var(--cizgi);
  border-radius: var(--kose); padding: var(--bosluk-4); margin-bottom: var(--bosluk-4);
}

.bildirim {
  display: flex; gap: var(--bosluk-2); align-items: baseline;
  padding: var(--bosluk-3) var(--bosluk-4); margin: var(--bosluk-3) 0;
  background: var(--kart); border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
}
.bildirim::before {
  content: ""; flex: none; width: var(--bosluk-2); height: var(--bosluk-2);
  border-radius: var(--kose-tam); background: var(--soluk); transform: translateY(calc(-1 * var(--cizgi-kalinlik)));
}
.bildirim.uyari { border-color: var(--uyari-renk); }
.bildirim.hata { border-color: var(--hata-renk); }
.bildirim.hata::before { background: var(--hata-renk); }
.bildirim.tamam::before { background: var(--olumlu); }
.bildirim button { margin-left: auto; }

.sayilar { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); margin: var(--bosluk-4) 0 var(--bosluk-1); }
.sayi {
  background: var(--kart); border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
  padding: var(--bosluk-3) var(--bosluk-4); min-width: var(--sayi-kutusu-en-az);
}
.sayi b {
  display: block; font-size: var(--yazi-sayi); font-weight: var(--kalin);
  letter-spacing: var(--cok-sik); font-variant-numeric: tabular-nums;
}
.sayi span { color: var(--soluk); font-size: var(--yazi-orta); }
/* Üç kutu dar ekranda da yan yana (ör. Gider / Gelir / Birikim) */
.sayilar.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sayilar.uclu .sayi { min-width: 0; padding: var(--bosluk-3); }
.sayilar.uclu .sayi b { font-size: var(--yazi-boyut); letter-spacing: var(--sik); overflow-wrap: anywhere; }

.simge {
  width: var(--simge-boyut); height: var(--simge-boyut); display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--simge-cizgi);
  stroke-linecap: round; stroke-linejoin: round;
}
.simge-orta { width: var(--simge-orta); height: var(--simge-orta); }
.simge-buyuk { width: var(--simge-buyuk); height: var(--simge-buyuk); }

/* Ekstre yükleme alanı */
.birakma {
  display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-5); margin-bottom: var(--bosluk-4); color: var(--soluk);
  border: var(--cizgi-kalinlik) dashed var(--cizgi); border-radius: var(--kose);
}
.birakma.uzerinde { border-color: var(--vurgu); color: var(--yazi); background: var(--kart); }
.birakma-dugmeler { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; justify-content: center; }

.kaydir { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left; padding: var(--bosluk-2) var(--bosluk-3);
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi); white-space: nowrap;
}
th { font-size: var(--yazi-kucuk); font-weight: var(--orta-kalin); color: var(--soluk); }
.tutar { text-align: right; font-variant-numeric: tabular-nums; }
td.aciklama { white-space: normal; min-width: var(--aciklama-en-az); }
/* Düzeltme kolonu: tablo dar pencerede yana kaysa da sağ kenarda görünür kalır */
.islem { text-align: right; position: sticky; right: 0; background: var(--kart); }

details { margin-top: var(--bosluk-4); }
/* Açılıp kapanan başlık: küçük ok sağda; kapalıyken aşağı, açıkken yukarı (yana bakan ok yok) */
summary {
  cursor: pointer; color: var(--soluk); list-style: none;
  display: flex; align-items: center; gap: var(--bosluk-2);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; width: var(--bosluk-2); height: var(--bosluk-2);
  border-right: var(--odak-kalinlik) solid currentColor; border-bottom: var(--odak-kalinlik) solid currentColor;
  transform: translateY(calc(-1 * var(--bosluk-1) / 2)) rotate(45deg);
}
details[open] > summary::after { transform: translateY(calc(var(--bosluk-1) / 2)) rotate(-135deg); }

button, input, select { font: inherit; color: inherit; }
/* iPhone 16 px'ten küçük yazı alanına dokununca sayfayı yakınlaştırıyor (2026-11-06, Hedef ekle'de görüldü) */
input, select, textarea { font-size: var(--yazi-giris); }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-4);
  font-weight: var(--orta-kalin); border: var(--cizgi-kalinlik) solid var(--vurgu);
  border-radius: var(--kose-tam); background: var(--vurgu); color: var(--vurgu-yazi); cursor: pointer;
}
button.ikincil { background: transparent; color: var(--yazi); border-color: var(--cizgi); }
button.yalin { background: transparent; color: var(--soluk); border-color: transparent; padding: 0 var(--bosluk-2); }
button.yalin:hover { color: var(--yazi); }
button.kalem { min-height: auto; padding: var(--bosluk-1) var(--bosluk-3); }
button:disabled { opacity: var(--pasif-saydamlik); cursor: default; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: var(--odak-kalinlik) solid var(--vurgu); outline-offset: var(--odak-kalinlik);
}
.eylem { margin-top: var(--bosluk-5); display: flex; align-items: center; gap: var(--bosluk-3); flex-wrap: wrap; }

/* Bölmeli seçici: tek yuvarlak çerçeve içinde seçenekler; seçili olan metin rengiyle dolu */
.bolmeli {
  display: inline-flex; padding: var(--bosluk-1); gap: var(--bosluk-1);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-tam);
}
.bolmeli button {
  min-height: auto; padding: var(--bosluk-1) var(--bosluk-4);
  background: transparent; color: var(--soluk); border-color: transparent;
}
.bolmeli button[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); }

/* Pencere (düzeltme, elle giriş). Dar ekranda alttan açılan panel. */
dialog {
  width: min(var(--pencere-genislik), 100% - 2 * var(--kenar));
  background: var(--kart); color: var(--yazi); border: var(--cizgi-kalinlik) solid var(--cizgi);
  border-radius: var(--kose); padding: var(--bosluk-5); box-shadow: var(--golge);
}
dialog::backdrop { background: var(--perde); }
/* Pencere açıkken arkadaki sayfa kaymasın: iPhone'da parmak pencerenin değil sayfanın kaydırmasını yürütüyordu (2026-11-06) */
:root:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
@media (max-width: 600px) {
  dialog.panel {
    width: 100%; max-width: 100%; margin: 0; border-bottom: 0;
    border-radius: var(--kose) var(--kose) 0 0;
    /* Görünür alanın altına yaslı (sekmeler.js gorunurAlanIzle): klavye açılınca onun üstünde durur, boyu görünür alanı
       aşmaz, içi kayar. Değer yoksa ekranın altı. */
    top: var(--gorunur-alt, 100dvh); bottom: auto; transform: translateY(-100%);
    max-height: calc(var(--gorunur-yukseklik, 100dvh) - var(--bosluk-7));
  }
}
.alan { display: block; margin-top: var(--bosluk-4); }
.alan > span, fieldset legend { display: block; font-weight: var(--orta-kalin); margin-bottom: var(--bosluk-1); }
.alan input:not([type="checkbox"], [type="radio"]), .alan select {
  width: 100%; min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-3); background: var(--zemin);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
}
.alan input.tutar-alani { font-variant-numeric: tabular-nums; }
.alan input:disabled { color: var(--soluk); }
fieldset { border: 0; padding: 0; margin: var(--bosluk-4) 0 0; }
.secenek { display: flex; gap: var(--bosluk-2); align-items: baseline; margin-top: var(--bosluk-1); }

/* Sekmeler: altta sabit çubuk, üç sekme */
.sekmeler {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: center; gap: var(--bosluk-2);
  height: calc(var(--sekme-cubugu) + env(safe-area-inset-bottom, 0px));
  padding: var(--bosluk-2) var(--kenar) calc(var(--bosluk-2) + env(safe-area-inset-bottom, 0px));
  background: var(--kart); border-top: var(--cizgi-kalinlik) solid var(--cizgi);
}
.sekmeler button {
  flex: 0 1 var(--sayi-kutusu-en-az); flex-direction: column; gap: var(--bosluk-1); min-height: auto;
  padding: 0; background: transparent; color: var(--soluk); border-color: transparent;
  font-size: var(--yazi-kucuk);
}
.sekmeler button[aria-current="page"] { color: var(--yazi); }
.kopru .sekmeler { display: none; } /* köprüde yalnızca ekstre işleri */
#yedek .birakma-dugmeler { justify-content: flex-start; margin-top: var(--bosluk-2); }

/* Hareket listesi (elle girişler): kart değil satır */
.ay-secici { display: flex; align-items: center; gap: var(--bosluk-1); }
.ay-secici b { text-align: center; font-weight: var(--orta-kalin); white-space: nowrap; }
.baslik-satiri { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2); }
/* Sığmazsa düğmeler alt satıra iner, başlık ezilmez (Hareketler'de üç düğme, 2026-11-09) */
.baslik-satiri { flex-wrap: wrap; row-gap: var(--bosluk-2); }
.baslik-satiri > h2 { flex: 0 0 auto; }
.hareketler { list-style: none; margin: var(--bosluk-3) 0 0; padding: 0; }
.hareket {
  display: flex; align-items: center; gap: var(--bosluk-3); min-height: var(--satir-yukseklik);
  padding: var(--bosluk-2) 0; border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
}
.hareket:last-child { border-bottom: 0; }
.hareket .ne { flex: 1; min-width: 0; }
.hareket .ne div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hareket .miktar { font-variant-numeric: tabular-nums; font-weight: var(--orta-kalin); white-space: nowrap; }
.hareket .miktar.gelir { color: var(--olumlu); }
.hareket .yer { width: var(--kontrol-yukseklik); display: flex; justify-content: center; }
.soluk { color: var(--soluk); }
.eksi { color: var(--hata-renk); }

/* Özet (pano.js, grafik.js): Excel'deki Budget Dashboard. Tür renkleri tema.css'teki .gelir / .gider / .birikim */
.pano-ust { display: flex; flex-direction: column; gap: var(--bosluk-2); margin-bottom: var(--bosluk-4); }
.pano-ust .ay-secici { justify-content: center; }
/* Özet, yıl ve "Bu ay" tek satırda: yıl tam ortada, iki yanı eşit */
.pano-baslik { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pano-baslik > :last-child { justify-self: end; }
.donem-secimi { align-self: center; }
.donem-secimi button { display: inline-flex; align-items: center; gap: var(--bosluk-1); }
/* Ay penceresi: 12 ay, 3 sütun; bu ay altı çizili */
.ay-penceresi h3 { margin-top: 0; text-align: center; }
.ay-listesi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-2); }
.ay-listesi button.cip { height: var(--kontrol-yukseklik); padding: 0; color: var(--yazi); }
.ay-listesi button.cip[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); }
.ay-listesi button.cip[aria-current="date"] { text-decoration: underline; text-underline-offset: var(--bosluk-1); }
.donem-adi { font-size: var(--yazi-baslik); font-weight: var(--kalin); letter-spacing: var(--sik); margin-top: var(--bosluk-1); }
.cipler { display: flex; gap: var(--bosluk-1); flex-wrap: wrap; margin-bottom: var(--bosluk-4); }
button.cip { min-height: auto; height: calc(var(--kontrol-yukseklik) - var(--bosluk-2)); padding: 0 var(--bosluk-4);
  background: transparent; color: var(--soluk); border-color: transparent; }
button.cip[aria-pressed="true"] { background: var(--kart-2); color: var(--yazi); }
/* Kalem ekle penceresindeki hazır kalem önerileri: çerçeveli, seçilen dolu */
.oneri-cipleri { margin-bottom: var(--bosluk-2); }
.oneri-cipleri button.cip { border-color: var(--cizgi); padding: 0 var(--bosluk-3); font-size: var(--yazi-kucuk); }
.olumlu { color: var(--olumlu); }
.kalin { font-weight: var(--kalin); }
.kart > h3:first-child { margin-top: 0; }
.tur-baslik { color: var(--tur-yazi); font-weight: var(--kalin); }
/* Uzun ad tek satırda kalır, sonu silikleşir (maske yalnızca saydamlık için; renk değil) */
.lejant-ad, .dokum-ad {
  white-space: nowrap; overflow: hidden;
  mask-image: linear-gradient(to right, black calc(100% - var(--bosluk-5)), transparent);
}

/* Halka kartı: halka solda, liste sağda */
.halka-karti h3.tur-baslik { font-size: var(--yazi-boyut); margin: 0 0 var(--bosluk-3); }
.halka-duzen { display: grid; grid-template-columns: var(--halka-boyut) minmax(0, 1fr); gap: var(--bosluk-4); align-items: center; }
.halka { width: var(--halka-boyut); height: var(--halka-boyut); display: block; }
.halka-dilim { stroke-width: var(--halka-kalinlik); transition: stroke-dasharray var(--gecis) ease-out; }
.lejant-liste {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--bosluk-1);
  align-items: center; font-size: var(--yazi-orta); font-variant-numeric: tabular-nums;
}
.lejant-satir { display: contents; }
/* Kolon arası boşluk hücrenin içinde: toplamın noktalı çizgisi kesintisiz uzansın */
.lejant-satir > span { padding-left: var(--bosluk-2); }
.lejant-kare { width: var(--lejant-kare); height: var(--lejant-kare); border-radius: calc(var(--lejant-kare) / 4); display: block; }
.lejant-satir.toplam > span:first-child { padding-left: 0; }
.lejant-satir.toplam > span {
  align-self: stretch; font-weight: var(--kalin); padding-top: var(--bosluk-2); margin-top: var(--bosluk-1);
  border-top: var(--cizgi-kalinlik) dotted var(--soluk);
}

/* Aylık gerçekleşen ve bütçe: 12 ay, her ayda türlerin yan yana yığılmış çubuğu */
.seri-nokta { width: var(--bosluk-2); height: var(--bosluk-2); border-radius: var(--kose-tam); background: var(--tur-cubuk); flex: none; }
.cip.butce .seri-nokta { background: var(--odaksiz-kalan); border: var(--cizgi-kalinlik) solid var(--soluk); }
.cip.seri[aria-pressed="false"] .seri-nokta { background: transparent; border: var(--cizgi-kalinlik) solid var(--soluk); }
.ay-grafik { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.ay-alan { display: grid; grid-template-columns: var(--eksen-genislik) minmax(0, 1fr); height: var(--grafik-yukseklik); }
.ay-eksen { position: relative; }
.ay-eksen span {
  position: absolute; right: var(--bosluk-2); transform: translateY(50%);
  font-size: var(--yazi-kucuk); color: var(--soluk); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ay-gruplar { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ay-izgara { position: absolute; inset: 0; pointer-events: none; }
.ay-izgara i { position: absolute; left: 0; right: 0; border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
button.ay-grup {
  position: relative; height: 100%; min-height: 0; padding: 0 var(--cizgi-kalinlik); border: 0; border-radius: 0;
  background: transparent; display: flex; align-items: flex-end; justify-content: center; gap: var(--cizgi-kalinlik);
}
.ay-cubuk { flex: 1 1 0; max-width: var(--bosluk-3); height: 100%; display: flex; flex-direction: column-reverse; }
.ay-parca { flex: none; transition: height var(--gecis) ease-out; }
.ay-parca:last-child { border-radius: var(--kose-cubuk) var(--kose-cubuk) 0 0; } /* yalnızca en üstteki parça; renk geçişleri düz */
.ay-parca.ici { background: var(--tur-cubuk); }
.ay-parca.asan { background: var(--tur-asan); }
.ay-parca.kalan { background: var(--tur-kalan); }
.odaksiz .ay-parca.ici { background: var(--odaksiz); }
.odaksiz .ay-parca.asan { background: var(--odaksiz-asan); }
.odaksiz .ay-parca.kalan { background: var(--odaksiz-kalan); }
.ay-etiketler {
  display: grid; grid-template-columns: var(--eksen-genislik) repeat(12, minmax(0, 1fr));
  font-size: var(--yazi-eksen); color: var(--soluk); text-align: center; letter-spacing: var(--cok-sik);
}
.ay-eksen span { font-size: var(--yazi-eksen); }
.cipler button.cip.seri { padding: 0 var(--bosluk-2); gap: var(--bosluk-1); } /* dört düğme telefonda tek satır */
.ay-etiketler span { overflow: hidden; white-space: nowrap; }
.ay-etiketler .secili { color: var(--yazi); font-weight: var(--kalin); }

/* Döküm: Excel'deki Breakdown tablosu. Telefonda dört kolon; genişte kalan ve aşan da */
.dokum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto var(--oran-genislik);
  font-size: var(--yazi-orta); font-variant-numeric: tabular-nums;
}
.dokum-satir { display: contents; }
/* Excel'deki gibi sık: satır çizgisi yok, yalnızca başlığın altında ve toplamın üstünde */
.dokum-satir > span { padding: var(--bosluk-1) 0 var(--bosluk-1) var(--bosluk-3); }
.dokum-satir > span:first-child { padding-left: 0; }
.dokum .genis { display: none; }
.dokum-satir.baslik > span {
  padding-top: var(--bosluk-5); font-size: var(--yazi-kucuk); color: var(--soluk); text-align: right;
  border-bottom: var(--odak-kalinlik) solid var(--tur-baslik);
}
.dokum > .dokum-satir.baslik:first-child > span { padding-top: 0; }
.dokum-satir.baslik > span.tur-baslik { font-size: var(--yazi-boyut); color: var(--tur-yazi); text-align: left; }
.dokum-satir.baslik > span { margin-bottom: var(--bosluk-1); }
.dokum-satir.toplam .dokum-ad { mask-image: none; } /* maske çizgiyi de silikleştirirdi */
.dokum-satir.toplam > span { font-weight: var(--kalin); border-top: var(--cizgi-kalinlik) solid var(--yazi); margin-top: var(--bosluk-1); }
.oran { position: relative; padding-left: 0 !important; margin-left: var(--bosluk-3); }
.oran-dolum { position: absolute; left: 0; top: calc(var(--bosluk-1) / 2); bottom: calc(var(--bosluk-1) / 2); background: var(--oran-cubuk); }
.oran b { position: relative; display: block; text-align: center; font-weight: var(--orta-kalin); }
.oran.tam .oran-dolum { background: var(--tur-tam); }
.oran.tam b { color: var(--parlak-ustu); }
@media (min-width: 600px) {
  .dokum { grid-template-columns: minmax(0, 1fr) auto auto var(--oran-genislik) auto auto; }
  .dokum .genis { display: block; }
}


/* Bütçe planı düzenleme paneli: uzun liste, panel kendi içinde kayar */
dialog.panel, dialog:not(.kurulum, .tam-sayfa) { max-height: calc(var(--gorunur-yukseklik, 100dvh) - 2 * var(--kenar)); overflow-y: auto; }
.plan-satiri {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3);
  min-height: var(--satir-yukseklik); border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
}
.plan-satiri input {
  width: var(--sayi-kutusu-en-az); min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-3);
  text-align: right; background: var(--zemin);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
}
/* Planı düzenle tek yer (2026-11-09, tuvalde A): satırda ad, ayın tutarı, kalem simgesi; her türün altında ekleme,
   altta yapışık Kaydet. Kalem sayfaları aynı pencerede (kalemler.js) */
.plan-satiri { gap: var(--bosluk-2); }
.plan-adi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-1); }
.plan-satiri > button.kalem-ac { width: var(--kontrol-yukseklik); padding: 0; flex: none; }
.plan-turu > legend.nokta-baslik { display: flex; margin-bottom: 0; }
button.yalin.plan-ekle { padding: 0; margin-top: var(--bosluk-1); color: var(--yazi); }
button.yalin.panel-geri { padding: 0; margin-bottom: var(--bosluk-2); color: var(--yazi); }
.panel-alt {
  position: sticky; bottom: calc(-1 * var(--bosluk-5)); margin: var(--bosluk-4) calc(-1 * var(--bosluk-5)) calc(-1 * var(--bosluk-5));
  padding: var(--bosluk-3) var(--bosluk-5) calc(var(--bosluk-4) + env(safe-area-inset-bottom, 0px));
  background: var(--kart); border-top: var(--cizgi-kalinlik) solid var(--cizgi);
  display: flex; flex-direction: column; gap: var(--bosluk-2);
}
.panel-alt .eylem { margin-top: 0; }
.kalem-islemleri { margin-top: var(--bosluk-5); border-top: var(--cizgi-kalinlik) solid var(--cizgi); display: flex; flex-direction: column; }
button.yalin.kalem-islemi { justify-content: flex-start; padding: 0; color: var(--yazi); min-height: var(--satir-yukseklik); }
.kutu-ozet { margin-top: var(--bosluk-4); padding: var(--bosluk-3); border: var(--cizgi-kalinlik) solid var(--cizgi);
  border-radius: var(--kose-kucuk); display: flex; flex-direction: column; gap: var(--bosluk-2); }
.kutu-ozet-satir { display: flex; justify-content: space-between; gap: var(--bosluk-3); }

/* Kalemler (kalemler.js): tür başına liste, bekleyen değişiklikler; pencerede seçim ve alanlar */
.kalem-grubu .hareket { min-height: var(--satir-yukseklik); padding: 0; }
.kalem-grubu > button.yalin { display: inline-flex; align-items: center; gap: var(--bosluk-1); margin-top: var(--bosluk-1); }
.rozet { margin-left: var(--bosluk-2); font-size: var(--yazi-kucuk); color: var(--tur-yazi); }
.bekleyen { margin: 0; padding-left: var(--bosluk-5); }
.bekleyen li { padding: var(--bosluk-1) 0; }
.bekleyen li:has(> button) { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2); }
dialog .bolmeli { margin-top: var(--bosluk-3); }
dialog .bolmeli button { white-space: nowrap; }
.alan select { color: var(--yazi); }

/* Bütçe Planlama (butce.js): toplamlar türün yazı renginde, kutular dolgusuz. Tür başlıkları (plan ve Kalemler)
   nötr; önlerinde Özet'teki çubuk düğmelerinin noktası (renk tek yerde tam güçte kalsın) */
.nokta-baslik { display: flex; align-items: center; gap: var(--bosluk-2); color: var(--soluk); font-weight: var(--orta-kalin); }
.nokta-baslik b { color: var(--yazi); font-weight: var(--orta-kalin); }
.plan-toplamlari .sayi b { color: var(--tur-yazi); }

/* Kalem penceresi (butce.js): bir kalemin 12 ayı, 3 sütun; odaktaki ay çerçeveli, eksi tutar kırmızı */
.plan-kalemi { cursor: pointer; }
.plan-kalemi:hover .ne > div:first-child { text-decoration: underline; text-underline-offset: var(--bosluk-1); }
.ay-tutarlari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-2); margin-top: var(--bosluk-4); }
.ay-tutari { display: flex; flex-direction: column; gap: var(--bosluk-1); }
.ay-tutari > span { color: var(--soluk); font-size: var(--yazi-kucuk); }
.ay-tutari input {
  width: 100%; min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-2); text-align: right;
  background: var(--zemin); color: var(--yazi);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
}
.ay-tutari.odakta > span { color: var(--yazi); font-weight: var(--orta-kalin); }
.ay-tutari.odakta input { border-color: var(--yazi); }
.ay-tutari.eksi input { color: var(--hata-renk); }
.yil-toplami { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--bosluk-4);
  padding-top: var(--bosluk-3); border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
.yil-toplami > span { color: var(--soluk); }
.eylem.hizli { margin-top: var(--bosluk-3); gap: var(--bosluk-2); }
.eylem.hizli button { min-height: auto; padding: var(--bosluk-1) var(--bosluk-3); font-size: var(--yazi-kucuk); }

/* Hareketler (hareketler.js): üst düğmeler, arama, ay kartları; bekleyen ekstre listenin üstünde */
#taksit { margin-top: var(--bosluk-4); }
.ust-dugmeler { display: flex; gap: var(--bosluk-2); }
#ekstre-alani, #ekstre-bekleyen, #hareket-suzgec, #duzenli { margin-top: var(--bosluk-3); }
.arama input {
  width: 100%; min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-3); background: var(--zemin); color: var(--yazi);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk);
}
#hareket-suzgec .cipler { margin: var(--bosluk-2) 0 var(--bosluk-3); }
.hareket-turu { display: flex; align-items: center; gap: var(--bosluk-2); margin: var(--bosluk-3) 0 0; font-size: var(--yazi-kucuk); font-weight: var(--orta-kalin); }
.hareket-turu + .hareketler { margin-top: var(--bosluk-1); }
details.kalem-kumesi { margin-top: 0; border-bottom: var(--cizgi-kalinlik) solid var(--cizgi); }
.hareketler > li:last-child > .kalem-kumesi { border-bottom: 0; }
.kalem-kumesi > summary { color: var(--yazi); padding-block: var(--bosluk-2); }
.kalem-kumesi > summary .ne { flex: 1; min-width: 0; }
.kalem-kumesi > summary .miktar { font-variant-numeric: tabular-nums; font-weight: var(--orta-kalin); white-space: nowrap; }
.kalem-kumesi > summary .miktar.gelir { color: var(--olumlu); }
.kalem-kumesi > .hareketler { margin-top: 0; padding-left: var(--bosluk-3); border-left: var(--odak-kalinlik) solid var(--cizgi); margin-bottom: var(--bosluk-2); }
details.ay-karti { margin-top: var(--bosluk-2); }
.ay-karti > summary { align-items: flex-start; }
.ay-ozeti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-1); color: var(--yazi); }
.ay-ozeti b { font-weight: var(--orta-kalin); }
.ay-toplamlari { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); color: var(--soluk); font-size: var(--yazi-kucuk);
  font-variant-numeric: tabular-nums; }
.ay-toplamlari > span { display: inline-flex; align-items: center; gap: var(--bosluk-1); }
details.bekleyen-ekstre { margin-top: var(--bosluk-2); }
.bekleyen-ekstre > .kart { background: transparent; border: 0; padding: 0; margin-top: var(--bosluk-3); }
.bildirim-nokta { width: var(--bosluk-2); height: var(--bosluk-2); flex: none; border-radius: var(--kose-tam); background: var(--uyari-renk); }

/* İçgörü sekmesi */
#icgoru .ay-secici { justify-content: space-between; margin-top: var(--bosluk-3); }
.icgoru-cumle { font-size: var(--yazi-alt-baslik); font-weight: var(--orta-kalin); margin: var(--bosluk-2) 0 var(--bosluk-4); }
.icgoru-satir { display: flex; justify-content: space-between; gap: var(--bosluk-3); padding: var(--bosluk-1) 0; }
.icgoru-artis { color: var(--hata-renk); font-variant-numeric: tabular-nums; }
.icgoru-azalis { color: var(--olumlu); font-variant-numeric: tabular-nums; }
.icgoru-satir + .kucuk { margin-top: var(--bosluk-2); }
.icgoru-kalem { padding: var(--bosluk-2) 0; }
.icgoru-kalem b { font-weight: var(--orta-kalin); }
.kucuk-cizgi { display: block; width: 100%; height: var(--satir-yukseklik); margin: var(--bosluk-1) 0; }
.kucuk-cizgi polyline { fill: none; stroke: var(--expense-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kart > .eylem:last-child { margin-top: var(--bosluk-3); }
.icgoru-liste { display: grid; gap: var(--bosluk-1); }
.net-cubuklar { display: flex; gap: var(--bosluk-1); margin: var(--bosluk-2) 0; }
.net-ay { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-1); color: var(--soluk); font-size: var(--yazi-kucuk); }
.net-ay.secili { color: var(--yazi); font-weight: var(--orta-kalin); }
.net-alan { width: 100%; height: calc(var(--satir-yukseklik) * 1.5); display: flex; align-items: flex-end; }
.net-cubuk { width: 100%; border-radius: var(--bosluk-1); background: var(--saving-bar); }
.net-cubuk.eksi { background: var(--hata-renk); }

/* Düzenli kayıtlar (Bütçe, duzenli.js) ve Hareketler'de "Bu ay gelecek" */
.duzenli .nokta-baslik { color: var(--yazi); }
.duzenli .ne { display: grid; gap: var(--bosluk-1); }
.duzenli.durgun .nokta-baslik, .duzenli.durgun .miktar { color: var(--soluk); }
.duzenli-cubuk { height: var(--bosluk-1); border-radius: var(--kose-tam); background: var(--cizgi); overflow: hidden; }
.duzenli-cubuk i { display: block; height: 100%; background: var(--tur-cubuk); border-radius: inherit; }
.alan-cifti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }
.alan-cifti[hidden] { display: none; }
.kucuk.blok { display: block; }
.onizleme { margin-top: var(--bosluk-4); padding: var(--bosluk-3); border: var(--cizgi-kalinlik) solid var(--cizgi);
  border-radius: var(--kose-kucuk); display: grid; gap: var(--bosluk-1); }
.onizleme:empty { display: none; }
.gelecek .hareket .ne, .gelecek .hareket .miktar { color: var(--soluk); }
.gelecek-satiri { cursor: pointer; } /* dokununca düzenli kaydın düzeltmesi (2026-11-09) */
.icgoru-toplam { border-top: var(--cizgi-kalinlik) solid var(--cizgi); margin-top: var(--bosluk-1); padding-top: var(--bosluk-2); }

/* Bekleyen ekstrenin gönder çubuğu: Hareketler'de sekme çubuğunun üstünde sabit (uygulama.js gonderCubugu) */
.gonder-cubugu {
  position: fixed; left: 0; right: 0; z-index: 1; bottom: calc(var(--sekme-cubugu) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--bosluk-3);
  padding: var(--bosluk-3) max(var(--kenar), calc((100% - var(--sayfa-genislik)) / 2 + var(--kenar)));
  background: var(--kart); border-top: var(--cizgi-kalinlik) solid var(--cizgi);
}
.gonder-cubugu[hidden] { display: none; }
.gonder-cubugu .ne { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gonder-cubugu .ne b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gonder-cubugu .uyari-yazi { color: var(--uyari-renk); font-size: var(--yazi-kucuk); }
.kopru .gonder-cubugu { bottom: env(safe-area-inset-bottom, 0px); } /* köprüde sekme çubuğu yok */
body.gonder-var #sekme-hareketler { padding-bottom: calc(var(--kontrol-yukseklik) + var(--bosluk-6)); }

/* Saving planının yolu (birikim.js): iki seçenek, her biri düğme ve açıklama */
.secim-blok { margin-top: var(--bosluk-4); display: grid; gap: var(--bosluk-2); }
.secim-blok button { justify-self: start; }
.birikim-yolu { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); margin-top: var(--bosluk-2); }

/* Hedef sekmesi (hedef.js, İ5): ilerleme, kaydırıcılar; rakamlar sayarak değişir, hedefe yaklaştıranda .parla yeşil */
.hedef-motto { font-size: var(--yazi-alt-baslik); font-weight: var(--orta-kalin); margin: var(--bosluk-2) 0 var(--bosluk-1); }
.hedef-amac { margin: 0 0 var(--bosluk-4); max-width: var(--metin-genislik); }
.hedef-secici { margin-bottom: var(--bosluk-4); flex-wrap: wrap; max-width: 100%; }
.hedef-ilerleme { margin-top: var(--bosluk-2); }
.hedef-buyuk { font-size: var(--yazi-sayi); }
.hedef-rakam { font-variant-numeric: tabular-nums; transition: color var(--renk-gecis) ease-out; }
.hedef-rakam.parla { color: var(--olumlu); transition: none; }
.hedef-cubuk { height: var(--bosluk-2); margin: var(--bosluk-2) 0; border-radius: var(--kose-tam); background: var(--cizgi); overflow: hidden; }
.hedef-cubuk i { display: block; height: 100%; background: var(--tur-cubuk); border-radius: inherit; transition: width var(--gecis) ease-out; }
.hedef-tarih { display: flex; gap: var(--bosluk-2); align-items: baseline; }
.ustu-cizili { text-decoration: line-through; }
.hedef-hatirlat { margin-top: var(--bosluk-3); padding: var(--bosluk-3); border: var(--cizgi-kalinlik) solid var(--cizgi);
  border-radius: var(--kose-kucuk); display: grid; gap: var(--bosluk-1); }
.hedef-hatirlat .eylem { margin-top: var(--bosluk-2); }
.hedef-baska { display: flex; gap: var(--bosluk-2); align-items: center; margin-top: var(--bosluk-2); }
.hedef-baska[hidden] { display: none; }
.hedef-baska input { flex: 1; min-width: 0; min-height: var(--kontrol-yukseklik); padding: 0 var(--bosluk-3); background: var(--zemin);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-kucuk); }
.hedef-kaydir { padding: var(--bosluk-3) 0 var(--bosluk-2); border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
.hedef-kaydir input[type="range"] { width: 100%; height: var(--kontrol-yukseklik); margin: 0; accent-color: var(--olumlu); cursor: pointer; }
.hedef-kisma { font-variant-numeric: tabular-nums; }
.hedef-kalem-secimi { display: grid; gap: var(--bosluk-1); padding: var(--bosluk-2) 0 var(--bosluk-3); }
.hedef-kalem-secimi[hidden] { display: none; }
.hedef-secim { align-items: center; min-height: var(--kontrol-yukseklik); margin: 0; }
.hedef-secim > span:nth-child(2) { flex: 1; }
.hedef-arsiv > summary { color: var(--yazi); }

/* Kurulum kılavuzu (Ç5, kurulum.js): tam ekran adım adım (A) ve Özet'teki kart (B). Tuvalde seçildi, 2026-11-05. */
dialog.kurulum, dialog.tam-sayfa {
  width: 100%; max-width: var(--pencere-genislik); height: 100dvh; max-height: 100dvh; margin: 0 auto;
  padding: 0; border: 0; border-radius: 0; background: var(--zemin);
  display: flex; flex-direction: column;
}
dialog.kurulum:not([open]), dialog.tam-sayfa:not([open]) { display: none; }
/* Tam ekran pencereler iPhone'un üst çubuğunun (saat, çentik) altına girmesin (2026-11-06, canlıda görüldü) */
.kurulum-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--bosluk-3) + env(safe-area-inset-top, 0px)) var(--kenar) 0; min-height: var(--kontrol-yukseklik);
}
.kurulum-ust > button[hidden] { display: inline-flex; visibility: hidden; }
.kurulum-ilerleme { display: flex; gap: var(--bosluk-1); padding: var(--bosluk-3) var(--kenar) 0; }
.kurulum-ilerleme i { flex: 1; height: var(--bosluk-1); border-radius: var(--kose-tam); background: var(--cizgi); }
.kurulum-ilerleme i.dolu { background: var(--vurgu); }
.kurulum-govde {
  flex: 1; overflow-y: auto; padding: var(--bosluk-5) var(--kenar);
  display: flex; flex-direction: column; gap: var(--bosluk-4);
}
.kurulum-baslik { margin: 0; font-size: var(--yazi-baslik); line-height: var(--satir-baslik); letter-spacing: var(--sik); }
.kurulum-baslik.buyuk { font-size: var(--yazi-dev); }
.kurulum-aciklama { margin: calc(-1 * var(--bosluk-2)) 0 0; }
.kurulum-alt-yazi, .kurulum-soz { margin: 0; font-size: var(--yazi-alt-baslik); color: var(--soluk); }
.kurulum-soz { font-size: var(--yazi-boyut); color: var(--yazi); }
.kurulum-ozellik { display: flex; gap: var(--bosluk-3); align-items: flex-start; }
.kurulum-ozellik > span:last-child { display: flex; flex-direction: column; gap: var(--bosluk-1); }
.kurulum-simge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--kontrol-yukseklik); height: var(--kontrol-yukseklik); color: var(--vurgu);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose); background: var(--kart);
}
.kurulum-alt {
  padding: var(--bosluk-3) var(--kenar) calc(var(--bosluk-4) + env(safe-area-inset-bottom, 0px));
  border-top: var(--cizgi-kalinlik) solid var(--cizgi); background: var(--kart);
  display: flex; flex-direction: column; gap: var(--bosluk-3);
}
.kurulum-alt-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); }
.kurulum-ileri { flex: none; padding: 0 var(--bosluk-6); }
.kurulum-ileri:disabled { opacity: var(--pasif-saydamlik); cursor: default; }
.kurulum-onay { display: flex; gap: var(--bosluk-3); align-items: flex-start; font-size: var(--yazi-orta); }
.kurulum-onay input, .kurulum-kalem input { flex: none; width: var(--bosluk-5); height: var(--bosluk-5); margin: 0; accent-color: var(--vurgu); }
button.yazi-baglanti {
  display: inline; min-height: auto; padding: 0; border: 0; background: none; color: var(--vurgu);
  font-weight: inherit; text-decoration: underline; text-underline-offset: var(--bosluk-1);
}
.kurulum-gruplar { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.kurulum-grup {
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose);
  background: var(--kart); padding: var(--bosluk-1) var(--bosluk-4);
}
.kurulum-grup h3 { margin: var(--bosluk-3) 0 var(--bosluk-1); }
.kurulum-kalem {
  display: flex; align-items: center; gap: var(--bosluk-3); min-height: var(--satir-yukseklik);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
}
.kurulum-kalem .ne { flex: 1; display: flex; align-items: center; gap: var(--bosluk-3); min-height: var(--satir-yukseklik); }
.kurulum-kalem .ne > span { display: flex; flex-direction: column; }
.yildiz { color: var(--vurgu); }
/* Hazır kalem işaretleri (kalem_isareti.js, 2026-11-09): ★ önerilen, kart simgesi ekstreden dolar */
.kalem-isaretleri { display: inline-flex; align-items: center; gap: var(--bosluk-1); margin-left: var(--bosluk-1); vertical-align: middle; }
.ekstre-isareti { display: inline-flex; color: var(--soluk); vertical-align: middle; }
.ekstre-isareti .simge, .isaret-aciklamasi .simge { width: 1em; height: 1em; }
.isaret-aciklamasi { margin-top: var(--bosluk-3); }
.kurulum-ozel { align-self: flex-start; }
.kurulum-ikili { display: grid; grid-template-columns: 1fr var(--sayi-kutusu-en-az); gap: var(--bosluk-3); }
.kurulum-ikili .alan { margin-top: var(--bosluk-2); }
.kurulum-duzenli { margin: 0; }
.kurulum-karti-ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bosluk-3); }
.kurulum-karti-ust h2 { margin: 0; }
.kurulum-secenek { align-items: center; min-height: var(--kontrol-yukseklik); }
button.kurulum-secim {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--bosluk-2); text-align: left;
  min-height: auto; padding: var(--bosluk-4); border-radius: var(--kose);
  background: var(--kart); color: var(--yazi); border-color: var(--cizgi); font-weight: inherit;
}
button.kurulum-secim[aria-pressed="true"] { border-color: var(--vurgu); }
button.kurulum-secim b { font-size: var(--yazi-alt-baslik); }
.kurulum-hesap {
  display: flex; flex-direction: column; gap: var(--bosluk-1); padding-top: var(--bosluk-3);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi); font-variant-numeric: tabular-nums;
}
.kurulum-hesap > span { display: flex; justify-content: space-between; color: var(--soluk); }
.kurulum-hesap > span.toplam { color: var(--yazi); font-weight: var(--kalin); }
.kurulum-hesap .birikim { color: var(--tur-yazi); }
.kurulum-hesap .eksi { color: var(--hata-renk); }
button.kurulum-pdf {
  flex-direction: column; gap: var(--bosluk-2); min-height: calc(3 * var(--satir-yukseklik));
  border: var(--cizgi-kalinlik) dashed var(--cizgi); border-radius: var(--kose);
  background: var(--kart); color: var(--yazi);
}
button.kurulum-pdf .simge { color: var(--vurgu); }
.kurulum-bankalar { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.kurulum-bankalar .cipler { margin: 0; }
.kurulum-banka {
  display: inline-flex; align-items: center; min-height: calc(var(--kontrol-yukseklik) - var(--bosluk-3));
  padding: 0 var(--bosluk-3); border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-tam);
  font-size: var(--yazi-kucuk);
}
/* Özet'teki kart */
.kurulum-karti { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.kurulum-karti > p { margin: var(--bosluk-1) 0; }
.kurulum-cubuk { height: var(--bosluk-1); border-radius: var(--kose-tam); background: var(--cizgi); overflow: hidden; }
.kurulum-dolum { height: 100%; background: var(--vurgu); border-radius: var(--kose-tam); }
button.kurulum-madde {
  justify-content: flex-start; gap: var(--bosluk-3); width: 100%; min-height: var(--satir-yukseklik);
  padding: var(--bosluk-2) 0; border: 0; border-top: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: 0;
  background: none; color: var(--yazi); text-align: left; font-weight: inherit;
}
button.kurulum-madde .ne { flex: 1; display: flex; flex-direction: column; }
button.kurulum-madde.bitti .ne { color: var(--soluk); text-decoration: line-through; }
.kurulum-tik {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--bosluk-5); height: var(--bosluk-5); border-radius: var(--kose-tam);
  border: var(--odak-kalinlik) solid var(--cizgi);
}
.bitti .kurulum-tik { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.kurulum-tik .simge { width: var(--simge-boyut); height: var(--simge-boyut); }
.kurulum-karti > button.yalin { align-self: flex-start; padding: 0; }

/* Boş durumlar (Ç5, tuvalde A): kaydı olmayan ekranda ne olacağı ve ilk adımın düğmeleri (bos.js) */
.halka-bos { stroke: var(--cizgi); stroke-width: var(--halka-kalinlik); }
.bos-dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.bos-ozet, .bos-kart { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.bos-kart { gap: var(--bosluk-3); }
.bos-kart > b { font-size: var(--yazi-alt-baslik); }
.bos-ozet-ust { display: flex; align-items: center; gap: var(--bosluk-4); }
.bos-ozet-ust .halka { width: var(--halka-kucuk); height: var(--halka-kucuk); flex: none; }
.bos-ozet-yazi { display: flex; flex-direction: column; gap: var(--bosluk-1); }
.bos-ozet-yazi b { font-size: var(--yazi-alt-baslik); }
.plan-ozeti h3 { margin: 0; }
.plan-ozeti-satir { display: flex; justify-content: space-between; align-items: center; gap: var(--bosluk-3);
  padding: var(--bosluk-2) 0; border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
.plan-ozeti-satir > span:first-child { display: flex; align-items: center; gap: var(--bosluk-2); min-width: 0; }
.plan-ozeti-gelecek { margin-top: var(--bosluk-3); }
.plan-ozeti-gelecek > b { display: block; padding-bottom: var(--bosluk-1); }
.plan-ozeti .eylem { margin-top: var(--bosluk-2); }
.icgoru-vurgu { color: var(--olumlu); }
.bekleyen { display: flex; align-items: flex-start; gap: var(--bosluk-3); padding: var(--bosluk-3) 0;
  border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
.bekleyen-simge { width: var(--kontrol-yukseklik); height: var(--kontrol-yukseklik); flex: none; display: flex; align-items: center; justify-content: center;
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose); color: var(--soluk); }
.bekleyen-yazi { display: flex; flex-direction: column; gap: var(--bosluk-1); }

/* Hesap ekranı (Ç6, hesap.js; tuvalde A): sağ üstte baş harf, tam sayfa Hesap. Kırmızı burada yalnızca hesabı silmede
   (kırmızının aşım dışındaki tek yeri, benim kararım). */
button.hesap-dugmesi {
  width: var(--kontrol-yukseklik); padding: 0; background: var(--kart); color: var(--yazi);
  border-color: var(--cizgi); font-size: var(--yazi-orta);
}
.tam-sayfa-ust {
  display: flex; align-items: center; gap: var(--bosluk-1);
  padding: calc(var(--bosluk-3) + env(safe-area-inset-top, 0px)) var(--kenar) 0; min-height: var(--kontrol-yukseklik);
}
.tam-sayfa-ust h2 { margin: 0; }
.tam-sayfa-ust > button.yalin { margin-left: calc(-1 * var(--bosluk-2)); }
.tam-sayfa-govde {
  flex: 1; overflow-y: auto; padding: var(--bosluk-4) var(--kenar) calc(var(--bosluk-6) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--bosluk-4);
}
.tam-sayfa-govde > p { margin: 0; }
.hesap-profil { display: flex; align-items: center; gap: var(--bosluk-4); }
.hesap-avatar {
  flex: none; width: calc(var(--kontrol-yukseklik) + var(--bosluk-2)); height: calc(var(--kontrol-yukseklik) + var(--bosluk-2));
  border-radius: var(--kose-tam); border: var(--cizgi-kalinlik) solid var(--cizgi); background: var(--kart-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--yazi-alt-baslik); font-weight: var(--orta-kalin);
}
.hesap-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-1); text-align: left; }
.hesap-grubu { padding-top: var(--bosluk-2); padding-bottom: var(--bosluk-2); }
.hesap-grubu > h3 { margin: var(--bosluk-2) 0 var(--bosluk-1); font-size: var(--yazi-kucuk); color: var(--soluk); }
.hesap-satir {
  display: flex; align-items: center; gap: var(--bosluk-3); width: 100%; min-height: var(--satir-yukseklik);
  padding: var(--bosluk-2) 0; border-top: var(--cizgi-kalinlik) solid var(--cizgi); color: var(--yazi);
}
.hesap-grubu > h3 + .hesap-satir { border-top: 0; }
button.hesap-satir {
  border-radius: 0; border-width: var(--cizgi-kalinlik) 0 0; border-color: var(--cizgi); background: none;
  font-weight: normal; justify-content: flex-start;
}
.hesap-grubu > h3 + button.hesap-satir { border-top-width: 0; }
.hesap-simge, .sira-satir .hesap-simge {
  flex: none; width: var(--kontrol-yukseklik); height: var(--kontrol-yukseklik); display: inline-flex; align-items: center;
  justify-content: center; border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose); color: var(--soluk);
}
.hesap-ok { color: var(--soluk); display: inline-flex; }
button.kucuk-dugme { min-height: auto; padding: var(--bosluk-1) var(--bosluk-3); font-size: var(--yazi-kucuk); }
.olumlu-etiket { color: var(--olumlu); border-color: var(--olumlu); }
button.hesap-baglanti { align-self: flex-start; margin: var(--bosluk-2) 0 var(--bosluk-1); color: var(--yazi); text-decoration: underline; }
.hesap-alt { display: flex; flex-direction: column; align-items: stretch; gap: var(--bosluk-2); }
.hesap-sayi {
  display: flex; justify-content: space-between; gap: var(--bosluk-3); padding: var(--bosluk-2) 0;
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
}
.hesap-grubu > h3 + .hesap-sayi { border-top: 0; }
button.yalin.tehlike, button.yalin.tehlike:hover { color: var(--hata-renk); }
button.tehlike-dugme { background: var(--hata-renk); border-color: var(--hata-renk); color: var(--zemin); }

/* Sekmelerin sırası: tutamaçtan sürüklenir (tuvalde B); tutamakta sayfa kaydırması kapalı, kaydırmayla karışmasın */
.sira-listesi { list-style: none; margin: 0; padding: 0; }
.sira-satir {
  display: flex; align-items: center; gap: var(--bosluk-3); min-height: var(--satir-yukseklik); background: var(--kart);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi); position: relative;
}
.sira-satir:first-child { border-top: 0; }
.sira-satir { transition: transform var(--kayma) ease-out; }
@media (prefers-reduced-motion: reduce) { .sira-satir { transition: none; } }
.sira-satir.tasiniyor {
  z-index: 1; border: var(--cizgi-kalinlik) solid var(--olumlu); border-radius: var(--kose); background: var(--kart-2);
  transition: none;
}
.kurulum-not { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.kurulum-not h3, .kurulum-not p { margin: 0; }
.tam-sayfa-govde > p, .kurulum-not p { line-height: var(--satir-araligi); }
button.tutamac {
  width: var(--kontrol-yukseklik); padding: 0; margin-left: calc(-1 * var(--bosluk-2)); background: none; border-color: transparent;
  color: var(--soluk); touch-action: none; cursor: grab;
}
.tasiniyor button.tutamac { cursor: grabbing; color: var(--yazi); }
.sira-ad { flex: 1; }
.sira-onizleme {
  display: flex; border-top: var(--cizgi-kalinlik) solid var(--cizgi); background: var(--kart);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sira-onizleme span {
  flex: 1; min-height: var(--sekme-cubugu); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bosluk-1); font-size: var(--yazi-kucuk); color: var(--soluk);
}
.gorunmez { position: absolute; width: var(--cizgi-kalinlik); height: var(--cizgi-kalinlik); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sekme çubuğunun üç biçimi (2026-11-06; tuvaldeki A, B, C, Hesap → Görünüm → Sekme çubuğu'ndan seçilir). Biçim sayfanın
   kökünde (data-cubuk); yoksa tam genişlik (bilgisayardaki arayüz). Hepsinde arkası yarı saydam ve bulanık, içerik altından akar.
   Yüzen biçimlerde çubuk her zaman ev çizgisinin hemen üstünde: sayfanın uzunluğundan bağımsız. */
.sekmeler {
  background: color-mix(in srgb, var(--kart) var(--cubuk-opaklik), transparent);
  -webkit-backdrop-filter: blur(var(--bulaniklik)); backdrop-filter: blur(var(--bulaniklik));
}
:root:is([data-cubuk="hap"], [data-cubuk="simge"]) .sekmeler {
  left: var(--kenar); right: var(--kenar); bottom: calc(var(--bosluk-2) + env(safe-area-inset-bottom, 0px));
  max-width: var(--pencere-genislik); margin: 0 auto; height: var(--hap-yukseklik);
  padding: var(--bosluk-1); gap: var(--bosluk-1);
  border: var(--cizgi-kalinlik) solid var(--cizgi); border-radius: var(--kose-tam);
}
:root:is([data-cubuk="hap"], [data-cubuk="simge"]) .sekmeler > :is(button, .onizleme-sekme) { flex: 1 1 0; border-radius: var(--kose-tam); }
:root:is([data-cubuk="hap"], [data-cubuk="simge"]) .sekmeler > :is(button, .onizleme-sekme)[aria-current="page"] { background: var(--kart-2); }
:root[data-cubuk="simge"] .sekme-ad {
  position: absolute; width: var(--cizgi-kalinlik); height: var(--cizgi-kalinlik); overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:root:is([data-cubuk="hap"], [data-cubuk="simge"]) .gonder-cubugu { bottom: calc(var(--hap-yukseklik) + var(--bosluk-3) + env(safe-area-inset-bottom, 0px)); }

/* Hesap → Görünüm → Sekme çubuğu: seçenekler ve altta gerçek çubuğun aynısı önizleme */
.cubuk-secenekleri { display: flex; flex-direction: column; gap: var(--bosluk-2); }
button.cubuk-secenek {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--bosluk-1); text-align: left; min-height: auto;
  padding: var(--bosluk-3) var(--bosluk-4); border-radius: var(--kose); background: var(--kart); color: var(--yazi);
  border-color: var(--cizgi); font-weight: normal;
}
button.cubuk-secenek[aria-pressed="true"] { border-color: var(--olumlu); }
.cubuk-onizleme { padding: var(--bosluk-4) var(--kenar) calc(var(--bosluk-4) + env(safe-area-inset-bottom, 0px)); border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
/* Ad benzersiz: "onizleme" düzenli kayıt ve hedef penceresinde başka bir kutu (2026-11-06'da çakıştı, çubuk alt alta dizildi) */
:root .cubuk-onizleme .sekmeler.cubuk-ornegi { position: relative; left: auto; right: auto; bottom: auto; }
:root:not([data-cubuk="hap"]):not([data-cubuk="simge"]) .cubuk-onizleme .sekmeler.cubuk-ornegi { height: var(--sekme-cubugu); padding: var(--bosluk-2); }
.onizleme-sekme {
  flex: 0 1 var(--sayi-kutusu-en-az); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bosluk-1); color: var(--soluk); font-size: var(--yazi-kucuk);
}
.onizleme-sekme[aria-current="page"] { color: var(--yazi); }

/* iPhone ana ekran uygulamasında (standalone) alttan konumlanan sabit öğeler kısa sayfada üst çubuk kadar yukarıda kalıyordu
   (Jump Ball, Hakemlik, Plutus; dört kez). Telefonda ölçüldü (2026-11-06): ekran 932, 100lvh 932, ama sayfanın kutusu
   (clientHeight, 100svh) 873; fark 59 = üst çubuk. Sayfa kısayken alttan yerleşen öğe 873'ün altına oturuyor. Çare: alttan
   değil üstten, ekranın gerçek boyuna (100lvh) göre yerleştirip kendi boyu kadar yukarı kaydırmak; üst kenar her durumda 0.
   Yalnızca ana ekran uygulamasında: Safari sekmesinde araç çubukları açıkken 100lvh görünür alandan uzun olur. */
/* Kural sayfanın kökündeki data-ana-ekran ile açılır (uygulama.js): Chrome'dan eklenen uygulamada display-mode sorgusu
   "hayır" diyebiliyor, navigator.standalone "evet" (2026-11-06, telefonda görüldü); ikisinden biri yeter. */
:root[data-ana-ekran] .sekmeler { top: 100lvh; bottom: auto; transform: translateY(-100%); }
:root[data-ana-ekran]:is([data-cubuk="hap"], [data-cubuk="simge"]) .sekmeler {
  top: calc(100lvh - var(--bosluk-2) - env(safe-area-inset-bottom, 0px)); bottom: auto; transform: translateY(-100%);
}
:root[data-ana-ekran] .gonder-cubugu { top: calc(100lvh - var(--sekme-cubugu) - env(safe-area-inset-bottom, 0px)); bottom: auto; transform: translateY(-100%); }
:root[data-ana-ekran]:is([data-cubuk="hap"], [data-cubuk="simge"]) .gonder-cubugu {
  top: calc(100lvh - var(--hap-yukseklik) - var(--bosluk-3) - env(safe-area-inset-bottom, 0px)); bottom: auto; transform: translateY(-100%);
}
:root[data-ana-ekran] .cubuk-onizleme .sekmeler.cubuk-ornegi { top: auto; transform: none; }
:root[data-ana-ekran] :is(dialog.kurulum, dialog.tam-sayfa) { height: 100lvh; max-height: 100lvh; }

/* Hesabı sil: yazılacak onay cümlesi (2026-11-09) */
.sil-cumlesi { display: block; margin-bottom: var(--bosluk-2); }