/* =====================================================================
   MAKS YAZILIM — canlı arayüz sahneleri (ürün + hizmet)
   Tüm ölçüler kapsayıcıya göre (cqw / em) ölçeklenir. Animasyonlar yalnızca
   html.anim (seviye >= 2) ve sahne ekrandayken (.is-on) çalışır; aksi halde
   sahne son (dolu) haliyle durağan görünür.
   ===================================================================== */

.scene, .ss { --tx: #F3F3F4; --tx-2: #A9A9B1; --tx-3: #84848C; --ln: rgba(255,255,255,.08); --ln-2: rgba(255,255,255,.15); color: var(--tx); font-family: var(--f-b); line-height: 1.3; color-scheme: dark; }
.scene { position: relative; width: 100%; container-type: inline-size; }
.scene.full { aspect-ratio: 16 / 11.2; }
.scene.mini { position: absolute; inset: 0; }
.scene *, .ss * { box-sizing: border-box; }

/* Çerçeve */
.sc-frame { position: absolute; left: 0; top: 0; width: 88cqw; border-radius: 1.6cqw; background: #0C0C0F; border: 1px solid var(--ln-2); overflow: hidden; box-shadow: 0 5cqw 9cqw -5cqw rgba(0,0,0,.9); }
.flip .sc-frame { left: auto; right: 0; }
.sc-bar { display: flex; align-items: center; gap: .8cqw; height: 3.6cqw; padding: 0 1.8cqw; border-bottom: 1px solid var(--ln); font: 500 1.35cqw var(--f-m); color: var(--tx-3); }
.sc-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(255,255,255,.14); flex: none; }
.sc-bar span { margin-left: 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-scr { position: relative; aspect-ratio: 16 / 10; background: #0D0E11; overflow: hidden; }
.sc-scr picture { position: absolute; inset: 0; }
.sc-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Ana parça (40em × 25em tuval) */
.m { position: absolute; overflow: hidden; background: #0D0E11; }
.no-shot .m { left: 1px; top: calc(3.6cqw + 1px); width: calc(88cqw - 2px); aspect-ratio: 16 / 10; font-size: 2.195cqw; border-radius: 0 0 1.5cqw 1.5cqw; }
.no-shot.flip .m { left: calc(12cqw + 1px); }
.has-shot .m { right: 0; bottom: 1.5cqw; width: 44cqw; aspect-ratio: 16 / 10; font-size: 1.1cqw; border-radius: 1.4cqw; border: 1px solid var(--ln-2); box-shadow: 0 4cqw 8cqw -3cqw rgba(0,0,0,.85); }
.has-shot.flip .m { right: auto; left: 0; }
.mini .m { inset: 0; font-size: 2.5cqw; }

/* Yan kart ve bildirim */
.sd { position: absolute; right: 0; bottom: 0; width: 31cqw; padding: 1.1em; border-radius: .9em; background: rgba(22,22,26,.98); border: 1px solid var(--ln-2); box-shadow: 0 4cqw 8cqw -3cqw rgba(0,0,0,.85); font-size: 1.55cqw; display: grid; gap: .8em; }
.flip .sd { right: auto; left: 0; }
.has-shot .sd { display: none; }
.ts { position: absolute; left: 5cqw; bottom: 0; width: 42cqw; display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: .9em; background: rgba(22,22,26,.98); border: 1px solid var(--ln-2); box-shadow: 0 3cqw 6cqw -3cqw rgba(0,0,0,.9); font-size: 1.5cqw; }
.flip .ts { left: auto; right: 5cqw; }
.has-shot .ts { bottom: 2cqw; }
.ts .ti { width: 2.2em; height: 2.2em; flex: none; border-radius: .6em; display: grid; place-items: center; background: rgba(61,214,140,.14); color: var(--ok); }
.ts .ti svg { width: 1.2em; height: 1.2em; }
.ts b { display: block; font-weight: 600; font-size: .98em; }
.ts small { display: block; color: var(--tx-3); font-size: .84em; }
.anim .is-on .ts { animation: tsIn 7s var(--e-out) infinite; }
@keyframes tsIn { 0%, 30% { opacity: 0; transform: translateY(1em); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Ortak atomlar */
.m .card { background: rgba(255,255,255,.035); border: 1px solid var(--ln); border-radius: .7em; padding: .9em; }
.lbl { font: 500 .68em/1.2 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.m .h { font: 600 .95em/1.25 var(--f-b); }
.m .row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.pill { display: inline-flex; align-items: center; gap: .3em; justify-self: start; padding: .28em .7em; border-radius: 1em; font: 600 .7em/1.2 var(--f-b); white-space: nowrap; }
.pill.ok { background: rgba(61,214,140,.14); color: var(--ok); }
.pill.p { background: rgba(var(--p1-rgb, 227,18,45), .16); color: var(--p1, #FF4F63); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: .8em; font-size: .88em; color: var(--tx-2); }
.kv b { color: var(--tx); font-weight: 600; }
.pos { color: var(--ok) !important; }
.note { font-size: .78em; color: var(--tx-3); line-height: 1.4; }
.live-dot { display: inline-flex; align-items: center; gap: .4em; font: 500 .72em var(--f-m); color: var(--ok); }
.live-dot::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .22em rgba(61,214,140,.18); }
.anim .is-on .live-dot::before { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.m .bars { display: grid; gap: .35em; }
.m .bars span, .sd .bars span { display: flex; align-items: center; gap: .5em; }
.bars span i { flex: 1; height: .45em; border-radius: 1em; background: rgba(255,255,255,.08); position: relative; overflow: hidden; display: block; }
.bars span i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--p1, var(--red)), var(--acc)); transform-origin: left; }
.bars em { font: 500 .66em var(--f-m); color: var(--tx-3); width: 1.8em; }
.anim .is-on .bars span i::before { animation: grow 8s var(--e-io) infinite; }
@keyframes grow { 0% { transform: scaleX(.45); } 70%, 100% { transform: scaleX(1); } }
.ring { position: relative; width: 4.6em; height: 4.6em; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3.6; }
.ring circle.v { stroke: var(--p1, var(--red)); stroke-dasharray: 70 100; stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 1.25em var(--f-d); }
.ring b small { font-size: .55em; color: var(--tx-3); margin-left: .1em; }
.rc { font: 600 1em var(--f-m); }

/* ---------- Lojistik ---------- */
.m-loj { background: #0E1116 radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.2px) 0 0 / 1.3em 1.3em; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-loj .road { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2.2; stroke-dasharray: 6 7; }
.m-loj .road-done { fill: none; stroke: var(--p1, var(--red)); stroke-width: 3; stroke-linecap: round; opacity: .45; }
.m-loj .stop { fill: #fff; }
.m-loj .trk circle { fill: var(--p1, var(--red)); stroke: rgba(255,255,255,.25); stroke-width: 5; paint-order: stroke; }
.m-loj .trk path { fill: #fff; }
.m-loj .city { position: absolute; transform: translateY(-50%); font: 500 .7em var(--f-m); color: var(--tx-2); background: rgba(13,14,17,.85); padding: .2em .5em; border-radius: .4em; white-space: nowrap; }
.m-loj .sfr { position: absolute; left: 1em; top: 1em; width: 12.5em; display: grid; gap: .35em; }
.m-loj .sfr b { font: 600 .9em var(--f-m); }
.m-loj .sfr small { font-size: .75em; color: var(--tx-3); }
.m-loj .dol { position: absolute; right: 1em; bottom: 1em; width: 13em; display: grid; gap: .55em; }
.m-loj .dol b { font: 700 1.2em var(--f-d); }
.sd-loj .truck-fill { display: flex; align-items: center; gap: .6em; color: var(--p1, var(--red)); font-size: 1.5em; }
.sd-loj .truck-fill span { flex: 1; height: .42em; border-radius: 1em; background: rgba(255,255,255,.08); overflow: hidden; }
.sd-loj .truck-fill span i { display: block; height: 100%; background: var(--p1, var(--red)); transform-origin: left; }
.anim .is-on .sd-loj .truck-fill span i { animation: grow 8s var(--e-io) infinite; }

/* ---------- Muhasebe & İnşaat ---------- */
.m-muh .prj { position: absolute; left: 1em; top: 1em; bottom: 1em; width: 16.5em; display: flex; flex-direction: column; gap: .55em; }
.m-muh .bld { flex: 1; display: flex; flex-direction: column-reverse; gap: .28em; padding: .3em 1.2em 0; }
.m-muh .bld span { flex: 1; border-radius: .25em; background: rgba(255,255,255,.04); border: 1px solid var(--ln); overflow: hidden; position: relative; }
.m-muh .bld span i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--p1, var(--red)) 0 64%, rgba(255,90,95,.55) 64% 100%); transform: scaleX(var(--c)); transform-origin: left; }
.anim .is-on .m-muh .bld span i { animation: floor 7s var(--e-out) infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes floor { 0% { transform: scaleX(0); } 22%, 92% { transform: scaleX(var(--c)); } 100% { transform: scaleX(var(--c)); opacity: .2; } }
.m-muh .leg { display: flex; gap: 1em; font-size: .68em; color: var(--tx-2); }
.m-muh .leg i { display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .35em; vertical-align: -.1em; }
.m-muh .leg .in { background: var(--p1, var(--red)); } .m-muh .leg .out { background: rgba(255,90,95,.6); }
.m-muh .mv { position: absolute; right: 1em; top: 1em; bottom: 1em; left: 18.5em; display: flex; flex-direction: column; gap: .4em; }
.m-muh .mv small { font-size: .7em; color: var(--tx-3); }
.m-muh ul { display: grid; gap: .1em; margin-top: .3em; }
.m-muh li { display: grid; grid-template-columns: 1.5em 1fr auto; gap: .6em; align-items: center; padding: .55em 0; border-bottom: 1px solid var(--ln); font-size: .8em; color: var(--tx-2); }
.m-muh li b { font: 600 .92em var(--f-m); color: var(--tx); white-space: nowrap; }
.m-muh .dir { width: 1.5em; height: 1.5em; border-radius: .4em; display: grid; place-items: center; font-weight: 700; }
.m-muh .dir.in { background: rgba(61,214,140,.15); color: var(--ok); }
.m-muh .dir.out { background: rgba(255,90,95,.15); color: var(--bad); }
.anim .is-on .m-muh li { animation: rowIn 8s var(--e-out) infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes rowIn { 0% { opacity: 0; transform: translateX(1.2em); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.m-muh .bal { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: .72em; color: var(--ok); padding: .6em .7em; border-radius: .5em; background: rgba(61,214,140,.08); }
.sd-muh .spark { width: 100%; height: 3.2em; }
.sd-muh .spark path { fill: none; stroke: var(--p1, var(--red)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Saha denetimi (Baca) ---------- */
.m-den { background: #0D0E11 radial-gradient(60% 80% at 80% 50%, rgba(var(--p1-rgb, 227,18,45), .1), transparent 70%); }
.m-den .frm { position: absolute; left: 1em; top: 1em; bottom: 1em; width: 18em; display: flex; flex-direction: column; gap: .8em; }
.m-den ul { display: grid; gap: .55em; }
.m-den li { display: flex; align-items: center; gap: .65em; font-size: .86em; padding: .55em .6em; border-radius: .5em; background: rgba(255,255,255,.03); }
.m-den .bx { width: 1.35em; height: 1.35em; border-radius: .35em; display: grid; place-items: center; background: rgba(var(--p1-rgb, 227,18,45), .18); border: 1.5px solid var(--p1, var(--red)); color: var(--p1, var(--red)); flex: none; }
.m-den .bx svg { width: .9em; height: .9em; stroke-width: 3.2; }
.anim .is-on .m-den .bx svg { animation: tick 7s steps(1) infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes tick { 0% { opacity: 0; } 8%, 94% { opacity: 1; } 100% { opacity: 0; } }
.m-den .sig-line { margin-top: auto; display: flex; align-items: flex-end; gap: .6em; font-size: .7em; color: var(--tx-3); }
.m-den .sig-line i { flex: 1; height: 1.6em; border-bottom: 1px dashed var(--ln-2); background: no-repeat left bottom / 70% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M2 16 C 12 2, 18 18, 26 8 S 40 4, 46 12 S 62 18, 70 6 S 88 10, 98 4' fill='none' stroke='%23A9A9B1' stroke-width='1.6'/%3E%3C/svg%3E"); }
.m-den .doc { position: absolute; right: 1.4em; top: 1.3em; bottom: 1.3em; width: 16.5em; background: #F4F3EF; border-radius: .35em; padding: 1.1em 1.1em 1em; color: #101013; display: flex; flex-direction: column; gap: .6em; box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.7); transform: rotate(1.4deg); }
.m-den .doc-h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #101013; padding-bottom: .5em; margin-bottom: .2em; }
.m-den .doc-h b { font: 700 .72em var(--f-m); letter-spacing: .06em; }
.m-den .doc-h small { font: 500 .6em var(--f-m); color: #6B6B73; }
.m-den .l { display: block; height: .42em; width: var(--w); background: #D5D3CC; border-radius: .2em; }
.m-den .doc-f { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.m-den .qr { display: grid; grid-template-columns: repeat(9, 1fr); width: 5.4em; height: 5.4em; padding: .3em; background: #fff; border: 1px solid #D5D3CC; }
.m-den .qr i.on { background: #101013; }
.m-den .stamp { font: 800 .95em var(--f-m); letter-spacing: .1em; color: #13874E; border: .17em solid #13874E; padding: .25em .55em; border-radius: .3em; transform: rotate(-12deg); }
.anim .is-on .m-den .stamp { animation: stamp 7s var(--e-out) infinite; }
@keyframes stamp { 0%, 32% { opacity: 0; transform: rotate(-12deg) scale(1.9); } 38%, 94% { opacity: 1; transform: rotate(-12deg) scale(1); } 100% { opacity: 0; transform: rotate(-12deg); } }
.sd-den .docs { display: flex; gap: .45em; padding: .3em 0; }
.sd-den .docs i { width: 2.1em; height: 2.7em; border-radius: .25em; background: #F4F3EF; box-shadow: 0 .4em .8em -.3em rgba(0,0,0,.6); transform: rotate(calc((var(--i) - 2) * 5deg)); }

/* ---------- Mobil rezervasyon (FitPro) ---------- */
.m-rez { background: #0D0E11 radial-gradient(50% 70% at 25% 50%, rgba(var(--p1-rgb, 227,18,45), .12), transparent 70%); }
.m-rez .ph { position: absolute; left: 4em; top: 1.1em; bottom: 1.1em; aspect-ratio: 9 / 18.4; border-radius: 1.9em; background: #050506; padding: .45em; border: 1px solid var(--ln-2); box-shadow: 0 1.5em 3em -1.5em rgba(0,0,0,.9); }
.m-rez .ph-scr { height: 100%; border-radius: 1.5em; background: #131317; padding: 1.2em .75em .75em; display: flex; flex-direction: column; gap: .5em; font-size: .7em; }
.m-rez .ph-top { display: flex; justify-content: space-between; align-items: center; }
.m-rez .ph-top b { font: 650 1.2em var(--f-d); }
.m-rez .av { width: 2.2em; height: 2.2em; flex: none; border-radius: 50%; background: rgba(var(--p1-rgb, 227,18,45), .2); color: var(--p1, var(--red)); display: grid; place-items: center; font: 700 .8em var(--f-b); }
.m-rez .wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: .28em; }
.m-rez .wk span { text-align: center; padding: .4em 0; border-radius: .6em; background: rgba(255,255,255,.04); font: 500 .72em/1.25 var(--f-m); color: var(--tx-3); }
.m-rez .wk b { display: block; font: 600 1.35em var(--f-b); color: var(--tx); }
.m-rez .wk .on { background: var(--p1, var(--red)); color: rgba(0,0,0,.6); }
.m-rez .wk .on b { color: #0B0B0D; }
.m-rez .sl { display: flex; justify-content: space-between; align-items: center; padding: .62em .7em; border-radius: .6em; border: 1px solid var(--ln); font: 500 .9em var(--f-m); position: relative; overflow: hidden; }
.m-rez .sl em { font: 600 .85em var(--f-b); color: var(--ok); }
.m-rez .sl.busy { opacity: .4; }
.m-rez .sl.busy em { color: var(--tx-3); }
.m-rez .sl.pick b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .35em; background: var(--p1, var(--red)); color: #0B0B0D; font: 650 .95em var(--f-b); }
.m-rez .sl.pick b svg { width: 1em; height: 1em; stroke-width: 3; }
.anim .is-on .m-rez .sl.pick b { animation: book 6s var(--e-out) infinite; }
.m-rez .hak { margin-top: auto; display: flex; justify-content: space-between; padding: .6em .7em; border-radius: .6em; background: rgba(var(--acc-rgb), .12); color: var(--acc); font: 500 .85em var(--f-m); }
.m-rez .hak s { opacity: .55; margin-right: .3em; }
.m-rez .tr { position: absolute; left: 18em; right: 1.2em; top: 2.4em; display: grid; gap: .8em; }
.m-rez .who { display: flex; align-items: center; gap: .7em; }
.m-rez .who b { display: block; font-size: .9em; }
.m-rez .who small { font-size: .72em; color: var(--tx-3); }
.m-rez .hrs { display: grid; grid-template-columns: repeat(8, 1fr); gap: .25em; }
.m-rez .hrs i { height: 1.8em; border-radius: .3em; background: rgba(var(--p1-rgb, 227,18,45), .4); }
.m-rez .hrs i.x { background: rgba(255,255,255,.07); }

/* ---------- Randevu ızgarası (Berber) ---------- */
.m-rnd .grid { position: absolute; left: 1em; top: 1em; bottom: 1em; right: 12.2em; display: grid; grid-template-columns: 3.2em repeat(3, 1fr); grid-template-rows: 1.8em repeat(6, 1fr); gap: .25em; }
.m-rnd .grid > span { border-radius: .3em; background: rgba(255,255,255,.028); }
.m-rnd .gh { background: none !important; display: grid; place-items: center; font: 600 .72em var(--f-b); color: var(--tx-2); }
.m-rnd .gt { background: none !important; font: 500 .66em var(--f-m); color: var(--tx-3); padding-top: .2em; }
.m-rnd .ap { position: absolute; inset: 0 .12em; grid-column: var(--c); grid-row: var(--r) / span var(--s); border-radius: .4em; background: rgba(var(--p1-rgb, 227,18,45), .2); border-left: .22em solid var(--p1, var(--red)); font: 600 .68em/1.2 var(--f-b); padding: .45em .5em; color: var(--tx); overflow: hidden; }
.m-rnd .ap.new { background: rgba(61,214,140,.18); border-left-color: var(--ok); display: flex; align-items: center; gap: .3em; color: #CFF7E2; }
.m-rnd .ap.new svg { width: 1em; height: 1em; stroke-width: 3; flex: none; }
.m-rnd .ap.clash { background: rgba(255,90,95,.22); border-left-color: var(--bad); color: #FFB3B5; opacity: 0; }
.anim .is-on .m-rnd .ap.new { animation: dropIn 7s var(--e-out) infinite; }
.anim .is-on .m-rnd .ap.clash { animation: clash 7s ease-out infinite; }
@keyframes dropIn { 0%, 30% { opacity: 0; transform: translateY(-.8em); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes clash { 0%, 6% { opacity: 0; } 9%, 20% { opacity: 1; transform: translateX(0); } 12% { transform: translateX(-.25em); } 15% { transform: translateX(.25em); } 25%, 100% { opacity: 0; } }
.m-rnd .ksa { position: absolute; right: 1em; top: 1em; width: 10.2em; display: grid; gap: .6em; }
.sd-rnd ol { display: grid; gap: .45em; counter-reset: s; }
.sd-rnd li { counter-increment: s; display: flex; align-items: center; gap: .6em; font-size: .85em; color: var(--tx-2); }
.sd-rnd li::before { content: counter(s); width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font: 600 .8em var(--f-m); background: rgba(255,255,255,.06); }
.sd-rnd li.d::before { background: var(--p1, var(--red)); color: #0B0B0D; }

/* ---------- Site yönetimi ---------- */
.m-sy { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: .8em; padding: 1em; }
.m-sy .blk { background: rgba(255,255,255,.03); border: 1px solid var(--ln); border-radius: .7em; padding: .8em; display: flex; flex-direction: column; gap: .6em; min-height: 0; }
.m-sy .bh { display: flex; justify-content: space-between; align-items: baseline; }
.m-sy .bh b { font: 650 .95em var(--f-d); }
.m-sy .bh small { font-size: .68em; color: var(--tx-3); }
.m-sy .units { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: .32em; min-height: 0; }
.m-sy .u { border-radius: .35em; display: grid; place-items: center; font: 600 .62em var(--f-m); font-style: normal; color: rgba(0,0,0,.55); }
.m-sy .s0, .m-sy .s9 { background: rgba(61,214,140,.78); }
.m-sy .s1 { background: rgba(242,169,59,.85); }
.m-sy .s2 { background: #FF5A5F; color: rgba(0,0,0,.6); }
.anim .is-on .m-sy .u.s9 { animation: paid 6s var(--e-out) infinite; }
@keyframes paid { 0%, 40% { background-color: #FF5A5F; transform: scale(1); } 46% { transform: scale(1.2); } 52%, 100% { background-color: rgba(61,214,140,.78); transform: scale(1); } }
.m-sy .legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4em 1.3em; font-size: .72em; color: var(--tx-2); }
.m-sy .legend i { display: inline-block; width: .85em; height: .85em; border-radius: .2em; margin-right: .4em; vertical-align: -.1em; }

/* ---------- Canlı operasyon panosu (Oto Yıkama) ---------- */
.m-kan .kb-top { position: absolute; left: 1em; right: 1em; top: .8em; display: flex; justify-content: space-between; align-items: center; }
.m-kan .kb-top b { font: 650 .9em var(--f-d); }
.m-kan .cols { position: absolute; left: 1em; right: 1em; top: 2.9em; bottom: 1em; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.m-kan .col { background: rgba(255,255,255,.025); border: 1px solid var(--ln); border-radius: .6em; padding: .5em; display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.m-kan .ch { font: 600 .7em var(--f-b); color: var(--tx-2); display: flex; justify-content: space-between; }
.m-kan .ch em { font: 500 .95em var(--f-m); color: var(--tx-3); }
.m-kan .car { display: grid; gap: .15em; padding: .5em .55em; border-radius: .45em; background: #17181C; border: 1px solid var(--ln); border-left: .22em solid var(--p1, var(--red)); font-style: normal; min-width: 0; }
.m-kan .car b { font: 600 .7em var(--f-m); white-space: nowrap; }
.m-kan .car small { font-size: .6em; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kan .car.ok { border-left-color: var(--ok); }
.m-kan .mover { position: absolute; left: .5em; bottom: .5em; width: calc((100% - 1.8em) / 4 - 1em); border-color: rgba(var(--p1-rgb, 227,18,45), .6); box-shadow: 0 .6em 1.2em -.5em rgba(0,0,0,.8); transform: translateX(calc(100% + 1.6em)); }
.anim .is-on .m-kan .mover { animation: kanMove 10s var(--e-io) infinite; }
@keyframes kanMove { 0%, 16% { transform: translateX(0); } 26%, 42% { transform: translateX(calc(100% + 1.6em)); } 52%, 68% { transform: translateX(calc(200% + 3.2em)); } 78%, 96% { transform: translateX(calc(300% + 4.8em)); border-left-color: var(--ok); } 100% { transform: translateX(calc(300% + 4.8em)); opacity: 0; } }
.sd-kan .plate { display: flex; align-items: stretch; border-radius: .4em; overflow: hidden; border: 1.5px solid #D5D3CC; background: #F4F3EF; color: #101013; font: 700 1em var(--f-m); }
.sd-kan .plate span { background: #1E4FD8; color: #fff; font-size: .6em; padding: .3em .35em; display: grid; place-items: end center; }
.sd-kan .plate b { flex: 1; padding: .35em .5em; letter-spacing: .06em; }
.sd-kan .plate em { font-style: normal; padding: .35em .5em; color: #6B6B73; }

/* ---------- Kiralama takvimi (Rent A Car) ---------- */
.m-kir { --lab: 7.2em; }
.m-kir .gh { position: absolute; left: 1em; right: 1em; top: .7em; display: grid; grid-template-columns: var(--lab) repeat(7, 1fr); text-align: center; }
.m-kir .gh span { font: 500 .66em var(--f-m); color: var(--tx-3); }
.m-kir .rows { position: absolute; left: 1em; right: 1em; top: 2.3em; bottom: 1em; display: grid; grid-template-rows: repeat(4, 1fr); gap: .5em; }
.m-kir .r { position: relative; display: grid; grid-template-columns: var(--lab) repeat(7, 1fr); align-items: center; border-radius: .5em; border: 1px solid var(--ln); background: rgba(255,255,255,.02) linear-gradient(90deg, var(--ln) 1px, transparent 1px) var(--lab) 0 / calc((100% - var(--lab)) / 7) 100% repeat-x; }
.m-kir .car { grid-row: 1; grid-column: 1; padding-left: .7em; display: grid; }
.m-kir .car b { font: 600 .68em var(--f-m); }
.m-kir .car small { font-size: .6em; color: var(--tx-3); }
.m-kir .bar { grid-row: 1; grid-column: var(--s) / var(--e); height: 62%; margin: 0 .15em; border-radius: .4em; font: 600 .62em/1 var(--f-b); font-style: normal; display: flex; align-items: center; gap: .3em; padding: 0 .6em; white-space: nowrap; overflow: hidden; }
.m-kir .bar.k { background: rgba(var(--p1-rgb, 227,18,45), .28); color: var(--tx); }
.m-kir .bar.m { background: repeating-linear-gradient(45deg, rgba(242,169,59,.28) 0 .45em, rgba(242,169,59,.1) .45em .9em); color: var(--acc); }
.m-kir .bar.rz { border: 1.5px dashed var(--ln-2); color: var(--tx-2); }
.m-kir .bar.new { background: rgba(61,214,140,.22); color: #CFF7E2; border: 1px solid rgba(61,214,140,.5); transform-origin: left; }
.m-kir .bar.new svg { width: 1.1em; height: 1.1em; stroke-width: 3; }
.m-kir .bar.clash { background: rgba(255,90,95,.25); color: #FFB3B5; border: 1px solid rgba(255,90,95,.6); opacity: 0; }
.anim .is-on .m-kir .bar.new { animation: barIn 8s var(--e-out) infinite; }
.anim .is-on .m-kir .bar.clash { animation: clash 8s ease-out infinite; }
@keyframes barIn { 0%, 30% { opacity: 0; transform: scaleX(.2); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- CRM eşleştirme (Emlak) ---------- */
.m-crm .req { position: absolute; left: 1em; top: 1em; bottom: 1em; width: 14.5em; display: flex; flex-direction: column; gap: .7em; }
.m-crm .tags { display: flex; flex-wrap: wrap; gap: .3em; }
.m-crm .tags span { font-size: .66em; padding: .25em .6em; border-radius: 1em; border: 1px solid var(--ln-2); color: var(--tx-2); }
.m-crm .bud { margin-top: auto; display: flex; justify-content: space-between; font-size: .75em; color: var(--tx-3); padding-top: .6em; border-top: 1px solid var(--ln); }
.m-crm .bud b { color: var(--tx); font-weight: 600; }
.m-crm .matches { position: absolute; left: 16.6em; right: 1em; top: 1em; bottom: 1em; display: grid; grid-template-rows: repeat(3, 1fr); gap: .55em; }
.m-crm .mt { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); grid-template-rows: 1fr auto; gap: .35em .75em; padding: .65em; border-radius: .6em; background: rgba(255,255,255,.03); border: 1px solid var(--ln); align-items: center; }
.m-crm .mt:first-child { border-color: rgba(var(--p1-rgb, 227,18,45), .45); background: rgba(var(--p1-rgb, 227,18,45), .06); }
.m-crm .sc { grid-row: span 2; align-self: stretch; display: grid; place-items: center; border-radius: .5em; background: rgba(var(--p1-rgb, 227,18,45), .14); color: var(--p1, var(--red)); font: 700 .95em var(--f-d); }
.m-crm .t b { display: block; font: 600 .76em var(--f-m); }
.m-crm .t small { font-size: .68em; color: var(--tx-2); }
.m-crm .mt > i { grid-column: 2; height: .36em; border-radius: 1em; background: rgba(255,255,255,.07); overflow: hidden; }
.m-crm .mt > i em { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--p1, var(--red)); transform-origin: left; }
.anim .is-on .m-crm .mt { animation: rowIn 8s var(--e-out) infinite; animation-delay: calc(var(--i) * .35s); }
.anim .is-on .m-crm .mt > i em { animation: grow 8s var(--e-io) infinite; animation-delay: calc(var(--i) * .35s); }
.sd-crm .donut { width: 4.6em; height: 4.6em; }
.sd-crm .donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sd-crm .donut circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.sd-crm .donut .a { stroke: var(--p1, var(--red)); stroke-dasharray: 58 100; }
.sd-crm .donut .b { stroke: var(--acc); stroke-dasharray: 42 100; stroke-dashoffset: -58; }
.sd-crm .dt { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .35em; }
.sd-crm .dt.a { background: var(--p1, var(--red)); } .sd-crm .dt.b { background: var(--acc); }

/* ---------- Restoran & Kafe ---------- */
.m-res .salon { position: absolute; left: 1em; top: 1em; bottom: 1em; width: 22em; border-radius: .7em; border: 1px solid var(--ln); background: rgba(255,255,255,.02) radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 1.1em 1.1em; }
.m-res .sh { position: absolute; left: .8em; right: .8em; top: .6em; display: flex; align-items: center; gap: 1em; font-size: .68em; color: var(--tx-3); }
.m-res .sh b { font: 650 1.3em var(--f-d); color: var(--tx); margin-right: auto; }
.m-res .sh i { display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .3em; vertical-align: -.1em; }
.m-res .sh i.d { background: var(--p1, var(--red)); } .m-res .sh i.h { background: var(--acc); }
.m-res .tb { position: absolute; width: 4.4em; height: 3.4em; display: grid; place-items: center; font-style: normal; border-radius: .55em; border: 1.5px solid var(--ln-2); color: var(--tx-2); background: #111216; }
.m-res .tb b { font: 600 .78em var(--f-m); }
.m-res .tb.c { width: 3.6em; height: 3.6em; border-radius: 50%; margin-left: .4em; }
.m-res .tb.d, .m-res .tb.n { background: rgba(var(--p1-rgb, 227,18,45), .25); border-color: var(--p1, var(--red)); color: var(--tx); }
.m-res .tb.h { background: rgba(var(--acc-rgb), .22); border-color: var(--acc); color: var(--tx); }
.anim .is-on .m-res .tb.n { animation: seat 7s var(--e-out) infinite; }
@keyframes seat { 0%, 20% { background-color: #111216; border-color: rgba(255,255,255,.15); transform: scale(1); } 26% { transform: scale(1.12); } 32%, 100% { background-color: rgba(var(--p1-rgb, 227,18,45), .25); border-color: var(--p1, var(--red)); transform: scale(1); } }
.m-res .kds { position: absolute; right: 1em; top: 1em; bottom: 1em; left: 24.4em; display: flex; flex-direction: column; gap: .5em; }
.m-res .kh { display: flex; justify-content: space-between; align-items: center; }
.m-res .kh b { font: 650 .9em var(--f-d); }
.m-res .tk { padding: .6em .7em; border-radius: .45em; background: #F4F3EF; color: #101013; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1em .6em; align-items: center; }
.m-res .tk .no { grid-row: span 2; font: 700 .72em var(--f-m); background: #101013; color: #fff; border-radius: .3em; padding: .35em .4em; }
.m-res .tk b { font-size: .72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-res .tk small { font-size: .6em; color: #6B6B73; }
.m-res .tk.old { opacity: .5; }
.m-res .tk.mv { box-shadow: 0 0 0 2px var(--p1, var(--red)); }
.anim .is-on .m-res .tk.mv { animation: ticket 7s var(--e-out) infinite; }
@keyframes ticket { 0%, 26% { opacity: 0; transform: translateX(2em); } 34%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Site oluşturucu ---------- */
.m-bld { --th: #E3122D; }
.m-bld .pal { position: absolute; left: 1em; top: 1em; bottom: 1em; width: 8.6em; display: flex; flex-direction: column; gap: .4em; }
.m-bld .pal .lbl { margin: .2em 0 .1em; }
.m-bld .pal i { display: flex; align-items: center; gap: .5em; padding: .45em .55em; border-radius: .4em; background: rgba(255,255,255,.045); border: 1px solid var(--ln); font: 500 .66em var(--f-b); font-style: normal; color: var(--tx-2); }
.m-bld .pal i b { width: .9em; height: .9em; border-radius: .2em; background: rgba(255,255,255,.22); }
.m-bld .sw { display: flex; gap: .4em; }
.m-bld .sw em { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--c); display: block; box-shadow: 0 0 0 .15em #0D0E11; }
.m-bld .sw em:first-child { box-shadow: 0 0 0 .15em #0D0E11, 0 0 0 .28em #fff; }
.m-bld .cv { position: absolute; left: 10.6em; right: 1em; top: 1em; bottom: 1em; border-radius: .6em; background: #F4F3EF; padding: .8em; overflow: hidden; }
.m-bld .pg { display: flex; flex-direction: column; gap: .5em; height: 100%; }
.m-bld .s { border-radius: .4em; background: #fff; border: 1px solid #E2E0DA; position: relative; }
.m-bld .s.hero { background: var(--th); flex: 1.4; display: flex; flex-direction: column; justify-content: center; gap: .4em; padding: 0 1.2em; border: 0; }
.m-bld .s.hero i { display: block; height: .5em; border-radius: .2em; background: rgba(255,255,255,.9); }
.m-bld .s.hero .t1 { width: 55%; height: .8em; } .m-bld .s.hero .t2 { width: 40%; background: rgba(255,255,255,.55); } .m-bld .s.hero .bt { width: 5em; height: 1.3em; background: #fff; border-radius: .3em; margin-top: .3em; }
.m-bld .s.cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; background: none; border: 0; }
.m-bld .s.cards i { border-radius: .35em; background: #fff; border: 1px solid #E2E0DA; }
.m-bld .s.drag { flex: .8; border: 1.5px dashed var(--th); display: grid; place-items: center; font: 600 .7em var(--f-b); color: var(--th); background: #fff; }
.m-bld .s.foot { flex: .5; background: #101013; border: 0; display: flex; align-items: center; gap: .5em; padding: 0 1em; }
.m-bld .s.foot i { height: .4em; width: 18%; border-radius: .2em; background: rgba(255,255,255,.3); }
.anim .is-on .m-bld { animation: theme 9s steps(1) infinite; }
@keyframes theme { 0% { --th: #E3122D; } 33% { --th: #2563EB; } 66% { --th: #16A34A; } }
.anim .is-on .m-bld .s.drag { animation: lift 3s var(--e-io) infinite; }
@keyframes lift { 0%, 30%, 100% { transform: none; box-shadow: none; } 45%, 70% { transform: translate(.4em, -.6em) rotate(-1deg); box-shadow: 0 .8em 1.4em -.6em rgba(0,0,0,.4); } }
.sd-bld .tpl { display: flex; flex-wrap: wrap; gap: .35em; }
.sd-bld .tpl span { font-size: .72em; padding: .25em .6em; border-radius: 1em; background: rgba(255,255,255,.06); color: var(--tx-2); }

/* ---------- Genel panel ---------- */
.m-dsh .side { position: absolute; left: 0; top: 0; bottom: 0; width: 4.2em; border-right: 1px solid var(--ln); display: flex; flex-direction: column; align-items: center; gap: .8em; padding-top: 1em; }
.m-dsh .side .lg { width: 2.4em; height: 2.4em; border-radius: .6em; background: rgba(var(--p1-rgb, 227,18,45), .18); color: var(--p1, var(--red)); display: grid; place-items: center; font-size: .9em; }
.m-dsh .side > i { width: 1.8em; height: 1.8em; border-radius: .45em; background: rgba(255,255,255,.05); }
.m-dsh .main { position: absolute; left: 4.2em; right: 0; top: 0; bottom: 0; padding: 1em; display: flex; flex-direction: column; gap: .8em; }
.m-dsh .top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.m-dsh .top b { font: 650 .95em var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dsh .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.m-dsh .kp div { padding: .7em; border-radius: .6em; background: rgba(255,255,255,.035); border: 1px solid var(--ln); }
.m-dsh .kp small { display: block; font-size: .66em; color: var(--tx-3); }
.m-dsh .kp b { font: 700 1.3em var(--f-d); }
.m-dsh .ch { flex: 1; display: flex; align-items: flex-end; gap: .4em; }
.m-dsh .ch span { flex: 1; height: var(--h); border-radius: .3em .3em .1em .1em; background: rgba(255,255,255,.12); transform-origin: bottom; }
.m-dsh .ch span.hi { background: var(--p1, var(--red)); }
.anim .is-on .m-dsh .ch span { animation: barPulse 5s var(--e-io) infinite; animation-delay: calc(var(--i) * -.4s); }
.m-dsh .ls { display: grid; gap: .35em; }
.m-dsh .ls i { height: 1.4em; border-radius: .4em; background: rgba(255,255,255,.035); }

/* ===================== Hizmet sahneleri (40em × 22.5em) ===================== */
.ss { position: absolute; inset: 0; container-type: inline-size; background: #0E0F12; overflow: hidden; }
.ss::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 3.2cqw 3.2cqw; }
.ss-in { position: absolute; inset: 0; font-size: 2.5cqw; }

/* Web tasarım */
.wt-page { position: absolute; left: 6em; right: 6em; top: 2em; bottom: 2em; border-radius: .6em; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1.2em 2.4em -1.2em rgba(0,0,0,.8); }
.wt-nav { display: flex; align-items: center; gap: .6em; height: 2.2em; padding: 0 1em; border-bottom: 1px solid #E8E6E0; }
.wt-nav i { height: .45em; width: 2.4em; border-radius: .2em; background: #D9D7D0; }
.wt-nav .lg { width: 1.3em; height: 1.3em; border-radius: .3em; background: var(--red); margin-right: auto; }
.wt-nav b { width: 3.2em; height: 1.2em; border-radius: .3em; background: var(--red); }
.wt-hero { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1em; align-items: center; padding: 0 1.2em; background: #101013; }
.wt-hero div { display: grid; gap: .45em; }
.wt-hero i { display: block; height: .55em; border-radius: .2em; background: rgba(255,255,255,.85); }
.wt-hero .t1 { width: 90%; height: .85em; } .wt-hero .t2 { width: 70%; height: .85em; } .wt-hero .t3 { width: 80%; background: rgba(255,255,255,.4); }
.wt-hero .bt { width: 5em; height: 1.4em; border-radius: .35em; background: var(--red); margin-top: .3em; }
.wt-hero .img { height: 70%; border-radius: .5em; background: linear-gradient(135deg, var(--red), var(--acc)); }
.wt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; padding: .8em 1.2em; }
.wt-cards i { height: 2.6em; border-radius: .4em; background: #F4F3EF; border: 1px solid #E8E6E0; }
.wt-tag { position: absolute; right: 1.2em; bottom: 1em; font: 600 .7em var(--f-b); padding: .35em .8em; border-radius: 1em; background: rgba(61,214,140,.15); color: var(--ok); }
.anim .is-on .wt-page { animation: wire 5s var(--e-io) infinite; }
@keyframes wire { 0%, 30% { filter: grayscale(1) brightness(1.55) contrast(.4); } 42%, 92% { filter: none; } 100% { filter: grayscale(1) brightness(1.55) contrast(.4); } }

/* Web yazılım */
.wy .nd { position: absolute; top: 7.5em; width: 7em; height: 6em; border-radius: .8em; background: #16171B; border: 1px solid var(--ln-2); display: grid; place-items: center; align-content: center; gap: .4em; font-size: 1em; }
.wy .nd i { font-size: 1.4em; color: var(--tx-2); }
.wy .nd b { font: 600 .75em var(--f-m); }
.wy .c { left: 3em; } .wy .a { left: 16.5em; border-color: rgba(var(--red-rgb), .6); } .wy .a i { color: var(--red); } .wy .d { left: 30em; }
.wy .ln { position: absolute; top: 10.45em; height: 2px; background: repeating-linear-gradient(90deg, var(--ln-2) 0 .4em, transparent .4em .8em); }
.wy .l1 { left: 10em; width: 6.5em; } .wy .l2 { left: 23.5em; width: 6.5em; }
.wy .pk { position: absolute; top: 10.1em; width: .8em; height: .8em; margin-left: -.4em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 .3em rgba(var(--red-rgb), .25); opacity: 0; }
.wy .p1 { left: 10em; } .wy .p2 { left: 23.5em; background: var(--acc); box-shadow: 0 0 0 .3em rgba(var(--acc-rgb), .25); }
.wy code { position: absolute; font: 500 .66em var(--f-m); padding: .4em .7em; border-radius: .4em; background: #16171B; border: 1px solid var(--ln); white-space: nowrap; }
.wy .rq { left: 9.4em; top: 5.2em; color: var(--acc); }
.wy .js { left: 5em; top: 16.4em; color: #7EE2A8; }
.anim .is-on .wy .p1 { animation: pk1 4s linear infinite; }
.anim .is-on .wy .p2 { animation: pk2 4s linear infinite; }
.anim .is-on .wy .js { animation: jsOut 4s var(--e-out) infinite; }
@keyframes pk1 { 0% { opacity: 1; transform: translateX(0); } 25% { opacity: 1; transform: translateX(6.5em); } 26%, 74% { opacity: 0; transform: translateX(6.5em); } 75% { opacity: 1; transform: translateX(6.5em); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes pk2 { 0%, 25% { opacity: 0; transform: translateX(0); } 26% { opacity: 1; transform: translateX(0); } 48% { opacity: 1; transform: translateX(6.5em); } 52% { opacity: 1; transform: translateX(6.5em); } 74% { opacity: 1; transform: translateX(0); } 75%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes jsOut { 0%, 90% { opacity: 1; } 95% { opacity: 0; transform: translateY(.3em); } 100% { opacity: 1; transform: none; } }

/* Mobil uygulama */
.mb-ph { position: absolute; left: 8em; top: 1.6em; bottom: 1.6em; aspect-ratio: 9 / 18.4; border-radius: 1.6em; background: #050506; border: 1px solid var(--ln-2); padding: .4em; overflow: hidden; }
.mb-track { display: flex; width: 300%; height: 100%; }
.mb-s { width: 33.333%; height: 100%; border-radius: 1.25em; background: #16171B; padding: 1.2em .7em .7em; display: flex; flex-direction: column; gap: .45em; position: relative; }
.mb-s + .mb-s { margin-left: 0; }
.mb-s i { display: block; border-radius: .35em; background: rgba(255,255,255,.07); }
.mb-s .h { height: .9em; width: 60%; background: rgba(255,255,255,.4); }
.mb-s .c { height: 3.2em; } .mb-s .g { flex: 1; background: linear-gradient(135deg, rgba(var(--red-rgb), .5), rgba(var(--acc-rgb), .35)); }
.mb-s .b { margin-top: auto; height: 1.8em; background: var(--red); }
.mb-s .ok { width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center; margin: 2em auto .5em; background: rgba(61,214,140,.2); color: var(--ok); font-size: 1.3em; font-weight: 700; }
.mb-ph .tap { position: absolute; left: 50%; bottom: 1.6em; width: 2.2em; height: 2.2em; margin-left: -1.1em; border-radius: 50%; border: .15em solid rgba(255,255,255,.8); opacity: 0; }
.mb-os { position: absolute; left: 21em; top: 7em; display: grid; gap: .6em; }
.mb-os span { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border-radius: .6em; background: #16171B; border: 1px solid var(--ln); font: 600 .8em var(--f-b); color: var(--tx-2); }
.anim .is-on .mb-track { animation: swipe 7.5s var(--e-io) infinite; }
.anim .is-on .mb-ph .tap { animation: tapIt 2.5s ease-out infinite; }
@keyframes swipe { 0%, 26% { transform: translateX(0); } 34%, 60% { transform: translateX(-33.333%); } 68%, 94% { transform: translateX(-66.666%); } 100% { transform: translateX(0); } }
@keyframes tapIt { 0%, 70% { opacity: 0; transform: scale(.6); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* E-ticaret */
.ec-p { position: absolute; left: 3em; top: 2.2em; bottom: 2.2em; width: 12em; border-radius: .8em; background: #16171B; border: 1px solid var(--ln-2); padding: .7em; display: flex; flex-direction: column; gap: .45em; }
.ec-p .im { flex: 1; border-radius: .5em; display: grid; place-items: center; font-size: 2.2em; color: var(--acc); background: linear-gradient(135deg, rgba(var(--acc-rgb), .18), rgba(var(--red-rgb), .12)); }
.ec-p .t { display: block; height: .5em; width: 80%; border-radius: .2em; background: rgba(255,255,255,.3); }
.ec-p .t.s { width: 45%; background: rgba(255,255,255,.15); }
.ec-p .add { height: 2em; border-radius: .45em; background: var(--red); display: grid; place-items: center; font: 600 .72em var(--f-b); }
.ec-flow { position: absolute; left: 17.5em; top: 7.8em; display: flex; align-items: center; gap: .7em; }
.ec-flow > span { width: 3.4em; height: 3.4em; border-radius: .8em; display: grid; place-items: center; background: #16171B; border: 1px solid var(--ln-2); font-size: 1em; color: var(--tx-2); position: relative; }
.ec-flow .ar { color: var(--tx-3); font-style: normal; }
.ec-flow .cart em { position: absolute; right: -.5em; top: -.5em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--red); color: #fff; font: 700 .7em/1.4em var(--f-b); text-align: center; overflow: hidden; font-style: normal; }
.ec-flow .cart em b { display: block; height: 1.4em; }
.ec-flow .cart em .n1 { display: none; }
.ec-flow .done { color: var(--ok); border-color: rgba(61,214,140,.6); background: rgba(61,214,140,.12); font-weight: 700; font-size: 1.2em; }
.ec-ok { position: absolute; left: 17.5em; bottom: 3em; font: 600 .72em var(--f-b); padding: .45em .8em; border-radius: .5em; background: rgba(61,214,140,.14); color: var(--ok); }
.anim .is-on .ec-p .add { animation: press 5s var(--e-out) infinite; }
.anim .is-on .ec-flow .cart em .n1 { display: block; }
.anim .is-on .ec-flow .cart em b { animation: count 5s var(--e-out) infinite; }
.anim .is-on .ec-flow .pay { animation: lightOn 5s var(--e-out) infinite; animation-delay: .6s; }
.anim .is-on .ec-flow .done, .anim .is-on .ec-ok { animation: lightOn 5s var(--e-out) infinite; animation-delay: 1.2s; }
@keyframes press { 0%, 18%, 30%, 100% { transform: scale(1); } 22% { transform: scale(.92); background-color: #b50e24; } }
@keyframes count { 0%, 24% { transform: translateY(0); } 30%, 100% { transform: translateY(-100%); } }
@keyframes lightOn { 0%, 30% { opacity: .35; } 38%, 92% { opacity: 1; } 100% { opacity: .35; } }

/* Otomasyon */
.ot-man { position: absolute; left: 3em; top: 3em; bottom: 3em; width: 11em; }
.ot-man i { position: absolute; left: 1em; top: 3em; width: 8em; height: 10em; border-radius: .3em; background: #E9E7E1; box-shadow: 0 .5em 1em -.4em rgba(0,0,0,.6); }
.ot-man i:nth-child(2) { transform: rotate(-8deg); } .ot-man i:nth-child(3) { transform: rotate(5deg); } .ot-man i:nth-child(4) { transform: rotate(-2deg); background: #F4F3EF linear-gradient(#D5D3CC, #D5D3CC) 1em 1.5em / 5em .4em no-repeat; }
.ot .lb { font: 500 .66em var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.ot-eng { position: absolute; left: 17em; top: 8em; width: 5.5em; height: 5.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--red-rgb), .14); border: 1px solid rgba(var(--red-rgb), .5); color: var(--red); font-size: 1em; }
.ot-eng i { font-size: 2em; }
.ot-auto { position: absolute; left: 25.5em; top: 4em; display: grid; gap: .7em; }
.ot-auto b { display: block; padding: .6em .9em; border-radius: .55em; background: rgba(61,214,140,.12); border: 1px solid rgba(61,214,140,.35); color: #CFF7E2; font: 600 .78em var(--f-b); white-space: nowrap; }
.anim .is-on .ot-man i:nth-child(n+2) { animation: jitter 1.6s ease-in-out infinite; }
.anim .is-on .ot-eng i { animation: spin 4s linear infinite; }
.anim .is-on .ot-auto b { animation: rowIn 6s var(--e-out) infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes jitter { 50% { translate: .15em -.1em; } }

/* SEO */
.seo-q { position: absolute; left: 3em; top: 2em; width: 21em; height: 2.4em; border-radius: 1.2em; background: #fff; color: #3a3a40; display: flex; align-items: center; gap: .6em; padding: 0 1em; font-size: .9em; }
.seo-q span { font-size: .85em; }
.seo-r { position: absolute; left: 3em; top: 5.6em; width: 18.9em; display: grid; gap: .5em; }
.seo-r .r { display: block; height: 2.3em; border-radius: .5em; background: rgba(255,255,255,.05); border: 1px solid var(--ln); }
.seo-r .me { position: absolute; left: 0; right: 0; top: 0; height: 2.3em; padding: 0 .8em; border-radius: .5em; background: #16171B; border: 1px solid var(--red); display: flex; flex-direction: column; justify-content: center; }
.seo-r .me b { font: 600 .72em var(--f-m); color: var(--tx); }
.seo-r .me small { font-size: .58em; color: var(--tx-3); }
.seo-g { position: absolute; left: 25em; right: 2.5em; top: 7em; height: 9em; width: 12.5em; overflow: visible; }
.seo-g path { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.anim .is-on .seo-r .me { animation: climb 6s var(--e-io) infinite; }
.anim .is-on .seo-g path { animation: draw 6s var(--e-io) infinite; }
@keyframes climb { 0%, 12% { transform: translateY(11.2em); } 30% { transform: translateY(8.4em); } 48% { transform: translateY(5.6em); } 66% { transform: translateY(2.8em); } 80%, 100% { transform: translateY(0); } }
@keyframes draw { 0%, 10% { stroke-dashoffset: 1; } 80%, 100% { stroke-dashoffset: 0; } }

/* ERP */
.erp .hub { position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; margin: -3em 0 0 -3em; border-radius: 1.4em; display: grid; place-items: center; background: var(--red); font: 700 1em var(--f-m); z-index: 1; box-shadow: 0 0 0 .8em rgba(var(--red-rgb), .12); }
.erp .md { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .5em; padding: .6em .9em; border-radius: .7em; background: #16171B; border: 1px solid var(--ln-2); font: 600 .78em var(--f-b); white-space: nowrap; z-index: 1; }
.erp .md i { color: var(--acc); }
.erp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.erp svg path { stroke: rgba(255,255,255,.18); stroke-width: 1.4; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; fill: none; }
.erp .pl { position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; margin: -3em 0 0 -3em; border-radius: 1.4em; border: 2px solid rgba(var(--red-rgb), .6); opacity: 0; }
.anim .is-on .erp .pl { animation: ripple 3s ease-out infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* UI/UX */
.ux-tok { position: absolute; left: 3em; top: 3em; bottom: 3em; width: 12em; border-radius: .8em; background: #16171B; border: 1px solid var(--ln-2); padding: 1em; display: flex; flex-direction: column; gap: .6em; }
.ux .lb { font: 500 .62em var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.ux .sl { display: block; position: relative; height: .35em; border-radius: 1em; background: rgba(255,255,255,.12); margin-bottom: .6em; }
.ux .sl b { position: absolute; top: 50%; left: 70%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; background: #fff; }
.ux .sw { display: flex; gap: .45em; }
.ux .sw em { width: 1.4em; height: 1.4em; border-radius: 50%; display: block; }
.ux .sw em:nth-child(1) { background: var(--red); box-shadow: 0 0 0 .15em #16171B, 0 0 0 .28em #fff; } .ux .sw em:nth-child(2) { background: #2563EB; } .ux .sw em:nth-child(3) { background: var(--acc); }
.ux-cmp { position: absolute; left: 18em; top: 3em; bottom: 3em; right: 3em; display: grid; place-items: center; }
.ux-cmp .cd { width: 13em; padding: 1em; border-radius: 1em; background: #fff; display: grid; gap: .5em; box-shadow: 0 1em 2em -1em rgba(0,0,0,.8); }
.ux-cmp .av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #E9E7E1; }
.ux-cmp .t1 { display: block; height: .6em; width: 80%; border-radius: .2em; background: #2a2a30; }
.ux-cmp .t2 { display: block; height: .45em; width: 55%; border-radius: .2em; background: #C9C7C0; }
.ux-cmp .bt { height: 2em; border-radius: 1em; background: var(--red); color: #fff; display: grid; place-items: center; font: 600 .75em var(--f-b); margin-top: .3em; }
.anim .is-on .ux .sl b { animation: knob 6s var(--e-io) infinite; }
.anim .is-on .ux-cmp .cd, .anim .is-on .ux-cmp .bt { animation: morph 6s var(--e-io) infinite; }
@keyframes knob { 0%, 20% { left: 70%; } 45%, 70% { left: 15%; } 95%, 100% { left: 70%; } }
@keyframes morph { 0%, 20% { border-radius: 1em; } 45%, 70% { border-radius: .2em; background-color: #2563EB; } 95%, 100% { border-radius: 1em; } }
.anim .is-on .ux-cmp .cd { animation-name: morphCard; }
@keyframes morphCard { 0%, 20% { border-radius: 1em; } 45%, 70% { border-radius: .25em; } 95%, 100% { border-radius: 1em; } }