/* SY Mobil Uyum: bilesen.css (sy-mobil.php yükler; Elementor ve temadan sonra)
   B ajanı: özel bileşenler (sy-e3c, sy-e3s, sy-e3k, sy-side, sy-doc, sy-dk, syvg/syvm).
   Bileşenlerin kendi <style> blokları sayfa gövdesinde, bu dosyadan SONRA geldiği için eşit özgüllükte
   kaybediyoruz; ayrıca icerik.css `.elementor-widget-html img{height:auto}` (0,2,2) kuralı görsellerin height:100%'ünü eziyordu, bu yüzden img
   seçicilerinde sınıf ikilenerek (0,3,2) özgüllük alındı. Bu yüzden her seçici `body.single-portfolio` ile özgüllük kazanır (!important gerekmez). */

/* ======================================================================
   1) sy-e3c: ESGE kartı
   Mobilde portre fotoğraf 4/5 oranında, yüz (üst %22) görünür; madalya fotoğrafın
   İÇİNDE sağ üst köşede, isim rozeti alt kenarda kompakt. Eski sabit height:190/300/150 kalktı.
   ====================================================================== */
@container sy-e3c (max-width:540px){
  body.single-portfolio .sy-e3c-fig{margin:0 8px 8px 0}
  body.single-portfolio .sy-e3c-fig::before{inset:8px -8px -8px 8px}
  body.single-portfolio .sy-e3c-photo{height:auto;aspect-ratio:4/5;max-height:460px}
  body.single-portfolio .sy-e3c-photo.sy-e3c-photo img{object-position:50% 22%}
  body.single-portfolio .sy-e3c-medal{top:10px;right:10px;padding:6px 9px;border-radius:12px}
  body.single-portfolio .sy-e3c-medal img{width:88px}
  body.single-portfolio .sy-e3c-name{left:10px;right:auto;bottom:10px;max-width:calc(100% - 20px);font-size:13px;gap:7px;padding:7px 12px 7px 9px;border-radius:12px}
  body.single-portfolio .sy-e3c-name svg{width:17px;height:17px}
  body.single-portfolio .sy-e3c-eyebrow{font-size:12px;letter-spacing:.1em;padding:6px 11px}
  body.single-portfolio .sy-e3c-text{font-size:15px;line-height:1.6}
  body.single-portfolio .sy-e3c-note{font-size:13px}
  body.single-portfolio .sy-e3c-cta{font-size:14px;min-height:48px}
}
@container sy-e3c (max-width:399px){
  body.single-portfolio .sy-e3c-photo{height:auto;aspect-ratio:4/5}
  body.single-portfolio .sy-e3c-medal img{width:68px}
  body.single-portfolio .sy-e3c-title{font-size:19px}
  body.single-portfolio .sy-e3c-text{font-size:14.5px}
  body.single-portfolio .sy-e3c-note{font-size:13px}
  body.single-portfolio .sy-e3c-note-x{display:inline}
}
/* masaüstü/tablet: eyebrow 12px altına inmesin */
body.single-portfolio .sy-e3c-eyebrow{font-size:12px}
/* yatay telefon (kısa ekran): sabit 180/210 yerine kutuyu kısa tut, oranı koru */
@media (max-height:500px){
  body.single-portfolio .sy-e3c-photo{height:210px;aspect-ratio:auto}
}

/* ======================================================================
   2) sy-e3s (şerit) ve sy-e3k (kompakt kart): okunabilir yazı boyutları
   ====================================================================== */
body.single-portfolio .sy-e3s-eyebrow,
body.single-portfolio .sy-e3k-eyebrow{font-size:12px}
@container sy-e3s (max-width:760px){
  body.single-portfolio .sy-e3s-sub{font-size:13px}
}
@container sy-e3s (max-width:560px){
  body.single-portfolio .sy-e3s-eyebrow{font-size:12px;letter-spacing:.1em}
  body.single-portfolio .sy-e3s-title{font-size:16.5px}
  body.single-portfolio .sy-e3s-cta{font-size:14px}
}
@container sy-e3k (max-width:760px){
  body.single-portfolio .sy-e3k-name{font-size:13px}
  body.single-portfolio .sy-e3k-text{font-size:14px}
}
@container sy-e3k (max-width:460px){
  body.single-portfolio .sy-e3k-eyebrow{font-size:12px;letter-spacing:.1em}
  body.single-portfolio .sy-e3k-text{font-size:14px}
  body.single-portfolio .sy-e3k-note{font-size:13px}
  body.single-portfolio .sy-e3k-cta{font-size:14px}
}
@media (max-width:767px){
  body.single-portfolio .sy-e3k-note,
  body.single-portfolio .sy-e3c-note{font-size:13px}
}

/* ======================================================================
   3) sy-side: yan fotoğraf (683x1024 portre)
   Mobilde sabit 200px şerit yerine portreye yakın 4/5 kutu; ekranın ~%38'i, yüz kesilmez.
   ====================================================================== */
@media (max-width:767px){
  /* img height:100% yüzde yüksekliği aspect-ratio'dan çözülmediği için kutuya sabit genişlik x 1.25 yükseklik verilir */
  body.single-portfolio .sy-side__fig,
  body.single-portfolio .sy-side--l .sy-side__fig{flex:0 0 auto;width:min(76vw,290px);height:calc(min(76vw,290px) * 1.25);min-height:0;margin:0 auto 8px;align-self:center}
  body.single-portfolio .sy-side__fig.sy-side__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--sy-pos,50% 18%)}
  body.single-portfolio .sy-side__fig figcaption{font-size:12.5px}
}
/* 768-900: iki sütunda yan fotoğraf, yüksekliği metne uyar; kutu çok uzarsa yüzü üstte tut */
@media (min-width:768px) and (max-width:900px){
  body.single-portfolio .sy-side__fig.sy-side__fig img{height:100%;object-fit:cover;object-position:var(--sy-pos,50% 18%)}
}

/* ======================================================================
   4) sy-doc: sayfa üstü doktor bloğu (kaynak görsel 1000x1000 kare)
   Kutu da kare: kırpma yok. Eski 190x(stretch) kutusu 0.55 oranla kırpıyordu.
   ====================================================================== */
body.single-portfolio .sy-doc-photo{flex:0 0 230px;align-self:center}
body.single-portfolio .sy-doc-photo.sy-doc-photo img{height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
@media (max-width:1024px){
  body.single-portfolio .sy-doc-photo{flex-basis:200px}
}
@media (max-width:820px){
  body.single-portfolio .sy-doc-photo{flex:0 0 auto;width:100%;max-width:240px;height:auto;align-self:center}
  body.single-portfolio .sy-doc-photo.sy-doc-photo img{height:auto;aspect-ratio:1/1}
  body.single-portfolio .sy-doc-tag{min-height:44px;padding:6px 16px;font-size:13px;justify-content:center}
  body.single-portfolio .sy-doc-about{min-height:48px;justify-content:center}
}
@media (max-width:480px){
  body.single-portfolio .sy-doc-photo{max-width:min(240px,72vw)}
  body.single-portfolio .sy-doc-text{text-align:left;font-size:15px}
  body.single-portfolio .sy-doc-tags{gap:8px}
}

/* ======================================================================
   5) sy-dk: kenar çubuğu doktor kartı (kaynak 768x667 = 1.15)
   Kutu 4/4.7 (0.85) idi, %26 kırpıyordu. 1/1'e getirildi (~%13 yan kırpma, yüz x=%46 korunur).
   ====================================================================== */
body.single-portfolio .sy-dk-photo{aspect-ratio:1/1}
body.single-portfolio .sy-dk-photo.sy-dk-photo>img{object-position:46% 10%}
body.single-portfolio .sy-dk-lbl{font-size:12px}
body.single-portfolio .sy-dk-sub{font-size:13px}
body.single-portfolio .sy-dk-title{font-size:13px}
@media (max-width:767px){
  body.single-portfolio .sy-dk-cta{min-height:56px}
}

/* ======================================================================
   6) syvg: video galerisi (galeri.css düzenlenmez; burada ezilir)
   ====================================================================== */
@media (max-width:600px){
  body.single-portfolio .syvg .syvg-eyebrow{font-size:12px}
  body.single-portfolio .syvg-peek-count{font-size:12px}
  /* küçük resim düğmeleri görsel olarak aynı kalır, dokunma alanı >=44px olur */
  body.single-portfolio .syvg .syvg-peek-btn{position:relative;overflow:visible}
  body.single-portfolio .syvg .syvg-peek-btn::after{content:"";position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}
  body.single-portfolio .syvg .syvg-peek-btn img{border-radius:4px}
}
/* açılan pencere (modal): dokunma hedefleri ve yazı boyutu; dikey telefonda tek ekrana sığma
   --chip/--railh değişkenleri --H hesabına girdiği için kutu yine tek ekrana sığar */
@media (max-width:600px) and (orientation:portrait){
  html body .syvm{--chip:48px;--tx:34px}
  html body .syvm .syvm-chip{height:44px;font-size:14px}
  html body .syvm .syvm-arrow{width:40px;height:40px}
  html body .syvm .syvm-name{font-size:13px;line-height:17px}
  html body .syvm .syvm-badge,html body .syvm .syvm-dur{font-size:11px}
  html body .syvm .syvm-card{font-size:13px}
}

/* ======================================================================
   7) Görsel kutuları: icerik.css `.elementor-widget-html img{height:auto}` kuralına karşı
   kutuyu dolduran (object-fit:cover) görsellerin height:100%'ünü geri ver (özgüllük 0,3,2)
   ====================================================================== */
body.single-portfolio .sy-e3c-photo.sy-e3c-photo img,
body.single-portfolio .sy-e3k-photo.sy-e3k-photo img,
body.single-portfolio .sy-dk-photo.sy-dk-photo>img{width:100%;height:100%;object-fit:cover}
body.single-portfolio .syvg .syvg-poster img,
body.single-portfolio .syvg .syvg-peek-btn img{height:100%;object-fit:cover}

/* ======================================================================
   8) Küçük yazılar / çipler (tablet dahil dokunmatik: <=1024)
   ====================================================================== */
@media (max-width:1024px){
  body.single-portfolio .sy-doc-tag{min-height:44px;padding:6px 16px;font-size:13px;justify-content:center}
}

/* sy-e3s yuvarlak fotoğraf: görsel kutudan büyük (185%) ve sola kaymış olmalı; icerik.css'teki
   `.elementor-widget-html img{max-width:100%}` bunu 58px'e sıkıştırıp yüzü kırpıyordu (özgüllük 0,3,2) */
body.single-portfolio .sy-e3s-photo.sy-e3s-photo img{width:185%;max-width:none;height:auto;margin:0 0 0 -44%}