/* gorsel-zoom.css — yakınlaştırılabilir görsel (Faz R.64.3).
   Kullanan: partials/_gorsel_zoom.php + assets/js/gorsel-zoom.js (Fuar Planı, Workshoplar).
   --oran (genişlik/yükseklik) figure üzerinde satır içi gelir. Çerçeve görselle aynı orandadır;
   varsayılan olarak ekran yüksekliğinin %82'sine sığacak kadar daralır (.zoom--uzun'da sınır yok).
   Tüm hareket transform ile yapılır (layout reflow yok). */

.zoom { margin: 0; }

.zoom__cerceve {
  position: relative;
  width: min(100%, calc(82vh * var(--oran, 1.5)));
  aspect-ratio: var(--oran, 1.5);
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--renk-cizgi);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--golge-s);
}
.zoom--uzun .zoom__cerceve { width: 100%; }

.zoom__alan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;             /* ölçek 1'de parmakla sayfa kayabilsin */
  user-select: none;
  -webkit-user-select: none;
  cursor: zoom-in;
}
.zoom__alan:focus-visible { outline: 3px solid var(--renk-marka); outline-offset: -3px; }

.zoom__gorsel { display: block; width: 100%; height: auto; max-width: none; }
.zoom--hazir .zoom__gorsel {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.zoom--gecis .zoom__gorsel { transition: transform .28s ease; }

.zoom--yakin .zoom__alan { touch-action: none; cursor: grab; }
.zoom--suruk .zoom__alan { cursor: grabbing; }

/* --- Araç çubuğu (sağ üst) --- */
.zoom__arac {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zoom__arac[hidden] { display: none; }
.zoom__dugme {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--renk-cizgi);
  border-radius: 50%;
  background: #fff;
  color: var(--renk-metin);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.zoom__dugme svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zoom__dugme:hover { color: var(--renk-marka); border-color: var(--renk-marka); }
.zoom__dugme:focus-visible { outline: 3px solid var(--renk-marka); outline-offset: 2px; }
.zoom__dugme[aria-disabled="true"] { opacity: .4; cursor: default; color: var(--renk-metin); border-color: var(--renk-cizgi); }
.zoom__ikon-kapat { display: none; }
.zoom--tam .zoom__ikon-ac { display: none; }
.zoom--tam .zoom__ikon-kapat { display: block; }

/* --- Geçici ipucu ("Ctrl + tekerlek") --- */
.zoom__ipucu {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, .84);
  color: #fff;
  font-size: .84rem;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .25s ease;
  pointer-events: none;
}
.zoom__ipucu--gorunur { opacity: 1; }

/* --- Alt satır: kullanım notu + indir --- */
.zoom__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  width: min(100%, calc(82vh * var(--oran, 1.5)));
  margin: 1rem auto 0;
}
.zoom--uzun .zoom__alt { width: 100%; }
.zoom__not { color: var(--renk-metin-acik); font-size: .9rem; max-width: 60ch; }

/* --- Tam ekran (CSS katmanı; iPhone'da da çalışır). z-index 1100: lightbox(1000) üstü,
       pop-up(1150) ve çerez bandı(1200) altı — Faz R.60 yığın düzeni korunur. --- */
.zoom--tam .zoom__cerceve {
  position: fixed;
  inset: 0;
  z-index: 1100;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .zoom__cerceve { border-radius: 10px; }
  /* Telefonda çerçeve alçak (~200px) → düğmeler sağ üstte yatay dizilir, görselin daha azını örter */
  .zoom__arac { top: 6px; right: 6px; gap: 5px; flex-direction: row; }
  .zoom__dugme { width: 34px; height: 34px; }
  .zoom__dugme svg { width: 18px; height: 18px; }
  .zoom__alt { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .zoom--gecis .zoom__gorsel, .zoom__ipucu, .zoom__dugme { transition: none; }
}