/* ==========================================================================
   Nitrogen ürün illüstrasyonları (module/illus.php)
   Gerçek ekranların düzenini temel alan, kodla çizilmiş sahneler. Ana sayfa slider'ı ve ürün
   sayfası hero'larındaki cihaz çerçevelerinde kullanılır. Tüm ölçüler em; kök yazı boyutu
   kapsayıcı genişliğinden (cqw) gelir, böylece çerçeve hangi boyutta olursa olsun oranlar korunur.
   Ürün renkleri: PDA mavi · UTS yeşil · POS sarı · QMS mor · B2B turuncu · WEB kırmızı
   ========================================================================== */

.nx-device__view:has(.nx-ill), .nx-device__phone--ill, .nx-device__card--ill { container-type: inline-size; }
.nx-device__card--ill { background: #fff; }

.nx-ill {
    --ill-ink: #0b1628; --ill-muted: #6b7a91; --ill-line: #e6ecf5; --ill-bg: #f4f7fc;
    --ill-blue: #1f6fe5; --ill-ok: #16a76b; --ill-warn: #e8930c; --ill-bad: #e5484d;
    --ill-accent: #1f6fe5; --ill-accent-2: #19a7ff; --ill-soft: #e2edff; --ill-on: #fff;
    height: 100%; font-family: inherit; color: var(--ill-ink); line-height: 1.25; text-align: left; user-select: none;
}
.nx-ill i.fas { font-size: 0.95em; }
.nx-ill--uts { --ill-accent: #16a34a; --ill-accent-2: #34d399; --ill-soft: #dcf5e7; }
.nx-ill--pos { --ill-accent: #e0a100; --ill-accent-2: #ffc933; --ill-soft: #fff3cc; --ill-on: #3a2a00; }
.nx-ill--qms { --ill-accent: #7c4dff; --ill-accent-2: #a78bfa; --ill-soft: #ede7ff; }
.nx-ill--b2b { --ill-accent: #f26b1d; --ill-accent-2: #ff9a4d; --ill-soft: #ffe9dc; }
.nx-ill--web { --ill-accent: #e53935; --ill-accent-2: #ff6b6b; --ill-soft: #fde4e4; }

/* ---------- Masaüstü kabuğu: koyu menü + içerik ---------- */
.nx-ill--desk { display: grid; grid-template-columns: 18% 1fr; font-size: 1.85cqw; background: var(--ill-bg); }
.nx-ill__side { background: linear-gradient(180deg, #0f1f3a, #0b172c); color: #b8c4d8; padding: 1.2em 0.8em; overflow: hidden; }
.nx-ill__logo { display: flex; align-items: center; gap: 0.5em; margin-bottom: 1.4em; color: #fff; font-weight: 800; font-size: 0.85em; letter-spacing: 0.12em; }
.nx-ill__logo :is(b, .nx-b) { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: linear-gradient(135deg, var(--ill-accent), var(--ill-accent-2)); color: var(--ill-on); font-size: 1.1em; letter-spacing: 0; }
.nx-ill__side ul { list-style: none; margin: 0; padding: 0; }
.nx-ill__side li { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 0.6em; border-radius: 0.45em; font-size: 0.78em; white-space: nowrap; }
.nx-ill__side li i { width: 1.1em; text-align: center; color: #7f90ab; }
.nx-ill__side li.is-on { background: color-mix(in srgb, var(--ill-accent) 22%, transparent); color: #fff; box-shadow: inset 0.2em 0 0 var(--ill-accent); }
.nx-ill__side li.is-on i { color: var(--ill-accent-2); }
.nx-ill__sidehead { margin: 1.2em 0 0.4em 0.6em; font-size: 0.6em; letter-spacing: 0.14em; text-transform: uppercase; color: #5f7290; }
.nx-ill__main { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.2em; min-width: 0; min-height: 0; overflow: hidden; }
.nx-ill__top { display: flex; align-items: center; gap: 1em; }
.nx-ill__top :is(b, .nx-b) { font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__chip { padding: 0.35em 0.8em; border-radius: 99em; background: var(--ill-soft); color: color-mix(in srgb, var(--ill-accent) 70%, #000); font-size: 0.68em; font-weight: 700; white-space: nowrap; }
.nx-ill__search { flex: 1; display: flex; align-items: center; gap: 0.6em; max-width: 46%; margin-left: auto; padding: 0.45em 0.8em; border-radius: 99em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); color: var(--ill-muted); font-size: 0.72em; white-space: nowrap; overflow: hidden; }
.nx-ill__avatar { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; margin-left: auto; border-radius: 50%; background: var(--ill-soft); color: color-mix(in srgb, var(--ill-accent) 75%, #000); font-size: 0.7em; font-weight: 800; }
.nx-ill__search + .nx-ill__avatar { margin-left: 0; }

/* KPI kartları */
.nx-ill__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; }
.nx-ill__kpi { position: relative; padding: 0.7em 0.8em 0.6em; border-radius: 0.7em; background: #fff; box-shadow: 0 0.1em 0.3em rgba(15, 31, 58, 0.06), inset 0 0 0 1px var(--ill-line); overflow: hidden; }
.nx-ill__kpi small { display: block; font-size: 0.66em; color: var(--ill-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__kpi :is(b, .nx-b) { display: block; margin-top: 0.15em; font-size: 1.45em; letter-spacing: -0.02em; }
.nx-ill__kpi svg { position: absolute; right: 0.7em; bottom: 0.8em; width: 34%; height: 1.4em; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nx-ill__kpi--info svg { stroke: var(--ill-blue); }
.nx-ill__kpi--ok svg { stroke: var(--ill-ok); }
.nx-ill__kpi--warn svg { stroke: var(--ill-warn); }
.nx-ill__kpi::before { content: ""; position: absolute; left: 0; top: 0.8em; bottom: 0.8em; width: 0.2em; border-radius: 0 0.2em 0.2em 0; background: var(--ill-blue); }
.nx-ill__kpi--ok::before { background: var(--ill-ok); }
.nx-ill__kpi--warn::before { background: var(--ill-warn); }
.nx-ill__kpi--bad::before { background: var(--ill-bad); }

/* Kartlar, listeler, durum etiketleri */
.nx-ill__card { display: flex; flex-direction: column; padding: 0.8em 0.9em; border-radius: 0.7em; background: #fff; box-shadow: 0 0.1em 0.3em rgba(15, 31, 58, 0.06), inset 0 0 0 1px var(--ill-line); min-height: 0; }
.nx-ill__cardhead { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 0.3em; font-size: 0.82em; font-weight: 700; }
.nx-ill__cardhead em { font-style: normal; font-weight: 600; color: var(--ill-muted); }
.nx-ill__pill { padding: 0.25em 0.6em; border-radius: 99em; font-style: normal; font-weight: 700; font-size: 0.85em; white-space: nowrap; }
.nx-ill__pill--ok { background: #dff6ec; color: #0e7a4e; }
.nx-ill__pill--info { background: #e2edff; color: #1a5fd0; }
.nx-ill__pill--warn { background: #fdf0d5; color: #9a5b00; }
.nx-ill__pill--bad { background: #fde4e4; color: #b42318; }
.nx-ill__pill--muted { background: #eef1f6; color: var(--ill-muted); }
.nx-ill code { padding: 0.2em 0.45em; border-radius: 0.35em; background: var(--ill-soft); color: color-mix(in srgb, var(--ill-accent) 80%, #000); font-family: inherit; font-weight: 700; font-size: 0.95em; white-space: nowrap; }
.nx-ill__bar { display: block; height: 0.35em; border-radius: 99em; background: rgba(15, 31, 58, 0.08); overflow: hidden; }
.nx-ill__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ill-accent), var(--ill-accent-2)); }
.nx-ill__bar--lg { height: 0.55em; }

/* ---------- PDA: sipariş toplama paneli ---------- */
.nx-ill__grid { flex: 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 0.7em; min-height: 0; }
.nx-ill__map svg { flex: 1; width: 100%; height: 100%; min-height: 0; }
.nx-ill__map rect { fill: #eef2f8; stroke: #d9e1ee; stroke-width: 0.6; }
.nx-ill__map rect.is-hot { fill: #dce9ff; stroke: #3d8bff; }
.nx-ill__route { fill: none; stroke: #3d8bff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; }
.nx-ill__pin circle { fill: var(--ill-blue); stroke: #fff; stroke-width: 1.4; }
.nx-ill__pin text { fill: #fff; font-size: 7px; font-weight: 800; text-anchor: middle; }
.nx-ill__list ul { list-style: none; margin: 0; padding: 0; }
.nx-ill__list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.7em; padding: 1em 0; border-bottom: 1px solid var(--ill-line); font-size: 0.8em; }
.nx-ill__list li:last-child { border-bottom: 0; }
.nx-ill__list span:not(.nx-b) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__list :is(b, .nx-b) { font-variant-numeric: tabular-nums; }
.nx-ill__foot { display: flex; align-items: center; gap: 0.6em; margin-top: auto; padding-top: 0.7em; font-size: 0.68em; }
.nx-ill__foot small { flex: 1; color: var(--ill-muted); }
.nx-ill__team { display: flex; }
.nx-ill__team i { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-left: -0.5em; border-radius: 50%; border: 0.15em solid #fff; background: #dfe9fb; color: var(--ill-blue); font-style: normal; font-size: 0.85em; font-weight: 800; }
.nx-ill__team i:first-child { margin-left: 0; }
.nx-ill__team i:nth-child(2) { background: #dff6ec; color: #0e7a4e; }
.nx-ill__team i:nth-child(3) { background: #fdeccd; color: #a0620a; }
.nx-ill__progress { height: 0.35em; margin-top: 0.6em; border-radius: 99em; background: #eef1f6; overflow: hidden; }
.nx-ill__progress span { display: block; height: 100%; border-radius: inherit; background: var(--nx-grad); }

/* ---------- UTS: istasyon kutucukları ---------- */
.nx-ill__ops { flex: 1; display: flex; flex-direction: column; gap: 0.5em; min-height: 0; }
.nx-ill__opshead { margin: 0.2em 0 0; padding: 0.45em 0.8em; border-radius: 0.5em; background: linear-gradient(90deg, var(--ill-accent), var(--ill-accent-2)); color: #fff; font-size: 0.72em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.nx-ill__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; }
.nx-ill__tile { display: flex; flex-direction: column; gap: 0.35em; min-height: 6.4em; padding: 0.8em 0.8em; border-radius: 0.6em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.78em; }
.nx-ill__tile :is(b, .nx-b) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__tile small { color: var(--ill-muted); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__tile .nx-ill__bar { margin-top: auto; }
.nx-ill__tile--run { background: #effaf3; box-shadow: inset 0 0 0 1px #bfe8cf, inset 0.25em 0 0 var(--ill-ok); }
.nx-ill__tile--stop { background: #fff1f1; box-shadow: inset 0 0 0 1px #f6c9c9, inset 0.25em 0 0 var(--ill-bad); }
.nx-ill__tile--stop small { color: #b42318; font-weight: 600; }
.nx-ill__tile--plan { background: #f6f8fc; box-shadow: inset 0 0 0 1px var(--ill-line), inset 0.25em 0 0 #9aa8bd; }

/* ---------- POS: sepet, kategori ve tuş takımı ---------- */
.nx-ill__posgrid { flex: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.8em; min-height: 0; }
.nx-ill__cart ul { list-style: none; margin: 0; padding: 0; }
.nx-ill__cart li { display: grid; grid-template-columns: 2em 1fr auto; gap: 0.5em; padding: 0.7em 0; border-bottom: 1px dashed var(--ill-line); font-size: 0.78em; }
.nx-ill__cart li i { font-style: normal; font-weight: 800; color: var(--ill-muted); }
.nx-ill__cart li span:not(.nx-b) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__cart dl { display: grid; grid-template-columns: 1fr auto; gap: 0.3em; margin: 0.7em 0 0; font-size: 0.72em; color: var(--ill-muted); }
.nx-ill__cart dd { margin: 0; text-align: right; }
.nx-ill__total { display: flex; align-items: baseline; justify-content: space-between; margin: auto 0 0; padding-top: 0.6em; border-top: 1px solid var(--ill-line); }
.nx-ill__total small { font-size: 0.75em; color: var(--ill-muted); }
.nx-ill__total :is(b, .nx-b) { font-size: 1.5em; letter-spacing: -0.02em; }
.nx-ill__keys { display: flex; flex-direction: column; gap: 0.55em; min-height: 0; }
.nx-ill__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.nx-ill__cats span { display: grid; place-items: center; min-height: 2.6em; padding: 0.3em; border-radius: 0.5em; font-size: 0.7em; font-weight: 800; text-align: center; }
.nx-ill__cats .is-a { background: linear-gradient(135deg, var(--ill-accent), var(--ill-accent-2)); color: var(--ill-on); }
.nx-ill__cats .is-b { background: #1aa79a; color: #fff; }
.nx-ill__cats .is-c { background: #f2683a; color: #fff; }
.nx-ill__pad { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.nx-ill__pad span { display: grid; place-items: center; border-radius: 0.45em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.85em; font-weight: 700; }
.nx-ill__pay { display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.7em; border-radius: 0.55em; background: var(--ill-ok); color: #fff; font-size: 0.82em; font-weight: 800; }

/* ---------- QMS ve WEB: tablolar ---------- */
.nx-ill__table { flex: 1; overflow: hidden; }
.nx-ill__table table { width: 100%; border-collapse: collapse; font-size: 0.74em; }
.nx-ill__table th { padding: 0.4em 0.5em 0.6em; text-align: left; color: var(--ill-muted); font-weight: 600; border-bottom: 1px solid var(--ill-line); white-space: nowrap; }
.nx-ill__table td { padding: 1.05em 0.5em; border-bottom: 1px solid var(--ill-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.nx-ill__table tr:last-child td { border-bottom: 0; }
.nx-ill__table .is-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.nx-ill__grand { display: flex; align-items: baseline; justify-content: space-between; margin: auto 0 0; padding-top: 0.6em; border-top: 1px solid var(--ill-line); }
.nx-ill__grand small { font-size: 0.75em; color: var(--ill-muted); }
.nx-ill__grand :is(b, .nx-b) { font-size: 1.3em; }

/* WEB: sipariş formu */
.nx-ill__form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; }
.nx-ill__form label { display: flex; flex-direction: column; gap: 0.25em; padding: 0.5em 0.7em; border-radius: 0.5em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.74em; }
.nx-ill__form small { font-size: 0.8em; color: var(--ill-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.nx-ill__form span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__actions { display: flex; gap: 0.5em; }
.nx-ill__actions span { padding: 0.5em 0.9em; border-radius: 0.5em; background: #19a7c7; color: #fff; font-size: 0.7em; font-weight: 800; }
.nx-ill__actions span.is-accent { margin-right: auto; background: var(--ill-accent); }

/* ---------- B2B: bayi portalı ---------- */
.nx-ill--portal { display: flex; flex-direction: column; background: #fff; }
.nx-ill__shop { display: flex; align-items: center; gap: 1.2em; padding: 0.8em 1.2em; border-bottom: 1px solid var(--ill-line); }
.nx-ill__brand { display: flex; align-items: center; gap: 0.5em; font-weight: 800; font-size: 0.9em; white-space: nowrap; }
.nx-ill__brand :is(b, .nx-b) { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: linear-gradient(135deg, var(--ill-accent), var(--ill-accent-2)); color: #fff; }
.nx-ill__shop nav { display: flex; gap: 1em; font-size: 0.75em; color: var(--ill-muted); }
.nx-ill__shop nav .is-on { color: var(--ill-accent); font-weight: 800; }
.nx-ill__shop .nx-ill__search { max-width: 30%; }
.nx-ill__cartbtn { position: relative; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--ill-soft); color: var(--ill-accent); font-size: 0.85em; }
.nx-ill__cartbtn em { position: absolute; top: -0.4em; right: -0.4em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ill-accent); color: #fff; font-style: normal; font-size: 0.7em; font-weight: 800; }
.nx-ill__shopbody { flex: 1; display: grid; grid-template-columns: 22% 1fr; gap: 1em; padding: 1em 1.2em; background: var(--ill-bg); min-height: 0; }
.nx-ill__filters { padding: 0.8em; border-radius: 0.7em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.72em; }
.nx-ill__filters p { margin: 0 0 0.5em; font-weight: 800; }
.nx-ill__filters p + ul + p { margin-top: 1.2em; }
.nx-ill__filters ul { list-style: none; margin: 0; padding: 0; }
.nx-ill__filters li { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0; color: var(--ill-muted); }
.nx-ill__filters li::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 0.2em; box-shadow: inset 0 0 0 1px #c7d1e0; }
.nx-ill__filters li.is-on { color: var(--ill-ink); font-weight: 600; }
.nx-ill__filters li.is-on::before { background: var(--ill-accent); box-shadow: none; }
.nx-ill__limit { height: 0.45em; border-radius: 99em; background: #eef1f6; overflow: hidden; }
.nx-ill__limit span { display: block; height: 100%; background: linear-gradient(90deg, var(--ill-ok), #5fd39c); }
.nx-ill__filters small { display: block; margin-top: 0.4em; color: var(--ill-muted); }
.nx-ill__products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.nx-ill__products li { position: relative; display: flex; flex-direction: column; gap: 0.2em; padding: 0.6em; border-radius: 0.7em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.75em; }
.nx-ill__products figure { display: grid; place-items: center; margin: 0 0 0.3em; aspect-ratio: 16 / 10; border-radius: 0.5em; background: linear-gradient(160deg, #1d2433, #31394a); }
.nx-ill__products svg { width: 46%; fill: var(--ill-accent-2); stroke: var(--ill-accent-2); }
.nx-ill__products small { color: var(--ill-muted); }
.nx-ill__products :is(b, .nx-b) { color: var(--ill-accent); font-size: 1.1em; }
.nx-ill__add { position: absolute; right: 0.6em; bottom: 0.6em; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 0.5em; background: var(--ill-accent); color: #fff; }
.nx-ill__products li:first-child .nx-ill__add { background: var(--ill-ok); }

/* ---------- Küçük panel (cihazın önündeki kart) ---------- */
.nx-ill--card { display: flex; flex-direction: column; aspect-ratio: 16 / 11; font-size: 3.6cqw; background: #fff; }
.nx-ill__cardtop { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.7em 0.9em; background: linear-gradient(135deg, var(--ill-accent), var(--ill-accent-2)); color: var(--ill-on); }
.nx-ill__cardtop :is(b, .nx-b) { font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ill__live { padding: 0.2em 0.6em; border-radius: 99em; background: rgba(255, 255, 255, 0.25); font-size: 0.7em; font-weight: 800; white-space: nowrap; }
.nx-ill__cardbody { flex: 1; display: flex; flex-direction: column; gap: 0.5em; padding: 0.8em 0.9em; min-height: 0; }
.nx-ill__kv { display: flex; justify-content: space-between; gap: 0.6em; margin: 0; font-size: 0.78em; }
.nx-ill__kv small { color: var(--ill-muted); }
.nx-ill__count { display: flex; align-items: baseline; gap: 0.4em; margin-top: auto; }
.nx-ill__count :is(b, .nx-b) { font-size: 2em; letter-spacing: -0.03em; }
.nx-ill__count small { color: var(--ill-muted); font-size: 0.8em; }
.nx-ill__btns { display: flex; gap: 0.4em; margin-top: auto; }
.nx-ill__btns span { flex: 1; padding: 0.55em 0.2em; border-radius: 0.45em; color: #fff; text-align: center; font-size: 0.68em; font-weight: 800; white-space: nowrap; }
.nx-ill__btns .is-ok { background: var(--ill-ok); }
.nx-ill__btns .is-info { background: var(--ill-blue); }
.nx-ill__btns .is-warn { background: var(--ill-warn); }
.nx-ill__btns .is-bad { background: var(--ill-bad); }
.nx-ill__mini { display: flex; gap: 0.6em; }
.nx-ill__mini p { flex: 1; margin: 0; padding: 0.5em 0.6em; border-radius: 0.5em; background: var(--ill-soft); }
.nx-ill__mini small { display: block; font-size: 0.65em; color: var(--ill-muted); }
.nx-ill__mini :is(b, .nx-b) { font-size: 1.05em; }
.nx-ill__chart { flex: 1; display: flex; align-items: flex-end; gap: 3%; padding-top: 0.4em; border-bottom: 1px solid var(--ill-line); min-height: 0; }
.nx-ill__chart i { flex: 1; border-radius: 0.2em 0.2em 0 0; background: linear-gradient(180deg, var(--ill-accent-2), var(--ill-accent)); transform-origin: bottom; }
.nx-ill__checks { list-style: none; margin: 0; padding: 0; }
.nx-ill__checks li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6em; padding: 0.45em 0; border-bottom: 1px solid var(--ill-line); font-size: 0.72em; }
.nx-ill__checks li span small { display: block; color: var(--ill-muted); font-size: 0.85em; }
.nx-ill__checks li > i { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #dff6ec; color: var(--ill-ok); font-size: 0.8em; }
.nx-ill__opt { display: flex; align-items: center; gap: 0.4em; margin: 0; font-size: 0.72em; }
.nx-ill__opt small { flex: 1; color: var(--ill-muted); }
.nx-ill__opt span { padding: 0.3em 0.7em; border-radius: 0.4em; box-shadow: inset 0 0 0 1px var(--ill-line); }
.nx-ill__opt span.is-on { background: var(--ill-soft); box-shadow: inset 0 0 0 1px var(--ill-accent); color: var(--ill-accent); font-weight: 800; }
.nx-ill__opt i { width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.nx-ill__opt i.is-on { box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em var(--ill-accent); }
.nx-ill__cta { margin-top: auto; padding: 0.6em; border-radius: 0.5em; background: #1fbf8f; color: #fff; text-align: center; font-size: 0.75em; font-weight: 800; }

/* ---------- El terminali / telefon ---------- */
.nx-device__phone--ill .nx-ill { border-radius: 20px; overflow: hidden; }
.nx-ill--phone { display: flex; flex-direction: column; gap: 0.7em; aspect-ratio: 9 / 17; font-size: 6.4cqw; background: #f2f5fa; }
.nx-ill__ph-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 1.6em 0.9em 0.8em; background: linear-gradient(135deg, var(--ill-accent), var(--ill-accent-2)); color: #fff; }
.nx-ill__ph-top span:not(.nx-b) { flex: 1; display: flex; flex-direction: column; }
.nx-ill__ph-top :is(b, .nx-b) { font-size: 0.95em; }
.nx-ill__ph-top small { font-size: 0.7em; opacity: 0.85; }
.nx-ill__steps { display: flex; align-items: center; gap: 0.3em; padding: 0 0.9em; }
.nx-ill__steps span { flex: 1; height: 0.3em; border-radius: 99em; background: #dbe3ef; }
.nx-ill__steps span.is-done { background: var(--ill-ok); }
.nx-ill__steps span.is-on { background: var(--ill-blue); }
.nx-ill__steps em { margin-left: 0.3em; font-style: normal; font-size: 0.66em; font-weight: 700; color: var(--ill-muted); white-space: nowrap; }
.nx-ill__ph-card { position: relative; margin: 0 0.7em; padding: 0.7em 0.8em; border-radius: 0.7em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); }
.nx-ill__ph-card small { display: block; font-size: 0.62em; color: var(--ill-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.nx-ill__ph-card > :is(b, .nx-b) { display: block; font-size: 0.9em; }
.nx-ill__ph-addr { background: #e9f8f1; box-shadow: inset 0 0 0 1px #b7e6cf; }
.nx-ill__ph-addr > :is(b, .nx-b) { font-size: 1.35em; letter-spacing: 0.02em; color: #0e7a4e; }
.nx-ill__ph-addr > i { position: absolute; right: 0.8em; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ill-ok); color: #fff; font-size: 0.8em; }
.nx-ill__barcode { position: relative; height: 1.9em; margin-top: 0.5em; overflow: hidden; }
.nx-ill__barcode svg { width: 100%; height: 100%; fill: var(--ill-ink); }
.nx-ill__scan { position: absolute; left: -4%; right: -4%; top: 0; height: 0.14em; background: #ff3b30; box-shadow: 0 0 0.5em #ff3b30; }
.nx-ill__ph-meta { display: flex; justify-content: space-between; margin: 0.4em 0 0; font-size: 0.62em; color: var(--ill-muted); }
.nx-ill__qty { display: flex; align-items: center; justify-content: space-between; margin: 0 0.7em; }
.nx-ill__qty button { width: 2em; height: 2em; border: 0; border-radius: 0.5em; background: #fff; box-shadow: inset 0 0 0 1px var(--ill-line); font-size: 0.9em; font-weight: 700; color: var(--ill-ink); }
.nx-ill__qty :is(b, .nx-b) { font-size: 1.4em; font-variant-numeric: tabular-nums; }
.nx-ill__qty small { font-size: 0.6em; color: var(--ill-muted); }
.nx-ill__ph-ok { display: flex; align-items: center; gap: 0.4em; margin: 0 0.7em; font-size: 0.62em; font-weight: 700; color: #0e7a4e; }
.nx-ill__ph-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; font-size: 0.66em; font-weight: 700; text-align: center; color: #fff; }
.nx-ill__ph-tabs span { padding: 1.1em 0 1.5em; background: #1f6fe5; }
.nx-ill__ph-tabs span.is-stop { background: #e5484d; }
.nx-ill__ph-tabs span.is-go { background: var(--ill-ok); }
.nx-ill__ph-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.nx-ill__ph-line span:not(.nx-b) { display: flex; flex-direction: column; font-size: 0.82em; }
.nx-ill__ph-line span small { text-transform: none; letter-spacing: 0; }
.nx-ill__ph-line > :is(b, .nx-b) { font-size: 0.82em; }
.nx-ill__ph-sum { display: flex; flex-direction: column; margin: auto 0.9em 0; }
.nx-ill__ph-sum small { font-size: 0.62em; color: var(--ill-muted); }
.nx-ill__ph-sum :is(b, .nx-b) { font-size: 1.35em; }
.nx-ill__ph-cta { padding: 1.1em 0 1.5em; background: var(--ill-accent); color: #fff; text-align: center; font-size: 0.72em; font-weight: 800; }

/* ---------- Hareket: slider'da etkin sahnede, ürün sayfası hero'sunda her zaman ---------- */
:is(.nx-slide.is-active, .nx-phero) .nx-ill__scan { animation: nx-ill-scan 2.4s ease-in-out infinite; }
@keyframes nx-ill-scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 0.14em); } }
:is(.nx-slide.is-active, .nx-phero) .nx-ill__route { animation: nx-ill-dash 1.2s linear infinite; }
@keyframes nx-ill-dash { to { stroke-dashoffset: -14; } }
.nx-ill__pin { opacity: 0; transform-box: fill-box; transform-origin: center; }
:is(.nx-slide.is-active, .nx-phero) .nx-ill__pin { animation: nx-ill-pop 0.5s var(--nx-ease) forwards; animation-delay: calc(0.6s + var(--d)); }
@keyframes nx-ill-pop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
:is(.nx-slide.is-active, .nx-phero) .nx-ill__chart i { animation: nx-ill-grow 0.8s var(--nx-ease) both; animation-delay: calc(0.4s + var(--i) * 0.04s); }
@keyframes nx-ill-grow { from { scale: 1 0; } to { scale: 1 1; } }
:is(.nx-slide.is-active, .nx-phero) .nx-ill__tile--run .nx-ill__bar i { animation: nx-ill-fill 1.4s var(--nx-ease) both 0.5s; transform-origin: left; }
@keyframes nx-ill-fill { from { scale: 0 1; } to { scale: 1 1; } }
:is(.nx-slide.is-active, .nx-phero) .nx-ill__live { animation: nx-ill-blink 2s ease-in-out infinite; }
@keyframes nx-ill-blink { 50% { background: rgba(255, 255, 255, 0.45); } }
@media (prefers-reduced-motion: reduce) {
    .nx-ill__pin { opacity: 1; }
    .nx-ill *, .nx-ill *::before { animation: none !important; }
}

/* ==========================================================================
   Saha sahneleri (module/scenes.php): depo, üretim, kalite — hizmet sayfası hero'ları
   ========================================================================== */
.nx-scene { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #0c1a31; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -40px rgba(0, 0, 0, 0.7); }
.nx-scene svg { display: block; width: 100%; height: auto; font-family: inherit; }
.nx-scene svg * { transform-box: fill-box; }
.nx-scene__chip { position: absolute; display: flex; align-items: center; gap: 10px; max-width: 62%; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.55); color: #0b1628; opacity: 0; animation: nx-sc-chip 8s infinite; }
.nx-scene__chip i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #e8f0fc; color: #1f6fe5; font-size: 13px; }
.nx-scene__chip :is(b, .nx-b) { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.nx-scene__chip small { display: block; margin-top: 2px; font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-scene__chip--a { top: 5%; left: 4%; }
.nx-scene__chip--b { right: 4%; bottom: 6%; animation-delay: 4s; }
.nx-scene__chip--b i { background: #dcf5e7; color: #16a34a; }
.nx-scene--uretim .nx-scene__chip--a i { background: #dcf5e7; color: #16a34a; }
.nx-scene--kalite .nx-scene__chip--a i { background: #ede7ff; color: #7c4dff; }
@keyframes nx-sc-chip { 0% { opacity: 0; transform: translateY(10px); } 6%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-6px); } }

/* Depo */
.nx-sc-fork { animation: nx-sc-fork 12s linear infinite; }
@keyframes nx-sc-fork { from { transform: translateX(-200px); } to { transform: translateX(760px); } }
.nx-sc-wheel { transform-origin: center; animation: nx-sc-spin 0.9s linear infinite; }
.nx-sc-beam { animation: nx-sc-beam 2.4s ease-in-out infinite; }
@keyframes nx-sc-beam { 0%, 30% { opacity: 0; } 40%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
.nx-sc-hit { opacity: 0; animation: nx-sc-hit 2.4s ease-in-out infinite; }
@keyframes nx-sc-hit { 0%, 55% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* Üretim */
.nx-sc-items { animation: nx-sc-items 3s linear infinite; }
@keyframes nx-sc-items { from { transform: translateX(0); } to { transform: translateX(150px); } }
.nx-sc-belt { animation: nx-sc-belt 0.48s linear infinite; }
@keyframes nx-sc-belt { to { stroke-dashoffset: -24; } }
.nx-sc-roll { transform-origin: center; animation: nx-sc-spin 0.9s linear infinite; }
.nx-sc-press { animation: nx-sc-press 3s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes nx-sc-press { 0%, 30% { transform: translateY(0); } 44%, 52% { transform: translateY(30px); } 70%, 100% { transform: translateY(0); } }
.nx-sc-led { animation: nx-sc-blink 1.2s steps(2, jump-none) infinite; }
@keyframes nx-sc-blink { 50% { opacity: 0.35; } }
.nx-sc-gear { transform-origin: center; animation: nx-sc-spin 4s linear infinite; }
.nx-sc-prog { transform-origin: left center; animation: nx-sc-prog 8s ease-in-out infinite; }
@keyframes nx-sc-prog { 0% { transform: scaleX(0.12); } 90%, 100% { transform: scaleX(1); } }
.nx-sc-screen { transform-origin: left center; animation: nx-sc-prog 3s ease-in-out infinite; }
.nx-sc-tap { transform-origin: center; animation: nx-sc-tap 2.4s ease-in-out infinite; }
@keyframes nx-sc-tap { 0%, 70%, 100% { transform: none; } 80% { transform: scale(0.8); } }
.nx-sc-lamp { animation: nx-sc-lamp 5s ease-in-out infinite; }
@keyframes nx-sc-lamp { 50% { opacity: 0.6; } }

/* Kalite */
.nx-sc-lens { animation: nx-sc-lens 8s ease-in-out infinite; }
@keyframes nx-sc-lens { 0% { transform: translateX(-28px); } 15% { transform: translateX(26px); } 30% { transform: translateX(-20px); } 45% { transform: translateX(20px); } 60%, 100% { transform: translateX(-28px); opacity: 1; } }
.nx-sc-check { opacity: 0; transform-origin: center; animation: nx-sc-check 8s infinite; }
.nx-sc-check--2 { animation-name: nx-sc-check2; }
.nx-sc-check--3 { animation-name: nx-sc-check3; }
.nx-sc-check--4 { animation-name: nx-sc-check4; }
@keyframes nx-sc-check { 0%, 12% { opacity: 0; transform: scale(0.4); } 16%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nx-sc-check2 { 0%, 26% { opacity: 0; transform: scale(0.4); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nx-sc-check3 { 0%, 40% { opacity: 0; transform: scale(0.4); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nx-sc-check4 { 0%, 54% { opacity: 0; transform: scale(0.4); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nx-sc-stamp { opacity: 0; transform-origin: center; animation: nx-sc-stamp 8s infinite; }
@keyframes nx-sc-stamp { 0%, 62% { opacity: 0; transform: scale(1.6) rotate(-8deg); } 66%, 94% { opacity: 1; transform: rotate(-8deg); } 100% { opacity: 0; transform: rotate(-8deg); } }
.nx-sc-sample { animation: nx-sc-sample 8s ease-in-out infinite; }
@keyframes nx-sc-sample {
    0% { opacity: 0; transform: none; } 5%, 68% { opacity: 1; transform: none; }
    78% { transform: translate(180px, -60px); } 88%, 95% { opacity: 1; transform: translate(366px, 106px); }
    100% { opacity: 0; transform: translate(366px, 106px); }
}

@keyframes nx-sc-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .nx-scene { border-radius: 16px; }
    .nx-scene__chip { gap: 8px; padding: 7px 10px 7px 7px; border-radius: 11px; }
    .nx-scene__chip i { width: 26px; height: 26px; font-size: 11px; }
    .nx-scene__chip :is(b, .nx-b) { font-size: 11.5px; }
    .nx-scene__chip small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-scene *, .nx-scene__chip { animation: none !important; }
    .nx-scene__chip--a, .nx-sc-check, .nx-sc-stamp, .nx-sc-hit { opacity: 1; }
}
/* Sahne başlangıcı: forklift ve ilk bilgi kartı sayfa açılınca görünür; kartlar rafların üstünü kapatmasın */
.nx-sc-fork { animation-delay: -5s; }
.nx-scene__chip--a { animation-delay: -0.8s; }
.nx-scene--depo .nx-scene__chip--a { top: auto; bottom: 4%; }
.nx-scene--depo .nx-scene__chip--b { top: 3%; bottom: auto; }
.nx-scene--kalite .nx-scene__chip--a { left: auto; right: 4%; }
.nx-scene--kalite .nx-scene__chip--b { right: auto; left: 4%; bottom: 4%; }
.nx-sc-sample, .nx-sc-lens, .nx-sc-check, .nx-sc-stamp { animation-delay: -0.6s; }

/* Uygulama danışmanlığı: kart panoda ilerler, kod satırları yazılır, telefon ekranı oluşur */
.nx-sc-card { animation: nx-sc-card 8s ease-in-out infinite; animation-delay: -0.6s; }
@keyframes nx-sc-card { 0%, 18% { transform: none; } 34%, 52% { transform: translate(98px, -46px); } 68%, 92% { transform: translate(196px, 0); } 100% { transform: translate(196px, 0); opacity: 0; } }
.nx-sc-code { transform-origin: left center; animation: nx-sc-type 8s steps(6, end) infinite; }
.nx-sc-code--2 { animation-name: nx-sc-type2; } .nx-sc-code--3 { animation-name: nx-sc-type3; } .nx-sc-code--4 { animation-name: nx-sc-type4; }
.nx-sc-code--5 { animation-name: nx-sc-type5; } .nx-sc-code--6 { animation-name: nx-sc-type6; } .nx-sc-code--7 { animation-name: nx-sc-type7; }
@keyframes nx-sc-type { 0% { transform: scaleX(0); } 8%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type2 { 0%, 8% { transform: scaleX(0); } 18%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type3 { 0%, 18% { transform: scaleX(0); } 28%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type4 { 0%, 28% { transform: scaleX(0); } 38%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type5 { 0%, 38% { transform: scaleX(0); } 48%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type6 { 0%, 48% { transform: scaleX(0); } 58%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-sc-type7 { 0%, 58% { transform: scaleX(0); } 68%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.nx-sc-app { opacity: 0; transform-origin: center; animation: nx-sc-app 8s infinite; }
.nx-sc-app--2 { animation-name: nx-sc-app2; } .nx-sc-app--3 { animation-name: nx-sc-app3; }
@keyframes nx-sc-app { 0%, 62% { opacity: 0; transform: scale(0.6); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nx-sc-app2 { 0%, 70% { opacity: 0; transform: scale(0.6); } 76%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nx-sc-app3 { 0%, 78% { opacity: 0; transform: scale(0.6); } 84%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Bulut bilişim: kabin ışıkları, buluta veri akışı, kalkan halkası */
.nx-sc-dot { animation: nx-sc-blink 1.4s steps(2, jump-none) infinite; }
.nx-sc-dot--2 { animation-duration: 0.9s; } .nx-sc-dot--3 { animation-duration: 1.9s; animation-delay: -0.5s; } .nx-sc-dot--4 { animation-duration: 1.1s; animation-delay: -0.3s; }
.nx-sc-flow { animation: nx-sc-flow 1.2s linear infinite; }
.nx-sc-flow--2 { animation-duration: 1.5s; } .nx-sc-flow--3 { animation-duration: 1.8s; }
@keyframes nx-sc-flow { to { stroke-dashoffset: -32; } }
.nx-sc-ring { transform-origin: center; animation: nx-sc-ring 2.6s ease-out infinite; }
@keyframes nx-sc-ring { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .nx-sc-app { opacity: 1; }
    .nx-sc-code { transform: none; }
}
.nx-sc-code { animation-delay: -4.6s; }
.nx-sc-app { animation-delay: -6.9s; }
.nx-scene--uygulama .nx-scene__chip--a { left: auto; right: 4%; top: 6%; }
.nx-scene--bulut .nx-scene__chip--a { top: auto; bottom: 5%; }

/* Saha sahnesi olan hero'larda görsel daha geniş yer alır */
@media (min-width: 992px) {
    .nx-phero--split .nx-phero__grid:has(.nx-scene) { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: clamp(32px, 4vw, 56px); }
    .nx-phero__visual:has(.nx-scene) { margin-right: clamp(-48px, -2vw, 0px); }
}

/* Grup şirketleri sahnesi: yörüngeler, nabız, süzülen kartlar ve parçacıklar */
.nx-sc-orbit { transform-origin: center; animation: nx-sc-spin 40s linear infinite; }
.nx-sc-orbit--rev { animation-duration: 60s; animation-direction: reverse; }
.nx-sc-pulse { transform-origin: center; animation: nx-sc-gpulse 3.2s ease-out infinite; }
@keyframes nx-sc-gpulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.3); opacity: 0; } }
.nx-sc-node { animation: nx-sc-bob 6s ease-in-out infinite; }
.nx-sc-node:nth-of-type(2n) { animation-delay: -2s; }
@keyframes nx-sc-bob { 50% { transform: translateY(-5px); } }
.nx-sc-float { animation: nx-sc-float 7s ease-in-out infinite; }
.nx-sc-float--2 { animation-duration: 9s; animation-delay: -3s; }
.nx-sc-float--3 { animation-duration: 11s; animation-delay: -5s; }
@keyframes nx-sc-float { 0%, 100% { transform: translateY(0); opacity: 0.25; } 50% { transform: translateY(-16px); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .nx-sc-packet { display: none; } }
/* Holding binası: pencere ışıkları, çatı ışığı, cam parıltısı */
.nx-sc-win { animation: nx-sc-win 4s ease-in-out infinite; }
.nx-sc-win--2 { animation-duration: 5.5s; animation-delay: -2s; }
.nx-sc-win--3 { animation-duration: 7s; animation-delay: -4s; }
@keyframes nx-sc-win { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.25; } 55% { opacity: 0.25; } }
.nx-sc-beacon { animation: nx-sc-blink 1.6s steps(2, jump-none) infinite; }
.nx-sc-shine { animation: nx-sc-shine 6s ease-in-out infinite; }
@keyframes nx-sc-shine { 0%, 40% { transform: translateX(-80px); } 80%, 100% { transform: translateX(200px); } }