.fire-body { background: radial-gradient(ellipse at 20% 0%, var(--ambient-fire) 0%, var(--bg) 55%); }

/* -------- tazelik + acil hatlar cubugu -------- */
.fire-alert-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.fab-fresh { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-secondary); }
.fab-fresh strong { color: var(--text-primary); font-family: var(--font-mono); }
.fab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-fire);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-fire) 55%, transparent);
  animation: blip 1.8s ease-in-out infinite;
}
.fab-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.fab-hotline {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-fire) 40%, transparent);
  background: color-mix(in srgb, var(--c-fire) 12%, transparent);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.fab-hotline strong { font-family: var(--font-mono); font-size: 1rem; color: var(--c-fire-2); }
.fab-hotline.fab-112 {
  border-color: color-mix(in srgb, var(--status-critical) 40%, transparent);
  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
}
.fab-hotline.fab-112 strong { color: var(--status-critical); }

.fire-disclaimer {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 12px 14px;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fire-disclaimer strong { color: var(--text-secondary); }

/* dekoratif kor/duman ambiyansi kaldirildi — sakin, kurumsal page-head */
.fs-ember, .fs-smoke { display: none; }

/* -------- liste satirlarinin sirayla belirmesi -------- */
.side-list .side-row {
  animation: side-row-in 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes side-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .side-list .side-row { animation: none; }
}

.demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warning) 38%, transparent);
  color: color-mix(in srgb, var(--status-warning) 80%, white);
  font-size: 0.86rem;
}
.demo-banner .ic { flex-shrink: 0; }
.setup-icon { display: inline-flex; color: var(--c-fire-2); margin-bottom: 4px; }

.fire-pulse .dot { animation: fire-glow 1.6s ease-in-out infinite; }
@keyframes fire-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* -------- harita uzerinde "yanan" nokta animasyonu -------- */
.fire-mark { position: relative; width: 1px; height: 1px; }
.fmk-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 2.2s ease-out infinite;
}
.fmk-flame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  transform-origin: 50% 88%;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
  animation: fmk-flame-flicker 1.05s ease-in-out infinite;
  will-change: transform;
}
@keyframes fmk-flame-flicker {
  0%, 100% { transform: translate(-50%, -58%) scale(1, 1) rotate(0deg); }
  22% { transform: translate(-50%, -58%) scale(0.92, 1.08) rotate(-4deg); }
  48% { transform: translate(-50%, -60%) scale(1.08, 0.93) rotate(3deg); }
  74% { transform: translate(-50%, -56%) scale(0.96, 1.05) rotate(-2deg); }
}
.fmk-ember {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffcf7a;
  opacity: 0;
  box-shadow: 0 0 4px #ffb266;
  animation: ember-rise 2.3s ease-in infinite;
}
.fmk-ember.e2 {
  left: calc(50% + 5px);
  background: #ff9a5c;
  animation-delay: 1.05s;
}
@keyframes ember-rise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  12% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-80%, -28px) scale(0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .fmk-flame, .fmk-ember, .fmk-ring { animation: none; }
}

/* -------- yangin riski endeksi -------- */
.f-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.f-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.risk-banner {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  margin-bottom: 18px;
  align-items: flex-start;
}
.risk-banner {
  position: relative;
  overflow: hidden;
}
.risk-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--c-fire) 15%, transparent);
  color: var(--c-fire-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.risk-icon .ic { width: 24px; height: 24px; }
.risk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.risk-body { flex: 1; min-width: 0; }
.risk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.risk-label { font-weight: 800; font-size: 1rem; }
.risk-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
}
.risk-level.risk-good { background: rgba(12, 163, 12, 0.15); color: #4ade80; }
.risk-level.risk-warning { background: rgba(250, 178, 25, 0.18); color: #fbbf24; }
.risk-level.risk-serious { background: rgba(236, 131, 90, 0.2); color: #fb923c; }
.risk-level.risk-critical { background: rgba(208, 59, 59, 0.2); color: #f87171; }
.risk-desc { color: var(--text-secondary); font-size: 0.9rem; margin: 6px 0 12px; }
.risk-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.risk-city-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.risk-city-chip strong { color: var(--text-primary); }

@media (max-width: 620px) {
  .risk-banner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .risk-banner::before, .risk-icon { animation: none; }
}
@media (max-width: 560px) {
  .f-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---- okunabilirlik (kontrast) ---- */
/* koyu kirmizi FRP rozetlerinde siyah yazi okunmuyordu */
.fire-body .side-row .mag-chip { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.fab-hotline.fab-112 strong { color: var(--c-fire-2); }
.fire-disclaim, .fire-disclaimer { color: var(--text-secondary); }