/* ══ Sürüş sırasındaki konum işareti ══════════════════════════════
   Yön gösteren koni, mavi bir madalyonun içine oturuyor. Çıplak bir
   üçgen yerine bu; hem yönü belli ediyor hem harita üstünde net duruyor. */

.me {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  position: relative;
}

/* Gidiş yönünü gösteren yumuşak koni */
.me__cone {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: conic-gradient(
    from -22deg,
    rgba(56, 189, 248, 0.42) 0deg,
    rgba(56, 189, 248, 0.14) 26deg,
    transparent 44deg,
    transparent 316deg,
    rgba(56, 189, 248, 0.14) 334deg,
    rgba(56, 189, 248, 0.42) 360deg);
  mask-image: radial-gradient(circle, #000 22%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 72%);
}

.me__dot {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #56c8fb, #2b8fd8);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 18px rgba(56, 189, 248, 0.7);
  display: grid;
  place-items: center;
}

/* İçteki küçük ok — hangi yöne bakıldığı madalyonun içinde de belli olsun */
.me__dot::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #fff;
  margin-top: -1px;
}

/* Gezinme modunda yön bilinmediğinde koni ve ok gizleniyor */
.me.is-static .me__cone,
.me.is-static .me__dot::after { display: none; }

/* ───────────────────────────────────────────────────────────────
   Navigasyon HUD.
   Sürüş sırasında göz haritada; bilgiler kenarlara yerleşiyor ve
   tek bakışta okunacak boyutta. Bu ekran her zaman karanlık.
   ─────────────────────────────────────────────────────────────── */

.screen--nav > * { z-index: var(--z-hud); }

/* ── Manevra bandı (üst) ──────────────────────────────────────────── */

.maneuver {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding:
    calc(var(--safe-t) + var(--s3))
    calc(var(--safe-r) + var(--s3))
    var(--s3)
    calc(var(--safe-l) + var(--s4));
  background: linear-gradient(to bottom, rgba(6, 20, 16, 0.96) 60%, rgba(6, 20, 16, 0));
  animation: slide-down var(--dur-slow) var(--ease-out) both;
}
@keyframes slide-down {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

.maneuver__icon {
  width: 52px; height: 52px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.maneuver__icon svg { width: 34px; height: 34px; }

.maneuver__text { flex: 1; min-width: 0; }
.maneuver__dist {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.maneuver__road {
  font-size: 0.9rem;
  color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Manevraya çok yaklaşıldığında bant vurgulanıyor */
.maneuver.is-imminent .maneuver__icon {
  background: var(--accent);
  color: var(--accent-ink);
  animation: nudge 0.6s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* ── Öndeki tehlikeler şeridi (sağ) ───────────────────────────────── */

.hazards {
  position: absolute;
  top: 50%;
  right: calc(var(--safe-r) + var(--s3));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 92px;
  pointer-events: none;
}

.hazard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s2);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  animation: hazard-in var(--dur) var(--ease-out) both;
}
@keyframes hazard-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
/* Listenin altındaki uzak tehlikeler geri planda kalıyor */
.hazard:nth-child(n+3) { opacity: 0.55; transform: scale(0.9); }

.hazard__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.hazard--radar .hazard__icon    { background: var(--danger-soft); color: var(--danger); }
.hazard--corridor .hazard__icon { background: var(--warn-soft);   color: var(--warn); }

.hazard__dist { font-size: 0.98rem; font-weight: 700; line-height: 1.1; }
.hazard__sub  { font-size: 0.64rem; color: var(--text-dim); text-align: center; line-height: 1.2; }

/* Hız limiti dairesi — trafik levhası biçiminde */
.hazard__limit {
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  border: 2.5px solid var(--danger);
  font-family: var(--font-num);
  font-size: 0.62rem;
  font-weight: 800;
}
.hazard { position: relative; }

/* Yaklaşınca kart canlanıyor */
.hazard.is-near {
  border-color: var(--danger);
  box-shadow: var(--shadow-md), var(--glow-danger);
  animation: hazard-pulse 1s var(--ease) infinite;
}
@keyframes hazard-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ── Yaklaşan radar uyarısı (orta) ────────────────────────────────── */

.alert {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-radius: var(--r-lg);
  background: rgba(20, 6, 8, 0.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--danger);
  box-shadow: var(--shadow-lg), var(--glow-danger);
  animation: alert-in var(--dur) var(--ease-out) both;
  pointer-events: none;
  max-width: min(88vw, 380px);
}
@keyframes alert-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.alert.is-leaving { animation: alert-out var(--dur) var(--ease) both; }
@keyframes alert-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
}

.alert__icon {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
}
.alert__title { font-size: 1.06rem; font-weight: 700; }
.alert__sub   { font-size: 0.82rem; color: var(--text-mid); margin-top: 2px; }

/* ── Koridor kartı ────────────────────────────────────────────────── */

.corridor-card {
  position: absolute;
  left: calc(var(--safe-l) + var(--s3));
  right: calc(var(--safe-r) + var(--s3));
  bottom: calc(var(--safe-b) + 128px);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 158, 11, 0.34);
  box-shadow: var(--shadow-md);
  animation: slide-up var(--dur) var(--ease-out) both;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.corridor-card__top {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 0.78rem;
}
.corridor-card__tag {
  padding: 2px var(--s2);
  border-radius: 5px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: none;
}
.corridor-card__name {
  color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.corridor-progress {
  height: 5px;
  margin: var(--s3) 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.corridor-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--warn), var(--danger));
  transition: width 500ms linear;
}

.corridor-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  text-align: center;
}
.corridor-card__stats b     { display: block; font-size: 1rem; font-weight: 700; }
.corridor-card__stats small { color: var(--text-dim); font-size: 0.66rem; }

/* Koridor ortalaması limiti aştığında */
.corridor-card__stats .is-over { color: var(--danger); }
.corridor-card.is-over { border-color: var(--danger); box-shadow: var(--shadow-md), var(--glow-danger); }

/* ── Hız göstergesi ───────────────────────────────────────────────── */

.speedo {
  position: absolute;
  left: calc(var(--safe-l) + var(--s4));
  bottom: calc(var(--safe-b) + 92px);
  width: 84px; height: 84px;
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.speedo__value {
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.speedo__unit { font-size: 0.6rem; color: var(--text-dim); margin-top: 1px; }

/* Limit aşıldığında hem gösterge hem rakam kırmızıya dönüyor */
.speedo.is-over {
  border-color: var(--danger);
  box-shadow: var(--shadow-md), var(--glow-danger);
  animation: over-pulse 1.1s var(--ease) infinite;
}
.speedo.is-over .speedo__value { color: var(--danger); }
@keyframes over-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: var(--shadow-md), 0 0 30px rgba(239, 68, 68, 0.65); }
}

/* GPS sinyali yokken gösterge soluyor */
.speedo.is-stale { opacity: 0.45; }

/* ── Hız limiti levhası ───────────────────────────────────────────── */

.limit {
  position: absolute;
  left: calc(var(--safe-l) + 100px);
  bottom: calc(var(--safe-b) + 112px);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--danger);
  box-shadow: var(--shadow-md);
  animation: limit-in var(--dur) var(--ease-out) both;
}
@keyframes limit-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}
.limit span {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 800;
  color: #111;
  line-height: 1;
}

/* ── Alt bilgi çubuğu ─────────────────────────────────────────────── */

.navbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding:
    var(--s3)
    calc(var(--safe-r) + var(--s4))
    calc(var(--safe-b) + var(--s3))
    calc(var(--safe-l) + var(--s4));
  background: linear-gradient(to top, rgba(6, 10, 18, 0.96) 55%, rgba(6, 10, 18, 0));
  animation: slide-up var(--dur-slow) var(--ease-out) both;
}
.navbar__stat { flex: 1; text-align: center; min-width: 0; }
.navbar__stat b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.navbar__stat small { color: var(--text-dim); font-size: 0.66rem; }

/* ── Dar ve kısa ekranlar ─────────────────────────────────────────── */

@media (max-height: 700px) {
  .speedo { width: 72px; height: 72px; bottom: calc(var(--safe-b) + 84px); }
  .speedo__value { font-size: 1.75rem; }
  .limit { width: 46px; height: 46px; left: calc(var(--safe-l) + 88px); bottom: calc(var(--safe-b) + 100px); }
  .limit span { font-size: 1.05rem; }
  .corridor-card { bottom: calc(var(--safe-b) + 112px); }
  .maneuver__icon { width: 44px; height: 44px; }
  .maneuver__dist { font-size: 1.45rem; }
}

/* Yatay tutuşta HUD kenarlara yayılıyor, harita ortada kalıyor */
@media (orientation: landscape) and (max-height: 520px) {
  .hazards { width: 78px; top: auto; bottom: calc(var(--safe-b) + var(--s3)); transform: none; flex-direction: row; }
  .corridor-card { right: calc(var(--safe-r) + 190px); bottom: calc(var(--safe-b) + var(--s3)); }
  .navbar { background: none; }
}