:root {
  --bg: #080d10;
  --console: #11181c;
  --console-2: #172229;
  --panel: #1a252b;
  --panel-soft: #223038;
  --ink: #f1f7f4;
  --muted: #8da09b;
  --line: #33434b;
  --green: #48d17a;
  --amber: #f0b13b;
  --red: #f05d4f;
  --cyan: #5cc7d9;
  --blue: #4292e3;
  --sky: #3f86b9;
  --ground: #9a6734;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(92, 199, 217, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(92, 199, 217, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, rgba(66, 146, 227, 0.2), transparent 36%),
    var(--bg);
  background-size: 42px 42px, 42px 42px, cover, cover;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: linear-gradient(180deg, #0d1519, #121d22);
  border-right: 1px solid #26353d;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 42%, var(--cyan) 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 0 42%, var(--amber) 42% 58%, transparent 58%),
    #10191d;
  border: 1px solid #445861;
  box-shadow: inset 0 0 0 4px #1e2a30;
}

.brand strong,
.brand span,
.device-mini span,
.device-mini strong {
  display: block;
}

.brand strong {
  font-size: 16px;
}

.brand span,
.device-mini span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  color: #d8e5e1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
}

.nav-list a.active,
.nav-list a:hover {
  background: #172329;
  border-color: #304047;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 6px;
  color: var(--cyan);
  background: #0c1316;
  font-size: 11px;
  font-weight: 800;
}

.device-mini {
  margin-top: auto;
  padding: 14px;
  border-radius: 8px;
  background: #0c1316;
  border: 1px solid #2d3b42;
}

.device-mini strong {
  margin: 5px 0;
}

.main {
  padding: 22px;
  display: grid;
  gap: 16px;
}

.topbar,
.instrument-head,
.panel-head,
.sensor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar {
  min-height: 58px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.18;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 15px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ghost-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid #3e535d;
  border-radius: 8px;
  background: #10191d;
  font-weight: 900;
}

.icon-button,
.primary-button {
  border: 1px solid #3e535d;
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  background: #18252b;
}

.icon-button {
  width: 44px;
  color: var(--amber);
  font-weight: 900;
}

.ship-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ship-button {
  min-height: 86px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, var(--panel), #141d22);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-content: center;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ship-button:hover,
.ship-button.active {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: linear-gradient(180deg, #1b2a31, #151f24);
}

.ship-button span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #071014;
  font-weight: 900;
  background: var(--cyan);
}

.ship-button.od span {
  background: var(--amber);
}

.ship-button.of span {
  background: var(--green);
}

.ship-button.ox span {
  background: var(--cyan);
}

.ship-button strong {
  font-size: 17px;
}

.ship-button em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.primary-button {
  padding: 0 16px;
  color: #071014;
  background: var(--amber);
  font-weight: 900;
}

.annunciator-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.annunciator {
  min-height: 70px;
  padding: 12px;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 3px 10px;
  align-content: center;
  background: #11191d;
  border: 1px solid #314047;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.annunciator span {
  grid-row: span 2;
  width: 12px;
  height: 12px;
  align-self: center;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(92, 199, 217, 0.55);
}

.annunciator.ok span {
  background: var(--green);
  box-shadow: 0 0 16px rgba(72, 209, 122, 0.6);
}

.annunciator.warn span {
  background: var(--amber);
  box-shadow: 0 0 16px rgba(240, 177, 59, 0.6);
}

.annunciator strong {
  font-size: 14px;
}

.annunciator em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.instrument,
.panel,
.sensor-card {
  background: linear-gradient(180deg, var(--panel), #141d22);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.instrument {
  min-height: 356px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.instrument-head.centered {
  text-align: center;
  justify-content: center;
}

.round-gauge,
.compass,
.attitude-dial {
  position: relative;
  margin: 0 auto;
}

.round-gauge {
  width: min(100%, 226px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.round-gauge svg {
  width: 100%;
  height: 100%;
}

.gauge-face {
  fill: #0b1215;
  stroke: #50656e;
  stroke-width: 3;
}

.gauge-range {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.range-red {
  stroke: var(--red);
}

.range-yellow {
  stroke: var(--amber);
}

.range-green {
  stroke: var(--green);
}

.ticks line {
  stroke: #dce8e4;
  stroke-width: 3;
  stroke-linecap: round;
}

.gauge-needle {
  position: absolute;
  width: 4px;
  height: 82px;
  left: calc(50% - 2px);
  top: calc(50% - 82px);
  transform-origin: 50% 100%;
  transform: rotate(-130deg);
  background: var(--amber);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(240, 177, 59, 0.65);
  transition: transform 450ms ease;
}

.gauge-value,
.compass-value {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
}

.gauge-value strong,
.compass-value strong {
  font-size: 32px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gauge-value span,
.compass-value span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.readout-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px 12px;
  align-items: baseline;
  padding: 12px;
  border-radius: 8px;
  background: #0d1519;
  border: 1px solid #2b3940;
}

.readout-row.two {
  grid-template-columns: auto 1fr;
}

.readout-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.readout-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.attitude-dial {
  width: min(100%, 252px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 10px solid #0a0f12;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #52656e, 0 20px 32px rgba(0, 0, 0, 0.28);
  background: #0a1216;
}

.attitude-roll, .attitude-pitch {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 220ms ease;
}

.attitude-sky,
.attitude-ground,
.horizon-line {
  position: absolute;
  left: -100%;
  right: -100%;
}

.attitude-sky { top: -150%; height: 200%; background: linear-gradient(#4f9fd6, #2f6fa0); }
.attitude-ground { top: 50%; height: 200%; background: linear-gradient(#b27e3e, #6f461f); }
.horizon-line { top: 50%; height: 3px; margin-top: -1.5px; background: #fff7e0; box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }

.pitch-ladder { position: absolute; inset: 0; pointer-events: none; }
.pitch-ladder .pl-row {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transform: translateY(-50%);
}
.pitch-ladder .pl-row i { width: 30px; height: 2px; background: rgba(255, 255, 255, 0.9); }
.pitch-ladder .pl-row b { font-size: 10px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

.roll-scale { position: absolute; inset: 0; pointer-events: none; }
.roll-scale .rs-tick { position: absolute; left: 50%; top: 50%; width: 2px; height: 9px; margin-left: -1px; background: #cfe8ef; transform-origin: 0 0; }
.roll-scale .rs-tick.zero { width: 3px; height: 13px; margin-left: -1.5px; background: #fff; }
.roll-scale .rs-num { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; font-size: 9px; font-weight: 800; color: #aebfc6; }

.roll-pointer {
  position: absolute; left: 50%; top: 13px; margin-left: -7px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid #f59e0b; filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.6)); z-index: 5;
}

.aircraft-wings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;
}

.aircraft-wings i,
.aircraft-wings b {
  display: block;
  background: #ffd23f;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

.aircraft-wings i {
  width: 56px;
  height: 6px;
}

.aircraft-wings b {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.triple-readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.triple-readout.attitude-readout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.triple-readout div {
  padding: 10px;
  border-radius: 8px;
  background: #0d1519;
  border: 1px solid #2b3940;
  text-align: center;
}

.triple-readout span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.triple-readout strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.compass {
  width: min(100%, 226px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #0a0f12;
  box-shadow: inset 0 0 0 3px #52656e;
  overflow: hidden;
  background: #0b1215;
}

.compass-card {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 1px dashed #5d717a;
  transition: transform 450ms ease;
}

.compass-card::before,
.compass-card::after {
  content: "";
  position: absolute;
  background: #42555e;
}

.compass-card::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.compass-card::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.compass-card span {
  position: absolute;
  font-size: 18px;
  font-weight: 900;
}

.north {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--red);
}

.east {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.south {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.west {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.course-bug {
  position: absolute;
  left: calc(50% - 11px);
  top: 9px;
  width: 22px;
  height: 32px;
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
  background: var(--amber);
  z-index: 3;
}

.compass-value {
  inset: 0;
}

.yaw-gyro {
  margin-top: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: center;
}

.yaw-head h3 {
  font-size: 16px;
}

.yaw-head {
  justify-self: stretch;
}

.gyro-dial {
  position: relative;
  width: min(100%, 226px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid #070c0f;
  overflow: hidden;
  background: #081013;
  box-shadow: inset 0 0 0 2px #4d626b, 0 10px 20px rgba(0, 0, 0, 0.32);
}

.gyro-card {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed #55717a;
  background:
    radial-gradient(circle, transparent 0 50%, rgba(92, 199, 217, 0.08) 51% 52%, transparent 53%),
    conic-gradient(from 0deg, rgba(92, 199, 217, 0.14) 0deg 1deg, transparent 1deg 10deg);
  transition: transform 450ms ease;
}

.gyro-card span,
.gyro-card .mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
}

.gyro-card span {
  font-size: 18px;
  font-weight: 900;
}

.gyro-n {
  color: var(--red);
  transform: rotate(0deg) translate(-50%, -93px) rotate(0deg);
}

.gyro-e {
  transform: rotate(90deg) translate(-50%, -93px) rotate(-90deg);
}

.gyro-s {
  transform: rotate(180deg) translate(-50%, -93px) rotate(-180deg);
}

.gyro-w {
  transform: rotate(270deg) translate(-50%, -93px) rotate(-270deg);
}

.gyro-card .mark {
  width: 2px;
  height: 14px;
  background: #dbe7e3;
  border-radius: 999px;
}

.gyro-card .m030 { transform: rotate(30deg) translateY(-94px); }
.gyro-card .m060 { transform: rotate(60deg) translateY(-94px); }
.gyro-card .m120 { transform: rotate(120deg) translateY(-94px); }
.gyro-card .m150 { transform: rotate(150deg) translateY(-94px); }
.gyro-card .m210 { transform: rotate(210deg) translateY(-94px); }
.gyro-card .m240 { transform: rotate(240deg) translateY(-94px); }
.gyro-card .m300 { transform: rotate(300deg) translateY(-94px); }
.gyro-card .m330 { transform: rotate(330deg) translateY(-94px); }

.lubber-line {
  position: absolute;
  left: calc(50% - 7px);
  top: 4px;
  width: 14px;
  height: 34px;
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
  background: var(--amber);
  z-index: 4;
  filter: drop-shadow(0 0 8px rgba(240, 177, 59, 0.5));
}

.gyro-center {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff7d2;
  z-index: 5;
}

.gyro-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 3;
}

.gyro-value strong {
  margin-top: 34px;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gyro-value span {
  margin-top: 72px;
  position: absolute;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  gap: 16px;
}

.panel,
.sensor-card {
  padding: 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #071014;
  background: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.pill.muted {
  background: var(--cyan);
}

.map-stage {
  margin-top: 14px;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #38525c;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(135deg, #315e68, #18475a 45%, #0f2e40);
  background-size: 38px 38px, 38px 38px, cover;
}

.live-map-stage {
  isolation: isolate;
}

.map-canvas,
.fallback-plot {
  position: absolute;
  inset: 0;
}

.map-canvas {
  z-index: 1;
  background: #0c1519;
}

.map-canvas:empty {
  display: none;
}

.fallback-plot {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(92, 199, 217, 0.25), transparent 24%),
    radial-gradient(circle at 82% 70%, rgba(240, 177, 59, 0.2), transparent 26%),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(20deg, transparent 0 46%, rgba(8, 13, 16, 0.35) 46% 52%, transparent 52%);
  background-size: cover, cover, 38px 38px, 38px 38px, cover;
}

.track-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.route-shadow,
.route-line {
  fill: none;
  stroke-linecap: round;
}

.route-shadow {
  stroke: rgba(0, 0, 0, 0.34);
  stroke-width: 12;
}

.route-line {
  stroke: var(--amber);
  stroke-width: 5;
  stroke-dasharray: 9 12;
}

.track-dot {
  fill: #ffffff;
  stroke: var(--blue);
  stroke-width: 3;
}

.track-dot.current {
  fill: var(--amber);
  stroke: #ffffff;
}

.plot-ship {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 400ms ease;
  z-index: 4;
}

.plot-ship span,
/* Vessel marker: two heading vectors — COG (GPS) + HDG (Gyro/BNO08x) */
.vmark { position: absolute; inset: 0; pointer-events: none; }
.vmark-dot {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: #ffffff; border: 3px solid #22d3ee;
  box-shadow: 0 0 10px rgba(34,211,238,.9), 0 2px 6px rgba(0,0,0,.55); z-index: 4;
}
.vmark-line {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 70px; margin: -70px 0 0 -2px;
  transform-origin: 50% 100%; transition: transform .45s ease; z-index: 2; border-radius: 2px;
}
.vmark-line::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.vmark-line.cog { background: linear-gradient(180deg, #22d3ee, rgba(34,211,238,.12)); }
.vmark-line.cog::before { border-bottom: 11px solid #22d3ee; }
.vmark-line.hdg { height: 84px; margin-top: -84px; z-index: 3; background: linear-gradient(180deg, #f59e0b, rgba(245,158,11,.12)); }
.vmark-line.hdg::before { border-bottom: 11px solid #f59e0b; }

/* Map legend (bottom-left) with live COG/HDG values */
.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 500; pointer-events: none;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(6,16,30,.82); border: 1px solid var(--tl-line, #1f3340); border-radius: 9px;
  padding: 8px 11px; font-size: 11px; font-weight: 700; color: #cfe2ea;
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.map-legend i { width: 16px; height: 3px; border-radius: 2px; flex: none; }
.map-legend .lg-sog { background: #e2e8f0; width: 9px; height: 9px; border-radius: 50%; }
.map-legend .lg-cog { background: #22d3ee; }
.map-legend .lg-hdg { background: #f59e0b; }
.map-legend b { color: #fff; font-variant-numeric: tabular-nums; margin-left: 2px; }
.vessel-hull { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }

/* Harita uzerinde aci etiketleri (HDG / COG cizgi uclari) */
.map-angle-label { background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; }
.map-angle-label span {
  display: inline-block; transform: translate(-50%, -50%);
  padding: 2px 7px; border-radius: 999px;
  font: 700 12px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .3px; white-space: nowrap; color: #04121a;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.85);
}
.map-angle-label.hdg span { background: #f59e0b; }
.map-angle-label.cog span { background: #22d3ee; }

/* ===== MarineTraffic-style Vessel Compass ===== */
.navcompass {
  position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 4px auto 0;
  border-radius: 50%; background: radial-gradient(circle at 50% 42%, #eef2f4, #d4dce1);
  box-shadow: inset 0 0 0 2px #b9c4cb, 0 12px 26px rgba(0,0,0,.4);
}
.nc-rose { position: absolute; inset: 6px; }
.nc-rose svg { display: block; width: 100%; height: 100%; }
.nc-index {
  position: absolute; top: -1px; left: 50%; margin-left: -6px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 19px solid #f43f5e;
  z-index: 6; filter: drop-shadow(0 2px 4px rgba(244,63,94,.55));
}
/* Heading (gyro): kucuk siyah cizgili ok (burundan) */
.nc-hdg {
  position: absolute; left: 50%; bottom: 50%; width: 2px; height: 33%; margin-left: -1px;
  transform-origin: 50% 100%; z-index: 6; background: #11181f; border-radius: 2px; transition: transform .45s ease;
}
.nc-hdg::before {
  content: ""; position: absolute; top: -7px; left: 50%; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #11181f;
}

/* ===== Klinometre (Plastimo tarzi heel gostergesi) ===== */
.clino { position: relative; width: min(100%, 520px); aspect-ratio: 300 / 105; margin: 10px auto 4px; }
.clino-scale { position: absolute; inset: 0; width: 100%; height: 100%; }
.clino-marker { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.55); transition: left .5s ease, top .5s ease; }
.clino-marker.cur { background: #2563eb; box-shadow: 0 0 11px rgba(37,99,235,.95), 0 2px 5px rgba(0,0,0,.5); z-index: 5; }
.clino-marker.mport { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.9), 0 2px 5px rgba(0,0,0,.5); z-index: 3; }
.clino-marker.mstbd { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.9), 0 2px 5px rgba(0,0,0,.5); z-index: 3; }
.triple-readout.clino-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clino-readout #clinoCurVal { color: #60a5fa; }
.clino-readout #clinoMaxPortVal { color: #f87171; }
.clino-readout #clinoMaxStbdVal { color: #34d399; }

/* ===== Modern Temperature / Environment ===== */
.tgauge { position: relative; width: min(100%, 224px); margin: 4px auto 0; }
.tgauge-svg { display: block; width: 100%; height: auto; }
#tgaugeNeedle { transition: transform .5s ease; }
.tgauge-center { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.tgauge-center strong { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; transition: color .4s ease; }
.tgauge-center span { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; color: var(--muted, #8aa6b3); text-transform: uppercase; letter-spacing: .04em; }
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.env-cell { padding: 9px 6px; border-radius: 9px; background: #0d1519; border: 1px solid #2b3940; text-align: center; }
.env-cell span { display: block; font-size: 8.5px; font-weight: 800; color: var(--muted, #8aa6b3); letter-spacing: .02em; }
.env-cell b { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--muted, #8aa6b3); }
.env-cell b strong { font-size: 17px; font-weight: 800; color: #eaf2f5; font-variant-numeric: tabular-nums; }
.env-cell.hl { border-color: rgba(56,189,248,.4); background: linear-gradient(180deg, rgba(56,189,248,.1), #0d1519); }
.env-cell.hl b strong { color: #38bdf8; }

/* Klinometre kalibrasyon (tare) */
.clino-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.clino-offset { font-size: 10px; font-weight: 700; color: #f59e0b; font-variant-numeric: tabular-nums; }
.clino-zero { background: var(--tl-panel, #0d1519); border: 1px solid var(--tl-line, #2b3940); color: #cfe2ea; border-radius: 8px; padding: 5px 14px; font-weight: 800; font-size: 12px; cursor: pointer; }
.clino-zero:hover { border-color: var(--tl-cyan, #22d3ee); color: #fff; box-shadow: 0 0 10px rgba(34,211,238,.22); }
.clino-zero:active { transform: translateY(1px); }
.nc-cog {
  position: absolute; left: 50%; top: 9%; width: 4px; height: 82%; margin-left: -2px;
  transform-origin: 50% 50%; z-index: 4; pointer-events: none; border-radius: 2px;
  background: #ea580c; transition: transform .45s ease;
}
.nc-cog::before {
  content: ""; position: absolute; top: -12px; left: 50%; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid #ea580c;
}
.nc-ship {
  position: absolute; left: 50%; top: 50%; width: 30%; height: 56%; z-index: 5;
  transform: translate(-50%,-50%); transform-origin: 50% 50%; transition: transform .45s ease;
}
.nc-ship svg { display: block; width: 100%; height: 100%; fill: #1d4ed8; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.nc-speed {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 7;
  background: #ffffff; color: #1f2933; font-size: 13px; font-weight: 800; padding: 3px 8px;
  border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.3); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.nc-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.nc-readout div { padding: 9px; border-radius: 8px; background: #0d1519; border: 1px solid #2b3940; text-align: center; }
.nc-readout span { display: block; font-size: 9px; font-weight: 800; color: var(--muted, #8aa6b3); letter-spacing: .03em; }
.nc-readout strong { display: block; margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; color: #eaf2f5; }
.nc-readout strong.is-cog { color: #fb923c; }

/* Vessel Compass — full-width (second dial) + side stats + status bar */
.nav-wide { grid-column: 1 / -1; }
.navwrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.navwrap .navcompass { flex: 0 0 auto; width: min(46%, 300px); margin: 0; }
.nav-stats { flex: 1 1 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: center; }
.nav-stats .nst { padding: 10px 12px; border-radius: 9px; background: #0d1519; border: 1px solid #2b3940; }
.nav-stats .nst span { display: block; font-size: 9px; font-weight: 800; color: var(--muted, #8aa6b3); letter-spacing: .03em; }
.nav-stats .nst b { display: block; margin-top: 3px; font-size: 13px; font-weight: 800; color: var(--muted, #8aa6b3); }
.nav-stats .nst b strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: #eaf2f5; }
.nav-stats .nst b strong.is-cog { color: #fb923c; }
.nav-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.nav-status span { padding: 6px 12px; border-radius: 999px; background: #0d1519; border: 1px solid #2b3940; color: #cfe2ea; font-weight: 700; font-size: 12px; }
.nav-status .nst-state { background: linear-gradient(180deg, rgba(34,197,94,.18), #0d1519); border-color: rgba(34,197,94,.4); color: #d6f5e2; }
@media (max-width: 560px) {
  .navwrap .navcompass { width: min(92%, 280px); margin: 0 auto; }
  .nav-stats { flex-basis: 100%; }
}

.plot-status {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(8, 13, 16, 0.78);
  border: 1px solid rgba(92, 199, 217, 0.28);
  font-size: 12px;
  font-weight: 800;
}

.leaflet-container {
  background: #0c1519;
  color: #dce8e4;
  font: inherit;
}

.leaflet-tile {
  filter: saturate(0.72) brightness(0.72) contrast(1.15);
}

.leaflet-control-attribution {
  background: rgba(8, 13, 16, 0.72) !important;
  color: #b7c7c2 !important;
}

.leaflet-control-attribution a {
  color: var(--cyan) !important;
}

.vessel-map-marker {
  width: 180px;
  height: 180px;
  pointer-events: none;
}

.service-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.cycle-ring {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 158px;
}

.cycle-ring svg {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}

.ring-bg,
.ring-progress {
  fill: none;
  stroke-width: 10;
}

.ring-bg {
  stroke: #2f4048;
}

.ring-progress {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset 400ms ease;
}

.cycle-ring > div {
  position: absolute;
  display: grid;
  place-items: center;
}

.cycle-ring strong {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.cycle-ring span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.service-list,
.metric-list {
  display: grid;
  gap: 8px;
}

.service-list div,
.metric-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.service-list span,
.metric-list dt {
  color: var(--muted);
  font-size: 13px;
}

.service-list strong,
.metric-list dd {
  margin: 0;
  text-align: right;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.sensor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sensor-card {
  min-height: 236px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.sensor-head {
  justify-content: flex-start;
}

.sensor-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  background: #0d1519;
  border: 1px solid #354850;
}

.sensor-icon::before,
.sensor-icon::after {
  content: "";
  position: absolute;
}

.weather-icon::before {
  inset: 10px;
  border-radius: 50%;
  background: var(--amber);
}

.probe-icon::before {
  left: 18px;
  top: 7px;
  width: 7px;
  height: 24px;
  border-radius: 999px;
  background: var(--red);
}

.probe-icon::after {
  left: 14px;
  top: 25px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--red);
}

.gps-icon::before {
  left: 10px;
  top: 8px;
  width: 22px;
  height: 22px;
  border: 4px solid var(--cyan);
  border-radius: 50%;
  border-bottom-color: transparent;
}

.link-icon::before {
  left: 9px;
  right: 9px;
  top: 13px;
  height: 4px;
  background: var(--green);
  box-shadow: 0 8px 0 var(--green), 0 16px 0 var(--green);
}

.probe-reading {
  display: grid;
  gap: 6px;
  padding: 12px 0 4px;
}

.probe-reading strong {
  font-size: 34px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.probe-reading span {
  color: var(--muted);
}

.small-status {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.small-status.ok {
  color: #071014;
  background: var(--green);
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.event-log {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.event-log li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.event-log time {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
}

.event-log span {
  font-size: 13px;
}

@media (max-width: 1220px) {
  .app-shell {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .brand div,
  .nav-list span:last-child,
  .device-mini {
    display: none;
  }

  .sidebar {
    align-items: center;
  }

  .cockpit-grid,
  .secondary-grid {
    grid-template-columns: 1fr;
  }

  .ship-selector {
    grid-template-columns: 1fr;
  }

  .sensor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    flex-direction: row;
    justify-content: space-between;
  }

  .nav-list {
    grid-auto-flow: column;
  }

  .main {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .annunciator-strip,
  .ship-selector,
  .sensor-grid {
    grid-template-columns: 1fr;
  }

  .instrument {
    min-height: auto;
  }

  .attitude-dial {
    width: min(100%, 280px);
  }
}

/* ===== SMC B: responsive + live-track optimization (added) ===== */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secondary-grid { grid-template-columns: 1fr; }
  .sensor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-stage, .map-canvas { min-height: 420px; }
}
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .top-actions { flex-wrap: wrap; gap: 8px; }
  .ship-selector { grid-template-columns: 1fr; }
  .annunciator-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-grid { grid-template-columns: 1fr; }
  .sensor-grid { grid-template-columns: 1fr; }
  .map-stage, .map-canvas { min-height: 320px; }
  .main { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 20px; line-height: 1.2; }
}
/* ================= Track Live AR-GE 2-pane redesign ================= */
:root { --tl-bg:#070d18; --tl-panel:#0d1626; --tl-line:#1d2940; --tl-cyan:#22d3ee; --tl-txt:#e6eef8; --tl-dim:#7b8aa3; }
.tl-app * { box-sizing:border-box; }
body { margin:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.10), transparent 60%), var(--tl-bg); color:var(--tl-txt); font-family:'Inter',system-ui,Arial,sans-serif; }
.tl-app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.tl-top { display:flex; align-items:center; gap:16px; padding:10px 16px; background:rgba(13,22,38,.85); border-bottom:1px solid var(--tl-line); backdrop-filter:blur(6px); flex-wrap:wrap; }
.tl-brand { display:flex; align-items:center; gap:10px; }
.tl-mark { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--tl-cyan),#3b82f6); box-shadow:0 0 16px rgba(34,211,238,.5); }
.tl-brand strong { display:block; font-size:15px; }
.tl-brand span { font-size:11px; color:var(--tl-dim); }
.tl-ships { display:flex; gap:8px; flex:1; min-width:200px; }
.tl-status { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tl-pill { background:var(--tl-panel); border:1px solid var(--tl-line); border-radius:9px; padding:6px 12px; text-align:center; min-width:62px; }
.tl-pill strong { display:block; font-size:14px; color:var(--tl-cyan); font-family:'JetBrains Mono',monospace; }
.tl-pill em { font-size:9px; color:var(--tl-dim); font-style:normal; text-transform:uppercase; letter-spacing:.06em; }
.tl-pill.ok strong { color:#34d399; }
.tl-split { display:flex; flex:1; min-height:0; }
.tl-left { flex:0 0 46%; min-width:280px; overflow:auto; padding:14px; }
.gauge-wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; grid-auto-flow:dense; }
.tl-divider { flex:0 0 12px; cursor:col-resize; display:flex; align-items:center; justify-content:center; }
.tl-divider span { width:4px; height:48px; border-radius:4px; background:var(--tl-cyan); opacity:.45; }
.tl-divider:hover span { opacity:1; box-shadow:0 0 12px var(--tl-cyan); }
.tl-right { flex:1; min-width:300px; display:flex; flex-direction:column; min-height:0; padding:14px 14px 14px 2px; }
.map-tabs { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.map-tab { position:relative; background:linear-gradient(180deg,rgba(24,40,53,.6),#0e1a24); border:1.5px solid #2c4860; color:#d4e6ee; border-radius:11px; padding:9px 15px; font-weight:800; cursor:pointer; font-size:13px; letter-spacing:.3px; white-space:nowrap; transition:transform .15s, box-shadow .2s, border-color .2s, background .2s, color .2s; }
.map-tab:hover { transform:translateY(-2px); border-color:var(--tl-cyan); color:#fff; box-shadow:0 6px 18px rgba(34,211,238,.28); }
.map-tab.active { color:#04121a; border-color:#7fe9fb; background:linear-gradient(180deg,#6fe3f7,#1fb6d6); box-shadow:0 0 0 1px rgba(127,233,251,.6), 0 0 24px rgba(34,211,238,.6), 0 6px 16px rgba(0,0,0,.4); transform:translateY(-1px); }
.map-coords { margin-left:auto; font-size:11px; color:var(--tl-dim); font-family:'JetBrains Mono',monospace; }
.map-body { flex:1; position:relative; border:1px solid var(--tl-line); border-radius:12px; overflow:hidden; min-height:0; background:#06101e; }
.map-pane { position:absolute; inset:0; display:none; }
.map-pane.active { display:block; }
.map-pane .map-canvas { position:absolute; inset:0; }
.motion-pane { background:#0a1119; }
#windyFrame { width:100%; height:100%; border:0; }
.tl-right .event-log { margin:10px 0 0; padding:0; list-style:none; max-height:92px; overflow:auto; font-size:11px; }
.thermo-instrument .thermo { display:flex; align-items:flex-end; justify-content:center; gap:16px; padding:8px 0 4px; }
.thermo-tube { position:relative; width:24px; height:128px; border:2px solid var(--tl-line); border-bottom:none; border-radius:12px 12px 0 0; background:#0a1525; overflow:hidden; }
.thermo-fill { position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg,#f43f5e,#fb923c,#22d3ee); transition:height .6s ease; }
.thermo-scale { position:absolute; inset:0 -26px 0 28px; display:flex; flex-direction:column; justify-content:space-between; font-size:8px; color:var(--tl-dim); }
.thermo-bulb { width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fb7185,#e11d48); box-shadow:0 0 14px rgba(244,63,94,.6); margin-left:-30px; align-self:flex-end; }
.thermo-read { margin-left:18px; }
.thermo-read strong { font-size:28px; font-family:'JetBrains Mono',monospace; color:#fb923c; }
.thermo-read span { display:block; font-size:10px; color:var(--tl-dim); }

/* ===== Temperature GAUGE (thermometre yerine, 6 renk bölgesi) ===== */
.temp-instrument .round-gauge.temp-gauge { width: min(100%, 210px); }
.temp-zones path { fill: none; stroke-linecap: butt; }
.temp-gauge .gauge-value strong { font-size: 30px; transition: color .4s ease; }
.temp-gauge .gauge-needle { transition: transform .45s ease, background .4s ease, box-shadow .4s ease; }
.temp-legend { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 5px 14px; margin: 12px 0 2px; }
.temp-legend .tl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; color: var(--muted, #8aa6b3); letter-spacing: .02em; white-space: nowrap; }
.temp-legend .tl-leg i { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: 0 0 5px rgba(0,0,0,.45); }

/* ===== Prettier compasses / dials + Windy vessel marker ===== */
/* Course compass = NORTH-UP (card fixed, N always at top) */
.compass { background: radial-gradient(circle at 50% 36%, #15242c 0%, #0a1216 72%); }
.compass.north-up .compass-card { transition: none; border: 1px dashed rgba(123,150,160,.30); }
.compass-card .ctick, .compass-card .clab { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; }
.compass-card .ctick { width: 2px; height: 7px; margin-left: -1px; background: #57707a; border-radius: 2px; }
.compass-card .ctick.maj { height: 13px; width: 2.5px; margin-left: -1.25px; background: #a7bcc3; }
.compass-card .clab { font-size: 11px; font-weight: 800; color: #9db2ba; font-variant-numeric: tabular-nums; }
.compass-card .clab.card { font-size: 15px; font-weight: 900; color: #d6edf3; }
.compass-card .clab.card.n { color: #ff5d5d; text-shadow: 0 0 9px rgba(255,93,93,.55); }
.compass-index { position: absolute; left: calc(50% - 7px); top: -3px; width: 14px; height: 15px; clip-path: polygon(50% 100%, 0 0, 100% 0); background: var(--amber, #f0b13b); z-index: 5; filter: drop-shadow(0 0 6px rgba(240,177,59,.6)); }
.course-arrow { position: absolute; left: calc(50% - 4px); top: 16px; width: 8px; height: calc(50% - 16px); transform-origin: 50% 100%; transition: transform .45s ease; z-index: 4; pointer-events: none; }
.course-arrow i { position: absolute; inset: 0; background: linear-gradient(180deg, #ff6b6b, #c01d1d); clip-path: polygon(50% 0, 100% 30%, 62% 30%, 62% 100%, 38% 100%, 38% 30%, 0 30%); box-shadow: 0 0 12px rgba(239,68,68,.55); }
.compass-hub { position: absolute; left: calc(50% - 6px); top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #9fb4bb); z-index: 5; box-shadow: 0 0 8px rgba(0,0,0,.55); }
.compass-value { z-index: 2; }
.compass.north-up .compass-value strong { margin-top: 30px; }

/* Speed gauge: numbers on outer rim + depth */
.gauge-scale { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gauge-scale .gscale-num { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; font-size: 12px; font-weight: 800; color: #b3c4cb; font-variant-numeric: tabular-nums; }
.speed-instrument .round-gauge { filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }

/* Yaw gyro: subtle depth */
.gyro-dial { background: radial-gradient(circle at 50% 36%, #12222a 0%, #081013 72%); }

/* Windy: vessel-position marker (map is re-centred on the vessel) */
.windy-marker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; display: none; text-align: center; }
.windy-marker.show { display: block; }
.windy-marker .wm-dot { display: block; width: 18px; height: 18px; margin: 0 auto; border-radius: 50%; background: #ff5d5d; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(255,93,93,.6), 0 2px 8px rgba(0,0,0,.6); animation: wmPulse 1.8s ease-out infinite; }
.windy-marker .wm-label { margin-top: 5px; font-size: 10px; font-weight: 900; color: #fff; letter-spacing: .06em; text-shadow: 0 1px 4px #000; }
@keyframes wmPulse { 0% { box-shadow: 0 0 0 0 rgba(255,93,93,.55), 0 2px 8px rgba(0,0,0,.6); } 70% { box-shadow: 0 0 0 18px rgba(255,93,93,0), 0 2px 8px rgba(0,0,0,.6); } 100% { box-shadow: 0 0 0 0 rgba(255,93,93,0), 0 2px 8px rgba(0,0,0,.6); } }

/* Map recenter button (focus map on vessel) */
.map-recenter { color: #cfe8ef; border-color: rgba(34,211,238,.45); }
.map-recenter:hover { color: #fff; background: linear-gradient(180deg, rgba(34,211,238,.18), var(--tl-panel)); box-shadow: 0 0 10px rgba(34,211,238,.22); }
.map-recenter:active { transform: translateY(1px); }
.link-bar { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; padding:10px 12px; background:var(--tl-panel); border:1px solid var(--tl-line); border-radius:10px; font-size:11px; color:var(--tl-dim); }
.link-bar strong, .link-bar b { color:var(--tl-txt); font-family:'JetBrains Mono',monospace; }
@media (max-width:900px) {
  .tl-split { flex-direction:column; overflow:auto; }
  .tl-left { flex:0 0 auto; width:100%; }
  .tl-divider { display:none; }
  .tl-right { min-height:70vh; }
  .gauge-wrap { grid-template-columns:1fr; }
}

/* ===== Roll/Heel · Pitch motion paneli (harita üstü · boyutlandırılabilir) ===== */
.motion-panel { display:block; height:560px; position:relative; overflow:hidden; background:#0a1119; border:1px solid #21384a; border-radius:12px; margin-bottom:8px; flex:none; overflow:hidden; }
.motion-frame { position:absolute; top:50%; left:50%; width:1300px; height:1092px; border:0; transform-origin:center center; transform:translate(-50%,-50%) scale(0.45); background:#0a1119; }
.mp-head { flex:none; display:flex; align-items:center; gap:10px; padding:9px 14px 8px; border-bottom:1px solid rgba(24,41,53,.6); }
.mp-title { display:flex; flex-direction:column; line-height:1.12; }
.mp-title b { font-size:14px; font-weight:900; letter-spacing:.5px; color:#e6f1f7; }
.mp-title em { font-size:9px; font-weight:700; letter-spacing:1.2px; color:#5f7d8c; font-style:normal; margin-top:2px; }
.mp-badge { font-size:11px; font-weight:900; letter-spacing:.5px; padding:4px 13px; border-radius:999px; }
.mp-badge.ok { background:rgba(34,197,94,.16); color:#4ade80; border:1px solid rgba(34,197,94,.45); }
.mp-badge.warn { background:rgba(245,158,11,.16); color:#fbbf24; border:1px solid rgba(245,158,11,.45); }
.mp-badge.danger { background:rgba(239,68,68,.2); color:#f87171; border:1px solid rgba(239,68,68,.5); animation:mpBlink 1s steps(2) infinite; }
.mp-badge.na { background:rgba(120,140,150,.14); color:#9fb3c0; border:1px solid rgba(120,140,150,.3); }
@keyframes mpBlink { 50% { opacity:.45; } }
.mp-age { margin-left:auto; font-size:10px; color:#7f99a8; white-space:nowrap; }
.mp-age b { color:#cfe2ea; font-variant-numeric:tabular-nums; }
.mp-full { margin-left:10px; background:rgba(34,211,238,.14); color:#7fe3f5; border:1px solid rgba(34,211,238,.45); border-radius:7px; padding:4px 11px; font-size:11px; font-weight:800; letter-spacing:.5px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.mp-full:hover { background:rgba(34,211,238,.28); box-shadow:0 0 10px rgba(34,211,238,.4); }
.mp-body { flex:1; min-height:0; display:flex; flex-wrap:nowrap; align-items:stretch; gap:10px; padding:9px 13px 11px; }
.mp-cell { flex:1 1 0; min-width:0; display:flex; flex-direction:column; background:#0a131c; border:1px solid #1c2e3a; border-radius:10px; padding:6px 6px 7px; text-align:center; }
.mp-cap { flex:none; font-size:9px; font-weight:800; letter-spacing:.5px; color:#6f8896; margin-bottom:1px; }
.mp-svg { flex:1; min-height:0; width:100%; display:block; }
.mp-wl { stroke:#2aa9c9; stroke-width:1.6; stroke-dasharray:5 4; opacity:.85; }
.mp-corner { font-size:7.5px; font-weight:800; fill:#6f8a99; text-anchor:middle; letter-spacing:.2px; }
.mp-corner.port { fill:#ef8a8a; }
.mp-corner.stbd { fill:#5fd3a0; }
#mpRollShip, #mpPitchShip { transition:transform .45s ease-out; transform-origin:100px 104px; transform-box:view-box; }
.mp-read { flex:none; margin-top:2px; display:flex; align-items:baseline; justify-content:center; gap:2px; }
.mp-read strong { font-size:27px; font-weight:900; color:#eaf3f7; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.mp-read span { font-size:14px; color:#8fa8b6; margin-right:6px; }
.mp-dir { font-size:11px; font-weight:800; color:#9fb3c0; letter-spacing:.3px; align-self:center; white-space:nowrap; }
.mp-dir.port { color:#f87171; }
.mp-dir.stbd { color:#34d399; }
.mp-stats { flex:0 0 auto; align-self:stretch; display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:center; min-width:198px; }
.mp-stat { background:#0a131c; border:1px solid #1c2e3a; border-radius:9px; padding:8px 11px; }
.mp-stat span { display:block; font-size:9px; font-weight:700; letter-spacing:.4px; color:#6f8896; margin-bottom:3px; }
.mp-stat b { font-size:17px; font-weight:900; color:#eaf3f7; font-variant-numeric:tabular-nums; }
.mp-stat.port b { color:#f87171; }
.mp-stat.stbd b { color:#34d399; }
.mp-resize { flex:none; height:12px; display:flex; align-items:center; justify-content:center; cursor:row-resize; background:#0c1722; border-top:1px solid rgba(24,41,53,.7); }
.mp-resize span { width:48px; height:4px; border-radius:4px; background:#2aa9c9; opacity:.5; transition:opacity .15s; }
.mp-resize:hover span { opacity:1; box-shadow:0 0 10px #2aa9c9; }
@media (max-width:680px) {
  .motion-panel { height:auto; }
  .mp-body { flex-wrap:wrap; }
  .mp-cell { flex:1 1 150px; }
  .mp-svg { height:120px; flex:none; }
  .mp-stats { flex:1 1 100%; }
}
/* ===== Ust baslik toparlama (kompakt) + portal saat/hava cubugu gizle ===== */
.smc-generated-topbar, body > .topbar.smc-generated-topbar { display:none !important; }
.tl-top { padding:6px 14px !important; gap:12px !important; }
.tl-mark { width:26px !important; height:26px !important; }
.tl-brand strong { font-size:13px !important; }
.tl-brand span { font-size:10px !important; }
.tl-ships { gap:6px !important; }
.tl-ships .ship-button { min-height:0 !important; padding:5px 10px !important; gap:2px 8px !important; box-shadow:none !important; }
.tl-ships .ship-button span { width:26px !important; height:26px !important; font-size:11px !important; border-radius:6px !important; }
.tl-ships .ship-button strong { font-size:12px !important; }
.tl-ships .ship-button em { font-size:9px !important; }
.tl-pill { padding:4px 9px !important; min-width:50px !important; }
.tl-pill strong { font-size:12px !important; }
.tl-pill em { font-size:8px !important; }
/* Roll/Heel tam ekran butonu + fullscreen iframe */
.map-fs { color:#f0b13b !important; border-color:#5a4a2a !important; background:linear-gradient(180deg,rgba(60,48,26,.35),#0e1a24) !important; }
.map-fs:hover { color:#ffd97a !important; border-color:#f0b13b !important; box-shadow:0 6px 18px rgba(240,177,59,.32) !important; transform:translateY(-2px) !important; }
.motion-frame:fullscreen { width:100vw !important; height:100vh !important; top:0 !important; left:0 !important; transform:none !important; }
/* Analiz butonu (yesil aksan) */
.map-analiz { color:#34d399 !important; border-color:#2a5a47 !important; background:linear-gradient(180deg,rgba(26,60,48,.35),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-analiz:hover { color:#6ee7b7 !important; border-color:#34d399 !important; box-shadow:0 6px 18px rgba(52,211,153,.3) !important; transform:translateY(-2px) !important; }
/* HDG kalibre butonu (View paneli) */
.hdgcal{ font-size:9px; padding:2px 7px; border:1px solid #2c4860; border-radius:6px; background:#16212e; color:#8ab4c8; cursor:pointer; font-weight:700; margin-left:5px; vertical-align:middle; }
.hdgcal:hover{ border-color:#22d3ee; color:#22d3ee; }
.hdgcalinfo{ display:block; font-size:9px; color:#5f7686; font-style:normal; margin-top:2px; }
/* Iz suresi secici bar (harita uzeri) */
.track-range-bar{ position:absolute; top:8px; left:48px; right:8px; z-index:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:rgba(10,17,25,.85); border:1px solid #22303f; border-radius:9px; padding:5px 8px; backdrop-filter:blur(3px); }
.track-range-bar .trb-label{ font-size:11px; color:#8aa0ad; font-weight:700; }
.trb-btn{ font-size:11px; padding:4px 9px; border:1px solid #2c4860; border-radius:7px; background:#16212e; color:#cfe2ea; cursor:pointer; font-weight:700; }
.trb-btn:hover{ border-color:#22d3ee; color:#fff; }
.trb-btn.active{ color:#04121a; background:#22d3ee; border-color:#22d3ee; }
.trb-custom-fields{ display:inline-flex; align-items:center; gap:4px; }
.trb-custom-fields input{ background:#0c151d; border:1px solid #22303f; color:#d6e6ee; border-radius:6px; padding:3px 5px; font-size:11px; color-scheme:dark; }
.trb-dash{ color:#5f7686; }
.trb-apply{ font-size:11px; padding:4px 10px; border:0; border-radius:7px; background:#22d3ee; color:#04121a; font-weight:800; cursor:pointer; }
.trb-status{ font-size:10.5px; color:#5f7686; margin-left:auto; }
/* ROB tank gostergeleri (noon report) */
.rob-tanks{ display:flex; gap:12px; justify-content:space-around; padding:8px 6px 4px; }
.rob-tank{ position:relative; flex:1; max-width:80px; height:92px; border:2px solid #2c4860; border-radius:9px; background:#0c151d; overflow:hidden; box-shadow:inset 0 2px 6px rgba(0,0,0,.4); }
.rt-fill{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg,#34d399,#1fa971); transition:height .7s cubic-bezier(.3,.1,.2,1); opacity:.9; }
.rt-fill.ok{ background:linear-gradient(180deg,#34d399,#1fa971); }
.rt-fill.mid{ background:linear-gradient(180deg,#f5b53d,#d8902a); }
.rt-fill.low{ background:linear-gradient(180deg,#f87171,#dc4f4f); }
.rt-info{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-shadow:0 1px 4px rgba(0,0,0,.75); pointer-events:none; }
.rt-info span{ font-size:9px; color:#dbe8f0; font-weight:800; letter-spacing:.3px; }
.rt-info strong{ font-size:18px; font-weight:800; color:#fff; line-height:1; }
.rt-info em{ font-size:8.5px; color:#c2d2dc; font-style:normal; }
.rob-sub{ font-size:10px; color:#5f7686; text-align:center; padding:3px 2px 5px; }
/* ROB: tek kare pencere + sivi-tipi sabit renkler (fuel kahve / lube sari / su navy) */
.rob-instrument .rob-tanks{ display:flex; gap:0; padding:0; margin:8px 2px 6px; border:2px solid #2c4860; border-radius:12px; background:#0a121b; overflow:hidden; box-shadow:inset 0 2px 9px rgba(0,0,0,.5); }
.rob-instrument .rob-tank{ position:relative; flex:1; max-width:none; height:110px; border:0; border-radius:0; border-right:1px solid #1b2733; background:transparent; box-shadow:none; }
.rob-instrument .rob-tank:last-child{ border-right:0; }
.rob-instrument .rt-fill{ opacity:.95; }
.rob-instrument .rt-fill.fuel{ background:linear-gradient(180deg,#9a6a3a,#5e3a16); }
.rob-instrument .rt-fill.lube{ background:linear-gradient(180deg,#fde047,#e0a500); }
.rob-instrument .rt-fill.water{ background:linear-gradient(180deg,#3f6ad8,#15307e); }
.rob-instrument .rt-info span{ font-size:9.5px; }
.rob-instrument .rt-info strong{ font-size:17px; text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7); }
/* ROB: barlar ayri (yapisik degil) + 2x uzun */
.rob-instrument .rob-tanks{ gap:12px !important; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
.rob-instrument .rob-tank{ height:220px !important; border:2px solid #2c4860 !important; border-radius:10px !important; border-right:2px solid #2c4860 !important; background:#0a121b !important; box-shadow:inset 0 2px 9px rgba(0,0,0,.5) !important; }
/* Deniz havasi karti (open-meteo) */
.wx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(98px,1fr)); gap:8px; padding:8px 4px 4px; }
.wx-item{ background:#111923; border:1px solid #22303f; border-radius:9px; padding:7px 9px; }
.wx-item span{ display:block; font-size:9.5px; color:#8aa0ad; text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.wx-item strong{ font-size:18px; font-weight:800; color:#e6eef4; }
.wx-item em{ display:block; font-size:10px; color:#5f7686; font-style:normal; margin-top:1px; }
/* Mevcut Durum karti */
.status-instrument .st-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:8px 4px 4px; }
.status-instrument .st-row{ background:#111923; border:1px solid #22303f; border-radius:8px; padding:6px 9px; min-width:0; }
.status-instrument .st-row span{ display:block; font-size:9px; color:#8aa0ad; text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.status-instrument .st-row strong{ display:block; font-size:14px; font-weight:800; color:#e6eef4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-instrument .st-row.big{ grid-column:1 / -1; }
.status-instrument .st-row.big strong{ font-size:18px; color:#34d399; }
.status-instrument .st-row.wide{ grid-column:1 / -1; }
.status-instrument .st-row.wide strong{ font-size:13px; white-space:normal; }
/* ============ KOMPAKT yerlesim (tek sayfaya yakin) + MOBIL ============ */
.tl-left{ padding:10px !important; }
.gauge-wrap{ gap:9px !important; align-content:start; }
.instrument{ min-height:0 !important; padding:9px 11px !important; }
.instrument-head{ margin-bottom:5px !important; }
.instrument-head h2{ font-size:14px !important; }
.instrument-head .eyebrow{ font-size:9px !important; margin-bottom:1px !important; }
.round-gauge, .compass, .attitude-dial{ width:min(100%,162px) !important; }
.gyro-dial{ width:min(100%,148px) !important; }
.navcompass{ width:min(100%,178px) !important; }
.clino{ width:min(100%,320px) !important; }
.readout-row{ font-size:11px !important; }

@media (max-width: 820px){
  .tl-app{ height:auto !important; min-height:100vh; overflow:visible !important; }   /* mobilde sayfa kaysin (yoksa icerik kirpilip tek kart gorunuyor) */
  html, body{ height:auto !important; overflow-y:auto !important; }
  .tl-split{ flex-direction:column !important; overflow:visible !important; }
  .tl-left{ flex:0 0 auto !important; width:100% !important; overflow:visible !important; }
  .tl-divider{ display:none !important; }
  .tl-right{ width:100% !important; min-height:60vh !important; padding:10px !important; }
  .gauge-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .nav-instrument, .status-instrument, .rob-instrument, .wx-instrument, .clino-instrument{ grid-column:1 / -1 !important; }
  .tl-top{ flex-wrap:wrap !important; gap:8px !important; }
  .map-tab{ padding:8px 12px !important; font-size:12px !important; }
}
@media (max-width: 520px){
  .gauge-wrap{ grid-template-columns:1fr !important; }
  .tl-ships{ display:none !important; }
  .tl-right{ min-height:55vh !important; }
}
/* Genis ekranda kartlari coklu-kolona diz (sadece masaustu >=821px) */
@media (min-width: 821px){
  .gauge-wrap{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important; align-content:start; }
  .nav-instrument, .status-instrument, .rob-instrument, .wx-instrument, .clino-instrument{ grid-column:span 2 !important; }
}
/* Daha siki paketleme (genis ekran) */
.instrument{ padding:8px 10px !important; }
@media (min-width: 821px){
  .gauge-wrap{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; gap:8px !important; }
  .status-instrument .st-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .status-instrument .st-row.wide, .status-instrument .st-row.big{ grid-column:1 / -1 !important; }
}
/* Gunes yayi + GPS saati (Deniz Havasi karti) */
.sun-row{ display:flex; align-items:center; gap:10px; padding:6px 4px 2px; margin-top:4px; border-top:1px solid #1b2733; }
.sun-arc{ flex:0 0 132px; }
.sun-arc svg{ width:132px; height:66px; display:block; }
.sun-horizon{ stroke:#2c4860; stroke-width:1.5; }
.sun-path{ stroke:#f5b53d; stroke-width:2; stroke-dasharray:3 4; opacity:.5; }
.sun-dot{ fill:#fbbf24; }
.sun-info{ flex:1; display:flex; flex-direction:column; gap:3px; }
.sun-t{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; }
.sun-t span{ color:#8aa0ad; font-weight:700; }
.sun-t strong{ color:#e6eef4; font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; }
.sun-t.gps strong{ color:#22d3ee; font-size:15px; }
/* Ust gemi adi butonlarini gizle (simdilik) */
.tl-ships{ display:none !important; }
/* Pervane widget (Mevcut Durum) + konum saati ofseti */
.prop-block{ display:flex; align-items:center; gap:14px; padding:4px 4px 9px; margin-bottom:6px; border-bottom:1px solid #1b2733; }
.prop-spin{ flex:0 0 58px; width:58px; height:58px; animation: propspin 1s linear infinite; transform-origin:50% 50%; filter: drop-shadow(0 0 5px rgba(120,180,230,.4)); }
.prop-spin svg{ width:100%; height:100%; display:block; }
.prop-blades path{ fill:#9fb6c6; stroke:#5d7588; stroke-width:.6; }
.prop-hub{ fill:#d7e6f2; stroke:#5d7588; stroke-width:.6; }
@keyframes propspin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.prop-data{ flex:1; display:flex; gap:20px; }
.pd{ display:flex; flex-direction:column; gap:1px; }
.pd span{ font-size:10px; color:#8aa0ad; font-weight:700; letter-spacing:.05em; }
.pd strong{ font-size:23px; font-weight:800; color:#e6eef4; font-variant-numeric:tabular-nums; line-height:1.05; }
.pd.slip strong{ color:#fbbf24; }
#gpsOff{ font-style:normal; font-size:9px; color:#5f7585; font-weight:700; margin-left:3px; }
/* ====== MOBIL DUZENLEME (tidy + responsive) ====== */
/* Harita sekme cubugu: dar ekranda alt satira sarsin (yatay tasma onlenir) */
@media (max-width:820px){
  .map-tabs{ flex-wrap:wrap !important; gap:7px !important; }
}
@media (max-width:520px){
  .map-coords{ display:none !important; }            /* koordinat KONUM kartinda + harita uzerinde zaten var */
  .map-tabs{ gap:6px !important; margin-bottom:8px !important; }
  .map-tab{ padding:8px 12px !important; font-size:12.5px !important; flex:1 1 42%; text-align:center; }
  .map-analiz{ flex:1 1 42% !important; justify-content:center; }
  /* Ust bar: durum hap'lari tam genislikte alt satirda derli toplu */
  .tl-top{ padding:7px 12px !important; gap:8px 10px !important; }
  .tl-status{ width:100% !important; justify-content:flex-start !important; }
  .prop-data{ gap:26px !important; }
}
/* Cok dar telefon (<=380px): pervane + gunes yayi kuculsun */
@media (max-width:380px){
  .sun-arc{ flex-basis:104px !important; }
  .sun-arc svg{ width:104px !important; height:52px !important; }
  .prop-spin{ flex-basis:52px !important; width:52px !important; height:52px !important; }
  .pd strong{ font-size:21px !important; }
  .map-tab{ font-size:12px !important; padding:7px 9px !important; }
}
/* Hava yon oklari (gelis yonu): pusula rim'inden merkeze bakar — ruzgar yesil, dalga & swell mavi tonlari */
.nc-wx{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible; }
.nc-wx .wxa{ transform-box:view-box; transform-origin:50px 50px; transition:transform .6s ease; }
.nc-wx .wxa polygon{ stroke:rgba(8,20,30,.35); stroke-width:.6; }
.nc-wx .wind  polygon{ fill:#22c55e; }   /* RUZGAR - yesil */
.nc-wx .wave  polygon{ fill:#3b82f6; }   /* DALGA - mavi */
.nc-wx .swell polygon{ fill:#22d3ee; }   /* SWELL - acik mavi (camgobegi) */
/* Deniz Havasi -> View kartina tasindi: ayirici baslik */
.nav-wx-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:10px 0 2px; padding-top:8px; border-top:1px solid #1b2733; }
.nav-wx-head span{ font-size:13px; font-weight:800; color:#cfe2ea; letter-spacing:.02em; }
.nav-wx-head em{ font-size:9px; font-style:normal; color:#5f7686; text-transform:uppercase; letter-spacing:.05em; }
/* === Hava basinci dususu / firtina alarmi === */
.px-alarm{ position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:99999; display:none; align-items:center; gap:12px; padding:9px 16px; border-radius:0 0 12px 12px; box-shadow:0 7px 28px rgba(0,0,0,.55); max-width:94vw; }
.px-alarm.show{ display:flex; }
.px-alarm .pxa-icon{ font-size:22px; line-height:1; }
.px-alarm .pxa-txt{ display:flex; flex-direction:column; }
.px-alarm .pxa-ttl{ font-size:14px; font-weight:800; color:#fff; letter-spacing:.01em; }
.px-alarm .pxa-sub{ font-size:11px; font-weight:600; color:rgba(255,255,255,.92); font-variant-numeric:tabular-nums; }
.px-alarm .pxa-x{ margin-left:6px; background:rgba(255,255,255,.18); border:0; color:#fff; width:24px; height:24px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:800; }
.px-alarm .pxa-x:hover{ background:rgba(255,255,255,.34); }
.px-alarm.watch{ background:linear-gradient(180deg,#a16207,#854d0e); }
.px-alarm.warn{ background:linear-gradient(180deg,#c2410c,#9a3412); }
.px-alarm.severe{ background:linear-gradient(180deg,#dc2626,#991b1b); animation:pxBlink 1.1s steps(2) infinite; }
@keyframes pxBlink{ 50%{ opacity:.55; } }
/* Rapor butonu (mor aksan) */
.map-rapor{ color:#c4b5fd !important; border-color:#4c3a78 !important; background:linear-gradient(180deg,rgba(49,36,92,.4),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-rapor:hover{ color:#ddd6fe !important; border-color:#a78bfa !important; box-shadow:0 6px 18px rgba(167,139,250,.3) !important; transform:translateY(-2px) !important; }
.map-filo{ color:#38bdf8 !important; border-color:#244a66 !important; background:linear-gradient(180deg,rgba(26,48,72,.4),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-filo:hover{ color:#7dd3fc !important; border-color:#38bdf8 !important; box-shadow:0 6px 18px rgba(56,189,248,.3) !important; transform:translateY(-2px) !important; }
.map-qc{ color:#fca5a5 !important; border-color:#5b2b2b !important; background:linear-gradient(180deg,rgba(72,30,30,.4),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-qc:hover{ color:#fecaca !important; border-color:#f87171 !important; box-shadow:0 6px 18px rgba(248,113,113,.3) !important; transform:translateY(-2px) !important; }
.map-rota{ color:#67e8f9 !important; border-color:#155e6b !important; background:linear-gradient(180deg,rgba(20,60,68,.4),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-rota:hover{ color:#a5f3fc !important; border-color:#22d3ee !important; box-shadow:0 6px 18px rgba(34,211,238,.3) !important; transform:translateY(-2px) !important; }
/* Roll/Heel CSS-tabanli tam ekran (mobil dahil her cihazda calisir) */
.motion-pane.mp-fs{ position:fixed !important; inset:0 !important; z-index:99990 !important; width:100vw !important; height:100vh !important; height:100dvh !important; background:#0a1119 !important; display:block !important; margin:0 !important; padding:0 !important; }
body.mp-fs-on{ overflow:hidden; }
.mp-fs-close{ position:fixed; top:10px; right:12px; z-index:100000; background:rgba(220,38,38,.92); color:#fff; border:0; border-radius:9px; padding:9px 15px; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.55); }
.mp-fs-close:hover{ background:#dc2626; }
.mp-fs-close:active{ transform:translateY(1px); }
/* === Harita + Roll/Heel birlikte (split) + Harita tam ekran + Rotaya uzaklik === */
#tabGps, #tabMotion{ display:none !important; }   /* split modda gereksiz: iki pane de daima acik */
.map-body.split{ display:flex !important; flex-direction:column; gap:8px; position:relative; }
.map-body.split > #gpsPane,
.map-body.split > #motionPane{ position:relative !important; inset:auto !important; display:block !important; flex:1 1 0 !important; min-height:0 !important; border:1px solid var(--tl-line); border-radius:10px; overflow:hidden; }
.map-body.split > #gpsPane{ flex:1.55 1 0 !important; }   /* harita biraz daha buyuk */
.map-body.split > #windyPane:not(.iv-fs){ display:none !important; }
#gpsPane.gp-fs{ position:fixed !important; inset:0 !important; z-index:99990 !important; width:100vw !important; height:100vh !important; height:100dvh !important; background:#06101e !important; display:block !important; flex:none !important; margin:0 !important; border:0 !important; border-radius:0 !important; }
body.gp-fs-on{ overflow:hidden; }
.map-legend .lg-xtd{ background:#ff2d78; }
/* Enstruman tam ekran (Hiz gostergesi · Cevre sensoru) */
.iv-hidden{ display:none !important; }
.iv-fs{ position:fixed !important; inset:0 !important; z-index:99990 !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:24px; width:100vw !important; height:100vh !important; height:100dvh !important; margin:0 !important; padding:24px !important; background:#0a131c !important; border:0 !important; border-radius:0 !important; overflow:auto; }
body.iv-fs-on{ overflow:hidden; }
.iv-fs .instrument-head{ text-align:center; }
.iv-fs .instrument-head h2{ font-size:30px !important; }
.iv-fs .instrument-head .eyebrow{ font-size:14px !important; }
.iv-fs .round-gauge{ transform:scale(2.3); transform-origin:center; margin:130px 0; }
.iv-fs .tgauge{ transform:scale(2.1); transform-origin:center; margin:110px 0; }
.iv-fs .env-grid{ transform:scale(1.5); transform-origin:center; margin-top:30px; }
.iv-fs .readout-row{ transform:scale(1.9); margin-top:46px; }
/* Windy/Meteo tam ekran (iframe doldurur, ortalamaz) */
#windyPane.iv-fs{ display:block !important; padding:0 !important; gap:0 !important; }
.map-body.split > #windyPane.iv-fs{ display:block !important; }
.iv-fs #windyFrame{ width:100% !important; height:100% !important; border:0 !important; }
.map-meteo{ color:#7dd3fc !important; border-color:#1e5a6b !important; background:linear-gradient(180deg,rgba(20,55,70,.4),#0e1a24) !important; text-decoration:none !important; display:inline-flex !important; align-items:center; }
.map-meteo:hover{ color:#bae6fd !important; border-color:#38bdf8 !important; box-shadow:0 6px 18px rgba(56,189,248,.3) !important; transform:translateY(-2px) !important; }
/* Pusula karti (sensor HDG + GPS COG) */
.compass2-instrument .pcmp{ display:flex; flex-direction:column; align-items:center; }
.pcmp svg{ width:100%; max-width:230px; display:block; }
.pcmp-face{ fill:#0a1a28; stroke:#1e3a52; stroke-width:2; }
.pcmp-ring{ fill:none; stroke:#16324a; stroke-width:1; }
.pcmp-ticks line{ stroke:#3a5a72; stroke-width:2; }
.pcmp-card{ fill:#7da2bd; font-size:15px; font-weight:800; text-anchor:middle; }
.pcmp-card.pcmp-n{ fill:#ef4444; }
.pcmp-cog{ stroke:#22d3ee; stroke-width:3; }
.pcmp-cog-h{ fill:#22d3ee; }
.pcmp-ship{ fill:#22c55e; stroke:#06351f; stroke-width:1; }
.pcmp-hub{ fill:#cfd8dc; stroke:#1a2226; stroke-width:1; }
.pcmp-read{ display:flex; justify-content:center; gap:26px; margin-top:8px; }
.pcmp-read div{ text-align:center; }
.pcmp-read span{ display:block; font-size:10px; color:#5b7e98; letter-spacing:.4px; }
.pcmp-read b{ font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; }
.pcmp-read em{ display:block; font-size:9px; color:#5b7e98; font-style:normal; }
.pcmp-read div:first-child b{ color:#22c55e; }
.pcmp-read div:last-child b{ color:#22d3ee; }
.pcmp-cal{ margin-top:10px; background:#13283a; border:1px solid #1e3a52; color:#cfe2ea; padding:6px 12px; border-radius:8px; font-size:11.5px; font-weight:600; cursor:pointer; }
.pcmp-cal:hover{ background:#18344b; border-color:#38bdf8; color:#bae6fd; }

/* ===== Su Terazisi (hava kabarcikli duzec) ===== */
.level-instrument .lvl-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:8px 4px 2px; }
.lvl-tube{ display:flex; align-items:center; gap:8px; }
.lvl-tube.lvl-h{ width:100%; max-width:236px; }
.lvl-tlab{ font-size:10px; font-weight:800; color:#9fb3bd; letter-spacing:.5px; min-width:26px; text-align:center; }
.lvl-track{ position:relative; background:linear-gradient(180deg,#0c1a26,#10242f); border:1px solid #203a4c; box-shadow:inset 0 2px 6px rgba(0,0,0,.5); overflow:hidden; }
.lvl-h .lvl-track{ flex:1; height:22px; border-radius:12px; }
.lvl-v{ flex-direction:column; }
.lvl-v .lvl-track{ width:22px; height:168px; border-radius:12px; }
.lvl-ctr,.lvl-ctr2{ position:absolute; background:rgba(140,220,100,.55); }
.lvl-h .lvl-ctr,.lvl-h .lvl-ctr2{ top:3px; bottom:3px; width:2px; }
.lvl-h .lvl-ctr{ left:calc(50% - 11px); } .lvl-h .lvl-ctr2{ left:calc(50% + 9px); }
.lvl-v .lvl-ctr,.lvl-v .lvl-ctr2{ left:3px; right:3px; height:2px; }
.lvl-v .lvl-ctr{ top:calc(50% - 11px); } .lvl-v .lvl-ctr2{ top:calc(50% + 9px); }
.lvl-tb{ position:absolute; width:18px; height:18px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 32%, #f2ffc4, #b4ef44 45%, #5aa400);
  box-shadow:0 0 7px rgba(160,240,70,.65), inset 0 1px 2px rgba(255,255,255,.6); transition:left .18s ease-out, top .18s ease-out; }
.lvl-mid{ display:flex; align-items:center; gap:10px; }
.lvl-eye{ position:relative; width:190px; height:190px; max-width:100%; }
.lvl-eye-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.lvl-face{ stroke:#cfd8d0; stroke-width:3; }
.lvl-ring{ fill:none; stroke:rgba(10,40,0,.28); stroke-width:1.6; }
.lvl-cross{ stroke:rgba(8,32,0,.45); stroke-width:1.4; }
.lvl-bull{ fill:none; stroke:rgba(8,40,0,.55); stroke-width:2; stroke-dasharray:3 4; }
#lvlBallG_g{ transition:transform .18s ease-out; }
.lvl-ball{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.lvl-ball-hi{ fill:rgba(255,255,255,.55); }
.lvl-lab{ position:absolute; font-size:10px; font-weight:800; color:#eef5ee; text-shadow:0 1px 3px rgba(0,0,0,.7); letter-spacing:.5px; }
.lvl-lab.lab-bow{ top:2px; left:50%; transform:translateX(-50%); }
.lvl-lab.lab-stern{ bottom:2px; left:50%; transform:translateX(-50%); }
.lvl-lab.lab-port{ left:2px; top:50%; transform:translateY(-50%); }
.lvl-lab.lab-stbd{ right:2px; top:50%; transform:translateY(-50%); }
.lvl-readout em{ display:block; font-size:10px; font-weight:800; color:#7fd11a; font-style:normal; margin-top:2px; }
.lvl-state-heavy{ color:#ff5d5d !important; }
.lvl-note{ text-align:center; font-size:10.5px; color:#93a7b0; margin-top:8px; }

/* ===== Manyetik Teshis ===== */
.mag-now{ display:flex; justify-content:space-around; gap:8px; text-align:center; margin:6px 0 10px; }
.mag-now div{ display:flex; flex-direction:column; gap:2px; }
.mag-now span{ font-size:10px; color:#8fa6b0; font-weight:700; letter-spacing:.3px; }
.mag-now b{ font-size:21px; font-weight:800; color:#e6f0f7; }
.mag-spark{ width:100%; height:80px; background:#0b1a25; border:1px solid #1c3344; border-radius:8px; display:block; }
.mag-verdict{ text-align:center; font-size:12px; font-weight:700; margin-top:10px; padding:7px 8px; border-radius:8px; background:#10242f; color:#cfe2ea; }
.mag-verdict.mag-ok{ background:#0f2e1c; color:#86efac; }
.mag-verdict.mag-warn{ background:#33280a; color:#fde68a; }
.mag-verdict.mag-bad{ background:#3a0f12; color:#fca5a5; }
.mag-note{ text-align:center; font-size:10px; color:#7e939e; margin-top:7px; line-height:1.45; }

/* ===== Harita hiz-renk lejanti ===== */
.smc-spd-legend{ background:rgba(8,18,26,.86); border:1px solid #1c3344; border-radius:8px; padding:6px 8px; font-size:10px; color:#cfe2ea; line-height:1.5; max-width:210px; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.smc-spd-legend b{ display:block; font-size:10px; margin-bottom:3px; color:#e6f0f7; }
.smc-spd-legend .sl-row{ display:flex; flex-wrap:wrap; gap:3px 8px; }
.smc-spd-legend .sl-row span{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.smc-spd-legend i{ width:13px; height:4px; border-radius:2px; display:inline-block; }
.smc-spd-legend em{ display:block; margin-top:4px; color:#8fa6b0; font-style:normal; }

/* ===== Sefer / Voyage karti (ana sayfa) ===== */
.vp-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:4px 2px 2px; }
.vp-c{ background:#0e2030; border:1px solid #1e3a52; border-radius:10px; padding:8px 10px; }
.vp-c span{ display:block; font-size:10px; color:#7da2bd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-c b{ display:block; font-size:14px; font-weight:800; color:#e6f0f7; margin-top:2px; }
.vp-c em{ display:block; font-size:10.5px; color:#9fb3bd; font-style:normal; margin-top:1px; }
.vp-c.hl{ background:linear-gradient(135deg,#0c2c1c,#0e1a26); border-color:#2a5a47; }
.vp-c.hl b{ color:#34d399; }
@media(max-width:520px){ .vp-grid{ grid-template-columns:1fr; } }

/* Tam ekran, split-layout pane kurallarini yenmeli (yuksek ozgulluk: ID+2 sinif) */
.map-body.split > #gpsPane.gp-fs,
.map-body.split > #motionPane.mp-fs,
.map-body.split > #windyPane.iv-fs{
  position:fixed !important; inset:0 !important; z-index:99990 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  margin:0 !important; padding:0 !important; flex:none !important; display:block !important; border-radius:0 !important;
}
@media(max-width:820px){ .map-body.split{ min-height:78vh; } .map-body.split > #gpsPane{ flex:1.3 1 0 !important; } }
/* Tank sivi sallanmasi (slosh): fill genis + alttan uzatma, gemi roll'una gore yuzey egilir */
.rob-instrument .rt-fill{ left:-45% !important; right:auto !important; width:190% !important; transform-origin:50% 50%; transition: transform .5s ease-out, height .8s cubic-bezier(.3,.1,.2,1), background .3s; }
.rob-instrument .rt-fill::after{ content:""; position:absolute; left:0; right:0; top:99%; height:240px; }
.rob-instrument .rt-fill.fuel::after{ background:#5e3a16; }
.rob-instrument .rt-fill.lube::after{ background:#e0a500; }
.rob-instrument .rt-fill.water::after{ background:#15307e; }