/* Klaustech: Google Fonts yerine sitenin yerel fontları */
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500 600; font-display: swap; src: url(../../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500 600; font-display: swap; src: url(../../assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 700; font-display: swap; src: url(../../assets/fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 700; font-display: swap; src: url(../../assets/fonts/ibm-plex-mono-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tiny5'; font-weight: 400 700; font-display: swap; src: url(../../assets/fonts/tiny5-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tiny5'; font-weight: 400 700; font-display: swap; src: url(../../assets/fonts/tiny5-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* style.css — 8 bit ofis görünümü */
:root {
  --siyah: #181425; --lacivert: #262b44; --gece: #3a4466; --gri: #8b9bb4; --acik: #c0cbdc; --beyaz: #ffffff;
  --kahve: #733e39; --tahta: #b86f50; --tahta2: #e4a672; --yesil: #3e8948; --yesil2: #63c74d;
  --kirmizi: #e43b44; --sari: #feae34; --sari2: #fee761; --mavi: #0099db; --cyan: #2ce8f5;
  --crt: #0b1d14; --crt-yazi: #63c74d; --kagit: #f4ecd8;
  --px: 4px; --metin2: #3a4466;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; } /* ana ekranda sayfa kaydırması yok */
body { background: var(--siyah); color: var(--beyaz); font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace; font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: .2px; image-rendering: pixelated; user-select: none; }
button, input { font-family: inherit; }
#oyun { position: absolute; left: 50%; top: 50%; width: 1280px; height: 800px; transform: translate(-50%, -50%) scale(var(--olcek, 1)); display: grid; grid-template-rows: 52px 1fr; gap: 12px; padding: 12px; box-sizing: border-box; } /* sabit tasarım boyutu, pencereye orantılı ölçeklenir */

/* ---------- Üst bar ---------- */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--lacivert); border: var(--px) solid var(--gece); } /* sahne ve panelle aynı dış kenar */
#tabela { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--beyaz); white-space: nowrap; }
#tabela::before { content: ''; width: 10px; height: 10px; background: var(--renk, var(--gri)); }
.sag { display: flex; gap: 8px; align-items: center; }
.ust-btn { height: 30px; padding: 0 12px; font: 600 13px 'IBM Plex Mono', monospace; color: var(--acik); background: transparent; border: 1px solid var(--gri); cursor: pointer; white-space: nowrap; }
.ust-btn:hover { color: var(--beyaz); border-color: var(--beyaz); }
.ust-btn.acik { color: var(--sari2); border-color: var(--sari2); }

/* ---------- Butonlar ---------- */
.btn, .sec { cursor: pointer; border: 3px solid var(--siyah); background: var(--acik); color: var(--siyah); padding: 6px 8px; font-size: 14px; box-shadow: inset -3px -3px 0 var(--gri), 2px 2px 0 var(--siyah); }
.btn:hover:not(:disabled), .sec:hover { background: var(--beyaz); }
.btn:active:not(:disabled), .sec:active { transform: translate(2px, 2px); box-shadow: inset 3px 3px 0 var(--gri); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.yesil { background: var(--yesil2); box-shadow: inset -3px -3px 0 var(--yesil), 2px 2px 0 var(--siyah); }
.btn.kirmizi { background: var(--kirmizi); color: var(--beyaz); box-shadow: inset -3px -3px 0 #a32834, 2px 2px 0 var(--siyah); }
.btn.buyuk { display: block; width: 100%; margin-top: 10px; padding: 10px; font-size: 15px; }
.btn.kucuk { font-size: 13px; padding: 5px 7px; }
.btn.acik { background: var(--sari2); }
.sec { font-size: 13px; padding: 5px 6px; background: var(--kagit); box-shadow: 2px 2px 0 var(--siyah); }
.sec.secili { background: var(--mavi); color: var(--beyaz); }

/* ---------- Sahne ---------- */
main { display: grid; grid-template-columns: 1fr 470px; gap: 12px; padding: 0; min-height: 0; }
#sahne { position: relative; display: grid; grid-template-rows: 250px 1fr; border: var(--px) solid var(--gece); overflow: hidden; min-height: 0; }
#duvar { position: relative; background: repeating-linear-gradient(90deg, #4a5578 0 28px, #445071 28px 32px); display: flex; justify-content: center; align-items: center; }
.supurgelik { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--kahve); border-top: var(--px) solid var(--siyah); }
.pencere { position: absolute; left: 16px; top: 36px; width: 64px; height: 84px; background: linear-gradient(#7ad0f5 0 60%, #a9e4ff 60%); border: var(--px) solid var(--siyah); box-shadow: inset 0 0 0 4px var(--beyaz); }
.pencere::after { content: ''; position: absolute; left: 26px; top: 0; width: 4px; height: 100%; background: var(--beyaz); }
.saksi { position: absolute; right: 26px; bottom: 12px; width: 28px; height: 24px; background: var(--tahta); border: var(--px) solid var(--siyah); }
.saksi::before { content: ''; position: absolute; left: 4px; top: -8px; width: 4px; height: 4px; background: var(--yesil2);
  box-shadow: 4px -4px var(--yesil2), 8px -8px var(--yesil), 12px -4px var(--yesil2), 0 -12px var(--yesil), -4px -16px var(--yesil2), 8px -16px var(--yesil2), 12px -20px var(--yesil), 4px -24px var(--yesil2), 16px -12px var(--yesil); }

/* Kokpit duvar ekranı */
#kokpit { width: 560px; height: 214px; background: var(--crt); border: 6px solid var(--siyah); box-shadow: 0 0 0 6px var(--gri), 0 0 0 10px var(--siyah), 0 0 24px rgba(99,199,77,.35); color: var(--crt-yazi); padding: 6px 8px; cursor: pointer; position: relative; overflow: hidden; font-size: 12px; }
#kokpit:hover, #kokpit.aktif { box-shadow: 0 0 0 6px var(--sari2), 0 0 0 10px var(--siyah), 0 0 24px rgba(254,231,97,.4); }
.kokpit-baslik { color: var(--sari2); border-bottom: 2px solid var(--yesil); padding-bottom: 4px; margin-bottom: 5px; }
#kokpitIc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
#kokpitIc > div { min-width: 0; }
.kb { color: var(--beyaz); font-size: 13px; margin-bottom: 3px; }
.kd { margin-bottom: 3px; }
.kirmizi { color: var(--kirmizi); }
.iz { display: grid; gap: 3px; margin: 5px 0; }
.iz > div { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--acik); white-space: nowrap; }
.iz span { border: 2px solid var(--yesil); padding: 1px 4px; color: var(--yesil); min-width: 26px; text-align: center; }
.iz .gecti { color: var(--yesil2); } .iz .gecti span { background: var(--yesil); color: var(--crt); }
.iz .simdi { color: var(--sari2); } .iz .simdi span { background: var(--sari2); color: var(--siyah); border-color: var(--sari2); animation: yanip 0.8s steps(2) infinite; }
.kd.akis { color: var(--cyan); font-size: 11px; line-height: 1.3; }
.kol2 .dgrid { margin-bottom: 6px; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.dh { border: 2px solid currentColor; padding: 2px 3px; font-size: 11px; }
.dh span { display: block; color: var(--acik); }

.dh.tm { color: var(--yesil2); } .dh.bek { color: var(--sari); } .dh.duz { color: var(--kirmizi); animation: yanip 0.6s steps(2) infinite; } .dh.kon { color: var(--cyan); }
.log .lg { display: grid; grid-template-columns: auto 14px 1fr; gap: 6px; align-items: start; padding: 3px 0; border-bottom: 1px dashed rgba(99,199,77,.25); line-height: 1.3; }
.log .lg i { color: var(--acik); font-style: normal; font-variant-numeric: tabular-nums; }
.log .lg b { text-align: center; }
.log .lg span { color: var(--beyaz); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg.onay b, .lg.tamam b { color: var(--yesil2); } .lg.ret b, .lg.duzeltme b { color: var(--kirmizi); }
.lg.statu b { color: var(--sari2); } .lg.talep b { color: var(--cyan); } .lg.gorev b { color: var(--sari); }
.bos { color: var(--gri); padding: 8px 0; }

/* Zemin ve masalar */
#zemin { background-color: #5a6988; background-image: repeating-conic-gradient(#56658a 0 25%, #5f6f93 0 50%), linear-gradient(#4c5a7a 2px, transparent 2px), linear-gradient(90deg, #4c5a7a 2px, transparent 2px); background-size: 16px 16px, 64px 64px, 64px 64px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; padding: 22px 12px 8px; gap: 4px 8px; min-height: 0; }
.masa { position: relative; align-self: center; height: 104px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform .1s steps(2); }
.masa:hover { transform: translateY(-3px); }
.masa:active { transform: translateY(1px); }
.monitor { width: 44px; height: 30px; background: var(--gece); border: 3px solid var(--siyah); position: relative; z-index: 2; margin-bottom: -2px; }
.monitor i { position: absolute; inset: 3px; background: var(--renk); opacity: .85; }
.masa.dolu .monitor i { animation: yanip .7s steps(2) infinite; }
.monitor::after { content: ''; position: absolute; left: 14px; bottom: -9px; width: 10px; height: 6px; background: var(--siyah); }
.inbox { position: absolute; bottom: 38px; right: calc(50% - 64px); width: 24px; height: 12px; background: var(--acik); border: 3px solid var(--siyah); z-index: 2; }
.inbox b { position: absolute; left: 1px; top: -7px; width: 16px; height: 6px; background: var(--beyaz); border: 2px solid var(--siyah); display: none; }
.masa.dolu .inbox b { display: block; }
.masa-ust { position: relative; z-index: 2; width: 140px; height: 22px; background: var(--tahta); border: var(--px) solid var(--siyah); box-shadow: inset 0 -6px 0 var(--kahve), inset 0 4px 0 var(--tahta2); }
.ayak { width: 120px; height: 10px; border-left: 8px solid var(--siyah); border-right: 8px solid var(--siyah); }
.etiket { margin-top: 4px; background: var(--siyah); color: var(--beyaz); padding: 3px 6px; font-size: 12px; border-bottom: 3px solid var(--renk); white-space: nowrap; }
.masa.aktif .etiket { color: var(--sari2); border-bottom-color: var(--sari2); }
.masa.aktif .masa-ust { box-shadow: inset 0 -6px 0 var(--kahve), inset 0 4px 0 var(--tahta2), 0 0 0 4px var(--sari2); }
.ok { position: absolute; top: -14px; color: var(--sari2); font-size: 22px; text-shadow: 2px 2px 0 var(--siyah); display: none; animation: zipla .5s steps(2) infinite; }
.masa.aktif > .ok { display: block; }
.rozet { position: absolute; top: 2px; right: calc(50% - 42px); min-width: 20px; height: 20px; line-height: 14px; text-align: center; background: var(--kirmizi); color: var(--beyaz); border: 3px solid var(--siyah); font-size: 13px; display: none; z-index: 3; animation: yanip .6s steps(2) infinite; }
.masa.dolu .rozet { display: block; }
@keyframes yanip { 50% { opacity: .35; } }
@keyframes zipla { 50% { transform: translateY(-4px); } }

/* ---------- Masa ekranı paneli ---------- */
#panel { display: flex; flex-direction: column; min-height: 0; }
.ekran { flex: 1; min-height: 0; background: var(--gece); border: var(--px) solid var(--gece); box-shadow: inset 0 0 0 4px var(--lacivert); padding: 4px; overflow: hidden; }
/* çerçeve sabit; yalnızca iç alan kayar, kartlar halkanın altına taşmaz */
#panelIc { height: 100%; box-sizing: border-box; overflow-y: auto; padding: 6px 10px 10px 6px; }
#panelIc > :last-child { margin-bottom: 0; }
#panelIc h2 { margin: 0 0 10px; font-size: 18px; color: var(--sari2); text-shadow: 2px 2px 0 var(--siyah); }
.evrak { background: var(--kagit); color: var(--siyah); border: 3px solid var(--siyah); box-shadow: 4px 4px 0 var(--siyah); padding: 10px; margin-bottom: 10px; }
#panelIc.gel { animation: evrakGel .25s steps(3); }
.evrak .kb { color: var(--siyah); }
.evrak p { margin: 6px 0; font-size: 13px; line-height: 1.8; }
@keyframes evrakGel { from { transform: translateY(-10px); opacity: 0; } }
label { display: block; margin: 10px 0 5px; font-size: 13px; color: var(--kahve); }
label small { color: var(--mavi); font-size: 12px; }
.secler { display: flex; flex-wrap: wrap; gap: 5px; }
input { width: 100%; margin-top: 6px; padding: 6px; font-size: 14px; border: 3px solid var(--siyah); background: var(--beyaz); color: var(--siyah); outline: none; }
input:focus { border-color: var(--mavi); }
.ipucu { margin-top: 8px; font-size: 12px; color: var(--gece); }
.not { background: var(--kirmizi); color: var(--beyaz); padding: 5px; font-size: 13px; margin: 6px 0; border: 2px solid var(--siyah); }
.kart { padding: 8px; margin-bottom: 8px; border: 3px solid var(--siyah); background: #ffd5d7; color: var(--siyah); font-size: 13px; }
.kart p { margin: 4px 0; }
.inbox-liste { background: var(--lacivert); border: 3px solid var(--siyah); margin-bottom: 10px; }
.ib-baslik { background: var(--mavi); padding: 4px 6px; font-size: 13px; }
.ib-satir { padding: 6px; font-size: 13px; cursor: pointer; border-top: 2px solid var(--siyah); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-satir:hover { background: var(--gece); }
.ib-satir.secili { background: var(--sari2); color: var(--siyah); }
.ib-satir.duzeltme { color: var(--kirmizi); }
.ib-satir.duzeltme.secili { color: var(--kirmizi); }
.inbox-liste .bos { padding: 6px; }
.kontrol { border: 2px solid var(--siyah); padding: 6px; margin-top: 6px; background: var(--beyaz); }
.kontrol.uygun { background: #d4f5cc; } .kontrol.duzeltme { background: #ffd5d7; }
.ks { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ks .btn { font-size: 12px; padding: 4px 5px; }
.oz { font-size: 11px; color: var(--gece); margin-top: 4px; line-height: 1.7; }
.duz-form { margin-top: 6px; border-top: 2px dashed var(--siyah); padding-top: 6px; }
.duz-form .btn { margin-top: 6px; }
.etk.duz { color: var(--kirmizi); font-size: 12px; animation: yanip .6s steps(2) infinite; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
td { border: 2px solid var(--siyah); padding: 3px; }
.log.tam { background: #ece2c9; padding: 4px 10px; border: 1px solid #d6c7a1; }
.log.tam .lg { font-size: 13px; padding: 6px 0; border-bottom: 1px solid #ddd0ae; }
.log.tam .lg i { color: #8a6d4f; }
.log.tam .lg span { color: #262b44; }
.log.tam .lg.onay b, .log.tam .lg.tamam b { color: #3e8948; } .log.tam .lg.ret b, .log.tam .lg.duzeltme b { color: #c0303a; }
.log.tam .lg.statu b { color: #b0700c; } .log.tam .lg.talep b { color: #1f7fa8; } .log.tam .lg.gorev b { color: #8a5a1a; }
.log.tam .lg span { -webkit-line-clamp: unset; display: block; }

/* ---------- Animasyon katmanları ---------- */
.evrak-ucan { position: fixed; z-index: 50; width: 16px; height: 20px; background: var(--beyaz); border: 2px solid var(--siyah); box-shadow: inset 0 4px 0 var(--sari2), 2px 2px 0 var(--siyah); transition: transform calc(.7s / var(--hiz, 1)) cubic-bezier(.3,-.3,.6,1.2); pointer-events: none; }
#kapi { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
#kapi.oyna { display: block; }
.kanat { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(0deg, var(--gece) 0 20px, var(--lacivert) 20px 24px); border: 6px solid var(--siyah); }
.kanat.sol { left: 0; animation: solAc calc(2.2s / var(--hiz, 1)) steps(12) forwards; }
.kanat.sag { right: 0; animation: sagAc calc(2.2s / var(--hiz, 1)) steps(12) forwards; }
@keyframes solAc { 0% { transform: translateX(-100%); } 25%, 55% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes sagAc { 0% { transform: translateX(100%); } 25%, 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
.kapi-yazi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 52px; color: var(--sari2); text-shadow: 4px 4px 0 var(--siyah); background: var(--kirmizi); padding: 20px 30px; border: 6px solid var(--siyah); animation: kapiYazi calc(2.2s / var(--hiz, 1)) steps(10) forwards; }
@keyframes kapiYazi { 0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30%, 60% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
#kutlama { position: fixed; inset: 0; z-index: 70; background: rgba(24,20,37,.85); display: none; align-items: center; justify-content: center; }
#kutlama.acik { display: flex; }
#kutlamaIc { background: var(--kagit); color: var(--siyah); border: 6px solid var(--siyah); box-shadow: 0 0 0 6px var(--sari2), 10px 10px 0 6px var(--siyah); padding: 30px 40px; text-align: center; width: 560px; position: relative; }
#kutlamaIc h1 { font-size: 24px; color: var(--yesil); margin: 18px 0; }
#kutlamaIc .btn { display: inline-block; width: auto; margin: 10px 4px 0; }
.damga { display: inline-block; color: var(--kirmizi); border: 6px solid var(--kirmizi); padding: 10px 16px; font-size: 26px; transform: rotate(-8deg); animation: damga .5s steps(5); }
@keyframes damga { 0% { transform: rotate(-8deg) scale(4); opacity: 0; } 80% { transform: rotate(-8deg) scale(.9); opacity: 1; } }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; background: var(--sari2); color: var(--siyah); border: 4px solid var(--siyah); padding: 8px 14px; display: none; }
#toast.acik { display: block; }

/* ---------- Masa başı karakterler ---------- */
.kisi { position: absolute; bottom: 40px; left: calc(50% - 62px); width: 24px; height: 36px; z-index: 1; }
.kisi .ic { position: absolute; inset: 0; transform: scale(1.45); transform-origin: 50% 100%; }
.kisi .bas { position: absolute; left: 3px; top: 2px; width: 18px; height: 16px; background: var(--ten); border: 2px solid var(--siyah); z-index: 1; }
.kisi .bas::before { content: ''; position: absolute; left: -2px; top: -5px; width: 18px; height: 6px; background: var(--sac); border: 2px solid var(--siyah); border-bottom: 0; }
.kisi .bas::after { content: ''; position: absolute; left: 3px; top: 5px; width: 2px; height: 2px; background: var(--siyah); box-shadow: 6px 0 var(--siyah); }
.kisi .agiz { position: absolute; left: 5px; top: 10px; width: 4px; height: 2px; background: var(--siyah); }
.kisi .govde { position: absolute; left: 1px; top: 18px; width: 22px; height: 18px; background: var(--gomlek); border: 2px solid var(--siyah); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.kisi.kel .bas::before { height: 2px; top: 4px; left: -4px; width: 20px; background: transparent; border: 0; box-shadow: 0 0 0 0 transparent, -0px 0 var(--sac); border-left: 3px solid var(--sac); border-right: 3px solid var(--sac); }
.kisi.uzun .bas::before { height: 16px; border-bottom: 0; background: linear-gradient(90deg, var(--sac) 0 3px, transparent 3px calc(100% - 3px), var(--sac) calc(100% - 3px)), linear-gradient(var(--sac) 0 5px, transparent 5px); }
.kisi.baret .bas::before { background: var(--sari2); height: 7px; top: -7px; left: -4px; width: 22px; }
.kisi.sapka .bas::before { background: var(--kahve); height: 5px; top: -6px; left: -5px; width: 24px; }
.kisi.gozluk .bas::after { width: 4px; height: 3px; left: 2px; top: 4px; background: transparent; border: 1px solid var(--siyah); box-shadow: 6px 0 0 -1px var(--siyah); }
.kisi .balon { display: none; position: absolute; left: 24px; top: -38px; background: var(--beyaz); color: var(--kirmizi); border: 2px solid var(--siyah); font-size: 13px; padding: 2px 3px; line-height: 1; white-space: nowrap; }
.kisi.mutlu .balon, .kisi.uzgun .balon { display: block; }
.kisi.uzgun .balon { color: var(--mavi); }
.kisi.mutlu { animation: sevinc .3s steps(2) 6; }
.kisi.mutlu .agiz { width: 6px; left: 4px; height: 2px; top: 11px; background: var(--siyah); box-shadow: -2px -2px var(--siyah), 6px -2px var(--siyah); }
.kisi.uzgun { animation: uzgun 3s steps(4) forwards; }
.kisi.uzgun .agiz { width: 6px; left: 4px; top: 11px; box-shadow: -1px 2px var(--siyah), 5px 2px var(--siyah); }
.kisi.uzgun .bas { box-shadow: 4px 8px 0 -6px var(--mavi); }
.kisi.uzgun .bas::after { box-shadow: 6px 0 var(--siyah), 0 4px var(--mavi), 0 7px var(--mavi); animation: yanip .5s steps(2) infinite; }
@keyframes sevinc { 50% { transform: translateY(-8px); } }
@keyframes uzgun { 10%, 90% { transform: translateY(4px); filter: saturate(.3) brightness(.85); } }

/* ---------- Ofis dekoru ---------- */
.dolap { position: absolute; left: 20px; bottom: 12px; width: 52px; height: 70px; background: var(--gri); border: var(--px) solid var(--siyah); box-shadow: inset -4px 0 0 #6b7a96; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }
.dolap i { width: 40px; height: 16px; border: 2px solid var(--siyah); background: var(--acik); position: relative; }
.dolap i::after { content: ''; position: absolute; left: 14px; top: 5px; width: 8px; height: 3px; background: var(--siyah); }
.yazici { position: absolute; left: 18px; bottom: 86px; width: 56px; height: 22px; background: var(--acik); border: var(--px) solid var(--siyah); box-shadow: inset 0 -6px 0 var(--gri); }
.yazici::before { content: ''; position: absolute; left: 10px; top: -12px; width: 28px; height: 10px; background: var(--beyaz); border: 2px solid var(--siyah); border-bottom: 0; }
.yazici::after { content: ''; position: absolute; right: 5px; top: 4px; width: 4px; height: 4px; background: var(--yesil2); animation: yanip 1s steps(2) infinite; }
.pencere { top: 18px !important; height: 70px !important; }
.saat { position: absolute; right: 34px; top: 16px; width: 34px; height: 34px; background: var(--beyaz); border: var(--px) solid var(--siyah); border-radius: 50%; }
.saat::before { content: ''; position: absolute; left: 13px; top: 4px; width: 3px; height: 11px; background: var(--siyah); transform-origin: 50% 100%; animation: akrep 60s steps(60) infinite; }
.saat::after { content: ''; position: absolute; left: 13px; top: 12px; width: 9px; height: 3px; background: var(--kirmizi); }
@keyframes akrep { to { transform: rotate(360deg); } }
.pano { position: absolute; right: 14px; top: 64px; width: 74px; height: 58px; background: #c28569; border: var(--px) solid var(--kahve); box-shadow: 0 0 0 2px var(--siyah); display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; }
.pano i { background: var(--sari2); border: 1px solid var(--siyah); position: relative; }
.pano i:nth-child(2) { background: var(--cyan); } .pano i:nth-child(3) { background: var(--beyaz); } .pano i:nth-child(4) { background: #ff9da3; }
.pano i::before { content: ''; position: absolute; left: 45%; top: -2px; width: 4px; height: 4px; background: var(--kirmizi); }
.lamba { position: absolute; top: 0; width: 70px; height: 6px; background: var(--sari2); box-shadow: 0 0 14px 4px rgba(254,231,97,.35); border: 2px solid var(--siyah); border-top: 0; }
.lamba.sol { left: 25%; } .lamba.sag { right: 25%; }
/* Ofis sandalyesi (karakter oturur) */
.sandalye { position: absolute; bottom: 40px; left: calc(50% - 75px); width: 48px; height: 48px; z-index: 0; background: var(--gece); border: var(--px) solid var(--siyah); border-radius: 8px 8px 0 0; box-shadow: inset 0 6px 0 #6b7a96, inset -4px 0 0 var(--lacivert), inset 4px 0 0 #6b7a96; }
.sandalye::before { content: ''; position: absolute; left: -10px; bottom: 6px; width: 50px; height: 6px; background: var(--siyah); }

/* Piksel font yalnızca büyük başlık ve tabelalarda */
#panelIc h2, .kapi-yazi, #kutlamaIc h1, .damga { font-family: 'Tiny5', 'IBM Plex Mono', monospace; font-weight: 700; letter-spacing: 1px; }
.btn, .sec, label, .etiket, .kb { font-weight: 600; }
#kokpit { font-size: 12px; }
.dh { font-size: 11px; }
.oz { color: #262b44; font-size: 12px; }

/* Demo duraklatılınca tüm CSS animasyonları da durur */
body.duraklat *, body.duraklat *::before, body.duraklat *::after { animation-play-state: paused !important; }
.demo-ipucu { background: var(--sari2); color: var(--siyah); border: 3px solid var(--siyah); padding: 6px 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.duraklat #panelIc, body.duraklat #panelIc * { animation-play-state: running !important; } /* panel duraklatmada da açılır */
#kokpit .kb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* uzun malzeme adı tek satırda kalır */
#panelIc .kb, #panelIc .kd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sahneler: 1 = Talep ofisi (paravanla ayrılmış iki masa), 2 = Ana Veri ofisi (6 departman + altta Nihai Karar Verici) */
#zemin.gel { animation: sahneGel .35s steps(4); }
@keyframes sahneGel { from { opacity: 0; } }
#zemin .masa { display: none; }
#zemin.s1 [data-masa="arge"], #zemin.s1 [data-masa="sorumlu"] { display: flex; grid-row: 2; }
#zemin.s1 [data-masa="arge"] { grid-column: 1; } #zemin.s1 [data-masa="sorumlu"] { grid-column: 3; }
#zemin.s2 .masa { display: flex; } #zemin.s2 [data-masa="arge"], #zemin.s2 [data-masa="sorumlu"] { display: none; }
#zemin.s2 [data-masa="ust"] { grid-column: 2; grid-row: 3; }
#zemin.s2 [data-masa="ust"]::before, #zemin.s1 [data-masa="sorumlu"]::before { content: ''; position: absolute; left: -40px; right: -40px; bottom: -6px; height: 70px; background: repeating-linear-gradient(90deg, #a22633 0 8px, #b02a37 8px 16px); border: var(--px) solid var(--siyah); box-shadow: inset 0 0 0 4px var(--sari); z-index: 0; }
#zemin.s2 [data-masa="ust"] > *, #zemin.s1 [data-masa="sorumlu"] > * { z-index: 1; }
#zemin.s2::after { content: ''; grid-column: 1 / 4; grid-row: 3; align-self: start; justify-self: center; width: 70%; height: 2px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--siyah) 0 6px, transparent 6px 12px); opacity: .6; }
#zemin { position: relative; }
.paravan { display: none; grid-column: 2; grid-row: 1 / 4; justify-self: center; align-self: stretch; width: 34px; margin: -10px 0 4px; background: #8b9bb4; border: var(--px) solid var(--siyah); box-shadow: inset 4px 0 0 #c0cbdc, inset -4px 0 0 #5a6988; position: relative; }
.paravan i { display: block; height: 3px; margin: 30px 6px 0; background: #5a6988; }
.paravan::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -8px; height: 8px; background: var(--siyah); }
#zemin.s1 .paravan { display: block; }
.kapi-yazi small { display: block; font-size: 20px; margin-top: 6px; text-align: center; color: var(--beyaz); }
#sahneBtn.dolu { color: var(--sari2); border-color: var(--sari2); animation: yanip .7s steps(2) infinite; }
.ks { flex-wrap: wrap; gap: 4px; }
.qa-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .qa-btn .btn { padding: 8px 4px; }
/* Masa vurguları: sarı = seçili, yeşil = ana veri tamam, kırmızı = Nihai Karar Verici reddi */
.masa.yesil:not(.aktif) .masa-ust { box-shadow: inset 0 -6px 0 var(--kahve), inset 0 4px 0 var(--tahta2), 0 0 0 4px var(--yesil2); }
.masa.yesil:not(.aktif) .etiket { border-bottom-color: var(--yesil2); }
.masa.kirmizi:not(.aktif) .masa-ust { box-shadow: inset 0 -6px 0 var(--kahve), inset 0 4px 0 var(--tahta2), 0 0 0 4px var(--kirmizi); }
.masa.kirmizi:not(.aktif) .etiket { border-bottom-color: var(--kirmizi); }
#kokpit .kd.tek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* talep durumu + ret tek satır: statü listesi tahtada kalır */
.giris h3 { margin: 10px 0 4px; font-size: 13px; padding: 2px 6px; background: var(--siyah); color: var(--beyaz); }
.giris h3.simdi { background: var(--sari2); color: var(--siyah); }
.giris ol, .giris ul { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.55; }
.giris li { margin: 2px 0; }
.giris p { font-size: 12px; line-height: 1.6; }
.hiz-kutu { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.hiz-kutu input { width: 90px; accent-color: var(--sari2); cursor: pointer; }
.hiz-kutu b { width: auto; flex: none; text-align: left; font-weight: 600; } /* kutu içeriğe göre ölçeklenir: sağda fazladan boşluk kalmaz */
#zemin.s1 [data-masa="sorumlu"]::before { left: 12px; right: 12px; } /* Ana Veri Sorumlusu halısı sahne kenarına taşmaz */
.hiz-kutu { box-sizing: border-box; height: 30px; margin: 0; vertical-align: middle; } .hiz-kutu input { height: 14px; margin: 0; } /* düğmelerle aynı yükseklik ve eksen */
/* Hız slider'ı: özel ray + piksel tutamaç; 2x'te tutamaç rayın tam sonuna oturur (tarayıcıdan bağımsız) */
.hiz-kutu input[type=range] { -webkit-appearance: none; appearance: none; width: 90px; height: 8px; margin: 0; padding: 0; border: 2px solid var(--siyah); box-sizing: border-box; background: linear-gradient(90deg, var(--sari2) var(--dolu, 43%), var(--gri) var(--dolu, 43%)); }
.hiz-kutu input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; background: var(--sari2); border: 2px solid var(--siyah); box-sizing: border-box; cursor: pointer; }
.hiz-kutu input[type=range]::-moz-range-thumb { width: 10px; height: 16px; background: var(--sari2); border: 2px solid var(--siyah); border-radius: 0; box-sizing: border-box; cursor: pointer; }
.hiz-kutu input[type=range]::-moz-range-track { background: transparent; }
.kapi-yazi { text-align: center; }
/* Üst bar: tüm kontroller tek ölçü (aynı genişlik, yükseklik, yazı boyutu ve iç boşluk) */
.ust-btn { box-sizing: border-box; width: 136px; height: 30px; padding: 0 8px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.hiz-kutu { gap: 6px; justify-content: space-between; }
.hiz-kutu input[type=range] { width: auto; flex: 1; min-width: 0; }
.hiz-kutu b { width: 5ch; text-align: center; }
/* Simge düğmeleri: hepsi aynı ölçü (44x30); hız kutusu iki düğme + aralık genişliğinde */
.ust-btn { width: 44px; padding: 0; }
.ust-btn .pik { width: 20px; height: 20px; fill: currentColor; shape-rendering: crispEdges; display: block; }
.hiz-kutu { width: 96px; padding: 0 8px; }
#kokpitIc .tam-sutun { grid-column: 1 / -1; line-height: 1.6; }