/* codebypanic — UI elementi umjesto slika.
   Sve mjere su u "dizajn pikselima" originalne slike (Nu = N * --u),
   pa se element skalira tačno kao nekadašnja slika. */

.mk {
  --c-line: rgba(255, 255, 255, 0.1);
  --c-line-2: #3a302a;
  --c-dim: rgba(255, 255, 255, 0.4);
  --c-mute: rgba(255, 255, 255, 0.6);
  --c-cyan: var(--accent-2, #ffb547);
  --c-pink: var(--accent, #ff5a1f);
  --c-green: #13a043;
  --c-panel: rgba(11, 9, 7, 0.45);
  --c-solid: var(--bg, #0b0907);
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, sans-serif;
  container-type: inline-size;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

.mk-stage {
  position: relative;
  width: 100%;
  font-family: var(--sans);
  color: #fff;
}

.mk-stage *,
.mk-stage *::before,
.mk-stage *::after {
  box-sizing: border-box;
}

.mk-stage i {
  font-style: normal;
}

.mk-abs {
  position: absolute;
}

/* ---------- panel s tabovima ---------- */
.mk-win {
  position: absolute;
  background: var(--c-panel);
  border: calc(1 * var(--u)) solid var(--c-line);
  border-radius: calc(24 * var(--u));
  overflow: hidden;
}

.mk-win.is-solid {
  background: var(--c-solid);
  border-color: var(--c-line-2);
}

.mk-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--head-h);
  border-bottom: calc(1 * var(--u)) solid var(--c-line);
}

.mk-rail {
  position: absolute;
  left: var(--rail-l, calc(8 * var(--u)));
  right: var(--rail-r, calc(8 * var(--u)));
  top: var(--rail-t, calc(8 * var(--u)));
  bottom: calc(-1 * var(--u));
  display: flex;
}

.mk-tab,
.mk-fill {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 var(--tab-pad, calc(12 * var(--u)));
  font: 400 var(--tab-fs, calc(12.5 * var(--u))) / 1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  border: calc(1 * var(--u)) solid var(--c-line);
  border-bottom: 0;
  border-left-width: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mk-tab:first-child {
  border-left-width: calc(1 * var(--u));
  border-top-left-radius: calc(8 * var(--u));
}

.mk-fill {
  flex: 1;
  justify-content: flex-end;
  cursor: default;
  border-top-right-radius: calc(8 * var(--u));
}

.mk-tab:hover {
  color: rgba(255, 255, 255, 0.75);
}

.mk-tab:focus-visible {
  outline: calc(1 * var(--u)) solid var(--c-cyan);
  outline-offset: calc(-3 * var(--u));
}

.mk-tab.is-active {
  color: #fff;
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.mk-tab.r-left {
  border-left-width: calc(1 * var(--u));
  border-top-left-radius: calc(8 * var(--u));
}

.mk-fill.r-left {
  border-left-width: calc(1 * var(--u));
  border-top-left-radius: calc(8 * var(--u));
}

.mk-tab.r-right {
  border-top-right-radius: calc(8 * var(--u));
}

/* sjaj ispod aktivnog taba */
.mk-glow {
  position: absolute;
  top: var(--head-h);
  height: calc(24 * var(--u));
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.17),
    rgba(255, 255, 255, 0)
  );
}

.mk-logo {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

/* ---------- kod ---------- */
.mk-pane {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--code-t);
  margin: 0;
  font: 400 var(--code-fs, calc(12 * var(--u))) / var(--code-lh, calc(20 * var(--u))) var(--mono);
  letter-spacing: var(--code-ls, calc(0.2 * var(--u)));
  white-space: pre;
  color: #fff;
  counter-reset: ln;
}

.mk-pane[hidden] {
  display: none;
}

.mk-pane > span {
  display: block;
  position: relative;
  min-height: var(--code-lh, calc(20 * var(--u)));
  padding-left: var(--code-x);
}

.mk-pane.has-ln > span::before {
  counter-increment: ln;
  content: counter(ln);
  position: absolute;
  left: 0;
  width: var(--ln-r);
  text-align: right;
  font-family: var(--sans);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.4);
}

.mk .k {
  color: var(--c-mute);
}
.mk .s {
  color: var(--c-cyan);
}
.mk .p {
  color: var(--c-pink);
}
.mk .g {
  color: var(--c-green);
}
.mk .w {
  color: #fff;
}

/* ========== HERO (1056 x 605) ========== */
.mk-hero .mk-stage {
  --u: calc(100cqw / 1056);
  aspect-ratio: 1056 / 605;
}

.mk-hero .mk-win {
  inset: 0;
  background: rgba(11, 9, 7, 0.5);
  --head-h: calc(48.5 * var(--u));
  --rail-r: calc(16 * var(--u));
  --tab-pad: calc(24.5 * var(--u));
  --tab-fs: calc(14 * var(--u));
  --code-t: calc(93 * var(--u));
  --code-x: calc(58 * var(--u));
  --ln-r: calc(47 * var(--u));
  --code-fs: calc(12 * var(--u));
}

.mk-hero .mk-fill {
  padding-right: calc(10 * var(--u));
}

.mk-hero .mk-logo {
  opacity: 0.6;
}

/* ========== CTA (600 x 640) ========== */
.mk-cta .mk-stage {
  --u: calc(100cqw / 600);
  aspect-ratio: 600 / 640;
  overflow: hidden;
}

.mk-cta .mk-win {
  --head-h: calc(33 * var(--u));
  --rail-t: calc(6 * var(--u));
  --tab-pad: calc(12 * var(--u));
  --tab-fs: calc(12.5 * var(--u));
  --code-t: calc(48 * var(--u));
  --code-fs: calc(12.5 * var(--u));
  --code-ls: calc(0.1 * var(--u));
}

.mk-cta .w-sdk {
  left: 0;
  top: 0;
  width: calc(600 * var(--u));
  height: calc(300 * var(--u));
  --code-x: calc(49.5 * var(--u));
  --ln-r: calc(37 * var(--u));
}

.mk-cta .w-vendor {
  left: 0;
  top: calc(308 * var(--u));
  width: calc(372 * var(--u));
  height: calc(220 * var(--u));
  --code-x: calc(43.5 * var(--u));
  --ln-r: calc(31 * var(--u));
}

.mk-cta .w-enc {
  left: calc(380 * var(--u));
  top: calc(308 * var(--u));
  width: calc(220 * var(--u));
  height: calc(220 * var(--u));
}

.mk-cta .w-flow {
  left: 0;
  top: calc(536 * var(--u));
  width: calc(600 * var(--u));
  height: calc(130 * var(--u));
}

/* šifrovana mreža znakova */
.mk-enc {
  position: absolute;
  margin: 0;
  font: 400 var(--enc-fs, calc(10 * var(--u))) / var(--enc-lh, calc(12.5 * var(--u))) var(--mono);
  letter-spacing: var(--enc-ls, calc(2.45 * var(--u)));
  white-space: pre;
  color: rgba(255, 255, 255, 0.4);
}

.mk-enc b,
.mk-enc .h {
  font-weight: 400;
  color: #fff;
}

.mk-cta .mk-enc {
  left: calc(14.5 * var(--u));
  top: calc(16 * var(--u));
}

/* kutije (Your Server / External API / Nano API ...) */
.mk-box {
  position: absolute;
  background: var(--c-solid);
  border: calc(1 * var(--u)) solid var(--c-line-2);
  border-radius: calc(8 * var(--u));
  display: grid;
  grid-template-columns: calc(39 * var(--u)) 1fr;
  grid-template-rows: var(--box-head, calc(35 * var(--u))) 1fr;
  overflow: hidden;
}

.mk-box > .bx-ico,
.mk-box > .bx-title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: calc(1 * var(--u)) solid var(--c-line-2);
}

.mk-box > .bx-ico {
  border-right: calc(1 * var(--u)) solid var(--c-line-2);
  font: 400 calc(13 * var(--u))/1 var(--mono);
}

.mk-box > .bx-title {
  font-size: calc(14 * var(--u));
}

.mk-box > .bx-body {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 calc(11.5 * var(--u))/1 var(--mono);
  letter-spacing: calc(0.3 * var(--u));
  color: rgba(255, 255, 255, 0.85);
  white-space: pre;
}

/* svijetleće "pilule" (Functions / Relays) */
.mk-chip {
  position: absolute;
  display: grid;
  grid-template-columns: calc(39 * var(--u)) 1fr;
  align-items: stretch;
  border-radius: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  overflow: visible;
}

.mk-chip > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-chip > span:first-child {
  border-right: calc(1 * var(--u)) solid var(--chip-div);
}

.mk-chip .mk-logo {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.mk-chip.is-purple {
  --chip-div: #7a2c10;
  background: radial-gradient(ellipse 60% 70% at 55% 50%, #3d1405, #b23c10);
  border: calc(1 * var(--u)) solid #ff8a5c;
  box-shadow: 0 0 calc(22 * var(--u)) calc(3 * var(--u)) rgba(255, 90, 31, 0.7), 0 0 calc(6 * var(--u)) rgba(255, 140, 90, 0.5);
}

.mk-chip.is-green {
  --chip-div: #337148;
  background: radial-gradient(ellipse 60% 70% at 55% 50%, #0b342b, #19723f);
  border: calc(1 * var(--u)) solid #6fcd73;
  box-shadow: 0 0 calc(22 * var(--u)) calc(3 * var(--u)) rgba(40, 210, 90, 0.7), 0 0 calc(6 * var(--u)) rgba(110, 230, 120, 0.45);
}

.mk-dash {
  position: absolute;
  height: max(1px, calc(1 * var(--u)));
  background: repeating-linear-gradient(
    to right,
    var(--dash-c, rgba(255, 255, 255, 0.35)) 0 calc(4 * var(--u)),
    transparent calc(4 * var(--u)) calc(6 * var(--u))
  );
}

.mk-dash.is-v {
  width: max(1px, calc(1 * var(--u)));
  height: auto;
  background: repeating-linear-gradient(
    to bottom,
    var(--dash-c, rgba(255, 255, 255, 0.35)) 0 calc(4 * var(--u)),
    transparent calc(4 * var(--u)) calc(6 * var(--u))
  );
}

/* paket podataka koji putuje linijom */
.mk-pulse {
  position: absolute;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  margin: calc(-2 * var(--u)) 0 0 calc(-2.5 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) currentColor;
  opacity: 0;
}

/* ========== TERMINAL / CODE-CAGES (468 x 280) ========== */
.mk-term .mk-stage,
.mk-fn .mk-stage {
  --u: calc(100cqw / 468);
  aspect-ratio: 468 / 280;
}

.mk-term .mk-win,
.mk-fn .mk-win {
  inset: 0;
  --head-h: calc(33 * var(--u));
  --rail-t: calc(6 * var(--u));
  --rail-r: calc(9 * var(--u));
  --tab-pad: calc(12 * var(--u));
  --tab-fs: calc(12.5 * var(--u));
}

.mk-term .mk-tab.is-active {
  padding-right: calc(13 * var(--u));
}

.mk-cells {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24.5 * var(--u));
  top: calc(48 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  font: 400 calc(12.5 * var(--u))/calc(20 * var(--u)) var(--mono);
  letter-spacing: calc(0.1 * var(--u));
}

.mk-cell {
  display: grid;
  grid-template-columns: calc(42 * var(--u)) 1fr;
  align-items: start;
}

.mk-cell > i {
  font-style: normal;
  padding-top: calc(3 * var(--u));
  color: rgba(255, 255, 255, 0.3);
}

.mk-cell > div {
  padding: calc(3 * var(--u)) calc(8.5 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgba(255, 255, 255, 0.1);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.06);
  white-space: pre;
}

.mk-fn .mk-win {
  --code-t: calc(48 * var(--u));
  --code-x: calc(50.5 * var(--u));
  --ln-r: calc(37 * var(--u));
  --code-fs: calc(12.5 * var(--u));
  --code-ls: calc(0.1 * var(--u));
}

/* ========== INBOUND / OUTBOUND (601 x 250) ========== */
.mk-io .mk-stage {
  --u: calc(100cqw / 601);
  aspect-ratio: 601 / 250;
  overflow: hidden;
  background-color: rgba(11, 9, 7, 0.5);
  background-image: linear-gradient(var(--c-line) calc(1 * var(--u)), transparent calc(1 * var(--u))),
    linear-gradient(90deg, var(--c-line) calc(1 * var(--u)), transparent calc(1 * var(--u)));
  background-size: calc(25 * var(--u)) calc(25 * var(--u));
  background-position: calc(-0.5 * var(--u)) calc(-0.5 * var(--u));
  border-radius: 0 0 calc(50 * var(--u)) calc(50 * var(--u));
}

.mk-pill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(6 * var(--u));
  background: #211914;
  font: 400 calc(11.5 * var(--u))/1 var(--mono);
  letter-spacing: calc(0.3 * var(--u));
  color: rgba(255, 255, 255, 0.6);
  white-space: pre;
}

.mk-card {
  position: absolute;
  width: calc(95 * var(--u));
  height: calc(115 * var(--u));
  border-radius: calc(10 * var(--u));
  border: calc(1 * var(--u)) solid #a39a93;
  background: var(--c-solid);
}

.mk-card svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mk-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(13.5 * var(--u));
  white-space: nowrap;
}

/* ========== SDK IKONE (432 x 299) ========== */
.mk-sdk .mk-stage {
  --u: calc(100cqw / 432);
  aspect-ratio: 432 / 299;
  overflow: hidden;
  border-radius: calc(42 * var(--u)) calc(42 * var(--u)) 0 0;
}

.mk-bowl {
  position: absolute;
  border-radius: 50%;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
}

.mk-orb {
  position: absolute;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  margin: calc(-36 * var(--u)) 0 0 calc(-36 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mk-orb:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
}

.mk-orb svg {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  fill: #fff;
}

.mk-orb .php {
  font: italic 700 calc(19 * var(--u))/1 var(--sans);
  letter-spacing: calc(-0.5 * var(--u));
}

/* ========== OPERATIONS pozadina (1056 x 440) — u .flow-lg ========== */
.flow.flow-lg {
  background-image: linear-gradient(315deg, var(--surface), rgba(33, 22, 15, 0)) !important;
}

.flow.flow-lg > .flow-copy {
  position: relative;
  z-index: 1;
}

.mk-ops {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: normal;
}

.mk-ops .mk-stage {
  --u: 1px; /* JS postavlja tačnu vrijednost (cover) */
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1056 * var(--u));
  height: calc(440 * var(--u));
}

.ops-top {
  left: calc(487 * var(--u));
  top: calc(-1 * var(--u));
  right: calc(-40 * var(--u));
  height: calc(39.5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(70 * var(--u)) 0 calc(31.5 * var(--u));
  background: var(--c-panel);
  border: calc(1 * var(--u)) solid var(--c-line);
  border-bottom-left-radius: calc(24 * var(--u));
  font: 400 calc(12.5 * var(--u))/1 var(--mono);
  letter-spacing: calc(0.3 * var(--u));
  color: rgba(255, 255, 255, 0.78);
}

.ops-top b {
  font-weight: 400;
  color: #fff;
}

.ops-field {
  right: calc(289.5 * var(--u));
  height: calc(34.5 * var(--u));
  padding: 0 calc(15 * var(--u));
  display: flex;
  align-items: center;
  background: var(--c-solid);
  border: calc(1 * var(--u)) solid var(--c-line-2);
  border-radius: calc(8 * var(--u));
  font: 400 calc(12 * var(--u))/1 var(--mono);
  letter-spacing: calc(0.3 * var(--u));
  white-space: pre;
}

.ops-bar {
  left: 0;
  right: 0;
  top: calc(331 * var(--u));
  bottom: 0;
  border-top: calc(1 * var(--u)) solid #2a211b;
  border-top-left-radius: calc(24 * var(--u));
  background: linear-gradient(
    to bottom,
    rgba(11, 9, 7, 0.96),
    rgba(11, 9, 7, 0.55) 45%,
    rgba(11, 9, 7, 0)
  );
}

.ops-dot {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.ops-url {
  left: calc(113 * var(--u));
  top: calc(339 * var(--u));
  width: calc(400 * var(--u));
  height: calc(40 * var(--u));
  padding-left: calc(16.5 * var(--u));
  display: flex;
  align-items: center;
  border-top-left-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.065);
  font-size: calc(14 * var(--u));
  color: rgba(255, 255, 255, 0.75);
}

.ops-enc {
  left: calc(487 * var(--u));
  top: calc(296 * var(--u));
  width: calc(407 * var(--u));
  height: calc(200 * var(--u));
  background: var(--c-solid);
  border: calc(1 * var(--u)) solid var(--c-line-2);
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  overflow: hidden;
}

.ops-enc .mk-enc {
  --enc-fs: calc(9.5 * var(--u));
  --enc-lh: calc(12.4 * var(--u));
  --enc-ls: calc(5.3 * var(--u));
  left: calc(14.5 * var(--u));
  top: calc(16.3 * var(--u));
}

/* ---------- zamjena za stara pravila koja su ciljala <img> ---------- */
.flow-img .mk {
  position: relative;
  bottom: -2em;
}

.flow.flow-sm-img .flow-img .mk {
  bottom: 0;
}

.flow.flow-sm-rev .flow-img .mk {
  top: 0;
}

@media (max-width: 900px) {
  .cta-1 .mk {
    margin-top: 4em;
  }
}