:root {
  --seri-gelir: #2a78d6; --seri-gider: #eb6834; --izgara: #e6e8eb;
  --zemin: #f5f6f8; --yuzey: #ffffff; --metin: #1c2330; --soluk: #5d6878; --cizgi: #e2e5ea;
  --vurgu: #1f7a55; --vurgu-acik: #e7f3ec; --marka: #1f7a55; --marka-ici: #ffffff; --uyari: #8a5a00; --uyari-zemin: #fff6e0; --uyari-cizgi: #f0d28a;
  --iyi: #1f7a44; --iyi-zemin: #e6f4ec; --kotu: #b3261e; --kotu-zemin: #fdecea; --gri-zemin: #eef0f3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --seri-gelir: #3987e5; --seri-gider: #d95926; --izgara: #2b3038;
    --zemin: #14171c; --yuzey: #1c2027; --metin: #e6e9ee; --soluk: #9aa3b0; --cizgi: #2e343d;
    --vurgu: #5cc595; --vurgu-acik: #17271f; --marka: #43b583; --marka-ici: #1c2027; --uyari: #f2c46b; --uyari-zemin: #2d2615; --uyari-cizgi: #5e4c1f;
    --iyi: #6fcf97; --iyi-zemin: #16291e; --kotu: #f28b82; --kotu-zemin: #2e1a19; --gri-zemin: #262b33;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--metin);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.ust { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); padding: 16px 0; margin-bottom: 20px; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.marka { display: flex; align-items: center; gap: 12px; }
.marka-isaret { width: 46px; height: 46px; flex: none; }
.marka-isaret .serit { fill: var(--marka); }
.marka-isaret .serit-ici { fill: var(--marka-ici); stroke: var(--marka-ici); }
.marka-isaret .serit-ici rect { stroke: none; }
.marka-ad { margin: 0; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--metin); }
.marka-ad span { color: var(--marka); }
.slogan { margin: 5px 0 0; font-size: 12px; letter-spacing: .14em; color: var(--soluk); }
.ust .alt { margin: 0; color: var(--soluk); font-size: 14px; max-width: 46ch; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.kart h2 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.baslik-satir { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.baslik-satir h2 { margin: 0; }
.not { color: var(--soluk); font-size: 13px; margin: 8px 0 0; }
.birakma { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center;
  border: 2px dashed var(--cizgi); border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.birakma:hover, .birakma.uzerinde { background: var(--vurgu-acik); border-color: var(--vurgu); }
.birakma span, .birakma small { color: var(--soluk); }
.dosya-listesi, .kural-listesi, .uyarilar { list-style: none; padding: 0; margin: 12px 0 0; }
.dosya-listesi li, .kural-listesi li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--cizgi); overflow-wrap: anywhere; }
.dosya-listesi small { color: var(--soluk); white-space: nowrap; }
.sil { background: none; border: 0; color: var(--kotu); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.dugmeler { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
button { font: inherit; border-radius: 8px; cursor: pointer; }
.ana-dugme { background: var(--vurgu); color: #fff; border: 0; padding: 10px 20px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .ana-dugme { color: #0f1a26; } }
.ana-dugme:disabled { opacity: .45; cursor: not-allowed; }
.ikincil { background: var(--yuzey); color: var(--metin); border: 1px solid var(--cizgi); padding: 9px 16px; }
.ikincil:hover { border-color: var(--vurgu); }
#yedek-onay p { margin: 0; }
.kural-formu { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
input, select { font: inherit; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 10px; }
.kural-formu input { flex: 1 1 260px; }
.rozet { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.rozet.iyi { background: var(--iyi-zemin); color: var(--iyi); }
.rozet.kotu { background: var(--kotu-zemin); color: var(--kotu); }
.rozet.uyari { background: var(--uyari-zemin); color: var(--uyari); }
.rozet.gri { background: var(--gri-zemin); color: var(--soluk); }
.durum { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; background: var(--vurgu-acik); }
.durum.hata { background: var(--kotu-zemin); color: var(--kotu); }
#uyarilar-bolumu { background: var(--uyari-zemin); border-color: var(--uyari-cizgi); }
#uyarilar-bolumu h2 { color: var(--uyari); }
.uyarilar li { padding: 6px 0 6px 18px; position: relative; overflow-wrap: anywhere; }
.uyarilar li::before { content: "!"; position: absolute; left: 2px; font-weight: 700; color: var(--uyari); }
.tablo-kap { overflow-x: auto; }
.tablo-kap.uzun { max-height: 560px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
th { background: var(--gri-zemin); font-weight: 600; position: sticky; top: 0; white-space: nowrap; }
table.sayisal td.tutar, table.sayisal th.tutar { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.toplam td { font-weight: 700; border-top: 2px solid var(--metin); }
td.sifir { color: var(--soluk); }
div.toplam strong { font-size: 18px; }
.suzgecler { display: flex; gap: 8px; flex-wrap: wrap; }
.suzgecler select, .suzgecler input { max-width: 100%; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--vurgu); }
.alt-bilgi { color: var(--soluk); font-size: 12px; padding: 12px 16px 30px; }
@media (max-width: 600px) {
  .kart { padding: 14px; }
  .suzgecler > * { flex: 1 1 100%; }
}

tr.diger td { background: var(--uyari-zemin); }
td select.kategori-sec { width: 100%; min-width: 180px; padding: 4px 6px; font-size: 13px; }
.kaynak-rozeti { display: inline-block; margin-top: 3px; font-size: 11px; }
.duzeltme-bandi { background: var(--vurgu-acik); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.duzeltme-bandi .kural-formu { align-items: center; margin-top: 8px; }
.duzeltme-bandi label { font-size: 13px; color: var(--soluk); }
.kural-formu select { flex: 0 1 260px; }
div.toplam { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.excel-dugme { padding: 6px 12px; font-size: 14px; }
.kural-formu input.kisa, .kural-formu select.kisa { flex: 0 1 160px; }
.onay { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.onay input { width: auto; }
tr.bolum td { background: var(--gri-zemin); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--soluk); }
tr.net td { font-weight: 700; background: var(--vurgu-acik); border-top: 2px solid var(--metin); }
td.eksi { color: var(--kotu); }
.manuel-gider { margin-top: 18px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.manuel-gider h3 { font-size: 15px; margin: 0; }
.kaynak-rozeti + .sil { margin-left: 4px; }
.rehber { margin-top: 12px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 12px; }
.rehber summary { font-weight: 600; }
.rehber ol, .rehber ul { padding-left: 20px; margin: 8px 0; }
.rehber li { margin: 4px 0; }
.rehber h4 { margin: 14px 0 4px; font-size: 14px; }
.rehber table { font-size: 13px; margin-top: 6px; }

/* ---- grafikler: ince çubuklar, 4px yuvarlak uç, sıfır çizgisinde düz; metinler veri renginde değil */
.grafik-izgara { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
@media (max-width: 860px) { .grafik-izgara { grid-template-columns: minmax(0, 1fr); } }
.grafik { margin: 0; min-width: 0; }
.grafik figcaption { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.grafik-kap { overflow-x: auto; }
.grafik-kap svg { display: block; }
.grafik-kap text { fill: var(--soluk); font-size: 11px; font-family: inherit; }
.grafik-kap .izgara { stroke: var(--izgara); stroke-width: 1; }
.grafik-kap .taban { stroke: var(--soluk); stroke-width: 1; }
.grafik-kap .gelir { fill: var(--seri-gelir); }
.grafik-kap .gider { fill: var(--seri-gider); }
.grafik-kap .vurgu { fill: var(--metin); opacity: 0; }
.grafik-kap g.ay:hover .vurgu, .grafik-kap g.ay:focus .vurgu { opacity: .06; }
.grafik-kap g.ay:focus { outline: none; }
.grafik-lejant { display: flex; gap: 16px; font-size: 13px; color: var(--soluk); margin-bottom: 6px; }
.grafik-lejant span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px; background: var(--renk); }
.kategori-grafik { display: flex; flex-direction: column; gap: 10px; }
.kg-satir { display: flex; flex-direction: column; gap: 4px; border-radius: 4px; }
.kg-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.kg-ad { overflow-wrap: anywhere; }
.kg-deger { white-space: nowrap; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kg-deger strong { color: var(--metin); font-weight: 600; }
.kg-iz { height: 12px; }
.kg-cubuk { height: 12px; background: var(--seri-gider); border-radius: 0 4px 4px 0; min-width: 2px; }
.grafik-ipucu { position: fixed; z-index: 10; pointer-events: none; background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.grafik-ipucu .ip-baslik { color: var(--soluk); margin-bottom: 4px; }
.grafik-ipucu .ip-satir { display: flex; align-items: center; gap: 8px; }
.grafik-ipucu .ip-satir i { width: 12px; height: 2px; background: var(--renk); display: inline-block; }
.grafik-ipucu .ip-satir strong { font-variant-numeric: tabular-nums; }

/* ---- taksit yükü */
.taksit-ozet { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 18px; }
.rakam { display: flex; flex-direction: column; gap: 2px; }
.rakam-etiket { font-size: 13px; color: var(--soluk); }
.rakam strong { font-size: 26px; font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .rakam strong { font-size: 22px; } .taksit-ozet { gap: 16px; } }
.taksit-aylar { max-width: 640px; margin-bottom: 18px; }
#taksit-tablosu td:nth-child(2) { overflow-wrap: anywhere; min-width: 160px; }
#taksit-kaynak-kap summary { color: var(--soluk); }
.alt-baslik { font-size: 15px; margin: 18px 0 0; }

/* bağlantılar ve metin sayfaları (aydınlatma, kullanım koşulları) */
a { color: var(--vurgu); }
a.marka { text-decoration: none; color: inherit; }
.alt-baglantilar { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.alt-bilgi p { margin: 6px 0 0; }
.metin-sayfa { max-width: 820px; }
.metin-sayfa article { padding: 24px 28px; line-height: 1.65; }
.metin-sayfa h1 { font-size: 22px; margin: 0 0 4px; text-wrap: balance; }
.metin-sayfa h2 { font-size: 16px; margin: 24px 0 6px; }
.metin-sayfa p, .metin-sayfa li { max-width: 72ch; }
.metin-sayfa ul { padding-left: 20px; }
.metin-sayfa li + li { margin-top: 6px; }
.taslak-uyari { background: var(--uyari-zemin); border: 1px solid var(--uyari-cizgi); color: var(--metin);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }