/* ===== Testis protezi sayfasina ozel stiller =====
   Sayfa genelinde paylasilan .svc-* siniflari kullaniliyor; burada yalnizca
   iki sey var: iki sutunlu bolumun float duzeni ve gorsel altligi.

   NOT (onemli): bu dosya head'de styles.min.css ten ONCE yukleniyor
   (partials/head.ejs, headCode satiri global stil etiketinden yukarida).
   Ayni ozgullukteki global kurallar bizden SONRA geldigi icin kazanirdi;
   bu yuzden asagidaki kurallar cift sinif (0-2-0) yazildi. */

/* ===== Iki sutunlu bolum =====
   .svc-two-col bir CSS Grid (1fr 1fr). Grid sutunlari bagimsiz izlerdir, bu
   yuzden metin bir grid ogesinin ALTINA akamaz. Metnin gorselin yanindan
   baslayip altindan devam etmesi icin duzen float'a cevriliyor. Ayni desen
   page-buried-penis.css te de var.

   Float yalnizca kaynak sirasinda KENDISINDEN SONRAKI satirlari kaydirdigi
   icin .svc-image, .svc-text ten once gelmek zorunda (markup oyle). */
.svc-two-col.svc-two-col--wrap{display:block;gap:0}
.svc-two-col.svc-two-col--wrap::after{content:"";display:table;clear:both}
/* Genislik grid sutununun kapladigi alanla ayni tutuldu: 1fr 1fr + 64px gap
   ~ %47. Boylece float'a gecerken gorsel kucuImus gibi gorunmuyor. */
.svc-two-col.svc-two-col--wrap .svc-image{float:right;width:47%;margin:0 0 16px 40px}
.svc-two-col.svc-two-col--wrap .svc-image img{display:block;width:100%;height:auto}
/* Ilk basligin ustunde float yuzunden olusan bosluk kalmasin. */
.svc-two-col.svc-two-col--wrap .svc-text>:first-child{margin-top:0}
@media (max-width:760px){
  /* Dar ekranda yan yana duracak yer yok: gorsel metnin ustune aliniyor. */
  .svc-two-col.svc-two-col--wrap .svc-image{float:none;width:100%;margin:0 0 24px}
}

/* ===== Aciklamali gorsel =====
   Implant karsilastirmasi ve boyut cetveli icin. Genislik metin sutunuyla
   ayni olcude tutuldu ki bolum icinde tasmis gibi durmasin. */
.tp-figure{
  margin:0 auto 40px;
  max-width:620px;
  text-align:center;
}
.tp-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--c-line);
}
.tp-figure figcaption{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--c-text-soft);
}
/* Sekme panelinin icindeki gorsel: metin akisinin parcasi, ortalanmis degil. */
.tp-figure.tp-figure--inline{
  margin:22px 0;
  max-width:460px;
  text-align:left;
}
/* Salin/silikon karsilastirmasi iki panelde de duruyor (sekme basina bir tane).
   Boyut cetvelinden daha kucuk: yan yana iki nesne, detay gerektirmiyor. */
.tp-figure.tp-figure--compare{
  max-width:360px;
}

/* ===== Kanit bandi =====
   Ayni desen page-buried-penis.css te de var; siniflar paylasilan styles.css e
   girmedigi icin her sayfa kendi kopyasini tasiyor. */
.ev-band{
  background:var(--c-bg-alt);
  padding:var(--space-section) 0;
}
.ev-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
  margin:8px 0 44px;
}
.ev-fig-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,46px);
  line-height:1.05;
  color:var(--c-primary-700,#8a6a3a);
  margin-bottom:12px;
}
.ev-fig-label{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.6;
  color:var(--c-text-soft);
}
.ev-fig-src{
  margin:0;
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--c-text-muted,#8b8279);
}
.ev-quote{
  margin:0 0 32px;
  max-width:760px;
  border-left:3px solid var(--c-primary-600,#b08a4f);
  padding:4px 0 4px 24px;
}
.ev-quote p{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.4;
  color:var(--c-text);
}
.ev-quote cite{
  font-style:normal;
  font-size:14px;
  color:var(--c-text-muted,#8b8279);
}
.ev-band-note{
  max-width:820px;
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--c-text-muted,#8b8279);
}

/* ===== Kaynak listesi ===== */
.tp-source-list{
  margin:0;
  padding-left:22px;
  display:grid;
  gap:20px;
}
.tp-source-list li{
  font-size:15px;
  line-height:1.6;
  color:var(--c-text-soft);
}
.tp-source-title{
  display:block;
  color:var(--c-text);
}
.tp-source-meta{
  display:block;
  margin-top:4px;
  font-size:13.5px;
  color:var(--c-text-muted,#8b8279);
}

/* ===== Madde listeleri tam genislikte =====
   Paylasilan kural .svc-implant-list li yi flex yapiyor. Dar sutunda sorun
   yoktu, ama bolumler container genisligine cikinca <strong> etiketi ayri bir
   flex ogesi olarak kendi sutununa dusuyor ve metin yaninda hizasiz akiyor.
   Burada normal metin akisina donuluyor, madde isareti asili konumlandirmayla
   korunuyor. Cift sinif (0-2-0): bu dosya styles.min.css ten ONCE yukleniyor. */
.svc-why-text .svc-implant-list li{
  display:block;
  position:relative;
  padding-left:18px;
  line-height:1.7;
}
.svc-why-text .svc-implant-list li::before{
  position:absolute;
  left:0;
  top:0.62em;
}

/* ===== Karsilastirma gorseli metnin saginda =====
   Panel icinde float ile: metin gorselin solundan baslayip altindan devam
   ediyor. Float kaynak sirasinda kendisinden SONRAKI satirlari kaydirdigi icin
   figure, <p> lerden ONCE duruyor (markup oyle). Panelin sonunda temizlenmezse
   bir sonraki bolum yukari tirmanir, o yuzden ::after ile clear. */
.itype-panel-body .tp-figure--compare{
  float:right;
  width:340px;
  max-width:42%;
  margin:4px 0 20px 32px;
}
.itype-panel-body::after{
  content:"";
  display:table;
  clear:both;
}
@media (max-width:640px){
  /* Dar ekranda yan yana yer yok. */
  .itype-panel-body .tp-figure--compare{
    float:none;
    width:100%;
    max-width:360px;
    margin:0 0 20px;
  }
}

/* ===== Iyilesme bolumundeki yan gorsel =====
   Once/sonra fotografi metnin saginda float ediyor; paragraflar solundan
   baslayip altindan devam ediyor. Float kaynak sirasinda kendisinden SONRAKI
   satirlari kaydirdigi icin figure ilk <p> den ONCE duruyor (markup oyle).
   Bolum sonunda temizlenmezse bir sonraki bolum yukari tirmanir: clearfix
   yalnizca gorseli tasiyan sarmalayiciya veriliyor, .svc-why-text in tamamina
   degil. Cift sinif (0-2-0) sart: bu dosya styles.min.css ten ONCE yukleniyor. */
.svc-why-text .tp-figure--side{
  float:right;
  /* 360px'ten %30 buyutuldu. max-width birlikte yukseltildi, yoksa dar
     masaustunde eski olcuye geri kirpilirdi. */
  width:468px;
  max-width:48%;
  margin:6px 0 24px 36px;
}
/* Aday bolumundeki yan gorsel Recovery'dekinden dar: o fotograf 784x440
   (yatay), bu 980x735 (4:3). Ayni genislikte basilsa yaklasik iki kati yer
   kaplar ve bolumun basini kaplardi. Yalnizca genislik eziliyor; float,
   kenar bosluklari ve dar ekran davranisi --side'dan geliyor. */
.svc-why-text .tp-figure--side-sm{
  width:434px;
  max-width:44%;
}
.svc-why-text.tp-has-side-figure::after{
  content:"";
  display:table;
  clear:both;
}
/* Global .svc-implant-list bir flex container (bkz. styles.css). Flex kutusu
   BFC kurdugu icin float'un yanina akamaz: butun liste gorselin altina itilir
   ve arada bir bosluk kalir. Bu bolumde liste blok akisa cevriliyor, madde
   isareti mutlak konumlandiriliyor. Ayni cozum page-premature-ejaculation.css
   te de var. gap:8px blok akista islemedigi icin margin ile veriliyor. */
.tp-has-side-figure .svc-implant-list{display:block}
.tp-has-side-figure .svc-implant-list li{
  display:block;
  position:relative;
  padding-left:16px;
  margin-bottom:8px;
  line-height:1.65;
}
.tp-has-side-figure .svc-implant-list li::before{
  position:absolute;
  left:0;
  top:0.62em;
}
@media (max-width:760px){
  /* Dar ekranda yan yana yer yok. */
  .svc-why-text .tp-figure--side{
    float:none;
    width:100%;
    max-width:460px;
    margin:0 0 24px;
  }
}

/* ===== Bolumler arasi bosluk =====
   .svc-section ve .ev-band her iki yonde de var(--space-section) padding
   aliyor (clamp(64px,9vw,140px)). Iki bolum yan yana gelince bunlar ust uste
   binip masaustunde ~280px bir bosluk birakiyor ve sayfa kopuk goruniyor.
   Ustteki bolumun alt, alttakinin ust dolgusu birlikte kisaltiliyor.
   Cift sinif (0-2-0) sart: bu dosya styles.min.css ten ONCE yukleniyor. */
.svc-section.tp-tight-bottom{padding-bottom:32px}
.ev-band.tp-tight-top{padding-top:32px}
.svc-section.svc-faq-section{padding-top:32px}

/* Overview basligi: gorselin yaninda degil, ustunde tam genislikte.
   Kendi alt bosluguyla bitiyor, ardindan gelen .svc-image float ediyor ve
   yalnizca govde paragraflari onun solundan akiyor. */
.svc-two-col--wrap .tp-overview-head{
  margin-bottom:20px;
}
.svc-two-col--wrap .tp-overview-head h2{
  margin-bottom:0;
}

/* ===== Govde metni icindeki alinti =====
   Kanit bandindaki alinti ortali bir blok olarak duruyor ve orada dogru: bolum
   zaten ortali. Iyilesme bolumundeki alinti ise duz metnin arasinda, o yuzden
   paragraflarla ayni hizadan basliyor ve daha buyuk puntoyla yaziliyor.
   Bandi etkilememesi icin kural .svc-why-text ile sinirli. */
.svc-why-text .ev-quote{
  margin:32px 0;
  max-width:900px;
  padding-left:28px;
  border-left-width:4px;
}
.svc-why-text .ev-quote p{
  font-size:clamp(23px,2.8vw,31px);
  line-height:1.35;
  margin-bottom:14px;
}
.svc-why-text .ev-quote cite{
  font-size:15px;
}