/*
 * UdesQuake canlı harita (yeni tasarım).
 * Renk: sitenin paleti; lacivert zemin, turuncu vurgu. Yeşil yalnızca "canlı/çalışıyor",
 *   kırmızı yalnızca "kritik"; deprem işaretlerinin derinlik renkleri veri kodudur, değişmez.
 * Yazı: rakam ve başlıklar Space Grotesk (marka), arayüz metni sistem fontu (yoğun bilgide okunaklı).
 * Etiketler normal yazım; büyük harf ve geniş aralık yok (bağırmasın, taransın).
 * Cam efekti yalnızca harita üstündeki iki yüzeyde (açıklama ve stil seçici): harita altından okunur kalsın.
 * Hareket: canlı nokta, seçilen depremin dalgası ve yeni kayıt vurgusu; azaltılmış harekette kapalı.
 */
:root {
  --bg-0: #070b14;
  --bg-1: #0b1220;
  --bg-2: #0f1828;
  --bg-3: #162133;
  --line: #1c2638;
  --line-soft: #141d2d;
  --txt-0: #e6ebf3;
  --txt-1: #a9b4c6;
  --txt-2: #8391a8;
  --accent: #f97316;
  --accent-rgb: 249, 115, 22;
  --accent-dim: #9a3f0c;
  --on-accent: #0b0f19;
  --ok: #22c55e;
  --warn: #f59e0b;
  --crit: #ef4444;
  --purple: #a78bfa;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);
  --glass: rgba(11, 18, 32, .86);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --header-h: 60px;
  --rail-h: 64px;
}
:root[data-theme="light"] {
  --bg-0: #eef2f7; --bg-1: #ffffff; --bg-2: #f6f8fb; --bg-3: #eaeff6;
  --line: #d6deea; --line-soft: #e6ecf4;
  --txt-0: #0f172a; --txt-1: #42506a; --txt-2: #5f6d85;
  /* Açık zeminde okunur turuncu (beyaz üstünde 5:1). */
  --accent: #c2410c; --accent-rgb: 194, 65, 12; --accent-dim: #fdba74; --on-accent: #ffffff;
  --glass: rgba(255, 255, 255, .92);
  --shadow: 0 16px 40px rgba(15, 23, 42, .14);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--bg-0); color: var(--txt-0); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr);
  width: 100%; height: 100vh; height: 100dvh; min-width: 0; min-height: 0; overflow: hidden;
}

/* ── Üst çubuk ── */
.hdr {
  display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden;
  padding: 0 16px; background: var(--bg-1); border-bottom: 1px solid var(--line); z-index: 60;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; color: var(--txt-0); min-height: 44px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand .bt { display: flex; flex-direction: column; line-height: 1.1; }
.brand .bt b { font: 700 16px var(--display); }
.brand .bt small { color: var(--txt-2); font-size: 12px; }

.hdr-stats { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; border-left: 1px solid var(--line); }
.hdr-stats::-webkit-scrollbar { display: none; }
/* Göstergeler kutu değil: ince çizgiyle ayrılmış tek satır, rakam önde. */
.kpi { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; max-width: 190px; padding: 0 16px; border-right: 1px solid var(--line); white-space: nowrap; }
.kpi b { font: 600 16px/1.15 var(--display); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.kpi span { font-size: 12px; color: var(--txt-2); }
.kpi.crit b { color: var(--crit); }
.kpi.warn b { color: var(--warn); }
.kpi.ok b { color: var(--txt-0); }

.hdr-right { margin-left: auto; display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-1); font-size: 15px; transition: border-color .15s, color .15s;
}
.icon-btn:hover { color: var(--txt-0); border-color: var(--txt-2); }
.icon-btn.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); }

.live-pill {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ok); background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3);
}
.live-pill.stale { color: var(--warn); background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); }
.live-pill.down { color: var(--crit); background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35); }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
.live-pill span { text-transform: lowercase; }
.live-pill span::first-letter { text-transform: uppercase; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%,100% { box-shadow: 0 0 0 7px transparent; } }

/* ── Gövde: filtre | harita | liste ── */
.body { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; min-width: 0; min-height: 0; overflow: hidden; }
.panel {
  position: relative; min-width: 0; min-height: 0; height: 100%; background: var(--bg-1);
  border-right: 1px solid var(--line); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.panel.right { border-right: 0; border-left: 1px solid var(--line); }

.sec { border-bottom: 1px solid var(--line); }
.sec-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; font: 600 14px var(--display); color: var(--txt-0); text-align: left; }
.sec-h:hover { color: var(--accent); }
.sec-h .chev { margin-left: auto; color: var(--txt-2); font-size: 10px; transition: transform .2s; }
.sec.collapsed .chev { transform: rotate(-90deg); }
.sec.collapsed .sec-b { display: none; }
.sec-b { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.lbl { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--txt-1); }
.lbl b { font: 600 13px var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 34px; padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-1); transition: border-color .15s, color .15s; }
.chip:hover { color: var(--txt-0); border-color: var(--txt-2); }
.chip.on { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .7); color: var(--accent); font-weight: 600; }
.chip .n { opacity: .7; font-size: 11px; margin-left: 4px; font-variant-numeric: tabular-nums; }

.range { display: flex; align-items: center; gap: 10px; min-height: 24px; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 3px; background: var(--bg-3); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-1); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-1); cursor: grab; }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.txtin, select.txtin { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-0); font-size: 14px; outline: none; }
.txtin:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.txtin::placeholder { color: var(--txt-2); }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; cursor: pointer; }
.switch span { font-size: 14px; color: var(--txt-1); display: flex; align-items: center; gap: 10px; }
.switch:hover span { color: var(--txt-0); }
.switch .sw { width: 38px; height: 22px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); position: relative; flex: 0 0 auto; transition: background .18s, border-color .18s; }
.switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--txt-2); transition: transform .18s, background .18s; }
.switch.on .sw { background: rgba(var(--accent-rgb), .25); border-color: var(--accent); }
.switch.on .sw::after { transform: translateX(16px); background: var(--accent); }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

.btn { min-height: 40px; padding: 9px 14px; border-radius: var(--radius-sm); font: 600 13px var(--display); background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-0); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { border-color: var(--txt-2); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }
.btn i { color: var(--accent); }
.btn.primary i { color: inherit; }

/* ── Harita ── */
/* Leaflet katmanları (z 400+) harita alanının içinde kalsın; telefonda açılan paneller üstte görünsün. */
.map-wrap { position: relative; isolation: isolate; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-0); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-0); }
.leaflet-container { background: var(--bg-0) !important; font-family: var(--sans) !important; }
.leaflet-control-attribution { background: var(--glass) !important; color: var(--txt-2) !important; font-size: 11px !important; }
.leaflet-control-attribution a { color: var(--txt-1) !important; }
.leaflet-bar { border: 1px solid var(--line) !important; border-radius: 10px !important; overflow: hidden; box-shadow: var(--shadow) !important; }
.leaflet-bar a { width: 38px !important; height: 38px !important; line-height: 38px !important; background: var(--bg-1) !important; color: var(--txt-0) !important; border-color: var(--line) !important; }
.leaflet-bar a:hover { background: var(--bg-3) !important; }

.uq-marker-label { width: max-content; padding: 2px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #f8fafc; background: rgba(7,11,20,.82); font: 700 11px var(--display); line-height: 1.15; white-space: nowrap; }
/* En yeni deprem: iki kırmızı halka (kritik rengi, yalnız burada). */
.uq-latest-event-icon { background: transparent !important; border: 0 !important; }
.uq-latest-pulse { position: relative; width: 100%; height: 100%; pointer-events: none; }
.uq-latest-pulse::before, .uq-latest-pulse::after, .uq-latest-pulse span, .uq-latest-pulse i { content: ""; position: absolute; inset: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid #ef4444; border-radius: 50%; }
.uq-latest-pulse::before { animation: uqLatestPulse 2.4s cubic-bezier(.12,.65,.25,1) infinite; }
.uq-latest-pulse::after { animation: uqLatestPulse 2.4s cubic-bezier(.12,.65,.25,1) .8s infinite; }
.uq-latest-pulse span { width: 9px; height: 9px; margin: -4.5px; border: 0; background: #ef4444; }
.uq-latest-pulse i { display: none; }
@keyframes uqLatestPulse { 0% { transform: scale(.75); opacity: 1; } 76%,100% { transform: scale(4); opacity: 0; } }

.map-ov { position: absolute; z-index: 500; pointer-events: none; }
.map-ov > * { pointer-events: auto; }
.ov-tl { top: 12px; left: 12px; display: flex; flex-direction: column; gap: 8px; }
.ov-bl { bottom: 14px; left: 12px; right: 12px; }
.ov-br { bottom: 14px; right: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.glass { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ov-tl .icon-btn { background: var(--bg-1); box-shadow: var(--shadow); }

.styles-pop { padding: 8px; display: none; grid-template-columns: repeat(2, 1fr); gap: 6px; max-width: 300px; }
.styles-pop.open { display: grid; }
.style-item { min-height: 36px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--txt-1); background: var(--bg-2); border: 1px solid transparent; text-align: left; }
.style-item:hover { color: var(--txt-0); }
.style-item.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); font-weight: 600; }

.legend { padding: 12px 14px; font-size: 12px; max-width: 230px; }
.legend h5 { margin: 0 0 8px; font: 600 12px var(--display); color: var(--txt-1); }
.legend .row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--txt-1); }
.legend .sw { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.legend .mags { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.legend .mags div { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--txt-2); font-size: 11px; }
.legend .mags i { display: block; border-radius: 50%; background: rgba(var(--accent-rgb), .25); border: 1.4px solid var(--accent); }
.legend-toggle { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; font: 600 13px var(--display); color: var(--txt-0); min-height: 28px; }
.legend-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend .legend-body { margin-top: 8px; }
.legend.folded .legend-body { display: none; }
.legend.folded .chev { transform: rotate(-90deg); }

.scrub { padding: 10px 14px 12px; width: min(680px, 100%); display: none; }
.scrub.open { display: block; }
.scrub-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.scrub-time { font: 600 14px var(--display); color: var(--txt-0); font-variant-numeric: tabular-nums; }
.scrub-meta { font-size: 12px; color: var(--txt-2); margin-left: auto; font-variant-numeric: tabular-nums; }
.play-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.speeds { display: flex; gap: 4px; }
.speeds button { min-height: 32px; padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--txt-2); background: var(--bg-2); }
.speeds button.on { color: var(--accent); background: rgba(var(--accent-rgb), .12); }

.toast-wrap { position: fixed; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; background: var(--bg-1); color: var(--txt-0); border: 1px solid var(--line); box-shadow: var(--shadow); animation: drop .3s ease-out; }
.toast.alert { border-color: rgba(239, 68, 68, .55); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }

/* ── Deprem listesi ── */
.list-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; align-items: center; min-width: 0; padding: 10px 16px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
/* Başlık ve sayı alt alta: dar panelde başlık kesilmesin. */
.list-head b { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px var(--display); }
.list-head .cnt { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.list-head .icon-btn, .list-head select { grid-row: 1 / span 2; }
.list-head select { flex: 0 1 104px; min-width: 0; max-width: 104px; min-height: 36px; font-size: 13px; padding: 6px 8px; }
.list-head .icon-btn { width: 36px; height: 36px; }

.ev { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.ev:hover { background: var(--bg-2); }
.ev.sel { background: rgba(var(--accent-rgb), .08); box-shadow: inset 3px 0 0 var(--accent); }
.ev.new { animation: flashin 2.4s ease-out; }
@keyframes flashin { 0%,18% { background: rgba(239, 68, 68, .2); } 100% { background: transparent; } }
.ev .mag { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font: 700 17px var(--display); font-variant-numeric: tabular-nums; color: #fff; }
.ev .m { min-width: 0; }
.ev .m b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .m span { font-size: 12px; color: var(--txt-2); display: flex; gap: 8px; margin-top: 3px; flex-wrap: wrap; align-items: center; }
.ev .t { font-size: 12px; color: var(--txt-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-tag { padding: 1px 6px; border-radius: 5px; background: var(--bg-3); font-size: 11px; font-weight: 600; color: var(--txt-1); }
.multi-tag { color: var(--ok); background: rgba(34, 197, 94, .12); }
.empty { padding: 40px 20px; text-align: center; color: var(--txt-2); font-size: 14px; line-height: 1.7; }

/* ── Ayrıntı ── */
.detail { position: absolute; inset: 0; background: var(--bg-1); z-index: 20; overflow-y: auto; display: none; }
.detail.open { display: block; }
.det-hero { padding: 18px 16px; border-bottom: 1px solid var(--line); }
.det-back { min-height: 40px; font-size: 13px; color: var(--txt-1); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.det-back:hover { color: var(--accent); }
.det-mag { display: flex; align-items: center; gap: 14px; }
.det-mag .big { font: 700 48px/1 var(--display); font-variant-numeric: tabular-nums; }
.det-mag .lv { font: 600 12px var(--display); padding: 4px 10px; border-radius: 8px; }
.det-loc { font: 600 18px/1.3 var(--display); margin-top: 12px; }
.det-time { font-size: 13px; color: var(--txt-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.det-share { margin-top: 12px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.cell { min-width: 0; overflow-wrap: anywhere; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 11px 12px; }
.cell span { font-size: 12px; color: var(--txt-2); display: block; }
.cell b { font: 600 16px var(--display); font-variant-numeric: tabular-nums; display: block; margin-top: 3px; }
.cell small { font-size: 11px; color: var(--txt-2); }

.det-sec { padding: 0 16px 16px; }
.det-sec h4 { font: 600 14px var(--display); color: var(--txt-0); margin: 6px 0 10px; }
/* Otomatik yorum: dekoratif mor gradyan yerine düz kutu; etiketi "otomatik" olduğunu söylüyor. */
.ai-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; font-size: 14px; line-height: 1.65; color: var(--txt-1); }
.ai-box b { color: var(--txt-0); }
.ai-tag { display: block; font: 600 12px var(--display); color: var(--accent); margin-bottom: 6px; }
.disclaim { font-size: 12px; color: var(--txt-2); margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); line-height: 1.55; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13px; }
.bar-row .nm { width: 90px; color: var(--txt-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .tr { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.bar-row .fl { height: 100%; border-radius: 4px; background: var(--accent); transition: width .5s; }
.bar-row .vl { width: 52px; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; font-size: 12px; }

.mmi-scale { display: flex; gap: 2px; margin-top: 8px; }
.mmi-scale div { flex: 1; height: 24px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: rgba(0,0,0,.65); border-radius: 4px; opacity: .3; transition: opacity .25s, transform .25s; }
.mmi-scale div.on { opacity: 1; transform: scaleY(1.25); }

/* ── Grafikler ── */
.chart-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.chart-card h5 { margin: 0 0 10px; font: 600 13px var(--display); color: var(--txt-0); display: flex; justify-content: space-between; align-items: center; }
.chart-card h5 em { font-style: normal; color: var(--txt-2); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; }
.chart-card canvas { width: 100%; display: block; }

.src-row { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.src-row:last-child { border-bottom: 0; }
.src-row .st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.src-row .nm { flex: 1; font-weight: 500; }
.src-row .vl { font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* Seçilen depremin dalgası, büyük depremler */
.uq-select-wave { position: relative; width: 120px; height: 120px; pointer-events: none; }
.uq-select-wave i { position: absolute; inset: 50%; border: 2px solid var(--c); border-radius: 50%; animation: uqWave 2.4s ease-out infinite; }
.uq-select-wave i:nth-child(2) { animation-delay: .8s; }
.uq-select-wave i:nth-child(3) { animation-delay: 1.6s; }
@keyframes uqWave { from { inset: 50%; opacity: .95; } to { inset: 0; opacity: 0; } }
.uq-big-quake { width: var(--s); height: var(--s); margin: calc((30px - var(--s)) / 2); border-radius: 50%; display: grid; place-items: center; background: rgba(249, 115, 22, .22); border: 2px solid #f97316; color: #fff; font: 700 11px var(--display); text-shadow: 0 1px 3px #000; }

/* ── Telefon ── */
.rail, .sheet-grab { display: none; }

@media (max-width: 1280px) {
  .body { grid-template-columns: 280px minmax(0, 1fr) 330px; }
  .kpi:nth-child(4), .kpi:nth-child(6) { display: none; }
}
@media (max-width: 1060px) and (min-width: 941px) {
  .body { grid-template-columns: 260px minmax(0, 1fr) 300px; }
  .kpi { padding: 0 12px; }
  .kpi:nth-child(3) { display: none; }
}
@media (max-width: 940px) {
  .app { grid-template-rows: var(--header-h) minmax(0, 1fr) var(--rail-h); }
  .body { grid-template-columns: minmax(0, 1fr); }
  .hdr-stats { display: none; }
  .panel { position: absolute; inset: 24px 0 0; width: 100%; height: auto; z-index: 40; border: 0; transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.85,.3,1); border-radius: 18px 18px 0 0; box-shadow: var(--shadow); }
  .panel.open { transform: translateY(0); }
  .sheet-grab { display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 10px auto 4px; }
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-1); border-top: 1px solid var(--line); z-index: 70; padding-bottom: env(safe-area-inset-bottom); }
  .rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; font-size: 12px; font-weight: 500; color: var(--txt-2); }
  .rail button i { font-size: 18px; font-style: normal; }
  .rail button.on { color: var(--accent); font-weight: 600; }
  .legend { display: none; }
  .scrub { width: 100%; }
  .scrub-meta { display: none; }
}
@media (max-width: 560px) {
  .hdr { gap: 8px; padding: 0 10px; }
  .brand .bt small { display: none; }
  .hdr-right { gap: 6px; }
  .live-pill { width: 40px; padding: 0; justify-content: center; }
  .live-pill span { display: none; }
  #btnFocus { display: none; }
  .styles-pop { max-width: calc(100vw - 24px); grid-template-columns: 1fr; max-height: 62vh; overflow-y: auto; }
  .toast-wrap { width: calc(100vw - 24px); }
  .toast { max-width: 100%; text-align: center; }
  .ev { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .ev .mag { width: 44px; height: 44px; font-size: 16px; }
  .list-head { padding: 0 12px; }
  .grid2 { padding: 12px; }
  .det-sec { padding: 0 12px 14px; }
}
@media (max-width: 370px) {
  .speeds button { padding: 4px 6px; }
  .icon-btn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Ek özellikler ── */
.det-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.det-actions .btn { min-height: 38px; font-size: 12.5px; }
.felt { display: flex; flex-wrap: wrap; gap: 8px; }
.felt-btn { flex: 1 1 120px; justify-content: space-between; }
.felt-btn .felt-n { font-variant-numeric: tabular-nums; color: var(--txt-2); font-weight: 500; }
.felt-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.agency-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.agency-table td, .agency-table th { white-space: nowrap; }
.agency-table th { text-align: left; font: 600 12px var(--display); color: var(--txt-2); padding: 4px 6px 8px; }
.agency-table td { padding: 8px 6px; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; vertical-align: top; }
.agency-table small { display: block; color: var(--txt-2); font-size: 11px; }
.me-cell { border-color: rgba(var(--accent-rgb), .45); }
.me-tag { color: var(--accent); font-weight: 600; }
.ev:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ov-bc { left: 50%; bottom: 14px; transform: translateX(-50%); width: min(640px, calc(100% - 24px)); }
.section-box { display: none; padding: 12px 14px; }
.section-box.open { display: block; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.section-head b { font: 600 14px var(--display); }
.section-head span { color: var(--txt-2); font-size: 12px; flex: 1; }
.section-head .icon-btn { width: 34px; height: 34px; }
.hint { margin: 0; font-size: 13px; color: var(--txt-1); }
.embed-code { font: 12px var(--mono); resize: vertical; }
@media (max-width: 940px) { .ov-bc { bottom: 10px; } .det-actions .btn { flex: 1 1 auto; } }

/* ── Ayrıntı paneli (uygulamadaki deprem sayfasıyla aynı dil) ── */
.dh-top { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.det-ring { flex: 0 0 auto; }
.dh-name { min-width: 0; }
.dh-title { font: 700 24px/1.1 var(--display); color: var(--txt-0); overflow-wrap: anywhere; }
.dh-sub { font-size: 13.5px; color: var(--txt-1); margin-top: 4px; }
.dh-date { font: 600 14px var(--display); color: var(--txt-0); margin-top: 14px; font-variant-numeric: tabular-nums; }
.dh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dh-chip { font-size: 12.5px; padding: 5px 10px; border-radius: 9px; background: var(--bg-2); color: var(--txt-1); border: 1px solid var(--line); }
.dh-chip.ok { color: #22c55e; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); font-weight: 600; }
.dh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dh-stats div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.dh-stats b { display: block; font: 700 16px var(--display); color: var(--txt-0); white-space: nowrap; }
.dh-stats div { padding: 9px 8px; }
.dh-stats span { font-size: 11.5px; color: var(--txt-2); }
#cXsec { width: 100%; display: block; }
.felt .felt-btn { min-height: 46px; }
@media (max-width: 940px) {
  /* Telefonda ayrıntı haritanın üstüne alttan açılır; üst %40'ta deprem görünür. */
  .panel.right.peek { inset: 40vh 0 0; }
  .panel.right.peek .detail { border-radius: 18px 18px 0 0; }
  .dh-title { font-size: 22px; }
}