/* =========================
   SLIDER CORE
========================= */
.mySlider{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
}

.swiper-slide{
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* overlay gradient */
.swiper-slide::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.3)
    );
}

/* =========================
   TEXT AREA
========================= */
.overlay{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:#fff;
    max-width:650px;
    z-index:2;
}

/* title */
.slide-title{
    font-size:48px;
    font-weight:700;
    line-height:1.2;
    opacity:0;
    transform:translateY(30px);
}

/* subtitle (BIRU PREMIUM) */
.slide-subtitle{
    font-size:18px;
    margin-top:12px;
    color:#f4c542; /* 🔥 biru elegan */
    opacity:0;
    transform:translateY(30px);
}

/* button */
.slide-btn{
    display:inline-block;
    margin-top:20px;
    padding:12px 28px;
    background:linear-gradient(45deg,#0d47a1,#1976d2);
    color:#fff;
    border-radius:6px;
    font-weight:600;
    transition:0.3s;
    opacity:0;
    transform:translateY(30px);
}

.slide-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

/* =========================
   ANIMATION
========================= */
.swiper-slide-active .slide-title{
    opacity:1;
    transform:translateY(0);
    transition:0.6s;
}

.swiper-slide-active .slide-subtitle{
    opacity:1;
    transform:translateY(0);
    transition:0.6s 0.3s;
}

.swiper-slide-active .slide-btn{
    opacity:1;
    transform:translateY(0);
    transition:0.6s 0.6s;
}

/* =========================
   NAVIGATION
========================= */
.swiper-button-next,
.swiper-button-prev{
    color:#fff;
}

/* =========================
   TABLET
========================= */
@media (max-width:1024px){

    .overlay{
        left:6%;
        max-width:500px;
    }

    .slide-title{
        font-size:36px;
    }

    .slide-subtitle{
        font-size:16px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width:768px){

    .mySlider{
        height:60vh;
    }

    .overlay{
        left:5%;
        right:5%;
        max-width:100%;
        text-align:center;
    }

    .slide-title{
        font-size:24px;
    }

    .slide-subtitle{
        font-size:14px;
    }

    .slide-btn{
        padding:10px 20px;
        font-size:14px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        transform:scale(0.7);
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width:480px){

    .mySlider{
        height:55vh;
    }

    .slide-title{
        font-size:20px;
    }

    .slide-subtitle{
        font-size:13px;
    }
}