/* aspect-lock.css - Kart ve görsel alanlarını mevcut oranlarla kilitlemek için hafif katman.
   Not: Varsayılan olarak hiçbir oran zorlanmıyor (auto). 
   Sadece object-fit: cover + overflow: hidden uygulanır; düzen bozulmaz. 
   Oranları sabitlemek istediğinizde aşağıdaki CSS değişkenlerini güncelleyin. */

:root{
  /* Buradaki değerleri "genişlik/yükseklik" formatında girin, ör: 16/10 veya tek sayı: 1.6 */
  --hero-media-ratio: auto;
  --service-media-ratio: auto;
  --project-media-ratio: auto;
  --blog-media-ratio: auto;
}

/* Hero sağ görsel */
.banner-right-box .banner-img{
  aspect-ratio: var(--hero-media-ratio);
  overflow: hidden;
}
.banner-right-box .banner-img > img,
.banner-right-box .banner-img > video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:12px;
}

/* Hizmet kartları */
.service-item .service-img{
  aspect-ratio: var(--service-media-ratio);
  overflow: hidden;
}
.service-item .service-img > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Proje kartları */
.project-item .project-img{
  aspect-ratio: var(--project-media-ratio);
  overflow: hidden;
}
.project-item .project-img > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Blog kartları */
.blog-item .blog-thumb{
  aspect-ratio: var(--blog-media-ratio);
  overflow: hidden;
}
.blog-item .blog-thumb > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}