/* ============================================================
   galeri.css — Galeri (galeri.php)
   Instagram tarzı kare grid + JS'siz :target lightbox + Instagram bandı
   Mobil öncelikli: base · 480 · 768 · 1200
   ============================================================ */

/* ---------- Grid ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery__item{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,12,15,.45));opacity:0;transition:opacity .3s}
.gallery__item:hover img,.gallery__item:focus-visible img{transform:scale(1.07)}
.gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1}
.gallery__zoom{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(18,20,27,.85);border:1px solid var(--line-2);color:var(--gold);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.gallery__zoom svg{width:22px;height:22px}
.gallery__item:hover .gallery__zoom,.gallery__item:focus-visible .gallery__zoom{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Lightbox (:target, JS yok) ---------- */
.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(6,7,10,.93);backdrop-filter:blur(8px)}
.lightbox:target{display:flex;animation:lbIn .25s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__bg{position:absolute;inset:0;cursor:zoom-out}
.lightbox__fig{position:relative;max-width:min(960px,94vw);max-height:86vh}
.lightbox__fig img{display:block;max-width:100%;max-height:86vh;border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.lightbox__close{position:absolute;top:-16px;right:-16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);transition:.25s}
.lightbox__close:hover{color:var(--gold);border-color:var(--gold)}
.lightbox__close svg{width:20px;height:20px}
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(18,20,27,.8);border:1px solid var(--line-2);color:var(--ink);z-index:2;transition:.25s}
.lightbox__nav:hover{color:var(--gold);border-color:var(--gold)}
.lightbox__nav svg{width:22px;height:22px}
.lightbox__prev{left:10px}
.lightbox__prev svg{transform:rotate(180deg)}
.lightbox__next{right:10px}
.lightbox__ig{position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;font-family:var(--font-d);font-weight:600;font-size:.9rem;color:#1a1205;background:var(--grad-gold);padding:.6em 1.1em;border-radius:100px;transition:transform .25s}
.lightbox__ig svg{width:18px;height:18px}
.lightbox__ig:hover{transform:translateX(-50%) translateY(-2px)}

/* Hazır widget embed konteyneri */
.ig-embed{max-width:960px;margin-inline:auto}
.ig-embed iframe{width:100%;border:0;border-radius:var(--radius-lg)}

/* ---------- Instagram bandı ---------- */
.ig-band{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;padding:clamp(24px,4vw,38px);border:1px solid rgba(251,178,23,.22);border-radius:var(--radius-lg);background:linear-gradient(120deg,rgba(251,178,23,.10),rgba(255,255,255,.015))}
.ig-band__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--grad-gold);color:#1a1205;flex:0 0 auto}
.ig-band__ic svg{width:30px;height:30px}
.ig-band h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:.4rem}
.ig-band p{color:var(--muted)}
.ig-band strong{color:var(--ink)}


/* ============================================================
   480px ve üstü
   ============================================================ */
@media (min-width:480px){
  .gallery{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   768px ve üstü — tablet
   ============================================================ */
@media (min-width:768px){
  .gallery{grid-template-columns:repeat(4,1fr);gap:12px}
  .ig-band{flex-direction:row;align-items:center}
  .lightbox__prev{left:18px}
  .lightbox__next{right:18px}
}

/* ============================================================
   1200px ve üstü — masaüstü
   ============================================================ */
@media (min-width:1200px){
  .gallery{grid-template-columns:repeat(5,1fr);gap:14px}
}