/* ============================================================================
   Sagrosa — sayfa-urun.css  (ürün sayfaları: Linuga, ERP, Özel Eğitim Takip, Oyunlar, Veracoa; şablon urun.njk)
   site.css'in üstüne gelir; temel.njk şablon adına göre otomatik bağlar. Aynı tasarım dili: tek yazı ailesi,
   0px köşe, düz kartlar, altın yalnız ince çizgi, bordo yalnız Gıda/Veracoa. Yön özellikleri MANTIKSAL;
   fiziksel istisna: object-position ve tarayıcı çerçevesindeki nokta deseni.
   Ortak kalıplar site.css'tedir: liste türleri (.s-sec--spec / --columns), kol renginde iletişim bandı
   (.s-band--contact) ve gri form bandı (.s-band--form).
   Bölümler: 1 sayfa başı (beyaz) ve görsel bloğu · 2 kenar çubuklu düzen · 3 kenar çubuğu (kardeş ürünler)
   · 4 içerik bölümleri, kartlar · 5 duyarlı · 6 yazdırma
   ========================================================================== */

/* 1. SAYFA BAŞI — beyaz; ürün adı, kol eyebrow'u, alt başlık, giriş; görsel bloğu -------- */
.s-body--urun .s-page-head{padding-block-start:36px}
.s-body--urun .s-page-head__title{font-size:48px}
.s-body--urun .s-page-head__subtitle{font-size:22px;color:var(--s-txt);margin-block-start:8px}
.s-body--urun .s-page-head__lead{max-width:680px}
.s-body--urun .s-page-head__figure{margin-block-start:48px;padding-inline:0;width:calc(100% - 48px);max-width:var(--s-cw)}
.s-body--urun .s-page-head__img{aspect-ratio:3/1;max-height:440px;object-position:50% 45%}
/* Ekran görüntüsü (hero.imageFrame): lacivert bant, ince tarayıcı çerçevesi (üst şerit + 1px kenar), alt kenar banda oturur */
.s-body--urun .s-page-head__figure--screen{background:var(--s-navy);padding:56px 48px 0;display:flex;flex-direction:column;align-items:center}
.s-body--urun .s-page-head__figure--screen::before{content:"";flex:none;width:100%;max-width:880px;height:28px;border:1px solid #CBD2DA;border-block-end:0;background:radial-gradient(circle at 14px 14px,#C9D0D8 3.5px,transparent 4px),radial-gradient(circle at 30px 14px,#C9D0D8 3.5px,transparent 4px),radial-gradient(circle at 46px 14px,#C9D0D8 3.5px,transparent 4px),#F4F5F7}
.s-body--urun .s-page-head__figure--screen .s-page-head__img{width:100%;max-width:880px;height:auto;aspect-ratio:auto;max-height:none;margin-inline:auto;border:1px solid #CBD2DA;border-block:0}
/* Veracoa: altın logo beyaz zeminde silik kalır → bordo plaka üzerinde */
.s-body--urun .s-page-head--gida .s-page-head__logo{height:124px;width:auto;padding:20px 30px;background:var(--s-bordo);margin-block-end:32px}
.s-body--urun .s-page-head__figure--ph{height:280px}

/* 2. KENAR ÇUBUKLU DÜZEN — solda 240px kenar çubuğu, sağda içerik ------------ */
.s-body--urun .s-layout{padding-block:64px 96px;gap:80px}
.s-body--urun .s-layout--sidebar{grid-template-columns:240px minmax(0,1fr)}

/* 3. KENAR ÇUBUĞU — dış site bağlantısı + kardeş ürünler (kayıt defterinden) -- */
.s-body--urun .s-side{position:sticky;inset-block-start:calc(var(--s-h) + 32px)}
.s-body--urun .s-side__ext{margin-block-end:28px;padding-block-end:24px;border-block-end:1px solid var(--s-hair)}
.s-body--urun .s-side__ext .s-tlink{gap:6px;font-size:15px}
.s-body--urun .s-side__item a{padding-block:11px;font-size:15px;line-height:1.4}
.s-body--urun .s-side__item--gida a{color:var(--s-bordo)}
.s-body--urun .s-side__item.is-current a{color:var(--s-navy)}
.s-body--urun .s-side__item--gida.is-current a{color:var(--s-bordo)}

/* 4. İÇERİK BÖLÜMLERİ VE KARTLAR ------------------------------------------- */
.s-body--urun .s-content .s-sec{margin-block-end:64px}
.s-body--urun .s-content .s-sec__title{font-size:32px;line-height:1.15;margin-block-end:20px}
.s-body--urun .s-content .s-eyebrow+.s-sec__title{margin-block-start:12px}
.s-body--urun .s-sec__note{margin-block-start:20px}
.s-body--urun .s-list__item{color:var(--s-txt);font-size:17px;padding-block:13px}
.s-body--urun .s-content .s-sec--cards .s-cards{margin-block-start:28px}
.s-body--urun .s-content .s-cards--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-body--urun .s-card>.s-card__body:first-child{border-block-start:2px solid var(--s-navy);padding-block-start:18px}
.s-product--gida .s-card>.s-card__body:first-child{border-block-start-color:var(--s-bordo)}
.s-body--urun .s-card>.s-card__body:first-child .s-card__title{margin-block-start:0}
.s-body--urun .s-card__text{font-size:16px}
.s-product--gida .s-card__more{color:var(--s-bordo)}
.s-body--urun .s-content .s-cta{padding:48px 56px}
.s-body--urun .s-content .s-cta .s-btn{margin-block-start:0}
.s-body--urun .s-content .s-cta__body .s-btn{margin-block-start:24px}
.s-product--gida .s-content .s-cta{background:var(--s-bordo)}
.s-product--gida .s-content .s-cta .s-btn--white{color:var(--s-bordo)}

/* 5. DUYARLI ---------------------------------------------------------------- */
@media (max-width:1100px){
  .s-body--urun .s-page-head__title{font-size:42px}
  .s-body--urun .s-layout{gap:48px}
  .s-body--urun .s-layout--sidebar{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:900px){
  .s-body--urun .s-layout{gap:0;padding-block:0 64px}
  .s-body--urun .s-layout--sidebar{grid-template-columns:minmax(0,1fr)}
  /* kenar çubuğu: mobilde görselin altında yatay şerit (dış site bağlantısı + kardeş ürünler) */
  .s-body--urun .s-side{position:static;margin-inline:-24px;padding-inline:24px;margin-block-end:40px;border-block-end:1px solid var(--s-hair)}
  .s-body--urun .s-side__ext{margin:0;padding-block:14px 12px;border-block-end:1px solid var(--s-hair)}
  .s-body--urun .s-side__nav{display:flex;align-items:center;gap:20px}
  .s-body--urun .s-side__title{flex:none;margin:0;padding:0;border:0;white-space:nowrap}
  .s-body--urun .s-side__list{flex:1;min-width:0;display:flex;gap:0 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s-body--urun .s-side__list::-webkit-scrollbar{display:none}
  .s-body--urun .s-side__item a{border:0;padding:16px 10px;white-space:nowrap;font-weight:500}
  .s-body--urun .s-side__item.is-current{order:-1} /* bulunulan ürün şeridin başında kalsın; kaydırmadan görünsün */
  .s-body--urun .s-side__item.is-current a{border-inline-start:0;padding-inline-start:10px;text-decoration:underline;text-decoration-color:var(--s-gold);text-decoration-thickness:2px;text-underline-offset:8px}
}
@media (max-width:768px){
  .s-body--urun .s-page-head{padding-block-start:24px}
  .s-body--urun .s-page-head--image{padding-block-end:20px} /* görsel ile ürün şeridi arasında kısa boşluk */
  .s-body--urun .s-page-head__title{font-size:32px}
  .s-body--urun .s-page-head__subtitle{font-size:18px}
  .s-body--urun .s-page-head__figure{margin-block-start:28px}
  .s-body--urun .s-page-head__img{aspect-ratio:16/9}
  .s-body--urun .s-page-head__figure--screen{padding:28px 20px 0}
  .s-body--urun .s-page-head__figure--screen::before{height:20px;background-size:auto;background:radial-gradient(circle at 10px 10px,#C9D0D8 2.5px,transparent 3px),radial-gradient(circle at 22px 10px,#C9D0D8 2.5px,transparent 3px),radial-gradient(circle at 34px 10px,#C9D0D8 2.5px,transparent 3px),#F4F5F7}
  .s-body--urun .s-page-head--gida .s-page-head__logo{height:96px;padding:14px 20px;margin-block-end:24px}
  .s-body--urun .s-page-head__figure--ph{height:200px}
  .s-body--urun .s-side__title{display:none}
  .s-body--urun .s-side__item a{padding-inline:8px;font-size:14px}
  .s-body--urun .s-content .s-sec{margin-block-end:48px}
  .s-body--urun .s-content .s-sec__title{font-size:26px}
  .s-body--urun .s-content .s-cards--grid{grid-template-columns:minmax(0,1fr)}
  .s-body--urun .s-list__item{font-size:16px}
  .s-body--urun .s-content .s-cta{padding:32px 24px}
}

/* 6. YAZDIRMA -------------------------------------------------------------- */
@media print{
  .s-body--urun .s-side{display:none}
  .s-body--urun .s-layout--sidebar{grid-template-columns:1fr}
  .s-body--urun .s-page-head__figure--screen{background:none;padding:0}
}