.event-details-section{
    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;
}

.event-details-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:90px 42px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* ========================================
   DESKTOP
======================================== */
@media (min-width:1025px){
    .event-details-content{
        width:min(900px,100%);
        padding:90px 38px;
    }
}

/* ========================================
   TABLET + MOBILE
======================================== */
@media (max-width:1024px){
    .event-details-content{
        width:100%;
        max-width:760px;
        padding:75px 28px;
    }
}

/* ========================================
   SMALL MOBILE
======================================== */
@media (max-width:480px){
    .event-details-content{
        padding:65px 20px;
    }
}

/* ========================================
   COUNTDOWN
======================================== */
.event-details-countdown{
    width:100%;
    max-width:520px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:44px;
}

.event-details-countdown-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.event-details-countdown-item h2{
    font-family:var(--heading);
    font-size:3rem;
    font-weight:600;
    line-height:1;
    margin-bottom:8px;
}

.event-details-countdown-item span{
    font-size:.82rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.88);
}

/* ========================================
   TABLET
======================================== */
@media (max-width:1024px){
    .event-details-countdown{
        max-width:480px;
        gap:16px;
        margin-bottom:40px;
    }

    .event-details-countdown-item h2{
        font-size:2.6rem;
    }
}

/* ========================================
   MOBILE
======================================== */
@media (max-width:768px){
    .event-details-countdown{
        max-width:360px;
        gap:14px;
        margin-bottom:34px;
    }

    .event-details-countdown-item h2{
        font-size:2.2rem;
    }

    .event-details-countdown-item span{
        font-size:.72rem;
    }

    .event-details-save-date{
        width:180px;
        height:46px;
        margin-top:10px;
        margin-bottom:30px;
        font-size:.82rem;
    }
}

/* ========================================
   SMALL MOBILE
======================================== */
@media (max-width:420px){
    .event-details-countdown{
        gap:10px;
    }

    .event-details-countdown-item h2{
        font-size:2rem;
    }
}

/* ========================================
   EVENT CARD
======================================== */
.event-details-card{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
}

/* ========================================
   TITLE
======================================== */
.event-details-title{
    font-family:var(--heading);
    font-size:3.25rem;
    font-weight:600;
    line-height:1.1;
    text-align:center;
    margin-bottom:42px;
}

/* ========================================
   DATE ROW
======================================== */
.event-details-date-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:36px;
    margin-bottom:42px;
}

/* ========================================
   LEFT & RIGHT
======================================== */
.event-details-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

.event-details-line{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.55);
}

.event-details-line2{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.55);
}

.event-details-side h4{
    font-family:var(--heading);
    font-size:1.55rem;
    font-weight:600;
    text-align:center;
    white-space:nowrap;
}

/* ========================================
   DATE CENTER
======================================== */
.event-details-date{
    min-width:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.event-details-date span{
    font-size:.88rem;
    letter-spacing:3px;
    text-transform:uppercase;
}

.event-details-date h3{
    font-family:var(--heading);
    font-size:4.8rem;
    font-weight:600;
    line-height:.9;
    margin:10px 0;
}

/* ========================================
   LOCATION
======================================== */
.event-details-location{
    font-family:var(--heading);
    font-size:2rem;
    font-weight:600;
    text-align:center;
    margin-bottom:12px;
}

.event-details-address{
    width:100%;
    max-width:520px;
    text-align:center;
    line-height:1.8;
    font-size:.98rem;
    color:rgba(255,255,255,.90);
    margin-bottom:34px;
}

/* ========================================
   MAP BUTTON
======================================== */
.event-details-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:210px;
    height:50px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    transition:.35s;
}

.event-details-button:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-2px);
}

/* ========================================
   DIVIDER
======================================== */
.event-details-divider{
    width:1px;
    height:85px;
    margin:25px 0;
    background:rgba(255,255,255,.55);
}

/* ========================================
   DESKTOP
======================================== */
@media (min-width:1200px){
    .event-details-content{
        max-width:860px;
        padding:90px 40px;
    }

    .event-details-countdown{
        max-width:500px;
        gap:20px;
        margin-bottom:42px;
    }

    .event-details-title{
        font-size:3.2rem;
        margin-bottom:40px;
    }

    .event-details-date-row{
        column-gap:34px;
        margin-bottom:38px;
    }

    .event-details-side h4{
        font-size:1.55rem;
    }

    .event-details-date h3{
        font-size:4.7rem;
    }

    .event-details-location{
        font-size:1.9rem;
    }

    .event-details-address{
        max-width:520px;
    }
}

/* ========================================
   LAPTOP
======================================== */
@media (max-width:1199px){
    .event-details-content{
        max-width:760px;
        padding:80px 34px;
    }

    .event-details-countdown{
        max-width:460px;
    }

    .event-details-countdown-item h2{
        font-size:2.7rem;
    }

    .event-details-title{
        font-size:2.9rem;
    }

    .event-details-date-row{
        column-gap:26px;
    }

    .event-details-side h4{
        font-size:1.8rem;
    }

    .event-details-date h3{
        font-size:4rem;
    }
}

/* ========================================
   TABLET
======================================== */
@media (max-width:992px){
    .event-details-content{
        max-width:680px;
        padding:70px 28px;
    }

    .event-details-countdown{
        max-width:420px;
        gap:16px;
    }

    .event-details-countdown-item h2{
        font-size:2.4rem;
    }

    .event-details-title{
        font-size:2.5rem;
        margin-bottom:30px;
    }

    .event-details-date-row{
        column-gap:18px;
    }

    .event-details-side h4{
        font-size:1.8rem;
    }

    .event-details-date h3{
        font-size:3.5rem;
    }

    .event-details-location{
        font-size:1.55rem;
    }
}

/* ========================================
   MOBILE
======================================== */
@media (max-width:768px){
    .event-details-content{
        padding:60px 22px;
    }

    .event-details-countdown{
        max-width:340px;
        gap:12px;
        margin-bottom:30px;
    }

    .event-details-countdown-item h2{
        font-size:2rem;
    }

    .event-details-countdown-item span{
        font-size:.72rem;
    }

    .event-details-title{
        font-size:2.2rem;
        margin-bottom:26px;
    }

    .event-details-date-row{
        column-gap:12px;
    }

    .event-details-side{
        gap:12px;
    }

    .event-details-side h4{
        font-size:1.8rem;
    }

    .event-details-date{
        min-width:90px;
    }

    .event-details-date h3{
        font-size:3rem;
    }

    .event-details-date span{
        font-size:.78rem;
    }

    .event-details-location{
        font-size:1.35rem;
    }

    .event-details-address{
        font-size:.9rem;
        line-height:1.7;
        margin-bottom:24px;
    }

    .event-details-button{
        width:180px;
        height:46px;
        font-size:.82rem;
    }

    .event-details-divider{
        height:60px;
        margin:22px 0;
    }
}

/* ========================================
   SMALL MOBILE
======================================== */
@media (max-width:420px){
    .event-details-content{
        padding:56px 18px;
    }

    .event-details-countdown{
        gap:10px;
    }

    .event-details-countdown-item h2{
        font-size:1.8rem;
    }

    .event-details-title{
        font-size:2rem;
    }

    .event-details-side h4{
        font-size:1.7rem;
        font-weight:600;
    }

    .event-details-date h3{
        font-size:2.7rem;
    }

    .event-details-location{
        font-size:1.2rem;
    }

    .event-details-address{
        font-size:.84rem;
    }
}

/* Transisi */
.event-details-card,
.event-details-countdown-item,
.event-details-button{
    transition:all .35s ease;
}

/* Hover Card (Desktop) */
@media (hover:hover){
    .event-details-card:hover{
        transform:translateY(-2px);
    }
}

/* Countdown */
.event-details-countdown-item h2{
    text-shadow: 0 3px 12px rgba(0,0,0,.18);
}

.event-details-countdown-item span{
    opacity:.92;
}

/* Judul */
.event-details-title{
    letter-spacing:.4px;
    text-wrap:balance;
}

/* Tanggal */
.event-details-date h3{
    text-shadow: 0 4px 18px rgba(0,0,0,.22);
}

.event-details-date span{
    font-weight:500;
}

/* Garis */
.event-details-line{
    opacity:.75;
}

.event-details-location{
    letter-spacing:.3px;
}

.event-details-address{
    text-wrap:pretty;
}

.event-details-button{
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.event-details-button:hover{
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}

/* Fokus Keyboard */
.event-details-button:focus-visible{
    outline:2px solid rgba(255,255,255,.45);
    outline-offset:4px;
}

/* Desktop besar */
@media (min-width:1600px){
    .event-details-content{
        max-width:920px;
    }
}

/* HP kecil */
@media (max-width:360px){
    .event-details-countdown{
        gap:8px;
    }

    .event-details-countdown-item h2{
        font-size:1.6rem;
    }

    .event-details-title{
        font-size:1.8rem;
    }

    .event-details-location{
        font-size:1.1rem;
    }
}

/* ========================================
SAVE THE DATE
======================================== */
.event-details-save-date{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:210px;
    height:50px;
    margin-bottom:25px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    transition:.35s;
}

.event-details-save-date:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-2px);
}

/* ========================================
   EVENT DETAILS ANIMATION
======================================== */
.event-details-countdown,
.event-details-save-date,
.event-details-card{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.event-details-section.is-visible .event-details-countdown{
    opacity:1;
    transform:translateY(0);
    transition-delay:.2s;
}

.event-details-section.is-visible .event-details-save-date{
    opacity:1;
    transform:translateY(0);
    transition-delay:.4s;
}

.event-details-section.is-visible .event-details-card{
    opacity:1;
    transform:translateY(0);
}

.event-details-section.is-visible .event-details-card:nth-child(3){
    transition-delay:.6s;
}

.event-details-section.is-visible .event-details-card:nth-child(5){
    transition-delay:.8s;
}