:root {
  --bg: #efe6d8; --kart: #fbf7f0; --kart2: #ffffff; --cizgi: rgba(60, 45, 25, .12); --cizgi2: rgba(60, 45, 25, .22);
  --yazi: #2d261d; --ikincil: #6d6254; --soluk: #9b8f80; --vurgu: #e2704a; --iyi: #3b7d23; --kotu: #c0392b; --uyari: #b7791f;
  --golge: 0 6px 24px rgba(70, 50, 20, .10);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--yazi); }
#sahne { position: fixed; inset: 0; }
#sahne canvas { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

.ust { position: fixed; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: rgba(251, 247, 240, .88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--cizgi); z-index: 5; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.logo-k { width: 26px; height: 26px; border-radius: 8px; background: var(--vurgu); position: relative; }
.logo-k::after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 4px; border-radius: 2px; background: #fff; }
.ust-sag { display: flex; align-items: center; gap: 12px; }
.hap { font-size: 13px; padding: 5px 12px; border-radius: 99px; background: #f0e9dd; border: 1px solid var(--cizgi); }
.hap.iyi { background: #e7f1df; color: var(--iyi); }
.hap.kotu { background: #f8e1de; color: var(--kotu); }
.saat { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.dugme { background: var(--kart2); border: 1px solid var(--cizgi2); border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.dugme:hover { background: #f4eee4; }
.dugme.ana { background: var(--yazi); color: #fff; border-color: var(--yazi); }

.sol, .sag { position: fixed; top: 72px; z-index: 4; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.sol { left: 18px; width: 300px; }
.sag { right: 18px; width: 340px; bottom: 18px; }
.kart { pointer-events: auto; background: rgba(251, 247, 240, .95); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px; box-shadow: var(--golge); }
.kart h1 { font-size: 24px; font-weight: 600; margin: 2px 0 6px; }
.kart-bas { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.kucuk { font-size: 12px; color: var(--soluk); font-weight: 400; }
.ikincil { color: var(--ikincil); font-size: 13.5px; line-height: 1.55; margin: 0; }
.etiketler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.etiket { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: #f0e9dd; color: var(--ikincil); }
.etiket.up { background: #e4efdc; color: var(--iyi); }
.etiket.down { background: #f6e0dc; color: var(--kotu); }
.canli { font-size: 12px; color: var(--vurgu); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.canli i { width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); animation: nabiz 1.6s infinite; }
@keyframes nabiz { 50% { opacity: .25; } }

.akis-kart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#akis { overflow-y: auto; flex: 1; margin: 0 -6px; padding: 0 6px; }
.satir { display: flex; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--cizgi); cursor: pointer; border-radius: 6px; }
.satir:hover { background: #f4eee4; }
.satir:first-child { border-top: 0; }
.nokta { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.satir-ana { min-width: 0; }
.satir-ust { font-size: 13.5px; line-height: 1.4; }
.satir-ust b { font-weight: 600; }
.satir-alt { font-size: 12px; color: var(--soluk); margin-top: 2px; }
.yeni-satir { animation: yeni 2.5s ease-out; }
@keyframes yeni { from { background: #fde3d6; } to { background: transparent; } }

.olay { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--cizgi); }
.olay:first-child { border-top: 0; }
.olay .ne { color: var(--yazi); }
.olay .ne small { color: var(--soluk); margin-left: 4px; }
.olay.gecti { opacity: .5; }
.olay .ne.yuksek::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--kotu); margin-right: 6px; vertical-align: 1px; }

.panel { position: fixed; z-index: 6; top: 72px; right: 18px; width: 420px; max-height: calc(100% - 90px); overflow-y: auto;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 10px 40px rgba(70, 50, 20, .18); padding: 16px 18px; }
.panel h2 { margin: 2px 0; font-size: 20px; font-weight: 600; }
.panel-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.kapat { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--soluk); padding: 2px 6px; }
.kapat:hover { color: var(--yazi); }
.gizli { display: none !important; }
.mesaj { border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart2); margin-top: 10px; overflow: hidden; }
.mesaj img { display: block; width: 100%; cursor: zoom-in; background: #f4eee4; min-height: 60px; }
.mesaj pre { margin: 0; padding: 10px 12px; white-space: pre-wrap; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--yazi); }
.mesaj .zaman { padding: 0 12px 10px; font-size: 12px; color: var(--soluk); }
.bos { color: var(--soluk); font-size: 13.5px; padding: 10px 0; }

.tablo { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.tablo td, .tablo th { padding: 6px 4px; border-top: 1px solid var(--cizgi); text-align: left; }
.tablo th { color: var(--soluk); font-weight: 500; font-size: 12px; border-top: 0; }
.tablo td.sag, .tablo th.sag { text-align: right; }
.art { color: var(--iyi); } .eks { color: var(--kotu); }
.metrik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.metrik div { background: #f4eee4; border-radius: 8px; padding: 8px 10px; }
.metrik small { display: block; color: var(--soluk); font-size: 11.5px; }
.metrik b { font-size: 16px; font-weight: 600; }
.alt-baslik { font-weight: 600; font-size: 13.5px; margin: 14px 0 2px; }

.modal { position: fixed; inset: 0; z-index: 10; background: rgba(40, 30, 15, .45); display: flex; align-items: center; justify-content: center; }
.modal-kutu { position: relative; background: var(--kart); border-radius: 14px; padding: 18px; max-width: min(1100px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-kutu img { max-width: 100%; display: block; border-radius: 8px; }
.modal-kutu .kapat { position: absolute; right: 8px; top: 6px; }
.kilit-form { width: 320px; }
.kilit-form h2 { margin: 0 0 6px; font-size: 19px; }
.kilit-form input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--cizgi2); font: inherit; margin: 10px 0 6px; background: #fff; }
.kilit-form .hata { color: var(--kotu); font-size: 13px; min-height: 18px; }


/* labels in the scene (CSS2DRenderer) */
.masa-et { pointer-events: auto; cursor: pointer; background: rgba(255, 255, 255, .94); border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 4px 8px; font-size: 11.5px; position: relative; line-height: 1.3; white-space: nowrap; box-shadow: 0 2px 8px rgba(70, 50, 20, .10); transform: translateY(-4px); }
.masa-et b { font-weight: 600; display: block; color: var(--yazi); }
.masa-et span { color: var(--soluk); }
.masa-et.aktif span { color: var(--vurgu); }
.masa-et.uyari { border-color: var(--kotu); }
.masa-et.uyari span { color: var(--kotu); }
.masa-et.iyi span { color: var(--iyi); }
.masa-et.uyku { background: rgba(255, 255, 255, .7); padding: 2px 7px; box-shadow: none; }
.masa-et.uyku b { color: var(--ikincil); font-weight: 500; font-size: 11.5px; }
.masa-et.uyku span { display: none; }
.masa-et.uyku:hover span { display: block; }
.masa-et:hover { border-color: var(--cizgi2); opacity: 1; }
.zzz { position: absolute; right: -12px; top: -12px; font-size: 12px; color: var(--soluk); animation: z 2.4s infinite; font-weight: 600; }
@keyframes z { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
.oda-et { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgba(45, 38, 29, .55); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.oda-et small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(45, 38, 29, .5); font-size: 11.5px; text-align: center; }
.kilit-et { pointer-events: auto; cursor: pointer; background: #fff; border: 1px solid #e7b9a6; color: #993c1d; border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(70, 50, 20, .12); }
.kilit-et:hover { background: #fdf0ea; }

@media (max-width: 1200px) { .sol { width: 260px; } .sag { width: 300px; } }
@media (max-width: 900px) { .sol { display: none; } }

.gezinti { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(100% - 740px); }
.odalar { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; align-items: center; background: rgba(251, 247, 240, .95); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 5px; box-shadow: var(--golge); }
.oda-cip { border: 0; background: transparent; border-radius: 9px; padding: 6px 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.oda-cip i { width: 8px; height: 8px; border-radius: 50%; }
.oda-cip:hover { background: #f0e8db; }
.oda-cip.secili { background: var(--yazi); color: #fff; }
.kontrol { position: fixed; right: 372px; bottom: 18px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.kd { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cizgi2); background: rgba(251, 247, 240, .96); font-size: 19px; line-height: 1; box-shadow: var(--golge); }
.kd:hover { background: #fff; }
.ipucu { font-size: 11.5px; color: var(--soluk); background: rgba(251, 247, 240, .8); padding: 3px 12px; border-radius: 99px; white-space: nowrap; }
@media (max-width: 1200px) { .gezinti { max-width: calc(100% - 620px); } .kontrol { right: 332px; } .ipucu { display: none; } }
body.sade .sol, body.sade .sag { display: none; }
body.sade .gezinti { max-width: calc(100% - 140px); }
body.sade .kontrol { right: 18px; }

.kule-et { pointer-events: none; background: #2AABEE; color: #fff; border-radius: 8px; padding: 3px 9px; font-size: 11.5px; line-height: 1.3; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.kule-et b { display: block; font-weight: 600; }
.kule-et span { opacity: .9; }
body.gece { --bg: #2c2e3a; }
body.gece .ust { background: rgba(40, 42, 54, .88); color: #f1ece4; border-color: rgba(255,255,255,.08); }
body.gece .ust .dugme { background: #3a3c4a; color: #f1ece4; border-color: rgba(255,255,255,.12); }
body.gece .hap { background: #3a3c4a; color: #e6e0d6; border-color: rgba(255,255,255,.1); }
body.gece .hap.iyi { background: #2f4429; color: #b9e3a6; }
body.gece .saat { color: #a9a39a; }
body.gece .oda-et { color: rgba(255, 250, 240, .6); }
body.gece .oda-et small { color: rgba(255, 250, 240, .5); }
body.gece .ipucu { background: rgba(40, 42, 54, .8); color: #b8b2a8; }

body.uzak .masa-et.uyku { opacity: 0; pointer-events: none; }
body.orta .masa-et { font-size: 11px; padding: 3px 7px; }
body.orta .masa-et.iyi span { display: none; }
body.orta .masa-et.iyi:hover span { display: block; }
.oda-et { font-size: 13px; }
.oda-et small, body.gece .oda-et small { background: rgba(22, 22, 28, .72); color: #efe9df; border-radius: 99px; padding: 2px 9px; font-size: 11px; }
.oda-et small:empty { display: none; }
.oda-et small { transform: translateY(30px); }
.oda-et { display: none; }   /* room names are painted on the floors (floorSign) */

/* hover card for desks / the board (desk names are painted on the floor) */
.masa-ipucu { position: fixed; z-index: 7; pointer-events: none; background: rgba(251, 247, 240, .97); border: 1px solid var(--cizgi2); border-radius: 9px;
  padding: 6px 10px; font-size: 12.5px; line-height: 1.4; box-shadow: var(--golge); max-width: 280px; }
.masa-ipucu b { display: block; font-weight: 600; }
.masa-ipucu span { color: var(--ikincil); }
.kd.secili { background: var(--yazi); color: #fff; }
.dugme.secili { background: var(--yazi); color: #fff; border-color: var(--yazi); }
.hava { cursor: help; }
/* replay bar */
.tekrar { position: fixed; z-index: 4; left: 50%; bottom: 112px; transform: translateX(-50%); width: min(760px, calc(100% - 760px)); min-width: 420px;
  background: rgba(251, 247, 240, .96); border: 1px solid var(--cizgi); border-radius: 14px; padding: 8px 12px 6px; box-shadow: var(--golge); }
.tekrar-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kd.kucuk { width: 32px; height: 32px; font-size: 14px; }
.tk-zaman { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; flex: 1; }
.tk-hiz { display: flex; gap: 2px; background: #f0e8db; border-radius: 8px; padding: 2px; }
.tk-hiz button { border: 0; background: transparent; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.tk-hiz button.secili { background: var(--yazi); color: #fff; }
#tk-grafik { width: 100%; height: 56px; display: block; cursor: pointer; }
.tk-alt { display: flex; justify-content: space-between; font-size: 11px; color: var(--soluk); margin-top: 2px; }
body.sade .tekrar { width: min(760px, calc(100% - 160px)); }
body.gece .tekrar, body.gece .masa-ipucu { background: rgba(40, 42, 54, .95); color: #f1ece4; border-color: rgba(255,255,255,.1); }
body.gece .tk-hiz { background: #3a3c4a; }
body.gece .masa-ipucu span { color: #c9c3b8; }
body.gece .tekrar .dugme { background: #3a3c4a; color: #f1ece4; border-color: rgba(255,255,255,.15); }

/* phones (narrow, or a phone held sideways): the feed is a sheet that slides up and closes, rooms in one scrolling row */
.bas-sag { display: flex; align-items: center; gap: 8px; }
.mobil-dugme, .mobil-kapat { display: none; }
#sahne canvas { touch-action: none; }
@media (max-width: 700px), (max-height: 500px) {
  .ust { height: 48px; padding: 0 10px; }
  .logo { font-size: 15px; gap: 8px; }
  .logo-k { width: 22px; height: 22px; }
  .logo-k::after { left: 5px; right: 5px; top: 9px; }
  .ust-sag { gap: 6px; }
  .hap { font-size: 12px; padding: 4px 9px; white-space: nowrap; }
  #durum-hap, .saat, #yenile, #tekrar-ac, #kamera, #paneller { display: none; }
  .mobil-dugme { display: inline-block; padding: 6px 10px; }
  .mobil-kapat { display: inline-block; font-size: 26px; padding: 0 4px; }
  .sol, .sag, body.sade .sag { display: none; }
  body.akis-acik .sag, body.sade.akis-acik .sag { display: flex; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: min(62%, 520px); z-index: 8; }
  body.akis-acik .akis-kart { box-shadow: 0 -10px 40px rgba(40, 30, 15, .25); }
  body.akis-acik #akis-ac { background: var(--yazi); color: #fff; border-color: var(--yazi); }
  body .gezinti, body.sade .gezinti { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; align-items: stretch; }
  .odalar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .odalar::-webkit-scrollbar { display: none; }
  .oda-cip { padding: 7px 10px; }
  .ipucu { display: none; }
  body .kontrol, body.sade .kontrol { right: 10px; bottom: 64px; }
  .panel { top: 56px; left: 8px; right: 8px; width: auto; max-height: calc(100% - 64px); padding: 14px; }
  body .tekrar, body.sade .tekrar { width: calc(100% - 16px); min-width: 0; bottom: 64px; }
  .modal-kutu { padding: 14px; max-width: 96vw; }
  .kilit-form { width: min(320px, 82vw); }
}