/* ==========================================================================
   TRAFİK SAYFASI: harita ve gruplanmış liste
   ==========================================================================

   KULLANICI GERİ BİLDİRİMİ: "bu sayfayı gruplandırıp görselleştirmemiz
   lazım. bu şekilde çok karışık görünüyor. insanlar bulamazlar aradıkları
   şeyi." Sonra: "trafik sayfasını güzelleştirelim."

   TASARIM İLKELERİ:
   - Sitenin kendi tokenları (radius, gölge, yazı tipi) kullanılır; sayfa
     diğer sayfalardan kopuk durmaz.
   - Yoğunluk YALNIZCA renkle anlatılmaz: her ögede metin etiketi vardır
     (renk körlüğü, ekran okuyucu). Çubuklar süs değil, ölçek: 1-5
     yoğunluğun yüzdesi.
   - Beş durum rengi tek yerde tanımlıdır; harita, lejant, kart, rozet
     hepsi aynı değişkenleri okur.
   ========================================================================== */

:root {
  --tr-free: #147a41;
  --tr-low: #35a35f;
  --tr-moderate: #d99414;
  --tr-high: #c4502c;
  --tr-severe: #96201f;
  --tr-unknown: #8a949b;

  --tr-free-soft: #e2f3e8;
  --tr-low-soft: #e6f5ec;
  --tr-moderate-soft: #fdf0d8;
  --tr-high-soft: #fbe3da;
  --tr-severe-soft: #f7d8d6;

  --tr-free-ink: #145c33;
  --tr-low-ink: #1d6b3a;
  --tr-moderate-ink: #855410;
  --tr-high-ink: #93381f;
  --tr-severe-ink: #7d1c1b;
}

.ist-section--tight { padding-top: 32px; padding-bottom: 32px; }

/* --- Sayfa başı: bir bakışta şehir ----------------------------------------- */

.ist-traffic-head .ist-hero-lede { margin-bottom: 0; }

.ist-traffic-glance {
  margin-top: 26px;
  padding: 18px 22px 16px;
  border-radius: var(--ist-radius, 16px);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  max-width: 760px;
}

.ist-traffic-glance__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 14px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .8);
}

.ist-traffic-glance__stat strong { color: #fff; font-weight: 600; }

.ist-traffic-time { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Canlı veri nabzı: sayfanın "şu an" olduğunu söyler. Hareketi
   istemeyen kullanıcı için durur. */
.ist-traffic-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7be3a0;
  box-shadow: 0 0 0 0 rgba(123, 227, 160, .7);
  animation: ist-traffic-pulse 2.2s ease-out infinite;
}

@keyframes ist-traffic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(123, 227, 160, .65); }
  70% { box-shadow: 0 0 0 9px rgba(123, 227, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 227, 160, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ist-traffic-pulse { animation: none; }
}

/* Dağılım şeridi: dilimler nokta sayısıyla orantılı (flex-grow). */
.ist-traffic-dist {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  background: rgba(255, 255, 255, .12);
}

.ist-traffic-dist__seg { display: block; min-width: 4px; }
.ist-traffic-dist__seg--free { background: var(--tr-free); }
.ist-traffic-dist__seg--low { background: var(--tr-low); }
.ist-traffic-dist__seg--moderate { background: var(--tr-moderate); }
.ist-traffic-dist__seg--high { background: var(--tr-high); }
.ist-traffic-dist__seg--severe { background: var(--tr-severe); }

.ist-traffic-dist__legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
}

.ist-traffic-dist__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ist-traffic-dist__key strong { color: #fff; font-weight: 600; }
.ist-traffic-dist__key.is-empty { opacity: .45; }

.ist-traffic-dist__key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tr-unknown);
  flex: none;
}

.ist-traffic-dist__key--free::before { background: var(--tr-free); }
.ist-traffic-dist__key--low::before { background: var(--tr-low); }
.ist-traffic-dist__key--moderate::before { background: var(--tr-moderate); }
.ist-traffic-dist__key--high::before { background: var(--tr-high); }
.ist-traffic-dist__key--severe::before { background: var(--tr-severe); }

/* --- Ortak yoğunluk çubuğu ------------------------------------------------ */

.ist-traffic-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(16, 25, 31, .08);
  overflow: hidden;
}

.ist-traffic-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tr-unknown);
  transition: width .5s ease;
}

/* --- Üst blok: şehir özeti + en sıkışık noktalar ------------------------- */

.ist-traffic-topsec { margin-top: -18px; }

.ist-traffic-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 2fr);
  gap: 18px;
  align-items: stretch;
}

.ist-traffic-top--single { grid-template-columns: 1fr; }

@media (max-width: 800px) {
  .ist-traffic-top { grid-template-columns: 1fr; }
}

.ist-traffic-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 26px;
  border-radius: var(--ist-radius, 16px);
  background: var(--ist-surface, #fff);
  border: 1px solid var(--ist-border, #e6e3dd);
  box-shadow: var(--ist-shadow-sm);
  --tr-accent: var(--tr-unknown);
  --tr-accent-ink: var(--ist-ink);
}

.ist-traffic-summary__scope {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ist-ink-soft, #5d574e);
}

.ist-traffic-summary__index {
  font-family: var(--ist-font-display, Georgia, serif);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tr-accent-ink);
  margin: 4px 0 2px;
}

.ist-traffic-summary strong { font-size: 1.05rem; }
.ist-traffic-summary p { margin: 0; color: var(--ist-ink-soft, #5d574e); font-size: .9rem; flex: 1; }

.ist-traffic-summary__meter {
  display: block;
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tr-free), var(--tr-low) 30%, var(--tr-moderate) 55%, var(--tr-high) 78%, var(--tr-severe));
  position: relative;
  opacity: .9;
}

/* Endeks imleci: gradyan ölçek üzerinde şehrin yeri. */
.ist-traffic-summary__meter > span {
  position: absolute;
  top: -5px;
  left: 0;
  height: 18px;
  width: 4px;
  margin-left: -2px;
  background: var(--ist-ink);
  border: 1px solid #fff;
  border-radius: 3px;
}

.ist-traffic-summary--free, .ist-traffic-summary--low { --tr-accent: var(--tr-low); --tr-accent-ink: var(--tr-low-ink); }
.ist-traffic-summary--moderate { --tr-accent: var(--tr-moderate); --tr-accent-ink: var(--tr-moderate-ink); }
.ist-traffic-summary--high { --tr-accent: var(--tr-high); --tr-accent-ink: var(--tr-high-ink); }
.ist-traffic-summary--severe { --tr-accent: var(--tr-severe); --tr-accent-ink: var(--tr-severe-ink); }

/* En sıkışık noktalar: sayfanın hızlı cevabı. */
.ist-traffic-worst {
  padding: 22px 24px 20px;
  border-radius: var(--ist-radius, 16px);
  background: var(--ist-surface, #fff);
  border: 1px solid var(--ist-border, #e6e3dd);
  box-shadow: var(--ist-shadow-sm);
}

.ist-traffic-worst__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
}

.ist-traffic-worst__title { font-size: 1.15rem; margin: 0; }
.ist-traffic-worst__sub { font-size: .78rem; color: var(--ist-ink-soft, #5d574e); }

.ist-traffic-worst__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.ist-traffic-worst__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px 11px 12px;
  border-radius: var(--ist-radius-sm, 10px);
  background: var(--ist-surface-alt, #f4efe7);
  border: 1px solid transparent;
  --tr-accent: var(--tr-unknown);
  --tr-accent-ink: var(--ist-ink);
  --tr-accent-soft: #eee;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ist-traffic-worst__item:hover { transform: translateY(-1px); box-shadow: var(--ist-shadow-sm); }

.ist-traffic-worst__rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ist-font-display, Georgia, serif);
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  background: var(--tr-accent);
}

.ist-traffic-worst__body { display: grid; gap: 4px; min-width: 0; }
.ist-traffic-worst__name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.ist-traffic-worst__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .78rem; color: var(--ist-ink-soft, #5d574e); }
.ist-traffic-worst__state {
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .7rem;
  background: var(--tr-accent-soft);
  color: var(--tr-accent-ink);
}
.ist-traffic-worst__body .ist-traffic-bar { margin-top: 2px; max-width: 160px; }
.ist-traffic-worst__body .ist-traffic-bar > span { background: var(--tr-accent); }

.ist-traffic-worst__speed { text-align: right; line-height: 1; white-space: nowrap; }
.ist-traffic-worst__speed strong { display: block; font-size: 1.35rem; font-weight: 700; color: var(--tr-accent-ink); }
.ist-traffic-worst__speed small { font-size: .68rem; color: var(--ist-ink-soft, #5d574e); }

.ist-traffic-worst__item--moderate { --tr-accent: var(--tr-moderate); --tr-accent-ink: var(--tr-moderate-ink); --tr-accent-soft: var(--tr-moderate-soft); }
.ist-traffic-worst__item--high { --tr-accent: var(--tr-high); --tr-accent-ink: var(--tr-high-ink); --tr-accent-soft: var(--tr-high-soft); }
.ist-traffic-worst__item--severe { --tr-accent: var(--tr-severe); --tr-accent-ink: var(--tr-severe-ink); --tr-accent-soft: var(--tr-severe-soft); }

/* --- Harita -------------------------------------------------------------- */

/* HARİTA ÖNTANIMLI OLARAK GİZLİDİR.
   Betik yüklenmezse (JS kapalı, ağ hatası, eski tarayıcı) ziyaretçi boş
   gri bir kutu görmemeli. Betik hazır olduğunda `is-ready` ekler.
   AGENTS.md §6: sayfa JavaScript olmadan kullanılabilir olmalı. */
.ist-traffic-mapwrap { display: none; }
.ist-traffic-mapwrap.is-ready { display: block; }

.ist-traffic-maphead { margin-bottom: 18px; }
.ist-traffic-maphead h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }

.ist-traffic-mapcard {
  position: relative;
  border-radius: var(--ist-radius-lg, 24px);
  overflow: hidden;
  border: 1px solid var(--ist-border, #e6e3dd);
  box-shadow: var(--ist-shadow);
  background: #eef0f2;
}

.ist-traffic-map {
  height: 520px;
  background: #eef0f2;
  z-index: 0; /* Leaflet katmanları site menüsünün üstüne çıkmasın. */
}

@media (max-width: 640px) {
  .ist-traffic-map { height: 380px; }
}

/* Lejant haritanın üstünde durur: göz haritadan ayrılmadan okunur. */
.ist-traffic-legend {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  box-shadow: var(--ist-shadow-sm);
  max-width: calc(100% - 24px);
}

@media (max-width: 640px) {
  .ist-traffic-legend {
    position: static;
    border-radius: 0;
    box-shadow: none;
    background: var(--ist-surface, #fff);
    border-top: 1px solid var(--ist-border, #e6e3dd);
    padding: 10px 14px;
    max-width: none;
  }
}

.ist-traffic-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ist-ink, #10191f);
}

.ist-traffic-legend__item::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tr-unknown);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 1px rgba(0, 0, 0, .12);
}

.ist-traffic-legend__item--free::before { background: var(--tr-free); }
.ist-traffic-legend__item--low::before { background: var(--tr-low); }
.ist-traffic-legend__item--moderate::before { background: var(--tr-moderate); }
.ist-traffic-legend__item--high::before { background: var(--tr-high); }
.ist-traffic-legend__item--severe::before { background: var(--tr-severe); }

.ist-traffic-maphint {
  margin: 10px 0 0;
  font-size: .82rem;
  color: var(--ist-ink-soft, #5d574e);
}

/* Harita işaretçisi: hız değerini doğrudan taşır, tıklamadan okunur. */
.ist-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .74rem;
  font-family: var(--ist-font-body, sans-serif);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 2px 6px rgba(6, 35, 46, .35);
  white-space: nowrap;
  transition: transform .15s ease;
}

.leaflet-marker-icon:hover .ist-map-pin { transform: scale(1.12); }

.ist-map-pin--free { background: var(--tr-free); }
.ist-map-pin--low { background: var(--tr-low); }
.ist-map-pin--moderate { background: var(--tr-moderate); }
.ist-map-pin--high { background: var(--tr-high); }
.ist-map-pin--severe { background: var(--tr-severe); }
.ist-map-pin--unknown { background: var(--tr-unknown); }

.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--ist-shadow); font-family: var(--ist-font-body, sans-serif); }
.leaflet-popup-content { margin: 12px 16px; line-height: 1.4; }
.ist-map-pop__name { font-weight: 600; display: block; margin-bottom: 2px; }
.ist-map-pop__meta { font-size: .82rem; color: #4a443c; }
.ist-map-pop__link { font-size: .82rem; display: inline-block; margin-top: 6px; }

/* --- Liste başlığı + arama --------------------------------------------- */

.ist-traffic-listhead { align-items: end; }

.ist-traffic-filter { width: min(100%, 360px); }

.ist-traffic-filter__label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ist-ink-soft, #5d574e);
}

.ist-traffic-filter__input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border-radius: 999px;
  border: 1px solid var(--ist-border-strong, #ddd);
  background: var(--ist-surface, #fff) no-repeat 15px center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a84' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");
  font-size: .95rem;
  box-shadow: var(--ist-shadow-sm);
}

.ist-traffic-filter__input:focus {
  outline: 2px solid var(--ist-accent, #35618f);
  outline-offset: 1px;
}

.ist-traffic-filter__empty {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--ist-ink-soft, #5d574e);
}

/* --- Yaka grupları ------------------------------------------------------- */

.ist-traffic-side { margin-top: 30px; }

.ist-traffic-side__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ist-border-strong, #ddd);
}

.ist-traffic-side__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.2rem;
  margin: 0;
}

.ist-traffic-side__count {
  font-family: var(--ist-font-body, sans-serif);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ist-ink-soft, #5d574e);
}

.ist-traffic-dist--mini {
  width: min(100%, 220px);
  height: 8px;
  background: rgba(16, 25, 31, .08);
}

/* --- İlçe kartı (katlanır) ----------------------------------------------- */

.ist-traffic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  align-items: start;
}

.ist-traffic-card {
  border-radius: var(--ist-radius, 16px);
  background: var(--ist-surface, #fff);
  border: 1px solid var(--ist-border, #e6e3dd);
  overflow: hidden;
  position: relative;
  --tr-accent: var(--tr-unknown);
  --tr-accent-ink: var(--ist-ink);
  --tr-accent-soft: #eee;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Sol renk şeridi: kartın durumu köşeden okunur, açıkken de kartın
   tamamı boyunca sürer. */
.ist-traffic-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--tr-accent);
  z-index: 1;
}

.ist-traffic-card:hover { box-shadow: var(--ist-shadow-sm); border-color: var(--ist-border-strong); }

.ist-traffic-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 14px 16px 14px 18px;
  cursor: pointer;
  list-style: none;
}

/* Safari/Chrome'un öntanımlı üçgen imini gizle: kendi imimizi koyuyoruz. */
.ist-traffic-card__head::-webkit-details-marker { display: none; }

.ist-traffic-card__head:hover { background: rgba(16, 25, 31, .02); }
.ist-traffic-card__head:focus-visible { outline: 2px solid var(--ist-accent, #35618f); outline-offset: -2px; }

.ist-traffic-card__name { font-weight: 600; font-size: 1.02rem; }
.ist-traffic-card__speed { grid-column: 1; font-size: .82rem; color: var(--ist-ink-soft, #5d574e); }
.ist-traffic-card__speed strong { font-size: 1.3rem; font-weight: 700; color: var(--ist-ink); margin-right: 2px; }

.ist-traffic-card__meta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--ist-ink-soft, #5d574e);
  justify-self: end;
}

.ist-traffic-card__chev {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ist-surface-alt, #f4efe7);
  position: relative;
  transition: transform .2s ease;
}

.ist-traffic-card__chev::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ist-ink-soft);
  border-bottom: 2px solid var(--ist-ink-soft);
  transform: rotate(45deg);
}

.ist-traffic-card[open] .ist-traffic-card__chev { transform: rotate(180deg); }

.ist-traffic-card__bar { grid-column: 1 / -1; margin-top: 2px; }
.ist-traffic-card__bar > span { background: var(--tr-accent); }

.ist-traffic-badge {
  justify-self: end;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--tr-accent-soft);
  color: var(--tr-accent-ink);
}

.ist-traffic-card--free { --tr-accent: var(--tr-free); --tr-accent-ink: var(--tr-free-ink); --tr-accent-soft: var(--tr-free-soft); }
.ist-traffic-card--low { --tr-accent: var(--tr-low); --tr-accent-ink: var(--tr-low-ink); --tr-accent-soft: var(--tr-low-soft); }
.ist-traffic-card--moderate { --tr-accent: var(--tr-moderate); --tr-accent-ink: var(--tr-moderate-ink); --tr-accent-soft: var(--tr-moderate-soft); }
.ist-traffic-card--high { --tr-accent: var(--tr-high); --tr-accent-ink: var(--tr-high-ink); --tr-accent-soft: var(--tr-high-soft); }
.ist-traffic-card--severe { --tr-accent: var(--tr-severe); --tr-accent-ink: var(--tr-severe-ink); --tr-accent-soft: var(--tr-severe-soft); }

/* Açılınca kart vurgulanır: hangisini açtığın belli olsun. */
.ist-traffic-card[open] { box-shadow: var(--ist-shadow); border-color: var(--ist-border-strong); }
.ist-traffic-card[open] .ist-traffic-card__head { border-bottom: 1px solid var(--ist-border, #e6e3dd); }

.ist-traffic-points {
  list-style: none;
  margin: 0;
  padding: 10px 14px 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.ist-traffic-point {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ist-radius-sm, 10px);
  font-size: .88rem;
  min-width: 0;
  --tr-accent: var(--tr-unknown);
  --tr-accent-ink: var(--ist-ink-soft);
}

.ist-traffic-point:hover { background: var(--ist-surface-alt, #f4efe7); }

.ist-traffic-point::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tr-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tr-accent) 18%, transparent);
}

.ist-traffic-point__name { font-weight: 500; line-height: 1.3; }
/* Etiket üstte, hız altta: dar kartta yan yana sığmıyordu ve
   "15.9 km/sa" kesiliyordu. */
.ist-traffic-point__state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  font-size: .74rem;
  white-space: nowrap;
  color: var(--ist-ink-soft, #5d574e);
}
.ist-traffic-point__speed { white-space: nowrap; }
.ist-traffic-point__state strong { font-size: .95rem; color: var(--ist-ink); }
.ist-traffic-point__label { color: var(--tr-accent-ink); font-weight: 600; }

.ist-traffic-point--free { --tr-accent: var(--tr-free); --tr-accent-ink: var(--tr-free-ink); }
.ist-traffic-point--low { --tr-accent: var(--tr-low); --tr-accent-ink: var(--tr-low-ink); }
.ist-traffic-point--moderate { --tr-accent: var(--tr-moderate); --tr-accent-ink: var(--tr-moderate-ink); }
.ist-traffic-point--high { --tr-accent: var(--tr-high); --tr-accent-ink: var(--tr-high-ink); }
.ist-traffic-point--severe { --tr-accent: var(--tr-severe); --tr-accent-ink: var(--tr-severe-ink); }

.ist-traffic-card__link { margin: 4px 0 0; padding: 4px 18px 14px; font-size: .85rem; }
.ist-traffic-card__link a { font-weight: 600; }

.ist-traffic-note {
  margin: 30px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--ist-copper-500, #c98a4b);
  background: var(--ist-surface, #fff);
  border-radius: 0 var(--ist-radius-sm, 10px) var(--ist-radius-sm, 10px) 0;
  font-size: .85rem;
  color: var(--ist-ink-soft, #5d574e);
  max-width: 70ch;
}

.ist-source-note { margin: 0; font-size: .85rem; color: var(--ist-ink-soft, #5d574e); }

/* Aramayla gizlenen ögeler. */
.ist-traffic-card[hidden], .ist-traffic-side[hidden] { display: none; }

@media (max-width: 560px) {
  .ist-traffic-glance { padding: 16px; }
  .ist-traffic-worst { padding: 18px 16px; }
  .ist-traffic-worst__list { grid-template-columns: 1fr; }
  .ist-traffic-side__head { align-items: flex-start; flex-direction: column; }
}

/* BAYAT ÖLÇÜM UYARISI: veri gerçek ama süresi dolmuş; boş sayfa yerine
   yaşı yazılı ölçüm gösterilir, ziyaretçi açıkça uyarılır. */
.ist-traffic-stale { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid #d97706; background: #fff7ed; color: #7c2d12; font-size: .92rem; border-radius: 4px; }