/* =====================================================================
   OTOGAZ HASTANESİ — galeri ızgarası
   gallery_helpers.php > render_gallery() HTML'i içindir; page.php içerikteki
   {{gallery}} kodunu bununla değiştirir (örn. /galeri). 02.10.2026 yenilendi:
   4:3 kırpılmış kareler, yuvarlak köşe, üzerine gelince hafif yakınlaşma;
   tıklayınca büyük hâli açılır (page.php sonundaki .oh-lb betiği).
   ===================================================================== */
.gallery.grid{
  display:grid; gap:14px; margin:8px 0 24px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){ .gallery.grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .gallery.grid{ grid-template-columns:minmax(0,1fr); gap:12px; } }
.gallery .gallery-item{
  margin:0; position:relative; overflow:hidden; border-radius:14px;
  background:#EEF0F2; cursor:zoom-in;
  box-shadow:0 1px 2px rgba(16,19,22,.06), 0 8px 22px rgba(16,19,22,.08);
}
.gallery .gallery-item picture{ display:block; aspect-ratio:4 / 3; }
.gallery .gallery-item img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease;
}
.gallery .gallery-item:hover img{ transform:scale(1.04); }
.gallery .gallery-item:focus-visible{ outline:3px solid #E30613; outline-offset:2px; }
.gallery .gallery-item figcaption{ font-size:.9rem; color:#555; padding:8px 10px; }
@media (prefers-reduced-motion:reduce){ .gallery .gallery-item img{ transition:none; } }

/* Büyük görünüm */
.oh-lb{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  background:rgba(10,12,14,.92); padding:56px 12px 64px; }
.oh-lb.is-open{ display:flex; }
.oh-lb img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.oh-lb-cap{ position:absolute; left:16px; right:16px; bottom:18px; text-align:center; color:#E6E8EB; font-size:14.5px; }
.oh-lb button{ position:absolute; width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.oh-lb button:hover, .oh-lb button:focus-visible{ background:#E30613; outline:none; }
.oh-lb-x{ top:12px; right:12px; }
.oh-lb-p{ left:12px; top:50%; margin-top:-23px; }
.oh-lb-n{ right:12px; top:50%; margin-top:-23px; }

/* Sayfa kartındaki ".page-card .content img{height:auto}" (sayfa-karti.css, page.php'de
   satır içi ve SONRA geliyor) galeri resminin 4:3 kutuyu doldurmasını engelliyordu:
   geniş formatlı resimlerin altı gri kalıyordu (02.10.2026). Daha güçlü seçici. */
.gallery.grid .gallery-item picture img{
  width:100%; height:100%; max-width:none; margin:0; border-radius:0; object-fit:cover;
}