/* Telsiz Ağı v0.3 · harita ana ekran. Ortak değişkenler site.css'ten gelir. */
html, body.harita-sayfa { height: 100%; overflow: hidden; }
body.harita-sayfa { background: var(--zemin); }

#harita { position: fixed; inset: 0; background: #16150f; z-index: 0; }
#harita.leaflet-container { background: #16150f; font: inherit; }
#harita .karo { filter: grayscale(1) invert(1) brightness(.78) contrast(.92) sepia(.22) hue-rotate(-8deg); }
#harita .leaflet-control-attribution { background: rgba(19,18,9,.6); color: var(--silik); font: 400 10px/14px var(--sans); }
#harita .leaflet-control-attribution a { color: var(--soluk); }
#harita .leaflet-control-zoom { border: 0; margin: 0 12px 152px 0; border-radius: 16px; overflow: hidden; box-shadow: var(--cam-golge); }
#harita .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; background: rgba(28,27,20,.7); color: var(--yazi); border-color: var(--cizgi); -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); }

/* sıvı cam (haritanın üstünde, arkada canlı içerik var) */
.cm {
  background: rgba(28, 27, 20, .55); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1px 0 0 rgba(255,255,255,.08) inset, 0 20px 48px -20px rgba(0,0,0,.7); position: relative;
}
.cm::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.26), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* işaretler */
.nokta { width: 14px; height: 14px; border-radius: 50%; background: var(--b); border: 2px solid rgba(19,18,9,.9); box-shadow: 0 0 0 1px var(--b); transition: transform .3s var(--egri); }
.nokta.yaklasik { border-style: dashed; border-color: rgba(255,255,255,.6); }
.nokta.listede { box-shadow: 0 0 0 1px var(--b), 0 0 0 4px rgba(255,255,255,.22); }
.nokta.secili { width: 20px; height: 20px; box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(255,178,26,.35); }
#harita.uzak .nokta:not(.secili) { transform: scale(.7); }
.leaflet-marker-icon:hover .nokta { transform: scale(1.25); }
.b-VHF { --b: var(--amber); } .b-UHF { --b: #a98bff; } .b-APRS { --b: var(--camgobegi); } .b-DMR { --b: #ff7ab6; }
.ben { width: 16px; height: 16px; border-radius: 50%; background: #5fa8ff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(95,168,255,.25); }

/* üst: arama + afet */
.h-ust { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 600; display: flex; gap: 8px; align-items: flex-start; }
.h-ara { flex: 1; min-width: 0; height: 48px; border-radius: 9999px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; }
.h-ara svg { flex: none; color: var(--soluk); }
.h-ara input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 16px/24px var(--sans); color: var(--yazi); outline: none; height: 100%; }
.h-ara input::placeholder { color: var(--silik); }
.h-ara:focus-within { border-color: rgba(255,178,26,.6); }
.h-konum { width: 36px; height: 36px; border-radius: 9999px; border: 0; background: rgba(255,255,255,.08); display: grid; place-items: center; flex: none; color: #5fa8ff; transition: background-color .3s var(--egri); }
.h-konum:hover { background: rgba(255,255,255,.14); }
.h-konum.acik { background: rgba(95,168,255,.2); }
.h-konum.bekliyor svg { animation: don 1.2s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.h-afet { height: 48px; padding: 0 16px; border-radius: 9999px; background: var(--sinyal); color: #1f0700; font: 700 16px/48px var(--sans); text-decoration: none; flex: none; box-shadow: 0 1px 0 0 rgba(255,255,255,.4) inset, 0 12px 32px -12px rgba(255,90,46,.7); transition: transform .3s var(--egri); }
.h-afet:hover { transform: translateY(-1px); }
.h-marka { display: none; }

.filtre { position: fixed; top: 68px; left: 12px; z-index: 600; display: flex; gap: 2px; padding: 4px; border-radius: 9999px; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; background: rgba(28,27,20,.55); }
.filtre::-webkit-scrollbar { display: none; }
.filtre button { border: 0; background: transparent; padding: 4px 12px; border-radius: 9999px; font: 600 14px/20px var(--sans); color: var(--soluk); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.filtre button i { width: 8px; height: 8px; border-radius: 50%; background: var(--b); }
.filtre button:hover { color: var(--yazi); }
.filtre button.secili { background: rgba(255,255,255,.14); color: var(--yazi); box-shadow: 0 1px 0 0 rgba(255,255,255,.14) inset; }

/* alt panel */
.panel { position: fixed; left: 8px; right: 8px; bottom: 76px; z-index: 600; border-radius: 28px; padding: 4px 16px 16px; display: flex; flex-direction: column; max-height: 38vh; transition: max-height .5s var(--egri); }
.panel.acik { max-height: 70vh; }
.tutamak-d { border: 0; background: none; padding: 8px 0 12px; width: 100%; display: grid; place-items: center; }
.tutamak-d span, .tutamak { display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
.panel-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.panel-bas h2 { margin: 0; font: 600 18px/28px var(--sans); }
.panel-bas p { font: 400 12px/16px var(--sans); color: var(--soluk); text-align: right; }
#liste { list-style: none; margin: 0 -8px; padding: 0; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.role { width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 12px 8px; border-radius: 16px; transition: background-color .3s var(--egri); }
.role:hover, .role.simdi { background: rgba(255,255,255,.07); }
#liste li + li .role { border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; }
#liste li + li .role:hover, #liste li + li .role.simdi { border-radius: 16px; border-top-color: transparent; }
.role > i { width: 8px; height: 32px; border-radius: 4px; background: var(--b); }
.role b { display: block; font: 600 16px/24px var(--sans); }
.role small { display: block; font: 400 12px/16px var(--sans); color: var(--soluk); }
.role .sag { text-align: right; display: grid; justify-items: end; gap: 2px; }
.role .f { font: 500 16px/24px var(--mono); font-variant-numeric: tabular-nums; }
.yetis { font: 600 12px/16px var(--sans); padding: 0 8px; border-radius: 9999px; }
.yetis.olur { color: var(--iyi); background: var(--iyi-zemin); }
.yetis.sinir { color: var(--amber); background: var(--amber-zemin); }
.yetis.uzak { color: var(--kotu); background: var(--kotu-zemin); }
.listede-y { font: 500 12px/16px var(--sans); color: var(--soluk); }
#liste .bos { padding: 16px 8px; color: var(--soluk); font: 400 14px/20px var(--sans); }
.yukle { margin-top: 12px; width: 100%; min-height: 48px; border: 0; border-radius: 9999px; background: var(--amber); color: #1a1200; font: 600 16px/24px var(--sans); box-shadow: 0 1px 0 0 rgba(255,255,255,.45) inset; transition: background-color .3s var(--egri), transform .3s var(--egri); flex: none; }
.yukle:hover { background: var(--amber-acik); }
.yukle:active { transform: scale(.98); }

/* röle kartı */
.kart-r { position: fixed; z-index: 650; left: 8px; right: 8px; bottom: 76px; max-height: calc(100vh - 140px); overflow-y: auto; border-radius: 28px; padding: 4px 24px 24px; scrollbar-width: none; }
.kart-r .tutamak { margin: 8px auto 12px; }
body.kart-acik .panel { display: none; }
.kart-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kart-r h2 { margin: 0; font: 600 24px/32px var(--sans); letter-spacing: -.01em; }
.kart-r .yer { font: 400 14px/20px var(--sans); color: var(--soluk); }
.kapat { width: 32px; height: 32px; border-radius: 9999px; border: 0; background: rgba(255,255,255,.08); color: var(--soluk); display: grid; place-items: center; flex: none; transition: background-color .3s var(--egri); }
.kapat:hover { background: rgba(255,255,255,.16); color: var(--yazi); }
.kart-r .frek { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.kart-r .frek b { font: 500 48px/1 var(--mono); color: var(--amber); letter-spacing: -.03em; }
.kart-r .frek span { font: 500 14px/20px var(--mono); color: var(--soluk); }
.ozellik { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ozellik div { padding: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ozellik dt { font: 400 12px/16px var(--sans); color: var(--soluk); }
.ozellik dd { margin: 0; font: 500 16px/24px var(--mono); }
.kart-r .bilgi { margin-top: 12px; font: 400 14px/20px var(--sans); color: var(--soluk); }
.ulasim { margin-top: 16px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ulasim.olur { background: var(--iyi-zemin); border-color: rgba(69,208,143,.28); }
.ulasim.sinir { background: var(--amber-zemin); border-color: rgba(255,178,26,.3); }
.ulasim.uzak { background: var(--kotu-zemin); border-color: rgba(255,107,79,.3); }
.u-bas { font: 600 16px/24px var(--sans); }
.ulasim.olur .u-bas { color: var(--iyi); } .ulasim.sinir .u-bas { color: var(--amber); } .ulasim.uzak .u-bas { color: var(--kotu); }
.ulasim p + p { margin-top: 4px; font: 400 14px/20px var(--sans); color: var(--soluk); }
.ulasim svg { display: block; width: 100%; height: auto; margin-top: 12px; }
.ayarlar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.grup { display: inline-flex; padding: 2px; border-radius: 9999px; background: rgba(0,0,0,.25); }
.secim { border: 0; background: transparent; padding: 4px 12px; border-radius: 9999px; font: 600 12px/16px var(--sans); color: var(--soluk); transition: background-color .3s var(--egri), color .3s var(--egri); }
.secim.secili { background: rgba(255,255,255,.16); color: var(--yazi); }
.ikincil { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); font: 600 14px/20px var(--sans); color: var(--yazi); text-decoration: none; transition: background-color .3s var(--egri); }
.ikincil:hover { background: rgba(255,255,255,.14); }
.ulasim .ikincil { margin-top: 12px; }
.kart-r .uyari { margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: var(--kotu-zemin); color: #ffbca8; font: 400 12px/16px var(--sans); }
.kart-dugme { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kart-dugme button { min-height: 44px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); font: 600 14px/20px var(--sans); transition: background-color .3s var(--egri); }
.kart-dugme button.ana { background: var(--amber); color: #1a1200; border-color: transparent; }
.kart-r .kaynak { margin-top: 12px; font: 400 12px/16px var(--sans); color: var(--silik); }
.kart-r .kaynak a { color: var(--soluk); }

/* sekmeler (harita sayfasında da aynı bileşen) */
.h-sekme { position: fixed; z-index: 600; left: 50%; bottom: 12px; transform: translateX(-50%); }

/* karşılama */
.karsilama { position: fixed; z-index: 590; left: 12px; right: 12px; top: 120px; border-radius: 24px; padding: 16px; }
.karsilama .ic { display: flex; gap: 12px; align-items: center; }
.karsilama b { display: block; font: 600 16px/24px var(--sans); }
.karsilama p { font: 400 14px/20px var(--sans); color: var(--soluk); }
.karsilama .ikincil { flex: none; min-height: 40px; }
.karsilama .kapat { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; }
.karsilama .metin { padding-right: 24px; flex: 1; }

/* bildirim */
.bildirim { position: fixed; z-index: 700; left: 50%; top: 120px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 16px; font: 500 14px/20px var(--sans); background: rgba(31,31,31,.92); border: 1px solid var(--cizgi); box-shadow: 0 16px 40px -16px #000; }

[hidden] { display: none !important; }

@media (min-width: 900px) {
  .h-ust { left: 24px; right: auto; top: 24px; width: 440px; }
  .h-afet { position: fixed; top: 24px; right: 24px; }
  .filtre { top: 84px; left: 24px; }
  .panel { left: 24px; right: auto; bottom: 24px; width: 440px; max-height: calc(100vh - 160px); }
  .panel .tutamak-d { display: none; }
  .panel { padding-top: 16px; }
  .h-sekme { top: 24px; bottom: auto; }
  .kart-r { left: auto; right: 24px; top: 96px; bottom: auto; width: 400px; max-height: calc(100vh - 120px); padding-top: 24px; }
  .kart-r .tutamak { display: none; }
  body.kart-acik .panel { display: flex; }
  .karsilama { left: 50%; right: auto; top: auto; bottom: 24px; transform: translateX(-50%); width: 440px; }
  #harita .leaflet-control-zoom { margin: 0 24px 24px 0; }
  body.kart-acik #harita .leaflet-control-zoom { margin-right: 440px; }
}
@media (min-width: 900px) and (max-width: 1360px) { .karsilama { left: auto; right: 24px; transform: none; } body.kart-acik .karsilama { display: none; } }
@media (max-width: 899px) { body.kart-acik .karsilama { display: none; } }
.panel-bas { flex-direction: column; align-items: flex-start; gap: 0; }
.panel-bas p { text-align: left; }
.filtre { flex-wrap: nowrap; display: flex; }
@media (max-width: 899px) { .karsilama p { display: none; } .karsilama { top: 116px; padding: 12px 16px; } }
@media (max-width: 899px) { .karsilama .ic { padding-right: 28px; } }

/* ---------- v0.3.2 ---------- */
/* daha küçük panel */
.panel { padding: 4px 12px 12px; }
.panel-bas { margin-bottom: 0; padding: 0 4px; }
.panel-bas h2 { font: 600 16px/24px var(--sans); }
#liste { margin: 4px -4px 0; }
.role { padding: 8px; gap: 12px; grid-template-columns: 6px 1fr auto; border-radius: 12px; }
.role > i { width: 6px; height: 28px; border-radius: 3px; }
.role b { font: 600 14px/20px var(--sans); }
.role .f { font: 500 14px/20px var(--mono); }
.yukle { margin-top: 8px; min-height: 44px; font: 600 14px/20px var(--sans); }
.yetis.bekliyor { color: var(--soluk); background: rgba(255,255,255,.07); }
.yetis.yok { color: var(--silik); background: rgba(255,255,255,.05); }
@media (min-width: 900px) {
  .panel { width: 360px; max-height: min(460px, calc(100vh - 160px)); padding-top: 12px; }
  /* zoom her zaman sağ altta; kart onunla çakışmayacak kadar kısa */
  body.kart-acik #harita .leaflet-control-zoom { margin-right: 24px; }
  .kart-r { max-height: calc(100vh - 200px); }
}
@media (max-width: 899px) { .panel { max-height: 32vh; } .panel.acik { max-height: 64vh; } }

/* kart: yükleniyor, pay, nasıl */
.ulasim.yukleniyor .iskelet { margin-top: 12px; height: 96px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: iskelet 1.4s var(--egri) infinite; }
@keyframes iskelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ulasim.yukleniyor .iskelet { animation: none; } }
.kesit { margin-top: 12px; }
.kesit-not { margin-top: 4px; font: 400 12px/16px var(--sans) !important; color: var(--silik) !important; }
.pay { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay div { padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.2); }
.pay dt { font: 400 12px/16px var(--sans); color: var(--soluk); }
.pay dd { margin: 0; font: 500 16px/24px var(--mono); }
.nasil { margin-top: 12px; }
.nasil summary { cursor: pointer; font: 600 12px/16px var(--sans); color: var(--soluk); list-style: none; }
.nasil summary::-webkit-details-marker { display: none; }
.nasil summary::after { content: " +"; }
.nasil[open] summary::after { content: " −"; }
.nasil p { margin-top: 8px; font: 400 12px/18px var(--sans) !important; color: var(--soluk) !important; }
.ikincil.genis { width: 100%; margin-top: 12px; }
.ikincil.genis.acik { border-color: rgba(255,178,26,.5); color: var(--amber); }

/* haritadaki yol çizgisi: sinyal senden röleye akar (iki tur, sonra durur) */
.yol-cizgi.akan { stroke-dasharray: 6 8; animation: akis 1.1s linear 3; }
@keyframes akis { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }

/* çekim alanı lejantı */
.kapsama-resim { image-rendering: auto; }
.lejant { position: fixed; z-index: 640; left: 12px; right: 12px; top: 116px; border-radius: 20px; padding: 12px 16px; }
.lejant .kapat { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; }
.l-bas { font: 600 14px/20px var(--sans); padding-right: 28px; }
.l-alt { font: 400 12px/16px var(--sans); color: var(--soluk); margin-top: 2px; }
.l-renk { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font: 500 12px/16px var(--sans); }
.l-renk span { display: inline-flex; align-items: center; gap: 8px; }
.l-renk i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,178,26,.44); border: 1px solid rgba(255,178,26,.7); }
.l-renk i.sinir { background: rgba(255,178,26,.18); border-color: rgba(255,178,26,.4); }
.l-not { margin-top: 8px; font: 400 11px/16px var(--sans); color: var(--silik); }
.ilerleme { margin-top: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.ilerleme i { display: block; height: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); transition: transform .3s var(--egri); }
@media (min-width: 900px) { .lejant { left: 50%; right: auto; top: auto; bottom: 96px; transform: translateX(-50%); width: 420px; } }
@media (min-width: 900px) { .lejant { bottom: 24px; } body:has(.karsilama:not([hidden])) .lejant { bottom: 120px; } }
.dokum { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dokum div { padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.15); }
.dokum dt { font: 400 11px/16px var(--sans); color: var(--silik); }
.dokum dd { margin: 0; font: 500 14px/20px var(--mono); color: var(--soluk); }
.lejant { max-width: 360px; }
@media (min-width: 900px) { .lejant { width: 360px; } }
@media (min-width: 900px) and (max-width: 1199px) {
  body.lejant-acik .panel { display: none !important; }
  body.lejant-acik .lejant { left: 24px; transform: none; bottom: 24px; }
}
@media (max-width: 899px) { body.lejant-acik.kart-acik .lejant { top: 116px; } }

/* ---------- v0.4 geçici röle planlama ---------- */
.plan-ac { position: fixed; z-index: 600; top: 116px; left: 12px; height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid rgba(255,90,46,.45); color: #ffb39e; font: 600 13px/20px var(--sans); background: rgba(28,27,20,.6); transition: background-color .3s var(--egri); }
.plan-ac:hover { background: rgba(255,90,46,.18); }
@media (min-width: 900px) { .plan-ac { top: 132px; left: 24px; } }
.plan-panel { display: none; position: fixed; z-index: 650; left: 8px; right: 8px; bottom: 76px; max-height: 62vh; overflow-y: auto; border-radius: 28px; padding: 20px; scrollbar-width: none; }
@media (min-width: 900px) { .plan-panel { left: 24px; right: auto; bottom: 24px; width: 380px; max-height: calc(100vh - 200px); } }
body.plan-acik .plan-panel { display: block; }
body.plan-acik .panel, body.plan-acik .plan-ac, body.plan-acik .karsilama, body.plan-acik .lejant { display: none !important; }
.plan-panel h2 { margin: 0; font: 600 20px/28px var(--sans); }
.plan-panel .yer { font: 400 14px/20px var(--sans); color: var(--soluk); }
.plan-panel .ayarlar { margin-top: 16px; }
.plan-durum { margin-top: 16px; font: 500 14px/20px var(--sans); color: var(--soluk); min-height: 24px; }
.plan-sonuc { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-sonuc div { padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.plan-sonuc dt { font: 400 12px/16px var(--sans); color: var(--soluk); }
.plan-sonuc dd { margin: 0; font: 600 18px/28px var(--mono); color: var(--yazi); }
.plan-sonuc div:first-child dd { color: var(--amber); }
.plan-not { margin-top: 8px; font: 400 12px/16px var(--sans); color: var(--silik); }
.plan-panel .yukle { margin-top: 16px; }
.plan-role { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,90,46,.18); border: 2px solid var(--sinyal); box-shadow: 0 0 0 6px rgba(255,90,46,.15); cursor: grab; }
.plan-role i { width: 10px; height: 10px; border-radius: 50%; background: var(--sinyal); }
.leaflet-dragging .plan-role { cursor: grabbing; }
.plan-aday { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--mono); color: #1f0700; background: #ffd0c2; border: 2px solid var(--sinyal); }
.plan-resim { transition: opacity .2s var(--egri); }
.plan-baslik { margin: 12px 0 8px; font: 600 12px/16px var(--sans); color: var(--soluk); }
.plan-durum .plan-baslik:first-child { margin-top: 0; }
.plan-sonuc dd { font-size: 16px; line-height: 24px; }