/* AKF Admin — logodan türetilmiş palet:
   sarı çerçeve, açık mavi banner, koyu kahve yazı, krem zemin, yeşil harita. */
:root {
  --sari: #f7c325;
  --sari-koyu: #d9a20b;
  --mavi: #8fd2ec;
  --mavi-koyu: #2f88ad;
  --kahve: #41311f;
  --kahve-acik: #6b5136;
  --krem: #fdf0d3;
  --krem-koyu: #efd9ad;
  --yesil: #5f9e4a;
  --kirmizi: #c0483b;
  --zemin: #f6f1e7;
  --kart: #ffffff;
  --cizgi: #e3d8c4;
  --golge: 0 1px 2px rgba(65, 49, 31, .08), 0 4px 12px rgba(65, 49, 31, .06);
  --yuvarlak: 14px;
}

* { box-sizing: border-box; }

/* hidden özelliği her zaman kazansın. Aksi halde .onay-satir gibi
   display:flex veren bir sınıf, [hidden] öğeyi görünür bırakır. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--kahve);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--mavi-koyu); }

/* ---------- Giriş ekranı ---------- */
.giris-sayfa {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--mavi) 0%, var(--zemin) 55%);
  padding: 24px;
}

.giris-kart {
  width: 100%;
  max-width: 380px;
  background: var(--kart);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--golge);
  border: 3px solid var(--sari);
  text-align: center;
}

.giris-kart img { width: 130px; height: auto; margin-bottom: 8px; }
.giris-kart h1 { font-size: 20px; margin: 0 0 4px; }
.giris-kart p.alt { color: var(--kahve-acik); font-size: 13px; margin: 0 0 24px; }
.giris-kart form { text-align: left; }

/* ---------- Genel yerleşim ---------- */
.ust-bar {
  background: var(--kahve);
  color: var(--krem);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.ust-bar img { height: 40px; }
.ust-bar .marka { font-weight: 700; letter-spacing: .3px; }
.ust-bar .bosluk { flex: 1; }

.menu { display: flex; gap: 4px; flex-wrap: wrap; }

.menu a {
  color: var(--krem);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  opacity: .8;
}

.menu a:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
.menu a.aktif { background: var(--sari); color: var(--kahve); opacity: 1; }

.icerik { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

.sayfa-baslik {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sayfa-baslik h2 { margin: 0; font-size: 22px; }
.sayfa-baslik .bosluk { flex: 1; }

/* ---------- Kartlar ---------- */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 18px;
}

.kart + .kart { margin-top: 14px; }
.kart h3 { margin: 0 0 12px; font-size: 16px; }

.ozet-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ozet {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-left: 5px solid var(--sari);
  border-radius: var(--yuvarlak);
  padding: 14px 16px;
  box-shadow: var(--golge);
}

.ozet .etiket { font-size: 12px; color: var(--kahve-acik); text-transform: uppercase; letter-spacing: .4px; }
.ozet .deger { font-size: 26px; font-weight: 700; margin-top: 2px; }
.ozet.gecikmis { border-left-color: var(--kirmizi); }
.ozet.gecikmis .deger { color: var(--kirmizi); }
.ozet.tamam { border-left-color: var(--yesil); }

/* ---------- Form ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--kahve-acik); }

input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  font: inherit;
  color: var(--kahve);
  background: #fff;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mavi-koyu);
  box-shadow: 0 0 0 3px rgba(47, 136, 173, .15);
}

textarea { min-height: 70px; resize: vertical; }

.form-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 14px;
}

button {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  cursor: pointer;
  background: var(--sari);
  color: var(--kahve);
}

button:hover { background: var(--sari-koyu); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ikincil { background: var(--krem-koyu); }
button.sade { background: transparent; color: var(--kahve-acik); padding: 6px 10px; }
button.sade:hover { background: var(--krem); }
button.tam { width: 100%; margin-top: 20px; padding: 12px; }
button.kucuk { padding: 5px 11px; font-size: 13px; }
button.tehlike { background: transparent; color: var(--kirmizi); }
button.tehlike:hover { background: #fbe9e7; }

/* ---------- Görev listesi ---------- */
.gorev {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--cizgi);
}

.gorev:last-child { border-bottom: none; }

.gorev .kutu {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 2px;
  border: 2px solid var(--kahve-acik);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  color: var(--yesil);
  font-size: 15px;
  line-height: 1;
}

.gorev.bitti .kutu { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.gorev.bitti .baslik { text-decoration: line-through; color: var(--kahve-acik); }
.gorev .govde { flex: 1; min-width: 0; }
.gorev .baslik { font-weight: 600; }
.gorev .aciklama { font-size: 13px; color: var(--kahve-acik); margin-top: 2px; }

.gorev .satir-alt {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--kahve-acik);
}

.rozet {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--krem);
  border: 1px solid var(--krem-koyu);
  font-size: 12px;
  font-weight: 600;
}

.rozet.mavi { background: #e2f2f9; border-color: #bcdeeb; color: var(--mavi-koyu); }
.rozet.kirmizi { background: #fbe9e7; border-color: #f0c4bf; color: var(--kirmizi); }
.rozet.yesil { background: #e8f3e4; border-color: #c6debe; color: var(--yesil); }
.rozet.sari { background: #fdf3d8; border-color: var(--sari); color: var(--sari-koyu); }

.filtre-satir { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

.cip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--cizgi);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--kahve-acik);
}

.cip.aktif { background: var(--kahve); border-color: var(--kahve); color: var(--krem); }

.bos {
  text-align: center;
  color: var(--kahve-acik);
  padding: 36px 12px;
  font-size: 14px;
}

/* ---------- Bildirim (zil) ---------- */
.zil { position: relative; }

.zil > button {
  background: transparent;
  color: var(--krem);
  font-size: 19px;
  padding: 6px 10px;
}

.zil > button:hover { background: rgba(255, 255, 255, .1); }

.zil .sayac {
  position: absolute;
  top: 1px;
  right: 3px;
  background: var(--kirmizi);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
}

.zil-panel {
  position: absolute;
  right: 0;
  top: 46px;
  width: 330px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--kart);
  color: var(--kahve);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: 0 10px 30px rgba(65, 49, 31, .22);
  padding: 6px;
}

.zil-panel .bildirim { padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.zil-panel .bildirim:hover { background: var(--zemin); }
.zil-panel .bildirim.okunmadi { background: #fdf7e6; }
.zil-panel .bildirim .b-baslik { font-weight: 600; font-size: 14px; }
.zil-panel .bildirim .b-alt { font-size: 12px; color: var(--kahve-acik); margin-top: 2px; }

.zil-panel .zil-ust {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cizgi);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Modal ---------- */
.perde {
  position: fixed;
  inset: 0;
  background: rgba(65, 49, 31, .45);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--kart);
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(65, 49, 31, .3);
}

.modal h3 { margin: 0 0 4px; }
.modal .modal-alt { display: flex; gap: 10px; margin-top: 22px; }
.modal .modal-alt button { flex: 1; }

.uyari {
  background: #fbe9e7;
  border: 1px solid #f0c4bf;
  color: var(--kirmizi);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  margin-top: 14px;
}

.bilgi {
  background: #e2f2f9;
  border: 1px solid #bcdeeb;
  color: var(--mavi-koyu);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
}

.yakinda { text-align: center; padding: 60px 20px; color: var(--kahve-acik); }
.yakinda .buyuk { font-size: 44px; margin-bottom: 8px; }

@media (max-width: 640px) {
  .ust-bar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .menu { order: 3; width: 100%; }
  .icerik { padding: 16px 14px 60px; }
  /* Telefonda panel zile göre değil EKRANA göre yerleşsin.
     Zilden sağa hizalayınca genişlik sığmıyor ve sol taraf ekran dışında
     kalıyordu (zilin sağında "Çıkış" düğmesi de var). */
  .zil-panel {
    position: fixed;
    top: 58px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 65vh;
  }
}

/* Kapatılmış görevin izi — kim, ne zaman, hangi notla kapattı */
.kapanis {
  margin-top: 6px;
  font-size: 12px;
  color: var(--kahve-acik);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.kapanis-not {
  width: 100%;
  margin-top: 4px;
  padding: 7px 11px;
  background: var(--zemin);
  border-left: 3px solid var(--yesil);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--kahve);
}

.gorev-islem { display: flex; gap: 4px; align-items: flex-start; }
.gorev .kutu:hover { border-color: var(--yesil); background: #f0f8ec; }
.modal-alt-yazi { margin: 2px 0 0; font-size: 13px; color: var(--kahve-acik); }

@media (max-width: 640px) {
  .gorev-islem { flex-direction: column; }
}

/* ---------- Tablolar (etkinlik, muhasebe, rapor) ---------- */
.tablo-sar { overflow-x: auto; margin: 0 -4px; }

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}

.tablo th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--kahve-acik);
  border-bottom: 2px solid var(--cizgi);
  padding: 8px 10px;
  font-weight: 700;
}

.tablo td { padding: 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th.sag, .tablo td.sag { text-align: right; }
.tablo tbody tr.tiklanir { cursor: pointer; }
.tablo tbody tr.tiklanir:hover { background: var(--krem); }
.tablo tfoot td { padding: 12px 10px; border-top: 2px solid var(--cizgi); border-bottom: none; background: var(--zemin); }
.tablo tfoot tr td:first-child { border-radius: 0 0 0 10px; }
.tablo tfoot tr td:last-child { border-radius: 0 0 10px 0; }

.para { font-variant-numeric: tabular-nums; }
.kar-arti { color: var(--yesil); }
.kar-eksi { color: var(--kirmizi); }
.alt-yazi { font-size: 12px; color: var(--kahve-acik); white-space: normal; }
.ozet .ozet-alt { font-size: 12px; color: var(--kahve-acik); margin-top: 2px; }

/* ---------- Etkinlik kâr/zarar dökümü ---------- */
.hesap-tablo { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden; }

.hesap-satir {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cizgi);
}

.hesap-satir:last-child { border-bottom: none; }
.hesap-satir.alt { font-size: 13px; color: var(--kahve-acik); background: #fcfaf5; }
.hesap-satir.vurgu { background: var(--krem); font-weight: 600; }

.hesap-satir.sonuc {
  background: var(--kahve);
  color: var(--krem);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 16px;
}

.hesap-satir.sonuc.kar-arti { background: #3f6d31; color: #fff; }
.hesap-satir.sonuc.kar-eksi { background: #8f3227; color: #fff; }
.hesap-satir.sonuc small { font-weight: 600; opacity: .85; }

.hesap-onizleme {
  background: var(--krem);
  border: 1px solid var(--krem-koyu);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  margin-top: 10px;
}

.kdv-onizleme {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--kahve-acik);
  padding: 8px 2px 0;
}

.kdv-onizleme strong { color: var(--kahve); }

.not-kutu {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--zemin);
  border-left: 3px solid var(--mavi);
  border-radius: 0 9px 9px 0;
  font-size: 14px;
  white-space: pre-wrap;
}

.ayrac { border: none; border-top: 1px solid var(--cizgi); margin: 20px 0 4px; }

.bolum-baslik {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--kahve-acik);
  margin-bottom: 6px;
}

.onay-satir {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-weight: 500;
  color: var(--kahve);
}

.onay-satir input { width: auto; }

/* ---------- Kategori dağılım çubukları ---------- */
.iki-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.cubuk-satir { margin-bottom: 11px; }
.cubuk-ust { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; gap: 12px; }
.cubuk { height: 8px; background: var(--zemin); border-radius: 999px; overflow: hidden; }
.cubuk-dolu { height: 100%; border-radius: 999px; }
.cubuk-dolu.gider { background: var(--kirmizi); }
.cubuk-dolu.gelir { background: var(--yesil); }

@media (max-width: 640px) {
  .tablo { font-size: 13px; }
  .tablo td, .tablo th { padding: 8px 7px; }
  .hesap-satir.sonuc { font-size: 15px; }
}

/* ---------- Etkinlik arama / filtre ---------- */
.arama-satir {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.arama-satir input { flex: 1; min-width: 200px; }

/* Bekleyen (henüz kapatılmamış) etkinlik uyarısı */
.bekleyen-kart {
  background: #fdf3d8;
  border: 1px solid var(--sari);
  border-left: 5px solid var(--sari);
  color: var(--kahve);
  font-size: 14px;
  padding: 13px 16px;
  margin-bottom: 14px;
}

/* İptal edilen etkinlik satırı — listede dursun ama öne çıkmasın */
.tablo tbody tr.soluk td { opacity: .55; }
.tablo tbody tr.soluk:hover td { opacity: 1; }

/* ---------- Bildirim kartı ---------- */
.cihaz-satir {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--zemin);
  border-radius: 9px;
  margin-bottom: 6px;
  font-size: 14px;
}