/* ── Personel Maliyet Portalı · "Defter" tasarım sistemi ─────────────
   Kimlik: muhasebe defteri. Koyu defter yeşili kapak (üst şerit),
   pirinç cetvel çizgisi, serin kâğıt zemini. İmza: tüm para sütunları
   IBM Plex Mono + tabular rakamlarla kuruşuna kadar alt alta hizalanır.
   Kâr = yeşil mürekkep, zarar = ıstampa kırmızısı. */

:root {
  --defter:       #0d4a3a;   /* kapak yeşili */
  --defter-koyu:  #082e24;
  --defter-acik:  #16624e;
  --pirinc:       #b98a2f;   /* cetvel / vurgu */
  --kagit:        #eef1ec;   /* zemin */
  --yuzey:        #ffffff;
  --murekkep:     #1c2721;   /* ana metin */
  --soluk:        #5f6f66;   /* ikincil metin */
  --cizgi:        #d7ded7;
  --cizgi-koyu:   #b9c4ba;
  --kar:          #176b3c;
  --kar-zemin:    #e6f1e8;
  --zarar:        #a8352a;
  --zarar-zemin:  #f7e9e6;
  --uyari-zemin:  #f6efdd;
  --govde-font:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --marka-font:   "Sora", "IBM Plex Sans", sans-serif;
  --para-font:    "IBM Plex Mono", Consolas, monospace;
  --golge:        0 1px 2px rgba(18, 35, 28, .06), 0 4px 16px rgba(18, 35, 28, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--govde-font);
  background: var(--kagit);
  color: var(--murekkep);
  font-size: 14px;
  line-height: 1.45;
}
main { padding: 18px 22px 48px; max-width: 1520px; margin: 0 auto; }

::selection { background: #cfe3d8; }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; border-radius: 3px; }

/* ── Üst şerit: defter kapağı ──────────────────────────────────── */
.topnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  background: linear-gradient(180deg, var(--defter) 0%, var(--defter-koyu) 100%);
  border-bottom: 3px solid var(--pirinc);
  padding: 8px 18px; position: sticky; top: 0; z-index: 50;
}
.brand {
  color: #f2efe6; font-family: var(--marka-font); font-weight: 700;
  font-size: 15px; letter-spacing: .02em; margin-right: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-isaret {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--pirinc); color: var(--defter-koyu);
  font-family: var(--para-font); font-weight: 600; font-size: 15px;
}
.topnav a {
  color: #c8d6cc; text-decoration: none; padding: 8px 12px;
  border-radius: 7px; white-space: nowrap; font-weight: 500;
  transition: background .15s, color .15s;
}
.topnav a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.topnav a.aktif {
  background: rgba(185, 138, 47, .18); color: #f5e5bf;
  box-shadow: inset 0 -2px 0 var(--pirinc);
}
.topnav a.cikis { margin-left: auto; color: #e8b3a9; }
.topnav a.cikis:hover { background: rgba(168, 53, 42, .35); color: #fff; }

/* ── Başlıklar ─────────────────────────────────────────────────── */
h1 {
  font-family: var(--marka-font); font-size: 20px; font-weight: 700;
  letter-spacing: -.01em; margin: 10px 0 16px;
}
h2 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--soluk); margin: 18px 0 10px;
}
.panel h2, .grafik-kab h2 { margin-top: 0; }

/* ── Araç çubuğu + form denetimleri ───────────────────────────── */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bar label { font-weight: 600; color: var(--soluk); font-size: 13px; }

select, input[type=text], input[type=password], input[type=number], input[type=email] {
  padding: 7px 10px; border: 1px solid var(--cizgi-koyu); border-radius: 7px;
  font-size: 14px; font-family: var(--govde-font);
  background: var(--yuzey); color: var(--murekkep);
}
select:focus, input:focus { border-color: var(--defter-acik); outline: none;
  box-shadow: 0 0 0 3px rgba(13, 74, 58, .12); }
input[type=file] { font-size: 13px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--defter); }

button, .btn {
  padding: 8px 15px; border: none; border-radius: 7px;
  background: var(--defter); color: #f2efe6;
  font-size: 14px; font-weight: 600; font-family: var(--govde-font);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, transform .05s;
}
button:hover, .btn:hover { background: var(--defter-acik); }
button:active, .btn:active { transform: translateY(1px); }
.btn-gri { background: #6a7a70; } .btn-gri:hover { background: #58685e; }
.btn-kirmizi { background: var(--zarar); } .btn-kirmizi:hover { background: #8d2b21; }
.btn-yesil { background: var(--kar); } .btn-yesil:hover { background: #115530; }
.btn-turuncu { background: var(--pirinc); color: #241a05; } .btn-turuncu:hover { background: #a3781f; color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ── Özet kartları ─────────────────────────────────────────────── */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 13px 16px 12px; box-shadow: var(--golge);
  border-top: 3px solid var(--defter);
}
.kart .etiket {
  font-size: 11px; color: var(--soluk); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.kart .deger {
  font-family: var(--para-font); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; margin-top: 5px; letter-spacing: -.01em;
}

/* ── Paneller ──────────────────────────────────────────────────── */
.panel {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 15px 18px; margin-bottom: 16px; box-shadow: var(--golge);
}
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .iki-kolon { grid-template-columns: 1fr; } }

/* ── Tablolar: defter sayfası ─────────────────────────────────── */
.tablo-kab {
  overflow-x: auto; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge);
}
table { border-collapse: collapse; width: 100%; }
th {
  background: #f4f6f2; text-align: left; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--soluk);
  padding: 9px 11px; border-bottom: 2px solid var(--cizgi-koyu);
  position: sticky; top: 0; white-space: nowrap; cursor: pointer; user-select: none;
}
th:hover { color: var(--defter); }
td { padding: 7px 11px; border-bottom: 1px solid #e8ede7; white-space: nowrap; }
tr:hover td { background: #f2f6f1; }

/* İmza: para sütunları tabular mono — kuruşlar alt alta hizalanır */
td.sag, th.sag { text-align: right; }
td.sag {
  font-family: var(--para-font); font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: -.01em;
}
td.orta, th.orta { text-align: center; }

td a { color: var(--defter); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; text-decoration-color: var(--pirinc); }

tr.pos td { color: var(--kar); background: var(--kar-zemin); }
tr.neg td { color: var(--zarar); background: var(--zarar-zemin); }
tr.pos:hover td { background: #dcebdf; }
tr.neg:hover td { background: #f0ddd8; }
tr.neu td { color: var(--soluk); }
tr.toplam td {
  font-weight: 600; background: #ecefe9; border-top: 2px solid var(--pirinc);
  border-bottom: none;
}
td.tik { text-align: center; font-size: 16px; cursor: pointer; }

/* Düzenlenebilir hücreler: kalem imleci + kesikli altçizgi ipucu */
td.duzenle { cursor: cell; }
td.duzenle:hover {
  outline: 2px solid var(--defter-acik); outline-offset: -2px;
  border-radius: 4px; background: #eef6ef;
}
td input.hucre-edit {
  width: 112px; padding: 4px 7px; font-size: 13px; text-align: right;
  font-family: var(--para-font);
  border: 2px solid var(--defter-acik); border-radius: 5px;
}
td.kaydedildi { animation: kaydet-parla 1s ease-out; }
@keyframes kaydet-parla { 0% { background: #d3ecd9; } 100% { background: transparent; } }

/* ── Durum / mesaj öğeleri ─────────────────────────────────────── */
.uyari-listesi { margin: 0; padding-left: 20px; color: var(--zarar); }
.uyari-listesi li { margin: 5px 0; }
.tik-ok { color: var(--kar); font-weight: 600; }
.tik-hata { color: var(--zarar); font-weight: 600; }

.rozet {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.rozet-mevcut { background: #edefeb; color: var(--soluk); }
.rozet-yeni { background: var(--kar-zemin); color: var(--kar); }
.rozet-donus { background: #e3ecf5; color: #2d5a86; }
.rozet-cikis { background: var(--zarar-zemin); color: var(--zarar); }

.kilit-uyari {
  background: var(--zarar-zemin); color: var(--zarar);
  border: 1px solid #e5c4bc; border-left: 4px solid var(--zarar);
  padding: 9px 14px; border-radius: 8px; font-weight: 600; margin-bottom: 14px;
}
.bilgi {
  background: var(--uyari-zemin); border: 1px solid #e4d5ac;
  border-left: 4px solid var(--pirinc); color: #4d3f18;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; line-height: 1.55;
}
.hata-mesaj {
  background: var(--zarar-zemin); border: 1px solid #e5c4bc; color: var(--zarar);
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px;
}

.form-tablo { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; align-items: center; max-width: 480px; }
.form-tablo label { font-weight: 600; color: var(--soluk); font-size: 13px; }

/* ── Giriş sayfası ─────────────────────────────────────────────── */
.giris-sayfa {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(13, 74, 58, .28), transparent 60%),
    var(--defter-koyu);
}
.giris-kutu {
  width: min(92vw, 370px); background: var(--yuzey);
  padding: 34px 32px 30px; border-radius: 14px;
  border-top: 4px solid var(--pirinc);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.giris-marka { display: flex; justify-content: center; margin-bottom: 10px; }
.giris-marka .brand-isaret { width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
.giris-kutu h1 { text-align: center; margin: 6px 0 2px; }
.giris-alt { text-align: center; color: var(--soluk); font-size: 12.5px; margin: 0 0 18px; }
.giris-kutu label { font-weight: 600; color: var(--soluk); font-size: 13px; }
.giris-kutu input { width: 100%; margin: 8px 0 16px; }
.giris-kutu button { width: 100%; padding: 10px; }

/* ── Grafik + günlük ───────────────────────────────────────────── */
.grafik-kab {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 12px; box-shadow: var(--golge);
}
.log-kutu {
  background: var(--defter-koyu); color: #cfe0d4;
  font-family: var(--para-font); font-size: 12.5px;
  padding: 14px; border-radius: 8px; max-height: 420px; overflow-y: auto;
  white-space: pre-wrap; line-height: 1.6;
}

/* ── Diyalog ───────────────────────────────────────────────────── */
dialog {
  border: none; border-radius: 12px; border-top: 4px solid var(--pirinc);
  padding: 22px; min-width: 340px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(8, 30, 24, .55); }

.pozitif { color: var(--kar); }
.negatif { color: var(--zarar); }

/* ── Duyarlılık + erişilebilirlik ──────────────────────────────── */
@media (max-width: 720px) {
  main { padding: 12px 10px 40px; }
  .topnav { padding: 6px 8px; }
  .topnav a { padding: 7px 9px; font-size: 13px; }
  h1 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}