/*==================================================
   SERIEZLOADED HERO V2 (BULLETPROOF BOTTOM-LEFT)
==================================================*/

.sl-hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:var(--page-bg);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

/*==================================
SLIDER
==================================*/

.sl-hero-slider{
    position:relative;
    min-height:760px;
}

/*==================================
SLIDES
==================================*/

.sl-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 1.2s ease, transform 1.2s ease;
    transform:scale(1.02);
}

.sl-slide.active{
    opacity:1;
    visibility:visible;
    z-index:2;
    transform:scale(1);
}

/*==================================
BACKDROP + PARALLAX
==================================*/

.sl-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:120%;
    object-fit:cover;
    object-position:center top;
    transform:translateY(0) scale(1.05);
    transition:transform 1.2s ease;
}

.sl-slide.active .sl-backdrop{
    transform:translateY(-20px) scale(1.08);
}

/*==================================
GRADIENT
==================================*/

.sl-gradient{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.12) 25%,
        rgba(0,0,0,.35) 50%,
        rgba(0,0,0,.72) 72%,
        rgba(0,0,0,.96) 100%
    );
}

/*==================================
🔥 KEY FIX: FULL ABSOLUTE CONTAINER
==================================*/

.sl-content{
    position:absolute;
    inset:0;
    z-index:5;
}

/*==================================
🔥 TRUE BOTTOM-LEFT STACK (NO FLEX DRIFT)
==================================*/

.sl-info-box{
    position:absolute;

    left:70px;
    bottom:70px;

    max-width:760px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:12px;

    color:#fff;
}

/*==================================
CLICKABLE OVERLAY
==================================*/

.sl-slide-link{
    position:absolute;
    inset:0;
    z-index:10;
}

/*==================================
REMOVE UNUSED ELEMENTS
==================================*/

.sl-year,
.sl-download,
.sl-poster-box{
    display:none !important;
}

/*==================================
LOGO (BOTTOM LEFT CLEAN)
==================================*/

.sl-hero-logo{
    max-width:420px;

    opacity:0;
    transform:translateY(30px);
}

.sl-slide.active .sl-hero-logo{
    animation:fadeUp .8s ease forwards;
    animation-delay:.3s;
}

/*==================================
DESCRIPTION (GLASS ONLY)
==================================*/

.sl-description{
    font-size:18px;
    line-height:1.8;
    max-width:650px;

    color:rgba(255,255,255,.92);

    padding:14px 18px;
    border-radius:14px;

    background:rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    transform:translateY(20px);
}

/* stagger */
.sl-slide.active .sl-description{
    animation:fadeUp .8s ease forwards;
    animation-delay:.55s;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*==================================
CONTROLS
==================================*/

.sl-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:24px;
    z-index:20;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.sl-prev,
.sl-next{
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
}

.sl-prev:hover,
.sl-next:hover{
    background:#e50914;
}

.sl-dots{
    display:flex;
    gap:10px;
}

.sl-dot{
    width:38px;
    height:4px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.25);
}

.sl-dot span{
    display:block;
    width:0;
    height:100%;
    background:#e50914;
}

.sl-dot.active span{
    width:100%;
    transition:7s linear;
}

/*==================================
MOBILE FIX (ALSO TRUE BOTTOM-LEFT)
==================================*/

@media (max-width:768px){

.sl-hero{
    border-radius:0;
    margin:0;
}

.sl-hero-slider{
    min-height:62vh;
}

/* SAME SYSTEM — NO FLEX */
.sl-content{
    position:absolute;
    inset:0;
}

.sl-info-box{
    left:14px;
    bottom:40px;
    right:14px;

    position:absolute;

    max-width:95%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:10px;
}

/* logo */
.sl-hero-logo{
    max-width:240px;
}

/* description */
.sl-description{
    font-size:13px;
    line-height:1.55;
    max-width:100%;
}

/* controls */
.sl-controls{
    bottom:12px;
}

.sl-prev,
.sl-next{
    display:none;
}

.sl-dot{
    width:22px;
}

}