:root{
    --swiper-theme-color: #007aff;
    --expanding-collection-content-bg-color: #212221;
    --expanding-collection-content-vertical-offset: 32px;
    --expanding-collection-content-horizontal-offset: 16px;
    --expanding-collection-content-padding: 16px;
    --expanding-collection-content-border-radius: 12px;
    --expanding-collection-cover-border-radius: 12px;
    --expanding-collection-inactive-cover-opacity: .5;
    --expanding-collection-opened-translate-y: -64px;
    --expanding-collection-cover-box-shadow: 0px 8px 16px rgba(0, 0, 0, .7);
    --expanding-collection-opened-cover-box-shadow: 0px 4px 8px rgba(0, 0, 0, .5);
}

:host{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    z-index:1
}

.swiper{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:hidden;
    list-style:none;
    padding:0;
    z-index:1;
    display:block
}

.swiper-vertical>.swiper-wrapper{
    flex-direction:column
}

.swiper-wrapper{
    position:relative;
    width:100%;
    height:100%;
    z-index:1;
    display:flex;
    transition-property:transform;
    transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing:content-box
}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{
    transform:translate(0)
}

.swiper-horizontal{
    touch-action:pan-y
}

.swiper-vertical{
    touch-action:pan-x
}

.swiper-slide{
    flex-shrink:0;
    width:100%;
    height:100%;
    position:relative;
    transition-property:transform;
    display:block
}

.swiper-slide-invisible-blank{
    visibility:hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide{
    height:auto
}

.swiper-autoheight .swiper-wrapper{
    align-items:flex-start;
    transition-property:transform,height
}

.swiper-backface-hidden .swiper-slide{
    transform:translateZ(0);
    backface-visibility:hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper{
    perspective:1200px
}

.swiper-3d .swiper-wrapper{
    transform-style:preserve-3d
}

.swiper-3d{
    perspective:1200px
}

.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{
    transform-style:preserve-3d
}

.swiper-css-mode>.swiper-wrapper{
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{
    display:none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide{
    scroll-snap-align:start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper{
    scroll-snap-type:x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper{
    scroll-snap-type:y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper{
    scroll-snap-type:none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{
    scroll-snap-align:none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before{
    content:"";
    flex-shrink:0;
    order:9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{
    scroll-snap-align:center center;
    scroll-snap-stop:always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{
    margin-inline-start:var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{
    height:100%;
    min-height:1px;
    width:var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{
    margin-block-start:var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{
    width:100%;
    min-width:1px;
    height:var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10
}

.swiper-3d .swiper-slide-shadow{
    background:rgba(0,0,0,.15)
}

.swiper-3d .swiper-slide-shadow-left{
    background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-right{
    background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-top{
    background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-bottom{
    background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-lazy-preloader{
    width:42px;
    height:42px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-21px;
    margin-top:-21px;
    z-index:10;
    transform-origin:50%;
    box-sizing:border-box;
    border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius:50%;
    border-top-color:transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{
    animation:swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white{
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black{
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin{
    0%{
        transform:rotate(0)
    }
    to{
        transform:rotate(360deg)
    }
}

.expanding-collection{
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
    width:100%;
    margin:0 auto
}

.expanding-collection .swiper{
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transform:translate(0)
}

.expanding-collection .swiper-slide{
    justify-content:center;
    align-items:center;
    display:flex;
    width:calc(100% - 32px)
}

.expanding-collection-initialized .expanding-collection-content,.expanding-collection-initialized .expanding-collection-cover,.expanding-collection-initialized .expanding-collection-cover:before{
    transition-duration:.3s;
}

.expanding-collection-container,.expanding-collection-cover{
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

.expanding-collection-container{
    max-width:calc(100% - 32px);
    position:relative
}

.expanding-collection-cover{
    opacity:var(--expanding-collection-inactive-cover-opacity);
    position:relative;
}

.expanding-collection-cover img{
    width:100%;
    aspect-ratio:3/2;
    border-radius:var(--expanding-collection-cover-border-radius);
    display:block;
    margin:0;
    position:relative;
    z-index:2;
    object-fit:cover
}

.expanding-collection-cover:before{
    content:"";
    position:absolute;
    width:100%;
    height:90%;
    left:0;
    bottom:0;
    border-radius:var(--expanding-collection-cover-border-radius);
    z-index:1;
    transform-origin:center bottom;
    box-shadow:var(--expanding-collection-cover-box-shadow)
}

.swiper-slide.swiper-slide-active .expanding-collection-cover{
    opacity:1;
    cursor:pointer
}

.swiper-slide:not(.swiper-slide-active) .expanding-collection-cover:before{
    box-shadow:none
}

.swiper-slide:not(.swiper-slide-active) .expanding-collection-content{
    opacity:0
}

.expanding-collection-content{
    position:absolute;
    box-sizing:border-box;
    left:calc(-1 * var(--expanding-collection-content-horizontal-offset));
    right:calc(-1 * var(--expanding-collection-content-horizontal-offset));
    top:0;
    z-index:0;
    padding-top:calc(var(--expanding-collection-cover-height) - var(--expanding-collection-content-vertical-offset));
    border-radius:var(--expanding-collection-content-border-radius);
    transform:scaleX(var(--expanding-collection-scale-x)) scaleY(var(--expanding-collection-scale-y));
    transform-origin:center top;
    background:var(--expanding-collection-content-bg-color);
}

.expanding-collection-content-inner{
    padding:var(--expanding-collection-content-padding);
    box-sizing:border-box
}

.expanding-collection-opened .expanding-collection-cover{
    transform:translateY(var(--expanding-collection-opened-translate-y))
}

.expanding-collection-opened .expanding-collection-cover:before{
    box-shadow:var(--expanding-collection-opened-cover-box-shadow)
}

.expanding-collection-opened .expanding-collection-content{
    transform:scale(1) translateY(calc(var(--expanding-collection-opened-translate-y) + var(--expanding-collection-content-vertical-offset)));
    opacity:1
}

html,body{
    position:relative;
    height:100%;
    margin:0;
    padding:0
}

#app{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.expanding-collection{
    width:100%;
    height:100%;
}

/* Responsive slide widths - Memanfaatkan layar dengan lebih baik */
.expanding-collection .swiper-slide{
    width:600px;
    max-width:calc(100% - 32px - 32px);
}

@media (orientation: portrait){
    .expanding-collection-cover img{
        height:40vh;
        object-fit:cover;
    }
}

/* Mobile devices */
@media (max-width: 767px) {
    .expanding-collection .swiper-slide{
        width:85vw;
        max-width:calc(100% - 40px);
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1023px) {
    .expanding-collection .swiper-slide{
        width:65vw;
        max-width:calc(100% - 60px);
    }
}

/* Desktop kecil */
@media (min-width: 1024px) and (max-width: 1439px) {
    .expanding-collection .swiper-slide{
        width:50vw;
        max-width:calc(100% - 80px);
    }
}

/* Desktop menengah */
@media (min-width: 1440px) and (max-width: 1919px) {
    .expanding-collection .swiper-slide{
        width:45vw;
        max-width:calc(100% - 100px);
    }
}

/* Desktop besar */
@media (min-width: 1920px) and (max-width: 2559px) {
    .expanding-collection .swiper-slide{
        width:40vw;
        max-width:calc(100% - 120px);
    }
}

/* Ultra wide screens */
@media (min-width: 2560px) {
    .expanding-collection .swiper-slide{
        width:35vw;
        max-width:calc(100% - 160px);
    }
}

.expanding-collection-cover{
    color:#fff
}

.expanding-collection .demo-cover-title{
    box-sizing:border-box;
    padding:8px 16px;
    font-size:24px;
    color:#fff;
    position:absolute;
    left:0;
    top:0px;
    width:100%;
    text-align:center;
    z-index:10;
    font-weight:600;
}

.expanding-collection .demo-cover-coords{
    padding:8px 16px;
    width:100%;
    box-sizing:border-box;
    position:absolute;
    left:0;
    bottom:0;
    display:flex;
    justify-content:space-between;
    z-index:10;
    text-transform:uppercase;
    font-size:12px;
    font-weight:500;
}

.expanding-collection .demo-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    align-content:center;
    flex-wrap:wrap
}

.expanding-collection .demo-content-title{
    text-align:center;
    font-size:16px;
    margin-bottom:8px;
    font-weight:600;
    width:100%;
}

.expanding-collection .demo-content-avatars{
    display:flex
}

.expanding-collection .demo-content-avatars img{
    border-radius:50%;
    width:clamp(28px, 4vw, 40px);
    height:clamp(28px, 4vw, 40px);
    border:4px solid #fff
}

.expanding-collection .demo-content-avatars img+img{
    margin-left:-16px
}

.expanding-collection .demo-content-rating{
    display:flex;
}

.expanding-collection .demo-content-rating img{
    width:16px;
    height:16px;
}

/* Default (untuk layar kecil, misalnya HP potrait) */
    .expanding-collection {
      height: 70vh;
      max-height: 500px;
    }

    /* Tablet portrait (min-width: 600px) */
    @media (min-width: 600px) {
      .expanding-collection {
        height: 75vh;
        max-height: 600px;
      }
    }

    /* Tablet landscape dan layar laptop kecil (min-width: 768px) */
    @media (min-width: 768px) {
      .expanding-collection {
        height: 60vh;
        max-height: 700px;
      }
    }

    /* Desktop standar (min-width: 1024px) */
    @media (min-width: 1024px) {
      .expanding-collection {
        height: 75vh;
        max-height: 800px;
      }
    }

    /* Layar besar (min-width: 1440px) */
    @media (min-width: 1440px) {
      .expanding-collection {
        height: 76.5vh;
        max-height: 900px;
      }
    }