/* Sahabulut demosu: tezgâhta teknisyen telefonu, duvarda operasyon ekranı (harita + iş emirleri). */
.sdemo--sahabulut { --sb: #d97706; --sb-l: #fef3c7; --ok: #16a34a; }

/* Telefon: iş emri */
.sb-phone { font-size: 5.4cqw; background: #f5f5f4; }
.sb-job { flex: none; margin: 1cqh 4.5cqw 0; padding: 1.8cqh 4cqw; border-radius: 4cqw; background: #1c1917; color: #fff; display: flex; flex-direction: column; gap: .5cqh; }
.sb-job small { color: #fbbf24; font-weight: 700; font-size: 4.4cqw; } .sb-job b { font-size: 7.4cqw; letter-spacing: -.02em; } .sb-job span { font-size: 4.6cqw; color: #d6d3d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-here { flex: none; position: relative; margin: 1.6cqh 4.5cqw 0; height: 9cqh; display: grid; border-radius: 4cqw; background: var(--sb); color: #fff; font-weight: 800; font-size: 6cqw; transition: background .35s; }
.sb-here i { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; transition: opacity .3s; white-space: nowrap; }
.sb-h2 { opacity: 0; font-size: 4.6cqw; }
.s-here .sb-here { background: var(--ok); } .s-here .sb-h1 { opacity: 0; } .s-here .sb-h2 { opacity: 1; }
.sb-phone h5 { margin: 2cqh 6cqw .8cqh; font-size: 5cqw; color: #57534e; }
.sb-list { list-style: none; margin: 0 4.5cqw; padding: 0; display: flex; flex-direction: column; gap: 1cqh; }
.sb-c { height: 6.6cqh; display: flex; align-items: center; gap: 3cqw; padding: 0 3.4cqw; border-radius: 3cqw; background: #fff; font-weight: 600; font-size: 5cqw; white-space: nowrap; overflow: hidden; transition: background .3s, color .3s; }
.sb-c i { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.8cqw; border: .5cqw solid #d6d3d1; color: transparent; font-style: normal; font-size: 4.6cqw; font-weight: 800; transition: background .25s, border-color .25s, color .25s, transform .3s; }
.s-c1 .sb-c--1 i, .s-c2 .sb-c--2 i, .s-c3 .sb-c--3 i { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.12); }
.s-c1 .sb-c--1, .s-c2 .sb-c--2, .s-c3 .sb-c--3 { color: #78716c; text-decoration: line-through; }
.sb-photo { flex: none; margin: 1.4cqh 4.5cqw 0; height: 10cqh; display: flex; align-items: center; gap: 3cqw; padding: 0 3cqw; border-radius: 3cqw; border: .4cqw dashed #d6d3d1; color: #a8a29e; font-size: 4.6cqw; transition: border-color .3s, color .3s, background .3s; }
.sb-ph { width: 14cqw; height: 7cqh; border-radius: 2cqw; background: #e7e5e4; transform: scale(.5); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.3,1.4), opacity .3s;
         background-image: linear-gradient(135deg, #78716c 0 30%, #a8a29e 30% 55%, #57534e 55%); }
.s-photo .sb-photo { border-style: solid; border-color: #bbf7d0; background: #f0fdf4; color: #166534; } .s-photo .sb-ph { transform: none; opacity: 1; }
.sb-finish { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 3cqh; height: 9cqh; display: grid; border-radius: 4cqw; background: #1c1917; color: #fff; font-weight: 800; font-size: 6cqw; transition: background .35s; }
.sb-finish i { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; transition: opacity .3s; }
.sb-f2 { opacity: 0; }
.s-finish .sb-finish { background: var(--ok); } .s-finish .sb-f1 { opacity: 0; } .s-finish .sb-f2 { opacity: 1; }

/* Duvar: operasyon ekranı */
.so { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.4cqh; padding: 3cqh 2.2cqw; background: #12100e; color: #e7e5e4; font-size: 1.8cqw; }
.so-top { flex: none; display: flex; align-items: center; justify-content: space-between; }
.so-logo { display: flex; align-items: center; gap: 1cqw; font-weight: 800; font-size: 2.6cqw; color: #fff; }
.so-logo i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; background: var(--sb); font-style: normal; font-size: 2cqw; }
.so-kpi { display: flex; align-items: center; gap: .8cqw; color: #a8a29e; font-weight: 600; }
.so-kpi b { position: relative; color: #fff; font-size: 2.4cqw; } .so-kpi b i { font-style: normal; transition: opacity .35s; } .so-k2 { position: absolute; inset-inline-start: 0; opacity: 0; }
.s-count .so-k1 { opacity: 0; } .s-count .so-k2 { opacity: 1; color: #4ade80; }
.so-prog { width: 12cqw; height: 1cqh; border-radius: 99px; background: #292524; overflow: hidden; }
.so-prog i { display: block; height: 100%; width: 58%; background: #4ade80; transition: width .8s ease; } .s-count .so-prog i { width: 67%; }
.so-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6cqw; }
.so-map { position: relative; border-radius: 1.4cqw; overflow: hidden; background: #1f1c19; }
.so-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.so-map path { fill: none; stroke: #3a3530; stroke-width: 1.6; } .so-map .so-river { stroke: #1e3a5f; stroke-width: 3; }
.so-pin { position: absolute; width: 4.2cqw; height: 4.2cqw; margin: -4.2cqw 0 0 -2.1cqw; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #78716c; box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.4); transition: background .4s, transform .45s cubic-bezier(.2,.9,.3,1.6); }
.so-pin i { display: grid; place-items: center; width: 100%; height: 100%; rotate: 45deg; font-style: normal; font-weight: 800; font-size: 1.8cqw; color: #fff; }
.so-pin--me { background: var(--sb); } .so-pin--a { background: #3b82f6; } .so-pin--b { background: var(--sb); }
.so-pin--me::after { content: ""; position: absolute; inset: -1.2cqw; border-radius: 50%; border: .3cqw solid currentColor; color: #4ade80; opacity: 0; }
.s-done .so-pin--me { background: var(--ok); transform: scale(1.25); }
.s-done .so-pin--me::after { animation: so-ping 1.2s ease-out 2; }
@keyframes so-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.so-list { display: flex; flex-direction: column; gap: 1.4cqh; min-width: 0; }
.so-list h4 { margin: 0; font-size: 2cqw; color: #a8a29e; }
.so-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1cqw; row-gap: .4cqh; align-items: center; padding: 1.6cqh 1.2cqw; border-radius: 1cqw; background: #1f1c19; border: .2cqw solid #2c2724; transition: background .4s, border-color .4s; }
.so-row small { color: #78716c; font-weight: 700; } .so-row b { font-size: 1.9cqw; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-row span { color: #a8a29e; grid-column: 1 / 2; }
.so-row em { font-style: normal; font-weight: 700; justify-self: end; position: relative; display: grid; color: #fbbf24; }
.so-row--a em { color: #60a5fa; } .so-row--c em { color: #a8a29e; }
.so-row em span { grid-area: 1 / 1; grid-column: auto; color: inherit; transition: opacity .35s; white-space: nowrap; text-align: end; }
.so-s2 { opacity: 0; }
.so-row--me { border-color: rgba(217,119,6,.5); }
.s-done .so-row--me { background: rgba(22,163,74,.14); border-color: rgba(74,222,128,.6); } .s-done .so-row--me em { color: #4ade80; }
.s-done .so-s1 { opacity: 0; } .s-done .so-s2 { opacity: 1; }