/* PVX 3D sahne · Pulsesystech
   Tüm kurallar .pvx3d altında: WordPress temasının stillerine karışmaz.
   Düzen: solda 3B sahne, sağda bileşen detay paneli; dar ekranda alt alta. */
.pvx3d {
  --pvx-ink: #0E1A24;
  --pvx-ink-2: #14222E;
  --pvx-ink-3: #1C2B38;
  --pvx-line: #2A3B49;
  --pvx-text: #E8ECEF;
  --pvx-muted: #9AA8B4;
  --pvx-amber: #F2B705;
  --pvx-coral: #FF8A65;
  --pvx-teal: #4FD1C5;
  --pvx-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pvx-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: dark;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  width: 100%;
  max-width: 100%;
  background: var(--pvx-ink);
  color: var(--pvx-text);
  font-family: var(--pvx-sans);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--pvx-line);
  text-align: left;
}
.pvx3d *, .pvx3d *::before, .pvx3d *::after { box-sizing: border-box; }
.pvx3d button { font-family: inherit; }

/* ---------- Sahne ---------- */
.pvx3d-stage {
  position: relative;
  min-width: 0;
  height: clamp(420px, 62vw, 640px);
  background: radial-gradient(120% 90% at 50% 40%, #16283A 0%, var(--pvx-ink) 70%);
  overflow: hidden;
  cursor: grab;
}
.pvx3d-stage:active { cursor: grabbing; }
.pvx3d-stage canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
.pvx3d-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pvx3d-labels { position: absolute; inset: 0; pointer-events: none; }

.pvx3d-label {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 28px 8px 11px;
  min-width: 0;
  background: rgba(14, 26, 36, 0.86);
  border: 1px solid var(--pvx-line);
  border-radius: 6px;
  color: var(--pvx-text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, background .2s;
  will-change: transform;
}
.pvx3d-label::after {
  content: ""; position: absolute; right: 11px; top: 50%;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid var(--pvx-muted); border-top: 1.5px solid var(--pvx-muted);
  transform: rotate(45deg);
}
.pvx3d-label:hover, .pvx3d-label[aria-pressed="true"] { border-color: var(--c, var(--pvx-text)); background: rgba(20, 34, 46, 0.95); }
.pvx3d-label:focus-visible { outline: 2px solid var(--c, var(--pvx-text)); outline-offset: 2px; }
.pvx3d-label b { font-weight: 600; font-size: 13.5px; color: var(--c, var(--pvx-text)); letter-spacing: .01em; }
.pvx3d-label span { font-size: 12px; color: var(--pvx-muted); }

.pvx3d-hud {
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--pvx-mono); font-size: 11.5px; letter-spacing: .04em;
  pointer-events: none;
}
.pvx3d-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(14, 26, 36, 0.82); border: 1px solid var(--pvx-line);
  color: var(--pvx-text); text-transform: uppercase; width: max-content;
}
.pvx3d-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pvx-teal); box-shadow: 0 0 8px var(--pvx-teal); animation: pvx3d-blink 1.6s infinite; }
@keyframes pvx3d-blink { 50% { opacity: .35; } }
.pvx3d-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.pvx3d-stats .pvx3d-pill { text-transform: none; color: var(--pvx-muted); }
.pvx3d-stats strong { color: var(--pvx-text); font-weight: 500; font-variant-numeric: tabular-nums; }

.pvx3d-log {
  position: absolute; left: 14px; bottom: 14px;
  width: min(370px, calc(100% - 28px));
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--pvx-mono); font-size: 11.5px;
  pointer-events: none;
}
.pvx3d-log-title { color: var(--pvx-muted); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.pvx3d-log-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(14, 26, 36, 0.82); border: 1px solid var(--pvx-line);
  animation: pvx3d-in .35s ease-out;
}
.pvx3d-log-item .s { color: var(--c); }
.pvx3d-log-item .f { color: var(--pvx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvx3d-log-item .t { color: var(--pvx-muted); font-variant-numeric: tabular-nums; }
.pvx3d-log-item.warn .f { color: var(--pvx-amber); }
@keyframes pvx3d-in { from { opacity: 0; transform: translateY(6px); } }

.pvx3d-controls {
  position: absolute; right: 14px; bottom: 14px;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.pvx3d-btn {
  appearance: none; border: 1px solid var(--pvx-line);
  background: rgba(14, 26, 36, 0.86); color: var(--pvx-text);
  min-height: 36px; min-width: 36px; padding: 0 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .2s, background .2s;
}
.pvx3d-btn:hover { border-color: var(--pvx-muted); }
.pvx3d-btn:focus-visible { outline: 2px solid var(--pvx-teal); outline-offset: 2px; }
.pvx3d-btn[aria-pressed="true"] { border-color: var(--pvx-teal); color: var(--pvx-teal); }
.pvx3d-btn svg { width: 14px; height: 14px; }

.pvx3d-hint {
  position: absolute; top: 14px; right: 14px;
  font-size: 11.5px; color: var(--pvx-muted);
  background: rgba(14, 26, 36, 0.7); border: 1px solid var(--pvx-line);
  padding: 5px 10px; border-radius: 999px;
  pointer-events: none; transition: opacity .6s;
}
.pvx3d-hint.hide { opacity: 0; }
.pvx3d-sim { position: absolute; right: 14px; top: 46px; font-family: var(--pvx-mono); font-size: 10.5px; color: var(--pvx-muted); letter-spacing: .05em; pointer-events: none; }

/* ---------- Detay paneli ---------- */
.pvx3d-panel {
  min-width: 0;
  background: var(--pvx-ink-2);
  border-left: 1px solid var(--pvx-line);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: clamp(420px, 62vw, 640px);
  overflow-y: auto;
}
.pvx3d-eyebrow { font-family: var(--pvx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--pvx-teal)); margin: 0; }
.pvx3d-panel h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--pvx-text); text-wrap: balance; }
.pvx3d-panel p { margin: 0; color: #C9D2D9; font-size: 14.5px; }
.pvx3d-photo { display: block; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #EEF0F1; }
.pvx3d-lcd { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 384 / 240; border-radius: 8px; border: 6px solid #232F3A; }
.pvx3d-specs { margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 0; border-top: 1px solid var(--pvx-line); }
.pvx3d-specs dt, .pvx3d-specs dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pvx-line); font-size: 13px; }
.pvx3d-specs dt { color: var(--pvx-muted); padding-right: 14px; }
.pvx3d-specs dd { color: var(--pvx-text); font-family: var(--pvx-mono); font-size: 12px; text-align: right; }
.pvx3d-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pvx3d-parts button {
  width: 100%; display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
  appearance: none; background: var(--pvx-ink-3); border: 1px solid var(--pvx-line); border-radius: 6px;
  color: var(--pvx-text); text-align: left; padding: 10px 12px; min-height: 44px; cursor: pointer; font-size: 13.5px;
}
.pvx3d-parts button:hover { border-color: var(--c); }
.pvx3d-parts button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pvx3d-parts i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pvx3d-parts small { color: var(--pvx-muted); font-size: 12px; }
.pvx3d-offline {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pvx3d-offline span {
  font-family: var(--pvx-mono); font-size: 11px; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--pvx-line); color: var(--pvx-muted);
}
.pvx3d-link { color: var(--pvx-teal); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid currentColor; width: max-content; }
.pvx3d-back { appearance: none; background: none; border: 0; padding: 0; color: var(--pvx-muted); font-size: 12.5px; cursor: pointer; width: max-content; min-height: 32px; }
.pvx3d-back:hover { color: var(--pvx-text); }

/* ---------- Dar ekran ---------- */
@media (max-width: 960px) {
  .pvx3d { grid-template-columns: minmax(0, 1fr); }
  .pvx3d-panel { border-left: 0; border-top: 1px solid var(--pvx-line); max-height: none; }
}
@media (max-width: 640px) {
  .pvx3d-stage { height: 400px; }
  .pvx3d-label { padding: 5px 22px 6px 8px; }
  .pvx3d-label::after { right: 8px; }
  .pvx3d-label b { font-size: 12px; }
  .pvx3d-label span { display: none; }
  .pvx3d-log { display: none; }
  .pvx3d-sim { display: none; }
  .pvx3d-hint { top: auto; bottom: 58px; right: 14px; }
  .pvx3d-btn .lbl { display: none; }
  .pvx3d-panel { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pvx3d-dot, .pvx3d-log-item { animation: none; }
}

/* ---------- Dil seçimi, GPS ---------- */
.pvx3d-lang {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; border: 1px solid var(--pvx-line); border-radius: 8px; overflow: hidden;
  background: rgba(14, 26, 36, 0.86);
}
.pvx3d-lang button {
  appearance: none; border: 0; background: transparent; color: var(--pvx-muted);
  min-width: 44px; min-height: 36px; padding: 0 12px;
  font-family: var(--pvx-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; cursor: pointer;
}
.pvx3d-lang button[aria-pressed="true"] { background: var(--pvx-ink-3); color: var(--pvx-text); }
.pvx3d-lang button:focus-visible { outline: 2px solid var(--pvx-teal); outline-offset: -2px; }
.pvx3d .pvx3d-hint { top: 60px; }
.pvx3d .pvx3d-sim { top: 96px; }
.pvx3d-gps { text-transform: none; gap: 8px; flex-wrap: wrap; max-width: min(520px, 100%); }
.pvx3d-gps strong { color: #B794F6; font-weight: 500; font-variant-numeric: tabular-nums; }
.pvx3d-gdot { width: 7px; height: 7px; border-radius: 50%; background: #B794F6; box-shadow: 0 0 8px #B794F6; }
.pvx3d-route { color: var(--pvx-muted); }
.pvx3d-log-item .c { grid-column: 2 / -1; color: #B794F6; font-size: 10.5px; margin-top: -2px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pvx3d .pvx3d-hint { top: auto; bottom: 58px; }
  .pvx3d-route { display: none; }
}