/* Birben Otomasyon — kurumsal panel */

/* Renkler Birben logosundan alındı: turuncu-kırmızı degrade + lacivert yazı. */
:root {
  --turuncu:      #ef5a24;
  --turuncu-koyu: #d8401f;
  --turuncu-acik: #f79433;
  --lacivert:     #3d4a5c;

  --marka:       #ffffff;          /* başlık zemini — logo üzerinde okunsun diye açık */
  --marka-yazi:  #3d4a5c;
  --marka-soluk: #7d8794;
  --vurgu:       var(--turuncu);

  --zemin:       #f6f4f2;
  --yuzey:       #ffffff;
  --yuzey-alt:   #fbf8f6;
  --kenar:       #e6e1dc;
  --kenar-koyu:  #d3ccc5;

  --yazi:        #23262b;
  --soluk:       #6e7480;

  --gelir:       #12794f;
  --gider:       #c0392b;

  --golge:       0 1px 2px rgba(61, 74, 92, .07), 0 1px 3px rgba(61, 74, 92, .05);
  --yuvarlak:    10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marka:       #ffffff;        /* logo her temada okunsun diye başlık açık kalır */
    --marka-yazi:  #3d4a5c;
    --marka-soluk: #7d8794;
    --vurgu:       var(--turuncu);

    --zemin:      #171514;
    --yuzey:      #211e1c;
    --yuzey-alt:  #272321;
    --kenar:      #37312d;
    --kenar-koyu: #473f3a;

    --yazi:       #ece8e4;
    --soluk:      #a29a93;

    --gelir:      #4cc38a;
    --gider:      #ff7a6b;

    --golge:      none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Başlık */
.ust {
  background: var(--marka);
  color: var(--marka-yazi);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--turuncu);
  box-shadow: 0 2px 10px rgba(61, 74, 92, .10);
}

.ust-ic {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marka { display: flex; align-items: center; gap: 13px; }

.marka-logo { height: 54px; width: auto; display: block; }

.marka-yazi { display: flex; flex-direction: column; line-height: 1.2; }

.marka-yazi small {
  font-size: 11.5px;
  color: var(--marka-soluk);
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 13px;
  border-left: 2px solid var(--turuncu-acik);
}

.ay-secici {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--marka-soluk);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ay-secici input {
  background: #fff;
  border: 1px solid var(--kenar-koyu);
  color: var(--marka-yazi);
  border-radius: 7px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color-scheme: light;
}

.ust-sag { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.kullanici { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--marka-soluk); }

.cikis {
  background: transparent;
  border: 1px solid var(--kenar-koyu);
  color: var(--marka-yazi);
  border-radius: 6px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.cikis:hover { border-color: var(--turuncu); color: var(--turuncu-koyu); }

/* -------------------------------------------------------------- Giriş ekranı */
.giris-sayfasi {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(239, 90, 36, .16), transparent 70%),
    var(--zemin);
  padding: 24px;
}

.giris-kutu { width: min(400px, 100%); }

.giris-marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.giris-marka img { height: 96px; width: auto; }

.giris-marka span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--soluk);
}

.giris-form { margin-bottom: 0; }

/* ------------------------------------------------------------- Sekmeler */
.sekmeler {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.sekmeler button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;                 /* turuncu alt çizgiyle hizalansın */
  color: var(--marka-soluk);
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}

.sekmeler button:hover { color: var(--turuncu-koyu); }

.sekmeler button[aria-selected="true"] {
  color: var(--turuncu-koyu);
  border-bottom-color: var(--turuncu-koyu);
}

/* ----------------------------------------------------------------- Ana */
main { max-width: 1120px; margin: 0 auto; padding: 22px 20px 60px; }

section[hidden] { display: none; }

/* ------------------------------------------------------------- KPI kartları */
.kpi-satiri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 720px) {
  .kpi-satiri { grid-template-columns: 1fr; }
}

.kpi {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--kenar-koyu);
}

.kpi-gelir::before { background: var(--gelir); }
.kpi-gider::before { background: var(--gider); }
.kpi-fark::before  { background: var(--vurgu); }

.kpi-etiket {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--soluk);
}

.kpi-deger {
  font-size: 27px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
  line-height: 1.25;
}

.kpi-gelir .kpi-deger { color: var(--gelir); }
.kpi-gider .kpi-deger { color: var(--gider); }

.kpi-alt { font-size: 12.5px; color: var(--soluk); }

/* ---------------------------------------------------------------- Kartlar */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  margin-bottom: 16px;
  overflow: hidden;
}

.kart-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--kenar);
  background: var(--yuzey-alt);
}

.kart-ust h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .2px; }
.kart-not { font-size: 12.5px; color: var(--soluk); }
.kart-toplam { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.ikili .kart { margin-bottom: 0; }

/* ----------------------------------------------------------------- Form */
.alanlar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 16px 18px;
}

.alanlar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--soluk);
  min-width: 0;
}

.alanlar label.genis { flex: 1 1 220px; }

input, select {
  background: var(--yuzey);
  border: 1px solid var(--kenar-koyu);
  border-radius: 7px;
  color: var(--yazi);
  padding: 8px 11px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus {
  outline: 0;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 18%, transparent);
}

input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

.dugme {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 20px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s;
}

.dugme.birincil {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-koyu));
  color: #fff;
}

.dugme.birincil:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--turuncu-koyu), #bd3517);
}
.dugme:disabled { opacity: .55; cursor: default; }

.sil {
  background: none;
  border: 0;
  color: var(--soluk);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 3px 7px;
  border-radius: 5px;
}

.sil:hover { color: var(--gider); background: color-mix(in srgb, var(--gider) 10%, transparent); }

/* Giriş formu: tek sütun, alanlar tam genişlikte.
   Bu blok `.alanlar`dan SONRA gelmeli — yoksa oradaki align-items: flex-end kazanır
   ve alanlar sağa yaslanıp dağınık görünür. */
.alanlar.giris-alanlar {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px;
}

.alanlar.giris-alanlar label,
.alanlar.giris-alanlar label.genis {
  flex: 0 0 auto;
  width: 100%;
  gap: 7px;
}

.alanlar.giris-alanlar input { width: 100%; padding: 11px 13px; font-size: 15.5px; }

.alanlar.giris-alanlar .genis-dugme {
  width: 100%;
  padding: 13px;
  margin-top: 2px;
  font-size: 15.5px;
}

.giris-form .kart-ust { justify-content: center; }
.giris-form .kart-ust h2 { font-size: 15px; }
.giris-form .durum { text-align: center; padding: 0 20px 18px; }

/* ---------------------------------------------------------------- Durum */
.durum { margin: 0; padding: 0 18px 16px; font-size: 13.5px; color: var(--soluk); }
.durum.iyi { color: var(--gelir); }
.durum.kotu { color: var(--gider); }

/* --------------------------------------------------------------- Tablolar */
.tablo-sar { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }

th, td { padding: 10px 18px; text-align: left; white-space: nowrap; }

th {
  color: var(--soluk);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kenar);
}

tbody td { border-bottom: 1px solid var(--kenar); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--yuzey-alt); }

td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }

tfoot td {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-top: 1.5px solid var(--kenar-koyu);
  background: var(--yuzey-alt);
}

.rozet {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--kenar-koyu);
  color: var(--soluk);
}

.rozet.api { border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); color: var(--vurgu); }

.gelir-renk { color: var(--gelir); font-weight: 600; }
.gider-renk { color: var(--gider); font-weight: 600; }

.bos { color: var(--soluk); font-style: italic; }

/* -------------------------------------------------------------- Bildirim */
.bildirim {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--lacivert);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 6px 22px rgba(16, 35, 61, .28);
  z-index: 50;
  max-width: min(420px, calc(100vw - 40px));
}

.bildirim.hata { background: var(--gider); }

/* ============================================================ Mobil (≤720px) */
@media (max-width: 720px) {
  body { font-size: 15.5px; }

  .ust-ic { padding: 11px 14px; gap: 12px; }
  .marka-logo { height: 42px; }
  .marka-yazi small { font-size: 10.5px; padding-left: 10px; }
  .giris-marka img { height: 82px; }

  /* Dönem seçici ve kullanıcı satırı tam genişlikte, başlıkla sıkışmasın */
  .ust-sag { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .ay-secici { justify-content: space-between; }
  .ay-secici input { flex: 0 1 190px; }
  .kullanici { justify-content: space-between; }

  .sekmeler { padding: 0 8px; }
  .sekmeler button { flex: 1; padding: 12px 8px; font-size: 14.5px; text-align: center; }

  main { padding: 14px 12px 48px; }

  .kpi { padding: 14px 16px; }
  .kpi-deger { font-size: 25px; }

  .ikili { grid-template-columns: 1fr; gap: 12px; }
  .kart { margin-bottom: 12px; }
  .kart-ust { padding: 12px 14px; }

  /* Form alanları alt alta ve tam genişlikte — telefonda yan yana sıkışmasın */
  .alanlar { padding: 14px; gap: 12px; }
  .alanlar label, .alanlar label.genis { flex: 1 1 100%; }
  .alanlar .dugme { width: 100%; padding: 13px 20px; font-size: 15.5px; }

  /* Dokunma hedefleri büyüsün */
  input, select { padding: 11px 12px; font-size: 16px; }   /* 16px: iOS'ta yakınlaştırmayı önler */

  .durum { padding: 0 14px 14px; }

  th, td { padding: 10px 12px; }
  th { font-size: 11px; }
  table { font-size: 14px; }

  .sil { padding: 7px 10px; font-size: 13.5px; }

  .bildirim {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .marka-yazi { display: none; }   /* dar ekranda yalnızca logo kalsın */
  .kpi-deger { font-size: 23px; }
  th, td { padding: 9px 10px; }
}