/* ------------------------------------------------------------------
   Renkler dogrudan sirketin Excel sablonundan alindi:
   elle doldurulan hucreler sari, hesaplananlar gri, girisler mavi.
   Arayuz de ayni dili konusuyor.
------------------------------------------------------------------- */
:root{
  --kagit:#e9ecf1;
  --yuzey:#ffffff;
  --murekkep:#161b22;
  --soluk:#5d6772;
  --cizgi:#ccd3dc;
  --sari:#fff2cc;
  --sari-cizgi:#e0c98a;
  --gri-hucre:#f2f4f6;
  --mavi:#1f3fb8;
  --mavi-koyu:#16308f;
  --yesil:#0f6b45;
  --kirmizi:#a3202b;
  --amber:#b7791f;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas","Liberation Mono",monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
}

/* ---------------- ust bant ---------------- */
.ust{
  background:var(--murekkep);
  color:#eef1f5;
  border-bottom:3px solid var(--mavi);
}
.ust-ic{
  max-width:1240px;margin:0 auto;padding:18px 24px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
}
.marka-ad{
  display:block;font-size:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.marka-alt{display:block;font-size:12px;color:#98a4b3;letter-spacing:.04em}
.ust-not{margin:0;font-size:13px;color:#98a4b3}

/* ---------------- yerlesim ---------------- */
.duzen{
  max-width:1240px;margin:0 auto;padding:24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;
}
@media (max-width:1000px){ .duzen{grid-template-columns:1fr} }

.kart{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  padding:20px;
  min-width:0;
}
.kart-ust{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.kart-baslik{
  margin:0 0 16px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);
}
.kart-ust .kart-baslik{margin:0}
.kart-dugmeler{display:flex;gap:8px;align-items:center}
.kart-dugmeler .dugme{text-decoration:none;margin:0}

/* ---------------- form ---------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alan-genis{grid-column:1 / -1}
.alan{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--soluk);min-width:0}
.alan em{font-style:normal;color:#9aa4b0}

input[type=text],input[type=date],textarea{
  font:inherit;
  font-family:var(--mono);
  font-size:14px;
  padding:9px 10px;
  border:1px solid var(--sari-cizgi);
  background:var(--sari);          /* sablondaki "elle doldurulan hucre" rengi */
  color:var(--mavi);               /* sablondaki mavi giris yazisi */
  border-radius:0;
  width:100%;
}
textarea{line-height:1.6;padding:10px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--mavi);outline-offset:1px}

.ipucu{margin:8px 0 0;font-size:12px;color:var(--soluk);line-height:1.55}
.ipucu code{
  font-family:var(--mono);font-size:12px;
  background:var(--gri-hucre);padding:1px 5px;border:1px solid var(--cizgi);
}

/* ---------------- sekmeler ve paneller ---------------- */
.sekmeler{
  grid-column:1 / -1;display:flex;gap:0;margin-top:6px;
  border-bottom:1px solid var(--cizgi);
}
.sekme{
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;
  background:none;border:0;border-bottom:2px solid transparent;
  padding:8px 14px;cursor:pointer;color:var(--soluk);margin-bottom:-1px;
}
.sekme:hover{color:var(--murekkep)}
.sekme[aria-selected=true]{color:var(--mavi);border-bottom-color:var(--mavi)}
.sekme:focus-visible{outline:2px solid var(--mavi);outline-offset:-2px}

.panel{grid-column:1 / -1;min-width:0}
.panel-ic{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){ .panel-ic{grid-template-columns:1fr} }

/* ---------------- dugmeler ---------------- */
.dugmeler{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}

.dugme{
  font:inherit;font-weight:600;font-size:14px;
  padding:10px 18px;border:1px solid transparent;border-radius:0;cursor:pointer;
}
.dugme-ana{background:var(--mavi);color:#fff}
.dugme-ana:hover{background:var(--mavi-koyu)}
.dugme-sade{background:transparent;color:var(--soluk);border-color:var(--cizgi)}
.dugme-sade:hover{color:var(--murekkep);border-color:var(--soluk)}
.dugme-kucuk{padding:5px 12px;font-size:13px}
.dugme-onay{
  width:100%;margin-top:18px;background:var(--yesil);color:#fff;padding:13px;
  letter-spacing:.03em;
}
.dugme-onay:hover{background:#0b5334}
.dugme-onay.uyarili{background:var(--amber)}
.dugme-onay.uyarili:hover{background:#96620f}
.dugme:disabled{opacity:.5;cursor:default}
.dugme:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}

/* ---------------- uyarilar ---------------- */
.hata{
  margin:16px 0 0;padding:11px 13px;
  background:#fdeceb;border-left:3px solid var(--kirmizi);
  color:var(--kirmizi);font-size:14px;
}
.uyari{
  margin:18px 0 0;padding:11px 13px;
  background:#fff6e0;border-left:3px solid var(--amber);
  color:#7a5209;font-size:13px;line-height:1.5;
}

/* ---------------- kontrol seridi ---------------- */
.kontrol{
  margin-top:22px;border:1px solid var(--murekkep);background:var(--gri-hucre);
}
.kontrol-satir{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 14px;border-bottom:1px dotted var(--cizgi);
  font-size:13px;color:var(--soluk);
}
.kontrol-satir b{font-family:var(--mono);font-size:15px;color:var(--murekkep);font-variant-numeric:tabular-nums}
.kontrol-fark{border-bottom:0;background:#fff}
.kontrol-fark b{font-size:17px;color:var(--yesil)}
.kontrol-fark.sapma b{color:var(--kirmizi)}
.kontrol-not{margin:0;padding:0 14px 10px;font-size:12px;color:var(--soluk)}

/* ---------------- hafta dokumu ve tablolar ---------------- */
.haftalar{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.hafta{border:1px solid var(--cizgi);overflow-x:auto}
.hafta-ust{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:8px 12px;background:var(--gri-hucre);border-bottom:1px solid var(--cizgi);
}
.hafta-ad{font-weight:700;font-size:14px;letter-spacing:.04em}
.hafta-ozet{font-family:var(--mono);font-size:13px;color:var(--soluk);font-variant-numeric:tabular-nums}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 12px;text-align:left;border-bottom:1px solid #eef1f4}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.sayi{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
td.saat{font-family:var(--mono);color:var(--mavi)}
td.no{font-family:var(--mono);color:var(--soluk);width:34px}
td.durum{font-size:12px}

#toplu-tablo{margin-top:18px}
tr.hatali td{background:#fdeceb;color:var(--kirmizi)}
tr.hatali td.durum{font-weight:600}
tr.mevcut td.durum{color:#7a5209;font-weight:600}

/* ---------------- calisan klasorleri ---------------- */
.klasor-duzen{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:16px}
@media (max-width:620px){ .klasor-duzen{grid-template-columns:1fr} }

.calisanlar{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--cizgi);
  max-height:460px;overflow-y:auto;overflow-x:hidden;
  min-width:0;
}
.calisanlar li{display:flex;align-items:stretch;min-width:0}
.calisanlar li + li{border-top:1px solid var(--cizgi)}

.calisanlar button.kisi{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  text-align:left;font:inherit;font-size:14px;
  background:none;border:0;padding:9px 12px;cursor:pointer;color:var(--murekkep);
}
.calisanlar button.kisi > span:first-child{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.calisanlar button.kisi:hover{background:var(--gri-hucre)}
.calisanlar button.kisi[aria-current=true]{background:var(--murekkep);color:#fff}
.calisanlar .adet{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--soluk)}
.calisanlar button.kisi[aria-current=true] .adet{color:#aab4c0}

.calisanlar .kisi-sil{
  flex:0 0 auto;
  border:0;border-left:1px solid var(--cizgi);background:none;
  color:var(--kirmizi);font:inherit;font-size:16px;line-height:1;
  padding:0 11px;cursor:pointer;
}
.calisanlar .kisi-sil:hover{background:#fdeceb}
.calisanlar .kisi-sil:focus-visible{outline:2px solid var(--mavi);outline-offset:-2px}
.calisanlar button:focus-visible{outline:2px solid var(--mavi);outline-offset:-2px}

.belgeler{min-width:0}
.bos{color:var(--soluk);font-size:14px;margin:0;padding:8px 0}

.belge{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--cizgi);
}
.belge:last-child{border-bottom:0}
.belge-ad{font-family:var(--mono);font-weight:700;font-size:14px;min-width:96px}
.belge-bilgi{font-size:12px;color:var(--soluk);flex:1 1 130px;min-width:0}
.belge a,.belge .sil{
  font-size:12px;font-weight:600;text-decoration:none;padding:4px 10px;
  border:1px solid var(--cizgi);color:var(--murekkep);background:#fff;cursor:pointer;
  white-space:nowrap;
}
.belge a:hover,.belge .sil:hover{border-color:var(--murekkep)}
.belge .sil{color:var(--kirmizi);border-color:#e4c2c5}
.belge a:focus-visible,.belge .sil:focus-visible{outline:2px solid var(--mavi);outline-offset:1px}

.toplu{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.toplu .dugme{text-decoration:none;margin:0}

/* ---------------- bildirim ---------------- */
.bildirim{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--murekkep);color:#fff;padding:11px 20px;font-size:14px;
  box-shadow:0 6px 22px rgba(20,25,33,.28);
}
@media (prefers-reduced-motion:no-preference){
  .bildirim{animation:gir .18s ease-out}
  @keyframes gir{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ---------------- giris sayfasi ---------------- */
.giris-sayfa{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--murekkep);
}
.giris-kutu{width:100%;max-width:380px}
.giris-marka{margin-bottom:18px;color:#eef1f5;text-align:center}
.giris-marka .marka-ad{
  display:block;font-size:18px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.giris-marka .marka-alt{display:block;font-size:11px;color:#98a4b3;letter-spacing:.04em}

.giris-form{
  background:var(--yuzey);border:1px solid var(--cizgi);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
.giris-baslik{
  margin:0 0 4px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);
}
.giris-form input[type=password]{
  font:inherit;font-family:var(--mono);font-size:14px;padding:9px 10px;
  border:1px solid var(--sari-cizgi);background:var(--sari);color:var(--mavi);
  border-radius:0;width:100%;
}
.giris-form input:focus-visible{outline:2px solid var(--mavi);outline-offset:1px}
.giris-dugme{width:100%;margin-top:4px;padding:12px}
.giris-form .hata{margin:0}
.giris-not{margin:14px 0 0;text-align:center;font-size:12px;color:#98a4b3}

/* ust bantta cikis dugmesi */
.ust-sag{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.oturum-ad{font-size:12px;color:#98a4b3}
.cikis-dugme{
  font:inherit;font-size:13px;font-weight:600;
  background:none;border:1px solid #3a4450;color:#cfd6de;
  padding:5px 12px;cursor:pointer;
}
.cikis-dugme:hover{border-color:#98a4b3;color:#fff}
.cikis-dugme:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}