/* ============================================================
   MAVİ RESTAURANT — gallery.css
   ============================================================ */

/* Page hero overrides (bg via inline style) */
.page-hero .ph-bg {
  background-size:cover;
  background-position:center;
}

/* Active nav */
.nl.active-page { color:#fff !important; }
.nl.active-page::after { transform:scaleX(1) !important; transform-origin:left !important; }

/* ── Filter bar ─────────────────────────────────────────────── */
.gl-section { background:var(--warm); padding:4rem 0 6rem; }

.gl-filter-bar {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.5rem;
  margin-bottom:3rem;
}
.gl-filter-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mid);
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--radius);
  padding:.6rem 1.3rem;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.gl-filter-btn i { font-size:.8rem; }
.gl-filter-btn:hover {
  border-color:var(--teal); color:var(--teal);
}
.gl-filter-btn.active {
  background:var(--navy); border-color:var(--navy);
  color:#fff; box-shadow:0 4px 16px rgba(8,15,26,.2);
}

/* ── Masonry grid ───────────────────────────────────────────── */
.gl-grid {
  columns:4;
  column-gap:10px;
  transition:all .3s;
}
@media(max-width:1199px) { .gl-grid { columns:3; } }
@media(max-width:767px)  { .gl-grid { columns:2; column-gap:6px; } }
@media(max-width:480px)  { .gl-grid { columns:1; } }

/* ── Gallery item ───────────────────────────────────────────── */
.gl-item {
  position:relative;
  break-inside:avoid;
  margin-bottom:10px;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  background:var(--sand);
}
@media(max-width:767px) { .gl-item { margin-bottom:6px; } }

.gl-item img {
  width:100%; display:block;
  object-fit:cover;
  transition:transform .6s var(--ease), filter .4s;
  filter:brightness(.95) saturate(1.05);
}
/* Tall items force taller image */
.gl-item--tall img  { height:480px; object-fit:cover; }
.gl-item--wide { break-inside:avoid; }
@media(max-width:767px) {
  .gl-item--tall img { height:280px; }
}

.gl-item:hover img {
  transform:scale(1.06);
  filter:brightness(.75) saturate(1.1);
}

/* Overlay */
.gl-item-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  padding:1rem 1rem .9rem;
  background:linear-gradient(to top, rgba(8,15,26,.72) 0%, transparent 60%);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.gl-item:hover .gl-item-overlay { opacity:1; }

.gl-item-info { flex:1 1 auto; }
.gl-item-cat {
  display:block;
  font-size:.58rem; font-weight:600; letter-spacing:.25em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:.25rem;
}
.gl-item-title {
  font-family:var(--serif); font-size:1.05rem; font-weight:300;
  color:#fff; line-height:1.3; margin:0;
}

.gl-zoom-btn {
  position:absolute; top:.75rem; right:.75rem;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
  cursor:pointer;
}
.gl-zoom-btn:hover { background:rgba(255,255,255,.3); }

/* Filter hide animation */
.gl-item.gl-hidden {
  opacity:0;
  transform:scale(.95);
  pointer-events:none;
  position:absolute;
  visibility:hidden;
}
.gl-item.gl-visible {
  opacity:1; transform:scale(1);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}

/* ── Instagram CTA ──────────────────────────────────────────── */
.gl-instagram-cta {
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
  margin-top:3.5rem;
  padding:2rem 2.5rem;
  background:var(--navy);
  border-radius:var(--radius);
  border-left:3px solid var(--gold);
}
.gl-ig-icon { font-size:2.4rem; color:var(--gold); flex-shrink:0; }
.gl-ig-title {
  font-family:var(--serif); font-size:1.4rem; font-weight:300;
  color:#fff; margin:0 0 .3rem;
}
.gl-ig-sub {
  font-size:.87rem; color:rgba(255,255,255,.5);
  line-height:1.6; margin:0;
}
.gl-instagram-cta .btn-gold { flex-shrink:0; margin-left:auto; white-space:nowrap; }
@media(max-width:767px) {
  .gl-instagram-cta { flex-direction:column; align-items:flex-start; }
  .gl-instagram-cta .btn-gold { margin-left:0; }
}

/* ── Lightbox ───────────────────────────────────────────────── */
.gl-lightbox {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,10,18,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.gl-lightbox.open {
  opacity:1; visibility:visible;
}
.gl-lb-inner {
  position:relative;
  max-width:min(92vw, 1100px);
  width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.gl-lb-img {
  max-height:80vh; max-width:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  transform:scale(.96);
  transition:transform .4s var(--ease);
  display:block;
}
.gl-lightbox.open .gl-lb-img { transform:scale(1); }

.gl-lb-caption {
  display:flex; align-items:center; gap:1rem;
  margin-top:1.1rem; padding:0 .5rem;
  width:100%;
}
.gl-lb-cat {
  font-size:.62rem; font-weight:600; letter-spacing:.25em;
  text-transform:uppercase; color:var(--gold);
}
.gl-lb-title {
  font-family:var(--serif); font-size:1.1rem; font-weight:300;
  color:#fff; margin:0;
}
.gl-lb-counter {
  margin-left:auto; font-size:.72rem; color:rgba(255,255,255,.35);
  letter-spacing:.12em;
}

/* Nav buttons */
.gl-lb-close,
.gl-lb-prev,
.gl-lb-next {
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.7);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .25s, color .25s, transform .25s;
  z-index:10;
}
.gl-lb-close {
  top:1.2rem; right:1.2rem;
  width:44px; height:44px; font-size:1.1rem;
}
.gl-lb-prev, .gl-lb-next {
  top:50%; transform:translateY(-50%);
  width:50px; height:50px; font-size:1.3rem;
}
.gl-lb-prev { left:1.2rem; }
.gl-lb-next { right:1.2rem; }
.gl-lb-close:hover,
.gl-lb-prev:hover,
.gl-lb-next:hover {
  background:rgba(255,255,255,.18); color:#fff;
}
.gl-lb-prev:hover { transform:translateY(-50%) translateX(-3px); }
.gl-lb-next:hover { transform:translateY(-50%) translateX(3px); }

@media(max-width:767px) {
  .gl-lb-prev { left:.5rem; }
  .gl-lb-next { right:.5rem; }
  .gl-lb-prev, .gl-lb-next { width:40px; height:40px; font-size:1rem; }
  .gl-lb-caption { flex-direction:column; align-items:flex-start; gap:.3rem; }
  .gl-lb-counter { margin-left:0; }
}

/* ── Page Hero (about.css'ten bağımsız kopya) ───────────────── */
.page-hero {
  position:relative; min-height:55vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--navy); text-align:center;
}
.ph-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:hzoom 20s ease-in-out infinite alternate;
}
.ph-ov {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(8,15,26,.75),rgba(8,15,26,.88));
}
.ph-content { position:relative; z-index:2; padding:10rem 1.5rem 5rem; }
.ph-eyebrow {
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:.68rem; font-weight:500; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
  opacity:0; animation:fu .9s .3s forwards;
}
.ph-eyebrow span { width:36px; height:1px; background:var(--gold); display:inline-block; }
.ph-title {
  font-family:var(--serif);
  font-size:clamp(2.8rem,6vw,5.2rem); font-weight:300; line-height:1.1; color:#fff;
  margin-bottom:1.2rem;
  opacity:0; animation:fu 1s .5s forwards;
}
.ph-title em { font-style:italic; color:var(--foam); }
.ph-sub {
  font-size:1rem; font-weight:300; color:rgba(255,255,255,.6); line-height:1.8;
  opacity:0; animation:fu 1s .7s forwards;
}
.ph-breadcrumb {
  position:absolute; bottom:5rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:.5rem;
  font-size:.68rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  opacity:0; animation:fu .8s 1s forwards;
}
.ph-breadcrumb a { color:rgba(255,255,255,.45); transition:color .3s; }
.ph-breadcrumb a:hover { color:var(--gold); }
.ph-breadcrumb i { color:rgba(255,255,255,.25); font-size:.55rem; }
.ph-breadcrumb span { color:var(--gold); }
.ph-wave { position:absolute; bottom:-2px; left:0; right:0; z-index:3; line-height:0; }

.gallery-album-card {
    display:block;
    height:100%;
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:var(--radius);
    transition:transform .4s var(--ease), box-shadow .4s;
}

.gallery-album-card:hover {
    transform:translateY(-7px);
    box-shadow:0 20px 50px rgba(8,15,26,.14);
}

.gallery-album-image {
    position:relative;
    height:280px;
    overflow:hidden;
}

.gallery-album-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.gallery-album-card:hover .gallery-album-image img {
    transform:scale(1.07);
}

.gallery-album-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(8,15,26,.2);
    transition:background .35s;
}

.gallery-album-card:hover .gallery-album-overlay {
    background:rgba(8,15,26,.48);
}

.gallery-album-icon {
    display:flex;
    width:54px;
    height:54px;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    font-size:1.25rem;
    background:var(--gold);
    border-radius:50%;
    opacity:0;
    transform:scale(.8);
    transition:opacity .35s, transform .35s;
}

.gallery-album-card:hover .gallery-album-icon {
    opacity:1;
    transform:scale(1);
}

.gallery-album-body {
    padding:1.5rem;
}

.gallery-album-label {
    margin-bottom:.45rem;
    color:var(--gold);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.gallery-album-title {
    margin-bottom:.65rem;
    color:var(--navy);
    font-family:var(--serif);
    font-size:1.65rem;
    font-weight:400;
}

.gallery-album-description {
    color:var(--text-mid);
    font-size:.86rem;
    line-height:1.7;
}

.gallery-album-link {
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-top:1rem;
    color:var(--teal);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.gallery-album-card:hover .gallery-album-link i {
    transform:translateX(5px);
}

.gallery-album-link i {
    transition:transform .3s;
}