* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --osmanli-kirmizi: #b3122f;
  --koyu: #1d1a16;
  --panel: #f7f1e3;
  --panel-koyu: #efe5cf;
  --altin: #b8860b;
  --metin: #2b2313;
  /* Muharebe işareti ad rengi (sonuç/tür) — ETIKET-1016: zemin değil yazı rengi */
  --sv-zafer: #1b5e20;
  --sv-yenilgi: #8c0f26;
  --sv-belirsiz: #455a64;
  --sv-isyan: #bf360c;
  --sv-deniz: #0d47a1;
  --sv-hale: #fff;
}

/* 🔴 SAĞ TIK → KOPYALA menüsü — Emre, 24 Ağustos 2026: *"kronoloji
   maddelerine sağ tıklayıp kopyalama imkânı olsun."*
   Panelin kendi diliyle konuşuyor (`--panel` zemin, `--altin` kenar), yeni
   bir renk icat edilmedi — menü haritanın üstünde belirdiği için ayrı bir
   görsel dil, kullanıcıya "bu başka bir uygulama" hissi verirdi.
   `z-index` üst bardan (100) ve panelden yüksek; menü HER ŞEYİN üstünde
   olmalı, yoksa tıklanamaz bir yerde açılır. */
.kopya-menu {
  position: fixed;
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--altin);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  padding: 3px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
}
.kopya-menu button {
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--metin);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.kopya-menu button:hover { background: var(--panel-koyu); }

/* ARAYUZ-0077-B · H-79:9 — 3 sn hareketsiz bekleyince ipucu balonu (js: ipucuKur) */
#ipucu-balon {
  position: fixed;
  z-index: 9998;
  max-width: 320px;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(20, 26, 34, .92);
  color: #f3ead7;
  border: 1px solid var(--altin);
  font: 13px/1.4 Georgia, serif;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
  pointer-events: none;
  display: none;
}
#ipucu-balon.acik { display: block; animation: mesgulBelir .15s ease-out forwards; opacity: 0; }
/* ARAYUZ-0077-B · H-77:20 — madde içi derin pencere (js: derinAc). Ana harita
   kabı .derin-harita'ya TAŞINIR; kapatınca eski yerine döner. */
#ob-derin:empty { display: none; }
#ob-derin { margin: 6px 0; }
.ob-derin-dugme {
  width: 100%; padding: 6px 10px; cursor: pointer;
  font: 600 13px Georgia, serif; color: var(--metin);
  background: var(--panel-koyu); border: 1px solid var(--altin); border-radius: 4px;
}
.ob-derin-dugme:hover { background: var(--panel); }
#derin-pencere {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; background: var(--panel);
}
#derin-pencere .derin-harita { position: relative; flex: 1 1 auto; min-width: 0; }
#derin-pencere .derin-harita > * { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
#derin-pencere .derin-yan {
  flex: 0 0 340px; max-width: 45vw; display: flex; flex-direction: column;
  border-left: 2px solid var(--altin); background: var(--panel); color: var(--metin);
  font: 13px/1.45 Georgia, serif; overflow: hidden;
}
.derin-ust { display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 6px; border-bottom: 1px solid var(--altin); }
.derin-baslik { flex: 1; font-weight: 700; font-size: 15px; }
.derin-kapat, .derin-tus button {
  cursor: pointer; font: inherit; background: var(--panel-koyu); color: var(--metin);
  border: 1px solid var(--altin); border-radius: 3px; padding: 2px 9px;
}
.derin-tus { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.derin-sayac { margin-left: auto; opacity: .75; }
.derin-liste { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 4px 10px 4px 30px; }
.derin-liste li { cursor: pointer; padding: 3px 0; }
.derin-liste li.simdiki { font-weight: 700; background: var(--panel-koyu); }
.derin-t { opacity: .7; font-variant-numeric: tabular-nums; }
.derin-detay { flex: 0 0 auto; max-height: 38%; overflow-y: auto; padding: 8px 10px; border-top: 1px solid var(--altin); }
.derin-detay-b { font-weight: 700; margin-bottom: 4px; }
.derin-detay p { margin: 4px 0; }
.derin-kaynak { opacity: .75; font-size: 12px; }
.derin-yeryok { opacity: .75; font-style: italic; }
@media (max-width: 700px) {
  #derin-pencere { flex-direction: column; }
  #derin-pencere .derin-yan { flex: 0 0 45%; max-width: none; border-left: 0; border-top: 2px solid var(--altin); }
}
/* ARAYUZ-0077-B · H-80:15 — madde içi kaynakça, panelin EN ALTINDA, kapalı gelir */
#ob-kaynakca { margin-top: 8px; border-top: 1px solid var(--altin); padding-top: 4px; font-size: 12px; }
#ob-kaynakca > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
#ob-kaynakca ul { margin: 4px 0 2px; padding-left: 18px; }
#ob-kaynakca li { margin: 2px 0; overflow-wrap: anywhere; }
#ob-kaynakca .kc-yok { font-style: italic; opacity: .8; }
/* KAYNAK-ARAYUZ-1014 — damga rozeti (madde) ve kademe etiketi (kaynak parçası) */
#ob-kaynakca .kc-damga { font-weight: 600; }
#ob-kaynakca .kc-damga-guvenli { color: #2e7d32; }
#ob-kaynakca .kc-damga-ikincil { color: #1565c0; }
#ob-kaynakca .kc-damga-taninmayan, #ob-kaynakca .kc-damga-bos { color: #6d6d6d; }
#ob-kaynakca .kc-damga-bulunamadi { color: #424242; }
#ob-kaynakca .kc-damga-guvensiz { color: #c62828; }
#ob-kaynakca .kc-kademe { display: inline-block; font-size: 10px; line-height: 1.4; padding: 0 4px;
  border-radius: 3px; border: 1px solid currentColor; vertical-align: 1px; white-space: nowrap; }
#ob-kaynakca .kc-a { color: #2e7d32; }
#ob-kaynakca .kc-b { color: #1565c0; }
#ob-kaynakca .kc-k, #ob-kaynakca .kc-n, #ob-kaynakca .kc-yok-sinif { color: #6d6d6d; }
#ob-kaynakca .kc-c { color: #c62828; }
/* ARAYUZ-0077-B · H-79:16 — devlet seçicide "↺ Yalnız Osmanlı" sıfırlama satırı */
.devlet-secici-satir.dss-sifirla { font-style: italic; border-bottom: 1px solid var(--altin); }
/* Emre 27 Eyl: "ek devlet ilan edemiyorum" — rol artık görünür düğmeden */
.dss-havuz {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px; background: var(--panel-koyu); border-bottom: 1px solid var(--altin);
  font-size: 12px;
  /* Emre 26 Ekim: "6-7 devletten sonra liste görünmez oluyor". ÖLÇÜLDÜ: havuz
     sticky ve SINIRSIZ büyüyordu; 220 px'lik listenin içinde 10 çipte 201 px,
     11'de tamamı ⇒ görünen satır 0. Artık 72 px'te durur, kendi içinde kayar;
     altta satır alanı HER ZAMAN kalır. */
  max-height: 72px; overflow-y: auto; overscroll-behavior: contain;
}
.dss-cip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border: 1px solid var(--altin); border-radius: 10px; background: var(--panel);
}
.dss-cip-odak { font-weight: 700; }
.dss-cip-x { border: 0; background: none; cursor: pointer; font: inherit; color: var(--metin); padding: 0 2px; }
.dss-havuz-bos { opacity: .7; font-style: italic; }
.dss-nasil { padding: 4px 6px; font-size: 11px; opacity: .8; }
.devlet-secici-satir .dss-ek {
  margin-left: 6px; flex: 0 0 auto; cursor: pointer;
  font: 600 11px Georgia, serif; padding: 1px 6px;
  border: 1px solid var(--altin); border-radius: 3px; background: var(--panel); color: var(--metin);
}
.devlet-secici-satir .dss-ek.secili { background: var(--altin); color: #fff; }
.devlet-secici-satir .dss-ek:disabled { opacity: .35; cursor: default; }

/* 🔴 `overflow: hidden` HTML'DE DE OLMALI — yalnız body'de yetmiyor.
   Kullanıcı (7 Ağustos 2026): "sayfada bir bozukluk var, butonlar
   görünmüyor, tam sayfa yapma butonu ... panel butonunun yarısı görünüyor."
   Ölçüldü: `document.scrollY = 217` — BELGENİN KENDİSİ kaymıştı ve üst bar
   (40px) ekranın üstüne çıkmıştı. Üç şikâyetin üçü de tek sebepten:
   ☰ Butonlar üst barda, üst bar kayınca hem o hem içindeki "tam ekran"
   ulaşılamaz oluyor, `#btn-panel` de yarım kalıyor.
   SEBEP: js/app.js:2535 kronoloji akarken etkin maddeye
   `scrollIntoView({block:"center"})` çağırıyor — ve scrollIntoView
   BÜTÜN kaydırılabilir ATALARI kaydırır, `html` dâhil. `body`de
   `overflow:hidden` vardı ama `html`de yoktu, o yüzden belge kaydı.
   ⚠️ Yani kusur zaman çubuğu OYNARKEN doğuyor; duran sayfada görünmüyor. */
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", Georgia, serif;
  display: flex;
  flex-direction: column;
  background: var(--koyu);
  color: var(--metin);
  overflow: hidden;
}

/* ---------- Üst bar (ince: dikey alan haritaya kalsın) ---------- */
/* p2/H-0010 — kullanıcının tarif ettiği düzen, soldan sağa:
   [butonları aç] · orta (tarih+dönem) · bölge combobox · YIL (kocaman) ·
   "Osmanlı Tarih Atlası" başlığı. Hakkında düğmesi TAMAMEN kaldırıldı. */
#ustbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  background: linear-gradient(90deg, #2a0a10, #5c1020, #2a0a10);
  color: #f3e6c8;
  border-bottom: 2px solid var(--altin);
  flex: 0 0 auto;
  position: relative;   /* #menu-butonlar bunun altına asılıyor */
}
/* `#ustbar h1` / `.alt` KURALLARI KALDIRILDI — 21 Ağustos, `<h1>` HTML'den
   silindi (Emre: "Osmanlı Tarih Atlası etiketini şimdilik kaldıralım");
   `.alt` yalnız o `<h1>`in içinde kullanılıyordu, başka hiçbir yerde yok. */

#btn-menu {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
#btn-menu:hover { background: #ffe9a8; }
/* Araç düğmeleri artık akışta değil — açılınca üst barın altına asılan bir
   panel. Böylece açıp kapatmak diğer öğeleri (orta, bölge, yıl) ötelemiyor. */
#menu-butonlar {
  position: absolute;
  top: 100%;
  left: 8px;
  z-index: 20;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  /* 🔴 29 Eylül 2026 — `align-items` EKLENDİ (ARAYUZ-SADELESTIR-0929).
     Varsayılan `stretch` idi ve dört düğme silinene kadar görünmüyordu:
     satırı beş düğme paylaşırken hepsi aynı boydaydı. Geriye tek düğme
     (`📚 Dizin`) kalınca o, yanındaki `#katman-grup` bloğunun BOYUNA
     UZADI — ekranda ölçüldü, 9 satırlık krem bir dikdörtgen. Kusur
     silmekten değil, hiç yazılmamış bir hizadan geldi. */
  align-items: flex-start;
  gap: 6px;
  max-width: min(520px, calc(100vw - 16px));
  background: #3a0f18;
  border: 1px solid var(--altin);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
#menu-butonlar.gizli { display: none; }
/* 🔴 29 Eylül 2026 (ARAYUZ-SADELESTIR-0929) — dört düğme kaldırıldı,
   üsluplarıyla birlikte: `#btn-cografya` `#btn-motorhat` `#btn-verisiniri`
   `#btn-koridor`. `.etkin` kuralı da gitti; artık DURUM taşıyan düğme YOK
   (durumu katman kutuları ve `#altlik-sec` taşıyor — orada durum kutunun
   kendisidir, ayrıca boyanması gerekmez). */
#btn-dizin, #btn-tamekran {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
#btn-dizin:hover, #btn-tamekran:hover { background: #ffe9a8; }
#btn-tamekran { padding: 3px 8px; font-size: 14px; }

/* ═══ ARAYUZ-0082 (30 Eylül 2026) — haritanın üstü boşaltıldı ═══════════════
   H-0088 · H-0087 · H-0086: yakınlaştırma üst çubuğa, lejant ve atıf
   `#menu-butonlar`a, panel düğmesi sürüm damgasının yerine. */
/* H-0087 — menüdeki iki yeni düğme `#btn-dizin` üslubunda; `.etkin` =
   karşılık gelen kutu şu an AÇIK (durum taşıyan düğme, `.d-gorunum-dugme`
   ile aynı dil). */
#btn-lejant, #btn-atif {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
#btn-lejant:hover, #btn-atif:hover { background: #ffe9a8; }
#btn-lejant.etkin, #btn-atif.etkin { background: var(--altin); color: #fff; }
/* H-0087 — sürüm damgası menünün EN ALTINDA, kendi satırında, sağa yaslı
   dipnot. Eski üst çubuk kuralı (`#surum-etiketi`, aşağıda) `align-self:
   flex-end` veriyor; menüde de satır sonuna oturması için tam satır. */
#menu-butonlar #surum-etiketi {
  flex: 1 0 100%;
  text-align: right;
  margin: 2px 0 0;
}
#menu-butonlar #surum-etiketi:not(:empty)::before { content: "Yayın sürümü · "; }

/* 🏷️ KOŞU DAMGASI (Emre, 5 Ekim 2026) — sürümün hemen ALTINDA, aynı hizada.
   Ayrı satır değil ayrı SATIR SONU dipnotu: yayın numarası her commit'te
   artar, koşu numarası yalnız motor koştuğunda. 4 Ekim'de r11195 yayınlandı
   ama harita BAŞKA bir prensiple çizilmişti; iki sayı yan yana durursa o fark
   görünür olur. `:not(:empty)` — damga yoksa ::before de çıkmaz, boş "Koşu ·"
   yazısı asılı kalmaz. */
#menu-butonlar #kosu-etiketi {
  flex: 1 0 100%;
  text-align: right;
  margin: 1px 0 0;
  cursor: help;              /* başlıkta bayraklar yazılı — fare üstünde okunur */
}
#menu-butonlar #kosu-etiketi:not(:empty)::before { content: "Harita · "; }
/* Yürüyüş bayrağı KAPALI koşan bir çıktı bir kusur DEĞİL ama bir FARKTIR
   (sahiplik Voronoi'ye düşer, nehrin bedeli olmaz). Sessiz kalmasın. */
#menu-butonlar #kosu-etiketi.kosu-yuruyussuz { color: var(--altin, #b8860b); }
#menu-butonlar #kosu-etiketi.kosu-yuruyussuz:not(:empty)::after { content: " ⚠"; }

/* H-0088 — [+][−] üst çubuğun en solunda, yatay; ardından küçük boşluk ve
   ☰ Butonlar. `#ustbar` gap'i 12 px — Emre "ufak bir boşluk" dedi, eksi
   kenar payı onu 6 px'e indirir. */
#yakin-grup { display: flex; gap: 2px; flex: 0 0 auto; margin-right: -6px; }
#yakin-grup button {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  cursor: pointer;
  color: var(--metin);
}
#yakin-grup button:hover { background: #ffe9a8; }
#yakin-grup button:disabled { opacity: .4; cursor: default; background: #f3e6c8; }

/* H-0087 — `#btn-panel` üst çubukta, sürüm damgasının eski yerinde (en
   sağ). Kendi kuralı (aşağıda, harita köşesi dönemi) zemin/kenar/punto
   veriyor; burada yalnız satır içi hizası. */
#ustbar #btn-panel { flex: 0 0 auto; margin-left: auto; padding: 3px 9px; font-size: 12.5px; }

/* H-0086 — atıf satırı ⓘ ile kapatılınca haritadan TAMAMEN çekilir
   (js/app.js `atifGoster`); yeniden açmak ☰ Butonlar → ⓘ Kaynaklar. */
.maplibregl-ctrl-attrib.atif-menude { display: none; }

/* H-0087 — lejantın KENDİ kapat düğmesi (aç düğmesi menüde). */
.lejant-kapat {
  position: sticky;
  top: 0;
  align-self: flex-end;
  margin: -2px -4px -18px 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--altin);
  border-radius: 5px;
  background: rgba(247, 241, 227, 0.98);
  color: #5a3a24;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  z-index: 1;
}
.lejant-kapat:hover { filter: brightness(1.08); }

/* H-0080 — açılışta "tam ekran?" penceresi (js/app.js `tamEkranSor`). */
#tamekran-soru {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(20, 8, 10, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#tamekran-soru .tamekran-kutu {
  background: #f7f1e3;
  color: var(--metin);
  border: 2px solid var(--altin);
  border-radius: 10px;
  padding: 18px 20px 16px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  font-family: Georgia, serif;
}
#tamekran-soru .tamekran-baslik { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
#tamekran-soru .tamekran-not { font-size: 13px; margin-bottom: 10px; }
#tamekran-soru kbd {
  font: 600 12px "Segoe UI", sans-serif;
  border: 1px solid #b9a67c; border-bottom-width: 2px; border-radius: 4px;
  padding: 0 5px; background: #fff;
}
#tamekran-soru .tamekran-sorma { display: block; font-size: 12px; color: #6b5a3c; margin-bottom: 14px; cursor: pointer; }
#tamekran-soru .tamekran-dugmeler { display: flex; gap: 8px; justify-content: flex-end; }
#tamekran-soru .tamekran-dugmeler button {
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13.5px;
  cursor: pointer;
  background: #f3e6c8;
  color: var(--metin);
}
#tamekran-soru .tamekran-evet { background: #5c1020; color: #f3e6c8; border-color: #5c1020; }
#tamekran-soru .tamekran-dugmeler button:hover { filter: brightness(1.08); }

/* 🔴 DALGA-0074 / H-0001 · H-0003 (21 Eylül 2026) — BUTONLAR alanına taşınan
   iki denetim. `#btn-zoom` zaman barından, `#d-gorunum-grup` haritanın sağ üst
   köşesinden geldi; ikisi de menünün üslûbuna uyuyor.
   ⚠️ `#btn-zoom`un eski kuralı `width:auto !important; font-size:13px
   !important` idi; o iki `!important` YALNIZ `#zamanbar button { width:32px;
   font-size:13px }`ı yenmek içindi. Düğme zaman barından çıkınca o kural
   uygulanmıyor, dolayısıyla `!important` da gereksiz kaldı — dosyanın
   ilerisindeki satırdan çıkarıldı, yalnız `.pasif` hâli orada bırakıldı. */
/* ⚠️ `align-self: center` ŞART, süs değil — ölçüldü (1440×900): `#menu-butonlar`
   `display:flex` ve varsayılan `align-items: stretch`; `#btn-zoom` sarma
   düzeninde 319 px boyundaki `#katman-grup` ile AYNI SATIRA düştüğünde onun
   boyuna UZUYORDU (24 px yerine 319 px). Aynı sebeple `#d-gorunum-grup`ta da
   var. Öteki menü düğmeleri bu kusuru göstermiyor çünkü kendi satırlarında
   en uzun öğe onlar. */
#btn-zoom {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}
#btn-zoom:hover { background: #ffe9a8; }

/* D sınırı görünüm anahtarı — iki hâlli bir DURUM düğmesi çifti, komut değil:
   hangi hâlin açık olduğu `.etkin` ile görünür (katman düğmeleriyle aynı dil). */
#d-gorunum-grup {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  align-self: center;   /* bkz. #btn-zoom'daki ölçüm notu */
}
#d-gorunum-grup:empty { display: none; }
.d-gorunum-baslik {
  color: #e7d3a8;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.d-gorunum-dugme {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.d-gorunum-dugme:hover { background: #ffe9a8; }
.d-gorunum-dugme.etkin {
  background: var(--altin);
  color: #2a0a10;
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
/* ⑥ Milimetrik sınır toast'ı — hat üstüne gelince (js/d_katman.js _dToastHtml).
   Fareyi engellemesin diye tıklanmaz; fare hattan çıkınca kapanır. */
.d-sinir-toast { pointer-events: none; }
.d-sinir-toast .maplibregl-popup-content {
  background: #fffaf0;
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.d-sinir-toast .maplibregl-popup-content b { color: #3a2a14; }
.d-sinir-toast .maplibregl-popup-tip { display: none; }

/* Orta: tarih + dönem/kronoloji başlığı — geri kalan alanı paylaşıyor.
   🔴 21 Ağustos — Emre: "Osmanlı Tarih Atlası" başlığı gidince çubuğun sağ
   ucunu artık `#ustbar-yil` TEK BAŞINA tutuyor; tarih bloğunu SOLA
   ÖTELEYİP "bu çubuğun hizasının bittiği yerden SAĞA YANAŞIK" koymak için
   `justify-content` `center`den `flex-end`e döndü — blok artık `#ustbar-
   yil`in hemen soluna yaslanıyor, ortada değil. */
/* 23 Agustos, PAKET 0027/H-0013 — Emre BU KARARI TERSINE CEVIRDI:
   "BU KRONOLOJI MADDESININ METNI UST CUBUKTA GORUNEN METIN SAGA DEGIL
    SOLA YANASIK OLARAK GORUNSUN VE VURGULU BIR SEKILDE OKUNABILSIN"
   Ustteki 21 Agustos yorumu `flex-end`in NICIN secildigini anlatiyor ve
   o gerekce O GUN dogruydu. Bugun Emre tersini istiyor; yeni talimat
   gecerli. Yorum SILINMEDI cunku kararin tarihcesi, kararin kendisi
   kadar degerli — bir sonraki oturum "niye sagdaydi" diye sormasin. */
#ustbar-orta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  overflow: hidden;
}
#ustbar-tarih {
  font-size: 13px;
  color: #f3e6c8;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* 23 Agustos, PAKET 0027/H-0003 + H-0013 (Emre ayni seyi IKI KEZ yazdi):
   "cubuktaki yaziyi daha goze carpan bir sekilde biraz daha kalin
    yazdirabiliriz ve rengi goze carpici olsun"
   Uc degisiklik, ucu de okunabilirlik icin:
     13px -> 15px      · 400 -> 600      · #e8d9a8 -> #ffe08a
   VE italik KALDIRILDI: Emre "vurgulu bir sekilde OKUNABILSIN" diyor,
   italik ise bu puntoda okunabilirligi DUSURUYOR. Vurguyu kalinlik ve
   renk tasiyor, egiklik degil.
   Renk secimi kasitli: #ustbar-yil ve #tepe-degisim saf altin (#ffd700).
   Baslik ONLARLA YARISMASIN diye bir ton acik sicak sari secildi —
   goze carpar ama yilin "en sagda KOCAMAN vurgulu" rolunu calmaz. */
#donem-etiketi {
  font-size: 15px;
  font-weight: 600;
  color: #ffe08a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* p23/H-0014 — harita değişiminin özeti ("Kayıp: Budin, Peşte…"). Madde
   başlığından AYRI ve sönük: asıl metin kronolojiyle senkron akan başlık,
   bu yalnız değişimin olduğu gün beliren bir dipnot. */
#tepe-degisim {
  font-size: 12px;
  color: #ffd700;
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
#tepe-degisim:not(:empty)::before { content: "· "; opacity: 0.6; }

/* Bölge combobox'ı p2/H-0010 ile haritanın üstünden üst çubuğa taşındı. */
#bolge-secici { flex: 0 0 auto; }
#bolge {
  background: rgba(247, 241, 227, 0.94);
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  cursor: pointer;
  max-width: 210px;
}

/* YIL — kullanıcının kendi tarifi: "en sağda KOCAMAN, kalın, vurgulu." */
#ustbar-yil {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* 🆕 SÜRÜM DAMGASI — kuyruk ⑤/②, Emre (2 Eylül 2026). MİNİMAL, kasıtlı
   soluk: #ustbar-yil'in "kocaman vurgulu" tarifiyle ÇARPIŞMAMASI için en
   küçük punto ve en düşük görsel ağırlık — bir künye değil, bir dipnot. */
#surum-etiketi {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(247, 241, 227, 0.45);
  margin-left: 4px;
  align-self: flex-end;
}

/* ---------- Gövde ---------- */
/* 🔴 21 Ağustos 2026 — PAKET 0026/H-0001, Emre: "sağdaki sütun en tepeden
   en aşağıya kadar devam etsin." `#govde` artık KÖK SATIR: sol sütun
   (üst bar + harita + alt bar, dikey) ile `#yanpanel` (tam yükseklik)
   yan yana. Eskiden `#govde` yalnız harita+panel taşıyordu, üst/alt bar
   `<body>`nin AYRI flex-column çocuklarıydı (üç yatay şerit). Şimdi
   `#govde` TEK satır, panel köşeden köşeye. */
#govde { flex: 1 1 auto; display: flex; min-height: 0; }
#sol-govde {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
#harita { flex: 1 1 auto; min-width: 0; position: relative; }
/* ZAMAN-GENİŞ-1008 — VERI_UFKU dışı günlerde harita üstü şerit (js/app.js
   `kapsamSeridiGuncelle`). Tıklamayı haritaya geçirir (pointer-events yok). */
#kapsam-disi-serit {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 5; max-width: calc(100% - 120px); padding: 4px 10px;
  background: rgba(42, 10, 16, .85); color: #f3e6c8; border: 1px solid var(--altin);
  border-radius: 5px; font-size: 12px; text-align: center; pointer-events: none;
}
#kapsam-disi-serit.gizli { display: none; }
/* ZAMAN-GENİŞ-1008 — ufuk dışı kronoloji maddesi (js/app.js `ufukDisiIsaretle`). */
.olay.ufuk-disi { opacity: .6; border-left-style: dashed; }

/* 🔴 EMRE, 19 Ağustos 2026: *"sağdaki ... sağ alt bölüm genişliği şimdiki
   genişlik ve dar gösterim olarak İKİ KADEME olsun ve dar gösterim şimdiki
   genişliğin %60'ı kadar olsun."*
   Taban `#yanpanel`in kendi kuralında (bu dosyada, `clamp(280px,24vw,380px)`);
   dar kip onun BİREBİR %60'ı: 280·0,6=168 · 24·0,6=14,4 · 380·0,6=228.
   ⚠️ SIRA ÖNEMLİ — `.dar` ile `.katli` aynı özgüllükte (id+sınıf). `.dar`
   ÖNCE yazıldı ki panel hem katlı hem dar iken KATLI kazansın (0 genişlik);
   ters sırada katlanmış panel 228 px açık kalırdı. Ölçmedim: iki sınıfın
   aynı anda takılı olduğu bir kullanım akışı var mı — ama CSS'in buna
   dayanması için akışın var olması gerekmiyor. */
#yanpanel.dar { flex: 0 0 var(--panel-dar); }
/* Dar kipte yalnız NEFES payı kısılıyor. Yatay taşma nöbetçileri
   (`min-width: 0` · `<select>` tavanı · kelime kırma) `.dar`a DEĞİL,
   `#yanpanel`in kendi kuralına kondu — çünkü ölçüldüğünde kaçak GENİŞ
   kipte de vardı (555 px). `.dar`a bağlasaydım kusuru yalnız yeni kipte
   kapatmış, geniş kipte bırakmış olurdum. */
#yanpanel.dar #padisah-karti { gap: 7px; padding: 6px 7px; }
#yanpanel.dar #olay-bilgi { padding: 9px 8px; }

/* yan panel katlanabilir — haritaya azami alan bırakmak için */
#yanpanel.katli { flex: 0 0 0; overflow: hidden; border-left: none; }

/* 🔴 21 Ağustos — Emre: "km² göstergesini haritanın en sağ köşesinde
   yazdıralım" (eskiden alt çubuktaydı). `#harita-ust-sag` köşenin TEK
   sahibi (`position:absolute` burada); düğme sırası ÜSTTE, km² badge'i
   ALTINDA — ikisi ayrı ayrı absolute olsaydı çakışırlardı. */
#harita-ust-sag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* İki harita düğmesi (panel katla · panel genişliği) tek sarmalda. Eskiden
   `#btn-panel` TEK BAŞINA `position:absolute; right:8px` idi; ikinci düğme
   için sabit bir `right:` px vermek düğme metni değiştikçe ("⇥ Panel" →
   "⇤ Panel") kayardı. Sarmal flex olunca ofset ÖLÇÜLMÜYOR, doğuyor. */
#harita-dugmeler {
  display: flex;
  gap: 6px;
}
/* 23 Agustos — #btn-panel-genislik KALDIRILDI (0027/H-0012). Islevi
   #btn-panel'e tasindi; o dugme artik uc kademe donduruyor. */
#btn-panel {
  background: rgba(247, 241, 227, 0.94);
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 13px;
  cursor: pointer;
  color: var(--metin);
  white-space: nowrap;
}
#btn-panel:hover { background: #ffe9a8; }

/* p2/H-0006 — panel katlanınca kronoloji tamamen kaybolmasın diye haritanın
   en altında ince bir özet şerit. Yalnız #yanpanel .katli iken görünür
   (js/app.js btn-panel tıklamasında sınıfı birlikte yönetiyor). */
#kronoloji-serit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  background: rgba(43, 35, 19, 0.86);
  color: #f3e6c8;
  font-size: 13px;
  padding: 6px 14px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kronoloji-serit.gizli { display: none; }

/* ZAMAN-ATLAMA-1021 — seyrek devir bilgi satırı (yan panel, kronoloji başlığının altı) */
#devir-bilgi {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #5a4a22;
  background: #f3ead2;
  border-bottom: 1px solid #d8c9a3;
}
#devir-bilgi.gizli { display: none; }
#devir-bilgi .devir-ust { font-weight: bold; }
#devir-bilgi .devir-bugun { margin-top: 2px; }
#devir-bilgi .devir-git {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 3px 6px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #fffaf0;
  border: 1px solid #d8c9a3;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#devir-bilgi .devir-git:hover { background: #fdf0cc; }

/* p2/H-0024 — bölge parlama, basılı tutunca çıkan ad etiketi */
.bolge-parlama-etiket {
  position: absolute;
  transform: translate(-50%, -130%);
  z-index: 7;
  background: rgba(43, 35, 19, 0.9);
  color: #ffd700;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid #ffd700;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
#kronoloji-serit .ks-sene { font-weight: bold; color: #ffd700; margin-right: 8px; }
#kronoloji-serit .ks-tarih { color: #d8c9a3; margin-right: 8px; }

/* 🔴 `min-width: 0` — 19 Ağustos 2026, ÖLÇÜLMÜŞ BİR KAÇAĞIN TIKACI.
   Dar kip yazılırken `#yanpanel` tarayıcıda ölçüldü ve `flex-basis` ile
   kullanılan genişlik AYRIŞIYORDU:
       vw 1280 · flex-basis 307,2 px (clamp doğru hesaplıyor)
       KULLANILAN GENİŞLİK          555 px      ⇒ %81 fazla
   Sebep `clamp` değil: `min-width` varsayılanı `auto`dur ve bir flex
   öğesini İÇERİĞİNİN min-content genişliğinin altına inmekten alıkoyar.
   İçerideki suçlu ölçüldü: `#odak-devlet` — 393 seçenekli `<select>`,
   en uzun devlet adına göre boyutlanıyor ve TEK BAŞINA 475 px.
   ⇒ Panelin genişliğini bu dosya değil, `data/devletler.js`teki en uzun
   künye adı belirliyordu. `min-width: 0` denetimi CSS'e geri veriyor.

   ⚠️ VE BU, DAR KİP İÇİN ŞARTTI: tıkaç olmadan `#yanpanel.dar`ın
   `clamp(168px,14.4vw,228px)`ı da aynı 555 px'e ezilirdi — düğme çalışır
   görünüp HİÇBİR ŞEY yapmazdı. Kusuru aramasaydım "iki kademe" tek
   kademe olarak teslim edilecekti.

   📌 Ve kaçak zaten GÖRÜNÜR bir hizasızlık üretiyordu: bu dosyada
   `width: clamp(280px, 24vw, 380px)` diyen ve yorumunda *"#yanpanel ile
   aynı"* yazan ikinci bir kural var — o 307 px'ti, panel 555 px. Yani
   projenin kendi beyanı iki yerde duruyordu ve biri tutmuyordu.
   ⚠️ ÖLÇMEDİM: kaçağın ne zaman doğduğunu (`#odak-devlet` 18 Ağustos'ta
   eklendi, muhtemelen o gün) ve Emre'nin 555 px'i "şimdiki genişlik"
   sanıp sanmadığını. Geniş kip bugün 555 → 307 px'e İNİYOR; bu bir
   daraltma kararı değil, beyan edilen genişliğe DÖNÜŞ. */
/* 🔴 EMRE, 20 Ağustos 2026 — İKİ KADEME DE BÜYÜTÜLDÜ:
   *"dar çok dar olmuş. Dar gösterim şu anda sistemdeki GENİŞ gösterim kadar
   olmalı. Geniş gösterim ise şu anda geniş gösterimin 1,5 KATI olmalı."*

     eski dar     clamp(168px, 14.4vw, 228px)     %60
     eski geniş   clamp(280px, 24vw, 380px)
     ⇓
     yeni dar     clamp(280px, 24vw, 380px)       = eski GENİŞ
     yeni geniş   clamp(420px, 36vw, 570px)       = eski genişin 1,5 KATI

   📌 Üç sayı da 1,5 ile çarpıldı (280→420 · 24→36 · 380→570), yani
   clamp'in üç ayağı da oranını koruyor: dar kip her ekran boyutunda
   eski genişin TAM AYNISI, geniş kip her boyutta onun 1,5 katı.
   ⚠️ `.dar` sınıfının ADI artık yanıltıcı ama DEĞİŞTİRİLMEDİ: `js/app.js`
   ve `localStorage["panelDar"]` o adı kullanıyor; ad değişirse kullanıcının
   kayıtlı tercihi sessizce sıfırlanır. Ad kozmetik, tercih gerçek. */
/* 🔴 GENİŞLİK TEK KAYNAKTAN — değişken, çünkü aynı sayı İKİ YERDE duruyordu
   ve biri güncellenince öteki bayatladı. `#olay-detay` (satır ~555) yorumunda
   *"#yanpanel ile aynı"* yazıp AYNI clamp'i ELLE tekrar ediyordu; bugün
   `#yanpanel` 1,5 katına çıkınca o satır sessizce ayrışacaktı.
   📌 `CLAUDE.md §11`: "bir bilgi iki yerde duruyorsa, biri güncellenince
   öteki bayatlar — ve hangisinin okunduğunu ALET söyler, GÖZ değil."
   Bu vakayı B4 oturumu ölçüp bildirmişti; çare yorumu düzeltmek değil,
   TEKRARI KALDIRMAK. */
:root {
  --panel-genis: clamp(420px, 36vw, 570px);
  --panel-dar:   clamp(280px, 24vw, 380px);
}
#yanpanel {
  flex: 0 0 var(--panel-genis);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 2px solid var(--altin);
  min-height: 0;
  min-width: 0;
}
/* Tıkacın ikinci ayağı: panel artık daralabildiğine göre, içindeki
   genişliğini KENDİ ölçen öğeler yatay taşırmasın. Gizleme YOK —
   `<select>` kısalır (seçili metni kırpar, açılır listesi tam görünür),
   uzun tek kelimeli başlıklar sarar. */
/* 23 Agustos, 0027/H-0002.3 = H-0012 — Emre: "kronoloji secme dropdownu
   biraz daha genisletilsin ve saga yanasik yapilsin."
   OLCULDU: padisah karti 378px, bilgi sutunu 1504'te bitiyordu, sagda
   71 PIKSEL BOSTA duruyordu — cunku `flex: 0 1 auto` sutunun BUYUMESINI
   engelliyordu. `1 1 auto` ile sutun kartin sag kenarina kadar aciliyor;
   #devlet-secici-buton zaten width:100% oldugu icin dropdown kendiliginden
   hem genisliyor hem saga yanasiyor.
   📌 Yeni bir genislik SAYISI uydurulmadi: bosluk zaten karta AYRILMISTI,
      yalnizca kullanilmiyordu. */
#padisah-bilgi { min-width: 0; flex: 1 1 auto; }
#padisah-ad, #ob-baslik { overflow-wrap: anywhere; }

/* ---------- TEK DEVLET SEÇİCİ (21 Ağustos 2026) — odak + ek, tek panel --
   PAKET 0026/H-0001: eski `#odak-devlet` (<select>) + `#ek-devletler-*`
   (checkbox paneli) BİRLEŞTİ. `#odak-devlet`in "393 seçenekli <select>
   panel genişliğini ezer" kusuru (yukarıdaki `min-width:0` notu) burada
   DOĞMAZ — bu bir <select> değil, kendi genişliğini panelin İÇİNDE, kayan
   bir listede tutan `<div>`. -------------------------------------------- */
#devlet-secici { margin-top: 2px; position: relative; }
#devlet-secici-buton {
  width: 100%;
  text-align: left;
  background: var(--panel-koyu);
  border: 1px solid var(--altin);
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--metin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#devlet-secici-buton:hover { background: #ffe9a8; }
#devlet-secici-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 15;
  margin-top: 3px;
  padding: 5px 7px;
  background: #fffdf6;
  border: 1px solid #d8c9a3;
  border-radius: 6px;
  font-size: 11.5px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
#devlet-secici-panel.gizli { display: none; }
/* 🔝 ÜST SATIR — Emre (25 Ekim 2026): kronoloji seçici · konu süzgeci · uçuş
   EN TEPEDE yan yana; hükümdar kartı ve maddeler altında. Seçici ile süzgeç
   `position: static` ⇒ açılır panelleri bu satıra göre konumlanır ve satırın
   TAM genişliğini alır (seçici düğmesi dar olsa da liste dar kalmaz).
   `z-index` açılırların alttaki kartın ve listenin üstüne binmesi için. */
#yanpanel-ust {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  background: var(--panel-koyu);
  border-bottom: 1px solid #d8c9a3;
  flex: 0 0 auto;
}
#yanpanel-ust #devlet-secici { position: static; margin-top: 0; flex: 1 1 40%; min-width: 0; }
#yanpanel-ust #devlet-secici-panel { left: 8px; right: 8px; }
#yanpanel-ust #konu-suzgec { position: static; flex: 0 1 auto; }
#yanpanel-ust #konu-suzgec .suzgec-govde { left: 8px; right: 8px; }

/* ⚡ UZUN LİSTE HIZI — Emre (25 Ekim 2026): "Tümünü seç" 1771 kronolojide
   ~17 bin satır çiziyor ve sayfa donuyordu. ÖLÇÜLDÜ (yayın, 1400×900):
   liste gizliyken çizim 415 ms, görünürken 4212 ms ⇒ maliyet JS değil,
   17 bin satırın YERLEŞİM hesabı. `content-visibility:auto` ekran dışındaki
   satırın yerleşimini atlatır: Tümünü seç 3555 → 1065 ms · Seçimi kaldır
   1063 → 251 ms. `contain-intrinsic-size` ölçülen ortalama satır boyu
   (40 px; `auto` gerçek boyu çizildikten sonra hatırlar). Şimdiki maddeye
   kaydırma sınandı: 1453 · 1683 · 1914'e atlamada satır görünür kaldı. */
#olay-listesi > .olay { content-visibility: auto; contain-intrinsic-size: auto 40px; }
.devlet-secici-satir { content-visibility: auto; contain-intrinsic-size: auto 24px; }
#devlet-secici-liste { max-height: 220px; overflow-y: auto; }
#devlet-secici-ara-satir { display: flex; gap: 4px; margin-bottom: 4px; }
#devlet-secici-ara {
  flex: 1; min-width: 0;
  font-size: 12px; padding: 3px 6px;
  border: 1px solid #d8c9a3; border-radius: 4px;
}
#devlet-secici-tumu {
  flex: none; font-size: 11px; padding: 2px 6px; cursor: pointer;
  border: 1px solid var(--altin); border-radius: 4px; background: var(--panel-koyu);
  color: var(--metin);
}
#devlet-secici-tumu:hover { background: #ffe9a8; }
.dss-bulunamadi { padding: 6px; font-style: italic; opacity: .75; }
.devlet-secici-satir {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 4px; border-radius: 4px; cursor: pointer;
}
.devlet-secici-satir:hover { background: #f0e6c8; }
.devlet-secici-satir.secili-odak { background: #fbe9b0; font-weight: bold; }
.devlet-secici-satir.secili-ek { background: #eef3e6; }
.dss-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dss-rozet {
  flex: 0 0 auto; font-size: 9.5px; font-weight: bold; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; color: #fff;
}
.secili-odak .dss-rozet { background: #8e0b22; }
.secili-ek .dss-rozet { background: #2e7d32; }
.ek-nokta { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
/* 🔴 21 Ağustos — Emre (KUSUR ②, ekran görüntüsü): "Ek devletlerde dünya
   önemi" kutusu panelden DIŞARI TAŞIYOR. AYNI KAÇAK — `#odak-devlet`
   vakasının (yukarıdaki uzun not, satır ~283) bir benzeri: `<select>`in
   varsayılan `min-width:auto`ı, flex satırını İÇERİĞİNİN min-content
   genişliğinin altına inmekten alıkoyuyordu. `min-width:0` + `max-width`
   tıkacı BURADA da gerekiyor — panel genişliği ne olursa olsun (`--panel-
   dar`/`--panel-genis`), kutu ASLA onu aşmayacak. */
.ek-ayar-satir { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed #d8c9a3; min-width: 0; }
.ek-ayar-satir select { font-size: 11px; min-width: 0; max-width: 100%; flex: 0 1 auto; }

/* 🎚 ODAK SÜZGECİ — Emre'nin 10 Eylül 2026 paneli (index.html #odak-suzgec).
   Var olan `.ek-ayar-satir` deseni AYNEN yeniden kullanılıyor; yeni bir
   görünüm dili İCAT EDİLMEDİ — panel zaten dar (devlet seçici açılır kutusu)
   ve ikinci bir stil ailesi orayı kalabalıklaştırırdı. */
.ek-ayar-grup { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #d8c9a3; }
.ek-ayar-grup > summary { cursor: pointer; font-size: 11px; font-weight: bold;
  color: #6b4f1d; padding: 2px 0; list-style: none; }
.ek-ayar-grup > summary::-webkit-details-marker { display: none; }
.ek-ayar-grup > summary::before { content: "▸ "; }
.ek-ayar-grup[open] > summary::before { content: "▾ "; }
/* Konu kutucukları: dar panelde sarmalı, yoksa yatay taşar. */
.ek-konu-kutu { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.ek-konu-oge { display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; white-space: nowrap; }
/* 🔴 DÜRÜSTLÜK SATIRI — puansız madde ve `bolge` vekili burada BEYAN edilir.
   Soluk ama OKUNUR: gizlenirse süzgeç neyi elediğini söylemeyen bir süzgeç
   olur (`D015`). */
.ek-ayar-ozet { font-size: 10px; color: #7a6a4a; margin-top: 4px;
  padding-top: 3px; border-top: 1px dotted #d8c9a3; line-height: 1.35; }

/* Birleşik listedeki madde satırı: rozet (kaynak devlet) + tarih + başlık. */
.olay.ek-madde { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.ek-rozet {
  font-size: 9.5px;
  font-weight: bold;
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* ODAK'ın kendi maddeleri (`ek-odak`) Osmanlı kırmızısıyla ayırt edilir —
   ekrandaki "bu ANA kronoloji, ötekiler EK" ayrımının görsel karşılığı. */
.olay.ek-odak { border-left-color: var(--osmanli-kirmizi); }

/* ---------- Padişah kartı (kompakt) ---------- */
#padisah-karti {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--panel-koyu);
  border-bottom: 1px solid #d8c9a3;
  flex: 0 0 auto;
}
#padisah-portre {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--altin);
  background: #5c1020;
  color: #f3e6c8;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
#padisah-portre img { width: 100%; height: 100%; object-fit: cover; }
/* 🔴 21 Ağustos — PAKET 0025/H-0003: dar/geniş düğmesi padişah adının
   sağına, panelin EN KENARINA yaslandı. `justify-content:space-between`
   ad'ı sola, düğmeyi sağa iter; `min-width:0` ad UZUNKEN (ör. "II. Abdül-
   hamid Hân") düğmenin taşmasını değil, ad'ın satır kırmasını sağlar. */
#padisah-ad-satir { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#padisah-ad-satir #padisah-ad { min-width: 0; }
#padisah-ad { font-weight: bold; font-size: 14.5px; line-height: 1.2; }
#padisah-saltanat { font-size: 12px; color: #6b5a33; }

/* ---------- Olay akışı ---------- */
/* 🔴 EMRE, 19 Ağustos 2026: *"kronoloji sütunu ve madde açıklamaları
   kutucukları sağdaki sütunun yüksekliğini %50-%50 kullansın."*
   `flex: 1 1 50%` İKİSİNDE DE aynı ⇒ artan/eksilen yer eşit bölünür.
   `#olay-bilgi.gizli` `display:none` olduğu için kapalıyken bölüşecek
   ikinci kutu YOKTUR ve akış tamamını alır — ayrı bir kural gerekmiyor.
   ⚠️ `min-height: 90px` KALDI: %50 çok kısa ekranda h2 + liste toplamının
   altına inebilir; bu, ekranın taşmasını değil kutunun küçülmesini
   durduran son çizgidir. Ölçmedim: hangi pencere yüksekliğinin altında
   90 px'in gerçekten devreye girdiği. */
#olay-akisi {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  min-height: 90px;
}
#olay-akisi h2 {
  font-size: 13px;
  padding: 5px 10px;
  background: var(--panel-koyu);
  border-bottom: 1px solid #d8c9a3;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
}
#olay-sayac {
  font-size: 11px;
  font-weight: normal;
  color: #8a6d2f;
  white-space: nowrap;
}
/* ARAYUZ-4-SARTNAME.md §⑧① — Emre: "ayar checkbox'ın yanında, kronoloji
   başlığıyla YAN YANA TEK SATIR olsun." `#olay-akisi h2`nin iki flex
   çocuğu: sol grup (📜 Kronoloji + sayaç), sağ grup (uçuş onay kutusu ·
   kip · ⚙). Dar ekranda `flex-wrap` sarmalıyor ama her GRUP kendi içinde
   kırılmıyor — "📜 Kronoloji" ve "⚙" hiçbir zaman kırpılmıyor (§⑧①⚠️). */
/* 🔴 EMRE, 18 Ağustos 2026: "kronoloji yazısının ALTINDA 706/1223 başlık
   yazısı olsun, ORTA KISMI süzgeç butonuna ayıralım."
   Eskiden başlık ve sayaç YAN YANAYDI (baseline flex) ve süzgeç ayrı bir
   satırdaydı. Şimdi sol grup DİKEY (başlık üstte, sayaç altında), orta
   süzgece kalıyor, sağda uçuş grubu. Üç sütun tek satırda. */
#olay-akisi-baslik {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; white-space: nowrap; flex: 0 0 auto;
}
#ucus-grup { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
#ucus-kontrol { display: flex; align-items: center; gap: 3px; cursor: pointer; font-size: 12px; }
#ucus-kip { font-size: 11px; padding: 1px 4px; }
#ucus-grup #btn-ayarlar {
  background: var(--panel-koyu);
  border: 1px solid var(--altin);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--metin);
}
#ucus-grup #btn-ayarlar:hover { background: #ffe9a8; }
/* ~~min-height: 118px~~ — 🔴 KALDIRILDI, 19 Ağustos 2026. **Süzgeci
   kaldırmadan önce neyi koruduğunu oku** (`CLAUDE.md §11`): bu taban,
   detayın `max-height: 62%`e kadar BÜYÜYEBİLMESİNE karşı konmuştu —
   uzun bir maddede liste birkaç piksele iniyordu.
   ⇒ O tehdit artık YOK: `#olay-bilgi` de `flex: 1 1 50%` ve tavanı
   kaldırıldı, yani detay hiçbir maddede %50'yi geçemiyor. Taban artık
   YAPIDAN geliyor, sayıdan değil.
   ⚠️ Ve 118 px'i BIRAKMAK zararlı olurdu: %50 payı 118'in altına düşen
   kısa pencerelerde `#olay-akisi`nin içeriği kutusunu taşıracaktı
   (`overflow: visible`). Sayı bir taban değil, ikinci bir tavan hâline
   gelirdi. `min-height: 0` ⇒ bölüşmeyi yalnız %50 belirliyor. */
#olay-listesi { flex: 1 1 auto; overflow-y: auto; padding: 5px; min-height: 0; }
/* 🆕 14 Ekim 2026 — KARARLAR-1014 #43 (0081/H-0044 B): "🌍 Dünyada" satırı —
   Osmanlı görünümünde listenin üstünde, son 365 günün dünya puanı 5 olayları
   (app.js odakKur → dunyadaGuncelle). Veri kopyalanmaz, devlet maddesine bağlanır. */
.dunyada-satir {
  flex: 0 0 auto; padding: 4px 8px; margin: 3px 5px 0; font-size: 11.5px; line-height: 1.35;
  background: #eef4f8; border-left: 4px solid #2f6f8f; color: #1f3f52;
}
.dunyada-satir.gizli { display: none; }
.dunyada-satir b { margin-right: 6px; white-space: nowrap; }
.dunyada-satir .dunyada-madde { display: block; cursor: pointer; }
.dunyada-satir .dunyada-madde:hover { text-decoration: underline; }

.olay {
  padding: 4px 7px;
  margin: 2px 0;
  border-left: 4px solid #b9a97c;
  background: #fffdf6;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s;
  opacity: 0.45;
}
.olay:hover { background: #fdf3d7; }
.olay.gecmis { opacity: 1; }
.olay.simdiki {
  opacity: 1;
  background: #fbe8b8;
  border-left-color: var(--osmanli-kirmizi);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* ✓ ÇOKLU SEÇİM (SECIM-0930, 30 Eylül 2026) — `.simdiki`DEN SONRA yazıldı:
   ikisi aynı özgüllükte ve seçim, "şimdiki" vurgusunun ÜSTÜNE binmeli
   (kullanıcının kendi işareti, motorun işaretinden önce gelir).
   ⚠ `border-left` KULLANILMADI — o sütun KATEGORİ rengini taşıyor
      (`.olay.k-fetih` vb.); seçim onu ezseydi madde türü kaybolurdu.
      `outline` yer kaplamaz, yani satırlar seçilince KAYMAZ. */
.olay.secili {
  opacity: 1;                       /* gelecekteki madde seçilince sönük durmaz */
  background: #e6effb;
  outline: 2px solid #1257a8;
  outline-offset: -2px;
}
.olay.secili.simdiki { background: #f6e7c4; }
.olay.secili .o-tarih::before { content: "\2713 "; color: #1257a8; }

/* Seçim şeridi — boşken hiç yer kaplamaz (#kr-ara-sonuc deseni). */
#kr-secim {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 8px 4px;
  font-size: 10.5px;
  color: #1257a8;
  font-weight: 600;
}
#kr-secim:empty { display: none; }
.kr-secim-kopya {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border: 1px solid #b9c9e4;
  border-radius: 3px;
  background: #fff;
  color: #1257a8;
  cursor: pointer;
}
.kr-secim-kopya:hover { background: #dbe7f8; }

.olay .o-tarih { font-size: 11px; color: #8a6d2f; font-weight: bold; }
/* 🔴 EMRE, 19 Ağustos 2026: *"dar gösterimde kronoloji maddeleri metin
   uzunluğu genişliğe sığmaz ise İKİ SATIR şeklinde aşağıya uzanabilsin."*
   ÖLÇÜLDÜ: başlıkta zaten `white-space: nowrap` ya da kırpma YOKTU —
   normal metin 168 px'te de sarıyordu. Yani talebin ÇOĞU zaten
   sağlanıyordu; sağlanmayan tek şey **kırılamayan uzun tek kelime**
   ("Karahisâr-ı Sâhib", "Konstantinopolis") — o, kutuyu yatay taşırıyordu.
   ⇒ `overflow-wrap: anywhere` kelimeyi İÇİNDEN kırar. `break-word` yerine
   `anywhere` seçildi çünkü `break-word` kelimenin kendi genişliğini
   min-content hesabında hâlâ sayar ve dar sütunu genişletmeye çalışır.
   ⚠️ Taşma GİZLENMİYOR: hiçbir yere `text-overflow`/`nowrap` konmadı,
   satır sayısına da tavan konmadı — "iki satır" bir SINIR değil, sığmayan
   metnin doğal sonucu. Üç satır gerekiyorsa üç satır olur.
   Kural her iki kipte de geçerli; dar kipe bağlamadım, çünkü geniş kipte
   de taşan uzun kelime aynı kusuru üretiyordu (ölçmedim: geniş kipte kaç
   maddede taşıyordu). */
.olay .o-baslik { line-height: 1.3; overflow-wrap: anywhere; }

/* kategori renkleri */
.olay.k-fetih    { border-left-color: #1e7d32; }
.olay.k-savas    { border-left-color: #b3122f; }
.olay.k-kusatma  { border-left-color: #8c0f26; }
.olay.k-sefer    { border-left-color: #33691e; }
.olay.k-antlasma { border-left-color: #1257a8; }
.olay.k-diplomasi{ border-left-color: #5c6bc0; }
.olay.k-evlilik  { border-left-color: #ec407a; }
.olay.k-vassal   { border-left-color: #7986cb; }
.olay.k-taht     { border-left-color: #b8860b; }
.olay.k-sadrazam { border-left-color: #8d6e63; }
.olay.k-darbe    { border-left-color: #4e342e; }
.olay.k-isyan    { border-left-color: #7b1fa2; }
.olay.k-reform   { border-left-color: #00838f; }
.olay.k-kanun    { border-left-color: #00695c; }
.olay.k-idari    { border-left-color: #455a64; }
.olay.k-ekonomi  { border-left-color: #f9a825; }
.olay.k-kultur   { border-left-color: #ad1457; }
.olay.k-bilim    { border-left-color: #283593; }
.olay.k-kesif    { border-left-color: #4527a0; }
.olay.k-kayip    { border-left-color: #616161; }

/* Sonradan eklenenler — ölçüldü (31 Temmuz): veride 25 ayrı `k:` değeri var,
   burada 20 sınıf vardı. Renksiz kalan 237 madde (%24) `.olay`ın nötr bej
   kenarına düşüyordu, yani "kategorisiz" ile aynı görünüyordu.
   `siyaset` TEK BAŞINA 157 madde — atlasın ikinci en kalabalık kategorisi. */
.olay.k-siyaset  { border-left-color: #827717; }
.olay.k-kurulus  { border-left-color: #4a148c; }
/* `ayaklanma` (32) ile `isyan` (12) AYNI kavramın iki yazımı; şema `ayaklanma`
   diyor, CSS yalnız `isyan`ı tanıyordu — yani arayüz azınlıkta olanı biliyordu.
   Aynı rengi veriyorum; veri tarafındaki birleştirme YAPILACAKLAR'da. */
.olay.k-ayaklanma{ border-left-color: #7b1fa2; }
.olay.k-ittifak  { border-left-color: #5c6bc0; }
/* 🆕 21 Eylül 2026 — KRONO-EKSIK-0921 ölçtü: veride 27 madde `k:"mimari"`
   kullanıyor ama bu dosyada `k-mimari` sınıfı HİÇ YOKTU (0 eşleşme), yani 27
   madde nötr bej kenara düşüyor ve "kategorisiz" ile aynı görünüyordu — 31
   Temmuz'daki aynı kusurun tekrarı, yalnız daha küçük evrende.
   Renk `kultur`la AYNI veriliyor: mimari bu atlasta kültür-sanat ailesinin
   üyesi ve ayrı bir renk açmak paleti bölmekten başka bir şey söylemezdi
   (aynı desen: `ayaklanma`=`isyan`, `antlasma`=`diplomasi`=`ittifak`). */
.olay.k-mimari   { border-left-color: #ad1457; }
/* 🆕 13 Ekim 2026 — TERİM STANDARDI (TERIM-STANDART-0070, seçenek A, Emre onayı).
   Üç sınıf, tek soru: toprağın EGEMENİ mi değişti, yalnız DENETLEYENİ mi?
   `k-fetih` (yeşil) = egemenlik devri · `k-isgal` (turuncu-kiremit) = fiilî
   denetim, egemenlik devri YOK · `k-sefer` (koyu yeşil) = ordunun hareketi.
   `k:"isgal"` veride vardı ama CSS karşılığı yoktu (nötr bej kenara düşüyordu);
   "işgal" başlıklı maddeler de toprak kaybı grisiyle (`k-kayip`) çiziliyordu —
   iki ayrı olay tipi aynı renkteydi. Süre ölçüt DEĞİL (işgal pencerelerinin
   medyanı 8,9 yıl): ayrım egemenliktedir. */
.olay.k-isgal    { border-left-color: #d84315; }
/* ⚠️ `diger` (45) BİLEREK renksiz: gerçek bir kategori değil, karışık torba
   (Millî Mücadele · Germiyan çeyizi · şehzade kaçırılması aynı kovada).
   Nötr kenar onun için DOĞRU gösterim — eksik değil, kasıt. */

/* ---------- Zaman barı ---------- */
#zamanbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: linear-gradient(90deg, #2a0a10, #47101c, #2a0a10);
  border-top: 2px solid var(--altin);
  flex: 0 0 auto;
}
#zamanbar button {
  background: #f3e6c8;
  border: 1px solid var(--altin);
  border-radius: 5px;
  width: 32px;
  height: 27px;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
#zamanbar button:hover { background: #ffe9a8; }
#zamanbar select {
  height: 27px;
  border-radius: 5px;
  border: 1px solid var(--altin);
  background: #f3e6c8;
  font-size: 12px;
  max-width: 130px;
}
/* ZAMAN-GENİŞ-1008 — esneklik `#zaman`dan sarmala geçti (çubuk + çağ ekseni). */
#zaman-sarmal { flex: 1 1 auto; min-width: 90px; display: flex; flex-direction: column; }
#zaman { width: 100%; margin: 0; accent-color: var(--osmanli-kirmizi); height: 5px; }
/* Çağ ekseni — ana çubuk ve yerleşim çubuğu ortak (js/app.js `zamanEksenDoldur`).
   Yazılar `left:%` ile ölçekteki GERÇEK konumda; ilk/son kenara yaslanır. */
.zaman-eksen { position: relative; display: block; height: 12px; }
.zaman-eksen span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 9px; line-height: 12px; white-space: nowrap;
}
.zaman-eksen span.ilk { transform: none; }
.zaman-eksen span.son { transform: translateX(-100%); }
.zaman-eksen span.cag-siniri { font-weight: bold; }
.zaman-eksen span.cag-siniri::before {         /* ölçeğin kırıldığı yer */
  content: ""; position: absolute; left: 50%; top: -4px; height: 4px;
  border-left: 1px solid currentColor;
}
#zaman-eksen { color: #e9d7a6; margin-top: 2px; }
/* 11 Eylül 2026 — "Tarihe git" girişi. `#zamanbar button`/`input` genel
   kuralları zaten var; burada yalnız METİN GİRİŞİNİN kendine özgü genişliği
   gerekiyor. 14 Eylül 2026 — "📅 Git" butonu kaldırıldı, kuralı da silindi;
   tek tetik Enter. */
#tarihe-git-giris {
  height: 27px;
  width: 160px;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1px solid var(--altin);
  background: #f3e6c8;
  font-size: 12px;
  padding: 0 6px;
}
#tarihe-git-durum {
  font-size: 11px;
  color: #f3e6c8;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 🔴 H-0015 (paket 0044) — Emre: "📅 Git butonuna basınca hiçbir şey
     çıkmıyor." KUSUR BULUNDU, TASARIM DEĞİL: `calistir()` (js/app.js
     ~8578) doğru çalışıyor ve bu span'a metni GERÇEKTEN yazıyor — ama
     `#zamanbar` (footer) `display:flex` VE `flex-wrap` YOK (taşan içerik
     satıra İNMİYOR, SIKIŞTIRILIYOR). Eski `flex: 0 1 auto` bu span'ı
     SIKIŞTIRILABİLİR yapıyordu ve footer'ın toplam içeriği (3 düğme + 2
     seçici + oto-düğmesi + 160px'lik giriş kutusu + buton + bu span +
     zaman çubuğu) mevcut genişliği aştığında tarayıcı BU SPAN'I SIFIRA
     KADAR küçültüyordu — metin DOM'da yazılı duruyor (`el.textContent`
     dolu) ama GÖRÜNMEZ genişlikte. Ölçüldü: canlı sayfada
     `getBoundingClientRect().width === 0`.
     ÇARE: bu span artık KÜÇÜLMÜYOR (`flex-shrink: 0`); taşma yükü
     `#zaman` çubuğuna (aşağıda, `flex: 1 1 auto` + `min-width: 90px`)
     düşüyor — bir kaydırma çubuğu 90px'te de işini görür, bir durum
     metni 0px'te GÖRÜNMEZ olur. */
  flex: 0 0 auto;
}
#tarihe-git-durum.tarihe-git-uyari { color: #ffb347; }
/* 🆕 YER ARA kutusu (YER-ARAMA-KUTUSU-1006) — Emre, 6 Ekim 2026: tarih
   kutusunun YANINDA, aynı footer grubunda; görünüşü `#tarihe-git-giris`in
   aynısı (yeni görsel dil yok). Liste footer haritanın ALTINDA olduğu için
   YUKARI açılır (`bottom: 100%`). */
#yer-ara {
  position: relative;
  flex: 0 0 auto;
}
#yer-ara-giris {
  height: 27px;
  width: 160px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid var(--altin);
  background: #f3e6c8;
  font-size: 12px;
  padding: 0 6px;
}
#yer-ara-liste {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--altin);
  border-radius: 6px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25);
}
#yer-ara-liste.gizli { display: none; }
/* 🔴 FOOTER TAŞMASIN (Emre, 6 Ekim 2026, (K) şartı) — ÖLÇÜLDÜ: footer'ın
   genişliği ekranın değil, YAN PANELDEN ARTAN alanın fonksiyonu. 1024 px
   ekranda footer 604 px; kutu eklenince içerik 778 px oluyordu (taşma).
   375 px'te kutu eklenmeden ÖNCE de taşıyordu (içerik 528 / 375 px; `#zaman`
   çubuğu ekran DIŞINDA). ⇒ `flex-wrap` HER GENİŞLİKTE açık: sığan footer tek
   satır kalır (1366 px'te ölçüldü: değişmedi), sığmayan alt satıra iner. */
#zamanbar { flex-wrap: wrap; row-gap: 5px; }
/* Tarih + yer kutusu tek birim: satır kırılırsa BİRLİKTE iner (yan yana kalır). */
#git-grup { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* 📱 Dar ekranda düzen: ① oynatma düğmeleri + seçiciler ② tarih + yer kutusu
   yan yana ③ zaman çubuğu tam satır. Liste footer'a göre konumlanır ve
   ekran genişliğinde açılır (kutunun sol kenarından açılsa sağa taşardı). */
@media (max-width: 600px) {
  #zamanbar { position: relative; }
  #git-grup { flex: 1 1 100%; min-width: 0; }
  #tarihe-git-giris { flex: 1 1 120px; width: auto; min-width: 0; }
  #yer-ara { flex: 1 1 120px; min-width: 0; position: static; }
  #yer-ara-giris { width: 100%; }
  #zaman-sarmal { flex: 1 1 100%; }
  #yer-ara-liste { left: 8px; right: 8px; width: auto; max-width: none; max-height: 40vh; }
}
#yer-ara-liste .ya-bas { padding: 4px 9px; font-size: 11px; color: #6b5a33; border-bottom: 1px solid #e4d6b0; }
#yer-ara-liste .ya-yok { padding: 6px 9px; color: #6b5a33; font-style: italic; }
#yer-ara-liste .ya-satir {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  cursor: pointer;
  min-width: 0;
}
#yer-ara-liste .ya-satir.secili { background: #fdf3d7; }
#yer-ara-liste .ya-ad { color: #5c1020; font-weight: 600; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#yer-ara-liste .ya-tur { color: #8a6d2f; font-size: 11px; flex: 0 0 auto; }
#yer-ara-liste .ya-sahip { color: #6b5a33; font-size: 11px; margin-left: auto; text-align: right;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `#tarih-goster` KURALI KALDIRILDI — 21 Ağustos, öğe HTML'den silindi
   (bkz. index.html footer notu). Üst çubuktaki `#ustbar-tarih` yeterli. */

/* ---------- Olay detay penceresi ---------- */
/* hatalar 14 md.1: "olay başlıklarının üzerine tıklayınca AYNI SÜTUNDA SAĞ ALTTA
   açılması gerekmiyor muydu, neden ortada açılıyor?"
   Haklı. Pencere `inset:0` + koyu örtüyle tam ekran modaldi: kronoloji maddesine
   tıklamanın amacı olayı HARİTAYLA BİRLİKTE görmek, oysa modal haritayı tamamen
   kapatıyordu. Artık kronoloji sütununun (#yanpanel) altına yaslanıyor, genişliği
   onunla aynı clamp'i kullanıyor ve harita açıkta kalıyor. */
#olay-detay {
  position: fixed;
  inset: auto 0 0 auto;                        /* sağ alt */
  /* #yanpanel ile aynı — ve artık AYNI DEĞİŞKENDEN, elle tekrar YOK.
     Panel iki kademeli olduğu için bu da iki kademeli olmalı; `#olay-detay`
     `#yanpanel`in içinde DEĞİL (position:fixed, kardeş bile değil), o yüzden
     kalıtım işlemiyor ve `:has()` ile ayrı kural gerekiyor (aşağıda). */
  width: var(--panel-genis);
  max-height: 66vh;
  display: flex;
  align-items: flex-end;
  z-index: 50;
  pointer-events: none;    /* örtü yok; sarmalayıcı haritanın tıklamasını yutmasın */
}
/* Panel dar kipteyken detay penceresi de daralsın — yoksa panelden TAŞAR.
   `:has()` şart: `#olay-detay` `position:fixed` ve `#yanpanel`in içinde
   değil, o yüzden ne kalıtım ne kardeş seçici işler. Sınıf `#yanpanel`de
   olduğu için köke çıkıp oradan iniyoruz. */
html:has(#yanpanel.dar) #olay-detay { width: var(--panel-dar); }
#olay-detay.gizli { display: none; }
#olay-detay-kutu {
  pointer-events: auto;
  background: var(--panel);
  border: 2px solid var(--altin);
  border-right: none;
  border-bottom: none;
  border-radius: 10px 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 66vh;
  overflow-y: auto;
  padding: 16px 18px 18px;
  position: relative;
  box-shadow: -6px -4px 24px rgba(0,0,0,0.35);
}
/* dar ekranda yan panel alta iniyor (@media 900px) — orada tam genişlik doğru */
@media (max-width: 900px) {
  #olay-detay { width: 100%; }
  #olay-detay-kutu { border-radius: 10px 10px 0 0; border-right: 2px solid var(--altin); }
}
#detay-kapat {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #6b5a33;
}
#detay-tarih { font-size: 13px; color: #8a6d2f; font-weight: bold; }
#detay-baslik { margin: 6px 0 10px; font-size: 19px; }
#detay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: #6b5a33;
}
#detay-metin { font-size: 14px; line-height: 1.55; max-height: 45vh; overflow-y: auto; }
#detay-kaynak {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: #1257a8;
  text-decoration: none;
  border-bottom: 1px dotted #1257a8;
}
#detay-kaynak:hover { color: #0d3f7a; }
#detay-git {
  margin-top: 14px;
  background: var(--osmanli-kirmizi);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
#detay-git:hover { filter: brightness(1.15); }

/* 🪦 `.lejant-dugme` KURALI KALDIRILDI — ARAYUZ-0082 / H-0087 (30 Eylül
   2026). Haritanın sağ üstündeki `☰`/`×` düğmesi (hatalar 3.docx madde 2)
   ikiye ayrıldı: AÇ → `#btn-lejant` (menüde), KAPAT → `.lejant-kapat`
   (lejantın içinde). İkisinin kuralı "ARAYUZ-0082" bloğunda. */

/* lejant */
.lejant {
  position: absolute;
  /* ARAYUZ-0082: köşede artık düğme yok (`#btn-panel` üst çubuğa, lejant
     düğmesi menüye gitti) ⇒ lejant köşeden başlar; eskiden 72 px idi. */
  top: 8px;
  right: 8px;
  transition: opacity 0.15s ease;
  z-index: 5;
  background: rgba(247, 241, 227, 0.92);
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  /* p2/H-0017+H-0021: sembol bölümü eklenince lejant harita boyunu aşabiliyor.
     Kaydırma gerektiği için bu panel içinde pointer-events tekrar açılıyor. */
  max-height: calc(100% - 20px);
  overflow-y: auto;
  pointer-events: auto;
}
.lejant.kapali { display: none; }
.lejant i {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  opacity: 0.75;
}
.lejant i.lj-nokta {
  border-radius: 50%;
  background: #2b1006;
  border: 1.5px solid #f7f1e3;
  opacity: 1;
  vertical-align: middle;
}
.lejant i.lj-yaklasan { opacity: 0.55; border-style: dashed; border-color: #2b1006; }
.lejant b.lj-sim {
  display: inline-block;
  width: 14px;
  margin-right: 5px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
}
.lejant-baslik {
  font-weight: bold;
  color: #6d0d1c;
  margin-top: 4px;
  border-top: 1px solid rgba(109, 13, 28, 0.25);
  padding-top: 4px;
}
.lejant-baslik:first-child { margin-top: 0; border-top: none; padding-top: 0; }
/* 🔴 21 Ağustos — bu kural (lejant kutusu içindeki ESKİ `#alan-goster`
   yerleşimi) YETİM kalmıştı: öğe önce zaman çubuğuna (7 Ağustos), şimdi
   haritanın köşesine (bkz. aşağıda `#harita-ust-sag #alan-goster`)
   taşındı ama bu satır İKİ TAŞINMADAN da SİLİNMEMİŞTİ — aynı id için tek
   bir kural KALDI, iki ayrı yerde çelişen tanım YOK. */

/* ---------- Şehir işaretleri ---------- */
.sehir { display: flex; align-items: center; gap: 4px; pointer-events: none; }
/* 🔴 ETIKET-0073 (Emre, H-0010): "Riyad ve Dir'iye'nin yazıları üst üste
   biniyor. Birini sağa yanaşık birini sola yanaşık yapalım …
   yani şehirlerden biri noktanın soluna, diğeri noktanın sağına yazılacak:
   `yazı ve nokta` / `nokta ve yazı`."
   Varsayılan `nokta ve yazı` (marker anchor `left`, offset −5). `.sol`
   bunun AYNASIDIR: satır ters döner (ad solda, nokta sağda) ve iç öğe kendi
   genişliği kadar sola çekilir.
   ⚠️ `+10px` SÜS DEĞİL, NOKTAYI YERİNDE TUTAN TELAFİ. Ölçüm: normal hâlde
   dış öğenin sol kenarı konum−5px, nokta ilk öğe ve genişliği w (5/7/9 px),
   yani nokta merkezi ≈ konum − 5 + w/2. Aynada nokta SON öğe: `-100%`
   çekilince sağ kenar konum−5'e düşer ve nokta merkezi konum−5−w/2 olurdu —
   yani nokta gerçek yerinden ~9 px batıya kayardı. +10px bunu geri alır;
   iki yönün sapması ~1,5 px'e (z8'de ~0,4 km) eşitlenir.
   ⚠️ `transform` `getBoundingClientRect`e DAHİLDİR — çakışma elemesinin
   ikinci geçişi aynalanmış kutuyu gerçek yerinde ölçer, ayrı bir model
   tutulmaz (§35: aynı sayıyı iki yerde tutma). */
.sehir.sol {
  flex-direction: row-reverse;
  transform: translateX(-100%) translateX(10px);
}
/* Rozetin kenar boşluğu da aynalanır; yoksa ad ile rozet ters tarafta
   yapışık, öbür tarafta iki kat aralıklı görünür. */
.sehir.sol .s-fetih { margin-left: 0; margin-right: 3px; }
/* 🔴 21 Ağustos — Emre: "devlet noktaları daha küçük çemberler ile
   işaretlensin." Ölçülmüş gerekçe: `.bosluk-halka` (devletsiz yerleşim
   glifi, aşağıda) 13 px — devlete BAĞLI olmayan bir noktanın, devlete
   bağlı olağan bir noktadan (eski 7 px) DAHA BÜYÜK çizilmesi ters bir
   hiyerarşiydi. Bütün kademeler ~%28 küçültüldü (7→5 · 9→7 · 12→9 ·
   cok-uzak 6→4), ORANLAR (d1<d2<d3) ve `asgari` 4 px'in ALTINDA kalmama
   kısıtı KORUNDU. */
.sehir .s-nokta {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2b1006;
  border: 1.5px solid #f7f1e3;
  box-shadow: 0 0 3px rgba(0,0,0,0.6);
  flex: 0 0 auto;
}
/* Fetih tarihi rozeti — kullanıcı: "harita üzerinde fetih tarihi küçük punto
   ile gösterilsin". KÜÇÜK PUNTO isteğin kendisi, süs değil: şehir adından
   sönük durmalı ki adı bastırmasın. Ad birincil (burası neresi), tarih ikincil
   (ne zaman alındı).
   ⚠️ Boşken hiç yer kaplamıyor (`:empty`), çünkü maddelerin ezici çoğunluğunda
   `fethedilen:` alanı yok ve rozet o zaman HİÇ olmamalı — boş bir kutu bile
   şehir adını kaydırırdı. */
.sehir .s-fetih {
  font-size: 9.5px;
  color: #6b4a1f;
  background: rgba(247, 241, 227, 0.82);
  border: 1px solid rgba(184, 134, 11, 0.55);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 3px;
  white-space: nowrap;
  line-height: 1.35;
}
.sehir .s-fetih:empty { display: none; border: none; padding: 0; margin: 0; }
/* 🔴 KAZANÇ ve KAYIP AYRILMALI — 1463-06-01 maddesi aynı anda Travnik'i
   kazanıp Yayça ile Srebrenik'i kaybediyor. Ayrım olmasa Yayça 1463'te
   Osmanlı'ya geçmiş gibi okunurdu.
   ⚠️ Yeni bir renk dili İCAT EDİLMEDİ: kronoloji listesi zaten `k-fetih`
   yeşilini (#1e7d32) ve `k-kayip` grisini (#616161) kullanıyor. Kullanıcı o
   ikiliyi panelde her gün görüyor; haritada aynısı öğrenme gerektirmiyor.
   Ayrıca metinde +/− işareti var — renk körlüğünde de ayrım kalsın. */
.sehir .s-fetih.kazanc {
  color: #1e5d2a;
  border-color: rgba(30, 125, 50, 0.55);
  background: rgba(232, 245, 233, 0.88);
}
/* 🔴 STATÜ — üçüncü eksen, ve YENİ RENK İCAT EDİLMEDİ.
   Statü ne kazanç ne kayıp: toprak el değiştirmiyor, TONU değişiyor. Bu
   yüzden yeşil/gri ikilisi yanlış olurdu — o ikili "girdi/çıktı" demek.
   ⇒ Haritanın kendi dili kullanılıyor: doğrudan idare koyu kırmızı (#8e0b22),
   tâbi toprak açık kırmızı (#b2384a). Rozet aynı iki tona gönderme yapıyor,
   yani kullanıcı gövde renginde zaten gördüğü ayrımı rozette tekrar görüyor.
   ⚠️ Renk körlüğünde iki statü yönü aynı oku paylaşıyor; sözel karşılık
   `title` ipucunda ("tâbilikten doğrudan idareye geçti"). Rozete kelime
   sığmıyor — küçük punto kullanıcının kendi isteğiydi. */
.sehir .s-fetih.dogrudan {
  color: #6d0d1c;
  border-color: rgba(142, 11, 34, 0.6);
  background: rgba(250, 235, 238, 0.9);
}
.sehir .s-fetih.vasal {
  color: #8c3444;
  border-color: rgba(178, 56, 74, 0.5);
  background: rgba(252, 244, 245, 0.9);
}
.sehir .s-fetih.kayip {
  color: #4a4a4a;
  border-color: rgba(97, 97, 97, 0.55);
  background: rgba(238, 238, 238, 0.88);
}
/* Uzakta okunmaz ve kalabalık yapar; yalnız yakınlaşınca çıksın. */
#harita.cok-uzak .sehir .s-fetih, #harita.uzak .sehir .s-fetih { display: none; }

.sehir .s-ad {
  font-size: 11px;
  color: #1d1006;
  text-shadow: 0 0 3px #f7f1e3, 0 0 3px #f7f1e3, 0 0 3px #f7f1e3;
  white-space: nowrap;
}
/* önem dereceleri */
.sehir.d1 .s-ad { display: none; }               /* uzaktan sadece nokta */
#harita.yakin .sehir.d1 .s-ad { display: inline; }

/* ⚠️ PUNTO ÖLÇEĞE BAĞLI — kullanıcı (hatalar 11 madde 19):
   "şehir isimleri küçük puntolar ile görünsün ancak kapladıkları bölgeyi
    geçmeyecek şekilde olsun ... bursa yazısı zoom out yapıldığında aynı
    puntoda kalarak Çanakkale'den Amasya'ya kadar uzanıyor olmamalı."
   Bir peteğin EKRANDAKİ genişliği zoom düştükçe küçülüyor ama yazı sabit
   punto kaldığı için ad kutusu peteği aşıyordu. Punto da ölçekle küçülünce
   yazı kendi bölgesinin içinde kalıyor.
   Not: gerçek "alanı aşmasın" kısıtı ancak petek genişliği ölçülerek
   yapılabilir; bu yaklaşım onun ucuz ve yeterli karşılığı. */
#harita.uzak .sehir .s-ad      { font-size: 10px; }
#harita.uzak .sehir.d2 .s-ad   { font-size: 10.5px; }
#harita.uzak .sehir.d3 .s-ad   { font-size: 11.5px; }
#harita.cok-uzak .sehir .s-ad  { font-size: 9.5px; letter-spacing: -0.2px; }
#harita.cok-uzak .sehir.d3 .s-ad { font-size: 10.5px; }
/* Çok uzakta nokta da küçülsün — 900 nokta ekranı kirletmesin. */
#harita.cok-uzak .sehir .s-nokta { width: 4px; height: 4px; }
/* Ediniliş simgesi (⚔ ♜ 📜 🤝 🏰) uzakta okunmuyor, yalnız kalabalık yapıyor. */
#harita.cok-uzak .sehir .s-yontem { display: none; }
/* Bölge seçici stili artık üst barda tanımlı (p2/H-0010) — bkz. dosya başı. */
.sehir.d2 .s-nokta { width: 7px; height: 7px; }
.sehir.d2 .s-ad { font-size: 12px; font-weight: bold; }
.sehir.d3 .s-nokta {
  width: 9px; height: 9px;
  background: var(--osmanli-kirmizi);
  border-color: #ffd700;
}
.sehir.d3 .s-ad { font-size: 13.5px; font-weight: bold; color: #4d0713; }
/* p2/H-0008 — kullanıcı: "hem yıldız hem kırmızı yuvarlak var, bir tane olmalı
   noktasal olarak." İkisi aynı şehri iki ayrı sembolle işaretliyordu: kırmızı
   .s-nokta dairesi VE ada eklenen " ⭐" son eki. Başkentte nokta tamamen
   yıldıza dönüşüyor, ada ayrı yıldız eklenmiyor — TEK sembol kalıyor. */
.sehir.baskent .s-nokta {
  width: auto; height: auto;
  background: none; border: none; box-shadow: none; border-radius: 0;
  font-size: 13px; line-height: 1;
}
.sehir.baskent .s-nokta::after { content: "⭐"; }
/* p4/H-0013 — "gelecek olayın şehri, olmuş olayın şehrinden ayrılmazsa
   kullanıcı yanlış okur" (oturumlar/OLCUM-ILERI-BAKIS.md §4). Serbest kalan
   tek eksen opaklık + kenar deseni: punto önemi, renk sahipliği anlatıyor,
   ikisine de dokunulmuyor. */
.sehir.yaklasan { opacity: 0.55; }
.sehir.yaklasan .s-nokta { border-style: dashed; }
/* p2/H-0010 (koordinatör, 3 Ağustos) — ASGARÎ İŞARETÇİ. `g:0` yerleşimlerin
   %82'si — Sebte, Melilla, Balaklava, Yalta, Sudak gibi küçük ama gerçek
   yerler bugüne kadar z≥5.2'ye kadar TAMAMEN görünmezdi. Seçici bir önem
   ölçütü YOK (oturumlar/ASGARI-ISARETCI-OLCUM.md — iki aday ölçüldü, ikisi
   de elendi), o yüzden ayrım iddia edilmiyor: isimsiz, soluk, küçük bir
   nokta — HER zoom sınıfında (`#harita.cok-uzak/.uzak/.yakin` fark etmez,
   bu yüzden ID'siz, düz sınıf seçicisiyle en sonda tanımlanıp önceki zoom
   kurallarının üstüne biniyor). */
/* ⚠️ `#harita` ÖNEKİ ŞART: `#harita.cok-uzak .sehir .s-nokta` (satır ~621)
   ID taşıdığı için salt `.sehir.asgari .s-nokta`dan DAHA SPESİFİK olurdu
   ve en uzak zoom'da 4px'i ezip 6px'e dönerdi — asgarînin "her zoom'da
   aynı küçüklük" sözü orada bozulurdu. */
#harita .sehir.asgari .s-nokta {
  width: 4px; height: 4px;
  opacity: 0.5;
}
.sehir.asgari .s-ad,
.sehir.asgari .s-yontem,
.sehir.asgari .s-fetih { display: none; }
.sehir .s-yontem {
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

/* ---------- Fetret Devri şehzade etiketleri ---------- */
/* ☠️ .sehzade-etiket kaldırıldı — Fetret şehzade katmanı ölüydü
   (donemler.js'te z alanı 0/462) ve yanlış teşhise yol açıyordu. */

/* ---------- Savaş yerleri ---------- */
.savas-isaret { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.savas-isaret .sv-ikon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 3px #fff);
}
/* 🆕 ETIKET-1016 (Emre, 16 Ekim 2026, not #13: "Kulacahisar baskını gibi
   kocaman fontlu yazılar haritayı kapatıyor"). Eskiden 10,5 px kalın BEYAZ
   yazı + %85 opak renkli ZEMİN (padding 1px 5px) — ~110×16 px'lik kutu
   altındaki sınırı ve şehir adını örtüyordu. Artık zemin YOK: sonuç renginde
   ince yazı + beyaz hale (`.sefer-ad` ile aynı dil). Odaktaki olay `sv-odak`
   (app.js savasGuncelle) ile biraz daha büyük/kalın kalır. */
.savas-isaret .sv-ad {
  font: 600 10px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  color: var(--sv-belirsiz);
  text-shadow: 0 0 3px var(--sv-hale), 0 0 2px var(--sv-hale), 0 1px 2px var(--sv-hale);
  margin-top: 1px;
}
.savas-isaret.zafer   .sv-ad { color: var(--sv-zafer); }
.savas-isaret.yenilgi .sv-ad { color: var(--sv-yenilgi); }
.savas-isaret.belirsiz .sv-ad { color: var(--sv-belirsiz); }
.savas-isaret.sv-odak .sv-ad {
  font-size: 11.5px;
  font-weight: 700;
  text-shadow: 0 0 3px var(--sv-hale), 0 0 3px var(--sv-hale), 0 0 2px var(--sv-hale), 0 1px 2px var(--sv-hale);
}

/* ---------- Olay türü simgeleri (kullanıcı isteği) ----------
   meydan ⚔ · kuşatma ◎ (şehrin üstünde çember) · iç isyan 🔥 · deniz ⚓
   Başarısız olanların simgesine kırmızı bir çarpı biner.                */
.savas-isaret .sv-ikon { position: relative; display: inline-block; }

/* Kuşatma: şehir yuvarlağının üstünde nabız gibi atan bir halka */
.savas-isaret.tur-kusatma .sv-ikon {
  font-size: 19px;
  color: #b8860b;
  animation: kusatmaNabiz 1.6s ease-in-out infinite;
}
@keyframes kusatmaNabiz {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.22); opacity: 0.65; }
}

/* İç isyan: titreşen ateş */
.savas-isaret.tur-isyan .sv-ikon {
  font-size: 17px;
  animation: isyanAtes 0.9s ease-in-out infinite alternate;
  transform-origin: 50% 90%;
}
@keyframes isyanAtes {
  from { transform: scale(1)    rotate(-5deg); }
  to   { transform: scale(1.15) rotate(5deg);  }
}
.savas-isaret.tur-isyan .sv-ad { color: var(--sv-isyan); }

/* Deniz muharebesi */
.savas-isaret.tur-deniz .sv-ikon { font-size: 16px; color: #0d47a1; }
.savas-isaret.tur-deniz .sv-ad   { color: var(--sv-deniz); }

/* Başarısızlık: simgenin üzerine çapraz kırmızı çarpı */
.savas-isaret.basarisiz .sv-ikon::after {
  content: "✕";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #d32f2f;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  animation: none;
}

/* ---------- Olay bilgi paneli — kronolojinin ALTINDA, haritayı kapatmaz ---------- */
/* 🔴 EMRE, 18 Ağustos 2026: *"kronoloji sütununun kapladığı alanı kısaltsak
   ve madde içeriğine sağladığımız pencerenin alanını artırsak mı."*
   ÖLÇÜLDÜ (640 px panelde): kronoloji 371 px (%58) · detay 199 px (%31).
   ⚠️ Sabit bölüşme YANLIŞ çare olurdu: `flex: 0 0 auto` sayesinde detay
   penceresi KISA maddede zaten küçük kalıyor — tavanı büyütmek boşluk
   yaratmaz, yalnız UZUN maddenin daha çoğunu gösterir. Tavan %46 → %62;
   kronolojiye de bir TABAN kondu (#olay-listesi min-height) ki hiç yok
   olmasın. Yani kısalan şey kronolojinin PAYI değil, TAVANI. */
/* 🔴 VE YUKARIDAKİ KARAR 19 Ağustos 2026'da GERİ ALINDI — Emre bu sefer
   AÇIKÇA sabit bölüşme istedi: *"kronoloji sütunu ve madde açıklamaları
   kutucukları sağdaki sütunun yüksekliğini %50-%50 kullansın."*
   `flex: 0 0 auto` + `max-height: 62%` → `flex: 1 1 50%`, tavan kalktı.
   ⚠️ **Bedeli biliniyor ve kabul edildi:** üstteki yorumun övdüğü davranış
   (kısa maddede detay kutusu kendiliğinden küçük kalır) BİLEREK bırakıldı;
   kısa bir maddede kutu artık %50'yi alır ve altı boş durur. Bu bir kusur
   değil, istenen bölüşmenin doğrudan sonucu — kutuların yeri madde
   uzunluğuna göre ZIPLAMIYOR, sabit kalıyor.
   ⚠️ ÖLÇMEDİM: maddelerin kaçının kısa (boşluk bırakacak) olduğunu. Emre
   boşluktan şikâyet ederse çare tavanı geri koymak değil, `flex-basis`i
   içerik yüksekliğine bağlamaktır — o zaman %50 talebi de düşer.
   `.gizli` `display:none` olduğu için kapalıyken bu satırların HİÇBİRİ
   uygulanmaz; akış tek başına kalır ve %100 alır. */
#olay-bilgi {
  position: relative;
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  background: var(--panel);
  border-top: 3px solid var(--altin);
  padding: 9px 11px;
  animation: obGir 0.28s ease-out;
}
#olay-bilgi.gizli { display: none; }
/* Panel sinyali (`.panel-sinyal` + `@keyframes panelSinyal`) BU DOSYADA
   AŞAĞIDA tanımlı — buraya İKİNCİ bir kopyası yazılmış ve ölçümle
   yakalanıp kaldırıldı. CSS'te sonraki tanım kazandığı için iki kopya
   SESSİZCE ayrışırdı: biri güncellenir, öteki ölü kalır ve okuyan
   yanlış olanı okur. Aynı gün yazılan uyarının aynı gün ihlali. */
@keyframes obGir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#olay-bilgi-kapat {
  position: absolute;
  top: 5px;
  right: 7px;
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  color: #6b5a33;
}
#ob-ust { display: flex; gap: 10px; align-items: flex-start; }
#ob-gorsel {
  flex: 0 0 auto;
  width: 62px;
  text-align: center;
}
#ob-gorsel img {
  width: 62px;
  height: 74px;
  object-fit: cover;
  border: 2px solid var(--altin);
  border-radius: 5px;
  background: #5c1020;
}
#ob-gorsel .ob-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 74px;
  font-size: 26px;
  background: #5c1020;
  color: #f3e6c8;
  border: 2px solid var(--altin);
  border-radius: 5px;
}
#ob-gorsel-ad, .ob-gorsel-ad {
  font-size: 10.5px;
  color: #6b5a33;
  margin-top: 3px;
  line-height: 1.2;
}
#ob-baslikalan { min-width: 0; padding-right: 16px; }
#ob-tarih { font-size: 11.5px; font-weight: bold; color: #8a6d2f; }
#ob-baslik { font-size: 15px; font-weight: bold; line-height: 1.22; margin: 2px 0 4px; }
#ob-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; font-size: 11px; color: #6b5a33; }
.ob-kat {
  padding: 1px 7px;
  border-radius: 9px;
  color: #fff;
  font-size: 10.5px;
  background: #7a6a4a;
}
.ob-kat.k-savas, .ob-kat.k-kusatma { background: #b3122f; }
.ob-kat.k-fetih  { background: #1e7d32; }
.ob-kat.k-antlasma, .ob-kat.k-diplomasi, .ob-kat.k-ittifak { background: #1257a8; }
.ob-kat.k-taht, .ob-kat.k-sadrazam { background: #b8860b; }
.ob-kat.k-isyan, .ob-kat.k-darbe, .ob-kat.k-ayaklanma { background: #7b1fa2; }
.ob-kat.k-reform, .ob-kat.k-kanun { background: #00838f; }
.ob-kat.k-ekonomi { background: #ef6c00; }
.ob-kat.k-kultur, .ob-kat.k-bilim, .ob-kat.k-kesif, .ob-kat.k-mimari { background: #ad1457; }
.ob-kat.k-kayip  { background: #616161; }
/* Rozet listeden DAHA çok geride kalmıştı: 261 madde (%26,5) nötr kahveye
   düşüyordu. Dördü (`idari` `sefer` `vassal` `evlilik`) listede renkliydi ama
   rozette değildi — aynı olay, iki farklı yerde iki farklı kategori gibi
   görünüyordu. Listeyle eşitlendi. `diger` burada da bilerek nötr. */
.ob-kat.k-siyaset { background: #827717; }
.ob-kat.k-kurulus { background: #4a148c; }
.ob-kat.k-idari   { background: #455a64; }
.ob-kat.k-sefer   { background: #33691e; }
.ob-kat.k-vassal  { background: #7986cb; }
.ob-kat.k-evlilik { background: #ec407a; }
.ob-kat.k-isgal   { background: #d84315; }   /* terim standardı: fiilî denetim, egemenlik devri yok */
/* ARAYÜZ 4 ④ — "yer_id/yer_kon ikisi de yoksa kart SESSİZCE ATLAMAZ."
   Boşken hiç yer kaplamaz (`:empty`), doluyken belirgin bir uyarı satırı. */
#ob-yer-yok {
  font-size: 11.5px;
  color: #8a6d2f;
  font-style: italic;
  margin-top: 4px;
}
#ob-yer-yok:empty { display: none; }

/* 🔴 PANEL SİNYALİ — Emre'nin hükmü, 24 Ağustos 2026 (0031 SESSİZ ADIM).
   Emre: *"düzmece mustafa ayaklanması diyor kronolojide … pas geçiliyor"*
   ve kararı: sinyal HARİTADA değil PANELDE yansın.

   NİÇİN BURADA: bir ayaklanmanın ya da bir kanun maddesinin haritada
   karşılığı YOKTUR. Haritayı konuşturmak (sahte bir nokta yakmak ya da
   uydurma bir yer_id vermek) YALAN olurdu; ama adımın hiç iz bırakmaması
   da kabul edilemez — kullanıcı onu "atlandı" diye okuyor.
   ⇒ Panel, "bir şey oldu" demenin YALAN SÖYLEMEYEN yeridir.

   ⚠️ BİÇİM KASITLI OLARAK SAKİN: kenardan içeri akan bir vurgu, yanıp
   sönen bir renk DEĞİL. Harita kırpması zaten "yanıp sönme" dilini
   kullanıyor; panel aynı dili konuşsaydı ikisi karışır ve kullanıcı
   hangisinin ne dediğini ayırt edemezdi. İki ayrı şey, iki ayrı dil.
   📌 Süre 950 ms; `js/app.js` sınıfı 1100 ms sonra kaldırıyor. İki sayı
   iki yerde ama biri ÖTEKİNDEN BÜYÜK olmak zorunda, EŞİT değil — bu
   yüzden bayatlama riski yok (`odak-parlama`da aynı desen ve gerekçesi
   orada da yazılı). */
@keyframes panelSinyal {
  0%   { background: rgba(255, 215, 0, 0.00); }
  18%  { background: rgba(255, 215, 0, 0.16); }
  100% { background: rgba(255, 215, 0, 0.00); }
}
.panel-sinyal {
  animation: panelSinyal 0.95s ease-out 1;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  /* Hareket istemeyene sabit bir iz bırakılır — sinyal KAYBOLMAZ,
     yalnız hareketsiz anlatılır. */
  .panel-sinyal { animation: none; box-shadow: inset 3px 0 0 var(--altin); }
}
/* ARAYÜZ AYNI GÜN — "bu günde N olay var" şeridi + kardeş pilleri.
   K1/K2/K3 (§ARAYUZ-AYNI-GUN.md): boşken :empty ile yer kaplamaz, metin
   SAYIYI önce söyler, pil tıklaması tarihAyarla+obGoster+haritayiOlayaGotur
   üçlüsünü BİRLİKTE tetikler (js/app.js ayniGunSeridiGuncelle). */
#ob-ayni-gun {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 11.5px;
  color: #6b5a33;
  background: #fbf2d9;
  border: 1px solid var(--altin);
  border-radius: 5px;
  padding: 4px 8px;
  margin-top: 6px;
}
#ob-ayni-gun:empty { display: none; margin: 0; padding: 0; border: 0; }
.ob-ayni-gun-piller { display: flex; gap: 4px; }
.ob-ayni-gun-pil {
  border: 1px solid var(--altin);
  background: #fff;
  color: #5c1020;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.ob-ayni-gun-pil:hover { background: #fbf2d9; }
.ob-ayni-gun-pil.etkin {
  background: #5c1020;
  color: #f3e6c8;
  cursor: default;
}
/* Kronoloji listesindeki rozet — yalnız aynı güne düşen madde grubunun
   üyelerinde çıkar (tek maddeli günde HİÇ yok, ①①①… gürültüsü olmasın). */
.o-ayni-gun-rozet {
  display: inline-block;
  color: #5c1020;
  font-weight: bold;
  margin-right: 3px;
}
#ob-detay { font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
#ob-ozel { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.ob-kutu {
  font-size: 12px;
  background: #fffdf6;
  border-left: 3px solid var(--altin);
  border-radius: 0 5px 5px 0;
  padding: 4px 8px;
  line-height: 1.35;
}
.ob-kutu b { display: block; color: #5c1020; font-size: 11.5px; }

/* ---------- Duygu emojileri — DUYGU-VE-SEKME-SARTNAME.md §A ---------- */
/* Ekran okuyucuya görünmez ama DOM'da var — glif `aria-hidden`, anlam bu
   sınıfla taşınıyor (§A⑤⑤). Standart "sr-only" deseni: 1x1'e küçültülür,
   düzen akışından tamamen çıkarılır ama okunabilirliği kaybetmez. */
.gorunmez-metin {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.o-duygu { margin-left: 5px; font-size: 12px; cursor: default; }
.ob-duygu { font-size: 12px; }
/* §A⑤① — "ayar kapalıyken hiçbir emoji görünmüyor": tek class geçişiyle
   1.107 satır bir kerede gizlenir, DOM yeniden kurulmaz. */
.duygu-kapali .o-duygu, .duygu-kapali .ob-duygu { display: none; }

/* ---------- Kartvizit — PADISAH-KARTVIZITI.md ----------
   🆕 PAKET-UI4 (14 Eylül 2026, 0050/H-0007): sekmeli #ob-kartvizit bölümü ve
   .kv-sekme-btn çubuğu KALDIRILDI. Künye · nasıl bilirdiniz · magazin artık
   ek okuma akordeonunun satır gövdeleri (.ek-ak-govde içinde); aşağıdaki
   içerik sınıfları orada kullanılıyor. */
.kv-kunye {
  font-size: 11.5px;
  color: #6b5a33;
  line-height: 1.5;
}
.kv-magazin {
  font-size: 12px;
  color: #4d3419;
  line-height: 1.4;
}
.kv-skandal {
  margin-top: 3px;
  font-size: 11.5px;
  font-style: italic;
  color: #6d0d1c;
}
.kv-nasil-bilirdiniz {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* p4/H-0011 sartname ⓪: tavan veri tarafinda zorlanir, arayuz KIRPMAZ —
     tasarsa kaydirilir. */
  max-height: 260px;
  overflow-y: auto;
}
.kv-satir { font-size: 12.5px; line-height: 1.45; }
.kv-satir:empty { display: none; }
.kv-ovgu { color: #1a6b33; }
.kv-yergi { color: #8c3444; }
.kv-tartisma { color: #6b4a1f; }
.kv-tarihciler { color: #2b2313; }
/* "Boş alan yok, niçin boş var" — icerik henuz yazilmadiginda tek satirlik
   acikca isaretli uyari, sessiz bosluk degil. */
.kv-nasil-bilirdiniz.kv-eksik .kv-ovgu {
  color: #8a6d2f;
  font-style: italic;
}
.ob-kaynak {
  font-size: 12px;
  color: #1257a8;
  text-decoration: none;
  border-bottom: 1px dotted #1257a8;
  align-self: flex-start;
}

/* 🆕 13 Eylül 2026 — paket 0046 ③, data/gorsel_madde.js (js/app.js
   maddeGorseliniGuncelle). "küçük" olması KASITLI (koordinatörün kararı):
   bu bir galeri değil, metnin YANINDA duran bir kanıt parçası. */
#ob-madde-gorsel {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#ob-madde-gorsel:empty { display: none; }
.ob-madde-gorsel-kart {
  margin: 0;
  width: 130px;
}
.ob-madde-gorsel-kart img {
  /* 16 Eylül 2026 — H-0122 (Emre): "Merzifonlu'nun resmi kadraja tam
     sığmamış." Sebep: gerçek tuval 75x49 cm (~1,53:1), kutu 130x92px
     (~1,41:1) — `cover` fazla geniş kısmı KIRPIYORDU. `contain`e
     çevrildi: her görsel TAMAMEN görünür (arka plan zemini dolduruyor),
     hiçbir eser kırpılmaz — "gerekirse ince uzun format" istegi budur. */
  width: 130px;
  height: 92px;
  object-fit: contain;
  border: 1px solid rgba(74, 59, 30, 0.35);
  border-radius: 4px;
  display: block;
  background: #e8e2d0;
}
.ob-madde-gorsel-kart figcaption {
  font-size: 10px;
  line-height: 1.3;
  color: #6b5a33;
  margin-top: 2px;
}
.ob-madde-gorsel-kaynak {
  color: #1257a8;
  text-decoration: none;
  border-bottom: 1px dotted #1257a8;
}
span.ob-madde-gorsel-kaynak { color: #6b5a33; border-bottom: none; font-style: italic; }

/* ---------- Sefer okları ---------- */
/* Sefer okunun adı. Ok başının hemen altında durur; ok döndürüldüğü için
   yazı ayrı bir işarettedir, yoksa o da dönerdi. */
.sefer-ad {
  font: 600 10px/1.2 system-ui, sans-serif;
  color: #7a2e14;
  text-shadow: 0 0 4px #fff, 0 0 2px #fff, 0 1px 2px #fff;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 6px;
}
.sefer-ok {
  font-size: 20px;
  line-height: 1;
  color: #2b1006;
  text-shadow: 0 0 3px #f7f1e3, 0 0 4px #f7f1e3;
  pointer-events: none;
}

/* ⚠️ HAREKET TİPOLOJİSİ — kullanıcı kararı: "sefer, geri çekilme, tahliye,
   kuşatma, bozgun, muharebe... farklı emojiler üretebiliriz ... aynı tarzda
   olmasın farklılıkları olsun. kazançlı sefer ile bozgun sonuçlu seferin ayrı
   gösterimleri olsun."
   İki eksen ayrı çözülüyor:
     HAREKETİN CİNSİ  → glif + boyut + çizgi deseni   (js/app.js HAREKET tablosu)
     HAREKETİN SONUCU → rozet (▲ zafer / ▼ yenilgi)   (js/app.js SONUC_ROZET)
   Böylece "kazançlı sefer" ile "bozgunla biten sefer" aynı glifi taşır ama
   farklı okunur; "geri çekilme" ile "taarruz" glif düzeyinde ayrılır. */

/* Geri çekilme ve tahliye: ok ince ve soluk — ilerleyişin görsel ağırlığını
   taşımamalı, yoksa bozgun zafer gibi okunuyor. */
.sefer-ok.tur-cekilme,
.sefer-ok.tur-tahliye { font-size: 17px; opacity: 0.85; }

/* Akın: küçük ve hafif, çünkü kalıcı işgal değil geçici baskın. */
.sefer-ok.tur-akin { font-size: 15px; opacity: 0.9; }

/* Kuşatma: ok değil hedef işareti — yön değil YER bildiriyor, o yüzden
   js tarafında dönüş uygulansa da simetrik glif seçildi (⊗). */
.sefer-ok.tur-kusatma { font-size: 18px; }

/* Deniz harekâtı: çapa, kara seferinden ilk bakışta ayrılsın. */
.sefer-ok.tur-deniz { font-size: 17px; }

/* Teslim / devir: askerî değil idarî hareket — nötr kahve, ok inceltilmiş. */
.sefer-ok.tur-teslim { font-size: 17px; opacity: 0.9; }

/* Seyahat: en hafif gösterim. Abdülaziz'in Avrupa seyahati ile Niğbolu seferi
   aynı ağırlıkta görünmemeli. */
.sefer-ok.tur-seyahat { font-size: 14px; opacity: 0.8; }

/* İsyan: yön yok, yerinde patlama. */
.sefer-ok.tur-isyan { font-size: 18px; }

/* ARAYÜZ, 27 Ağustos 2026 — p0019/H-0041·H-0062: PLANLANAN ↔ YÜRÜNEN hâl
   ekseni. Renk (js/app.js) zaten sarı/turuncuya dönüyor; burada yalnız
   hafif saydamlık eklendi — "henüz olmadı" hissini pekiştirir, rengin
   üstüne binmez. `hal:"planlanan"` yazılmayan hiçbir kayıt etkilenmez. */
.sefer-ok.hal-planlanan { opacity: 0.72; }

/* Sonuç rozeti — ok başının altına, DÖNMEDEN. Döndürülse ▲/▼ anlamını
   kaybederdi, o yüzden js'te ayrı bir kutu olarak konuyor. */
.sefer-rozet {
  font: 700 11px/1 system-ui, sans-serif;
  text-align: center;
  margin-top: 1px;
  text-shadow: 0 0 3px #f7f1e3, 0 0 4px #f7f1e3;
  pointer-events: none;
}
.sefer-rozet.rozet-zafer   { color: #1a6b33; }
.sefer-rozet.rozet-yenilgi { color: #9c1f14; }

/* oto-zoom düğmesi — 21 Eylül 2026'da zaman barından BUTONLAR alanına taşındı
   (DALGA-0074/H-0001); asıl görünüm kuralı artık `#menu-butonlar` bloğunda.
   Buradaki satır yalnız PASİF hâli taşır: düğme bir DURUM gösterir. */
#btn-zoom.pasif { opacity: 0.45; }

/* ---------- EK OKUMA / MERAK — buton şeridi ve pencere ---------- */
/* EK-OKUMA.md + MERAK.md: "buton yalnız kart VARSA çıkar." Şerit boşsa
   `:empty` ile hiç yer kaplamıyor — olmayan bir içeriği vaat etmesin. */
#ob-ekokuma-butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d8c9a3;
}
#ob-ekokuma-butonlar:empty { display: none; border: none; padding: 0; margin: 0; }
.ob-ek-btn {
  background: var(--panel-koyu);
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
  color: var(--metin);
}
.ob-ek-btn:hover { background: #ffe9a8; }

/* 🆕 PAKET-UI2 (13 Eylül 2026) — 0035/H-0030, Emre'nin kararı: ek okumalar madde
   kutusunda AKORDEON. Ana açıklama (#ob-detay) ilk satır; bir ek okuma açılınca
   açıklama iki satıra KÜÇÜLÜR, öteki ek okumalar kapanır. (js/app.js ekAkordeonKur) */
#ob-ekokuma-butonlar.ek-akordeon { display: block; }
.ek-ak-baslik {
  display: flex; gap: 6px; align-items: center;
  width: 100%; text-align: left;
  background: var(--panel-koyu);
  border: 1px solid var(--altin);
  border-radius: 6px;
  /* 🆕 EKO-UI-0073 — kategori yazısının yeri düşey iç boşluktan alındı
     (4px → 2px) ve ana açıklama satırı `min-height` ile aynı boyda tutuldu;
     yoksa kolonlu satırlar onun yanında uzun kalırdı. */
  padding: 2px 9px; margin-top: 5px; min-height: 22px;
  font-size: 12px; line-height: 1.25; cursor: pointer; color: var(--metin);
}
.ek-ak-baslik:hover { background: #ffe9a8; }
.ek-ak-baslik::before { content: "▸"; color: #8a6d2f; flex: none; }
.ek-ak-baslik[aria-expanded="true"]::before { content: "▾"; }
.ek-ak-etiket { flex: none; font-weight: 600; }
.ek-ak-ipucu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b5a33; }
/* 🆕 EKOKUMA-SIMGE-0070 (20 Eylül 2026) — 0070/H-0001, Emre: satır başında
   yalnız SİMGE dursun, yazı alanı maddenin BAŞLIĞINA kalsın; simgenin üstüne
   gelince kategori adı ("teknik bilimsel ek okuma") görünsün. Kategori adı
   `data-ipucu`da (js/app.js ekAkordeonKur); aynı metin `title`da da duruyor —
   CSS ipucu ANINDA çıkar, `title` yavaş ve yedek (dokunmatikte/odakta). */
/* 🆕 EKO-UI-0073 (20 Eylül 2026) — 0073/H-0002, Emre: satır başlığının SOL ÜST
   köşesine, SİMGENİN ÜSTÜNE, küçük puntoyla ama BÜYÜK harfle kategori.
   Kısıtlar Emre'nin: ① okunabilsin ② ikinci bir SATIR gibi görünmesin
   ③ satır yüksekliğini fazla büyütmesin. ⇒ İki kat TEK kolonda duruyor
   (satır değil sütun), kolon `.ek-ak-baslik`in tek bir esnek çocuğu; büyümenin
   karşılığı yukarıdaki `padding` 4px→2px ve aşağıdaki simge 14px→12px.
   Kolon SABİT genişlikte: satırlar arasında madde başlıkları hizalı kalsın. */
.ek-ak-kol {
  flex: none; display: flex; flex-direction: column; align-items: center;
  width: var(--ek-ust-genislik, 60px);
}
.ek-ak-ustyazi {
  font-size: 7px; line-height: 1; font-weight: 700; letter-spacing: 0.02em;
  color: #8a6d2f; white-space: nowrap; margin-bottom: 1px;
}
/* 11 karakteri aşan etiket 7px'te 60px'lik kolona sığmıyor (js/app.js
   `_ekKategoriUstYazi`, `.uzun` sınıfı) — tek kademe küçülür, KIRPILMAZ. */
.ek-ak-ustyazi.uzun { font-size: 6px; letter-spacing: 0; }
.ek-ak-simge { flex: none; font-size: 12px; line-height: 1; position: relative; cursor: help; }
.ek-ak-simge::after {
  content: attr(data-ipucu);
  position: absolute; left: -4px; bottom: calc(100% + 5px); z-index: 30;
  background: #2b2317; color: #f6ecd2;
  border-radius: 4px; padding: 3px 7px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease 0.05s, visibility 0s linear 0.17s;
  pointer-events: none;                 /* ipucu kendi üstüne gelen fareyi yutmasın */
}
.ek-ak-simge:hover::after, .ek-ak-baslik:focus-visible .ek-ak-simge::after {
  opacity: 1; visibility: visible; transition-delay: 0.05s, 0s;
}
.ek-ak-satir.acik > .ek-ak-baslik,
#ob-detay-baslik.acik { background: #ffe9a8; }
.ek-ak-satir.acik > .ek-ak-baslik { border-radius: 6px 6px 0 0; }
.ek-ak-govde {
  border: 1px solid var(--altin); border-top: none; border-radius: 0 0 6px 6px;
  padding: 6px 9px; max-height: 46vh; overflow-y: auto;
  font-size: 12.5px; line-height: 1.45;
}
.ek-ak-govde .ek-kart { margin-bottom: 0; border: none; padding: 2px 0; background: none; }
/* PAKET-UI4 — kartvizit satırları: gövdenin kendi kaydırması (46vh) yeter, iç kutu kaydırması yok */
.ek-ak-govde .kv-nasil-bilirdiniz { max-height: none; overflow: visible; }
.ek-ak-govde .kv-kunye > div { margin: 1px 0; }
#ob-detay-baslik { margin-top: 7px; }
#ob-detay-baslik + #ob-detay { margin-top: 4px; }
#ob-detay.ek-ak-kucuk {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; opacity: 0.72; cursor: pointer;
}

/* 🆕 PAKET-UI2 — antlaşma öncesi/sonrası kutusu (js/app.js antlasmaFarkiGoster) */
.ob-antlasma .ant-dugmeler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ob-antlasma button {
  font-size: 11.5px; padding: 2px 8px; cursor: pointer;
  border: 1px solid var(--altin); border-radius: 5px;
  background: var(--panel-koyu); color: var(--metin);
}
.ob-antlasma button:hover { background: #ffe9a8; }
.ob-antlasma button.secili { background: #ffe9a8; font-weight: 600; }
/* 🆕 PAKET-UI3 — İŞ 1: bağ bulunamadı notu (düğme yok, soluk) · İŞ 2: istisna maddesi */
.ob-madde-fark-yok { opacity: 0.8; font-style: italic; }
.olay.dis-istisna .o-tarih::after { content: " ⚑"; color: var(--altin); font-style: normal; }

/* ARAYÜZ 4 ② — üç ayar penceresi, `#ekokuma-pencere` ile AYNI modal deseni. */
#ayarlar-pencere {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
#ayarlar-pencere.gizli { display: none; }
/* 🔴 21 Ağustos — Emre: "ayarlar penceresi DİKEY OLARAK SIĞMIYOR." Desen
   `#ekokuma-kutu`den (satır ~1372) BİREBİR alındı: dış kutu `max-height` +
   `flex-direction:column`, başlık/kapat SABİT kalır, yalnız `#ayarlar-govde`
   kayar. Aynı deseni ikinci kez yazmak yerine kopyalamak bilinçli — iki ayrı
   modalın AYNI davranması gerekiyordu ve zaten kanıtlanmış bir çözümdü. */
#ayarlar-kutu {
  background: var(--panel); border: 2px solid var(--altin); border-radius: 10px;
  width: min(420px, 92vw); max-height: 80vh;
  display: flex; flex-direction: column;
  padding: 16px 20px; position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#ayarlar-kutu h3 { margin-bottom: 12px; flex: 0 0 auto; }
#ayarlar-govde { overflow-y: auto; min-height: 0; padding-right: 4px; }
#ayarlar-kapat {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 18px; cursor: pointer; color: #6b5a33;
}
/* `<details>` grupları — Emre'nin kendi ①②③④ tarifi doğal gruplamaydı. */
.ayar-grup {
  border: 1px solid #d8c9a3; border-radius: 6px;
  margin-bottom: 10px; padding: 8px 10px;
}
.ayar-grup > summary {
  cursor: pointer; font-size: 13px; font-weight: bold; color: #5c1020;
  list-style: none;                       /* ok işareti kendimiz çiziyoruz */
}
.ayar-grup > summary::-webkit-details-marker { display: none; }
.ayar-grup > summary::before { content: "▸ "; }
.ayar-grup[open] > summary::before { content: "▾ "; }
.ayar-grup[open] > summary { margin-bottom: 8px; }
.ayar-grup .ayar-satir:last-child { margin-bottom: 2px; }
.ayar-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ayar-satir label { flex: 1 1 100%; font-size: 12.5px; }
.ayar-ipucu { font-size: 11px; color: #8a6d2f; font-weight: normal; }
.ayar-satir input[type="range"] { flex: 1 1 auto; }
.ayar-deger { font-size: 12px; color: #6b4a1f; min-width: 2.5em; text-align: right; }
/* 🔴 22 Ağustos 2026 — uçuş akıcılık ölçümü. Konsolda duruyordu ve Emre
   *"hangi satırı yapıştıracağım, o sembol nedir?"* diye sordu. Ölçüm, onu
   okuyacak kişinin BAKTIĞI yerde durmalı. Tek satır, sabit genişlikli —
   sayılar hizalı okunsun. */
.ayar-olcum { font-size: 12px; font-family: Consolas, "Courier New", monospace;
  color: #6b4a1f; background: #fdf8ec; border: 1px solid #e0cfa8;
  border-radius: 4px; padding: 4px 7px; margin-top: 2px; width: 100%;
  box-sizing: border-box;
  /* Ölçüm iki satır olabiliyor (ikincisi "SUÇLU: …"). `pre-line` satır
     sonunu korur ama uzun satırı da sarar — `nowrap` olsaydı suçlunun adı
     kutunun dışında kalır, yani ölçüm yine görünmezdi. */
  white-space: pre-line; line-height: 1.5; }
/* 🔴🔴 UÇUŞ SIRASINDA DOM İŞARETLERİ GİZLENİR — ölçülmüş bir darboğaz.
   Emre'nin ekranından, beş turluk ölçüm dizisi:
       7/220 kare · 1132 ms   →   13/349 kare · 799 ms · TOPLAM 4961 ms
   ~5,8 saniyelik uçuşta 4961 ms uzun görev = iş parçacığı sürenin %85'inde
   meşgul. TEK BLOK DEĞİL, SÜREKLİ YÜK — ve bu, işaretlerin imzasıdır.

   SAYILDI (haritayı çalıştırmadan, veriden):
       boslukKur         226 KALICI işaret (bir kez kurulur, hiç kaldırılmaz)
       bölge etiketi      71   ·   koridor 65+64   ·   devlet etiketi ~50-100
       savaş işareti     171'e kadar          ⇒ ~500+ DOM düğümü
   MapLibre HER `Marker`ı HER `move` olayında yeniden konumlandırır: uçuşta
   kare başına 500 transform yazması, her biri stil yeniden hesabı tetikler.

   ⇒ `display: none` bütün alt ağacı yerleşim/boyama dışına çıkarır. JS
   tarafındaki transform yazması sürüyor (onu ancak işaretleri haritadan
   ÇIKARARAK durdururuz, o da 500 remove + 500 add demek) ama PAHALI kısım
   — yeniden hesap, yerleşim, boyama, katman birleştirme — tamamen düşer.
   ⚠️ Tek sınıf değişimi; işaret başına iş YOK.
   ⚠️ VE GÖRSEL OLARAK SINANMADI: bu ortamda tarayıcı paneli gizli,
   MapLibre hiç başlamıyor. Ölçüm Emre'nin ekranında yapılacak. */
.harita-ucusta .maplibregl-marker { display: none !important; }

.ayar-olcum.olcum-iyi  { color: #1c6b2e; border-color: #9ccfa8; background: #f2fbf4; }
.ayar-olcum.olcum-kotu { color: #9a2b1e; border-color: #e2a79c; background: #fdf3f1; }
.ayar-not { font-size: 11px; color: #8c3444; line-height: 1.4; margin-top: 4px; }
/* DUYGU-VE-SEKME-SARTNAME.md §A — anahtar tipi ayar satırı: etiket sola,
   checkbox sağa (sürgü satırlarından farklı, tek satırlık anahtar). */
.ayar-satir-anahtar { justify-content: space-between; flex-wrap: nowrap; }
.ayar-satir-anahtar label { flex: 1 1 auto; }
.ayar-satir-anahtar input[type="checkbox"] { flex: 0 0 auto; }
/* `.ayar-altbaslik` (21 Ağustos öncesi h3 alt-başlığı) KALDIRILDI — yerini
   `.ayar-grup > summary` aldı, artık HTML'de kullanılmıyordu. */

#ekokuma-pencere {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
#ekokuma-pencere.gizli { display: none; }
#ekokuma-kutu {
  background: var(--panel); border: 2px solid var(--altin); border-radius: 10px;
  width: min(640px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column; padding: 16px 20px; position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#ekokuma-baslik { margin-bottom: 10px; padding-right: 24px; }
#ekokuma-kapat {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 18px; cursor: pointer; color: #6b5a33;
}
#ekokuma-icerik { overflow-y: auto; min-height: 0; font-size: 13px; line-height: 1.5; }

/* 🆕 16 Eylül 2026 — H-0128: padişah portre albümü, `#ekokuma-pencere` ile
   BİREBİR aynı desen. */
#portre-albumu-pencere {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
#portre-albumu-pencere.gizli { display: none; }
#portre-albumu-kutu {
  background: var(--panel); border: 2px solid var(--altin); border-radius: 10px;
  width: min(640px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column; padding: 16px 20px; position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#portre-albumu-baslik { margin-bottom: 10px; padding-right: 24px; }
#portre-albumu-kapat {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 18px; cursor: pointer; color: #6b5a33;
}
#portre-albumu-icerik {
  overflow-y: auto; min-height: 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.portre-albumu-kart { text-align: center; max-width: 260px; }
.portre-albumu-kart img { max-width: 100%; max-height: 50vh; border-radius: 6px;
  border: 1px solid rgba(74,59,30,0.35); }
.portre-albumu-kart figcaption { font-size: 11.5px; color: #6b5a33; margin-top: 4px; }

/* 🆕 UI-ETKILESIM (DALGA-0063 madde ⑦) — maddedeki resme tıklayınca büyüsün.
   `#portre-albumu-pencere` ile AYNI overlay deseni, yalnız TEK görsel ve
   "makul boyut": ekranı KAPLAMAZ (max 90vh/92vw), kaynak/lisans altyazısı
   görünür kalır — kullanıcı hangi görseli büyüttüğünü kaybetmesin. */
#resim-buyut-pencere {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center; z-index: 70;
  cursor: zoom-out;
}
#resim-buyut-pencere.gizli { display: none; }
#resim-buyut-kutu {
  position: relative; max-width: 92vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; cursor: default;
}
#resim-buyut-img {
  max-width: 92vw; max-height: 80vh; border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6); object-fit: contain;
}
#resim-buyut-altyazi {
  color: #f0e6cf; font-size: 12.5px; margin-top: 8px; text-align: center;
  max-width: 80vw;
}
#resim-buyut-kapat {
  position: absolute; top: -36px; right: -4px; border: none; background: none;
  font-size: 22px; cursor: pointer; color: #f0e6cf;
}
/* Tek görsel bugünkü kural (assets/portreler/ tek dosya taşıyor) — albüm
   YARINKİ çokluğa hazır yapı, bugünün eksikliği bir kusur değil. */
#padisah-portre { cursor: pointer; }

/* 🆕 16 Eylül 2026 — H-0129: mesafe ölç cetveli (js/app.js, harita "load"
   bloğunun sonu). `#olcum-etiket` haritanın piksel koordinatına elle
   yerleştirilir (`harita.project`) — MapLibre popup'ı DEĞİL, çünkü popup
   kapanış/ok gibi fazladan gövde taşır ve burada istenmiyor. */
#olcum-etiket {
  position: absolute; transform: translate(-50%, -130%);
  background: rgba(30, 22, 10, 0.88); color: #ffd700;
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none; white-space: nowrap; z-index: 5;
}
#olcum-etiket button {
  pointer-events: auto; background: none; border: none; color: #ffd700;
  font-size: 11px; cursor: pointer; padding: 0; line-height: 1; opacity: 0.75;
}
#olcum-etiket button:hover { opacity: 1; }
#olcum-durum {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(30, 22, 10, 0.88); color: #ffd700;
  font-size: 12.5px; padding: 5px 12px; border-radius: 14px;
  pointer-events: none; white-space: nowrap; z-index: 5;
}

.ek-kart {
  border: 1px solid #d8c9a3;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--panel-koyu);
}
.ek-kart:last-child { margin-bottom: 0; }
.ek-kart h4 { font-size: 13.5px; color: #6b4a1f; margin-bottom: 6px; }
/* 🆕 UI-HARITA (DALGA-0064 H-0004) — kartvizit satırları (künye/nasıl
   bilirdiniz/magazin) `.ek-kart` sınıfını taşımıyor, ama açılan gövdede AYNI
   başlık görünümü gerekiyor: kişinin adı artık içeriğin TEPESİNDE de yazılı. */
.kv-kunye h4, .kv-nasil-bilirdiniz h4, .kv-magazin h4 { font-size: 13.5px; color: #6b4a1f; margin-bottom: 6px; }
.ek-kart p { margin-bottom: 9px; }
.ek-kart .ek-alt { font-size: 11.5px; color: #8a6d2f; }
/* kesinlik rozeti — HER kartta görünür, "rivayet" en güçlü ayrım (kullanıcı:
   "metinde yazmak yetmez; okuyan hızlı geçerken rozeti görür, cümleyi görmez") */
.ek-kesinlik {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ek-kesinlik.kesin      { background: #dcecdd; color: #1a6b33; }
.ek-kesinlik.tartismali { background: #fde8c8; color: #8a5a10; }
.ek-kesinlik.iddia      { background: #f3d9d9; color: #8c3444; }
/* rivayet: farklı ZEMİN de değişiyor, yalnız rozet değil — spesifikasyon şartı */
.ek-kart.rivayet { background: #f2e6f5; border-color: #9c6bb0; }
.ek-kesinlik.rivayet    { background: #9c6bb0; color: #fff; }
.ek-goruş { border-left: 3px solid var(--altin); padding-left: 8px; margin-bottom: 8px; }
.ek-goruş b { display: block; font-size: 12.5px; color: #4d3419; }
.ek-zincir-link {
  display: inline-block; font-size: 11.5px; color: #6b4a1f;
  text-decoration: underline; cursor: pointer; margin-right: 8px;
}

/* ---------- Dizin penceresi ---------- */
/* p2/H-0010: Hakkında penceresi (proje künyesi + BEKLEYENLER tablosu) ve
   düğmesi TAMAMEN kaldırıldı — kullanıcı: "Hakkında butonuna artık gerek
   yok." Stilleri de (.hk-*) bu yüzden burada değil. */
#dizin {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
#dizin.gizli { display: none; }
#dizin-kutu {
  background: var(--panel);
  border: 2px solid var(--altin);
  border-radius: 10px;
  width: min(760px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#dizin-kutu h3 { margin-bottom: 10px; }
#dizin-kapat {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #6b5a33;
}
#dizin-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#dizin-sekmeler button {
  background: #fffdf6;
  border: 1px solid #d8c9a3;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}
#dizin-sekmeler button.aktif {
  background: var(--osmanli-kirmizi);
  color: white;
  border-color: var(--osmanli-kirmizi);
}
#dizin-icerik { overflow-y: auto; min-height: 0; }
.dz-grup {
  font-weight: bold;
  font-size: 13px;
  color: #5c1020;
  background: var(--panel-koyu);
  padding: 5px 8px;
  border-radius: 5px;
  margin: 8px 0 4px;
}
.dz-satir {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 10px;
  padding: 4px 8px;
  font-size: 13px;
  border-bottom: 1px dotted #e2d6b5;
}
.dz-satir .dz-sol { color: #8a6d2f; white-space: nowrap; }
.dz-satir .dz-sag { color: #6b5a33; font-size: 12px; text-align: right; max-width: 260px; }
.dz-satir.tikla { cursor: pointer; }
.dz-satir.tikla:hover { background: #fdf3d7; }
/* Yerleşim Kronolojileri sekmesinin arama kutusu — 2293 kayıt var, arama
   olmadan sekme kullanılamaz. `dz-satir` ızgarasının dışında durur. */
.dz-arama {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 9px;
  margin: 4px 0 6px;
  font-size: 13px;
  font-family: inherit;
  color: #5c1020;
  background: #fffdf5;
  border: 1px solid #d9c79a;
  border-radius: 5px;
}
.dz-arama:focus { outline: none; border-color: #8a6d2f; background: #fff; }

/* dar ekran */
@media (max-width: 900px) {
  #govde { flex-direction: column; }
  #yanpanel { flex: 0 0 40%; border-left: none; border-top: 2px solid var(--altin); }
}

/* Yabancı devlet adı etiketi (harita üzerinde, dönem gövdesinin ortasında) */
.devlet-etiket {
  /* font-size YOK: app.js gövde büyüklüğünden hesaplayıp inline veriyor. */
  font: 600 1em/1.15 system-ui, sans-serif;
  color: rgba(52, 38, 22, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Gölge em cinsinden: punto büyüyünce hâle de büyür, yoksa 26px yazının
     altında 4px'lik hâle ince kalıp zemine karışır. */
  text-shadow: 0 0 0.36em #fff, 0 0 0.18em #fff, 0 0.09em 0.18em #fff;
  white-space: nowrap;
  /* p5/H-0003 — "haritaya yay": etiket artık tıklanabilir, o yüzden
     pointer-events açık (eskiden none'du, salt görsel etiketti). */
  pointer-events: auto;
  cursor: pointer;
}
.devlet-etiket:hover { color: rgba(52, 38, 22, 1); text-decoration: underline; }

/* Yüzölçümü göstergesi — 7 Ağustos'ta lejanttan zaman çubuğuna, 21 Ağustos'ta
   haritanın sağ üst köşesine taşınmıştı. 13 Eylül 2026 — PAKET 0046/H-0005,
   Emre: "...bu sayfanın başlangıç çubuğuna/title'ına koyalım, harita
   üzerinde görünmesin." Üçüncü taşıma: `#harita-ust-sag`ten `<header>`e
   (`#ustbar-alan`, index.html). Koyu üst çubuğun zemini artık krem-rozet
   stiliyle ÇARPIŞIYOR — `#tepe-degisim`in ailesinden soluk-altın bir dipnot
   stiline geçildi (bu çubuktaki DİĞER ikincil bilgilerle AYNI dil). */
#ustbar-alan {
  flex: 0 0 auto;
  font-size: 12px;
  color: #ffd700;
  opacity: 0.85;
  white-space: nowrap;
  margin-left: 4px;
}
#ustbar-alan:empty { display: none; }
/* Dar ekranda çubuk kalabalıklaşmasın — yıl ve dönem etiketi önceliği alır. */
@media (max-width: 720px) { #ustbar-alan { display: none; } }

/* Konu süzgeci (PLAN-ETIKET §8) — kronoloji listesinin üstünde, KAPALI açılır.
   Varsayılan kapalı: süzgeç bir araç, atlasın kendisi değil; açık dursaydı
   listenin üstünden yedi satır yer alırdı. */
/* 🔴 18 Ağustos 2026 — SÜZGEÇ ARTIK BAŞLIĞIN İÇİNDE, kendi satırında değil.
   Emre: "konu süzgeci SATIRINI İPTAL edip süzgeci kronoloji yazısının
   YANINA koymalı." Kutu `#olay-akisi h2`nin orta çocuğu oldu; açılır gövde
   `position:absolute` çünkü akışta kalsaydı başlığı büyütür ve listeyi
   aşağı iterdi — yani iptal ettiğimiz satırı geri getirirdi. */
#konu-suzgec { position: relative; flex: 0 1 auto; min-width: 0; }
.suzgec-baslik {
  width: 100%; text-align: center; cursor: pointer;
  background: rgba(200,162,74,.14); border: 1px solid #d8c9a3;
  border-radius: 4px; padding: 3px 8px;
  font: 600 11px/1.2 system-ui, sans-serif; color: #4d3a20;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#konu-suzgec.acik .suzgec-baslik { background: rgba(200,162,74,.34); }
#konu-suzgec .suzgec-govde {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 40;
  min-width: 172px; background: var(--panel-koyu, #f7f1e3);
  border: 1px solid var(--altin); border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.suzgec-baslik:hover { background: rgba(200,162,74,.18); }
.suzgec-govde { display: none; padding: 2px 10px 8px; }
#konu-suzgec.acik .suzgec-govde { display: block; }
.suzgec-govde label {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; font-size: 12px; cursor: pointer;
}
/* Sayı sağa yaslı ve soluk: bilgi ama karar değil. */
.suzgec-govde label i { margin-left: auto; font-style: normal; opacity: .55; font-size: 11px; }
/* 13 Eylül 2026 — 0042/H-0003: konu kutucuklarından AYRI bir eksen (VE bağlı),
   o yüzden çizgiyle ayrılıyor. */
.suzgec-govde label.suzgec-toprak { margin-top: 4px; padding-top: 5px; border-top: 1px solid #d8c9a3; font-weight: 600; }
/* 13 Eylül 2026 — PAKET-ETIKET-UYGULA: Emre'nin 26 konu başlığı + afet alt türleri.
   Gövde 7+1'den ~40 satıra çıktı → yükseklik sınırı ve kendi kaydırması. */
#konu-suzgec .suzgec-govde { max-height: 70vh; overflow-y: auto; min-width: 250px; }
.suzgec-alt-baslik {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding-top: 5px; border-top: 1px solid #d8c9a3;
  font: 600 11px/1.2 system-ui, sans-serif; color: #4d3a20; text-transform: uppercase; letter-spacing: .03em;
}
.suzgec-temizle {
  margin-left: auto; cursor: pointer; font: 11px system-ui, sans-serif; text-transform: none;
  background: none; border: 1px solid #d8c9a3; border-radius: 3px; padding: 0 5px; color: #4d3a20;
}
.suzgec-govde label.suzgec-afet { font-weight: 600; }
.suzgec-govde label.suzgec-afet-alt { padding-left: 16px; font-size: 11px; }
.suzgec-govde label.suzgec-sifir { opacity: .45; }

/* Süzülen kronoloji satırı GİZLENİR, silinmez — indeksler korunuyor. */
.olay.suzuldu { display: none; }

/* Bölge (eyalet) adı — md.21'in ikinci yarısı.
   İKİNCİ KADEME olduğu ayrı bir eksende anlatılıyor: punto değil BİÇİM.
   Sebep ölçülmüş bir çakışmadan geliyor — bölge bandı 8-14, devlet bandı
   10-26; yani büyük bir eyalet (Hartum 14) küçük bir devletten (Ragusa 10)
   daha iri yazılabiliyor. Kademeyi punto ile anlatmaya çalışsaydık ya
   bölgeleri okunmaz derecede küçültmek ya da alanı sürücü olmaktan çıkarmak
   gerekirdi; ikisi de §33'ün dersine aykırı. Bunun yerine ayrım RENK ve
   BÜYÜK/KÜÇÜK HARF'te: devlet adı büyük harf ve koyu, bölge adı normal yazım
   ve bölge sınırının kendi kahvesi (#5a3a24). */
/* Harekât lejantı (md.4.3) — dokuz ok tipinin açıklaması.
   Yalnız o anda sahnede olan türler listelendiği için kutu çoğu tarihte
   iki-üç satır; ana lejanta dokuz satır eklemek yerine bu seçildi. */
.sefer-lejant .sefer-orn {
  width: 22px; height: 0;
  border-top: 2px solid transparent;   /* yükseklik sabit kalsın */
  align-self: center;
  border-radius: 0;
}
.sefer-lejant .sefer-glif {
  font-size: 13px;
  color: #2b1006;
  margin-right: 2px;
}
.sefer-lejant em { font-style: normal; opacity: 0.6; }
.sefer-lejant .sefer-sonuc {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(90, 58, 36, 0.25);
  /* Sonuç AYRI eksen: hareketin cinsi değil, nasıl bittiği. Ayırıcı çizgi
     bunu söylüyor — yoksa "▲ kazanç" onuncu bir ok tipi sanılır. */
}

.bolge-etiket {
  /* font-size YOK: app.js bölge alanından hesaplayıp inline veriyor. */
  font: 500 1em/1.15 system-ui, sans-serif;
  color: rgba(90, 58, 36, 0.82);
  letter-spacing: 0.04em;
  text-shadow: 0 0 0.34em #fff, 0 0 0.16em #fff, 0 0.08em 0.16em #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* TÂBİ DEVLET ADI (VASSAL-GORUNUM-0907, 7 Eylül 2026) — `d.vl` çapalarından.
   Renk tâbi dolgunun (#b2384a) KOYU akrabası: aynı aileden olduğu görünsün
   ("bu ad o kırmızı gövdenin adı") ama üstünde okunsun. Yabancı devlet
   etiketinin kahvesi (rgba(52,38,22,…)) bu zeminde yeterince ayrışmıyordu.
   Punto app.js'ten inline geliyor ve SABİT (VASSAL_PUNTO) — gerekçesi orada
   yazılı: çapa alan taşımıyor, uydurulmuş bir alandan punto türetilmedi. */
.vassal-etiket {
  font: 600 1em/1.15 system-ui, sans-serif;
  color: rgba(94, 20, 34, 0.92);
  letter-spacing: 0.05em;
  text-shadow: 0 0 0.36em #fff, 0 0 0.18em #fff, 0 0.09em 0.18em #fff;
  white-space: nowrap;
  /* Haritanın sürüklenmesini engellemesin. `title` de bu yüzden YAZILMIYOR —
     ipucu göstermeyecek bir öznitelik ölü bir vaattir (app.js'te not düşüldü). */
  pointer-events: none;
}
/* Statü eki: adın kendisinden SÖNÜK ve KÜÇÜK. Ayrım görsel değil ANLAMSAL —
   "Eflak Voyvodalığı" bir addır, "tâbi" onun HÂLİDİR; ikisi aynı ağırlıkta
   yazılsa ad ile sıfat karışırdı. */
.vassal-etiket .vs {
  font-weight: 400;
  font-size: 0.82em;
  opacity: 0.72;
  letter-spacing: 0.02em;
}
/* 🔴 SÖZLÜKTE OLMAYAN STATÜ — ham değer ekranda, ve GÖRÜNÜR biçimde.
   Bugün veride tek değer var (`vassal`); `girdi.py:940` beş terim daha
   planlıyor (özerk · himaye · haraçgüzâr · ocaklık · voyvodalık) ve yazımları
   tutmayabilir. O gün bu kural, terimi sessizce "tâbi"ye düşürmek yerine
   noktalı bir çizgiyle işaretler: harita YANLIŞ DEĞİL EKSİK olduğunu söyler.
   Kırmızı bir uyarı DEĞİL — bilinmeyen bir statü bir hata değil, sözlüğün
   henüz yetişmediği yeni bir kayıttır. */
.vassal-etiket-bilinmeyen .vs {
  border-bottom: 1px dotted currentColor;
  opacity: 0.9;
}

/* ARAYÜZ BOŞLUK CİNSİ (T-0113) — data/bos_alanlar.js'teki `kabile` ve
   `veri-yok` kayıtları. Renk ölçütü: mevcut hiçbir gövde/simge rengiyle
   çakışmasın (Osmanlı #8e0b22 · tâbi #b2384a · kuşatma sarısı #b8860b) ve
   çölün beyazından ayırt edilsin. #9d6e2c seçildi — toprak/deri tonu,
   "devlet değil ama sahipsiz de değil" hissini taşıyor. */
.bosluk-benek {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  /* KENAR YOK (③① — aşiret sahasının sınırı yoktur): gradyan sıfıra sönüyor,
     blur onu bir kez daha yumuşatıyor. Keskin bir çember çizmek olmayan bir
     kesinlik uydururdu. */
  background: radial-gradient(circle,
    rgba(157, 110, 44, 0.55) 0%,
    rgba(157, 110, 44, 0.34) 45%,
    rgba(157, 110, 44, 0.12) 72%,
    rgba(157, 110, 44, 0) 100%);
  filter: blur(2px);
  transition: filter 0.15s ease;
}
.bosluk-benek:hover { filter: blur(0.5px); }

/* 🔴 ÜÇÜNCÜ GLİF — 20 Ağustos 2026, Emre: *"yerli aşiretler filan ya da
   DEVLETSİZ ŞEHİRLER var ise bunları haritada göstermek lâzım … onların
   hakkını SAKLI TUTALIM o topraklarda."*
   `devletsiz-yerlesim` cinsi: yerleşimi olan ama merkezî devlete bağlı
   olmayan 92 yer (Riyad · Hâil · Manama · Doha · Abu Dabi · Mukalla ·
   Vladivostok · Taos Pueblo…).
   BİÇİM KASITLI — üç glif üç ayrı şey söylüyor ve karışmamalı:
     benek  yumuşak gradyan, KENARSIZ  → aşiret sahası, sınırı geçirgen
     soru   kesikli çember, gri        → kaynak susuyor, BİLMİYORUZ
     halka  KESKİN ama İÇİ BOŞ çember  → yerleşim KESİN var, ama toprağı
                                          bir devlete ait DEĞİL
   İçinin boş olması anlamlı: nokta kesin, sahiplik yok. */
/* 🔴 ODAK PARLAMASI — Emre, 20 Ağustos 2026: *"eğer ekran içinde ise …
   bir şey yapmasına gerek yok, sadece … sembol işaret yanma sönme hareketi
   yapsın, İKİ KEZ YETER."*
   Kamera oynamadığında kullanıcının "bir şey oldu mu" sorusunun cevabı bu.
   ⚠️ `iteration-count: 2` — süre TEK YERDE (burada). `js/app.js` işareti
   1250 ms sonra kaldırıyor; 2 × 550 ms = 1100 ms + pay. İki sayı iki
   yerde duruyor ama biri ÖTEKİNDEN BÜYÜK olmak zorunda, eşit değil —
   bu yüzden bayatlama riski yok, yorumda gerekçesi yazılı. */
/* 🔴 PANEL ÇARPMASI — Emre'nin hükmü, 24 Ağustos 2026 (0031/H-0006 ·
   H-0018 · H-0020 · 0030/H-0005 · 0032/H-0004 · 0034/H-0009).
   Emre'nin cevabı tek kelimeydi: *"2-panel"*.

   SORUN: bazı olayların haritada gösterilecek bir karşılığı YOKTUR —
   ne noktası vardır (Düzmece Mustafa ayaklanması), ne o gün toprak
   değiştirir. Harita haklı olarak sessiz kalır; ama kullanıcı o
   sessizliği *"madde atlandı"* diye okur. Emre birebir böyle yazdı:
   *"haritada yaprak kıpırdamıyor."*

   ⚠️ VE ÇARE HARİTADA ARANMADI — KASITLI. Olmayan bir yeri işaret
   etmek, hiç işaret etmemekten kötüdür: harita yalan söylemiş olurdu.
   ⇒ Sinyal PANELE kondu. Panel zaten *"şu an bu maddedesin"* diyen
     yerdir; adımın gerçekleştiğini söylemek onun işidir.

   BİÇİM — göz kırpmadan AYIRT EDİLEBİLİR olmalı:
     harita kırpması  toprağın ÖNCESİ/SONRASI — "NE oldu"
     yuvarlak işaret  olayın noktası          — "NEREDE oldu"
     panel çarpması   YENİ MADDE              — "ADIM ATILDI"     ← bu
   Üçü üç ayrı şey söylüyor, o yüzden üçü ayrı görünüyor: kırpma
   haritayı değiştirir, işaret altın bir halkadır, bu ise panelin kendi
   kenarında soldan sağa geçen bir vurgudur. */
@keyframes panelCarp {
  0%   { box-shadow: inset 3px 0 0 0 var(--altin), 0 0 0 0 rgba(255, 215, 0, 0); }
  35%  { box-shadow: inset 3px 0 0 0 var(--altin), 0 0 10px 2px rgba(255, 215, 0, 0.38); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 215, 0, 0), 0 0 0 0 rgba(255, 215, 0, 0); }
}
/* ⚠️ Tek çevrim: bu bir VURGU, bir alarm değil. Daha fazla çevrim
   göz kırpmayla karışırdı — o başka bir amaçla üç çevrim (`odakParla ... 3`). */
#olay-bilgi.carpti { animation: panelCarp 0.75s ease-out 1; }

@keyframes odakParla {
  0%   { transform: scale(0.55); opacity: 0.15; }
  45%  { transform: scale(1.35); opacity: 0.95; }
  100% { transform: scale(0.55); opacity: 0.15; }
}
.odak-parlama {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none;
  border: 3px solid var(--altin);
  box-shadow: 0 0 12px 3px rgba(255, 215, 0, 0.55);
  /* 🔴 13 Eylül 2026 — 2 → 3 ÇEVRİM. Önceki değer ("2 bilerek — daha fazla
     göz kırpmayla karışır") H-0018 ölçümünde KITA 12 tarafından bilinçli
     korunmuştu (D012: süzgeç neyi koruyor önce anlaşılsın). Emre paket
     0046 H-0006'da savaş yeri işareti için AÇIKÇA "3 kez yanıp sönmeli"
     dedi (koordinatör M-3xxx ile iletti); bu, göz-kırpma gerekçesini
     AŞAN daha güncel ve daha somut bir talep — hem savaş işaretine hem
     genel odak halkasına (aynı `.odak-parlama` sınıfı, D045: iki ayrı
     animasyon yazmak bir bilgiyi iki yerde tutar, §11) uygulandı.
     JS tarafı (app.js:8129 `isaretYanipSon`) süreyi AYNI ORANLA güncelledi. */
  animation: odakParla 0.55s ease-in-out 3;
}
/* 🆕 20 Eylül 2026 — DALGA-0070 H-0007 (ELE-GECIRME-ANIM-0070). Emre:
   *"olayın gerçekleştiği alan yanıp sönen emoji ile gösterilmeli."*
   Glif halkanın İÇİNDE durur: ayrı bir keyframe ve ayrı bir işaret
   AÇILMADI — halka zaten `odakParla` ile yanıp sönüyor, çocuk eleman
   onunla birlikte sönüyor (D045 · §11: tek animasyon, tek süre).
   ⚠️ `display:flex` + `height:100%` ŞART: `.odak-parlama` 34px'lik bir
   DAİRE ve içine yazı konması hesaba katılmamıştı; ortalamazsak emoji
   halkanın sol üstüne yapışır. Gölge, emoji koyu haritada da okunsun diye
   (halkanın kendi altın gölgesi arkada kalıyor). */
.odak-parlama .odak-glif {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Hareket istemeyene glif KAYBOLMAZ, yalnız hareketsiz durur —
     `.panel-sinyal`ın 20 satır yukarıdaki aynı kararı. */
  .odak-parlama { animation: none; opacity: 0.95; }
}

/* 🆕 KUTU-D-1014 — İTTİFAK ROZETİ (0023/H-0003). Emre: "fosforlu yeşil, parlak
   turuncu gibi vurgulu bir renk … bir seferlik". Kalkan biçimli rozet + ✠,
   `ittifakParla` ile N kez parlar (süre/adet app.js ITTIFAK_SAHNE'den CSS
   değişkeniyle gelir — sayı tek yerde), sonra `.sonuyor` ile söner. */
.ittifak-rozet {
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; cursor: default;
  animation: ittifakParla var(--ittifak-sure, 900ms) ease-in-out var(--ittifak-adet, 3);
  transition: opacity 0.6s ease;
}
.ittifak-rozet-glif {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 34px;
  clip-path: polygon(50% 100%, 0 68%, 0 0, 100% 0, 100% 68%);
  background: #ff7a00; color: #fffbe6;
  font-size: 19px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #ffd400 inset;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
}
.ittifak-rozet.hami .ittifak-rozet-glif { background: #c9a227; }
.ittifak-rozet-ad {
  margin-top: 2px; padding: 0 4px; border-radius: 3px;
  background: rgba(255, 122, 0, 0.92); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ittifak-rozet.sonuyor { opacity: 0; }
@keyframes ittifakParla {
  0%   { transform: scale(0.85); filter: drop-shadow(0 0 0 rgba(255, 122, 0, 0)); }
  45%  { transform: scale(1.25); filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.95)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 2px rgba(255, 122, 0, 0.5)); }
}
@media (prefers-reduced-motion: reduce) {
  .ittifak-rozet { animation: none; }
}
/* KUTU-D-1014 — D yaslaması sürerken (ölçüldü: 1923-09-01'de 47 sn) ham gövdenin
   geçici olduğunu söyleyen köşe göstergesi (js/d_katman.js _dYaslaGosterge). */
.d-yasla-gosterge {
  position: absolute; left: 10px; bottom: 64px; z-index: 5;
  padding: 3px 9px; border-radius: 12px;
  background: rgba(40, 20, 10, 0.78); color: #ffe9b0;
  font-size: 12px; pointer-events: auto;
}

/* 🔴 21 Ağustos — Emre: "devletsiz şehirlerin isimlerini de … yazalım."
   `.bosluk-kutu`, `.sehir`in flex desenini BİREBİR izliyor (nokta solda,
   ad sağında) — haritadaki her yerleşim etiketi tek bir görsel dilde
   okunsun diye. Tıklama artık KUTUDA (`pointer-events:auto` burada),
   halka yalnız görsel. */
.bosluk-kutu { display: flex; align-items: center; gap: 4px; cursor: pointer; pointer-events: auto; }
.bosluk-halka {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: transparent;
  border: 2px solid rgba(74, 59, 30, 0.78);
  box-shadow: 0 0 0 1.5px rgba(247, 241, 227, 0.6);
}
.bosluk-kutu:hover .bosluk-halka { border-color: var(--altin); }
/* `.sehir .s-ad` ile AYNI punto/gölge — tek fark italik: "hakkı saklı",
   sahiplenilmiş bir devlet şehri DEĞİL, o farkı ada da taşıt. */
.bosluk-ad {
  font-size: 11px;
  font-style: italic;
  color: #3a2a12;
  text-shadow: 0 0 3px #f7f1e3, 0 0 3px #f7f1e3, 0 0 3px #f7f1e3;
  white-space: nowrap;
}
/* Çok uzakta 92 kayıt kalabalık yapmasın — `.sehir` ile aynı eşik. */
#harita.cok-uzak .bosluk-ad { display: none; }
/* 🔴 ETIKET-0073 — halka adı başka bir etiketin üstüne biniyorsa susar.
   ÖLÇÜLDÜ: 92 halka kaydının 92'si de aynı adlı bir yerleşimle 0,00 km'de
   örtüşüyor (denetim/ETIKET-0073-BOSLUK.json), yani Emre'nin H-0010'da
   gördüğü "üst üste binen yazı" çoğu vakada AYNI ADIN İKİNCİ NÜSHASIYDI.
   `sv-sade` deseninin aynısı: kayıt silinmez, glif kalır, yalnız ad gizlenir;
   ad hover'da (`title`) ve tıklanınca açılan balonda durmaya devam eder.
   Kararı `sehirGuncelle`nin üçüncü geçişi verir — veri değil ÇAKIŞMA. */
.bosluk-kutu.sade .bosluk-ad { display: none; }
#harita.cok-uzak .bosluk-halka { width: 9px; height: 9px; }

.bosluk-soru {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(110, 110, 110, 0.30);
  border: 1.5px dashed rgba(80, 80, 80, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bosluk-soru::after {
  /* "boş" ile "bilmiyoruz" AYNI ŞEY DEĞİL — soru işareti bunu taşıyor. */
  content: "?";
  font: 700 12px/1 system-ui, sans-serif;
  color: rgba(60, 60, 60, 0.85);
}
.bosluk-soru:hover { background: rgba(110, 110, 110, 0.45); }

/* Lejant örnekleri — `.lejant i`nin 14×10 dikdörtgen tabanı burada yuvarlağa
   çevriliyor, harita üstündeki gerçek marker'ların KÜÇÜLTÜLMÜŞ hâli. */
.lejant i.bosluk-benek-ornek {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(157, 110, 44, 0.75) 0%, rgba(157, 110, 44, 0.4) 55%, rgba(157, 110, 44, 0) 100%);
  opacity: 1;
}
.lejant i.bosluk-soru-ornek {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(110, 110, 110, 0.30);
  border: 1.5px dashed rgba(80, 80, 80, 0.65);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lejant i.bosluk-soru-ornek::after {
  content: "?";
  font: 700 9px/1 system-ui, sans-serif;
  color: rgba(60, 60, 60, 0.9);
}

/* Boşluk popup gövdesi — maplibregl.Popup varsayılan kutusunu kullanıyor,
   `className:"bosluk-popup"` ile işaretleniyor (app.js), yalnız iç metin
   biçimi buradan geliyor. */
.bosluk-popup .maplibregl-popup-content b { color: #3a2a14; }
.bosluk-popup .maplibregl-popup-content i { font-style: italic; opacity: 0.7; }
.bosluk-popup .maplibregl-popup-content p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #3a2a14;
}


/* Koridor ağı kartı — ARAYÜZ KORİDOR (16 Ağustos 2026).
   Şartnamenin ③ şartı: "kaynaksız durak GÖRÜNÜR olsun". Duraklar zaten
   haritada içi dolu / içi boş daire olarak ayrışıyor; burası tıklanınca
   açılan kartın metin tarafı.
   🔴 `.koridor-uyari` KASTEN göze çarpıyor: kullanıcı neyin kaynaktan
   geldiğini, neyin SEÇİLDİĞİNİ ayırt edemezse ikisini de "kaynaklı" sanar —
   ve bu, kaynak yazmamaktan daha kötüdür. */
.koridor-popup .maplibregl-popup-content b { color: #3a2a14; }
.koridor-popup .maplibregl-popup-content i { font-style: italic; opacity: 0.75; }
.koridor-popup .maplibregl-popup-content p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #3a2a14;
}
.koridor-popup .koridor-uyari {
  background: #fdf3e0;
  border-left: 3px solid #c8861a;
  padding: 5px 7px;
  border-radius: 0 3px 3px 0;
}
.koridor-popup .koridor-kaynak { opacity: 0.75; font-size: 11px; }


/* Antlaşma devir lejantı — hatalar 8.docx madde 1.
   Taralı alan tek başına anlamsız: hangi renk hangi ülke, yazmak şart. */
.devir-lejant {
  position: absolute;
  left: 8px;
  bottom: 34px;
  z-index: 6;
  max-width: 260px;
  background: rgba(247, 241, 227, 0.94);
  border: 1px solid var(--altin);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.devir-lejant b { font-size: 11px; letter-spacing: 0.3px; }
/* PAKET-ISYAN — isyan taraması lejantı + madde kutusu (js/app.js isyanLejanti / isyanMaddeKutusu) */
.isyan-lejant { max-width: 300px; }
/* `.isyan-eksik` KURALI KALDIRILDI — 21 Eylül 2026, DALGA-0074/H-0012 ikinci
   tur: o `<span>`i üreten tek yer (`isyanLejanti`) artık basmıyor, teşhis
   `console.debug`a indi. Kural kalsaydı "yazılmış görünüyor" olurdu (§11);
   geri gelmesi gerekirse gerekçe burada yazılı. */
.ob-isyan .isyan-satir { display: block; margin-top: 3px; line-height: 1.35; }
.ob-isyan .isyan-satir.aktif { font-weight: 600; }
.ob-isyan .isyan-dip { display: block; margin-top: 4px; font-size: 11px; opacity: 0.8; }
/* 🆕 16 Eylül 2026 — H-0001: üç voyvodalık başkentinde isyan ateşi
   (js/app.js isyanAtesGuncelle). Haritanın sürüklenmesini engellemesin. */
.isyan-ates-isaret {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);
  animation: isyan-ates-titre 1.4s ease-in-out infinite;
}
@keyframes isyan-ates-titre {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.devir-lejant i {
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
}

/* ── Muharebe işaretleri: ölçeğe bağlı sadeleşme ───────────────────────────
   hatalar 12 md.4-5: "bir tarihî yer bir olayla anılıp gösterildikten sonra,
   çok önemli bir yerleşim değilse silinsin… uzaktan bakışta Söğüt Karacahisar
   gibi küçük yerler görünmemeli."

   ÖLÇÜLDÜ — kullanıcının şikâyet ettiği Pelekanon, Bapheus, Yenişehir ve Kite
   `yerlesimler.js`'te HİÇ YOK. Yani r91'de kurduğum `go:` sönmesi onlara hiç
   dokunamıyordu; onlar `savaslar.js`'ten gelen MUHAREBE İŞARETLERİ (286 kayıt)
   ve savasGuncelle() yalnız zaman penceresine bakıyor, zoom'a bakmıyordu.
   İki ayrı işaret sistemi var ve r91 yalnız birini kapsıyordu.

   İşaretin KENDİSİ kaldırılmıyor — o an anlatılan olayın yeri o. Uzaklaşınca
   yalnız ad etiketi çekiliyor; ikon kalıyor ki olay kaybolmasın. */
/* 🆕 ETIKET-1016: muharebe adının küçülme eşiği şehir adlarından AYRILDI —
   `sv-uzak` (app.js zoomSinifi, 4,0 ≤ z < 6,5). `#harita.uzak` (z < 5,2)
   şehir puntosu için kalır; Emre'nin Kulacahisar kamerası z ≈ 5,7'deydi ve
   eski eşikte tam boy çıkıyordu. Odaktaki olay (`sv-odak`) HİÇBİR ölçekte
   kısaltılmaz/gizlenmez — ekranın konusu odur. */
#harita.sv-uzak .savas-isaret .sv-ad {
  font-size: 9px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#harita.cok-uzak .savas-isaret .sv-ad { display: none; }
#harita.sv-uzak .savas-isaret.sv-odak .sv-ad,
#harita.cok-uzak .savas-isaret.sv-odak .sv-ad {
  display: block;
  font-size: 10.5px;
  max-width: none;
  overflow: visible;
}
#harita.cok-uzak .savas-isaret .sv-ikon { transform: scale(0.72); }
/* 13 Eylül 2026 — 0042/H-0023·24·26: şehir etiketiyle çarpışan işaret artık
   SİLİNMİYOR, küçük simgeye iniyor (app.js savasGuncelle `sv-sade`). */
.savas-isaret.sv-sade .sv-ad { display: none; }
/* ETIKET-1016 (not #13): odakta olay varken ötekilerin adı gizli, simge kalır. */
#harita.sv-odakvar .savas-isaret:not(.sv-odak) .sv-ad { display: none; }
.savas-isaret.sv-sade .sv-ikon { transform: scale(0.72); opacity: 0.9; }
/* 🆕 14 Ekim 2026 — KARARLAR-1014 #33 (0064/H-0015): odaktaki olay simgesiyle
   kesişen şehrin adı ve ediniliş simgesi o kare için gizlenir; nokta kalır
   (app.js savasGuncelle `ad-olaya-yer`). */
.sehir.ad-olaya-yer .s-ad,
.sehir.ad-olaya-yer .s-yontem,
.sehir.ad-olaya-yer .s-fetih { display: none !important; }
/* 🆕 14 Ekim 2026 — KARARLAR-1014 #36 (0083/H-0003 b): Kafkas ana sırtı not
   katmanı (app.js SIRT_NOTLARI). Motoru etkilemez; yalnız yakın zoomda görünür. */
.sirt-not {
  font: italic 11px Georgia, serif; color: rgba(60, 50, 40, 0.62);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9); white-space: nowrap;
  pointer-events: auto; cursor: help; letter-spacing: 0.2px;
}
#harita.uzak .sirt-not, #harita.cok-uzak .sirt-not { display: none; }

/* 🆕 13 Eylül 2026 — paket 0046 H-0006. Ayrı bir keyframe İCAT EDİLMEDİ:
   `odakParla` (yukarıda, .odak-parlama ile paylaşılan) aynı büyüyüp-sönme
   deseni, aynı 3 çevrim — burada yalnız hangi ELEMANA uygulandığı değişiyor
   (savaşın kendi ⚔/◎/🔥/⚓ simgesi, genel altın halka değil). JS tarafı:
   app.js `savasIsaretiParlat()`. */
.savas-isaret .sv-ikon.savas-parla {
  animation: odakParla 0.55s ease-in-out 3;
}

/* 🪦 SOL ALT #surum-etiketi KURALI KALDIRILDI — 12 Eylül 2026 (M-3550,
   KITA 12). Bu kural `js/app.js`teki `surumEtiketiKur()`ün bottom-left
   MapLibre kontrolüne aitti; o blok kaldırıldı (bkz. app.js'teki mezar
   taşı notu). Header'daki `#surum-etiketi` kuralı (yukarıda, ~satır 227)
   ile AYNI id'yi hedefliyordu — iki kural aynı id için vardı, biri artık
   karşılıksız kaldığı için silindi; header kuralı DOKUNULMADI. */

/* ═══════════════════════════════════════════════════════════════════════
   KATMAN SEÇİCİ — 4 Eylül 2026, Emre'nin isteği (çoklu seçim)
   `#harita-dugmeler` içindeki flex-gap desenine oturuyor; o sarmalın
   yorumu zaten "yarın üçüncü bir harita düğmesi eklenirse hazır" diyordu.
   ═══════════════════════════════════════════════════════════════════════ */
/* 🔴 4 Eylül 2026 — Emre: "haritanın üzerinde durmasın".
   Seçici `#menu-butonlar`ın İÇİNE taşındı; kendi kutusu ve gölgesi
   KALKTI — menünün kendi zemini üzerinde duruyor. */
#katman-grup {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(247, 241, 227, 0.16);
  font-size: 12px;
}

#katman-baslik {
  padding: 2px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(247, 241, 227, 0.45);
}

#katman-grup label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
#katman-grup label:hover { background: rgba(247, 241, 227, 0.09); }
#katman-grup input { margin: 0; cursor: pointer; }
/* ① Altlık seçicisi — kutuların hizasında dursun, satırı büyütmesin.
   `span { flex: 1 1 auto }` etiketi sola, seçiciyi sağa yaslıyor. */
#katman-grup select {
  flex: 0 0 auto;
  max-width: 154px;
  font-size: 11px;
  padding: 1px 3px;
  border: 1px solid rgba(247, 241, 227, 0.28);
  border-radius: 3px;
  background: rgba(20, 12, 10, 0.55);
  color: #f7f1e3;
  cursor: pointer;
}
#katman-grup .secici-satir { cursor: default; }
#katman-grup span { flex: 1 1 auto; }

/* katman sayısı — bilgi, gürültü değil: en küçük punto, en düşük ağırlık */
#katman-grup em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  color: rgba(247, 241, 227, 0.42);
  font-variant-numeric: tabular-nums;
}

/* 🔴 SINIFLANMAMIŞ KATMAN UYARISI — sessiz elemenin görünür yüzü.
   Boşken hiç yer kaplamaz (`:empty`), doluyken kırmızı bir dipnot. */
#katman-not {
  padding: 4px 8px 2px;
  font-size: 10px;
  line-height: 1.35;
  color: #e8a0a0;
  border-top: 1px solid rgba(247, 241, 227, 0.14);
  margin-top: 3px;
}
#katman-not:empty { display: none; }

/* ⚠️ YERLEŞİM KATMANI DOM İŞARETÇİSİDİR, harita katmanı DEĞİL —
   `setLayoutProperty` onlara işlemez, bu yüzden CSS ile gizleniyor. */
body.katman-yerlesim-kapali .maplibregl-marker { display: none !important; }


/* ══ T-0126 · YERLEŞİM ZAMAN ÇUBUĞU ══════════════════════════════════
   Emre: "hangi tarihlerde kimin elinde olduğunu gösteren bir çubuk".
   Çubuk 1281→1923 aralığının TAMAMINI temsil eder; boş kalan yer
   "sahipsiz"tir ve o boşluk KASITLI — doldurulmaz, çünkü haritada da
   boştur. */
.yer-cubuk-sarmal { margin: 6px 0 10px; }
.yer-cubuk {
  position: relative; height: 18px; border-radius: 3px;
  background: repeating-linear-gradient(45deg,
      #2b2b2b 0 4px, #333 4px 8px);      /* sahipsiz = taralı zemin */
  border: 1px solid #444; overflow: hidden;
}
.yer-cubuk i {
  position: absolute; top: 0; bottom: 0; display: block;
  cursor: pointer; border-right: 1px solid rgba(0,0,0,.35);
}
.yer-cubuk i:hover { filter: brightness(1.35); }
.yer-cubuk i.isgal {
  background-image: repeating-linear-gradient(45deg,
      rgba(255,255,255,.35) 0 3px, transparent 3px 6px);
}
.yer-cubuk-eksen { color: #9a9a9a; margin-top: 2px; }   /* düzen: .zaman-eksen */
.yer-cubuk-sarmal[data-mesafe]::after {
  content: attr(data-mesafe);
  display: block; font-size: 10px; color: #c8861a; margin-top: 3px;
}

/* ── GÜVEN KUŞAKLARI — KITA 12 PROTOTİPİ (12 Eylül 2026) ──────────────────
   oturumlar/MENZIL-KARARLARI-0912.md §③. Motor bugün kuşak verisi
   ÜRETMİYOR — bu banner KUŞ UÇUŞU prototibi ekranda AÇIKÇA işaretler
   (D176: işaretlenmezse bir sonraki oturum bunu gerçek veri sanır). */
.guven-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(178, 24, 24, 0.94);
  color: #fff;
  padding: 6px 16px;
  border-radius: 6px;
  font: 600 12.5px/1.4 -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.2px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  pointer-events: none;
  white-space: nowrap;
}

/* ── KAYNAKLI SAHİPLİK HALKASI — açılır pencere (13 Eylül 2026, C-HALKA-ALTYAPI)
   Halkanın kendisi GL katmanı (`halka-kaynakli`, app.js); burada yalnız
   tıklama penceresi. Her tanıklık kendi devlet renginde sol kenar taşır. */
.kh-popup .maplibregl-popup-content {
  font: 12px/1.4 -apple-system, "Segoe UI", sans-serif;
  color: #2b1d0e;
  max-height: 55vh;
  overflow-y: auto;
}
.kh-popup .kh-baslik b { font-size: 13.5px; color: #3a2a14; }
.kh-popup .kh-baslik span {
  display: block; font-size: 10.5px; opacity: 0.7; margin-bottom: 4px;
}
.kh-popup .kh-celiski {
  background: #fde8c8; border: 1px solid #c8861a; border-radius: 4px;
  padding: 3px 6px; margin: 4px 0; font-weight: 600; color: #7a3d00;
}
.kh-popup .kh-kayit {
  border-left: 4px solid #555; padding: 2px 0 4px 7px; margin-top: 6px;
}
.kh-popup .kh-tur, .kh-popup .kh-gelenek {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px;
  background: #efe6d2; color: #4a3a22; vertical-align: 1px;
}
.kh-popup .kh-gelenek { background: #dfe8f1; color: #1f3a55; }
.kh-popup .kh-tarih { font-weight: 600; margin-top: 1px; }
.kh-popup .kh-kaynak { font-size: 11px; opacity: 0.85; }
.kh-popup .kh-alinti { font-style: italic; margin-top: 2px; }
.kh-popup .kh-ozet { font-style: normal; font-size: 10px; color: #8a5a00; }
.kh-popup .kh-not { font-size: 10.5px; opacity: 0.75; margin-top: 2px; }

/* ── HALKA-TIKLAMA (13 Eylül 2026) — aynı tanıklık bloğu ŞEHİR GÖRÜNÜMÜNDE.
   Şehir işaretçisi DOM elemanı ve tıklamayı GL halkasından önce alıyor;
   kaynak bilgisi o yüzden şehrin açılan kronoloji penceresinin başına da
   basılıyor. Sınıflar popup'la ortak (`.kh-*`), kapsayıcı `.kh-blok`. */
.kh-blok {
  font: 12px/1.4 -apple-system, "Segoe UI", sans-serif;
  color: #2b1d0e;
  background: #fbf6ea;
  border: 1px solid #d9c9a3;
  border-radius: 5px;
  padding: 6px 8px;
  margin: 4px 0 8px;
}
.kh-blok .kh-baslik b { font-size: 13px; color: #3a2a14; }
.kh-blok .kh-baslik span {
  display: block; font-size: 10.5px; opacity: 0.7; margin-bottom: 2px;
}
.kh-blok .kh-celiski {
  background: #fde8c8; border: 1px solid #c8861a; border-radius: 4px;
  padding: 3px 6px; margin: 4px 0; font-weight: 600; color: #7a3d00;
}
.kh-blok .kh-kayit {
  border-left: 4px solid #555; padding: 2px 0 4px 7px; margin-top: 6px;
}
.kh-blok .kh-tur, .kh-blok .kh-gelenek {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px;
  background: #efe6d2; color: #4a3a22; vertical-align: 1px;
}
.kh-blok .kh-gelenek { background: #dfe8f1; color: #1f3a55; }
.kh-blok .kh-tarih { font-weight: 600; margin-top: 1px; }
.kh-blok .kh-kaynak { font-size: 11px; opacity: 0.85; }
.kh-blok .kh-alinti { font-style: italic; margin-top: 2px; }
.kh-blok .kh-ozet { font-style: normal; font-size: 10px; color: #8a5a00; }
.kh-blok .kh-not { font-size: 10.5px; opacity: 0.75; margin-top: 2px; }
/* lejant: ⑧ halka satırı — `hidden` özniteliği .lejant'ın flex düzenine yenilmesin */
.lejant #lejant-halka { display: flex; flex-direction: column; gap: 4px; }
.lejant #lejant-halka[hidden] { display: none; }
.lejant b.lj-halka { color: #5f0011; font-weight: bold; }

/* ═══════════════════════════════════════════════════════════════════════
   ARAYUZ-0077 · H-0002 — AÇILIŞ PERDESİ (saf CSS)
   Emre: "sayfa yüklenirken animasyonla beklemesi gerektiğini anlatan uyarı;
   dönen bir dünyadan tanıdık ülke haritaları teker teker fırlasın."
   🔴 NİÇİN SAF CSS: 281 veri betiği index.html'in sonunda senkron yükleniyor
   ve app.js EN SONDA geliyor — perde JS ile kurulsaydı yükleme bitince
   kurulurdu, yani hiç görünmezdi. style.css <head>'de: ilk boyamada VAR.
   Kaldıran: app.js `haritaHazir = true` anında <html>'e `atlas-hazir` sınıfı.
   ⚠️ z-index 9000 < geometri kapısının hata kutusu (9999): yükleme ÇÖKERSE
   hata mesajı perdenin ÜSTÜNDE görünür (sessiz sonsuz perde olmasın).
   Silüetler: denetim/ARAYUZ-0077-yukleme-silueti.py (Natural Earth + atlasın
   kendi 1600 zirvesi) — aşağıdaki SILUETLER bloğu o betiğin çıktısıdır.
   ═══════════════════════════════════════════════════════════════════════ */
html::before {
  content: "Atlas yükleniyor…\A Gün gün değişen sınırlar hazırlanıyor — lütfen bekleyin";
  white-space: pre-line;
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: calc(50vh - 190px);
  text-align: center; color: #f3ead7;
  font: 600 17px/1.6 Georgia, "Times New Roman", serif;
  background: radial-gradient(ellipse at center, #1d2b3a 0%, #0c131b 75%);
  pointer-events: none;
}
/* Dönen küre: eşdikdörtgen kara şeridi dairenin içinde kayar */
html::after {
  content: "";
  position: fixed; z-index: 9001; pointer-events: none;
  left: 50%; top: 50%; width: 180px; height: 180px;
  margin: -150px 0 0 -90px; border-radius: 50%;
  background: var(--kure-kara) 0 50% / 360px 180px repeat-x, #2c6e9e;
  box-shadow: inset -28px -18px 40px rgba(0,0,0,.55), inset 10px 8px 24px rgba(255,255,255,.18),
              0 0 40px rgba(120,180,255,.25);
  animation: kureDon 9s linear infinite;
}
/* ACILIS-ANIM-0929: batıdan doğuya — şeritte batı solda, yakın yüzey soldan SAĞA
   akmalı (eski `-360px` TERS döndürüyordu, ACILIS-ANIM-0081 §0). */
@keyframes kureDon { to { background-position: 360px 50%, 0 0; } }
/* Fırlayan haritalar: 10 silüet × 2 sn, küreden çıkıp büyüyerek söner */
body::before {
  content: "";
  position: fixed; z-index: 9002; pointer-events: none;
  left: 50%; top: 50%; width: 130px; height: 150px;
  margin: -135px 0 0 -65px;
  background: no-repeat center / contain var(--sil-0);
  /* Taban konum = canlandırmanın "havada" karesi. ÖLÇÜLDÜ: 281 betik
     ayrıştırılırken ana iş parçacığı çoğu an KİLİTLİ ve canlandırma çoğu
     zaman hiç başlamıyor — o zaman görünen bu taban hâldir; silüet küreyi
     örtmesin, yanında dursun. */
  transform: translate(150px, -70px);
  animation: silDegis 20s steps(1, end) infinite, silFirla 2s ease-out infinite;
}
@media (max-width: 700px) { body::before { transform: translate(0, -150px) scale(.9); } }
@keyframes silDegis {
  0%  { background-image: var(--sil-0); }  10% { background-image: var(--sil-1); }
  20% { background-image: var(--sil-2); }  30% { background-image: var(--sil-3); }
  40% { background-image: var(--sil-4); }  50% { background-image: var(--sil-5); }
  60% { background-image: var(--sil-6); }  70% { background-image: var(--sil-7); }
  80% { background-image: var(--sil-8); }  90% { background-image: var(--sil-9); }
}
@keyframes silFirla {
  0%   { transform: translate(0, 0) scale(.15) rotate(-20deg); opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translate(150px, -70px) scale(1) rotate(0); opacity: 1; }
  85%  { transform: translate(190px, -80px) scale(1.05); opacity: 1; }
  100% { transform: translate(230px, -90px) scale(1.1); opacity: 0; }
}
@media (max-width: 700px) {
  @keyframes silFirla {
    0%   { transform: translate(0, 0) scale(.15); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translate(0, -150px) scale(.9); opacity: 1; }
    100% { transform: translate(0, -170px) scale(1); opacity: 0; }
  }
}
html.atlas-hazir::before, html.atlas-hazir::after, html.atlas-hazir body::before {
  content: none; animation: none; display: none;
}
@media (prefers-reduced-motion: reduce) {
  html::after, body::before { animation: none; }
}
/* ── ACILIS-ANIM-0929 — asıl perde: data/acilis_siluet.js kurar ─────────────
   Yukarıdaki html::after küre + body::before silüet YEDEKTİR: betik yüklenmezse
   onlar çalışır; betik kurulunca <html>'e `acilis-js` gelir ve yedek söner.
   🔴 Canlandırma YALNIZ transform/opacity (Web Animations): perde süresinin ~%80'i
   ana iş parçacığı kilidi (ölçüldü) — background-position canlandırması o sürede
   DONUYORDU. Küre ve silüetler bileşik katmanda, kilit sürerken de akar.
   z-index: #acilis 9000 = html::before ile eşit ama ağaçta sonra ⇒ zeminin
   ÜSTÜNDE, geometri kapısı hata kutusunun (9999) ALTINDA. Silüet (1) kürenin (2)
   ARKASINDAN çıkar. */
html.acilis-js::after, html.acilis-js body::before { display: none; }
#acilis { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; contain: strict; }
#acilis .acilis-kure {
  position: absolute; z-index: 2; border-radius: 50%; overflow: hidden;
  background: #2c6e9e; box-shadow: 0 0 40px rgba(120,180,255,.25);
}
#acilis .acilis-serit {
  position: absolute; left: 0; top: 0; height: 100%;
  background-repeat: repeat-x; background-position: 0 50%;
  will-change: transform;
}
#acilis .acilis-golge {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset -28px -18px 40px rgba(0,0,0,.55), inset 10px 8px 24px rgba(255,255,255,.18);
}
#acilis .acilis-sil, .acilis-final {
  position: absolute; z-index: 1; opacity: 0; will-change: transform, opacity;
  /* filter: drop-shadow YOK — uçan katmanda her kare yeniden hesaplanıyor,
     ölçüldü: atlas-hazir'ı ~2 sn geciktirdi. Gölge SVG'nin içine gömülü. */
}
.acilis-final { position: fixed; z-index: 9003; pointer-events: none; }
/* app.js acilisBitir() çağıramazsa (hata) perde yine de kalkar: */
html.atlas-hazir #acilis { opacity: 0; transition: opacity .3s; }

/* ═══════════════════════════════════════════════════════════════════════
   ARAYUZ-0077 · H-0034 — İŞLEM SÜRÜYOR göstergesi
   Emre: "gidip gelen süreç / kum saati — en iyi algıyı hangisi veriyorsa."
   Seçim: DÖNEN HALKA + kısa yazı. Gerekçe (ölçüldü): ağır adımda ana iş
   parçacığı ~1,2 sn KİLİTLİ; kum saati/gidip-gelen çubuk ana iş parçacığında
   canlandırılırsa tam o anda DONAR. `transform: rotate` ve `opacity`
   bileşik (compositor) katmanda koşar — JS kilitliyken de döner. Belirme
   180 ms gecikmeli: hızlı işlemde göz kırpması olmasın.
   ═══════════════════════════════════════════════════════════════════════ */
#mesgul {
  position: fixed; left: 50%; top: 64px; z-index: 8000;
  transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 20px;
  background: rgba(20, 26, 34, .88); color: #f3ead7;
  font: 600 13px/1 Georgia, serif; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#mesgul.acik { display: flex; opacity: 0; animation: mesgulBelir .15s ease-out .18s forwards; }
#mesgul i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid rgba(243,234,215,.25); border-top-color: #e0b04a;
  animation: mesgulDon .8s linear infinite;
}
@keyframes mesgulBelir { to { opacity: 1; } }
@keyframes mesgulDon { to { transform: rotate(360deg); } }

/* ARAYUZ-0077 × SEFER-OK-0077 — sefer kaydının `vurus:` noktaları (💥) */
.sefer-vurus { font-size: 22px; line-height: 1; cursor: help; }
.sefer-vurus span {
  display: inline-block;
  filter: drop-shadow(0 0 3px rgba(255,120,0,.85));
  animation: vurusCarp 1.6s ease-out 1;
}
@keyframes vurusCarp {
  0% { transform: scale(.2); opacity: 0; } 35% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); }
}

/* ARAYUZ-0077 H-78:1 — verisi uretilmemis B ayari: pasif ve bunu SOYLUYOR */
.b-pasif { opacity: .55; cursor: not-allowed; }
.b-pasif em { font-style: italic; font-size: .85em; margin-left: .3em; }

/* UFUK-DUGME-0930 — ⑥b Ⓑ Ufuk: üç şıklı segment (5 · 7 · 10 gün).
   Radyo gizli, etiket düğme; `#katman-grup label` kuralını ezer. */
#katman-grup .ufuk-satir {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; white-space: nowrap;
}
#katman-grup .ufuk-segment {
  flex: 0 0 auto; display: inline-flex;
  border: 1px solid rgba(247, 241, 227, 0.28); border-radius: 3px; overflow: hidden;
}
#katman-grup .ufuk-segment label { padding: 0; gap: 0; border-radius: 0; }
#katman-grup .ufuk-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
#katman-grup .ufuk-segment b {
  font-weight: normal; font-size: 11px; padding: 1px 6px;
  background: rgba(20, 12, 10, 0.55); color: #f7f1e3; cursor: pointer;
}
#katman-grup .ufuk-segment label + label b { border-left: 1px solid rgba(247, 241, 227, 0.28); }
#katman-grup .ufuk-segment input:checked + b { background: #8e0b22; color: #fff; }
#katman-grup .ufuk-segment input:focus-visible + b { outline: 1px solid #f7f1e3; outline-offset: -2px; }
#katman-grup .ufuk-segment input:disabled + b { opacity: .45; cursor: not-allowed; }

/* >>> ARAYUZ-0077 SILUETLER (uretildi: denetim/ARAYUZ-0077-yukleme-silueti.py) — ELLE DUZENLEME */
:root {
  --sil-0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M87.0 32.7L92.4 38.1L92.2 42.4L95.5 42.9L98.0 45.5L96.8 44.7L95.9 47.0L93.9 47.3L96.2 54.1L94.9 57.0L96.9 58.2L97.8 62.0L95.3 63.1L94.3 60.8L87.6 60.4L86.4 62.0L84.7 60.7L69.5 65.1L64.3 63.5L60.4 65.3L56.2 64.0L56.4 67.9L54.9 68.0L53.7 70.6L51.9 67.5L54.0 65.2L53.1 63.4L49.6 65.9L46.3 64.1L42.5 68.1L36.6 69.3L32.6 65.9L25.8 63.6L24.5 68.0L20.6 68.6L17.7 66.9L17.7 65.1L14.4 63.6L12.2 65.7L12.7 64.2L10.4 65.1L9.0 65.1L13.7 62.6L8.3 63.1L10.1 61.1L7.9 60.5L7.0 58.5L8.2 56.4L3.0 54.5L4.5 53.5L3.9 51.8L5.3 54.3L7.8 53.4L5.5 52.0L7.3 50.5L4.9 47.9L6.6 46.0L2.2 46.5L2.7 43.3L5.6 40.5L17.4 40.7L16.1 39.5L22.0 38.3L18.5 37.8L17.2 36.4L17.5 36.1L17.6 35.7L17.5 35.6L18.0 35.0L28.6 36.0L33.9 31.8L39.3 29.9L48.0 29.4L49.4 31.9L53.2 32.0L55.0 34.9L56.8 34.2L64.9 37.1L70.5 35.8L74.1 37.1L81.2 33.2L87.0 32.7ZM12.2 30.5L13.2 33.2L17.7 35.0L17.1 36.5L9.6 36.7L2.6 42.8L3.0 41.0L6.1 39.2L2.1 38.8L3.7 36.8L3.5 35.0L5.1 34.2L3.5 31.4L7.2 29.5L12.2 30.5Z' fill='%23c0392b' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3ET%C3%BCrkiye%3C/text%3E%3C/svg%3E");
  --sil-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M56.1 3.0L58.0 6.7L60.5 6.1L64.7 11.3L68.4 11.7L67.9 14.8L71.7 14.7L73.0 12.8L73.2 16.7L77.7 19.9L84.7 20.3L87.0 23.6L98.0 25.7L95.1 29.4L93.5 34.7L93.5 40.5L91.9 42.2L88.9 41.6L88.1 43.0L89.4 43.3L85.0 47.4L81.4 55.5L82.8 56.0L85.3 52.8L87.6 53.2L87.4 56.0L89.3 58.4L87.6 60.7L90.3 64.0L89.5 66.1L86.2 67.3L89.2 70.3L88.1 75.2L94.2 78.5L92.6 81.7L87.1 85.6L86.8 87.8L83.1 89.6L74.6 86.3L76.0 84.8L74.6 83.9L73.3 86.3L72.5 85.4L72.4 84.3L72.1 83.7L72.4 85.4L73.0 86.2L66.6 84.1L60.4 88.8L59.9 94.0L60.9 96.1L57.1 97.1L52.1 97.0L50.1 94.2L43.4 91.8L42.2 91.7L42.1 93.4L37.1 93.4L27.9 88.8L26.6 89.5L27.0 87.3L24.1 85.9L26.5 83.7L28.1 73.2L29.7 72.0L28.7 70.8L28.1 72.4L29.4 62.3L33.4 69.5L33.0 68.1L33.7 68.4L31.5 63.3L28.2 60.7L30.1 60.7L28.9 59.0L29.2 54.4L24.1 52.3L21.7 48.8L22.7 46.5L20.8 45.3L21.4 43.9L24.6 44.6L22.5 43.4L20.5 44.2L18.6 43.6L19.9 41.4L16.5 41.5L15.9 40.8L17.1 40.9L17.5 40.3L17.5 40.1L17.4 39.9L15.4 39.7L14.2 41.7L14.3 38.9L13.5 39.8L12.5 39.3L13.1 38.3L11.9 39.2L6.8 36.9L5.1 38.1L4.6 36.3L2.4 35.6L5.7 34.8L3.7 34.1L3.8 32.3L4.0 32.9L5.8 32.9L6.4 32.7L4.4 32.4L5.7 31.4L2.1 32.3L2.2 30.4L10.9 28.7L11.4 27.0L13.5 26.7L17.5 30.6L20.3 28.5L22.7 30.5L23.0 28.5L27.3 29.1L25.9 28.0L25.9 22.8L23.9 21.1L23.1 17.5L28.0 17.8L29.1 21.6L35.8 22.3L40.4 20.4L37.9 19.5L39.1 17.4L49.7 12.4L48.8 11.5L49.1 5.1L56.1 3.0Z' fill='%232e5aa8' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3EFransa%3C/text%3E%3C/svg%3E");
  --sil-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M55.3 78.0L47.8 82.1L45.9 79.7L43.0 80.4L44.4 79.1L42.5 77.8L38.8 80.0L37.7 79.1L39.4 78.7L39.6 77.8L37.3 78.9L37.6 77.1L36.4 77.0L42.8 73.1L45.2 69.5L44.1 68.9L44.4 65.3L40.0 66.8L43.7 62.1L49.2 60.6L50.7 61.9L50.1 60.2L50.9 59.7L52.1 61.3L53.2 60.6L50.6 58.4L52.6 50.8L50.4 52.8L47.2 47.9L48.8 43.8L51.2 42.8L47.6 42.5L44.8 45.0L42.3 43.5L42.4 46.0L39.4 44.0L39.4 46.5L37.4 43.8L40.9 37.0L39.0 34.7L39.2 32.4L41.8 32.3L39.4 31.6L40.0 29.2L38.6 32.9L37.7 31.4L36.5 33.1L36.3 31.5L39.0 28.4L35.6 31.2L36.4 33.9L35.1 38.5L33.4 39.0L35.5 33.2L34.2 33.7L34.8 31.1L33.9 32.1L34.8 27.9L35.5 26.6L37.1 26.6L37.7 25.9L38.0 25.3L35.4 26.2L36.4 24.2L38.5 23.6L36.9 23.6L37.7 22.5L34.1 26.0L32.0 24.4L35.0 23.8L31.0 24.0L30.5 23.5L33.6 22.8L34.2 21.9L32.5 21.6L33.1 20.5L33.6 20.2L34.2 20.7L34.8 20.6L35.1 20.4L33.5 19.6L35.9 19.3L34.1 18.7L35.6 17.0L33.8 17.2L35.2 16.4L35.6 15.8L33.3 16.6L33.1 14.1L34.3 14.8L35.2 14.5L33.3 13.4L34.1 12.7L33.2 11.3L38.0 11.3L35.6 8.5L36.9 7.8L35.9 6.6L38.9 7.0L37.3 5.6L38.5 2.5L41.7 4.5L51.2 2.4L50.5 5.4L44.3 9.9L44.8 10.9L42.3 10.5L44.6 11.5L46.3 11.0L44.9 12.8L43.0 13.0L42.1 14.1L44.8 12.9L43.3 15.0L48.7 12.5L58.8 13.7L59.3 15.3L54.4 25.0L49.2 27.4L52.0 26.4L54.0 28.4L49.1 31.2L45.9 30.3L50.8 32.1L53.6 30.8L56.8 32.4L60.1 36.0L62.8 46.6L66.9 48.2L70.1 52.3L69.2 53.3L71.4 57.4L71.5 57.8L71.4 58.2L68.9 56.4L66.5 56.5L65.9 56.8L68.8 56.7L72.0 59.9L72.9 62.9L70.6 65.8L73.0 67.1L74.2 64.9L78.7 65.3L81.8 68.6L80.7 74.6L78.0 75.2L78.8 77.2L73.0 81.5L79.9 82.3L76.9 87.4L65.5 89.5L61.1 87.4L62.1 88.7L54.8 91.7L52.2 89.5L48.3 90.1L47.0 95.1L43.6 92.5L43.6 94.0L38.1 95.4L37.2 98.0L33.9 97.0L39.4 91.9L43.4 84.4L51.2 84.4L55.3 78.0ZM24.0 41.9L31.4 40.2L34.0 44.8L32.6 46.8L34.8 46.0L35.7 48.4L35.1 49.8L34.9 47.9L33.9 47.1L34.9 50.2L31.5 53.1L28.0 53.0L25.5 49.0L23.8 52.1L21.7 52.0L18.1 48.4L21.1 46.8L19.6 45.8L22.1 45.3L24.0 41.9Z' fill='%237e3d8f' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3E%C4%B0ngiltere%3C/text%3E%3C/svg%3E");
  --sil-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M70.6 82.9L67.4 90.4L69.0 94.7L67.4 98.0L50.7 89.6L49.1 87.5L51.2 83.8L52.3 85.4L55.2 83.6L58.4 85.9L70.6 82.9ZM31.3 62.3L29.9 64.8L30.6 66.4L29.5 75.0L25.7 74.0L25.8 76.5L23.1 77.7L21.3 74.4L22.6 68.6L21.5 68.0L21.3 62.9L19.8 61.8L20.1 58.3L22.3 59.6L27.2 55.6L30.1 58.0L29.1 58.7L30.6 59.4L31.3 62.3ZM10.4 14.0L17.7 12.7L21.5 7.8L21.7 9.8L25.6 13.6L27.5 7.4L33.0 10.0L32.7 7.1L35.5 7.0L35.6 4.0L39.3 4.9L40.5 3.1L47.4 2.0L47.0 3.6L48.9 5.6L57.8 7.2L55.5 9.3L57.4 10.3L56.2 11.9L58.8 15.8L57.0 13.9L53.8 14.1L47.2 18.3L49.8 21.5L48.0 22.8L48.7 28.1L57.2 34.4L60.4 43.3L64.9 48.0L74.5 49.5L74.8 50.8L72.9 52.4L73.3 53.8L87.3 61.2L90.8 65.9L90.0 68.9L87.8 68.0L86.3 64.6L80.3 62.7L76.9 69.3L81.5 72.7L81.6 76.8L77.6 78.3L77.5 81.7L74.1 86.2L71.4 86.0L72.5 79.6L75.1 77.7L71.0 66.5L68.5 66.9L66.1 65.0L66.7 63.6L65.2 61.0L62.2 62.0L63.1 60.5L60.2 59.9L58.0 55.7L53.3 55.9L43.8 46.2L40.0 45.2L40.4 43.6L35.9 40.1L36.1 37.3L33.1 30.2L24.0 26.4L19.2 31.3L15.3 32.3L16.4 28.8L11.7 28.1L10.8 25.5L12.3 24.1L11.9 22.8L9.2 20.2L12.6 18.8L13.0 17.4L10.4 14.0Z' fill='%232e8b57' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3E%C4%B0talya%3C/text%3E%3C/svg%3E");
  --sil-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M40.0 62.8L35.1 60.8L33.2 56.2L31.0 57.5L28.2 55.0L23.2 56.8L23.9 58.0L22.5 59.3L23.4 60.7L16.7 59.5L14.7 61.2L14.0 63.7L15.8 66.3L14.2 68.5L14.9 72.6L9.9 69.9L7.8 67.7L10.1 62.2L4.8 59.1L5.4 57.5L4.3 54.8L2.2 53.2L2.4 49.6L3.8 49.4L2.3 48.7L4.7 45.7L2.7 38.3L5.0 37.0L10.6 39.8L9.1 41.8L6.5 41.2L5.5 40.6L5.2 40.5L4.8 40.5L8.4 44.6L7.7 43.3L12.6 42.1L12.1 38.6L14.1 39.3L13.1 40.2L14.0 41.0L15.4 39.5L18.7 38.2L22.3 39.0L23.1 37.1L27.8 39.2L26.7 35.7L29.8 33.4L31.1 38.9L28.2 40.9L30.1 41.6L31.7 38.5L33.0 38.2L33.3 39.7L33.7 40.0L34.5 40.0L33.6 38.3L31.2 38.0L30.7 35.2L31.8 33.5L32.1 35.3L33.2 35.6L34.1 35.9L34.5 35.8L34.6 35.7L32.6 34.6L37.2 34.8L36.4 36.3L37.1 36.9L37.4 34.9L35.4 32.5L39.4 33.2L39.5 30.6L47.4 29.8L50.4 27.4L56.4 29.7L50.9 33.5L63.0 32.3L66.2 33.2L65.1 34.0L67.2 36.0L72.9 35.1L73.3 33.4L84.9 35.9L85.9 38.8L92.1 38.5L92.0 36.8L98.0 38.2L98.0 43.1L97.1 43.7L96.1 43.0L94.5 43.5L97.7 46.1L87.7 49.3L86.7 51.7L87.5 54.1L83.3 60.6L83.4 52.1L89.0 46.3L85.5 48.6L85.6 46.9L83.6 47.3L82.4 50.4L73.4 51.3L69.8 55.7L73.7 57.6L73.0 63.6L68.5 70.8L66.8 70.8L69.5 63.9L67.2 64.6L62.5 57.3L60.3 58.3L58.9 62.3L53.1 62.5L47.0 59.1L46.0 62.0L42.9 60.6L40.0 62.8Z' fill='%234f7d4f' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3ERusya%3C/text%3E%3C/svg%3E");
  --sil-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M59.1 15.4L62.1 16.8L61.6 18.8L63.0 18.2L68.4 21.5L74.8 22.5L78.9 20.9L83.0 22.1L83.8 24.8L85.7 24.2L88.0 25.7L97.0 24.9L98.0 26.0L96.5 27.0L97.3 29.7L89.0 36.1L80.5 38.6L78.2 40.9L79.3 42.2L77.0 43.2L70.3 53.8L71.5 58.9L74.5 61.5L68.9 65.5L66.2 71.4L67.4 72.6L62.7 73.2L60.0 75.2L56.6 81.4L54.8 80.4L52.0 81.9L39.2 81.5L37.3 83.7L33.3 84.6L30.0 88.6L26.8 86.8L24.1 82.4L25.6 79.5L24.1 80.7L20.3 77.1L20.6 75.8L20.0 77.1L16.3 76.9L15.5 72.8L19.8 66.9L16.7 64.4L19.7 58.8L15.2 52.2L19.3 52.0L20.4 48.9L19.1 47.2L21.0 45.5L19.9 38.9L25.5 33.4L22.9 32.5L22.4 29.5L10.5 31.0L11.1 28.8L10.1 27.6L5.1 30.2L5.0 28.0L5.5 27.9L7.1 25.7L5.2 26.6L6.8 24.8L5.4 25.2L4.7 24.5L5.5 24.6L6.3 22.3L4.0 23.8L5.1 20.9L3.5 21.6L3.2 20.1L2.1 20.3L3.4 17.8L2.6 17.7L5.5 15.8L10.2 16.1L9.5 14.8L10.6 14.4L9.5 13.6L14.2 11.4L19.1 14.5L28.2 12.7L38.6 15.4L45.5 14.1L49.8 16.1L51.7 14.7L56.5 16.4L59.1 15.4Z' fill='%23d4a017' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3E%C4%B0spanya%3C/text%3E%3C/svg%3E");
  --sil-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M18.8 88.5L17.0 95.6L15.6 95.0L16.0 96.2L13.5 98.0L14.2 95.7L13.1 94.1L14.1 93.3L13.4 93.3L12.8 94.6L13.1 97.0L10.7 95.3L11.8 94.3L11.0 90.8L12.7 89.2L13.3 86.2L11.3 83.6L10.6 85.6L12.0 86.9L10.9 87.5L10.6 86.2L8.7 87.6L8.4 84.2L10.1 85.8L7.9 82.3L9.3 82.9L9.3 81.1L10.2 81.8L12.6 79.1L14.8 78.9L15.3 78.4L15.8 80.7L18.7 80.4L17.9 83.0L20.0 83.0L19.5 84.0L20.9 85.2L18.8 88.5ZM34.7 79.2L31.8 83.2L29.5 81.2L27.2 82.4L25.7 86.7L22.4 84.7L22.6 81.9L20.5 82.5L24.0 80.1L25.1 77.4L28.3 78.4L28.6 76.5L30.5 75.7L34.2 76.6L34.7 79.2ZM33.4 73.0L23.4 76.9L22.5 75.8L21.6 76.6L21.3 79.2L20.8 79.7L19.1 77.8L15.5 77.9L14.8 78.8L14.6 78.6L15.1 75.4L17.4 75.4L26.1 67.6L27.7 68.6L37.2 66.5L37.7 68.6L41.6 67.2L41.0 65.0L44.8 60.1L45.3 55.9L48.2 55.0L45.7 57.8L48.0 60.0L54.5 55.8L59.0 50.7L62.0 43.0L62.1 39.7L60.4 38.6L62.1 36.9L61.3 34.5L63.4 33.1L63.8 30.1L65.3 30.6L65.7 32.9L66.6 31.8L67.8 32.7L68.3 30.1L66.0 30.9L66.7 28.3L69.6 29.0L69.5 34.1L71.5 36.8L72.7 42.0L69.6 47.4L69.9 50.0L68.8 49.0L67.0 50.6L67.2 57.5L64.9 63.1L66.6 66.8L64.5 67.8L64.0 70.4L61.6 72.2L60.7 71.9L60.9 69.5L62.5 67.8L60.8 67.2L60.4 70.6L57.8 69.8L56.0 74.2L55.8 70.8L54.5 70.9L52.8 74.3L46.5 74.4L48.2 73.4L46.3 72.1L45.7 73.3L45.8 71.0L45.5 71.0L43.9 73.7L45.9 76.4L43.0 77.0L40.0 81.9L36.3 79.0L36.4 76.4L38.2 73.6L33.4 73.0ZM92.2 16.2L90.7 17.6L88.7 17.8L88.0 18.7L82.2 19.7L78.8 25.8L71.4 21.3L67.1 23.3L64.6 21.4L63.5 23.6L68.2 26.6L65.4 26.4L63.1 29.2L61.9 28.0L62.8 25.4L60.8 23.2L61.4 20.9L64.7 18.7L63.9 16.5L68.1 17.7L69.4 16.6L68.9 14.0L70.5 12.5L71.3 7.8L70.2 3.8L72.1 2.0L81.4 11.3L86.6 12.6L89.7 9.8L88.3 13.5L89.3 16.5L92.2 16.2Z' fill='%23b03a48' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3EJaponya%3C/text%3E%3C/svg%3E");
  --sil-7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M11.4 58.2L9.0 52.8L3.2 49.6L4.5 49.0L3.9 47.0L2.3 46.7L2.0 45.0L3.9 42.9L6.3 43.2L12.4 39.9L13.3 37.7L11.8 34.3L16.0 33.9L16.8 29.8L20.7 30.1L21.0 27.5L22.8 26.1L28.3 28.9L29.1 33.7L36.2 35.5L37.7 38.6L45.8 38.9L51.2 40.8L59.8 38.5L62.2 36.7L61.3 35.3L62.2 33.9L64.8 34.6L70.7 31.0L74.6 30.9L72.5 28.3L67.8 28.0L69.6 24.6L73.7 24.1L76.0 20.1L74.9 18.9L76.2 17.9L83.6 18.3L86.6 24.7L91.6 26.5L92.1 28.8L97.9 27.7L95.4 33.9L92.0 34.4L92.5 37.3L91.3 39.0L90.3 38.0L87.4 40.0L87.6 41.2L85.3 40.5L76.7 46.4L78.4 42.9L77.7 42.0L71.2 45.7L73.5 49.5L76.0 48.2L79.0 49.0L75.0 51.3L73.5 53.7L77.8 60.1L74.2 58.9L77.9 61.6L76.1 63.0L75.9 62.8L75.6 62.8L75.5 62.8L75.4 63.0L75.2 63.0L75.0 63.2L78.2 63.7L76.6 65.8L77.4 66.8L75.7 67.3L75.0 70.1L74.1 69.9L74.7 70.7L73.4 71.1L74.3 72.7L69.3 77.4L65.2 78.4L65.1 77.1L64.5 77.1L64.6 78.9L59.7 80.4L59.6 82.7L58.5 79.7L55.0 80.0L54.1 77.7L51.8 76.6L49.6 78.3L46.1 78.3L46.2 80.9L45.1 79.7L43.7 80.4L42.1 78.9L42.7 77.4L41.6 75.0L39.5 75.4L41.4 71.7L41.4 68.3L39.8 66.5L37.6 66.6L37.4 64.8L35.0 64.9L30.8 68.0L28.1 66.8L26.1 68.8L25.6 67.3L21.4 67.7L15.3 62.9L13.8 63.5L10.1 61.0L9.5 58.5L11.4 58.2Z' fill='%23c8553d' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3E%C3%87in%3C/text%3E%3C/svg%3E");
  --sil-8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M33.9 2.0L35.5 5.0L37.6 6.0L37.2 9.0L39.3 9.9L39.8 11.6L37.6 13.0L35.8 12.3L37.0 16.7L38.2 16.2L44.3 20.5L42.2 22.1L41.2 25.3L50.0 30.0L54.4 29.9L60.0 33.3L67.0 34.0L67.4 28.5L69.0 27.9L70.6 32.4L79.7 32.4L80.4 30.7L78.6 28.8L81.9 28.8L88.5 23.6L91.0 24.6L93.3 23.4L95.0 25.6L94.0 26.8L96.7 27.0L97.5 28.3L95.9 29.6L96.7 31.4L93.5 30.8L90.2 33.1L87.0 42.7L84.3 42.0L84.5 45.3L82.9 49.4L81.9 49.3L80.9 43.3L79.8 43.2L78.7 45.9L77.3 43.5L81.6 39.0L73.0 37.7L72.4 34.5L71.4 35.3L68.3 33.1L67.3 35.8L70.3 37.7L67.1 40.0L69.5 41.2L68.8 43.5L70.2 45.0L70.6 50.6L69.4 50.7L69.5 48.8L69.2 48.5L68.9 50.8L68.6 50.8L68.8 50.0L68.7 49.4L67.9 50.8L67.7 48.7L66.8 47.8L67.6 48.9L63.5 51.6L63.9 53.8L61.9 56.3L58.2 57.0L57.7 58.1L59.2 57.3L48.8 66.3L48.6 68.2L42.0 71.3L41.2 76.5L42.1 79.2L41.2 78.6L42.1 80.1L40.0 86.7L40.6 90.2L38.7 90.4L37.5 93.1L38.9 93.7L39.3 94.2L35.9 94.4L33.0 98.0L29.8 95.1L22.9 75.6L19.7 70.0L18.2 59.2L17.5 59.9L17.6 58.7L18.5 59.0L17.2 56.8L18.1 53.6L16.9 51.4L18.7 50.1L16.8 50.4L16.7 49.3L18.0 48.3L16.3 48.0L15.5 48.3L15.4 52.0L10.9 53.7L5.1 48.2L9.1 47.3L10.2 45.4L7.2 46.6L3.4 44.2L4.7 42.7L3.1 43.7L2.5 43.6L4.5 41.1L12.1 40.8L10.7 36.4L9.3 36.3L9.1 33.4L6.9 32.7L7.0 31.3L9.7 28.2L11.2 29.3L14.6 28.4L23.7 17.4L23.3 14.8L26.0 13.3L21.6 10.1L22.4 7.4L21.2 7.0L21.3 5.0L27.4 5.5L33.9 2.0Z' fill='%23e07b24' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3EHindistan%3C/text%3E%3C/svg%3E");
  --sil-9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M82.8 85.3L87.0 81.2L89.7 84.8L88.5 85.9L89.9 87.1L83.7 88.9L82.8 85.3ZM93.1 77.5L95.1 79.1L95.9 82.1L90.8 85.6L89.2 83.2L90.9 79.1L93.1 77.5ZM24.2 58.3L25.8 56.6L24.0 56.5L24.0 55.1L20.5 55.2L19.5 50.6L17.3 52.6L14.8 52.8L13.6 50.3L8.3 47.5L7.3 45.1L4.1 45.5L2.0 42.1L8.6 39.1L22.1 38.7L23.5 37.5L26.0 38.4L24.9 39.8L26.1 41.8L24.0 44.1L24.6 45.0L33.3 47.8L34.3 49.9L40.0 52.2L41.9 51.1L42.0 48.2L44.9 46.6L57.9 51.0L61.6 49.4L65.2 50.6L67.6 49.6L69.3 45.1L70.0 46.2L70.3 44.7L72.4 44.6L70.9 43.4L69.4 44.9L70.7 38.6L64.6 40.2L60.9 38.4L59.1 40.0L56.9 38.4L55.0 38.9L56.7 38.1L54.8 38.2L54.7 36.1L52.9 35.5L54.6 35.1L54.2 32.8L52.6 33.0L53.3 31.5L59.5 30.4L58.2 29.3L61.8 29.6L65.6 27.7L77.9 29.9L80.6 28.1L80.1 26.2L78.0 25.3L72.2 21.4L74.9 19.3L73.4 18.0L77.3 19.6L79.4 18.4L80.7 19.6L84.2 19.2L85.3 21.7L81.5 24.5L84.2 26.8L81.5 27.7L84.5 26.9L86.1 21.8L88.8 26.2L91.2 23.8L90.8 25.6L95.9 31.1L94.4 31.6L93.8 34.0L89.7 33.1L90.0 38.6L88.3 39.0L86.4 35.7L86.4 39.7L89.1 42.8L93.2 43.6L92.4 44.8L94.0 46.5L90.3 46.3L91.6 50.7L93.8 51.7L91.6 52.5L91.2 54.1L95.6 59.7L96.8 63.7L97.1 61.0L98.0 61.2L96.9 66.1L93.8 66.7L91.9 62.4L92.7 60.6L91.1 60.0L91.5 57.5L89.6 57.5L88.3 54.3L83.3 52.0L83.0 47.5L78.7 44.0L76.7 44.1L71.7 50.1L72.3 53.3L74.0 54.2L73.1 58.1L75.7 59.7L77.5 58.8L80.6 64.3L79.0 66.8L82.6 66.2L84.7 68.6L83.2 73.5L79.2 74.9L76.4 71.9L75.0 66.2L72.9 64.5L69.0 56.8L67.8 56.7L68.6 53.7L67.2 57.5L64.1 52.9L70.0 65.5L69.8 67.4L71.9 69.3L72.9 76.0L75.4 78.8L73.4 79.0L71.9 81.1L69.0 81.8L68.6 80.1L68.8 76.6L70.4 74.2L69.7 71.4L66.5 68.7L63.2 72.7L62.2 72.1L60.2 69.7L59.9 66.4L55.9 65.6L54.9 61.9L52.3 60.7L52.0 58.4L49.7 58.9L47.4 55.1L42.4 55.9L39.7 59.4L35.8 58.8L35.0 65.7L32.3 67.3L24.9 66.1L23.4 63.1L24.2 58.3ZM37.8 26.0L33.7 23.7L32.1 20.8L31.0 22.0L31.2 20.7L32.8 20.2L34.6 21.4L35.9 20.4L36.2 17.1L37.7 17.5L40.4 14.4L41.8 15.3L42.7 13.8L43.5 16.7L44.8 17.7L43.6 16.0L45.5 15.2L46.8 17.4L52.6 13.4L54.6 14.9L56.8 13.8L60.1 17.0L59.8 15.1L61.8 14.0L63.1 16.1L61.5 17.3L65.4 15.3L69.6 17.0L70.5 14.5L72.1 15.1L74.4 11.7L75.0 15.1L76.3 15.2L76.0 16.7L68.5 19.2L68.9 18.3L68.2 19.0L69.0 20.6L68.1 19.1L66.2 18.9L69.0 20.8L66.8 22.3L64.1 20.8L66.4 19.5L62.4 18.2L64.4 18.0L62.8 16.8L63.0 18.1L61.1 18.2L59.0 19.8L59.0 21.8L57.6 21.6L57.1 24.6L55.1 26.7L57.9 29.8L55.2 29.8L52.8 31.8L53.9 30.5L46.4 30.9L47.8 33.6L46.3 34.3L49.1 35.7L49.0 36.8L46.7 37.0L47.5 39.4L44.9 38.5L43.8 36.3L44.9 35.5L40.6 31.0L41.1 28.1L38.5 25.5L37.8 26.1L36.6 25.7L37.8 26.0ZM83.4 15.3L79.4 16.0L78.6 11.1L83.1 11.2L83.4 15.3Z' fill='%238e0b22' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='50' y='112' text-anchor='middle' font-family='Georgia,serif' font-size='10' fill='white'%3EOsmanl%C4%B1 %281600%29%3C/text%3E%3C/svg%3E");
  --kure-kara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 180'%3E%3Cpath d='M1 21L6 24L10 24L7 24L7 26L2 24L0 25L1 21ZM79 20L78 20L77 20L78 21L77 21L73 20L67 22L66 21L63 20L65 20L67 20L69 20L61 18L65 17L72 18L72 17L73 17L79 20ZM64 17L57 19L54 18L56 16L55 16L64 17ZM74 14L67 16L66 15L69 15L62 15L65 13L71 15L70 14L71 13L74 14ZM123 128L118 129L117 131L115 131L116 133L115 133L114 135L113 135L112 136L114 138L111 140L110 142L112 142L111 142L109 143L109 144L108 143L108 144L109 143L109 143L107 143L108 143L107 143L108 144L107 143L109 143L107 143L107 142L106 143L108 142L106 142L106 142L106 141L106 141L106 141L106 140L105 140L106 140L106 138L105 138L107 138L106 138L106 138L105 138L106 138L105 137L106 137L106 137L106 137L105 136L104 137L106 136L106 137L107 135L108 131L106 131L106 127L107 127L108 124L110 110L109 107L104 105L101 98L99 96L100 93L99 91L100 89L101 89L101 88L102 87L102 88L102 87L102 87L102 87L102 87L102 87L102 87L103 86L102 82L101 81L100 81L100 82L100 83L99 83L99 82L98 82L97 82L97 82L95 80L95 80L95 80L94 80L93 77L77 72L74 70L74 67L67 59L65 58L65 60L71 67L70 67L70 66L68 65L68 65L68 65L68 65L68 64L67 63L65 62L66 61L63 57L61 56L59 55L57 52L59 52L57 52L56 50L57 44L55 42L57 42L57 43L57 43L58 43L58 42L57 41L55 39L52 39L53 38L53 38L53 38L52 38L53 38L53 37L52 38L52 38L52 37L52 37L51 36L52 37L51 36L50 36L51 35L49 35L49 34L48 34L49 34L46 31L32 29L31 29L32 30L28 31L30 29L27 30L26 31L27 31L22 34L22 34L22 34L21 34L19 35L18 34L17 35L18 34L20 34L23 33L23 31L21 32L20 31L18 31L18 29L16 30L15 29L17 29L14 28L19 26L19 25L14 25L12 24L20 23L13 22L24 19L45 21L44 21L45 21L46 20L46 21L51 20L48 20L47 21L47 21L47 21L52 19L55 21L56 20L66 22L65 22L68 22L70 22L73 24L72 23L73 23L72 22L72 22L72 22L74 22L74 21L72 21L74 21L76 22L78 22L82 22L81 22L82 22L82 22L83 22L82 21L84 22L84 23L85 23L84 23L84 23L85 23L85 22L87 21L83 20L85 18L88 20L87 20L90 21L89 21L90 22L92 21L92 23L95 21L94 20L99 21L97 22L98 23L97 24L96 23L96 23L96 23L95 23L95 23L96 24L95 23L93 23L94 24L93 25L90 24L89 24L91 25L93 25L90 26L86 26L88 26L88 26L89 27L89 27L89 27L87 28L85 31L87 31L87 33L98 35L98 37L100 39L99 39L101 39L102 38L101 36L100 35L102 35L103 34L103 34L103 33L103 32L103 32L101 31L103 30L103 27L106 28L108 29L110 29L110 29L110 30L109 30L110 30L110 31L112 31L111 32L114 32L115 30L115 30L115 30L116 30L116 32L117 32L117 32L119 33L117 33L119 34L120 34L119 35L123 35L119 36L120 37L122 36L123 37L124 36L124 36L123 39L121 39L120 40L118 40L117 40L114 40L106 44L105 45L106 45L108 43L108 43L108 43L109 43L111 42L114 41L116 41L113 42L115 42L115 44L117 44L118 44L119 45L119 45L119 45L115 47L114 46L117 45L113 45L113 45L111 45L111 46L111 46L110 46L110 46L110 46L110 46L110 46L110 46L110 46L109 47L110 48L109 48L106 49L106 49L106 49L106 50L106 50L106 50L106 50L106 50L106 50L106 51L106 51L104 50L105 52L105 52L105 52L104 53L104 53L104 53L104 53L104 50L103 51L104 52L103 52L103 52L103 51L103 51L103 51L103 52L104 53L103 53L103 53L104 53L104 54L104 53L103 54L104 55L103 55L99 57L99 59L99 59L98 59L99 60L99 62L100 62L99 61L99 61L99 62L100 62L100 62L100 63L100 63L100 63L100 63L100 63L100 65L99 65L99 65L99 65L99 65L99 65L99 65L99 65L99 65L99 65L99 65L99 65L99 64L98 64L98 64L97 61L97 61L96 60L95 60L94 59L90 60L91 60L90 60L91 61L91 61L91 61L90 60L86 60L83 61L82 63L82 67L83 68L82 68L82 68L83 69L84 71L86 72L89 72L90 69L93 69L91 74L97 75L96 79L98 81L101 80L103 82L103 81L104 81L105 79L108 78L108 81L110 78L112 80L115 80L116 80L116 79L116 79L118 79L117 79L117 80L118 80L119 80L118 81L119 82L120 81L121 82L121 84L123 85L126 84L129 86L129 88L130 89L129 90L128 91L127 92L128 92L129 91L129 92L130 92L131 92L131 92L131 92L131 92L130 93L133 91L135 92L135 91L135 93L140 93L145 95L145 98L141 103L139 112L138 113L136 113L134 114L132 115L132 115L132 115L132 115L132 115L131 115L131 119L129 121L128 122L129 120L129 120L126 125L122 124L122 122L121 124L123 126L123 128ZM99 26L97 26L93 26L95 24L98 26L100 26L99 26ZM84 18L81 19L77 17L82 16L82 17L84 18ZM90 16L86 18L84 17L85 16L90 16ZM101 15L88 15L87 14L85 14L83 13L101 15ZM83 15L80 15L79 15L81 14L77 15L77 14L82 13L83 15ZM83 10L86 10L83 10L86 9L84 9L87 9L95 11L88 12L86 11L90 11L83 10ZM106 70L102 70L103 69L101 68L98 68L98 67L97 67L96 68L95 68L97 67L98 67L99 67L99 67L100 67L100 67L100 67L100 67L101 68L103 68L102 68L103 69L104 69L104 69L106 70ZM107 163L107 162L107 162L109 162L110 162L105 162L110 161L109 161L110 160L108 159L110 159L112 161L112 162L107 163ZM107 23L107 22L105 21L103 21L104 21L101 19L94 20L90 18L95 16L93 17L94 18L95 19L95 19L93 19L95 19L95 18L95 18L94 18L94 18L94 18L96 18L94 17L96 17L95 17L98 16L100 17L99 18L105 18L104 18L107 19L109 19L109 19L108 19L107 19L107 19L109 19L108 20L112 19L112 20L110 20L110 20L112 20L110 20L113 21L111 21L114 22L114 22L115 22L115 23L119 23L116 24L116 25L114 24L116 24L111 24L113 25L115 26L115 26L115 27L111 26L114 28L107 25L102 25L107 25L106 24L107 23ZM119 8L102 11L106 11L106 11L101 11L105 11L98 12L102 13L99 14L99 14L97 13L90 13L93 13L92 12L96 13L97 13L98 12L93 11L98 11L97 11L98 11L99 11L93 10L99 10L97 10L102 9L100 9L103 9L95 9L93 9L98 9L88 8L108 7L119 8ZM120 170L119 171L113 170L120 170ZM115 145L111 145L110 145L109 145L108 145L111 144L110 143L111 142L115 145ZM111 72L109 72L106 72L108 71L107 70L109 70L111 72ZM126 171L133 168L137 170L126 171ZM127 43L126 43L126 42L124 43L125 42L121 42L122 41L123 39L124 38L123 40L127 41L126 42L127 41L126 42L126 42L127 43ZM174 35L174 37L174 37L174 38L170 38L171 37L170 37L171 37L170 36L171 36L172 35L174 35ZM165 24L166 25L165 26L165 26L165 26L165 26L165 26L165 26L165 26L163 26L163 26L162 26L161 27L157 26L157 26L158 26L158 26L158 26L159 26L158 25L158 26L158 25L156 25L156 25L158 25L158 25L157 24L156 25L155 24L165 24ZM127 8L140 8L140 7L140 7L134 7L133 7L159 7L147 8L159 8L156 9L169 9L159 9L164 10L164 10L161 10L160 10L161 11L158 12L158 12L159 12L161 12L159 12L161 13L161 13L159 13L157 13L161 14L158 15L159 15L159 15L161 16L158 15L158 16L159 17L154 16L155 16L152 17L155 17L153 17L158 18L159 19L151 18L155 19L152 19L151 20L154 20L151 20L158 20L148 21L145 24L142 24L139 25L140 26L138 26L139 26L139 26L137 27L138 28L136 29L137 29L136 29L137 30L136 30L136 30L136 30L135 30L135 29L134 29L134 29L135 29L135 29L131 28L131 28L130 27L130 27L128 26L130 26L130 26L129 26L128 26L130 26L130 25L130 26L130 26L130 25L129 25L128 26L129 25L127 25L129 24L127 24L130 23L126 24L128 23L126 23L128 23L129 23L130 23L129 23L127 23L126 23L126 23L127 22L128 22L129 22L129 23L130 23L130 22L128 22L126 22L128 22L127 22L129 22L130 22L127 22L127 22L128 21L127 21L129 21L129 21L130 21L130 20L125 19L129 20L128 19L127 19L129 19L127 19L128 18L128 18L126 18L124 19L126 18L124 16L123 16L124 16L122 14L112 14L110 14L112 13L109 13L114 13L107 12L114 11L116 10L113 10L119 8L123 9L121 8L127 8ZM181 161L189 160L207 161L213 160L213 159L219 160L220 159L226 157L228 158L229 157L228 157L234 156L237 157L236 157L236 157L250 158L250 159L247 160L249 160L246 163L247 163L252 162L253 160L268 157L279 157L283 156L289 157L293 156L296 157L294 158L313 156L324 157L325 157L324 158L340 160L342 161L350 161L350 163L348 162L349 163L345 163L345 165L343 164L341 165L343 166L342 167L344 168L347 169L342 169L339 170L341 170L338 170L344 172L341 172L360 174L360 180L0 180L0 174L12 175L13 175L17 175L22 175L24 175L6 173L10 173L15 173L16 174L22 173L21 173L27 173L23 171L32 171L29 170L33 170L23 169L26 168L22 168L22 167L30 168L35 168L34 167L35 167L35 167L33 166L30 166L35 166L34 166L45 165L58 165L65 164L66 164L67 164L66 165L68 164L70 165L69 165L82 165L77 164L81 164L77 163L77 163L98 164L100 163L103 164L111 163L113 162L111 159L113 159L113 158L113 157L123 153L118 155L119 156L119 156L114 157L115 159L116 159L116 159L116 158L117 158L116 159L119 161L118 162L119 162L119 163L120 163L118 163L119 164L110 167L102 166L107 168L106 168L96 168L104 169L100 170L104 171L118 172L114 172L120 172L117 173L119 173L134 173L157 170L144 169L151 166L162 165L166 164L164 163L169 162L168 161L181 161ZM178 32L176 34L182 37L180 39L181 39L177 39L174 40L176 39L177 39L178 38L175 38L177 37L177 35L175 35L175 34L175 34L175 34L174 35L174 34L175 33L174 33L175 33L174 32L177 31L176 32L178 32ZM200 11L196 13L194 12L196 13L195 12L197 12L197 12L194 12L194 12L194 12L197 12L193 12L191 10L202 11L200 11ZM207 10L204 11L198 10L203 9L207 10ZM223 112L224 106L228 105L229 102L230 105L230 106L227 115L225 116L223 112ZM234 66L235 65L236 64L236 64L236 64L237 64L237 66L240 67L238 71L223 77L223 73L218 66L215 62L215 62L215 60L214 62L213 61L213 61L213 60L212 60L216 67L216 67L217 68L217 71L220 75L223 78L223 78L225 80L231 78L231 80L228 86L221 92L219 95L219 96L221 105L215 110L215 114L212 116L212 119L210 121L205 124L198 124L195 117L195 113L192 108L194 102L192 96L193 96L193 96L192 96L189 91L189 91L189 90L189 90L190 90L190 86L188 85L186 86L184 83L172 86L167 83L168 82L166 80L164 79L165 78L163 78L164 77L165 77L163 77L163 77L164 77L164 77L165 77L165 77L165 77L162 75L164 72L164 70L164 69L163 69L163 69L164 66L174 54L176 55L178 55L190 53L191 53L190 56L199 60L202 57L213 59L214 59L215 58L216 53L207 53L208 53L206 52L207 52L206 50L209 50L213 48L218 49L222 48L217 45L219 43L215 43L217 45L214 46L212 45L214 44L214 44L212 43L210 44L207 48L209 49L208 49L206 50L207 49L204 49L203 50L204 50L203 50L203 51L204 52L204 52L203 52L202 54L201 52L203 52L201 52L200 48L197 47L196 46L196 46L196 46L195 46L196 46L195 45L195 45L194 45L194 45L193 44L193 44L192 44L192 45L192 46L195 48L199 50L197 50L196 52L196 50L189 46L183 47L178 53L174 54L173 53L171 53L171 51L171 51L171 51L171 50L171 50L171 49L171 49L171 48L171 47L178 47L180 45L178 43L175 41L179 41L178 40L179 41L180 41L180 41L184 39L183 38L184 39L186 37L190 36L188 34L190 33L189 33L189 33L190 32L190 32L191 32L191 32L190 33L191 34L190 34L189 35L190 36L191 36L193 36L193 36L193 36L194 36L194 36L194 36L194 36L194 36L195 36L194 36L201 35L202 32L204 33L205 32L203 31L210 30L209 29L201 29L202 28L201 28L201 28L201 27L201 27L201 27L202 27L202 27L205 25L205 25L205 24L203 24L201 25L201 26L201 26L200 26L200 26L200 26L200 27L199 26L198 27L198 27L198 27L198 27L198 27L198 27L197 28L197 29L198 29L199 30L199 30L196 31L196 34L196 34L196 34L195 34L194 35L193 35L193 33L191 30L188 32L186 31L187 29L185 29L187 29L188 29L185 29L187 28L185 28L185 28L185 28L186 28L187 28L187 28L187 28L187 28L187 28L187 28L187 28L186 28L186 27L191 27L191 26L190 26L190 26L190 26L191 26L192 25L191 25L192 25L192 25L193 25L193 25L194 23L196 23L194 23L196 22L195 22L196 22L198 22L196 21L200 21L199 20L200 21L202 20L202 20L202 20L203 20L203 20L206 19L205 19L205 20L205 20L205 20L205 20L208 19L208 20L209 19L211 20L209 20L209 20L221 22L219 24L214 23L213 23L212 23L212 23L213 24L215 24L214 25L215 25L217 26L216 25L221 25L220 24L222 23L224 24L223 21L227 22L225 23L226 23L229 22L232 22L232 21L234 21L233 22L235 22L239 21L240 22L241 20L248 22L249 21L248 20L247 20L247 20L247 19L247 19L252 17L253 17L252 19L254 22L252 23L251 23L251 23L250 23L250 23L249 23L250 24L252 24L255 21L257 21L257 22L258 22L259 22L257 22L258 21L254 21L254 19L253 19L255 17L255 19L257 19L258 19L259 19L259 19L256 18L263 18L262 19L263 20L264 20L264 18L261 16L267 16L266 17L266 17L267 17L266 17L267 16L268 16L266 16L267 15L266 15L267 15L268 15L267 15L280 14L279 14L284 12L286 13L284 13L287 13L286 13L294 14L285 17L291 16L290 16L293 16L293 17L293 17L294 17L293 16L298 16L300 17L303 17L304 16L309 17L308 17L308 17L309 17L308 17L308 17L309 18L308 18L311 19L313 18L315 19L320 19L319 18L321 17L339 19L341 21L344 20L351 21L350 20L360 21L360 25L359 25L357 25L354 25L357 25L360 27L357 27L350 30L344 30L342 32L343 34L337 39L336 35L337 32L346 28L340 29L340 28L337 28L334 30L335 31L323 31L315 35L321 37L320 42L315 46L312 47L311 47L311 47L310 48L310 49L308 50L307 51L309 53L309 55L309 55L308 55L307 55L307 56L307 55L307 55L307 56L307 53L307 52L305 52L306 51L305 50L304 50L303 50L301 51L302 49L301 49L298 51L298 51L298 52L299 53L303 53L300 54L299 55L302 58L300 58L300 58L300 58L301 58L302 59L301 60L301 60L300 60L300 60L300 60L300 60L300 60L301 60L302 61L301 61L302 62L301 62L301 62L301 62L300 63L300 63L300 63L300 63L300 64L300 64L299 64L300 65L299 64L298 66L298 66L297 67L296 67L293 67L290 69L290 69L291 70L290 70L290 68L288 68L287 69L286 71L289 75L289 79L287 79L285 81L285 80L281 77L280 77L279 81L283 85L284 89L281 87L281 87L281 87L281 86L281 85L280 83L279 82L278 82L279 78L278 73L277 73L275 74L275 73L274 74L274 71L274 71L273 71L274 71L274 71L274 71L274 71L274 70L274 70L274 70L274 70L274 70L271 66L270 67L270 67L271 67L270 67L270 67L271 67L271 67L270 67L270 67L271 68L270 68L270 68L268 68L260 74L259 81L259 81L258 81L258 82L253 74L253 68L251 69L249 68L250 67L251 67L249 67L246 64L238 64L237 63L236 63L235 64L234 63L230 60L229 59L228 60L228 61L231 65L232 64L231 66L232 66L234 66L234 66ZM232 18L236 17L235 18L238 19L233 19L234 19L232 18ZM234 16L236 15L249 13L237 17L234 16ZM281 88L282 90L284 90L283 91L285 93L286 93L286 96L282 94L279 88L275 84L278 85L281 88ZM289 98L285 97L291 96L295 99L293 98L291 98L289 98ZM299 85L298 85L298 85L299 86L298 86L297 86L298 86L297 86L298 86L297 86L297 86L299 89L298 89L298 91L296 92L296 94L295 94L294 93L290 93L289 88L290 88L290 88L290 88L291 89L291 88L291 89L291 89L291 89L291 89L291 87L295 85L297 83L297 84L299 85ZM299 93L300 90L300 90L300 89L301 89L301 89L305 88L300 90L301 91L302 91L303 91L301 92L302 93L302 94L303 94L302 95L302 94L301 93L301 93L301 93L300 96L299 93ZM302 72L302 76L302 76L303 76L303 76L304 76L304 76L304 77L304 77L304 77L303 76L303 77L302 76L302 76L301 76L301 75L300 75L301 71L302 72ZM316 125L314 122L311 121L309 122L296 125L295 124L296 123L296 122L293 116L294 116L294 113L301 110L303 106L304 108L304 107L304 106L304 106L304 106L304 106L304 106L304 106L304 106L304 106L305 106L305 106L304 106L305 106L305 105L305 105L305 105L306 105L306 104L306 104L306 104L308 105L310 105L311 102L313 102L313 102L312 101L312 102L312 101L312 101L312 101L312 101L313 102L314 102L315 102L316 102L316 102L316 102L316 102L316 102L317 102L315 105L317 106L319 107L319 107L321 108L323 101L326 109L329 110L330 112L333 115L333 121L330 127L328 128L326 129L326 129L325 128L325 128L325 129L325 128L325 128L324 129L320 128L318 124L318 125L317 125L317 125L318 124L318 123L316 125ZM328 131L327 133L326 134L325 131L325 131L325 131L327 131L328 131ZM319 97L314 93L313 94L313 93L312 93L314 93L314 92L314 92L311 91L314 91L314 92L315 93L316 93L316 92L318 91L325 94L331 100L328 100L325 97L321 99L319 98L319 97ZM314 55L312 56L312 56L312 56L312 56L312 56L312 56L312 56L312 56L312 56L311 56L319 53L321 49L322 51L321 52L320 55L317 55L316 57L315 55L314 55ZM325 47L323 48L320 47L320 49L320 48L321 47L322 44L324 46L324 46L324 46L324 46L325 46L325 46L325 46L325 46L325 47ZM323 36L325 41L324 41L323 41L323 42L324 44L322 44L323 36ZM325 15L319 15L317 15L317 15L317 14L318 14L319 14L319 14L325 15ZM354 131L350 137L348 137L348 136L347 136L346 136L347 136L347 135L347 135L348 134L351 133L352 131L353 131L353 131L353 131L354 131L354 131L354 131L354 131L354 131L354 131ZM359 128L355 131L355 131L355 130L354 129L355 127L355 127L353 124L355 127L359 128Z' fill='%238fbf6a'/%3E%3C/svg%3E");
}
/* <<< ARAYUZ-0077 SILUETLER */


/* ══ 🔍 KRONOLOJİ ARAMASI (ARAMA-0930, 30 Eylül 2026) ══════════════════
   Emre: basit textbox + ayrı pencerede gelişmiş arama.
   Satır YALNIZ 26 px: listeden çaldığı her piksel gerekçelidir. */
#kr-arama-satir {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 3px 6px 0;
}
#kr-ara {
  flex: 1 1 auto;
  min-width: 0;                 /* flex çocuğu taşmasın (yan panel 280 px) */
  font-size: 11.5px;
  padding: 3px 6px;
  border: 1px solid #d8cba8;
  border-radius: 4px;
  background: #fffdf6;
}
#kr-ara:focus { outline: none; border-color: #8a6d2f; background: #fff; }
#kr-ara-gelismis {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  padding: 3px 7px;
  border: 1px solid #d8cba8;
  border-radius: 4px;
  background: #f3e6c8;
  cursor: pointer;
}
#kr-ara-gelismis:hover { background: #ffe9a8; }

/* Sonuç satırı — boşken HİÇ yer kaplamaz (#katman-not deseni). */
#kr-ara-sonuc {
  padding: 2px 8px 3px;
  font-size: 10.5px;
  color: #6b6152;
}
#kr-ara-sonuc:empty { display: none; }
#kr-ara-sonuc.bos { color: #a33; font-weight: 600; }

/* ── gelişmiş arama penceresi — #ayarlar-pencere ile AYNI desen ── */
#arama-pencere {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
#arama-pencere.gizli { display: none; }
#arama-kutu {
  position: relative;
  width: min(460px, calc(100vw - 24px));
  max-height: 80vh;
  overflow-y: auto;
  background: #fdf8ec;
  border: 1px solid var(--altin);
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#arama-kutu h3 { margin: 0 0 10px; font-size: 14px; }
#arama-kapat {
  position: absolute;
  top: 8px; right: 10px;
  border: none; background: none;
  font-size: 15px; cursor: pointer; color: #6b6152;
}
.arama-olcut {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 5px;
}
.arama-olcut select, .arama-olcut input {
  font-size: 11.5px;
  padding: 2px 4px;
  border: 1px solid #d8cba8;
  border-radius: 4px;
  background: #fff;
}
.arama-olcut .ar-alan { flex: 0 0 104px; }
.arama-olcut .ar-op   { flex: 0 0 92px; }
.arama-olcut .ar-metin { flex: 1 1 auto; min-width: 0; }
.arama-olcut .ar-sil {
  flex: 0 0 auto;
  border: none; background: none;
  cursor: pointer; color: #a33; font-size: 12px; padding: 0 3px;
}
#arama-ekle, #arama-temizle {
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid #d8cba8;
  border-radius: 4px;
  background: #f3e6c8;
  cursor: pointer;
}
#arama-ekle:hover, #arama-temizle:hover { background: #ffe9a8; }
#arama-baglac-satir {
  margin: 10px 0 6px;
  font-size: 11.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  border-top: 1px solid #e6dcc2;
  padding-top: 9px;
}
#arama-baglac-satir label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
#arama-onizleme {
  font-size: 11.5px;
  color: #6b6152;
  padding: 5px 0 9px;
}
#arama-onizleme.bos { color: #a33; font-weight: 600; }
#arama-dugmeler { display: flex; justify-content: flex-end; }

/* ==========================================================================
   GELİŞTİRİCİ NOTLARI (js/gelistirici.js) — kip yalnız deponun sahibinin
   token'ıyla açılır; `body.gelistirici` yoksa bu bölümün hiçbir parçası görünmez.
   ========================================================================== */
body:not(.gelistirici) .yalniz-gelistirici { display: none !important; }
#zaman-sarmal { position: relative; }
#gn-arac {
  position: absolute; left: 10px; bottom: 34px; z-index: 30;
  display: flex; gap: 3px; align-items: center; padding: 4px 6px;
  background: rgba(20, 24, 20, .88); border: 1px solid #39ff14; border-radius: 6px;
  box-shadow: 0 0 8px rgba(57, 255, 20, .35);
}
#gn-arac .gn-arac-bas { color: #39ff14; font-size: 14px; padding: 0 3px; }
#gn-arac button {
  min-width: 28px; height: 26px; padding: 0 6px; cursor: pointer; font-size: 14px;
  background: #222; color: #e8ffe0; border: 1px solid #3c5a35; border-radius: 4px;
}
#gn-arac button:hover { border-color: #39ff14; }
#gn-arac button.etkin { background: #39ff14; color: #111; border-color: #39ff14; }
#gn-sayi { margin-left: 3px; font-size: 11px; color: #39ff14; }
#gn-arac button.etkin #gn-sayi { color: #111; }
/* ⏳ bekleyen · ✉ okunmamış sayaçları: sıfırdan büyükse göze batar */
#gn-sahipsiz { margin-left: 3px; font: 700 11px/14px sans-serif; color: #fff; background: #0074d9; border-radius: 7px; padding: 0 5px; }
#gn-bekleyen, #gn-okunmamis { margin-left: 3px; font: 700 11px/14px sans-serif; color: #111;
  background: #ff851b; border-radius: 7px; padding: 0 5px; }
#gn-okunmamis { background: #ff4136; color: #fff; }
#gn-arac button.gn-sifir #gn-sahipsiz, #gn-arac button.gn-sifir #gn-bekleyen, #gn-arac button.gn-sifir #gn-okunmamis { background: transparent; color: #888; font-weight: 400; }
.gn-yeni { font-weight: 600; }
.gn-yeni-cip { color: #ff4136; }
.gn-filtre-kaldir { margin: 4px 0; font-size: 11px; }
.gn-postit {
  width: 14px; height: 14px; border-radius: 2px; cursor: pointer;
  background: #39ff14; border: 1px solid #0b3d02;
  box-shadow: 0 0 6px 2px rgba(57, 255, 20, .75);
}
.gn-postit:hover { transform: scale(1.35); }
#gn-oge-katman { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 3990; }
.gn-oge-postit { position: fixed; width: 12px; height: 12px; }
.gn-madde-postit {
  display: inline-block; margin-left: 5px; padding: 0 3px; border-radius: 2px;
  font-size: 11px; line-height: 15px; cursor: pointer; vertical-align: middle;
  box-shadow: 0 0 4px rgba(57, 255, 20, .8);
}
#gn-zaman { position: absolute; left: 0; right: 0; top: -7px; height: 6px; pointer-events: none; }
.gn-zaman-nokta {
  position: absolute; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  pointer-events: auto; cursor: pointer; box-shadow: 0 0 3px rgba(57, 255, 20, .9);
}
.gn-zaman-nokta:hover { transform: scale(1.8); }
body.gn-oge-kipi * { cursor: crosshair !important; }
.gn-oge-vurgu { outline: 2px dashed #39ff14 !important; outline-offset: 1px; }
#gn-form, #gn-panel, #gn-liste {
  position: fixed; z-index: 4000; background: #fdfbf4; color: #222;
  border: 2px solid #39ff14; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  font-size: 13px; padding: 12px 14px; box-sizing: border-box;
}
#gn-form { left: 50%; top: 18%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); }
#gn-panel { right: 16px; top: 70px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; }
#gn-liste { left: 16px; top: 70px; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; }
#gn-form textarea, #gn-form input, #gn-panel textarea {
  width: 100%; box-sizing: border-box; margin: 6px 0; font: inherit; padding: 6px;
  border: 1px solid #b9b39c; border-radius: 4px;
}
.gn-form-bas, .gn-panel-bas { font-weight: 700; margin-bottom: 4px; }
.gn-form-hedef { color: #555; margin-bottom: 4px; }
.gn-form-satir { display: block; margin: 4px 0; }
.gn-form-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.gn-form-dugmeler button, .gn-madde-dugme {
  padding: 4px 10px; border-radius: 4px; border: 1px solid #888; background: #fff; cursor: pointer;
}
.gn-form-dugmeler button.gn-ana { background: #1d7a0c; color: #fff; border-color: #1d7a0c; }
.gn-form-dugmeler button.gn-tehlike { border-color: #a33; color: #a33; }
.gn-madde-dugme { border-color: #2bd10f; margin-top: 4px; }
.gn-kapat { float: right; border: 0; background: none; font-size: 16px; cursor: pointer; }
.gn-durum { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; color: #111; }
/* Post-it kuyruğu: son yazan (sıra kimde) · notu alan oturum */
.gn-son, .gn-oturum { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; white-space: nowrap; margin-left: 4px; }
.gn-son-claude { background: #dbe9ff; color: #0b3d91; }
.gn-son-emre { background: #fff1c2; color: #6b4e00; }
.gn-son-yok { background: #eee; color: #555; }
.gn-oturum { background: #333; color: #fff; }
.gn-opus { background: #6f42c1; }
.gn-panel-tarih { color: #666; font-size: 12px; margin-bottom: 6px; }
.gn-metin { white-space: pre-wrap; padding: 6px 8px; border-radius: 4px; margin: 6px 0; }
.gn-emre { background: #fffbd1; border-left: 3px solid #e1c600; }
.gn-claude { background: #e9f3ff; border-left: 3px solid #3a7bd5; }
.gn-yazan { font-size: 11px; color: #666; margin-bottom: 2px; }
.gn-baglam { white-space: pre-wrap; font-size: 12px; color: #444; }
.gn-liste-satir { display: flex; gap: 6px; align-items: baseline; padding: 5px 2px; border-bottom: 1px solid #eee; cursor: pointer; }
.gn-liste-satir:hover { background: #f1fbe9; }
.gn-liste-tarih { color: #666; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gn-bos { color: #777; font-style: italic; }
#gn-bildirim {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 4100;
  background: #142014; color: #c9ffbd; border: 1px solid #39ff14; border-radius: 5px;
  padding: 6px 12px; font-size: 13px; display: none; max-width: calc(100vw - 32px);
}
#gn-bildirim.hata { background: #3a1010; color: #ffd0d0; border-color: #ff5050; }
/* Çok bölgeli not (GELISTIRICI-COKBOLGE-1016): bölge numarası haritada ve formda
   AYNI rozettir — eşleşme numarayla okunur; post-it'te bölge sayısı yazar. */
.gn-bolge-no {
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: 8px;
  background: #142014; color: #39ff14; border: 1px solid #39ff14; cursor: pointer;
  font: 700 10px/14px sans-serif; text-align: center; box-shadow: 0 0 4px rgba(57, 255, 20, .6);
}
.gn-bolge-no-satir { display: inline-block; cursor: default; }
.gn-postit.gn-postit-cok { width: 16px; height: 16px; font: 700 10px/14px sans-serif; color: #111; text-align: center; }
.gn-bolge-liste { margin: 4px 0; }
.gn-bolge-satir { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.gn-bolge-sil { margin-left: auto; border: 0; background: none; color: #a33; cursor: pointer; font-size: 13px; }
.gn-bolge-ekle { margin-top: 3px; padding: 2px 8px; border-radius: 4px; border: 1px dashed #2bd10f; background: #fff; cursor: pointer; }