/* ZEOX — EYMS Olgunluk ve Mükemmellik İndeksi */

:root {
  --lacivert: #1f3864;
  --mavi: #2e5c8a;
  --acik-mavi: #d9e2f3;
  --cok-acik: #f4f7fc;
  --metin: #1c2430;
  --soluk: #667085;
  --cizgi: #dfe4ec;
  --zemin: #f7f9fc;
  --kart: #ffffff;
  --yesil: #1a7f4b;
  --yesil-zemin: #e3f5ea;
  --sari: #96700a;
  --sari-zemin: #fdf3d8;
  --kirmizi: #b3261e;
  --kirmizi-zemin: #fdeceb;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

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

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

/* --- Üst bar ----------------------------------------------------------- */
.ust {
  background: var(--lacivert);
  color: #fff;
  box-shadow: var(--golge);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ust-ic {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 58px;
  flex-wrap: wrap;
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marka-rozet {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; color: var(--lacivert);
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px;
}
.marka-yazi { display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi strong { font-size: 17px; letter-spacing: .5px; }
.marka-yazi small { font-size: 10.5px; opacity: .78; }

.menu { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.menu a {
  color: #dce4f2; text-decoration: none;
  padding: 7px 13px; border-radius: 7px; font-size: 13.5px;
}
.menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu a.etkin { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.menu a.yardim-baglantisi::before { content: "? "; font-weight: 700; opacity: .8; }

.kullanici { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.kullanici-ad { color: #e8edf7; }
.kucuk-baglanti { color: #b9c7e0; text-decoration: none; font-size: 12px; }
.kucuk-baglanti:hover { color: #fff; text-decoration: underline; }
.satir-ici { display: inline; margin: 0; }
.dugme-sade {
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 0; border-radius: 6px; padding: 5px 11px;
  cursor: pointer; font-size: 12px; font-family: inherit;
}
.dugme-sade:hover { background: rgba(255, 255, 255, .26); }

.rozet {
  padding: 2px 8px; border-radius: 20px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.rozet-admin { background: #ffd970; color: #4a3600; }
.rozet-birim { background: #9fd5ff; color: #06325c; }
.rozet-izleyici { background: #d6dae2; color: #384150; }

/* --- Gövde ------------------------------------------------------------- */
.govde { max-width: 1600px; margin: 0 auto; padding: 22px 20px 60px; }
.alt {
  text-align: center; color: var(--soluk);
  font-size: 11.5px; padding: 18px; border-top: 1px solid var(--cizgi);
}

h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 12px; color: var(--lacivert); }
h3 { font-size: 14px; margin: 18px 0 8px; }
.alt-yazi { color: var(--soluk); font-size: 13px; margin: 0 0 18px; }

.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 10px; box-shadow: var(--golge); padding: 18px; margin-bottom: 18px;
}
.kart-baslik {
  font-weight: 600; color: var(--lacivert); font-size: 14.5px;
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: space-between;
}

/* --- Skor kutuları ----------------------------------------------------- */
.kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 14px 16px; box-shadow: var(--golge);
}
.kutu-etiket { font-size: 11.5px; color: var(--soluk); text-transform: uppercase; letter-spacing: .4px; }
.kutu-deger { font-size: 27px; font-weight: 700; color: var(--lacivert); line-height: 1.25; margin-top: 3px; }
.kutu-deger.bos { color: #b6bdc9; font-size: 20px; }
.kutu-alt { font-size: 12px; color: var(--soluk); margin-top: 2px; }

/* --- Tablolar ---------------------------------------------------------- */
.tablo-sarmal { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  background: var(--mavi); color: #fff; font-weight: 600;
  text-align: left; padding: 9px 10px; font-size: 12px;
  position: sticky; top: 0; z-index: 2;
}
th.orta, td.orta { text-align: center; }
td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
tbody tr:hover { background: var(--cok-acik); }
tr.vurgu td { background: var(--acik-mavi); font-weight: 600; }

.durum { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.durum-YEŞİL, .durum-yesil { background: var(--yesil-zemin); color: var(--yesil); }
.durum-SARI, .durum-sari { background: var(--sari-zemin); color: var(--sari); }
.durum-KIRMIZI, .durum-kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.durum-bos { background: #eef0f4; color: #8b93a1; }

.gecis-acik { color: var(--yesil); font-weight: 600; }
.gecis-kapali { color: var(--kirmizi); font-weight: 600; }
.gecis-paralel, .gecis-nihai, .gecis-bos { color: var(--soluk); }

/* --- İlerleme çubuğu --------------------------------------------------- */
.cubuk { height: 6px; background: #e9edf3; border-radius: 4px; overflow: hidden; min-width: 70px; }
.cubuk span { display: block; height: 100%; background: var(--mavi); border-radius: 4px; }
.cubuk-yazi { font-size: 11px; color: var(--soluk); }

/* --- Sekmeler ---------------------------------------------------------- */
.sekmeler {
  display: flex; gap: 3px; border-bottom: 2px solid var(--cizgi);
  margin-bottom: 16px; overflow-x: auto; padding-bottom: 0;
}
.sekme {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 9px 15px; cursor: pointer; font-size: 13px; font-family: inherit;
  color: var(--soluk); white-space: nowrap; margin-bottom: -2px; border-radius: 6px 6px 0 0;
}
.sekme:hover { background: var(--cok-acik); color: var(--lacivert); }
.sekme.etkin { color: var(--lacivert); font-weight: 700; border-bottom-color: var(--lacivert); }
.sekme .rozetcik {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: #eaeef5; color: var(--soluk); font-size: 10.5px; font-weight: 600;
}
.sekme.etkin .rozetcik { background: var(--acik-mavi); color: var(--lacivert); }
.pano { display: none; }
.pano.etkin { display: block; }

/* --- Form alanları ----------------------------------------------------- */
select, input[type=text], input[type=date], input[type=password], textarea {
  font-family: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; color: var(--metin);
  width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--acik-mavi); border-color: var(--mavi);
}
select:disabled, input:disabled, textarea:disabled {
  background: #f4f5f7; color: #8b93a1; cursor: not-allowed;
}
.puan-secim { width: 62px; text-align: center; font-weight: 700; }
.puan-secim.genis { width: 124px; text-align: left; }
.puan-1 { background: #fdeceb !important; color: #b3261e; }
.puan-2 { background: #fdf1e3 !important; color: #a35a09; }
.puan-3 { background: #fdf9d8 !important; color: #7a6b0a; }
.puan-4 { background: #eaf6e7 !important; color: #33701f; }
.puan-5 { background: #e3f5ea !important; color: #1a7f4b; }

/* ADKAR katılım ölçeği: seçenekler açıklamalarıyla gösterilir */
.puan-secim.adkar-secim {
  width: 100%; min-width: 195px; text-align: left;
  font-weight: 600; font-size: 12.5px; padding: 5px 6px;
}
.puan-rozet {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.puan-rozet.puan-1 { background: #fdeceb; color: #b3261e; }
.puan-rozet.puan-2 { background: #fdf1e3; color: #a35a09; }
.puan-rozet.puan-3 { background: #fdf9d8; color: #7a6b0a; }
.puan-rozet.puan-4 { background: #eaf6e7; color: #33701f; }
.puan-rozet.puan-5 { background: #e3f5ea; color: #1a7f4b; }

.olcek-serit {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 12px;
}
.olcek-baslik { font-weight: 700; color: var(--lacivert); }
.olcek-oge {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--cizgi);
  white-space: nowrap;
}
.olcek-oge.puan-1 { background: #fdeceb; color: #b3261e; border-color: #f3c9c6; }
.olcek-oge.puan-2 { background: #fdf1e3; color: #a35a09; border-color: #f0d8bb; }
.olcek-oge.puan-3 { background: #fdf9d8; color: #7a6b0a; border-color: #ece1a8; }
.olcek-oge.puan-4 { background: #eaf6e7; color: #33701f; border-color: #c9e4c2; }
.olcek-oge.puan-5 { background: #e3f5ea; color: #1a7f4b; border-color: #bfe4cf; }

/* v3: kriterlerin günlük dille açıklaması */
.sade-anlatim {
  font-size: 12px; color: #3c4756; margin-top: 4px;
  padding: 6px 10px; background: var(--cok-acik);
  border-left: 3px solid var(--acik-mavi); border-radius: 0 6px 6px 0;
}

.dugme {
  background: var(--lacivert); color: #fff; border: 0; border-radius: 7px;
  padding: 8px 15px; cursor: pointer; font-size: 13px; font-family: inherit;
  font-weight: 600; text-decoration: none; display: inline-block;
}
.dugme:hover { background: #16294a; }
.dugme.ikincil { background: #fff; color: var(--lacivert); border: 1px solid var(--cizgi); }
.dugme.ikincil:hover { background: var(--cok-acik); }
.dugme.kucuk { padding: 5px 10px; font-size: 12px; }

/* --- Uyarı kutuları ---------------------------------------------------- */
.uyari {
  padding: 11px 14px; border-radius: 8px; font-size: 13px;
  border-left: 4px solid; margin-bottom: 14px;
}
.uyari-bilgi { background: var(--cok-acik); border-color: var(--mavi); }
.uyari-dikkat { background: var(--sari-zemin); border-color: #d9a406; }
.uyari-hata { background: var(--kirmizi-zemin); border-color: var(--kirmizi); }
.uyari-basari { background: var(--yesil-zemin); border-color: var(--yesil); }

/* --- Giriş sayfası ----------------------------------------------------- */
.giris-sarmal {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, #1f3864, #2e5c8a);
  padding: 20px;
}
.giris-kart {
  background: #fff; border-radius: 14px; padding: 34px;
  width: 100%; max-width: 390px; box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}
.giris-kart h1 { text-align: center; color: var(--lacivert); font-size: 25px; letter-spacing: 1px; }
.giris-kart .alt-yazi { text-align: center; margin-bottom: 22px; }
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 12.5px; color: var(--soluk); margin-bottom: 4px; font-weight: 600; }
.alan input { padding: 9px 11px; }
.giris-kart .dugme { width: 100%; padding: 10px; font-size: 14px; margin-top: 6px; }

/* --- Rehber ------------------------------------------------------------ */
.rehber-duzen { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.rehber-menu { position: sticky; top: 74px; }
.rehber-menu a {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--metin); font-size: 13px; margin-bottom: 2px;
}
.rehber-menu a:hover { background: var(--cok-acik); }
.rehber-menu a.etkin { background: var(--acik-mavi); color: var(--lacivert); font-weight: 600; }
.menu-numara {
  width: 22px; height: 22px; border-radius: 50%; background: var(--lacivert);
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none;
}
.rehber-bolum { scroll-margin-top: 74px; }

.skala-satir { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); }
.skala-satir:last-child { border-bottom: 0; }
.skala-puan {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  font-size: 21px; font-weight: 800; color: #fff;
}
.skala-1 { background: #b3261e; } .skala-2 { background: #d97706; }
.skala-3 { background: #b59a06; } .skala-4 { background: #3f8f24; }
.skala-5 { background: #1a7f4b; }
.skala-baslik { font-weight: 700; color: var(--lacivert); }
.skala-alt { font-size: 12px; color: var(--soluk); margin-bottom: 4px; }
.skala-ne-zaman { background: var(--cok-acik); border-radius: 7px; padding: 8px 11px; font-size: 12.5px; margin-top: 6px; }
.skala-ne-zaman strong { color: var(--lacivert); }

.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge:last-child { border-bottom: 0; }
.sss-soru {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 13px 30px 13px 0; font-size: 13.5px; font-weight: 600;
  color: var(--lacivert); font-family: inherit; position: relative;
}
.sss-soru::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--soluk); font-weight: 400;
}
.sss-oge.acik .sss-soru::after { content: "−"; }
.sss-cevap { display: none; padding: 0 0 14px; color: #3c4756; font-size: 13px; }
.sss-oge.acik .sss-cevap { display: block; }

.arama {
  width: 100%; max-width: 340px; padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid var(--cizgi); border-radius: 8px; font-size: 13px; font-family: inherit;
}

/* --- Kriter tablosu ---------------------------------------------------- */
.kriter-tablo td { vertical-align: middle; }
.kriter-metin { font-weight: 500; }
.kriter-alt { font-size: 11.5px; color: var(--soluk); margin-top: 3px; }
.kritik-etiket {
  display: inline-block; background: var(--kirmizi-zemin); color: var(--kirmizi);
  padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; margin-left: 6px;
}
.kanit-ipucu { font-size: 11.5px; color: var(--soluk); font-style: italic; }
.kaydedildi { animation: parla 1.1s ease; }
@keyframes parla { 0% { background: #d3f2dd; } 100% { background: transparent; } }

.yardim-simge {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--acik-mavi); color: var(--lacivert);
  font-size: 10.5px; font-weight: 700; cursor: help; margin-left: 5px;
  text-decoration: none; flex: none;
}
.yardim-simge:hover { background: var(--lacivert); color: #fff; }

/* --- Yardım şeridi (birim sayfası) ------------------------------------- */
.yardim-serit {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--cok-acik); border: 1px solid var(--acik-mavi);
  border-radius: 9px; padding: 10px 14px; margin-bottom: 16px; font-size: 12.5px;
}
.yardim-serit strong { color: var(--lacivert); }
.yardim-serit a { color: var(--mavi); font-weight: 600; }

.mini-tablo td { padding: 5px 8px; font-size: 12.5px; }
.bos-deger { color: #b6bdc9; }
.sayi { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .rehber-duzen { grid-template-columns: 1fr; }
  .rehber-menu { position: static; }
  .ust-ic { min-height: auto; padding: 10px 14px; }
  .menu { margin-left: 0; width: 100%; }
}