/* === v1.42.1 Home Hero Mobile Auto Fit === */
/*
  Mobilde ana başlığın görünmemesi ve slider/sol hero görsel sığma problemleri için son katman.
  Masaüstünü ellemez.
*/

@media (max-width: 900px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    overflow:visible!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-card,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    background:#020916!important;
  }

  /*
    Sol hero genelde 2400x900 = 2.66:1.
    Sağ slider genelde 2400x1200 = 2:1.
    Mobilde ikisini ayrı oranla tutuyoruz.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image{
    aspect-ratio:8 / 3!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider{
    aspect-ratio:2 / 1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }

  /*
    Metinsiz arka plan gibi kullanıldığı için mobilde crop yerine sığdırma daha güvenli.
    Böylece maskot/ana görsel taşmıyor.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image .hero-full-img,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .hero-full-img,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slide .hero-full-img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    background:#020916!important;
  }

  /*
    Mobilde ana başlık kesin görünür.
    Eski CSS'lerdeki display/opacity/max-height etkilerini ezer.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy h1{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    clip:auto!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:initial!important;
    text-indent:0!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-left-bottom,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-left-center,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-left-top,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-center,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-right-bottom,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy.pos-right-center{
    left:14px!important;
    right:14px!important;
    top:auto!important;
    bottom:12px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:3px!important;
    transform:translate(
      clamp(-18px, calc(var(--kb-hero-offset-x, 0) * .38px), 18px),
      clamp(-24px, calc(var(--kb-hero-offset-y, 0) * .38px), 24px)
    )!important;
    overflow:visible!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-badge,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy .tag{
    font-size:9px!important;
    line-height:1!important;
    padding:4px 7px!important;
    margin:0!important;
    letter-spacing:.13em!important;
    max-width:calc(100vw - 64px)!important;
    white-space:nowrap!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-eyebrow{
    display:block!important;
    font-size:9px!important;
    line-height:1.05!important;
    letter-spacing:.16em!important;
    margin:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-copy h1{
    margin:0!important;
    font-size:clamp(18px, calc(5.7vw * (var(--kb-hero-title-scale, 100) / 100)), 30px)!important;
    line-height:.95!important;
    letter-spacing:-.052em!important;
    max-width:min(13.4em, calc(100vw - 64px))!important;
    text-wrap:balance!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-highlight{
    display:block!important;
    margin:0!important;
    font-size:clamp(13px, calc(4.15vw * (var(--kb-hero-highlight-scale, 100) / 100)), 22px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    max-width:min(16em, calc(100vw - 64px))!important;
    text-wrap:balance!important;
    overflow-wrap:anywhere!important;
  }

  /*
    Mobilde açıklama çok yer kaplıyor. Ana başlık/vurgu/buton görünürlüğü için
    varsayılan olarak açıklamayı gizliyoruz.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy p{
    display:none!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-btn,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy .btn{
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
    margin-top:4px!important;
    border-radius:12px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-dots{
    bottom:6px!important;
    z-index:8!important;
  }

  /*
    Sığdırma modunda koyuluk alta daha yoğun gelsin; yazı okunur kalsın.
  */
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-shade{
    background:
      linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.16) 43%, rgba(0,0,0,.76) 100%),
      linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.06) 100%)!important;
  }
}

@media (max-width: 520px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay{
    gap:12px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-left-image{
    aspect-ratio:8 / 3!important;
    border-radius:20px!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider{
    aspect-ratio:2 / 1!important;
    border-radius:20px!important;
  }

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

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-eyebrow{
    font-size:8px!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-copy h1{
    font-size:clamp(17px, calc(5.25vw * (var(--kb-hero-title-scale, 100) / 100)), 27px)!important;
    max-width:min(12.8em, calc(100vw - 58px))!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-highlight{
    font-size:clamp(12px, calc(3.85vw * (var(--kb-hero-highlight-scale, 100) / 100)), 20px)!important;
    max-width:min(15.5em, calc(100vw - 58px))!important;
  }
}

@media (max-width: 390px){
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-copy h1,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-copy h1{
    font-size:clamp(16px, calc(4.95vw * (var(--kb-hero-title-scale, 100) / 100)), 24px)!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .hero-slider .kb-hero-highlight,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-slide .kb-hero-highlight{
    font-size:clamp(11px, calc(3.65vw * (var(--kb-hero-highlight-scale, 100) / 100)), 18px)!important;
  }

  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-btn,
  body:not(.admin-body) .hero-showcase.kb-home-hero-overlay .kb-hero-copy .btn{
    height:32px!important;
    min-height:32px!important;
    font-size:10.5px!important;
  }
}