/* FullGo Kule: onaylı taslağın (11 Kas, "A. Kule", sade koyu) değişkenleri ve bileşenleri.
   Yazı tipleri sistemden: IBM Plex kuruluysa o, değilse sistem yazısı (dış yazı tipi yüklenmez; CSP). */
:root {
  color-scheme: dark;
  --zemin: #0e131b; --kart: #161d29; --kart2: #1e2736; --cizgi: #2b3648;
  --yazi: #e6ebf2; --soluk: #9aa7b8; --silik: #8592a5;
  --vurgu: #7cb0ff; --vurgu-zemin: #1b2a44;
  --sakin: #5fd3a6; --yakin: #fbbf24; --kritik: #f87171;
  --sakin-z: #12322a; --yakin-z: #3a2d0c; --kritik-z: #3d1a1c;
  --kara: #18212d;
  --baslik: "Space Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --govde: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rakam: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dokun: 44px; /* dokunmatik hedefin en küçük boyu */
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--zemin); color: var(--yazi); font: 15px/1.5 var(--govde); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--baslik); margin: 0; line-height: 1.2; }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--vurgu); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: 13px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bekle, .bos { padding: 10px 0; }
.form-hata { color: var(--kritik); background: var(--kritik-z); border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.ham { white-space: pre-wrap; word-break: break-word; font: 12px var(--rakam); background: var(--kart2); padding: 8px; border-radius: 6px; margin: 0; max-height: 240px; overflow: auto; }

/* Marka */
.marka { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--baslik); white-space: nowrap; }
a.marka { color: var(--yazi); text-decoration: none; min-height: var(--dokun); }
.marka img { display: block; width: 50px; height: auto; }
.buyuk-marka { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 20px; }
.buyuk-marka img { width: 120px; }
.marka b { color: var(--vurgu); font-weight: 600; }

/* Giriş */
/* Giriş: solda "kule" sahnesi (rota akışları + radar, js/giris-sahne.js), sağda cam kart */
.giris { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); background:
  radial-gradient(900px 600px at 80% 50%, rgba(242,140,56,.10), transparent 60%),
  radial-gradient(800px 700px at 20% 30%, rgba(124,176,255,.10), transparent 60%), #0a0f16; overflow: hidden; }
.giris-sahne { position: relative; min-height: 100%; overflow: hidden; border-right: 1px solid rgba(124,176,255,.10); }
.giris-sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.giris-sahne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,15,22,.55), transparent 45%), linear-gradient(0deg, rgba(10,15,22,.65), transparent 35%); }
.sahne-yazi { position: absolute; left: clamp(24px, 5vw, 64px); bottom: clamp(28px, 7vh, 72px); z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.sahne-yazi img { width: 156px; height: auto; filter: drop-shadow(0 8px 30px rgba(242,140,56,.35)); }
.sahne-baslik { margin: 0; font: 700 clamp(30px, 3.6vw, 46px)/1.05 var(--baslik); letter-spacing: -.02em; }
.sahne-baslik b { background: linear-gradient(90deg, #f28c38, #ffb366); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sahne-alt { margin: 0; color: var(--soluk); font-size: 16px; line-height: 1.5; }
.sahne-saat { margin: 6px 0 0; font: 500 13px var(--rakam); color: var(--silik); letter-spacing: .04em; }
.giris > .giris-kart { align-self: center; justify-self: center; margin: 24px; }
.giris-kart { width: 100%; max-width: 400px; position: relative; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(160deg, rgba(30,39,54,.78), rgba(22,29,41,.62)); border: 1px solid rgba(124,176,255,.18); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  animation: kart-gir .6s cubic-bezier(.2,.8,.2,1) both; }
.giris-kart::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(242,140,56,.55), transparent 35%, transparent 65%, rgba(124,176,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.giris-kart h1 { font-size: 26px; margin: 0 0 4px; }
.giris-kart .alan input { background: rgba(10,15,22,.6); border-color: rgba(124,176,255,.18); transition: border-color .2s, box-shadow .2s; }
.giris-kart .alan input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 4px rgba(124,176,255,.16); outline: none; }
.giris-kart .dugme.ana { background: linear-gradient(135deg, #8ab9ff, #5d94f0); border: 0; color: #0b1220; font-weight: 600; min-height: 48px;
  box-shadow: 0 10px 28px rgba(93,148,240,.35); transition: transform .15s, box-shadow .15s; }
.giris-kart .dugme.ana:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(93,148,240,.45); }
@keyframes kart-gir { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .giris-kart { animation: none; } .giris-kart .dugme.ana { transition: none; } }
@media (max-width: 860px) {
  .giris { grid-template-columns: minmax(0, 1fr); grid-template-rows: 230px auto; }
  .giris-sahne { border-right: 0; border-bottom: 1px solid rgba(124,176,255,.10); }
  .sahne-yazi { bottom: 18px; gap: 4px; }
  .sahne-yazi img { width: 84px; }
  .sahne-alt, .sahne-saat { display: none; }
  .giris > .giris-kart { width: auto; max-width: none; justify-self: stretch; margin: 20px 16px 32px; align-self: start; padding: 26px 20px; }
}
.giris-kart .buyuk-marka { display: none; } /* logo sahnede büyük duruyor */
.alan { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--soluk); }
.alan small { color: var(--silik); font-size: 12.5px; }
.alan input, .alan textarea, .alan select {
  min-height: var(--dokun); background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; color: var(--yazi); font-size: 16px; width: 100%;
}
.alan textarea { resize: vertical; min-height: 88px; }
.alan input:focus, .alan textarea:focus { border-color: var(--vurgu); outline: none; }
.isaret-satir { display: flex; gap: 12px; align-items: flex-start; min-height: var(--dokun); padding: 10px 0; font-size: 14.5px; cursor: pointer; }
.isaret-satir input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--vurgu); }

/* Düğmeler */
.dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.dugme { min-height: var(--dokun); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid var(--cizgi); background: var(--kart2); border-radius: 8px; padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--yazi); }
.dugme:hover { border-color: var(--soluk); }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: #0b1220; }
.dugme.kirmizi { color: var(--kritik); border-color: #5a2a2d; }
.dugme.kirmizi.dolu { background: var(--kritik); color: #1a0606; border-color: var(--kritik); }
.dugme.genis { width: 100%; }
.dugme.kucuk { min-height: 36px; padding: 4px 12px; font-size: 13.5px; }
.dugme[disabled] { opacity: .45; cursor: not-allowed; }

/* Üst çubuk ve sekmeler */
.uygulama { min-height: 100vh; display: flex; flex-direction: column; }
.ust-cubuk { display: flex; align-items: center; gap: 12px; padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); background: var(--zemin); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 1000; }
.sekme-cubuk { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.sekme-cubuk a { flex: none; min-height: var(--dokun); display: inline-flex; align-items: center; border-radius: 8px; padding: 0 14px; font-size: 14px; color: var(--soluk); text-decoration: none; }
.sekme-cubuk a[aria-current="page"] { background: var(--vurgu-zemin); color: var(--yazi); }
.hesap { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soluk); white-space: nowrap; }
.icerik { flex: 1; min-width: 0; }

/* Ortak öğeler */
.sayac { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--rakam); padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; width: fit-content; }
.sayac::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sayac.sakin { color: var(--sakin); background: var(--sakin-z); }
.sayac.yakin { color: var(--yakin); background: var(--yakin-z); }
.sayac.kritik { color: var(--kritik); background: var(--kritik-z); }
.plaka { display: inline-flex; align-items: stretch; font: 600 12.5px var(--rakam); background: #f4f5f7; color: #11151c; border-radius: 4px; overflow: hidden; white-space: nowrap; border: 1px solid #c9ced6; vertical-align: middle; }
.plaka i { font-style: normal; background: #1d4fbf; color: #fff; font-size: 8px; display: flex; align-items: flex-end; padding: 0 3px 2px; }
.plaka span { padding: 2px 7px; letter-spacing: .04em; }
.plaka.buyuk { font-size: 20px; } .plaka.buyuk i { font-size: 10px; padding: 0 5px 3px; } .plaka.buyuk span { padding: 4px 12px; }
.kural { border: 1px dashed var(--cizgi); border-radius: 6px; padding: 10px 12px; font-size: 13.5px; color: var(--soluk); display: flex; gap: 10px; align-items: baseline; }
.kural b { font: 600 10.5px var(--rakam); letter-spacing: .1em; text-transform: uppercase; color: var(--yakin); flex: none; }
.tl { font-family: var(--rakam); font-variant-numeric: tabular-nums; }
.durum { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; margin-right: 4px; }
.durum.iste { color: var(--vurgu); background: var(--vurgu-zemin); }
.durum.bos { color: var(--sakin); background: var(--sakin-z); }
.durum.kapali { color: var(--soluk); background: var(--kart2); }
.durum.bloke { color: var(--kritik); background: var(--kritik-z); }
.durum.aski { color: var(--yakin); background: var(--yakin-z); }
.ikili { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; margin: 0; }
.ikili dt { color: var(--silik); } .ikili dd { margin: 0; overflow-wrap: anywhere; }
.alinti { background: var(--kart2); border-radius: 6px; padding: 9px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.alinti small { color: var(--silik); }
.gecmis { font-size: 12.5px; color: var(--soluk); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.gecmis b { color: var(--yazi); font-weight: 500; }
.belge { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 13.5px; }
.belge > span:nth-child(2) { flex: 1 1 140px; }
.belge small { display: block; color: var(--silik); }
.isaret { flex: none; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; font: 600 11px var(--rakam); }
.isaret.tamam { background: var(--sakin-z); color: var(--sakin); }
.isaret.eksik { background: var(--yakin-z); color: var(--yakin); }
.kanitlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.kanit { display: flex; flex-direction: column; gap: 4px; }
.kanit img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; }
.kanit small { color: var(--silik); font-size: 11.5px; }
.kanit-ac { min-height: var(--dokun); background: repeating-linear-gradient(45deg, #222d3e 0 10px, #1c2533 10px 20px); border: 1px solid var(--cizgi); border-radius: 6px; color: var(--soluk); font-size: 12.5px; padding: 6px 10px; text-align: left; }
.duyuru-kutusu { position: fixed; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 3000; pointer-events: none; }
.duyuru { max-width: 420px; padding: 12px 14px; border-radius: 8px; font-size: 14px; border: 1px solid var(--cizgi); background: var(--kart2); pointer-events: auto; }
.duyuru.basari { border-color: #1f5a47; color: var(--sakin); }
.duyuru.hata { border-color: #5a2a2d; color: var(--kritik); background: var(--kritik-z); }

/* Onay kutusu */
.onay { background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: 12px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.onay::backdrop { background: #05080ccc; }
.onay-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.onay-form .dugmeler { justify-content: flex-end; }

/* Kule */
.kule { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; grid-template-rows: auto minmax(420px, calc(100vh - 260px)) auto; font-size: 14px; }
.tepe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 10px 14px; background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.gosterge { display: flex; flex-direction: column; line-height: 1.2; }
.gosterge b { font: 600 15px var(--rakam); font-variant-numeric: tabular-nums; }
.gosterge span { font-size: 11.5px; color: var(--silik); }
.tepe .saat { margin-left: auto; font: 500 12.5px var(--rakam); color: var(--soluk); }
.sira { border-right: 1px solid var(--cizgi); background: var(--kart); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.suzgec { display: flex; gap: 6px; overflow-x: auto; padding: 10px; border-bottom: 1px solid var(--cizgi); flex: none; }
.suzgec button { flex: none; min-height: 36px; border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--soluk); background: none; }
.suzgec button[aria-pressed="true"] { background: var(--vurgu-zemin); color: var(--yazi); border-color: transparent; }
.sira-liste { overflow-y: auto; min-height: 0; }
.sira-liste > p { padding: 12px; }
.is { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; width: 100%; min-height: 64px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--cizgi); padding: 10px 12px; color: var(--yazi); }
.is[aria-current="true"] { background: var(--kart2); box-shadow: inset 3px 0 0 var(--vurgu); }
.is .ust-satir { display: flex; justify-content: space-between; gap: 8px; width: 100%; align-items: center; }
.is .tur { font: 500 10.5px var(--rakam); letter-spacing: .1em; text-transform: uppercase; color: var(--silik); }
.is small { color: var(--silik); font-size: 12px; }
.harita { position: relative; min-width: 0; min-height: 0; background: var(--kara); z-index: 0; }
.kule > .harita { height: 100%; }
.ayrinti { border-left: 1px solid var(--cizgi); background: var(--kart); overflow-y: auto; min-height: 0; min-width: 0; }
.kart-ayr { padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.kart-ayr h4, .panelkart h4 { margin: 0; font: 500 11px var(--rakam); letter-spacing: .1em; text-transform: uppercase; color: var(--silik); }
.bas { font: 600 16px var(--baslik); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alt-serit { grid-column: 1 / -1; border-top: 1px solid var(--cizgi); background: var(--kart); overflow-x: auto; }
.alt-serit > p { padding: 12px 14px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.alt-serit table { min-width: 760px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
td.gerekce { white-space: normal; min-width: 200px; }
th { font: 500 10.5px var(--rakam); letter-spacing: .1em; text-transform: uppercase; color: var(--silik); }
tbody tr:last-child td { border-bottom: 0; }
.alt-serit tbody tr { cursor: pointer; height: var(--dokun); }
.alt-serit tbody tr:hover, .alt-serit tbody tr:focus-visible { background: var(--kart2); }
.tablo-sar { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 8px; }

/* Harita işaretleri (Leaflet divIcon) */
.pin-kap { background: none; border: 0; }
.pin { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); }
.pin .sayac { font-size: 10.5px; padding: 2px 7px; box-shadow: 0 0 0 2px var(--kara); }
.pin.secili .sayac { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.pin .plaka { font-size: 10px; } .pin .plaka span { padding: 1px 5px; }
.pin small { font: 500 9.5px var(--rakam); color: var(--soluk); background: var(--kara); padding: 0 3px; border-radius: 2px; white-space: nowrap; }
.pin.eski { opacity: .5; }
.nokta { display: block; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--vurgu); background: var(--kara); transform: translate(-50%, -50%); }
.nokta.birakis { border-radius: 3px; background: var(--vurgu); }
.lejant { background: #0e131bd9; border: 1px solid var(--cizgi); border-radius: 6px; padding: 6px 9px; font-size: 11.5px; color: var(--soluk); display: flex; flex-direction: column; gap: 3px; }
.lejant span { display: flex; gap: 6px; align-items: center; }
.lejant i { width: 8px; height: 8px; border-radius: 50%; background: var(--yakin); flex: none; }
.lejant i.kare { border-radius: 2px; background: #f4f5f7; }
/* OSM döşemeleri açık renkli; koyu temaya CSS süzgeciyle uyarlanır */
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.leaflet-container { background: var(--kara); font: 12px var(--govde); }
.leaflet-control-attribution { background: #0e131bcc !important; color: var(--soluk) !important; }
.leaflet-control-attribution a { color: var(--vurgu) !important; }
.leaflet-bar a { background: var(--kart2); color: var(--yazi); border-color: var(--cizgi); width: 36px; height: 36px; line-height: 36px; }

/* Yan sayfalar */
.yan { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px; align-items: start; }
.panelkart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panelkart.genis { grid-column: 1 / -1; }
.plaka-bas { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.kisi, .ayar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.kisi:last-child, .ayar:last-child { border-bottom: 0; }
.kisi > span:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.kisi small, .ayar small { display: block; color: var(--silik); font-size: 12px; }
.ayar b { font-size: 14px; font-weight: 600; }
.bildirim { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; width: 100%; min-height: var(--dokun); padding: 10px; text-align: left; background: none; border: 1px solid transparent; border-bottom-color: var(--cizgi); border-radius: 6px; color: var(--yazi); }
.bildirim.secili-b { background: var(--kart2); border-color: var(--vurgu); }
.bildirim > div:first-child { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.bildirim small { color: var(--silik); font-size: 12px; }
.bildirim-metin { color: var(--soluk); font-size: 13px; }
.okuma { flex: 0 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--soluk); }
.cubuk { height: 8px; background: var(--kart2); border-radius: 999px; overflow: hidden; }
.cubuk i { display: block; height: 100%; background: var(--vurgu); border-radius: 999px; }
.satir-dugme { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid var(--cizgi); text-align: left; color: var(--yazi); }
.satir-dugme:hover { background: var(--kart2); }
.satir-dugme .kim small { display: block; color: var(--silik); font-size: 12px; }

/* Plaka sayfası */
.plaka-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 14px; align-items: start; }
.pl-ana { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; min-width: 0; }
.pl-yan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.arac-kart { background: linear-gradient(165deg, #3565d6, #2244a0); border-radius: 12px; padding: 14px; color: #fff; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.arac-kart .kanit { width: 100%; }
.arac-ad { font: 600 16px var(--baslik); }
.arac-ad small { display: block; font: 400 12px var(--govde); color: #d5defa; margin-top: 2px; }
.arac-sayi { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; width: 100%; border-top: 1px solid #ffffff33; padding-top: 10px; font-size: 13px; }
.arac-sayi dt { color: #d5defa; } .arac-sayi dd { margin: 0; text-align: right; font-weight: 500; }
.bilgi-kart { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.bilgi-sol, .bilgi-sag { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.surucu { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.surucu .kanit { width: 64px; }
.surucu .kim { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.surucu .kim small { display: block; color: var(--silik); font-size: 12px; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--baslik); color: #0b1220; background: linear-gradient(140deg, #a9c8ff, #6f9cf0); }
.avatar.ikinci { background: linear-gradient(140deg, #9fe3c8, #56b895); }
.is-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.is-sol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kucuk-harita { height: 260px; border-radius: 8px; overflow: hidden; }
.is-kart { background: var(--kart2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.is-kart .ayar { border: 0; padding: 0; font-size: 13px; color: var(--soluk); }
.pl-ana > .panelkart.genis { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .kule { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 480px auto auto; }
  .ayrinti { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cizgi); }
  .plaka-duzen { grid-template-columns: 1fr; }
}

/* Telefon: tek sütun. Sıra: göstergeler, kısa harita şeridi, sıra, ayrıntı, plakalar */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .ust-cubuk { position: static; }
  .ust-cubuk { flex-wrap: wrap; gap: 4px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .ust-cubuk .marka { order: 0; }
  .hesap { order: 1; margin-left: auto; }
  .hesap #kimlik { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .sekme-cubuk { order: 2; flex-basis: 100%; }
  .kule { display: flex; flex-direction: column; }
  .tepe { order: 0; gap: 8px 16px; }
  .tepe .saat { display: none; }
  .kule > .harita { order: 1; height: 220px; flex: none; }
  .sira { order: 2; border-right: 0; border-top: 1px solid var(--cizgi); }
  .sira-liste { max-height: 50vh; }
  .ayrinti { order: 3; border-top: 1px solid var(--cizgi); overflow: visible; }
  .alt-serit { order: 4; }
  .lejant { display: none; }
  .yan, .plaka-duzen { padding: 10px; grid-template-columns: 1fr; }
  .pl-ana, .is-govde { grid-template-columns: 1fr; }
  .kucuk-harita { height: 200px; }
  .ikili { grid-template-columns: 1fr; gap: 0; }
  .ikili dd { margin-bottom: 6px; }
  .dugmeler .dugme { flex: 1 1 auto; }
  .duyuru { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }