:root{--zemin:#0f1216;--kart:#171b21;--kart2:#1e232b;--cizgi:#2a313b;--yazi:#e7eaee;--soluk:#94a0ae;--vurgu:#e8b04b;--yesil:#3fb27f;--kirmizi:#e5534b;--mavi:#4c8dff;--r:12px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--zemin);color:var(--yazi);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--vurgu);text-decoration:none}a:hover{text-decoration:underline}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--kart);border-bottom:1px solid var(--cizgi);position:sticky;top:0;z-index:5;flex-wrap:wrap}
header .marka{font-weight:700;color:var(--yazi);display:flex;align-items:center;gap:8px}
header .marka img{width:26px;height:26px}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{color:var(--soluk);padding:6px 10px;border-radius:8px}
nav a.secili,nav a:hover{background:var(--kart2);color:var(--yazi);text-decoration:none}
.kisi{display:flex;gap:8px;align-items:center;color:var(--soluk);font-size:13px}
main{max-width:1280px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:4px 0 14px}h2{font-size:16px;margin:18px 0 10px}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px;margin-bottom:14px}
.izgara{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kamera{background:#000;border-radius:var(--r);overflow:hidden;border:1px solid var(--cizgi)}
.kamera h3{margin:0;padding:6px 10px;font-size:13px;background:var(--kart);color:var(--soluk)}
.kamera img{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#000}
.dugmeler{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button,.dugme{font:inherit;border:1px solid var(--cizgi);background:var(--kart2);color:var(--yazi);padding:9px 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
button:hover,.dugme:hover{border-color:var(--soluk);text-decoration:none}
.buyuk{padding:14px 22px;font-size:17px;font-weight:600}
.yesil{background:#1f5f43;border-color:#2b7d59}.kirmizi{background:#6d2522;border-color:#8b302c}.sari{background:#6b5216;border-color:#8a6a1d}
.kucuk{padding:4px 9px;font-size:13px;border-radius:8px}
button:disabled{opacity:.5;cursor:wait}
input,select,textarea{font:inherit;color:var(--yazi);background:var(--zemin);border:1px solid var(--cizgi);border-radius:9px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vurgu);outline-offset:-1px}
label{display:block;font-size:13px;color:var(--soluk);margin:10px 0 4px}
.form{max-width:520px}
.satir{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.satir>*{flex:1;min-width:140px}
.onay{display:flex;align-items:center;gap:8px;color:var(--yazi);font-size:15px}.onay input{width:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
th{color:var(--soluk);font-weight:500;font-size:13px}
tr:hover td{background:#1a1f26}
.tablo{overflow-x:auto}
.plaka{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.5px;background:#f5f5f0;color:#111;border-radius:5px;padding:1px 7px;white-space:nowrap;border-left:6px solid #1d4bb8}
.etiket{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:var(--kart2);color:var(--soluk);white-space:nowrap}
.d-acildi,.d-gecti,.d-ac{background:#173d2d;color:#7ee2b0}.d-izinsiz,.d-acilamadi{background:#4a1f1d;color:#ff9b94}
.d-kota_dolu{background:#4d3812;color:#f5c66b}.d-indir,.d-dur{background:#1d2c49;color:#9dbdff}
.pasif td{opacity:.5}
.ileti{padding:10px 14px;border-radius:10px;margin-bottom:12px}
.ileti.tamam{background:#173d2d;color:#a5f0c9}.ileti.hata{background:#4a1f1d;color:#ffc0bb}
.tamam{color:#7ee2b0}.hata{color:#ff9b94}.soluk{color:var(--soluk);font-size:13px}
.kucukresim{width:92px;height:52px;object-fit:cover;border-radius:6px;cursor:zoom-in;display:block;background:#000}
.durumlar{display:flex;gap:10px;flex-wrap:wrap}
.durum{background:var(--kart2);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--soluk)}.durum b{color:var(--yazi);font-size:15px}
.nokta{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--soluk)}
.nokta.y{background:var(--yesil)}.nokta.k{background:var(--kirmizi)}
.sayfalama{display:flex;gap:6px;align-items:center;margin-top:12px;flex-wrap:wrap}
.giris{max-width:380px;margin:9vh auto}
.isik{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
.isik.acik{display:flex}.isik img{max-width:96vw;max-height:92vh;border-radius:8px}
.foto-onizleme{max-width:100%;border-radius:10px;margin-top:8px}
form.satirici{display:inline}
@media (max-width:700px){.gizle-mobil{display:none}}
/* ---------------------------------------------------------------- tüm ekranlar (2026-11-12) */
html{-webkit-text-size-adjust:100%}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
img,video,canvas{max-width:100%}
.menu-dugme{display:none}
td{overflow-wrap:anywhere}
/* geniş ekran / TV */
@media (min-width:1600px){main{max-width:1760px}.izgara{grid-template-columns:repeat(auto-fit,minmax(460px,1fr))}}
@media (min-width:2200px){html,body{font-size:17px}main{max-width:2300px}.izgara{grid-template-columns:repeat(auto-fit,minmax(620px,1fr))}}
/* tablet ve altı: menü katlanır */
@media (max-width:900px){
  header{gap:8px;padding:8px 12px}
  .menu-dugme{display:inline-flex;margin-left:auto;padding:8px 12px}
  nav{display:none;order:5;flex-basis:100%;flex-direction:column;gap:2px;padding:6px 0 4px;border-top:1px solid var(--cizgi)}
  header.menu-acik nav{display:flex}
  nav a{padding:11px 12px;font-size:16px}
  .kisi{order:6;flex-basis:100%;display:none;justify-content:flex-end;padding-bottom:4px}
  header.menu-acik .kisi{display:flex}
  .kisi .ad{display:inline}
}
@media (max-width:900px) and (min-width:520px){nav{display:none;flex-direction:row;flex-wrap:wrap}header.menu-acik nav{display:flex}nav a{flex:1 1 30%}}
/* telefon */
@media (max-width:640px){
  main{padding:10px 10px calc(16px + env(safe-area-inset-bottom))}
  header .marka span{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:18px}
  .kart{padding:12px;border-radius:10px}
  .izgara{grid-template-columns:1fr;gap:10px}
  .dugmeler>button,.dugmeler>.dugme{flex:1 1 calc(50% - 8px);justify-content:center}
  .buyuk{padding:14px 10px;font-size:16px}
  .dugmeler>#komut,.dugmeler>span{flex-basis:100%}
  .satir>*{min-width:calc(50% - 10px)}
  input,select,textarea{font-size:16px}
  .form{max-width:none}
  /* tablolar kart görünümü */
  .tablo{overflow:visible}
  .kart.tablo{background:transparent;border:0;padding:0}
  .tablo table,.tablo tbody,.tablo tr,.tablo td{display:block;width:100%}
  .tablo thead{display:none}
  .tablo tr{background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;padding:8px 10px;margin-bottom:8px}
  .tablo tr:hover td{background:transparent}
  .tablo td{border:0;padding:4px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:right}
  .tablo td[data-e]::before{content:attr(data-e);color:var(--soluk);font-size:12px;text-align:left;flex:0 0 auto}
  .tablo td:empty{display:none}
  .tablo td.gizle-mobil{display:none}
  .tablo td form{margin:0}
  .kucukresim{width:120px;height:68px}
}
/* dokunmatik: parmakla rahat basılsın */
@media (pointer:coarse){button,.dugme{min-height:44px}.kucuk{min-height:38px}nav a{min-height:44px;display:flex;align-items:center}}
/* yatay telefon: kamera iki sütun */
@media (max-height:500px) and (orientation:landscape){header{position:static}.izgara{grid-template-columns:repeat(2,1fr)}}
.dugme.ana,button.ana{background:var(--vurgu);color:#111;border-color:var(--vurgu);font-weight:600}

/* tüm kameralar (2026-11-12) */
a.kamera{display:block;color:inherit}a.kamera:hover{text-decoration:none;border-color:var(--vurgu)}
.kamera h3{display:flex;justify-content:space-between;gap:8px}
.canli-rozet{color:var(--vurgu);font-weight:600}
.kamera-izgara{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.kamera-izgara .kamera img{aspect-ratio:4/3}
.kamera img.kopuk{opacity:.35}
.tek-kamera img{aspect-ratio:auto;max-height:calc(100vh - 220px);margin:0 auto}
.kanal-gecis{margin-top:10px}
@media (min-width:1600px){.kamera-izgara{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}}
@media (max-width:640px){.kamera-izgara{grid-template-columns:repeat(2,1fr)}.kamera-izgara .kamera h3{font-size:12px}.canli-rozet{display:none}.tek-kamera img{max-height:none}}

/* go2rtc canlı akış */
.canli-kutu{position:relative;background:#000;aspect-ratio:4/3;overflow:hidden}
.tek-kamera .canli-kutu{aspect-ratio:16/9;max-height:calc(100vh - 200px)}
.canli-kutu img{width:100%;height:100%;object-fit:contain;display:block}
.canli-kutu video-stream{position:absolute;inset:0;display:block;opacity:0;transition:opacity .3s}
.canli-kutu.akiyor video-stream{opacity:1}
.canli-kutu video-stream video{width:100%!important;height:100%!important;object-fit:contain;background:#000}
.canli-kutu video-stream .info,.canli-kutu video-stream .mode,.canli-kutu video-stream .status{display:none!important}
.canli-kutu.akiyor::after{content:"● CANLI";position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(200,30,30,.85);padding:1px 6px;border-radius:4px}