/* ═══ UZAK MESAFE ═══ */
.mesafe {
  background: linear-gradient(180deg, var(--ekran), var(--kanvas) 55%, var(--ekran));
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 48px);
}

.mesafe-scene {
  position: relative;
  max-width: 760px;
  margin: clamp(40px, 6vh, 70px) auto 0;
}
.mesafe-arc { width: 100%; height: auto; display: block; }
.arc-spark { filter: drop-shadow(0 0 6px rgba(242,182,109,.9)); }

.city {
  position: absolute; bottom: -12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13.5px;
}
.city--ist { left: 4%; }
.city--ber { right: 4%; }
.city-avatar {
  width: 58px; height: 58px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 700;
  margin-bottom: 6px;
  box-shadow: 0 14px 34px rgba(46,74,99,.22);
}
.city-avatar--d { background: var(--ink); color: var(--buz); }
.city-avatar--e { background: var(--buz); color: var(--arduvaz); }
.city-time {
  font-family: var(--mono);
  font-size: 13px; color: var(--kisik);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mesafe-scene { padding-top: 20px; }
  .city-avatar { width: 44px; height: 44px; font-size: 16px; }
  .city { font-size: 12px; }
}

.widgets {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  max-width: 900px;
  margin: clamp(56px, 8vh, 90px) auto 0;
}
.widget {
  position: relative;
  border-radius: 32px;
  background: linear-gradient(150deg, #31506E, #5B7F9E);
  color: #fff;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(46,74,99,.28);
  margin-bottom: 34px;
}
.widget--small { width: 158px; height: 158px; display: flex; flex-direction: column; justify-content: center; }
.widget--mid {
  width: 336px; height: 158px;
  display: flex; align-items: center; gap: 26px;
  transform: rotate(1.6deg);
}
.widget--small { transform: rotate(-2.4deg); }
.widget-label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  color: rgba(255,255,255,.9);
}
.widget-big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.widget-big--time { font-variant-numeric: tabular-nums; }
.widget-foot { font-size: 12px; color: rgba(255,255,255,.92); margin-top: 4px; }
.widget figcaption {
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px; color: var(--soluk-metin);
  letter-spacing: .08em;
  white-space: nowrap;
}
.widget-col { flex: 1; }
.widgets-note {
  flex-basis: 100%;
  text-align: center;
  font-size: 15px; color: var(--kisik);
  max-width: 46ch;
  margin: 18px auto 0;
}