@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#17212B;
  --ink-soft:#2B3A47;
  --paper:#F3F1EA;
  --paper-line:#DAD5C7;
  --card:#FFFFFF;
  --yesil:#1F6F5C;
  --yesil-soft:#E4EFEA;
  --kiremit:#A6432E;
  --kiremit-soft:#F3E4E0;
  --metin:#1E2530;
  --metin-soluk:#6B7178;
  --border:#E1DDD1;
  --radius:6px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--metin);
  font-family:'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:15px;
  line-height:1.5;
}

.num, td.num, .tutar, table tfoot td{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- Giriş ekranı yerleşimi ---- */
.icerik-girissiz{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ---- Uygulama iskeleti ---- */
.app{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:220px;
  flex-shrink:0;
  background:var(--ink);
  color:#D8DEE4;
  display:flex;
  flex-direction:column;
  padding:24px 0;
}
.marka{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:18px;
  color:#fff;
  padding:0 24px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:12px;
  letter-spacing:.02em;
}
.sidebar nav{display:flex; flex-direction:column; flex:1;}
.sidebar nav a{
  color:#B7C0C9;
  text-decoration:none;
  padding:10px 24px;
  font-size:14.5px;
  border-left:3px solid transparent;
}
.sidebar nav a:hover{ color:#fff; background:rgba(255,255,255,.04); }
.sidebar nav a.aktif{
  color:#fff;
  border-left-color:var(--yesil);
  background:rgba(31,111,92,.18);
  font-weight:600;
}
.sidebar-alt{
  padding:16px 24px 0;
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:12px;
}
.kullanici-adi{ color:#fff; font-size:14px; margin-bottom:6px; }
.sidebar-alt a{ color:#9BB3A8; font-size:13px; text-decoration:none; }
.sidebar-alt a:hover{ text-decoration:underline; }

.icerik{
  flex:1;
  padding:32px 40px;
  max-width:1180px;
}

h1{ font-size:22px; margin:0 0 4px; font-weight:700; }
h2{ font-size:17px; margin:0 0 14px; font-weight:600; }
.sayfa-ust{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.alt-baslik{ color:var(--metin-soluk); font-size:14px; margin-bottom:22px;}

/* ---- Kartlar / özet kutuları ---- */
.ozet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.ozet-kart{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
}
.ozet-kart .etiket{ color:var(--metin-soluk); font-size:13px; margin-bottom:8px; }
.ozet-kart .deger{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; }
.ozet-kart .deger.pozitif{ color:var(--yesil); }
.ozet-kart .deger.negatif{ color:var(--kiremit); }

.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:24px;
}

/* ---- Tablolar (defter görünümü) ---- */
table{ width:100%; border-collapse:collapse; }
th, td{
  text-align:left;
  padding:9px 10px;
  border-bottom:1px solid var(--paper-line);
  font-size:14px;
}
th{
  font-weight:600;
  color:var(--metin-soluk);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-bottom:2px solid var(--ink);
}
td.num, th.num{ text-align:right; }
tbody tr:hover{ background:#FAF9F5; }
tfoot td{ font-weight:600; border-top:2px solid var(--ink); border-bottom:none; }

.rozet{
  display:inline-block;
  font-size:12px;
  padding:2px 9px;
  border-radius:100px;
  font-weight:600;
}
.rozet-tahsilat, .rozet-alacak, .rozet-tahsil_edildi{ background:var(--yesil-soft); color:var(--yesil); }
.rozet-odeme, .rozet-borc, .rozet-karsiliksiz{ background:var(--kiremit-soft); color:var(--kiremit); }
.rozet-portfoyde{ background:#EFEAD8; color:#8A6D1D; }
.rozet-ciro_edildi, .rozet-iade_edildi{ background:#E7E7E7; color:#555; }

/* ---- Formlar ---- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:16px; }
label{ display:block; font-size:13px; color:var(--metin-soluk); margin-bottom:5px; }
input, select, textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14.5px;
  font-family:inherit;
  background:#fff;
  color:var(--metin);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--yesil);
  outline-offset:1px;
  border-color:var(--yesil);
}
.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:4px;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{ background:var(--ink-soft); }
.btn-yesil{ background:var(--yesil); }
.btn-yesil:hover{ background:#195a4a; }
.btn-metin{ background:transparent; color:var(--metin-soluk); padding:10px 12px;}
.btn-kucuk{ padding:5px 12px; font-size:13px; }

.giris-kutu{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px;
  width:100%;
  max-width:360px;
}
.giris-kutu .marka{
  color:var(--ink);
  padding:0; border:none; margin:0 0 26px;
  font-size:20px;
}

.flash{ padding:12px 16px; border-radius:4px; margin-bottom:20px; font-size:14px; }
.flash-basari{ background:var(--yesil-soft); color:var(--yesil); }
.flash-hata{ background:var(--kiremit-soft); color:var(--kiremit); }

.bos-durum{ color:var(--metin-soluk); font-size:14px; padding:20px 0; text-align:center; }
.not-kutu{ background:#EFEAD8; border:1px solid #E0D6B0; color:#6B5410; padding:12px 16px; border-radius:4px; font-size:13.5px; margin-bottom:20px; }

@media (max-width: 780px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; overflow-x:auto; padding:12px; align-items:center; }
  .sidebar nav{ flex-direction:row; }
  .marka{ border:none; padding:0 16px 0 4px; margin:0; }
  .sidebar-alt{ display:none; }
  .icerik{ padding:20px; }
}