/* ═══════════════════════════════════════════════════════════════════
   CANLI NABIZ — harita ekranının stili

   Renk paleti sayfa.css'ten geliyor; burada yeni renk TANIMLANMIYOR,
   yalnız kullanılıyor. *İkinci bir palet açmak,* site geneli değişince
   bu ekranı geride bırakırdı.

   Harita SVG ve içindeki her il bir `<path>`. Yoğunluk `--y` özel
   değişkeniyle sunucudan geliyor (0-1); CSS onu doluluk ve hâleye
   çeviriyor. *Sunucunun renk YAZMASI* seçenekti ve yapılmadı: o zaman
   koyu/açık tema ya da palet değişikliği HTML'i yeniden üretmeyi
   gerektirirdi.
   ═══════════════════════════════════════════════════════════════════ */

.nb-bas{max-width:1180px;margin:26px auto 16px;padding:0 24px}
.nb-bas h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 6px;letter-spacing:-.01em}
.nb-bas p{margin:0;color:var(--murekkep-sonuk);font-size:14px}
.nb-bas strong{color:var(--murekkep);font-weight:600}

/* ——— zaman aralığı şeridi ——— */
.nb-pencere{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto 14px;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.nb-pencere a,.nb-pencere span{
  /* 44px dokunma hedefi — proje kuralı */
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 15px;border-radius:999px;
  border:1px solid var(--cizgi);
  font-size:13.5px;text-decoration:none;
  color:var(--murekkep-sonuk);
  background:var(--yuzey);
}
.nb-pencere a:hover{color:var(--murekkep);border-color:var(--murekkep-sonuk)}
.nb-pencere .secili{
  color:#0B1220;background:var(--amber);border-color:var(--amber);font-weight:600;
}

/* ——— haritanın çerçevesi ———
   Harita dar ekranda kendi genişliğine sığar; SVG'nin viewBox'ı zaten
   oranı taşıyor, sabit yükseklik YAZILMIYOR. */
.nb-cerceve{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;padding:0 14px;
}
.nb-harita{
  display:block;width:100%;height:auto;
  overflow:visible;   /* kenardaki illerin hâlesi kırpılmasın */
}

/* ——— iller ———
   Haberi olmayan il yalnız çizgi: "burada bir il var ama hareket yok"
   demek, ili hiç çizmemekten farklı. */
.nb-il{
  fill:var(--yuzey-2);
  stroke:rgba(126,147,172,.30);
  stroke-width:.8;
  stroke-linejoin:round;
  transition:fill .18s ease,stroke .18s ease;
}
.nb-sessiz{fill:rgba(20,31,49,.55);stroke:rgba(126,147,172,.16)}

/* ——— BEŞ KADEME ———
   *Sürekli bir ölçek denendi ve bırakıldı:* iller birbirine benzer bir
   hardal tonunda çıkıyor, gözün ayıramayacağı farklar üretiliyordu.
   Beş basamak arasındaki fark bir bakışta görülüyor.

   Basamaklar EŞİT ARALIKLI DEĞİL: alt uçta koyudan açığa geçiş hızlı
   (görünür olmak için), üst uçta yavaş (en yoğun il tek başına
   parlasın). Ölçüldü: eşit aralıkta 2. ve 3. kademe ayırt edilemiyordu. */
.nb-bag .nb-il{cursor:pointer}
.nb-k1{fill:rgba(245,179,60,.16);stroke:rgba(245,179,60,.26)}
.nb-k2{fill:rgba(245,179,60,.33);stroke:rgba(245,179,60,.40)}
.nb-k3{fill:rgba(245,179,60,.54);stroke:rgba(245,179,60,.58)}
.nb-k4{fill:rgba(245,179,60,.76);stroke:rgba(245,179,60,.80)}
.nb-k5{fill:rgba(245,179,60,.97);stroke:#F5B33C}
.nb-bag:hover .nb-il,
.nb-bag:focus-visible .nb-il{
  fill:var(--murekkep);
  stroke:var(--murekkep);
  stroke-width:1.4;
}
.nb-bag:focus{outline:none}
.nb-bag:focus-visible{outline:none}

/* ——— sayılar ———
   Yolların üstünde ve tıklamayı yemiyor: rakama basan da ile basmış
   sayılmalı, `pointer-events:none` bunu sağlıyor. */
.nb-sayi{pointer-events:none}
.nb-sayi-n{
  fill:#0B1220;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:15px;font-weight:500;
  text-anchor:middle;
  paint-order:stroke;
  stroke:rgba(245,179,60,.85);stroke-width:5px;stroke-linejoin:round;
}
.nb-sayi-ad{
  fill:var(--murekkep);
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:11px;font-weight:600;
  text-anchor:middle;
  paint-order:stroke;
  stroke:rgba(7,12,21,.85);stroke-width:3px;stroke-linejoin:round;
}

/* ——— cetvel ———
   Haritanın hemen altında, tek satır. Sayılar kutuların İÇİNDE:
   *altına yazılsaydı* dar ekranda kutudan kayıyordu. */
.nb-cetvel{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:5px;
  margin:14px auto 0;padding:0 10px;
}
.nb-cetvel-bas{
  font-size:11.5px;color:var(--murekkep-sonuk);
  letter-spacing:.05em;text-transform:uppercase;
  margin:0 4px;
}
.nb-kutu{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:26px;padding:0 8px;border-radius:5px;
  border:1px solid transparent;
}
.nb-kutu b{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:11.5px;font-weight:500;
  /* Yazı hem koyu hem açık kutuda okunmalı: koyu yazı + açık hâle. */
  color:#0B1220;
}
/* En sönük iki kademede koyu yazı okunmuyor — orada açık yazı. */
.nb-kutu.nb-k1 b,.nb-kutu.nb-k2 b{color:var(--murekkep)}
.nb-kutu.nb-k1{background:rgba(245,179,60,.16);border-color:rgba(245,179,60,.26)}
.nb-kutu.nb-k2{background:rgba(245,179,60,.33);border-color:rgba(245,179,60,.40)}
.nb-kutu.nb-k3{background:rgba(245,179,60,.54);border-color:rgba(245,179,60,.58)}
.nb-kutu.nb-k4{background:rgba(245,179,60,.76);border-color:rgba(245,179,60,.80)}
.nb-kutu.nb-k5{background:rgba(245,179,60,.97);border-color:#F5B33C}
.nb-sessiz-kutu{
  min-width:26px;background:rgba(20,31,49,.55);border-color:rgba(126,147,172,.16);
}

/* ——— listeler ——— */
.nb-bolum{max-width:1180px;margin:34px auto 0;padding:0 24px}
.nb-bolum h2{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--murekkep-sonuk);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--cizgi-koyu);
}

.nb-siralama{
  list-style:none;margin:0;padding:0;
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.nb-siralama li{
  display:flex;align-items:center;gap:10px;min-height:44px;
  padding:0 12px;border-radius:10px;background:var(--yuzey);
  border:1px solid var(--cizgi-koyu);
}
.nb-sira{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--murekkep-sonuk);min-width:18px;
}
.nb-siralama a{flex:1;text-decoration:none;color:var(--murekkep);font-size:15px}
.nb-siralama a:hover{color:var(--amber)}
.nb-adet{
  /* Sayılar sütun hâlinde diziliyor; oynak genişlik satırı titretir. */
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--amber);
}

.nb-akis{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nb-akis li{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px 12px;border-radius:10px;
}
.nb-akis li:nth-child(odd){background:rgba(14,23,37,.6)}
.nb-saat{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--murekkep-sonuk);min-width:44px;
}
.nb-yer{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;min-width:96px;
}
.nb-yer:hover{text-decoration:underline}
.nb-yersiz{color:var(--murekkep-sonuk)}
.nb-baslik{flex:1;min-width:220px;color:var(--murekkep);text-decoration:none;font-size:15.5px}
.nb-baslik:hover{color:var(--amber)}

.nb-kaynak{
  color:var(--murekkep-sonuk);font-size:12.5px;
  max-width:640px;margin:0 auto 18px;line-height:1.55;
}

/* ——— dar ekran ———
   Harita dikey bir ekranda küçülüyor ama okunmaz olmuyor: il adları
   düşüyor, sayılar kalıyor. *İkisi birden kalsaydı* 375 piksellik bir
   ekranda üst üste binerdi. */
@media (max-width:620px){
  .nb-bas,.nb-pencere,.nb-bolum{padding-left:16px;padding-right:16px}
  .nb-cerceve{padding:0 8px}
  .nb-sayi-ad{display:none}
  .nb-sayi-n{font-size:20px;stroke-width:6px}
  .nb-akis li{gap:8px}
  .nb-yer{min-width:0}
  .nb-baslik{min-width:100%;order:3}

  /* Sağ alt köşede yüzen yön simgeleri var (`.yan-ikonlar`, ekrana
     sabit). Ölçüldü: 375 piksellik ekranda 313-359 arasını kaplıyor ve
     sıralamadaki haber SAYISI tam oraya düşüyordu — okur "İstanbul"u
     görüyor, kaç haberi olduğunu göremiyordu.
     *Kategori sayfalarında bu bir sorun değil* çünkü altta kalan şey
     fotoğraf; burada altta kalan şey bilginin kendisi. */
  .nb-siralama li,.nb-akis li{padding-right:54px}
}

@media (prefers-reduced-motion:reduce){
  .nb-il{transition:none}
}