/* ==========================================================
   Service Details — yalnız bu sayfa (scope: #service-details-page)
   - %68 genişlik
   - Her satırda 3 kart
   - Ön yüzde SADECE ilk görsel görünür
   - Arka arkaya 3 kart görüntüsü: ilk görselin 2 kopyası arka planda
   - Detay lightbox: büyük görsel + sol/sağ + thumbnail şeridi
========================================================== */

/* Başlık / açıklama alanı */
#service-details-page .sd-hero{ width:68%; margin:24px auto 12px; padding:0 8px; }
#service-details-page .sd-hero h1{ text-align:center; margin:0 0 10px; }
#service-details-page .sd-desc{ background:transparent; padding:18px 20px; line-height:1.6; }

/* %68 sarmalayıcı + 3 sütun grid */
#service-details-page .sd-wrap{ width:68%; margin:24px auto 72px; }
#service-details-page .sd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }

/* Kart & başlık (ortalı) */
#service-details-page .sd-card{ position:relative;   overflow: visible; }
#service-details-page .sd-caption{ margin:35px 0 0; text-align:center; font-weight:500; position: relative; z-index: 4; font-size: 180%;}

/* Önyüz görsel kutusu */
#service-details-page .sd-stack{
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  overflow: visible;          /* <-- ÖNEMLİ: arka kopyalar taşabilsin */
}

/* Arkadaki iki KOPYA — gerçek görselle 3’lü yığın */
#service-details-page .sd-stack .deck{
  position: absolute;
  inset: 0;
  border-radius: 0px;
  overflow: hidden;           
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  pointer-events: none;       /* tıklamayı engellemesin */
  z-index: 0;                 /* önyüzün altında kalsın */
}


/* Önyüz (SD-viewport) — sadece ilk img görünür */
#service-details-page .sd-viewport{ position:absolute; inset:0; border-radius:0px; overflow:hidden; z-index:3; }
#service-details-page .sd-viewport img{ display:none; width:100%; height:100%; object-fit:cover; }
#service-details-page .sd-viewport img:first-child{ display:block; }

/* ---------- Lightbox ---------- */
#sd-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
#sd-lightbox.is-open{ display:block; }
#sd-lightbox .sd-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.84); }

/* Sahne: oklar + büyük görsel + thumbs */
#sd-lightbox .sd-stage{
  position:absolute; inset:0;
  display:grid; grid-template-columns:72px 1fr 72px;
  grid-template-rows: 1fr auto auto; /* img / thumbs / caption+count */
  align-items:center; justify-items:center;
}
#sd-lightbox .sd-img{
  grid-column:2; max-width:min(85vw,1400px); max-height:min(76vh,900px);
  object-fit:contain; border-radius:0;
}

/* Kapat (sağ üst) */
#sd-lightbox .sd-close{
  position:absolute; top:16px; right:18px; background:rgba(255,255,255,.08);
  border:0; color:#fff; font-size:28px; line-height:1; width:44px; height:44px; cursor:pointer;
}

/* Sol/sağ (detay sayfandaki gibi blok butonlar) */
#sd-lightbox .sd-nav{
  width:60px; height:60px; background:rgba(255,255,255,.08);
  border:0; color:#fff; font-size:28px; cursor:pointer; border-radius:6px;
}
#sd-lightbox .sd-nav:hover{ background:rgba(255,255,255,.14); }
#sd-lightbox .sd-nav.prev{ grid-column:1; }
#sd-lightbox .sd-nav.next{ grid-column:3; }

/* Thumbnail şeridi */
#sd-lightbox .sd-thumbs{
  grid-column:1 / -1; display:flex; gap:10px; padding:10px 16px;
  overflow-x:auto; max-width:96vw;
}
#sd-lightbox .sd-thumb{
  width:110px; height:72px; object-fit:cover; opacity:.64;
  border:2px solid transparent; border-radius:6px; flex:0 0 auto; cursor:pointer;
}
#sd-lightbox .sd-thumb.is-active{ opacity:1; border-color:#fff; }

#sd-lightbox .sd-caption{ grid-column:1 / -1; color:#fff; opacity:.92; margin-top:8px; text-align:center; }
#sd-lightbox .sd-count{ grid-column:1 / -1; color:#bbb; font-size:12px; margin:4px 0 14px; }



/* ---------------------------------------------------------
   STACK AYARLARI (global)
   - Konum/ölçek/döndürme/z-index kontrolü
   - Bu değerler tüm kartlara uygulanır; kart bazında
     override etmek için figure.sd-stack üzerine inline
     custom property yazabilirsin (aşağıda örnek var)
--------------------------------------------------------- */
/* Arka kopyalar (2. ve 3. görsel) — ÖN YÜZLE AYNI BOY/KIRPMA */
#service-details-page .sd-stack .deck{
  position: absolute;
  inset: 0;
  width: 100%;              /* kutuyu tam doldur */
  height: 100%;
  object-fit: cover;        /* önyüz gibi kırp */
  border-radius: 0px;      /* önyüzle aynı radius */
  overflow: hidden;
  pointer-events: none;     /* tıklamayı engelleme */
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  z-index: 0;               /* önyüzün altında */
}
/* konum/efekt ayarları (istersen önceki değişkenli sürümle oynayabilirsin) */
#service-details-page .sd-stack .deck.deck-1{
  transform: translate(14px,10px) rotate(0deg);
  opacity: .60; z-index: 2;
}
#service-details-page .sd-stack .deck.deck-2{
  transform: translate(28px,20px) rotate(0deg);
  opacity: .15; z-index: 1;
}

html { scroll-behavior: auto !important; }