/* ─────────────────────────── Arazide modu ─────────────────────────── */
:root { --fld: #2F80ED; --fld-soft: color-mix(in srgb, #2F80ED 11%, transparent); }
.field-guide, .fld-modal, .fld-card { --guide: #2F80ED; }

/* konum düğmesi: masaüstünde yakınlaştırma düğmelerinin üstünde, telefonda üst çubuğun altında */
.fld-fab {
  position: fixed; z-index: 16; right: var(--gap); bottom: calc(var(--gap) + 168px);
  width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--glass-strong); color: var(--text-2); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: background var(--dur), color var(--dur);
}
.fld-fab .i { width: 20px; height: 20px; }
.fld-fab:hover { color: var(--fld); }
.fld-fab.is-on { color: var(--fld); }
.fld-fab.is-follow { background: var(--fld); color: #fff; border-color: var(--fld); }
.fld-fab.is-wait .i { animation: fld-blink 1.1s ease-in-out infinite; }
.fld-fab.is-err { color: var(--danger); }
@keyframes fld-blink { 50% { opacity: .35; } }

/* ── panel ── */
.fld {
  position: fixed; z-index: 19; right: calc(var(--gap) + 52px); bottom: var(--gap);
  width: 360px; max-height: min(72vh, 660px); display: flex; flex-direction: column;
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  animation: toast-in .22s var(--ease);
}
.fld__head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.fld__icon { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--fld-soft); color: var(--fld); }
.fld__icon .i { width: 17px; height: 17px; }
.fld__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fld__titles b { font-size: var(--fs-md); font-weight: 800; display: flex; align-items: center; gap: 4px; }
.fld__titles small { font-size: var(--fs-xs); color: var(--text-3); }
.fld__min .i { transition: transform var(--dur); }
.fld.is-min .fld__min .i { transform: rotate(180deg); }
.fld.is-min .fld__body { display: none; }
.fld.is-min .fld__head { border-bottom: 0; }
.fld__body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }

.fld-gps { flex: none; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.fld-gps.is-good { background: var(--success-soft); color: var(--success); }
.fld-gps.is-fair { background: var(--fld-soft); color: var(--fld); }
.fld-gps.is-poor { background: var(--warning-soft); color: var(--warning); }
.fld-gps.is-err { background: var(--danger-soft); color: var(--danger); }

.fld-wait { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.fld-wait small { display: block; color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; }
.fld-wait .spinner { flex: none; margin-top: 2px; }

.fst { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.fst > .i { flex: none; margin-top: 2px; color: var(--text-3); }
.fst b { display: block; font-size: var(--fs-md); font-weight: 800; }
.fst small { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; }
.fst--in { background: var(--success-soft); }
.fst--in > .i, .fst--in b { color: var(--success); }
.fst--out { background: var(--fld-soft); }
.fst--out > .i, .fst--out b { color: var(--fld); }
.fst .fst__warn { color: var(--warning); margin-top: 4px; }

.fld-empty { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.fld-recs .chips { margin-top: 6px; }
.fld-sel { display: flex; align-items: center; gap: 8px; }
.fld-sel .select { flex: 1; min-width: 0; }

/* yön kadranı */
.fdial { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-lg); background: var(--fld-soft); }
.fdial[hidden] { display: none; }
.fdial__svg { width: 92px; height: 92px; overflow: visible; }
.fdial__ring { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.fdial__arrow { fill: var(--fld); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.fdial__n { fill: var(--hot); }
.fdial__nt { font: 800 10px var(--font); fill: var(--hot-text); text-anchor: middle; }
.fdial__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fdial__txt small { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }
.fdial__txt b { font: 800 26px/1.1 var(--display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.fdial__txt span { font-size: var(--fs-sm); font-weight: 700; color: var(--fld); }
.fdial__hint { font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.fdial__hint:empty { display: none; }
.fdial__hint.is-warn { color: var(--warning); }
[data-f="status"][hidden] { display: none; }

/* köşeler */
.fcorners__head { display: flex; flex-direction: column; margin-bottom: 6px; }
.fcorners__head b { font-size: var(--fs-sm); font-weight: 800; display: flex; align-items: center; gap: 4px; }
.fcorners__head small { font-size: var(--fs-xs); color: var(--text-3); }
.fc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fc { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); transition: background var(--dur), border-color var(--dur); }
.fc:hover { background: var(--surface-2); }
.fc.is-on { border-color: var(--fld); background: var(--fld-soft); }
.fc__n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 11px var(--font);
  background: #fff; color: var(--navy); border: 2px solid var(--hot); }
.fc.is-on .fc__n { background: var(--fld); color: #fff; border-color: #fff; box-shadow: 0 0 0 1px var(--fld); }
.fc__body { min-width: 0; display: flex; flex-direction: column; }
.fc__body b { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.fc__body small { font-size: 10.5px; color: var(--text-3); }
.fc__dir { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 30px; }
.fc__dir small { font-size: 10px; font-weight: 700; color: var(--text-2); }
.fc__arrow { width: 20px; height: 20px; }
.fc__arrow path { fill: var(--fld); }

.fld-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.fld-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; line-height: 1.45; color: var(--text-3); }
.fld-note > .i { flex: none; width: 13px; height: 13px; margin-top: 1px; }

/* konum noktası: mavi nokta, nabız ve pusula varken bakış konisi */
.fld-me { width: 22px; height: 22px; position: relative; pointer-events: none; }
.fld-me__dot { position: absolute; inset: 2px; border-radius: 50%; background: var(--fld); border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 29, 51, .18), 0 2px 8px rgba(15, 29, 51, .35); }
.fld-me__dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(47, 128, 237, .55);
  animation: fld-pulse 2s ease-out infinite; }
@keyframes fld-pulse { to { box-shadow: 0 0 0 16px rgba(47, 128, 237, 0); } }
.fld-me__cone { position: absolute; left: 50%; bottom: 50%; width: 64px; height: 58px; margin-left: -32px; display: none;
  background: linear-gradient(to top, rgba(47, 128, 237, .8), rgba(47, 128, 237, .05)); clip-path: polygon(50% 100%, 12% 0, 88% 0); }
.fld-me.has-heading .fld-me__cone { display: block; }

/* sonuç paneli kartı */
.fld-card .card__title { display: flex; align-items: center; gap: 6px; }
.fld-card .card__title .i { color: var(--fld); }
.fld-card__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* köşe koordinatları */
.fco-wrap { overflow-x: auto; }
.fco { width: 100%; font-size: var(--fs-xs); }
.fco th small { display: block; font-weight: 500; color: var(--text-3); }
.fco td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.fco .mono { font-family: var(--mono); font-size: 11px; white-space: nowrap; }

/* ana ekrana ekle */
.inst-head { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-lg); background: var(--surface-2); }
.inst-head img { border-radius: 14px; flex: none; }
.inst-head b { display: block; font-size: var(--fs-md); }
.inst-head small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.inst-h { margin: 16px 0 8px; font-size: var(--fs-sm); font-weight: 800; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inst-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: var(--fs-sm); line-height: 1.5; }
.inst-steps li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; }
.inst-steps .i { width: 16px; height: 16px; vertical-align: -3px; color: var(--fld); }

/* telefon: panel alttan, konum düğmesi üst çubuğun altında */
@media (max-width: 820px) {
  .fld-fab { bottom: auto; top: calc(var(--gap) + 108px); width: 44px; height: 44px; border-radius: 50%; }
  .fld { left: var(--gap); right: var(--gap); width: auto; max-height: 46vh;
    bottom: calc(var(--gap) + 58px + env(safe-area-inset-bottom, 0px)); }
  .fdial { grid-template-columns: 80px 1fr; }
  .fdial__svg { width: 80px; height: 80px; }
}

@media print {
  .pr .fco { font-size: 8pt; }
  .pr .fco .mono { font-size: 7.5pt; }
  .pr .fco .fc__n { width: 16px; height: 16px; font-size: 7.5pt; border-width: 1.5px; }
}