:root {
  --zemin: #f4f6f9; --kart: #fff; --metin: #1d2733; --soluk: #66768a; --cizgi: #dde3ea;
  --ana: #1f4e78; --ana-acik: #e7eef6; --yesil: #1e7b4a; --kirmizi: #b3261e; --turuncu: #b86e00;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--zemin); color: var(--metin); }
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
.ust { display: flex; align-items: center; gap: 24px; background: var(--ana); color: #fff; padding: 10px 24px; position: sticky; top: 0; z-index: 5; }
.ust .marka { color: #fff; font-weight: 600; font-size: 16px; }
.ust nav { display: flex; gap: 16px; flex-wrap: wrap; }
.ust nav a { color: #d6e4f2; }
main { padding: 20px 24px 60px; max-width: 1600px; margin: 0 auto; }
h1 { font-size: 22px; margin: 4px 0 6px; }
h1 small, h2 small { font-size: 13px; color: var(--soluk); font-weight: 400; }
h2 { font-size: 17px; margin: 26px 0 10px; }
h3 { font-size: 15px; margin: 8px 0; }
.alt, .yol { color: var(--soluk); margin: 0 0 12px; }
.kucuk { font-size: 12px; color: var(--soluk); }
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 14px; }
.kart span { display: block; font-size: 12px; color: var(--soluk); }
.kart b { font-size: 18px; font-variant-numeric: tabular-nums; }
.kart.vurgu { border-color: var(--ana); background: var(--ana-acik); }
a.kart { display: block; color: inherit; text-decoration: none; position: relative; transition: border-color .15s, box-shadow .15s; }
a.kart:hover { border-color: var(--ana); box-shadow: 0 2px 8px rgba(31, 78, 120, .15); text-decoration: none; }
a.kart::after { content: "›"; position: absolute; right: 12px; top: 8px; color: var(--soluk); font-size: 18px; }
a.kart:hover span { color: var(--ana); }
section[id], h2[id], #fon-tablosu { scroll-margin-top: 60px; }
.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.kutu, .izgara > section { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.izgara > section h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; background: var(--kart); border: 1px solid var(--cizgi); }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
th { background: #eef2f6; font-weight: 600; font-size: 12.5px; }
td.s, th.s { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 600; background: #f7f9fb; }
tbody tr:hover { background: #fafcff; }
table.dar { margin-top: 10px; }
td.bos, p.bos { color: var(--soluk); text-align: center; padding: 16px; }
td.pozitif { color: var(--yesil); font-weight: 600; }
/* geniş ekranda yatay kaydırma kabı yok: aksi halde yapışkan başlık kabın içinde kalır ve çalışmaz */
.tablo-kap { overflow-x: visible; }
@media (max-width: 1100px) { .tablo-kap { overflow-x: auto; } }
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--soluk); }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #c3ccd6; border-radius: 5px; background: #fff; color: var(--metin); }
button, .dugme { font: inherit; padding: 7px 14px; border-radius: 5px; border: 1px solid var(--ana); background: var(--ana); color: #fff; cursor: pointer; display: inline-block; }
button:hover, .dugme:hover { filter: brightness(1.1); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ikincil, .dugme.ikincil { background: #fff; color: var(--ana); }
button.tehlike { background: var(--kirmizi); border-color: var(--kirmizi); }
button.link { background: none; border: none; color: var(--ana); padding: 0; text-decoration: underline; }
.filtre, .satir-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.satir-form form { margin: 0; }
label.satir { display: flex; flex-direction: row; align-items: center; gap: 6px; }
label.satir input[type=checkbox] { width: auto; margin: 0; }
.mesaj { padding: 9px 14px; border-radius: 6px; margin-bottom: 8px; border: 1px solid; }
.mesaj.ok { background: #e8f5ee; border-color: #a6d8bb; color: var(--yesil); }
.mesaj.hata { background: #fdecea; border-color: #f0b4ae; color: var(--kirmizi); }
.mesaj.uyari { background: #fff4e0; border-color: #f1cf91; color: var(--turuncu); }
.rozet { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; vertical-align: middle; }
.rozet.gri { background: #e8ecf0; color: #4a5868; }
.rozet.mavi { background: #e2ecf7; color: var(--ana); }
.rozet.turuncu { background: #fff0d6; color: var(--turuncu); }
.rozet.yesil { background: #dff3e7; color: var(--yesil); }
.rozet.mor { background: #ece4f7; color: #5b3a8c; }
.rozet.kirmizi { background: #fbe1de; color: var(--kirmizi); }
.uyarilar .rozet { margin-right: 6px; }
.sekmeler a { margin-right: 12px; padding: 4px 0; }
.sekmeler a.aktif { font-weight: 700; border-bottom: 2px solid var(--ana); }
.sayfalama { display: flex; gap: 16px; justify-content: center; padding: 12px; }
tr[data-yid], tr[data-href] { cursor: pointer; }
tr.secili, tr.secili:hover { background: var(--ana-acik); }
#perde { position: fixed; inset: 0; background: rgba(15, 30, 50, .25); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
#perde.acik { opacity: 1; pointer-events: auto; }
#yan-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(580px, 100%); background: var(--kart);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .15); overflow-y: auto; padding: 18px 22px 40px; z-index: 21;
  transform: translateX(105%); transition: transform .22s ease; }
#yan-panel.acik { transform: translateX(0); }
#yan-panel h2 { margin: 0 0 4px; font-size: 18px; }
#yan-panel h3 { margin: 18px 0 6px; }
.panel-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--cizgi); padding-bottom: 10px; }
.panel-kapat { background: none; border: none; color: var(--soluk); font-size: 26px; line-height: 1; padding: 0 4px; }
.panel-kapat:hover { color: var(--metin); }
dl.bilgi { display: grid; grid-template-columns: 120px 1fr; gap: 5px 12px; margin: 14px 0; }
dl.bilgi dt { color: var(--soluk); font-size: 12.5px; }
dl.bilgi dd { margin: 0; word-break: break-all; }
.kartlar.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kartlar.mini .kart b { font-size: 15px; }
details.hesap-duzelt { margin: 10px 0 14px; border: 1px solid var(--cizgi); border-radius: 6px; padding: 8px 12px; background: #fafcff; }
details.hesap-duzelt summary { cursor: pointer; color: var(--ana); font-weight: 600; }
details.hesap-duzelt .form { margin-top: 10px; max-width: 460px; }
td.islemler { white-space: nowrap; }
td.islemler form { display: inline; margin-left: 8px; }
.duzenle-satir { background: #fafcff; padding: 8px; border-radius: 6px; margin: 4px 0; }
.duzenle-satir label { display: flex; flex-direction: column; font-size: 12px; color: var(--soluk); gap: 2px; }
thead th.s { white-space: normal; min-width: 96px; }
th.siralanabilir { cursor: pointer; user-select: none; }
th.siralanabilir:hover { background: #e2e9f1; }
th.siralanabilir::after { content: " ↕"; color: #aab5c2; font-size: 11px; }
th.sirali-asc::after { content: " ▲"; color: var(--ana); }
th.sirali-desc::after { content: " ▼"; color: var(--ana); }
.fon-kodu { display: inline-block; background: var(--ana); color: #fff; border-radius: 6px; padding: 1px 10px; font-size: 18px; vertical-align: 2px; }
input.para { text-align: right; font-variant-numeric: tabular-nums; }
code { background: #eef2f6; padding: 1px 4px; border-radius: 3px; }

/* gg.aa.yyyy tarih girişi + takvim düğmesi */
.tarih-kutu { display: flex; gap: 4px; align-items: stretch; }
.tarih-kutu input.tarih-giris { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.tarih-kutu .takvim { padding: 0 10px; border: 1px solid #c3ccd6; border-radius: 5px; background: #fff; cursor: pointer; color: var(--metin); }
.tarih-kutu input[type=date] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* dağıtım tutarı dökümü */
table.dokum { width: auto; min-width: 460px; margin: 4px 0 14px; }
table.dokum th, table.dokum td { padding: 4px 10px; }
table.dokum th { text-align: left; font-weight: 600; background: none; }

tr.secili td { background: #eaf2fb; }

/* kayan (yapışkan) tablo başlıkları: sayfa kaydırılınca üst menünün hemen altında sabit kalır.
   --ust-yukseklik menü yüksekliğidir (base.html'deki betik ayarlar; menü iki satıra inerse de doğru kalır).
   border-collapse'da kenar çizgisi başlıkla kaymadığından alt çizgi gölgeyle verilir. */
main thead th { position: sticky; top: var(--ust-yukseklik, 48px); z-index: 4;
                box-shadow: inset 0 -1px 0 var(--cizgi), 0 2px 3px rgba(0, 0, 0, .06); }

/* üst menü: oturum açan kullanıcı */
.kullanici-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.kullanici-menu a { color: #fff; }
.kullanici-menu form { display: inline; margin: 0; }
.kullanici-menu button.link { color: #fff; text-decoration: underline; }
/* giriş sayfası */
.giris-kap { max-width: 380px; margin: 9vh auto; }
.giris-kap h1 { font-size: 20px; margin-bottom: 4px; }
.kullanici-menu select.rol-secim { font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.kullanici-menu select.rol-secim.gorunum { background: #fff0d6; color: #8a4b00; font-weight: 600; }