/* buyur.ai müşteri-UI — sıcak/sakin tasarım dili (terracotta + krem + adaçayı) */
:root {
  --bg: #FAF3E8;
  --paper: #FFFDF8;
  --ink: #3D405B;
  --ink-soft: #7A7D93;
  --terra: #E07A5F;
  --terra-deep: #C96548;
  --terra-soft: #F6C7B8;
  --sage: #81B29A;
  --gold: #E9B44C;
  --gold-soft: #F6E3BE;
  --navy: #5F6C9E;
  --danger: #D96C5F;
  --ok: #6FA97C;
  --r-lg: 26px;
  --r-md: 18px;
  --shadow: 0 10px 30px rgba(61, 64, 91, .12);
  --shadow-soft: 0 4px 14px rgba(61, 64, 91, .08);
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  touch-action: manipulation;
}
.hint, .chip, .cta, .sugg, #summary, #send-btn,
#office-back, #campus-btn, #walk-btn, #enter-bina, #room-exit, #talk-balloon,
#sheet-enter, #sheet-voice, #sheet-cta, #office-2d-return, .room-tag,
.hl-row button, #hl-toggle, #hl-verify-ok {
  min-width: 44px; min-height: 44px;
}

/* ── üst gösterge ─────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; gap: 6px;
  padding: calc(var(--sat) + 12px) calc(var(--sar) + 16px) 10px calc(var(--sal) + 16px);
  pointer-events: none;
}
.hint {
  pointer-events: auto;
  padding: 7px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: all .25s;
}
.hint.active { background: var(--ink); color: #FFFDF8; box-shadow: var(--shadow-soft); }
.hint-office { position: relative; }

/* Oturum kontrolü sekme değildir; dar ekranda rozetle birlikte alt satıra sığar. */
.topbar:has(#session-logout:not([hidden])) { flex-wrap: wrap; }
.topbar:has(#session-logout:not([hidden])) #canlilik {
  position: static;
  align-self: center;
  order: 5;
}
#session-logout {
  order: 4;
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  background: #FFFDF8;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
#session-logout[hidden] { display: none; }
#session-logout:focus-visible { outline: 3px solid #713528; outline-offset: 3px; }
#session-logout:disabled { cursor: default; opacity: .6; }
@media (max-width: 600px) {
  .topbar:has(#session-logout:not([hidden])) {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 4px 6px;
  }
  .topbar:has(#session-logout:not([hidden])) #session-logout { grid-row: 2; grid-column: 1; }
  .topbar:has(#session-logout:not([hidden])) #canlilik { grid-row: 2; grid-column: 2 / 4; justify-self: end; }
  body:has(#session-logout:not([hidden])) #panel-voice { padding-top: calc(var(--sat) + 120px); }
  body:has(#session-logout:not([hidden])) .flow-head { padding-top: calc(var(--sat) + 112px); }
  body:has(#session-logout:not([hidden])) #office-title { top: calc(var(--sat) + 112px); }
}

/* W2 bağlantı-dürüstlük rozeti — topbar sağ-köşe; renk gerçek-duruma göre */
#canlilik {
  position: absolute; right: calc(var(--sar) + 14px); top: calc(var(--sat) + 13px);
  pointer-events: none;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: rgba(255, 253, 248, .9); color: var(--ink-soft);
  box-shadow: var(--shadow-soft); backdrop-filter: blur(6px);
}
#canlilik[data-s="canli"] { color: #3E7D68; }
#canlilik[data-s="kismi"] { color: #A8842C; }
#canlilik[data-s="kopuk"] { color: #B5432E; background: rgba(255, 243, 239, .92); }

/* Independent owner/member actions share a wrapping row, never an absolute slot.
   The row starts below the navigation; hidden controls retain the native hidden rule. */
.source-account-actions {
  position: absolute; top: calc(100% + 6px);
  left: calc(var(--sal) + 14px); right: calc(var(--sar) + 14px);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.asansor-link-pill {
  position: relative; flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere;
  pointer-events: auto; min-height: 44px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 253, 248, .94); color: var(--ink); font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(6px);
}
.asansor-link-pill[data-state="connected"] { color: #3E7D68; }
.asansor-link-pill[data-state="attention"] { color: #B5432E; }

.asansor-link-dialog {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: 20px; background: rgba(61, 64, 91, .28); backdrop-filter: blur(7px);
}
.asansor-link-dialog[hidden] { display: none; }
.asansor-link-card {
  position: relative; width: min(430px, 100%); padding: 28px;
  border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow);
}
.asansor-link-card h2 { margin: 0 42px 10px 0; font-size: 22px; }
.asansor-link-card p { line-height: 1.5; }
.asansor-link-detail { min-height: 22px; margin-top: 7px; color: var(--ink-soft); font-size: 14px; }
.asansor-link-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border-radius: 50%; background: #F1E6D6; font-size: 25px;
}
.asansor-link-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.asansor-link-actions button {
  min-height: 44px; padding: 10px 16px; border-radius: 13px; font-weight: 700;
  background: var(--terra); color: white;
}
#asansor-link-revoke { background: #F1E6D6; color: var(--danger); }

/* ── panel şeridi ─────────────────────────────── */
.panels {
  position: fixed; inset: 0 auto auto 0;
  display: flex; width: 300%; height: 100dvh;
  transform: translate3d(-33.3333%, 0, 0);
  transition: transform .38s cubic-bezier(.32, .9, .35, 1);
}
.panel { width: 33.3333%; height: 100%; position: relative; overflow: hidden; }

/* ── SOL: Akış ────────────────────────────────── */
#panel-flow { display: flex; flex-direction: column; }
.flow-head {
  padding: calc(var(--sat) + 58px) calc(var(--sar) + 20px) 6px calc(var(--sal) + 20px);
}
.flow-head h2 { font-size: 22px; font-weight: 800; }
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px calc(var(--sar) + 20px) 10px calc(var(--sal) + 20px);
}
.chip {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #F1E6D6; color: var(--ink-soft);
}
.chip.active { background: var(--ink); color: #FFFDF8; }
#feed {
  flex: 1; overflow-y: auto;
  padding: 6px calc(var(--sar) + 16px) calc(var(--sab) + 28px) calc(var(--sal) + 16px);
  display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
}
.card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper); border-radius: var(--r-md);
  padding: 14px; box-shadow: var(--shadow-soft);
  animation: cardIn .4s ease both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.card-icon {
  width: 42px; height: 42px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-size: 20px;
  background: #F6EDE0;
}
.card.t-review { border: 1.5px solid var(--gold); }
.card.t-review .card-icon { background: var(--gold-soft); }
.card.t-win .card-icon { background: #E4F0E8; }
.card-body { flex: 1; min-width: 0; }
.card-body h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.card-body p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.card-body .meta { display: block; font-size: 12px; color: #A9AABC; margin-top: 7px; }
.cta {
  margin-top: 10px; padding: 9px 16px; border-radius: 12px;
  background: var(--terra); color: #FFF; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(224, 122, 95, .35);
}
.cta:active { transform: scale(.97); }
.done-note { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ok); }

/* ── MERKEZ: Ses ──────────────────────────────── */
#panel-voice {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--sat) + 70px) calc(var(--sar) + 24px)
    calc(var(--sab) + 20px) calc(var(--sal) + 24px);
}
#greet { font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.sub { color: var(--ink-soft); font-size: 14.5px; margin-top: 5px; }
#summary {
  margin-top: 18px; padding: 12px 18px; border-radius: var(--r-md);
  background: var(--paper); box-shadow: var(--shadow-soft);
  font-size: 14px; color: var(--ink-soft); text-align: center;
}
#summary .gold { color: #C8922A; font-weight: 700; }
#summary.has-review { border: 1.5px solid var(--gold); }
.orb-zone { flex: 1; display: grid; place-items: center; }
#orb {
  width: 158px; height: 158px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6C7B8, var(--terra) 68%, var(--terra-deep));
  box-shadow: 0 18px 50px rgba(224, 122, 95, .45), inset 0 -8px 22px rgba(0,0,0,.08);
  display: grid; place-items: center;
  animation: breathe 4.4s ease-in-out infinite;
  position: relative;
}
#orb::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,122,95,.22), transparent 66%);
  z-index: -1;
}
#orb svg { width: 52px; height: 52px; fill: #FFFDF8; }
@keyframes breathe { 50% { transform: scale(1.055); } }
#orb.pulse { animation: pulseOrb .9s ease; }
@keyframes pulseOrb {
  0% { transform: scale(1); } 30% { transform: scale(1.14); } 100% { transform: scale(1); }
}
#voice-status { margin-top: 4px; font-size: 14.5px; color: var(--ink-soft); text-align: center; min-height: 20px; }

/* ── kamera-teli (G5): ses CANLIYKEN beliren uydu-affordance — keşfedilebilir, bağırmayan.
   A (varsayılan): orb'un sağ-alt çaprazına yapışık uydu · B (?cam=b, founder A/B): sağda ayrık.
   Görünürlük tek-noktadan (setVoiceUi onAir) — bağlantı yokken DOM'da ama görünmez+tıklanamaz. */
.orb-zone { position: relative; }
#cam-btn {
  position: absolute; left: calc(50% + 33px); top: calc(50% + 33px);
  width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  background: #FFFDF8; border: 1.5px solid var(--terra-soft);
  box-shadow: 0 6px 16px rgba(224, 122, 95, .28);
  display: grid; place-items: center;
  opacity: 0; transform: none; pointer-events: none;
  transition: opacity .26s ease;
}
#cam-btn svg {
  width: 22px; height: 22px; fill: var(--terra-deep);
  transform: scale(.55);
  transition: transform .26s cubic-bezier(.34, 1.45, .5, 1);
}
#cam-btn.show { opacity: 1; pointer-events: auto; }
#cam-btn.show svg { transform: scale(1); }
#cam-btn:active svg { transform: scale(.92); }
body[data-cam="b"] #cam-btn { left: calc(50% + 96px); top: calc(50% - 23px); }
@media (prefers-reduced-motion: reduce) {
  #cam-btn { transition: opacity .2s ease; transform: none; }
  #cam-btn svg, #cam-btn.show svg, #cam-btn:active svg { transform: none; transition: none; }
}
.suggs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0 14px; }
.sugg {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft);
}
.input-row {
  width: 100%; max-width: 420px; display: flex; gap: 8px;
  background: var(--paper); border-radius: 999px; padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow-soft);
}
#text-input {
  flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink);
}
#text-input::placeholder { color: #B9BAC9; }
#send-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; flex: none;
}
#send-btn svg { width: 18px; height: 18px; fill: #FFFDF8; }

/* ── SAĞ: 3D Ofis ─────────────────────────────── */
#panel-office { background: linear-gradient(180deg, #FFE8D6 0%, #F6DCC8 46%, #E8D9F0 100%); }
#office-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#office-canvas.office-canvas-unavailable { display: none; visibility: hidden; pointer-events: none; }
#office-title {
  position: absolute; top: calc(var(--sat) + 54px); left: 0; right: 0;
  text-align: center; font-size: 17px; font-weight: 800; color: var(--ink);
  pointer-events: none; text-shadow: 0 2px 8px rgba(255,255,255,.6);
}
#office-loading {
  position: absolute; inset: 0; z-index: 36;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, #FFE8D6, #E8D9F0);
  font-size: 15px; font-weight: 700; color: var(--ink);
  transition: opacity .5s; pointer-events: none;
}
#office-loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* (emir fef385/2) davet-hali: sahne henüz kurulmadı — ilerleme-çubuğu YOK (ilerleyen bir şey yok),
   metin ikincil/küçük punto, perde tıklanabilir (dokunuş Ofisim paneline geçirir). */
#office-loading.davet { pointer-events: auto; cursor: pointer; font-size: 14px; font-weight: 600; color: rgba(61,64,91,.62); }
#office-loading.davet .ol-bar { display: none; }
#office-loading.office-fallback {
  pointer-events: auto;
  padding: calc(var(--sat) + 72px) calc(var(--sar) + 24px)
    calc(var(--sab) + 28px) calc(var(--sal) + 24px);
  text-align: center;
}
#office-loading.office-fallback.office-fallback-exited {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.office-fallback-message { display: grid; justify-items: center; gap: 8px; }
.office-fallback-title { max-width: 360px; font-size: 20px; line-height: 1.25; }
.office-fallback-copy { max-width: 360px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }
#office-2d-return {
  min-width: 132px; min-height: 48px; padding: 11px 18px; border-radius: 14px;
  background: var(--ink); color: #FFFDF8; font-weight: 800;
  box-shadow: var(--shadow-soft);
}
#office-2d-return:focus-visible { outline: 3px solid var(--terra-deep); outline-offset: 3px; }
.ol-bar {
  width: 180px; height: 8px; border-radius: 99px; background: rgba(61,64,91,.15); overflow: hidden;
}
.ol-bar i {
  display: block; height: 100%; width: 0%; border-radius: 99px;
  background: var(--terra); transition: width .25s;
}

#office-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse 120% 62% at 50% 46%, transparent 52%, rgba(61, 64, 91, .30) 100%);
  opacity: 0; transition: opacity .45s;
}
#office-vignette.show { opacity: 1; }
#room-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.room-tag {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 253, 248, .92); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
  transition: opacity .25s;
  white-space: nowrap;
  margin-left: -8px; margin-top: -18px;
}
.room-tag .rt-dot { width: 9px; height: 9px; border-radius: 50%; background: #C9CAD6; }
.room-tag.st-running .rt-dot { background: var(--ok); animation: dotPulse 1.6s infinite; }
.room-tag.st-review .rt-dot { background: var(--gold); animation: dotPulse 1.1s infinite; }
.room-tag.st-blocked .rt-dot { background: var(--danger); }
.room-tag.st-done .rt-dot { background: var(--ok); }
@keyframes dotPulse { 50% { box-shadow: 0 0 0 5px rgba(129, 178, 154, .25); } }
.room-tag.st-review { border: 1.5px solid var(--gold); }
.room-tag.compact .rt-name { display: none; }
/* (DOLULUK 08-01) Kat doluluğu COMPACT'ta da görünür kalır — dış-bakışta ad gizlendiği için
   sayı gizlenirse bilgi hiç ulaşmaz; taşıyıcı katman etiket olduğuna göre asıl taşıyan budur.
   Kontrast: --ink üzerine değil, etiketin kendi metin rengiyle (arayüz eşiği burada geçerli). */
.room-tag .rt-sayi {
  font-weight: 700; font-size: 12px; line-height: 1;
  padding: 1px 5px; border-radius: 999px; background: rgba(61, 64, 91, .10);
}
.room-tag.active .rt-sayi { background: rgba(255, 253, 248, .22); }
.room-tag.compact { padding: 7px 10px; }
.room-tag.active { background: var(--ink); color: #FFFDF8; }

#elevator {
  position: absolute; right: calc(var(--sar) + 12px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 30;
}
.elev-btn {
  width: 46px; height: 46px; border-radius: 16px; font-size: 21px;
  background: rgba(255, 253, 248, .92); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
  transition: transform .15s, background .2s;
}
.elev-btn:active { transform: scale(.92); }
.elev-btn.active { background: var(--ink); }

#office-back {
  position: absolute; top: calc(var(--sat) + 92px); left: calc(var(--sal) + 14px); z-index: 30;
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 253, 248, .92); box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#office-back.show { opacity: 1; pointer-events: auto; }

/* K3 kampüs: giriş-butonu (sağ-üst; office-back sol-üstle çakışmaz) */
#campus-btn {
  position: absolute; top: calc(var(--sat) + 92px); right: calc(var(--sar) + 14px); z-index: 30;
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 253, 248, .92); box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#campus-btn.show { opacity: 1; pointer-events: auto; }

/* F-C dis-yuru: "Dolaş" (kampüs-butonunun altı; aynı buton-dili) + kapı-eşiği "İçeri gir" (alt-orta) */
#walk-btn {
  position: absolute; top: calc(var(--sat) + 138px); right: calc(var(--sar) + 14px); z-index: 30;
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 253, 248, .92); box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#walk-btn.show { opacity: 1; pointer-events: auto; }
#enter-bina {
  position: absolute; bottom: calc(var(--sab, 0px) + 132px); left: 50%; transform: translateX(-50%);
  z-index: 30; padding: 11px 19px; border-radius: 999px; font-size: 14.5px; font-weight: 800;
  background: rgba(255, 253, 248, .95); box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#enter-bina.show { opacity: 1; pointer-events: auto; }

/* K3 kampüs: bina-chip (tabela) — yalnız kampüs-modunda; oda-etiketleri o modda gizli */
.bina-tag { display: none; font-size: 11.5px; padding: 5px 9px; margin: 0; gap: 5px; }
.bina-tag .rt-emoji { font-size: 12.5px; }
.bina-tag .rt-dot { width: 8px; height: 8px; }
#room-tags.campus .room-tag:not(.bina-tag) { display: none; }
#room-tags.campus .bina-tag:not(.gizli) { display: flex; }

#room-exit {
  position: absolute; top: calc(var(--sat) + 92px); left: calc(var(--sal) + 14px); z-index: 30;
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 253, 248, .94); box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#room-exit.show { opacity: 1; pointer-events: auto; }

#talk-balloon {
  position: absolute; left: 0; top: 0; z-index: 28;
  display: flex; align-items: center; gap: 7px;
  background: var(--ink); color: #FFFDF8;
  border-radius: 999px; padding: 10px 16px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(61, 64, 91, .35);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  white-space: nowrap;
}
#talk-balloon.show { opacity: 1; pointer-events: auto; animation: balloonIn .35s cubic-bezier(.32,1.4,.5,1); }
@keyframes balloonIn { from { transform: scale(.7); opacity: 0; } }
#talk-balloon .tb-emoji { font-size: 17px; }

#elevator.hidden, #room-tags.hidden { display: none; }

#joystick {
  position: absolute; right: calc(var(--sar) + 22px); bottom: calc(var(--sab) + 26px); z-index: 32;
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(61, 64, 91, .14);
  border: 2px solid rgba(255, 253, 248, .55);
  backdrop-filter: blur(3px);
  display: none; place-items: center;
  touch-action: none;
  transition: border-color .15s, box-shadow .15s;   /* G3-R1 overdrive-vurgusu yumuşak girer */
}
#joystick.show { display: grid; }
/* G3-R1 (PUBG slide-beyond-ring uyarlaması): parmak halka-DIŞINA uzayınca koşu — halka+knob
   terra-vurgusu = "nerede olduğunu hisset" affordansı (knob transform'una transition YOK: parmak-takibi gecikmez) */
#joystick.overdrive { border-color: rgba(224, 122, 95, .95); box-shadow: 0 0 18px rgba(224, 122, 95, .45); }
#joystick.overdrive #joy-knob { background: #E07A5F; box-shadow: 0 0 16px rgba(224, 122, 95, .8), 0 4px 12px rgba(61, 64, 91, .35); }
#joy-knob {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 4px 12px rgba(61, 64, 91, .35);
  pointer-events: none;
  transition: background .15s, box-shadow .15s;
}

#sheet-enter, #sheet-voice {
  margin-top: 12px; width: 100%; padding: 12px; border-radius: 14px;
  background: none; border: 2px solid var(--terra); color: var(--terra-deep);
  font-size: 15px; font-weight: 800;
}
#sheet-voice { margin-top: 8px; }
#sheet-enter:active, #sheet-voice:active { background: rgba(224, 122, 95, .08); }

/* Hermes giriş kapısı (ses için tek-seferlik) */
#hermes-login {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(61, 64, 91, .42); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
}
#hermes-login.show { display: flex; }
.hl-card {
  width: 100%; max-width: 340px; background: var(--paper);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow);
}
.hl-card h3 { font-size: 17px; }
.hl-sub { font-size: 13px; color: var(--ink-soft); margin: 6px 0 14px; }
.hl-card input {
  width: 100%; padding: 11px 14px; margin-bottom: 10px;
  border-radius: 12px; border: 1.5px solid rgba(61, 64, 91, .18);
  background: #FFFDF8; font-size: 15px;
}
#hl-err { min-height: 18px; font-size: 12.5px; color: #C0392B; margin-bottom: 6px; }
.hl-row { display: flex; gap: 10px; }
.hl-row button {
  flex: 1; padding: 11px; border-radius: 12px; font-size: 14.5px; font-weight: 800;
}
#hl-cancel { background: none; border: 1.5px solid rgba(61, 64, 91, .25); color: var(--ink-soft); }
#hl-go { background: var(--terra); color: #FFFDF8; }
#hl-go:disabled { opacity: .6; }
/* D1 signup-UI: giriş↔kayıt geçiş-bağı + doğrulama-bilgilendirmesi (yalnız better-auth modda görünür) */
#hl-toggle {
  display: block; width: 100%; margin-top: 12px; padding: 6px;
  background: none; border: none; font-size: 13px; font-weight: 700;
  color: var(--terra); text-align: center; cursor: pointer;
}
#hl-verify p { font-size: 14px; line-height: 1.5; margin: 4px 0 14px; }
#hl-verify-ok {
  width: 100%; padding: 11px; border-radius: 12px; font-size: 14.5px; font-weight: 800;
  background: var(--terra); color: #FFFDF8;
}

/* P0E tenant-doğumu: yalnız server taşıyıcısı exact numeric 1 olduğunda app.js bu DOM'u yaratır.
   2D kapı kendi başına tamamdır; WebGL, kamera uçuşu veya tören zorunluluğu yoktur. */
#tenant-birth-shell {
  position: fixed; inset: 0; z-index: 72;
  box-sizing: border-box;
  display: grid; place-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* Tenant/identity kanıtı tamamlanmadan önce önceki dünyanın adları ve sahnesi dahi
     görünmez: modal yalnız etkileşimi değil görsel tenant sızıntısını da fail-closed kapatır. */
  background: #1D1F2D;
}
#tenant-birth-panel {
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #B8B9C3;
  border-radius: 20px;
  background: #FFFDF8;
  color: #262838;
  box-shadow: 0 18px 60px rgba(22, 24, 35, .32);
  outline: none;
}
#tenant-birth-panel:focus-visible {
  outline: 3px solid #713528;
  outline-offset: 3px;
}
#tenant-birth-title {
  margin: 0 0 10px;
  color: #262838;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.2;
}
.tenant-birth-copy {
  margin: 0 0 18px;
  color: #35384D;
  font-size: 15px;
  line-height: 1.55;
}
#tenant-birth-panel label {
  display: block;
  margin-bottom: 7px;
  color: #262838;
  font-size: 14px;
  font-weight: 800;
}
#tenant-birth-company-name {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  border: 2px solid #5D6075;
  border-radius: 12px;
  background: #FFFFFF;
  color: #202230;
  font-size: 16px;
}
#tenant-birth-company-name:focus-visible {
  border-color: #713528;
  outline: 3px solid rgba(113, 53, 40, .28);
  outline-offset: 2px;
}
.tenant-birth-help {
  margin: 7px 0 0;
  color: #51556E;
  font-size: 12.5px;
  line-height: 1.45;
}
.tenant-birth-error {
  min-height: 20px;
  margin: 9px 0;
  color: #861E17;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#tenant-birth-prepare,
#tenant-birth-logout,
#tenant-birth-bootstrap-retry {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 2px solid #713528;
  border-radius: 12px;
  background: #713528;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}
#tenant-birth-prepare:focus-visible,
#tenant-birth-logout:focus-visible,
#tenant-birth-bootstrap-retry:focus-visible {
  outline: 3px solid #262838;
  outline-offset: 3px;
}
#tenant-birth-prepare:disabled,
#tenant-birth-logout:disabled,
#tenant-birth-bootstrap-retry:disabled { opacity: .62; cursor: wait; }
#tenant-birth-logout.tenant-birth-secondary,
#tenant-birth-bootstrap-retry.tenant-birth-secondary {
  margin-top: 10px;
  background: #FFFDF8;
  color: #5B2419;
}
.tenant-birth-support {
  margin: 16px 0 0;
  color: #35384D;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tenant-birth-steps {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.tenant-birth-steps li {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #C7C8D0;
  border-radius: 11px;
  background: #F5F1E8;
  color: #45495F;
  font-size: 14px;
  font-weight: 700;
}
.tenant-birth-steps li[data-state="current"] {
  border-color: #713528;
  background: #F3E3DD;
  color: #4D2017;
}
@media (max-width: 480px) {
  #tenant-birth-shell { place-items: end center; padding: 10px; }
  #tenant-birth-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tenant-birth-panel,
  #tenant-birth-panel * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  #tenant-birth-shell { background: Canvas; }
  #tenant-birth-panel,
  #tenant-birth-company-name,
  #tenant-birth-prepare,
  #tenant-birth-logout,
  #tenant-birth-bootstrap-retry,
  .tenant-birth-steps li {
    forced-color-adjust: auto;
    border-color: ButtonText;
  }
}

/* P0F plan/kullanım: server-authoritative iki projection'ın salt-okur 2D sunumu. */
.commercial-overview-trigger { min-width: 44px; min-height: 44px; }
.commercial-overview-trigger:focus-visible {
  outline: 3px solid #713528;
  outline-offset: 2px;
}
#commercial-overview-shell {
  position: fixed; inset: 0; z-index: 73;
  box-sizing: border-box;
  display: grid; place-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(29, 31, 45, .72);
}
#commercial-overview-panel {
  box-sizing: border-box;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0 22px 22px;
  border: 1px solid #B8B9C3;
  border-radius: 20px;
  background: #FFFDF8;
  color: #262838;
  box-shadow: 0 18px 60px rgba(22, 24, 35, .32);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
#commercial-overview-panel:focus-visible {
  outline: 3px solid #713528;
  outline-offset: 3px;
}
.commercial-overview-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -6px 14px;
  padding: 20px 6px 12px;
  background: #FFFDF8;
  border-bottom: 1px solid #D1D2D8;
}
.commercial-overview-head h2 { margin: 0; font-size: 23px; line-height: 1.2; }
.commercial-overview-close {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 2px solid #5D6075;
  border-radius: 999px;
  background: #FFFFFF;
  color: #262838;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.commercial-overview-close:focus-visible,
.commercial-overview-retry:focus-visible {
  outline: 3px solid #713528;
  outline-offset: 3px;
}
.commercial-overview-body { display: grid; gap: 16px; }
.commercial-overview-status,
.commercial-overview-alert,
.commercial-overview-partial {
  margin: 14px 0 0;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.commercial-overview-status { background: #F1E9DC; color: #35384D; }
.commercial-overview-alert { background: #F8E3DF; color: #711B16; font-weight: 750; }
.commercial-overview-partial { margin: 0; background: #FFF0CF; color: #57400B; }
.commercial-overview-section {
  padding: 15px;
  border: 1px solid #C9CAD1;
  border-radius: 14px;
  background: #FFFFFF;
}
.commercial-overview-section h3 { margin: 0 0 12px; font-size: 17px; color: #262838; }
.commercial-overview-facts { display: grid; gap: 8px; }
.commercial-overview-row {
  display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E1E1E5;
}
.commercial-overview-row:last-child { padding-bottom: 0; border-bottom: 0; }
.commercial-overview-row dt { color: #565A70; font-size: 13px; font-weight: 750; }
.commercial-overview-row dd {
  margin: 0; color: #262838; font-size: 14px; overflow-wrap: anywhere;
}
.commercial-overview-usage { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.commercial-overview-usage-item {
  padding: 12px;
  border: 1px solid #CACBD2;
  border-radius: 12px;
  background: #FBF8F1;
}
.commercial-overview-usage-item.hard-limit { border-color: #8B211B; background: #FBEAE7; }
.commercial-overview-usage-head {
  display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
}
.commercial-overview-usage-item progress {
  width: 100%; height: 10px; margin: 10px 0 5px;
  accent-color: #4B765C;
}
.commercial-overview-usage-item.hard-limit progress { accent-color: #8B211B; }
.commercial-overview-remaining,
.commercial-overview-limit,
.commercial-overview-window,
.commercial-overview-muted,
.commercial-overview-warning,
.commercial-overview-safe-code,
.commercial-overview-foot {
  margin: 8px 0 0;
  color: #4E5268;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.commercial-overview-limit,
.commercial-overview-warning { color: #711B16; font-weight: 750; }
.commercial-overview-safe-code {
  color: #4A4D62; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.commercial-overview-foot { margin: 0; color: #565A70; }
.commercial-overview-measured-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #C8CAD2;
  border-radius: 10px;
  color: #35384D;
  background: #F1F1F3;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.commercial-overview-measured-status.complete {
  border-color: #8EB29B;
  color: #244D34;
  background: #E4F1E8;
}
.commercial-overview-measured-status.partial {
  border-color: #C9A64E;
  color: #57400B;
  background: #FFF0CF;
}
.commercial-overview-measured-status.unavailable {
  border-color: #B8B9C3;
  color: #3F4254;
  background: #F1F1F3;
}
.commercial-overview-measured .commercial-overview-row dd {
  font-variant-numeric: tabular-nums;
}
.commercial-overview-retry {
  box-sizing: border-box;
  width: 100%; min-height: 48px;
  margin-top: 16px; padding: 11px 14px;
  border: 2px solid #713528;
  border-radius: 12px;
  background: #713528;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 480px) {
  .topbar.commercial-overview-enabled {
    gap: 2px;
    padding-left: calc(var(--sal) + 8px);
    padding-right: calc(var(--sar) + 8px);
  }
  .topbar.commercial-overview-enabled .hint { padding-left: 10px; padding-right: 10px; }
  .topbar.commercial-overview-enabled #canlilik {
    top: calc(var(--sat) + 60px);
    right: max(8px, env(safe-area-inset-right));
  }
  #commercial-overview-shell {
    place-items: end center;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  #commercial-overview-panel {
    width: 100%;
    max-height: 100%;
    padding: 0 14px max(18px, env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  .commercial-overview-row { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #commercial-overview-panel,
  #commercial-overview-panel * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  #commercial-overview-shell { background: Canvas; }
  #commercial-overview-panel,
  .commercial-overview-close,
  .commercial-overview-retry,
  .commercial-overview-section,
  .commercial-overview-usage-item {
    forced-color-adjust: auto;
    border-color: ButtonText;
  }
}

/* ses oturumu canlı: orb nefes yerine canlı-nabız */
#orb.live { animation: orbLive 1.5s ease-in-out infinite; }
@keyframes orbLive {
  50% { transform: scale(1.09); box-shadow: 0 18px 60px rgba(224, 122, 95, .62), inset 0 -8px 22px rgba(0,0,0,.08); }
}

#office-sheet {
  position: absolute; left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px);
  bottom: calc(var(--sab) + 12px);
  background: var(--paper); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow);
  transform: translateY(130%); transition: transform .35s cubic-bezier(.32,.9,.35,1);
  z-index: 25;
}
#office-sheet.show { transform: none; }
#sheet-title { font-size: 17px; font-weight: 800; }
#sheet-agent { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
#sheet-task { font-size: 14.5px; margin-top: 8px; line-height: 1.45; }
#sheet-pending { list-style: none; margin-top: 8px; padding: 0; }
#sheet-pending li {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.4;
  padding: 5px 0 5px 2px; border-top: 1px dashed rgba(95, 108, 158, .18);
}
/* belgeler bölümü (B7 belge-rafı; bekleyenler-listesi deseninde) */
#sheet-docs { margin-top: 10px; }
#sheet-docs-head { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
#sheet-docs-list {
  list-style: none; margin-top: 4px; padding: 0;
  max-height: 132px; overflow-y: auto;
}
#sheet-docs-list li {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.4;
  padding: 5px 0 5px 2px; border-top: 1px dashed rgba(95, 108, 158, .18);
}
#sheet-docs-soon { font-size: 11.5px; color: var(--ink-soft); opacity: .7; margin-top: 4px; }
/* P0D: doğrulanmış federation kanıtı yalnız salt-okunur metindir; eylem/tıklama yüzeyi değildir. */
.conn-evidence {
  display: inline-block;
  max-width: 100%;
  margin-inline-start: 6px;
  padding: 2px 7px;
  border: 1px solid #739889;
  border-radius: 999px;
  background: #EEF7F2;
  color: #275443;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  cursor: default;
  animation: none;
  transition: none;
}
@media (max-width: 480px) {
  .conn-evidence {
    display: block;
    width: fit-content;
    margin-block-start: 4px;
    margin-inline-start: 0;
    border-radius: 10px;
  }
}
@media (forced-colors: active) {
  .conn-evidence {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }
}
#sheet-cta {
  margin-top: 12px; width: 100%; padding: 12px; border-radius: 14px;
  background: var(--terra); color: #FFF; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(224, 122, 95, .35);
}
/* EYLEM-ANI: odak-satırı (masadaki parlayan imza-belgesinin liste-karşılığı) + sheet onay-şeridi */
#sheet-pending li.odak {
  color: var(--ink); font-weight: 700;
  border-left: 3px solid var(--gold); padding-left: 7px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(233, 180, 76, .16), transparent 72%);
}
#sheet-eylem:empty { display: none; }
#sheet-eylem { margin-top: 12px; }
#sheet-eylem .cta {
  padding: 12px 14px; border-radius: 14px; font-size: 15px; font-weight: 800;
  background: var(--terra); color: #FFF; box-shadow: 0 6px 16px rgba(224, 122, 95, .35);
}
#sheet-eylem .sheet-onay-ac { width: 100%; }
#sheet-eylem .onay-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#sheet-eylem .onay-strip .cta { flex: 1 1 auto; }
#sheet-eylem .onay-geri {
  background: var(--paper); color: var(--ink);
  box-shadow: none; border: 1.5px solid rgba(95, 108, 158, .3);
}
#sheet-eylem .onay-not { display: flex; gap: 8px; width: 100%; }
#sheet-eylem .onay-not input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid rgba(95, 108, 158, .3); font-size: 14px;
  background: var(--paper); color: var(--ink);
}
#sheet-eylem .done-note { display: block; text-align: center; padding: 6px 0; }

/* ── toast ────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 26px); z-index: 60;
  transform: translate(-50%, 24px); opacity: 0;
  background: var(--ink); color: #FFFDF8;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); transition: all .3s;
  max-width: 86vw; text-align: center;
  pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }

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

/* R4-F4: boş-tenant karşılama — sesli-konuş CTA'sı nazikçe nefes alır (tek gerçek-eylem vurgusu).
   prefers-reduced-motion: animasyonsuz, yalnız kalıcı-halka (K1-sadeleşme). */
#sheet-voice.vurgu { box-shadow: 0 0 0 3px rgba(224, 122, 95, .35); }
@media (prefers-reduced-motion: no-preference) {
  #sheet-voice.vurgu { animation: vurgu-nefes 2.2s ease-in-out infinite; }
  @keyframes vurgu-nefes {
    0%, 100% { box-shadow: 0 0 0 2px rgba(224, 122, 95, .25); }
    50%      { box-shadow: 0 0 0 7px rgba(224, 122, 95, .12); }
  }
}

/* ── departman-atama paneli (08-01; dept-atama.js) ─────────────────────────────
   Toplu ekran: departmansız ajanlar tahmine göre gruplu, her satır kendi durumunu gösterir.
   Renk dili mevcut panellerle aynı (koyu-lacivert başlık, kırık-beyaz gövde). */
#dept-panel { position: fixed; inset: 0; background: rgba(20,22,34,.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
#dept-panel .dp-kap { background: #FBF6EC; border-radius: 14px; max-width: 720px; width: 100%;
  max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(0,0,0,.32); }
#dept-panel .dp-bas { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid #E6DCC8; }
#dept-panel .dp-bas h3 { margin: 0; font-size: 17px; color: #3D405B; flex: 1; }
#dept-panel .dp-say { font-size: 13px; color: #6B6E85; }
#dept-panel .dp-kapat { border: 0; background: transparent; font-size: 22px; cursor: pointer; color: #6B6E85; }
#dept-panel .dp-govde { overflow-y: auto; padding: 8px 16px 12px; }
#dept-panel .dp-grup { font-size: 13px; font-weight: 700; color: #5F6C9E; margin: 12px 0 4px; }
#dept-panel .dp-grup.dp-disi { color: #8A6A4C; }
#dept-panel .dp-not { font-size: 12px; color: #6B6E85; margin-bottom: 6px; }
#dept-panel .dp-satir { display: grid; grid-template-columns: 1fr auto 150px auto; gap: 8px;
  align-items: center; padding: 6px 0; border-bottom: 1px dashed #EDE4D2; }
#dept-panel .dp-satir.pasif { opacity: .62; }
#dept-panel .dp-ad { font-size: 14px; color: #3D405B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dept-panel .dp-tahmin { font-size: 12px; color: #6B6E85; }
#dept-panel .dp-girdi { border: 1px solid #D8CDB6; border-radius: 8px; padding: 5px 8px; font-size: 13px; width: 100%; }
#dept-panel .dp-kaydet { border: 0; border-radius: 8px; padding: 6px 12px; background: #E07A5F;
  color: #fff; font-size: 13px; cursor: pointer; }
#dept-panel .dp-kaydet:disabled { background: #C9B9A6; cursor: default; }
#dept-panel .dp-durum { grid-column: 1 / -1; font-size: 12px; min-height: 0; }
#dept-panel .dp-durum.iyi { color: #4F7F52; }
#dept-panel .dp-durum.kotu { color: #B5563E; }
#dept-panel .dp-durum.uyari { color: #9A7B2E; }   /* ulaşılamadı / doğrulanmadı — SESSİZ DEĞİL */
#dept-panel .dp-durum.bekle { color: #6B6E85; }
#dept-panel .dp-alt { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid #E6DCC8; }
#dept-panel .dp-tumu { border: 1px solid #5F6C9E; background: transparent; color: #5F6C9E;
  border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
#dept-panel .dp-ozet { font-size: 12px; color: #6B6E85; }

/* Campus controls are interactive inside the pointer-transparent topbar. */
#campus-context-controls { pointer-events: auto; }
@media (max-width: 600px) {
  body:has(.topbar #campus-context-controls) { --campus-mobile-header: calc(var(--sat) + 136px); }
  .topbar:has(#campus-context-controls):has(.hint-office) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 80px;
    grid-template-rows: 44px 44px 20px;
    gap: 6px 4px;
    align-items: center;
    padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);
    background: linear-gradient(var(--bg) 85%, transparent);
  }
  .topbar:has(#campus-context-controls):has(.hint-office) > .hint[data-i] {
    grid-row: 1; min-width: 0; min-height: 44px; padding: 6px 4px;
    white-space: nowrap; font-size: 13px;
  }
  .topbar:has(#campus-context-controls):has(.hint-office) > [data-i="0"] { grid-column: 1; }
  .topbar:has(#campus-context-controls):has(.hint-office) > [data-i="1"] { grid-column: 2; }
  .topbar:has(#campus-context-controls):has(.hint-office) > [data-i="2"] { grid-column: 3; }
  .topbar:has(#campus-context-controls):has(.hint-office) #session-logout {
    grid-row: 1; grid-column: 4; justify-self: end;
    width: 80px; min-width: 44px; padding: 6px; font-size: 12px; white-space: nowrap;
  }
  .topbar:has(#campus-context-controls):has(.hint-office) #campus-context-controls {
    grid-row: 2; grid-column: 1 / -1; min-width: 0; width: 100%;
    display: grid !important; /* overrides the desktop inline flex mount only on mobile */
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  }
  #campus-context-controls > label { min-width: 0; font-size: 0; }
  #campus-context-controls select {
    display: block; width: 100%; max-width: 100% !important; min-width: 0;
    height: 44px; font: inherit; font-size: 14px;
    color: var(--ink); background: var(--paper); border: 1px solid var(--ink-soft);
  }
  #campus-context-controls > button {
    min-width: 44px; max-width: 116px; height: 44px; padding: 4px 8px;
    border: 1px solid var(--ink-soft); border-radius: 8px; background: var(--paper);
    font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; overflow: hidden;
  }
  .topbar:has(#campus-context-controls):has(.hint-office) #canlilik {
    position: static; grid-row: 3; grid-column: 1 / -1; justify-self: end;
    max-width: 100%; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body:has(.topbar.commercial-overview-enabled #campus-context-controls) {
    --campus-mobile-header: calc(var(--sat) + 160px);
  }
  .topbar.commercial-overview-enabled:has(#campus-context-controls) { grid-template-rows: 44px 44px 44px; }
  .topbar:has(#campus-context-controls):has(.hint-office) #commercial-overview-trigger {
    grid-row: 3; grid-column: 1 / 3; justify-self: start; min-height: 44px;
  }
  .topbar.commercial-overview-enabled:has(#campus-context-controls) #canlilik { grid-column: 3 / 5; }
  body:has(.topbar #campus-context-controls) #office-title {
    top: calc(var(--campus-mobile-header) + 8px); padding: 0 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px;
  }
  body:has(.topbar #campus-context-controls) #office-back,
  body:has(.topbar #campus-context-controls) #campus-btn,
  body:has(.topbar #campus-context-controls) #room-exit { top: calc(var(--campus-mobile-header) + 42px); }
  body:has(.topbar #campus-context-controls) #walk-btn { top: calc(var(--campus-mobile-header) + 90px); }
  body:has(.topbar #campus-context-controls) #panel-voice { padding-top: calc(var(--campus-mobile-header) + 20px); }
  body:has(.topbar #campus-context-controls) .flow-head { padding-top: calc(var(--campus-mobile-header) + 12px); }
  body:has(.topbar #campus-context-controls) #office-loading.office-fallback { padding-top: calc(var(--campus-mobile-header) + 20px); }
}

/* Account avatar setting uses the existing character palette and native modal focus. */
#avatar-settings-trigger {
  order: 4; pointer-events: auto; min-height: 44px; padding: 7px 12px;
  border: 1px solid var(--ink-soft); border-radius: 999px;
  background: var(--paper, #FFFDF8); color: var(--ink); font: inherit; font-size: 13px;
}
#avatar-settings-trigger[hidden] { display: none; }
.avatar-settings {
  margin: auto;
  box-sizing: border-box; width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; padding: 24px;
  border: 1px solid var(--ink-soft); border-radius: 20px;
  background: var(--paper, #FFFDF8); color: var(--ink); box-shadow: 0 24px 80px #0004;
}
.avatar-settings::backdrop { background: #20171099; }
.avatar-settings h2 { margin: 0 0 8px; font-size: 24px; }
.avatar-settings p { line-height: 1.5; }
.avatar-settings fieldset { border: 0; padding: 0; margin: 20px 0; display: flex; gap: 12px; }
.avatar-settings legend { margin-bottom: 8px; }
.avatar-settings-choice {
  display: flex; flex: 1; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px; border: 1px solid var(--ink-soft); border-radius: 10px;
}
.avatar-settings select { box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin-top: 8px; font: inherit; }
.avatar-settings button { min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--ink-soft); font: inherit; cursor: pointer; }
.avatar-settings button:disabled { opacity: .6; cursor: default; }
.avatar-settings-save { color: #fff; background: #713528; }
.avatar-settings-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.avatar-settings-error { color: #8b2424; }
.avatar-settings-error:empty { display: none; }
#avatar-settings-trigger:focus-visible, .avatar-settings :focus-visible { outline: 3px solid #713528; outline-offset: 3px; }
@media (max-width: 600px) {
  .topbar:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 44px); gap: 4px;
  }
  .topbar:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) #avatar-settings-trigger { grid-row: 2; grid-column: 2; }
  .topbar:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) #commercial-overview-trigger { grid-row: 2; grid-column: 3; }
  .topbar:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) #canlilik { position: static; grid-row: 3; grid-column: 1 / -1; }
  body:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) #office-title { top: calc(var(--sat) + 164px); }
  body:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) #panel-voice,
  body:has(#avatar-settings-trigger:not([hidden])):not(:has(#campus-context-controls)) .flow-head { padding-top: calc(var(--sat) + 172px); }
  body:has(.topbar #campus-context-controls):has(#avatar-settings-trigger:not([hidden])) { --campus-mobile-header: calc(var(--sat) + 160px); }
  .topbar:has(#campus-context-controls):has(#avatar-settings-trigger:not([hidden])) { grid-template-rows: 44px 44px 44px; }
  .topbar:has(#campus-context-controls):has(#avatar-settings-trigger:not([hidden])) #avatar-settings-trigger { grid-row: 3; grid-column: 1; padding: 6px 4px; font-size: 12px; }
  .topbar:has(#campus-context-controls):has(#avatar-settings-trigger:not([hidden])) #commercial-overview-trigger { grid-row: 3; grid-column: 2; padding: 6px 4px; font-size: 12px; }
  .topbar:has(#campus-context-controls):has(#avatar-settings-trigger:not([hidden])) #canlilik { grid-row: 3; grid-column: 3 / 5; }
}