:root {
  --zemin: #eef3ea; --kart: #fff; --yazi: #1d2622; --soluk: #66736d; --cizgi: #d9e0dc;
  --ana: #4c9a2a; --ana-acik: #e5f2dc; --menu: #2c3a2e; /* SHAF logo yeşili tonları */ --kirmizi: #c62828; --kirmizi-acik: #fde8e8; --sari: #a66a00; --sari-acik: #fff3d6;
  --mavi: #1a5fb4; --mavi-acik: #e4eefb; --gri-acik: #eceff1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--zemin); color: var(--yazi); }
a { color: var(--ana); }
.ust { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--menu); color: #fff; }
.ust h1 { font-size: 20px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust .geri { color: #fff; text-decoration: none; font-size: 34px; line-height: 1; padding: 0 8px 4px; }
.ust .logo { font-size: 15px; font-weight: 800; letter-spacing: .04em; background: var(--ana); padding: 4px 8px; border-radius: 6px; }
.ust .kisi { font-size: 14px; opacity: .9; }
.bosluk { flex: 1; }
.durum { border: 0; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.durum.tamam { background: #d7f0df; color: #135c33; } .durum.bekliyor { background: var(--sari-acik); color: var(--sari); }
.durum.kapali { background: #e0e0e0; color: #444; } .durum.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.hata-serit { margin: 0; padding: 0 16px; color: var(--kirmizi); font-size: 14px; }
.hata-serit:not(:empty) { padding: 8px 16px; background: var(--kirmizi-acik); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; }
.kart.dar { max-width: 420px; margin: 40px auto; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.kart.vurgu { border: 2px solid var(--ana); }
.kart h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: .02em; }
.kart h3 { margin: 16px 0 8px; font-size: 15px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }
input, select, textarea { font: inherit; font-size: 17px; color: var(--yazi); padding: 10px 12px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: #fff; min-height: 46px; width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana); border-color: var(--ana); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px;
  border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--yazi); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.btn.ana { background: var(--ana); border-color: var(--ana); color: #fff; }
.btn.tehlike { color: var(--kirmizi); border-color: #f0c0c0; }
.btn.genis { width: 100%; min-height: 64px; font-size: 19px; }
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arac-satir { display: flex; gap: 10px; flex-wrap: wrap; }
.ara { flex: 1; min-width: 200px; }
.alt-arac { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.alt-arac.yapiskan { position: sticky; bottom: 0; background: var(--zemin); padding: 10px 0; border-top: 1px solid var(--cizgi); }
.ipucu { color: var(--soluk); font-size: 14px; }
.hata { color: var(--kirmizi); font-size: 14px; margin: 0; }
.liste { display: flex; flex-direction: column; gap: 8px; }
.satir-kart { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 12px; text-decoration: none; color: var(--yazi); }
.satir-kart b { font-size: 18px; } .satir-kart span { color: var(--soluk); font-size: 14px; }
.rozetler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rozet { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #333; background: var(--gri-acik); }
.rozet.yesil { background: #d7f0df; color: #135c33; } .rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.sari { background: var(--sari-acik); color: var(--sari); } .rozet.mavi { background: var(--mavi-acik); color: var(--mavi); }
.rozet.gri { background: var(--gri-acik); color: #555; }
.iki-bolum { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.buyuk-tarih { display: flex; gap: 28px; margin-bottom: 8px; }
.buyuk-tarih span { display: flex; flex-direction: column; color: var(--soluk); font-size: 13px; font-weight: 600; }
.buyuk-tarih b { font-size: 26px; color: var(--yazi); }
.not { background: var(--sari-acik); padding: 8px 10px; border-radius: 8px; margin: 6px 0; font-size: 15px; }
.baslik-satir { display: flex; align-items: center; justify-content: space-between; }
.kunye { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.kunye dt { color: var(--soluk); font-weight: 600; } .kunye dd { margin: 0; }
.linyeler { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 14px; }
.linyeler li { display: flex; gap: 8px; } .linyeler li span { color: var(--soluk); min-width: 64px; font-weight: 600; }
.linyeler li.bos { color: #aaa; }
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo th, .tablo td { text-align: left; padding: 8px; border-bottom: 1px solid var(--cizgi); }
.izgara2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.izgara3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kutu { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--yazi); }
.kutu input { width: 22px; height: 22px; min-height: 0; }
/* bakım formu */
.alanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.alan.genis { margin-top: 12px; }
.alan { border-radius: 10px; transition: background .3s; }
.alan.parla { animation: parla 1.6s; }
@keyframes parla { 0% { background: #ffe680; box-shadow: 0 0 0 6px #ffe680; } 100% { background: transparent; box-shadow: none; } }
.alan.test { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }
.secenek { display: flex; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.secenek button { flex: 1; min-height: 46px; border: 0; border-right: 1px solid var(--cizgi); background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: #555; }
.secenek button:last-child { border-right: 0; }
.secenek button.secili.yesil { background: #6aaa3a; color: #fff; } .secenek button.secili.kirmizi { background: var(--kirmizi); color: #fff; }
.secenek button.secili.gri { background: #78909c; color: #fff; }
.secenek button.secili.degisti { background: #1e6b45; color: #fff; }
.secenek button { padding: 0 4px; font-size: 15px; }
.sekmeler { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.sekmeler button { min-height: 46px; padding: 0 14px; border: 0; border-right: 1px solid var(--cizgi); background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sekmeler button:last-child { border-right: 0; }
.sekmeler button[aria-pressed="true"] { background: var(--ana); color: #fff; }
.birimli { display: flex; align-items: center; gap: 6px; } .birimli em { font-style: normal; color: var(--soluk); min-width: 34px; }
/* rapor (A4) */
.a4 { background: #fff; width: 100%; max-width: 820px; margin: 0 auto; padding: 18px; border: 1px solid var(--cizgi); }
.rapor { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.rapor td, .rapor th { border: 1px solid #9aa5a0; padding: 4px 6px; vertical-align: top; word-wrap: break-word; }
.rapor .ana-baslik { background: #3b6e22; color: #fff; font-size: 14px; padding: 8px; }
.rapor .bolum { background: #e2efd8; text-align: left; font-size: 12px; }
.rapor .et { font-weight: 700; background: #f4f7f5; }
.rapor .dg.ariza { color: var(--kirmizi); font-weight: 700; }
.rapor .dg.degisti { color: #2e7d32; font-weight: 700; }
/* otomatik arıza notları: arızalı kırmızı, değiştirildi yeşil */
.oto-not { font-weight: 700; } .oto-not.ariza { color: var(--kirmizi); } .oto-not.degisti { color: #2e7d32; }
.oto-notlar:not(:empty) { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--gri-acik); display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; }
.onceki-serit { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--mavi-acik); color: var(--mavi); font-size: 15px; }
.not-ariza { color: var(--kirmizi); } .not-degisti { color: #2e7d32; }
.rapor .l-bolu { color: #d40000; font-weight: 700; } .rapor .l-ve { color: #1a5fb4; font-weight: 700; }
.rapor .dg.notalan { min-height: 24px; }
.rapor.kucuk { font-size: 11px; }
.rapor tr.bas td { font-weight: 700; background: #f4f7f5; }
.durum-satir { text-align: center; font-size: 13px; padding: 8px !important; }
.imza { display: flex; justify-content: space-between; margin-top: 24px; font-size: 12px; }
.imza div { display: flex; flex-direction: column; gap: 30px; text-align: center; width: 45%; align-items: center; }
.imza .kase { max-height: 26mm; max-width: 60mm; object-fit: contain; }
.imza .imza-resim { max-height: 20mm; max-width: 60mm; object-fit: contain; }
/* ekrana imza */
.imza-tuval { position: relative; border: 2px dashed var(--cizgi); border-radius: 10px; background: #fff; margin: 10px 0; }
.imza-tuval canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 260; touch-action: none; cursor: crosshair; }
.imza-ipucu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b7c2b9; font-size: 18px; pointer-events: none; }
#raporAlan { display: flex; flex-direction: column; gap: 16px; }
/* antetli sayfalar (Excel raporlarındaki Shafenerji üst/alt bandı) + hastane raporu genel sayfası (yatay) */
.a4.antetli { display: flex; flex-direction: column; }
.antet-ust { width: 100%; display: block; margin-bottom: 8px; }
.antet-alt { width: 100%; display: block; margin-top: auto; padding-top: 12px; }

.genel-baslik { font-size: 15px; margin: 0 0 10px; text-align: left; }
.genel-metin { font-size: 12.5px; margin: 0 0 14px; text-indent: 1.5em; line-height: 1.45; }
.rapor.genel td { vertical-align: middle; }
.etiket-bolum { margin-top: 14px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; }
.etiket-bolum summary { cursor: pointer; font-weight: 700; color: var(--ana); }
.rapor .turuncu-baslik { text-align: center; color: #e07b00; background: #fff; font-size: 13px; }
/* kutucuk ızgarası (hastane ve pano listeleri): kısa kutular, kenar rengi = durum */
.kutu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.kutu-kart { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 6px solid #b0bab2; border-radius: 10px; text-decoration: none; color: var(--yazi); }
.kutu-kart:hover { border-color: var(--ana); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kutu-kart b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kutu-kart span { font-size: 12.5px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kutu-kart em { font-style: normal; font-weight: 700; } .kutu-kart em.k { color: var(--kirmizi); } .kutu-kart em.s { color: var(--sari); } .kutu-kart em.m { color: var(--mavi); }
.kutu-kart .mavi-yazi { color: var(--mavi); }
.kutu-kart.yesil { border-left-color: #4c9a2a; } .kutu-kart.kirmizi { border-left-color: var(--kirmizi); }
.kutu-kart.mavi { border-left-color: var(--mavi); } .kutu-kart.gri { border-left-color: #b0bab2; }
.filtreler { display: flex; flex-wrap: wrap; gap: 6px; }
.filtreler button { border: 1px solid var(--cizgi); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.filtreler button em { font-style: normal; font-weight: 700; color: var(--soluk); margin-left: 4px; }
.filtreler button[aria-pressed="true"] { background: var(--ana); border-color: var(--ana); color: #fff; }
.filtreler button[aria-pressed="true"] em { color: #fff; }
@media screen and (max-width: 600px) { .kutu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .kutu-kart { padding: 7px 8px; } }

/* üst gezinme: geri / ileri + yol menüsü (Hastaneler › Hastane › Pano › Ekran) */
.ust-gezinti { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.gz-btn { flex: none; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(255,255,255,.08);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px; }
.gz-btn:hover { background: rgba(255,255,255,.2); }
.kirinti { display: flex; align-items: center; list-style: none; margin: 0 0 0 6px; padding: 0; min-width: 0; overflow: hidden; }
.kirinti li { display: flex; align-items: center; white-space: nowrap; min-width: 0; }
.kirinti li + li::before { content: "›"; margin: 0 8px; color: #9fc98a; font-size: 18px; }
.kirinti a { color: #cfe6c2; text-decoration: none; padding: 4px 6px; border-radius: 6px; font-size: 15px; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; }
.kirinti a:hover { background: rgba(255,255,255,.12); color: #fff; }
.kirinti li.son { flex: 1 1 auto; } .kirinti li.son h1 { overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 600px) {
  .gz-btn { width: 34px; height: 34px; font-size: 22px; }
  .kirinti li:not(:nth-last-child(-n+2)) { display: none; }   /* telefonda yolun son iki parçası */
  .kirinti a { max-width: 110px; font-size: 13px; padding: 4px 2px; }
  .kirinti li + li::before { margin: 0 4px; }
  .kirinti li:nth-last-child(2)::before { display: none; }  /* görünen ilk parçanın önünde ayraç olmasın */
  .kirinti li:only-child::before { display: none; }
}

/* sağ menü: geniş ekranda sabit sütun, dar ekranda (≤1000px) ☰ ile sağdan açılan çekmece */
.govde.menulu { display: flex; align-items: flex-start; }
.icerik { flex: 1; min-width: 0; }
.yan-menu { width: 290px; flex: none; position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto;
  background: #fff; border-left: 1px solid var(--cizgi); padding: 10px; display: flex; flex-direction: column; }
.menu-ac { display: none; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.menu-perde { display: none; }
.ym-bolum { padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.ym-bolum:last-child { border-bottom: 0; }
.ym-alt { margin-top: auto; }
.ym-baslik { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); margin: 4px 8px 6px; }
.ym-oge { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--yazi); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.ym-oge:hover { background: var(--ana-acik); }
.ym-oge.aktif { background: var(--ana); color: #fff; font-weight: 700; }
.ym-oge em { margin-left: auto; font-style: normal; font-size: 12px; opacity: .8; }
.ym-liste { max-height: 28vh; overflow-y: auto; }
.ym-liste.uzun { max-height: 42vh; }
.ym-ara { min-height: 40px; font-size: 15px; margin: 0 0 6px; }
.ym-nokta { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #b0bab2; }
.ym-nokta.yesil { background: #4c9a2a; } .ym-nokta.kirmizi { background: var(--kirmizi); } .ym-nokta.mavi { background: var(--mavi); }
@media screen and (max-width: 1000px) {
  .menu-ac { display: inline-flex; }
  .yan-menu { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 86vw); z-index: 30; transform: translateX(105%);
    transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
  .yan-menu.acik { transform: none; }
  .menu-perde.acik { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 29; }
}

/* telefon (Android): tek sütun, büyük dokunma alanları, A4 rapor önizlemesi yana kaydırılır (baskı/PDF etkilenmez) */
@media screen and (max-width: 600px) {
  :root { font-size: 16px; }
  main { padding: 10px; gap: 10px; }
  .ust { padding: 8px 10px; gap: 8px; }
  .ust h1 { font-size: 16px; }
  .ust .kisi { display: none; }
  .durum { font-size: 12px; padding: 5px 9px; }
  .kart { padding: 12px; border-radius: 12px; }
  .alanlar { grid-template-columns: 1fr; gap: 10px; }
  .secenek button { min-height: 48px; font-size: 14px; }
  .arac-satir .btn, .satir .btn { flex: 1 1 auto; }
  .alt-arac.yapiskan { padding: 8px 0; gap: 6px; }
  .alt-arac.yapiskan .ipucu { display: none; }
  .alt-arac.yapiskan .btn { flex: 1 1 0; padding: 0 8px; }
  .buyuk-tarih { gap: 16px; } .buyuk-tarih b { font-size: 20px; }
  .btn.genis { min-height: 56px; font-size: 17px; }
  .sekmeler { width: 100%; } .sekmeler button { flex: 1; padding: 0 6px; font-size: 14px; }
  #raporAlan { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  #raporAlan .a4 { width: 760px; max-width: none; }
  .tablo { font-size: 13px; display: block; overflow-x: auto; }
  .imza-ipucu { font-size: 15px; }
}
@media (max-width: 700px) {
  .iki-bolum, .izgara2, .izgara3 { grid-template-columns: 1fr; }
  .kunye { grid-template-columns: max-content 1fr; } .linyeler { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4; margin: 8mm; }
  /* alt bant sayfanın dibinde: sayfa yüksekliği kadar (kenar boşlukları düşülerek) */
  /* tüm sayfalar dikey A4 (karışık yatay/dikey basım tarayıcıda sayfaları kaydırıp kesiyor) */
  .a4 { width: 194mm; zoom: 1 !important; }
  .a4.antetli { min-height: 277mm; }
  .rapor.kucuk.genel { font-size: 8.5px; }
  .genel-baslik { font-size: 13px; margin-bottom: 6px; } .genel-metin { font-size: 10.5px; margin-bottom: 8px; }
  /* Excel'deki gibi pano raporu tek sayfaya sığsın: sıkı satırlar, küçük yazı, kısa antet */
  .rapor.kucuk { font-size: 9.5px; }
  .rapor.kucuk td, .rapor.kucuk th { padding: 2px 4px; line-height: 1.25; }
  .rapor.kucuk .ana-baslik { padding: 5px; font-size: 12px; }
  .antet-ust { max-height: 22mm; object-fit: contain; object-position: left top; margin-bottom: 4px; }
  .antet-alt { max-height: 22mm; object-fit: contain; padding-top: 6px; }
  .imza { margin-top: 8px; } .imza div { gap: 4px; }
  .imza .kase, .imza .imza-resim { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .antet-ust, .antet-alt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .ust, .hata-serit, .ekranda, .alt-arac, .yan-menu, .menu-perde, .menu-ac { display: none !important; }
  .govde.menulu { display: block; }
  main { padding: 0; max-width: none; }
  .a4 { border: 0; padding: 0; max-width: none; page-break-after: always; break-after: page; }
  .a4:last-child { page-break-after: auto; break-after: auto; }
  .rapor td, .rapor th, .oto-not { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}