/* ===================================================================
   SERVİS DETAY (galeri + lightbox)
   Body sınıfı: .service-detail-page
   =================================================================== */
html { scroll-behavior: auto !important; }
.detail-hero{
  max-width: clamp(960px, 88vw, 1200px);
  margin: 0 auto 24px;
  padding: 0 clamp(16px, 4vw, 48px);
}
.detail-hero h1{
  text-align: center; color: var(--fg);
  font-family: var(--title-font); font-weight: var(--title-weight);
  letter-spacing: .6px; font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 12px;
}
.detail-hero .desc{
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 28px);
  line-height: 1.65; color: var(--fg);
}

/* Galeri */
.detail-gallery{
  max-width: clamp(960px, 88vw, 1280px);
  margin: 24px auto 72px;
  padding: 0 clamp(16px, 4vw, 48px);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.detail-gallery .thumb{
  width: 200px; height: 200px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(0,0,0,.12) inset; cursor: zoom-in;
}
.detail-gallery .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease, opacity .25s ease; }
.detail-gallery .thumb:hover img{ transform: scale(1.05); opacity: .95; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,0); opacity:0; pointer-events:none; transition: background .28s ease, opacity .28s ease; z-index:3000; }

.lightbox.open{ background: rgba(0,0,0,.60); opacity:1; pointer-events:auto; }

.lightbox__imgwrap{ position:relative; width: min(var(--lb-w), var(--lb-max-w)); max-height: var(--lb-h); transform: scale(.88); opacity:0; transition: transform .30s ease, opacity .30s ease; }

.lightbox.open .lightbox__imgwrap{ transform: scale(1); opacity:1; }

.lightbox__img{ display:block; width:100%; height:auto; max-height: var(--lb-h); border-radius:12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }

.lb-btn, .lb-close{
  position:absolute; border:none; background: rgba(255,255,255,.14); color:#fff; cursor:pointer;
  border-radius:10px; display:grid; place-items:center; opacity:0; transform:scale(.9);
  transition: opacity .18s ease .1s, transform .18s ease .1s, background .2s ease;
}

.lightbox.open .lb-btn, .lightbox.open .lb-close{ opacity:1; transform: scale(1); }

.lb-btn:hover, .lb-close:hover{ background: rgba(255,255,255,.20); }

.lb-btn{ width:44px; height:52px; top:50%; transform: translateY(-50%) scale(.9); }

.lb-prev{ left:-64px; } .lb-next{ right:-64px; }

.lb-close{ width:40px; height:40px; top:-56px; right:-56px; font-size:28px; line-height:1; }

.lightbox__counter{ position:absolute; bottom:-32px; right:0; font-size:13px; opacity:.8; color:var(--fg); }