/* Galeri sayfası: hizalı satırlar / eşit kareler + büyütme penceresi.
   Yalnız galeri sayfalarında yüklenir (inc/galeri.php). Renk ve yarıçap
   değişkenleri ok.css :root bloğundan gelir. */

/* ============================================================
   GALERİ — hizalı satırlar + büyütme
   Her kare gerçek en-boy oranını --w/--h ile taşır; flex-grow orana
   bağlı olduğu için bir satırdaki kareler aynı yükseklikte durur ve
   satır genişliği ekrana göre dolar. JS gerekmez.
   ============================================================ */
.galeri-giris{ max-width:none; margin-bottom:clamp(20px,3vw,32px) }  /* giriş cümlesi masaüstünde tek satır */
.galeri-sayac{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.galeri{ display:flex; flex-wrap:wrap; gap:8px }
.galeri::after{ content:""; flex-grow:999 }        /* son satır sola yaslı kalsın, devleşmesin */
.galeri-kare{
  --oran:calc(var(--w,4) / var(--h,3));
  flex-grow:calc(var(--oran) * 100);
  flex-basis:calc(var(--oran) * 220px);
  min-width:calc(var(--oran) * 140px);
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--navy-2);
  outline-offset:3px;
}
.galeri-kare img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:var(--w,4) / var(--h,3);
  transition:transform .5s ease, filter .5s ease;
}
.galeri-kare:hover img,.galeri-kare:focus-visible img{ transform:scale(1.03) }
.galeri-kare:focus-visible{ outline:3px solid var(--coral) }
.galeri-yazi{
  position:absolute; left:0; right:0; bottom:0; padding:28px 12px 10px;
  font-size:13px; line-height:1.35; color:#fff;
  background:linear-gradient(to top, rgba(30,39,62,.85), rgba(30,39,62,0));
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
}
.galeri-kare:hover .galeri-yazi,.galeri-kare:focus-visible .galeri-yazi{ opacity:1; transform:none }
@media (hover:none){ .galeri-yazi{ opacity:1; transform:none } }   /* dokunmatikte hep görünür */
.galeri-bos{ color:var(--muted) }
@media (max-width:640px){
  .galeri{ gap:6px }
  .galeri-kare{ flex-basis:calc(var(--oran) * 150px); min-width:calc(var(--oran) * 110px) }
}

/* Büyütme penceresi */
.galeri-buyut{
  border:0; padding:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  background:rgba(30,39,62,.96); color:#fff;
  display:none; place-items:center;
}
.galeri-buyut[open]{ display:grid }
.galeri-buyut::backdrop{ background:transparent }
.gb-acik{ overflow:hidden }
.gb-govde{ margin:0; display:grid; gap:12px; justify-items:center; max-width:min(96vw,1600px); max-height:100dvh; padding:56px 64px 40px }
.gb-resim{ max-width:100%; max-height:calc(100dvh - 140px); object-fit:contain; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.45); background:var(--navy-2) }
.gb-yazi{ font-size:15px; line-height:1.4; color:var(--bej); text-align:center; max-width:70ch }
.gb-yazi[hidden]{ display:none }
.gb-kapat,.gb-ok{
  position:fixed; background:rgba(255,255,255,.08); color:#fff; border:0; cursor:pointer;
  width:48px; height:48px; border-radius:50%; font-size:30px; line-height:1;
  display:grid; place-items:center; transition:background .2s;
}
.gb-kapat:hover,.gb-ok:hover{ background:var(--coral) }
.gb-kapat:focus-visible,.gb-ok:focus-visible{ outline:3px solid var(--coral); outline-offset:2px }
.gb-kapat{ top:14px; right:14px }
.gb-ok{ top:50%; transform:translateY(-50%) }
.gb-onceki{ left:12px } .gb-sonraki{ right:12px }
.gb-sayac{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); font-size:13px; letter-spacing:.08em; color:var(--sis); font-variant-numeric:tabular-nums }
@media (max-width:640px){
  .gb-govde{ padding:56px 8px 48px }
  .gb-resim{ max-height:calc(100dvh - 130px) }
  .gb-ok{ width:40px; height:40px; font-size:24px; top:auto; bottom:44px; transform:none; background:rgba(255,255,255,.14) }
}
@media (prefers-reduced-motion:reduce){
  .galeri-kare img,.galeri-yazi{ transition:none }
}

/* Galeri — "eşit kareler" düzeni: sabit ızgara, kare kırpma */
.galeri--kareler{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px }
.galeri--kareler::after{ content:none }
.galeri--kareler .galeri-kare{ flex:none; min-width:0; aspect-ratio:1 / 1 }
.galeri--kareler .galeri-kare img{ aspect-ratio:auto; height:100%; object-position:center 35% }  /* yüzler genelde üst yarıda */
@media (max-width:640px){
  .galeri--kareler{ grid-template-columns:repeat(2, 1fr); gap:6px }
}