/* AKSİS — hazırlık sistemi arayüzü
   İlke: renk bir süs değil, veridir. Kırmızı yalnızca gerçek eksik/geçmiş SKT için. */

:root {
  /* Zemin sıcak krem değil, soğuk arduvaz: ekran gündüz depoda, gece çadırda okunuyor.
     Kırmızı yalnızca itfaiye kimliği ve gerçek eksik için; durum renkleri triyaj dili. */
  --zemin: #e9edf0;
  --yuzey: #ffffff;
  --rail: #12181d;
  --rail-ic: #1c242b;
  --metin: #10161b;
  --soluk: #5c6b76;
  --cizgi: #d5dde3;
  --cizgi-koyu: #b9c6cf;
  --iyi: #10715a;
  --orta: #b0770d;
  --kotu: #b3261e;
  --vurgu: #c0272d;
  --vurgu-koyu: #971e23;
  --vurgu-acik: #fbecec;
  /* Dördüncü hazırlık bandı (%80-94): amber ile yeşil arasında, ikisine de
     benzemeyen ayrı bir renk. "Hazıra yakın ama tam değil" demek için. */
  --hazira-yakin: #6d8c13;
  --hazira-yakin-acik: #f1f5e2;
  --radius: 4px;
  --olcek: 15px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: var(--olcek)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--metin); box-shadow: 0 0 0 3px rgba(16,22,27,.08); }

h1 { font-size: 1.75rem; margin: 0 0 .25rem; letter-spacing: -.022em; font-weight: 650; }
h2 { font-size: 1rem; margin: 0; letter-spacing: -.008em; font-weight: 650; }
h3 { font-size: .93rem; margin: .4rem 0 0; font-weight: 650; }

/* ---------- iskelet ---------- */

.kabuk { display: flex; min-height: 100vh; }

.yan {
  width: 228px; flex: none; background: var(--rail); color: #c3ced6;
  display: flex; flex-direction: column; padding: 18px 10px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
.yan::-webkit-scrollbar { width: 6px; }
.yan::-webkit-scrollbar-thumb { background: #2b353d; border-radius: 4px; }
/* Marka bloğu: görsel varsa üstte, ad ve alt başlık altında. Yan yana
   dizilince ad üç satıra bölünüyordu. */
.yan .marka { display: block; margin-bottom: 20px; padding: 0 10px; }
.yan .marka img { display: block; max-width: 100%; max-height: 64px; object-fit: contain; margin-bottom: 10px; }
.yan .marka strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.yan .marka small { display: block; color: var(--soluk); font-size: .74rem; line-height: 1.35; margin-top: 2px; }

.yan nav { display: flex; flex-direction: column; gap: 2px; }
.yan nav a {
  color: #c3ced6; padding: 7px 10px 7px 13px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .92rem; border-left: 3px solid transparent;
}
.yan nav a:hover { background: var(--rail-ic); color: #fff; text-decoration: none; }
/* Aktif sayfa dolgu yerine kenar çizgisiyle işaretlenir: menü sakin kalıyor. */
.yan nav a.aktif { background: var(--rail-ic); color: #fff; border-left-color: var(--vurgu); font-weight: 600; }

.yan-alt { margin-top: auto; padding-top: 16px; border-top: 1px solid #2b353d; font-size: .85rem; }
.yan-alt strong { display: block; color: #fff; }
.yan-alt small { display: block; color: #7f909c; margin-bottom: 8px; }
.yan-alt a { color: #c3ced6; }

.icerik { flex: 1; padding: 26px 32px 64px; max-width: 1240px; }

.sayfa-basi { margin-bottom: 20px; }
.sayfa-basi .ust { margin: 0 0 2px; color: var(--soluk); font-size: .84rem; }
.sayfa-basi p { margin: .2rem 0 0; color: var(--soluk); max-width: 70ch; }

/* ---------- ölçüm kartları ---------- */

/* Sayılar başrolde: kart çerçevesi yerine ince dikey ayraçlar, iri tabular rakam. */
.olcumler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden;
}
.olcumler article { padding: 14px 18px; border-left: 1px solid var(--cizgi); position: relative; }
.olcumler article:first-child { border-left: 0; }
.olcumler article span { color: var(--soluk); font-size: .82rem; display: block; }
.olcumler article strong {
  display: block; font-size: 2.1rem; line-height: 1.05; margin: 4px 0 2px;
  letter-spacing: -.035em; font-weight: 650; font-variant-numeric: tabular-nums;
}
.olcumler article small { color: var(--soluk); font-size: .78rem; }
.olcumler article.iyi strong { color: var(--iyi); }
.olcumler article.orta strong { color: var(--orta); }
.olcumler article.kotu strong { color: var(--kotu); }

/* ---------- panolar ---------- */

.pano {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden;
}
.pano-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px; border-bottom: 2px solid var(--metin);
}
.pano-bas small { color: var(--soluk); }
.izgara-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.liste .satir {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--cizgi); color: inherit;
}
.liste .satir:last-child { border-bottom: 0; }
a.satir:hover { background: #faf7f7; text-decoration: none; }
.liste .satir strong { display: block; font-weight: 600; }
.liste .satir small { color: var(--soluk); font-size: .82rem; }

.oran { display: flex; align-items: center; gap: 10px; }
.cubuk { width: 96px; height: 7px; background: #e8e2e0; border-radius: 4px; overflow: hidden; }
.cubuk i { display: block; height: 100%; background: var(--iyi); }
.cubuk i.orta { background: var(--orta); }
.cubuk i.kotu { background: var(--kotu); }

/* ---------- tablolar ---------- */

.tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablo th {
  text-align: left; padding: 10px 18px; color: var(--soluk); font-weight: 600; font-size: .82rem;
  border-bottom: 2px solid var(--cizgi-koyu); background: none; white-space: nowrap;
}
.tablo td { padding: 12px 18px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo tbody tr:hover td { background: #f6f9fb; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo .sag { text-align: right; white-space: nowrap; }
.tablo small { color: var(--soluk); }
tr.eksik-satir td { background: var(--vurgu-acik); box-shadow: inset 3px 0 0 var(--vurgu); }
tr.soluk-satir td { opacity: .55; }
.soluk { color: var(--soluk); }
.bos { padding: 22px 16px; color: var(--soluk); text-align: center; }
.dipnot { padding: 12px 16px; margin: 0; color: var(--soluk); font-size: .85rem; border-top: 1px solid var(--cizgi); }
.dipnot code { background: #f0ebea; padding: 2px 6px; border-radius: 4px; }

/* ---------- rozetler ---------- */

.rozet {
  display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: .76rem;
  background: #eef2f5; color: var(--soluk); white-space: nowrap; font-weight: 550;
}
.rozet.iyi { background: #e2f0ea; color: var(--iyi); }
.rozet.orta, .rozet.yakin { background: #fbf0d9; color: var(--orta); }
.rozet.kotu, .rozet.gecti, .rozet.kritik { background: var(--vurgu-acik); color: var(--kotu); font-weight: 600; }
.rozet.kilit { background: #ece7f5; color: #5a4a86; }

/* ---------- formlar ---------- */

.form-pano .form-izgara { padding: 16px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.form-izgara .genis { grid-column: 1 / -1; }
.form-izgara h3 { grid-column: 1 / -1; margin: 4px 0 0; }
label { display: block; font-size: .85rem; color: var(--soluk); }
label small { display: block; margin-top: 3px; font-size: .78rem; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--cizgi-koyu); border-radius: var(--radius);
  font: inherit; background: #fff; color: var(--metin); margin-top: 4px;
}
input[type="checkbox"] { width: auto; margin: 0 6px 0 0; }
label.onay { display: flex; align-items: center; gap: 4px; color: var(--metin); font-size: .88rem; align-self: end; padding-bottom: 8px; }
/* Kaydet çubuğu: düğme + açıklama. Açıklama uzun olduğunda düğmeyi ezmesin,
   ekranın kenarına dayanmasın ve dar ekranda kendi satırına insin. Eskiden tek
   satırda uzayıp okunamaz hale geliyordu. */
.form-alt { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-alt > .btn { flex: 0 0 auto; }
.form-alt small { color: var(--soluk); flex: 1 1 320px; min-width: 0; max-width: 78ch; line-height: 1.45; }
@media (max-width: 760px) {
  .form-alt { align-items: stretch; }
  .form-alt > .btn { width: 100%; }
  .form-alt small { flex: 1 1 100%; }
}

.sekmeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sekmeler form { border-right: 1px solid var(--cizgi); }
.sekmeler form:last-child { border-right: 0; }

/* İkincil düğmeler beyaz üstüne beyazdı ve düğme gibi durmuyordu.
   Artık hafif dolgu, koyu kenar ve vurgu rengine yakın bir metin var. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid var(--cizgi-koyu); background: #f4f6f8; color: var(--metin);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #e8edf1; border-color: var(--soluk); text-decoration: none; }
.btn.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.btn.birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
/* .sade: bir formun ana eylemi olmayan, yan işlem düğmeleri */
.btn.sade { background: #fff; font-weight: 550; }
.btn.sade:hover { background: #f4f6f8; }
/* Vurgulu ikincil: "Aç", "Yedeği indir" gibi kullanıcıyı yönlendiren eylemler */
.btn.vurgulu { background: var(--vurgu-acik); border-color: #e8b7b9; color: var(--vurgu); }
.btn.vurgulu:hover { background: #f6dcdd; border-color: var(--vurgu); }
.btn.tehlike-btn { color: var(--kotu); border-color: #eec4c1; background: #fdf3f2; }
.mini { font-size: .82rem; color: var(--vurgu); background: none; border: 0; cursor: pointer; padding: 2px 4px; }

.satir-form { display: inline-flex; gap: 4px; align-items: center; }
.satir-form input { width: 74px; margin: 0; padding: 4px 6px; }

.filtre-cubugu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.filtre-cubugu input, .filtre-cubugu select { width: auto; min-width: 170px; margin: 0; }

.sekme-cubugu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sekme-cubugu a {
  padding: 6px 12px; border: 1px solid var(--cizgi); border-radius: 20px;
  background: #fff; color: var(--metin); font-size: .88rem;
}
.sekme-cubugu a.aktif { background: var(--rail); border-color: var(--rail); color: #fff; }

.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px;
  border: 1px solid; border-left-width: 4px; }
.flash.ok { background: #edf6f2; border-color: #bcdcce; border-left-color: var(--iyi); color: var(--iyi); }
.flash.hata { background: var(--vurgu-acik); border-color: #f0c3bf; border-left-color: var(--kotu); color: var(--kotu); }

/* ---------- giriş ve kurulum ---------- */

.giris-govde, .kurulum { background: var(--rail); margin: 0; min-height: 100vh; }
.giris-kabuk { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 100vh; }
.giris-tanitim {
  position: relative; padding: 46px 44px; color: #cfdad7;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* Ayarlar'dan görsel yüklenmişse sol taraf o fotoğraf olur. Üstüne koyu bir
   örtü konuyor ki başlık ve açıklama her fotoğrafta okunabilsin. */
.giris-tanitim.gorselli { background-size: cover; background-position: center; }
.giris-tanitim.gorselli::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,16,.72) 0%, rgba(10,14,16,.86) 100%);
}
.giris-tanitim > * { position: relative; }
.giris-logo { display: flex; align-items: center; gap: 10px; }
.giris-logo strong { white-space: nowrap; font-size: 1.05rem; color: #fff; }
.giris-logo img { width: 38px; height: auto; max-height: 44px; object-fit: contain; flex: none; }
.giris-tanitim .marka { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.2rem; }
.giris-tanitim .marka span { width: 32px; height: 32px; border-radius: var(--radius); background: var(--vurgu); display: grid; place-items: center; }
.giris-tanitim h1 { color: #fff; font-size: 2.1rem; max-width: 16ch; margin: 12px 0; letter-spacing: -.02em; }
.giris-tanitim small { color: #8ea29d; font-size: .78rem; }
.giris-tanitim p { max-width: 46ch; color: #a9bab6; }

.giris-panel { background: var(--zemin); display: grid; place-items: center; padding: 30px; }
.giris-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 30px; width: 100%; max-width: 380px; }
.giris-kutu .hac { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius); background: var(--vurgu); color: #fff; font-weight: 700; }
.giris-kutu .ust { color: var(--soluk); font-size: .85rem; margin: 12px 0 0; }
.giris-kutu h2 { margin: 0 0 14px; font-size: 1.3rem; }
.giris-kutu form { display: grid; gap: 12px; }
.giris-kutu .not { color: var(--soluk); font-size: .82rem; margin-top: 14px; }

.kurulum-kart {
  background: var(--yuzey); max-width: 720px; margin: 40px auto; padding: 30px;
  border-radius: var(--radius); border: 1px solid var(--cizgi);
}
.kurulum-kart .marka { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kurulum-kart .marka span { width: 30px; height: 30px; border-radius: var(--radius); background: var(--vurgu); color: #fff; display: grid; place-items: center; font-weight: 700; }
.kurulum-kart .alt { color: var(--soluk); }
.kurulum-kart h2 { margin: 22px 0 8px; }
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.izgara .genis { grid-column: 1 / -1; }
.kutu { padding: 14px 16px; border-radius: var(--radius); border: 1px solid; margin: 14px 0; }
.kutu.hata { background: var(--vurgu-acik); border-color: #f0c3bf; color: var(--kotu); }
.kutu.ok { background: #e9f4ef; border-color: #bcdcce; }
.uyari-metin { color: var(--kotu); }
.kurulum-kart form { margin-top: 8px; }
.kurulum-kart button { margin-top: 18px; }

/* ---------- duyarlı ---------- */

@media (max-width: 960px) {
  .izgara-iki { grid-template-columns: 1fr; }
  .giris-kabuk { grid-template-columns: 1fr; }
  .giris-tanitim { padding: 30px; }
}

@media (max-width: 860px) {
  .izgara { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- indirme bağlantıları ve logo alanı ---------- */

.indir { display: inline-flex; gap: 6px; align-items: center; }
.indir a {
  font-size: .82rem; padding: 4px 10px; border: 1px solid var(--cizgi);
  border-radius: 20px; background: #fff; color: var(--vurgu);
}
.indir a:hover { background: #f7f3f2; text-decoration: none; }

.logo-alani { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
.logo-kutu {
  border: 1px dashed var(--cizgi); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.logo-kutu img { max-height: 64px; max-width: 100%; background: #fff; }
.logo-kutu form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.logo-kutu input[type="file"] { width: auto; margin: 0; padding: 5px; font-size: .82rem; }

@media (max-width: 760px) {
  .logo-alani { grid-template-columns: 1fr; }
  .indir { flex-wrap: wrap; }
}

/* ---------- personel rehberi ---------- */

.kart-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px; }
.kisi {
  border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.kisi-bas { display: flex; align-items: center; gap: 8px; }
.kisi-bas strong { font-size: .98rem; }
.kisi .unvan {
  font-size: .72rem; padding: 2px 7px; border-radius: 20px;
  background: var(--rail); color: #fff; white-space: nowrap;
}
.kisi-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kisi-alt .btn { padding: 5px 10px; font-size: .82rem; }

@media (max-width: 760px) {
  .kart-listesi { grid-template-columns: 1fr; }
  .kisi-alt .btn { flex: 1; text-align: center; }
}

.onay-satir { display: flex; align-items: center; gap: 8px; color: var(--metin); font-size: .92rem; margin-top: 6px; }
.onay-satir input { width: auto; margin: 0; }
.kurulum-kart .uyari-metin { font-size: .85rem; margin: 4px 0 0; }

/* ---------- konum ağacı ---------- */

.agac, .agac-alt { list-style: none; margin: 0; padding: 0; }
.agac { padding: 6px 0; }
.agac-alt { border-left: 2px solid var(--cizgi); margin-left: 20px; }

.dugum-satir {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
.dugum-satir.kilitli { background: #faf7fb; }
.dugum-satir.birak-hedef { background: var(--vurgu-acik); box-shadow: inset 0 0 0 2px var(--vurgu); }

.ac-kapa {
  flex: none; width: 28px; height: 28px; border: 1px solid var(--cizgi); border-radius: var(--radius);
  background: #fff; color: var(--soluk); cursor: pointer; font-size: .8rem; line-height: 1;
}
.ac-kapa.bos { border-color: transparent; background: none; cursor: default; color: var(--cizgi); }

.tut {
  flex: none; width: 26px; height: 30px; display: grid; place-items: center;
  color: var(--soluk); cursor: grab; touch-action: none; user-select: none; font-size: .8rem;
}
.tut:active { cursor: grabbing; }

.dugum-ad { flex: 1; min-width: 0; }
.dugum-ad a { font-weight: 600; color: var(--metin); }
.dugum-etiket { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.dugum-etiket .tip {
  font-size: .72rem; color: var(--soluk); border: 1px solid var(--cizgi); padding: 1px 6px; border-radius: 4px;
}
.dugum-etiket .bolum { font-size: .72rem; color: var(--vurgu); background: var(--vurgu-acik); padding: 1px 7px; border-radius: 20px; }
.dugum-etiket .sayac { font-size: .72rem; color: var(--soluk); }

.dugum-sag { display: flex; align-items: center; gap: 10px; flex: none; }
.dugum-islem { display: flex; align-items: center; gap: 2px; }
.dugum.tasiniyor > .dugum-satir { opacity: .45; }

.malzeme-listesi { list-style: none; margin: 0; padding: 4px 14px 8px 56px; background: #faf8f7; border-bottom: 1px solid var(--cizgi); }
.malzeme-listesi li {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  font-size: .86rem; color: var(--soluk);
}
.malzeme-listesi b { color: var(--metin); font-weight: 600; white-space: nowrap; }

.kok-hedef {
  list-style: none; margin: 8px 14px; padding: 10px 14px; border: 1px dashed var(--cizgi);
  border-radius: var(--radius); color: var(--soluk); font-size: .85rem; text-align: center;
}
.kok-hedef.birak-hedef { background: var(--vurgu-acik); border-color: var(--vurgu); color: var(--vurgu); }

.surukle-hayalet {
  position: fixed; z-index: 60; pointer-events: none; background: var(--rail); color: #fff;
  padding: 5px 12px; border-radius: 20px; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
body.surukleme-aktif { user-select: none; }

@media (max-width: 760px) {
  .dugum-satir { flex-wrap: wrap; padding: 10px 10px; }
  .dugum-sag { width: 100%; justify-content: flex-end; padding-left: 62px; }
  .agac-alt { margin-left: 12px; }
  .malzeme-listesi { padding-left: 28px; }
  .ac-kapa, .tut { height: 34px; }
  .mini { min-height: 34px; padding: 4px 8px; }
}

/* ---------- konum kartları ---------- */

.konum-kart {
  border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; background: var(--yuzey);
}
.konum-kart.durum-uygunsuz { border-color: var(--kotu); }
.konum-kart.durum-kismen { border-color: var(--orta); }

.kart-foto {
  position: relative; height: 110px; background: #efeae9;
  display: grid; place-items: center; overflow: hidden;
}
.kart-foto img { width: 100%; height: 100%; object-fit: cover; }
.kart-foto .foto-yok { font-size: 2rem; font-weight: 700; color: #c3b9b7; }
.kart-durum {
  position: absolute; top: 8px; right: 8px; font-size: .74rem; padding: 2px 9px;
  border-radius: 20px; background: rgba(255,255,255,.94); color: var(--metin);
}
.durum-hazir .kart-durum { color: var(--iyi); }
.durum-kismen .kart-durum { color: var(--orta); }
.durum-uygunsuz .kart-durum { color: var(--kotu); font-weight: 600; }

.kart-govde { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.kart-ad { font-weight: 600; color: var(--metin); font-size: 1rem; }
.kart-amac { margin: 0; font-size: .85rem; color: var(--soluk); }
.kart-etiket { display: flex; flex-wrap: wrap; gap: 6px; }
.kart-etiket .tip { font-size: .72rem; color: var(--soluk); border: 1px solid var(--cizgi); padding: 1px 6px; border-radius: 4px; }
.kart-etiket .bolum { font-size: .72rem; color: var(--vurgu); background: var(--vurgu-acik); padding: 1px 7px; border-radius: 20px; }

.kart-bilgi { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.kart-bilgi li { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; }
.kart-bilgi span { color: var(--soluk); }
.kart-bilgi b { font-weight: 600; text-align: right; }
.kart-bilgi b.gecikti, .kart-bilgi b.durum-uygunsuz { color: var(--kotu); }
.kart-bilgi b.durum-hazir { color: var(--iyi); }
.kart-bilgi b.durum-kismen { color: var(--orta); }

.dugum-etiket .alan { font-size: .72rem; color: var(--soluk); background: #efeae9; padding: 1px 7px; border-radius: 20px; }

.kart-ozet { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px; align-items: start; }
.kart-ozet .genis-foto { height: 140px; border-radius: var(--radius); }
.kart-ozet .genis-bilgi { margin: 0; }
.foto-form { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.foto-form input[type="file"] { width: auto; margin: 0; padding: 5px; font-size: .82rem; }

/* ---------- görünüm / palet ---------- */

.renk-satir { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.renk-satir input[type="color"] { width: 46px; height: 36px; padding: 2px; margin: 0; }
.renk-satir input[type="text"] { margin: 0; }
.palet-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.palet {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--radius); background: #fff; font: inherit; font-size: .84rem;
}
.palet span { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }
.palet b { font-weight: 500; margin-left: 4px; }
.palet:hover { border-color: var(--vurgu); }

.hata-listesi { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 5px; font-size: .86rem; color: var(--kotu); }

@media (max-width: 760px) {
  .kart-ozet { grid-template-columns: 1fr; }
  .kart-ozet .genis-foto { height: 160px; }
}

/* ---------- üst çubuk ve menü rozetleri ---------- */

.ust-cubuk {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: -6px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--cizgi-koyu);
}
.ust-arama { display: flex; gap: 8px; flex: 1 1 320px; }
.ust-arama input { margin: 0; }
.ust-islem { display: flex; gap: 8px; }

.yan nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-rozet {
  font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 20px;
  background: rgba(255,255,255,.14); color: #fff;
}
.menu-rozet.acil { background: var(--vurgu); }

/* ---------- bugün listesi ---------- */

.is-satir { gap: 10px; }
.is-nokta { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--orta); }
.is-nokta.gecti { background: var(--kotu); }
.is-nokta.kritik { background: var(--orta); }
.is-satir div { flex: 1; min-width: 0; }

.yeterlilik-notu {
  background: #eef4f1; border: 1px solid #cfe0d8; border-radius: var(--radius);
  padding: 11px 16px; margin: 0 0 18px; font-size: .88rem; color: var(--iyi);
}
.yeterlilik-notu strong { color: var(--iyi); }

.yer-rozet {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 9px; border-radius: 20px;
  background: #f0ebea; color: var(--metin); font-size: .78rem;
}
.yer-rozet:hover { background: var(--vurgu-acik); color: var(--vurgu); text-decoration: none; }

/* ---------- sayım modu ---------- */

.sayim-formu { padding-bottom: 84px; }
.sayim-listesi { display: flex; flex-direction: column; }
.sayim-satir {
  display: grid; grid-template-columns: 1fr 150px 150px; gap: 12px; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--cizgi);
}
.sayim-satir:last-child { border-bottom: 0; }
.sayim-satir.eksik { background: var(--vurgu-acik); }
.sayim-satir.degisti { box-shadow: inset 3px 0 0 var(--vurgu); }
.sayim-ad strong { display: block; font-weight: 600; font-size: .94rem; }
.sayim-ad small { color: var(--soluk); font-size: .8rem; }

.sayim-giris { display: flex; align-items: center; gap: 6px; }
.sayim-giris input { margin: 0; text-align: center; font-weight: 600; font-size: 1rem; padding: 8px 4px; }
.adim {
  width: 40px; height: 40px; flex: none; border: 1px solid var(--cizgi); border-radius: var(--radius);
  background: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--metin);
}
.adim:hover { background: #f7f3f2; }
.sayim-skt input { margin: 0; padding: 7px 8px; font-size: .85rem; }

.sayim-alt {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
  padding: 12px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}
.sayim-ozet { flex: 1 1 200px; }
.sayim-ozet strong { display: block; }
.sayim-ozet small { color: var(--soluk); }
.sayim-alt input[name="notlar"] { margin: 0; flex: 1 1 200px; width: auto; }
.sayim-sonuc { display: flex; align-items: center; gap: 8px; margin: 0; }
.sayim-sonuc select { margin: 0; width: auto; }

@media (max-width: 760px) {
  .ust-cubuk { margin-bottom: 14px; }
  .ust-islem { width: 100%; }
  .ust-islem .btn { flex: 1; text-align: center; }
  .sayim-satir { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .sayim-giris { justify-content: space-between; }
  .sayim-giris input { flex: 1; height: 44px; }
  .adim { width: 52px; height: 44px; }
  .sayim-alt { flex-direction: column; align-items: stretch; }
  .sayim-alt .btn { width: 100%; }
}

/* ---------- geri alma çubuğu ---------- */

.geri-al-cubugu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fbf6e9; border: 1px solid #e6d4a8; border-radius: var(--radius);
  padding: 9px 14px; margin-bottom: 16px; font-size: .88rem;
}
.geri-al-cubugu small { color: var(--soluk); margin-left: 6px; }
.geri-al-cubugu form { margin: 0; }

/* ---------- pencere (modal) ---------- */

.pencere { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.pencere[hidden] { display: none; }
.pencere-arka { position: absolute; inset: 0; background: rgba(20,15,14,.55); }
.pencere-kutu {
  position: relative; background: var(--yuzey); border-radius: var(--radius);
  width: min(620px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 18px 48px rgba(0,0,0,.3);
}
.pencere-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--cizgi);
}
.pencere-bas h2 { margin: 0; }
.pencere form { padding: 16px; }
body.pencere-acik { overflow: hidden; }

.iyi-metin { color: var(--iyi); }
.hata-metin { color: var(--kotu); font-weight: 600; }

.skt-satir { grid-template-columns: 1fr 180px 150px; }

@media (max-width: 760px) {
  .skt-satir { grid-template-columns: 1fr; }
  .pencere { padding: 0; align-items: end; }
  .pencere-kutu { width: 100%; max-height: 94vh; border-radius: var(--radius) var(--radius) 0 0; }
}

/* ---------- açılır ek alanlar ---------- */

.ek-alanlar { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 0; }
.ek-alanlar > summary {
  cursor: pointer; padding: 10px 14px; font-size: .88rem; color: var(--vurgu);
  list-style: none; user-select: none;
}
.ek-alanlar > summary::-webkit-details-marker { display: none; }
.ek-alanlar > summary::before { content: '▸ '; }
.ek-alanlar[open] > summary::before { content: '▾ '; }
.ek-alanlar[open] > summary { border-bottom: 1px solid var(--cizgi); }
.ek-alanlar > .form-izgara { padding: 14px; }

/* ---------- menü başlıkları ve silme butonları ---------- */

.menu-baslik {
  margin: 14px 8px 2px; font-size: .78rem; color: #7f909c; letter-spacing: 0;
}
.yan nav > .menu-baslik:first-child { margin-top: 0; }

/* Tablo hücresine display:flex verilirse hücre satırdan düşer; hizalama iç öğelerle yapılır. */
.satir-islem { text-align: right; white-space: nowrap; }
.satir-islem > * { display: inline-block; vertical-align: middle; margin-left: 6px; }
.satir-islem > *:first-child { margin-left: 0; }
.satir-islem form { margin: 0; }
div.satir-islem { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.mini.tehlike { color: var(--kotu); }
.mini.tehlike:hover { text-decoration: underline; }
.btn.tehlike-btn { color: var(--kotu); border-color: #e8c4c1; }
.btn.tehlike-btn:hover { background: var(--vurgu-acik); }

/* ==================== MOBİL DÜZEN ==================== */

.mobil-ust, .alt-menu, .menu-perde, .menu-kapat-tus { display: none; }

@media (max-width: 860px) {
  /* Üst çubuk */
  .mobil-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 50; background: var(--rail); color: #fff; padding: 10px 12px;
  }
  .mobil-marka { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
  .mobil-marka span {
    width: 26px; height: 26px; border-radius: var(--radius); background: var(--vurgu);
    display: grid; place-items: center; font-weight: 700;
  }
  .mobil-tus {
    width: 42px; height: 42px; border: 0; background: none; color: #fff;
    font-size: 1.3rem; line-height: 1; border-radius: var(--radius); cursor: pointer;
    display: grid; place-items: center; text-decoration: none;
  }
  .mobil-tus:active { background: var(--rail-ic); }

  /* Yan menü çekmeceye dönüşür */
  .kabuk { flex-direction: column; }
  .yan {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 70;
    transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto;
  }
  body.menu-acik .yan { transform: translateX(0); }
  body.menu-acik { overflow: hidden; }
  .menu-perde { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(20,15,14,.5); }
  .menu-perde[hidden] { display: none; }
  .menu-kapat-tus {
    display: block; position: absolute; top: 10px; right: 10px; width: 38px; height: 38px;
    border: 0; background: var(--rail-ic); color: #fff; border-radius: var(--radius); font-size: 1rem; cursor: pointer;
  }
  .yan nav a { padding: 11px 10px; }

  /* İçerik ve alt menü */
  .icerik { padding: 16px 12px 84px; max-width: none; }
  .alt-menu {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--yuzey); border-top: 1px solid var(--cizgi);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 14px rgba(0,0,0,.08);
  }
  .alt-menu a, .alt-menu button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px; border: 0; background: none; color: var(--soluk);
    font: inherit; font-size: .7rem; cursor: pointer; text-decoration: none; min-height: 52px;
  }
  .alt-menu .aktif { color: var(--vurgu); }
  .alt-simge { position: relative; font-size: 1.1rem; line-height: 1; }
  .alt-simge i {
    position: absolute; top: -6px; left: 11px; font-style: normal; font-size: .62rem;
    background: var(--vurgu); color: #fff; border-radius: 20px; padding: 0 5px; min-width: 16px; text-align: center;
  }

  /* Tablolar yatay kaydırılır */
  .pano { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablo { font-size: .85rem; min-width: 520px; }
  .tablo th, .tablo td { padding: 9px 10px; }

  /* Dokunma hedefleri */
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .mini { min-height: 38px; padding: 6px 9px; }
  input, select { min-height: 42px; }
  .ust-cubuk { gap: 8px; }
  .ust-arama { flex: 1 1 100%; }
  .ust-islem { width: 100%; }
  .ust-islem .btn { flex: 1; }
  .olcumler { grid-template-columns: 1fr 1fr; gap: 8px; }
  .olcumler article strong { font-size: 1.5rem; }
  .sayim-alt { bottom: 64px; }
  .sekme-cubugu { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .sekme-cubugu a { white-space: nowrap; }
}

@media (max-width: 420px) {
  .olcumler { grid-template-columns: 1fr; }
}

/* ---------- konum rengi ---------- */

.renk-cizgi { width: 4px; height: 26px; border-radius: 3px; flex: none; }
.kart-foto { --kart-renk: #8A9A94; }
.kart-renk-serit { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--kart-renk); }
.kart-foto .foto-yok { color: var(--kart-renk); opacity: .55; }

/* ---------- profil ve harita ---------- */

.profil-alani { display: flex; gap: 16px; align-items: center; padding: 16px; flex-wrap: wrap; }
.profil-foto {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--rail); color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 600;
}
.profil-foto img { width: 100%; height: 100%; object-fit: cover; }

.bolge-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.bolge-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; color: var(--metin);
}
.bolge-kart:hover { border-color: var(--vurgu); text-decoration: none; }
.bolge-kart.secili { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.bolge-kart.olayli { border-left: 3px solid var(--kotu); }
.bolge-kart small { color: var(--soluk); }
.bolge-kart .rozet { align-self: flex-start; margin-top: 4px; }

@media (max-width: 760px) {
  .bolge-izgara { grid-template-columns: 1fr 1fr; }
}

/* ---------- katlanabilir menü ---------- */

.menu-grup { margin-bottom: 2px; }
.menu-baslik {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 8px; border: 0; background: none; color: #7f909c; cursor: pointer;
  font: inherit; font-size: .78rem; letter-spacing: 0; text-align: left;
}
.menu-baslik i { font-style: normal; transition: transform .18s ease; font-size: .8rem; }
.menu-baslik::-webkit-details-marker { display: none; }
.menu-baslik { list-style: none; cursor: pointer; }
details.menu-grup[open] > .menu-baslik i { transform: rotate(180deg); }
.menu-baslik:hover { color: #cfdad7; }

/* ---------- marka görselleri ---------- */

.mobil-marka img { width: 24px; height: 27px; object-fit: contain; }
.giris-tanitim .marka img { width: 40px; height: 45px; object-fit: contain; }
.giris-logo { width: 46px; height: 52px; object-fit: contain; }
.kurulum-kart .marka img { width: 30px; height: 34px; object-fit: contain; }
.acik-ust .marka img { width: 34px; height: 38px; object-fit: contain; }

/* ---------- herkese açık sayfa ---------- */

.acik-sayfa .icerik { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.acik-ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--rail); color: #fff; padding: 12px 20px;
}
.acik-ust .marka { display: flex; align-items: center; gap: 10px; }
.acik-ust .marka strong { display: block; }
.acik-ust .marka small { color: #a9bab6; font-size: .75rem; }
.acik-ust .btn { background: transparent; color: #fff; border-color: #4a3a37; }

/* ---------- Türkiye haritası ---------- */

.harita-pano { overflow: hidden; }
.harita-kutu { padding: 10px; background: #f7f4f3; }
.harita-kutu svg { width: 100%; height: auto; display: block; }
.harita-kutu .il path, .harita-kutu .il polygon { transition: opacity .15s ease; }
.harita-kutu .il { cursor: pointer; outline: none; }
.harita-kutu .il:hover { opacity: .78; }
.harita-kutu .il:focus-visible path { stroke: #111; stroke-width: 1.5; }
.harita-kutu .il.secili path { stroke: #111; stroke-width: 1; }
.harita-kutu .il.olayli path { stroke: var(--kotu); stroke-width: 1.2; }

.bolge-marmara path, .lejant-renk.bolge-marmara { fill: #C0272D; background: #C0272D; }
.bolge-ege path, .lejant-renk.bolge-ege { fill: #B45309; background: #B45309; }
.bolge-akdeniz path, .lejant-renk.bolge-akdeniz { fill: #0F766E; background: #0F766E; }
.bolge-ic-anadolu path, .lejant-renk.bolge-ic-anadolu { fill: #1D4E89; background: #1D4E89; }
.bolge-karadeniz path, .lejant-renk.bolge-karadeniz { fill: #4B5563; background: #4B5563; }
.bolge-dogu-anadolu path, .lejant-renk.bolge-dogu-anadolu { fill: #6B21A8; background: #6B21A8; }
.bolge-guneydogu-anadolu path, .lejant-renk.bolge-guneydogu-anadolu { fill: #A16207; background: #A16207; }
.harita-kutu .il path { stroke: #fff; stroke-width: .4; }

.harita-lejant { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--cizgi); }
.lejant {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin); font-size: .82rem;
}
.lejant:hover { border-color: var(--vurgu); text-decoration: none; }
.lejant.aktif { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.lejant-renk { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.harita-kutu .il.disarida path { fill: #ded7d5; stroke: #fff; }
.harita-kutu .il.disarida { cursor: default; }

/* ---------- yapılandırma düzenleme kutuları ---------- */

.duzenleme-kutu { border-top: 2px solid var(--vurgu); background: #faf8f7; }
.duzenleme-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--cizgi);
}
.duzenleme-kutu .form-izgara { padding: 16px; }
tr.duzenlenen td { background: var(--vurgu-acik); box-shadow: inset 3px 0 0 var(--vurgu); }

.ad-grubu { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.ad-grubu:last-of-type { border-bottom: 0; }
.ad-bolum { max-width: 320px; margin-bottom: 10px; font-weight: 600; color: var(--metin); }
.ad-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; }

/* ---------- canlı harita ---------- */

.canli-harita { height: 460px; width: 100%; background: #eee; }
.canli-harita.cizim-modu { cursor: crosshair; }
.leaflet-container { font: inherit; }
.rota-satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .canli-harita { height: 330px; }
}

/* ---------- onay kutusu grubu ---------- */

.onay-kutusu {
  border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 10px 14px 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 16px; margin: 0;
}
.onay-kutusu legend { font-size: .8rem; color: var(--soluk); padding: 0 6px; }
.onay-kutusu .onay { align-self: center; padding-bottom: 0; }

/* ---------- envanter girişi ---------- */

.giris-tablo tr { display: table-row; }
.giris-tablo form { display: contents; }
.sayi-alani { width: 92px; margin: 0; text-align: center; font-weight: 600; }
.tarih-alani { width: 145px; margin: 0; font-size: .85rem; }

@media (max-width: 860px) {
  .sayi-alani { width: 76px; }
  .tarih-alani { width: 135px; }
}
.harita-uyari { margin: 0; padding: 24px 16px; text-align: center; color: var(--soluk); font-size: .88rem; }
.leaflet-container .harita-uyari { display: none; }

/* ---------- envanter giriş ekranı ---------- */

.giris-formu { padding-bottom: 90px; }
.buyuk-alan { display: flex; align-items: baseline; gap: 10px; padding: 16px 16px 6px; }
.dev-sayi {
  width: 160px; margin: 0; font-size: 2rem; font-weight: 700; text-align: center;
  padding: 10px; border-width: 2px;
}
.buyuk-alan .birim { color: var(--soluk); font-size: .95rem; }

.hizli-adet {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--cizgi); background: #faf8f7;
}
.hizli-adet label { display: flex; flex-direction: column; gap: 4px; color: var(--soluk); font-size: .85rem; }
.hizli-adet small { flex: 1 1 100%; }

.parti-tablo input { margin: 0; }
.parti-tablo td { vertical-align: middle; }
.parti-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--cizgi); flex-wrap: wrap;
}

@media (max-width: 760px) {
  .dev-sayi { width: 120px; font-size: 1.6rem; }
  .hizli-adet { gap: 8px; }
  .hizli-adet .btn { flex: 1; }
}
.birim-secim { width: auto; margin: 0; min-width: 92px; }
.satir-toplam { font-weight: 600; color: var(--soluk); white-space: nowrap; }
.genis-alan { width: 100%; min-width: 220px; margin: 0; }
.dar-alan { width: 96px; margin: 0; }
td.ortala { text-align: center; }
td.ortala input { width: auto; margin: 0; }
.durum-alani { width: 118px; margin: 0; }
.satir-giris { margin: 0; padding: 6px 8px; font-size: .86rem; min-width: 90px; }
td .satir-giris[name="ad"] { min-width: 210px; }

/* ---------- nöbet şeridi: EKG monitörü + nöbetçi posta ----------
   EKG çizgisinin rengi süs değildir: ekip hazırlığını gösterir. Manifesto
   girilmemişse çizgi düz gider — uydurma bir "iyi" hâli çizilmez. */

.nobet-serit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }

.ekg-kutu {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--rail); border: 1px solid var(--rail); min-height: 178px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ekg-kutu::before {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,.5) 0 1px, transparent 1px 24px),
                    repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, transparent 1px 24px);
}
/* Panelin tek gösterişli yeri burası: oran iri, çizgi canlı, gerisi sakin. */
.ekg-bas { position: relative; padding: 16px 20px 0; }
.ekg-etiket { margin: 0; color: rgba(255,255,255,.58); font-size: .84rem; }
.ekg-oran {
  margin: 2px 0 0; color: #fff; font-size: 3.4rem; line-height: 1;
  font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.ekg-oran span { font-size: 1.5rem; font-weight: 500; margin-left: 2px; opacity: .65; letter-spacing: 0; }
.ekg-oran.iyi { color: #6fd3a6; }
.ekg-oran.orta { color: #f0bd63; }
.ekg-oran.kotu { color: #f39189; }
.ekg-durum { margin: 4px 0 0; color: rgba(255,255,255,.6); font-size: .84rem; }
.ekg-ekran { position: relative; height: 84px; }
.ekg-ekran svg { display: block; width: 200%; height: 100%; }
.ekg-kayan { animation: ekg-kay 7s linear infinite; }
@keyframes ekg-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ekg-cizgi { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ekg-cizgi.iyi { stroke: #4ec08d; }
.ekg-cizgi.orta { stroke: #e0a63c; }
.ekg-cizgi.kotu { stroke: #e8695f; }
.ekg-cizgi.yok { stroke: rgba(255,255,255,.34); }
.ekg-alt { position: relative; padding: 0 14px 10px; color: rgba(255,255,255,.55); font-size: .76rem; }

.nobet-kart { display: flex; gap: 12px; align-items: flex-start; }
.nobet-kart .harf {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--radius);
  background: var(--vurgu); color: #fff; display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em;
}
.nobet-kart .bilgi { min-width: 0; }
.nobet-kart .bilgi strong { display: block; font-size: 1.05rem; }
.nobet-kart .bilgi small { color: var(--soluk); display: block; font-size: .8rem; }
.nobet-kalan { margin-top: 10px; }
.nobet-kalan .cubuk { height: 5px; background: var(--cizgi); border-radius: 3px; overflow: hidden; }
.nobet-kalan .cubuk i { display: block; height: 100%; background: var(--vurgu); }
.nobet-personel { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.nobet-personel li { font-size: .82rem; color: var(--soluk); }
.nobet-personel li b { color: var(--metin); font-weight: 600; }

@media (max-width: 860px) { .nobet-serit { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ekg-kayan { animation: none; } }

/* Envanter tablosu — çok sütunlu toplu giriş */
.envanter-tablo input.sayi-alani { width: 84px; }
.envanter-tablo td { vertical-align: top; }
@media (max-width: 760px) { .envanter-tablo input.sayi-alani { width: 68px; } }

/* SKT kutuları */
.skt-kutu-cubugu { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 14px 16px; }
.skt-kutu-cubugu label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--soluk); }
.skt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; padding: 0 16px 14px; }
.skt-kutu { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 6px 8px; background: var(--yuzey); }
.skt-kutu .no { display: block; font-size: .72rem; color: var(--soluk); margin-bottom: 3px; }
.skt-kutu input[type="date"], .skt-kutu select { width: 100%; }
.skt-not { padding: 0 16px 14px; font-size: .82rem; }
.gizli { display: none; }
@media (max-width: 760px) { .skt-izgara { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } }

/* Sayfalama çubuğu */
.sayfalama { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: .85rem; }
.sayfalama .sayfa-numaralari { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sayfalama .sayfa-numaralari a, .sayfalama .sayfa-boyu a {
  display: inline-block; min-width: 26px; text-align: center; padding: 3px 6px;
  border: 1px solid var(--cizgi); border-radius: 4px; text-decoration: none; color: var(--metin); }
.sayfalama .sayfa-numaralari a:hover, .sayfalama .sayfa-boyu a:hover { border-color: var(--vurgu); color: var(--vurgu); }
.sayfalama .sayfa-numaralari b, .sayfalama .sayfa-boyu b {
  display: inline-block; min-width: 26px; text-align: center; padding: 3px 6px;
  background: var(--vurgu); color: #fff; border-radius: 4px; }
.sayfalama .atla { color: var(--soluk); padding: 0 2px; }
.sayfalama .sayfa-boyu { display: flex; gap: 4px; align-items: center; color: var(--soluk); }
@media (max-width: 760px) { .sayfalama { justify-content: flex-start; } }

/* Nöbetçi personel — yüz + ad */
.nobet-personel { display: flex; flex-direction: column; gap: 8px; }
.nobet-personel li { display: flex; align-items: center; gap: 9px; }
.nobet-personel .yuz { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--vurgu-acik); display: grid; place-items: center; border: 1px solid var(--cizgi); }
.nobet-personel .yuz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nobet-personel .yuz i { font-style: normal; font-weight: 600; color: var(--vurgu); font-size: .9rem; }
.nobet-personel .kim { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nobet-personel .kim b { color: var(--metin); font-weight: 600; font-size: .88rem; }
.nobet-personel .kim small { color: var(--soluk); font-size: .78rem; }

/* Malzeme sınıfı rozetleri */
.rozet.sinif-ilac { background: #eef3fb; color: #23508c; }
.rozet.sinif-narkotik { background: var(--vurgu-acik); color: var(--vurgu-koyu); font-weight: 600; }
.rozet.sinif-demirbas { background: #f1eef8; color: #543f8a; }
.rozet.sinif-sarf { background: #eef5f1; color: var(--iyi); }
.sil-kutu { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--kotu); white-space: nowrap; }

/* Manifesto tablosu — satır içi düzenleme */
.tablo .ad-hucre { min-width: 260px; }
.tablo .ad-hucre .genis-alan { width: 100%; }
.tablo .ad-hucre .etken-alan { margin-top: 4px; font-size: .82rem; color: var(--soluk); }
.tablo .ortala { text-align: center; }
/* Genel kural select'e width:100% veriyor; manifesto tablosuna Min/Par/depo
   sütunları eklenince Sınıf hücresi daraldı ve seçici 40 piksele sıkışıp
   yalnızca oku gösterir oldu — "İlaç" yazısı görünmüyordu. Sabit en veriliyor. */
.sinif-alani { border: 1px solid var(--cizgi); border-radius: 4px; padding: 4px 26px 4px 8px;
  font-size: .82rem; background: var(--yuzey); width: auto; min-width: 112px; margin-top: 0; }
select.sinif-alani.sinif-narkotik { border-color: var(--vurgu); color: var(--vurgu-koyu); font-weight: 600; }
select.sinif-alani.sinif-demirbas { border-color: #c9bce4; }
select.sinif-alani.sinif-ilac { border-color: #b9cdea; }

/* Nöbetçi personel — arama düğmesi */
.nobet-personel li { justify-content: flex-start; }
.nobet-personel .kim { flex: 1 1 auto; }
.ara-dugmesi { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--cizgi); border-radius: 999px;
  font-size: .8rem; color: var(--vurgu); text-decoration: none; white-space: nowrap; }
.ara-dugmesi:hover { background: var(--vurgu-acik); border-color: var(--vurgu); }
.ara-dugmesi .ikon { font-size: .95rem; line-height: 1; }
.telefon-yok { flex: 0 0 auto; font-size: .76rem; }
@media (max-width: 400px) { .ara-dugmesi { padding: 5px 8px; } }

/* Haritadaki il işaretleri — hastane değil, il merkezi */
.il-isareti { background: none; border: 0; }
.il-isareti span {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--vurgu); color: #fff;
  font-size: .8rem; font-weight: 700; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.leaflet-popup-content em { color: var(--soluk); font-size: .78rem; font-style: normal; }

/* Başlangıç adımları */
.baslangic-liste { list-style: none; margin: 0; padding: 4px 16px 14px; }
.baslangic-liste li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cizgi); }
.baslangic-liste li:last-child { border-bottom: 0; }
.baslangic-liste .isaret { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  background: var(--vurgu-acik); color: var(--vurgu); }
.baslangic-liste li.tamam .isaret { background: #e6f1ec; color: var(--iyi); }
.baslangic-liste li.tamam .metin strong { color: var(--soluk); text-decoration: line-through; }
.baslangic-liste .metin { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.baslangic-liste .metin small { color: var(--soluk); font-size: .8rem; }

/* Envanter tablosu — mobilde satırlar kart gibi diziliyor */
@media (max-width: 640px) {
  .envanter-tablo thead { display: none; }
  .envanter-tablo, .envanter-tablo tbody, .envanter-tablo tr, .envanter-tablo td { display: block; width: 100%; }
  .envanter-tablo tr { border: 1px solid var(--cizgi); border-radius: var(--radius); margin-bottom: 10px; padding: 8px 10px; }
  .envanter-tablo td { border: 0; padding: 3px 0; }
  .envanter-tablo td::before { content: attr(data-etiket); display: inline-block; min-width: 108px;
    color: var(--soluk); font-size: .78rem; }
  .envanter-tablo input.sayi-alani { width: 90px; }
}

/* Rol yetki tablosu */
.rol-tablosu th, .rol-tablosu td { font-size: .84rem; }
.rol-notlar { margin: 0; padding: 4px 16px 14px 34px; }
.rol-notlar li { font-size: .84rem; color: var(--soluk); margin-bottom: 4px; }
.rol-notlar li strong { color: var(--metin); }

/* Haritadaki il bağlantıları (SVG <a>) */
.harita-kutu a.il-baglanti { cursor: pointer; outline: none; }
.harita-kutu a.il-baglanti:focus-visible .il path,
.harita-kutu a.il-baglanti:focus-visible .il polygon { stroke: #111; stroke-width: 2; }

/* İntikal planı güzergâhı */
.guzergah { list-style: none; margin: 0; padding: 4px 16px 14px; counter-reset: adim; }
.guzergah li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--cizgi); }
.guzergah li:last-child { border-bottom: 0; }
.guzergah li::before { counter-increment: adim; content: counter(adim); position: absolute; left: 0; top: 10px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--vurgu); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.guzergah li small { display: block; color: var(--soluk); font-size: .82rem; }
.guzergah li.eksik-adim::before { background: var(--cizgi); color: var(--soluk); content: "?"; }
.guzergah li.eksik-adim strong { color: var(--soluk); }

/* Türkiye haritası üzerindeki il işaretleri */
.isaret-katmani a { cursor: pointer; }
.isaret-katmani circle { fill: var(--vurgu); stroke: #fff; stroke-width: 2; }
.isaret-katmani text { fill: #fff; font-weight: 700; text-anchor: middle;
  font-family: inherit; pointer-events: none; }
.isaret-katmani a:hover circle { fill: var(--vurgu-koyu); }
.isaret-katmani a.secili circle { fill: #1d4e89; stroke-width: 3; }

/* Sokak haritası ikincil bölüm */
.sokak-haritasi > summary { cursor: pointer; list-style: none; }
.sokak-haritasi > summary::-webkit-details-marker { display: none; }
.sokak-haritasi > summary::after { content: "göster"; color: var(--vurgu); font-size: .82rem; }
.sokak-haritasi[open] > summary::after { content: "gizle"; }

/* Kopyalanacak komut satırı */
code.komut { display: block; background: var(--rail); color: #e8efec; padding: 10px 12px;
  border-radius: var(--radius); font-size: .84rem; overflow-x: auto; white-space: nowrap; }

/* ==========================================================================
   v47 sonrası eklenen bileşenler ve mobil düzeltmeler
   Tasarım dili v47'ye döndü; aşağıdakiler o günden bu yana eklenen
   parçalar ve telefonda çalışması için gereken kurallar.
   ========================================================================== */

:root { --dokunma: 46px; --iyi-zemin: #e9f4ef; }

/* Giriş kutusu: logo burada ortalanır, sol menüde logo yoktur. */
.giris-kimlik { text-align: center; margin-bottom: 20px; }
.giris-kimlik img { display: block; width: 72px; height: auto; max-height: 84px; object-fit: contain; margin: 0 auto 12px; }
.giris-kimlik .ust { margin: 0 0 2px; color: var(--soluk); font-size: .82rem; }
.giris-kimlik h2 { font-size: 1.12rem; }
.giris-kutu .not { margin: 14px 0 12px; color: var(--soluk); font-size: .86rem; text-align: center; }
/* Tanıtım tarafındaki küçük kilit */
.giris-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.giris-logo img { width: 40px; height: auto; max-height: 46px; object-fit: contain; }
.giris-logo strong { font-size: 1rem; }

/* Girişsiz harita bağlantısı: giriş eyleminden ayrı bir yol, ayrı renk. */
.acik-baglanti {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid #b9d4cd; background: var(--iyi-zemin); color: var(--iyi);
  font-size: .9rem; font-weight: 600;
}
.acik-baglanti:hover { background: #dcefe7; text-decoration: none; }

/* Panelde başlangıç adımları */
.baslangic-liste { list-style: none; margin: 0; padding: 4px 16px 12px; }
.baslangic-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.baslangic-liste li:last-child { border-bottom: 0; }
.baslangic-liste .isaret { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .84rem; font-weight: 700; background: var(--vurgu-acik); color: var(--vurgu); }
.baslangic-liste li.tamam .isaret { background: #e3f0ea; color: var(--iyi); }
.baslangic-liste li.tamam .metin strong { color: var(--soluk); text-decoration: line-through; }
.baslangic-liste .metin { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.baslangic-liste .metin small { color: var(--soluk); font-size: .82rem; }

/* Personel rehberi ve konum ağacı içeriği */
.rehber { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
.dugum-icerik { padding-left: 4px; }

/* Telefonda dokunma alanları büyür */
@media (max-width: 760px) {
  .btn { min-height: var(--dokunma); }
  input, select, textarea { min-height: var(--dokunma); font-size: 16px; }
  .yan nav a { min-height: var(--dokunma); display: flex; align-items: center; }
  .mobil-tus { width: var(--dokunma); height: var(--dokunma); }
}
@media (min-width: 720px) { .rehber { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rehber { grid-template-columns: repeat(3, 1fr); } }
.pano.baslangic { border-color: var(--vurgu); }
.menu-icerik { padding-bottom: 6px; }

/* Telefonda alt eylem çubuğu: tek elle Panel/Ara/Düşüm/Sayım/Menü. */
.alt-menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--cizgi);
  padding-bottom: env(safe-area-inset-bottom);
}
.alt-menu a, .alt-menu button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; background: none; border: 0; color: var(--soluk); font: inherit; font-size: .72rem; cursor: pointer;
}
.alt-menu .isaret { font-size: 1.15rem; line-height: 1; }
.alt-menu a:hover, .alt-menu button:hover { color: var(--metin); text-decoration: none; }
.alt-menu a.aktif { color: var(--metin); box-shadow: inset 0 2px 0 var(--vurgu); }
body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .alt-menu { display: none; } body { padding-bottom: 0; } }

/* Telefonda tablolar satır satır karta dönüşür; hücre etiketleri data-etiket'ten. */
@media (max-width: 760px) {
  .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
  .tablo thead { display: none; }
  .tablo tr { border: 1px solid var(--cizgi); border-radius: var(--radius); margin: 10px 14px; padding: 8px 12px; }
  .tablo td { border: 0; padding: 6px 0; display: flex; gap: 10px; align-items: baseline; }
  .tablo td::before { content: attr(data-etiket); flex: 0 0 38%; color: var(--soluk); font-size: .8rem; }
  .tablo td:empty { display: none; }
  /* Etiketi olmayan hücre (işlem düğmeleri, tek sütunlu bilgi satırı) boş bir
     sütun payı bırakmasın — tam genişlik kullansın. */
  .tablo td:not([data-etiket])::before { content: none; }
  .tablo td:not([data-etiket]) { display: block; }
  .tablo td.sag, .tablo td.satir-islem { text-align: left; }
  .tablo td.satir-islem { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px;
    border-top: 1px solid var(--cizgi); margin-top: 6px; }
  .tablo .sag, .tablo .ortala { text-align: left; }
  tr.eksik-satir td { background: none; }
  tr.eksik-satir { border-color: var(--vurgu); background: var(--vurgu-acik); }
  .envanter-tablo td { align-items: center; }
  .envanter-tablo input.sayi-alani { margin-top: 0; max-width: 110px; }
}

/* Türkiye haritası üzerindeki il işaretleri */
.harita-isaret { cursor: pointer; }
.isaret-katmani a { cursor: pointer; }
.isaret-katmani circle { fill: var(--vurgu); stroke: #fff; stroke-width: 2; }
.isaret-katmani text { fill: #fff; font-weight: 700; text-anchor: middle; font-family: inherit; pointer-events: none; }
.isaret-katmani a:hover circle { fill: var(--vurgu-koyu); }
.isaret-katmani a.secili circle { fill: #1D4E89; }

/* Posta rengi: her postanın kendi rengi var */
.posta-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; }

/* Giriş görselinin yerleşimi — geniş fotoğraf dar sütuna sığmaz,
   hangi kısmın görüneceği Ayarlar'dan seçilir. */
.giris-tanitim.yer-kapla-ust { background-size: cover; background-position: center top; }
.giris-tanitim.yer-kapla-orta { background-size: cover; background-position: center center; }
.giris-tanitim.yer-kapla-alt { background-size: cover; background-position: center bottom; }
.giris-tanitim.yer-sigdir { background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0f1417; }

/* Depo EKG şeritleri: her deponun kendi hazırlık çizgisi */
.depo-serit { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
.depo-serit .ekg-kutu { min-height: 150px; }
.depo-serit .ekg-oran { font-size: 2.6rem; }
.depo-serit .ekg-alt a { color: rgba(255,255,255,.85); text-decoration: underline; }
@media (min-width: 720px) { .depo-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .depo-serit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Depoya göre bölünmüş yerleşim ağacı: her deponun kendi bloğu, kendi başlığı,
   kendi bırakma alanı. Depoya bağlı olmayan konumlar en altta ayrı blokta. */
.depo-blok { border: 1px solid var(--cizgi); border-radius: var(--radius); margin: 14px 14px 0; }
.depo-blok:last-child { margin-bottom: 14px; }
.depo-bas {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--cizgi); background: var(--zemin);
  border-radius: var(--radius) var(--radius) 0 0;
}
.depo-kimlik h3 { margin: 0; font-size: 1rem; }
.depo-kimlik small { display: block; color: var(--soluk); font-size: .82rem; margin-top: 2px; }
.depo-islem { display: flex; gap: 6px; flex-shrink: 0; }
.depo-blok .agac { margin: 0; }
.depo-bos {
  list-style: none; margin: 10px 14px 0; padding: 10px 14px; color: var(--soluk);
  font-size: .85rem; background: var(--zemin); border-radius: var(--radius);
}
.depo-box-form, .depo-tasi-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px dashed var(--cizgi);
}
.depo-box-form input[name="ad"] { flex: 1 1 220px; min-width: 0; }
.depo-box-form input[type="number"] { width: 76px; flex: 0 0 auto; }
.depo-tasi-form { flex-direction: column; align-items: stretch; }
.depo-tasi-form fieldset { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 8px 12px; margin: 0; }
.depo-tasi-form legend { color: var(--soluk); font-size: .8rem; padding: 0 4px; }
.depo-tasi-form .onay { display: flex; align-items: center; gap: 8px; min-height: var(--dokunma); }
.depo-tasi-form label { display: block; }
.depo-tasi-form select { width: 100%; }
.bagsiz-blok { border-color: var(--orta); }
.bagsiz-blok .depo-bas { background: #fdf6e7; }
@media (max-width: 760px) {
  .depo-bas { flex-direction: column; }
  .depo-box-form input[name="ad"] { flex: 1 1 100%; }
}
/* Manifestosu olmayan konum (depo, boş box) hazırlık yüzdesi veremez; durumu
   "İçi boş / Dolu" diye söyler. Renk taşımaz, soluk okunur. */
.durum-notr .kart-durum { color: var(--soluk); }
.kart-bilgi b.durum-notr { color: var(--soluk); }
/* Ekip EKG'si çizilmediğinde nöbetçi posta paneli tek başına tam genişlik alır. */
.nobet-serit.tek { grid-template-columns: minmax(0, 1fr); }
.depo-bekliyor p { padding: 0 16px 4px; color: var(--soluk); }
.depo-ekle-katla { margin: 0 14px 14px; }

/* ==========================================================================
   Panel — operasyon hazırlık merkezi düzeni
   Yeni sınıflar; var olan kurallara dokunulmaz.
   ========================================================================== */

.panel-selam {
  display: flex; align-items: stretch; justify-content: space-between; gap: 18px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.selam-metin h1 { margin: 0; font-size: 2rem; line-height: 1.15; }
.selam-metin p { margin: 4px 0 0; color: var(--soluk); }
.selam-not {
  flex: 1 1 320px; max-width: 520px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--vurgu);
  border-radius: var(--radius); padding: 14px 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.selam-not p { margin: 0; font-size: .95rem; }
.selam-not small { color: var(--soluk); margin-top: 4px; }

/* ---------- depo kartları ---------- */

.depo-kart-izgara { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.depo-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
  border-top: 3px solid var(--cizgi-koyu); padding: 16px 18px;
}
.depo-kart.iyi  { border-top-color: var(--iyi); }
.depo-kart.orta { border-top-color: var(--orta); }
.depo-kart.kotu { border-top-color: var(--kotu); }
.dk-ust { display: flex; align-items: center; gap: 16px; }
.dk-kimlik { flex: 0 0 auto; min-width: 150px; }
.dk-kimlik h2 { margin: 0; font-size: 1.05rem; }
.dk-kimlik h2 a { color: inherit; }
.dk-durum { margin: 3px 0 0; font-size: .84rem; color: var(--soluk); display: flex; align-items: center; gap: 6px; }
.dk-oran { margin: 2px 0 0; font-size: 2.4rem; font-weight: 700; line-height: 1.05; }
.dk-oran span { font-size: 1.1rem; font-weight: 600; margin-left: 2px; }
.dk-oran.iyi { color: var(--iyi); } .dk-oran.orta { color: var(--orta); }
.dk-oran.kotu { color: var(--kotu); } .dk-oran.yok { color: var(--soluk); }
.dk-ekg { flex: 1 1 auto; min-width: 0; height: 74px; overflow: hidden; }
.dk-ekg svg { width: 100%; height: 100%; }
.dk-halka { flex: 0 0 auto; width: 96px; height: 96px; }
.dk-halka svg { width: 100%; height: 100%; }
.halka-zemin { fill: none; stroke: var(--cizgi); stroke-width: 8; }
.halka-dolu { fill: none; stroke-width: 8; stroke-linecap: round; }
.halka-dolu.iyi { stroke: var(--iyi); } .halka-dolu.orta { stroke: var(--orta); }
.halka-dolu.kotu { stroke: var(--kotu); } .halka-dolu.yok { stroke: var(--cizgi-koyu); }
.halka-yazi { text-anchor: middle; font-size: 17px; font-weight: 700; font-family: inherit; fill: var(--metin); }
.halka-yazi.iyi { fill: var(--iyi); } .halka-yazi.orta { fill: var(--orta); }
.halka-yazi.kotu { fill: var(--kotu); } .halka-yazi.yok { fill: var(--soluk); }
.dk-alt {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi);
  font-size: .84rem; color: var(--soluk);
}
.nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cizgi-koyu); }
.nokta.iyi { background: var(--iyi); } .nokta.orta { background: var(--orta); }
.nokta.kotu { background: var(--kotu); } .nokta.yok { background: var(--cizgi-koyu); }

/* ---------- dört ölçü kartı ---------- */

.metrik-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metrik-kart {
  position: relative; display: block; background: var(--yuzey); color: inherit;
  border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 14px 42px 14px 16px;
  border-left: 3px solid var(--cizgi-koyu);
}
.metrik-kart.iyi  { border-left-color: var(--iyi); }
.metrik-kart.orta { border-left-color: var(--orta); }
.metrik-kart.kotu { border-left-color: var(--kotu); }
.metrik-kart:hover { border-color: var(--cizgi-koyu); }
.mk-ad { display: block; font-size: .86rem; font-weight: 600; }
.mk-sayi { display: block; font-size: 1.9rem; line-height: 1.15; margin: 2px 0; }
.metrik-kart.iyi .mk-sayi  { color: var(--iyi); }
.metrik-kart.orta .mk-sayi { color: var(--orta); }
.metrik-kart.kotu .mk-sayi { color: var(--kotu); }
.mk-alt { display: block; color: var(--soluk); font-size: .78rem; }
.mk-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk); }

/* ---------- ikili yerleşim ---------- */

.panel-ikili { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
.panel-ikili > .pano { margin: 0; }

/* ---------- kapasite matrisi ---------- */

.matris td, .matris th { padding: 9px 14px; }
.matris-hucre { display: flex; align-items: center; gap: 8px; }
.matris-hucre .cubuk { flex: 1 1 auto; min-width: 46px; }
.matris-hucre b { font-size: .82rem; min-width: 34px; text-align: right; }
.matris-not { margin: 0; padding: 10px 16px 14px; color: var(--soluk); font-size: .85rem; }

/* ---------- durum göstergesi ---------- */

.durum-gosterge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px 8px; }
.dg-parca { border-left: 1px solid var(--cizgi); padding-left: 12px; }
.dg-bas { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--soluk); }
.dg-parca strong { display: block; font-size: 1.5rem; line-height: 1.2; }
.dg-parca strong.iyi { color: var(--iyi); } .dg-parca strong.orta { color: var(--orta); }
.dg-parca strong.kotu { color: var(--kotu); } .dg-parca strong.yok { color: var(--soluk); }
.dg-parca small { color: var(--soluk); font-size: .78rem; }
.dg-serit { display: flex; height: 8px; margin: 8px 16px 16px; border-radius: 4px; overflow: hidden; background: var(--cizgi); }
.dg-serit i.iyi { background: var(--iyi); } .dg-serit i.orta { background: var(--orta); }
.dg-serit i.kotu { background: var(--kotu); } .dg-serit i.yok { background: var(--cizgi-koyu); }

.hareket-satir { gap: 10px; }

@media (min-width: 900px) {
  .depo-kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrik-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel-ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .selam-metin h1 { font-size: 1.5rem; }
  /* Mobilde EKG gizlenmiyor, alta tam genişlikte geçiyor: ikon + ad + halka
     üst satırda, ritim çizgisi altında. */
  .dk-ust { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; }
  .dk-ikon { grid-column: 1; grid-row: 1; }
  .dk-kimlik { grid-column: 2; grid-row: 1; min-width: 0; }
  .dk-halka { grid-column: 3; grid-row: 1; width: 72px; height: 72px; align-self: center; }
  .dk-ekg { grid-column: 1 / -1; grid-row: 2; height: 62px; }
  .durum-gosterge { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dördüncü hazırlık bandı: %80-94 "hazıra yakın".
   Eşikler hazirlik_sinifi() içinde tanımlı; buradaki kurallar onun karşılığı.
   ========================================================================== */
.cubuk i.hazira-yakin { background: var(--hazira-yakin); }
.rozet.hazira-yakin { background: var(--hazira-yakin-acik); color: var(--hazira-yakin); }
.nokta.hazira-yakin { background: var(--hazira-yakin); }
.is-nokta.hazira-yakin { background: var(--hazira-yakin); }
.olcumler article.hazira-yakin strong { color: var(--hazira-yakin); }
.depo-kart.hazira-yakin { border-top-color: var(--hazira-yakin); }
.dk-oran.hazira-yakin { color: var(--hazira-yakin); }
.halka-dolu.hazira-yakin { stroke: var(--hazira-yakin); }
.halka-yazi.hazira-yakin { fill: var(--hazira-yakin); }
.metrik-kart.hazira-yakin { border-left-color: var(--hazira-yakin); }
.metrik-kart.hazira-yakin .mk-sayi { color: var(--hazira-yakin); }
.dg-parca strong.hazira-yakin { color: var(--hazira-yakin); }
.dg-serit i.hazira-yakin { background: var(--hazira-yakin); }
.ekg-cizgi.hazira-yakin { stroke: #a8c95a; }
.durum-hazira-yakin .kart-durum { color: var(--hazira-yakin); }
.kart-bilgi b.durum-hazira-yakin { color: var(--hazira-yakin); }

/* Depo kartındaki EKG beyaz zeminde duruyor; koyu monitör için ayarlanmış
   renkler burada okunmuyordu (özellikle "veri yok" hâli bembeyazdı). */
.dk-ekg { background: var(--zemin); border-radius: var(--radius); }
.dk-ekg .ekg-cizgi { stroke-width: 2.6; }
.dk-ekg .ekg-cizgi.iyi { stroke: var(--iyi); }
.dk-ekg .ekg-cizgi.orta { stroke: var(--orta); }
.dk-ekg .ekg-cizgi.kotu { stroke: var(--kotu); }
.dk-ekg .ekg-cizgi.hazira-yakin { stroke: var(--hazira-yakin); }
.dk-ekg .ekg-cizgi.yok { stroke: var(--cizgi-koyu); }

/* Başlangıç kartı kaybolunca nöbetçi posta tek başına tam genişler. */
.panel-ikili.tek { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Nöbetçi posta — koyu vitrin şeridi + ünvan sıralı personel listesi
   ========================================================================== */

.nobet-vitrin {
  position: relative; overflow: hidden; margin: 14px 16px;
  border-radius: var(--radius); background: var(--rail); color: #fff;
  padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* Koyu zeminde hafif bir ışık: kart düz siyah bir dikdörtgen gibi durmasın. */
.nobet-vitrin::before {
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(192,39,45,.34), transparent 68%); pointer-events: none;
}
.nobet-vitrin.son-duzluk::before { background: radial-gradient(circle, rgba(224,166,60,.42), transparent 68%); }

.nv-kimlik { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.nv-harf {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--radius);
  background: var(--vurgu); color: #fff; display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.nv-kimlik strong { display: block; font-size: 1.15rem; }
.nv-kimlik small { display: block; color: rgba(255,255,255,.66); font-size: .8rem; }

.nv-sayac { position: relative; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nv-sayac svg { width: 64px; height: 64px; flex: 0 0 auto; }
.nv-yay-zemin { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 6; }
.nv-yay { fill: none; stroke: #4ec08d; stroke-width: 6; stroke-linecap: round; }
.son-duzluk .nv-yay { stroke: #e0a63c; }
.nv-kalan strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.nv-kalan strong span { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.66); margin: 0 4px 0 1px; }
.nv-kalan small { color: rgba(255,255,255,.62); font-size: .76rem; }

/* Personel listesi: ünvan sırasına göre gelir, rozet rengi ünvanı söyler. */
.nobet-pano .nobet-personel { margin: 0; padding: 0 16px; gap: 0; }
.nobet-pano .nobet-personel li {
  padding: 10px 0; border-bottom: 1px solid var(--cizgi); gap: 11px;
}
.nobet-pano .nobet-personel li:last-child { border-bottom: 0; }
.nobet-pano .nobet-personel .yuz { width: 38px; height: 38px; border: 2px solid var(--cizgi); }
.nobet-personel .yuz.doktor    { border-color: var(--vurgu); }
.nobet-personel .yuz.paramedik { border-color: var(--iyi); }
.nobet-personel .yuz.att       { border-color: #23508c; }
.nobet-personel .yuz.surucu    { border-color: var(--orta); }
.nobet-personel .yuz.doktor i    { color: var(--vurgu); }
.nobet-personel .yuz.paramedik i { color: var(--iyi); }
.nobet-personel .yuz.att i       { color: #23508c; }
.nobet-personel .yuz.surucu i    { color: var(--orta); }

.unvan-rozet {
  align-self: flex-start; display: inline-block; margin-top: 2px;
  padding: 1px 8px; border-radius: 20px; font-size: .72rem; font-weight: 600;
  letter-spacing: .01em; text-transform: uppercase;
  background: var(--zemin); color: var(--soluk);
}
.unvan-rozet.doktor    { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.unvan-rozet.paramedik { background: #e2f0ea; color: var(--iyi); }
.unvan-rozet.att       { background: #eef3fb; color: #23508c; }
.unvan-rozet.surucu    { background: #fbf0d9; color: var(--orta); }

.nobet-dipnot { margin: 0; padding: 10px 16px 14px; color: var(--soluk); font-size: .78rem; }

@media (max-width: 520px) {
  .nobet-vitrin { flex-direction: column; align-items: flex-start; }
  .nv-sayac { align-self: stretch; justify-content: flex-start; }
}
/* Listede tanınmayan ünvan (hemşire, teknisyen, boş) — rozet nötr kalır. */
.nobet-personel .yuz.diger { border-color: var(--cizgi-koyu); }
.nobet-personel .yuz.diger i { color: var(--soluk); }
.unvan-rozet.diger { background: var(--zemin); color: var(--soluk); }

/* Depo kartı ikonu: her deponun kendi rengi ya da kendi fotoğrafı. */
.dk-ikon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden; background: var(--cizgi-koyu);
}
.dk-ikon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; }
.dk-ikon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ritim adı EKG kutusunun köşesinde: çizginin ne anlattığı yazıyla da dursun. */
.dk-ekg { position: relative; }
.dk-ritim {
  position: absolute; right: 8px; bottom: 4px; font-size: .68rem; letter-spacing: .02em;
  color: var(--soluk); text-transform: uppercase; pointer-events: none;
}

@media (max-width: 620px) {
  .dk-ikon { width: 46px; height: 46px; }
  .dk-ikon svg { width: 28px; height: 28px; }
  .dk-oran { font-size: 2rem; }
  .metrik-kart { padding: 12px 34px 12px 13px; }
  .mk-sayi { font-size: 1.6rem; }
  .mk-ok { right: 10px; }
  .nv-harf { width: 48px; height: 48px; font-size: 1.4rem; }
  .nv-kimlik strong { font-size: 1.02rem; }
  .nobet-vitrin { margin: 12px; padding: 14px; }
  .panel-selam { gap: 12px; }
  .selam-not { flex: 1 1 100%; max-width: none; padding: 12px 14px; }
  .matris td, .matris th { padding: 8px 12px; }
  .matris-hucre .cubuk { min-width: 60px; }
}
@media (max-width: 380px) {
  .metrik-izgara { grid-template-columns: 1fr; }
  .nobet-personel .kim { min-width: 0; }
  .ara-dugmesi { font-size: .78rem; }
}
/* Menüdeki depo satırlarında hazırlık yüzdesi — rozet değil, sade bir sayı. */
.menu-oran { font-size: .74rem; font-weight: 700; opacity: .9; }
.menu-oran.iyi { color: #6fd3ab; }
.menu-oran.hazira-yakin { color: #b6d95f; }
.menu-oran.orta { color: #e6bd6a; }
.menu-oran.kotu { color: #f08b82; }
.menu-oran.yok { color: rgba(255,255,255,.45); }
/* Manifestonun "tek liste, her depoda ayrı ayrı" kuralı sayfa başında durur. */
.manifesto-kural {
  margin-top: 8px; padding: 10px 14px; border-left: 3px solid var(--vurgu);
  background: var(--yuzey); border-radius: var(--radius); max-width: 78ch;
}
/* SKT kutuları çubuğundaki toplam göstergesi — girilebilir alan değil, bilgi. */
.tek-toplam { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.tek-toplam .no { color: var(--soluk); font-size: .78rem; }
.tek-toplam strong { font-size: 1.15rem; }
/* Başlangıç adımlarının ilerlemesi: "tek kayıt girdim, tamam oldu" yanılgısını
   önlemek için kaçta kaç olduğu yazıyla ve çubukla gösterilir. */
.adim-olcu { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.adim-olcu .cubuk { flex: 0 0 120px; height: 5px; background: var(--cizgi); border-radius: 3px; overflow: hidden; }
.adim-olcu .cubuk i { display: block; height: 100%; background: var(--orta); }
.adim-olcu small { color: var(--soluk); font-size: .78rem; }
@media (max-width: 620px) { .adim-olcu { flex-wrap: wrap; } .adim-olcu .cubuk { flex: 1 1 100%; } }
/* Depoya özel manifesto blokları — her deponun kendi formu. */
.depo-ozel-blok { border-top: 1px solid var(--cizgi); padding: 14px 16px; }
.depo-ozel-blok h3 { margin: 0 0 10px; font-size: .98rem; }
.depo-ozel-blok h3 small { font-weight: 400; margin-left: 8px; font-size: .8rem; }
.depo-ozel-blok .tablo { margin-bottom: 12px; }
.depo-ozel-ekle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.depo-ozel-ekle label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--soluk); }
.depo-ozel-ekle label input[name="yeni_material_kod"] { min-width: 260px; }
.depo-ozel-ekle small { font-size: .76rem; }
@media (max-width: 620px) {
  .depo-ozel-ekle { flex-direction: column; align-items: stretch; }
  .depo-ozel-ekle label input[name="yeni_material_kod"] { min-width: 0; }
}

/* Panel sadeleştirmesi: hazırlık dökümü tek panoda, ayrıntılar link ızgarası. */
.dokum-ara {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px; margin-top: 4px; border-top: 1px solid var(--cizgi);
  color: var(--soluk); font-size: .82rem;
}
.ayrinti-baglar {
  display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--cizgi);
}
.ayrinti-baglar a {
  display: block; padding: 12px 16px; background: var(--yuzey); color: inherit;
}
.ayrinti-baglar a:hover { background: var(--zemin); }
.ayrinti-baglar strong { display: block; font-size: .9rem; }
.ayrinti-baglar strong::after { content: ' →'; color: var(--vurgu); font-weight: 400; }
.ayrinti-baglar small { color: var(--soluk); font-size: .78rem; }
.ayrinti-pano { margin-top: 4px; }
@media (min-width: 720px)  { .ayrinti-baglar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ayrinti-baglar { grid-template-columns: repeat(3, 1fr); } }
/* "Tüm konumlarda" altındaki kırılım: kalan adet hangi konumda duruyor. */
.kart-bilgi li.diger-konum { font-size: .84rem; }
.kart-bilgi li.diger-konum span { color: var(--soluk); padding-left: 4px; }
.kart-bilgi li.diger-konum b { font-weight: 600; color: var(--soluk); }
/* Dağıt: hepsine uygula çubuğu. */
.dagit-hepsi {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--zemin);
}
.dagit-hepsi label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--soluk); flex: 1 1 280px; }
.dagit-hepsi select { width: 100%; }
@media (max-width: 620px) { .dagit-hepsi { flex-direction: column; align-items: stretch; } }
/* Manifesto: üstteki kaydet çubuğu ve depoya özel bölümünün düzeni. */
.form-alt-ust { border-bottom: 1px solid var(--cizgi); border-top: 0; }
.kural-listesi { margin: 0; padding: 12px 16px 14px 34px; color: var(--soluk); max-width: 88ch; }
.kural-listesi li { margin-bottom: 4px; font-size: .9rem; }
.kural-listesi strong { color: var(--metin); }
.depo-ozel-ekle { display: block; }
.depo-ozel-ekle .ekle-baslik { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.depo-ozel-ekle .ekle-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.depo-ozel-ekle .ekle-satir label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--soluk); }
.depo-ozel-ekle .ekle-satir label:first-child { flex: 1 1 300px; }
.depo-ozel-ekle .ekle-satir input[name="yeni_material_kod"] { width: 100%; }
.depo-ozel-ekle > small { display: block; margin-top: 8px; font-size: .78rem; }
@media (max-width: 620px) {
  .depo-ozel-ekle .ekle-satir { flex-direction: column; align-items: stretch; }
  .depo-ozel-ekle .ekle-satir label:first-child { flex: 1 1 auto; }
}
/* Manifesto girişi tamamlandı onayı. */
.manifesto-onay form { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.manifesto-onay strong { display: block; }
.manifesto-onay small { display: block; color: var(--soluk); max-width: 70ch; margin-top: 2px; }
.manifesto-onay.bitti { border-left: 3px solid var(--iyi); }
/* Salt okunur büyük sayı: girilebilir alan gibi görünmesin. */
.dev-sayi.okunur { display: inline-block; border: 0; background: none; color: var(--metin); }
.ekran-gorevi { margin: 0; padding: 12px 16px; color: var(--soluk); font-size: .88rem;
  border-bottom: 1px solid var(--cizgi); max-width: 90ch; }
/* Envanter tablosunda eksik olan depo hücresi. */
.envanter-tablo input.eksik-alan { border-color: var(--kotu); }

/* Son hareketler listesinde orta sütun esnemiyordu; ad ortalanmış görünüyordu. */
.liste .satir > div:not(.oran) { flex: 1 1 auto; min-width: 0; text-align: left; }
.hareket-satir strong, .hareket-satir small { display: block; }

/* Personel kartı: fotoğraf, ünvan rozeti ve kişinin son işlemleri. */
.kisi-bas { display: flex; align-items: center; gap: 10px; }
.kisi .yuz {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--zemin); border: 2px solid var(--cizgi);
}
.kisi .yuz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kisi .yuz i { font-style: normal; font-weight: 700; color: var(--soluk); }
.kisi-kimlik { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kisi-kimlik strong { font-size: .95rem; }
.kisi-islem { margin-top: 8px; }
.kisi-islem > summary { cursor: pointer; font-size: .82rem; color: var(--vurgu); list-style: none; }
.kisi-islem > summary::-webkit-details-marker { display: none; }
.kisi-islem > summary::before { content: '▸ '; }
.kisi-islem[open] > summary::before { content: '▾ '; }
.kisi-islem ul { list-style: none; margin: 8px 0 6px; padding: 0; }
.kisi-islem li { display: flex; gap: 8px; font-size: .78rem; color: var(--soluk);
  padding: 4px 0; border-bottom: 1px solid var(--cizgi); }
.kisi-islem li:last-child { border-bottom: 0; }
.kisi-islem li .zaman { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.kisi-islem li.yapisal span:last-child { color: var(--metin); }
.kisi-islem-yok { display: block; margin-top: 8px; font-size: .78rem; }
/* Personel kartındaki stok hareketi satırı — yapısal değişikliklerden ayrılsın. */
.kisi-islem li.stok span:last-child { color: var(--metin); }
/* Konumda stok yokken hareket formları yerine çıkan açıklama. */
.hareket-bos { padding: 16px; background: var(--zemin); border-radius: var(--radius); margin: 4px 16px 16px; }
.hareket-bos p { margin: 6px 0 0; color: var(--soluk); font-size: .88rem; max-width: 78ch; }
/* Logo bloğu artık bağlantı; yazı rengi ve altı çizgisi değişmesin. */
a.marka { color: inherit; display: block; }
a.marka:hover { text-decoration: none; opacity: .9; }
/* Periyodik görevler: vadesi gelen rutinler ve "Yaptım" onayı. */
.gorev-satir { align-items: flex-start; }
.gorev-aciklama { display: block; margin-top: 3px; }
.gorev-onay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.gorev-onay input[name="not_metni"] { width: 180px; }
.gorev-ekle { margin: 14px 16px; }
.gorev-ekle .tablo { margin-bottom: 12px; }
@media (max-width: 760px) {
  .gorev-satir { flex-direction: column; }
  .gorev-onay { width: 100%; }
  .gorev-onay input[name="not_metni"] { flex: 1 1 140px; width: auto; }
}
/* Cron çalışma durumu özeti: yeşil normal, amber gecikmiş, kırmızı hiç çalışmamış. */
.cron-ozet {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 14px 16px; padding: 14px 16px;
  border-radius: var(--radius); background: var(--zemin); border-left: 3px solid var(--cizgi-koyu);
}
.cron-ozet.iyi  { border-left-color: var(--iyi); }
.cron-ozet.orta { border-left-color: var(--orta); }
.cron-ozet.kotu { border-left-color: var(--kotu); }
.cron-ozet strong { display: block; }
.cron-ozet small { display: block; color: var(--soluk); margin-top: 2px; max-width: 74ch; }
/* Tablo içindeki kaydet çubuğu: tabloya yapışmasın, kendi boşluğu olsun. */
.form-alt-tablo { padding: 12px 16px; border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.form-alt-tablo small { font-size: .8rem; }

/* =====================================================================
   KART İÇ HİZASI — tek kural, bütün sayfalar.
   .pano'nun kendi iç boşluğu yoktu; boşluk içine konan sarmalayıcıdan
   (form-izgara, form-pano…) geliyordu. Sarmalayıcısız konan paragraf, düz
   form ve düğme çubuğu kartın kenarına yapışıyordu; aynı kartta biri içeride
   biri kenarda duruyordu (Ayarlar'da SMTP kaydet ile test postası gibi).
   Artık kartın DOĞRUDAN içindeki içerik başlıkla (18px) aynı hizada durur.
   Kendi düzenini kuran öğelere (tablo, liste, ızgara) dokunulmaz.
   ===================================================================== */
.pano > p,
.pano > small,
.pano > ul,
.pano > ol,
.pano > h3,
.pano > .form-alt,
.pano > form > p,
.pano > form > .form-alt:not(.form-alt-tablo),
.pano > form > small,
.pano > form > h3 {
  margin-left: 18px;
  margin-right: 18px;
}
.pano > p:first-of-type,
.pano > .pano-bas + p { margin-top: 14px; }
.pano > p:last-child,
.pano > form:last-child > .form-alt:last-child,
.pano > .form-alt:last-child { margin-bottom: 16px; }
.pano > form > .form-alt:not(.form-alt-tablo) { margin-top: 12px; margin-bottom: 14px; }

/* Kartın doğrudan içindeki form ızgarası: yalnızca .form-pano içindeyken
   boşluk alıyordu; dışında kalanlar (Ayarlar'daki görsel yerleşim formu)
   kenara yapışıyordu. Başlıkla aynı 18px hizaya çekildi. */
.pano > .form-izgara,
.pano > form.form-izgara { padding: 16px 18px; }

/* Kartın doğrudan içindeki arama/süzgeç çubuğu da içeride dursun */
.pano > .filtre-cubugu,
.pano > form.filtre-cubugu { padding: 12px 18px 0; margin-bottom: 12px; }

/* Geniş tablolar kartı taşırmasın: kendi içinde yatay kaysın.
   Manifesto tablosu 11 sütunla 145px taşıyor, "Yenişehir Deposu" başlığı
   kesiliyordu. */
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tablo-kaydir > .tablo { min-width: 100%; }

/* Manifestodaki sayı kutuları gereğinden genişti; sütunlar sığsın */
.manifesto-tablo input.sayi-alani { width: 78px; min-width: 0; padding-left: 6px; padding-right: 6px; }