/* SUKMA Website v113.13
   FIX HOME BANNER / SLIDER RESPONSIVE ALL DEVICES
*/

.home-slider,
.home-slider-track,
.home-slide{
  width:100%;
  max-width:100%;
  min-width:0;
}

.home-slider{
  overflow:hidden;
}

.home-slide{
  overflow:hidden;
}

.home-slide-content{
  width:100%;
  max-width:min(720px,100%);
  min-width:0;
}

.home-slide-content > *{
  max-width:100%;
}

.home-slide h1{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

.home-slide-content > p{
  max-width:min(650px,100%);
  overflow-wrap:anywhere;
}

.home-slide-media{
  min-width:0;
  max-width:100%;
}

.home-slide-media img{
  display:block;
  max-width:100%;
}

/* Desktop / laptop */
@media (min-width:1101px){
  .home-slider,
  .home-slider-track{
    min-height:clamp(560px,68vh,760px);
  }

  .home-slide{
    min-height:clamp(560px,68vh,760px);
    padding:
      clamp(52px,6vw,80px)
      clamp(38px,7vw,120px)
      clamp(94px,9vw,125px);
    column-gap:clamp(28px,5vw,76px);
  }

  .home-slide h1{
    font-size:clamp(44px,5vw,76px);
    line-height:1.02;
  }

  .home-slide-media{
    height:clamp(350px,42vw,500px);
  }
}

/* Tablet landscape / laptop kecil */
@media (min-width:761px) and (max-width:1100px){
  .home-slider,
  .home-slider-track{
    min-height:600px;
  }

  .home-slide,
  .home-slide.position-right{
    grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);
    gap:30px;
    padding:56px 42px 105px;
  }

  .home-slide.position-right{
    grid-template-columns:minmax(280px,.85fr) minmax(0,1fr);
  }

  .home-slide h1{
    font-size:clamp(38px,5.7vw,52px);
    line-height:1.05;
  }

  .home-slide-content > p{
    font-size:16px;
    line-height:1.6;
  }

  .home-slide-media{
    height:360px;
  }

  .home-slider-footer{
    left:42px;
    right:42px;
  }
}

/* HP / iPhone / tablet portrait */
@media (max-width:760px){
  .home-slider,
  .home-slider-track{
    min-height:0!important;
    height:auto!important;
  }

  .home-slider{
    min-height:clamp(500px,145vw,690px)!important;
  }

  .home-slider-track{
    min-height:inherit!important;
  }

  .home-slide,
  .home-slide.position-right,
  .home-slide.position-center{
    min-height:inherit!important;
    width:100%;
    max-width:100%;
    display:flex!important;
    flex-direction:column;
    align-items:stretch!important;
    justify-content:flex-end!important;
    text-align:left!important;
    padding:
      30px
      clamp(16px,5vw,24px)
      92px!important;
  }

  .home-slide-content,
  .home-slide.position-right .home-slide-content,
  .home-slide.position-center .home-slide-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-items:flex-start!important;
    justify-self:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    z-index:3;
  }

  .home-slide-eyebrow{
    max-width:100%;
    font-size:10px;
    letter-spacing:.10em;
    line-height:1.4;
    overflow-wrap:anywhere;
  }

  .home-slide-eyebrow:before{
    width:22px;
    flex:0 0 22px;
  }

  .home-slide h1{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:10px 0 12px!important;
    font-size:clamp(28px,9vw,40px)!important;
    line-height:1.08!important;
    letter-spacing:-.028em!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:auto;
  }

  .home-slide-content > p{
    width:100%;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(13px,3.8vw,15px)!important;
    line-height:1.55!important;
  }

  .home-slide-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px!important;
    margin-top:18px!important;
  }

  .home-slide-actions .btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%;
    justify-content:center;
    text-align:center;
  }

  .home-slide-badge{
    max-width:100%;
    margin-top:16px!important;
    white-space:normal;
  }

  /* Image always fills banner safely on mobile */
  .home-slide-media,
  .home-slide.position-right .home-slide-media,
  .home-slide.position-center .home-slide-media,
  .home-slide.layout-full .home-slide-media,
  .home-slide.layout-split .home-slide-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    opacity:1!important;
    z-index:-1!important;
  }

  .home-slide-media img,
  .home-slide.layout-full .home-slide-media img,
  .home-slide.layout-split .home-slide-media img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .home-slide-shade,
  .home-slide.position-right .home-slide-shade,
  .home-slide.position-center .home-slide-shade,
  .home-slide.layout-full .home-slide-shade,
  .home-slide.layout-full.position-right .home-slide-shade,
  .home-slide.layout-full.position-center .home-slide-shade{
    display:block!important;
    z-index:0!important;
    background:
      linear-gradient(
        0deg,
        rgba(10,12,8,.96) 0%,
        rgba(10,12,8,.88) 20%,
        rgba(10,12,8,.60) 52%,
        rgba(10,12,8,.22) 78%,
        rgba(10,12,8,.08) 100%
      )!important;
  }

  .home-slide:before{
    z-index:-3!important;
  }

  .home-slide:after{
    display:none!important;
  }

  .home-slider-arrow{
    width:38px!important;
    height:38px!important;
    top:48%!important;
    transform:translateY(-50%);
    font-size:27px!important;
    background:rgba(20,20,16,.48)!important;
  }

  .home-slider-arrow.prev{
    left:10px!important;
  }

  .home-slider-arrow.next{
    right:10px!important;
  }

  .home-slider-footer{
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
    grid-template-columns:1fr!important;
    justify-items:center;
  }

  .home-slider-trust,
  .home-slider-counter{
    display:none!important;
  }

  .home-slider-dots{
    justify-self:center!important;
    max-width:70vw!important;
  }

  /* image-only slide remains usable on mobile */
  .home-slide.has-image.no-text.no-buttons.layout-split,
  .home-slide.has-image.no-text.no-buttons.layout-full{
    min-height:inherit!important;
    padding:0!important;
  }

  .home-slide.has-image.no-text.no-buttons .home-slide-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }

  .home-slide.has-image.no-text.no-buttons .home-slide-shade{
    display:none!important;
  }
}

/* iPhone / Android narrow */
@media (max-width:430px){
  .home-slider{
    min-height:clamp(520px,155vw,660px)!important;
  }

  .home-slide,
  .home-slide.position-right,
  .home-slide.position-center{
    padding-left:16px!important;
    padding-right:16px!important;
    padding-bottom:86px!important;
  }

  .home-slide h1{
    font-size:clamp(27px,8.6vw,36px)!important;
  }

  .home-slide-content > p{
    font-size:14px!important;
    line-height:1.5!important;
  }

  .home-slider-arrow{
    top:44%!important;
  }
}

/* Very small screens, 320-375 */
@media (max-width:375px){
  .home-slider{
    min-height:580px!important;
  }

  .home-slide h1{
    font-size:29px!important;
    line-height:1.08!important;
  }

  .home-slide-content > p{
    font-size:13px!important;
  }

  .home-slide-actions .btn{
    min-height:42px;
    padding:10px 13px;
    font-size:13px;
  }

  .home-slider-arrow{
    width:36px!important;
    height:36px!important;
  }
}

/* Landscape mobile */
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .home-slider,
  .home-slider-track{
    min-height:430px!important;
  }

  .home-slide,
  .home-slide.position-right,
  .home-slide.position-center{
    padding:22px 70px 66px!important;
    justify-content:flex-end!important;
  }

  .home-slide h1{
    font-size:clamp(28px,6vw,40px)!important;
    margin:8px 0 9px!important;
  }

  .home-slide-content > p{
    font-size:13px!important;
    line-height:1.4!important;
    max-width:700px!important;
  }

  .home-slide-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:520px;
  }

  .home-slider-arrow{
    top:50%!important;
  }
}