/* Lightflow v0.5.4 — Mengenal Topologi
   This layer is scoped to the new topology page and does not override the
   locked Home/service hero components. */

.topology-page {
  color: #17365f;
  background: #fff;
}

.topology-page main { overflow: hidden; }

.topology-hero {
  position: relative;
  min-height: 720px;
  padding: 52px 0 74px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0 42%, rgba(236,248,255,.96) 72%, rgba(215,242,255,.98) 100%);
  overflow: hidden;
}

.topology-hero::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 430px;
  height: 390px;
  content: "";
  background: url("assets/signature/triangles.svg") left top / 470px auto no-repeat;
  opacity: .16;
  transform: translate(-80px, -70px) rotate(4deg);
}

.topology-hero::after {
  position: absolute;
  right: -90px;
  bottom: -210px;
  width: 780px;
  height: 500px;
  content: "";
  background: #0872c8;
  border-radius: 50% 48% 0 0;
  transform: rotate(-5deg);
}

.topology-hero-wave {
  position: absolute;
  top: 72px;
  left: 34%;
  width: 520px;
  height: 220px;
  background: url("assets/signature/wave.svg") center / contain no-repeat;
  opacity: .23;
  transform: rotate(-7deg);
}

.topology-hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 590px;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  gap: clamp(34px, 6vw, 94px);
  align-items: center;
}

.topology-hero-copy { max-width: 610px; }

.topology-hero-copy h1 {
  margin: 22px 0 24px;
  color: #102e63;
  font-size: clamp(58px, 6.3vw, 92px);
  line-height: .92;
  letter-spacing: -.067em;
}

.topology-hero-copy h1 em {
  display: block;
  color: #0872c8;
  font-style: normal;
}

.topology-hero-copy > p:not(.eyebrow) {
  max-width: 550px;
  color: #5c7291;
  font-size: 18px;
  line-height: 1.72;
}

.topology-hero-copy .hero-actions { margin-top: 30px; }

.topology-hero-visual {
  position: relative;
  min-height: 530px;
}

.topology-photo {
  position: absolute;
  z-index: 2;
  inset: 22px 0 52px 38px;
  margin: 0;
  overflow: hidden;
  background: #0b2f66;
  border: 10px solid rgba(255,255,255,.88);
  border-radius: 42% 58% 45% 55% / 34% 38% 62% 66%;
  box-shadow: 0 30px 80px rgba(15,52,99,.2);
}

.topology-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(125deg, rgba(7,45,99,.06), rgba(7,45,99,.08) 48%, rgba(7,45,99,.52));
}

.topology-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.topology-hero-badge {
  position: absolute;
  z-index: 5;
  right: -8px;
  bottom: 82px;
  display: grid;
  width: min(290px, 48%);
  min-height: 120px;
  padding: 24px 26px;
  align-content: center;
  color: #fff;
  background: rgba(10,45,98,.93);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(10,45,98,.24);
  backdrop-filter: blur(12px);
}

.topology-hero-badge strong {
  color: #ffc400;
  font-size: 13px;
  letter-spacing: .02em;
}

.topology-hero-badge span {
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.55;
}

.topology-shard {
  position: absolute;
  z-index: 6;
  right: 26px;
  top: 60px;
  width: 84px;
  height: 74px;
}

.topology-shard::before,
.topology-shard::after {
  position: absolute;
  content: "";
  clip-path: polygon(0 58%, 100% 0, 64% 100%);
}

.topology-shard::before { inset: 0; background: #ffc400; }
.topology-shard::after { inset: 12px 26px 20px -18px; background: rgba(255,255,255,.72); }

.topology-principles {
  position: relative;
  padding: 118px 0 108px;
}

.topology-principles .section-heading { max-width: 820px; }

.topology-principle-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.topology-principle-card {
  position: relative;
  min-height: 275px;
  padding: 34px;
  background: #fff;
  border: 1px solid #dce9f3;
  border-radius: 28px;
  box-shadow: 0 22px 54px rgba(18,63,111,.08);
  overflow: hidden;
}

.topology-principle-card::after {
  position: absolute;
  right: -38px;
  bottom: -58px;
  width: 150px;
  height: 150px;
  content: "";
  background: #e5f7ff;
  border-radius: 50%;
}

.topology-principle-card:nth-child(2)::after { background: #fff5bd; }
.topology-principle-card:nth-child(3)::after { background: #dff2ff; }

.topology-principle-card > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #0872c8;
  background: #eaf7ff;
  border-radius: 17px;
  font-size: 25px;
  font-weight: 850;
}

.topology-principle-card h3 {
  position: relative;
  z-index: 2;
  margin: 26px 0 12px;
  color: #102e63;
  font-size: 24px;
}

.topology-principle-card p {
  position: relative;
  z-index: 2;
  color: #617795;
  font-size: 16px;
  line-height: 1.67;
}

.topology-diagram-section {
  position: relative;
  padding: 110px 0 118px;
  background: linear-gradient(180deg, #eef8ff, #f9fcff 84%);
}

.topology-diagram-section::before {
  position: absolute;
  right: -80px;
  top: 18px;
  width: 470px;
  height: 230px;
  content: "";
  background: url("assets/signature/wave.svg") center / contain no-repeat;
  opacity: .2;
  transform: rotate(8deg);
}

.topology-diagram-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr);
  gap: 70px;
  align-items: end;
}

.topology-diagram-heading h2 {
  margin-top: 18px;
  color: #102e63;
  font-size: clamp(44px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.052em;
}

.topology-diagram-heading > p {
  color: #5f7695;
  font-size: 17px;
  line-height: 1.72;
}

.topology-map-shell {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  padding: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(178,207,229,.8);
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(25,73,121,.12);
}

.topology-map-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #8fbddd #e7f2fa;
}

.topology-map {
  display: block;
  width: 100%;
  min-width: 790px;
  height: auto;
  border-radius: 22px;
}

.topology-map text {
  font-family: Inter, Arial, sans-serif;
}

.topology-map .map-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
}

.topology-map .map-title {
  font-size: 21px;
  font-weight: 850;
}

.topology-map .map-copy {
  font-size: 14px;
  font-weight: 550;
}

.topology-map .map-node-title {
  font-size: 18px;
  font-weight: 850;
}

.topology-map .map-node-copy {
  font-size: 12px;
  font-weight: 600;
}

.topology-map-legend {
  display: flex;
  padding: 18px 10px 4px;
  gap: 28px;
  flex-wrap: wrap;
  color: #536c8b;
  font-size: 13px;
  font-weight: 720;
}

.topology-map-legend span { display: inline-flex; align-items: center; gap: 9px; }
.topology-map-legend i { display: inline-block; width: 30px; height: 4px; border-radius: 99px; }
.topology-map-legend span:first-child i { background: #0872c8; }
.topology-map-legend span:nth-child(2) i { background: #ffc400; }
.topology-map-legend span:last-child i { background: #14a6cf; }

.topology-mobile-hint {
  display: none;
  margin: 10px 8px 0;
  color: #7287a2;
  font-size: 12px;
}

.topology-public-note {
  display: grid;
  margin-top: 24px;
  padding: 22px 24px;
  grid-template-columns: auto 1fr;
  gap: 14px;
  color: #4f6788;
  background: #fff;
  border: 1px solid #dceaf4;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.65;
}

.topology-public-note strong {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #102e63;
  background: #ffc400;
  border-radius: 10px;
}

.topology-process {
  position: relative;
  padding: 116px 0;
  background: #fff;
}

.topology-process-grid {
  display: grid;
  margin-top: 48px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.topology-process-card {
  min-height: 250px;
  padding: 28px 26px;
  background: #f7fbff;
  border: 1px solid #dbe8f2;
  border-radius: 24px;
}

.topology-process-card > span {
  color: #0872c8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
}

.topology-process-card h3 {
  margin: 30px 0 12px;
  color: #102e63;
  font-size: 22px;
}

.topology-process-card p {
  color: #627895;
  font-size: 15px;
  line-height: 1.67;
}

.topology-cta {
  padding: 34px 0 106px;
  background: #fff;
}

.topology-cta-card {
  position: relative;
  display: grid;
  min-height: 330px;
  padding: clamp(42px, 6vw, 76px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  align-items: center;
  color: #fff;
  background: linear-gradient(125deg, #0b2c62, #086fc1 72%, #0c9ed2);
  border-radius: 34px;
  overflow: hidden;
}

.topology-cta-card::before {
  position: absolute;
  inset: -40% -5% auto 45%;
  height: 360px;
  content: "";
  background: url("assets/signature/wave.svg") center / contain no-repeat;
  opacity: .18;
  transform: rotate(-5deg);
}

.topology-cta-copy { position: relative; z-index: 2; max-width: 760px; }
.topology-cta-copy .eyebrow { color: #bceeff; }
.topology-cta-copy h2 { margin: 18px 0; color: #fff; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; letter-spacing: -.05em; }
.topology-cta-copy p { max-width: 680px; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.7; }
.topology-cta-card .button { position: relative; z-index: 2; white-space: nowrap; }

@media (max-width: 1050px) {
  .topology-hero { min-height: 0; padding-top: 46px; }
  .topology-hero-shell { grid-template-columns: 1fr; gap: 20px; }
  .topology-hero-copy { max-width: 760px; padding-top: 22px; }
  .topology-hero-copy h1 { max-width: 650px; }
  .topology-hero-visual { min-height: 500px; }
  .topology-photo { inset: 20px 4% 24px 10%; }
  .topology-hero-badge { right: 2%; bottom: 46px; }
  .topology-principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-principle-card:last-child { grid-column: 1 / -1; min-height: 220px; }
  .topology-diagram-heading { grid-template-columns: 1fr; gap: 20px; }
  .topology-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-cta-card { grid-template-columns: 1fr; gap: 26px; }
  .topology-cta-card .button { justify-self: start; }
}

@media (max-width: 700px) {
  .topology-hero { padding: 28px 0 54px; }
  .topology-hero::after { right: -180px; bottom: -230px; }
  .topology-hero-wave { left: 30%; width: 400px; }
  .topology-hero-copy { padding-top: 10px; }
  .topology-hero-copy h1 { margin-block: 18px; font-size: clamp(49px, 15vw, 68px); }
  .topology-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .topology-hero-visual { min-height: 390px; }
  .topology-photo { inset: 12px 0 26px 0; border-width: 7px; border-radius: 34% 66% 40% 60% / 34% 36% 64% 66%; }
  .topology-hero-badge { right: 0; bottom: 26px; width: 64%; min-height: 105px; padding: 18px; }
  .topology-shard { right: 0; top: 6px; transform: scale(.75); }
  .topology-principles,
  .topology-diagram-section,
  .topology-process { padding: 82px 0; }
  .topology-principle-grid,
  .topology-process-grid { grid-template-columns: 1fr; }
  .topology-principle-card:last-child { grid-column: auto; }
  .topology-principle-card { min-height: 0; }
  .topology-diagram-heading h2 { font-size: 45px; }
  .topology-map-shell { margin-inline: -8px; padding: 9px; border-radius: 22px; }
  .topology-map { min-width: 760px; }
  .topology-mobile-hint { display: block; }
  .topology-public-note { grid-template-columns: 1fr; }
  .topology-cta { padding-bottom: 78px; }
  .topology-cta-card { min-height: 0; padding: 40px 28px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .topology-map-scroll { scroll-behavior: auto; }
}