/* Shared October meeting product scenes. Router behavior/styles follow opcrouter.com.tr. */
/* router scene */
.router-scene {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(188px, 15vw, 204px) minmax(0, 1fr);
  gap: 0 clamp(30px, 4.6vw, 70px);
  margin-right: calc(-1 * clamp(0px, (100vw - 1216px) / 2 - 24px, 72px));
  align-items: center;
  padding: 10px 0 34px;
}
.rs-col {
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.rs-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.rs-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 9px 12px 9px 9px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.28s var(--ease),
    border-color 0.2s,
    box-shadow 0.28s;
}
.rs-node:hover,
.rs-node:focus-visible,
.rs-node.is-hot {
  transform: translateY(-2px);
  border-color: var(--sky);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.rs-node[data-dir="out"]:hover,
.rs-node[data-dir="out"]:focus-visible,
.rs-node[data-dir="out"].is-hot {
  border-color: var(--orange-deep);
}
.rs-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  background: var(--sky-soft);
  color: var(--blue);
}
.rs-node[data-dir="out"] .rs-icon {
  background: var(--orange-soft);
  color: #8f520f;
}
.rs-icon .ico {
  width: 22px;
  height: 22px;
}
.rs-text {
  min-width: 0;
}
.rs-text strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}
.rs-text small {
  display: block;
  font-size: 0.72rem;
  color: var(--faint);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-short {
  display: none;
}
.rs-hub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 320px;
  justify-content: center;
  padding: 24px 14px 20px;
  text-align: center;
  color: #fff;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  box-shadow: 0 34px 60px -32px #262262bb;
}
.rs-hub-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1.5px solid #ffffff44;
  background: #ffffff14;
}
.rs-hub-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid #ffffff44;
  opacity: 0;
}
.rs-hub.is-pulse .rs-hub-ring::after {
  animation: hubPulse 0.9s var(--ease);
}
@keyframes hubPulse {
  from {
    opacity: 0.95;
    transform: scale(0.86);
  }
  to {
    opacity: 0;
    transform: scale(1.32);
  }
}
.rs-hub strong {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.rs-hub-sub {
  font-size: 0.8rem;
  color: #c6d8ee;
}
.rs-steps {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 0.68rem;
  font-weight: 650;
}
.rs-steps li {
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #ffffff30;
  color: #c6d8ee;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.rs-steps li.is-on {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}
.rs-desc {
  margin: 12px 0 0;
  min-height: 4.2em;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #dbe7f6;
  transition: opacity 0.25s;
}
.rs-desc.is-swap {
  opacity: 0;
}
.rs-legend {
  grid-column: 1 / -1;
  display: flex;
  gap: 22px;
  justify-content: center;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.74rem;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.rs-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rs-legend li::before {
  content: "";
  width: 12px;
  height: 8px;
  border-radius: 3px;
  background: var(--sky);
}
.rs-legend .out::before {
  background: var(--orange);
}
.rs-track {
  fill: none;
  stroke: #cbd9e7;
  stroke-width: 2;
  stroke-linecap: round;
  transition:
    stroke 0.2s,
    stroke-width 0.2s;
}
.rs-flow {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: 0.6;
  animation: rsDash 1.7s linear infinite;
}
.rs-flow.in {
  stroke: var(--sky);
}
.rs-flow.out {
  stroke: var(--orange-deep);
}
.rs-flow.rev {
  animation-direction: reverse;
}
@keyframes rsDash {
  to {
    stroke-dashoffset: -24;
  }
}
.rs-track.is-hot {
  stroke: var(--sky);
  stroke-width: 2.8;
}
.rs-track.out.is-hot {
  stroke: var(--orange-deep);
}
.rs-flow.is-hot {
  opacity: 1;
}
.rs-packet {
  stroke: #fff;
  stroke-width: 1.6;
  paint-order: stroke;
}
.rs-packet.in {
  fill: var(--sky);
}
.rs-packet.out {
  fill: var(--orange-deep);
}


/* Current product palette: blue inbound data and green return data. */
.router-scene { --sky: #21498a; --sky-soft: #e6edf8; --orange: #b9e6ce; --orange-deep: #2b7755; --orange-soft: #eaf5ef; }
.rs-hub { background: linear-gradient(135deg, #21498a 0%, #21498a 50%, #315244 50%, #315244 100%); }
.rs-hub .product-maker { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; }
.rs-node:hover, .rs-node:focus-visible, .rs-node.is-hot { transform: none; }
.rs-icon img { display: block; max-width: 30px; max-height: 25px; object-fit: contain; }
.rs-direction { margin-left: auto; font-weight: 700; color: var(--green); font-size: 1.1rem; }
.rs-desc { height: 8em; min-height: 8em; overflow-y: auto; scrollbar-gutter: stable; }
.rs-motion { grid-column: 1 / -1; text-align: center; position: relative; z-index: 1; margin-top: 16px; }
.rs-motion button { font: inherit; font-size: 0.75rem; padding: 7px 14px; border: 1px solid var(--line-2); color: var(--blue); background: #fff; border-radius: 4px; cursor: pointer; }
.router-scene.is-stopped .rs-flow, .router-scene.is-stopped .rs-hub-ring::after { animation-play-state: paused; }


/* Keep the product page's two visuals consistent with the lower-page data. */
.page-hero--product .product-hero { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 36px; }
.product-driver-visual, .product-router-visual { min-width: 0; }
.page-hero--product.theme-router { background: linear-gradient(120deg, #21498a 0%, #21498a 50%, #315244 50%, #315244 100%); }
.page-hero--product.theme-router::before { display: none; }
.theme-router .btn-product { background: #fff; color: #21498a; border-color: #fff; }
.theme-router .btn-product:hover { color: #315244; background: #edf5ef; }
.product-router-visual .router-scene { --blue:#21498a; --navy:#213e66; --ink:#1c2d42; --muted:#506279; --faint:#596d80; --line-2:#ced9e0; --ease:cubic-bezier(.2,.6,.3,1); --shadow-sm:0 4px 12px #00000008; --shadow-md:0 6px 18px #00000014; margin: 0; width: 100%; grid-template-columns: minmax(0,1fr) 160px minmax(0,1fr); gap: 0 24px; }
.product-router-visual .rs-node { padding: 8px; gap: 6px; color: #1c2d42; }
.product-router-visual .rs-text strong { font-size: .76rem; line-height: 1.3; }
.product-router-visual .rs-text small { font-size: .65rem; }
.product-router-visual .rs-hub strong { font-size: 1.18rem; }
.product-router-visual .rs-hub-sub { font-size: .7rem; }
.product-router-visual .rs-steps { gap: 2px; font-size: .58rem; }
.product-router-visual .rs-steps li { padding: 4px 5px; }
.product-router-visual .rs-desc { font-size: .72rem; height: 9em; min-height: 9em; margin-bottom: 0; }
.product-router-visual .rs-direction { font-size: .95rem; }
.product-router-visual .rs-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.product-router-visual .rs-icon img { max-width: 25px; max-height: 22px; }
.product-router-visual .rs-legend { grid-column: 1 / -1; color: #fff; justify-content: center; margin-bottom: 0; }
.product-router-visual .rs-motion button { background: #fff; color: #21498a; }
.maintenance-video { margin: 28px 0; }
.maintenance-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #142635; border-radius: 10px; }
.maintenance-video figcaption { font-size: .9rem; margin-top: 12px; }
.maintenance-video details { margin-top: 14px; }
@media (max-width: 1100px) { .page-hero--product .product-hero { grid-template-columns: 1fr; } .product-driver-visual, .product-router-visual { width: 100%; max-width: 800px; } }
@media (max-width: 760px) {
 .product-router-visual .router-scene { grid-template-columns: 1fr; gap: 36px; padding: 4px 0 20px; }
 .rs-sources { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .rs-targets { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
 .product-router-visual .rs-node { flex-direction: column; padding: 10px 3px; gap: 7px; text-align: center; }
 .rs-text { display: none; } .rs-short { display: block; font-size: .68rem; font-weight: 700; color: #1c2d42; }
 .rs-direction { margin-left: 0; }
 .product-router-visual .rs-hub { min-height: 0; padding: 20px 14px; }
 .product-router-visual .rs-desc { max-width: 280px; }
 .product-router-visual .rs-legend { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .rs-flow, .rs-hub.is-pulse .rs-hub-ring::after { animation: none; } }
/* A quiet backing keeps both flow colors readable against the two-tone hero. */
.product-router-visual { padding: 18px; background: #f5f8fc; border-radius: 16px; }
.product-router-visual .rs-legend { color: #253b57; }

/* Keep Velotic's original white plate, orange core, ink clients and authentic marks. */
@media (min-width: 1101px) { .page-hero--product.theme-kepware .product-hero { grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: 56px; } }
.driver-showcase { container-type: inline-size; }
.driver-showcase .driver-sector { min-height: 0; padding: clamp(14px, 3cqw, 30px); border: 1px solid #eee6df; background: #fff; }
.driver-showcase .driver-sector-label { margin: 0 0 12px; color: var(--driver-sector); }
.driver-showcase .sequence-tabs button { border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--kep-ink); }
.driver-showcase .sequence-tabs [aria-selected="true"] { border-bottom-color: var(--driver-sector); font-weight: 700; }
[data-driver-sector="energy"], .driver-sector--energy { --driver-sector: #197663; }
[data-driver-sector="manufacturing"], .driver-sector--manufacturing { --driver-sector: #c23a00; }
[data-driver-sector="infrastructure"], .driver-sector--infrastructure { --driver-sector: #285e9c; }
.driver-map { margin: 0; container-type: inline-size; color: var(--kep-ink); }
.driver-map .driver-map-brand { display: block; width: 124px; height: 30px; object-fit: contain; object-position: left; }
.driver-map-graph { --driver-stacked: 0; position: relative; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(110px,.9fr) minmax(0,.9fr); gap: clamp(26px, 5cqw, 80px); align-items: center; padding: 22px 0; }
.driver-map .driver-map-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.driver-map-sources, .driver-map-clients { position: relative; z-index: 1; display: grid; gap: 18px; min-width: 0; }
.driver-map-source, .driver-map-client { min-width: 0; min-height: 78px; display: flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid #f1cbbb; border-radius: 15px; background: #fff7f2; text-align: center; }
.driver-map-source { gap: 10px; }
.driver-map .driver-device-icon { flex: 0 0 28px; width: 28px; height: 28px; color: var(--driver-sector); }
.driver-map .driver-label { min-width: 0; font-size: clamp(14px, 1.9cqw, 17px); line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.driver-map-client { color: #fff; background: var(--kep-ink); border-color: var(--kep-ink); font-size: clamp(13px, 1.8cqw, 16px); line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.driver-map-core { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 0; min-height: 134px; padding: 16px 5px; border-radius: 24px; background: var(--kep); box-shadow: 0 0 0 10px #fff, 0 0 0 11px #ffdac9; }
.driver-map-core img { width: 34px; height: 31px; margin-bottom: 7px; }
.driver-map-core strong { color: var(--kep-ink); font-size: clamp(17px, 3cqw, 25px); line-height: 1.15; }
.driver-map-core > span { margin-top: 3px; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.driver-flow { fill: none; stroke: var(--kep); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 8; animation: driver-flow 1.4s linear infinite; }
.driver-flow--out { stroke: var(--kep-ink); animation-duration: 1.8s; }
@keyframes driver-flow { to { stroke-dashoffset: -28; } }
[data-sequence-state="paused"] .driver-flow, .motion-paused .driver-flow { animation-play-state: paused; }
.driver-showcase--hero.brand-plate { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 20px 20px 12px; border: 0; border-radius: 28px; color: var(--kep-ink); }
.driver-showcase--hero header { order: 0; height: 0; }
.driver-showcase--hero header [data-sequence-pause] { position: absolute; top: 17px; right: 18px; z-index: 2; padding: 4px 7px; border: 0; background: transparent; color: #70645a; font-size: .8rem; }
.driver-showcase--hero .sequence-panel { order: 1; padding: 0; min-height: 0; background: transparent; border: 0; }
.driver-showcase--hero .driver-sector-label { display: none; }
.driver-showcase--hero .sequence-panel > p:last-child { min-height: 3em; margin: 0 4px 10px; color: #70645a; font-size: .8rem; line-height: 1.5; }
.driver-showcase--hero .sequence-tabs { order: 2; justify-content: center; gap: 16px; margin: 0; padding: 8px 0 0; border-top: 1px solid #f0eae5; }
.driver-showcase--hero .sequence-tabs button { padding: 5px 0; font-size: .85rem; }
.driver-showcase--hero .form-note { display: none; }
@container (max-width: 610px) {
 .driver-map-source { flex-direction: column; gap: 5px; min-height: 108px; padding: 10px; }
 .driver-map .driver-device-icon { width: 23px; height: 23px; flex-basis: 23px; }
 .driver-map .driver-label { font-size: 14px; }
 .driver-map-client { min-height: 108px; padding: 10px 8px; font-size: 13px; }
}
@container (max-width: 420px) {
 .driver-map-graph { --driver-stacked: 1; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 46px 30px; padding: 22px 0 10px; }
 .driver-map-core { min-height: 124px; }
 .driver-map-clients { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
 .driver-map-client { min-height: 70px; }
 .driver-map-source { min-height: 88px; }
 .driver-map .driver-device-icon { display: none; }
}
@media (max-width: 760px) {
 .driver-showcase--hero.brand-plate { padding: 16px 12px 12px; }
 .driver-showcase--hero .sequence-tabs { gap: 14px; }
 .driver-showcase--hero .sequence-tabs button { font-size: .8rem; }
 .driver-showcase .form-note { font-size: .85rem; }
 .driver-showcase .sequence-panel > p:last-child { min-height: 4.8em; }
 .driver-showcase:not(.driver-showcase--hero) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 10px; padding: 0; border: 0; background: transparent; }
 .driver-showcase:not(.driver-showcase--hero) > header { display: contents; }
 .driver-showcase:not(.driver-showcase--hero) > header h2 { grid-column: 1 / -1; margin-bottom: 18px; }
 .driver-showcase:not(.driver-showcase--hero) > header button { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding: 7px; font-size: 13px; }
 .driver-showcase:not(.driver-showcase--hero) > .sequence-tabs { grid-column: 1; grid-row: 2; gap: 10px; margin-bottom: 12px; }
 .driver-showcase:not(.driver-showcase--hero) > .sequence-tabs button { padding: 7px 0; font-size: 13px; }
 .driver-showcase:not(.driver-showcase--hero) > .sequence-panel { grid-column: 1 / -1; padding: 14px 0 0; border: 0; }
 .driver-showcase:not(.driver-showcase--hero) .driver-sector-label { display: none; }
 .driver-showcase:not(.driver-showcase--hero) > .form-note { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion:reduce) { .driver-flow { animation: none; } }