/* SUKMA Website v113.18
   RESTORE BANNER MOBILE + IMAGE TEXT VISIBLE
   Menggantikan perilaku v113.17 yang dapat membuat slider collapse/hilang.
*/

@media (max-width:760px){

  .home-slider{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:560px!important;
    min-height:560px!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .home-slider-track{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:560px!important;
    min-height:560px!important;
    overflow:hidden!important;
    visibility:visible!important;
  }

  .home-slide,
  .home-slide.position-left,
  .home-slide.position-right,
  .home-slide.position-center,
  .home-slide.layout-full,
  .home-slide.layout-split{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:560px!important;
    min-height:560px!important;
    margin:0!important;
    padding:18px 16px 76px!important;
    overflow:hidden!important;
    transform:none!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    text-align:left!important;
  }

  /*
   * Gambar tetap memenuhi area banner, tetapi CONTAIN agar tulisan/desain
   * yang sudah ada di dalam file gambar tidak terpotong di sisi kiri/kanan.
   */
  .home-slide-media,
  .home-slide.position-left .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{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    background:#5b5048!important;
    z-index:-2!important;
    opacity:1!important;
  }

  .home-slide-media img,
  .home-slide.layout-full .home-slide-media img,
  .home-slide.layout-split .home-slide-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#5b5048!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
  }

  /*
   * Jangan gelapkan seluruh gambar. Gradient hanya bagian bawah,
   * supaya tulisan yang tercetak pada gambar tetap terbaca.
   */
  .home-slide-shade,
  .home-slide.position-left .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-split .home-slide-shade{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    background:linear-gradient(
      to top,
      rgba(15,13,11,.82) 0%,
      rgba(15,13,11,.54) 24%,
      rgba(15,13,11,.12) 46%,
      rgba(15,13,11,0) 68%
    )!important;
  }

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

  /*
   * Teks HTML slider tetap ada, tetapi dibuat ringkas dan diletakkan
   * di bawah sehingga tidak menutup desain utama gambar.
   */
  .home-slide-content,
  .home-slide.position-left .home-slide-content,
  .home-slide.position-right .home-slide-content,
  .home-slide.position-center .home-slide-content,
  .home-slide.layout-full .home-slide-content,
  .home-slide.layout-split .home-slide-content{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:rgba(22,18,15,.58)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    text-align:left!important;
    transform:none!important;
    z-index:3!important;
  }

  .home-slide-eyebrow{
    font-size:9px!important;
    line-height:1.25!important;
    letter-spacing:.07em!important;
    margin-bottom:4px!important;
  }

  .home-slide h1,
  .home-slide-content h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 6px!important;
    padding:0!important;
    font-size:clamp(21px,6.5vw,28px)!important;
    line-height:1.08!important;
    letter-spacing:-.018em!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .home-slide-content > p{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.4!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .home-slide-actions{
    width:100%!important;
    margin-top:9px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }

  .home-slide-actions .btn{
    min-height:38px!important;
    padding:8px 12px!important;
    font-size:12px!important;
    flex:1 1 140px!important;
    justify-content:center!important;
  }

  .home-slide-badge{
    margin-top:8px!important;
    font-size:10px!important;
  }

  .home-slider-arrow{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    top:45%!important;
    bottom:auto!important;
    width:36px!important;
    height:36px!important;
    transform:translateY(-50%)!important;
    z-index:10!important;
    background:rgba(20,18,15,.58)!important;
  }

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

  .home-slider-footer{
    display:flex!important;
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    justify-content:center!important;
    align-items:center!important;
    z-index:11!important;
  }

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

  .home-slider-dots{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
}

@media (max-width:390px){
  .home-slider,
  .home-slider-track,
  .home-slide,
  .home-slide.position-left,
  .home-slide.position-right,
  .home-slide.position-center,
  .home-slide.layout-full,
  .home-slide.layout-split{
    height:530px!important;
    min-height:530px!important;
  }

  .home-slide{
    padding:14px 12px 70px!important;
  }

  .home-slide-content{
    padding:10px 12px!important;
  }

  .home-slide h1,
  .home-slide-content h1{
    font-size:clamp(20px,6.4vw,25px)!important;
  }

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

/* Landscape HP */
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .home-slider,
  .home-slider-track,
  .home-slide,
  .home-slide.position-left,
  .home-slide.position-right,
  .home-slide.position-center,
  .home-slide.layout-full,
  .home-slide.layout-split{
    height:410px!important;
    min-height:410px!important;
  }

  .home-slide{
    padding:14px 60px 54px!important;
  }

  .home-slide-content{
    max-width:600px!important;
  }

  .home-slide h1,
  .home-slide-content h1{
    font-size:24px!important;
  }

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