/* Tam çözünürlüklü görüntüleyici (viewer.js) — atlas ve Deskspace ortak. */

.viewer {
  position: fixed; inset: 0; z-index: 60;
  background: #0d0f0cf2;
  overflow: hidden; touch-action: none; user-select: none;
  cursor: zoom-in;
  animation: viewer-in 0.22s ease-out;
}
.viewer.is-zoomed { cursor: zoom-out; }
.viewer.is-hold { cursor: crosshair; }
.viewer img {
  position: absolute; left: 0; top: 0;
  max-width: none; transform-origin: 0 0;
  will-change: transform; -webkit-user-drag: none;
  background: #fff;
}
.viewer-note {
  position: absolute; left: 50%; bottom: 18px; z-index: 1; margin: 0;
  transform: translateX(-50%);
  font: 500 11px/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #b1b4a9; background: #111310d9; padding: 8px 13px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
.viewer-close {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  font: 500 12px/1 "Instrument Sans", system-ui, sans-serif;
  color: #eeeae2; background: #111310d9; border: 1px solid #51554b;
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.viewer-close:hover { color: #d5f57a; border-color: #d5f57a; }
/* sayfalama (yayılım sayfaları): önceki / sonraki, sayaç ve ad */
.viewer-step {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  min-width: 44px; min-height: 44px; padding: 12px 16px;
  font: 500 12px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.06em;
  color: #eeeae2; background: #111310d9; border: 1px solid #51554b; border-radius: 999px; cursor: pointer;
}
.viewer-prev { left: 18px; }
.viewer-next { right: 18px; }
.viewer-step:hover:not(:disabled) { color: #d5f57a; border-color: #d5f57a; }
.viewer-step:disabled { opacity: 0.3; cursor: default; }
.viewer-count {
  position: absolute; left: 18px; top: 18px; z-index: 1; margin: 0; max-width: calc(100% - 140px);
  font: 500 12px/1.3 "Instrument Sans", system-ui, sans-serif; color: #eeeae2;
  background: #111310d9; padding: 10px 14px; border-radius: 999px; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .viewer-step { top: auto; bottom: 56px; transform: none; }
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .viewer { animation: none; }
}