/* Canlı ofis: sahnenin renkleri ve hareketleri. Temel öğeler (düğme, rozet, form, giriş) panel.css'ten gelir. */
:root {
  /* açık, ferah bir dükkân: soğuk kâğıt duvar, açık gri zemin, beyaz masalar, kopya mavisi sandalyeler, tente kırmızısı saksılar */
  --o-duvar: #eef1f6; --o-supurgelik: #c9cfda; --o-zemin: #e4e8ef; --o-zemin-cizgi: #d6dbe4; --o-hali: #ffffff; --o-hali-ic: #dcdfe6;
  --o-masa-ust: #ffffff; --o-masa-on: #dcdfe6; --o-masa-koyu: #555b6b; --o-monitor: #1a1c22; --o-ekran: #8ea0f5;
  --o-sandalye: #2d46b9; --o-pano: #ffffff; --o-pano-cerceve: #1a1c22; --o-oda: #f7f8fa; --o-cam: rgb(45 70 185 / 0.28);
  --o-etiket: #555b6b; --o-levha: #ffffff; --o-kagit: #ffffff; --o-kagit-cizgi: #c3c8d2; --o-not: #ffe27a; --o-metal: #8d949c;
  --o-metal-acik: #c3c8cd; --o-bitki: #2f8a57; --o-saksi: #c8282f; --o-balon: #ffffff; --o-balon-cizgi: #dcdfe6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --o-duvar: #232733; --o-supurgelik: #343a48; --o-zemin: #1b1f28; --o-zemin-cizgi: #242a35; --o-hali: #262b36; --o-hali-ic: #333948;
    --o-masa-ust: #3a404d; --o-masa-on: #2e333e; --o-masa-koyu: #1f232b; --o-monitor: #0e1014; --o-sandalye: #4a5fc9;
    --o-pano: #2e333e; --o-pano-cerceve: #0e1014; --o-oda: #20242e; --o-cam: rgb(142 160 245 / 0.25); --o-etiket: #a3a9b8;
    --o-levha: #eef0f4; --o-metal: #5d636a; --o-metal-acik: #7b828a; --o-bitki: #3f9a66; --o-saksi: #e0393f;
  }
}

/* ---- Sayfa düzeni ---- */
.ofis-uygulama { min-height: 100vh; display: flex; flex-direction: column; }
.ofis-uygulama .ust { flex-wrap: wrap; }
.ofis-uygulama .ust-sag { flex-wrap: wrap; }
.canli { font-size: 12px; font-weight: 600; color: var(--kirmizi); display: inline-flex; align-items: center; gap: 5px; }
.canli::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); animation: yanip 1.6s infinite; }
.ofis-izgara { flex: 1; display: grid; gap: 14px; padding: 34px 16px 58px; align-items: start;
  grid-template-columns: 84px minmax(250px, 320px) minmax(0, 1fr) minmax(250px, 320px); }
.ofis-izgara.sol-kapali { grid-template-columns: 84px minmax(0, 1fr) minmax(250px, 320px); }
.ofis-izgara.sag-kapali { grid-template-columns: 84px minmax(250px, 320px) minmax(0, 1fr); }
.ofis-izgara.sol-kapali.sag-kapali { grid-template-columns: 84px minmax(0, 1fr); }
.sol-kapali .yan-sol, .sag-kapali .yan-sag { display: none; }

/* ---- Menü çubuğu ---- */
.menu { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; max-height: calc(100vh - 128px);
  overflow: auto; background: var(--kutu); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); }
.menu-oge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 0;
  border-radius: 10px; background: none; color: var(--soluk); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.menu-oge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-oge:hover { background: var(--zemin); color: var(--yazi); }
.menu-oge.etkin { background: var(--ana-acik); color: var(--ana); box-shadow: inset 3px 0 0 var(--ana); }
.menu-oge[aria-pressed="true"] { color: var(--ana); }
.menu-oge[aria-pressed="false"] { opacity: .55; }
.menu-oge.tehlike { color: var(--kirmizi); }
.menu-oge.tehlike.acik { background: var(--kirmizi); color: #fff; }
.menu-oge:focus-visible { outline: 2px solid var(--ana); outline-offset: -2px; }
.menu-bosluk { flex: 1; min-height: 10px; }
.menu-rozet { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10px;
  line-height: 18px; text-align: center; color: #fff; background: var(--ana); }
.menu-rozet.sari { background: var(--sari); }
.menu-rozet.kirmizi { background: var(--kirmizi); }
.menu-rozet.mavi { background: var(--mavi); }
.sahne-alan { display: grid; place-items: center; min-width: 0; }
.sahne { display: block; width: min(100%, 1500px, calc((100vh - 128px) * 1200 / 760)); height: auto; aspect-ratio: 1200 / 760; border-radius: 14px;
  background: var(--o-zemin); box-shadow: 0 14px 34px -18px rgb(26 28 34 / 0.35); user-select: none; font-family: var(--yazi-ailesi); }


.haber { position: fixed; inset: auto 0 0 0; z-index: 4; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px;
  border: 0; border-top: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font: inherit; cursor: pointer; text-align: left; }
.haber-etiket { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ana); white-space: nowrap; display: flex; gap: 6px; }
.haber-kayan { flex: 1; overflow: hidden; white-space: nowrap; font-size: 14px; }
.haber-yazi { display: inline-block; padding-left: 100%; animation: kay 40s linear infinite; }
.haber:hover .haber-yazi { animation-play-state: paused; }

.cekmece { position: fixed; z-index: 5; top: 72px; right: 16px; bottom: 54px; width: min(400px, calc(100vw - 32px)); overflow: auto;
  padding: 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kutu); box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
  animation: kaydir .25s ease-out; }
.cekmece-icerik { display: grid; gap: 10px; }
.cekmece-icerik p { margin: 0; }
.cekmece h3 { margin: 8px 0 0; }
.hedef { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.satir { display: grid; gap: 6px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--kutu); color: var(--yazi); font: inherit; cursor: pointer; }
.satir:hover { background: var(--zemin); }
.satir-baslik { font-weight: 600; overflow-wrap: anywhere; }
.talimat-pencere { width: min(520px, calc(100vw - 32px)); }

/* ---- Duvar ---- */
.duvar { fill: var(--o-duvar); }
.supurgelik { fill: var(--o-supurgelik); }
.pano { fill: var(--o-pano); }
.pano-cerceve { fill: var(--o-pano-cerceve); }
.gok-zemin { fill: #9fd3f5; transition: fill 2s; }
.gok.sabah .gok-zemin { fill: #f6c9a6; }
.gok.aksam .gok-zemin { fill: #ee9a6c; }
.gok.gece .gok-zemin { fill: #1c2448; }
.yildizlar { fill: #fff; opacity: 0; }
.gok.gece .yildizlar { opacity: .9; animation: yanip 4s infinite; }
.gunes { fill: #ffd34d; }
.gunes.ay { fill: #f1eee2; }
.bulut { fill: #fff; opacity: .85; animation: suzul 30s ease-in-out infinite alternate; }
.gok.gece .bulut { opacity: .15; }
.pencere-cerceve { fill: none; stroke: #fff; stroke-width: 6; }
.pencere-cizgi { stroke: #fff; stroke-width: 4; }
.pencere-esik { fill: #e3e7ee; }
.saat { fill: #ffffff; stroke: #1a1c22; stroke-width: 4; }
.saat-cizgi, .akrep, .yelkovan { stroke: #1a1c22; stroke-linecap: round; }
.saat-cizgi { stroke-width: 2; }
.akrep { stroke-width: 4; }
.yelkovan { stroke-width: 2.5; }
.saat-merkez { fill: #b42318; }
.kavanoz { fill: rgb(255 255 255 / 0.35); stroke: #8fa6b2; stroke-width: 3; }
.kavanoz-kapak { fill: #555b6b; }
.yarik { fill: #1a1c22; }
.pil { fill: rgb(255 255 255 / 0.35); stroke: #5b636b; stroke-width: 4; }
.pil-uc { fill: #5b636b; }
.dolgu { fill: #3f8f6f; transition: height .8s, y .8s, width .8s; }
.dolgu.uyari { fill: #d9962b; }
.dolgu.dolu { fill: #c8372a; animation: yanip 1.2s infinite; }
.esik-cizgi { stroke: #d9962b; stroke-width: 2; stroke-dasharray: 4 3; }
.esik-cizgi.koyu { stroke: #c8372a; }
.gosterge-yazi { font-size: 12px; font-weight: 700; fill: #1f2328; paint-order: stroke; stroke: rgb(255 255 255 / 0.85); stroke-width: 3px; }
.lamba-taban { fill: #4a4f57; }
.lamba-cam { fill: #9a9ea4; transition: fill .3s; }
.alarm .lamba-cam, .acil .lamba-cam { fill: #ff4d3d; animation: yanip .8s infinite; filter: drop-shadow(0 0 8px #ff4d3d); }
.acil-dugme { cursor: pointer; outline: none; }
.acil-kutu { fill: #f2c94c; stroke: #1a1c22; stroke-width: 2; }
.acil-mantar { fill: #d0322a; stroke: #7a1610; stroke-width: 3; transition: fill .2s; }
.acil-dugme:hover .acil-mantar, .acil-dugme:focus-visible .acil-mantar { fill: #ff4a3d; }
.acil .acil-mantar { fill: #ff4a3d; animation: yanip 1s infinite; }
.acil-yazi { font-size: 9px; font-weight: 800; fill: #1a1c22; letter-spacing: .08em; }

/* ---- Zemin ve eşyalar ---- */
.zemin { fill: var(--o-zemin); }
.zemin-cizgi { stroke: var(--o-zemin-cizgi); stroke-width: 2; }
.hali { fill: var(--o-hali); }
.hali-ic { fill: none; stroke: var(--o-hali-ic); stroke-width: 4; stroke-dasharray: 2 8; }
.etiket { font-size: 11px; font-weight: 700; letter-spacing: .08em; fill: var(--o-etiket); }
.etiket.koyu { fill: #1a1c22; }
.etiket.acik { fill: rgb(255 255 255 / 0.8); }
.pano-bos { font-size: 14px; font-style: italic; fill: rgb(26 28 34 / 0.45); }
.pano-bos.gizli { display: none; }
.kapi-boslugu { fill: #1a1c22; }
.kapi-kanat { fill: #8d949c; stroke: #3a3f4b; stroke-width: 2; }
.raf { fill: #555b6b; }
.raf-cizgi { stroke: #5d3e27; stroke-width: 4; }
.tezgah { fill: #9aa3ab; }
.kahve { fill: #3b3f46; }
.kahve-isik { fill: #5cd17a; animation: yanip 2s infinite; }
.sebil { fill: #b9e2f5; stroke: #7fa9bd; stroke-width: 2; }
.buhar { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .6; animation: buhar 2.4s ease-in-out infinite; }
.cop { fill: var(--o-metal); }
.yaprak { fill: var(--o-bitki); transform-box: fill-box; transform-origin: 50% 100%; animation: salin 6s ease-in-out infinite alternate; }
.saksi { fill: var(--o-saksi); }
.oda-zemin { fill: var(--o-oda); }
.cam { fill: none; stroke: var(--o-cam); stroke-width: 6; stroke-linejoin: round; }
.kapi-taban { fill: rgb(0 0 0 / 0.1); }
.kapi-kemer { fill: var(--o-metal); stroke: rgb(0 0 0 / 0.18); stroke-width: 1.5; }
.kapi-lamba { fill: #9a9ea4; }
.kapi.tariyor .kapi-lamba { fill: #48d38a; animation: yanip .8s infinite; filter: drop-shadow(0 0 6px #48d38a); }
.isin { fill: #48d38a; opacity: .25; }
.kapi.tariyor .isin { opacity: .9; animation: tara 1s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #48d38a); }
.posta { fill: #2f5d8a; }
.posta-yarik { fill: #12253a; }
.terazi, .terazi-kefe { fill: var(--o-metal-acik); }
.dolap { fill: var(--o-metal); }
.dolap-goz { fill: var(--o-metal-acik); }
.tepsi { cursor: pointer; outline: none; }
.tepsi-kutu { fill: #6b4a2e; }
.tepsi.sari .tepsi-rozet { fill: #d9962b; }
.tepsi.kirmizi .tepsi-rozet { fill: #c8372a; }
.tepsi-sayi { font-size: 12px; font-weight: 800; fill: #fff; }
.tepsi:not(.dolu) .tepsi-rozet, .tepsi:not(.dolu) .tepsi-sayi { opacity: 0; }
.tepsi.dolu .tepsi-rozet { animation: nabiz 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.karanlik { fill: #050a1a; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
.acil .karanlik { opacity: .5; }

/* ---- Masalar ve figürler ---- */
.masa-ust { fill: var(--o-masa-ust); }
.masa-ust.koyu, .masa-on { fill: var(--o-masa-on); }
.monitor, .klavye { fill: var(--o-monitor); }
.ekran-isik { fill: #59606a; }
.masa.calisiyor .ekran-isik { fill: var(--o-ekran); animation: yanip 1.1s infinite; filter: drop-shadow(0 0 4px var(--o-ekran)); }
.kupa { fill: #dcdfe6; }
.isim-levha { fill: var(--o-levha); stroke: rgb(0 0 0 / 0.12); }
.isim { font-size: 11px; font-weight: 700; fill: #1a1c22; }
.sandalye { fill: var(--o-sandalye); }
.figur { cursor: pointer; outline: none; transition: transform 3s linear; }
.figur .golge { fill: rgb(0 0 0 / 0.14); opacity: 0; }
.figur .bacak { fill: #2f3640; display: none; }
.figur.yuruyor .bacak, .figur.kahvede .bacak { display: block; }
.figur.yuruyor .golge, .figur.kahvede .golge { opacity: 1; }
.figur .yaka { fill: rgb(255 255 255 / 0.85); }
.figur .gozler { fill: #1f2328; transform-origin: 0 -23px; animation: kirp 5s infinite; }
.figur .agiz { fill: none; stroke: #6b3b2a; stroke-width: 1.6; stroke-linecap: round; }
.figur .beden { animation: nefes 4s ease-in-out infinite; }
.figur:hover .beden, .figur:focus-visible .beden { filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.9)); }
.figur.yuruyor .beden { animation: zipla .36s ease-in-out infinite alternate; }
.figur.yuruyor .bacak-sol { animation: adim .36s ease-in-out infinite alternate; }
.figur.yuruyor .bacak-sag { animation: adim .36s ease-in-out infinite alternate-reverse; }
.figur.calisiyor .kol { animation: yaz .26s ease-in-out infinite alternate; }
.figur.calisiyor .kol-sag { animation-delay: .13s; }
.figur.uyari .kol-sag { transform-origin: 19px -2px; animation: el-salla .7s ease-in-out infinite alternate; }
.figur.uyuyor .gozler { animation: none; transform: scaleY(.15); }
.figur.uyuyor .beden { animation: nefes 2.6s ease-in-out infinite; }
.balon { opacity: 0; transition: opacity .3s; pointer-events: none; }
.figur.konusuyor .balon { opacity: 1; }
.balon-zemin { fill: var(--o-balon); stroke: var(--o-balon-cizgi); }
.balon-yazi { font-size: 12px; fill: #222; }
.figur.uyari .balon-zemin { stroke: #c8372a; stroke-width: 2; }
.unlem, .zzz { display: none; }
.unlem circle { fill: #c8372a; }
.unlem text { font-size: 14px; font-weight: 900; fill: #fff; }
.figur.uyari .unlem { display: block; animation: yanip .9s infinite; }
.zzz { font-size: 13px; font-weight: 700; fill: #7fb2ea; }
.figur.uyuyor:not(.calisiyor) .zzz { display: block; animation: uyku 2.4s ease-in-out infinite; }
.figur.uyuyor .balon { display: none; }

/* ---- Kâğıtlar ---- */
.kagit { cursor: pointer; outline: none; transition: transform 1.1s cubic-bezier(.5, 0, .3, 1), opacity .8s; }
.kagitlar.aninda .kagit { transition: none; }
.kagit-zemin { fill: var(--o-kagit); stroke: var(--o-kagit-cizgi); stroke-width: 1; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25)); }
.kagit-cizgi { stroke: var(--o-kagit-cizgi); stroke-width: 1.4; }
.kagit.oncelik-1 .kagit-zemin, .kagit.oncelik-2 .kagit-zemin { stroke: #c8372a; stroke-width: 1.6; }
.kagit.d-sirada .kagit-zemin, .kagit.d-ertelendi .kagit-zemin { fill: var(--o-not); stroke: #d4b23c; }
.kagit.d-calisiyor .kagit-zemin { animation: titre 1.4s ease-in-out infinite; }
.kagit.d-yukseltildi .kagit-zemin, .kagit.d-olu .kagit-zemin { fill: #ffd9d4; stroke: #c8372a; }
.kagit:hover .kagit-zemin, .kagit:focus-visible .kagit-zemin { stroke: #2d46b9; stroke-width: 2.4; }
.kagit.gomulu { opacity: 0; }

/* ---- Süsler (dekor.js) ---- */
.kulaklik, .mikrofon { fill: none; stroke: #2f3640; stroke-width: 3; stroke-linecap: round; }
.mikrofon { stroke-width: 1.6; }
.kulaklik-kap { fill: #2f3640; }
.gozluk { fill: rgb(255 255 255 / 0.22); stroke: #1f2328; stroke-width: 1.5; }
.kravat { fill: #b42318; }
.direk { stroke: #6b5a48; stroke-width: 1.6; }
.bayrak { fill: #2d46b9; }
.esya-taban, .megafon-sap { fill: #4a4f57; }
.kure { fill: #5fa8d3; }
.kure-cizgi { fill: none; stroke: rgb(255 255 255 / 0.75); stroke-width: 1; }
.megafon { fill: #d0613d; }
.telefon, .telefon-ahize { fill: #2f3640; }
.zarf { fill: #ffffff; stroke: #c3c8d2; stroke-width: 1.2; }
.zarf-kapak { fill: none; stroke: #c3c8d2; stroke-width: 1.2; }
.ordek { fill: #ffd23f; }
.gaga { fill: #f08a24; }
.ordek-goz { fill: #222; }
.masa-golge { fill: rgb(0 0 0 / 0.09); }
.paspas { fill: #7a5a3c; }
.paspas-ok { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; stroke-linecap: round; }
.oda-hali { fill: var(--o-hali); stroke: var(--o-hali-ic); stroke-width: 3; stroke-dasharray: 2 6; }
.kitaplik { fill: #555b6b; }
.gece-ortu { fill: #10183a; opacity: 0; pointer-events: none; transition: opacity 2s; }
.sahne.aksam .gece-ortu { opacity: .12; }
.sahne.gece .gece-ortu { opacity: .24; }
.isik-havuzu { opacity: 0; pointer-events: none; transition: opacity 2s; }
.sahne.aksam .isik-havuzu, .sahne.gece .isik-havuzu { opacity: 1; }

/* ---- Yan paneller ---- */
.yan { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 128px); overflow: hidden;
  background: var(--kutu); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); }
.yan-baslik { padding: 14px 16px 12px; border-bottom: 1px solid var(--cizgi); }
.yan-baslik h2 { margin: 0; }
.yan-baslik .kucuk { margin-top: 2px; }
.konusmalar, .musteriler { list-style: none; margin: 0; padding: 8px; overflow: auto; flex: 1; display: grid; gap: 2px; align-content: start; }
.konusmalar .bos, .musteriler .bos { padding: 12px 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700;
  flex: none; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); }
.mesaj { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 8px 6px; border-radius: 10px; }
.mesaj.taze { animation: taze 3s ease-out; }
.mesaj-ust { display: flex; gap: 6px; align-items: baseline; font-size: 13px; min-width: 0; }
.mesaj-ust time { margin-left: auto; font-size: 11px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.mesaj-metin { margin: 3px 0 4px; padding: 7px 10px; border-radius: 4px 12px 12px 12px; background: var(--zemin); font-size: 14px;
  overflow-wrap: anywhere; white-space: pre-line; }
.mesaj.gercek .mesaj-metin { background: var(--ana-acik); }
.mesaj.olay .mesaj-metin { background: transparent; border: 1px dashed var(--cizgi); color: var(--soluk); font-size: 13px; }
.mesaj-tur { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ana); }
.ust-durum { font-weight: 500; }
.brifing-metin { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--zemin); font: inherit; font-size: 14px;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.musteri-alanlari { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px 2px; margin: 0 0 10px; }
.musteri-alanlari legend { font-size: 12px; color: var(--soluk); padding: 0 4px; }
.karar-aciklama { margin: 0; }
.kart-ek { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--zemin); font-size: 13px; }
.kural-bolum { display: grid; gap: 8px; padding-top: 4px; }
.kural-satir { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; }
.kural-satir label { margin: 0; }
.kural-satir input { margin: 0; }
.kural-tur { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--cizgi); }
.kural-tur select { margin: 0; font-size: 12px; padding: 5px 6px; }
.golge-kutu { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.golge-kutu input { width: auto; margin: 0; }
.dersler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ders { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--zemin); box-shadow: inset 3px 0 0 var(--ana); }
.ders-hata { box-shadow: inset 3px 0 0 var(--kirmizi); }
.ders p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ders .dugme { justify-self: start; }
.mesaj-kart { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--soluk); cursor: pointer; text-align: left;
  overflow-wrap: anywhere; }
.mesaj-kart:hover { color: var(--ana); text-decoration: underline; }
.m-sayaclar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.m-sayac { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--ana-acik); color: var(--ana); }
.m-sayac b { font-size: 20px; line-height: 1.2; }
.m-sayac span { font-size: 11px; font-weight: 600; }
.m-sayac.sari { background: var(--sari-acik); color: var(--sari); }
.m-sayac.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.deneme-notu { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; background: var(--sari-acik); color: var(--sari); }
.musteri { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%; padding: 10px 10px 10px 12px; border: 0;
  border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 var(--cizgi); }
.musteri:hover { background: var(--zemin); }
.musteri.m-ulasildi { box-shadow: inset 3px 0 0 var(--ana); }
.musteri.m-bekliyor { box-shadow: inset 3px 0 0 var(--sari); }
.musteri.m-takildi { box-shadow: inset 3px 0 0 var(--kirmizi); }
.musteri.m-iptal { opacity: .6; }
.musteri-avatar { width: 34px; height: 34px; background: var(--mavi); }
.m-ulasildi .musteri-avatar { background: var(--ana); }
.m-takildi .musteri-avatar { background: var(--kirmizi); }
.musteri-govde { display: grid; gap: 3px; min-width: 0; }
.musteri-ust { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.musteri-ust b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-etiket { flex: none; font-size: 11px; color: var(--soluk); border: 1px solid var(--cizgi); border-radius: 999px; padding: 0 7px; }
.musteri-hedef { font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.musteri-alt { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--soluk); }

/* ---- Hareketler ---- */
@keyframes yanip { 50% { opacity: .35; } }
@keyframes kay { to { transform: translateX(-100%); } }
@keyframes kaydir { from { opacity: 0; transform: translateX(24px); } }
@keyframes suzul { to { transform: translateX(60px); } }
@keyframes buhar { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: .7; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes salin { to { transform: rotate(4deg); } }
@keyframes tara { to { transform: translateY(56px); } }
@keyframes nabiz { 50% { transform: scale(1.18); } }
@keyframes kirp { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes nefes { 50% { transform: translateY(1px); } }
@keyframes zipla { to { transform: translateY(-3px); } }
@keyframes adim { from { transform: translateY(-3px); } to { transform: translateY(2px); } }
@keyframes yaz { to { transform: translateY(-3px); } }
@keyframes el-salla { from { transform: rotate(-150deg); } to { transform: rotate(-175deg); } }
@keyframes uyku { 0% { opacity: 0; transform: translate(0, 4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -10px); } }
@keyframes titre { 50% { transform: rotate(-4deg); } }
@keyframes taze { from { background: var(--ana-acik); } }

@media (max-width: 1400px) {
  .ofis-izgara, .ofis-izgara.sol-kapali, .ofis-izgara.sag-kapali, .ofis-izgara.sol-kapali.sag-kapali { grid-template-columns: 84px 1fr 1fr; }
  .menu { grid-row: 1 / span 2; }
  .sahne-alan { grid-column: 2 / -1; grid-row: 1; }
  .sol-kapali .yan-sag, .sag-kapali .yan-sol { grid-column: 2 / -1; }
  .yan { max-height: 560px; }
}
@media (max-width: 700px) {
  .ofis-izgara, .ofis-izgara.sol-kapali, .ofis-izgara.sag-kapali, .ofis-izgara.sol-kapali.sag-kapali { grid-template-columns: minmax(0, 1fr);
    padding: 8px 8px 56px; }
  .menu, .sahne-alan, .sol-kapali .yan-sag, .sag-kapali .yan-sol { grid-column: auto; grid-row: auto; }
  .menu { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
  .menu-oge { flex: none; min-width: 64px; }
  .menu-bosluk { display: none; }
  .sahne-alan { place-items: start; overflow-x: auto; }
  .sahne { width: 920px; max-width: none; }
  .cekmece { top: auto; left: 8px; right: 8px; bottom: 50px; width: auto; max-height: 70vh; }
  .ofis-uygulama .ust-sag .dugme { padding: 6px 10px; }
  .ofis-uygulama .marka { flex-wrap: wrap; min-width: 0; row-gap: 4px; } /* rozetler alt satıra insin, sayfa yana kaymasın */
}
@media (prefers-reduced-motion: reduce) {
  .sahne *, .haber-yazi, .canli::before, .cekmece, .mesaj { animation: none !important; transition: none !important; }
  .haber-yazi { padding-left: 0; }
}

.oneri-satir { display: grid; gap: 3px; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--zemin);
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.oneri-satir:hover, .oneri-satir:focus-visible { box-shadow: inset 3px 0 0 var(--ana); }
.oneri-baslik { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.oneri-baslik b { overflow-wrap: anywhere; }
.oneri-karar { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--zemin); }
.oneri-karar textarea { margin: 0; width: 100%; }
.oneri-fikir { grid-template-columns: auto 1fr auto; }
.proje-form label { display: grid; gap: 4px; }
.proje-form textarea, .proje-form input:not([type="checkbox"]) { margin: 0; width: 100%; }
.kirmizi-yazi { color: var(--kirmizi); }
.sesli-kayit { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding: 8px; border-radius: 10px; background: var(--zemin); }
.sesli-kayit p { margin: 0; }
.sesli-asistan { padding-left: 12px; border-left: 3px solid var(--ana); }
.gorsel-onizleme { width: 100%; max-width: 420px; height: auto; border-radius: 8px; border: 1px solid var(--cizgi); }
.tablo tfoot th { border-top: 1px solid var(--cizgi); border-bottom: 0; }
.dugmeler.alta { align-items: end; }
.proje-form input[type="color"] { width: 72px; height: 40px; padding: 2px; }
.kilavuz-metin { white-space: pre-wrap; font: inherit; font-size: 14px; max-height: 50vh; overflow: auto; margin: 0; }
.liste-yalin { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gorsel-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gorsel-izgara figure { margin: 0; display: grid; gap: 4px; }
.gorsel-izgara img { width: 100%; border-radius: 8px; border: 1px solid var(--o-cizgi, #ddd); }
.gorsel-izgara figcaption { font-size: 12px; opacity: .8; }

.logo-onizleme { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-onizleme img { border: 1px solid var(--cizgi, #ddd); border-radius: 12px; padding: 8px; background: #fff; }
.logo-onizleme img.koyu-zemin { background: #1d1a17; }

/* ---- İş zinciri: Bugün, Yeni iş, Müşteriler, Para (1.11.2026) ---- */
.cekmece { overflow-x: hidden; }
.cekmece.genis { width: min(760px, calc(100vw - 32px)); }
.cekmece-icerik { overflow-wrap: anywhere; }
.cekmece-icerik > * { min-width: 0; }
.menu-oge.vurgu { color: var(--ana); font-weight: 600; }
.diger-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.diger-menu[hidden] { display: none; }
.diger-menu .menu-oge { padding: 6px 2px; font-size: 11px; }
.diger-menu .menu-oge svg { width: 18px; height: 18px; }
.rozet.yesil { background: var(--yesil-acik); color: var(--yesil); }

.bugun-acik .sahne-alan, .bugun-acik .yan { display: none; }
.bugun-alan { grid-column: 2 / -1; background: var(--kutu); border: 1px solid var(--cizgi); border-radius: 16px; padding: 24px 28px 28px;
  box-shadow: var(--golge); display: grid; gap: 12px; align-content: start; min-width: 0; }
.bugun-alan[hidden] { display: none; }
.bugun-alan h1 { font-size: clamp(28px, 2.2vw + 14px, 40px); margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.bugun-alan h3 { margin: 12px 0 0; }
.bugun-ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bugun-ust p { margin: 2px 0 0; }
.dugme.buyuk { min-height: 46px; padding: 10px 22px; font-size: 16px; font-weight: 600; }

.sayac-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sayac-izgara.uc { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* üç kutu satırı doldurur, sağda boşluk kalmaz */
.sayac-izgara.bekleyen { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* kutular satırı doldurur: tek başına alt satıra düşen kutu olmaz */
.sifirlar { margin: 8px 2px 0; }
@media (max-width: 520px) {
  .sayac-izgara, .sayac-izgara.bekleyen, .sayac-izgara.uc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sayac-izgara > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* tek kalan kutu satırı doldurur */
  .sayac-kart { padding: 12px 12px 14px; }
  .sayac-kart b { font-size: 28px; }
  .sayac-kart small { font-size: 11.5px; }
}
.sayac-izgara.dort { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sayac-kart { display: grid; gap: 2px; align-content: start; text-align: left; padding: 16px 18px 18px; border-radius: 14px;
  border: 1px solid var(--cizgi); border-top: 3px solid var(--cizgi); background: var(--kutu); color: var(--yazi); font: inherit;
  font-variant-numeric: tabular-nums; box-shadow: var(--golge); transition: transform .12s, box-shadow .12s; }
button.sayac-kart:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(26 28 34 / 0.08), 0 14px 28px -14px rgb(26 28 34 / 0.35); filter: none; }
button.sayac-kart { cursor: pointer; }
button.sayac-kart:hover { filter: brightness(0.97); }
button.sayac-kart:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.sayac-kart b { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.sayac-kart span { font-weight: 600; }
.sayac-kart small { color: var(--soluk); font-size: 12px; }
.sayac-kart.sari { background: var(--kutu); border-color: var(--cizgi); border-top-color: var(--tente); }
.sayac-kart.sari b { color: var(--tente); }
.sayac-kart.kirmizi { background: var(--tente-acik); border-color: var(--tente); border-top-color: var(--tente); }
.sayac-kart.kirmizi b { color: var(--kirmizi); }
.sayac-kart.mavi { background: var(--kutu); border-color: var(--cizgi); border-top-color: var(--mavi); }
.sayac-kart.mavi b { color: var(--mavi); }
.sayac-kart.ana { border-top-color: var(--cizgi); }
.sayac-kart.ana b { color: var(--murekkep); }
.sayac-kart.sakin b { color: var(--soluk); }

.is-liste, .dosya-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.is-satir { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kutu); color: var(--yazi); font: inherit; text-align: left; cursor: pointer; }
.is-satir:hover { background: var(--zemin); }
.is-satir:focus-visible { outline: 2px solid var(--ana); outline-offset: 1px; }
.is-ad { display: grid; gap: 2px; min-width: 0; }
.is-ad span { color: var(--soluk); font-size: 13px; }
.is-ek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dosya-satir, .fatura-kart { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kutu); }
.fatura-bilgi { margin: 0; padding: 10px 12px; background: var(--zemin); border-radius: 8px; font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.dugmeler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.uyari { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--sari-acik); color: var(--yazi); border: 1px solid var(--sari); }
.basari { color: var(--yesil); font-weight: 600; }
.nasil { border-top: 1px solid var(--cizgi); padding-top: 10px; }
.nasil summary { cursor: pointer; font-weight: 600; color: var(--ana); }
.nasil ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }

.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.form-izgara label { display: grid; gap: 4px; font-size: 13px; color: var(--soluk); }
.form-izgara label.golge-kutu { display: flex; color: var(--yazi); }
.form-izgara .tam, .form-izgara details { grid-column: 1 / -1; }
.form-izgara input:not([type="checkbox"]), .form-izgara select, .form-izgara textarea { width: 100%; margin: 0; }
.adim { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.adim h3 { margin: 0; color: var(--ana); }
.kanal-secim { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px; margin: 0; }
.kanal-secim legend { font-size: 13px; color: var(--soluk); padding: 0 4px; }
.katalog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.katalog-kart { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--kutu); color: var(--yazi); font: inherit; cursor: pointer; }
.katalog-kart:hover { background: var(--zemin); }
.katalog-kart[aria-pressed="true"] { border: 2px solid var(--ana); background: var(--ana-acik); padding: 11px; }
.katalog-kart .fiyat { font-weight: 600; color: var(--ana); }
.is-ozet { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--zemin); font-size: 14px; }
.is-ozet:empty { display: none; }

@media (max-width: 1400px) {
  .bugun-alan { grid-column: 2 / -1; grid-row: 1 / span 2; }
}
@media (max-width: 700px) {
  .bugun-alan { grid-column: auto; grid-row: auto; padding: 16px; }
  .diger-menu { flex-direction: row; border: 0; padding: 0; }
  .cekmece.genis { width: auto; }
}
.proje-form label.golge-kutu { display: flex; color: var(--yazi); }

/* Çıktılar çekmecesi */
.cikti-liste { display: grid; gap: 12px; }
.cikti-liste .satir-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cikti-liste .satir-ust small { margin-left: auto; }
.cikti-metin { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.55; max-height: 320px; overflow: auto; margin: 8px 0 0; }

/* Kaliteci: telefonda da bütün sütunlar (tablo yatay kayar); satır tıklanmaz */
.kalite-tablo tbody tr { cursor: default; }
@media (max-width: 600px) { .kalite-tablo th, .kalite-tablo td { display: table-cell !important; } }
.kalite-uyari { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.cikti-liste textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kutu); color: inherit; }
.cikti-liste details.duzelt { display: grid; gap: 8px; flex: 1 1 260px; }

/* ---- Hizmetler ve kanallar (modul.js) ---- */
.modul-liste, .sohbet-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.modul-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--cizgi); }
.modul-satir > span:first-child { flex: 1 1 180px; font-weight: 600; }
.modul-kutu, .kanal-kutu { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--zemin); }
.kanal-kutu summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.kod-satir { display: block; overflow-x: auto; white-space: pre; padding: 8px; border-radius: 8px; background: var(--kutu); border: 1px solid var(--cizgi); font-size: 12px; }
.konusma { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.konusma li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kutu); min-width: 0; }
.konusma li p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.konusma .konusma-kisi { background: var(--zemin); }
.konusma .konusma-yetkili { border-color: var(--ana); }

/* ---- Operasyon (operasyon.js) ---- */
.ops-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ops-liste li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kutu); min-width: 0; overflow-wrap: anywhere; }
.ops-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ops-akislar { display: grid; gap: 8px; }
.ops-akis { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px; background: var(--kutu); }
.ops-akis summary { cursor: pointer; min-height: 32px; }
.ops-akis .cubuk { margin: 4px 0 8px; }
.ops-adimlar { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Şubeler */
.sube-liste { display: flex; flex-direction: column; gap: 8px; }
.sube { border: 1px solid var(--cizgi, #ddd); border-radius: 10px; padding: 8px 12px; }
.sube summary { cursor: pointer; min-height: 32px; }
.sube summary .rozet { margin-left: 6px; }

/* ---- Yönetim: sekmeler, günlük satırları, anahtar kutusu, durum listesi ---- */
.sekmeler { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.sekme { font: inherit; font-size: 14px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--kutu); color: var(--yazi); cursor: pointer; }
.sekme:hover { background: var(--zemin); }
.sekme.etkin { background: var(--murekkep); border-color: var(--murekkep); color: var(--murekkep-yazi); font-weight: 700; }
.sekme:focus-visible { outline: 3px solid var(--ana); outline-offset: 2px; }
.yonetim-govde { display: grid; gap: 12px; }
.yonetim-govde > div { display: grid; gap: 12px; min-width: 0; }
.yonetim-govde h3 { margin: 6px 0 0; }
.yonetim-govde .kalite-tablo td { overflow-wrap: anywhere; }
label.satir-ici { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--yazi); font-size: 13px; white-space: nowrap; }
label.satir-ici input[type="checkbox"] { width: auto; margin: 0; }
label.satir-ici select { width: auto; margin: 0; min-height: 30px; padding: 3px 8px; font-size: 13px; }
.anahtar-kutu { display: grid; gap: 8px; padding: 14px 16px; border: 2px solid var(--tente); border-radius: 12px; background: var(--tente-acik); }
.anahtar-kutu code { font-size: 15px; padding: 10px 12px; border-radius: 8px; background: var(--kutu); border: 1px solid var(--cizgi); overflow-wrap: anywhere; user-select: all; }
.durum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.durum-liste li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; }
.durum-liste .rozet { justify-self: start; }
.gunluk-liste { display: grid; gap: 2px; }
.gunluk-satir { border-left: 3px solid var(--cizgi); border-radius: 4px; background: var(--kutu); }
.gunluk-satir.d-hata { border-left-color: var(--kirmizi); }
.gunluk-satir.d-uyari { border-left-color: var(--sari); }
.gunluk-satir summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 10px; cursor: pointer; font-size: 13px; line-height: 1.5; }
.gunluk-satir summary:hover { background: var(--zemin); }
.gunluk-satir time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gunluk-kaynak { font-weight: 700; color: var(--soluk); }
.gunluk-mesaj { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.gunluk-alan { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 8px 12px 12px; font-size: 13px; }
.gunluk-alan dt { color: var(--soluk); }
.gunluk-alan dd { margin: 0; overflow-wrap: anywhere; }
.gunluk-ornek { overflow-wrap: anywhere; font-size: 13px; }
.tek-satir { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adimlar { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
@media (max-width: 640px) {
  .sekmeler { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .sekme { white-space: nowrap; flex: 0 0 auto; }
  .gunluk-alan { grid-template-columns: 1fr; }
  .gunluk-alan dt { margin-top: 6px; }
}