/* ==========================================================================
   INTEL MAPPER — UI v2 (2026-10-06). Mevcut markup'ın ÜSTÜNE binen katman.
   Geri almak için index.html / mobile.html'deki ui2 link+script satırlarını kaldır.
   Tokenler: sıcak koyu zemin, tek vurgu (yeşil-turkuaz), yuvarlak köşeler, Nunito Sans.
   ========================================================================== */
:root {
  --u-bg: #121417;
  --u-surface: #1a1d22;
  --u-elev: #21252c;
  --u-border: rgba(255, 255, 255, 0.09);
  --u-border-strong: rgba(255, 255, 255, 0.16);
  --u-text: #ecebe6;
  --u-text-2: #c9ccc4;
  --u-muted: #9a9d95;
  --u-accent: #35d0a5;
  --u-accent-ink: #06231b;
  --u-accent-dim: rgba(53, 208, 165, 0.14);
  --u-amber: #f0b35a;
  --u-r: 14px;
  --u-font: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html.ui2 body { font-family: var(--u-font) !important; background: var(--u-bg) !important; color: var(--u-text) !important; }
html.ui2 button, html.ui2 input, html.ui2 a { font-family: var(--u-font); }
html.ui2 #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }

/* ortak: ikon düğmesi, segment, pill */
.ui2-ib { width: 38px; height: 38px; border: 1px solid var(--u-border-strong); border-radius: 11px; background: var(--u-elev); color: var(--u-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.ui2-ib:hover { border-color: rgba(255, 255, 255, 0.28); }
.ui2-ib svg { width: 18px; height: 18px; }
.ui2-btn { height: 38px; padding: 0 14px; border: 1px solid var(--u-border-strong); border-radius: 11px; background: var(--u-elev); color: var(--u-text); font: 700 12.5px var(--u-font); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ui2-btn svg { width: 16px; height: 16px; }
.ui2-btn.on { border-color: var(--u-accent); background: var(--u-accent-dim); }
.ui2-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--u-accent); color: var(--u-accent-ink); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* THEATRE SEGMENT (var olan #theatre-toggle taşınır, yeniden giydirilir) */
html.ui2 #theatre-toggle { display: inline-flex !important; gap: 2px !important; margin: 0 !important; width: auto !important; padding: 3px; background: var(--u-bg); border: 1px solid var(--u-border); border-radius: 11px; }
html.ui2 #theatre-toggle button { flex: none !important; height: 30px !important; padding: 0 13px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--u-muted) !important; font: 700 12.5px var(--u-font) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; display: inline-flex !important; align-items: center; gap: 0 !important; }
html.ui2 #theatre-toggle button img { display: none !important; }
html.ui2 #theatre-toggle button { transition: background .35s ease, color .25s ease, box-shadow .35s ease !important; }
/* aktif tiyatro: sitenin bilinen renk geçişi (ME teal, EE mavi) — Ozan: "değiştirdiğimiz yerdeki animasyon" */
html.ui2 #theatre-toggle button#btn-me.ui2-on { background: linear-gradient(135deg, #16a085, #1abc9c) !important; color: #fff !important; box-shadow: 0 0 12px rgba(22, 160, 133, 0.45) !important; }
html.ui2 #theatre-toggle button#btn-ee.ui2-on { background: linear-gradient(135deg, #2980b9, #3498db) !important; color: #fff !important; box-shadow: 0 0 12px rgba(52, 152, 219, 0.45) !important; }

/* ALERTS (var olan #alerts-btn) */
html.ui2 #alerts-btn { height: 38px; padding: 0 12px !important; border: 1px solid var(--u-border-strong) !important; border-radius: 11px !important; background: var(--u-elev) !important; color: var(--u-text) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; width: auto !important; min-width: 0 !important; }
html.ui2 #alerts-btn #alerts-ico { font-size: 14px !important; }

/* ÇEKİM MODLARI (X görselleri / daily brief: ?screenshot=1 → body.shotmode, anno-mode): ui2 öğeleri çıkmasın, harita tam kadraj */
html.ui2 body.shotmode #ui2-top, html.ui2 body.shotmode #ui2-bottom, html.ui2 body.shotmode #ui2-legend, html.ui2 body.shotmode #slider-ad, html.ui2 body.shotmode #ui2-feedhead,
html.ui2 body.anno-mode #ui2-top, html.ui2 body.anno-mode #ui2-bottom, html.ui2 body.anno-mode #ui2-legend, html.ui2 body.anno-mode #slider-ad,
html.ui2 body.shotmode #ui2-mtop, html.ui2 body.shotmode #ui2-nav, html.ui2 body.shotmode #ui2-latest { display: none !important; }
html.ui2-desktop body.shotmode #map, html.ui2-desktop body.anno-mode #map { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
html.ui2-desktop body.shotmode #sidebar, html.ui2-desktop body.anno-mode #sidebar { display: none !important; }

/* HABER PENCERESİ (#news-modal): kutu yerine KAPLAMA kaydırılır → 100vh/klavye/adres çubuğu farkı ne olursa olsun sığar (Ozan: 'modallar ekrana sığmıyor') */
html.ui2 #news-modal { align-items: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 16px 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; touch-action: pan-y; }
html.ui2 #modal-content { max-height: none !important; margin: 0 auto !important; overflow: visible !important; box-sizing: border-box; }
html.ui2-desktop #news-modal { padding-top: 72px !important; }
html.ui2-mobile #news-modal { padding-top: 14px !important; }
html.ui2-mobile #modal-content { width: calc(100% - 20px) !important; max-width: 560px !important; }
/* kaynağı olmayan olaylarda boş bağlantı düğmesi çıkmasın (Ozan: 'kırık linkleri atalım') */
html.ui2 a[href=""], html.ui2 a[href="https://x.com/i/status/"] { display: none !important; }

/* HABER PENCERESİ — SIKI DÜZEN (JS compactModal(): .ui2-cm sınıfı, tekrar eden kaynaklar/ID satırı/'via' satırı kaldırılır) */
html.ui2 #modal-content.ui2-cm { padding: 18px 18px 12px !important; border-radius: 16px !important; background: var(--u-surface) !important; border: 1px solid var(--u-border-strong) !important; font-family: var(--u-font) !important; position: relative; }
html.ui2-desktop #modal-content.ui2-cm { width: min(720px, calc(100% - 32px)) !important; max-width: 720px !important; }
html.ui2 #modal-content.ui2-cm h2 { font-size: 19px !important; line-height: 1.25 !important; padding-right: 36px; letter-spacing: 0 !important; }
html.ui2 #modal-content.ui2-cm > div:first-child { padding-bottom: 10px !important; margin-bottom: 12px !important; }
html.ui2 #modal-content.ui2-cm > div:first-child > div { margin-top: 6px !important; gap: 6px !important; }
html.ui2 #modal-content.ui2-cm > div:first-child > div:last-child { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--u-muted) !important; }
html.ui2 #modal-content.ui2-cm > div:first-child span { border-radius: 999px !important; font-size: 10.5px !important; }
html.ui2 #modal-content.ui2-cm > div:not(:first-child) { padding: 12px 12px 10px !important; margin-bottom: 12px !important; border-radius: 12px !important; background: var(--u-elev) !important; border: 1px solid var(--u-border) !important; }
html.ui2 #modal-content.ui2-cm > div:not(:first-child) > div:first-child { margin-bottom: 8px !important; }
html.ui2 #modal-content.ui2-cm div[style*="font-size:17px"], html.ui2 #modal-content.ui2-cm div[style*="font-size:15px"][style*="line-height:1.6"] { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 10px !important; color: var(--u-text) !important; }
html.ui2 #modal-content.ui2-cm img { max-height: 32vh !important; border-radius: 10px !important; }
html.ui2 #modal-content.ui2-cm video { max-height: 32vh !important; border-radius: 10px !important; }
html.ui2-mobile #modal-content.ui2-cm img, html.ui2-mobile #modal-content.ui2-cm video { max-height: 28vh !important; }
html.ui2 #modal-content.ui2-cm a[target="_blank"][style*="text-transform:uppercase"], html.ui2 #modal-content.ui2-cm a[target="_blank"][style*="letter-spacing"] { text-transform: none !important; letter-spacing: 0 !important; padding: 6px 11px !important; border-radius: 9px !important; font-size: 12px !important; color: var(--u-accent) !important; border: 1px solid var(--u-accent) !important; }
html.ui2 #modal-content.ui2-cm .ui2-src-section { margin-top: 8px !important; padding-top: 8px !important; }
html.ui2 #modal-content.ui2-cm .ui2-src-section > div:first-child { font-size: 9.5px !important; letter-spacing: 0.3px !important; }
html.ui2 #modal-content.ui2-cm .ui2-cm-close { position: absolute; top: 10px; right: 10px; z-index: 5; font-size: 20px; line-height: 1; }
html.ui2 #modal-content.ui2-cm .ui2-cm-time { font-size: 11px !important; color: var(--u-muted) !important; letter-spacing: 0 !important; text-transform: none !important; }
html.ui2 .ui2-approx-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px dashed rgba(245, 166, 35, 0.65); color: #f0b35a; font-size: 11px; font-weight: 700; order: 99; flex-basis: 100%; max-width: max-content; }
/* 2026-10-07: rozet satırı kapatma × altına girmesin; yaklaşık-konum notu kendi satırında */
html.ui2 #modal-content.ui2-cm > div:first-child > div { padding-right: 40px; }

/* AYARLAR — SIKI DÜZEN: sistem bilgisi satırları (sürüm/durum/kullanıcı/motor) gereksiz → gizli, bayraklar küçük */
html.ui2 #settings-modal div:has(> span[data-i18n="settings_version"]), html.ui2 #settings-modal div:has(> span[data-i18n="settings_status"]),
html.ui2 #settings-modal div:has(> span[data-i18n="settings_user"]), html.ui2 #settings-modal div:has(> span[data-i18n="settings_last_update"]),
html.ui2 #settings-modal div:has(> span[data-i18n="settings_engine"]), html.ui2 #settings-modal div:has(> #settings-last-update) { display: none !important; }
html.ui2 #settings-modal h2, html.ui2 #settings-modal .settings-section-title, html.ui2 #settings-modal h3 { letter-spacing: 0 !important; text-transform: none !important; }
html.ui2 #settings-modal h2 { font-size: 18px !important; padding-bottom: 10px !important; margin-bottom: 8px !important; }
html.ui2 #settings-modal [id^="flag-"] { width: 28px !important; height: auto !important; }
html.ui2-desktop #settings-modal > div { padding: 18px 18px 14px !important; max-width: 420px !important; }
html.ui2-desktop #settings-modal > div h3, html.ui2-desktop #settings-modal > div > div > div[style*="uppercase"] { font-size: 11px !important; }
html.ui2-mobile .settings-content { padding: 16px 16px 14px !important; width: 92% !important; max-width: 400px !important; border-radius: 18px !important; background: var(--u-surface) !important; }
html.ui2-mobile .settings-section-title { font-size: 11px !important; margin: 10px 0 6px !important; }

/* harita baloncuğu: ekranın üst/alt şeritlerine sığacak yükseklik; taşarsa JS haritayı kaydırır (fitPopup) */
html.ui2-desktop .event-popup .mapboxgl-popup-content { max-height: calc(100dvh - 150px) !important; }
html.ui2-mobile .event-popup .mapboxgl-popup-content { max-height: calc(100dvh - 250px) !important; }
html.ui2-mobile .event-popup .mapboxgl-popup-content img, html.ui2-mobile .event-popup .mapboxgl-popup-content video { max-height: 24vh !important; }

/* ==========================================================================
   MASAÜSTÜ + TABLET (index.html) — her genişlikte (tablet dikey ≤768 px dahil; dikey ekler aşağıda)
   ========================================================================== */
@media (min-width: 0px) {
  html.ui2-desktop #ui2-top { position: fixed; top: 0; left: 0; right: 0; height: 56px; box-sizing: border-box; z-index: 100005; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 16px; background: var(--u-surface); border-bottom: 1px solid var(--u-border); }
  html.ui2-desktop #ui2-top .ui2-logo { display: flex; align-items: center; gap: 9px; margin-right: 6px; }
  html.ui2-desktop #ui2-top .ui2-logo img { width: 26px; height: 26px; border-radius: 7px; }
  html.ui2-desktop #ui2-top .ui2-logo b { font-size: 16px; font-weight: 800; letter-spacing: 0.1px; }
  html.ui2-desktop #ui2-top .ui2-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--u-muted); margin-left: 4px; }
  html.ui2-desktop #ui2-top .ui2-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--u-accent); box-shadow: 0 0 0 3px var(--u-accent-dim); }
  html.ui2-desktop #ui2-top .ui2-sp { flex: 1; }
  html.ui2-desktop #settings-btn { position: static !important; width: 38px !important; height: 38px !important; border: 1px solid var(--u-border-strong) !important; border-radius: 11px !important; background: var(--u-elev) !important; font-size: 17px !important; box-shadow: none !important; flex: none; }
  html.ui2-desktop #auth-user-info { margin: 0 !important; width: auto !important; }
  /* Premium: updateUnlockBtn() bunu #theatre-toggle'ın hemen arkasına ekler → başlık çubuğunda sade dış çizgili düğme */
  html.ui2-desktop #unlock-premium-btn-left { display: inline-flex !important; align-items: center; height: 38px; padding: 0 14px !important; margin: 0 !important; border: 1px solid var(--u-accent) !important; border-radius: 11px !important; background: transparent !important; color: var(--u-accent) !important; font: 700 12.5px var(--u-font) !important; text-decoration: none; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
  html.ui2-desktop #unlock-premium-btn-left > div:first-child, html.ui2-desktop #unlock-premium-btn-left > div:last-child { display: none !important; }
  html.ui2-desktop #unlock-premium-btn-left > div { font-size: 12.5px !important; text-transform: none !important; }
  html.ui2-desktop #app-banner { display: none !important; }

  /* YERLEŞİM */
  html.ui2-desktop #sidebar { top: 56px !important; height: calc(100% - 56px) !important; width: 360px !important; background: var(--u-surface) !important; backdrop-filter: none !important; border-right: 1px solid var(--u-border) !important; box-shadow: none !important; }
  html.ui2-desktop #map { top: 56px !important; left: 360px !important; width: calc(100% - 360px) !important; bottom: 48px !important; }
  html.ui2-desktop .sidebar-header { display: none !important; }
  html.ui2-desktop #ui2-feedhead { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 11px; background: var(--u-surface); border-bottom: 1px solid var(--u-border); }
  html.ui2-desktop #ui2-feedhead b { font-size: 15px; font-weight: 800; }
  html.ui2-desktop #ui2-feedhead span { font-size: 12px; color: var(--u-muted); }
  html.ui2-desktop #ui2-feedhead #last-update { color: var(--u-muted); }
  html.ui2-desktop #ui2-sysver { display: none !important; }
  html.ui2-desktop #stats-panel { padding: 12px 16px !important; }

  /* HABER KARTI (mevcut DOM: [ikon][içerik]) */
  html.ui2-desktop .feed-item { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 16px !important; border-bottom: 1px solid var(--u-border) !important; }
  html.ui2-desktop .feed-item:hover { background: rgba(255, 255, 255, 0.035) !important; padding-left: 16px !important; }
  html.ui2-desktop .feed-item::before { display: none !important; }
  html.ui2-desktop .feed-item > div:first-child { position: relative; }
  html.ui2-desktop .feed-item > div:first-child img { width: 36px !important; height: 36px !important; }
  html.ui2-desktop .feed-item > div:last-child { min-width: 0; }
  html.ui2-desktop .feed-item > div:last-child > div:first-child { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; margin-bottom: 3px !important; }
  html.ui2-desktop .feed-item > div:last-child > div:first-child > div:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  html.ui2-desktop .feed-item > div:last-child > div:first-child > div:last-child { flex: none !important; white-space: nowrap; }
  html.ui2-desktop .feed-item .actor-badge { font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  html.ui2-desktop .feed-item .actor-badge + span { color: var(--u-muted) !important; border: 1px solid var(--u-border-strong) !important; border-radius: 999px !important; font-size: 10px !important; padding: 1px 6px !important; white-space: nowrap; margin-left: 0 !important; }
  html.ui2-desktop .feed-item > div:last-child > div:nth-child(2) { font-size: 13.5px !important; font-weight: 800 !important; color: var(--u-text) !important; }
  html.ui2-desktop .feed-item > div:last-child > div:nth-child(3) { font-size: 12.5px !important; color: var(--u-text-2) !important; line-height: 1.45 !important; }
  html.ui2-desktop .feed-item > div:last-child img { max-height: 150px !important; width: 100% !important; object-fit: cover !important; border-radius: 10px !important; }
  html.ui2-desktop .feed-item .feed-vid, html.ui2-desktop .feed-item video { border-radius: 10px !important; max-height: 190px; }
  html.ui2-desktop .feed-ad { display: block !important; border-left: 0 !important; background: var(--u-elev) !important; border-radius: 12px; margin: 10px 14px !important; padding: 12px !important; border-bottom: 0 !important; }
  html.ui2-desktop .feed-ad > div:first-child { color: var(--u-muted) !important; font-weight: 700 !important; }

  /* KATMAN PANELİ: kapalı başlar, başlıktaki Layers düğmesi açar */
  html.ui2-desktop #layer-control { top: 70px !important; right: 14px !important; width: 264px !important; max-height: calc(100vh - 132px) !important; background: var(--u-surface) !important; backdrop-filter: none !important; border: 1px solid var(--u-border-strong) !important; border-radius: var(--u-r) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; padding: 14px 14px 16px !important; display: none; }
  html.ui2-desktop.ui2-layers #layer-control { display: block; }
  html.ui2-desktop #auth-cta-block, html.ui2-desktop #ad-slot, html.ui2-desktop #layer-control a[href*="play.google.com"] { display: none !important; }
  html.ui2-desktop #layer-control .sidebar-close-btn { display: flex !important; align-items: center; justify-content: center; top: 10px !important; right: 10px !important; left: auto !important; width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--u-elev) !important; border: 1px solid var(--u-border) !important; color: var(--u-text) !important; font-size: 18px !important; }
  html.ui2-desktop .feed-item > div:last-child > div:nth-child(2) span { color: var(--u-muted) !important; border-color: var(--u-border-strong) !important; background: transparent !important; font-weight: 700 !important; font-size: 9px !important; }
  html.ui2-desktop #alerts-btn span[data-i18n="alerts"] { text-transform: none !important; letter-spacing: 0 !important; }   /* metin JS'te dile göre düzgün büyük/küçük harfe çevrilir */
  html.ui2-desktop .layer-toggle { border-radius: 10px !important; }

  /* ALT ŞERİT: zaman çizelgesi + günlük brief (haritanın altına sabit) */
  html.ui2-desktop #ui2-bottom { position: fixed; left: 360px; right: 0; bottom: 0; height: 48px; box-sizing: border-box; z-index: 5001; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--u-surface); border-top: 1px solid var(--u-border); }
  html.ui2-desktop #daily-brief-pill { position: static !important; transform: none !important; height: 32px; padding: 0 13px !important; border: 1px solid var(--u-accent) !important; border-radius: 10px !important; background: var(--u-accent-dim) !important; color: var(--u-text) !important; font: 800 12px var(--u-font) !important; letter-spacing: 0 !important; box-shadow: none !important; backdrop-filter: none !important; flex: none; }
  html.ui2-desktop #ui2-bottom .ui2-sep { width: 1px; height: 22px; background: var(--u-border-strong); flex: none; }
  html.ui2-desktop #time-slider-container { position: static !important; transform: none !important; align-items: center; gap: 12px; flex: 1; min-width: 0; width: auto !important; max-width: none !important; background: transparent !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; visibility: visible !important; }
  html.ui2-desktop #time-slider-container:not([style*="display: none"]) { display: flex !important; }   /* sayfa inline display:block basıyor */
  html.ui2-desktop #time-slider-container > div:first-child { display: contents; }
  html.ui2-desktop #time-slider-container > div:first-child > div:first-child { order: 1; flex: none; display: flex; align-items: center; gap: 8px; }
  html.ui2-desktop #time-slider-container > div:nth-child(2) { order: 2; flex: 1; position: relative; min-width: 120px; }   /* kaydırıcı kutusu (son çocuk <style>) */
  html.ui2-desktop #time-slider-container > div:first-child > div:last-child { order: 3; flex: none; }
  html.ui2-desktop #tl-label { display: none !important; }
  html.ui2-desktop #time-slider-date { font-size: 12.5px !important; font-weight: 800 !important; color: var(--u-text) !important; white-space: nowrap; }
  html.ui2-desktop #time-slider-container button { height: 30px; border: 1px solid var(--u-border-strong) !important; border-radius: 9px !important; background: var(--u-elev) !important; color: var(--u-text) !important; font: 700 11.5px var(--u-font) !important; padding: 0 10px !important; }
  html.ui2-desktop #time-slider { height: 4px !important; background: #3a4150 !important; border-radius: 2px !important; }
  html.ui2-desktop #time-slider::-webkit-slider-thumb { background: var(--u-accent) !important; border: 0 !important; width: 14px !important; height: 14px !important; box-shadow: 0 0 0 3px var(--u-accent-dim) !important; }
  html.ui2-desktop #ui2-tlhint { font-size: 12px; color: var(--u-muted); }
  html.ui2-desktop #time-slider-container:not([style*="display: none"]) ~ #ui2-tlhint { display: none; }

  /* LEJANT */
  html.ui2-desktop #ui2-legend { position: fixed; left: 374px; bottom: 60px; z-index: 5000; max-width: 240px; padding: 9px 11px; border-radius: 12px; background: rgba(26, 29, 34, 0.94); border: 1px solid var(--u-border-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); font-size: 12px; color: var(--u-text); }
  html.ui2-desktop #ui2-legend .ui2-lh { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 800; font-size: 11px; color: var(--u-muted); letter-spacing: 0.2px; }
  html.ui2-desktop #ui2-legend .ui2-lh svg { width: 14px; height: 14px; transition: transform .2s; }
  html.ui2-desktop #ui2-legend.ui2-closed .ui2-lh svg { transform: rotate(180deg); }
  html.ui2-desktop #ui2-legend.ui2-closed .ui2-lb { display: none; }
  html.ui2-desktop #ui2-legend .ui2-lb { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
  html.ui2-desktop #ui2-legend .ui2-lb div { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui2-desktop #ui2-legend .ui2-lb i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
  html.ui2-desktop #ui2-legend .ui2-lb i.ui2-hatch { background: repeating-linear-gradient(135deg, #e74c3c 0 2px, transparent 2px 5px); border: 1px solid #e74c3c; box-sizing: border-box; }

  /* HARİTA ÜSTÜ REKLAM (#slider-ad, 560×100 AdSense): alt şeridin hemen üstünde, kart gibi; dolmazsa gizli */
  html.ui2-desktop #slider-ad { position: fixed !important; bottom: 58px !important; left: calc(50% + 180px) !important; transform: translateX(-50%) !important; top: auto !important; width: 560px !important; height: 100px !important; max-width: calc(100% - 420px); border-radius: 12px !important; overflow: hidden; background: var(--u-surface) !important; border: 1px solid var(--u-border-strong) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); z-index: 4999 !important; }
  html.ui2-desktop #slider-ad:has(ins[data-ad-status="unfilled"]), html.ui2-desktop #slider-ad:empty { display: none !important; }
  html.ui2-desktop body.tabhide-left #slider-ad { left: 50% !important; }
  html.ui2-desktop #time-slider-container .lock-overlay { position: absolute; inset: 0; border-radius: 10px; }

  /* AYARLAR PENCERESİ: başlık çubuğunun üstünde, uzun içerik kaydırılır, kapatma düğmesi */
  html.ui2-desktop #settings-modal { z-index: 100010 !important; overflow-y: auto !important; align-items: flex-start !important; padding: 72px 0 32px !important; box-sizing: border-box; }
  html.ui2-desktop #settings-modal > div { position: relative; margin: 0 auto; background: var(--u-surface) !important; border: 1px solid var(--u-border-strong) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; }
  html.ui2-desktop #settings-modal .ui2-close { position: absolute; top: 10px; right: 10px; font-size: 20px; line-height: 1; z-index: 5; }
  html.ui2-desktop.ui2-settings #layer-control, html.ui2-desktop.ui2-settings #ui2-legend { visibility: hidden; }   /* ayarlar açıkken arkadaki panelin × işareti görünmesin (çift × şikâyeti) */
  html.ui2-desktop #settings-modal h2 { padding-right: 40px; letter-spacing: 0 !important; font-weight: 800 !important; }

  /* mapbox köşe yazıları */
  html.ui2-desktop .mapboxgl-ctrl-bottom-right { bottom: 2px; }
  html.ui2-desktop .mapboxgl-ctrl-bottom-left { display: none; }

  /* TABLET: kapakçıklar yok, başlıktaki Feed/Layers düğmeleri */
  html.ui2-desktop #tab-left-toggle, html.ui2-desktop #tab-right-toggle { display: none !important; }
  html.ui2-desktop #ui2-feedbtn { display: none; }
  html.ui2-desktop body.tabhide-left #map { left: 0 !important; width: 100% !important; }
  html.ui2-desktop body.tabhide-left #ui2-bottom { left: 0; }
  html.ui2-desktop body.tabhide-left #ui2-legend { left: 14px; }
  html.ui2-desktop body.tabhide-left #sidebar { transform: translateX(-105%); }
}
@media (min-width: 769px) and (max-width: 1160px), (min-width: 1161px) and (pointer: coarse) {
  html.ui2-desktop #ui2-feedbtn { display: inline-flex; }
  html.ui2-desktop #sidebar { width: 320px !important; }
  html.ui2-desktop #map { left: 320px !important; width: calc(100% - 320px) !important; }
  html.ui2-desktop #ui2-bottom { left: 320px; }
  html.ui2-desktop #ui2-legend { left: 334px; }
  html.ui2-desktop #layer-control { display: block; }   /* tablet: görünürlük tabhide-right ile */
  html.ui2-desktop #ui2-top .ui2-live { display: none; }
  html.ui2-desktop #ui2-top { gap: 10px; }
}
@media (min-width: 769px) and (max-width: 1160px) {
  html.ui2-desktop #theatre-toggle button { padding: 0 10px !important; font-size: 12px !important; }
  html.ui2-desktop #alerts-btn span[data-i18n="alerts"] { display: none; }
  html.ui2-desktop #alerts-btn { width: 38px !important; padding: 0 !important; justify-content: center; }
}

/* TABLET DİKEY (index.html ≤768 px; sayfanın kendi mobil CSS'i burada devreye giriyordu = "eski tasarım") */
@media (max-width: 768px) {
  html.ui2-desktop #mobile-menu-btn, html.ui2-desktop #mobile-layer-btn, html.ui2-desktop #tab-left-toggle, html.ui2-desktop #tab-right-toggle, html.ui2-desktop #slider-ad { display: none !important; }
  html.ui2-desktop #map { position: fixed !important; top: 56px !important; left: 0 !important; width: 100% !important; height: calc(100dvh - 104px) !important; bottom: auto !important; }
  html.ui2-desktop #sidebar { position: fixed !important; top: 56px !important; left: 0 !important; width: 86% !important; max-width: 380px !important; height: calc(100dvh - 104px) !important; z-index: 2100 !important; background: var(--u-surface) !important; transform: translateX(-105%) !important; transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.45) !important; }
  html.ui2-desktop body:not(.tabhide-left) #sidebar { transform: none !important; }
  html.ui2-desktop #sidebar .sidebar-close-btn { display: flex !important; align-items: center; justify-content: center; position: absolute !important; top: 7px !important; right: 10px !important; left: auto !important; width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--u-elev) !important; border: 1px solid var(--u-border) !important; color: var(--u-text) !important; font-size: 18px !important; z-index: 30; }
  html.ui2-desktop #ui2-feedhead { padding-right: 48px; }
  html.ui2-desktop #ui2-feedbtn { display: inline-flex; }
  html.ui2-desktop #ui2-top { gap: 8px; padding: 0 10px; }
  html.ui2-desktop #ui2-top .ui2-live, html.ui2-desktop #ui2-top .ui2-logo b { display: none; }
  html.ui2-desktop #ui2-bottom { left: 0; }
  html.ui2-desktop #ui2-legend { left: 14px; max-width: 200px; }
  html.ui2-desktop #layer-control { position: fixed !important; top: 70px !important; right: 14px !important; left: auto !important; bottom: auto !important; width: min(300px, calc(100% - 28px)) !important; max-width: none !important; height: auto !important; max-height: calc(100dvh - 140px) !important; transform: none !important; opacity: 1 !important; visibility: visible !important; display: none; }
  html.ui2-desktop:not(.ui2-layers) #layer-control { display: none !important; }   /* sayfanın mobil CSS'i display:block basıyor */
  html.ui2-desktop.ui2-layers #layer-control { display: block !important; }
  html.ui2-desktop #theatre-toggle button { padding: 0 9px !important; font-size: 11.5px !important; }
  html.ui2-desktop #alerts-btn { width: 38px !important; padding: 0 !important; justify-content: center; }
  html.ui2-desktop #alerts-btn span[data-i18n="alerts"] { display: none; }
  html.ui2-desktop #unlock-premium-btn-left { padding: 0 10px !important; }
  html.ui2-desktop #settings-modal { padding-top: 64px !important; }
}

/* ==========================================================================
   TELEFON (mobile.html)
   ========================================================================== */
@media (max-width: 768px) {
  html.ui2-mobile #mobile-menu-btn, html.ui2-mobile #mobile-layer-btn { display: none !important; }
  html.ui2-mobile #app-banner { display: none !important; }

  /* ÜST SATIR: logo, ME/EE, ayarlar */
  html.ui2-mobile #ui2-mtop { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 1510; display: flex; align-items: center; gap: 8px; }
  html.ui2-mobile #ui2-mtop .ui2-logo { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px 0 9px; border-radius: 12px; background: rgba(26, 29, 34, 0.94); border: 1px solid var(--u-border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); flex: none; }
  html.ui2-mobile #ui2-mtop .ui2-logo img { width: 22px; height: 22px; border-radius: 6px; }
  html.ui2-mobile #ui2-mtop .ui2-logo b { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
  html.ui2-mobile #ui2-nav #alerts-btn span:not(#alerts-ico) { font-size: 10.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 700; }
  html.ui2-mobile .collapsed-content > div:last-child > div:nth-child(2) span { color: var(--u-muted) !important; border-color: var(--u-border-strong) !important; background: transparent !important; font-weight: 700 !important; font-size: 9px !important; }
  html.ui2-mobile #ui2-mtop #theatre-toggle { height: 40px; box-sizing: border-box; background: rgba(26, 29, 34, 0.94); border-color: var(--u-border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
  html.ui2-mobile #ui2-mtop #theatre-toggle button { height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }
  html.ui2-mobile #ui2-mtop .ui2-sp { flex: 1; }
  html.ui2-mobile #mobile-settings-btn { position: static !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 12px !important; border: 1px solid var(--u-border-strong) !important; background: rgba(26, 29, 34, 0.94) !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 17px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important; backdrop-filter: none !important; }
  html.ui2-mobile body.sheet-open #ui2-mtop { display: none; }

  /* SON OLAY ŞERİDİ */
  html.ui2-mobile #ui2-latest { position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 1505; max-width: calc(100% - 24px); display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(26, 29, 34, 0.94); border: 1px solid var(--u-border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-size: 12px; color: var(--u-text); cursor: pointer; }
  html.ui2-mobile #ui2-latest.ui2-show { display: flex; }
  html.ui2-mobile #ui2-latest i { width: 7px; height: 7px; border-radius: 50%; background: var(--u-accent); flex: none; }
  html.ui2-mobile #ui2-latest b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui2-mobile #ui2-latest span { color: var(--u-muted); flex: none; }
  html.ui2-mobile body.sheet-open #ui2-latest { display: none; }

  /* ALT GEZİNME */
  html.ui2-mobile #ui2-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1520; display: flex; justify-content: space-around; align-items: stretch; padding: 4px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(26, 29, 34, 0.97); border-top: 1px solid var(--u-border); backdrop-filter: blur(10px); }
  html.ui2-mobile #ui2-nav > * { flex: 1; height: 54px; border: 0 !important; background: transparent !important; color: var(--u-muted) !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 3px !important; font: 700 10.5px var(--u-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important; position: static !important; transform: none !important; box-shadow: none !important; border-radius: 10px !important; min-width: 0 !important; width: auto !important; cursor: pointer; }
  html.ui2-mobile #ui2-nav > *.ui2-on { color: var(--u-accent) !important; }
  html.ui2-mobile #ui2-nav svg { width: 22px; height: 22px; }
  html.ui2-mobile #ui2-nav #alerts-ico { font-size: 20px !important; line-height: 1; }
  html.ui2-mobile #ui2-nav #daily-brief-pill span { font-size: 10.5px !important; }
  html.ui2-mobile #ui2-nav .ui2-badge { position: absolute; margin-left: 26px; margin-top: -30px; }
  html.ui2-mobile #daily-brief-pill { font-family: var(--u-font) !important; }
  html.ui2-mobile body.sheet-open #ui2-nav { z-index: 2200; }

  /* ZAMAN ÇİZELGESİ: alt gezinmenin üstünde ince şerit */
  html.ui2-mobile #time-slider-container { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; background: rgba(26, 29, 34, 0.94) !important; border: 1px solid var(--u-border-strong) !important; border-radius: 12px !important; padding: 7px 10px !important; align-items: center; gap: 10px; }
  html.ui2-mobile #time-slider-container:not([style*="display: none"]) { display: flex !important; }
  html.ui2-mobile #time-slider-container > div:first-child { display: contents; }
  html.ui2-mobile #time-slider-container > div:first-child > div:first-child { order: 1; flex: none; display: flex; align-items: center; gap: 6px; }
  html.ui2-mobile #time-slider-container > div:nth-child(2) { order: 2; flex: 1; position: relative; min-width: 60px; }
  html.ui2-mobile #time-slider-container > div:first-child > div:last-child { order: 3; flex: none; }
  html.ui2-mobile #tl-label { display: none !important; }
  html.ui2-mobile #time-slider-date { font-size: 11.5px !important; font-weight: 800 !important; white-space: nowrap; }
  html.ui2-mobile #time-slider-container button { height: 28px; border: 1px solid var(--u-border-strong) !important; border-radius: 8px !important; background: var(--u-elev) !important; color: var(--u-text) !important; font: 700 11px var(--u-font) !important; padding: 0 8px !important; }
  html.ui2-mobile #time-slider { height: 4px !important; background: #3a4150 !important; }
  html.ui2-mobile #time-slider::-webkit-slider-thumb { background: var(--u-accent) !important; border: 0 !important; width: 14px !important; height: 14px !important; }

  /* ALT SAYFA (haber) */
  html.ui2-mobile #sidebar { height: 72vh !important; max-height: 72vh !important; background: var(--u-surface) !important; backdrop-filter: none !important; border-top: 1px solid var(--u-border-strong) !important; border-radius: 22px 22px 0 0 !important; padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  html.ui2-mobile #sidebar::before { background: rgba(255, 255, 255, 0.22) !important; }
  html.ui2-mobile .sidebar-header { background: var(--u-surface) !important; border-bottom: 1px solid var(--u-border) !important; padding: 4px 16px 10px !important; }   /* yapışkan başlık: altından içerik görünmesin */
  html.ui2-mobile .sidebar-header .logo-container, html.ui2-mobile .sidebar-header [data-i18n="subtitle"] { display: none !important; }
  html.ui2-mobile #ui2-sheethead { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; }
  html.ui2-mobile #ui2-sheethead b { font-size: 16px; font-weight: 800; }
  html.ui2-mobile #ui2-sheethead span { font-size: 12px; color: var(--u-muted); }
  html.ui2-mobile #auth-container { margin: 0 !important; gap: 8px !important; }
  html.ui2-mobile #auth-login-btn { background: transparent !important; border: 1px solid var(--u-accent) !important; border-radius: 10px !important; padding: 7px 0 !important; }
  html.ui2-mobile #auth-login-btn span { color: var(--u-accent) !important; font-weight: 800 !important; }
  html.ui2-mobile #auth-login-btn svg path { fill: var(--u-accent) !important; }
  html.ui2-mobile #auth-verify-btn, html.ui2-mobile #auth-user-info { background: var(--u-elev) !important; border-color: var(--u-border-strong) !important; border-radius: 10px !important; }
  html.ui2-mobile #stats-panel { padding: 10px 16px !important; }
  html.ui2-mobile #layer-control { height: 70vh !important; max-height: 70vh !important; background: var(--u-surface) !important; backdrop-filter: none !important; border-top: 1px solid var(--u-border-strong) !important; border-radius: 22px 22px 0 0 !important; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; }
  html.ui2-mobile #auth-cta-block { display: none !important; }
  html.ui2-mobile #layer-control .sidebar-close-btn, html.ui2-mobile #sidebar .sidebar-close-btn { display: none !important; }   /* tek dış × (#im-sheet-close) yeter; iç × ile çift görünüyordu */

  /* HABER KARTI (mobil DOM: .collapsed-content [ikon][içerik]) */
  html.ui2-mobile .feed-item { padding: 13px 16px !important; border-bottom: 1px solid var(--u-border) !important; }
  html.ui2-mobile .feed-item::before { display: none !important; }
  html.ui2-mobile .feed-item .feed-icon { width: 34px !important; height: 34px !important; }
  html.ui2-mobile .collapsed-content > div:last-child > div:first-child { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; }
  html.ui2-mobile .collapsed-content > div:last-child > div:first-child > div:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  html.ui2-mobile .collapsed-content > div:last-child > div:first-child > span { flex: none; white-space: nowrap; }
  html.ui2-mobile .feed-item .actor-badge { font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  html.ui2-mobile .feed-item .actor-badge + span { color: var(--u-muted) !important; border: 1px solid var(--u-border-strong) !important; border-radius: 999px !important; font-size: 10px !important; padding: 1px 6px !important; white-space: nowrap; margin-left: 0 !important; }
  html.ui2-mobile .collapsed-content > div:last-child > div:nth-child(2) { font-size: 13.5px !important; font-weight: 800 !important; color: var(--u-text) !important; }
  html.ui2-mobile .collapsed-summary { font-size: 12.5px !important; color: var(--u-text-2) !important; line-height: 1.45 !important; }
  html.ui2-mobile .feed-inline-media { border-radius: 10px !important; max-height: 190px !important; object-fit: cover !important; width: 100% !important; margin-top: 8px; }
  html.ui2-mobile .feed-ad { border-left: 0 !important; background: var(--u-elev) !important; border-radius: 12px; margin: 10px 14px !important; padding: 12px !important; border-bottom: 0 !important; }
  html.ui2-mobile .ui2-appcard { margin: 10px 14px; padding: 11px 12px; border: 1px solid var(--u-border-strong); border-radius: 12px; background: var(--u-elev); display: flex; align-items: center; gap: 10px; font-size: 12px; }
  html.ui2-mobile .ui2-appcard img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
  html.ui2-mobile .ui2-appcard div { flex: 1; min-width: 0; line-height: 1.35; }
  html.ui2-mobile .ui2-appcard div b { font-weight: 800; }
  html.ui2-mobile .ui2-appcard div span { color: var(--u-muted); }
  html.ui2-mobile .ui2-appcard a { height: 30px; padding: 0 11px; border: 1px solid var(--u-accent); border-radius: 9px; color: var(--u-accent); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; text-decoration: none; flex: none; }
  html.ui2-mobile .ui2-appcard button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--u-muted); font-size: 18px; line-height: 1; flex: none; }
  html.ui2-mobile #daily-brief-pill:not(#ui2-nav #daily-brief-pill) { display: none !important; }
}