/* Saha haritası — rota yayları, duraklar, oynatma.
   Yalnızca /saha-haritasi ve /saha-haritasi/{il} ekranlarında yüklenir.
   site.css'ten SONRA gelir; aynı özgüllükte kuralları ezer. */

/* ---------------------------------------------------------------
   CEVAP BANDI — koyu .meclis-bant yüzeyi liste sayfasının başına.
   Bandın sağındaki "tarak" bir enstrümandır: her hücre filtre bağı.
   --------------------------------------------------------------- */
.cevap-bant .sag{justify-content:flex-start}

.tarak{display:flex; flex-direction:column; gap:2px; width:100%; font-family:var(--mono)}
.tarak-satir{display:grid; grid-template-columns:46px repeat(12, minmax(0,1fr)) 44px;
  gap:2px; align-items:stretch}
.tarak-basi{font-size:9.5px; letter-spacing:.06em; color:#7E93A4; text-transform:uppercase}
.tarak-basi .tarak-ay{display:flex; align-items:center; justify-content:center; padding-bottom:3px}
.tarak-yil{display:flex; align-items:center; font-size:11.5px; font-weight:600;
  color:#9DB0BE; letter-spacing:.04em}
a.tarak-yil:hover,a.tarak-yil.aktif{color:#fff}
.tarak-top{display:flex; align-items:center; justify-content:flex-end; font-size:10.5px;
  color:#7E93A4; font-variant-numeric:tabular-nums}

/* Hücre yoğunluğu tek bir --yog değişkeniyle sürülür; renk hesabı
   PHP'de bir kez yapılır, CSS yalnızca uygular. */
.tarak-hucre{position:relative; display:flex; align-items:center; justify-content:center;
  min-height:26px; font-size:10px; font-variant-numeric:tabular-nums;
  background:rgba(0,104,160,calc(.14 + .86 * var(--yog,0)));
  color:#EAF3F8; border:1px solid transparent}
.tarak-hucre b{font-weight:600; opacity:.92}
.tarak-hucre:hover{border-color:#fff; color:#fff}
.tarak-hucre.aktif{border-color:#fff; outline:1px solid #fff}
.tarak-hucre.bos{background:#16324A; min-height:26px}
.tarak-yilsatir{grid-template-columns:46px minmax(0,1fr) 44px}
.tarak-cubuk{display:flex; align-items:center; height:22px; background:#16324A}
.tarak-cubuk i{display:block; height:100%; background:var(--mavi)}

/* ---------------------------------------------------------------
   DÜZEN — solda 380px günlük, sağda yapışkan harita.
   DOM sırası haritayı önce yazar (mobilde üstte olsun diye);
   masaüstünde `order` ile sağa alınır.
   --------------------------------------------------------------- */
.saha-duzen{display:grid; grid-template-columns:380px minmax(0,1fr);
  border-top:1px solid var(--cizgi); align-items:start}
.saha-gunluk{order:1; border-right:1px solid var(--cizgi); min-width:0;
  padding:0 0 40px; max-height:none}
/* ÜST MENÜ YAPIŞKAN (.ust, ~74px): yapışkan öğeler onun ALTINA oturur. top:0
   iken harita ve ay ayracı menünün arkasına giriyor, haritanın üstü kesiliyordu.
   Gerçek yükseklik harita.js tarafından ölçülüp --ust-y'ye yazılır. */
.saha-duzen{--ust-y:76px}
.saha-harita{order:2; position:sticky; top:var(--ust-y); min-width:0; align-self:start;
  max-height:calc(100vh - var(--ust-y)); overflow-y:auto; scrollbar-width:thin}
.saha-harita-ic{padding:20px var(--kenar) 20px 26px}
.saha-svg{width:100%; height:auto; display:block}

/* Harita tabanı: gidilmemiş il düz gri, gidilen il yoğunluğa göre mavi.
   Ton hesabı yalnızca renk taşır; ASIL bilgi soldaki günlükte metindir. */
.saha-taban path{fill:var(--il-bos); stroke:var(--kagit); stroke-width:.7; stroke-linejoin:round}
/* Dolgu rengi PHP'de hesaplanıp satır içi yazılır. CSS'te
   rgb(calc(...)) denendi ve bazı tarayıcılarda hiç uygulanmıyor;
   il tonlaması sessizce kaybolduğu için harita düz gri kalıyordu. */
.saha-taban path.ugranan{stroke:var(--kagit)}

/* Yaylar PHP'de üretilir; buradaki tek iş görünüm. */
.saha-yaylar .yay{stroke:var(--murekkep); stroke-width:1.1; opacity:.42;
  stroke-linecap:round; vector-effect:non-scaling-stroke}
/* HER TÜR AYRI OKUNSUN. Önce yalnızca uçuş ayrılıyordu; araba, otobüs,
   tren, vapur ve yaya aynı ince çizgiyle geçtiği için haritaya bakan kişi
   nasıl gidildiğini göremiyordu. Desenler birbirinden ayırt edilebilir
   seçildi — renk tek başına ayırt edici sayılmaz (renk körlüğü). */
.saha-yaylar .yay-ucak{stroke:var(--mavi); stroke-dasharray:5 4; opacity:.62}
.saha-yaylar .yay-araba{stroke:var(--murekkep); stroke-dasharray:none; opacity:.5}
.saha-yaylar .yay-otobus{stroke:var(--murekkep); stroke-dasharray:11 5; opacity:.55}
.saha-yaylar .yay-tren{stroke:var(--murekkep); stroke-dasharray:14 4 2 4; opacity:.58}
.saha-yaylar .yay-vapur{stroke:#0E7C86; stroke-dasharray:2 5; stroke-linecap:round; opacity:.7}
.saha-yaylar .yay-yaya{stroke:var(--murekkep); stroke-dasharray:1 4; stroke-linecap:round; opacity:.5}
.saha-yaylar .yay-belirsiz{stroke:var(--murekkep); stroke-dasharray:3 6; opacity:.3}
.saha-yaylar .yay.vurgu{stroke:var(--mavi); opacity:1; stroke-width:2}

.saha-duraklar .durak{fill:var(--mavi); stroke:var(--kagit); stroke-width:1;
  cursor:pointer; transition:none}
.saha-duraklar .durak.vurgu{fill:var(--murekkep); r:5.4}
.saha-duraklar .halka{fill:none; stroke:var(--mavi); stroke-width:1.1; opacity:.55}
/* Araç artık ulaşıma göre değişen bir simge. Zemin dairesi, simgeyi
   haritanın üstünde okunur tutmak için; simge doğrudan haritaya
   çizilince il sınırlarıyla karışıyordu. */
.saha-arac.gizli{display:none}
.saha-arac .arac-zemin{fill:var(--murekkep); stroke:#fff; stroke-width:1.6}
.saha-arac .arac-ikon{fill:#fff; stroke:none}
.saha-arac[data-ulasim="ucak"] .arac-zemin{fill:var(--mavi)}
.saha-arac[data-ulasim="vapur"] .arac-zemin{fill:#0E7C86}

/* --- Ulaşım göstergesi --- */
.saha-lejant{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--soluk)}
.saha-lejant .lej{display:inline-flex; align-items:center; gap:5px}
.saha-lejant svg{width:15px; height:15px; flex:0 0 auto; fill:var(--murekkep)}
.saha-lejant .lej-ucak svg{fill:var(--mavi)}
.saha-lejant .lej-vapur svg{fill:#0E7C86}


/* Oynatma sırasında yaylar sıfırdan çizilir. JS her yaya
   --uzunluk yazar; dashoffset'i 0'a indirmek "çiziliyor" etkisi verir. */
.saha-duzen.oynuyor .saha-yaylar .yay{stroke-dasharray:var(--uzunluk); stroke-dashoffset:var(--uzunluk)}
.saha-duzen.oynuyor .saha-yaylar .yay.cizildi{stroke-dashoffset:0; transition:stroke-dashoffset .5s linear}
.saha-duzen.oynuyor .saha-duraklar .durak{opacity:0}
.saha-duzen.oynuyor .saha-duraklar .durak.acik{opacity:1}
.saha-duzen.oynuyor .saha-duraklar .halka{opacity:0}

.saha-kumanda{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px var(--kenar) 0 26px; border-top:1px solid var(--cizgi); margin-top:10px}
.saha-oynat{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 15px; border:1.5px solid var(--murekkep); background:var(--murekkep);
  color:var(--kagit); font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase}
.saha-oynat:hover{background:var(--mavi); border-color:var(--mavi)}
.saha-oynat[aria-pressed="true"]{background:transparent; color:var(--murekkep)}
.saha-durum{color:var(--soluk); font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
   GÜNLÜK — ay ayracı, 64px mono tarih damgası, durak satırları.
   Kart kenarlığı yok: gap:1px + --cizgi zemin ile tüyçizgi.
   --------------------------------------------------------------- */
.saha-ay-ayrac{position:sticky; top:var(--ust-y); z-index:2; background:var(--kagit);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk); padding:14px var(--kenar) 8px;
  border-bottom:1px solid var(--murekkep)}
.saha-gun{display:grid; grid-template-columns:64px minmax(0,1fr);
  border-bottom:1px solid var(--cizgi2); padding:14px var(--kenar) 14px}
.saha-damga{font-family:var(--mono); line-height:1; padding-top:2px}
.saha-damga b{display:block; font-size:26px; font-weight:600; letter-spacing:-.03em;
  color:var(--murekkep); font-variant-numeric:tabular-nums}
.saha-damga span{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mavi); margin-top:3px}
.saha-damga i{display:block; font-size:10px; font-style:normal; color:var(--soluk); margin-top:2px}

.saha-gun-govde{display:flex; flex-direction:column; gap:1px; background:var(--cizgi2); min-width:0}
.saha-durak-satir{display:grid; grid-template-columns:minmax(0,1fr) 56px; gap:12px;
  background:var(--kagit); padding:8px 0 10px; min-width:0}
.saha-durak-satir:first-child{padding-top:0}
.saha-durak-satir.vurgu{background:var(--mavi-sis)}
.saha-durak-satir .m{min-width:0}
.saha-durak-satir .yer{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mavi)}
.saha-durak-satir .yer a{color:var(--mavi)}
.saha-durak-satir .yer .ilce{color:var(--soluk)}
.saha-durak-satir .yer .misafir{color:var(--soluk); text-transform:none; letter-spacing:.02em}
.saha-durak-satir .b{font-size:15px; font-weight:600; line-height:1.3; letter-spacing:-.01em;
  color:var(--murekkep); margin-top:5px}
.saha-durak-satir .a{font-family:var(--serif); font-size:14px; line-height:1.5;
  color:var(--soluk); margin:5px 0 0}
.saha-durak-satir .rozetler{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.saha-durak-satir .rz{font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 6px; background:var(--yuzey2); color:var(--soluk)}
.saha-durak-satir .rz-ulasim{background:var(--mavi-sis); color:var(--mavi)}
.saha-durak-satir .g img{width:56px; height:56px; object-fit:cover; background:var(--yuzey2)}

/* İlk kayıt büyük — manşet hiyerarşisi. */
.saha-gunluk .saha-gun:first-of-type .saha-durak-satir:first-child .b{font-size:20px; line-height:1.22}

.saha-bos{padding:44px var(--kenar) 40px; border-bottom:1px solid var(--cizgi)}
.saha-bos .serif{font-family:var(--serif); font-size:21px; margin:0 0 10px}

.saha-yontem{padding:22px var(--kenar) 0; color:var(--soluk);
  text-transform:none; letter-spacing:0; line-height:1.65; font-size:12.5px}

/* ---------------------------------------------------------------
   MOBİL — harita üstte ~46vh, yapışkan DEĞİL; günlük altında akar.
   --------------------------------------------------------------- */
@media(max-width:1000px){
  .saha-duzen{grid-template-columns:minmax(0,1fr)}
  .saha-harita{order:1; position:static; height:auto; max-height:none; overflow:visible}
  .saha-harita-ic{padding:16px var(--kenar) 12px}
  .saha-svg{max-height:46vh}
  .saha-kumanda{padding:12px var(--kenar) 0}
  .saha-gunluk{order:2; border-right:none; border-top:1px solid var(--cizgi)}
}
@media(max-width:900px){
  .tarak-satir{grid-template-columns:38px repeat(12, minmax(0,1fr)) 36px}
  .tarak-hucre{min-height:22px; font-size:9px}
  .tarak-yilsatir{grid-template-columns:38px minmax(0,1fr) 36px}
}
@media(max-width:600px){
  .saha-gun{grid-template-columns:52px minmax(0,1fr)}
  .saha-damga b{font-size:21px}
  .tarak-hucre b{display:none}
  .tarak-hucre{min-height:18px}
}

/* Hareket azaltma isteğine SAYGI: oynatma düğmesi JS tarafından gizlenir,
   burada da her geçiş kapatılır ki yaylar anında çizili gelsin. */
@media(prefers-reduced-motion:reduce){
  .saha-duzen.oynuyor .saha-yaylar .yay{stroke-dasharray:none; stroke-dashoffset:0}
  .saha-duzen.oynuyor .saha-duraklar .durak{opacity:1}
  .saha-oynat{display:none}
}

/* Boş durum: veri yokken de Türkiye silueti dursun. Sayfayı tek bir uyarı
   cümlesine indirmek "harita çalışmıyor" izlenimi veriyordu. */
.saha-duzen-bos{align-items:center}
.saha-svg-bos .saha-iller path{fill:var(--il-bos); stroke:var(--kagit); stroke-width:.6}
/* Boş durum metni sayfa ızgarasına hizalanır; 8px'lik sabit girinti onu
   başlığın soluna, gövdenin dışına düşürüyordu. */
.saha-duzen-bos .saha-bos{border:none; background:none;
  padding:0 var(--a5) 0 var(--kenar); text-align:left}
.saha-duzen-bos .saha-bos p{max-width:46ch}
@media(max-width:900px){ .saha-duzen-bos{display:block} .saha-duzen-bos .saha-bos{padding:20px 0 0} }

/* ---------------------------------------------------------------------
   DOKUNMA HEDEFLERİ
   Mobil şeridi sitenin geri kalanını 44x44'e çıkardı (WCAG 2.5.5, AAA).
   Isı tarağında bu ölçü uygulanamaz: 12 ay x 4 yıllık ızgara 44px hücreyle
   ekrana sığmaz, enstrüman okunaksız hâle gelir. Burada geçerli eşik
   WCAG 2.5.8'in (AA) 24x24 CSS pikselidir; parmakla kullanılan ekranlarda
   28'e çıkarıyoruz. Normal düğmeler ise tam 44'e tamamlanır.
   --------------------------------------------------------------------- */
.tarak-hucre{min-width:24px}
.tarak-yil{min-height:24px}
.saha-oynat{min-height:44px; padding-inline:16px}

@media (pointer: coarse){
  .tarak-hucre{min-width:28px; min-height:30px}
  .tarak-yil{min-height:30px}
  /* Satır içi küçük bağlantılar dokunulabilir yükseklik kazansın. */
  .saha-durak-satir a,.saha-gun a,.saha-bant a{min-height:24px; display:inline-flex; align-items:center}
}

/* Aynı gerekçe: ısı tarağı hücreleri parmakla hedeflenebilmeli.
   Şerit kayabildiği için genişletmek düzeni bozmuyor. */
@media (pointer:coarse){
  .tarak-yilsatir{overflow-x:auto}
  .tarak-hucre{min-width:24px}
}

/* ---------------------------------------------------------------------
   GÜNLÜK SÜTUNU GENİŞLİĞİ
   380px sütun + iki yandan var(--kenar) (52px) dolgu + 64px tarih damgası
   + 56px küçük resim geriye metne yalnızca 144px bırakıyordu; başlıklar
   iki üç kelimede bir sarıyor, günlük okunmaz hâle geliyordu (tarayıcıda
   ölçüldü). Sütun genişletildi ve iç dolgu sayfa kenarından ayrıldı:
   burası tam genişlik bir bölüm değil, bir sütun.
   --------------------------------------------------------------------- */
@media(min-width:901px){
  .saha-duzen{grid-template-columns:minmax(420px,34%) minmax(0,1fr)}
  .saha-gun{padding-left:26px; padding-right:22px}
  .saha-ay-ayrac{padding-left:26px; padding-right:22px}
}
.saha-durak-satir .b{line-height:1.34}

/* Geniş ekran — aynı yükleme sırası tuzağı: bu düzeltmeler site.css'te
   işe yaramıyordu, harita.css sonra yükleniyor. */
@media (min-width: 1620px){
  .saha-duzen{max-width:var(--ic-olcu); margin-left:auto; margin-right:auto}
  .saha-gun,.saha-ay-ayrac{padding-left:26px}
  .saha-harita-ic{padding-right:0}
}

/* Tarih aralığı seçici (saha haritası filtresi) */
.tarih-secim{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.tarih-secim input[type="date"]{font-family:var(--mono); font-size:12px; padding:8px 10px;
  border:1px solid var(--cizgi); background:var(--yuzey); color:var(--murekkep); color-scheme:light}
.tarih-secim input[type="date"]:focus{outline:2px solid var(--mavi); outline-offset:-1px}
.tarih-secim .tarih-tire{color:var(--soluk)}
.cip-dugme{border:0; cursor:pointer; background:var(--mavi); color:#fff; font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px}
.cip-dugme:hover{background:var(--murekkep)}

/* ---------------------------------------------------------------------
   GÜNLÜK SAYFALAMA — günlük en yeni günden başlar, sayfa başına 30 gün.
   --------------------------------------------------------------------- */
.saha-sayfa{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px 16px 26px}
.saha-sayfa .mono{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk)}
.saha-sayfa-ust{border-bottom:1px solid var(--cizgi2); padding-top:14px; padding-bottom:12px}
.saha-sayfa-ust a.mono{color:var(--mavi)}
.saha-sayfa:not(.saha-sayfa-ust){border-top:1px solid var(--cizgi); margin-top:-1px}
@media(max-width:900px){ .saha-sayfa{padding-left:var(--kenar); padding-right:var(--kenar)} }

/* İl süzgeci: 39 il sığsın diye çipler biraz sıkı. */
.filtre-iller{gap:8px 8px}
.filtre-iller .cip{padding:7px 11px}

/* ---------------------------------------------------------------------
   İL SAYFASI — bant ölçüleri ve haritanın altındaki özet
   --------------------------------------------------------------------- */
.il-bant .sag{justify-content:center}
.il-bant-dugme{margin-top:var(--a4)}
.il-olcumler{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--a5); width:100%}
.il-olcum{display:flex; flex-direction:column; gap:6px; min-width:0}
.il-olcum-satir{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 40px; gap:10px;
  align-items:center; font-family:var(--mono); font-size:11.5px; color:#B7C6D1; text-decoration:none;
  min-height:26px}
.il-olcum-satir .ad{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.il-olcum-satir .cubuk{display:block; height:10px; background:#16324A}
.il-olcum-satir .cubuk i{display:block; height:100%; background:#4FA9D6}
.il-olcum-satir .n{text-align:right; color:var(--kagit); font-variant-numeric:tabular-nums}
a.il-olcum-satir:hover .ad,a.il-olcum-satir.aktif .ad{color:#fff; text-decoration:underline; text-underline-offset:3px}
a.il-olcum-satir.aktif .cubuk i{background:#fff}

.il-yan{display:grid; gap:18px; padding:18px var(--kenar) 8px 26px}
.il-yan-ad{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soluk); margin-bottom:8px}
.il-yan-cipler{display:flex; flex-wrap:wrap; gap:6px}
.il-yan-cipler .cip{padding:6px 10px}
.cip-duz{cursor:default}
.cip-duz:hover{background:inherit; color:inherit}
@media(max-width:1000px){ .il-yan{padding:14px var(--kenar) 4px} }
@media(max-width:700px){ .il-olcumler{grid-template-columns:minmax(0,1fr)} }
/* Fareyle kullanılan ekranda il çipleri sıkı; dokunmatikte 44px kuralı geçerli kalır. */
@media (pointer:fine){ .filtre-iller .cip,.il-yan-cipler .cip{min-height:32px} }
@media(max-width:900px){
  /* Bant tek sütuna inince .sol display:contents olur ve çocuklar `order` ile dizilir;
     sırası verilmeyen düğme 0 alıp sorunun ÜSTÜNE çıkıyordu. */
  .il-bant-dugme{order:3; margin-top:var(--a3)}
}
@media(max-width:700px){
  /* 39 il çipi telefonda haritadan önce ~12 satır tutuyordu: tek satır, yana kayar. */
  .filtre-iller{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
    margin-right:calc(-1 * var(--kenar)); padding-right:var(--kenar); padding-bottom:4px}
  .filtre-iller .cip{flex:0 0 auto; white-space:nowrap}
  .filtre-iller .filtre-ad{flex:0 0 auto}
}
/* Bilgi satırı: bağlantı sarılmaz; metin kalan yeri alır ("sayfa 1 / 9" bölünmesin). */
.saha-sayfa-ust .mono:first-child{flex:1 1 auto; min-width:0}
.saha-sayfa-ust a.mono{flex:0 0 auto; white-space:nowrap}

/* =====================================================================
   SAHA HARİTASI — YENİ DÜZEN (2026-09-30)
   Harita yan sütunda 964×407 px kalıyor, altı boş duruyordu; telefonda
   144 px yüksekliğe iniyordu. Artık: tam genişlikte harita, altında zaman
   şeridi (kronoloji), en altta okunur genişlikte günlük.
   ===================================================================== */

/* --- Aylık matris (bant enstrümanı). `.tarak` adı liste.css'teki haber
   ısı şeridiyle çakışıyor, telefonda 2026 satırını eziyordu: ayrı ad. --- */
.bant-saha .sag{justify-content:center}
.ay-matris{display:flex; flex-direction:column; gap:3px; width:100%; max-width:780px; font-family:var(--mono)}
.am-satir{display:grid; grid-template-columns:48px repeat(12, minmax(0,1fr)) 48px; gap:3px; align-items:stretch}
.am-basi .am-ay{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#7E93A4;
  text-align:center; padding-bottom:4px}
.am-yil{display:flex; align-items:center; font-size:12px; font-weight:600; color:#9DB0BE; text-decoration:none}
a.am-yil:hover,a.am-yil.aktif{color:#fff}
.am-top{display:flex; align-items:center; justify-content:flex-end; font-size:11px; color:#7E93A4;
  font-variant-numeric:tabular-nums}
.am-hucre{display:flex; align-items:center; justify-content:center; min-height:34px; font-size:11px;
  font-variant-numeric:tabular-nums; text-decoration:none; color:#EAF3F8; border:1px solid transparent;
  background:rgba(0,104,160,calc(.14 + .86 * var(--yog,0)))}
.am-hucre b{font-weight:600}
.am-hucre:hover{border-color:#fff; color:#fff}
.am-hucre.aktif{border-color:#fff; outline:1px solid #fff}
.am-hucre.bos{background:#16324A}
@media(max-width:600px){
  .am-satir{grid-template-columns:34px repeat(12, minmax(0,1fr)) 30px; gap:2px}
  .am-basi .am-ay{font-size:8.5px; letter-spacing:0}
  .am-hucre{min-height:24px}
  .am-hucre b{display:none}
  .am-yil{font-size:11px}
  .am-top{font-size:10px}
}

/* --- Harita sahnesi: tam genişlik --- */
.saha-sahne-kok{--ust-y:76px}
.saha-sahne{padding:26px var(--kenar) 8px; border-top:1px solid var(--cizgi)}
.saha-sahne-harita .saha-svg{width:100%; height:auto; max-height:none}
.saha-sahne-harita .saha-kumanda{padding:12px 0 0}
.saha-kaydir-ipucu{display:none}
@media(max-width:700px){
  /* Türkiye yatay bir ülke: 358 px genişlikte harita 150 px'e iniyordu.
     Harita 760 px çizilir, kendi kutusunda yana kayar (açılışta ortalanır). */
  .saha-svg-kaydir{overflow-x:auto; overscroll-behavior-x:contain; margin:0 calc(-1 * var(--kenar));
    padding:0 var(--kenar); scrollbar-width:thin}
  .saha-svg-kaydir .saha-svg{width:760px; max-width:none}
  .saha-kaydir-ipucu{display:block; text-align:center; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--soluk); margin:6px 0 0}
}

/* --- Kronoloji şeridi --- */
.saha-zaman{margin-top:28px}
.saha-zaman-basi{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:2px solid var(--murekkep); padding-bottom:10px}
.saha-zaman-basi h2{font-size:clamp(22px,2vw,30px); text-transform:uppercase; letter-spacing:-.03em}
.saha-zaman-basi .mono{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soluk)}
.saha-zaman-kaydir{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin}
.saha-zaman-ic{--etiket:170px; position:relative; min-width:760px; padding:34px 0 10px}
.saha-zaman-alan{position:absolute; left:var(--etiket); right:0; top:0; bottom:0; pointer-events:none}
.saha-zaman-eksen span{position:absolute; top:10px; bottom:6px; padding-left:5px; font-family:var(--mono);
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--soluk); white-space:nowrap;
  border-left:1px solid var(--cizgi2)}
.saha-zaman-eksen span.yil{color:var(--murekkep); font-weight:600; border-left-color:var(--murekkep)}
.saha-zaman-sayfa{position:absolute; top:28px; bottom:6px; background:rgba(0,104,160,.10);
  border-left:1px solid rgba(0,104,160,.45); border-right:1px solid rgba(0,104,160,.45)}
.saha-zaman-imlec{position:absolute; top:26px; bottom:4px; width:2px; margin-left:-1px; background:#D9412F}
.saha-zaman-imlec.gizli{display:none}
.saha-kulvar{display:grid; grid-template-columns:var(--etiket) minmax(0,1fr); align-items:end; height:34px}
.saha-kulvar-ad{font-size:13.5px; padding-right:12px; line-height:1.2; padding-bottom:3px}
.saha-kulvar-ad b{font-weight:600; color:var(--murekkep)}
.saha-kulvar-ad .mono{font-size:10.5px; color:var(--soluk); margin-left:4px}
.saha-kulvar-cizgi{position:relative; height:26px; border-bottom:1px solid var(--cizgi)}
.saha-kulvar-cizgi a{position:absolute; bottom:0; width:3px; margin-left:-1px; height:20px; background:var(--kv)}
.saha-kulvar-cizgi a:hover,.saha-kulvar-cizgi a:focus-visible{height:26px; width:5px; margin-left:-2px;
  outline:2px solid var(--murekkep); outline-offset:1px; z-index:1}
.k-ankara{--kv:#0C2233} .k-mersin{--kv:var(--mavi)} .k-batman{--kv:#B8731A} .k-diger{--kv:#6E8A9C}
.saha-kulvar-ad b::before{content:""; display:inline-block; width:10px; height:10px; margin-right:7px;
  background:var(--kv); vertical-align:-1px}
@media(max-width:700px){ .saha-zaman-ic{--etiket:118px} .saha-kulvar-ad{font-size:12.5px} }

/* --- Günlük: ortada, okunur genişlikte --- */
.saha-gunluk-bolum{padding:8px var(--kenar) 0; margin-top:26px; border-top:1px solid var(--cizgi)}
.saha-gunluk-baslik{font-size:clamp(22px,2vw,30px); text-transform:uppercase; letter-spacing:-.03em;
  max-width:880px; margin:20px auto 0; padding-bottom:10px; border-bottom:2px solid var(--murekkep)}
.saha-gunluk-bolum .saha-gunluk{max-width:880px; margin:0 auto; border-right:none; border-top:none; padding-bottom:40px}
.saha-gunluk-bolum .saha-gun,.saha-gunluk-bolum .saha-ay-ayrac,.saha-gunluk-bolum .saha-sayfa{padding-left:0; padding-right:0}
.saha-gunluk-bolum .saha-gun{grid-template-columns:84px minmax(0,1fr)}
@media(max-width:600px){ .saha-gunluk-bolum .saha-gun{grid-template-columns:52px minmax(0,1fr)} }
@media(max-width:700px){
  /* 39 ay 640 px'e sığmıyor: ay çizgileri kalır, etiket yalnız yıllarda. */
  .saha-zaman-eksen span.ay{font-size:0; padding:0}
  .saha-zaman-ic{min-width:900px}
  .saha-kulvar-ad{white-space:nowrap}
  .saha-kulvar-ad .mono{display:block; margin:1px 0 0 17px; font-size:10px}
  .saha-kulvar{height:38px}
}
/* Şerit yana kayarken kulvar adları solda sabit kalır. */
.saha-kulvar-ad{position:sticky; left:0; z-index:2; background:var(--kagit); align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-end}
@media(min-width:701px){ .saha-kulvar-ad{flex-direction:row; align-items:flex-end; gap:4px} .saha-kulvar-ad .mono{margin-left:0} }
@media(min-width:701px){ .saha-kulvar-ad{justify-content:flex-start} }
/* Yıl etiketi ("2023") ardındaki ayın etiketine taşıyordu; dar ekranda o ayın yalnız çizgisi kalır. */
@media(max-width:1599px){ .saha-zaman-eksen span.yil-sonrasi{font-size:0; padding:0} }
/* Varsayılan Ankara: kayıt yok ama başka ilde de değil — açık ton, alçak, tıklanamaz. */
.saha-kulvar-cizgi .varsayilan{position:absolute; bottom:0; height:10px; background:var(--kv); opacity:.22; min-width:1px}
.vars-ornek{display:inline-block; width:14px; height:8px; background:#0C2233; opacity:.22; vertical-align:0; margin:0 4px 0 2px}
.il-olcum-satir .cubuk{display:flex}
.il-olcum-satir .cubuk i.vars{background:#4FA9D6; opacity:.35}
/* Günlük başlığı: başlık + bilgi solda, sayfa okları sağda, tek satır. */
.saha-gunluk-basi{max-width:880px; margin:20px auto 0; padding-bottom:12px; border-bottom:2px solid var(--murekkep);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.saha-gunluk-basi h2{font-size:clamp(22px,2vw,30px); text-transform:uppercase; letter-spacing:-.03em; line-height:1}
.saha-gunluk-basi .mono{display:block; margin-top:8px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk)}
.saha-sayfa-ok{display:flex; align-items:center; gap:6px; flex:none}
.saha-sayfa-ok a,.saha-sayfa-ok > span[aria-hidden]{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--cizgi); background:var(--yuzey); color:var(--murekkep);
  font-size:18px; text-decoration:none}
.saha-sayfa-ok a:hover{background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit)}
.saha-sayfa-ok > span[aria-hidden]{color:var(--cizgi); background:transparent}
.saha-sayfa-ok .mono{margin:0 6px; font-size:12px; letter-spacing:.06em; color:var(--soluk); white-space:nowrap}
.saha-sayfa-ok .mono b{color:var(--murekkep); font-weight:600}
.saha-gunluk-bolum .saha-ay-ayrac:first-child{padding-top:18px}
/* İl bağlantısı ve bilgi kutusu */
.saha-taban a.il-bag{cursor:pointer}
.saha-taban a.il-bag:hover path,.saha-taban a.il-bag:focus-visible path{stroke:var(--murekkep); stroke-width:1.6; paint-order:stroke}
.saha-taban a.il-bag:focus{outline:none}
.il-kutu{position:fixed; z-index:60; pointer-events:none; background:var(--murekkep); color:var(--kagit);
  padding:8px 12px 9px; display:grid; gap:2px; box-shadow:0 6px 18px rgba(12,34,51,.22); max-width:240px}
.il-kutu b{font-size:15px; font-weight:700; letter-spacing:-.01em}
.il-kutu span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#B7C6D1}
.il-kutu[hidden]{display:none}
.saha-yaylar{pointer-events:none}

/* =====================================================================
   GÜN KUTULARI (günlük) + İL KULVARLARI (kronoloji) — 2026-09-30
   ===================================================================== */
.saha-gunluk-basi{max-width:none}
.saha-gunluk-bolum .saha-gunluk{max-width:none}
.gun-izgara{--ara:16px; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  column-gap:var(--ara); row-gap:8px; padding:4px 0 26px; overflow-x:clip}
.gun-ay{grid-column:1 / -1; margin:22px 0 2px; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soluk)}
.gun-ay:first-child{margin-top:14px}
/* Zaman çizgisi: her kutunun tepesinden geçer, aradaki boşluğu da kapatır;
   satır bitince bir alttaki satırda sürer. Nokta = o gün. */
.gun-kart{position:relative; margin-top:22px; min-width:0; background:var(--yuzey); align-self:start;
  border:1px solid var(--cizgi2); padding:12px 14px 8px; display:flex; flex-direction:column}
.gun-kart::before{content:""; position:absolute; top:-15px; left:-1px; right:calc(-1 * var(--ara) - 1px);
  height:2px; background:var(--murekkep)}
.gun-kart::after{content:""; position:absolute; top:-20px; left:12px; width:12px; height:12px; border-radius:50%;
  background:var(--mavi); box-shadow:0 0 0 3px var(--kagit)}
.gun-kart-basi{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; column-gap:8px;
  padding-bottom:8px; border-bottom:1px solid var(--cizgi2)}
.gun-kart-basi b{font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1;
  color:var(--murekkep); font-variant-numeric:tabular-nums}
.gun-kart-basi span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mavi)}
.gun-kart-basi span i{font-style:normal; color:var(--soluk); margin-left:6px}
.gun-kart-basi em{font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--soluk)}
.gun-duraklar{list-style:none; margin:0; padding:0}
.gun-durak{padding:8px 0; border-top:1px solid var(--cizgi2); display:grid; gap:3px}
.gun-duraklar .gun-durak:first-child{border-top:none}
.gun-durak:focus-visible{outline:2px solid var(--mavi); outline-offset:2px}
.gun-durak.vurgu{background:var(--mavi-sis); box-shadow:-6px 0 0 var(--mavi-sis), 6px 0 0 var(--mavi-sis)}
.gun-durak .gd-yer{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase}
.gun-durak .gd-yer a{color:var(--mavi); font-weight:600; text-decoration:none}
.gun-durak .gd-yer a:hover{text-decoration:underline}
.gun-durak .gd-yer .ilce{color:var(--soluk)}
.gun-durak .b{font-size:13.5px; font-weight:600; line-height:1.35; color:var(--murekkep)}
.gun-durak .misafir{font-size:12px; color:var(--soluk)}
.gun-durak .rz{justify-self:start; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; background:var(--yuzey2); color:var(--soluk)}
.gun-fazla{border-top:1px solid var(--cizgi2)}
.gun-fazla summary{cursor:pointer; list-style:none; padding:8px 0 4px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mavi)}
.gun-fazla summary::-webkit-details-marker{display:none}
.gun-fazla[open] summary{color:var(--soluk)}
@media(max-width:520px){ .gun-izgara{grid-template-columns:minmax(0,1fr)} }

/* İl kulvarları: 39 il alt alta, sıkı */
.saha-kulvar{height:26px}
.saha-kulvar-cizgi{height:20px}
.saha-kulvar-cizgi a{height:14px}
.saha-kulvar-cizgi a:hover,.saha-kulvar-cizgi a:focus-visible{height:20px}
.saha-kulvar-cizgi .varsayilan{height:7px}
.saha-kulvar-ad{font-size:12.5px; padding-bottom:2px}
.saha-kulvar-ad a{color:inherit; text-decoration:none}
.saha-kulvar-ad a:hover b{color:var(--mavi); text-decoration:underline; text-underline-offset:2px}
.saha-kulvar.k-diger{--kv:#5B7A8E}
@media(max-width:700px){
  .saha-kulvar{height:30px}
  .saha-kulvar-ad .mono{margin-top:0}
}
/* Dönem sayıları (bant, aylık tablonun üstünde) — 14 Mayıs 2023'ten bugüne */
.donem-sayilar{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:#22384A;
  border:1px solid #22384A; width:100%; max-width:780px; margin-bottom:26px}
.donem-sayilar > *{background:var(--koyu); padding:14px 16px 13px; display:grid; gap:3px; align-content:start;
  text-decoration:none; min-width:0}
.donem-sayilar b{font-size:clamp(28px,2.8vw,42px); font-weight:900; letter-spacing:-.045em; line-height:1;
  color:var(--kagit); font-variant-numeric:tabular-nums}
.donem-sayilar span{font-size:13px; font-weight:600; color:#C9D6DF; line-height:1.25}
.donem-sayilar small{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:#7E93A4; line-height:1.35}
.donem-sayilar a b{color:#4FA9D6}
.donem-sayilar a:hover{background:#12304A}
.donem-sayilar a:focus-visible{outline:2px solid #fff; outline-offset:-2px}
@media(max-width:700px){ .donem-sayilar{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* =====================================================================
   İL SAYFASI — ana harita sayfasıyla aynı dil (2026-09-30)
   ===================================================================== */
.il-sahne-izgara{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr); gap:32px; align-items:center}
.il-harita .saha-svg{width:100%; height:auto; display:block}
.il-harita .saha-taban path{vector-effect:non-scaling-stroke}
.il-sahne .il-yan{padding:0; gap:20px; align-content:start}
.il-yan-sayi{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--cizgi); padding-bottom:10px}
.il-yan-sayi b{font-size:clamp(34px,3.2vw,52px); font-weight:900; letter-spacing:-.045em; line-height:1;
  color:var(--murekkep); font-variant-numeric:tabular-nums}
.il-yan-sayi span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soluk)}
.il-zaman .saha-kulvar{height:34px}
.il-zaman .saha-kulvar-cizgi{height:26px}
.il-zaman .saha-kulvar-cizgi a{height:20px}
.il-zaman .saha-kulvar-cizgi .varsayilan{height:10px}
@media(max-width:900px){ .il-sahne-izgara{grid-template-columns:minmax(0,1fr); gap:20px} }

/* =====================================================================
   OYNATMA — Emin Bey'in fotoğrafı iller arasında (2026-09-30)
   ===================================================================== */
.oynuyor .saha-yaylar .yay{stroke-dasharray:var(--uzunluk); stroke-dashoffset:var(--uzunluk)}
.oynuyor .saha-yaylar .yay.cizildi{stroke-dashoffset:0; transition:stroke-dashoffset .4s linear}
.oynuyor .saha-duraklar .durak{opacity:0}
.oynuyor .saha-duraklar .durak.acik{opacity:1}
.oynuyor .saha-duraklar .halka{opacity:0}
/* İller oynatma başında griye döner, gidildikçe kendi tonuna boyanır. */
.saha-taban path{transition:fill .45s ease}
.oynuyor .saha-taban path.ugranan:not(.yandi){fill:var(--il-bos) !important}

.saha-oynat-sahne{position:relative}
.saha-arac image{pointer-events:none}
.saha-arac .arac-cerceve{fill:#fff; filter:drop-shadow(0 2px 3px rgba(12,34,51,.35))}
.saha-arac .arac-dalga{fill:var(--mavi); opacity:0; transform-box:fill-box; transform-origin:center}
.saha-arac.vardi .arac-dalga{animation:arac-dalga .9s ease-out}
@keyframes arac-dalga{from{transform:scale(.9); opacity:.55} to{transform:scale(2.6); opacity:0}}
.saha-arac .arac-rozet circle{fill:var(--murekkep); stroke:#fff; stroke-width:1.4}
.saha-arac .arac-rozet .arac-ikon{fill:#fff}
.saha-arac[data-ulasim="belirsiz"] .arac-rozet{display:none}
.saha-arac.gizli{display:none}

.oynat-kart{position:absolute; left:14px; top:14px; z-index:4; width:min(380px, calc(100% - 28px));
  background:var(--murekkep); color:var(--kagit); padding:12px 16px 12px; display:grid; gap:5px;
  box-shadow:0 10px 30px rgba(12,34,51,.28); pointer-events:none}
.oynat-kart[hidden]{display:none}
.ok-ust{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.ok-ust b{font-size:clamp(17px,1.6vw,22px); font-weight:800; letter-spacing:-.02em}
.ok-ust .mono{font-size:10.5px; letter-spacing:.08em; color:#8FA6B6; white-space:nowrap}
.ok-yer{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7FC4EC}
.ok-baslik{font-size:14px; line-height:1.35; color:#E3EAEF; min-height:1.35em}
.ok-cubuk{height:3px; background:#2A4458; margin-top:4px}
.ok-cubuk i{display:block; height:100%; width:0; background:#4FA9D6; transition:width .2s linear}
@media(max-width:700px){
  .oynat-kart{left:8px; top:8px; width:calc(100% - 16px); padding:9px 12px; gap:3px}
  .ok-baslik{font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
}

/* Düğme ve hız */
.saha-kumanda{align-items:center}
.saha-oynat{background:var(--mavi); border-color:var(--mavi); color:#fff; padding:13px 22px; font-size:11.5px}
.saha-oynat .ikon{font-size:13px}
.saha-oynat:hover{background:var(--murekkep); border-color:var(--murekkep)}
.saha-oynat[aria-pressed="true"]{background:var(--murekkep); border-color:var(--murekkep); color:#fff}
.saha-hiz{display:inline-flex; align-items:center; gap:4px}
.saha-hiz[hidden]{display:none}
.saha-hiz .mono{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk); margin-right:4px}
.saha-hiz button{font-family:var(--mono); font-size:11.5px; min-width:40px; min-height:36px; cursor:pointer;
  border:1px solid var(--cizgi); background:var(--yuzey); color:var(--murekkep)}
.saha-hiz button[aria-pressed="true"]{background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit)}
.saha-hiz button:focus-visible{outline:2px solid var(--mavi); outline-offset:2px}
@media(pointer:coarse){ .saha-hiz button{min-height:44px; min-width:44px} }
/* Tarih aralığı: haritanın altında */
.saha-tarih{margin-top:16px; padding-top:14px; border-top:1px solid var(--cizgi2)}
@media(max-width:700px){
  /* Telefonda kart haritanın ÜSTÜNDE değil ALTINDA: yapışkan menü kartın tepesini örtüyordu. */
  .oynat-kart{position:static; width:auto; margin-top:8px; box-shadow:none}
}
.oynuyor .saha-durum{display:none}
/* İller arası kesikli rota çizgileri durağan haritada GÖRÜNMEZ (kullanıcı isteği:
   harita kirli görünüyordu). Yalnızca oynatmada, fotoğrafın arkasında iz olarak
   çizilir; oynatma bitince yine silinir. `display:none` kullanılmaz: oynatma
   yayın uzunluğunu ölçüyor (getTotalLength), gizli öğede ölçüm 0 döner. */
.saha-yaylar .yay{visibility:hidden}
.oynuyor .saha-yaylar .yay.cizildi{visibility:visible}