/* =================================
   EVENT SECTION — FINAL CLEAN BLEND
   Smooth transition from MENU → EVENT
================================= */

.event-section{
    position:relative;
    background:
            linear-gradient(
                    180deg,
                    var(--event-bg-1),
                    var(--event-bg-2)
            );
    padding:50px 0 50px;
    color:#fff;
}



/* Smooth fade dari section MENU */

.event-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:40px;

    background:
            linear-gradient(
                    180deg,
                    rgba(24,17,12,0),
                    var(--event-bg-1)
            );

    pointer-events:none;
}



/* =================================
   HEADER
================================= */

.event-header{
    display:flex;
    justify-content:center;
    margin-bottom:24px;   /* ✅ rapihin jarak */
}

.event-title-wrap{
    text-align:center;
}

.event-title{
    font-size:34px;
    letter-spacing:.15em;
}

.event-title:after{
    content:"";
    display:block;
    width:80px;
    height:2px;
    background:#9FB4A3;
    margin:12px auto 0;
    opacity:.65;
}

.event-sub{
    margin-top:10px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    font-size:12px;
    letter-spacing:.15em;
    color:#9FB4A3;
}

.event-sub .dot{
    width:7px;
    height:7px;
    background:#9FB4A3;
    border-radius:50%;
}



/* =================================
   SWIPER LAYOUT
================================= */

.event-swiper{
    max-width:1100px;
    margin:0 auto 35px;  /* rapat antar divider */

    padding:0 50px 30px;
    padding-right:120px;       /* glimpse next card */

    position:relative;
    overflow:visible;
}

.event-swiper .swiper-slide{
    width: calc(100% / 3) !important;
    max-width:100%;
}


/* Responsive slides */

@media(max-width:992px){
    .event-swiper .swiper-slide{
        width:50% !important;
    }
}

@media(max-width:600px){
    .event-swiper .swiper-slide{
        width:85% !important;
    }

    .event-swiper{
        padding-right:60px;
    }
}


/* Peek fade edge */

.event-swiper::after{
    content:"";
    position:absolute;
    top:0;
    right:0;

    width:120px;
    height:100%;

    background:
            linear-gradient(
                    90deg,
                    rgba(16,16,16,0),
                    rgba(16,16,16,.98)
            );

    pointer-events:none;
}


/* =================================
   EVENT CARD
================================= */

.event-card{
    width:100% !important;
    aspect-ratio:4/5;

    background:#000;

    border-radius:16px;
    overflow:hidden;
    position:relative;

    box-shadow:0 14px 35px rgba(0,0,0,.38);

    transition:.3s ease;
}

.event-card:hover{
    transform:translateY(-6px) scale(1.04);
}

.event-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}



/* =================================
   DATE LABEL
================================= */

.event-label{
    position:absolute;
    top:12px;
    left:12px;

    background:#9FB4A3;
    color:#111;

    padding:6px 14px;
    border-radius:50px;

    font-size:11px;
}



/* =================================
   BOTTOM TITLE BAR
================================= */

.event-title-card{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:14px 12px 16px;
    text-align:center;

    background:
            linear-gradient(
                    to top,
                    rgba(0,0,0,.75),
                    rgba(0,0,0,0)
            );

    font-size:12px;
    letter-spacing:.12em;
}



/* =================================
   ACTION BUTTONS
================================= */

.event-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

/* LEARN MORE */

.btn-learn{
    border:1px solid #9FB4A3;
    color:#9FB4A3;

    padding:6px 16px;
    border-radius:20px;

    text-decoration:none;
    font-size:11px;

    transition:.2s;
}

.btn-learn:hover{
    background:#9FB4A3;
    color:#111;
}

/* WA BUTTON */

.btn-wa{
    background:#25D366;
    color:#111;

    padding:6px 16px;
    border-radius:20px;

    text-decoration:none;

    display:flex;
    align-items:center;
    gap:6px;

    font-size:11px;
}

.btn-wa:hover{
    background:#1EBE5D;
}



/* ICON */

.wa-icon-small{
    width:14px;
    height:14px;
    fill:#111;
}



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

.swiper-button-next,
.swiper-button-prev{
    color:#9FB4A3;
}

.swiper-pagination-bullet{
    background:#777;
}

.swiper-pagination-bullet-active{
    background:#9FB4A3;
}



/* =================================
   MOBILE
================================= */

@media(max-width:768px){

    .event-swiper{
        padding:0 20px 25px;
    }

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



/* =================================
   DIVIDER BOTTOM — LUXURY SEPARATOR
================================= */

.event-section::after{
    content:"";
    display:block;

    width:75%;
    height:1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(227,193,138,.45),
                    transparent
            );

    margin:35px auto 0;

    opacity:.7;
}