/* Kiosk Merkez yonetim paneli */
:root {
  --zemin: #F4F5F6; --yuzey: #FFFFFF; --cizgi: #DDE1E5; --ince: #E9ECEF; --satir: #F0F2F4;
  --metin: #16191D; --ikincil: #4A5560; --soluk: #5F6B76; --kenar: #C9CFD5;
  --vurgu: #0B5D4E; --vurgu-koyu: #063F35; --vurgu-zemin: #EEF3F1;
  --iyi: #116149; --iyi-zemin: #E3F2EC; --uyari: #7A4E00; --uyari-zemin: #FBF0D9;
  --kotu: #A1241A; --kotu-zemin: #FBE7E4; --notr: #3F4A54; --notr-zemin: #ECEFF1; --bilgi: #1F4E79; --bilgi-zemin: #E4EEF7;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--zemin); color: var(--metin); font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
h1, h2, p, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.gizli-etiket { position: absolute; left: -9999px; }
.mono { font-family: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace; font-size: 12px; color: var(--ikincil); }
.soluk { color: var(--soluk); } .ikincil { color: var(--ikincil); } .kucuk { font-size: 12px; } .kalin { font-weight: 500; }
.kotu { color: var(--kotu); } .uyari { color: var(--uyari); } .iyi { color: var(--iyi); }
.sag { text-align: right; } .tek-satir { white-space: nowrap; }

/* cerceve */
.cerceve { display: flex; flex-wrap: wrap; min-height: 100vh; }
.yan { flex: 1 1 232px; background: var(--yuzey); border-right: 1px solid var(--cizgi); padding: 20px 12px; display: flex; flex-direction: column; gap: 24px; }
.marka { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marka-ad { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; display: block; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 4px; color: var(--notr); text-decoration: none; }
.menu a:hover { background: var(--zemin); }
.menu a.secili { color: var(--vurgu); background: var(--vurgu-zemin); font-weight: 600; }
.menu a span.ad { flex-grow: 1; }
.menu a span.sayi { font-size: 12px; color: var(--soluk); font-weight: 400; }
.kullanici { margin-top: auto; border-top: 1px solid var(--ince); padding: 14px 8px 0; display: flex; flex-direction: column; gap: 8px; }
.kullanici-ad { font-size: 13px; font-weight: 500; }
.kullanici-islem { display: flex; gap: 12px; font-size: 13px; }
.baglanti { background: none; border: 0; padding: 0; color: var(--vurgu); cursor: pointer; font-weight: 500; font-size: 13px; }
.baglanti:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.baglanti.kotu { color: var(--kotu); }
.ana { flex: 999 1 640px; min-width: 0; padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ust h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.ust .alt { font-size: 13px; color: var(--soluk); margin-top: 2px; }
.ust .alt > * + * { margin-left: 14px; }
.eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.konum { font-size: 13px; color: var(--soluk); display: flex; gap: 6px; }
.baslik-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* dugme, alan */
.dugme { height: 36px; padding: 0 14px; border-radius: 4px; background: var(--yuzey); border: 1px solid var(--kenar); color: var(--metin); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.dugme:hover { background: #F7F8F9; text-decoration: none; color: var(--metin); }
.dugme.ana-dugme { background: var(--vurgu); border-color: var(--vurgu); color: #FFFFFF; }
.dugme.ana-dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: #FFFFFF; }
.dugme.tehlike { color: var(--kotu); }
.dugme.kucuk-dugme { height: 32px; padding: 0 12px; }
.dugme:disabled { opacity: 0.55; cursor: default; }
.alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alan > span { font-size: 12px; color: var(--ikincil); font-weight: 500; }
.alan input, .alan select, .alan textarea, .girdi { height: 36px; padding: 0 10px; border: 1px solid var(--kenar); border-radius: 4px; background: var(--yuzey); font-size: 13px; width: 100%; }
.alan textarea { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.alan .ipucu { font-size: 12px; color: var(--soluk); font-weight: 400; }
.alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tam { grid-column: 1 / -1; }
.secenek { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--satir); cursor: pointer; }
.secenek:last-child { border-bottom: 0; }
.secenek input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--vurgu); flex-shrink: 0; }
.secenek .ad { font-size: 13px; font-weight: 500; display: block; }
.secenek .aciklama { font-size: 12px; color: var(--soluk); display: block; }
.arama { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 4px; color: var(--soluk); }
.arama input { border: 0; outline: 0; background: transparent; font-size: 13px; width: 190px; color: var(--metin); }

/* panel, tablo */
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; min-width: 0; }
.panel-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--ince); }
.panel-bas h2 { font-size: 15px; font-weight: 600; }
.panel-ic { padding: 14px 20px 16px; }
.panel-not { padding: 12px 20px; font-size: 13px; color: var(--ikincil); }
.bos { padding: 28px 20px; text-align: center; color: var(--soluk); font-size: 13px; }
.kaydir { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--soluk); font-size: 12px; font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--ince); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--satir); vertical-align: top; }
th:first-child, td:first-child { padding-left: 20px; } th:last-child, td:last-child { padding-right: 20px; }
tbody tr:last-child td { border-bottom: 0; }
thead.koyu th { background: #FAFBFB; }
tr.secili td { background: #F6F9F8; } tr.secili td:first-child { box-shadow: inset 2px 0 0 var(--vurgu); }
td .ad-bag { color: var(--metin); font-weight: 500; }
.rozet { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.rozet.iyi { color: var(--iyi); background: var(--iyi-zemin); } .rozet.uyari { color: var(--uyari); background: var(--uyari-zemin); }
.rozet.kotu { color: var(--kotu); background: var(--kotu-zemin); } .rozet.notr { color: var(--notr); background: var(--notr-zemin); } .rozet.bilgi { color: var(--bilgi); background: var(--bilgi-zemin); }
.nokta { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #B4BBC2; }
.nokta.iyi { background: #1F8A5B; } .nokta.kotu { background: #C0392B; } .nokta.uyari { background: #C27A00; }

/* genel bakis */
.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden; }
.ozet > div { background: var(--yuzey); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.ozet .etiket { font-size: 12px; color: var(--soluk); font-weight: 500; }
.ozet .deger { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.ozet .deger small { font-size: 15px; font-weight: 400; color: var(--soluk); }
.ozet .not { font-size: 12px; color: var(--ikincil); }
.iki { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.iki > .genis { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.iki > .dar { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.yigin { display: flex; height: 10px; border-radius: 2px; overflow: hidden; gap: 2px; }
.lejant > div { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--satir); font-size: 13px; }
.lejant > div:last-child { border-bottom: 0; }
.lejant .kare { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.lejant .ad { flex-grow: 1; }
.lejant .yuzde { width: 44px; text-align: right; font-weight: 500; }
.cubuk-satir { display: grid; grid-template-columns: 132px minmax(0, 1fr) 52px; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; }
.cubuk { height: 8px; background: #EEF0F2; border-radius: 2px; }
.cubuk > div { height: 8px; background: var(--vurgu); border-radius: 2px; }
.cubuk.acik > div { background: #7FB5A8; }
.buyuk-sayi { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* sekme */
.sekmeler { display: flex; flex-wrap: wrap; gap: 4px; }
.sekme { height: 46px; padding: 0 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ikincil); font-size: 13px; cursor: pointer; }
.sekme.secili { color: var(--metin); font-weight: 600; border-bottom-color: var(--vurgu); }
.sekme small { color: var(--soluk); font-weight: 400; font-size: 13px; }
.sekme.alcak { height: 34px; }
.arac-cubugu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--ince); }
.arac-cubugu .sag-grup { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }

/* tanim listesi */
.tanim { display: grid; grid-template-columns: 130px minmax(0, 1fr); font-size: 13px; padding: 6px 20px 10px; }
.tanim dt { padding: 8px 0; color: var(--soluk); border-bottom: 1px solid var(--satir); }
.tanim dd { padding: 8px 0; border-bottom: 1px solid var(--satir); }
.tanim dt:nth-last-child(2), .tanim dd:last-child { border-bottom: 0; }
.liste-satir { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--satir); font-size: 13px; }
.liste-satir:last-child { border-bottom: 0; }
.komut { display: flex; align-items: center; gap: 6px; }
.komut select { height: 32px; border: 1px solid var(--kenar); border-radius: 4px; background: var(--yuzey); font-size: 13px; padding: 0 4px; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 8px; border: 1px solid var(--kenar); border-radius: 4px; font-size: 13px; }
.cip button { border: 0; background: none; cursor: pointer; color: var(--soluk); padding: 0 4px; font-size: 14px; line-height: 1; }
.cip button:hover { color: var(--kotu); }
.eczane-secim { max-height: 180px; overflow-y: auto; border: 1px solid var(--ince); border-radius: 4px; padding: 4px 10px; }
.eczane-secim label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.eczane-secim input { accent-color: var(--vurgu); }
.form-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ince); }
.dikey { display: flex; flex-direction: column; gap: 14px; }

/* pencere */
dialog { border: 1px solid var(--cizgi); border-radius: 6px; padding: 0; width: min(560px, calc(100vw - 32px)); color: var(--metin); box-shadow: 0 12px 32px rgba(22, 25, 29, 0.18); }
dialog::backdrop { background: rgba(22, 25, 29, 0.38); }
dialog h2 { font-size: 16px; font-weight: 600; padding: 16px 20px; border-bottom: 1px solid var(--ince); }
dialog .govde { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; max-height: 68vh; overflow-y: auto; }
dialog .alt { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ince); }
.hata-kutu { background: var(--kotu-zemin); color: var(--kotu); border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.anahtar-kutu { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 13px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 4px; padding: 10px; word-break: break-all; user-select: all; }
.bildirim { position: fixed; right: 20px; bottom: 20px; background: var(--metin); color: #FFFFFF; padding: 10px 14px; border-radius: 4px; font-size: 13px; z-index: 50; max-width: 360px; }
.bildirim.hata { background: var(--kotu); }

/* giris */
.giris { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.giris form { width: min(360px, 100%); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.giris h1 { font-size: 18px; font-weight: 600; }
.giris .dugme { justify-content: center; height: 40px; }

@media (max-width: 720px) {
  .ana { padding: 20px 16px 32px; }
  .yan { border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .cubuk-satir { grid-template-columns: 104px minmax(0, 1fr) 44px; }
}