html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b3a8a;
}
/* --u: dikeyde genişliğin %1'i; kare ve 4:5'te yükseklikle sınırlanır (içerik taşmaz). */
#pn-root {
  --u: min(1vw, 0.62vh);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  font-family: 'Inter Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, #1f66c9 0%, #1250ad 42%, #0a3781 100%);
}
.net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  text-align: center;
}
.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst i {
  position: absolute;
  left: calc(-0.9 * var(--u));
  top: calc(-0.9 * var(--u));
  width: calc(1.8 * var(--u));
  height: calc(1.8 * var(--u));
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}
.burst i:nth-child(3n) {
  background: #f6f2ea;
}
.burst i:nth-child(3n + 1) {
  background: #90caf9;
}
.srv {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.srv svg,
.card svg,
.chip svg {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.srv svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.6;
}
.srv .led {
  stroke: #90caf9;
  stroke-width: 2.6;
}
.hook {
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.w,
.l {
  display: inline-block;
}
.w {
  white-space: nowrap;
}
.q {
  margin: 0;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mask {
  display: inline-block;
  overflow: hidden;
  padding: 0 var(--u) var(--u);
}
.qi {
  display: inline-block;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(2.6 * var(--u));
  max-width: calc(86 * var(--u));
}
.pill {
  padding: calc(2.4 * var(--u)) calc(4.4 * var(--u));
  border-radius: 999px;
  border: calc(0.35 * var(--u)) solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(5 * var(--u));
  font-weight: 700;
}
.pill:nth-child(2n) {
  border-color: #f6f2ea;
  background: #f6f2ea;
  color: #0b2a5c;
}
.logo-wrap {
  position: relative;
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(-20 * var(--u)) 0 0 calc(-20 * var(--u));
  border-radius: 50%;
  border: calc(0.6 * var(--u)) solid rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.logo {
  position: relative;
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #fff;
  color: #1565c0;
  font-size: calc(8.5 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(1.6 * var(--u));
  padding: calc(1.8 * var(--u)) calc(3.6 * var(--u));
  border-radius: 999px;
  border: calc(0.3 * var(--u)) solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  font-size: calc(3.8 * var(--u));
  font-weight: 500;
}
.chip svg {
  width: calc(4.4 * var(--u));
  height: calc(4.4 * var(--u));
  stroke-width: 2;
}
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(3 * var(--u));
  width: calc(88 * var(--u));
}
.card {
  padding: calc(3.2 * var(--u));
  border-radius: calc(3.2 * var(--u));
  border: calc(0.3 * var(--u)) solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  text-align: left;
}
.card svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  stroke-width: 1.8;
}
.card svg * {
  stroke-dasharray: 1;
}
.card b {
  display: block;
  margin-top: calc(1.4 * var(--u));
  font-size: calc(5.4 * var(--u));
  font-weight: 800;
}
.card span {
  display: block;
  margin-top: calc(0.8 * var(--u));
  font-size: calc(3.3 * var(--u));
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}
.st-h {
  font-size: calc(7 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.rows {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  width: calc(84 * var(--u));
}
.row {
  text-align: left;
}
.num {
  font-size: calc(12 * var(--u));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lab {
  margin-top: var(--u);
  font-size: calc(4.2 * var(--u));
  color: rgba(255, 255, 255, 0.82);
}
.bar {
  margin-top: calc(1.8 * var(--u));
  height: calc(1.4 * var(--u));
  border-radius: var(--u);
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: #f6f2ea;
  transform-origin: 0 50%;
}
.mini-logo {
  padding: calc(1.6 * var(--u)) calc(3.6 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #fff;
  color: #1565c0;
  font-size: calc(5.4 * var(--u));
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cta-h {
  margin: 0;
  min-height: 3.15em;
  font-size: calc(11.5 * var(--u));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: pre-line;
}
.caret {
  display: inline-block;
  width: calc(0.7 * var(--u));
  height: calc(10.5 * var(--u));
  margin-left: calc(0.6 * var(--u));
  vertical-align: calc(-1.6 * var(--u));
  background: #fff;
}
.sub {
  margin: 0;
  max-width: calc(80 * var(--u));
  font-size: calc(4.4 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}
.btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(3 * var(--u));
}
.b-pri,
.b-sec {
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: calc(1.6 * var(--u));
  font-size: calc(5 * var(--u));
  font-weight: 700;
}
.b-pri {
  background: #f6f2ea;
  color: #0b1f3a;
}
.b-sec {
  border: calc(0.35 * var(--u)) solid rgba(255, 255, 255, 0.7);
}