/* === v1.42.0 Home Left Hero Mobile Image Fit === */
/*
  Sol hero görseli 2400x900 gibi geniş banner oranında kullanıldığında
  mobilde crop yemesin diye sadece sol hero mobil oranını düzeltir.
  Sağ slider'a dokunmaz.
*/

@media (max-width: 900px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-card.big.hero-left-image,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image.kb-hero-card{
    aspect-ratio: 8 / 3!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background:#020916!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .hero-full-img{
    object-fit:contain!important;
    object-position:center center!important;
    width:100%!important;
    height:100%!important;
    background:#020916!important;
  }

  /*
    Sol hero'da contain kullanınca yazı için alt kısım daha dar hissedilebilir.
    Metni çok az daha kompakt tutuyoruz; buton sabit-offset sistemi korunur.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy h1{
    font-size:clamp(21px, calc(6.3vw * (var(--kb-hero-title-scale, 100) / 100)), 34px)!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-highlight{
    font-size:clamp(15px, calc(4.65vw * (var(--kb-hero-highlight-scale, 100) / 100)), 25px)!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-btn,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy .btn{
    min-height:36px!important;
    padding:0 13px!important;
    font-size:12px!important;
  }
}

@media (max-width: 520px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-card.big.hero-left-image,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image.kb-hero-card{
    aspect-ratio: 8 / 3!important;
    border-radius:20px!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-left-bottom,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-left-center,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-left-top,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-center,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-right-bottom,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy.pos-right-center{
    left:13px!important;
    right:13px!important;
    bottom:12px!important;
    gap:3px!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-eyebrow{
    font-size:9px!important;
    letter-spacing:.17em!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy h1{
    font-size:clamp(20px, calc(6.0vw * (var(--kb-hero-title-scale, 100) / 100)), 30px)!important;
    max-width:9.3em!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-highlight{
    font-size:clamp(14px, calc(4.3vw * (var(--kb-hero-highlight-scale, 100) / 100)), 22px)!important;
    max-width:12em!important;
  }
}

@media (max-width: 390px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-copy h1{
    font-size:clamp(18px, calc(5.6vw * (var(--kb-hero-title-scale, 100) / 100)), 27px)!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .kb-hero-highlight{
    font-size:clamp(13px, calc(4.0vw * (var(--kb-hero-highlight-scale, 100) / 100)), 20px)!important;
  }
}