/* ==========================================================
   STUDIO1 HERO PREMIUM
========================================================== */

.hero {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 700px;

    overflow: hidden;

    display: flex;

    align-items: center;

    color: #fff;

    background: #000;

    touch-action: pan-y;

    user-select: none;

    -webkit-user-select: none;

}

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

.hero-slider {

    position: absolute;

    inset: 0;

    z-index: 1;

}

.hero-slide {

    display: flex;

    align-items: center;

    justify-content: center;
    
    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;

}

.hero-slide.active {

    opacity: 1;

    visibility: visible;

}

.hero-slide img,

.hero-slide video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

    pointer-events: none;

}

.hero-badge,
.hero-content h1,
.hero-subtitle,
.hero-content p,
.hero-buttons {

    filter: blur(8px);

}

.hero-slide.active .hero-badge,
.hero-slide.active h1,
.hero-slide.active .hero-subtitle,
.hero-slide.active p,
.hero-slide.active .hero-buttons{

    filter: blur(0);

}

/* ==========================================================
   KEN BURNS EFFECT
========================================================== */

.hero-slide img {

    animation: heroZoom 12s linear infinite;

}

@keyframes heroZoom {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.08);

    }

}

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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.70),
            rgba(0,0,0,.40)
        );

}

/* ==========================================================
   CONTENT
========================================================== */

.hero-content {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items:flex-end;

    padding-bottom:60px;

}

.hero-content .container {

    width: min(1280px, calc(100% - 80px));

    margin: 0 auto;

}

.hero-badge {

    display: inline-block;

    padding: 8px 20px;

    border-radius: 35px;

    background: rgba(255,255,255,.10);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.25);

    font-size: 1rem;

    letter-spacing: 2px;

    margin-bottom: 10px;

}

.hero-content h1 {

    font-size: clamp(2.5rem,5vw,4.5rem);

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: 25px;

}

.hero-content p {

    width: 650px;

    max-width: 100%;

    font-size: 1.25rem;

    line-height: 1.8;

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

    margin-bottom: 40px;

}

.hero-subtitle{

    font-size: clamp(1.4rem,2vw,2rem);

    font-weight: 700;

    margin-bottom: 8px;

    color: #f7e22bf2;

}

/* ==========================================================
   BUTTON
========================================================== */

.hero-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.hero-buttons .btn {

    min-width: 170px;

    padding: 6px 28px;

    font-size:1.2rem;

    border-radius: 50px;

    text-align: center;

    transition: .35s;
transition:
        transform .35s,
        box-shadow .35s,
        background .35s;
}

.btn-gold {

    background: #D4AF37;

    color: #111;

    font-weight: 700;

    border: 2px solid #D4AF37;

}

.btn-gold:hover {

    background: #E7C766;

    border-color: #E7C766;

    color:#111;

    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(212,175,55,.35);

}

.btn-outline {

    border: 2px solid rgba(255,255,255,.65);

    color: #fff;

}

.btn-outline:hover {

    background: rgba(255,255,255,.12);

}

/* ==========================================================
   PREV NEXT
========================================================== */

.hero-prev,

.hero-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 58px;

    height: 58px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,.15);

    backdrop-filter: blur(10px);

    color: #fff;

    cursor: pointer;

    z-index: 8;

    transition: .3s;

}

.hero-prev {

    left: 30px;

}

.hero-next {

    right: 30px;

}

.hero-prev:hover,

.hero-next:hover {

    background: #D4AF37;

    color: #111;

}

/* ==========================================================
   INDICATOR
========================================================== */

.hero-indicators {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    z-index: 8;

}

.hero-indicators button {

    width: 13px;

    height: 13px;

    border-radius: 50%;

    border: none;

    cursor: pointer;

    background: rgba(255,255,255,.35);

    transition: .3s;

}

.hero-indicators button.active {

    width: 42px;

    border-radius: 20px;

    background: #D4AF37;

}

.hero-buttons .btn:hover{

    transform: translateY(-4px);

}

/* ==========================================================
   SCROLL
========================================================== */

.hero-scroll {

    position: absolute;

    bottom: 30px;

    right: 40px;

    z-index: 8;

}

.hero-scroll span {

    display: block;

    width: 28px;

    height: 48px;

    border: 2px solid #fff;

    border-radius: 30px;

    position: relative;

}

.hero-scroll span::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 8px;

    width: 6px;

    height: 6px;

    margin-left: -3px;

    border-radius: 50%;

    background: #fff;

    animation: wheel 2s infinite;

}

@keyframes wheel {

    0% {

        opacity: 0;

        top: 8px;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        top: 28px;

    }

}

/* ==========================================================
   HERO TEXT ANIMATION
========================================================== */

.hero-badge,
.hero-content h1,
.hero-subtitle,
.hero-content p,
.hero-buttons .btn {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

/* Slide aktif */

.hero-slide.active .hero-badge {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .25s;

}

.hero-slide.active h1 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .45s;

}

.hero-slide.active .hero-subtitle {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .65s;

}

.hero-slide.active p {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .85s;

}

.hero-slide.active .hero-buttons .btn:nth-child(1) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 1.05s;

}

.hero-slide.active .hero-buttons .btn:nth-child(2) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 1.20s;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

.hero{

min-height:650px;

}

.hero-content{

text-align:center;

padding-bottom:70px;

}

.hero-buttons{

justify-content:center;

}

.hero-content p{

margin:auto;

margin-bottom:35px;

}

.hero-prev,

.hero-next{

display:none;

}

}

@media (max-width:768px){

.hero{

min-height:600px;

}

.hero-badge{

display:none !important;

}

.hero-content h1{

font-size:1.7rem;

}

.hero-content p{

font-size:1rem;

line-height:1.7;

}

.hero-buttons .btn{

width:100%;

}

.hero-scroll{

display:none;

}

}