/* ==========================================================================
   EB Temel — galeri ve ışık kutusu (K2; prototip/css/site.css "Galeri"). Yalnızca galerili sayfada yüklenir
   (eb_galeri_html). Token eşlemesi: docs/tema-spesifikasyonu.md §2b.2.
   ========================================================================== */
.galeri { margin: var(--wp--preset--spacing--50) 0; }
.galeri__serit {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  border-radius: var(--wp--custom--radius--l);
}
.galeri__serit:focus-visible { outline-offset: 4px; }
.galeri__liste { display: flex; gap: 0.75rem; list-style: none; padding-bottom: 0.5rem; }
.galeri__oge { flex: 0 0 min(78%, 22rem); scroll-snap-align: start; }
.galeri--ekran .galeri__oge { flex-basis: min(88%, 30rem); }
.galeri__buyut { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--wp--custom--radius--m); background: none; }
.galeri__buyut:focus-visible { outline-offset: 2px; }
.galeri__gorsel { aspect-ratio: 4 / 3; border-radius: var(--wp--custom--radius--m); border: 1px solid var(--wp--preset--color--cizgi); }
.galeri--ekran .galeri__gorsel img { object-position: top left; }
.galeri__buyut-ikon {
  position: absolute; right: 0.5rem; bottom: 0.5rem; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgb(12 20 36 / 0.72); color: #fff;
  opacity: 0; transition: opacity var(--wp--custom--duration--kisa) var(--wp--custom--ease--standart);
}
.galeri__buyut:hover .galeri__buyut-ikon, .galeri__buyut:focus-visible .galeri__buyut-ikon { opacity: 1; }
@media (hover: none) { .galeri__buyut-ikon { opacity: 1; } }
.galeri__aciklama { margin-top: 0.45rem; color: var(--wp--preset--color--metin-2); font-size: var(--wp--preset--font-size--xs); line-height: 1.45; }
.galeri__alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; }
.galeri__baslik { color: var(--wp--preset--color--metin-soluk); font-size: var(--wp--preset--font-size--xs); }
.galeri__kontrol { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.galeri__kontrol .ikon-dugme { color: var(--wp--preset--color--metin); box-shadow: inset 0 0 0 1px var(--wp--preset--color--cizgi-guclu); }
.galeri__kontrol .ikon-dugme:disabled { opacity: 0.4; cursor: default; }
.galeri__sayac { min-width: 3.2rem; text-align: center; color: var(--wp--preset--color--metin-2); font-size: var(--wp--preset--font-size--xs); font-variant-numeric: tabular-nums; }

.isik-kutusu {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(8 12 22 / 0.94); color: #fff;
}
.isik-kutusu::backdrop { background: rgb(8 12 22 / 0.6); }
.isik-kutusu[open] { display: grid; place-items: center; }
.isik-kutusu__figur { display: grid; justify-items: center; gap: 0.75rem; margin: 0; padding: 4rem 1rem 3.5rem; max-width: 100%; max-height: 100%; }
.isik-kutusu__gorsel { max-width: min(92vw, 1400px); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: var(--wp--custom--radius--s); }
/* Yakınlaştırma (Tur 14a; kademesiz Tur 14c). 1×: alan görselin kendisi kadar. Yakınken alan görünür alanın tamamını
   kaplayan, taşan bir kaydırma kapsayıcısıdır; görselin sol/üst kenar boşluğunu galeri.js yazar (imlecin altındaki nokta
   yerinde kalsın diye; taşınca 0, sol/üst kenar erişilebilir kalır). Fareyle sürükleme: grab / grabbing.
   touch-action bilerek yazılmaz (auto): iki parmakla yakınlaştırma tarayıcıya kalır. */
.isik-kutusu__alan { display: flex; max-width: 100%; min-width: 0; }
.isik-kutusu__gorsel { transition: transform var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis); }
.isik-kutusu.yakinlasabilir .isik-kutusu__gorsel { cursor: zoom-in; }
.isik-kutusu.yakin .isik-kutusu__alan {
  position: fixed; inset: 0; z-index: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.isik-kutusu.yakin .isik-kutusu__alan:focus-visible { outline-offset: -4px; }
.isik-kutusu.yakin .isik-kutusu__gorsel { flex: none; margin: auto; max-width: none; max-height: none; border-radius: 0; cursor: grab; user-select: none; }
.isik-kutusu.surukleniyor .isik-kutusu__alan, .isik-kutusu.surukleniyor .isik-kutusu__gorsel { cursor: grabbing; }
.isik-kutusu.yakin .isik-kutusu__aciklama { visibility: hidden; }
.isik-kutusu .ikon-dugme, .isik-kutusu__sayac { z-index: 1; }
/* 2×'te düğmeler ve sayaç görselin üstünde durur (açık gökyüzü vb.): koyu zeminle okunur kalır. */
.isik-kutusu.yakin .ikon-dugme { background: rgb(8 12 22 / 0.72); }
.isik-kutusu.yakin .ikon-dugme:hover { background: rgb(8 12 22 / 0.86); }
.isik-kutusu.yakin .isik-kutusu__sayac { top: 1.15rem; left: 1rem; padding: 0.35rem 0.6rem; border-radius: var(--wp--custom--radius--s); background: rgb(8 12 22 / 0.72); }
.isik-kutusu__yakinlastir { top: 1rem; right: 4.25rem; }
.isik-kutusu__yakinlastir:disabled { opacity: 0.4; cursor: default; }
.isik-kutusu__yakinlastir[aria-pressed="true"] { background: rgb(255 255 255 / 0.28); }
.isik-kutusu__yakinlastir .isik-kutusu__ikon-uzak, .isik-kutusu__yakinlastir[aria-pressed="true"] .isik-kutusu__ikon-yakin { display: none; }
.isik-kutusu__yakinlastir[aria-pressed="true"] .isik-kutusu__ikon-uzak { display: block; }
.isik-kutusu__aciklama { color: #eceff6; font-size: var(--wp--preset--font-size--s); text-align: center; }
.isik-kutusu .ikon-dugme { position: absolute; color: #fff; background: rgb(255 255 255 / 0.1); --wp--custom--renk--odak: #fff; }
.isik-kutusu .ikon-dugme:hover { background: rgb(255 255 255 / 0.2); }
.isik-kutusu__kapat { top: 1rem; right: 1rem; }
.isik-kutusu__onceki { left: 1rem; top: 50%; transform: translateY(-50%); }
.isik-kutusu__sonraki { right: 1rem; top: 50%; transform: translateY(-50%); }
.isik-kutusu__sayac { position: absolute; top: 1.6rem; left: 1.25rem; color: #eceff6; font-size: var(--wp--preset--font-size--xs); }

/* JS kapalıyken şerit yerine sarılan ızgara: bütün görseller ve açıklamaları görünür, işe yaramayan denetimler basılmaz
   (denetimler sunucuda `hidden`; betik açar). Büyüt bağlantısı büyük görseli doğrudan açar. */
html:not(.js) .galeri__serit { overflow: visible; }
html:not(.js) .galeri__liste { flex-wrap: wrap; }
html:not(.js) .galeri__oge { flex: 1 1 14rem; }
html:not(.js) .galeri__buyut-ikon { display: none; }
.galeri__buyut { color: inherit; }
.galeri__kontrol[hidden] { display: none; }